/* Shared page CSS for every designed page. Installed to design-system/base.css by
   build_design_guide.py, and never overwritten after that — edit the client's copy
   for their art direction.

   NOTHING IN HERE IS PER-CLIENT. Colours, type and spacing are tokens, and the
   @font-face rules live in tokens.css beside the families they name.

   TWO KINDS OF RULE, AND THEY DO NOT OVERLAP (2026-09-22)

     [data-layout="<pattern>"]   THE COMPOSITION. How the block is laid out: the
                                 columns, the flow, the fill. The count comes from
                                 data-cols (2/3/4) and the media side from
                                 data-media="left". One rule per pattern, and any
                                 job can take any pattern.

     [data-section="<job>"]      THE CONTENT-SPECIFIC ELEMENTS. The numbered
                                 counters on a process, the disclosure marker on an
                                 FAQ, the fields of a contact form, the rating line
                                 over reviews, the price in a pricing card, the
                                 label-and-value pairs of project facts. These say
                                 nothing about where the block sits on the page.

   Before this split the two were one selector, so one name carried both "this is
   a hero" and "this is two columns" — and a client who wanted a centred hero
   needed a different section name, which changed the copy slot, the comment
   anchor and the build sheet along with it. Splitting them is what lets one copy
   be laid out two ways.

   THE REPEATING UNIT IS ALWAYS A LIST. Every pattern that repeats something lays
   out the slot's own <ul> or <ol>; the renderer produces one, whether from
   markdown bullets or from a row shape. A pattern that needed its own bespoke
   wrapper would need the copy to know which pattern it was going into, and the
   copy is written before that is decided.

   A `-2` REPEAT TAKES THE SAME RULES. `data-section="text-2"` is a second text
   block, so every job selector below also matches its suffixed forms.

   NEVER RESTATE A VALUE. Every number here is a token from tokens.css. */

/* ── base ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);font-size:var(--fs-md);line-height:1.6;color:var(--ink);
  background:var(--ground);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s4)}
h1,h2,h3{font-family:var(--display);line-height:1.15;color:var(--ink)}
h1{font-size:var(--fs-h1);font-weight:700;letter-spacing:-.015em}
h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.01em}
h3{font-size:var(--fs-h3);font-weight:700}
p{margin-bottom:var(--s3)}
p:last-child{margin-bottom:0}
a{color:var(--brand-ink)}
strong{font-weight:700}

/* The copy's two labelled pieces (copy practice 59), as render_pages.py writes them.
   Grey and plain on purpose: the design phase restyles them per client. */
.eyebrow{font-family:var(--display);font-size:var(--fs-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:var(--s2)}
.subheading{font-size:var(--fs-lg);color:var(--muted);margin-bottom:var(--s4)}

/* Keyboard focus has to be visible on every interactive thing, including the ones
   a mouse user never sees. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--brand-ink);outline-offset:2px;border-radius:var(--r-sm)}

/* ── chrome: header ───────────────────────────────────────────────────────── */
/* Persistent. Booking is visible at desktop and one tap away at mobile, where it is
   the last item in the menu — the arrangement the design guide demonstrates and the
   client approved. Three controls plus a business name do not fit on a 375px row. */
.hd{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  min-height:64px}
.logo{font-family:var(--display);font-weight:700;font-size:var(--fs-lg);color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:var(--s2)}
.logo .m{width:26px;height:26px;border-radius:var(--r-sm);background:var(--brand-gradient);flex:none}
.nav{display:flex;gap:var(--s4);align-items:center}
.nav a{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--ink);
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.nav a:hover{color:var(--brand-ink)}
.nav a[aria-current="page"]{color:var(--brand-ink);text-decoration:underline;
  text-underline-offset:6px;text-decoration-thickness:2px}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 var(--s4);border-radius:var(--r);font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
/* A brand whose signature is a gradient fills its buttons with it. --brand-gradient
   is only defined for clients who have one, so the var() fallback is what every
   other client gets -- one rule, no per-client fork. The flat --brand still backs
   the hover, the focus ring and every contrast measurement. */
.btn--primary{background:var(--brand-gradient);background:var(--brand-gradient);
  color:var(--on-brand)}
.btn--primary:hover{background:linear-gradient(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--ink) 14%,transparent)),var(--brand-gradient);
  background:linear-gradient(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--ink) 14%,transparent)),var(--brand-gradient)}
.btn--primary:active{transform:translateY(1px)}
.btn--quiet{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* The mobile menu. The design guide specifies it; before this the nav was simply
   display:none below 820px, which left a phone with no navigation at all. */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:none;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
  color:var(--ink);flex:none}
.burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round}
.burger .x{display:none}
.burger[aria-expanded="true"] .x{display:block}
.burger[aria-expanded="true"] .bars{display:none}
.menu{display:none;border-top:1px solid var(--line);background:var(--surface);
  padding:var(--s3) 0 var(--s4)}
.menu[data-open="true"]{display:block}
.menu .wrap{display:flex;flex-direction:column;gap:var(--s1)}
.menu a{font-family:var(--display);font-weight:600;font-size:var(--fs-md);color:var(--ink);
  text-decoration:none;display:flex;align-items:center;min-height:48px;
  border-bottom:1px solid var(--line)}
.menu a[aria-current="page"]{color:var(--brand-ink)}
.menu .btn{margin-top:var(--s3);border-bottom:0}
@media(max-width:820px){
  .nav{display:none}
  .burger{display:inline-flex}
  .hd-cta{display:none}
}

/* ── chrome: footer ───────────────────────────────────────────────────────── */
.ft{background:var(--ink);color:var(--ground);padding:var(--s7) 0 var(--s5)}
.ft .wrap{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s5)}
.ft p{font-size:var(--fs-sm);color:var(--line)}
.ft a{color:var(--brand-on-ink);text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:3px}
.ft h3{color:var(--ground);font-size:var(--fs-sm);text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:var(--s3)}
.ft ul{list-style:none}
.ft li{margin-bottom:var(--s2);font-size:var(--fs-sm)}
.ft li a{display:inline-flex;align-items:center;min-height:26px}
.ft .fine{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.14);padding-top:var(--s4);
  margin-top:var(--s3);font-size:var(--fs-sm);color:var(--line);opacity:.85}
@media(max-width:820px){.ft .wrap{grid-template-columns:1fr}}
/* ── forms ────────────────────────────────────────────────────────────────── */
/* Label above the input, always — the design rules say so, and a placeholder that
   disappears when you start typing is not a label. */
.field{margin-bottom:var(--s4)}
.field label{display:block;font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--ink);margin-bottom:var(--s2)}
.field input,.field textarea,.field select{width:100%;font-family:var(--body);
  font-size:var(--fs-md);color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);min-height:48px}
.field textarea{min-height:140px;resize:vertical}
.field .hint{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s2)}
.field [data-error]{display:block;font-size:var(--fs-sm);color:var(--error);
  margin-top:var(--s2);font-weight:600}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
.form-success{background:var(--surface);border:1px solid var(--success);border-radius:var(--r);
  padding:var(--s5)}
.form-success h3{color:var(--success);font-size:var(--fs-h4);margin-bottom:var(--s2)}
.form-note{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--s3)}

/* ═══ COMPOSITION — one rule per pattern ══════════════════════════════════════
   Everything below is about where things sit. Nothing below knows what job the
   section is doing. */

/* Every section gets vertical room; the patterns that set their own override it. */
section[data-layout]{padding:var(--s8) 0}
section[data-layout] .lede{font-size:var(--fs-lg);color:var(--muted);margin:var(--s4) 0 var(--s5)}
section[data-layout] .cta{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}
/* Nothing has been photographed yet: say so rather than shipping a grey rectangle
   nobody explains. */
.ph{width:100%;aspect-ratio:4/3;border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:var(--fs-sm);text-align:center;padding:var(--s4)}

/* ── split ────────────────────────────────────────────────────────────────────
   Two columns: text one side, ONE media item or a form the other. `media left`
   moves the media column; the default is right. */
[data-layout="split"] .wrap{display:grid;grid-template-columns:1.05fr .95fr;
  gap:var(--s7);align-items:center}
[data-layout="split"] .media img{width:100%;border-radius:var(--r);display:block;
  box-shadow:var(--shadow-2)}
[data-layout="split"][data-media="left"] .media{order:-1}
@media(max-width:820px){
  [data-layout="split"] .wrap{grid-template-columns:1fr;gap:var(--s5)}
  [data-layout="split"][data-media="left"] .media{order:0}
}

/* ── stacked ──────────────────────────────────────────────────────────────────
   One centred column, short. Used when the message itself is the design. */
[data-layout="stacked"] .wrap{max-width:62ch;text-align:center}
[data-layout="stacked"] .cta{justify-content:center}

/* ── prose ────────────────────────────────────────────────────────────────────
   One readable column, long. 65 to 75 characters; wider stops being readable. */
[data-layout="prose"] .wrap{max-width:72ch}
[data-layout="prose"] h2{margin-bottom:var(--s4)}
[data-layout="prose"] h2.sub{margin:var(--s5) 0 var(--s2);font-size:var(--fs-h3)}
/* The section's own heading opens the block whether or not a page title sits above
   it. Keyed on :first-child alone, a legal page (where the template supplies the
   <h1>) measured 32px where a service page measured 0, and the drift check read
   one build as two. */
[data-layout="prose"] h2.sub:first-child,
[data-layout="prose"] h1 + h2.sub{margin-top:0}
[data-layout="prose"] ul{margin:0 0 var(--s3) var(--s4)}
[data-layout="prose"] li{margin-bottom:var(--s2)}

/* ── overlay ──────────────────────────────────────────────────────────────────
   Text on a photograph, behind a scrim. The design rules require the scrim, and
   check_accessibility reports text over imagery as unmeasurable rather than
   passing it. */
[data-layout="overlay"]{position:relative;background:var(--ink);
  background-size:cover;background-position:center;padding:0}
[data-layout="overlay"]::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.68))}
[data-layout="overlay"] .wrap{position:relative;padding-top:var(--s8);
  padding-bottom:var(--s8);max-width:64ch}
[data-layout="overlay"] h1,[data-layout="overlay"] h2{color:var(--surface)}
[data-layout="overlay"] p{color:var(--surface)}
[data-layout="overlay"] .lede{color:var(--surface);opacity:.94;max-width:46ch}
[data-layout="overlay"] .ph-note{position:relative;font-size:var(--fs-sm);
  color:var(--surface);opacity:.8;margin-top:var(--s5)}

/* ── band ─────────────────────────────────────────────────────────────────────
   Full-bleed fill, contained centred content, one thing inside it. */
[data-layout="band"]{background:var(--brand-gradient)}
[data-layout="band"] .wrap{text-align:center;max-width:64ch}
[data-layout="band"] h2,[data-layout="band"] h3{color:var(--on-brand)}
[data-layout="band"] p{color:var(--on-brand);opacity:.92}
[data-layout="band"] .cta{justify-content:center}
[data-layout="band"] .btn{background:var(--on-brand);color:var(--brand-ink)}
[data-layout="band"] .btn:hover{background:var(--surface)}
[data-layout="band"] a.button{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--s4);border-radius:var(--r);font-family:var(--display);
  font-weight:600;font-size:var(--fs-sm);text-decoration:none;
  background:var(--on-brand);color:var(--brand-ink);margin-top:var(--s5)}
[data-layout="band"] blockquote{font-family:var(--display);font-size:var(--fs-h3);
  line-height:1.35;color:var(--on-brand)}
[data-layout="band"] cite{font-style:normal;font-size:var(--fs-sm);color:var(--on-brand);
  opacity:.85;display:block;margin-top:var(--s4)}

/* ── grid ─────────────────────────────────────────────────────────────────────
   Repeating cells, all the same shape. THE COUNT IS A SWITCH, not a new pattern:
   a four-service business gets `layout: grid, 4 across` and nothing else changes. */
[data-layout="grid"] :is(ul,ol){list-style:none;margin:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--s4);align-items:stretch}
[data-layout="grid"][data-cols="2"] :is(ul,ol){grid-template-columns:repeat(2,1fr)}
[data-layout="grid"][data-cols="4"] :is(ul,ol){grid-template-columns:repeat(4,1fr)}
[data-layout="grid"] li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;
  font-size:var(--fs-sm);color:var(--muted)}
[data-layout="grid"] li strong{font-family:var(--display);font-size:var(--fs-h4);
  color:var(--ink);display:block;margin-bottom:var(--s2)}
/* NOT margin-top:auto. It resolves to whatever room the cell has left, so the same
   card measured 0 on one page and 34.5px on another and the drift check called it
   a difference in the build. It is also the one thing a developer cannot type into
   an Elementor margin field. */
[data-layout="grid"] li a{margin-top:var(--s3);font-family:var(--display);
  font-weight:600;font-size:var(--fs-sm);color:var(--brand-ink);text-decoration:none;
  display:inline-flex;align-items:center;min-height:26px}
[data-layout="grid"] li a:hover{text-decoration:underline;text-underline-offset:3px}
[data-layout="grid"] h2{margin-bottom:var(--s5);max-width:28ch}
/* THE COLLAPSE HAS TO OUT-SPECIFY THE SWITCH. `[data-layout][data-cols]` is two
   attribute selectors and beats a one-attribute rule whatever media query it is
   inside, so a `grid, 2 across` stayed two across at 375 and painted 19px past
   the viewport. The count switches are repeated here for that reason. */
@media(max-width:820px){
  [data-layout="grid"] :is(ul,ol),
  [data-layout="grid"][data-cols="2"] :is(ul,ol),
  [data-layout="grid"][data-cols="3"] :is(ul,ol),
  [data-layout="grid"][data-cols="4"] :is(ul,ol){grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  [data-layout="grid"] :is(ul,ol),
  [data-layout="grid"][data-cols="2"] :is(ul,ol),
  [data-layout="grid"][data-cols="3"] :is(ul,ol),
  [data-layout="grid"][data-cols="4"] :is(ul,ol){grid-template-columns:1fr}
}

/* ── chips ────────────────────────────────────────────────────────────────────
   Wrapping pills, name only. The fix for any list of names over five items. */
[data-layout="chips"] h2{margin-bottom:var(--s5)}
[data-layout="chips"] ul{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:var(--s2)}
[data-layout="chips"] li a,[data-layout="chips"] li{display:inline-flex;align-items:center;
  min-height:44px;padding:0 var(--s4);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;font-family:var(--display);font-weight:600;font-size:var(--fs-sm);
  color:var(--ink);text-decoration:none;
  transition:border-color var(--fast) var(--ease),color var(--fast) var(--ease)}
[data-layout="chips"] li{padding:0}
[data-layout="chips"] li a:hover{border-color:var(--brand-ink);color:var(--brand-ink)}

/* ── columns ──────────────────────────────────────────────────────────────────
   Plain names in text columns. Thirteen to forty of them; a handful that each
   earn a card is a grid. */
[data-layout="columns"] h2{margin-bottom:var(--s5)}
[data-layout="columns"] ul{list-style:none;margin:0;columns:4;column-gap:var(--s5)}
[data-layout="columns"][data-cols="2"] ul{columns:2}
[data-layout="columns"][data-cols="3"] ul{columns:3}
[data-layout="columns"] li{margin-bottom:var(--s2);break-inside:avoid;font-size:var(--fs-sm)}
[data-layout="columns"] li a{color:var(--ink);text-decoration:none}
[data-layout="columns"] li a:hover{text-decoration:underline;text-underline-offset:3px}
[data-layout="columns"] p{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--s5)}
@media(max-width:820px){
  [data-layout="columns"] ul,
  [data-layout="columns"][data-cols="2"] ul,
  [data-layout="columns"][data-cols="3"] ul,
  [data-layout="columns"][data-cols="4"] ul{columns:2}
}
@media(max-width:480px){
  [data-layout="columns"] ul,
  [data-layout="columns"][data-cols="2"] ul,
  [data-layout="columns"][data-cols="3"] ul,
  [data-layout="columns"][data-cols="4"] ul{columns:1}
}

/* ── accordion ────────────────────────────────────────────────────────────────
   Collapsible rows, one open at a time. */
[data-layout="accordion"] .wrap{max-width:78ch}
[data-layout="accordion"] h2{margin-bottom:var(--s4)}
[data-layout="accordion"] details{border-bottom:1px solid var(--line)}
[data-layout="accordion"] summary{cursor:pointer;list-style:none;padding:var(--s4) 0;
  font-family:var(--display);font-weight:600;font-size:var(--fs-md);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  min-height:44px}
[data-layout="accordion"] summary::-webkit-details-marker{display:none}
[data-layout="accordion"] .a{padding-bottom:var(--s4);color:var(--muted)}

/* ── tabs ─────────────────────────────────────────────────────────────────────
   Labelled panels, one shown at a time. site.js drives them. */
[data-layout="tabs"] h2{margin-bottom:var(--s4)}
[data-layout="tabs"] :is([role="tablist"],.tablist-one){display:flex;gap:var(--s2);flex-wrap:wrap;
  border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
[data-layout="tabs"] :is([role="tab"],.tab-one){min-height:44px;padding:0 var(--s4);background:none;
  border:0;border-bottom:2px solid transparent;font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);color:var(--muted);cursor:pointer}
[data-layout="tabs"] :is([role="tab"][aria-selected="true"],.tab-one){color:var(--brand-ink);
  border-bottom-color:var(--brand)}
