/* ===================================================================
   SELF-HOSTED TYPEFACES
   The site previously named only Iowan Old Style and Avenir Next, which
   exist on macOS and nowhere else — on Windows and Android it fell back to
   Times New Roman and Segoe UI, a completely different identity for most of
   the audience. These two are variable, open source (SIL OFL 1.1) and served
   from our own origin, so every visitor sees the same design and no request
   leaves for a third party.
     Newsreader — editorial serif, replaces Iowan Old Style
     Manrope    — geometric humanist sans, replaces Avenir Next
   =================================================================== */
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin-ext.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";
  src:url("fonts/newsreader-latin.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Manrope";
  src:url("fonts/manrope-latin-ext.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Manrope";
  src:url("fonts/manrope-latin.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   FitLink Global Solutions — Design System v2
   =================================================================== */

:root{
  /* Brand greens */
  --g-950:#0F1A18; --g-900:#16241F; --g-850:#1B2E29; --g-800:#223932;
  --g-700:#2B4740; --g-600:#344B48; --g-500:#456460; --g-400:#5E807A;
  --g-300:#8AA39D; --g-200:#B8CAC5;

  /* Sand / gold */
  --s-600:#B99A66; --s-500:#C9AE7E; --s-400:#DCC49C; --s-300:#E8D9BC; --s-200:#F2E9D8;

  /* Neutrals */
  --cream:#FDFCF9; --paper:#F6F3EC; --paper-2:#EDE8DE; --white:#fff;

  --ink:var(--g-900);
  --line:rgba(27,46,41,.10);
  --line-2:rgba(27,46,41,.16);
  --line-d:rgba(220,196,156,.18);
  --line-d2:rgba(220,196,156,.32);

  --ff-d:"Newsreader","Iowan Old Style",Baskerville,Georgia,serif;
  --ff-s:"Manrope","Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --wrap:1240px; --wrap-n:860px; --wrap-w:1480px;
  --r-xs:8px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:40px; --r-pill:999px;

  --sh-xs:0 1px 2px rgba(15,26,24,.05);
  --sh-sm:0 2px 8px rgba(15,26,24,.06),0 1px 2px rgba(15,26,24,.04);
  --sh-md:0 8px 30px rgba(15,26,24,.09),0 2px 8px rgba(15,26,24,.05);
  --sh-lg:0 24px 70px rgba(15,26,24,.14),0 8px 24px rgba(15,26,24,.07);
  --sh-xl:0 40px 120px rgba(15,26,24,.22);
  --sh-gold:0 12px 40px rgba(185,154,102,.28);

  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);

  --nav-h:78px;

  /* Text on green: the brand reads gold-on-green, never white-on-green. */
  --on-green-title:var(--s-400);
  --on-green-body:rgba(232,217,188,.84);
  --on-green-muted:rgba(220,196,156,.60);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0;background:var(--cream);color:var(--g-600);
  font-family:var(--ff-s);font-size:17px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--ff-d);font-optical-sizing:auto;font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0;color:var(--g-800)}
p{margin:0 0 1.15em}p:last-child{margin-bottom:0}
::selection{background:var(--s-400);color:var(--g-900)}
:focus-visible{outline:2px solid var(--s-600);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}
.wrap-n{width:100%;max-width:var(--wrap-n);margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}
.wrap-w{width:100%;max-width:var(--wrap-w);margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}
.section{padding:clamp(72px,10vw,140px) 0;position:relative}
.section-sm{padding:clamp(48px,6vw,88px) 0;position:relative}
.sec-paper{background:var(--paper)}
.sec-dark{background:var(--g-900);color:var(--on-green-body)}
.sec-dark h1,.sec-dark h2,.sec-dark h3,.sec-dark h4{color:var(--on-green-title)}
.sec-grad{background:linear-gradient(168deg,var(--g-850) 0%,var(--g-700) 52%,var(--g-800) 100%);color:var(--g-200)}
.sec-grad h2,.sec-grad h3{color:var(--on-green-title)}
.grid{display:grid;gap:clamp(18px,2.4vw,28px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.center{text-align:center}
.mt-s{margin-top:18px}.mt-m{margin-top:32px}.mt-l{margin-top:clamp(40px,6vw,68px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grain{position:absolute;inset:0;background-image:var(--grain);opacity:.16;pointer-events:none;mix-blend-mode:overlay}

/* ---------- Type ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:400;letter-spacing:.28em;text-transform:uppercase;
  color:var(--s-600);margin:0 0 20px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
.center .eyebrow{justify-content:center}
.sec-dark .eyebrow,.sec-grad .eyebrow,.hero .eyebrow{color:var(--s-400)}
.h-hero{font-size:clamp(2.9rem,7.2vw,6rem);line-height:1.02;letter-spacing:-.028em}
.h-xl{font-size:clamp(2.5rem,5.4vw,4.4rem);letter-spacing:-.024em}
.h-lg{font-size:clamp(2.05rem,4vw,3.2rem);letter-spacing:-.02em}
.h-md{font-size:clamp(1.65rem,2.7vw,2.3rem)}
.h-sm{font-size:clamp(1.28rem,1.9vw,1.6rem)}
.lead{font-size:clamp(1.06rem,1.35vw,1.24rem);line-height:1.7;color:var(--g-500);max-width:66ch}
.sec-dark .lead,.sec-grad .lead{color:var(--on-green-body)}
.center .lead{margin-inline:auto}
.muted{color:var(--g-400)}
.sec-dark .muted,.sec-grad .muted{color:var(--on-green-muted)}
.gold{color:var(--s-500)}
.rule{width:56px;height:1px;background:var(--s-600);border:0;margin:24px 0;opacity:.7}
.center .rule{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--g-800);--fg:var(--cream);--bd:var(--g-800);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;
  padding:15px 32px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-size:13.5px;font-weight:400;letter-spacing:.17em;text-transform:uppercase;
  border-radius:var(--r-pill);overflow:hidden;isolation:isolate;
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out),color .3s var(--e),border-color .3s var(--e);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--s-400);transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--sh-md);color:var(--g-900);border-color:var(--s-400)}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:translateY(-1px)}
.btn--gold{--bg:var(--s-400);--fg:var(--g-900);--bd:var(--s-400)}
.btn--gold::before{background:var(--cream)}
.btn--ghost{--bg:transparent;--fg:var(--g-700);--bd:var(--line-2)}
.btn--ghost::before{background:var(--g-800)}
.btn--ghost:hover{color:var(--cream);border-color:var(--g-800)}
.btn--light{--bg:transparent;--fg:var(--s-400);--bd:var(--line-d2)}
.btn--light::before{background:var(--s-400)}
.btn--sm{padding:11px 22px;font-size:12.5px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.center .btn-row{justify-content:center}
/* The CTA band centres its eyebrow, heading and lead through text-align, which
   does nothing for a flex row — the buttons sat hard left under centred copy. */
.cta-band .btn-row{justify-content:center}
.btn svg{width:15px;height:15px;transition:transform .4s var(--e-out)}
.btn:hover svg{transform:translateX(4px)}

.link-a{
  display:inline-flex;align-items:center;gap:10px;font-size:13.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--g-700);position:relative;padding-bottom:5px;
  transition:gap .35s var(--e-out),color .3s var(--e);
}
.link-a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--s-600);transform-origin:right;transition:transform .45s var(--e-out)}
.link-a:hover{gap:16px;color:var(--s-600)}
.link-a:hover::after{transform:scaleX(0);transform-origin:left}
.sec-dark .link-a,.sec-grad .link-a{color:var(--s-400)}
.link-a svg{width:14px;height:14px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:900;height:var(--nav-h);display:flex;align-items:center;
  transition:background .5s var(--e),box-shadow .5s var(--e),backdrop-filter .5s;
}
.nav--solid{
  background:rgba(253,252,249,.86);backdrop-filter:blur(18px) saturate(1.6);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 1px 0 var(--line),0 10px 40px rgba(15,26,24,.05);
}
.nav-in{width:100%;max-width:var(--wrap-w);margin-inline:auto;padding-inline:clamp(20px,4vw,32px);display:flex;align-items:center;justify-content:space-between;gap:28px}
.logo{display:flex;align-items:center;position:relative}
.logo-img{height:38px;width:auto;display:block;transition:opacity .4s var(--e)}
.logo-on-light{position:absolute;left:0;top:50%;translate:0 -50%;opacity:0}
.nav--solid .logo-on-dark{opacity:0}
.nav--solid .logo-on-light{opacity:1}
.footer .logo-img{height:44px}
@media(max-width:520px){.logo-img{height:31px}}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>*{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:var(--r-pill);
  font-size:14.5px;font-weight:400;letter-spacing:.03em;color:var(--on-green-body);
  transition:color .3s var(--e),background .3s var(--e);
}
.nav--solid .nav-link{color:var(--g-500)}
.nav-link:hover,.nav-link.is-active{color:var(--s-400)}
.nav--solid .nav-link:hover{color:var(--g-800);background:rgba(27,46,41,.05)}
.nav--solid .nav-link.is-active{color:var(--g-800)}
.nav-link.is-active::after{content:"";position:absolute;left:15px;width:5px;height:5px;border-radius:50%;background:var(--s-500);bottom:1px}
.nav-link .caret{width:9px;height:9px;opacity:.7;transition:transform .35s var(--e)}
.has-drop:hover .caret,.has-drop:focus-within .caret{transform:rotate(180deg)}

.drop{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;min-width:330px;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:12px;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);transform-origin:top center;
  transition:opacity .32s var(--e-out),transform .32s var(--e-out),visibility .32s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.drop::before{content:"";position:absolute;top:-6px;left:50%;translate:-50% 0;width:12px;height:12px;background:var(--cream);border-left:1px solid var(--line);border-top:1px solid var(--line);rotate:45deg}
.drop a{display:flex;gap:14px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-sm);transition:background .25s var(--e)}
.drop a:hover{background:var(--paper)}
.drop .di{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,var(--s-200),rgba(220,196,156,.25));color:var(--g-700)}
.drop .di svg{width:17px;height:17px}
.drop b{display:block;font-weight:400;font-size:15px;color:var(--g-800);line-height:1.35}
.drop small{display:block;font-size:13.5px;color:var(--g-400);line-height:1.5;margin-top:2px}

.nav-right{display:flex;align-items:center;gap:14px}
.burger{display:none;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{display:block;width:21px;height:1.5px;background:var(--s-400);transition:transform .4s var(--e),opacity .3s}
.nav--solid .burger span{background:var(--g-800)}
.burger.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:1120px){.nav-links,.nav-right .btn{display:none}.burger{display:flex}}

.drawer{
  position:fixed;inset:0;z-index:950;background:var(--g-900);color:var(--on-green-body);
  padding:calc(var(--nav-h) + 24px) clamp(20px,6vw,40px) 48px;overflow-y:auto;
  clip-path:circle(0% at 100% 0);transition:clip-path .7s var(--e-out);
}
.drawer.is-open{clip-path:circle(150% at 100% 0)}
.drawer a{display:block;padding:16px 0;border-bottom:1px solid var(--line-d);font-family:var(--ff-d);font-size:1.75rem;color:var(--on-green-title);opacity:0;transform:translateY(14px);transition:opacity .5s var(--e-out),transform .5s var(--e-out),color .3s}
.drawer.is-open a{opacity:1;transform:none}
.drawer a:hover{color:var(--s-400)}
.drawer-sub a{font-family:var(--ff-s);font-size:1rem;padding:11px 0 11px 20px;color:var(--on-green-body);border-bottom-color:transparent}
.drawer .btn{margin-top:30px;width:100%}
.drawer-close{position:absolute;top:20px;right:20px;width:46px;height:46px;font-size:28px;line-height:1;color:var(--s-400)}

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--nav-h) + 72px) 0 96px;color:var(--on-green-body);overflow:hidden;
  background:
    radial-gradient(90% 70% at 78% 8%,rgba(94,128,122,.55) 0%,transparent 62%),
    radial-gradient(70% 60% at 12% 92%,rgba(185,154,102,.20) 0%,transparent 60%),
    linear-gradient(158deg,var(--g-850) 0%,var(--g-700) 46%,var(--g-950) 100%);
}
.hero-globe{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(1180px,128vw);aspect-ratio:1;opacity:.55;pointer-events:none}
.hero-globe svg{width:100%;height:100%;animation:spin 132s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-glow{position:absolute;top:-18%;right:-8%;width:min(720px,72vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(220,196,156,.16) 0%,transparent 68%);filter:blur(30px);pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:220px;background:linear-gradient(transparent,rgba(15,26,24,.6));pointer-events:none}
.hero .wrap{position:relative;z-index:3}
.hero h1{color:var(--on-green-title)}
.hero-sub{max-width:56ch;color:var(--on-green-body);font-size:clamp(1.05rem,1.4vw,1.26rem);line-height:1.68}
.center .hero-sub{margin-inline:auto}
.hero-mark{width:clamp(180px,19vw,244px);margin:0 auto 40px}
.hero-mark img{width:100%;height:auto}

/* word-by-word reveal */
.rv-line{display:block;overflow:hidden}
.rv-word{display:inline-block;transform:translateY(105%);opacity:0;
  transition:transform .8s var(--e-out),opacity .8s var(--e-out)}
.is-lit .rv-word{transform:translateY(0);opacity:1}

/* floating stat chips */
.hero-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.center .hero-chips{justify-content:center}
.chip-glass{
  display:flex;align-items:center;gap:11px;padding:11px 20px;border-radius:var(--r-pill);
  background:rgba(253,252,249,.07);border:1px solid var(--line-d);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  font-size:13.5px;letter-spacing:.05em;color:var(--on-green-body);
  transition:background .4s var(--e),transform .4s var(--e-out),border-color .4s;
}
.chip-glass:hover{background:rgba(253,252,249,.12);transform:translateY(-3px);border-color:var(--line-d2)}
.chip-glass b{font-family:var(--ff-d);font-size:1.4rem;font-weight:500;color:var(--s-400);line-height:1}
.chip-glass .pulse{width:7px;height:7px;border-radius:50%;background:var(--s-400);box-shadow:0 0 0 0 rgba(220,196,156,.6);animation:pulse 2.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 11px rgba(220,196,156,0)}100%{box-shadow:0 0 0 0 rgba(220,196,156,0)}}

