/* ═══ CaptuREE — homepage only ═══ */

/* ───────── HERO ───────── */
.hero{
  position:relative;min-height:100svh;
  display:grid;align-content:end;justify-items:center;
  padding-bottom:clamp(3rem,8vh,5rem);
  overflow:hidden;isolation:isolate;
}
#fx,#mesh{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hero-band{
  position:relative;z-index:2;width:100%;background:var(--ink);
  border-top:1px solid rgba(255,255,255,.09);
  border-bottom:1px solid rgba(255,255,255,.09);
  padding:clamp(1.6rem,3.4vw,2.5rem) 0;
}
.hero-inner{text-align:center;max-width:min(94vw,980px);margin:0 auto}
.hero h1{font-size:clamp(2.2rem,6.2vw,5.4rem);max-width:15ch;margin:0 auto 1.1rem}
.hero-sub{
  font-size:clamp(.95rem,1.6vw,1.08rem);font-weight:500;
  color:rgba(255,255,255,.78);max-width:46ch;margin:0 auto;line-height:1.65
}
.hero-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:clamp(1.2rem,2.4vw,1.7rem)}
.hero-cta{
  display:inline-block;
  font-weight:700;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.85rem 1.6rem;border:2px solid var(--red);
  background:var(--red);color:var(--white);
  transition:background .2s,color .2s,border-color .2s;
}
.hero-cta:hover{background:transparent;color:var(--white)}
/* secondary: same footprint, no fill, so the primary stays the louder of the two */
.hero-cta.alt{background:transparent;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.85)}
.hero-cta.alt:hover{border-color:var(--white);color:var(--white)}
@media(max-width:520px){.hero-ctas{flex-direction:column}.hero-cta{text-align:center}}
.scroll-hint{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.4);z-index:3}

/* ───────── WHAT ───────── */
.what-head{max-width:20ch;margin-bottom:clamp(2rem,4.5vw,3.2rem)}
.what-head .tag{color:var(--red-bright);display:block;margin-bottom:.9rem}
.what-head h2{font-size:clamp(1.9rem,5vw,3.4rem)}
.what-grid{border-top:1px solid rgba(255,255,255,.14)}
.what-item{
  display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);
  gap:clamp(1rem,4vw,3rem);padding:clamp(1.5rem,3vw,2.2rem) 0;
  border-bottom:1px solid rgba(255,255,255,.14);align-items:start;
}
.what-item h3{font-size:clamp(1.2rem,2.4vw,1.65rem)}
.what-item p{color:rgba(255,255,255,.72);font-size:.98rem;max-width:56ch}
.what-item .rule{height:4px;background:var(--red);width:2.4rem;margin-bottom:.55rem}
@media(max-width:720px){.what-item{grid-template-columns:1fr;gap:.55rem}}
.withheld{
  margin-top:clamp(2rem,4vw,3rem);font-family:var(--display);
  font-size:clamp(1.05rem,2.4vw,1.5rem);color:var(--grey);max-width:24ch
}

/* ————————— TIMELINE —————————*/

/* Fallbacks: these only apply if the host page hasn't already defined them.
   If your :root already sets --red / --ink / etc, yours win — delete this block. */
.tl-section{
  --tl-red:      var(--red, #C1291B);
  --tl-red-lit:  var(--red-bright, #E8382A);
  --tl-ink:      var(--ink, #080808);
  --tl-display:  var(--display, 'Anton', Impact, sans-serif);
  --tl-gap:      clamp(2.4rem, 7vw, 5rem);
  background:var(--tl-ink);
  color:#fff;
  padding:clamp(3.2rem,7.5vw,5.6rem) 0;
  scroll-margin-top:4.5rem;
}
.tl-wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}

.tl-head{margin-bottom:clamp(2.4rem,5vw,3.6rem);max-width:20ch}
.tl-eyebrow{
  display:block;margin-bottom:.9rem;
  font-weight:600;font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--tl-red-lit);
}
.tl-head h2{
  font-family:var(--tl-display);font-weight:400;
  font-size:clamp(1.9rem,5vw,3.4rem);line-height:.92;letter-spacing:-.015em;
}

.tl{position:relative;max-width:920px;margin:0 auto;padding:.4rem 0 0;list-style:none}
.tl-spine,.tl-fill{position:absolute;left:50%;top:0;width:2px;transform:translateX(-1px)}
.tl-spine{bottom:0;background:rgba(255,255,255,.15)}
.tl-fill{height:0;background:var(--tl-red);transition:height .12s linear}

.tl-item{
  position:relative;display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--tl-gap);
  padding-bottom:clamp(2rem,4.2vw,2.9rem);
}
.tl-item:last-child{padding-bottom:0}

.tl-date{
  font-family:var(--tl-display);font-weight:400;
  font-size:clamp(1.05rem,2vw,1.45rem);
  line-height:.95;padding-top:.12em;           /* optical match to the h3 baseline */
  color:rgba(255,255,255,.5);white-space:nowrap;transition:color .3s;
}
.tl-item.now .tl-date{color:var(--tl-red-lit)}

