/* ===================== Tokens ===================== */
:root{
  /* Three-color system: black, white and silver. */
  --canvas:#0b0b0c;
  --canvas-2:rgba(255,255,255,.045);
  --panel:rgba(255,255,255,.075);
  --panel-2:rgba(255,255,255,.11);
  --accent:#b8bcc2;
  --accent-hover:#ffffff;
  --accent-muted:rgba(184,188,194,.28);
  --text-secondary:#b8bcc2;
  --text-primary:#ffffff;
  --stone:#b8bcc2;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.28);
  --ease:cubic-bezier(.16,.8,.24,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --font-disp:'Fraunces',serif;
  --font-body:'Instrument Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box}
/* Sideways-scroll guard lives on html only. Putting it on body as well makes
   body its own scrollport, and the sticky hero then pins to that scrollport
   instead of the viewport, so it never pins at all.
   `hidden` is the fallback; `clip` must win, so it comes last. */
html{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--canvas);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--font-mono)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

.skip-link{
  position:fixed;top:-60px;left:12px;z-index:999;
  background:var(--accent);color:var(--canvas);padding:10px 18px;border-radius:8px;
  transition:top .25s var(--ease-soft);font-weight:600;
}
.skip-link:focus{top:12px}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ===================== Layout helpers ===================== */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}
.section{padding:min(14vh,120px) 0}
.section.alt{background:var(--canvas-2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:min(8vw,80px);align-items:center}
.two-col.reverse .col-img{order:2}
.two-col.reverse .col-text{order:1}
@media (max-width:860px){
  .two-col{grid-template-columns:1fr;gap:36px}
  .two-col.reverse .col-img,.two-col.reverse .col-text{order:0}
}
.col-img img{border-radius:18px;width:100%;height:auto;object-fit:cover}
.founder-img img{border-radius:50%;width:min(320px,60vw);height:min(320px,60vw);object-fit:cover;margin:0 auto}

.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.14em;color:var(--accent);margin:0 0 14px}
.eyebrow.center{text-align:center}
.disp{font-family:var(--font-disp);font-weight:600;line-height:1.08;letter-spacing:-.01em;margin:0 0 20px;font-size:clamp(1.9rem,4vw,3rem)}
.disp.center{text-align:center;max-width:820px;margin-left:auto;margin-right:auto}
.lede{color:var(--text-secondary);max-width:60ch;font-size:1.05rem;margin:0 0 16px}
.lede.center{margin-left:auto;margin-right:auto;text-align:center}
.center{text-align:center}
.fine-print{color:var(--text-secondary);font-size:.85rem;max-width:70ch;margin:36px auto 0;text-align:center;line-height:1.7}

.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:999px;font-weight:600;font-size:.95rem;transition:background .25s var(--ease-soft),color .25s var(--ease-soft),transform .25s var(--ease-soft);text-shadow:none}
.btn-accent{background:var(--accent);color:var(--canvas)}
.btn-accent:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-line{border:1.5px solid var(--line-strong);color:var(--text-primary)}
.btn-line:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}
@media (pointer:coarse){ .btn{min-height:44px} }

.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:.92rem}
.link-arrow::after{content:'→';transition:transform .25s var(--ease-soft)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ===================== Header ===================== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;height:96px;transition:background .3s var(--ease-soft),height .3s var(--ease-soft),backdrop-filter .3s,box-shadow .3s,border-color .3s;}
.site-header.scrolled{background:rgba(11,11,12,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 2px 16px rgba(0,0,0,.3)}
.site-header::after{display:none}
.header-inner{width:min(1400px,calc(100% - 80px));height:100%;margin:0 auto;display:flex;align-items:center;position:relative;z-index:1}
.brand{display:flex;align-items:center;flex-shrink:0;position:relative;z-index:2}
.brand img{height:75px;width:75px;object-fit:contain;transition:height .3s var(--ease-soft),width .3s var(--ease-soft)}
.site-header.scrolled .brand img{height:75px;width:75px}
.mobile-brand{display:none}
.main-nav{width:100%;height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;position:relative}
.main-nav > #nav-list{display:none}
.nav-left,.nav-right{display:flex;align-items:center;gap:clamp(24px,3vw,44px)}
.nav-left{justify-content:flex-end;padding-right:clamp(32px,4vw,64px)}
.nav-right{justify-content:flex-start;padding-left:clamp(32px,4vw,64px)}
.nav-left a,.nav-right a{font-size:.98rem;font-weight:600;color:rgba(255,255,255,.88);white-space:nowrap;transition:color .2s,opacity .2s;position:relative;padding:10px 0}
.nav-left a::after,.nav-right a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:center;transition:transform .25s var(--ease-soft)}
.nav-left a:hover,.nav-right a:hover,.nav-left a.active,.nav-right a.active{color:#fff}
.nav-left a:hover::after,.nav-right a:hover::after,.nav-left a.active::after,.nav-right a.active::after{transform:scaleX(1)}
.desktop-brand{justify-self:center}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;padding:9px;width:46px;height:46px;border:1px solid var(--line-strong);border-radius:12px;position:relative;z-index:3}
.nav-toggle > span:not(.sr-only){display:block;width:100%;height:2px;background:var(--text-primary);transition:transform .3s var(--ease-soft),opacity .2s}
.nav-toggle[aria-expanded="true"] > span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] > span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] > span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.nav-open{overflow:hidden}
body.nav-open::before{content:"";position:fixed;inset:0;background:rgba(11,11,12,.64);backdrop-filter:blur(3px);z-index:58}

