/*
Theme Name: Ashburn Stone
Theme URI: https://ashburnstone.co.uk
Description: Bespoke lightweight theme for Ashburn Stone — Salisbury websites & IT support. Hand-built, no page-builder bloat.
Author: Ashburn Stone
Version: 1.9.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ashburn-stone
*/

/* ============================================================
   Design tokens
   ============================================================ */
/* Canonical design tokens — kept in sync with portal/assets/css/portal.css.
   If a value changes here, mirror it there (or vice versa).
   Canonical breakpoints across both stylesheets:
     small phones   … max-width: 480px
     tablet         … max-width: 720px
     laptop         … max-width: 900px
     small desktop  … max-width: 1100px
   CSS custom properties can't be used in @media queries, so treat these
   as a discipline: any new breakpoint should map to one of the four above. */
:root {
  --paper:  #F7F5F1;
  --ink:    #1C2024;
  --plum:   #5C2441;
  --plum-d: #4a1c34;
  --stone:  #BBAB9A;
  /* --stone is a dark-background colour: 7.34:1 on --ink, but only 2.23:1 on
     white and 2.05:1 on --paper. Any *text* sitting on a light background uses
     --stone-ink instead: 5.85:1 on #fff, 5.37:1 on --paper. Same stone family,
     just carried far enough down to be legible. */
  --stone-ink: #6F6355;
  /* Comparison pair for worked-example bars. Green = money you keep, salmon =
     money that leaves. Red/green is the worst possible CVD pair on hue alone,
     so these are separated on LIGHTNESS as well — validated at protan ΔE 21.3
     (target >= 8). Identity is still carried by the row label and the figure,
     never by colour alone. */
  --as-keep: #2A6B39;
  --as-cost: #EC9583;
  /* Lighter green for the "live" dot on DARK grounds. --as-keep is only
     2.54:1 on the ink hero — invisible. This is 6.70:1 there. */
  --as-live: #5FB872;
  --blush:  #E8D0DA;
  --muted:  #5A5E63;
  --border: #DBD7D0;

  --maxw: 1160px;   /* content column — was 1080, widened to claim back side margin */
  --gap: clamp(18px, 2.6vw, 30px);

  /* Vertical rhythm. One place to tune how much air the page carries — every
     section padding below refers to these rather than carrying its own clamp. */
  --sec-y:    clamp(30px, 4.2vw, 48px);  /* standard section top/bottom */
  --sec-y-lg: clamp(38px, 5.2vw, 62px);  /* the few bands that carry more */
  --hero-y:   clamp(44px, 6.4vw, 76px);  /* hero top */
  --hero-y-b: clamp(32px, 4.6vw, 54px);  /* hero bottom */
  --stack:    24px;                      /* section head to the grid below it */
  --radius: 6px;                             /* was 3px on theme / 10px on portal — unified */
  --btn-radius: 11px;                        /* buttons only — see .btn */
  --shadow: 0 4px 24px rgba(28,32,36,.09);   /* mirrors portal.css */
}

/* ============================================================
   Reset / base
   ============================================================ */
* { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--plum); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 700; }
h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 600; }
h3 { font-size: clamp(19px, 2.4vw, 22px); font-weight: 600; }
p { margin: 0 0 1em; }

/* Site-wide keyboard focus. Every interactive element that doesn't already
   own a bespoke focus state falls back to this so keyboard users can see
   where they are — previously most of the header was invisible on focus. */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 4px;
}
/* On the ink header the plum ring vanishes against the plum CTA — use blush. */
.site-header :where(a, button):focus-visible { outline-color: var(--blush); }

/* Screen-reader-only text: carries context a sighted reader gets from layout
   or an icon (e.g. "(opens in a new tab)"). Never affects layout. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--sec-y) 0; }
.section--tint { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--plum); margin: 0 0 10px;
}
.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--muted); max-width: 40ch; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ============================================================
   Buttons
   ============================================================ */
/* --btn-radius rather than --radius. The shared token is on 33 rules — cards,
   panels, the nav portal button — and those read fine at 6px because they are
   large. On a 55px-tall button 6px is barely a corner at all, which is what
   made the pair on the /drone-surveys/ hero look like two grey slabs against
   a photograph. Buttons get their own token so they can be softened without
   reshaping every panel on the site.

   Also a little less tall: 13px of vertical padding on a 15px font made a
   55px button, which is bulky next to a 33px area pill and a 51px plan CTA. */
.btn {
  display: inline-block; padding: 12px 26px; font-weight: 600; font-size: 15px;
  border-radius: var(--btn-radius); border: 1px solid transparent; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--plum); color: #fff; }
.btn--primary:hover { background: var(--plum-d); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { border-color: var(--plum); color: var(--plum); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.center .btn-row { justify-content: center; }

/* Skip link — hidden until focused with a keyboard, then anchors the
   main-content shortcut against the top of the viewport. */
.skip-link {
  position: absolute; left: -9999px; top: 8px;
  padding: 10px 16px; background: var(--paper); color: var(--ink);
  font-weight: 600; border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  z-index: 2000;
}
.skip-link:focus, .skip-link:focus-visible {
  left: 16px; outline: 2px solid var(--plum); outline-offset: 3px;
  text-decoration: none;
}

/* ============================================================
   Header
   ============================================================ */
/* Audience switch — two front doors to the same business. Deliberately not
   sticky: it is a choice you make once on arrival, not a control you need
   under your thumb, and the header is already 100px of fixed furniture. */
.aud-bar { background: #14171A; border-bottom: 1px solid rgba(255,255,255,0.06); transition: background .2s ease; }
/* Home mode repaints the whole bar rather than just moving the pill: the
   switch is easy to miss, a colour change is not. Plum is the brand accent
   and is already what the home pages lead with. */
.aud-bar--home { background: var(--plum); border-bottom-color: rgba(255,255,255,0.10); }
.aud-bar-inner { display: flex; align-items: center; gap: 14px; padding: 11px 24px; }
.aud-switch { display: inline-flex; flex-shrink: 0; background: rgba(255,255,255,0.08); border-radius: 999px; padding: 3px; }
.aud-bar--home .aud-switch { background: rgba(0,0,0,0.20); }
.aud-switch a {
  padding: 6px 17px; border-radius: 999px; line-height: 1.2;
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.62);
  transition: color .15s ease, background .15s ease;
}
.aud-switch a:hover { color: #fff; text-decoration: none; }
.aud-switch a.on { background: var(--stone); color: #1C2024; }
.aud-switch a.on:hover { color: #1C2024; }
.aud-bar--home .aud-switch a.on { background: var(--paper); color: var(--plum); }
.aud-bar--home .aud-switch a.on:hover { color: var(--plum); }
/* Contact button. Paper on both bars, so it reads as the one thing to press
   whichever audience you are in. */
.aud-tel {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.aud-tel:hover, .aud-tel:focus-visible { background: #fff; color: var(--plum); text-decoration: none; }
/* Remote support: same pill as the phone, outlined rather than filled, and it
   carries the margin-left:auto that used to sit on .aud-tel so the pair stay
   pushed to the right as one group. */
.aud-remote {
  margin-left: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28); color: rgba(255,255,255,0.86);
  font-size: 13px; font-weight: 700; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.aud-remote:hover, .aud-remote:focus-visible { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); color: #fff; text-decoration: none; }
.aud-remote-icon { flex-shrink: 0; opacity: .85; }
.aud-tel-icon { flex-shrink: 0; color: var(--plum); }
.aud-tel-label { font-weight: 700; }

@media (max-width: 720px) {
  .aud-switch a { padding: 5px 13px; font-size: 12px; }
  .aud-tel { padding: 6px 13px; font-size: 12.5px; }
  /* Two pills plus the audience switch do not fit a phone. The remote badge
     keeps its icon and drops its words — the contact button is the one that has
     to stay readable. */
  .aud-remote-label { display: none; }
  .aud-remote { padding: 6px 10px; }
}
@media (max-width: 430px) {
  /* Narrowest phones: the switch and the phone button are the priority. */
  .aud-remote { display: none; }
}
@media (max-width: 374px) {
  /* 320-374px phones (2026-09-28): the switch and Contact needed 300px where
     the bar has 256px at 320, so the whole page ran 13px wide. Contact keeps
     its word, since it has to stay readable, and drops its icon; the pills
     and the gap tighten. 375px and up are unchanged. */
  .aud-bar-inner { gap: 8px; }
  .aud-switch a { padding: 5px 9px; font-size: 11.5px; }
  .aud-tel { padding: 6px 11px; font-size: 12px; }
  .aud-tel-icon { display: none; }
}

.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #1C2024;
  border-bottom: 1px solid rgba(0,0,0,0.25);
}
/* Short viewports (200% zoom, a phone on its side): a 100px sticky header took
   a quarter of the screen for good, so it scrolls away there instead
   (audit pass 2, 2026-09-25). */
@media (max-height: 500px) {
  .site-header { position: relative; }
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100px; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo:hover { text-decoration: none; }
.logo .as-mark { width: 34px; height: auto; }
.logo-lockup { display: flex; flex-direction: column; gap: 2px; line-height: 1; }
.logo-word { font-family: "Lora", serif; font-weight: 700; font-size: 20px; color: #F7F5F1; white-space: nowrap; }
.logo-strapline { color: #BBAB9A; font-family: "Lora", Georgia, serif; font-style: italic; font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 12px; }
.nav-list > li { position: relative; }
/* Variation A: fine stone hairlines give the primary choices a steadier
   rhythm. The stronger plum rule marks the shift from services to studio
   pages; the portal already has enough visual separation from its fill. */
.nav-list--hairlines > li:not(:first-child):not(.nav-urgent-mobile):not(.nav-portal-li):not(.nav-studio-start)::before {
	content: ''; position: absolute; left: -6px; top: 50%;
	width: 1px; height: 17px; transform: translateY(-50%);
	background: rgba(217,204,190,.25);
}
.nav-list--hairlines > li.nav-studio-start::before {
	content: ''; position: absolute; left: -6px; top: 50%;
	width: 1px; height: 24px; transform: translateY(-50%);
	background: rgba(168,97,130,.9);
}
.nav-link {
	display: inline-flex; align-items: center; gap: 5px;
	color: rgba(255,255,255,0.82); font-size: 14px; font-weight: 600; white-space: nowrap;
	background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0;
	transition: color .15s ease;
}
.nav-link:hover { color: #fff; text-decoration: none; }
.nav-list > li > a.nav-link:hover, .nav-list a:hover { text-decoration: none; }
.nav-studio-link {
	display: inline-flex; align-items: center; height: 34px;
	color: rgba(255,255,255,.84); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.nav-studio-link:hover, .nav-studio-link:focus-visible { color: #fff; text-decoration: none; }
.nav-studio-link.is-active { color: #fff; box-shadow: inset 0 -2px 0 rgba(168,97,130,.95); }
.has-dropdown.open .nav-drop-toggle,
.has-dropdown:hover .nav-drop-toggle { color: #fff; }
.caret { transition: transform .15s ease; }
.has-dropdown:hover .caret, .has-dropdown.open .caret { transform: rotate(180deg); }

/* Three-column services menu */
/* Invisible bridge so hover doesn't break in the gap between the button and the menu */
.has-dropdown::after {
	/* The panel is fixed at top:118px while the nav item's bottom sits at ~64px,
	   so the mouse crosses ~54px of nothing on the way down. This bridge has to
	   cover the whole gap or the menu closes under the cursor. */
	content: ''; position: absolute; top: 100%; left: -28px; right: -28px; height: 62px;
}
.dropdown {
	margin: 0; padding: 0;
	/* Fixed and centred under the header rather than hung off the nav item:
	   anchored to the item, the five-column menu ran ~30px past the right edge
	   at ~1440px and gave the whole site a horizontal scrollbar. The header is
	   sticky at the top, so fixed tracks it. Mobile resets this to static.

	   --as-dd-top is the header's real bottom edge, written by nav.js on scroll.
	   It has to be measured rather than hard-coded because the audience bar sits
	   above the header and scrolls away, so the header's distance from the top
	   of the screen is 133px at rest and 100px once you scroll. The literal here
	   is the no-JS fallback. */
	position: fixed; top: var(--as-dd-top, 118px); left: 50%;
	width: min(930px, calc(100vw - 32px)); background: #fff;
	border: 1px solid var(--border); border-radius: 6px;
	box-shadow: 0 24px 70px rgba(28,32,36,0.16);
	opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s ease; z-index: 60;
}
.has-dropdown:hover .dropdown, .has-dropdown.open .dropdown {
	opacity: 1; visibility: visible; transform: translateX(-50%);
}
/* The list-style mega panel (.mega-grid / .mega-group / .mega-heading / .mega-ico /
   .mega-footer) was removed 2026-09-19. The menu became card-based on 2026-09-12 and
   the old rules were kept as dead code in case that needed backing out; it didn't.
   Only .mega-urgent__* below is still live. */

/* Urgent-help strip. The only red in the menu — that is the whole point, so
   resist adding a second one. Sits above .mega-footer, which stays the calm
   "browse the options" row. */
.mega-urgent {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 13px 30px; border-top: 1px solid var(--border); background: #FDF3F1;
}
.mega-urgent__btn {
	display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
	padding: 9px 16px; border-radius: 999px;
	background: #B02A1F; color: #fff; font-size: 13.5px; font-weight: 700;
	text-decoration: none; transition: background .14s ease;
}
.mega-urgent__btn:hover { background: #8E2118; color: #fff; text-decoration: none; }
.mega-urgent__btn:focus-visible { outline: 2px solid #B02A1F; outline-offset: 2px; }
.mega-urgent__note { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mega-urgent__note a { color: #B02A1F; font-weight: 600; white-space: nowrap; }

/* ── Card mega menus (2026-09-12 redesign) ─────────────────────
   Four small panels, one per service group: photo/icon cards with
   registry-driven price badges, plus a right rail of cross-links
   and one promo. Mobile flattens cards to 46px rows inside the
   existing accordion. */
.dropdown--cards { width: min(1240px, calc(100vw - 32px)); }
/* Drone Work carries two cards. Narrowing the whole panel keeps them at the
   same ~220px as every other group instead of stretching them across a gap,
   and dropping the min-height stops two cards rattling around in a box sized
   for six — the rail's own content sets the height instead. */
.dropdown--cards:has(.mm-cards--2) { width: min(760px, calc(100vw - 32px)); }
.dropdown--cards:has(.mm-cards--2) .mm-panel { min-height: 0; }
.mm-panel { display: grid; grid-template-columns: 1fr 272px; min-height: 394px; }
.mm-cards { display: grid; gap: 12px; padding: 16px 18px 14px; align-content: center; }
.mm-cards--2 { grid-template-columns: repeat(2, 1fr); }
.mm-cards--4 { grid-template-columns: repeat(4, 1fr); }
.mm-cards--5 { grid-template-columns: repeat(5, 1fr); }
.mm-cards--6 { grid-template-columns: repeat(3, 1fr); }
.mm-cards--7 { grid-template-columns: repeat(4, 1fr); }
/* Adding Cyber Security took IT & Security to eight cards. Without a rule the
   grid falls back to a single column and the panel renders as one long list of
   full-width rows — same trap the six- and seven-card groups hit before. */
.mm-cards--8 { grid-template-columns: repeat(4, 1fr); }
.mm-card {
	position: relative; display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid var(--border); border-radius: 12px; background: #fff;
	text-decoration: none; color: var(--ink); transition: box-shadow .15s, border-color .15s;
}
.mm-card:hover { border-color: var(--stone); box-shadow: 0 10px 26px rgba(28,32,36,.14); }
.mm-card:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.mm-media { position: relative; aspect-ratio: 2/1; max-height: 118px; width: 100%; overflow: hidden; background: var(--paper); }
.mm-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Icon cards: a blush tile with a solid plum silhouette at 72px. The old
   treatment was a 42px line icon centred in a 208x104 box, which left the
   tile mostly empty and made icon cards look unfinished next to the photo
   thumbnails in Web & Apps and Drone Work. Blush rather than plum so the
   price badge, which is plum, still reads against it. Decided 2026-09-18. */
.mm-tile { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--blush); }
.mm-tile img { width: 72px; height: 72px; object-fit: contain; }
/* A card with a price badge gives the icon room: at 72px the glyph reached up
   under the badge, which sits top-left over the tile, and the badge covered
   the top-left corner of the icon. */
.mm-media:has(.mm-badge) .mm-tile { padding-top: 18px; }
.mm-body { padding: 9px 11px 11px; }
.mm-body strong { display: block; font-size: 13.5px; line-height: 1.3; }
.mm-body small { display: block; margin-top: 2px; color: var(--muted); font-size: 11.8px; line-height: 1.4; }
.mm-badge {
	position: absolute; top: 9px; left: 9px; z-index: 1; background: var(--plum); color: #fff;
	font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.mm-badge--alt { left: auto; right: 9px; top: 9px; background: var(--ink); }
/* mini brand board (Branding card) */
.mm-board { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 0 16%; background: var(--blush); }
.mm-board-type { display: flex; align-items: baseline; gap: 8px; }
.mm-board-serif { font-family: "Lora", serif; font-weight: 700; font-size: 22px; color: var(--ink); }
.mm-board-sans { font-weight: 500; font-size: 16px; color: var(--muted); }
.mm-board-swatches { display: flex; gap: 4px; }
.mm-board-swatches i { width: 16px; height: 16px; border-radius: 4px; }
.mm-board-swatches .sw-plum { background: var(--plum); } .mm-board-swatches .sw-ink { background: var(--ink); }
.mm-board-swatches .sw-stone { background: var(--stone); } .mm-board-swatches .sw-paper { background: var(--paper); border: 1px solid var(--stone); }
.mm-board-lines { display: flex; flex-direction: column; gap: 3px; }
.mm-board-lines i { display: block; height: 3px; border-radius: 2px; background: var(--stone); }
.mm-board-lines i:last-child { width: 70%; }
/* right rail */
.mm-rail { border-left: 1px solid var(--border); background: var(--paper); padding: 16px; display: flex; flex-direction: column; justify-content: center; }
.mm-rail-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mm-rail-links a {
	display: flex; justify-content: space-between; align-items: center; text-decoration: none;
	color: var(--ink); background: #fff; border: 1px solid var(--border); border-radius: 10px;
	padding: 11px 14px; font-size: 13.5px; font-weight: 500;
}
.mm-rail-links a:hover { border-color: var(--stone); }
.mm-rail-links a span { color: var(--stone-ink); }
.mm-promo { background: var(--plum); border-radius: 11px; padding: 15px 14px; color: #fff; }
.mm-promo--ink { background: var(--ink); }
.mm-promo h4 { margin: 0 0 5px; font-size: 14.5px; font-family: "Lora", serif; color: #fff; }
.mm-promo p { margin: 0 0 10px; font-size: 12.5px; color: rgba(255,255,255,.82); line-height: 1.45; }
.mm-promo-btn { display: block; text-align: center; background: #fff; color: var(--plum); text-decoration: none; font-weight: 600; font-size: 13px; padding: 8px 10px; border-radius: 8px; }
.mm-promo-btn:hover { text-decoration: none; color: var(--plum-d); }
.mm-promo--ink .mega-urgent__btn { display: flex; justify-content: center; width: 100%; box-sizing: border-box; }
.mm-promo-tel { color: #fff; font-weight: 600; white-space: nowrap; }
/* Slim panel footer — replaced the right-hand rail 2026-09-13 to halve panel height */
.mm-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	border-top: 1px solid var(--border); background: var(--paper); padding: 9px 18px; }
.mm-foot-links { display: flex; gap: 20px; }
.mm-foot-links a { text-decoration: none; color: var(--ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.mm-foot-links a:hover { color: var(--plum); }
.mm-foot-links a span { color: var(--stone-ink); }
.mm-foot-cta { text-decoration: none; background: var(--plum); color: #fff; font-size: 13px; font-weight: 600;
	padding: 8px 14px; border-radius: 8px; white-space: nowrap; }
.mm-foot-cta:hover { background: var(--plum-d); color: #fff; }
.mm-foot-action { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mm-foot-note { font-size: 12.5px; color: var(--muted); }
.mm-foot-note a { color: #B02A1F; font-weight: 600; white-space: nowrap; }
.mm-foot-action .mega-urgent__btn { font-size: 13px; padding: 8px 14px; }

/* "For Home" tab */
.nav-tab {
	display: inline-flex; align-items: center; gap: .34em;
	padding: 8px 15px; border: 1px solid rgba(255,255,255,0.3);
	border-radius: 100px; color: rgba(255,255,255,0.9); font-size: 14px; font-weight: 600;
	white-space: nowrap;
}
.nav-tab:hover { border-color: rgba(255,255,255,0.65); color: #fff; text-decoration: none; }
.nav-tab.is-active { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); color: #fff; }

/* Contact CTA */
.nav-portal { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--blush); color: var(--ink) !important; border: 1px solid var(--blush); border-radius: var(--radius); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: border-color .15s ease, background .15s ease; }
/* Blush, not stone, since 2026-09-26 (Ashley: "not a fan of the yellow"). */
.nav-portal:hover { border-color: #fff; background: #fff; color: var(--ink) !important; text-decoration: none; }
/* Phone — plain text in the nav so it reads as a real number, not a button */
/* Phone: a compact icon button that reveals the number on hover/focus. Keeps the
   number one click away without spending 126px of nav width on it permanently. */
.nav-contact {
	display: inline-flex; align-items: center; gap: 7px;
	height: 36px; padding: 0 14px 0 11px;
	border: 1px solid rgba(255,255,255,0.28); border-radius: 100px;
	color: #fff !important; font-size: 13px; font-weight: 600;
	font-variant-numeric: tabular-nums; white-space: nowrap;
	transition: gap .22s ease, padding .22s ease, background-color .18s ease, border-color .18s ease;
}
.nav-contact svg { opacity: .8; flex-shrink: 0; transition: opacity .18s ease; }
.nav-contact .nav-contact-label { display: inline-block; }
.nav-contact:hover, .nav-contact:focus-visible {
	background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.55);
	color: #fff !important; text-decoration: none;
}
.nav-contact:hover svg, .nav-contact:focus-visible svg { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.nav-contact, .nav-contact .nav-contact-label, .nav-contact svg { transition: none; }
}

/* Hamburger */
.nav-toggle {
	display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px;
	align-items: center; justify-content: center; background: none;
	border: 1px solid rgba(255,255,255,0.35); border-radius: var(--radius); cursor: pointer;
}
.nav-toggle-bar { width: 20px; height: 2px; background: #fff; display: block; }

/* Anchor scroll offset for the sticky header.
   Service templates (branding, IT support, drone, websites) use a bare
   <main id="main"> with no .site-main class, so they need the same offset or
   in-page anchors land underneath the ~101px sticky header.
   scroll-margin-top only affects scroll-into-view positioning — no layout or
   paint effect, so this is safe to broaden. */
.site-main [id],
main#main [id] { scroll-margin-top: 122px; }
@media (max-width: 900px) {
	.site-main [id],
	main#main [id] { scroll-margin-top: 108px; }
}

@media (max-width: 1500px) and (min-width: 901px) {
	.nav-list { gap: 8px; }
	.logo { margin-right: 16px; }
	.nav-link { font-size: 13.5px; }
	.logo-strapline { display: none; }
	.nav-tab { padding: 7px 12px; font-size: 13px; }
}

/* Mobile nav: collapse before desktop labels need to shrink. */
@media (max-width: 1180px) {
	.header-inner { height: 100px; }
	.nav-toggle { display: flex; }
	/* The menu below 1181px is the phone drawer (css/phone-drawer.css,
	   27 Sep 2026); the accordion drawer's rules were retired with it. */
}
@media (max-width: 480px) {
	.logo-word { font-size: 19px; }
	.logo-strapline { font-size: 12px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { padding: var(--hero-y) 0 var(--hero-y-b); }
.hero .lead { max-width: 52ch; font-size: clamp(18px, 2.6vw, 22px); }

/* ============================================================
   Services
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-top: var(--stack); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--stack); }
@media (max-width: 720px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; }
a.card { display: block; text-decoration: none; color: inherit; transition: border-color .18s, box-shadow .18s; }
a.card:hover { border-color: var(--plum); box-shadow: 0 4px 18px rgba(92,36,65,.1); }
.section--tint .card { background: var(--paper); }
.card h3 { margin-top: 4px; }
.card p:last-child { margin-bottom: 0; }
.card .tag {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--plum); background: var(--blush);
  padding: 4px 10px; border-radius: 100px; margin-bottom: 14px;
}

/* Why / feature list */
.feature h3 { display: flex; align-items: baseline; gap: 10px; }
.feature .num { font-family: "Lora", serif; color: var(--stone-ink); font-size: 22px; font-weight: 700; }

/* ============================================================
   Pricing
   ============================================================ */
/* The old .price-group / .price-rows / .price-row / .name / .desc / .amount
   component was dead — nothing rendered that markup any more, and its
   `.price-row { display:flex }` collided with the current /pricing/ layout.
   The live rules for those class names now live in the /pricing/ block below. */
.price-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ============================================================
   Contact band
   ============================================================ */
.band { background: var(--ink); color: var(--paper); }
.band h2 { color: var(--paper); }
.band .lead { color: #c9cbce; }
.band .btn--ghost { color: var(--paper); border-color: rgba(247,245,241,0.35); }
.band .btn--ghost:hover { border-color: var(--blush); color: var(--blush); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: #C7C4BF;
  font-size: 14px;
  line-height: 1.65;
  padding: 48px 0 28px;
  /* No margin-top — the preceding .as-sec already carries its own bottom padding.
     Stacking margin here compounded to ~180px of dead space before the footer. */
}
.site-footer a { color: #E8E4DE; text-decoration: none; transition: color .15s ease; }
.site-footer a:hover,
.site-footer a:focus { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer-inner { display: flex; flex-direction: column; gap: 36px; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 64px;
  align-items: start;
}

.footer-brand-block { display: flex; flex-direction: column; gap: 24px; }

.footer-lockup {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none !important;
  color: inherit;
}
.footer-lockup:hover,
.footer-lockup:focus { text-decoration: none !important; }
.footer-lockup-mark { display: inline-flex; align-items: center; flex: 0 0 auto; }
.footer-lockup-mark .as-mark { width: 56px; height: auto; display: block; }
.footer-lockup-copy { display: flex; flex-direction: column; gap: 4px; line-height: 1.05; }
.footer-lockup-word {
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  color: #F7F5F1;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.footer-lockup-strapline {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--stone);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.footer-address {
  font-style: normal;
  color: #C7C4BF;
  font-size: 14px;
}
.footer-address a { color: #F7F5F1; }
.footer-address-note { font-size: 13px; color: #9A968F; }

/* Keep Ecologi's full live-impact badge, but scale the complete component down
   as one unit so its official internal layout remains untouched. The wrapper's
   dimensions reclaim the space that CSS transforms do not remove from flow. */
.footer-ecologi { align-self: flex-start; width: 206px; height: 143px; overflow: hidden; }
.footer-ecologi ecologi-impact-badge {
  display: block;
  width: 302px;
  transform: scale(.68);
  transform-origin: top left;
}

/* Reforestation strip — thin pale-mint band above the footer, appears on
   every page. Palette matches the climate widget's own light-card look, so
   reads as an environmental credit rather than a brand shout. */
.eco-strip { background: #DBF5D8; color: #125A4B; border-top: 1px solid #B6EEDF; border-bottom: 1px solid #B6EEDF; }
.eco-strip-inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 24px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; }
.eco-strip-mark { color: #125A4B; flex: 0 0 auto; opacity: 0.7; }

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer-nav-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-nav-col li { margin: 0; }
/* WCAG 2.5.8: these block-level links measured 16px tall against the 24px
   floor. Vertical padding grows the hit box past 24px; the matching negative
   margin hands the space straight back, so the visual rhythm (10px list gap,
   footer-base row height) is unchanged. */
.footer-nav-col li a,
.footer-base a,
.footer-address a {
  display: inline-block;
  padding-block: 5px;
  margin-block: -5px;
}
/* These are <h2> elements (they used to be <h4>, which skipped a heading level
   after each page's <h2>s). Every property the old h4 computed is pinned here
   so the element swap is pixel-identical — font-size and font-weight were the
   only two coming from the UA h4 defaults, the rest from the h1–h4 group rule. */
.footer-nav-heading {
  font-family: "Work Sans", -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--stone);
  margin: 0 0 18px;
}

.footer-base {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  align-items: flex-start;
  color: #9C9891;
  font-size: 13px;
}
.footer-payments { display: block; }
.footer-payment-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.payment-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  overflow: hidden;
}
.payment-mark--apple img,
.payment-mark--google img,
.payment-mark--bacs img { display: block; width: 34px; height: auto; }
.payment-mark--cards { gap: 3px; }
.payment-mark--cards img { display: block; width: 32px; height: auto; }
.footer-base-strap {
  font-family: "Lora", Georgia, serif;
  font-style: italic;
  color: var(--stone);
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: 48px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
}
@media (max-width: 480px) {
  .site-footer { padding: 38px 0 24px; }
  .footer-lockup-word { font-size: 24px; }
  .footer-lockup-mark .as-mark { width: 48px; height: auto; }
  .footer-nav { grid-template-columns: 1fr; gap: 28px; }
  .footer-base { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Block editor home page (native Gutenberg blocks)
   Sections are full-width groups; inner content is constrained
   to 1080px by theme.json. Classes below add padding + colour.
   ============================================================ */
.site-main { width: 100%; }

/* Section bands */
.as-sec { padding: var(--sec-y) 24px; }
.as-sec.as-hero { padding-top: var(--hero-y); padding-bottom: var(--hero-y-b); }
.as-sec-tint { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Two bands of the same tone back to back would pay the section padding twice —
   ~110px of air at desktop, which reads as one dead gap rather than two
   sections. Collapse the shared boundary to a single comfortable step. */
.as-sec-tint + .as-sec-tint,
.as-sec:not(.as-sec-tint):not(.as-sec-dark):not(.as-sec-cta) + .as-sec:not(.as-sec-tint):not(.as-sec-dark):not(.as-sec-cta) {
	padding-top: calc(var(--sec-y) * 0.6);
}
.as-sec-tint:has(+ .as-sec-tint),
.as-sec:not(.as-sec-tint):not(.as-sec-dark):not(.as-sec-cta):has(+ .as-sec:not(.as-sec-tint):not(.as-sec-dark):not(.as-sec-cta)) {
	padding-bottom: calc(var(--sec-y) * 0.6);
}
.as-sec-dark { background: var(--ink); }
.as-sec-dark, .as-sec-dark h1, .as-sec-dark h2, .as-sec-dark h3, .as-sec-dark p { color: var(--paper); }
.as-sec-dark .lead { color: #c9cbce; }
/* Final conversion band on service pages. Blush so the ink footer that follows
   actually reads as a distinct band — previously the last section was ink and
   merged straight into the footer's ink. */
.as-sec-cta { background: var(--blush); }
.as-sec-cta, .as-sec-cta h1, .as-sec-cta h2, .as-sec-cta h3 { color: var(--ink); }
.as-sec-cta p, .as-sec-cta .lead { color: var(--muted); }
/* The default outline border is --border, which all but vanishes on blush. */
.as-sec-cta .btn-outline { border-color: var(--plum); color: var(--plum); }
.as-sec-cta .btn-outline:hover { background: var(--plum); color: #fff; }
.cta-contact-line { margin: 24px auto 0; max-width: 60ch; font-size: 14px; color: var(--muted); line-height: 1.6; }
.cta-contact-line a { color: var(--plum); font-weight: 600; font-variant-numeric: tabular-nums; }
.as-sec-cta .eyebrow { color: var(--plum); }

/* Cards (service blocks) */
.as-sec .card { height: 100%; }
.as-sec-tint .card { background: var(--paper); }

/* Feature numbers (about) */
.as-num {
	font-family: "Lora", serif; color: var(--stone-ink); font-weight: 700;
	font-size: 26px; line-height: 1; margin: 0 0 6px;
}

/* Pricing tables (core Table block, editable) */
.price-label {
	font-family: "Lora", serif; font-weight: 600; font-size: 22px;
	margin: var(--stack) 0 8px;
}
.price-label:first-of-type { margin-top: 8px; }
.price-table { margin: 0 0 8px; }
.price-table table { width: 100%; border-collapse: collapse; border: 0; }
.price-table td {
	padding: 16px 0; border: 0; border-bottom: 1px solid var(--border);
	vertical-align: top; line-height: 1.5;
}
.price-table tr td:first-child { padding-right: 20px; }
.price-table tr td:last-child {
	text-align: right; white-space: nowrap; width: 1%;
	font-family: "Lora", serif; font-weight: 600; font-size: 19px; color: var(--plum);
	vertical-align: middle;
}
.price-table td strong { font-weight: 600; }
.price-table td em { color: var(--muted); font-style: normal; font-size: 15px; }
.price-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* "How you pay" — the 50/50 deposit terms, published as a trust signal
   rather than left for a burned buyer to find in clause 5 of the T&Cs. */
.price-pay { margin: 44px auto 0; max-width: 820px; padding: 24px 28px;
  background: var(--blush); border-radius: 12px; }
.price-pay h2 { margin: 0 0 10px; font-size: 22px; color: var(--ink); }
.price-pay p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.price-pay a { color: var(--plum); }
.tier-note--pay { margin-top: 14px; }

/* ── /pricing/ — grouped price cards ─────────────────────────
   The page used to be one 820px ledger column of tables, which read as a
   legal document rather than a price list you can act on. Now each group is
   a card with its own button into the page that explains what the money
   buys, and the figure carries the weight instead of the sentence around it.
   Amount = big plum figure + small muted qualifier ("from", "/mo", "setup"),
   so "From £499" no longer sets the qualifier at the same size as the number. */
.price-caveat { color: var(--muted); font-size: 15px; margin-top: 8px; }

.price-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.price-jump a {
  display: inline-block; padding: 7px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.price-jump a:hover, .price-jump a:focus-visible {
  border-color: var(--plum); color: var(--plum); background: var(--paper); text-decoration: none;
}

/* Two columns via `columns` rather than a grid: the groups run from one row
   to six, and a 2-col grid left tall empty holes wherever a short group sat
   next to a long one. Column flow packs them tight, and the jump nav above
   means nobody has to scan for a group anyway. */
.price-groups { columns: 2; column-gap: 20px; }
.price-group {
  display: flex; flex-direction: column;
  break-inside: avoid; margin: 0 0 20px;
  padding: 26px 26px 24px; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
  scroll-margin-top: 140px;
}
.price-group__name {
  margin: 0 0 4px; font-size: 22px; font-weight: 600;
  padding-bottom: 14px; border-bottom: 2px solid var(--blush);
}
.price-rows { list-style: none; margin: 0; padding: 0; }
.price-row + .price-row { border-top: 1px solid var(--border); }
.price-row__link {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 13px 10px 13px 0; margin-right: -10px;
  color: var(--ink); text-decoration: none;
  border-radius: 6px; transition: background .15s;
}
.price-row__link:hover, .price-row__link:focus-visible {
  background: var(--paper); text-decoration: none; padding-left: 10px; margin-left: -10px;
}
.price-row__text { display: block; }
.price-row__label { display: block; font-size: 15.5px; font-weight: 600; }
.price-row__note { display: block; margin-top: 2px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.price-row__amount {
  display: flex; flex-direction: column; align-items: flex-end;
  flex-shrink: 0; text-align: right;
}
.price-row__figure {
  font-family: "Lora", serif; font-weight: 600; font-size: 26px; line-height: 1.05;
  color: var(--plum); white-space: nowrap;
}
/* "from" sits before the figure at body size so £65 stays the thing you read,
   rather than "From £65" setting both at 26px serif and flattening the two. */
.price-row__pre {
  font-family: system-ui, sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--muted); letter-spacing: .02em;
}
.price-row__qual {
  margin-top: 3px; max-width: 15ch; color: var(--muted); font-size: 12px;
  font-weight: 600; letter-spacing: .02em; line-height: 1.35;
}
.price-group__foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }
.price-group__foot .btn-primary,
.price-group__foot .btn-outline { padding: 11px 20px; font-size: 14px; }

@media (max-width: 900px) {
  .price-groups { columns: 1; }
}
@media (max-width: 480px) {
  .price-group { padding: 22px 20px 20px; }
  .price-row__link { gap: 12px; }
  .price-row__figure { font-size: 22px; }
  .price-group__foot .btn-primary,
  .price-group__foot .btn-outline { flex: 1 1 auto; text-align: center; }
}

/* Column alignment fix — WordPress defaults to vertical-centre, which
   throws multi-line columns out of line. Stretch = equal height, top-aligned. */
.as-sec .wp-block-columns { gap: var(--gap); margin-top: var(--stack); align-items: stretch; }
.as-sec .wp-block-column { display: flex; flex-direction: column; }
.price-group .wp-block-columns { margin-top: 0; gap: 20px; align-items: baseline; }

/* Cards fill their column so pairs are equal height */
.as-sec .card { height: auto; flex: 1; }

/* Native buttons restyled to brand (higher specificity to beat core defaults) */
.wp-block-button > .wp-block-button__link {
	background-color: var(--plum); color: #fff; border-radius: var(--radius);
	padding: 13px 26px; font-weight: 600; font-size: 15px;
	font-family: "Work Sans", sans-serif; border: 1px solid var(--plum);
}
.wp-block-button > .wp-block-button__link:hover { background-color: var(--plum-d); border-color: var(--plum-d); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent; color: var(--ink); border: 1px solid var(--border);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--plum); color: var(--plum); }
.as-sec-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--paper); border-color: rgba(247,245,241,0.35);
}

/* Hero: text + illustration side by side, vertically centred */
.as-hero .wp-block-columns { align-items: center; margin-top: 0; }
.as-cairn { display: block; width: 100%; max-width: 280px; margin: 0 auto; }
@media (max-width: 720px) {
	.as-cairn { max-width: 200px; margin-top: 12px; }
}

/* ============================================================
   4-service card grid
   ============================================================ */
.svc-four {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: var(--stack);
}
@media (max-width: 720px) { .svc-four { grid-template-columns: 1fr; } }

/* Homepage work cards */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: var(--stack);
}
.work-card {
  min-height: 100%;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.work-card h3 { margin-top: 4px; }
.work-card p:last-child { margin-bottom: 0; }
.work-card a { font-weight: 600; }
@media (max-width: 720px) { .work-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Homepage v3 — grouped services
   ============================================================ */
.as-home-hero {
  position: relative; overflow: hidden;
  padding: var(--hero-y) 24px var(--hero-y-b);
  background:
    radial-gradient(circle at 92% 8%, rgba(232,208,218,.72), transparent 27%),
    radial-gradient(circle at 6% 94%, rgba(187,171,154,.18), transparent 28%),
    var(--paper);
}
.as-home-hero::after {
  content: ''; position: absolute; right: -130px; top: -170px;
  width: 420px; height: 420px; border: 1px solid rgba(92,36,65,.1); border-radius: 50%;
  pointer-events: none;
}
.home-hero-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0,1.18fr) minmax(300px,.82fr);
  gap: clamp(48px, 8vw, 104px); align-items: center;
}
.home-hero-copy { align-self: center; }
.home-hero-copy h1 { max-width: 850px; margin: 0 0 22px; font-size: clamp(40px,5.4vw,68px); line-height: 1.05; letter-spacing: -.025em; }
.home-hero-copy .lead { max-width: 620px; margin: 0; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.home-capability-map {
  position: relative; padding: 18px; background: rgba(255,255,255,.72);
  border: 1px solid rgba(92,36,65,.18); border-radius: 16px;
  box-shadow: 0 28px 80px rgba(28,32,36,.13); backdrop-filter: blur(10px);
}
.home-capability-map::before {
  content: ''; position: absolute; inset: 9px; border: 1px solid rgba(92,36,65,.07);
  border-radius: 11px; pointer-events: none;
}
/* Icon + copy in one row. The hero's right-hand column was five stacked
   paragraphs of text next to a headline of text; the icon gives each row a
   visual anchor and lets the copy sit tighter. */
.home-capability-item { position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.home-capability-item:last-of-type { border-bottom: 0; }
.home-capability-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(232,208,218,.42); color: var(--plum);
}
.home-capability-ico svg { width: 21px; height: 21px; display: block; }
.home-capability-body { min-width: 0; }
.home-capability-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.home-capability-num { font-family: 'Lora',serif; color: var(--stone-ink); font-size: 13px; font-weight: 700; }
.home-capability-item strong { font-family: 'Lora',serif; font-size: 20px; line-height: 1.2; }
.home-capability-item small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.55; }
.home-capability-signoff { margin: 10px 20px 5px; color: var(--plum); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.home-section-head { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.home-section-head .lead { max-width: 620px; margin: 0 auto; }
.home-category-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.home-category-grid--four { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
@media (max-width: 1100px) { .home-category-grid--four { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.home-category-card {
  position: relative; display: flex; flex-direction: column; min-height: 100%; overflow: hidden;
  padding: 32px 28px 26px; background: var(--paper); border: 1px solid var(--border);
  border-radius: 10px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-category-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--plum); transform: scaleX(.36); transform-origin: left; transition: transform .2s ease; }
.home-category-card:hover { transform: translateY(-4px); border-color: rgba(92,36,65,.45); box-shadow: 0 18px 48px rgba(28,32,36,.09); }
.home-category-card:hover::before { transform: scaleX(1); }
.home-category-kicker { display: flex; align-items: center; justify-content: space-between; margin: 0 0 22px; color: var(--plum); font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.home-category-kicker span { font-family: 'Lora',serif; color: var(--stone-ink); font-size: 14px; }
.home-category-card h3 { margin-bottom: 10px; font-size: 25px; }
.home-category-card > p { color: var(--muted); font-size: 14.5px; }
.home-service-links { list-style: none; margin: auto 0 0; padding: 22px 0 0; }
.home-service-links li { border-top: 1px solid var(--border); }
.home-service-links a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; color: var(--ink); font-size: 13.5px; font-weight: 600; }
.home-service-links a:hover { color: var(--plum); text-decoration: none; }
.home-service-links a span { color: var(--stone-ink); transition: transform .15s ease; }
.home-service-links a:hover span { transform: translateX(3px); color: var(--plum); }

/* Evidence-led reassurance on the domestic page. Kept as a calm proof strip,
   rather than turning safeguarding and insurance into sales badges. */
.home-trust-proof {
  margin: 30px 0 0; padding: 18px 20px;
  border-left: 4px solid var(--plum); border-radius: 0 8px 8px 0;
  background: var(--blush); color: var(--muted); font-size: 14.5px; line-height: 1.65;
}
.home-trust-proof strong { color: var(--ink); }

/* Compact multi-service capability map on the hero */
.home-capability-map--four .home-capability-item,
.home-capability-map--five .home-capability-item { padding: 13px 18px; gap: 12px; }
.home-capability-map--four .home-capability-ico,
.home-capability-map--five .home-capability-ico { width: 36px; height: 36px; border-radius: 9px; }
.home-capability-map--four .home-capability-ico svg,
.home-capability-map--five .home-capability-ico svg { width: 19px; height: 19px; }
.home-capability-map--four .home-capability-item strong,
.home-capability-map--five .home-capability-item strong { font-size: 17px; }
.home-capability-map--four .home-capability-item small,
.home-capability-map--five .home-capability-item small { font-size: 12px; }

/* Self-scrolling ticker of every service */
.home-service-ticker {
  margin-top: var(--stack);
  overflow: hidden; position: relative;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.55);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.home-service-ticker-track {
  display: flex; gap: 40px; padding: 14px 0;
  width: max-content;
  animation: home-ticker 60s linear infinite;
}
.home-service-ticker:hover .home-service-ticker-track { animation-play-state: paused; }
.home-service-ticker-track span {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: .02em;
  white-space: nowrap;
}
.home-service-ticker-track span::after {
  content: '·'; margin-left: 40px; color: var(--stone); font-weight: 400;
}
.home-service-ticker-track span:last-child::after { content: ''; margin: 0; }
@keyframes home-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .home-service-ticker-track { animation: none; } }

/* Homepage product showcase — photoreal service mockups (transparent WebP with
   baked-in drop shadows) floating on the paper background, same treatment as
   the .offer-showcase bands on the service pages. Tighter vertical rhythm now
   the Recent work band below is gone. */
.home-showcase { padding: clamp(24px, 3.2vw, 36px) 24px clamp(26px, 3.6vw, 40px); }
.home-showcase-inner { max-width: var(--maxw); margin: 0 auto; }
.home-showcase .home-section-head { margin-bottom: 0; }
.home-showcase-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(16px, 3vw, 36px); align-items: end;
  margin-top: clamp(16px, 2.2vw, 24px);
}
.home-showcase-item { margin: 0; }
.home-showcase-item > a { display: block; transition: transform .25s ease; }
.home-showcase-item > a:hover,
.home-showcase-item > a:focus-visible { transform: translateY(-4px); }
.home-showcase-item > a:focus-visible { outline: 2px solid var(--plum); outline-offset: 6px; border-radius: 4px; }
.home-showcase-item img { width: 100%; height: auto; display: block; }
.home-showcase-item figcaption { margin-top: 10px; text-align: center; }
.home-showcase-item figcaption a { font-size: 14px; font-weight: 600; color: var(--plum); text-decoration: none; }
.home-showcase-item figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Food ordering tile — the Sarum Street Kitchen demo scroll-through playing
   inside a laptop mockup instead of a still. The frame WebP has a transparent
   screen cut-out, so the video sits behind it and shows through the hole. The
   percentages below are measured from the frame artwork (screen rect
   130,24 → 1042,592 of 1173x824) — re-measure if the frame is ever replaced. */
.home-showcase-laptop { position: relative; display: block; aspect-ratio: 880 / 618; }
.home-showcase-laptop__screen {
  position: absolute;
  left: 11.083%; top: 2.913%; width: 77.835%; height: 69.054%;
  object-fit: cover; object-position: top center;
  background: var(--ink, #1e2529);
  z-index: 0;
}
.home-showcase-laptop__frame { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .home-showcase-row { grid-template-columns: 1fr; gap: 32px; }
  .home-showcase-item { max-width: 440px; margin: 0 auto; width: 100%; }
}

/* Homepage project starter — the broad hand-off into the client portal.
   Blush background so this row visually contrasts with the ink footer that
   follows (previously both were ink and merged into one dark band). */
.home-project-starter { padding: var(--sec-y-lg) 24px; background: var(--blush); }
.home-project-starter-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: clamp(40px, 7vw, 88px); align-items: center;
}
.home-project-copy .eyebrow { color: var(--plum); }
.home-project-copy h2 { max-width: 15ch; margin: 0 0 16px; color: var(--ink); font-size: clamp(31px, 4.4vw, 50px); }
.home-project-copy .lead { max-width: 52ch; margin: 0; color: var(--muted); }
.home-project-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.home-project-email { color: var(--plum); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.home-project-email:hover { color: var(--plum-d); }
.home-project-note { margin: 15px 0 0; color: var(--muted); font-size: 12.5px; }
.home-project-note a { color: var(--plum); font-weight: 600; }
.home-project-email { font-variant-numeric: tabular-nums; }
/* What happens next (2026-09-26): fills the right-hand column, which had
   stood empty since the old service groups were removed. */
.home-project-steps { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px rgba(28,32,36,.07); overflow: hidden; }
.home-project-steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px 26px; }
.home-project-steps li + li { border-top: 1px solid rgba(28,32,36,.07); }
.home-project-step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #F6ECF0;
  color: var(--plum); font-family: "Lora", Georgia, serif; font-size: 15px; font-weight: 700; }
.home-project-steps strong { display: block; color: var(--ink); font-family: "Lora", Georgia, serif; font-size: 18px; line-height: 1.3; }
.home-project-steps small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 480px) { .home-project-steps li { padding: 18px 18px; gap: 14px; } }

@media (max-width: 900px) {
  .home-hero-grid { grid-template-columns: 1fr; gap: 42px; }
  .home-capability-map { max-width: 620px; }
  .home-category-grid, .home-category-grid--four { grid-template-columns: 1fr; }
	.home-category-card { min-height: 0; }
	.home-project-starter-inner { grid-template-columns: 1fr; gap: 34px; }
	.home-project-copy h2 { max-width: 19ch; }
  .home-service-ticker-track { animation-duration: 45s; }
}
@media (max-width: 480px) {
  .as-home-hero { padding: 52px 16px 48px; }
  .home-hero-grid { gap: 28px; }
  .home-hero-copy h1 { max-width: 12ch; margin-bottom: 16px; font-size: clamp(34px,10.5vw,44px); line-height: 1.02; }
  .home-hero-actions { margin-top: 24px; }
  .home-capability-map { padding: 10px; }
  .home-capability-item { padding: 14px 12px; gap: 12px; }
  .home-category-card { padding: 26px 22px; }
  .home-project-starter { padding-left: 16px; padding-right: 16px; }
}

/* Service-card icons */
.as-ico-web::before, .as-ico-it::before, .as-ico-ai::before, .as-ico-systems::before,
.as-ico-drone::before, .as-ico-brand::before,
.as-ico-reel::before, .as-ico-play::before,
.as-ico-pc::before, .as-ico-wifi::before, .as-ico-home::before, .as-ico-shield::before {
	content: ""; display: block; width: 42px; height: 42px; margin-bottom: 18px;
	background-repeat: no-repeat; background-position: left center; background-size: contain;
}
.as-ico-pc::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1'/%3E%3Cpath d='M2 20h20'/%3E%3C/svg%3E");
}
.as-ico-wifi::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5a10 10 0 0 1 14 0'/%3E%3Cpath d='M8.5 16a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='19' r='.7' fill='%235C2441' stroke='none'/%3E%3C/svg%3E");
}
.as-ico-home::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3C/svg%3E");
}
.as-ico-shield::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z'/%3E%3C/svg%3E");
}
.as-ico-ai::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 3l1.8 5L17.5 10l-4.7 2L11 17l-1.8-5L4.5 10l4.7-1z'/%3E%3Cpath d='M18 14l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E");
}
.as-ico-web::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='14' rx='1.5'/%3E%3Cpath d='M3 8h18'/%3E%3Cpath d='M9 21h6'/%3E%3Cpath d='M12 18v3'/%3E%3C/svg%3E");
}
.as-ico-it::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2-2 2.6-2.6z'/%3E%3C/svg%3E");
}
.as-ico-systems::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1'/%3E%3Crect x='15' y='3' width='6' height='6' rx='1'/%3E%3Crect x='9' y='15' width='6' height='6' rx='1'/%3E%3Cpath d='M6 9v3h6M18 9v3h-6M12 12v3'/%3E%3C/svg%3E");
}
.as-ico-drone::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 9.5V7M12 17v-2.5M9.5 12H7M17 12h-2.5'/%3E%3Cellipse cx='5.5' cy='5.5' rx='2' ry='1.2' transform='rotate(-30 5.5 5.5)'/%3E%3Cellipse cx='18.5' cy='5.5' rx='2' ry='1.2' transform='rotate(30 18.5 5.5)'/%3E%3Cellipse cx='5.5' cy='18.5' rx='2' ry='1.2' transform='rotate(30 5.5 18.5)'/%3E%3Cellipse cx='18.5' cy='18.5' rx='2' ry='1.2' transform='rotate(-30 18.5 18.5)'/%3E%3Cpath d='M7.5 7.5l3 3M16.5 7.5l-3 3M7.5 16.5l3-3M16.5 16.5l-3-3'/%3E%3C/svg%3E");
}
.as-ico-brand::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L9 9H2l5.5 4-2 7L12 16l6.5 4-2-7L22 9h-7z'/%3E%3C/svg%3E");
}
.as-ico-reel::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='3' width='10' height='18' rx='2'/%3E%3Cpath d='M10.5 9l4 3-4 3z' fill='%235C2441' stroke='none'/%3E%3C/svg%3E");
}
.as-ico-play::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8l6 4-6 4z' fill='%235C2441' stroke='none'/%3E%3C/svg%3E");
}

/* ============================================================
   Shared button helpers (used on service pages)
   ============================================================ */
.btn-primary {
  display: inline-block; padding: 12px 26px; background: var(--plum); color: #fff;
  border-radius: var(--btn-radius); font-weight: 600; font-size: 15px; text-decoration: none;
  border: 2px solid var(--plum); transition: background .15s, border-color .15s;
}
.btn-primary:hover { background: #4a1d34; border-color: #4a1d34; color: #fff; }
.btn-outline {
  display: inline-block; padding: 12px 26px; background: transparent; color: var(--ink);
  border-radius: var(--btn-radius); font-weight: 600; font-size: 15px; text-decoration: none;
  border: 2px solid var(--border); transition: border-color .15s, color .15s;
}
.btn-outline:hover { border-color: var(--plum); color: var(--plum); }
.btn-light {
  display: inline-block; padding: 12px 26px; background: #fff; color: var(--ink);
  border-radius: var(--btn-radius); font-weight: 600; font-size: 15px; text-decoration: none;
  border: 2px solid #fff; transition: background .15s;
}
.btn-light:hover { background: var(--paper); }

/* ============================================================
   Service page — hero
   ============================================================ */
.svc-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  align-items: center; justify-content: center; max-width: 1080px; margin: 0 auto;
}
.svc-hero h1 { margin: 12px 0 20px; }
.svc-hero .lead { margin-bottom: 26px; max-width: 52ch; }
.svc-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-hero-visual { display: flex; align-items: center; justify-content: center; position: relative; }
.svc-hero-visual::before { content: ''; position: absolute; width: 70%; height: 70%; background: radial-gradient(ellipse at center, rgba(92,36,65,.15) 0%, transparent 70%); border-radius: 50%; z-index: 0; }
.svc-hero-img { width: 100%; max-width: 480px; height: auto; filter: drop-shadow(0 16px 48px rgba(92,36,65,.2)); position: relative; z-index: 1; }
@media (max-width: 900px) {
  .svc-hero-inner { grid-template-columns: 1fr; gap: 32px; justify-content: stretch; }
  .svc-hero-visual { margin-top: 8px; }
  .svc-hero-img { max-width: 380px; margin: 0 auto; }
}

/* Section wave dividers */
.section-wave { line-height: 0; margin-bottom: -2px; }
.section-wave svg { display: block; width: 100%; height: 56px; }
.section-wave--to-white { background: var(--paper); }

/* ============================================================
   Mobile global — tighten padding on narrow viewports
   ============================================================ */
@media (max-width: 720px) {
  .as-sec { padding-left: 16px; padding-right: 16px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .as-estimate { padding-left: 16px; padding-right: 16px; }
}

/* Once CTA pairs stack, size them to the gutter instead of to their label —
   two buttons of different widths sitting on top of each other reads as a bug. */
@media (max-width: 560px) {
  .home-hero-actions,
  .svc-hero-ctas,
  .offer-hero-actions { flex-direction: column; align-items: stretch; }
  .home-hero-actions > .btn,
  .svc-hero-ctas > .btn,
  .offer-hero-actions > .btn { width: 100%; text-align: center; justify-content: center; }
  .offer-hero-actions > .offer-text-link { text-align: center; }
}

/* ============================================================
   Service page — tiers
   ============================================================ */
.tier-cards {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 24px;
}
.tier-cards--two { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; margin-left: auto; margin-right: auto; }
.tier-card {
  display: flex; flex-direction: column;
  border: 2px solid var(--border); border-radius: 12px; overflow: hidden;
  background: var(--paper);
}
.tier-card--featured { border-color: var(--plum); position: relative; }
.tier-card-badge {
  position: absolute; top: -1px; right: 20px;
  background: var(--plum); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 0 0 8px 8px;
}
.tier-card-top { padding: 28px 24px 20px; border-bottom: 1px solid var(--border); }
.tier-card--featured .tier-card-top { background: var(--plum); color: #fff; border-bottom-color: rgba(255,255,255,.15); }
.tier-name { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: .65; margin: 0 0 8px; }
.tier-price { font-family: 'Lora', serif; font-size: 42px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
/* .8 not .6 — at .6 this read 4.24:1 on --paper and 5.25:1 on the featured
   plum top; .8 clears 4.5 in both (8.07:1 / 8.09:1). */
.tier-pages { font-size: 14px; opacity: .8; margin: 0; }
.tier-list {
  flex: 1; list-style: none; padding: 20px 24px; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.tier-list li { font-size: 14px; padding-left: 22px; position: relative; }
.tier-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: var(--plum); font-weight: 700; font-size: 13px;
}
.tier-card--featured .tier-list li::before { color: var(--plum); }
.tier-cta {
  display: block; margin: 0 24px 24px; padding: 12px; text-align: center;
  background: var(--plum); color: #fff; border-radius: var(--btn-radius);
  font-weight: 600; font-size: 15px; text-decoration: none; transition: background .15s;
}
.tier-cta:hover { background: #4a1d34; color: #fff; }
.tier-cta--light { background: #fff; color: var(--plum); }
.tier-cta--light:hover { background: var(--paper); color: var(--plum); }
.tier-note { text-align: center; color: var(--muted); font-size: 14px; margin: 0; }
#assets .tier-note, #video .tier-note { margin: 28px auto 0; max-width: 62ch; }
@media (max-width: 900px) { .tier-cards { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } }

/* "Everything included" panel — replaces the old feature-gated tier cards */
.incl-card {
  max-width: 860px; margin: 0 auto 28px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); padding: 34px 38px;
}
.incl-card-head { font-weight: 700; font-size: 16px; margin: 0 0 20px; color: var(--ink); }
.incl-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px 30px;
}
.incl-list li { font-size: 15px; padding-left: 27px; position: relative; line-height: 1.5; }
.incl-list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--plum); font-weight: 700;
}
.incl-foot {
  margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--border);
  font-size: 14.5px; color: var(--muted); line-height: 1.6;
}
@media (max-width: 640px) { .incl-list { grid-template-columns: 1fr; } .incl-card { padding: 26px 22px; } }

/* Prominent free-site-check band on the websites page */
.free-check-band {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--ink); border-radius: var(--radius); padding: 32px 40px; margin-bottom: 44px;
}
.free-check-band-text { max-width: 62ch; }
.free-check-band .eyebrow { color: var(--stone); margin-bottom: 8px; }
.free-check-band h3 { color: #fff; margin: 0 0 10px; font-size: clamp(20px, 2.4vw, 24px); }
.free-check-band p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; margin: 0; }
.free-check-band-cta { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 760px) { .free-check-band { flex-direction: column; align-items: flex-start; padding: 28px 24px; } }

/* "Speak to us" row — for work we genuinely quote case by case, where a priced
   card grid would promise more precision than we have. */
.talk-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 30px 34px;
  /* The section behind this resolves to white, so the border alone left the
     panel almost invisible. A soft lift reads on white and on paper alike. */
  box-shadow: 0 10px 28px rgba(28, 32, 36, 0.07);
}
.talk-row-text h2 { margin: 0 0 10px; font-size: 27px; }
.talk-row-text p { margin: 0; color: var(--muted); max-width: 62ch; }
.talk-row-cta { display: flex; flex-direction: column; gap: 10px; }
.talk-row-cta .btn { white-space: nowrap; text-align: center; }
@media (max-width: 820px) {
  .talk-row { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .talk-row-cta { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   Service page — process
   Editorial numbered steps. Number is a serif watermark generated
   from a CSS counter so it works even where markup omits it, and
   bleeds off the card so the sequence reads before you focus on
   any single card. Hover lifts the card, deepens the watermark
   and slides an underline out from under the title. Card entrance
   is scroll-driven where supported — silently static in Firefox.

   Entrance and hover both compose transform via registered custom
   properties so the scroll animation and the hover transition can
   coexist without one overriding the other.
   ============================================================ */
@property --step-enter-y  { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --step-enter-op { syntax: '<number>'; inherits: false; initial-value: 1;   }
@property --step-hover-y  { syntax: '<length>'; inherits: false; initial-value: 0px; }

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
  counter-reset: process-step;
}

.process-step {
  counter-increment: process-step;
  position: relative;
  padding: 30px 26px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  opacity: var(--step-enter-op);
  transform: translateY(calc(var(--step-enter-y) + var(--step-hover-y)));
  transition:
    border-color     .28s ease,
    box-shadow       .28s ease,
    --step-hover-y   .28s cubic-bezier(.2,.7,.2,1);
}

/* Editorial serif numeral — always present, generated from counter.
   Sits behind the content, bleeds off the top-right corner. */
.process-step::before {
  content: counter(process-step, decimal-leading-zero);
  position: absolute;
  top: -14px;
  right: -6px;
  z-index: -1;
  font-family: 'Lora', Georgia, serif;
  font-size: 108px;
  font-weight: 500;
  line-height: 1;
  color: var(--plum);
  opacity: .07;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition:
    opacity   .38s ease,
    transform .5s cubic-bezier(.2,.7,.2,1);
}

/* The old inline .process-num label is now redundant — the watermark
   speaks louder. Hide it for sighted users while leaving text in the
   DOM for anyone who wants to walk the source. */
.process-num {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.process-icon {
  width: 52px;
  height: 52px;
  background: var(--blush);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-bottom: 20px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.process-icon svg { width: 100%; height: 100%; }

.process-step h3 {
  position: relative;
  display: inline-block;
  margin: 0 0 10px;
  font-size: 20px;
}
.process-step h3::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  height: 2px;
  width: 100%;
  background: var(--plum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}

.process-step p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Hover — lift the card, deepen the watermark, slide the underline. */
.process-step:hover,
.process-step:focus-within {
  border-color: rgba(92, 36, 65, .28);
  --step-hover-y: -3px;
  box-shadow: 0 20px 40px -24px rgba(28, 32, 36, .28);
}
.process-step:hover::before,
.process-step:focus-within::before {
  opacity: .17;
  transform: translate(-6px, 4px);
}
.process-step:hover .process-icon,
.process-step:focus-within .process-icon {
  transform: rotate(-4deg) scale(1.04);
}
.process-step:hover h3::after,
.process-step:focus-within h3::after {
  transform: scaleX(1);
}

/* Scroll-driven reveal — progressive enhancement.
   Browsers without animation-timeline show cards immediately. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .process-step {
      animation: processStepIn linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
    }
    @keyframes processStepIn {
      from { --step-enter-op: 0; --step-enter-y: 28px; }
      to   { --step-enter-op: 1; --step-enter-y: 0px; }
    }
  }
}

@media (max-width: 900px) {
  .process-steps { gap: 16px; }
  .process-step::before { font-size: 88px; top: -10px; }
}
@media (max-width: 720px) {
  .process-steps { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .process-step { padding: 24px 22px 22px; }
  .process-step::before { font-size: 76px; top: -8px; right: -4px; }
}

/* ============================================================
   Service page — FAQ
   ============================================================ */
.svc-faq-inner { display: grid; grid-template-columns: 240px 1fr; gap: 64px; align-items: start; }
.faq-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-item dt { font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.faq-item dd { color: var(--muted); font-size: 15px; margin: 0; line-height: 1.65; }
@media (max-width: 720px) { .svc-faq-inner { grid-template-columns: 1fr; gap: 28px; } }

/* ============================================================
   IT support page cards
   ============================================================ */
.it-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.it-response { margin: 28px 0 0; padding: 24px 28px; background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--plum); }
.it-response h3 { margin: 0 0 16px; font-size: 20px; }
.it-response ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.it-response li { display: grid; gap: 4px; align-content: start; }
.it-response strong { font-family: 'Lora', Georgia, serif; font-size: 22px; color: var(--plum); }
.it-response span { color: var(--muted); font-size: 14px; line-height: 1.5; }
.it-response p { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.it-response a { color: var(--plum); }
@media (max-width: 760px) { .it-response { padding: 20px; } .it-response ul { grid-template-columns: 1fr; gap: 14px; } }
.it-cards.about-service-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 0;
}
.about-service-grid .it-card { grid-column: span 2; }
.about-service-grid .it-card:nth-child(4) { grid-column: 2 / span 2; }
.it-card { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 28px 24px; }
.it-card-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--plum); margin: 0 0 10px; }
.it-card p { color: var(--muted); font-size: 15px; margin: 0 0 16px; }
/* Cards that end in a tier button: push the button to the card foot so a row of
   cards lines its buttons up, whatever the length of the copy above them. */
.it-card:has(> .tier-cta:last-child) { display: flex; flex-direction: column; }
.it-card:has(> .tier-cta:last-child) > :nth-last-child(2) { margin-bottom: 20px !important; }
.it-card > .tier-cta:last-child { margin-top: auto !important; }
.it-card p.it-price { font-size: 28px; }
.it-card p.it-card-label { font-size: 12px; color: var(--plum); }
.it-price { font-family: 'Lora', serif; font-size: 22px; font-weight: 600; color: var(--ink) !important; margin: 0 !important; }
@media (max-width: 900px) {
  .it-cards.about-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-service-grid .it-card,
  .about-service-grid .it-card:nth-child(4) { grid-column: auto; }
  .about-service-grid .it-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .it-cards, .it-cards.about-service-grid { grid-template-columns: 1fr; }
  .about-service-grid .it-card:last-child { grid-column: auto; }
}

/* ============================================================
   Business systems page
   ============================================================ */
.svc-four .svc-featured { grid-column: 1 / -1; }
.systems-window {
  width: min(100%, 390px); margin: 0 auto; overflow: hidden;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 22px 55px rgba(28,32,36,.13); transform: rotate(1.5deg);
}
.systems-window-bar { display: flex; gap: 6px; padding: 12px 15px; background: var(--ink); }
.systems-window-bar span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.38); }
.systems-window-bar span:first-child { background: var(--blush); }
.systems-window-head { display: flex; flex-direction: column; gap: 3px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.systems-window-head strong { font-family: 'Lora', Georgia, serif; font-size: 19px; }
.systems-window-head span { color: var(--muted); font-size: 12px; }
.systems-window-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 22px; border-bottom: 1px solid var(--border); font-size: 13px; }
.systems-window-row:last-child { border-bottom: 0; }
.systems-window-row b { color: var(--plum); font-size: 12px; }
.systems-pill { background: var(--blush); padding: 4px 8px; border-radius: 999px; }
.systems-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.systems-capability { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.systems-capability-num { display: block; margin-bottom: 18px; color: var(--plum); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.systems-capability h3 { margin-bottom: 10px; }
.systems-capability p { margin: 0; color: var(--muted); font-size: 15px; }
.systems-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: center; }
.systems-friction-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.systems-friction-list li { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 9px; padding: 16px 16px 16px 42px; font-size: 14px; line-height: 1.45; }
.systems-friction-list li::before { content: ''; position: absolute; left: 20px; top: 23px; width: 7px; height: 7px; border-radius: 50%; background: var(--plum); }
.systems-case-head { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; align-items: end; margin-bottom: 42px; }
.systems-case-head .lead { margin: 0; }
.systems-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.16); }
.systems-proof-grid > div { display: flex; flex-direction: column; gap: 7px; padding: 22px 20px; background: var(--ink); }
.systems-proof-grid strong { color: #fff; font-size: 14px; }
.systems-proof-grid span { color: rgba(247,245,241,.65); font-size: 13px; line-height: 1.5; }
.systems-case-cta { margin-top: 22px; text-align: center; }
.systems-care { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 26px 0 18px; padding: 22px 26px; border: 1px solid var(--border); border-left: 4px solid var(--plum); border-radius: 8px; background: var(--paper); }
.systems-care div { display: flex; flex-direction: column; gap: 4px; }
.systems-care span { color: var(--muted); font-size: 14px; }
.systems-care b { color: var(--plum); font-family: 'Lora', Georgia, serif; font-size: 21px; white-space: nowrap; }
.systems-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 48px; }


.service-crosslink { display: flex; align-items: center; justify-content: space-between; gap: 54px; }
.service-crosslink > div { max-width: 700px; }
.service-crosslink h2 { margin-bottom: 12px; }
.service-crosslink .lead { margin: 0; }
.service-crosslink > .btn { flex-shrink: 0; }
@media (max-width: 900px) {
  .systems-proof-grid { grid-template-columns: 1fr 1fr; }
  .systems-process { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .svc-four .svc-featured { grid-column: auto; }
  .systems-grid, .systems-split, .systems-case-head { grid-template-columns: 1fr; }
  .systems-split, .systems-case-head { gap: 32px; }
  .systems-friction-list { grid-template-columns: 1fr; }
  .systems-process { grid-template-columns: 1fr; gap: 28px; }
  .systems-care { align-items: flex-start; flex-direction: column; }
  .service-crosslink { align-items: flex-start; flex-direction: column; gap: 26px; }
}
@media (max-width: 480px) {
  .systems-proof-grid { grid-template-columns: 1fr; }
}

/* Drone CAA trust badges */
.drone-trust-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 28px; }
.drone-trust-badge { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; font-size: 14px; font-weight: 600; color: inherit; }
.as-sec-dark .drone-trust-badge { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: #fff; }
.drone-caa-note { font-size: 15px; color: var(--muted); margin: 0 auto 36px; max-width: 58ch; }

/* Drone video / add-on price rows */
.drone-video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.drone-video-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.drone-video-item:nth-child(even) { border-right: none; }
.drone-video-item:nth-last-child(-n+2) { border-bottom: none; }
.drone-video-price {
  flex: 0 0 120px;
  font-family: 'Lora', serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--plum);
  padding-top: 1px;
}
.drone-video-item strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.drone-video-item span { font-size: 14px; color: var(--muted); }
@media (max-width: 720px) {
  .drone-video-grid { grid-template-columns: 1fr; }
  .drone-video-item { border-right: none; }
  .drone-video-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .drone-video-item:last-child { border-bottom: none; }
}
@media (max-width: 720px) {
  .process-steps[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .process-steps[style*="repeat(4"] { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Instant Estimator (home page)
   ============================================================ */
.as-estimate {
  padding: var(--sec-y-lg) 24px;
  background: #fff;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.est-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 340px;
  gap: 64px; align-items: start;
}
.est-heading { margin: 10px 0 8px; font-size: clamp(26px,4vw,36px); }
.est-intro { color: var(--muted); font-size: 16px; margin: 0 0 44px; }
.est-group { margin-bottom: 28px; }
.est-group-label {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted) !important; margin: 0 0 12px;
}
.est-multi-hint { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; }
.est-or {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 20px; color: var(--muted); font-size: 13px;
}
.est-or::before, .est-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Tab toggle */
.est-tabs {
  display: flex; margin-bottom: 28px;
  background: var(--paper); border: 1.5px solid var(--border); border-radius: 10px; padding: 3px;
}
.est-tab {
  -webkit-appearance: none; appearance: none;
  flex: 1; padding: 11px 16px;
  border: none; border-radius: 8px; box-shadow: none;
  background: transparent; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--muted);
  transition: background .18s, color .18s; line-height: 1.2;
}
.est-tab:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.est-tab.est-tab--active { background: var(--plum); color: #fff; }
/* Lock text colour in the panel so active card's white doesn't bleed to siblings */
.est-panel { color: var(--ink); }

/* Size cards — flexbox so WP block styles can't collapse the grid */
.est-size-cards { display: flex; gap: 10px; }
.est-size-card {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 18px 16px; border: 2px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left; gap: 3px;
  transition: border-color .18s, background .18s, transform .12s; font-family: inherit;
}
/* :not(.active) is load-bearing. The hover background is near-white and the
   selected card's text is #fff, so any hover rule that reaches a selected card
   erases its own label. .est-diy-card:hover did exactly that — it is declared
   AFTER .active, same specificity, so hovering the chosen hosting plan turned
   it blank. Keep hover off the selected state rather than relying on rule
   order, which is what broke. */
.est-size-card:not(.active):hover { border-color: var(--plum); background: #fdf8fa; }
.est-size-card.active, .est-diy-card.active {
  border-color: var(--plum); background: var(--plum); color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(92,36,65,.22);
}
.esc-tier { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; opacity: .7; }
.esc-pages { font-size: 17px; font-weight: 700; font-family: 'Lora', serif; margin: 2px 0; }
.esc-from { font-size: 12px; opacity: .8; } /* .6 gave 4.37:1 on the white card; .8 gives 8.53:1 */
.est-size-card.active .esc-tier, .est-size-card.active .esc-from,
.est-diy-card.active .esc-tier, .est-diy-card.active .esc-from { opacity: .8; }

/* DIY card */
.est-hosting-row { display: flex; gap: 12px; }
.est-hosting-row .est-diy-card { flex: 1; width: auto; }
.est-managed-card .est-diy-badge { background: var(--plum); color: #fff; }
.est-managed-card.active .est-diy-badge { background: rgba(255,255,255,.2); color: #fff; }
.est-diy-card {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border: 2px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left; gap: 16px;
  transition: border-color .18s, background .18s, transform .12s; font-family: inherit;
}
.est-diy-card:not(.active):hover { border-color: var(--plum); background: #fdf8fa; }
/* Selected card still needs to feel live under the cursor — darken the plum
   rather than lightening it, so the white text keeps its contrast. */
.est-diy-card.active:hover, .est-size-card.active:hover { background: #4a1d34; }
.est-diy-left { display: flex; flex-direction: column; gap: 3px; }
/* Was 11px at .55 opacity = 3.75:1 on the white card, and under the 12px
   floor for comfortable small print. 12.5px at .75 gives 7.16:1. */
.est-managed-extras { font-size: 12.5px; opacity: .75; font-style: italic; }
.est-diy-badge {
  flex-shrink: 0; padding: 4px 10px; border-radius: 20px;
  background: var(--blush); color: var(--plum);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  transition: background .18s, color .18s;
}
.est-diy-card.active .est-diy-badge { background: rgba(255,255,255,.2); color: #fff; }

/* Extras panels — display:none so WP can't override opacity */
.est-extras-group { display: none; margin-top: 28px; }
.est-extras-group.visible { display: block; }
.est-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.est-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 1.5px solid var(--border); border-radius: 100px;
  background: #fff; cursor: pointer; font-size: 14px; font-weight: 500;
  color: var(--ink); font-family: inherit; transition: border-color .15s, background .15s, color .15s;
}
.est-pill span { color: var(--muted); font-size: 13px; transition: color .15s; }
.est-pill:hover { border-color: var(--plum); }
.est-pill.active { border-color: var(--plum); background: var(--plum); color: #fff; }
.est-pill.active span { color: rgba(255,255,255,.75); }

/* Build-panel extras — full-width rows, not pills. As pills these wrapped
   3 + 1 orphan and read as an afterthought beside the cards above; the row
   carries a line of explanation, and the checkbox square is what says
   "pick several" where a pill looked single-select. */
.est-extras-list { display: flex; flex-direction: column; gap: 8px; }
.est-extra {
  display: flex; align-items: center; gap: 14px;
  width: 100%; box-sizing: border-box; padding: 14px 18px;
  border: 2px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; text-align: left;
  color: var(--ink); font-family: inherit;
  transition: border-color .18s, background .18s;
}
.est-extra:hover { border-color: var(--plum); background: #fdf8fa; }
.est-extra.active { border-color: var(--plum); background: var(--plum); color: #fff; }
.est-extra-box {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 5px;
  border: 2px solid var(--border); background: #fff; color: var(--plum);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s;
}
.est-extra-box svg { width: 12px; height: 12px; opacity: 0; transition: opacity .15s; }
.est-extra:hover .est-extra-box { border-color: var(--plum); }
.est-extra.active .est-extra-box { border-color: #fff; }
.est-extra.active .est-extra-box svg { opacity: 1; }
.est-extra-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.est-extra-name { font-size: 15px; font-weight: 600; }
/* .6 opacity gave 4.1:1 on white; .75 clears AA at this size. */
.est-extra-desc { font-size: 12.5px; line-height: 1.45; opacity: .75; }
.est-extra-cost {
  flex-shrink: 0; font-family: 'Lora', serif;
  font-size: 17px; font-weight: 700;
}

/* Shop signpost. A shop is not a fixed-price add-on — it depends on the
   catalogue, payments and shipping — so it points at /shopify/ instead of
   adding a number the estimate can't stand behind. */
.est-shop-note {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 13px 16px;
  border: 1px dashed var(--border); border-radius: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink);
}
.est-shop-note > span { flex: 1; min-width: 200px; opacity: .8; }
/* A small solid button rather than a text link — the row sits under three
   tappable cards, and a bare link there read as body copy. Shorter and
   tighter than .btn-primary, which is sized for hero CTAs. */
.est-shop-btn {
  flex-shrink: 0; display: inline-block; padding: 9px 18px;
  background: var(--plum); color: #fff; border: 2px solid var(--plum);
  border-radius: var(--radius); font-size: 13.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.est-shop-btn:hover { background: #4a1d34; border-color: #4a1d34; color: #fff; text-decoration: none; }

/* Price card */
.est-right { position: sticky; top: 32px; }
.est-card {
  background: var(--ink); color: var(--paper);
  border-radius: 14px; padding: 32px 28px;
  box-shadow: 0 16px 48px rgba(28,32,36,.18);
}
.est-card-label {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(247,245,241,.5); margin: 0 0 20px;
}
.est-price-wrap {
  display: flex; align-items: flex-start; gap: 2px;
  margin-bottom: 6px; min-height: 72px;
}
.est-currency {
  font-family: 'Lora', serif; font-size: 32px; font-weight: 700;
  line-height: 1.1; margin-top: 8px; opacity: 0; transition: opacity .3s;
}
.est-price-num {
  font-family: 'Lora', serif; font-size: 64px; font-weight: 700;
  line-height: 1; letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}
.est-price-period {
  font-family: 'Lora', serif; font-size: 22px; font-weight: 500;
  align-self: flex-end; margin-bottom: 10px; opacity: 0; transition: opacity .3s;
}
.est-price-sub {
  font-size: 13px; color: rgba(247,245,241,.5); margin: 0 0 24px; min-height: 18px;
}
.est-line-items {
  list-style: none; padding: 0; margin: 0 0 24px;
  border-top: 1px solid rgba(247,245,241,.12);
}
.est-line-items li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; font-size: 14px; border-bottom: 1px solid rgba(247,245,241,.08);
  animation: est-fade-in .2s ease;
}
.est-line-items li span:last-child { color: rgba(247,245,241,.6); font-size: 13px; }
@keyframes est-fade-in { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform: none; } }
.est-card-cta { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; pointer-events: none; }
.est-card-cta.visible { opacity: 1; transform: none; pointer-events: auto; }
.est-btn {
  display: block; width: 100%; padding: 14px; text-align: center;
  background: #fff; color: var(--ink); border-radius: 8px;
  font-weight: 600; font-size: 15px; text-decoration: none; transition: background .15s;
}
.est-btn:hover { background: var(--paper); }
/* .4 alpha over the --ink price card was 3.55:1; .75 gives 8.99:1. */
.est-btn-note { text-align: center; font-size: 12px; color: rgba(247,245,241,.75); margin: 10px 0 0; }
/* ── Tablet (≤860px) ── */
@media (max-width: 900px) {
  /* Flex column, not a one-column grid. A sticky grid item is constrained to
     its own grid area — in a single column that area is exactly the card's own
     height, so sticky has nowhere to travel and silently does nothing. A flex
     item is constrained to the flex container instead, which here is the whole
     estimator, so the bar stays pinned from the first control to the last and
     releases as the section ends. */
  /* stretch overrides the desktop `align-items: start`, which in a column flex
     container is a cross-axis rule — it shrink-wraps each child to its content
     width, so the card narrowed to fit whatever was in it. */
  .est-inner { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  /* Pinned running total. Stacked, the estimate card was a near-full-screen
     block at the top: you read a price, scrolled past it to choose, and then
     had no idea what your choices cost without scrolling back. Desktop keeps
     it in view with a sticky right column; this is the same idea in one
     column, shrunk to a bar. */
  .est-right {
    position: sticky;
    top: 90px;        /* .header-inner height at this breakpoint */
    z-index: 20;      /* over the controls, under .site-header's 1000 */
    order: -1;
    margin: 0 0 26px;
  }
  .est-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main   cta"
      "detail detail";
    align-items: center;
    gap: 0 14px;
    padding: 16px 16px 14px;
    box-shadow: 0 10px 30px rgba(28,32,36,.3);
  }
  .est-card-main   { grid-area: main; min-width: 0; }
  .est-card-cta    { grid-area: cta; }
  .est-card-detail { grid-area: detail; }

  /* The head keeps its shape but loses the desktop vertical rhythm — that
     spacing, not the content, is what made the card a screen tall. */
  .est-card-label { margin: 0 0 3px; font-size: 10.5px; }
  .est-price-wrap { min-height: 0; margin: 0; align-items: baseline; }
  .est-price-num { font-size: 36px; letter-spacing: -1px; }
  .est-currency { font-size: 20px; margin-top: 0; }
  .est-price-period { font-size: 16px; margin-bottom: 0; align-self: baseline; }
  /* The summary shares its row with the button, so it has roughly half the
     width. Wrapping beats an ellipsis — "10+ pages · quoted a…" told you
     nothing — and the clamp stops a long one growing a pinned card. */
  .est-price-sub {
    margin: 3px 0 0; font-size: 12.5px; min-height: 0; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Capped so the managed-hosting breakdown — six rows — can never fill the
     screen the card is pinned to; the list scrolls inside instead. */
  .est-card-detail {
    max-height: 34vh; overflow-y: auto;
    margin-top: 13px; border-top: 1px solid rgba(247,245,241,.12);
  }
  .est-line-items { margin: 0; border-top: 0; }
  .est-line-items li { padding: 8px 0; font-size: 13.5px; }
  /* Nothing follows the list here — on desktop the button does — so the last
     rule would just hang against the bottom edge of the card. */
  .est-line-items li:last-child { border-bottom: 0; }

  .est-btn { padding: 12px 16px; font-size: 14px; white-space: nowrap; }
  /* The button is the right-hand column beside the price, so its note would
     widen that column and squeeze the summary onto three lines. The same
     reassurance is on the portal page the button opens. */
  .est-btn-note { display: none; }

  .est-pills { gap: 6px; }
  .est-pill { padding: 8px 14px; font-size: 13px; }
  .est-extra { padding: 12px 14px; gap: 11px; }
  .est-extra-cost { font-size: 16px; }
  /* Descriptions run to three lines on a phone, and a vertically centred
     checkbox then floats opposite the middle of the paragraph instead of
     its name. Pin both to the top of the row. */
  .est-extra { align-items: flex-start; }
  .est-extra-box, .est-extra-cost { margin-top: 1px; }
  /* Once the note wraps, a right-aligned button floats oddly against the left
     edge of the text above it. Full width reads as the row's action. */
  .est-shop-btn { display: block; width: 100%; text-align: center; }
  /* Stack hosting cards side-by-side at tablet too (680px threshold below) */
}
/* ── Tablet narrow / large phone (≤680px) ── */
@media (max-width: 720px) {
  .est-hosting-row { flex-direction: column; gap: 10px; }
  .est-diy-card { padding: 16px 18px; }
}
/* ── Mobile (≤580px) ── */
@media (max-width: 480px) {
  .as-estimate { padding: 30px 16px; }
  .est-intro { margin-bottom: 20px; }
  .est-group { margin-bottom: 16px; }
  .est-size-cards { flex-direction: column; gap: 8px; }
  .est-size-card {
    flex-direction: row; align-items: center;
    justify-content: space-between; padding: 14px 16px;
  }
  .esc-pages { font-size: 15px; margin: 0; }
  .esc-tier, .esc-from { font-size: 11px; }
  .est-tabs { margin-bottom: 20px; }
  .est-tab { padding: 10px 12px; font-size: 13px; }
  .est-diy-card { padding: 14px 16px; gap: 12px; }
  .est-diy-badge { font-size: 11px; padding: 3px 8px; }
  .est-managed-extras { font-size: 12.5px; }
}

/* ============================================================
   Quote Builder
   ============================================================ */
.qb-wrap {
  max-width: 720px; margin: 0 auto; padding: clamp(36px,5.5vw,64px) 24px;
}
.qb-header { text-align: center; margin-bottom: 32px; }
.qb-header h1 { margin: 12px 0 16px; }
.qb-header .lead { margin: 0 auto; }
.qb-hero-note { margin: 16px auto 0; font-size: 14px; color: var(--muted); }
.qb-hero-note a { color: var(--plum); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Progress */
.qb-progress { margin-bottom: 30px; }
.qb-progress-bar {
  height: 4px; background: var(--border); border-radius: 2px; margin-bottom: 12px;
}
.qb-progress-fill {
  height: 100%; background: var(--plum); border-radius: 2px;
  width: 0; transition: width .35s ease;
}
.qb-steps-row { display: flex; justify-content: space-between; }
.qb-step-label {
  font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em;
  text-transform: uppercase; transition: color .2s;
}
.qb-step-label.active { color: var(--plum); }
.qb-step-label.done   { color: var(--ink); }

/* Steps */
.qb-step { display: none; }
.qb-step.active { display: block; }
.qb-step h2 { margin: 0 0 6px; font-size: clamp(22px,3.5vw,30px); }
.qb-hint { color: var(--muted); margin: 0 0 28px; font-size: 15px; }

/* Fields */
.qb-field { margin-bottom: 28px; }
.qb-field > label:first-child {
  display: block; font-weight: 600; font-size: 15px; margin-bottom: 10px;
}
.qb-field input[type="text"],
.qb-field textarea {
  width: 100%; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); font-family: inherit; font-size: 15px;
  background: #fff; color: var(--ink); transition: border-color .15s;
  box-sizing: border-box;
}
.qb-field input[type="text"]:focus-visible,
.qb-field textarea:focus-visible,
.qb-custom-page-input:focus-visible {
  outline: 2px solid var(--plum); outline-offset: 2px;
  border-color: var(--plum);
}
.qb-opt { font-weight: 400; color: var(--muted); font-size: 13px; }

/* Radio grid */
.qb-radio-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.qb-radio {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: 15px; background: #fff; transition: border-color .15s, background .15s;
  user-select: none;
}
.qb-radio:hover { border-color: var(--plum); }
.qb-radio input { accent-color: var(--plum); }
.qb-radio:has(input:checked) {
  border-color: var(--plum); background: #faf5f7;
}
.qb-pill {
  font-size: 12px; background: var(--blush); color: var(--plum);
  padding: 2px 8px; border-radius: 20px; font-weight: 600;
}

/* Checkbox grid (pages) */
.qb-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap: 10px; margin-bottom: 16px; }
.qb-check {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; font-size: 14px; background: #fff; transition: border-color .15s, background .15s;
  user-select: none;
}
.qb-check:hover { border-color: var(--plum); }
.qb-check input { accent-color: var(--plum); }
.qb-check:has(input:checked) { border-color: var(--plum); background: #faf5f7; }
.qb-check.locked { opacity: .7; cursor: default; }
.qb-page-count { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.qb-page-count strong { color: var(--ink); }

/* Custom pages */
.qb-custom-page-row { display: flex; gap: 8px; margin-bottom: 8px; }
.qb-custom-page-input {
  flex: 1; padding: 10px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); font-family: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
.qb-custom-page-input:focus { border-color: var(--plum); }
.qb-remove-btn {
  padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1;
}
.qb-remove-btn:hover { border-color: #c0392b; color: #c0392b; }
.qb-add-btn {
  background: none; border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 9px 16px; font-size: 14px; color: var(--plum); cursor: pointer; font-weight: 600;
  margin-top: 4px; transition: border-color .15s, background .15s;
}
.qb-add-btn:hover { border-color: var(--plum); background: #faf5f7; }

/* Feature list */
.qb-feature-list { display: flex; flex-direction: column; gap: 2px; }
.qb-feature-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-radius: var(--radius); cursor: pointer;
  transition: background .12s; gap: 16px;
}
.qb-feature-row:hover { background: #faf5f7; }
.qb-feature-row:has(input:checked) { background: #faf5f7; }
.qb-feature-row input[type="checkbox"] { accent-color: var(--plum); width: 18px; height: 18px; flex-shrink: 0; }
.qb-feature-info { flex: 1; }
.qb-feature-name { display: block; font-weight: 600; font-size: 15px; }
.qb-feature-desc { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.qb-sub-label { font-weight: 400 !important; color: var(--muted); }
.qb-ecom-sub select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  font-family: inherit; font-size: 14px; background: #fff; color: var(--ink);
}

/* Nav */
.qb-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
}
.qb-next-btn {
  background: var(--plum); color: #fff; border: none; border-radius: var(--radius);
  padding: 13px 28px; font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .15s; font-family: inherit;
}
.qb-next-btn:hover { background: #4a1d34; }
.qb-back-btn {
  background: none; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 20px; font-size: 15px; color: var(--ink); cursor: pointer;
  font-family: inherit; transition: border-color .15s;
}
.qb-back-btn:hover { border-color: var(--plum); color: var(--plum); }

/* Result */
.qb-result-card {
  text-align: center; background: var(--plum); color: #fff;
  border-radius: 12px; padding: clamp(28px,4.5vw,46px) 32px; margin-bottom: 26px;
}
.qb-result-label { font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: .75; margin: 0 0 12px; }
.qb-price-range { font-family: 'Lora', serif; font-size: clamp(38px,6vw,56px); font-weight: 700; line-height: 1.1; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.qb-result-tier { font-size: 16px; font-weight: 600; opacity: .85; margin: 0 0 20px; }
.qb-result-note { font-size: 14px; opacity: .7; max-width: 44ch; margin: 0 auto; }

.qb-breakdown { margin-bottom: 24px; }
.qb-breakdown h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.qb-breakdown-list { list-style: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.qb-breakdown-list li {
  display: flex; justify-content: space-between; padding: 12px 16px;
  font-size: 15px; border-bottom: 1px solid var(--border);
}
.qb-breakdown-list li:last-child { border-bottom: none; }
.qb-breakdown-list li span:last-child { font-weight: 600; }

.qb-result-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.qb-copy-btn {
  flex: 1; min-width: 160px; padding: 13px 24px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--ink); font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: border-color .15s;
}
.qb-copy-btn:hover { border-color: var(--plum); color: var(--plum); }
.qb-contact-btn {
  flex: 1; min-width: 160px; padding: 13px 24px; text-align: center;
  background: var(--plum); color: #fff; border-radius: var(--radius);
  font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background .15s; display: inline-block;
}
.qb-contact-btn:hover { background: #4a1d34; color: #fff; }
.qb-copy-confirm { font-size: 14px; color: var(--plum); font-weight: 600; min-height: 20px; margin: 4px 0 0; }

.qb-result-footer { margin-top: 32px; text-align: center; color: var(--muted); font-size: 14px; }
.qb-link-btn {
  background: none; border: none; color: var(--plum); cursor: pointer;
  font-size: inherit; font-family: inherit; text-decoration: underline; padding: 0;
}

@media (max-width: 480px) {
  .qb-radio-grid { flex-direction: column; }
  .qb-check-grid { grid-template-columns: 1fr 1fr; }
  .qb-result-actions { flex-direction: column; }
}

/* ============================================================
   IT Support page
   ============================================================ */
.it-problems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  margin-top: var(--stack);
}
/* Six-tile grids (the RMM section) would wrap 4+2 at desktop width and leave a
   two-column hole. Force three across so it lands as an even 3+3. */
.it-problems-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .it-problems-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .it-problems-grid--three { grid-template-columns: 1fr; }
}
/* Tiles borrow the home-category-card motion language (lift + plum bar growing
   from a stub) so the IT page doesn't invent a second hover vocabulary. */
.it-problem {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 28px 24px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.it-problem::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.it-problem:hover {
  transform: translateY(-4px);
  border-color: rgba(92,36,65,.45);
  box-shadow: 0 18px 48px rgba(28,32,36,.09);
}
.it-problem:hover::before { transform: scaleX(1); }

.it-problem-ico {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  display: block;
  transition: transform .22s ease;
}
.it-problem:hover .it-problem-ico { transform: scale(1.08); }

/* Scroll reveal: tiles start low and fade up as the grid enters view. The
   no-preference guard means reduced-motion users get them already visible —
   the .is-visible class is additive, never required for legibility. */
@media (prefers-reduced-motion: no-preference) {
  .it-problems-grid.as-reveal .it-problem {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .it-problems-grid.as-reveal.is-visible .it-problem {
    opacity: 1;
    transform: none;
  }
  /* Stagger so the row assembles rather than snapping in as one block. */
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(1) { transition-delay: .00s; }
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(2) { transition-delay: .06s; }
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(3) { transition-delay: .12s; }
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(4) { transition-delay: .18s; }
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(5) { transition-delay: .24s; }
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(6) { transition-delay: .30s; }
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(7) { transition-delay: .36s; }
  .it-problems-grid.as-reveal.is-visible .it-problem:nth-child(8) { transition-delay: .42s; }
}

/* Monitoring tiles only: the icon carries a slow live pulse, because the
   section's whole claim is that something is watching continuously. Kept to
   opacity on a ::after ring so it never shifts layout or competes with text. */
@media (prefers-reduced-motion: no-preference) {
  /* The ring sits on the tile (an inline <svg> can't carry a pseudo-element),
     positioned over the icon. It stays inside the tile's padding box, so the
     tile's overflow:hidden never clips it at full scale. */
  #monitoring .it-problem::after {
    content: '';
    position: absolute;
    top: 27px;
    left: 21px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--plum);
    opacity: 0;
    pointer-events: none;
    animation: it-monitor-pulse 3.4s ease-out infinite;
  }
  #monitoring .it-problem:nth-child(2)::after { animation-delay: .5s; }
  #monitoring .it-problem:nth-child(3)::after { animation-delay: 1.0s; }
  #monitoring .it-problem:nth-child(4)::after { animation-delay: 1.5s; }
  #monitoring .it-problem:nth-child(5)::after { animation-delay: 2.0s; }
  #monitoring .it-problem:nth-child(6)::after { animation-delay: 2.5s; }
}
@keyframes it-monitor-pulse {
  0%   { transform: scale(.55); opacity: 0; }
  18%  { opacity: .5; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}
.it-problem h3 {
  font-size: 17px;
  margin: 0 0 8px;
}
.it-problem p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* Privacy caveat under the RMM grid. Deliberately quieter than a .it-problem
   card — it answers "what are you watching?", so it should read as a plain
   reassurance, not as another feature being sold. */
.it-monitoring-note {
  margin-top: 22px;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 3px solid var(--plum);
  border-radius: 6px;
}
.it-monitoring-note h3 {
  font-size: 17px;
  margin: 0 0 10px;
}
.it-monitoring-note p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px;
}

/* IT pricing cards.
   auto-fit, not auto-fill: with 3 cards in a 1112px container auto-fill kept a
   phantom 4th track, squeezing the cards to 262px (which broke the /contact
   email and phone number onto two lines) and leaving dead space on the right. */
.it-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: var(--stack);
}
.it-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 26px 24px;
}
.it-card--featured {
  border-color: var(--plum);
  box-shadow: 0 0 0 2px var(--plum);
}
.it-card-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
  margin: 0 0 12px;
}
.contact-chat-card { position: relative; overflow: hidden; }
.contact-chat-status {
	display: flex; align-items: center; gap: 9px;
	margin: 4px 0 14px !important; color: var(--muted); font-weight: 700;
}
.contact-chat-status::before {
	content: ''; width: 9px; height: 9px; flex: 0 0 9px;
	border-radius: 50%; background: #8b8782;
	box-shadow: 0 0 0 4px rgba(139,135,130,.12);
}
.contact-chat-card[data-chat-status="online"] .contact-chat-status { color: #216846; }
.contact-chat-card[data-chat-status="online"] .contact-chat-status::before {
	background: #2d8a5f; box-shadow: 0 0 0 4px rgba(45,138,95,.14);
}
.contact-chat-card .btn[hidden] { display: none; }
.contact-chat-card .btn { margin-top: 2px; }
.it-price {
  font-family: "Lora", Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin: 16px 0 8px;
}

@media (max-width: 720px) {
  .it-problems-grid { grid-template-columns: 1fr 1fr; }
  .it-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .it-problems-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Portfolio grid
   ============================================================ */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}
.portfolio-item {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}
.portfolio-thumb {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--blush);
}
.portfolio-thumb-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--blush) 0%, #d4b8c8 100%);
}
.portfolio-thumb-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.portfolio-title {
  font-weight: 600;
  font-size: 16px;
  margin: 16px 20px 4px;
}
.portfolio-meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0 20px 16px;
}
/* Real screenshot in a portfolio slot: the shot is a tall full-page capture, so
   anchor it to the top of the 16:10 frame and drift down on hover. */
.portfolio-thumb--shot { display: block; background: var(--paper); }
/* One featured build across the top of the grid, picture beside the words. */
.portfolio-item--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
.portfolio-item--feature .portfolio-thumb { aspect-ratio: 1000 / 780; }
.portfolio-item--feature .portfolio-thumb--shot img { object-position: center; }
.portfolio-item--feature .portfolio-thumb--shot:hover img { object-position: center; }
.portfolio-thumb--video { position: relative; background: var(--paper); }
.portfolio-thumb--video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.portfolio-thumb__link { position: absolute; inset: 0; z-index: 1; }
.portfolio-thumb__link:focus-visible { outline: 3px solid var(--plum); outline-offset: -3px; }
/* The overlay pause pill is styled for dark video; this one is mostly sky and chalk. */
.portfolio-thumb--video .video-pause--overlay { z-index: 2; opacity: .85; color: var(--muted); border-color: var(--border); background: rgba(255,255,255,.92); }
.portfolio-thumb--video .video-pause--overlay:hover,
.portfolio-thumb--video .video-pause--overlay.is-paused { opacity: 1; color: var(--plum); border-color: var(--plum); }
.portfolio-feature__body { padding: 28px 32px; }
.portfolio-feature__body .portfolio-title { font-size: 1.15rem; margin: 0 0 8px; }
.portfolio-feature__body .portfolio-meta { font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 760px) { .portfolio-item--feature { grid-template-columns: 1fr; } .portfolio-feature__body { padding: 16px 20px 18px; } }
.portfolio-thumb--shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; transition: object-position 3.4s ease; }
.portfolio-thumb--shot:hover img { object-position: center bottom; }
.portfolio-title em { font-style: normal; font-weight: 500; color: var(--muted); }

/* Branding page — recent work */
.brand-work-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.brand-work { border: 1px solid var(--border); border-radius: 6px; background: #fff; overflow: hidden; }
.brand-work-body { padding: 18px 20px 20px; }
.brand-work-body .portfolio-title { margin: 0 0 4px; }
.brand-work-body .portfolio-meta { margin: 0 0 12px; }
.brand-work-body p:last-child { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.6; }
.brand-board { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 150px 84px; gap: 1px; background: var(--border); }
.brand-board-cell { display: flex; align-items: center; justify-content: center; padding: 20px; }
.brand-board-light { background: var(--paper); }
.brand-board-dark { background: var(--ink); }
.brand-board-lockup { display: inline-flex; align-items: center; gap: 12px; }
.brand-board-words { display: flex; flex-direction: column; line-height: 1.1; }
.brand-board-word { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; }
.brand-board-tag { font-family: "Lora", Georgia, serif; font-style: italic; font-size: 13px; color: var(--plum); margin-top: 3px; }
.brand-board-dark .brand-board-word { color: var(--paper); }
.brand-board-dark .brand-board-tag { color: var(--stone); }
.brand-board-stacked { display: flex; flex-direction: column; align-items: center; text-align: center; line-height: 1.1; }
.brand-board-stacked svg { margin-bottom: 8px; }
.brand-board-swatches { gap: 8px; background: #fff; }
.brand-board-swatches span { width: 34px; height: 34px; border-radius: 50%; display: block; }
.brand-board-type { gap: 18px; background: #fff; }
.brand-board-type-serif { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 20px; color: var(--ink); }
.brand-board-type-serif em { font-weight: 500; color: var(--plum); }
.brand-board-type-sans { font-family: "Work Sans", system-ui, sans-serif; font-weight: 500; font-size: 15px; color: var(--muted); }
@media (max-width: 860px) {
  .brand-work-grid { grid-template-columns: 1fr; }
  .brand-board { grid-template-rows: 130px 76px; }
}
@media (max-width: 560px) {
  /* Stack the 2x2 board into a single column so it can't overflow the card;
     the 1px grid gap keeps the dividers between stacked cells. */
  .brand-board { grid-template-columns: 1fr; grid-template-rows: auto; }
  .brand-board-cell { min-width: 0; padding: 22px 20px; }
  /* White (light) leads on mobile, black below — desktop keeps dark on the left */
  .brand-board-light { order: -1; }
  .brand-board-swatches { justify-content: center; }
  .brand-board-lockup { flex-wrap: wrap; justify-content: center; text-align: center; }
}
@media (max-width: 480px) {
  .brand-board-word { font-size: 18px; }
  .brand-board-type { gap: 12px; }
}

/* ============================================================
   About page
   ============================================================ */
.about-page-hero {
  position: relative; overflow: hidden;
  padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(44px, 5.4vw, 70px);
  background:
    radial-gradient(circle at 80% 46%, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 34%),
    linear-gradient(118deg, #F6ECF0 0%, #F1E2E9 58%, #F1ECE5 100%);
  border-bottom: 1px solid rgba(92,36,65,.12);
}
.about-page-hero::before { content: none; }
.about-hero {
  position: relative; z-index: 1; max-width: none;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 88px); align-items: center;
}
.about-hero-copy { max-width: 700px; }
.about-hero-copy h1 { max-width: 20ch; margin-bottom: 18px; }
.about-hero-copy .lead { max-width: 58ch; margin-bottom: 0; }
/* Tagline as H1, same brand rules as .hero-v2-tagline: Lora Italic 500,
   plum, sentence case, no full stop, never bold. */
.about-hero-copy h1.about-hero-tagline {
  font-style: italic; font-weight: 500; color: var(--plum);
  font-size: clamp(42px, 5.6vw, 70px); line-height: 1.02; letter-spacing: -.02em;
  margin-bottom: 22px;
}
.about-hero-points {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  margin-top: 34px; padding: 0; border: 0;
}
.about-hero-points p { margin: 0; padding: 14px 0 0; border-top: 2px solid var(--plum); border-bottom: 0; }
.about-hero-points strong, .about-hero-points span { display: block; }
.about-hero-points strong { font-family: "Lora", Georgia, serif; font-size: 18px; color: var(--ink); }
.about-hero-points span { margin-top: 2px; color: var(--muted); font-size: 13px; }
.about-hero-mark {
  position: relative; display: grid; place-items: center;
  width: clamp(240px, 26vw, 330px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; box-shadow: 0 18px 50px rgba(92,36,65,.14), 0 2px 6px rgba(28,32,36,.05);
}
.about-hero-mark::before {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  border: 1px solid rgba(92,36,65,.16);
}
.about-hero-mark img { width: 64%; height: auto; display: block; transform-origin: 50% 72%; }
/* A quick, one-shot stone tumble when a real pointer enters the badge. It
   settles back exactly where it began, so the hero never shifts in flow. */
@media (hover: hover) and (pointer: fine) {
  .about-hero-mark:hover { animation: about-stone-disc .82s cubic-bezier(.2,.8,.25,1); }
  .about-hero-mark:hover::before { animation: about-stone-ring .82s ease-out; }
  .about-hero-mark:hover img { animation: about-stone-tumble .82s cubic-bezier(.2,.8,.25,1); }
}
@keyframes about-stone-tumble {
  0%, 100% { transform: translateY(0) rotate(0) scale(1); }
  18% { transform: translateY(-13px) rotate(-9deg) scale(1.03); }
  38% { transform: translateY(-20px) rotate(10deg) scale(1.05); }
  60% { transform: translateY(-7px) rotate(-6deg) scale(1.02); }
  78% { transform: translateY(-2px) rotate(3deg) scale(1); }
}
@keyframes about-stone-disc {
  0%, 100% { box-shadow: 0 18px 50px rgba(92,36,65,.14), 0 2px 6px rgba(28,32,36,.05); }
  42% { box-shadow: 0 26px 58px rgba(92,36,65,.2), 0 8px 16px rgba(28,32,36,.08); }
}
@keyframes about-stone-ring {
  0%, 100% { transform: scale(1); opacity: 1; }
  42% { transform: scale(1.07); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero-mark:hover,
  .about-hero-mark:hover::before,
  .about-hero-mark:hover img { animation: none; }
}
@media (max-width: 900px) {
  .about-hero-points { grid-template-columns: 1fr; gap: 0; }
  .about-hero-points p { padding: 10px 0; border-top: 1px solid rgba(92,36,65,.16); }
  .about-hero-points p:first-child { border-top: 2px solid var(--plum); }
}
@media (max-width: 720px) {
  .about-page-hero { padding: 34px 24px 34px; }
  .about-hero { grid-template-columns: 1fr; gap: 22px; }
  .about-hero-mark { order: -1; width: 112px; box-shadow: 0 10px 28px rgba(92,36,65,.14); }
  .about-hero-mark::before { inset: -9px; }
  .about-hero-copy h1 { max-width: 12ch; margin-bottom: 16px; }
  .about-hero-points { margin-top: 26px; }
}
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  margin-top: var(--stack);
}
.about-intro-text h2 { margin-top: 0; }
.about-contact { line-height: 1.7; }
.about-contact a { color: var(--plum); font-weight: 600; font-variant-numeric: tabular-nums; }
.about-contact-note { display: inline-block; margin-top: 6px; font-size: 14px; color: var(--muted); }
.about-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: var(--stack);
}
.about-value {
  border-left: 3px solid var(--plum);
  padding: 4px 0 4px 20px;
}
.about-value h3 {
  font-size: 18px;
  margin: 0 0 6px;
}
.about-value p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}
.about-team {
  max-width: 720px;
  margin: 0 auto;
}

@media (max-width: 720px) {
  .about-intro { grid-template-columns: 1fr; gap: 32px; }
  .about-values { grid-template-columns: 1fr; }
}

/* Contact opens with the choice, not a manifesto: keep the hero compact so
   Call / Email / Chat are visible immediately on ordinary screens. */
.contact-page-hero { padding-top: clamp(34px, 4.4vw, 52px) !important; padding-bottom: clamp(26px, 3.2vw, 38px) !important; }
.contact-page-hero h1 { margin-bottom: 12px; }
.contact-page-hero .lead { max-width: 64ch; margin-bottom: 0; }
.contact-methods-section { padding-top: clamp(24px, 3vw, 36px); }
@media (max-width: 720px) {
  .contact-page-hero { padding-top: 30px !important; padding-bottom: 26px !important; }
  .contact-methods-section { padding-top: 24px; }
}

/* ── Legal pages (T&Cs / Privacy) ───────────────────── */
.legal-doc { max-width: 72ch; }
.legal-doc h2 { margin: 40px 0 10px; font-size: 1.375rem; }
.legal-doc h3 { margin: 28px 0 8px; font-size: 1.125rem; color: var(--ink); font-weight: 600; }
.legal-doc a[href^="tel:"] { white-space: nowrap; }
.legal-doc p { color: var(--ink); line-height: 1.75; margin-bottom: 16px; }
.legal-doc ul { margin: 0 0 18px; padding-left: 22px; }
.legal-doc li { color: var(--ink); line-height: 1.7; margin-bottom: 6px; }
.legal-doc a { color: var(--plum); }
.legal-doc code { background: rgba(0,0,0,.04); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }
.legal-doc hr { margin: 48px 0; border: none; border-top: 1px solid var(--border); }

/* ── Hero pricing widget ─────────────────────────────── */
.svc-hero-inner--est { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; padding-top: 16px; }
@media (max-width: 900px) {
  .svc-hero-inner--est { grid-template-columns: 1fr; }
  .svc-hero-inner--est .hero-est { max-width: 460px; margin: 0 auto; width: 100%; }
}
.svc-hero-visual--card::before { display: none; }
.hero-est { background: #fff; border-radius: 16px; padding: 24px 22px; box-shadow: 0 4px 40px rgba(0,0,0,.13); }
.hero-est-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.hero-est-options { display: flex; flex-direction: column; gap: 7px; }
.hero-est-option { background: #F7F5F1; border: 2px solid transparent; border-radius: 10px; padding: 11px 14px; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.hero-est-option:hover { background: #EDE9E3; }
.hero-est-option.active { border-color: var(--plum); background: var(--blush); }
.hero-est-option-info { display: flex; flex-direction: column; }
.hero-est-option-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.hero-est-option-desc { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.hero-est-option-price { font-weight: 700; font-size: 13px; color: var(--plum); white-space: nowrap; margin-left: 10px; }
.hero-est-total { display: flex; align-items: baseline; gap: 3px; margin: 18px 0 2px; min-height: 44px; }
.hero-est-price { font-size: 32px; font-weight: 700; color: var(--plum); letter-spacing: -.02em; }
.hero-est-period { font-size: 13px; color: var(--muted); margin-left: 2px; }
.hero-est-subtext { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; min-height: 18px; }
.hero-est-cta { display: block; text-align: center; background: var(--plum); color: #fff; border-radius: 8px; padding: 12px 18px; font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s, opacity .25s; opacity: 0; pointer-events: none; }
.hero-est-cta:hover { background: var(--plum-d); color: #fff; text-decoration: none; }
.hero-est-cta.visible { opacity: 1; pointer-events: auto; }
.hero-est-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 10px; margin-bottom: 0; }

/* ============================================================
   Service offer template (page-cyber-essentials, page-managed-backup,
   page-ai-phone-answering, page-ai-website-chatbot, page-local-seo-reviews,
  
   ============================================================ */

/* Hero */
.offer-hero { padding: var(--hero-y) 0 var(--hero-y-b); background: var(--paper); }
.offer-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 900px) { .offer-hero-grid { grid-template-columns: 1fr; } }
.offer-hero-copy h1 { margin: 12px 0 22px; }
.offer-hero-copy .lead { max-width: 52ch; }
/* ------------------------------------------------------------
   Highlights band (opt-in, sits directly under the hero)
   Three or four short claims in large plum type, divided by
   hairlines — the same ruled idiom as the price tables, so a
   page whose argument is long prose still has something
   scannable above the fold. Set $as_service['highlights'].
   ------------------------------------------------------------ */
.offer-highlights { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(26px, 3.6vw, 40px) 24px; }
.offer-highlight-grid { display: grid; gap: clamp(18px, 2.6vw, 34px); grid-template-columns: repeat(3, 1fr); }
.offer-highlight-grid--4 { grid-template-columns: repeat(4, 1fr); }
.offer-highlight { position: relative; padding-left: clamp(18px, 2.6vw, 34px); }
.offer-highlight::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--border); }
.offer-highlight:first-child { padding-left: 0; }
.offer-highlight:first-child::before { display: none; }
.offer-highlight h2 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.16; margin: 0 0 8px; color: var(--plum); }
.offer-highlight p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--stone-ink); }
.offer-highlight .offer-highlight-meta { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.offer-highlight-note { margin: clamp(20px, 2.6vw, 28px) 0 0; padding-top: clamp(16px, 2vw, 20px); border-top: 1px solid var(--border); font-size: 15px; line-height: 1.55; color: var(--stone-ink); }
/* Phones: stack, and turn the dividing hairlines through 90 degrees
   rather than dropping them, so it still reads as one ruled set. */
@media (max-width: 860px) {
	.offer-highlight-grid, .offer-highlight-grid--4 { grid-template-columns: 1fr; gap: 18px; }
	.offer-highlight { padding-left: 0; padding-top: 18px; }
	.offer-highlight::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
	.offer-highlight:first-child { padding-top: 0; }
}
.offer-compliance { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 18px; padding: 0; font-size: 13.5px; font-weight: 600; color: var(--stone-ink); }
.offer-compliance li { position: relative; padding-left: 22px; }
.offer-compliance li::before { content: ""; position: absolute; left: 0; top: 50%; width: 13px; height: 7px; margin-top: -5px; border-left: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(-45deg); }
/* On a photo hero the strip is ink on a photograph and all but vanishes — the
   ticks are plum, which goes darker still. --ink recolours the headline, the
   lead and the buttons but never knew about this list, because until now no
   photo hero carried one. /drone-surveys/ does, directly under the headline. */
.offer-hero--photo .offer-compliance { color: rgba(247,245,241,.92); }
.offer-hero--photo .offer-compliance li::before { border-left-color: var(--blush); border-bottom-color: var(--blush); }
@media (max-width: 600px) { .offer-compliance { gap: 6px 14px; font-size: 12.5px; } }
.offer-category { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.offer-category span { color: var(--plum); background: var(--blush); padding: 4px 10px; border-radius: 100px; letter-spacing: .06em; }
.offer-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; flex-wrap: wrap; }
.offer-text-link { font-weight: 600; font-size: 15px; color: var(--plum); }
.offer-text-link:hover { color: var(--plum-d); text-decoration: none; }

/* Hero summary card */
.offer-summary { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 26px 26px 24px; box-shadow: 0 8px 40px rgba(28,32,36,.06); }
.offer-summary-label { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.offer-summary-price { font-family: "Lora", Georgia, serif; font-size: clamp(30px, 4.4vw, 40px); font-weight: 700; color: var(--ink); line-height: 1.1; }
.offer-summary-suffix { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.offer-summary-rule { height: 1px; background: var(--border); margin: 20px 0 18px; }
.offer-summary-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.offer-summary ul { list-style: none; margin: 0; padding: 0; }
.offer-summary li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; margin-bottom: 8px; color: var(--ink); }
.offer-summary li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--plum); font-weight: 700; }

/* Service showcase image band */
/* Hero with the showcase promoted into it (see 'in_hero' in
   template-parts/service-offer.php). The picture takes the column the summary
   card used to hold, and the card drops under the copy. Columns are even
   rather than 1.35fr, because a picture arguing for the product deserves the
   same weight as the words. */
.offer-hero-grid--visual { grid-template-columns: 1fr 1fr; align-items: center; }
.offer-hero-visual { margin: 0; text-align: center; }
.offer-hero-visual img {
	max-width: min(100%, 460px); height: auto;
	filter: drop-shadow(0 28px 56px rgba(28, 32, 36, .16));
}
.offer-hero-visual .offer-showcase-caption { max-width: 44ch; margin-top: 12px; }
.offer-summary--inline { margin-top: 34px; max-width: 460px; }

/* Two showcases = two sibling figures (see the split in service-offer.php).
   The copy column spans both rows so the pictures stack down column 2. Without
   explicit placement, auto-placement drops the second figure under the COPY. */
@media (min-width: 901px) {
	.offer-hero-grid--visual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: clamp(26px, 3vw, 40px); }
	.offer-hero-grid--visual .offer-hero-copy { grid-column: 1; grid-row: 1 / span 2; }
	.offer-hero-grid--visual .offer-hero-visual { grid-column: 2; grid-row: 1; }
	.offer-hero-grid--visual .offer-hero-visual--2 { grid-column: 2; grid-row: 2; }
}
@media (max-width: 900px) {
	/* The point of the whole treatment: on a phone the picture comes first,
	   before the headline, rather than sitting a screen and a half down. */
	/* Restates the single column: the base rule above is later in the file than
	   the existing `.offer-hero-grid` mobile rule and would otherwise keep two
	   columns on a phone. */
	.offer-hero-grid--visual { grid-template-columns: 1fr; gap: 26px; }
	.offer-hero-grid--visual .offer-hero-visual { order: -1; }
	/* ...but only the FIRST one. Both above the headline pushed it about a
	   thousand pixels down a 390px screen, so the second drops below the copy. */
	.offer-hero-grid--visual .offer-hero-visual--2 { order: 1; margin-top: 30px; }
	.offer-hero-visual img { max-width: min(100%, 330px); }
	.offer-summary--inline { max-width: none; }
}

/* ============================================================
   Ink hero  ($as_service['hero_style'] = 'ink')
   Product renders sit flat on paper; on the dark ground they light up. Paired
   with /it-support/, which already runs ink, so the two heaviest pages match.
   ============================================================ */
.offer-hero--ink { position: relative; background: var(--ink); overflow: hidden; isolation: isolate; }
/* One soft plum light behind the work, so the renders sit IN light rather than
   on top of a flat panel. */
.offer-hero--ink::before {
	content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background:
		radial-gradient(60% 75% at 78% 42%, rgba(92, 36, 65, .62) 0%, rgba(92, 36, 65, 0) 68%),
		radial-gradient(38% 46% at 88% 22%, rgba(232, 208, 218, .16) 0%, rgba(232, 208, 218, 0) 70%);
}
.offer-hero--ink > .container { position: relative; z-index: 1; }
/* 10px off the top so the eyebrow sits higher. */
.offer-hero--ink { padding-top: calc(var(--hero-y) - 10px); }

.offer-hero--ink .offer-category { color: var(--blush); }
.offer-hero--ink .offer-category span { background: rgba(232, 208, 218, .14); color: var(--blush); border-color: rgba(232, 208, 218, .28); }
.offer-hero--ink h1 { color: var(--paper); }
.offer-hero--ink .lead { color: rgba(247, 245, 241, .80); }
.offer-hero--ink .offer-text-link { color: rgba(247, 245, 241, .86); }
.offer-hero--ink .offer-text-link:hover { color: var(--blush); }
/* Primary flips to paper-on-ink; plum on ink would vanish. */
.offer-hero--ink .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.offer-hero--ink .btn-primary:hover { background: #fff; border-color: #fff; }

/* Summary card: a pane of slightly lighter dark, not a white box punched in. */
.offer-hero--ink .offer-summary--inline { background: rgba(247, 245, 241, .055); border: 1px solid rgba(247, 245, 241, .16); box-shadow: none; }
.offer-hero--ink .offer-summary--inline .offer-summary-label,
.offer-hero--ink .offer-summary--inline .offer-summary-suffix { color: rgba(247, 245, 241, .62); }
.offer-hero--ink .offer-summary--inline .offer-summary-price,
.offer-hero--ink .offer-summary--inline .offer-summary-title { color: var(--paper); }
.offer-hero--ink .offer-summary--inline li { color: rgba(247, 245, 241, .82); padding-left: 30px; margin-bottom: 10px; }
.offer-hero--ink .offer-summary--inline .offer-summary-rule { background: rgba(247, 245, 241, .18); }
/* Ticks as paper discs. The bare plum glyph is a light-background treatment;
   plum on ink is the one brand pairing that genuinely fails to read, so the
   contrast is inverted rather than the colour abandoned. */
.offer-hero--ink .offer-summary--inline li::before {
	content: "\2713"; left: 0; top: 1px;
	width: 19px; height: 19px;
	display: flex; align-items: center; justify-content: center;
	background: var(--paper); color: var(--plum);
	border-radius: 50%; font-size: 11px; font-weight: 700; line-height: 1;
}

/* ------------------------------------------------------------
   Photo hero for service-offer pages: 'hero_style' => 'photo'.
   Same technique as .as-photo-hero on /websites/ and
   .svc-hero--estate on /it-support/, but for the shared offer
   template, so any offer page can take a photograph.

   Carries --ink as well, deliberately: ink already solves every
   copy colour for a dark ground, so this only places the picture
   and lays a scrim under the text.
   ------------------------------------------------------------ */
.offer-hero--photo .offer-hero-media { position: absolute; inset: 0; z-index: 0; }
.offer-hero--photo .offer-hero-media img {
	width: 100%; height: 100%; object-fit: cover; object-position: center 50%; display: block;
}
/* Per-photo framing. Measured, not guessed: at 1440px the hero box is 1440x750
   (AR 1.92) against a 2400x1350 source (AR 1.78), so the box is WIDER than the
   image and `cover` crops TOP AND BOTTOM ONLY. The horizontal half of
   object-position has no effect here — setting it is wasted motion.
   On the pizzeria shot the server stands right under the price card. Low values
   framed her chest and left a headless apron under the card; 60% drops her out
   of frame entirely and fills that side with counter, bar front and the
   pizzaiolo instead. */
.offer-hero--photo-kitchen .offer-hero-media img { object-position: center 42%; }
/* The allotment overhead is near-vertical and evenly detailed, so there is no
   subject to hold — the crop is about where the copy lands rather than what
   is in frame. 58% keeps the denser plots behind the right-hand card and the
   thinner top edge under the headline. */
.offer-hero--photo-survey .offer-hero-media img { object-position: center 58%; }
/* The scrim is not decoration. The copy sits on the left of the picture, and
   without a guaranteed dark bed the headline lands on whatever the photograph
   happens to be doing there. Replaces the two radial plum lights --ink paints:
   a photograph needs a directional scrim, not a glow. */
.offer-hero--photo::before {
	/* Eased back once the photograph earned it. The first pass was built for a
	   dim evening shot and buried a well-lit room; the headline has contrast to
	   spare, so the left third can carry the window and the room behind the copy
	   rather than reading as a flat panel. */
	background: linear-gradient(90deg, rgba(28,32,36,.90) 0%, rgba(28,32,36,.84) 40%, rgba(28,32,36,.52) 62%, rgba(28,32,36,.22) 100%);
	z-index: 1;
}
.offer-hero--photo > .container { position: relative; z-index: 2; }
/* The card folds into the LEFT column with the copy, and the grid collapses to
   one column. A photo hero has no right-hand column to fill — the picture is
   the whole background — so a card over there sits ON the photograph and hides
   the scene the photograph was chosen for. Same reasoning as /websites/, which
   keeps its hero clear and puts the price in a small flag instead. */
.offer-hero--photo .offer-hero-grid { grid-template-columns: minmax(0, 1fr); }
.offer-hero--photo .offer-hero-copy { max-width: 620px; }
.offer-hero--photo .offer-summary--inline { max-width: 560px; }

/* On a photograph the summary must be a solid card — ink's translucent panel
   would show the picture through the figures. */
.offer-hero--photo .offer-summary--inline {
	background: var(--paper); border: 0;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}
.offer-hero--photo .offer-summary--inline .offer-summary-label,
.offer-hero--photo .offer-summary--inline .offer-summary-suffix { color: var(--muted); }
.offer-hero--photo .offer-summary--inline .offer-summary-price,
.offer-hero--photo .offer-summary--inline .offer-summary-title { color: var(--ink); }
.offer-hero--photo .offer-summary--inline li { color: var(--ink); }
.offer-hero--photo .offer-summary--inline .offer-summary-rule { background: var(--border); }
.offer-hero--photo .offer-summary--inline li::before { background: var(--plum); color: var(--paper); }

/* ------------------------------------------------------------
   Worked-example bar comparison inside the summary card
   ('summary_bars'). Three magnitudes where the proportion is
   the argument — our sliver of a bar next to the marketplace's
   full-width one. Colour follows the entity: plum is us, stone
   is the marketplace pair (deliberately the same — they are the
   same kind of thing); identity is carried by the row labels,
   never by colour alone, and every figure is real ink text.
   ------------------------------------------------------------ */
.offer-compare { display: grid; gap: 17px; margin-top: 6px; }
.offer-compare-label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.offer-compare-label span { font-weight: 400; color: var(--muted); }
.offer-compare-track { display: flex; align-items: center; gap: 10px; }
/* Flat at the baseline, 4px rounded at the data end. */
.offer-compare-bar { display: block; height: 28px; min-width: 8px; background: var(--as-cost); border-radius: 0 4px 4px 0; }
.offer-compare-row--us .offer-compare-bar { background: var(--as-keep); }
.offer-compare-value { font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.offer-compare-row--us .offer-compare-value { color: var(--as-keep); }
.offer-compare-note { margin: 15px 0 0; font-size: 12px; color: var(--muted); }

/* Visually hidden, still announced. The theme had no such utility, so the
   "(opens in a new tab)" note on the demo button had nothing to hide it. */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 900px) {
	/* The photograph comes OUT from behind the copy and sits on top of it.

	   Scrimming a full-bleed picture and printing a headline, a lead paragraph
	   and two buttons over it costs the picture everything: on a phone the
	   hero is tall and narrow, so the text bed covered nearly all of it and
	   the pizzeria read as dark grey texture. The same photograph shown as a
	   band at the top of the page is legible in a way no scrim setting makes
	   it, and the copy below sits on the hero's own ink ground, which already
	   carries light type — so nothing has to fight for contrast. Same shape as
	   the /websites/ hero, which stacks image-then-copy at this width. */
	.offer-hero--photo { padding-top: 0; }
	.offer-hero--photo .offer-hero-media {
		position: static;
		margin-bottom: clamp(24px, 5.5vw, 34px);
	}
	/* The crop has to follow the width, not sit at one ratio across the whole
	   range. At 820px a 4:3 frame is 615px tall and fills a tablet screen
	   before a word of copy appears; at 390px a 16:9 frame is a 220px letterbox
	   slit with no room in it. So: 16:9 for tablets, 4:3 once the viewport is
	   narrow enough to need the height. */
	.offer-hero--photo .offer-hero-media img {
		height: auto;
		aspect-ratio: 16 / 9;
		object-position: 78% 50%;
	}
	/* The scrim existed only to make text readable ON the picture. Nothing sits
	   on the picture now, and left on it would grey out the photograph the
	   change is meant to reveal. */
	.offer-hero--photo::before { display: none; }
}

/* Round 3 (2026-09-25): on a phone (390x844) the 4:3 photograph plus the
   headline and lead put the first button at 978px, and on an iPad (820x1180)
   the 16:9 frame was 461px tall, so the price card started below the screen.
   The headline and the main button must be on the first screen.
   Tablet: a shorter 5:2 band keeps the picture on top.
   Phone: no crop of the picture leaves room for a four-line headline, a lead
   and the buttons, so the copy comes first and the photograph follows the
   buttons, above the price card. `display: contents` lifts the copy's
   children into the hero's own column so the picture can sit between them
   without a second <img> in the markup. */
@media (max-width: 900px) {
	.offer-hero--photo .offer-hero-media img { aspect-ratio: 5 / 2; }
}
@media (max-width: 620px) {
	.offer-hero--photo {
		display: flex; flex-direction: column;
		padding-top: clamp(28px, 7vw, 40px);
	}
	.offer-hero--photo > .offer-hero-grid,
	.offer-hero--photo .offer-hero-copy { display: contents; }
	.offer-hero--photo .offer-hero-copy > * { margin-left: 16px; margin-right: 16px; }
	.offer-hero--photo .offer-hero-copy > h1 { margin-bottom: 18px; }
	.offer-hero--photo .offer-hero-copy > .lead { margin-bottom: 0; }
	.offer-hero--photo .offer-hero-copy > .offer-hero-actions { margin-top: 24px; }
	.offer-hero--photo .offer-hero-media { order: 1; margin: 30px 0 28px; }
	.offer-hero--photo .offer-hero-media img { aspect-ratio: 4 / 3; }
	.offer-hero--photo .offer-hero-copy > .offer-summary--inline { order: 2; }
}

/* Renders square to the grid: same 460px block as the price card, flush to the
   left edge of their own column. The theme centres this figure by default,
   which is what left the picture floating instead of lining up with anything. */
/* The base rule centres every grid item in its row. With the copy spanning
   both rows that leaves the renders floating instead of starting level with
   the eyebrow, so the ink hero tops everything out. */
.offer-hero--ink .offer-hero-grid--visual { align-items: start; }
.offer-hero--ink .offer-hero-visual { text-align: left; }
.offer-hero--ink .offer-hero-visual img { margin-inline: 0; filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .50)); }
@media (min-width: 901px) {
	.offer-hero--ink .offer-hero-visual { width: 100%; max-width: 460px; }
	/* The eyebrow is an inline-flex box, so its own top sits 2px below the
	   column edge (half-leading). Without this the picture starts 2px proud. */
	.offer-hero--ink .offer-hero-grid--visual > .offer-hero-visual:not(.offer-hero-visual--2) { margin-top: 2px; }
	.offer-hero--ink .offer-hero-visual img { max-width: 100%; width: 100%; }
}
/* `.offer-showcase-caption` named explicitly: the 44ch cap above is the same
   specificity as a bare figcaption rule and wins on source order, which left
   the first caption's rule stopping short of the second's. */
.offer-hero--ink .offer-hero-visual figcaption.offer-showcase-caption {
	max-width: 100%; margin: 14px 0 0; padding-top: 12px;
	border-top: 1px solid rgba(247, 245, 241, .14);
	font-size: 13px; line-height: 1.5; color: rgba(247, 245, 241, .62); text-align: left;
}
/*
 * Asset padding correction. Read from the alpha channels: mobile-app.webp is
 * opaque to within 2px of every edge, but pole-pane-app.webp carries 48px of
 * empty space above its phones and 100px below (of 1670). Untouched that reads
 * as a wider gap above the second render and a caption drifting away from it.
 * Margin percentages resolve against the figure's width, so this tracks the
 * image at every viewport: 48/1670 of the rendered height is 3.0% of the
 * width, 100/1670 is 6.25%. The real fix is re-exporting the asset trimmed.
 */
@media (min-width: 901px) {
	.offer-hero--ink .offer-hero-visual--2 img { margin-top: -3.0%; margin-bottom: -6.25%; }
}
@media (max-width: 900px) {
	.offer-hero--ink .offer-hero-visual { text-align: center; }
	.offer-hero--ink .offer-hero-visual img { margin-inline: auto; }
	.offer-hero--ink .offer-hero-visual figcaption.offer-showcase-caption { max-width: min(100%, 330px); margin-inline: auto; }
}

/* Live-demo button. Used wherever $as_service['demo'] is set, so it needs a
   light-background form as well as the ink one. */
.btn-demo {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 24px; font-weight: 600; font-size: 15px;
	border-radius: var(--btn-radius);
	background: transparent; color: var(--plum); border: 1px solid var(--plum);
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-demo:hover { background: var(--plum); color: #fff; text-decoration: none; }
/* A live dot, because the point of the link is that it is running right now. */
.btn-demo .btn-demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--plum); box-shadow: 0 0 0 4px rgba(92, 36, 65, .14); flex: none; }
.btn-demo:hover .btn-demo-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .28); }
/* On the dark hero this was a ghost button — transparent with a pale hairline
   — sitting next to a solid primary, so it read as the thing you don't click.
   Now it has its own frosted body and a live green dot: the demo is the
   lowest-commitment thing on the page and should look it. */
.offer-hero--ink .btn-demo {
	color: #fff;
	background: rgba(247, 245, 241, .10);
	border-color: rgba(247, 245, 241, .38);
	backdrop-filter: blur(2px);
	transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.offer-hero--ink .btn-demo:hover {
	background: rgba(247, 245, 241, .18);
	color: #fff;
	border-color: rgba(247, 245, 241, .72);
	transform: translateY(-1px);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
/* Green reads as "running right now" — the same signal as a status light. */
.offer-hero--ink .btn-demo .btn-demo-dot {
	background: var(--as-live);
	box-shadow: 0 0 0 4px rgba(95, 184, 114, .22);
	animation: as-demo-pulse 2.4s ease-in-out infinite;
}
.offer-hero--ink .btn-demo:hover .btn-demo-dot { background: var(--as-live); }
@keyframes as-demo-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(95, 184, 114, .18); }
	50%      { box-shadow: 0 0 0 6px rgba(95, 184, 114, .30); }
}
/* A pulsing dot is decoration, not information — the word "live" is already
   in the label, so it can stop dead without losing meaning. */
@media (prefers-reduced-motion: reduce) {
	.offer-hero--ink .btn-demo .btn-demo-dot { animation: none; }
	.offer-hero--ink .btn-demo:hover { transform: none; }
}
@media (max-width: 560px) { .btn-demo { width: 100%; justify-content: center; } }

.offer-showcase { background: var(--paper); margin-top: clamp(-48px, -4vw, -20px); padding: 0 0 clamp(32px, 5vw, 56px); }
.offer-showcase-inner { text-align: center; }
/* margin-inline: auto because the image is a block — the inner wrapper's
   text-align: center centres the caption but has never centred the picture,
   which has been sitting against the left edge of the content column on every
   service page that uses a showcase band. */
.offer-showcase img { max-width: min(100%, 940px); height: auto; margin-inline: auto; filter: drop-shadow(0 28px 56px rgba(28,32,36,.16)); }
.offer-showcase--tall img { max-width: min(100%, 680px); }
.offer-showcase--card img { max-width: min(100%, 880px); border-radius: 18px; filter: none; box-shadow: 0 24px 56px rgba(28,32,36,.28); }
/* Secondary showcase sits after pricing rather than under the hero, so it
   doesn't need the negative margin that stitches the primary into the hero. */
/* A full-page screenshot, cropped rather than shown whole. The Sarum Street
   Kitchen shot is 1000x2104 — at the band's 940px that is over 1900px of page,
   so the picture becomes the section. Capped and cropped from the top, it
   shows the hero and the order panel, which is the part that makes the point;
   hovering pans down the page the way the portfolio thumbnails do. */
.offer-showcase--shot img { max-width: min(100%, 880px); width: 100%; height: clamp(320px, 42vw, 520px);
  object-fit: cover; object-position: center top; border-radius: 14px;
  filter: none; box-shadow: 0 24px 56px rgba(28,32,36,.22);
  transition: object-position 3.4s ease; }
.offer-showcase-link { display: block; }
.offer-showcase-link:hover img { object-position: center bottom; }
.offer-showcase-caption a { color: var(--plum); font-weight: 600; white-space: nowrap; }
/* The mid-page band sits between two full sections rather than tucked under
   the hero, so it does not want the hero band's negative top margin. */
.offer-showcase--mid { margin-top: 0; padding: clamp(28px, 4.4vw, 52px) 0; }
.offer-showcase--secondary { margin-top: 0; padding: clamp(24px, 4vw, 48px) 0 clamp(28px, 4.4vw, 50px); }
.offer-showcase--secondary img { max-width: min(100%, 780px); }
/* Existing-sites cards (Websites page) */
.existing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: var(--stack); }
@media (max-width: 900px) { .existing-grid { grid-template-columns: 1fr; } }
.existing-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; }
.existing-card--featured { border-color: var(--plum); box-shadow: 0 8px 24px rgba(92,36,65,.10); }
.existing-tag { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--plum); }
.existing-card h3 { margin: 0; font-size: 20px; }
.existing-card p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.55; }
.existing-price { margin-top: auto !important; padding-top: 12px; font-weight: 600; color: var(--ink); border-top: 1px solid var(--border); }

/* Illustration beside a section head (2-col row on desktop) */
.offer-head-row { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin: 0 0 clamp(36px, 5vw, 56px); }
.offer-head-row .offer-section-head--in-row { margin: 0; }
.offer-head-art { text-align: center; }
.offer-head-art img,
.offer-head-art svg { max-width: min(100%, 520px); height: auto; filter: drop-shadow(0 14px 28px rgba(28,32,36,.08)); }
@media (max-width: 900px) {
	/* minmax(0,…) + min(100%,…) so the art can't set a min-content floor
	   wider than the container — that pushed body copy off-screen on phones. */
	.offer-head-row { grid-template-columns: minmax(0, 1fr); }
	.offer-head-art img,
	.offer-head-art svg { max-width: min(100%, 420px); }
}
.offer-showcase-caption { margin: 16px auto 0; font-size: 13.5px; color: var(--muted); max-width: 62ch; }

/* Real-shot gallery on /drone/ */
.drone-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.drone-gallery figure { margin: 0; }
.drone-gallery img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 14px 34px rgba(28,32,36,.16); }
.drone-gallery figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center; }
@media (max-width: 860px) { .drone-gallery { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Live document embed (e.g. the sample survey report on /drone-surveys/) */
.offer-embed { background: var(--paper); padding: clamp(20px, 3.4vw, 44px) 0 clamp(32px, 5vw, 56px); }
.offer-embed-head { margin-bottom: clamp(20px, 3vw, 32px); }
.offer-embed-frame { max-width: 880px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 56px rgba(28,32,36,.18); }
.offer-embed-frame iframe { display: block; width: 100%; height: clamp(420px, 62vh, 660px); border: 0; }
.offer-embed-caption { margin: 14px auto 0; text-align: center; font-size: 13.5px; color: var(--muted); max-width: 70ch; }
.offer-section-head { max-width: 660px; margin: 0 0 clamp(36px, 5vw, 56px); }
.offer-section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.offer-section-head--center .lead { margin-left: auto; margin-right: auto; }
.offer-section-head h2 { margin: 6px 0 14px; }

/* Outcomes / feature grid */
.offer-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.offer-feature-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .offer-feature-grid { grid-template-columns: 1fr; } }
/* When the section drops its visible head the cards ARE the section, so they
   carry a little more of it: a rule on top in place of the heading that used
   to sit above them, and more room to breathe. */
.offer-feature-grid--lead { margin-top: clamp(4px, 1vw, 10px); }
.offer-feature { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px 24px; position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.offer-feature-grid--lead .offer-feature { padding-top: 30px; }
/* A plum rule across the top, drawn rather than bordered so it stops short of
   the rounded corners instead of wrapping them. */
.offer-feature-grid--lead .offer-feature::before { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 3px;
  background: var(--plum); border-radius: 0 0 3px 3px; opacity: .85; }
.offer-feature:hover { border-color: rgba(92,36,65,.34); box-shadow: 0 16px 34px rgba(28,32,36,.09); transform: translateY(-2px); }
.offer-feature-num { position: absolute; top: 20px; right: 22px; font-family: "Lora", Georgia, serif; font-size: 22px; color: var(--stone-ink); font-weight: 600; letter-spacing: -.01em; }
.offer-feature-grid--lead .offer-feature-num { top: 26px; opacity: .55; }
.offer-feature-lede { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--plum); margin-bottom: 7px; padding-right: 38px; }
.offer-feature h3 { margin: 0 0 8px; font-size: 19px; padding-right: 38px; }
.offer-feature p { color: var(--muted); font-size: 15px; margin: 0; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .offer-feature { transition: none; } .offer-feature:hover { transform: none; } }

/* Clarity notice */
.offer-clarity { padding: clamp(30px, 4.4vw, 46px) 0; background: var(--blush); }
.offer-clarity-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.offer-clarity-inner .eyebrow { color: var(--plum-d); }
.offer-clarity-inner h2 { margin: 6px 0 16px; color: var(--plum-d); }
.offer-clarity-copy p { color: var(--ink); font-size: 16.5px; line-height: 1.7; margin: 0; }
.offer-clarity-copy p + p { margin-top: 14px; }

/* Route comparison — the opt-in version of this section.
   The argument was two paragraphs carrying eight figures: to find out what
   Just Eat costs you had to read a sentence about Uber Eats first. Three
   routes carrying the same two figures IS tabular data, so it is a table —
   the reader compares by running down a column rather than holding numbers
   in their head between cards, and a screen reader names the column when it
   reads the cell. */
.offer-clarity--wide .offer-clarity-inner { max-width: 760px; }
.offer-clarity-basis { margin: 10px auto 0; max-width: 54ch; font-size: 14.5px; color: var(--plum-d); opacity: .85; }
.offer-routes { width: 100%; max-width: 680px; margin: clamp(22px, 3vw, 30px) auto 0;
  border-collapse: separate; border-spacing: 0; background: #fff;
  border: 1px solid rgba(92,36,65,.16); border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(92,36,65,.10); }
.offer-routes th, .offer-routes td { padding: 13px clamp(12px, 1.8vw, 20px); text-align: left; vertical-align: middle; }
.offer-routes thead th { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; background: var(--paper); border-bottom: 1px solid rgba(92,36,65,.14); }
.offer-routes tbody tr + tr th, .offer-routes tbody tr + tr td { border-top: 1px solid rgba(92,36,65,.12); }
.offer-routes-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-route-name { display: block; font-family: 'Lora', Georgia, serif; font-size: 16.5px; font-weight: 700; color: var(--plum-d); }
.offer-route-terms { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.4; color: var(--muted); }
.offer-route-cost { font-size: 16px; color: var(--ink); }
/* The column the headline is about, so it is the one that is set heavier. */
.offer-route-keep { font-size: 18px; font-weight: 700; color: var(--plum-d); }
/* Our row, tinted rather than inverted: at one row of three, a solid plum
   band reads as a highlighted table row; a whole dark card would shout. */
.offer-routes tbody tr.is-best th, .offer-routes tbody tr.is-best td { background: var(--blush); }
.offer-routes tbody tr.is-best .offer-route-keep { color: var(--plum-d); }
/* Invitation row under the priced plans.
   Columns are minmax-bounded rather than `auto`: an auto track sizes to its
   content's max-content, and a paragraph in one collapses the other to its
   longest word — which is exactly what happened to .offer-cta. */
.offer-invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: clamp(18px, 3vw, 40px);
  align-items: center; max-width: 900px; margin: clamp(26px, 3.4vw, 38px) auto 0;
  padding: clamp(22px, 2.8vw, 30px) clamp(22px, 3vw, 34px);
  background: var(--paper); border: 1px solid var(--border); border-radius: 14px; text-align: left; }
.offer-invite-title { margin: 0 0 6px; font-family: 'Lora', Georgia, serif; font-size: clamp(19px, 2.2vw, 23px); font-weight: 700; color: var(--plum-d); }
.offer-invite-body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted); max-width: 62ch; }
.offer-invite-cta { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 720px) {
  .offer-invite { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .offer-invite-body { margin-inline: auto; }
  .offer-invite-cta { width: 100%; text-align: center; justify-content: center; }
}
/* Scope-of-practice columns. Three groups reading across rather than one
   block reading down — and no card around each, because the section already
   has its own ground and boxing the groups would answer a wall of text with a
   wall of boxes. Hairlines between them do the separating instead. */
.offer-clarity-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  max-width: 1000px; margin: clamp(24px, 3.2vw, 34px) auto 0; text-align: left; }
.offer-clarity-panel { padding: 0 clamp(16px, 2.2vw, 28px); border-left: 1px solid rgba(92,36,65,.18); }
.offer-clarity-panel:first-child { border-left: 0; padding-left: 0; }
.offer-clarity-panel:last-child { padding-right: 0; }
.offer-clarity-panel-label { margin: 0 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--plum-d); }
.offer-clarity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.offer-clarity-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
/* A tick for what is included. */
.offer-clarity-list li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 11px; height: 6px;
  border-left: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(-45deg); }
/* A cross for the exclusions — a ticked list of things you are NOT getting
   reads as a feature list at a glance, which is the opposite of the point. */
.offer-clarity-list--no li::before { content: "\00d7"; border: 0; transform: none; top: 0; left: 2px;
  width: auto; height: auto; font-size: 15px; font-weight: 700; color: rgba(92,36,65,.55); }
.offer-clarity-panel-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
@media (max-width: 860px) {
  .offer-clarity-panels { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 560px; }
  .offer-clarity-panel { border-left: 0; padding: 0; border-top: 1px solid rgba(92,36,65,.18); padding-top: 20px; }
  .offer-clarity-panel:first-child { border-top: 0; padding-top: 0; }
}
.offer-clarity-copy--foot { margin-top: clamp(18px, 2.4vw, 24px); }
.offer-clarity-copy--foot p { font-size: 13.5px; line-height: 1.65; color: var(--plum-d); opacity: .85; }
@media (max-width: 560px) {
  /* Still a table at 390px — three short columns fit once the padding comes
     in. Stacking it would lose the column alignment that makes it readable. */
  .offer-routes th, .offer-routes td { padding: 11px 10px; }
  .offer-routes thead th { font-size: 10.5px; letter-spacing: .04em; }
  .offer-route-name { font-size: 15px; }
  .offer-route-terms { font-size: 11.5px; }
  .offer-route-cost { font-size: 14.5px; }
  .offer-route-keep { font-size: 16px; }
}

/* Process (rides on .as-sec-dark) */
.offer-process-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 900px) { .offer-process-grid { grid-template-columns: 1fr; } }
.offer-process-grid h2 { margin: 6px 0 14px; }
.offer-step-list { list-style: none; padding: 0; margin: 0; }
.offer-step-list li { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(219,215,208,.16); }
.offer-step-list li:last-child { border-bottom: none; }
.offer-step-list li > span { font-family: "Lora", Georgia, serif; font-size: 22px; font-weight: 600; color: var(--blush); flex-shrink: 0; min-width: 40px; line-height: 1.35; }
.offer-step-list li h3 { color: var(--paper); margin: 0 0 6px; font-size: 18px; }
.offer-step-list li p { color: #c9cbce; margin: 0; font-size: 15px; line-height: 1.6; }

/* Pricing plans */
.offer-plan-grid { display: grid; gap: 22px; margin-top: 8px; }
.offer-plan-grid--1 { grid-template-columns: minmax(0, 480px); justify-content: center; }
.offer-plan-grid--2 { grid-template-columns: repeat(2, 1fr); }
.offer-plan-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Four plans go 2x2, not 4-across. At four across each card is ~280px and the
   feature lists inside them wrap to nonsense; 2x2 keeps them the width they
   were designed at. */
.offer-plan-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .offer-plan-grid--2, .offer-plan-grid--3, .offer-plan-grid--4 { grid-template-columns: 1fr; } }
.offer-plan { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px 26px 30px; display: flex; flex-direction: column; position: relative; }
.offer-plan--featured { border-color: var(--plum); box-shadow: 0 8px 40px rgba(92,36,65,.10); }
.offer-plan-badge { position: absolute; top: -12px; left: 24px; background: var(--plum); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 100px; margin: 0; }
.offer-plan-name { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.offer-plan-price { font-family: "Lora", Georgia, serif; font-size: clamp(28px, 4vw, 36px); font-weight: 700; color: var(--ink); line-height: 1.1; margin-bottom: 4px; }
.offer-plan-price span { font-family: "Work Sans", sans-serif; font-size: 15px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.offer-plan-intro { font-size: 14.5px; color: var(--muted); margin: 8px 0 18px; }
.offer-plan ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.offer-plan li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
.offer-plan li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--plum); font-weight: 700; }
.offer-plan-cta {
  display: block; text-align: center;
  background: var(--plum); color: #fff;
  border: 1px solid var(--plum); border-radius: var(--btn-radius);
  padding: 12px 18px; font-weight: 600; font-size: 15px;
  text-decoration: none; transition: background .15s, color .15s, border-color .15s;
  margin-top: auto;
}
.offer-plan-cta:hover { background: var(--plum-d); border-color: var(--plum-d); color: #fff; text-decoration: none; }
.offer-pricing-note { margin: 30px auto 0; max-width: 720px; font-size: 14px; color: var(--muted); line-height: 1.65; text-align: center; }
/* Two-column version: picture left, conditions right. The notes get to be
   read at body size instead of 14px centred grey, and the illustration gets a
   reason to be on the page next to the thing it explains. */
.offer-pricing-aside { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px); align-items: center; margin: clamp(34px, 4.4vw, 52px) auto 0; max-width: 1060px; }
.offer-pricing-aside-media { margin: 0; }
.offer-pricing-aside-media img { width: 100%; height: auto; display: block; }
.offer-pricing-aside-media figcaption { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); }
.offer-pricing-aside-copy { font-size: 15px; line-height: 1.7; color: var(--ink); text-align: left; }
.offer-pricing-aside-copy strong { display: block; margin-top: 14px; color: var(--plum-d); }
.offer-pricing-aside-copy strong:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .offer-pricing-aside { grid-template-columns: minmax(0, 1fr); gap: 24px; max-width: 620px; }
}

/* FAQs */
.offer-faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 900px) { .offer-faq-grid { grid-template-columns: 1fr; } }
.offer-faq-grid h2 { margin: 6px 0 0; }
.offer-faq-list details { border-bottom: 1px solid var(--border); padding: 18px 0; }
.offer-faq-list details:first-child { border-top: 1px solid var(--border); }
.offer-faq-list summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 16.5px; color: var(--ink); position: relative; padding-right: 32px; }
.offer-faq-list summary::-webkit-details-marker { display: none; }
.offer-faq-list summary::after { content: "+"; position: absolute; right: 4px; top: -2px; font-size: 24px; font-weight: 400; color: var(--plum); line-height: 1; transition: transform .2s; }
.offer-faq-list details[open] summary::after { content: "−"; }
.offer-faq-list p { margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* Related links */
.offer-related { padding: 40px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.offer-related-inner { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.offer-related-inner > p { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.offer-related-inner > div { display: flex; gap: 22px; flex-wrap: wrap; }
.offer-related-inner a { font-weight: 600; font-size: 15px; color: var(--plum); }
.offer-related-inner a:hover { color: var(--plum-d); text-decoration: none; }

/* Final CTA banner. Blush since 2026-09-26 (Ashley: "blush everywhere"), the
   same ending as the brand pages' .as-sec-cta; it was solid plum, so a visitor
   moving between the two page families saw two kinds of ending. */
.offer-cta { background: var(--blush); }
/* The second track is BOUNDED, and that is the whole fix.

   It was `auto`, which sizes to max-content — and the content is the address
   plus two reassurances, one long unwrapped sentence about 730px wide. `auto`
   took all 730px of it, and since an `fr` track bottoms out at min-content the
   headline column collapsed to the width of its longest word. "Get your own
   ordering site up in a week." came out one word per line, on every service
   page, at every width from 1100px down to the 720px stacking point — and even
   at 1440px the 1.6fr was a fiction, splitting 325px of headline against 731px
   of small print.
   
   Stacking also moves 720 -> 900, matching the hero and the rest of the page;
   between those two widths there was never room for two columns anyway. */
.offer-cta-inner { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 22rem); gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (max-width: 900px) { .offer-cta-inner { grid-template-columns: 1fr; text-align: center; } }
.offer-cta .eyebrow { color: var(--plum); margin: 0 0 6px; }
.offer-cta h2 { color: var(--ink); margin: 0 0 12px; }
.offer-cta p { color: #4F5358; margin: 0; max-width: 46ch; font-size: 16.5px; }
.offer-cta .btn-light { background: var(--plum); color: #fff; border-color: var(--plum); }
.offer-cta .btn-light:hover { background: var(--plum-d); color: #fff; }
.offer-cta-action { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* max-width:none was what let this line dictate the grid — it exists to undo
   the 46ch on `.offer-cta p`, but unbounded it became the widest thing in the
   section. Bounded to the column it lives in, it wraps instead of pushing. */
.offer-cta .offer-cta-contact { font-size: 14.5px; color: #4F5358; line-height: 1.55; max-width: 22rem; }
.offer-cta .offer-cta-contact a { color: var(--plum); font-weight: 600; font-variant-numeric: tabular-nums; }
.offer-cta .offer-cta-contact span { display: block; margin-top: 4px; font-size: 13px; color: #4F5358; }
@media (max-width: 900px) {
	.offer-cta-action { align-items: center; }
	/* Stacked, the contact line has the full column and should use it. */
	.offer-cta .offer-cta-contact { max-width: 52ch; margin-left: auto; margin-right: auto; }
}

/* ── Google reviews block ([as_reviews]) ─────────────────────── */
.as-reviews-sec { background: #fff; }
.as-reviews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.as-reviews-head h2 { margin: 0; }
.as-reviews-badge { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; box-sizing: border-box; padding: 10px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); color: var(--ink); text-align: center; text-decoration: none; font-size: 14px; white-space: normal; }
.as-reviews-badge:hover { border-color: var(--plum); }
.as-reviews-g { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid var(--border); font: 700 15px/1 Arial, sans-serif; color: #4285F4; }
.as-reviews-score { font-weight: 700; font-variant-numeric: tabular-nums; }
.as-reviews-count { color: var(--muted); }
.as-stars { display: inline-flex; gap: 2px; color: #F5B301; line-height: 0; }
.as-star { fill: currentColor; }
.as-star--empty { fill: var(--border); }
.as-star--half { fill: url(#as-half); }
.as-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.as-review { display: flex; flex-direction: column; gap: 14px; background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 26px 24px; }
.as-review-text { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink); flex: 1; }
.as-review-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 13.5px; color: var(--muted); }
.as-review-author { font-weight: 600; color: var(--ink); }
.as-review-src { flex-basis: 100%; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.as-review-more { margin-left: auto; color: var(--plum); font-weight: 600; text-decoration: none; }
.as-review-more:hover { text-decoration: underline; }
.as-reviews-foot { margin: 28px 0 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.as-reviews-foot a { color: var(--plum); font-weight: 600; }
.as-reviews-ask { margin: 14px 0 0; text-align: center; }
.as-reviews-grid + .as-reviews-ask { margin-top: 28px; } /* no source note between them (home, foot="0") */
.as-reviews-write { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 600; }
.as-reviews-write:hover { border-color: var(--plum); color: var(--plum); }
@media (max-width: 860px) { .as-reviews-grid { grid-template-columns: 1fr; } }

/* ── Branding: "what you get" assets grid ────────────────────── */
.brand-assets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 40px 0 0; }
.brand-asset { background: var(--paper); border: 1px solid var(--border); border-radius: 12px; padding: 24px 22px; }
.brand-asset::before { content: ""; display: block; width: 30px; height: 30px; margin-bottom: 14px; background-repeat: no-repeat; background-position: left center; background-size: contain; }
.brand-asset h3 { margin: 0 0 5px; font-size: 16px; }
.brand-asset p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.brand-asset--logo::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='1.5'/%3E%3Ccircle cx='8.5' cy='9' r='1.5'/%3E%3Cpath d='M4 18l5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"); }
.brand-asset--guide::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.brand-asset--card::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='1.5'/%3E%3Cpath d='M6 15h5'/%3E%3Ccircle cx='16' cy='11' r='2'/%3E%3C/svg%3E"); }
.brand-asset--file::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M10 13h5M10 16h5'/%3E%3C/svg%3E"); }
.brand-asset--social::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.4 7.1'/%3E%3C/svg%3E"); }
.brand-asset--sign::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C2441' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9l1.5-4h13L20 9'/%3E%3Cpath d='M5 9h14v11H5z'/%3E%3Cpath d='M4 9a2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0 2 2 0 0 0 4 0'/%3E%3C/svg%3E"); }
@media (max-width: 860px) { .brand-assets-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .brand-assets-grid { grid-template-columns: 1fr; } }

/* ── Our Work ─────────────────────────────────────────────────────────── */
.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 26px; }
.work-card { background: var(--cream, #fff); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.work-card--planned, .work-card--building { opacity: .92; }
.work-thumb { position: relative; aspect-ratio: 8 / 5; background: var(--work-accent, var(--plum)); display: grid; place-items: center; overflow: hidden; }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.work-brand-board { position: absolute; inset: 0; padding: 24px; overflow: hidden; background: #1a1613; color: #fff; display: flex; align-items: center; justify-content: center; }
.work-brand-board::before { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, transparent 52%, rgba(224,86,45,.92) 52%); opacity: .92; }
.work-brand-board::after { content: ""; position: absolute; width: 230px; height: 230px; right: -100px; top: -130px; border: 32px solid rgba(244,167,44,.75); border-radius: 50%; }
.work-ssk-menu { position: relative; z-index: 1; width: min(100%, 300px); padding: 20px 22px 18px; border: 1px solid rgba(244,167,44,.62); background: #fbf7f1; color: #1a1613; box-shadow: 12px 12px 0 rgba(0,0,0,.18); transform: rotate(-2deg); }
.work-ssk-kicker { display: block; margin-bottom: 13px; color: #e0562d; font-size: 8px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.work-brand-lockup { display: flex; align-items: center; gap: 14px; }
.work-brand-lockup img { width: 64px; height: 64px; object-fit: contain; border-radius: 14px; box-shadow: 0 8px 22px rgba(26,22,19,.16); }
.work-brand-lockup span { display: grid; line-height: 1; }
.work-brand-lockup strong { font-family: 'Lora', Georgia, serif; font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.035em; }
.work-brand-lockup b { margin-top: 5px; color: #e0562d; font-size: 12px; letter-spacing: .21em; text-transform: uppercase; }
.work-ssk-line { display: block; height: 2px; margin: 16px 0 11px; background: #e0562d; }
.work-ssk-menu p { margin: 0; font-family: 'Lora', Georgia, serif; font-size: 18px; letter-spacing: -.025em; }
.work-ssk-menu p strong { color: #e0562d; }
.work-ssk-menu small { display: block; margin-top: 6px; color: #7a7066; font-size: 10px; font-weight: 600; }
.work-ssk-sticker { position: absolute; z-index: 1; right: 26px; bottom: 22px; display: grid; width: 52px; height: 52px; place-items: center; border: 2px solid #f4a72c; border-radius: 50%; color: #f4a72c; font-size: 12px; font-weight: 800; letter-spacing: .08em; transform: rotate(12deg); }
.work-brand-line { margin: 16px 0 0; color: #7a7066; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
/* Brand palette + type strip — sits BELOW the thumbnail so it never gets clipped */
.work-brand-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--border); }
.work-brand-strip .work-brand-swatches { position: static; }
.work-brand-strip .work-brand-type { position: static; right: auto; bottom: auto; font-size: 30px; }
.work-brand-swatches { display: flex; gap: 7px; }
.work-brand-swatches i { width: 28px; height: 28px; background: var(--swatch); border: 1px solid rgba(26,22,19,.1); border-radius: 50%; box-shadow: 0 2px 5px rgba(26,22,19,.08); }
.work-brand-type { position: absolute; right: 32px; bottom: 22px; color: #e0562d; font-family: 'Lora', Georgia, serif; font-size: 42px; font-weight: 600; line-height: 1; }
/* Pole & Pane — same board treatment, its own sky-blue palette */
.work-brand-board--pnp { display: block; background: #eaf4fb; color: #142a3b; }
.work-brand-board--pnp::before { background: linear-gradient(125deg, transparent 52%, rgba(47,143,221,.2) 52%); }
.work-brand-board--pnp::after { display: none; }
.work-brand-board--pnp .work-brand-lockup { position: absolute; z-index: 1; top: 50%; left: 32px; gap: 14px; transform: translateY(-50%); }
.work-brand-board--pnp .work-brand-line { position: absolute; z-index: 1; left: 32px; bottom: 24px; margin: 0; }
.work-brand-board--pnp .work-brand-lockup img { width: 82px; height: 82px; padding: 7px; background: #fff; border: 1px solid rgba(47,143,221,.18); border-radius: 12px; box-shadow: 0 8px 22px rgba(20,42,59,.15); }
.work-brand-board--pnp .work-brand-lockup strong { font-size: clamp(23px, 2.7vw, 30px); }
.work-brand-board--pnp .work-brand-lockup b { margin-top: 5px; font-size: 12px; letter-spacing: .21em; }
.work-brand-board--pnp .work-brand-lockup b { color: #2f8fdd; }
.work-brand-board--pnp .work-brand-line { color: #4a6b85; }
.work-brand-board--pnp .work-brand-type { color: #2f8fdd; }
/* Kingsbarrow — same side-aligned board, graphite ground and hi-vis amber.
   Deliberately colder and heavier than the two consumer brands. */
.work-brand-board--kb { display: block; background: #eceae6; color: #1e2529; }
.work-brand-board--kb::before { background: linear-gradient(125deg, transparent 52%, rgba(30,37,41,.10) 52%); }
.work-brand-board--kb::after { display: none; }
.work-brand-board--kb .work-brand-lockup { position: absolute; z-index: 1; top: 50%; left: 32px; gap: 14px; transform: translateY(-50%); }
.work-brand-board--kb .work-brand-lockup img { width: 78px; height: 78px; padding: 6px; background: #fff;
  border: 1px solid rgba(30,37,41,.14); border-radius: 4px; box-shadow: 0 8px 22px rgba(30,37,41,.16); object-fit: contain; }
.work-brand-board--kb .work-brand-lockup strong { font-family: 'Archivo', 'Work Sans', sans-serif; font-size: clamp(21px, 2.5vw, 27px);
  font-weight: 800; letter-spacing: .01em; text-transform: uppercase; }
.work-brand-board--kb .work-brand-lockup b { margin-top: 6px; color: #8a5f00; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; }
.work-brand-board--kb .work-brand-line { position: absolute; z-index: 1; left: 32px; bottom: 24px; margin: 0; color: #5d6669; }
.work-brand-board--kb .work-brand-type { color: #f0a500; }
/* Ashburn Stone's own brand card — same side-aligned layout as P&P, our palette */
/* Aldwick — the store's own tokens: --bg #1c3326, --copper #c9b99a, --fg #f0ead8.
   The crest is a knocked-out WebP (the source JPEG ships on solid black). */
.work-brand-board--aldwick { display: block; background: #1c3326; color: #f0ead8; }
.work-brand-board--aldwick::before { background: linear-gradient(125deg, transparent 52%, rgba(201,185,154,.10) 52%); }
.work-brand-board--aldwick::after { display: none; }
.work-brand-board--aldwick .work-brand-lockup { position: absolute; z-index: 1; top: 50%; left: 32px; gap: 16px; transform: translateY(-50%); }
.work-brand-board--aldwick .work-brand-lockup img { width: 86px; height: 86px; border-radius: 0; background: none; box-shadow: none; object-fit: contain; }
.work-brand-board--aldwick .work-brand-lockup strong { font-size: clamp(23px, 2.7vw, 30px); color: #f0ead8; }
.work-brand-board--aldwick .work-brand-lockup b { margin-top: 5px; color: #c9b99a; font-size: 12px; letter-spacing: .21em; text-transform: uppercase; }
.work-brand-board--aldwick .work-brand-line { position: absolute; z-index: 1; left: 32px; bottom: 24px; margin: 0; color: #8fa396; }
.work-brand-board--aldwick .work-brand-type { color: #c9b99a; }
/* Turner Bros — the supplied lockup already does the heavy lifting. Keep the
   board quiet and architectural so the cut-out frame and TB monogram remain
   sharp at a glance, rather than competing with them through a fake redraw. */
/* Ebbwell — chalk ground, the lockup laid across it, a course of bricks along the top. */
.work-brand-board--ebbwell { display: block; padding: 0; background: #e9ece8; color: #1d2126; }
.work-brand-board--ebbwell::before { inset: 0 0 auto 0; height: 10px; opacity: 1; background: repeating-linear-gradient(90deg, #f2be22 0 30px, transparent 30px 34px); }
.work-brand-board--ebbwell::after { display: none; }
.work-brand-board--ebbwell > img { position: absolute; z-index: 1; left: 10%; top: 47%; width: 80%; height: auto; transform: translateY(-50%); }
.work-brand-board--ebbwell .work-brand-line { position: absolute; z-index: 2; left: 32px; bottom: 24px; margin: 0; color: #535c67; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: .18em; }
.work-brand-board--turner { display: block; padding: 0; background: #fff; color: #242021; }
.work-brand-board--turner::before { inset: 16px; background: none; border: 1px solid rgba(36,32,33,.14); opacity: 1; }
.work-brand-board--turner::after { width: 104px; height: 5px; right: 24px; top: 25px; border: 0; border-radius: 0; background: #242021; opacity: .16; }
.work-brand-board--turner > img { position: absolute; z-index: 1; left: 9%; top: 50%; width: 82%; height: 60%; object-fit: contain; transform: translateY(-50%); mix-blend-mode: multiply; }
.work-brand-board--turner .work-brand-line { position: absolute; z-index: 2; left: 32px; bottom: 24px; margin: 0; color: #5d595a; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.work-brand-board--turner .work-brand-type { color: #242021; }

/* ── Work card thumb: brand band over media ──────────────────
   Same anatomy on every card — the project's own logo and name in a
   band, its media underneath — so what varies between cards is the
   work, not the layout. The band sits over the card's accent, so each
   one still wears its own colour. */
.work-stack { position: absolute; inset: 0; display: flex; flex-direction: column; }
.work-stack__brand { flex: 0 0 auto; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; background: rgba(0,0,0,.26);
  border-bottom: 1px solid rgba(255,255,255,.12); }
/* Two classes deep: the generic `.work-thumb img` rule is (0,1,1) and
   would otherwise stretch the logo to fill and crop it. */
.work-thumb .work-stack__logo { width: 48px; height: 48px; flex: none;
  object-fit: contain; border-radius: 0; background: none; box-shadow: none; }
.work-stack__name { font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff; line-height: 1.25; }
.work-stack__media { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: rgba(0,0,0,.18); }
/* The band costs ~25% of an 8/5 thumb, which left the media a shallow
   slice. Stacked thumbs get a taller box so the media keeps the size it
   had before the band existed. Scoped by class, not :has(), so the
   brand-carousel thumbs (no stack) are unaffected. */
.work-thumb--stacked { aspect-ratio: 5 / 4; }
/* The status pill is absolutely placed at the thumb's top-left, which is
   now where the logo and name live. Move it opposite them and reserve the
   space so a long name ("Pole & Pane Booking Site") can't run underneath. */
.work-thumb--stacked .work-status { left: auto; right: 12px; top: 11px; }
.work-thumb--stacked .work-stack__brand { padding-right: 72px; }
.work-thumb-mark { font-family: 'Lora', Georgia, serif; font-size: 62px; font-weight: 600; color: rgba(255,255,255,.32); line-height: 1; }
.work-status { position: absolute; top: 12px; left: 12px; background: rgba(28,32,36,.82); color: #F7F5F1; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 5px 10px; border-radius: 100px; }
.work-card--live .work-status { background: #1a7f37; }
/* 'demo' is its own status, not a relabelled 'live' — so it reads as a
   neutral marker rather than borrowing the green "this is a real live
   site" signal. */
.work-card--demo .work-status { background: rgba(12,14,16,.62); color: #fff;
  border: 1px solid rgba(255,255,255,.34); backdrop-filter: blur(3px); }
.work-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.work-kind { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.work-name { font-family: 'Lora', Georgia, serif; font-size: 22px; line-height: 1.2; margin: 0 0 10px; }
.work-blurb { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
.work-points { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.work-points li { font-size: 12.5px; font-weight: 600; color: var(--plum); background: rgba(92,36,65,.07); border-radius: 100px; padding: 5px 11px; }
.work-meta { margin-top: auto; padding-top: 4px; }
.work-built { font-size: 13px; color: var(--muted); margin: 0 0 4px; }
.work-price { font-size: 14px; font-weight: 700; color: var(--plum); margin: 0; }
.work-link { display: inline-block; margin-top: 14px; font-size: 14.5px; font-weight: 700; color: var(--plum); }
.work-cta-btn { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: 16px; padding: 11px 20px; border-radius: 100px; background: var(--work-accent, var(--plum)); color: #fff; font-size: 14.5px; font-weight: 700; transition: filter .15s ease, transform .12s ease; }
.work-cta-btn:hover { filter: brightness(.93); color: #fff; }
.work-cta-btn:active { transform: translateY(1px); }
.work-note { font-size: 12.5px; color: var(--muted); font-style: italic; margin: 12px 0 0; }
/* Click-to-copy password callout.

   A real <button>, not a styled div: it is focusable, announces itself,
   and responds to Enter/Space for free. The pulse drives border, fill and
   glow — never opacity — so the password stays legible at every point of
   the cycle, and one cycle is ~2s, well under the 3-per-second ceiling
   that makes flashing content a seizure risk (WCAG 2.3.1). */
.work-copy-wrap { align-self: flex-start; margin: 12px 0 0; }
.work-copy { display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  padding: 9px 13px; border-radius: 9px; color: var(--ink);
  border: 2px solid rgba(92,36,65,.45); background: rgba(92,36,65,.07);
  animation: ctaHintPulse 2s ease-in-out infinite;
  transition: transform .12s ease; }
.work-copy:active { transform: translateY(1px); }
.work-copy:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }
.work-copy__value { font-weight: 700; letter-spacing: .04em;
  padding: 1px 8px; border-radius: 5px;
  background: rgba(92,36,65,.14); border: 1px solid rgba(92,36,65,.28); }

/* The cue word is CSS-driven: the button already carries an explicit
   aria-label, and the copy result is announced through the live region,
   so this text is purely visual (and marked aria-hidden). */
.work-copy__cue { font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .72; }
.work-copy__cue::after { content: "Copy"; }
.work-copy.is-copied .work-copy__cue::after { content: "Copied \2713"; }
.work-copy.is-failed .work-copy__cue::after { content: "Select it"; }
/* Job done — stop demanding attention once it has been copied. */
.work-copy.is-copied { animation: none; border-color: #1a7f37;
  background: rgba(26,127,55,.12); }
.work-copy.is-copied .work-copy__cue { opacity: 1; color: #1a7f37; }

/* On the carousel cards the ground is the project's dark accent. */
.work-track .work-copy { color: #fff;
  border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.1);
  animation-name: ctaHintPulseOnDark; }
.work-track .work-copy:hover { background: rgba(255,255,255,.2); }
.work-track .work-copy:focus-visible { outline-color: #fff; }
.work-track .work-copy__value { color: #fff;
  background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.3); }
.work-track .work-copy.is-copied { border-color: #7ee2a8;
  background: rgba(126,226,168,.2); animation: none; }
.work-track .work-copy.is-copied .work-copy__cue { color: #bdf5d5; }

@keyframes ctaHintPulse {
  0%, 100% { border-color: rgba(92,36,65,.30); background-color: rgba(92,36,65,.06);
             box-shadow: 0 0 0 0 rgba(92,36,65,.34); }
  50%      { border-color: rgba(92,36,65,1);   background-color: rgba(92,36,65,.15);
             box-shadow: 0 0 0 9px rgba(92,36,65,0); }
}
@keyframes ctaHintPulseOnDark {
  0%, 100% { border-color: rgba(255,255,255,.30); background-color: rgba(255,255,255,.08);
             box-shadow: 0 0 0 0 rgba(255,255,255,.42); }
  50%      { border-color: rgba(255,255,255,1);   background-color: rgba(255,255,255,.24);
             box-shadow: 0 0 0 9px rgba(255,255,255,0); }
}
@media (prefers-reduced-motion: reduce) {
  .work-copy { animation: none; border-color: rgba(92,36,65,.8); }
  .work-track .work-copy { animation: none; border-color: rgba(255,255,255,.85); }
}
[data-theme="dark"] .work-card { background: var(--surface); }
@media (max-width: 720px) { .work-grid { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 420px) { .work-brand-board { padding: 24px; } .work-brand-type { right: 24px; bottom: 18px; } }
.as-sec--tint { background: var(--paper); }
[data-theme="dark"] .as-sec--tint { background: var(--surface-alt); }

/* ============================================================
   Our Work: showcase restyle. Each carousel card wears its own
   project's brand — the per-card accent that used to sit only on
   the CTA button now soaks the whole panel: a deep colour ground
   lit from below by the raw accent, light type, and an outlined
   ghost initial. Six invented businesses, six palettes; the cards
   differing loudly from each other IS the message. Scoped to
   .work-track so the plain homepage .work-card grid is untouched.
   ============================================================ */
.work-track .work-card {
  border: 0;
  /* The homepage .work-card grid sets padding:24px, and these carousel cards
     reuse that class — so they inherited a 24px frame they were never designed
     for. It inset the thumbnail instead of letting it bleed to the card edge
     (note .work-card has overflow:hidden and the thumb has no radius: full
     bleed was always the intent) and double-padded the body against its own
     22px. Reset here rather than on .work-card so the homepage grid is safe. */
  padding: 0;
  background: var(--work-accent, var(--plum));
  background:
    radial-gradient(120% 85% at 82% 112%, color-mix(in srgb, var(--work-accent, var(--plum)) 80%, transparent) 0%, transparent 58%),
    linear-gradient(172deg, color-mix(in srgb, var(--work-accent, var(--plum)) 46%, #131318) 8%, color-mix(in srgb, var(--work-accent, var(--plum)) 74%, #0b0b0f) 92%);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--work-accent, var(--plum)) 28%, transparent);
  transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.work-track .work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px color-mix(in srgb, var(--work-accent, var(--plum)) 42%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .work-track .work-card { transition: none; }
  .work-track .work-card:hover { transform: none; }
}

.work-track .work-kind { color: color-mix(in srgb, var(--work-accent, var(--plum)) 22%, #fff); }
.work-track .work-name { color: #fff; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.02em; }
.work-track .work-blurb { color: rgba(255,255,255,.82); }
.work-track .work-points li { color: #fff; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.09); }
.work-track .work-built { color: rgba(255,255,255,.68); }
.work-track .work-price { color: #fff; }
.work-track .work-note { color: rgba(255,255,255,.72); }
.work-track .work-link { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.4); }
.work-track .work-link:hover { color: #fff; text-decoration-color: #fff; }

/* The CTA inverts — a white pill is the brightest thing on the panel. */
.work-track .work-cta-btn { background: #fff; color: color-mix(in srgb, var(--work-accent, var(--plum)) 80%, #000); box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.work-track .work-cta-btn:hover { filter: none; background: #fff; color: #000; transform: translateY(-1px); }

/* Ghost initial — the project's first letter, outlined, bleeding off
   the corner behind the text like a pressmark. */
.work-track .work-body { position: relative; overflow: hidden; }
.work-ghost { position: absolute; top: -6px; right: -14px; z-index: 0;
  font-family: 'Lora', Georgia, serif; font-size: 172px; font-weight: 600; line-height: .82;
  color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.22);
  pointer-events: none; user-select: none; }
.work-track .work-body > * { position: relative; }
.work-track .work-body > .work-ghost { position: absolute; }

/* Brand cards' palette strip now sits on the dark ground. */
.work-track .work-brand-strip { background: rgba(0,0,0,.22); border-bottom: 0; }
.work-track .work-brand-swatches i { border-color: rgba(255,255,255,.25); }
.work-track .work-brand-strip .work-brand-type { filter: brightness(1.45) saturate(.9); }

/* ============================================================
   Window-cleaning field app showcase (page-window-cleaning-app.php)
   ============================================================ */
.wca-stage { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; column-gap: clamp(28px, 5vw, 64px); row-gap: clamp(28px, 4vw, 44px); align-items: start; margin-top: 0; }
/* Three children: the phone holds column 1 for the whole run, the hero copy and
   the walkthrough stack down column 2. Explicit placement lives in the desktop
   query only — `order` cannot move an item that has an explicit grid area. */
@media (min-width: 901px) {
	.wca-stage > .wca-phone { grid-column: 1; grid-row: 1 / span 3; }
	.wca-stage > .wca-copy { grid-column: 2; grid-row: 1; }
	.wca-stage > .wca-card { grid-column: 2; grid-row: 2; max-width: 460px; margin-top: 0; }
	/*
	 * The padding-bottom is the sticky runway, not decoration. A sticky element
	 * can only travel inside its grid area, and that area ended on the very last
	 * pixel of the last explanation — so for the final ~750px of reading the
	 * phone was being pushed up and clipped by the header (measured: top -79px
	 * at scrollY 1600). This buys enough area below the copy for the phone to
	 * stay pinned until the walkthrough has actually been read.
	 */
	.wca-stage > .wca-flow {
		grid-column: 2; grid-row: 3;
		margin-top: 0;
		padding-bottom: clamp(200px, 26vh, 320px);
	}
	/* The runway above already provides the gap before the next band, so the
	   section does not need to add a second one. */
	.wca-hero { padding-bottom: clamp(16px, 2vw, 28px); }
}
/* The phone rides the whole introduction. `top` clears the sticky site header;
   the frame is sized off viewport HEIGHT so it can never be taller than the
   space it is sticking in — a fixed 844px frame simply loses its bottom third
   on a laptop, and a sticky element that overflows the viewport stops feeling
   stuck because you never reach its end. */
/* 136px: the sticky site header measures 115px, plus ~20px of air so the phone
   is not welded to its underside as it travels. 96px put the phone 19px UNDER
   the header. Sticky is off below 901px, so this only has to hold on desktop. */
.wca-phone { position: sticky; top: 136px; justify-self: center; }
.wca-phone__frame { --bezel: 12px; position: relative; height: min(844px, calc(100vh - 190px)); aspect-ratio: 390 / 844; width: auto; border-radius: 44px; padding: var(--bezel);
  background: linear-gradient(160deg, #2b3238 0%, #14181c 48%, #23292f 100%);
  box-shadow: 0 26px 60px rgba(20, 24, 28, .38), 0 0 0 2px rgba(255,255,255,.06) inset; }
.wca-phone__bar { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 116px; height: 5px;
  border-radius: 100px; background: rgba(255,255,255,.5); z-index: 3; }
.wca-phone__screen { width: 100%; height: 100%; border: 0; border-radius: 34px; background: #f4f8fc; display: block; }
/*
 * The demo renders at a REAL phone width and is scaled to fit the frame.
 * Previously the iframe just took the frame's width, so on a phone the app was
 * laying itself out at 302px — narrower than any handset made — and its own
 * responsive rules collapsed: the customer's details squeezed to 77px with the
 * call buttons on top of them, the checklist/photos columns crushed, the
 * footer buttons wrapped. Fixing that in the app's CSS would have been fixing
 * a width no real user ever sees. 390 x 844 is an iPhone 14/15 viewport; the
 * scale factor is set from the frame's content width in the page's JS.
 */
iframe.wca-phone__screen {
	/* Absolutely positioned so its 390px layout box cannot size anything.
	   overflow:hidden on the frame clips the PAINT but not the intrinsic
	   contribution — percentage widths resolve as `auto` during intrinsic
	   sizing, so the grid column was being stretched to fit 390px and the whole
	   page gained 32px of horizontal overflow. Out of flow, it contributes
	   nothing. */
	position: absolute; top: var(--bezel); left: var(--bezel); z-index: 1;
	width: 390px; height: 844px;
	transform: scale(var(--wca-scale, 1));
	transform-origin: top left;
}
/* Home bar stays above the screen now that it is positioned. */
.wca-phone__bar { z-index: 2; }
/* Clips the unscaled 390x844 layout box, which would otherwise overflow the
   frame and push the page sideways. */
.wca-phone__frame { overflow: hidden; }
.wca-phone__screen--placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 30px; color: var(--muted); }
.wca-phone__screen--placeholder strong { color: var(--ink); }
.wca-phone__screen--placeholder p { margin: 0; font-size: 14px; }


/* Right-hand column: the hero copy, the price card and the walkthrough all
   scroll past the phone as one continuous read. */
.wca-hero { padding-bottom: var(--sec-y-lg); }
.wca-flow > * + * { margin-top: clamp(30px, 4vw, 46px); }
.wca-flow .offer-summary--inline { margin-top: clamp(30px, 4vw, 46px); max-width: 460px; }
.wca-flow__head { padding-top: clamp(8px, 1.5vw, 18px); border-top: 1px solid var(--border); }
.wca-prompt {
	margin: 16px 0 0; text-align: center;
	font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--stone-ink);
	transition: opacity .3s ease;
}
.wca-prompt span { display: inline-block; animation: wca-nudge 1.8s ease-in-out infinite; }
.wca-prompt.is-gone { opacity: 0; pointer-events: none; }
@keyframes wca-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .wca-prompt span { animation: none; } }

.wca-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wca-jump__btn { border: 1px solid var(--border); background: #fff; color: var(--ink); font: 700 13.5px/1 inherit;
  padding: 9px 15px; border-radius: 100px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.wca-jump__btn:hover { border-color: var(--plum); color: var(--plum); }
.wca-jump__btn.is-on { background: var(--plum); border-color: var(--plum); color: #fff; }
.wca-note { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }

.wca-screens { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.wca-screens li { border-left: 3px solid var(--blush); padding-left: 16px; }
.wca-screens h3 { font-family: 'Lora', Georgia, serif; font-size: 19px; margin: 0 0 5px; }
.wca-screens p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

.wca-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 30px; }
.wca-grid article { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 22px; }
.wca-grid h3 { font-family: 'Lora', Georgia, serif; font-size: 19px; margin: 0 0 8px; }
.wca-grid p { margin: 0; font-size: 15px; line-height: 1.65; }

.wca-stoplist { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.wca-stoplist li { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; font-size: 15px; line-height: 1.6; }

[data-theme="dark"] .wca-jump__btn { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .wca-stoplist li { background: var(--surface); }

@media (max-width: 900px) {
  .wca-stage { grid-template-columns: minmax(0, 1fr); }
  /* Nothing to stick to in one column, and the prompt would be a lie. */
  .wca-prompt { display: none; }
  /*
   * On a phone the demo is static, so viewport HEIGHT is the wrong constraint —
   * capping height was leaving the frame 296px wide with a 272px screen, which
   * is narrower than any real handset and squeezed the app's own text. Drive it
   * from width instead and let it use the full column.
   */
  /* justify-self must be stretch, not the desktop's centre: a centred grid item
     is shrink-to-fit, so the frame's width:100% was resolving against the
     shrunk box and ignoring the column entirely. */
  .wca-phone { justify-self: stretch; }
  /*
   * The frame deliberately stops short of the viewport edges. An iframe owns
   * its own scrolling, so a swipe that lands on the demo scrolls the APP and
   * the page feels stuck — and a phone-shaped frame at full width is taller
   * than the screen, so there is no page above or below to grab either. These
   * gutters are the page's scroll strip; 36px a side is a usable thumb target.
   * Widening the frame past this trades scrolling the page for a bigger demo.
   */
  .wca-phone__frame {
    width: min(100%, calc(100vw - 72px));
    max-width: 460px; height: auto; aspect-ratio: 390 / 844;
    margin-inline: auto;
  }
  /*
   * Phone order: pitch, price, demo, walkthrough.
   * The pitch leads because in source order the demo came first and pushed the
   * headline off the bottom of the screen. The price card then sits with the
   * pitch it belongs to, and the phone lands directly against the "Try it"
   * copy that explains what you are looking at.
   */
  .wca-copy  { order: 1; }
  .wca-card  { order: 2; max-width: none; }
  .wca-phone { order: 3; position: static; }
  .wca-flow  { order: 4; }
  .wca-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  /* Claim back most of the container's 24px gutter — 8px of air each side is
     enough to read as a device sitting on the page rather than bleeding off it,
     and it buys the app screen another 32px. Thinner bezel for the same reason. */
  .wca-phone__frame { --bezel: 8px; border-radius: 38px; }
  .wca-phone__screen { border-radius: 30px; }
}

/* ============================================================
   Our Work — deliberate two-column pairing (site + brand, site + app),
   with thin full-width bands for the portal and the queued drone film.
   ============================================================ */
.work-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }


/* Two real screenshots of the field app, framed as phones on the light end of
   the Pole & Pane palette — a dark bezel needs a light plate behind it, or the
   phone edges disappear into the background.
   Captured at 390x844 @2x from the live demo (tools/shoot.js in the demo repo). */
.work-app-shot { position: absolute; inset: 0; overflow: hidden; background: #dbebfa; }
.work-app-shot::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.95), transparent 62%); }
.work-app-shot::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, #dbebfa 0%, #dbebfa 7%, rgba(219,235,250,.55) 19%, transparent 44%); }
.work-phone { position: absolute; display: block; width: 37%; border-radius: 13px; overflow: hidden;
  background: #f4f8fc; border: 3px solid #142a3b; box-shadow: 0 12px 24px rgba(20,42,59,.26); }
.work-phone img { width: 100%; height: auto; display: block; }
.work-phone video { width: 100%; height: auto; aspect-ratio: 780 / 1688; object-fit: cover; object-position: top; display: block; }
/* Service page: the app promo playing in a plain phone frame (showcase_secondary 'video'). */
.offer-phone-video { display: block; width: min(100%, 300px); margin-inline: auto; aspect-ratio: 780 / 1688; overflow: hidden;
  border: 8px solid #2b3238; border-radius: 34px; background: #1C2024; box-shadow: 0 24px 48px rgba(0, 0, 0, .35); }
.offer-phone-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work-phone--back { left: 8%; top: 11%; transform: rotate(-5deg); }
.work-phone--front { right: 7%; top: 6%; width: 39%; transform: rotate(4deg); }
/* ── Our Work: aerial video hero ─────────────────────────────── */
.work-hero { position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: min(74vh, 640px); background: #1C2024; }
.work-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(22,13,19,.86) 0%, rgba(22,13,19,.42) 46%, rgba(22,13,19,.22) 100%); }
.work-hero__content { position: relative; z-index: 1; padding-top: 110px; padding-bottom: 52px; }
.work-hero__content .eyebrow { color: rgba(255,255,255,.78); }
.work-hero__content h1 { color: #fff; }
.work-hero__content .lead { color: rgba(255,255,255,.9); max-width: 640px; }
.work-hero__caption { margin: 16px 0 0; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.68); letter-spacing: .02em; }
.work-hero__caption a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.work-hero__caption a:hover { color: var(--blush, #d9a8c2); }

/* ── Our Work: scrolling full-page screenshot in a card thumb ──
   Two behaviours, because the trigger has to differ by device.

   On a pointer device it scrolls on hover, matching portfolio-thumb--shot
   on /websites/. On touch there IS no hover, so a hover-only rule left
   these cards frozen while the video cards played — you had to tap them.
   Touch therefore gets the scroll driven automatically instead, so every
   card in the row is alive without being prodded. */
.work-scroll-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center top; }

@media (hover: hover) {
  .work-scroll-shot { transition: object-position 3.8s ease; }
  .work-card:hover .work-scroll-shot { object-position: center bottom; }
}

@media (hover: none) {
  .work-scroll-shot { animation: workScrollAuto 15s ease-in-out infinite alternate; }
}
@keyframes workScrollAuto {
  0%, 7%    { object-position: center top; }
  93%, 100% { object-position: center bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .work-scroll-shot { animation: none; transition: none; }
}
.work-demo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── Our Work: card carousel ─────────────────────────────────── */
.work-carousel { position: relative; }
.work-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.work-track::-webkit-scrollbar { display: none; }
.work-track .work-card { flex: 0 0 min(86%, 400px); scroll-snap-align: start; }
.work-car-btn { position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--cream, #fff); color: var(--plum); font-size: 19px; line-height: 1;
  cursor: pointer; box-shadow: 0 6px 18px rgba(28,32,36,.16);
  transition: background .15s ease, color .15s ease, opacity .15s ease; }
.work-car-btn:hover:not(:disabled) { background: var(--plum); color: #fff; }
/* Hidden rather than dimmed: at rest the dimmed back arrow sat on the first
   card's heading. */
.work-car-btn:disabled { opacity: 0; pointer-events: none; }
.work-car-btn--prev { left: -14px; }
.work-car-btn--next { right: -14px; }
[data-theme="dark"] .work-car-btn { background: var(--surface); }

/* Position dots. On mobile these are the only affordance, since the
   arrows are hidden.

   The button itself is a full 24x24 target and the visible 8px circle is
   drawn by the inner pip. The previous version was an 8px button with a
   padded ::after, which measured 24px vertically but only 6px HORIZONTALLY —
   neighbouring dots' pseudo-elements overlapped and stole each other's hit
   region, failing WCAG 2.5.8. A real box can't be stolen. */
.work-dots { display: flex; justify-content: center; gap: 0; margin-top: 2px; }
.work-dot { width: 24px; height: 24px; padding: 0; border: 0; background: none;
  display: grid; place-items: center; cursor: pointer; border-radius: 50%; }
.work-dot:focus-visible { outline: 3px solid var(--plum); outline-offset: -2px; }
.work-dot__pip { width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: background .2s ease, transform .2s ease; }
.work-dot:hover .work-dot__pip { background: var(--muted); }
.work-dot.is-active .work-dot__pip { background: var(--plum); transform: scale(1.35); }
[data-theme="dark"] .work-dot.is-active .work-dot__pip { background: var(--sand, #BBAB9A); }

/* Pause control — WCAG 2.2.2. Governs both the auto-advance and the
   autoplaying demo videos. Quiet until focused or hovered, because it is a
   control most visitors never need, but it must always be reachable. */
.work-pause { position: absolute; right: 0; bottom: -6px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 100px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  background: transparent; border: 1px solid var(--border);
  opacity: .62; transition: opacity .18s ease, color .18s ease, border-color .18s ease; }
.work-pause:hover { opacity: 1; color: var(--plum); border-color: var(--plum); }
.work-pause:focus-visible { opacity: 1; outline: 3px solid var(--plum); outline-offset: 2px; }
.work-pause__icon { width: 9px; height: 10px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.work-carousel.is-paused .work-pause__icon { border: 0;
  width: 0; height: 0; border-left: 9px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.work-carousel.is-paused .work-pause { opacity: 1; color: var(--plum); border-color: var(--plum); }
/* Freeze the screenshot scroll too, not just the advance and the videos. */
.work-carousel.is-paused .work-scroll-shot { animation-play-state: paused; }

/* The track is focusable so it can be scrolled by keyboard (WCAG 2.1.1). */
.work-track:focus-visible { outline: 3px solid var(--plum); outline-offset: 4px; }

/* Pause control for autoplaying videos outside a carousel (WCAG 2.2.2) —
   currently the homepage laptop demo and the /our-work/ hero. Injected by
   carousel.js as a sibling of the video's link, never inside it. Same quiet
   pill as .work-pause. */
.video-pause {
  display: flex; width: fit-content; margin: 10px auto 0;
  align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 100px; cursor: pointer;
  font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  background: transparent; border: 1px solid var(--border);
  opacity: .62; transition: opacity .18s ease, color .18s ease, border-color .18s ease; }
.video-pause:hover { opacity: 1; color: var(--plum); border-color: var(--plum); }
.video-pause:focus-visible { opacity: 1; outline: 3px solid var(--plum); outline-offset: 2px; }
.video-pause__icon { width: 9px; height: 10px; flex: none;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.video-pause.is-paused .video-pause__icon { border: 0;
  width: 0; height: 0; border-left: 9px solid currentColor;
  border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.video-pause.is-paused { opacity: 1; color: var(--plum); border-color: var(--plum); }
/* Over a full-bleed background video the pill floats in the section corner,
   recoloured for the dark scrim it sits on. */
.video-pause--overlay {
  position: absolute; right: 16px; bottom: 16px; z-index: 2; margin: 0;
  color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.45); }
.video-pause--overlay:hover { color: #fff; border-color: #fff; }
.video-pause--overlay:focus-visible { outline-color: #fff; }
.video-pause--overlay.is-paused { color: #fff; border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .video-pause { transition: none; }
}

@media (max-width: 720px) {
  .work-pause { position: static; margin: 6px auto 0; display: flex;
    width: fit-content; }
}
@media (prefers-reduced-motion: reduce) {
  .work-dot__pip { transition: none; }
  .work-pause { transition: none; }
}

@media (max-width: 720px) {
  .work-car-btn { display: none; }
  /* Give the card nearly the full width — a narrow card wastes the one
     dimension a phone actually has. A small sliver of the next card is
     still enough to say "this swipes". */
  .work-track { gap: 12px; }
  .work-track .work-card { flex: 0 0 94%; }
  /* Taller thumb: the screenshots and video are the point of these cards,
     and 8/5 on a phone leaves them postage-stamp sized. flex:none stops the
     thumb being shrunk as a flex item, which aspect-ratio would then mirror
     into its width. */
  .work-thumb { aspect-ratio: 4 / 3; flex: none; width: 100%; }
  .work-thumb--stacked { aspect-ratio: 1 / 1; }
  .work-stack__brand { padding: 12px 14px; gap: 11px; }
  .work-thumb--stacked .work-stack__brand { padding-right: 66px; }
  .work-thumb .work-stack__logo { width: 40px; height: 40px; }
  .work-stack__name { font-size: 11px; letter-spacing: .12em; }
  /* Tighten the card so a tall one doesn't run the section long. */
  .work-body { padding: 18px 18px 20px; }
  .work-blurb { font-size: 14.5px; margin-bottom: 12px; }
  .work-points { gap: 5px; margin-bottom: 12px; }
  .work-points li { padding: 4px 9px; }
}

@media (max-width: 900px) {
}
@media (max-width: 720px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* On a narrow card the pair reads better slightly smaller and lower. */
@media (max-width: 560px) {
  .work-phone--back { left: 6%; top: 12%; width: 39%; }
  .work-phone--front { right: 5%; top: 7%; width: 41%; }
}

/* ============================================================
   Startup bundle page (page-startup.php) — deliberately loud:
   it is not in the main nav, so it has to sell on arrival.
   ============================================================ */
/* Light two-column hero since 2026-09-26, matching /branding/ and /websites/
   (it was the only solid plum hero on the site). */
.startup-hero { position: relative; padding: clamp(56px, 7vw, 92px) 0 clamp(48px, 6vw, 72px);
  background: linear-gradient(180deg, #FAF8F5 0%, #F3EEE8 100%); }
.startup-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.startup-hero h1 { color: var(--ink); font-size: clamp(38px, 5.4vw, 64px); line-height: 1.04; margin: 0 0 10px; letter-spacing: -.02em; }
.startup-hero .lead { color: var(--muted); max-width: 56ch; }
.startup-hero .svc-hero-ctas { margin-top: 28px; }
.startup-hero__note { margin: 20px 0 0; font-size: 14px; color: var(--muted); max-width: 56ch; }
.startup-hero__note a { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.startup-hero__card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 14px 14px 18px;
  box-shadow: 0 24px 60px rgba(28,32,36,.10); }
.startup-hero__art { display: block; aspect-ratio: 16 / 10; border-radius: 12px; background: var(--blush); overflow: hidden; }
.startup-hero__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.startup-hero__card-head { margin: 16px 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--plum); }
.startup-hero__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.startup-hero__price { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--border); color: var(--ink) !important; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.startup-hero__price:hover { border-color: var(--plum); box-shadow: 0 6px 18px rgba(92,36,65,.10); transform: translateY(-2px); text-decoration: none; }
.startup-hero__price--feat { border-color: var(--plum); box-shadow: inset 0 3px 0 var(--plum); }
.startup-hero__price-name { font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.startup-hero__price-fig { font-family: 'Lora', Georgia, serif; font-size: 30px; font-weight: 600; line-height: 1.1; color: var(--plum); }
.startup-hero__price-fig s { font-size: 18px; color: var(--muted); opacity: .8; margin-right: 6px; font-family: inherit; }
.startup-hero__price-sub { font-size: 13.5px; color: var(--muted); }
.tier-card-top .tier-pages s { opacity: .55; }
@media (max-width: 900px) {
  .startup-hero__grid { grid-template-columns: 1fr; }
  .startup-hero__card { max-width: 560px; }
}
@media (max-width: 420px) {
  .startup-hero__prices { grid-template-columns: 1fr; }
}

/* Startup bundle cards. The shared .tier-card is a flex column whose children
   each carry their own 24px side padding — so the intro paragraph needs it too,
   or it runs edge to edge. Subgrid then locks the four rows (price block, intro,
   feature list, button) to the same baselines across both cards, which plain
   flex can't do when the intros differ in length. */
.startup-tier-intro { padding: 18px 24px 0; margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.tier-card--featured .startup-tier-intro { color: var(--muted); }
#bundles .tier-list { gap: 0; padding: 10px 24px 20px; }
#bundles .tier-list li { padding: 10px 0 10px 32px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.5; }
#bundles .tier-list li:first-child { border-top: 0; }
#bundles .tier-list li::before { top: 11px; display: grid; width: 20px; height: 20px; place-items: center;
  border-radius: 50%; background: rgba(92,36,65,.09); font-size: 11px; line-height: 1; }
#bundles .tier-list strong { color: var(--ink); font-size: 14.25px; font-weight: 650; }
#bundles .tier-list span { color: var(--muted); font-size: 13.75px; }
#bundles .tier-list span::before { content: ' — '; }
@supports (grid-template-rows: subgrid) {
  #bundles .tier-cards--two { align-items: stretch; grid-template-rows: auto auto 1fr auto; }
  #bundles .tier-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  #bundles .tier-card .tier-list { flex: none; }
}

/* "We ♥ start-ups" — the heart is inline SVG rather than an emoji so it takes
   the brand plum reliably instead of whatever the OS font decides. It beats
   three times and stops: nothing on the page keeps moving on its own. */
.startup-hero__h1 { display: flex; align-items: center; flex-wrap: wrap; gap: .28em; margin-bottom: 10px; }
.startup-hero__heart { width: .82em; height: .82em; color: var(--plum); flex: none;
  transform-origin: center; animation: startupBeat 2.6s ease-in-out 3; }
@keyframes startupBeat {
  0%, 62%, 100% { transform: scale(1); }
  70%           { transform: scale(1.11); }
  78%           { transform: scale(1.02); }
  86%           { transform: scale(1.07); }
}
.startup-hero__sub { font-family: 'Lora', Georgia, serif; color: var(--plum);
  font-size: clamp(21px, 2.7vw, 31px); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 18px; }
.startup-hero__offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 590px; margin: 22px 0 24px; }
.startup-hero__offer { position: relative; display: grid; gap: 4px; min-width: 0; padding: 16px 18px 15px;
  overflow: hidden; border: 1px solid rgba(92,36,65,.2); border-radius: 13px; background: #fff;
  box-shadow: 0 8px 24px rgba(28,32,36,.07); color: var(--ink); text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.startup-hero__offer::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--blush); }
.startup-hero__offer--plum::before { background: var(--plum); }
.startup-hero__offer:hover { border-color: var(--plum); box-shadow: 0 10px 28px rgba(92,36,65,.13); transform: translateY(-2px); text-decoration: none; }
.startup-hero__offer:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }
.startup-hero__offer-kicker { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.startup-hero__offer strong { color: var(--ink); font-family: 'Lora', Georgia, serif; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.08; }
.startup-hero__offer strong span { color: var(--plum); font-size: 1.12em; }
.startup-hero__offer small { color: var(--muted); font-size: 13px; line-height: 1.35; }
@media (max-width: 520px) {
  .startup-hero__offers { grid-template-columns: 1fr; }
  .startup-hero__offer { padding: 14px 17px; }
}
@media (prefers-reduced-motion: reduce) { .startup-hero__heart { animation: none; } }

/* Startup page — "20% off everything else" band. */
.startup-more__inner { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: clamp(28px, 5vw, 60px); align-items: start; }
.startup-more__lead h2 { margin-top: 6px; }
.startup-more__lead .lead { margin-bottom: 0; }
.startup-more__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.startup-more__list li { display: grid; gap: 3px; padding: 15px 0; border-top: 1px solid var(--border); }
.startup-more__list li:last-child { border-bottom: 1px solid var(--border); }
.startup-more__name { font-family: 'Lora', Georgia, serif; font-size: 18.5px; line-height: 1.25; }
.startup-more__name a { color: var(--ink); text-decoration: none; }
.startup-more__name a:hover { color: var(--plum); text-decoration: underline; text-underline-offset: 3px; }
.startup-more__name--nodiscount::after { display: none !important; }
.startup-more__name::after { content: "−20%"; margin-left: 10px; padding: 3px 9px; border-radius: 100px;
  background: rgba(92,36,65,.09); color: var(--plum); font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; vertical-align: middle; white-space: nowrap; }
.startup-more__note { font-size: 14.5px; line-height: 1.55; color: var(--muted); }
[data-theme="dark"] .startup-more__name a { color: var(--ink); }
@media (max-width: 860px) { .startup-more__inner { grid-template-columns: 1fr; } }

/* ============================================================
   Careers page
   ============================================================ */
.careers-role {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(22px, 3.2vw, 34px);
  margin-top: var(--stack);
}
.careers-role + .careers-role { margin-top: var(--gap); }
.careers-role__head { max-width: 72ch; }
.careers-role__status {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(92,36,65,.09);
  color: var(--plum);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.careers-role__title {
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.2;
  margin: 0 0 10px;
}
.careers-role__summary {
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.careers-role__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 40px);
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.careers-role__col h4 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  margin: 0 0 10px;
}
.careers-role__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.careers-role__col li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.careers-role__col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--plum);
}
.careers-role__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px var(--gap);
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.careers-role__facts dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone-ink);
  margin-bottom: 5px;
}
.careers-role__facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.careers-role__cta { margin: 24px 0 0; }

@media (max-width: 720px) {
  .careers-role__grid { grid-template-columns: 1fr; }
}

/* Legal — model cancellation form (T&Cs Schedule A8). */
.legal-form {
  border: 1px solid var(--border);
  border-left: 3px solid var(--plum);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 22px 24px;
  margin: 0 0 16px;
}
.legal-form p { margin-bottom: 12px; font-size: 15px; }
.legal-form p:last-child { margin-bottom: 0; }
.legal-form__rule {
  border-bottom: 1px solid var(--border);
  height: 0;
  margin: 0 0 18px;
}
.legal-form__gap {
  display: inline-block;
  min-width: 140px;
  border-bottom: 1px solid var(--border);
}

/* Anchored legal clauses (e.g. #schedule-a) must clear the sticky header. */
.legal-doc h2[id], .legal-doc h3[id] { scroll-margin-top: 104px; }

/* ── Shopify service page ───────────────────────────── */
/* Rebuilt 2026-09-26. Hero: a browser window playing a recorded journey
   through the Aldwick demo store, with one real product and an order toast
   floating over it. Colours stay in the
   plum/blush/stone family; the greens are Aldwick's own screenshots. */
.shp-hero { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px); overflow-x: clip; }
.shp-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.shp-hero-text h1 { margin-bottom: 18px; }
.shp-hero-text .lead { max-width: 52ch; }
.shp-hero-prices { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 12px; background: #fff; width: fit-content; max-width: 100%; }
.shp-hero-prices li { padding: 10px 18px; display: flex; flex-direction: column; gap: 2px; }
.shp-hero-prices li + li { border-left: 1px solid var(--border); }
.shp-hero-prices span { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.shp-hero-prices b { font-family: "Lora", serif; font-size: 20px; color: var(--plum); font-weight: 600; }
.shp-hero-alt { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

.shp-stage { position: relative; margin: 0; padding: 0 0 0 28px; }
.shp-stage::before { content: ''; position: absolute; inset: 8% -4% -6% 10%; background: radial-gradient(ellipse at 60% 45%, var(--blush) 0%, rgba(232,208,218,0) 70%); z-index: 0; }
.shp-window { position: relative; z-index: 1; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(28,32,36,.16), 0 4px 12px rgba(28,32,36,.08); }
.shp-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F3EFEA; border-bottom: 1px solid var(--border); }
.shp-bar i { width: 9px; height: 9px; border-radius: 50%; background: #d3cdc5; }
.shp-bar span { margin-left: 10px; flex: 1; background: #fff; border-radius: 6px; font-size: 11.5px; color: var(--muted); padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shp-screen { aspect-ratio: 16 / 11; overflow: hidden; background: #1E2E25; }
.shp-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* carousel.js adds the WCAG pause pill after the video's figure content; it
   sits in the browser bar, at the right-hand end of the address field. */
.shp-stage > .video-pause { position: absolute; z-index: 3; top: 8px; right: 12px; margin: 0; padding: 4px 10px; font-size: 10.5px; background: #fff; opacity: .9; }
.shp-bar span { padding-right: 84px; min-width: 0; }
.shp-product { position: absolute; z-index: 2; left: -4px; bottom: 6px; display: flex; gap: 12px; align-items: center; width: 250px; padding: 10px 14px 10px 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px rgba(28,32,36,.16); }
.shp-product img { width: 54px; height: 72px; object-fit: cover; border-radius: 8px; background: #1E2E25; flex-shrink: 0; }
.shp-product b { display: block; font-size: 14px; color: var(--ink); }
.shp-product span { display: block; font-size: 12.5px; color: var(--muted); margin: 2px 0 7px; }
.shp-product em { font-style: normal; font-size: 12px; font-weight: 600; color: #fff; background: var(--plum); border-radius: 7px; padding: 5px 10px; display: inline-block; }
.shp-toast { position: absolute; z-index: 2; right: -14px; top: 64px; display: flex; gap: 10px; align-items: center; padding: 9px 14px 9px 10px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 28px rgba(28,32,36,.14); font-size: 12.5px; color: var(--muted); }
.shp-toast svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--blush); color: var(--plum); flex-shrink: 0; }
.shp-toast b { display: block; color: var(--ink); font-size: 13px; }
.shp-stage figcaption { position: relative; z-index: 1; margin-top: 14px; padding-left: 270px; font-size: 13px; color: var(--muted); text-align: right; }
@media (max-width: 960px) {
  .shp-hero-inner { grid-template-columns: 1fr; }
  .shp-stage { padding-left: 0; max-width: 620px; width: 100%; margin: 8px auto 0; }
  .shp-product { left: -8px; bottom: 4px; }
  .shp-toast { right: -8px; }
}
@media (max-width: 560px) {
  .shp-hero-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .shp-hero-prices li { padding: 8px 9px; }
  .shp-hero-prices span { font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
  .shp-hero-prices b { font-size: 15px; }
  .shp-product { width: 200px; left: -6px; bottom: 58px; padding: 8px 10px 8px 8px; }
  .shp-product img { width: 42px; height: 56px; }
  .shp-toast { top: 48px; right: 6px; }
  .shp-stage figcaption { text-align: left; padding-left: 0; margin-top: 30px; }
}

/* Why Shopify: points on the left, the Aldwick range as a shop shelf. */
.shp-why-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.shp-why-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.shp-why-list li { position: relative; padding-left: 26px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.shp-why-list li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--blush); box-shadow: inset 0 0 0 2px var(--plum); }
.shp-why-list b { color: var(--ink); }
.shp-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px; background: var(--paper); border: 1px solid var(--border); border-radius: 18px; }
.shp-shelf-item { display: flex; flex-direction: column; gap: 3px; }
.shp-shelf-img { display: block; aspect-ratio: 2 / 3; border-radius: 10px; overflow: hidden; background: #1E2E25; margin-bottom: 8px; }
.shp-shelf-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.shp-shelf-item:hover .shp-shelf-img img { transform: scale(1.04); }
.shp-shelf-item b { font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.shp-shelf-item span { font-size: 13px; color: var(--muted); }
.shp-shelf-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 960px) { .shp-why-inner { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .shp-shelf { gap: 8px; padding: 12px; }
  .shp-shelf-item b { font-size: 11.5px; }
  .shp-shelf-item span { font-size: 11.5px; }
}

.as-form { display: flex; flex-direction: column; gap: 18px; }
.as-form-row { display: flex; flex-direction: column; gap: 6px; }
.as-form-row label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.as-form-row input,
.as-form-row select,
.as-form-row textarea {
  padding: 10px 13px; border: 1px solid var(--border); border-radius: 7px;
  font-size: 15px; font-family: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s;
}
.as-form-row input:focus,
.as-form-row select:focus,
.as-form-row textarea:focus { border-color: var(--plum); outline: none; }
.shopify-enquiry-form { background: var(--paper); border: 1px solid var(--border); border-radius: 14px; padding: clamp(24px, 5vw, 40px); }


/* ── Cookie consent ──────────────────────────────────────────────────────
   A slim bar, because that is all the law asks for: name the purpose, link the
   detail, and offer two choices of equal weight. Roughly 52px tall on desktop.
   Reject and Accept are visually identical — the ICO's position is that
   refusing must be no harder than agreeing, and a quieter decline button is
   exactly the pattern that gets called a dark pattern. */
/* z-index above tawk's launcher: the chat bubble is fixed in the same corner
   and was sitting on top of the Accept button, which is not a thing a consent
   banner may be. The bar is temporary, the bubble is not, so the bar wins while
   it is showing — and on wider screens the buttons are inset far enough to
   clear the bubble entirely. */
.cc { position: fixed; inset: auto 0 0 0; z-index: 2147483000; background: var(--ink);
      color: #fff; display: flex; align-items: center; gap: 16px;
      padding: 8px 24px; font-size: 13.5px; line-height: 1.45; }
.cc[hidden] { display: none; }
@media (min-width: 601px) { .cc { padding-right: 104px; } }

.cc-desc { margin: 0; flex: 1 1 auto; min-width: 0; }
.cc-desc a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cc-state { font-weight: 700; margin-right: 4px; }
.cc-state[hidden] { display: none; }
.cc-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.cc-btn { font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
          /* 36px clears the 24px WCAG 2.5.8 floor with room to spare while
             keeping the bar genuinely slim. */
          min-height: 36px; padding: 8px 16px; border-radius: 5px;
          /* Matched width as well as matched styling. "Reject" is a shorter
             word than "Accept" is not a legal argument, but a visibly smaller
             decline button is exactly what gets read as a dark pattern. */
          min-width: 96px; text-align: center;
          border: 1.5px solid #fff; background: transparent; color: #fff; }
.cc-btn:hover { background: #fff; color: var(--ink); }
.cc-btn:focus-visible { outline: 3px solid var(--blush); outline-offset: 2px; }

@media (max-width: 640px) {
  /* Two rows is unavoidable at this width — the sentence cannot shrink without
     losing the purpose, and consent stops being informed. So the saving comes
     out of padding instead. */
  .cc { flex-wrap: wrap; gap: 8px; padding: 10px 14px; font-size: 12.5px; }
  .cc-actions { width: 100%; gap: 8px; }
  .cc-btn { flex: 1 1 auto; min-height: 40px; min-width: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .cc { animation: cc-rise .2s ease-out; }
  @keyframes cc-rise { from { transform: translateY(100%); } to { transform: none; } }
}


/* ── Websites estimator page slider (replaces the three size cards) ── */
.est-slider { padding: 4px 2px 0; }
.est-slider-read { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.est-slider-read strong { font-size: 22px; font-family: "Lora", serif; }
.est-tier-out { background: var(--plum); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; }
.est-slider input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
	background: var(--border); outline: none; margin: 6px 0 4px; }
.est-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px;
	border-radius: 50%; background: var(--plum); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(28,32,36,.35); cursor: pointer; }
.est-slider input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--plum);
	border: 3px solid #fff; box-shadow: 0 1px 5px rgba(28,32,36,.35); cursor: pointer; }
.est-slider input[type="range"]:focus-visible { outline: 2px solid var(--plum); outline-offset: 4px; }
.est-slider-scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--stone-ink); padding: 0 2px; }
.est-slider-note { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }

/* ── Trust banner (sitewide, above the footer) ── */
.trust-banner { background: var(--ink); color: #fff; padding: 30px 0; border-top: 3px solid var(--plum); }
.trust-banner-inner { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 34px; align-items: center; }
.trust-banner-lead { margin: 0; font-family: "Lora", serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; color: #fff; }
.trust-banner-lead span { display: block; }
.trust-banner-lead span:last-child { color: var(--stone); font-style: italic; }
.trust-banner-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.trust-item { display: flex; flex-direction: column; gap: 3px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.16); }
.trust-item svg { width: 22px; height: 22px; color: var(--stone); margin-bottom: 5px; }
.trust-item strong { font-size: 14.5px; line-height: 1.25; }
.trust-item span { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.35; }
@media (max-width: 1040px) { .trust-banner-items { grid-template-columns: repeat(3, 1fr); row-gap: 22px; } }
@media (max-width: 860px) { .trust-banner-inner { grid-template-columns: 1fr; gap: 22px; } .trust-banner-lead span { display: inline; } }
@media (max-width: 560px) { .trust-banner-items { grid-template-columns: repeat(2, 1fr); } }

/* ── Ecologi impact band ([as_stats]) ── */
/* Ecologi card ([as_stats]): a small centred card, not a band, with the drawn
   forest along its foot and a real button. Was full width until 2026-09-26. */
.as-eco-strip { display: flex; justify-content: center; padding: 28px 20px; }
/* On the home page it sits between the reviews (white) and the final call to
   action (blush) since 2026-09-26, so it carries the reviews' white on. */
.home .as-eco-strip { padding: 0 20px clamp(44px, 5vw, 64px); background: #fff; }
.as-eco-card {
	width: 100%; max-width: 720px; display: flex; align-items: center; justify-content: space-between; gap: 18px 28px;
	border: 1px solid var(--border); border-radius: 16px; padding: 16px 26px 50px; overflow: hidden;
	background:
		url('images/forest-strip.svg') center bottom / 100% auto no-repeat,
		linear-gradient(180deg, #fff 0%, #EFF6F0 60%, #E4F1E6 100%);
	box-shadow: 0 6px 18px rgba(28,32,36,.05);
}
.as-eco-count { margin: 0; font-size: 15px; color: var(--muted); }
.as-eco-count strong { font-family: "Lora", serif; font-size: 30px; line-height: 1; color: #2E6B4F; margin-right: 4px; }
.as-eco-note { margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.as-eco-card .as-eco-btn { flex-shrink: 0; }
@media (max-width: 560px) {
	.as-eco-card { flex-direction: column; text-align: center; padding-bottom: 52px; background-size: auto 44px, auto; }
}
.as-eco-btn {
	display: inline-flex; align-items: center; gap: 8px; background: #2E6B4F; color: #fff;
	text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 10px 18px; border-radius: 10px;
}
.as-eco-btn:hover { background: #245740; color: #fff; text-decoration: none; }
.as-eco-btn:focus-visible { outline: 2px solid #2E6B4F; outline-offset: 3px; }
.as-eco-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
/* Short-lived pill markup (2026-09-26) can sit in the CDN cache for an hour;
   without these its tree icon renders at full width. Safe to delete after. */
.as-eco-pill { display: inline-flex; align-items: center; gap: 9px; background: #fff; color: var(--ink); border: 1px solid var(--border); border-radius: 999px; padding: 9px 16px 9px 13px; font-size: 14px; text-decoration: none; }
.as-eco-pill svg { width: 17px; height: 17px; flex-shrink: 0; color: #2E6B4F; }

/* ── Areas-served strip (replaces "Works well with") ── */
.offer-areas { padding: 26px 0; border-top: 1px solid var(--border); background: var(--paper); }
.offer-areas-inner p { margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--stone-ink); font-weight: 600; }
.offer-areas-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.offer-areas-chips span { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 5px 13px; font-size: 13px; color: var(--ink); }
.offer-areas-chips .offer-areas-more { border: 0; background: none; color: var(--muted); font-size: 12.5px; }

/* ── Key-dates table (service-offer 'dates' section) ── */
/* Centred under a centred head. The table caps at 720px, so left-aligned it
   sat as a narrow block hugging the margin beneath a head centred over the
   full 1089px container — the same mismatch the section heads had. */
.offer-dates-table { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; border-collapse: collapse; }
.offer-dates-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; vertical-align: middle; }
.offer-dates-table td:first-child { font-weight: 600; }
.offer-dates-table td:nth-child(2) { color: var(--muted); white-space: nowrap; }
.offer-date-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.offer-date-chip.is-ended { background: #F4E2E0; color: #A3352F; }
.offer-date-chip.is-coming { background: #F3EAD8; color: #8A6420; }
.offer-dates-note { margin: 16px auto 0; max-width: 70ch; color: var(--muted); font-size: 14px; text-align: center; }

/* ── Free site check form ── */
.sc-form { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 26px; box-shadow: 0 18px 40px rgba(28,32,36,.08); }
.sc-form h3 { font-family: "Lora", serif; font-size: 21px; margin: 0 0 4px; }
.sc-form .sc-sub { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.sc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.sc-field { display: flex; flex-direction: column; gap: 5px; }
.sc-field label { font-size: 13px; font-weight: 600; }
.sc-field label .opt { color: var(--muted); font-weight: 400; }
.sc-field input, .sc-field textarea {
	font: inherit; font-size: 15px; padding: 11px 13px; border: 1px solid var(--border);
	border-radius: 9px; background: var(--paper); color: var(--ink); width: 100%;
}
.sc-field input:focus, .sc-field textarea:focus { outline: 2px solid var(--plum); outline-offset: 1px; border-color: var(--plum); }
.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sc-submit { background: var(--plum); color: #fff; border: 0; font: inherit; font-weight: 600; font-size: 15.5px; padding: 13px 26px; border-radius: 9px; cursor: pointer; }
.sc-submit:hover { background: var(--plum-d); }
.sc-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
.sc-flash { border-radius: 11px; padding: 14px 16px; margin: 0 0 18px; font-size: 14.5px; }
.sc-flash.ok { background: #E4EDE7; color: #2E6B4F; }
.sc-flash.err { background: #F4E2E0; color: #A3352F; }
@media (max-width: 620px) { .sc-row { grid-template-columns: 1fr; } }
/* ============================================================
   Homepage hero v2 — photo background, published prices
   Added 2026-09-16. Replaces the .as-home-hero capability-map
   hero; that block's CSS is left in place for other pages.
   ============================================================ */
.as-hero-v2{
  position: relative; overflow: hidden;
  padding: var(--hero-y) 24px var(--hero-y-b);
  background:
    radial-gradient(circle at 92% 8%, rgba(232,208,218,.72), transparent 27%),
    radial-gradient(circle at 6% 94%, rgba(187,171,154,.18), transparent 28%),
    var(--paper);
}
.hero-v2-grid{
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 500px);
  align-items: center;
}

/* Tagline as H1. Brand rules: Lora Italic 500, plum, sentence case,
   comma, no full stop. Never bold. */
.hero-v2-tagline{
  margin: 14px 0 0;
  font-family: 'Lora', Georgia, serif;
  font-style: italic; font-weight: 500;
  color: var(--plum);
  font-size: clamp(42px, 5.6vw, 70px);
  line-height: 1.02; letter-spacing: -.02em;
}
.hero-v2-sub{
  margin: 18px 0 0; max-width: 46ch;
  font-size: clamp(16px, 1.9vw, 18.5px); line-height: 1.6; color: var(--muted);
}
.hero-v2-sub strong{ color: var(--ink); font-weight: 600; }

/* Price panel — the blush treatment from the .home-price-card blocks. */
.hero-v2-pricebox{
  margin: 24px 0 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  /* No top padding: the urgent strip is flush to the card's top edge.
     overflow:hidden so the strip's square corners are clipped by the
     card's 10px radius instead of poking out of it. */
  padding: 0 18px 6px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
/* ------------------------------------------------------------
   Urgent strip, welded to the top of the price card.

   Deliberately INSIDE the price box rather than a box of its own:
   an extra panel competes with the hero, and the prices are the
   thing people actually read on this page — so the fastest route
   for someone whose till just died belongs at the top of it.

   Red is the only red on the homepage. That is the point, and it
   matches the "I need help now" button in the IT mega menu.
   ------------------------------------------------------------ */
.hero-v2-urgent{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 -18px 4px;              /* cancel the card's side padding */
  padding: 11px 18px;
  background: #FFF4F2;
  border-bottom: 1px solid #F0D5D0;
}
.hero-v2-urgent__t{
  margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.hero-v2-urgent__cta{
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Lora", Georgia, serif; font-size: 19px; font-weight: 700;
  color: #B02A1F; text-decoration: none; white-space: nowrap;
}
.hero-v2-urgent__cta:hover{ color: #8E2118; text-decoration: underline; }
.hero-v2-urgent__cta:focus-visible{ outline: 2px solid #B02A1F; outline-offset: 3px; border-radius: 3px; }
.hero-v2-urgent__dot{
  width: 8px; height: 8px; border-radius: 50%; background: #B02A1F; flex: none;
  box-shadow: 0 0 0 4px rgba(176, 42, 31, .15);
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* Lines open, 9am to 11pm UK time: js/phone-hours.js adds .is-open. */
.hero-v2-urgent__cta.is-open .hero-v2-urgent__dot{
  background: #1E8A4C;
  box-shadow: 0 0 0 4px rgba(30, 138, 76, .18);
}
/* Words for the light, under the number: "Leave us a message" in red,
   "Speak to us now" in green while the lines are open. */
.hero-v2-urgent__cta{ display: inline-grid; grid-template-columns: auto auto; justify-content: end; column-gap: 7px; row-gap: 1px; }
.hero-v2-urgent__status{
  grid-column: 1 / -1; text-align: right;
  font-family: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12.5px; font-weight: 600; line-height: 1.2;
  color: #B02A1F;
}
.hero-v2-urgent__cta.is-open .hero-v2-urgent__status{ color: #1E8A4C; }
/* While the lines are open the whole strip turns green, number included:
   the heading is "Prefer to talk?" now, so red only means "leave a message". */
.hero-v2-urgent:has(.is-open){ background: #F0F7F2; border-bottom-color: #CFE6D7; }
.hero-v2-urgent__cta.is-open{ color: #17703D; }
.hero-v2-urgent__cta.is-open:hover{ color: #0F5A30; }
.hero-v2-urgent__cta.is-open:focus-visible{ outline-color: #17703D; }
@media (max-width: 520px){
  /* Stacked, the number becomes the full-width tap target it should be. */
  .hero-v2-urgent{ gap: 8px; }
  .hero-v2-urgent__cta{ margin-left: 0; width: 100%; font-size: 21px; justify-content: start; }
  .hero-v2-urgent__status{ text-align: left; padding-left: 15px; }
}
/* Each row is one full-width link — the whole strip is the target.
   (A <table> can't make a row a link, hence the list.) */
.hero-v2-rows{
  list-style: none; margin: 0; padding: 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.hero-v2-rows li + li{ border-top: 1px solid var(--border); }
.hero-v2-rows a{
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  transition: transform .22s cubic-bezier(.22,.9,.3,1);
}
.hero-v2-rows .svc-col{ display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hero-v2-rows .svc{
  font-weight: 500; color: var(--ink); white-space: nowrap;
  transition: color .15s;
}
.hero-v2-rows .desc{ font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.hero-v2-rows .price{
  margin-left: auto;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border-radius: 8px;
  background: rgba(232, 208, 218, .38);
  white-space: nowrap;
  transition: background .15s;
}
.hero-v2-rows .price b{
  font-family: 'Lora', Georgia, serif; color: var(--plum);
  font-size: 18px; font-weight: 600; line-height: 1;
}
.hero-v2-rows .price small{
  font-size: 11.5px; font-weight: 600; color: var(--plum); opacity: .78;
}
.hero-v2-rows a:hover,
.hero-v2-rows a:focus-visible{ transform: translateX(6px); }
.hero-v2-rows a:hover .svc,
.hero-v2-rows a:focus-visible .svc{ color: var(--plum); }
.hero-v2-rows a:hover .price,
.hero-v2-rows a:focus-visible .price{ background: var(--blush); }
/* A small chevron ends each row so it reads as a link without hover
   (2026-10-10, 7B of email-preview/nav-pricecard/). */
.hero-v2-rows a::after{
  content: ''; flex: none; width: 7px; height: 7px; margin: 0 4px 0 -2px;
  border: solid var(--plum); border-width: 2px 2px 0 0; transform: rotate(45deg);
  opacity: .45; transition: opacity .15s, translate .22s cubic-bezier(.22,.9,.3,1);
}
.hero-v2-rows a:hover::after,
.hero-v2-rows a:focus-visible::after{ opacity: .9; translate: 3px 0; }

.hero-v2-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-v2-actions .btn-outline{
  background: rgba(255,255,255,.88);
  border-color: rgba(28,32,36,.14);
}
.hero-v2-actions .btn-outline:hover{ background: #fff; border-color: var(--plum); }
.hero-v2-note{
  margin: 16px 0 0; font-size: 13.5px; color: var(--stone-ink); max-width: 52ch;
}
.hero-v2-note a{ color: var(--plum); white-space: nowrap; }

/* Photo background — our own aerial of the Woodford valley. Two washes:
   a horizontal one, near-solid paper where the copy sits and opening
   toward the right, and a vertical one fading the photo into the page. */
.hero-v2-bg{ position: absolute; inset: 0; z-index: 0; }
.hero-v2-bg img{
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  display: block;
}
.hero-v2-bg::after{
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(247,245,241,.20) 0%,
      transparent 30%,
      transparent 62%,
      var(--paper) 100%);
}

/* Credit chip, bottom-right — the photo is proof of the drone service. */
.hero-v2-credit{
  position: absolute; right: clamp(14px, 2.5vw, 30px); bottom: 12px; z-index: 2;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--ink); text-decoration: none;
  background: rgba(247,245,241,.82); backdrop-filter: blur(4px);
  padding: 6px 11px; border-radius: 100px;
  border: 1px solid rgba(219,215,208,.8);
}
.hero-v2-credit:hover,
.hero-v2-credit:focus-visible{ color: var(--plum); border-color: var(--plum); }

@media (max-width: 900px){
  .hero-v2-grid{ grid-template-columns: 1fr; gap: 38px; }
  /* Narrow screens: vertical wash — solid paper behind the copy, the
     photo emerging below it rather than beside it. */
  .hero-v2-bg::after{
    background:
      linear-gradient(180deg,
        rgba(247,245,241,.97) 0%,
        rgba(247,245,241,.95) 52%,
        rgba(247,245,241,.72) 72%,
        rgba(247,245,241,.30) 88%,
        var(--paper) 100%);
  }
}
@media (max-width: 720px){
  .as-hero-v2{ padding: 44px 16px 40px; }
  .hero-v2-tagline{ font-size: clamp(34px, 9.5vw, 44px); }
  .hero-v2-rows{ font-size: 14px; }
  .hero-v2-rows .price b{ font-size: 16px; }
}

/* ============================================================
   Showcase cards — "The kind of thing we build"
   The three mockups were floating loose at different sizes with
   captions on different baselines. Cards give them one shape,
   equal height, and a shared lift on hover.
   ============================================================ */
.home-showcase-row{
  align-items: stretch;
}
.home-showcase-item{
  margin: 0;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(28,32,36,.05);
  transition: transform .28s cubic-bezier(.22,.9,.3,1), box-shadow .28s ease;
}
.home-showcase-item:hover,
.home-showcase-item:focus-within{
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(28,32,36,.14);
}
/* Media area: one height for all three, mockups scaled to fit
   rather than cropped, on a soft paper wash so the white cards
   don't blow out behind transparent PNGs. */
.home-showcase-item > a{
  display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto;
  padding: 20px 20px 16px;
  min-height: 300px;
  background: linear-gradient(180deg, rgba(247,245,241,.85), rgba(247,245,241,.25));
  transition: none;
}
.home-showcase-item > a:hover,
.home-showcase-item > a:focus-visible{ transform: none; }
.home-showcase-item > a:focus-visible{ outline: 2px solid var(--plum); outline-offset: -4px; }
.home-showcase-item img{
  width: auto; max-width: 100%;
  max-height: 272px; height: auto;
  object-fit: contain; display: block;
}
.home-showcase-laptop{ width: 100%; max-width: 390px; }
.home-showcase-laptop__frame{ max-height: none; }

/* Caption becomes a proper card footer. */
.home-showcase-item figcaption{
  margin: 0; text-align: left;
  border-top: 1px solid var(--border);
  padding: 13px 18px;
  background: #fff;
}
.home-showcase-item figcaption a{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  text-decoration: none;
  transition: color .15s;
}
.home-showcase-item figcaption a span{
  color: var(--plum); transition: transform .22s cubic-bezier(.22,.9,.3,1);
}
.home-showcase-item:hover figcaption a{ color: var(--plum); }
.home-showcase-item:hover figcaption a span{ transform: translateX(4px); }
.home-showcase-item figcaption a:hover{ text-decoration: none; }

@media (max-width: 900px){
  .home-showcase-item > a{ min-height: 240px; }
  .home-showcase-item img{ max-height: 210px; }
}

/* The autoplay pause control is a sibling of the media link, so in a flex
   card it would create a band between image and caption. Float it into the
   media area's bottom-right instead, clear of the caption. */
.home-showcase-item{ position: relative; }
.home-showcase-item figcaption{ min-height: 46px; box-sizing: border-box; }
.home-showcase-item .video-pause{
  position: absolute; right: 14px; bottom: 58px; z-index: 3;
  margin: 0; opacity: .78;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(4px);
}
.home-showcase-item .video-pause:hover,
.home-showcase-item .video-pause:focus-visible{ opacity: 1; }
/* Websites is the middle card and a size up: a wider column, a taller media
   area and a bigger laptop. The row centres vertically so the two side cards
   sit either side of it rather than stretching to its height. */
@media (min-width: 901px){
  .home-showcase-row{ grid-template-columns: 1fr 1.35fr 1fr; align-items: center; }
  .home-showcase-item--feature > a{ min-height: 380px; padding: 26px 26px 20px; }
  .home-showcase-item--feature .home-showcase-laptop{ max-width: 540px; }
  .home-showcase-item--feature figcaption a{ font-size: 16px; }
}
/* ============================================================
   Header: a size up, on every breakpoint.
   The dropdown panel reads --as-dd-top from nav.js (measured from
   the header's real bottom), so it follows automatically; only the
   no-JS fallback literal and the anchor offsets are hand-updated.
   ============================================================ */
.header-inner{ height: 114px; }
.logo{ gap: 12px; }
.logo .as-mark{ width: 40px; height: auto; }
.logo-word{ font-size: 23px; }
.logo-strapline{ font-size: 14px; }
.nav-list{ gap: 14px; }
.nav-link{ font-size: 15px; }
.dropdown{ top: var(--as-dd-top, 132px); }
.has-dropdown::after{ height: 76px; }
.site-main [id],
main#main [id]{ scroll-margin-top: 136px; }

/* The 901–1500px band is already tight, so it scales less. */
@media (max-width: 1500px) and (min-width: 901px){
  .nav-list{ gap: 10px; }
  .nav-link{ font-size: 14.5px; }
  .nav-studio-link{ font-size: 14px; }
  .nav-tab{ padding: 8px 13px; font-size: 13.5px; }
}


/* 901–1100px is the squeeze zone: the nav is still horizontal but the
   viewport is narrow. It already overflowed here before this change, so
   this tier both absorbs the larger type and fixes that. */
@media (max-width: 1100px) and (min-width: 901px){
  .header-inner{ height: 102px; }
  .logo{ gap: 9px; margin-right: 10px; }
  .logo .as-mark{ width: 33px; height: auto; }
  .logo-word{ font-size: 18.5px; }
  .nav-list{ gap: 4px; }
  .nav-link{ font-size: 12px; }
  .nav-studio-link{ font-size: 11.5px; }
  .nav-tab{ padding: 5px 8px; font-size: 11.5px; }
}

@media (max-width: 900px){
  .header-inner{ height: 100px; }
  .logo .as-mark{ width: 40px; height: auto; }
  .logo-word{ font-size: 22px; }
  .nav-toggle-bar{ width: 24px; }
  .site-main [id],
  main#main [id]{ scroll-margin-top: 118px; }
}

/* ============================================================
   Mobile hero photo — full height, from the header down to the
   price panel. A 2.18:1 landscape cropped into a portrait box
   shows ~21% of itself, so mobile gets its own portrait crop of
   the same frame (sky top, village and spire mid, fields below)
   at a fifth of the file size. The wide file stays for desktop.
   ============================================================ */
@media (max-width: 900px){
  .hero-v2-bg{
    inset: 0 0 auto 0;
    height: 500px;
    background-image: url('images/salisbury-valley-mobile.webp');
    background-size: cover;
    background-position: 50% 30%;
    background-repeat: no-repeat;
  }
  .hero-v2-bg img{ display: none; }
  .hero-v2-bg::after{
    background: linear-gradient(180deg,
      rgba(247,245,241,.70) 0%,
      rgba(247,245,241,.60) 34%,
      rgba(247,245,241,.28) 56%,
      rgba(247,245,241,.04) 78%,
      rgba(247,245,241,0) 100%);
  }
  .hero-v2-pricebox{ margin-top: 214px; }
  .hero-v2-credit{ top: 430px; bottom: auto; right: 14px; }
}

/* ============================================================
   Tagline leads, on one line, with the locality line beneath it.
   Reordered in CSS so the post content keeps its natural reading
   order (locality, then heading) for search engines and readers
   without stylesheets.
   ============================================================ */
.hero-v2-grid > div{ display: flex; flex-direction: column; }
.hero-v2-tagline{
  order: -2; margin: 0;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
  font-size: clamp(31px, 4.6vw, 62px);
}
.hero-v2-grid > div > .eyebrow{ order: -1; margin: 10px 0 0; }

@media (max-width: 900px){
  /* The heading now takes one line instead of two, so the panel sits
     higher and the photo gets the room back. */
  .hero-v2-pricebox{ margin-top: 232px; }
  .hero-v2-credit{ top: 396px; bottom: auto; right: 14px; }
}

/* Small phones: the one-line heading clears 320px by only a few pixels at
   the clamp floor, and a fallback face while Lora loads can be wider. */
@media (max-width: 359px){
  .hero-v2-tagline{ font-size: 27px; }
}

/* ============================================================
   Ultrawide: anchor the wash to the content column rather than
   the viewport. At 3440px the old viewport-relative gradient
   washed the entire empty left third for no reason.
   ============================================================ */
@media (min-width: 1700px){
  .hero-v2-bg::after{
    background:
      linear-gradient(180deg,
        rgba(247,245,241,.20) 0%,
        transparent 30%,
        transparent 62%,
        var(--paper) 100%);
  }
}

/* Buttons and the home link centred under the price panel on phones; on
   wider screens they line up with its left edge like the rest of the hero. */
.hero-v2-actions{ justify-content: center; }
.hero-v2-note{ text-align: center; max-width: none; }
@media (min-width: 901px){
  .hero-v2-actions{ justify-content: flex-start; }
  .hero-v2-note{ text-align: left; }
}


/* ============================================================
   "We also help with" — slim service tickets under the showcase
   row. Deliberately smaller than the pricing cards below: these
   are signposts, not the sell. The lede runs into a hairline so
   the strip reads as a footnote to "Made by the studio".
   ============================================================ */
.home-alsohelp{ margin-top: 40px; }
.home-alsohelp-lede{
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 14px; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--stone-ink);
}
.home-alsohelp-lede::after{ content: ''; flex: 1; height: 1px; background: var(--border); }
.home-alsohelp-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.home-alsohelp-card{
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  padding: 16px 18px; text-decoration: none; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.home-alsohelp-card:hover{
  border-color: var(--plum); box-shadow: 0 12px 28px rgba(28,32,36,.09);
  transform: translateY(-2px); text-decoration: none; color: var(--ink);
}
.home-alsohelp-ico{
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: #F2EAEF; color: var(--plum);
  display: grid; place-items: center;
}
.home-alsohelp-ico svg{ width: 24px; height: 24px; }
.home-alsohelp-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home-alsohelp-body strong{ font-size: 15px; line-height: 1.3; }
.home-alsohelp-body small{ font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.home-alsohelp-price{
  margin-left: auto; text-align: right; white-space: nowrap; flex-shrink: 0;
  font-family: "Lora", serif; font-size: 19px; color: var(--plum); line-height: 1.15;
}
.home-alsohelp-price small{
  display: block; font-family: "Work Sans", sans-serif;
  font-size: 11.5px; color: var(--muted);
}
.home-alsohelp-card:hover .home-alsohelp-price{ color: var(--plum); }
@media (max-width: 1040px){ .home-alsohelp-row{ grid-template-columns: 1fr; gap: 10px; } }

/* ============================================================
   Mobile hero heading fills its column. The reorder block sets a
   nowrap tagline at clamp(31px, 4.6vw, 62px); below ~670px that
   clamp floors at 31px, leaving the line at 319px inside a 358px
   column. 8.6vw tracks the column instead: the glyph advance is
   ~10.3x the font size, so 8.6vw lands just inside the gutters at
   every width from 320px up, still on one line.
   ============================================================ */
@media (max-width: 900px){
  .hero-v2-tagline{ font-size: clamp(26px, 8.6vw, 52px); }
}

/* Drone chip: desktop only. On a phone the hero is already carrying a
   headline, a lead, two buttons and the "help at home" line, and a chip for a
   service most homepage visitors did not come for was the fifth thing
   competing in a single screen. Drone work keeps its card further down the
   page and its own entry in the menu, so nothing is lost — it just stops
   shouting over the top of the hero.

   Kept in the markup rather than removed from the page: it earns its place on
   a wide screen, where there is empty photograph to sit on. */
@media (max-width: 900px){
  .hero-v2-credit{ display: none; }
}

/* ============================================================
   Drone page: survey signpost. Replaces the three stale package
   cards — surveys are priced per property on their own page, and
   this section only needs to point there.
   ============================================================ */
.drone-survey-signpost{
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 40px; align-items: center;
}
.drone-survey-signpost__copy h2{ margin: 0 0 12px; }
.drone-survey-signpost__copy .lead{ margin: 0 0 14px; max-width: 54ch; }
.drone-survey-signpost__copy .tier-note{ margin: 0; max-width: 56ch; }
.drone-survey-signpost__card{
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  padding: 28px; text-align: center; box-shadow: 0 18px 40px rgba(28,32,36,.07);
}
.drone-survey-signpost__lede{
  margin: 0; color: var(--plum); font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.drone-survey-signpost__price{
  margin: 6px 0 10px; font-family: "Lora", serif; font-size: clamp(38px, 4.6vw, 52px);
  line-height: 1; color: var(--plum);
}
.drone-survey-signpost__note{
  margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.5;
}
.drone-survey-signpost__card .btn{ width: 100%; box-sizing: border-box; }
@media (max-width: 900px){
  .drone-survey-signpost{ grid-template-columns: 1fr; gap: 26px; }
  .drone-survey-signpost__card{ padding: 24px; }
}

/* ============================================================
   Home Care plan panel (/for-home/). A single plan, so it reads
   as one offer with its price to the side, not a tier grid — a
   lone pricing card in a three-column layout looks unfinished.
   ============================================================ */
.home-plan{
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 34px; box-shadow: 0 18px 44px rgba(28,32,36,.07);
}
.home-plan h3{ margin: 0 0 10px; font-size: clamp(21px, 2.3vw, 26px); }
.home-plan-lead{ margin: 0 0 18px; color: var(--muted); max-width: 52ch; }
.home-plan-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.home-plan-list li{ position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.45; }
.home-plan-list li::before{
  content: ''; position: absolute; left: 3px; top: .3em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--plum); border-bottom: 2px solid var(--plum);
  transform: rotate(-45deg);
}
.home-plan-price{
  background: rgba(232,208,218,.38); border-radius: 14px; padding: 26px 22px; text-align: center;
}
.home-plan-price .home-plan-amount{
  display: block; font-family: "Lora", serif; font-size: clamp(40px, 5vw, 54px);
  line-height: 1; color: var(--plum);
}
.home-plan-price .home-plan-unit{ display: block; margin-top: 8px; font-size: 14px; color: var(--ink); font-weight: 600; }
.home-plan-price .home-plan-sub{ display: block; margin-top: 10px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.home-plan-price .btn{ margin-top: 18px; width: 100%; box-sizing: border-box; }
@media (max-width: 860px){
  .home-plan{ grid-template-columns: 1fr; gap: 24px; padding: 24px; }
}

/* ============================================================
   Photo hero (/for-home/)
   ------------------------------------------------------------
   A full-bleed photograph with the copy sitting on the empty
   wall in the left half of the frame. The image is generated to
   leave that wall clear, but a render is never guaranteed to
   light it evenly, so a scrim guarantees contrast rather than
   trusting the photograph. The scrim is fully opaque at the
   left edge and gone by 62% across, which leaves the people in
   the right half untouched.

   Below 860px no photograph can carry this much text, so the
   image stops being a background and becomes a normal block
   above the copy.
   ============================================================ */
.as-photo-hero {
	position: relative;
	padding: 0 24px;
	overflow: hidden;
	background: var(--paper);
	min-height: clamp(460px, 46vw, 740px);
	display: flex;
	align-items: center;
}
/* The padding above loses to `.as-sec.as-hero`, which sets a top padding of
   up to 76px and carries two classes to our one. On desktop the absolutely
   positioned photograph covers it, so nothing showed; on mobile the
   photograph returns to flow and that padding became a band of bare paper
   between the header and the image — the white gap at the top of the hero on
   /for-home/ and /websites/ alike.

   Only the padding is restated at higher specificity, deliberately. Raising
   the whole block to three classes would also outrank the single-class
   `.as-photo-hero` overrides further down this file — the mobile stack and
   the ultrawide height cap — and silently break both. */
.as-sec.as-hero.as-photo-hero { padding: 0 24px; }

/* Keeps the copy on the same 1080px column as every other section, so the
   headline lines up with the content below it rather than floating out to
   the viewport edge on a wide monitor. */
.as-photo-hero-inner {
	width: 100%; max-width: var(--maxw); margin: 0 auto;
	position: relative; z-index: 2;
}
/* The hero is a constrained group, so core caps every child at the 1160px
   content size and centres it with `margin-left/right: auto !important`.
   The photograph and its scrim have to break out of that to reach the
   viewport edges, and !important is the only thing core's !important
   listens to. The copy below stays constrained, which is the point —
   the headline lines up with the sections underneath it. */
.as-photo-hero-media,
.as-photo-hero-scrim {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-block-start: 0;
}
.as-photo-hero-media { position: absolute; inset: 0; z-index: 0; }
.as-photo-hero-media img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}
.as-photo-hero-scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(90deg,
		rgba(247, 245, 241, 0.94) 0%,
		rgba(247, 245, 241, 0.82) 32%,
		rgba(247, 245, 241, 0.44) 50%,
		rgba(247, 245, 241, 0) 62%);
}
.as-photo-hero .as-photo-hero-copy {
	max-width: 620px;
	margin-left: 0 !important;
	margin-right: auto !important;
	margin-block-start: 0;
	padding: clamp(36px, 5vw, 64px) 0;
}
.as-photo-hero .as-photo-hero-copy .lead { max-width: 34ch; }

/* Price strip. Rules rather than cards: boxes would fight the
   photograph for attention, a ruled row sits on it quietly. */
.as-hp-prices {
	display: flex;
	margin: 26px 0 28px;
	max-width: 560px;
	border-top: 1px solid rgba(28, 32, 36, 0.16);
	border-bottom: 1px solid rgba(28, 32, 36, 0.16);
}
.as-hp-price { flex: 1; padding: 14px 18px 15px; }
.as-hp-price + .as-hp-price { border-left: 1px solid rgba(28, 32, 36, 0.16); }
.as-hp-amt {
	font-family: "Lora", serif;
	font-size: clamp(22px, 2.1vw, 32px);
	line-height: 1; color: var(--plum); white-space: nowrap;
}
.as-hp-from {
	font-family: "Work Sans", sans-serif; font-size: 0.42em;
	color: var(--muted); font-weight: 600; letter-spacing: 0.04em;
	text-transform: uppercase; margin-right: 0.3em;
	position: relative; top: -0.12em;
}
.as-hp-per {
	font-family: "Work Sans", sans-serif; font-size: 0.4em;
	color: var(--muted); font-weight: 500;
}
.as-hp-what { font-size: 13px; font-weight: 600; margin: 9px 0 2px; }
.as-hp-note { font-size: 12.5px; color: var(--muted); line-height: 1.4; margin: 0; }
.as-hp-foot { font-size: 12px; color: var(--muted); margin: 18px 0 0; }

@media (max-width: 860px) {
	.as-photo-hero { min-height: 0; display: block; }
	.as-photo-hero-media {
		position: static;
		margin-left: -24px !important;
		margin-right: -24px !important;
		/* The photograph opens the page on a phone.

		   This used to reserve 132px for an overlaid headline in
		   `.as-photo-hero-head`. No template has ever rendered that element —
		   the live DOM contains zero of them — so the reservation was holding
		   open an empty cream band between the header and the picture, and the
		   headline it was reserving for sat below the image anyway. The
		   `.as-photo-hero-head` rules went with it.

		   !important for the same reason the side margins have it: core prints
		   a `.wp-container-* > * { margin-block-start: 0 }` rule after the
		   theme stylesheet, and it wins on document order otherwise. */
		margin-top: 0 !important;
	}
	/* A 16:9 crop on a phone shrinks the two people to nothing. Crop to 4:3
	   and hold the right of the frame, where they are — the empty wall is
	   what gets sacrificed, and on mobile the copy sits below the photo
	   rather than on it, so the wall has no job left to do. */
	.as-photo-hero-media img {
		height: auto;
		aspect-ratio: 4 / 3;
		object-position: 82% center;
	}
	.as-photo-hero-scrim { display: none; }
	.as-photo-hero .as-photo-hero-copy {
		max-width: none;
		padding: 28px 0 var(--hero-y-b);
	}

	/* The `.as-photo-hero-head` block that lived here — an absolutely
	   positioned eyebrow + h1 lifted onto the top of the photograph —
	   has been removed. No template ever rendered the element, so all of
	   it was dead, and the 132px it was positioned against was showing as
	   an empty band above the picture. The headline stays in
	   `.as-photo-hero-copy`, below the image, which is where it was
	   actually rendering the whole time. */
	.as-photo-hero .as-photo-hero-copy { padding-top: 8px; }
	/* Softens the top edge of the photograph. Dropping the picture below the
	   headline left it starting on a hard horizontal line; a short paper wash
	   over the top of the image lets it emerge out of the page instead. Sits
	   under the price flag, which is z-index 2. */
	.as-photo-hero-media::before {
		content: "";
		position: absolute;
		top: 0; left: 0; right: 0;
		height: 88px;
		z-index: 1;
		pointer-events: none;
		background: linear-gradient(180deg,
			rgba(247, 245, 241, 0.92) 0%,
			rgba(247, 245, 241, 0.5) 34%,
			rgba(247, 245, 241, 0) 100%);
	}
	/* The desktop price strip, turned on its side. Same ruled table — a
	   hairline above and below the block and one between each row — with the
	   three columns becoming three rows, so the two layouts read as the same
	   object rather than two different treatments of the same numbers.

	   The row keeps the desktop's inline qualifiers ("from £70", "£35/half
	   hour"), so the data-qual stack that used to run here is off: it said
	   the same thing twice once those were visible again. */
	/* Three panels rather than three ruled paragraphs. Hairline rows read as
	   body copy on a phone and get scrolled past; a bordered panel with the
	   figure pinned to its own right-hand column reads as a thing to look at,
	   and the three line up on a common left edge so they scan as one set.

	   Panels, not links: the two CTAs directly underneath already own those
	   actions, and a tappable price above them would be a second, competing
	   route to the same two pages. */
	.as-hp-prices {
		display: grid;
		gap: 10px;
		max-width: none;
		margin: 22px 0 24px;
		border-top: 0;
		border-bottom: 0;
	}
	.as-hp-price + .as-hp-price { border-left: 0; }
	.as-hp-price {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		column-gap: 14px;
		padding: 14px 16px 15px;
		border: 1px solid var(--border);
		border-radius: 10px;
		background: #fff;
	}
	.as-hp-price::before { content: none; }
	.as-hp-amt {
		grid-column: 2;
		grid-row: 1;
		font-size: 26px; line-height: 1.05;
		font-variant-numeric: tabular-nums;
	}
	.as-hp-what {
		grid-column: 1; grid-row: 1;
		margin: 0; font-size: 15px;
	}
	.as-hp-note {
		grid-column: 1 / -1; grid-row: 2;
		margin-top: 4px; font-size: 13px;
	}
}

/* ============================================================
   Split CTA — two doors, one control
   ------------------------------------------------------------
   Remote and a home visit are the same decision made two ways,
   so they read better as one object than as two loose buttons.
   The left half is filled because we would rather fix it
   remotely: same day, no travel, cheaper for the customer. The
   preference is carried by weight, not by hiding the option.
   ============================================================ */
.as-split-cta {
	display: inline-flex;
	border: 1px solid var(--plum);
	border-radius: 12px;
	overflow: hidden;
	max-width: 100%;
	box-shadow: 0 1px 2px rgba(28, 32, 36, 0.08);
}
.as-split-cta > a {
	display: block;
	padding: 13px 22px 14px;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.25;
	transition: background-color 0.15s ease;
}
.as-split-cta > a + a { border-left: 1px solid var(--plum); }
.as-split-cta .as-split-sub {
	display: block;
	font-size: 12px;
	font-weight: 400;
	margin-top: 3px;
	opacity: 0.78;
}
.as-split-primary { background: var(--plum); color: var(--paper); }
.as-split-primary:hover,
.as-split-primary:focus { background: var(--plum-d, #4A1C34); color: var(--paper); }
/* Near-opaque rather than transparent: this sits on a photograph, and an
   outline button over an image is a contrast failure waiting for the one
   render where the wall goes dark. */
.as-split-secondary { background: rgba(247, 245, 241, 0.94); color: var(--ink); }
.as-split-secondary:hover,
.as-split-secondary:focus { background: #fff; color: var(--ink); }
.as-split-call { font-size: 14px; color: var(--muted); margin: 14px 0 0; }
.as-split-call a { color: var(--plum); font-weight: 600; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
	.as-split-cta { display: flex; flex-direction: column; width: 100%; }
	.as-split-cta > a { text-align: center; }
	.as-split-cta > a + a { border-left: 0; border-top: 1px solid var(--plum); }
}

/* ============================================================
   Photo hero on ultrawide. At 21:9 the scrim's 0.94 left stop
   painted the whole left third flat, so a 32:9 monitor showed a
   big empty cream field. The photographs are composed with light
   detail on the left (a street through glass, a lit wall), so on
   very wide screens the scrim eases off and lets that read, while
   staying opaque enough behind the headline for dark plum text.
   ============================================================ */
@media (min-width: 1700px) {
  .as-photo-hero-scrim {
    background: linear-gradient(90deg,
      rgba(247, 245, 241, 0.80) 0%,
      rgba(247, 245, 241, 0.86) 26%,
      rgba(247, 245, 241, 0.72) 44%,
      rgba(247, 245, 241, 0.30) 56%,
      rgba(247, 245, 241, 0) 66%);
  }
  /* Cover on a 32:9 viewport crops a 16:9 frame to a letterbox slice.
     Capping the height keeps the composition intact and lets the photo
     sit against paper rather than being sliced. */
  .as-photo-hero { min-height: 0; height: clamp(600px, 34vw, 820px); }
  /* The websites frame puts the tablet low in the composition, so a centred
     crop cuts the shop page in half on a letterbox viewport. Anchor lower so
     the whole tablet survives; the top of the window is empty sky anyway. */
  .as-photo-hero--low .as-photo-hero-media img { object-position: center 64%; }
}

/* The websites hero keeps the service-page CTA row and note inside the
   photo-hero copy column. */
.as-photo-hero .svc-hero-ctas { margin-top: 26px; }
.as-photo-hero-note { margin: 16px 0 0; font-size: 14px; color: var(--muted); }

/* ============================================================
   Photo hero price flag — mobile only
   ------------------------------------------------------------
   On a phone the photo hero stacks: image first, copy below. The
   image was then pure decoration and the first price sat a full
   screen further down. This lays the entry price over the image
   behind a short wash off the left edge — enough to read dark
   plum on, not so much that it flattens the photograph.

   Hidden on desktop, where the copy already sits on the image
   and a second price block would just compete with the headline.
   ============================================================ */
.as-photo-hero-flag { display: none; }

@media (max-width: 860px) {
	.as-photo-hero-flag {
		display: block;
		position: absolute;
		left: 0; bottom: 0;
		z-index: 2;
		padding: 16px 44px 16px 24px;
		/* Wash, not a panel: opaque where the text sits, gone by the
		   time it reaches the subject on the right of the frame. */
		background: linear-gradient(90deg,
			rgba(247, 245, 241, 0.94) 0%,
			rgba(247, 245, 241, 0.88) 55%,
			rgba(247, 245, 241, 0) 100%);
	}
	.as-photo-hero-flag-qual {
		display: block;
		font-size: 11px; font-weight: 700;
		letter-spacing: 0.1em; text-transform: uppercase;
		color: var(--muted);
		margin-bottom: 1px;
	}
	.as-photo-hero-flag-amt {
		display: block;
		font-family: "Lora", serif;
		font-size: 34px; line-height: 1.05;
		color: var(--plum);
		font-variant-numeric: tabular-nums;
	}
	/* The flag is positioned against the media block, which is static on
	   mobile — so the block has to be the containing block for it. */
	.as-photo-hero-media { position: relative; }
}

/* ============================================================
   Line breaking
   ------------------------------------------------------------
   Headings across the site were breaking into badly uneven
   lines — a long first line and two words on the second — and
   paragraphs regularly ended on a single-word last line. Both
   are the browser's default greedy line breaker doing exactly
   what it was asked and nothing more.

   `balance` evens the lines of a heading against each other,
   which is what you would do by hand with a <br> except it
   keeps working when the text changes or the screen is a
   different width. `pretty` leaves body copy alone apart from
   refusing to strand the last word.

   Progressive enhancement: a browser that does not know these
   values ignores them and gets today's behaviour.
   ============================================================ */
h1, h2, h3, h4,
.eyebrow, .lead, .hero-v2-note,
.est-heading, .price-label, .as-hp-what {
	text-wrap: balance;
}
p, li, figcaption, .as-hp-note, .est-intro {
	text-wrap: pretty;
}

/* ============================================================
   Hero background pattern (pages with no hero graphic)
   ------------------------------------------------------------
   Every hero that has no photograph or product shot was flat
   paper. The motif is the Ashburn Stone faceted mark itself,
   oversized as a plum/blush watermark (img/hero-mark-ghost.svg
   — the brand mark with its four fills retinted to plum at
   4.5–13% opacity), with a soft blush glow behind it. Two
   orientations so neighbouring pages read as a family, not a
   repeat: service-offer pages carry the whole mark on the
   right (hero cards simply overlap it); the custom svc heroes
   have it rising out of the bottom left behind the copy.
   Photo heroes (.as-photo-hero, .svc-hero--photo) are
   deliberately untouched. Opacities live inside the SVG, not
   here — regenerate it from brand/mark.svg if they change.
   ============================================================ */
/* The ink hero is excluded for the same reason photo heroes are: it brings its
   own light. Both rules paint ::before on the same element at equal
   specificity, and this block sits ~2,100 lines further down the file, so
   without the :not() it silently overwrote the ink hero's plum gradient with
   the mark — the ink hero shipped showing the stone silhouette. */
.offer-hero:not(.offer-hero--ink):not(.offer-hero--nomark), .svc-hero.as-hero:not(.svc-hero--photo) { position: relative; overflow: hidden; }
.offer-hero:not(.offer-hero--ink):not(.offer-hero--nomark)::before, .svc-hero.as-hero:not(.svc-hero--photo)::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.offer-hero:not(.offer-hero--ink):not(.offer-hero--nomark)::before {
	background:
		radial-gradient(ellipse 50% 85% at 88% 15%, rgba(232, 208, 218, .45), transparent 65%),
		url("img/hero-mark-ghost.svg") no-repeat right 56px center / auto 85%;
}
.svc-hero.as-hero:not(.svc-hero--photo)::before {
	background:
		radial-gradient(ellipse 50% 85% at 10% 90%, rgba(232, 208, 218, .45), transparent 65%),
		url("img/hero-mark-ghost.svg") no-repeat left -90px bottom -150px / auto 78%;
}
/* Brick wall hero, opt-in via $as_service['hero_pattern'] = 'brick' —
   used by the security pages, where the masonry says something about
   the service. Seamless running
   bond generated by tools/gen-hero-brick.js (120x40 bricks, 480x240
   tile, joints in plum, a scatter of bricks filled in blush and plum),
   anchored top right and faded out before it reaches the copy. */
.offer-hero:not(.offer-hero--ink):not(.offer-hero--nomark).offer-hero--brick::before {
	background:
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='240'%20viewBox='0%200%20480%20240'%3E%3Crect%20x='-120'%20y='0'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.57'/%3E%3Crect%20x='360'%20y='0'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.57'/%3E%3Crect%20x='60'%20y='40'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.32'/%3E%3Crect%20x='300'%20y='40'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.25'/%3E%3Crect%20x='0'%20y='80'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.29'/%3E%3Crect%20x='120'%20y='80'%20width='120'%20height='40'%20fill='%235C2441'%20fill-opacity='0.11'/%3E%3Crect%20x='240'%20y='80'%20width='120'%20height='40'%20fill='%235C2441'%20fill-opacity='0.14'/%3E%3Crect%20x='360'%20y='80'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.38'/%3E%3Crect%20x='-60'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.25'/%3E%3Crect%20x='420'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.25'/%3E%3Crect%20x='60'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.65'/%3E%3Crect%20x='420'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.87'/%3E%3Crect%20x='-60'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.87'/%3E%3Crect%20x='180'%20y='200'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.61'/%3E%3Cpath%20d='M0%200H480M0%2040H480M0%2080H480M0%20120H480M0%20160H480M0%20200H480M0%20240H480M0%200V40M120%200V40M240%200V40M360%200V40M480%200V40M60%2040V80M180%2040V80M300%2040V80M420%2040V80M0%2080V120M120%2080V120M240%2080V120M360%2080V120M480%2080V120M60%20120V160M180%20120V160M300%20120V160M420%20120V160M0%20160V200M120%20160V200M240%20160V200M360%20160V200M480%20160V200M60%20200V240M180%20200V240M300%20200V240M420%20200V240'%20stroke='%235C2441'%20stroke-opacity='.26'%20stroke-width='1.5'%20fill='none'/%3E%3C/svg%3E") repeat top right,
		radial-gradient(ellipse 60% 100% at 100% 0%, rgba(232, 208, 218, .45), transparent 62%);
	-webkit-mask-image: linear-gradient(to bottom left, #000 28%, rgba(0, 0, 0, .14) 58%, transparent 78%);
	mask-image: linear-gradient(to bottom left, #000 28%, rgba(0, 0, 0, .14) 58%, transparent 78%);
}
/* Phones: the mark scales with hero height, and a tall narrow hero
   makes it wider than the viewport. Cap it and tuck it into the
   bottom corner so the copy leads. */
@media (max-width: 860px) {
	.offer-hero:not(.offer-hero--ink):not(.offer-hero--nomark)::before {
		background:
			radial-gradient(ellipse 70% 50% at 90% 100%, rgba(232, 208, 218, .4), transparent 65%),
			url("img/hero-mark-ghost.svg") no-repeat right -70px bottom -110px / auto 300px;
	}
	.svc-hero.as-hero:not(.svc-hero--photo)::before {
		background:
			radial-gradient(ellipse 70% 50% at 10% 100%, rgba(232, 208, 218, .4), transparent 65%),
			url("img/hero-mark-ghost.svg") no-repeat left -70px bottom -110px / auto 300px;
	}
	/* Brick hero on phones: a band of brickwork across the top of the
	   hero and a little at the foot, with clean paper behind the copy.
	   Two earlier attempts were wrong in opposite directions — anchored to
	   the bottom the top course was cut off and the first screen was bare;
	   run full height it sat under the headline and hurt legibility at
	   phone size. The band is measured in PIXELS, not percentages, so it
	   always ends above the headline whatever the hero grows to. */
	.offer-hero:not(.offer-hero--ink):not(.offer-hero--nomark).offer-hero--brick::before {
		background:
			url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='240'%20viewBox='0%200%20480%20240'%3E%3Crect%20x='-120'%20y='0'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.57'/%3E%3Crect%20x='360'%20y='0'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.57'/%3E%3Crect%20x='60'%20y='40'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.32'/%3E%3Crect%20x='300'%20y='40'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.25'/%3E%3Crect%20x='0'%20y='80'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.29'/%3E%3Crect%20x='120'%20y='80'%20width='120'%20height='40'%20fill='%235C2441'%20fill-opacity='0.11'/%3E%3Crect%20x='240'%20y='80'%20width='120'%20height='40'%20fill='%235C2441'%20fill-opacity='0.14'/%3E%3Crect%20x='360'%20y='80'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.38'/%3E%3Crect%20x='-60'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.25'/%3E%3Crect%20x='420'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.25'/%3E%3Crect%20x='60'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.65'/%3E%3Crect%20x='420'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.87'/%3E%3Crect%20x='-60'%20y='120'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.87'/%3E%3Crect%20x='180'%20y='200'%20width='120'%20height='40'%20fill='%23E8D0DA'%20fill-opacity='0.61'/%3E%3Cpath%20d='M0%200H480M0%2040H480M0%2080H480M0%20120H480M0%20160H480M0%20200H480M0%20240H480M0%200V40M120%200V40M240%200V40M360%200V40M480%200V40M60%2040V80M180%2040V80M300%2040V80M420%2040V80M0%2080V120M120%2080V120M240%2080V120M360%2080V120M480%2080V120M60%20120V160M180%20120V160M300%20120V160M420%20120V160M0%20160V200M120%20160V200M240%20160V200M360%20160V200M480%20160V200M60%20200V240M180%20200V240M300%20200V240M420%20200V240'%20stroke='%235C2441'%20stroke-opacity='.26'%20stroke-width='1.5'%20fill='none'/%3E%3C/svg%3E") repeat top right / 320px 160px,
			radial-gradient(ellipse 70% 30% at 90% 0%, rgba(232, 208, 218, .38), transparent 65%);
		-webkit-mask-image: linear-gradient(to bottom, #000 0 64px, rgba(0, 0, 0, .45) 96px, transparent 132px, transparent calc(100% - 96px), rgba(0, 0, 0, .7) 100%);
		mask-image: linear-gradient(to bottom, #000 0 64px, rgba(0, 0, 0, .45) 96px, transparent 132px, transparent calc(100% - 96px), rgba(0, 0, 0, .7) 100%);
	}
}
/* ------------------------------------------------------------
   IT support hero: photograph with a dark scrim over the copy.
   Borrowed technique (Air IT do the same): the scrim
   guarantees the copy a clean bed, which is what defeated every
   earlier attempt to put a photo on this page — the estimate
   card owns the right third, so a photo alone had nowhere to
   put the text. Photo is our own Salisbury drone shot of the
   industrial estate with the spire behind, already on the site
   for the drone pages. .svc-hero--photo suppresses the stone
   mark; --estate adds the picture.
   ------------------------------------------------------------ */
/* The treatment itself is shared — every photo hero of this shape needs the
   same scrim, the same inverted buttons and the same stacking fix. A page
   supplies only its own picture and crop focus, below. --estate is
   /it-support/; --aerial is /drone/. */
.svc-hero--estate, .svc-hero--aerial {
	/* position:relative is essential and easy to miss: the shared rule that
	   sets it EXCLUDES .svc-hero--photo, so without this the scrim's inset:0
	   resolves against the viewport and washes the entire page, top bar
	   included. */
	position: relative; overflow: hidden;
	background-size: cover; background-repeat: no-repeat;
}
.svc-hero--estate { background-image: url("img/services/drone-salisbury-city.webp"); background-position: center 40%; }
/* Old Sarum from the east. 52% holds the ramparts and the ditch across the
   middle of the frame: lower and the crop fills with the foreground field,
   higher and the hillfort slides out of the top. */
.svc-hero--aerial { background-image: url("img/services/drone-old-sarum.webp"); background-position: center 52%; }
.svc-hero--estate::before, .svc-hero--aerial::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
	background: linear-gradient(90deg, rgba(28,32,36,.94) 0%, rgba(28,32,36,.92) 44%, rgba(28,32,36,.6) 64%, rgba(28,32,36,.22) 100%);
}
/* Lighter than --estate, and the difference is the point. That scrim is built
   for a low-contrast industrial estate where the copy would otherwise land on
   pale roofs. Old Sarum is dark green under the text already, so the same
   weight just buries the earthworks the photograph was chosen for. */
.svc-hero--aerial::before {
	background: linear-gradient(90deg, rgba(28,32,36,.88) 0%, rgba(28,32,36,.80) 38%, rgba(28,32,36,.46) 62%, rgba(28,32,36,.16) 100%);
}
.svc-hero--estate .container, .svc-hero--aerial .container { position: relative; z-index: 1; }
.svc-hero--estate .eyebrow, .svc-hero--aerial .eyebrow { color: var(--blush, #E8D0DA); }
.svc-hero--estate h1, .svc-hero--aerial h1 { color: #fff; }
.svc-hero--estate .lead, .svc-hero--aerial .lead { color: rgba(255,255,255,.88); }
/* The primary button was plum on plum. Invert the pair: solid paper for the
   main action, a light outline for the rest. */
.svc-hero--estate .btn-primary, .svc-hero--aerial .btn-primary { background: var(--paper); color: var(--plum); }
.svc-hero--estate .btn-primary:hover, .svc-hero--aerial .btn-primary:hover { background: #fff; color: var(--plum-d); }
.svc-hero--estate .btn-outline, .svc-hero--aerial .btn-outline { border-color: rgba(255,255,255,.55); color: #fff; }
.svc-hero--estate .btn-outline:hover, .svc-hero--aerial .btn-outline:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
/* The trust badges are ink-on-paper pills by default and vanish on the
   photograph — /drone/ carries three of them directly under the headline. */
.svc-hero--aerial .drone-trust-badge { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.08); }
@media (max-width: 900px) {
	/* Stacked: the card drops below the copy, so the scrim has to run down the
	   frame rather than across it or the text ends up on bare photograph. */
	.svc-hero--estate::before, .svc-hero--aerial::before {
		background: linear-gradient(180deg, rgba(28,32,36,.94) 0%, rgba(28,32,36,.92) 52%, rgba(28,32,36,.68) 78%, rgba(28,32,36,.4) 100%);
	}
	/* Half the bytes for a screen that cannot show the difference: 145KB
	   against 330KB, and the hero is the largest paint on the page. */
	.svc-hero--aerial { background-image: url("img/services/drone-old-sarum-1600.webp"); }
	/* Lighter than the shared stacked scrim, which measured 14.5:1 behind the
	   headline — so far past legible that the photograph had gone black and the
	   145KB bought nothing. Eased until the earthworks read again while the
	   headline, which sits in the top third, keeps its dark bed. */
	.svc-hero--aerial::before {
		background: linear-gradient(180deg, rgba(28,32,36,.90) 0%, rgba(28,32,36,.78) 42%, rgba(28,32,36,.46) 72%, rgba(28,32,36,.24) 100%);
	}
	/* A 16:9 frame in a tall narrow box crops hard to the sides. Pulling the
	   focus up keeps the hillfort in the slice rather than the foreground
	   field, which is the only part of this picture that says anything. */
	.svc-hero--aerial { background-position: center 44%; }
}
/* ------------------------------------------------------------
   Hero sign-up card (IT support). Replaces the quick-estimate
   widget: one price, one action. Lives on the photo hero, so it
   is a solid paper card rather than a tinted panel.
   ------------------------------------------------------------ */
.hero-signup { background: var(--paper); border-radius: 14px; padding: 26px 24px 22px; box-shadow: 0 14px 40px rgba(0,0,0,.24); }
.hero-signup-label { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-ink); }
.hero-signup-price { margin: 0; font-family: "Lora", Georgia, "Times New Roman", serif; font-size: 44px; line-height: 1; color: var(--plum); }
.hero-signup-price span { font-family: inherit; font-size: 15px; font-weight: 400; color: var(--stone-ink); margin-left: 6px; }
.hero-signup-list { list-style: none; margin: 16px 0 20px; padding: 16px 0 0; border-top: 1px solid var(--border); display: grid; gap: 9px; }
.hero-signup-list li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.hero-signup-list li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 6px; border-left: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(-45deg); }
.hero-signup-cta { display: block; width: 100%; text-align: center; justify-content: center; }
/* The photo hero flips .btn-primary to paper so it reads on the dark scrim.
   Inside the sign-up card the background is already paper, so flip it back or
   the main action renders paper-on-paper. */
.svc-hero--estate .hero-signup .btn-primary { background: var(--plum); color: #fff; }
.svc-hero--estate .hero-signup .btn-primary:hover { background: var(--plum-d); color: #fff; }
.hero-signup-note { margin: 10px 0 0; text-align: center; font-size: 12.5px; color: var(--stone-ink); }
/* The qualifier sits under the figure, not beside it. On /it-support/ the
   span is "/user per month" and tucks in next to the number; "Essential —
   30 min on site" is a phrase, and inline after a 44px serif figure it broke
   across the line at "Essential —". */
.hero-signup--drone .hero-signup-price span { display: block; margin-left: 0; margin-top: 7px; font-size: 14px; }
/* The other packages, as a pair of buttons under the main action. They are
   deliberately quieter than the CTA above them — the point of advertising the
   cheapest package is that the cheapest package is the easy yes, and these are
   the answer to "what if my job is bigger", not a second sales pitch. */
.hero-signup-more-label { margin: 14px 0 7px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stone-ink); text-align: center; }
.hero-signup-more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-signup-pill { display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 8px; border: 1px solid var(--border); border-radius: 10px; background: #fff;
  text-decoration: none; transition: border-color .15s, background .15s; }
.hero-signup-pill:hover { border-color: var(--plum); background: var(--blush); }
.hero-signup-pill-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2; text-align: center; }
.hero-signup-pill-price { font-size: 12.5px; color: var(--plum); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .hero-signup-more { grid-template-columns: 1fr; } }
.hero-signup-alt { margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; color: var(--stone-ink); }
.hero-signup-alt a { font-weight: 600; }
/* The copy stacks above the pattern. */
.offer-hero > .container, .svc-hero.as-hero > .container { position: relative; z-index: 1; }

/* ============================================================
   Branding hero — original identity concepts
   ------------------------------------------------------------
   A page selling visual identity has to demonstrate judgement above the
   fold. Three original concept systems show range without implying client
   work: landscape/editorial, technical/trade and hospitality/packaging.
   The compact estimate remains a real package selector; selecting a tier
   also retargets the main brief CTA to that exact portal product.
   ============================================================ */
.branding-hero {
	padding: clamp(52px, 5.2vw, 70px) 0 clamp(64px, 6vw, 78px);
	background:
		radial-gradient(circle at 89% 17%, rgba(92, 36, 65, .065), transparent 28%),
		linear-gradient(180deg, #faf8f3 0%, #f3f0e8 100%);
}
.svc-hero.as-hero.branding-hero:not(.svc-hero--photo)::before {
	background: radial-gradient(ellipse 54% 88% at 88% 18%, rgba(232, 208, 218, .18), transparent 66%);
}
.branding-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, .89fr) minmax(540px, 1.11fr);
	align-items: center;
	gap: clamp(34px, 4.6vw, 58px);
	max-width: 1200px;
	margin: 0 auto;
}
.branding-hero-copy h1 {
	max-width: 570px;
	font-size: clamp(44px, 4.05vw, 62px);
	line-height: 1.065;
	letter-spacing: -.035em;
}
.branding-hero-copy .lead { max-width: 570px; font-size: 18px; line-height: 1.62; }
.branding-hero-proof {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 19px;
	margin-top: 21px;
	color: #77716c;
	font-size: 11px;
}
.branding-hero-proof span::before { content: "✓"; margin-right: 6px; color: var(--plum); font-weight: 700; }

.branding-folio {
	min-width: 0;
	min-height: 526px;
	padding: 12px;
	border: 1px solid rgba(51, 41, 37, .11);
	border-radius: 20px;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 24px 70px rgba(38, 31, 28, .12), inset 0 1px rgba(255, 255, 255, .9);
}
.branding-folio-head {
	height: 31px;
	display: flex;
	align-items: center;
	padding: 0 6px;
	color: var(--plum);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.branding-concept-grid {
	height: 366px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 10px;
}
.branding-concept { position: relative; overflow: hidden; border-radius: 10px; isolation: isolate; }
.branding-mark {
	display: block;
	flex: 0 0 auto;
	background: currentColor;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}
.branding-mark--mere {
	-webkit-mask-image: url("img/branding-concepts/mere-moss-mark.svg");
	mask-image: url("img/branding-concepts/mere-moss-mark.svg");
}
.branding-mark--tern {
	-webkit-mask-image: url("img/branding-concepts/ternwell-mark.svg?v=20260921-rich");
	mask-image: url("img/branding-concepts/ternwell-mark.svg?v=20260921-rich");
}
.branding-mark--cinder {
	-webkit-mask-image: url("img/branding-concepts/cinder-bloom-mark.svg?v=20260921-rich");
	mask-image: url("img/branding-concepts/cinder-bloom-mark.svg?v=20260921-rich");
}

/* Mere & Moss — quiet, horizontal and editorial. */
.branding-concept--mere { background: #f0eadf; color: #14372f; }
.branding-concept--mere::before,
.branding-concept--mere::after {
	content: "";
	position: absolute;
	z-index: -1;
	border: 1px solid rgba(20, 55, 47, .11);
	border-radius: 48% 52% 45% 55%;
}
.branding-concept--mere::before {
	width: 240px;
	height: 164px;
	left: -85px;
	top: 84px;
	transform: rotate(-16deg);
	box-shadow: 0 0 0 17px rgba(20, 55, 47, .035), 0 0 0 36px rgba(20, 55, 47, .025), 0 0 0 57px rgba(20, 55, 47, .018);
}
.branding-concept--mere::after {
	width: 170px;
	height: 230px;
	right: -93px;
	top: -80px;
	transform: rotate(28deg);
	box-shadow: 0 0 0 15px rgba(20, 55, 47, .035), 0 0 0 31px rgba(20, 55, 47, .022);
}
.branding-mere-lockup { position: absolute; z-index: 2; left: 15px; top: 13px; display: flex; align-items: center; gap: 9px; }
.branding-mere-lockup .branding-mark { width: 34px; height: 34px; color: #14372f; }
.branding-mere-word { font: 600 18px/.94 "Lora", Georgia, serif; letter-spacing: -.03em; }
.branding-mere-word i { color: #b86d4b; font-weight: 400; }
.branding-mere-lockup small { display: block; margin-top: 4px; font-size: 5.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; }
.branding-mere-book {
	position: absolute;
	z-index: 3;
	left: 17px;
	bottom: 14px;
	width: 93px;
	height: 82px;
	padding: 11px;
	background: #14372f;
	color: #f0eadf;
	box-shadow: 0 15px 28px rgba(20, 55, 47, .2);
}
.branding-mere-book .branding-mark { width: 19px; height: 19px; color: #f0eadf; }
.branding-book-title { position: absolute; left: 11px; bottom: 10px; }
.branding-book-title strong { display: block; font: 500 13px/1.02 "Lora", Georgia, serif; }
.branding-book-title small { display: block; margin-top: 4px; color: #a5ae8c; font-size: 4.5px; letter-spacing: .14em; text-transform: uppercase; }
.branding-mere-plan {
	position: absolute;
	z-index: 4;
	right: 17px;
	bottom: 13px;
	width: 84px;
	height: 80px;
	padding: 10px;
	background: #fff;
	color: #14372f;
	box-shadow: 0 12px 24px rgba(35, 35, 30, .13);
	transform: rotate(2.2deg);
}
.branding-mere-plan::before {
	content: "";
	position: absolute;
	inset: 31px 9px 8px;
	background:
		linear-gradient(32deg, transparent 48%, rgba(20, 55, 47, .18) 49% 51%, transparent 52%),
		radial-gradient(ellipse at 55% 60%, transparent 0 17px, rgba(20, 55, 47, .20) 18px 19px, transparent 20px 29px, rgba(20, 55, 47, .12) 30px 31px, transparent 32px);
}
.branding-mere-plan b { display: block; font-size: 5px; letter-spacing: .13em; text-transform: uppercase; }
.branding-mere-plan span { display: block; margin-top: 4px; color: #b86d4b; font: italic 8px "Lora", Georgia, serif; }
.branding-mere-swatches { position: absolute; z-index: 6; right: 111px; top: 67px; display: flex; gap: 4px; }
.branding-mere-swatches i { width: 8px; height: 8px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px rgba(20, 55, 47, .09); }

/* Ternwell — an engineered seal for vans, workwear and test documents. */
.branding-concept--ternwell { background: #0e1d2c; color: #fff; }
.branding-concept--ternwell::before { content: ""; position: absolute; z-index: -1; width: 175px; height: 225px; right: -89px; top: -37px; background: #2b6bea; transform: rotate(22deg); }
.branding-concept--ternwell::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 8px; background: #c7ef42; }
.branding-tern-lockup { position: absolute; z-index: 3; left: 18px; top: 14px; width: 98px; display: grid; justify-items: center; text-align: center; white-space: nowrap; }
.branding-tern-seal { width: 38px; height: 38px; display: grid; place-items: center; }
.branding-tern-seal .branding-mark { width: 38px; height: 38px; color: #c7ef42; }
.branding-tern-type { min-width: 0; margin-top: 5px; }
.branding-tern-lockup strong { display: block; font-size: 15px; font-weight: 850; line-height: .9; letter-spacing: .03em; text-transform: uppercase; }
.branding-tern-lockup small { display: block; margin-top: 4px; color: #d9e4ff; font-size: 4.8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.branding-tern-lockup small b { color: #c7ef42; }
.branding-tern-ticket { position: absolute; right: 19px; bottom: 21px; width: 116px; padding: 8px 9px; background: #c7ef42; color: #0e1d2c; box-shadow: 5px 5px 0 rgba(43, 107, 234, .72); }
.branding-tern-ticket b { display: block; font-size: 8px; letter-spacing: .1em; }
.branding-tern-ticket span { display: block; margin-top: 2px; font-size: 6px; letter-spacing: .08em; text-transform: uppercase; }
.branding-tern-code { position: absolute; right: 8px; bottom: 21px; writing-mode: vertical-rl; color: rgba(255, 255, 255, .78); font-size: 5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.branding-tern-swatches { position: absolute; z-index: 5; right: 18px; top: 16px; display: flex; gap: 4px; }
.branding-tern-swatches i { width: 7px; height: 7px; display: block; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; box-shadow: 0 0 0 1px rgba(14,29,44,.25); }
.branding-tern-swatches i:nth-child(1) { background: #0e1d2c; }
.branding-tern-swatches i:nth-child(2) { background: #2b6bea; }
.branding-tern-swatches i:nth-child(3) { background: #c7ef42; }
.branding-tern-swatches i:nth-child(4) { background: #f3f6f8; }

/* Cinder & Bloom — a tall maker's crest beside a two-line wordmark. */
.branding-concept--cinder { background: #fff4e5; color: #351824; }
.branding-concept--cinder::before { content: ""; position: absolute; z-index: -1; width: 142px; height: 142px; right: -62px; bottom: -76px; border: 26px solid rgba(227, 95, 61, .16); border-radius: 50%; }
.branding-cinder-lockup { position: absolute; z-index: 3; left: 16px; top: 14px; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.branding-cinder-seal { width: 45px; height: 45px; display: grid; flex: 0 0 auto; place-items: center; }
.branding-cinder-seal .branding-mark { width: 45px; height: 45px; color: #e35f3d; }
.branding-cinder-type { min-width: 0; }
.branding-cinder-lockup strong { display: block; font: 600 16px/.82 "Lora", Georgia, serif; letter-spacing: -.035em; }
.branding-cinder-lockup strong span,
.branding-cinder-lockup strong i { display: block; }
.branding-cinder-lockup strong i { margin-left: 11px; color: #e35f3d; font-weight: 400; }
.branding-cinder-lockup small { display: block; margin-top: 7px; color: #7a4b46; font-size: 4.8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.branding-cinder-wrap { position: absolute; left: 18px; bottom: 16px; width: 82px; height: 57px; border-radius: 3px; background: #351824; color: #fff4e5; box-shadow: 7px 7px 0 #f0b14b; transform: rotate(-2deg); }
.branding-cinder-wrap .branding-mark { position: absolute; left: 9px; top: 8px; width: 21px; height: 21px; color: #e35f3d; }
.branding-cinder-wrap b { position: absolute; right: 8px; top: 10px; color: #f0b14b; font-size: 4.5px; letter-spacing: .11em; text-transform: uppercase; }
.branding-cinder-wrap > span:last-child { position: absolute; left: 10px; bottom: 8px; font: italic 8px "Lora", Georgia, serif; }
.branding-cinder-sticker { position: absolute; right: 19px; bottom: 17px; width: 55px; height: 55px; display: grid; place-items: center; border: 1px solid rgba(255,244,229,.68); border-radius: 50%; background: #e35f3d; color: #fff4e5; box-shadow: 0 8px 18px rgba(53, 24, 36, .16), 0 0 0 3px #e35f3d; transform: rotate(8deg); }
.branding-cinder-sticker .branding-mark { width: 34px; height: 34px; color: #fff4e5; }
.branding-cinder-swatches { position: absolute; z-index: 5; right: 16px; top: 16px; display: flex; gap: 4px; }
.branding-cinder-swatches i { width: 7px; height: 7px; display: block; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 0 0 1px rgba(53,24,36,.12); }
.branding-cinder-swatches i:nth-child(1) { background: #351824; }
.branding-cinder-swatches i:nth-child(2) { background: #e35f3d; }
.branding-cinder-swatches i:nth-child(3) { background: #f0b14b; }
.branding-cinder-swatches i:nth-child(4) { background: #fff4e5; }

/* Stillform — a markless, typographic movement identity. */
.branding-concept--still { background: #faeee8; color: #3a1938; }
.branding-concept--still::before {
	content: "";
	position: absolute;
	z-index: -1;
	width: 190px;
	height: 190px;
	right: -86px;
	top: -102px;
	border: 28px solid rgba(255, 107, 95, .23);
	border-radius: 50%;
}
.branding-concept--still::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 44%; height: 9px; background: #f7db74; }
.branding-still-lockup { position: absolute; z-index: 3; left: 18px; top: 14px; display: flex; align-items: stretch; gap: 9px; }
.branding-still-word { color: #3a1938; font-size: 25px; font-weight: 900; line-height: .74; letter-spacing: -.075em; white-space: nowrap; }
.branding-still-word > span { display: block; }
.branding-still-word > span + span { margin-top: 7px; }
.branding-still-o { width: .67em; height: .67em; margin: 0 .02em .01em .04em; display: inline-block; border: .14em solid #ff6b5f; border-radius: 50%; }
.branding-still-lockup small { min-width: 32px; padding: 5px 6px; display: grid; align-content: center; background: #ff6b5f; color: #fff; font-size: 5px; font-weight: 800; line-height: 1.25; letter-spacing: .16em; text-transform: uppercase; }
.branding-still-pass { position: absolute; z-index: 3; left: 18px; bottom: 17px; width: 112px; height: 59px; padding: 10px; overflow: hidden; background: #3a1938; color: #faeee8; box-shadow: 6px 6px 0 rgba(255,107,95,.8); }
.branding-still-pass b { display: block; font-size: 7px; letter-spacing: .14em; }
.branding-still-pass span { position: absolute; left: 10px; bottom: 9px; color: #f7db74; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.branding-still-pass i { position: absolute; width: 48px; height: 48px; right: -17px; top: -19px; border: 8px solid #ff6b5f; border-radius: 50%; }
.branding-still-class { position: absolute; z-index: 4; right: 18px; bottom: 16px; width: 77px; height: 60px; padding: 8px; background: #f7db74; color: #3a1938; transform: rotate(2deg); box-shadow: 0 9px 16px rgba(58,25,56,.12); }
.branding-still-class b { display: block; font-size: 10px; line-height: .9; letter-spacing: -.03em; }
.branding-still-class span { position: absolute; left: 8px; bottom: 8px; font-size: 6px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.branding-still-swatches { position: absolute; z-index: 5; right: 17px; top: 16px; display: flex; gap: 4px; }
.branding-still-swatches i { width: 7px; height: 7px; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 0 1px rgba(58,25,56,.1); }
.branding-still-swatches i:nth-child(1) { background: #3a1938; }
.branding-still-swatches i:nth-child(2) { background: #ff6b5f; }
.branding-still-swatches i:nth-child(3) { background: #f7db74; }
.branding-still-swatches i:nth-child(4) { background: #faeee8; }

/* The package buttons are a visual comparison, not just a price switch.
   Logo strips each concept back to its core lockup; Brand Identity restores
   the applications, palette and supporting pieces around it. */
.branding-mere-lockup,
.branding-tern-lockup,
.branding-cinder-lockup,
.branding-still-lockup {
	transition: left .34s ease, top .34s ease, transform .34s cubic-bezier(.2, .72, .2, 1);
}
.branding-mere-book,
.branding-mere-plan,
.branding-mere-swatches,
.branding-tern-ticket,
.branding-tern-code,
.branding-tern-swatches,
.branding-cinder-wrap,
.branding-cinder-sticker,
.branding-cinder-swatches,
.branding-still-pass,
.branding-still-class,
.branding-still-swatches {
	transition: opacity .22s ease, visibility .22s ease;
}
.branding-folio.is-logo .branding-mere-book,
.branding-folio.is-logo .branding-mere-plan,
.branding-folio.is-logo .branding-mere-swatches,
.branding-folio.is-logo .branding-tern-ticket,
.branding-folio.is-logo .branding-tern-code,
.branding-folio.is-logo .branding-tern-swatches,
.branding-folio.is-logo .branding-cinder-wrap,
.branding-folio.is-logo .branding-cinder-sticker,
.branding-folio.is-logo .branding-cinder-swatches,
.branding-folio.is-logo .branding-still-pass,
.branding-folio.is-logo .branding-still-class,
.branding-folio.is-logo .branding-still-swatches {
	opacity: 0;
	visibility: hidden;
}
.branding-folio.is-logo .branding-mere-lockup {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.23);
}
.branding-folio.is-logo .branding-tern-lockup {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.2);
}
.branding-folio.is-logo .branding-cinder-lockup {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.16);
}
.branding-folio.is-logo .branding-still-lockup {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.14);
}
.branding-folio.is-logo .branding-mere-word,
.branding-folio.is-logo .branding-cinder-lockup strong { white-space: nowrap; }
/* The estimate is the one interactive thing on this page and it was styled
   like a footnote: 8px labels under a 25px figure, inside the same white as
   everything around it. It now reads as the panel it is. */
.branding-est {
	min-height: 126px;
	margin-top: 12px;
	padding: 13px;
	display: grid;
	grid-template-columns: 128px 1fr 1fr;
	gap: 10px;
	border: 1.5px solid rgba(92, 36, 65, .2);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(35, 29, 27, .10);
}
.branding-est-intro { padding: 4px 2px 4px 5px; display: flex; flex-direction: column; justify-content: space-between; }
.branding-est-intro small { color: var(--plum); font-size: 9.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.branding-est-price { color: var(--plum); font: 700 36px/1 "Lora", Georgia, serif; letter-spacing: -.02em; }
.branding-est-help { color: #7d746e; font-size: 10px; line-height: 1.3; }
.branding-est-option {
	appearance: none;
	padding: 13px 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border: 1px solid transparent;
	border-radius: 7px;
	background: #f6f4ef;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}
.branding-est-option:hover,
.branding-est-option.active { border-color: var(--plum); background: #fbf7f9; box-shadow: inset 0 0 0 1px rgba(92, 36, 65, .28); }
.branding-est-option:focus-visible { outline: 3px solid rgba(92, 36, 65, .25); outline-offset: 2px; }
.branding-est-option strong { font-size: 13.5px; }
.branding-est-option span { color: #766f6a; font-size: 10px; }
.branding-est-option b { color: var(--plum); font-size: 17px; font-weight: 700; }

/* Phone-only twin of the hero brief button. The hero stacks above the samples
   and the estimate, so without this the journey is: look, choose, scroll back
   up. Kept in step with the hero button by .js-brand-brief-cta. */
.branding-folio-cta { display: none; }

@media (max-width: 1100px) {
	.branding-hero-grid { grid-template-columns: minmax(0, .83fr) minmax(520px, 1.17fr); gap: 30px; }
}
@media (max-width: 900px) {
	.branding-hero { padding-top: 58px; }
	.branding-hero-grid { display: block; }
	.branding-hero-copy { max-width: 590px; margin: 0 auto; }
	.branding-folio { max-width: 590px; margin: 46px auto 0; }
	.branding-folio-cta { display: block; width: 100%; margin-top: 14px; text-align: center; }
}
@media (max-width: 560px) {
	.branding-hero { padding-top: 50px; padding-bottom: 68px; }
	.branding-hero-copy h1 { font-size: clamp(40px, 12vw, 53px); line-height: 1.08; margin-bottom: 22px; }
	.branding-hero-copy .lead { font-size: 17px; line-height: 1.68; }
	.branding-hero-proof { gap: 7px 15px; }
	.branding-folio { width: calc(100% + 8px); min-height: 0; margin: 42px -4px 0; padding: 10px; border-radius: 17px; }
	.branding-folio-head { height: 34px; padding: 0 3px; font-size: 8px; line-height: 1.35; }
	.branding-concept-grid { height: 340px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; }
	.branding-mere-lockup { left: 10px; top: 10px; gap: 6px; }
	.branding-mere-lockup .branding-mark { width: 27px; height: 27px; }
	.branding-mere-word { font-size: 14px; }
	.branding-mere-lockup small { font-size: 4.2px; letter-spacing: .1em; }
	.branding-mere-book { left: 10px; bottom: 11px; width: 65px; height: 62px; padding: 8px; }
	.branding-mere-book .branding-mark { width: 14px; height: 14px; }
	.branding-book-title { left: 8px; bottom: 7px; }
	.branding-book-title strong { font-size: 10px; }
	.branding-book-title small { font-size: 3.2px; }
	.branding-mere-plan { right: 10px; bottom: 10px; width: 59px; height: 62px; padding: 7px; }
	.branding-mere-plan::before { inset: 25px 6px 6px; }
	.branding-mere-plan b { font-size: 3.7px; }
	.branding-mere-plan span { margin-top: 3px; font-size: 6px; }
	.branding-mere-swatches { right: 10px; top: 52px; }
	.branding-tern-lockup { left: 9px; top: 9px; width: 77px; }
	.branding-tern-seal,
	.branding-tern-seal .branding-mark { width: 31px; height: 31px; }
	.branding-tern-type { margin-top: 4px; }
	.branding-tern-lockup strong { font-size: 12px; }
	.branding-tern-lockup small { font-size: 3.5px; }
	.branding-tern-ticket { right: 12px; bottom: 17px; width: 91px; padding: 7px; }
	.branding-tern-ticket b { font-size: 6px; }
	.branding-tern-ticket span { font-size: 4.5px; }
	.branding-tern-code { right: 6px; bottom: 18px; font-size: 3.5px; }
	.branding-tern-swatches { right: 10px; top: 10px; }
	.branding-cinder-lockup { left: 9px; top: 9px; gap: 6px; }
	.branding-cinder-seal,
	.branding-cinder-seal .branding-mark { width: 33px; height: 33px; }
	.branding-cinder-lockup strong { font-size: 12px; }
	.branding-cinder-lockup small { margin-top: 5px; font-size: 3.5px; }
	.branding-cinder-wrap { left: 11px; bottom: 13px; width: 68px; height: 50px; }
	.branding-cinder-sticker { right: 12px; bottom: 15px; width: 44px; height: 44px; }
	.branding-cinder-sticker .branding-mark { width: 27px; height: 27px; }
	.branding-cinder-swatches { right: 10px; top: 10px; }
	.branding-still-lockup { left: 10px; top: 10px; gap: 6px; }
	.branding-still-word { font-size: 20px; }
	.branding-still-lockup small { min-width: 27px; padding: 4px; font-size: 4px; }
	.branding-still-pass { left: 10px; bottom: 13px; width: 74px; height: 49px; padding: 7px; }
	.branding-still-pass b { font-size: 5px; }
	.branding-still-pass span { left: 7px; bottom: 7px; font-size: 4.5px; }
	.branding-still-class { right: 10px; bottom: 12px; width: 54px; height: 50px; padding: 6px; }
	.branding-still-class b { font-size: 8px; }
	.branding-still-class span { left: 6px; bottom: 6px; font-size: 4px; }
	.branding-still-swatches { right: 9px; top: 10px; }
	.branding-folio.is-logo .branding-mere-lockup { transform: translate(-50%, -50%) scale(1.05); }
	.branding-folio.is-logo .branding-tern-lockup { transform: translate(-50%, -50%) scale(1.1); }
	.branding-folio.is-logo .branding-cinder-lockup { transform: translate(-50%, -50%) scale(1.22); }
	.branding-folio.is-logo .branding-still-lockup { transform: translate(-50%, -50%) scale(1.06); }
	/* A 92px intro column wrapped both the label and the helper onto two lines
	   each. On a phone the estimate reads better as a headline row above the
	   two choices than as a third narrow column beside them. */
	.branding-est { min-height: 0; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
	.branding-est-intro { grid-column: 1 / -1; flex-direction: row; align-items: baseline;
		gap: 8px; padding: 3px 4px 1px; }
	.branding-est-intro small { order: 0; flex: 0 0 auto; }
	.branding-est-help { order: 1; flex: 1 1 auto; font-size: 9.5px; }
	.branding-est-price { order: 2; margin-left: auto; flex: 0 0 auto; font-size: 27px; }
	.branding-est-option { padding: 12px 11px; }
	.branding-est-option span { display: none; }
	.branding-est-option strong { font-size: 13px; }
	.branding-est-option b { font-size: 16px; }
}
@media (max-width: 410px) {
	.branding-mere-lockup { left: 7px; gap: 5px; }
	.branding-mere-lockup .branding-mark { width: 23px; height: 23px; }
	.branding-mere-word { font-size: 12px; }
	.branding-mere-lockup small { font-size: 3.4px; }
	.branding-mere-book { left: 8px; width: 52px; }
	.branding-mere-plan { right: 8px; width: 50px; }
	.branding-mere-swatches { right: 7px; top: 47px; }
	.branding-mere-swatches i { width: 6px; height: 6px; }
	.branding-tern-lockup { left: 7px; top: 8px; width: 65px; }
	.branding-tern-seal,
	.branding-tern-seal .branding-mark { width: 27px; height: 27px; }
	.branding-tern-lockup strong { font-size: 10px; }
	.branding-tern-lockup small { font-size: 3px; }
	.branding-tern-ticket { right: 9px; width: 74px; }
	.branding-tern-swatches i { width: 6px; height: 6px; }
	.branding-cinder-lockup { left: 7px; top: 8px; gap: 5px; }
	.branding-cinder-seal,
	.branding-cinder-seal .branding-mark { width: 28px; height: 28px; }
	.branding-cinder-lockup strong { font-size: 10px; }
	.branding-cinder-lockup small { font-size: 3.3px; }
	.branding-cinder-wrap { left: 8px; width: 58px; }
	.branding-cinder-sticker { right: 9px; width: 39px; height: 39px; }
	.branding-cinder-sticker .branding-mark { width: 24px; height: 24px; }
	.branding-still-lockup { left: 8px; top: 9px; gap: 5px; }
	.branding-still-word { font-size: 17px; }
	.branding-still-lockup small { min-width: 23px; padding: 3px; font-size: 3.3px; }
	.branding-still-pass { left: 8px; width: 59px; }
	.branding-still-class { right: 8px; width: 47px; }
	.branding-folio.is-logo .branding-mere-lockup { transform: translate(-50%, -50%) scale(1.13); }
	.branding-folio.is-logo .branding-cinder-lockup { transform: translate(-50%, -50%) scale(1.24); }
	.branding-est-option strong { font-size: 12px; }
	.branding-est-option b { font-size: 15px; }
	.branding-est-price { font-size: 24px; }
	.branding-est-help { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
	.branding-mere-lockup,
	.branding-tern-lockup,
	.branding-cinder-lockup,
	.branding-still-lockup,
	.branding-mere-book,
	.branding-mere-plan,
	.branding-mere-swatches,
	.branding-tern-ticket,
	.branding-tern-code,
	.branding-tern-swatches,
	.branding-cinder-wrap,
	.branding-cinder-sticker,
	.branding-cinder-swatches,
	.branding-still-pass,
	.branding-still-class,
	.branding-still-swatches { transition: none; }
}

/* ============================================================
   Branding: identity showcase carousel
   ------------------------------------------------------------
   Seven deliberately different systems, with Ashburn Stone in the
   centre of both the sequence and the initial viewport. These are visual
   identity boards rather than project-detail cards, so the artwork gets
   most of the space and the caption stays deliberately terse.
   ============================================================ */
.identity-carousel { margin-top: 4px; }
.identity-carousel .work-track { gap: 18px; padding: 12px 8px 24px; }
.identity-carousel .identity-showcase-card {
	flex: 0 0 min(84vw, 452px);
	scroll-snap-align: center;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 16px 42px rgba(28, 32, 36, .13);
	overflow: hidden;
}
.identity-carousel .identity-showcase-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 22px 52px rgba(28, 32, 36, .18);
}
.identity-showcase-art { position: relative; height: 304px; min-height: 304px; border-radius: 0; overflow: hidden; isolation: isolate; }
.identity-showcase-caption {
	min-height: 82px;
	padding: 16px 20px 17px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
	color: var(--ink);
}
.identity-showcase-caption > span {
	margin-bottom: 4px;
	color: #7b736e;
	font-size: 10px;
	font-weight: 750;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.identity-carousel .identity-showcase-name,
.identity-carousel .identity-showcase-name:hover {
	margin: 0;
	color: var(--ink);
	font: 650 clamp(22px, 2vw, 27px)/1.08 "Lora", Georgia, serif;
	letter-spacing: -.025em;
}
.identity-carousel .work-car-btn { top: 43%; }
.identity-carousel .work-dots { margin-top: 5px; }

/* The hero concepts are reused at a larger scale here so every new system
   carries the same real lockup and collateral, not a simplified imitation. */
.identity-showcase-card--mere .branding-mere-lockup { left: 30px; top: 28px; transform: scale(1.52); transform-origin: left top; }
.identity-showcase-card--mere .branding-mere-book { left: 30px; bottom: 31px; transform: scale(1.42) rotate(-1deg); transform-origin: left bottom; }
.identity-showcase-card--mere .branding-mere-plan { right: 32px; bottom: 29px; transform: scale(1.42) rotate(2.2deg); transform-origin: right bottom; }
.identity-showcase-card--mere .branding-mere-swatches { right: 42px; top: 92px; transform: scale(1.35); transform-origin: right top; }

.identity-showcase-card--ternwell .branding-tern-lockup { left: 37px; top: 29px; transform: scale(1.55); transform-origin: left top; }
.identity-showcase-card--ternwell .branding-tern-ticket { right: 39px; bottom: 38px; transform: scale(1.5); transform-origin: right bottom; }
.identity-showcase-card--ternwell .branding-tern-code { right: 17px; bottom: 39px; transform: scale(1.35); transform-origin: right bottom; }
.identity-showcase-card--ternwell .branding-tern-swatches { right: 30px; top: 25px; transform: scale(1.35); transform-origin: right top; }

.identity-showcase-card--cinder .branding-cinder-lockup { left: 32px; top: 29px; transform: scale(1.5); transform-origin: left top; }
.identity-showcase-card--cinder .branding-cinder-wrap { left: 34px; bottom: 35px; transform: scale(1.45) rotate(-2deg); transform-origin: left bottom; }
.identity-showcase-card--cinder .branding-cinder-sticker { right: 39px; bottom: 34px; transform: scale(1.45) rotate(8deg); transform-origin: right bottom; }
.identity-showcase-card--cinder .branding-cinder-swatches { right: 30px; top: 27px; transform: scale(1.35); transform-origin: right top; }

.identity-showcase-card--still .branding-still-lockup { left: 33px; top: 31px; transform: scale(1.5); transform-origin: left top; }
.identity-showcase-card--still .branding-still-pass { left: 35px; bottom: 37px; transform: scale(1.45); transform-origin: left bottom; }
.identity-showcase-card--still .branding-still-class { right: 37px; bottom: 34px; transform: scale(1.45) rotate(2deg); transform-origin: right bottom; }
.identity-showcase-card--still .branding-still-swatches { right: 30px; top: 28px; transform: scale(1.35); transform-origin: right top; }

/* Ashburn Stone — editorial specification sheet, not another mock product. */
.identity-showcase-art--ashburn {
	background:
		linear-gradient(115deg, transparent 0 61%, rgba(92, 36, 65, .07) 61% 77%, transparent 77%),
		#f7f5f1;
	color: #1c2024;
}
.identity-showcase-art--ashburn::before {
	content: "";
	position: absolute;
	inset: 16px;
	border: 1px solid rgba(28, 32, 36, .18);
	pointer-events: none;
}
.identity-showcase-art--ashburn::after {
	content: "";
	position: absolute;
	right: 22px;
	top: 42px;
	width: 190px;
	height: 190px;
	background: #1c2024;
	opacity: .065;
	-webkit-mask: url("logo-mark.svg") center / contain no-repeat;
	mask: url("logo-mark.svg") center / contain no-repeat;
}
.identity-ashburn-rule {
	position: absolute;
	z-index: 2;
	left: 31px;
	top: 28px;
	color: #5c2441;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .17em;
	text-transform: uppercase;
}
.identity-ashburn-lockup { position: absolute; z-index: 3; left: 34px; top: 78px; display: flex; align-items: center; gap: 15px; }
.identity-ashburn-lockup img { width: 100px; height: 100px; object-fit: contain; }
.identity-ashburn-lockup strong { display: block; color: #1c2024; font: 700 32.5px/1 "Lora", Georgia, serif; letter-spacing: -.028em; }
.identity-ashburn-lockup span { display: block; margin-top: 7px; color: #5c2441; font: italic 500 15px/1 "Lora", Georgia, serif; letter-spacing: 0; text-transform: none; }
.identity-ashburn-spec { position: absolute; z-index: 2; left: 31px; right: 31px; bottom: 27px; padding-top: 9px; display: flex; justify-content: space-between; border-top: 1px solid rgba(28,32,36,.26); font-size: 8px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.identity-ashburn-swatches { position: absolute; z-index: 3; right: 34px; bottom: 52px; display: flex; gap: 6px; }
.identity-ashburn-swatches i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(255,255,255,.8); box-shadow: 0 0 0 1px rgba(28,32,36,.12); }
.identity-ashburn-swatches i:nth-child(1) { background: #1c2024; }
.identity-ashburn-swatches i:nth-child(2) { background: #5c2441; }
.identity-ashburn-swatches i:nth-child(3) { background: #bbab9a; }
.identity-ashburn-swatches i:nth-child(4) { background: #f7f5f1; }
.identity-showcase-card--ashburn { box-shadow: 0 18px 52px rgba(92,36,65,.2); }

/* Aldwick — engraved bottle-label richness. */
.identity-showcase-art--aldwick {
	background:
		radial-gradient(circle at 50% 42%, rgba(201,185,154,.17), transparent 35%),
		linear-gradient(145deg, #2e4f3a, #14271d);
	color: #f0ead8;
}
.identity-aldwick-frame { position: absolute; inset: 17px; border: 1px solid rgba(201,185,154,.5); }
.identity-aldwick-frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(201,185,154,.21); }
.identity-aldwick-lockup { position: absolute; z-index: 2; inset: 30px 34px 48px; display: flex; align-items: center; justify-content: center; gap: 17px; }
.identity-aldwick-lockup img { width: 144px; height: 144px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.24)); }
.identity-aldwick-lockup strong { display: block; color: #f0ead8; font: 600 32px/.9 "Lora", Georgia, serif; letter-spacing: -.025em; }
.identity-aldwick-lockup span { display: block; margin-top: 10px; color: #c9b99a; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.identity-aldwick-batch { position: absolute; z-index: 2; left: 0; right: 0; bottom: 27px; color: #c9b99a; text-align: center; font-size: 8px; font-weight: 750; letter-spacing: .19em; text-transform: uppercase; }

/* Kingsbarrow — a measured contractor system: structure, amber and figures. */
.identity-showcase-art--kingsbarrow { background: #1e2529; color: #eceae6; }
.identity-kb-grid { position: absolute; inset: 0; opacity: .14; background-image: linear-gradient(rgba(255,255,255,.32) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.32) 1px, transparent 1px); background-size: 34px 34px; }
.identity-showcase-art--kingsbarrow::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 66px; background: #f0a500; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 36% 50%); }
.identity-kb-lockup { position: absolute; z-index: 2; left: 35px; top: 52px; display: flex; align-items: center; gap: 18px; }
.identity-kb-lockup img { width: 94px; height: 94px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
.identity-kb-lockup strong { display: block; color: #fff; font-size: 27px; font-weight: 900; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.identity-kb-lockup span { display: block; margin-top: 7px; color: #f0a500; font-size: 13px; font-weight: 850; letter-spacing: .18em; text-transform: uppercase; }
.identity-kb-bar { position: absolute; z-index: 2; left: 35px; right: 84px; bottom: 34px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; background: #f0a500; color: #1e2529; font-size: 8px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.identity-kb-bar b { font-size: 10px; }

/* ============================================================
   "Why it matters" on /branding/ — three animated vignettes.
   The old version used the shared .it-cards component with a
   generic outline icon, which on a page selling design work was
   the weakest thing on it. These are built here rather than in
   .it-cards because that component is used on five other pages.
   Each one shows the claim instead of captioning it.
   ============================================================ */
.brand-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.brand-why-card {
	display: flex; flex-direction: column; overflow: hidden;
	border: 1px solid rgba(28, 32, 36, .13); border-radius: 16px; background: #fff;
	box-shadow: 0 14px 34px rgba(28, 32, 36, .08);
	transition: transform .22s ease, box-shadow .22s ease;
}
.brand-why-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(28, 32, 36, .13); }
.brand-why-viz {
	position: relative; height: 176px; overflow: hidden;
	border-bottom: 1px solid rgba(28, 32, 36, .08);
	background: linear-gradient(158deg, #f7f3ed 0%, #e9e3d9 100%);
}
.brand-why-body { padding: 22px 24px 24px; }
.brand-why-tag {
	display: inline-block; margin: 0 0 10px; padding: 4px 11px; border-radius: 999px;
	background: rgba(92, 36, 65, .08); color: var(--plum);
	font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.brand-why-body h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.02em; }
.brand-why-body p { margin: 0; color: #5f5a56; font-size: 15px; line-height: 1.6; }

/* One fictional client identity — J. Smith, Building & Joinery — drawn once
   and reused across every surface in cards 1 and 2, because the whole claim is
   that a brand is the same thing everywhere. Its colour is deliberately not
   Ashburn plum: on this page it has to read as a customer's brand, not ours. */
.brand-why { --jsm: var(--plum); --jsm-ink: var(--ink); }
.jsm-mark { flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain; }
.jsm-mark--sm { width: 26px; height: 26px; }
.jsm-mark--xs { width: 17px; height: 17px; }
/* on the van's plum panel the mark needs a white field to sit on */
.jsm-badge { flex: 0 0 auto; display: grid; place-items: center; width: 19px; height: 19px;
	border-radius: 4px; background: #fff; }
.jsm-badge img { width: 13px; height: 13px; object-fit: contain; }
.jsm-rule { display: block; width: 38px; height: 3px; background: var(--jsm); }
.jsm-rule--sm { width: 26px; height: 2px; }

/* 1 — the same card, before and after. A flip says "upgrade" without a caption. */
.bw-flip { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1000px; }
.bw-flip-inner {
	position: relative; width: 208px; height: 132px;
	transform-style: preserve-3d; animation: bwFlip 9s cubic-bezier(.6,.02,.3,1) infinite;
}
.bw-face {
	position: absolute; inset: 0; padding: 16px 18px; border-radius: 9px;
	display: flex; flex-direction: column; align-items: flex-start;
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.bw-face--plain { background: #fff; border: 1px solid #ddd8d2; box-shadow: 0 6px 16px rgba(28,32,36,.10); }
.bw-plain-mark { width: 30px; height: 30px; border-radius: 4px; background: #d9d4cd; }
.bw-plain-name { margin-top: 11px; color: #8d8781; font: 400 15px/1 Arial, Helvetica, sans-serif; }
.bw-plain-line { flex: 0 0 auto; margin-top: 11px; width: 118px; height: 5px; border-radius: 3px; background: #e6e1da; }
.bw-plain-line--mid { width: 92px; margin-top: 7px; }
.bw-plain-line--short { width: 58px; margin-top: 7px; }

.bw-face--brand {
	background: #fff; border: 1px solid rgba(28,95,82,.22);
	box-shadow: 0 10px 26px rgba(28,95,82,.15); transform: rotateY(180deg);
}
.jsm-lockup { display: flex; align-items: center; gap: 9px; }
.jsm-words { display: flex; flex-direction: column; }
.jsm-words b { color: var(--jsm-ink); font: 700 16.5px/1 "Lora", Georgia, serif; letter-spacing: -.028em; white-space: nowrap; }
.jsm-words i { margin-top: 3px; color: var(--jsm); font: italic 500 10.5px/1 "Lora", Georgia, serif; white-space: nowrap; }
.bw-face--brand .jsm-rule { flex: 0 0 auto; margin-top: 13px; }
.jsm-copy { margin: 11px 0 0; }
.jsm-copy b { display: block; color: var(--jsm-ink); font: 600 13px/1.3 "Work Sans", sans-serif; letter-spacing: -.01em; }
.jsm-copy span { display: block; margin-top: 5px; color: #8d8781; font: 500 9px/1 "Work Sans", sans-serif; letter-spacing: .05em; }
@keyframes bwFlip {
	0%, 38%   { transform: rotateY(0deg); }
	50%, 88%  { transform: rotateY(180deg); }
	100%      { transform: rotateY(360deg); }
}

/* 2 — four real surfaces, one identity, shown one at a time so each has room
   to be an actual thing rather than a 70px thumbnail. */
.brand-why-viz--stage { overflow: hidden; display: flex; flex-direction: column; }
.bw-stage { position: relative; flex: 1; min-height: 0; }
.bw-scene {
	position: absolute; inset: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 6px;
	opacity: 0; animation: bwScene 16s ease-in-out infinite;
}
.bw-scene--card    { animation-delay: 0s; }
.bw-scene--site    { animation-delay: 4s; }
.bw-scene--van     { animation-delay: 8s; }
.bw-scene--invoice { animation-delay: 12s; }
/* A key, not a caption: all four words stay put so the row reads as the set of
   surfaces, and only the highlight moves with the carousel above it. */
.bw-key { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 5px;
	padding: 0 10px 11px; }
.bw-key-item { padding: 3px 7px; border-radius: 999px; color: #a29a93;
	font-size: 7.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
	animation: bwKey 16s ease-in-out infinite; }
.bw-key--card    { animation-delay: 0s; }
.bw-key--site    { animation-delay: 4s; }
.bw-key--van     { animation-delay: 8s; }
.bw-key--invoice { animation-delay: 12s; }
@keyframes bwKey {
	0%, 2%, 26%, 100% { color: #a29a93; background: transparent; }
	5%, 22%           { color: var(--plum); background: rgba(92, 36, 65, .10); }
}
@keyframes bwScene {
	0%, 2%    { opacity: 0; transform: translateY(6px); }
	5%, 22%   { opacity: 1; transform: translateY(0); }
	25%, 100% { opacity: 0; transform: translateY(-6px); }
}

.jsm-bcard {
	width: 152px; padding: 14px 15px 15px; background: #fff; border: 1px solid #e3ddd6;
	border-radius: 6px; box-shadow: 0 8px 20px rgba(28,32,36,.12);
	display: flex; flex-direction: column; align-items: flex-start;
}
.jsm-bcard b { margin-top: 10px; color: var(--jsm-ink); font: 700 15px/1 "Lora", Georgia, serif; letter-spacing: -.028em; }
.jsm-bcard i { margin-top: 3px; color: var(--jsm); font: italic 500 9px/1 "Lora", Georgia, serif; }
.jsm-bcard .jsm-rule--sm { margin-top: 10px; }

.jsm-browser { width: 196px; background: #fff; border: 1px solid #e3ddd6; border-radius: 7px; overflow: hidden; box-shadow: 0 8px 20px rgba(28,32,36,.12); }
.jsm-chrome { height: 15px; padding: 0 7px; display: flex; align-items: center; gap: 3px; background: #f1ece6; border-bottom: 1px solid #e6e0d9; }
.jsm-chrome i { width: 4px; height: 4px; border-radius: 50%; background: #d3ccc4; }
.jsm-url { margin-left: 5px; flex: 1; height: 6px; border-radius: 3px; background: #e4ded7; }
.jsm-nav { height: 22px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #efe9e2; }
.jsm-nav em { width: 17px; height: 3px; border-radius: 2px; background: #e0dad2; }
.jsm-nav em:first-of-type { margin-left: auto; }
.jsm-hero { padding: 11px 11px 13px; display: flex; flex-direction: column; align-items: flex-start; }
.jsm-h1 { width: 106px; height: 8px; border-radius: 3px; background: var(--jsm-ink); opacity: .82; }
.jsm-txt { margin-top: 7px; width: 152px; height: 4px; border-radius: 2px; background: #e4ded7; }
.jsm-txt--short { width: 104px; }
.jsm-btn { margin-top: 10px; width: 54px; height: 13px; border-radius: 3px; background: var(--jsm); }

/* the van actually drives: wheels turn, body bobs, road runs underneath.
   It is painted in the brand colour with the mark reversed out, because a
   white van on a cream panel is a blob and the whole point is livery. */
.bw-scene--van { gap: 4px; }
/* Transit-shaped, not limo-shaped: the old body was 196x50, very nearly 4:1,
   which is a stretch limousine. A Transit side profile is about 2.4:1 — a tall
   box, a roof that runs most of the length, then a steeply raked screen onto a
   short stubby nose. */
.jsm-van { position: relative; width: 154px; height: 80px; animation: bwBob 1.1s ease-in-out infinite; }
.jsm-van-body {
	position: absolute; left: 0; top: 0; width: 154px; height: 63px; background: var(--jsm);
	clip-path: polygon(0 7%, 2% 0, 76% 0, 90% 44%, 97% 60%, 100% 70%, 100% 90%, 97% 100%, 3% 100%, 0 90%);
}
.jsm-van-panel { position: absolute; left: 8px; top: 17px; display: flex; align-items: center; gap: 6px; }
.jsm-van-panel b { color: #fff; font: 700 10px/1 "Lora", Georgia, serif; letter-spacing: -.03em; white-space: nowrap; }
/* the glass is a raked trapezoid filling the cab front — skewing a narrow rect
   at the A-pillar's real angle just produces a sliver at this size */
.jsm-van-window { position: absolute; left: 75%; top: 10%; width: 19px; height: 19px;
	background: #c6d3d0; clip-path: polygon(0 0, 45% 0, 100% 100%, 0 100%); }
.jsm-wheel {
	position: absolute; bottom: 0; width: 21px; height: 21px; border-radius: 50%;
	background: #262c2a; box-shadow: inset 0 0 0 4px #39423f;
	animation: bwRoll .55s linear infinite;
}
.jsm-wheel::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
	margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #aeb6b3;
	box-shadow: 0 -6px 0 -3.5px #717a77, 0 6px 0 -3.5px #717a77, -6px 0 0 -3.5px #717a77, 6px 0 0 -3.5px #717a77;
}
.jsm-wheel--rear { left: 17px; }
.jsm-wheel--front { right: 16px; }
.jsm-road { position: relative; width: 168px; height: 2px; background: #ded7cf; border-radius: 2px; overflow: hidden; }
.jsm-road span {
	position: absolute; inset: 0; animation: bwRoad .5s linear infinite;
	background: repeating-linear-gradient(90deg, #b3aaa1 0 14px, transparent 14px 28px);
}
@keyframes bwBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes bwRoll { to { transform: rotate(-360deg); } }
@keyframes bwRoad { to { transform: translateX(-28px); } }

.jsm-invoice {
	width: 152px; padding: 12px 13px 11px; background: #fff; border: 1px solid #e3ddd6;
	border-radius: 5px; box-shadow: 0 8px 20px rgba(28,32,36,.12);
	display: flex; flex-direction: column; align-items: flex-start;
}
.jsm-inv-head { width: 100%; display: flex; align-items: center; gap: 7px; padding-bottom: 9px; border-bottom: 1px solid #efe9e2; }
.jsm-inv-head b { color: var(--jsm-ink); font: 700 11px/1 "Lora", Georgia, serif; letter-spacing: -.02em; }
.jsm-invoice .jsm-txt { width: 126px; }
.jsm-invoice .jsm-txt:first-of-type { margin-top: 10px; }
.jsm-inv-total { width: 100%; margin-top: 11px; padding-top: 8px; border-top: 1.5px solid var(--jsm); display: flex; align-items: baseline; justify-content: space-between; }
.jsm-inv-total span { color: #8b938f; font: 800 7px/1 "Work Sans", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.jsm-inv-total b { color: var(--jsm); font: 700 15px/1 "Lora", Georgia, serif; letter-spacing: -.02em; }

/* 3 — trends come and go around a mark that does not move. */
.brand-why-viz--years { display: grid; place-items: center; }
.bw-steady { position: relative; z-index: 2; width: 66px; height: 66px; object-fit: contain; margin-bottom: 16px; }
.bw-trend { position: absolute; z-index: 1; border-radius: 50%; opacity: 0; animation: bwTrend 7.5s ease-in-out infinite; }
.bw-trend--1 { width: 52px; height: 52px; left: 15%; top: 19%; background: linear-gradient(135deg, #ff7a59, #ffd166); animation-delay: 0s; }
.bw-trend--2 { width: 40px; height: 40px; right: 15%; top: 24%; border-radius: 6px; background: linear-gradient(135deg, #4cc9f0, #4361ee); animation-delay: 2.5s; }
.bw-trend--3 { width: 46px; height: 46px; right: 11%; bottom: 24%; background: linear-gradient(135deg, #b5179e, #f72585); animation-delay: 5s; }
@keyframes bwTrend {
	0%        { opacity: 0; transform: scale(.7) translateY(6px); }
	14%, 24%  { opacity: .42; transform: scale(1) translateY(0); }
	40%, 100% { opacity: 0; transform: scale(1.18) translateY(-8px); }
}
.bw-years { position: absolute; left: 0; right: 0; bottom: 16px; height: 16px; overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
	mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.bw-years-track { display: flex; gap: 20px; width: max-content; padding-left: 26px; animation: bwYears 16s linear infinite; }
.bw-years-track span { color: #a49d96; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
@keyframes bwYears { to { transform: translateX(-50%); } }

@media (max-width: 900px) {
	.brand-why { grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin-inline: auto; }
	.brand-why-viz { height: 164px; }
	.brand-why-body { padding: 20px 22px 22px; }
	.brand-why-body h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
	.bw-flip-inner { animation: none; transform: rotateY(180deg); }
	.bw-scene { animation: none; opacity: 0; }
	.bw-scene--van { opacity: 1; }
	.jsm-van, .jsm-wheel, .jsm-road span { animation: none; }
	.bw-trend { animation: none; opacity: .22; }
	.bw-years-track { animation: none; }
}
.identity-kb-swatches { position: absolute; z-index: 3; left: 35px; bottom: 82px; display: flex; gap: 6px; }
.identity-kb-swatches i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(236,234,230,.55); }
.identity-kb-swatches i:nth-child(1) { background: #1e2529; }
.identity-kb-swatches i:nth-child(2) { background: #f0a500; }
.identity-kb-swatches i:nth-child(3) { background: #58646b; }
.identity-kb-swatches i:nth-child(4) { background: #eceae6; }

.identity-aldwick-swatches { position: absolute; z-index: 3; right: 34px; top: 32px; display: flex; gap: 6px; }
.identity-aldwick-swatches i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(201,185,154,.7); }
.identity-aldwick-swatches i:nth-child(1) { background: #14271d; }
.identity-aldwick-swatches i:nth-child(2) { background: #2e4f3a; }
.identity-aldwick-swatches i:nth-child(3) { background: #c9b99a; }
.identity-aldwick-swatches i:nth-child(4) { background: #f0ead8; }

/* Turner Bros — a clean, site-ready specification board around Ashley's own
   lockup. The monochrome system keeps the TB mark primary and suits a skilled
   trade without pretending it needs an invented lifestyle aesthetic. */
/* Ebbwell — chalk ground, a course of level-yellow bricks along the top, the lockup laid across it. */
.identity-showcase-art--ebbwell { background: #e9ece8; color: #1d2126; }
.identity-showcase-art--ebbwell::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: repeating-linear-gradient(90deg, #f2be22 0 36px, transparent 36px 41px); }
.identity-ebb-logo { position: absolute; z-index: 1; left: 10%; top: 44%; width: 80%; height: auto; transform: translateY(-50%); }
.identity-ebb-foot { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.identity-ebb-spec { color: #535c67; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.identity-ebb-swatches { display: flex; gap: 6px; }
.identity-ebb-swatches i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(29,33,38,.15); }
.identity-ebb-swatches i:nth-child(1) { background: #1d2126; }
.identity-ebb-swatches i:nth-child(2) { background: #f2be22; }
.identity-ebb-swatches i:nth-child(3) { background: #9e4a2f; }
.identity-ebb-swatches i:nth-child(4) { background: #e9ece8; }
.identity-showcase-art--turner { background: #fff; color: #242021; }
.identity-showcase-art--turner::before { content: ""; position: absolute; inset: 17px; border: 1px solid rgba(36,32,33,.14); pointer-events: none; }
.identity-showcase-art--turner::after { content: ""; position: absolute; z-index: 1; right: 28px; top: 30px; width: 78px; height: 4px; background: #242021; opacity: .17; }
.identity-turner-rule { position: absolute; z-index: 1; left: 30px; top: 30px; width: 34px; height: 4px; background: #242021; }
.identity-turner-logo { position: absolute; z-index: 2; left: 9%; top: 47%; width: 82%; height: 48%; object-fit: contain; transform: translateY(-50%); mix-blend-mode: multiply; }
/* The spec line and the swatches share one baseline, so they run as a single
   flex row rather than two absolutely-placed items that collide once the card
   narrows on mobile. */
.identity-turner-foot { position: absolute; z-index: 2; left: 31px; right: 29px; bottom: 25px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.identity-turner-spec { min-width: 0; color: #5d595a; font-family: Arial, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.identity-turner-swatches { flex: none; display: flex; gap: 5px; }
.identity-turner-swatches i { width: 12px; height: 12px; border: 1px solid rgba(36,32,33,.12); background: #242021; }
.identity-turner-swatches i:nth-child(2) { background: #000; }
.identity-turner-swatches i:nth-child(3) { background: #6b6869; }
.identity-turner-swatches i:nth-child(4) { background: #f2f1ef; }
@media (max-width: 640px) {
  .identity-turner-foot { left: 22px; right: 20px; bottom: 20px; gap: 8px; }
  .identity-turner-spec { font-size: 7px; letter-spacing: .1em; }
  .identity-turner-swatches i { width: 10px; height: 10px; }
}

/* Prime Wills — a real client identity, so the wordmark and the line are
   rendered assets rather than live type: the brand is set in Poppins and this
   theme only loads Work Sans and Lora, which is exactly how a logo ends up
   quietly reset in the wrong typeface. Paper above, ink below, mirroring the
   business card the identity is actually built around. */
.identity-showcase-art--primewills { background: linear-gradient(168deg, #FFFFFF 0%, #FBFAF5 52%, #F2F1E8 100%); }
.identity-pw-bleed { position: absolute; z-index: 1; right: -62px; top: -78px; width: auto; height: 292px; opacity: .15; transform: rotate(13deg); }
.identity-pw-lockup { position: absolute; z-index: 3; left: 32px; top: 16px; width: 206px; height: auto; }
.identity-pw-swatches { position: absolute; z-index: 4; right: 26px; top: 24px; display: flex; gap: 5px; }
.identity-pw-swatches i { width: 8px; height: 8px; display: block; border-radius: 50%; box-shadow: 0 0 0 1px rgba(16,19,12,.14); }
.identity-pw-swatches i:nth-child(1) { background: #10130C; }
.identity-pw-swatches i:nth-child(2) { background: #89BC3F; }
.identity-pw-swatches i:nth-child(3) { background: #CED743; }
.identity-pw-swatches i:nth-child(4) { background: #F2F1E8; }
/* The document itself, not a price. Every other card shows what the business
   hands over; for a will-writing practice that is the will. */
.identity-pw-doc { position: absolute; z-index: 4; left: 36px; top: 110px; width: 168px; padding: 13px 15px 13px; background: #fff; border: 1px solid #E4E2D6; border-radius: 3px; box-shadow: 0 12px 26px rgba(16,19,12,.13); transform: rotate(-2.2deg); }
.identity-pw-doc::before { content: ""; position: absolute; left: 15px; right: 15px; top: 0; height: 3px; background: linear-gradient(90deg, #62923A, #89BC3F 55%, #CED743); }
.identity-pw-doc b { display: block; color: #10130C; font-size: 8.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.identity-pw-doc span { display: block; margin-top: 4px; color: #6F7565; font-size: 7.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.identity-pw-doc i { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: #E8E6DA; }
.identity-pw-doc i:nth-of-type(2) { width: 82%; }
.identity-pw-doc i:nth-of-type(3) { display: none; }
.identity-pw-swatches i { width: 12px; height: 12px; }
.identity-pw-band { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 108px; background: #10130C; display: flex; align-items: center; padding: 0 32px; overflow: hidden; }
.identity-pw-band::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #62923A, #89BC3F 55%, #CED743); }
/* The mark bleeds off the dark side, exactly as it does on the back of the
   business card this band is lifted from. */
.identity-pw-band::after { content: ""; position: absolute; right: -34px; bottom: -66px; width: 152px; height: 226px; background: url("img/primewills-mark.svg") no-repeat center / contain; opacity: .26; transform: rotate(-9deg); }
.identity-pw-band img { position: relative; z-index: 1; width: 215px; height: auto; }

@media (max-width: 720px) {
	.identity-pw-lockup { left: 24px; top: 14px; width: 180px; }
	.identity-pw-doc { left: 26px; top: 96px; width: 150px; }
	.identity-pw-swatches { right: 20px; top: 20px; }
	.identity-pw-bleed { height: 262px; right: -66px; top: -74px; }
	.identity-pw-band { height: 100px; padding: 0 24px; }
	.identity-pw-band img { width: 186px; }
}

@media (max-width: 720px) {
	.identity-carousel .work-track { gap: 12px; padding-inline: 3px; }
	.identity-carousel .identity-showcase-card { flex-basis: min(88vw, 382px); border-radius: 15px; }
	.identity-showcase-art { height: 260px; min-height: 260px; }
	.identity-showcase-caption { min-height: 74px; padding: 14px 16px; }
	.identity-carousel .identity-showcase-name { font-size: 22px; }

	.identity-showcase-card--mere .branding-mere-lockup { left: 22px; top: 22px; transform: scale(1.35); }
	.identity-showcase-card--mere .branding-mere-book { left: 23px; bottom: 25px; transform: scale(1.28) rotate(-1deg); }
	.identity-showcase-card--mere .branding-mere-plan { right: 24px; bottom: 24px; transform: scale(1.28) rotate(2.2deg); }
	.identity-showcase-card--mere .branding-mere-swatches { right: 30px; top: 78px; transform: scale(1.2); }

	.identity-showcase-card--ternwell .branding-tern-lockup { left: 27px; top: 23px; width: 98px; transform: scale(1.38); }
	.identity-showcase-card--ternwell .branding-tern-seal,
	.identity-showcase-card--ternwell .branding-tern-seal .branding-mark { width: 38px; height: 38px; }
	.identity-showcase-card--ternwell .branding-tern-lockup strong { font-size: 15px; }
	.identity-showcase-card--ternwell .branding-tern-lockup small { font-size: 4.8px; }
	.identity-showcase-card--ternwell .branding-tern-ticket { right: 28px; bottom: 32px; width: 116px; transform: scale(1.3); }
	.identity-showcase-card--ternwell .branding-tern-swatches { right: 22px; top: 21px; transform: scale(1.2); }

	.identity-showcase-card--cinder .branding-cinder-lockup { left: 23px; top: 23px; gap: 9px; transform: scale(1.34); }
	.identity-showcase-card--cinder .branding-cinder-seal,
	.identity-showcase-card--cinder .branding-cinder-seal .branding-mark { width: 45px; height: 45px; }
	.identity-showcase-card--cinder .branding-cinder-lockup strong { font-size: 16px; }
	.identity-showcase-card--cinder .branding-cinder-lockup small { font-size: 4.8px; }
	.identity-showcase-card--cinder .branding-cinder-wrap { left: 25px; bottom: 28px; width: 82px; height: 57px; transform: scale(1.28) rotate(-2deg); }
	.identity-showcase-card--cinder .branding-cinder-sticker { right: 28px; bottom: 27px; width: 55px; height: 55px; transform: scale(1.28) rotate(8deg); }
	.identity-showcase-card--cinder .branding-cinder-swatches { right: 22px; top: 21px; transform: scale(1.2); }

	.identity-showcase-card--still .branding-still-lockup { left: 24px; top: 24px; gap: 9px; transform: scale(1.34); }
	.identity-showcase-card--still .branding-still-word { font-size: 25px; }
	.identity-showcase-card--still .branding-still-lockup small { min-width: 32px; padding: 5px 6px; font-size: 5px; }
	.identity-showcase-card--still .branding-still-pass { left: 25px; bottom: 29px; width: 112px; height: 59px; transform: scale(1.27); }
	.identity-showcase-card--still .branding-still-class { right: 27px; bottom: 27px; width: 77px; height: 60px; transform: scale(1.27) rotate(2deg); }
	.identity-showcase-card--still .branding-still-swatches { right: 22px; top: 21px; transform: scale(1.2); }

	.identity-ashburn-lockup { left: 25px; top: 70px; gap: 15px; }
	.identity-ashburn-lockup img { width: 67px; height: 67px; }
	.identity-ashburn-lockup strong { font-size: 25px; }
	.identity-ashburn-lockup span { font-size: 8px; }
	.identity-ashburn-rule { left: 25px; top: 24px; font-size: 8px; }
	.identity-ashburn-spec { left: 25px; right: 25px; bottom: 23px; }
	.identity-ashburn-swatches { right: 26px; bottom: 45px; }

	.identity-aldwick-lockup { inset: 26px 25px 44px; gap: 13px; }
	.identity-aldwick-lockup img { width: 118px; height: 118px; }
	.identity-aldwick-lockup strong { font-size: 27px; }
	.identity-aldwick-lockup span { font-size: 7px; }
	.identity-kb-lockup { left: 27px; top: 48px; gap: 13px; }
	.identity-kb-lockup img { width: 75px; height: 75px; }
	.identity-kb-lockup strong { font-size: 21px; }
	.identity-kb-lockup span { font-size: 10px; }
	.identity-kb-bar { left: 27px; right: 27px; bottom: 29px; }
}

@media (prefers-reduced-motion: reduce) {
	.identity-carousel .identity-showcase-card { transition: none; }
}

/* ============================================================
   Header navigation shell — 2026-09-22
   Keep the card mega menus intact; group their triggers, separate
   studio links, and align the portal action on one 56px rhythm.
   ============================================================ */
.header-inner,
.aud-bar-inner {
	width: calc(100% - 48px);
	max-width: 1340px;
}
.nav-list--business { gap: 0; }
.nav-list--business.nav-list--hairlines > li::before { display: none; }
.nav-service-item {
	display: flex;
	align-items: center;
	height: 56px;
	background: rgba(255,255,255,.035);
	border-top: 1px solid rgba(255,255,255,.13);
	border-bottom: 1px solid rgba(255,255,255,.13);
}
.nav-service-first {
	border-left: 1px solid rgba(255,255,255,.13);
	border-radius: 9px 0 0 9px;
	padding-left: 8px;
}
.nav-service-item:not(.nav-service-first) { border-left: 1px solid rgba(255,255,255,.08); }
.nav-service-last {
	border-right: 1px solid rgba(255,255,255,.13);
	border-radius: 0 9px 9px 0;
	padding-right: 6px;
}
.nav-services-label {
	align-self: stretch;
	display: flex;
	align-items: center;
	padding: 0 11px 0 6px;
	margin-right: 3px;
	border-right: 1px solid rgba(255,255,255,.14);
	color: #cbbfb5;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
}
.nav-service-item .nav-drop-toggle {
	height: 44px;
	padding: 0 11px;
	border-radius: 5px;
	font-size: 13.5px;
}
.nav-service-item .nav-drop-toggle:hover,
.nav-service-item.open .nav-drop-toggle { background: rgba(255,255,255,.09); }
.has-dropdown.is-escape-closed .dropdown {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
	transform: translateY(-8px) !important;
	transition: none !important;
}
.nav-studio-start,
.nav-studio-end {
	display: flex;
	align-items: center;
	height: 56px;
	background: rgba(255,255,255,.035);
	border-top: 1px solid rgba(255,255,255,.13);
	border-bottom: 1px solid rgba(255,255,255,.13);
}
.nav-studio-start {
	margin-left: 8px;
	padding-left: 6px;
	border-left: 1px solid rgba(255,255,255,.13);
	border-radius: 9px 0 0 9px;
}
.nav-studio-end {
	padding-right: 6px;
	border-right: 1px solid rgba(255,255,255,.13);
	border-radius: 0 9px 9px 0;
}
.nav-studio-link {
	height: 44px;
	padding: 0 10px;
	border-radius: 5px;
}
.nav-studio-link:hover { background: rgba(255,255,255,.09); }
.nav-portal-li {
	display: flex;
	align-items: stretch;
	height: 56px;
	margin-left: 8px;
}
.nav-portal {
	display: flex;
	align-items: center;
	height: 56px;
	min-height: 56px;
	padding: 0 16px;
}
.nav-toggle { width: 48px; height: 48px; }

@media (max-width: 1180px) {
	.header-inner { height: 100px; }
	.logo { gap: 12px; margin-right: 0; }
	.logo .as-mark { width: 40px; height: auto; }
	.logo-word { font-size: 22px; }
	.logo-strapline { display: block; font-size: 14px; }
}

@media (max-width: 620px) {
	.header-inner,
	.aud-bar-inner { width: calc(100% - 32px); }
}

/* ============================================================
   Header nav v5 (2026-09-26): folder tabs. Ashley picked idea C of
   six mockups (email-preview/menu-ideas/), "a little bigger", with
   Blog and About standing out more. Two earlier passes the same day
   were rejected: a restyle with a round gliding pill, a notch and a
   pill Sign in; then the boxed shell above spaced out with a sliding
   hover fill.
   Design · Support · Systems are tabs standing on the header's bottom
   edge, centred between the logo and the links. The open tab turns
   white and runs straight into its panel: the panel drops its top
   border, its top corners and its slide-in, and two concave corners
   join the tab's foot to it. Every tab sits over the panel's white
   middle column at every desktop width, so the whites always meet.
   Desktop and business audience only. The For Home menu and the
   drawer below 1181px are unchanged, and 1180 must match js/nav.js.
   ============================================================ */
@media (min-width: 1181px) {
	.site-nav:has(> .nav-list--business) {
		flex: 1 1 auto;
		align-self: stretch;
		margin: 0 0 -1px 24px; /* the open tab covers the header's bottom rule */
	}
	.nav-list--business { height: 100%; align-items: center; gap: 0; }

	/* Tabs */
	.nav-list--business > .nav-service-item {
		align-self: flex-end;
		display: block;
		height: auto;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.nav-list--business > .nav-service-first { margin-left: auto; }
	/* The gap is exactly one concave corner wide, so an open tab's corner
	   never paints over its neighbour. */
	.nav-list--business > .nav-service-item + .nav-service-item { margin-left: 16px; }
	.nav-list--business .nav-service-item .nav-drop-toggle {
		position: relative;
		display: flex;
		align-items: center;
		gap: 11px;
		height: 64px;
		padding: 0 40px;
		border-radius: 16px 16px 0 0;
		background: rgba(255,255,255,.055);
		color: rgba(247,245,241,.88);
		font-size: 17px;
		font-weight: 600;
		transition: background-color .18s ease, color .18s ease;
	}
	.nav-list--business .nav-service-item .nav-drop-toggle:hover { background: rgba(255,255,255,.1); color: #fff; }
	.nav-list--business .nav-service-item .caret { width: 11px; height: auto; opacity: .55; }
	.nav-list--business .nav-service-item .nav-drop-toggle::before,
	.nav-list--business .nav-service-item .nav-drop-toggle::after {
		content: '';
		position: absolute;
		bottom: 0;
		width: 16px;
		height: 16px;
		opacity: 0;
		pointer-events: none;
	}
	.nav-list--business .nav-service-item .nav-drop-toggle::before { left: -16px; background: radial-gradient(circle at 0 0, transparent 15.5px, #fff 16px); }
	.nav-list--business .nav-service-item .nav-drop-toggle::after { right: -16px; background: radial-gradient(circle at 100% 0, transparent 15.5px, #fff 16px); }
	/* Open (by hover, click, or Enter/Space on the trigger), unless Escape
	   closed it. Focus alone no longer opens it (2026-09-26). The tab sits
	   above the panel so the panel's shadow never greys its foot. */
	.nav-list--business .nav-service-item.open:not(.is-escape-closed) > .nav-drop-toggle {
		z-index: 70;
		background: #fff;
		color: var(--ink);
	}
	.nav-list--business .nav-service-item.open:not(.is-escape-closed) > .nav-drop-toggle::before,
	.nav-list--business .nav-service-item.open:not(.is-escape-closed) > .nav-drop-toggle::after { opacity: 1; }
	.nav-list--business .nav-service-item.open:not(.is-escape-closed) .caret { opacity: .8; }
	.nav-list--business .dropdown {
		border-top-color: transparent;
		border-radius: 0 0 6px 6px;
		transform: translateX(-50%);
		transition: opacity .14s ease, visibility .14s ease;
	}
	.nav-list--business .has-dropdown::after { left: 0; right: 0; height: 12px; }

	/* Blog, About and Sign in (2026-09-26, mockup B of
	   email-preview/header-tabs/): the same folder tabs, with smaller type
	   than the three service tabs so those stay the main menu. Since
	   2026-10-10 (6B of email-preview/nav-pricecard/) they share the 64px
	   height, so all six labels sit on one line. */
	.nav-list--business > .nav-studio-start,
	.nav-list--business > .nav-studio-end,
	.nav-list--business > .nav-portal-li {
		align-self: flex-end;
		height: auto;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		border-radius: 0;
	}
	.nav-list--business > li::before { display: none; }
	.nav-list--business > .nav-studio-start { margin-left: auto; }
	.nav-list--business > .nav-studio-end,
	.nav-list--business > .nav-portal-li { margin-left: 10px; }
	.nav-list--business .nav-studio-link {
		display: flex;
		align-items: center;
		height: 64px;
		padding: 0 22px;
		border-radius: 16px 16px 0 0;
		background: rgba(255,255,255,.055);
		color: rgba(247,245,241,.88);
		font-size: 15.5px;
		font-weight: 600;
		transition: background-color .18s ease, color .18s ease;
	}
	.nav-list--business .nav-studio-link:hover { background: rgba(255,255,255,.1); color: #fff; }
	/* The section the current page sits in (header.php adds .is-section). */
	.nav-list--business .nav-service-item.is-section > .nav-drop-toggle { box-shadow: inset 0 3px 0 var(--blush); background: rgba(255,255,255,.1); color: #fff; }
	.nav-list--business .nav-studio-link.is-active { box-shadow: inset 0 3px 0 var(--blush); border-radius: 16px 16px 0 0; background: rgba(255,255,255,.1); color: #fff; }
	.nav-list--business .nav-portal {
		gap: 9px;
		height: 64px;
		min-height: 0;
		padding: 0 22px;
		border: 0;
		border-radius: 16px 16px 0 0;
		font-size: 15px;
		font-weight: 700;
	}
	.nav-list--business .nav-portal svg { width: 14px; height: 14px; }
}
/* Short screens (200% zoom on a big monitor): the header drops to 60px. */
@media (min-width: 1181px) and (max-height: 500px) {
	.nav-list--business .nav-service-item .nav-drop-toggle { height: 44px; padding: 0 24px; font-size: 15px; }
	.nav-list--business .nav-studio-link,
	.nav-list--business .nav-portal { height: 38px; min-height: 38px; }
}

/* For Home: "scary pop-up" steps (2026-09-23). */
.as-scam-steps { margin: 0 0 16px; padding-left: 22px; }
.as-scam-steps li { margin: 10px 0; line-height: 1.55; }

/* First-aid box (2026-09-23): /for-home/, /it-support/, /cyber-security/. */
.as-firstaid { padding: 40px 24px; }
.as-firstaid-inner { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-left: 5px solid var(--plum); border-radius: var(--radius); padding: 28px 30px; box-shadow: 0 1px 2px rgba(28,32,36,.04); }
.as-firstaid-inner h2 { margin: 4px 0 10px; }
.as-firstaid-steps { margin: 14px 0 16px; padding-left: 22px; }
.as-firstaid-steps li { margin: 10px 0; line-height: 1.55; }
.as-firstaid-steps a, .as-firstaid-foot a { color: var(--plum); font-weight: 600; white-space: nowrap; }
.as-firstaid-foot { margin: 0; font-size: 14.5px; color: var(--muted); }
@media (max-width: 600px) { .as-firstaid { padding: 28px 16px; } .as-firstaid-inner { padding: 22px 18px; } }

/* Client logo strip (2026-09-23): homepage + /about/. Greyscale until hover;
   the ghost slots are neutral placeholders until more clients are named. */
.as-clients { padding: 34px 0 30px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.as-clients-inner .eyebrow { text-align: center; margin: 0 0 18px; }
/* Credentials under the logos on the home page ([as_client_strip credentials="1"]). */
.as-creds { list-style: none; margin: 24px auto 0; padding: 18px 0 0; max-width: 980px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; font-size: 13.5px; color: var(--muted); }
.as-creds li { display: inline-flex; align-items: center; gap: 8px; }
.as-creds svg { width: 18px; height: 18px; flex: none; color: var(--plum); }
.as-creds b { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) { .as-creds { gap: 10px 20px; font-size: 13px; } .as-creds span { display: none; } }
.as-clients-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 44px; }
.as-client { display: flex; align-items: center; justify-content: center; height: 64px; }
.as-client img { display: block; height: 44px; width: auto; max-width: 190px; object-fit: contain; filter: grayscale(1); opacity: .72; transition: filter .2s, opacity .2s; }
.as-client:hover img, .as-client:focus-within img { filter: none; opacity: 1; }
.as-client--ghost { width: 132px; gap: 9px; opacity: .55; }
.as-client--ghost span:first-child { width: 30px; height: 30px; border-radius: 50%; background: #E4DFD8; flex: 0 0 auto; }
.as-client--ghost span:last-child { width: 88px; height: 12px; border-radius: 6px; background: #E4DFD8; }
/* MEP's letters fill its whole box, so it sits a little smaller to match the others' weight. */
.as-client img[src*="/clients/mep"] { height: 36px; }
@media (max-width: 600px) { .as-client img[src*="/clients/mep"] { height: 29px; } }
@media (max-width: 600px) { .as-client--ghost:nth-child(n+5) { display: none; } .as-clients-row { gap: 16px 28px; } .as-client img { height: 36px; } .as-client--ghost { width: 104px; } .as-client--ghost span:last-child { width: 64px; } }
/* Slow scrolling logo band (2026-09-26). The row is printed twice and the
   track slides left by exactly one copy, so the loop has no seam; each copy
   carries a trailing gap the width of the gap between logos. Pauses under the
   pointer. It scrolls for everyone, reduced-motion preference included
   (Ashley, 2026-09-27: the logos are meant to move). */
.as-clients-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.as-clients-track { display: flex; width: max-content; animation: asMarquee 60s linear infinite; }
.as-clients-marquee .as-clients-row { flex-wrap: nowrap; justify-content: flex-start; padding-right: 44px; }
.as-clients-marquee:hover .as-clients-track, .as-clients-marquee:focus-within .as-clients-track { animation-play-state: paused; }
@keyframes asMarquee { to { transform: translateX(-50%); } }
@media (max-width: 600px) { .as-clients-marquee .as-clients-row { padding-right: 28px; } .as-clients-track { animation-duration: 38s; } }

/* ── Mega menu v3 (2026-09-23) ────────────────────────────────
   Design · Support · Systems, each one panel: side tabs | cards | rail.
   Prices are a quiet plum line inside the card (no pills over artwork).
   Cards are lighter than the 2026-09-12 set: no hard border, a soft
   shadow, more air between and inside them. Breakpoint 1180px matches
   js/nav.js; below it the side tabs become group headings in the drawer. */
.dropdown--cards:has(.mm-panel--v3) { width: min(1160px, calc(100vw - 32px)); }
.mm-panel--v3 { grid-template-columns: 240px minmax(0, 1fr) 264px; min-height: 0; }
.mm-side { background: var(--paper); border-right: 1px solid var(--border); padding: 22px 14px 20px; display: flex; flex-direction: column; gap: 18px; }
.mm-side-head { margin: 0 8px; font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1.15; color: var(--ink); }
.mm-side-head small { display: block; margin-top: 5px; font-style: italic; font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--plum); }
.mm-side-tabs { display: flex; flex-direction: column; gap: 4px; }
.mm-side-tab { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-radius: 10px; background: none; font: inherit; font-weight: 600; font-size: 14.5px; color: var(--ink); cursor: pointer; transition: background .15s, color .15s; }
.mm-side-tab span { font-size: 11.5px; font-weight: 600; color: var(--muted); background: rgba(28,32,36,.06); border-radius: 999px; padding: 1px 8px; }
.mm-side-tab:hover { background: rgba(255,255,255,.75); }
.mm-side-tab.is-on { background: #fff; color: var(--plum); box-shadow: inset 3px 0 0 var(--plum), 0 1px 4px rgba(28,32,36,.08); }
.mm-side-tab.is-on span { background: var(--blush); color: var(--plum); }
.mm-side-tab:focus-visible { outline: 2px solid var(--plum); outline-offset: 1px; }
.mm-panes { min-width: 0; display: flex; }
.mm-pane { display: none; width: 100%; }
.mm-pane.is-on { display: flex; flex-direction: column; }
.mm-pane-head { margin: 0; padding: 24px 26px 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mm-panel--v3 .mm-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-content: start; padding: 14px 26px 26px; }
.mm-panel--v3 .mm-card { border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(28,32,36,.07), 0 2px 8px rgba(28,32,36,.06); transition: box-shadow .18s, transform .18s; }
.mm-panel--v3 .mm-card:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(92,36,65,.18), 0 12px 28px rgba(28,32,36,.14); }
.mm-panel--v3 .mm-media { max-height: 104px; }
.mm-panel--v3 .mm-media:has(.mm-tile) .mm-tile { padding-top: 0; }
.mm-panel--v3 .mm-tile img { width: 60px; height: 60px; }
.mm-panel--v3 .mm-body { padding: 13px 14px 15px; }
.mm-panel--v3 .mm-body strong { font-size: 14px; }
.mm-panel--v3 .mm-body small { margin-top: 3px; font-size: 12px; }
.mm-price { display: block; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--plum); }
.mm-panel--v3 .mm-rail { padding: 22px 20px; }
.mm-panel--v3 .mm-rail-links { gap: 10px; margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) { .mm-panel--v3 .mm-card, .mm-panel--v3 .mm-card:hover { transition: none; transform: none; } }
/* Three across (2026-09-26). Selling got its own side tab, so no tab holds
   more than three cards and the grid is fixed at three: cards grew from
   ~137px to ~190px wide and keep that size as you move between tabs (a
   two-card tab leaves the third column empty rather than stretching). The
   price sits on the card's bottom edge, level across the row. Desktop only;
   the drawer keeps its rows. */
@media (min-width: 1181px) {
	.mm-panel--v3 .mm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.mm-panel--v3 .mm-card { border-radius: 12px; }
	.mm-panel--v3 .mm-media { aspect-ratio: 16/10; max-height: none; }
	.mm-panel--v3 .mm-tile img { width: 64px; height: 64px; }
	/* Card art (img/menu/art-*.svg) is drawn at the tile's own 16:10, so it
	   fills the tile edge to edge; the blush behind it is the tile's. */
	.mm-panel--v3 .mm-tile--art img { width: 100%; height: 100%; object-fit: contain; }
	.mm-panel--v3 .mm-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; }
	.mm-panel--v3 .mm-body strong { font-size: 15px; }
	.mm-panel--v3 .mm-body small { margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
	.mm-panel--v3 .mm-price { margin-top: auto; padding-top: 12px; font-size: 13px; }
}

/* ============================================================
   Blog — index, topic archives and articles
   ============================================================ */
.as-blog-hero {
	position: relative; overflow: hidden; padding: clamp(58px, 8vw, 94px) 0;
	background: var(--ink); color: #fff;
}
.as-blog-hero::after {
	content: ""; position: absolute; inset: 0 0 0 auto; width: 46%; opacity: .13;
	background: repeating-linear-gradient(135deg, transparent 0 28px, var(--stone) 29px 30px);
}
.as-blog-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.as-blog-hero .eyebrow { color: var(--stone); }
.as-blog-hero h1 { max-width: 820px; color: #fff; font-size: clamp(38px, 6.2vw, 70px); }
.as-blog-hero .lead { max-width: 690px; margin: 18px 0 0; color: rgba(255,255,255,.76); }
.as-blog-hero-mark { flex: 0 0 auto; font-family: "Lora", Georgia, serif; font-size: clamp(58px, 8vw, 104px); font-weight: 700; line-height: 1; color: rgba(255,255,255,.08); letter-spacing: -.08em; }
.as-blog-hero-mark span { color: var(--stone); }

.as-blog-filters { background: #fff; border-bottom: 1px solid var(--border); }
.as-blog-filters .container { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding-top: 13px; padding-bottom: 13px; scrollbar-width: none; }
.as-blog-filters .container::-webkit-scrollbar { display: none; }
.as-blog-filters a { flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 600; }
.as-blog-filters a:hover { background: var(--paper); color: var(--plum); text-decoration: none; }
.as-blog-filters a.is-current { background: var(--plum); color: #fff; }

.as-blog-listing { background: var(--paper); }
.as-blog-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.as-blog-card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 310px; overflow: hidden; background: #fff; border: 1px solid rgba(28,32,36,.08); border-radius: 16px; box-shadow: 0 5px 22px rgba(28,32,36,.07); transition: transform .18s ease, box-shadow .18s ease; }
.as-blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(28,32,36,.12); }
.as-blog-card-hit { position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.as-blog-card-hit:focus-visible { outline: 3px solid var(--plum); outline-offset: -4px; }
.as-blog-card-top { position: relative; display: flex; align-items: flex-end; padding: 20px 18px; overflow: hidden; background: var(--plum); }
.as-blog-card-top::before, .as-blog-card-top::after { content: ""; position: absolute; width: 120px; height: 120px; border: 1px solid rgba(255,255,255,.18); transform: rotate(45deg); }
.as-blog-card-top::before { top: -52px; left: -48px; }
.as-blog-card-top::after { right: -78px; bottom: 26px; }
.as-blog-card-top span { position: relative; z-index: 1; font-family: "Lora", Georgia, serif; font-size: 62px; font-weight: 700; line-height: .9; color: rgba(255,255,255,.88); }
.as-blog-card--support .as-blog-card-top { background: #293238; }
.as-blog-card--systems .as-blog-card-top { background: #756657; }
.as-blog-card-body { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 34px); }
.as-blog-meta { display: flex; flex-wrap: wrap; gap: 5px 13px; margin: 0 0 17px; color: var(--stone-ink); font-size: 12.5px; font-weight: 600; }
.as-blog-meta span + span::before { content: "·"; margin-right: 13px; color: var(--border); }
.as-blog-card h2 { margin-bottom: 12px; font-size: clamp(23px, 2.2vw, 30px); }
.as-blog-card h2 a { color: var(--ink); }
.as-blog-card .wp-block-post-excerpt, .as-blog-card-body > p:not([class]) { color: var(--muted); }
.as-blog-card-body > p:not([class]) { margin-bottom: 22px; }
.as-blog-read { margin-top: auto; color: var(--plum); font-size: 14px; font-weight: 700; }
.as-blog-empty { max-width: 680px; padding: 34px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.as-blog-listing .navigation.pagination { margin-top: 42px; }
.as-blog-listing .nav-links { display: flex; justify-content: center; gap: 8px; }
.as-blog-listing .page-numbers { padding: 8px 13px; border-radius: 8px; background: #fff; border: 1px solid var(--border); font-size: 14px; font-weight: 600; }
.as-blog-listing .page-numbers.current { background: var(--plum); color: #fff; border-color: var(--plum); }

.as-article-hero { padding: clamp(46px, 7vw, 82px) 0 clamp(50px, 7vw, 88px); background: var(--ink); color: #fff; }
.as-article-hero-inner { max-width: 920px; }
.as-article-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 34px; color: var(--stone); font-size: 14px; font-weight: 600; }
.as-article-back:hover { color: #fff; }
.as-article-topic { margin: 0 0 12px; }
.as-article-topic a { color: var(--stone); font-size: 13px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.as-article-hero h1 { max-width: 870px; color: #fff; font-size: clamp(38px, 6vw, 66px); }
.as-article-deck { max-width: 760px; margin: 20px 0 0; color: rgba(255,255,255,.78); font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; }
.as-article-meta { display: flex; align-items: center; gap: 10px; margin: 24px 0 0; color: rgba(255,255,255,.58); font-size: 13px; font-weight: 600; }
.as-article-shell { max-width: 920px; }
.as-article-content { margin: clamp(42px, 6vw, 72px) 0; font-size: 18px; line-height: 1.76; }
.as-article-content > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.as-article-content > h2 { margin-top: 2.15em; margin-bottom: .62em; font-size: clamp(28px, 4vw, 38px); }
.as-article-content > h3 { margin-top: 1.8em; margin-bottom: .45em; font-size: clamp(21px, 3vw, 25px); }
.as-article-content p { margin-bottom: 1.25em; }
.as-article-content ul, .as-article-content ol { margin-top: 0; margin-bottom: 1.45em; padding-left: 1.4em; }
.as-article-content li { margin-bottom: .55em; padding-left: .24em; }
.as-article-content a:not(.btn) { color: var(--plum); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.as-article-intro { font-family: "Lora", Georgia, serif; color: var(--ink); font-size: clamp(21px, 2.8vw, 27px); line-height: 1.55; }
.as-article-content kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--ink); font: 600 .82em/1.5 "Work Sans", sans-serif; }
.as-article-alert, .as-article-answer, .as-article-formula, .as-article-cta, .as-article-sources { max-width: 820px; }
.as-article-alert { margin-top: 32px; margin-bottom: 42px; padding: 25px 28px; background: #fff; border-left: 5px solid var(--plum); border-radius: 0 12px 12px 0; box-shadow: var(--shadow); }
.as-article-alert > strong { display: block; margin-bottom: 10px; font-family: "Lora", Georgia, serif; font-size: 23px; }
.as-article-alert ol { margin-bottom: 0; }
.as-article-answer { margin-top: 32px; margin-bottom: 42px; padding: 25px 30px; background: var(--blush); border-radius: 13px; }
.as-article-answer span { display: block; margin-bottom: 5px; color: var(--plum); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.as-article-answer strong { display: block; font-family: "Lora", Georgia, serif; font-size: clamp(21px, 3vw, 28px); line-height: 1.45; }
.as-article-checklist { list-style: none; padding-left: 0 !important; }
.as-article-checklist li { position: relative; padding-left: 29px; }
.as-article-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--as-keep); font-weight: 800; }
.as-article-formula { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; margin-bottom: 26px; }
.as-article-formula div { position: relative; min-height: 112px; display: grid; place-items: center; padding: 15px; text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 650; line-height: 1.35; }
.as-article-formula strong { position: absolute; z-index: 1; right: -17px; top: 50%; width: 26px; height: 26px; display: grid; place-items: center; transform: translateY(-50%); border-radius: 50%; background: var(--plum); color: #fff; }
.as-article-formula div:last-child { background: var(--ink); color: #fff; border-color: var(--ink); }
.as-article-formula div:last-child strong { display: none; }
.as-article-equation { padding: 18px 22px; text-align: center; background: #fff; border-radius: 10px; font-size: 21px; }
.as-article-cta { margin-top: 54px; margin-bottom: 34px; padding: clamp(28px, 5vw, 46px); background: var(--ink); color: rgba(255,255,255,.78); border-radius: 16px; box-shadow: 0 16px 38px rgba(28,32,36,.16); }
.as-article-cta .eyebrow { color: var(--stone); }
.as-article-cta h2 { color: #fff; }
.as-article-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.as-article-cta .btn-primary { background: var(--plum); color: #fff; }
.as-article-cta .btn-outline { color: #fff; border-color: rgba(255,255,255,.42); }
.as-article-cta .btn-outline:hover { background: #fff; color: var(--ink); }
.as-article-sources { margin-top: 34px; padding: 24px 28px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 14px; }
.as-article-sources h2 { font-size: 18px; }
.as-article-sources ul { margin-bottom: 0; }
.as-article-related { background: #fff; border-top: 1px solid var(--border); }
.as-article-related h2 { margin-bottom: 25px; }
.as-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.as-related-card { display: flex; flex-direction: column; min-height: 170px; padding: 26px; border: 1px solid var(--border); border-radius: 13px; background: var(--paper); transition: transform .18s, border-color .18s; }
.as-related-card:hover { transform: translateY(-2px); border-color: var(--plum); text-decoration: none; }
.as-related-card > span { color: var(--stone-ink); font-size: 12.5px; font-weight: 600; }
.as-related-card strong { margin: 10px 0 20px; color: var(--ink); font-family: "Lora", Georgia, serif; font-size: 22px; line-height: 1.35; }
.as-related-card small { margin-top: auto; color: var(--plum); font-weight: 700; }

@media (max-width: 900px) {
	.as-blog-grid { grid-template-columns: 1fr; }
	.as-blog-card { min-height: 270px; }
	.as-blog-hero-mark { display: none; }
}
@media (max-width: 600px) {
	.as-blog-hero { padding: 46px 0 50px; }
	.as-blog-hero::after { width: 76%; }
	.as-blog-filters .container { gap: 4px; padding-left: 16px; padding-right: 16px; }
	.as-blog-filters a { padding: 7px 11px; font-size: 13px; }
	.as-blog-card { grid-template-columns: 1fr; min-height: 0; }
	.as-blog-card-top { min-height: 72px; align-items: center; padding: 14px 22px; }
	.as-blog-card-top span { font-size: 42px; }
	.as-blog-card-body { padding: 23px 22px 26px; }
	.as-blog-meta span + span::before { display: none; }
	.as-blog-meta { gap: 4px 10px; }
	.as-article-hero { padding: 34px 0 48px; }
	.as-article-back { margin-bottom: 27px; }
	.as-article-content { margin: 38px 0 50px; font-size: 17px; }
	.as-article-alert, .as-article-answer, .as-article-cta, .as-article-sources { padding: 22px; border-radius: 10px; }
	.as-article-alert { border-radius: 0 10px 10px 0; }
	.as-article-formula { grid-template-columns: 1fr; }
	.as-article-formula div { min-height: 72px; }
	.as-article-formula strong { right: 50%; top: auto; bottom: -17px; transform: translateX(50%); }
	.as-related-grid { grid-template-columns: 1fr; }
}

@media print {
	.as-article-hero { padding: 20px 0; background: #fff; color: #000; }
	.as-article-hero h1, .as-article-topic a { color: #000; }
	.as-article-deck, .as-article-meta { color: #333; }
	.as-article-back, .as-article-cta, .as-article-related, .site-header, .site-footer, .trust-banner { display: none !important; }
	.as-article-content { margin: 20px 0; }
}

/* Service-offer bands carry no side padding of their own, so on phones their
   text sat 16px from the edge while every .as-sec section sits 32px in. */
@media (max-width: 720px) {
  .offer-hero, .offer-clarity, .offer-areas { padding-left: 16px; padding-right: 16px; }
}
.remote-steps li { margin-bottom: 10px; line-height: 1.6; }

/* Key dates table on phones: the product name gets the full width, with the
   date and status chip on the line below, instead of a four-line product cell. */
@media (max-width: 600px) {
  .offer-dates-table tr { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 4px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
  .offer-dates-table td { display: block; padding: 0; border-bottom: 0; }
  .offer-dates-table td:first-child { grid-column: 1 / -1; }
  .offer-dates-table td:last-child { justify-self: start; }
}

/* For home: the pricing lead sat in a constrained group, which auto-centred it
   ~320px right of its left-aligned heading. */
#home-pricing > .lead {
  margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1160px)) / 2)) !important;
}
/* For home: the reassurance strip ran edge to edge on phones. */
@media (max-width: 720px) {
  .home-trust-proof-wrap { padding-left: 16px; padding-right: 16px; }
}
/* Blog answer boxes: the label span is already a block, so the <br> the editor
   put after it left an empty line. */
.as-article-answer br { display: none; }
@media (max-width: 560px) {
  .as-article-cta-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* Round 3 (2026-09-25): on an iPad (820x1180) the 4:3 crop above made the
   For Home photograph 615px tall, so the headline sat low and "Book a home
   visit" was off the first screen. Tablets get a letterbox band; phones a
   3:2 frame. The right of the frame, where the people are, is kept. */
@media (min-width: 481px) and (max-width: 860px) {
	.as-photo-hero-media img { aspect-ratio: 2.2 / 1; object-position: 82% 40%; }
}
@media (max-width: 480px) {
	.as-photo-hero-media img { aspect-ratio: 3 / 2; }
}

/* Optional short hero intro for phones (service-offer 'intro_short'). Both are
   in the HTML because pages are CDN-cached; CSS picks one. */
.offer-intro-short { display: none; }
@media (max-width: 600px) {
	.offer-intro-full { display: none; }
	.offer-intro-short { display: inline; }
}

/* ── Existing-site cards (/websites/#existing-sites) ─────────────────────
   Rebuilt 2026-09-25 (Ashley: "a bit more colourful, still just wall of text
   on 3 template cards"). Each card opens on a picture of the same site:
   patched, carried across to a new server, redrawn. The colour comes from the
   site's own plum, blush and stone only. A first pass gave each card its own
   coral/plum/green and a solid plum middle card, and was rejected: "orange and
   green set a new precedent", "the full plum on the middle is too different".
   The words shrank to one line and three tags. Every card is still one link
   to its own brief. Hover plays each picture's small story; reduced motion
   shows it still. */
.exs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: var(--stack); align-items: stretch; }
@media (max-width: 960px) { .exs-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.exs-card {
  --exs-field: #F6ECF0;
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 18px; background: #fff; border: 1px solid var(--border); color: var(--ink);
  box-shadow: 0 1px 2px rgba(28,32,36,.04);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease;
}
.exs-card, .exs-card:hover, .exs-card:focus-visible, .exs-card * { text-decoration: none; }
.exs-card:hover, .exs-card:focus-visible { transform: translateY(-4px); border-color: rgba(92,36,65,.45); box-shadow: 0 16px 36px rgba(92,36,65,.14); }
.exs-card:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; }
.exs-card--rebuild { --exs-field: #F1ECE5; }
/* The free move is the one to take, so it carries the plum edge — the same
   emphasis the card had before the pictures, not a different kind of card. */
.exs-card--move { --exs-field: #F1E2E9; border-color: rgba(92,36,65,.35); box-shadow: 0 10px 28px rgba(92,36,65,.10); }
.exs-card--move::before {
  content: ""; position: absolute; z-index: 1; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--plum), var(--stone));
}

.exs-art { position: relative; display: block; aspect-ratio: 360 / 166; background: var(--exs-field); overflow: hidden; }
.exs-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.exs-flag {
  display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 11px; letter-spacing: .06em;
  color: #fff; background: var(--plum); padding: 3px 9px; border-radius: 999px;
}

.exs-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; }
.exs-tag { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-ink); }
.exs-title { font-family: var(--serif, 'Lora', Georgia, serif); font-size: 22px; font-weight: 700; line-height: 1.22; color: inherit; }
.exs-copy { font-size: 15px; line-height: 1.55; color: var(--muted); }
.exs-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.exs-chips li {
  font-size: 13px; font-weight: 600; line-height: 1.3; padding: 5px 11px; border-radius: 999px;
  background: rgba(92,36,65,.07); color: var(--plum);
}
.exs-price {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border);
  font-family: var(--serif, 'Lora', Georgia, serif); font-size: 26px; font-weight: 700; line-height: 1.1; color: inherit;
}
.exs-price small { font-family: 'Work Sans', sans-serif; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.exs-plans { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
.exs-plan {
  position: relative; display: block; padding: 12px 14px 10px; border-radius: 11px;
  border: 1px solid rgba(92,36,65,.45); background: rgba(92,36,65,.05);
}
/* Sits on the box's top edge so it costs no height. */
.exs-plan-flag {
  position: absolute; top: -9px; left: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.6;
  text-transform: uppercase; color: #fff; background: var(--plum); padding: 0 8px; border-radius: 999px;
}
.exs-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.exs-plan-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.exs-plan-price { font-family: var(--serif, 'Lora', Georgia, serif); font-size: 24px; font-weight: 700; line-height: 1.1; color: var(--plum); white-space: nowrap; }
.exs-plan-price small { font-family: 'Work Sans', sans-serif; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.exs-plan-note { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.exs-plan-alt { font-size: 13.5px; line-height: 1.45; color: var(--muted); padding: 0 2px; }
.exs-plan-alt strong { color: var(--ink); }
.exs-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-radius: var(--btn-radius, 11px); font-weight: 700; font-size: 15px;
  background: rgba(92,36,65,.07); color: var(--plum); transition: background .2s ease, color .2s ease;
}
.exs-card:hover .exs-cta, .exs-card:focus-visible .exs-cta { background: var(--plum); color: #fff; }
.exs-arrow { display: inline-block; transition: transform .22s cubic-bezier(.2,.7,.3,1); }
.exs-card:hover .exs-arrow, .exs-card:focus-visible .exs-arrow { transform: translateX(5px); }

/* The pictures. Fix: the window straightens as the plaster presses on. */
.exs-fx-win, .exs-fx-plaster { transform-box: fill-box; transform-origin: center; }
.exs-fx-win { transform: rotate(-5deg); }
.exs-fx-plaster { transform: rotate(-28deg); }
.exs-fx-spark { opacity: 0; }
/* Move: the site sits on the old server and slides across to the new one. */
.exs-mv-win { transform: translate(41px, 10px); }
/* Rebuild: the finished site wipes across the old one. The clip and the
   handle both read --exs-wipe, so they cannot drift apart; registering it
   lets it animate (browsers without @property just jump). */
@property --exs-wipe { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.exs-card--rebuild .exs-art { --exs-wipe: 50%; }
.exs-rb-new { clip-path: inset(0 0 0 var(--exs-wipe)); }
.exs-rb-handle {
  position: absolute; top: 16.5%; bottom: 15.5%; left: var(--exs-wipe); width: 3px; margin-left: -1.5px;
  background: var(--plum); border-radius: 2px;
}
.exs-rb-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  background: var(--plum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 8l-4 4 4 4M14 8l4 4-4 4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
  box-shadow: 0 0 0 3px #F1ECE5;
}

@media (prefers-reduced-motion: no-preference) {
  .exs-fx-win, .exs-fx-plaster { transition: transform .45s cubic-bezier(.2,.7,.3,1); }
  .exs-fx-spark { transition: opacity .3s ease .15s; }
  .exs-mv-win { transition: transform .7s cubic-bezier(.45,0,.2,1); }
  .exs-card--rebuild .exs-art { transition: --exs-wipe .6s cubic-bezier(.45,0,.2,1); }
  .exs-card:hover .exs-fx-win, .exs-card:focus-visible .exs-fx-win { transform: rotate(0); }
  .exs-card:hover .exs-fx-plaster, .exs-card:focus-visible .exs-fx-plaster { transform: rotate(-18deg) scale(1.06); }
  .exs-card:hover .exs-fx-spark, .exs-card:focus-visible .exs-fx-spark { opacity: 1; }
  .exs-card:hover .exs-mv-win, .exs-card:focus-visible .exs-mv-win { transform: translate(241px, 10px); }
  .exs-card--rebuild:hover .exs-art, .exs-card--rebuild:focus-visible .exs-art { --exs-wipe: 27%; }

  .exs-grid.as-reveal .exs-card { opacity: 0; transform: translateY(18px); }
  .exs-grid.as-reveal.is-visible .exs-card { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease; }
  .exs-grid.as-reveal.is-visible .exs-card:nth-child(2) { transition-delay: .08s, .08s, 0s; }
  .exs-grid.as-reveal.is-visible .exs-card:nth-child(3) { transition-delay: .16s, .16s, 0s; }
  .exs-grid.as-reveal.is-visible .exs-card:hover { transform: translateY(-4px); transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
  .exs-card, .exs-cta, .exs-arrow { transition: none; }
  .exs-card:hover, .exs-card:focus-visible { transform: none; }
}

/* ── Short screens: 200% zoom, a phone on its side (audit pass 2, 2026-09-25)
   A 1366x800 laptop at 200% is a 683x400 page. The audience bar and header
   took 155px of it, and on six pages the stacked hero photo or illustration
   sat above the headline, so the first screen was chrome and a picture.
   Here: a compact header, the photo as a thin band, and the headline before
   the illustration. Portrait phones and normal desktops are untouched. */
@media (max-height: 500px) {
  .aud-bar-inner { padding-top: 5px; padding-bottom: 5px; }
  .header-inner { height: 60px; }
  .logo .as-mark { width: 28px; }
  .logo-word { font-size: 17px; }
  .logo-strapline { display: none; }
  /* The cookie bar sits over the page until answered: keep it to two lines. */
  .cc { font-size: 12.5px; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; }
  .cc .cc-btn { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
}
@media (max-height: 500px) and (max-width: 900px) {
  .offer-hero-grid--visual .offer-hero-visual { order: 1; }
  .offer-hero-grid--visual .offer-hero-visual img,
  .offer-hero-grid--visual .offer-hero-visual svg { max-height: 220px; width: auto; max-width: 100%; }
  .offer-hero.offer-hero--photo .offer-hero-media img { aspect-ratio: auto; height: 96px; }
  .offer-hero.offer-hero--photo .offer-hero-media { margin-bottom: 18px; }
}
@media (max-height: 500px) and (max-width: 860px) {
  .as-sec.as-photo-hero .as-photo-hero-media img { aspect-ratio: auto; height: 96px; }
  .as-sec.as-photo-hero .as-photo-hero-media { min-height: 0; height: auto; }
}

/* ── Domain search (template-parts/domain-search.php) ──
   One white card: the question on the left, the box on the right, results
   underneath at full width. Free names are the only green thing on it. */
.ds-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 40px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 30px 34px;
  box-shadow: 0 10px 28px rgba(28, 32, 36, 0.07);
}
.ds-head .eyebrow { margin-bottom: 6px; }
.ds-head h2 { margin: 0 0 8px; }
.ds-lead { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 60ch; }
.ds-form { display: flex; gap: 10px; }
.ds-input {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 9px; background: var(--paper); color: var(--ink);
}
.ds-input:focus { outline: 2px solid var(--plum); outline-offset: 1px; border-color: var(--plum); }
.ds-submit {
  flex: 0 0 auto; background: var(--plum); color: #fff; border: 0; font: inherit; font-weight: 600;
  font-size: 15px; padding: 12px 24px; border-radius: 9px; cursor: pointer;
}
.ds-submit:hover { background: var(--plum-d); }
.ds-submit:disabled { opacity: .7; cursor: default; }
.ds-results { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 18px; margin-top: 4px; }
.ds-summary { margin: 0 0 12px; font-size: 15px; }
.ds-wait { color: var(--muted); }
.ds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ds-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); gap: 14px; align-items: center;
  padding: 9px 14px; border-radius: 9px; background: var(--paper); font-size: 14.5px;
}
.ds-name { overflow-wrap: anywhere; }
.ds-name b { font-weight: 600; }
.ds-tag {
  font-size: 12px; font-weight: 600; letter-spacing: .02em; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: #fff; white-space: nowrap;
}
.ds-row.is-free { background: #EEF5EF; }
.ds-row.is-free .ds-tag { border-color: var(--as-keep); color: var(--as-keep); }
.ds-row.is-premium .ds-tag { border-color: var(--stone); color: var(--stone-ink); }
.ds-act { text-align: right; font-size: 13.5px; color: var(--muted); }
.ds-act a { color: var(--plum); font-weight: 600; }
.ds-go { white-space: nowrap; }
.ds-go::after { content: " \2192"; }
.ds-sub { display: block; font-size: 12px; color: var(--muted); }
.ds-band { margin: 18px 0 8px; font-size: 13.5px; color: var(--muted); }
.ds-more {
  margin-top: 12px; background: none; border: 1px solid var(--border); border-radius: 9px; font: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 8px 14px; cursor: pointer;
}
.ds-more:hover { border-color: var(--plum); color: var(--plum); }
.ds-note { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.ds-note a { color: var(--plum); font-weight: 600; }
@media (max-width: 860px) {
  .ds-card { grid-template-columns: 1fr; padding: 24px 20px; }
}
@media (max-width: 560px) {
  .ds-form { flex-direction: column; }
  .ds-row { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .ds-act { grid-column: 1 / -1; text-align: left; }
}

/* ── Home showcase: [as_showcase] (inc/home-showcase.php), 2026-09-26 ─────
   Three large tiles, then one board of everything else. White cards with
   picture wells in light brand tints; no solid or dark cards (see the colour
   restraint note). The running line under a well marks the tile whose video
   is playing: it fills over the three seconds of its turn, and stays full
   while the tile is being pointed at. */
.hs { padding: clamp(40px, 5vw, 72px) 24px clamp(48px, 6vw, 84px); }
.hs-inner { max-width: var(--maxw); margin: 0 auto; }
.hs-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.hs-head h2 { margin: 0; }
.hs-head .eyebrow { margin-bottom: 10px; }
.hs-hint { display: none; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.hs-hint svg { color: var(--plum); flex: none; }
@media (hover: hover) and (min-width: 901px) { .hs-hint { display: inline-flex; } }
.hs-lede { margin: 0; max-width: 40ch; color: var(--muted); }
.hs-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hs-tile { display: flex; flex-direction: column; background: #fff; border-radius: 20px; overflow: hidden; text-decoration: none; color: var(--ink);
  box-shadow: 0 0 0 1px rgba(28,32,36,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.hs-tile:hover, .hs-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 22px 46px rgba(28,32,36,.12), 0 0 0 1px rgba(92,36,65,.25); text-decoration: none; }
.hs-well { position: relative; height: 300px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 22px; }
.hs-well--stone { background: #F1ECE5; }
.hs-well--blush { background: #F1E2E9; }
.hs-well--rose  { background: #F6ECF0; }
.hs-browser { display: block; width: 100%; align-self: end; margin-bottom: -22px; background: #fff; border-radius: 12px 12px 0 0; overflow: hidden;
  box-shadow: 0 -4px 30px rgba(28,32,36,.1), 0 0 0 1px rgba(28,32,36,.06); }
.hs-bar { display: flex; align-items: center; gap: 5px; padding: 8px 12px; background: #F3EFEA; border-bottom: 1px solid var(--border); }
.hs-bar i { width: 8px; height: 8px; border-radius: 50%; background: #d3cdc5; }
.hs-bar span { margin-left: 10px; flex: 1; background: #fff; border-radius: 5px; font-size: 11px; color: var(--muted); padding: 3px 8px; }
.hs-browser video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.hs-screen { display: block; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 40px rgba(28,32,36,.14), 0 0 0 1px rgba(28,32,36,.06); background: #fff; }
.hs-screen video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hs-phone { display: block; justify-self: center; height: 100%; aspect-ratio: 780 / 1688; max-width: 100%; border: 6px solid var(--ink); border-radius: 28px; overflow: hidden; background: var(--ink);
  box-shadow: 0 18px 36px rgba(28,32,36,.2); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hs-phone img, .hs-phone video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 22px; }
.hs-tile--app:hover .hs-phone { transform: translateY(-5px); }
.hs-well--film { padding: 0; background: var(--ink); }
.hs-well--film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-run { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; background: transparent; z-index: 3; }
.hs-run::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--plum); }
.hs-tile.is-playing .hs-run::after { animation: hsRun var(--hs-turn, 3s) linear forwards; }
.hs-tile.is-held .hs-run::after { width: 100%; }
@keyframes hsRun { to { width: 100%; } }
.hs-meta { padding: 16px 20px 18px; border-top: 1px solid rgba(28,32,36,.06); }
.hs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hs-meta h3 { margin: 0; font-size: 21px; }
.hs-pr { font-size: 13.5px; color: var(--muted); white-space: nowrap; }
.hs-pr b { color: var(--ink); }
.hs-sub { display: block; margin-top: 6px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.hs-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; font-size: 14px; color: var(--muted); }
.hs-foot a { color: var(--plum); font-weight: 600; text-decoration: none; }
/* Second band (2026-09-26, option 3 of mockup round 4): Mobile apps and Drone
   work side by side, the app tile with its words beside the phone so the
   phone can be large; the six other services run full width underneath. */
.hs-mid { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* halves, so the gap lines up with the row above */
.hs-tile--app { flex-direction: row; min-height: 460px; background: #F6ECF0; }
.hs-tile--app .hs-well { flex: 0 0 46%; height: auto; padding: 0; display: block; }
.hs-tile--app .hs-phone { position: absolute; inset: 18px auto 18px 50%; translate: -50% 0; height: auto; width: auto; max-width: none; }
@supports (height: 1cqh) {
  /* As tall as the well allows, but never closer than 22px to its sides. */
  .hs-tile--app .hs-well { container-type: size; }
  .hs-tile--app .hs-phone { inset: 50% auto auto 50%; translate: -50% -50%; height: min(100cqh - 36px, (100cqw - 44px) * 2.164); }
}
.hs-app-words { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 32px 34px 32px 6px; }
.hs-app-words h3 { margin: 0; font-size: 30px; line-height: 1.15; }
.hs-app-words .hs-pr { margin-top: 10px; font-size: 15px; }
.hs-app-words p { margin: 14px 0 0; max-width: 30ch; font-size: 15px; line-height: 1.6; color: var(--muted); }
.hs-app-demo { display: block; margin-top: 22px; padding-top: 14px; border-top: 1px solid rgba(92,36,65,.15); font-size: 13px; line-height: 1.5; color: var(--muted); }
.hs-app-demo b { color: var(--plum); }
.hs-tile--drone .hs-well { height: auto; flex: 1 1 auto; min-height: 260px; }
/* The six services as two separate strips of three (2026-09-26), each strip
   with the same corners and gap as the tiles above: icon, name and price on
   one line, then a two-line description (measured, so each strip lines up). */
.hs-board { margin-top: 14px; background: #fff; border-radius: 20px; box-shadow: 0 0 0 1px rgba(28,32,36,.07); display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.hs-item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-content: start; padding: 22px 24px;
  color: var(--ink); text-decoration: none; border-left: 1px solid rgba(28,32,36,.07); transition: background .25s; }
.hs-item:first-child { border-left: 0; }
.hs-item:hover, .hs-item:focus-visible { background: #FBF6F8; text-decoration: none; }
.hs-ico { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--plum); background: #F6ECF0; }
.hs-ico svg { width: 20px; height: 20px; }
.hs-item-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hs-item b { font-family: "Lora", Georgia, serif; font-size: 17px; font-weight: 600; line-height: 1.3; }
.hs-item-pr { font-size: 13.5px; font-weight: 600; color: var(--plum); white-space: nowrap; }
.hs-item small { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1180px) {
  .hs-item-h { flex-direction: column; align-items: flex-start; gap: 2px; } /* price under the name */
}
@media (max-width: 900px) {
  /* Each strip becomes a short list of three. */
  .hs-board { grid-template-columns: minmax(0, 1fr); }
  .hs-item { border-left: 0; }
  .hs-item + .hs-item { border-top: 1px solid rgba(28,32,36,.07); }
}
@media (max-width: 900px) {
  .hs-mid { grid-template-columns: minmax(0, 1fr); }
  .hs-tile--drone .hs-well { flex: none; height: 320px; }
}
/* Launch bundle: one line under the board, all that is left of the old home
   pricing boxes. Plum edge marks it out, as on the /websites/ featured card. */
.hs-launch { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 16px 22px;
  background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(28,32,36,.07); border-left: 3px solid var(--plum);
  color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 1.5; transition: background .25s; }
.hs-launch:hover, .hs-launch:focus-visible { background: #F6ECF0; text-decoration: none; }
.hs-launch-k { font-family: "Lora", Georgia, serif; font-size: 16.5px; font-weight: 600; white-space: nowrap; }
.hs-heart { width: .95em; height: .95em; margin: 0 .08em; vertical-align: -.12em; color: var(--plum); }
.hs-launch-t { flex: 1 1 340px; color: var(--muted); }
.hs-launch-t b { color: var(--ink); }
.hs-launch-go { color: var(--plum); font-weight: 600; white-space: nowrap; }
@media (max-width: 980px) {
  .hs-well { height: 260px; }
}
@media (max-width: 600px) {
  .hs-top { grid-template-columns: minmax(0, 1fr); }
  .hs-well { height: 230px; }
  .hs-mid { gap: 10px; }
  .hs-tile--app { flex-direction: column; min-height: 0; }
  .hs-tile--app .hs-well { flex: none; height: 380px; }
  .hs-app-words { padding: 22px 22px 26px; }
  .hs-app-words h3 { font-size: 24px; }
  .hs-tile--drone .hs-well { height: 240px; }
  .hs-item { padding: 18px 20px; }
  .hs-launch { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-tile, .hs-phone { transition: none; }
}

/* ── Overnight audit fixes (2026-09-26) ───────────────────────────────────
   Three small corrections from the 12-persona audit. One block so it reverts
   as one piece. */
/* The showcase is pulled up over the hero on purpose; without a stacking
   order the hero painted over its top edge (food ordering demo). */
.offer-showcase { position: relative; z-index: 1; background: transparent; }
/* Phones: the hero's single column was 1fr (auto minimum), so the three-price
   strip forced it 30px wider than the container on /shopify/. */
@media (max-width: 960px) { .shp-hero-inner { grid-template-columns: minmax(0, 1fr); } }
/* Small grey text on the blush CTA band measured 4.49:1; one step darker
   passes 4.5:1. */
.as-sec-cta p, .as-sec-cta .lead, .cta-contact-line { color: #4F5358; }

/* ============================================================
   Header, footer and cookie bar accessibility (2026-09-26 pm)
   From the overnight persona audit. Phone drawer: Pricing,
   Contact and "I need help now" (business), the For Home page's
   two main actions (home), the hamburger turns into an X, and
   the open accordion's label no longer sits on the edge of its
   fill. Top bar and footer: 44px touch targets. Cookie bar: 44px
   buttons and no ring on the automatic first-visit focus.
   ============================================================ */
.nav-toggle-bar { transition: transform .2s ease, opacity .15s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .nav-toggle-bar { transition: none; } }

/* Top bar: the pills stay the size they are, but each one's touch area
   is 44px tall (the bar is taller than that, so nothing overlaps). */
.aud-switch a, .aud-tel, .aud-remote { position: relative; }
.aud-switch a::after, .aud-tel::after, .aud-remote::after {
	content: ""; position: absolute; left: 0; right: 0; top: 50%;
	height: 44px; transform: translateY(-50%);
}
/* The unselected "For Business" on the plum bar was pink-grey on plum. */
.aud-bar--home .aud-switch a:not(.on) { color: rgba(255,255,255,.9); }


/* Footer links: 44px rows on phones. The address's two links become rows of
   their own; the <br> after each one would otherwise add an empty line. */
@media (max-width: 900px) {
	.footer-nav-col ul { gap: 0; }
	.footer-nav-col li a { display: flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }
	.footer-address a { display: flex; align-items: center; min-height: 44px; padding-block: 0; margin-block: 0; }
	.footer-address a + br { display: none; }
}
/* The Ecologi badge takes focus inside its own shadow DOM with no ring. */
.footer-ecologi ecologi-impact-badge:focus-within { outline: 3px solid var(--blush); outline-offset: 4px; border-radius: 10px; }

/* Cookie bar: 44px buttons (landscape phones keep their slim bar). */
.cc-btn { min-height: 44px; }
.cc[data-autofocus] .cc-btn:focus-visible { outline: none; }

/* ============================================================
   Stone slab hero (template-parts/offer-hero-slab.php)
   ------------------------------------------------------------
   Opt-in per service page with 'hero_style' => 'slab'; first used
   on /business-voip/ (Ashley, 2026-09-28). A stone slab with the
   mark's diagonal split through it: stone behind the copy, a blush
   facet behind the picture, a paper-coloured cut between them.
   The scene in template-parts/hero-art/ animates; everything stops
   under prefers-reduced-motion.
   ============================================================ */
.offer-hero--slab { background: #fff; padding: 28px 0 40px; }
.offer-hero--slab .slab { position: relative; background: #F1ECE5; border-radius: 32px; overflow: hidden; isolation: isolate; }
.offer-hero--slab .slab::after { content: ""; position: absolute; inset: 0; z-index: 0; background: #F1E2E9; clip-path: polygon(70% 0, 100% 0, 100% 100%, 52% 100%); }
.offer-hero--slab .slab::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--paper); clip-path: polygon(68.8% 0, 70% 0, 52% 100%, 50.8% 100%); }
.offer-hero--slab .slab-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 52px 48px 60px 64px; }
.offer-hero--slab h1 { margin: 14px 0 18px; font-size: clamp(34px, 3.7vw, 52px); line-height: 1.08; }
.offer-hero--slab .lead { max-width: 50ch; }
.slab-plaque { margin: 26px 0 0; display: inline-flex; align-items: stretch; background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(28, 32, 36, .08); overflow: hidden; }
.slab-plaque > div { padding: 16px 22px; }
.slab-plaque > div + div { border-left: 1px solid var(--border); }
.slab-plaque-k { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stone-ink); }
.slab-plaque-p { margin: 0; font-family: "Lora", Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1; color: var(--plum); }
.slab-plaque-p small { font-family: "Work Sans", system-ui, sans-serif; font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.slab-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.offer-hero--slab .offer-hero-actions { margin-top: 26px; }
.slab-art svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The scene's motion: the call runs down the dotted lines, each device
   rings in turn, the handset jiggles and the answer button breathes. */
.slab-art .hs-flow { stroke-dasharray: 2 9; animation: hs-flow 1.1s linear infinite; }
@keyframes hs-flow { to { stroke-dashoffset: -22; } }
.slab-art .hs-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: hs-ring 2.7s cubic-bezier(.2, .6, .4, 1) infinite; }
.slab-art .hs-ring.d2 { animation-delay: .9s; }
.slab-art .hs-ring.d3 { animation-delay: 1.8s; }
@keyframes hs-ring { 0% { transform: scale(.6); opacity: .55; } 80%, 100% { transform: scale(1.9); opacity: 0; } }
.slab-art .hs-handset { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-jiggle 2.7s ease-in-out infinite; }
@keyframes hs-jiggle { 0%, 40%, 100% { transform: translateY(0) rotate(0); } 6% { transform: translateY(-5px) rotate(-4deg); } 12% { transform: translateY(-5px) rotate(4deg); } 18% { transform: translateY(-5px) rotate(-3deg); } 24% { transform: translateY(-4px) rotate(3deg); } 30% { transform: translateY(0) rotate(0); } }
.slab-art .hs-answer { transform-box: fill-box; transform-origin: center; animation: hs-breathe 1.35s ease-in-out infinite alternate; }
@keyframes hs-breathe { from { transform: scale(1); } to { transform: scale(1.12); } }
.slab-art .hs-blink { animation: hs-blink 1.35s steps(1) infinite; }
@keyframes hs-blink { 50% { opacity: .35; } }
.slab-art .hs-spark { transform-box: fill-box; transform-origin: center; animation: hs-spark 3.2s ease-in-out infinite; }
.slab-art .hs-spark.d2 { animation-delay: 1.6s; }
@keyframes hs-spark { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.slab-art svg * { animation: none !important; }
}
@media (max-width: 900px) {
	.offer-hero--slab { padding: 16px 0 28px; }
	.offer-hero--slab .slab { border-radius: 24px; }
	.offer-hero--slab .slab::after { clip-path: polygon(100% 52%, 100% 100%, 0 100%, 0 74%); }
	.offer-hero--slab .slab::before { clip-path: polygon(100% 51%, 100% 52.4%, 0 75.4%, 0 74%); }
	.offer-hero--slab .slab-grid { grid-template-columns: 1fr; padding: 36px 22px 36px; gap: 28px; }
	.slab-plaque { display: flex; flex-wrap: wrap; }
	.slab-plaque > div { flex: 1 1 100%; }
	.slab-plaque > div + div { border-left: 0; border-top: 1px solid var(--border); }
}


/* ============================================================
   Home refresh (2026-09-29)
   ============================================================ */

/* Hero v3: a plain statement of what we do, full size across the sky of
   the drone shot (Ashley: "something full size over the sky"). The
   tagline keeps its brand treatment (Lora Italic 500, plum, never bold)
   as the small line above; the H1 now says what the studio does, since the
   H1 is the heading search engines weigh most. The price panel, buttons and
   home link sit below it as before. */
.hero-v2-bg picture { display: block; width: 100%; height: 100%; }
.as-hero-v2.is-v3 .hero-v3-head {
  position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto 30px;
}
.hero-v3-tag {
  margin: 0 0 12px; font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(19px, 1.9vw, 25px); line-height: 1.2; color: var(--plum);
}
.hero-v3-title {
  margin: 0; max-width: 24ch; font-family: 'Lora', Georgia, serif; font-weight: 700;
  font-size: clamp(40px, 5.5vw, 80px); line-height: 1.02; letter-spacing: -.03em;
  color: var(--ink); text-wrap: balance;
}
.hero-v3-lead {
  margin: 18px 0 0; max-width: 50ch; font-size: clamp(16.5px, 1.6vw, 20px); line-height: 1.55;
  font-weight: 500; color: var(--ink); text-wrap: pretty;
  text-shadow: 0 0 14px rgba(247,245,241,.95), 0 0 4px rgba(247,245,241,.9);
}
.as-hero-v2.is-v3 .hero-v2-pricebox { margin-top: 0; }
/* Sit the heading higher, so both lines and the lead stay over the sky
   rather than the hills (Ashley, 2026-09-30). */
@media (min-width: 901px) { .as-hero-v2.is-v3 { padding-top: calc(var(--hero-y) - 44px); } }
/* The line under the heading stays on one line on anything wider than a
   tablet (Ashley, 2026-09-29); phones wrap it. */
@media (min-width: 1000px) { .hero-v3-lead { max-width: none; white-space: nowrap; } }
/* A soft paper wash behind the heading, so the words hold on the trees at
   the left edge as well as on the sky. */
.as-hero-v2.is-v3 .hero-v2-bg::after {
  background:
    radial-gradient(ellipse 64% 58% at 20% 18%, rgba(247,245,241,.86), rgba(247,245,241,.5) 55%, transparent 82%),
    linear-gradient(180deg, rgba(247,245,241,.25) 0%, transparent 34%, transparent 62%, var(--paper) 100%);
}
@media (max-width: 900px) {
  .as-hero-v2.is-v3 .hero-v3-head { margin-bottom: 0; }
  .hero-v3-title { font-size: clamp(36px, 10vw, 60px); max-width: 14ch; }
  .as-hero-v2.is-v3 .hero-v2-pricebox { margin-top: 150px; }
  .as-hero-v2.is-v3 .hero-v2-bg { height: 560px; }
  .as-hero-v2.is-v3 .hero-v2-bg::after {
    background: linear-gradient(180deg,
      rgba(247,245,241,.86) 0%, rgba(247,245,241,.78) 44%,
      rgba(247,245,241,.3) 66%, rgba(247,245,241,0) 84%);
  }
}

/* Client logos, bigger and tidier: no credentials line under them (the
   footer banner carries it), every logo in one flat ink tone so no mark
   shouts or fades (the Turner Bros. grey was nearly invisible), and each
   one sized by area rather than height so wide and square marks weigh the
   same (heights set per logo in template-parts/client-strip.php). */
.as-clients { padding: 52px 0 48px; }
.as-clients-inner .eyebrow { margin-bottom: 26px; }
.as-client { height: 84px; }
.as-client img {
  height: var(--logo-h, 52px); max-width: 240px;
  filter: grayscale(1) brightness(0); opacity: .58;
}
.as-client img[src*="/clients/mep"] { height: var(--logo-h, 44px); }
.as-clients-marquee .as-clients-row { gap: 22px 68px; padding-right: 68px; }
@media (max-width: 600px) {
  .as-clients { padding: 38px 0 34px; }
  .as-client { height: 64px; }
  .as-client img, .as-client img[src*="/clients/mep"] { height: calc(var(--logo-h, 52px) * .74); }
  .as-clients-marquee .as-clients-row { gap: 16px 40px; padding-right: 40px; }
}

/* Reviews v2 (inc/google-reviews.php): smaller and more graphical. The
   score on the left, the quotes as speech bubbles floating on the right,
   each one drifting a few pixels on its own slow cycle. */
.as-rv { padding: clamp(56px, 7vw, 84px) 0; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
/* On home the trees strip follows on the same white, so no rule between them. */
.home .as-rv { border-bottom: 0; padding-bottom: clamp(36px, 4vw, 52px); }
.as-rv-inner { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px clamp(32px, 5vw, 72px); align-items: center; }
.as-rv-score h2 { margin: 6px 0 0; font-size: clamp(30px, 3.2vw, 40px); }
.as-rv-rating {
  display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: 16px; background: var(--paper);
  color: var(--ink); text-decoration: none; transition: border-color .15s ease;
}
.as-rv-rating:hover, .as-rv-rating:focus-visible { border-color: var(--plum); color: var(--ink); text-decoration: none; }
.as-rv-num { font-family: 'Lora', Georgia, serif; font-size: 52px; font-weight: 700; line-height: 1; color: var(--plum); letter-spacing: -.02em; }
.as-rv-rating-meta { display: flex; flex-direction: column; gap: 5px; }
.as-rv-rating .as-stars { color: #E9A23B; }
.as-rv-count { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.as-rv-count .as-reviews-g { width: 20px; height: 20px; font-size: 12px; }
.as-rv-score .as-reviews-ask { margin: 14px 0 0; text-align: left; }
.as-rv-score .as-reviews-write { white-space: nowrap; }
.as-rv-foot { grid-column: 1 / -1; margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.as-rv-foot a { color: var(--plum); font-weight: 600; }

.as-rv-stage { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px; align-items: start; padding: 8px 0 18px; }
.as-rv-card {
  position: relative; margin: 0; padding: 20px 22px 18px; border-radius: 20px;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(92,36,65,.1), 0 2px 6px rgba(28,32,36,.05);
}
/* The bubble's tail, bottom left, pointing at the person. */
.as-rv-card::after {
  content: ""; position: absolute; left: 30px; bottom: -9px; width: 18px; height: 18px;
  background: inherit; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg); border-bottom-right-radius: 4px;
}
.as-rv-card:nth-child(1) { rotate: -1.2deg; }
.as-rv-card:nth-child(2) { grid-row: span 2; margin-top: 44px; rotate: .9deg; background: #FBF4F7; }
.as-rv-card:nth-child(3) { grid-row: span 2; margin-left: 34px; margin-right: -12px; rotate: -.5deg; background: #FAF7F2; }
/* The fourth is a one-line review, so it sits small under the tall bubble
   on the right rather than taking a full column. */
.as-rv-card:nth-child(4) { grid-column: 2; grid-row: 3; justify-self: start; max-width: 270px; margin-left: 30px; padding: 14px 18px 13px; rotate: 1.6deg; }
.as-rv-card:nth-child(4) blockquote::before { display: none; }
.as-rv-card:nth-child(4) .as-stars { margin-bottom: 6px; }
.as-rv-card:nth-child(4) figcaption { margin-top: 10px; }
.as-rv-card:nth-child(4) .as-rv-av { width: 30px; height: 30px; font-size: 14px; background: var(--stone-ink); }
.as-rv-card blockquote { margin: 0; padding: 0; border: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.as-rv-card blockquote::before { content: "\201C"; display: block; height: 26px; margin-bottom: 2px; font-family: 'Lora', Georgia, serif; font-size: 48px; line-height: 1; color: var(--plum); opacity: .35; }
.as-rv-card figcaption { display: flex; align-items: center; gap: 11px; margin-top: 16px; }
.as-rv-av {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--plum); color: #fff; font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: 16px;
}
.as-rv-card:nth-child(2) .as-rv-av { background: var(--stone-ink); }
.as-rv-card:nth-child(3) .as-rv-av { background: var(--blush); color: var(--plum); }
.as-rv-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.as-rv-who b { font-size: 14px; color: var(--ink); }
.as-rv-who span { font-size: 12.5px; color: var(--muted); }
.as-rv-src { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--stone-ink); white-space: nowrap; }
.as-rv-src .as-reviews-g { width: 18px; height: 18px; font-size: 11px; }
.as-rv-card .as-stars { display: flex; gap: 1px; margin-bottom: 8px; color: #E9A23B; }
.as-rv-card .as-star { width: 15px; height: 15px; }

@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .as-rv-card { animation: as-rv-float 7s ease-in-out infinite alternate; }
  .as-rv-card:nth-child(2) { animation-duration: 8.5s; animation-delay: -3s; }
  .as-rv-card:nth-child(3) { animation-duration: 6.4s; animation-delay: -1.5s; }
  .as-rv-card:nth-child(4) { animation-duration: 7.6s; animation-delay: -4.5s; }
  @keyframes as-rv-float { from { translate: 0 -5px; } to { translate: 0 6px; } }
}
@media (max-width: 900px) {
  .as-rv-inner { grid-template-columns: 1fr; gap: 28px; }
  /* On phones the bubbles become a row you swipe through. */
  .as-rv-stage {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 6px 20px 22px; scrollbar-width: none;
  }
  .as-rv-stage::-webkit-scrollbar { display: none; }
  .as-rv-card, .as-rv-card:nth-child(n) { flex: 0 0 84%; margin: 0; rotate: none; scroll-snap-align: center; }
  .as-rv-card:nth-child(4) { flex-basis: 64%; align-self: flex-start; }
}

/* Cookie notice as a box in the bottom-left corner on wider screens
   (Ashley, 2026-09-29), clear of the page's calls to action and of the chat
   bubble on the right. Phones keep the full-width bar at the foot. The two
   buttons stay identical in size and weight. */
@media (min-width: 641px) {
  .cc {
    inset: auto auto 20px 20px; width: min(330px, calc(100vw - 40px));
    flex-direction: column; align-items: stretch; gap: 14px;
    padding: 18px 20px 18px; border-radius: 16px;
    box-shadow: 0 22px 50px rgba(28,32,36,.28);
  }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1 1 0; min-width: 0; }
  @media (prefers-reduced-motion: no-preference) {
    .cc { animation: cc-pop .22s ease-out; }
    @keyframes cc-pop { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
  }
}


/* Photo hero with prices on the right ('hero_prices', template-parts/
   service-offer.php; /drone-surveys/ since 2026-09-29). A solid paper card
   over the photograph: a headline price with its follow-on steps, bigger jobs
   as two tiles, one-line extras, then what every job includes. Below 1000px
   it stacks under the copy. */
.offer-prices {
  background: var(--paper); color: var(--ink); border-radius: 20px;
  padding: 22px 22px 20px; box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.offer-prices small { font-size: inherit; }
.offer-prices-title { margin: 0 0 14px; font-family: 'Lora', Georgia, serif; font-size: 21px; font-weight: 700; color: var(--ink); }
.offer-prices-group { margin: 16px 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-ink); }
.offer-prices-title + .offer-prices-group { margin-top: 0; }
.offer-prices-from { margin-right: 4px; font-family: 'Work Sans', Arial, sans-serif; font-size: 12px !important; font-weight: 600; color: var(--muted); }
.offer-prices-suf { margin-left: 3px; font-family: 'Work Sans', Arial, sans-serif; font-size: 12px !important; font-weight: 600; color: var(--muted); }

/* Headline price: white card, big plum figure, then the ladder. */
.offer-prices-lead { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.offer-prices-lead-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; }
.offer-prices-lead-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.offer-prices-lead-text b { font-size: 16px; font-weight: 700; }
.offer-prices-lead-text small { font-size: 13px !important; line-height: 1.4; color: var(--muted); }
.offer-prices-lead-amt { flex: none; display: flex; align-items: baseline; font-family: 'Lora', Georgia, serif; font-size: 38px; font-weight: 700; line-height: 1; color: var(--plum); letter-spacing: -.02em; }
.offer-prices-steps { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); background: #F6ECF0; }
.offer-prices-steps li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; padding: 10px 16px; font-size: 13px; color: var(--ink); }
.offer-prices-steps li::before { content: none; }
.offer-prices-steps li + li { border-left: 1px solid rgba(92,36,65,.14); }
.offer-prices-steps b { font-family: 'Lora', Georgia, serif; font-size: 19px; font-weight: 700; color: var(--plum); white-space: nowrap; }

/* Bigger jobs: two tiles side by side. */
.offer-prices-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.offer-prices-tiles li { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 14px 13px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.offer-prices-tiles li::before { content: none; }
.offer-prices-tiles b { font-size: 14px; font-weight: 700; }
.offer-prices-tile-amt { display: flex; align-items: baseline; margin: 2px 0 1px; font-family: 'Lora', Georgia, serif; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--plum); }
.offer-prices-tiles small { font-size: 12.5px !important; line-height: 1.35; color: var(--muted); }

/* One-line extra, e.g. progress visits (2 visits minimum). */
.offer-prices-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 12px 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; font-size: 14px; }
.offer-prices-row b { font-weight: 700; }
.offer-prices-row small { font-size: 12.5px !important; color: var(--muted); }
.offer-prices-row-amt { flex: none; display: flex; align-items: baseline; font-family: 'Lora', Georgia, serif; font-size: 22px; font-weight: 700; color: var(--plum); white-space: nowrap; }

.offer-prices-note { margin: 12px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.offer-prices-sub { margin: 16px 0 8px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--stone-ink); }
.offer-prices-inc { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.offer-prices-inc li { position: relative; margin: 0; padding-left: 22px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.offer-prices-inc li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border-left: 2px solid var(--plum); border-bottom: 2px solid var(--plum); transform: rotate(-45deg); background: none; }
@media (min-width: 1000px) {
  .offer-hero--prices-right .offer-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: clamp(32px, 4vw, 64px); align-items: center; }
}
@media (max-width: 999px) {
  .offer-hero--prices-right .offer-prices { max-width: 560px; margin-top: 28px; }
}
@media (max-width: 620px) {
  .offer-hero--prices-right .offer-prices { order: 2; margin: 0 16px; padding: 18px 16px; }
  .offer-prices-lead-amt { font-size: 32px; }
  .offer-prices-steps li { padding: 9px 12px; }
}
@media (max-width: 480px) {
  /* Too narrow for the pairs: the steps run one under the other, and the
     progress line keeps "(2 visits minimum)" with its label, price below. */
  .offer-prices-steps { grid-template-columns: 1fr; }
  .offer-prices-steps li { align-items: center; }
  .offer-prices-steps li + li { border-left: 0; border-top: 1px solid rgba(92,36,65,.14); }
  .offer-prices-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .offer-prices-row small { white-space: nowrap; }
  .offer-prices-tiles small { overflow-wrap: normal; }
}