.tl-card h3{
  font-family:var(--tl-display);font-weight:400;letter-spacing:-.015em;
  font-size:clamp(1.1rem,2.1vw,1.4rem);line-height:.92;margin:0 0 .4rem;
}
.tl-card p{margin:0;font-size:.88rem;color:rgba(255,255,255,.62);font-weight:500;line-height:1.6}
.tl-badge{
  display:inline-block;margin-top:.6rem;font-size:.6rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tl-red-lit);
  border:1px solid rgba(232,56,42,.45);padding:.22rem .5rem;
}

/* alternate sides; the date always hugs the spine opposite its entry */
.tl-item:nth-child(odd)  .tl-date{grid-column:1;text-align:right}
.tl-item:nth-child(odd)  .tl-card{grid-column:2;text-align:left}
.tl-item:nth-child(even) .tl-card{grid-column:1;text-align:right}
.tl-item:nth-child(even) .tl-date{grid-column:2;text-align:left}

/* connector, spine out to the entry */
.tl-item::after{
  content:"";position:absolute;top:.62em;height:1px;
  background:rgba(255,255,255,.22);
  width:calc(var(--tl-gap) / 2 - 7px);
  transform:scaleX(0);
  transition:transform .5s cubic-bezier(.3,.7,.3,1);
  transition-delay:var(--d,0ms);
}
.tl-item:nth-child(odd)::after {left:50%;margin-left:7px;transform-origin:left}
.tl-item:nth-child(even)::after{right:50%;margin-right:7px;transform-origin:right}
.tl-item.in::after{transform:none}

/* node on the spine */
.tl-item::before{
  content:"";position:absolute;left:50%;top:.62em;z-index:2;
  width:13px;height:13px;border-radius:50%;background:var(--tl-red);
  transform:translate(-50%,-50%) scale(0);
  transition:transform .45s cubic-bezier(.3,1.5,.5,1);
  transition-delay:var(--d,0ms);
}
.tl-item.in::before{transform:translate(-50%,-50%) scale(1)}
.tl-item.now::before{box-shadow:0 0 0 5px rgba(232,56,42,.25)}

/* reveal */
.tl-head [data-tl-rise],
.tl-item{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.25,1),transform .7s cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--d,0ms)}
.tl-head [data-tl-rise].in,
.tl-item.in{opacity:1;transform:none}

/* alternating sides are unreadable on a phone: collapse to a left spine */
@media(max-width:720px){
  .tl{max-width:none}
  .tl-spine,.tl-fill{left:6px}
  .tl-item{
    grid-template-columns:1fr;column-gap:0;row-gap:.45rem;
    padding-left:2.4rem;padding-bottom:2.2rem;
  }
  .tl-item:nth-child(odd) .tl-date,
  .tl-item:nth-child(even) .tl-date{grid-column:1;grid-row:1;text-align:left}
  .tl-item:nth-child(odd) .tl-card,
  .tl-item:nth-child(even) .tl-card{grid-column:1;grid-row:2;text-align:left}
  .tl-item::before{left:6px}
  .tl-item::after,
  .tl-item:nth-child(odd)::after,
  .tl-item:nth-child(even)::after{display:none}
}

@media(prefers-reduced-motion:reduce){
  .tl-item,.tl-head [data-tl-rise]{opacity:1;transform:none}
  .tl-item::before{transform:translate(-50%,-50%) scale(1)}
  .tl-item::after{transform:none}
  .tl-section *{transition-duration:.001ms !important}
}

/* ───────── VALUES ───────── */
.values-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:clamp(2rem,4vw,3rem)}
.values-head h2{font-size:clamp(1.9rem,5vw,3.4rem)}
.values-head p{max-width:34ch;font-size:.92rem;color:#4a4a4a;font-weight:500}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(8,8,8,.16);border:1px solid rgba(8,8,8,.16)}
.value{background:var(--paper);padding:clamp(1.1rem,2.6vw,1.7rem);transition:background .18s,color .18s}
.value h3{font-size:1.15rem;margin-bottom:.5rem}
.value p{font-size:.88rem;color:#4a4a4a;font-weight:500;line-height:1.6;transition:color .18s}
.value:hover{background:var(--red);color:var(--ink)}
.value:hover p{color:rgba(8,8,8,.82)}
@media(max-width:900px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.values{grid-template-columns:1fr}}

/* ───────── TEAM ───────── */
.team-head{margin-bottom:clamp(2rem,4vw,3rem)}
.team-head .tag{color:var(--red-bright);display:block;margin-bottom:.9rem}
.team-head h2{font-size:clamp(1.9rem,5vw,3.4rem)}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.person{border-top:4px solid var(--red);padding-top:1.2rem}
.photo{
  position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;margin-bottom:1rem;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 10px, transparent 10px 20px),
    var(--ink-2);
  border:1px solid rgba(255,255,255,.12);
}
.photo::after{
  content:attr(data-ph);position:absolute;inset:auto 0 .8rem 0;text-align:center;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.32)
}
.photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.photo:has(img){background:none;border:0}
.photo:has(img)::after{content:none}
.person .role{color:var(--red-bright);font-weight:700;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.person h3{font-size:1.7rem;margin:.35rem 0 .5rem}
.person p{font-size:.9rem;color:rgba(255,255,255,.7);max-width:40ch}
.person a{display:inline-block;margin-top:.8rem;font-size:.8rem;font-weight:600;border-bottom:2px solid var(--red);padding-bottom:2px}