@media (max-width:1060px) and (min-width:861px){
  .header-inner{width:min(1400px,calc(100% - 48px))}
  .nav-left,.nav-right{gap:18px}
  .nav-left{padding-right:26px}
  .nav-right{padding-left:26px}
  .nav-left a,.nav-right a{font-size:.9rem}
}
@media (max-width:860px){
  .site-header{height:84px}
  .site-header.scrolled{height:84px}
  /* The header logo is dropped on mobile — it competed with the hero copy —
     and reappears at the top of the slide-out panel instead. */
  .header-inner{width:100%;padding:0 20px;justify-content:flex-end}
  .desktop-brand,.nav-left,.nav-right,.mobile-brand{display:none}
  .main-nav{width:46px;height:46px;display:block;order:2}
  .nav-toggle{display:flex;width:46px;height:46px}
  .main-nav > #nav-list{position:fixed;inset:0 0 0 auto;width:min(86vw,380px);height:100dvh;background:var(--canvas-2);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:24px 28px 36px;gap:0;box-shadow:-24px 0 60px rgba(0,0,0,.26);transform:translateX(100%);visibility:hidden;opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .25s var(--ease-soft),visibility 0s linear .35s;overflow-y:auto}
  .main-nav > #nav-list.open{transform:translateX(0);visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s}
  .main-nav li{border-bottom:1px solid var(--line)}
  /* Brand row: sits on the toggle's optical centre line and doubles as the
     panel header, so it keeps the rule but drops the list item's spacing. */
  .main-nav .nav-brand{margin-bottom:0;padding-bottom:18px}
  .main-nav .nav-brand a{display:inline-flex;padding:0;width:auto}
  .main-nav .nav-brand a::after{display:none}
  .main-nav .nav-brand img{height:56px;width:56px;object-fit:contain}
  .main-nav ul a{display:block;font-size:1.08rem;font-weight:600;color:var(--text-secondary);padding:16px 0;position:relative}
  .main-nav ul a::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-soft)}
  .main-nav ul a:hover,.main-nav ul a.active{color:var(--text-primary)}
  .main-nav ul a:hover::after,.main-nav ul a.active::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){.site-header,.brand img,.main-nav ul,.nav-toggle > span:not(.sr-only){transition:none}}

/* ===================== Hero / scrub stage =====================
   The scrub runs on every device. `.hero-pin.scrub` is added by JS once the
   scroll mechanic is live; without it (no JS, or prefers-reduced-motion) the
   hero collapses to a one-screen static composition built from the same
   markup — no duplicate static-hero block to keep in sync. */
.hero-pin{position:relative;height:var(--pin,500vh)}
.hero-pin:not(.scrub){height:100vh;height:100dvh}

.hero-stage{position:sticky;top:0;left:0;width:100%;height:100vh;height:100dvh;overflow:hidden;background:var(--canvas)}
.hero-stage video,.hero-stage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-stage video{opacity:0;transition:opacity .7s var(--ease-soft)}
.hero-stage.video-ready video{opacity:1}
.hero-stage.video-ready .poster{opacity:0;transition:opacity .7s var(--ease-soft)}
.poster{background-size:cover;background-position:center}

