/* =====================================================================
   Kanunnikov Studio — "Cinematic" design system (v4, Oct 2026)
   Reference direction: Promodo (UA) — full-bleed photography, giant thin
   uppercase type, near-black canvas with cream / fern / sapphire blocks.
   Brand: Dark Sapphire #0A2165 · Water Fern #72B490 · Light Sprinkle #E6E6DB
   Type: Unbounded (headings) + Onest (text), OFL, self-hosted — since v4.6
   ===================================================================== */

@font-face{ font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Onest-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Onest-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Onest-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Onest'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Onest-latin.woff2') format('woff2'); 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:'Unbounded'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Unbounded-cyrillic-ext.woff2') format('woff2'); unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Unbounded-cyrillic.woff2') format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Unbounded-latin-ext.woff2') format('woff2'); 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family:'Unbounded'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/Unbounded-latin.woff2') format('woff2'); 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; }

:root{
  --black:#07080C; --black-2:#0D0F16; --black-3:#151A2B;
  --cream:#E6E6DB; --cream-2:#F0F0E8;
  --fern:#72B490; --fern-d:#2E7651; --fern-l:#A9D3BB;
  --sapphire:#0A2165; --sapphire-2:#2B4597;
  --line:rgba(230,230,219,.16); --line-2:rgba(230,230,219,.3);
  --muted:rgba(230,230,219,.66);
  --f:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --fd:'Unbounded','Onest',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --container:1440px; --gutter:clamp(20px,3.4vw,56px);
  --sec:clamp(96px,11vw,176px);
  --header-h:84px;
  --e-out:cubic-bezier(.16,1,.3,1); --e-io:cubic-bezier(.65,0,.35,1);
}
/* light theme tokens (cream / fern sections) */
.t-cream,.t-fern{ --line:rgba(7,8,12,.16); --line-2:rgba(7,8,12,.32); --muted:rgba(7,8,12,.66); }
.t-sapphire{ --line:rgba(230,230,219,.2); --muted:rgba(230,230,219,.72); }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--black); color:var(--cream); font-family:var(--f); font-size:17px; line-height:1.6; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; }
@media (min-width:1024px){ body{ font-size:18px; } }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
p,ul,ol,figure,blockquote{ margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:200; line-height:1; letter-spacing:-.01em; text-wrap:balance; }
::selection{ background:var(--fern); color:var(--black); }
:focus-visible{ outline:2px solid var(--fern); outline-offset:3px; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link{ position:fixed; top:-60px; left:16px; z-index:1000; background:var(--fern); color:var(--black); padding:12px 18px; transition:top .2s; }
.skip-link:focus{ top:16px; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:calc(var(--container) + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:calc(980px + var(--gutter)*2); }
.sec{ padding-block:var(--sec); position:relative; }
.sec--s{ padding-block:clamp(64px,7vw,104px); }
.sec--top0{ padding-top:0; } .sec--bot0{ padding-bottom:0; }
.t-cream{ background:var(--cream); color:var(--black); }
.t-cream2{ background:var(--cream-2); color:var(--black); --line:rgba(7,8,12,.14); --muted:rgba(7,8,12,.66); }
.t-fern{ background:var(--fern); color:var(--black); }
.t-sapphire{ background:var(--sapphire); color:var(--cream); }
.t-black2{ background:var(--black-2); }
.grid2{ display:grid; gap:clamp(32px,5vw,80px); }
@media (min-width:1000px){ .grid2{ grid-template-columns:1fr 1fr; } .grid2--57{ grid-template-columns:5fr 7fr; } .grid2--75{ grid-template-columns:7fr 5fr; } .grid2--c{ align-items:center; } .grid2--e{ align-items:end; } }
.grid2>*,.cards>*,.steps>*{ min-width:0; }
.mt-s{ margin-top:16px; } .mt-m{ margin-top:32px; } .mt-l{ margin-top:clamp(40px,5vw,72px); }
.sticky{ position:sticky; top:calc(var(--header-h) + 32px); }
@media (max-width:999px){ .sticky{ position:static; } }

/* ---------- type ---------- */
.display{ font-weight:200; text-transform:uppercase; font-size:clamp(46px,9.6vw,184px); line-height:.86; letter-spacing:-.02em; }
.h1{ font-weight:200; text-transform:uppercase; font-size:clamp(40px,6.4vw,112px); line-height:.9; letter-spacing:-.015em; }
.h1--m{ font-size:clamp(36px,5vw,88px); line-height:.94; }
.h1--l{ font-size:clamp(32px,3.9vw,68px); line-height:1; }
.h2{ font-weight:200; text-transform:uppercase; font-size:clamp(36px,5vw,86px); line-height:.94; letter-spacing:-.01em; }
.h2--s{ font-size:clamp(30px,3.4vw,56px); line-height:1; }
.h3{ font-weight:300; text-transform:uppercase; font-size:clamp(26px,2.8vw,46px); line-height:1.02; }
.h4{ font-weight:400; font-size:clamp(19px,1.5vw,23px); line-height:1.3; letter-spacing:0; text-transform:none; }
.lead{ font-weight:300; font-size:clamp(18px,1.55vw,22px); line-height:1.55; color:var(--muted); max-width:58ch; }
.muted{ color:var(--muted); }
.small{ font-size:15px; line-height:1.55; }
.accent{ color:var(--fern); }
.t-cream .accent,.t-cream2 .accent{ color:var(--fern-d); }
.label{ display:inline-flex; align-items:center; gap:14px; font-size:13px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:28px; }
.label::before{ content:''; width:32px; height:1px; background:var(--fern); }
.t-cream .label::before,.t-cream2 .label::before{ background:var(--fern-d); }
.t-fern .label::before{ background:var(--black); }
.prose p+p{ margin-top:1em; }
.prose a,.link{ text-decoration:underline; text-decoration-color:var(--fern); text-decoration-thickness:1px; text-underline-offset:4px; transition:color .2s; }
.prose a:hover,.link:hover{ color:var(--fern); }
.t-cream .prose a:hover,.t-cream .link:hover{ color:var(--fern-d); }
.prose ul,.prose ol{ padding-left:1.2em; margin:.8em 0; }
.prose li+li{ margin-top:.4em; }

.sec-head{ display:grid; gap:24px 64px; margin-bottom:clamp(48px,6vw,96px); }
@media (min-width:1000px){ .sec-head{ grid-template-columns:7fr 5fr; align-items:end; } }
.sec-head .lead{ max-width:46ch; }

/* ---------- buttons ---------- */
.lbtn{ display:inline-flex; align-items:center; gap:18px; padding-bottom:10px; border-bottom:1px solid var(--fern); font-size:14px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; line-height:1.3; transition:color .3s,border-color .3s; text-align:left; }
.lbtn .ci{ width:54px; height:54px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; background:var(--fern); color:var(--black); transition:transform .5s var(--e-out),background .3s; }
.lbtn .ci svg{ width:20px; height:20px; }
.lbtn:hover{ color:var(--fern); }
.lbtn:hover .ci{ transform:rotate(-45deg); }
.t-cream .lbtn,.t-cream2 .lbtn,.lbtn--dark{ border-color:var(--sapphire); }
.t-cream .lbtn .ci,.t-cream2 .lbtn .ci,.lbtn--dark .ci{ background:var(--sapphire); color:var(--cream); }
.t-cream .lbtn:hover,.t-cream2 .lbtn:hover{ color:var(--sapphire); }
.t-fern .lbtn{ border-color:var(--black); }
.t-fern .lbtn .ci{ background:var(--black); color:var(--cream); }
.t-fern .lbtn:hover{ color:var(--black); }
.lbtn--sm .ci{ width:40px; height:40px; }
.lbtn--sm{ font-size:13px; gap:14px; padding-bottom:8px; }
.btns{ display:flex; flex-wrap:wrap; gap:20px 40px; align-items:center; }
.sbtn{ display:inline-flex; align-items:center; justify-content:center; gap:14px; width:100%; min-height:64px; padding:0 28px; background:var(--black); color:var(--cream); font-size:14px; letter-spacing:.16em; text-transform:uppercase; transition:background .3s,color .3s; }
.sbtn:hover{ background:var(--sapphire); }
.sbtn svg{ width:18px; height:18px; transition:transform .4s var(--e-out); }
.sbtn:hover svg{ transform:translateX(4px); }
.sbtn.is-loading{ opacity:.7; pointer-events:none; }
.alink{ display:inline-flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; transition:color .25s,gap .35s var(--e-out); }
.alink svg{ width:16px; height:16px; }
.alink:hover{ color:var(--fern); gap:16px; }
.t-cream .alink:hover{ color:var(--fern-d); }

/* ---------- header ---------- */
.header{ position:fixed; inset:0 0 auto 0; z-index:400; height:var(--header-h); transition:transform .6s var(--e-out),background .35s,border-color .35s; border-bottom:1px solid transparent; }
.header.is-scrolled{ background:rgba(7,8,12,.84); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color:var(--line); }
.header.is-hidden{ transform:translateY(-100%); }
.header .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:inline-flex; flex-shrink:0; position:relative; z-index:2; }
.logo img{ height:42px; width:auto; }
.nav{ display:none; gap:clamp(20px,2.4vw,40px); }
@media (min-width:1100px){ .nav{ display:flex; } }
.nav a{ position:relative; font-size:13px; letter-spacing:.18em; text-transform:uppercase; padding:8px 0; color:var(--cream); transition:color .25s; }
.nav a::after{ content:''; position:absolute; left:0; bottom:2px; width:100%; height:1px; background:var(--fern); transform:scaleX(0); transform-origin:right; transition:transform .5s var(--e-out); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.hdr-right{ display:flex; align-items:center; gap:28px; position:relative; z-index:2; }
.hdr-audit{ display:none; align-items:center; gap:12px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
@media (min-width:720px){ .hdr-audit{ display:inline-flex; } }
.hdr-audit i{ width:44px; height:44px; border-radius:50%; background:var(--fern); color:var(--black); display:grid; place-items:center; transition:transform .5s var(--e-out); }
.hdr-audit i svg{ width:16px; height:16px; }
.hdr-audit:hover i{ transform:rotate(-45deg); }
.menu-btn{ display:inline-flex; align-items:center; gap:12px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; }
.menu-btn .bars{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-content:center; gap:5px; transition:border-color .3s; }
.menu-btn .bars span{ display:block; width:16px; height:1px; background:var(--cream); transition:transform .45s var(--e-out); }
.menu-btn:hover .bars{ border-color:var(--fern); }
body.menu-open .menu-btn .bars span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
body.menu-open .menu-btn .bars span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }
@media (min-width:1100px){ .menu-btn .mb-t{ display:none; } }

/* fullscreen menu */
.menu{ position:fixed; inset:0; z-index:390; background:var(--black); display:grid; overflow-y:auto; clip-path:inset(0 0 100% 0); visibility:hidden; transition:clip-path .9s var(--e-io),visibility 0s .9s; }
.menu.is-open{ clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .9s var(--e-io),visibility 0s; }
body.menu-open{ overflow:hidden; }
body.menu-open .header{ background:transparent; border-color:transparent; backdrop-filter:none; transform:none; }
.menu-in{ display:grid; gap:48px; padding:calc(var(--header-h) + 32px) var(--gutter) 40px; max-width:calc(var(--container) + var(--gutter)*2); margin:0 auto; width:100%; }
@media (min-width:1000px){ .menu-in{ grid-template-columns:7fr 5fr; gap:80px; align-items:end; min-height:100vh; } }
.menu-main{ list-style:none; }
.menu-main li{ overflow:hidden; border-bottom:1px solid var(--line); }
.menu-main a{ display:flex; align-items:baseline; gap:24px; padding:10px 0; font-weight:200; text-transform:uppercase; font-size:clamp(40px,6.6vw,104px); line-height:1.02; transform:translateY(110%); transition:transform .9s var(--e-out),color .3s; }
.menu.is-open .menu-main a{ transform:none; transition-delay:calc(.25s + var(--i) * .06s); }
.menu-main a small{ font-size:13px; letter-spacing:.2em; color:var(--fern); font-weight:400; }
.menu-main a:hover{ color:var(--fern); }
.menu-side{ display:grid; gap:36px; opacity:0; transform:translateY(20px); transition:opacity .6s,transform .8s var(--e-out); }
.menu.is-open .menu-side{ opacity:1; transform:none; transition-delay:.5s; }
.menu-side h4{ font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:14px; }
.menu-side ul{ list-style:none; display:grid; gap:8px; }
.menu-side li a{ font-size:19px; transition:color .2s; }
.menu-side li a:hover{ color:var(--fern); }
.menu-side .contacts a{ display:block; font-size:22px; font-weight:300; }

/* ---------- heroes ---------- */
.hero-full{ position:relative; min-height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.hero-full .bg{ position:absolute; inset:0; overflow:hidden; }
.hero-full .bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.14); animation:kenburns 16s var(--e-out) forwards; }
@keyframes kenburns{ to{ transform:scale(1); } }
.hero-full::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,8,12,.72),rgba(7,8,12,.12) 62%),linear-gradient(0deg,rgba(7,8,12,.9),rgba(7,8,12,0) 46%),linear-gradient(180deg,rgba(7,8,12,.5),transparent 22%); pointer-events:none; }
.hero-full .wrap{ position:relative; z-index:1; padding-top:calc(var(--header-h) + 40px); padding-bottom:clamp(40px,6vw,72px); }
.hero-meta{ display:grid; gap:28px 48px; margin-top:clamp(28px,3vw,44px); }
@media (min-width:1000px){ .hero-meta{ grid-template-columns:minmax(0,1fr) auto; align-items:end; } }
.hero-meta .lead{ color:rgba(230,230,219,.82); max-width:52ch; }
.hero-micro{ margin-top:14px; font-size:14px; color:rgba(230,230,219,.6); max-width:56ch; line-height:1.5; }
.scroll-cue{ position:absolute; right:var(--gutter); bottom:clamp(40px,6vw,72px); z-index:1; writing-mode:vertical-rl; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:rgba(230,230,219,.6); display:none; }
@media (min-width:1300px){ .scroll-cue{ display:block; } }
.scroll-cue::after{ content:''; display:block; width:1px; height:60px; margin:14px auto 0; background:linear-gradient(var(--fern),transparent); animation:cue 2.4s var(--e-io) infinite; }
@keyframes cue{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

.hero-split{ display:grid; min-height:100svh; }
@media (min-width:1000px){ .hero-split{ grid-template-columns:1fr 1fr; } }
.hero-split .txt{ display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--header-h) + 48px) var(--gutter) clamp(40px,6vw,72px); }
.hero-split .ph{ position:relative; overflow:hidden; min-height:62vh; }
.hero-split .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.1); animation:kenburns 16s var(--e-out) forwards; }
.hero-split .ph::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,8,12,.5),transparent 40%); }
.hero-split .ph figcaption{ position:absolute; left:28px; bottom:24px; z-index:1; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
@media (max-width:999px){ .hero-split .ph{ order:-1; min-height:58vh; } .hero-split .txt{ padding-top:40px; } }
.hero-split .lead{ margin-top:28px; }
.hero-split .btns{ margin-top:clamp(32px,4vw,48px); }

.hero-type{ position:relative; overflow:hidden; padding:calc(var(--header-h) + clamp(72px,10vw,150px)) 0 clamp(56px,7vw,96px); }
.hero-type .key{ position:absolute; right:-6%; top:calc(var(--header-h) + 20px); width:min(40vw,560px); opacity:.85; pointer-events:none; transform:rotate(-16deg); }
@media (max-width:999px){ .hero-type .key{ width:60vw; right:-24%; opacity:.25; } }
.hero-type .wrap{ position:relative; z-index:1; }
.hero-type .h1,.hero-type .display{ max-width:14em; }
.hero-type .hero-meta .lead{ color:var(--muted); }

.crumbs{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:rgba(230,230,219,.6); margin-bottom:32px; }
.crumbs a:hover{ color:var(--fern); }
.crumbs i{ width:16px; height:1px; background:currentColor; opacity:.5; }

/* ---------- stats ---------- */
.stats{ display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
@media (min-width:1000px){ .stats{ grid-template-columns:repeat(var(--n,4),1fr); } }
.stat{ padding:28px 24px 8px 0; }
.stat+.stat{ padding-left:24px; border-left:1px solid var(--line); }
@media (max-width:999px){ .stat:nth-child(odd){ padding-left:0; border-left:0; } .stat:nth-child(n+3){ border-top:1px solid var(--line); } }
.stat b{ display:block; font-weight:200; font-size:clamp(40px,5.4vw,96px); line-height:.95; letter-spacing:-.03em; }
.stat span{ display:block; margin-top:14px; font-size:15px; line-height:1.45; color:var(--muted); max-width:26ch; }
.hero-full .stats{ margin-top:clamp(40px,5vw,64px); --line:rgba(230,230,219,.22); }

/* ---------- manifesto ---------- */
.manifesto{ font-weight:300; font-size:clamp(28px,3.7vw,62px); line-height:1.16; max-width:24ch; }
.manifesto .w{ opacity:.16; transition:opacity .4s; }
.manifesto .w.on{ opacity:1; }
.manifesto .w.ac{ color:var(--fern); }
.t-cream .manifesto .w.ac{ color:var(--fern-d); }

/* ---------- logo band ---------- */
.logoband{ background:var(--cream); color:var(--black); padding-block:clamp(36px,4vw,56px); overflow:hidden; }
.logoband .cap{ text-align:center; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(7,8,12,.6); margin-bottom:28px; padding-inline:var(--gutter); }
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee 50s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; align-items:center; gap:clamp(48px,6vw,96px); padding-right:clamp(48px,6vw,96px); }
.marquee-group img{ height:46px; width:auto; max-width:170px; object-fit:contain; filter:grayscale(1) contrast(1.1); opacity:.7; transition:filter .4s,opacity .4s; }
.marquee-group img.sq{ height:64px; }
.marquee-group img:hover{ filter:none; opacity:1; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.badges{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:28px; padding-inline:var(--gutter); }
.badges a,.badges span{ display:inline-flex; align-items:center; gap:12px; padding:10px 18px; border:1px solid rgba(7,8,12,.16); font-size:13px; letter-spacing:.06em; background:#fff; }
.badges img{ height:40px; width:auto; }

/* ---------- rows (services list) ---------- */
.rows{ border-top:1px solid var(--line); }
.row{ display:grid; gap:12px 32px; padding:clamp(26px,3vw,40px) 0; border-bottom:1px solid var(--line); align-items:center; transition:padding .5s var(--e-out); position:relative; }
@media (min-width:1000px){ .row{ grid-template-columns:96px minmax(0,6fr) minmax(0,5fr) 64px; } }
.row .n{ font-size:13px; letter-spacing:.2em; color:var(--fern); }
.t-cream .row .n,.t-cream2 .row .n{ color:var(--fern-d); }
.row h3{ font-weight:200; text-transform:uppercase; font-size:clamp(32px,4vw,68px); line-height:1; transition:color .3s; }
.row p{ color:var(--muted); font-size:16px; line-height:1.55; }
.row p b{ color:inherit; font-weight:500; }
.row .price{ display:block; margin-top:10px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--fern); }
.t-cream .row .price{ color:var(--fern-d); }
.row .ci{ width:56px; height:56px; border-radius:50%; border:1px solid var(--line-2); display:none; place-items:center; transition:background .3s,color .3s,transform .5s var(--e-out),border-color .3s; }
@media (min-width:1000px){ .row .ci{ display:grid; } }
.row .ci svg{ width:20px; height:20px; }
a.row:hover{ padding-left:24px; }
a.row:hover h3{ color:var(--fern); }
.t-cream a.row:hover h3{ color:var(--sapphire); }
a.row:hover .ci{ background:var(--fern); border-color:var(--fern); color:var(--black); transform:rotate(-45deg); }

/* ---------- list (reasons) ---------- */
.list{ list-style:none; border-top:1px solid var(--line); counter-reset:li; }
.list li{ display:grid; gap:8px 32px; padding:clamp(24px,2.6vw,36px) 0; border-bottom:1px solid var(--line); counter-increment:li; }
@media (min-width:1000px){ .list li{ grid-template-columns:72px minmax(0,5fr) minmax(0,6fr); } }
.list li::before{ content:counter(li,decimal-leading-zero); font-size:13px; letter-spacing:.2em; color:var(--fern); padding-top:6px; }
.t-cream .list li::before{ color:var(--fern-d); }
.list h3{ font-weight:400; font-size:clamp(20px,1.7vw,25px); line-height:1.3; text-transform:none; letter-spacing:0; }
.list p{ color:var(--muted); font-size:16px; }

/* ---------- cards ---------- */
.cards{ display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:700px){ .cards{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .cards--3{ grid-template-columns:repeat(3,1fr); } .cards--4{ grid-template-columns:repeat(4,1fr); } }
.cardx{ position:relative; padding:clamp(28px,2.8vw,44px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:14px; min-height:280px; transition:background .4s; }
.cardx:hover{ background:rgba(230,230,219,.035); }
.t-cream .cardx:hover,.t-cream2 .cardx:hover{ background:rgba(255,255,255,.5); }
.cardx .n{ font-size:13px; letter-spacing:.2em; color:var(--fern); margin-bottom:auto; padding-bottom:28px; }
.t-cream .cardx .n,.t-cream2 .cardx .n{ color:var(--fern-d); }
.cardx h3{ font-weight:400; font-size:clamp(20px,1.6vw,24px); line-height:1.25; letter-spacing:0; text-transform:none; }
.cardx p{ color:var(--muted); font-size:16px; line-height:1.55; }
.cardx .q{ margin-top:8px; padding-top:16px; border-top:1px solid var(--line); font-size:15px; color:var(--muted); }
.cardx .q b{ color:var(--fern); font-weight:500; }
.t-cream .cardx .q b{ color:var(--fern-d); }
.cardx .task{ font-style:italic; }
.cardx .start a{ text-decoration:underline; text-decoration-color:var(--fern); text-underline-offset:4px; }

/* ---------- steps ---------- */
.steps{ display:grid; border-top:1px solid var(--line); }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(var(--n,4),1fr); } }
.step{ padding:clamp(28px,3vw,40px) clamp(20px,2vw,32px) clamp(28px,3vw,40px) 0; border-bottom:1px solid var(--line); }
@media (min-width:1000px){ .step{ border-bottom:0; } .step+.step{ padding-left:clamp(20px,2vw,32px); border-left:1px solid var(--line); } }
.step .sn{ display:block; font-weight:200; font-size:clamp(64px,7vw,120px); line-height:.85; color:var(--fern); letter-spacing:-.04em; margin-bottom:28px; }
.t-cream .step .sn{ color:var(--fern-d); }
.step .tag{ display:inline-block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.step h3{ font-weight:400; font-size:clamp(20px,1.6vw,24px); line-height:1.25; text-transform:none; letter-spacing:0; margin-bottom:12px; }
.step p{ color:var(--muted); font-size:16px; }
.note{ margin-top:clamp(32px,4vw,56px); display:flex; gap:20px; align-items:flex-start; font-size:16px; color:var(--muted); max-width:80ch; }
.note::before{ content:''; width:40px; height:1px; background:var(--fern); margin-top:13px; flex-shrink:0; }

/* ---------- horizontal cases ---------- */
.hz{ position:relative; }
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){ .hz{ height:calc(var(--n,4) * 80vh + 20vh); } .hz-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; } }
.hz-head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:clamp(28px,3vw,44px); flex-wrap:wrap; }
.hz-track{ display:flex; gap:clamp(14px,1.6vw,24px); padding-inline:var(--gutter); will-change:transform; }
@media (max-width:999px),(prefers-reduced-motion:reduce){ .hz-track{ overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); padding-bottom:12px; scrollbar-width:none; } .hz-track::-webkit-scrollbar{ display:none; } .hz{ padding-block:var(--sec); } }
.hcard{ flex:0 0 min(84vw,780px); height:min(64vh,620px); min-height:440px; position:relative; overflow:hidden; padding:clamp(28px,3vw,48px); display:flex; flex-direction:column; justify-content:space-between; scroll-snap-align:start; transition:transform .6s var(--e-out); }
.hcard:hover{ transform:translateY(-6px); }
.hcard small{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.hcard .big{ font-weight:200; font-size:clamp(80px,12vw,210px); line-height:.82; letter-spacing:-.05em; white-space:nowrap; }
.hcard .bot{ display:flex; justify-content:space-between; align-items:end; gap:24px; }
.hcard .bot p{ max-width:36ch; font-size:17px; line-height:1.5; }
.hcard .lg{ position:absolute; right:clamp(28px,3vw,48px); top:clamp(24px,2.6vw,40px); background:#fff; padding:10px 16px; }
.hcard .lg img{ height:40px; width:auto; }
.hcard .key{ position:absolute; right:-60px; bottom:-40px; width:300px; opacity:.16; transform:rotate(24deg); pointer-events:none; }
.c-fern{ background:var(--fern); color:var(--black); }
.c-sapphire{ background:var(--sapphire); color:var(--cream); }
.c-cream{ background:var(--cream); color:var(--black); }
.c-ink{ background:var(--black-3); color:var(--cream); }

/* ---------- case grid ---------- */
.cgrid{ display:grid; gap:clamp(14px,1.6vw,24px); }
@media (min-width:900px){ .cgrid{ grid-template-columns:1fr 1fr; } }
.ccard{ position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:40px; min-height:clamp(480px,46vw,640px); padding:clamp(28px,3vw,48px); transition:transform .6s var(--e-out); }
.ccard:hover{ transform:translateY(-6px); }
.ccard .top{ display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.ccard small{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; max-width:30ch; line-height:1.5; }
.ccard .lg{ background:#fff; padding:8px 14px; flex-shrink:0; }
.ccard .lg img{ height:38px; width:auto; }
.ccard .lg--nda{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--black); padding:10px 14px; }
.ccard .big{ font-weight:200; font-size:clamp(80px,10vw,180px); line-height:.82; letter-spacing:-.05em; }
.ccard h3{ font-weight:300; font-size:clamp(22px,2vw,30px); line-height:1.2; text-transform:none; margin-top:16px; max-width:24ch; }
.ccard .mt{ display:flex; gap:28px; flex-wrap:wrap; padding-top:20px; border-top:1px solid currentColor; border-color:rgba(127,127,127,.35); font-size:14px; }
.ccard .mt b{ display:block; font-weight:300; font-size:26px; letter-spacing:-.02em; }
.ccard .more{ display:inline-flex; gap:10px; align-items:center; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.ccard .more svg{ width:16px; height:16px; transition:transform .4s var(--e-out); }
.ccard:hover .more svg{ transform:translateX(6px); }
.cgrid .is-filtered{ display:none; }
.filters{ display:flex; flex-wrap:wrap; gap:8px 32px; margin-bottom:clamp(32px,4vw,56px); border-bottom:1px solid var(--line); }
.filter{ padding:14px 0; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); position:relative; transition:color .25s; }
.filter::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--fern); transform:scaleX(0); transition:transform .4s var(--e-out); }
.filter:hover,.filter.is-active{ color:var(--cream); }
.filter.is-active::after{ transform:scaleX(1); }
.filter sup{ font-size:10px; margin-left:4px; color:var(--fern); }

/* ---------- photo split ---------- */
.splitp{ display:grid; min-height:90vh; }
@media (min-width:1000px){ .splitp{ grid-template-columns:1fr 1fr; } .splitp--rev .ph{ order:2; } }
.splitp .ph{ position:relative; overflow:hidden; min-height:60vh; }
.splitp .ph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.splitp .tx{ padding:clamp(48px,7vw,120px) var(--gutter); display:flex; flex-direction:column; justify-content:center; }
@media (min-width:1000px){ .splitp .tx{ padding-inline:clamp(48px,6vw,112px); } }
.splitp .tx .lead,.splitp .tx .prose{ margin-top:28px; }
.splitp .tx .btns{ margin-top:40px; }
.splitp .cap{ position:absolute; left:24px; bottom:20px; z-index:1; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.5); }

