/* serva.digital design system (v4, 28 Sep 2026)
   Sans-only, no italics. Clean, spacious product-page style: centred heroes, alternating bands that are all white-based
   (plain white; white with fine warm dots "W"; warm paper tint with dots "E"), a white footer, large rounded cards, pill buttons and chevron text links. Original code; no third-party
   design assets. Brand colours: text red #C62828 (from the red wordmark logo) and text green #15803D (UI accent only).
   Fonts: the visitor's system UI font (San Francisco on Apple devices, via the system only, never embedded),
   then self-hosted Inter (SIL OFL 1.1), then Helvetica Neue / Arial. */

@font-face{font-family:"Inter";src:url("/assets/fonts/inter-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Inter Display (OFL, rsms/inter v4.1, Latin subset) for headings on non-Apple devices; Apple devices use SF via -apple-system */
@font-face{font-family:"Inter Display";src:url("/assets/fonts/interdisplay-600.woff2?v=bbf06c46f4") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter Display";src:url("/assets/fonts/interdisplay-700.woff2?v=f513fa3025") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --white:#FFFFFF;
  --grey:#F4F4F6;
  --grey-2:#E9E9EC;
  --ink:#1B1C1E;
  --body:#3F4146;
  --muted:#686A70;
  --line:#D9DADF;
  --field:#7A7C83;
  --dark:#121314;
  --dark-card:#1E1F22;
  --on-dark:#F4F4F6;
  --on-dark-muted:#A7A9AF;
  --green:#15803D;          /* links, buttons (AA on white and grey) */
  --green-hover:#166534;
  --green-on-dark:#4ADE80;  /* links on dark tiles */
  --red:#C62828;            /* small accent text, errors */
  --red-on-dark:#FF8A80;
  --red-tint:#FDECEA;
  --green-tint:#E7F5EC;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter Display","Inter","Helvetica Neue",Arial,sans-serif;
  --max:1120px;
  --wide:1280px;
  --gutter:clamp(20px,4vw,40px);
  --r-card:24px;
  --r-card-sm:18px;
  --nav-h:52px;
  --paper:#FDFBF6;          /* Option E: warm paper tint (former dark bands) */
  --footer-muted:#5A6069;
  --link-dark:#166534;
  --card-border:1px solid rgba(17,20,24,.08);
  --card-shadow:0 1px 2px rgba(17,20,24,.04),0 18px 48px -28px rgba(17,20,24,.22);
  --hairline:1px solid rgba(17,20,24,.12);
  --ease-out:cubic-bezier(.22,.8,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px)}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.53;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none;font-optical-sizing:auto}
/* No italics anywhere: emphasis uses weight only */
em,i,cite,address,dfn,var{font-style:normal}
em,i{font-weight:600}
img,svg{max-width:100%;display:block}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}
p{margin:0 0 1em}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;color:inherit;margin:0 0 .45em}
h1{font-size:clamp(2.75rem,6.4vw,5rem);line-height:1.06;letter-spacing:-.022em}
h2{font-size:clamp(2.1rem,4.6vw,3.5rem);line-height:1.08;letter-spacing:-.02em}
h3{font-size:clamp(1.25rem,1.9vw,1.5rem);line-height:1.2;letter-spacing:-.015em;font-weight:600}
ul,ol{margin:0 0 1em;padding-left:1.2em}
strong,b{font-weight:650}

:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:12px;top:-100px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600}
.skip:focus{top:12px;color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- Sticky translucent nav ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);border-bottom:1px solid rgba(0,0,0,.08)}
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){
  .site-header{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
}
.header-inner{display:flex;align-items:center;gap:20px;min-height:var(--nav-h);max-width:var(--wide)}
.brand{display:flex;align-items:center;margin-right:auto;border-radius:6px}
.brand-logo{height:28.2px;width:auto;flex-shrink:0}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink);font-size:.875rem;font-weight:500;letter-spacing:-.005em;white-space:nowrap;opacity:.86}
.nav a:hover{opacity:1;text-decoration:none;color:var(--green)}
.nav a[aria-current="page"]{opacity:1;font-weight:650}
.nav .nav-cta a{background:var(--green);color:#fff;opacity:1;min-height:34px;padding:0 16px;border-radius:999px;margin-left:10px;font-weight:600}
.nav .nav-cta a:hover{background:var(--green-hover);color:#fff}
.menu-toggle{display:none;min-height:44px;min-width:44px;padding:0 16px;background:transparent;border:1px solid var(--line);border-radius:999px;font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);cursor:pointer}
@media (max-width:900px){
  /* The collapsed menu is the default so the header never changes height when site.js runs (CLS).
     Without JavaScript, /assets/css/nojs.css (loaded in <noscript>) shows the links in the header instead. */
  .menu-toggle{display:inline-flex;align-items:center}
  .nav{position:absolute;left:0;right:0;top:100%;background:#FFFFFF;box-shadow:0 12px 24px -12px rgba(0,0,0,.18);border-bottom:1px solid var(--line);display:none}
  .nav.is-open{display:block}
  .nav ul{flex-direction:column;align-items:stretch;padding:8px var(--gutter) 20px}
  .nav a{display:flex;padding:0 4px;font-size:1.25rem;font-weight:600;min-height:52px;border-bottom:1px solid var(--grey-2);opacity:1}
  .nav .nav-cta a{margin:16px 0 0;justify-content:center;border:0;min-height:48px;font-size:1rem}
}

/* ---------- Buttons and chevron links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;font:inherit;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;border:1.5px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-hover);color:#fff}
.btn-secondary{border-color:var(--green);color:var(--green);background:transparent}
.btn-secondary:hover{background:var(--green);color:#fff}
.link-chevron{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font-size:1.0625rem;font-weight:500;color:var(--green)}
.link-chevron::after{content:"";width:.5em;height:.5em;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);margin-left:.05em;transition:transform .2s}
.link-chevron:hover::after{transform:translateX(3px) rotate(45deg)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}

/* ---------- Eyebrow ---------- */
.kicker{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--red);margin:0 0 12px}

/* ---------- Hero ---------- */
.hero{padding:clamp(72px,11vw,148px) 0 clamp(64px,9vw,120px);text-align:center;background:var(--white)}
.hero-inner{max-width:980px}
.hero h1{max-width:15ch;margin:0 auto .45em}
.hero-lede{font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.5;color:var(--body);max-width:40em;margin:0 auto 36px}
.hero .btn-row{justify-content:center}
/* Split hero: copy left, Roseberry vignette right from 960px; image below the buttons on smaller screens.
   The vignette has a pure #FFFFFF background with feathered edges so it bleeds into the page (multiply as a backup). */
.hero-split{max-width:var(--wide)}
.hero-art{display:block;margin:clamp(36px,8vw,56px) calc(var(--gutter) * -0.5) 0}
.hero-art img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
/* Stacked hero (below 960px): picture sits between the headline and the paragraph (David, 29 Sep 2026).
   .hero-copy's children join the flex column via display:contents; the DOM order (and reading order) is unchanged. */
@media (max-width:959px){
  .hero-split{display:flex;flex-direction:column}
  .hero-copy{display:contents}
  .hero-copy > h1{order:2}
  .hero-split > .hero-art{order:3;margin:4px calc(var(--gutter) * -0.5) 24px}
  .hero-copy > .hero-lede{order:4}
  .hero-copy > .btn-row{order:5}
}
@media (min-width:960px){
  .hero{text-align:left;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
  .hero-split{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(24px,3vw,48px);align-items:center}
  .hero h1{font-size:clamp(2.75rem,4.3vw,4rem);max-width:13ch;margin:0 0 .4em}
  .hero-lede{font-size:clamp(1.0625rem,1.3vw,1.1875rem);margin:0 0 32px;max-width:32em}
  .hero .btn-row{justify-content:center} /* buttons centred on desktop (David, 29 Sep 2026); copy stays left */
  .hero-art{margin:0}
}

/* ---------- Tiles (full-width alternating bands, all white-based) ----------
   .tile-white  plain #FFFFFF
   .tile-grey   (name kept) pure #FFFFFF with fine warm dots, texture "W"; also used by .faq-page and .about-page
   .tile-paper  warm paper #FDFBF6 with sparse sepia dots, texture "E", plus a 12% hairline on top (former dark bands)
   The texture is a ::before layer behind the content; vignettes on a textured band sit in a .clearing (a soft pool of
   pure white), so their feathered edges melt into white and then into the texture. */
.section{padding-top:clamp(80px,10vw,136px);padding-bottom:clamp(80px,10vw,136px)}
/* Sideways-scroll guard. Two things poke past the viewport edge on some widths: the white .clearing pools
   (inset -10% either side of a vignette, so a near-full-width image's pool runs ~10% off-screen) and the
   Services slide-in start states (translateX +/-40px before a row animates in). Clip them at the band edge.
   overflow-x:clip (not hidden) creates no scroll container, so sticky children, vertical bleed and the
   pools' top/bottom feathering are unaffected. */
.section{overflow-x:clip}
.tile-white{background:var(--white)}
.tile-grey,.faq-page,.about-page,.tile-paper{position:relative;isolation:isolate;background:var(--white)}
.tile-grey::before,.faq-page::before,.about-page::before,.tile-paper::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.tile-grey::before,.faq-page::before,.about-page::before{background-image:radial-gradient(circle at center,rgba(90,70,40,.18) 0 .9px,transparent 1.3px);background-size:18px 18px;background-position:9px 9px}
.tile-paper{background:var(--paper);border-top:var(--hairline)}
.tile-paper::before{background-image:radial-gradient(circle at center,rgba(90,70,40,.16) 0 .9px,transparent 1.3px);background-size:26px 26px}
.clearing{position:relative} /* not isolated on purpose: the image's multiply blend must reach the white pool */
.clearing::before{content:"";position:absolute;inset:-16% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,#FFFFFF 62%,rgba(255,255,255,.85) 76%,rgba(255,255,255,0) 100%)}
.section-head{text-align:center;max-width:820px;margin:0 auto clamp(44px,6vw,72px)}
.section-head h2{margin:0 auto}
.section-head p:not(.kicker){color:var(--body);font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;margin:18px auto 0;max-width:36em}
.section-head p + p:not(.kicker){margin-top:8px}

/* Offer tile */
.tile-offer{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.ticket{background:var(--white);border-radius:32px;padding:clamp(36px,6vw,72px) clamp(24px,6vw,80px);text-align:center;max-width:960px;margin:0 auto;border:var(--card-border);box-shadow:var(--card-shadow)}
.ticket-media{display:block;max-width:520px;margin:0 auto clamp(20px,3vw,32px)}
.ticket-media img{width:100%;height:auto;mix-blend-mode:multiply}
.ticket h2{font-size:clamp(2rem,4vw,3rem);max-width:18ch;margin:0 auto .4em}
.ticket-lede{color:var(--body);font-size:clamp(1.0625rem,1.4vw,1.25rem);max-width:34em;margin:0 auto 32px}
.checks{list-style:none;padding:0;margin:0 auto 36px;display:grid;grid-template-columns:1fr;gap:12px 32px;max-width:720px;text-align:left}
@media (min-width:640px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.checks li{position:relative;padding-left:32px;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--green-tint)}
.checks li::after{content:"";position:absolute;left:6px;top:calc(.2em + 5px);width:8px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.ticket .btn-row{justify-content:center}

/* Experience (warm paper band) */
.facts{list-style:none;padding:0;margin:0 auto 56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px;text-align:center;max-width:var(--max)}
@media (min-width:900px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
.facts li{display:flex;flex-direction:column;gap:10px;color:var(--body);font-size:.975rem}
.fact-num{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.5rem);font-weight:700;letter-spacing:-.04em;line-height:1;color:#111418;font-variant-numeric:tabular-nums}
.founder-card{background:var(--white);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:clamp(24px,4vw,48px);display:grid;gap:32px;align-items:center;max-width:var(--max);margin:0 auto}
@media (min-width:900px){.founder-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.founder-card h3{font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:-.02em;margin:0 0 12px;color:var(--ink)}
.founder-card p{margin-bottom:12px;color:var(--body)}
.photo-placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;border-radius:var(--r-card-sm);background:repeating-linear-gradient(45deg,rgba(255,255,255,.07) 0 12px,rgba(255,255,255,.03) 12px 24px);border:1.5px dashed #5C5E64;color:var(--on-dark);font-weight:600;text-align:center;padding:16px}
.photo-placeholder.tall{aspect-ratio:4/5;border-color:var(--field);color:var(--red);background:repeating-linear-gradient(45deg,var(--red-tint) 0 12px,#FFFFFF 12px 24px)}
.founder-photo{display:block;width:100%;max-width:340px;margin:0 auto}
/* Watercolour portrait: no circle crop or radius, it fades to white by itself; sits in a .clearing */
.founder-photo-home{width:60%;max-width:240px}
.founder-photo img{display:block;width:100%;height:auto;aspect-ratio:1/1;mix-blend-mode:multiply}
.founder-photo-about{max-width:300px;padding:8px 0}

/* Services: alternating two-column rows on pure white. No cards, borders or shadows; the vignettes
   (pure #FFFFFF backgrounds) bleed into the page. DOM order is label, heading, image, body: mobile follows
   it; from 768px grid areas put the image in one column (alternating sides) and the text in the other. */
#services{background:#FFFFFF}
#services .wrap{max-width:var(--wide)}
.svc-rows{display:grid;grid-template-columns:1fr;gap:clamp(64px,9vw,128px)}
@media (min-width:768px){.svc-rows{gap:clamp(40px,5.5vw,84px)}}
.svc-row{display:grid;grid-template-columns:1fr;grid-template-areas:"head" "media" "body";align-items:start}
.svc-row > h3{grid-area:head}
.svc-row > .svc-media{grid-area:media}
.svc-row > .svc-body{grid-area:body}
.service-tag{font-size:.9375rem;font-weight:600;color:var(--red);margin:0 0 10px}
.svc-row h3{font-size:clamp(1.75rem,2.8vw,2.5rem);letter-spacing:-.02em;margin:0 0 14px}
.svc-media{display:block;margin:8px calc(var(--gutter) * -0.5) 20px}
.svc-media img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.svc-body p{color:var(--body);font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.55}
.svc-body p:last-child{margin-bottom:0}
@media (min-width:768px){
  .svc-row{grid-template-columns:minmax(0,54fr) minmax(0,46fr);column-gap:clamp(32px,5vw,72px);
    grid-template-rows:1fr auto auto 1fr;
    grid-template-areas:"media ." "media head" "media body" "media ."}
  .svc-row:nth-child(even){grid-template-columns:minmax(0,46fr) minmax(0,54fr);
    grid-template-areas:". media" "head media" "body media" ". media"}
  .svc-row > .svc-media{margin:0;align-self:center}
  .svc-row > :not(.svc-media){width:100%;max-width:34rem}
  .svc-row:nth-child(even) > :not(.svc-media){justify-self:end}
}

/* Offer details */
.offer-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:900px){.offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.panel{background:var(--white);border-radius:var(--r-card);padding:clamp(28px,4vw,44px);border:var(--card-border);box-shadow:var(--card-shadow)}
.panel h3{font-size:clamp(1.4rem,2vw,1.75rem)}
.panel ul{padding-left:1.1em;margin:0;color:var(--body)}
.panel li{padding:6px 0}
.price-strip{display:grid;gap:20px;grid-template-columns:1fr;margin:20px 0 0}
@media (min-width:800px){.price-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
.price-strip div{background:var(--white);border-radius:var(--r-card);padding:28px 32px;text-align:center;border:var(--card-border);box-shadow:var(--card-shadow)}
.price-strip dt{font-size:.9375rem;font-weight:600;color:var(--muted);margin-bottom:8px}
.price-strip dd{margin:0;font-size:clamp(1.25rem,1.8vw,1.5rem);font-weight:650;letter-spacing:-.02em;line-height:1.25}
.offer-terms{text-align:center;margin:20px auto 0;max-width:40rem;text-wrap:balance;font-size:.9375rem;color:var(--body)}

/* Process */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:20px;grid-template-columns:1fr;counter-reset:step}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.steps li{counter-increment:step;background:var(--white);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:24px 28px 32px;display:flex;flex-direction:column}
.steps li::before{content:counter(step);order:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:20px}
.steps li > *{order:2}
.steps li > .step-art{order:0;display:block;margin:0 -12px 12px;position:relative}
.step-media{display:block}
.step-media img{width:100%;height:auto;mix-blend-mode:multiply}
.steps p{color:var(--body);margin:0}
.promises{display:grid;gap:32px 48px;grid-template-columns:1fr;margin-top:72px;text-align:center}
@media (min-width:800px){.promises{grid-template-columns:repeat(3,minmax(0,1fr))}}
.promises h3{font-size:1.3rem}
.promises p{color:var(--body);margin:0}

/* Area */
.towns{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px}
.towns li{background:var(--white);border:1px solid rgba(17,20,24,.1);border-radius:999px;padding:10px 18px;font-weight:500;font-size:1rem}
.towns li.home-town{border-color:var(--ink)}
.area-media{display:block;max-width:760px;margin:0 auto clamp(32px,5vw,56px)}
.area-media img{width:100%;height:auto;mix-blend-mode:multiply}
.towns li.home-town{background:var(--ink);color:#fff;font-weight:650}

/* Proof panel (FAQ page) */
.proof{background:var(--white);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:clamp(40px,6vw,72px) clamp(24px,5vw,64px);text-align:center;max-width:900px;margin:0 auto}
.proof h2{font-size:clamp(1.9rem,3.6vw,2.75rem)}
.proof p{color:var(--body)}
.proof p:last-child{margin-bottom:0}
.tile-grey .proof{background:var(--white)}

/* Recent work: feature loops + illustrated bento */
.rw{--sepia:#4A3B2E;--warm:#FBF7F0;position:relative}
.rw-defs{position:absolute;width:0;height:0;overflow:hidden}
.rw-features,.rw-bento{list-style:none;margin:0 auto;padding:0;max-width:1180px}
.rw-body .service-tag{margin:0 0 10px}
.rw-body p:last-child{color:var(--body);font-size:1.0625rem;line-height:1.55;margin:0}

/* Feature cards */
.rw-features{display:grid;grid-template-columns:1fr;gap:20px;margin-bottom:20px}
.rw-feature{background:var(--white);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
/* The drawing sizes itself from its own width (viewBox 400x240 = 5:3). The old stage was a 5:3 box with the SVG at
   height:100%, which relies on a percentage height inside an aspect-ratio flex item; Safari can resolve that box from
   the content instead and widen the stage past the card, cropping the right-hand panels. */
.rw-anim{background:var(--warm);border-bottom:1px solid rgba(74,59,46,.10);padding:10px 12px;min-width:0}
.rw-svg{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:5/3;overflow:visible}
.rw-feature .rw-body{padding:24px 28px 30px}
@media (min-width:700px) and (max-width:1039px){
  .rw-feature{display:grid;grid-template-columns:1.1fr 1fr;align-items:center}
  .rw-anim{border-bottom:0;border-right:1px solid rgba(74,59,46,.10);height:100%;min-height:240px;display:flex;align-items:center}
}
@media (min-width:1040px){.rw-features{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* SVG drawing vocabulary */
.rw-svg text{font-family:inherit}
.ink,.ink-thin,.ink-bold,.ink-handle{fill:none;stroke:var(--sepia);stroke-linecap:round;stroke-linejoin:round}
.ink{stroke-width:2}.ink-thin{stroke-width:1.4;stroke-opacity:.8}.ink-bold{stroke-width:3}.ink-handle{stroke-width:6}
.paper{fill:#fff}
.ink-thin.red{stroke:#E63329}
.wash{opacity:.55}.wash-red{fill:#F8D5D1}.wash-green{fill:#D6E8D9}.wash-ochre{fill:#F3E3C0}
.dot-r{fill:#E63329}.dot-y{fill:#E9B949}.dot-g{fill:#166534}
.s1-load{fill:#166534}
.old-side{fill:#E6DDCC}.old-box{fill:#EFE7D8}
.new-hero{fill:#E63329;fill-opacity:.14}.new-btn{fill:#166534}.new-card{fill:#fff}.new-dot{fill:#E63329;fill-opacity:.5}.new-dot.g{fill:#166534}
.searchbar{fill:#fff}.row{fill:#fff}.row.you{fill:#FFF6F4;stroke:#E63329}.fav{fill:#D8D0C3}.fav.you{fill:#E63329}
.t-search{font-size:14px;font-weight:600;fill:#111418}.t-you{font-size:14.5px;font-weight:700;fill:#C4261C}
.s1-you-hl{fill:#F6B9B2;opacity:0}
.pin{fill:#E63329;stroke:#8E1C15;stroke-width:1}
.t-lab{font-size:15px;font-weight:650;fill:#111418}
.box{fill:#fff}
.tick,.cross{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.4;stroke-dasharray:34;stroke-dashoffset:34}
.tick{stroke:#166534}.cross{stroke:#E63329}
.tick.sm{stroke-width:2.4}
.s2-w{opacity:0}.w-ok{fill:#CFE5D3}.w-bad{fill:#F8CFCA}
.cookie{fill:#F6EFE3}.cookie-btn{fill:#166534;fill-opacity:.8}
.lens{fill:#EAF3F7;fill-opacity:.55}
.cite{fill:#FBE3DF;stroke:#E63329}
.ring{fill:#fff}
.s3-h{fill:#E9B949;fill-opacity:.5}
.bar-bg{fill:#fff}.s3-bar{fill:#166534}
/* Counter is plain SVG text (no foreignObject) driven by site.js from the shared 6s timeline: Safari does not repaint
   a CSS counter fed by an animated @property, so it sat on "0,000+" for the whole count-up. */
.t-num{font-size:36px;font-weight:700;letter-spacing:-1px;fill:#111418;font-variant-numeric:tabular-nums}
.t-unit{font-size:13px;font-weight:600;fill:var(--sepia)}

/* Motion: every loop shares one 6s timeline (delay 0), so one negative delay freezes any frame */
.rw-anim *{animation-duration:6s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-play-state:paused}
.is-playing .rw-anim *{animation-play-state:running}
.s1-scene,.s2-scene,.s3-scene{animation-name:rw-scene}
@keyframes rw-scene{0%,90%{opacity:1}93%,96%{opacity:0}100%{opacity:1}}
.s1-old{animation-name:s1-old}
@keyframes s1-old{0%,10%{opacity:1;transform:none}12%{transform:translateX(-1.6px)}14%{transform:translateX(1.6px)}16%{transform:translateX(-1px)}18%{opacity:1;transform:none}28%,94%{opacity:0;transform:translateY(8px)}95%,100%{opacity:1;transform:none}}
.s1-spin{transform-box:fill-box;transform-origin:center;animation-name:spin;animation-timing-function:linear}
@keyframes spin{to{transform:rotate(1080deg)}}
.s1-load{transform-box:fill-box;transform-origin:left center;animation-name:s1-load}
@keyframes s1-load{0%,22%{transform:scaleX(0);opacity:1}30%{transform:scaleX(1);opacity:1}36%,100%{transform:scaleX(1);opacity:0}}
.s1-new{animation-name:s1-new}
@keyframes s1-new{0%,26%{opacity:0;transform:translateY(6px)}36%,93%{opacity:1;transform:none}94%,100%{opacity:0;transform:translateY(6px)}}
.s1-type{animation-name:s1-type;animation-timing-function:steps(7,end)}
@keyframes s1-type{0%,2%{clip-path:inset(0 100% 0 0)}12%,93%{clip-path:inset(0 0 0 0)}94%,100%{clip-path:inset(0 100% 0 0)}}
.s1-you{animation-name:s1-you}
@keyframes s1-you{0%,38%{transform:translateY(0)}52%,93%{transform:translateY(-102px)}94%,100%{transform:translateY(0)}}
.s1-oth{animation-name:s1-oth}
@keyframes s1-oth{0%,38%{transform:translateY(0)}52%,93%{transform:translateY(34px)}94%,100%{transform:translateY(0)}}
.s1-you-hl{animation-name:s1-hl}
@keyframes s1-hl{0%,48%{opacity:0}56%,93%{opacity:.9}94%,100%{opacity:0}}
.s1-pin{animation-name:s1-pin}
@keyframes s1-pin{0%,52%{opacity:0;transform:translateY(-18px)}58%{opacity:1;transform:translateY(2px)}61%,93%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(-18px)}}
.s2-mag{animation-name:s2-mag}
@keyframes s2-mag{0%{transform:translate(52px,54px)}14%{transform:translate(126px,70px)}32%{transform:translate(58px,112px)}50%{transform:translate(128px,142px)}68%{transform:translate(64px,182px)}80%,93%{transform:translate(132px,184px);opacity:1}94%{opacity:0}96%{transform:translate(52px,54px);opacity:0}100%{transform:translate(52px,54px);opacity:1}}
.tick.t1,.s2-w.t1{animation-name:a1}.cross.t2,.s2-w.t2{animation-name:a2}.tick.t3,.s2-w.t3{animation-name:a3}.tick.t4,.s2-w.t4{animation-name:a4}
@keyframes a1{0%,12%{stroke-dashoffset:34;opacity:0}13%{opacity:1}18%,93%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:34;opacity:0}}
@keyframes a2{0%,30%{stroke-dashoffset:34;opacity:0}31%{opacity:1}36%,93%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:34;opacity:0}}
@keyframes a3{0%,48%{stroke-dashoffset:34;opacity:0}49%{opacity:1}54%,93%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:34;opacity:0}}
@keyframes a4{0%,66%{stroke-dashoffset:34;opacity:0}67%{opacity:1}72%,93%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:34;opacity:0}}
.s3-h{transform-box:fill-box;transform-origin:left center;transform:scaleX(0)}
.s3-h.h1{animation-name:h1}.s3-h.h2{animation-name:h2}.s3-h.h3{animation-name:h3}
@keyframes h1{0%,8%{transform:scaleX(0)}16%,93%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
@keyframes h2{0%,28%{transform:scaleX(0)}36%,93%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
@keyframes h3{0%,48%{transform:scaleX(0)}56%,93%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}
.tick.k1{animation-name:k1}.tick.k2{animation-name:k2}.tick.k3{animation-name:k3}
@keyframes k1{0%,17%{stroke-dashoffset:34;opacity:0}18%{opacity:1}21%,93%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:34;opacity:0}}
@keyframes k2{0%,37%{stroke-dashoffset:34;opacity:0}38%{opacity:1}41%,93%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:34;opacity:0}}
@keyframes k3{0%,57%{stroke-dashoffset:34;opacity:0}58%{opacity:1}61%,93%{stroke-dashoffset:0;opacity:1}94%,100%{stroke-dashoffset:34;opacity:0}}
.s3-bar{transform-box:fill-box;transform-origin:left center;animation-name:s3-bar}
@keyframes s3-bar{0%{transform:scaleX(0)}62%,93%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}

/* Illustrated bento */
.rw-bento{display:grid;grid-template-columns:1fr;gap:20px}
.rw-tile{background:var(--white);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.rw-tile.warm{background:var(--warm)}
.rw-vig{padding:18px 18px 0}
.rw-vig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;mix-blend-mode:multiply}
.rw-tile .rw-body{padding:18px 28px 30px}
@media (min-width:700px){
  .rw-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rw-h{grid-column:1/-1;display:grid;grid-template-columns:1.15fr 1fr;align-items:center}
  .rw-h .rw-vig{padding:18px 0 18px 18px}
  .rw-h .rw-body{padding:28px 36px 28px 20px}
  .rw-flip{grid-template-columns:1fr 1.15fr}
  .rw-flip .rw-vig{order:2;padding:18px 18px 18px 0}
  .rw-flip .rw-body{padding:28px 20px 28px 36px}
  .rw-h .rw-body p:last-child{font-size:1.1875rem}
}
@media (min-width:1040px){
  .rw-bento{grid-template-columns:repeat(6,minmax(0,1fr))}
  .rw-t1{grid-column:1/5}
  .rw-t2{grid-column:5/7}
  .rw-t3,.rw-t4,.rw-t5{grid-column:span 2}
  .rw-t6{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .rw-t6 .rw-vig img{max-height:320px;object-fit:contain}
  .rw-t6 .rw-body{padding-left:56px;max-width:560px}
}

/* Vignette reveal: brush-wipe mask + wash from sepia to full colour */
.js .rw-vig img{-webkit-mask-image:linear-gradient(100deg,#000 42%,rgba(0,0,0,.35) 50%,transparent 58%);mask-image:linear-gradient(100deg,#000 42%,rgba(0,0,0,.35) 50%,transparent 58%);-webkit-mask-size:280% 100%;mask-size:280% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:100% 0;mask-position:100% 0;filter:grayscale(1) sepia(.35) contrast(.9);opacity:.55;transform:scale(1.03);transition:-webkit-mask-position 1.3s cubic-bezier(.3,.7,.2,1) var(--d,0s),mask-position 1.3s cubic-bezier(.3,.7,.2,1) var(--d,0s),filter 1.5s ease calc(var(--d,0s) + .45s),opacity .5s ease var(--d,0s),transform 1.8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .rw-tile.is-in .rw-vig img{-webkit-mask-position:0 0;mask-position:0 0;filter:none;opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rw-anim *,.rw-anim *::before{animation-duration:6s!important;animation-delay:-4.8s!important;animation-play-state:paused!important}
  .js .rw-vig img{-webkit-mask-image:none!important;mask-image:none!important;filter:none!important;opacity:1!important;transform:none!important}
}

/* Placeholder (About page only) */
.placeholder{display:inline-block;background:var(--red-tint);color:#9F1D1D;font-weight:600;padding:3px 10px;border-radius:8px;font-size:.9375rem}

/* FAQ teaser + FAQ page */
/* FAQ page: each Q&A is a native <details name="faq"> (exclusive accordion; site.js closes the others where the
   name attribute isn't supported and opens the item named in the URL hash). Plus/minus drawn with two gradients. */
.qa{border-top:1px solid var(--line)}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;border-radius:8px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::marker{content:""}
.qa summary h3{font-size:1.1875rem;line-height:1.35;margin:0;transition:color .2s}
.qa summary::after{content:"";flex:none;width:32px;height:32px;border-radius:50%;background-color:var(--green-tint);
  background-image:linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green));
  background-repeat:no-repeat;background-position:center;background-size:12px 2px,2px 12px;transition:background-size .2s,background-color .2s}
.qa[open] > summary::after{background-size:12px 2px,2px 0}
@media (hover:hover){.qa summary:hover h3{color:var(--green)}.qa summary:hover::after{background-color:#D3EEDD}}
.qa-a{padding:0 48px 22px 0}
.qa-a p,.qa-a li{color:var(--body)}
.qa-a p:last-child{margin-bottom:0}
.qa[open] .qa-a{animation:qa-in .28s ease-out}
@keyframes qa-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:599px){.qa-a{padding-right:0}.qa summary h3{font-size:1.125rem}}
@media (prefers-reduced-motion:reduce){.qa[open] .qa-a{animation:none}.qa summary::after{transition:none}}
/* Homepage: the old four-question teaser is now a short signpost to /faq */
.faq-cta{padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(56px,7vw,88px);text-align:center}
.faq-cta h2{margin:0 0 12px}
.faq-cta p{color:var(--body);font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.5;max-width:36em;margin:0 auto 6px}
.faq-cta .link-chevron{font-size:1.125rem;font-weight:600}
.faq-layout{display:grid;gap:40px;grid-template-columns:1fr;max-width:var(--wide)}
@media (min-width:1000px){.faq-layout{grid-template-columns:240px minmax(0,1fr);gap:56px}}
.faq-index{align-self:start}
@media (min-width:1000px){.faq-index{position:sticky;top:calc(var(--nav-h) + 32px)}}
.faq-index h2{font-family:var(--font);font-size:.9375rem;font-weight:600;letter-spacing:-.01em;color:var(--muted);margin-bottom:10px}
.faq-index ol{list-style:none;padding:0;margin:0}
.faq-index a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--ink);font-weight:500}
.faq-index a:hover{background:var(--grey);text-decoration:none}
.faq-group{background:var(--white);border-radius:var(--r-card);padding:clamp(28px,4vw,48px);margin-bottom:24px;border:var(--card-border);box-shadow:var(--card-shadow)}
.faq-group > h2{font-size:clamp(1.75rem,3vw,2.25rem);margin-bottom:8px}
.faq-group .qa:first-of-type{border-top:0}
.faq-page .proof{background:var(--white)}

/* Inner page header */
.page-head{padding:clamp(64px,9vw,120px) 0 clamp(48px,6vw,80px);text-align:center;background:var(--white)}
.page-head h1{font-size:clamp(2.6rem,6vw,4.5rem);max-width:17ch;margin:0 auto .3em}
.page-head p:not(.kicker){color:var(--body);font-size:clamp(1.125rem,1.6vw,1.3125rem);max-width:36em;margin:0 auto}
.page-media{display:block;max-width:560px;margin:clamp(24px,4vw,40px) auto 0}
.page-media img{width:100%;height:auto;mix-blend-mode:multiply}
.updated{display:inline-block;margin-top:20px;font-size:.875rem;color:var(--muted)}
.breadcrumb ol{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-size:.875rem;color:var(--muted)}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:var(--field)}

/* Prose (legal, about) */
.prose{max-width:44rem;margin:0 auto;padding:clamp(40px,6vw,80px) 0 clamp(72px,9vw,120px)}
.prose h2{font-size:clamp(1.6rem,2.6vw,2rem);letter-spacing:-.02em;margin:2em 0 .5em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:1.6em 0 .5em}
.prose p,.prose li{color:var(--body)}
.prose li{margin-bottom:.4em}
.prose .table-wrap{overflow-x:auto;margin:0 0 1.5em;border-radius:var(--r-card-sm);border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--white)}
.prose caption{text-align:left;font-weight:600;padding:14px 16px 8px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 16px;border-top:1px solid var(--line)}
.prose th{background:var(--grey)}
.callout{background:var(--grey);border-radius:var(--r-card-sm);padding:22px 26px;margin:1.5em 0}
.legal-page{background:var(--white);border-top:1px solid var(--grey-2)}
.company-details h2{margin:0 0 12px;font-size:1.35rem}
.company-details dl{margin:0;display:grid;grid-template-columns:1fr;gap:2px 20px}
@media (min-width:640px){.company-details dl{grid-template-columns:auto 1fr}}
.company-details dt{font-weight:600;color:var(--ink)}
.company-details dd{margin:0 0 8px;color:var(--body)}
@media (min-width:640px){.company-details dd{margin:0 0 4px}}

/* ---------- Contact (warm paper band) ---------- */
.contact-grid{display:grid;gap:40px;grid-template-columns:1fr}
@media (min-width:1000px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start}}
/* Reasons to get in touch: small green ticks, same style as the offer checklist */
.contact-reasons{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.contact-reasons li{position:relative;padding-left:32px;color:var(--body);line-height:1.5}
.contact-reasons li::before{content:"";position:absolute;left:0;top:.15em;width:20px;height:20px;border-radius:50%;background:var(--green-tint)}
.contact-reasons li::after{content:"";position:absolute;left:6px;top:calc(.15em + 5px);width:8px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.contact-aside p.contact-close{margin:24px 0 0;color:var(--ink);font-weight:500}
/* On phones the reasons fold behind "What can I help with?" (site.js closes it below 700px, like the offer panels).
   Without JavaScript it stays open. On wider screens the summary is hidden and the list always shows. */
.reasons-fold > summary{display:none;list-style:none}
.reasons-fold > summary::-webkit-details-marker{display:none}
.reasons-fold > summary::marker{content:""}
@media (max-width:699px){
  .reasons-fold{margin-top:18px;background:var(--white);border:var(--card-border);border-radius:16px;padding:0 16px}
  .reasons-fold > summary{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:10px 0;cursor:pointer;font-weight:600;color:var(--ink)}
  .reasons-fold > summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background-color:var(--green-tint);
    background-image:linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green));
    background-repeat:no-repeat;background-position:center;background-size:12px 2px,2px 12px;transition:background-size .2s}
  .reasons-fold[open] > summary::after{background-size:12px 2px,2px 0}
  .reasons-fold > summary:focus-visible{outline-offset:2px}
  .reasons-fold .contact-reasons{margin:0;padding:2px 0 16px}
  .reasons-fold[open] > .contact-reasons{animation:qa-in .28s ease-out}
  .contact-reasons{margin-top:18px;gap:10px}
  .contact-reasons li{font-size:.9375rem;line-height:1.45;padding-left:28px}
  .contact-reasons li::before{width:18px;height:18px}
  .contact-reasons li::after{left:5px;top:calc(.15em + 5px);width:7px;height:4px}
  .contact-aside p.contact-close{margin-top:16px;font-size:.9375rem}
}
.contact-aside h2{font-size:clamp(2.1rem,4.2vw,3.25rem)}
.contact-aside p:not(.kicker){color:var(--body)}
.form{background:var(--white);color:var(--ink);padding:clamp(28px,4vw,48px);border-radius:28px;border:var(--card-border);box-shadow:var(--card-shadow)}
.form p{color:var(--body)}
.form h3{font-size:1.75rem;letter-spacing:-.02em;margin-bottom:6px}
.form .form-intro{color:var(--body);margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;margin-bottom:6px;font-size:.975rem}
.field .req{font-weight:400;color:var(--muted);font-size:.875rem}
.field .hint{display:block;font-size:.875rem;color:var(--muted);margin:-2px 0 8px}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 16px;font:inherit;color:var(--ink);background:var(--white);border:1px solid var(--field);border-radius:14px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--green);outline-offset:1px;border-color:var(--ink)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border:2px solid var(--red)}
.error-text{display:none;color:var(--red)!important;font-weight:600;font-size:.9375rem;margin:6px 0 0}
.field.has-error .error-text{display:block}
.two-col{display:grid;gap:0 16px;grid-template-columns:1fr}
@media (min-width:640px){.two-col{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-privacy{font-size:.875rem;margin:4px 0 20px}
.form .btn{width:100%}
@media (min-width:640px){.form .btn{width:auto}}
.form-status{display:none;padding:18px 20px;margin-bottom:24px;border-radius:16px}
.form-status:focus{outline:3px solid var(--green);outline-offset:2px}
.form-status.is-visible{display:block}
.form-status.error{background:var(--red-tint);border:2px solid var(--red)}
.form-status.success{background:var(--green-tint);border:2px solid var(--green)}
.form-status h4{margin:0 0 6px;font-size:1.05rem}
.form-status ul{margin:8px 0 0}
.form .form-status p,.form-status a{color:var(--ink)!important}

/* ---------- Footer: pure white, no texture, a clearly visible full-width top rule (28 Sep 2026) ----------
   Contrast on #FFFFFF: text #111418 18.5:1, muted #5A6069 6.3:1, links #166534 7.1:1 (underlined). */
.site-footer{background:#FFFFFF;color:var(--footer-muted);font-size:.875rem;line-height:1.55;padding:56px 0 32px;letter-spacing:-.005em;border-top:1px solid rgba(17,20,24,.3)}
.site-footer .wrap{max-width:var(--max)}
.site-footer a{color:var(--link-dark);text-decoration:none;text-decoration-thickness:1px;text-underline-offset:.18em}
.site-footer a:hover{color:#14532D;text-decoration:underline}
.site-footer :focus-visible{outline-color:var(--green)}
.footer-grid{display:grid;gap:32px 24px;grid-template-columns:repeat(2,minmax(0,1fr));padding:0 0 40px}
.footer-brand-col{grid-column:1/-1}
@media (min-width:800px){.footer-grid{grid-template-columns:minmax(0,1fr) repeat(2,minmax(150px,200px));column-gap:48px}.footer-brand-col{grid-column:auto}}
.footer-brand{margin:0 0 16px}
.footer-brand a{text-decoration:none;display:inline-block}
.footer-brand img{height:26px;width:auto;display:block}
.footer-note{margin:0;max-width:24em;color:var(--footer-muted)}
.site-footer h2{font-family:var(--font);font-size:.8125rem;font-weight:650;color:#111418;letter-spacing:-.005em;margin:0 0 10px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li a{display:inline-flex;min-height:28px;align-items:center}
.legal-line{padding-top:22px;border-top:var(--hairline);font-size:.8125rem}
.legal-line p{margin:0 0 6px;color:var(--footer-muted)}

/* 404 */
.notfound{padding:clamp(80px,12vw,160px) 0;text-align:center}
.notfound .page-media{margin:0 auto clamp(8px,2vw,16px)}
.notfound .code{font-size:clamp(5rem,16vw,10rem);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--field);margin:0 0 16px}
.notfound ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:32px 0 0}

/* About */
.about-grid{display:grid;gap:40px;grid-template-columns:1fr;max-width:var(--wide)}
@media (min-width:1000px){.about-grid{grid-template-columns:340px minmax(0,1fr);gap:56px}}
.about-side{align-self:start;background:var(--white);border-radius:var(--r-card);padding:20px;border:var(--card-border);box-shadow:var(--card-shadow)}
@media (min-width:1000px){.about-side{position:sticky;top:calc(var(--nav-h) + 32px)}}
.about-facts{margin:20px 4px 4px}
.about-facts dt{font-size:.8125rem;font-weight:600;color:var(--muted);padding-top:12px}
.about-facts dd{margin:2px 0 0;padding-bottom:12px;border-bottom:1px solid var(--grey-2)}
.about-facts dd:last-child{border-bottom:0}
.about-prose{background:var(--white);border-radius:var(--r-card);padding:clamp(28px,5vw,56px);max-width:none;margin:0;border:var(--card-border);box-shadow:var(--card-shadow)}
.about-media{display:block;width:100%;max-width:560px;margin:0 auto clamp(20px,3vw,32px)}
@media (min-width:700px){.about-media{width:84%}}
/* The Roseberry illustration already sits on pure #FFFFFF with painted edges, so multiply blends it into the white card.
   The mask only feathers the outermost few percent (a safety net against a hard edge); the floating windows near the
   top corners stay fully opaque. The old closest-side radial mask faded everything beyond 42% of the radius. */
.about-media img{display:block;width:100%;height:auto;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);
  mask-composite:intersect}
.about-prose .callout{background:var(--grey)}

/* ---------- Scroll motion (28 Sep 2026). Ported from jddamedia.co.uk, plain JS + IntersectionObserver.
   Hidden start states only exist under classes that site.js adds (.reveal, html.m-on), so without JS, or if the script
   fails, everything is simply visible. Transform / opacity / mask only: no layout shift. Every element animates for 0.5s or less. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
/* Shown at once after an in-page jump (site.js adds .no-fade briefly) */
.no-fade,.no-fade *,.no-fade *::before{transition:none!important}
/* 1. Service rows: the vignette slides in from its own side and washes in (soft mask sweep); text follows from the other side */
.m-on .svc-row .svc-media{opacity:0;transform:translateX(-40px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.m-on .svc-row .svc-media img{-webkit-mask-image:linear-gradient(to right,#000 0 40%,transparent 60% 100%);mask-image:linear-gradient(to right,#000 0 40%,transparent 60% 100%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  transition:-webkit-mask-position .5s var(--ease-out) .05s,mask-position .5s var(--ease-out) .05s}
.m-on .svc-row > :not(.svc-media){opacity:0;transform:translateX(28px);transition:opacity .45s var(--ease-out) .1s,transform .45s var(--ease-out) .1s}
@media (min-width:768px){
  .m-on .svc-row:nth-child(even) .svc-media{transform:translateX(40px)}
  .m-on .svc-row:nth-child(even) .svc-media img{-webkit-mask-image:linear-gradient(to left,#000 0 40%,transparent 60% 100%);mask-image:linear-gradient(to left,#000 0 40%,transparent 60% 100%);-webkit-mask-position:0 0;mask-position:0 0}
  .m-on .svc-row:nth-child(even) > :not(.svc-media){transform:translateX(-28px)}
}
@media (max-width:767px){.m-on .svc-row .svc-media{transform:translateY(24px)}.m-on .svc-row > :not(.svc-media){transform:translateY(20px)}}
.m-on .svc-row.m-in .svc-media,.m-on .svc-row.m-in > :not(.svc-media){opacity:1;transform:none}
.m-on .svc-row.m-in .svc-media img{-webkit-mask-position:0 0;mask-position:0 0}
@media (min-width:768px){.m-on .svc-row.m-in:nth-child(even) .svc-media img{-webkit-mask-position:100% 0;mask-position:100% 0}}
/* 2. How it works: cards rise with a 90ms stagger; each step number pops just after its card */
.m-on .steps li{opacity:0;transform:translateY(24px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.m-on .steps li::before{transform:scale(.4);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;transition-delay:calc(var(--i,0) * 90ms + 150ms)}
.m-on .steps.m-in li{opacity:1;transform:none}
.m-on .steps.m-in li::before{transform:none;opacity:1}
/* 3. Experience facts: stagger in while the numbers count up (site.js, 0.5s); tabular figures keep widths steady */
.m-on .facts li{opacity:0;transform:translateY(20px);transition:opacity .45s var(--ease-out),transform .45s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.m-on .facts.m-in li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal,.m-on .svc-row .svc-media,.m-on .svc-row > *,.m-on .steps li,.m-on .steps li::before,.m-on .facts li{opacity:1!important;transform:none!important;transition:none!important}
  .m-on .svc-row .svc-media img{-webkit-mask-image:none!important;mask-image:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
}

@media print{.site-header,.site-footer{display:none}.reveal,.m-on *{opacity:1!important;transform:none!important;-webkit-mask-image:none!important;mask-image:none!important}}

/* Links inside running text are underlined so they don't rely on colour alone (WCAG 1.4.1) */
main :is(p,li,dd) a:not(.btn):not(.link-chevron),.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
main .faq-index a{text-decoration:none!important}
main .faq-index a:hover{text-decoration:underline!important}
.breadcrumb a{text-decoration:underline;text-underline-offset:.18em}
.proof .kicker{color:var(--red)}
.founder-text{align-self:center}
/* Founder proof points (about) and paired CTAs (homepage founder card) */
.chips{list-style:none;padding:0;margin:28px 0 8px;display:flex;flex-wrap:wrap;gap:10px}
.prose .chips li{margin:0;background:var(--green-tint);color:var(--ink);border-radius:999px;padding:8px 16px;font-size:.9375rem;font-weight:600;line-height:1.35}
.founder-links{display:flex;flex-wrap:wrap;gap:0 28px}

/* How it works: small looping overlays on the step illustrations (shown only while in view, never with reduced motion) */
.step-fx{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fx-ready .step-fx{display:block}
.step-fx *{animation-play-state:paused;animation-iteration-count:infinite}
.fx-play .step-fx *{animation-play-state:running}
.sw{fill:none;stroke:#A09385;stroke-width:3.5;stroke-linecap:round;opacity:0;transform-box:fill-box;transform-origin:50% 100%;animation:fx-steam 3.6s ease-in-out infinite}
.sw.w2{animation-delay:1.2s}.sw.w3{animation-delay:2.4s}
@keyframes fx-steam{0%{opacity:0;transform:translateY(8px) scaleX(.9)}30%{opacity:.6}100%{opacity:0;transform:translateY(-72px) scaleX(1.2)}}
.fx-cover{fill:#fff}
.fx-arrow-reveal{fill:none;stroke:#fff;stroke-width:40;stroke-dasharray:100;stroke-dashoffset:100;animation:fx-reveal 4s ease-in-out infinite}
.fx-dots{fill:none;stroke:#1E1B18;stroke-width:11;stroke-linecap:round;stroke-dasharray:.1 24.5}
.fx-head{fill:none;stroke:#1E1B18;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:fx-head 4s ease-in-out infinite}
.fx-arrow{animation:fx-fade 4s ease-in-out infinite}
@keyframes fx-reveal{0%{stroke-dashoffset:100}45%,100%{stroke-dashoffset:0}}
@keyframes fx-head{0%,44%{opacity:0}52%,100%{opacity:1}}
@keyframes fx-fade{0%,86%{opacity:1}95%,100%{opacity:0}}
.fx-flame{transform-box:fill-box;transform-origin:50% 0;animation:fx-flicker .42s ease-in-out infinite alternate}
.fl-o{fill:#E63329;fill-opacity:.8}.fl-i{fill:#F2C14E;fill-opacity:.9}
@keyframes fx-flicker{0%{transform:scale(.9,.72)}50%{transform:scale(1.05,1)}100%{transform:scale(.95,.84)}}
.pf{fill:#CFC8A6;opacity:0;animation:fx-puff 2.4s ease-out infinite}
.pf.p2{animation-delay:.8s}.pf.p3{animation-delay:1.6s}
@keyframes fx-puff{0%{opacity:0;transform:translate(628px,334px) scale(.5)}20%{opacity:.75}100%{opacity:0;transform:translate(528px,430px) scale(1.5)}}
.dr{fill:#5B93B8;fill-opacity:.9;opacity:0;animation:fx-drop-a 1.6s ease-in infinite}
.dr.d2{animation-name:fx-drop-b;animation-delay:.4s}.dr.d3{animation-delay:.8s}.dr.d4{animation-name:fx-drop-b;animation-delay:1.2s}
@keyframes fx-drop-a{0%{opacity:0;transform:translate(573px,396px)}12%{opacity:1}50%{transform:translate(590px,422px)}80%{opacity:1}100%{opacity:0;transform:translate(606px,466px)}}
@keyframes fx-drop-b{0%{opacity:0;transform:translate(575px,400px)}12%{opacity:1}50%{transform:translate(602px,424px)}80%{opacity:1}100%{opacity:0;transform:translate(626px,460px)}}
@media (prefers-reduced-motion:reduce){.step-fx{display:none!important}}

/* ---------- Phones (below 700px): shorter homepage, 29 Sep 2026 ----------
   Everything here is scoped to max-width:699px so tablet and desktop layouts are unchanged. */
.car-dots,.sticky-cta{display:none}
.panel-fold > summary{display:block;list-style:none}
.panel-fold > summary::-webkit-details-marker{display:none}
.panel-fold > summary::marker{content:""}
@media (min-width:700px){.panel-fold > summary{cursor:default}}
@media (max-width:699px){
  /* 7. Tighter section rhythm */
  .section{padding-top:56px;padding-bottom:56px}
  .tile-offer{padding-top:40px;padding-bottom:40px}
  .section-head{margin-bottom:32px}

  /* 1. Recent work: both lists become swipe carousels with a peek of the next card */
  .rw-features,.rw-bento{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;gap:14px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--gutter);
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rw-features::-webkit-scrollbar,.rw-bento::-webkit-scrollbar{display:none}
  .rw-features{margin-bottom:6px}
  .rw-features > li,.rw-bento > li{scroll-snap-align:start;min-width:0}
  .rw-features:focus-visible,.rw-bento:focus-visible{outline-offset:-3px}
  .car-dots{display:flex;justify-content:center;gap:8px;margin:4px 0 22px}
  .car-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(17,20,24,.2);cursor:pointer;transition:background-color .2s,width .2s}
  .car-dots button.is-active{background:var(--green);width:20px;border-radius:4px}
  .rw-bento + .car-dots{margin-bottom:0}

  /* 2. Services: small vignette beside each heading */
  .svc-rows{gap:36px}
  .svc-row{grid-template-columns:minmax(0,1fr) 104px;column-gap:14px;grid-template-areas:"head media" "body body"}
  .svc-row > .svc-media{margin:0;align-self:center}
  .svc-row h3{font-size:1.375rem;line-height:1.2;margin:0;align-self:center}
  .svc-row > .svc-body{margin-top:12px}

  /* 3. Free offer: Included / Not included fold away (site.js closes them on phones); price strip as one compact card */
  .offer-grid{gap:12px}
  .panel-fold{padding:0 20px}
  .panel-fold > summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0;cursor:pointer}
  .panel-fold > summary h3{margin:0;font-size:1.1875rem}
  .panel-fold > summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background-color:var(--green-tint);
    background-image:linear-gradient(var(--green),var(--green)),linear-gradient(var(--green),var(--green));
    background-repeat:no-repeat;background-position:center;background-size:12px 2px,2px 12px;transition:background-size .2s}
  .panel-fold[open] > summary::after{background-size:12px 2px,2px 0}
  .panel-fold > ul{padding-bottom:16px}
  .panel-fold[open] > ul{animation:qa-in .28s ease-out}
  .price-strip{gap:0;margin-top:12px;background:var(--white);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card);padding:4px 20px}
  .price-strip div{display:grid;grid-template-columns:108px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;text-align:left;background:none;border:0;border-radius:0;box-shadow:none}
  .price-strip div + div{border-top:1px solid var(--line)}
  .price-strip dt{margin:0;font-size:.875rem}
  .price-strip dd{font-size:1rem;font-weight:600;letter-spacing:-.01em;line-height:1.35}

  /* 4. How it works: compact numbered list, no pictures; promises as short ticked lines */
  .steps{gap:10px}
  .steps li{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;padding:16px 18px}
  .steps li::before{grid-column:1;grid-row:1 / span 2;width:36px;height:36px;margin:0;font-size:.9375rem}
  .steps li > .step-art{display:none}
  .steps li > h3{grid-column:2;margin:5px 0 4px;font-size:1.125rem}
  .steps li > p{grid-column:2;font-size:.975rem;line-height:1.5}
  .promises{margin-top:24px;gap:12px;text-align:left}
  .promises > div{position:relative;padding-left:32px}
  .promises > div::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--green-tint)}
  .promises > div::after{content:"";position:absolute;left:6px;top:8px;width:8px;height:5px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
  .promises h3{font-size:1.0625rem;margin:0 0 2px}
  .promises p{font-size:.9375rem;line-height:1.45}

  /* 5. Experience: the founder card already tells the story, so drop the repeated intro and keep one paragraph */
  #experience .exp-intro,.founder-card .founder-more,.founder-links .founder-contact{display:none}
  .facts{margin-bottom:32px;gap:28px 20px}
  .founder-card{gap:20px}

  /* 6. Where I work: towns in two columns, no illustration */
  .area-media{display:none}
  .towns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .towns li{padding:8px 10px;text-align:center;font-size:.9375rem}

  /* 8. Contact form: tighter spacing */
  .field{margin-bottom:14px}
  .field textarea{min-height:112px}
  .form{padding:24px 20px}
  .form .form-intro{margin-bottom:18px}
  .two-col-opt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;align-items:end}
  .two-col-opt .field label{line-height:1.3}

  /* 9. Footer: brand across the top, Explore and Legal side by side, tighter spacing */
  .site-footer{padding:40px 0 24px}
  .footer-grid{gap:24px 20px;padding-bottom:28px}

  /* 10. Sticky "Get in touch": shown by site.js once the hero has scrolled away, hidden again over the contact form */
  .sticky-cta{display:inline-flex;position:fixed;z-index:40;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));
    transform:translate(-50%,calc(100% + 28px));visibility:hidden;min-width:200px;box-shadow:0 10px 26px -8px rgba(17,20,24,.45);
    transition:transform .3s var(--ease-out),visibility 0s linear .3s}
  .sticky-cta.is-shown{transform:translate(-50%,0);visibility:visible;transition:transform .3s var(--ease-out),visibility 0s}
  html.has-sticky-cta{scroll-padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media print{.sticky-cta,.car-dots{display:none!important}}

/* ---------- My work: hub, case studies and the homepage featured cards (1 Oct 2026) ---------- */
.work-cards{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.work-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.work-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:var(--card-border);border-radius:var(--r-card);box-shadow:var(--card-shadow);overflow:hidden;transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out)}
.work-card:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(17,20,24,.05),0 24px 56px -28px rgba(17,20,24,.3)}
.work-card:focus-within{outline:2px solid var(--green);outline-offset:3px}
.work-card-img{display:block;aspect-ratio:16/10;background:var(--grey);border-bottom:var(--hairline);overflow:hidden}
.work-card-img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.work-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 20px}
.work-card h3,.work-card h2{font-size:1.25rem;line-height:1.25;margin:0 0 8px}
.work-card h3 a,.work-card h2 a{color:var(--ink)}
.work-card h3 a::after,.work-card h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.work-card h3 a:hover,.work-card h2 a:hover{text-decoration:none}
.work-card h3 a:focus-visible,.work-card h2 a:focus-visible{outline:none}
.work-card p{color:var(--body);font-size:.9844rem;line-height:1.5;margin:0 0 14px}
.work-card .link-chevron{margin-top:auto;min-height:32px;font-size:.9844rem}
.work-all{text-align:center;margin:clamp(28px,4vw,44px) 0 0}
@media (prefers-reduced-motion:reduce){.work-card{transition:none}.work-card:hover{transform:none}}

/* Hub */
.work-intro{max-width:44rem;margin:0 auto}
.work-intro p{color:var(--body);font-size:clamp(1.0625rem,1.3vw,1.1875rem);line-height:1.6}
.work-intro p:last-child{margin-bottom:0}
.work-intro-band{padding-top:0;padding-bottom:clamp(56px,7vw,96px)}
.work-brief{list-style:none;margin:0 auto;padding:0;display:grid;gap:20px;grid-template-columns:minmax(0,1fr);max-width:var(--max)}
@media (min-width:800px){.work-brief{grid-template-columns:repeat(3,minmax(0,1fr))}}
.work-brief li{border:var(--card-border);border-radius:var(--r-card-sm);padding:22px 24px;background:var(--white)}
.work-brief h3{font-size:1.125rem;margin:0 0 8px}
.work-brief p{color:var(--body);font-size:.9844rem;margin:0}

/* Case study page */
.cs-head{padding-bottom:clamp(36px,5vw,64px)}
.cs-head h1{max-width:20ch}
.cs-media{padding:clamp(40px,6vw,80px) 0;overflow-x:clip}
.cs-shots{position:relative;max-width:1000px;margin:0 auto;padding-right:clamp(0px,12vw,150px)}
.cs-shots figure{margin:0}
.cs-desk{background:var(--white);border:var(--card-border);border-radius:16px;box-shadow:var(--card-shadow);overflow:hidden}
.cs-bar{height:28px;border-bottom:var(--hairline);background:var(--grey);position:relative}
.cs-bar::before{content:"";position:absolute;left:14px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#D5D6DB;box-shadow:14px 0 0 #D5D6DB,28px 0 0 #D5D6DB}
.cs-desk img{width:100%;height:auto}
.cs-phone{position:absolute;right:0;bottom:-28px;width:clamp(180px,24vw,260px);background:var(--white);border:1px solid rgba(17,20,24,.14);border-radius:30px;padding:8px;box-shadow:0 2px 4px rgba(17,20,24,.06),0 28px 60px -24px rgba(17,20,24,.35)}
.cs-phone img{width:100%;height:auto;border-radius:22px}
.cs-shots.is-illus{padding-right:0;max-width:760px}
.cs-illus img{width:100%;height:auto;mix-blend-mode:multiply}
@media (max-width:699px){
  .cs-shots{padding-right:0}
  .cs-shots .cs-phone{position:relative;right:auto;bottom:auto;width:50%;max-width:200px;margin:-64px 10px 0 auto;border-radius:24px;padding:6px}
  .cs-shots .cs-phone img{border-radius:18px}
}
.cs-body{padding-top:clamp(64px,8vw,112px)}
.cs-grid{display:grid;gap:clamp(32px,5vw,64px);grid-template-columns:minmax(0,1fr);max-width:var(--max)}
@media (min-width:960px){
  .cs-grid{grid-template-columns:minmax(0,300px) minmax(0,1fr);align-items:start}
  .cs-glance{position:sticky;top:calc(var(--nav-h) + 24px)}
}
.cs-glance{background:var(--white);border:var(--card-border);border-radius:var(--r-card-sm);box-shadow:var(--card-shadow);padding:24px}
.cs-glance h2{font-size:1.25rem;letter-spacing:-.015em;margin:0 0 14px}
.cs-glance dl{margin:0}
.cs-glance dt{font-size:.875rem;font-weight:650;color:var(--ink);margin:14px 0 2px}
.cs-glance dt:first-child{margin-top:0}
.cs-glance dd{margin:0;color:var(--body);font-size:.9688rem;line-height:1.5}
.cs-prose{padding:0;margin:0;max-width:44rem}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--grey);border-radius:6px;padding:.1em .35em}
.cs-quote{margin:2em 0 0;padding:28px 28px 24px;border-radius:var(--r-card-sm);background:var(--green-tint);position:relative}
.cs-quote blockquote{margin:0}
.cs-quote blockquote p{color:var(--ink);font-size:clamp(1.1875rem,1.8vw,1.375rem);line-height:1.45;font-weight:500;letter-spacing:-.012em;margin:0 0 .6em}
.cs-quote figcaption{color:var(--body);font-size:.9375rem;font-weight:600}
.cs-quote.is-draft{background:var(--grey);border:1.5px dashed rgba(198,40,40,.45)}
.draft-tag{display:inline-block;margin:0 0 12px;padding:3px 10px;border-radius:999px;background:var(--red-tint);color:var(--red);font-size:.8125rem;font-weight:650;letter-spacing:0;line-height:1.5}
.cs-cta .section-head{margin-bottom:0}
.cs-cta .section-head p:not(.kicker) a:not(.btn){text-decoration:underline;text-underline-offset:.18em}
.cs-cta .section-head .btn-row{justify-content:center;margin-top:28px}
main .work-card .work-card-body :is(h2,h3) a{text-decoration:none}
.cs-grid.no-aside{grid-template-columns:minmax(0,1fr)}
.cs-grid.no-aside .cs-prose{margin:0 auto;width:100%}
.cs-illus.is-svg img{mix-blend-mode:normal;border-radius:var(--r-card);border:var(--card-border);box-shadow:var(--card-shadow)}

/* ===== Design previews (case-studies branch only): illustration-led work ===== */
.pv-flag{background:var(--red-tint);border-bottom:1px solid rgba(198,40,40,.18)}
.pv-flag .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 20px;padding-top:10px;padding-bottom:10px}
.pv-flag p{margin:0;font-size:.9375rem;color:var(--ink)}
.pv-flag nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pv-flag nav a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:999px;background:var(--white);color:var(--ink);font-size:.875rem;font-weight:600;border:1px solid rgba(198,40,40,.22)}
.pv-flag nav a[aria-current]{background:var(--red);color:#fff;border-color:var(--red)}
.pv-flag nav a:hover{text-decoration:none}
/* illustrated card image: the pencil vignette sits on white, no crop */
.ill-card-img{display:block;aspect-ratio:16/9;padding:16px 16px 0;background:var(--white);overflow:hidden;position:relative}
.ill-card-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s var(--ease-out)}
.work-card:hover .ill-card-img img{transform:scale(1.035)}
.ill-tag{font-size:.875rem!important;font-weight:600;color:var(--red)!important;margin:0 0 6px!important;line-height:1.4!important}
.pv-interim{position:absolute;left:14px;top:14px;z-index:2;padding:3px 10px;border-radius:999px;background:var(--red-tint);color:var(--red);font-size:.75rem;font-weight:650;line-height:1.5}
/* B: five named case studies, two large then three */
@media (min-width:1000px){
  .work-cards.is-five{grid-template-columns:repeat(6,minmax(0,1fr))}
  .work-cards.is-five > li{grid-column:span 2}
  .work-cards.is-five > li:nth-child(-n+2){grid-column:span 3}
  .work-cards.is-five > li:nth-child(-n+2) h3{font-size:1.4375rem}
}
@media (min-width:640px) and (max-width:999px){.work-cards.is-five > li:first-child{grid-column:1 / -1}}
.conf-row{margin:clamp(28px,4vw,44px) 0 0;padding:22px clamp(18px,2.4vw,28px);border:var(--card-border);border-radius:var(--r-card-sm);background:var(--white)}
.conf-row h3{font-size:1.0625rem;margin:0 0 4px}
.conf-row > p{margin:0 0 14px;color:var(--body);font-size:.9375rem}
.conf-row ul{list-style:none;margin:0;padding:0;display:grid;gap:6px 18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.conf-row ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.conf-row ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.conf-row li a{display:flex;align-items:center;gap:12px;min-height:52px;color:var(--ink);font-size:.9375rem;font-weight:550;line-height:1.3}
.conf-row li a:hover{text-decoration:underline;text-underline-offset:.18em}
.conf-row li img{flex:0 0 auto;width:72px;height:41px;object-fit:contain;mix-blend-mode:multiply}
/* C: one featured story and two smaller cards */
.feature-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.4vw,32px);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .feature-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:auto auto}
  .feature-grid > .is-feature{grid-row:1 / span 2}
}
.feature-grid .is-feature .ill-card-img{padding:24px 24px 0}
.feature-grid .is-feature .work-card-body{padding:26px clamp(22px,2.6vw,34px) 26px}
.feature-grid .is-feature h3{font-size:clamp(1.375rem,2vw,1.75rem);letter-spacing:-.018em}
.feature-grid .is-feature .work-card-body > p{font-size:1.0625rem}
.feature-quote{margin:4px 0 18px;padding:16px 18px;border-radius:14px;background:var(--green-tint)}
.feature-quote p{margin:0 0 4px!important;color:var(--ink)!important;font-weight:500;font-size:1.0625rem!important}
.feature-quote footer{color:var(--body);font-size:.875rem;font-weight:600}
.feature-grid .is-small .ill-card-img{aspect-ratio:2/1}
.feature-grid .is-small .work-card-body{padding:16px 22px 18px}
/* illustrated page heads */
.ill-head .wrap{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.ill-head .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.ill-head-art{margin:0}
.ill-head-art img{width:100%;height:auto;mix-blend-mode:multiply}
.ill-head-art figcaption{margin-top:6px;text-align:center}
.ill-head .breadcrumb,.ill-head h1,.ill-head p{text-align:left}
.ill-head h1{margin-left:0}
.live-proof .section-head{margin-bottom:clamp(32px,4vw,52px)}
.live-proof .cs-shots{margin-bottom:28px}
.ill-head .breadcrumb ol{justify-content:flex-start}
.ill-head p:not(.kicker){margin-left:0}
.ill-head{padding-top:clamp(40px,6vw,88px)}
.ill-head{overflow-x:clip}
@media (min-width:900px){
  .feature-grid .is-feature .ill-card-img{aspect-ratio:auto;flex:1 1 auto;min-height:320px}
  .feature-grid .is-feature .work-card-body{flex:0 0 auto}
}

/* Free website offer: slim strip under the homepage hero, and the /free-website page */
.hero:has(+ .offer-strip){padding-bottom:clamp(32px,4vw,56px)}
.offer-strip{position:relative;background:var(--white);padding:0 0 clamp(40px,5vw,64px)}
.offer-strip-inner{position:relative;isolation:isolate;overflow:hidden;max-width:1120px;margin:0 auto;padding:14px clamp(18px,3vw,32px);text-align:center;text-wrap:balance;font-size:1rem;line-height:1.6;color:var(--body);background:var(--paper);border:var(--card-border);border-radius:var(--r-card-sm)}
.offer-strip-inner::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at center,rgba(90,70,40,.16) 0 .9px,transparent 1.3px);background-size:18px 18px}
.offer-strip-inner strong{color:var(--ink);font-weight:650}
.offer-strip-inner .link-chevron{display:inline-flex;min-height:24px;margin-left:.35em;font-size:1rem;font-weight:600;white-space:nowrap;vertical-align:baseline}
@media (max-width:599px){.offer-strip-inner{text-align:left;text-wrap:pretty;font-size:.9688rem;padding:14px 18px}.offer-strip-inner .link-chevron{display:flex;margin:6px 0 0;min-height:32px}}
.offer-head .btn-row{justify-content:flex-start;margin-top:28px}
.offer-who{max-width:880px;margin-bottom:0}
.offer-steps{list-style:none;counter-reset:offer-step;padding:0;margin:0 auto;max-width:46rem;display:grid;gap:14px}
.offer-steps li{counter-increment:offer-step;position:relative;padding:20px 24px 20px 72px;color:var(--ink);background:var(--white);border:var(--card-border);box-shadow:var(--card-shadow);border-radius:var(--r-card-sm)}
.offer-steps li::before{content:counter(offer-step);position:absolute;left:22px;top:18px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--green);background:var(--green-tint)}
@media (max-width:599px){.offer-steps li{padding:18px 18px 18px 62px}.offer-steps li::before{left:16px}}
.offer-faq{max-width:52rem;margin:0 auto}

/* Buttons inside prose (About page): no link underline, one line on phones (shorter label below 360px) */
.prose a.btn{text-decoration:none}
.btn-fit{white-space:nowrap;max-width:100%}
@media (max-width:399px){.btn-fit{font-size:.9375rem;padding:0 18px}}
@media (max-width:359px){.btn-fit .btn-more{display:none}}

/* Case studies: heading says what was built, "In short", byline and closing links (2 Oct 2026) */
.h1-what{display:block;margin-top:.12em;font-size:.56em;line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--body)}
.cs-inshort{max-width:36em}
.cs-inshort strong{color:var(--ink);font-weight:650}
.ill-head p.cs-byline{margin-top:14px;font-size:.9375rem;color:var(--muted)}
.cs-byline a{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.cs-cta .section-head p.cs-links{margin-top:22px;font-size:1rem;color:var(--body)}