/* =====================================================================
   HFC public pages: "New look" (v3). Loaded LAST, only while Super Admin > Public pages > Header, footer & colours > "Look of the public pages" is "New look".
   Switch that setting to "Previous look" and this file is simply not loaded, so nothing else changes.
   What it does: whole fields of colour (teal, sun, coral, mint) instead of one dark wash; solid buttons and cards with plain depth;
   no glow, no halo, no glass, no gradient text, no slow-moving lights; bigger headlines; calm, quick motion (ease-out, press feedback).
   Never changes a picture's shape: nothing here crops or resizes a photo.
   ===================================================================== */
body{
  --ease:cubic-bezier(.23,1,.32,1);
  --field:#0F3028;--field2:#12382F;--card:#1A463A;--card2:#215645;
  --glow:0 0 0 2px var(--sun);
  --depth:0 18px 34px -22px rgba(0,0,0,.7);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
html{background:#0F3028;scrollbar-color:#5C9B88 #0F3028}
/* the sky is one calm colour now: no moving light, no pointer spotlight, no grain */
body:before{animation:none!important;background:linear-gradient(180deg,#0F3028 0%,#11382F 60%,#0F3028 100%)!important;inset:0!important;will-change:auto}
body:after,.spot,.fly{display:none!important}
.hero:before{display:none!important}
.drift:before{display:none!important}

/* ---------- type: bigger headlines, balanced lines, readable line length, steady numbers ---------- */
h1,h2,h3,.lead{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
.prose p,.prose li,.lead,.lead2 p,.hero-text p{max-width:68ch}
.hero h1{font-size:clamp(2.9rem,7.6vw,6rem);line-height:.96;letter-spacing:-.022em;max-width:14ch}
.cta h2,body.pg-leader .cta h2{font-size:clamp(2.5rem,6.4vw,5rem);letter-spacing:-.02em}
.stats b,.count strong,.tl .when,.pre b{font-variant-numeric:tabular-nums lining-nums}
.count strong{text-shadow:none}
.stats b{text-shadow:none}
/* headings are plain solid text (gradient text can vanish on some phones) */
.grp-h h2,.wall .wrap h2{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
.hero h1{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;-webkit-text-fill-color:#fff!important;color:#fff!important}
.hero h1 .w,.hero h1 .w>span,.hero h1 .w>i{-webkit-text-fill-color:#fff!important;color:#fff!important}
.hero h1 em,.hero h1 em .w,.hero h1 em .w>span,.hero h1 em .w>i{-webkit-text-fill-color:var(--sun)!important;color:var(--sun)!important}

/* ---------- buttons: solid, flat, with a quick press ---------- */
.btn{border-radius:14px;min-height:50px;background:#5C9B88;color:#06120E!important;border:0;box-shadow:0 10px 18px -12px rgba(0,0,0,.65);
  transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease);-webkit-backdrop-filter:none;backdrop-filter:none}
.btn:hover{background:#74B7A1;transform:translate(var(--mx,0),var(--my,0)) translateY(-2px);box-shadow:0 14px 22px -12px rgba(0,0,0,.7)}
.btn:active{transform:scale(.97);transition-duration:.08s}
.btn.sun,.hero .btn,.cta .btn,body.pg-leader .cta .btn,.hero-handbook .btn,.hero-coc .btn{background:#F6C94B;color:#1B1403!important;border:0;box-shadow:0 10px 18px -12px rgba(0,0,0,.65)}
.btn.sun:hover,.hero .btn:hover,.cta .btn:hover{background:#FFD965;box-shadow:0 14px 22px -12px rgba(0,0,0,.7)}
.btn.ghost,.btn.ghost-w,.hero .btn.ghost,.hero-handbook .btn.ghost,.hero-coc .btn.ghost{background:transparent;color:#fff!important;border:2px solid rgba(255,255,255,.7);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn.ghost:hover,.btn.ghost-w:hover,.hero .btn.ghost:hover{background:rgba(255,255,255,.12);box-shadow:none}
.links a.pill{border-radius:12px;background:#5C9B88;color:#06120E}
.links a.pill:hover{background:#F6C94B;color:#1B1403;box-shadow:none;transform:none}
.links a:hover{box-shadow:inset 0 -3px 0 var(--sun)}

/* ---------- header, footer, bars: solid, no glass ---------- */
.top{background:#0F3028;-webkit-backdrop-filter:none;backdrop-filter:none}
.brand img{filter:none}
.prog{box-shadow:none;background:linear-gradient(90deg,var(--g),var(--sun),var(--pop))}
.tools,.toc,.pg-coc .cc-nav{background:#0F3028;-webkit-backdrop-filter:none;backdrop-filter:none}
@media(max-width:1119px){.links{background:#0F3028;-webkit-backdrop-filter:none;backdrop-filter:none}.links a.pill{border-radius:0;background:#5C9B88}}
@media(min-width:1000px){.toc{background:transparent}}
.foot{background:#08130F}
.foot a{background:none;text-decoration:underline;text-decoration-color:var(--sun);text-underline-offset:4px}
.foot-brand p{color:var(--sun)}
.lb{background:rgba(5,12,9,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
.lb img{box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.snd{background:#12382F;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 20px -12px rgba(0,0,0,.8)}
.snd[aria-pressed=true]{box-shadow:0 10px 20px -12px rgba(0,0,0,.8)}
.snd.nudge{animation:none}
html.pre-on .pre{background:#0F3028}
.pre i{background:var(--sun)}

/* ---------- whole fields of colour ---------- */
.ticker{background:var(--sun);color:#1B1403;border:0}
.ticker span{color:#1B1403}.ticker span:after{color:#0F3028}
.strip{background:var(--field2)}
.giant{background:#0C2821;border:0}
.giant-row span{-webkit-text-stroke:1.5px rgba(246,201,75,.8)}
.giant-row.b span{color:#fff}
.stats{gap:12px}
.stats div,.stats div:nth-child(3n+2),.stats div:nth-child(3n){border:0;border-radius:16px;background:#2A6B58;color:#fff}
.stats div:nth-child(3n+2){background:#8FD1B9;color:#0F3028}.stats div:nth-child(3n+2) b{color:#0F3028}
.stats div:nth-child(3n){background:#F6C94B;color:#1B1403}.stats div:nth-child(3n) b{color:#1B1403}
.stats div:nth-child(4n){background:#F28B6B;color:#1B1403}.stats div:nth-child(4n) b{color:#1B1403}
.stats b{color:#fff}
.sec:nth-of-type(even){background:var(--field2)}
.sec.t1,.sec.t2,.sec.t3{background:transparent}
.cta,body.pg-leader .cta,body.pg-coc .cta{background:#F6C94B;color:#1B1403;border:0}
body.pg-leader .cta{background:#F28B6B}
body.pg-coc .cta{background:#8FD1B9}
.cta:before,body.pg-leader .cta:before,body.pg-coc .cta:before{display:none}
.cta h2,body.pg-leader .cta h2,.cta p,.cta .lead{color:#1B1403}
.cta .btn,body.pg-leader .cta .btn,body.pg-coc .cta .btn{background:#0F3028;color:#fff!important}
.cta .btn:hover{background:#1A463A}
.cta .btn.ghost-w,.cta .btn.ghost{background:transparent;color:#1B1403!important;border:2px solid #1B1403}
.cta .btn.ghost-w:hover{background:rgba(27,20,3,.1)}
.cta a:not(.btn){color:#1B1403;text-decoration:underline}

/* ---------- cards and pictures: plain depth, 16px corners, no coloured halos ---------- */
.collage{animation:none!important;perspective:none}
.collage figure,.pol,.photo,.sp-img img,.drift figure,.band-fg,.gal figure,.carousel figure,.wall-in figure,.wall.hs figure,.card,.rung,.ph,.maxims li,.pg-coc .mx,.reel figure,.tbl{
  border-radius:16px;box-shadow:var(--depth);border:0;background:var(--card);transform-style:flat}
.collage figure{transform:none!important;transition:none}
.collage figure:nth-child(2n),.hero-handbook .collage figure,.drift figure:nth-child(3){box-shadow:var(--depth)}
.drift figure,.photo,.sp-img img,.band-fg{background:transparent}
.wall.hs figure{box-shadow:var(--depth)}
.collage figcaption,.pol figcaption,.photo figcaption,.carousel figcaption{background:var(--card);border-top:0;color:#E6F1EC}
.card,.rung,.maxims li,.pg-coc .mx{background:var(--card)}
.maxims li:nth-child(4n+2),.maxims li:nth-child(4n+3),.maxims li:nth-child(4n){background:var(--card)}
.ph{background:var(--card2)}
.stairs li{border:0;border-radius:14px 14px 0 0;background:#2A6B58;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.stairs li:nth-child(odd){background:#3A8A72}
.stairs li:last-child{background:#F6C94B;box-shadow:none}
.reel figure{border:0;box-shadow:var(--depth)}
.reel figure:nth-child(3n){box-shadow:var(--depth)}
.wall.hs figure:after{text-shadow:none;background:rgba(15,48,40,.85);padding:6px 10px;border-radius:8px;left:10px;bottom:10px}
.hs-bar i{box-shadow:none}
details.fold>summary:before{box-shadow:none}
details.fold>summary:hover,details.fold[open]>summary{background:var(--tn)}
.tl li:before{box-shadow:none}
.tl:before{background:var(--sun)}
.toc a.on{background:var(--tn,rgba(92,155,136,.2))}
.faq details[open] summary:after{background:var(--sun)}
.chips li{border:0;background:var(--card);border-radius:12px}
.expand button{border-radius:12px;border:2px solid rgba(255,255,255,.55);background:transparent}
.expand button:hover{background:rgba(255,255,255,.1);box-shadow:none}
.burger{border-radius:12px;background:transparent;border:2px solid rgba(255,255,255,.55)}
.reveal-on .photo.rv,.reveal-on .rv-w{clip-path:inset(0 0 100% 0 round 16px)}
.reveal-on .photo.rv.in,.reveal-on .rv-w.in{clip-path:inset(-40px round 16px)}
.lead2 p:first-child,blockquote{max-width:30ch}
blockquote{border-left:0;padding-left:0}
blockquote cite{display:block;margin-top:.6em}

/* hovers only where a pointer exists, and only a small calm lift with a ring in the section colour */
@media(hover:hover){
  .pcard:hover .ph,.card:hover,.rung:hover,.maxims li:hover,.pg-coc .mx:hover,.pol:hover,.drift figure:hover,.wall.hs figure:hover,.wall-in figure:hover,.split:hover .sp-img img{
    transform:translateY(-4px);box-shadow:0 0 0 2px var(--ac,var(--sun)),var(--depth);background-color:var(--card2)}
}
.maxims li:hover,.pg-coc .mx:hover{background:var(--card2)}
@media(hover:none){.pcard:hover .ph,.card:hover,.rung:hover,.maxims li:hover,.pg-coc .mx:hover,.pol:hover{transform:none;box-shadow:var(--depth)}}
.pcard,.card,.maxims li,.rung{transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s var(--ease)}
.pcard .ph{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}

/* ---------- the phone: the headline is solid white, the picture strip sits under it ---------- */
@media(max-width:700px){
  .hero h1{font-size:clamp(2.7rem,13.5vw,3.8rem);line-height:.98;max-width:none}
  .reel figure{border-radius:14px}
  .stats div{padding:18px}
}
/* keyboard focus, touch targets, selection, reduced motion */
:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
a,button,summary{-webkit-tap-highlight-color:rgba(246,201,75,.25)}
.links a,.jump a,.toc a,.expand button,summary{min-height:44px}
.quick a{min-height:0;padding:6px 0;border-bottom:2px solid var(--sun)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== bolder pass: team groups become whole fields of bright colour, headings get huge ===== */
.hero,.hero-handbook,.hero-coc{background:#17594A;border-bottom:0}
.hero-leader{background:#7A3A2A}
.hero .lead,.hero .count{color:#F1F7F4}
.count strong{font-size:1.6em}
.grp-h h2{font-size:clamp(3.2rem,9.5vw,8rem);line-height:.92;letter-spacing:-.025em}
.grp-h{align-items:flex-end;gap:18px}
.grp-h .n{font:400 clamp(2.4rem,6vw,4.6rem)/1 var(--fd);color:var(--ac);margin:0;-webkit-text-stroke:0;font-variant-numeric:lining-nums}
.grp-h .n:before,.grp-h .n:after{content:""}
.grp{padding:clamp(44px,7vw,96px) 0 clamp(36px,5vw,70px)}
.grp+.grp{border-top:0}
.pgrid{gap:34px 22px}
.pcard .ph{border-radius:20px;box-shadow:var(--depth)}
.pn{font-size:1.45rem;font-weight:400;letter-spacing:-.005em;margin-top:6px}
.pr{font-weight:600;font-size:1.02rem}
.pd{font-size:.86rem;letter-spacing:.04em;text-transform:uppercase}
.grp.t1,.grp.t2,.grp.t3,.grp.t4{color:#1B1403}
.grp.t1{--bg:#F6C94B}.grp.t2{--bg:#F28B6B}.grp.t3{--bg:#9FC79A}.grp.t4{--bg:#8FD1B9}
.grp.t1,.grp.t2,.grp.t3,.grp.t4{background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.grp.t1 .grp-h h2,.grp.t2 .grp-h h2,.grp.t3 .grp-h h2,.grp.t4 .grp-h h2{-webkit-text-fill-color:#1B1403!important;color:#1B1403!important}
.grp.t1 .grp-h .n,.grp.t2 .grp-h .n,.grp.t3 .grp-h .n,.grp.t4 .grp-h .n{color:#0F3028}
.grp.t1 .pn,.grp.t2 .pn,.grp.t3 .pn,.grp.t4 .pn{color:#1B1403}
.grp.t1 .pr,.grp.t2 .pr,.grp.t3 .pr,.grp.t4 .pr{color:#0F3028}
.grp.t1 .pd,.grp.t2 .pd,.grp.t3 .pd,.grp.t4 .pd,.grp.t1 .sub,.grp.t2 .sub,.grp.t3 .sub,.grp.t4 .sub{color:#3A2E0A}
.grp.t1 .ph,.grp.t2 .ph,.grp.t3 .ph,.grp.t4 .ph{background:rgba(15,48,40,.14);box-shadow:0 18px 30px -20px rgba(0,0,0,.45)}
.grp.t1 .ph .ini,.grp.t2 .ph .ini,.grp.t3 .ph .ini,.grp.t4 .ph .ini{color:#0F3028;opacity:.55}
@media(hover:hover){.grp.t1 .pcard:hover .ph,.grp.t2 .pcard:hover .ph,.grp.t3 .pcard:hover .ph,.grp.t4 .pcard:hover .ph{box-shadow:0 0 0 3px #0F3028,0 18px 30px -20px rgba(0,0,0,.45)}}
.grp.t0 .pcard .pr,.grp.t5 .pcard .pr{color:var(--sun)}
@media(max-width:700px){.grp-h h2{font-size:clamp(2.8rem,15vw,4.4rem)}.pn{font-size:1.2rem}}