/* Sidebar Marketing.
   The homepage loads only this file. The older pages (about, automation,
   legal, platforms, 404, the application forms) load styles.css first and
   then this, which gives them the shared nav, footer, focus style and
   cookie banner. Homepage-only rules are scoped under .sbm-page.

   Light mode only: a pure white page, near-black text, one coral accent,
   hairline rules. Contrast, checked (WCAG 2.1):
     text #1A1A1A on white 16.9:1
     secondary #595959 on white 7.0:1
     ink #212121 on coral #FB9280 7.3:1
   Coral never carries text (2.2:1 on white) and never stands alone as a
   focus ring. */

:root{
  /* Brand. Coral is the only accent. */
  --sbm-coral:#FB9280;
  /* The brand coral is 2.2:1 on white, so small text uses a darkened
     version of the same hue (5.5:1, checked) and the light coral stays
     for marks, rules and fills that carry no text. */
  --sbm-coral-text:#B4442C;
  --sbm-ink:#212121;

  --sbm-bg:#FFFFFF;
  /* A near-white for the few fills that need to read as a band. */
  --sbm-bg-alt:#FAFAFA;
  --sbm-fg:#1A1A1A;
  --sbm-muted:#595959;
  --sbm-rule:#E5E5E5;
  --sbm-rule-strong:#D4D4D4;
  color-scheme:light;

  /* The older pages' palette (styles.css), pointed at the same values. */
  --coral:#FB9280;
  --coral-bg:rgba(251,146,128,.14);
  --coral-border:rgba(251,146,128,.45);
  /* The light coral is only 2.2:1 as text, so where the older pages used a
     coral text shade they get the near-black instead. */
  --coral-dark:#1A1A1A;
  --coral-darker:#000000;

  /* Headings are self-hosted Fraunces (SIL Open Font License). Body type
     is the reader's own system face, so there is nothing to download and
     nothing to wait for. The About section has two faces of its own. */
  --sbm-head:'Fraunces',Georgia,'Times New Roman',serif;
  --sbm-font:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --sbm-about-font:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --sbm-sign-font:'Mrs Saint Delafield','Snell Roundhand','Apple Chancery',cursive;

  --sbm-gutter:clamp(16px,4vw,48px);
  --sbm-max:1280px;
  /* Fraunces's optical size axis: smaller for body-sized headings. */
  --sbm-head-opsz:'opsz' 40;

  /* Nav bar. The inner row is a fixed 44px (the minimum touch target), so
     the bar height is only ever that plus its vertical padding. */
  --sbm-bar-inner:44px;
  --sbm-bar-pad:18px;
  --sbm-bar-pad-scrolled:12px;
}

@media (max-width:1023px){
  :root{
    --sbm-bar-pad:14px;
    --sbm-bar-pad-scrolled:9px;
  }
}

/* Self-hosted so no font service sees the reader's IP, which is what the
   privacy notice says. Fraunces is variable from 400 to 700, served as one
   file the browser interpolates. */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/fraunces-variable.woff2') format('woff2-variations'),
      url('fonts/fraunces-variable.woff2') format('woff2');
}

/* Two faces used only by the About section, both self-hosted for the same
   reason and both under the SIL Open Font License. Instrument Sans carries
   the copy and the stats; Mrs Saint Delafield signs it off. Neither is
   loaded as a critical face, so swap is the right display. */
@font-face{
  font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('fonts/instrument-sans-variable.woff2') format('woff2-variations'),
      url('fonts/instrument-sans-variable.woff2') format('woff2');
}
@font-face{
  font-family:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/mrs-saint-delafield.woff2') format('woff2');
}

/* Anchor targets land below the bar, not under it. Smooth scrolling only
   for people who have not asked for reduced motion. */
html{scroll-padding-top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad-scrolled) + 16px)}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* One focus style for the whole site: a solid ring in the text colour
   (16:1) with the coral ring around it. The light coral alone is only
   2.2:1 on white, so it never carries the focus state by itself. */
:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:3px;box-shadow:0 0 0 3px var(--sbm-fg)}

.sbm-skip{position:absolute;left:var(--sbm-gutter);top:-200px;z-index:10001;
  background:var(--sbm-fg);color:var(--sbm-bg);padding:14px 18px;
  font:600 15px/1 var(--sbm-font);text-decoration:none}
.sbm-skip:focus{top:12px}

.sbm-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
/* One shape for every button on the site: a square-cornered rectangle,
   a solid near-black fill for the primary action, a hairline outline for
   everything else. No pills, no coral fills, no icons bolted on. */
.sbm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 20px;border:1px solid transparent;border-radius:2px;
  font:600 15px/1.1 var(--sbm-font);text-decoration:none;
  white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-btn--solid{position:relative;background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
/* A coral rule under the primary button: the accent without a coral fill. */
.sbm-btn--solid::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--sbm-coral)}
.sbm-btn--solid:hover{background:#000;border-color:#000}
.sbm-btn--outline{background:transparent;border-color:var(--sbm-rule-strong);color:var(--sbm-fg)}
.sbm-btn--outline:hover{border-color:var(--sbm-fg)}
.sbm-btn--lg{min-height:52px;padding:0 26px;font-size:16px}
@media (prefers-reduced-motion:reduce){
  .sbm-btn{transition:none}
}

/* ---------- logo (assets/brand/sidebar-logo-*.svg, inlined) ----------
   Charcoal parts use currentColor, so the logo follows the text colour
   into dark mode; the swoosh stays coral and the cut-outs are holes. */
.sbm-logo{display:inline-flex;align-items:center;min-height:44px;color:var(--sbm-fg);text-decoration:none}
.sbm-logo-svg{display:block;height:34px;width:auto}
.sbm-logo--sm .sbm-logo-svg{height:30px}
.sbm-nav .sbm-logo{margin-right:auto}
@media (max-width:1023px){
  .sbm-nav .sbm-logo-svg{height:31px}
}

/* ---------- wordmark ---------- */
.sbm-wordmark{font:700 20px/1 var(--sbm-font);letter-spacing:-.02em;color:var(--sbm-fg);
  text-decoration:none;white-space:nowrap}
.sbm-wordmark--sm{font-size:18px}

/* ---------- navigation ----------
   The header keeps one constant height and only the bar inside it
   shrinks on scroll. If the header itself shrank, the page below would
   jump up by the difference, the browser's scroll anchoring would pull
   the scroll position back under 80px, and the bar would flicker
   between the two states. The strip left under the shrunk bar is
   transparent and lets clicks through. */
.sbm-header{position:sticky;top:0;z-index:100;
  height:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad) + 1px);
  pointer-events:none;font-family:var(--sbm-font)}
.sbm-bar{pointer-events:auto;background:var(--sbm-bg);
  border-bottom:1px solid var(--sbm-rule);padding-block:var(--sbm-bar-pad)}

.sbm-nav{max-width:var(--sbm-max);height:var(--sbm-bar-inner);margin:0 auto;
  padding-inline:var(--sbm-gutter);display:flex;align-items:center;gap:24px}
.sbm-nav .sbm-wordmark{margin-right:auto}

.sbm-panel{display:flex;align-items:center;gap:16px;flex:1}
/* Plain text links. The section you are in gets a coral underline. */
.sbm-nav .sbm-links{display:flex;align-items:center;gap:4px;margin:0 auto;padding:0;list-style:none}
.sbm-links a{display:inline-block;padding:10px 14px;font:500 15px/1.2 var(--sbm-font);color:var(--sbm-fg);
  text-decoration:none;text-underline-offset:7px;text-decoration-thickness:2px}
.sbm-links a:hover{text-decoration-line:underline;text-decoration-color:var(--sbm-rule-strong)}
.sbm-links a[aria-current]{text-decoration-line:underline;text-decoration-color:var(--sbm-coral)}

