/* ============================================================
   SEAN SCANNELL — Nike-system stylesheet
   Palette, type, spacing, shapes mapped 1:1 from DESIGN.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* Brand & accent (CPFC palette — Scannell Soccer School) */
  --ink:#1B458F;        /* CPFC navy — dominant */
  --ink-deep:#11317A;   /* Navy hover / pressed */
  --accent:#C4122E;     /* CPFC red — CTAs, accents */
  --accent-deep:#8A0C20;
  --on-primary:#ffffff;
  --canvas:#ffffff;

  /* Surface */
  --soft-cloud:#f5f5f5;
  --hairline:#cacacb;
  --hairline-soft:#e5e5e5;

  /* Text */
  --charcoal:#39393b;
  --ash:#4b4b4d;
  --mute:#707072;
  --stone:#9e9ea0;

  /* Semantic */
  --sale:#d30005;
  --sale-deep:#780700;
  --success:#007d48;
  --info:#1151ff;

  /* Editorial accents (sparing use only) */
  --accent-teal:#0a7281;
  --accent-pink-deep:#4c012d;

  /* Navy-tinted protection gradient + placeholder hatching */
  --protect-gradient: linear-gradient(180deg, rgba(27,69,143,.08) 0%, rgba(10,31,79,.62) 100%);
  --protect-gradient-soft: linear-gradient(180deg, rgba(27,69,143,.06) 0%, rgba(10,31,79,.52) 100%);
  --hatching: repeating-linear-gradient(45deg,#ededed 0 2px,#f5f5f5 2px 22px);

  /* Spacing — 8px base */
  --xxs:2px; --xs:4px; --sm:8px; --md:12px;
  --lg:18px; --xl:24px; --xxl:30px; --section:48px;

  /* Radius */
  --r-none:0px;
  --r-sm:18px;
  --r-md:24px;
  --r-lg:30px;
  --r-full:9999px;

  /* Type families (documented substitutes) */
  --font-display:'Bebas Neue', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;

  --maxw:1440px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}

/* ---------- Utility bar ---------- */
.utility-bar{
  background:var(--soft-cloud);
  color:var(--ink);
  font-size:12px;font-weight:500;
  height:36px;
  display:flex;align-items:center;justify-content:flex-end;
}
.utility-bar .wrap{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 40px;display:flex;justify-content:flex-end;gap:var(--lg);
}
.utility-bar a{color:var(--ink);opacity:.85}
.utility-bar a:hover{opacity:1}

/* ---------- Primary nav ---------- */
.primary-nav{
  background:var(--canvas);
  height:64px;
  display:flex;align-items:center;
  position:sticky;top:0;z-index:50;
  box-shadow:inset 0 -1px 0 var(--hairline-soft);
}
.primary-nav .wrap{
  width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 40px;display:flex;align-items:center;justify-content:space-between;
}
.brandmark{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:26px;letter-spacing:.5px;line-height:1;
}
.brandmark .swoosh{
  width:36px;height:36px;border-radius:var(--r-full);
  background:var(--canvas);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.brandmark .swoosh img{width:100%;height:100%;object-fit:contain;display:block;}
.nav-links{display:flex;gap:var(--xl);align-items:center}
.nav-links a{
  font-size:15px;font-weight:600;padding:6px 0;
  border-bottom:2px solid transparent;
}
.nav-links a.active{border-bottom-color:var(--ink)}
.nav-links a:hover{border-bottom-color:var(--hairline)}
.nav-right{display:flex;align-items:center;gap:var(--lg)}
.search-pill{
  background:var(--soft-cloud);
  border-radius:var(--r-md);
  height:40px;display:flex;align-items:center;gap:8px;
  padding:8px 16px;color:var(--mute);font-size:14px;min-width:180px;
  border:2px solid transparent;transition:.15s;
}
.search-pill:focus-within{
  background:var(--canvas);border-color:var(--ink);
  box-shadow:0 0 0 12px var(--soft-cloud);
}
.search-pill input{
  border:0;background:transparent;outline:0;
  font-family:var(--font-ui);font-size:14px;color:var(--ink);width:100%;
}
.icon-btn{
  width:40px;height:40px;border-radius:var(--r-full);
  background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.icon-btn:hover{background:var(--soft-cloud)}
.nav-toggle{display:none;background:none;border:0;font-size:22px;cursor:pointer}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-ui);font-weight:600;font-size:16px;
  border-radius:var(--r-lg);border:0;cursor:pointer;
  padding:16px 32px;display:inline-flex;align-items:center;gap:10px;
  transition:transform .12s ease, opacity .12s ease;
  text-align:center;justify-content:center;
}
.btn:active{transform:scale(.96);opacity:.6}
.btn-primary{background:var(--ink);color:var(--on-primary)}
.btn-primary:hover{background:var(--ink-deep)}
.btn-accent{background:var(--accent);color:var(--on-primary)}
.btn-accent:hover{background:var(--accent-deep)}
.btn-secondary{background:var(--soft-cloud);color:var(--ink)}
.btn-on-image{
  background:var(--canvas);color:var(--ink);padding:12px 24px;font-size:15px;
}
.btn-sm{padding:10px 22px;font-size:14px}

