/* Socium Procurement: Sebenza Static. Direction A (warm and welcoming), chosen by Luke on 26 Oct 2026,
   with two pieces from direction C: the stats strip and the "See what you could save" panel.
   Type: Figtree for headings, DM Sans for everything else. Charcoal, ivory and champagne from the logo. */
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-var.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"DM Sans";src:url("/assets/fonts/dm-sans-var.woff2") format("woff2");font-weight:100 1000;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* brand (consent.js reads --ink, --paper, --brass) */
  --ink:#292B2C;--ink-2:#1F2122;--paper:#FFFCF6;--brass:#C5A47C;
  --canvas:#F7F3EB;--canvas-2:#EFE8DB;--card:#FFFCF6;
  --champ:#C5A47C;--champ-hi:#D2B58F;--champ-soft:#F2E8D7;--deep:#7F6538;
  --mut:#5E5A53;--fog:#D9D1C2;--line:rgba(41,43,44,.12);
  --head:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --text:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(20px,4.4vw,56px);
  --sec:clamp(72px,9vw,120px);
  --r:20px;--r-sm:14px;
  --shadow:0 4px 12px rgba(41,43,44,.07);
  --shadow-lg:0 18px 44px rgba(41,43,44,.14);
  --ease:cubic-bezier(.2,.7,.1,1);
  /* motion: one long, soft deceleration for everything that arrives; a quicker curve for things that leave */
  --out:cubic-bezier(.16,1,.3,1);
  --in:cubic-bezier(.7,0,.84,0);
  --inout:cubic-bezier(.65,0,.35,1);
  --head-h:84px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px)}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);font-weight:800;line-height:1.08;letter-spacing:-.01em;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0}
::selection{background:var(--champ);color:var(--ink)}
:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--champ);color:var(--ink);padding:10px 16px;border-radius:9999px;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.nw{white-space:nowrap}
/* sentences stay whole (Luke, 27 Oct): in headings each one takes its own line; in short statements a sentence
   that doesn't fit starts on a new line rather than leaving its first word at the end of the last one */
.sn{display:inline-block}
:is(h1,h2,h3) .sn{display:block}

/* ---------------------------------------------------------------- type */
.h1{font-size:clamp(38px,5.1vw,64px);line-height:1.04}
.h2{font-size:clamp(30px,3.5vw,46px)}
.h3{font-size:clamp(21px,1.9vw,25px);font-weight:700;line-height:1.2}
.lede{font-size:clamp(18px,1.5vw,20px);line-height:1.55;color:var(--mut)}
.eyebrow{display:block;font:600 15px/1.3 var(--text);color:var(--deep);margin:0 0 14px}
.muted{color:var(--mut)}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 26px;border-radius:9999px;border:0;
  background:var(--champ);color:var(--ink);font:600 16px/1.2 var(--text);text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;
  transition:background-color .25s var(--out),color .25s var(--out),box-shadow .25s var(--out),scale .15s var(--out)}
.btn:hover{background:var(--champ-hi);box-shadow:0 8px 20px rgba(127,101,56,.22)}
.btn:active{scale:.97}
/* the label rolls up on hover and its twin (a text-shadow, so nothing is duplicated for screen readers) rolls in */
.btn .bl{display:inline-block;--roll:2.4em;text-shadow:0 var(--roll) currentColor;transition:translate .5s var(--out)}
.btn svg{transition:translate .5s var(--out)}
/* sending: the button holds its width, shows a spinner and says what it's doing; with invoices attached
   it fills as they upload. Then a tick and "Sent" for a moment before the thank-you page. */