[data-layout="tabs"] [role="tabpanel"][hidden]{display:none}

/* ── rows ─────────────────────────────────────────────────────────────────────
   Vertical rows with dividers, each a title and a line. */
[data-layout="rows"] .wrap{max-width:80ch}
[data-layout="rows"] h2{margin-bottom:var(--s4)}
[data-layout="rows"] :is(ul,ol){list-style:none;margin:0}
[data-layout="rows"] li{border-bottom:1px solid var(--line);padding:var(--s5) 0;
  color:var(--muted)}
[data-layout="rows"] li strong{font-family:var(--display);font-size:var(--fs-h4);
  color:var(--ink);display:block;margin-bottom:var(--s2)}
[data-layout="rows"] li a{display:inline-flex;align-items:center;min-height:26px;
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--brand-ink);
  text-decoration:none}
[data-layout="rows"] li a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── carousel ─────────────────────────────────────────────────────────────────
   Some of them on screen, the rest scrolling in from the side. A grid shows every
   item; this one does not, and that is the whole difference. */
[data-layout="carousel"] h2{margin-bottom:var(--s4)}
[data-layout="carousel"] :is(ul,ol){list-style:none;margin:0;display:flex;gap:var(--s4);
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s3)}
[data-layout="carousel"] li{flex:0 0 300px;scroll-snap-align:start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);
  font-size:var(--fs-sm);color:var(--muted)}
[data-layout="carousel"] li strong{font-family:var(--display);font-size:var(--fs-h4);
  color:var(--ink);display:block;margin-bottom:var(--s2)}
@media(max-width:560px){[data-layout="carousel"] li{flex:0 0 84%}}

/* ── alternating ──────────────────────────────────────────────────────────────
   Text-and-image rows, the image changing sides down the page. Each item carries
   its own image, which is what stacked splits cannot do. */
[data-layout="alternating"] h2{margin-bottom:var(--s6)}
[data-layout="alternating"] :is(ul,ol){list-style:none;margin:0}
[data-layout="alternating"] li{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6);
  align-items:center;margin-bottom:var(--s7);color:var(--muted)}
[data-layout="alternating"] li:last-child{margin-bottom:0}
[data-layout="alternating"] li:nth-child(even){direction:rtl}
[data-layout="alternating"] li:nth-child(even) > *{direction:ltr}
[data-layout="alternating"] li strong{font-family:var(--display);font-size:var(--fs-h3);
  color:var(--ink);display:block;margin-bottom:var(--s3)}
[data-layout="alternating"] li img{width:100%;border-radius:var(--r);display:block}
@media(max-width:820px){
  [data-layout="alternating"] li{grid-template-columns:1fr;gap:var(--s4)}
  [data-layout="alternating"] li:nth-child(even){direction:ltr}
}

/* ── pair ─────────────────────────────────────────────────────────────────────
   Two equal panels side by side. Exactly two, and the lines match down both;
   three or more columns is a table. */
[data-layout="pair"] h2{margin-bottom:var(--s5)}
[data-layout="pair"] :is(ul,ol){list-style:none;margin:0;display:grid;
  grid-template-columns:1fr 1fr;gap:var(--s4)}
[data-layout="pair"] li{border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s5);background:var(--surface);font-size:var(--fs-sm);color:var(--muted)}
[data-layout="pair"] li strong{font-family:var(--display);font-size:var(--fs-h4);
  color:var(--ink);display:block;margin-bottom:var(--s2)}
[data-layout="pair"] > .wrap > p:last-child{margin-top:var(--s4);color:var(--muted);
  font-size:var(--fs-sm)}
[data-layout="pair"] figure{margin:0}
[data-layout="pair"] img{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);display:block}
[data-layout="pair"] figcaption{font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);margin-top:var(--s2)}
@media(max-width:560px){[data-layout="pair"] :is(ul,ol){grid-template-columns:1fr}}

/* ── mosaic ───────────────────────────────────────────────────────────────────
   Uneven photo grid, the first frame larger. A caption each at most. */
[data-layout="mosaic"] h2{margin-bottom:var(--s5)}
[data-layout="mosaic"] :is(ul,ol){list-style:none;margin:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s3)}
[data-layout="mosaic"] li{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);min-height:150px;padding:var(--s4);display:flex;
  align-items:flex-end;font-size:var(--fs-sm);color:var(--muted)}
[data-layout="mosaic"] li:first-child{grid-column:span 2;grid-row:span 2}
[data-layout="mosaic"] li img{width:100%;height:100%;object-fit:cover;
  border-radius:var(--r);display:block}
@media(max-width:820px){
  [data-layout="mosaic"] :is(ul,ol){grid-template-columns:repeat(2,1fr)}
  [data-layout="mosaic"] li:first-child{grid-column:span 2;grid-row:span 1}
}

/* ── table ────────────────────────────────────────────────────────────────────
   Rows and columns of short values. The only shape for a comparison with more
   than two columns. */
[data-layout="table"] h2{margin-bottom:var(--s5)}
[data-layout="table"] table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
[data-layout="table"] th,[data-layout="table"] td{text-align:left;padding:var(--s3);
  border-bottom:1px solid var(--line)}
[data-layout="table"] th{font-family:var(--display);font-weight:600;color:var(--muted);
  border-bottom-width:2px}

/* ═══ CONTENT — one rule per job ══════════════════════════════════════════════
   Everything below is about what the words in the block are. Nothing below knows
   where on the page the block sits or how many columns it has. */

/* ── hero ─────────────────────────────────────────────────────────────────────
   The page's only H1, and the block above the fold, whichever pattern draws it. */
[data-section="hero"]{background:var(--surface);border-bottom:1px solid var(--line)}
[data-section="hero"][data-layout="overlay"]{background:var(--ink);border-bottom:0}
[data-section="hero"] .reassure{margin-top:var(--s4);font-size:var(--fs-sm);
  color:var(--muted)}

/* ── process — the numbering is the job's, never the pattern's ────────────── */
[data-section="process"] ol,[data-section^="process-"] ol{counter-reset:step}
[data-section="process"] li,[data-section^="process-"] li{counter-increment:step;
  position:relative}
[data-section="process"] li::before,[data-section^="process-"] li::before{
  content:counter(step);display:block;font-family:var(--display);font-weight:700;
  font-size:var(--fs-h3);color:var(--brand);line-height:1;margin-bottom:var(--s3)}
[data-section="process"] li b,[data-section^="process-"] li b{display:block;
  font-family:var(--display);font-weight:700;font-size:var(--fs-h4);color:var(--ink);
  margin-bottom:var(--s2)}
[data-section="process"] li p,[data-section^="process-"] li p{margin:0}

/* ── faq — the disclosure marker ──────────────────────────────────────────── */
[data-section="faq"] summary::after,[data-section^="faq-"] summary::after{
  content:"";width:11px;height:11px;flex:none;border-right:2px solid var(--brand-ink);
  border-bottom:2px solid var(--brand-ink);transform:rotate(45deg);
  transition:transform var(--fast) var(--ease)}
[data-section="faq"] details[open] summary::after,
[data-section^="faq-"] details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}

/* ── contact — the form's own fields sit beside the details ───────────────── */
[data-section="contact"] h3{font-size:var(--fs-h4);margin-bottom:var(--s2)}
[data-section="contact"] .detail{margin-bottom:var(--s5)}
[data-section="contact"] .detail p{font-size:var(--fs-sm);color:var(--muted)}
/* A link on its own line is a target, not prose — it needs a real height. */
[data-section="contact"] .detail a{display:inline-flex;align-items:center;min-height:26px}
/* An email address is one unbreakable token. In a 375px column it paints past the
   viewport, which is a horizontal scrollbar on the one page whose whole job is to
   be read on a phone while somebody decides whether to ring. */
[data-section="contact"] p,[data-section="contact"] a{overflow-wrap:anywhere}

/* ── reviews — the overall rating heads them, the plugin fills the rest ───── */
[data-section="reviews"] .rating{font-family:var(--display);font-weight:600;
  color:var(--muted);margin-bottom:var(--s5)}
[data-section="reviews"] .stars{font-size:var(--fs-sm);margin-bottom:var(--s3)}
[data-section="reviews"] cite{font-style:normal;font-family:var(--display);
  font-weight:600;font-size:var(--fs-sm);display:block;margin-top:var(--s3)}

/* ── pricing — the price and what it is charged on ────────────────────────── */
[data-section="pricing"] .price{font-family:var(--display);font-size:var(--fs-h2);
  line-height:1.1;margin-bottom:var(--s1);color:var(--brand-ink)}
[data-section="pricing"] .basis{font-size:var(--fs-sm);color:var(--muted);
  margin-bottom:var(--s4)}

/* ── project-facts — labels and values, no sentences ──────────────────────── */
[data-section="project-facts"] dl{margin:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:var(--s4)}
[data-section="project-facts"] dt{font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);color:var(--muted);margin-bottom:var(--s1)}
[data-section="project-facts"] dd{margin:0;font-size:var(--fs-md)}
@media(max-width:820px){
  [data-section="project-facts"] dl{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  [data-section="project-facts"] dl{grid-template-columns:1fr}
}

/* ── team — a face, a name, a role ────────────────────────────────────────── */
[data-section="team"] .ph{aspect-ratio:1;margin-bottom:var(--s3)}
[data-section="team"] h3{font-size:var(--fs-h4);margin-bottom:var(--s1);
  color:var(--ink);font-family:var(--display)}
[data-section="team"] .role{font-size:var(--fs-sm);color:var(--muted);
  margin-bottom:var(--s2)}

/* ── numbers — the figure carries it, the words underneath explain it ─────── */
[data-section="numbers"] li{text-align:center;background:none;border:0;padding:var(--s3)}
[data-section="numbers"] li strong{font-size:var(--fs-h1);color:var(--brand-ink)}

/* ── gallery — a caption, never a write-up ────────────────────────────────── */
[data-section="gallery"] figure{margin:0}
[data-section="gallery"] figcaption{font-size:var(--fs-sm);color:var(--muted);
  margin-top:var(--s2)}

/* ── blog-list — the date above the title ─────────────────────────────────── */
[data-section="blog-list"] time{display:block;font-size:var(--fs-sm);color:var(--muted);
  margin-bottom:var(--s2)}
[data-section="blog-list"] h3{font-size:var(--fs-h3);margin-bottom:var(--s2)}
[data-section="blog-list"] h3 a{color:var(--ink);text-decoration:none}
[data-section="blog-list"] h3 a:hover{color:var(--brand-ink);text-decoration:underline;
  text-underline-offset:3px}

/* ── badges — the marks carry it ──────────────────────────────────────────── */
[data-section="badges"] li{font-family:var(--display);font-weight:600;
  color:var(--muted);font-size:var(--fs-sm)}

/* ── chrome: breadcrumb and announcement ──────────────────────────────────── */
[data-section="breadcrumb-bar"],[data-section="announcement-bar"]{
  background:var(--surface);border-bottom:1px solid var(--line);padding:0}
[data-section="breadcrumb-bar"] .wrap,[data-section="announcement-bar"] .wrap{
  display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;font-size:var(--fs-sm);
  color:var(--muted);padding-top:var(--s2);padding-bottom:var(--s2)}
[data-section="breadcrumb-bar"] a{color:var(--muted);text-decoration:none;
  display:inline-flex;align-items:center;min-height:26px}
[data-section="breadcrumb-bar"] a:hover{color:var(--ink);text-decoration:underline;
  text-underline-offset:3px}

/* A button written into the copy as [Button: Label](/route). */
a.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:0 var(--s4);border-radius:var(--r);font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);text-decoration:none;background:var(--brand-gradient);
  background:var(--brand-gradient);color:var(--on-brand);margin-top:var(--s4)}
a.button:hover{background:linear-gradient(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--ink) 14%,transparent)),var(--brand-gradient);
  background:linear-gradient(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--ink) 14%,transparent)),var(--brand-gradient)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══ MODERN PULSE MEDIA — the client layer ════════════════════════════════════
   Everything above is the house build, installed unchanged on 2026-10-14. Below is
   this brand's art direction: design-system/rules.md and brand.md, applied. Still
   tokens only. Grouped chrome → composition → content, the same order as above.

   THE SIGNATURE is the hero: a generated studio render in the brand's own colour
   with the page's real subjects floating over it as labels. Labels are HTML, never
   baked into the picture, so they stay readable, translatable and true to the copy.
   Everything else on the page stays quiet so that one thing can be loud. */

/* ── type, per rules.md ──────────────────────────────────────────────────────── */
h1,h2{letter-spacing:-.03em}
h4,h5,h6{font-family:var(--display);line-height:1.3;color:var(--ink)}
h4{font-size:var(--fs-h4);font-weight:600}
.wrap{padding:0 var(--s4)}
@media(min-width:768px){.wrap{padding:0 var(--s6)}}

/* ── chrome: header ──────────────────────────────────────────────────────────── */
.hd .wrap{min-height:72px}
.logo img{display:block;height:30px;width:auto}
.nav{gap:var(--s5)}
.has-sub{position:relative}
.sub-toggle{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;
  background:none;border:0;cursor:pointer;font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);color:var(--ink)}
.sub-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform var(--fast) var(--ease)}
.has-sub:hover .sub-toggle,.sub-toggle[aria-expanded="true"]{color:var(--brand-ink)}
.sub{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-2);padding:var(--s5);grid-template-columns:repeat(3,200px);
  gap:var(--s5)}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub[data-open="true"] .sub{display:grid}
.sub .grp{display:flex;flex-direction:column;gap:var(--s1)}
.nav .sub a{min-height:32px;font-weight:500;color:var(--muted)}
.nav .sub a.parent{font-weight:700;color:var(--ink);margin-bottom:var(--s1)}
.nav .sub a:hover{color:var(--brand-ink)}
.menu .sub-head{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  padding:var(--s3) 0 var(--s1)}
.menu a.sub-item{padding-left:var(--s4);font-weight:500;min-height:44px}
.menu{max-height:calc(100vh - 72px);overflow-y:auto}

/* ── chrome: footer ──────────────────────────────────────────────────────────── */
/* Desktop only: the house rule above collapses it to one column below 821px, and
   an unscoped rule here would win over that and paint the footer off a phone. */
@media(min-width:821px){.ft .wrap{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ft .logo img{height:32px}
.ft .tag{margin-top:var(--s4);max-width:34ch;color:var(--line)}
.ft li{color:var(--line)}

/* ── section rhythm: 96 desktop, 64 phone (rules.md) ────────────────────────── */
@media(max-width:820px){section[data-layout]{padding:var(--s7) 0}}
section[data-layout] > .wrap > h2{max-width:24ch;margin-bottom:var(--s4)}
section[data-layout] > .wrap > h2 + p{max-width:62ch}
section[data-layout] > .wrap > p{max-width:70ch}
.intro{margin-bottom:var(--s6)}

/* Tone. The ground is the off-white everywhere (rules.md); a white section is the
   only change of surface, and cards inside it drop to the ground to stay visible. */
[data-section="hero"],[data-section^="process"],[data-section="projects"],
[data-section="faq"]{background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
[data-section="hero"]{border-top:0}

/* Bullets in running copy: a bold lead and its sentence, ticked. */
ul.ticks{list-style:none;margin:var(--s4) 0 var(--s4)}
ul.ticks li{position:relative;padding-left:var(--s5);margin-bottom:var(--s3)}
ul.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;
  border-left:2px solid var(--brand-ink);border-bottom:2px solid var(--brand-ink);
  transform:rotate(-45deg)}
ul.ticks strong{font-family:var(--display);font-weight:600}
.copy .cta{margin-top:var(--s5)}
.more{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;
  font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--brand-ink);
  text-decoration:none}
.more:hover{text-decoration:underline;text-underline-offset:3px}
.more svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* What is still to come, said plainly rather than faked. */
.pending{border:1px dashed var(--muted);border-radius:var(--r);padding:var(--s5);
  background:var(--surface);color:var(--muted);font-size:var(--fs-sm)}
.pending b{display:block;font-family:var(--display);color:var(--ink);font-size:var(--fs-md);
  margin-bottom:var(--s1)}

/* ── hero: the signature ─────────────────────────────────────────────────────── */
[data-section="hero"] h1{max-width:none}
[data-section="hero"] .copy > p{font-size:var(--fs-lg);color:var(--muted);max-width:48ch;
  margin-top:var(--s4)}
[data-section="hero"][data-layout="split"]{padding:var(--s7) 0 var(--s8)}
[data-section="hero"][data-layout="stacked"] h1{margin:0 auto}
[data-section="hero"][data-layout="stacked"] .copy > p,
[data-section="hero"][data-layout="stacked"] .subheading{margin-left:auto;margin-right:auto}
.render{position:relative;margin:0}
.render img{width:100%;height:auto;display:block;border-radius:calc(var(--r)*2)}
.render .ph{border-radius:calc(var(--r)*2)}
.render .pills{list-style:none;margin:0}
.render .pill{position:absolute;display:inline-flex;align-items:center;gap:var(--s2);
  white-space:nowrap;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:var(--s2) var(--s3);font-family:var(--display);
  font-weight:600;font-size:var(--fs-sm);color:var(--ink);box-shadow:var(--shadow-2);
  animation:settle 900ms var(--ease) both}
.render .pill::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--brand-gradient);flex:none}
.render .pill:nth-child(1){top:10%;left:-24px;animation-delay:120ms}
.render .pill:nth-child(2){top:44%;right:-24px;animation-delay:260ms}
.render .pill:nth-child(3){bottom:12%;left:8%;animation-delay:400ms}
.render .pill:nth-child(4){bottom:-16px;right:12%;animation-delay:540ms}
/* MOTION 4: the page's one authored moment. It starts visible and only settles --
   never animates TO visible -- so a page whose animation never runs loses nothing. */
