/* ============================================================
   Home
   ============================================================ */

/* ---------- 1 · HERO ---------- */
.hero-track{ height:135vh; height:135svh; position:relative; }
.hero{
  position:sticky; top:0; height:100vh; height:100svh; min-height:600px;
  display:grid; align-items:center; overflow:hidden;
  background:var(--paper);
}
/* soft drifting motes */
.hero-field{ display:none; }

.hero-inner{ position:relative; z-index:2; will-change:transform, opacity; }
.hero-kicker{
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue-deep); opacity:0; animation:fadeUp .8s var(--ease-out) .1s forwards;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:.9; transform:none } }

h1.type{
  font-size:clamp(2.35rem, 6vw, 5rem); line-height:.92;
  margin:1.5rem 0 0; max-width:14ch; min-height:1.9em;
  font-variation-settings:"wdth" 94;
}
.type-out .lit{ color:var(--blue); }
.caret{
  display:inline-block; width:.05em; height:.8em; margin-left:.05em;
  background:var(--blue); vertical-align:-.05em; border-radius:2px;
  animation:blink .95s steps(1) infinite;
}
.caret.done{ opacity:.5; }
@keyframes blink{ 50%{ opacity:0 } }

.hero-lede{
  margin-top:1.8rem; max-width:44ch; font-size:clamp(1.02rem,1.55vw,1.28rem);
  color:var(--body-c); line-height:1.6; opacity:0; transform:translateY(12px);
}
.hero-lede.show{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform 1s var(--ease-out); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem; opacity:0; transform:translateY(12px); }
.hero-actions.show{ opacity:1; transform:none; transition:opacity .85s var(--ease) .1s, transform .95s var(--ease-out) .1s; }

.scroll-hint{
  position:absolute; left:50%; bottom:2.4rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.8rem; z-index:2;
  opacity:0; pointer-events:none;
}
.scroll-hint.show{ opacity:1; transition:opacity 1s var(--ease); }
.scroll-hint span{
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); text-align:center; max-width:min(86vw,34ch); text-indent:.24em;
}
.scroll-rail{ width:1px; height:54px; background:var(--line); position:relative; overflow:hidden; }
.scroll-rail i{
  position:absolute; inset:0 auto auto 0; width:1px; height:22px; background:var(--blue);
  animation:rail 2.1s var(--ease) infinite;
}
@keyframes rail{ 0%{ transform:translateY(-24px) } 60%,100%{ transform:translateY(56px) } }

/* ---------- 2 · TURNING POINT ---------- */
.turn{
  position:relative; z-index:2; background:#FFFFFF;
  transition:background-color .2s linear;
  padding:clamp(3.5rem,7vw,6rem) 0 0;
  border-radius:40px 40px 0 0; margin-top:-40px;
  box-shadow:0 -30px 70px -40px rgba(11,27,61,.28);
}
.turn-head{ max-width:70ch; }
.turn-head h2{ font-size:clamp(1.9rem,4.2vw,3.3rem); margin:1.3rem 0 0; }
.turn-lede{
  margin-top:1.7rem; max-width:52ch; font-size:clamp(1rem,1.4vw,1.16rem); font-weight:450;
}

.beats{
  list-style:none; margin:clamp(2.4rem,4.5vw,3.6rem) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:22px; overflow:hidden;
}
.beat{ background:var(--paper); padding:2.3rem 1.9rem 2.6rem; position:relative; transition:background .5s var(--ease); }
.beat{ transition:background .5s var(--ease), transform .55s var(--ease-out); }
.beat:hover{ background:var(--wash-2); transform:translateY(-3px); }
.beat-tag{
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--blue-deep); display:inline-block; padding:.32rem .7rem;
  background:var(--wash); border-radius:99px;
}
.beat h3{ font-size:1.4rem; margin:1.25rem 0 .85rem; line-height:1.12; }
.beat p{ font-size:.96rem; line-height:1.62; }
.beat::after{
  content:""; position:absolute; left:1.9rem; right:1.9rem; bottom:0; height:3px;
  background:linear-gradient(90deg,var(--blue),transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-out);
}
.beat:hover::after{ transform:scaleX(1); }

.turn-close{
  max-width:40ch; margin:clamp(3rem,6vw,5rem) 0 0 auto; text-align:right;
  font-family:var(--display); font-size:clamp(1.15rem,2vw,1.6rem);
  line-height:1.26; letter-spacing:-.03em; font-weight:600; color:var(--ink);
}

