/* ITAN site system: ONE stylesheet for every page.
   Built on the Clover web design rules (Poppins, light headings, pill buttons, colour feature bar,
   soft cream sections, white cards, rounded ink footer) in ITAN colours.
   Header, footer, booking modal and consent markup are identical on every page; see _shots/check-shared.sh. */
:root{
  --i-navy:#334075; --i-navy-700:#283364; --i-navy-900:#1E2648;
  --i-coral:#EA6C56; --i-coral-700:#D8543E;
  --i-ink:#14192E; --i-text:#1C2030; --i-muted:#666A78;
  --i-cream:#F7F4EE; --i-cream-2:#EFEAE0; --i-line:#E6E1D7; --i-lav:#E8EAF3; --i-white:#fff;
  --i-ok:#178A57; --i-danger:#C93A3F;
  --maxw:1280px; --pad:clamp(20px,5vw,80px); --nav-h:84px;
  --r-pill:999px; --r-card:22px; --r-lg:32px; --r-footer:56px; --r-sm:12px;
  --shadow-sm:0 1px 2px rgba(20,25,46,.06);
  --shadow-card:0 10px 40px rgba(20,25,46,.07);
  --shadow-hover:0 16px 48px rgba(20,25,46,.12);
  /* motion (Emil Kowalski's curves; never ease-in on UI) */
  --ease-out:cubic-bezier(0.23,1,0.32,1); --ease-in-out:cubic-bezier(0.77,0,0.175,1); --ease-drawer:cubic-bezier(0.32,0.72,0,1);
  --ease:var(--ease-out); --t-press:160ms; --t-ui:200ms;
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.4l3 3 6-6.6' fill='none' stroke='%23D8543E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
a,button,summary,label,input,textarea{-webkit-tap-highlight-color:transparent}
button,.btn,.chip-b,.copy,.menu-btn,summary{touch-action:manipulation;-webkit-user-select:none;user-select:none}
body{margin:0;font-family:'Poppins',Arial,sans-serif;color:var(--i-text);background:var(--i-white);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
p{margin:0;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-weight:400;letter-spacing:-.01em;line-height:1.08;text-wrap:balance;color:var(--i-ink)}
ul,ol,dl,dd{margin:0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
:focus-visible{outline:2px solid var(--i-coral);outline-offset:3px;border-radius:8px}
::selection{background:rgba(234,108,86,.25)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:12px;top:12px;z-index:100;width:auto;height:auto;clip:auto;padding:12px 18px;border-radius:var(--r-pill);background:var(--i-ink);color:#fff}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--i-muted)}

/* ---------- layout + type (Clover scale) ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:clamp(56px,8vw,104px)}
.bleed{width:100%}
.display{font-size:clamp(38px,5vw,66px)}
.display-sub{font-size:clamp(34px,4.2vw,56px)}
.h2{font-size:clamp(30px,3.6vw,46px)}
.h3{font-size:clamp(22px,2.4vw,30px);font-weight:500}
.lead{font-size:clamp(17px,1.3vw,20px);color:var(--i-muted);line-height:1.55}
.head{max-width:760px;margin-bottom:clamp(32px,4.5vw,56px)}
.head .lead{margin-top:16px}
.center{text-align:center;margin-inline:auto}
.chip{display:inline-block;background:var(--i-coral);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 14px;border-radius:var(--r-pill)}
.tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--i-navy);background:var(--i-lav);padding:7px 12px;border-radius:var(--r-pill)}
.on-navy{color:#fff}.on-navy h2,.on-navy h3{color:#fff}.on-navy .lead{color:rgba(255,255,255,.86)}
.sub-h{font-size:20px;font-weight:600;letter-spacing:0;margin:clamp(40px,5vw,56px) 0 18px}
.grid-2,.grid-3,.grid-4{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.checks{list-style:none;padding:0;display:grid;gap:10px}
.checks li{position:relative;padding-left:28px;font-size:15.5px}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;background:var(--check) center/18px no-repeat}
.checks li b{color:var(--i-ink);font-weight:600}

/* ---------- buttons (Clover: pill, 500) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border:0;cursor:pointer;border-radius:var(--r-pill);font-size:16px;font-weight:500;line-height:1;padding:16px 30px;min-height:52px;white-space:nowrap;transition:transform var(--t-press) var(--ease-out),background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn:active{transform:scale(.97)}
.btn-navy{background:var(--i-navy);color:#fff}
.btn-outline{background:#fff;color:var(--i-ink);box-shadow:inset 0 0 0 1.5px var(--i-line)}
.btn-white{background:#fff;color:var(--i-ink)}
.btn-ghost-w{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn-sm{padding:11px 20px;min-height:44px;font-size:15px}
.btn-lg{padding:18px 36px;font-size:17px}
.btn[disabled]{opacity:.4;pointer-events:none}
.more{display:inline-flex;gap:8px;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--i-navy)}

/* arrow: a chevron at rest; on hover its line draws in and the head moves 2px (Stripe-style) */
.arr{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.arr .al{transform-box:fill-box;transform-origin:left center;transform:scaleX(0);opacity:0;transition:transform .14s var(--ease-out),opacity .1s ease}
.arr .ah{transition:transform .14s var(--ease-out)}
.arr.down{transform:rotate(90deg)}
/* cards that go somewhere: the whole card is the hit area */
.card-link{position:relative;isolation:isolate;transition:transform .25s var(--ease-out)}
.card-link::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 1px 2px rgba(30,38,72,.04),0 6px 12px rgba(30,38,72,.05),0 18px 36px rgba(30,38,72,.09);transition:opacity .25s ease}
.card-link .more::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card-link:active{transform:scale(.99)}

/* ---------- header (identical on every page) ---------- */
.nav{position:sticky;top:0;z-index:60;background:#fff;transition:box-shadow .2s var(--ease)}
.nav.scrolled,.nav.menu-open{box-shadow:0 1px 0 var(--i-line)}
.nav-in{display:flex;align-items:center;gap:20px;height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:20px;letter-spacing:.14em;color:var(--i-ink);min-height:44px}
.logo svg{width:28px;height:28px;flex:none}
.nav-links{position:relative;isolation:isolate;display:flex;gap:4px;margin:0 auto}
.nav-links a{--nav-px:14px;position:relative;font-size:16px;color:#22263a;padding:8px var(--nav-px);border-radius:var(--r-pill);transition:color .15s ease}
.nav-links a[aria-current=page]{color:var(--i-navy);font-weight:500}
.nav-links .ink{position:absolute;left:var(--nav-px);right:var(--nav-px);bottom:0;height:2px;border-radius:2px;background:var(--i-coral);display:none}
[data-nav=odoo] .nav-links a[href*="odoo.html"],[data-nav=workshops] .nav-links a[href*="workshops.html"],[data-nav=resources] .nav-links a[href*="resources.html"],[data-nav=news] .nav-links a[href*="news.html"]{color:var(--i-navy);font-weight:500}
[data-nav=odoo] .nav-links a[href*="odoo.html"] .ink,[data-nav=workshops] .nav-links a[href*="workshops.html"] .ink,[data-nav=resources] .nav-links a[href*="resources.html"] .ink,[data-nav=news] .nav-links a[href*="news.html"] .ink{display:block;view-transition-name:nav-ink}
/* hover highlight that follows the pointer (Linear timing: in 0s, out .15s; glides .2s between links) */
.nav-hl{position:absolute;inset:0;z-index:-1;background:var(--i-cream);pointer-events:none;opacity:0;transition:opacity .15s ease,clip-path .2s var(--ease-out)}
.nav-hl.on{opacity:1;transition:opacity 0s,clip-path .2s var(--ease-out)}
.nav-hl.snap{transition:none}
.menu-btn{display:none;flex:none;width:44px;height:44px;border-radius:50%;place-items:center;color:var(--i-ink);box-shadow:inset 0 0 0 1.5px var(--i-line);transition:transform var(--t-press) var(--ease-out),box-shadow .2s ease}
.menu-btn:active{transform:scale(.94)}
.menu-btn .burger{width:20px;height:20px}
/* the two lines meet in the middle, then cross (Apple, .24s); closing runs it in reverse */
.menu-btn .ln{transform-box:fill-box;transform-origin:center;transition:rotate .14s var(--ease-out),translate .12s var(--ease-out) .1s}
.nav.menu-open .menu-btn .ln{transition:translate .12s var(--ease-out),rotate .14s var(--ease-out) .1s}
.nav.menu-open .menu-btn .ln-t{translate:0 3.5px;rotate:45deg}
.nav.menu-open .menu-btn .ln-b{translate:0 -3.5px;rotate:-45deg}
.menu{display:none;position:absolute;left:0;right:0;top:100%;border-top:1px solid var(--i-line);background:#fff;padding:8px var(--pad) 22px;max-height:calc(100dvh - var(--nav-h));overflow:auto;overscroll-behavior:contain;box-shadow:0 30px 40px -28px rgba(20,25,46,.28);border-radius:0 0 var(--r-card) var(--r-card);
  visibility:hidden;clip-path:inset(0 -40px 100% -40px);transition:clip-path .18s var(--ease-out),visibility 0s linear .18s}
.menu a{display:flex;align-items:center;justify-content:space-between;min-height:56px;font-size:20px;color:var(--i-ink);border-bottom:1px solid var(--i-line);opacity:0;transform:translateY(-4px);transition:opacity .2s var(--ease-out),transform .25s var(--ease-out)}
.nav.menu-open .menu a{opacity:1;transform:none}
.nav.menu-open .menu a:nth-child(2){transition-delay:30ms}.nav.menu-open .menu a:nth-child(3){transition-delay:60ms}.nav.menu-open .menu a:nth-child(4){transition-delay:90ms}.nav.menu-open .menu a:nth-child(5){transition-delay:120ms}
.menu a[aria-current=page]{color:var(--i-navy);font-weight:500}
.menu a::after{content:"";width:16px;height:16px;background:var(--i-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E") center/16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4l4 4-4 4'/%3E%3C/svg%3E") center/16px no-repeat}
.menu .btn{width:100%;margin-top:20px}
.nav.menu-open .menu{visibility:visible;clip-path:inset(0 -40px -60px -40px);transition:clip-path .26s var(--ease-out),visibility 0s}
@media (max-width:1000px){
  :root{--nav-h:68px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .menu-btn{display:grid}
  .menu{display:block}
}
@media (max-width:380px){.nav-cta{padding:10px 16px;font-size:14px}}

/* ---------- hero (Clover page head + split) ---------- */
.hero{padding-block:clamp(28px,4vw,56px) clamp(48px,6vw,88px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.hero h1{margin:20px 0 0}
.hero .lead{margin-top:20px;max-width:46ch}
.hero .lead strong{color:var(--i-ink);font-weight:500}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.promise{margin-top:18px;font-size:15px;color:var(--i-muted);max-width:46ch;display:flex;gap:10px;align-items:flex-start}
.promise svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--i-ok)}
.price-line{margin-top:8px;font-size:15px;color:var(--i-muted);padding-left:28px}
.price-line b{color:var(--i-ink);font-weight:500}
.media-box{border-radius:var(--r-card);overflow:hidden;aspect-ratio:4/3;background:#ECEBE8;position:relative}
.media-box video,.media-box img{width:100%;height:100%;object-fit:cover}
.crumbs{font-size:14px;color:var(--i-muted);display:flex;gap:8px;align-items:center;margin-bottom:16px}

/* ---------- coral feature bar (Clover pink bar) ---------- */
.feature-bar{background:var(--i-coral);color:#fff}
.feature-bar .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-block:clamp(34px,4vw,52px)}
.feature{text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;padding-inline:10px}
.feature svg{width:40px;height:40px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.feature h3{font-size:15px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;line-height:1.3}
.feature p{font-size:15px;line-height:1.5;max-width:26ch;opacity:.96}

/* ---------- soft sections + cards ---------- */
.soft{background:var(--i-cream)}
.card{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:30px 28px}
.card h3{font-size:19px;font-weight:600;letter-spacing:0;line-height:1.25;margin-bottom:8px}
.card>p,.card .body{color:var(--i-muted);font-size:15.5px}
.cream-card{background:var(--i-cream);border-radius:var(--r-card);padding:28px}
.cream-card h3{font-size:18px;font-weight:600;letter-spacing:0;line-height:1.25;margin-bottom:8px}
.cream-card p{font-size:15.5px;color:var(--i-muted)}
.cream-card a{color:var(--i-navy);font-weight:600}
.soft .cream-card{background:#fff}
/* a cream bar with a line of copy and a button (journey foot, callouts) */
.callout{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding:22px 26px;border-radius:var(--r-card);background:var(--i-cream)}
.callout p{font-size:16px;color:var(--i-muted);max-width:76ch}
.callout b{color:var(--i-ink);font-weight:500}
.soft .callout{background:#fff;box-shadow:var(--shadow-card)}
.note{font-size:14px;color:var(--i-muted);margin-top:14px}
.src{font-size:13px;color:var(--i-muted);margin-top:14px}

/* dl "You get / You bring" rows (journey steps, service cards) */
.give{display:grid;gap:10px;margin:22px 0 0;padding-top:18px;border-top:1px solid var(--i-line)}
.give div{display:grid;grid-template-columns:86px minmax(0,1fr);gap:12px;align-items:baseline}
.give dt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-muted)}
.give dd{margin:0;font-size:15px;color:var(--i-ink)}
.give .no dd{color:var(--i-muted)}

/* ---------- journey: Clover step cards, connected by one rail ---------- */
.journey{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* steps never get a transform or z-index: the rail (z 2) must paint over the card but under the node (z 3) */
.jstep{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:28px 26px 26px}
.jstep.first{box-shadow:0 0 0 2px var(--i-coral),var(--shadow-card)}
.jstep .top{display:flex;align-items:center;margin-bottom:20px;min-height:48px}
.node{position:relative;z-index:3;flex:none;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;background:#fff;color:var(--i-muted);box-shadow:inset 0 0 0 2px var(--i-line);transition:background-color .35s,color .35s,box-shadow .35s}
.node.on{background:var(--i-coral);color:#fff;box-shadow:none}
.node.live{background:var(--i-navy);color:#fff;box-shadow:none}
.meta-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.meta{font-size:13px;font-weight:500;padding:6px 12px;border-radius:var(--r-pill);background:var(--i-lav);color:var(--i-navy)}
.meta.free{background:rgba(23,138,87,.1);color:var(--i-ok)}
.jstep h3{font-size:20px;font-weight:600;letter-spacing:0;line-height:1.25;margin-bottom:8px}
.jstep>p{color:var(--i-muted);font-size:15.5px}
.exit{margin-top:14px;font-size:14px;color:var(--i-muted);display:flex;gap:8px}
.exit svg{flex:none;width:16px;height:16px;margin-top:3px;color:var(--i-ok)}
.jstep .spacer{flex:1}
.jstep.first .btn{margin-top:20px}
.rail{position:absolute;z-index:2;pointer-events:none;display:none;border-radius:2px;background:var(--i-line)}
/* fill is revealed with clip-path so the coral-to-navy gradient keeps its full length */
.rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--i-coral),var(--i-coral) 60%,var(--i-navy));clip-path:inset(0 calc((1 - var(--fill,1)) * 100%) 0 0);transition:clip-path .25s linear}
.rail.v i{background:linear-gradient(180deg,var(--i-coral),var(--i-coral) 60%,var(--i-navy));clip-path:inset(0 0 calc((1 - var(--fill,1)) * 100%) 0)}
.rail.ready{display:block}
.handoff{position:absolute;z-index:4;display:none;align-items:center;gap:7px;padding:7px 14px 7px 9px;border-radius:var(--r-pill);background:#fff;box-shadow:var(--shadow-card),inset 0 0 0 1px var(--i-line);font-size:13px;font-weight:500;color:var(--i-muted);white-space:nowrap;transform:translate(-100%,-50%);transition:color .35s,box-shadow .35s}
.handoff b{flex:none;width:18px;height:18px;border-radius:50%;background:var(--i-lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23334075' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h6M8.5 5.5L11 8l-2.5 2.5'/%3E%3C/svg%3E") center/16px no-repeat}
.handoff.ready{display:inline-flex}
.handoff.on{color:var(--i-ink);box-shadow:var(--shadow-card),inset 0 0 0 1.5px var(--i-coral)}
.rail.v~.handoff{transform:translate(-14px,-50%)}
.rail.v~.handoff b{transform:rotate(90deg)}
/* below 1100px three cards are too narrow for a pill beside the node: the journey stacks */
@media (max-width:1100px){
  .journey{grid-template-columns:minmax(0,1fr);gap:56px;padding-left:56px}
  .jstep .top{position:absolute;left:-56px;top:26px;margin:0;min-height:0}
  .node{width:40px;height:40px;font-size:16px}
}

/* ---------- services (home) ---------- */
.svc{display:flex;flex-direction:column}
.svc .tag{margin-bottom:18px}
.svc h3{font-size:22px;font-weight:500;margin-bottom:10px}
.svc>p{margin-bottom:18px}
.svc .checks{margin-bottom:20px}
.svc .more{margin-top:auto;align-self:flex-start}
.firsts{margin-top:20px;padding:22px 26px;border-radius:var(--r-card);background:var(--i-cream);display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:24px;align-items:start}
.firsts .fh{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-muted);max-width:16ch}
.firsts .fh small{display:block;font-weight:400;letter-spacing:0;text-transform:none;margin-top:4px}
.fb b{display:block;font-size:13px;font-weight:600;color:var(--i-coral-700);margin-bottom:4px}
.fb p{font-size:15px;color:var(--i-ink)}

/* ---------- belief + pains (home) ---------- */
.belief{font-size:clamp(28px,3.2vw,42px);font-weight:400;line-height:1.15;letter-spacing:-.01em;color:var(--i-ink);max-width:24ch}
.belief span{color:var(--i-muted)}
.pains{margin-top:clamp(36px,5vw,56px)}
.pain .ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(234,108,86,.12);color:var(--i-coral-700);margin-bottom:18px}
.pain .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}

/* ---------- calculators (home cost calculator, workshop planner) ---------- */
.calc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.calc{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:30px}
.calc>h2{font-size:20px;font-weight:600;letter-spacing:0;line-height:1.3}
.calc>.sub{font-size:15px;color:var(--i-muted);margin:6px 0 20px}
.field{margin-bottom:20px}
.field label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:15px;color:var(--i-muted);margin-bottom:10px}
.field output{font-size:17px;font-weight:600;color:var(--i-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;--p:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--i-navy) var(--p),var(--i-lav) var(--p))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--i-lav)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--i-navy)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;margin-top:-9px;box-shadow:0 0 0 2px var(--i-navy),var(--shadow-sm);transition:box-shadow .15s ease,transform var(--t-press) var(--ease-out)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 0 0 2px var(--i-navy),0 0 0 9px rgba(51,64,117,.14)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--i-navy),0 0 0 6px rgba(234,108,86,.45)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border:2px solid var(--i-navy);border-radius:50%;background:#fff}
.result{margin-top:6px;padding:22px;border-radius:16px;background:var(--i-cream)}
.result .lbl{font-size:14px;color:var(--i-muted)}
.result .big{font-size:clamp(34px,4vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--i-ink);font-variant-numeric:tabular-nums;margin:4px 0}
.result .row{display:flex;justify-content:space-between;gap:12px;font-size:15px;color:var(--i-muted);padding-top:12px;margin-top:12px;border-top:1px solid var(--i-line)}
.result .row b{color:var(--i-ok);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.calc .btn{width:100%;margin-top:20px}
.fine{font-size:13px;color:var(--i-muted);margin-top:12px;text-align:center}

/* ---------- ink ticker (Clover thin black bar) ---------- */
.ticker{background:var(--i-ink);color:#fff}
.ticker ul{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;list-style:none;margin:0;padding:18px var(--pad);font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.ticker li{display:flex;align-items:center;gap:28px;white-space:nowrap}
.ticker li+li::before{content:"|";opacity:.4}

/* ---------- gradient panel (Clover blue to pink, in ITAN navy to coral) ---------- */
.gradient{background:linear-gradient(105deg,#334075 0%,#4b4a85 40%,#a85a73 72%,#EA6C56 100%);color:#fff}
.case{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.case .lead{margin-top:16px}
.case-tag{display:inline-block;margin-bottom:18px;padding:7px 12px;border-radius:var(--r-pill);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.quote{margin-top:28px;font-size:18px;line-height:1.5;color:#fff}
.quote cite{display:block;margin-top:10px;font-style:normal;font-size:14px;color:rgba(255,255,255,.8)}
.case-stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:30px}
.case-stats b{display:block;font-size:44px;font-weight:400;letter-spacing:-.02em;line-height:1}
.case-stats span{display:block;margin-top:6px;font-size:14px;color:rgba(255,255,255,.85);max-width:22ch}
.systems{display:grid;gap:12px}
.glass{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:16px;padding:16px 20px;color:#fff}
.glass b{display:block;font-size:16px;font-weight:600}
.glass span,.glass p{display:block;font-size:14.5px;color:rgba(255,255,255,.88);margin-top:2px}
.glass h3{color:#fff;font-size:18px;font-weight:600;letter-spacing:0;line-height:1.3;margin-bottom:6px}

/* ---------- team ---------- */
.people{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.person{display:grid;grid-template-columns:88px minmax(0,1fr);gap:22px;align-items:start}
.avatar{width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--i-navy);display:grid;place-items:center;font-size:26px;font-weight:600;color:#fff;position:relative}
.avatar.c2{background:var(--i-coral)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person h3{font-size:22px;font-weight:500;margin:0}
.person .role{font-size:14px;color:var(--i-coral-700);font-weight:500;margin:4px 0 14px}
.person ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.person li{font-size:15px;color:var(--i-muted);padding-left:16px;position:relative}
.person li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--i-coral)}
.person li b{color:var(--i-ink);font-weight:500}
.record{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.record li{background:var(--i-cream);border-radius:var(--r-card);padding:26px 26px 24px}
.record b{display:block;font-size:clamp(36px,3.6vw,48px);font-weight:400;letter-spacing:-.02em;line-height:1;color:var(--i-ink)}
.record b small{font-size:.5em;color:var(--i-muted)}
.record span{display:block;margin-top:10px;font-size:15px;color:var(--i-muted)}
.gallery{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 16px;margin-top:40px;scrollbar-width:none}
.gallery::-webkit-scrollbar{display:none}
.gallery figure{flex:none;width:min(78vw,400px);aspect-ratio:4/5;margin:0;border-radius:var(--r-card);overflow:hidden;position:relative;scroll-snap-align:start;background:var(--i-cream)}
.gallery figure.land{width:min(88vw,600px);aspect-ratio:16/10}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery figcaption{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:8px 14px;border-radius:12px;background:rgba(255,255,255,.92);font-size:14px;color:var(--i-ink)}
.gallery figcaption span{display:block;color:var(--i-muted);font-size:12px}
.gallery[hidden],.g-ctrl[hidden]{display:none!important}
.g-ctrl{display:flex;gap:8px;justify-content:flex-end}
.g-ctrl button{width:44px;height:44px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--i-line);display:grid;place-items:center}

/* ---------- navy band (Clover investor band) ---------- */
.band{background:var(--i-navy)}
.ws{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.ws .lead{margin-top:16px}
.pills{list-style:none;padding:0;margin:22px 0 28px;display:flex;flex-wrap:wrap;gap:8px}
.pills li{font-size:14px;padding:8px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);color:#fff}
.steps-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.steps-list li{display:flex;gap:16px;align-items:center;padding:18px 20px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:15.5px}
.steps-list li b{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--i-coral);font-size:15px;font-weight:600}
.band .note{color:rgba(255,255,255,.8)}

/* ---------- promises row ---------- */
.promises{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.promises li{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);background:var(--i-lav);color:var(--i-navy);font-size:15px;font-weight:500}
.promises svg{width:16px;height:16px}

/* ---------- FAQ (Clover rows) ---------- */
.faq{max-width:900px}
.faq details{border:1px solid var(--i-line);border-radius:var(--r-sm);margin-bottom:12px;background:#fff;overflow:hidden}
.faq summary{transition:background-color .15s ease;list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;min-height:44px;font-size:15px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--i-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:22px;height:22px;position:relative;transition:transform .2s var(--ease-out)}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;background:var(--i-ink);border-radius:2px}
.faq summary i::before{left:0;top:9.5px;width:22px;height:3px}
.faq summary i::after{left:9.5px;top:0;width:3px;height:22px;transition:opacity .2s}
.faq details[open] summary i{transform:rotate(90deg)}
.faq details[open] summary i::after{opacity:0}
.faq .ans{overflow:hidden}
.faq .ans p{padding:0 24px 22px;color:var(--i-muted);font-size:15.5px;line-height:1.6;max-width:70ch}

/* ---------- final CTA ---------- */
.final{text-align:center}
.final .h2{max-width:20ch;margin-inline:auto}
.final .lead{max-width:52ch;margin:18px auto 30px}
.notes{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin-top:22px;font-size:14px;color:var(--i-muted);list-style:none;padding:0}
.notes span,.notes li{display:inline-flex;align-items:center;gap:7px}
.notes svg{width:16px;height:16px;color:var(--i-ok)}

/* ---------- footer (identical on every page; Clover ink footer, rounded top) ---------- */
.foot{background:var(--i-ink);color:#fff;border-radius:var(--r-footer) var(--r-footer) 0 0;margin-top:-1px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-block:clamp(48px,6vw,76px)}
.foot-grid .tagline{color:#fff;font-size:clamp(26px,2.6vw,34px);line-height:1.12;max-width:16ch}
.foot-grid .label{color:#C9CBD6;margin-bottom:14px;font-size:16px}
.foot-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px;font-size:17px}
.foot-links a{min-height:32px;display:inline-flex;align-items:center;transition:opacity .15s ease}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-block:22px 110px;font-size:13px;color:#B5B8C6}
.foot-bottom .logo{color:#fff;font-size:16px}
.foot-bottom .logo svg{width:22px;height:22px}

/* ---------- sticky mobile CTA ---------- */
.mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:45;display:none;transform:translateY(140%);transition:transform .4s var(--ease-drawer)}
.mbar.on{transform:none}
.mbar .btn{width:100%;box-shadow:0 14px 34px -10px rgba(20,25,46,.45)}
@media (max-width:760px){.mbar{display:block}}

/* ---------- booking modal ---------- */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;visibility:hidden;pointer-events:none;transition:visibility 0s linear .25s}
.modal.open{visibility:visible;pointer-events:auto;transition-delay:0s}
.modal .scrim{position:absolute;inset:0;background:rgba(20,25,46,.5);opacity:0;transition:opacity .25s var(--ease-out)}
.modal.open .scrim{opacity:1}
.sheet{position:relative;width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;background:#fff;border-radius:var(--r-card);padding:30px;box-shadow:0 30px 80px -20px rgba(20,25,46,.45);opacity:0;transform:scale(.96);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.modal.open .sheet{opacity:1;transform:none;transition-duration:.25s}
@media (max-width:560px){
  .modal{place-items:end stretch;padding:0;transition-delay:.3s}
  .sheet{max-width:none;max-height:92dvh;border-radius:var(--r-card) var(--r-card) 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom));opacity:1;transform:translateY(100%);transition:transform .3s var(--ease-out)}
  .modal.open .sheet{transform:none;transition:transform .45s var(--ease-drawer)}
}
.sheet .x{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--i-muted);transition:background-color .15s ease,transform var(--t-press) var(--ease-out)}
.sheet .x:active{transform:scale(.92)}
.sheet h2{font-size:26px;font-weight:500;line-height:1.2;margin:12px 0 6px;padding-right:40px}
.sheet .sub{color:var(--i-muted);font-size:15px;margin-bottom:22px}
.prog{display:flex;gap:6px;margin:0 48px 6px 0}
.prog i{flex:1;height:4px;border-radius:4px;background:var(--i-lav);overflow:hidden;position:relative}
.prog i::after{content:"";position:absolute;inset:0;background:var(--i-navy);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out)}
.prog i.on::after{transform:none}
.q{font-size:15px;font-weight:600;margin:18px 0 12px;color:var(--i-ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-b{min-height:44px;padding:0 16px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--i-line);font-size:15px;transition:background-color .15s ease,box-shadow .15s ease,color .15s ease,transform var(--t-press) var(--ease-out)}
.chip-b:active{transform:scale(.97)}
.chip-b[aria-pressed=true]{background:var(--i-navy);color:#fff;box-shadow:none}
.inp{display:block;margin-bottom:12px}
.inp span{display:block;font-size:14px;color:var(--i-muted);margin-bottom:6px}
.inp input,.inp textarea{width:100%;min-height:50px;padding:13px 16px;border-radius:12px;border:1.5px solid var(--i-line);background:#fff;color:var(--i-ink);font:400 16px/1.4 'Poppins',Arial,sans-serif;transition:border-color .18s,box-shadow .18s}
.inp textarea{min-height:84px;resize:vertical}
.inp input:focus,.inp textarea:focus{outline:none;border-color:var(--i-navy);box-shadow:0 0 0 4px rgba(51,64,117,.12)}
.inp input:invalid:not(:placeholder-shown){border-color:#E5484D}
.sheet .acts{display:flex;gap:10px;margin-top:22px}
.sheet .acts .btn{flex:1}
.sheet .acts .back{flex:0 0 auto}
.step-pane[hidden]{display:none}
.legal{font-size:13px;color:var(--i-muted);margin-top:14px}
.done{text-align:center;padding:20px 0 8px}
.done h2{padding:0}
.done .tick{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:rgba(23,138,87,.12);color:var(--i-ok)}
/* the one celebration moment: the tick settles in, then its check draws */
.done:not([hidden]) .tick{animation:tick-in .32s var(--ease-out) both}
.done:not([hidden]) .tick path{stroke-dasharray:22;stroke-dashoffset:22;animation:draw .36s var(--ease-out) .14s forwards}
@keyframes tick-in{from{opacity:0;transform:scale(.8)}}
@keyframes draw{to{stroke-dashoffset:0}}
.hl{color:var(--i-navy);font-weight:600}

/* ---------- consent ---------- */
.consent{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:70;max-width:400px;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:0 20px 50px -12px rgba(20,25,46,.3),inset 0 0 0 1px var(--i-line);font-size:14px;color:var(--i-muted);display:none}
.consent.show{display:block}
.consent{transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
@starting-style{.consent.show{opacity:0;transform:translateY(12px)}}
.consent p{margin-bottom:12px}
.consent .acts{display:flex;gap:8px}
.consent .btn{min-height:44px;padding:0 16px;font-size:14px;flex:1}
@media (max-width:760px){.consent{right:12px;max-width:none}}


/* checks on navy */
.band .checks li,.glass .checks li{color:rgba(255,255,255,.9)}
.band .checks li b,.glass .checks li b{color:#fff}
.band .checks li::before,.glass .checks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 9.4l3 3 6-6.6' fill='none' stroke='%23F4A595' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.glass .checks{margin-top:14px}

/* resource pages: prompt blocks with a copy button */
.kit{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:920px}
.kit .card{padding:30px}
.kit .step-h{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.kit .step-h b{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--i-coral);color:#fff;font-size:15px;font-weight:600}
.kit .step-h h2{font-size:21px;font-weight:600;letter-spacing:0;line-height:1.25}
.kit .step-h .meta{margin-left:auto}
.kit p{color:var(--i-muted);font-size:15.5px}
.kit p b{color:var(--i-ink);font-weight:600}
.prompt{position:relative;margin-top:16px;border-radius:16px;background:var(--i-cream)}
.prompt pre{margin:0;padding:20px 22px;padding-top:56px;white-space:pre-wrap;overflow-wrap:anywhere;font:400 13px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--i-ink)}
.prompt .copy{position:absolute;top:10px;right:10px;left:auto}
.prompt .lbl{position:absolute;top:18px;left:22px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-muted)}
.copy{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r-pill);background:#fff;box-shadow:inset 0 0 0 1.5px var(--i-line);font-size:14px;font-weight:500;color:var(--i-ink);transition:box-shadow .2s ease,background-color .2s ease,color .2s ease,transform var(--t-press) var(--ease-out)}
.copy:active{transform:scale(.97)}
.copy .ico{display:grid;width:16px;height:16px}
.copy .ico svg{grid-area:1/1;transition:opacity .15s ease,transform .2s var(--ease-out)}
.copy svg{width:16px;height:16px}
.copy .ok{opacity:0;transform:scale(.6)}
.copy.done{background:var(--i-ok);color:#fff;box-shadow:none}
.copy.done .ok{opacity:1;transform:none}.copy.done .cp{opacity:0;transform:scale(.6)}

/* ---------- hover: only on a real pointer (touch fires sticky hovers on tap) ---------- */
@media (hover:hover) and (pointer:fine){
  .btn-navy:hover{background:var(--i-navy-700)}
  .btn-outline:hover{box-shadow:inset 0 0 0 1.5px var(--i-navy)}
  .btn-white:hover{box-shadow:var(--shadow-card)}
  .btn-ghost-w:hover{box-shadow:inset 0 0 0 1.5px #fff}
  .btn:hover .arr .al,.more:hover .arr .al,.card-link:hover .arr .al{transform:none;opacity:1}
  .btn:hover .arr .ah,.more:hover .arr .ah,.card-link:hover .arr .ah{transform:translateX(2px)}
  .card-link:hover{transform:translateY(-3px)}
  .card-link:hover::before{opacity:1}
  /* hovers land instantly and leave softly (Linear); the press scale keeps its own timing */
  .faq summary:hover,.foot-links a:hover,.nav-links a:hover,.crumbs a:hover{transition-duration:0s}
  .sheet .x:hover{transition:background-color 0s,transform var(--t-press) var(--ease-out)}
  .chip-b:hover{transition:background-color 0s,box-shadow 0s,color 0s,transform var(--t-press) var(--ease-out)}
  .copy:hover{transition:box-shadow 0s,background-color .2s ease,color .2s ease,transform var(--t-press) var(--ease-out)}
  .menu-btn:hover{transition:transform var(--t-press) var(--ease-out),box-shadow 0s}
  .g-ctrl button:hover{transition:box-shadow 0s,transform var(--t-press) var(--ease-out)}
  .btn-outline:hover,.btn-ghost-w:hover{transition:transform var(--t-press) var(--ease-out),background-color 0s,color 0s,box-shadow 0s}
  .btn:hover .arr .al,.more:hover .arr .al,.card-link:hover .arr .al{transition:transform .22s var(--ease-out),opacity .15s ease}
  .btn:hover .arr .ah,.more:hover .arr .ah,.card-link:hover .arr .ah{transition:transform .22s var(--ease-out)}
  .nav-links a:hover,.crumbs a:hover{color:var(--i-navy)}
  .foot-links a:hover{opacity:.7}
  .menu-btn:hover{box-shadow:inset 0 0 0 1.5px var(--i-navy)}
  .chip-b:hover{box-shadow:inset 0 0 0 1.5px var(--i-navy)}
  .chip-b[aria-pressed=true]:hover{box-shadow:none}
  .sheet .x:hover{background:var(--i-cream)}
  .copy:hover{box-shadow:inset 0 0 0 1.5px var(--i-navy)}
  .copy.done:hover{box-shadow:none}
  .faq summary:hover{background:var(--i-cream)}
  .g-ctrl button:hover{box-shadow:inset 0 0 0 1.5px var(--i-navy)}
  input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--i-navy),0 0 0 6px rgba(51,64,117,.10)}
}
.g-ctrl button{transition:box-shadow .2s ease,transform var(--t-press) var(--ease-out)}
.g-ctrl button:active{transform:scale(.94)}


/* news: article index + long-form article */
.news-list{display:grid;gap:20px}
.news-item{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start}
.news-item time{font-size:14px;color:var(--i-muted);padding-top:4px}
.news-item h3{font-size:22px;font-weight:500;line-height:1.25;margin:10px 0 8px}
.news-item .more{margin-top:10px}
.article-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:20px;font-size:14px;color:var(--i-muted)}
.prose{max-width:720px}
.prose>*+*{margin-top:18px}
.prose h2{font-size:clamp(24px,2.4vw,30px);font-weight:500;line-height:1.2;margin-top:44px}
.prose p,.prose li{font-size:17px;line-height:1.7;color:var(--i-text)}
.prose ul:not(.checks),.prose ol{padding-left:22px;display:grid;gap:8px}
.prose a{color:var(--i-navy);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose strong{font-weight:600;color:var(--i-ink)}
.prose .checks li{font-size:17px}
.prose .callout,.prose .cream-card{margin-top:32px}
.sources{margin-top:44px;padding:24px 26px;border-radius:var(--r-card);background:var(--i-cream)}
.sources h2{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-muted);margin:0 0 10px}
.sources ol{padding-left:20px;display:grid;gap:6px}
.sources li{font-size:15px;line-height:1.5;color:var(--i-muted)}
.sources a{color:var(--i-navy);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.disclaimer{font-size:14px;color:var(--i-muted);margin-top:18px}
@media (max-width:760px){.news-item{grid-template-columns:minmax(0,1fr);gap:4px}}
@media (max-width:1180px) and (min-width:1001px){.nav-links{gap:2px}.nav-links a{--nav-px:10px;font-size:15px}}


/* resource filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 28px}
.filters .chip-b{background:#fff}
.filters .chip-b[aria-pressed=true]{background:var(--i-navy)}
.res .cat{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-coral-700);margin-bottom:8px}
.res[hidden]{display:none}

/* automation scorecard */
.sc-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.sc-rows{list-style:none;padding:0;display:grid;gap:14px}
.sc-row{position:relative;background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:20px 22px 22px}
.sc-row .sc-name{display:block;margin-bottom:14px;padding-right:44px}
.sc-row .sc-name span,.sc-f span{display:block;font-size:13px;color:var(--i-muted);margin-bottom:6px}
.sc-in,.sc-f select{width:100%;min-height:46px;padding:11px 14px;border-radius:12px;border:1.5px solid var(--i-line);background:#fff;color:var(--i-ink);font:400 16px/1.3 'Poppins',Arial,sans-serif;transition:border-color .15s ease,box-shadow .15s ease}
.sc-in{font-weight:500}
.sc-f select{-webkit-appearance:none;appearance:none;padding-right:36px;font-size:15px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23666A78' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 12px center/16px no-repeat;cursor:pointer}
.sc-in:focus,.sc-f select:focus{outline:none;border-color:var(--i-navy);box-shadow:0 0 0 4px rgba(51,64,117,.12)}
.sc-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sc-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--i-muted);transition:background-color .15s ease,transform var(--t-press) var(--ease-out)}
.sc-x:active{transform:scale(.92)}
.sc-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sc-res{position:sticky;top:104px}
.sc-res .field{margin-bottom:6px}
.sc-total{margin-top:14px;padding:18px 20px;border-radius:16px;background:var(--i-cream)}
.sc-total .lbl{font-size:14px;color:var(--i-muted)}
.sc-total .big{font-size:clamp(30px,3.4vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--i-ink);font-variant-numeric:tabular-nums}
.rank{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.rank li{padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--i-line);background:#fff}
.rank li.top{box-shadow:inset 0 0 0 2px var(--i-coral)}
.rk-top{display:flex;align-items:baseline;gap:10px}
.rk-n{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:600;background:var(--i-lav);color:var(--i-navy);transform:translateY(-1px)}
.rank li.top .rk-n{background:var(--i-coral);color:#fff}
.rk-name{flex:1;min-width:0;font-size:15px;font-weight:500;color:var(--i-ink);overflow-wrap:anywhere}
.rk-eur{font-size:15px;font-weight:600;color:var(--i-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-bar{height:6px;border-radius:6px;background:var(--i-lav);margin:10px 0 8px;overflow:hidden}
.rk-bar i{display:block;height:100%;border-radius:inherit;background:var(--i-navy);transform-origin:left center;transition:transform .35s var(--ease-out)}
.rank li.top .rk-bar i{background:var(--i-coral)}
.rk-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-size:13px;color:var(--i-muted)}
.rd{font-weight:500}
.rd.ok{color:var(--i-ok)}.rd.mid{color:var(--i-navy)}.rd.fix{color:var(--i-coral-700)}
.sc-empty{margin-top:16px;padding:18px;border-radius:14px;border:1.5px dashed var(--i-line);font-size:15px;color:var(--i-muted);text-align:center}
.sc-pick{margin-top:14px;font-size:15px;color:var(--i-muted)}
.sc-pick b{color:var(--i-ink);font-weight:600}
.sc-res .btn{width:100%;margin-top:16px}
.method{counter-reset:m;list-style:none;padding:0;display:grid;gap:14px;max-width:760px}
.method li{position:relative;padding-left:52px;font-size:16px;color:var(--i-muted)}
.method li b{color:var(--i-ink);font-weight:600}
.method li::before{counter-increment:m;content:counter(m);position:absolute;left:0;top:-4px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--i-coral);color:#fff;font-size:14px;font-weight:600}

/* checklist */
.ck-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.ck-group h2{font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-muted);margin:28px 0 12px}
.ck-group:first-child h2{margin-top:0}
.ck-list{list-style:none;padding:0;display:grid;gap:10px}
.ck{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:18px 20px;border-radius:16px;background:#fff;box-shadow:var(--shadow-card);cursor:pointer;transition:box-shadow .2s ease,transform var(--t-press) var(--ease-out)}
.ck:active{transform:scale(.99)}
.ck input{position:absolute;opacity:0;width:1px;height:1px}
.ck .box{width:28px;height:28px;border-radius:9px;box-shadow:inset 0 0 0 2px var(--i-line);display:grid;place-items:center;color:#fff;transition:background-color .15s ease,box-shadow .15s ease}
.ck .box svg{width:16px;height:16px;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .25s var(--ease-out)}
.ck input:checked+.box{background:var(--i-ok);box-shadow:none}
.ck input:checked+.box svg{stroke-dashoffset:0}
.ck input:focus-visible+.box{outline:2px solid var(--i-coral);outline-offset:3px}
.ck b{display:block;font-size:16px;font-weight:600;color:var(--i-ink);line-height:1.35}
.ck small{display:block;margin-top:4px;font-size:14.5px;line-height:1.5;color:var(--i-muted)}
.ck-side{position:sticky;top:104px}
.ck-count{font-size:clamp(34px,4vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--i-ink);font-variant-numeric:tabular-nums}
.ck-count small{font-size:.45em;color:var(--i-muted);font-weight:400}
.ck-bar{height:8px;border-radius:8px;background:var(--i-lav);margin:12px 0 14px;overflow:hidden}
.ck-bar i{display:block;height:100%;background:var(--i-ok);transform-origin:left center;transform:scaleX(0);transition:transform .35s var(--ease-out)}
.ck-side .copy,.ck-side .btn{width:100%;justify-content:center;margin-top:10px}
@media (hover:hover) and (pointer:fine){
  .sc-x:hover{background:var(--i-cream)}
  .sc-f select:hover,.sc-in:hover{border-color:#cfc8ba}
  .ck:hover{box-shadow:var(--shadow-hover)}
}
@media (max-width:1000px){.sc-wrap,.ck-wrap{grid-template-columns:minmax(0,1fr)}.sc-res,.ck-side{position:static}}
@media (max-width:560px){.sc-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.sc-row{padding:18px 16px 18px}}


/* odoo proof: what the 22 modules automate (bar, legend and area cards highlight together) */
.auto-card{position:sticky;top:104px}
.legend-auto{gap:4px}
.legend-auto li{grid-template-columns:12px 2.2rem minmax(0,1fr);padding:8px 10px;margin:0 -10px;border-radius:12px;transition:opacity .15s ease,background-color .15s ease}
.legend-auto a{display:block;font-weight:500;color:var(--i-ink)}
.legend-auto small{display:block;font-size:13.5px;color:var(--i-muted)}
.fine-l{font-size:13px;line-height:1.5;color:var(--i-muted);margin-top:18px;padding-top:14px;border-top:1px solid var(--i-line)}
.area-h{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.area-n{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:14px;font-weight:600}
.area-h strong{font-size:18px}
.areas .checks{margin:0 0 14px;gap:8px}
.areas .checks li{font-size:15px;color:var(--i-text)}
.areas .mods code{background:var(--i-cream);color:var(--i-muted);font-size:12px}
.areas>li{scroll-margin-top:110px;transition:opacity .15s ease,box-shadow .2s ease}
.auto-wrap .bar i{transition:opacity .15s ease}
@media (hover:hover) and (pointer:fine){
  .legend-auto li:hover{background:var(--i-cream)}
  .auto-wrap:has([data-k=rep]:hover) .bar i:not([data-k=rep]),.auto-wrap:has([data-k=rep]:hover) .legend-auto li:not([data-k=rep]),.auto-wrap:has([data-k=rep]:hover) .areas>li:not([data-k=rep]){opacity:.35}
  .auto-wrap:has([data-k=ops]:hover) .bar i:not([data-k=ops]),.auto-wrap:has([data-k=ops]:hover) .legend-auto li:not([data-k=ops]),.auto-wrap:has([data-k=ops]:hover) .areas>li:not([data-k=ops]){opacity:.35}
  .auto-wrap:has([data-k=fin]:hover) .bar i:not([data-k=fin]),.auto-wrap:has([data-k=fin]:hover) .legend-auto li:not([data-k=fin]),.auto-wrap:has([data-k=fin]:hover) .areas>li:not([data-k=fin]){opacity:.35}
  .auto-wrap:has([data-k=sales]:hover) .bar i:not([data-k=sales]),.auto-wrap:has([data-k=sales]:hover) .legend-auto li:not([data-k=sales]),.auto-wrap:has([data-k=sales]:hover) .areas>li:not([data-k=sales]){opacity:.35}
  .auto-wrap:has([data-k=cs]:hover) .bar i:not([data-k=cs]),.auto-wrap:has([data-k=cs]:hover) .legend-auto li:not([data-k=cs]),.auto-wrap:has([data-k=cs]:hover) .areas>li:not([data-k=cs]){opacity:.35}
  .auto-wrap .areas>li:hover{box-shadow:var(--shadow-hover)}
}
@media (max-width:860px){.auto-card{position:static}}


/* home calculator: the saving is the hero */
.cost-line{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:16px 0 14px;border-top:1px solid var(--i-line);margin-top:4px}
.cost-line>span{font-size:14px;color:var(--i-muted)}
.cost-line b{font-size:17px;font-weight:600;color:var(--i-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cost-line small{grid-column:1/-1;font-size:13px;color:var(--i-muted)}
.save{margin-top:4px;padding:22px 22px 18px;border-radius:18px;background:var(--i-navy);color:#fff}
.save-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;color:rgba(255,255,255,.82)}
.save-pct output{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.save-big{display:flex;align-items:baseline;gap:10px;margin:6px 0 4px;font-size:clamp(40px,4.4vw,54px);font-weight:500;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.save-big small{font-size:16px;font-weight:400;color:rgba(255,255,255,.8);letter-spacing:0}
.save-facts{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;color:rgba(255,255,255,.86)}
.save-facts b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.save input[type=range]{margin-top:12px}
.save input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--i-coral) var(--p),rgba(255,255,255,.22) var(--p))}
.save input[type=range]::-moz-range-track{background:rgba(255,255,255,.22)}
.save input[type=range]::-moz-range-progress{background:var(--i-coral)}
.save input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--i-coral),var(--shadow-sm)}


/* home film: autoplays muted when in view */
.film{position:relative;max-width:1080px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:var(--i-cream);box-shadow:var(--shadow-card)}
.film video{width:100%;height:100%;object-fit:cover}
.film-btn{position:absolute;right:16px;bottom:16px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--i-ink);box-shadow:var(--shadow-card);transition:transform var(--t-press) var(--ease-out),opacity .2s ease}
.film-btn:active{transform:scale(.94)}
.film-btn svg{grid-area:1/1;width:20px;height:20px;fill:currentColor}
.film-btn .i-pause{display:none}
.film.playing .film-btn .i-pause{display:block}.film.playing .film-btn .i-play{display:none}
.film:not(.started) .film-btn{width:72px;height:72px;right:calc(50% - 36px);bottom:calc(50% - 36px);background:var(--i-navy);color:#fff}
.film:not(.started) .film-btn svg{width:28px;height:28px}
#film{padding-top:clamp(48px,6vw,80px)}

/* ================= page components ================= */

/* odoo: "what you receive" repository card */
.repo h2{font-size:20px;font-weight:600;letter-spacing:0;line-height:1.3}
.repo>p{font-size:15px;color:var(--i-muted);margin-top:6px}
.tree{list-style:none;padding:0;margin:18px 0 0}
.tree li{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--i-line);font-size:14.5px;color:var(--i-muted)}
.tree li code{color:var(--i-navy);font-weight:500}
.tree li.in code{padding-left:16px}
.kv{margin-top:14px}
.kv div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--i-line);font-size:15px}
.kv dt{color:var(--i-muted)}
.kv dd{color:var(--i-ink);font-weight:500;text-align:right}
.repo .btn{width:100%;margin-top:18px}

/* odoo: module count bar + areas */
.count{margin-top:22px}
.bar{display:flex;gap:3px;height:12px;border-radius:var(--r-pill);overflow:hidden;margin:16px 0}
.bar i{display:block}
.legend{list-style:none;padding:0;display:grid;gap:6px}
.legend li{display:grid;grid-template-columns:12px 2.2rem minmax(0,1fr);gap:10px;align-items:baseline;font-size:15px;color:var(--i-muted)}
.legend li::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c);transform:translateY(1px)}
.legend b{text-align:right;font-weight:600;color:var(--i-ink);font-variant-numeric:tabular-nums}
.areas{list-style:none;padding:0;display:grid;gap:14px}
.areas>li{background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-card);padding:22px 24px}
.areas strong{display:block;font-size:17px;font-weight:600;color:var(--i-ink)}
.areas p{font-size:15px;color:var(--i-muted);margin-top:4px}
.mods{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.mods code{display:block;max-width:100%;overflow-wrap:anywhere;padding:4px 10px;border-radius:var(--r-pill);background:var(--i-lav);color:var(--i-navy);font-size:12.5px}

/* odoo: ownership ledger + numbered needs */
.ledger{display:grid;gap:0}
.ledger>div{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:28px;padding:24px 0;border-top:1px solid var(--i-line)}
.ledger>div:last-child{border-bottom:1px solid var(--i-line)}
.ledger h3{font-size:19px;font-weight:600;letter-spacing:0;line-height:1.3}
.ledger p{color:var(--i-muted);font-size:15.5px;max-width:68ch}
.needs{list-style:none;padding:0}
.needs li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
.needs li>b{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--i-coral);color:#fff;font-size:15px;font-weight:600}
.needs h3{margin-top:8px}

/* workshops: agenda */
.agenda{list-style:none;padding:0;max-width:960px}
.agenda li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;padding:22px 0;border-top:1px solid var(--i-line)}
.agenda li:last-child{border-bottom:1px solid var(--i-line)}
.agenda time{font-size:18px;font-weight:500;color:var(--i-ink);font-variant-numeric:tabular-nums}
.agenda time span{display:block;font-size:14px;font-weight:400;color:var(--i-muted)}
.agenda .phase{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-coral-700);margin-bottom:4px}
.agenda h3{font-size:19px;font-weight:600;letter-spacing:0;line-height:1.3}
.agenda p:not(.phase){color:var(--i-muted);font-size:15.5px;margin-top:4px;max-width:70ch}
.agenda li.break h3{color:var(--i-muted);font-weight:500}

/* workshops: pricing table */
.pricing-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;align-items:start}
.price-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.price-table th{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--i-muted);text-align:left;padding:0 12px 12px 0}
.price-table td{padding:16px 12px 16px 0;border-top:1px solid var(--i-line);vertical-align:top;font-size:16px;color:var(--i-ink)}
.price-table td b{display:block;font-size:18px;font-weight:600}
.price-table td span{display:block;font-size:14px;color:var(--i-muted)}
.price-table tr.example td{background:var(--i-cream)}
.price-table tr.example td:first-child{padding-left:12px;border-radius:12px 0 0 12px}
.price-table tr.example td:last-child{border-radius:0 12px 12px 0}
.price-table .ex{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--i-coral-700)}

/* resources */
.res{display:flex;flex-direction:column}
.res .tag{margin-bottom:16px}
.res h3{font-size:20px}
.res .meta-row{margin:14px 0 0}
.res .more{margin-top:auto;padding-top:14px;align-self:flex-start}
.res.soon{box-shadow:none;background:transparent;border:1.5px dashed var(--i-line)}
.res.soon .tag{background:var(--i-cream);color:var(--i-muted)}

/* print: "Save the programme as PDF" (workshops) */
.print-only{display:none}
@media print{
  .nav,.mbar,.modal,.consent,.btn,.copy,.calc,.foot,.feature-bar,.skip,.no-print{display:none!important}
  .prompt pre{padding-top:20px}
  .card{box-shadow:none;border:1px solid var(--i-line)}
  .print-only{display:block;color:var(--i-muted);font-size:13px;margin-bottom:12px}
  .section{padding-block:24px}
  .soft,.band{background:#fff!important}
  .band .on-navy,.band h2,.band h3,.band .lead,.glass,.glass p,.glass span{color:var(--i-ink)!important}
  .rv{opacity:1!important;transform:none!important}
  .agenda li,.person,.card,.faq details,.price-table tr{break-inside:avoid}
}


/* ================= phone optimisation (2026-10-12): fewer screens, swipe instead of stack ================= */
@media (max-width:760px){
  /* three-card rows become swipe rails with the next card peeking */
  .m-rail{display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 20px;scroll-padding-inline:var(--pad)}
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail>*{flex:0 0 84%;scroll-snap-align:start;min-width:0}
  .m-hint{display:flex;gap:6px;justify-content:center;margin-top:-6px}
  .m-hint i{width:6px;height:6px;border-radius:50%;background:var(--i-line);transition:background-color .2s ease,width .2s var(--ease-out)}
  .m-hint i.on{width:18px;border-radius:6px;background:var(--i-navy)}
  /* hero: headline + CTA in the first screen; the mark animation is desktop-only */
  .hero .media-box{display:none}
  .hero{padding-block:20px 40px}
  /* feature bar 2x2 */
  .feature-bar .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:22px 14px;padding-block:28px}
  .feature{gap:8px;padding-inline:0}
  .feature svg{width:30px;height:30px}
  .feature h3{font-size:13px}
  .feature p{font-size:13.5px}
  /* record: 3 compact tiles in a row */
  .record{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  .record li{padding:16px 12px}
  .record b{font-size:30px}
  .record span{font-size:12.5px;margin-top:6px}
  /* case list tighter */
  .systems{gap:8px}
  .glass{padding:12px 14px}
  .case-stats{gap:24px}
  .case-stats b{font-size:36px}
  /* sections breathe less */
  .section{padding-block:48px}
  .head{margin-bottom:24px}
  .fit-card a,.cream-card a{display:inline-flex;min-height:44px;align-items:center}
}

/* ---------- reveal (only with JS + motion allowed) ---------- */
/* one entrance per page (the routing grid, [data-stagger]) and one bar that draws ([data-draw]). Everything else is simply there. */
.js [data-stagger]:not(.in)>*{opacity:0}
.js .bar[data-draw]:not(.in){clip-path:inset(0 100% 0 0 round 999px)}
.js .bar[data-draw].in{clip-path:inset(0 0 0 0 round 999px);transition:clip-path .9s var(--ease-in-out) .1s}

/* item 4: on touch the arrow answers the press; the sticky CTA's arrow draws once it has landed */
@media (hover:none){
  .btn:active .arr .al{transform:none;opacity:1;transition-duration:.12s}
  .btn:active .arr .ah{transform:translateX(2px);transition-duration:.12s}
}
.mbar.drawn .arr .al{transform:none;opacity:1;transition:transform .26s var(--ease-out) .3s,opacity .15s ease .3s}
.mbar.drawn .arr .ah{transform:translateX(2px);transition:transform .26s var(--ease-out) .3s}

/* item 9: copy label changes in place; the pill keeps the width of the longer label */
.copy .copy-l{display:grid}
.copy .copy-l>span{grid-area:1/1;transition:opacity .2s ease,filter .2s ease}
.copy .t-ok{opacity:0;filter:blur(2px)}
.copy.done .t{opacity:0;filter:blur(2px)}
.copy.done .t-ok{opacity:1;filter:none}

/* item 10: reading progress under the nav on articles (scroll-driven, off the main thread; absent in Firefox) */
@supports (animation-timeline: scroll()){
  body:has(article.prose) .nav::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--i-coral);transform-origin:0 50%;transform:scaleX(0);animation:read-progress auto linear both;animation-timeline:scroll(root block)}
  @keyframes read-progress{to{transform:scaleX(1)}}
}

/* item 1: page-to-page view transitions. The header stays still, content swaps, the underline slides (Chrome/Edge 126+, Safari 18.2+; Firefox loads normally) */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(site-nav){display:none}
::view-transition-new(site-nav){animation:none}
::view-transition-old(root){animation:vt-out .16s cubic-bezier(0.23,1,0.32,1) both}
::view-transition-new(root){animation:vt-in .26s cubic-bezier(0.23,1,0.32,1) both}
::view-transition-group(nav-ink){animation-duration:.32s;animation-timing-function:cubic-bezier(0.77,0,0.175,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@keyframes vt-fade{from{opacity:0}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero-grid,.calc-wrap,.case,.ws,.pricing-grid{grid-template-columns:minmax(0,1fr)}
  .grid-3{grid-template-columns:minmax(0,1fr)}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature-bar .grid{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .firsts{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:36px}
  .ticker ul{flex-direction:column;align-items:center;gap:10px}
  .ticker li+li::before{display:none}
  .ledger>div{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:860px){
  .grid-2,.people,.record{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  body{font-size:16px}
  .hero-ctas .btn,.btn.full-m{width:100%}
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .nav .btn{white-space:nowrap}
  .feature-bar .grid,.grid-4{grid-template-columns:minmax(0,1fr)}
  .feature-bar .grid{gap:28px}
  .card,.calc{padding:24px 20px}
  .person{grid-template-columns:minmax(0,1fr);gap:14px}
  .sheet{padding:24px 20px}
  .tree li{grid-template-columns:minmax(0,1fr);gap:0}
  .agenda li{grid-template-columns:minmax(0,1fr);gap:6px}
  .agenda time{display:flex;gap:10px;align-items:baseline}
  .give div{grid-template-columns:76px minmax(0,1fr)}
  .callout{padding:20px}
  .callout .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0s!important;scroll-behavior:auto!important}
  .btn:active,.chip-b:active,.copy:active,.menu-btn:active,.sheet .x:active,.g-ctrl button:active{transform:none}
  .sheet,.modal.open .sheet,.menu,.menu a,.consent,.card-link,.arr .ah{transform:none!important}
  .arr .al{display:none}
  ::view-transition-new(root){animation:vt-fade .2s ease both}
  ::view-transition-old(root){animation:none}
  ::view-transition-group(nav-ink){animation-duration:0s}
  .menu{clip-path:none;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
  .nav.menu-open .menu{clip-path:none;opacity:1;transition:opacity .2s ease,visibility 0s}
  .menu-btn .ln{transition:none}
  .copy .copy-l>span{filter:none!important}
  .card-link:hover::before{opacity:1}
  .modal:not(.open) .sheet{opacity:0}
  .modal.open .sheet{opacity:1;transition:opacity .2s ease}
  .mbar{transform:none;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
  .mbar.on{opacity:1;visibility:visible;transition-delay:0s}
  .rail i{transition:none}
}