*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section-head{max-width:760px;margin-bottom:clamp(2.5rem,6vw,4.5rem)}

/* ---------- type ---------- */
.eyebrow{font-size:var(--fs-small);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.eyebrow.he{letter-spacing:.02em;text-transform:none;font-size:1rem}
.h2{font-size:var(--fs-h2);line-height:1.08;font-weight:800;letter-spacing:-.01em;text-wrap:balance}
.h2 .line{display:block}
.h2-sm{font-size:var(--fs-h2-sm)}
.h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25}
.lead{font-size:var(--fs-lead);line-height:1.4;font-weight:500}
.sub{color:var(--ink-soft);max-width:60ch}
.accent{font-family:var(--font-script);font-weight:300;color:var(--red)}
.on-dark{color:var(--cream)}
.on-dark .eyebrow,.on-dark .sub{color:rgba(242,235,226,.72)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 1.75em;border-radius:999px;font-weight:700;font-size:1rem;line-height:1;text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .45s var(--ease),background-color .25s,color .25s,border-color .25s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:#fff;font-size:1.17rem;font-weight:800} /* 18.7px bold = "large text": white on accent (3.59:1) passes AA at 3:1 (audit 24.9) */
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:color-mix(in srgb,var(--ink) 85%,var(--wine))}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:var(--accent-light)}
.btn-outline{border-color:currentColor;background:transparent}
.btn-outline:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn .arrow{width:1em;height:1em;transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(-4px)}

/* ---------- placeholders (dev only) ---------- */


.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;padding:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);pointer-events:none} /* honeypot: bots fill it, people never see it. Never push it off-canvas (left:-9999px made RTL pages scroll 10,000px sideways, 25.9) */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* dev: ?shot disables viewport-relative heights for full-page captures */
body.shot .hero{min-height:0}

/* ---------- type roles: Futurism = headings, Rag Sans = body, FtOrik = small notes ---------- */
h1,h2,h3,.h1,.h2,.h3,.display,.num,.contact-card-title,.card-meta h3,.lb-title,.sessions-badge strong{font-family:var(--font-head)}
.eyebrow,.hero-trust,.lb-client,.num-label,.sessions-badge span,.marquee .eyebrow{font-family:var(--font-note);font-size:1.1rem;letter-spacing:.01em;text-transform:none}
.num-label{font-size:1.2rem}
/* Latin names with accents (L'Oréal): Rag Sans and FtOrik have no é, so those runs fall back to Heebo instead of dropping the glyph */
.lat{font-family:"Heebo",system-ui,-apple-system,sans-serif;font-weight:600;letter-spacing:0}
.hero-trust{font-size:clamp(1.4rem,2vw,1.8rem)}

/* ===== audit fixes 25.9.2026 (site-side overrides; a11y.css/a11y.js belong to the accessibility project and stay untouched) ===== */
/* pages without the phone dock: the a11y button was parked 86px up (room for the dock) and floated over the hero text; sit it in the corner instead */
@media (max-width:899px){
  body:not(:has(.dock)) .a11y-btn{bottom:calc(env(safe-area-inset-bottom,0px) + 14px)}
  html.has-cookie body:not(:has(.dock)) .a11y-btn{bottom:calc(env(safe-area-inset-bottom,0px) + 14px + var(--cookie-h,0px))}
}
.cookie-more{white-space:nowrap}
body:has(.topnav) .skip-link:focus,body:has(.topnav) .skip-link:focus-visible{top:88px} /* on the home page the skip link covered the floating pill's links */

/* touch targets of at least 24px (WCAG 2.2, audit 26.9): the logo links and the small text buttons grow their hit area without moving anything */
a.brand:not(.topnav .brand){padding-block:5px;margin-block:-5px}
.footer-cookie,.cookie-more{padding-block:4px!important;margin-block:-4px}