@keyframes settle{from{transform:translateY(10px)}to{transform:none}}
@media(max-width:1100px){
  .render .pill:nth-child(1){left:var(--s3)}
  .render .pill:nth-child(2){right:var(--s3)}
}
@media(max-width:560px){
  .render .pills{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
  .render .pill{position:static;box-shadow:none;white-space:normal}
}

/* ── the figures: drawn in code, from the copy's own facts ───────────────────── */
.fig{margin:0;background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--r)*2);padding:var(--s5);font-size:var(--fs-sm);color:var(--ink)}
.fig figcaption,.fig .lbl{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fig figcaption{margin-bottom:var(--s4);display:block}
.fig b{font-family:var(--display);font-weight:600}
.fig .muted{color:var(--muted)}
.fig .chip{display:inline-flex;align-items:center;gap:var(--s1);border-radius:999px;
  padding:var(--s1) var(--s3);background:var(--ground);border:1px solid var(--line);
  font-family:var(--display);font-weight:600;font-size:var(--fs-xs);color:var(--ink)}
.fig .chip.hot{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
.fig .arrow{display:flex;justify-content:center;color:var(--lilac);margin:var(--s2) 0}
.fig .arrow svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.fig .row{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.fig .card{background:var(--ground);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3) var(--s4)}
.fig .card.focus{background:var(--surface);border-color:var(--brand);
  box-shadow:0 0 0 3px var(--line)}
.fig .stack{display:flex;flex-direction:column;gap:var(--s2)}

/* bars: a schematic, never a chart. No axis, no numbers -- nothing a reader could
   take for a measured figure (rules.md: never a statistic without a source). */
.fig .bars{display:flex;align-items:flex-end;gap:var(--s2);height:96px;
  border-bottom:1px solid var(--line);margin:var(--s3) 0 var(--s2)}
.fig .bars i{flex:1;border-radius:var(--r-sm) var(--r-sm) 0 0;background:var(--lilac)}
.fig .bars.hot i{background:var(--brand-gradient)}
.fig .two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.fig .meter{height:8px;border-radius:999px;background:var(--line);overflow:hidden}
.fig .meter i{display:block;height:100%;background:var(--brand-gradient);border-radius:999px}
.fig .meter.cold i{background:var(--lilac)}
.fig table{width:100%;border-collapse:collapse}
.fig td,.fig th{padding:var(--s2) 0;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line)}
.fig th{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fig td:nth-child(2),.fig th:nth-child(2){width:38%;padding-left:var(--s3)}
.fig td:last-child,.fig th:last-child{text-align:right}
/* the results page, drawn */
.serp .q{display:flex;align-items:center;gap:var(--s2);border:1px solid var(--line);
  border-radius:999px;padding:var(--s2) var(--s4);margin-bottom:var(--s4);color:var(--muted)}
.serp .q svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.serp .card{margin-bottom:var(--s2)}
.serp .pins{display:flex;gap:var(--s3);margin-top:var(--s2)}
.serp .pins span{flex:1;height:6px;border-radius:999px;background:var(--line)}
.serp .pins span.me{background:var(--brand-gradient)}
.serp .line{height:6px;border-radius:999px;background:var(--line);margin-top:var(--s2)}
.serp .line.short{width:60%}
.serp .you{color:var(--brand-ink);font-family:var(--display);font-weight:700}
/* browser and phone */
.device{border:1px solid var(--line);border-radius:var(--r);background:var(--ground);
  overflow:hidden}
.device .bar{display:flex;gap:var(--s1);padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line);background:var(--surface)}
.device .bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.device .body{padding:var(--s4)}
.device .fake{height:8px;border-radius:999px;background:var(--line);margin-bottom:var(--s2)}
.device .fake.h{height:14px;width:70%;background:var(--lilac)}
.device .field-x{height:28px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);margin-bottom:var(--s2)}
.device .go{height:28px;width:50%;border-radius:var(--r-sm);background:var(--brand-gradient)}
.fig .site{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--s3);align-items:end}
.fig .site .phone{border-radius:calc(var(--r)*2)}
@media(max-width:560px){.fig .two,.fig .site{grid-template-columns:1fr}}

/* ── split ───────────────────────────────────────────────────────────────────── */
[data-layout="split"] .wrap{gap:var(--s8)}
[data-layout="split"] .copy h2{margin-bottom:var(--s4)}
@media(max-width:820px){[data-layout="split"] .wrap{gap:var(--s6)}}

/* ── tabs ────────────────────────────────────────────────────────────────────── */
[data-layout="tabs"] :is([role="tablist"],.tablist-one){border:0;gap:var(--s1);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:var(--s1);display:inline-flex;
  max-width:100%}
[data-section="projects"][data-layout="tabs"] :is([role="tablist"],.tablist-one){background:var(--ground)}
[data-layout="tabs"] :is([role="tab"],.tab-one){border:0;border-radius:999px;color:var(--ink)}
[data-layout="tabs"] :is([role="tab"][aria-selected="true"],.tab-one){background:var(--ink);
  color:var(--surface)}
[data-layout="tabs"] [role="tab"]:hover{color:var(--brand-ink)}
[data-layout="tabs"] [role="tab"][aria-selected="true"]:hover{color:var(--surface)}
[data-layout="tabs"] :is([role="tabpanel"],.tabpanel-one){background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--r)*2);padding:var(--s6)}
[data-section="projects"] :is([role="tabpanel"],.tabpanel-one){background:var(--ground)}
.panel-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.panel-body h3{margin-bottom:var(--s3)}
.panel-body h3 a{color:var(--ink);text-decoration:none}
.panel-body h3 a:hover{color:var(--brand-ink)}
.sublist{list-style:none;margin:0;border-top:1px solid var(--line)}
.sublist li{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.sublist li > strong a,.sublist li > strong{font-family:var(--display);font-size:var(--fs-h5);
  color:var(--ink);text-decoration:none;display:flex;justify-content:space-between;
  align-items:center;gap:var(--s3);min-height:26px}
.sublist li > strong a:hover{color:var(--brand-ink)}
.sublist li > strong svg{width:18px;height:18px;stroke:var(--brand-ink);fill:none;
  stroke-width:2;flex:none}
.sublist li > span{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:var(--s1)}
.result-big{font-family:var(--display);font-weight:700;font-size:var(--fs-h1);line-height:1.05;
  letter-spacing:-.03em;color:var(--brand-ink)}
.result-big + p{margin-top:var(--s3);color:var(--muted)}
@media(max-width:820px){
  .panel-body{grid-template-columns:1fr;gap:var(--s5)}
  [data-layout="tabs"] :is([role="tabpanel"],.tabpanel-one){padding:var(--s5) var(--s4)}
  [data-layout="tabs"] :is([role="tablist"],.tablist-one){border-radius:var(--r);display:flex;flex-wrap:wrap}
  [data-layout="tabs"] :is([role="tab"],.tab-one){border-radius:var(--r-sm);flex:1 1 auto}
}

/* ── pair ────────────────────────────────────────────────────────────────────── */
[data-layout="pair"] :is(ul,ol){margin:var(--s5) 0 var(--s4)}
[data-layout="pair"] li{font-size:var(--fs-md);color:var(--ink);padding:var(--s6);
  border-radius:calc(var(--r)*2)}
[data-layout="pair"] li strong{font-size:var(--fs-h3);margin-bottom:var(--s3)}
[data-layout="pair"] li:last-child{border-color:var(--brand);
  box-shadow:inset 0 3px 0 var(--brand)}
[data-layout="pair"] .wrap > p{font-size:var(--fs-md)}
.tbl{width:100%;border-collapse:collapse;margin:var(--s4) 0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.tbl th{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--muted)}
.tbl tr:last-child td{border-bottom:0}

/* ── grid ────────────────────────────────────────────────────────────────────── */
[data-layout="grid"] li{font-size:var(--fs-md);color:var(--ink)}
[data-layout="grid"] li strong{font-size:var(--fs-h5)}
[data-layout="grid"] li > span{color:var(--muted);font-size:var(--fs-sm)}
[data-layout="grid"] .ico{width:40px;height:40px;border-radius:var(--r);display:flex;
  align-items:center;justify-content:center;background:var(--ground);
  border:1px solid var(--line);margin-bottom:var(--s4);color:var(--brand-ink)}
[data-layout="grid"] .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
[data-layout="grid"] .outro{margin-top:var(--s5)}
[data-layout="grid"] li .more{margin-top:auto;padding-top:var(--s3)}
[data-layout="grid"] li p{color:var(--muted);font-size:var(--fs-sm)}
[data-layout="grid"] li p strong{display:inline;font-size:inherit;color:var(--ink);margin:0}
[data-layout="grid"] li p strong a{color:var(--ink)}

/* ── carousel ────────────────────────────────────────────────────────────────── */
[data-layout="carousel"] .rail-head{display:flex;justify-content:space-between;
  align-items:flex-end;gap:var(--s4);margin-top:var(--s6);margin-bottom:var(--s4)}
[data-layout="carousel"] .rail-btns{display:flex;gap:var(--s2)}
.rail-btns button{width:44px;height:44px;border-radius:50%;background:var(--surface);
  border:1px solid var(--line);color:var(--ink);cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.rail-btns button:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.rail-btns svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
[data-layout="carousel"] :is(ul,ol){scrollbar-width:thin;scroll-padding-left:0}
[data-layout="carousel"] li{flex:0 0 280px;font-size:var(--fs-sm)}
[data-layout="carousel"] li strong{font-size:var(--fs-h5)}
[data-layout="carousel"] .count{font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);color:var(--muted)}

/* ── timeline: the steps either side of one line; one column on a phone ──────── */
[data-layout="timeline"] ol{list-style:none;margin:var(--s6) 0 0;position:relative;
  counter-reset:step}
[data-layout="timeline"] ol::before{content:"";position:absolute;top:0;bottom:0;left:50%;
  width:2px;margin-left:-1px;background:var(--line)}
[data-layout="timeline"] ol > li{position:relative;width:50%;padding:0 var(--s7) var(--s6) 0;
  text-align:right}
[data-layout="timeline"] ol > li:nth-child(even){margin-left:50%;padding:0 0 var(--s6) var(--s7);
  text-align:left}
[data-section^="process"][data-layout="timeline"] ol > li::before{position:absolute;top:0;
  right:-20px;width:40px;height:40px;border-radius:50%;background:var(--surface);
  border:2px solid var(--brand);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-md);color:var(--brand-ink);margin:0;z-index:1}
[data-section^="process"][data-layout="timeline"] ol > li:nth-child(even)::before{right:auto;
  left:-20px}
[data-layout="timeline"] ol > li b{font-size:var(--fs-h4);padding-top:var(--s1)}
[data-layout="timeline"] ol > li p{color:var(--muted)}
[data-layout="timeline"] .loop-note{text-align:center;font-family:var(--display);
  font-weight:600;color:var(--muted);font-size:var(--fs-sm);margin:0 auto var(--s6)}
.keepup{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
.keepup-h{font-family:var(--display);font-weight:700;font-size:var(--fs-h4);margin-top:var(--s4)}
.keepup li{list-style:none;background:var(--ground);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);color:var(--muted);font-size:var(--fs-sm)}
.keepup li strong{display:block;font-family:var(--display);color:var(--ink);
  font-size:var(--fs-md);margin-bottom:var(--s1)}
[data-layout="timeline"] .cta{justify-content:center}
@media(max-width:820px){
  [data-layout="timeline"] ol::before{left:20px}
  [data-layout="timeline"] ol > li,[data-layout="timeline"] ol > li:nth-child(even){width:auto;
    margin-left:0;padding:0 0 var(--s5) var(--s8);text-align:left}
  [data-section^="process"][data-layout="timeline"] ol > li::before,
  [data-section^="process"][data-layout="timeline"] ol > li:nth-child(even)::before{left:0;right:auto}
  .keepup{grid-template-columns:1fr}
}

/* ── accordion ───────────────────────────────────────────────────────────────── */
[data-layout="accordion"] .wrap{max-width:860px}
[data-layout="accordion"] summary{font-size:var(--fs-lg)}
[data-layout="accordion"] .a{max-width:68ch}

/* ── band ────────────────────────────────────────────────────────────────────── */
/* The closing band carries the gradient: the one per page (rules.md). */
[data-section="cta"][data-layout="band"]{background:var(--brand-gradient);
  background:var(--brand-gradient);padding:var(--s8) 0}
[data-section="cta"] h2{margin:0 auto var(--s3)}
[data-section="cta"] .cta{margin-top:var(--s5)}
[data-section="cta"] .btn--primary{background:var(--surface);color:var(--brand-ink)}
[data-section="cta"] .btn--primary:hover{background:var(--ground)}
/* Any other band is the page's one inverted band, never a second gradient. */
[data-layout="band"]:not([data-section="cta"]){background:var(--ink)}
[data-layout="band"]:not([data-section="cta"]) h2{color:var(--surface);margin:0 auto var(--s3)}
[data-layout="band"]:not([data-section="cta"]) p{color:var(--line);opacity:1}

/* ── content: testimonials, projects, contact, blog ──────────────────────────── */
[data-section="testimonials"] .pending{margin-top:var(--s5)}
.case-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.case-card .tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3)}
.case-card .tag{font-family:var(--display);font-weight:600;font-size:var(--fs-xs);
  border-radius:999px;padding:var(--s1) var(--s3);background:var(--ground);
  border:1px solid var(--line);color:var(--ink)}
[data-layout="grid"] li.case-card strong.big{font-size:var(--fs-h2);color:var(--brand-ink);
  letter-spacing:-.03em;margin:var(--s3) 0 var(--s1)}
[data-section="contact"] .detail-list{list-style:none;margin:var(--s5) 0 0}
[data-section="contact"] .detail-list li{display:flex;gap:var(--s3);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line)}
[data-section="contact"] .detail-list svg{width:20px;height:20px;stroke:var(--brand-ink);
  fill:none;stroke-width:2;flex:none}
[data-section="contact"] .detail-list a{color:var(--ink);font-weight:600;
  display:inline-flex;align-items:center;min-height:44px}
.form-card{background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--r)*2);padding:var(--s6)}
.form-card .btn{width:100%;min-height:52px;font-size:var(--fs-md)}
@media(max-width:560px){.form-card{padding:var(--s5) var(--s4)}}
[data-section="contact"][data-layout="split"] .wrap{align-items:start}
[data-section="blog-list"] .pending{max-width:none}
.placeholder{display:inline-block;font-family:var(--display);font-weight:600;
  font-size:var(--fs-sm);color:var(--muted);border:1px dashed var(--muted);
  border-radius:var(--r-sm);padding:var(--s1) var(--s2)}
[data-layout="band"] .placeholder{color:var(--line);border-color:var(--line)}
/* Skip link: off-screen until a keyboard user tabs to it. */
.skip{position:absolute;left:var(--s3);top:-100px;z-index:30;background:var(--surface);
  color:var(--ink);padding:var(--s2) var(--s3);border-radius:var(--r-sm);
  border:1px solid var(--line);font-family:var(--display);font-weight:600}
.skip:focus{top:var(--s2)}
/* The reporting row under a timeline is not a step: no counter, no marker. */
[data-section^="process"] .keepup li{counter-increment:none}
[data-section^="process"] .keepup li::before{content:none}
[data-section="hero"] .subheading{margin-top:var(--s4);font-size:var(--fs-lg);max-width:48ch}
/* The hero's headline is the longest line on most pages and sets at fs-h1; the
   text column takes the larger share so it breaks into phrases, not single words. */
@media(min-width:821px){
  [data-section="hero"][data-layout="split"] .wrap{grid-template-columns:1.3fr .9fr;gap:var(--s7)}
}

/* Modern Pulse Media — the refresh, after the design review on 14 October 2026.
   "Dry and stale... a manila folder." Loaded after base.css. Two directions share
   everything here; marks what only the bolder one does. Once one is
   chosen this folds into base.css and the attribute goes.

   Where the life comes from, in order: colour inside the type (one gradient phrase a
   heading), the page changing temperature (dark sections), light (glows and a faint
   grid instead of flat fills), depth (cards that lift), and a hero that shows people
   and the work. Tokens only; color-mix() tints a token rather than restating it. */

/* ── colour in the type ──────────────────────────────────────────────────────── */
.accent{background:var(--brand);-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-box-decoration-break:clone;
  box-decoration-break:clone}

/* ── header: glass over the glow ─────────────────────────────────────────────── */
.hd{background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px)}

/* ── hero: light, a faint grid, the photograph and the work over it ─────────── */
[data-section="hero"]{position:relative;overflow:hidden;background:var(--ground);border-bottom:0}
[data-section="hero"]::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(560px 460px at 80% 40%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 70%),
    radial-gradient(420px 320px at 30% 0%,color-mix(in srgb,var(--brand) 7%,transparent),transparent 70%)}