.scroll-cue{position:absolute;bottom:34px;left:50%;translate:-50% 0;z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:11.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--on-green-muted)}
.scroll-cue i{display:block;width:1px;height:52px;background:linear-gradient(var(--s-400),transparent);animation:cue 2.6s var(--e) infinite}
@keyframes cue{0%,100%{transform:scaleY(.15);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}99%{transform:scaleY(.15);transform-origin:bottom}}

/* ---------- Page hero (subpages) ---------- */
.phero{
  position:relative;color:var(--on-green-body);padding:calc(var(--nav-h) + 96px) 0 clamp(72px,9vw,110px);overflow:hidden;
  background:
    radial-gradient(80% 90% at 82% 10%,rgba(94,128,122,.45) 0%,transparent 60%),
    linear-gradient(155deg,var(--g-850),var(--g-700) 58%,var(--g-900));
}
.phero-rings{position:absolute;top:-40%;right:-10%;width:min(660px,68vw);aspect-ratio:1;pointer-events:none;opacity:.5}
.phero-rings span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-d)}
.phero-rings span:nth-child(2){inset:12%}
.phero-rings span:nth-child(3){inset:24%}
.phero-rings span:nth-child(4){inset:36%;border-color:var(--line-d2)}
.phero .wrap{position:relative;z-index:3}
.phero h1{color:var(--on-green-title);max-width:17ch}
.phero .lead{color:var(--on-green-body);margin-top:22px}
.crumbs{display:flex;align-items:center;gap:9px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(220,196,156,.8);margin-bottom:24px}
.crumbs a{opacity:.75;transition:opacity .25s}.crumbs a:hover{opacity:1}
.crumbs i{opacity:.4;font-style:normal}

/* ===================================================================
   CARDS
   =================================================================== */
.card{
  position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,3vw,38px);height:100%;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .45s var(--e);
}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:linear-gradient(150deg,rgba(220,196,156,.14),transparent 55%);
  transition:opacity .55s var(--e);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:rgba(185,154,102,.5)}
.card:hover::after{opacity:1}
.card h3{font-size:clamp(1.28rem,1.7vw,1.5rem);margin-bottom:13px}
.card p{color:var(--g-500);font-size:15.5px;line-height:1.72}
.card .link-a{margin-top:auto;padding-top:26px;align-self:flex-start}
.card--dark{background:var(--g-800);border-color:var(--line-d);color:var(--on-green-body)}
.card--dark h3{color:var(--on-green-title)}.card--dark p{color:var(--on-green-body)}
.card--glass{background:rgba(253,252,249,.05);border-color:var(--line-d);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.card--glass h3{color:var(--on-green-title)}.card--glass p{color:var(--on-green-body)}

.card-ico{
  width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:24px;flex:none;
  background:linear-gradient(142deg,var(--s-200),rgba(220,196,156,.22));color:var(--g-700);
  transition:transform .55s var(--e-spring),background .45s var(--e);
}
.card:hover .card-ico{transform:translateY(-3px) rotate(-5deg) scale(1.06)}
.card--dark .card-ico,.card--glass .card-ico{background:rgba(220,196,156,.13);color:var(--s-400)}
.card-ico svg{width:25px;height:25px}

/* Bento grid — services */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(16px,2vw,24px)}
.bento>*{grid-column:span 3}
.bento .b-wide{grid-column:span 6}
.bento .b-third{grid-column:span 2}
@media(max-width:900px){.bento{grid-template-columns:1fr}.bento>*,.bento .b-wide,.bento .b-third{grid-column:span 1}}

.num-card{padding-top:52px}
.num-card .n{
  position:absolute;top:30px;left:clamp(28px,3vw,38px);font-family:var(--ff-d);font-size:3.4rem;line-height:1;
  color:rgba(185,154,102,.42);transition:color .5s var(--e),transform .5s var(--e-out);
}
.card:hover .n{color:rgba(185,154,102,.75);transform:translateY(-3px)}
.num-card h3{margin-top:38px}

/* ===================================================================
   SPLIT / FEATURE
   =================================================================== */
.split{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5.5vw,84px);align-items:center}
.split--rev .split-media{order:-1}
@media(max-width:880px){.split{grid-template-columns:1fr}.split--rev .split-media{order:0}}
.split-media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--g-700),var(--g-950));box-shadow:var(--sh-lg);
}
.split-media svg{width:72%;max-width:360px;opacity:.9}
.split-media--paper{background:linear-gradient(150deg,var(--paper),var(--paper-2));box-shadow:var(--sh-md)}
.split-media--paper svg{opacity:1}

.ticks{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:15px}
.ticks li{position:relative;padding-left:36px;font-size:16px;color:var(--g-500)}
.sec-dark .ticks li,.sec-grad .ticks li{color:var(--on-green-body)}
.ticks li::before{content:"";position:absolute;left:0;top:.34em;width:20px;height:20px;border-radius:50%;background:rgba(220,196,156,.26)}
.ticks li::after{content:"";position:absolute;left:6px;top:.66em;width:8px;height:4.5px;border-left:1.7px solid var(--g-700);border-bottom:1.7px solid var(--g-700);transform:rotate(-45deg)}
.sec-dark .ticks li::after,.sec-grad .ticks li::after{border-color:var(--s-400)}

/* ===================================================================
   AUDIENCE TABS
   =================================================================== */
.aud{display:grid;grid-template-columns:270px 1fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:900px){.aud{grid-template-columns:1fr}}
.aud-tabs{display:flex;flex-direction:column;gap:6px}
@media(max-width:900px){.aud-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px}}
.aud-tab{
  position:relative;text-align:left;padding:20px 24px;border-radius:var(--r-sm);white-space:nowrap;
  font-family:var(--ff-d);font-size:1.35rem;color:var(--on-green-muted);
  transition:color .35s var(--e),background .35s var(--e);
}
.aud-tab::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:2px;border-radius:2px;background:var(--s-500);transform:scaleY(0);transition:transform .45s var(--e-out)}
@media(max-width:900px){.aud-tab::before{left:14%;right:14%;top:auto;bottom:0;width:auto;height:2px;transform:scaleX(0)}}
.aud-tab.is-on{color:var(--on-green-title);background:rgba(220,196,156,.08)}
.aud-tab.is-on::before{transform:scaleY(1)}
@media(max-width:900px){.aud-tab.is-on::before{transform:scaleX(1)}}
.aud-tab small{display:block;font-family:var(--ff-s);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-green-muted);margin-top:5px}
.aud-panel{display:none}
.aud-panel.is-on{display:block;animation:fadeUp .65s var(--e-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ===================================================================
   STATS / COUNTERS
   =================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,36px)}
@media(max-width:800px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{position:relative;padding:28px 0 0}
.stat::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--s-500)}
.stat .v{font-family:var(--ff-d);font-size:clamp(2.6rem,5vw,3.9rem);line-height:1;color:var(--s-400);font-weight:500}
.stat .k{margin-top:12px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-green-muted)}
.sec-paper .stat .v{color:var(--g-700)}
.sec-paper .stat .k{color:var(--g-400)}
.proof-grid .stat .v{font-size:clamp(1.55rem,2.5vw,2.25rem);line-height:1.1;max-width:12ch}
.proof-grid .stat .k{max-width:24ch;line-height:1.55;letter-spacing:.14em}

/* ===================================================================
   MARQUEE
   =================================================================== */
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.mq-track{display:flex;gap:clamp(40px,5vw,76px);width:max-content;animation:slide 46s linear infinite}
.mq-track--rev{animation-direction:reverse;animation-duration:56s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.mq-item{
  display:flex;align-items:center;gap:12px;font-family:var(--ff-d);font-size:clamp(1.25rem,2vw,1.7rem);
  letter-spacing:.1em;text-transform:uppercase;color:var(--g-300);white-space:nowrap;
  transition:color .35s var(--e),opacity .35s;opacity:.75;
}
.mq-item:hover{color:var(--g-700);opacity:1}
.sec-dark .mq-item,.sec-grad .mq-item{color:var(--on-green-muted)}
.sec-dark .mq-item:hover,.sec-grad .mq-item:hover{color:var(--s-400)}
.mq-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--s-500);opacity:.6;flex:none}

/* ===================================================================
   PROCESS TIMELINE
   =================================================================== */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.steps::before{
  content:"";position:absolute;top:34px;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-d2),transparent);
}
@media(max-width:860px){.steps::before{display:none}}
.step{position:relative;text-align:center;padding-top:0}
.step .dot{
  width:68px;height:68px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;
  background:var(--g-800);border:1px solid var(--line-d2);color:var(--s-400);
  font-family:var(--ff-d);font-size:1.7rem;position:relative;z-index:2;
  transition:transform .55s var(--e-spring),background .45s var(--e),color .45s;
}
.step:hover .dot{transform:translateY(-5px) scale(1.06);background:var(--s-400);color:var(--g-900)}
.sec-paper .step .dot{background:var(--white);border-color:var(--line-2);color:var(--g-700)}
.step h3{font-size:1.35rem;margin-bottom:10px}
/* Dark ink by default and the light tone only where the ground is dark. It was
   the other way round, so a steps block on a plain cream section (the Booty Area
   landing) printed body text in the colour meant for a green background and
   barely registered against the paper. */
.step p{font-size:15px;color:var(--g-500);max-width:34ch;margin-inline:auto}
.sec-dark .step p,.sec-grad .step p{color:var(--on-green-body)}
.sec-dark .step h3,.sec-grad .step h3{color:var(--on-green-title)}

/* ===================================================================
   FILTERS / TOOLBAR
   =================================================================== */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:clamp(28px,4vw,44px)}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  padding:10px 20px;border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--white);
  font-size:13.5px;letter-spacing:.06em;color:var(--g-500);white-space:nowrap;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e),transform .3s var(--e-out);
}
.chip:hover{border-color:var(--s-500);transform:translateY(-2px)}
.chip.is-active{background:var(--g-800);color:var(--cream);border-color:var(--g-800)}
.search{
  flex:1;min-width:230px;display:flex;align-items:center;gap:11px;padding:11px 20px;
  border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--white);
  transition:border-color .3s var(--e),box-shadow .3s var(--e);
}
.search:focus-within{border-color:var(--s-500);box-shadow:0 0 0 4px rgba(220,196,156,.18)}
.search input{border:0;outline:0;background:none;width:100%;font-size:15px}
.search svg{width:17px;height:17px;color:var(--g-300);flex:none}
.count{font-size:13.5px;color:var(--g-400);letter-spacing:.04em;white-space:nowrap}
.empty{padding:56px 24px;text-align:center;color:var(--g-400);border:1px dashed var(--line-2);border-radius:var(--r-md);background:var(--paper)}

/* Data source note (sheet-connected) */
.src-note{
  display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(220,196,156,.16);border:1px solid rgba(185,154,102,.3);
  font-size:12.5px;letter-spacing:.06em;color:var(--g-600);
}
.src-note svg{width:14px;height:14px;color:var(--s-600)}
.src-note .live{width:7px;height:7px;border-radius:50%;background:#4a9d6e;animation:pulse2 2.4s infinite}
@keyframes pulse2{50%{opacity:.35}}
.is-loading{opacity:.5;pointer-events:none}
.skeleton{background:linear-gradient(90deg,var(--paper) 25%,var(--paper-2) 50%,var(--paper) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm);height:78px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ===================================================================
   PRESS / EVENTS ROWS
   =================================================================== */
.rows{display:grid;gap:12px}
.row-item{
  display:grid;gap:22px;align-items:center;padding:24px 28px;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-md);position:relative;overflow:hidden;
  transition:border-color .4s var(--e),transform .4s var(--e-out),box-shadow .4s var(--e-out);
}
.row-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--s-500);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e-out)}
.row-item:hover{border-color:rgba(185,154,102,.55);transform:translateX(5px);box-shadow:var(--sh-md)}
.row-item:hover::before{transform:scaleY(1);transform-origin:top}
/* The date column was a fixed 104px with `white-space:nowrap`, so anything
   longer than "6 May 2025" ran straight over the outlet name — and a localised
   date ("17 de diciembre de 2025") is far longer than that. It now grows to fit
   its own content instead. */
.press-item{grid-template-columns:minmax(104px,max-content) minmax(0,1fr) auto}
@media(max-width:780px){.press-item{grid-template-columns:1fr;gap:10px}}
.press-date{font-size:13.5px;letter-spacing:.1em;color:var(--g-300);white-space:nowrap}
.press-title{font-family:var(--ff-d);font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.34;color:var(--g-800)}
.press-src{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--s-600);margin-top:7px}
.press-lang{font-size:12.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--g-300);border:1px solid var(--line-2);padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}

.event-item{grid-template-columns:96px 1fr auto}
@media(max-width:780px){.event-item{grid-template-columns:1fr;gap:14px}}
.ev-date{text-align:center;border-right:1px solid var(--line);padding-right:22px}
@media(max-width:780px){.ev-date{display:flex;gap:10px;align-items:baseline;border:0;padding:0;text-align:left}}
.ev-date .d{font-family:var(--ff-d);font-size:2.15rem;line-height:1;color:var(--g-800)}
.ev-date .m{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--s-600);margin-top:5px}
@media(max-width:780px){.ev-date .m{margin:0}}
.ev-body h3{font-size:1.24rem;margin-bottom:5px}
.ev-meta{font-size:14.5px;color:var(--g-400);display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.ev-meta span{display:inline-flex;align-items:center;gap:6px}
.ev-meta svg{width:13px;height:13px;opacity:.7}

/* ===================================================================
   BLOG
   =================================================================== */
.post-card{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;height:100%;
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .45s var(--e);
}
.post-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:rgba(185,154,102,.5)}
.post-thumb{aspect-ratio:16/10;position:relative;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--g-700),var(--g-950))}
.post-thumb svg{width:58%;max-width:250px;opacity:.9;transition:transform .8s var(--e-out)}
.post-thumb>img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:transform .9s var(--e-out),filter .6s var(--e)}
.post-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,26,24,.02),rgba(15,26,24,.42));pointer-events:none}
.post-thumb .cat{z-index:2}
.post-card:hover .post-thumb svg{transform:scale(1.07) rotate(2deg)}
.post-card:hover .post-thumb>img{transform:scale(1.055);filter:saturate(.9) contrast(1.03)}
.post-thumb .cat{
  position:absolute;top:16px;left:16px;padding:6px 14px;border-radius:var(--r-pill);
  background:rgba(253,252,249,.14);border:1px solid var(--line-d2);backdrop-filter:blur(10px);
  font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--s-400);
}
.post-body{padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;flex:1}
.post-body h3{font-size:clamp(1.24rem,1.7vw,1.44rem);margin-bottom:13px;line-height:1.24}
.post-body p{font-size:15px;color:var(--g-500);line-height:1.7}
.post-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13.5px;color:var(--g-400);margin-top:auto;padding-top:24px}
.post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--g-300)}

