/* SpiderHunts site-2026.css: generated, do not edit. Source: automation/redesign/css/ */

/* ---- 00-tokens.css ---- */
/* =========================================================================
   SpiderHunts 2026 redesign layer (site-2026.css), built from
   automation/redesign/css/*.css by automation/redesign/build_assets.py.
   DO NOT EDIT assets/css/site-2026.css: edit the partials and rebuild.

   Every rule is scoped under html.sh26. Only phase-1 (non-blog) pages carry
   that class, so blog posts, blog.html and the problems hubs, which load the
   same legacy sheets and the same header/footer includes, are untouched.
   Kill switch: empty _includes/head-2026.html.

   00 tokens (v2, spec rd/DESIGN-v2.md section B): self-hosted fonts with
   size-adjusted local fallbacks, then every --sh-* variable. Use the
   variables, never raw hex, in every other partial.
   ========================================================================= */

/* ---- Fonts: self-hosted, latin subset, SIL OFL 1.1 (assets/fonts/OFL-LICENSES.md).
   Fetched from the Google Fonts CSS2 API (woff2, latin) and served from our own
   origin, so no request goes to Google.

   Fraunces: the API pins opsz and wght but leaves SOFT as a live axis at 0,
   and Safari ignores both the @font-face font-variation-settings descriptor
   and any inherited value once a rule uses the font shorthand. So SOFT 30 is
   baked into the files (fontTools instancer): static instances that render
   the approved "Fraunces 500 (soft 30)" sample in every browser with no
   font-variation-settings at all. Do not add font-variation-settings for it.
   - roman: opsz 144, wght 500, SOFT 30 (all display type);
   - italic: opsz 72, wght 400, SOFT 30 (verbatim client quotes only).
   Both faces are declared for weights 100-900 on purpose: Fraunces exists here
   only at those weights, so a legacy rule asking for 700/800/900 still gets
   the real glyphs instead of a faux bold.
   Fustat: Google's variable file, unmodified (wght axis 200-800; the site
   uses 400, 500 and 700). */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-opsz144-500-soft30-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-opsz72-400-soft30-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fustat";
  src: url("/assets/fonts/fustat-200-800-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Size-adjusted local fallbacks: while a webfont loads (font-display:
   swap), text is set in Georgia / Arial scaled to the webfont's width and
   vertical metrics, so the swap moves nothing (no font CLS).
   Measured 2026-10-31 in Chrome from the shipped files against Windows
   Georgia / Arial (text widths of real site copy, kerning on);
   ascent/descent from the fonts' hhea (Fraunces 1956/510 per 2000 em,
   Fustat 1000/420 per 1000 em; line gap 0), divided by size-adjust. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  font-style: normal;
  font-weight: 100 900;
  size-adjust: 87.03%;
  ascent-override: 112.37%;
  descent-override: 29.30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic");
  font-style: italic;
  font-weight: 100 900;
  size-adjust: 89.51%;
  ascent-override: 109.26%;
  descent-override: 28.49%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fustat Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  font-weight: 400;
  size-adjust: 99.30%;
  ascent-override: 100.70%;
  descent-override: 42.30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fustat Fallback";
  src: local("Arial"), local("ArialMT");
  font-style: normal;
  font-weight: 500;
  size-adjust: 100.50%;
  ascent-override: 99.50%;
  descent-override: 41.79%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fustat Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-style: normal;
  font-weight: 700;
  size-adjust: 96.98%;
  ascent-override: 103.11%;
  descent-override: 43.31%;
  line-gap-override: 0%;
}

html.sh26 {
  /* ---- Colour (spec B). Contrast, WCAG 2.x, computed 2026-10-31:
     --sh-muted 5.68:1 on ground, 5.14:1 on sand, 4.66:1 on sand-2, 5.89:1 on paper.
     --sh-blue 5.42:1 on ground, 4.90:1 on sand, 5.62:1 on paper; white on blue 5.62:1.
     Blue against body text is only 2.64:1, so links inside running text keep
     an underline (see .sh-link). Never put small blue text on --sh-sand-2 (4.44:1). */
  --sh-ground: #FBFBF8;       /* page */
  --sh-sand: #F3EFE8;         /* bands, panels, chips, forms, footer */
  --sh-sand-2: #EAE4DA;       /* hairlines on sand, pressed chip, hover on sand */
  --sh-paper: #FFFFFF;        /* form fields, the viewer frame; also "white" on blue */
  --sh-ink: #0B0E12;          /* headings, UI text */
  --sh-body: #23282E;         /* body copy */
  --sh-muted: #5F656C;        /* secondary text */
  --sh-line: rgba(11, 14, 18, .12);   /* hairlines: cards, tables, fields */
  --sh-rule: rgba(11, 14, 18, .82);   /* row dividers: accordions, rowlinks (weichie's rows are solid ink) */
  --sh-blue: #0A6E9E;         /* THE accent */
  --sh-blue-ink: #085A82;     /* hover and pressed */
  --sh-blue-tile: #EAF3F8;    /* soft icon tiles, selected chips */
  --sh-star: #E8A33D;         /* ratings only */
  --sh-bad: #B4432B;          /* form errors only (5.56:1 on paper) */
  --sh-select: rgba(10, 110, 158, .18);  /* text selection */
  --sh-scroll: #C9C3B8;       /* neutral scrollbar thumb */
  --sh-scroll-hover: #A8A296;
  /* One soft shadow: dialogs and the open mega menu only. Never on cards. */
  --sh-shadow: 0 1px 2px rgba(11, 14, 18, .04), 0 28px 64px -28px rgba(11, 14, 18, .30);

  /* ---- Type */
  --sh-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --sh-font: "Fustat", "Fustat Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sh-xl: clamp(56px, 9.5vw, 144px);       /* giant section titles, at most 2 per page */
  --sh-h1-home: clamp(46px, 7.4vw, 112px);
  --sh-h1: clamp(40px, 6vw, 92px);
  --sh-h2: clamp(34px, 4.8vw, 72px);
  --sh-h3: clamp(22px, 2.2vw, 30px);
  --sh-lead: 21px;            /* Fustat 500, line-height --sh-lead-lh, -0.02em */
  --sh-lead-lh: 1.45;
  --sh-text: 17.5px;          /* Fustat 400, line-height --sh-text-lh, -0.01em */
  --sh-text-lh: 1.6;
  --sh-small: 15px;
  --sh-label: 12.5px;         /* Fustat 500 uppercase +0.02em, muted */
  --sh-track-display: -0.02em;
  --sh-lh-display: 1.04;      /* display sizes: 1.0 to 1.06 */

  /* ---- Layout */
  --sh-container: 1320px;
  --sh-gutter: clamp(20px, 5vw, 72px);
  --sh-section: clamp(80px, 10vw, 150px);
  --sh-gap: 24px;             /* 12-column grid gap */
  --sh-measure: 70ch;

  /* ---- Shape */
  --sh-r-img: 28px;           /* large images, carousel cards */
  --sh-r-card: 24px;          /* panels, cards, mega menu, dialogs */
  --sh-r-field: 14px;
  --sh-r-pill: 9999px;

  /* ---- Motion */
  --sh-ease: cubic-bezier(.2, .7, .2, 1);
  --sh-fast: .2s;             /* hover transitions */
  --sh-rv-rise: 16px;         /* reveal once */
  --sh-rv-dur: .7s;

  /* ---- Lucide line icons (lucide-static 0.454.0, ISC) as CSS masks, for
     CSS-only use: background: currentColor; mask: var(--sh-i-corner) center / contain no-repeat;
     corner = corner-down-right (the accordion arrow), chevron = chevron-down. */
  --sh-i-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 10 20 15 15 20'/%3E%3Cpath d='M4 4v7a4 4 0 0 0 4 4h12'/%3E%3C/svg%3E");
  --sh-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --sh-i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  --sh-i-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --sh-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --sh-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* <select> cannot hold a pseudo-element, so its chevron is an image in ink (#0B0E12). */
  --sh-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0E12' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  /* ---- v1 names, kept as aliases so partials and pages that still use them
     resolve to the v2 look. New rules use the v2 names above. */
  --sh-accent: var(--sh-blue);
  --sh-accent-ink: var(--sh-blue-ink);
  --sh-tile: var(--sh-blue-tile);
  --sh-tint: var(--sh-sand);
  --sh-ink-2: var(--sh-body);
  --sh-faint: var(--sh-muted);         /* v1 #8A929C failed AA; now muted */
  --sh-line-2: rgba(11, 14, 18, .22);
  --sh-mono: var(--sh-font);           /* no mono face in v2: metadata is Fustat with tabular numerals */
  --sh-serif: var(--sh-display);       /* quotes: Fraunces italic (set font-style: italic) */
  --sh-meta: 13.5px;
  --sh-r-ctl: var(--sh-r-field);
  /* v1 dark band tokens. DEPRECATED: v2 has no dark bands on sh26 pages.
     Kept only so unmigrated rules stay legible; do not use in new rules. */
  --sh-dark: #0E1216;
  --sh-dark-2: #171C22;
  --sh-dark-grad: linear-gradient(160deg, #171C22, #0E1216);
  --sh-dark-line: rgba(255, 255, 255, .10);
  --sh-dark-text: #E6ECF2;
  --sh-dark-muted: #9AA6B2;
  --sh-sky: #7DD3FC;
}

@media (max-width: 640px) {
  html.sh26 {
    --sh-lead: 19px;
    --sh-text: 16.5px;
    --sh-gap: 16px;
  }
}

/* ---- 01-base.css ---- */
/* =========================================================================
   01 base (v2): page ground, text defaults and the shared component
   vocabulary every slice builds with. Spec: rd/DESIGN-v2.md sections B and C.
   Reference page: automation/redesign/styleguide.html (preview server).

   Components: .sh-btn (+ --sand, --ink, --block, __ic), .sh-iconbtn,
   .sh-chip(s), .sh-label, .sh-dots, .sh-acc, .sh-card, .sh-panel,
   .sh-rowlink(s), .sh-sidehead, .sh-table(-wrap), .sh-form, .sh-field,
   .sh-ic, .sh-dialog, .sh-prose, type and layout utilities.
   v1 names kept and restyled: .sh-btn--line (now a sand-pill alias), .sh-link,
   .sh-meta, .sh-quote, .sh-cite, .sh-wrap, .sh-section, .sh-list,
   .sh-sidehead__head/__body, .sh-table-wrap, .sh-vh.

   Specificity (memory: site-css-layering):
   - style-light.css styles body.light and bare elements at (0,1,1)-(0,1,3).
     Element defaults here are either zero-specificity (:where) so any class
     rule in any sheet beats them, or html.sh26 :where(body) X = (0,1,2): equal
     to style-light's and later in the cascade, so ours wins and class rules in
     other partials still win over ours.
   - Component rules are html.sh26 .sh-x = (0,2,1) or more.
   - style-light's focus rule (0,2,2) forces border-radius: 6px on focused
     links, buttons, summaries and fields: every rounded component restates
     its radius on :focus-visible.
   - style-light's "body.light table td" is !important; .sh-table answers with
     !important, as commented there.
   - style-v30.css zeroes every margin and list style and makes images block:
     components set their own spacing.
   ========================================================================= */

/* ---------- Page ---------- */
html.sh26 {
  background: var(--sh-ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--sh-scroll) var(--sh-ground);
}
/* !important: style-light paints body.light white and several pages carry
   their own body background in a <style> block. */
html.sh26 body,
html.sh26 body.light {
  background: var(--sh-ground) !important;
  color: var(--sh-body);
  font-family: var(--sh-font);
  font-weight: 400;
  font-size: var(--sh-text);
  line-height: var(--sh-text-lh);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.sh26 ::selection { background: var(--sh-select); color: var(--sh-ink); }

/* The hidden attribute always hides on sh26 pages. Without this, any author
   display rule (for example .sh-btn's inline-flex) beats the UA's
   [hidden]{display:none} and a "hidden" element stays on screen. */
html.sh26 [hidden]:not([hidden="until-found"]) { display: none !important; }

/* A neutral scrollbar in place of style-light's blue-to-purple gradient.
   Modern Chrome and Firefox use scrollbar-color on <html>; these rules are
   for Safari and older Chrome. */
html.sh26::-webkit-scrollbar,
html.sh26 body::-webkit-scrollbar { width: 12px; height: 12px; }
html.sh26::-webkit-scrollbar-track,
html.sh26 body::-webkit-scrollbar-track { background: var(--sh-ground); }
html.sh26::-webkit-scrollbar-thumb,
html.sh26 body::-webkit-scrollbar-thumb { background: var(--sh-scroll); border: 3px solid var(--sh-ground); border-radius: var(--sh-r-pill); }
html.sh26::-webkit-scrollbar-thumb:hover,
html.sh26 body::-webkit-scrollbar-thumb:hover { background: var(--sh-scroll-hover); }

/* One focus ring everywhere: 2px blue, 3px away. (0,2,2) like style-light's
   rule, later in the cascade. Components restate their radius below. */
html.sh26 :where(body) :is(a, button, summary, input, select, textarea):focus-visible,
html.sh26 :where([tabindex]):focus-visible {
  outline: 2px solid var(--sh-blue);
  outline-offset: 3px;
}

/* ---------- Type defaults ---------- */
/* Zero specificity: headings with no component styling take the v2 scale;
   any class rule anywhere wins. */
:where(html.sh26) :where(h1, h2, h3) {
  font-family: var(--sh-display);
  font-weight: 500;
  letter-spacing: var(--sh-track-display);
  text-wrap: balance;
}
:where(html.sh26) :where(h1) { font-size: var(--sh-h1); line-height: var(--sh-lh-display); }
:where(html.sh26) :where(h2) { font-size: var(--sh-h2); line-height: var(--sh-lh-display); }
:where(html.sh26) :where(h3) { font-size: var(--sh-h3); line-height: 1.15; }
/* An <em> inside a heading is the blue accent word, upright (spec B). */
:where(html.sh26) :where(h1, h2, h3, .sh-xl, .sh-h1-home, .sh-h1, .sh-h2) :where(em) { font-style: normal; color: var(--sh-blue); }
/* style-light.css L84 paints body.light h1-h4 navy (#0B1B2B) at (0,1,2).
   Same specificity, later in the cascade: ink wins. */
html.sh26 :where(body) :is(h1, h2, h3, h4) { color: var(--sh-ink); }
/* style-light.css L1749 paints every <strong> navy at (0,1,2). */
html.sh26 :where(body) :is(strong, b) { color: inherit; }
:where(html.sh26) :where(hr) { border: 0; border-top: 1px solid var(--sh-line); }

/* Type utilities (use on any element; Fraunces sizes from the scale). */
html.sh26 .sh-display { font-family: var(--sh-display); font-weight: 500; letter-spacing: var(--sh-track-display); }
html.sh26 .sh-xl,
html.sh26 .sh-h1-home,
html.sh26 .sh-h1,
html.sh26 .sh-h2,
html.sh26 .sh-h3 {
  margin: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  text-wrap: balance;
}
html.sh26 .sh-xl { font-size: var(--sh-xl); line-height: 1; }
html.sh26 .sh-h1-home { font-size: var(--sh-h1-home); line-height: 1.02; }
html.sh26 .sh-h1 { font-size: var(--sh-h1); line-height: var(--sh-lh-display); }
html.sh26 .sh-h2 { font-size: var(--sh-h2); line-height: var(--sh-lh-display); }
html.sh26 .sh-h3 { font-size: var(--sh-h3); line-height: 1.15; }
/* The blue accent word. Resets the legacy clipped-gradient text trick too. */
html.sh26 .sh-accent {
  color: var(--sh-blue) !important;
  font-style: normal;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
}
html.sh26 .sh-lead {
  margin: 0;
  max-width: 60ch;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: var(--sh-lead);
  line-height: var(--sh-lead-lh);
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}
html.sh26 .sh-muted { color: var(--sh-muted); }
html.sh26 .sh-small { font-size: var(--sh-small); }

/* The uppercase annotation (weichie's small labels). At most about 3 a page,
   never above every section. An 18px blue line icon may precede the text. */
html.sh26 .sh-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: var(--sh-label);
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
html.sh26 .sh-label svg { flex: none; width: 18px; height: 18px; color: var(--sh-blue); }

/* Metadata (v1 name): price, duration, date, company number.
   Never tabular-nums with Fustat: its tnum feature also widens the space,
   comma, period and colon (measured: +0.37em per space), which leaves gaps
   in "£3,000" or "5.68:1". Align numbers by right-aligning the cell instead. */
html.sh26 .sh-meta {
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: var(--sh-meta);
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: normal;
  color: var(--sh-muted);
}

/* Verbatim client quotes only: Fraunces italic. */
html.sh26 .sh-quote {
  margin: 0;
  font-family: var(--sh-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  quotes: "\201C" "\201D" "\2018" "\2019";
}
html.sh26 .sh-cite {
  display: block;
  margin-top: 18px;
  font-family: var(--sh-font);
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sh-ink);
}
html.sh26 .sh-cite span { display: block; font-weight: 400; color: var(--sh-muted); }

/* ---------- Links ---------- */
/* Blue text links. Inside running text the blue is only 2.64:1 against body
   copy, so a light underline stays at rest (WCAG 1.4.1) and firms up on
   hover. --quiet drops the resting underline for standalone links. */
html.sh26 .sh-link,
html.sh26 .sh-prose a:not([class]) {
  color: var(--sh-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(10, 110, 158, .35);
  transition: color var(--sh-fast) ease, text-decoration-color var(--sh-fast) ease;
}
html.sh26 .sh-link:hover,
html.sh26 .sh-prose a:not([class]):hover { color: var(--sh-blue-ink); text-decoration-color: currentColor; }
html.sh26 .sh-link--quiet { text-decoration-color: transparent; }
/* Arrow links: --arrow for "View all", --out for links that leave the site. */
html.sh26 .sh-link--arrow::after,
html.sh26 .sh-link--out::after {
  content: "";
  display: inline-block;
  width: .95em;
  height: .95em;
  margin-left: .3em;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 .sh-link--out::after {
  -webkit-mask-image: var(--sh-i-arrow-up-right);
  mask-image: var(--sh-i-arrow-up-right);
}
html.sh26 .sh-link--arrow:hover::after { transform: translateX(3px); }
html.sh26 .sh-link--out:hover::after { transform: translate(2px, -2px); }

/* ---------- Buttons ---------- */
/* Pill with a trailing icon circle: <a class="sh-btn" href="...">Label
   <span class="sh-btn__ic" aria-hidden="true"><svg ...></svg></span></a>.
   Colours come from --sh-btn-* so a variant only swaps variables. Colour and
   text-decoration are !important because legacy link rules (footer, .sp,
   style-light's inline-colour sweeps) reach into anchors. */
html.sh26 .sh-btn {
  --sh-btn-bg: var(--sh-blue);
  --sh-btn-bg-hover: var(--sh-blue-ink);
  --sh-btn-fg: var(--sh-paper);
  --sh-btn-ic-bg: var(--sh-paper);
  --sh-btn-ic-fg: var(--sh-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  margin: 0;
  padding: 8px 22px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-btn-bg);
  box-shadow: none;
  color: var(--sh-btn-fg) !important;
  -webkit-text-fill-color: var(--sh-btn-fg);
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  text-decoration: none !important;
  text-transform: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
/* The circle sits in the right padding: 22px left, 8px right, as specced. */
html.sh26 .sh-btn__ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0 -14px 0 0;
  border-radius: 50%;
  background: var(--sh-btn-ic-bg);
  color: var(--sh-btn-ic-fg);
  -webkit-text-fill-color: var(--sh-btn-ic-fg);
}
html.sh26 .sh-btn__ic svg {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform .25s var(--sh-ease);
}
html.sh26 .sh-btn:hover { background: var(--sh-btn-bg-hover); }
/* Icon nudge: diagonal for arrow-up-right (default), sideways for
   arrow-right (__ic--x), a small tilt for calendar or phone (__ic--tilt). */
html.sh26 .sh-btn:hover .sh-btn__ic svg { transform: translate(2px, -2px); }
html.sh26 .sh-btn:hover .sh-btn__ic--x svg { transform: translateX(3px); }
html.sh26 .sh-btn:hover .sh-btn__ic--tilt svg { transform: rotate(-12deg); }
html.sh26 .sh-btn:active { transform: translateY(1px); }
html.sh26 .sh-btn:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .sh-btn:is([disabled], [aria-disabled="true"]) { opacity: .45; cursor: not-allowed; transform: none; }
html.sh26 .sh-btn:is([disabled], [aria-disabled="true"]):hover { background: var(--sh-btn-bg); }
html.sh26 .sh-btn:is([disabled], [aria-disabled="true"]):hover .sh-btn__ic svg { transform: none; }
/* Sand pill: ink text, blue circle, white icon (the header CTA). --line is the
   v1 name, kept as an alias. */
html.sh26 .sh-btn--sand,
html.sh26 .sh-btn--line {
  --sh-btn-bg: var(--sh-sand);
  --sh-btn-bg-hover: var(--sh-sand-2);
  --sh-btn-fg: var(--sh-ink);
  --sh-btn-ic-bg: var(--sh-blue);
  --sh-btn-ic-fg: var(--sh-paper);
}
/* On a sand surface the sand pill turns white so it stays visible. */
html.sh26 :is(.sh-panel, .sh-card--sand, .sh-section--sand, .sh-band) :is(.sh-btn--sand, .sh-btn--line) {
  --sh-btn-bg: var(--sh-paper);
  --sh-btn-bg-hover: var(--sh-sand-2);
}
/* Ink pill: use rarely. */
html.sh26 .sh-btn--ink {
  --sh-btn-bg: var(--sh-ink);
  --sh-btn-bg-hover: var(--sh-body);
  --sh-btn-fg: var(--sh-paper);
  --sh-btn-ic-bg: var(--sh-blue);
  --sh-btn-ic-fg: var(--sh-paper);
}
/* Full width with the label left and the circle right. */
html.sh26 .sh-btn--block { display: flex; width: 100%; justify-content: space-between; }

/* Round icon-only button (menu, pause/play, prev/next, close). 44px target.
   Give it an aria-label. */
html.sh26 .sh-iconbtn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sh-sand);
  color: var(--sh-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .sh-iconbtn svg { display: block; width: 20px; height: 20px; }
html.sh26 .sh-iconbtn:hover { background: var(--sh-sand-2); }
html.sh26 .sh-iconbtn--blue { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .sh-iconbtn--blue:hover { background: var(--sh-blue-ink); }
html.sh26 .sh-iconbtn--paper { background: var(--sh-paper); }
html.sh26 .sh-iconbtn:focus-visible { border-radius: 50%; }

/* ---------- Chips ---------- */
/* Sand pill, 34px. Static tag (span/li) or interactive (button/a/label).
   Selected = aria-pressed/aria-selected/aria-checked="true", .is-selected,
   or a checked radio/checkbox right before a label.sh-chip. */
html.sh26 .sh-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
html.sh26 .sh-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
html.sh26 .sh-chip svg { flex: none; width: 16px; height: 16px; color: var(--sh-blue); }
html.sh26 :is(button, a, label).sh-chip {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 :is(button, a, label).sh-chip:hover,
html.sh26 :is(button, a, label).sh-chip:active { background: var(--sh-sand-2); }
/* Selected: the pale-blue tile plus a 1px blue ring, so the state does not
   rest on a faint background change alone (WCAG 1.4.11). */
html.sh26 :is(.sh-chip[aria-pressed="true"], .sh-chip[aria-selected="true"], .sh-chip[aria-checked="true"], .sh-chip.is-selected, input:checked + .sh-chip),
html.sh26 :is(.sh-chip[aria-pressed="true"], .sh-chip[aria-selected="true"], .sh-chip[aria-checked="true"], .sh-chip.is-selected, input:checked + .sh-chip):hover {
  background: var(--sh-blue-tile);
  color: var(--sh-blue-ink);
  box-shadow: inset 0 0 0 1px var(--sh-blue);
}
html.sh26 input:focus-visible + .sh-chip { outline: 2px solid var(--sh-blue); outline-offset: 3px; }
html.sh26 .sh-chip:focus-visible { border-radius: var(--sh-r-pill); }
/* On sand, chips are white. */
html.sh26 :is(.sh-panel, .sh-card--sand, .sh-section--sand, .sh-band) .sh-chip:not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]):not(.is-selected) { background: var(--sh-paper); }
html.sh26 :is(.sh-panel, .sh-card--sand, .sh-section--sand, .sh-band) :is(button, a, label).sh-chip:not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-checked="true"]):not(.is-selected):hover { background: var(--sh-sand-2); }

/* ---------- Dot list ---------- */
/* 7px blue round bullets; an optional <strong> lead in ink, then the text. */
html.sh26 .sh-dots { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
html.sh26 .sh-dots > li { position: relative; margin: 0; padding: 0 0 0 22px; color: var(--sh-body); }
html.sh26 .sh-dots > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(.8em - 3.5px);
  top: calc(.5lh - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-blue);
}
html.sh26 .sh-dots > li > strong:first-child { color: var(--sh-ink); font-weight: 600; }

/* ---------- Accordion ---------- */
/* Native <details> rows: <div class="sh-acc"><details><summary>Title</summary>
   <div class="sh-acc__body">...</div></details>...</div>. A blue corner arrow
   before the title, a + that turns into a x when open, a rule under each row.
   The panel height animates where ::details-content is supported (Chrome 131+);
   elsewhere it opens at once. No JS needed. */
html.sh26 .sh-acc { margin: 0; padding: 0; list-style: none; interpolate-size: allow-keywords; }
html.sh26 :is(.sh-acc > details, details.sh-acc__item) { margin: 0; border-bottom: 1px solid var(--sh-rule); interpolate-size: allow-keywords; }
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  padding: 26px 0;
  list-style: none;
  cursor: pointer;
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  -webkit-tap-highlight-color: transparent;
}
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary::-webkit-details-marker { display: none; }
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary::marker { content: ""; }
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .2em;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin: .1em 0 0 auto;
  background: var(--sh-ink);
  -webkit-mask: var(--sh-i-plus) center / contain no-repeat;
  mask: var(--sh-i-plus) center / contain no-repeat;
  transition: transform .3s var(--sh-ease), background-color var(--sh-fast) ease;
}
html.sh26 :is(.sh-acc > details, details.sh-acc__item)[open] > summary::after { transform: rotate(45deg); }
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary:hover::after { background: var(--sh-blue); }
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary:focus-visible { border-radius: 2px; }
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > :not(summary) {
  margin: 0;
  padding: 0 40px 0 32px;
  color: var(--sh-body);
}
html.sh26 :is(.sh-acc > details, details.sh-acc__item) > :not(summary):last-child { padding-bottom: 28px; }
html.sh26 .sh-acc__body > * + * { margin-top: 12px; }
html.sh26 .sh-acc__body { max-width: calc(var(--sh-measure) + 72px); }
html.sh26 :is(.sh-acc > details, details.sh-acc__item)::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .32s var(--sh-ease), content-visibility .32s allow-discrete;
}
html.sh26 :is(.sh-acc > details, details.sh-acc__item)[open]::details-content { block-size: auto; }
@media (max-width: 640px) {
  html.sh26 :is(.sh-acc > details, details.sh-acc__item) > summary { padding: 22px 0; font-size: 18px; }
  html.sh26 :is(.sh-acc > details, details.sh-acc__item) > :not(summary) { padding-right: 0; }
}

/* ---------- Image card ---------- */
/* <article class="sh-card"><a class="sh-card__media" href="..."><img ...></a>
   <h3 class="sh-card__title"><a class="sh-card__link" href="...">Name</a></h3>
   <p class="sh-card__cat">Category</p><p class="sh-card__desc">Two lines</p></article>.
   No image: add .sh-card--sand (or simply omit the media) for a sand panel. */
html.sh26 .sh-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; color: var(--sh-body); }
html.sh26 .sh-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0 0 20px;
  aspect-ratio: var(--sh-card-ratio, 4 / 3);
  border-radius: var(--sh-r-img);
  background: var(--sh-sand);
  isolation: isolate;
}
html.sh26 .sh-card__media > :is(img, picture, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sh-card-focus, 50% 0%);
  transition: transform .6s var(--sh-ease);
}
html.sh26 .sh-card__media > picture > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--sh-card-focus, 50% 0%); }
html.sh26 .sh-card:hover .sh-card__media > :is(img, picture, video) { transform: scale(1.03); }
html.sh26 .sh-card__media:focus-visible { border-radius: var(--sh-r-img); }
html.sh26 .sh-card__title {
  margin: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .sh-card__title a { color: inherit; text-decoration: none; }
/* A stretched primary link makes the whole card clickable. */
html.sh26 .sh-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--sh-r-img); }
html.sh26 .sh-card__link:focus-visible { outline: 0; }
html.sh26 .sh-card__link:focus-visible::after { outline: 2px solid var(--sh-blue); outline-offset: 3px; }
html.sh26 .sh-card__cat { margin: 10px 0 0; font-size: var(--sh-small); line-height: 1.4; color: var(--sh-muted); }
html.sh26 .sh-card__desc {
  margin: 12px 0 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--sh-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
html.sh26 :is(.sh-card--sand, .sh-card:not(:has(> .sh-card__media))) {
  padding: clamp(24px, 3vw, 36px);
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
}
html.sh26 :is(.sh-card--sand, .sh-card:not(:has(> .sh-card__media))) .sh-card__link::after { border-radius: var(--sh-r-card); }
html.sh26 :is(.sh-card--sand, .sh-card:not(:has(> .sh-card__media))) > .sh-ic { margin-bottom: 22px; }
html.sh26 :is(.sh-card--sand:has(.sh-card__link), .sh-card:not(:has(> .sh-card__media)):has(.sh-card__link)) { transition: background-color var(--sh-fast) ease; }
html.sh26 :is(.sh-card--sand:has(.sh-card__link:hover), .sh-card:not(:has(> .sh-card__media)):has(.sh-card__link:hover)) { background: var(--sh-sand-2); }

/* ---------- Soft icon tile ---------- */
/* Lucide line icon (stroke 1.7) in blue on the pale-blue circle; --tile for a
   rounded square. Never emoji. */
html.sh26 .sh-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sh-blue-tile);
  color: var(--sh-blue);
}
html.sh26 .sh-ic svg { display: block; width: 22px; height: 22px; }
html.sh26 .sh-ic--tile { border-radius: var(--sh-r-field); }
html.sh26 .sh-ic--lg { width: 56px; height: 56px; }
html.sh26 .sh-ic--lg svg { width: 26px; height: 26px; }

/* ---------- Panel ---------- */
/* Sand panel for CTA bands and forms. --cta: text left, a blue line icon top
   right, the actions bottom right (stacked on phones). */
html.sh26 .sh-panel {
  position: relative;
  margin: 0;
  padding: clamp(28px, 4.6vw, 64px);
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  color: var(--sh-body);
}
html.sh26 .sh-panel--cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "icon" "body" "actions";
  gap: 24px;
}
html.sh26 .sh-panel__icon { grid-area: icon; display: block; width: clamp(44px, 5vw, 72px); height: clamp(44px, 5vw, 72px); color: var(--sh-blue); }
html.sh26 .sh-panel__icon svg { display: block; width: 100%; height: 100%; }
html.sh26 .sh-panel__body { grid-area: body; min-width: 0; max-width: 62ch; }
html.sh26 .sh-panel__title {
  margin: 0 0 14px;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: var(--sh-h3);
  line-height: 1.15;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .sh-panel__text { margin: 0; font-size: 18px; line-height: 1.55; letter-spacing: -0.015em; color: var(--sh-ink); }
html.sh26 .sh-panel__actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (min-width: 900px) {
  html.sh26 .sh-panel--cta {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "body icon" "body actions";
    gap: 32px 64px;
    min-height: 300px;
  }
  html.sh26 .sh-panel--cta .sh-panel__icon { justify-self: end; align-self: start; }
  html.sh26 .sh-panel--cta .sh-panel__body { align-self: center; }
  html.sh26 .sh-panel--cta .sh-panel__actions { justify-self: end; align-self: end; }
}

/* ---------- Row links ---------- */
/* Weichie's "Other services" rows, our way: rule, soft icon, name, and a
   small blue "Explore" with an arrow. <ul class="sh-rowlinks"><li>
   <a class="sh-rowlink" href="/services/..."><span class="sh-rowlink__ic" aria-hidden="true">svg</span>
   <span class="sh-rowlink__name">Name</span><span class="sh-rowlink__go" aria-hidden="true">Explore</span></a></li></ul> */
html.sh26 .sh-rowlinks { margin: 0; padding: 0; list-style: none; }
html.sh26 .sh-rowlinks > li { margin: 0; }
html.sh26 .sh-rowlink {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 80px;
  padding: 16px 0;
  border-bottom: 1px solid var(--sh-rule);
  color: var(--sh-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
html.sh26 .sh-rowlink__ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sh-blue-tile);
  color: var(--sh-blue);
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .sh-rowlink__ic svg { display: block; width: 20px; height: 20px; }
html.sh26 .sh-rowlink__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}
html.sh26 .sh-rowlink__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  color: var(--sh-blue);
}
html.sh26 .sh-rowlink__go::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 .sh-rowlink:hover .sh-rowlink__ic { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .sh-rowlink:hover .sh-rowlink__go::after { transform: translateX(4px); }
html.sh26 .sh-rowlink:focus-visible { border-radius: 4px; }
@media (max-width: 640px) {
  html.sh26 .sh-rowlink { min-height: 68px; gap: 12px; }
  html.sh26 .sh-rowlink__name { font-size: 18px; }
}

/* ---------- Side head ---------- */
/* Label and/or H2 in columns 1-4 (sticky on long sections), content in 5-12
   with text at about 70ch. Stacks under 1024px. --static turns sticky off. */
html.sh26 .sh-sidehead { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
html.sh26 .sh-sidehead__body { min-width: 0; }
html.sh26 .sh-sidehead__body > :is(p, ul, ol) { max-width: var(--sh-measure); }
@media (min-width: 1024px) {
  html.sh26 .sh-sidehead {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sh-gap);
    row-gap: 0;
    align-items: start;
  }
  html.sh26 .sh-sidehead > .sh-sidehead__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--sh-hdr, 76px) + 32px); }
  html.sh26 .sh-sidehead > .sh-sidehead__body { grid-column: 5 / -1; }
  html.sh26 .sh-sidehead--static > .sh-sidehead__head { position: static; }
}

/* ---------- Table ---------- */
/* Hairline rows on the ground, a sand header row, number cells right-aligned
   (.sh-num; no tabular-nums, see .sh-meta); the wrapper scrolls sideways on
   phones. The !important declarations answer
   style-light.css "body.light table td{color;border-bottom}!important" and its
   gradient table headers. */
html.sh26 .sh-table-wrap { max-width: 100%; margin: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
html.sh26 .sh-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--sh-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--sh-body);
}
html.sh26 .sh-table caption { caption-side: top; padding: 0 0 14px; text-align: left; font-weight: 500; font-size: var(--sh-small); color: var(--sh-muted); }
html.sh26 .sh-table thead th {
  padding: 14px 18px;
  border: 0 !important;
  background: var(--sh-sand) !important;
  color: var(--sh-ink) !important;
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.35;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
html.sh26 .sh-table thead th:first-child { border-radius: var(--sh-r-field) 0 0 var(--sh-r-field); }
html.sh26 .sh-table thead th:last-child { border-radius: 0 var(--sh-r-field) var(--sh-r-field) 0; }
html.sh26 .sh-table thead th:only-child { border-radius: var(--sh-r-field); }
html.sh26 .sh-table :is(tbody, tfoot) :is(td, th) {
  padding: 18px;
  border-bottom: 1px solid var(--sh-line) !important;
  background: none !important;
  color: var(--sh-body) !important;
  text-align: left;
  vertical-align: top;
}
html.sh26 .sh-table :is(tbody, tfoot) tr > :first-child { color: var(--sh-ink) !important; font-weight: 500; }
html.sh26 .sh-table .sh-num { text-align: right; white-space: nowrap; }
/* Phones: columns keep a readable width, so a wide table scrolls inside its
   wrapper instead of crushing every cell. */
@media (max-width: 640px) {
  html.sh26 .sh-table :is(th, td) { min-width: 8.5em; }
  html.sh26 .sh-table :is(tbody, tfoot) :is(td, th) { padding: 16px 14px; }
}

/* ---------- Forms ---------- */
/* Fields on paper, 1px hairline, 14px radius, 52px tall; labels Fustat 500 14px;
   blue focus ring. Applies inside .sh-form, .sh-field and any form in a
   .sh-panel, so existing forms keep their ids, names, values and scripts and
   only change look. The honeypot (name="website") is never touched. */
html.sh26 .sh-form { display: grid; gap: 18px; margin: 0; }
html.sh26 .sh-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 640px) {
  html.sh26 .sh-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
html.sh26 .sh-field { display: grid; gap: 8px; min-width: 0; margin: 0; }
html.sh26 :is(.sh-field > label, .sh-field__label, .sh-form label:not(.sh-chip, .sh-check), .sh-panel form label:not(.sh-chip, .sh-check)) {
  display: block;
  margin: 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--sh-ink);
}
html.sh26 .sh-field__hint { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--sh-muted); }
html.sh26 .sh-field__error { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--sh-bad); }
/* The input branch sits in :where() so this rule is (0,2,3): it still beats
   style-light's "body.light input" (0,1,2) and ".sp .sp-i" (0,2,0), and the
   textarea and select rules below (same specificity, later) can refine it. */
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) :is(:where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="range"], [type="color"], [name="website"])), select, textarea) {
  display: block;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-field);
  background-color: var(--sh-paper);
  box-shadow: none;
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-weight: 400;
  font-size: 16.5px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--sh-fast) ease, box-shadow var(--sh-fast) ease;
}
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) textarea { min-height: 136px; resize: vertical; line-height: 1.5; }
/* Lucide chevron-down in ink (token --sh-select-arrow). */
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) select {
  padding-right: 50px;
  background-image: var(--sh-select-arrow);
  background-position: right 18px center;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  cursor: pointer;
}
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) :is(input, textarea)::placeholder { color: var(--sh-muted); opacity: 1; }
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [name="website"]), select, textarea):hover { border-color: var(--sh-line-2); }
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [name="website"]), select, textarea):focus-visible {
  border-color: var(--sh-blue);
  border-radius: var(--sh-r-field);
  outline: 2px solid var(--sh-blue);
  outline-offset: 2px;
}
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) :is(input, select, textarea):is([aria-invalid="true"], :user-invalid) { border-color: var(--sh-bad); }
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) :is(input, select, textarea):disabled { opacity: .6; cursor: not-allowed; background-color: var(--sh-sand); }
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) :is(input, textarea):-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px var(--sh-paper) inset;
  -webkit-text-fill-color: var(--sh-ink);
}
html.sh26 :is(.sh-field, .sh-form, .sh-panel form) input:is([type="checkbox"], [type="radio"]) { width: 18px; height: 18px; margin: 0; accent-color: var(--sh-blue); }
html.sh26 .sh-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--sh-body); }
html.sh26 .sh-check input { flex: none; margin-top: 2px; }
/* Submit: the primary pill, full width on phones. */
@media (max-width: 640px) {
  html.sh26 :is(.sh-form, .sh-panel form) :is(button, input)[type="submit"].sh-btn { display: flex; width: 100%; justify-content: space-between; }
}

/* ---------- Dialog ---------- */
/* <dialog class="sh-dialog"> opened with showModal(). Never give a dialog a
   display value outside [open] (a closed dialog would show), and restore the
   centring margin that style-v30's *{margin:0} removes. */
html.sh26 dialog.sh-dialog {
  max-width: min(1120px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-ground);
  color: var(--sh-body);
  box-shadow: var(--sh-shadow);
}
html.sh26 dialog.sh-dialog::backdrop { background: rgba(11, 14, 18, .45); }

/* ---------- Prose ---------- */
/* Readable defaults for a block of running text: paragraph rhythm, blue
   underlined links, dot bullets on plain lists. */
html.sh26 .sh-prose { max-width: var(--sh-measure); color: var(--sh-body); }
html.sh26 .sh-prose > * + * { margin-top: 1em; }
html.sh26 .sh-prose > :is(h2, h3) { margin-top: 1.6em; }
html.sh26 .sh-prose strong { color: var(--sh-ink); }
html.sh26 .sh-prose ul:not([class]) { margin-left: 0; padding: 0; list-style: none; }
html.sh26 .sh-prose ul:not([class]) > li { position: relative; padding-left: 22px; }
html.sh26 .sh-prose ul:not([class]) > li + li { margin-top: 8px; }
html.sh26 .sh-prose ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(.8em - 3.5px);
  top: calc(.5lh - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-blue);
}

/* ---------- Layout ---------- */
/* Container: content max 1320px, gutters outside it. */
html.sh26 .sh-wrap {
  width: 100%;
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sh-gutter);
  padding-right: var(--sh-gutter);
}
html.sh26 .sh-section { padding-top: var(--sh-section); padding-bottom: var(--sh-section); }
html.sh26 .sh-section--sand,
html.sh26 .sh-band { background: var(--sh-sand); }
html.sh26 .sh-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sh-gap); }
html.sh26 .sh-stack > * + * { margin-top: var(--sh-stack, 24px); }
/* A heading inside a stack opens a new step: twice the gap above it. */
html.sh26 .sh-stack > :is(h2, h3, h4) + * { margin-top: 16px; }
html.sh26 .sh-stack > * + :is(h2, h3, h4) { margin-top: calc(var(--sh-stack, 24px) * 2.5); }

/* Indexed list (v1 name): rows ruled below, title and a link right-aligned
   on desktop. */
html.sh26 .sh-list { margin: 0; padding: 0; list-style: none; }
html.sh26 .sh-list > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; margin: 0; padding: 24px 0; border-bottom: 1px solid var(--sh-rule); }
@media (min-width: 900px) {
  html.sh26 .sh-list > li { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
}

/* Visually hidden but read by assistive tech. */
html.sh26 .sh-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Reveal once (opt-in) ---------- */
/* [data-sh-rv] rises 16px and fades in over .7s the first time it is seen;
   00-core.js adds .is-in (and the stagger). The hidden state needs .sh-js, so
   content stays visible without JS; elements already on screen at load are
   never hidden. */
html.sh26.sh-js [data-sh-rv] {
  opacity: 0;
  transform: translateY(var(--sh-rv-rise));
  transition: opacity var(--sh-rv-dur) var(--sh-ease), transform var(--sh-rv-dur) var(--sh-ease);
}
html.sh26.sh-js [data-sh-rv].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.sh26 *,
  html.sh26 *::before,
  html.sh26 *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  html.sh26.sh-js [data-sh-rv] { opacity: 1; transform: none; transition: none; }
}

/* ---- 10-chrome.css ---- */
/* =========================================================================
   10 chrome (v2): the shared header (_includes/header.html) and footer
   (_includes/footer.html) on phase-1 pages. Owner: chrome agent.
   Spec: rd/DESIGN-v2.md section E. Markup contract and the home page sync:
   automation/redesign/CHROME.md.

   Look (weichie-inspired, our own code and colours):
   - Header: ground bar that turns translucent with a blur and a hairline once
     the page scrolls (html.sh-scrolled, set by 00-core.js); logo left, nav
     right in Fustat 500 16px; the sand "Book a free call" pill with the blue
     calendar circle. Below 1000px: logo, a blue calendar circle and a sand
     menu circle; the menu opens as a full-height sand sheet in Fraunces.
   - Mega menu: a floating sand panel, 24px radius, the one soft shadow,
     Fraunces group heads, blue corner arrows, muted descriptions.
   - Footer: a sand band, link columns under muted Fraunces heads, social
     links, the giant "SpiderHunts" wordmark across the container, then the
     copyright line and the registered-office line.

   Why it is written the way it is (memory: site-css-layering):
   - The includes carry their own <style> blocks. They sit in <body>, so they
     come AFTER this sheet, and their selectors are two classes deep (0,2,0).
     Every rule here starts html.sh26, which adds (0,1,1) and wins.
   - TRAP: the header include shows and hides things inside (max-width:999px),
     (min-width:1000px), (max-width:560px) and (max-width:380px). A rule here
     that sets the same property OUTSIDE those queries wins at EVERY width
     (2026-09-07: the desktop menu appeared on phones). So this sheet never
     sets display on .shn-links, .shn-burger or .shn-mob, and every size it
     changes for the logo and the CTA is restated inside the matching query.
   - New markup in the includes (.shn-tel, .shn-pkg, .shn-26, .sh-ft-26) is
     hidden by the includes themselves and only revealed here, so every page
     without html.sh26 (the blog) renders exactly as before.
   - Footer rules use "html.sh26 body .footer" (0,2,2): that beats
     style-light's body.light .footer rules and still applies on a page that
     has no body.light (the home page's inline copy).
   - !important only against inline style attributes (mega links, the
     Trustpilot fallback link, the Clutch badge), style-light's !important
     sweeps of inline colours, and the utility bar's inline display.
   ========================================================================= */

/* ---------- Utility bar: hidden on phase-1 pages (the blog still shows it).
   Its phone moved to the header, its social links to the footer. ---------- */
html.sh26 .sh-utilbar { display: none !important; }

/* =========================================================================
   HEADER
   ========================================================================= */
/* Transparent on the ground at the top of the page, never a rule (spec I.3).
   service-page.js toggles .shn-hdr--over on generated pages: the same state.
   The 1px border is always there (transparent) so the height never changes. */
html.sh26 .shn-hdr,
html.sh26 .shn-hdr.shn-hdr--over,
html.sh26 .shn-hdr.sh-hdr--over {
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  font-family: var(--sh-font);
  line-height: normal;
  transition: background-color .25s ease, border-color .25s ease;
}
/* Scrolled: translucent ground with a blur, still no rule (as weichie). */
html.sh26.sh-scrolled .shn-hdr {
  background: rgba(251, 251, 248, .78);
  background: color-mix(in srgb, var(--sh-ground) 78%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px);
  backdrop-filter: saturate(1.4) blur(18px);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.sh26.sh-scrolled .shn-hdr { background: var(--sh-ground); }
}
/* A menu is open: solid. The mobile sheet is sand, so the bar joins it. */
html.sh26 .shn-hdr:has(.shn-mega:not([hidden])) {
  background: var(--sh-ground);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.sh26 .shn-hdr:has(.shn-mob:not([hidden])) {
  background: var(--sh-sand);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The bar: content as wide as the page's (1320px), gutters outside it.
   75px + the 1px rule = 76px (64px below 1000px). */
html.sh26 .shn-hdr .shn-bar {
  box-sizing: border-box;
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter));
  min-height: 75px;
  padding: 0 var(--sh-gutter);
  gap: clamp(20px, 2.6vw, 40px);
}
html.sh26 .shn-hdr .shn-logo { border-radius: 6px; }
html.sh26 .shn-hdr .shn-logo img { height: 42px; }

/* Nav, right-aligned: Fustat 500 16px in ink, blue when hovered, open or
   current. Display stays the include's (hidden below 1000px). */
html.sh26 .shn-hdr .shn-links {
  justify-content: flex-end;
  align-self: stretch;
  align-items: stretch;
  gap: clamp(22px, 2.2vw, 34px);
  padding: 0;
  font-size: 16px;
}
/* Each item as tall as the bar, so the pointer never leaves "Services" on
   its way down to the mega menu. (.shn-pkg: sh26-only, hidden by the include.) */
html.sh26 .shn-hdr .shn-links > li { display: flex; align-items: center; }
/* Weichie-length nav (spec I.3): Work, Services, About, Reviews, Packages &
   prices. "Work" (li.shn-26.shn-work, sh26-only markup) goes to /case-studies,
   so the "Case studies" item and FAQ leave the desktop bar; both stay in the
   markup, the mobile menu (FAQ) and the footer (both). */
html.sh26 .shn-hdr .shn-links > .shn-work { order: 1; }
html.sh26 .shn-hdr .shn-links > li:has(> [data-shn-services]) { order: 2; }
html.sh26 .shn-hdr .shn-links > li:has(> a[href="/about"]) { order: 3; }
html.sh26 .shn-hdr .shn-links > li:has(> a[href="/#testimonials"]) { order: 4; }
html.sh26 .shn-hdr .shn-links > .shn-pkg { order: 5; }
html.sh26 .shn-hdr .shn-links > li:has(> a[href="/case-studies"]):not(.shn-work),
html.sh26 .shn-hdr .shn-links > li:has(> a[href="/#faq"]) { display: none; }
html.sh26 .shn-hdr .shn-link {
  gap: 6px;
  padding: 10px 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  transition: color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-link:hover,
html.sh26 .shn-hdr .shn-link[aria-expanded="true"],
html.sh26 .shn-hdr .shn-link[aria-current="page"] { color: var(--sh-blue); }
html.sh26 .shn-hdr .shn-link:focus-visible { border-radius: 4px; }
html.sh26 .shn-hdr .shn-link__car { color: var(--sh-muted); }
html.sh26 .shn-hdr .shn-link:hover .shn-link__car,
html.sh26 .shn-hdr .shn-link[aria-expanded="true"] .shn-link__car { color: currentColor; }

/* Right cluster: the phone as a quiet text link (wide screens only), then the
   sand pill. */
html.sh26 .shn-hdr .shn-right { gap: clamp(16px, 2vw, 28px); }
html.sh26 .shn-hdr .shn-tel {
  align-items: center;
  min-height: 44px;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sh-body);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-tel:hover { color: var(--sh-blue); }
html.sh26 .shn-hdr .shn-tel:focus-visible { border-radius: 4px; }

/* "Book a free call": the sand pill with the blue calendar circle
   (.sh-btn--sand, restated on the include's own class so the analytics click
   selector "a.shn-cta" does not change). The label is "Book a Free Call" in
   the markup, which the blog still shows: sentence case comes from CSS. */
html.sh26 .shn-hdr .shn-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px 8px 8px 22px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  box-shadow: none;
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-cta:hover { background: var(--sh-sand-2); color: var(--sh-ink); }
html.sh26 .shn-hdr .shn-cta:active { transform: translateY(1px); }
html.sh26 .shn-hdr .shn-cta:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .shn-hdr .shn-cta__t { display: block; text-transform: lowercase; }
html.sh26 .shn-hdr .shn-cta__t::first-letter { text-transform: uppercase; }
html.sh26 .shn-hdr .shn-cta__ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sh-blue);
  color: var(--sh-paper);
}
html.sh26 .shn-hdr .shn-cta__ic svg { display: block; width: 18px; height: 18px; transition: transform .25s var(--sh-ease); }
html.sh26 .shn-hdr .shn-cta:hover .shn-cta__ic svg { transform: rotate(-12deg); }

/* Menu button: a 44px sand circle (shown below 1000px by the include). */
html.sh26 .shn-hdr .shn-burger {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--sh-sand);
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-burger:hover { background: var(--sh-sand-2); }
html.sh26 .shn-hdr .shn-burger[aria-expanded="true"] { background: var(--sh-paper); }
html.sh26 .shn-hdr .shn-burger:focus-visible { border-radius: 50%; }
html.sh26 .shn-hdr .shn-burger span { width: 18px; background: var(--sh-ink); border-radius: 2px; }

/* The phone (.shn-tel) stays off the bar (spec I.3): it is in the mobile
   menu and the footer. The rule above is kept for the day it returns. */
/* 1000-1199px: a smaller logo and tighter gaps keep one calm line. */
@media (min-width: 1000px) and (max-width: 1199px) {
  html.sh26 .shn-hdr .shn-logo img { height: 38px; }
  html.sh26 .shn-hdr .shn-links { gap: 20px; }
  html.sh26 .shn-hdr .shn-bar { gap: 20px; }
}
/* Below 1000px (the include's breakpoint): logo, then the booking button as
   a 44px blue calendar circle (its label stays as the accessible name), then
   the sand menu circle at the far right. */
@media (max-width: 999px) {
  html.sh26 .shn-hdr .shn-bar { min-height: 63px; }
  html.sh26 .shn-hdr .shn-logo img { height: 36px; }
  html.sh26 .shn-hdr .shn-right { gap: 8px; }
  html.sh26 .shn-hdr .shn-cta {
    order: -1;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    gap: 0;
    background: var(--sh-blue);
    color: var(--sh-paper);
    font-size: 16px;
  }
  html.sh26 .shn-hdr .shn-cta:hover { background: var(--sh-blue-ink); color: var(--sh-paper); }
  html.sh26 .shn-hdr .shn-cta:focus-visible { border-radius: 50%; }
  html.sh26 .shn-hdr .shn-cta__t {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html.sh26 .shn-hdr .shn-cta__ic { width: 44px; height: 44px; background: transparent; }
  html.sh26 .shn-hdr .shn-cta__ic svg { width: 20px; height: 20px; }
  /* A stale inline copy of the header without the icon (the home page until
     sync_home_chrome.py re-runs): a compact blue text pill instead. */
  html.sh26 .shn-hdr .shn-cta:not(:has(.shn-cta__ic)) {
    width: auto;
    height: auto;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
  }
}
@media (max-width: 560px) {
  html.sh26 .shn-hdr .shn-logo img { height: 34px; }
  html.sh26 .shn-hdr .shn-cta { padding: 0; font-size: 16px; }
}
@media (max-width: 380px) {
  html.sh26 .shn-hdr .shn-logo img { height: 32px; }
  html.sh26 .shn-hdr .shn-cta { padding: 0; font-size: 16px; }
}

/* ---------- Mega menu (v3, owner 2026-11-01: "mega menu isn't looking good") ----------
   A sand panel under the bar: an intro card on the left (serif title, one
   line, two pills), then the three service groups as compact lists (title,
   muted description, an arrow that shows on hover), and under them the
   extra links as three labelled rows of small pills. The page behind dims. */
html.sh26 .shn-hdr .shn-mega {
  top: calc(100% + 6px);
  left: var(--sh-gutter);
  right: var(--sh-gutter);
  padding: 14px;
  background: var(--sh-sand);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 28px;
  box-shadow: 0 1px 2px rgba(11, 14, 18, .05), 0 40px 80px -36px rgba(11, 14, 18, .38);
  max-height: calc(100vh - 100px);
  max-height: calc(100dvh - 100px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
html.sh26 .shn-hdr .shn-mega:not([hidden]) { animation: shn-mega-in .32s cubic-bezier(.165, .84, .44, 1) both; }
@keyframes shn-mega-in { from { opacity: 0; transform: translateY(-8px); } }
/* the page behind the open menu dims (the header sits above this layer) */
/* on the root: style-light.css hides body::after with !important */
html.sh26:has(#shnMega:not([hidden]))::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(11, 14, 18, .22);
  pointer-events: none;
  animation: shn-dim .3s ease both;
}
@keyframes shn-dim { from { opacity: 0; } }

html.sh26 .shn-hdr .shn-mega__grid {
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(250px, 1.05fr) repeat(3, minmax(0, 1fr));
  gap: 0 clamp(12px, 1.6vw, 28px);
  align-items: start;
}

/* Intro card */
html.sh26 .shn-hdr .shn-mega__intro {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  min-height: 100%;
  padding: 26px 26px 24px;
  border-radius: 20px;
  background: var(--sh-paper);
}
html.sh26 .shn-hdr .shn-mega__kick {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 500 var(--sh-label)/1.2 var(--sh-font);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
html.sh26 .shn-hdr .shn-mega__kick::before {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 .shn-hdr .shn-mega__big {
  margin: 16px 0 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .shn-hdr .shn-mega__lede {
  margin: 14px 0 0;
  max-width: 26ch;
  font: 400 15.5px/1.5 var(--sh-font);
  color: var(--sh-body);
}
html.sh26 .shn-hdr .shn-mega__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 28px; }
html.sh26 .shn-hdr .shn-mega__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 18px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-blue);
  color: var(--sh-paper) !important;
  font: 500 15px/1.2 var(--sh-font);
  text-decoration: none !important;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-mega__btn::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sh-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E9E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / 15px no-repeat;
}
html.sh26 .shn-hdr .shn-mega__btn:hover { background: var(--sh-blue-ink); }
html.sh26 .shn-hdr .shn-mega__btn--sand { background: var(--sh-sand); color: var(--sh-ink) !important; }
html.sh26 .shn-hdr .shn-mega__btn--sand:hover { background: var(--sh-sand-2); }
html.sh26 .shn-hdr .shn-mega__btn--sand::after { background-color: var(--sh-blue); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E"); }

/* Groups */
html.sh26 .shn-hdr .shn-mega__col { min-width: 0; padding: 18px 0 6px; }
html.sh26 .shn-hdr .shn-mega__h {
  margin: 0 0 8px;
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--sh-sand-2);
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--sh-ink);
}
/* the heads that are links carry style="color:inherit" */
html.sh26 .shn-hdr .shn-mega__h a { border-radius: 4px; }
html.sh26 .shn-hdr .shn-mega__h a:hover { color: var(--sh-blue) !important; }
html.sh26 .shn-hdr .shn-mega__a {
  position: relative;
  display: block;
  padding: 6px 40px 6px 12px;
  border-radius: 14px;
  color: var(--sh-ink);
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-mega__a::before { content: none; }
html.sh26 .shn-hdr .shn-mega__a::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--sh-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / 13px no-repeat;
  opacity: 0;
  transform: translateX(-6px) scale(.8);
  transition: opacity var(--sh-fast) ease, transform .3s var(--sh-ease);
}
html.sh26 .shn-hdr .shn-mega__a:hover,
html.sh26 .shn-hdr .shn-mega__a:focus-visible,
html.sh26 .shn-hdr .shn-mega__a[aria-current="page"] { background: var(--sh-paper); color: var(--sh-ink); }
html.sh26 .shn-hdr .shn-mega__a:hover::after,
html.sh26 .shn-hdr .shn-mega__a:focus-visible::after { opacity: 1; transform: none; }
html.sh26 .shn-hdr .shn-mega__a:hover .shn-mega__t,
html.sh26 .shn-hdr .shn-mega__a[aria-current="page"] .shn-mega__t { color: var(--sh-blue); }
html.sh26 .shn-hdr .shn-mega__t {
  display: block;
  font: 500 15.5px/1.3 var(--sh-font);
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  transition: color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-mega__d {
  display: block;
  margin-top: 1px;
  overflow: hidden;
  font: 400 13px/1.4 var(--sh-font);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sh-muted);
}

/* More: three labelled rows of small pills */
html.sh26 .shn-hdr .shn-mega__foot {
  max-width: none;
  margin: 14px 0 0;
  padding: 18px 20px;
  border-top: 0;
  border-radius: 20px;
  background: var(--sh-paper);
  display: block;
}
html.sh26 .shn-hdr .shn-mega__more { display: none; }   /* the intro card carries these two */
html.sh26 .shn-hdr .shn-mega__note { display: grid; gap: 10px; font-size: 0; line-height: 0; color: var(--sh-muted); }
html.sh26 .shn-hdr .shn-mega__note br { display: none; }
html.sh26 .shn-hdr .shn-mega__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0;
}
html.sh26 .shn-hdr .shn-mega__lbl {
  flex: 0 0 120px;
  font: 500 13px/1.2 var(--sh-font);
  letter-spacing: .02em;
  color: var(--sh-muted);
}
/* these links carry style="color:#C9D4DF" (made for the old dark panel) */
html.sh26 .shn-hdr .shn-mega__note a {
  display: inline-block;
  padding: 7px 13px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  color: var(--sh-ink) !important;
  font: 500 13.5px/1.2 var(--sh-font);
  text-decoration: none;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-mega__note a:hover { background: var(--sh-blue); color: var(--sh-paper) !important; }

/* 1000-1199px: the intro card narrows, descriptions stay on one line */
@media (min-width: 1000px) and (max-width: 1199px) {
  html.sh26 .shn-hdr .shn-mega { left: 16px; right: 16px; padding: 12px; }
  html.sh26 .shn-hdr .shn-mega__grid { grid-template-columns: minmax(210px, .9fr) repeat(3, minmax(0, 1fr)); gap: 0 10px; }
  html.sh26 .shn-hdr .shn-mega__intro { padding: 22px 20px 20px; }
  html.sh26 .shn-hdr .shn-mega__h { font-size: 20px; }
  html.sh26 .shn-hdr .shn-mega__t { font-size: 15px; }
  html.sh26 .shn-hdr .shn-mega__lbl { flex-basis: 96px; }
  html.sh26 .shn-hdr .shn-mega__note a { padding: 6px 11px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  html.sh26 .shn-hdr .shn-mega:not([hidden]),
  html.sh26:has(#shnMega:not([hidden]))::after { animation: none; }
}

/* Windows high contrast: backgrounds are dropped, so the round buttons get a
   (transparent, hence forced-visible) border and the menu lines a real colour. */
@media (forced-colors: active) {
  html.sh26 .shn-hdr .shn-cta,
  html.sh26 .shn-hdr .shn-burger,
  html.sh26 .shn-hdr .shn-mob__book,
  html.sh26 .shn-hdr .shn-mob__tel,
  html.sh26 .shn-hdr .shn-mega { border: 1px solid transparent; }
  html.sh26 .shn-hdr .shn-burger span { background: CanvasText; forced-color-adjust: none; }
}

/* ---------- Mobile menu (below 1000px; the include shows and hides it):
   a full-height sand sheet under the bar, large Fraunces rows, 48px+ targets. */
html.sh26 .shn-hdr .shn-mob {
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100vh - 63px);
  height: calc(100dvh - 63px);
  max-height: none;
  padding: 4px var(--sh-gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  background: var(--sh-sand);
  border: 0;
  box-shadow: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.sh26 .shn-hdr .shn-mob__list > li { border-bottom: 1px solid var(--sh-line); }
html.sh26 .shn-hdr .shn-mob__list > .shn-pkg,
html.sh26 .shn-hdr .shn-mob__list > .shn-work { display: block; }
/* "Work" leads the sheet and goes to /case-studies, so the separate "Case
   studies" row (same target) is not repeated. */
html.sh26 .shn-hdr .shn-mob__list > li:has(> a[href="/case-studies"]):not(.shn-work) { display: none; }
html.sh26 .shn-hdr .shn-mob__a {
  min-height: 64px;
  padding: 10px 0;
  gap: 16px;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
  transition: color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-mob__a:hover,
html.sh26 .shn-hdr .shn-mob__a[aria-current="page"] { color: var(--sh-blue); }
html.sh26 .shn-hdr .shn-mob__a:focus-visible { border-radius: 4px; }
/* The decorative arrows become a blue arrow icon; the Services toggle gets a
   plus that turns into a cross. */
html.sh26 .shn-hdr .shn-mob__a > span {
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 0;
  color: var(--sh-blue);
  background: currentColor;
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform .25s var(--sh-ease);
}
html.sh26 .shn-hdr a.shn-mob__a:hover > span { transform: translateX(3px); }
html.sh26 .shn-hdr button.shn-mob__a > span {
  -webkit-mask-image: var(--sh-i-plus);
  mask-image: var(--sh-i-plus);
}
html.sh26 .shn-hdr button.shn-mob__a[aria-expanded="true"] > span { transform: rotate(45deg); }
html.sh26 .shn-hdr .shn-mob__sub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
  margin: -4px 0 16px;
}
html.sh26 .shn-hdr .shn-mob__sub a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 0;
  border-radius: 4px;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  background: transparent;
}
html.sh26 .shn-hdr .shn-mob__sub a:hover,
html.sh26 .shn-hdr .shn-mob__sub a[aria-current="page"] { color: var(--sh-blue); background: transparent; }
html.sh26 .shn-hdr .shn-mob__ctas { margin-top: 28px; gap: 10px; }
/* Booking: the blue pill with a white calendar circle. Phone: a white pill
   with a blue phone circle. Both full width, label left, circle right. */
html.sh26 .shn-hdr .shn-mob__book,
html.sh26 .shn-hdr .shn-mob__tel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 8px 8px 8px 22px;
  border: 0;
  border-radius: var(--sh-r-pill);
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .shn-hdr .shn-mob__book { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .shn-hdr .shn-mob__book:hover { background: var(--sh-blue-ink); }
html.sh26 .shn-hdr .shn-mob__tel { background: var(--sh-paper); color: var(--sh-ink); }
html.sh26 .shn-hdr .shn-mob__tel:hover { background: var(--sh-sand-2); }
html.sh26 .shn-hdr .shn-mob__book:focus-visible,
html.sh26 .shn-hdr .shn-mob__tel:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .shn-hdr .shn-mob__bt { display: block; text-transform: lowercase; }
html.sh26 .shn-hdr .shn-mob__bt::first-letter { text-transform: uppercase; }
html.sh26 .shn-hdr .shn-mob__arr { display: none; }
html.sh26 .shn-hdr .shn-mob__ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sh-paper);
  color: var(--sh-blue);
}
html.sh26 .shn-hdr .shn-mob__tel .shn-mob__ic { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .shn-hdr .shn-mob__ic svg { display: block; width: 18px; height: 18px; }
@media (max-width: 359px) {
  html.sh26 .shn-hdr .shn-mob__sub { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) {
  html.sh26 .shn-hdr .shn-mob__sub { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.sh26 .shn-hdr .shn-mob__ctas { flex-direction: row; }
  html.sh26 .shn-hdr .shn-mob__book,
  html.sh26 .shn-hdr .shn-mob__tel { flex: 1 1 0; }
}
@media (min-width: 840px) {
  html.sh26 .shn-hdr .shn-mob__sub { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* =========================================================================
   FOOTER
   ========================================================================= */
html.sh26 body .footer {
  position: relative;
  background: var(--sh-sand);
  color: var(--sh-ink);
  border-top: 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
html.sh26 body .footer .container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sh-gutter);
  padding-right: var(--sh-gutter);
}
html.sh26 body .footer ul { list-style: none; margin: 0; padding: 0; }
html.sh26 body .footer li { margin: 0; padding: 0; }
html.sh26 body .footer a { color: var(--sh-ink); text-decoration: none; transition: color var(--sh-fast) ease; }
html.sh26 body .footer a:hover { color: var(--sh-blue); }
html.sh26 body .footer a:focus-visible,
html.sh26 body .footer button:focus-visible {
  outline: 2px solid var(--sh-blue);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: none;
}

/* Reveal the footer's sh26-only markup (hidden by the include itself). */
html.sh26 body .footer li.sh-ft-26,
html.sh26 body .footer div.sh-ft-26,
html.sh26 body .footer p.sh-ft-26 { display: block; }
html.sh26 body .footer span.sh-ft-26 { display: inline; }
/* The registered office is stated once, on the line at the very bottom
   (guarded so a stale inline copy without that line keeps its own). */
html.sh26 body .footer:has(.sh-ft-regline) .sh-ft-contact .sh-ft-reg { display: none; }

/* Row 1 on a 12-column grid: brand 3, Services 3, Build 2, Company 2,
   Contact 2. .footer__links is a 9-column grid with the same gap, so its
   tracks line up with row 2 (.fx-more) below. */
html.sh26 body .footer .footer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px var(--sh-gap);
  padding-top: clamp(72px, 8vw, 120px);
  padding-bottom: clamp(48px, 5vw, 72px);
  align-items: start;
}
html.sh26 body .footer .footer__brand { grid-column: 1 / span 3; min-width: 0; }
html.sh26 body .footer .footer__links {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 40px var(--sh-gap);
  min-width: 0;
}
html.sh26 body .footer .footer__links > .footer__col { grid-column: span 2; min-width: 0; }
html.sh26 body .footer .footer__links > .footer__col:first-child { grid-column: span 3; }

/* Brand: the S monogram from the logo (the full logo would repeat the giant
   wordmark below), the approved description, the two rating badges. */
html.sh26 body .footer .footer__brand .logo { display: inline-block; border-radius: 6px; }
html.sh26 body .footer .footer__brand .logo img {
  display: block;
  width: 40px;
  max-width: none;
  height: 50px;
  object-fit: cover;
  object-position: 0 50%;
}
html.sh26 body .footer .footer__brand p {
  max-width: 34ch;
  margin: 24px 0 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: var(--sh-ink);
}
/* Rating badges: inline-styled markup, hence !important. On sh26 the TrustBox
   renders its light theme (footer.html's loader); its fallback link and the
   Clutch badge sit on white. */
html.sh26 body .footer .trustpilot-widget { margin-top: 28px !important; max-width: 260px !important; }
html.sh26 body .footer .trustpilot-widget > a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-paper);
  color: var(--sh-ink) !important;
  font-family: var(--sh-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
html.sh26 body .footer .trustpilot-widget > a:hover { color: var(--sh-blue) !important; }
html.sh26 body .footer .footer__clutch {
  margin-top: 12px !important;
  padding: 12px 16px !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: var(--sh-paper) !important;
  transition: box-shadow var(--sh-fast) ease;
}
html.sh26 body .footer .footer__clutch:hover { box-shadow: inset 0 0 0 1px var(--sh-line-2); }
html.sh26 body .footer .footer__clutch span {
  color: var(--sh-ink) !important;
  font-family: var(--sh-font) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}
html.sh26 body .footer .footer__clutch span span {
  font-family: var(--sh-display) !important;
  font-weight: 500 !important;
  font-size: 19px !important;
  letter-spacing: -0.01em !important;
}

/* Column heads: muted Fraunces, as written (no uppercase). */
html.sh26 body .footer .footer__col h3 {
  margin: 0 0 14px;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-muted);
}
html.sh26 body .footer .footer__col ul { display: flex; flex-direction: column; gap: 0; }
html.sh26 body .footer .footer__col li {
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.35;
  color: var(--sh-ink);
}
html.sh26 body .footer .footer__col a { display: inline-block; padding: 5px 0; color: var(--sh-ink); }
html.sh26 body .footer .footer__col a:hover { color: var(--sh-blue); }

/* Contact: phone and WhatsApp with blue soft icons. */
html.sh26 body .footer .sh-ft-contact a { display: inline-flex; align-items: center; gap: 10px; }
html.sh26 body .footer span.sh-ft-ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sh-blue-tile);
  color: var(--sh-blue);
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 body .footer span.sh-ft-ic svg { display: block; width: 17px; height: 17px; }
html.sh26 body .footer .sh-ft-contact a:hover span.sh-ft-ic { background: var(--sh-blue); color: var(--sh-paper); }

/* Row 2: Industries 3, Case Studies 3, Guides & Tools 3, Locations 3 (two
   columns inside). */
html.sh26 body .footer .fx-more {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px var(--sh-gap);
  padding-top: 0;
  padding-bottom: clamp(56px, 6vw, 96px);
  border-top: 0;
}
html.sh26 body .footer .fx-more > .footer__col { grid-column: span 3; min-width: 0; }
html.sh26 body .footer .fx-more .fx-loc ul { display: block; columns: 2; column-gap: var(--sh-gap); }
html.sh26 body .footer .fx-more .fx-loc li { margin: 0; break-inside: avoid; }

/* Bottom: social links (right), the giant wordmark, then the copyright line
   and the registered-office line. overflow-x: clip only cuts at the window
   edges, never inside the gutters. */
html.sh26 body .footer .footer__bottom {
  padding: 0 0 clamp(28px, 3vw, 40px);
  border-top: 0;
  overflow-x: clip;
}
html.sh26 body .footer .footer__bottom-inner {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    ".    social"
    "mark mark"
    "copy copy"
    "reg  reg";
  align-items: end;
  gap: 0;
  text-align: left;
}
html.sh26 body .footer .footer__social {
  grid-area: social;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  margin: 0 0 clamp(24px, 3vw, 40px);
}
html.sh26 body .footer .footer__social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  min-height: 32px;
  padding: 2px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
}
html.sh26 body .footer .footer__social a:hover { background: transparent; color: var(--sh-blue); }
/* Text labels replace the brand glyphs (guarded: a stale copy without the
   labels keeps its icons). */
html.sh26 body .footer .footer__social a:has(.sh-ft-soc) svg { display: none; }
html.sh26 body .footer .footer__social a:not(:has(.sh-ft-soc)) svg { display: block; width: 18px; height: 18px; }
/* external-link hint: a blue arrow after each label */
html.sh26 body .footer .footer__social a:has(.sh-ft-soc)::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 body .footer .footer__social a:hover::after { transform: translate(2px, -2px); }
@supports not selector(:has(*)) {
  html.sh26 body .footer .footer__social svg { display: none; }
  html.sh26 body .footer .footer__social a::after {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    background: var(--sh-blue);
    -webkit-mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
    mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
  }
}

/* The wordmark: Fraunces 500 sized so its ink spans the container exactly.
   Measured from the shipped file (2026-10-31, Chrome): at letter-spacing
   -0.03em "SpiderHunts" inks from 0.03125em to 4.74em, so the ink is
   4.70875em wide; font-size = 100cqi / 4.70875 and the box is pulled left by
   the S's side bearing. The size-adjusted Georgia fallback is narrower
   (4.588em), so it can never overflow. The descender of the "p" hangs into
   the bottom margin. Brand blue rather than weichie's ink: the owner reads
   a mostly ink page as "black and white", and this is the last screen of
   every page. */
html.sh26 body .footer p.sh-ft-mark {
  grid-area: mark;
  display: block;
  margin: 0 0 .3em -.03125em;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: calc((100vw - 2 * var(--sh-gutter) - 24px) / 4.70875);
  font-size: min(calc(1320px / 4.70875), calc((100vw - 2 * var(--sh-gutter) - 24px) / 4.70875));
  font-size: calc(100cqi / 4.70875);
  line-height: .82;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--sh-blue);
  -webkit-user-select: none;
  user-select: none;
}
html.sh26 body .footer .footer__bottom-inner > p:not(.sh-ft-26) {
  grid-area: copy;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sh-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--sh-muted);
}
html.sh26 body .footer .footer__bottom-inner > p a {
  color: var(--sh-ink);
  text-decoration: underline;
  text-decoration-color: var(--sh-line-2);
  text-underline-offset: 3px;
}
html.sh26 body .footer .footer__bottom-inner > p a:hover { color: var(--sh-blue); text-decoration-color: currentColor; }
/* The facts wrap as whole pieces; the dot before each sits in the column gap
   and is clipped when its piece starts a new line (no leading dots). */
html.sh26 body .footer p.sh-ft-regline {
  grid-area: reg;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.25em;
  margin: 6px 0 0;
  overflow: hidden;
  font-family: var(--sh-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--sh-muted);
}
html.sh26 body .footer p.sh-ft-regline > span { position: relative; min-width: 0; }
html.sh26 body .footer p.sh-ft-regline > span + span::before {
  content: "\00B7";
  position: absolute;
  left: -.8em;
  color: var(--sh-muted);
}

/* Tablet: brand above, four link columns, then three explore columns with
   Locations across the full width. */
@media (max-width: 1023px) {
  html.sh26 body .footer .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html.sh26 body .footer .footer__brand,
  html.sh26 body .footer .footer__links { grid-column: 1 / -1; }
  html.sh26 body .footer .footer__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* monogram and description on the left, the two rating badges beside them */
  html.sh26 body .footer .footer__brand {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    align-items: start;
  }
  html.sh26 body .footer .footer__brand > .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  html.sh26 body .footer .footer__brand > p { grid-column: 1; grid-row: 2 / span 2; max-width: 52ch; }
  html.sh26 body .footer .footer__brand > .trustpilot-widget { grid-column: 2; grid-row: 2; margin-top: 24px !important; justify-self: start; }
  html.sh26 body .footer .footer__brand > .footer__clutch { grid-column: 2; grid-row: 3; justify-self: start; align-self: start; }
  html.sh26 body .footer .footer__links > .footer__col,
  html.sh26 body .footer .footer__links > .footer__col:first-child { grid-column: auto; }
  html.sh26 body .footer .fx-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.sh26 body .footer .fx-more > .footer__col { grid-column: auto; }
  html.sh26 body .footer .fx-more > .fx-loc { grid-column: 1 / -1; }
  html.sh26 body .footer .fx-more .fx-loc ul { columns: 4; }
}

/* Phone. Without JavaScript: two columns of links. With it (the footer's own
   script adds .sh-ft-acc): Contact first, then one accordion per group. */
@media (max-width: 767px) {
  html.sh26 body .footer .footer__inner { padding-top: 64px; padding-bottom: 32px; gap: 36px; }
  html.sh26 body .footer .footer__brand { display: block; }
  html.sh26 body .footer .footer__brand p { font-size: 16px; }
  html.sh26 body .footer .footer__brand > .trustpilot-widget { margin-top: 24px !important; }
  html.sh26 body .footer .footer__links,
  html.sh26 body .footer .fx-more { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  html.sh26 body .footer .footer__links > .sh-ft-contact { order: -1; grid-column: 1 / -1; }
  html.sh26 body .footer .sh-ft-contact ul { gap: 4px; }
  html.sh26 body .footer .sh-ft-contact a { padding: 6px 0; }
  html.sh26 body .footer .fx-more { padding-bottom: 48px; }
  html.sh26 body .footer .fx-more > .fx-loc { grid-column: 1 / -1; }
  html.sh26 body .footer .fx-more .fx-loc ul { columns: 2; }

  html.sh26 body .footer.sh-ft-acc .footer__inner { padding-bottom: 0; }
  html.sh26 body .footer.sh-ft-acc .footer__links,
  html.sh26 body .footer.sh-ft-acc .fx-more { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.sh26 body .footer.sh-ft-acc .sh-ft-contact { margin-bottom: 32px; }
  html.sh26 body .footer.sh-ft-acc .sh-ft-c { border-top: 1px solid var(--sh-line-2); }
  html.sh26 body .footer.sh-ft-acc .fx-more > .sh-ft-c:last-child { border-bottom: 1px solid var(--sh-line-2); }
  html.sh26 body .footer.sh-ft-acc .sh-ft-c > h3 { margin: 0; }
  html.sh26 body .footer.sh-ft-acc .sh-ft-c:not(.is-open) > ul { display: none; }
  html.sh26 body .footer.sh-ft-acc .sh-ft-c.is-open > ul { padding: 0 0 18px; }
  html.sh26 body .footer.sh-ft-acc .sh-ft-c a { padding: 9px 0; }

  html.sh26 body .footer .footer__bottom-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "social" "mark" "copy" "reg";
  }
  /* two by two, labels left */
  html.sh26 body .footer .footer__social {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: start;
    align-items: center;
    gap: 0 32px;
    margin-bottom: 28px;
  }
  html.sh26 body .footer .footer__social a { min-height: 44px; }
  html.sh26 body .footer .footer__bottom-inner > p:not(.sh-ft-26),
  html.sh26 body .footer p.sh-ft-regline { font-size: 13.5px; }
}
/* The accordion toggle the footer script puts inside each group's h3. */
html.sh26 body .footer .sh-ft-tg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 60px;
  margin: 0;
  padding: 14px 0;
  border: 0;
  background: none;
  color: var(--sh-ink);
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
html.sh26 body .footer .sh-ft-tg::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-left: 12px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-plus) center / contain no-repeat;
  mask: var(--sh-i-plus) center / contain no-repeat;
  transition: transform .25s var(--sh-ease);
}
html.sh26 body .footer .sh-ft-tg[aria-expanded="true"]::after { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  html.sh26 body .footer *,
  html.sh26 body .footer *::before,
  html.sh26 body .footer *::after { transition: none !important; }
}

/* =========================================================================
   BOOKING MODAL (footer.html builds .cly-* at click time and injects its own
   <style> into <head>, one class deep): on sh26 pages the loading screen is
   a sand panel in Fraunces with a blue progress bar, not the old dark
   gradient with a glow. Calendly's own widget (white) is unchanged.
   ========================================================================= */
html.sh26 .cly-ov {
  background: rgba(11, 14, 18, .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  font-family: var(--sh-font);
}
html.sh26 .cly-box {
  border-radius: var(--sh-r-card);
  background: var(--sh-paper);
  box-shadow: var(--sh-shadow);
}
/* white circle with a hairline ring: visible on the sand loader and on
   Calendly's white calendar alike */
html.sh26 .cly-x {
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  background: var(--sh-paper);
  color: var(--sh-ink);
  box-shadow: inset 0 0 0 1px var(--sh-line-2);
}
html.sh26 .cly-x:hover { background: var(--sh-sand); transform: none; }
html.sh26 .cly-x:focus-visible { outline: 2px solid var(--sh-blue); outline-offset: 3px; border-radius: 50%; }
html.sh26 .cly-load { background: var(--sh-sand); }
html.sh26 .cly-load__glow { display: none; }
html.sh26 .cly-load__step {
  font-family: var(--sh-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--sh-muted);
  opacity: .45;
}
html.sh26 .cly-load__step.is-past { color: var(--sh-blue); opacity: 1; }
html.sh26 .cly-load__step.is-active { color: var(--sh-ink); opacity: 1; }
html.sh26 .cly-load__step i { width: 7px; height: 7px; background: var(--sh-blue); }
html.sh26 .cly-load__track { height: 4px; border-radius: var(--sh-r-pill); background: var(--sh-sand-2); }
html.sh26 .cly-load__bar { border-radius: var(--sh-r-pill); background: var(--sh-blue); }
html.sh26 .cly-load__cap { font-size: 15px; font-weight: 500; color: var(--sh-muted); }

/* v3 (owner, 2026-11-01): no logo image, the name set as text, like the
   reference's wordmark. The span is sh26-only markup (hidden by the include's
   own .shn-26 rule elsewhere); the link keeps its aria-label. The footer drops
   its S monogram: the giant wordmark closes the page. */
html.sh26 .shn-hdr .shn-logo img { display: none; }
html.sh26 .shn-hdr a.shn-logo, html.sh26 .shn-hdr a.shn-logo:hover { text-decoration: none !important; }
html.sh26 .shn-hdr .shn-logo .shn-word {
  display: inline-block;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--sh-ink);
}
html.sh26 .shn-hdr .shn-logo:hover .shn-word { color: var(--sh-blue); }
@media (max-width: 640px) {
  html.sh26 .shn-hdr .shn-logo .shn-word { font-size: 27px; }
}
html.sh26 body .footer .footer__brand .logo { display: none; }
html.sh26 body .footer .footer__brand p { margin-top: 0; }

/* CRM and data/cloud services moved from the Services menu to the footer
   (owner, 2026-11-01). Each link keeps its one-line description from the
   menu, as a muted second line. */
html.sh26 body .footer .footer__col a .sh-ft-d {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--sh-muted);
}
html.sh26 body .footer .footer__col a:hover .sh-ft-d { color: var(--sh-muted); }

/* ---- 15-pf.css ---- */
/* 15 pf: the portfolio band (a tilted 3D ring of the 40 client sites), its
   services ticker and the project viewer. Spec rd/DESIGN-v2.md D and I, ring
   geometry v3 (owner, 2026-11-01: match weichie's motion and design).
   Markup: _includes/portfolio-hero.html (automation/portfolio/build_portfolio.py);
   JS: js/15-pf.js. Geometry and tuning: automation/portfolio/README.md.
   The include ships style="display:none": only this layer shows the band.

   The ring, in world units (u = px per unit at the ring centre plane):
   camera 8.6u in front of the ring centre, ring radius --pf-k-R, cards
   1.6u x 1.78u, bent back .12u at their side edges (8 slices, built by the
   JS), the whole ring tilted 13deg so the front rises and the back sinks. */

@property --pf-s { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --pf-u { syntax: "<length>"; inherits: true; initial-value: 100px; }

html.sh26 .pf {
  /* interior pages: the same ring scaled down, with a wider radius and the
     camera moved back in proportion so it still spans the screen */
  --pf-u: clamp(40px, min(5.9vw, 9.3svh), 96px);
  --pf-k-R: 7.5;                             /* ring radius, units */
  --pf-k-cam: 14.66;                         /* camera distance from the ring centre, units */
  --pf-k-step: 14;                           /* degrees between cards */
  --pf-k-tilt: 7.6;                          /* degrees: the same lift as the home ring */
  --pf-k-cy: 4.05;                           /* ring centre below the stage top, units */
  --pf-k-h: 4.3;                             /* stage height, units */
  /* Cards are drawn at their on-screen size: the ring is built at the scale
     of its front (--pf-U = u x cam / (cam - R)) and pushed back by R, with
     the camera moved in to match. The picture is the same; the browser
     rasterises the front cards 1:1 instead of enlarging small ones (blur). */
  --pf-U: calc(var(--pf-u) * var(--pf-k-cam) / (var(--pf-k-cam) - var(--pf-k-R)));
  --pf-cw: calc(var(--pf-U) * 1.6);
  --pf-ch: calc(var(--pf-U) * 1.78);
  --pf-h: calc(var(--pf-u) * var(--pf-k-h));
  --pf-r: calc(var(--pf-U) * .08);           /* corner radius on the card plane */
  --pf-pos0: 3.5;                            /* slot phase at load: a gap at the centre */
  --pf-bar: 76px;                            /* ticker row */
  --pf-tk-fs: 18px;                          /* ticker type */
  --pf-tk-gap: 44px;
  display: block !important;
  position: relative;
  margin: 0;
  padding: 0;
  background: var(--sh-ground);
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-size: 16px;
  line-height: 1.4;
  text-align: left;
}
html.sh26.sh-home .pf {
  --pf-u: clamp(80px, min(12.2vw, 19.4svh), 230px);
  --pf-k-R: 4.4;
  --pf-k-cam: 8.6;
  --pf-k-step: 24;                           /* 15 cards round the ring */
  --pf-k-tilt: 13;
  --pf-k-cy: 3.83;
  --pf-k-h: 4.02;
  --pf-bar: 96px;
  --pf-tk-fs: 20px;
  --pf-tk-gap: 56px;
}

/* ---------- Stage: the camera ---------- */
html.sh26 .pf__stage {
  position: relative;
  height: var(--pf-h);
  overflow: hidden;
  overflow: clip;
  perspective: calc(var(--pf-U) * (var(--pf-k-cam) - var(--pf-k-R)));
  perspective-origin: 50% calc(var(--pf-u) * var(--pf-k-cy));
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
}
html.sh26 .pf.is-drag .pf__stage,
html.sh26 .pf.is-drag .pf-card { cursor: grabbing; }
/* the ring itself: a zero-size 3D group at the ring centre */
html.sh26 .pf__track {
  position: absolute;
  left: 50%;
  top: calc(var(--pf-u) * var(--pf-k-cy));
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--pf-U) * var(--pf-k-R) * -1)) rotateX(calc(var(--pf-k-tilt) * 1deg));
}

/* ---------- Card: a curved panel on the ring ---------- */
html.sh26 .pf-card {
  --pf-o: 1;
  position: absolute;
  top: calc(var(--pf-ch) / -2);
  left: calc(var(--pf-cw) / -2);
  display: none;
  box-sizing: border-box;
  width: var(--pf-cw);
  height: var(--pf-ch);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--pf-r);
  background: none;
  box-shadow: none;
  color: var(--pf-ink, var(--sh-ink));
  font: inherit;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--pf-s) * var(--pf-k-step) * 1deg)) translateZ(calc(var(--pf-U) * var(--pf-k-R)));
}
html.sh26 .pf--js .pf-card.is-on { display: block; will-change: transform; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(-n+8) { display: block; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(1) { --pf-s: -3.5; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(2) { --pf-s: -2.5; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(3) { --pf-s: -1.5; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(4) { --pf-s: -.5; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(5) { --pf-s: .5; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(6) { --pf-s: 1.5; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(7) { --pf-s: 2.5; }
html.sh26 .pf:not(.pf--js) .pf-card:nth-child(8) { --pf-s: 3.5; }
html.sh26 .pf-card:focus-visible {
  outline: 3px solid var(--sh-blue);
  outline-offset: 4px;
}

/* Before the JS builds the slices (or without it): one flat panel. */
html.sh26 .pf-card__win {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--pf-r);
  background: var(--pf-bg, var(--sh-sand));
  overflow: hidden;
  opacity: var(--pf-o);
}
html.sh26 .pf-card.is-sliced .pf-card__win { visibility: hidden; }
html.sh26 .pf-card__bar,
html.sh26 .pf-card__cap { display: none; }
html.sh26 .pf-card__win img,
html.sh26 .pf-sl img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pf-cw);
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: 50% 0;
  background: var(--pf-bg, var(--sh-sand));
  pointer-events: none;
  -webkit-user-drag: none;
}
/* the slices: 8 strips, each pushed back and turned to follow the bend */
html.sh26 .pf-sl {
  position: absolute;
  top: 0;
  left: calc(var(--pf-cw) * var(--j) / 8 - 1px);
  width: calc(var(--pf-cw) / 8 + 3px);         /* overlaps its neighbours: no seams */
  height: 100%;
  overflow: hidden;
  opacity: var(--pf-o);
  backface-visibility: visible;
  transform: translateZ(calc(var(--pf-U) * var(--z))) rotateY(calc(var(--r) * 1deg));
}
html.sh26 .pf-sl img { left: calc(var(--pf-cw) * var(--j) / -8 + 1px); }
html.sh26 .pf-sl--l { left: 0; width: calc(var(--pf-cw) / 8 + 2px); border-radius: var(--pf-r) 0 0 var(--pf-r); }
html.sh26 .pf-sl--l img { left: 0; }
html.sh26 .pf-sl--r { width: calc(var(--pf-cw) / 8 + 1px); border-radius: 0 var(--pf-r) var(--pf-r) 0; }

/* The intro (home): the ring waits below the stage, then rises (15-pf.js). */
html.sh26 .pf.is-parked .pf__track { visibility: hidden; }

/* Phone caption under the centred card (filled by 15-pf.js): off in v3, the
   reference shows none. */
html.sh26 .pf__now { display: none !important; }

/* ---------- Services ticker + pause ---------- */
html.sh26 .pf__bar { position: relative; height: var(--pf-bar); }
html.sh26 .pf-tk {
  --pf-fade: max(var(--sh-gutter), 48px);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  overflow: clip;
  --pf-end: calc(var(--sh-gutter) + 56px);   /* clear of the pause button */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pf-fade), #000 calc(100% - var(--pf-end) - var(--pf-fade)), transparent calc(100% - var(--pf-end)));
  mask-image: linear-gradient(90deg, transparent, #000 var(--pf-fade), #000 calc(100% - var(--pf-end) - var(--pf-fade)), transparent calc(100% - var(--pf-end)));
}
html.sh26 .pf-tk__rail { display: flex; flex: none; align-items: center; padding-left: var(--sh-gutter); }
html.sh26 .pf-tk > .pf-tk__list { padding-left: var(--sh-gutter); }
html.sh26 .pf-tk__list {
  display: flex;
  flex: none;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
html.sh26 .pf-tk__list > li { flex: none; margin: 0 var(--pf-tk-gap) 0 0; padding: 0; list-style: none; }
html.sh26 .pf-tk__list > li::before,
html.sh26 .pf-tk__list > li::marker { content: none; }
html.sh26 .pf-tk__a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  color: var(--sh-ink) !important;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: var(--pf-tk-fs);
  line-height: 1.2;
  letter-spacing: -.02em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color var(--sh-fast) ease;
}
html.sh26 .pf-tk__ic {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sh-blue-tile);
  color: var(--sh-blue);
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .pf-tk__ic svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html.sh26 .pf-tk__a:hover { color: var(--sh-blue) !important; }
html.sh26 .pf-tk__a:hover .pf-tk__ic { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .pf-tk__a:focus-visible { border-radius: 6px; }
html.sh26 .pf__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

html.sh26 .pf__pause {
  position: absolute;
  top: 50%;
  right: var(--sh-gutter);
  z-index: 2;
  margin-top: -22px;
}
html.sh26 .pf__pause svg { fill: currentColor; stroke: none; width: 16px; height: 16px; }
html.sh26 .pf__pause .pf__i-play,
html.sh26 .pf.is-paused .pf__pause .pf__i-pause { display: none; }
html.sh26 .pf.is-paused .pf__pause .pf__i-play { display: block; }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 768px) {
  html.sh26 .pf { display: none !important; }   /* owner, 2026-11-01: no carousel on phones */
  html.sh26 .pf { --pf-u: clamp(48px, 17vw, 96px); --pf-k-R: 4; --pf-k-cam: 8.6; --pf-k-step: 24; --pf-k-tilt: 13; --pf-k-cy: 3.7; --pf-k-h: 3.95; --pf-bar: 60px; --pf-tk-fs: 16px; --pf-tk-gap: 28px; }
  html.sh26.sh-home .pf { --pf-u: clamp(70px, 27vw, 150px); --pf-bar: 64px; }
  html.sh26 .pf__now {
    position: absolute;
    top: calc(var(--pf-h) - 30px);
    left: var(--sh-gutter);
    right: var(--sh-gutter);
    display: block;
    height: 22px;
    margin: 0;
    overflow: hidden;
    font-family: var(--sh-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sh-muted);
  }
  html.sh26 .pf__now b { font-family: var(--sh-display); font-weight: 500; font-size: 16px; color: var(--sh-ink); }
  html.sh26 .pf-tk__a { gap: 10px; }
  html.sh26 .pf-tk__ic { width: 32px; height: 32px; }
  html.sh26 .pf-tk__ic svg { width: 16px; height: 16px; }
}

/* ---------- Reduced motion: nothing drifts; the ticker is a centred list ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sh26 .pf__bar { height: auto; padding: 14px calc(var(--sh-gutter) + 56px) 6px; }  /* clear of the pause button */
  html.sh26 .pf-tk { position: static; display: block; -webkit-mask-image: none; mask-image: none; }
  html.sh26 .pf-tk > .pf-tk__list { flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 0; }
  html.sh26 .pf-tk__list > li { margin: 0; }
  html.sh26 .pf-card__win,
  html.sh26 .pf-card__cap { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  html.sh26 .pf-tk > .pf-tk__list { gap: 6px 18px; }
  html.sh26 .pf-tk__a { font-size: 14.5px; gap: 8px; }
  html.sh26 .pf-tk__ic { width: 28px; height: 28px; }
}

/* ---------- Viewer: <dialog class="sh-dialog pf-v"> built by 15-pf.js ---------- */
html.sh26.pf-lock,
html.sh26.pf-lock body { overflow: hidden; }
html.sh26.pf-lock { scrollbar-gutter: stable; }
html.sh26 dialog.pf-v {
  width: min(1240px, calc(100vw - 48px));
  height: calc(100dvh - 48px);
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: var(--sh-ground);
  color: var(--sh-body);
  font-family: var(--sh-font);
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  overscroll-behavior: contain;
}
html.sh26 dialog.pf-v[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
}
html.sh26 dialog.pf-v *,
html.sh26 dialog.pf-v *::before,
html.sh26 dialog.pf-v *::after { box-sizing: border-box; }
html.sh26 .pf-v__stage {
  min-width: 0;
  min-height: 0;
  margin: 16px 0 16px 16px;
  padding: 28px 28px 0;
  border-radius: 18px;
  background: var(--pf-bg, var(--sh-sand));
  display: flex;
  overflow: hidden;
  transition: background-color .4s ease;
}
html.sh26 .pf-v__frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  border-radius: 14px 14px 0 0;
  background: var(--sh-paper);
  box-shadow: 0 0 0 1px rgba(11, 14, 18, .08);
  overflow: hidden;
}
html.sh26 .pf-v__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid var(--sh-line);
}
html.sh26 .pf-v__bar i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--sh-sand-2); }
html.sh26 .pf-v__dom {
  flex: 1;
  min-width: 0;
  margin: 0 40px 0 12px;
  padding: 5px 14px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--sh-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html.sh26 .pf-v__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sh-scroll) transparent;
  background: var(--sh-paper);
}
html.sh26 .pf-v__scroll:focus-visible { outline: 2px solid var(--sh-blue); outline-offset: -4px; border-radius: 0; }
html.sh26 .pf-v__img { display: block; width: 100%; max-width: none; height: auto; margin: 0; background: var(--sh-sand); }
html.sh26 .pf-v__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 76px 32px 28px;
}
html.sh26 .pf-v__count { margin: 0 0 18px; }
html.sh26 .pf-v__t {
  margin: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  overflow-wrap: anywhere;
}
html.sh26 .pf-v__sec { margin: 14px 0 0; font-size: 17px; line-height: 1.45; color: var(--sh-muted); }
html.sh26 .pf-v__go { margin-top: 30px; align-self: flex-start; }
html.sh26 .pf-v__arch {
  align-self: flex-start;
  margin: 30px 0 0;
  padding: 8px 16px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--sh-ink);
}
html.sh26 .pf-v__hint { margin: 18px 0 0; font-size: 14px; color: var(--sh-muted); }
html.sh26 .pf-v__nav { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
html.sh26 .pf-v__x { position: absolute; top: 20px; right: 20px; z-index: 2; }
html.sh26 dialog.pf-v .sh-iconbtn svg,
html.sh26 dialog.pf-v .sh-btn__ic svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px) {
  html.sh26 dialog.pf-v {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  html.sh26 dialog.pf-v[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  html.sh26 .pf-v__stage { margin: 0; padding: 64px 16px 0; border-radius: 0; }
  html.sh26 .pf-v__frame { border-radius: 12px 12px 0 0; }
  html.sh26 .pf-v__bar { height: 34px; padding: 0 12px; }
  html.sh26 .pf-v__dom { margin-right: 0; font-size: 12px; padding: 4px 10px; }
  html.sh26 .pf-v__info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "t nav" "sec nav" "go go";
    align-items: center;
    gap: 2px 16px;
    padding: 16px 20px max(18px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--sh-line);
  }
  html.sh26 .pf-v__count { display: none; }
  html.sh26 .pf-v__t { grid-area: t; font-size: 26px; }
  html.sh26 .pf-v__sec { grid-area: sec; margin: 0; font-size: 15px; }
  html.sh26 .pf-v__go,
  html.sh26 .pf-v__arch { grid-area: go; margin-top: 14px; }
  html.sh26 .pf-v__go { width: 100%; justify-content: space-between; }
  html.sh26 .pf-v__hint { display: none; }
  html.sh26 .pf-v__nav { grid-area: nav; margin: 0; padding: 0; }
  html.sh26 .pf-v__x { top: 12px; right: 12px; }
}

/* ---- 20-sp.css ---- */
/* =========================================================================
   20 sp (v2): the generated pages (main.sp, plus page-editor .sp islands).
   Owner: sp slice. CSS only: no page HTML, build.py or build_ca.py changes.
   Spec: rd/DESIGN-v2.md sections E, F and I (owner feedback #2).

   Covers the /services/ pages, the industries pages, the root country hubs
   and landers, the /uk/ /us/ /fr/ location pages, about.html, the UK AI
   hubs, the 27 /ca/ pages (main.sp.sp--ca-local) and the two owner-edited
   root copies (ai-seo-agency.html, web-design-agency-uk.html).

   The look (weichie's service page, in our colours and words):
     - the portfolio band sits above the hero (pf slice); the hero is NOT
       pulled up under the header any more;
     - hero: a quiet crumb line, the badge as an uppercase annotation with a
       blue corner arrow, a huge Fraunces H1 with the blue <em>, the ticks as
       sand chips, then the lead and pills on the left and the form in a
       sand panel on the right;
     - sections: big Fraunces H2s, very airy spacing, ground and sand bands
       alternating (sand: the services list, the reviews and the industries),
       solid-rule rows with blue corner arrows, blue dot lists, sand cards
       with no borders and no shadows, a sand contact panel, no dark band;
     - every button is a pill with an icon circle: blue pill + white circle
       (primary), sand pill + blue circle (secondary). No black buttons.

   Method: restyle the existing sp-* markup from assets/css/service-page.css
   (read-only reference, also loaded by every blog post). Every selector is
   html.sh26 .sp ..., which is (0,3,1) and up against service-page.css's
   .sp .x at (0,2,0)-(0,3,0) and style-light's body.light h1-h4 / strong /
   input at (0,1,2), so plain declarations win without !important.

   !important is used only where something else already forces it, and each
   use is commented:
     [td]      table cells: style-light L1137 (body.light table td) and
               service-page.css L295-302 both set td/th colour and borders
               with !important.
     [inline]  inline style attributes (the /ca/ hero availability line and
               the page-editor image), which only !important can outrank.
     [wa]      .sp-btn--wa: service-page.css L636-637 forces its colour.

   Hard-won fixes kept from v1 (do not drop):
     - the hero pull-up reset (service-page.css pulls .sp-hero up by --sp-hdr);
     - the H1 <em> highlighter reset: background, both background-clips and
       the text fill reset together, or the words render invisible;
     - "Verified review" (.sp-review__ver) stays hidden (owner rule);
     - the pages whose step titles already carry "1." get no second counter;
     - no tabular-nums with Fustat (it widens spaces and punctuation).

   Section map (each block below is labelled with the same name):
     root / buttons / hero / hero form / glance facts / tech chips /
     overview / section shell, heads and bands / card rows and sand cards /
     problem and fit / CTA panel / process / comparison table / pricing /
     reviews band / stack / industries and regions / about / FAQ / contact /
     related links / phone dock / page-editor islands / narrow screens.

   Flag for build.py (not changed here): the review cards still carry a
   "Verified review" label (.sp-review__ver). It is hidden below; the
   generator should stop emitting it.
   ========================================================================= */


/* ---------- A face that draws nothing for "→" ----------
   Some pills and "Explore" links end their label with a text arrow ("Get a
   quote →") and now get a drawn arrow, which would show two arrows. This face covers U+2192 only
   and renders it at 0.1% size, so the glyph stays in the text (copy and
   keywords unchanged) but takes no visible room. Put it first in a
   font-family list; every other character falls through to Fustat. If no
   local font matches, the arrow simply shows as before. */
@font-face {
  font-family: "sp2 hide arrow";
  src: local("Segoe UI Symbol"), local("Segoe UI"), local("Arial"), local("ArialMT"), local("Helvetica"), local("Apple Symbols"), local("Roboto"), local("DejaVu Sans"), local("Noto Sans Symbols 2");
  unicode-range: U+2192;
  size-adjust: 0.1%;
}


/* ---------- Root ----------
   Remap the .sp-local custom properties onto the --sh-* tokens, so any
   service-page.css rule not restated below still lands on the v2 palette.
   --sp2-* are this partial's own knobs. Icons not in the token set are
   Lucide line icons (lucide-static 0.454.0, ISC), used as CSS masks so the
   colour still comes from the tokens. */
html.sh26 .sp {
  --ink: var(--sh-ink);
  --ink2: var(--sh-body);
  --muted: var(--sh-muted);
  --ground: var(--sh-ground);
  --tint: var(--sh-sand);
  --tint2: var(--sh-ground);
  --accent: var(--sh-blue);
  --sky: var(--sh-blue);
  --line: var(--sh-line);
  --line-2: var(--sh-line-2);
  --dark: var(--sh-sand);
  --pad-y: var(--sh-section);
  --gut: var(--sh-gutter);
  --font: var(--sh-font);
  --disp: var(--sh-display);
  --mono: var(--sh-font);
  /* section rhythm: ground sections pad less (two meet), sand bands more */
  --sp2-pad: clamp(56px, 6.6vw, 104px);
  --sp2-band: clamp(88px, 10.5vw, 156px);
  --sp2-head-gap: clamp(44px, 5.6vw, 84px);
  --sp2-sticky: calc(var(--sh-hdr, 76px) + 32px);
  --sp2-h2-side: clamp(34px, 3.9vw, 56px);
  --sp2-i-message: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8'/%3E%3Cpath d='M8 13h5'/%3E%3C/svg%3E");
  --sp2-i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
  background: var(--sh-ground);
  color: var(--sh-body);
  font-family: var(--sh-font);
  line-height: var(--sh-text-lh);
  letter-spacing: -0.01em;
}

/* Reveal: a 16px rise over .7s, once (service-page.js adds .sp-js and writes
   the (i%4)*70ms stagger inline). */
html.sh26 .sp.sp-js .sp-r {
  transform: translateY(var(--sh-rv-rise));
  transition: opacity var(--sh-rv-dur) var(--sh-ease), transform var(--sh-rv-dur) var(--sh-ease);
}
html.sh26 .sp.sp-js .sp-r.is-in { transform: none; }

/* Links inside running text: blue with a light underline at rest (blue on
   body copy is only 2.64:1, WCAG 1.4.1). */
html.sh26 .sp :is(.sp-lead, .sp-prose, .sp-fq__a, .sp-card__p, .sp-step__p, .sp-panel li, .sp-tl__p, .sp-fndr__p, .sp-note, .sp-price__p, .sp-band__p, .sp-hero__lead, .sp-stories__lead) a:not([class]) {
  color: var(--sh-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--sh-blue) 35%, transparent);
  text-underline-offset: .22em;
}
html.sh26 .sp :is(.sp-lead, .sp-prose, .sp-fq__a, .sp-card__p, .sp-step__p, .sp-panel li, .sp-tl__p, .sp-fndr__p, .sp-note, .sp-price__p, .sp-band__p, .sp-hero__lead, .sp-stories__lead) a:not([class]):hover {
  color: var(--sh-blue-ink);
  text-decoration-color: currentColor;
}

/* Wrapped "a · b · c" lists (form trust line, page index). Every item
   carries its own separator; the list is shifted left by one separator
   width and clipped there, so a wrapped line never starts with a dot. */
html.sh26 .sp :is(.sp-toc, .sp-form__trust) {
  --sp26-sep: 1.35em;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-left: calc(-1 * var(--sp26-sep));
  /* 6px of the shifted strip stays visible so focus rings are not cut */
  -webkit-clip-path: inset(-12px -12px -12px calc(var(--sp26-sep) - 6px));
  clip-path: inset(-12px -12px -12px calc(var(--sp26-sep) - 6px));
}
html.sh26 .sp :is(.sp-toc > li, .sp-form__trust > li)::before {
  content: "\00B7";
  display: inline-block;
  flex: none;
  width: var(--sp26-sep);
  margin: 0;
  text-align: center;
  font-weight: 400;
  color: var(--sh-muted);
}


/* ---------- Buttons ----------
   Every .sp-btn is a pill with a trailing 36px icon circle (spec C):
     primary / sky        blue pill, white circle, blue icon;
     line / ghost / wa    sand pill, blue circle, white icon (white pill on
                          a sand surface).
   The circle is whatever the markup already has:
     - an <svg> (calendar, WhatsApp, phone, arrow) becomes the circle itself
       (padding + radius) and moves to the end with `order`;
     - a .sp-btn__arrow span (a text arrow) becomes the circle and draws a
       masked arrow, its "→" glyph set to font-size 0;
     - a button with neither gets a pseudo circle (::after) and a masked
       arrow on ::before, absolutely placed over it.
   Colours come from --sp2-btn-* so a variant only swaps variables. */
html.sh26 .sp .sp-btn {
  --sp2-btn-bg: var(--sh-blue);
  --sp2-btn-bg-hover: var(--sh-blue-ink);
  --sp2-btn-fg: var(--sh-paper);
  --sp2-btn-ic-bg: var(--sh-paper);
  --sp2-btn-ic-fg: var(--sh-blue);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: auto;
  min-height: 52px;
  margin: 0;
  padding: 8px 8px 8px 22px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sp2-btn-bg);
  box-shadow: none;
  color: var(--sp2-btn-fg);
  font: 500 16px/1.2 var(--sh-font);
  letter-spacing: -0.01em;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transform: none;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .sp .sp-btn:hover {
  background: var(--sp2-btn-bg-hover);
  border-color: transparent;
  box-shadow: none;
  color: var(--sp2-btn-fg);
  transform: none;
}
html.sh26 .sp .sp-btn:active { transform: translateY(1px); }
html.sh26 .sp .sp-btn:focus-visible { border-radius: var(--sh-r-pill); }
/* the existing svg becomes the circle */
html.sh26 .sp .sp-btn > svg {
  order: 2;
  box-sizing: content-box;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 9px;
  border-radius: 50%;
  background: var(--sp2-btn-ic-bg);
  color: var(--sp2-btn-ic-fg);
  transition: transform .25s var(--sh-ease);
}
html.sh26 .sp .sp-btn:hover > svg { transform: rotate(-12deg); }
html.sh26 .sp .sp-btn:hover > svg:has(> path[d^="M4 12h15"]) { transform: translateX(3px); }
/* the text-arrow span becomes the circle */
html.sh26 .sp .sp-btn .sp-btn__arrow {
  order: 2;
  position: relative;
  display: inline-block;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  background: var(--sp2-btn-ic-bg);
  font-size: 0;
  line-height: 0;
  color: transparent;
  transform: none;
}
html.sh26 .sp .sp-btn .sp-btn__arrow::before {
  content: "";
  position: absolute;
  inset: 9px;
  background: var(--sp2-btn-ic-fg);
  -webkit-mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
  transition: transform .25s var(--sh-ease);
}
html.sh26 .sp .sp-btn:hover .sp-btn__arrow { transform: none; }
html.sh26 .sp .sp-btn:hover .sp-btn__arrow::before { transform: translate(2px, -2px); }
/* no icon in the markup: draw one */
html.sh26 .sp .sp-btn:not(:has(> svg, > .sp-btn__arrow))::after {
  content: "";
  order: 2;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sp2-btn-ic-bg);
}
html.sh26 .sp .sp-btn:not(:has(> svg, > .sp-btn__arrow))::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--sp2-btn-ic-fg);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  z-index: 1;
  transition: transform .25s var(--sh-ease);
}
html.sh26 .sp .sp-btn:not(:has(> svg, > .sp-btn__arrow)):hover::before { transform: translateX(3px); }
/* links that leave the site (the founder's profiles) point up and out */
html.sh26 .sp .sp-btn[target="_blank"]:not(:has(> svg, > .sp-btn__arrow))::before {
  -webkit-mask-image: var(--sh-i-arrow-up-right);
  mask-image: var(--sh-i-arrow-up-right);
}
html.sh26 .sp .sp-btn[target="_blank"]:not(:has(> svg, > .sp-btn__arrow)):hover::before { transform: translate(2px, -2px); }

/* Secondary: the sand pill with the blue circle. */
html.sh26 .sp :is(.sp-btn--line, .sp-btn--ghost, .sp-btn--wa) {
  --sp2-btn-bg: var(--sh-sand);
  --sp2-btn-bg-hover: var(--sh-sand-2);
  --sp2-btn-fg: var(--sh-ink);
  --sp2-btn-ic-bg: var(--sh-blue);
  --sp2-btn-ic-fg: var(--sh-paper);
}
/* [wa] service-page.css L636-637 sets this colour with !important. */
html.sh26 .sp .sp-btn--wa,
html.sh26 .sp .sp-btn--wa:hover { color: var(--sp2-btn-fg) !important; }
/* On a sand surface the sand pill turns white so it stays visible. */
html.sh26 .sp :is(.sp-contact__grid, .sp-band__box, .sp-fq__ask, .sp-done, .sp-stories, .sp-sec--tint:not(:has(> .sp-in > .sp-table-wrap))) :is(.sp-btn--line, .sp-btn--ghost, .sp-btn--wa) {
  --sp2-btn-bg: var(--sh-paper);
  --sp2-btn-bg-hover: var(--sh-sand-2);
}
html.sh26 .sp .sp-btn__arrow ~ .sp-btn__arrow { display: none; }


/* ---------- Hero ----------
   Not pulled under the header: the portfolio band sits between them now.
   Desktop (>=1021px): intro and extra are flattened (display: contents) so
   their children sit on one 12-column grid:
     crumbs / badge annotation, H1 and tick chips centred /
     [ca availability line] / then lead, pills and proof in columns 1-6
     beside the form panel in 8-12 / the testimonial strip full width.
   Tablet (641-1020px): the same order in one column, form after the pills.
   Phones keep build.py's form-first order (sp-hero--formfirst), whose
   display:contents and order rules in service-page.css are left alone. */
html.sh26 .sp .sp-hero {
  margin-top: 0;
  padding: clamp(36px, 4.6vw, 72px) var(--sh-gutter) var(--sp2-pad);
  background: var(--sh-ground);
  overflow: visible;
}
html.sh26 .sp .sp-hero__bg,
html.sh26 .sp .sp-hero__bloom,
html.sh26 .sp .sp-form__glow { display: none; }
html.sh26 .sp .sp-hero__wrap { max-width: var(--sh-container); }

/* The crumb line: small, quiet, a blue back arrow before "Home". */
html.sh26 .sp .sp-crumbs {
  align-items: center;
  gap: 4px 8px;
  margin: 0 0 clamp(28px, 3.4vw, 48px);
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-crumbs li { display: inline-flex; align-items: center; }
html.sh26 .sp .sp-crumbs li:first-child::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transform: scaleX(-1);
}
html.sh26 .sp .sp-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--sh-line-2); }
html.sh26 .sp .sp-crumbs a { color: var(--sh-ink); text-decoration: none; }
html.sh26 .sp .sp-crumbs a:hover { color: var(--sh-blue); text-decoration: underline; text-underline-offset: 3px; }

/* The old pill badge: weichie's uppercase annotation, same words, with a
   blue corner arrow. */
html.sh26 .sp .sp-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.sh26 .sp .sp-badge__dot {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 .sp .sp-badge__dot::after { content: none; display: none; animation: none; }
html.sh26 .sp .sp-badge__txt {
  font-family: var(--sh-font);
  font-size: var(--sh-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sh-muted);
}

html.sh26 .sp .sp-hero__title {
  margin: 22px 0 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: var(--sh-h1);
  line-height: 1.02;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  text-wrap: balance;
}
/* The accent words: blue, upright. Every highlighter trick is reset
   together: style-light-era gradient text needs background, both
   background-clips and the text fill reset at once, or the words render
   invisible. */
html.sh26 .sp .sp-hero__title em,
html.sh26 .sp :is(.sp-h2, .sp-stories__title, .sp-fq__title) em {
  position: static;
  display: inline;
  z-index: auto;
  font-style: normal;
  color: var(--sh-blue);
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}
html.sh26 .sp .sp-hero__title em::after,
html.sh26 .sp .sp-hero__title em::before { content: none; display: none; }

html.sh26 .sp .sp-hero__lead {
  max-width: 34em;
  margin: 0;
  font-family: var(--sh-font);
  font-size: clamp(19px, 1.55vw, 22px);
  font-weight: 500;
  line-height: var(--sh-lead-lh);
  letter-spacing: -0.02em;
  color: var(--sh-ink);
  text-wrap: pretty;
}

/* Ticks: sand chips that wrap (weichie's tech pills under the H1). Each
   keeps its whole sentence; a small blue check leads. */
html.sh26 .sp .sp-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(28px, 3vw, 40px) 0 0;
  padding: 0;
}
html.sh26 .sp .sp-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 8px 18px 8px 14px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font-family: var(--sh-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-ticks li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border-radius: 0;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-check) center / contain no-repeat;
  mask: var(--sh-i-check) center / contain no-repeat;
}
html.sh26 .sp .sp-ticks strong { font-weight: 600; color: var(--sh-ink); }

/* /ca/ only: "Calls are scheduled in your working hours ..." */
html.sh26 .sp .sp-hero__avail {
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sh-muted);
  opacity: 1 !important; /* [inline] style="...opacity:.8" */
}

html.sh26 .sp .sp-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 32px; }

/* Proof: small chips, "1,000+ clients served", "Building since 2020",
   "Rated on Clutch 4.6 ★★★★★". Same elements, no big numerals. */
html.sh26 .sp .sp-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-proof__item,
html.sh26 .sp .sp-proof__item:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-pill);
  background: transparent;
  color: inherit;
  text-decoration: none;
}
html.sh26 .sp .sp-proof__row { display: inline-flex; align-items: center; gap: .32em; }
html.sh26 .sp .sp-proof__num {
  font-family: var(--sh-font);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  font-variant-numeric: normal;
}
html.sh26 .sp .sp-proof__num span { color: inherit; }
html.sh26 .sp .sp-proof__stars { font-size: 11px; letter-spacing: 1px; color: var(--sh-star); }
html.sh26 .sp .sp-proof__lbl {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-proof__item:first-child .sp-proof__lbl { text-transform: lowercase; }
/* "Building since 2020" and "Rated on Clutch 4.6": label first. The word
   space goes on whichever part comes second. */
html.sh26 .sp .sp-proof__item:first-child > .sp-proof__lbl { margin-left: .3em; }
html.sh26 .sp .sp-proof__item:not(:first-child) > .sp-proof__lbl { order: 1; }
html.sh26 .sp .sp-proof__item:not(:first-child) > .sp-proof__num,
html.sh26 .sp .sp-proof__item:not(:first-child) > .sp-proof__row { order: 2; margin-left: .3em; }
html.sh26 .sp a.sp-proof__item { transition: background-color var(--sh-fast) ease, border-color var(--sh-fast) ease; }
html.sh26 .sp a.sp-proof__item:hover { border-color: transparent; background: var(--sh-sand); }
html.sh26 .sp a.sp-proof__item:hover .sp-proof__lbl { color: var(--sh-ink); }
html.sh26 .sp a.sp-proof__item:focus-visible { border-radius: var(--sh-r-pill); }

/* The testimonial strip (the vt include, styled inside by the vt layer) is
   "not one of ours": placed by exclusion so its root class stays free. */
html.sh26 .sp .sp-hero__extra { display: flex; flex-direction: column; align-items: flex-start; }
html.sh26 .sp .sp-hero__extra > :not(.sp-ticks):not(.sp-hero__ctas):not(.sp-proof):not(.sp-hero__avail) {
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  margin-top: clamp(48px, 5.6vw, 84px);
}

/* Tablet and desktop: one flat grid (or column). */
@media (min-width: 641px) {
  html.sh26 .sp .sp-hero__intro,
  html.sh26 .sp .sp-hero__extra { display: contents; }
  html.sh26 .sp .sp-hero__wrap { display: flex; flex-direction: column; align-items: stretch; }
  html.sh26 .sp .sp-crumbs { order: 1; }
  html.sh26 .sp .sp-badge { order: 2; }
  html.sh26 .sp .sp-hero__title { order: 3; }
  html.sh26 .sp .sp-ticks { order: 4; }
  html.sh26 .sp .sp-hero__avail { order: 5; }
  html.sh26 .sp .sp-hero__lead { order: 6; margin-top: clamp(48px, 6vw, 96px); }
  html.sh26 .sp .sp-hero__ctas { order: 7; }
  html.sh26 .sp .sp-proof { order: 8; }
  html.sh26 .sp .sp-hero__side { order: 9; width: 100%; max-width: 640px; margin-top: 48px; }
  html.sh26 .sp .sp-hero__extra > :not(.sp-ticks):not(.sp-hero__ctas):not(.sp-proof):not(.sp-hero__avail) { order: 10; }
  /* weichie's service hero: the annotation, H1 and chips centred under a
     left-aligned back line */
  html.sh26 .sp .sp-badge { justify-content: center; }
  html.sh26 .sp .sp-hero__title { max-width: 15em; margin-left: auto; margin-right: auto; text-align: center; }
  html.sh26 .sp .sp-ticks { justify-content: center; max-width: 1080px; margin-left: auto; margin-right: auto; }
  html.sh26 .sp .sp-hero__avail { text-align: center; }
}
@media (min-width: 1021px) {
  html.sh26 .sp .sp-hero__wrap {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(8, auto) 1fr auto;
    grid-template-areas: none;
    column-gap: var(--sh-gap);
    align-items: start;
  }
  html.sh26 .sp .sp-crumbs { grid-column: 1 / -1; grid-row: 1; }
  html.sh26 .sp .sp-badge { grid-column: 1 / -1; grid-row: 2; }
  html.sh26 .sp .sp-hero__title { grid-column: 1 / -1; grid-row: 3; }
  html.sh26 .sp .sp-ticks { grid-column: 1 / -1; grid-row: 4; }
  html.sh26 .sp .sp-hero__avail { grid-column: 1 / -1; grid-row: 5; }
  html.sh26 .sp .sp-hero__lead { grid-column: 1 / span 6; grid-row: 6; }
  html.sh26 .sp .sp-hero__ctas { grid-column: 1 / span 6; grid-row: 7; }
  html.sh26 .sp .sp-proof { grid-column: 1 / span 6; grid-row: 8; }
  html.sh26 .sp .sp-hero__side {
    grid-column: 8 / span 5;
    grid-row: 6 / span 4;
    align-self: start;
    max-width: none;
    margin-top: clamp(48px, 6vw, 96px);
  }
  html.sh26 .sp .sp-hero__extra > :not(.sp-ticks):not(.sp-hero__ctas):not(.sp-proof):not(.sp-hero__avail) {
    grid-column: 1 / -1;
    grid-row: 10;
  }
  /* The brief field keeps its own height instead of filling the column. */
  html.sh26 .sp .sp-hero__side .sp-form__desc textarea { flex: none; min-height: 112px; }
}
/* Small laptops: six and six, so the form's paired fields keep their room. */
@media (min-width: 1021px) and (max-width: 1199px) {
  html.sh26 .sp .sp-hero__lead,
  html.sh26 .sp .sp-hero__ctas,
  html.sh26 .sp .sp-proof { grid-column: 1 / span 6; }
  html.sh26 .sp .sp-hero__side { grid-column: 7 / span 6; }
}


/* ---------- Hero form (and the closing form's base) ----------
   A sand panel (24px radius, no border, no shadow), white 52px fields with
   a 14px radius, sentence-case labels, the blue pill submit. */
html.sh26 .sp .sp-formwrap { flex: none; }
html.sh26 .sp .sp-form {
  flex: none;
  padding: clamp(24px, 3vw, 44px);
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  box-shadow: none;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-form__head { gap: 4px 12px; align-items: center; }
html.sh26 .sp .sp-form__kicker,
html.sh26 .sp .sp-form__fast {
  gap: 10px;
  font-family: var(--sh-font);
  font-size: var(--sh-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-form__kicker { display: inline-flex; align-items: center; color: var(--sh-ink); }
html.sh26 .sp .sp-form__kicker::before {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--sh-blue);
  box-shadow: none;
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
  animation: none;
}
html.sh26 .sp .sp-form__fast::before { content: none; display: none; }
html.sh26 .sp .sp-form__title {
  margin: 16px 0 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.1;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  text-wrap: balance;
}
html.sh26 .sp .sp-form__sub { margin: 10px 0 24px; font-size: 16px; line-height: 1.5; color: var(--sh-muted); }
html.sh26 .sp .sp-form__grid { gap: 16px 14px; }
html.sh26 .sp .sp-l {
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-l b { font-weight: 500; color: var(--sh-muted); }
html.sh26 .sp .sp-i {
  min-height: 52px;
  margin-top: 8px;
  padding: 13px 16px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-field);
  background-color: var(--sh-paper);
  box-shadow: none;
  font-family: var(--sh-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
}
html.sh26 .sp select.sp-i {
  padding-right: 44px;
  background: var(--sh-paper) var(--sh-select-arrow) right 14px center / 18px 18px no-repeat;
  -webkit-appearance: none;
  appearance: none;
}
html.sh26 .sp .sp-i::placeholder { color: var(--sh-muted); opacity: .8; }
html.sh26 .sp .sp-i:hover { border-color: var(--sh-line-2); }
html.sh26 .sp .sp-i:focus,
html.sh26 .sp .sp-i:focus-visible {
  outline: 2px solid var(--sh-blue);
  outline-offset: 1px;
  border-color: transparent;
  border-radius: var(--sh-r-field);
  background-color: var(--sh-paper);
  box-shadow: none;
}
html.sh26 .sp .sp-i[aria-invalid="true"] { border-color: var(--sh-bad); background-color: color-mix(in srgb, var(--sh-bad) 4%, var(--sh-paper)); }
html.sh26 .sp textarea.sp-i { min-height: 112px; resize: vertical; }
html.sh26 .sp .sp-form__desc { margin-top: 16px; }
html.sh26 .sp .sp-capbox { border: 0; border-radius: var(--sh-r-field); background: var(--sh-sand-2); }
html.sh26 .sp .sp-cap__new { border-radius: var(--sh-r-field); }
/* Submit: the blue pill, full width, label left and the white circle right. */
html.sh26 .sp .sp-form__submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  margin-top: 22px;
  padding: 8px 8px 8px 24px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-blue);
  box-shadow: none;
  color: var(--sh-paper);
  font: 500 17px/1.2 var(--sh-font);
  letter-spacing: -0.01em;
  text-align: left;
  transform: none;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .sp .sp-form__submit:hover { background: var(--sh-blue-ink); box-shadow: none; transform: none; }
html.sh26 .sp .sp-form__submit:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .sp .sp-form__submit svg {
  display: block;
  box-sizing: content-box;
  flex: none;
  width: 18px;
  height: 18px;
  padding: 10px;
  border-radius: 50%;
  background: var(--sh-paper);
  color: var(--sh-blue);
  transition: transform .25s var(--sh-ease);
}
html.sh26 .sp .sp-form__submit:hover svg { transform: translateX(3px); }
html.sh26 .sp .sp-form__submit[disabled] { opacity: .6; cursor: progress; }
html.sh26 .sp .sp-form__err { border-radius: var(--sh-r-field); }
html.sh26 .sp .sp-form__note { margin-top: 12px; font-size: 13.5px; color: var(--sh-muted); }
html.sh26 .sp .sp-form__bottom { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--sh-sand-2); }
html.sh26 .sp .sp-form__trust {
  gap: 2px 0;
  padding: 0;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-form__note,
html.sh26 .sp .sp-form__alt { text-align: left; }
html.sh26 .sp .sp-form__alt { margin-top: 8px; font-size: 14px; color: var(--sh-muted); }
html.sh26 .sp .sp-form__alt a {
  font-weight: 500;
  color: var(--sh-blue);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--sh-blue) 35%, transparent);
  text-underline-offset: 3px;
}
html.sh26 .sp .sp-form__alt a:hover { color: var(--sh-blue-ink); text-decoration-color: currentColor; }

/* Success panel: the same sand panel, a blue tile instead of the green disc. */
html.sh26 .sp .sp-done {
  padding: clamp(28px, 3vw, 44px);
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  box-shadow: none;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-done__ic {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--sh-blue);
  color: var(--sh-paper);
  box-shadow: none;
}
html.sh26 .sp .sp-done p { font-size: 16px; color: var(--sh-muted); }
html.sh26 .sp .sp-done p.sp-done__h {
  font: 500 clamp(26px, 2.3vw, 34px)/1.1 var(--sh-display);
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .sp .sp-done__box {
  margin-top: 24px;
  padding: 20px;
  border: 0;
  border-radius: var(--sh-r-field);
  background: var(--sh-ground);
}
html.sh26 .sp .sp-done__box strong { font-weight: 600; color: var(--sh-ink); }
html.sh26 .sp .sp-done__acts { gap: 10px; }
html.sh26 .sp .sp-done__acts .sp-btn { width: 100%; }
html.sh26 .sp .sp-done .sp-done__box .sp-btn--wa { --sp2-btn-bg: var(--sh-sand); --sp2-btn-bg-hover: var(--sh-sand-2); }


/* ---------- Glance facts (was the dark band) ----------
   Four plain facts in Fraunces over a muted line, divided by solid rules
   like weichie's rows. Static: no count-up. */
html.sh26 .sp .sp-glance {
  padding: 0 var(--sh-gutter);
  background: var(--sh-ground);
  overflow: visible;
}
html.sh26 .sp .sp-glance::before { display: none; }
html.sh26 .sp .sp-glance__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 var(--sh-gap);
  max-width: var(--sh-container);
  margin: 0 auto;
  padding: 0;
  border: 0;
}
html.sh26 .sp .sp-glance__i,
html.sh26 .sp .sp-glance__i:first-child {
  flex: none;
  min-width: 0;
  padding: 26px 0 0;
  border: 0;
  border-top: 1px solid var(--sh-rule);
  text-align: left;
}
html.sh26 .sp .sp-glance__n {
  margin: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(36px, 3.9vw, 58px);
  line-height: 1;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  font-variant-numeric: normal;
}
html.sh26 .sp .sp-glance__l { margin: 12px 0 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: var(--sh-muted); }


/* ---------- Tech chips (was the marquee) ----------
   A static, wrapped set of sand chips (only the portfolio carousel and the
   services ticker move). The aria-hidden duplicate that fed the loop stays
   hidden; the visible set keeps every tool name. */
html.sh26 .sp .sp-mq {
  padding: var(--sp2-pad) max(var(--sh-gutter), calc((100% - var(--sh-container)) / 2)) 0;
  background: var(--sh-ground);
  border: 0;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}
html.sh26 .sp .sp-mq::before,
html.sh26 .sp .sp-mq::after { content: none; display: none; }
html.sh26 .sp .sp-mq__label {
  margin: 0 0 18px;
  font-family: var(--sh-font);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-mq__track {
  display: block;
  width: auto;
  animation: none;
  transform: none;
}
html.sh26 .sp .sp-mq__set { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
html.sh26 .sp .sp-mq__set[aria-hidden="true"] { display: none; }
html.sh26 .sp .sp-mq__set li {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin: 0;
  padding: 0 15px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font-family: var(--sh-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  white-space: nowrap;
}
html.sh26 .sp .sp-mq__set li::before,
html.sh26 .sp .sp-mq__set li::after { content: none; display: none; }
@media (min-width: 1024px) {
  html.sh26 .sp .sp-mq {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sh-gap);
    align-items: start;
  }
  html.sh26 .sp .sp-mq__label { grid-column: 1 / span 4; margin: 6px 0 0; max-width: 16em; }
  html.sh26 .sp .sp-mq__track { grid-column: 5 / span 8; }
}


/* ---------- Overview: the short answer ----------
   H2 and prose on the left (the first paragraph is the weichie lead: Fustat
   500, ink); "At a glance" becomes a sand card in the side column with the
   page index under it. */
html.sh26 .sp .sp-answer { grid-template-columns: minmax(0, 1fr); gap: 48px; }
html.sh26 .sp .sp-prose { max-width: var(--sh-measure); margin-top: 36px; }
html.sh26 .sp .sp-prose p {
  margin: 0 0 18px;
  font-size: var(--sh-text);
  font-weight: 400;
  line-height: var(--sh-text-lh);
  color: var(--sh-body);
}
html.sh26 .sp .sp-prose p:first-child {
  margin-bottom: 26px;
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}
/* Page-editor text can leave a <div> where a paragraph was meant. */
html.sh26 .sp .sp-prose > div { margin: 0 0 18px; font-size: var(--sh-text); line-height: var(--sh-text-lh); color: var(--sh-body); }
html.sh26 .sp .sp-prose strong { font-weight: 600; color: var(--sh-ink); }
html.sh26 .sp .sp-prose h3 { margin: 36px 0 12px; font: 500 var(--sh-h3)/1.15 var(--sh-display); letter-spacing: var(--sh-track-display); color: var(--sh-ink); }
html.sh26 .sp .sp-prose ul:not([class]) { display: grid; gap: 10px; margin: 0 0 18px; padding: 0; list-style: none; }
html.sh26 .sp .sp-prose ul:not([class]) > li { position: relative; padding-left: 22px; }
html.sh26 .sp .sp-prose ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(.5lh - 3.5px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-blue);
}
html.sh26 .sp .sp-byline {
  gap: 12px;
  margin-top: 32px;
  padding-top: 0;
  border-top: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-byline__av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sh-blue-tile);
  color: var(--sh-blue);
  font: 600 13px/1 var(--sh-font);
}
html.sh26 .sp .sp-byline strong { font-size: 14.5px; font-weight: 600; color: var(--sh-ink); }

html.sh26 .sp .sp-facts {
  position: static;
  padding: clamp(24px, 2.6vw, 36px);
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  box-shadow: none;
  color: var(--sh-body);
  overflow: visible;
}
html.sh26 .sp .sp-facts::before { display: none; }
html.sh26 .sp .sp-facts__h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--sh-font);
  font-size: var(--sh-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-facts__h::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 .sp .sp-facts__h::after { content: none; display: none; }
html.sh26 .sp .sp-facts dl > div {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  padding: 13px 0;
  border-top: 0;
  border-bottom: 1px solid var(--sh-sand-2);
}
html.sh26 .sp .sp-facts dt { font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--sh-muted); }
html.sh26 .sp .sp-facts dd { font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--sh-ink); }
html.sh26 .sp .sp-toc {
  gap: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding: 18px 0 0;
  border-top: 0;
  font-size: 15px;
  line-height: 1.8;
}
html.sh26 .sp .sp-toc::before {
  content: "On this page";
  display: block;
  flex: 0 0 100%;
  margin-bottom: 2px;
  padding-left: var(--sp26-sep);
  font-weight: 600;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-toc li { display: inline-flex; }
html.sh26 .sp .sp-toc a,
html.sh26 .sp .sp-toc a.is-quote {
  display: inline;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--sh-blue);
  text-decoration: none;
}
html.sh26 .sp .sp-toc a:hover { background: none; color: var(--sh-blue-ink); text-decoration: underline; text-underline-offset: 3px; }
html.sh26 .sp .sp-toc a.is-quote { font-weight: 600; color: var(--sh-ink); text-decoration: underline; text-decoration-color: var(--sh-line-2); text-underline-offset: 3px; }
@media (min-width: 1024px) {
  html.sh26 .sp .sp-answer { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 .sp .sp-answer > :first-child { grid-column: 1 / span 7; }
  html.sh26 .sp .sp-answer > .sp-facts { grid-column: 9 / span 4; margin-top: 8px; }
}
@media (min-width: 1024px) and (min-height: 820px) {
  html.sh26 .sp .sp-answer > .sp-facts { position: sticky; top: var(--sp2-sticky); }
}


/* ---------- Section shell, heads and bands ----------
   Ground sections pad clamp(56-104px) each (so two meeting give 112-208px of
   air); sand bands pad clamp(88-156px). The sand bands are the services
   list (.sp-sec--tint), the reviews and the industries: the comparison
   table's tint section stays on the ground, which keeps every page at about
   three sand bands. No hairlines between sections: the ground change does
   the work. */
html.sh26 .sp .sp-in { max-width: var(--sh-container); }
html.sh26 .sp .sp-sec,
html.sh26 .sp .sp-sec--white {
  padding: var(--sp2-pad) var(--sh-gutter);
  background: var(--sh-ground);
  border: 0;
  overflow: visible; /* the side-head is sticky; .sp itself clips x */
}
html.sh26 .sp .sp-sec--tint {
  padding-top: var(--sp2-band);
  padding-bottom: var(--sp2-band);
  background: var(--sh-sand);
  border: 0;
}
html.sh26 .sp .sp-sec--tint:has(> .sp-in > .sp-table-wrap) {
  padding-top: var(--sp2-pad);
  padding-bottom: var(--sp2-pad);
  background: var(--sh-ground);
}
html.sh26 .sp .sp-sec--tint::before,
html.sh26 .sp .sp-sec--tint::after { display: none; }
/* A ground section right after a sand band gets the band's breathing room. */
html.sh26 .sp :is(.sp-sec--tint:not(:has(> .sp-in > .sp-table-wrap)), .sp-stories) + :is(.sp-sec:not(.sp-sec--tint), .sp-process, .sp-fq, .sp-contact, .sp-band) { padding-top: var(--sp2-band); }

/* Section labels (eyebrows) are decorative: the H2 names the section, and
   weichie uses at most a few annotations a page. The honesty label
   "Illustrative examples, not client results" lives in the section lead
   on every page, so nothing it says is lost. */
html.sh26 .sp .sp-eyebrow,
html.sh26 .sp .sp-stories__eyebrow,
html.sh26 .sp .sp-fq__eyebrow { display: none; }

/* The stacked head: a big H2 over columns 1-7, the lead beside it in 8-12,
   bottom-aligned (weichie's "Development partner" rhythm). */
html.sh26 .sp .sp-head,
html.sh26 .sp .sp-head--solo {
  display: block;
  max-width: none;
  margin: 0 0 var(--sp2-head-gap);
}
html.sh26 .sp .sp-h2,
html.sh26 .sp .sp-stories__title,
html.sh26 .sp .sp-fq__title {
  margin: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: var(--sh-h2);
  line-height: 1.02;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  text-wrap: balance;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  hyphens: manual;
}
html.sh26 .sp .sp-lead,
html.sh26 .sp .sp-stories__lead,
html.sh26 .sp .sp-fq__lead {
  max-width: 46ch;
  margin: 22px 0 0;
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.015em;
  color: var(--sh-muted);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  html.sh26 .sp .sp-head:has(> .sp-lead) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sh-gap);
    align-items: end;
  }
  html.sh26 .sp .sp-head:has(> .sp-lead) > :first-child { grid-column: 1 / span 7; }
  html.sh26 .sp .sp-head:has(> .sp-lead) > .sp-lead { grid-column: 9 / span 4; margin: 0; padding-bottom: .35em; }
}

/* The side-head (weichie's sticky left column): for lists that read top to
   bottom (service rows, process, problem/fit, page-editor text). H2 and lead
   in columns 1-5, sticky; content in 6-12. Sections whose content wants the
   full width (tables, sand card grids, pricing, chips, industries, the
   founder) keep the stacked head above. (:has() cannot nest, hence the
   :is() pair: no card grid, or a card grid with icons.) */
@media (min-width: 1024px) {
  html.sh26 .sp .sp-in:has(> .sp-head):not(:has(> .sp-table-wrap, > .sp-fndr, > .sp-prices, > .sp-stack, > .sp-minis)):is(:not(:has(> .sp-cards)), :has(> .sp-cards .sp-card__ic)) {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--sh-gap);
    row-gap: 0;
    align-items: start;
  }
  html.sh26 .sp .sp-in:has(> .sp-head):not(:has(> .sp-table-wrap, > .sp-fndr, > .sp-prices, > .sp-stack, > .sp-minis)):is(:not(:has(> .sp-cards)), :has(> .sp-cards .sp-card__ic)) > .sp-head {
    display: block;
    grid-column: 1 / span 5;
    grid-row: 1 / span 8;
    align-self: start;
    position: sticky;
    top: var(--sp2-sticky);
    max-width: none;
    margin: 0;
    padding-right: clamp(0px, 3vw, 48px);
  }
  html.sh26 .sp .sp-in:has(> .sp-head):not(:has(> .sp-table-wrap, > .sp-fndr, > .sp-prices, > .sp-stack, > .sp-minis)):is(:not(:has(> .sp-cards)), :has(> .sp-cards .sp-card__ic)) > :not(.sp-head) {
    grid-column: 6 / span 7;
    min-width: 0;
  }
  html.sh26 .sp .sp-in:has(> .sp-head):not(:has(> .sp-table-wrap, > .sp-fndr, > .sp-prices, > .sp-stack, > .sp-minis)):is(:not(:has(> .sp-cards)), :has(> .sp-cards .sp-card__ic)) > .sp-head .sp-h2 { font-size: var(--sp2-h2-side); line-height: 1.04; }
  html.sh26 .sp .sp-in:has(> .sp-head):not(:has(> .sp-table-wrap, > .sp-fndr, > .sp-prices, > .sp-stack, > .sp-minis)):is(:not(:has(> .sp-cards)), :has(> .sp-cards .sp-card__ic)) > .sp-head .sp-lead { margin-top: 22px; }
}


/* ---------- Card rows and sand cards ----------
   Icon cards (what we build): weichie's "Other services" rows. A solid
   rule, the soft icon in its pale-blue circle, the name in Fustat 500, the
   line under it, and a blue "Explore" with an arrow where the row links.
   Tagged cards (illustrative examples): sand cards in two columns, no
   borders, no shadows, the title in Fraunces. */
html.sh26 .sp .sp-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 0;
}
html.sh26 .sp .sp-card {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}
html.sh26 .sp .sp-card:hover { transform: none; box-shadow: none; border-color: transparent; }
html.sh26 .sp .sp-card::before,
html.sh26 .sp .sp-card::after { content: none; display: none; }
html.sh26 .sp .sp-card:has(.sp-card__a:focus-visible) { outline: 2px solid var(--sh-blue); outline-offset: 4px; }
html.sh26 .sp .sp-card__top { display: contents; }
html.sh26 .sp .sp-card__num { display: none; }
html.sh26 .sp .sp-card__ic,
html.sh26 .sp .sp-card:hover .sp-card__ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sh-blue-tile);
  color: var(--sh-blue);
  box-shadow: none;
  transform: none;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .sp .sp-card__ic .si { width: 22px; height: 22px; }
html.sh26 .sp .sp-card__t {
  margin: 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-card__p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-card__p a { position: relative; z-index: 1; }
html.sh26 .sp .sp-card__a { color: inherit; text-decoration: none; }
html.sh26 .sp .sp-card__a::after { border-radius: 0; }
html.sh26 .sp .sp-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-family: "sp2 hide arrow", var(--sh-font); /* its "→" gives way to the drawn arrow */
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--sh-blue);
}
html.sh26 .sp .sp-card__more::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 .sp .sp-card__tag {
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-card__r {
  display: block;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-card__r::before { content: none; display: none; }

/* Rows with an icon: circle | title + line | (Explore). */
html.sh26 .sp .sp-cards:has(> .sp-card .sp-card__ic) { border-top: 1px solid var(--sh-rule); }
html.sh26 .sp .sp-card:has(.sp-card__ic) {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  column-gap: 22px;
  align-items: start;
  padding: 28px 0 30px;
  border-bottom: 1px solid var(--sh-rule);
}
html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__top > .sp-card__ic { grid-column: 1; grid-row: 1 / span 3; }
html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__t { grid-column: 2; grid-row: 1; align-self: center; min-height: 48px; display: flex; align-items: center; }
html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__p,
html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__r,
html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__tag { grid-column: 2 / span 2; }
html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__p { margin-top: 2px; }
html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__more { grid-column: 3; grid-row: 1; align-self: center; }
html.sh26 .sp .sp-card:has(.sp-card__a):hover .sp-card__ic { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .sp .sp-card:has(.sp-card__a):hover .sp-card__a { color: var(--sh-blue); }
html.sh26 .sp .sp-card:has(.sp-card__a):hover .sp-card__more::after { transform: translateX(4px); }
/* Inside the sand band the icon circle is white. */
html.sh26 .sp .sp-sec--tint .sp-card__ic { background: var(--sh-paper); }

/* Cards with no icon: sand cards, two columns (ground cards on a sand band). */
html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)) { gap: var(--sh-gap); }
html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)) > .sp-card {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 40px);
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
}
html.sh26 .sp .sp-sec--tint .sp-cards:not(:has(.sp-card__ic)) > .sp-card { background: var(--sh-ground); }
html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)) > .sp-card > .sp-card__t {
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: var(--sh-track-display);
}
html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)) > .sp-card > .sp-card__p { margin-top: 14px; color: var(--sh-body); }
html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)) > .sp-card > .sp-card__r {
  margin-top: auto;
  padding-top: 20px;
}
html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)) > .sp-card > .sp-card__p + .sp-card__r { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sh-sand-2); }
@media (min-width: 768px) {
  html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)):has(> .sp-card:nth-child(3):last-child),
  html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)):has(> .sp-card:nth-child(6):last-child),
  html.sh26 .sp .sp-cards:not(:has(.sp-card__ic)):has(> .sp-card:nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- Problem and fit pairs ----------
   Two columns under Fraunces subheads with blue dot lists. The "with us"
   (good) side is a sand card; the other stays on the ground with muted
   dots. Same lines. */
html.sh26 .sp .sp-ba { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sh-gap); align-items: stretch; }
html.sh26 .sp .sp-panel,
html.sh26 .sp .sp-panel--good,
html.sh26 .sp .sp-panel--bad {
  padding: clamp(24px, 2.6vw, 36px) 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sh-body);
}
html.sh26 .sp .sp-panel--good {
  padding: clamp(24px, 2.6vw, 36px);
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
}
html.sh26 .sp .sp-sec--tint .sp-panel--good { background: var(--sh-ground); }
html.sh26 .sp .sp-panel::before,
html.sh26 .sp .sp-panel::after { content: none; display: none; }
html.sh26 .sp .sp-panel__h,
html.sh26 .sp .sp-panel--good .sp-panel__h {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.12;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .sp .sp-panel__h::before { content: none; display: none; }
html.sh26 .sp .sp-panel ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
html.sh26 .sp .sp-panel li,
html.sh26 .sp .sp-panel--good li {
  position: relative;
  display: block;
  padding: 0 0 0 22px;
  border: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--sh-body);
}
html.sh26 .sp .sp-panel li::before,
html.sh26 .sp .sp-panel--good li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: calc(.5lh - 3.5px);
  width: 7px;
  height: 7px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sh-blue);
  -webkit-mask: none;
  mask: none;
}
html.sh26 .sp .sp-panel--bad li { color: var(--sh-muted); }
html.sh26 .sp .sp-panel--bad li::before { background: var(--sh-line-2); }
html.sh26 .sp .sp-panel strong { font-weight: 600; color: var(--sh-ink); }


/* ---------- CTA panel (was a dark box) ----------
   Weichie's "Website design is the base..." panel: a sand card, the line in
   Fraunces on the left, a blue line icon top right, the pills bottom right. */
html.sh26 .sp .sp-band,
html.sh26 .sp .sp-sec--tint + .sp-band { padding: var(--sp2-pad) var(--sh-gutter); background: var(--sh-ground); }
html.sh26 .sp .sp-band__box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: var(--sh-container);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(32px, 4.6vw, 72px);
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  box-shadow: none;
  overflow: visible;
}
html.sh26 .sp .sp-band__box::before { display: none; }
html.sh26 .sp .sp-band__box::after {
  content: "";
  position: absolute;
  top: clamp(28px, 3.6vw, 56px);
  right: clamp(28px, 3.6vw, 56px);
  width: clamp(40px, 4.4vw, 64px);
  height: clamp(40px, 4.4vw, 64px);
  background: var(--sh-blue);
  -webkit-mask: var(--sp2-i-message) center / contain no-repeat;
  mask: var(--sp2-i-message) center / contain no-repeat;
}
html.sh26 .sp .sp-band__box > :first-child { padding-right: clamp(56px, 6vw, 96px); }
html.sh26 .sp .sp-band__t {
  max-width: 22ch;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.06;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  text-wrap: balance;
}
html.sh26 .sp .sp-band__p { margin-top: 16px; max-width: 58ch; font-size: 17px; font-weight: 500; line-height: 1.55; letter-spacing: -0.015em; color: var(--sh-muted); }
html.sh26 .sp .sp-band__ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; width: auto; }
@media (min-width: 900px) {
  html.sh26 .sp .sp-band__box {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 40px 64px;
    min-height: 300px;
  }
  html.sh26 .sp .sp-band__box > :first-child { align-self: center; }
  html.sh26 .sp .sp-band__ctas { justify-content: flex-end; }
}


/* ---------- Process (was a dark band) ----------
   Side-head rows: a blue Fraunces numeral, the step as a Fraunces H3, what
   happens, and the timing as a sand chip. */
html.sh26 .sp .sp-process {
  padding: var(--sp2-pad) var(--sh-gutter);
  background: var(--sh-ground);
  border: 0;
  overflow: visible;
  color: var(--sh-body);
}
html.sh26 .sp .sp-process::before,
html.sh26 .sp .sp-process::after { display: none; }
html.sh26 .sp .sp-process .sp-h2 { color: var(--sh-ink); }
html.sh26 .sp .sp-process .sp-lead { color: var(--sh-muted); }
html.sh26 .sp .sp-process strong { color: var(--sh-ink); }
html.sh26 .sp .sp-steps {
  --sp26-num-col: clamp(52px, 5vw, 76px);
  --sp26-num-gap: 18px;
  display: block;
  border-top: 1px solid var(--sh-rule);
}
html.sh26 .sp .sp-step,
html.sh26 .sp .sp-step:hover {
  display: grid;
  grid-template-columns: var(--sp26-num-col) minmax(0, 1fr);
  column-gap: var(--sp26-num-gap);
  padding: clamp(28px, 3vw, 44px) 0;
  border: 0;
  border-bottom: 1px solid var(--sh-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html.sh26 .sp .sp-step__top { display: block; grid-column: 1; grid-row: 1 / span 3; }
html.sh26 .sp .sp-step__top::before {
  content: counter(sp, decimal-leading-zero);
  font-family: var(--sh-display);
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-blue);
  font-variant-numeric: normal;
}
html.sh26 .sp .sp-step__top::after { content: none; display: none; }
html.sh26 .sp .sp-step__t {
  grid-column: 2;
  margin: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: var(--sh-h3);
  line-height: 1.1;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .sp .sp-step__p { grid-column: 2; max-width: 62ch; margin: 12px 0 0; font-size: var(--sh-text); line-height: var(--sh-text-lh); color: var(--sh-body); }
html.sh26 .sp .sp-step__d {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 16px 0 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-process__foot {
  margin: 22px 0 0;
  font-family: var(--sh-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-muted);
}
/* Pages whose step titles already carry their number ("1. Audit") get no
   second counter. These 29 page classes (54 pages; .sp--ca-local covers
   the 27 /ca/ pages) were listed from the generated HTML on 2026-10-31.
   Fix at source: drop the "N. " prefix from those titles in the content
   JSON, or have the generators add a class, and this list can go. */
html.sh26 .sp.sp--ca-local .sp-steps,
html.sh26 .sp.sp--locations-ai-seo-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-ai-visibility-audit .sp-steps,
html.sh26 .sp.sp--locations-international-seo-agency .sp-steps,
html.sh26 .sp.sp--locations-web-design-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-aeo-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-ai-automation-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-ai-seo-agency-london .sp-steps,
html.sh26 .sp.sp--locations-uk-b2b-seo-agency .sp-steps,
html.sh26 .sp.sp--locations-uk-chatgpt-ads-agency .sp-steps,
html.sh26 .sp.sp--locations-uk-data-science-consultancy-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-ecommerce-seo-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-generative-ai-development .sp-steps,
html.sh26 .sp.sp--locations-uk-generative-engine-optimisation-agency .sp-steps,
html.sh26 .sp.sp--locations-uk-google-ads-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-google-shopping-agency .sp-steps,
html.sh26 .sp.sp--locations-uk-mobile-app-development-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-seo-agency-birmingham .sp-steps,
html.sh26 .sp.sp--locations-uk-seo-agency-manchester .sp-steps,
html.sh26 .sp.sp--locations-uk-seo-audit-services .sp-steps,
html.sh26 .sp.sp--locations-uk-seo-consultant .sp-steps,
html.sh26 .sp.sp--locations-uk-seo-content-agency .sp-steps,
html.sh26 .sp.sp--locations-uk-seo-services .sp-steps,
html.sh26 .sp.sp--locations-uk-shopify-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-shopify-seo-agency .sp-steps,
html.sh26 .sp.sp--locations-uk-technical-seo-agency .sp-steps,
html.sh26 .sp.sp--locations-uk-white-label-seo .sp-steps,
html.sh26 .sp.sp--locations-uk-wordpress-agency-uk .sp-steps,
html.sh26 .sp.sp--locations-uk-wordpress-seo-services .sp-steps {
  --sp26-num-col: 0px;
  --sp26-num-gap: 0px;
}
html.sh26 .sp.sp--ca-local .sp-step__top,
html.sh26 .sp.sp--locations-ai-seo-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-ai-visibility-audit .sp-step__top,
html.sh26 .sp.sp--locations-international-seo-agency .sp-step__top,
html.sh26 .sp.sp--locations-web-design-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-aeo-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-ai-automation-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-ai-seo-agency-london .sp-step__top,
html.sh26 .sp.sp--locations-uk-b2b-seo-agency .sp-step__top,
html.sh26 .sp.sp--locations-uk-chatgpt-ads-agency .sp-step__top,
html.sh26 .sp.sp--locations-uk-data-science-consultancy-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-ecommerce-seo-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-generative-ai-development .sp-step__top,
html.sh26 .sp.sp--locations-uk-generative-engine-optimisation-agency .sp-step__top,
html.sh26 .sp.sp--locations-uk-google-ads-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-google-shopping-agency .sp-step__top,
html.sh26 .sp.sp--locations-uk-mobile-app-development-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-seo-agency-birmingham .sp-step__top,
html.sh26 .sp.sp--locations-uk-seo-agency-manchester .sp-step__top,
html.sh26 .sp.sp--locations-uk-seo-audit-services .sp-step__top,
html.sh26 .sp.sp--locations-uk-seo-consultant .sp-step__top,
html.sh26 .sp.sp--locations-uk-seo-content-agency .sp-step__top,
html.sh26 .sp.sp--locations-uk-seo-services .sp-step__top,
html.sh26 .sp.sp--locations-uk-shopify-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-shopify-seo-agency .sp-step__top,
html.sh26 .sp.sp--locations-uk-technical-seo-agency .sp-step__top,
html.sh26 .sp.sp--locations-uk-white-label-seo .sp-step__top,
html.sh26 .sp.sp--locations-uk-wordpress-agency-uk .sp-step__top,
html.sh26 .sp.sp--locations-uk-wordpress-seo-services .sp-step__top { display: none; }


/* ---------- Comparison table ----------
   On the ground at the full width: a sand header row, hairline rows,
   our column in ink, no highlighted fill, no tabular-nums. */
html.sh26 .sp .sp-table-wrap {
  border: 0;
  border-radius: var(--sh-r-card);
  background: none;
  box-shadow: none;
}
html.sh26 .sp .sp-table { min-width: 640px; font-size: 16px; line-height: 1.5; font-variant-numeric: normal; }
html.sh26 .sp .sp-table thead th,
html.sh26 .sp .sp-table thead th.is-us {
  padding: 18px 20px;
  background: var(--sh-sand);
  font-family: var(--sh-font);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-muted);
  border-bottom: 0;
}
html.sh26 .sp .sp-table thead th:first-child { border-radius: var(--sh-r-field) 0 0 var(--sh-r-field); }
html.sh26 .sp .sp-table thead th:last-child { border-radius: 0 var(--sh-r-field) var(--sh-r-field) 0; }
html.sh26 .sp .sp-table thead th.is-us { color: var(--sh-blue); }
html.sh26 .sp .sp-table td,
html.sh26 .sp .sp-table td.is-us {
  padding: 18px 20px;
  background: none;
  font-weight: 400;
  color: var(--sh-body) !important;                      /* [td] */
  border-bottom: 1px solid var(--sh-line) !important;    /* [td] */
}
html.sh26 .sp .sp-table td.is-us { font-weight: 500; color: var(--sh-ink) !important; } /* [td] */
html.sh26 .sp .sp-table tbody th {
  padding: 18px 20px;
  font-family: var(--sh-font);
  font-weight: 600;
  color: var(--sh-ink) !important;                       /* [td] */
  border-bottom: 1px solid var(--sh-line) !important;    /* [td] */
}
/* Close the table with a hairline (service-page.css drops the last one). */
html.sh26 .sp .sp-table tbody tr:last-child td,
html.sh26 .sp .sp-table tbody tr:last-child th { border-bottom: 1px solid var(--sh-line) !important; } /* [td] */
html.sh26 .sp .sp-table tbody tr:hover > * { background: var(--sh-blue-tile); }


/* ---------- Pricing ----------
   Sand cards in a row: the tag as a small chip (same words, no extra
   emphasis on any tier), the name, the price in Fraunces, the timing, what
   is included, and the blue pill pinned to the bottom. */
html.sh26 .sp .sp-prices {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sh-gap);
  border: 0;
}
html.sh26 .sp .sp-price,
html.sh26 .sp .sp-price:hover,
html.sh26 .sp .sp-price--hot,
html.sh26 .sp .sp-price--hot:hover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(28px, 3vw, 44px);
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  box-shadow: none;
  color: var(--sh-body);
  transform: none;
  transition: none;
}
html.sh26 .sp .sp-price::before,
html.sh26 .sp .sp-price::after { content: none; display: none; }
html.sh26 .sp .sp-price__tag,
html.sh26 .sp .sp-price--hot .sp-price__tag {
  position: static;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 22px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-paper);
  box-shadow: none;
  font-family: var(--sh-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-ink);
  transform: none;
}
html.sh26 .sp .sp-price__name,
html.sh26 .sp .sp-price--hot .sp-price__name {
  margin: 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-price__fig,
html.sh26 .sp .sp-price--hot .sp-price__fig {
  margin: 14px 0 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1.04;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  font-variant-numeric: normal;
  overflow-wrap: anywhere;
  -webkit-text-fill-color: currentColor;
  background: none;
}
html.sh26 .sp .sp-price__time,
html.sh26 .sp .sp-price--hot .sp-price__time {
  margin: 10px 0 0;
  font-family: var(--sh-font);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-price__p,
html.sh26 .sp .sp-price--hot .sp-price__p {
  max-width: 60ch;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--sh-sand-2);
  font-size: 16px;
  line-height: 1.6;
  color: var(--sh-body);
}
html.sh26 .sp .sp-price ul { margin: 16px 0 0; }
html.sh26 .sp .sp-price__cta,
html.sh26 .sp .sp-price--hot .sp-price__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  margin: auto 0 0;
  padding: 8px 8px 8px 22px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-blue);
  box-shadow: none;
  color: var(--sh-paper);
  font: 500 16px/1.2 var(--sh-font);
  font-family: "sp2 hide arrow", var(--sh-font);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color var(--sh-fast) ease;
}
/* the pill sits at the bottom (margin-top: auto); the block before it keeps
   28px of air when the card is the tallest in its row */
html.sh26 .sp .sp-price > :nth-last-child(2):not(.sp-price__cta) { margin-bottom: 28px; }
html.sh26 .sp .sp-price__cta::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sh-paper);
}
html.sh26 .sp .sp-price__cta::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 17px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  z-index: 1;
  transition: transform .25s var(--sh-ease);
}
html.sh26 .sp .sp-price__cta:hover { background: var(--sh-blue-ink); color: var(--sh-paper); text-decoration: none; }
html.sh26 .sp .sp-price__cta:hover::before { transform: translateX(3px); }
html.sh26 .sp .sp-price__cta:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .sp .sp-note { margin: 28px 0 0; max-width: 72ch; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--sh-muted); }
@media (min-width: 768px) {
  html.sh26 .sp .sp-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  html.sh26 .sp .sp-prices:has(> .sp-price:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html.sh26 .sp .sp-prices:has(> .sp-price:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ---------- Reviews: a sand band ----------
   Intro and ratings (with the real platform wordmarks) on the left; one
   large verbatim quote in Fraunces italic with the name and role under it,
   then two quieter ones. No ticks, no "Verified review" label, no quote
   glyph art, no stacking or tilt. */
html.sh26 .sp .sp-stories {
  padding: var(--sp2-band) var(--sh-gutter);
  background: var(--sh-sand);
  border: 0;
  overflow: visible;
}
html.sh26 .sp .sp-stories::before,
html.sh26 .sp .sp-stories::after { display: none; }
html.sh26 .sp .sp-stories__wrap {
  max-width: var(--sh-container);
  grid-template-columns: minmax(0, 1fr);
  row-gap: 56px;
  align-items: start;
}
html.sh26 .sp .sp-stories__title { font-size: var(--sp2-h2-side); line-height: 1.04; }
html.sh26 .sp .sp-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 16px;
  margin-top: 36px;
  padding-top: 0;
  border-top: 0;
}
html.sh26 .sp .sp-stat,
html.sh26 .sp .sp-stat:first-child {
  padding: 16px 0 0;
  border-left: 0;
  border-top: 1px solid var(--sh-rule);
}
html.sh26 .sp .sp-stat__n {
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(26px, 2.3vw, 34px);
  line-height: 1.05;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  font-variant-numeric: normal;
}
html.sh26 .sp .sp-stat__l { margin-top: 8px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--sh-muted); }
html.sh26 .sp .sp-ratings {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
  padding-top: 0;
  border-top: 0;
}
html.sh26 .sp .sp-rating,
html.sh26 .sp .sp-rating:first-child {
  gap: 4px;
  padding: 16px;
  border: 0;
  border-radius: var(--sh-r-field);
  background: var(--sh-ground);
  color: var(--sh-ink);
  text-decoration: none;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .sp .sp-rating:hover { background: var(--sh-paper); }
html.sh26 .sp .sp-rating:focus-visible { border-radius: var(--sh-r-field); }
html.sh26 .sp .sp-rating::before {
  content: "";
  display: block;
  height: 18px;
  margin-bottom: 8px;
  background: no-repeat left center / contain;
}
html.sh26 .sp .sp-rating[href*="fiverr"]::before { background-image: url("/assets/images/fiverr-logo.svg"); }
html.sh26 .sp .sp-rating[href*="clutch"]::before { background-image: url("/assets/images/clutch-logo.svg"); }
html.sh26 .sp .sp-rating[href*="upwork"]::before { background-image: url("/assets/images/upwork-logo.svg"); }
html.sh26 .sp .sp-rating b { font: 600 17px/1.3 var(--sh-font); color: var(--sh-ink); }
html.sh26 .sp .sp-rating b span { margin-left: 6px; font-size: 11px; letter-spacing: 1px; color: var(--sh-star); }
html.sh26 .sp .sp-rating small {
  font-family: var(--sh-font);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-muted);
}

html.sh26 .sp .sp-reviews {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: none;
  gap: 48px 40px;
}
html.sh26 .sp .sp-review,
html.sh26 .sp .sp-review--dark,
html.sh26 .sp .sp-review--w1,
html.sh26 .sp .sp-review--w2 {
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sh-body);
  transform: none;
  z-index: auto;
}
html.sh26 .sp .sp-review--dark {
  grid-column: 1 / -1;
  padding: 0 0 48px;
  border-bottom: 1px solid var(--sh-rule);
}
html.sh26 .sp .sp-review--dark::before {
  content: "";
  display: block;
  order: 0;
  width: 36px;
  height: 36px;
  margin-bottom: 22px;
  background: var(--sh-blue);
  -webkit-mask: var(--sp2-i-quote) center / contain no-repeat;
  mask: var(--sp2-i-quote) center / contain no-repeat;
}
html.sh26 .sp .sp-review__head { order: 3; margin-top: 6px; }
html.sh26 .sp .sp-review__pill,
html.sh26 .sp .sp-review--dark .sp-review__pill {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-review__pill i { display: none; }
html.sh26 .sp .sp-review__ver { display: none; } /* owner rule; build.py should stop emitting it */
html.sh26 .sp .sp-review__q { display: none; }
html.sh26 .sp .sp-review blockquote,
html.sh26 .sp .sp-review--dark blockquote {
  order: 1;
  margin: 0;
  font-family: var(--sh-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  quotes: "\201C" "\201D";
}
html.sh26 .sp .sp-review blockquote::before { content: open-quote; }
html.sh26 .sp .sp-review blockquote::after { content: close-quote; }
html.sh26 .sp .sp-review--dark blockquote { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.24; letter-spacing: -0.015em; }
html.sh26 .sp .sp-review figcaption,
html.sh26 .sp .sp-review--dark figcaption {
  order: 2;
  margin-top: 20px;
  padding-top: 0;
  border-top: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-review figcaption strong,
html.sh26 .sp .sp-review--dark figcaption strong { display: block; font-size: 16px; font-weight: 600; color: var(--sh-ink); }
@media (min-width: 1024px) {
  html.sh26 .sp .sp-stories__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 .sp .sp-stories__wrap > :first-child { grid-column: 1 / span 5; padding-right: clamp(0px, 3vw, 48px); position: sticky; top: var(--sp2-sticky); }
  html.sh26 .sp .sp-stories__wrap > .sp-reviews { grid-column: 6 / span 7; }
}
@media (max-width: 640px) {
  html.sh26 .sp .sp-reviews { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}


/* ---------- Tech stack groups ----------
   Groups under a rule with a Fustat head; the tools as sand chips. */
html.sh26 .sp .sp-stack {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 40px var(--sh-gap);
  border: 0;
}
html.sh26 .sp .sp-stack__g {
  padding: 22px 0 0;
  border: 0;
  border-top: 1px solid var(--sh-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html.sh26 .sp .sp-stack__h {
  display: block;
  margin: 0 0 16px;
  font-family: var(--sh-font);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-stack__h::after,
html.sh26 .sp .sp-stack__h::before { content: none; display: none; }
html.sh26 .sp .sp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
html.sh26 .sp .sp-chips li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font-family: var(--sh-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-chips li::before { content: none; display: none; }
html.sh26 .sp .sp-sec--tint .sp-chips li { background: var(--sh-ground); }


/* ---------- Industries and regions ----------
   Row links in two columns (weichie's "Other services"): a rule, the soft
   icon circle, the name, one line, and a blue arrow where it links. */
html.sh26 .sp .sp-minis {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: 0 clamp(24px, 4vw, 64px);
  border: 0;
}
html.sh26 .sp .sp-mini,
html.sh26 .sp a.sp-mini:hover {
  position: relative;
  gap: 18px;
  align-items: center;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--sh-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sh-ink);
  text-decoration: none;
  transform: none;
  transition: none;
}
html.sh26 .sp .sp-mini__ic,
html.sh26 .sp a.sp-mini:hover .sp-mini__ic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--sh-blue-tile);
  color: var(--sh-blue);
  font-size: 18px;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease;
}
html.sh26 .sp .sp-sec--tint .sp-mini__ic { background: var(--sh-paper); }
html.sh26 .sp a.sp-mini:hover .sp-mini__ic { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .sp .sp-mini__ic .si { width: 22px; height: 22px; }
html.sh26 .sp .sp-mini__ic .si-txt { font: 600 13px/1 var(--sh-font); letter-spacing: .02em; }
html.sh26 .sp .sp-mini > span:last-child { flex: 1 1 auto; min-width: 0; }
html.sh26 .sp .sp-mini__t {
  display: block;
  margin: 0 0 4px;
  font-family: var(--sh-font);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sh-ink);
  text-decoration: none;
}
html.sh26 .sp a.sp-mini .sp-mini__t::after { content: none; display: none; }
html.sh26 .sp a.sp-mini::after {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 .sp a.sp-mini:hover::after { transform: translateX(4px); }
html.sh26 .sp a.sp-mini:hover .sp-mini__t { color: var(--sh-blue); }
html.sh26 .sp a.sp-mini:focus-visible { border-radius: 4px; }
html.sh26 .sp .sp-mini__p { display: block; font-size: 15.5px; line-height: 1.5; color: var(--sh-muted); }
html.sh26 .sp .sp-regions { margin-top: clamp(56px, 6vw, 88px); }
html.sh26 .sp .sp-regions__h {
  display: block;
  margin: 0 0 18px;
  font-family: var(--sh-display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: var(--sh-track-display);
  text-transform: none;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-regions__h::after { content: none; display: none; }


/* ---------- About: dated timeline and the founder ---------- */
html.sh26 .sp .sp-tl { border: 0; border-top: 1px solid var(--sh-rule); }
html.sh26 .sp .sp-tl::before { display: none; }
html.sh26 .sp .sp-tl__i,
html.sh26 .sp .sp-tl__i:last-child {
  display: grid;
  grid-template-columns: clamp(72px, 7vw, 104px) minmax(0, 1fr);
  column-gap: 20px;
  padding: clamp(24px, 2.6vw, 36px) 0;
  border: 0;
  border-bottom: 1px solid var(--sh-rule);
}
html.sh26 .sp .sp-tl__i::before { content: none; display: none; }
html.sh26 .sp .sp-tl__y {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  font-family: var(--sh-display);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-blue);
}
html.sh26 .sp .sp-tl__t {
  grid-column: 2;
  margin: 0;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: var(--sh-h3);
  line-height: 1.1;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .sp .sp-tl__p { grid-column: 2; max-width: 64ch; margin: 10px 0 0; font-size: var(--sh-text); line-height: var(--sh-text-lh); color: var(--sh-body); }

/* The founder gets the full width: the real photo, round, at no more than its
   own size (a 480px square portrait in a round frame on black, so the black
   corners fall outside the circle), on a sand disc. */
html.sh26 .sp .sp-fndr {
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: left;
}
html.sh26 .sp .sp-fndr__media {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--sh-sand);
}
html.sh26 .sp .sp-fndr__mono { font-family: var(--sh-display); color: var(--sh-blue); opacity: .35; }
html.sh26 .sp .sp-fndr__photo { object-fit: cover; object-position: 50% 50%; }
html.sh26 .sp .sp-fndr__name {
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26 .sp .sp-fndr__role {
  margin: 10px 0 26px;
  font-family: var(--sh-font);
  font-size: var(--sh-label);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-fndr__p { margin: 0 0 16px; font-size: var(--sh-text); font-weight: 400; line-height: var(--sh-text-lh); color: var(--sh-body); }
html.sh26 .sp .sp-fndr__p:first-of-type { font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; line-height: 1.5; letter-spacing: -0.02em; color: var(--sh-ink); }
html.sh26 .sp .sp-fndr__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
html.sh26 .sp .sp-fndr__tags li {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin: 0;
  padding: 0 14px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-fndr__tags li::before { content: none; display: none; }
html.sh26 .sp .sp-fndr__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (min-width: 900px) {
  html.sh26 .sp .sp-fndr { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 .sp .sp-fndr__media { grid-column: 1 / span 5; justify-self: start; }
  html.sh26 .sp .sp-fndr__body { grid-column: 7 / span 6; align-self: center; }
}


/* ---------- FAQ ----------
   Side-head (title, lead and the ask card, sticky on desktop) beside the
   hairline accordion: a blue corner arrow, the question in Fustat 500, a
   plus that turns into a cross, solid rules, the panel height animated where
   ::details-content is supported. */
html.sh26 .sp .sp-fq {
  padding: var(--sp2-pad) var(--sh-gutter);
  background: var(--sh-ground);
  border: 0;
}
html.sh26 .sp .sp-fq__wrap { max-width: var(--sh-container); grid-template-columns: minmax(0, 1fr); gap: 44px; }
html.sh26 .sp .sp-fq__panel {
  position: static;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sh-body);
  overflow: visible;
}
html.sh26 .sp .sp-fq__panel::before { display: none; }
html.sh26 .sp .sp-fq__title { font-size: var(--sp2-h2-side); line-height: 1.04; }
html.sh26 .sp .sp-fq__title em { display: inline; }
html.sh26 .sp .sp-fq__ask {
  margin-top: 36px;
  padding: clamp(24px, 2.6vw, 32px);
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
}
html.sh26 .sp .sp-fq__askt { font: 500 clamp(22px, 1.9vw, 26px)/1.15 var(--sh-display); letter-spacing: var(--sh-track-display); color: var(--sh-ink); }
html.sh26 .sp .sp-fq__askp { margin: 8px 0 20px; font-size: 15.5px; line-height: 1.55; color: var(--sh-muted); }
html.sh26 .sp .sp-fq__list { display: block; gap: 0; border-top: 1px solid var(--sh-rule); interpolate-size: allow-keywords; }
html.sh26 .sp .sp-fq__item,
html.sh26 .sp .sp-fq__item:hover,
html.sh26 .sp .sp-fq__item[open] {
  border: 0;
  border-bottom: 1px solid var(--sh-rule);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
  interpolate-size: allow-keywords;
}
html.sh26 .sp .sp-fq__item::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size .32s var(--sh-ease), content-visibility .32s allow-discrete;
}
html.sh26 .sp .sp-fq__item[open]::details-content { block-size: auto; }
html.sh26 .sp .sp-fq__q {
  grid-template-columns: 18px minmax(0, 1fr) 22px;
  align-items: start;
  column-gap: 16px;
  padding: 26px 0;
}
html.sh26 .sp .sp-fq__q::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 18px;
  height: 18px;
  margin-top: .3em;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 .sp .sp-fq__q:focus-visible { outline-offset: 2px; border-radius: 2px; }
html.sh26 .sp .sp-fq__num { display: none; }
html.sh26 .sp .sp-fq__qtext {
  grid-column: 2;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-fq__q:hover .sp-fq__qtext { color: var(--sh-ink); }
html.sh26 .sp .sp-fq__icon,
html.sh26 .sp .sp-fq__item:hover .sp-fq__icon,
html.sh26 .sp .sp-fq__item[open] .sp-fq__icon {
  grid-column: 3;
  width: 22px;
  height: 22px;
  margin-top: .15em;
  border-radius: 0;
  background: var(--sh-ink);
  -webkit-mask: var(--sh-i-plus) center / contain no-repeat;
  mask: var(--sh-i-plus) center / contain no-repeat;
  transform: none;
  transition: transform .3s var(--sh-ease), background-color var(--sh-fast) ease;
}
html.sh26 .sp .sp-fq__q:hover .sp-fq__icon { background: var(--sh-blue); }
html.sh26 .sp .sp-fq__item[open] .sp-fq__icon { transform: rotate(45deg); }
html.sh26 .sp .sp-fq__icon::before,
html.sh26 .sp .sp-fq__icon::after { content: none; display: none; }
html.sh26 .sp .sp-fq__a { padding: 0 40px 30px 34px; }
html.sh26 .sp .sp-fq__a p { max-width: var(--sh-measure); font-size: var(--sh-text); line-height: var(--sh-text-lh); color: var(--sh-body); }
html.sh26 .sp .sp-fq__a p + p { margin-top: 12px; }
@media (min-width: 1024px) {
  html.sh26 .sp .sp-fq__wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 .sp .sp-fq__panel { grid-column: 1 / span 5; position: sticky; top: var(--sp2-sticky); padding-right: clamp(0px, 3vw, 48px); }
  html.sh26 .sp .sp-fq__list { grid-column: 6 / span 7; }
}
@media (max-width: 640px) {
  html.sh26 .sp .sp-fq__q { padding: 22px 0; column-gap: 12px; }
  html.sh26 .sp .sp-fq__qtext { font-size: 18px; }
  html.sh26 .sp .sp-fq__a { padding: 0 0 24px 30px; }
}


/* ---------- Contact: a sand panel (was the dark band) ----------
   Same form and ids. The whole block is one sand panel on the ground: the
   H2, the three next steps and the direct pills on the left, the form on
   the right on the same sand (white fields, the blue pill submit). */
html.sh26 .sp .sp-contact {
  padding: var(--sp2-pad) var(--sh-gutter);
  background: var(--sh-ground);
  border: 0;
  color: var(--sh-body);
}
html.sh26 .sp .sp-contact::before,
html.sh26 .sp .sp-contact::after { display: none; }
html.sh26 .sp .sp-contact__grid {
  max-width: var(--sh-container);
  gap: 48px;
  align-items: start;
  padding: clamp(28px, 5vw, 80px);
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
}
html.sh26 .sp .sp-contact .sp-h2 { max-width: 14ch; font-size: var(--sp2-h2-side); line-height: 1.04; color: var(--sh-ink); }
html.sh26 .sp .sp-contact .sp-lead { margin-top: 20px; max-width: 46ch; color: var(--sh-muted); }
html.sh26 .sp .sp-contact strong { color: var(--sh-ink); }
html.sh26 .sp .sp-next { gap: 0; margin: 36px 0; border-top: 1px solid var(--sh-rule); }
html.sh26 .sp .sp-next li,
html.sh26 .sp .sp-next li:last-child {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--sh-rule);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-next li::before {
  content: "0" counter(nx);
  display: block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  font: 500 24px/1.05 var(--sh-display);
  letter-spacing: var(--sh-track-display);
  color: var(--sh-blue);
}
html.sh26 .sp .sp-next strong { margin-bottom: 4px; font-size: 17px; font-weight: 600; color: var(--sh-ink); }
html.sh26 .sp .sp-direct { gap: 10px; }
html.sh26 .sp .sp-direct .sp-btn { padding: 8px 8px 8px 22px; font-size: 16px; }
/* The closing form sits straight on the panel's sand. */
html.sh26 .sp .sp-contact .sp-form,
html.sh26 .sp .sp-contact .sp-done {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--sh-ink);
  color-scheme: light;
}
html.sh26 .sp .sp-contact .sp-done__box { background: var(--sh-ground); }
@media (min-width: 1024px) {
  html.sh26 .sp .sp-contact__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 .sp .sp-contact__grid > :first-child { grid-column: 1 / span 5; }
  html.sh26 .sp .sp-contact__grid > :last-child { grid-column: 7 / span 6; }
}


/* ---------- Related links ----------
   Weichie's "Other services" rows: a Fraunces head, then solid-rule rows
   with the name in Fustat 500, a muted line, and a blue "Explore" arrow at
   the right. */
html.sh26 .sp .sp-res { gap: 56px clamp(32px, 5vw, 80px); }
html.sh26 .sp .sp-res__h {
  display: block;
  margin: 0 0 28px;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(32px, 3.4vw, 52px);
  line-height: 1.04;
  letter-spacing: var(--sh-track-display);
  text-transform: none;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-res__h::after { content: none; display: none; }
html.sh26 .sp .sp-links { display: block; gap: 0; border-top: 1px solid var(--sh-rule); }
html.sh26 .sp .sp-links li { border: 0; border-bottom: 1px solid var(--sh-rule); }
html.sh26 .sp .sp-links a,
html.sh26 .sp .sp-links a:hover {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 76px;
  padding: 16px 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--sh-ink);
  text-decoration: none;
  transform: none;
  transition: none;
}
html.sh26 .sp .sp-links a::after {
  content: "";
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 .sp .sp-links a:hover::after { transform: translateX(4px); }
html.sh26 .sp .sp-links a:focus-visible { border-radius: 4px; }
html.sh26 .sp .sp-links em { display: none; }
html.sh26 .sp .sp-links strong {
  display: block;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--sh-ink);
  text-decoration: none;
}
html.sh26 .sp .sp-links a:hover strong { color: var(--sh-blue); }
html.sh26 .sp .sp-links small { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; line-height: 1.45; color: var(--sh-muted); }


/* ---------- Phone action bar ----------
   Sits outside <main>, so it is scoped on the html hook only. The ground
   with blur, the blue pill and two sand circles; 48px targets; display
   stays service-page.css's (phones only). */
html.sh26 .sp-dock {
  gap: 8px;
  padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--sh-ground) 86%, transparent);
  border-top: 1px solid var(--sh-line);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  font-family: var(--sh-font);
}
html.sh26 .sp-dock a { min-height: 50px; border-radius: var(--sh-r-pill); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
html.sh26 .sp-dock .sp-dock__main {
  position: relative;
  justify-content: space-between;
  padding: 7px 7px 7px 22px;
  background: var(--sh-blue);
  color: var(--sh-paper);
}
html.sh26 .sp-dock .sp-dock__main::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sh-paper);
}
html.sh26 .sp-dock .sp-dock__main::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-right) center / contain no-repeat;
  z-index: 1;
}
html.sh26 .sp-dock .sp-dock__wa,
html.sh26 .sp-dock .sp-dock__call {
  width: 50px;
  border: 0;
  background: var(--sh-sand);
  color: var(--sh-ink);
}
html.sh26 .sp-dock .sp-dock__wa svg,
html.sh26 .sp-dock .sp-dock__call svg { color: var(--sh-blue); }


/* ---------- Page-editor sections ----------
   "Add section" content uses the same sp-* markup, sometimes with inline
   layout styles. The owner's uploaded image keeps its place; only the
   radius follows the image shape. */
html.sh26 .sp .sp-sec figure img[style*="border-radius"] { border-radius: var(--sh-r-img) !important; } /* [inline] */


/* ---------- Narrow screens ---------- */
@media (max-width: 1023px) {
  html.sh26 .sp .sp-head:has(> .sp-lead) > .sp-lead { max-width: 60ch; }
}
@media (max-width: 900px) {
  html.sh26 .sp .sp-ba { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  html.sh26 .sp .sp-glance__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--sh-gap); }
  html.sh26 .sp .sp-stats { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html.sh26 .sp .sp-stat,
  html.sh26 .sp .sp-stat:first-child { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; align-items: baseline; padding: 14px 0; }
  html.sh26 .sp .sp-stat__l { margin: 0; }
  html.sh26 .sp .sp-ratings { gap: 8px; }
  html.sh26 .sp .sp-rating,
  html.sh26 .sp .sp-rating:first-child { padding: 14px 12px; }
  html.sh26 .sp .sp-rating::before { height: 16px; }
  html.sh26 .sp .sp-rating b span { display: block; margin: 2px 0 0; }
}
@media (max-width: 640px) {
  html.sh26 .sp {
    --sp2-pad: 56px;
    --sp2-band: 72px;
    --sp2-head-gap: 36px;
  }
  html.sh26 .sp .sp-hero { padding-top: 28px; padding-bottom: 56px; }
  html.sh26 .sp .sp-hero--formfirst { padding-top: 24px; padding-bottom: 48px; }
  html.sh26 .sp .sp-crumbs { margin-bottom: 28px; font-size: 13.5px; }
  html.sh26 .sp .sp-hero__title,
  html.sh26 .sp .sp-hero--formfirst .sp-hero__title { margin-top: 16px; font-size: clamp(38px, 11vw, 48px); line-height: 1.02; }
  html.sh26 .sp .sp-hero--formfirst .sp-hero__side { margin-top: 28px; }
  html.sh26 .sp .sp-hero--formfirst .sp-hero__lead { margin-top: 36px; }
  html.sh26 .sp .sp-hero__side { margin-top: 32px; }
  html.sh26 .sp .sp-hero__lead { margin-top: 24px; font-size: 19px; }
  html.sh26 .sp .sp-hero__extra > .sp-ticks { margin-top: 24px; }
  html.sh26 .sp .sp-ticks li { font-size: 14.5px; }
  html.sh26 .sp .sp-hero__ctas { gap: 8px; }
  html.sh26 .sp .sp-hero__ctas .sp-btn { width: 100%; }
  html.sh26 .sp .sp-form { padding: 22px 18px; }
  html.sh26 .sp .sp-contact .sp-form { padding: 0; }
  html.sh26 .sp .sp-contact__grid { padding: 28px 18px; }
  html.sh26 .sp .sp-h2,
  html.sh26 .sp .sp-stories__title,
  html.sh26 .sp .sp-fq__title,
  html.sh26 .sp .sp-contact .sp-h2 { font-size: clamp(32px, 9.4vw, 40px); }
  html.sh26 .sp .sp-glance__n { font-size: 36px; }
  html.sh26 .sp .sp-card:has(.sp-card__ic) { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 22px 0 24px; }
  html.sh26 .sp .sp-card__ic { width: 44px; height: 44px; }
  html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__t { min-height: 44px; }
  html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__p,
  html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__r,
  html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__tag { grid-column: 1 / span 2; margin-top: 12px; }
  html.sh26 .sp .sp-card:has(.sp-card__ic) > .sp-card__more { grid-column: 1 / span 2; grid-row: auto; margin-top: 14px; }
  html.sh26 .sp .sp-card__t { font-size: 20px; }
  html.sh26 .sp .sp-band__box { padding: 28px 22px; }
  html.sh26 .sp .sp-band__box::after { top: 26px; right: 22px; width: 36px; height: 36px; }
  html.sh26 .sp .sp-band__box > :first-child { padding-right: 48px; }
  html.sh26 .sp .sp-band__ctas .sp-btn { width: 100%; }
  html.sh26 .sp .sp-step,
  html.sh26 .sp .sp-step:hover { grid-template-columns: var(--sp26-num-col) minmax(0, 1fr); padding: 26px 0; }
  html.sh26 .sp .sp-steps { --sp26-num-col: 44px; --sp26-num-gap: 12px; }
  html.sh26 .sp .sp-step__top::before { font-size: 24px; }
  html.sh26 .sp .sp-review--dark blockquote { font-size: 24px; }
  html.sh26 .sp .sp-res__h { font-size: 32px; }
  html.sh26 .sp .sp-links strong { font-size: 17.5px; }
  html.sh26 .sp .sp-mini__t { font-size: 18px; }
  html.sh26 .sp .sp-fq__ask .sp-btn,
  html.sh26 .sp .sp-direct .sp-btn,
  html.sh26 .sp .sp-price__cta { width: 100%; }
}
@media (max-width: 560px) {
  html.sh26 .sp .sp-proof__stars { display: inline; }
  html.sh26 .sp .sp-tl__i,
  html.sh26 .sp .sp-tl__i:last-child { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; }
  html.sh26 .sp .sp-glance__row { gap: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html.sh26 .sp .sp-fq__item::details-content { transition: none; }
  html.sh26 .sp .sp-btn > svg,
  html.sh26 .sp .sp-btn .sp-btn__arrow::before,
  html.sh26 .sp .sp-form__submit svg { transition: none; }
}

/* ---- 30-legacy.css ---- */
/* =========================================================================
   30 legacy (v2): the hand-built interior pages that still sit on the legacy
   sheets (style-v30 + style-light), plus the two off-system landers.
   Owner: legacy agent. Built into assets/css/site-2026.css.
   Spec: rd/DESIGN-v2.md (weichie-inspired: Fraunces display, Fustat text,
   ground and sand bands, blue pills with an icon circle, ↳ accordions,
   blue dot lists, sidehead sections, no white bordered cards, no dark bands).

   Hooks. Every one is additive markup on <body>; nothing was renamed.
     sh26-lg       shared base: every page below except home-care and the
                   three c5 tool pages
     sh26-guide    ai-agents / ai-automation / enterprise-software /
                   machine-learning / saas guides
     sh26-tool     ai-automation-roi-calculator. c5's missed-call-check,
                   partners and website-teardown carry no hook (their markup
                   is c5's): section C styles every tool page through its
                   calc-* classes instead.
     sh26-404      404.html
     sh26-cshub    case-studies.html (main#cs.cs)
     cs-study      case-studies/*.html (existing hook, plus case-study.css)
     sh26-res / sh26-press / sh26-legal
     sh26-ls       uk/local-seo-services.html (main.ls, plus local-seo.css)
     sh26-hc       home-care-agencies.html (self-styled, own header/footer)
     sh26-re       real-estate-ai-websites.html (legacy /style.css)

   Why the !important: style-light.css owns these vocabularies with ~400
   !important rules, the pages carry inline style attributes, and style-light
   sections 30-31 rewrite inline colours with attribute-substring sweeps. A
   rule here wins by its html.sh26 + body-hook prefix (specificity) plus
   !important wherever the legacy rule or an inline style is in the way.
   Every gradient-text trick gets a named reset: background, background-clip,
   -webkit-background-clip and -webkit-text-fill-color, together.

   Surfaces. A section sets --lg-card / --lg-pill / --lg-chip for what sits
   on it: sand on the ground, white (--sh-paper) on a sand band, so cards and
   sand pills never vanish into their own band.
   ========================================================================= */
/* ---------- A. shared base: surfaces, pills, labels, hero leads, links, accordions ---------- */
/* Pill icons (Lucide 0.454, stroke 1.8). A background image cannot take
   currentColor, so each icon exists in the two colours the pills use: blue
   (= --sh-blue) on the white circle, white (= --sh-paper) on the blue circle.
   The black ones are masks (background: currentColor). */
html.sh26 {
  --lg-sec: clamp(88px, 10.5vw, 160px);          /* section padding: weichie's 140-180 at desktop */
  --lg-top: clamp(40px, 5.2vw, 84px);            /* hero top, under the portfolio band */
  --lg-card: var(--sh-sand);                     /* what sits on the ground */
  --lg-card-hover: var(--sh-sand-2);
  --lg-pill: var(--sh-sand);
  --lg-pill-hover: var(--sh-sand-2);
  --lg-ic-up-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --lg-ic-up-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
  --lg-ic-cal-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  --lg-ic-cal-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
  --lg-ic-msg-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
  --lg-ic-msg-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E");
  --lg-ic-down-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A6E9E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  --lg-ic-down-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
  /* masks */
  --lg-i-label: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 7 10 10'/%3E%3Cpath d='M17 7v10H7'/%3E%3C/svg%3E");
  --lg-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E");
  --lg-i-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M16 14h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M16 18h.01'/%3E%3C/svg%3E");
  --lg-i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3Cpath d='M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z'/%3E%3C/svg%3E");
}

/* A sand surface: whatever sits on it turns white (no borders, no shadows). */
html.sh26 body.sh26-guide main .section--alt,
html.sh26 body.cs-study .svc-section--alt,
html.sh26 body.cs-study .svc-faq,
html.sh26 body.sh26-res .resources-section:nth-of-type(odd),
html.sh26 body.sh26-re main .re-alt,
html.sh26 #cs .cs-sec--tint,
html.sh26 body .calc-section:nth-of-type(odd) {
  --lg-card: var(--sh-paper);
  --lg-card-hover: var(--sh-ground);
  --lg-pill: var(--sh-paper);
  --lg-pill-hover: var(--sh-ground);
}

/* Page ground and text */
html.sh26 body:is(.sh26-lg, .sh26-re) main { display: block; background: var(--sh-ground); color: var(--sh-body); font-family: var(--sh-font); }
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) strong,
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) b { color: var(--sh-ink); font-weight: 600; }

/* Every H1 on these pages: huge Fraunces 500, ink, an <em> or accent span in blue. */
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) h1,
html.sh26 body .calc-hero h1 {
  margin-top: 0; max-width: 15.5em; text-align: left !important;
  font-family: var(--sh-display) !important; font-style: normal !important; font-weight: 500 !important; font-size: var(--sh-h1) !important;
  line-height: 1 !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
  -webkit-text-fill-color: currentColor !important; text-transform: none !important; text-wrap: balance; opacity: 1 !important;
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
}
/* named reset: style-light 19 paints H1 spans with a clipped gradient */
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) h1 :is(span, em),
html.sh26 body .calc-hero h1 :is(span, em) {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important; font-style: normal !important;
}
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) h1 :is(em, .accent),
html.sh26 body .calc-hero h1 :is(em, span) { color: var(--sh-blue) !important; }

/* The uppercase hero annotation with a blue line arrow (weichie's small labels). */
html.sh26 body.sh26-guide .svc-hero .eyebrow,
html.sh26 body.cs-study .svc-hero__eyebrow,
html.sh26 body .calc-hero__eyebrow,
html.sh26 body.sh26-res .resources-hero .resources-section__label,
html.sh26 body.sh26-press .press-hero__label,
html.sh26 body.sh26-re .re-hero__eyebrow,
html.sh26 #cs .cs-hero .cs-kick,
html.sh26 body.sh26-404 .sh404__code,
html.sh26 body main.ls .ls-hero .ls-badge {
  display: inline-flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap;
  width: auto !important; max-width: none !important; margin: 0 0 clamp(26px, 3vw, 44px) !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important;
  color: var(--sh-muted) !important; -webkit-text-fill-color: var(--sh-muted) !important; opacity: 1 !important; animation: none !important;
}
html.sh26 body.sh26-guide .svc-hero .eyebrow::before,
html.sh26 body.cs-study .svc-hero__eyebrow::before,
html.sh26 body .calc-hero__eyebrow::before,
html.sh26 body.sh26-res .resources-hero .resources-section__label::before,
html.sh26 body.sh26-press .press-hero__label::before,
html.sh26 body.sh26-re .re-hero__eyebrow::before,
html.sh26 #cs .cs-hero .cs-kick::before,
html.sh26 body.sh26-404 .sh404__code::before,
html.sh26 body main.ls .ls-hero .ls-badge::before {
  content: "" !important; display: block !important; flex: none; position: static !important; width: 16px !important; height: 16px !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important;
  background: var(--sh-blue) !important; -webkit-mask: var(--lg-i-label) center / contain no-repeat; mask: var(--lg-i-label) center / contain no-repeat;
}

/* The hero lead: Fustat 500 in ink with weichie's blue corner arrow before it. */
html.sh26 body.sh26-guide .svc-hero__text > p:not(.eyebrow):not(.article-meta):not(.guide-meta),
html.sh26 body.cs-study .svc-hero__sub,
html.sh26 body .calc-hero__sub,
html.sh26 body.sh26-res .resources-hero p,
html.sh26 body.sh26-press .press-hero p,
html.sh26 body.sh26-re .re-hero__lead,
html.sh26 #cs .cs-hero .cs-lede,
html.sh26 body.sh26-404 .sh404__sub,
html.sh26 body main.ls .ls-hero__sub {
  position: relative !important; margin: 0 !important; padding: 0 0 0 36px !important; max-width: 60ch !important;
  font: 500 var(--sh-lead)/var(--sh-lead-lh) var(--sh-font) !important; letter-spacing: -0.02em !important;
  color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; opacity: 1 !important; text-align: left !important;
}
html.sh26 body.sh26-guide .svc-hero__text > p:not(.eyebrow):not(.article-meta):not(.guide-meta)::before,
html.sh26 body.cs-study .svc-hero__sub::before,
html.sh26 body .calc-hero__sub::before,
html.sh26 body.sh26-res .resources-hero p::before,
html.sh26 body.sh26-press .press-hero p::before,
html.sh26 body.sh26-re .re-hero__lead::before,
html.sh26 #cs .cs-hero .cs-lede::before,
html.sh26 body.sh26-404 .sh404__sub::before,
html.sh26 body main.ls .ls-hero__sub::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat; mask: var(--sh-i-corner) center / contain no-repeat;
}

/* Pills: blue with a white icon circle (primary) or sand with a blue one.
   The circle is ::after; its icon follows the link (calendar for Calendly,
   message for WhatsApp, an arrow otherwise) and turns on hover. */
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn,
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn {
  --lg-shape-b: var(--lg-ic-up-b); --lg-shape-w: var(--lg-ic-up-w); --lg-turn: rotate(45deg);
  --lg-b-bg: var(--lg-pill); --lg-b-hover: var(--lg-pill-hover); --lg-b-fg: var(--sh-ink);
  --lg-b-ic: var(--lg-shape-w); --lg-b-ic-bg: var(--sh-blue);
  display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important;
  width: auto; min-height: 52px !important; margin: 0; padding: 8px 8px 8px 24px !important;
  border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important; transform: none !important;
  background: var(--lg-b-bg) !important; color: var(--lg-b-fg) !important; -webkit-text-fill-color: var(--lg-b-fg) !important;
  font: 500 16px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; text-transform: none !important;
  text-decoration: none !important; text-align: left; white-space: normal; cursor: pointer;
  transition: background-color var(--sh-fast) ease !important;
}
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn::after,
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn::after {
  content: ""; flex: none; display: block; width: 36px; height: 36px; border-radius: 50%;
  background: var(--lg-b-ic) center / 18px 18px no-repeat, var(--lg-b-ic-bg);
  transition: transform .35s var(--sh-ease);
}
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn:hover,
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn:hover { background: var(--lg-b-hover) !important; transform: none !important; box-shadow: none !important; }
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn:hover::after,
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn:hover::after { transform: var(--lg-turn); }
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn:focus-visible,
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn:focus-visible { outline: 2px solid var(--sh-blue) !important; outline-offset: 3px !important; }
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) :is(.btn--primary, .btn--white),
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn--primary {
  --lg-b-bg: var(--sh-blue); --lg-b-hover: var(--sh-blue-ink); --lg-b-fg: var(--sh-paper);
  --lg-b-ic: var(--lg-shape-b); --lg-b-ic-bg: var(--sh-paper);
}
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn[href*="calendly.com"],
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn[href*="calendly.com"] { --lg-shape-b: var(--lg-ic-cal-b); --lg-shape-w: var(--lg-ic-cal-w); --lg-turn: rotate(-12deg); }
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn[href*="wa.me"],
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn[href*="wa.me"] { --lg-shape-b: var(--lg-ic-msg-b); --lg-shape-w: var(--lg-ic-msg-w); --lg-turn: rotate(-12deg); }
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn[href^="#"],
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn[href^="#"] { --lg-shape-b: var(--lg-ic-down-b); --lg-shape-w: var(--lg-ic-down-w); --lg-turn: translateY(2px); }
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn :is(svg, i.fa, i[class*="fa-"]) { display: none !important; }
@media (max-width: 520px) {
  html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) .btn,
  html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .btn { font-size: 15.5px !important; }
}

/* Blue links in running text keep a light underline (blue on body text is 2.64:1). */
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) :is(p, li, dd, td) a:not(.btn):not([class*="card"]):not([class*="row"]):not(:is(.sh404__list, .sh404__posts, .legal-toc) a),
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) :is(p, li, dd, td) a:not(.btn) {
  color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; font-weight: inherit;
  text-decoration: underline !important; text-decoration-thickness: 1px !important;
  text-underline-offset: .22em !important; text-decoration-color: rgba(10, 110, 158, .35) !important;
}
html.sh26 body:is(.sh26-lg, .sh26-re) :is(main, .svc-hero, .svc-section, .svc-faq) :is(p, li, dd, td) a:not(.btn):not([class*="card"]):not([class*="row"]):not(:is(.sh404__list, .sh404__posts, .legal-toc) a):hover,
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) :is(p, li, dd, td) a:not(.btn):hover { color: var(--sh-blue-ink) !important; -webkit-text-fill-color: var(--sh-blue-ink) !important; text-decoration-color: currentColor !important; }

/* Hairline accordion with the blue corner arrow and a + that turns into x,
   shared by every legacy FAQ (keeps <details> behaviour and the FAQ markup). */
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item,
html.sh26 body.cs-study details.svc-faq__item,
html.sh26 body .calc-faq details,
html.sh26 body.sh26-re .re-faq details,
html.sh26 body main.ls details.ls-faq__item,
html.sh26 body.sh26-hc details.fq {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important;
  interpolate-size: allow-keywords;
}
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > summary,
html.sh26 body.cs-study details.svc-faq__item > summary,
html.sh26 body .calc-faq details > summary,
html.sh26 body.sh26-re .re-faq details > summary,
html.sh26 body main.ls details.ls-faq__item > summary,
html.sh26 body.sh26-hc details.fq > summary {
  display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 14px !important;
  position: relative !important; list-style: none !important; cursor: pointer; margin: 0 !important; padding: 26px 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important; text-align: left !important;
  font: 500 20px/1.35 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > summary::-webkit-details-marker,
html.sh26 body.cs-study details.svc-faq__item > summary::-webkit-details-marker,
html.sh26 body .calc-faq details > summary::-webkit-details-marker,
html.sh26 body.sh26-re .re-faq details > summary::-webkit-details-marker,
html.sh26 body main.ls details.ls-faq__item > summary::-webkit-details-marker,
html.sh26 body.sh26-hc details.fq > summary::-webkit-details-marker { display: none; }
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > summary::before,
html.sh26 body.cs-study details.svc-faq__item > summary::before,
html.sh26 body .calc-faq details > summary::before,
html.sh26 body.sh26-re .re-faq details > summary::before,
html.sh26 body main.ls details.ls-faq__item > summary::before,
html.sh26 body.sh26-hc details.fq > summary::before {
  content: "" !important; display: block !important; flex: none; position: static !important; order: -1;
  width: 18px !important; height: 18px !important; margin: .2em 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: var(--sh-blue) !important; transform: none !important; box-shadow: none !important;
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat; mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > summary::after,
html.sh26 body.cs-study details.svc-faq__item > summary::after,
html.sh26 body .calc-faq details > summary::after,
html.sh26 body.sh26-re .re-faq details > summary::after,
html.sh26 body main.ls details.ls-faq__item > summary::after,
html.sh26 body.sh26-hc details.fq > summary::after {
  content: "" !important; display: block !important; flex: none; position: static !important; float: none !important; order: 9;
  width: 22px !important; height: 22px !important; margin: .1em 0 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: var(--sh-ink) !important; box-shadow: none !important; font-size: 0 !important; transform: none !important;
  -webkit-mask: var(--sh-i-plus) center / contain no-repeat; mask: var(--sh-i-plus) center / contain no-repeat;
  transition: transform .3s var(--sh-ease), background-color var(--sh-fast) ease !important;
}
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item[open] > summary::after,
html.sh26 body.cs-study details.svc-faq__item[open] > summary::after,
html.sh26 body .calc-faq details[open] > summary::after,
html.sh26 body.sh26-re .re-faq details[open] > summary::after,
html.sh26 body main.ls details.ls-faq__item[open] > summary::after,
html.sh26 body.sh26-hc details.fq[open] > summary::after { transform: rotate(45deg) !important; }
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > summary:hover::after,
html.sh26 body.cs-study details.svc-faq__item > summary:hover::after,
html.sh26 body .calc-faq details > summary:hover::after,
html.sh26 body.sh26-re .re-faq details > summary:hover::after,
html.sh26 body main.ls details.ls-faq__item > summary:hover::after,
html.sh26 body.sh26-hc details.fq > summary:hover::after { background: var(--sh-blue) !important; }
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > :not(summary),
html.sh26 body.cs-study details.svc-faq__item > :not(summary),
html.sh26 body .calc-faq details > :not(summary),
html.sh26 body.sh26-re .re-faq details > :not(summary),
html.sh26 body main.ls details.ls-faq__item > :not(summary),
html.sh26 body.sh26-hc details.fq > :not(summary) {
  max-width: 72ch !important; margin: 0 !important; padding: 0 40px 14px 32px !important; background: none !important; border: 0 !important;
  font: 400 17px/1.65 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-body) !important; -webkit-text-fill-color: var(--sh-body) !important;
}
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > :not(summary):last-child,
html.sh26 body.cs-study details.svc-faq__item > :not(summary):last-child,
html.sh26 body .calc-faq details > :not(summary):last-child,
html.sh26 body.sh26-re .re-faq details > :not(summary):last-child,
html.sh26 body main.ls details.ls-faq__item > :not(summary):last-child,
html.sh26 body.sh26-hc details.fq > :not(summary):last-child { padding-bottom: 30px !important; }
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item::details-content,
html.sh26 body.cs-study details.svc-faq__item::details-content,
html.sh26 body .calc-faq details::details-content,
html.sh26 body.sh26-re .re-faq details::details-content,
html.sh26 body main.ls details.ls-faq__item::details-content,
html.sh26 body.sh26-hc details.fq::details-content {
  block-size: 0; overflow-y: clip; transition: block-size .32s var(--sh-ease), content-visibility .32s allow-discrete;
}
html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item[open]::details-content,
html.sh26 body.cs-study details.svc-faq__item[open]::details-content,
html.sh26 body .calc-faq details[open]::details-content,
html.sh26 body.sh26-re .re-faq details[open]::details-content,
html.sh26 body main.ls details.ls-faq__item[open]::details-content,
html.sh26 body.sh26-hc details.fq[open]::details-content { block-size: auto; }
@media (max-width: 640px) {
  html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > summary,
  html.sh26 body.cs-study details.svc-faq__item > summary,
  html.sh26 body .calc-faq details > summary,
  html.sh26 body.sh26-re .re-faq details > summary,
  html.sh26 body main.ls details.ls-faq__item > summary,
  html.sh26 body.sh26-hc details.fq > summary { padding: 22px 0 !important; font-size: 18px !important; }
  html.sh26 body.sh26-lg :is(main, .svc-section) details.faq-item > :not(summary),
  html.sh26 body.cs-study details.svc-faq__item > :not(summary),
  html.sh26 body .calc-faq details > :not(summary),
  html.sh26 body.sh26-re .re-faq details > :not(summary),
  html.sh26 body main.ls details.ls-faq__item > :not(summary),
  html.sh26 body.sh26-hc details.fq > :not(summary) { padding-right: 0 !important; font-size: 16.5px !important; }
}
/* ---------- B. guides (body.sh26-guide): a weichie case-study long read ----------
   Hero: the label, a huge Fraunces title, the lead with the corner arrow at
   left and the article meta at right, the pills under the lead, the facts in
   a row. Sections alternate ground and sand; at 1024px+ each one is a
   sidehead: the Fraunces H2 sticks in columns 1-4, everything else reads in
   columns 5-12 at about 70ch. */
html.sh26 body.sh26-guide main .container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
/* hero */
html.sh26 body.sh26-guide .svc-hero {
  background: var(--sh-ground) !important; color: var(--sh-ink) !important; border: 0 !important; min-height: 0 !important;
  padding: var(--lg-top) 0 clamp(72px, 8vw, 128px) !important; overflow: visible !important; text-align: left !important;
}
html.sh26 body.sh26-guide .svc-hero::before,
html.sh26 body.sh26-guide .svc-hero::after { content: none !important; display: none !important; }
html.sh26 body.sh26-guide .svc-hero__inner { display: block !important; }
html.sh26 body.sh26-guide .svc-hero__text {
  display: grid !important; grid-template-columns: minmax(0, 1fr); max-width: none !important; margin: 0 !important; text-align: left !important;
}
html.sh26 body.sh26-guide .svc-hero__text > * { min-width: 0; }
html.sh26 body.sh26-guide .svc-hero__text > .eyebrow { justify-self: start; }
html.sh26 body.sh26-guide .svc-hero h1 { margin: 0 0 clamp(40px, 5vw, 72px) !important; max-width: 14.5em !important; }
html.sh26 body.sh26-guide .svc-hero .article-meta,
html.sh26 body.sh26-guide .svc-hero .guide-meta {
  margin: 28px 0 0 !important; padding: 0 !important; max-width: 46ch;
  font: 500 15px/1.55 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-muted) !important; opacity: 1 !important;
}
html.sh26 body.sh26-guide .svc-hero .article-meta a,
html.sh26 body.sh26-guide .svc-hero .guide-meta a { color: var(--sh-ink) !important; text-decoration: underline !important; text-underline-offset: .22em !important; text-decoration-color: var(--sh-line-2) !important; }
html.sh26 body.sh26-guide .svc-hero__cta {
  display: flex !important; flex-wrap: wrap !important; flex-direction: row !important; gap: 12px !important;
  margin: 36px 0 0 !important; padding: 0 0 0 36px !important; justify-content: flex-start !important;
}
@media (min-width: 1024px) {
  html.sh26 body.sh26-guide .svc-hero__text {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap);
  }
  html.sh26 body.sh26-guide .svc-hero__text > * { grid-column: 1 / -1; }
  html.sh26 body.sh26-guide .svc-hero__text > p:not(.eyebrow):not(.article-meta):not(.guide-meta) { grid-column: 1 / span 7; grid-row: 3; }
  html.sh26 body.sh26-guide .svc-hero__text > .svc-hero__cta { grid-column: 1 / span 7; grid-row: 4; }
  html.sh26 body.sh26-guide .svc-hero__text > :is(.article-meta, .guide-meta) {
    grid-column: 9 / -1; grid-row: 3; align-self: start; justify-self: end; margin: 4px 0 0 !important; text-align: right !important;
  }
}
/* hero facts: a row of four, value in Fraunces, label muted */
html.sh26 body.sh26-guide .svc-hero__stats {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 var(--sh-gap) !important;
  margin: clamp(64px, 7vw, 104px) 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
}
@media (min-width: 1024px) { html.sh26 body.sh26-guide .svc-hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
html.sh26 body.sh26-guide .svc-hero__stats .stat-item {
  display: flex !important; flex-direction: column !important; gap: 8px; padding: 22px 0 !important; margin: 0 !important; text-align: left !important;
  background: none !important; border: 0 !important; border-top: 1px solid var(--sh-rule) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important;
}
html.sh26 body.sh26-guide .svc-hero__stats .stat-num {
  display: block !important; margin: 0 !important; font: 500 clamp(26px, 2.4vw, 36px)/1.08 var(--sh-display) !important; letter-spacing: -0.02em !important;
  color: var(--sh-ink) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body.sh26-guide .svc-hero__stats .stat-label { display: block !important; font: 400 15px/1.45 var(--sh-font) !important; color: var(--sh-muted) !important; opacity: 1 !important; }

/* section rhythm: ground and sand bands, no rules between them */
html.sh26 body.sh26-guide main .section {
  padding: var(--lg-sec) 0 !important; background: var(--sh-ground) !important; border: 0 !important;
}
html.sh26 body.sh26-guide main .section--alt { background: var(--sh-sand) !important; }
/* two sand bands in a row (FAQ then related guides) read as one band */
html.sh26 body.sh26-guide main .section--alt + .section--alt { padding-top: 0 !important; }
html.sh26 body.sh26-guide main .section-title {
  margin: 0 0 32px !important; max-width: 16em; text-align: left !important;
  font-family: var(--sh-display) !important; font-style: normal !important; font-weight: 500 !important;
  font-size: clamp(34px, 3.6vw, 54px) !important; line-height: 1.04 !important; letter-spacing: -0.02em !important;
  color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; background: none !important; text-wrap: balance;
}
html.sh26 body.sh26-guide main .section-sub {
  margin: 0 0 36px !important; max-width: 60ch !important; text-align: left !important;
  font: 500 20px/1.45 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; opacity: 1 !important;
}
@media (min-width: 1024px) {
  html.sh26 body.sh26-guide main .section:not(.cta-section) > .container:has(> .section-title) {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); row-gap: 0; align-items: start;
  }
  html.sh26 body.sh26-guide main .section:not(.cta-section) > .container:has(> .section-title) > * { grid-column: 5 / -1; min-width: 0; }
  html.sh26 body.sh26-guide main .section:not(.cta-section) > .container:has(> .section-title) > .section-title {
    grid-column: 1 / span 4; grid-row: 1 / span 60; position: sticky; top: calc(var(--sh-hdr, 76px) + 40px);
    margin: 0 !important; padding-right: 16px; font-size: clamp(32px, 3vw, 46px) !important;
  }
}
/* the content column: no inline max-widths or centring */
html.sh26 body.sh26-guide main .section .container > div[style*="max-width"],
html.sh26 body.sh26-guide main .section .container > [style*="max-width"] { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
html.sh26 body.sh26-guide main .section .container > [style*="margin:2rem auto"],
html.sh26 body.sh26-guide main .section .container > [style*="margin-top:2rem"] { margin-top: 0 !important; }
html.sh26 body.sh26-guide main .section [style*="text-align:center"] { text-align: left !important; }
html.sh26 body.sh26-guide main .section [style*="justify-content:center"] { justify-content: flex-start !important; }
html.sh26 body.sh26-guide main .section p {
  max-width: 70ch; margin: 0 0 20px !important; text-align: left !important;
  font: 400 var(--sh-text)/1.68 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-body) !important;
}
html.sh26 body.sh26-guide main .section .section-sub { font: 500 20px/1.45 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; margin: 0 0 36px !important; }
html.sh26 body.sh26-guide main .section :is(h3, h4) {
  margin: 0 0 10px !important; text-align: left !important;
  font: 500 clamp(22px, 1.9vw, 27px)/1.15 var(--sh-display) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important;
}
html.sh26 body.sh26-guide main .section h4 { font-size: 20px !important; }
html.sh26 body.sh26-guide main .section .container > div[style*="display:flex"] { margin-top: 32px !important; gap: 12px !important; }
/* plain lists: blue dots, blue numerals */
html.sh26 body.sh26-guide main .section ul:not([class]),
html.sh26 body.sh26-guide main .section ol:not([class]) { max-width: 70ch; margin: 0 0 22px !important; padding: 0 !important; }
html.sh26 body.sh26-guide main .section ul:not([class]) { list-style: none !important; }
html.sh26 body.sh26-guide main .section ol:not([class]) { list-style: none !important; counter-reset: lg-ol; }
html.sh26 body.sh26-guide main .section :is(ul, ol):not([class]) > li {
  position: relative; margin: 0 0 12px !important; padding: 0 0 0 26px !important;
  font: 400 var(--sh-text)/1.65 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-body) !important;
}
html.sh26 body.sh26-guide main .section ul:not([class]) > li::before {
  content: ""; position: absolute; left: 3px; top: calc(.5lh - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue);
}
html.sh26 body.sh26-guide main .section ol:not([class]) > li { counter-increment: lg-ol; padding-left: 34px !important; }
html.sh26 body.sh26-guide main .section ol:not([class]) > li::before {
  content: counter(lg-ol, decimal-leading-zero); position: absolute; left: 0; top: .12em;
  font: 500 14px/1.6 var(--sh-font); letter-spacing: 0; color: var(--sh-blue);
}

/* cards: sand (white on a sand band), 24px radius, no border, no shadow */
html.sh26 body.sh26-guide main :is(.svc-cards, .capability-grid, .agent-types, .compliance-grid, .build-buy-grid) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--sh-gap) !important;
  max-width: none !important; margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important;
}
@media (min-width: 640px) {
  html.sh26 body.sh26-guide main :is(.svc-cards, .capability-grid, .agent-types, .compliance-grid, .build-buy-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
html.sh26 body.sh26-guide main :is(.svc-card, .capability-card, .agent-type, .compliance-item, .build-buy-col) {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important;
  margin: 0 !important; padding: clamp(26px, 2.6vw, 38px) !important; max-width: none !important; text-align: left !important;
  background: var(--lg-card) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; transform: none !important;
}
html.sh26 body.sh26-guide main :is(.svc-card, .capability-card, .agent-type, .compliance-item, .build-buy-col):hover { background: var(--lg-card) !important; box-shadow: none !important; transform: none !important; }
html.sh26 body.sh26-guide main .svc-card__icon,
html.sh26 body.sh26-guide main .industry-card__icon {
  display: inline-grid !important; place-items: center !important; flex: none; width: 48px !important; height: 48px !important; margin: 0 0 26px !important;
  border-radius: 50% !important; background: var(--sh-blue-tile) !important; color: var(--sh-blue) !important; border: 0 !important; box-shadow: none !important; font-size: 0 !important;
}
html.sh26 body.sh26-guide main :is(.svc-card__icon, .industry-card__icon) .si { width: 22px !important; height: 22px !important; color: var(--sh-blue) !important; }
html.sh26 body.sh26-guide main :is(.svc-card, .capability-card, .agent-type, .compliance-item, .build-buy-col) :is(h3, h4) { margin: 0 0 12px !important; font-size: clamp(22px, 1.8vw, 26px) !important; }
html.sh26 body.sh26-guide main :is(.svc-card, .capability-card, .agent-type, .compliance-item, .build-buy-col) p {
  margin: 0 0 10px !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--sh-body) !important;
}
html.sh26 body.sh26-guide main :is(.svc-card, .capability-card, .agent-type, .compliance-item, .build-buy-col) p:last-child { margin-bottom: 0 !important; }
html.sh26 body.sh26-guide main .svc-card p :is(strong, b) { font-weight: 600 !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-guide main .capability-card__label {
  display: block !important; margin: 0 0 14px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-blue) !important;
}
html.sh26 body.sh26-guide main .build-buy-col ul { margin: 6px 0 0 !important; padding: 0 !important; list-style: none !important; }
html.sh26 body.sh26-guide main .build-buy-col ul li { position: relative; margin: 0 0 8px !important; padding: 0 0 0 22px !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--sh-body) !important; }
html.sh26 body.sh26-guide main .build-buy-col ul li::before {
  content: "" !important; position: absolute !important; left: 2px !important; top: calc(.5lh - 3.5px) !important; width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: var(--sh-blue) !important; transform: none !important; border: 0 !important;
}
html.sh26 body.sh26-guide main .buy-col ul li::before { background: var(--sh-muted) !important; }

/* industry links and resource links: weichie's ruled rows */
html.sh26 body.sh26-guide main :is(.industry-grid, .industry-cards, .resource-grid, .resource-list) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 var(--sh-gap) !important;
  max-width: none !important; margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important;
}
@media (min-width: 900px) {
  html.sh26 body.sh26-guide main :is(.industry-grid, .industry-cards) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
html.sh26 body.sh26-guide main :is(.industry-card, .resource-card, .resource-list li a) {
  position: relative; display: block !important; margin: 0 !important; padding: 26px 48px 26px 0 !important; max-width: none !important; text-align: left !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important; border-radius: 0 !important;
  box-shadow: none !important; transform: none !important; color: var(--sh-ink) !important; text-decoration: none !important;
}
html.sh26 body.sh26-guide main .industry-cards .industry-card { display: grid !important; grid-template-columns: 48px minmax(0, 1fr) !important; column-gap: 18px !important; align-items: start !important; }
html.sh26 body.sh26-guide main .industry-cards .industry-card > * { grid-column: 2; }
html.sh26 body.sh26-guide main .industry-cards .industry-card > .industry-card__icon { grid-column: 1; grid-row: 1 / span 4; margin: 0 !important; }
html.sh26 body.sh26-guide main .resource-list li { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none !important; }
html.sh26 body.sh26-guide main .resource-list li::before { content: none !important; }
html.sh26 body.sh26-guide main :is(a.industry-card, a.resource-card, .resource-list li a)::after {
  content: ""; position: absolute; right: 4px; top: 30px; width: 20px; height: 20px; background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat; mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 body.sh26-guide main :is(a.industry-card, a.resource-card, .resource-list li a):hover::after { transform: translateX(4px); }
html.sh26 body.sh26-guide main .industry-card h3 { margin: 0 0 6px !important; font: 500 20px/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; }
html.sh26 body.sh26-guide main .industry-card p { margin: 0 !important; font-size: 15.5px !important; line-height: 1.55 !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-guide main a.industry-card:hover h3,
html.sh26 body.sh26-guide main a.resource-card:hover p,
html.sh26 body.sh26-guide main .resource-list li a:hover { color: var(--sh-blue) !important; }
html.sh26 body.sh26-guide main .resource-card p,
html.sh26 body.sh26-guide main .resource-list li a { margin: 0 !important; font: 500 19px/1.35 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-guide main a.resource-card { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px 32px !important; flex-wrap: wrap; min-height: 84px; padding: 22px 0 !important; }
html.sh26 body.sh26-guide main a.resource-card::after { content: none !important; display: none !important; }
html.sh26 body.sh26-guide main .resource-card p { flex: 1 1 320px; }
html.sh26 body.sh26-guide main .resource-card span { flex: none; display: block; margin: 0 !important; font: 500 15px/1.4 var(--sh-font) !important; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; white-space: nowrap; }
/* a few build-vs-buy style notes follow a grid directly */
html.sh26 body.sh26-guide main .section .container > :is(.svc-cards, .build-buy-grid, .compliance-grid, .capability-grid, .agent-types, .process-steps, .modern-steps, .industry-grid, .industry-cards, .tech-tags, .comparison-table, .roi-box) + :is(p, div) { margin-top: 36px !important; }

/* numbered steps: a blue numeral, the step on a rule */
html.sh26 body.sh26-guide main :is(.process-steps, .modern-steps, .mvp-checklist) {
  display: block !important; max-width: none !important; margin: 8px 0 0 !important; padding: 0 !important; list-style: none !important; border: 0 !important;
}
html.sh26 body.sh26-guide main :is(.process-step, .modern-step, .mvp-checklist > li) {
  display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; gap: 0 12px !important; align-items: start !important;
  margin: 0 !important; padding: 28px 0 !important; max-width: none !important; text-align: left !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important;
}
html.sh26 body.sh26-guide main :is(.process-step, .modern-step, .mvp-checklist > li) > * { grid-column: 2; min-width: 0; }
html.sh26 body.sh26-guide main :is(.process-step__num, .step-num, .modern-step__num, .mvp-checklist .check) {
  grid-column: 1 !important; grid-row: 1 / span 4; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important;
  font: 500 clamp(28px, 2.4vw, 36px)/1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important;
}
html.sh26 body.sh26-guide main :is(.process-step, .modern-step, .mvp-checklist > li) :is(h3, h4) { margin: 2px 0 8px !important; }
html.sh26 body.sh26-guide main :is(.process-step, .modern-step, .mvp-checklist > li) p { margin: 0 0 6px !important; font-size: 16.5px !important; line-height: 1.62 !important; }
html.sh26 body.sh26-guide main .modern-approaches h4 { font-size: 18px !important; margin: 14px 0 6px !important; }
html.sh26 body.sh26-guide main .modern-approaches ul li { font-size: 15.5px !important; color: var(--sh-body) !important; }

/* worked example and callouts: a sand panel (white on a sand band) */
html.sh26 body.sh26-guide main :is(.roi-box, .quick-answer) {
  max-width: none !important; margin: 40px 0 0 !important; padding: clamp(28px, 3.4vw, 48px) !important;
  background: var(--lg-card) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; overflow: visible !important;
}
html.sh26 body.sh26-guide main .quick-answer::before { display: none !important; }
html.sh26 body.sh26-guide main .roi-box h3 { margin: 0 0 18px !important; }
html.sh26 body.sh26-guide main .roi-row {
  display: flex !important; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 0 !important;
  border-bottom: 1px solid var(--sh-line) !important; font: 400 16px/1.45 var(--sh-font) !important; color: var(--sh-ink) !important;
}
html.sh26 body.sh26-guide main .roi-row > span:last-child { text-align: right; font-weight: 500; white-space: nowrap; }
html.sh26 body.sh26-guide main .roi-row:last-child { border-bottom: 0 !important; padding-top: 20px !important; font: 500 clamp(20px, 1.8vw, 24px)/1.3 var(--sh-display) !important; color: var(--sh-blue) !important; }
html.sh26 body.sh26-guide main .roi-row:last-child .roi-label { font: inherit !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-guide main .roi-label { color: var(--sh-muted) !important; }

/* tool names: sand chips (white on a sand band) */
html.sh26 body.sh26-guide main .tech-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 8px 0 0 !important; justify-content: flex-start !important; }
html.sh26 body.sh26-guide main .tech-tags .tag {
  display: inline-flex !important; align-items: center !important; min-height: 38px; padding: 0 16px !important; margin: 0 !important;
  background: var(--lg-pill) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important;
  font: 500 15px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-ink) !important; white-space: nowrap;
}

/* tables: .sh-table look (sand header row, hairline rows), scrolling in the wrapper */
html.sh26 body.sh26-guide main :is(.comparison-table, .timeline-table, .stack-table) {
  max-width: none !important; margin: 8px 0 0 !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html.sh26 body.sh26-guide main .section table {
  width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; font: 400 16px/1.5 var(--sh-font) !important; color: var(--sh-body) !important;
}
html.sh26 body.sh26-guide main :is(.comparison-table, .timeline-table, .stack-table) table { min-width: 600px; }
html.sh26 body.sh26-guide main .section table tr { background: none !important; color: inherit !important; border: 0 !important; }
html.sh26 body.sh26-guide main .section table th {
  padding: 15px 18px !important; border: 0 !important; background: var(--lg-card) !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
  font: 500 14.5px/1.35 var(--sh-font) !important; letter-spacing: -0.005em !important; text-transform: none !important; text-align: left !important; vertical-align: middle !important;
}
html.sh26 body.sh26-guide main .section table thead th:first-child,
html.sh26 body.sh26-guide main .section table tr:first-child > th:first-child { border-radius: var(--sh-r-field) 0 0 var(--sh-r-field) !important; }
html.sh26 body.sh26-guide main .section table thead th:last-child,
html.sh26 body.sh26-guide main .section table tr:first-child > th:last-child { border-radius: 0 var(--sh-r-field) var(--sh-r-field) 0 !important; }
html.sh26 body.sh26-guide main .section table td {
  padding: 18px !important; border: 0 !important; border-bottom: 1px solid var(--sh-line) !important; background: none !important;
  color: var(--sh-body) !important; -webkit-text-fill-color: var(--sh-body) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.5 !important; vertical-align: top !important;
}
html.sh26 body.sh26-guide main .section table tr > td:first-child { color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; font-weight: 500 !important; }

/* FAQ list sits in the content column */
html.sh26 body.sh26-guide main .faq-list { display: block !important; max-width: none !important; margin: 0 !important; }

/* closing CTA: weichie's sand panel, text left, a blue line icon top right */
html.sh26 body.sh26-guide main .cta-section {
  background: var(--sh-ground) !important; color: var(--sh-ink) !important; text-align: left !important;
  padding: var(--lg-sec) 0 !important; border: 0 !important; overflow: visible !important;
}
html.sh26 body.sh26-guide main .cta-section::before,
html.sh26 body.sh26-guide main .cta-section::after { content: none !important; display: none !important; }
html.sh26 body.sh26-guide main .section--alt + .cta-section { padding-top: var(--lg-sec) !important; }
html.sh26 body.sh26-guide main .cta-section .container.cta-section__inner {
  position: relative; width: calc(100% - 2 * var(--sh-gutter)) !important; max-width: var(--sh-container) !important; margin: 0 auto !important;
  padding: clamp(36px, 4.6vw, 68px) clamp(96px, 12vw, 180px) clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important;
  background: var(--sh-sand) !important; border-radius: var(--sh-r-card) !important; text-align: left !important;
}
html.sh26 body.sh26-guide main .cta-section__inner::after {
  content: ""; position: absolute; top: clamp(32px, 4vw, 60px); right: clamp(28px, 4vw, 60px);
  width: clamp(48px, 5vw, 76px); height: clamp(48px, 5vw, 76px); background: var(--sh-blue);
  -webkit-mask: var(--lg-i-cal) center / contain no-repeat; mask: var(--lg-i-cal) center / contain no-repeat;
}
html.sh26 body.sh26-guide main .cta-section h2 {
  margin-top: 0 !important; margin-bottom: 20px !important; max-width: 16em; text-align: left !important;
  font: 500 clamp(34px, 4vw, 60px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body.sh26-guide main .cta-section p,
html.sh26 body.sh26-guide main .cta-section [style*="color"] { color: var(--sh-body) !important; -webkit-text-fill-color: var(--sh-body) !important; opacity: 1 !important; }
html.sh26 body.sh26-guide main .cta-section__inner > p:not(.cta-section__note) { margin-bottom: 32px !important; max-width: 58ch; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; }
html.sh26 body.sh26-guide main .cta-section__btns { display: flex !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 12px !important; margin-bottom: 24px !important; }
html.sh26 body.sh26-guide main .cta-section .cta-section__note { margin-top: 0 !important; font: 400 15px/1.5 var(--sh-font) !important; color: var(--sh-muted) !important; -webkit-text-fill-color: var(--sh-muted) !important; }
html.sh26 body.sh26-guide main .cta-section strong { color: var(--sh-ink) !important; }
html.sh26 body.sh26-guide main .cta-section .btn:not(.btn--primary) { --lg-b-bg: var(--sh-paper); --lg-b-hover: var(--sh-ground); }

@media (max-width: 640px) {
  html.sh26 body.sh26-guide .svc-hero__cta { padding-left: 0 !important; }
  html.sh26 body.sh26-guide main .section p,
  html.sh26 body.sh26-guide main .section :is(ul, ol):not([class]) > li { font-size: 16.5px !important; }
  html.sh26 body.sh26-guide main .section-sub,
  html.sh26 body.sh26-guide main .section .section-sub { font-size: 18px !important; }
  html.sh26 body.sh26-guide main :is(.process-step, .modern-step, .mvp-checklist > li) { grid-template-columns: 48px minmax(0, 1fr) !important; }
  html.sh26 body.sh26-guide main .cta-section__inner::after { display: none; }
  html.sh26 body.sh26-guide main .cta-section .container.cta-section__inner { padding: 32px 24px !important; }
  html.sh26 body.sh26-guide main .roi-row { flex-wrap: wrap; }
}
/* ---------- C. tool pages (ROI calculator + c5's three, by calc-* class) ----------
   Sand panels, white fields, blue pills, chips for options, the headline
   result on the blue tile. Behaviour, ids, names and copy are untouched. */
html.sh26 body :is(.calc-hero, .calc-wrap, .calc-section) .container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
html.sh26 body .calc-hero {
  background: var(--sh-ground) !important; color: var(--sh-ink) !important; border: 0 !important; text-align: left !important;
  padding: var(--lg-top) 0 clamp(56px, 6vw, 96px) !important;
}
html.sh26 body .calc-hero::before, html.sh26 body .calc-hero::after { content: none !important; display: none !important; }
html.sh26 body .calc-hero .calc-hero__title { margin: 0 0 clamp(36px, 4.4vw, 64px) !important; max-width: 14em !important; }
html.sh26 body .calc-hero .calc-cta { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 36px !important; padding-left: 36px; justify-content: flex-start !important; }
html.sh26 body .calc-wrap { padding: 0 0 var(--lg-sec) !important; background: transparent !important; }
html.sh26 body .calc-grid { gap: var(--sh-gap) !important; align-items: start !important; }

/* panels: sand, 24px radius, no border, no shadow */
html.sh26 body .calc-panel {
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important;
  box-shadow: none !important; padding: clamp(26px, 3.4vw, 48px) !important; --lg-pill: var(--sh-paper); --lg-pill-hover: var(--sh-ground);
}
html.sh26 body .calc-panel h2,
html.sh26 body .calc-panel h3 {
  margin: 0 0 10px !important; font: 500 clamp(26px, 2.4vw, 34px)/1.1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
}
html.sh26 body .calc-panel .calc-intro,
html.sh26 body .calc-send p.calc-intro { margin: 0 0 28px !important; font: 400 16px/1.55 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body .calc-field { margin: 0 0 24px !important; }
html.sh26 body .calc-field label,
html.sh26 body .calc-mode legend { display: block; margin-bottom: 10px !important; font: 500 15px/1.4 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-ink) !important; }
html.sh26 body .calc-field label output { color: var(--sh-blue) !important; font-weight: 500 !important; }
html.sh26 body .calc-field .hint { margin-top: 8px !important; font: 400 14px/1.5 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body .calc-field input[type=range] { accent-color: var(--sh-blue) !important; height: 28px; width: 100%; }
/* every text control, including the type=tel phone field; the honeypot is never touched */
html.sh26 body .calc-field select,
html.sh26 body .calc-field input[type=number],
html.sh26 body .calc-field input[type=text],
html.sh26 body .calc-panel input[type=text]:not(.calc-hp),
html.sh26 body .calc-panel input[type=email],
html.sh26 body .calc-panel input[type=tel],
html.sh26 body .calc-panel input[type=url],
html.sh26 body .calc-panel input[type=number],
html.sh26 body .calc-panel textarea,
html.sh26 body .calc-panel select {
  display: block !important; width: 100% !important; min-height: 52px; margin: 0 !important; padding: 14px 18px !important;
  background-color: var(--sh-paper) !important; border: 1px solid var(--sh-line) !important; border-radius: var(--sh-r-field) !important; box-shadow: none !important;
  font: 400 16.5px/1.4 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-ink) !important; -webkit-appearance: none; appearance: none;
  transition: border-color var(--sh-fast) ease;
}
html.sh26 body .calc-field select,
html.sh26 body .calc-panel select {
  padding-right: 50px !important; cursor: pointer;
  background: var(--sh-paper) var(--sh-select-arrow) no-repeat right 18px center / 18px 18px !important;
}
html.sh26 body .calc-panel textarea { min-height: 120px; resize: vertical; line-height: 1.5 !important; }
html.sh26 body .calc-panel input::placeholder,
html.sh26 body .calc-panel textarea::placeholder { color: var(--sh-muted) !important; opacity: 1; }
html.sh26 body .calc-panel :is(input, textarea, select):hover { border-color: var(--sh-line-2) !important; }
html.sh26 body .calc-panel input:focus-visible,
html.sh26 body .calc-panel textarea:focus-visible,
html.sh26 body .calc-panel select:focus-visible { outline: 2px solid var(--sh-blue) !important; outline-offset: 2px !important; border-color: var(--sh-blue) !important; box-shadow: none !important; }
html.sh26 body .calc-send label { display: block !important; margin: 0 0 18px !important; font: 500 15px/1.4 var(--sh-font) !important; color: var(--sh-ink) !important; }
html.sh26 body .calc-send label span { display: block !important; margin: 0 0 8px !important; }
html.sh26 body .calc-send .calc-row { gap: 0 18px !important; }
html.sh26 body .calc-send label.calc-check { display: flex !important; align-items: flex-start; gap: 12px !important; font: 400 15px/1.5 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body .calc-send label.calc-check input,
html.sh26 body .calc-panel input[type=checkbox],
html.sh26 body .calc-panel input[type=radio] { accent-color: var(--sh-blue) !important; width: 18px; height: 18px; flex: none; margin-top: 2px; }
html.sh26 body .calc-send .calc-small,
html.sh26 body .calc-small { margin-top: 14px !important; font: 400 14px/1.55 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body .calc-small a,
html.sh26 body .calc-svc a,
html.sh26 body .calc-note a,
html.sh26 body .calc-proof a,
html.sh26 body .calc-done a,
html.sh26 body .calc-section .body a,
html.sh26 body .calc-faq a,
html.sh26 body .calc-cards a,
html.sh26 body .pt-route a:not(.btn),
html.sh26 body .td-aside a {
  color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; font-weight: 500; text-decoration: underline !important;
  text-underline-offset: .22em !important; text-decoration-thickness: 1px !important; text-decoration-color: rgba(10, 110, 158, .35) !important;
}
html.sh26 body .calc-small a { display: inline-block; padding: 6px 0; }
html.sh26 body .calc-send .calc-err {
  background: var(--sh-paper) !important; border: 1px solid var(--sh-bad) !important; color: var(--sh-bad) !important;
  border-radius: var(--sh-r-field) !important; padding: 12px 16px !important; font: 400 15px/1.45 var(--sh-font) !important;
}
html.sh26 body .calc-done h3 { margin: 0 0 10px !important; }
html.sh26 body .calc-done p { font: 400 16.5px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body .calc-send { margin-top: var(--sh-gap) !important; }
html.sh26 body .calc-send .calc-cta { margin-top: 8px !important; }
@media (max-width: 640px) {
  html.sh26 body .calc-send button[type=submit].btn { display: flex !important; width: 100% !important; }
}

/* options (a radio group): chips, the checked one on the blue tile */
html.sh26 body .calc-mode { border: 0 !important; padding: 0 !important; margin: 0 0 24px !important; }
html.sh26 body .calc-mode label {
  display: inline-flex !important; align-items: center !important; gap: 10px !important; min-height: 44px; padding: 0 18px 0 14px !important;
  background: var(--sh-paper) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important;
  font: 500 15px/1.2 var(--sh-font) !important; color: var(--sh-ink) !important; cursor: pointer;
}
html.sh26 body .calc-mode label:has(input:checked) { background: var(--sh-blue-tile) !important; color: var(--sh-blue-ink) !important; box-shadow: inset 0 0 0 1px var(--sh-blue) !important; }
html.sh26 body .calc-mode label:has(input:focus-visible) { outline: 2px solid var(--sh-blue); outline-offset: 3px; }
html.sh26 body .calc-mode input { accent-color: var(--sh-blue) !important; }

/* results: sand cells on the ground, the headline result on the blue tile */
html.sh26 body .calc-results { gap: 12px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.sh26 body .calc-results > .calc-res:last-child:nth-child(even) { grid-column: 1 / -1 !important; }
html.sh26 body .calc-res {
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; padding: clamp(20px, 2vw, 28px) !important;
}
html.sh26 body .calc-res--hero { background: var(--sh-blue-tile) !important; padding: clamp(24px, 2.6vw, 36px) !important; }
html.sh26 body .calc-res__label { margin: 0 0 10px !important; font: 500 14.5px/1.4 var(--sh-font) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sh-muted) !important; }
html.sh26 body .calc-res--hero .calc-res__label { color: var(--sh-blue-ink) !important; }
html.sh26 body .calc-res__value {
  font: 500 clamp(28px, 2.6vw, 38px)/1.05 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
  -webkit-text-fill-color: var(--sh-ink) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
}
html.sh26 body .calc-res--hero .calc-res__value { font-size: clamp(44px, 5vw, 72px) !important; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; }
html.sh26 body .calc-res__note { margin-top: 8px !important; font: 400 14px/1.5 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body .calc-res--hero .calc-res__note { color: var(--sh-body) !important; }
html.sh26 body .calc-meter { height: 6px !important; margin-top: 18px !important; border-radius: var(--sh-r-pill) !important; background: var(--sh-paper) !important; }
html.sh26 body .calc-meter i { background: var(--sh-blue) !important; border-radius: var(--sh-r-pill) !important; }
html.sh26 body .calc-note { margin-top: 22px !important; font: 500 17px/1.55 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body .calc-svc { margin-top: 12px !important; font: 400 15.5px/1.5 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body .calc-wrap .calc-cta { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin-top: 24px !important; }

/* the explanation, cards and FAQ under the tool: ground and sand bands, sidehead */
html.sh26 body .calc-section { padding: var(--lg-sec) 0 !important; border: 0 !important; background: var(--sh-ground) !important; }
html.sh26 body .calc-section:nth-of-type(odd) { background: var(--sh-sand) !important; }
/* a section holding a sand form panel stays on the ground, so the panel reads */
html.sh26 body .calc-section:has(.calc-panel) { background: var(--sh-ground) !important; --lg-card: var(--sh-sand); --lg-pill: var(--sh-sand); }
html.sh26 body .calc-section h2 {
  margin: 0 0 28px !important; max-width: 16em; text-align: left !important;
  font: 500 clamp(34px, 3.6vw, 54px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
@media (min-width: 1024px) {
  html.sh26 body .calc-section > .container:has(> h2) {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); row-gap: 0; align-items: start;
  }
  html.sh26 body .calc-section > .container:has(> h2) > * { grid-column: 5 / -1; min-width: 0; }
  html.sh26 body .calc-section > .container:has(> h2) > h2 {
    grid-column: 1 / span 4; grid-row: 1 / span 40; position: sticky; top: calc(var(--sh-hdr, 76px) + 40px);
    margin: 0 !important; padding-right: 16px; font-size: clamp(32px, 3vw, 46px) !important;
  }
}
html.sh26 body .calc-section .body { max-width: 70ch !important; font: 400 var(--sh-text)/1.68 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body .calc-section .body p { margin: 0 0 18px !important; color: var(--sh-body) !important; }
html.sh26 body .calc-section .body p:first-child { font: 500 20px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body .calc-section .body :is(ul, ol) { list-style: none !important; margin: 14px 0 18px !important; padding: 0 !important; }
html.sh26 body .calc-section .body :is(ul, ol) > li { position: relative; margin: 0 0 10px !important; padding-left: 24px !important; }
html.sh26 body .calc-section .body :is(ul, ol) > li::before { content: ""; position: absolute; left: 3px; top: calc(.5lh - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue); }
html.sh26 body .calc-faq { max-width: none !important; }
html.sh26 body .calc-cards { gap: var(--sh-gap) !important; margin-top: 8px !important; }
html.sh26 body .calc-card,
html.sh26 body .pt-route {
  background: var(--lg-card) !important; border: 0 !important; border-radius: var(--sh-r-card) !important;
  box-shadow: none !important; padding: clamp(26px, 2.8vw, 40px) !important;
}
html.sh26 body .calc-card h3 { margin: 0 0 10px !important; font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--sh-display) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body .calc-card p { font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body .calc-proof { margin-top: 22px !important; font: 400 15px/1.5 var(--sh-font) !important; color: var(--sh-muted) !important; gap: 8px 24px !important; }
/* partners: three routes as sand cards */
html.sh26 body .pt-routes { gap: var(--sh-gap) !important; }
html.sh26 body .pt-route { display: flex !important; flex-direction: column !important; }
html.sh26 body .pt-route__tag {
  align-self: flex-start; display: inline-flex !important; align-items: center; min-height: 30px; margin: 0 0 28px !important; padding: 0 12px !important;
  background: var(--sh-blue-tile) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important;
  font: 500 13.5px/1.2 var(--sh-font) !important; letter-spacing: -0.005em !important; text-transform: none !important; color: var(--sh-blue-ink) !important;
}
html.sh26 body .pt-route h2 { margin: 0 0 12px !important; font: 500 clamp(26px, 2.4vw, 34px)/1.1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body .pt-route p,
html.sh26 body .pt-route ul { font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body .pt-route ul { list-style: none !important; margin: 14px 0 0 !important; padding: 0 !important; }
html.sh26 body .pt-route ul li { position: relative; margin: 0 0 10px !important; padding-left: 22px !important; }
html.sh26 body .pt-route ul li::before { content: ""; position: absolute; left: 2px; top: calc(.5lh - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue); }
html.sh26 body .pt-route li strong { color: var(--sh-ink) !important; font-weight: 600; }
html.sh26 body .pt-route__go { margin-top: auto !important; padding-top: 22px; }
html.sh26 body .pt-route__go a {
  display: inline-flex !important; align-items: center; gap: 8px; font: 500 15.5px/1.2 var(--sh-font) !important; color: var(--sh-blue) !important;
  -webkit-text-fill-color: var(--sh-blue) !important; text-decoration: none !important;
}
/* teardown: the numbered fixes as ruled rows with blue numerals */
html.sh26 body .td-fixes { gap: 0 !important; border: 0 !important; }
html.sh26 body .td-fix {
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important; border-radius: 0 !important;
  padding: 28px 0 !important; grid-template-columns: 64px minmax(0, 1fr) !important; box-shadow: none !important;
}
html.sh26 body .td-fix__n {
  width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important; display: block !important; padding: 0 !important;
  font: 500 clamp(26px, 2.2vw, 32px)/1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important;
}
html.sh26 body .td-fix h3 { margin: 0 0 8px !important; font: 500 20px/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body .td-fix p { font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body .td-aside { margin-top: 22px !important; font: 400 15px/1.55 var(--sh-font) !important; color: var(--sh-muted) !important; }
@media (max-width: 640px) {
  html.sh26 body .calc-hero .calc-cta { padding-left: 0; }
  html.sh26 body .calc-results { grid-template-columns: 1fr 1fr !important; }
  html.sh26 body .calc-res--hero { grid-column: 1 / -1 !important; }
  html.sh26 body .calc-res__value { font-size: 26px !important; }
  html.sh26 body .calc-res--hero .calc-res__value { font-size: 44px !important; }
  html.sh26 body .td-fix { grid-template-columns: 48px minmax(0, 1fr) !important; }
}
@media (max-width: 380px) {
  html.sh26 body .calc-results { grid-template-columns: 1fr !important; }
}
html.sh26 body .calc-grid > .calc-send:first-child { margin-top: 0 !important; }
/* ---------- D. 404 (body.sh26-404): "Page not found" in Fraunces, the search
   in a sand panel with the blue pill, useful links as weichie's ruled rows ---------- */
html.sh26 body.sh26-404 .sh404 { padding: clamp(56px, 8vw, 128px) 0 var(--lg-sec); }
html.sh26 body.sh26-404 .sh404__in { max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)); margin: 0 auto; padding: 0 var(--sh-gutter); }
html.sh26 body.sh26-404 main h1.sh404__title { margin: 0 0 clamp(36px, 4.4vw, 64px) !important; font-size: var(--sh-xl) !important; max-width: 10em !important; }
html.sh26 body.sh26-404 .sh404__search {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 820px; margin: clamp(40px, 5vw, 64px) 0 var(--lg-sec);
  padding: 12px; border-radius: var(--sh-r-card); background: var(--sh-sand);
}
html.sh26 body.sh26-404 .sh404__search input {
  flex: 1 1 260px; min-width: 0; min-height: 52px; margin: 0; padding: 14px 18px !important;
  background: var(--sh-paper) !important; border: 1px solid var(--sh-line) !important; border-radius: var(--sh-r-field) !important;
  font: 400 16.5px/1.4 var(--sh-font) !important; color: var(--sh-ink) !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
html.sh26 body.sh26-404 .sh404__search input::placeholder { color: var(--sh-muted) !important; }
html.sh26 body.sh26-404 .sh404__search input:focus-visible { outline: 2px solid var(--sh-blue) !important; outline-offset: 2px !important; border-color: var(--sh-blue) !important; }
html.sh26 body.sh26-404 .sh404__search button { flex: none; padding: 8px 8px 8px 22px; }
html.sh26 body.sh26-404 .sh404__h2 {
  margin: 0 0 8px; font: 500 clamp(30px, 3vw, 44px)/1.05 var(--sh-display) !important; letter-spacing: -0.02em; color: var(--sh-ink);
}
html.sh26 body.sh26-404 .sh404__list,
html.sh26 body.sh26-404 .sh404__posts { list-style: none; margin: 0 0 clamp(64px, 7vw, 104px); padding: 0; }
html.sh26 body.sh26-404 .sh404__list > li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; align-items: baseline;
  margin: 0; padding: 26px 48px 26px 0; border-bottom: 1px solid var(--sh-rule);
}
html.sh26 body.sh26-404 .sh404__list > li::after {
  content: ""; position: absolute; right: 4px; top: 30px; width: 20px; height: 20px; background: var(--sh-blue); pointer-events: none;
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat; mask: var(--sh-i-arrow-right) center / contain no-repeat;
  transition: transform var(--sh-fast) var(--sh-ease);
}
html.sh26 body.sh26-404 .sh404__list > li:hover::after { transform: translateX(4px); }
html.sh26 body.sh26-404 main .sh404__list > li > a:first-child { font: 500 21px/1.3 var(--sh-font) !important; letter-spacing: -0.015em; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; text-decoration: none !important; }
html.sh26 body.sh26-404 main .sh404__list > li > a:first-child:hover { color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; }
html.sh26 body.sh26-404 .sh404__list p { margin: 0 !important; padding: 0 !important; font: 400 16px/1.55 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-404 .sh404__posts li { margin: 0; padding: 20px 0; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 4px 24px; align-items: baseline; border-bottom: 1px solid var(--sh-rule); }
html.sh26 body.sh26-404 .sh404__cat { font: 500 var(--sh-label)/1.35 var(--sh-font); letter-spacing: .02em; text-transform: uppercase; color: var(--sh-muted); }
html.sh26 body.sh26-404 main .sh404__posts a { font: 500 18px/1.4 var(--sh-font) !important; letter-spacing: -0.015em; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; text-decoration: none !important; }
html.sh26 body.sh26-404 main .sh404__posts a:hover { color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; }
@media (min-width: 900px) {
  html.sh26 body.sh26-404 .sh404__list > li { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  html.sh26 body.sh26-404 .sh404 .sh404__h2 { margin-bottom: 16px; }
}
@media (max-width: 560px) {
  html.sh26 body.sh26-404 .sh404__posts li { grid-template-columns: 1fr; }
  html.sh26 body.sh26-404 .sh404__search button { width: 100%; justify-content: space-between; }
}
html.sh26 body.sh26-404 main .sh404__list p a { color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; text-decoration: underline !important; text-underline-offset: .22em; text-decoration-color: rgba(10, 110, 158, .35) !important; }
html.sh26 body.sh26-404 main .sh404__list p a:hover { color: var(--sh-blue-ink) !important; -webkit-text-fill-color: var(--sh-blue-ink) !important; text-decoration-color: currentColor !important; }
/* ---------- E. case-studies hub (main#cs, self-styled by an id-scoped <style>) ----------
   Weichie's work index: the label, a huge Fraunces title with the blue accent
   words, the lead and pills, the five builds as ruled rows; then the facts on
   the ground, the cards on a sand band (white, 28px, no border, no lift), the
   four steps with blue numerals and a sand closing panel. Every figure stays. */
html.sh26 #cs { background: var(--sh-ground) !important; color: var(--sh-body) !important; font-family: var(--sh-font) !important; }
html.sh26 #cs .cs-hero__bg,
html.sh26 #cs .cs-band__glow,
html.sh26 #cs .cs-kick i,
html.sh26 #cs .cs-index__eyebrow b { display: none !important; animation: none !important; }
html.sh26 #cs .cs-wrap { max-width: var(--sh-container) !important; }
html.sh26 #cs .cs-sec,
html.sh26 #cs .cs-hero { padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; }
html.sh26 #cs .cs-sec { padding-top: var(--lg-sec) !important; padding-bottom: var(--lg-sec) !important; border: 0 !important; }
/* section labels (the hero one comes from section A) */
html.sh26 #cs .cs-kick { display: inline-flex !important; align-items: center !important; gap: 10px !important; justify-content: flex-start !important; }
html.sh26 #cs .cs-kick span,
html.sh26 #cs .cs-index__eyebrow {
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 #cs .cs-sec .cs-kick::before {
  content: ""; display: block; flex: none; width: 16px; height: 16px; background: var(--sh-blue);
  -webkit-mask: var(--lg-i-label) center / contain no-repeat; mask: var(--lg-i-label) center / contain no-repeat;
}
html.sh26 #cs h2 {
  margin-top: 22px !important; font: 500 var(--sh-h2)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; text-wrap: balance;
}
html.sh26 #cs .cs-lede { font: 400 18px/1.55 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-body) !important; }

/* hero: one column; the index of builds becomes weichie's ruled rows */
html.sh26 #cs .cs-hero { padding-top: var(--lg-top) !important; padding-bottom: clamp(72px, 8vw, 128px) !important; overflow: visible !important; }
html.sh26 #cs .cs-hero__grid { grid-template-columns: minmax(0, 1fr) !important; gap: clamp(64px, 7vw, 104px) !important; align-items: start !important; }
html.sh26 #cs .cs-hero h1 { margin: 0 0 clamp(36px, 4.4vw, 64px) !important; max-width: 13em !important; }
html.sh26 #cs .cs-hero .cs-lede { margin-top: 0 !important; }
html.sh26 #cs .cs-hero__acts { margin-top: 36px !important; padding-left: 36px; gap: 12px !important; }
html.sh26 #cs .cs-index { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html.sh26 #cs .cs-index__eyebrow { display: block !important; margin: 0 0 8px !important; }
html.sh26 #cs .cs-index__list { margin-top: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr); column-gap: var(--sh-gap); }
html.sh26 #cs .cs-index__row,
html.sh26 #cs .cs-index__row:first-child {
  min-height: 92px; padding: 20px 0 !important; gap: 24px !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important; transition: none !important;
}
html.sh26 #cs .cs-index__row:hover { padding-left: 0 !important; }
html.sh26 #cs .cs-index__row s { font: 400 14.5px/1.4 var(--sh-font) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sh-muted) !important; }
html.sh26 #cs .cs-index__row b { margin-top: 4px !important; font: 500 clamp(19px, 1.6vw, 22px)/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 #cs .cs-index__row:hover b { color: var(--sh-blue) !important; }
html.sh26 #cs .cs-index__row u {
  display: inline-flex !important; align-items: center; gap: 8px; font-size: 0 !important; color: var(--sh-blue) !important;
}
html.sh26 #cs .cs-index__row u::before { content: "Read"; font: 500 15px/1 var(--sh-font); }
html.sh26 #cs .cs-index__row u::after {
  content: ""; width: 18px; height: 18px; background: currentColor; transition: transform var(--sh-fast) var(--sh-ease);
  -webkit-mask: var(--sh-i-arrow-right) center / contain no-repeat; mask: var(--sh-i-arrow-right) center / contain no-repeat;
}
html.sh26 #cs .cs-index__row:hover u::after { transform: translateX(4px); }
@media (min-width: 1024px) {
  html.sh26 #cs .cs-hero__grid > div:first-child { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 #cs .cs-hero__grid > div:first-child > * { grid-column: 1 / -1; }
  html.sh26 #cs .cs-hero__grid > div:first-child > .cs-lede,
  html.sh26 #cs .cs-hero__grid > div:first-child > .cs-hero__acts { grid-column: 1 / span 7; }
  html.sh26 #cs .cs-index { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 #cs .cs-index__eyebrow { grid-column: 1 / span 4; padding-top: 26px; }
  html.sh26 #cs .cs-index__list { grid-column: 5 / -1; }
}

/* pills: the dark button becomes the blue pill, the ghost the sand pill */
html.sh26 #cs .cs-btn {
  --lg-b-bg: var(--lg-pill); --lg-b-hover: var(--lg-pill-hover); --lg-b-fg: var(--sh-ink); --lg-b-ic: var(--lg-ic-msg-w); --lg-b-ic-bg: var(--sh-blue); --lg-turn: rotate(-12deg);
  gap: 16px !important; min-height: 52px; padding: 8px 8px 8px 24px !important; border: 0 !important; border-radius: var(--sh-r-pill) !important;
  background: var(--lg-b-bg) !important; color: var(--lg-b-fg) !important; box-shadow: none !important; transform: none !important;
  font: 500 16px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; transition: background-color var(--sh-fast) ease !important;
}
html.sh26 #cs .cs-btn > span { display: none !important; }
html.sh26 #cs .cs-btn::after {
  content: ""; flex: none; display: block; width: 36px; height: 36px; border-radius: 50%;
  background: var(--lg-b-ic) center / 18px 18px no-repeat, var(--lg-b-ic-bg); transition: transform .35s var(--sh-ease);
}
html.sh26 #cs .cs-btn:hover { background: var(--lg-b-hover) !important; transform: none !important; box-shadow: none !important; }
html.sh26 #cs .cs-btn:hover::after { transform: var(--lg-turn); }
html.sh26 #cs .cs-btn--dark { --lg-b-bg: var(--sh-blue); --lg-b-hover: var(--sh-blue-ink); --lg-b-fg: var(--sh-paper); --lg-b-ic: var(--lg-ic-cal-b); --lg-b-ic-bg: var(--sh-paper); }
html.sh26 #cs .cs-btn:focus-visible { outline: 2px solid var(--sh-blue) !important; outline-offset: 3px !important; border-radius: var(--sh-r-pill) !important; }

/* the facts row: plain, on the ground, value in Fraunces */
html.sh26 #cs .cs-sec--band { background: var(--sh-ground) !important; padding-top: 0 !important; padding-bottom: clamp(72px, 8vw, 120px) !important; overflow: visible !important; }
html.sh26 #cs .cs-band { max-width: var(--sh-container) !important; justify-content: flex-start !important; gap: 0 var(--sh-gap) !important; }
html.sh26 #cs .cs-fig { flex: 1 1 260px !important; text-align: left !important; padding: 24px 0 !important; border-top: 1px solid var(--sh-rule); }
html.sh26 #cs .cs-fig b { font: 500 clamp(26px, 2.4vw, 36px)/1.1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 #cs .cs-fig b a { color: inherit !important; text-decoration: underline; text-underline-offset: .14em; text-decoration-thickness: 1px; text-decoration-color: var(--sh-blue); }
html.sh26 #cs .cs-fig span { margin-top: 10px !important; font: 400 15px/1.45 var(--sh-font) !important; color: var(--sh-muted) !important; }

/* featured work: a sand band; white cards with a 28px radius, no border, no lift */
html.sh26 #cs .cs-sec--tint { background: var(--sh-sand) !important; border: 0 !important; }
html.sh26 #cs .cs-head { align-items: end !important; gap: 24px clamp(32px, 5vw, 80px) !important; }
html.sh26 #cs .cs-grid { margin-top: clamp(48px, 5vw, 80px) !important; gap: var(--sh-gap) !important; }
html.sh26 #cs .cs-card {
  padding: clamp(28px, 3vw, 44px) !important; border: 0 !important; border-radius: var(--sh-r-img) !important; background: var(--sh-paper) !important;
  box-shadow: none !important; transform: none !important; transition: background-color var(--sh-fast) ease !important;
}
html.sh26 #cs .cs-card:hover { transform: none !important; box-shadow: none !important; background: var(--sh-ground) !important; }
html.sh26 #cs .cs-card:hover h3 { color: var(--sh-blue) !important; }
html.sh26 #cs .cs-chip {
  min-height: 32px; padding: 0 14px !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; background: var(--sh-sand) !important;
  font: 500 14px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sh-ink) !important;
}
html.sh26 #cs .cs-chip--quiet { background: var(--sh-blue-tile) !important; color: var(--sh-blue-ink) !important; }
html.sh26 #cs .cs-chip > span[aria-hidden] { display: none !important; }   /* the padlock emoji */
html.sh26 #cs .cs-card__no { font: 500 clamp(24px, 2vw, 30px)/1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-blue) !important; }
html.sh26 #cs .cs-card h3 { margin-top: 28px !important; font: 500 clamp(26px, 2.3vw, 34px)/1.1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 #cs .cs-card__sum { margin-top: 14px !important; font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 #cs .cs-metrics { margin-top: 28px !important; gap: 10px !important; }
html.sh26 #cs .cs-metric { padding: 16px 18px !important; border: 0 !important; border-radius: var(--sh-r-field) !important; background: var(--sh-sand) !important; }
html.sh26 #cs .cs-metric b { font: 500 clamp(19px, 1.6vw, 23px)/1.15 var(--sh-display) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 #cs .cs-metric span { margin-top: 6px !important; font: 400 13.5px/1.4 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 #cs .cs-card__foot { margin-top: 26px !important; padding-top: 0 !important; border: 0 !important; }
html.sh26 #cs .cs-card__meta { font: 400 14px/1.4 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-muted) !important; }
html.sh26 #cs .cs-card__go { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--sh-font) !important; color: var(--sh-blue) !important; }

/* how we work: on the ground, four ruled steps with blue numerals */
html.sh26 #cs .cs-sec--dark { background: var(--sh-ground) !important; overflow: visible !important; }
html.sh26 #cs .cs-sec--dark .cs-wrap > div[style*="max-width"] { max-width: 900px !important; }
html.sh26 #cs .cs-sec--dark h2,
html.sh26 #cs .cs-sec--dark h2[style] { color: var(--sh-ink) !important; font-size: var(--sh-h2) !important; }
html.sh26 #cs .cs-sec--dark .cs-lede { color: var(--sh-body) !important; max-width: 62ch; }
html.sh26 #cs .cs-steps { margin-top: clamp(48px, 5vw, 80px) !important; gap: 0 var(--sh-gap) !important; border: 0 !important; border-radius: 0 !important; background: none !important; overflow: visible !important; }
html.sh26 #cs .cs-step { padding: 28px 0 !important; background: none !important; border-top: 1px solid var(--sh-rule); }
html.sh26 #cs .cs-step > b { font: 500 clamp(30px, 2.6vw, 40px)/1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-blue) !important; }
html.sh26 #cs .cs-step h3 { margin-top: 26px !important; font: 500 20px/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 #cs .cs-step p { margin-top: 10px !important; font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }

/* closing call to action: the sand panel, text left, a blue line icon top right */
html.sh26 #cs .cs-sec:last-of-type { padding-top: 0 !important; }
html.sh26 #cs .cs-cta {
  position: relative; max-width: none !important; margin: 0 !important; text-align: left !important;
  padding: clamp(36px, 4.6vw, 68px) clamp(96px, 12vw, 180px) clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 #cs .cs-cta::after {
  content: ""; position: absolute; top: clamp(32px, 4vw, 60px); right: clamp(28px, 4vw, 60px);
  width: clamp(48px, 5vw, 76px); height: clamp(48px, 5vw, 76px); background: var(--sh-blue);
  -webkit-mask: var(--lg-i-cal) center / contain no-repeat; mask: var(--lg-i-cal) center / contain no-repeat;
}
html.sh26 #cs .cs-cta .cs-kick { justify-content: flex-start !important; }
html.sh26 #cs .cs-cta h2 { max-width: 15em; font-size: clamp(34px, 4vw, 60px) !important; }
html.sh26 #cs .cs-cta .cs-lede { margin: 18px 0 0 !important; max-width: 58ch !important; font-weight: 500 !important; color: var(--sh-ink) !important; }
html.sh26 #cs .cs-cta__acts { justify-content: flex-start !important; margin-top: 32px !important; }
html.sh26 #cs .cs-cta .cs-btn--ghost { --lg-b-bg: var(--sh-paper); --lg-b-hover: var(--sh-ground); }
html.sh26 #cs .cs-cta__note { margin-top: 22px !important; font: 400 15px/1.5 var(--sh-font) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sh-muted) !important; }
@media (max-width: 640px) {
  html.sh26 #cs .cs-hero__acts { padding-left: 0; }
  html.sh26 #cs .cs-cta { padding: 32px 24px !important; }
  html.sh26 #cs .cs-cta::after { display: none; }
  html.sh26 #cs .cs-index__row u::before { content: none; }
}
/* ---------- F. case studies (body.cs-study, over case-study.css) ----------
   Weichie's case layout: the label, a huge Fraunces title, the lead with the
   corner arrow and the pills on the left, the project facts stacked on the
   right ("Industry / B2B Wholesale"), then sidehead sections on alternating
   ground and sand, results as sand figures, the client quote in Fraunces
   italic. Every figure and quote stays exactly as written. */
html.sh26 body.cs-study { background: var(--sh-ground) !important; color: var(--sh-body) !important; font-family: var(--sh-font) !important; }
html.sh26 body.cs-study :is(.svc-hero, .svc-section, .svc-faq) .container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
/* hero */
html.sh26 body.cs-study .svc-hero {
  background: var(--sh-ground) !important; border: 0 !important; min-height: 0 !important; text-align: left !important;
  padding: var(--lg-top) 0 clamp(72px, 8vw, 128px) !important; overflow: visible !important;
}
html.sh26 body.cs-study .svc-hero::before,
html.sh26 body.cs-study .svc-hero::after { content: none !important; display: none !important; animation: none !important; background: none !important; }
html.sh26 body.cs-study .svc-hero .container { display: grid !important; grid-template-columns: minmax(0, 1fr); text-align: left !important; }
html.sh26 body.cs-study .svc-hero .container > * { min-width: 0; }
html.sh26 body.cs-study .svc-hero__eyebrow { justify-self: start; }
html.sh26 body.cs-study .svc-hero h1.svc-hero__title { margin: 0 0 clamp(40px, 5vw, 72px) !important; max-width: 15em !important; }
html.sh26 body.cs-study .svc-hero__btns {
  display: flex !important; flex-wrap: wrap !important; gap: 12px !important; justify-content: flex-start !important;
  margin: 36px 0 0 !important; padding: 0 0 0 36px !important;
}
html.sh26 body.cs-study .svc-hero__stats {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px var(--sh-gap) !important;
  margin: 56px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; max-width: none !important;
}
html.sh26 body.cs-study .svc-hero__stat {
  display: flex !important; flex-direction: column-reverse !important; justify-content: flex-end !important; gap: 6px !important;
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important;
}
html.sh26 body.cs-study .svc-hero__stat strong {
  display: block !important; font: 500 19px/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important;
  /* named reset: case-study.css and style-light 19 clip a gradient into these */
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body.cs-study .svc-hero__stat span {
  display: block !important; font: 400 15px/1.4 var(--sh-font) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sh-muted) !important;
}
@media (min-width: 1024px) {
  html.sh26 body.cs-study .svc-hero .container { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); }
  html.sh26 body.cs-study .svc-hero .container > * { grid-column: 1 / -1; }
  html.sh26 body.cs-study .svc-hero__sub { grid-column: 1 / span 7 !important; grid-row: 3; }
  html.sh26 body.cs-study .svc-hero__btns { grid-column: 1 / span 7 !important; grid-row: 4; }
  html.sh26 body.cs-study .svc-hero__stats {
    grid-column: 9 / -1 !important; grid-row: 3 / span 2; align-self: start; margin: 4px 0 0 !important;
    grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important;
  }
  html.sh26 body.cs-study .svc-hero__stat { text-align: right !important; align-items: flex-end !important; }
}

/* section rhythm: ground and sand bands, sidehead layout */
html.sh26 body.cs-study :is(.svc-section, .svc-faq) {
  padding: var(--lg-sec) 0 !important; background: var(--sh-ground) !important; border: 0 !important; overflow: visible !important;
}
html.sh26 body.cs-study :is(.svc-section--alt, .svc-faq) { background: var(--sh-sand) !important; }
/* the label above each H2 repeats it: hidden, the H2 names the section */
html.sh26 body.cs-study :is(.svc-section, .svc-faq) .svc-eyebrow { display: none !important; }
html.sh26 body.cs-study .svc-title {
  margin: 0 0 32px !important; max-width: 16em; text-align: left !important;
  font: 500 clamp(34px, 3.6vw, 54px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important;
  color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; background: none !important; text-wrap: balance;
}
html.sh26 body.cs-study .svc-lead {
  max-width: 62ch !important; margin: 0 0 40px !important; text-align: left !important;
  font: 500 20px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
}
@media (min-width: 1024px) {
  html.sh26 body.cs-study :is(.svc-section, .svc-faq) > .container:has(> .svc-title) {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); row-gap: 0; align-items: start;
  }
  html.sh26 body.cs-study :is(.svc-section, .svc-faq) > .container:has(> .svc-title) > * { grid-column: 5 / -1; min-width: 0; }
  html.sh26 body.cs-study :is(.svc-section, .svc-faq) > .container:has(> .svc-title) > .svc-title {
    grid-column: 1 / span 4; grid-row: 1 / span 60; position: sticky; top: calc(var(--sh-hdr, 76px) + 40px);
    margin: 0 !important; padding-right: 16px; font-size: clamp(32px, 3vw, 46px) !important;
  }
}
html.sh26 body.cs-study :is(.svc-section, .svc-faq) p:not([class]) { max-width: 70ch; font: 400 var(--sh-text)/1.65 var(--sh-font) !important; color: var(--sh-body) !important; }

/* project snapshot: one sand panel with the facts as a three-column list */
html.sh26 body.cs-study .svc-quick-answer {
  max-width: none !important; margin: 0 !important; padding: clamp(32px, 4.4vw, 64px) !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.cs-study .svc-quick-answer::before { display: none !important; }
html.sh26 body.cs-study .svc-quick-answer__label {
  display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 22px !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 body.cs-study .svc-quick-answer__label::before {
  content: "" !important; display: block !important; position: static !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--sh-blue) !important;
}
html.sh26 body.cs-study .svc-quick-answer__text {
  max-width: 62ch !important; margin: 0 0 40px !important; font: 500 clamp(19px, 1.6vw, 23px)/1.45 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
}
html.sh26 body.cs-study .svc-quick-answer dl {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px var(--sh-gap) !important;
  margin: 0 !important; padding: 32px 0 0 !important; border: 0 !important; border-top: 1px solid var(--sh-rule) !important;
}
@media (min-width: 900px) { html.sh26 body.cs-study .svc-quick-answer dl { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
html.sh26 body.cs-study .svc-quick-answer dl > div { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html.sh26 body.cs-study .svc-quick-answer dt { margin: 0 0 8px !important; font: 400 15px/1.4 var(--sh-font) !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sh-muted) !important; }
html.sh26 body.cs-study .svc-quick-answer dd { margin: 0 !important; font: 500 clamp(22px, 1.9vw, 28px)/1.15 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }

/* before / after: two sand cards (white on the sand band), dot lists */
html.sh26 body.cs-study .svc-problem { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--sh-gap) !important; margin: 0 !important; }
@media (min-width: 700px) { html.sh26 body.cs-study .svc-problem { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
html.sh26 body.cs-study .svc-problem__col {
  margin: 0 !important; padding: clamp(26px, 2.8vw, 40px) !important; background: var(--lg-card) !important;
  border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.cs-study .svc-problem__label,
html.sh26 body.cs-study .svc-problem__col--before .svc-problem__label,
html.sh26 body.cs-study .svc-problem__col--after .svc-problem__label {
  margin: 0 0 22px !important; font: 500 clamp(22px, 1.9vw, 27px)/1.15 var(--sh-display) !important; letter-spacing: -0.015em !important;
  text-transform: none !important; color: var(--sh-ink) !important;
}
html.sh26 body.cs-study .svc-problem__label::before { display: none !important; }
html.sh26 body.cs-study .svc-problem__list { margin: 0 !important; padding: 0 !important; list-style: none !important; display: grid !important; gap: 12px !important; }
html.sh26 body.cs-study .svc-problem__list li {
  position: relative !important; margin: 0 !important; padding: 0 0 0 22px !important; border: 0 !important;
  font: 400 16px/1.55 var(--sh-font) !important; color: var(--sh-body) !important;
}
html.sh26 body.cs-study .svc-problem__list li::before,
html.sh26 body.cs-study .svc-problem__col--before .svc-problem__list li::before,
html.sh26 body.cs-study .svc-problem__col--after .svc-problem__list li::before {
  content: "" !important; position: absolute !important; left: 2px !important; top: calc(.5lh - 3.5px) !important; width: 7px !important; height: 7px !important;
  border-radius: 50% !important; background: var(--sh-blue) !important; color: transparent !important; font-size: 0 !important; transform: none !important;
}
html.sh26 body.cs-study .svc-problem__col--before .svc-problem__list li::before { background: var(--sh-muted) !important; }
html.sh26 body.cs-study .svc-problem__list li strong { color: var(--sh-ink) !important; font-weight: 600 !important; }

/* the build, step by step: ruled rows, blue numerals */
html.sh26 body.cs-study .svc-use-cases { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 var(--sh-gap) !important; margin: 0 !important; }
@media (min-width: 760px) { html.sh26 body.cs-study .svc-use-cases { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
html.sh26 body.cs-study .svc-use-case {
  margin: 0 !important; padding: 28px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important; text-align: left !important;
}
html.sh26 body.cs-study .svc-use-case:hover { box-shadow: none !important; transform: none !important; background: none !important; }
html.sh26 body.cs-study .svc-use-case::before,
html.sh26 body.cs-study .svc-use-case::after { content: none !important; display: none !important; }
html.sh26 body.cs-study .svc-use-case__num {
  margin: 0 0 14px !important; font: 500 clamp(26px, 2.2vw, 32px)/1 var(--sh-display) !important; letter-spacing: -0.02em !important;
  color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; background: none !important;
}
html.sh26 body.cs-study .svc-use-case__title { margin: 0 0 8px !important; font: 500 20px/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body.cs-study .svc-use-case__text { margin: 0 !important; font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }

/* what was kept: sand cards with a blue dot; engineering notes: ruled rows */
html.sh26 body.cs-study .svc-keep { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: var(--sh-gap) !important; margin: 0 !important; }
@media (min-width: 700px) { html.sh26 body.cs-study .svc-keep { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
html.sh26 body.cs-study .svc-keep__item {
  margin: 0 !important; padding: clamp(24px, 2.6vw, 36px) !important; background: var(--lg-card) !important;
  border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.cs-study .svc-keep__item h3 {
  display: flex !important; align-items: baseline; gap: 12px; margin: 0 0 10px !important;
  font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--sh-display) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important;
}
html.sh26 body.cs-study .svc-keep__item h3::before {
  content: "" !important; flex: none; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--sh-blue) !important; transform: translateY(-3px);
}
html.sh26 body.cs-study .svc-keep__item p { margin: 0 !important; font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body.cs-study .svc-notes { display: block !important; margin: 0 !important; }
html.sh26 body.cs-study .svc-note {
  margin: 0 !important; padding: 30px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
html.sh26 body.cs-study .svc-note h3 { margin: 0 0 10px !important; font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--sh-display) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body.cs-study .svc-note p { margin: 0 0 8px !important; max-width: 70ch; font: 400 16.5px/1.62 var(--sh-font) !important; color: var(--sh-body) !important; }

/* tech stack: the inline-styled tags become sand chips (white on the sand band) */
html.sh26 body.cs-study .svc-section .container > div[style*="flex-wrap"] {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; max-width: none !important; margin: 0 !important; justify-content: flex-start !important;
}
html.sh26 body.cs-study .svc-section .container > div[style*="flex-wrap"] > span {
  display: inline-flex !important; align-items: center !important; min-height: 38px; padding: 0 16px !important;
  background: var(--lg-pill) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important;
  font: 500 15px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-ink) !important; white-space: nowrap;
}

/* results: the inline white cards become sand figures, value in Fraunces */
html.sh26 body.cs-study .svc-section .container > div[style*="grid-template-columns"] {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)) !important; gap: var(--sh-gap) !important; margin: 0 !important;
}
html.sh26 body.cs-study .svc-section .container > div[style*="grid-template-columns"] > div {
  display: flex !important; flex-direction: column !important; gap: 0 !important; margin: 0 !important; padding: clamp(24px, 2.4vw, 34px) !important;
  background: var(--lg-card) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; text-align: left !important;
}
html.sh26 body.cs-study .svc-section .container > div[style*="grid-template-columns"] > div > div:nth-child(1) {
  margin: 0 0 12px !important; font: 500 clamp(27px, 2.3vw, 36px)/1.08 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
}
html.sh26 body.cs-study .svc-section .container > div[style*="grid-template-columns"] > div > div:nth-child(2) { margin: 0 !important; font: 400 15.5px/1.45 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body.cs-study .svc-section .container > div[style*="grid-template-columns"] > div > div:nth-child(3) {
  align-self: flex-start; margin: 16px 0 0 !important; padding: 5px 12px !important; border-radius: var(--sh-r-pill) !important;
  background: var(--sh-blue-tile) !important; font: 500 14px/1.2 var(--sh-font) !important; color: var(--sh-blue-ink) !important;
}

/* the client quote: Fraunces italic, large, a blue quote mark */
html.sh26 body.cs-study .svc-section .container > div[style*="text-align:center"]:has(blockquote) {
  max-width: 1040px !important; margin: 0 !important; text-align: left !important;
}
html.sh26 body.cs-study .svc-section .container > div:has(> blockquote) > div:first-child {
  height: .5em; margin: 0 0 18px !important; font: 400 clamp(96px, 10vw, 150px)/1 var(--sh-display) !important; color: var(--sh-blue) !important;
}
html.sh26 body.cs-study .svc-section blockquote {
  margin: 0 0 32px !important; padding: 0 !important; border: 0 !important; background: none !important; quotes: none;
  font: italic 400 clamp(28px, 3.4vw, 50px)/1.18 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; text-wrap: pretty;
}
html.sh26 body.cs-study .svc-section blockquote + p { margin: 0 !important; font: 500 16px/1.45 var(--sh-font) !important; color: var(--sh-muted) !important; }

/* closing CTA: the inline white card becomes the sand panel, text left, a blue line icon top right */
html.sh26 body.cs-study #contact .container > div[style*="background"] {
  position: relative; max-width: none !important; margin: 0 !important; text-align: left !important;
  padding: clamp(36px, 4.6vw, 68px) clamp(96px, 12vw, 180px) clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.cs-study #contact .container > div[style*="background"]::after {
  content: ""; position: absolute; top: clamp(32px, 4vw, 60px); right: clamp(28px, 4vw, 60px);
  width: clamp(48px, 5vw, 76px); height: clamp(48px, 5vw, 76px); background: var(--sh-blue);
  -webkit-mask: var(--lg-i-cal) center / contain no-repeat; mask: var(--lg-i-cal) center / contain no-repeat;
}
html.sh26 body.cs-study #contact .svc-title { margin: 0 0 20px !important; max-width: 15em; font-size: clamp(34px, 4vw, 60px) !important; position: static !important; }
html.sh26 body.cs-study #contact .svc-lead { margin: 0 0 32px !important; max-width: 58ch !important; font-size: 19px !important; }
html.sh26 body.cs-study #contact div[style*="justify-content"] { justify-content: flex-start !important; gap: 12px !important; }
html.sh26 body.cs-study #contact .btn:not(.btn--primary) { --lg-b-bg: var(--sh-paper); --lg-b-hover: var(--sh-ground); }

/* FAQ (Denmark) sits in the content column */
html.sh26 body.cs-study .svc-faq__list { display: block !important; gap: 0 !important; margin: 0 !important; }
html.sh26 body.cs-study .svc-faq__item {
  margin: 0 !important; padding: 28px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
html.sh26 body.cs-study .svc-faq__q {
  position: relative; margin: 0 0 10px !important; padding: 0 0 0 32px !important;
  font: 500 20px/1.35 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important;
}
html.sh26 body.cs-study .svc-faq__q::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat; mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 body.cs-study .svc-faq__a { margin: 0 !important; padding: 0 0 0 32px !important; max-width: 72ch; font: 400 17px/1.65 var(--sh-font) !important; color: var(--sh-body) !important; }

/* Denmark: the auto-advancing 3D walkthrough becomes a static, numbered
   five-step list. The step copy stays; the mock screens, rail, pulse, tilt
   and looping caption are switched off. */
html.sh26 body.cs-study .f3d { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; overflow: visible !important; box-shadow: none !important; }
html.sh26 body.cs-study .f3d__stage { perspective: none !important; padding: 0 !important; background: none !important; min-height: 0 !important; }
html.sh26 body.cs-study .f3d__deck {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; height: auto !important;
  transform: none !important; transition: none !important; transform-style: flat !important;
}
html.sh26 body.cs-study .f3d__card,
html.sh26 body.cs-study .f3d__card.is-active,
html.sh26 body.cs-study .f3d__card.is-done {
  position: relative !important; inset: auto !important; display: grid !important; grid-template-columns: 64px minmax(0, 1fr) !important; gap: 0 12px !important;
  width: auto !important; max-width: none !important; height: auto !important; opacity: 1 !important; transform: none !important; transition: none !important; box-shadow: none !important;
  padding: 28px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important; border-radius: 0 !important;
}
html.sh26 body.cs-study .f3d__card > * { grid-column: 2; }
html.sh26 body.cs-study .f3d__mini,
html.sh26 body.cs-study .f3d__rail,
html.sh26 body.cs-study .f3d__pulse,
html.sh26 body.cs-study .f3d__hud { display: none !important; }
html.sh26 body.cs-study .f3d__num,
html.sh26 body.cs-study .f3d__card.is-done .f3d__num {
  grid-column: 1 !important; grid-row: 1 / span 3; display: block !important; width: auto !important; height: auto !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important;
  font: 500 clamp(26px, 2.2vw, 32px)/1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important;
}
html.sh26 body.cs-study .f3d__card h3 { margin: 0 0 8px !important; color: var(--sh-ink) !important; font: 500 20px/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; }
html.sh26 body.cs-study .f3d__card p { margin: 0 !important; color: var(--sh-body) !important; font: 400 16px/1.6 var(--sh-font) !important; }

@media (max-width: 640px) {
  html.sh26 body.cs-study .svc-hero__btns { padding-left: 0 !important; }
  html.sh26 body.cs-study .svc-lead { font-size: 18px !important; }
  html.sh26 body.cs-study #contact .container > div[style*="background"] { padding: 32px 24px !important; }
  html.sh26 body.cs-study #contact .container > div[style*="background"]::after { display: none; }
  html.sh26 body.cs-study .f3d__card { grid-template-columns: 48px minmax(0, 1fr) !important; }
}

/* the confidential-engagement notice (one page): a compact blue-tile panel right under
   the hero; the padlock emoji gives way to a Lucide line lock (soft-icons rule) */
html.sh26 body.cs-study .svc-section:has(> .container > div[style*="#F1F6FA"]) { padding-top: 0 !important; padding-bottom: 0 !important; }
html.sh26 body.cs-study .svc-section .container > div[style*="#F1F6FA"] {
  max-width: none !important; margin: 0 !important; padding: clamp(22px, 2.4vw, 32px) clamp(24px, 3vw, 40px) !important; gap: 18px !important; align-items: center !important;
  background: var(--sh-blue-tile) !important; border: 0 !important; border-radius: var(--sh-r-card) !important;
}
html.sh26 body.cs-study .svc-section .container > div[style*="#F1F6FA"] > span:first-child {
  position: relative; display: block; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--sh-paper);
  font-size: 0 !important; color: transparent !important; overflow: hidden;
}
html.sh26 body.cs-study .svc-section .container > div[style*="#F1F6FA"] > span:first-child::before {
  content: ""; position: absolute; inset: 13px; background: var(--sh-blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html.sh26 body.cs-study .svc-section .container > div[style*="#F1F6FA"] > div > div:first-child { font: 500 16px/1.35 var(--sh-font) !important; color: var(--sh-blue-ink) !important; }
html.sh26 body.cs-study .svc-section .container > div[style*="#F1F6FA"] > div > div:last-child { max-width: 90ch; font: 400 15.5px/1.55 var(--sh-font) !important; color: var(--sh-body) !important; }
/* a list written as the lead: blue dots */
html.sh26 body.cs-study ul.svc-lead { list-style: none !important; padding: 0 !important; margin: -16px 0 40px !important; display: grid; gap: 10px; }
html.sh26 body.cs-study ul.svc-lead > li { position: relative; padding-left: 24px; font: 400 var(--sh-text)/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body.cs-study ul.svc-lead > li::before { content: ""; position: absolute; left: 3px; top: calc(.5lh - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue); }
/* ---------- G. resources (body.sh26-res): split heads, sand cards, a sand-band rhythm ---------- */
html.sh26 body.sh26-res main .container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
html.sh26 body.sh26-res .resources-hero {
  background: var(--sh-ground) !important; border: 0 !important; text-align: left !important; padding: var(--lg-top) 0 clamp(72px, 8vw, 128px) !important;
}
html.sh26 body.sh26-res .resources-hero::before,
html.sh26 body.sh26-res .resources-hero::after { content: none !important; display: none !important; }
html.sh26 body.sh26-res .resources-hero h1 { margin: 0 0 clamp(36px, 4.4vw, 64px) !important; max-width: 13em !important; }
html.sh26 body.sh26-res .resources-section,
html.sh26 body.sh26-res .resources-section:nth-child(even) { background: var(--sh-ground) !important; padding: var(--lg-sec) 0 !important; border: 0 !important; }
html.sh26 body.sh26-res .resources-section:nth-of-type(odd) { background: var(--sh-sand) !important; }
/* section head: label and title left, the line of explanation right */
html.sh26 body.sh26-res .resources-section__header { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sh-gap); margin: 0 0 clamp(44px, 5vw, 72px) !important; max-width: none !important; text-align: left !important; }
html.sh26 body.sh26-res .resources-section .resources-section__label {
  display: inline-flex !important; align-items: center; gap: 10px; justify-self: start; margin: 0 0 22px !important;
  background: none !important; border: 0 !important; padding: 0 !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 body.sh26-res .resources-section .resources-section__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue); }
html.sh26 body.sh26-res .resources-section h2 {
  margin: 0 !important; max-width: 14em; text-align: left !important;
  font: 500 clamp(34px, 4.4vw, 64px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body.sh26-res .resources-section__sub { margin: 20px 0 0 !important; max-width: 52ch !important; text-align: left !important; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
@media (min-width: 1024px) {
  html.sh26 body.sh26-res .resources-section__header { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  html.sh26 body.sh26-res .resources-section__header > * { grid-column: 1 / span 7; }
  html.sh26 body.sh26-res .resources-section__header > .resources-section__sub { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; margin: 0 !important; }
}
/* cards: sand (white on a sand band), 24px radius, no border, no lift */
html.sh26 body.sh26-res .resource-cards { display: grid !important; gap: var(--sh-gap) !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important; }
html.sh26 body.sh26-res .resource-card,
html.sh26 body.sh26-res .resources-section:nth-child(even) .resource-card {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; min-height: 280px;
  padding: clamp(26px, 2.6vw, 38px) !important; background: var(--lg-card) !important; border: 0 !important;
  border-radius: var(--sh-r-card) !important; box-shadow: none !important; transform: none !important; text-decoration: none !important;
  transition: background-color var(--sh-fast) ease !important;
}
html.sh26 body.sh26-res .resource-card:hover { background: var(--lg-card-hover) !important; border: 0 !important; box-shadow: none !important; transform: none !important; }
html.sh26 body.sh26-res .resource-card__tag {
  display: inline-flex !important; align-items: center; min-height: 30px; margin: 0 0 32px !important; padding: 0 12px !important;
  background: var(--sh-blue-tile) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important;
  font: 500 13.5px/1.2 var(--sh-font) !important; letter-spacing: -0.005em !important; text-transform: none !important; color: var(--sh-blue-ink) !important;
}
html.sh26 body.sh26-res .resource-card__title { margin: 0 0 12px !important; font: 500 clamp(22px, 1.9vw, 27px)/1.15 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-res .resource-card:hover .resource-card__title { color: var(--sh-blue) !important; }
html.sh26 body.sh26-res .resource-card__desc { margin: 0 0 24px !important; font: 400 15.5px/1.55 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-res .resource-card__cta { margin-top: auto !important; display: inline-flex !important; align-items: center; gap: 8px; font: 500 15px/1.2 var(--sh-font) !important; color: var(--sh-blue) !important; }
/* cost table: .sh-table look */
html.sh26 body.sh26-res main div[style*="overflow-x"] { -webkit-overflow-scrolling: touch; margin-top: clamp(48px, 5vw, 72px); }
html.sh26 body.sh26-res .cost-table { width: 100% !important; min-width: 640px; border-collapse: separate !important; border-spacing: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; font-family: var(--sh-font) !important; }
html.sh26 body.sh26-res .cost-table th {
  padding: 15px 18px !important; background: var(--sh-sand) !important; color: var(--sh-ink) !important; border: 0 !important;
  font: 500 14.5px/1.35 var(--sh-font) !important; letter-spacing: -0.005em !important; text-transform: none !important; text-align: left !important;
}
html.sh26 body.sh26-res .cost-table th:first-child { border-radius: var(--sh-r-field) 0 0 var(--sh-r-field) !important; }
html.sh26 body.sh26-res .cost-table th:last-child { border-radius: 0 var(--sh-r-field) var(--sh-r-field) 0 !important; }
html.sh26 body.sh26-res .resources-section:nth-of-type(odd) .cost-table th { background: var(--sh-paper) !important; }
html.sh26 body.sh26-res .cost-table td { padding: 18px !important; color: var(--sh-body) !important; font-size: 16px !important; border: 0 !important; border-bottom: 1px solid var(--sh-line) !important; background: none !important; }
html.sh26 body.sh26-res .cost-table td:first-child { color: var(--sh-ink) !important; font-weight: 500; }
html.sh26 body.sh26-res .cost-table td a { color: var(--sh-blue) !important; }
html.sh26 body.sh26-res main div[style*="overflow-x"] + p { margin-top: 20px !important; font-size: 15px !important; color: var(--sh-muted) !important; }
/* glossary: ruled rows in two columns */
html.sh26 body.sh26-res .glossary-grid { display: grid !important; gap: 0 clamp(32px, 4vw, 64px) !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)) !important; }
html.sh26 body.sh26-res .glossary-item { padding: 26px 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--sh-rule) !important; border-radius: 0 !important; box-shadow: none !important; }
html.sh26 body.sh26-res .glossary-item dt { margin: 0 0 8px !important; font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--sh-display) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-res .glossary-item dd { margin: 0 !important; font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
/* closing CTA: the sand panel, text left, a blue line icon top right */
html.sh26 body.sh26-res .resources-cta { background: var(--sh-ground) !important; padding: var(--lg-sec) 0 !important; text-align: left !important; border: 0 !important; }
html.sh26 body.sh26-res .resources-cta::before,
html.sh26 body.sh26-res .resources-cta::after { content: none !important; display: none !important; }
html.sh26 body.sh26-res .resources-cta .container {
  position: relative; width: calc(100% - 2 * var(--sh-gutter)) !important; max-width: var(--sh-container) !important;
  padding: clamp(36px, 4.6vw, 68px) clamp(96px, 12vw, 180px) clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important;
  background: var(--sh-sand) !important; border-radius: var(--sh-r-card) !important;
}
html.sh26 body.sh26-res .resources-cta .container::after {
  content: ""; position: absolute; top: clamp(32px, 4vw, 60px); right: clamp(28px, 4vw, 60px);
  width: clamp(48px, 5vw, 76px); height: clamp(48px, 5vw, 76px); background: var(--sh-blue);
  -webkit-mask: var(--lg-i-cal) center / contain no-repeat; mask: var(--lg-i-cal) center / contain no-repeat;
}
html.sh26 body.sh26-res .resources-cta h2 {
  margin: 0 0 20px !important; max-width: 15em; text-align: left !important;
  font: 500 clamp(34px, 4vw, 60px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body.sh26-res .resources-cta p,
html.sh26 body.sh26-res .resources-cta [style*="color"] {
  color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important;
  max-width: 58ch !important; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; opacity: 1 !important;
}
html.sh26 body.sh26-res .resources-cta div[style*="justify-content"],
html.sh26 body.sh26-res .resources-cta div[style*="display:flex"] { justify-content: flex-start !important; gap: 12px !important; margin-top: 32px !important; }
html.sh26 body.sh26-res main .resources-cta .btn:not(.btn--white) { --lg-b-bg: var(--sh-paper); --lg-b-hover: var(--sh-ground); }
@media (max-width: 640px) {
  html.sh26 body.sh26-res .resources-cta .container { padding: 32px 24px !important; }
  html.sh26 body.sh26-res .resources-cta .container::after { display: none; }
  html.sh26 body.sh26-res .resource-card { min-height: 0; }
}
/* ---------- H. press (body.sh26-press): sidehead sections, Fraunces facts, sand panels ----------
   The sections sit inside one container, so they cannot be full-bleed bands:
   each is a sidehead (the H2 sticks left) separated by generous space. */
html.sh26 body.sh26-press main .container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
html.sh26 body.sh26-press .press-hero { background: var(--sh-ground) !important; border: 0 !important; text-align: left !important; padding: var(--lg-top) 0 clamp(56px, 6vw, 96px) !important; }
html.sh26 body.sh26-press .press-hero::before,
html.sh26 body.sh26-press .press-hero::after { content: none !important; display: none !important; }
html.sh26 body.sh26-press .press-hero h1 { margin: 0 0 clamp(36px, 4.4vw, 64px) !important; }
html.sh26 body.sh26-press .press-section { padding: clamp(56px, 6vw, 96px) 0 !important; border: 0 !important; background: none !important; }
html.sh26 body.sh26-press .press-section:last-child { padding-bottom: var(--lg-sec) !important; }
html.sh26 body.sh26-press .press-section h2 {
  margin: 0 0 28px !important; max-width: 14em; text-align: left !important;
  font: 500 clamp(32px, 3vw, 46px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
@media (min-width: 1024px) {
  html.sh26 body.sh26-press .press-section:not(:has(> .press-contact)) {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); row-gap: 0; align-items: start;
  }
  html.sh26 body.sh26-press .press-section:not(:has(> .press-contact)) > * { grid-column: 5 / -1; min-width: 0; }
  html.sh26 body.sh26-press .press-section:not(:has(> .press-contact)) > h2 {
    grid-column: 1 / span 4; grid-row: 1 / span 40; position: sticky; top: calc(var(--sh-hdr, 76px) + 40px); margin: 0 !important; padding-right: 16px;
  }
}
html.sh26 body.sh26-press .press-section h3 { margin: 0 0 10px !important; font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--sh-display) !important; letter-spacing: -0.015em !important; text-transform: none !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-press .press-section p,
html.sh26 body.sh26-press .press-section li { font-size: 17px; line-height: 1.62; color: var(--sh-body); }
html.sh26 body.sh26-press .press-section > p[style*="color"] { max-width: 62ch; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
/* company at a glance: values in Fraunces on a ruled grid */
html.sh26 body.sh26-press .press-stats { display: grid !important; gap: 0 var(--sh-gap) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin: 0 !important; border: 0 !important; }
@media (min-width: 700px) { html.sh26 body.sh26-press .press-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
html.sh26 body.sh26-press .press-stat {
  text-align: left !important; padding: 24px 0 28px !important; background: none !important; border: 0 !important; border-top: 1px solid var(--sh-rule) !important;
  border-radius: 0 !important; box-shadow: none !important;
}
html.sh26 body.sh26-press .press-stat__num {
  display: block !important; margin: 0 0 8px !important; font: 500 clamp(30px, 3vw, 44px)/1.05 var(--sh-display) !important; letter-spacing: -0.02em !important;
  color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
}
html.sh26 body.sh26-press .press-stat__label { display: block !important; font: 400 15px/1.45 var(--sh-font) !important; color: var(--sh-muted) !important; }
/* boilerplate copy blocks: sand panels */
html.sh26 body.sh26-press .press-copy {
  max-width: none !important; margin: 0 0 var(--sh-gap) !important; padding: clamp(26px, 3vw, 40px) !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.sh26-press .press-copy__label {
  display: inline-flex !important; align-items: center; gap: 10px; margin: 0 0 14px !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 body.sh26-press .press-copy__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue); }
html.sh26 body.sh26-press .press-copy p { margin: 0 !important; font: 400 17px/1.65 var(--sh-font) !important; color: var(--sh-ink) !important; }
/* services: chips */
html.sh26 body.sh26-press .services-list { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; line-height: 1.2; }
html.sh26 body.sh26-press .service-tag {
  display: inline-flex !important; align-items: center !important; min-height: 40px; padding: 0 18px !important; margin: 0 !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important;
  font: 500 15.5px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-ink) !important; text-decoration: none !important; white-space: nowrap;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 body.sh26-press .service-tag:hover { background: var(--sh-blue-tile) !important; color: var(--sh-blue-ink) !important; }
html.sh26 body.sh26-press .service-tag::after { content: none !important; }
/* markets and clients: the inline boxes become sand cards */
html.sh26 body.sh26-press .press-section div[style*="grid-template-columns"] { gap: var(--sh-gap) !important; }
html.sh26 body.sh26-press .press-section div[style*="background:var(--clr-bg-2)"] {
  padding: clamp(24px, 2.6vw, 34px) !important; background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.sh26-press .press-section div[style*="background:var(--clr-bg-2)"] p { margin: 0 !important; font-size: 16px !important; color: var(--sh-body) !important; }
/* fast facts: blue dot rows (the triangle glyph is hidden, the dot drawn) */
html.sh26 body.sh26-press .press-section ul[style*="display:grid"] { gap: 0 var(--sh-gap) !important; }
html.sh26 body.sh26-press .press-section li[style*="display:flex"] {
  position: relative; display: block !important; padding: 16px 0 16px 24px !important; border-bottom: 1px solid var(--sh-line);
  font: 400 16.5px/1.55 var(--sh-font) !important; color: var(--sh-body) !important;
}
html.sh26 body.sh26-press .press-section li[style*="display:flex"] > span[style*="color"] {
  position: absolute; left: 2px; top: calc(16px + .5lh - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue);
  font-size: 0 !important; color: transparent !important; overflow: hidden;
}
/* logo swatches: the plain card shows the logo on ink, the --dark one (confusingly) on white */
html.sh26 body.sh26-press .logo-grid { gap: var(--sh-gap) !important; }
html.sh26 body.sh26-press .logo-card { background: var(--sh-ink) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; }
html.sh26 body.sh26-press .logo-card.logo-card--dark { background: var(--sh-sand) !important; }
/* press contact: the sand panel (was a dark slab) */
html.sh26 body.sh26-press .press-contact {
  position: relative; --clr-text: var(--sh-ink); margin: 0 !important; padding: clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; color: var(--sh-body) !important;
}
html.sh26 body.sh26-press .press-contact h2 { max-width: none; margin: 0 0 16px !important; font-size: clamp(34px, 4vw, 60px) !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; }
html.sh26 body.sh26-press .press-contact p,
html.sh26 body.sh26-press .press-contact__detail { color: var(--sh-body) !important; }
html.sh26 body.sh26-press .press-contact > p:first-of-type { max-width: 60ch; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-press .press-contact__detail svg { color: var(--sh-blue) !important; stroke: currentColor; }
html.sh26 body.sh26-press .press-contact a:not(.btn) { color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgba(10, 110, 158, .35); }
html.sh26 body.sh26-press .press-contact strong { color: var(--sh-ink) !important; }
/* ---------- I. legal pages (body.sh26-legal): a calm, readable document ----------
   Presentation only: the text (and section 8 of the terms) is untouched.
   A big Fraunces title, the contents in a sticky sand panel at 1024px+, the
   sections at a 70ch measure with blue section numbers. */
html.sh26 body.sh26-legal .legal-page { padding: clamp(56px, 7vw, 112px) 0 var(--lg-sec) !important; background: transparent !important; }
html.sh26 body.sh26-legal .legal-page .container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
html.sh26 body.sh26-legal .legal-header { margin: 0 0 clamp(48px, 5vw, 80px) !important; padding: 0 !important; border: 0 !important; max-width: 900px; background: none !important; }
html.sh26 body.sh26-legal .legal-header h1 { margin: 0 0 clamp(28px, 3vw, 44px) !important; }
html.sh26 body.sh26-legal .legal-header p { margin: 0 0 4px !important; font: 400 15.5px/1.6 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-legal .legal-header p:last-child { margin-top: 24px !important; max-width: 62ch; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-legal .legal-header p strong { color: var(--sh-ink) !important; font-weight: 500 !important; }
html.sh26 body.sh26-legal .legal-toc {
  margin: 0 0 48px !important; padding: clamp(24px, 2.4vw, 32px) !important; background: var(--sh-sand) !important;
  border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.sh26-legal .legal-toc h2 {
  margin: 0 0 14px !important; font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 body.sh26-legal .legal-toc ol { display: grid !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: lg-toc; }
html.sh26 body.sh26-legal .legal-toc ol li { counter-increment: lg-toc; display: flex; gap: 10px; margin: 0 !important; font-size: 15px; line-height: 1.4; }
html.sh26 body.sh26-legal .legal-toc ol li::before { content: counter(lg-toc); flex: none; min-width: 1.6em; padding-top: 5px; font: 500 13px/1.4 var(--sh-font); color: var(--sh-blue); }
html.sh26 body.sh26-legal .legal-toc ol li a {
  display: block; padding: 4px 0 !important; font: 400 15px/1.4 var(--sh-font) !important; color: var(--sh-body) !important; text-decoration: none !important;
}
html.sh26 body.sh26-legal .legal-toc ol li a:hover { color: var(--sh-blue) !important; text-decoration: underline !important; text-underline-offset: .22em !important; }
html.sh26 body.sh26-legal .legal-section { margin: 0 0 12px !important; max-width: 72ch; scroll-margin-top: 110px; }
html.sh26 body.sh26-legal .legal-section h2 {
  display: flex !important; align-items: baseline !important; gap: 16px !important; margin: 0 0 18px !important; padding-top: 0 !important;
  font: 500 clamp(26px, 2.4vw, 34px)/1.12 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body.sh26-legal .legal-section h2 .sec-num {
  display: inline !important; width: auto !important; height: auto !important; background: none !important; border-radius: 0 !important;
  font: 500 clamp(26px, 2.4vw, 34px)/1 var(--sh-display) !important; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important;
}
html.sh26 body.sh26-legal .legal-section h3 { margin: 26px 0 10px !important; font: 500 20px/1.3 var(--sh-font) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-legal .legal-section p,
html.sh26 body.sh26-legal .legal-section ul li,
html.sh26 body.sh26-legal .legal-section ol li { font: 400 var(--sh-text)/1.7 var(--sh-font) !important; letter-spacing: -0.01em !important; color: var(--sh-body) !important; }
html.sh26 body.sh26-legal .legal-section p { margin: 0 0 16px !important; }
html.sh26 body.sh26-legal .legal-section ul { list-style: none !important; margin: 0 0 18px !important; padding: 0 !important; }
html.sh26 body.sh26-legal .legal-section ul li { position: relative; margin: 0 0 8px !important; padding-left: 24px !important; }
html.sh26 body.sh26-legal .legal-section ul li::before { content: ""; position: absolute; left: 3px; top: calc(.5lh - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--sh-blue); }
html.sh26 body.sh26-legal .legal-section ol li::marker { color: var(--sh-blue) !important; font-weight: 500; }
html.sh26 body.sh26-legal .legal-section strong { color: var(--sh-ink) !important; font-weight: 600 !important; }
html.sh26 body.sh26-legal .legal-section a { color: var(--sh-blue) !important; text-decoration: underline; text-underline-offset: .22em; text-decoration-color: rgba(10, 110, 158, .35); }
html.sh26 body.sh26-legal .legal-divider { margin: 40px 0 !important; border: 0 !important; border-top: 1px solid var(--sh-line) !important; max-width: 72ch; }
html.sh26 body.sh26-legal .legal-contact-box {
  max-width: 72ch; margin-top: 48px !important; padding: clamp(28px, 3vw, 44px) !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.sh26-legal .legal-contact-box h3 { margin: 0 0 12px !important; font: 500 clamp(24px, 2.2vw, 30px)/1.15 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-legal .legal-contact-box p { font: 400 16.5px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body.sh26-legal .legal-contact-box a { color: var(--sh-blue) !important; }
@media (min-width: 1024px) {
  html.sh26 body.sh26-legal .legal-page .container {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; column-gap: var(--sh-gap) !important; row-gap: 0 !important; align-items: start;
  }
  html.sh26 body.sh26-legal .legal-page .container > * { grid-column: 5 / -1; }
  html.sh26 body.sh26-legal .legal-page .container > .legal-header { grid-column: 1 / -1; grid-row: 1; }
  html.sh26 body.sh26-legal .legal-page .container > .legal-toc { grid-column: 1 / span 3; grid-row: 2 / span 60; position: sticky; top: calc(var(--sh-hdr, 76px) + 32px); align-self: start; margin: 0 !important; }
}
/* ---------- J. UK local SEO hub (main.ls, over local-seo.css) ----------
   local-seo.css is driven by custom properties, so the palette is restated at
   them; then weichie's rhythm: the label, a huge title, the ratings as quiet
   proof under the pills, ground and sand bands, sand (or white) cards with
   no borders, the giant "Shine bright, locally." title, quotes in Fraunces
   italic, plain figures, the .sh-table look, the accordion, a sand closing panel. */
html.sh26 body main.ls {
  --bg: var(--sh-ground); --ink: var(--sh-ink); --ink-soft: var(--sh-body); --line: rgba(11, 14, 18, .12);
  --green: var(--sh-blue); --green-hover: var(--sh-blue-ink); --star: var(--sh-star);
  --lg-card: var(--sh-sand); --lg-pill: var(--sh-sand); --lg-pill-hover: var(--sh-sand-2);
  background: var(--sh-ground) !important; color: var(--sh-body); font-family: var(--sh-font) !important;
}
html.sh26 body main.ls .ls-container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
html.sh26 body main.ls > section { background: var(--sh-ground) !important; border: 0 !important; padding-top: var(--lg-sec) !important; padding-bottom: var(--lg-sec) !important; overflow: visible !important; }
html.sh26 body main.ls > :is(.ls-offers, .ls-services, .ls-stats, .ls-faq) { background: var(--sh-sand) !important; --lg-card: var(--sh-paper); --lg-pill: var(--sh-paper); --lg-pill-hover: var(--sh-ground); }
html.sh26 body main.ls :is(.ls-platform__burst, .ls-cta__burst, .ls-stat__deco, .ls-dot) { display: none !important; animation: none !important; }
html.sh26 body main.ls .ls-tag {
  display: inline-flex !important; align-items: center; width: auto !important; min-height: 30px; margin: 0 0 26px !important; padding: 0 12px !important;
  background: var(--sh-blue-tile) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important;
  font: 500 13.5px/1.2 var(--sh-font) !important; letter-spacing: -0.005em !important; text-transform: none !important; color: var(--sh-blue-ink) !important;
}
html.sh26 body main.ls > section:not(.ls-hero) .ls-badge {
  display: inline-flex !important; align-items: center !important; gap: 10px !important; margin: 0 0 22px !important; padding: 0 !important; background: none !important; border: 0 !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 body main.ls > section:not(.ls-hero) .ls-badge::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--sh-blue);
  -webkit-mask: var(--lg-i-label) center / contain no-repeat; mask: var(--lg-i-label) center / contain no-repeat;
}

/* hero: label, huge title, lead, pill, then the ratings as quiet proof */
html.sh26 body main.ls .ls-hero { padding-top: var(--lg-top) !important; text-align: left !important; }
html.sh26 body main.ls .ls-hero .ls-container { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; }
html.sh26 body main.ls .ls-hero .ls-badge { order: 1; }
html.sh26 body main.ls .ls-hero__title { order: 2; }
html.sh26 body main.ls .ls-hero__sub { order: 3; }
html.sh26 body main.ls .ls-hero .ls-btn { order: 4; margin: 36px 0 0 36px !important; }
html.sh26 body main.ls .ls-ratings { order: 5; justify-content: flex-start !important; margin: clamp(48px, 5vw, 72px) 0 0 !important; padding: 26px 0 0 !important; border-top: 1px solid var(--sh-rule); gap: 16px clamp(28px, 4vw, 56px) !important; }
html.sh26 body main.ls .ls-hero__geo { order: 6; text-align: left !important; margin-top: 22px !important; font: 400 15px/1.5 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body main.ls .ls-hero__title {
  margin: 0 0 clamp(40px, 5vw, 72px) !important; max-width: 13em !important; white-space: normal !important; text-align: left !important;
  font: 500 var(--sh-h1)/1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
}
html.sh26 body main.ls .ls-hero__title :is(.ls-w, .ls-w > span) { display: inline !important; overflow: visible !important; transform: none !important; animation: none !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; }
html.sh26 body main.ls .ls-rating__score { font: 500 15px/1.2 var(--sh-font) !important; color: var(--sh-ink) !important; }
html.sh26 body main.ls .ls-rating__meta a { color: var(--sh-blue) !important; }

/* pills: blue with a white icon circle; the light pill is sand with a blue one (its own arrow svg becomes the circle) */
html.sh26 body main.ls :is(.ls-btn, .ls-btn-pill) {
  display: inline-flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; min-height: 52px;
  padding: 8px 8px 8px 24px !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important; transform: none !important;
  font: 500 16px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; text-decoration: none !important; transition: background-color var(--sh-fast) ease !important;
}
html.sh26 body main.ls .ls-btn { background: var(--sh-blue) !important; color: var(--sh-paper) !important; }
html.sh26 body main.ls .ls-btn:hover { background: var(--sh-blue-ink) !important; }
html.sh26 body main.ls .ls-btn::after {
  content: "" !important; display: block !important; position: static !important; flex: none; width: 36px !important; height: 36px !important; border-radius: 50% !important; opacity: 1 !important;
  background: var(--lg-ic-up-b) center / 18px 18px no-repeat, var(--sh-paper) !important; transform: none; transition: transform .35s var(--sh-ease) !important;
}
html.sh26 body main.ls .ls-btn[href*="calendly"]::after { background: var(--lg-ic-cal-b) center / 18px 18px no-repeat, var(--sh-paper) !important; }
html.sh26 body main.ls .ls-btn[href^="#"]::after { background: var(--lg-ic-down-b) center / 18px 18px no-repeat, var(--sh-paper) !important; }
html.sh26 body main.ls .ls-btn:hover::after { transform: rotate(-12deg) !important; }
html.sh26 body main.ls :is(.ls-btn-pill, .ls-btn-pill--light) { background: var(--lg-pill) !important; color: var(--sh-ink) !important; }
html.sh26 body main.ls :is(.ls-btn-pill, .ls-btn-pill--light):hover { background: var(--lg-pill-hover) !important; color: var(--sh-ink) !important; }
html.sh26 body main.ls .ls-btn-pill svg {
  box-sizing: border-box; flex: none; width: 36px !important; height: 36px !important; padding: 10px; border-radius: 50%;
  background: var(--sh-blue); color: var(--sh-paper); transform: none !important; transition: transform .35s var(--sh-ease) !important;
}
html.sh26 body main.ls .ls-btn-pill:hover svg { transform: translateX(3px) !important; }
html.sh26 body main.ls .ls-btn-pill:not(:has(svg))::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lg-ic-down-w) center / 18px 18px no-repeat, var(--sh-blue);
  transition: transform .35s var(--sh-ease);
}
html.sh26 body main.ls .ls-btn-pill:not(:has(svg)):hover::after { transform: translateY(2px); }

/* section heads */
html.sh26 body main.ls :is(.ls-services__title, .ls-reviews__title, .ls-stats__title, .ls-compare__title, .ls-faq__title, .ls-enquiry__title, .ls-cta__title) {
  margin-left: 0 !important; margin-right: 0 !important; max-width: 15em; text-align: left !important;
  font: 500 clamp(34px, 4.4vw, 64px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; text-wrap: balance;
}
html.sh26 body main.ls :is(.ls-services__sub, .ls-stats__sub, .ls-compare__sub, .ls-faq__sub, .ls-enquiry__sub, .ls-cta__sub) {
  margin-left: 0 !important; margin-right: 0 !important; max-width: 58ch; text-align: left !important;
  font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
}
html.sh26 body main.ls :is(.ls-services__head, .ls-reviews__head) { text-align: left !important; margin: 0 0 clamp(44px, 5vw, 72px) !important; max-width: none !important; }
html.sh26 body main.ls :is(.ls-platform, .ls-stats, .ls-compare, .ls-faq, .ls-cta, .ls-audience, .ls-offers) .ls-container { text-align: left !important; }

/* audience and offer cards: sand (white on a sand band), no photos, no dark card */
html.sh26 body main.ls :is(.ls-audience__grid, .ls-offers__grid, .ls-services__grid) { gap: var(--sh-gap) !important; }
html.sh26 body main.ls :is(.ls-aud-card, .ls-aud-card--dark, .ls-offer, .ls-offer--api, .ls-offer--managed, .ls-svc-card) {
  background: var(--lg-card) !important; color: var(--sh-body) !important; border: 0 !important; border-radius: var(--sh-r-card) !important;
  box-shadow: none !important; transform: none !important; overflow: hidden; min-height: 0 !important;
}
html.sh26 body main.ls :is(.ls-aud-card, .ls-aud-card--dark, .ls-offer, .ls-svc-card)::before,
html.sh26 body main.ls :is(.ls-aud-card, .ls-aud-card--dark, .ls-offer, .ls-svc-card)::after { display: none !important; }
html.sh26 body main.ls .ls-aud-card__body { padding: clamp(28px, 3.4vw, 48px) !important; }
html.sh26 body main.ls :is(.ls-offer, .ls-offer--api, .ls-offer--managed) { padding: clamp(28px, 3.4vw, 48px) !important; }
html.sh26 body main.ls :is(.ls-aud-card__title, .ls-offer__title) {
  font: 500 clamp(28px, 2.8vw, 40px)/1.06 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
}
html.sh26 body main.ls :is(.ls-aud-card__text, .ls-aud-card--dark .ls-aud-card__text, .ls-offer__text, .ls-offer--managed .ls-offer__text, .ls-offer--api .ls-offer__text) {
  color: var(--sh-body) !important; font: 400 16.5px/1.6 var(--sh-font) !important; max-width: 52ch !important;
}
html.sh26 body main.ls .ls-offer__icon { width: 48px !important; height: 48px !important; padding: 12px; border-radius: 50%; background: var(--sh-blue-tile); color: var(--sh-blue) !important; stroke: currentColor; }
html.sh26 body main.ls .ls-offer__price { color: var(--sh-ink) !important; border-bottom: 0 !important; padding-bottom: 0 !important; font: 400 16px/1.4 var(--sh-font) !important; }
html.sh26 body main.ls .ls-offer__price strong { color: var(--sh-blue) !important; font: 500 clamp(30px, 3vw, 44px)/1.05 var(--sh-display) !important; letter-spacing: -0.02em; }
html.sh26 body main.ls .ls-offer--managed strong { color: var(--sh-blue) !important; }

/* "Shine bright, locally.": weichie's giant section title */
html.sh26 body main.ls .ls-platform__title {
  margin: 0 0 40px !important; max-width: 11em; text-align: left !important;
  font: 500 var(--sh-xl)/1 var(--sh-display) !important; letter-spacing: -0.03em !important; color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important;
  background: none !important;
}

/* services: four cards */
html.sh26 body main.ls .ls-svc-card__body { padding: clamp(26px, 2.6vw, 36px) !important; display: flex; flex-direction: column; height: 100%; }
html.sh26 body main.ls .ls-svc-card__title { margin: 0 0 12px !important; font: 500 clamp(22px, 1.9vw, 27px)/1.15 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body main.ls .ls-svc-card__lead { font: 500 16px/1.5 var(--sh-font) !important; color: var(--sh-ink) !important; }
html.sh26 body main.ls .ls-svc-card__text { color: var(--sh-body) !important; font: 400 15.5px/1.6 var(--sh-font) !important; }
html.sh26 body main.ls .ls-svc-card .ls-btn-pill { margin-top: auto !important; align-self: flex-start; }
html.sh26 body main.ls .ls-services .ls-svc-card:hover { transform: none !important; box-shadow: none !important; }

/* reviews: verbatim quotes in Fraunces italic, no faces */
html.sh26 body main.ls .ls-reviews__title svg { display: none !important; }
html.sh26 body main.ls .ls-reviews__title .ls-sr-only {
  position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important;
}
html.sh26 body main.ls .ls-reviews__head { display: block !important; }
html.sh26 body main.ls .ls-reviews__meta { justify-content: flex-start !important; display: block !important; margin: 22px 0 0 !important; }
html.sh26 body main.ls .ls-reviews__meta p { max-width: 58ch !important; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; text-align: left !important; }
html.sh26 body main.ls .ls-reviews__grid { gap: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 72px) !important; }
html.sh26 body main.ls .ls-review {
  display: block !important; padding: 26px 0 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--sh-rule) !important;
  border-radius: 0 !important; box-shadow: none !important; transform: none !important;
}
html.sh26 body main.ls .ls-review__photo { display: none !important; }
html.sh26 body main.ls .ls-review__stars svg path { fill: var(--sh-star) !important; }
html.sh26 body main.ls .ls-review blockquote {
  margin: 14px 0 18px !important; font: italic 400 clamp(22px, 2vw, 28px)/1.3 var(--sh-display) !important; letter-spacing: -0.01em !important; color: var(--sh-ink) !important;
}
html.sh26 body main.ls .ls-review__who strong { font: 500 15.5px/1.4 var(--sh-font) !important; color: var(--sh-ink) !important; }
html.sh26 body main.ls .ls-review__company { font: 400 14.5px/1.4 var(--sh-font) !important; color: var(--sh-muted) !important; }

/* stats: plain figures in Fraunces, no coloured bars */
html.sh26 body main.ls .ls-stats { text-align: left !important; }
html.sh26 body main.ls .ls-stats__bars {
  display: grid !important; height: auto !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 var(--sh-gap) !important;
  align-items: stretch !important; margin-top: clamp(44px, 5vw, 72px) !important;
}
html.sh26 body main.ls :is(.ls-stat, .ls-stat--big, .ls-stat--green, .ls-stat--yellow, .ls-stat--blue) {
  height: auto !important; min-height: 0 !important; padding: 26px 0 !important; background: none !important; border: 0 !important;
  border-top: 1px solid var(--sh-rule) !important; border-radius: 0 !important; box-shadow: none !important; color: var(--sh-ink) !important; display: block !important; transform: none !important;
}
html.sh26 body main.ls :is(.ls-stat__num, .ls-stat--big .ls-stat__num) {
  display: block !important; font: 500 clamp(48px, 5.6vw, 88px)/1 var(--sh-display) !important; letter-spacing: -0.03em !important;
  color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; background: none !important;
}
html.sh26 body main.ls :is(.ls-stat__label, .ls-stat--big .ls-stat__label, .ls-stat--blue .ls-stat__label) { margin: 14px 0 0 !important; font: 400 16px/1.45 var(--sh-font) !important; color: var(--sh-muted) !important; }

/* comparison table: the .sh-table look */
html.sh26 body main.ls .ls-compare__wrap { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; margin-top: clamp(36px, 4vw, 56px) !important; }
html.sh26 body main.ls .ls-table { background: none !important; border-collapse: separate !important; border-spacing: 0 !important; font-family: var(--sh-font) !important; }
html.sh26 body main.ls .ls-table thead th { background: var(--sh-sand) !important; color: var(--sh-ink) !important; font: 500 15px/1.35 var(--sh-font) !important; border: 0 !important; text-align: left !important; padding: 15px 18px !important; }
html.sh26 body main.ls .ls-table thead th:first-child { border-radius: var(--sh-r-field) 0 0 var(--sh-r-field) !important; }
html.sh26 body main.ls .ls-table thead th:last-child { border-radius: 0 var(--sh-r-field) var(--sh-r-field) 0 !important; }
html.sh26 body main.ls .ls-table tbody th { background: none !important; color: var(--sh-ink) !important; font: 500 16px/1.5 var(--sh-font) !important; text-align: left !important; border: 0 !important; border-bottom: 1px solid var(--sh-line) !important; padding: 18px !important; }
html.sh26 body main.ls .ls-table td { background: none !important; color: var(--sh-body) !important; font: 400 16px/1.5 var(--sh-font) !important; border: 0 !important; border-bottom: 1px solid var(--sh-line) !important; padding: 18px !important; }

/* FAQ and the enquiry: sidehead at 1024px+ (title and line left, the list or the form right) */
html.sh26 body main.ls .ls-faq__list { margin: 0 !important; max-width: none !important; }
@media (min-width: 1024px) {
  html.sh26 body main.ls :is(.ls-faq, .ls-enquiry) > .ls-container {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); row-gap: 0; align-items: start;
  }
  html.sh26 body main.ls :is(.ls-faq, .ls-enquiry) > .ls-container > * { grid-column: 6 / -1; grid-row: 1 / span 20; min-width: 0; }
  html.sh26 body main.ls :is(.ls-faq, .ls-enquiry) > .ls-container > :is(h2, p:first-of-type) { grid-column: 1 / span 4; grid-row: auto; }
  html.sh26 body main.ls :is(.ls-faq__title, .ls-enquiry__title) { margin-bottom: 22px !important; font-size: clamp(32px, 3vw, 46px) !important; }
}
html.sh26 body main.ls .ls-faq__item summary svg { display: none !important; }
html.sh26 body main.ls .sp-formwrap { margin-top: 0 !important; }

/* closing CTA: the sand panel */
html.sh26 body main.ls .ls-cta { color: var(--sh-ink) !important; padding-top: 0 !important; }
html.sh26 body main.ls .ls-cta > .ls-container {
  position: relative; width: calc(100% - 2 * var(--sh-gutter)) !important; max-width: var(--sh-container) !important;
  padding: clamp(36px, 4.6vw, 68px) clamp(96px, 12vw, 180px) clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important;
  background: var(--sh-sand) !important; border-radius: var(--sh-r-card) !important;
}
html.sh26 body main.ls .ls-cta > .ls-container::after {
  content: ""; position: absolute; top: clamp(32px, 4vw, 60px); right: clamp(28px, 4vw, 60px);
  width: clamp(48px, 5vw, 76px); height: clamp(48px, 5vw, 76px); background: var(--sh-blue);
  -webkit-mask: var(--lg-i-cal) center / contain no-repeat; mask: var(--lg-i-cal) center / contain no-repeat;
}
html.sh26 body main.ls .ls-cta__title { font-size: clamp(34px, 4vw, 60px) !important; }
html.sh26 body main.ls .ls-cta__actions { justify-content: flex-start !important; gap: 12px !important; }
html.sh26 body main.ls .ls-cta .ls-btn-pill { --lg-pill: var(--sh-paper); --lg-pill-hover: var(--sh-ground); background: var(--sh-paper) !important; }
html.sh26 body main.ls .ls-proof {
  justify-content: flex-start !important; color: var(--sh-muted) !important; background: none !important; border: 0 !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 24px !important;
}
html.sh26 body main.ls .ls-proof > span { background: none !important; border: 0 !important; padding: 0 12px 0 0 !important; }
html.sh26 body main.ls .ls-proof strong { color: var(--sh-ink) !important; }
html.sh26 body main.ls .ls-gstars svg path { fill: var(--sh-star) !important; }
html.sh26 body main.ls .ls-gstars svg:last-child path { fill: url(#hs) !important; }
@media (max-width: 860px) {
  html.sh26 body main.ls .ls-stats__bars { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  html.sh26 body main.ls .ls-hero .ls-btn { margin-left: 0 !important; }
  html.sh26 body main.ls .ls-cta > .ls-container { padding: 32px 24px !important; }
  html.sh26 body main.ls .ls-cta > .ls-container::after { display: none; }
}
/* ---------- K. home care landing page (body.sh26-hc, self-styled, own header and footer) ----------
   Its sheet is driven by custom properties, so the palette, radii, shadows and
   type are swapped at the variables (the green and the blue-to-green gradient
   become the brand blue), then the hard-coded pieces are reset: gradient text,
   the dark bands (demo, results, booking, footer, cookie bar) become ground
   and sand, the floating and pulsing loops stop. Markup, ids, the chat preview
   script, the consent logic and the tracking are untouched. */
html.sh26 body.sh26-hc {
  --blue: var(--sh-blue); --blue-700: var(--sh-blue-ink); --blue-050: var(--sh-blue-tile); --blue-100: rgba(10, 110, 158, .22);
  --emerald: var(--sh-blue); --emerald-500: var(--sh-blue); --emerald-050: var(--sh-blue-tile);
  --ink: var(--sh-ink); --slate-900: var(--sh-ink); --slate-800: var(--sh-body); --slate-700: var(--sh-body); --slate-600: var(--sh-muted); --slate-500: var(--sh-muted); --slate-400: var(--sh-muted);
  --bg: var(--sh-ground); --surface: var(--sh-sand); --surface-2: var(--sh-sand-2); --line: rgba(11, 14, 18, .12); --line-2: rgba(11, 14, 18, .08);
  --radius: 24px; --radius-sm: 18px; --radius-lg: 28px; --radius-xl: 28px;
  --sh-sm: none; --sh-md: none; --sh-lg: var(--sh-shadow);
  --grad: var(--sh-blue); --grad-soft: var(--sh-sand);
  --fh: var(--sh-display); --fb: var(--sh-font);
  --lg-card: var(--sh-sand);
  background: var(--sh-ground) !important; color: var(--sh-body) !important; font-family: var(--sh-font) !important; font-size: var(--sh-text) !important; letter-spacing: -0.01em;
}
html.sh26 body.sh26-hc .wrap { max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; }
html.sh26 body.sh26-hc section { padding-top: var(--lg-sec); padding-bottom: var(--lg-sec); }
html.sh26 body.sh26-hc :is(h1, h2, h3, h4, .h2) { font-family: var(--sh-display) !important; font-weight: 500 !important; letter-spacing: -0.02em !important; color: var(--sh-ink); }
html.sh26 body.sh26-hc h1 { font-size: var(--sh-h1) !important; line-height: 1 !important; }
html.sh26 body.sh26-hc .h2 { margin: 0 0 22px !important; font-size: clamp(34px, 4.6vw, 68px) !important; line-height: 1.04 !important; text-wrap: balance; }
html.sh26 body.sh26-hc h3 { font-size: clamp(21px, 1.8vw, 25px) !important; line-height: 1.2 !important; }
html.sh26 body.sh26-hc .sec-head { max-width: 900px !important; margin: 0 0 clamp(44px, 5vw, 72px) !important; text-align: left !important; }
html.sh26 body.sh26-hc .lead { max-width: 60ch; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
/* the gradient words: named reset, solid blue */
html.sh26 body.sh26-hc .grad-text,
html.sh26 body.sh26-hc [class*="grad"] h1 span {
  background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important;
}
/* section labels: uppercase, muted, a blue line arrow */
html.sh26 body.sh26-hc .eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 body.sh26-hc .eyebrow .dot { display: none !important; }
html.sh26 body.sh26-hc .eyebrow::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--sh-blue);
  -webkit-mask: var(--lg-i-label) center / contain no-repeat; mask: var(--lg-i-label) center / contain no-repeat;
}

/* own header: the ground, no rule; the CTA is the blue pill */
html.sh26 body.sh26-hc .hdr { background: rgba(251, 251, 248, .9) !important; border-bottom: 0 !important; box-shadow: none !important; }
html.sh26 body.sh26-hc .hdr .wrap { height: 76px !important; }
html.sh26 body.sh26-hc .hdr .lnk { font: 500 16px/1 var(--sh-font) !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc .hdr .lnk:hover { color: var(--sh-blue) !important; }

/* pills: blue with a white icon circle (the existing arrow svg becomes the
   circle), sand with a blue one; Fustat, never the display face */
html.sh26 body.sh26-hc .btn {
  gap: 16px !important; min-height: 52px; padding: 8px 24px !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important; transform: none !important;
  font: 500 16px/1.2 var(--sh-font) !important; letter-spacing: -0.01em !important; white-space: normal !important; transition: background-color var(--sh-fast) ease !important;
}
html.sh26 body.sh26-hc .btn:has(> svg:last-child),
html.sh26 body.sh26-hc .btn:not(:has(svg)) { padding-right: 8px !important; }
html.sh26 body.sh26-hc .btn > svg:last-child {
  box-sizing: border-box; width: 36px !important; height: 36px !important; padding: 9px; margin-right: 0; border-radius: 50%;
  background: var(--sh-paper); color: var(--sh-blue); transition: transform .35s var(--sh-ease);
}
html.sh26 body.sh26-hc .btn:hover > svg:last-child { transform: rotate(-45deg); }
html.sh26 body.sh26-hc .btn:not(:has(svg))::after {
  content: ""; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lg-ic-up-b) center / 18px 18px no-repeat, var(--sh-paper);
  transition: transform .35s var(--sh-ease);
}
html.sh26 body.sh26-hc .btn:not(:has(svg)):hover::after { transform: rotate(45deg); }
html.sh26 body.sh26-hc :is(.btn-primary, .btn-white) { background: var(--sh-blue) !important; color: var(--sh-paper) !important; }
html.sh26 body.sh26-hc :is(.btn-primary, .btn-white):hover { background: var(--sh-blue-ink) !important; transform: none !important; box-shadow: none !important; }
html.sh26 body.sh26-hc .btn-ghost { background: var(--lg-pill) !important; color: var(--sh-ink) !important; border: 0 !important; }
html.sh26 body.sh26-hc .btn-ghost:hover { background: var(--lg-pill-hover) !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc .btn-ghost > svg:last-child { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 body.sh26-hc .btn-ghost:not(:has(svg))::after { background: var(--lg-ic-up-w) center / 18px 18px no-repeat, var(--sh-blue); }
html.sh26 body.sh26-hc .btn-block { width: 100% !important; justify-content: space-between !important; }

/* hero: the plain ground; the chat preview keeps its frame, without the float or the glow */
html.sh26 body.sh26-hc .hero { background: var(--sh-ground) !important; padding-top: var(--lg-top) !important; padding-bottom: var(--lg-sec) !important; }
html.sh26 body.sh26-hc .hero h1 { margin: 22px 0 36px !important; }
html.sh26 body.sh26-hc .hero p.sub {
  position: relative; padding-left: 36px; max-width: 46ch !important; font: 500 var(--sh-lead)/var(--sh-lead-lh) var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important;
}
html.sh26 body.sh26-hc .hero p.sub::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat; mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 body.sh26-hc .hero-cta { gap: 12px !important; }
html.sh26 body.sh26-hc .microcopy { font: 400 15px/1.5 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-hc .microcopy svg,
html.sh26 body.sh26-hc .tbadge svg { color: var(--sh-blue) !important; }
html.sh26 body.sh26-hc .hero-badges { border-top: 0 !important; gap: 8px !important; }
html.sh26 body.sh26-hc .tbadge {
  min-height: 34px; padding: 0 14px !important; background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-pill) !important; box-shadow: none !important;
  font: 500 14px/1.2 var(--sh-font) !important; color: var(--sh-ink) !important;
}
html.sh26 body.sh26-hc .hc-glow,
html.sh26 body.sh26-hc #shPreloader { display: none !important; }
html.sh26 body.sh26-hc :is(.chat-mini, .cm-chip, .cm-status i, .dw-id span i, .cp-id span i, .sm-bubble, .chat-fab, .chat-fab::after) { animation: none !important; }
html.sh26 body.sh26-hc .chat-mini { border: 0 !important; border-radius: var(--sh-r-img) !important; box-shadow: none !important; background: var(--sh-paper) !important; outline: 10px solid var(--sh-sand); }
html.sh26 body.sh26-hc :is(.cm-head, .dw-head, .cp-head) { background: var(--sh-blue) !important; }
html.sh26 body.sh26-hc :is(.cm-head b, .dw-id b, .cp-id b) { font-family: var(--sh-font) !important; font-weight: 500 !important; }
html.sh26 body.sh26-hc .cm-body { background: var(--sh-ground) !important; }
html.sh26 body.sh26-hc :is(.msg, .dw-msg) { font-family: var(--sh-font) !important; border-radius: 18px !important; }
html.sh26 body.sh26-hc :is(.msg.bot, .dw-msg.bot) { border-bottom-left-radius: 6px !important; border-color: var(--sh-line) !important; }
html.sh26 body.sh26-hc :is(.msg.user, .dw-msg.user) { border-bottom-right-radius: 6px !important; }
html.sh26 body.sh26-hc .cm-booked { background: var(--sh-blue-tile) !important; border: 0 !important; color: var(--sh-blue-ink) !important; }
html.sh26 body.sh26-hc .cm-chip { box-shadow: none !important; border: 0 !important; background: var(--sh-sand) !important; font-family: var(--sh-font) !important; font-weight: 500 !important; }
html.sh26 body.sh26-hc .cm-chip svg { color: var(--sh-blue) !important; }

/* sand bands and the cards on them (white there, sand on the ground) */
html.sh26 body.sh26-hc :is(.proof, .faq) { background: var(--sh-sand) !important; --lg-card: var(--sh-paper); --lg-pill: var(--sh-paper); --lg-pill-hover: var(--sh-ground); }
html.sh26 body.sh26-hc :is(.card, .svc, .prob) {
  background: var(--lg-card) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; transform: none !important;
  padding: clamp(24px, 2.6vw, 36px) !important;
}
html.sh26 body.sh26-hc :is(.card, .svc, .prob):hover { transform: none !important; box-shadow: none !important; }
html.sh26 body.sh26-hc :is(.card, .svc, .prob) p { font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body.sh26-hc :is(.svc, .prob) h3 { font-size: clamp(20px, 1.6vw, 23px) !important; }
html.sh26 body.sh26-hc :is(.ic, .ic.em, .prob .ic, .svc .ic) {
  width: 48px !important; height: 48px !important; margin-bottom: 26px !important; border-radius: 50% !important; background: var(--sh-blue-tile) !important; color: var(--sh-blue) !important;
}
html.sh26 body.sh26-hc .ic svg { width: 22px !important; height: 22px !important; }
/* the blue gradient slab becomes the sand panel, text left */
html.sh26 body.sh26-hc .fix {
  margin-top: var(--sh-gap) !important; padding: clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important; text-align: left !important;
  background: var(--sh-sand) !important; color: var(--sh-body) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.sh26-hc .fix h3 { color: var(--sh-ink) !important; font-size: clamp(30px, 3.4vw, 48px) !important; line-height: 1.05 !important; max-width: 16em; }
html.sh26 body.sh26-hc .fix p { color: var(--sh-ink) !important; margin-left: 0 !important; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; }
/* steps: the line and the shadowed boxes go, the icon sits on the blue tile */
html.sh26 body.sh26-hc .steps::before { display: none !important; }
html.sh26 body.sh26-hc .step { padding-top: 28px; border-top: 1px solid var(--sh-rule); }
html.sh26 body.sh26-hc .step .num { width: 56px !important; height: 56px !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; background: var(--sh-blue-tile) !important; color: var(--sh-blue) !important; }
html.sh26 body.sh26-hc .step .k { font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important; }
/* the dark demo and results bands become the ground */
html.sh26 body.sh26-hc :is(.demo, .results) { background: var(--sh-ground) !important; background-image: none !important; color: var(--sh-body) !important; }
html.sh26 body.sh26-hc :is(.demo, .results) .h2 { color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc :is(.demo, .results) .lead { color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc :is(.demo-cap, .sm-caption, .res-note) { color: var(--sh-muted) !important; }
html.sh26 body.sh26-hc .demo-widget { border: 0 !important; border-radius: var(--sh-r-img) !important; box-shadow: none !important; outline: 10px solid var(--sh-sand); }
html.sh26 body.sh26-hc .dw-card { border-left-color: var(--sh-blue) !important; }
html.sh26 body.sh26-hc .dw-card .ch { color: var(--sh-blue-ink) !important; font-family: var(--sh-font) !important; font-weight: 500 !important; }
html.sh26 body.sh26-hc .site-mock { border: 0 !important; border-radius: var(--sh-r-img) !important; box-shadow: none !important; outline: 10px solid var(--sh-sand); }
html.sh26 body.sh26-hc .sm-bubble { box-shadow: none !important; }
html.sh26 body.sh26-hc .res { background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; backdrop-filter: none !important; text-align: left !important; }
/* named reset: the results numerals were a clipped blue-to-green gradient */
html.sh26 body.sh26-hc .res .n {
  font-family: var(--sh-display) !important; font-weight: 500 !important; background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important;
  color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important;
}
html.sh26 body.sh26-hc .res .c { color: var(--sh-body) !important; font-weight: 500 !important; }
html.sh26 body.sh26-hc .res-note { text-align: left !important; }
/* comparison table: the .sh-table look */
html.sh26 body.sh26-hc .cmp { max-width: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: none !important; overflow-x: auto !important; }
html.sh26 body.sh26-hc .cmp table { border-collapse: separate !important; border-spacing: 0 !important; min-width: 560px; }
html.sh26 body.sh26-hc .cmp thead th { background: var(--sh-sand) !important; color: var(--sh-ink) !important; font: 500 15px/1.35 var(--sh-font) !important; border: 0 !important; }
html.sh26 body.sh26-hc .cmp thead th:first-child { border-radius: var(--sh-r-field) 0 0 var(--sh-r-field); }
html.sh26 body.sh26-hc .cmp thead th:last-child { border-radius: 0 var(--sh-r-field) var(--sh-r-field) 0; }
html.sh26 body.sh26-hc .cmp thead th.ga { background: var(--sh-blue-tile) !important; color: var(--sh-blue-ink) !important; }
html.sh26 body.sh26-hc .cmp td { border-top: 0 !important; border-bottom: 1px solid var(--sh-line) !important; padding: 18px 20px !important; }
html.sh26 body.sh26-hc .cmp td.ga { background: none !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc .cmp td .yes { color: var(--sh-blue) !important; }
/* FAQ: the accordion from section A, in a left column */
html.sh26 body.sh26-hc .faq-list { max-width: 900px !important; margin: 0 !important; gap: 0 !important; }
/* the written-quote panel */
html.sh26 body.sh26-hc .guarantee {
  max-width: none !important; margin: 0 !important; padding: clamp(28px, 3.4vw, 48px) !important; text-align: left !important; align-items: flex-start !important;
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important;
}
html.sh26 body.sh26-hc .guarantee .shield { width: 56px !important; height: 56px !important; border: 0 !important; border-radius: 50% !important; box-shadow: none !important; background: var(--sh-blue-tile) !important; color: var(--sh-blue) !important; }
/* booking band: sand, not dark */
html.sh26 body.sh26-hc .final { background: var(--sh-sand) !important; background-image: none !important; color: var(--sh-body) !important; }
html.sh26 body.sh26-hc .final .h2 { color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc .final :is(.lead, .eyebrow) { color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc .final .eyebrow { color: var(--sh-muted) !important; }
html.sh26 body.sh26-hc .final ul.win li { color: var(--sh-body) !important; }
html.sh26 body.sh26-hc .final ul.win svg { color: var(--sh-blue) !important; }
html.sh26 body.sh26-hc .book-card { background: var(--sh-paper) !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; }
html.sh26 body.sh26-hc .book-embed { border: 0 !important; border-radius: var(--sh-r-field) !important; background: var(--sh-ground) !important; }
html.sh26 body.sh26-hc .callrow a { font-family: var(--sh-font) !important; font-weight: 500 !important; color: var(--sh-blue) !important; }
/* own footer: sand, like the site footer */
html.sh26 body.sh26-hc footer { background: var(--sh-sand) !important; color: var(--sh-body) !important; padding: clamp(64px, 7vw, 104px) 0 40px !important; }
html.sh26 body.sh26-hc footer .fc a { color: var(--sh-ink) !important; }
html.sh26 body.sh26-hc footer .fc a:hover { color: var(--sh-blue) !important; }
html.sh26 body.sh26-hc footer .fh { font-family: var(--sh-display) !important; font-size: 18px !important; letter-spacing: -0.01em !important; text-transform: none !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-hc footer .fbar { border-top: 1px solid var(--sh-rule) !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-hc footer .fbar a { color: var(--sh-muted) !important; }
/* chat preview launcher and panel */
html.sh26 body.sh26-hc .chat-fab { background: var(--sh-blue) !important; box-shadow: var(--sh-shadow) !important; border-radius: var(--sh-r-pill) !important; font: 500 15.5px/1 var(--sh-font) !important; }
html.sh26 body.sh26-hc .chat-fab:hover { background: var(--sh-blue-ink) !important; transform: none !important; }
html.sh26 body.sh26-hc .chat-panel { border: 0 !important; border-radius: var(--sh-r-card) !important; }
html.sh26 body.sh26-hc .cp-replay { font-family: var(--sh-font) !important; border-radius: var(--sh-r-pill) !important; }
html.sh26 body.sh26-hc .modal-card { border-radius: var(--sh-r-card) !important; }
html.sh26 body.sh26-hc .modal-card .badge { background: var(--sh-blue-tile) !important; color: var(--sh-blue-ink) !important; }
/* cookie bar: a light bar, the blue pill to accept */
html.sh26 body.sh26-hc #consent { background: var(--sh-paper) !important; color: var(--sh-body) !important; box-shadow: var(--sh-shadow) !important; font-family: var(--sh-font) !important; }
html.sh26 body.sh26-hc #consent a { color: var(--sh-blue) !important; }
html.sh26 body.sh26-hc #consent button { border-radius: var(--sh-r-pill) !important; font-family: var(--sh-font) !important; font-weight: 500 !important; min-height: 44px; padding: 0 20px !important; }
html.sh26 body.sh26-hc #consent .ok { background: var(--sh-blue) !important; color: var(--sh-paper) !important; }
html.sh26 body.sh26-hc #consent .ok:hover { background: var(--sh-blue-ink) !important; }
html.sh26 body.sh26-hc #consent .no { background: var(--sh-sand) !important; color: var(--sh-ink) !important; border-color: transparent !important; }
html.sh26 body.sh26-hc #consent button:focus-visible { outline: 2px solid var(--sh-blue) !important; }
html.sh26 body.sh26-hc :is(a, button, summary):focus-visible { outline-color: var(--sh-blue) !important; }
html.sh26.shpl-lock, html.sh26 body.sh26-hc.shpl-lock { overflow: auto !important; }
@media (max-width: 640px) {
  html.sh26 body.sh26-hc .hero p.sub { padding-left: 30px; }
  html.sh26 body.sh26-hc :is(.chat-mini, .demo-widget, .site-mock) { outline-width: 6px; }
}
/* ---------- L. real-estate lander (body.sh26-re, legacy /style.css) ----------
   /style.css is the old dark sheet driven by --clr-* variables, restated here
   in the v2 palette; then weichie's rhythm: a huge title with the blue accent,
   ground and sand bands, split section heads, sand cards, blue numerals, the
   sand closing panel and the accordion. Tracking and markup are untouched. */
html.sh26 body.sh26-re {
  --clr-primary: var(--sh-blue); --clr-primary-dk: var(--sh-blue-ink); --clr-accent: var(--sh-blue);
  --clr-bg: var(--sh-ground); --clr-bg-2: var(--sh-ground); --clr-bg-card: var(--sh-sand);
  --clr-text: var(--sh-ink); --clr-text-muted: var(--sh-muted); --clr-border: rgba(11, 14, 18, .12); --clr-white: var(--sh-ink);
  --clr-dark: var(--sh-ground); --clr-surface: var(--sh-sand); --clr-muted: var(--sh-muted);
  --shadow-card: none; --shadow-btn: none;
  --font-head: var(--sh-display); --font-body: var(--sh-font);
  background: var(--sh-ground) !important; color: var(--sh-body) !important; font-family: var(--sh-font) !important;
}
html.sh26 body.sh26-re main .container {
  max-width: calc(var(--sh-container) + 2 * var(--sh-gutter)) !important; width: 100% !important;
  padding-left: var(--sh-gutter) !important; padding-right: var(--sh-gutter) !important; margin-left: auto !important; margin-right: auto !important;
}
html.sh26 body.sh26-re .re-hero { background: var(--sh-ground) !important; border: 0 !important; padding: var(--lg-top) 0 var(--lg-sec) !important; text-align: left !important; }
html.sh26 body.sh26-re .re-hero h1 { max-width: 12.5em !important; margin: 0 0 clamp(40px, 5vw, 72px) !important; }
html.sh26 body.sh26-re .re-cta-row { display: flex !important; flex-wrap: wrap !important; gap: 12px !important; margin: 36px 0 0 !important; padding-left: 36px; justify-content: flex-start !important; }
html.sh26 body.sh26-re .re-trust { margin-top: 22px !important; font: 400 15px/1.5 var(--sh-font) !important; color: var(--sh-muted) !important; }
html.sh26 body.sh26-re main .section { padding: var(--lg-sec) 0 !important; background: var(--sh-ground) !important; border: 0 !important; }
html.sh26 body.sh26-re main .re-alt { background: var(--sh-sand) !important; border: 0 !important; }
/* split section head: label and title left, the line right */
html.sh26 body.sh26-re .section-header { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sh-gap); text-align: left !important; margin: 0 0 clamp(44px, 5vw, 72px) !important; max-width: none !important; }
html.sh26 body.sh26-re .section-eyebrow {
  display: inline-flex !important; align-items: center !important; gap: 10px !important; justify-self: start; width: auto !important; margin: 0 0 22px !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  font: 500 var(--sh-label)/1.35 var(--sh-font) !important; letter-spacing: .02em !important; text-transform: uppercase !important; color: var(--sh-muted) !important;
}
html.sh26 body.sh26-re .section-eyebrow::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--sh-blue);
  -webkit-mask: var(--lg-i-label) center / contain no-repeat; mask: var(--lg-i-label) center / contain no-repeat;
}
html.sh26 body.sh26-re :is(.section-title, .re-cta h2) {
  margin: 0 !important; max-width: 15em; text-align: left !important;
  font: 500 clamp(34px, 4.4vw, 64px)/1.04 var(--sh-display) !important; letter-spacing: -0.02em !important;
  color: var(--sh-ink) !important; -webkit-text-fill-color: var(--sh-ink) !important; background: none !important; text-wrap: balance;
}
html.sh26 body.sh26-re .section-subtitle { margin: 20px 0 0 !important; max-width: 52ch; text-align: left !important; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
@media (min-width: 1024px) {
  html.sh26 body.sh26-re .section-header { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  html.sh26 body.sh26-re .section-header > * { grid-column: 1 / span 7; }
  html.sh26 body.sh26-re .section-header > .section-subtitle { grid-column: 9 / -1; grid-row: 1 / span 2; align-self: end; margin: 0 !important; }
}
/* before / after: two sand cards (white on the sand band) */
html.sh26 body.sh26-re .re-compare { max-width: none !important; margin: 0 !important; gap: var(--sh-gap) !important; }
html.sh26 body.sh26-re .re-compare__col {
  padding: clamp(26px, 3vw, 44px) !important; background: var(--sh-paper) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
}
html.sh26 body.sh26-re .re-compare__col h3 { margin: 0 0 20px !important; font: 500 clamp(22px, 2vw, 28px)/1.15 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-re .re-compare__col li { font: 400 16.5px/1.55 var(--sh-font) !important; color: var(--sh-body) !important; }
html.sh26 body.sh26-re .re-compare__col--bad li::before { color: var(--sh-muted) !important; }
html.sh26 body.sh26-re .re-compare__col--good li::before { color: var(--sh-blue) !important; }
/* what you get: sand cards with the soft icon tile */
html.sh26 body.sh26-re .re-grid { gap: var(--sh-gap) !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important; }
html.sh26 body.sh26-re .re-card {
  background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important;
  padding: clamp(26px, 2.8vw, 40px) !important; transform: none !important;
}
html.sh26 body.sh26-re .re-card:hover { transform: none !important; box-shadow: none !important; }
html.sh26 body.sh26-re .re-card__ico { width: 48px !important; height: 48px !important; border-radius: 50% !important; margin-bottom: 26px !important; background: var(--sh-blue-tile) !important; color: var(--sh-blue) !important; }
html.sh26 body.sh26-re .re-card__ico .si { width: 22px !important; height: 22px !important; }
html.sh26 body.sh26-re :is(.re-card, .re-step) h3 { margin: 0 0 10px !important; font: 500 clamp(21px, 1.8vw, 25px)/1.2 var(--sh-display) !important; letter-spacing: -0.015em !important; color: var(--sh-ink) !important; }
html.sh26 body.sh26-re :is(.re-card, .re-step) p { font: 400 16px/1.6 var(--sh-font) !important; color: var(--sh-body) !important; }
/* steps: blue Fraunces numerals on a rule */
html.sh26 body.sh26-re .re-steps { gap: 0 var(--sh-gap) !important; counter-reset: s; }
html.sh26 body.sh26-re .re-step { background: none !important; border: 0 !important; border-top: 1px solid var(--sh-rule) !important; border-radius: 0 !important; box-shadow: none !important; padding: 28px 0 !important; transform: none !important; }
html.sh26 body.sh26-re .re-step::before {
  position: static !important; display: block !important; width: auto !important; height: auto !important; margin: 0 0 22px !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
  font: 500 clamp(30px, 2.6vw, 40px)/1 var(--sh-display) !important; letter-spacing: -0.02em !important; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue) !important;
}
/* the closing panel: sand, text left, a blue line icon top right */
html.sh26 body.sh26-re .re-cta {
  position: relative; background: var(--sh-sand) !important; border: 0 !important; border-radius: var(--sh-r-card) !important; box-shadow: none !important; text-align: left !important;
  padding: clamp(36px, 4.6vw, 68px) clamp(96px, 12vw, 180px) clamp(36px, 4.6vw, 68px) clamp(28px, 4.4vw, 64px) !important;
}
html.sh26 body.sh26-re .re-cta::after {
  content: ""; position: absolute; top: clamp(32px, 4vw, 60px); right: clamp(28px, 4vw, 60px);
  width: clamp(48px, 5vw, 76px); height: clamp(48px, 5vw, 76px); background: var(--sh-blue);
  -webkit-mask: var(--lg-i-cal) center / contain no-repeat; mask: var(--lg-i-cal) center / contain no-repeat;
}
html.sh26 body.sh26-re .re-cta .section-eyebrow { margin-bottom: 22px !important; }
html.sh26 body.sh26-re .re-cta h2 { margin: 0 0 20px !important; font-size: clamp(34px, 4vw, 60px) !important; }
html.sh26 body.sh26-re .re-cta p { margin: 0 0 32px !important; max-width: 56ch; font: 500 19px/1.5 var(--sh-font) !important; letter-spacing: -0.02em !important; color: var(--sh-ink) !important; }
/* FAQ: sidehead (the head left, the accordion right) */
html.sh26 body.sh26-re .re-faq { max-width: none !important; margin: 0 !important; }
@media (min-width: 1024px) {
  html.sh26 body.sh26-re #faq > .container:has(> .section-header) { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sh-gap); align-items: start; }
  html.sh26 body.sh26-re #faq > .container > .section-header { grid-column: 1 / span 4; display: block !important; position: sticky; top: calc(var(--sh-hdr, 76px) + 40px); }
  html.sh26 body.sh26-re #faq > .container > .section-header .section-title { font-size: clamp(32px, 3vw, 46px) !important; }
  html.sh26 body.sh26-re #faq > .container > .re-faq { grid-column: 6 / -1; }
}
@media (max-width: 640px) {
  html.sh26 body.sh26-re .re-compare { grid-template-columns: 1fr !important; }
  html.sh26 body.sh26-re .re-cta-row { padding-left: 0; }
  html.sh26 body.sh26-re .re-cta { padding: 32px 24px !important; }
  html.sh26 body.sh26-re .re-cta::after { display: none; }
}
/* ---------- M. motion: nothing here loops ---------- */
@media (prefers-reduced-motion: reduce) {
  html.sh26 body.sh26-lg main *, html.sh26 body.sh26-hc * { animation: none !important; transition: none !important; }
}

/* ---- 40-vt.css ---- */
/* =========================================================================
   40 vt: portrait testimonials, v2 (owner: vt slice).

   Two parts, both prefixed vt-:
   1. The strip, .vt: server-rendered by automation/testimonials/build_vt.py
      into _includes/vt-strip.html. Four portrait (9:16) sand cards with a
      24px radius. Today every card is a written review from reviews.json:
      the client's words in Fraunces italic, the platform with its brand dot,
      the name (Fustat 600) and role (muted) under the card. Consented client
      videos, once they exist, take the first cards: the poster, a blue play
      circle (the pill's icon circle) and the duration. Never a ring, LIVE
      chip, view count, star row or verified tick.
      Layout follows the column it lands in (container queries on .vt):
      - under 536px: the head on top, one row that scrolls inside itself;
      - 536px to 999px: the head on top, four cards across;
      - 1000px and over (the full-width sp hero row): weichie's side-head,
        the title, sub-line and "See all" pill on the left, four cards right
        (a grid on .vt__in: a container query cannot restyle .vt itself).
   2. The viewer, .vt-dlg: a <dialog> built by js/40-vt.js and opened with
      showModal(), so it sits in the top layer. Desktop: the ground behind,
      a sand card holding the 9:16 stage (paper for words, the video itself
      for videos) beside the info panel, sand circles with blue icons for
      close and prev/next, and thin blue progress segments over the card.
      Phones and short windows: the stage is the screen.

   Legacy bleed (proven in the prototype; keep the prefixes):
   - style-light "body.light h3" (0,1,2) recolours headings: names use
     .vt-dlg .vt-i__name.
   - style-light "body.light input" paints the seek bar: .vt-dlg .vt-range
     resets border and background.
   - style-light "body.light a/button:focus-visible" forces a 6px radius:
     the viewer restates its ring at (0,4,1) with !important, and the strip
     moves its ring from the link to the card.
   - style-v30 "*{margin:0;padding:0}" and "img{height:auto}": every margin
     and image box here is explicit.
   Any new rule that touches h2, h3, input, a or button needs the same
   prefixes. The include hides .vt[data-vt] with an inline rule until this
   layer has loaded, so the kill switch (an empty head-2026.html) never
   leaves an unstyled strip behind.
   ========================================================================= */

html.sh26 .vt,
html.sh26 .vt-dlg {
  /* Platform brand dots: the only colours in this file that are not site
     tokens. The warning red marks demo samples on local previews only. */
  --vt-clutch: #E62415;
  --vt-fiverr: #1DBF73;
  --vt-upwork: #14A800;
  --vt-warn: #B42318;
  /* White Lucide arrow-up-right and play, for icons on a blue circle. */
  --vt-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- strip */
html.sh26 .vt[data-vt] { display: block; }
html.sh26 .vt {
  --vt-w: 128px;
  --vt-gap: 12px;
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--sh-font);
  font-weight: 400;
  color: var(--sh-ink);
  text-align: left;
  container: vt / inline-size;
}
html.sh26 .vt *,
html.sh26 .vt *::before,
html.sh26 .vt *::after { box-sizing: border-box; }

/* Head: the title and "See all" share the first row; the source line runs
   under them. (Side-head layout from 1000px: see the last container rule.) */
html.sh26 .vt__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 14px;
}
html.sh26 .vt .vt__h {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--sh-display);
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: var(--sh-track-display);
  text-transform: none;
  text-wrap: balance;
  color: var(--sh-ink);
}
html.sh26 .vt .vt__sub {
  flex: 1 0 100%;
  order: 3;
  margin: 0;
  font: 500 14.5px/1.4 var(--sh-font);
  letter-spacing: -0.01em;
  color: var(--sh-muted);
}
/* "See all 33 reviews": a small sand pill with the blue icon circle. */
html.sh26 .vt .vt__all {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 4px 4px 16px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  font: 500 14.5px/1.2 var(--sh-font);
  letter-spacing: -0.01em;
  color: var(--sh-ink) !important;
  -webkit-text-fill-color: var(--sh-ink);
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .vt .vt__all::after {
  content: "";
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--vt-i-arrow) center / 16px 16px no-repeat, var(--sh-blue);
  transition: transform .25s var(--sh-ease);
}
html.sh26 .vt .vt__all:hover { background: var(--sh-sand-2); }
html.sh26 .vt .vt__all:hover::after { transform: rotate(45deg); }
html.sh26 .vt.vt .vt__all:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .vt__demo {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px dashed var(--vt-warn);
  border-radius: var(--sh-r-field);
  background: #FFF5F3;
  font-size: 13.5px;
  line-height: 1.45;
  color: #8A1C12;
}

/* One row. It scrolls inside itself (scroll-snap) whenever four cards do
   not fit, so the page never scrolls sideways. The 4px padding keeps the
   cards' focus ring inside the scroller; the negative margin keeps the
   cards aligned with the heading. */
html.sh26 .vt__rail {
  display: flex;
  gap: var(--vt-gap);
  margin: 0 -4px;
  padding: 4px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.sh26 .vt__rail::-webkit-scrollbar { display: none; }
html.sh26 .vt__item {
  flex: 0 0 var(--vt-w);
  width: var(--vt-w);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
html.sh26 .vt__item::before,
html.sh26 .vt__item::after { content: none; display: none; }

html.sh26 .vt-tile {
  display: block;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Doubled class: beats the legacy rings on every link; the ring goes on
   the card instead. */
html.sh26 .vt.vt .vt-tile:focus,
html.sh26 .vt.vt .vt-tile:focus-visible { outline: none !important; box-shadow: none !important; }
html.sh26 .vt-tile__frame {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  margin: 0;
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  transition: background-color var(--sh-fast) ease;
}
@supports not (aspect-ratio: 9 / 16) {
  html.sh26 .vt-tile__frame { height: calc(var(--vt-w) * 16 / 9); }
}
html.sh26 .vt-tile:hover .vt-tile__frame { background: var(--sh-sand-2); }
html.sh26 .vt.vt .vt-tile:focus-visible .vt-tile__frame { outline: 2px solid var(--sh-blue); outline-offset: 3px; }
/* On a sand surface the cards turn paper so they stay visible. */
html.sh26 :is(.sh-panel, .sh-card--sand, .sh-section--sand, .sh-band) .vt-tile__frame { background: var(--sh-paper); }
html.sh26 :is(.sh-panel, .sh-card--sand, .sh-section--sand, .sh-band) .vt .vt__all { background: var(--sh-paper); }

/* Captions sit under the card, never on it. Two lines at most each; they
   wrap rather than lose letters. */
html.sh26 .vt-tile__who,
html.sh26 .vt-tile__role {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
html.sh26 .vt-tile__who { margin-top: 9px; font: 600 14px/1.3 var(--sh-font); letter-spacing: -0.01em; color: var(--sh-ink); }
html.sh26 .vt-tile__role { margin-top: 1px; font: 400 13px/1.35 var(--sh-font); color: var(--sh-muted); }

/* Written review: the client's own words, the source at the foot. It is
   plainly text: no play mark, no duration, nothing shaped like video. The
   server sends at most 125 characters, ending at a sentence where it can,
   and the browser clamps whole lines as a safety net; each clamp is sized
   so the last line never reaches the source. */
html.sh26 .vt-tile--review .vt-tile__frame { padding: 14px 13px 12px; }
html.sh26 .vt-tile__q {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 9;
  overflow: hidden;
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--sh-display);
  font-style: italic;
  font-weight: 400;
  /* Sized with the card (14px on a 128px phone card, 20px on the widest),
     so every width keeps about the same fill and line count. */
  font-size: clamp(14px, calc(var(--vt-w) * .104), 20px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--sh-ink);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
html.sh26 .vt-tile__src {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 8px;
  font: 500 12.5px/1.2 var(--sh-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sh-muted);
}
html.sh26 .vt-dot { flex: 0 0 auto; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sh-muted); }
html.sh26 .vt-dot--clutch { background: var(--vt-clutch); }
html.sh26 .vt-dot--fiverr { background: var(--vt-fiverr); }
html.sh26 .vt-dot--upwork { background: var(--vt-upwork); }

/* Video: the client's own poster frame, untouched, with one mark: a blue
   play circle (the pill's icon circle) and the duration on a ground pill. */
html.sh26 .vt-tile--video .vt-tile__frame { background: var(--sh-sand-2); }
html.sh26 .vt .vt-tile__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
  transition: transform .5s var(--sh-ease);
}
html.sh26 .vt-tile--video:hover .vt-tile__img { transform: scale(1.03); }
html.sh26 .vt-tile__play {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 4px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-ground);
  color: var(--sh-ink);
  font: 500 12.5px/1 var(--sh-font);
}
html.sh26 .vt-tile__play svg {
  display: block;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 9px 8px 9px 10px;
  border-radius: 50%;
  background: var(--sh-blue);
  color: var(--sh-paper);
  transition: transform .25s var(--sh-ease);
}
html.sh26 .vt-tile--video:hover .vt-tile__play svg { transform: scale(1.08); }
html.sh26 .vt-tile__sample {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  padding: 5px 6px;
  border-radius: 10px;
  background: var(--vt-warn);
  color: #FFFFFF;
  font: 600 11px/1.25 var(--sh-font);
  text-align: center;
}

/* The narrowest columns (a 360px phone): "See all" becomes a plain blue
   link with an arrow, so the title and the link keep one row. */
@container vt (max-width: 339.98px) {
  html.sh26 .vt .vt__h { font-size: 24px; }
  html.sh26 .vt .vt__all { gap: 4px; min-height: 36px; padding: 0; background: none; color: var(--sh-blue) !important; -webkit-text-fill-color: var(--sh-blue); }
  html.sh26 .vt .vt__all::after { width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--sh-i-arrow-up-right) center / contain no-repeat; mask: var(--sh-i-arrow-up-right) center / contain no-repeat; }
  html.sh26 .vt .vt__all:hover { background: none; text-decoration: underline !important; }
  html.sh26 .vt .vt__all:hover::after { transform: translate(2px, -2px); }
}

/* Room for four across: the cards grow with the column, up to 168px wide,
   and the head row ends where the last card does. */
@container vt (min-width: 536px) {
  html.sh26 .vt__rail,
  html.sh26 .vt__head { --vt-w: clamp(125px, calc((100cqi - 3 * var(--vt-gap)) / 4), 168px); }
  html.sh26 .vt__head { max-width: calc(var(--vt-w) * 4 + 3 * var(--vt-gap)); }
  html.sh26 .vt .vt__h { font-size: 30px; }
}
@container vt (min-width: 640px) {
  html.sh26 .vt-tile--review .vt-tile__frame { padding: 16px 15px 14px; }
  html.sh26 .vt-tile__q { -webkit-line-clamp: 10; }
}
/* The full-width row (the sp hero at 1000px+): weichie's side-head. The
   title, sub-line and pill stack on the left; four cards sit right. */
@container vt (min-width: 1000px) {
  html.sh26 .vt__in {
    --vt-gap: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
    align-items: start;
  }
  html.sh26 .vt__rail,
  html.sh26 .vt__head { --vt-w: clamp(150px, calc((100cqi - 440px - 3 * var(--vt-gap)) / 4), 192px); }
  html.sh26 .vt__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 14px;
    max-width: 440px;
    margin: 0;
    padding-top: 4px;
  }
  html.sh26 .vt .vt__h { flex: none; font-size: clamp(36px, 3.4vw, 50px); line-height: 1.02; }
  html.sh26 .vt .vt__sub { flex: none; order: 2; font-size: 16px; }
  html.sh26 .vt .vt__all { order: 3; margin-top: 14px; min-height: 48px; padding: 6px 6px 6px 20px; font-size: 15.5px; }
  html.sh26 .vt .vt__all::after { width: 36px; height: 36px; background-size: 18px 18px, auto; }
  html.sh26 .vt__rail { overflow: visible; }
  html.sh26 .vt-tile--review .vt-tile__frame { padding: 20px 18px 16px; }
  html.sh26 .vt-tile__q { -webkit-line-clamp: 10; line-height: 1.26; }
  html.sh26 .vt-tile__src { font-size: 13px; }
  html.sh26 .vt-tile__who { margin-top: 12px; font-size: 15px; }
  html.sh26 .vt-tile__role { font-size: 13.5px; }
}

/* --------------------------------------------------------------- viewer */
html.sh26.vt-lock,
html.sh26.vt-lock body { overflow: hidden !important; }
html.sh26 .vt-dlg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
  color: var(--sh-ink);
  font-family: var(--sh-font);
  font-weight: 400;
  text-align: left;
  overscroll-behavior: contain;
}
/* ::backdrop does not inherit custom properties everywhere: literal ground. */
html.sh26 .vt-dlg::backdrop { background: rgba(251, 251, 248, .985); }
html.sh26 .vt-dlg[open] { display: flex; align-items: center; justify-content: center; gap: 24px; }
html.sh26 .vt-dlg *,
html.sh26 .vt-dlg *::before,
html.sh26 .vt-dlg *::after { box-sizing: border-box; }
html.sh26 .vt-dlg [hidden] { display: none !important; }
html.sh26 .vt-dlg:focus { outline: none; }
html.sh26 .vt-dlg button { font-family: inherit; }

/* Sand circles with blue icons: close, prev, next, and the video controls. */
html.sh26 .vt-dlg .vt-ibtn {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sh-sand);
  color: var(--sh-blue);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--sh-fast) ease, color var(--sh-fast) ease, opacity var(--sh-fast) ease;
}
html.sh26 .vt-dlg .vt-ibtn:hover { background: var(--sh-sand-2); color: var(--sh-blue-ink); }
html.sh26 .vt-dlg .vt-ibtn[disabled] { opacity: .4; cursor: default; background: var(--sh-sand); color: var(--sh-blue); }
html.sh26 .vt-dlg .vt-ibtn svg { display: block; width: 20px; height: 20px; transition: transform .25s var(--sh-ease); }
html.sh26 .vt-dlg .vt-dlg__sidenav { width: 56px; height: 56px; }
html.sh26 .vt-dlg .vt-dlg__sidenav svg { width: 22px; height: 22px; }
html.sh26 .vt-dlg .vt-ibtn[data-prev]:not([disabled]):hover svg { transform: translateX(-2px); }
html.sh26 .vt-dlg .vt-ibtn[data-next]:not([disabled]):hover svg { transform: translateX(2px); }
html.sh26 .vt-dlg .vt-ibtn[data-x]:hover svg { transform: rotate(90deg); }
html.sh26 .vt-dlg .vt-ibtn[aria-pressed="false"] .vt-on,
html.sh26 .vt-dlg .vt-ibtn[aria-pressed="true"] .vt-off { display: none; }
/* One ring in the viewer: 2px blue. (0,4,1) + !important beats the legacy
   rings and style-light's 6px radius; every shape keeps its own radius. */
html.sh26 .vt-dlg.vt-dlg :focus-visible { outline: 2px solid var(--sh-blue) !important; outline-offset: 3px !important; box-shadow: none !important; }
html.sh26 .vt-dlg.vt-dlg .vt-ibtn:focus-visible,
html.sh26 .vt-dlg.vt-dlg .vt-big:focus-visible { border-radius: 50%; }
html.sh26 .vt-dlg.vt-dlg .vt-btn:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .vt-dlg.vt-dlg .vt-tx:focus-visible { border-radius: var(--sh-r-field); }
/* Focus lands on a slide only so a screen reader reads its label. */
html.sh26 .vt-dlg.vt-dlg .vt-slide:focus,
html.sh26 .vt-dlg.vt-dlg .vt-slide:focus-visible { outline: none !important; }

html.sh26 .vt-dlg .vt-dlg__x { position: absolute; top: 20px; right: 20px; z-index: 6; }
html.sh26 .vt-dlg .vt-s__xin,
html.sh26 .vt-dlg .vt-s__nav { display: none; }

html.sh26 .vt-frame { position: relative; display: flex; flex-direction: column; gap: 14px; flex: 0 1 auto; min-width: 0; }

/* Progress: one thin segment per review, blue up to the current one. A
   playing video fills its own segment as it plays (--p, set by the JS). */
html.sh26 .vt-prog { display: flex; gap: 3px; height: 3px; margin: 0 6px; pointer-events: none; }
html.sh26 .vt-prog i {
  --p: 100%;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--sh-sand-2);
}
html.sh26 .vt-prog i.is-on { background: var(--sh-blue); }
html.sh26 .vt-prog i.is-cur { background: linear-gradient(to right, var(--sh-blue) var(--p), var(--sh-sand-2) var(--p)); }

/* The slide: a sand card holding the stage and the info panel. */
html.sh26 .vt-slide {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  margin: 0;
  padding: 10px;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
}
html.sh26 .vt-slide.is-in { animation: vt-in .28s var(--sh-ease) both; }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* The stage keeps 9:16 and never pushes the panel and arrows off screen. */
html.sh26 .vt-stage {
  position: relative;
  flex: 0 0 auto;
  height: min(calc(100vh - 128px), 820px, calc((100vw - 600px) * 16 / 9));
  height: min(calc(100dvh - 128px), 820px, calc((100vw - 600px) * 16 / 9));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: var(--sh-ink);
}
@supports not (aspect-ratio: 9 / 16) {
  html.sh26 .vt-stage { width: calc(min(calc(100vh - 128px), 820px) * 9 / 16); }
}

/* Info panel: who, where it was written, links and the transcript. */
html.sh26 .vt-info {
  position: relative;
  flex: 0 0 auto;
  width: clamp(300px, 26vw, 380px);
  display: flex;
  flex-direction: column;
  padding: 26px 22px 18px 30px;
  overflow: auto;
  background: transparent;
  color: var(--sh-body);
}
html.sh26 .vt-dlg p { margin: 0; }
html.sh26 .vt-dlg .vt-i__count { margin: 0 0 26px; font: 500 13.5px/1.4 var(--sh-font); letter-spacing: 0; color: var(--sh-muted); }
html.sh26 .vt-dlg .vt-badge {
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 5px 10px;
  border-radius: var(--sh-r-pill);
  background: var(--vt-warn);
  color: #FFFFFF;
  font: 600 12.5px/1.3 var(--sh-font);
}
html.sh26 .vt-dlg .vt-i__kind { margin: 0 0 10px; font: 500 13.5px/1.4 var(--sh-font); color: var(--sh-blue); }
html.sh26 .vt-dlg .vt-i__name {
  margin: 0;
  font-family: var(--sh-display);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.06;
  letter-spacing: var(--sh-track-display);
  text-transform: none;
  text-wrap: balance;
  color: var(--sh-ink);
  -webkit-text-fill-color: currentColor;
  background: none;
}
html.sh26 .vt-dlg .vt-i__role { margin: 8px 0 0; font: 500 15.5px/1.45 var(--sh-font); letter-spacing: -0.01em; color: var(--sh-muted); }
html.sh26 .vt-dlg .vt-i__quote {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--sh-display);
  font-style: italic;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.4;
  color: var(--sh-ink);
}
html.sh26 .vt-dlg .vt-i__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; margin-top: 20px; font-size: 15px; }
html.sh26 .vt-dlg .vt-i__meta a,
html.sh26 .vt-dlg .vt-tbtn,
html.sh26 .vt-dlg .vt-r__link {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sh-blue);
  font: 500 15px/1.5 var(--sh-font);
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(10, 110, 158, .4);
  cursor: pointer;
  transition: color var(--sh-fast) ease, text-decoration-color var(--sh-fast) ease;
}
html.sh26 .vt-dlg .vt-i__meta a:hover,
html.sh26 .vt-dlg .vt-tbtn:hover,
html.sh26 .vt-dlg .vt-r__link:hover { color: var(--sh-blue-ink); text-decoration-color: currentColor; }
html.sh26 .vt-dlg .vt-r__link { display: inline-block; margin-top: 22px; align-self: flex-start; }
html.sh26 .vt-dlg .vt-i__note { margin: 8px 0 0; font: 400 13.5px/1.5 var(--sh-font); color: var(--sh-muted); }
html.sh26 .vt-dlg .vt-i__plat { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--sh-line); font: 500 15px/1.5 var(--sh-font); letter-spacing: -0.01em; color: var(--sh-body); }
html.sh26 .vt-dlg .vt-i__keys { margin: auto 0 0; padding-top: 22px; font: 400 12.5px/1.7 var(--sh-font); color: var(--sh-muted); }
html.sh26 .vt-dlg .vt-tx { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sh-line); font-size: 15px; line-height: 1.6; color: var(--sh-body); }
html.sh26 .vt-dlg .vt-tx h3 {
  margin: 0 0 8px;
  font: 500 13.5px/1.4 var(--sh-font);
  letter-spacing: 0;
  text-transform: none;
  color: var(--sh-blue);
  -webkit-text-fill-color: currentColor;
  background: none;
}
html.sh26 .vt-dlg .vt-tx p { margin: 0 0 10px; }

/* Video stage */
html.sh26 .vt-media { position: absolute; inset: 0; touch-action: none; }
html.sh26 .vt-dlg .vt-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  background: #000000;
}
/* The big play: the pill's icon circle, large. */
html.sh26 .vt-dlg .vt-big {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sh-blue);
  color: var(--sh-paper);
  cursor: pointer;
  transition: background-color var(--sh-fast) ease, transform .25s var(--sh-ease);
}
html.sh26 .vt-dlg .vt-big:hover { background: var(--sh-blue-ink); transform: scale(1.05); }
html.sh26 .vt-dlg .vt-big svg { display: block; width: 26px; height: 26px; margin-left: 3px; }
html.sh26 .vt-cc { position: absolute; left: 16px; right: 16px; bottom: 80px; z-index: 2; display: flex; justify-content: center; pointer-events: none; }
html.sh26 .vt-cc span {
  display: inline-block;
  max-width: 100%;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(11, 14, 18, .84);
  color: #FFFFFF;
  font: 500 17px/1.35 var(--sh-font);
  text-align: center;
  white-space: pre-line;
}
html.sh26 .vt-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 30px 10px 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(11, 14, 18, .72), rgba(11, 14, 18, 0));
}
html.sh26 .vt-dlg .vt-bar .vt-ibtn { width: 40px; height: 40px; }
html.sh26 .vt-dlg .vt-bar .vt-ibtn svg { width: 18px; height: 18px; }
html.sh26 .vt-time { flex: 0 0 auto; min-width: 74px; padding-left: 4px; font: 500 12.5px/1 var(--sh-font); color: #FFFFFF; }
html.sh26 .vt-dlg .vt-range {
  --p: 0%;
  flex: 1 1 auto;
  min-width: 40px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}
html.sh26 .vt-dlg.vt-dlg .vt-range:focus-visible { border-radius: var(--sh-r-pill); }
html.sh26 .vt-dlg .vt-range::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--sh-blue) var(--p), rgba(255, 255, 255, .4) var(--p)); }
html.sh26 .vt-dlg .vt-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #FFFFFF; }
html.sh26 .vt-dlg .vt-range::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .4); }
html.sh26 .vt-dlg .vt-range::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--sh-blue); }
html.sh26 .vt-dlg .vt-range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #FFFFFF; }
html.sh26 .vt-end { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; gap: 10px; transform: translate(-50%, -50%); }
/* Pills: "Next review" is the blue one, the rest are sand. */
html.sh26 .vt-dlg .vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  color: var(--sh-ink);
  font: 500 15.5px/1.2 var(--sh-font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--sh-fast) ease;
}
html.sh26 .vt-dlg .vt-btn:hover { background: var(--sh-sand-2); }
html.sh26 .vt-dlg .vt-btn--solid { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26 .vt-dlg .vt-btn--solid:hover { background: var(--sh-blue-ink); }
html.sh26 .vt-sound { position: absolute; left: 50%; bottom: 88px; z-index: 3; transform: translateX(-50%); }

/* Written review on paper: the words alone, set as a quote and sized to
   their length. */
html.sh26 .vt-s--review .vt-stage { background: var(--sh-paper); color: var(--sh-ink); }
html.sh26 .vt-r {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 38px;
  overflow: auto;
  touch-action: pan-y;
}
html.sh26 .vt-dlg .vt-r__src { display: flex; align-items: center; gap: 9px; margin: 0; font: 500 13.5px/1.4 var(--sh-font); color: var(--sh-muted); }
html.sh26 .vt-dlg .vt-r__src .vt-dot { width: 8px; height: 8px; }
html.sh26 .vt-dlg .vt-r__q {
  margin: 22px 0 0;
  padding: 0;
  border: 0;
  font-family: var(--sh-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
  text-wrap: pretty;
}
html.sh26 .vt-dlg .vt-r__q p { margin: 0; }
html.sh26 .vt-dlg .vt-r__q--s { font-size: 36px; line-height: 1.18; }
html.sh26 .vt-dlg .vt-r__q--m { font-size: 29px; line-height: 1.26; }
html.sh26 .vt-dlg .vt-r__q--l { font-size: 22px; line-height: 1.4; }
@media (max-height: 760px) and (min-width: 821px) {
  html.sh26 .vt-dlg .vt-r { padding: 36px 30px; }
  html.sh26 .vt-dlg .vt-r__q--s { font-size: 30px; }
  html.sh26 .vt-dlg .vt-r__q--m { font-size: 25px; }
  html.sh26 .vt-dlg .vt-r__q--l { font-size: 19.5px; }
}

/* Phones and short windows: the stage is the screen. */
@media (max-width: 820px), (max-height: 560px) {
  html.sh26 .vt-dlg::backdrop { background: rgb(251, 251, 248); }
  html.sh26 .vt-dlg[open] { display: block; }
  html.sh26 .vt-dlg .vt-dlg__sidenav,
  html.sh26 .vt-dlg .vt-dlg__x,
  html.sh26 .vt-dlg .vt-i__keys,
  html.sh26 .vt-dlg .vt-i__count { display: none; }
  html.sh26 .vt-frame,
  html.sh26 .vt-slot,
  html.sh26 .vt-slide { position: absolute; inset: 0; }
  html.sh26 .vt-frame { display: block; }
  html.sh26 .vt-slide { display: block; padding: 0; border-radius: 0; background: var(--sh-ground); }
  html.sh26 .vt-stage { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; border-radius: 0; }
  html.sh26 .vt-prog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 8;
    height: auto;
    margin: 0;
    padding: 10px 14px 0;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
  }
  html.sh26 .vt-prog i { height: 3px; }
  html.sh26 .vt-dlg .vt-s__xin { display: inline-grid; position: absolute; top: 22px; top: calc(22px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 7; width: 44px; height: 44px; }
  html.sh26 .vt-dlg .vt-s__nav {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 251, 248, .97);
    border-top: 1px solid var(--sh-line);
    color: var(--sh-muted);
  }
  html.sh26 .vt-s__navlbl { font: 500 13.5px/1 var(--sh-font); }

  /* Video: identity over a scrim at the top, controls and paging below.
     Over the picture the words stay white. */
  html.sh26 .is-video .vt-prog i { background: rgba(255, 255, 255, .38); }
  html.sh26 .is-video .vt-prog i.is-on { background: var(--sh-blue); }
  html.sh26 .is-video .vt-prog i.is-cur { background: linear-gradient(to right, var(--sh-blue) var(--p), rgba(255, 255, 255, .38) var(--p)); }
  html.sh26 .vt-s--video .vt-stage { bottom: 64px; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  html.sh26 .vt-s--video .vt-info {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 4;
    width: auto;
    padding: 26px 66px 30px 16px;
    padding-top: calc(26px + env(safe-area-inset-top, 0px));
    overflow: visible;
    background: linear-gradient(to bottom, rgba(11, 14, 18, .82), rgba(11, 14, 18, .5) 72%, rgba(11, 14, 18, 0));
    color: #FFFFFF;
  }
  html.sh26 .vt-dlg .vt-s--video .vt-badge { margin-bottom: 6px; }
  html.sh26 .vt-dlg .vt-s--video .vt-i__kind,
  html.sh26 .vt-dlg .vt-s--video .vt-i__quote { display: none; }
  html.sh26 .vt-dlg .vt-s--video .vt-i__name { font-size: 22px; color: #FFFFFF; }
  html.sh26 .vt-dlg .vt-s--video .vt-i__role { margin-top: 2px; font-size: 13.5px; color: rgba(255, 255, 255, .86); }
  html.sh26 .vt-dlg .vt-s--video .vt-i__note { color: rgba(255, 255, 255, .86); }
  html.sh26 .vt-dlg .vt-s--video .vt-i__meta { margin-top: 8px; }
  html.sh26 .vt-dlg .vt-s--video .vt-i__meta a,
  html.sh26 .vt-dlg .vt-s--video .vt-tbtn { font-size: 13.5px; color: #FFFFFF; text-decoration-color: rgba(255, 255, 255, .6); }
  html.sh26 .vt-dlg .vt-s--video .vt-tx {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 100%;
    max-height: 48vh;
    max-height: 48dvh;
    overflow: auto;
    margin: 0;
    padding: 16px 18px;
    border: 0;
    border-radius: var(--sh-r-card);
    background: var(--sh-sand);
    color: var(--sh-body);
    touch-action: pan-y;
  }
  html.sh26 .vt-s--video .vt-bar { padding-bottom: 12px; }
  html.sh26 .vt-s--video .vt-cc { bottom: 72px; }
  html.sh26 .vt-s--video .vt-sound { bottom: 80px; }

  /* Written review: one scrolling page on the ground, the words first. */
  html.sh26 .vt-s--review { overflow: auto; touch-action: pan-y; }
  html.sh26 .vt-s--review .vt-stage { position: relative; inset: auto; overflow: visible; background: transparent; }
  html.sh26 .vt-s--review .vt-r { position: relative; inset: auto; padding: 88px 22px 0; overflow: visible; justify-content: flex-start; }
  html.sh26 .vt-s--review .vt-info { width: auto; padding: 26px 22px 104px; overflow: visible; background: transparent; }
  html.sh26 .vt-dlg .vt-s--review .vt-i__kind { display: none; }
  html.sh26 .vt-dlg .vt-s--review .vt-i__name { font-size: 26px; }
  html.sh26 .vt-dlg .vt-r__q--s { font-size: 31px; }
  html.sh26 .vt-dlg .vt-r__q--m { font-size: 26px; }
  html.sh26 .vt-dlg .vt-r__q--l { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  html.sh26 .vt-tile__frame,
  html.sh26 .vt .vt-tile__img,
  html.sh26 .vt-tile__play svg,
  html.sh26 .vt .vt__all::after,
  html.sh26 .vt-dlg .vt-ibtn,
  html.sh26 .vt-dlg .vt-ibtn svg,
  html.sh26 .vt-dlg .vt-big { transition: none; }
  html.sh26 .vt-tile--video:hover .vt-tile__img { transform: none; }
  html.sh26 .vt-slide.is-in { animation: none; }
}
@media (forced-colors: active) {
  html.sh26 .vt-tile__frame,
  html.sh26 .vt-dlg .vt-ibtn,
  html.sh26 .vt-stage,
  html.sh26 .vt .vt__all { border: 1px solid CanvasText; }
  html.sh26 .vt-prog i.is-on,
  html.sh26 .vt-prog i.is-cur { background: Highlight; }
}

/* ---- 45-vtc.css ---- */
/* 45 vtc: the review carousel that replaces the strip's portrait tiles
   (js/45-vtc.js, owner 2026-11-01). Cards: sand, Fraunces quote, the name
   and role, the platform with its dot. */
html.sh26 .vt[data-vtc] .vtc__rail {
  --vtc-gap: 16px;
  display: flex;
  gap: var(--vtc-gap);
  margin: 0;
  padding: 2px 2px 6px;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 2px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
html.sh26 .vt[data-vtc] .vtc__rail::-webkit-scrollbar { display: none; }
html.sh26 .vtc__item {
  flex: 0 0 clamp(250px, calc((100cqi - var(--vtc-gap)) / 2.15), 360px);
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}
html.sh26 .vtc__item::before,
html.sh26 .vtc__item::marker { content: none; }
html.sh26 .vt .vtc-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 236px;
  padding: 22px 22px 18px;
  border-radius: var(--sh-r-img, 20px);
  background: var(--sh-sand);
  color: var(--sh-ink) !important;
  text-decoration: none !important;
  transition: background-color .25s ease, transform .45s var(--sh-ease, ease);
}
html.sh26 .vt .vtc-card:hover { background: var(--sh-sand-2); transform: translateY(-3px); }
html.sh26 .vt .vtc-card:focus-visible { outline: 2px solid var(--sh-blue); outline-offset: 3px; }
html.sh26 .vtc-card__q {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
}
html.sh26 .vtc-card__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 18px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--sh-muted);
}
html.sh26 .vtc-card__who b { font-weight: 600; font-size: 15px; color: var(--sh-ink); }
html.sh26 .vtc-card__src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--sh-body);
}
html.sh26 .vt .vtc__nav { display: flex; gap: 8px; order: 5; flex: 1 0 100%; margin-top: 4px; }
html.sh26 .vtc__nav .sh-iconbtn { width: 44px; height: 44px; }
html.sh26 :is(.sh-panel, .sh-card--sand, .sh-section--sand, .sh-band) .vt .vtc-card { background: var(--sh-paper); }

/* Wide strips: the head beside the carousel. */
@container vt (min-width: 1000px) {
  html.sh26 .vt[data-vtc] .vt__in { grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); }
  html.sh26 .vt[data-vtc] .vtc__nav { order: 4; flex: none; margin-top: 6px; }
}
@container vt (max-width: 560px) {
  html.sh26 .vtc__item { flex-basis: 84%; }
  html.sh26 .vtc-card__q { font-size: 18px; }
}

/* While it glides (45-vtc.js), snapping would fight the motion. */
html.sh26 .vt[data-vtc] .vtc__rail.is-gliding { scroll-snap-type: none; scroll-behavior: auto; }

/* ---- 50-motion.css ---- */
/* 50 motion: start states and pieces for js/50-motion.js (v3, 2026-11-01).
   Every hidden state needs html.sh-mo, which an inline script in
   head-2026.html sets and takes away again after 3 s if the JS never runs. */

/* Until the JS has split the headings and parked the ring, keep them unseen
   (the JS runs at DOMContentLoaded, so this is one frame on a normal load). */
html.sh26.sh-mo:not(.sh-mo-on) :is(h1, main h2),
html.sh26.sh-mo:not(.sh-mo-on) .pf__stage { visibility: hidden; }

/* Headings: one mask per word */
html.sh26 .mo-w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  overflow: clip;
  padding: .06em .04em .16em;
  margin: -.06em -.04em -.16em;
}
html.sh26 .mo-wi { display: inline-block; transform-origin: 0 100%; }
html.sh26.sh-mo [data-mo-tr="1"]:not(.mo-done) .mo-wi { transform: translateY(110%) rotate(6deg); }
html.sh26.sh-mo [data-mo-c]:not(.mo-done) { opacity: 0; transform: translateY(20px); }
html.sh26.sh-mo [data-mo-b]:not(.mo-done) { opacity: 0; }

/* The ring while it rises: nothing below the band shows through */
html.sh26 .pf.mo-rising { overflow: hidden; overflow: clip; }

/* Home: the headline plays in the middle of the stage before the ring rises */
html.sh26 .mo-intro {
  position: absolute;
  inset: 0 0 var(--pf-bar, 96px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--sh-gutter);
  pointer-events: none;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(44px, 7.6vw, 110px);
  line-height: 1;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--sh-ink);
}
html.sh26 .mo-intro__line { display: block; opacity: 0; }
html.sh26 .mo-intro__line--accent { color: var(--sh-blue); }

/* The "view" cursor: a blue disc with an arrow that leans with the mouse */
html.sh26 .mo-cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: var(--sh-blue);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-200px, -200px, 0) scale(0);
  will-change: transform;
}
html.sh26 .mo-cur__i { display: grid; place-items: center; }
html.sh26.mo-cur-on :is(.hm-fw__a, .hm-wi__a, .pf-card, .pf__stage, [data-mo-cursor]) { cursor: none; }

/* Nav: letters that hop */
html.sh26 .mo-chars { display: inline; white-space: nowrap; }
html.sh26 .mo-ch { display: inline-block; white-space: pre; }

/* Footer wordmark: settled by the scroll position */
html.sh26 .footer .sh-ft-mark { transform-origin: 50% 50%; will-change: transform; }

/* Count-up suffix */
html.sh26 .mo-suf { display: inline-block; transform-origin: 30% 80%; }

/* Page to page: the old page fades out (220 ms), the new one fades in (320 ms). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mo-vt-out 220ms ease both; }
::view-transition-new(root) { animation: mo-vt-in 320ms ease 220ms both; }
@keyframes mo-vt-out { to { opacity: 0; } }
@keyframes mo-vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* One reveal system: once 50-motion.js runs, the service-page template's own
   .sp-r reveal (service-page.js, 4% of the element in view) stands down. On a
   long article that rule left the whole body blank for ~600px of scrolling. */
html.sh26.sh-mo-on .sp.sp-js .sp-r { opacity: 1; transform: none; transition: none; }

/* ---- 60-blog.css ---- */
/* 60 blog: the blog phase (owner, 2026-11-01: "design now remaining pages").
   Blog posts, country editions and console posts share the service-page
   template (20-sp.css styles most of it); this partial covers what only the
   post template has, then the category pages and the /blog and
   /problems-we-solve indexes, which carry their own markup. Everything is
   scoped html.sh26, so a page changes only once it opts in. */

/* ===================== Posts ===================== */

/* Date, reading time, author: one centred row under the title. */
html.sh26 .sp .sp-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  width: 100%;
  max-width: none;
  margin: 22px 0 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 18px 0 -4px;
  border-radius: 50%;
  background: var(--sh-blue);
  vertical-align: middle;
}
@media (min-width: 641px) {
  html.sh26 .sp .sp-meta { order: 4; }
}
@media (min-width: 1021px) {
  html.sh26 .sp .sp-meta { grid-column: 1 / -1; grid-row: 5; }
}
@media (max-width: 640px) {
  html.sh26 .sp .sp-meta { justify-content: flex-start; gap: 4px 16px; font-size: 12px; }
}

/* Article and side column */
html.sh26 .sp .sp-post {
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(32px, 6vw, 96px);
}
@media (max-width: 1024px) {
  html.sh26 .sp .sp-post { grid-template-columns: minmax(0, 1fr); }
}
html.sh26 .sp .sp-post__aside { top: 110px; gap: 16px; margin-top: 0; }

/* "Quick answer" and the side "Related services" box: sand cards */
html.sh26 .sp .sp-tldr {
  margin: 0 0 48px;
  padding: 26px 28px;
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  box-shadow: none;
}
html.sh26 .sp .sp-tldr__h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: var(--sh-label);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sh-muted);
}
html.sh26 .sp .sp-tldr__h::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26 .sp .sp-tldr p:not(.sp-tldr__h) {
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-post__aside .sp-tldr { margin: 0; padding: 22px 24px; }
html.sh26 .sp .sp-aside-links { margin: 0; padding: 0; list-style: none; }
html.sh26 .sp .sp-aside-links li { margin: 0; padding: 0; border-top: 1px solid var(--sh-sand-2); }
html.sh26 .sp .sp-aside-links li:first-child { border-top: 0; }
html.sh26 .sp .sp-aside-links li::before,
html.sh26 .sp .sp-aside-links li::marker { content: none; }
html.sh26 .sp .sp-aside-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  color: var(--sh-ink) !important;
  text-decoration: none !important;
}
html.sh26 .sp .sp-aside-links a::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
  mask: var(--sh-i-arrow-up-right) center / contain no-repeat;
  transition: transform var(--sh-fast) ease;
}
html.sh26 .sp .sp-aside-links a:hover { color: var(--sh-blue) !important; }
html.sh26 .sp .sp-aside-links a:hover::after { transform: translate(2px, -2px); }

/* The side call to action: a blue card, white type, a white pill */
html.sh26 .sp .sp-post__cta {
  padding: 28px 26px 26px;
  border-radius: var(--sh-r-card);
  background: var(--sh-blue);
  color: var(--sh-paper);
}
html.sh26 .sp .sp-post__cta strong {
  margin: 0 0 10px;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-paper);
}
html.sh26 .sp .sp-post__cta p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .86); }
html.sh26 .sp .sp-post__cta .sp-btn {
  --sp2-btn-bg: var(--sh-paper);
  --sp2-btn-bg-hover: var(--sh-sand);
  --sp2-btn-fg: var(--sh-ink);
  --sp2-btn-ic-bg: var(--sh-blue);
  --sp2-btn-ic-fg: var(--sh-paper);
  width: 100%;
}

/* The article: weichie's long-read rhythm. Serif headings, roomy text. */
html.sh26 .sp .sp-article {
  max-width: 68ch;
  font-family: var(--sh-font);
  font-size: 18.5px;
  line-height: 1.72;
  letter-spacing: -0.005em;
  color: var(--sh-body);
}
html.sh26 .sp .sp-article > h2 {
  margin: 72px 0 20px;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.06;
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
  scroll-margin-top: 110px;
}
html.sh26 .sp .sp-article > h2:first-child { margin-top: 0; }
html.sh26 .sp .sp-article h3 {
  margin: 40px 0 12px;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 27px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--sh-ink);
  scroll-margin-top: 110px;
}
html.sh26 .sp .sp-article h4 { margin: 28px 0 10px; font-family: var(--sh-font); font-weight: 600; font-size: 19px; color: var(--sh-ink); }
html.sh26 .sp .sp-article p { margin: 0 0 22px; }
html.sh26 .sp .sp-article a:not([class]) {
  color: var(--sh-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
html.sh26 .sp .sp-article a:not([class]):hover { color: var(--sh-blue-ink); text-decoration-thickness: 2px; }
html.sh26 .sp .sp-article strong { font-weight: 600; color: var(--sh-ink); }
html.sh26 .sp .sp-article ul { margin: 0 0 26px; padding-left: 0; list-style: none; }
html.sh26 .sp .sp-article ul > li { position: relative; margin: 0 0 12px; padding-left: 26px; }
html.sh26 .sp .sp-article ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-blue);
}
html.sh26 .sp .sp-article ol { margin: 0 0 26px; padding-left: 0; list-style: none; counter-reset: sh-ol; }
html.sh26 .sp .sp-article ol > li { position: relative; margin: 0 0 14px; padding-left: 40px; counter-increment: sh-ol; }
html.sh26 .sp .sp-article ol > li::before {
  content: counter(sh-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: .95em;
  color: var(--sh-blue);
}
html.sh26 .sp .sp-article li::marker { content: none; }
html.sh26 .sp .sp-article blockquote {
  margin: 8px 0 32px;
  padding: 26px 30px;
  border: 0;
  border-radius: var(--sh-r-card);
  background: var(--sh-sand);
  font-family: var(--sh-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.4;
  color: var(--sh-ink);
}
html.sh26 .sp .sp-article .sp-tablewrap {
  margin: 8px 0 32px;
  border: 1px solid var(--sh-line);
  border-radius: var(--sh-r-field);
  background: var(--sh-paper);
}
html.sh26 .sp .sp-article table { font-size: 15.5px; }
html.sh26 .sp .sp-article th {
  padding: 14px 18px;
  background: var(--sh-sand);
  color: var(--sh-ink) !important;
  font-family: var(--sh-font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
}
html.sh26 .sp .sp-article td { padding: 14px 18px; border-top: 1px solid var(--sh-line); color: var(--sh-body) !important; }
html.sh26 .sp .sp-article tbody tr:nth-child(even) { background: rgba(243, 239, 232, .45); }
html.sh26 .sp .sp-article img { max-width: 100%; height: auto; border-radius: var(--sh-r-field); }
html.sh26 .sp .sp-article hr { margin: 48px 0; border: 0; border-top: 1px solid var(--sh-line); }
html.sh26 .sp .sp-article code { padding: .1em .35em; border-radius: 6px; background: var(--sh-sand); font-size: .9em; }
@media (max-width: 640px) {
  html.sh26 .sp .sp-article { font-size: 17.5px; }
  html.sh26 .sp .sp-article > h2 { margin-top: 56px; }
  html.sh26 .sp .sp-tldr { padding: 22px 22px; border-radius: 20px; }
}

/* ===================== Indexes: /blog, /problems-we-solve, /problems/* =====================
   These pages carry their own chrome (top bar, header, hero, footer, cookie
   bar) from render_posts.py and build_problem_hubs.py. They opt in with
   class="sh26 sh-ix", and only html.sh-ix rules touch their class names. */
html.sh26.sh-ix body { background: var(--sh-ground); color: var(--sh-ink); font-family: var(--sh-font); }
html.sh26.sh-ix .wrap { max-width: var(--sh-container); }

/* Top bar: gone, as on every other page */
html.sh26.sh-ix .top { display: none; }

/* Header: the same bar as the shared one */
html.sh26.sh-ix .head { background: rgba(251, 251, 248, .92); border-bottom: 0; }
html.sh26.sh-ix .head__nav { min-height: 76px; padding: 12px var(--sh-gutter); gap: 30px; }
html.sh26.sh-ix .brand img { display: none; }
html.sh26.sh-ix .brand::after {
  content: "SpiderHunts";
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sh-ink);
}
html.sh26.sh-ix .brand:hover::after { color: var(--sh-blue); }
html.sh26.sh-ix .menu { margin-left: auto; }
html.sh26.sh-ix .menu a { font-family: var(--sh-font); font-weight: 500; font-size: 15.5px; color: var(--sh-ink); }
html.sh26.sh-ix .menu a:hover { color: var(--sh-blue); }
html.sh26.sh-ix .head__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: 0;
  padding: 7px 7px 7px 22px;
  border-radius: var(--sh-r-pill);
  background: var(--sh-sand);
  box-shadow: none;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: 15.5px;
  color: var(--sh-ink);
}
html.sh26.sh-ix .head__cta::after {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--sh-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8 7h9v9'/%3E%3C/svg%3E") center / 18px no-repeat;
}
html.sh26.sh-ix .head__cta:hover { background: var(--sh-sand-2); color: var(--sh-ink); }
html.sh26.sh-ix .burger { border: 0; background: var(--sh-sand); width: 44px; height: 44px; }
html.sh26.sh-ix .burger span { background: var(--sh-ink); }
html.sh26.sh-ix .drawer { background: var(--sh-ground); border-bottom: 1px solid var(--sh-line); }
html.sh26.sh-ix .drawer a { color: var(--sh-ink); border-color: var(--sh-line); }
html.sh26.sh-ix .drawer ul a { font-family: var(--sh-display); font-weight: 500; font-size: 24px; }
html.sh26.sh-ix .drawer__cta a { font-family: var(--sh-font); font-size: 15.5px; color: var(--sh-ink); }
html.sh26.sh-ix .drawer__cta a:first-child { padding: 12px 22px; border-radius: var(--sh-r-pill); background: var(--sh-blue); color: var(--sh-paper); }
html.sh26.sh-ix .drawer__cta a:last-child { border-color: var(--sh-line); color: var(--sh-ink); }
html.sh26.sh-ix .drawer a i { color: var(--sh-blue); }
@media (max-width: 900px) {
  /* the drawer carries the call button on small screens */
  html.sh26.sh-ix .head__cta { display: none; }
  html.sh26.sh-ix .burger { margin-left: auto; }
}
@media (max-width: 640px) {
  html.sh26.sh-ix .brand::after { font-size: 27px; }
  html.sh26.sh-ix .head__nav { min-height: 64px; }
}

/* Hero: no dark slab. A centred serif title, as on the service pages */
html.sh26.sh-ix .hero { padding: clamp(56px, 8vw, 120px) var(--sh-gutter) clamp(40px, 5vw, 72px); background: var(--sh-ground); }
html.sh26.sh-ix .hero__glow { display: none; }
html.sh26.sh-ix .hero__in { text-align: center; }
html.sh26.sh-ix .eyebrow {
  justify-content: center;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: var(--sh-label);
  letter-spacing: .04em;
  color: var(--sh-muted);
}
html.sh26.sh-ix .eyebrow::before {
  width: 14px;
  height: 14px;
  background: var(--sh-blue);
  -webkit-mask: var(--sh-i-corner) center / contain no-repeat;
  mask: var(--sh-i-corner) center / contain no-repeat;
}
html.sh26.sh-ix .hero__grid { display: block; margin-top: 22px; }
html.sh26.sh-ix .hero h1 {
  max-width: 14em;
  margin: 0 auto;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: var(--sh-h1);
  line-height: var(--sh-lh-display);
  letter-spacing: var(--sh-track-display);
  color: var(--sh-ink);
}
html.sh26.sh-ix .hero__lede {
  max-width: 34em;
  margin: 26px auto 0;
  font-family: var(--sh-font);
  font-weight: 500;
  font-size: var(--sh-lead);
  line-height: var(--sh-lead-lh);
  letter-spacing: -0.02em;
  color: var(--sh-body);
}
html.sh26.sh-ix .stats { max-width: 1080px; margin: clamp(48px, 6vw, 88px) auto 0; padding-top: 0; border-top: 0; gap: 24px; text-align: left; }
html.sh26.sh-ix .stat { flex: 1 1 200px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--sh-rule); }
html.sh26.sh-ix .stat:first-child { padding-left: 0; }
html.sh26.sh-ix .stat__n { font-family: var(--sh-display); font-weight: 500; font-size: clamp(36px, 3.6vw, 54px); letter-spacing: var(--sh-track-display); color: var(--sh-ink); }
html.sh26.sh-ix .stat__l { font-size: 15px; color: var(--sh-muted); }

/* Featured article: a sand card */
html.sh26.sh-ix .featured { padding: clamp(24px, 3vw, 48px) var(--sh-gutter); }
html.sh26.sh-ix .feat { border: 0; border-radius: var(--sh-r-card); background: var(--sh-sand); box-shadow: none; }
html.sh26.sh-ix .feat:hover { transform: translateY(-3px); }
html.sh26.sh-ix .feat__kicker { font-family: var(--sh-font); font-weight: 500; letter-spacing: .04em; font-size: var(--sh-label); }
html.sh26.sh-ix .feat__title { font-family: var(--sh-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: var(--sh-track-display); }
html.sh26.sh-ix .feat__excerpt { font-size: 17px; color: var(--sh-body); }
html.sh26.sh-ix .feat__btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 7px 7px 7px 22px;
  border-radius: var(--sh-r-pill); background: var(--sh-blue); color: var(--sh-paper); font-weight: 500; box-shadow: none;
}
html.sh26.sh-ix .feat__btn > span {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sh-paper); color: var(--sh-blue);
}
html.sh26.sh-ix .feat__viz, html.sh26.sh-ix .feat__rows { background: var(--sh-paper); border-color: transparent; box-shadow: none; border-radius: var(--sh-r-field); }
html.sh26.sh-ix .feat__row--on { background: var(--sh-blue-tile); color: var(--sh-ink); }

/* Search and topic chips */
html.sh26.sh-ix .filters { padding: 0 var(--sh-gutter); }
html.sh26.sh-ix .search input { min-height: 56px; border: 0; background: var(--sh-sand); font-family: var(--sh-font); font-size: 16px; }
html.sh26.sh-ix .search input:focus { background: var(--sh-paper); box-shadow: 0 0 0 2px var(--sh-blue); }
html.sh26.sh-ix .chips { border-bottom: 0; }
html.sh26.sh-ix .chip { border: 0; background: var(--sh-sand); font-family: var(--sh-font); font-weight: 500; font-size: 15px; color: var(--sh-ink); }
html.sh26.sh-ix .chip:hover { background: var(--sh-sand-2); }
html.sh26.sh-ix .chip span { color: var(--sh-muted); }
html.sh26.sh-ix .chip[aria-pressed="true"] { background: var(--sh-blue); color: var(--sh-paper); }
html.sh26.sh-ix .chip[aria-pressed="true"] span { color: rgba(255, 255, 255, .8); }

/* Topics: a serif heading over a ruled list, the lead card riding along */
html.sh26.sh-ix .topics { padding: 0 var(--sh-gutter) var(--sh-section); }
html.sh26.sh-ix .topic { margin-top: clamp(64px, 7vw, 112px); }
html.sh26.sh-ix .topic__name { font-family: var(--sh-display); font-weight: 500; font-size: clamp(32px, 3.6vw, 56px); line-height: 1.02; letter-spacing: var(--sh-track-display); }
html.sh26.sh-ix .topic__rule { background: var(--sh-rule); height: 1px; }
html.sh26.sh-ix .topic__count { font-family: var(--sh-font); font-weight: 500; font-size: var(--sh-label); letter-spacing: .04em; color: var(--sh-muted); }
html.sh26.sh-ix .lead { top: 100px; padding: 0; border: 0; border-radius: var(--sh-r-card); background: var(--sh-sand); overflow: hidden; }
html.sh26.sh-ix .lead__tag { padding: 22px; border-radius: 0; background: var(--sh-blue); }
html.sh26.sh-ix .lead__cat { font-family: var(--sh-font); font-weight: 500; font-size: var(--sh-label); letter-spacing: .04em; color: rgba(255, 255, 255, .8); }
html.sh26.sh-ix .lead__sub { color: var(--sh-paper); font-size: 15px; }
html.sh26.sh-ix .lead__arrow { border: 0; background: var(--sh-paper); color: var(--sh-blue); }
html.sh26.sh-ix .lead__title { margin: 0; padding: 22px 22px 0; font-family: var(--sh-display); font-weight: 500; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.08; letter-spacing: var(--sh-track-display); }
html.sh26.sh-ix .lead__excerpt { margin: 0; padding: 12px 22px 0; font-size: 16px; color: var(--sh-body); }
html.sh26.sh-ix .lead__date { margin: 0; padding: 12px 22px 0; font-family: var(--sh-font); color: var(--sh-muted); }
html.sh26.sh-ix .lead::after { content: ""; display: block; height: 24px; }
html.sh26.sh-ix .lead:hover .lead__title { color: var(--sh-blue); }
html.sh26.sh-ix .rows { border-top: 1px solid var(--sh-rule); }
html.sh26.sh-ix .row { padding: 18px 2px; border-bottom: 1px solid var(--sh-line); color: var(--sh-ink); }
html.sh26.sh-ix .row:hover { color: var(--sh-blue); padding-left: 10px; }
html.sh26.sh-ix .row__title { font-family: var(--sh-font); font-weight: 500; font-size: 17px; line-height: 1.32; letter-spacing: -0.015em; }
html.sh26.sh-ix .row__cat,
html.sh26.sh-ix .row__date { font-family: var(--sh-font); font-weight: 500; font-size: 12.5px; letter-spacing: .03em; color: var(--sh-muted); }
html.sh26.sh-ix .row__dot { background: var(--sh-blue); }
html.sh26.sh-ix .row__excerpt { font-size: 15px; color: var(--sh-body); }
html.sh26.sh-ix .row__arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--sh-sand); font-size: 14px; color: var(--sh-blue); transition: background-color var(--sh-fast) ease; }
html.sh26.sh-ix .row:hover .row__arrow { background: var(--sh-blue-tile); }

/* Footer: sand, ink type, blue pills, the giant wordmark */
html.sh26.sh-ix .foot { background: var(--sh-sand); color: var(--sh-ink); container-type: inline-size; }
html.sh26.sh-ix .foot__glow { display: none; }
html.sh26.sh-ix .foot__top { padding-left: var(--sh-gutter); padding-right: var(--sh-gutter); }
html.sh26.sh-ix .foot__lead { border-bottom: 1px solid var(--sh-sand-2); }
html.sh26.sh-ix .foot__lead p:first-child { font-family: var(--sh-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 48px); letter-spacing: var(--sh-track-display); color: var(--sh-ink); }
html.sh26.sh-ix .foot__lead p { color: var(--sh-body); }
html.sh26.sh-ix .btn-sky { padding: 7px 7px 7px 22px; gap: 14px; background: var(--sh-blue); color: var(--sh-paper); font-weight: 500; }
html.sh26.sh-ix .btn-sky span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--sh-paper); color: var(--sh-blue); }
html.sh26.sh-ix .btn-sky:hover { color: var(--sh-paper); background: var(--sh-blue-ink); transform: none; }
html.sh26.sh-ix .btn-ghost { border: 0; background: var(--sh-paper); color: var(--sh-ink); font-weight: 500; }
html.sh26.sh-ix .foot__h { font-family: var(--sh-font); font-weight: 500; font-size: var(--sh-label); letter-spacing: .04em; color: var(--sh-muted); }
html.sh26.sh-ix .foot a { color: var(--sh-ink); }
html.sh26.sh-ix .foot a:hover { color: var(--sh-blue); }
html.sh26.sh-ix .foot p,
html.sh26.sh-ix .foot li,
html.sh26.sh-ix .foot small { color: var(--sh-body); }
html.sh26.sh-ix .foot .soc { border-color: var(--sh-sand-2); background: var(--sh-paper); color: var(--sh-ink); }
html.sh26.sh-ix .foot::after {
  content: "SpiderHunts";
  position: relative;
  display: block;
  padding: 0 var(--sh-gutter) .12em;
  font-family: var(--sh-display);
  font-weight: 500;
  font-size: min(calc((100cqi - 2 * var(--sh-gutter)) / 4.8), calc(1320px / 4.8));
  line-height: .82;
  letter-spacing: -0.03em;
  white-space: nowrap;
  text-align: center;
  color: var(--sh-blue);
  -webkit-user-select: none;
  user-select: none;
}

/* Cookie notice: the site's sand card */
html.sh26.sh-ix .ck__in { border: 0; border-radius: var(--sh-r-card); background: var(--sh-sand); box-shadow: var(--sh-shadow); }
html.sh26.sh-ix .ck__in strong { font-family: var(--sh-display); font-weight: 500; font-size: 20px; }
html.sh26.sh-ix .ck__b--yes { border-color: var(--sh-blue); background: var(--sh-blue); }
html.sh26.sh-ix .ck__b--no { border-color: transparent; background: var(--sh-paper); }

/* ===================== Category pages: /blog/category/* =====================
   style-light.css sets these with body.light ... !important, so the
   overrides carry the same weight. */
html.sh26 body .cat-hero { text-align: center; }
html.sh26 body .cat-hero__eyebrow {
  padding: 0 !important; border: 0 !important; background: none !important;
  font-family: var(--sh-font); font-weight: 500; font-size: var(--sh-label); letter-spacing: .04em; color: var(--sh-muted) !important;
}
html.sh26 body .cat-hero__title {
  max-width: 14em; margin-left: auto; margin-right: auto;
  font-family: var(--sh-display) !important; font-weight: 500 !important; font-size: var(--sh-h1) !important;
  line-height: var(--sh-lh-display) !important; letter-spacing: var(--sh-track-display) !important; color: var(--sh-ink) !important;
}
html.sh26 body .cat-hero__sub { max-width: 34em; margin-left: auto; margin-right: auto; font-size: var(--sh-lead); line-height: var(--sh-lead-lh); color: var(--sh-body) !important; }
html.sh26 body .cat-hero__count { border: 0 !important; background: var(--sh-sand) !important; font-family: var(--sh-font); font-weight: 500; color: var(--sh-ink) !important; }
html.sh26 body .cat-grid { gap: var(--sh-gap); }
html.sh26 body .cat-post-card {
  border: 0 !important;
  border-radius: var(--sh-r-card) !important;
  background: var(--sh-sand) !important;
  box-shadow: none !important;
  transition: background-color var(--sh-fast) ease, transform .45s var(--sh-ease);
}
html.sh26 body .cat-post-card:hover { background: var(--sh-sand-2) !important; box-shadow: none !important; transform: translateY(-3px); }
html.sh26 body .cat-post-card__date { font-family: var(--sh-font); font-weight: 500; font-size: 12.5px; letter-spacing: .03em; color: var(--sh-muted) !important; }
html.sh26 body .cat-post-card__title { font-family: var(--sh-display) !important; font-weight: 500 !important; font-size: 22px !important; line-height: 1.15 !important; letter-spacing: -0.015em; color: var(--sh-ink) !important; }
html.sh26 body .cat-post-card__link { font-weight: 500; color: var(--sh-blue) !important; }
html.sh26 body .cat-breadcrumb { font-size: 14px; color: var(--sh-muted) !important; }
html.sh26 body .cat-breadcrumb a { color: var(--sh-ink) !important; }
html.sh26 body .cat-cta { border: 0 !important; border-radius: var(--sh-r-card) !important; background: var(--sh-sand) !important; }
html.sh26 body .cat-cta h2 { font-family: var(--sh-display) !important; font-weight: 500 !important; font-size: clamp(28px, 3vw, 40px) !important; color: var(--sh-ink) !important; }
html.sh26 body .cat-cta p { color: var(--sh-body) !important; }
html.sh26 body .cat-cta a {
  display: inline-flex; align-items: center; padding: 14px 24px !important; border-radius: var(--sh-r-pill) !important;
  background: var(--sh-blue) !important; color: var(--sh-paper) !important; font-weight: 500 !important;
}