[data-section="hero"]::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.2px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(100deg,transparent 35%,#000 75%);
  mask-image:linear-gradient(100deg,transparent 35%,#000 75%)}
[data-section="hero"] .wrap{position:relative;z-index:1}
[data-section="hero"] .copy > p{color:var(--ink);opacity:.82}

.hero-visual{position:relative;padding:var(--s5) 0 var(--s6) var(--s4);margin-right:calc(-1*var(--s7))}
.hero-photo{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;
  border-radius:calc(var(--r)*3);display:block;box-shadow:var(--shadow-2)}
.panel{position:absolute;z-index:2;background:var(--surface);border-radius:calc(var(--r)*2);
  box-shadow:0 24px 48px -20px color-mix(in srgb,var(--ink) 45%,transparent),
             0 2px 6px color-mix(in srgb,var(--ink) 8%,transparent);
  font-size:var(--fs-sm);animation:settle 900ms var(--ease) both}
.panel .k{font-size:var(--fs-xs);color:var(--muted);font-family:var(--display);font-weight:600}
.panel-report{left:calc(-1*var(--s5));bottom:0;width:300px;padding:var(--s4);background:var(--ink);
  color:var(--surface);animation-delay:150ms}
.panel-report .panel-head{display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--s3)}
.panel-report .panel-head b{font-family:var(--display);letter-spacing:.02em}
.example{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;color:var(--line);
  border:1px solid color-mix(in srgb,var(--surface) 30%,transparent);border-radius:999px;
  padding:2px var(--s2)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.kpis > div{display:flex;flex-direction:column;justify-content:flex-end}
.panel-report .k{color:var(--line)}
.kpis .v{font-family:var(--display);font-weight:700;font-size:var(--fs-h4);line-height:1.2}
.kpis .d{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;color:var(--brand-on-ink)}
.spark{display:block;width:100%;height:56px;margin-top:var(--s3);color:var(--brand-on-ink)}
.panel-map{left:0;top:0;width:220px;padding:var(--s3) var(--s4);animation-delay:300ms}
.panel-map ol{list-style:none;margin:var(--s2) 0 0}
.panel-map li{display:flex;justify-content:space-between;gap:var(--s2);padding:var(--s1) 0;
  color:var(--muted);border-top:1px solid var(--line)}
.panel-map li b{font-family:var(--display);font-weight:600}
.panel-map li.me{color:var(--ink)}
.panel-map li.me b{color:var(--brand-ink)}
.panel-toast{right:calc(-1*var(--s4));bottom:var(--s8);display:flex;gap:var(--s3);
  align-items:center;padding:var(--s3) var(--s4);animation-delay:450ms}
.panel-toast b{font-family:var(--display)}
.panel-toast .dot{width:10px;height:10px;border-radius:50%;flex:none;
  background:var(--brand-gradient);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 20%,transparent)}
.pulse-line{display:none}
@media(max-width:820px){
  .hero-visual{padding:0}
  .panel-report{position:relative;left:auto;bottom:auto;width:auto;margin:calc(-1*var(--s7)) var(--s3) 0}
  .panel-map,.panel-toast{display:none}
}

/* ── depth: cards lift, icon tiles carry the gradient ───────────────────────── */
[data-layout="grid"] li,[data-layout="carousel"] li,[data-layout="pair"] li{
  border-radius:calc(var(--r)*2);border-color:transparent;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),
             0 12px 32px -18px color-mix(in srgb,var(--ink) 35%,transparent);
  transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease)}
[data-layout="grid"] .ico{background:var(--brand-gradient);border:0;color:var(--on-brand)}

/* the industries: numbered, in the display face (brand.md: figures carry it) */
[data-layout="carousel"] :is(ul,ol){counter-reset:card;padding-top:var(--s2)}
[data-layout="carousel"] li{counter-increment:card}
[data-layout="carousel"] li::before{content:counter(card,decimal-leading-zero);display:block;
  font-family:var(--display);font-weight:700;font-size:var(--fs-h3);line-height:1;
  margin-bottom:var(--s4);background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent}
[data-section="testimonials"] li::before{content:none}

/* pricing: the model the agency leads with is the loud one */
[data-layout="pair"] li:last-child{box-shadow:inset 0 4px 0 var(--brand),
  0 12px 32px -18px color-mix(in srgb,var(--ink) 35%,transparent)}

/* the timeline: a lit line, filled markers */
[data-layout="timeline"] ol::before{background:linear-gradient(var(--brand),var(--lilac))}
[data-section^="process"][data-layout="timeline"] ol > li::before{
  background:var(--brand-gradient);border:0;color:var(--on-brand);
  box-shadow:0 0 0 6px var(--surface),0 8px 20px -6px color-mix(in srgb,var(--brand) 60%,transparent)}

/* tabs keep their shape (approved as they were); the panel gets depth */
[data-layout="tabs"] :is([role="tabpanel"],.tabpanel-one){border-color:transparent;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),
             0 20px 48px -24px color-mix(in srgb,var(--ink) 35%,transparent)}
[data-layout="tabs"] :is([role="tab"][aria-selected="true"],.tab-one){background:var(--ink)}

/* the figures read as product, not as wireframe */
.fig{border-color:transparent;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 6%,transparent),
  0 20px 48px -24px color-mix(in srgb,var(--ink) 40%,transparent)}
.fig .chip{background:var(--surface);border-color:color-mix(in srgb,var(--brand) 35%,transparent)}
.fig .card.focus{background:var(--ink);border-color:var(--ink);box-shadow:none}
.fig .card.focus b{color:var(--surface)}
.fig .card.focus .muted,.fig .card.focus .lbl{color:var(--line)}
.fig .card.focus .you{color:var(--brand-on-ink)}

/* ── dark moments ─────────────────────────────────────────────────────────────
   The ground stays light; one or two sections a page go dark (rules.md). Which ones
   is the renderer's DARK table, marked data-tone="dark" -- so the rule is keyed on a
   decision, not on whichever job happened to be dark on the home page. Keyed on the
   element as well, because base.css's tone and tab rules carry two attributes. */
section[data-tone="dark"]{position:relative;overflow:hidden;background:var(--ink);
  color:var(--line);border:0}
section[data-tone="dark"]::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(640px 420px at 88% 12%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 70%)}
section[data-tone="dark"] .wrap{position:relative}
section[data-tone="dark"] :is(h2,h3,h3 a){color:var(--surface)}
section[data-tone="dark"] p:not(.result-big){color:var(--line)}
section[data-tone="dark"][data-layout="tabs"] :is([role="tablist"],.tablist-one){
  background:color-mix(in srgb,var(--surface) 8%,transparent);
  border-color:color-mix(in srgb,var(--surface) 14%,transparent)}
section[data-tone="dark"] :is([role="tab"],.tab-one){color:var(--surface)}
section[data-tone="dark"] [role="tab"][aria-selected="true"],
section[data-tone="dark"] [role="tab"][aria-selected="true"]:hover{background:var(--surface);color:var(--ink)}
section[data-tone="dark"] :is([role="tabpanel"],.tabpanel-one){background:color-mix(in srgb,var(--surface) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--surface) 12%,transparent);box-shadow:none}
section[data-tone="dark"] p.result-big{background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent}
section[data-tone="dark"] .sublist,section[data-tone="dark"] .sublist li{
  border-color:color-mix(in srgb,var(--surface) 14%,transparent)}
section[data-tone="dark"] .sublist li > strong,
section[data-tone="dark"] .sublist li > span strong{color:var(--surface)}
section[data-tone="dark"] .sublist li > span{color:var(--line)}
section[data-tone="dark"] .more{color:var(--brand-on-ink)}
section[data-tone="dark"]:is([data-layout="grid"],[data-layout="carousel"]) li{
  background:color-mix(in srgb,var(--surface) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--surface) 12%,transparent);box-shadow:none;color:var(--line)}
section[data-tone="dark"] li strong{color:var(--surface)}
section[data-tone="dark"] li span{color:var(--line)}
section[data-tone="dark"] li strong.big,section[data-tone="dark"] li.case-card strong.big{color:var(--brand-on-ink)}
section[data-tone="dark"] .case-card .tag{background:transparent;color:var(--surface);
  border-color:color-mix(in srgb,var(--surface) 30%,transparent)}
section[data-tone="dark"] .rail-btns button{background:transparent;color:var(--surface);
  border-color:color-mix(in srgb,var(--surface) 30%,transparent)}
section[data-tone="dark"] .pending{background:transparent;color:var(--line);
  border-color:color-mix(in srgb,var(--surface) 40%,transparent)}
section[data-tone="dark"] .pending b{color:var(--surface)}
section[data-tone="dark"] .placeholder{color:var(--line);border-color:var(--line)}
section[data-tone="dark"] .cta .btn--quiet{background:transparent;color:var(--surface);
  border-color:color-mix(in srgb,var(--surface) 30%,transparent)}

/* ── the bolder half (direction B, chosen 14 October 2026) ──────────────────────────────────────────────────────────── */
/* a block of the brand behind the photograph, offset, the way Asidore frames its own */
.hero-visual::before{content:"";position:absolute;z-index:0;
  top:0;right:calc(-1*var(--s4));width:55%;height:62%;border-radius:calc(var(--r)*3);
  background:var(--brand-gradient)}
.hero-photo{position:relative;z-index:1}
/* the logo's own pulse, drawn through the hero */
.pulse-line{display:block;position:absolute;z-index:0;left:-125%;
  bottom:calc(-1*var(--s7));height:90px;width:225%;color:var(--brand);opacity:.3;pointer-events:none}
/* the model they lead with goes dark */
[data-layout="pair"] li:last-child{background:var(--ink);color:var(--line);
  box-shadow:0 24px 48px -20px color-mix(in srgb,var(--ink) 55%,transparent)}
[data-layout="pair"] li:last-child strong{color:var(--surface)}
/* the commitments, numbered big instead of ticked */
[data-section="benefits"][data-layout="grid"] ul{counter-reset:ben}
[data-section="benefits"][data-layout="grid"] li{counter-increment:ben}
[data-section="benefits"][data-layout="grid"] .ico{display:none}
[data-section="benefits"][data-layout="grid"] li::before{content:counter(ben,decimal-leading-zero);
  font-family:var(--display);font-weight:700;font-size:var(--fs-h2);line-height:1;
  margin-bottom:var(--s4);background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:820px){.hero-visual::before{right:calc(-1*var(--s3));top:calc(-1*var(--s3))}}

@media(max-width:820px){
  .hero-visual{margin-right:0}
  .panel-report{left:auto}
  .pulse-line{display:none}
}
/* the agents figure: big enough to hold its column */
[data-section="text-2"] .fig{padding:var(--s6);font-size:var(--fs-md)}
[data-section="text-2"] .fig .row{flex-direction:column;align-items:stretch;gap:var(--s2)}
[data-section="text-2"] .fig .chip{justify-content:flex-start;padding:var(--s3) var(--s4);
  font-size:var(--fs-sm);border-radius:var(--r)}
[data-section="text-2"] .fig .chip::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--brand-gradient);margin-right:var(--s2)}
[data-section="text-2"] .fig .card.focus{padding:var(--s4) var(--s5)}

/* the panels sit further into the gutter between the columns, off the photograph */
@media(min-width:821px){
  .panel-report{left:calc(-1*var(--s7));width:330px}
  .panel-map{left:calc(-1*var(--s5))}
}

/* ── interface scenes: the work drawn as the screens it happens on (14 October 2026) ── */
.ex{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px var(--s2);margin-left:var(--s2)}
.ui-fig{padding:var(--s4)}
.ui-fig figcaption{display:flex;align-items:center}
.ui-window{background:var(--surface);border:1px solid var(--line);border-radius:calc(var(--r)*1.5);
  overflow:hidden;box-shadow:0 18px 40px -24px color-mix(in srgb,var(--ink) 40%,transparent)}
.ui-bar{display:flex;align-items:center;gap:6px;padding:var(--s2) var(--s3);background:var(--ground);
  border-bottom:1px solid var(--line)}
.ui-bar > i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.ui-bar .chan{margin-left:var(--s2);font-family:var(--display);font-weight:600;font-size:var(--fs-xs);color:var(--ink)}
.ui-body{padding:var(--s3);display:flex;flex-direction:column;gap:var(--s3);font-size:var(--fs-sm)}
.ui-search{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--ink);
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 10%,transparent)}
.ui-search svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round}
.ui-map{display:block;width:100%;height:100%}
.ui-map .land{fill:var(--ground)}
.ui-map .park{fill:color-mix(in srgb,var(--success) 14%,var(--surface))}
.ui-map .water{fill:color-mix(in srgb,var(--info) 16%,var(--surface))}
.ui-map .road{fill:none;stroke:var(--surface);stroke-width:5}
.ui-map .road.big{stroke-width:10}
.ui-map .pin path{fill:var(--lilac)}
.ui-map .pin circle{fill:var(--surface)}
.ui-map .pin.me path{fill:var(--brand)}
.ui-map .pin.me{transform-box:fill-box}
.ui-mapwrap{position:relative;height:120px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.ui-pinlabel{position:absolute;left:49%;top:12%;transform:translateX(-50%);white-space:nowrap;
  background:var(--ink);color:var(--surface);font-family:var(--display);font-weight:600;font-size:var(--fs-xs);
  padding:2px var(--s2);border-radius:var(--r-sm)}
.ui-pack{list-style:none;margin:0;display:flex;flex-direction:column}
.ui-pack li{display:grid;grid-template-columns:1fr auto;gap:0 var(--s2);padding:var(--s2) 0;
  border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs)}
.ui-pack li:first-child{border-top:0}
.ui-pack b{font-family:var(--display);font-weight:600;font-size:var(--fs-sm);color:var(--ink)}
.ui-pack .rt{text-align:right;white-space:nowrap}
.ui-pack .st{color:var(--lilac);letter-spacing:-1px}
.ui-pack .meta{grid-column:1/-1}
.ui-pack li.me b{color:var(--brand-ink)}
.ui-pack li.me .st{color:var(--warning)}
.ui-pack .acts{grid-column:1/-1;display:flex;gap:var(--s2);margin-top:var(--s2)}
.ui-pack .acts i{font-style:normal;font-family:var(--display);font-weight:600;color:var(--brand-ink);
  border:1px solid color-mix(in srgb,var(--brand) 40%,transparent);border-radius:999px;padding:2px var(--s3)}

/* the results page, in its three parts */
.ui-block{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);
  display:flex;flex-direction:column;gap:var(--s2)}
.ui-block .tag{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.ui-block .n{position:absolute;top:calc(-1*var(--s2));right:calc(-1*var(--s2));width:26px;height:26px;
  border-radius:50%;display:grid;place-items:center;background:var(--brand-ink);color:var(--on-brand);
  font-family:var(--display);font-weight:700;font-size:var(--fs-xs);box-shadow:0 0 0 4px var(--surface)}
.ui-block.ai{background:color-mix(in srgb,var(--brand) 5%,var(--surface));border-color:color-mix(in srgb,var(--brand) 25%,transparent)}
.ui-block.ai p{margin:0;color:var(--ink)}
.ui-block .you{color:var(--brand-ink);font-family:var(--display)}
.ui-block .src{display:flex;gap:var(--s2);flex-wrap:wrap}
.ui-block .src i{font-style:normal;font-size:var(--fs-xs);color:var(--muted);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:1px var(--s2)}
.ui-block.map{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.ui-block.map .ui-mapwrap{height:96px}
.ui-block.web .url{font-size:var(--fs-xs);color:var(--muted)}
.ui-block.web .title{font-family:var(--display);font-weight:600;color:var(--brand-ink)}
.ui-block .line{display:block;height:6px;border-radius:999px;background:var(--line)}
.ui-block .line.short{width:62%}
/* the numbers beside the copy match the numbers on the page */
[data-section="benefits"]:has(.ui-block) ul.ticks{counter-reset:pt}
[data-section="benefits"]:has(.ui-block) ul.ticks li{counter-increment:pt;padding-left:var(--s6)}
[data-section="benefits"]:has(.ui-block) ul.ticks li::before{content:counter(pt);width:26px;height:26px;
  top:-1px;left:0;border:0;transform:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-ink);color:var(--on-brand);font-family:var(--display);font-weight:700;font-size:var(--fs-xs)}

/* the Slack thread */
.chat .ui-body{gap:var(--s4)}
.msg{display:grid;grid-template-columns:32px 1fr;gap:var(--s3);align-items:start}
.msg p{margin:0}
.msg .who{margin-bottom:2px}
.msg .who b{font-family:var(--display);font-weight:600}
.msg time{font-size:var(--fs-xs);color:var(--muted);margin-left:var(--s1)}
.av{width:32px;height:32px;border-radius:var(--r);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:10px}
.av.mpm{background:var(--brand-gradient)}
.av.mpm svg{width:20px;height:20px;fill:none;stroke:var(--on-brand);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.av.you{background:var(--ground);border:1px solid var(--line);color:var(--muted)}
.update{margin-top:var(--s2);border-left:3px solid var(--brand);background:var(--ground);
  border-radius:0 var(--r) var(--r) 0;padding:var(--s2) var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.update .tag{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;color:var(--brand-ink)}
.update b{font-family:var(--display);font-weight:600}
.ui-event{display:inline-flex;gap:var(--s1);margin-top:var(--s2);font-size:var(--fs-xs);color:var(--muted);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s1) var(--s2)}
.ui-event b{color:var(--ink)}

/* the two ways to pay */
.ui-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.ui-card{border:1px solid var(--line);border-radius:var(--r);padding:var(--s3);display:flex;flex-direction:column;
  gap:var(--s3);font-size:var(--fs-sm)}
.ui-card .tag{font-family:var(--display);font-weight:700}
.ui-card ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.ui-card .months li{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2);align-items:center;font-size:var(--fs-xs);color:var(--muted)}
.ui-card .months i{height:8px;border-radius:999px;background:var(--lilac)}
.ui-card .months b{font-family:var(--display);color:var(--ink)}
.ui-card .note{margin:0;font-size:var(--fs-xs);color:var(--muted)}
.ui-card.ink{background:var(--ink);border-color:var(--ink);color:var(--line)}
.ui-card.ink .tag{color:var(--surface)}
.ui-card.ink .note{color:var(--line)}
.ui-card .leads li{display:grid;grid-template-columns:40px 1fr auto;gap:var(--s2);align-items:center;
  font-size:var(--fs-xs);padding-bottom:var(--s2);border-bottom:1px solid color-mix(in srgb,var(--surface) 14%,transparent)}
.ui-card .leads li span:first-child{color:var(--lilac)}
.ui-card .leads b{font-family:var(--display);font-weight:600}
.ui-card .leads .ok b{color:var(--brand-on-ink)}
.ui-card .leads .no span:nth-child(2){text-decoration:line-through;color:var(--lilac)}
.ui-card .leads .no b{color:var(--lilac)}

@media(max-width:820px){
}
@media(max-width:560px){.ui-two{grid-template-columns:1fr}}

/* the enquiry form in a service page's hero (Sean, 14 October 2026) */
[data-section="hero"] .media:has(#hero-form){position:relative;padding:var(--s4) 0 0 var(--s4)}
[data-section="hero"] .media:has(#hero-form)::before{content:"";position:absolute;z-index:0;top:0;right:calc(-1*var(--s4));
  width:60%;height:70%;border-radius:calc(var(--r)*3);background:var(--brand-gradient)}
#hero-form{position:relative;z-index:1;background:var(--surface);border:0;border-radius:calc(var(--r)*2);
  padding:var(--s5);box-shadow:0 40px 70px -30px color-mix(in srgb,var(--ink) 50%,transparent),
  0 2px 6px color-mix(in srgb,var(--ink) 8%,transparent)}
#hero-form .form-title{font-family:var(--display);font-weight:700;font-size:var(--fs-h4);line-height:1.25;
  color:var(--ink);margin:0 0 var(--s4)}
