/* ============================================================
   daysgraphic.com — design system v3 ("sharp")
   Plain CSS, no build step.

   Direction: precise, not soft. Structure is carried by hairline
   rules and squared corners rather than drop shadows and pills —
   sharper than v2 while staying plain enough that a shop owner
   never feels like they wandered onto a design studio's site.

   Token names are unchanged from v2 on purpose, so card.css keeps
   working while pages migrate.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  /* ground + ink */
  --paper:#FFFFFF;
  --panel:#F7F5F2;
  --panel-2:#EFEBE6;
  --ink:#14100C;
  --ink-soft:#47403A;
  --muted:#7A7168;
  --faint:#A0968C;
  --line:#E7E1D9;
  --line-strong:#CFC6BA;

  /* accent + semantic */
  --blue:#B4501B;
  --blue-ink:#8E3D13;
  --blue-wash:#FAF0E7;
  --ok:#1F7A4D;
  --danger:#B3261E;

  /* form */
  --r:4px;
  --r-lg:6px;
  --pill:999px;
  --shadow:none;
  --shadow-sm:none;

  --container:1120px;
  --font:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-display:'Archivo','Public Sans',-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink-soft);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.wrap{width:min(var(--container),100%);margin-inline:auto;padding-inline:24px}

/* ── type ─────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0;
  font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.display{font-size:clamp(34px,5.2vw,54px);line-height:1.06;letter-spacing:-.03em}
.h2{font-size:clamp(26px,3.4vw,36px);letter-spacing:-.025em}
h3{font-size:20px;letter-spacing:-.015em}
h4{font-size:17px;letter-spacing:-.01em}
p{margin:0}
.lead{font-size:19px;color:var(--ink-soft);max-width:60ch}
.muted{color:var(--muted)}
.label{font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue);margin:0}
.small{font-size:15px}

/* ── buttons ──────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font);font-size:16px;font-weight:600;line-height:1;
  padding:14px 22px;border-radius:var(--r);border:1px solid var(--ink);
  background:var(--ink);color:#fff;transition:background .15s ease,border-color .15s ease}
.btn:hover{background:#2A231C;border-color:#2A231C}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--quiet:hover{background:var(--panel);border-color:var(--ink);color:var(--ink)}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:#EAEEF4;border-color:#EAEEF4;color:var(--ink)}
.btn--sm{padding:10px 16px;font-size:15px}
.btn--block{width:100%;justify-content:center}

/* ── nav ──────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.brand{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--ink);
  letter-spacing:-.03em;display:inline-flex;align-items:baseline}
.brand b{font-weight:700}
.brand .bd{width:5px;height:5px;background:var(--blue);margin-left:3px;display:inline-block}
.nav__menu{display:flex;align-items:center;gap:26px}
.nav__menu>a:not(.btn){font-size:15px;font-weight:500;color:var(--ink-soft)}
.nav__menu>a:not(.btn):hover,.nav__menu>a.active{color:var(--ink)}
.navlang{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:var(--r)}
.navlang:hover{color:var(--ink);border-color:var(--line-strong)}
.nav__toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:10px;cursor:pointer}
.nav__toggle span{width:22px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
@media(max-width:900px){
  .nav__toggle{display:flex}
  .nav__menu{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);padding:8px 24px 20px;
    transform:translateY(-130%);transition:transform .24s ease;visibility:hidden}
  .nav__menu.is-open{transform:translateY(0);visibility:visible}
  .nav__menu>a:not(.btn){padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .nav__menu>a.navlang:not(.btn){align-self:flex-start;margin-top:14px;padding:7px 11px 7px 30px;font-size:12px;border:1px solid var(--line)}
  .nav__menu .btn{margin-top:16px;justify-content:center}
  .nav__toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav__toggle.is-open span:nth-child(2){opacity:0}
  .nav__toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* ── sections ─────────────────────────────────────── */