/* ---------- Section scaffolding ---------- */
main{display:block}
.section{
  max-width:var(--maxw);margin:0 auto;padding:var(--section) 40px;
}
.section + .section{padding-top:0}
.eyebrow{
  font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-bottom:var(--md);
}
.section-title{
  font-family:var(--font-ui);font-weight:600;font-size:32px;
  line-height:1.2;margin-bottom:var(--xl);
}

/* ---------- Campaign hero ---------- */
.campaign{
  position:relative;width:100%;
  background:var(--soft-cloud);
  min-height:78vh;display:flex;align-items:flex-end;
  overflow:hidden;
}
.campaign .img-slot{
  position:absolute;inset:0;
  background-image:var(--protect-gradient),var(--hatching);
  background-size:cover;
  background-position:center;
  display:flex;align-items:center;justify-content:center;
}
/* When an img-slot wraps a real <img>, layer the protect gradient on top */
.img-slot{position:relative;}
.img-slot > img.bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.img-slot > img.bg + .overlay{
  position:absolute;inset:0;background:var(--protect-gradient);z-index:1;pointer-events:none;
}
.img-slot > .ph-label{position:relative;z-index:2;}
.img-slot .ph-label{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);background:var(--canvas);
  padding:8px 16px;border-radius:var(--r-lg);
}
.campaign .lockup{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;width:100%;
  padding:0 40px var(--section);
}
.campaign .kicker{
  color:var(--on-primary);font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--md);
  opacity:.9;
}
.display{
  font-family:var(--font-display);
  font-size:clamp(56px,9vw,128px);
  line-height:.9;text-transform:uppercase;color:var(--on-primary);
  letter-spacing:.5px;margin-bottom:var(--xl);
  max-width:14ch;
}
.campaign .sub{
  color:var(--on-primary);font-size:18px;max-width:46ch;
  margin-bottom:var(--xl);opacity:.92;
}
.cta-row{display:flex;gap:var(--md);flex-wrap:wrap}

/* ---------- Stat strip ---------- */
.stat-strip{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--hairline);
}
.stat{
  padding:var(--xl) 0;border-right:1px solid var(--hairline);
}
.stat:last-child{border-right:0}
.stat .n{
  font-family:var(--font-display);font-size:52px;line-height:1;
}
.stat .l{
  font-size:13px;color:var(--mute);font-weight:500;
  text-transform:uppercase;letter-spacing:.08em;margin-top:8px;
}

/* ---------- Card grid ---------- */
.grid{display:grid;gap:var(--sm)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:var(--canvas)}
.card .img-slot{
  aspect-ratio:1/1;background:var(--soft-cloud);
  display:flex;align-items:center;justify-content:center;
  background-image:var(--hatching);
  background-size:cover;background-position:center;
  overflow:hidden;
}
.card .meta{padding-top:var(--md)}
.card .badge{
  display:inline-block;border:1px solid var(--hairline);
  font-size:12px;font-weight:600;padding:4px 12px;
  border-radius:var(--r-lg);margin-bottom:var(--sm);
}
.card .name{font-size:16px;font-weight:600}
.card .subtitle{font-size:14px;color:var(--mute);font-weight:500;margin-top:4px}
.card .price{font-size:16px;font-weight:600;margin-top:var(--sm)}
.card .price .from{color:var(--mute);font-weight:500;font-size:14px}