.post-card--ghost{
  border-style:dashed;border-color:var(--line-2);background:var(--paper);
  align-items:center;justify-content:center;text-align:center;padding:48px 30px;min-height:360px;
}
.post-card--ghost:hover{transform:none;box-shadow:none;border-color:var(--s-500);background:var(--paper-2)}
.ghost-ico{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;border:1px dashed var(--s-600);color:var(--s-600);margin-bottom:20px}
.post-card--ghost h3{font-size:1.16rem;color:var(--g-500)}
.post-card--ghost p{font-size:14.5px;color:var(--g-400);margin-top:9px;max-width:28ch}

/* Article */
.article{padding:clamp(48px,6vw,88px) 0}
.article-hero{padding:calc(var(--nav-h) + 72px) 0 clamp(40px,5vw,64px)}
.art-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:13.5px;color:var(--on-green-muted);margin-top:26px}
.art-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor}
.article-body{font-size:17.5px;line-height:1.86;color:var(--g-500)}
.article-body>*+*{margin-top:1.15em}
.article-body h2{font-size:clamp(1.6rem,2.6vw,2.15rem);color:var(--g-800);margin-top:2em}
.article-body h3{font-size:1.32rem;color:var(--g-800);margin-top:1.7em}
.article-body ul,.article-body ol{padding-left:24px}
.article-body li{margin-bottom:10px}
.article-body strong{font-weight:500;color:var(--g-700)}
.article-body a{color:var(--g-700);border-bottom:1px solid var(--s-500);transition:color .25s}
.article-body a:hover{color:var(--s-600)}
.article-body blockquote{
  margin:2em 0;padding:28px 34px;border-left:2px solid var(--s-400);background:var(--paper);
  border-radius:0 var(--r-md) var(--r-md) 0;font-family:var(--ff-d);font-size:1.42rem;line-height:1.48;color:var(--g-700);
}
.article-body img{border-radius:var(--r-md);margin:2em 0}
.share{display:flex;gap:10px;align-items:center;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.share span{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g-400)}
.share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--g-500);transition:all .3s var(--e)}
.share a:hover{background:var(--g-800);color:var(--cream);border-color:var(--g-800);transform:translateY(-2px)}
.share svg{width:16px;height:16px}
/* Article parts written by tools/build-blog.py */
.article-cover{margin:0 0 clamp(36px,5vw,56px)}
.article-cover img{display:block;width:100%;height:auto;border-radius:var(--r-lg);margin:0}
.article-body img{max-width:100%;height:auto}
.article-body figure{margin:2em 0}
.article-body figure img{display:block;width:100%;margin:0}
.article-body figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--g-400);text-align:center}
.article-body h4{font-size:1.12rem;color:var(--g-800);margin-top:1.5em}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.article-body code{font-size:.9em;background:var(--paper);padding:.1em .35em;border-radius:4px}
.article-body pre{overflow-x:auto;background:var(--paper);padding:16px 18px;border-radius:var(--r-md);font-size:14px;line-height:1.6}
.table-wrap{overflow-x:auto;margin:2em 0}
.article-body table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.55}
.article-body th,.article-body td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.article-body th{font-weight:500;color:var(--g-800);background:var(--paper);border-bottom-color:var(--line-2)}
.art-tags{list-style:none;padding:0;margin:44px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.art-tags li{padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:13px;color:var(--g-500)}
.art-alt{margin-top:22px;font-size:14.5px;color:var(--g-500)}
.art-alt a{color:var(--g-700);border-bottom:1px solid var(--s-500)}
.post-card[hidden]{display:none}
.post-lang{font-weight:500;letter-spacing:.08em}
.blog-more{display:flex;justify-content:center;margin-top:clamp(32px,4vw,48px)}
.blog-more[hidden],.empty[hidden]{display:none}
#postBar .search{flex:1 1 260px;max-width:360px}

/* ===================================================================
   PARTNERS
   =================================================================== */
.partner-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
  display:flex;flex-direction:column;gap:16px;height:100%;position:relative;overflow:hidden;
  transition:transform .55s var(--e-out),box-shadow .55s var(--e-out),border-color .45s var(--e);
}
.partner-card:hover{transform:translateY(-8px);box-shadow:var(--sh-lg);border-color:rgba(185,154,102,.5)}
.partner-logo{
  height:84px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:linear-gradient(148deg,var(--paper),var(--paper-2));
  font-family:var(--ff-d);font-size:1.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--g-700);
  transition:background .45s var(--e),color .45s var(--e);
}
.partner-card:hover .partner-logo{background:linear-gradient(148deg,var(--s-200),rgba(220,196,156,.3))}
.partner-card h3{font-size:1.22rem}
.partner-card p{font-size:15px;color:var(--g-500);flex:1;line-height:1.7}
.tag{display:inline-block;padding:5px 13px;border-radius:var(--r-pill);font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;background:rgba(220,196,156,.22);color:var(--g-600)}
.tag-row{display:flex;flex-wrap:wrap;gap:7px}

/* Live partner directory: Google Sheet data inside the FitLink design system. */
.partner-directory{background:linear-gradient(180deg,var(--paper),var(--cream) 72%)}
.partner-toolbar{
  position:sticky;top:calc(var(--nav-h) + 12px);z-index:20;display:block;margin-bottom:34px;
  padding:clamp(24px,3.5vw,38px);border:1px solid rgba(220,196,156,.24);border-radius:22px;
  background:radial-gradient(90% 170% at 0% 0%,rgba(94,128,122,.36),transparent 65%),linear-gradient(145deg,var(--g-900),var(--g-950));
  box-shadow:0 24px 70px rgba(15,26,24,.18);backdrop-filter:blur(18px)
}
.partner-toolbar-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.partner-toolbar-head .eyebrow{margin-bottom:6px;color:var(--s-400)}
.partner-toolbar-head h2{font-size:clamp(1.7rem,3vw,2.35rem);color:var(--on-green-title)}
.partner-source{display:flex;align-items:center;gap:9px;white-space:nowrap;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-green-muted)}
.partner-source i{width:7px;height:7px;border-radius:50%;background:#88c9a8;box-shadow:0 0 0 5px rgba(136,201,168,.1)}
/* The chips shared one flex row with the search box, so they were squeezed
   onto a single line and the directory looked like it had three categories.
   Search on its own line, chips underneath, wrapping as far as they need. */
/* flex-start, not stretch: a column flex child stretches to the free height,
   and the pill-shaped search box became a tall ellipse. */
.partner-toolbar-controls{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.partner-toolbar-controls .chips{gap:8px}
/* The categories were a single scrolling strip faded out at the right edge,
   so most of them were never seen and the directory looked like it had three.
   They wrap onto as many rows as they need now, and the whole set is visible. */
.partner-toolbar .chips{flex-wrap:wrap;min-width:0;gap:8px;padding:2px 0}
.partner-toolbar .chips::-webkit-scrollbar{display:none}
.partner-toolbar .chip{padding:9px 16px;background:transparent;border-color:rgba(220,196,156,.22);color:rgba(232,217,188,.68);font-size:12.5px}
.partner-toolbar .chip{scroll-snap-align:start;flex:none}
.partner-toolbar .chip:hover{border-color:rgba(220,196,156,.52);color:var(--s-300)}
.partner-toolbar .chip.is-active{background:var(--s-400);border-color:var(--s-400);color:var(--g-950)}
.partner-toolbar .search{flex:none;width:min(100%,420px);min-width:220px;background:rgba(255,255,255,.045);border-color:rgba(220,196,156,.22)}
.partner-toolbar .search:focus-within{border-color:var(--s-400);box-shadow:0 0 0 4px rgba(220,196,156,.1)}
.partner-toolbar .search input{color:var(--s-200)}
.partner-toolbar .search input::placeholder{color:rgba(232,217,188,.42)}
.partner-toolbar .search svg{color:var(--s-500)}
.partner-toolbar-skeleton{height:84px;border-radius:14px;background:linear-gradient(90deg,rgba(220,196,156,.05),rgba(220,196,156,.13),rgba(220,196,156,.05));background-size:200% 100%;animation:sk 1.4s infinite}

.partner-grid{align-items:stretch;gap:22px}
.partner-card--rich{padding:0;gap:0;min-height:470px;border-radius:18px;background:var(--white)}
.partner-card--rich::before{content:"";position:absolute;z-index:4;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--s-600),var(--s-300));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e-out)}
.partner-card--rich:hover::before{transform:scaleX(1)}
.partner-visual{position:relative;height:190px;display:grid;place-items:center;overflow:hidden;flex:none;background:linear-gradient(140deg,var(--g-950),var(--g-700))}
.partner-visual::after{content:"";position:absolute;inset:0;z-index:2;opacity:.13;background-image:var(--grain);pointer-events:none}
.partner-visual img{width:100%;height:100%;object-fit:contain;position:relative;z-index:1;transition:transform .8s var(--e-out),filter .5s var(--e)}
.partner-card--rich:hover .partner-visual img{transform:scale(1.045);filter:saturate(.92)}
.partner-visual.is-empty{background:radial-gradient(circle at 30% 20%,rgba(94,128,122,.46),transparent 48%),linear-gradient(140deg,var(--g-950),var(--g-700))}
.partner-mark{position:relative;z-index:3;width:78px;height:78px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(220,196,156,.34);background:rgba(253,252,249,.045);font-family:var(--ff-d);font-size:1.7rem;color:var(--s-300);letter-spacing:.04em}
.partner-card-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 23px}
.partner-card-top{min-height:27px;margin-bottom:13px}
.partner-categories{display:flex;flex-wrap:wrap;gap:6px}
.partner-category{max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 10px;border-radius:var(--r-pill);background:rgba(52,75,72,.065);border:1px solid rgba(52,75,72,.11);font-size:11px;font-weight:500;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--g-500)}
.partner-card--rich h3{font-size:clamp(1.75rem,2.5vw,2.15rem);line-height:1.04;margin-bottom:7px}
.partner-domain{width:fit-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;letter-spacing:.045em;color:var(--s-600);transition:opacity .2s}
.partner-domain:hover{opacity:.62}
.partner-rule{width:30px;height:1px;margin:17px 0 13px;background:linear-gradient(90deg,var(--s-600),rgba(220,196,156,.12))}
.partner-card--rich p{font-size:14.5px;line-height:1.72;color:var(--g-500);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:20px}
.partner-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;margin-top:auto;border-top:1px solid var(--line)}
.partner-languages{display:flex;flex-wrap:wrap;gap:5px;min-height:28px}
.partner-lang{display:grid;place-items:center;min-width:31px;height:28px;padding:0 8px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--g-500);transition:all .25s var(--e)}
.partner-lang:hover{background:var(--g-700);border-color:var(--g-700);color:var(--s-300)}
.partner-visit{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line-2);border-radius:var(--r-pill);font-size:11.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--g-700);white-space:nowrap;transition:all .3s var(--e)}
.partner-visit svg{width:14px;height:14px;transition:transform .3s var(--e-out)}
.partner-visit:hover{background:var(--g-700);border-color:var(--g-700);color:var(--s-300)}
.partner-visit:hover svg{transform:translateX(3px)}
.partner-state{grid-column:1/-1;min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;border:1px solid var(--line-2);border-radius:20px;background:var(--white);color:var(--g-400)}
.partner-state p{font-size:13.5px;letter-spacing:.12em;text-transform:uppercase}
.partner-spinner{width:44px;height:44px;border:2px solid rgba(52,75,72,.12);border-top-color:var(--s-600);border-radius:50%;animation:spin .9s linear infinite}

@media(max-width:960px){
  .partner-toolbar{position:relative;top:auto}
  .partner-toolbar .search{flex:none;width:100%}
}
@media(max-width:640px){
  .partner-toolbar{padding:22px 18px;border-radius:18px}
  .partner-toolbar-head{align-items:flex-start;flex-direction:column;gap:13px}
  .partner-source{white-space:normal}
  .partner-grid{grid-template-columns:1fr}
  .partner-card--rich{min-height:auto}
  .partner-visual{height:180px}
  .partner-card-body{padding:21px 20px 20px}
}

/* ===================================================================
   FORM
   =================================================================== */
.form{display:grid;gap:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}
.field label{display:block;font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--g-400);margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;padding:15px 18px;border:1px solid var(--line-2);border-radius:var(--r-xs);background:var(--white);
  font-size:16px;font-weight:400;transition:border-color .3s var(--e),box-shadow .3s var(--e);
}
.field textarea{min-height:160px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--s-500);box-shadow:0 0 0 4px rgba(220,196,156,.2)}
.check{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--g-500)}
.check input{width:19px;height:19px;margin-top:3px;accent-color:var(--g-700);flex:none}
.check a{border-bottom:1px solid var(--s-500)}
.form-note{font-size:13.5px;color:var(--g-400)}
.form-ok{display:none;padding:18px 22px;border-radius:var(--r-xs);background:rgba(220,196,156,.2);
  border:1px solid var(--s-500);color:var(--g-700);font-size:15px}
.form-ok.is-on{display:block;animation:fadeUp .5s var(--e-out)}

.contact-aside{display:grid;gap:26px;align-content:start}
.c-line{display:flex;gap:15px;align-items:flex-start}
.c-line svg{width:19px;height:19px;color:var(--s-400);flex:none;margin-top:4px}
.c-line .k{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-green-muted)}
.c-line .v{font-size:16px;color:var(--on-green-title);margin-top:3px}
.c-line a.v:hover{color:var(--s-400)}

/* ===================================================================
   CTA BAND
   =================================================================== */
.cta-band{
  position:relative;border-radius:var(--r-xl);padding:clamp(44px,6.5vw,86px) clamp(28px,5vw,64px);
  overflow:hidden;text-align:center;color:var(--on-green-body);
  background:
    radial-gradient(70% 100% at 50% 0%,rgba(94,128,122,.5),transparent 62%),
    linear-gradient(150deg,var(--g-850),var(--g-700) 55%,var(--g-950));
}
.cta-band .rings{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(900px,120%);aspect-ratio:1;pointer-events:none;opacity:.4}
.cta-band .rings span{position:absolute;inset:0;border-radius:50%;border:1px solid var(--line-d)}
.cta-band .rings span:nth-child(2){inset:14%}
.cta-band .rings span:nth-child(3){inset:28%}
.cta-band>.inner{position:relative;z-index:2}
.cta-band h2{color:var(--on-green-title);max-width:19ch;margin-inline:auto}