.btn{position:relative}
.btn .bl{position:relative;z-index:1}
.btn::after{content:"";position:absolute;inset:0;background:rgba(127,101,56,.26);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .4s var(--out);pointer-events:none}
.btn:not(.is-busy)::after{content:none}
.btn.is-busy{cursor:progress;box-shadow:none}
.btn:disabled:not(.is-busy){opacity:.45;cursor:default}
.btn.is-busy .bl{translate:none!important;text-shadow:none}
.btn.is-busy .bl::before{content:"";display:inline-block;width:14px;height:14px;margin:0 10px -2px 0;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.btn.is-done .bl::before{width:16px;height:16px;margin-bottom:-3px;border:0;border-radius:0;background:currentColor;animation:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes spin{to{rotate:360deg}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .btn:hover .bl{translate:0 calc(var(--roll) * -1)}
  .btn:hover svg{translate:3px 0}
}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--canvas);box-shadow:none}
.on-dark .btn.ghost,.btn.ghost.light{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.on-dark .btn.ghost:hover,.btn.ghost.light:hover{background:#fff;color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--canvas)}
.btn.ink:hover{background:var(--ink-2);box-shadow:0 8px 20px rgba(41,43,44,.22)}
.btn.small{min-height:44px;padding:10px 20px;font-size:15px}
.btn svg{width:16px;height:10px}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px;text-decoration-color:var(--champ);transition:text-decoration-color .25s var(--out),text-underline-offset .25s var(--out)}
.link:hover{text-decoration-color:var(--ink);text-underline-offset:6px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ---------------------------------------------------------------- header */
.site-head{position:fixed;inset:0 0 auto;z-index:100;transition:background-color .45s var(--out),box-shadow .45s var(--out),color .45s var(--out);view-transition-name:site-head}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:var(--head-h)}
.brand{display:block;flex:none;line-height:0;position:relative}
.brand{--wm:var(--ink)}
.wm{display:block;height:44px;width:auto;overflow:visible}
.wm-name{fill:var(--wm);transition:fill .45s var(--out)}
.wm-sub{fill:var(--champ)}
/* hover or focus the logo: PROCUREMENT rolls up out of its line and how to say the name rolls in */
.wm-say{font:500 26.5px/1 var(--text);opacity:0;translate:0 34px}
.wm-pro,.wm-say{transition:translate .6s var(--out),opacity .45s var(--out)}
.brand:is(:hover,:focus-visible) .wm-pro,.say-on .wm-pro{translate:0 -34px;opacity:0}
.brand:is(:hover,:focus-visible) .wm-say,.say-on .wm-say{translate:0 0;opacity:1}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a:not(.btn){position:relative;font-weight:500;font-size:15.5px;text-decoration:none;padding:6px 0}
/* underline draws in from the left and leaves to the right */
.nav a:not(.btn)::after,.lp-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--champ);
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--out)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after,.lp-links a:hover::after{transform:scaleX(1);transform-origin:left}
.site-head{background:rgba(247,243,235,.94);box-shadow:0 1px 0 var(--line)}
@supports (backdrop-filter:blur(10px)){.site-head{background:rgba(247,243,235,.82);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}}
/* over a photo hero the header starts clear, with the light wordmark, and turns solid on scroll */
.photo-top .site-head:not(.scrolled){background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff}
.photo-top .site-head:not(.scrolled) .brand{--wm:#F7F3EB}
.nav-toggle{display:none;margin-left:auto;width:46px;height:46px;border:0;background:transparent;color:inherit;cursor:pointer;border-radius:9999px;position:relative}
.nav-toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)}
.nav-toggle span:first-child{top:18px}.nav-toggle span:last-child{top:26px}
.nav-toggle.is-open span:first-child{top:22px;transform:rotate(45deg)}.nav-toggle.is-open span:last-child{top:22px;transform:rotate(-45deg)}
.mobile-nav{position:fixed;inset:0;z-index:90;background:var(--canvas);padding:calc(var(--head-h) + 12px) var(--pad) 32px;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
.mobile-nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .25s var(--ease)}
.mobile-nav > *{opacity:0;translate:0 14px;transition:opacity .3s,translate .3s}
.mobile-nav.open > *{opacity:1;translate:0 0;transition:opacity .6s var(--out),translate .8s var(--out);transition-delay:calc(60ms + var(--k,0) * 35ms)}
.mobile-nav a:not(.btn){font:700 24px/1.2 var(--head);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.mobile-nav .sub{font:500 18px/1.3 var(--text);padding:10px 0 10px 16px;border-bottom:1px solid var(--line);color:var(--mut)}
.mobile-nav .btn{margin-top:22px;align-self:flex-start}
.mobile-nav p{margin-top:18px;color:var(--mut);line-height:1.7}
.mobile-nav p a{font:inherit;padding:0;border:0;color:var(--ink);text-decoration:none}
/* menu open: a solid header with the dark wordmark, including over a photo hero at the top of the page */
.nav-open .site-head,.nav-open .photo-top .site-head:not(.scrolled){background:var(--canvas);color:var(--ink);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-open .site-head .brand,.nav-open .photo-top .site-head:not(.scrolled) .brand{--wm:var(--ink)}
@media(max-width:980px){
  :root{--head-h:72px}
  .nav{display:none}.nav-toggle{display:block}
  .wm{height:38px}
}

/* ---------------------------------------------------------------- hero (photo) */
.hero{position:relative;color:#fff;background:var(--ink);isolation:isolate;display:flex;align-items:flex-end;min-height:min(100svh,900px)}
.hero .bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero .bg img{width:var(--iw,100%);max-width:none;height:100%;object-fit:cover;object-position:var(--pos,center)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(41,43,44,.92) 0%,rgba(41,43,44,.78) 38%,rgba(41,43,44,.32) 72%,rgba(41,43,44,.14))}
.hero::after{content:"";position:absolute;inset:0 0 auto;height:160px;z-index:-1;background:linear-gradient(180deg,rgba(41,43,44,.55),rgba(41,43,44,0))}
.hero .wrap{width:100%;padding-top:calc(var(--head-h) + 48px);padding-bottom:clamp(48px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:end}
.hero .strap{display:block;font:500 16px/1.45 var(--text);color:rgba(255,255,255,.85);margin:0 0 16px}
.hero h1{margin:0 0 20px;max-width:15ch}
.hero .lead{font-size:clamp(17px,1.45vw,19px);line-height:1.6;color:rgba(255,255,255,.88);max-width:34rem;margin:0 0 30px}
.hero.short{min-height:min(74svh,640px)}
.hero.short h1{max-width:18ch}

/* hero card: business types */
.types{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.types h2{font:700 23px/1.2 var(--head);margin:0 0 6px}
.types p{color:var(--mut);font-size:15.5px;margin:0 0 18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips a,.chips span{display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;border-radius:9999px;background:var(--canvas);font-size:15px;font-weight:500;
  text-decoration:none;box-shadow:inset 0 0 0 1px var(--fog);transition:background .2s,box-shadow .2s}
.chips a{transition:background-color .25s var(--out),box-shadow .25s var(--out),scale .15s var(--out)}
.chips a:hover{background:var(--champ-soft);box-shadow:inset 0 0 0 1px var(--champ)}
.chips a:active{scale:.96}

/* ---------------------------------------------------------------- page hero (no photo) */
.page-head{padding:calc(var(--head-h) + clamp(48px,7vw,96px)) 0 clamp(40px,5vw,64px)}
.page-head h1{max-width:20ch;margin:0 0 18px}
.page-head .lede{max-width:44rem}

/* ---------------------------------------------------------------- sections */
.sec{padding:var(--sec) 0}
.sec.tight{padding:clamp(48px,6vw,72px) 0}
.sec.paper{background:var(--paper)}
.sec.sand{background:var(--canvas-2)}
/* two plain sections in a row share one gap */
.sec:not(.paper):not(.sand):not(.dark) + .sec:not(.paper):not(.sand):not(.dark){padding-top:0}
.sec.dark{background:var(--ink);color:var(--canvas)}
.sec-head{max-width:46rem;margin:0 0 clamp(32px,4vw,52px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .h2{margin:0 0 14px}
.sec-head p{color:var(--mut);font-size:18px}
/* a heading with a paragraph reads across two columns, like the trust intro, rather than stacking */
@media(min-width:901px){
  .sec-head:has(> p){max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
  .sec-head:has(> p) .h2{margin:0}
}
.dark .sec-head p,.dark .muted{color:rgba(247,243,235,.74)}

/* trust intro + stats */
.intro{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,5vw,72px);align-items:end;margin:0 0 clamp(32px,4vw,48px)}
.intro .h2{margin:0;font-size:clamp(28px,3vw,40px)}
.intro p{color:var(--mut);font-size:18px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.stat{padding:clamp(24px,3vw,36px);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font:800 clamp(40px,4.4vw,58px)/1 var(--head);letter-spacing:-.02em;margin:0 0 10px;font-variant-numeric:tabular-nums}
.stat > span{color:var(--mut);font-size:16px}
.stat b span{font:inherit;color:inherit}

/* testimonials */
.quotes{display:grid;grid-template-columns:1fr 1.35fr;gap:20px}
.quote{margin:0;background:var(--card);border-radius:var(--r);padding:clamp(28px,3.4vw,44px);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:26px}
.quote p{font:600 clamp(19px,1.7vw,22px)/1.45 var(--head);letter-spacing:-.005em}
.quote footer{margin-top:auto;display:flex;align-items:center;gap:16px;font-size:15.5px;color:var(--mut)}
.quote footer strong{display:block;color:var(--ink);font-weight:600}
.quote .clogo{width:56px;height:56px;flex:none;object-fit:contain}
.quote-mark{width:34px;height:26px;color:var(--champ)}

/* supplier marquee: rolls left to right; still and wrapped for reduced motion */
.suppliers .label{display:block;text-align:center;font:700 17px/1.3 var(--head);margin:0 0 26px}
.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:roll 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-set{display:flex;align-items:center;gap:clamp(40px,5vw,72px);padding-right:clamp(40px,5vw,72px)}
.marquee img{height:clamp(40px,4vw,52px);width:auto;max-width:180px;object-fit:contain;mix-blend-mode:multiply}
@keyframes roll{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee-track{animation:none;width:auto;justify-content:center}
  .marquee-set{flex-wrap:wrap;justify-content:center;padding-right:0}
  .marquee-set[aria-hidden]{display:none}
}

/* savings example (from direction C) */
.example{display:grid;grid-template-columns:1fr minmax(0,500px);gap:clamp(32px,6vw,96px);align-items:center}
.example .h2{margin:0 0 18px}
.example p{color:var(--mut);font-size:18px;margin:0 0 26px}
.panel{background:var(--card);border-radius:var(--r);padding:24px 26px 20px;box-shadow:var(--shadow-lg)}
.panel-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);font:700 17px/1.2 var(--head)}
.pill{font:500 13px/1 var(--text);border-radius:9999px;padding:7px 11px;background:var(--canvas);color:var(--mut);white-space:nowrap}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--line)}
.row b{display:block;font-weight:600;font-size:16px}
.row small{display:block;color:var(--mut);font-size:14px;margin-top:2px}
.tag{font:600 14px/1 var(--text);border-radius:9999px;padding:8px 12px;background:var(--champ-soft);color:#5C4A2C;white-space:nowrap}
.tag.k{background:var(--canvas);color:var(--mut)}
.panel-f{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:16px;font-size:15px;color:var(--mut)}
.panel-f b{font:800 32px/1 var(--head);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}

/* promises */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;list-style:none}
/* ruled columns rather than boxes: they aren't clickable, so they shouldn't look like buttons */
.cards{gap:clamp(24px,3.4vw,48px)}
.card{position:relative;padding:clamp(22px,2.4vw,30px) 0 0}
.card::before,.value::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(41,43,44,.22);transform-origin:left}
.card .num{display:block;font:800 clamp(40px,4vw,54px)/1 var(--head);letter-spacing:-.03em;color:var(--champ);margin:0 0 22px}
.card h3{font:700 22px/1.2 var(--head);margin:0 0 10px}
.card p{color:var(--mut)}
.note-line{margin-top:28px;font-weight:600;font-size:17px}
.note-line span{color:var(--mut);font-weight:400}

/* steps: big and bold, all four in one view */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none;counter-reset:s}
.steps.pair{grid-template-columns:1fr 1fr}
.step{background:var(--card);border-radius:var(--r);padding:clamp(26px,2.6vw,34px);box-shadow:var(--shadow);display:flex;flex-direction:column}
.step .ico{width:44px;height:44px;border-radius:9999px;background:var(--champ-soft);display:grid;place-items:center;margin:0 0 22px}
.step .ico svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.step small{display:block;font:700 clamp(17px,1.4vw,19px)/1.2 var(--head);letter-spacing:.01em;color:var(--deep);margin:0 0 8px}
.step h3{font:800 clamp(23px,2vw,28px)/1.12 var(--head);margin:0 0 12px}
.step p{color:var(--mut)}
.step p + p{margin-top:10px}
.step .brief{margin-top:20px;padding:16px 18px;border-radius:var(--r-sm);background:var(--canvas)}
.step .brief small{color:var(--mut);font-weight:500;font-size:14px;margin:0 0 4px}
.step .brief b{font-weight:600}
.step .btn{margin-top:auto;align-self:flex-start}
.step .btn-gap{height:22px;flex:none}
.steps.pair .step h3{font-size:clamp(26px,2.6vw,34px)}
.steps.pair .step p{font-size:17.5px}

/* categories */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:0 clamp(20px,3vw,40px);list-style:none;--cols:4}
.cats li{display:flex;align-items:center;gap:12px;padding:18px 0;font-weight:500;border-bottom:1px solid rgba(41,43,44,.16)}
.cats li:nth-child(-n+4){border-top:1px solid rgba(41,43,44,.16)}
.cats li::before{content:"";flex:none;width:8px;height:8px;border-radius:9999px;background:var(--champ)}

/* split: photo + copy */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:center}
.split.flip > :first-child{order:2}
figure.photo{margin:0;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--canvas-2)}
figure.photo img{width:100%;height:100%;object-fit:cover}
.split .h2{margin:0 0 18px}
.split .lede{margin:0 0 24px}
.ticks{list-style:none;display:grid;gap:14px}
.ticks li{position:relative;padding-left:34px}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:9999px;background:var(--champ-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292B2C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}