.sbm-nav-actions{display:flex;align-items:center;gap:22px}
.sbm-engine-btn{display:inline-flex;align-items:center;min-height:44px;color:var(--sbm-fg);
  font:600 15px/1 var(--sbm-font);text-decoration:none;white-space:nowrap;text-underline-offset:6px}
.sbm-engine-btn:hover{text-decoration:underline}
@media (min-width:1024px){
  /* Room for the focus ring around the text; the negative margin keeps the gap to Apply. */
  .sbm-engine-btn{padding-inline:10px;margin-inline:-10px}
  /* Current section: a faux-bold as well as the coral line, without widening the link. */
}
/* Apply opens a short menu on click, never on hover: two ways in, the ads
   application and an automation enquiry. Escape closes it, as does a click
   anywhere else, and focus returns to the button. */
.sbm-apply{position:relative}
.sbm-apply-caret{width:0;height:0;margin-left:2px;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor}
.sbm-apply-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:20;display:grid;width:min(23rem,80vw);
  padding:6px;background:var(--sbm-bg);border:1px solid var(--sbm-rule-strong);border-radius:2px}
.sbm-apply-menu[hidden]{display:none}
.sbm-apply-menu a{display:grid;gap:3px;padding:12px 14px;border-radius:2px;text-decoration:none;
  transition:background-color .15s ease}
.sbm-apply-menu a:hover{background:var(--sbm-bg-alt)}
.sbm-apply-h{font-weight:600;font-size:15px;line-height:1.3}
.sbm-apply-s{font-size:13.5px;line-height:1.4;color:var(--sbm-muted)}
.sbm-apply-menu a + a{border-top:1px solid var(--sbm-rule);border-radius:0 0 2px 2px}
@media (prefers-reduced-motion:reduce){
  .sbm-apply-menu a{transition:none}
}
.sbm-nav-cta{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:2px;
  background:var(--sbm-fg);color:var(--sbm-bg);font:600 15px/1 var(--sbm-font);text-decoration:none;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease}
.sbm-nav-cta:hover{background:#000}
.sbm-nav-cta:focus-visible{outline-offset:4px;box-shadow:0 0 0 2px var(--sbm-bg-alt),0 0 0 4px var(--sbm-fg)}
@media (min-width:1024px) and (max-width:1199px){
  /* Short "Apply" on narrower desktops; the full wording stays for screen readers. */
  .sbm-cta-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sbm-links a{padding:10px 11px}
}
@media (prefers-reduced-motion:reduce){
  .sbm-nav-cta{transition:none}
}

.sbm-menu-btn{display:none}
@media (min-width:1024px){
  .sbm-menu-fp,.sbm-menu-extra,.sbm-link-num{display:none}
}


/* ---------- mobile: full-screen overlay ----------
   The panel becomes a fixed, full-screen cream layer that sits behind
   the bar (z-index -1 inside the header's stacking context), so the
   wordmark and the Close button stay visible and usable on top.
   Gated on .sbm-js (set by a one-line script in each page's head) so
   that without JavaScript the links still show, wrapped under the
   wordmark, instead of hiding behind a button that cannot open. */
@media (max-width:1023px){
  .sbm-menu-btn{align-items:center;gap:10px;min-height:44px;min-width:44px;
    margin-right:-6px;padding:0 6px;background:none;border:0;
    font:600 15px/1 var(--sbm-font);color:var(--sbm-fg);cursor:pointer}
  .sbm-js .sbm-menu-btn{display:inline-flex}
  .sbm-menu-icon{position:relative;display:block;width:22px;height:14px}
  .sbm-menu-icon span{position:absolute;left:0;right:0;height:2px;background:var(--sbm-fg)}
  .sbm-menu-icon span:nth-child(1){top:0}
  .sbm-menu-icon span:nth-child(2){top:6px}
  .sbm-menu-icon span:nth-child(3){top:12px}
  .sbm-menu-btn[aria-expanded="true"] .sbm-menu-icon span:nth-child(1){top:6px;transform:rotate(45deg)}
  .sbm-menu-btn[aria-expanded="true"] .sbm-menu-icon span:nth-child(2){opacity:0}
  .sbm-menu-btn[aria-expanded="true"] .sbm-menu-icon span:nth-child(3){top:6px;transform:rotate(-45deg)}

  /* The overlay is always laid out but hidden, so visibility can keep the
     closed menu out of the tab order and away from screen readers. */
  .sbm-js .sbm-panel{display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;inset:0;z-index:-1;overflow-x:hidden;overflow-y:auto;
    background:var(--sbm-bg);visibility:hidden;pointer-events:none;
    scroll-padding-top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad) + 16px);
    padding:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad) + 24px) var(--sbm-gutter)
            calc(24px + env(safe-area-inset-bottom))}
  .sbm-header.is-open{z-index:10000}
  .sbm-header.is-open .sbm-panel{visibility:visible;pointer-events:auto}

  .sbm-js .sbm-links{flex-direction:column;align-items:stretch;gap:0;margin:0 0 32px;padding:0}
  .sbm-js .sbm-links li{border-bottom:1px solid var(--sbm-rule)}
  .sbm-js .sbm-links a{position:relative;display:flex;align-items:baseline;gap:16px;width:100%;padding:18px 0 16px;
    font-size:clamp(32px,9vw,46px);font-weight:700;letter-spacing:-.03em;line-height:1.05;text-decoration:none}
  .sbm-js .sbm-links a::after{content:'';position:absolute;right:0;bottom:50%;width:22px;height:2px;border-radius:1px;
    background:var(--sbm-coral);opacity:0}
  .sbm-js .sbm-links a:hover::after,.sbm-js .sbm-links a[aria-current]::after{opacity:1}
  .sbm-link-num{flex:none;min-width:2ch;font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--sbm-muted);
    transform:translateY(-.9em)}

  .sbm-menu-extra{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-bottom:20px;font-size:17px}
  .sbm-menu-extra-k{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
    color:var(--sbm-muted)}
  .sbm-menu-extra a{color:var(--sbm-fg);font-weight:600;text-decoration:none}
  .sbm-js .sbm-nav-actions{flex-direction:column;align-items:stretch;gap:10px}
  .sbm-js .sbm-engine-btn,.sbm-js .sbm-nav-cta{justify-content:center;min-height:52px;border-radius:2px;font-size:16px}
  .sbm-js .sbm-apply,.sbm-js .sbm-apply .sbm-nav-cta{width:100%}
  .sbm-js .sbm-apply-menu{position:static;width:100%;margin-top:10px;border-color:var(--sbm-rule)}
  .sbm-js .sbm-engine-btn{border:1px solid var(--sbm-rule-strong);background:var(--sbm-bg)}
  .sbm-js .sbm-engine-btn:hover{text-decoration:none;border-color:var(--sbm-fg)}


  /* No JavaScript: a plain wrapped row under the wordmark. */
  html:not(.sbm-js) .sbm-header{position:static;height:auto}
  html:not(.sbm-js) .sbm-nav{height:auto;flex-wrap:wrap;row-gap:4px}
  html:not(.sbm-js) .sbm-panel{width:100%;flex-wrap:wrap;gap:8px 24px}
  html:not(.sbm-js) .sbm-links{flex-wrap:wrap;gap:0 4px;margin:0}
}
html.sbm-menu-open{overflow:hidden}

/* ============================================================
   PAGE BASE (new-design pages only: body.sbm-page)
   ============================================================ */
.sbm-page{margin:0;background:var(--sbm-bg);color:var(--sbm-fg);
  font-family:var(--sbm-font);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sbm-page *,.sbm-page *::before,.sbm-page *::after{box-sizing:border-box}
.sbm-page :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure,table){margin:0}
.sbm-page :where(ul,ol){padding:0;list-style:none}
/* Zero specificity, so it never outranks a button's own text colour. */
:where(.sbm-page a:not(.sbm-skip)){color:inherit}
.sbm-page img{display:block;max-width:100%}

