@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-400-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/archivo-400-latin.woff2') format('woff2');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:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/archivo-500-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/archivo-500-latin.woff2') format('woff2');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:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/archivo-600-latin.woff2') format('woff2');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:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-700-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/archivo-700-latin.woff2') format('woff2');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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');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:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');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}

/* CFBM Management Services - Forth Bridge Management
   Palette lifted from the brand mark: oxide red on ink, over paper.
   Oxide is the colour the Forth Bridge is actually painted.

   --navy / --navy-deep keep their names so every existing rule still resolves;
   only the values changed. --navy is the ACCENT (links, buttons, eyebrows) and
   --navy-deep is HEADINGS, which is why the latter went ink rather than red -
   dark-red headings across a whole site read as a mistake. */

:root {
  --navy: #c8502f;          /* fills, buttons, borders, rules */
  --navy-deep: #12161a;     /* headings */
  --oxide-deep: #9a3a20;    /* pressed / hover on a filled button */
  --accent-ink: #b04422;    /* SMALL TEXT ONLY - see note */
  --charcoal: #414a4f;
  --ink: #12161a;
  --muted: #68727a;
  --line: #e4e8eb;
  --mist: #f5f7f8;
  --paper: #fff;
  --gold: #c8502f;
  --shadow: none;
  --lift: 0 1px 2px rgba(18,22,26,.04), 0 12px 32px rgba(18,22,26,.06);
  --wrap: 1160px;
  /* Two registers, self-hosted. A system stack is the loudest tell that a page
     was generated rather than designed - see DESIGN.md §3. Archivo carries the
     voice; Plex Mono carries the technical annotation. */
  --sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Archivo, -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  overflow-wrap: break-word;
  background: var(--paper); line-height: 1.65; font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--accent-ink); }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); letter-spacing: -.022em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.018em; }
h3 { font-size: 1.16rem; letter-spacing: -.01em; }
p { margin: 0 0 1.15em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px;
}
.lede { font-size: 1.17rem; color: var(--muted); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.head-in { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 46px; width: auto; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.1; }
.brand-txt b { font-size: 1.02rem; color: var(--accent-ink); letter-spacing: .01em; }
.brand-txt span { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); }
.nav { display: flex; align-items: center; gap: 32px; }
.nav a {
  text-decoration: none; color: var(--charcoal); font-size: .95rem;
  font-weight: 500; padding: 6px 0; border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s;
}
.nav a:hover { color: var(--accent-ink); }
.nav a.on { color: var(--accent-ink); border-bottom-color: var(--navy); }
.nav .btn { padding: 11px 22px; font-size: .9rem; border-bottom: none; }
.nav .btn:hover { color: #fff; }
.nav-toggle { display: none; background: none; border: 1px solid var(--line);
  border-radius: 6px; padding: 9px 11px; cursor: pointer; }
.nav-toggle span { display: block; width: 19px; height: 2px; background: var(--charcoal);
  margin: 4px 0; border-radius: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 4px;
  font-weight: 600; font-size: .96rem; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--navy); background: var(--navy); color: #fff;
  transition: background .18s, transform .18s, box-shadow .18s; text-align: center;
}
.btn:hover { background: var(--oxide-deep); border-color: var(--oxide-deep);
  transform: translateY(-1px); box-shadow: none; }
.btn.ghost { background: transparent; color: var(--accent-ink); }
.btn.ghost:hover { background: var(--navy); color: #fff; }
.btn.wide { width: 100%; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(168deg, #fbfcfc 0%, var(--mist) 62%, #e8edf1 100%);
  border-bottom: 1px solid var(--line); overflow: hidden; }
.hero-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px;
  align-items: center; padding: 84px 0 92px; }
.hero h1 { color: var(--navy-deep); }
.hero .tag { font-family: var(--sans); font-size: 1.22rem; font-weight: 500;
  letter-spacing: -.015em; color: var(--charcoal); margin: 0 0 10px; }
.hero .sub { font-size: 1.16rem; color: var(--muted); max-width: 33em; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.hero-art { display: flex; justify-content: center; }
.hero-art img { max-width: 430px; width: 100%; }

/* ---------- sections ---------- */
section { padding: 82px 0; }
section.tint { background: var(--mist); border-block: 1px solid var(--line); }
.sec-head { max-width: 720px; margin-bottom: 46px; }
.sec-head.mid { margin-inline: auto; text-align: center; }

/* ---------- pain grid ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 30px 28px; box-shadow: var(--shadow);
}
.card h3 { color: var(--navy-deep); }
.card p:last-child { margin-bottom: 0; }
.card .num { font-family: var(--serif); font-size: 1.5rem; color: var(--gold);
  margin-bottom: 8px; }

/* ---------- pricing ---------- */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  align-items: start; }
.tier {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 34px 30px 32px; box-shadow: var(--shadow); position: relative;
  display: flex; flex-direction: column; height: 100%;
}
.tier.feat { border: 2px solid var(--navy); box-shadow: 0 10px 34px rgba(18,22,26,.13); }
.flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--navy); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 6px 16px;
  border-radius: 20px; white-space: nowrap;
}
.tier .lvl { font-size: .74rem; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); }
.tier h3 { font-size: 1.42rem; color: var(--navy-deep); margin: 8px 0 4px;
  font-family: var(--serif); font-weight: 600; }