.photo-strip{ display:grid; gap:4px; grid-template-columns:repeat(3,1fr); }
.photo-strip figure{ position:relative; overflow:hidden; aspect-ratio:3/4; }
.photo-strip img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--e-out); }
.photo-strip figure:hover img{ transform:scale(1.05); }
@media (max-width:700px){ .photo-strip{ grid-template-columns:1fr 1fr; } .photo-strip figure:last-child{ display:none; } }

/* ---------- pricing ---------- */
.prices{ border-top:1px solid var(--line); }
.prow{ display:grid; gap:6px 32px; padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
@media (min-width:900px){ .prow{ grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr); } }
.prow b{ font-weight:400; font-size:clamp(19px,1.5vw,22px); }
.prow span{ color:var(--muted); font-size:15px; }
.prow em{ font-style:normal; font-weight:200; font-size:clamp(28px,2.6vw,42px); letter-spacing:-.02em; }
@media (min-width:900px){ .prow em{ text-align:right; } }
.prow--h{ padding:14px 0; } .prow--h span{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.pcards{ display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:900px){ .pcards{ grid-template-columns:repeat(var(--n,3),1fr); } }
.pcard{ padding:clamp(28px,3vw,44px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; }
.pcard.hi{ background:var(--fern); color:var(--black); --line:rgba(7,8,12,.18); --muted:rgba(7,8,12,.7); }
.pcard small{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.pcard .pp{ display:block; font-weight:200; font-size:clamp(48px,5vw,84px); line-height:.95; letter-spacing:-.03em; margin:22px 0 4px; }
.pcard .pp small{ font-size:15px; letter-spacing:0; text-transform:none; }
.pcard h3{ font-weight:400; font-size:clamp(19px,1.5vw,22px); line-height:1.3; text-transform:none; margin-top:14px; }
.pcard p{ margin-top:12px; color:var(--muted); font-size:15px; }
.pcard ul{ list-style:none; margin:22px 0 32px; display:grid; gap:10px; font-size:15px; }
.pcard li{ display:flex; gap:12px; }
.pcard li::before{ content:''; width:14px; height:1px; background:currentColor; margin-top:12px; flex-shrink:0; opacity:.6; }
.pcard .lbtn{ margin-top:auto; align-self:flex-start; }
.pcard.hi .lbtn{ border-color:var(--black); }
.pcard.hi .lbtn .ci{ background:var(--black); color:var(--cream); }
.pcard.hi .lbtn:hover{ color:var(--black); }
.price-table{ width:100%; border-collapse:collapse; margin:12px 0; font-size:15px; }
.price-table th,.price-table td{ text-align:left; padding:12px 12px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.price-table th{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:400; color:var(--muted); }
.price-table td:last-child{ white-space:nowrap; }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ margin:0; font-weight:400; font-size:clamp(18px,1.5vw,22px); line-height:1.35; text-transform:none; letter-spacing:0; }
.faq-btn{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:26px 0; text-align:left; transition:color .25s; }
.faq-btn:hover{ color:var(--fern); }
.t-cream .faq-btn:hover{ color:var(--sapphire); }
.faq-ic{ position:relative; width:44px; height:44px; flex-shrink:0; border:1px solid var(--line-2); border-radius:50%; transition:transform .5s var(--e-out),background .3s,border-color .3s; }
.faq-ic::before,.faq-ic::after{ content:''; position:absolute; left:50%; top:50%; width:14px; height:1px; margin-left:-7px; background:currentColor; transition:transform .5s var(--e-out); }
.faq-ic::after{ transform:rotate(90deg); }
.faq-item.is-open .faq-ic{ background:var(--fern); border-color:var(--fern); color:var(--black); transform:rotate(180deg); }
.faq-item.is-open .faq-ic::after{ transform:rotate(0); }
.faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--e-out); }
.faq-item.is-open .faq-a{ grid-template-rows:1fr; }
.faq-a>div{ overflow:hidden; }
.faq-a .prose{ padding:0 68px 28px 0; color:var(--muted); font-size:17px; }
@media (max-width:700px){ .faq-a .prose{ padding-right:0; } }
.faq-a .prose p+p,.faq-a .prose p+table,.faq-a .prose table+p{ margin-top:.9em; }
.faq-more{ display:inline-flex; margin-top:14px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--fern); }
.t-cream .faq-more{ color:var(--fern-d); }
.faq-n{ color:var(--fern); margin-right:12px; font-size:14px; letter-spacing:.1em; }
.t-cream .faq-n{ color:var(--fern-d); }
.faq-item.is-flash .faq-btn{ animation:flash 2s var(--e-out); }
@keyframes flash{ 0%{ color:var(--fern); } 100%{} }