/* Editorial tile (full-bleed campaign unit) */
.editorial{
  position:relative;min-height:520px;display:flex;align-items:flex-end;
  background:var(--soft-cloud);overflow:hidden;
}
.editorial .img-slot{
  position:absolute;inset:0;
  background-image:var(--protect-gradient-soft),var(--hatching);
  background-size:cover;
  background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.editorial .inner{
  position:relative;z-index:2;padding:var(--section);
}
.editorial .display{font-size:clamp(48px,6vw,84px);max-width:18ch}
.editorial .kicker{
  color:var(--on-primary);font-size:13px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:var(--md);opacity:.9;
}

/* Sport rail (horizontal scroll) */
.rail{
  display:flex;gap:var(--sm);overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:var(--sm);
}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:var(--r-full)}
.rail .tile{
  position:relative;flex:0 0 320px;aspect-ratio:4/5;
  background:var(--soft-cloud);scroll-snap-align:start;
  display:flex;align-items:flex-end;overflow:hidden;
}
.rail .tile .img-slot{
  position:absolute;inset:0;
  background-image:var(--protect-gradient-soft),var(--hatching);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.rail .tile .lbl{
  position:relative;z-index:2;padding:var(--xl);
  color:var(--on-primary);
}
.rail .tile .lbl h3{
  font-family:var(--font-display);font-size:30px;line-height:1;
  text-transform:uppercase;margin-bottom:var(--md);
}

/* ---------- Disclosure / FAQ rows ---------- */
.disclosure{border-top:1px solid var(--hairline)}
.disclosure .row{
  border-bottom:1px solid var(--hairline);
  padding:var(--xl) 0;cursor:pointer;
}
.disclosure .row summary{
  display:flex;justify-content:space-between;align-items:center;
  font-size:16px;font-weight:600;list-style:none;
}
.disclosure .row summary::-webkit-details-marker{display:none}
.disclosure .row[open] summary{margin-bottom:var(--md)}
.disclosure .row p{color:var(--charcoal);font-size:15px;max-width:70ch}
.chev{transition:transform .2s}
.disclosure .row[open] .chev{transform:rotate(180deg)}

/* ---------- Quote block ---------- */
.quote{
  background:var(--ink);color:var(--on-primary);
}
.quote .wrap{
  max-width:var(--maxw);margin:0 auto;padding:var(--section) 40px;
}
.quote blockquote{
  font-family:var(--font-display);
  font-size:clamp(32px,5vw,64px);line-height:1.05;
  text-transform:uppercase;max-width:20ch;
}
.quote cite{
  display:block;margin-top:var(--xl);font-family:var(--font-ui);
  font-style:normal;font-size:14px;font-weight:500;
  color:var(--stone);letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- Prose (about copy) ---------- */
.prose{max-width:64ch}
.prose p{font-size:17px;color:var(--charcoal);margin-bottom:var(--lg)}
.prose p strong{color:var(--ink)}

/* Timeline */
.timeline{border-top:1px solid var(--hairline);margin-top:var(--xl)}
.timeline .item{
  display:grid;grid-template-columns:140px 1fr;gap:var(--xl);
  padding:var(--xl) 0;border-bottom:1px solid var(--hairline);
}
.timeline .yr{
  font-family:var(--font-display);font-size:24px;color:var(--ink);
}
.timeline .body h4{font-size:16px;font-weight:600;margin-bottom:4px}
.timeline .body p{font-size:15px;color:var(--mute)}
.timeline .inline-image{margin-top:var(--md);max-width:260px}
.timeline .inline-image img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.timeline .inline-image figcaption{margin-top:var(--xs);font-size:11px;font-weight:500;color:var(--mute);letter-spacing:.04em}
@media(max-width:768px){.timeline .inline-image{max-width:200px}}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative;min-height:440px;display:flex;align-items:center;
  background:var(--soft-cloud);overflow:hidden;
}
.cta-banner .img-slot{
  position:absolute;inset:0;
  background-image:var(--protect-gradient),var(--hatching);
  background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center;
}
.cta-banner .inner{
  position:relative;z-index:2;max-width:var(--maxw);
  margin:0 auto;width:100%;padding:0 40px;
}
.cta-banner .display{font-size:clamp(44px,6vw,88px);max-width:16ch}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--hairline);background:var(--canvas)}
footer .cols{
  max-width:var(--maxw);margin:0 auto;padding:var(--section) 40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--xl);
}
footer h5{font-size:15px;font-weight:600;margin-bottom:var(--lg)}
footer li{margin-bottom:var(--md)}
footer li a{font-size:14px;color:var(--mute);font-weight:500}
footer li a:hover{color:var(--ink)}
footer .fine{
  border-top:1px solid var(--hairline);
}
footer .fine .wrap{
  max-width:var(--maxw);margin:0 auto;padding:var(--xl) 40px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--md);
  font-size:11px;color:var(--mute);letter-spacing:.04em;
}

