@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; }
}

/* ---------- 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;
}
.phone-item { flex: 0 0 232px; scroll-snap-align: center; 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: 26px 0 0; text-align: center; color: #68727a; font-size: .85rem;
}
@media (max-width: 600px) {
  .phone-rail { gap: 18px; }
  .phone-item { flex-basis: 196px; }
}

/* 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; }
}