/* ===================================================================
   ACCORDION
   =================================================================== */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;display:flex;justify-content:space-between;gap:26px;align-items:center;padding:24px 0;text-align:left;
  font-family:var(--ff-d);font-size:clamp(1.15rem,1.6vw,1.32rem);color:var(--g-800);transition:color .3s}
.acc-q:hover{color:var(--s-600)}
.acc-q .pm{position:relative;width:17px;height:17px;flex:none}
.acc-q .pm::before,.acc-q .pm::after{content:"";position:absolute;background:var(--s-600);transition:transform .4s var(--e)}
.acc-q .pm::before{left:0;top:8px;width:17px;height:1.5px}
.acc-q .pm::after{top:0;left:8px;height:17px;width:1.5px}
.acc-item.is-open .pm::after{transform:scaleY(0)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .5s var(--e-out)}
.acc-a-in{padding:0 0 26px;color:var(--g-500);font-size:16px;max-width:76ch}

/* ===================================================================
   FOOTER
   =================================================================== */
.footer{background:var(--g-950);color:var(--on-green-body);padding:clamp(56px,7vw,88px) 0 34px;position:relative;overflow:hidden}
.footer-glow{position:absolute;top:-50%;left:50%;translate:-50% 0;width:min(900px,120%);aspect-ratio:2;
  background:radial-gradient(ellipse,rgba(185,154,102,.09),transparent 66%);pointer-events:none}
.footer .wrap{position:relative;z-index:2}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,52px)}
@media(max-width:940px){.footer-top{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.footer-top{grid-template-columns:1fr}}
.footer h4{font-family:var(--ff-s);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--s-400);margin:0 0 20px;font-weight:400}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.footer a{font-size:15px;transition:color .28s var(--e)}
.footer a:hover{color:var(--s-400)}
.footer-blurb{font-size:15px;line-height:1.72;max-width:36ch;margin-top:22px;color:var(--on-green-body)}
.socials{display:flex;gap:10px;margin-top:26px}
.socials a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;
  transition:background .35s var(--e),color .35s,border-color .35s,transform .35s var(--e-out)}
.socials a:hover{background:var(--s-400);color:var(--g-950);border-color:var(--s-400);transform:translateY(-3px)}
.socials svg{width:17px;height:17px}
.footer-bot{margin-top:clamp(44px,5vw,66px);padding-top:28px;border-top:1px solid var(--line-d);
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center;font-size:13.5px;color:var(--on-green-muted)}
.footer-bot nav{display:flex;flex-wrap:wrap;gap:24px}

/* ===================================================================
   REVEAL / UTIL
   =================================================================== */
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s var(--e-out),transform .9s var(--e-out)}
.rv.is-in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}.rv[data-d="6"]{transition-delay:.54s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.rv-word{opacity:1;transform:none}}

.totop{position:fixed;right:24px;bottom:24px;z-index:800;width:48px;height:48px;border-radius:50%;
  background:var(--g-800);color:var(--cream);display:grid;place-items:center;box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--e),transform .4s var(--e-spring),visibility .4s,background .3s}
.totop.is-on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--s-400);color:var(--g-900)}
.totop svg{width:17px;height:17px}

/* ===================================================================
   COOKIE CONSENT
   =================================================================== */
body.privacy-open{overflow:hidden}
/* The notice sits at the foot of the page and leaves the rest of it alone:
   no backdrop, no scroll lock, pointer-events only on the bar itself, so a
   visitor can read, scroll and click without answering first. Nothing
   non-essential loads before they do. */
.ck-gate{position:fixed;left:0;right:0;bottom:0;z-index:960;display:none;justify-content:center;
  padding:clamp(10px,2vw,20px);pointer-events:none}
.ck-gate.is-on{display:flex}
.ck-bar{
  pointer-events:auto;width:min(1080px,100%);display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:clamp(16px,2.4vw,32px);align-items:center;
  padding:clamp(16px,1.9vw,22px) clamp(18px,2.2vw,26px);
  color:var(--on-green-body);background:
    radial-gradient(75% 180% at 0% 0%,rgba(94,128,122,.34),transparent 65%),
    linear-gradient(145deg,#142a24,#0d1916);
  border:1px solid rgba(220,196,156,.3);border-radius:18px;box-shadow:0 22px 70px rgba(0,0,0,.4);
  animation:ckIn .45s var(--e-out);
}
.ck-bar .ck-copy p{font-size:13.5px;line-height:1.6;max-width:78ch;margin:0}
/* Both answers are one click, the same size, side by side, differing only in
   fill. Refusing must not be harder than agreeing. */
/* grid-auto-columns:1fr, not auto — otherwise each button takes the width of
   its own word and the longer label ends up the wider button. Equal means
   equal. */
.ck-bar .ck-acts{grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.ck-bar .ck-acts .btn{min-width:144px;padding-inline:20px;white-space:nowrap}
.ck-link{background:none;padding:0;font:inherit;color:var(--s-300);
  border-bottom:1px solid rgba(220,196,156,.4);cursor:pointer}
.ck-link:hover{color:var(--s-200);border-bottom-color:var(--s-400)}
@keyframes ckIn{from{opacity:0;transform:translateY(28px) scale(.975)}to{opacity:1;transform:none}}
.ck-emblem{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;color:var(--s-300);background:rgba(220,196,156,.1);border:1px solid rgba(220,196,156,.3);box-shadow:inset 0 0 0 7px rgba(220,196,156,.035)}
.ck-emblem svg{width:34px;height:34px}
.ck-emblem--small{width:48px;height:48px;flex:none}
.ck-emblem--small svg{width:24px;height:24px}
.ck-eyebrow{display:block;margin-bottom:8px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--s-400)}
.ck-copy h2{font-size:clamp(1.65rem,2.8vw,2.35rem);line-height:1.05;color:var(--on-green-title);margin-bottom:10px}
.ck-copy p{max-width:64ch;font-size:14.5px;color:var(--on-green-body);line-height:1.65}
.ck-copy p a{color:var(--s-300);border-bottom:1px solid var(--s-500)}
.ck-status{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--s-300)}
.ck-links{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:10px;font-size:12.5px}
.ck-links a{color:var(--s-300);border-bottom:1px solid rgba(220,196,156,.4);padding-bottom:1px}
.ck-links a:hover{color:var(--s-200);border-bottom-color:var(--s-400)}
.ck-status i{width:8px;height:8px;border-radius:50%;background:#88c9a8;box-shadow:0 0 0 5px rgba(136,201,168,.12)}
.ck-acts{display:grid;gap:10px}
.ck-acts .btn{width:100%;justify-content:center;text-align:center;white-space:normal;line-height:1.3}
.btn--privacy{border:1px solid rgba(220,196,156,.34);color:var(--s-300);background:transparent}
.btn--privacy:hover{border-color:var(--s-400);background:rgba(220,196,156,.08);transform:translateY(-2px)}
.ck-more{background:none;font-size:13.5px;letter-spacing:.1em;color:var(--g-400);text-decoration:underline;
  text-underline-offset:3px;padding:6px 0;transition:color .25s}
.ck-more:hover{color:var(--g-700)}

.ck-modal{position:fixed;inset:0;z-index:980;display:none;align-items:center;justify-content:center;padding:clamp(14px,3vw,30px)}
.ck-modal.is-on{display:flex}
.ck-back{position:absolute;inset:0;background:rgba(8,16,14,.74);backdrop-filter:blur(10px);animation:fadeIn .35s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.ck-panel{
  position:relative;z-index:2;width:min(680px,100%);max-height:min(88vh,820px);overflow-y:auto;
  background:var(--cream);border:1px solid var(--line-2);border-radius:24px;box-shadow:0 35px 120px rgba(0,0,0,.4);padding:clamp(28px,4vw,48px);
  animation:ckIn .5s var(--e-out);
}
.ck-panel-head{display:flex;align-items:center;gap:16px;padding-right:42px;margin-bottom:18px}
.ck-panel h3{font-size:clamp(1.7rem,2.8vw,2.25rem);line-height:1.05}
.ck-panel>p{font-size:15px;line-height:1.65;color:var(--g-500)}
.ck-x{position:absolute;top:20px;right:20px;width:42px;height:42px;border:1px solid var(--line-2);border-radius:50%;transition:background .25s,border-color .25s}
.ck-x:hover{background:var(--paper);border-color:var(--s-500)}
.ck-x span{position:absolute;top:20px;left:12px;width:17px;height:1px;background:var(--g-600);transform:rotate(45deg)}
.ck-x span+span{transform:rotate(-45deg)}
.ck-group{display:grid;gap:12px;margin:28px 0}
.ck-item{border:1px solid var(--line-2);border-radius:14px;padding:20px 22px;transition:border-color .3s,background .3s}
.ck-item:hover{border-color:var(--s-500)}
.ck-head{display:flex;justify-content:space-between;align-items:center;gap:18px}
.ck-head b{font-weight:400;font-size:16px;color:var(--g-800);font-family:var(--ff-d);font-size:1.18rem}
.ck-item p{font-size:14.5px;color:var(--g-400);margin-top:8px;line-height:1.6}
.ck-lock{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-600);white-space:nowrap}
.ck-lock--off{color:var(--g-400);padding-left:15px;position:relative}
.ck-lock--off::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border-radius:50%;background:var(--g-300);transform:translateY(-50%)}
.sw{position:relative;width:48px;height:27px;flex:none;cursor:pointer}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw i{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line-2);transition:background .35s var(--e),border-color .35s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--white);
  box-shadow:var(--sh-xs);transition:transform .35s var(--e-spring)}
.sw input:checked+i{background:var(--g-700);border-color:var(--g-700)}
.sw input:checked+i::after{transform:translateX(21px)}
.sw input:focus-visible+i{outline:2px solid var(--s-600);outline-offset:2px}
.ck-panel-acts{display:flex}
.ck-panel-acts .btn{width:100%;justify-content:center}
/* The standing control was a wide pill of uppercase text parked on top of the
   page. It is a badge now — the shield alone, which opens out to its label on
   hover or keyboard focus — so the way back to the privacy choice is always
   there without sitting over the content shouting. */
.ck-fab{
  position:fixed;left:20px;bottom:20px;z-index:880;
  display:inline-flex;align-items:center;height:46px;padding:0 12px;border-radius:999px;
  background:rgba(13,23,20,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--s-300);border:1px solid rgba(220,196,156,.26);
  box-shadow:0 10px 30px rgba(0,0,0,.34);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--e),visibility .35s,transform .35s var(--e-out),
             background .3s var(--e),border-color .3s var(--e),box-shadow .3s var(--e),color .3s var(--e);
}
.ck-fab.is-on{opacity:1;visibility:visible;transform:none}
.ck-fab:hover,.ck-fab:focus-visible{
  background:rgba(27,46,41,.96);border-color:var(--s-500);color:var(--s-200);
  box-shadow:0 14px 38px rgba(0,0,0,.42);
}
.ck-fab:focus-visible{outline:2px solid var(--s-500);outline-offset:3px}
.ck-fab svg{width:20px;height:20px;flex:none}
.ck-fab span{
  display:block;max-width:0;margin-left:0;overflow:hidden;white-space:nowrap;opacity:0;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  transition:max-width .45s var(--e-out),opacity .3s var(--e),margin-left .45s var(--e-out);
}
.ck-fab:hover span,.ck-fab:focus-visible span{max-width:220px;margin-left:10px;opacity:1}
@media(prefers-reduced-motion:reduce){.ck-fab,.ck-fab span{transition:none}}

/* What the visitor actually chose, and when — shown at the top of the panel so
   reviewing a decision is as easy as making it was. */
.ck-current{
  display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 15px;
  border:1px solid var(--line-2);border-radius:12px;background:var(--paper);
  font-size:13.5px;color:var(--g-500);
}
.ck-current i{width:8px;height:8px;border-radius:50%;background:#4a9d6e;flex:none;box-shadow:0 0 0 4px rgba(74,157,110,.14)}
.ck-current b{font-weight:500;color:var(--g-800)}
.ck-current time{color:var(--g-400)}
@media(max-width:800px){
  .ck-gate{align-items:flex-end;padding:10px}
  .ck-bar{grid-template-columns:auto 1fr;border-radius:20px;padding:24px;gap:18px}
  .ck-emblem{width:54px;height:54px}.ck-emblem svg{width:27px;height:27px}
  .ck-acts{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .ck-bar{grid-template-columns:1fr;gap:14px}
}
@media(max-width:540px){
  .ck-bar{grid-template-columns:1fr;padding:16px;gap:14px}
  .ck-bar>.ck-emblem{display:none}
  /* side by side even here: one above the other makes the lower one read as
     the lesser option, which is exactly what must not happen */
  .ck-bar .ck-acts{grid-column:auto;grid-auto-flow:column;grid-template-columns:1fr 1fr}
  .ck-bar .ck-acts .btn{min-width:0;padding-inline:12px}
  .ck-copy h2{font-size:1.72rem}
  .ck-panel{padding:26px 20px 22px;border-radius:19px}
  .ck-panel-head{padding-right:34px}
  .ck-item{padding:18px 16px}
  /* The floating badge is fixed to the viewport, so on a narrow screen it sits
     over whatever text happens to be at the bottom left — on the privacy
     policy and the imprint, that is text a visitor has a right to read. The
     footer already carries the same control as an ordinary link, so there is
     nothing to reach for here: the choice stays exactly as easy to change,
     without anything covering the legal pages. */
  .ck-fab{display:none}
}

/* ===================================================================
   LANGUAGE SWITCHER
   =================================================================== */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:var(--r-pill);
  font-size:13.5px;letter-spacing:.06em;color:var(--on-green-body);border:1px solid transparent;
  transition:color .3s var(--e),background .3s var(--e),border-color .3s var(--e);
}
.nav--solid .lang-btn{color:var(--g-500)}
.lang-btn:hover{color:var(--s-400);border-color:var(--line-d)}
.nav--solid .lang-btn:hover{color:var(--g-800);background:rgba(27,46,41,.05);border-color:var(--line)}
.lang-btn svg:first-child{width:16px;height:16px;opacity:.8}
.lang-btn .caret{width:9px;height:9px;opacity:.7;transition:transform .3s var(--e)}
.lang.is-open .caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:190px;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:7px;
  opacity:0;visibility:hidden;transform:translateY(8px);transform-origin:top right;
  transition:opacity .28s var(--e-out),transform .28s var(--e-out),visibility .28s;z-index:20;
}
.lang.is-open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-opt{
  width:100%;display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:var(--r-xs);
  text-align:left;color:var(--g-600);transition:background .25s var(--e),color .25s;
}
.lang-opt:hover{background:var(--paper);color:var(--g-800)}
.lang-opt b{font-weight:400;font-size:12.5px;letter-spacing:.14em;color:var(--s-600);min-width:22px}
.lang-opt span{font-size:15px}
.lang-opt.is-on{background:var(--paper-2);color:var(--g-800)}
.lang-opt.is-on b{color:var(--g-700)}
.drawer-langs{display:flex;gap:8px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line-d)}
.drawer-langs .lang-opt{
  width:auto;flex:1;justify-content:center;gap:7px;border:1px solid var(--line-d);
  border-radius:var(--r-pill);color:rgba(253,252,249,.8);padding:11px 10px;
}
.drawer-langs .lang-opt span{display:none}
.drawer-langs .lang-opt b{font-size:13.5px;color:inherit;min-width:0}
.drawer-langs .lang-opt.is-on{background:var(--s-400);color:var(--g-900);border-color:var(--s-400)}
.drawer-langs .lang-opt:hover{background:rgba(220,196,156,.1);color:var(--s-400)}
.drawer-langs .lang-opt.is-on:hover{background:var(--s-400);color:var(--g-900)}
@media(max-width:1120px){.nav-right .lang{display:none}}