#hero-form form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s3)}
#hero-form .field{margin:0}
#hero-form .field:has(textarea),#hero-form button{grid-column:1/-1}
@media(max-width:820px){
  [data-section="hero"] .media:has(#hero-form){padding:var(--s3) 0 0 0}
  [data-section="hero"] .media:has(#hero-form)::before{right:calc(-1*var(--s3))}
  #hero-form{padding:var(--s4)}
}
@media(max-width:560px){#hero-form form{grid-template-columns:1fr}}
#hero-form textarea{min-height:88px}
@media(min-width:821px){[data-section="hero"]:has(#hero-form) .copy .cta{display:none}}
.ui-two{grid-template-columns:1fr 1.35fr;align-items:start}
@media(max-width:560px){.ui-two{grid-template-columns:1fr}}
.ui-card .leads span:nth-child(2){white-space:nowrap}

/* ── the service-page scenes (14 October 2026) ── */
.ui-fig .n{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;
  background:var(--brand-ink);color:var(--on-brand);font-family:var(--display);font-weight:700;font-size:11px;
  font-style:normal;margin-right:var(--s2);vertical-align:middle;box-shadow:0 0 0 3px var(--surface)}
.ui-fig .ui-block > .n{position:absolute;top:calc(-1*var(--s2));right:calc(-1*var(--s2));margin:0;width:26px;height:26px}
[data-section="benefits"]:has([data-numbered]) ul.ticks{counter-reset:pt}
[data-section="benefits"]:has([data-numbered]) ul.ticks li{counter-increment:pt;padding-left:var(--s6)}
[data-section="benefits"]:has([data-numbered]) ul.ticks li::before{content:counter(pt);width:26px;height:26px;
  top:-1px;left:0;border:0;transform:none;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-ink);color:var(--on-brand);font-family:var(--display);font-weight:700;font-size:var(--fs-xs)}
:is(.ui-fig,.svc) .line{display:block;height:6px;border-radius:999px;background:var(--line)}
:is(.ui-fig,.svc) .line.short{width:60%}
:is(.ui-fig,.svc) .hbar{display:block;height:12px;width:70%;border-radius:999px;background:var(--ink);opacity:.85}
:is(.ui-fig,.svc) .btnx{display:inline-block;align-self:flex-start;font-family:var(--display);font-weight:600;font-size:var(--fs-xs);
  color:var(--on-brand);background:var(--brand-gradient);border-radius:var(--r-sm);padding:4px var(--s3)}
.ui-fig .field{display:block;height:18px;border:1px solid var(--line);border-radius:var(--r-sm)}
.ui-fig .pill{display:inline-block;font-size:var(--fs-xs);font-family:var(--display);font-weight:600;color:var(--ink);
  border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px var(--s2);margin:0 var(--s1) var(--s1) 0}
.ui-fig .pill.hot{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
.ui-fig .pill.new{border-color:var(--brand);color:var(--brand-ink)}
.ui-fig .tag{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.ui-scene{display:flex;flex-direction:column;gap:var(--s3)}

/* local: the profile */
.ui-block.prof .name{font-family:var(--display);font-weight:700;font-size:var(--fs-lg);color:var(--brand-ink)}
.ui-block.prof .rt,.ui-block.prof .meta{font-size:var(--fs-xs);color:var(--muted)}
.ui-block.prof .st{color:var(--warning);letter-spacing:-1px}
.ui-block .review{font-size:var(--fs-sm);color:var(--ink);background:var(--ground);border-radius:var(--r-sm);padding:var(--s2)}
.ui-block .review i{color:var(--muted);font-size:var(--fs-xs)}
.ui-block.map .ui-mapwrap{height:110px}

/* AI: the answer */
.chat-ai .ui-body{gap:var(--s3)}
.bubble{border-radius:var(--r);padding:var(--s2) var(--s3);font-size:var(--fs-sm)}
.bubble.q{align-self:flex-end;max-width:85%;background:var(--ink);color:var(--surface);border-radius:var(--r) var(--r) var(--r-sm) var(--r)}
.bubble.a{background:color-mix(in srgb,var(--brand) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);
  display:flex;flex-direction:column;gap:var(--s2)}
.bubble.a p{margin:0}
.bubble .you{color:var(--brand-ink);font-family:var(--display)}
.srcs{display:flex;flex-direction:column;gap:var(--s1)}
.srcs .s{display:flex;align-items:center;font-size:var(--fs-xs);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--s1) var(--s2)}

/* links: the article */
.article{display:flex;flex-direction:column;gap:var(--s2);position:relative}
.article .mast{font-family:Georgia,serif;font-weight:700;font-size:var(--fs-lg);border-bottom:2px solid var(--ink);padding-bottom:var(--s1)}
.article .h{font-family:Georgia,serif;font-size:var(--fs-h5);line-height:1.3}
.article p{margin:0;font-size:var(--fs-sm)}
.article .lnk{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600;
  background:color-mix(in srgb,var(--brand) 12%,transparent);border-radius:2px;padding:0 2px}
.article .tip{align-self:flex-start;display:inline-flex;align-items:center;font-size:var(--fs-xs);font-family:var(--display);
  font-weight:600;color:var(--surface);background:var(--ink);border-radius:var(--r-sm);padding:var(--s1) var(--s2)}
.article .readers{display:flex;align-items:center;font-size:var(--fs-xs);color:var(--muted)}

/* paid: the campaign table */
.ui-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.ui-table th{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;color:var(--muted);text-align:left;padding:0 0 var(--s2)}
.ui-table td{padding:var(--s2) 0;border-top:1px solid var(--line);vertical-align:middle}
.ui-table td b{display:block;font-family:var(--display);font-weight:600}
.ui-table td span:not(.pill){font-size:var(--fs-xs);color:var(--muted)}
.ui-table td:nth-child(2){font-family:var(--display);font-weight:700;width:56px}
.ui-table th:last-child,.ui-table td:last-child{text-align:right}
.ui-table tr.off td{opacity:.55}
.tags4{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.tags4 span{display:flex;align-items:center;font-size:var(--fs-xs);font-family:var(--display);font-weight:600}

/* Google: the ad and its trace */
.ui-block.ad{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)}
.ui-block.ad .url{font-size:var(--fs-xs);color:var(--muted)}
.ui-block.ad .title{font-family:var(--display);font-weight:600;color:var(--brand-ink)}
.ui-block.ad .src{display:flex;gap:var(--s2)}
.ui-block.ad .src i{font-style:normal;font-size:var(--fs-xs);border:1px solid var(--line);border-radius:999px;padding:1px var(--s2)}
.trace{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);font-size:var(--fs-xs);font-family:var(--display);font-weight:600}
.trace span{background:var(--ground);border:1px solid var(--line);border-radius:999px;padding:2px var(--s2)}
.trace i{font-style:normal;color:var(--lilac)}
.trace b{background:var(--brand-ink);color:var(--on-brand);border-radius:999px;padding:2px var(--s3)}

/* Meta: the feed */
.feed{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center}
.ui-phone.sm{width:200px;margin:0;padding:7px;border-radius:30px;position:relative}
.ui-phone.sm .ui-screen{min-height:0;border-radius:24px;padding:var(--s4) var(--s2) var(--s3);gap:var(--s2)}
.ui-phone.sm > .ui-screen > .n{position:absolute;right:-6px;bottom:var(--s5)}
.post-head{display:flex;gap:var(--s2);align-items:center;font-size:var(--fs-xs)}
.post-head b{font-family:var(--display)}
.post-head i{color:var(--muted)}
.post-head .av{width:26px;height:26px}
.creative{aspect-ratio:1;border-radius:var(--r-sm);background:var(--brand-gradient);color:var(--on-brand);
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s3);gap:2px}
.creative b{font-family:var(--display);font-size:var(--fs-h5);line-height:1.2}
.creative span{font-size:var(--fs-xs)}
.cta-bar{display:flex;justify-content:space-between;align-items:center;font-size:var(--fs-xs);color:var(--muted)}
.cta-bar b{color:var(--ink);font-family:var(--display);background:var(--ground);border-radius:var(--r-sm);padding:2px var(--s2)}
.aud{display:flex;flex-wrap:wrap;align-items:center;gap:0}
.aud .tag{flex-basis:100%;display:flex;align-items:center;margin:var(--s2) 0}

/* programmatic: the screens */
.screens{display:flex;flex-direction:column;gap:var(--s3)}
.tv{position:relative;background:var(--ink);border-radius:var(--r);padding:8px;
  box-shadow:0 18px 40px -24px color-mix(in srgb,var(--ink) 60%,transparent)}
.tv > .n{position:absolute;top:-8px;right:-8px}
.tv-screen{position:relative;aspect-ratio:16/8;border-radius:var(--r-sm);overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,color-mix(in srgb,var(--brand) 55%,var(--ink)),var(--ink))}
.tv-screen .show{position:absolute;left:var(--s3);top:var(--s2);font-size:var(--fs-xs);color:var(--line)}
.spot{position:absolute;left:var(--s3);bottom:var(--s5);display:flex;flex-direction:column;color:var(--surface)}
.spot b{font-family:var(--display);font-size:var(--fs-h4)}
.spot span{font-size:var(--fs-xs);color:var(--line)}
.adbar{position:absolute;left:var(--s3);right:var(--s3);bottom:var(--s3);height:4px;border-radius:999px;
  background:color-mix(in srgb,var(--surface) 25%,transparent)}
.adbar i{display:block;width:40%;height:100%;border-radius:999px;background:var(--warning)}
.smalls{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:var(--s2)}
.mini{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:var(--s2);display:flex;flex-direction:column;
  gap:var(--s1);font-size:var(--fs-xs);background:var(--surface)}
.mini .banner{display:block;font-family:var(--display);font-weight:700;color:var(--on-brand);
  background:var(--brand-gradient);border-radius:var(--r-sm);padding:var(--s2) var(--s2)}
.mini.track{background:var(--ink);border-color:var(--ink);color:var(--line)}
.mini.track b{color:var(--surface);font-family:var(--display)}
.mini.web > .n,.mini.track > .n{position:absolute;top:-8px;right:-8px;margin:0}

/* websites: devices, before and after, the ad and its page */
.devices{position:relative;display:flex;align-items:flex-end;gap:0;padding-right:var(--s4)}
.laptop{position:relative;flex:1}
.laptop > .n{position:absolute;top:-8px;left:-8px}
.lap-screen{background:var(--ink);border-radius:var(--r) var(--r) 0 0;padding:6px}
.lap-screen .ui-window{border-radius:var(--r-sm)}
.lap-screen .ui-body{min-height:150px;gap:var(--s2)}
.lap-base{height:10px;margin:0 -6%;border-radius:0 0 var(--r) var(--r);background:var(--lilac)}
.ui-phone.xs{width:110px;padding:5px;border-radius:20px;margin:0 0 0 calc(-1*var(--s6));position:relative;z-index:2}
.ui-phone.xs .ui-screen{min-height:0;border-radius:16px;padding:var(--s3) var(--s2) var(--s2);gap:var(--s1)}
.ui-phone.xs .ui-screen::before{width:40px;height:4px;margin:-8px 0 2px}
.ui-phone.xs > .n{position:absolute;top:-8px;right:-8px;margin:0}
.crm{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);background:var(--ink);color:var(--line);
  border-radius:var(--r);padding:var(--s3);font-size:var(--fs-xs)}
.crm .tag{color:var(--line);flex-basis:calc(100% - 40px)}
.crm b{color:var(--surface);font-family:var(--display);font-size:var(--fs-sm);flex-basis:100%}
.ba{display:grid;grid-template-columns:.85fr 1fr;gap:var(--s3);align-items:end}
.ba .old{position:relative;filter:grayscale(1);opacity:.75}
.ba .old .ui-body{gap:var(--s1)}
.ba .tiny{font-family:Georgia,serif;font-size:10px;color:var(--muted)}
.ba .badge{display:inline-block;margin-top:var(--s2);font-size:var(--fs-xs);font-family:var(--display);font-weight:600;color:var(--muted)}
.ba .new .ui-body{gap:var(--s2);min-height:150px}
.ba .chips{display:flex;flex-direction:column;gap:var(--s1);margin-top:var(--s2)}
.ba .chips span{display:flex;align-items:center;font-size:var(--fs-xs);font-family:var(--display);font-weight:600}
.match{display:flex;flex-direction:column;gap:var(--s2);position:relative}
.ui-block.ad.sm{gap:var(--s1);width:80%}
.match .to{font-style:normal;color:var(--lilac);font-size:var(--fs-lg);padding-left:var(--s5)}
.match .ui-body{position:relative;gap:var(--s2);padding:var(--s4)}
.lp-h{font-family:var(--display);font-weight:700;font-size:var(--fs-h5);color:var(--ink)}
.match .ui-body .n{position:absolute;right:var(--s3)}
.match .ui-body .n:first-of-type{top:var(--s4)}
.match .ui-body .n:last-of-type{bottom:var(--s4)}
.count{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-sm)}
.count b{font-family:var(--display);font-size:var(--fs-h4)}
.count span{color:var(--muted)}