/* diagonal handoff */
.diagonal{
  position:relative; margin-top:clamp(2.4rem,4.5vw,3.6rem); height:clamp(170px,19vw,250px);
  overflow:hidden;
}
.diag-band{
  position:absolute; left:-30%; width:160%; display:flex; gap:1.6rem; align-items:center;
  font-family:var(--display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.9rem,4.4vw,3.4rem); white-space:nowrap;
  transform:rotate(-7deg); will-change:transform;
}
.diag-band{ top:14%; color:#E4EBFA; }
.diag-band.alt{ top:auto; bottom:26%; color:transparent; -webkit-text-stroke:1.3px rgba(78,111,245,.3); }
.diag-wipe{ display:none; }   /* replaced by an exact clip edge on .why */

/* ---------- 3 · WHY ---------- */
.why{
  position:relative; z-index:3; background:#FFFFFF;
  transition:background-color .2s linear;
  padding:clamp(4rem,7vw,6rem) 0 clamp(2rem,4vw,3.5rem);
  margin-top:clamp(-150px,-9vw,-70px);
  /* the edge is cut to match the band angle exactly, so there is no seam */
  clip-path:polygon(0 clamp(60px,7vw,120px), 100% 0, 100% 100%, 0 100%);
}
.why-shift, .turn-shift{ will-change:transform; }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:stretch; }
.why-card{
  position:relative; padding:2rem 1.9rem 2.2rem; border-radius:22px;
  background:var(--paper); border:1px solid var(--line-soft); overflow:hidden;
  box-shadow:0 1px 2px rgba(11,27,61,.04);
}
.why-card{
  transition:transform .55s var(--ease-out), border-color .45s var(--ease),
             box-shadow .55s var(--ease), background .45s var(--ease);
}
.why-card::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, var(--blue), var(--blue-lift));
  transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
  border-radius:22px 22px 0 0;
}
.why-card:hover{
  transform:translateY(-5px);
  border-color:var(--blue-pale);
  box-shadow:0 24px 50px -30px rgba(43,74,216,.38);
}
.why-card:hover::after{ transform:scaleX(1); }
.why-card .why-num{ transition:color .4s var(--ease); }
.why-card:hover .why-num{ color:var(--blue-deep); }
.why-card{ display:flex; flex-direction:column; }
.why-num{
  font-size:.72rem; font-weight:600; letter-spacing:.16em; color:var(--blue);
  display:block; margin-bottom:1.1rem;
}
.why-card h3{ font-size:clamp(1.18rem,1.7vw,1.44rem); max-width:18ch; margin-bottom:.9rem; }

.why-card p{ font-size:.94rem; }
.why-card p + p{ margin-top:.9rem; }
.why-note{ color:var(--blue-deep) !important; font-weight:600; }
.why-list{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.45rem; }
.why-list li{
  font-size:.78rem; color:var(--ink-2);
  padding-left:1.5rem; position:relative;
}
.why-list li::before{ content:"✓"; position:absolute; left:0; color:var(--blue); font-size:.85rem; }

.why-figure{
  position:relative; margin-top:auto; padding-top:1.2rem;
  border-top:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:.55rem;
}
.why-figure-n{
  font-family:var(--display); font-weight:800; line-height:1;
  font-size:1.75rem; letter-spacing:-.05em; color:var(--blue-deep); flex:none;
}
.why-figure-n i{ font-style:normal; font-size:.5em; letter-spacing:-.02em; margin-left:.04em; }
.why-figure-k{
  font-size:.74rem; font-weight:600; letter-spacing:.02em; text-transform:none;
  color:var(--muted); line-height:1.4; padding-bottom:.15rem;
}
.why-figure-list{ display:none; }

/* ---------- 4 · PROGRAMS ----------
   Pinned for exactly one viewport so the contact panel can slide over it,
   without adding any extra scroll distance of its own.               */
.prog-track{ height:100vh; height:100svh; min-height:640px; position:relative; z-index:4; }
.prog{
  position:sticky; top:0; height:100vh; height:100svh; min-height:640px; overflow:hidden;
  border-radius:40px 40px 0 0;
  display:grid; align-items:center;
  background:var(--t-bg-2);
  color:var(--t-ink);
  transition:background .8s var(--ease), color .5s var(--ease);
}
.prog-motif{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .7s var(--ease), transform 1.1s var(--ease-out);
  transform:scale(1.1);
}
.prog-motif.on{ opacity:.16; transform:none; }
.prog-motif svg{ width:min(58vw,720px); height:auto; position:absolute; right:-5%; top:50%; translate:0 -50%; }
.prog-motif[data-motif="board"] svg{ width:min(120vw,1500px); opacity:.55; }