.sbm-wrap{max-width:var(--sbm-max);margin:0 auto;padding-inline:var(--sbm-gutter)}
.sbm-section{padding-block:clamp(72px,9vw,128px)}
/* Sections no longer alternate colour; they are separated by a hairline. */
.sbm-section--cream,.sbm-section--bg,.sbm-section--white{background:var(--sbm-bg)}
.sbm-section + .sbm-section{border-top:1px solid var(--sbm-rule)}

/* Type. Serif headings at one weight, tightly tracked; the body is the
   reader's system sans at 17px with a roomy line height. */
.sbm-page :where(h1,h2,h3,h4),.sbm-h1,.sbm-h2,.sbm-h3,.sbm-faq-title,
.sbm-cmp-price,.sbm-contact-title{font-family:var(--sbm-head);font-weight:500;
  font-variation-settings:var(--sbm-head-opsz);font-optical-sizing:none}
.sbm-eyebrow{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;
  color:var(--sbm-coral-text)}
.sbm-h1{font-size:clamp(2.5rem,3.4vw + 1rem,4.25rem);font-weight:500;line-height:1.05;
  letter-spacing:-.02em;text-wrap:balance}
.sbm-h2{text-wrap:balance}
.sbm-h2{font-size:clamp(2.125rem,2.8vw + 1rem,3.5rem);font-weight:400;line-height:1.08;
  letter-spacing:-.02em;max-width:22ch}
.sbm-h3{font-size:1.375rem;font-weight:400;line-height:1.25;letter-spacing:-.015em}
.sbm-lede{font-size:clamp(1.0625rem,.4vw + 1rem,1.25rem);line-height:1.6;max-width:34em}
.sbm-muted{color:var(--sbm-muted)}

.sbm-section-head{display:grid;gap:20px;margin-bottom:clamp(40px,5vw,64px)}
.sbm-intro{max-width:40em;font-size:1.125rem;line-height:1.6}

.sbm-textlink{font-weight:600;color:var(--sbm-fg);text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:5px}
.sbm-textlink{text-decoration-color:var(--sbm-coral)}
.sbm-textlink:hover{text-decoration-thickness:2px}

/* Anything still waiting on real content. Deliberately obvious. */
.sbm-ph{background:var(--sbm-bg);outline:1px dashed var(--sbm-fg);outline-offset:1px;
  padding:0 .2em}

/* ============================================================
   HERO
   ============================================================ */
.sbm-hero{background:var(--sbm-bg);padding-block:clamp(48px,6vw,96px) clamp(56px,7vw,104px)}
.sbm-hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;
  gap:clamp(32px,5vw,80px)}
.sbm-hero-copy .sbm-eyebrow{margin-bottom:24px}
.sbm-hero-copy .sbm-lede{margin-top:28px}
.sbm-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:40px}
.sbm-hero-note{margin-top:28px;font-size:15px;line-height:1.55;color:var(--sbm-muted);max-width:30em}

.sbm-board{display:block;width:100%;height:auto}
.sbm-board .tr{fill:none;stroke:var(--sbm-fg);stroke-opacity:.24;stroke-width:1.25;
  stroke-linecap:round;stroke-linejoin:round}
.sbm-board .via{fill:var(--sbm-bg-alt);stroke:var(--sbm-fg);stroke-opacity:.34;stroke-width:1.25}
.sbm-board .node{fill:var(--sbm-fg)}
.sbm-board .ico{fill:none;stroke:var(--sbm-bg);stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round}
.sbm-board .ico-fill{fill:var(--sbm-bg)}
.sbm-board .ico-sep{stroke:var(--sbm-fg)}
.sbm-board .lbl{font-family:var(--sbm-font);font-size:14px;font-weight:600;fill:var(--sbm-fg)}

/* Pulses: short coral dashes on copies of the traces, travelling from
   each satellite into the hub. Every pulse path has pathLength="100", so
   one 9-unit dash with a 200-unit gap is always a single short segment.
   The dash starts well before the path (offset 20) and finishes well past
   it (offset -120), then rests off-path for the rest of the cycle. It must
   clear the ends fully: a zero-length dash sitting exactly on an end
   would still draw as a dot because of the round line cap.
   sidebar.js gives each one its own 3 to 7 second loop and a random
   delay so they never line up. */
.sbm-board .pulse{fill:none;stroke:var(--sbm-coral);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:9 200;stroke-dashoffset:20;
  animation:sbm-pulse 5s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes sbm-pulse{
  0%{stroke-dashoffset:20}
  72%,100%{stroke-dashoffset:-120}
}
@media (prefers-reduced-motion:reduce){
  .sbm-board .pulses{display:none}
  .sbm-board .pulse{animation:none}
}

@media (max-width:959px){
  .sbm-hero-grid{grid-template-columns:minmax(0,1fr)}
  .sbm-hero-board{width:100%;max-width:560px;margin-inline:auto}
}
/* Phones: fewer traces and no labels, which would be too small to read. */
@media (max-width:559px){
  .sbm-board .detail,.sbm-board .lbl{display:none}
  /* Full width, and allowed to run onto a second line: the automation
     button's label is too long to hold on one at this width. */
  .sbm-hero-actions .sbm-btn{width:100%;white-space:normal;text-align:center;
    padding-block:12px;line-height:1.25}
}

/* Homepage service showcase: one compact view of the three connected offers. */
.sbm-showcase{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(40px,4.5vw,68px) clamp(48px,6vw,84px)}
.sbm-showcase::before{content:"";position:absolute;z-index:0;top:-9%;right:3%;
  width:clamp(260px,29vw,370px);aspect-ratio:1;pointer-events:none;
  background:url("services/sidebar-mark-watermark.svg") center/contain no-repeat;
  opacity:.14;transform:rotate(-14deg)}
.sbm-showcase>.sbm-wrap{position:relative;z-index:1}
.sbm-showcase-head{max-width:900px}
.sbm-showcase-head .sbm-h1{max-width:22ch;font-size:clamp(2.75rem,4.5vw,4.75rem)}
.sbm-showcase-head .sbm-lede{max-width:42em;margin-top:18px}
.sbm-service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,42px);margin-top:clamp(28px,3.5vw,46px)}
.sbm-service{display:grid;grid-template-rows:auto auto 1fr auto;min-width:0;
  padding-top:0;color:var(--sbm-fg);text-decoration:none}
.sbm-service-art{height:clamp(150px,18vw,220px);display:flex;align-items:center;justify-content:center;
  overflow:hidden}
.sbm-service-art img{width:100%;height:100%;object-fit:contain;transition:transform .25s ease}
.sbm-service-title{margin-top:10px;font-family:var(--sbm-font);font-size:clamp(1.125rem,1vw + .7rem,1.375rem);
  font-weight:600;line-height:1.25;letter-spacing:-.02em}
.sbm-service-copy{margin-top:8px;max-width:32ch;color:var(--sbm-muted);font-size:15px;line-height:1.55}
.sbm-service-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;
  margin-top:16px;padding:10px 14px;border:1px solid var(--sbm-rule-strong);border-radius:4px;
  color:var(--sbm-fg);font-size:14px;font-weight:600;text-align:center;text-decoration:none;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-service:hover .sbm-service-art img{transform:translateY(-4px)}
.sbm-service:hover .sbm-service-link{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-service:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:5px;border-radius:2px}
@media(max-width:639px){
  .sbm-showcase{padding-block:32px 46px}
  .sbm-showcase::before{top:-8%;right:-8%;width:clamp(220px,62vw,290px);opacity:.11;transform:rotate(-16deg)}
  .sbm-showcase-head .sbm-h1{font-size:clamp(2.35rem,10vw,3.5rem)}
  .sbm-showcase-head .sbm-lede{margin-top:12px;font-size:1rem;line-height:1.5}
  .sbm-service-grid{grid-template-columns:1fr;gap:0;margin-top:24px}
  .sbm-service{grid-template-columns:minmax(112px,34vw) minmax(0,1fr);
    grid-template-rows:auto 1fr auto;column-gap:16px;align-items:center;padding-block:10px}
  .sbm-service-art{grid-column:1;grid-row:1/4;height:128px}
  .sbm-service-title{grid-column:2;grid-row:1;align-self:end;margin-top:0;font-size:1.125rem}
  .sbm-service-copy{grid-column:2;grid-row:2;align-self:center;margin-top:5px;font-size:14px}
  .sbm-service-link{grid-column:2;grid-row:3;align-self:start;margin-top:7px;font-size:13px}
}