/* link budget */
.linkbudget ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:var(--s3)}
.linkbudget li{display:grid;grid-template-columns:70px 1fr;align-items:center;font-size:var(--fs-xs);color:var(--muted)}
.dots{display:flex;gap:var(--s2);align-items:center}
.dots i,.legend i{display:inline-block;border-radius:50%;background:var(--lilac)}
.d1{width:12px;height:12px;opacity:.6}
.d2{width:18px;height:18px;background:var(--brand-gradient)!important;opacity:.6}
.d3{width:26px;height:26px;background:var(--brand-ink)!important}
.legend{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs-xs);color:var(--muted);flex-wrap:wrap}
.legend i{margin-left:var(--s2)}
/* scope */
.scope{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s2)}
.scope .tree{list-style:none;margin:0;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--fs-xs)}
.scope .tree li{border:1px solid var(--line);border-radius:var(--r-sm);padding:2px var(--s2);font-family:var(--display);font-weight:600}
.scope .tree li.sub{margin-left:var(--s3);font-weight:400;color:var(--muted)}
.scope .sw{display:flex;gap:4px}
.scope .sw i{width:22px;height:22px;border-radius:var(--r-sm);background:var(--ink)}
.scope .sw i:nth-child(2){background:var(--brand-gradient)}
.scope .sw i:nth-child(3){background:var(--lilac)}
.scope .sw i:nth-child(4){background:var(--ground);border:1px solid var(--line)}
.scope .aa{font-family:var(--display);font-weight:700;font-size:var(--fs-h3);line-height:1}
.scope .ink .pill{background:transparent;color:var(--surface);border-color:color-mix(in srgb,var(--surface) 30%,transparent)}
@media(max-width:560px){
  .feed{grid-template-columns:1fr;justify-items:center}
  .smalls{grid-template-columns:1fr 1fr}
  .mini.track{grid-column:1/-1}
  .ba{grid-template-columns:1fr}
  .scope{grid-template-columns:1fr}
  .tags4{grid-template-columns:1fr}
}
.ui-block.map .ui-pinlabel{top:2%}
.cta-bar b{white-space:nowrap}
.trace .up{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
.trace .off{color:var(--muted);text-decoration:line-through}
.article .mast{display:flex;align-items:center}
.ba .chips{padding-left:var(--s1)}

/* ── home hero: what we do, as the customer sees it (Sean, 14 October 2026) ── */
.ui-phone{position:relative;z-index:1;width:300px;padding:10px;border-radius:40px;background:var(--ink);
  box-shadow:0 40px 70px -30px color-mix(in srgb,var(--ink) 60%,transparent)}
.ui-screen{border-radius:31px;background:var(--surface);padding:var(--s5) var(--s3) var(--s4);
  display:flex;flex-direction:column;gap:var(--s3)}
.ui-screen::before{content:"";align-self:center;width:84px;height:6px;border-radius:999px;
  background:var(--line);margin:-12px 0 var(--s1)}
.hero-visual.is-home{min-height:600px;padding:0;display:flow-root}
.hero-visual.is-home::before{top:5%;right:-10%;width:auto;height:auto;left:0;bottom:0;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 26%,transparent),transparent);filter:blur(8px)}
.svc{position:absolute;z-index:1}
.svc-label{position:absolute;z-index:3;top:-11px;left:var(--s3);font-family:var(--display);font-weight:700;
  font-size:var(--fs-xs);color:var(--on-brand);background:var(--brand-ink);border-radius:999px;padding:2px var(--s3);
  box-shadow:0 0 0 3px var(--ground);white-space:nowrap}
.svc .ui-window,.svc .ui-block,.svc .post{background:var(--surface);
  box-shadow:0 24px 48px -22px color-mix(in srgb,var(--ink) 45%,transparent)}
.svc-web{right:calc(-1*var(--s4));top:40px;width:300px}
.svc-web .svc-label{left:auto;right:var(--s3)}
.svc-web .ui-body{gap:var(--s2);min-height:200px;padding-left:22%}
.svc-web .pic{display:block;flex:1;min-height:60px;border-radius:var(--r-sm);
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 30%,var(--ground)),var(--ground))}
.svc-google{left:calc(-1*var(--s7));top:0;width:240px;z-index:3}
.svc-google .ui-block{gap:var(--s1)}
.svc-google .title{font-family:var(--display);font-weight:600;color:var(--brand-ink);line-height:1.3}
.svc-phone{position:relative;z-index:2;width:240px;margin:150px 0 0 70px}
.svc-phone .ui-phone{width:240px}
.svc-phone .ui-screen{min-height:400px}
.svc-phone .ui-mapwrap{height:130px}
.svc-phone .svc-label{left:auto;right:var(--s5);top:-11px}
.svc-fb{left:calc(-1*var(--s7));top:380px;width:160px;z-index:3}
.post{border-radius:var(--r);padding:var(--s4) var(--s2) var(--s2);display:flex;flex-direction:column;gap:var(--s2)}
.post .creative{aspect-ratio:4/3;padding:var(--s2)}
.post .creative b{font-size:var(--fs-sm)}
.hero-visual.is-home .panel-toast{right:calc(-1*var(--s4));top:410px;bottom:auto;z-index:3}
@media(max-width:820px){
  .hero-visual.is-home{min-height:0;padding-top:var(--s3);display:flex;flex-direction:column;align-items:center}
  .svc-web,.svc-fb,.hero-visual.is-home .panel-toast{display:none}
  .svc-phone{order:1;margin:0}
  .svc-google{order:2;position:relative;left:auto;top:auto;width:calc(100% - var(--s5));margin-top:-48px}
}

/* ── About: inside your tools, and the loop (14 October 2026) ── */
.hero-visual.is-about{min-height:520px;padding:0;display:flow-root}
.hero-visual.is-about::before{top:5%;right:-10%;width:auto;height:auto;left:0;bottom:0;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand) 26%,transparent),transparent);filter:blur(8px)}
.ab-slack{left:calc(-1*var(--s5));top:var(--s4);width:340px;z-index:2}
.ab-crm{right:calc(-1*var(--s4));top:210px;width:280px;z-index:1}
.ab-access{left:0;top:340px;width:270px;z-index:3}
.crm-rows{list-style:none;margin:0;display:flex;flex-direction:column;font-size:var(--fs-sm)}
.crm-rows li{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:var(--s2) 0;border-top:1px solid var(--line)}
.crm-rows li:first-child{border-top:0}
.crm-rows b{font-family:var(--display);font-weight:600}
.svc .pill{display:inline-block;font-size:var(--fs-xs);font-family:var(--display);font-weight:600;color:var(--ink);
  border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:2px var(--s2)}
.svc .pill.hot{background:var(--brand-ink);border-color:var(--brand-ink);color:var(--on-brand)}
.svc .update p{margin:0;font-size:var(--fs-sm)}
@media(max-width:820px){
  .hero-visual.is-about{min-height:0;display:flex;flex-direction:column;gap:var(--s5);padding-top:var(--s3)}
  .ab-slack,.ab-crm,.ab-access{position:relative;left:auto;right:auto;top:auto;width:auto}
  .ab-crm{display:none}
}
.is-about .svc-label{left:auto;right:var(--s3)}
.ab-slack{width:310px}
.ab-crm{top:180px;width:270px}
.ab-access{top:360px;width:250px}

/* ── case study library: filters, then large image cards (Sean, 14 October 2026) ── */
.filters{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin:var(--s5) 0 var(--s6)}
.fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.flabel{font-family:var(--display);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-right:var(--s2)}
.filters .chip{font:600 var(--fs-sm)/1 var(--display);min-height:44px;padding:0 var(--s4);border-radius:999px;cursor:pointer;
  background:transparent;color:var(--ink);border:1px solid var(--line);transition:background var(--fast),color var(--fast),border-color var(--fast)}
.filters .chip:hover{border-color:var(--brand)}
.filters .chip[aria-pressed="true"]{background:var(--brand-gradient);border-color:transparent;color:var(--on-brand)}
.filters .chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
section[data-tone="dark"] .flabel{color:var(--line)}
section[data-tone="dark"] .filters .chip{color:var(--surface);border-color:color-mix(in srgb,var(--surface) 30%,transparent)}
section[data-tone="dark"] .filters .chip[aria-pressed="true"]{color:var(--on-brand)}

#case-list li.case-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
#case-list li.case-card[hidden]{display:none}
.case-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.case-img{position:relative;display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;
  background:radial-gradient(90% 80% at 25% 20%,color-mix(in srgb,var(--brand) 55%,var(--ink)),var(--ink));
  transition:transform var(--base) var(--ease)}
.case-img span{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);color:var(--surface);letter-spacing:-.01em}
.case-link:hover .case-img{transform:scale(1.02)}
.case-body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5)}
.case-body .tags{display:flex;gap:var(--s2);flex-wrap:wrap;margin:0}
.case-body strong{font-family:var(--display);font-size:var(--fs-h3);line-height:1.15}
.case-body .line{color:var(--muted)}
.case-body .result{font-family:var(--display);font-weight:700;font-size:var(--fs-lg);
  background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.case-body .more{display:inline-flex;align-items:center;gap:var(--s2);margin-top:var(--s2);font-family:var(--display);font-weight:600;color:var(--brand-ink)}
.case-body .more svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
section[data-tone="dark"] .case-body .line{color:var(--line)}
section[data-tone="dark"] .case-body strong{color:var(--surface)}
section[data-tone="dark"] .case-body .more{color:var(--brand-on-ink)}
section[data-tone="dark"] .case-body .result{background:none;color:var(--surface)}
#case-list li.case-card.pending{padding:var(--s6);justify-content:center}
#case-list li.case-card{align-items:stretch;text-align:left;gap:0}
#case-list li.case-card > .case-link{width:100%}
#case-list .case-body strong{font-family:var(--display);font-size:var(--fs-h3);line-height:1.15;margin:0}
#case-list .case-body > span{margin:0}
#case-list a.case-link{display:flex;flex-direction:column;align-items:stretch;margin:0;min-height:0;
  font:inherit;color:inherit;text-decoration:none}

/* ── About hero: the heartbeat runs into the mark (variant B, chosen 15 October 2026) ── */
/* B: the pulse runs into the mark */
.pulse-stage{position:relative;display:grid;place-items:center;min-height:440px}
.pulse-run{position:absolute;left:-35%;right:50%;top:50%;width:85%;height:100px;transform:translateY(-50%);
  stroke:var(--brand);opacity:.55;overflow:visible}
.pulse-run path{stroke-dasharray:1;stroke-dashoffset:0;animation:draw 1600ms var(--ease) both}
.big-mark{position:relative;z-index:1;width:300px;height:300px;
  filter:drop-shadow(0 30px 50px color-mix(in srgb,var(--brand) 40%,transparent))}
.big-mark .pl{stroke:var(--surface);stroke-dasharray:1;animation:draw 1200ms 900ms var(--ease) both}
.big-mark .disc{transform-origin:50% 50%;animation:pop 700ms 700ms var(--ease) both}
.echo{position:absolute;width:300px;height:300px;border-radius:50%;border:2px solid var(--brand);
  animation:echo 1800ms 1700ms var(--ease) both;opacity:0}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes echo{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .pulse-run path,.big-mark .pl,.big-mark .disc,.echo{animation:none}
}
@media(max-width:820px){
  .pulse-stage{min-height:300px}
  .big-mark,.echo{width:200px;height:200px}
  .pulse-run{left:-10%;width:60%}
}
@media(max-width:820px){.hero-visual.is-about::before,.hero-visual.is-home::before{right:0}}

/* ══ THE SURFACE, approved 15 October 2026 ══════════════════════════════════════════════
   Life from structure, not from effects (rules.md; estatehub.io is the reference). Approved
   by the client on a sample of the home page. It supersedes the effects above it: the
   gradient stays in the logo, the H1 carries the one coloured phrase, dark moments are
   slabs, cards are flat, and the logo's heartbeat is the signature. */

/* the one coloured phrase, solid */
.accent{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--brand)}
h1,h2{letter-spacing:-.025em}

/* no glass, no glow, no grid */
.hd{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--line)}
[data-section="hero"]::before,.hero-visual::before,section[data-tone="dark"]::before,
[data-section="hero"] .media:has(#hero-form)::before{display:none}
.big-mark{filter:none}

/* the signature: the logo's heartbeat as a quiet rule under every opening */
[data-section="hero"]{padding-bottom:var(--s8)}
[data-section="hero"]::after{inset:auto 0 var(--s5) 0;margin:0 auto;width:min(var(--container),calc(100% - 2*var(--s4)));
  height:28px;background:var(--lilac);background-image:none;opacity:.55;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1180 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14H556L562 14L567 9L572 17L578 3L585 25L592 6L599 20L604 14H1180' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1180 28' preserveAspectRatio='none'%3E%3Cpath d='M0 14H556L562 14L567 9L572 17L578 3L585 25L592 6L599 20L604 14H1180' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* dark moments are slabs laid on the page, the mark above the heading */
section[data-tone="dark"],[data-section="cta"][data-layout="band"]{background:var(--ink);
  margin:var(--s5) var(--s3);border-radius:20px}
section[data-tone="dark"] h2::before,[data-section="cta"] h2::before{content:"";display:block;width:36px;height:36px;
  margin:0 0 var(--s4);background:url(../assets/logos/MPM-Mark-Icon.svg) center/contain no-repeat}
[data-section="cta"] h2::before,section[data-tone="dark"][data-layout="band"] h2::before{margin:0 auto var(--s4)}
[data-section="cta"] h2{color:var(--surface)}
[data-section="cta"] p{color:var(--line)}
[data-section="cta"] .btn--primary{background:var(--brand-gradient);color:var(--on-brand)}
[data-section="cta"] .btn--primary:hover{background:linear-gradient(color-mix(in srgb,var(--ink) 14%,transparent),color-mix(in srgb,var(--ink) 14%,transparent)),var(--brand-gradient)}
section[data-tone="dark"]:is([data-layout="grid"],[data-layout="carousel"],[data-layout="pair"]) ul > li,
section[data-tone="dark"] :is([role="tabpanel"],.tabpanel-one){background:color-mix(in srgb,var(--surface) 5%,var(--ink));
  border:1px solid color-mix(in srgb,var(--surface) 10%,transparent);box-shadow:none}
section[data-tone="dark"] p.result-big{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--brand-on-ink);-webkit-text-fill-color:var(--brand-on-ink)}
@media(max-width:820px){section[data-tone="dark"],[data-section="cta"][data-layout="band"]{margin:var(--s4) var(--s2);border-radius:16px}}

/* cards: one radius, a hairline, almost no shadow, and they stay put */
[data-layout="grid"] li,[data-layout="carousel"] li,[data-layout="pair"] li,.fig{border-radius:var(--r);
  border:1px solid var(--line);box-shadow:0 .5px 1px color-mix(in srgb,var(--ink) 10%,transparent)}
[data-layout="pair"] li:last-child{box-shadow:none}
[data-layout="grid"] .ico{background:var(--ground);border:1px solid var(--line);color:var(--brand-ink)}
.ui-fig{border:1px solid var(--line)}
.ui-window,.svc .ui-window,.svc .ui-block,.svc .post,.panel{box-shadow:0 .5px 1px color-mix(in srgb,var(--ink) 12%,transparent),
  0 10px 24px -18px color-mix(in srgb,var(--ink) 40%,transparent)}
.ui-phone{box-shadow:0 20px 40px -28px color-mix(in srgb,var(--ink) 60%,transparent)}
.ui-block.map,.ui-block.ad{box-shadow:none}
.panel-toast .dot{box-shadow:none}
#hero-form{box-shadow:0 .5px 1px color-mix(in srgb,var(--ink) 12%,transparent),0 18px 40px -28px color-mix(in srgb,var(--ink) 45%,transparent);
  border:1px solid var(--line)}
[data-section="hero"] .media:has(#hero-form){padding:0}
.case-img{background:var(--ink)}
.svc-web .pic{background:color-mix(in srgb,var(--brand) 16%,var(--ground))}

/* numbers and marks are type, not decoration */
[data-section="benefits"][data-layout="grid"] li::before,[data-layout="carousel"] li::before{background:none;
  -webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  color:var(--lilac);font-size:var(--fs-h5)}
[data-layout="timeline"] ol::before{background:var(--line)}
[data-section^="process"][data-layout="timeline"] ol > li::before{box-shadow:0 0 0 6px var(--ground)}
.ex{border:0;padding:0;margin-left:var(--s2);text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--muted)}
.monitor-head .ex,.panel .example{border:0;padding:0}
.svc-label{background:none;color:var(--muted);box-shadow:none;padding:0;top:-22px;left:2px;
  text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.svc-web .svc-label,.svc-phone .svc-label,.is-about .svc-label{left:auto;right:2px}

/* the page closes light: the last dark thing is the call-to-action slab */
.ft{background:var(--ground);color:var(--ink);border-top:0}
.ft h3,.ft a{color:var(--ink)}
.ft li,.ft p,.ft .tag{color:var(--muted)}
.ft .fine{border-top-color:var(--line);color:var(--muted)}

/* ══ ROUND 2, the home page at desktop (Sean, 15 October 2026) ═════════════════════════ */

/* More room: between Adspace's 1320px and EstateHub's 1424px content widths. The house
   generator sets 1180px for every client; this client overrides it here, on purpose. */
:root{--container:1360px}
@media(min-width:821px){.wrap{padding:0 var(--s5)}}

/* Texture: the logo's pulse, without its circle, repeated very faintly on the light ground. */
[data-section="hero"]{background:transparent}
body{position:relative;isolation:isolate}
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:color-mix(in srgb,var(--line) 55%,var(--ground));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='110'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(18 18)' d='M0 10H10L12 8L14 11L17 4L20 15L24 0L28 20L31 6L34 13L37 10H48'/%3E%3Cpath transform='translate(118 72)' d='M0 10H10L12 8L14 11L17 4L20 15L24 0L28 20L31 6L34 13L37 10H48'/%3E%3C/g%3E%3C/svg%3E") 0 0/200px 110px repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='110'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='translate(18 18)' d='M0 10H10L12 8L14 11L17 4L20 15L24 0L28 20L31 6L34 13L37 10H48'/%3E%3Cpath transform='translate(118 72)' d='M0 10H10L12 8L14 11L17 4L20 15L24 0L28 20L31 6L34 13L37 10H48'/%3E%3C/g%3E%3C/svg%3E") 0 0/200px 110px repeat}

/* The heartbeat rule under the opening draws itself across: the page's one entrance moment. */
@keyframes rule-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
[data-section="hero"]::after{animation:rule-in 1100ms 150ms var(--ease) both}
@media(prefers-reduced-motion:reduce){[data-section="hero"]::after{animation:none}}

/* Buttons in a section are bigger; the hero's is the biggest. The header's stays compact. */
section .btn{min-height:50px;padding:0 var(--s5);font-size:var(--fs-md)}
[data-section="hero"] .btn{min-height:56px;padding:0 var(--s6);font-size:var(--fs-lg)}

/* Benefit cards: a real icon, the number in the corner, a centred last row. */
[data-section="benefits"][data-layout="grid"] ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4)}
[data-section="benefits"][data-layout="grid"][data-cols="3"] li{flex:0 1 calc((100% - 2*var(--s4))/3)}
[data-section="benefits"][data-layout="grid"][data-cols="2"] li{flex:0 1 calc((100% - var(--s4))/2)}
[data-section="benefits"][data-layout="grid"] li{position:relative;padding:var(--s6) var(--s5)}
section:not([data-tone="dark"])[data-section="benefits"][data-layout="grid"] li{background:var(--surface)}
[data-section="benefits"][data-layout="grid"] .ico{display:grid;place-items:center;width:52px;height:52px;
  border-radius:12px;border:0;margin-bottom:var(--s4);background:var(--brand-gradient);
  color:var(--on-brand)}