.prog-inner{
  position:relative; z-index:2; display:grid; grid-template-columns:minmax(220px,.8fr) 1.5fr;
  gap:clamp(2rem,5vw,5rem); align-items:center; width:100%;
}
.prog-side h2{ font-size:clamp(1.9rem,3.6vw,2.9rem); margin:1.2rem 0 0; color:var(--t-ink); }
.prog-side-p{ margin-top:1.3rem; max-width:32ch; color:color-mix(in srgb,var(--t-ink) 66%, transparent); font-size:.97rem; }
.prog-legend{
  margin-top:1.9rem; font-size:.7rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--t-accent);
}

.prog-list{ list-style:none; margin:0; padding:0; transition:transform .7s var(--ease-out); }
.prog-row{
  position:relative; display:block; padding:clamp(.9rem,1.9vw,1.4rem) 0;
  border-top:1px solid color-mix(in srgb, var(--t-ink) 14%, transparent);
  transition:opacity .45s var(--ease), transform .6s var(--ease-out), border-color .45s;
}
.prog-row:last-child{ border-bottom:1px solid color-mix(in srgb, var(--t-ink) 14%, transparent); }
.prog-row a{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:1.1rem; }
.prog-row .n{
  font-size:.7rem; letter-spacing:.12em;
  color:var(--t-accent); transform:translateY(-.35em);
}
.prog-row .nm{
  font-family:var(--display); font-weight:800; letter-spacing:-.045em; color:var(--t-ink);
  font-size:clamp(1.6rem,3.4vw,2.8rem); line-height:.98;
  transition:color .4s var(--ease);
}
.prog-row.active .nm{ color:var(--t-accent); }
.prog-row .bl{
  display:block; font-size:.92rem; margin-top:.5rem; max-width:46ch;
  color:color-mix(in srgb, var(--t-ink) 64%, transparent);
  opacity:0; max-height:0; overflow:hidden;
  transition:opacity .45s var(--ease), max-height .55s var(--ease-out);
}
.prog-row .go{
  font-size:.66rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--t-accent); opacity:0; transform:translateX(-8px);
  transition:opacity .4s var(--ease), transform .45s var(--ease-out); white-space:nowrap;
}
.prog-list.hovering .prog-row{ opacity:.34; }
.prog-list.hovering .prog-row.active{ opacity:1; }
.prog-row.active .bl{ opacity:1; max-height:5em; }
.prog-row.active .go{ opacity:1; transform:none; }
.prog-row.active{ border-color:color-mix(in srgb, var(--t-accent) 55%, transparent); }

@media (max-width:1000px){
  .prog-track{ height:auto; min-height:0; }
  .prog-row a{ grid-template-columns:auto 1fr; }
  .prog-row .go{ display:none; }
  .prog-row .bl{ max-width:none; }
  .prog{ position:static; height:auto; min-height:0; padding:clamp(4rem,9vw,7rem) 0; }
  .prog-inner{ grid-template-columns:1fr; }
  .prog-list{ margin-top:2.4rem; }
  .prog-list.hovering .prog-row{ opacity:1; }
  .prog-row .bl{ opacity:1; max-height:6em; }
}

/* ---------- 5 · CONTACT DOOR (full-width, two leaves) ---------- */
.doorsec{ position:relative; z-index:5; }
.wall{
  position:relative; min-height:100vh; min-height:100svh; overflow:hidden;
  border-radius:44px 44px 0 0;
  box-shadow:0 -30px 80px -40px rgba(11,27,61,.4);
  background:var(--paper);
  perspective:2200px; perspective-origin:50% 46%;
  /* the doorway: a jamb around an arched opening. The top jamb clears the
     fixed nav so the arch is never cut off. */
  --jamb:clamp(1.4rem,2.6vw,2.6rem);
  --jamb-top:calc(var(--nav-h) + clamp(1rem,2vw,2rem));
  padding:var(--jamb-top) var(--jamb) 0;
  background:#DCE6F9;
}
/* architrave — the frame the doors sit inside */
.wall::after{
  content:""; position:absolute; inset:auto 0 0 0; height:26px; z-index:7;
  background:#CFDDF6; border-top:1px solid rgba(43,74,216,.2);
  pointer-events:none;
}
/* what lies beyond the doors */
.lightbox{
  position:absolute; inset:0; background:#FFFDF6; opacity:0;
  transition:opacity .8s var(--ease) .25s;
}
.wall.opening .lightbox{ opacity:1; }

