/* =========================================================================
   Sprout Timeline — Elementor widget styles
   Everything visual is driven by CSS custom properties that the widget sets
   inline from the Elementor controls (colors, sizes, ratios) plus Elementor
   typography controls (fonts). Values below are only fallback defaults.
   ========================================================================= */

.sprout-timeline{
  --bg:#0a0a0a;
  --surface:#161616;
  --surface-2:#1c1c1c;
  --line:rgba(255,255,255,0.08);
  --ink:#f4f2ee;
  --ink-dim:#9a978f;
  --ink-faint:#5c5a54;
  --accent:#d9ff5c;
  --st-line:rgba(255,255,255,0.16);
  --st-fill:rgba(255,255,255,0.95);
  --card-w: min(1000px, 62vw);
  --card-h: 470px;
  --gap: 44px;
  --media-w: 60%;
  --card-radius: 20px;
  --pad-y: 80px;
  --ease: cubic-bezier(.65,0,.35,1);
  position:relative;
  width:100%;
}

.sprout-timeline .card-year, .sprout-timeline .card-title, .sprout-timeline .rail-label{
	    font-family: "Google Sans Flex", Sans-serif !important;
}
.sprout-timeline *{ box-sizing:border-box; }

.sprout-timeline .stage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: var(--pad-y) 0;
 background:
    radial-gradient(ellipse 900px 500px at 18% 8%, rgba(217,255,92,0.05), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 95%, rgba(255,255,255,0.035), transparent 60%),
    var(--bg); 
  overflow:hidden;
}
.sprout-timeline .stage::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.4;
/* background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); */
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, black 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 38%, black 0%, transparent 75%);
}

.sprout-timeline .eyebrow{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:36px;
  font-size:12.5px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
  font-weight:600;
}
.sprout-timeline .eyebrow::before{
  content:"";
  width:7px; height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px 2px rgba(217,255,92,0.55);
}

/* ===== Carousel ===== */
.sprout-timeline .carousel{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1720px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 24px;
}
.sprout-timeline .viewport{
  position:relative;
  width:100%;
  max-width:calc(var(--card-w) + 640px);
  height:var(--card-h);
  overflow:hidden;
}
.sprout-timeline .viewport::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:5;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,0) 8%, rgba(0,0,0,0) 92%, var(--bg) 100%);
}
.sprout-timeline .track{
  position:absolute;
  top:0; left:50%;
  height:100%;
  display:flex;
  align-items:center;
  gap:var(--gap);
  transition: transform .55s var(--ease);
  will-change: transform;
}
.sprout-timeline .card{
  position:relative;
  flex:0 0 var(--card-w);
  width:var(--card-w);
  height:var(--card-h);
  display:flex;
  border-radius:var(--card-radius);
  overflow:hidden;
/*   background:var(--surface); */
  border:1px solid var(--line);
  transform: scale(0.94);
  opacity:0.4;
  transition: transform .55s var(--ease), opacity .55s var(--ease), filter .55s var(--ease);
}
.sprout-timeline .card.is-active{
  transform: scale(1);
  opacity:1;
  filter:none;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.sprout-timeline .card.is-adjacent{ opacity:0.55; transform: scale(0.96); }

.sprout-timeline .card-media{
  position:relative;
  flex:0 0 var(--media-w);
  height:100%;
  overflow:hidden;
  background:var(--surface-2);
}
.sprout-timeline .media-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
/*   transform: scale(1.04); */
  transition: transform 6s cubic-bezier(.2,.6,.2,1);
}
.sprout-timeline .card.is-active .media-img{ transform: scale(1.1); }
.sprout-timeline .card-media::after{
  content:"";
  position:absolute; inset:0;
/*   background:
    linear-gradient(90deg, transparent 52%, var(--surface) 100%),
    linear-gradient(0deg, rgba(0,0,0,0.35), transparent 45%); */
  z-index:1;
}
.sprout-timeline .brand-chip{
  position:absolute;
  top:22px; left:22px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px 7px 10px;
  border-radius:999px;
  background:rgba(10,10,10,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,0.12);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--ink);
}
.sprout-timeline .brand-chip .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}

.sprout-timeline .card-body{
  position:relative;
  flex:1;
  padding: 48px 30px 46px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
	background: #1F1F1F;
}
.sprout-timeline .body-bottom{ max-width:44ch; }

.sprout-timeline .card-year{
  font-weight:300 !important;
  font-size:clamp(52px, 5.4vw, 74px);
  line-height:0.95;
  letter-spacing:-0.02em;
  color:var(--ink);
  margin:0;
}
.sprout-timeline .card-month{
  font-size:16px;
  font-weight:400;
  letter-spacing:0.01em;
  color:var(--ink-faint);
  margin:8px 0 0;
}
.sprout-timeline .card-title{
  font-weight:600;
  font-size:27px;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 16px;
}
.sprout-timeline .card-desc{
  font-size:15px;
  line-height:1.7;
  color:var(--ink-dim);
  font-weight:400;
  margin:0;
}