/* ============================================================
   PACKAGES: comparison table
   ============================================================ */
.sbm-h2--wide{max-width:24ch;margin-top:18px}
.sbm-cmp-intro{margin-top:18px;color:var(--sbm-muted)}
/* Room above the table for the badge to sit on the top edge. */
.sbm-cmp-box{margin-top:clamp(36px,5vw,56px);padding-top:18px}
.sbm-cmp{width:100%;border:1px solid var(--sbm-rule-strong);border-radius:16px;border-collapse:separate;
  border-spacing:0;font-size:16px;line-height:1.4}
.sbm-cmp th,.sbm-cmp td{padding:17px 20px;border-bottom:1px solid var(--sbm-rule);text-align:center;vertical-align:middle}
.sbm-cmp thead th{position:relative;padding:40px 20px 28px;vertical-align:bottom;border-bottom-color:var(--sbm-rule-strong)}
.sbm-cmp tbody th[scope="row"]{text-align:left;font-weight:600}
.sbm-cmp .sbm-cmp-corner{text-align:left}
.sbm-cmp-corner span{font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sbm-muted)}
.sbm-cmp-plan{display:block;font-size:18px;font-weight:700}
.sbm-cmp-price{display:block;margin-top:10px;font-size:clamp(1.875rem,1.3vw + 1.4rem,2.5rem);font-weight:400;line-height:1.05;
  letter-spacing:0}
.sbm-cmp-note{display:block;margin-top:10px;font-size:14px;font-weight:400;color:var(--sbm-muted)}
/* No tinted column: the Growth plan is marked by its badge alone. */
.sbm-cmp .is-hi{background:none}
.sbm-cmp-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);padding:5px 14px;border-radius:999px;
  background:var(--sbm-bg);border:1px solid var(--sbm-coral);color:var(--sbm-fg);font-size:13px;font-weight:600;
  white-space:nowrap}
.sbm-cmp-group th{padding:13px 20px;background:var(--sbm-bg-alt);text-align:left;font-size:13px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase}
.sbm-yes,.sbm-no{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:6px;vertical-align:middle}
.sbm-yes{background:var(--sbm-fg);color:var(--sbm-bg);box-shadow:inset 0 -2px 0 var(--sbm-coral)}
.sbm-no{border:1px solid var(--sbm-rule-strong);color:var(--sbm-muted)}
.sbm-yes svg,.sbm-no svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.sbm-cmp tfoot td{padding:22px 14px;border-bottom:0}
.sbm-cmp-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 16px;
  border:1px solid var(--sbm-rule-strong);border-radius:2px;background:var(--sbm-bg);color:var(--sbm-fg);
  font-weight:600;text-decoration:none;transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.sbm-cmp-btn:hover{border-color:var(--sbm-fg)}
.sbm-cmp-btn--hi{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
.sbm-cmp-btn--hi:hover{background:#000;border-color:#000}
.sbm-arrow{display:none}

/* Full commission detail, under the table */
.sbm-comm-box{margin-top:32px;border-top:1px solid var(--sbm-rule)}
.sbm-comm-btn{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;margin:0;
  padding:20px 0;border:0;background:none;color:var(--sbm-fg);text-align:left;cursor:pointer;
  font:600 17px/1.3 var(--sbm-font)}
.sbm-comm-detail{padding:0 0 28px}
.sbm-comm-detail[hidden]{display:none}
/* Plain rows, one column, no boxes: a label on the left and the figure
   or the answer on the right. */
.sbm-comm{display:grid;gap:36px;max-width:46rem}
.sbm-comm .sbm-h3{font-size:1.0625rem;font-weight:600;font-family:var(--sbm-font);margin-bottom:6px}
.sbm-comm p{font-size:16px;line-height:1.6;color:var(--sbm-muted)}
.sbm-tiers{width:100%;margin-top:14px;border-collapse:collapse;font-size:16px}
.sbm-tiers th,.sbm-tiers td{padding:11px 0;border-bottom:1px solid var(--sbm-rule);text-align:left;vertical-align:top}
.sbm-tiers thead{display:none}
.sbm-tiers th:last-child,.sbm-tiers td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.sbm-tiers tbody th{font-weight:400}
.sbm-terms{margin-top:14px}
.sbm-terms div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;padding:11px 0;
  border-bottom:1px solid var(--sbm-rule);font-size:16px}
.sbm-terms dt{color:var(--sbm-muted)}
.sbm-terms dd{text-align:right}
.sbm-comm-foot{margin-top:28px;font-size:15px;line-height:1.6;color:var(--sbm-muted);max-width:46rem}

/* Plus / minus, shared by the FAQ and the commission detail. The light
   coral would only be 2.2:1 on white, so it sits on a dark ink disc
   (7.3:1) in both modes. */
.sbm-pm{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--sbm-ink)}
.sbm-pm::before,.sbm-pm::after{content:'';position:absolute;left:9px;right:9px;top:14px;height:2px;border-radius:1px;
  background:var(--sbm-coral)}
.sbm-pm::after{transform:rotate(90deg);transition:transform .15s ease}
[aria-expanded="true"] .sbm-pm::after{transform:rotate(0deg)}
@media (prefers-reduced-motion:reduce){
  .sbm-cmp-btn,.sbm-pm::after{transition:none}
}
/* Small laptops: equal plan columns, prices and buttons on one line. */
@media (min-width:860px){
  .sbm-cmp{table-layout:fixed}
  .sbm-cmp thead th:first-child{width:32%}
  .sbm-cmp-price,.sbm-cmp-btn{white-space:nowrap}
  .sbm-cmp .sbm-cell-yes{white-space:normal}
}
/* Phones and small tablets: no sideways scrolling. Each feature name
   gets its own line with the three plans' answers in columns beneath it,
   and the plan names stay pinned under the nav bar while you scroll down
   the rows, so you always know which column is which. */