/* ---------- Reveal on load ---------- */
/* CSS animations may be paused in some webview / preview contexts, so we
   use a transition driven by a body.is-loaded class added by app.js.
   If JS fails, the @keyframes fallback still triggers the same end state. */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
}
body.is-loaded .reveal{opacity:1;transform:none}
body.is-loaded .reveal:nth-child(2){transition-delay:.08s}
body.is-loaded .reveal:nth-child(3){transition-delay:.16s}
body.is-loaded .reveal:nth-child(4){transition-delay:.24s}
/* Keep the keyframe as a no-JS / animation-friendly fallback */
@keyframes rise{to{opacity:1;transform:none}}
body:not(.is-loaded) .reveal{animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
body:not(.is-loaded) .reveal:nth-child(2){animation-delay:.08s}
body:not(.is-loaded) .reveal:nth-child(3){animation-delay:.16s}
body:not(.is-loaded) .reveal:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion: reduce){
  .reveal,body.is-loaded .reveal{opacity:1;transform:none;transition:none;animation:none}
}

/* ---------- Responsive ---------- */
@media(max-width:1023px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .section{padding:32px 24px}
  .campaign .lockup,.cta-banner .inner,.utility-bar .wrap,
  .primary-nav .wrap,.quote .wrap,footer .cols,footer .fine .wrap{padding-left:24px;padding-right:24px}
}
@media(max-width:768px){
  .nav-links,.search-pill{display:none}
  .nav-toggle{display:block}
  .stat-strip{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .timeline .item{grid-template-columns:1fr;gap:var(--sm)}
}
@media(max-width:599px){
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .display{font-size:clamp(44px,12vw,64px)}
  footer .cols{grid-template-columns:repeat(2,1fr)}
  .utility-bar .wrap a:not(:last-child){display:none}
}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:100;background:var(--canvas);
  transform:translateX(-100%);transition:transform .3s ease;
  padding:var(--section) var(--xl);
}
.drawer.open{transform:none}
.drawer a{
  display:block;font-size:22px;font-weight:600;
  padding:var(--lg) 0;border-bottom:1px solid var(--hairline-soft);
}
.drawer .close{
  background:none;border:0;font-size:26px;
  position:absolute;top:var(--xl);right:var(--xl);cursor:pointer;
}

/* ---------- Where to find us ---------- */
.find-us{
  border-top:1px solid var(--hairline);
  max-width:var(--maxw);margin:0 auto;
  padding:var(--section) 40px;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--section);
  align-items:center;
}
.find-us .info .eyebrow{margin-bottom:var(--md)}
.find-us .info h3{
  font-family:var(--font-display);
  font-size:clamp(40px,5vw,72px);line-height:.9;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--ink);margin-bottom:var(--md);max-width:14ch;
}
.find-us .info address{
  font-style:normal;font-size:15px;color:var(--mute);
  font-weight:500;line-height:1.7;margin-bottom:var(--xl);
}
.find-us .info address strong{
  color:var(--ink);font-weight:600;display:block;font-size:17px;
}
.find-us .map{
  aspect-ratio:4/3;background:var(--soft-cloud);
  position:relative;overflow:hidden;
}
.find-us .map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.find-us .map .map-label{
  position:absolute;left:16px;top:16px;z-index:2;
  background:var(--canvas);color:var(--mute);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-lg);
  pointer-events:none;
}
@media (max-width:768px){
  .find-us{grid-template-columns:1fr;gap:var(--xl);padding:32px 24px}
}