/* Base wash. The old scrim was fully transparent through the middle 30%,
   which is exactly where the copy sits — legibility depended on luck. */
.scrim{position:absolute;inset:0;pointer-events:none;z-index:2;background:
  linear-gradient(180deg,rgba(11,11,12,.7) 0%,rgba(11,11,12,.34) 15%,rgba(11,11,12,.18) 30%,rgba(11,11,12,.24) 58%,rgba(11,11,12,.78) 100%),
  radial-gradient(ellipse 122% 96% at 50% 46%,rgba(11,11,12,0) 30%,rgba(11,11,12,.64) 100%)}

.ring{position:absolute;top:50%;left:50%;width:48px;height:48px;transform:translate(-50%,-50%);color:var(--accent);z-index:5;transition:opacity .3s}
.ring circle{transition:stroke-dashoffset .1s linear;transform-origin:center;transform:rotate(-90deg)}
.hero-stage.video-ready .ring,.hero-stage.video-skipped .ring{opacity:0;pointer-events:none}

.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-primary);opacity:.85;z-index:6;pointer-events:none}
.scroll-cue span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em}
.cue-dot{animation:cueMove 2.2s ease-in-out infinite}
@keyframes cueMove{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media (prefers-reduced-motion:reduce){.cue-dot{animation:none}}

/* Progress rail + escape hatch: the pin is several screens long, so say how
   far it runs and give people a way out of it. */
.hero-rail{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.13);z-index:6;pointer-events:none}
.hero-rail span{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.hero-pin:not(.scrub) .hero-rail{display:none}
.hero-skip{position:absolute;right:max(22px,4vw);bottom:32px;z-index:7;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:3px;transition:color .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.hero-skip:hover{color:var(--accent);border-color:var(--accent)}
/* Nothing to scrub through in the fallback, so no cue and no escape hatch. */
.hero-pin:not(.scrub) .hero-skip,
.hero-pin:not(.scrub) .scroll-cue{display:none}

/* ---- Caption bands ---- */
.bands{position:absolute;inset:0;z-index:3}
.band{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;pointer-events:none}
/* Fallback composition when the scrub is not running. */
.hero-pin:not(.scrub) .band:first-child,
.hero-pin:not(.scrub) .band:last-child{opacity:1;visibility:visible}
.hero-pin:not(.scrub) .band:last-child{align-items:flex-end;padding-bottom:9vh}
.hero-pin:not(.scrub) .band:first-child{align-items:flex-start;padding-top:24vh}
.hero-pin:not(.scrub) .final-h{font-size:clamp(1.1rem,2.4vw,1.5rem);margin-bottom:20px}
.hero-pin:not(.scrub) .band-h1{font-size:clamp(2.2rem,7vw,4.2rem)}

/* Contrast plate follows the band's alignment; a centre-locked plate left
   the edge-aligned lines sitting outside their own backing. */
.band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:calc(.38 + .62*var(--k,1));
  background:radial-gradient(ellipse 70% 60% at var(--plate-x,50%) 50%,rgba(11,11,12,.86) 0%,rgba(11,11,12,.62) 40%,rgba(11,11,12,0) 78%)}
.band.at-left{--plate-x:33%}
.band.at-right{--plate-x:67%}

/* One container, one width — `left` and `right` are now mirror images.
   --y gives each beat a slightly different vertical anchor so the sequence
   does not read as a metronome; --x is the exit drift. */
/* The outgoing beat is pushed up, shrunk and softened while the incoming one
   rises into focus. Two consecutive centre-aligned lines would otherwise
   dissolve straight through each other. */
.band-inner{position:relative;z-index:1;width:min(1180px,86vw);margin:0 auto;
  transform:translateY(calc(var(--y,0vh) + (1 - var(--in,1)) * 2.8vh + var(--x,0) * -8vh))
            scale(calc(1 - var(--x,0) * .055));
  filter:blur(calc((1 - var(--in,1)) * 3px + var(--x,0) * 4px));
  will-change:transform,filter;
  text-shadow:0 2px 4px rgba(0,0,0,.72),0 10px 34px rgba(0,0,0,.6);text-wrap:balance}
.band-inner.left{text-align:left}
.band-inner.right{text-align:right}
.band-inner.center{text-align:center}
.band.up{--y:-4.5vh}
.band.down{--y:4.5vh}

.band-h1{font-family:var(--font-disp);font-weight:600;font-size:clamp(2.7rem,8.2vw,6.4rem);line-height:.98;letter-spacing:-.028em;margin:0}
.band .school{font-family:var(--font-disp);font-weight:600;font-size:clamp(2.1rem,5.8vw,4.7rem);line-height:1.02;letter-spacing:-.022em;margin:0}
.band .line{font-family:var(--font-disp);font-weight:500;font-size:clamp(1.65rem,4.3vw,3.4rem);line-height:1.08;letter-spacing:-.015em;margin:0;max-width:19ch}
.band-inner.left .line{margin-right:auto}
.band-inner.right .line{margin-left:auto}
.final-kicker{font-family:var(--font-mono);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(.7rem,1.05vw,.84rem);color:var(--accent);margin:0 0 18px}
.final-h{font-family:var(--font-disp);font-weight:600;font-size:clamp(2.3rem,6.2vw,4.9rem);line-height:1.02;letter-spacing:-.024em;margin:0 0 30px}
.band .accent{color:var(--accent)}
.band .btn{pointer-events:auto;text-shadow:none}

/* Split-text engine. Word level only: per-character inline-block kills
   Fraunces' kerning at display sizes, and the old rotate/scatter read as
   confetti under a school's name. --rise is in em so it tracks the type size. */
.split .w{display:inline-block;white-space:pre;
  --kc:clamp(0,(var(--k,1) - var(--th,0))*2.5,1);
  opacity:var(--kc);transform:translateY(calc((1 - var(--kc)) * var(--rise,.4em)));
  will-change:transform,opacity}
.band-h1 .w,.final-h .w{--rise:.3em}

@media (max-width:1100px) and (min-width:821px){
  .band-inner{width:88vw}
}
/* ---- Phones / small tablets: same story, tuned ---- */
@media (max-width:820px){
  .hero-pin{--pin:540vh}
  .band-inner{width:86vw}
  .band-inner.left,.band-inner.right{text-align:left}
  .band .line{max-width:none}
  .band.up{--y:-3vh}
  .band.down{--y:3vh}
  .band::before{background:radial-gradient(ellipse 96% 64% at 50% 50%,rgba(11,11,12,.82) 0%,rgba(11,11,12,.6) 46%,rgba(11,11,12,0) 86%)}
  .band-inner{transform:translateY(calc(var(--y,0vh) + (1 - var(--in,1)) * 2vh + var(--x,0) * -5.5vh)) scale(calc(1 - var(--x,0) * .045))}
  .final-h{margin-bottom:24px}
  /* Cue sits centre-bottom, so the escape hatch moves to the opposite corner. */
  .hero-skip{left:20px;right:auto;bottom:28px;font-size:.64rem}
  .scroll-cue{bottom:26px}
}
@media (max-width:420px){
  .band-h1{font-size:clamp(2.3rem,11vw,3.4rem)}
  .band .school{font-size:clamp(1.9rem,9vw,2.9rem)}
  .band .line{font-size:clamp(1.55rem,7vw,2.3rem)}
  .final-h{font-size:clamp(1.9rem,8.4vw,2.8rem)}
}
@media (max-height:560px){ .scroll-cue{display:none} }
/* Short landscape phones: shrink the type so a beat still fits on screen. */
@media (max-height:520px) and (orientation:landscape){
  .band-h1{font-size:clamp(1.9rem,6vw,3rem)}
  .band .school{font-size:clamp(1.7rem,4.6vw,2.6rem)}
  .band .line{font-size:clamp(1.25rem,3.2vw,1.9rem)}
  .final-h{font-size:clamp(1.6rem,4.4vw,2.4rem)}
  .band.up{--y:-2vh}
  .band.down{--y:2vh}
}

/* ===================== Cards / grids ===================== */
.card-grid{display:grid;gap:28px;margin-top:min(6vh,52px)}
.card-grid.three{grid-template-columns:repeat(3,1fr)}
.card-grid.four{grid-template-columns:repeat(4,1fr)}
.card-grid.five{grid-template-columns:repeat(5,1fr)}
@media (max-width:960px){.card-grid.three,.card-grid.four,.card-grid.five{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.card-grid.three,.card-grid.four,.card-grid.five{grid-template-columns:1fr}}

.program-card{background:var(--panel);border-radius:20px;overflow:hidden;border:1px solid var(--line);transition:transform .35s var(--ease),border-color .35s}
.program-card:hover{transform:translateY(-6px);border-color:var(--accent-muted)}
.program-img{aspect-ratio:3/2;overflow:hidden}
.program-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-soft)}
.program-card:hover .program-img img{transform:scale(1.06)}
.program-body{padding:26px}
.program-body h3{font-family:var(--font-disp);font-size:1.3rem;margin:0 0 10px}
.program-body p{color:var(--text-secondary);font-size:.95rem;margin:0 0 16px}

