/* ============================================================
   Landing page animations — three.js hero + bento + SVG
   ============================================================ */

/* Hero 3D canvas layer */
.hero-3d{position:relative;overflow:hidden;min-height:82vh;padding-top:0;padding-bottom:0}
.hero-3d #hero-3d-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;display:block}
.hero-3d .hero-content{position:relative;z-index:2}
.hero-3d .hero-grid{align-items:center;min-height:82vh;padding:40px 0 60px}

/* Specialties bento mosaic */
/* Bento grid — dense auto-flow so filtering re-packs without gaps */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(196px,auto);grid-auto-flow:row dense;gap:16px}
.bento-card{--fam:var(--violet);position:relative;text-decoration:none;color:inherit;border-radius:var(--radius);background:linear-gradient(160deg,var(--surface),var(--surface-2));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .35s cubic-bezier(.22,.75,.3,1),border-color .35s ease,box-shadow .35s ease,opacity .5s ease}
.bento-card[data-family="systems"]{--fam:var(--violet)}
.bento-card[data-family="health"]{--fam:var(--cyan)}
.bento-card[data-family="growth"]{--fam:var(--warning)}
.bento-card[data-tile="lg"]{grid-column:span 2;grid-row:span 2}
.bento-card[data-tile="wide"]{grid-column:span 2}
.bento-card:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--fam) 14%,transparent),transparent 55%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.bento-card:hover,.bento-card:focus-visible{transform:translateY(-4px);border-color:color-mix(in srgb,var(--fam) 50%,transparent);box-shadow:0 26px 74px rgba(6,8,32,.46),0 0 0 1px color-mix(in srgb,var(--fam) 40%,transparent),0 0 32px color-mix(in srgb,var(--fam) 20%,transparent)}
.bento-card:hover:before,.bento-card:focus-visible:before{opacity:1}
.bento-card-inner{display:flex;flex-direction:column;height:100%;padding:22px;position:relative;z-index:1}
.bento-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bento-card .icon-box{width:38px;height:38px;border-radius:11px;font-size:.86rem;background:color-mix(in srgb,var(--fam) 20%,transparent);color:color-mix(in srgb,var(--fam) 62%,var(--paper))}
.bento-badge{display:inline-flex;align-items:center;border:1px solid color-mix(in srgb,var(--fam) 40%,transparent);background:color-mix(in srgb,var(--fam) 12%,transparent);color:color-mix(in srgb,var(--fam) 78%,var(--paper));border-radius:999px;padding:4px 10px;font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bento-card h3{font-family:var(--font-body);font-size:1.05rem;margin:0 0 8px;letter-spacing:-.02em;line-height:1.25}
.bento-card p{color:var(--silver);font-size:.84rem;line-height:1.5;margin:0 0 14px}
.bento-extra{color:color-mix(in srgb,var(--silver) 82%,transparent);font-size:.82rem}
.bento-card small{display:block;margin-top:auto;color:color-mix(in srgb,var(--fam) 72%,var(--silver));font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.bento-arrow{position:absolute;top:20px;right:20px;width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--fam) 16%,transparent);color:color-mix(in srgb,var(--fam) 60%,var(--paper));font-size:1.1rem;font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .3s ease,transform .3s ease;z-index:2}
.bento-card:hover .bento-arrow,.bento-card:focus-visible .bento-arrow{opacity:1;transform:translateX(0)}
.bento-card[data-tile="lg"] .icon-box{width:46px;height:46px;border-radius:13px;font-size:1rem}
.bento-card[data-tile="lg"] h3{font-size:1.5rem;margin-bottom:10px}
.bento-card[data-tile="lg"] p{font-size:.92rem}
.bento-card.is-hidden{display:none}
.bento-grid.js-reveal .bento-card{opacity:0}
.bento-grid.js-reveal.is-visible .bento-card{opacity:1;transition:opacity .55s ease calc(var(--i) * 45ms),transform .35s cubic-bezier(.22,.75,.3,1),border-color .35s ease,box-shadow .35s ease}