@media (max-width:859px){
  .sbm-cmp-box{margin-top:28px;padding-top:0}
  .sbm-cmp{display:block;border:0;border-radius:0;font-size:14px}
  .sbm-cmp thead,.sbm-cmp tbody,.sbm-cmp tfoot{display:block}
  .sbm-cmp tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .sbm-cmp th,.sbm-cmp td{display:block;padding:0;border:0}
  .sbm-cmp .is-hi{background:none}
  /* Text scales with the screen, so the narrowest phones get smaller type
     instead of words running into the next column. */
  .sbm-cmp thead th,.sbm-cmp tbody td{text-wrap:balance}
  /* A hairline between the plan columns keeps each answer in its own lane. */
  .sbm-cmp thead th:nth-child(n+3),.sbm-cmp tbody td:nth-child(n+3){border-left:1px solid var(--sbm-rule)}

  .sbm-cmp thead{position:sticky;top:calc(var(--sbm-bar-inner) + 2 * var(--sbm-bar-pad-scrolled) + 1px);z-index:2;
    background:var(--sbm-bg);border-bottom:1px solid var(--sbm-rule-strong)}
  .sbm-cmp thead tr{padding-top:10px}
  .sbm-cmp .sbm-cmp-corner{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sbm-cmp thead th{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px 4px 12px;
    text-align:center}
  .sbm-cmp thead th.is-hi{background:none}
  .sbm-cmp-badge{position:static;transform:none;margin-bottom:6px;padding:2px clamp(5px,1.6vw,8px);
    font-size:clamp(9px,2.6vw,10.5px)}
  .sbm-cmp-plan{font-size:clamp(11.5px,3.45vw,13.5px);white-space:nowrap}
  .sbm-cmp-price{margin-top:3px;font-size:clamp(15px,5vw,20px);white-space:nowrap}
  .sbm-cmp-note{display:none}

  .sbm-cmp tbody tr{row-gap:10px;padding:14px 0;border-bottom:1px solid var(--sbm-rule)}
  .sbm-cmp tbody th[scope="row"]{grid-column:1 / -1;font-size:clamp(13px,3.7vw,14.5px)}
  .sbm-cmp tbody td{display:flex;align-items:center;justify-content:center;min-height:24px;padding:0 6px;
    font-size:clamp(11.5px,3.45vw,13.5px);line-height:1.35}
  .sbm-cmp tbody tr.sbm-cmp-group{padding:22px 0 4px;border-bottom:0}
  .sbm-cmp tbody:first-of-type tr.sbm-cmp-group{padding-top:14px}
  .sbm-cmp-group th{grid-column:1 / -1;padding:8px 10px;border-radius:8px;font-size:11.5px}
  .sbm-yes,.sbm-no{width:22px;height:22px}
  .sbm-yes svg,.sbm-no svg{width:14px;height:14px}
  .sbm-cmp .sbm-cell-yes{flex-direction:column;gap:4px;font-size:clamp(10.5px,3.1vw,12.5px);white-space:normal;text-align:center}

  .sbm-cmp tfoot tr{column-gap:6px;padding-top:18px}
  .sbm-cmp tfoot td{padding:0}
  .sbm-cmp tfoot td:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .sbm-cmp-btn{min-height:46px;gap:6px;padding:0 4px;border-radius:10px;font-size:clamp(12px,3.5vw,14px);white-space:nowrap}
  .sbm-cmp-btn .sbm-arrow{width:14px;height:14px}
}
@media (max-width:399px){
  .sbm-cmp-btn .sbm-arrow{display:none}
}

/* Phones with JavaScript: one package at a time, picked above the table.
   Each row becomes "feature ... answer", and the other two plans' columns
   are hidden. (Column 1 is the feature name; plans are columns 2 to 4.)
   Tablets keep all three plans side by side in the lined layout above. */
.sbm-plan-pick{display:none}
@media (max-width:639px){
  .sbm-js .sbm-plan-pick{display:flex;gap:4px;margin-bottom:18px;padding:4px;border:1px solid var(--sbm-rule);border-radius:4px}
  .sbm-plan-pick button{appearance:none;flex:1 1 auto;min-width:0;min-height:42px;padding:0 8px;border:0;border-radius:2px;
    background:none;color:var(--sbm-fg);font:600 clamp(12.5px,3.8vw,14px)/1.1 var(--sbm-font);white-space:nowrap;cursor:pointer}
  .sbm-plan-pick button[aria-pressed="true"]{background:var(--sbm-fg);color:var(--sbm-bg)}

  .sbm-cmp[data-plan="1"] :is(th,td):is(:nth-child(3),:nth-child(4)),
  .sbm-cmp[data-plan="2"] :is(th,td):is(:nth-child(2),:nth-child(4)),
  .sbm-cmp[data-plan="3"] :is(th,td):is(:nth-child(2),:nth-child(3)){display:none}

  .sbm-cmp[data-plan] thead{position:static;border-bottom:0}
  .sbm-cmp[data-plan] thead tr{grid-template-columns:minmax(0,1fr);padding:0}
  .sbm-cmp[data-plan] thead th:not(.sbm-cmp-corner){align-items:flex-start;justify-content:flex-start;padding:20px;border:0;
    border-radius:16px;background:var(--sbm-bg-alt);text-align:left;text-wrap:wrap}
  .sbm-cmp[data-plan] .sbm-cmp-badge{margin-bottom:10px;padding:3px 10px;font-size:12px}
  .sbm-cmp[data-plan] .sbm-cmp-plan{font-size:16px}
  .sbm-cmp[data-plan] .sbm-cmp-price{margin-top:6px;font-size:2rem}
  .sbm-cmp[data-plan] .sbm-cmp-note{display:block;margin-top:6px;font-size:14px}

  .sbm-cmp[data-plan] tbody tr{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:0;
    padding:13px 0}
  .sbm-cmp[data-plan] tbody th[scope="row"]{grid-column:auto;font-size:14.5px;font-weight:500}
  .sbm-cmp[data-plan] tbody td{justify-content:flex-end;min-height:0;padding:0;border:0;font-size:14.5px;font-weight:600;
    text-align:right;text-wrap:wrap}
  .sbm-cmp[data-plan] tbody tr.sbm-cmp-group{grid-template-columns:minmax(0,1fr);padding:24px 0 6px}
  .sbm-cmp[data-plan] tbody:first-of-type tr.sbm-cmp-group{padding-top:18px}
  .sbm-cmp[data-plan] .sbm-cell-yes{flex-direction:row;gap:8px;font-size:14.5px}

  .sbm-cmp[data-plan] tfoot tr{grid-template-columns:minmax(0,1fr);padding-top:20px}
  .sbm-cmp[data-plan] .sbm-cmp-btn{min-height:52px;font-size:16px}
  .sbm-cmp[data-plan] .sbm-cmp-btn .sbm-arrow{display:block;width:16px;height:16px}
  /* With one plan on screen the button can say which: "Choose Growth". */
  .sbm-cmp[data-plan] .sbm-cmp-btn .sbm-sr{position:static;width:auto;height:auto;margin:0;overflow:visible;
    clip:auto;white-space:nowrap}
}
@media (prefers-reduced-motion:no-preference){
  .sbm-plan-pick button{transition:background-color .15s ease,color .15s ease}
}
@media (max-width:767px){
  .sbm-comm{grid-template-columns:minmax(0,1fr)}
  .sbm-terms div{grid-template-columns:minmax(0,1fr);gap:2px}
  .sbm-comm-detail{padding:0 18px 24px}
  .sbm-comm-btn{padding:16px 18px}
}

/* ============================================================
   AI AND AUTOMATION (/automation)
   ============================================================ */
/* The page opens straight on the packages, so the intro carries the H1. */
.sbm-auto-top{padding-block:clamp(44px,6vw,88px) clamp(56px,7vw,104px)}
.sbm-auto-head{display:grid;gap:18px;max-width:46rem;margin-bottom:clamp(40px,5vw,64px)}
.sbm-auto-head .sbm-h2{max-width:none}
.sbm-auto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,28px);align-items:start}
/* Square cards, a hairline frame, and a coral rule along the top edge. */
.sbm-auto-card{position:relative;display:flex;flex-direction:column;gap:14px;height:100%;
  padding:clamp(26px,2.5vw,34px);border:1px solid var(--sbm-rule);border-radius:2px;background:var(--sbm-bg)}
.sbm-auto-card::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  background:var(--sbm-coral)}
.sbm-auto-num{font-family:var(--sbm-head);font-size:1.125rem;font-variation-settings:'opsz' 20;
  font-variant-numeric:tabular-nums;color:var(--sbm-coral-text)}
.sbm-auto-name{font-family:var(--sbm-head);font-size:clamp(1.5rem,1.1vw + 1.1rem,1.875rem);font-weight:400;
  line-height:1.15;letter-spacing:-.015em}
.sbm-auto-line{color:var(--sbm-muted);font-size:16px;line-height:1.55}
.sbm-auto-price{display:grid;gap:6px;margin-top:6px;padding:18px 0;border-block:1px solid var(--sbm-rule)}
.sbm-auto-price > div{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.sbm-auto-price dt{font-size:15px;color:var(--sbm-muted)}
.sbm-auto-price dd{font-weight:600}
.sbm-auto-list{display:grid;gap:12px;margin-top:4px}
.sbm-auto-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;
  font-size:16px;line-height:1.5}