.section{padding-block:clamp(52px,7vw,88px)}
.section--tight{padding-block:clamp(36px,5vw,56px)}
.section--panel{background:var(--panel);border-block:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:12px;max-width:62ch;margin-bottom:36px}
.stack{display:flex;flex-direction:column;gap:16px}
.cluster{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* ── hero ─────────────────────────────────────────── */
.hero{padding-top:clamp(44px,6vw,72px);padding-bottom:clamp(32px,4vw,48px)}
/* 32ch, not 20ch: the headline reads as a sentence across two lines rather
   than a narrow stack of three. */
.hero__head{display:flex;flex-direction:column;gap:18px;max-width:32ch}
.hero__head .display{font-size:clamp(36px,5.8vw,60px)}
.hero__sub{font-size:19px;color:var(--ink-soft);max-width:56ch;margin-top:18px}
.hero__note{font-size:15px;color:var(--muted);margin-top:4px}
.hero__note b{color:var(--ink-soft);font-weight:600}

/* ── industry doors ───────────────────────────────── */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:40px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:860px){.doors{grid-template-columns:1fr}}
.door{display:flex;flex-direction:column;background:#fff;transition:background .15s ease}
.door:hover{background:var(--blue-wash)}
.door__art{aspect-ratio:16/10;display:flex;align-items:flex-end;padding:12px;background:var(--ink)}
.door__art span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.86);background:rgba(0,0,0,.32);padding:4px 8px}
.art--resto{background:linear-gradient(155deg,#2A1B10,#B4501B)}
.art--shop{background:linear-gradient(155deg,#1A1712,#8E6B3A)}
.art--salon{background:linear-gradient(155deg,#2E2A27,#C79A8E)}
.door__body{display:flex;flex-direction:column;gap:7px;padding:20px}
.door__body p{font-size:15px;color:var(--muted)}
.door__go{margin-top:8px;font-size:15px;font-weight:600;color:var(--blue)}

/* ── price board ──────────────────────────────────── */
/* The board had no radius at all, which is what made it read as a
   different site: every other surface here is rounded.

   --r-card (16px) and --line-strong, not the 22px/--line pairing the
   work cards use. Those two are a real distinction in this stylesheet,
   not noise: --r-shot + --line is for image surfaces (.shot,
   .work__shot, .feat__shot), --r-card + --line-strong is for content
   panels (.close, .mtype, .cal). A price list is a content panel.

   overflow:hidden is what makes the radius real: the first row and the
   footer both paint their own backgrounds to the edge, so without it
   they square off the corners they sit in. */
.board{border:1px solid var(--line-strong);border-radius:var(--r-card);overflow:hidden;background:#fff}
.board__row{display:grid;grid-template-columns:1fr auto;gap:6px 28px;align-items:baseline;
  padding:22px 26px;border-top:1px solid var(--line)}
.board__row:first-child{border-top:0}
.board__row h3{grid-column:1}
.board__row p{grid-column:1;font-size:15px;color:var(--muted)}
/* Out-specifies `.board__row p` — without this the figure collapses to
   15px muted text in column 1. */
.board__row p.price{grid-row:1;grid-column:2;text-align:right;white-space:nowrap;
  font-family:var(--font-display);font-weight:700;font-size:28px;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.board__row p.price em{font-style:normal;font-size:15px;font-weight:600;color:var(--muted);
  font-family:var(--font);display:block;letter-spacing:0}
.board__row--add{background:var(--panel)}
.board__row--add p.price{font-size:22px}
.board__foot{padding:18px 26px;border-top:1px solid var(--line);background:var(--panel);
  font-size:15px;color:var(--muted)}
/* Every price carries its own way into the recommendation form, so a
   visitor who has already decided doesn't have to scroll back up to a
   CTA and re-answer what they just read. Sits in column 1 under the
   description; 44px min height keeps it a legal tap target. */
.board__go{grid-column:1;justify-self:start;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;margin-top:2px;font-size:15px;font-weight:600;color:var(--blue)}
.board__go:hover{text-decoration:underline;text-underline-offset:3px}
.board__go i{font-size:16px}
@media(max-width:540px){
  .board__row{grid-template-columns:1fr;padding:18px}
  .board__row p.price{grid-row:auto;grid-column:1;text-align:left}
  .board__row p.price em{display:inline}
}

/* ── care plan ────────────────────────────────────── */
/* Warm greys on ink (#CFC5B8 / #F0EAE1 / #A79C90) are kept: they are
   the site's dark-surface convention, shared with .final, .checkup,
   .consult and .footer, not leftovers. The tick was the actual
   one-off: #9CBF7E appeared exactly once in the whole stylesheet, a
   hue with no other home on the page. Full-strength white instead, so
   it reads as affirmative on brightness rather than by introducing a
   colour.

   The border goes too. At --line-strong against an ink fill it drew a
   light seam around a dark block, which .close, the other dark surface
   on the page, does not do. Radius matches .close as well: --r-card,
   since this is a content panel rather than an image. */
.care{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:24px;
  border-radius:var(--r-card);background:var(--ink);color:#fff;padding:clamp(24px,3vw,34px)}
@media(max-width:860px){.care{grid-template-columns:1fr;gap:20px}}
.care h3{color:#fff;font-size:24px}
.care p{color:#CFC5B8;font-size:16px}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:16px}
.checks li{display:flex;gap:11px;align-items:flex-start;color:#F0EAE1}
.checks i{color:#fff;font-size:18px;line-height:1.4}
/* spans both columns so the exclusions sit under the whole block, not
   beside the list where they read as another included item */
.care__note{grid-column:1/-1;margin-top:6px;padding-top:18px;font-size:15px;
  color:#A79C90;border-top:1px solid rgba(255,255,255,.14)}

/* ── steps ────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.steps{grid-template-columns:1fr}}
.step{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid var(--ink)}
.step__when{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.step p{font-size:15px;color:var(--muted)}

/* ── quotes ───────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{display:flex;flex-direction:column;gap:14px;background:#fff;
  border:1px solid var(--line);border-left:3px solid var(--blue);padding:24px}
.quote blockquote{margin:0;font-size:19px;line-height:1.5;color:var(--ink);font-weight:500}
.quote figcaption{font-size:15px;color:var(--muted)}
.quote figcaption b{color:var(--ink-soft);font-weight:600}
.quote--todo{border-left-color:var(--line-strong);border-style:dashed;border-left-style:solid}
.quote--todo blockquote{color:var(--muted);font-weight:400}
.tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--blue);background:var(--blue-wash);padding:4px 9px}

/* ── about ────────────────────────────────────────── */
.about{display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start}
@media(max-width:640px){.about{grid-template-columns:1fr;gap:22px}}
.about__photo{aspect-ratio:1;background:linear-gradient(155deg,#2A1B10,#7A6450);
  display:flex;align-items:flex-end;justify-content:center;padding:12px}
.about__photo span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.85)}

/* ── final cta ────────────────────────────────────── */
.final{background:var(--ink);color:#fff;padding:clamp(32px,5vw,52px);text-align:center}
.final h2{color:#fff}
.final p{color:#CFC5B8;max-width:52ch;margin:14px auto 0}

/* ── closing CTA: self-diagnosis ──────────────────── */
/* The list is the argument. Someone who mentally ticks two of these has
   convinced themselves, which no headline can do — so the markers are
   empty boxes, not checkmarks. These are problems, not features. */
/* --r-card, matching .care and the .close block it replaced: a dark
   content panel, not an image surface. This block predates the radius
   pass and was written when nothing on the page was rounded. */
.checkup{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-radius:var(--r-card);
  background:var(--ink);color:#fff;padding:clamp(28px,4.5vw,48px)}
@media(max-width:860px){.checkup{grid-template-columns:1fr;gap:28px}}
.checkup__pitch{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.checkup h2{color:#fff}
.checkup p{color:#CFC5B8;max-width:44ch}
.label--light{color:#E8A87C}
.checkup .btn{margin-top:8px}
.checkup__note{font-size:15px;color:#A0968C}
.gaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.gaps li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;font-size:16px;
  color:#F0EAE1;border-top:1px solid rgba(255,255,255,.14)}
.gaps li:first-child{border-top:0;padding-top:0}
.gaps li::before{content:"";flex:0 0 auto;width:15px;height:15px;margin-top:5px;
  border:1.5px solid rgba(255,255,255,.45)}

/* ── forms ────────────────────────────────────────── */
.form-card{background:#fff;border:1px solid var(--line-strong);padding:26px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form__row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600;color:var(--ink)}
.req{color:var(--danger)}
.input,.textarea,.select{font-family:var(--font);font-size:16px;color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);padding:12px 13px;width:100%}
.input:focus,.textarea:focus,.select:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.textarea{min-height:130px;resize:vertical}
.hint{font-size:14px;color:var(--muted)}
.honeypot{position:absolute;left:-9999px;opacity:0}
.form__success,.form__error{display:none;font-size:16px;padding:16px;border-radius:var(--r)}
.form__success{background:#E9F5EE;color:var(--ok);border:1px solid #BFE0CD}
.form__error{background:#FBEBEA;color:var(--danger);border:1px solid #F0C8C5}
[data-form-wrap].is-sent form{display:none}
[data-form-wrap].is-sent .form__success{display:block}
[data-form-wrap].has-error .form__error{display:block}

/* ── footer ───────────────────────────────────────── */
.footer{background:var(--ink);color:#CFC5B8;padding-block:48px 28px;margin-top:0}
.footer a{color:#E3DCD2}
.footer a:hover{color:#fff}
.footer .brand{color:#fff}
.footer .brand .bd{background:#fff}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:480px){.footer__grid{grid-template-columns:1fr}}
.footer__brand p{font-size:15px;margin-top:12px;max-width:36ch}
.footer__col{display:flex;flex-direction:column;gap:9px;font-size:15px}
.footer__label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#A0968C;margin:0 0 4px}
.footer__bottom{display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  border-top:1px solid #2E2820;margin-top:36px;padding-top:20px;font-size:14px}

/* ── page hero (interior pages) ───────────────────── */
.pagehero{padding-block:clamp(40px,5vw,64px) clamp(24px,3vw,36px);border-bottom:1px solid var(--line)}
.crumbs{font-size:14px;color:var(--muted);margin:0 0 14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}

/* ── language flags ───────────────────────────────── */
/* Data-URI SVG rather than emoji: Windows renders country-flag emoji as
   bare letter pairs ("US"), so an emoji flag shows up as text on desktop. */
.navlang{padding-left:30px;background-repeat:no-repeat;background-position:9px center;
  background-size:16px 11px}
.navlang--en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect width='18' height='12' fill='%23ffffff'/%3E%3Cg fill='%23B22234'%3E%3Crect width='18' height='1.72'/%3E%3Crect y='3.43' width='18' height='1.72'/%3E%3Crect y='6.86' width='18' height='1.72'/%3E%3Crect y='10.29' width='18' height='1.71'/%3E%3C/g%3E%3Crect width='8' height='6.86' fill='%233C3B6E'/%3E%3C/svg%3E")}
.navlang--es{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Crect width='18' height='12' fill='%23AA151B'/%3E%3Crect y='3' width='18' height='6' fill='%23F1BF00'/%3E%3C/svg%3E")}

/* ── brand mark ───────────────────────────────────── */
/* CSS mask, not <img>: the mark then takes its colour from the surrounding
   text, so the same single file renders dark in the nav and white in the
   footer without shipping two versions.

   The mask sits straight on the box again, now that there is no border
   to be clipped away by it. */
.brand{align-items:center}
.brand__mark{flex:0 0 auto;width:22px;height:23px;margin-right:9px;
  background-color:currentColor;
  -webkit-mask:url("/logo.svg?v=2") no-repeat center/contain;
  mask:url("/logo.svg?v=2") no-repeat center/contain}

/* ============================================================
   Landing v4 — conversion hero + supporting sections
   Added for the "What is your business missing?" rebuild.
   Extends v3; no token changes, so every existing page is
   untouched. Same rules as the rest of the system: squared
   corners, hairline structure, no shadows, no gradients on
   page chrome.
   ============================================================ */

/* ── interactive hero picker ───────────────────────────────
   Built on real radio inputs so it works with zero JS, gets
   native arrow-key navigation inside the group, and announces
   itself correctly. Panels swap on :checked, so no script can
   fail and leave the hero blank. */
.picker{margin-top:30px}
.picker__inputs input{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.picker__q{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:12px}

.picker__opts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
@media(max-width:860px){.picker__opts{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.picker__opts{grid-template-columns:1fr}}
.picker__opt{display:flex;align-items:center;gap:10px;background:#fff;cursor:pointer;
  padding:16px;font-size:15px;font-weight:600;color:var(--ink-soft);
  transition:background .15s ease,color .15s ease}
.picker__opt:hover{background:var(--blue-wash);color:var(--ink)}
/* Marker is a square that fills in, not a checkmark: it reads as "this is
   the one I picked" without borrowing task-list language. */
.picker__opt::before{content:"";flex:0 0 auto;width:14px;height:14px;
  border:1.5px solid var(--line-strong);
  transition:border-color .15s ease,background .15s ease}

#need-website:checked  ~ .picker__opts [for=need-website],
#need-ordering:checked ~ .picker__opts [for=need-ordering],
#need-booking:checked  ~ .picker__opts [for=need-booking],
#need-redesign:checked ~ .picker__opts [for=need-redesign]{background:var(--ink);color:#fff}
#need-website:checked  ~ .picker__opts [for=need-website]::before,
#need-ordering:checked ~ .picker__opts [for=need-ordering]::before,
#need-booking:checked  ~ .picker__opts [for=need-booking]::before,
#need-redesign:checked ~ .picker__opts [for=need-redesign]::before{
  background:var(--blue);border-color:var(--blue)}
/* Focus must show on the label, since the real input is visually hidden. */
#need-website:focus-visible  ~ .picker__opts [for=need-website],
#need-ordering:focus-visible ~ .picker__opts [for=need-ordering],
#need-booking:focus-visible  ~ .picker__opts [for=need-booking],
#need-redesign:focus-visible ~ .picker__opts [for=need-redesign]{
  outline:2px solid var(--blue);outline-offset:-2px}

/* Panels stack in one grid cell. min-height is the anti-CLS measure: the
   tallest copy sets the floor, so switching never moves the page. */
.picker__panels{border:1px solid var(--line);border-top:0;background:var(--panel);
  padding:26px;min-height:236px;display:grid}
@media(max-width:640px){.picker__panels{padding:20px;min-height:300px}}
.panel{grid-area:1/1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  visibility:hidden;opacity:0;transform:translateY(4px);
  transition:opacity .2s ease,transform .2s ease}
#need-website:checked  ~ .picker__panels .panel--website,
#need-ordering:checked ~ .picker__panels .panel--ordering,
#need-booking:checked  ~ .picker__panels .panel--booking,
#need-redesign:checked ~ .picker__panels .panel--redesign{
  visibility:visible;opacity:1;transform:none}
.panel h2{font-size:clamp(22px,2.8vw,29px)}
.panel p{max-width:52ch;color:var(--ink-soft)}
.panel .btn{margin-top:4px}
@media(prefers-reduced-motion:reduce){.panel{transition:none;transform:none}}

.hero__trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;
  font-size:15px;color:var(--muted)}
.hero__trust span{display:inline-flex;align-items:center;gap:8px}
.hero__trust span::before{content:"";width:4px;height:4px;background:var(--blue)}

/* ── examples strip ────────────────────────────────────────── */
.exs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:860px){.exs{grid-template-columns:1fr}}
.ex{background:#fff;display:flex;flex-direction:column;transition:background .15s ease}
.ex:hover{background:var(--blue-wash)}
.ex__art{aspect-ratio:16/10;display:flex;align-items:flex-end;padding:12px}
.ex__art span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.88);background:rgba(0,0,0,.32);padding:4px 8px}
.ex__body{display:flex;flex-direction:column;gap:7px;padding:20px}
.ex__body p{font-size:15px;color:var(--muted)}
.ex__go{margin-top:8px;font-size:15px;font-weight:600;color:var(--blue)}

/* ── solutions by business type ────────────────────────────── */
.sols{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:820px){.sols{grid-template-columns:1fr}}
.sol{background:#fff;padding:26px;display:flex;flex-direction:column;gap:11px}
.sol__kind{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue);margin:0}
.sol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sol li{display:flex;gap:10px;font-size:15px;color:var(--muted);align-items:flex-start}
.sol li::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:9px;
  background:var(--line-strong)}
.sol .btn{margin-top:auto;align-self:flex-start}

/* ── what every website includes ───────────────────────────── */
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
@media(max-width:820px){.incl{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.incl{grid-template-columns:1fr}}
.incl__item{background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px}
.incl__item i{color:var(--blue);font-size:20px}
.incl__item h3{font-size:16px}
.incl__item p{font-size:15px;color:var(--muted)}

/* ── before / after ────────────────────────────────────────── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.ba{grid-template-columns:1fr}}
.ba__card{border:1px solid var(--line);background:#fff;display:flex;flex-direction:column}
.ba__art{aspect-ratio:16/10;display:flex;align-items:flex-end;padding:12px}
.ba__art span{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);background:#fff;padding:4px 8px;border:1px solid var(--line)}
.ba__art--before{background:repeating-linear-gradient(45deg,#E6EAF0,#E6EAF0 10px,#DDE3EB 10px,#DDE3EB 20px)}
.ba__art--after{background:linear-gradient(155deg,#2A1B10,#B4501B)}
.ba__art--after span{background:rgba(0,0,0,.34);color:#fff;border-color:transparent}
.ba__body{padding:18px 20px;display:flex;flex-direction:column;gap:7px}
.ba__body p{font-size:15px;color:var(--muted)}

/* ── faq ───────────────────────────────────────────────────── */
.faq{border:1px solid var(--line-strong);background:#fff}
.faq details{border-top:1px solid var(--line)}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;list-style:none;padding:19px 24px;
  font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);
  letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font);font-size:20px;font-weight:400;
  color:var(--blue);flex:0 0 auto;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{background:var(--panel)}
.faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.faq__a{padding:0 24px 20px;font-size:16px;color:var(--ink-soft);max-width:70ch}

/* ── final consultation cta ────────────────────────────────── */
.consult{background:var(--ink);color:#fff;padding:clamp(30px,5vw,52px);text-align:center}
.consult h2{color:#fff}
.consult p{color:#CFC5B8;max-width:54ch;margin:14px auto 0}
.consult .cluster{justify-content:center;margin-top:24px}
.consult__note{font-size:15px;color:#A0968C;margin-top:16px}

/* ── contact-method toggle (inquiry form) ──────────────────── */
.choice{display:flex;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.choice label{flex:1;background:#fff;padding:11px 14px;font-size:15px;font-weight:600;
  color:var(--ink-soft);cursor:pointer;text-align:center}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice input:checked + label{background:var(--ink);color:#fff}
.choice input:focus-visible + label{outline:2px solid var(--blue);outline-offset:-2px}
[hidden]{display:none !important}

/* ── inquiry form additions ────────────────────────────────── */
/* A plain label for a group of radios, where <label for> would be wrong
   because the group has no single control to point at. */
.label-plain{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.field__err{margin:0;font-size:14px;color:var(--danger)}
.input[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--danger)}

/* ============================================================
   Editorial v5 — "structured freestyle"
   Warm neutral ground, terracotta accent, oversized display type,
   asymmetric compositions on a 12-column grid.

   The rule the whole layer follows: the grid is strict, the
   placement inside it is not. Elements break the column rhythm
   deliberately (negative margins, spans that do not divide
   evenly) but never leave the grid.
   ============================================================ */

:root{
  --grid:repeat(12,minmax(0,1fr));
  --gutter:24px;
  --amber:#E6863A;          /* large decorative fills only, fails text contrast */
  --r-btn:11px;
  --r-input:9px;
  --r-card:16px;
  --r-shot:22px;
  --container-wide:1360px;
}
.wrap--wide{width:min(var(--container-wide),100%);margin-inline:auto;padding-inline:48px}
@media(max-width:1024px){.wrap--wide{padding-inline:32px}}
@media(max-width:640px){.wrap--wide{padding-inline:20px}}

/* Roundness is mixed on purpose: controls are soft, editorial
   imagery is softer still, structural rules stay square. */
.btn{border-radius:var(--r-btn)}
.input,.textarea,.select{border-radius:var(--r-input)}

/* ── nav: compacts on scroll, never covers content ─────────── */
.nav{transition:box-shadow .2s ease,background .2s ease}
.nav__inner{transition:height .22s ease}
.nav.scrolled{box-shadow:0 1px 0 var(--line)}
.nav.scrolled .nav__inner{height:58px}
@media(prefers-reduced-motion:reduce){
  .nav,.nav__inner{transition:none}
}
.nav__cta{border-radius:var(--r-btn)}

/* ── editorial hero ────────────────────────────────────────── */
.ehero{padding-block:clamp(36px,5vw,64px) clamp(48px,7vw,96px);overflow:hidden}
.ehero__grid{display:grid;grid-template-columns:var(--grid);gap:var(--gutter);align-items:center}
/* Text stays compact (5 of 12) so the work carries the energy. */
.ehero__copy{grid-column:1/span 5;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.ehero__stage{grid-column:6/span 7;position:relative}
@media(max-width:1024px){
  .ehero__copy{grid-column:1/span 12}
  .ehero__stage{grid-column:1/span 12;margin-top:8px}
}
.ehero h1{font-size:clamp(40px,6.4vw,78px);line-height:.98;letter-spacing:-.035em}
.ehero__sub{font-size:clamp(17px,1.5vw,20px);color:var(--ink-soft);max-width:46ch}
.ehero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.ehero__meta{font-size:14px;color:var(--muted);margin-top:2px}

/* The stage: overlapping shots at deliberately different scales.
   Aspect ratios are fixed so nothing shifts while images load and
   no screenshot is ever stretched. */
.stage{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.shot{border-radius:var(--r-shot);overflow:hidden;background:var(--panel-2);
  border:1px solid var(--line);position:relative;display:flex;align-items:flex-end}
.shot__tag{position:absolute;left:12px;top:12px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.92);padding:5px 9px;border-radius:999px}
.shot__note{width:100%;padding:12px 14px;font-size:12px;font-weight:600;
  color:#fff;background:linear-gradient(to top,rgba(0,0,0,.62),transparent)}
.shot--lg{grid-column:1/span 4;aspect-ratio:16/10}
.shot--sm{grid-column:5/span 2;aspect-ratio:3/4}
.shot--wide{grid-column:2/span 5;aspect-ratio:16/9;margin-top:-26px;margin-left:14%}
.shot--phone{grid-column:1/span 2;aspect-ratio:9/16;margin-top:-64px;z-index:2;
  border-radius:26px;border-width:6px;border-color:var(--ink)}
@media(max-width:1024px){
  .shot--wide{margin-left:0;margin-top:0}
  .shot--phone{margin-top:0}
}
@media(max-width:640px){
  .stage{grid-template-columns:repeat(4,1fr);gap:10px}
  .shot--lg{grid-column:1/span 4}
  .shot--sm{grid-column:1/span 2;aspect-ratio:4/5}
  .shot--wide{grid-column:3/span 2;aspect-ratio:4/5}
  .shot--phone{grid-column:1/span 2;aspect-ratio:9/16;border-width:5px}
}
/* Placeholder fills. Labelled, warm, and clearly not photography. */
.ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:14px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft)}
.ph--food{background:linear-gradient(150deg,#EFE2D3,#D9B78E)}
.ph--beauty{background:linear-gradient(150deg,#F6EAE6,#DDBDB4)}
.ph--retail{background:linear-gradient(150deg,#EDEAE3,#C9BEB0)}
.ph--redesign{background:linear-gradient(150deg,#E8E4DC,#B7AC9C)}

/* Gentle reveal. Everything is visible by default and only animates
   when JS adds .reveal, so a script failure can never hide content. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ── section headers, editorial ────────────────────────────── */
.ehead{display:grid;grid-template-columns:var(--grid);gap:var(--gutter);
  align-items:end;margin-bottom:clamp(28px,3.5vw,44px)}
.ehead__title{grid-column:1/span 7}
.ehead__aside{grid-column:9/span 4;font-size:16px;color:var(--muted)}
@media(max-width:900px){
  .ehead__title,.ehead__aside{grid-column:1/span 12}
  .ehead__aside{margin-top:8px}
}
.ehead h2{font-size:clamp(30px,4.4vw,54px);line-height:1.02;letter-spacing:-.03em}

/* ── solution selector ─────────────────────────────────────── */
.sel{display:grid;grid-template-columns:var(--grid);gap:var(--gutter);align-items:start}
.sel__list{grid-column:1/span 5;display:flex;flex-direction:column;gap:10px}
.sel__panels{grid-column:7/span 6;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-card);padding:clamp(24px,3vw,36px);min-height:268px;display:grid}
@media(max-width:900px){
  .sel__list,.sel__panels{grid-column:1/span 12}
  .sel__panels{min-height:300px}
}
.sel__inputs input{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.sel__opt{display:flex;align-items:center;gap:14px;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r-btn);background:var(--paper);
  padding:17px 20px;font-family:var(--font-display);font-weight:700;font-size:clamp(17px,1.7vw,21px);
  letter-spacing:-.015em;color:var(--ink);
  transition:border-color .16s ease,background .16s ease,transform .16s ease}
.sel__opt:hover{border-color:var(--ink);transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.sel__opt{transition:none}.sel__opt:hover{transform:none}}
.sel__opt::before{content:"";flex:0 0 auto;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--line-strong);transition:border-color .16s,background .16s}
#sol-website:checked  ~ .sel__list [for=sol-website],
#sol-restaurant:checked ~ .sel__list [for=sol-restaurant],
#sol-booking:checked  ~ .sel__list [for=sol-booking],
#sol-store:checked ~ .sel__list [for=sol-store]{
  background:var(--ink);color:var(--paper);border-color:var(--ink)}
#sol-website:checked  ~ .sel__list [for=sol-website]::before,
#sol-restaurant:checked ~ .sel__list [for=sol-restaurant]::before,
#sol-booking:checked  ~ .sel__list [for=sol-booking]::before,
#sol-store:checked ~ .sel__list [for=sol-store]::before{
  background:var(--amber);border-color:var(--amber)}
#sol-website:focus-visible  ~ .sel__list [for=sol-website],
#sol-restaurant:focus-visible ~ .sel__list [for=sol-restaurant],
#sol-booking:focus-visible  ~ .sel__list [for=sol-booking],
#sol-store:focus-visible ~ .sel__list [for=sol-store]{
  outline:2px solid var(--blue);outline-offset:2px}
.spanel{grid-area:1/1;display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  visibility:hidden;opacity:0;transform:translateY(6px);
  transition:opacity .22s ease,transform .22s ease}
#sol-website:checked  ~ .sel__panels .spanel--website,
#sol-restaurant:checked ~ .sel__panels .spanel--restaurant,
#sol-booking:checked  ~ .sel__panels .spanel--booking,
#sol-store:checked ~ .sel__panels .spanel--store{
  visibility:visible;opacity:1;transform:none}
.spanel h3{font-size:clamp(23px,2.7vw,32px);line-height:1.08;letter-spacing:-.025em}
.spanel p{color:var(--ink-soft);max-width:44ch}
/* Who it's for, then the problem, then the price: the order a shop owner
   reads in. `who` sits above the heading as a qualifier, so someone who
   isn't the audience can skip the panel without reading it. */
.spanel__who{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0}
.spanel__price{font-family:var(--font-display);font-weight:700;font-size:19px;
  color:var(--ink);letter-spacing:-.015em;margin:0}
@media(prefers-reduced-motion:reduce){.spanel{transition:none;transform:none}}

/* ── featured work: staggered, mixed scale ─────────────────── */
.works{display:grid;grid-template-columns:var(--grid);gap:clamp(28px,4vw,56px) var(--gutter)}
.work{display:flex;flex-direction:column;gap:14px}
.work--a{grid-column:1/span 7}
.work--b{grid-column:9/span 4;margin-top:clamp(0px,6vw,88px)}
.work--c{grid-column:3/span 6;margin-top:-8px}
@media(max-width:900px){
  .work--a,.work--b,.work--c{grid-column:1/span 12;margin-top:0}
}
.work__shot{border-radius:var(--r-shot);overflow:hidden;border:1px solid var(--line);
  position:relative;background:var(--panel-2)}
.work--a .work__shot{aspect-ratio:16/10}
.work--b .work__shot{aspect-ratio:3/4}
.work--c .work__shot{aspect-ratio:16/9}
.work__meta{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:5px 11px;border:1px solid var(--line-strong);color:var(--muted)}
.chip--kind{background:var(--blue-wash);border-color:transparent;color:var(--blue-ink)}
.work h3{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.02em}
.work p{font-size:16px;color:var(--muted);max-width:52ch}
.work__go{font-size:15px;font-weight:700;color:var(--blue);display:inline-flex;gap:7px;align-items:center}
.work a.work__go:hover{color:var(--blue-ink)}

/* ── process ───────────────────────────────────────────────── */
/* Five across, not four: the handover step joined the sequence. At the
   middle breakpoint it goes to three so the fifth does not sit alone
   on a second row of two. */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter)}
@media(max-width:1100px){.flow{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}
.flow__step{display:flex;flex-direction:column;gap:9px;padding-top:18px;
  border-top:2px solid var(--ink)}
.flow__n{font-family:var(--font-display);font-size:clamp(34px,4vw,52px);line-height:1;
  color:var(--amber);letter-spacing:-.04em}
.flow__step h3{font-size:19px;letter-spacing:-.015em}
.flow__step p{font-size:15px;color:var(--muted)}

/* ── final cta ─────────────────────────────────────────────── */
.close{background:var(--ink);color:var(--paper);border-radius:var(--r-card);
  padding:clamp(34px,5.5vw,72px);display:grid;grid-template-columns:var(--grid);
  gap:var(--gutter);align-items:end}
.close__copy{grid-column:1/span 7}
.close__act{grid-column:9/span 4;display:flex;flex-direction:column;gap:12px;align-items:stretch}
@media(max-width:900px){
  .close__copy,.close__act{grid-column:1/span 12}
  .close__act{margin-top:22px}
}
.close h2{color:var(--paper);font-size:clamp(30px,4.4vw,54px);line-height:1.02;letter-spacing:-.03em}
.close p{color:#C6BCB0;max-width:46ch;margin-top:14px}
.close .btn--light{justify-content:center}
.close .btn--ghost{background:transparent;border-color:#4B4239;color:var(--paper);justify-content:center}
.close .btn--ghost:hover{border-color:var(--paper);background:rgba(255,255,255,.06)}

/* ── booking ───────────────────────────────────────────────── */
.book{display:grid;grid-template-columns:var(--grid);gap:var(--gutter);align-items:start}
.book__side{grid-column:1/span 4}
.book__main{grid-column:6/span 7}
@media(max-width:900px){.book__side,.book__main{grid-column:1/span 12}}
.mtype{border:1px solid var(--line-strong);border-radius:var(--r-card);padding:22px;background:var(--paper)}
.mtype h2{font-size:22px;letter-spacing:-.02em}
.mtype__dur{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;
  color:var(--blue);background:var(--blue-wash);border-radius:999px;padding:5px 12px;margin:10px 0}
.mtype p{font-size:15px;color:var(--muted)}
.tzline{font-size:14px;color:var(--muted);margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

.cal{border:1px solid var(--line-strong);border-radius:var(--r-card);padding:20px;background:var(--paper)}
.cal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.cal__month{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink)}
.cal__nav{display:flex;gap:6px}
.cal__nav button{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-strong);
  background:var(--paper);cursor:pointer;color:var(--ink);font-size:15px;line-height:1}
.cal__nav button:hover:not(:disabled){border-color:var(--ink)}
.cal__nav button:disabled{opacity:.4;cursor:default}
.cal__dow,.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal__dow span{text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);padding-bottom:6px}
.day{aspect-ratio:1;border-radius:9px;border:1px solid transparent;background:var(--panel);
  color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.day:hover:not(:disabled){border-color:var(--ink)}
.day:disabled{background:transparent;color:var(--faint);cursor:default;opacity:.55}
.day[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.day--none{background:transparent;border:0;cursor:default}

.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;margin-top:6px}
.slot{border-radius:9px;border:1px solid var(--line-strong);background:var(--paper);
  padding:11px 8px;font:inherit;font-size:15px;font-weight:600;color:var(--ink);cursor:pointer}
.slot:hover{border-color:var(--ink)}
.slot[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.book__empty{font-size:15px;color:var(--muted);padding:14px 0}

.book__step{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.book__step h3{font-size:17px;margin-bottom:14px}
.picked{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;
  color:var(--ink);background:var(--blue-wash);border-radius:999px;padding:8px 14px;margin-bottom:6px}

.book__done{display:none;text-align:center;padding:clamp(28px,5vw,52px);
  border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--paper)}
[data-book].is-done .book__done{display:block}
[data-book].is-done .book__flow{display:none}
.book__done h2{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.025em}
.book__done p{color:var(--ink-soft);max-width:46ch;margin:14px auto 0}
.tick-lg{width:52px;height:52px;border-radius:50%;background:var(--blue-wash);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px}

/* Booking is the one place a pending network call blocks the flow, so
   the button states are explicit rather than implied. */
.btn[aria-busy=true]{opacity:.72;pointer-events:none}
.notice{border-radius:var(--r-input);padding:14px 16px;font-size:15px;margin-top:16px}
.notice--warn{background:#FDF3E3;border:1px solid #E8C98C;color:#6B4A12}
.notice--err{background:#FBEBEA;border:1px solid #F0C8C5;color:var(--danger)}

/* ============================================================
   v6 — white ground, poster hero, sunset gradient
   Direction A. The headline is the hero.

   Gradient is an EVENT, not a system. It appears in exactly two
   rules on the entire site: the emphasised word in the H1, and
   the 46px bar under each section eyebrow. Buttons, chips and
   links are solid ink. (An earlier pass put the ramp on buttons
   too and it read as overload.)

   The display ramp only ever carries LARGE type, where the
   contrast floor is 3:1 rather than 4.5:1. Measured, not
   eyeballed: it starts at #F26207 (3.22 on white). #FF6A1F was
   the first choice and failed at 2.86.
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --panel:#F7F5F2;
  --panel-2:#EFEBE6;
  --line:#E7E1D9;
  --line-strong:#CFC6BA;
  --grad-display:linear-gradient(96deg,#F26207 0%,#E11D74 52%,#7C3AED 100%);
  --violet:#6D28D9;
  --magenta:#A21CAF;
}

/* ── poster hero ───────────────────────────────────────────── */
.poster{padding-block:clamp(30px,4.5vw,58px) clamp(30px,4vw,54px)}
/* Full width, not a column: the headline IS the composition. */
.poster h1{
  font-size:clamp(44px,10.4vw,148px);
  line-height:.9;letter-spacing:-.045em;margin:0;
  text-wrap:balance;max-width:none;
}
.poster h1 em{
  font-style:normal;
  background:var(--grad-display);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
/* Without background-clip:text the word would vanish entirely, so
   fall back to a solid fill rather than lose the headline. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .poster h1 em{color:var(--magenta);-webkit-text-fill-color:var(--magenta);background:none}
}
.poster__row{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:flex-end;
  justify-content:space-between;margin-top:clamp(22px,2.6vw,34px)}
.poster__sub{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);max-width:44ch;margin:0}
.poster__acts{display:flex;flex-wrap:wrap;gap:12px}
.poster__meta{font-size:14px;color:var(--muted);margin-top:14px}
/* The question CTA is long: let it wrap rather than overflow. */
.btn--ask{text-align:left;line-height:1.25}
@media(max-width:560px){
  .poster__acts{width:100%}
  .poster__acts .btn{width:100%;justify-content:center;text-align:center}
}

/* The 21:9 .band placeholder that used to sit here is gone: the hero
   now carries a real project (.feat, below) instead of a labelled
   empty frame. */

/* ── eyebrow rule: the only other gradient on the site ─────── */
.ehead__title .label,.poster .label{position:relative;padding-bottom:12px;display:inline-block}
.ehead__title .label::after,.poster .label::after{content:"";position:absolute;left:0;bottom:0;
  width:46px;height:3px;border-radius:2px;background:var(--grad-display)}

/* ── work tiers: real clients above concepts ───────────────── */
.wtier{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;display:flex;align-items:center;gap:12px}
.wtier::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.wtier--second{margin-top:clamp(38px,5vw,64px)}
.chip--live{background:var(--ink);border-color:var(--ink);color:#fff}
.chip--soon{border-style:dashed}
.ph--jewel{background:linear-gradient(150deg,#F6E7DA,#D8B7C9)}
.ph--jewel2{background:linear-gradient(150deg,#F3E3E8,#CDB2D4)}
.ph--bkrdy{background:linear-gradient(150deg,#EDE4F7,#C9B2E8)}
/* Work links go solid ink; the gradient stays reserved. */
.work__go{color:var(--ink)}
.work a.work__go:hover{color:var(--magenta)}
/* The solution selector's active state already resolves to ink on
   --paper in its own rule above, and --paper is now white, so it
   needs nothing here. */

/* ── accent + primary button, aligned to the new ramp ──────── */
/* The primary button was the old amber #B4501B. As a large solid
   block it competed with the one gradient word, which is the whole
   point of the direction. Ink instead: the gradient reads as the
   only colour event on the page.

   --blue keeps its accent role (links, focus rings, eyebrow icons)
   but moves to the darkened first stop of the display ramp, so the
   accent and the gradient are the same family instead of two
   unrelated oranges. 5.18:1 on white, so it clears 4.5:1 for the
   body-size links it carries.

   The button fill itself is set on the base .btn rule above, not
   appended here: .btn--quiet and .btn--light are single-class
   modifiers, so a later .btn rule ties them on specificity and wins
   on source order, painting ink on ink and erasing their labels. */
:root{--blue:#C2410C;--blue-ink:#9A3412}

/* ── contrast repair on the white ground ───────────────────── */
/* Pre-existing, surfaced by the move off cream. --muted was 4.26
   against --blue-wash (the pill/callout tint), just under the 4.5
   floor for body text; #6F675F clears it at 4.94 and is 5.55 on
   plain white, a change small enough that nothing else shifts.

   --faint stays light on purpose: its only remaining job is
   .day:disabled, and WCAG exempts inactive controls. The booking
   calendar's weekday header row was borrowing it for real text at
   11px (2.90:1), so that row moves to --muted. */
:root{--muted:#6F675F}
.cal__dow span{color:var(--muted)}

/* ── featured project in the hero ──────────────────────────── */
/* Replaces the placeholder band. Copy column left, client's store
   hero right. The image is the only photograph on the page, so it
   carries the whole "this is real work" burden: it gets the wider
   column and the eager fetch. */
/* The block is itself a card. Padding has to clear the inner frame's
   22px radius or the two curves sit almost on top of each other and
   read as a printing error rather than as nesting. */
.feat{margin-top:clamp(26px,3.4vw,44px);display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,44px);align-items:center;
  border:1px solid var(--line);border-radius:var(--r-shot);
  padding:clamp(24px,3vw,40px)}
.feat__copy{grid-column:1/span 5;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
/* No border of its own: the card around it already carries one, and a
   second hairline 40px inside the first read as a box in a box. The
   radius and the clip stay so an image that runs to its own edges
   still gets rounded corners here. */
.feat__shot{grid-column:6/span 7;border-radius:var(--r-shot);overflow:hidden}
.feat__shot img{width:100%;height:auto;display:block}

/* The mark ships with its own generous transparent margin, so the box
   is set larger than the mark reads. Height is capped rather than set
   so a future logo of a different ratio cannot blow out the row. */
.feat__logo{width:auto;height:clamp(88px,9vw,120px);max-width:100%;object-fit:contain;
  object-position:left center}
.feat__tags{display:flex;flex-wrap:wrap;gap:7px}
.feat__h{font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:-.03em;
  text-wrap:balance;max-width:20ch}
.feat__d{font-size:16px;color:var(--muted);max-width:46ch;margin:0}
.feat__go{font-size:15px;font-weight:700;color:var(--ink);
  display:inline-flex;gap:7px;align-items:center}
.feat__go:hover{color:var(--magenta)}
.feat__go i{transition:transform .16s ease}
.feat__go:hover i{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.feat__go i{transition:none}.feat__go:hover i{transform:none}}

@media(max-width:900px){
  /* Stack, and lead with the work: on a phone the picture earns the
     scroll that the copy then explains. */
  /* The wrap already insets 20px at this width; a full-size card
     padding on top of it would squeeze the mockup to nothing. */
  .feat{grid-template-columns:1fr;gap:20px;padding:18px}
  .feat__copy,.feat__shot{grid-column:1}
  .feat__shot{order:-1}
  .feat__h{max-width:none}
}

/* ── what a website does (the answer under the hero) ───────── */
/* Two by two, not four across: each item carries a full sentence, and
   at four columns they turn into narrow ragged strips. Deliberately
   not reusing .steps, which means a sequence; these four are parallel
   and reading them as an order would be wrong. */
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,34px) clamp(28px,4vw,52px)}
@media(max-width:760px){.jobs{grid-template-columns:1fr}}
.job{display:flex;flex-direction:column;gap:8px;padding-top:16px;
  border-top:1px solid var(--line-strong)}
.job h3{font-size:19px;letter-spacing:-.015em}
.job p{font-size:16px;color:var(--muted);max-width:46ch}
/* Reads as a caption handing off to the selector, so it sits quieter
   than the items above it. */
.jobs__hand{margin-top:clamp(24px,3vw,34px);font-size:16px;color:var(--muted)}

/* Email and Instagram under the footer blurb. Underlined because they
   sit in a paragraph rather than a link column, where nothing else
   signals they are clickable. */
.footer__meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:15px}
.footer__meta a{text-decoration:underline;text-underline-offset:3px}

/* ── footer, brought onto the page's own language ──────────── */
/* The section eyebrows carry a 46px gradient bar; the footer labels
   were the only eyebrows on the site without one, which is most of why
   the footer read as a different piece of furniture. Same rule, sized
   down, because the footer labels are smaller than section eyebrows. */
.footer__label{position:relative;padding-bottom:10px;display:inline-block}
.footer__label::after{content:"";position:absolute;left:0;bottom:0;
  width:34px;height:3px;border-radius:2px;background:var(--grad-display)}
/* Display face on the sign-off line, matching every other place the
   brand name is set. */
.footer__brand .brand{font-size:23px}

/* Laila's shot is 16:9, not the 16:10 the first work slot uses. The
   frame follows the asset rather than the asset getting cropped: at
   16:10 a cover fit would take 5% off each side, which clips the phone
   on the right edge of the mockup. */
/* Scoped through .work--a: the base .work--a .work__shot rule is two
   classes, so a single-class modifier loses to it regardless of order. */
.work--a .work__shot--wide{aspect-ratio:16/9}
/* Real images now fill three of the six slots; the gradient .ph blocks
   still cover the concept tier. */
.work__shot img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   Maintenance page + the mobile-first pass
   Mobile is the default here and desktop is the override, since
   most traffic arrives from phone ads and the portfolio gets shown
   off a phone in person.
   ============================================================ */

/* A page hero is the poster hero at a calmer scale: these pages open
   with a subject, not with the whole brand argument. */
.poster--page h1{font-size:clamp(36px,8.2vw,84px)}
.poster--page{padding-block:clamp(26px,4vw,48px) clamp(24px,3vw,38px)}

/* ── plans ─────────────────────────────────────────────────── */
/* Stacked by default. Each plan is one self-contained block with the
   name and price first, because on a phone that is the only thing
   most people are actually comparing. */
.plans{display:grid;grid-template-columns:1fr;gap:18px}
.plan{border:1px solid var(--line-strong);border-radius:var(--r-card);
  padding:clamp(22px,5vw,30px);background:#fff;display:flex;flex-direction:column}
.plan--feat{border-color:var(--ink);border-width:2px}
.plan__flag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 10px;margin-bottom:14px}
.plan__name{font-family:var(--font-display);font-size:13px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.plan__price{font-family:var(--font-display);font-size:clamp(40px,10vw,52px);font-weight:700;
  line-height:1;letter-spacing:-.03em;color:var(--ink);margin:0 0 12px}
.plan__price span{font-family:var(--font);font-size:16px;font-weight:600;
  letter-spacing:0;color:var(--muted)}
.plan__who{font-size:16px;color:var(--ink-soft);margin:0 0 18px}
.plan__from{font-size:14px;font-weight:700;color:var(--ink);margin:20px 0 10px}
.plan__list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan__list li{position:relative;padding-left:22px;font-size:15px;color:var(--ink-soft)}
/* A rule, not a tick: these are contents, and a tick would imply the
   other plans fail at them. */
.plan__list li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;
  background:var(--line-strong)}
.plan__note{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.plans__foot{margin-top:20px;font-size:14px;color:var(--muted);max-width:70ch}
@media(min-width:900px){
  .plans{grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
  .plan{height:100%}
}

/* ── plain tick list ───────────────────────────────────────── */
.seo__lead{margin-top:clamp(28px,4vw,40px);font-weight:700;color:var(--ink)}
.ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.ticks li{position:relative;padding-left:26px;font-size:16px;color:var(--ink-soft)}
.ticks li::before{content:"";position:absolute;left:0;top:11px;width:14px;height:1px;background:var(--blue)}
@media(min-width:760px){.ticks{grid-template-columns:1fr 1fr;gap:10px 34px}}
.seo__caveat{margin-top:clamp(24px,3vw,32px);padding-top:18px;border-top:1px solid var(--line-strong);
  font-size:15px;color:var(--muted);max-width:74ch}
.seo__caveat b{color:var(--ink)}

/* ── the work grid ─────────────────────────────────────────── */
/* Hairline-separated rows rather than fifteen little cards: a card
   each would be a wall of boxes on a phone. */
.grid-list{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line)}
.grid-list span{padding:14px 2px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-soft)}
@media(min-width:700px){
  .grid-list{grid-template-columns:1fr 1fr;column-gap:34px}
}
@media(min-width:1024px){.grid-list{grid-template-columns:repeat(3,1fr)}}

/* ── faq ───────────────────────────────────────────────────── */
.qa{border-top:1px solid var(--line-strong)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);
  letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:22px;
  font-weight:400;color:var(--muted);line-height:1}
.qa details[open] summary::after{content:"–"}
.qa summary:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.qa p{padding:0 0 20px;font-size:16px;color:var(--ink-soft);max-width:70ch}

/* ── Selected Work on a phone ──────────────────────────────── */
/* Below 900px the grid stacks, and stacked cards ran together: image,
   chips, title, text, then immediately the next image with nothing
   between them. Each project becomes a self-contained entry with real
   air and a hairline closing it out, so scrolling past one reads as
   finishing it rather than losing your place. */
@media(max-width:900px){
  .works{gap:0}
  .work{padding-bottom:clamp(30px,7vw,44px);margin-bottom:clamp(30px,7vw,44px);
    border-bottom:1px solid var(--line-strong)}
  .work:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
  /* Images stay big. A phone is where the mockups get inspected, so the
     portrait slot in particular should not be shrunk to fit. */
  .work--b .work__shot{aspect-ratio:4/5}
  .work__go{margin-top:4px}
  /* Anything that acts as a button goes full width and comfortably
     tappable rather than a small inline target. */
  .work .btn{width:100%;justify-content:center}
}

/* ── mobile tap targets and rhythm ─────────────────────────── */
@media(max-width:900px){
  /* 44px is the floor for anything you are meant to hit with a thumb.
     The drawer links, the language switch and the nav CTA were all
     under it. */
  .nav__menu>a:not(.btn){min-height:48px;display:flex;align-items:center}
  .nav__menu>a.navlang:not(.btn){min-height:44px;box-sizing:border-box}
  .nav__menu .btn{min-height:48px}
  .btn{min-height:48px}
  .footer__col a{padding:9px 0;min-height:40px;display:flex;align-items:center}
  .footer__meta a{min-height:40px;display:inline-flex;align-items:center}
  /* Section headings were sized for a desktop column and ran long at
     320px; this keeps them assertive without eating the screen. */
  .ehead{margin-bottom:26px}
  .ehead h2{font-size:clamp(26px,7.4vw,36px)}
  .ehead__aside{font-size:16px}
}
@media(max-width:420px){
  /* 320px is the real floor. Nothing here changes above it. */
  .poster h1{font-size:clamp(34px,10.6vw,46px)}
  .plan__price{font-size:clamp(36px,11vw,44px)}
  .qa summary{font-size:16px}
}

/* Two actions in the closing block: the call for people ready to talk
   properly, WhatsApp for the ones who will only ever send a message.
   Stacked and full width on a phone, since that is where the WhatsApp
   one actually gets used. */
.checkup__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.checkup__acts .btn{flex:1 1 auto;justify-content:center}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
@media(max-width:560px){.checkup__acts{flex-direction:column}.checkup__acts .btn{width:100%}}

/* ── tap targets ──────────────────────────────────── */
/* Audited at 320px: the drawer toggle was 36px and several inline links
   sat between 19px and 41px. Anything tappable gets 44px of height,
   which is the smallest reliable target on a phone held one-handed. */
.nav__toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.brand{min-height:44px}
.work__go,.feat__go,.board__go,
.footer__meta a,.footer__col a,
.checkup__note a{display:inline-flex;align-items:center;min-height:44px}
.spanel__more{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-size:15px;font-weight:600;color:var(--blue)}
.spanel__more:hover{text-decoration:underline;text-underline-offset:3px}

/* ── job cards that link out ──────────────────────────── */
/* .job is a plain text block on the homepage. On /industries/ and
   /contact/ it also carries a price and a destination, so those two
   pieces get their own rules rather than a second card component. */
.job__price{font-family:var(--font-display);font-weight:700;font-size:17px;
  color:var(--ink);letter-spacing:-.015em;margin-top:2px}
.job__go{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  font-size:15px;font-weight:600;color:var(--blue)}
.job__go:hover{text-decoration:underline;text-underline-offset:3px}

/* A quiet aside under the contact form, pointing service enquiries at
   the recommendation flow without turning the page into a second CTA. */
.nudge{margin-top:28px;padding:22px 24px;border:1px solid var(--line-strong);
  border-radius:var(--r-card);background:var(--paper)}
.nudge h3{font-size:19px;letter-spacing:-.015em;margin-bottom:6px}
.nudge p{color:var(--muted);font-size:16px;max-width:52ch;margin-bottom:4px}

/* ── quote form progress ──────────────────────────────── */
/* Six questions on one screen do not need a stepper. This answers the
   only question a progress element has to answer on a short form: how
   much is left. It counts visible required fields, so the hidden
   contact field never reads as an unanswered question. */
.prog{max-width:720px;margin:0 auto 18px}
.prog__bar{height:6px;border-radius:999px;background:var(--panel-2);overflow:hidden}
.prog__bar span{display:block;height:100%;width:0;border-radius:999px;background:var(--ink);
  transition:width .25s ease}
@media(prefers-reduced-motion:reduce){.prog__bar span{transition:none}}
.prog__text{margin-top:8px;font-size:14px;color:var(--muted)}

/* Success state: the next thing to do, not a dead end. */
.form__next{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}

/* Attribution line under a client quote: where it came from, and that
   it was translated. Small, because the quote is the thing. */
.quote__src{font-size:13px;color:var(--faint)}

/* ── skip link ────────────────────────────────────────── */
/* Off-screen until focused, then the first thing a keyboard user sees.
   Not display:none, which would take it out of the tab order entirely
   and defeat the point. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:0 0 var(--r-btn) 0;
  font-size:15px;font-weight:600}
.skip:focus{left:0}

/* Curly quotes on client reviews. Set explicitly rather than leaving it
   to the browser's per-language default, which would render « » on the
   Spanish page and “ ” on the English one for the same two quotes. */
.quote blockquote{quotes:"\201C" "\201D"}
.quote blockquote::before{content:open-quote}
.quote blockquote::after{content:close-quote}

/* A portrait shot in the wide work--a slot. Scoped through .work--a so it
   beats the base 16/10 rule, and width-capped so a phone mockup does not
   run the full seven columns and tower over the copy beside it. */
.work--a .work__shot--tall{aspect-ratio:3/4;max-width:420px}