section[data-tone="dark"][data-section="benefits"] .ico{background:var(--brand-gradient);color:var(--on-brand)}
[data-section="benefits"][data-layout="grid"] .ico svg{width:24px;height:24px}
[data-section="benefits"][data-layout="grid"] li::before{position:absolute;top:var(--s5);right:var(--s5);margin:0;
  font-size:var(--fs-sm)}
[data-section="benefits"][data-layout="grid"] li strong{font-size:var(--fs-h4)}
@media(max-width:820px){[data-section="benefits"][data-layout="grid"] li{flex-basis:100%!important}}

/* Pricing: the pay-per-lead card is ink alone; the small print is one strip; the button leads. */
[data-layout="pair"] li:last-child{border-color:var(--ink);
  box-shadow:0 24px 48px -28px color-mix(in srgb,var(--ink) 70%,transparent)}
.price-notes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:var(--s5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r)}
.pn{display:flex;gap:var(--s3);align-items:flex-start;padding:var(--s5)}
.pn + .pn{border-left:1px solid var(--line)}
.pn .ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:color-mix(in srgb,var(--brand) 10%,var(--surface));color:var(--brand-ink)}
.pn .ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.pn b{display:block;font-family:var(--display);font-weight:600;color:var(--ink);margin-bottom:2px}
.pn span{font-size:var(--fs-sm);color:var(--muted)}
[data-section="pricing"] .cta{justify-content:center;margin-top:var(--s6)}
@media(max-width:820px){.price-notes{grid-template-columns:1fr}.pn + .pn{border-left:0;border-top:1px solid var(--line)}}

/* The technology: the agents at work, the account manager deciding. */
[data-section="text-2"] .fig.agents{padding:var(--s4);font-size:var(--fs-sm);background:var(--surface)}
.agents .ag-list{list-style:none;margin:0;display:flex;flex-direction:column}
.agents .ag-list li{display:grid;grid-template-columns:36px 1fr auto;gap:var(--s3);align-items:center;
  padding:var(--s3) 0;border-top:1px solid var(--line)}
.agents .ag-list li:first-child{border-top:0;padding-top:0}
.ag-ico{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--ground);color:var(--ink)}
.ag-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-t b{display:block;font-family:var(--display);font-weight:600}
.ag-t span{font-size:var(--fs-xs);color:var(--muted)}
.ag-s{font-family:var(--display);font-weight:600;font-size:var(--fs-xs);padding:2px var(--s2);border-radius:999px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.ag-s.done{color:var(--success);border-color:color-mix(in srgb,var(--success) 35%,transparent)}
.ag-s.run{color:var(--brand-ink);border-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.ag-run{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--fs-xs);color:var(--muted);
  background:var(--ground);border-radius:var(--r-sm);padding:var(--s2) var(--s3)}
.ag-run i{display:block;height:6px;border-radius:999px;background:var(--line)}
.ag-run b{display:block;height:100%;border-radius:999px;background:var(--brand-gradient)}
.ag-hand{display:grid;grid-template-columns:32px 1fr auto;gap:var(--s3);align-items:center;margin-top:var(--s3);
  background:var(--ink);color:var(--line);border-radius:var(--r);padding:var(--s3) var(--s4)}
.ag-hand b{display:block;color:var(--surface);font-family:var(--display)}
.ag-hand div > span{font-size:var(--fs-xs)}
.ag-ok{font-family:var(--display);font-weight:700;font-size:var(--fs-xs);color:var(--on-brand);background:var(--brand-gradient);
  border-radius:999px;padding:2px var(--s3)}

/* the hero's screens stay inside the wider container */
.hero-visual.is-home{margin-right:0}
.svc-web{right:0}
.hero-visual.is-home .panel-toast{right:0}
.svc-google .ui-block.ad{border-color:var(--line)}

/* the hero screens' labels: a solid pill on the card's top edge, so the texture never runs through them */
.svc-label{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;
  padding:3px var(--s2) 2px;top:-12px;left:var(--s3);box-shadow:0 4px 10px -6px color-mix(in srgb,var(--ink) 35%,transparent)}
.svc-web .svc-label,.svc-phone .svc-label,.is-about .svc-label{left:auto;right:var(--s3)}
.hero-visual.is-home .svc-phone .svc-label{left:var(--s3);right:auto}

/* ---- round 3, 15 October 2026 -------------------------------------------------------- */
/* No white bands (trialled on home, approved 15 October 2026). The page is the textured ground; white is for what
   you read or tap (header, cards, panels, footer). */
:is([data-section^="process"],[data-section="faq"],[data-section^="faq-"],[data-section="projects"]):not([data-tone="dark"]){background:transparent;border:0}
.keepup li{background:var(--surface)}
.ft{background:var(--surface);border-top:1px solid var(--line)}

/* a service's arrow sits at the row's right edge, so every arrow lines up */
.sublist li > strong{display:block}
.sublist li > strong a{display:flex;justify-content:space-between;align-items:center;gap:var(--s3)}
.sublist li > strong svg{flex:none}

/* tabs: on a phone, one row of equal segments */
.t-short{display:none}
@media(max-width:820px){
  [data-layout="tabs"] :is([role="tablist"],.tablist-one){display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    width:100%;border-radius:999px;flex-wrap:nowrap}
  [data-layout="tabs"] :is([role="tab"],.tab-one){border-radius:999px;padding:var(--s1) var(--s2);
    line-height:1.2;text-align:center;min-height:44px}
  .t-long{display:none}
  .t-short{display:inline}
}

/* the phone menu: three service groups, each led by its overview page */
.menu{background:var(--ground);padding:var(--s4) 0 var(--s5)}
.menu .wrap{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3);text-align:left}
.menu ul{list-style:none;margin:0;padding:0}
.menu a{border-bottom:0;justify-content:flex-start;text-align:left;min-height:44px}
.m-grp,.m-company{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:0 var(--s4)}
.menu .m-parent{justify-content:space-between;font-size:var(--fs-lg);font-weight:700;
  min-height:56px;border-bottom:1px solid var(--line)}
.m-parent svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--brand-ink);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.m-grp ul{padding:var(--s2) 0}
.m-grp li a{font-family:var(--body);font-weight:500;font-size:var(--fs-md);color:var(--muted)}
.m-company li + li a{border-top:1px solid var(--line)}
.menu .btn{margin-top:0;justify-content:center;min-height:52px}
.menu .m-company{padding:0 var(--s4)}
.menu a.btn{color:var(--on-brand)}

/* testimonials: Google reviews in a rail, the third card peeking so it reads as more to come */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
[data-section="testimonials"] .tm-rail{align-items:stretch;padding-bottom:var(--s3)}
[data-section="testimonials"] li.tm{flex:0 0 440px;display:flex;padding:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);font-size:var(--fs-md)}
.tm figure{margin:0;padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);width:100%}
.tm-stars{display:flex;align-items:center;justify-content:space-between;margin:0;color:var(--brand)}
.tm-stars svg{width:16px;height:16px;fill:currentColor}
.tm-src{font-size:var(--fs-xs);color:var(--muted);letter-spacing:.04em}
.tm blockquote{margin:0;color:var(--ink);line-height:1.6;flex:1}
.tm blockquote p + p{margin-top:var(--s2)}
.tm figcaption{display:flex;flex-direction:column;padding-top:var(--s3);border-top:1px solid var(--line)}
.tm figcaption b{font-family:var(--display);font-size:var(--fs-md);color:var(--ink)}
.tm figcaption span{font-size:var(--fs-sm);color:var(--muted)}
@media(max-width:560px){[data-section="testimonials"] li.tm{flex:0 0 86%}
  .tm figure{padding:var(--s4)}}

/* The FAQ's questions sit in a white panel like the services panel */
[data-section="faq"] .acc{background:var(--surface);border:1px solid var(--line);
  border-radius:calc(var(--r)*2);padding:var(--s2) var(--s6);
  box-shadow:0 24px 48px -32px color-mix(in srgb,var(--ink) 30%,transparent)}
[data-section="faq"] details:last-child{border-bottom:0}
@media(max-width:820px){[data-section="faq"] .acc{padding:var(--s1) var(--s4)}}
@media(min-width:821px){[data-section="testimonials"] li.tm{flex:0 0 calc((100% - 2*var(--s4))/3)}}
.rail-btns[hidden]{display:none}
[data-layout="carousel"] .rail-head:has(.rail-btns[hidden]){margin-top:0}
[data-section="testimonials"] li.tm{position:relative}
@media(max-width:560px){[data-section="testimonials"] .tm-rail{align-items:flex-start}}
[data-section="faq"] .wrap{max-width:var(--container)}

/* ---- the hero's one moment, approved 15 October 2026 -------------------------------------
   A light runs the divider and its pulse (the logo's own), and as it finishes, the call lands:
   the "New call" card's pulse draws and rings twice. site.js builds the divider; without it
   (or with reduced motion) the static ::after divider stays. */
[data-section="hero"].has-rule::after{display:none}
.hero-rule{position:absolute;left:0;right:0;bottom:var(--s5);margin:0 auto;height:28px;
  width:min(var(--container),calc(100% - 2*var(--s4)));overflow:visible;pointer-events:none}
.hero-rule path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hero-rule .track{stroke:var(--lilac);opacity:.55;stroke-width:1.5}
.hero-rule .tail{stroke:var(--brand);stroke-width:2;opacity:.28}
.hero-rule .head{stroke:var(--brand);stroke-width:2.5}
.panel-toast .call-pulse{width:18px;height:12px;flex:none;overflow:visible}
.hero-visual.is-home .panel-toast{gap:var(--s2)}
.call-pulse path{fill:none;stroke:var(--brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:50;stroke-dashoffset:0}
.call-wait .call-pulse path{stroke-dashoffset:50}
.call-wait.is-beat .call-pulse path{animation:call-draw 700ms var(--ease) forwards}
@keyframes call-draw{from{stroke-dashoffset:50}to{stroke-dashoffset:0}}
.call-wait.is-beat{animation:call-ring 1400ms 450ms var(--ease) 2}
@keyframes call-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 35%,transparent)}
  100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--brand) 0%,transparent)}}

/* ---- the gradient is back, 15 October 2026 (client) -----------------------------------------
   Every pink fill carries --brand-gradient; hover darkens it rather than swapping to flat. Large
   type carries it too: the H1's phrase and the big result figures, where both stops clear 3:1.
   Small pink text stays solid --brand-ink, because both stops fall short of 4.5:1 there. */