.sbm-auto-tick{display:grid;place-items:center;width:20px;height:20px;margin-top:3px;border-radius:2px;
  border:1px solid var(--sbm-coral);color:var(--sbm-coral-text)}
.sbm-auto-tick svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;
  stroke-linejoin:round}
.sbm-auto-cta{margin-top:auto;justify-content:center;width:100%}
/* Add-ons: a one-off job on the left, its starting price on the right,
   set large in the serif so the list reads as a price list. */
.sbm-add-head{display:grid;gap:16px;max-width:44rem;margin-bottom:clamp(32px,4vw,48px)}
.sbm-add-list{display:grid;border-top:1px solid var(--sbm-fg)}
.sbm-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,64px);align-items:baseline;
  padding:clamp(22px,2.6vw,30px) 0;border-bottom:1px solid var(--sbm-rule)}
.sbm-add-h{font-size:clamp(1.25rem,1.1vw + 1rem,1.625rem);font-weight:500;line-height:1.15;letter-spacing:-.015em}
.sbm-add-main p{margin-top:8px;max-width:44em;font-size:16.5px;line-height:1.55;color:var(--sbm-muted)}
.sbm-add-p{display:grid;justify-items:end;font-family:var(--sbm-head);font-weight:500;
  font-size:clamp(1.5rem,1.3vw + 1.1rem,2rem);line-height:1;white-space:nowrap}
.sbm-add-from{font-family:var(--sbm-font);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sbm-coral-text);margin-bottom:6px}
@media (max-width:559px){
  .sbm-add{grid-template-columns:minmax(0,1fr);row-gap:10px}
  .sbm-add-p{justify-items:start}
  .sbm-add-from{margin-bottom:2px}
}

/* Enquire block at the foot of the page. */
.sbm-auto-enquire-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);
  align-items:start}
.sbm-auto-enquire-grid .sbm-h2{margin-top:18px}
.sbm-auto-enquire-grid .sbm-intro{margin-top:18px}
.sbm-auto-enquire-actions{margin-top:30px}
.sbm-auto-enquire .sbm-contact-direct{margin-top:0}
@media (max-width:859px){
  .sbm-auto-enquire-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:559px){
  .sbm-auto-enquire-actions .sbm-btn{width:100%;white-space:normal;text-align:center;line-height:1.3;padding:12px 16px}
}
.sbm-auto-addon-list{display:grid;gap:0;border-top:1px solid var(--sbm-rule)}
.sbm-auto-addon-list li{padding:16px 0;border-bottom:1px solid var(--sbm-rule);font-size:17px}
@media (max-width:959px){
  .sbm-auto-grid{grid-template-columns:minmax(0,1fr);max-width:34rem}
}

/* ============================================================
   AI AND AUTOMATION taster (homepage)
   Four pillars across the top, then one evening written out as a log:
   time, what came in, what the system did. Hairlines and tabular
   figures, so it reads like a record rather than a feature grid.
   ============================================================ */
.sbm-ai-head{display:grid;gap:16px;max-width:44rem;margin-bottom:clamp(36px,4.5vw,56px)}

/* What we set up, in three plain columns. */
.sbm-ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);
  margin-top:clamp(40px,5vw,60px)}
.sbm-ai-col-h{font-family:var(--sbm-font);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sbm-coral-text);padding-bottom:14px;border-bottom:1px solid var(--sbm-fg)}
.sbm-ai-col-list{display:grid}
.sbm-ai-col-list li{padding:14px 0;border-bottom:1px solid var(--sbm-rule);font-size:16.5px;line-height:1.5}

.sbm-ai-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(32px,4vw,48px)}
.sbm-ai-cta-note{font-size:15px;color:var(--sbm-muted)}
.sbm-ai-addons{margin-top:clamp(28px,3vw,40px);padding-top:clamp(20px,2.5vw,28px);border-top:1px solid var(--sbm-rule);
  max-width:60rem;font-size:15px;line-height:1.6;color:var(--sbm-muted)}

@media (max-width:1023px){
  .sbm-ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:639px){
  .sbm-ai-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .sbm-ai-cta .sbm-btn{width:100%}
}

/* ============================================================
   Thanks: where every form lands after it posts
   ============================================================ */
.sbm-thanks-wrap{max-width:720px}
.sbm-thanks-wrap .sbm-h1{margin:18px 0 0;max-width:16ch}
.sbm-thanks-wrap .sbm-lede{margin:24px 0 0}
.sbm-thanks-next{margin-top:clamp(40px,5vw,60px);padding-top:clamp(28px,3.5vw,40px);
  border-top:1px solid var(--sbm-rule)}
.sbm-thanks-next-h{margin:0;font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sbm-muted)}
.sbm-thanks-list{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:12px;
  font-size:1.0625rem}
.sbm-thanks-back{margin:clamp(36px,4.5vw,52px) 0 0}

/* ============================================================
   About us: the two of us, in our own type
   ----------------------------------------------------------
   No panels and no borders beyond one hairline, because the whole
   section is meant to read as a page from something printed rather
   than another card on a marketing site. The stats are the heading,
   so there is no separate title above them.
   ============================================================ */
.sbm-about{font-family:var(--sbm-about-font)}
.sbm-about-wrap{max-width:1040px}
.sbm-about .sbm-eyebrow{margin-bottom:clamp(28px,4vw,44px)}

/* The heading. Two stats on one baseline, each a number over a label,
   set in the About face rather than the site serif so the whole block
   reads as a change of voice. */
.sbm-about-stats{font-family:var(--sbm-about-font);max-width:none;margin:0;
  padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--sbm-rule);
  display:flex;flex-wrap:wrap;gap:clamp(36px,6vw,96px);align-items:flex-end}
.sbm-about-stat{display:block}
.sbm-about-num{display:block;font-family:var(--sbm-head);font-size:clamp(2.75rem,3.4vw + 1rem,4.5rem);
  font-weight:500;font-variation-settings:var(--sbm-head-opsz);font-optical-sizing:none;
  line-height:.95;letter-spacing:-.025em;color:var(--sbm-fg)}
/* The one piece of colour in here. */
.sbm-about-plus{color:var(--sbm-coral)}
.sbm-about-lab{display:block;margin-top:10px;font-size:clamp(.9375rem,.3vw + .875rem,1.0625rem);
  font-weight:500;line-height:1.3;letter-spacing:.01em;color:var(--sbm-muted)}

/* A short introduction followed by one clear line about our work. */
.sbm-about-lead{margin:clamp(36px,4.5vw,56px) 0 0;max-width:34ch;
  font-size:clamp(1.5rem,1.3vw + 1.2rem,2rem);font-weight:500;line-height:1.2;
  letter-spacing:-.022em;color:var(--sbm-fg);text-wrap:balance}
.sbm-about-copy{margin-top:18px;max-width:52ch}
.sbm-about-copy p{margin:0;font-size:1.0625rem;line-height:1.6;
  letter-spacing:-.003em;color:var(--sbm-muted)}

/* The signatures, written out rather than scanned in. Sized off the
   cap height of the face, which runs small, and set on a slight slant
   the way a real one would be. */
.sbm-about-sign{margin:clamp(32px,4vw,52px) 0 0;display:flex;flex-wrap:wrap;
  gap:clamp(40px,7vw,104px);align-items:flex-end}
.sbm-sign{font-family:var(--sbm-sign-font);font-size:clamp(2.75rem,4vw + 1rem,4.25rem);
  font-weight:400;line-height:1;letter-spacing:.01em;color:var(--sbm-fg);
  transform:rotate(-2deg);transform-origin:left bottom}
.sbm-sign:nth-child(2){transform:rotate(-1deg)}

@media (max-width:519px){
  .sbm-about-stats{gap:32px}
  .sbm-about-sign{gap:28px}
}

/* ============================================================
   FAQ: three topic selectors, with a focused list in each panel
   ============================================================ */