.price { font-size: 2.5rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.03em; margin: 14px 0 4px; }
.price small { font-size: .92rem; font-weight: 400; color: var(--muted);
  letter-spacing: 0; }
.tier ul { list-style: none; padding: 0; margin: 22px 0 26px; flex: 1; }
.tier li { position: relative; padding: 0 0 15px 27px; font-size: .93rem;
  color: var(--charcoal); line-height: 1.55; }
.tier li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 6px;
  border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}
.tier li b { color: var(--ink); font-weight: 600; }

/* ---------- testimonials ---------- */
.quote {
  background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--navy);
  border-radius: 0 8px 8px 0; padding: 30px 30px 26px;
}
.quote h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.02em;
  color: var(--navy-deep); font-size: 1.2rem; }
.quote p { font-size: .95rem; color: var(--charcoal); margin: 0; }

/* ---------- split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split img { border-radius: 8px; box-shadow: var(--shadow); }

/* ---------- forms ---------- */
.form-wrap { background: var(--paper); border: 1px solid var(--line);
  border-radius: 10px; padding: 38px; box-shadow: var(--shadow); }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .82rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--charcoal);
  margin-bottom: 7px; }
.req { color: #b3261e; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .97rem;
  color: var(--ink); background: #fff; border: 1px solid #ccd4da;
  border-radius: 5px; transition: border-color .16s, box-shadow .16s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,74,115,.13);
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { width: auto; margin-top: 4px; }
.check label { text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: .93rem; color: var(--charcoal); }
.form-note { font-size: .84rem; color: var(--muted); margin-top: 14px; }

/* ---------- store ---------- */
.prod { display: flex; flex-direction: column; height: 100%; }
.prod .thumb { aspect-ratio: 4/3; overflow: hidden; border-radius: 8px 8px 0 0;
  background: var(--mist); }