.mini-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.mini-card h3{font-family:var(--font-disp);font-size:1.05rem;margin:0 0 8px}
.mini-card p{color:var(--text-secondary);font-size:.9rem;margin:0}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}
.stat-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat-num{font-size:1.7rem;color:var(--accent);margin:0;display:flex;align-items:baseline;gap:6px}
.stat-num span{font-size:.62rem;color:var(--text-secondary);letter-spacing:.06em}
.stat-label{font-size:.82rem;color:var(--text-secondary);margin:6px 0 0}
@media (max-width:560px){.stat-grid{grid-template-columns:1fr}}

.quote-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px}
.quote-card h3{font-family:var(--font-disp);color:var(--accent);margin:0 0 12px;font-size:1.15rem}
.quote-card p{color:var(--text-secondary);margin:0;line-height:1.7}

.signature{font-size:1.3rem;color:var(--accent);margin:20px 0}
.signature span{color:var(--text-secondary);font-size:.9rem;font-family:var(--font-body)}

/* Interactive moment: press-and-hold */
.hold-crest{display:flex;flex-direction:column;align-items:center;gap:10px;margin:22px auto 0;color:var(--accent);width:fit-content;padding:8px 12px;border-radius:12px;transition:background .2s}
.hold-crest:hover{background:rgba(184,188,194,.08)}
.hold-ring{width:56px;height:56px;display:block}
.hold-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.hold-label{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.06em;color:var(--text-secondary);max-width:220px;text-align:center;transition:color .3s}
.hold-crest.done .hold-label{color:var(--accent)}
.hold-crest.done .hold-ring{color:var(--accent-hover)}