/* Family filter chips (--fam drives each chip's accent) */
.bento-filters{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;margin-bottom:22px}
.filter-chip{--fam:var(--violet);display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:color-mix(in srgb,var(--fam) 6%,transparent);color:var(--paper);border-radius:999px;padding:8px 15px;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:border-color .25s ease,background .25s ease,color .25s ease}
.filter-chip[data-fam="systems"]{--fam:var(--violet)}
.filter-chip[data-fam="health"]{--fam:var(--cyan)}
.filter-chip[data-fam="growth"]{--fam:var(--warning)}
.chip-dot{width:9px;height:9px;border-radius:50%;background:var(--fam);box-shadow:0 0 12px color-mix(in srgb,var(--fam) 70%,transparent)}
.chip-dot.all{background:conic-gradient(from 210deg,var(--violet),var(--cyan),var(--warning),var(--violet))}
.filter-chip:hover{border-color:color-mix(in srgb,var(--fam) 45%,transparent)}
.filter-chip.is-active{border-color:color-mix(in srgb,var(--fam) 60%,transparent);background:color-mix(in srgb,var(--fam) 16%,transparent)}
.filter-chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* Bento reveal + filtering are handled together with the grid rules above. */

/* Consultant band — the face behind the hero promise, paired with the numbers
   that back it. Photo leads on the left so the eye lands on the person before
   the metrics. */
.consultant-section{padding-top:48px;padding-bottom:48px}
.consultant-band{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(26px,4vw,54px);align-items:center}
.consultant-photo{aspect-ratio:5/4;border-radius:var(--radius)}
.consultant-copy{min-width:0}
.consultant-name{margin:16px 0 2px;font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.1;letter-spacing:-.02em}
.consultant-role{margin:0 0 18px;color:var(--cyan);font-size:.82rem;font-weight:780;letter-spacing:.06em;text-transform:uppercase}
.consultant-line{margin:0 0 14px;max-width:56ch;color:var(--silver);text-wrap:pretty}
.consultant-line:first-of-type{color:color-mix(in srgb,var(--paper) 84%,var(--silver));font-size:1.05rem}
.consultant-band .text-link{margin-top:6px}
.consultant-section .stats{margin-top:46px}
@media(max-width:900px){
  .consultant-band{grid-template-columns:1fr;gap:26px}
  .consultant-photo{max-width:540px}
  .consultant-section .stats{margin-top:34px}
}

/* Stats reveal */
.stats-section .stats>div{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.75,.3,1)}
.stats-section.is-visible .stats>div{opacity:1;transform:translateY(0)}
.stats-section.is-visible .stats>div:nth-child(1){transition-delay:.05s}
.stats-section.is-visible .stats>div:nth-child(2){transition-delay:.15s}
.stats-section.is-visible .stats>div:nth-child(3){transition-delay:.25s}
.stats-section.is-visible .stats>div:nth-child(4){transition-delay:.35s}

/* Positioning animated SVG */
.positioning-section{position:relative;overflow:hidden}
.positioning-copy{position:relative;z-index:2}
.positioning-visual{display:flex;align-items:center;justify-content:center;padding:18px}
.positioning-visual svg{width:100%;max-width:420px;height:auto;filter:drop-shadow(0 0 30px rgba(102,38,239,.12))}

/* Positioning before/after grid (B&A boolean-intersection micro-grid) */
.ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0 26px}
.ba-col{display:flex;flex-direction:column;gap:10px;padding:20px;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(160deg,var(--surface),var(--surface-2));transition:transform .3s cubic-bezier(.22,.75,.3,1),border-color .3s ease}
.ba-col:hover,.ba-col:focus-visible{transform:translateY(-3px);border-color:color-mix(in srgb,var(--violet) 46%,transparent)}
.ba-col-kicker{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan)}
.ba-before,.ba-after{margin:0;font-size:.85rem;line-height:1.5;color:var(--silver)}
.ba-before strong,.ba-after strong{color:var(--paper);font-weight:760;margin-right:4px}
.ba-after strong{color:var(--lavender)}
.ba-link{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:760;color:var(--cyan)}
.ba-arrow{transition:transform .25s ease}
.ba-col:hover .ba-arrow{transform:translateX(4px)}
@media(max-width:900px){.ba-grid{grid-template-columns:1fr}}