.sbm-faq-wrap{max-width:1000px;text-align:center}
.sbm-faq-kicker{font-size:16px;font-weight:600;color:var(--sbm-muted)}
.sbm-faq-title{max-width:none;margin:12px auto 0;font-size:clamp(2.25rem,3.4vw + 1rem,3.75rem)}
.sbm-faq-tabs{display:none}
html.sbm-js .sbm-faq-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  max-width:820px;margin:30px auto 28px}
.sbm-faq-tab{min-height:50px;padding:12px 18px;border:1px solid var(--sbm-rule-strong);border-radius:6px;
  background:var(--sbm-bg);color:var(--sbm-fg);font:600 15px/1.3 var(--sbm-font);cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sbm-faq-tab:hover{border-color:var(--sbm-fg)}
.sbm-faq-tab[aria-pressed="true"]{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg);
  box-shadow:inset 0 -3px 0 var(--sbm-coral)}
.sbm-faq-tab:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:3px}
.sbm-faq-panel[hidden]{display:none}
html:not(.sbm-js) .sbm-faq-panel[hidden]{display:block}
.sbm-faq-list{display:grid;gap:14px;text-align:left;border-radius:14px}
.sbm-faq-list[hidden]{display:none}
.sbm-faq-item{border:1px solid var(--sbm-rule);border-radius:14px;background:var(--sbm-bg)}
.sbm-faq-btn{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;margin:0;
  padding:22px 24px 22px 28px;border:0;border-radius:14px;background:none;color:var(--sbm-fg);text-align:left;cursor:pointer;
  font:500 clamp(1.0625rem,.5vw + 1rem,1.25rem)/1.4 var(--sbm-font)}
.sbm-faq-a{padding:0 28px 26px}
.sbm-faq-a[hidden]{display:none}
.sbm-faq-a p{max-width:46em}
.sbm-faq-a a{text-decoration:underline;text-decoration-color:var(--sbm-coral);text-underline-offset:3px}
@media (max-width:559px){
  html.sbm-js .sbm-faq-tabs{gap:6px;margin:24px auto 22px}
  .sbm-faq-tab{min-height:48px;padding:9px 5px;font-size:12px}
  .sbm-faq-btn{padding:18px 16px 18px 20px}
  .sbm-faq-a{padding:0 20px 22px}
}

/* ============================================================
   CONTACT
   ============================================================ */
/* One column: the ask, the button, then the two ways to reach us. */
.sbm-contact-grid > *{max-width:46rem}
.sbm-contact-grid .sbm-h2{margin-top:18px}
.sbm-contact-grid .sbm-intro{margin-top:20px}
.sbm-contact-actions{margin-top:32px}
.sbm-contact-direct{margin-top:40px;border-top:1px solid var(--sbm-rule)}
.sbm-contact-direct div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:16px 0;
  border-bottom:1px solid var(--sbm-rule)}
.sbm-contact-direct dt{color:var(--sbm-muted)}
.sbm-contact-direct dd a{font-weight:600;text-decoration:none}
.sbm-contact-direct dd a:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:559px){
  .sbm-contact-actions .sbm-btn{width:100%}
}

/* ============================================================
   FOOTER (every page with the main nav)
   Self-contained: no reliance on styles.css.
   ============================================================ */
.sbm-footer{background:var(--sbm-bg-alt);border-top:1px solid var(--sbm-rule);color:var(--sbm-fg);font-family:var(--sbm-font);
  font-size:16px;line-height:1.6;text-align:left;padding:clamp(56px,7vw,96px) 0 36px}
.sbm-footer *,.sbm-footer *::before,.sbm-footer *::after{box-sizing:border-box}
.sbm-footer :where(h2,p,ul,form){margin:0;padding:0;list-style:none}
.sbm-footer a{color:inherit;text-decoration:none}
.sbm-footer-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px);
  padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--sbm-rule)}
.sbm-footer-title{font:400 clamp(2.125rem,2.1vw + 1.3rem,2.875rem)/1.08 var(--sbm-head);letter-spacing:-.02em;max-width:11ch}
.sbm-footer-lede{margin-top:18px;max-width:22em;color:var(--sbm-muted)}
.sbm-news{display:flex;align-items:center;max-width:360px;margin-top:28px;padding:5px 5px 5px 16px;
  border:1px solid var(--sbm-rule-strong);border-radius:12px;background:var(--sbm-bg)}
.sbm-news:focus-within{outline:2px solid var(--sbm-coral);outline-offset:3px;box-shadow:0 0 0 3px var(--sbm-fg)}
.sbm-news input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--sbm-fg);font:400 16px var(--sbm-font)}
.sbm-news input:focus-visible{outline:none;box-shadow:none}
.sbm-news input::placeholder{color:var(--sbm-muted);opacity:1}
.sbm-news button{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;
  background:var(--sbm-fg);color:var(--sbm-bg);cursor:pointer}
.sbm-news button:hover{background:var(--sbm-coral);color:var(--sbm-ink)}
.sbm-news button:focus-visible{outline-offset:2px}
.sbm-news button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;
  stroke-linejoin:round}
.sbm-news-msg{min-height:1.5em;margin-top:10px;font-size:14px;font-weight:600}
.sbm-news-small{max-width:26em;font-size:13px;color:var(--sbm-muted)}
.sbm-news-small a{text-decoration:underline;text-underline-offset:3px}
.sbm-footer-h{margin-bottom:22px;font:400 22px/1.2 var(--sbm-head);letter-spacing:-.01em}
.sbm-footer-links li + li{margin-top:12px}
.sbm-footer-links a:hover,.sbm-news-small a:hover{text-decoration:underline;text-decoration-color:var(--sbm-coral);
  text-underline-offset:4px}
.sbm-social{display:flex;flex-wrap:wrap;gap:12px}
.sbm-social a{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--sbm-rule-strong);border-radius:50%;
  transition:border-color .15s ease}
.sbm-social a:hover{border-color:var(--sbm-fg)}
.sbm-social svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}
.sbm-social .sbm-fill{fill:currentColor;stroke:none}
.sbm-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  padding-top:32px;font-size:15px}
.sbm-footer-bottom p{color:var(--sbm-muted)}
.sbm-footer-legal-links{display:flex;flex-wrap:wrap;gap:8px 28px}
.sbm-footer .sb-cookie-reopen{appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;
  cursor:pointer}
.sbm-footer-legal-links a:hover,.sbm-footer .sb-cookie-reopen:hover{color:var(--sbm-fg);text-decoration:underline;
  text-decoration-color:var(--sbm-coral);text-underline-offset:4px}
.sbm-footer-trading{margin-top:18px;font-size:13px;color:var(--sbm-muted)}
@media (prefers-reduced-motion:reduce){
  .sbm-social a{transition:none}
}
@media (max-width:1023px){
  .sbm-footer-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:559px){
  .sbm-footer-grid{grid-template-columns:minmax(0,1fr)}
}

/* ============================================================
   COOKIE BANNER, restyled to the brand on every page.
   The banner's markup and script are inline on each page; these rules
   are prefixed with html so they win over each page's own inline CSS.
   Reject and Allow are styled identically, so neither is nudged.
   ============================================================ */
/* Base layout, for pages (like the homepage) that no longer carry the
   banner's inline CSS. Identical to what the older pages have inline. */
#sb-cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  transform:translateY(100%)}
#sb-cookie-banner.sb-cb-in{transform:none}
.sb-cb-card{margin:0 auto;display:flex;align-items:center}
.sb-cb-card p{margin:0;flex:1}
.sb-cb-row{display:flex;align-items:center;gap:10px;flex-shrink:0}
#sb-accept,#sb-decline{cursor:pointer;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}