.prod .thumb img { width: 100%; height: 100%; object-fit: cover; }
.prod .body { border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 8px 8px; padding: 26px 26px 28px; flex: 1;
  display: flex; flex-direction: column; background: #fff; }
.prod .body .price { font-size: 1.8rem; margin: 10px 0 18px; }
.prod .body .btn { margin-top: auto; }

/* ---------- service ticker ----------
   Sits above the sticky header so it scrolls away instead of permanently
   eating viewport. The track holds the item set twice and translates by
   exactly -50%, so the loop is seamless rather than snapping back. */
.ticker {
  background: var(--ink); color: #fff; overflow: hidden;
  border-bottom: 1px solid #000;
}
.ticker-track { display: flex; width: max-content; animation: tk 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; flex-shrink: 0; }
.tk-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 11px 0; margin-right: 46px; white-space: nowrap;
  font-size: .8rem; letter-spacing: .04em;
}
.tk-item b { font-weight: 600; color: #fff; }
.tk-item em { font-style: normal; color: var(--navy); font-weight: 600;
  font-variant-numeric: tabular-nums; }
/* The bridge diamond, reused as the separator glyph. */
.tk-dot { width: 7px; height: 7px; background: var(--navy);
  transform: rotate(45deg); flex: none; }
@keyframes tk { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker { overflow-x: auto; }
}

/* ---------- section reveals ----------
   DESIGN.md §15 has specified a 600ms `motion-editorial` reveal since the
   rebuild; this implements it.

   Everything is scoped to .js-reveal, a class set on <html> by an inline script
   in the head - and only when IntersectionObserver exists. Without JS the rules
   below never match and the page is simply finished on arrival, which is the
   only safe way to ship an effect that starts by hiding content.

   The travel is 2px, per §15's cap on card movement and its rule that motion
   lives in colour and border rather than lift. It should register as the page
   settling, not as an entrance.

   This selector list is mirrored in the observer in build_site.py. Add a class
   to one and it must go in the other. */
.js-reveal .reach-row,
.js-reveal .rev-panel {
  opacity: 0; transform: translateY(2px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.js-reveal .reach-row.is-in,
.js-reveal .rev-panel.is-in { opacity: 1; transform: none; }
/* The three figures land in sequence rather than together, so the eye is walked
   left to right along the progression instead of being handed all of it at
   once. 80ms apart - enough to read as ordered, short enough that the last one
   is not still arriving after the reader has got there. */
.js-reveal .reach-row:nth-child(2) { transition-delay: 80ms; }
.js-reveal .reach-row:nth-child(3) { transition-delay: 160ms; }
@media (prefers-reduced-motion: reduce) {
  /* Painted final. The observer still runs and still adds .is-in; with the
     transition gone that class simply has nothing left to do. */
  .js-reveal .reach-row,
  .js-reveal .rev-panel {
    opacity: 1; transform: none; transition: none;
  }
  .js-reveal .reach-row:nth-child(2),
  .js-reveal .reach-row:nth-child(3) { transition-delay: 0ms; }
}
@media print {
  /* Paper has no scroll to reveal on. Belt and braces alongside the script's
     timeout: a page sent to the printer before the observer has run must not
     come out with blank headings. */
  .js-reveal .reach-row,
  .js-reveal .rev-panel {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* ---------- services ---------- */
/* Auto-fit rather than a fixed column count: the catalogue is editable, so the
   grid must not assume how many services there are. */
.svc-grid { display: grid; gap: 22px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.svc-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 32px 30px 30px; transition: border-color .18s, transform .18s;
  display: flex; flex-direction: column; height: 100%;
}
.svc-card h3 { font-size: 1.3rem; color: var(--navy-deep); margin: 0 0 2px;
  font-family: var(--serif); font-weight: 600; }
.svc-blurb { font-size: .93rem; color: var(--muted); margin: 0 0 4px; }
.svc-card ul { list-style: none; padding: 0; margin: 18px 0 24px; flex: 1; }
.svc-card li { position: relative; padding: 0 0 14px 26px; font-size: .92rem;
  color: var(--charcoal); line-height: 1.55; }
.svc-card li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 11px; height: 6px;
  border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy);
  transform: rotate(-45deg);
}
.svc-card .btn { margin-top: auto; }
.svc-card .price { font-size: 2.1rem; margin: 12px 0 2px; }

/* ---------- expectations ---------- */
.steps { counter-reset: s; display: grid; gap: 20px; }
.step { position: relative; padding-left: 62px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: 2px; width: 42px; height: 42px;
  border-radius: 50%; background: var(--navy); color: #fff;
  display: grid; place-items: center; font-weight: 600; font-size: 1.02rem;
}
.step h3 { color: var(--navy-deep); margin-bottom: 4px; }
.step p { margin: 0; color: var(--muted); font-size: .96rem; }

/* ---------- cta band ---------- */
.band { background: var(--navy-deep); color: #fff; text-align: center; }
.band h2 { color: #fff; }
.band p { color: #c3d2de; max-width: 620px; margin-inline: auto; }
.band .btn { background: #fff; color: var(--navy-deep); border-color: #fff; margin-top: 12px; }
.band .btn:hover { background: #f0ece9; border-color: #f0ece9; color: var(--navy-deep); }

/* ---------- footer ---------- */
.site-foot { background: var(--ink); color: #9aa5ad; padding: 60px 0 30px;
  font-size: .92rem; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 44px;
  padding-bottom: 38px; border-bottom: 1px solid #2c3238; }
.site-foot h4 { color: #fff; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 16px; }
.site-foot a { color: #9aa5ad; text-decoration: none; }
.site-foot a:hover { color: #fff; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: 9px; }
.site-foot address { font-style: normal; line-height: 1.85; }
.foot-brand b { color: #fff; font-size: 1.06rem; display: block; margin-bottom: 4px; }
.legal { padding-top: 24px; display: flex; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; font-size: .85rem; color: #78838b; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hero-in { grid-template-columns: 1fr; gap: 26px; padding: 34px 0 46px; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 190px; }
  .hero h1 { font-size: clamp(1.85rem, 8vw, 2.4rem); }
  .hero .sub { font-size: 1.05rem; }
  .hero-cta { margin-top: 22px; }
  .hero-cta .btn { flex: 1 1 auto; min-width: 46%; }
  .tiers, .g3, .g2, .split, .foot-grid, .row2 { grid-template-columns: 1fr; }
  .split { gap: 34px; }
  .nav {
    display: none; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 24px 18px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav a.on { border-bottom-color: var(--line); }
  .nav .btn { margin-top: 12px; border-bottom: none; }
  .nav-toggle { display: block; }
  section { padding: 58px 0; }
  .form-wrap { padding: 26px 22px; }
}

/* ---------- blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.post-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 28px 28px 26px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s;
}
.post-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.pc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  font-size: .78rem; color: var(--muted); }
.pc-cat { font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); }
.post-card h2 { font-size: 1.28rem; margin-bottom: 10px; line-height: 1.3; }
.post-card h2 a { color: var(--navy-deep); text-decoration: none; }
.post-card h2 a:hover { text-decoration: underline; }
.post-card p { font-size: .95rem; color: var(--muted); flex: 1; }
.pc-more { font-size: .9rem; font-weight: 600; text-decoration: none; }
.pc-more:hover { text-decoration: underline; }

.post { padding: 62px 0 72px; }
.post .wrap { max-width: 760px; }
.post-head { border-bottom: 1px solid var(--line); padding-bottom: 26px;
  margin-bottom: 34px; }
.post-head h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); color: var(--navy-deep); }
.post-meta { font-size: .87rem; color: var(--muted); margin-top: 14px; }
.post-body { font-size: 1.06rem; line-height: 1.75; }
.post-body h2 { font-size: 1.5rem; margin: 2em 0 .6em; color: var(--navy-deep); }
.post-body h3 { font-size: 1.14rem; margin: 1.6em 0 .5em; color: var(--ink); }
.post-body p { margin: 0 0 1.25em; }
.post-body ul, .post-body ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.post-body li { margin-bottom: .6em; }
.post-body blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--navy);
  color: var(--charcoal); font-style: italic;
}
.post-body strong { color: var(--ink); font-weight: 600; }
.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.postnav a { font-size: .93rem; font-weight: 500; text-decoration: none;
  color: var(--navy); line-height: 1.4; }
.postnav a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .post-grid, .postnav { grid-template-columns: 1fr; }
  .post { padding: 40px 0 50px; }
  .postnav a { text-align: left !important; }
}


/* ---------- phone ----------
   There was no breakpoint below 900px, so phones ran the tablet layout: full
   24px gutters, 28-34px card padding and desktop type on a 390px screen. That
   is what made it feel cramped and "all over the place". */
@media (max-width: 600px) {
  .wrap { padding: 0 18px; }
  section { padding: 44px 0; }
  .sec-head { margin-bottom: 30px; }

  h1 { font-size: clamp(1.7rem, 8.5vw, 2.2rem); }
  h2 { font-size: clamp(1.4rem, 6.4vw, 1.8rem); }
  body { font-size: 16px; }

  .svc-grid { gap: 16px; grid-template-columns: 1fr; }
  .svc-card { padding: 24px 20px 22px; border-radius: 8px; }
  .svc-card h3 { font-size: 1.18rem; }
  .svc-card .price { font-size: 1.8rem; margin: 10px 0 2px; }
  .svc-card li { padding-bottom: 12px; font-size: .9rem; }
  .card, .prod .body { padding: 22px 20px; }

  /* Full-width taps instead of two half-width buttons squeezed side by side. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .btn { padding: 13px 20px; }

  .hero-art img { max-width: 150px; }
  .form-wrap { padding: 22px 18px; }
  .post-card { padding: 22px 20px; }
  .band { padding: 44px 0; }
}

/* Very small phones - stop the big price figures overflowing their card. */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .price { font-size: 1.6rem; }
  .svc-card { padding: 20px 16px 20px; }
}


/* ---------- premium pass ----------
   Restraint over decoration: hairlines instead of drop shadows, a tighter
   display scale, and one accent doing the work rather than three. */
.svc-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.card { border-radius: 4px; }
.prod .body, .prod .thumb { border-radius: 4px; }
.post-card { border-radius: 4px; transition: border-color .18s, transform .18s; }
.form-wrap { border-radius: 4px; }
.tier, .svc-card, .card, .post-card, .prod .body { box-shadow: none; }

/* Display type: tighter tracking and a heavier top end give the headings
   presence without needing a webfont download. */
h1 { letter-spacing: -.035em; font-weight: 700; }
h2 { letter-spacing: -.028em; font-weight: 700; }
.eyebrow { font-size: .7rem; letter-spacing: .2em; }
.price { letter-spacing: -.04em; font-weight: 700; }

/* A hairline above each section instead of a tinted block - it separates
   without the heavy banded look. */
section.tint { background: var(--mist); }
.sec-head { max-width: 700px; }
.sec-head h2 { margin-bottom: .35em; }

/* Buttons: squarer, quieter, with the motion on colour rather than lift. */
.btn { border-radius: 3px; letter-spacing: .01em; transition: background .18s, border-color .18s, color .18s; }
.btn:hover { transform: none; }


/* ---------- brand panel ----------
   Stands in for stock photography. Ink plane, the bridge lattice ghosted
   behind, one line of statement copy. */
.bpanel {
  position: relative; overflow: hidden; border-radius: 4px;
  background: var(--ink); color: #fff;
  min-height: 300px; display: flex; align-items: flex-end;
  padding: 32px 34px;
}
.bpanel-art {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  width: 78%; max-width: none; opacity: .17; pointer-events: none;
}
.bpanel-txt { position: relative; z-index: 1; }
.bpanel-txt p {
  margin: 0; font-size: 1.42rem; font-weight: 700; letter-spacing: -.025em;
  line-height: 1.22; max-width: 15ch;
}
.bpanel-txt span {
  display: block; margin-top: 10px; font-size: .92rem; color: #9aa7ae;
  letter-spacing: .005em;
}

/* Real work in a panel slot. Same box as the brand panel so the two are
   interchangeable per slot; the lattice art is replaced by a still and the copy
   sits on the Level 2 overlay from the depth table. 2px radius, no shadow. */
.bpanel.still { border-radius: 2px; }
.still-art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 1; pointer-events: none;
}
.bpanel.still .bpanel-txt {
  background: hsla(200,18%,7%,.8); padding: 18px 20px; border-radius: 2px;
}
.bpanel.still .bpanel-txt p { max-width: 18ch; }
@media (max-width: 900px) { .bpanel { min-height: 210px; padding: 26px 26px; } }
@media (max-width: 600px) {
  .bpanel { min-height: 168px; padding: 22px 20px; }
  .bpanel-txt p { font-size: 1.18rem; }
  .bpanel-art { width: 88%; right: -14%; opacity: .14; }
}


/* A coming-soon service is announced, not sold: quieter card, oxide flag. */
.svc-card.soon { position: relative; border-style: dashed; }
.svc-card.soon .price { color: var(--muted); font-size: 1.5rem; }
.svc-flag {
  position: absolute; top: -11px; left: 24px;
  background: var(--navy); color: #fff; font-size: .6rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 2px;
}

/* Structural face - technical annotation, uppercase, wide tracking. */
.lbl, .svc-flag, .eyebrow, .tk-item .tk-name {
  font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .16em; font-weight: 600; }
.price, .svc-card .price { font-variant-numeric: tabular-nums;
  letter-spacing: -.04em; }
/* "From" before a floor rate. Sized and coloured like the cycle qualifier that
   follows the figure, so the figure stays the only thing at price weight and the
   column of numerals still aligns down the card row. */
.price small.pre { margin-right: 1px; }

/* ---------- share row ----------
   Ghost controls per DESIGN.md: hairline, 2px radius, no shadow, and the hover
   moves border and colour rather than lifting anything. No oxide fill - these
   are secondary to the CTA further down the page, and two oxide elements in a
   viewport means the hierarchy has collapsed. */
.share { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line); }
.share .lbl { display: block; font-size: .7rem; color: var(--muted); margin-bottom: 14px; }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; }
.share-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 2px;
  border: 1px solid var(--line); background: none; cursor: pointer;
  font: 500 .88rem/1 var(--sans); color: var(--charcoal);
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.share-btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.share-btn:hover { color: var(--accent-ink); border-color: var(--navy); }
.share-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- the work ----------
   Real footage at last, which DESIGN.md §4 called the system's largest gap. Ink
   section, because that is where the spec puts real imagery and because a lit
   screen needs a dark room around it.

   The handset is the one place on this site with a radius above 4px. It is
   device chrome - a drawing of a real object, not a container - and a phone with
   2px corners is a brick. Recorded as a deliberate divergence in DESIGN.md; it
   does not license a rounded card anywhere else. No shadow, still: the frame
   reads through surface contrast and a hairline, same as everything else. */
.work { background: var(--ink); }
.work .sec-head h2, .work .sec-head .eyebrow { color: #fff; }
/* Oxide lifted for legibility on ink. Same accent, not a second one - the fill
   value sits at 2.6:1 on #12161A and the eyebrow is well under 1rem. */
.work .sec-head .eyebrow { color: #e07a56; }
.work .sec-head p { color: #9aa7ae; }
.phone-rail {
  display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px; scrollbar-width: thin;
  scrollbar-color: #3a4248 transparent;
}
/* Snap to the card's leading edge, not its centre. Centre-alignment puts the
   snap positions of the first three cards all at or near scrollLeft 0 - a
   232px card centred in a 1112px rail wants a negative offset, which clamps -
   so a one-card step from the arrows was inside the same snap zone it started
   in and `mandatory` pulled it straight back to 0. Leading-edge snap puts the
   positions on an exact one-card pitch, which is the step the arrows move.
   Touch keeps the centred card: there the rail is narrower than two cards, so
   the positions are unambiguous and centred reads better under a thumb. */
.phone-item { flex: 0 0 232px; scroll-snap-align: start; margin: 0; }
.phone {
  border-radius: 38px; padding: 8px; background: #05070a;
  border: 1px solid #2c3238;
  transition: border-color 180ms ease;
}
.phone-item:hover .phone, .phone-item:focus-within .phone { border-color: var(--navy); }
.phone-screen {
  position: relative; border-radius: 30px; overflow: hidden;
  background: #000; aspect-ratio: 9 / 16;
}
/* The speaker slot. Two pixels of detail that stop the frame reading as a
   rounded rectangle with a video in it. */
.phone-screen::before {
  content: ""; position: absolute; z-index: 2; top: 9px; left: 50%;
  transform: translateX(-50%); width: 58px; height: 15px;
  border-radius: 9px; background: #05070a; pointer-events: none;
}
.phone-screen video { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-play {
  position: absolute; inset: 0; z-index: 3; width: 100%; border: 0;
  background: hsla(200,18%,7%,.28); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 180ms ease;
}
.phone-play svg { width: 26px; height: 26px; fill: #fff; }
.phone-play span {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.72);
}
.phone-play:hover { background: hsla(200,18%,7%,.12); }
.phone-play:focus-visible { outline: 2px solid #fff; outline-offset: -6px; }
.phone-screen.playing .phone-play { background: none; }
.phone-screen.playing .phone-play span { opacity: 0; }
.phone-item figcaption {
  margin-top: 16px; color: #9aa7ae; font-size: .88rem; line-height: 1.5;
}
.phone-item figcaption .lbl {
  display: block; font-size: .68rem; color: #fff; margin-bottom: 5px;
}
.work-note {
  margin: 0; text-align: center; color: #68727a; font-size: .85rem;
}
/* The note stays optically centred on the section, so the nav is absolutely
   placed at the right rather than made a third flex child - a three-column
   layout would push the sentence off-axis by half the width of the buttons. */
.rail-foot { position: relative; margin-top: 26px; min-height: 44px;
  display: flex; align-items: center; justify-content: center; }
.rail-nav { position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; gap: 8px; }
.rail-nav[hidden] { display: none; }
/* 44px square: the DESIGN.md touch-target floor, and it keeps the pair reading
   as controls rather than as decoration. Hairline and 2px radius, same as every
   other interactive surface - the 30px+ radius on this section is scoped to the
   handset and does not travel. */
.rail-btn {
  width: 44px; height: 44px; padding: 0; border-radius: 2px;
  background: none; border: 1px solid #2c3238; color: #9aa7ae;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.rail-btn svg { width: 18px; height: 18px; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rail-btn:hover:not(:disabled) { border-color: #4a555d; color: #fff; }
.rail-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.rail-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 600px) {
  /* Touch scrolls the rail directly, so the arrows are redundant weight here
     and the note gets the full width back. */
  .rail-nav { display: none; }
  .rail-foot { min-height: 0; }
}
@media (max-width: 600px) {
  .phone-rail { gap: 18px; }
  .phone-item { flex-basis: 196px; scroll-snap-align: center; }
}

/* ---------- reach ----------
   The dashboard figures. Ink ground, so it reads as a structural beat against
   the paper service list above it rather than as another editorial card.

   Depth is hairline only, as everywhere else: the cells are divided by 1px
   #2c3238 - the same value the handset frame uses - not by shadow, fill or
   radius. The grid draws its own outer rule on the top and left and lets each
   cell close the box, which keeps the dividers single-width where cells meet.

   One oxide element: the peak bar. The others sit on a neutral so the accent
   marks the endpoint of the argument instead of decorating all three. */
.reach { background: var(--ink); }
.reach .sec-head h2 { color: #fff; }
.reach .sec-head .eyebrow { color: #e07a56; }
.reach .sec-head p { color: #9aa7ae; }
/* A bar chart, not a row of stat cards. Three equal bordered cells is the
   default output of every site generator, and it read as one; worse, boxing the
   figures apart hid the fact that they are one series. Sharing a baseline and a
   scale is what makes ten times the reach visible as length. */
.reach-chart {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid #2c3238;
}
/* Ordinal, figure, bar. The figure column is fixed so the numerals stack in
   tabular alignment and every bar starts from the same left edge - a bar chart
   with a ragged baseline is not a chart. */
/* The figure column has to clear the widest value in the set at the top of the
   clamp: "12.6M" at 2.3rem needs about 6.9rem, and the column was 6.2rem, so the
   largest figure - the one the whole section is built around - wrapped onto two
   lines and dragged its own row out of alignment. Sized with headroom, and
   nowrap so a longer value overflows visibly rather than silently breaking. */
.reach-row {
  display: grid; grid-template-columns: 2.75rem 7.6rem 1fr;
  align-items: center; gap: 0 24px;
  padding: 26px 0; border-bottom: 1px solid #2c3238;
}
.reach-ord {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .2em;
  color: #5c666d; font-variant-numeric: tabular-nums;
}
.reach-fig {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; color: #fff;
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* The track is the shared scale made visible: without it a short bar reads as a
   small thing rather than as a small share of the same maximum. */
.reach-bar { display: block; height: 10px; background: #1c2228; }
.reach-bar i { display: block; height: 100%; background: #4a555d; }
.reach-bar.is-peak i { background: var(--navy); }
.reach-note {
  margin: 26px 0 0; color: #68727a; font-size: .85rem; max-width: 620px;
}
@media (max-width: 600px) {
  .reach-row { grid-template-columns: 1.9rem 5.6rem 1fr; gap: 0 14px;
    padding: 20px 0; }
  .reach-bar { height: 8px; }
}

/* ---------- revenue ----------
   Paper, deliberately: the reach band above it is ink, and stacking two dark
   statistic sections would replace the ink/paper alternation with one long dark
   run. Level 1 depth throughout - a single hairline box, 2px radius, no shadow,
   with internal rules doing the dividing. */
.rev-panel {
  border: 1px solid var(--line); border-radius: 2px; padding: 30px 32px 8px;
  max-width: 760px; margin-inline: auto;
}
.rev-head {
  display: flex; flex-wrap: wrap; gap: 20px 40px;
  align-items: flex-end; justify-content: space-between;
}
.rev-net {
  display: block; font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 600;
  line-height: 1; letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rev-up {
  display: block; font-size: 1.3rem; font-weight: 600; line-height: 1;
  color: var(--accent-ink); font-variant-numeric: tabular-nums;
}
.rev-delta { text-align: right; }
.rev-cap {
  display: block; margin-top: 9px; font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .2em; font-family: var(--mono);
}
/* The table restated as width. Segments are butted together and separated by a
   2px paper gutter rather than a border, so the divider cannot add width and
   push the last segment past 100%. */
.rev-bar { display: flex; margin: 28px 0 0; height: 8px; gap: 2px; }
/* A neutral ramp, not an accent set. Segment width already carries the whole
   comparison, so colour only has to separate one block from the next - and the
   panel's single oxide is spent on the growth figure, which is the claim being
   made. Two oxides in one viewport is the collapse DESIGN.md §12 warns about.

   Tone is assigned by rank in build_site.py, so the ramp darkens with size
   whatever order the rows happen to be in. */
.rev-seg { background: #c3ccd2; }
.rev-seg.t1 { background: var(--charcoal); }
.rev-seg.t2 { background: #8d989f; }
.rev-seg.t3 { background: #c3ccd2; }
.rev-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.rev-table th, .rev-table td {
  padding: 15px 0; border-bottom: 1px solid var(--line);
  font-size: .95rem; font-weight: 400;
}
.rev-table tr:last-child th, .rev-table tr:last-child td { border-bottom: 0; }
.rev-table th { text-align: left; color: var(--ink); }
.rev-table .num {
  text-align: right; color: var(--ink); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* The share column is the same fact as the bar, so it sits back and lets the
   money column lead. */
.rev-table .pct { width: 5.5em; color: var(--muted); }
.rev-note {
  max-width: 760px; margin: 18px auto 0; text-align: center;
  color: var(--muted); font-size: .85rem;
}
@media (max-width: 600px) {
  .rev-panel { padding: 24px 20px 6px; }
  .rev-delta { text-align: left; }
  .rev-table th, .rev-table td { padding: 13px 0; font-size: .9rem; }
  .rev-table .pct { width: 4.2em; }
}

/* Numbered process list. Hairline rule per step, oxide counter - depth from
   delineation, never a shadow. */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 22px 0 0; }
.steps li { counter-increment: s; position: relative; padding: 16px 0 16px 46px;
  border-top: 1px solid var(--line); font-size: .98rem; line-height: 1.6;
  color: var(--charcoal); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 16px; font-family: var(--mono);
  font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  color: var(--gold); }
.steps li b { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) { .steps li { padding-left: 40px; } }

/* The nav CTA is persistent, so it defers to the page's own primary action.
   One oxide per screen - DESIGN.md §7. */
.nav-cta { padding: 9px 16px; font-size: .9rem; }

/* ------------------------------------------------------------------ v2
   Components added for the brief: the static platform grid that replaced the
   scrolling price marquee, condensed home cards, blog topic hubs, and the
   proof slots. Radius stays at 2px, no shadows, one oxide per screen. */

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

/* platforms we post to -------------------------------------------------- */
.plats { padding:36px 0 8px; }
.plats-lede { text-align:center; margin:0 0 20px; font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.plat-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.plat { display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:20px 10px; border:1px solid var(--line); border-radius:2px;
  background:var(--paper); }
.plat-mark { display:block; width:30px; height:30px; }
.plat-mark svg { width:100%; height:100%; display:block; }
.plat-name { font-size:.76rem; font-weight:600; color:var(--charcoal);
  letter-spacing:.02em; text-align:center; }

/* condensed service cards on the home page ------------------------------ */
.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.svc-mini { display:block; padding:22px 22px 20px; border:1px solid var(--line);
  border-radius:2px; background:var(--paper); text-decoration:none; color:inherit; }
.svc-mini:hover { border-color:var(--navy); }
.svc-mini h3 { margin:0 0 8px; font-size:1.02rem; color:var(--navy-deep); }
.svc-mini p { margin:0 0 14px; font-size:.9rem; color:var(--muted); line-height:1.55; }
.svc-mini-price { font-size:.78rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent-ink); }
.svc-mini.soon .svc-mini-price { color:var(--muted); }

/* blog topics, search, related ----------------------------------------- */
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px; }
.chip { display:inline-block; padding:8px 14px; border:1px solid var(--line);
  border-radius:2px; font-size:.82rem; font-weight:500; color:var(--charcoal);
  text-decoration:none; background:var(--paper); }
.chip:hover { border-color:var(--navy); color:var(--navy); }
.chip.on { background:var(--ink); border-color:var(--ink); color:#fff; }
.blog-search { margin:0 0 24px; }
.blog-search input { width:100%; max-width:420px; padding:12px 14px; font:inherit;
  font-size:1rem; border:1px solid var(--line); border-radius:2px; background:var(--paper); }
.blog-search input:focus { outline:none; border-color:var(--navy); }
.blog-search .mini { margin:8px 0 0; font-size:.8rem; color:var(--muted); }
a.pc-cat { text-decoration:none; }
a.pc-cat:hover { color:var(--navy); }

.related { margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.related h3 { margin:0 0 16px; font-size:.76rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rel { display:block; padding:16px 18px; border:1px solid var(--line); border-radius:2px;
  text-decoration:none; color:inherit; background:var(--paper); }
.rel:hover { border-color:var(--navy); }
.rel-cat { display:block; font-size:.68rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.rel b { font-size:.94rem; line-height:1.4; color:var(--navy-deep); font-weight:600; }

.author { display:flex; gap:16px; align-items:flex-start; margin:40px 0 0;
  padding:22px; border:1px solid var(--line); border-radius:2px; background:var(--mist); }
.author img { flex:0 0 auto; }
.author b { display:block; margin-bottom:6px; color:var(--navy-deep); }
.author p { margin:0; font-size:.88rem; line-height:1.6; color:var(--muted); }

.signup { margin:36px 0 0; padding:24px; border:1px solid var(--line);
  border-radius:2px; background:var(--paper); }
.signup h3 { margin:0 0 6px; font-size:1.05rem; color:var(--navy-deep); }
.signup p { margin:0 0 14px; font-size:.9rem; color:var(--muted); }
.signup-form { display:flex; gap:10px; flex-wrap:wrap; position:relative; }
.signup-form input[type=email] { flex:1 1 240px; padding:12px 14px; font:inherit;
  border:1px solid var(--line); border-radius:2px; background:var(--paper); }
.signup-form input[type=email]:focus { outline:none; border-color:var(--navy); }
.signup .form-note { margin:12px 0 0; }

/* proof slots ----------------------------------------------------------- */
.clip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.clip { margin:0; }
.clip video { width:100%; display:block; border:1px solid var(--line); border-radius:2px; }
.clip figcaption { margin-top:8px; font-size:.85rem; color:var(--muted); }
.case { width:100%; border-collapse:collapse; margin:0 auto; max-width:620px; }
.case th, .case td { padding:11px 14px; border-bottom:1px solid var(--line);
  text-align:left; font-size:.94rem; }
.case th { font-size:.7rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.case .num { text-align:right; font-variant-numeric:tabular-nums; }
.quote cite { display:block; margin-top:12px; font-style:normal; font-size:.8rem;
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

.plainlist { list-style:none; padding:0; margin:0 0 34px; }
.plainlist li { padding:9px 0; border-bottom:1px solid var(--line); }
.plainlist a { text-decoration:none; }
.plainlist a:hover { color:var(--navy); }

@media (max-width:900px) {
  .plat-grid { grid-template-columns:repeat(3,1fr); }
  .mini-grid, .rel-grid, .clip-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px) {
  .plat-grid { grid-template-columns:repeat(2,1fr); }
  .mini-grid, .rel-grid, .clip-grid { grid-template-columns:1fr; }
  .author { flex-direction:column; gap:12px; }
}
@media (max-width:380px) {
  .plat-grid { grid-template-columns:1fr 1fr; }
  .plat { padding:14px 8px; }
}

/* ---- Service detail pages -------------------------------------------------
   Four blocks, all built from the existing depth mechanism: a hairline and a
   surface change. No shadow, no radius above 2px, no new colour. */

/* The price standing on its own in the hero slot, where every other page puts
   the brand panel. On a page about one service the figure IS the artwork. */
.price-panel { width:100%; max-width:430px; padding:34px 30px;
  border:1px solid var(--line); border-radius:2px; background:var(--mist); }
.price-panel .price { margin:6px 0 0; }

/* Two columns of feature bullets. Same tick as the service card, same copy -
   this is FEATURES rendered wide instead of inside a card. */
.incl { list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:1fr 1fr; gap:4px 40px; }
.incl li { position:relative; padding:0 0 16px 26px; font-size:.95rem;
  color:var(--charcoal); line-height:1.6; }
.incl li::before { content:""; position:absolute; left:0; top:.62em;
  width:10px; height:1px; background:var(--navy); }
.incl li b { color:var(--ink); font-weight:600; }
.incl-more { margin:26px 0 0; font-size:.92rem; }

/* Questions, separated by hairlines rather than boxed. Deliberately not a
   <details> accordion: the answers are the reason the page ranks, and hiding
   them behind a click hides them from the reader who scans rather than clicks. */
.faq { border-top:1px solid var(--line); }
.faq-item { padding:22px 0; border-bottom:1px solid var(--line); }
.faq-item h3 { margin:0 0 .45em; font-size:1.06rem; color:var(--navy-deep); }
.faq-item p { margin:0; color:var(--charcoal); }

@media (max-width:900px) {
  .incl { grid-template-columns:1fr; gap:0; }
}
@media (max-width:600px) {
  .price-panel { padding:26px 22px; }
}
@media (max-width:380px) {
  .price-panel { padding:22px 18px; }
}

/* The brand panel leads on mobile everywhere else, because it is the artwork and
   the page has already said what it is. A price panel is not artwork: opening a
   service page with a figure before the heading that names the service reads as
   a quote for something unnamed. So this one hero art stays put. */
@media (max-width:900px) {
  .hero-art.art-after { order: 0; }
}