.leaves{
  position:absolute; inset:var(--jamb-top) var(--jamb) 26px;
  display:grid; grid-template-columns:1fr 1fr;
  transform-style:preserve-3d;
  border-radius:clamp(120px,18vw,240px) clamp(120px,18vw,240px) 4px 4px;
  overflow:hidden;
}
.leaf-l, .leaf-r{
  position:relative; padding:0; text-align:left; display:block;
  background:#E9F0FD; border:0;
  transition:transform 1.15s var(--ease-out), filter 1.15s var(--ease);
  backface-visibility:hidden;
}
/* stiles and rails, bevelled so each leaf reads as a built slab */
.leaf-l::after, .leaf-r::after{
  content:""; position:absolute; inset:clamp(1rem,2vw,1.8rem);
  pointer-events:none;
  border-radius:clamp(90px,14vw,190px) clamp(90px,14vw,190px) 3px 3px;
  box-shadow:
    inset 0 0 0 1px rgba(43,74,216,.22),
    inset 2px 2px 0 0 rgba(11,27,61,.07),
    inset -2px -2px 0 0 rgba(255,255,255,.9);
}
.leaf-l::after{ border-top-right-radius:3px; }
.leaf-r::after{ border-top-left-radius:3px; }
/* the meeting edge throws a shadow, so the two slabs read as separate */
.leaf-l{ box-shadow:inset -14px 0 22px -16px rgba(11,27,61,.4); }
.leaf-r{ box-shadow:inset 14px 0 22px -16px rgba(11,27,61,.4); }
.leaf-l{ transform-origin:left center; border-right:1px solid rgba(43,74,216,.14); }
.leaf-r{ transform-origin:right center; background:#F7FAFF; }
.leaf-l:hover{ transform:rotateY(-3.5deg); }
.leaf-l:hover ~ .leaf-r{ transform:rotateY(3.5deg); }
.wall.opening .leaf-l{ transform:rotateY(-96deg) !important; filter:brightness(.9); }
.wall.opening .leaf-r{ transform:rotateY(96deg) !important; filter:brightness(.86); }

.leaf-face{
  position:absolute; inset:0; display:grid; align-items:center;
  padding:clamp(2rem,5vw,4.5rem);
}
/* a recessed panel line, the way a real door is built */
.leaf-face::before{
  content:""; position:absolute; inset:clamp(2.4rem,5vw,4.4rem);
  border:1px solid rgba(43,74,216,.18); border-radius:4px; pointer-events:none;
}
.leaf-inner{ position:relative; display:block; max-width:38ch; margin-inline:auto; width:100%; }

.leaf-h{
  display:block; font-family:var(--display); font-weight:800; letter-spacing:-.04em;
  font-size:clamp(1.7rem,3vw,2.5rem); line-height:.98; color:var(--ink); margin-top:1.2rem;
}
.leaf-p{
  display:block; margin-top:1.3rem; font-size:1rem; line-height:1.62; color:var(--body-c);
}
.leaf-cta{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:2rem;
  padding:.95rem 1.7rem; border-radius:99px; background:var(--t-accent); color:#fff;
  font-weight:600; font-size:.96rem;
  transition:transform .4s var(--ease-out), box-shadow .5s var(--ease), filter .3s;
}
.leaf-l:hover .leaf-cta{ transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 16px 36px -14px color-mix(in srgb,var(--t-accent) 85%, transparent); }
.leaf-cta svg{ transition:transform .4s var(--ease-out); }
.leaf-l:hover .leaf-cta svg{ transform:translateX(4px); }

/* contact rows on the right leaf */
.plaques{ list-style:none; margin:1.8rem 0 0; padding:0; border-top:1px solid rgba(43,74,216,.16); }
.plaque{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  padding:1.05rem .2rem; border-bottom:1px solid rgba(43,74,216,.16);
  transition:padding-left .4s var(--ease), border-color .4s;
}
.plaque:hover{ padding-left:.7rem; border-color:var(--blue); }
.plaque-k{ font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); flex:none; }
.plaque-v{
  font-family:var(--display); font-weight:700; font-size:clamp(1rem,1.6vw,1.22rem);
  letter-spacing:-.03em; color:var(--ink); text-align:right;
}
a.plaque-v:hover{ color:var(--blue-deep); }
.leaf-note{ margin-top:1.6rem; font-size:.9rem; color:var(--muted); }