.faq-layout{ display:grid; gap:40px; }
@media (min-width:1100px){ .faq-layout{ grid-template-columns:300px minmax(0,1fr); gap:96px; } }
.faq-nav{ position:sticky; top:calc(var(--header-h) + 24px); align-self:start; }
.faq-nav ol{ list-style:none; border-top:1px solid var(--line); }
.faq-nav a{ display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.35; color:var(--muted); transition:color .2s,padding .4s var(--e-out); }
.faq-nav a span{ font-size:12px; color:var(--fern-d); letter-spacing:.12em; min-width:22px; padding-top:2px; }
.faq-nav a:hover,.faq-nav a.is-active{ color:var(--black); padding-left:10px; }
.faq-nav a.is-active span{ color:var(--black); }
@media (max-width:1099px){
  .faq-nav{ top:calc(var(--header-h) - 1px); z-index:5; margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter); background:var(--cream); border-bottom:1px solid var(--line); }
  .faq-nav ol{ display:flex; overflow-x:auto; gap:28px; border:0; scrollbar-width:none; }
  .faq-nav ol::-webkit-scrollbar{ display:none; }
  .faq-nav a{ white-space:nowrap; border:0; padding:16px 0; }
  .faq-nav .label{ display:none; }
}
.faq-block{ scroll-margin-top:calc(var(--header-h) + 40px); }
.faq-block+.faq-block{ margin-top:clamp(64px,7vw,104px); }
.faq-block .faq-item{ scroll-margin-top:calc(var(--header-h) + 90px); }
.faq-block>h2{ margin-bottom:24px; }
.quick{ display:grid; border-top:1px solid var(--line); }
@media (min-width:700px){ .quick{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .quick{ grid-template-columns:repeat(5,1fr); } }
.quick a{ display:flex; flex-direction:column; justify-content:space-between; gap:20px; min-height:140px; padding:22px 20px 22px 0; border-bottom:1px solid var(--line); font-size:17px; line-height:1.35; transition:color .25s,padding .4s var(--e-out); }
@media (min-width:1100px){ .quick a{ padding-left:20px; border-left:1px solid var(--line); } .quick a:nth-child(5n+1){ border-left:0; padding-left:0; } }
.quick a span.n{ font-size:12px; letter-spacing:.18em; color:var(--fern); }
.quick a:hover{ color:var(--fern); }

/* ---------- CTA + forms ---------- */
.cta-full{ position:relative; overflow:hidden; }
.cta-full .bg{ position:absolute; inset:0; }
.cta-full .bg img{ width:100%; height:100%; object-fit:cover; opacity:.32; }
.cta-full::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,8,12,.92),rgba(7,8,12,.6)); z-index:0; }
.cta-full .wrap{ position:relative; z-index:1; }
.cta-grid{ display:grid; gap:clamp(40px,5vw,96px); }
@media (min-width:1000px){ .cta-grid{ grid-template-columns:minmax(0,6fr) minmax(0,5fr); align-items:start; } }
.cta-grid .lead{ margin-top:28px; color:rgba(230,230,219,.8); }
.cta-contacts{ display:grid; gap:10px; margin-top:40px; }
.cta-contacts a{ font-size:clamp(20px,1.8vw,26px); font-weight:300; transition:color .2s; width:max-content; max-width:100%; }
.cta-contacts a:hover{ color:var(--fern); }
.cta-person{ display:flex; gap:16px; align-items:center; margin-top:40px; padding-top:28px; border-top:1px solid var(--line); font-size:15px; }
.cta-person img{ width:60px; height:60px; border-radius:50%; object-fit:cover; object-position:50% 20%; }
.cta-person b{ display:block; font-weight:500; }
.cta-person span{ color:var(--muted); }

.form-card{ background:var(--cream); color:var(--black); padding:clamp(28px,3.4vw,52px); position:relative; --line:rgba(7,8,12,.2); --muted:rgba(7,8,12,.62); }
.form-card h3{ font-weight:200; text-transform:uppercase; font-size:clamp(28px,2.6vw,40px); margin-bottom:28px; }
.form-grid{ display:grid; gap:4px 24px; }
@media (min-width:640px){ .form-grid{ grid-template-columns:1fr 1fr; } .form-grid .full{ grid-column:1/-1; } }
.field{ position:relative; padding-top:18px; }
.field input,.field select,.field textarea{ width:100%; border:0; border-bottom:1px solid var(--line); background:transparent; padding:12px 0 12px; font-size:17px; border-radius:0; outline:none; transition:border-color .3s; appearance:none; -webkit-appearance:none; }
.field textarea{ min-height:96px; resize:vertical; }
.field select{ cursor:pointer; padding-right:28px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2307080C' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center/18px; }
.field label{ position:absolute; left:0; top:30px; font-size:17px; color:var(--muted); pointer-events:none; transform-origin:left top; transition:transform .35s var(--e-out),color .3s; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--black); }
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,.field select:focus+label,.field select.has-value+label{ transform:translateY(-24px) scale(.74); color:var(--black); letter-spacing:.04em; }
.field .req{ color:var(--fern-d); }
.field-err{ display:none; font-size:13px; color:#B4382A; margin-top:6px; }
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{ border-color:#B4382A; }
.field.is-invalid .field-err{ display:block; }
.form-foot{ display:grid; gap:20px; margin-top:28px; }
.consent{ display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; color:var(--muted); cursor:pointer; }
.consent input{ appearance:none; -webkit-appearance:none; width:20px; height:20px; margin:1px 0 0; flex-shrink:0; border:1px solid var(--black); display:grid; place-items:center; cursor:pointer; }
.consent input::after{ content:''; width:10px; height:10px; background:var(--black); transform:scale(0); transition:transform .25s var(--e-out); }
.consent input:checked::after{ transform:scale(1); }
.consent a{ text-decoration:underline; text-underline-offset:3px; }
.consent.is-invalid input{ border-color:#B4382A; }
.form-micro{ font-size:13.5px; color:var(--muted); line-height:1.5; }
.form-success{ display:none; padding:20px 0; }
.form-card.is-sent form{ display:none; }
.form-card.is-sent .form-success{ display:block; animation:fadeup .8s var(--e-out); }
.form-success .ok{ width:72px; height:72px; border-radius:50%; background:var(--fern); display:grid; place-items:center; margin-bottom:28px; }
.form-success .ok svg{ width:30px; height:30px; }
.form-success h3{ margin-bottom:12px; }
.form-success p{ color:var(--muted); }
@keyframes fadeup{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* ---------- reviews ---------- */
.reels{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr); gap:clamp(10px,1.2vw,18px); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.reels::-webkit-scrollbar{ display:none; }
@media (min-width:1000px){ .reels{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; } }
.reel{ position:relative; aspect-ratio:9/16; overflow:hidden; background:var(--black-3); color:#fff; text-align:left; scroll-snap-align:start; }
.reel img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.35); transition:transform 1.2s var(--e-out),filter .6s; }
.reel:hover img{ transform:scale(1.05); filter:none; }
.reel::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,8,12,.88),transparent 55%); }
.reel .pl{ position:absolute; z-index:1; left:50%; top:50%; width:76px; height:76px; margin:-38px; border-radius:50%; border:1px solid rgba(255,255,255,.6); display:grid; place-items:center; transition:background .3s,transform .5s var(--e-out),border-color .3s; }
.reel .pl svg{ width:22px; height:22px; margin-left:3px; }
.reel:hover .pl{ background:var(--fern); border-color:var(--fern); color:var(--black); transform:scale(1.08); }
.reel .cap{ position:absolute; z-index:1; left:20px; right:20px; bottom:20px; font-size:14px; line-height:1.4; }
.reel .cap b{ display:block; font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:400; margin-bottom:6px; color:var(--fern); }
.reel .dur{ position:absolute; z-index:1; top:16px; right:16px; font-size:12px; letter-spacing:.12em; }
.shots{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(190px,230px); gap:12px; overflow-x:auto; padding-bottom:12px; scrollbar-width:thin; scrollbar-color:var(--fern) transparent; }
.shot{ position:relative; display:block; aspect-ratio:9/17; overflow:hidden; background:var(--black-3); }
.shot img{ width:100%; height:100%; object-fit:cover; object-position:top; transition:transform .8s var(--e-out); }
.shot:hover img{ transform:scale(1.04); }
.letter{ display:grid; gap:40px; align-items:center; }
@media (min-width:900px){ .letter{ grid-template-columns:280px 1fr; gap:72px; } }
.letter a{ display:block; background:#fff; box-shadow:0 30px 60px rgba(0,0,0,.35); transform:rotate(-2deg); transition:transform .8s var(--e-out); }
.letter a:hover{ transform:rotate(0) scale(1.02); }
.quote{ font-weight:300; font-size:clamp(24px,2.6vw,40px); line-height:1.25; }
.quote-by{ margin-top:24px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- certificates / partners ---------- */
.certs{ display:grid; gap:2px; grid-template-columns:repeat(2,1fr); }
@media (min-width:800px){ .certs{ grid-template-columns:repeat(4,1fr); } }
.cert{ display:block; background:#fff; position:relative; overflow:hidden; }
.cert .ci{ aspect-ratio:4/3; overflow:hidden; }
.cert img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e-out); }
.cert:hover img{ transform:scale(1.05); }
.cert b{ display:block; padding:16px 16px 2px; font-weight:400; font-size:16px; }
.cert span{ display:block; padding:0 16px 16px; font-size:13px; color:rgba(7,8,12,.6); }
.partners{ display:grid; border-top:1px solid var(--line); }
@media (min-width:900px){ .partners{ grid-template-columns:repeat(2,1fr); } }
.partner{ display:flex; gap:28px; align-items:center; padding:28px 0; border-bottom:1px solid var(--line); }
@media (min-width:900px){ .partner:nth-child(even){ padding-left:40px; border-left:1px solid var(--line); } .partner:nth-child(odd){ padding-right:40px; } }
.partner .pl{ width:120px; height:80px; flex-shrink:0; background:#fff; display:grid; place-items:center; padding:10px; }
.partner .pl img{ max-height:60px; width:auto; }
.partner .pl b{ font-weight:300; font-size:14px; letter-spacing:.06em; text-transform:uppercase; text-align:center; color:var(--black); }
.partner h3{ font-weight:400; font-size:21px; text-transform:none; margin-bottom:6px; }
.partner p{ color:var(--muted); font-size:15px; }

/* ---------- contacts ---------- */
.cgrid-info{ display:grid; border-top:1px solid var(--line); }
@media (min-width:800px){ .cgrid-info{ grid-template-columns:repeat(3,1fr); } }
.ci-item{ padding:32px 32px 32px 0; border-bottom:1px solid var(--line); }
@media (min-width:800px){ .ci-item:not(:nth-child(3n+1)){ padding-left:32px; border-left:1px solid var(--line); } }
.ci-item small{ display:block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
.ci-item .v{ display:block; font-weight:300; font-size:clamp(20px,1.8vw,26px); line-height:1.3; }
.ci-item a.v:hover{ color:var(--fern); }
.ci-item p{ color:var(--muted); font-size:15px; margin-top:8px; }
.socials{ display:flex; flex-wrap:wrap; gap:10px; }
.socials a{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:background .3s,color .3s,border-color .3s; }
.socials a:hover{ background:var(--fern); border-color:var(--fern); color:var(--black); }
.socials svg{ width:19px; height:19px; }
.socials--lg a{ width:64px; height:64px; }
.socials--lg svg{ width:24px; height:24px; }

/* ---------- related ---------- */
.related{ display:grid; border-top:1px solid var(--line); }
@media (min-width:900px){ .related{ grid-template-columns:repeat(3,1fr); } }
.related a{ display:flex; flex-direction:column; gap:12px; padding:32px 32px 32px 0; border-bottom:1px solid var(--line); transition:color .25s; }
@media (min-width:900px){ .related a+a{ padding-left:32px; border-left:1px solid var(--line); } }
.related b{ font-weight:400; font-size:21px; }
.related p{ color:var(--muted); font-size:15px; }
.related .alink{ margin-top:auto; padding-top:12px; }
.related a:hover b{ color:var(--fern); }

/* ---------- case study page ---------- */
.cs-hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:calc(var(--header-h) + 40px) 0 clamp(40px,6vw,72px); overflow:hidden; }
.cs-hero .key{ position:absolute; right:-80px; top:12%; width:min(44vw,600px); opacity:.18; transform:rotate(18deg); pointer-events:none; }
.cs-hero .crumbs{ color:inherit; opacity:.7; }
.cs-top{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:28px; }
.cs-top .lg{ background:#fff; padding:10px 16px; }
.cs-top .lg img{ height:42px; width:auto; }
.cs-top .lg--nda{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--black); }
.cs-top small{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; }
.cs-big{ font-weight:200; font-size:clamp(110px,20vw,360px); line-height:.78; letter-spacing:-.06em; }
.cs-hero h1{ max-width:20em; margin-top:28px; font-weight:300; text-transform:none; font-size:clamp(26px,2.8vw,44px); line-height:1.15; }
.cs-meta{ display:flex; flex-wrap:wrap; gap:10px 40px; margin-top:28px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; }
.cs-meta span{ opacity:.8; }
.kpis{ --line:rgba(127,127,127,.35); }
.cs-block{ display:grid; gap:20px 64px; padding-block:clamp(48px,6vw,88px); border-bottom:1px solid var(--line); }
@media (min-width:1000px){ .cs-block{ grid-template-columns:4fr 8fr; } }
.cs-block .label{ margin:0; }
.cs-block h2{ font-weight:200; text-transform:uppercase; font-size:clamp(30px,3.4vw,56px); line-height:1; margin-bottom:24px; }
.cs-block .prose{ font-weight:300; font-size:clamp(18px,1.5vw,21px); line-height:1.6; color:var(--muted); }
.done{ list-style:none; border-top:1px solid var(--line); counter-reset:d; }
.done li{ display:grid; grid-template-columns:48px 1fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); counter-increment:d; font-size:17px; color:var(--muted); }
.done li::before{ content:counter(d,decimal-leading-zero); font-size:13px; letter-spacing:.16em; color:var(--fern-d); padding-top:4px; }
.done li b{ color:var(--black); font-weight:500; }
.done-cols{ display:grid; gap:40px; }
@media (min-width:900px){ .done-cols{ grid-template-columns:1fr 1fr; } }
.done-cols h3{ font-weight:300; text-transform:uppercase; font-size:26px; margin-bottom:16px; }
.result{ padding:clamp(28px,3.4vw,52px); background:var(--fern); color:var(--black); }
.result .quote{ font-weight:300; }
.result p{ margin-top:16px; font-size:17px; }

/* ---------- footer ---------- */
.footer{ background:var(--black); border-top:1px solid var(--line); overflow:hidden; }
.footer-top{ display:grid; gap:32px; padding-block:clamp(72px,9vw,140px) clamp(48px,6vw,80px); border-bottom:1px solid var(--line); }
@media (min-width:1000px){ .footer-top{ grid-template-columns:1fr auto; align-items:end; } }
.footer-top h2{ font-weight:200; text-transform:uppercase; font-size:clamp(44px,7.4vw,132px); line-height:.88; }
.footer-cols{ display:grid; gap:40px; padding-block:clamp(48px,5vw,72px); }
@media (min-width:760px){ .footer-cols{ grid-template-columns:1fr 1fr; } }
@media (min-width:1100px){ .footer-cols{ grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:56px; } }
.footer-brand img{ height:46px; width:auto; }
.footer-brand p{ margin-top:22px; font-size:15px; color:var(--muted); max-width:30ch; }
.footer-brand .socials{ margin-top:24px; }
.footer h4{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--fern); font-weight:400; margin-bottom:20px; }
.footer ul{ list-style:none; display:grid; gap:12px; }
.footer ul a{ font-size:16px; color:var(--muted); transition:color .2s; }
.footer ul a:hover{ color:var(--cream); }
.f-contact a{ display:block; font-weight:300; font-size:22px; transition:color .2s; }
.f-contact a:hover{ color:var(--fern); }
.f-contact p{ margin-top:16px; font-size:14px; color:var(--muted); }
.f-partners{ display:flex; gap:10px; margin-top:20px; }
.f-partners span,.f-partners a{ background:#fff; height:56px; padding:6px 12px; display:flex; align-items:center; }
.f-partners img{ height:40px; width:auto; }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 32px; padding-block:24px; border-top:1px solid var(--line); font-size:13px; letter-spacing:.06em; color:var(--muted); }
.footer-bottom a:hover{ color:var(--cream); }
.footer-word{ font-weight:200; text-transform:uppercase; font-size:clamp(64px,16.4vw,300px); line-height:.76; letter-spacing:-.04em; white-space:nowrap; text-align:center; color:rgba(230,230,219,.07); margin-bottom:-.1em; user-select:none; }