/* ---------- rows / cards sitting on a green section ---------- */
.sec-dark .row-item,.sec-grad .row-item{
  background:rgba(220,196,156,.05);border-color:var(--line-d);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.sec-dark .row-item:hover,.sec-grad .row-item:hover{
  background:rgba(220,196,156,.09);border-color:var(--line-d2);box-shadow:none;
}
.sec-dark .press-title,.sec-grad .press-title{color:var(--on-green-title)}
.sec-dark .press-date,.sec-grad .press-date{color:var(--on-green-muted)}
.sec-dark .press-lang,.sec-grad .press-lang{color:var(--on-green-muted);border-color:var(--line-d)}
.sec-dark .ev-date,.sec-grad .ev-date{border-right-color:var(--line-d)}
.sec-dark .ev-date .d,.sec-grad .ev-date .d{color:var(--on-green-title)}
.sec-dark .ev-meta,.sec-grad .ev-meta{color:var(--on-green-muted)}
.sec-dark .tag,.sec-grad .tag{background:rgba(220,196,156,.14);color:var(--s-400)}
.sec-dark .empty,.sec-grad .empty{background:rgba(220,196,156,.04);border-color:var(--line-d);color:var(--on-green-muted)}
.sec-dark .skeleton,.sec-grad .skeleton{
  background:linear-gradient(90deg,rgba(220,196,156,.05) 25%,rgba(220,196,156,.11) 50%,rgba(220,196,156,.05) 75%);
  background-size:200% 100%;
}

/* ===================================================================
   EVENTS CALENDAR
   =================================================================== */
.ev-panel{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);box-shadow:var(--sh-sm);margin-bottom:clamp(26px,3vw,38px);
}
.fbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.fbar .search{flex:1;min-width:220px}
.fgroup{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:start;padding:12px 0;border-top:1px solid var(--line)}
@media(max-width:640px){.fgroup{grid-template-columns:1fr;gap:8px}}
.flabel{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-400);padding-top:11px}
@media(max-width:640px){.flabel{padding-top:0}}
.fgroup .chip{padding:8px 14px;font-size:13.5px;display:inline-flex;align-items:center;gap:7px}
.fgroup .chip .cnt{font-style:normal;font-size:12.5px;opacity:.55;font-variant-numeric:tabular-nums}
.fgroup .chip[disabled]{opacity:.32;pointer-events:none}
.count b{font-weight:400;color:var(--g-700)}

.ev-month{margin-bottom:clamp(28px,3vw,44px)}
.ev-month-h{display:flex;align-items:baseline;gap:18px;margin-bottom:16px}
.ev-month-h h2{font-size:clamp(1.5rem,2.6vw,2.05rem);color:var(--g-800);white-space:nowrap}
.ev-month-h h2 span{color:var(--s-600);font-size:.62em;letter-spacing:.04em}
.ev-month-h::after{content:"";flex:1;height:1px;background:var(--line-2)}
.ev-month-n{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-400);white-space:nowrap}
.sec-dark .ev-month-h::after,.sec-grad .ev-month-h::after{background:var(--line-d)}
.sec-dark .ev-month-n,.sec-grad .ev-month-n{color:var(--on-green-muted)}

.ev-card{
  display:grid;grid-template-columns:78px 1fr auto;gap:clamp(16px,2.2vw,26px);align-items:start;
  padding:clamp(18px,2.2vw,24px);background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);margin-bottom:10px;position:relative;overflow:hidden;
  transition:border-color .4s var(--e),transform .4s var(--e-out),box-shadow .4s var(--e-out);
}
.ev-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--s-500);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--e-out)}
.ev-card:hover{border-color:rgba(185,154,102,.55);transform:translateX(4px);box-shadow:var(--sh-md)}
.ev-card:hover::before{transform:scaleY(1);transform-origin:top}
@media(max-width:760px){.ev-card{grid-template-columns:64px 1fr}.ev-actions{grid-column:1/-1;flex-direction:row!important}}
.ev-badge{
  display:grid;place-items:center;padding:12px 6px;border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--g-700),var(--g-900));color:var(--s-400);
}
.ev-badge .d{font-family:var(--ff-d);font-size:1.85rem;line-height:1}
.ev-badge .m{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin-top:3px}
.ev-main h3{font-size:clamp(1.14rem,1.6vw,1.32rem);margin-bottom:8px;line-height:1.3}
.ev-desc{font-size:15px;color:var(--g-500);line-height:1.65;margin:10px 0 12px;max-width:70ch}
.ev-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-end;white-space:nowrap}
.sec-dark .ev-card,.sec-grad .ev-card{background:rgba(220,196,156,.05);border-color:var(--line-d)}
.sec-dark .ev-main h3,.sec-grad .ev-main h3{color:var(--on-green-title)}
.sec-dark .ev-desc,.sec-grad .ev-desc{color:var(--on-green-body)}

/* ---------------------------------------------------------------
   Data-driven list items animate with a plain CSS animation, never
   with the scroll observer: a filter repaint must never be able to
   leave a card stuck at opacity 0.
   --------------------------------------------------------------- */
@keyframes listIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* No fill-mode and no delay on purpose: the card's resting state is visible, so
   if animations never run (hidden tab, reduced motion, older engine) the content
   is still there. The animation is decoration, never a visibility gate. */
.ev-card,.partner-card,.post-card,.row-item{animation:listIn .45s var(--e-out)}
@media (prefers-reduced-motion:reduce){
  .ev-card,.partner-card,.post-card,.row-item{animation:none}
}

/* ===================================================================
   EDITORIAL REDESIGN — 2026
   A warmer, more human layer over the FitLink design system.
   =================================================================== */
body{
  background:
    radial-gradient(900px 520px at 92% -6%,rgba(220,196,156,.16),transparent 64%),
    var(--cream);
}
.wrap{max-width:1320px}
.section{padding:clamp(56px,6.3vw,98px) 0}

/* navigation feels like a discreet premium toolbar */
.nav-in{height:100%;border-bottom:1px solid rgba(220,196,156,.18)}
.nav--solid .nav-in{border-bottom-color:transparent}
.nav-link{font-size:13.5px;letter-spacing:.055em}
.nav--solid{background:rgba(253,252,249,.92);box-shadow:0 1px 0 rgba(15,26,24,.08),0 18px 60px rgba(15,26,24,.055)}

/* home hero */
.hero-v3{
  min-height:max(780px,100svh);padding:calc(var(--nav-h) + 54px) 0 76px;align-items:center;
  background:
    radial-gradient(70% 100% at 82% 0%,rgba(94,128,122,.34),transparent 62%),
    radial-gradient(48% 70% at 12% 90%,rgba(185,154,102,.16),transparent 68%),
    linear-gradient(145deg,#10201c 0%,#1c342e 49%,#0e1816 100%);
}
.hero-v3::after{height:160px;background:linear-gradient(transparent,rgba(8,15,13,.44))}
/* The drawing is the right-hand side of the hero. It is anchored to the
   right edge and allowed to run off it, so the page shows the limb of a
   sphere rather than a complete circle floating in a box — a whole circle
   reads as a logo, a cropped one reads as a world. The SVG carries its own
   opacities per layer, so the element is not dimmed as a whole. */
.hero-v3 .hero-globe{
  left:auto;right:-4%;top:50%;translate:0 -50%;
  width:min(860px,62vw);height:auto;aspect-ratio:1;opacity:1;
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,#000 26%,#000 100%);
  mask-image:linear-gradient(100deg,transparent 0%,#000 26%,#000 100%);
}
/* No spin. The globe is cropped by the right edge, so rotating it turns the
   grid into a wheel going past a window rather than a world holding still. */
.hero-v3 .hero-globe svg{animation:none;width:100%;height:100%}
/* One full-width column: the hero's picture is the globe behind, not a block
   beside the words. What keeps the copy off the drawing is .hero-copy's own
   max-width, NOT a fraction of the viewport — .rv-line clips its overflow for
   the word reveal, so a column narrower than the headline silently eats the
   second word of every line instead of wrapping it. */
.hero-shell{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;position:relative;z-index:3}
.hero-copy{max-width:760px;padding-left:clamp(0px,2vw,28px)}
.hero-wordmark{width:clamp(140px,12vw,178px);margin-bottom:clamp(32px,5vw,58px)}
.hero-wordmark img{width:100%;height:auto}
.hero-kicker{margin-bottom:22px;color:var(--s-400)}
.hero-v3 .h-hero{font-size:clamp(3.25rem,5.6vw,6.25rem);line-height:.94;max-width:12ch;text-wrap:balance}
.hero-v3 .hero-sub{max-width:58ch;font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.68}
.hero-v3 .hero-chips{margin-top:34px;gap:9px}
.hero-v3 .chip-glass{padding:9px 15px;font-size:12.5px;background:rgba(253,252,249,.045)}
.hero-v3 .chip-glass b{font-size:1.18rem}

.hero-v3 .scroll-cue{left:auto;right:clamp(20px,3vw,48px);translate:0 0}

/* partner proof becomes an intentional bridge between hero and story */
.trust-band{padding:34px 0 30px;background:var(--paper);border-bottom:1px solid var(--line);overflow:hidden}
.trust-band>p{color:var(--g-400)!important;margin-bottom:22px!important}
.trust-band .mq-track{animation-duration:52s;gap:clamp(34px,4vw,68px)}
.trust-band .mq-item{font-size:clamp(1rem,1.5vw,1.28rem);color:var(--g-500);opacity:.62}
.trust-proof{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:24px;font-size:12.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--g-400)}
.trust-proof span{font-family:var(--ff-d);font-size:1.16rem;letter-spacing:0;text-transform:none;color:var(--s-600)}
.trust-proof i{width:1px;height:20px;background:var(--line-2);margin:0 10px}

/* a visual story for FitLink's two audiences */
.aud{grid-template-columns:230px 1fr;gap:clamp(24px,3.5vw,52px)}
.aud-stage{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);min-height:550px;border:1px solid var(--line-d);border-radius:28px;background:rgba(253,252,249,.045);overflow:hidden;box-shadow:0 30px 90px rgba(5,13,11,.14)}
.aud-art{position:relative;min-height:100%;overflow:hidden}
.aud-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(11,22,19,.82));z-index:2}
.aud-photo{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.055);transition:opacity .65s var(--e),transform 1.1s var(--e-out)}
.aud-photo.is-on{opacity:1;transform:scale(1)}
.aud-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04)}
.aud-art-label{position:absolute;left:24px;bottom:22px;z-index:3;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--s-300)}
.aud-copy{padding:clamp(32px,4vw,62px);display:flex;align-items:center}
.aud-panel h3{color:var(--on-green-title)}
.aud-tab{white-space:normal}

/* editorial photography used throughout the site */
.media-frame{display:block!important;min-height:520px!important;padding:0!important;background:var(--g-900)!important}
.media-frame>img{width:100%;height:100%;min-height:520px;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:transform 1.1s var(--e-out),filter .7s var(--e)}
.media-frame:hover>img{transform:scale(1.035);filter:saturate(.9) contrast(1.04)}
.media-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(15,26,24,.78));pointer-events:none}
.media-caption{position:absolute;left:clamp(22px,3vw,34px);right:clamp(22px,3vw,34px);bottom:clamp(22px,3vw,32px);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;color:var(--s-300)}
.media-caption span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.media-caption strong{font-family:var(--ff-d);font-size:1.35rem;font-weight:500;color:var(--s-400)}

/* richer subpage hero, with a real FitLink image per context */
.phero{padding:calc(var(--nav-h) + 56px) 0 58px;min-height:630px;display:flex;align-items:center;background:linear-gradient(145deg,#10201c,#1d352f 58%,#0e1816)}
.phero .wrap{max-width:1320px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.72fr);gap:clamp(42px,7vw,110px);align-items:center}
.phero-copy{position:relative;z-index:3}
.phero h1{font-size:clamp(3rem,5.25vw,5.55rem);line-height:.98;max-width:13ch;text-wrap:balance}
.phero .lead{max-width:56ch}
.phero-media{position:relative;min-height:440px;border-radius:160px 18px 18px 18px;overflow:hidden;border:1px solid var(--line-d2);box-shadow:0 30px 100px rgba(2,9,7,.34);background-size:cover;background-position:center}
.phero-media::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,26,24,.04),rgba(15,26,24,.48))}
.phero-media::after{content:"";position:absolute;left:22px;bottom:22px;width:56px;height:56px;border-radius:50%;border:1px solid var(--line-d2);background:rgba(15,26,24,.54) url("logo-lockup.png") center/34px no-repeat;backdrop-filter:blur(12px)}