/* the meeting line between the leaves */
.seam{
  position:absolute; left:50%; top:var(--jamb-top); bottom:26px; width:3px; translate:-50% 0;
  background:rgba(43,74,216,.22); pointer-events:none; z-index:6;
  box-shadow:0 0 10px rgba(43,74,216,.14);
  transition:opacity .5s var(--ease);
}
.wall.opening .seam{ opacity:0; }
.handle{
  position:absolute; top:52%; width:7px; height:46px; translate:0 -50%;
  border-radius:99px; background:#C2A45E;
  box-shadow:0 2px 6px rgba(11,27,61,.22), inset 0 1px 0 rgba(255,255,255,.55);
}
.handle{ z-index:4; }
.handle.right{ right:18px; }
.handle.left{ left:18px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .beats{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:1fr; }
  .turn-close{ text-align:left; margin-left:0; }
}
@media (max-width:620px){
  .hero-track{ height:125vh; height:125svh; }
  .hero{ min-height:0; }
  h1.type{ min-height:2.8em; }
  .scroll-hint{ bottom:1.6rem; }
  .scroll-hint span{ font-size:.55rem; letter-spacing:.18em; }
  .scroll-rail{ height:38px; }
  .plaque{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .plaque-v{ text-align:left; }
}

@media (max-width:900px){
  .wall{ perspective:none; min-height:0; padding:0; background:var(--paper); }
  .wall::after{ display:none; }
  .leaves{ position:static; inset:auto; grid-template-columns:1fr; border-radius:0; overflow:visible; }
  .leaf-l::after, .leaf-r::after{ display:none; }
  .leaf-l, .leaf-r{ transform:none !important; min-height:60vh; min-height:60svh; }
  .leaf-l{ border-right:0; border-bottom:1px solid rgba(43,74,216,.14); }
  .leaf-face{ position:static; padding:clamp(2.5rem,8vw,4rem) var(--gut); }
  .seam, .handle{ display:none; }
}

@media (max-width:1000px){
  .why-grid{ grid-template-columns:1fr; }
  .why{ clip-path:polygon(0 40px, 100% 0, 100% 100%, 0 100%); margin-top:-40px; }
}

/* ============================================================
   Narrow-screen overrides
   ============================================================ */

/* the rotated marquee is a desktop device: at phone width the bands are
   skewed, clipped and cramped, and the sideways travel that drove them was
   what widened the document past the viewport in the first place */
.diag-rule{ display:none; }

@media (max-width:900px){
  .diag-band{ display:none; }
  .diagonal{ height:auto; margin-top:clamp(2.2rem,7vw,3rem); overflow:visible; }

  /* a straight chapter break instead: a centred label between two rules,
     which still marks the handoff without the skew */
  .diag-rule{
    display:flex; align-items:center; gap:1rem;
    padding:0 var(--gut) clamp(2.2rem,7vw,3rem);
  }
  .diag-rule-line{ flex:1; height:1px; background:var(--line); }
  .diag-rule-word{
    font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:var(--blue-deep); white-space:nowrap;
  }
  .diag-rule-line{ min-width:0; }

  /* the incoming chapter arrives on a rounded edge, matching how .turn meets
     the hero — same language, no diagonal */
  .why{
    clip-path:none !important; margin-top:0;
    border-radius:34px 34px 0 0;
    box-shadow:0 -26px 60px -40px rgba(11,27,61,.3);
    padding-top:clamp(2.8rem,9vw,4rem);
  }
  .why-shift{ transform:none !important; }
  .turn-shift{ transform:none !important; }
}

/* ---------- the door is a contact-page device ----------
   On a phone the leaves cannot swing, so what is left is a stack of framing
   lines that cut across the contact rows. Below 900px this reads as a plain
   closing section; the real door still lives on contact.html. */
@media (max-width:900px){
  /* this recessed panel outline was the stray rectangle crossing the rows:
     .leaf-face goes static here, so the ::before resolved against the leaf
     and drew a full-height box straight through the contact list */
  .leaf-face::before{ display:none; }

  .wall{
    border-radius:34px 34px 0 0; padding:0; overflow:visible;
    background:var(--paper); box-shadow:0 -26px 60px -40px rgba(11,27,61,.3);
  }
  .leaves{ border-radius:0; }
  .leaf-l, .leaf-r{
    background:transparent; box-shadow:none; border:0;
    min-height:0; padding:clamp(2.6rem,9vw,3.6rem) 0;
  }
  .leaf-l{ border-bottom:1px solid var(--line-soft); }
  .leaf-face{ padding:0 var(--gut); display:block; }
  .leaf-inner{ max-width:none; }
  .lightbox{ display:none; }

  /* the contact rows carry their own rules, so nothing else should */
  .plaques{ border-top:0; }
  .plaque{ padding:1rem 0; }
  .plaque:hover{ padding-left:0; }
}