/* Staff grid */
.staff-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:min(6vh,52px)}
.staff-card{text-align:center}
.staff-photo{aspect-ratio:1/1;border-radius:16px;overflow:hidden;margin-bottom:12px;background:var(--panel)}
.staff-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease-soft)}
.staff-card:hover .staff-photo img{transform:scale(1.05)}
.staff-card h3{font-family:var(--font-disp);font-size:.98rem;margin:0 0 4px}
.staff-card p{color:var(--text-secondary);font-size:.78rem;margin:0}
@media (max-width:960px){.staff-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.staff-grid{grid-template-columns:repeat(2,1fr)}}

/* Partners */
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:min(6vh,52px)}
.partner-logo{background:var(--panel);border:1px solid var(--line);border-radius:14px;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:14px}
.partner-logo img{width:100%;height:100%;object-fit:contain;filter:grayscale(.15) opacity(.92)}
@media (max-width:860px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.partner-grid{grid-template-columns:repeat(2,1fr)}}

/* FAQ */
.faq-list{margin-top:min(6vh,52px);display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.faq-item summary{cursor:pointer;font-family:var(--font-disp);font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--accent);transition:transform .3s var(--ease-soft);flex-shrink:0}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--text-secondary);margin:14px 0 0;line-height:1.7}

/* Contact */
.iletisim-section .contact-list{margin-top:24px;display:flex;flex-direction:column;gap:14px}
.contact-list li{display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:12px}
.contact-list li span.mono{color:var(--accent);min-width:60px;font-size:.8rem}
.contact-list li a{transition:color .2s}
.contact-list li a:hover{color:var(--accent)}

.contact-form{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;display:flex;flex-direction:column;gap:16px}
.contact-form label{display:flex;flex-direction:column;gap:8px;font-size:.85rem;color:var(--text-secondary)}
.contact-form input,.contact-form textarea{background:var(--canvas);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;color:var(--text-primary);font-family:var(--font-body);font-size:.95rem;transition:border-color .2s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);outline:none}
.kvkk-check{flex-direction:row !important;align-items:flex-start;gap:10px !important;font-size:.78rem}
.kvkk-check input{width:16px;height:16px;margin-top:2px;flex-shrink:0}
.hp{display:none!important;position:absolute!important;left:-9999px!important}.form-note{font-size:.85rem;color:var(--accent);min-height:1.2em;margin:0}