/* elevated cards, lists and contact surface */
.card,.partner-card,.post-card,.row-item,.ev-card,.ev-panel{box-shadow:0 1px 0 rgba(255,255,255,.65),0 12px 40px rgba(15,26,24,.045)}
.card{border-radius:20px}
.card h3{font-size:clamp(1.35rem,1.75vw,1.62rem)}
.num-card{min-height:330px}
.num-card:nth-child(1),.num-card:nth-child(4){background:linear-gradient(145deg,#fff,var(--paper))}
.num-card .n{font-size:4.4rem;opacity:.8}
.sec-paper{background:linear-gradient(180deg,var(--paper),#f2eee5)}
.partner-card{border-radius:18px}
.partner-logo{height:96px;background:linear-gradient(145deg,#f7f4ed,#ebe5da)}
.toolbar,.ev-panel{position:relative;z-index:2}
.field input,.field select,.field textarea{border-radius:12px;padding:16px 17px;background:#fffdf9}
body[data-page="contact"] .split-media{background:
  linear-gradient(150deg,rgba(16,32,28,.9),rgba(15,26,24,.96))!important}

/* This carried an AI-assisted photograph of a handshake under its gradient,
   which a later rule had already painted over entirely — so the picture was
   being downloaded and never seen. Only the radius is still wanted here; the
   background and shadow belong to that later rule. */
.cta-band{border-radius:28px}
.cta-band>.inner{max-width:800px;margin-inline:auto}

@media(max-width:1100px){
  .hero-shell{grid-template-columns:minmax(0,1fr)}
  .hero-v3 .h-hero{font-size:clamp(3.1rem,6.3vw,5.25rem)}
  .aud-stage{grid-template-columns:1fr}
  .aud-art{min-height:300px}
}
@media(max-width:900px){
  .hero-v3{padding-top:calc(var(--nav-h) + 40px)}
  .hero-shell{grid-template-columns:1fr}
  /* Narrow enough that the words need the full width: the globe drops behind
     them and quietens down rather than competing. */
  .hero-v3 .hero-globe{width:min(760px,118vw);height:auto;aspect-ratio:1;
    right:-26%;opacity:.3;-webkit-mask-image:none;mask-image:none}
  .hero-copy{max-width:760px;padding-inline:10px}
  .hero-v3 .h-hero{max-width:13ch}
  .hero-v3 .scroll-cue{display:none}
  .aud{grid-template-columns:1fr}
  .phero{min-height:auto;padding-bottom:52px}
  .phero .wrap{grid-template-columns:1fr;gap:42px}
  .phero-media{min-height:340px;width:min(100%,620px)}
}
@media(max-width:620px){
  .hero-v3{min-height:auto;padding-bottom:54px}
  .hero-wordmark{margin-bottom:32px}
  .hero-kicker{font-size:11.5px;letter-spacing:.2em}
  .hero-v3 .h-hero{font-size:clamp(2.8rem,14vw,4.4rem)}
  .hero-v3 .hero-chips{display:grid;grid-template-columns:1fr 1fr}
  .hero-v3 .chip-glass:first-child{grid-column:1/-1}
  .trust-proof{flex-wrap:wrap;padding-inline:20px}
  .aud-stage{border-radius:20px}
  .aud-art{min-height:250px}
  .aud-copy{padding:30px 24px 36px}
  .media-frame,.media-frame>img{min-height:380px!important}
  .phero h1{font-size:clamp(2.7rem,13vw,4rem)}
  .phero-media{min-height:280px;border-radius:100px 14px 14px 14px}
  .media-caption{display:block}.media-caption strong{display:block;margin-top:5px}
}

/* ===================================================================
   REFINEMENT PASS — dead space, density, two-audience split
   =================================================================== */

/* The service cards kept the padding reserved for the old "01…04" numerals.
   With the numerals gone that left ~90px of empty space above every title. */
.num-card{padding-top:clamp(28px,3vw,38px);min-height:0}
.num-card h3{margin-top:0}
.num-card .n{display:none}
.card-ico{margin-bottom:20px}

/* Process markers are no longer numbered, so a 68px empty disc read as a gap. */
.step .dot{
  width:14px;height:14px;margin:0 auto 22px;border-radius:50%;
  background:var(--s-400);border:0;box-shadow:0 0 0 6px rgba(220,196,156,.14);
}
.step:hover .dot{transform:none;background:var(--s-300);box-shadow:0 0 0 9px rgba(220,196,156,.2)}
.sec-paper .step .dot{background:var(--g-700);box-shadow:0 0 0 6px rgba(52,75,72,.1)}
.steps::before{top:7px}

/* Tighter vertical rhythm: the page was reading as very airy on large screens. */
.section{padding:clamp(56px,6.3vw,98px) 0}
.section-sm{padding:clamp(38px,4.2vw,62px) 0}
.mt-l{margin-top:clamp(30px,3.7vw,48px)}

/* Light sections get a warm tint and a hairline, so they stop reading as blank. */
.sec-tint{
  background:
    radial-gradient(760px 420px at 88% 0%,rgba(220,196,156,.16),transparent 66%),
    linear-gradient(180deg,#fbf9f4,var(--paper));
  border-block:1px solid rgba(52,75,72,.07);
}

/* ---------- Two audiences, side by side ---------- */
.paths{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,30px)}
@media(max-width:900px){.paths{grid-template-columns:1fr}}
.path{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line-d);border-radius:24px;background:rgba(220,196,156,.045);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform .6s var(--e-out),border-color .5s var(--e),box-shadow .6s var(--e-out);
}
.path:hover{transform:translateY(-6px);border-color:var(--line-d2);box-shadow:0 34px 90px rgba(2,9,7,.4)}
.path-photo{position:relative;aspect-ratio:16/9;overflow:hidden;flex:none}
.path-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-out)}
.path:hover .path-photo img{transform:scale(1.06)}
.path-photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,26,24,.15) 0%,rgba(15,26,24,.55) 62%,rgba(22,36,31,.94) 100%);
}
.path-tag{
  position:absolute;z-index:2;top:18px;left:18px;padding:7px 15px;border-radius:var(--r-pill);
  background:rgba(15,26,24,.5);border:1px solid var(--line-d2);backdrop-filter:blur(10px);
  font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--s-400);
}
.path-body{padding:clamp(24px,2.8vw,36px);display:flex;flex-direction:column;flex:1}
.path h3{
  font-size:clamp(1.42rem,2.05vw,1.92rem);line-height:1.22;color:var(--cream);
  letter-spacing:-.015em;margin-bottom:14px;
}
/* the brand device: the qualifying words carry the gold */
.path h3 em{font-style:normal;color:var(--s-400)}
.path > .path-body > p{font-size:15.5px;line-height:1.72;color:var(--on-green-body);max-width:46ch}
.path .ticks{margin-top:20px;gap:11px}
.path .ticks li{font-size:15px;padding-left:30px}
.path .ticks li::before{width:17px;height:17px;top:.3em}
.path .ticks li::after{left:5px;top:.58em;width:7px;height:3.8px}
.path .link-a{margin-top:auto;padding-top:26px;align-self:flex-start}

/* ---------- Insights: press and the blog, as two doorways ----------
   These were two columns of loose content on one dark band, which read as a
   single undifferentiated block: nothing said that coverage written *about* us
   and articles written *by* us are different things, or that each leads
   somewhere. Each is now a panel with its own mark, its own standfirst and a
   full-width way in at the foot. */
.insights{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);align-items:stretch}
@media(max-width:900px){.insights{grid-template-columns:1fr}}

/* Surfaces are green, gold is only ever ink. These panels used to be a wash of
   gold over the dark section, and the card inside them was another one: 7.5%
   plus 5% — and 9% on hover — stacked into a murky olive in which neither
   colour could do anything. Depth comes from the green stepping up and down
   instead, which leaves the gold to the type, the rules and the marks. */
.insight-panel{
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line-d);border-radius:26px;
  background:linear-gradient(180deg,#1D312B 0%,#16251F 100%);
  box-shadow:inset 0 1px 0 rgba(220,196,156,.1);
  transition:border-color .5s var(--e),box-shadow .6s var(--e-out);
}
.insight-panel:hover{
  border-color:var(--line-d2);
  box-shadow:inset 0 1px 0 rgba(220,196,156,.14),0 30px 80px rgba(2,9,7,.42);
}
/* the blog side sits a step lighter, so the pair reads as a pair */
.insight-panel--blog{background:linear-gradient(180deg,#22382F 0%,#18291F 100%)}

.insight-head{padding:clamp(24px,2.7vw,34px) clamp(22px,2.6vw,32px) 0}
.insight-badge{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;margin-bottom:18px;
  border:1px solid var(--line-d2);background:rgba(220,196,156,.09);color:var(--s-400);
}
.insight-badge svg{width:21px;height:21px}
.insight-kicker{display:block;margin-bottom:11px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--s-500)}
.insight-head h2{font-size:clamp(1.4rem,1.95vw,1.78rem);line-height:1.2;color:var(--on-green-title)}
.insight-note{margin-top:12px;font-size:14.5px;line-height:1.66;color:var(--on-green-body);max-width:46ch}
.insight-body{flex:1;padding:clamp(20px,2.3vw,26px) clamp(22px,2.6vw,32px)}

.insight-cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;
  padding:17px clamp(22px,2.6vw,32px);border-top:1px solid var(--line-d);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--s-400);
  transition:background .35s var(--e),color .35s var(--e);
}
.insight-cta svg{width:16px;height:16px;flex:none;transition:transform .4s var(--e-out)}
.insight-cta:hover{background:rgba(220,196,156,.1);color:var(--s-300)}
.insight-cta:hover svg{transform:translateX(5px)}

/* Press inside a panel is a ledger, not a stack of cards — the panel is
   already the card, and one card inside another only added edges. The date
   moves above the headline because half a page is too narrow for the archive's
   date column, and the language badge belongs to the archive, not the teaser. */
/* The ledger stretches to the panel's height and the rows share it evenly,
   so the two panels end together instead of leaving a hole above the
   press link whenever the article cards run longer. */
.insight-panel--press .rows{display:flex;flex-direction:column;height:100%;gap:0}
.insight-panel--press .press-item{
  background:none;border:0;border-radius:0;box-shadow:none;transform:none;padding:15px 0;
  border-bottom:1px solid rgba(220,196,156,.12);
  grid-template-columns:56px minmax(0,1fr);column-gap:15px;row-gap:5px;align-items:start;
  flex:1;align-content:center;
}
.insight-panel--press .press-item:first-child{padding-top:0}
.insight-panel--press .press-item:last-child{padding-bottom:0;border-bottom:0}
.insight-panel--press .press-item::before{display:none}
.insight-panel--press .press-item:hover{transform:none;box-shadow:none;border-color:rgba(220,196,156,.12)}
.insight-panel--press .press-item:hover .press-title{color:var(--s-300)}
.insight-panel--press .press-thumb{grid-column:1;grid-row:1/span 2;width:56px;height:56px;border-radius:10px}
.insight-panel--press .press-date{grid-column:2;font-size:12px;letter-spacing:.14em}
.insight-panel--press .press-main{grid-column:2}
.insight-panel--press .press-lang{display:none}
.insight-panel--press .press-title{font-size:1.02rem;line-height:1.36}
.insight-panel--press .press-src{margin-top:6px;font-size:11px}
.insight-panel--press .press-sum{display:none}
.insight-panel--press .press-item:not(.press-item--media){grid-template-columns:minmax(0,1fr)}
.insight-panel--press .press-item:not(.press-item--media) .press-date,
.insight-panel--press .press-item:not(.press-item--media) .press-main{grid-column:1}

/* Blog cards were a 132px square thumb beside the text, so every cover was
   cropped to a slot narrower than a phone. The cover is a 16:9 band across the
   top now, which is the shape the images were actually made in. */