/* ---------- lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:900; display:grid; place-items:center; padding:clamp(16px,4vw,48px); background:rgba(7,8,12,.94); opacity:0; visibility:hidden; transition:opacity .35s,visibility 0s .35s; }
.lightbox.is-open{ opacity:1; visibility:visible; transition:opacity .35s,visibility 0s; }
.lightbox-stage{ display:grid; place-items:center; max-width:min(1100px,100%); }
.lightbox-stage img{ max-height:calc(100vh - 140px); width:auto; background:#fff; }
.lightbox-stage video{ max-height:calc(100vh - 120px); max-width:100%; width:auto; aspect-ratio:9/16; background:#000; }
.lightbox-cap{ margin-top:14px; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-align:center; }
.lb-btn{ position:fixed; width:56px; height:56px; border-radius:50%; border:1px solid var(--line-2); color:var(--cream); display:grid; place-items:center; transition:background .25s,color .25s; z-index:2; }
.lb-btn:hover{ background:var(--fern); color:var(--black); border-color:var(--fern); }
.lb-btn svg{ width:22px; height:22px; }
.lb-close{ top:20px; right:20px; } .lb-prev{ left:20px; top:50%; margin-top:-28px; } .lb-next{ right:20px; top:50%; margin-top:-28px; }
@media (max-width:640px){ .lb-prev,.lb-next{ top:auto; bottom:20px; margin:0; } }

/* ---------- 404 / legal ---------- */
.nf{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:calc(var(--header-h) + 40px) var(--gutter) 80px; position:relative; overflow:hidden; }
.nf .key{ width:min(64vw,460px); margin:0 auto 20px; animation:keyturn 7s var(--e-io) infinite; }
@keyframes keyturn{ 0%,100%{ transform:rotate(-14deg); } 50%{ transform:rotate(-4deg) translateY(-8px); } }
.legal h2{ font-weight:200; text-transform:uppercase; font-size:clamp(26px,2.4vw,36px); margin:48px 0 16px; }
.legal p,.legal li{ color:var(--muted); }
.legal ul{ padding-left:1.2em; display:grid; gap:8px; margin-top:12px; }