/* Contact section ambience (reuses hero ending frame per design package) */
.iletisim-section{position:relative;isolation:isolate}
.iletisim-section::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,var(--canvas) 0%,rgba(11,11,12,.94) 40%,var(--canvas) 100%),url('../hero-ending.jpg');
  background-size:cover;background-position:center;opacity:.16;
}

/* ===================== Footer ===================== */
.site-footer{background:var(--canvas-2);padding:min(10vh,90px) 0 28px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.footer-brand img{height:34px;margin-bottom:14px}
.footer-brand p{color:var(--text-secondary);font-size:.85rem;line-height:1.7;max-width:34ch}
.footer-col h4{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;color:var(--accent);margin:0 0 16px}
.footer-col li{margin-bottom:10px}
.footer-col a{color:var(--text-secondary);font-size:.88rem;transition:color .2s}
.footer-col a:hover{color:var(--text-primary)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--text-secondary);font-size:.8rem}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
}

/* ===================== Reveal-on-scroll ===================== */
.reveal .col-text > *,.reveal > .eyebrow,.reveal > .disp,.reveal > .lede{
  opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.reveal.in .col-text > *,.reveal.in > .eyebrow,.reveal.in > .disp,.reveal.in > .lede{opacity:1;transform:none}
.reveal .col-text > *:nth-child(1){transition-delay:.05s}
.reveal .col-text > *:nth-child(2){transition-delay:.12s}
.reveal .col-text > *:nth-child(3){transition-delay:.19s}
.reveal .col-text > *:nth-child(4){transition-delay:.26s}
.reveal .col-text > *:nth-child(5){transition-delay:.33s}
.reveal.in .col-text > *{transition-delay:0s !important}

.col-img{opacity:0;transform:scale(.96);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in .col-img{opacity:1;transform:none}

.reveal-child{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in .reveal-child{opacity:1;transform:none}
.card-grid .reveal-child:nth-child(1){transition-delay:.04s}
.card-grid .reveal-child:nth-child(2){transition-delay:.12s}
.card-grid .reveal-child:nth-child(3){transition-delay:.2s}
.card-grid .reveal-child:nth-child(4){transition-delay:.28s}
.card-grid .reveal-child:nth-child(5){transition-delay:.36s}
.reveal.in .reveal-child{transition-delay:0s !important}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

@media (prefers-reduced-motion:reduce){
  .reveal .col-text > *,.reveal > .eyebrow,.reveal > .disp,.reveal > .lede,.col-img,.reveal-child{
    opacity:1 !important;transform:none !important;transition:none !important
  }
  .split .w{opacity:1 !important;transform:none !important}
  .band-inner{transform:none !important;filter:none !important}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important}
}

/* ===================== Vector layer ===================== */
.meander-line{position:absolute;pointer-events:none;opacity:.5}
.meander-line path{stroke:var(--accent);stroke-width:1.4;fill:none;stroke-dasharray:1;stroke-dashoffset:1;pathLength:1}
.meander-line.drawn path{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease)}
@media (prefers-reduced-motion:reduce){.meander-line path{stroke-dashoffset:0 !important;transition:none !important}}

/* ===================== Multi-page content ===================== */
.page-hero{
  min-height:clamp(360px,52vh,560px);
  display:flex;
  align-items:flex-end;
  padding:150px 0 72px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(11,11,12,.42),rgba(11,11,12,.96)),url('../hero-ending.jpg') center/cover;
}
.page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,rgba(184,188,194,.12),transparent 48%);pointer-events:none}
.page-hero .wrap{position:relative;z-index:1;width:100%}
.page-hero h1{font-family:var(--font-disp);font-size:clamp(2.5rem,6vw,5rem);line-height:1.02;margin:0 0 18px;max-width:850px}
.page-hero .lede{max-width:62ch;margin:0;color:var(--text-secondary);font-size:1.08rem}
.page-kicker{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.15em;color:var(--accent);margin:0 0 16px}
.breadcrumb{font-family:var(--font-mono);font-size:.72rem;color:var(--text-secondary);margin-top:26px}
.breadcrumb a:hover{color:var(--accent)}
.page-intro{max-width:760px;margin:0 auto;text-align:center}
.detail-list{display:grid;gap:14px;margin:28px 0 0}
.detail-list li{border-bottom:1px solid var(--line);padding:0 0 14px;color:var(--text-secondary)}
.detail-list strong{display:block;color:var(--text-primary);font-family:var(--font-disp);font-size:1.12rem;margin-bottom:3px}
.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:34px}
.feature-list .mini-card{height:100%}
.page-note{color:var(--text-secondary);font-size:.9rem;line-height:1.7}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:min(6vh,52px)}
.news-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.news-body{padding:26px}
.news-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);letter-spacing:.08em;margin:0 0 10px}
.news-card h3{font-family:var(--font-disp);font-size:1.35rem;line-height:1.2;margin:0 0 10px}
.news-card p{color:var(--text-secondary);margin:0 0 18px}
.contact-map{min-height:100%;border-radius:20px;overflow:hidden;background:var(--panel);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:32px;text-align:center}
.contact-map .mono{color:var(--accent);font-size:.8rem;letter-spacing:.08em}
.contact-map strong{display:block;font-family:var(--font-disp);font-size:1.5rem;margin:12px 0 8px}
.contact-map p{color:var(--text-secondary);margin:0}
.contact-map iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.page-cta{padding:70px 0;background:var(--panel);text-align:center}
.page-cta h2{font-family:var(--font-disp);font-size:clamp(2rem,4vw,3rem);margin:0 0 16px}
.page-cta p{color:var(--text-secondary);max-width:58ch;margin:0 auto 24px}
.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:55;display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:999px;background:var(--accent);color:var(--canvas);box-shadow:0 8px 24px rgba(0,0,0,.28);font-size:.84rem;font-weight:700;transition:transform .2s,box-shadow .2s}.whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.36)}.whatsapp-float span{display:grid;place-items:center;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;font-size:0}.whatsapp-float span::after{content:'›';font-size:17px;line-height:1;transform:rotate(-45deg)}
.footer-socials{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.footer-socials a{font-family:var(--font-mono);font-size:.7rem;color:var(--accent)}
.cookie-banner{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:18px 22px;background:var(--panel);border:1px solid var(--line-strong);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.35)}.cookie-banner p{margin:0;color:var(--text-secondary);font-size:.84rem;line-height:1.55}.cookie-banner a{color:var(--accent);text-decoration:underline}.cookie-actions{display:flex;gap:10px;flex-shrink:0}.cookie-actions button{border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);padding:10px 14px;border-radius:8px;cursor:pointer;font:inherit;font-size:.82rem}.cookie-actions button:first-child{background:var(--accent);border-color:var(--accent);color:var(--canvas)}
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.partner-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}.partner-logo{height:190px;display:grid;place-items:center;padding:22px;background:#fff}.partner-logo img{width:100%;height:100%;object-fit:contain}.partner-info{padding:20px 22px 24px}.partner-info h3{font-family:var(--font-disp);font-size:1.25rem;line-height:1.2;margin:0 0 8px}.partner-info p{color:var(--text-secondary);font-size:.9rem;line-height:1.65;margin:0}.partner-category{color:var(--accent)!important;font-family:var(--font-mono);font-size:.68rem!important;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px!important}.post-detail{max-width:850px}.post-detail .disp{max-width:800px}.post-cover{width:100%;max-height:560px;object-fit:cover;border-radius:18px;margin:26px 0 34px}.post-content{font-size:1.05rem;line-height:1.85;color:var(--text-secondary);margin-bottom:36px}.post-content h2,.post-content h3{font-family:var(--font-disp);color:var(--text-primary);line-height:1.2;margin:34px 0 12px}.post-content p{margin:0 0 20px}.post-content a{color:var(--accent);text-decoration:underline}.post-content img{max-width:100%;height:auto;border-radius:14px}.post-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 36px}.post-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}.staff-description{color:var(--text-secondary);font-size:.86rem;line-height:1.6;margin-top:8px}
@media (max-width:900px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .page-hero{min-height:390px;padding:130px 0 54px}
  .feature-list,.news-grid,.partner-grid{grid-template-columns:1fr}
  .cookie-banner{left:12px;right:12px;bottom:12px;align-items:stretch;flex-direction:column;gap:12px}.cookie-actions{justify-content:flex-end}
}