.accent{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
section[data-tone="dark"] p.result-big{background:var(--brand-gradient);-webkit-background-clip:text;
  background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* How we work: each step sits in a white box, its number on the line beside the title (client, 15 October 2026) */
[data-section^="process"][data-layout="timeline"] ol > li{isolation:isolate;
  padding:var(--s5) calc(var(--s7) + var(--s5)) calc(var(--s6) + var(--s5)) var(--s5)}
[data-section^="process"][data-layout="timeline"] ol > li:nth-child(even){
  padding:var(--s5) var(--s5) calc(var(--s6) + var(--s5)) calc(var(--s7) + var(--s5))}
[data-section^="process"][data-layout="timeline"] ol > li::after{content:"";position:absolute;z-index:-1;
  inset:0 var(--s7) var(--s6) 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 .5px 1px color-mix(in srgb,var(--ink) 10%,transparent)}
[data-section^="process"][data-layout="timeline"] ol > li:nth-child(even)::after{inset:0 0 var(--s6) var(--s7)}
[data-section^="process"][data-layout="timeline"] ol > li::before{top:var(--s5)}
[data-section^="process"][data-layout="timeline"] ol > li b{display:block;margin-bottom:var(--s2)}
@media(max-width:820px){
  [data-section^="process"][data-layout="timeline"] ol > li,
  [data-section^="process"][data-layout="timeline"] ol > li:nth-child(even){
    padding:var(--s4) var(--s4) calc(var(--s4) + var(--s4)) calc(40px + var(--s3) + var(--s4))}
  [data-section^="process"][data-layout="timeline"] ol > li::after,
  [data-section^="process"][data-layout="timeline"] ol > li:nth-child(even)::after{inset:0 0 var(--s4) calc(40px + var(--s3))}
  [data-section^="process"][data-layout="timeline"] ol > li::before{top:var(--s4)}
}

/* Every card icon matches "Why choose us": a gradient tile, white symbol (client, 15 October 2026) */
.pn .ico,[data-layout="grid"] .ico{background:var(--brand-gradient);border:0;color:var(--on-brand);border-radius:12px}
.pn .ico{width:44px;height:44px}

/* Result headlines are white; only the figure carries the gradient, like the H1 (client, 16 October 2026).
   The library card's result is set at h4 so its gradient figure counts as large text on the slab. */
section[data-tone="dark"] p.result-big,.case-body .result{background:none;-webkit-background-clip:border-box;
  background-clip:border-box;color:var(--surface);-webkit-text-fill-color:currentColor}
.case-body .result{font-size:var(--fs-h4);line-height:1.2}

/* What's included: cards built like "Why choose us", with a gradient icon, an h4 title, no hover;
   3 across with a short last row centred, 2 across when there are 2 or 4 (client, 16 October 2026) */
[data-section="text"][data-layout="grid"] ul{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s4)}
[data-section="text"][data-layout="grid"] ul > li{flex:0 1 calc((100% - 2*var(--s4))/3);display:flex;
  flex-direction:column;align-items:flex-start;text-align:left;padding:var(--s6) var(--s5);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:0 .5px 1px color-mix(in srgb,var(--ink) 10%,transparent)}
[data-section="text"][data-layout="grid"] ul:has(> li:nth-child(2):last-child) > li,
[data-section="text"][data-layout="grid"] ul:has(> li:nth-child(4):last-child) > li{flex-basis:calc((100% - var(--s4))/2)}
[data-section="text"][data-layout="grid"] .ico{display:grid;place-items:center;width:52px;height:52px;flex:none;
  border-radius:12px;border:0;margin:0 0 var(--s4);background:var(--brand-gradient);color:var(--on-brand)}
[data-section="text"][data-layout="grid"] .ico svg{width:24px;height:24px}
[data-section="text"][data-layout="grid"] li > strong,[data-section="text"][data-layout="grid"] li > strong a{
  display:block;font-family:var(--display);font-weight:700;font-size:var(--fs-h4);line-height:1.25;
  color:var(--ink);text-decoration:none;margin-bottom:var(--s2)}
[data-section="text"][data-layout="grid"] li > strong a:hover{color:var(--brand-ink)}
[data-section="text"][data-layout="grid"] li > :is(p,span){display:block;color:var(--muted);margin:0}
[data-section="text"][data-layout="grid"] li > span + span,[data-section="text"][data-layout="grid"] li > p + span{margin-top:var(--s2)}
[data-section="text"][data-layout="grid"] li > .more{margin-top:auto;padding-top:var(--s5)}
@media(max-width:820px){[data-section="text"][data-layout="grid"] ul > li{flex-basis:100%!important}}

/* the enquiry form: first and last name share a row (client, 16 October 2026) */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.field-row .field{min-width:0}
label .opt{font-weight:400;color:var(--muted)}
@media(max-width:359px){.field-row{grid-template-columns:1fr}}
/* in the hero's two-column form the names join its grid: first | last, business | website, then email */
#hero-form .field-row{display:contents}
#hero-form .field:has(input[type="email"]){grid-column:1/-1}
@media(max-width:560px){#hero-form .field-row{display:grid}}
.form-card form > .field-row{margin-bottom:0}
#hero-form form > .field-row{margin-bottom:0}

/* Design & development scene, redrawn 16 October 2026: three devices at their own proportions
   (the screens hold an aspect ratio, so the row fills the box without stretching), then the CRM
   lead and a design test side by side. */
.dev3{display:flex;align-items:flex-end;gap:var(--s3);padding:var(--s3) var(--s2) 0}
.dv{position:relative;min-width:0}
.dv-lap{flex:5.6 1 0}
.dv-tab{flex:2.1 1 0}
.dv-ph{flex:1.15 1 0}
.dv > .n{position:absolute;z-index:2;top:-10px;left:-10px}
.dv-ph > .n{left:auto;right:-10px}
.dv-screen{position:relative;background:var(--ink);padding:5px;border-radius:10px}
.dv-lap .dv-screen{aspect-ratio:16/10;border-radius:10px 10px 0 0}
.dv-tab .dv-screen{aspect-ratio:3/4;border-radius:12px;padding:6px}
.dv-ph .dv-screen{aspect-ratio:9/19;border-radius:14px;padding:4px}
.dv-base{height:9px;margin:0 -7%;background:var(--lilac);border-radius:0 0 9px 9px}
.ms{width:100%;height:100%;background:var(--surface);border-radius:6px;overflow:hidden;
  display:grid;align-content:start;gap:6px;padding:8px}
.dv-ph .ms{border-radius:10px;padding:6px 5px;gap:5px}
.ms-nav{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.ms-nav i{height:4px;flex:0 0 14%;border-radius:2px;background:var(--line)}
.ms-nav .ms-logo{flex:0 0 10px;height:10px;border-radius:50%;background:var(--brand-gradient)}
.ms-nav i:last-child{margin-left:auto;flex-basis:18%;height:8px;border-radius:3px;background:var(--brand-gradient)}
.ms-h{height:9px;width:86%;border-radius:2px;background:var(--ink)}
.ms-h.short{width:58%}
.ms-l{height:4px;width:72%;border-radius:2px;background:var(--line)}
.ms-btn{justify-self:start;margin-top:2px;padding:3px 7px;border-radius:4px;background:var(--brand-gradient);
  color:var(--on-brand);font-family:var(--display);font-weight:700;font-size:9px;line-height:1.2}
.ms-pic{min-height:34px;border-radius:5px;background:color-mix(in srgb,var(--brand) 14%,var(--ground))}
/* the laptop shows the desktop layout: words left, picture right */
.dv-lap .ms{grid-template-columns:1.05fr 1fr;column-gap:12px;padding:10px 12px}
.dv-lap .ms-nav{grid-column:1/-1}
.dv-lap .ms-pic{grid-column:2;grid-row:2/span 5;min-height:0;height:100%}
.dv-ph .ms-nav i:not(.ms-logo):not(:last-child){display:none}
.dv-ph .ms-h{height:7px}
.dv-ph .ms-btn{font-size:7px;padding:2px 5px}
.dv-ph .ms-pic{min-height:46px}
.dv-tab .ms-pic{min-height:56px}
.dv-edit{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:6px;padding:4px 8px;
  border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:10px;font-weight:600;
  color:var(--ink);box-shadow:0 6px 14px -8px color-mix(in srgb,var(--ink) 50%,transparent)}
.dv-edit i{width:6px;height:6px;border-radius:50%;background:var(--success)}
.dv-row{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.dv-row .crm{margin:0}
.abt{display:flex;flex-direction:column;gap:6px;padding:var(--s3);border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);font-size:var(--fs-xs)}
.abt .tag{color:var(--muted);font-weight:600;letter-spacing:.02em}
.abt-r{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:8px;color:var(--muted)}
.abt-r i{font-style:normal}
.abt-r b{display:block;height:8px;border-radius:999px;background:var(--line)}
.abt-r.on i{color:var(--ink);font-weight:600}
.abt-r.on b{background:var(--brand-gradient)}
.abt .w-old{width:42%}
.abt .w-new{width:86%}
.abt-k{color:var(--ink);font-weight:600;margin-top:2px}
@media(max-width:560px){.dv-row{grid-template-columns:1fr}.dev3{gap:var(--s2)}.dv-edit{display:none}}
.dv-base{margin:0 -3%}
.dev3{gap:var(--s4)}
.ms{grid-template-rows:auto}
.ms-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:4px}
.ms-cards i{height:26px;border:1px solid var(--line);border-radius:4px;background:var(--ground)}
.dv-lap .ms{grid-template-rows:auto auto auto auto auto 1fr}
.dv-lap .ms-pic{grid-row:2/span 4}
.dv-lap .ms-cards{grid-column:1/-1;align-self:end}
.dv-lap .ms-cards i{height:34px}
.dv-ph .ms-cards{grid-template-columns:1fr}
.dv-ph .ms-cards i{height:16px}
.dv-ph .ms-cards i:nth-child(3){display:none}
.dv-tab .ms-pic{min-height:38px}
.dv-tab .ms-cards i{height:20px}
.dv-ph .ms-pic{min-height:26px}
.dv-ph .ms-cards i{height:13px}
.dv-edit{bottom:auto;top:44%}
.dv-tab .ms{gap:4px;padding:7px}
.dv-tab .ms-pic{min-height:30px}
.dv-tab .ms-cards i{height:16px}
.dv-ph .ms{gap:4px}
.dv-ph .ms-pic{min-height:22px}
.dv-ph .ms-cards i:nth-child(2){display:none}
/* the mini site scales with its own screen (container units), so it never clips or stretches at any width */
.dv-screen{container-type:inline-size}
.ms{gap:1.9cqw;padding:3.2cqw 3.8cqw;border-radius:2cqw}
.ms-nav{gap:1.6cqw;margin-bottom:1.3cqw}
.ms-nav i{height:1.3cqw}
.ms-nav .ms-logo{flex-basis:3.2cqw;height:3.2cqw}
.ms-nav i:last-child{height:2.5cqw;border-radius:1cqw}
.ms-h{height:2.85cqw}
.ms-l{height:1.3cqw}
.ms-btn{font-size:2.85cqw;padding:.95cqw 2.2cqw;border-radius:1.3cqw;margin-top:.6cqw}
.ms-cards{gap:1.6cqw;margin-top:1.3cqw}
.ms-cards i{height:10.8cqw;border-radius:1.3cqw}
.dv-lap .ms{column-gap:3.8cqw;padding:3.2cqw 3.8cqw}
.dv-lap .ms-cards i{height:10.8cqw}
.dv-tab .ms{gap:3.6cqw;padding:6.4cqw;border-radius:4cqw}
.dv-tab .ms-nav{gap:3.6cqw;margin-bottom:2cqw}
.dv-tab .ms-nav i{height:3.6cqw}
.dv-tab .ms-nav .ms-logo{flex-basis:9cqw;height:9cqw}
.dv-tab .ms-nav i:last-child{height:7cqw}
.dv-tab .ms-h{height:8.2cqw}
.dv-tab .ms-l{height:3.6cqw}
.dv-tab .ms-btn{font-size:8cqw;padding:2.7cqw 6cqw;border-radius:3.6cqw}
.dv-tab .ms-pic{min-height:27cqw;border-radius:4cqw}
.dv-tab .ms-cards{gap:4cqw}
.dv-tab .ms-cards i{height:14.5cqw;border-radius:3cqw}
.dv-ph .ms{gap:6.9cqw;padding:10cqw 8.6cqw;border-radius:16cqw}
.dv-ph .ms-nav{gap:6cqw;margin-bottom:3cqw}
.dv-ph .ms-nav .ms-logo{flex-basis:17cqw;height:17cqw}
.dv-ph .ms-nav i:last-child{height:12cqw;flex-basis:30cqw}
.dv-ph .ms-h{height:12cqw}
.dv-ph .ms-l{height:6cqw}
.dv-ph .ms-btn{font-size:12cqw;padding:3.4cqw 8.6cqw;border-radius:5cqw}
.dv-ph .ms-pic{min-height:38cqw;border-radius:8cqw}
.dv-ph .ms-cards i{height:22cqw;border-radius:5cqw}

/* ── Round 5 (client, 20 October 2026) ─────────────────────────────────────────
   Only things you can click have a hover; the cards above lost theirs. Intros under a
   heading are body size. */

/* About, why we exist: the three windows stay inside their column, clear of the text */
.ab-slack{left:0}
.ab-crm{right:0}
@media(min-width:821px){[data-section="text"][data-media="left"] .is-about.tools{margin-right:var(--s5)}}

/* Service pricing, drawn like the home page's: an ad-spend line is one note of its own */
.price-notes.one{grid-template-columns:1fr}
[data-layout="pair"] ul + .price-notes.one{margin-top:0}
[data-section="pricing"][data-layout="pair"] h2 + p{margin-bottom:0}

/* Case studies, 3 across: the client and what was done on the left, the result as a call-out on the right */
#case-list .case-img{aspect-ratio:16/9}
#case-list .case-img span{font-size:var(--fs-h3)}
.case-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4)}
.case-who{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
#case-list .case-body .case-who strong{font-size:var(--fs-h4)}
.case-stat{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right;max-width:13ch}
.case-stat b{font-family:var(--display);font-weight:700;font-size:var(--fs-h3);line-height:1}
.case-stat span{font-size:var(--fs-xs);line-height:1.35;margin-top:var(--s1);color:var(--muted)}
section[data-tone="dark"] .case-stat span{color:var(--line)}
.case-what{font-size:var(--fs-sm);color:var(--muted)}
section[data-tone="dark"] .case-what{color:var(--line)}
#case-list .case-body{gap:var(--s3)}

/* The consent box: one line, small, out of the way */
.field.consent{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:start}
.field.consent input{width:20px;height:20px;min-height:0;padding:0;margin:1px 0 0;accent-color:var(--brand-ink)}
.field.consent label{margin:0;font-family:var(--body);font-weight:400;font-size:var(--fs-sm);color:var(--muted)}
.field.consent label a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.field.consent [data-error]{grid-column:1/-1}
#hero-form .field.consent{grid-column:1/-1}

/* Legal pages: plain text, nothing else */
[data-section="text"][data-layout="prose"].legal{padding-top:var(--s7)}
.legal h1{font-size:var(--fs-h2);margin-bottom:var(--s2)}
.legal h2{font-size:var(--fs-h4);margin:var(--s6) 0 var(--s2)}
.legal p,.legal li{font-size:var(--fs-md)}
.legal h1 + p{color:var(--muted);font-size:var(--fs-sm)}
.ft .fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s3)}
.ft .legal-links{display:flex;gap:var(--s4)}
.ft .legal-links a{color:inherit}
/* a link inside a card's sentence stays in the sentence */
[data-layout="grid"] li span a{display:inline;margin:0;font-family:inherit;font-weight:600;min-height:0}
/* About hero: centred text, no visual (client, 20 October 2026); the headline sets on two lines */
[data-page="about"] [data-section="hero"][data-layout="stacked"] .wrap{max-width:980px}
[data-page="about"] [data-section="hero"][data-layout="stacked"] .copy > p,
[data-page="about"] [data-section="hero"][data-layout="stacked"] .wrap > p{max-width:56ch;margin-left:auto;margin-right:auto}
#case-list .case-who .line{font-size:var(--fs-sm);line-height:1.45}
.ft .legal-links a{display:inline-flex;align-items:center;min-height:26px}
.case-who{flex:1}
@media(max-width:560px){
  .case-top{flex-direction:column;gap:var(--s3)}
  .case-stat{flex-direction:row;align-items:center;gap:var(--s3);text-align:left;max-width:none}
  .case-stat span{margin:0;max-width:16ch}
}
.legal ul.ticks{list-style:disc;padding-left:1.25em}
.legal ul.ticks li{padding-left:0;display:list-item}
.legal ul.ticks li::before{content:none;display:none}
.legal ul.ticks li strong{font-family:inherit}

/* ── Case study page mockup (client, 20 October 2026) ─────────────────────── */
.cs-fig .ui-body{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4)}
.cs-stat{display:flex;justify-content:space-between;align-items:flex-end}
.cs-stat b{font-family:var(--display);font-weight:700;font-size:var(--fs-h2);line-height:1}
.cs-line{width:100%;height:120px;display:block;overflow:visible}
.cs-line path{fill:none;stroke:var(--brand);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.cs-line path.area{fill:color-mix(in srgb,var(--brand) 12%,transparent);stroke:none}
.cs-line .start{stroke:var(--line);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.cs-line.swing{height:90px}
.cs-line.swing path{stroke:var(--muted)}
.cs-legend{display:flex;gap:var(--s4);font-size:var(--fs-xs);color:var(--muted)}
.cs-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.cs-legend .before{background:var(--line)}
.cs-legend .after{background:var(--brand-gradient)}
.cs-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:var(--s3);font-size:var(--fs-sm)}
.cs-row b{font-family:var(--display);color:var(--brand-ink)}
.cs-done{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.cs-done li{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-sm);background:var(--surface)}
.cs-done .ok{display:grid;place-items:center;width:24px;height:24px;flex:none;border-radius:50%;background:var(--brand-gradient);color:var(--on-brand);font-size:12px}
.cs-pages .pill{color:var(--brand-ink)}

/* "More case studies": the library's cards, three across, until there are more to show */
.case-related{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.case-related li.case-card{padding:0;overflow:hidden;display:flex;flex-direction:column;text-align:left}
.case-related li.case-card::before{content:none}
.case-related .case-img{aspect-ratio:16/9}
.case-related .case-img span{font-size:var(--fs-h4)}
.case-related .case-body{gap:var(--s3)}
.case-related .case-who strong{font-size:var(--fs-h4)}
.case-related .case-who .line{font-size:var(--fs-sm)}
@media(max-width:820px){.case-related{grid-template-columns:1fr}}
@media(max-width:560px){
  .case-related .case-top{flex-direction:column;gap:var(--s3)}
  .case-related .case-stat{flex-direction:row;align-items:center;gap:var(--s3);text-align:left;max-width:none}
}

/* Blog post: the byline under the standfirst */
[data-page="blog-post"] [data-section="hero"] .copy > p:not(.subheading){font-size:var(--fs-sm);color:var(--muted)}
[data-layout="carousel"] ul.case-related{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:row;
  grid-auto-columns:auto;overflow:visible;padding:0;scroll-snap-type:none}
[data-layout="carousel"] ul.case-related > li{width:auto;min-width:0;flex:none;padding:0;border:1px solid var(--line)}
@media(max-width:820px){[data-layout="carousel"] ul.case-related{grid-template-columns:1fr}}
/* Results: the figure is the headline */
[data-section="numbers"][data-layout="grid"] li{padding:var(--s6) var(--s4);background:var(--surface)}
[data-section="numbers"][data-layout="grid"] li strong{display:block;font-family:var(--display);font-weight:700;
  font-size:var(--fs-h1);line-height:1;margin-bottom:var(--s3);background:var(--brand-gradient);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
[data-section="numbers"][data-layout="grid"] li{color:var(--muted)}
[data-page="blog-post"] [data-section="text"][data-layout="prose"] h2{font-size:var(--fs-h3);margin:var(--s6) 0 var(--s3)}
[data-page="blog-post"] [data-section="text"][data-layout="prose"] h2:first-child{margin-top:0}
section[data-tone="dark"][data-section="project-facts"] dt{color:var(--lilac)}
section[data-tone="dark"][data-section="project-facts"] dd{color:var(--surface)}

/* Case study hero: the client's image, their logo on a white card over its lower left (client, 20 October 2026) */
.case-hero-img > img{display:block;width:100%;border-radius:calc(var(--r)*2);aspect-ratio:4/3;object-fit:cover}
.client-logo{position:absolute;left:var(--s4);bottom:var(--s4);background:var(--surface);border-radius:var(--r);
  padding:var(--s3) var(--s4);box-shadow:0 12px 28px -16px color-mix(in srgb,var(--ink) 55%,transparent)}
.client-logo img{display:block;width:120px;height:auto}
@media(max-width:560px){.client-logo{left:var(--s3);bottom:var(--s3);padding:var(--s2) var(--s3)}.client-logo img{width:88px}}
/* Results lead, on the slab */
section[data-tone="dark"][data-section="numbers"] li{background:color-mix(in srgb,var(--surface) 5%,var(--ink));color:var(--line)}
.case-hero-img .client-logo img{width:120px;height:auto;aspect-ratio:auto;border-radius:0;object-fit:contain}
@media(max-width:560px){.case-hero-img .client-logo img{width:88px}}

/* Case study, the challenge and the solution: the client's photo holds still beside the text while
   the longer copy scrolls past it (variant B2, client, 20 October 2026) */
@media(min-width:821px){
  [data-template="case-study-detail"] [data-section="text"] .wrap{align-items:start}
  [data-template="case-study-detail"] [data-section="text"] .media{position:sticky;top:120px}
}
[data-template="case-study-detail"] [data-section="text"] .case-hero-img > img{aspect-ratio:4/3}
[data-template="case-study-detail"] [data-section="text"] .copy h3{font-size:var(--fs-h4);margin:var(--s4) 0 var(--s2);
  padding-top:var(--s4);border-top:1px solid var(--line)}

/* Case cards: the client's hero photo fills the tile when it exists (21 October 2026) */
.case-img.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-img > span{padding:0 var(--s4);text-align:center}

/* Case study results: no mark over the heading, a skinnier band, and every box built the same way:
   the figure on one line at the top, the label under it, all boxes level (client, 21 October 2026) */
[data-template="case-study-detail"] section[data-section="numbers"]{padding:var(--s6) 0}
[data-template="case-study-detail"] section[data-section="numbers"] h2::before{content:none}
[data-template="case-study-detail"] [data-section="numbers"] h2{margin-bottom:var(--s4)}
[data-template="case-study-detail"] [data-section="numbers"][data-layout="grid"] ul{align-items:stretch}
[data-template="case-study-detail"] [data-section="numbers"][data-layout="grid"] li{display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:var(--s5) var(--s4)}
[data-template="case-study-detail"] [data-section="numbers"][data-layout="grid"] li strong{white-space:nowrap;
  margin-bottom:var(--s2)}

/* One strategy, no tab set (21 October 2026): the label is a span, so it is given the button's
   centring. Everything else comes from the tab rules above, which name .tab-one beside [role="tab"]. */
[data-layout="tabs"] .tab-one{display:inline-flex;align-items:center;cursor:default}