/* ---------- motion ---------- */
.js [data-reveal]{ opacity:0; transform:translate3d(0,40px,0); transition:opacity 1.1s var(--e-out),transform 1.2s var(--e-out); transition-delay:calc(var(--d,0) * 1ms + var(--i,0) * 90ms); }
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal="img"]{ opacity:1; transform:none; clip-path:inset(100% 0 0 0); transition:clip-path 1.4s var(--e-io); }
.js [data-reveal="img"] img{ transform:scale(1.2); transition:transform 1.8s var(--e-out); }
.js [data-reveal].is-in{ opacity:1; transform:none; }
.js [data-reveal="img"].is-in{ clip-path:inset(0 0 0 0); }
.js [data-reveal="img"].is-in img{ transform:none; }
.split-w{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.split-i{ display:inline-block; transform:translate3d(0,108%,0); transition:transform 1.2s var(--e-out); transition-delay:calc(var(--w,0) * 50ms + 100ms); }
.is-split.is-in .split-i{ transform:none; }
[data-parallax]{ will-change:transform; }
/* Reduced motion: no movement, zoom, parallax or looping animation — only gentle opacity fades remain. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; }
  .js [data-reveal],.js [data-reveal="img"]{ transform:none; clip-path:none; transition:opacity .9s ease; transition-delay:calc(var(--i,0) * 80ms); }
  .js [data-reveal="img"]{ opacity:0; }
  .js [data-reveal="img"].is-in{ opacity:1; }
  .js [data-reveal="img"] img,.hero-full .bg img,.hero-split .ph img{ transform:none; }
  .split-i{ transform:none; }
  .manifesto .w{ opacity:1; }
  .lbtn:hover .ci,a.row:hover .ci{ transform:none; }
  .menu,.menu.is-open{ transition:opacity .3s ease,visibility 0s; clip-path:none; opacity:0; }
  .menu.is-open{ opacity:1; }
  .menu-main a,.menu-side{ transform:none!important; }
}

/* ---------- page-level helpers ---------- */
.hero-h1{ font-weight:400; font-size:clamp(19px,1.7vw,26px); line-height:1.35; text-transform:none; letter-spacing:0; max-width:34ch; margin-bottom:14px; color:var(--cream); }
.hero-points{ list-style:none; margin-top:clamp(32px,4vw,48px); border-top:1px solid var(--line); }
.hero-points li{ display:grid; grid-template-columns:48px 1fr; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); counter-increment:hp; }
.hero-points{ counter-reset:hp; }
.hero-points li::before{ content:counter(hp,decimal-leading-zero); font-size:13px; letter-spacing:.18em; color:var(--fern); padding-top:3px; }
.hero-points b{ display:block; font-weight:500; font-size:17px; }
.hero-points span{ color:var(--muted); font-size:15px; }
.t-cream .form-card,.t-cream2 .form-card{ background:#fff; }
.t-fern .cardx:hover{ background:rgba(255,255,255,.18); }
.t-fern .cardx .n{ color:var(--black); }
.t-sapphire .list li::before,.t-sapphire .row .n{ color:var(--fern); }
.t-sapphire .lbtn .ci{ background:var(--fern); color:var(--black); }
.ui-shot{ background:#fff; padding:clamp(8px,1vw,14px); }
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chips span{ padding:10px 16px; border:1px solid var(--line-2); font-size:14px; letter-spacing:.06em; }
.c-fern,.c-cream{ --line:rgba(7,8,12,.2); --line-2:rgba(7,8,12,.32); --muted:rgba(7,8,12,.68); }
.c-sapphire,.c-ink{ --line:rgba(230,230,219,.22); --muted:rgba(230,230,219,.72); }
.cs-hero .crumbs{ color:inherit; }
.hcard small{ display:block; max-width:calc(100% - 200px); line-height:1.5; }
@media (max-width:600px){ .hcard small{ max-width:none; margin-top:64px; } }
.faq-layout>*,.cta-grid>*,.hero-meta>*{ min-width:0; }
.hero-split .ph::before{ content:''; position:absolute; inset:0 0 auto; height:180px; z-index:1; background:linear-gradient(rgba(7,8,12,.6),transparent); pointer-events:none; }

/* =====================================================================
   v4.1 — fixes from the UX review (carried over from v5.1),
   drawn in the Cinematic language: hairlines, outlined circles, thin type
   ===================================================================== */

/* line icons on cards and service rows (picked from the title by autoIcon in lib.mjs) */
.cardx .ic,.row .ic{ width:56px; height:56px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; color:var(--fern); flex-shrink:0; transition:background .3s,color .3s,border-color .3s; }
.cardx .ic svg,.row .ic svg{ width:22px; height:22px; }
.cardx .ic{ margin-bottom:auto; }
.cardx{ gap:14px; }
.cardx .ic+h3{ margin-top:28px; }
:is(.t-cream,.t-cream2) :is(.cardx,.row) .ic{ color:var(--fern-d); }
.t-fern .cardx .ic{ color:var(--black); border-color:rgba(7,8,12,.32); }
a.row:hover .ic{ border-color:var(--fern); }

/* case cards: which channels the case used */
.ccard .top>div{ display:grid; gap:16px; align-content:start; }
.chans{ display:flex; flex-wrap:wrap; gap:8px; }
.chans span{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px 6px 10px; border:1px solid currentColor; border-color:rgba(127,127,127,.45); font-size:12px; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
.chans svg{ width:15px; height:15px; }

/* long display headings drop the capitals so they stay readable (layout() adds .is-long above 40 characters) */
:is(.display,.h1,.h2).is-long{ text-transform:none; letter-spacing:-.01em; }

/* one primary button after the process steps */
.mid-cta{ display:flex; margin-top:clamp(40px,5vw,72px); }

/* review screenshots fold away behind a toggle */
.proof summary{ display:inline-flex; align-items:center; gap:12px; min-height:44px; padding-bottom:4px; border-bottom:1px solid var(--fern); font-size:13px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; list-style:none; transition:color .25s; }
.proof summary::-webkit-details-marker{ display:none; }
.proof summary svg{ width:16px; height:16px; transition:transform .4s var(--e-out); }
.proof[open] summary svg{ transform:rotate(90deg); }
.proof summary:hover{ color:var(--fern); }
.proof .shots{ margin-top:24px; }

/* written quotes with name and context, linked to the original message */
.quotes{ display:grid; border-top:1px solid var(--line); border-left:1px solid var(--line); }
@media (min-width:768px){ .quotes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.qcard{ display:flex; flex-direction:column; justify-content:space-between; gap:32px; margin:0; padding:clamp(28px,3vw,48px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.qcard blockquote{ margin:0; font-weight:300; font-size:clamp(20px,1.7vw,27px); line-height:1.4; }
.qcard figcaption{ display:grid; gap:4px; padding-top:20px; border-top:1px solid var(--line); font-size:15px; }
.qcard figcaption b{ font-weight:500; font-size:16px; }
.qcard figcaption span{ color:var(--muted); }
.qcard figcaption a{ display:inline-flex; align-items:center; gap:8px; justify-self:start; min-height:44px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--fern); transition:gap .35s var(--e-out); }
.qcard figcaption a:hover{ gap:14px; }
.qcard figcaption a svg{ width:14px; height:14px; }
.t-cream .qcard figcaption a,.t-cream2 .qcard figcaption a{ color:var(--fern-d); }

/* opening hours next to the form */
.cta-hours{ margin-top:16px; font-size:14px; color:var(--muted); }

/* header: the audit button stays visible on phones */
.hdr-audit{ display:inline-flex; }
.hdr-audit .t-s{ display:none; }
@media (min-width:1100px) and (max-width:1299px){ .hdr-audit .t-l{ display:none; } .hdr-audit .t-s{ display:inline; } }
@media (max-width:719px){
  .header .wrap{ gap:12px; }
  .logo img{ height:34px; }
  .hdr-right{ gap:12px; }
  .menu-btn .mb-t{ display:none; }
  .hdr-audit{ height:44px; gap:8px; padding:0 8px 0 16px; border-radius:22px; background:var(--fern); color:var(--black); letter-spacing:.14em; }
  .hdr-audit .t-l{ display:none; } .hdr-audit .t-s{ display:inline; }
  .hdr-audit i{ width:28px; height:28px; background:var(--black); color:var(--fern); }
  .hdr-audit i svg{ width:13px; height:13px; }
  body.menu-open .hdr-audit{ visibility:hidden; }
}
@media (max-width:399px){ .logo img{ height:30px; } .hdr-audit{ padding-right:16px; } .hdr-audit i{ display:none; } }

/* 44px touch targets without changing the look */
.alink,.cta-contacts a,.ci-item a.v,.footer ul a,.f-contact a,.crumbs a{ position:relative; }
.alink::after,.cta-contacts a::after,.ci-item a.v::after,.footer ul a::after,.f-contact a::after,.crumbs a::after{ content:''; position:absolute; inset:-10px -4px; }
.consent{ min-height:44px; align-items:center; }
.consent input{ width:24px; height:24px; margin:0; }
.consent input::after{ width:12px; height:12px; }

/* focus ring stays visible on the green panels */
.t-fern :focus-visible,.c-fern:focus-visible,.c-fern :focus-visible,.pcard.hi :focus-visible{ outline-color:var(--black); }

/* phones: card groups become swipe rows (the next card peeks in); service rows and footer get compact */
@media (max-width:767px){
  .cards,.steps,.quotes{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); scrollbar-width:none; }
  .cards::-webkit-scrollbar,.steps::-webkit-scrollbar,.quotes::-webkit-scrollbar{ display:none; }
  .cards>*,.steps>*,.quotes>*{ scroll-snap-align:start; }
  .cards,.quotes{ border-left:0; }
  .cardx:first-child,.qcard:first-child{ border-left:1px solid var(--line); }
  .cardx{ min-height:0; }
  .step{ border-bottom:0; }
  .step+.step{ padding-left:20px; border-left:1px solid var(--line); }
  .row{ grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:10px; }
  .row .ic{ width:44px; height:44px; }
  .row .ic svg{ width:18px; height:18px; }
  .row h3{ font-size:clamp(26px,8vw,34px); }
  .row p{ grid-column:1 / -1; }
  .footer-cols{ grid-template-columns:1fr 1fr; }
  .footer-brand,.f-contact{ grid-column:1 / -1; }
  .footer ul{ gap:0; }
  .footer ul a{ display:inline-block; padding:12px 0; }
  .footer ul a::after{ display:none; }
}

/* long trust figures («$1 500 000+») need the full width on narrow phones */
@media (max-width:479px){
  .stats{ grid-template-columns:1fr; }
  .stat,.stat+.stat,.stat:nth-child(odd){ padding:22px 0 8px; border-left:0; }
  .stat+.stat{ border-top:1px solid var(--line); }
}
/* an odd last case card spans the full row instead of sitting alone */
@media (min-width:900px){ .cgrid>.ccard:last-child:nth-child(odd){ grid-column:1 / -1; min-height:clamp(380px,30vw,480px); } }

/* doc-exact trust strip: wording that precedes the number ("запуск за", "кейс з виходом на оборот") */
.stat .pre{ margin:0 0 10px; }
/* homepage "Останні публікації" (the blog block carried over from the current site) */
.posts{ display:grid; gap:0; border-top:1px solid var(--line); }
@media (min-width:900px){ .posts{ grid-template-columns:repeat(3,1fr); } .posts a+a{ border-left:1px solid var(--line); } }
.posts a{ display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:220px; padding:28px 28px 28px 0; border-bottom:1px solid var(--line); }
@media (min-width:900px){ .posts a+a{ padding-left:28px; } }
.posts b{ font-weight:300; font-size:clamp(20px,1.7vw,26px); line-height:1.25; }
.posts a:hover b{ color:var(--accent,#72B490); }
/* page-level closing strip from the About doc ("Підвал сторінки") */
.about-foot .grid2{ align-items:end; }
.about-foot .sub{ display:flex; gap:12px; margin-top:20px; max-width:520px; }
.about-foot .sub input{ flex:1; min-width:0; height:56px; padding:0 20px; border-radius:999px; border:1px solid var(--line); background:transparent; color:inherit; font:inherit; }
.about-foot .contacts a{ display:block; font-size:clamp(20px,1.8vw,28px); font-weight:300; }
.about-foot .sub.is-sent input,.about-foot .sub.is-sent .lbtn{ opacity:.45; pointer-events:none; }
@media (max-width:560px){ .about-foot .sub{ flex-direction:column; align-items:flex-start; } .about-foot .sub input{ width:100%; flex:none; } }

/* ===================== v4.2: calmer hierarchy, one hero pattern ===================== */
/* eyebrows and breadcrumbs in sentence case: small, quiet, not competing with the heading */
.label{ font-size:15px; letter-spacing:.01em; text-transform:none; margin-bottom:24px; }
.crumbs{ font-size:13px; letter-spacing:.01em; text-transform:none; }
/* one heading scale: H1 in every hero, section H2 a step below */
.hero-full .h1,.hero-split .h1,.hero-type .h1{ font-size:clamp(34px,4vw,64px); line-height:1.04; max-width:17em; }
.h2{ font-size:clamp(32px,4.2vw,72px); }
/* hero: a single reading column — eyebrow, H1, lead, button + microtext — closed by the trust strip */
.hero-col{ max-width:min(100%,980px); }
.hero-lead{ margin-top:clamp(20px,2.4vw,32px); font-size:clamp(17px,1.35vw,20px); max-width:54ch; }
.hero-full .hero-lead{ color:rgba(230,230,219,.84); }
.hero-act{ margin-top:clamp(28px,3vw,40px); }
.hero-act .hero-micro,.hero-col>.hero-micro{ margin-top:16px; max-width:46ch; font-size:13.5px; }
.hero-split .lead,.hero-split .btns{ margin-top:0; }
.hero-split .hero-lead{ margin-top:clamp(20px,2.4vw,32px); }
.hero-full::after{ background:linear-gradient(90deg,rgba(7,8,12,.86) 0%,rgba(7,8,12,.6) 42%,rgba(7,8,12,.08) 78%),linear-gradient(0deg,rgba(7,8,12,.88),rgba(7,8,12,0) 42%); }
.hero-full .wrap{ padding-bottom:clamp(32px,4vw,48px); }
.scroll-cue{ display:none !important; }
/* trust strip: the doc's «плашка довіри» as one compact row of facts, numbers emphasised in reading order */
.trust{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:clamp(40px,5vw,72px); border-top:1px solid var(--line-2); }
@media (min-width:1000px){ .trust{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); } }
.trust li{ padding:18px 20px 0 0; font-size:14.5px; line-height:1.5; color:var(--muted); }
.trust li+li{ padding-left:20px; border-left:1px solid var(--line); }
@media (max-width:999px){ .trust li:nth-child(odd){ padding-left:0; border-left:0; } .trust li:nth-child(n+3){ margin-top:18px; border-top:1px solid var(--line); } }
.trust b{ font-weight:500; color:var(--cream); white-space:nowrap; }
.hero-full .trust{ --line:rgba(230,230,219,.2); --line-2:rgba(230,230,219,.3); }
.hero-split .trust{ margin-top:clamp(36px,4vw,56px); }
/* two sections of the same tone in a row read as one block: a hairline marks the change of topic instead */
.sec.t-cream+.sec.t-cream{ padding-top:0; }
.sec.t-cream+.sec.t-cream>.wrap{ border-top:1px solid var(--line); padding-top:clamp(64px,8vw,128px); }
/* case cards that carry the doc's own description */
.ccard .cd{ margin-top:16px; font-size:16px; line-height:1.55; opacity:.8; max-width:52ch; }
@media (min-width:1000px){ .hero-full .hero-col{ max-width:min(980px,60%); } }

/* =====================================================================
   v4.3: Promodo-style heroes. Hero = H1, lead, one solid button (+ crumbs inside).
   Trust strip and microtext live in the .proof band right under the hero.
   ===================================================================== */
.hero-act .lbtn{ min-height:60px; padding:0 14px 0 30px; gap:16px; border:0; border-radius:8px; background:var(--fern); color:var(--black); font-weight:500; letter-spacing:.12em; transition:background .3s; }
.hero-act .lbtn .ci{ width:34px; height:34px; background:rgba(7,8,12,.12); color:var(--black); }
.hero-act .lbtn .ci svg{ width:16px; height:16px; }
.hero-act .lbtn:hover{ background:var(--fern-l); color:var(--black); }
.hero-act{ margin-top:clamp(28px,3vw,40px); }

/* home: centred stage */
.hero-c{ position:relative; overflow:hidden; min-height:100svh; display:flex; flex-direction:column; padding-top:var(--header-h);
  background:radial-gradient(60% 46% at 50% 108%,rgba(114,180,144,.28),transparent 72%),radial-gradient(90% 70% at 50% 120%,rgba(10,33,101,.95),transparent 70%),var(--black); }
.hero-c::before{ content:''; position:absolute; inset:auto 0 0; height:62%; pointer-events:none;
  background-image:linear-gradient(90deg,rgba(114,180,144,.13),rgba(114,180,144,0) 70%); background-size:calc(100% / 12) 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 10%,transparent); mask-image:linear-gradient(0deg,#000 10%,transparent); }
.hero-c__copy{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:clamp(40px,7vh,88px) clamp(32px,5vh,64px); }
.hero-c .label{ margin-bottom:22px; }
.hero-c .h1{ font-size:clamp(32px,4vw,62px); line-height:1.06; max-width:19em; }
.hero-c .hero-lead{ max-width:58ch; margin-inline:auto; color:rgba(230,230,219,.8); }
.hero-c__logos{ position:relative; z-index:1; padding-bottom:clamp(28px,4vh,44px); }
.hero-c__logos .cap{ text-align:center; font-size:13px; color:var(--muted); margin-bottom:20px; padding-inline:var(--gutter); }
.hero-c__logos .marquee-group img{ filter:grayscale(1) invert(1) contrast(1.25); mix-blend-mode:screen; opacity:.62; height:38px; }
.hero-c__logos .marquee-group img.sq{ height:52px; }
.hero-c__logos .marquee-group img:hover{ filter:grayscale(1) invert(1) contrast(1.25); opacity:.95; }

.tiles{ position:absolute; inset:0; pointer-events:none; }
.tile{ position:absolute; width:clamp(72px,7.4vw,118px); aspect-ratio:1; border-radius:24%; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(230,230,219,.18),rgba(230,230,219,.03) 60%); border:1px solid rgba(230,230,219,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -12px 24px rgba(114,180,144,.12),0 30px 60px -24px rgba(0,0,0,.8),0 0 50px -18px rgba(114,180,144,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:tilefloat 7s ease-in-out infinite alternate; }
.tile svg{ width:44%; height:44%; fill:var(--cream); opacity:.88; }
.tile--1{ left:8%; top:24%; --r:-12deg; }
.tile--2{ left:12%; bottom:30%; --r:9deg; width:clamp(84px,8.6vw,136px); animation-delay:-2s; }
.tile--3{ right:11%; bottom:31%; --r:-8deg; animation-delay:-4s; }
.tile--4{ right:7%; top:21%; --r:13deg; width:clamp(64px,6.2vw,98px); animation-delay:-1s; }
@keyframes tilefloat{ from{ transform:rotate(var(--r)) translateY(0); } to{ transform:rotate(var(--r)) translateY(-14px); } }
@media (prefers-reduced-motion:reduce){ .tile{ animation:none; transform:rotate(var(--r)); } }
@media (max-width:1099px){ .tile--2,.tile--3{ display:none; } .tile--1{ left:4%; top:16%; } .tile--4{ right:4%; top:14%; } }
@media (max-width:759px){ .tiles{ display:none; } }

/* inner pages: copy left, rounded photo card right */
.hero-s{ padding:calc(var(--header-h) + clamp(28px,4vw,56px)) 0 clamp(48px,6vw,80px); }
.hero-s__grid{ display:grid; gap:clamp(36px,4vw,72px); align-items:center; }
@media (min-width:1000px){ .hero-s__grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); } }
.hero-s .h1{ font-size:clamp(32px,3.5vw,56px); line-height:1.06; max-width:15em; }
.hero-s .hero-lead{ max-width:52ch; }
.hero-s__card{ position:relative; margin:0; border-radius:22px; overflow:hidden; aspect-ratio:1/1; max-height:calc(100svh - var(--header-h) - 96px); background:var(--black-3); }
.hero-s__card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-s__card::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,8,12,.45),transparent 40%); pointer-events:none; }
.chip{ position:absolute; z-index:1; left:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); max-width:calc(100% - 32px); display:flex; align-items:center; gap:14px; padding:12px 22px 12px 12px; border-radius:14px; background:var(--cream); color:var(--black); box-shadow:0 24px 48px -16px rgba(0,0,0,.6); }
.chip .ci{ width:44px; height:44px; flex-shrink:0; border-radius:10px; display:grid; place-items:center; background:var(--fern); color:var(--black); }
.chip .ci svg{ width:22px; height:22px; }
.chip b{ display:block; font-size:22px; font-weight:500; line-height:1.15; }
.chip small{ display:block; font-size:13.5px; line-height:1.35; color:rgba(7,8,12,.68); }
@media (max-width:999px){ .hero-s__card{ aspect-ratio:4/3; max-height:none; } }

/* proof band under every hero */
.hero-proof{ border-bottom:1px solid var(--line); }
.hero-proof .wrap{ padding-block:clamp(26px,3vw,40px); display:grid; gap:18px; }
.hero-proof .trust{ margin-top:0; border-top:0; }
.hero-proof .trust li{ padding-top:0; }
@media (max-width:999px){ .hero-proof .trust li:nth-child(n+3){ padding-top:18px; } }
.proof-note{ font-size:14px; line-height:1.55; color:var(--muted); max-width:72ch; }
.hero-proof .trust+.proof-note{ padding-top:18px; border-top:1px solid var(--line); max-width:none; }
.hero-type+.hero-proof{ border-top:1px solid var(--line); }
.hero-c .label{ text-align:center; }
.hero-c .label::before{ display:none; }
@media (max-width:559px){ .hero-act .lbtn{ width:100%; justify-content:space-between; letter-spacing:.08em; padding-left:22px; } }

/* =====================================================================
   v4.4: client feedback (video review, Oct 2026)
   Sturdier type (Fixel instead of thin Jost), white light sections,
   compact home blocks, express-audit popup, calmer phones.
   ===================================================================== */

/* type: one superfamily — Fixel Display SemiBold for headings and numbers, Fixel Text for reading */
:is(h1,h2,.display,.h1,.h2,.h3,.row h3,.stat b,.step .sn,.hcard .big,.ccard .big,.cs-big,.footer-top h2,.footer-word,.menu-main a,.form-card h3,.cs-block h2,.legal h2,.prow em,.pcard .pp,.done-cols h3,.trust b,.chip b,.modal-t){ font-family:var(--fd); font-weight:600; letter-spacing:-.02em; }
:is(.cardx h3,.step h3,.list h3,.faq-q,.ccard h3,.posts b,.related b,.partner h3,.prow b,.pcard h3,.cs-hero h1){ font-weight:500; }
.h1,.h2,.display{ line-height:1.02; }
.h2{ font-size:clamp(30px,3.6vw,58px); }
.h2--s{ font-size:clamp(26px,2.8vw,44px); }
.hero-c .h1{ font-size:clamp(30px,3.5vw,54px); line-height:1.08; }
.hero-s .h1,.hero-full .h1,.hero-split .h1,.hero-type .h1{ font-size:clamp(30px,3.1vw,50px); line-height:1.08; }
.hcard .big{ font-size:clamp(72px,10vw,176px); }
.ccard .big{ font-size:clamp(72px,8.4vw,150px); }
.cs-big{ font-size:clamp(96px,16vw,290px); }
.footer-top h2{ font-size:clamp(40px,6vw,104px); line-height:.96; }
.menu-main a{ font-size:clamp(36px,5.4vw,84px); }
.footer-word{ letter-spacing:-.03em; }
.hero-c .h1 .accent{ color:var(--fern); }

/* clickable things stand out from body text */
.alink{ color:var(--fern); font-weight:500; }
:is(.t-cream,.t-cream2,.c-cream,.modal-box) .alink{ color:var(--sapphire); }
:is(.t-fern,.c-fern) .alink{ color:var(--black); }
.alink:hover{ color:var(--cream); }
:is(.t-cream,.t-cream2,.c-cream) .alink:hover{ color:var(--fern-d); }
:is(.t-fern,.c-fern) .alink:hover{ color:var(--sapphire); }
.lbtn{ font-weight:500; }

/* light sections: clean white instead of the milky cream; the principles panel in a lighter fern */
.t-cream,.logoband{ background:#fff; }
.t-cream .cardx:hover,.t-cream2 .cardx:hover{ background:#F4F6F4; }
.form-card{ background:#fff; }
.t-fern{ background:var(--fern-l); }
@media (max-width:1099px){ .faq-nav{ background:#fff; } }

/* proof band: the numbers get real size */
.hero-proof .trust li{ display:flex; flex-direction:column; font-size:14.5px; }
.trust .pre{ font-size:13.5px; line-height:1.4; }
.trust b{ display:block; margin:6px 0 8px; font-size:clamp(28px,3vw,46px); line-height:1; color:var(--cream); }

/* cards: titles on one line across the row, icons larger, the case quote sits at the bottom */
.cardx{ min-height:0; }
.cardx .ic{ margin-bottom:0; }
.cardx .ic+h3{ margin-top:22px; }
.cardx .q{ margin-top:auto; }
.cardx .ic,.row .ic{ width:68px; height:68px; }
.cardx .ic svg,.row .ic svg{ width:28px; height:28px; }

/* services list: smaller titles (no three-line wraps), tighter rows */
.row{ padding:clamp(18px,2vw,28px) 0; }
@media (min-width:1000px){ .row{ grid-template-columns:88px minmax(0,5fr) minmax(0,6fr) 56px; } }
.row h3{ font-size:clamp(24px,2.3vw,38px); line-height:1.08; }
.row p{ font-size:15.5px; }

/* process steps: 2 × 2 with the number beside the text — fewer lines per step, less height */
@media (min-width:1000px){
  .steps{ grid-template-columns:1fr 1fr; }
  .step{ display:grid; grid-template-columns:clamp(64px,5.6vw,92px) minmax(0,1fr); column-gap:24px; align-content:start; padding:clamp(24px,2.4vw,36px) clamp(24px,2.4vw,36px) clamp(24px,2.4vw,36px) 0; border-bottom:1px solid var(--line); }
  .step+.step{ padding-left:0; border-left:0; }
  .step:nth-child(even){ padding-left:clamp(24px,2.4vw,36px); border-left:1px solid var(--line); }
  .step .sn{ grid-row:1 / span 3; font-size:clamp(44px,4vw,64px); margin:0; }
  .step>:not(.sn){ grid-column:2; }
}
.step p{ font-size:15.5px; }

/* partners band (home) */
.pband{ padding-block:clamp(64px,7vw,112px); }
.pband-in{ display:grid; gap:28px 64px; }
@media (min-width:1000px){ .pband-in{ grid-template-columns:5fr 6fr; align-items:end; } }
.pband .badges{ justify-content:flex-start; padding:0; margin-top:28px; }
.pband .badges a,.pband .badges span{ min-height:64px; }

/* socials next to the contacts in the closing block */
.cta-socials{ margin-top:24px; }

/* express-audit popup */
.modal{ position:fixed; inset:0; z-index:800; display:grid; place-items:center; padding:16px; background:rgba(7,8,12,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .35s; }
.modal[hidden]{ display:none; }
.modal.is-open{ opacity:1; }
body.modal-open{ overflow:hidden; }
.modal-box{ position:relative; width:min(680px,100%); max-height:calc(100svh - 32px); overflow-y:auto; overscroll-behavior:contain; padding:clamp(24px,3.4vw,48px); border-radius:18px; background:#fff; color:var(--black); transform:translateY(24px); transition:transform .5s var(--e-out); --line:rgba(7,8,12,.2); --line-2:rgba(7,8,12,.32); --muted:rgba(7,8,12,.62); }
.modal.is-open .modal-box{ transform:none; }
.modal-box .label{ margin-bottom:14px; }
.modal-box .label::before{ background:var(--fern-d); }
.modal-t{ font-size:clamp(24px,2.4vw,34px); line-height:1.12; padding-right:48px; }
.modal-lead{ margin-top:12px; font-size:15.5px; line-height:1.55; color:var(--muted); }
.modal .form-card{ padding:0; margin-top:8px; background:transparent; }
.modal .form-card[data-reveal]{ opacity:1; transform:none; }
.modal-x{ position:absolute; top:14px; right:14px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; transition:background .25s,color .25s,border-color .25s; }
.modal-x:hover{ background:var(--black); color:#fff; border-color:var(--black); }
.modal-x svg{ width:20px; height:20px; }

/* phones: smaller type for big screens like Pro Max, stacked cards and steps instead of carousels */
@media (max-width:767px){
  body{ font-size:16px; }
  .sec{ padding-block:clamp(64px,16vw,88px); }
  .sec-head{ margin-bottom:32px; }
  .label{ font-size:13.5px; margin-bottom:16px; }
  .h2{ font-size:clamp(26px,7.2vw,34px); }
  .hero-c .h1,.hero-s .h1{ font-size:clamp(27px,7.4vw,34px); }
  .lead,.hero-lead{ font-size:16px; }
  .hero-c{ min-height:0; }
  .hero-c__copy{ justify-content:flex-start; padding-block:40px 36px; }
  .hero-c .label{ font-size:12.5px; max-width:30ch; margin-inline:auto; }
  .hero-c__logos{ padding-bottom:24px; }
  .cards,.steps{ grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:minmax(0,1fr); overflow:visible; margin-inline:0; padding-inline:0; }
  .cards{ border-left:1px solid var(--line); }
  .cardx{ padding:22px 20px; gap:8px; }
  .cardx .ic{ width:52px; height:52px; }
  .cardx .ic svg{ width:22px; height:22px; }
  .cardx .ic+h3{ margin-top:12px; }
  .step,.step+.step{ display:grid; grid-template-columns:48px minmax(0,1fr); column-gap:14px; padding:20px 0; border-left:0; border-bottom:1px solid var(--line); }
  .step .sn{ grid-row:1 / span 3; font-size:32px; margin:0; }
  .step>:not(.sn){ grid-column:2; }
  .row .ic{ width:48px; height:48px; }
  .row .ic svg{ width:20px; height:20px; }
  .row h3{ font-size:clamp(22px,6.4vw,28px); }
  .trust b{ font-size:30px; }
  .pband .badges{ flex-wrap:wrap; }
}

/* first screen fills almost at once: hero reveals run at half the delay and a shorter fade */
.js :is(.hero-c,.hero-s,.hero-type) [data-reveal]{ transition-duration:.7s,.8s; transition-delay:calc(var(--d,0) * .4ms); }

/* =====================================================================
   v4.5: design polish pass
   One heading voice (sentence case), solid pill buttons, rounded tiles
   instead of hairline tables, no photo behind the closing form,
   no eyebrow lines above headings, quieter footer.
   ===================================================================== */
:root{ --r:20px; --muted:rgba(230,230,219,.74); --tile:rgba(230,230,219,.05); --tile-h:rgba(230,230,219,.085); }
.t-cream,.t-cream2,.t-fern,.form-card,.modal-box{ --tile:#F3F4F1; --tile-h:#ECEEEA; }
.t-fern{ --tile:rgba(255,255,255,.42); --tile-h:rgba(255,255,255,.6); }

/* headings: sentence case everywhere, so long and short headings read in one voice */
:is(.display,.h1,.h2,.h3,.row h3,.footer-top h2,.menu-main a,.form-card h3,.cs-block h2,.legal h2,.done-cols h3){ text-transform:none; letter-spacing:-.025em; }
.h2{ line-height:1.06; }
.kicker{ margin-bottom:14px; font-size:15px; font-weight:500; color:var(--muted); }

/* interface text: no tracked-out capitals */
.nav a,.hdr-audit,.menu-btn{ font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; }
.alink,.filter,.faq-more,.ccard .more{ font-size:15px; letter-spacing:0; text-transform:none; }
.faq-more{ font-weight:500; }

/* buttons: one solid pill — fern on dark, sapphire on light, black on fern */
.lbtn{ min-height:56px; padding:0 8px 0 26px; gap:16px; border:0; border-radius:999px; background:var(--fern); color:var(--black); font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; transition:background .3s,color .3s; }
.lbtn .ci{ width:40px; height:40px; background:rgba(7,8,12,.12); color:var(--black); }
.lbtn .ci svg{ width:18px; height:18px; }
.lbtn:hover{ background:var(--fern-l); color:var(--black); }
:is(.t-cream,.t-cream2,.c-cream) .lbtn,.lbtn--dark{ background:var(--sapphire); color:#fff; }
:is(.t-cream,.t-cream2,.c-cream) .lbtn .ci,.lbtn--dark .ci{ background:rgba(255,255,255,.16); color:#fff; }
:is(.t-cream,.t-cream2,.c-cream) .lbtn:hover{ background:var(--sapphire-2); color:#fff; }
:is(.t-fern,.pcard.hi) .lbtn{ background:var(--black); color:var(--cream); }
:is(.t-fern,.pcard.hi) .lbtn .ci{ background:rgba(255,255,255,.14); color:var(--cream); }
:is(.t-fern,.pcard.hi) .lbtn:hover{ background:var(--sapphire); color:#fff; }
.lbtn--sm{ min-height:46px; padding-left:20px; font-size:14px; }
.lbtn--sm .ci{ width:32px; height:32px; }
.hero-act .lbtn{ border-radius:999px; padding:0 8px 0 28px; }
.sbtn{ min-height:58px; border-radius:999px; background:var(--sapphire); color:#fff; font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; }
.sbtn:hover{ background:var(--black); }

/* tiles instead of hairline tables */
.cards,.quotes,.steps,.posts,.related{ gap:16px; border:0; }
.cardx,.cardx:first-child,.qcard,.qcard:first-child,.posts a,.posts a+a,.related a,.related a+a{ border:0; border-radius:var(--r); background:var(--tile); }
.cardx:hover,.posts a:hover,.related a:hover{ background:var(--tile-h); }
.step,.step+.step,.step:nth-child(even){ border:0; border-radius:var(--r); background:var(--tile); padding:clamp(22px,2.4vw,34px); }
.posts a,.posts a+a,.related a,.related a+a{ padding:clamp(24px,2.4vw,32px); }
.hcard,.ccard,.form-card,.cert,.result{ border-radius:var(--r); overflow:hidden; }
.badges a,.badges span{ border:0; border-radius:14px; background:var(--tile); }
.pband .badges a,.pband .badges span{ background:#F3F4F1; }

/* closing form block: dark stage glow instead of a bright photo behind the text */
.cta-full{ background:radial-gradient(46% 60% at 88% 104%,rgba(114,180,144,.2),transparent 70%),radial-gradient(70% 90% at 100% 120%,rgba(10,33,101,.85),transparent 72%),var(--black); }
.cta-full::before,.cta-full .bg{ display:none; }
.cta-grid .lead{ color:rgba(230,230,219,.8); }
.cta-full .form-card{ box-shadow:0 40px 80px -40px rgba(0,0,0,.7); }

/* footer: partner names as quiet text, socials smaller so they sit on one row */
.footer .socials{ gap:8px; }
.footer .socials a{ width:40px; height:40px; }
.footer .socials svg{ width:16px; height:16px; }
.f-partners{ display:block; margin-top:18px; font-size:14px; color:var(--muted); }
.f-partners a{ display:inline; font-size:inherit; font-weight:inherit; height:auto; padding:0; background:none; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.f-partners a:hover{ color:var(--cream); }

@media (max-width:767px){
  .step,.step+.step{ padding:20px; }
  .cards{ border:0; }
  .cardx{ padding:22px 20px; }
}

/* footer partner badges: official logos in dark-background versions, no white boxes */
.f-partners{ display:flex; align-items:center; gap:20px; margin-top:24px; }
.f-partners a,.f-partners span{ display:flex; align-items:center; height:auto; padding:0; background:none; text-decoration:none; opacity:.9; transition:opacity .2s; }
.f-partners a:hover{ opacity:1; }
.f-partners img{ width:auto; height:64px; }
.f-partners span img{ height:38px; }
.f-partners a::after{ display:none; }

/* hero tiles: .tile keeps the idle float, the glass body .tile-b tilts toward the cursor (main.js) */
.tile{ background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0; perspective:700px; }
.tile-b{ position:absolute; inset:0; display:grid; place-items:center; border-radius:24%; transform-style:preserve-3d; will-change:transform;
  background:linear-gradient(150deg,rgba(230,230,219,.18),rgba(230,230,219,.03) 60%); border:1px solid rgba(230,230,219,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -12px 24px rgba(114,180,144,.12),0 30px 60px -24px rgba(0,0,0,.8),0 0 50px -18px rgba(114,180,144,.55);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.tile-b::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,30%) var(--gy,22%),rgba(255,255,255,.22),transparent 58%); }
.tile-b svg{ transform:translateZ(22px); filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }

/* proof band as stat cards: glass tiles, gradient numbers, icon, count-up; the microtext becomes a CTA bar */
.hero-proof{ border-bottom:0; }
.hero-proof .wrap{ padding-block:clamp(28px,3.4vw,48px) clamp(56px,6vw,96px); gap:16px; }
.hero-proof .trust{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:0; border:0; }
.hero-proof .trust li,.hero-proof .trust li+li{ position:relative; display:flex; flex-direction:column; gap:0; padding:clamp(22px,2.2vw,30px); border:0; border-radius:var(--r); margin:0;
  background:linear-gradient(160deg,rgba(230,230,219,.075),rgba(230,230,219,.02) 70%); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); transition:transform .5s var(--e-out),background .4s; overflow:hidden; }
.hero-proof .trust li::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg,rgba(114,180,144,.55),rgba(230,230,219,.08) 40%,rgba(10,33,101,.6)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.hero-proof .trust li::after{ content:''; position:absolute; right:-30%; bottom:-60%; width:80%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(114,180,144,.16),transparent 65%); pointer-events:none; transition:opacity .4s; opacity:.6; }
.hero-proof .trust li:hover{ transform:translateY(-4px); }
.hero-proof .trust li:hover::after{ opacity:1; }
.hero-proof .tic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(114,180,144,.14); color:var(--fern); margin-bottom:clamp(22px,2.4vw,34px); flex-shrink:0; }
.hero-proof .tic svg{ width:22px; height:22px; }
.hero-proof .trust b{ margin:0 0 10px; font-size:clamp(32px,3.2vw,52px); line-height:1; white-space:nowrap; color:var(--cream);
  background:linear-gradient(100deg,#F4F4EC 30%,var(--fern-l)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-proof .trust span{ font-size:15px; line-height:1.45; color:var(--muted); max-width:26ch; }
.proof-bar{ display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap; padding:14px 18px 14px 14px; border-radius:16px; background:rgba(230,230,219,.04); box-shadow:inset 0 0 0 1px rgba(230,230,219,.08); }
.proof-bar .tic{ margin:0; width:40px; height:40px; }
.proof-bar p{ flex:1 1 380px; font-size:15px; line-height:1.5; color:var(--muted); }
.proof-bar .alink{ white-space:nowrap; }
@media (max-width:767px){
  .hero-proof .trust{ grid-template-columns:1fr 1fr; gap:10px; }
  .hero-proof .trust li,.hero-proof .trust li+li{ padding:18px 16px; }
  .hero-proof .tic{ width:36px; height:36px; border-radius:10px; margin-bottom:18px; }
  .hero-proof .tic svg{ width:18px; height:18px; }
  .hero-proof .trust b{ font-size:clamp(22px,6.2vw,30px); white-space:normal; }
  .hero-proof .trust span{ font-size:13.5px; }
  .proof-bar{ padding:14px; }
}
/* neutralise the older strip rules (row breaks every 2 items) */
.hero-proof .trust li:nth-child(n){ padding:clamp(22px,2.2vw,30px); margin:0; border:0; }
@media (max-width:767px){ .hero-proof .trust li:nth-child(n){ padding:18px 16px; } }

/* =====================================================================
   v4.6: Unbounded (headings, numbers) + Onest (text).
   Unbounded is a wide face: weight 500 and a smaller scale keep line breaks and card fits.
   ===================================================================== */
:is(h1,h2,.display,.h1,.h2,.h3,.row h3,.stat b,.step .sn,.hcard .big,.ccard .big,.cs-big,.footer-top h2,.footer-word,.menu-main a,.form-card h3,.cs-block h2,.legal h2,.prow em,.pcard .pp,.done-cols h3,.trust b,.chip b,.modal-t){ font-weight:500; letter-spacing:-.02em; }
.h2{ font-size:clamp(26px,3vw,48px); line-height:1.12; }
.h2--s{ font-size:clamp(22px,2.3vw,36px); }
.hero-c .h1{ font-size:clamp(26px,3vw,46px); line-height:1.16; }
.hero-s .h1,.hero-full .h1,.hero-split .h1,.hero-type .h1{ font-size:clamp(26px,2.6vw,42px); line-height:1.16; }
.row h3{ font-size:clamp(20px,1.9vw,30px); line-height:1.15; }
.hero-proof .trust b{ font-size:clamp(26px,2.4vw,40px); }
.hcard .big{ font-size:clamp(60px,8vw,140px); }
.ccard .big{ font-size:clamp(60px,6.8vw,120px); }
.cs-big{ font-size:clamp(80px,13vw,230px); }
.cs-hero h1{ font-family:var(--f); }
.footer-top h2{ font-size:clamp(34px,5vw,84px); line-height:1.02; }
.footer-word{ font-size:clamp(48px,11vw,200px); }
.menu-main a{ font-size:clamp(30px,4.4vw,68px); }
.modal-t{ font-size:clamp(20px,2vw,28px); line-height:1.2; }
.step .sn{ font-size:clamp(36px,3.2vw,52px); }
.pcard .pp{ font-size:clamp(36px,3.6vw,60px); }
.prow em{ font-size:clamp(22px,2vw,32px); }
.cs-block h2,.legal h2{ font-size:clamp(22px,2.4vw,38px); line-height:1.15; }
@media (max-width:767px){
  .h2{ font-size:clamp(22px,6.2vw,28px); }
  .hero-c .h1,.hero-s .h1{ font-size:clamp(23px,6.4vw,30px); }
  .hero-proof .trust b{ font-size:clamp(19px,5.2vw,25px); }
  .step .sn{ font-size:28px; }
  .row h3{ font-size:clamp(19px,5.4vw,24px); }
}
@media (max-width:767px){ .hero-proof .trust b{ font-size:clamp(17px,4.7vw,23px); white-space:nowrap; } }

/* =====================================================================
   v4.7: second review — proportionate case heroes, outline secondary
   buttons, audience cards, scroller arrows, legal row at the very bottom
   ===================================================================== */

/* secondary buttons: outline pill */
.lbtn--ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px var(--line-2); }
.lbtn--ghost .ci{ background:rgba(230,230,219,.1); color:var(--cream); }
.lbtn--ghost:hover{ background:rgba(230,230,219,.08); color:var(--cream); }
:is(.t-cream,.t-cream2,.c-cream) .lbtn--ghost{ background:transparent; color:var(--black); box-shadow:inset 0 0 0 1px rgba(7,8,12,.25); }
:is(.t-cream,.t-cream2,.c-cream) .lbtn--ghost .ci{ background:rgba(7,8,12,.07); color:var(--black); }
:is(.t-cream,.t-cream2,.c-cream) .lbtn--ghost:hover{ background:rgba(7,8,12,.05); color:var(--black); }
@media (min-width:1000px){ .sec-head>div+div:has(>.lbtn){ display:flex; justify-content:flex-end; } }

/* case-study hero: headline-sized, not poster-sized */
.cs-hero{ min-height:0; padding:calc(var(--header-h) + clamp(32px,4vw,56px)) 0 clamp(48px,6vw,80px); }
.cs-hero .key{ width:min(30vw,420px); opacity:.12; }
.cs-top{ margin-bottom:20px; }
.cs-top .lg{ border-radius:12px; }
.cs-top small,.cs-meta,.hcard small,.ccard small{ text-transform:none; letter-spacing:0; font-size:15px; }
.cs-big{ font-size:clamp(56px,7vw,112px); line-height:.95; }
.cs-hero .wrap h1{ margin-top:20px; max-width:28em; font-family:var(--fd); font-weight:500; font-size:clamp(22px,2.2vw,32px); line-height:1.25; letter-spacing:-.015em; text-transform:none; }
.cs-meta{ gap:8px; margin-top:24px; }
.cs-meta span{ opacity:1; padding:8px 14px; border-radius:999px; background:rgba(230,230,219,.1); }
:is(.c-fern,.c-cream) .cs-meta span{ background:rgba(7,8,12,.07); }
.kpis.mt-l{ margin-top:clamp(32px,4vw,48px); }
.kpis .stats{ border:0; gap:12px; }
.kpis .stat,.kpis .stat+.stat,.kpis .stat:nth-child(n){ padding:20px 22px; border:0; border-radius:16px; background:rgba(230,230,219,.08); }
:is(.c-fern,.c-cream) .kpis .stat:nth-child(n){ background:rgba(7,8,12,.06); }
.kpis .stat b{ font-size:clamp(28px,2.8vw,44px); }
.kpis .stat span{ margin-top:8px; }

/* audience cards: light tiles that fill with sapphire on hover */
.aud{ display:grid; gap:16px; }
@media (min-width:700px){ .aud{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .aud{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.aud-card{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:14px; min-height:clamp(340px,30vw,420px); padding:clamp(26px,2.6vw,40px); border-radius:var(--r); background:#F3F4F1; color:var(--black); transition:color .5s,transform .6s var(--e-out); }
.aud-card::before{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s; background:radial-gradient(120% 90% at 100% 100%,rgba(114,180,144,.45),transparent 60%),linear-gradient(160deg,#0A2165,#071440); }
.aud-n{ position:absolute; top:clamp(20px,2vw,32px); right:clamp(24px,2.4vw,36px); font-family:var(--fd); font-weight:500; font-size:clamp(48px,4.6vw,72px); line-height:1; color:rgba(10,33,101,.08); transition:color .5s; }
.aud-ic{ width:64px; height:64px; border-radius:18px; display:grid; place-items:center; background:var(--sapphire); color:#fff; box-shadow:0 18px 30px -18px rgba(10,33,101,.7); transition:background .5s,color .5s; }
.aud-ic svg{ width:28px; height:28px; }
.aud-card h3{ margin-top:auto; padding-top:40px; font-family:var(--fd); font-weight:500; font-size:clamp(20px,1.7vw,26px); line-height:1.2; letter-spacing:-.01em; }
.aud-card p{ font-size:16px; line-height:1.6; color:rgba(7,8,12,.66); transition:color .5s; }
.aud-more{ display:inline-flex; align-items:center; gap:10px; margin-top:8px; font-size:15px; font-weight:500; color:var(--sapphire); transition:color .5s,gap .4s var(--e-out); }
.aud-more svg{ width:16px; height:16px; }
.aud-card:is(:hover,:focus-visible){ color:var(--cream); transform:translateY(-6px); }
.aud-card:is(:hover,:focus-visible)::before{ opacity:1; }
.aud-card:is(:hover,:focus-visible) .aud-n{ color:rgba(230,230,219,.12); }
.aud-card:is(:hover,:focus-visible) .aud-ic{ background:var(--fern); color:var(--black); }
.aud-card:is(:hover,:focus-visible) p{ color:rgba(230,230,219,.8); }
.aud-card:is(:hover,:focus-visible) .aud-more{ color:var(--fern-l); gap:16px; }
@media (max-width:767px){ .aud-card{ min-height:0; } .aud-card h3{ padding-top:28px; } }

/* case scroller: arrows next to the "all cases" button */
.hz-ctl{ display:flex; align-items:center; gap:10px; }
.hz-arrow{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--cream); transition:background .3s,color .3s,box-shadow .3s; }
.hz-arrow:hover{ background:var(--fern); color:var(--black); box-shadow:none; }
.hz-arrow svg{ width:20px; height:20px; }
.hz-ctl .lbtn{ margin-left:8px; }
@media (max-width:559px){ .hz-ctl .lbtn{ display:none; } }

/* footer: the wordmark closes the columns, the legal row sits under everything */
.footer-word{ margin:0; padding-top:clamp(8px,1vw,16px); line-height:.82; }
.footer-bottom{ border-top:1px solid var(--line); padding-block:22px 28px; }
/* audience titles hang from the top so one- and two-line titles align; the link sits at the bottom */
.aud-card h3{ margin-top:0; padding-top:44px; }
.aud-more{ margin-top:auto; padding-top:12px; }
/* footer socials stay on one row */
.footer-brand .socials{ flex-wrap:nowrap; gap:6px; }
.footer .socials a{ width:36px; height:36px; flex-shrink:0; }
.footer .socials svg{ width:15px; height:15px; }
@media (min-width:1100px){ .footer-cols{ grid-template-columns:1.6fr 1fr 1fr 1.2fr; } }

/* =====================================================================
   v4.8: living hero stage + separate client band
   Aurora blobs drift on their own loops, the cursor moves a spotlight and
   pushes the aurora the other way; tiles float on three axes and tilt.
   Runs even with prefers-reduced-motion (owner's decision for the brand hero).
   ===================================================================== */
.hero-c{ min-height:min(100svh,940px); background:var(--black); isolation:isolate; }
.hero-c::before{ display:none; }
.hero-c::after{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.08; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.aurora{ position:absolute; inset:-12%; z-index:0; pointer-events:none; filter:blur(80px) saturate(1.2); will-change:transform; }
.blob{ position:absolute; border-radius:50%; mix-blend-mode:screen; will-change:transform; }
.b1{ width:52vw; height:52vw; left:-4%; bottom:-22%; background:radial-gradient(circle,rgba(114,180,144,.55),transparent 66%); animation:drift1 24s ease-in-out infinite alternate; }
.b2{ width:60vw; height:60vw; right:-8%; bottom:-30%; background:radial-gradient(circle,rgba(43,69,151,.95),transparent 66%); animation:drift2 30s ease-in-out infinite alternate; }
.b3{ width:34vw; height:34vw; left:38%; top:4%; background:radial-gradient(circle,rgba(114,180,144,.22),rgba(10,33,101,.25) 45%,transparent 70%); animation:drift3 20s ease-in-out infinite alternate; }
@keyframes drift1{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(14vw,-8vh,0) scale(1.15); } 100%{ transform:translate3d(6vw,-16vh,0) scale(.95); } }
@keyframes drift2{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-12vw,-10vh,0) scale(1.1); } 100%{ transform:translate3d(-20vw,4vh,0) scale(1.2); } }
@keyframes drift3{ 0%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-10vw,8vh,0) scale(1.25); } 100%{ transform:translate3d(8vw,12vh,0) scale(.9); } }
.spot{ position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(520px circle at var(--sx,50%) var(--sy,45%),rgba(114,180,144,.12),transparent 62%); }
.hero-c .tiles{ z-index:2; }
.hero-c__copy{ z-index:4; }

/* tiles: entrance, then a slow three-axis float; .tile-b tilts with the cursor */
.tile{ animation:tilefloat2 9s ease-in-out infinite; }
.tile--2{ animation-duration:11s; animation-delay:-3s; }
.tile--3{ animation-duration:10s; animation-delay:-6s; }
.tile--4{ animation-duration:8s; animation-delay:-2s; }
@keyframes tilefloat2{
  0%,100%{ transform:translate3d(0,0,0) rotate(var(--r)); }
  25%{ transform:translate3d(8px,-18px,0) rotate(calc(var(--r) + 4deg)); }
  50%{ transform:translate3d(-4px,-26px,0) rotate(calc(var(--r) - 2deg)); }
  75%{ transform:translate3d(-10px,-10px,0) rotate(calc(var(--r) + 2deg)); }
}
.tile-b{ animation:tilein 1.4s var(--e-out) both; }
.tile--1 .tile-b{ animation-delay:.15s; } .tile--2 .tile-b{ animation-delay:.3s; } .tile--3 .tile-b{ animation-delay:.45s; } .tile--4 .tile-b{ animation-delay:.6s; }
@keyframes tilein{ from{ opacity:0; filter:blur(14px); } to{ opacity:1; filter:none; } }

/* the brand hero keeps moving under reduced motion too */
@media (prefers-reduced-motion:reduce){
  .b1{ animation:drift1 24s ease-in-out infinite alternate !important; }
  .b2{ animation:drift2 30s ease-in-out infinite alternate !important; }
  .b3{ animation:drift3 20s ease-in-out infinite alternate !important; }
  .hero-c .tile{ animation:tilefloat2 9s ease-in-out infinite !important; }
  .hero-c .tile--2{ animation-duration:11s !important; animation-delay:-3s !important; }
  .hero-c .tile--3{ animation-duration:10s !important; animation-delay:-6s !important; }
  .hero-c .tile--4{ animation-duration:8s !important; animation-delay:-2s !important; }
  .hero-c .tile-b{ animation:tilein 1.4s var(--e-out) both !important; }
  .clients .marquee-track{ animation:marquee 50s linear infinite !important; }
}

/* client band: its own strip under the hero, readable caption, slow marquee */
.clients{ position:relative; background:var(--black); border-block:1px solid rgba(230,230,219,.08); padding-block:clamp(26px,3vw,40px); }
.clients-in{ display:grid; gap:18px; align-items:center; }
@media (min-width:1000px){ .clients-in{ grid-template-columns:minmax(220px,280px) minmax(0,1fr); gap:48px; } }
.clients-cap{ font-size:17px; line-height:1.45; color:var(--cream); max-width:24ch; }
.clients .marquee-group img{ height:36px; filter:grayscale(1) invert(1) contrast(1.2); mix-blend-mode:screen; opacity:.55; }
.clients .marquee-group img.sq{ height:50px; }
.clients .marquee-group img:hover{ filter:grayscale(1) invert(1) contrast(1.2); opacity:1; }
.clients+.hero-proof .wrap{ padding-top:clamp(40px,4.4vw,64px); }
@media (max-width:767px){ .hero-c{ min-height:auto; } .clients-cap{ font-size:15px; } .clients .marquee-group img{ height:30px; } .clients .marquee-group img.sq{ height:42px; } }
/* tiles read against the brighter aurora: darker glass body, crisper rim, deeper shadow */
.tile-b{ background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 55%),rgba(12,14,22,.62); border-color:rgba(230,230,219,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -14px 26px rgba(114,180,144,.14),0 34px 70px -22px rgba(0,0,0,.9),0 0 60px -16px rgba(114,180,144,.5); }
.tile-b svg{ opacity:.95; }

/* case pages: the headline carries the number now (no poster number above it) */
.cs-hero .wrap h1{ margin-top:8px; font-size:clamp(26px,2.8vw,42px); line-height:1.18; }
/* light case heroes (cream / fern): the header sits on its dark glass from the start so the menu stays readable */
body.hero-light .header{ background:rgba(7,8,12,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-color:var(--line); }

/* case sections: a narrow side column with a numbered, readable heading that stays beside its section */
.t-cream .wrap:has(>.cs-block){ counter-reset:csb; }
.cs-block{ counter-increment:csb; }
@media (min-width:1000px){
  .cs-block{ grid-template-columns:minmax(180px,240px) minmax(0,880px); gap:20px clamp(32px,3.4vw,56px); }
  .cs-block>div:first-child{ position:sticky; top:calc(var(--header-h) + 32px); align-self:start; }
}
.cs-block .kicker{ display:flex; align-items:baseline; gap:12px; margin:0; padding-top:8px; font-family:var(--fd); font-weight:500; font-size:clamp(17px,1.3vw,20px); line-height:1.25; letter-spacing:-.01em; color:var(--black); }
.cs-block .kicker::before{ content:counter(csb,decimal-leading-zero); font-family:var(--f); font-size:14px; font-weight:500; color:var(--fern-d); }
@media (max-width:999px){ .cs-block .kicker{ margin-bottom:4px; } }

/* =====================================================================
   v4.9: blog — index, post cards, article page
   ===================================================================== */
.blog-hero{ padding:calc(var(--header-h) + clamp(32px,4vw,56px)) 0 clamp(40px,5vw,64px); }
.blog-hero .h1{ font-size:clamp(34px,4.4vw,64px); }
.blog-hero .hero-lead{ margin-top:18px; max-width:56ch; }

/* cards */
.bgrid{ display:grid; gap:16px; }
@media (min-width:700px){ .bgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .bgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.bcard{ display:flex; flex-direction:column; border-radius:var(--r); overflow:hidden; background:var(--tile); transition:background .4s,transform .6s var(--e-out); }
.bcard:hover{ background:var(--tile-h); transform:translateY(-4px); }
.bcard-img{ margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--black-3); }
.bcard-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--e-out); }
.bcard:hover .bcard-img img{ transform:scale(1.04); }
.bcard-tx{ display:flex; flex-direction:column; gap:12px; flex:1; padding:clamp(20px,2vw,28px); }
.bmeta{ font-size:14px; color:var(--muted); }
.bcard h2,.bcard h3{ font-family:var(--fd); font-weight:500; font-size:clamp(18px,1.4vw,22px); line-height:1.3; letter-spacing:-.01em; text-transform:none; }
.bcard p{ font-size:16px; line-height:1.6; color:var(--muted); }
.bcard .alink{ margin-top:auto; padding-top:8px; }
@media (min-width:900px){
  .bcard--wide{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); }
  .bcard--wide .bcard-img{ aspect-ratio:auto; min-height:380px; }
  .bcard--wide .bcard-tx{ justify-content:center; padding:clamp(28px,3.4vw,56px); gap:16px; }
  .bcard--wide h2{ font-size:clamp(24px,2.3vw,36px); line-height:1.18; }
}

/* article */
.post-hero{ padding:calc(var(--header-h) + clamp(28px,3.4vw,48px)) 0 0; }
.post-hero .wrap{ max-width:calc(1120px + var(--gutter)*2); }
.post-hero h1{ max-width:24em; font-family:var(--fd); font-weight:500; font-size:clamp(28px,3.4vw,52px); line-height:1.12; letter-spacing:-.02em; text-transform:none; }
.post-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:28px; font-size:15px; color:var(--muted); }
.post-meta img{ width:48px; height:48px; border-radius:50%; object-fit:cover; object-position:50% 20%; }
.post-meta b{ display:block; color:var(--cream); font-weight:500; }
.post-meta__d{ padding-left:16px; border-left:1px solid var(--line); }
.post-cover{ margin:clamp(32px,4vw,56px) 0 0; border-radius:var(--r) var(--r) 0 0; overflow:hidden; aspect-ratio:16/8; background:var(--black-3); }
.post-cover img{ width:100%; height:100%; object-fit:cover; }
.post-sec{ padding-top:clamp(40px,5vw,72px); }
.post-grid{ max-width:calc(1120px + var(--gutter)*2); display:grid; gap:32px; }
@media (min-width:1000px){ .post-grid{ grid-template-columns:240px minmax(0,1fr); gap:clamp(40px,5vw,80px); } }
.toc{ align-self:start; }
@media (min-width:1000px){ .toc{ position:sticky; top:calc(var(--header-h) + 32px); } }
.toc .kicker{ margin-bottom:12px; color:var(--black); font-family:var(--fd); font-size:17px; }
.toc ol{ list-style:none; display:grid; gap:2px; counter-reset:toc; border-left:1px solid var(--line); }
.toc li{ counter-increment:toc; }
.toc a{ display:flex; gap:10px; padding:8px 0 8px 16px; margin-left:-1px; border-left:2px solid transparent; font-size:15px; line-height:1.4; color:rgba(7,8,12,.66); transition:color .2s,border-color .2s; }
.toc a::before{ content:counter(toc,decimal-leading-zero); color:var(--fern-d); font-size:13px; padding-top:2px; }
.toc a:hover,.toc a.is-active{ color:var(--black); border-left-color:var(--sapphire); }
@media (max-width:999px){ .toc{ padding:20px; border-radius:16px; background:#F3F4F1; } .toc ol{ border:0; } .toc a{ padding-left:0; border:0; } }
.post-prose{ max-width:720px; font-size:clamp(17px,1.2vw,19px); line-height:1.75; color:rgba(7,8,12,.82); }
.post-prose>*+*{ margin-top:1.1em; }
.post-prose h2{ margin-top:2.2em; scroll-margin-top:calc(var(--header-h) + 24px); font-family:var(--fd); font-weight:500; font-size:clamp(22px,2vw,30px); line-height:1.25; letter-spacing:-.015em; color:var(--black); text-transform:none; }
.post-prose>p:first-child{ font-size:1.12em; color:var(--black); }
.post-prose strong{ color:var(--black); font-weight:600; }
.post-prose ul,.post-prose ol{ padding-left:0; list-style:none; display:grid; gap:.6em; }
.post-prose li{ position:relative; padding-left:28px; }
.post-prose ul li::before{ content:''; position:absolute; left:4px; top:.72em; width:8px; height:8px; border-radius:50%; background:var(--fern); }
.tip{ margin-top:1.6em; padding:22px 24px; border-radius:16px; background:rgba(114,180,144,.14); border-left:3px solid var(--fern-d); }
.tip b{ display:block; margin-bottom:6px; font-size:14px; letter-spacing:.02em; color:var(--fern-d); font-weight:600; }
.tip p{ margin:0; font-size:.95em; }
.post-author{ display:flex; gap:18px; align-items:center; max-width:720px; margin-top:clamp(40px,5vw,64px); padding:22px; border-radius:var(--r); background:#F3F4F1; }
.post-author img{ width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:50% 20%; flex-shrink:0; }
.post-author b{ display:block; font-family:var(--fd); font-weight:500; font-size:18px; color:var(--black); }
.post-author span{ display:block; margin-top:4px; font-size:15px; line-height:1.5; color:rgba(7,8,12,.66); }
@media (min-width:1100px){ .bgrid:has(>:nth-child(2):last-child){ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:599px){ .post-meta__d{ flex-basis:100%; padding-left:0; border-left:0; } }

/* =====================================================================
   v4.10: author profile (E-E-A-T), bylines, editorial principles
   ===================================================================== */
.author-hero{ padding:calc(var(--header-h) + clamp(28px,3.4vw,48px)) 0 clamp(24px,3vw,40px); }
.author-hero__grid{ display:grid; gap:clamp(32px,4vw,64px); align-items:center; }
@media (min-width:1000px){ .author-hero__grid{ grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); } }
.author-role{ margin-bottom:12px; font-size:15px; font-weight:500; color:var(--fern); }
.author-hero .h1{ font-size:clamp(34px,4.2vw,64px); line-height:1.05; }
.author-hero .hero-lead{ margin-top:20px; max-width:56ch; }
.author-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.author-chips li{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:rgba(230,230,219,.07); box-shadow:inset 0 0 0 1px rgba(230,230,219,.1); font-size:14px; }
.author-chips svg{ width:16px; height:16px; color:var(--fern); }
.author-act{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:28px; }
.author-act .socials a{ width:44px; height:44px; }
.author-photo{ position:relative; margin:0; border-radius:24px; overflow:hidden; aspect-ratio:4/5; max-height:calc(100svh - var(--header-h) - 80px); background:var(--black-3); }
.author-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.author-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(7,8,12,.35),transparent 40%); }
@media (max-width:999px){ .author-photo{ aspect-ratio:1; order:-1; max-width:420px; } }
.author-block h2{ font-family:var(--fd); font-weight:500; font-size:clamp(22px,2.4vw,36px); line-height:1.2; letter-spacing:-.015em; margin-bottom:24px; text-transform:none; }
.author-block .aud{ grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.author-block .aud-card{ min-height:clamp(300px,24vw,360px); }

.editorial{ display:grid; gap:16px; }
@media (min-width:800px){ .editorial{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.ed-item{ padding:clamp(22px,2.4vw,32px); border-radius:var(--r); background:var(--tile); }
.ed-item span{ display:block; margin-bottom:18px; font-family:var(--fd); font-size:15px; color:var(--fern); }
.ed-item h3{ font-family:var(--fd); font-weight:500; font-size:clamp(18px,1.4vw,22px); line-height:1.25; text-transform:none; }
.ed-item p{ margin-top:10px; font-size:16px; line-height:1.6; color:var(--muted); }
.ed-item a{ color:var(--fern); text-decoration:underline; text-underline-offset:3px; }

/* blog index: author strip under the intro */
.blog-author{ display:inline-flex; align-items:center; gap:14px; margin-top:28px; padding:8px 18px 8px 8px; border-radius:999px; background:rgba(230,230,219,.06); box-shadow:inset 0 0 0 1px rgba(230,230,219,.1); font-size:14px; color:var(--muted); transition:background .3s; }
.blog-author:hover{ background:rgba(230,230,219,.1); }
.blog-author img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 20%; }
.blog-author b{ display:block; color:var(--cream); font-weight:500; font-size:15px; }
.blog-author svg{ width:16px; height:16px; color:var(--fern); }

/* article byline + author box */
.post-byline{ display:inline-flex; align-items:center; gap:12px; }
.post-byline b{ transition:color .2s; }
.post-byline:hover b{ color:var(--fern); text-decoration:underline; text-underline-offset:3px; }
.post-author{ align-items:flex-start; padding:clamp(20px,2.4vw,28px); gap:20px; }
.post-author img{ width:88px; height:88px; }
.post-author__k{ display:block; font-size:13px; font-weight:500; color:var(--fern-d); margin-bottom:4px; }
.post-author__n{ font-family:var(--fd); font-weight:500; font-size:20px; color:var(--black); }
.post-author__n:hover{ color:var(--sapphire); }
.post-author p{ margin-top:8px; font-size:15px; line-height:1.55; color:rgba(7,8,12,.7); }
.post-author__row{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:14px; }
.post-author .socials a{ width:38px; height:38px; border-color:rgba(7,8,12,.2); color:var(--black); }
.post-author .socials svg{ width:15px; height:15px; }
.post-editorial{ max-width:720px; margin-top:16px; font-size:14px; color:rgba(7,8,12,.6); }
.post-editorial a{ color:var(--sapphire); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:599px){ .post-author{ flex-direction:column; } }

/* branded post covers: dark stage, two aurora blobs, a glass topic tile, a small label */
.bcard-img{ position:relative; background:var(--black); }
.bcover{ position:absolute; inset:0; overflow:hidden; isolation:isolate; background:#07080C; --c1:rgba(114,180,144,.55); --c2:rgba(43,69,151,.9); }
.bcover--google{ --c1:rgba(114,180,144,.6); --c2:rgba(43,69,151,.85); }
.bcover--meta{ --c1:rgba(43,69,151,.95); --c2:rgba(114,180,144,.45); }
.bcover--ai{ --c1:rgba(169,211,187,.45); --c2:rgba(10,33,101,1); }
.bcover--tiktok{ --c1:rgba(114,180,144,.5); --c2:rgba(60,40,120,.8); }
.bcover--ga{ --c1:rgba(114,180,144,.5); --c2:rgba(43,69,151,.7); }
.bc-blob{ position:absolute; border-radius:50%; filter:blur(48px); mix-blend-mode:screen; }
.bc-b1{ width:70%; aspect-ratio:1; left:-18%; bottom:-45%; background:radial-gradient(circle,var(--c1),transparent 66%); }
.bc-b2{ width:80%; aspect-ratio:1; right:-25%; top:-40%; background:radial-gradient(circle,var(--c2),transparent 66%); }
.bcover::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.09; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bc-tile{ position:absolute; z-index:2; left:50%; top:50%; width:clamp(72px,22%,120px); aspect-ratio:1; margin:0; transform:translate(-50%,-50%) rotate(-10deg); border-radius:24%; display:grid; place-items:center;
  background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.03) 55%),rgba(12,14,22,.6); border:1px solid rgba(230,230,219,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -14px 26px rgba(114,180,144,.14),0 30px 60px -22px rgba(0,0,0,.9),0 0 60px -16px rgba(114,180,144,.5);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:transform .8s var(--e-out); }
.bc-tile svg{ width:44%; height:44%; fill:var(--cream); filter:drop-shadow(0 6px 10px rgba(0,0,0,.45)); }
.bc-label{ position:absolute; z-index:2; left:clamp(14px,1.6vw,22px); top:clamp(14px,1.6vw,22px); padding:7px 12px; border-radius:999px; font-size:13px; font-weight:500; color:var(--cream); background:rgba(7,8,12,.5); box-shadow:inset 0 0 0 1px rgba(230,230,219,.14); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
.bcard:hover .bc-tile{ transform:translate(-50%,-56%) rotate(-4deg) scale(1.06); }
.bcover--big .bc-tile{ width:clamp(96px,16%,150px); }
.bcard:hover .bcard-img img{ transform:none; }
/* article hero cover uses the same component */
.post-cover{ position:relative; aspect-ratio:16/7; }
/* author page: the articles come straight after the hero, on the dark stage */
.author-articles{ padding-top:clamp(24px,3vw,40px); }

/* ===== v8 client feedback (05.11) ===== */
/* sticky header: always on screen, compact once the page scrolls */
.header.is-hidden{ transform:none; }
.header{ transition:height .35s var(--e-out),background .35s,border-color .35s; }
.header.is-scrolled{ height:68px; }
.header.is-scrolled .logo img{ height:36px; width:auto; transition:height .35s var(--e-out); }
.header .logo img{ transition:height .35s var(--e-out); }
@media (max-width:767px){ .header.is-scrolled{ height:60px; } .header.is-scrolled .logo img{ height:32px; } }

/* partners band: heading top-aligned with the text column */
@media (min-width:1000px){ .pband-in{ align-items:start; } }

/* business name on case cards: larger and framed */
.ctag{ display:inline-block; width:max-content; max-width:100%; padding:9px 16px 8px; border:1.5px solid currentColor; border-radius:12px; font-size:clamp(14px,1.1vw,16px) !important; font-weight:500; letter-spacing:.02em !important; text-transform:none !important; line-height:1.35 !important; }
.c-cream .ctag,.c-fern .ctag{ border-color:rgba(7,8,12,.55); }
.c-sapphire .ctag,.c-ink .ctag{ border-color:rgba(230,230,219,.6); }
.hcard small.ctag{ max-width:calc(100% - 200px); }
@media (max-width:600px){ .hcard small.ctag{ max-width:100%; margin-top:64px; } }

/* h-scroll cases: filters in the head, arrows + "all cases" under the cards */
.hz-head{ align-items:flex-end; margin-bottom:clamp(20px,2.4vw,32px); }
.hz-head .filters{ margin-bottom:0; border-bottom:0; gap:8px; }
.hz-head .filter,.hz-head .filter.is-active{ padding:10px 18px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--cream); }
.hz-head .filter::after{ display:none; }
.hz-head .filter:hover{ background:rgba(230,230,219,.08); }
.hz-head .filter.is-active{ background:var(--fern); color:var(--black); box-shadow:none; }
.hz-head .filter.is-active sup{ color:var(--black); }
.hz-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:clamp(20px,2.4vw,32px); flex-wrap:wrap; }
.hz-foot .hz-ctl .lbtn{ display:inline-flex; }
.hcard.is-filtered{ display:none; }
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  .hz-sticky{ padding-top:var(--header-h); }
  .hcard{ height:min(54vh,560px); min-height:380px; }
}
@media (max-width:559px){ .hz-foot .lbtn{ display:inline-flex; } .hz-head .filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); } .hz-head .filters::-webkit-scrollbar{ display:none; } .hz-head .filter{ white-space:nowrap; } .hz-head>div{ min-width:0; max-width:100%; } }

/* home hero: two buttons side by side */
.hero-act{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-act .lbtn--ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px rgba(230,230,219,.4); }
.hero-act .lbtn--ghost .ci{ background:rgba(230,230,219,.12); color:var(--cream); }
.hero-act .lbtn--ghost:hover{ background:rgba(230,230,219,.1); color:var(--cream); }

/* "all review screenshots": a real button instead of an underlined caption */
.proof summary{ min-height:56px; padding:0 8px 0 26px; gap:12px; border:0; border-radius:999px; background:var(--fern); color:var(--black); font-size:15px; font-weight:500; letter-spacing:0; text-transform:none; transition:background .3s; }
.proof summary:hover{ background:var(--fern-l); color:var(--black); }
.proof summary sup{ font-size:12px; font-weight:600; margin-left:-4px; }
.proof summary .ci{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(7,8,12,.12); }
.proof summary .ci svg{ width:18px; height:18px; }
:is(.t-cream,.t-cream2) .proof summary{ background:var(--sapphire); color:#fff; }
:is(.t-cream,.t-cream2) .proof summary .ci{ background:rgba(255,255,255,.16); }

/* contact page: the form sits in the first screen next to the heading */
.hero-s--form .hero-s__grid{ align-items:start; }
.hero-s__form .form-card{ border-radius:var(--r); }
.hero-s--form .cta-contacts{ margin-top:clamp(24px,3vw,36px); }