.insights .home-post-card{
  display:flex;flex-direction:column;padding:0!important;border-radius:18px;overflow:hidden;height:100%;
}
.insights .home-post-card .home-post-thumb{
  display:block;width:100%;aspect-ratio:16/9;height:auto;min-height:0;margin:0;overflow:hidden;
  border:0;border-bottom:1px solid var(--line-d);
}
.insights .home-post-card .home-post-thumb img{width:100%;height:100%;object-fit:cover}
.insights .home-post-card>.tag{top:14px;left:14px}
.insights .home-post-card h3{padding:17px 20px 0;font-size:1.1rem;line-height:1.3}
.insights .home-post-card p{
  padding:9px 20px 0;font-size:14.5px;line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.insights .home-post-card .link-a{margin:auto 20px 18px;padding-top:14px}

/* The trust band read as a flat white strip; give it the warm tint and let the
   partner names carry more presence. */
.trust-band{
  background:
    radial-gradient(620px 300px at 50% 0%,rgba(220,196,156,.2),transparent 70%),
    linear-gradient(180deg,#fbf9f4,var(--paper));
  border-block:1px solid rgba(52,75,72,.07);
  padding:clamp(38px,4.4vw,58px) 0;
}
.trust-band .mq-item{color:var(--g-600);opacity:.78}
.trust-proof{margin-top:30px}
.trust-proof span{color:var(--g-700)}
@media(max-width:640px){
  .trust-proof{flex-direction:column;gap:6px}
  .trust-proof i{display:none}
}

/* Hero: the logo lives in the nav, so the copy column starts at the kicker. */
.hero-v3 .hero-copy{padding-top:clamp(0px,2vw,18px)}

/* ===================================================================
   EVENTS CALENDAR ON GREEN
   The filter panel was near-white on near-white and had no contrast.
   =================================================================== */
.events-section{
  background:
    radial-gradient(900px 520px at 88% -4%,rgba(94,128,122,.34),transparent 64%),
    linear-gradient(172deg,var(--g-900) 0%,var(--g-850) 46%,var(--g-950) 100%);
}
.sec-dark .ev-panel{
  background:rgba(220,196,156,.045);
  border-color:var(--line-d);
  box-shadow:inset 0 1px 0 rgba(220,196,156,.07),0 26px 70px rgba(2,9,7,.32);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.sec-dark .ev-panel .search{
  background:rgba(15,26,24,.42);border-color:var(--line-d);color:var(--cream);
}
.sec-dark .ev-panel .search:focus-within{border-color:var(--s-500);box-shadow:0 0 0 4px rgba(220,196,156,.16)}
.sec-dark .ev-panel .search input{color:var(--cream)}
.sec-dark .ev-panel .search input::placeholder{color:rgba(220,196,156,.5)}
.sec-dark .ev-panel .search svg{color:var(--s-500)}
.sec-dark .ev-panel .chip{
  background:rgba(15,26,24,.34);border-color:var(--line-d);color:var(--on-green-body);
}
.sec-dark .ev-panel .chip:hover{border-color:var(--s-500);color:var(--s-300)}
.sec-dark .ev-panel .chip.is-active{background:var(--s-400);border-color:var(--s-400);color:var(--g-950)}
.sec-dark .ev-panel .chip .cnt{opacity:.62}
.sec-dark .ev-panel .chip.is-active .cnt{opacity:.7;color:var(--g-900)}
.sec-dark .ev-panel .chip[disabled]{opacity:.26}
.sec-dark .fgroup{border-top-color:var(--line-d)}
.sec-dark .flabel{color:var(--s-600)}
.sec-dark .count{color:var(--on-green-muted)}
.sec-dark .count b{color:var(--s-400)}
.sec-dark .ev-month-h h2{color:var(--on-green-title)}
.sec-dark .ev-month-h h2 span{color:rgba(220,196,156,.55)}
.sec-dark .ev-badge{background:rgba(220,196,156,.12);border:1px solid var(--line-d);color:var(--s-400)}
.sec-dark .ev-card:hover{border-color:var(--line-d2);box-shadow:0 24px 60px rgba(2,9,7,.38)}
.sec-dark .ev-card .ev-meta svg{color:var(--s-600)}
.sec-dark .ev-actions .btn--ghost{--bg:transparent;--fg:var(--s-400);--bd:var(--line-d2)}
.sec-dark .ev-actions .btn--ghost:hover{--fg:var(--g-900)}

/* ===================================================================
   INSIGHTS — the blog teasers were white cards dropped on a green band
   (they render as .card, not .post-card)
   =================================================================== */
.insights .card{
  background:#101C18;border-color:rgba(220,196,156,.14);box-shadow:none;border-radius:18px;
}
.insights .card::after{background:linear-gradient(150deg,rgba(94,128,122,.2),transparent 58%)}
.insights .card:hover{
  background:#172721;border-color:var(--line-d2);
  transform:translateY(-4px);box-shadow:0 22px 56px rgba(2,9,7,.4);
}
.insights .card h3{color:var(--on-green-title);font-size:clamp(1.16rem,1.5vw,1.34rem);line-height:1.28}
.insights .card p{color:var(--on-green-body);font-size:15px}
.insights .card .tag{background:rgba(220,196,156,.14);color:var(--s-400);border:1px solid var(--line-d)}
.insights .card .link-a{color:var(--s-400);border:0}
.insights .card .link-a::after{background:rgba(220,196,156,.5)}
.insights .rows .row-item{margin:0}

/* ===================================================================
   PARTNER LOGOS — never crop a brand mark
   `object-fit:cover` fills the frame by cutting the overflow, which is
   right for photography and wrong for a logo: it sliced the wordmarks in
   half. `contain` fits the whole mark inside the frame instead.
   Partner logos arrive with their own baked-in backgrounds (some white,
   some black), so the frame is neutral and light and each mark keeps its
   own ground rather than sitting on the dark green.
   =================================================================== */
.partner-visual{
  height:172px;
  background:linear-gradient(160deg,#fff,var(--paper));
  border-bottom:1px solid rgba(52,75,72,.07);
}
.partner-visual::after{opacity:.05}
.partner-visual img{
  width:100%;height:100%;
  object-fit:contain;
  padding:clamp(18px,2.2vw,26px);
  transition:transform .7s var(--e-out);
}
.partner-card--rich:hover .partner-visual img{transform:scale(1.04);filter:none}
/* the initials fallback keeps the darker treatment, it is not a logo */
.partner-visual.is-empty{
  background:radial-gradient(circle at 30% 20%,rgba(94,128,122,.46),transparent 48%),
             linear-gradient(140deg,var(--g-950),var(--g-700));
  border-bottom-color:var(--line-d);
}
@media(max-width:640px){.partner-visual{height:158px}}

/* ===================================================================
   PARTNER LOGO FRAME — square, to match the source assets
   Google Drive normalises every partner logo to a 500x500 square with its
   own internal margins. In the old 402x172 letterbox frame a square image
   is height-constrained, so the mark rendered about 120px wide inside a
   402px card and looked lost. A square frame lets the asset fill it edge
   to edge at full size — still `contain`, so it can never be cropped.
   =================================================================== */
.partner-visual{
  height:auto;
  aspect-ratio:1/1;
}
.partner-visual img{padding:0}
/* the initials fallback is type, not a logo: it needs breathing room */
.partner-visual.is-empty{aspect-ratio:1/1}
.partner-card--rich{min-height:0}
@media(max-width:640px){
  .partner-visual{aspect-ratio:4/3;max-height:none}
}

/* ===================================================================
   ACCESSIBILITY
   =================================================================== */
/* Keyboard users had to tab through the whole navigation on every page. */
.skip-link{
  position:fixed;top:-100px;left:16px;z-index:1000;
  padding:14px 22px;border-radius:var(--r-pill);
  background:var(--s-400);color:var(--g-950);
  font-size:13.5px;font-weight:500;letter-spacing:.06em;
  box-shadow:var(--sh-lg);transition:top .25s var(--e-out);
}
.skip-link:focus{top:16px}
main:focus{outline:none}

/* A visible focus ring everywhere, not just where the browser guesses. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--s-400);
  outline-offset:3px;
  border-radius:4px;
}
.sec-dark a:focus-visible,.sec-grad a:focus-visible,
.hero a:focus-visible,.phero a:focus-visible,.nav a:focus-visible,
.footer a:focus-visible,.footer button:focus-visible{outline-color:var(--s-300)}

/* The cookie control sat on top of the footer links. Give it its own lane and
   keep it clear of the back-to-top button. */
/* In the footer this is one of three links, so it looks like the other two:
   same size, colour and baseline. It carried its own letter-spacing, an
   underline and vertical padding, which pushed it off their line. */
.footer-bot .ck-more{
  margin-left:auto;padding:0;font-size:15px;letter-spacing:inherit;
  color:var(--on-green-body);text-decoration:none;line-height:inherit;
}
.footer-bot .ck-more:hover{color:var(--s-400)}
.footer-bot .ck-more:focus-visible{outline:2px solid var(--s-400);outline-offset:3px;border-radius:3px}
@media(max-width:720px){
  .totop{right:16px;bottom:76px;width:44px;height:44px}
}

/* ===================================================================
   MOBILE HERO
   On a phone the headline ran to 14vw and the visual reserved 430px, so
   the first screen was almost entirely headline and the call to action
   sat far below the fold. One image, one primary action, no stack of
   overlapping cards.
   =================================================================== */
@media(max-width:620px){
  .hero-v3{min-height:auto;padding:calc(var(--nav-h) + 34px) 0 44px}
  .hero-v3 .h-hero{font-size:clamp(2.35rem,10.5vw,3.3rem);line-height:1.02;max-width:16ch}
  .hero-v3 .hero-sub{font-size:15.5px;line-height:1.62;margin-top:18px}
  .hero-v3 .btn-row{margin-top:24px;gap:10px}
  .hero-v3 .btn-row .btn{flex:1;min-width:0;padding:14px 18px;font-size:11.5px}
  /* the secondary action is a link on a phone, not a second button */
  .hero-v3 .btn-row .btn--light{
    flex:none;width:100%;background:none;border-color:transparent;
    text-decoration:underline;text-underline-offset:5px;padding:6px 0;
  }
  /* one photograph, cleanly framed — drop the overlapping detail cards */
  .hero-v3 .hero-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
  .hero-v3 .chip-glass{padding:8px 13px;font-size:11.5px}
  .hero-v3 .chip-glass:first-child{grid-column:auto}
  .scroll-cue{display:none}
}

/* ===================================================================
   SPEC TABLES on landing pages
   A buyer comparing models needs a table, not paragraphs. Scrolls
   inside its own container so a phone never scrolls the whole page.
   =================================================================== */
.spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(24px,3vw,34px);
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.spec{width:100%;border-collapse:collapse;font-size:14.5px;min-width:600px}
.spec th,.spec td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.spec thead th{background:var(--paper);font-family:var(--ff-s);font-weight:500;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--g-500);white-space:nowrap}
.spec tbody tr:last-child td{border-bottom:0}
.spec tbody tr:hover{background:rgba(220,196,156,.07)}
.spec td:first-child{font-weight:500;color:var(--g-800);white-space:nowrap}
.spec .muted-cell{color:var(--g-400)}
.spec-note{font-size:13px;color:var(--g-400);margin-top:12px;line-height:1.6}
.spec-note a{border-bottom:1px solid var(--s-500)}
@media(max-width:640px){.spec{font-size:13.5px}.spec th,.spec td{padding:11px 13px}}

/* breadcrumb trail on landings */
.crumbs a{color:inherit}
.sec-tint .crumbs,.section .crumbs{color:var(--g-400)}
.section .crumbs a:hover,.sec-tint .crumbs a:hover{color:var(--g-700)}

/* the partner's own FitLink page takes visual priority over the outbound link */
.partner-visit--own{background:var(--g-800);color:var(--cream);border-color:var(--g-800)}
.partner-visit--own:hover{background:var(--s-400);color:var(--g-900);border-color:var(--s-400)}
.partner-visit--alt{opacity:.72}
.partner-visit--alt:hover{opacity:1}

/* ===================================================================
   HOME FOCUS PASS — real network, no fictional facilities
   =================================================================== */

/* Six logos said "we have six partners". The band now scrolls the whole
   network, masked at both edges, and pauses on hover so a name can be read. */
.home-partner-logos{width:100%}
.mq-logos{gap:14px;animation-duration:84s}
.mq-logos .home-partner-logo{width:116px;flex:none}
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none}
  .marquee{overflow-x:auto}
}
/* Square tiles, for the same reason the partner cards are square: Drive hands
   back every logo as a 500x500 thumbnail, so in a letterbox frame object-fit
   had to shrink the asset to the frame's height — 42px inside a 68px tile —
   and the wall read as a row of stamps rather than a row of brands. */
.home-partner-logo,.home-partner-name{min-width:0;aspect-ratio:1;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.68);padding:13px}
.home-partner-name{display:grid;place-items:center}
/* The tile used to be `display:grid; place-items:center`, and against a grid
   area a percentage height has no definite containing block to resolve against:
   both `height:100%` and `max-height:100%` fell back to auto, so the 500x500
   thumbnail rendered as tall as the column was wide and spilled out of the tile
   onto the line of text underneath it. A block tile gives the image a definite
   content box, and object-fit centres it without needing place-items. */
.home-partner-logo{display:block}
.home-partner-logo img{display:block;width:100%;height:100%;object-fit:contain;border-radius:4px}
.home-partner-name{font-family:var(--ff-d);font-size:1.12rem;color:var(--g-600);text-align:center}

.path{display:grid;grid-template-columns:132px minmax(0,1fr);flex-direction:unset}
.path--primary{border-color:rgba(220,196,156,.42);background:rgba(220,196,156,.08)}
.path-symbol{display:grid;place-items:center;color:var(--s-400);background:radial-gradient(circle at 50% 38%,rgba(220,196,156,.13),transparent 62%);border-right:1px solid var(--line-d)}
.path-symbol svg{width:64px;height:64px}
.path .path-tag{position:static;align-self:flex-start;width:max-content;margin-bottom:18px;background:rgba(15,26,24,.35)}
.path h3{font-size:clamp(1.28rem,1.75vw,1.68rem)}
.path-body{padding:clamp(24px,2.5vw,32px)}

.home-partner-panel{position:relative;min-height:390px;border:1px solid var(--line-2);border-radius:24px;padding:clamp(22px,3vw,34px);background:linear-gradient(145deg,#fff,var(--paper));box-shadow:var(--sh-md);overflow:hidden}
.home-partner-panel::before{content:"";position:absolute;inset:auto -12% -34% auto;width:280px;aspect-ratio:1;border:1px solid rgba(52,75,72,.08);border-radius:50%;box-shadow:0 0 0 48px rgba(52,75,72,.025),0 0 0 96px rgba(52,75,72,.018)}
.home-partner-panel-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.home-partner-panel-head span{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g-400)}
.home-partner-panel-head strong{font-family:var(--ff-d);font-weight:500;color:var(--g-700)}
.home-partner-panel-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
/* The wall ends by saying there are more, and leads to where they are listed.
   It never says how many — that would fix the network at a size (AGENTS.md). */
.home-partner-more{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  aspect-ratio:1;padding:12px;text-align:center;border-radius:14px;
  border:1px dashed rgba(185,154,102,.55);background:rgba(220,196,156,.12);color:var(--g-700);
  transition:background .35s var(--e),border-color .35s var(--e),transform .35s var(--e-out);
}
.home-partner-more b{font-family:var(--ff-d);font-weight:500;font-size:.98rem;line-height:1.24}
.home-partner-more svg{width:16px;height:16px;color:var(--s-600);transition:transform .35s var(--e-out)}
.home-partner-more:hover{background:rgba(220,196,156,.24);border-color:var(--s-600);transform:translateY(-2px)}
.home-partner-more:hover svg{transform:translateX(4px)}
.home-partner-panel .home-partner-logo,.home-partner-panel .home-partner-name{aspect-ratio:1;background:#fff}

.home-post-card{padding:0 22px 22px!important}
.home-post-thumb{display:block;margin:0 -22px 18px;height:148px;overflow:hidden;border-bottom:1px solid var(--line-d)}
.home-post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--e-out)}
.home-post-card:hover .home-post-thumb img{transform:scale(1.045)}
.home-post-card .tag{position:absolute;z-index:2;top:16px;left:16px;max-width:calc(100% - 32px)}
.home-post-card h3{margin-top:0!important}

/* A press row is a grid, so the thumbnail has to be declared as a column.
   Without this the fourth child wrapped onto a second implicit row and the
   language badge fell underneath the headline the moment a row had an image. */
.press-thumb{width:74px;height:58px;border-radius:10px;overflow:hidden;background:var(--paper)}
.press-thumb img{width:100%;height:100%;object-fit:cover}
.press-item--media{grid-template-columns:74px minmax(104px,max-content) minmax(0,1fr) auto}
@media(max-width:780px){
  .press-item--media{grid-template-columns:1fr;gap:12px}
  .press-item--media .press-thumb{width:100%;height:150px}
  /* …but the home panel is a ledger at every width, so its thumb stays a
     thumb rather than becoming a full-width banner inside a teaser row. */
  .insight-panel--press .press-item--media{grid-template-columns:56px minmax(0,1fr);gap:0;column-gap:15px;row-gap:5px}
  .insight-panel--press .press-item--media .press-thumb{width:56px;height:56px}
}
/* FitLink's own summary line: the headline stays in its published language,
   this is what the other two languages can actually read. */