/* Contact panel — right column when no map is shown (replaces .map iframe) */
.find-us .contact-block{
  background:var(--soft-cloud);
  padding:var(--section) var(--xl);
}
.find-us .contact-large{
  display:flex;flex-direction:column;gap:var(--xl);
}
.find-us .contact-large li{
  display:flex;flex-direction:column;gap:var(--xs);
}
.find-us .contact-large .lbl{
  font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);
}
.find-us .contact-large a{
  font-family:var(--font-display);font-size:26px;letter-spacing:.4px;
  color:var(--ink);line-height:1.1;display:block;
  border-bottom:1px solid transparent;width:max-content;max-width:100%;
}
.find-us .contact-large a:hover{color:var(--accent);border-bottom-color:var(--accent);}
.find-us .contact-large a.email{
  font-family:var(--font-ui);font-size:15px;font-weight:600;
  word-break:break-all;letter-spacing:0;
}
@media (max-width:768px){
  .find-us .contact-block{padding:var(--xl)}
  .find-us .contact-large a{font-size:22px}
}

/* Anchor offset so scroll-to-section doesn't hide under the sticky nav */
#timeline,
#contact,
#book,
#one-to-one,
#teams,
#academies,
#soccer-school{
  scroll-margin-top:80px;
}

/* ---------- Footer (extended with policies + child safety) ---------- */
.footer-strip{
  max-width:var(--maxw);margin:0 auto;
  padding:var(--lg) 40px;
  border-top:1px solid var(--hairline-soft);
}
.footer-strip h6{
  font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:var(--sm);
}
.footer-strip .strip-links{
  display:flex;flex-wrap:wrap;gap:var(--md) var(--lg);
}
.footer-strip .strip-links a{
  font-size:13px;color:var(--ink);font-weight:500;
  border-bottom:1px solid transparent;line-height:1.4;
  transition:border-color .15s ease;
}
.footer-strip .strip-links a:hover{border-bottom-color:var(--ink);}
footer .contact-list a{font-weight:500;}
footer .contact-list a[href^="tel:"]{
  font-family:var(--font-display);font-size:18px;letter-spacing:.5px;
  color:var(--ink);line-height:1.2;
}
footer .contact-list a[href^="mailto:"]{
  color:var(--ink);word-break:break-all;
}
@media(max-width:768px){.footer-strip{padding:var(--lg) 24px}}

/* ---------- The Team (interactive mentor cards) ----------
   Each card has a perspective tilt driven by mouse position via
   --mx / --my CSS custom properties set in motion.js. The avatar
   wears an iridescent conic-gradient ring that also tracks cursor.
   Falls back gracefully (no tilt, static gradient) when JS is off. */
.team-section .team-lede{
  font-size:16px;color:var(--mute);max-width:64ch;
  margin-top:calc(-1 * var(--md)); margin-bottom:var(--xl);
}
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--md);
  perspective:1000px;
}
.mentor-card{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg;
  position:relative;
  background:var(--canvas);
  border:1px solid var(--hairline);
  padding:var(--xl) var(--lg);
  text-align:center;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s ease;
  cursor:default;
  overflow:hidden;
  will-change: transform;
}
.mentor-card:hover{ border-color:var(--ink); }
.mentor-card::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle 240px at var(--mx) var(--my),
    rgba(196,18,46,.10), transparent 70%);
  opacity:0; transition:opacity .3s ease;
  pointer-events:none;
}
.mentor-card:hover::after{ opacity:1; }

.mentor-card .avatar{
  position:relative;
  width:96px; height:96px;
  border-radius:var(--r-full);
  margin:0 auto var(--lg);
  background: conic-gradient(
    from calc((var(--mx) - 50%) * 3.6) at var(--mx) var(--my),
    #1B458F 0deg,
    #C4122E 90deg,
    #1B458F 180deg,
    #11317A 270deg,
    #1B458F 360deg
  );
  display:flex;align-items:center;justify-content:center;
  transition: filter .3s ease;
  transform: translateZ(20px);
}
.mentor-card:hover .avatar{ filter:saturate(1.2) brightness(1.05); }
.mentor-card .avatar::before{
  content:"";
  position:absolute; inset:5px;
  border-radius:var(--r-full);
  background:var(--canvas);
}
.mentor-card .initial{
  font-family:var(--font-display);
  font-size:44px; line-height:1;
  position:relative; z-index:2;
  color:var(--ink); letter-spacing:.5px;
}
.mentor-card .mentor-meta{ transform: translateZ(10px); }
.mentor-card .mentor-name{
  font-family:var(--font-display);
  font-size:24px; letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--ink); line-height:1;
  margin-bottom:6px;
}
.mentor-card .mentor-role{
  font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute);
}
.mentor-card[data-lead] .mentor-role{ color:var(--accent); }