/* CTA band */
.cta{--cr:calc(var(--r) + 8px);--ctap:clamp(40px,6vw,80px);background:var(--ink);color:var(--canvas);border-radius:var(--cr);padding:var(--ctap);display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);position:relative;overflow:hidden}
.cta .h2{margin:0 0 16px}
.cta p{color:rgba(247,243,235,.78);font-size:18px}
.cta .cta-row{margin-top:30px}
.cta .fine{margin-top:22px;font-size:15px;color:rgba(247,243,235,.6)}

/* the band's graphic: a few weeks of invoices, fanned, the lines worth a look highlighted. It runs off the
   panel's bottom edge, so it reads as paper on a desk rather than a picture in a box */
.cta-art{position:relative;margin:calc(var(--ctap) * -1) calc(var(--ctap) * -1) calc(var(--ctap) * -1) 0;min-height:380px}
.inv-stack{position:absolute;left:50%;top:clamp(44px,5vw,64px);bottom:-60px;width:300px;margin-left:-130px}
.inv{position:absolute;inset:0;border-radius:12px;box-shadow:0 26px 60px rgba(0,0,0,.38);rotate:var(--rot);translate:var(--tx) var(--ty)}
.inv-3{--rot:-11deg;--tx:-74px;--ty:40px;background:
  linear-gradient(rgba(41,43,44,.12),rgba(41,43,44,.12)) 26px 30px/64px 9px no-repeat,
  repeating-linear-gradient(180deg,transparent 0 21px,rgba(41,43,44,.09) 21px 27px) 26px 96px/62% 230px no-repeat,#D6CCB8}
.inv-2{--rot:-5deg;--tx:-36px;--ty:16px;background:
  linear-gradient(rgba(41,43,44,.12),rgba(41,43,44,.12)) 26px 30px/64px 9px no-repeat,
  repeating-linear-gradient(180deg,transparent 0 21px,rgba(41,43,44,.08) 21px 27px) 26px 96px/66% 230px no-repeat,#E9E1D1}
.inv-1{--rot:3deg;--tx:0px;--ty:0px;background:var(--paper);padding:26px 26px 0}
.inv-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}
.inv-mark{width:30px;height:30px;border-radius:8px;background:var(--canvas-2);box-shadow:inset 0 0 0 1px var(--fog)}
.inv-head b{font:700 12px/1 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.inv-meta{display:grid;gap:7px;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.inv-meta i{display:block;height:6px;border-radius:3px;background:rgba(41,43,44,.12);width:46%}
.inv-meta i + i{width:30%}
.inv-rows{list-style:none;display:grid;gap:14px}
.inv-rows li{position:relative;display:flex;align-items:center;gap:10px;height:12px;isolation:isolate}
.inv-rows i{display:block;flex:none;height:6px;border-radius:3px;background:rgba(41,43,44,.16)}
.inv-rows .q{width:9%;margin-left:auto}
.inv-rows .p{width:15%}
/* a highlighter swipe: slightly uneven, as if by hand */
.inv-rows .hl::after{content:"";position:absolute;inset:-4px -9px;border-radius:3px 10px 4px 11px / 7px 3px 8px 4px;background:rgba(197,164,124,.62);
  mix-blend-mode:multiply;rotate:-.7deg;transform-origin:left center}
.inv-total{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:14px;border-top:1.5px solid rgba(41,43,44,.45)}
.inv-total i{display:block;height:8px;border-radius:4px;background:rgba(41,43,44,.5);width:28%}
.inv-total .p{width:22%}

/* inner page tops: the heading on the left, its introduction across from it */
@media(min-width:901px){
  .page-head > .wrap:has(> .lede){display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,6vw,96px);align-items:end}
  .page-head > .wrap:has(> .lede) > :not(.lede){grid-column:1}
  .page-head > .wrap:has(> .lede) h1{margin:0}
  .page-head > .wrap:has(> .lede) .lede{grid-column:2;grid-row:1 / span 2;align-self:end;max-width:34rem}
}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font:700 clamp(18px,1.6vw,21px)/1.3 var(--head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary{transition:color .25s var(--out)}
.faq summary:hover{color:var(--deep)}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:9999px;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292B2C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:inset 0 0 0 1px var(--fog);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary::after{transition:transform .5s var(--out),background-color .25s,box-shadow .25s}
.faq summary:hover::after{box-shadow:inset 0 0 0 1px var(--champ)}
.faq .a{padding:0 0 24px;color:var(--mut);max-width:44rem}
.a-list{list-style:none;display:grid;gap:6px;margin:0 0 14px}
.a-list li{position:relative;padding-left:18px}
.a-list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:9999px;background:var(--champ)}
/* answers open and close smoothly where the browser can animate to the content's height */
@supports (interpolate-size:allow-keywords){@media(prefers-reduced-motion:no-preference){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .5s var(--out),content-visibility .5s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
  .faq .a{opacity:0;translate:0 -6px;transition:opacity .35s var(--out),translate .5s var(--out)}
  .faq details[open] .a{opacity:1;translate:0 0}
}}

/* ---------------------------------------------------------------- inner pages */
.prose{max-width:760px}
.prose h2{font:800 clamp(24px,2.2vw,30px)/1.15 var(--head);margin:48px 0 14px}
.prose h3{font:700 20px/1.25 var(--head);margin:28px 0 8px}
.prose p,.prose ul{margin:0 0 16px}
.prose ul{padding-left:22px}
.prose li{margin:0 0 6px}
.prose a{text-decoration-color:var(--champ);text-underline-offset:3px}

.name-block{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.name-big{font:800 clamp(56px,9vw,120px)/1 var(--head);letter-spacing:-.03em}
.name-big .dot{color:var(--champ)}
.name-block p{font-size:clamp(18px,1.6vw,21px);color:var(--mut);max-width:34rem}
.name-block strong{color:var(--ink)}

.links-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;list-style:none}
.links-grid a{display:flex;flex-direction:column;height:100%;gap:10px;background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);text-decoration:none;transition:transform .5s var(--out),box-shadow .5s var(--out)}
.links-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.links-grid b{font:700 21px/1.2 var(--head)}
.links-grid span{color:var(--mut);font-size:16px}
.links-grid i{margin-top:auto;font-style:normal;font-weight:600;color:var(--deep);display:inline-flex;align-items:center;gap:8px}
.links-grid i::after{content:"";width:16px;height:10px;background:currentColor;transition:translate .5s var(--out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
.links-grid a:hover i::after{translate:4px 0}

.extras{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.extras li{background:var(--card);border-radius:9999px;padding:12px 20px;box-shadow:inset 0 0 0 1px var(--fog);font-weight:500}

.logo-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;list-style:none}
.logo-grid li{background:var(--card);border-radius:var(--r-sm);display:grid;place-items:center;height:116px;padding:18px;box-shadow:var(--shadow)}
.logo-grid img{max-height:56px;width:auto;max-width:100%;object-fit:contain}

/* values */
.values{list-style:none;display:grid;counter-reset:v;border-bottom:1px solid rgba(41,43,44,.22)}
.value{position:relative;display:grid;grid-template-columns:120px 1fr 1.25fr;gap:clamp(20px,3vw,40px);padding:clamp(30px,3.4vw,48px) 0;align-items:start}
.value .n{font:800 clamp(44px,4.6vw,64px)/1 var(--head);color:var(--champ);letter-spacing:-.03em}
.value h2{font:800 clamp(22px,2vw,27px)/1.15 var(--head);margin:0 0 8px}
.value .tagline{font-weight:600;color:var(--deep)}
.value p:not(.tagline){color:var(--mut)}

/* team */
.team{list-style:none;display:grid;gap:clamp(20px,3vw,28px)}
.person{display:grid;grid-template-columns:minmax(0,360px) 1fr;gap:clamp(24px,4vw,56px);background:var(--card);border-radius:calc(var(--r) + 4px);padding:clamp(18px,2.2vw,24px);box-shadow:var(--shadow);align-items:start}
.person .pic{border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:var(--canvas-2)}
.person .pic img{width:100%;height:100%;object-fit:cover}
.person .pic.blank{display:grid;place-items:center;background:linear-gradient(160deg,var(--champ-soft),var(--canvas-2))}
.person .pic.blank span{font:800 120px/1 var(--head);color:var(--champ)}
.person .bio{padding:clamp(4px,1.6vw,20px) clamp(4px,1.6vw,24px) clamp(8px,1.6vw,20px) 0}
.person h2{font:800 clamp(28px,3vw,38px)/1.1 var(--head);margin:0 0 4px}
.person .role{display:block;font-weight:600;color:var(--deep);margin:0 0 18px}
.person .tagline{font:700 clamp(19px,1.7vw,22px)/1.35 var(--head);margin:0 0 16px}
.person p:not(.tagline){color:var(--mut);margin:0 0 12px}

/* contact details card */
.details{display:grid;gap:18px;background:var(--card);border-radius:var(--r);padding:28px;box-shadow:var(--shadow)}
.details small{display:block;font-weight:600;color:var(--deep);font-size:14px;margin:0 0 2px}
.details address{font-style:normal}

/* ---------------------------------------------------------------- forms */
.form-layout{display:grid;grid-template-columns:1fr minmax(0,560px);gap:clamp(32px,5vw,80px);align-items:start}
.form-layout .sticky{position:sticky;top:calc(var(--head-h) + 20px)}
.form-layout.lp{grid-template-areas:'intro form' 'steps form';row-gap:44px}
.lp-intro{grid-area:intro}.lp-form{grid-area:form}.lp-steps{grid-area:steps;margin-top:0}
.form-panel{background:var(--card);border-radius:calc(var(--r) + 4px);padding:clamp(22px,3vw,36px);box-shadow:var(--shadow-lg)}
.form-panel h2{font:800 26px/1.15 var(--head);margin:0 0 6px}
.form-panel > p{color:var(--mut);margin:0 0 22px}
form label,.f-label{display:block;font-weight:600;font-size:15px;margin:0 0 16px}
form label > span,.f-label > span{display:block}
.opt{font-weight:400;color:var(--mut)}
.req-star{color:var(--deep)}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),select,textarea{display:block;width:100%;margin-top:7px;padding:13px 15px;border-radius:12px;border:1px solid var(--fog);
  background:#fff;color:var(--ink);font:400 16px/1.4 var(--text);transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292B2C' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;padding-right:42px}
textarea{resize:vertical;min-height:110px}
textarea::placeholder,input::placeholder{color:#8f897f}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--deep);box-shadow:0 0 0 3px rgba(197,164,124,.35)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
fieldset.choose{margin:0 0 18px}
fieldset.choose legend{font-weight:600;font-size:15px;margin:0 0 10px}
.choose-list{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;margin:0;font-weight:500}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.choice span{display:inline-flex;align-items:center;min-height:42px;padding:9px 15px;border-radius:9999px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--fog);font-size:15px;transition:background .15s,box-shadow .15s}
.choice input:checked + span{background:var(--ink);color:var(--canvas);box-shadow:none}
.choice input:focus-visible + span{outline:2px solid var(--deep);outline-offset:2px}
.hint{display:block;font-weight:400;color:var(--mut);font-size:14px;margin-top:6px}

/* uploads: up to 5 files */
.upload{margin:0 0 18px}
.up-label{font-weight:600;font-size:15px;margin:0 0 8px}
.drop{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;padding:24px 18px;border-radius:var(--r-sm);border:1.5px dashed var(--fog);background:var(--canvas);cursor:pointer;transition:border-color .2s,background .2s;margin:0}
.drop:hover,.drop.over{border-color:var(--deep);background:var(--champ-soft)}
.drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop strong{font-weight:600}
.drop u{text-decoration-color:var(--champ);text-underline-offset:3px}
.drop small{color:var(--mut);font-weight:400;font-size:14px}
.drop-ico{width:34px;height:34px;border-radius:9999px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292B2C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M5 20h14'/%3E%3C/svg%3E") center/18px no-repeat;box-shadow:inset 0 0 0 1px var(--fog)}
.files{list-style:none;display:grid;gap:8px;margin-top:10px}
.files:empty{display:none}
.files li{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border-radius:12px;background:var(--canvas);font-size:15px}
.files li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li small{color:var(--mut);flex:none}
.files button{flex:none;border:0;background:transparent;font:600 14px/1 var(--text);color:var(--deep);cursor:pointer;padding:8px;border-radius:8px;text-decoration:underline;text-underline-offset:3px}
.file-err{color:#9A2E1F;font-size:14.5px;margin-top:8px}
.file-err:empty{display:none}

/* wizard */
.fprogress{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 22px}
.fprogress-label{font-weight:600;font-size:15px;outline:0}
.fprogress-dots{display:flex;gap:6px}
.fprogress-dots span{width:22px;height:5px;border-radius:9999px;background:var(--fog);transition:background-color .4s var(--out),width .6s var(--out)}
.fprogress-dots span.now{width:40px}
.fprogress-dots span.done{background:var(--deep)}
.fprogress-dots span.now{background:var(--champ)}
form.multi .fstep{display:none}
form.multi .fstep.active{display:block;animation:stepIn .6s var(--out)}
form.multi[data-dir="back"] .fstep.active{animation-name:stepBack}
@keyframes stepIn{from{opacity:0;transform:translateX(18px)}}
@keyframes stepBack{from{opacity:0;transform:translateX(-18px)}}
.fnav{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.form-tail{display:grid;gap:14px;margin-top:6px}
form.multi:not(.at-last) .form-tail > :not(.fnav){position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.form-tail .cf-turnstile{min-height:65px}
.consent{font-size:14px;color:var(--mut)}
.consent a{color:var(--ink)}
.req-note{font-size:14px;color:var(--mut);margin:0 0 16px}
.form-status{font-size:15px;margin-top:12px}
.form-status:empty{display:none}
.form-status.err{color:#9A2E1F}
.sbz-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.noscript-note{background:var(--champ-soft);padding:14px 16px;border-radius:12px;margin:0 0 16px}
.side-list{list-style:none;display:grid;gap:20px;counter-reset:n;margin:28px 0 0}
.side-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.side-list li::before{counter-increment:n;content:counter(n);display:grid;place-items:center;width:44px;height:44px;border-radius:9999px;background:var(--champ-soft);font:800 18px/1 var(--head)}
.side-list b{display:block;font:700 19px/1.25 var(--head);margin:9px 0 4px}
.side-list span{color:var(--mut)}
.assure{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-weight:600;font-size:15.5px}
.assure span{display:inline-flex;align-items:center;gap:8px}
.assure span::before{content:"";width:18px;height:18px;border-radius:9999px;background:var(--champ-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23292B2C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}

/* landing page header: wordmark and two quiet links only */
.lp-head .site-head .wrap{gap:20px}
.lp-links{margin-left:auto;display:flex;gap:22px;align-items:center;font-weight:500;font-size:15.5px}
.lp-links a{text-decoration:none;border-bottom:1.5px solid transparent;padding:6px 0}
.lp-links a:hover{border-bottom-color:var(--champ)}

/* form modals (js/modals.js): a centred card on desktop, a full-screen sheet on phones */
html.modal-open{overflow:hidden}
dialog.modal{width:min(620px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 40px);margin:auto;padding:0;border:0;
  border-radius:calc(var(--r) + 4px);background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.3);overflow:auto;overscroll-behavior:contain}
/* opens with a soft rise; closes quicker. @starting-style browsers animate both ways, others just appear */
dialog.modal{opacity:0;translate:0 18px;scale:.985;
  transition:opacity .22s var(--in),translate .22s var(--in),scale .22s var(--in),overlay .22s allow-discrete,display .22s allow-discrete}
dialog.modal[open]{opacity:1;translate:0 0;scale:1;transition-timing-function:var(--out);transition-duration:.35s,.6s,.6s,.35s,.35s}
@starting-style{dialog.modal[open]{opacity:0;translate:0 18px;scale:.985}}
dialog.modal::backdrop{background:rgba(31,33,34,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
  transition:background-color .3s var(--out),backdrop-filter .3s var(--out),overlay .3s allow-discrete,display .3s allow-discrete}
dialog.modal[open]::backdrop{background:rgba(31,33,34,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
@starting-style{dialog.modal[open]::backdrop{background:rgba(31,33,34,0);backdrop-filter:blur(0)}}
.modal-inner{position:relative;padding:clamp(24px,3.4vw,40px)}
.modal-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:9999px;border:0;background:var(--canvas);color:var(--ink);
  font-size:18px;line-height:1;cursor:pointer;transition:background-color .25s var(--out),rotate .5s var(--out)}
.modal-close:hover{background:var(--champ-soft);rotate:90deg}
.modal-head{margin:0 0 22px;padding-right:52px}
.modal-head .eyebrow{margin-bottom:8px}
.modal-head h2{font:800 clamp(26px,3vw,32px)/1.12 var(--head);margin:0 0 8px;outline:0}
.modal-head p{color:var(--mut)}
.modal-alt{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:15px;color:var(--mut)}
.modal-alt a{color:var(--ink)}
@media(max-width:640px){
  dialog.modal{width:100%;height:100%;max-height:none;margin:0;border-radius:0;translate:0 40px;scale:1}
  @starting-style{dialog.modal[open]{translate:0 40px;scale:1}}
  .modal-inner{padding:22px 20px 32px}
  .modal-close{top:12px;right:12px}
}
@media(prefers-reduced-motion:reduce){dialog.modal,dialog.modal[open]{translate:none;scale:none}}

/* thank you: a check mark, what happens next for the form they sent, and the invoices getting looked at */
.thanks{--h1d:.3s;padding:calc(var(--head-h) + clamp(40px,5vw,72px)) 0 clamp(56px,7vw,96px)}
.thanks .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,6vw,96px);align-items:start}
.tick{display:block;width:58px;height:58px;margin:0 0 26px}
.tick circle{fill:var(--champ-soft)}
.tick path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30}
.thanks h1{margin:0 0 16px}
.thanks .lede{max-width:32rem;margin:0 0 32px}
.next{display:none;padding-top:26px;border-top:1px solid var(--line)}
html[data-sent="benchmark"] .next[data-for="benchmark"],html[data-sent="connect"] .next[data-for="connect"]{display:block}
.next h2{font:600 15px/1.3 var(--text);color:var(--deep);margin:0}
.next .side-list{margin-top:18px}
.next .note{margin:22px 0 0;font-weight:600}
.next .aside{margin:10px 0 0;color:var(--mut);font-size:15.5px}
.next a,.sooner a{color:var(--ink)}
.thanks .cta-row{margin-top:34px}
.sooner{margin-top:18px;color:var(--mut);font-size:15.5px}
.thanks-art{--cr:calc(var(--r) + 8px);position:sticky;top:calc(var(--head-h) + 24px);height:min(560px,calc(100svh - var(--head-h) - 48px));min-height:420px;
  border-radius:var(--cr);background:var(--ink);overflow:hidden}
.thanks-art .cta-art{position:absolute;inset:0;margin:0;min-height:0}

/* utility pages */
.util{min-height:72svh;display:grid;align-items:center;padding:calc(var(--head-h) + 48px) 0 64px}
.util .box{max-width:640px}
.util h1{margin:0 0 18px}
.util p{color:var(--mut);font-size:19px;margin:0 0 28px}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--ink);color:var(--canvas);padding:clamp(56px,7vw,88px) 0 32px}
.f-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(32px,5vw,72px);padding-bottom:clamp(40px,5vw,56px);border-bottom:1px solid rgba(247,243,235,.14)}
.f-brand img{height:46px;width:auto;margin:0 0 20px}
.f-brand p{color:rgba(247,243,235,.74);max-width:24rem;margin:0 0 24px}
.site-foot h2{font:700 15px/1.3 var(--text);color:var(--champ);margin:0 0 16px}
.site-foot ul{list-style:none;display:grid;gap:8px}
.site-foot a:not(.btn){text-decoration:none;color:rgba(247,243,235,.86)}
.site-foot a:not(.btn):hover{color:#fff;text-decoration:underline;text-decoration-color:var(--champ);text-underline-offset:4px}
.site-foot address{font-style:normal;color:rgba(247,243,235,.74);line-height:1.7}
.f-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-top:26px;font-size:14.5px;color:rgba(247,243,235,.6)}
.f-legal nav{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.f-legal button{all:unset;cursor:pointer;color:rgba(247,243,235,.86)}
.f-legal button:hover{text-decoration:underline;text-underline-offset:4px}
.f-legal button:focus-visible{outline:2px solid var(--champ);outline-offset:3px}

/* cookie banner, restyled to match (consent.js injects its own base styles) */
html .sbz-consent{border-radius:18px;border:0;background:var(--ink);font-family:var(--text);font-size:15px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
html .sbz-consent button{border-radius:9999px;font-weight:600;font-size:15px;min-height:46px}
html .sbz-consent .sbz-accept{background:var(--champ);color:var(--ink);border-color:var(--champ)}
html .sbz-consent .sbz-accept:hover{background:var(--champ-hi)}
html .sbz-consent .sbz-reject{border-color:rgba(247,243,235,.5);color:var(--canvas)}

/* ---------------------------------------------------------------- opening, once per visit
   The logo, large and centred, already reads SAY IT: SO-SEE-EM; it then glides into the header (js in the
   page) while the charcoal dissolves and the page's entrance plays underneath. */
.intro-on body{overflow:hidden}
:is(.intro-on,.intro-fly) .site-head .wm{opacity:0}
#intro{position:fixed;inset:0;z-index:400;cursor:pointer}
#intro .i-bg{position:absolute;inset:0;background:var(--ink)}
.i-wm{position:absolute;display:block;overflow:visible;transform-origin:0 0;animation:iIn .8s var(--out) both .05s}
.i-wm .wm-name{fill:#F7F3EB;transition:fill .85s var(--inout)}
@keyframes iIn{from{opacity:0;translate:0 14px}}

/* ---------------------------------------------------------------- motion
   One curve for everything that arrives (--out), nothing longer than about a second and a half.
   Content is visible without JS and with reduced motion: every hidden state below needs .anim-ready
   (set in <head>) and no-preference. js/motion.js adds .in-view, staggering things that arrive together. */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}
@keyframes wordUp{from{transform:translateY(112%)}}
@keyframes settle{from{scale:1.12;opacity:.3}}

/* headings are split into words at build time; each word rises out of its own mask */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.w > span{display:inline-block}
.name-big .dot{display:inline-block}

@media(prefers-reduced-motion:no-preference){
  /* page load: the photo settles, the headline rises word by word, the rest follows it in */
  .anim-ready .hero .bg img{animation:settle 2.4s var(--out) both}
  .anim-ready h1[data-split] .w > span{animation:wordUp 1.2s var(--out) both;animation-delay:calc(var(--h1d,.24s) + var(--i) * 45ms)}
  .anim-ready .hero .strap{animation:fadeUp 1s .1s var(--out) both}
  .anim-ready .hero .lead{animation:fadeUp 1s .6s var(--out) both}
  .anim-ready .hero .cta-row{animation:fadeUp 1s .72s var(--out) both}
  .anim-ready .hero .types{animation:fadeUp 1.2s .66s var(--out) both}
  .anim-ready .hero .chips li{animation:fadeUp .9s var(--out) both;animation-delay:calc(.9s + var(--k) * 35ms)}
  .anim-ready :is(.page-head,.util){--h1d:.12s}
  .anim-ready .page-head .eyebrow{animation:fadeUp .9s .02s var(--out) both}
  .anim-ready :is(.page-head .lede,.util .box > p){animation:fadeUp 1s .45s var(--out) both}
  .anim-ready :is(.lp-intro > .cta-row,.util .box > .cta-row,.page-head .assure){animation:fadeUp 1s .58s var(--out) both}
  .anim-ready .page-head :is(.lp-steps,.form-panel){animation:fadeUp 1.1s .64s var(--out) both}
  .anim-ready .page-head .details{animation:fadeUp 1.1s .78s var(--out) both}
  /* behind the first-visit intro everything waits, then plays as the curtain lifts */
  .intro-on :is(.hero,.page-head,.util) *{animation-play-state:paused}

  /* scroll: plain blocks rise into place */
  .anim-ready [data-rise=""]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--out),transform 1.2s var(--out);transition-delay:var(--d,0ms)}
  .anim-ready [data-rise=""].in-view{opacity:1;transform:none}

  /* text blocks: the heading's words rise, then each piece of support follows a beat apart */
  .anim-ready [data-rise="text"] > :not([data-split]){opacity:0;transform:translateY(22px);
    transition:opacity 1s var(--out),transform 1.2s var(--out);transition-delay:calc(var(--d,0ms) + 140ms + var(--c,0) * 90ms)}
  .anim-ready [data-rise="text"] > :nth-child(2){--c:1}
  .anim-ready [data-rise="text"] > :nth-child(3){--c:2}
  .anim-ready [data-rise="text"] > :nth-child(4){--c:3}
  .anim-ready [data-rise="text"] > :nth-child(5){--c:4}
  .anim-ready [data-rise="text"] > :nth-child(n+6){--c:5}
  .anim-ready [data-rise="text"].in-view > *{opacity:1;transform:none}
  .anim-ready [data-rise] [data-split] .w > span{transform:translateY(112%);transition:transform 1.2s var(--out);transition-delay:calc(var(--d,0ms) + var(--i) * 32ms)}
  .anim-ready [data-rise].in-view [data-split] .w > span{transform:none}
  .anim-ready [data-rise] .name-big .dot{scale:0;transition:scale .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--d,0ms) + 160ms + var(--i) * 80ms)}
  .anim-ready [data-rise].in-view .name-big .dot{scale:1}

  /* photos open upwards from a line, the picture settling as it does. The clip sits on the picture,
     not the observed frame: a fully clipped element never counts as on screen. */
  .anim-ready :is([data-rise="clip"],.person[data-rise] .pic) img{clip-path:inset(100% 0 0 0);scale:1.14;
    transition:clip-path 1.3s var(--out),scale 1.8s var(--out);transition-delay:var(--d,0ms)}
  .anim-ready :is([data-rise="clip"].in-view,.person.in-view .pic) img{clip-path:inset(0);scale:1}
  .anim-ready .person[data-rise] .pic.blank{clip-path:inset(100% 0 0 0 round var(--r));transition:clip-path 1.3s var(--out);transition-delay:var(--d,0ms)}
  .anim-ready .person.in-view .pic.blank{clip-path:inset(0 round var(--r))}

  /* the dark panel grows into its corners */
  .anim-ready [data-rise="grow"]{opacity:0;clip-path:inset(5% 3% round var(--cr,var(--r)));transition:opacity .8s var(--out),clip-path 1.4s var(--out);transition-delay:var(--d,0ms)}
  .anim-ready [data-rise="grow"].in-view{opacity:1;clip-path:inset(0 round var(--cr,var(--r)))}

  /* the invoices fan out from a pile, then the highlighter goes over the lines one by one */
  .anim-ready [data-rise] .inv{transition:opacity .8s var(--out),translate 1.5s var(--out),rotate 1.5s var(--out);transition-delay:calc(var(--d,0ms) + 250ms + var(--s,0) * 110ms)}
  .anim-ready [data-rise] .inv-2{--s:1}
  .anim-ready [data-rise] .inv-1{--s:2}
  .anim-ready [data-rise]:not(.in-view) .inv{opacity:0;rotate:0deg;translate:0 80px}
  .anim-ready [data-rise] .hl::after{transition:scale .7s var(--inout);transition-delay:calc(var(--d,0ms) + 1150ms + var(--k) * 280ms)}
  .anim-ready [data-rise]:not(.in-view) .hl::after{scale:0 1}

  /* thank you: the check draws itself, then the words and next steps follow */
  .anim-ready .tick circle{transform-box:fill-box;transform-origin:center;animation:tickPop .8s cubic-bezier(.34,1.56,.64,1) both}
  .anim-ready .tick path{animation:tickDraw .7s .35s var(--out) both}
  .anim-ready .thanks :is(.lede,.next,.cta-row,.sooner){animation:fadeUp 1s var(--out) both}
  .anim-ready .thanks .lede{animation-delay:.55s}
  .anim-ready .thanks .next{animation-delay:.7s}
  .anim-ready .thanks .cta-row{animation-delay:.82s}
  .anim-ready .thanks .sooner{animation-delay:.9s}
  @keyframes tickPop{from{scale:.4;opacity:0}}
  @keyframes tickDraw{from{stroke-dashoffset:30}}

  /* lists cascade item by item */
  .anim-ready [data-rise="list"] > li{opacity:0;transform:translateY(14px);transition:opacity .8s var(--out),transform 1s var(--out);transition-delay:calc(var(--d,0ms) + var(--k,0) * 30ms)}
  .anim-ready [data-rise="list"].in-view > li{opacity:1;transform:none}

  /* the rules above the promises and the values draw across */
  .anim-ready :is(.card,.value)[data-rise]::before{transform:scaleX(0);transition:transform 1.4s var(--out);transition-delay:var(--d,0ms)}
  .anim-ready :is(.card,.value)[data-rise].in-view::before{transform:none}

  /* stats come in one after another, then count */
  .anim-ready .stats[data-rise] .stat{opacity:0;transform:translateY(16px);transition:opacity .9s var(--out),transform 1.1s var(--out);transition-delay:calc(var(--d,0ms) + 150ms + var(--c,0) * 110ms)}
  .anim-ready .stats .stat:nth-child(2){--c:1}
  .anim-ready .stats .stat:nth-child(3){--c:2}
  .anim-ready .stats.in-view .stat{opacity:1;transform:none}

  /* the savings example checks its lines one at a time, then totals */
  .anim-ready [data-rise] .panel .panel-f{--k:4}
  .anim-ready [data-rise] .panel :is(.row,.panel-f){opacity:0;transform:translateX(-12px);transition:opacity .8s var(--out),transform 1s var(--out);transition-delay:calc(var(--d,0ms) + 250ms + var(--k) * 120ms)}
  .anim-ready [data-rise] .panel .tag{opacity:0;scale:.8;transition:opacity .5s var(--out),scale .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--d,0ms) + 470ms + var(--k) * 120ms)}
  .anim-ready [data-rise].in-view .panel :is(.row,.panel-f){opacity:1;transform:none}
  .anim-ready [data-rise].in-view .panel .tag{opacity:1;scale:1}

  /* step icons land just after their card */
  .anim-ready .step[data-rise] .ico{opacity:0;scale:.5;transition:opacity .5s var(--out),scale .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--d,0ms) + 220ms)}
  .anim-ready .step[data-rise].in-view .ico{opacity:1;scale:1}

  /* page to page: a crossfade (no dip between two dark heroes), the new page lifting slightly,
     under a header that stays put. Browsers without view transitions simply load the page. */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vtOut .45s var(--inout) both}
  ::view-transition-new(root){animation:vtIn .45s var(--inout) both,vtRise .9s var(--out) both}
  ::view-transition-group(site-head){animation-duration:.45s;animation-timing-function:var(--inout)}
  @keyframes vtOut{to{opacity:0}}
  @keyframes vtIn{from{opacity:0}}
  @keyframes vtRise{from{transform:translateY(18px)}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  #intro{display:none}
  .btn,.btn .bl,.links-grid a,.mobile-nav > *{transition:none}
  .btn.is-busy .bl::before{animation-duration:2.4s}
  .wm-pro,.wm-say{translate:none!important}
}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1100px){
  .inv-stack{width:260px;margin-left:-112px}
  .inv-3{--tx:-58px}.inv-2{--tx:-28px}
  .steps{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:repeat(3,1fr)}
  .cats li:nth-child(4){border-top:0}
  .links-grid{grid-template-columns:1fr 1fr}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
  .value{grid-template-columns:80px 1fr}
  .value > :last-child{grid-column:2}
}
@media(max-width:1000px){
  /* the band stacks: copy, then the invoices running off the bottom */
  .cta{grid-template-columns:1fr}
  .cta-art{margin:4px calc(var(--ctap) * -1) calc(var(--ctap) * -1);min-height:270px}
  .inv-stack{top:36px;margin-left:-130px}
}
@media(max-width:900px){
  .hero-grid,.intro,.example,.split,.form-layout,.cta,.name-block,.thanks .wrap{grid-template-columns:1fr}
  .thanks-art{position:relative;top:auto;height:300px;min-height:0}
  /* phones and tablets: the photo is a framed picture at the top (no 4x zoom into one face),
     the words sit beneath it on charcoal */
  .hero,.hero.short{display:block;min-height:0}
  .hero .bg{position:relative;inset:auto;z-index:0;aspect-ratio:4/3;max-height:62svh}
  .hero .bg::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:linear-gradient(180deg,rgba(41,43,44,0),var(--ink))}
  .hero::before{display:none}
  .hero .wrap{padding-top:8px;padding-bottom:48px}
  .split.flip > :first-child{order:0}
  .stats{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .quotes,.cards{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .person .pic{max-width:420px}
  .person .bio{padding:4px 6px 10px}
  .form-layout .sticky{position:static}
  .form-layout.lp{grid-template-areas:'intro' 'form' 'steps'}
  .f-top{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1/-1}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .steps,.steps.pair,.links-grid{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr 1fr;gap:0 18px}
  .cats li{padding:14px 0;font-size:14.5px;gap:9px;line-height:1.3}
  .cats li:nth-child(n+3){border-top:0}
  .logo-grid{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  .value{grid-template-columns:1fr;gap:12px}
  .value > :last-child{grid-column:auto}
  .f-top{grid-template-columns:1fr}
  .cta{border-radius:var(--r);--cr:var(--r)}
  .hero .cta-row .btn{flex:1 1 100%}
  .panel{padding:20px 18px 16px}
  .row{align-items:flex-start}
}