/* The FAQ accordion lives in components/faq.css — one component for the
   homepage, the office hours page and both programme pages. */

/* Scroll reveal utility */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.75,.3,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}

/* Responsive */
@media(max-width:1100px){
  /* 3 columns; the flagship stays wide but drops to a single row so a 2x2
     tile does not fight the narrower track. */
  .bento-grid{grid-template-columns:repeat(3,1fr)}
  .bento-card[data-tile="lg"]{grid-row:span 1}
}
@media(max-width:760px){
  .hero-3d{min-height:auto}
  .hero-3d .hero-grid{min-height:auto;padding-top:50px;padding-bottom:44px}
  .bento-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(180px,auto)}
  .bento-card[data-tile="lg"],.bento-card[data-tile="wide"]{grid-column:span 2;grid-row:span 1}
  .bento-card[data-tile="lg"] h3{font-size:1.25rem}
  .positioning-visual svg{max-width:280px}
}
@media(max-width:480px){
  .bento-grid{grid-template-columns:1fr}
  .bento-card[data-tile="lg"],.bento-card[data-tile="wide"]{grid-column:span 1}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .bento-card,.stats>div,.reveal{transition:none!important;opacity:1!important;transform:none!important}
}


/* Homepage 3D hero and specialty scroller */
.hero{position:relative;padding:50px 0 58px;overflow:hidden}
.hero-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
/* Grid items default to min-width:auto, so a long display word can force the
   copy column wider than the viewport and .hero{overflow:hidden} clips it.
   Allowing the tracks to shrink keeps the headline and lead inside the frame. */
.hero-grid>*{min-width:0}
/* The global h1 clamp tops out at 5.8rem, which is sized for a full-width page
   title. In the hero's ~620px copy column that headline breaks into five ragged
   lines and pushes the CTAs under the fold, so the homepage hero scales its
   display size to the column it actually occupies. */
.hero-3d h1{overflow-wrap:break-word;font-size:clamp(2.4rem,4.4vw,4rem);margin:14px 0 18px}
.hero-copy{max-width:720px}
.hero-visual{position:relative;min-height:520px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:linear-gradient(145deg,var(--surface),var(--surface-2));box-shadow:var(--shadow)}
.hero-visual canvas{display:block;width:100%!important;height:100%!important}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,32,.15) 0%,rgba(6,8,32,.65) 100%);pointer-events:none}

/* Hero capability matrix — the hero visual is composed from real expertise
   data over the 3D shield, not a raster image. */
.hero-matrix{display:flex;flex-direction:column;padding:26px 24px;background:linear-gradient(158deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface-2) 78%,transparent));border-color:var(--line-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.hero-matrix-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.hero-matrix-badge{flex:none;padding:6px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--violet) 40%,transparent);background:color-mix(in srgb,var(--violet) 15%,transparent);color:var(--lavender);font-size:.68rem;font-weight:760;letter-spacing:.03em;white-space:nowrap}
.hero-matrix-sub{margin:14px 0 6px;color:var(--paper);font-size:1.05rem;font-weight:640;line-height:1.4;max-width:30ch}
.hero-matrix-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;justify-content:center}
.hero-matrix-list li+li{border-top:1px solid var(--line)}
.hero-matrix-list a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:15px;padding:16px 4px;text-decoration:none;color:inherit;border-radius:12px;transition:padding-left .3s cubic-bezier(.22,.75,.3,1),background .2s ease}
.hero-matrix-list a:hover{padding-left:12px;background:color-mix(in srgb,var(--violet) 8%,transparent)}
.hero-matrix-list a:hover .mega-tile{transform:scale(1.08)}
.hero-matrix-text{min-width:0}
.hero-matrix-text strong{display:block;font-size:.95rem;font-weight:680;color:var(--paper);letter-spacing:-.01em}
.hero-matrix-text small{display:block;margin-top:3px;color:var(--silver);font-size:.8rem;line-height:1.4}
.hero-matrix-arrow{color:var(--silver);font-size:1.05rem;transition:transform .3s ease,color .3s ease}
.hero-matrix-list a:hover .hero-matrix-arrow{transform:translateX(4px);color:var(--cyan)}
.hero-matrix-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line);color:var(--silver);font-size:.78rem;font-weight:660;text-decoration:none;transition:color .2s ease}
.hero-matrix-foot:hover{color:var(--cyan)}
.hero-matrix-foot:hover .hero-matrix-arrow{transform:translateX(4px);color:var(--cyan)}