.press-sum{margin-top:10px;font-size:14.5px;line-height:1.62;color:var(--g-500);max-width:68ch}
.sec-dark .press-sum,.sec-grad .press-sum{color:var(--on-green-body)}

/* The class name is a leftover: it once positioned an "AI-assisted" label.
   No page carries one any more — every photograph on the site is a real one
   supplied by a partner — and it now positions the credit instead. */
.has-media-disclosure{position:relative}

/* A credit, not a disclaimer: the partner's name at the image. */
.media-credit{position:absolute;z-index:5;left:12px;bottom:12px;padding:5px 8px;border-radius:999px;background:rgba(15,26,24,.78);border:1px solid rgba(220,196,156,.38);backdrop-filter:blur(8px);color:var(--s-300);font-size:9.5px;line-height:1;letter-spacing:.08em;text-transform:uppercase;pointer-events:none}

/* Generic editorial photos must not imply real FitLink facilities. Subpage
   hero and CTA surfaces use the visual language of the brand itself — until a
   partner supplies a real photograph of a real floor, which then takes the
   slot and says whose floor it is. :not() keeps the two apart; without it the
   !important gradient would paint straight over the photograph. */
body[data-page] .phero-media:not(.phero-media--photo){background-image:radial-gradient(circle at 66% 34%,rgba(220,196,156,.16),transparent 18%),repeating-radial-gradient(circle at 50% 50%,transparent 0 55px,rgba(220,196,156,.1) 56px 57px),linear-gradient(145deg,#1c342e,#0e1916)!important}

/* The photo variant of the hero slot. The <figure> keeps the slot's silhouette
   — the big top-left radius is the shape readers already know the page by. */
.phero-media--photo{margin:0;background:#0A0A0A}
/* The slot already paints a gradient wash in ::before and the FitLink badge in
   ::after. Both are positioned pseudos with z-index auto, so without an
   explicit order the photograph would paint over them — tree order puts an
   element after its ::before. The stack is spelled out instead. */
.phero-media--photo img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.phero-media--photo::before{z-index:2}
.phero-media--photo::after{z-index:3}
/* The credit sits above the gradient wash in ::before and clear of the logo
   badge in ::after, which owns the bottom-left corner of this slot. */
.phero-media--photo figcaption{position:absolute;z-index:4;left:92px;right:0;bottom:0;padding:34px 20px 20px;background:linear-gradient(180deg,transparent,rgba(10,10,10,.76));color:rgba(255,255,255,.82);font-size:11.5px;line-height:1.5;letter-spacing:.04em;text-align:right}
@media(max-width:620px){.phero-media--photo figcaption{left:86px;padding:28px 16px 16px}}
body[data-page="contact"] .split-media{background:radial-gradient(circle at 68% 30%,rgba(220,196,156,.12),transparent 22%),linear-gradient(150deg,#1a322c,#0f1a17)!important}
.cta-band{background:radial-gradient(70% 100% at 50% 0%,rgba(94,128,122,.5),transparent 62%),linear-gradient(150deg,var(--g-850),var(--g-700) 55%,var(--g-950));box-shadow:0 30px 100px rgba(15,26,24,.18)}

@media(max-width:900px){
  .path{grid-template-columns:108px minmax(0,1fr)}
}
@media(max-width:620px){
  .home-partner-logo,.home-partner-name{padding:10px}
  .path{grid-template-columns:1fr}.path-symbol{min-height:105px;border-right:0;border-bottom:1px solid var(--line-d)}
  .path-symbol svg{width:52px;height:52px}
  /* Two columns made the wall eight rows deep on a phone. Three columns and
     a shorter wall keep it scannable; the tile that says there are more is
     never one of the ones dropped. */
  .home-partner-panel-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .home-partner-panel-grid .home-partner-logo:nth-child(n+12){display:none}
  .home-partner-more b{font-size:.86rem}
}

/* ===================================================================
   HUBSPOT CONTACT FORM
   The embed is opt-in, so the slot has to look like a considered part of the
   page in both states — asking, and filled.
   =================================================================== */
/* Where a HubSpot form exists the slot IS the form, so the mail form steps
   aside. Done in CSS rather than script so there is no flash of two forms.
   The languages are listed rather than matched wholesale, so a language added
   before its HubSpot form exists keeps the mail form instead of losing both. */
body[data-lang="en"][data-page="contact"] .form[data-mailto],
body[data-lang="de"][data-page="contact"] .form[data-mailto],
body[data-lang="es"][data-page="contact"] .form[data-mailto]{display:none}
/* …and handed straight back if the embed never renders, so a visitor is never
   left without a way to write to us. */
body.hs-fallback-on[data-lang="en"][data-page="contact"] .form[data-mailto],
body.hs-fallback-on[data-lang="de"][data-page="contact"] .form[data-mailto],
body.hs-fallback-on[data-lang="es"][data-page="contact"] .form[data-mailto]{display:grid}
.hs-down{margin-bottom:22px;padding:14px 16px;border-radius:var(--r-xs);
  background:rgba(220,196,156,.18);border:1px solid rgba(185,154,102,.35);
  font-size:14px;line-height:1.6;color:var(--g-600)}
.hs-slot{min-height:120px}
/* the way back, offered once and quietly, inside the note that explains why
   the mail form is there */
/* the sentence that says what was actually deleted, set apart from the offer
   to load the form again so the two are not read as one thought */
.hs-cleared{display:inline-block;margin-top:6px;color:var(--g-500)}
.hs-gate-note .hs-relink{color:var(--s-700,var(--g-700))}
.hs-relink{background:none;padding:0;font:inherit;color:var(--g-700);
  border-bottom:1px solid var(--s-500);cursor:pointer}
.hs-relink:hover{color:var(--g-800);border-bottom-color:var(--s-600)}
.hs-gate{
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--white);
  padding:clamp(26px,3.4vw,38px);
}
.hs-gate-ico{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:18px;
  border:1px solid var(--line-2);background:var(--paper);color:var(--s-600);
}
.hs-gate-ico svg{width:22px;height:22px}
.hs-gate h3{font-size:clamp(1.3rem,1.8vw,1.55rem);margin-bottom:10px;color:var(--g-800)}
.hs-gate p{font-size:15px;line-height:1.7;color:var(--g-500);max-width:56ch}
.hs-gate p a{color:var(--g-700);border-bottom:1px solid var(--s-500)}
.hs-gate .btn-row{margin-top:24px}
.hs-gate-note{margin-top:16px;font-size:13.5px;color:var(--g-400)}
/* HubSpot ships its own styles; keep the container out of their way and only
   hold the width so the embed cannot run wider than the column. */
.hs-slot .hs-form-frame{max-width:100%}

/* ===================================================================
   PARTNER LANDING — BASI SYSTEMS
   Bodytone's pictures are rooms, so .bt-shot crops them to fill a panel and
   loses nothing. BASI's are studio photographs of single apparatus, lit in
   their own negative space: the same crop takes the feet off a Chair and the
   ends off a Reformer. So these frames take the picture's own 3:2 and show
   all of it. The backdrop is a graded sweep, not a flat colour, so it is
   framed rather than bled — there is no single colour that would match it.
   =================================================================== */
.basi-shot{
  margin:0;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line-d2);background:#E7E4DF;box-shadow:0 24px 70px rgba(2,9,7,.26);
}
/* height:auto matters — the width/height attributes make both axes definite,
   and a box with two definite axes ignores the intrinsic ratio. */
.basi-shot img{display:block;width:100%;height:auto}
.basi-shot figcaption{
  padding:12px 16px 14px;font-size:12.5px;line-height:1.5;letter-spacing:.02em;
  background:var(--g-800);color:rgba(255,255,255,.76);
}

/* the hero's second column: centred against a hero that is taller than a 3:2
   picture, rather than stretched to fill it */
.basi-shot--hero{align-self:center}

/* under the range cards: wide, but held to a readable measure and centred */
.basi-shot--wide{max-width:1000px;margin:clamp(34px,4.5vw,54px) auto 0}

/* On the dark band the caption would otherwise sit on a second, lighter green
   than the section behind it. */
.sec-grad .basi-shot figcaption{background:rgba(8,16,14,.62)}

@media(max-width:880px){
  .basi-shot--hero{margin-top:36px}
}

/* ===================================================================
   PARTNER LANDING — BODYTONE BOOTY AREA
   The partner's identity carried without displacing FitLink's. Bodytone
   reads black and white, so its wordmark gets a band of its own; the Booty
   Area itself is lit magenta, so that is the accent on this page. Both are
   scoped to the page: FitLink's green and gold stay in the chrome, the
   buttons and the calls to action.
   =================================================================== */
/* The photo surfaces below are shared by every partner landing, so the ink
   they sit on is a default rather than one page's private colour. Only the
   magenta is the Booty Area's own. */
body[data-page="landing"]{--bt-ink:#0A0A0A}
body[data-landing="booty"]{--bt-magenta:#C2186B; --bt-lit:#FF57A8}

/* the partner's own strip, directly under the hero */
.bt-band{background:var(--bt-ink);color:#fff}
.bt-band .wrap{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;padding-block:22px}
.bt-band img{width:clamp(124px,15vw,164px);height:auto;flex:none}
.bt-band p{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);max-width:60ch}
.bt-band b{color:#fff;font-weight:500}
.bt-rule{width:1px;align-self:stretch;min-height:34px;background:rgba(255,255,255,.22)}
@media(max-width:620px){.bt-rule{display:none}}

/* one wide photograph of the real zone, captioned as what it is */
/* margin:0 — a bare <figure> carries the browser's own 1em 40px, which kept
   the full-bleed photograph inset from both edges. */
.bt-shot{position:relative;margin:0;background:var(--bt-ink)}
.bt-shot img{display:block;width:100%;height:clamp(290px,46vw,560px);object-fit:cover;opacity:.95}
.bt-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px clamp(18px,4vw,42px) 16px;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.82));
  color:rgba(255,255,255,.8);font-size:12.5px;letter-spacing:.04em;
}

/* the gallery, square-ish so the vertical and horizontal shots agree */
.bt-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
@media(max-width:760px){.bt-gallery{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.bt-gallery{grid-template-columns:1fr}}
.bt-gallery figure{margin:0;border-radius:16px;overflow:hidden;background:var(--bt-ink)}
/* height:auto matters: the width and height attributes on the <img> make both
   axes definite, and a box with two definite axes ignores aspect-ratio. */
.bt-gallery img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.bt-gallery figcaption{padding:11px 14px 13px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.72)}

/* The photographs carry the partner's colour. Labels, rules and markers stay
   FitLink's: a second accent hue competing with the gold made the page read as
   two brands arguing rather than one representing the other. */
.bt-hero-shot{
  position:relative;margin:0;min-height:440px;align-self:stretch;overflow:hidden;
  border-radius:160px 18px 18px 18px;border:1px solid var(--line-d2);
  box-shadow:0 30px 100px rgba(2,9,7,.34);background:var(--bt-ink);
}
.bt-hero-shot img{width:100%;height:100%;min-height:440px;object-fit:cover;display:block}
.bt-hero-shot figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:40px 24px 18px;
  background:linear-gradient(180deg,transparent,rgba(10,10,10,.8));
  color:rgba(255,255,255,.82);font-size:12.5px;line-height:1.5;
}
@media(max-width:900px){
  .bt-hero-shot{min-height:300px;border-radius:110px 16px 16px 16px}
  .bt-hero-shot img{min-height:300px}
}

/* ===================================================================
   PRESS ARCHIVE — cards, not a list
   One mention per full-width row made every piece of coverage look small,
   whatever the outlet. The archive is a wall of cards; the home panel keeps
   its ledger, where a dense list is the right shape for a teaser.
   =================================================================== */
#pressList{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(14px,1.6vw,20px)}
#pressList .press-item{
  grid-template-columns:minmax(0,1fr) auto;
  align-content:start;row-gap:0;column-gap:14px;
  padding:0;overflow:hidden;border-radius:var(--r-md);
  transition:transform .4s var(--e-out),box-shadow .4s var(--e-out),border-color .4s var(--e);
}
#pressList .press-item:hover{transform:translateY(-4px)}
#pressList .press-item::before{display:none}
#pressList .press-thumb{
  grid-column:1/-1;width:100%;height:auto;aspect-ratio:16/9;border-radius:0;
  border-bottom:1px solid var(--line);
}
#pressList .press-thumb img{width:100%;height:100%;object-fit:cover}
/* Placed explicitly rather than left to auto-flow: the language badge follows
   the body in the DOM, so it landed on a row of its own at the foot of the card
   instead of sitting beside the date. */
#pressList .press-date{padding:18px 0 0 20px;font-size:12.5px}
#pressList .press-lang{margin:18px 20px 0 0;align-self:start}
#pressList .press-main{padding:8px 20px 20px}
#pressList .press-item--media .press-thumb{grid-row:1;grid-column:1/-1}
#pressList .press-item--media .press-date{grid-row:2;grid-column:1}
#pressList .press-item--media .press-lang{grid-row:2;grid-column:2}
#pressList .press-item--media .press-main{grid-row:3;grid-column:1/-1}
#pressList .press-item:not(.press-item--media) .press-date{grid-row:1;grid-column:1}
#pressList .press-item:not(.press-item--media) .press-lang{grid-row:1;grid-column:2}
#pressList .press-item:not(.press-item--media) .press-main{grid-row:2;grid-column:1/-1}
#pressList .press-title{font-size:clamp(1.04rem,1.25vw,1.16rem);line-height:1.34}
#pressList .press-src{margin-top:9px;font-size:11px}
#pressList .press-sum{margin-top:10px;font-size:14px}
/* a card with no picture still has to fill its cell, so the headline grows */
#pressList .press-item:not(.press-item--media) .press-title{font-size:clamp(1.1rem,1.4vw,1.28rem)}
@media(max-width:780px){
  #pressList{grid-template-columns:1fr}
  #pressList .press-item--media{grid-template-columns:minmax(0,1fr) auto;gap:0 14px}
  #pressList .press-item--media .press-thumb{width:100%;height:auto;aspect-ratio:16/9}
}