/* ===== Arrows — identical frosted-glass blur both sides ===== */
.sprout-timeline .nav-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  width:54px; height:54px;
 border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 30px -8px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  color:var(--ink);
  cursor:pointer;
  z-index:6;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
	
   
}
.sprout-timeline .nav-btn:hover{
  background:rgba(255,255,255,0.14);
  border-color:rgba(255,255,255,0.32);
}
.sprout-timeline .nav-btn:active{ transform: translateY(-50%) scale(0.92); }
.sprout-timeline .nav-btn svg{ width:18px; height:18px; }
.sprout-timeline .nav-prev{ left:0;
 background-image: url(https://sprout-new-dev.sproutwebsites.co.uk/wp-content/uploads/2026/07/left-arrow.png)  !important;
    background-position: center  !important;
    background-repeat: no-repeat  !important;
}
.sprout-timeline .nav-next{ right:0; 
 background-image: url(https://sprout-new-dev.sproutwebsites.co.uk/wp-content/uploads/2026/07/right-arrow.png) !important;
    background-position: center  !important;
    background-repeat: no-repeat  !important;
}
.sprout-timeline .nav-btn:disabled{ opacity:0.3; cursor:default; }
.sprout-timeline .nav-btn:disabled:hover{ background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.18); }

/* ===== Timeline rail (centered filmstrip — slides with the cards) ===== */
.sprout-timeline .rail-wrap{
  position:relative;
  z-index:2;
  width:100%;
  max-width:100%;
  margin-top:72px;
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.sprout-timeline .rail{
  position:relative;
  display:flex;
  width:max-content;
  padding-bottom:2px;
  transition: transform .7s cubic-bezier(.65,0,.35,1);
  will-change: transform;
}
.sprout-timeline .rail-line{
  position:absolute;
  left:0; right:0; bottom:12px;
  height:1.5px;
  background:var(--st-line);
  overflow:hidden;
}
.sprout-timeline .rail-line-fill{
  position:absolute;
  top:0; left:0; bottom:0;
  width:0;
  background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, var(--st-fill) 100%);
  box-shadow: 0 0 10px rgba(255,255,255,0.35);
  transition: width .7s cubic-bezier(.65,0,.35,1);
}
.sprout-timeline .rail-item{
  position:relative;
  flex:0 0 auto;
  width:clamp(150px, 17vw, 224px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:30px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.sprout-timeline .rail-label{
/*   font-size:clamp(20px, 1.7vw, 28px); */
  font-weight:300;
  color:var(--ink-faint);
  letter-spacing:-0.01em;
  transition: color .35s var(--ease);
}
.sprout-timeline .rail-item.is-past .rail-label{ color:var(--ink-dim); }
.sprout-timeline .rail-item.is-active .rail-label{ color:var(--ink); }
.sprout-timeline .rail-item:hover .rail-label{ color:var(--ink); }
.sprout-timeline .rail-node{
      position: relative;
    width: 40px;
    height: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    top: -3px;
    background: #0f0f0f;
}
.sprout-timeline .rail-node::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background: rgba(255,255,255,0.55);
  transition: all .35s var(--ease);
}
.sprout-timeline .rail-item.is-past .rail-node::before{ background: rgba(255,255,255,0.8); }
.sprout-timeline .rail-item:hover .rail-node::before{ background: #fff; }
.sprout-timeline .rail-item.is-active .rail-node::before{
  width:14px; height:14px;
  background:#fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12), 0 0 14px rgba(255,255,255,0.4);
}

@media (max-width: 860px){
	
	.sprout-timeline .rail-wrap{
	  margin-top:0px;
	  margin-bottom:30px;
	}
	
	.sprout-timeline .carousel{padding: 0 0px;}
	.sprout-timeline .nav-next, .sprout-timeline .nav-prev{
		background-size: 30%;
	}
  .sprout-timeline{ --card-h:auto; --card-w:min(560px, 84vw); }
  .sprout-timeline .card{ flex-direction:column; height:auto; }
  .sprout-timeline .card.is-active{ transform: scale(1); }
  .sprout-timeline .card-media{ flex:0 0 220px; width:100%; }
  .sprout-timeline .card-body{ padding:15px; }
  .sprout-timeline .card-year{ font-size:56px; }
  .sprout-timeline .viewport{ height: 700px;
    max-width: min(560px, 100vw); }
  .sprout-timeline .nav-btn{ width:44px; height:44px; top:110px; }
/*   .sprout-timeline .nav-prev{ left:-6px; } .sprout-timeline .nav-next{ right:-6px; } */
}

/* Respect reduced motion — kill the long transitions/zoom */
@media (prefers-reduced-motion: reduce){
  .sprout-timeline .track,
  .sprout-timeline .rail,
  .sprout-timeline .rail-line-fill,
  .sprout-timeline .card,
  .sprout-timeline .media-img{ transition:none !important; }
}