/* Specialty horizontal scroller */
.specialty-scroller{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 4px 24px;margin-top:26px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.specialty-scroller::-webkit-scrollbar{height:8px}
.specialty-scroller::-webkit-scrollbar-track{background:transparent}
.specialty-scroller::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.specialty-card{flex:0 0 280px;scroll-snap-align:start;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(155deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .35s cubic-bezier(.22,.75,.3,1),border-color .35s ease,box-shadow .35s ease;position:relative;overflow:hidden}
.specialty-card:hover{transform:translateY(-6px) rotateX(2deg);border-color:color-mix(in srgb,var(--cyan) 34%,transparent);box-shadow:0 30px 80px rgba(6,8,32,.55)}
.specialty-card:before{content:"";position:absolute;width:160px;height:160px;right:-50px;top:-50px;background:radial-gradient(circle,rgba(102,38,239,.28),transparent 68%);opacity:0;transition:opacity .4s ease}
.specialty-card:hover:before{opacity:1}
.specialty-card .icon-box{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--violet) 18%,transparent);color:color-mix(in srgb,var(--lavender) 55%,var(--paper));font-weight:820;margin-bottom:12px;font-size:.82rem;border:1px solid color-mix(in srgb,var(--violet) 22%,transparent)}
.specialty-card h3{font-family:var(--font-body);font-size:1.05rem;margin-bottom:8px}
.specialty-card p{color:var(--silver);font-size:.84rem;line-height:1.5;margin:0 0 12px}
.specialty-card .meta{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-size:.72rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.specialty-card .meta:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.scroller-hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;color:var(--silver);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.scroller-hint span{display:inline-block;animation:scroll-hint 2.4s ease-in-out infinite}
@keyframes scroll-hint{0%,100%{transform:translateX(0);opacity:.6}50%{transform:translateX(6px);opacity:1}}

/* Stats reveal */
.stats-section.is-visible .stats>div{opacity:1;transform:none}
.stats-section.is-visible .stats>div:nth-child(1){transition-delay:.05s}
.stats-section.is-visible .stats>div:nth-child(2){transition-delay:.15s}
.stats-section.is-visible .stats>div:nth-child(3){transition-delay:.25s}
.stats-section.is-visible .stats>div:nth-child(4){transition-delay:.35s}

/* Animated proof ring for brand consistency */
.proof-ring-anim{position:relative;display:inline-grid;place-items:center}
.proof-ring-anim .ring{position:absolute;border-radius:50%;border:1px solid rgba(102,38,239,.18);animation:proof-pulse 4s ease-in-out infinite}
.proof-ring-anim .ring:nth-child(2){inset:14px;animation-delay:.6s;border-style:dashed}
.proof-ring-anim .ring:nth-child(3){inset:28px;animation-delay:1.2s}
.proof-ring-anim .ring:nth-child(4){inset:42px;animation-delay:1.8s;border-color:rgba(25,211,226,.14)}
@keyframes proof-pulse{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.08);opacity:.9}}

/* Grid floor animation */
.grid-floor{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.06;background-image:linear-gradient(var(--cyan) 1px,transparent 1px),linear-gradient(90deg,var(--cyan) 1px,transparent 1px);background-size:60px 60px;transform:perspective(500px) rotateX(55deg) translateY(40px) scale(2);animation:grid-drift 20s linear infinite}
@keyframes grid-drift{0%{background-position:0 0}100%{background-position:60px 60px}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.22,.75,.3,1)}
.reveal.is-visible{opacity:1;transform:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:360px}
  .specialty-card{flex:0 0 220px}
}

@media(max-width:760px){
  .specialty-card{flex:0 0 200px}
  .hero{padding-top:50px}
  /* The base h1 clamp floors at 3rem, which is too wide for the homepage hero
     on phones; scale it with the viewport so the headline fits the frame. */
  .hero-3d h1{font-size:clamp(2rem,8.6vw,3.2rem)}
}