html #sb-cookie-banner{background:var(--sbm-bg-alt);border-top:1px solid var(--sbm-fg)}
html .sb-cb-card{max-width:var(--sbm-max);padding:16px var(--sbm-gutter);gap:24px;font-family:var(--sbm-font)}
html .sb-cb-card p{color:var(--sbm-fg);font-size:14px;line-height:1.55}
html .sb-cb-card p a{color:var(--sbm-fg);text-decoration:underline;text-decoration-color:var(--sbm-coral);
  text-underline-offset:3px}
html #sb-accept,html #sb-decline{min-height:44px;padding:0 22px;border:2px solid var(--sbm-fg);border-radius:4px;
  background:transparent;color:var(--sbm-fg);font:700 14px/1 var(--sbm-font)}
html #sb-accept:hover,html #sb-decline:hover{background:var(--sbm-fg);border-color:var(--sbm-fg);color:var(--sbm-bg)}
@media (max-width:760px){
  html .sb-cb-card{flex-direction:column;align-items:stretch;gap:12px}
  html .sb-cb-row{justify-content:stretch}
  html #sb-accept,html #sb-decline{flex:1}
}
@media (prefers-reduced-motion:reduce){
  html #sb-cookie-banner,html #sb-accept,html #sb-decline{transition:none}
}

/* No JavaScript: accordion and tab panels stay open rather than unreachable. */
html:not(.sbm-js) .sbm-faq-a[hidden],
html:not(.sbm-js) .sbm-comm-detail[hidden]{display:grid}
html:not(.sbm-js) .sbm-faq-a[hidden],html:not(.sbm-js) .sbm-comm-detail[hidden]{display:block}

/* The About page's decorative wave canvas is a painted colour blob. */
.sb-ab-wave{display:none}

/* ============================================================
   OLDER PAGES: colour fixes for the new coral
   (styles.css and each page's inline CSS still carry the old
   rules; these sit on top with higher specificity)
   ============================================================ */
/* Those fills are near-black now, so their text is white. A coral-filled
   key on a picked application choice keeps the dark ink (7.3:1). */
html .btn-primary,html .btn-primary-dark,html .btn-outline:hover,html .ap-ok,
html .sb-lead-dash-badge{color:#FFFFFF}
html .ap-choice.is-picked .ap-key,html .ap-choice:has(input:checked) .ap-key{color:var(--sbm-ink)}
/* Application forms: a focus ring that holds contrast, readable placeholders. */
html .ap-choice:focus-within{outline:2px solid var(--sbm-coral);outline-offset:3px;box-shadow:0 0 0 3px var(--sbm-fg)}
html .ap-input::placeholder{color:var(--sbm-muted);opacity:1}
/* About: the Agency Launchpad preview's browser bar stays dark in both modes, so
   its "Sample data" tag and address stay readable. */
html .sb-ab-engine-chrome{background:#1A1616}
html .sb-ab-engine-url,html .sb-ab-engine-tag{color:rgba(255,255,255,.75)}

/* A tick with a label beside it (the Growth optimisation cell). */
.sbm-cell-yes{display:inline-flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap}

/* Legal page: the cookie table's long cookie names wrap on phones. */
@media (max-width:559px){
  .legal-doc table{font-size:13px}
  .legal-doc th,.legal-doc td{padding-inline:8px}
  .legal-doc td code{font-size:12px;overflow-wrap:anywhere}
  .legal-doc th:last-child,.legal-doc td:last-child{white-space:nowrap}
}
@media (max-width:419px){
  /* The smallest phones: the table scrolls within itself, never the page. */
  .legal-doc table{display:block;overflow-x:auto}
}

/* The older pages' bracket CTA becomes a plain button, like every other. */
html .sb-cta-bracket{display:none}
html .sb-ab-fee-teaser-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  padding:0 20px;border:1px solid var(--sbm-rule-strong);border-radius:2px;background:var(--sbm-bg);
  font:600 15px/1.1 var(--sbm-font);color:var(--sbm-fg);text-decoration:none;
  transition:border-color .15s ease}
html .sb-ab-fee-teaser-link:hover{border-color:var(--sbm-fg)}
html .sb-ab-fee-teaser-link .sb-cta-text::after{display:none}

/* ============================================================
   AUTOMATION APPLY PAGES (/apply-*)
   A custom picker so each option can carry its monthly price and a
   recommendation, with many ticked at once. The questions below it are
   shown or hidden by apply-picker.js depending on what is ticked.
   ============================================================ */
.sbm-applyp{padding-block:clamp(40px,5vw,72px) clamp(56px,7vw,96px)}
.sbm-applyp-wrap > *{max-width:46rem}
.sbm-applyp-wrap .sbm-h2{margin-top:16px}
.sbm-applyp-form{margin-top:clamp(28px,3.5vw,40px)}
/* The honeypot is for bots only. */
.sbm-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.sbm-pick{position:relative}
.sbm-pick-btn{appearance:none;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;
  min-height:56px;padding:0 18px;border:1px solid var(--sbm-fg);border-radius:2px;background:var(--sbm-bg);
  color:var(--sbm-fg);font:600 16.5px/1.3 var(--sbm-font);text-align:left;cursor:pointer}
.sbm-pick-caret{flex:none;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid currentColor}
.sbm-pick-btn[aria-expanded="true"] .sbm-pick-caret{transform:rotate(180deg)}
.sbm-pick-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;display:grid;
  padding:6px;border:1px solid var(--sbm-rule-strong);border-radius:2px;background:var(--sbm-bg)}
.sbm-pick-panel[hidden]{display:none}
.sbm-pick-opt{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 14px;cursor:pointer}
.sbm-pick-opt + .sbm-pick-opt{border-top:1px solid var(--sbm-rule)}
.sbm-pick-opt:hover{background:var(--sbm-bg-alt)}
.sbm-pick-all{font-weight:600}
.sbm-pick-opt input{width:20px;height:20px;margin:0;accent-color:#1A1A1A}
.sbm-pick-t{font-size:16px;line-height:1.4}
.sbm-pick-p{font-size:15px;color:var(--sbm-muted);white-space:nowrap}
.sbm-pick-rec{margin-left:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sbm-coral-text);white-space:nowrap}
.sbm-pick-total{margin-top:14px;font-size:16px;font-weight:600}

.sbm-whens{display:grid;gap:clamp(24px,3vw,36px);margin-top:clamp(28px,3.5vw,40px)}
.sbm-when[hidden]{display:none}
.sbm-when-h{font-size:1.25rem;font-weight:500;letter-spacing:-.01em;padding-bottom:12px;
  border-bottom:1px solid var(--sbm-rule);margin-bottom:18px}
.sbm-when-common{display:grid;gap:18px;margin-top:clamp(32px,4vw,48px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--sbm-fg)}
.sbm-f{display:grid;gap:8px}
.sbm-f label{font-size:16px;color:var(--sbm-muted)}
.sbm-input{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--sbm-rule-strong);border-radius:2px;
  background:var(--sbm-bg);color:var(--sbm-fg);font:400 16.5px/1.5 var(--sbm-font)}
textarea.sbm-input{min-height:auto;resize:vertical}
.sbm-input:focus-visible{outline:2px solid var(--sbm-coral);outline-offset:2px;box-shadow:0 0 0 2px var(--sbm-fg)}
.sbm-applyp-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:clamp(28px,3.5vw,40px)}
.sbm-applyp-note{font-size:15px;color:var(--sbm-muted)}
@media (max-width:559px){
  .sbm-pick-opt{grid-template-columns:22px minmax(0,1fr);row-gap:4px}
  .sbm-pick-p{grid-column:2}
  .sbm-applyp-send .sbm-btn{width:100%}
}

/* The package cards list each part with its own monthly price. */
.sbm-auto-sep{font-size:14px;color:var(--sbm-muted)}
.sbm-auto-list li{grid-template-columns:20px minmax(0,1fr) auto}
.sbm-auto-item-p{font-size:15px;color:var(--sbm-muted);white-space:nowrap}
.sbm-auto-rec{margin-left:8px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sbm-coral-text);white-space:nowrap}