@media (max-width:1023px){ .team-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:599px){ .team-grid{grid-template-columns:1fr;} }
@media (prefers-reduced-motion: reduce){
  .mentor-card{transform:none !important;}
  .mentor-card::after{display:none;}
}

/* ============================================================
   MOBILE IMPROVEMENTS — pre-Wednesday review pass
   Targets iOS Safari viewport, touch targets, type scaling,
   and section rhythm on phone-sized screens.
   ============================================================ */

/* Modern viewport-aware hero. svh = small viewport height, which excludes
   the iOS Safari address bar, so hero content never jumps when the bar
   collapses on scroll. Falls back to vh in non-supporting browsers. */
@supports (height: 100svh){
  .campaign{ min-height: 78svh; }
}

/* Section rhythm — preserve adjacent-section collapse on mobile.
   The original mobile rule used the padding shorthand which clobbered
   the .section + .section{padding-top:0} cascade. */
@media (max-width: 1023px){
  .section{ padding-top: 40px; padding-bottom: 40px; }
  .section + .section{ padding-top: 0; }
}
@media (max-width: 599px){
  .section{ padding-top: 32px; padding-bottom: 32px; padding-left: 20px; padding-right: 20px; }
}

/* Tap targets — ensure 44px minimum on all interactive elements */
@media (max-width: 768px){
  .btn{ min-height: 44px; padding: 12px 24px; font-size: 15px; }
  .btn-sm{ min-height: 40px; padding: 10px 18px; }
  .btn-on-image{ padding: 11px 22px; font-size: 14px; }
  .nav-toggle{ min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .drawer .close{ min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; right: 12px; top: 12px; font-size: 24px; }
  .drawer a{ padding: 18px 0; min-height: 44px; font-size: 20px; display: flex; align-items: center; }
}

/* Editorial + CTA-banner inner padding tightens on phone */
@media (max-width: 768px){
  .editorial{ min-height: 420px; }
  .editorial .inner{ padding: 32px 24px; }
  .editorial .display{ font-size: clamp(36px, 8vw, 56px); max-width: 22ch; }
  .cta-banner{ min-height: 380px; }
  .cta-banner .display{ font-size: clamp(36px, 8vw, 56px); max-width: 18ch; }
  .cta-banner .inner{ padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 599px){
  .editorial{ min-height: 360px; }
  .editorial .inner{ padding: 24px 20px; }
  .editorial .display{ font-size: clamp(32px, 9vw, 44px); }
  .cta-banner .display{ font-size: clamp(32px, 9vw, 44px); }
  .cta-banner .inner{ padding-left: 20px; padding-right: 20px; }
}

/* Campaign hero text + stat-strip tightening on phone */
@media (max-width: 599px){
  .campaign .lockup{ padding: 0 20px 32px; }
  .campaign .kicker{ font-size: 12px; margin-bottom: 8px; }
  .campaign .sub{ font-size: 15px; line-height: 1.55; }
  .stat-strip{ grid-template-columns: 1fr 1fr; }
  .stat{ padding: 16px 8px; }
  .stat .n{ font-size: 36px; }
  .stat .l{ font-size: 11px; margin-top: 6px; }
}

/* Brandmark + primary nav tightening on phone */
@media (max-width: 599px){
  .primary-nav{ height: 56px; }
  .primary-nav .wrap{ padding-left: 16px; padding-right: 16px; }
  .brandmark{ font-size: 20px; gap: 8px; }
  .brandmark .swoosh{ width: 30px; height: 30px; }
  .nav-right{ gap: 8px; }
}

/* Utility bar — show all links on phone instead of hiding (was bad UX) */
@media (max-width: 599px){
  .utility-bar{ height: auto; padding: 10px 0; }
  .utility-bar .wrap{
    justify-content: center; gap: 16px; flex-wrap: wrap; padding: 0 16px;
  }
  .utility-bar .wrap a,
  .utility-bar .wrap a:not(:last-child){ display: inline-block; font-size: 13px; }
}

/* Footer columns + Get in Touch on phone */
@media (max-width: 768px){
  footer .cols{ padding: 40px 24px; gap: 24px; }
  footer .contact-list a[href^="tel:"]{ font-size: 16px; letter-spacing: 0.3px; }
}
@media (max-width: 599px){
  footer .cols{ grid-template-columns: 1fr; gap: 28px; padding: 32px 20px; }
  footer h5{ font-size: 14px; margin-bottom: 12px; }
  footer li{ margin-bottom: 10px; }
  footer li a{ font-size: 14px; }
  .footer-strip{ padding: 14px 20px; }
  .footer-strip h6{ font-size: 11px; margin-bottom: 6px; }
  .footer-strip .strip-links{ gap: 8px 14px; }
  .footer-strip .strip-links a{ font-size: 12px; }
  footer .fine .wrap{ padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; }
}

/* Find-us / Contact panel — phone-friendly proportions */
@media (max-width: 599px){
  .find-us{ padding: 32px 20px; gap: 20px; }
  .find-us .info h3{ font-size: clamp(32px, 9vw, 44px); max-width: none; }
  .find-us .info p{ font-size: 14px; }
  .find-us .contact-block{ padding: 24px 20px; }
  .find-us .contact-large{ gap: var(--lg); }
  .find-us .contact-large a{ font-size: 20px; }
  .find-us .contact-large a.email{ font-size: 14px; }
}

/* Timeline tightening on phone */
@media (max-width: 599px){
  .timeline .item{ padding: 16px 0; }
  .timeline .yr{ font-size: 20px; }
  .timeline .body h4{ font-size: 15px; }
  .timeline .body p{ font-size: 14px; }
  .timeline .inline-image{ max-width: 100%; }
  .timeline .inline-image img{ aspect-ratio: 3/2; }
}

/* Quote block on phone */
@media (max-width: 768px){
  .quote .wrap{ padding: 32px 24px; }
  .quote blockquote{ font-size: clamp(28px, 7vw, 48px); max-width: 18ch; }
  .quote cite{ margin-top: 16px; font-size: 12px; }
}

/* FAQ disclosure rows — bigger tap area on phone */
@media (max-width: 599px){
  .disclosure .row{ padding: 18px 0; }
  .disclosure .row summary{ font-size: 15px; }
  .disclosure .row p{ font-size: 14px; }
}

/* Card grid — tighter gaps on phone */
@media (max-width: 599px){
  .grid{ gap: 16px; }
  .card .img-slot{ aspect-ratio: 4/3; }
}

/* ============================================================
   LEGAL / POLICY PAGES (privacy, equal opportunities) + 404
   ============================================================ */
.legal{
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 40px 96px;
}
.legal .eyebrow{ margin-bottom: 16px; }
.legal-title{
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 72px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink);
  margin-bottom: 28px;
}
.legal-body{ font-size: 16px; line-height: 1.75; color: var(--charcoal); }
.legal-body p{ margin-bottom: 18px; }
.legal-body h2{
  font-family: var(--font-ui);
  font-size: 19px; font-weight: 700;
  color: var(--ink);
  margin: 36px 0 12px;
}
.legal-body ul{ margin: 0 0 18px 22px; list-style: disc; }
.legal-body li{ margin-bottom: 10px; padding-left: 4px; }
.legal-body a{ color: var(--accent); text-decoration: underline; }
.legal-body a:hover{ color: var(--accent-deep); }
.legal-meta{
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 13px; color: var(--mute);
}
.legal-meta p{ margin-bottom: 0; }
.legal-meta a{ color: var(--ink); }

/* 404 page */
.error-block{
  max-width: var(--maxw); margin: 0 auto;
  padding: 96px 40px; text-align: center;
  min-height: 56vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.error-block .code{
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 180px); line-height: .85;
  color: var(--ink); letter-spacing: 2px;
}
.error-block h1{
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 56px); text-transform: uppercase;
  color: var(--ink); margin: 8px 0 16px; letter-spacing: .5px;
}
.error-block p{ font-size: 16px; color: var(--mute); max-width: 44ch; margin-bottom: 28px; }

@media (max-width: 599px){
  .legal{ padding: 48px 20px 64px; }
  .legal-body{ font-size: 15px; }
  .error-block{ padding: 64px 20px; }
}