/* =========================================================================
   Ashley Rowe — "Editorial Engineering Studio"
   Anti-generic system: neo-serif + mono, warm paper/ink, hairline grid,
   borders-over-shadows, asymmetric editorial layout.
   ========================================================================= */

:root {
  /* ---- "Porcelain & Racing Green" — cool editorial palette (no SaaS blue, no gradients) ---- */
  --paper:    #F4F2EC;   /* porcelain canvas */
  --paper-2:  #EAE7DE;   /* deeper paper for alt sections */
  --ink:      #13221A;   /* green-black */
  --ink-2:    #1C2E24;   /* raised dark surface */
  --muted:    #51604F;   /* cool secondary text — clears WCAG AA (4.5:1) on paper */
  --line:     rgba(19,34,26,.18);   /* hairline on paper */
  --line-2:   rgba(244,242,236,.16);/* hairline on ink */
  --accent:   #17694A;   /* racing green — used sparingly */
  --accent-2: #0F4E36;

  --serif: "Fraunces", Georgia, "Times New Roman", serif; /* display */
  --mono:  "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif-quote: "Newsreader", Georgia, "Times New Roman", serif; /* editorial serif — quotes/one type moment only */

  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 56px);
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  font-variant-ligatures: common-ligatures contextual; /* #2 — Chrome leaves calt off by default */
}
::selection { background: color-mix(in oklab, var(--accent) 26%, transparent); color: var(--ink); } /* #4 */
.sec--ink ::selection { background: color-mix(in oklab, var(--accent) 42%, transparent); color: var(--paper); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1,h2,h3 { font-family: var(--serif); font-weight: 560; line-height: .98; letter-spacing: -.015em; margin: 0; text-wrap: balance; }

/* On dark surfaces the racing green is too deep — remap the accent custom property
   so every var(--accent) use (incl. inline styles) gets a legible sage green */
.sec--ink, .foot, .hwork, .consent-banner {
  --accent: #55B287;
  --accent-2: #7CC7A3;
}
/* solid accent fills on dark carry ink text, not white (white on sage fails contrast) */
.sec--ink .urgent .tag, .sec--ink .fc-pick, .sec--ink .chip:has(input:checked), .sec--ink .chip.sel { color: var(--ink); }
.sec--ink .btn:hover, .foot .btn:hover, .consent-banner .btn:hover { color: var(--ink); }
h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* #1 — numerals: oldstyle in prose, tabular lining for figures, slashed-zero on mono */
.prose, .reframe p, .note p, .lede { font-variant-numeric: oldstyle-nums proportional-nums; }
.statline b, .case-res b, .report .r-row b, .stat b, .plan-foot, table td, time { font-variant-numeric: tabular-nums lining-nums; }
.mono, .kick, .idx, .status, code, pre, .meta, .article-meta, .post .cat, .svc-row .n, .feat-cell .n { font-variant-numeric: slashed-zero tabular-nums; }
/* #4 — hanging punctuation on quotes/intros (Safari progressive enhancement) */
.pull, .tbig, .tq p, .plan-intro p, blockquote, .lede { hanging-punctuation: first last; }

/* ---- Editorial primitives ---- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
section { position: relative; }
.sec { padding-block: clamp(64px, 9vw, 120px); }
.sec--ink { background: var(--ink); color: var(--paper); }
/* #5 — light-on-dark optically blooms: open tracking + breathe leading (warm off-white already via --paper) */
.sec--ink p, .sec--ink li, .sec--ink .lede { letter-spacing: .006em; }
.sec--ink p, .sec--ink li { line-height: 1.7; }
.sec--ink h1, .sec--ink h2, .sec--ink h3 { color: var(--paper); }
.sec--paper2 { background: var(--paper-2); }

/* mono kicker / section index */
.kick {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.sec--ink .kick { color: #9CAE9E; }
.kick .dot { color: var(--accent); }
.idx {
  font-family: var(--mono); font-size: .92rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); display: inline-flex; gap: 10px; align-items: baseline;
}

.display { font-family: var(--serif); }
/* #3 — fluid modular scale, zoom-safe (rem + vw, not pure vw) */
.h-xl { font-size: clamp(2.6rem, 1.85rem + 3.75vw, 6rem); }
.h-lg { font-size: clamp(2.1rem, 1.58rem + 2.6vw, 3.6rem); }
.h-md { font-size: clamp(1.6rem, 1.37rem + 1.15vw, 2.4rem); }
.italic { font-style: italic; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.sec--ink .muted { color: #9CAE9E; }
.lede { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.5; max-width: 54ch; color: var(--ink); }
.sec--ink .lede { color: #D6DED4; }
.maxch { max-width: 34ch; }

/* ---- Buttons (squared, mono label) ---- */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 24px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  border-radius: 2px; transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.sec--ink .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sec--ink .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.sec--ink .btn--line { background: transparent; color: var(--paper); border-color: var(--line-2); }
.sec--ink .btn--line:hover { background: var(--paper); color: var(--ink); }
.btn .ar { transition: transform .18s ease; }
.btn:hover .ar { transform: translateX(4px); }
.tlink { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; gap: 8px; align-items: center; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.tlink:hover { color: var(--accent); }

/* =========================================================================
   Header
   ========================================================================= */
.hdr { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); }
.hdr-row { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.logo { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; letter-spacing: -.02em; display: flex; align-items: baseline; gap: 2px; }
.logo .u { color: var(--accent); }
.hnav { display: flex; align-items: center; gap: 32px; }
.hnav a { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); position: relative; }
.hnav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.hnav a:hover { color: var(--accent); }
.hnav a:hover::after { transform: scaleX(1); }
.hdr .btn { padding: 12px 18px; }
.hdr-contact { display: inline-flex; align-items: center; font-family: var(--mono); font-size: .74rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 2px; padding: 11px 16px; white-space: nowrap; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.hdr-contact:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 768px) { .hdr-contact { display: none; } }
.burger { display: none; background: none; border: 0; padding: 6px; }
.burger svg { width: 26px; height: 26px; }

/* =========================================================================
   1 · Hero — left-aligned editorial, asymmetric
   ========================================================================= */
.hero { padding-top: clamp(14px, 2.4vw, 28px); padding-bottom: 0; }
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: clamp(28px,4vw,44px); }
.status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.status .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(23,105,74,.6); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(23,105,74,.55)} 70%{box-shadow:0 0 0 10px rgba(23,105,74,0)} 100%{box-shadow:0 0 0 0 rgba(23,105,74,0)} }
.hero-grid { display: grid; grid-template-columns: 1.5fr .9fr; gap: clamp(32px,5vw,72px); align-items: end; padding-block: clamp(8px,3vw,28px) clamp(40px,6vw,72px); }
/* Two-zone hero: value headline + bold riso artwork */
.hero-main { display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(28px,5vw,72px); align-items: center; padding-block: clamp(24px,5vw,72px) clamp(40px,7vw,96px); }
.hero-copy { max-width: 40ch; }
.hero-copy .status { margin-bottom: clamp(20px,3vw,30px); }
.hero-copy h1 { max-width: 16ch; text-wrap: balance; }
.hero-copy .hero-sub { margin-top: clamp(18px,2.5vw,28px); max-width: 46ch; }
.hero-art-wrap { position: relative; }
.hero-art { display: block; width: 100%; height: auto; max-height: 80vh; }
@media (max-width: 900px) {
  .hero-main { grid-template-columns: 1fr; gap: clamp(28px,6vw,44px); }
  .hero-art-wrap { order: -1; max-width: 460px; }
  .hero-copy { max-width: none; }
}
.hero h1 { font-size: clamp(2.2rem, 1.5rem + 3.5vw, 4.6rem); font-weight: 600; }
.hero h1 .lt { font-weight: 600; }
.hero-sub { margin-top: clamp(20px,3vw,32px); }
.hero-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: clamp(24px,3vw,36px); }

/* Hero proof: editorial "report card" — flat, bordered, no gauges/gradients */
.report { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); border-radius: 3px; }
.report .r-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #9CAE9E; }
.report .r-head .pass { color: var(--accent); }
.report .r-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: 16px 18px; border-bottom: 1px solid var(--line-2); }
.report .r-row:last-child { border-bottom: 0; }
.report .r-row span { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #BECDBF; }
.report .r-row b { font-family: var(--serif); font-weight: 600; font-size: 2.4rem; line-height: 1; }
.report .r-row b.ok { color: var(--paper); }
.report .r-row b .un { font-size: 1.2rem; color: #9CAE9E; }
.report .r-cap { padding: 12px 18px; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #7F927F; border-top: 1px solid var(--line-2); }

/* =========================================================================
   Related services (cross-linking)
   ========================================================================= */
.related .wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 14px clamp(24px,3vw,40px); padding-block: clamp(28px,3.5vw,44px); border-top: 1px solid var(--line); }
.related .lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.related a { font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem,1.9vw,1.55rem); color: var(--ink); display: inline-flex; align-items: baseline; gap: 8px; }
.related a .ar { font-family: var(--mono); color: var(--accent); font-size: .9em; transition: transform .15s ease; }
.related a:hover { color: var(--accent); }
.related a:hover .ar { transform: translateX(4px); }

/* =========================================================================
   Emergency / rescue CTA (segmented intent)
   ========================================================================= */
.urgent { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; padding: 12px 16px; border: 1px solid var(--accent); border-radius: 2px; color: var(--ink); transition: background .15s ease, color .15s ease; }
.urgent:hover { background: var(--accent); color: #fff; }
.urgent .tag { background: var(--accent); color: #fff; padding: 3px 9px; border-radius: 2px; font-weight: 600; letter-spacing: .08em; }
.urgent:hover .tag { background: #fff; color: var(--accent); }
.urgent .ar { transition: transform .15s ease; }
.urgent:hover .ar { transform: translateX(3px); }
.sec--ink .urgent { color: var(--paper); }

/* =========================================================================
   Trust band (client logos + reviews)
   ========================================================================= */
.trustband { border-bottom: 1px solid var(--line); }
.trustband .wrap { display: flex; align-items: center; justify-content: center; gap: clamp(20px,3.5vw,52px); flex-wrap: wrap; padding-block: clamp(20px,2.6vw,30px); }
.trustband .lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.trustband .logo-i { font-family: var(--serif); font-weight: 600; font-size: clamp(1.05rem,1.6vw,1.35rem); color: #89988A; }
.trustband .score { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.trustband .score .stars { color: var(--ink); letter-spacing: 2px; font-size: .9rem; }
.trustband .score b { font-weight: 600; }
@media (max-width: 600px) { .trustband .logo-i:nth-child(n+4) { display: none; } }

/* =========================================================================
   Marquee
   ========================================================================= */
.marquee { background: var(--ink); color: var(--paper); overflow: hidden; border-block: 1px solid var(--ink); padding: 16px 0; }
.marquee-track { display: flex; gap: 0; white-space: nowrap; width: max-content; animation: slide 30s linear infinite; }
.marquee span { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem,2.4vw,2rem); padding: 0 28px; display: inline-flex; align-items: center; gap: 28px; }
.marquee span::after { content: "✳"; color: var(--accent); font-style: normal; font-size: .8em; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* =========================================================================
   2 · Problem / reframe
   ========================================================================= */
.sec-head { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,5vw,80px); align-items: start; margin-bottom: clamp(40px,5vw,64px); }
.sec-head .idx { white-space: nowrap; padding-top: 10px; }
.reframe { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(32px,5vw,72px); align-items: start; }
.symptoms { list-style: none; margin: clamp(20px,3vw,32px) 0 0; padding: 0; }
.symptoms li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 1.05rem; }
.symptoms li::before { content: "✕"; font-family: var(--mono); color: var(--accent); font-size: .9rem; padding-top: 3px; }
.note { border: 1px solid var(--ink); padding: clamp(24px,3vw,36px); border-radius: 3px; align-self: stretch; }
.note h3 { font-size: clamp(1.5rem,2.4vw,2rem); margin-bottom: 16px; }

/* =========================================================================
   3 · Services — full-width editorial hover list (NOT cards)
   ========================================================================= */
.svc { border-top: 1px solid var(--line); }
.svc-row {
  display: grid; grid-template-columns: 72px 1fr 1.1fr auto; gap: 24px; align-items: center;
  padding: clamp(22px,2.6vw,34px) 8px; border-bottom: 1px solid var(--line);
  transition: background .2s ease, color .2s ease, padding .2s ease; position: relative;
}
.svc-row .n { font-family: var(--mono); font-size: .8rem; color: var(--muted); letter-spacing: .1em; }
.svc-row h3 { font-size: clamp(1.6rem,3.2vw,2.6rem); font-weight: 600; }
.svc-row p { color: var(--muted); font-size: 1rem; margin: 0; }
.svc-row .go { font-family: var(--mono); font-size: 1.3rem; opacity: .35; transition: opacity .2s, transform .2s; }
.svc-row:hover { background: var(--ink); color: var(--paper); padding-left: 22px; }
.svc-row:hover .n { color: var(--accent); }
.svc-row:hover p { color: #BECDBF; }
.svc-row:hover .go { opacity: 1; color: var(--accent); transform: translateX(6px); }

/* ---- Services: pillar label row ---- */
.svc-label {
  display: block; font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); padding: clamp(26px,2.6vw,36px) 8px 16px;
  border-bottom: 1px solid var(--line);
}
.svc-label.first { border-top: 1px solid var(--line); }

/* =========================================================================
   3 · Care Plans — tiered columns, no pricing, editorial/flat
   ========================================================================= */
.plan-intro { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; margin-bottom: clamp(28px,3vw,40px); }
.plan-intro::before { content: "✳"; color: var(--accent); }
.plan-intro p { font-family: var(--serif-quote); font-style: italic; font-weight: 400; font-size: clamp(1.15rem,1.8vw,1.45rem); line-height: 1.4; max-width: 50ch; }
.plans { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.plan { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(24px,2.4vw,36px); display: flex; flex-direction: column; }
.plan--pop { box-shadow: inset 0 3px 0 var(--accent); background: var(--paper); }
.plan .ptag { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-height: 16px; }
.plan--pop .ptag { color: var(--accent); }
.plan h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem,2.4vw,2rem); margin: 12px 0 6px; }
.plan .who { color: var(--muted); font-size: .96rem; margin: 0 0 22px; }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }
.plan li { display: grid; grid-template-columns: auto 1fr; gap: 12px; font-size: .98rem; line-height: 1.4; }
.plan li::before { content: "—"; font-family: var(--mono); color: var(--accent); }
.plan .quote-tag { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.plan .btn { margin-top: auto; width: 100%; justify-content: center; }
.plan-foot { font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; color: var(--muted); margin-top: 26px; text-transform: uppercase; }
.plan-foot a { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* =========================================================================
   4 · Why — bordered grid, hairline separators, mono numbers
   ========================================================================= */
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.why-cell { border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: clamp(24px,2.6vw,38px); }
.why-cell .n { font-family: var(--mono); font-size: .76rem; color: var(--accent); letter-spacing: .12em; }
.why-cell h4 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin: 18px 0 10px; line-height: 1.1; }
.why-cell p { color: #9CAE9E; font-size: .98rem; margin: 0; }

/* =========================================================================
   5 · Stats — big serif numerals, mono labels
   ========================================================================= */
.statline { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); }
.statline .s { padding: clamp(28px,3vw,44px) 0; border-bottom: 1px solid var(--line); }
.statline .s + .s { border-left: 1px solid var(--line); padding-left: clamp(20px,2vw,32px); }
.statline b { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem,6vw,5rem); line-height: .9; display: block; }
.statline b .u { color: var(--accent); }
.statline span { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 16px; max-width: 22ch; }

/* =========================================================================
   6 · Case study — asymmetric editorial
   ========================================================================= */
.case { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,4vw,64px); align-items: stretch; }
.case-img { background: var(--ink); border-radius: 3px; min-height: 420px; position: relative; overflow: hidden; border: 1px solid var(--ink); }
/* #1 — risograph halftone dot field (vermillion on ink), fading diagonally; meta sits on top */
.case-img::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(23,105,74,.55) 1.4px, transparent 1.6px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(135deg, #000 8%, transparent 92%);
  mask-image: linear-gradient(135deg, #000 8%, transparent 92%);
}
/* riso overprint disc bleeding from the corner */
.case-img::after {
  content: ""; position: absolute; right: -22%; bottom: -28%; width: 72%; aspect-ratio: 1; border-radius: 50%;
  background: var(--accent); mix-blend-mode: screen; opacity: .92;
}
.case-img .meta { position: absolute; left: 24px; bottom: 24px; right: 24px; font-family: var(--mono); }
.case-img .meta b { color: var(--paper); font-family: var(--serif); font-size: 1.6rem; display: block; }
.case-img .meta span { color: #9CAE9E; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; }
.case-img .tagn { position: absolute; top: 22px; right: 22px; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.case-body { display: flex; flex-direction: column; justify-content: center; }
.case-res { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: clamp(24px,3vw,32px) 0; }
.case-res .r { padding: 22px 0; }
.case-res .r + .r { border-left: 1px solid var(--line); padding-left: 18px; }
.case-res b { font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem,3vw,2.6rem); display: block; line-height: 1; color: var(--accent); }
.case-res span { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 10px; }
.pull { font-family: var(--serif-quote); font-style: italic; font-weight: 400; font-size: clamp(1.3rem,2vw,1.65rem); line-height: 1.4; }
.byl { display: flex; align-items: center; gap: 14px; margin-top: 22px; font-family: var(--mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.byl .ic { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 1rem; }
.byl .m { color: var(--muted); }

/* =========================================================================
   7 · Process — numbered editorial rows
   ========================================================================= */
.steps { border-top: 1px solid var(--line-2); }
.step { display: grid; grid-template-columns: 100px 1fr 2fr; gap: 24px; align-items: baseline; padding: clamp(22px,2.4vw,32px) 0; border-bottom: 1px solid var(--line-2); }
.step .n { font-family: var(--serif); font-size: clamp(1.6rem,2.4vw,2.2rem); color: var(--accent); }
.step h4 { font-family: var(--serif); font-weight: 600; font-size: 1.5rem; }
.step p { color: #9CAE9E; margin: 0; }

/* =========================================================================
   8 · Testimonials — big editorial pull quote + supporting
   ========================================================================= */
.tbig { font-family: var(--serif-quote); font-style: italic; font-weight: 400; font-size: clamp(1.9rem,4vw,3.2rem); line-height: 1.16; letter-spacing: -.01em; max-width: 24ch; }
.tbig .mk { color: var(--accent); }
.tgrid { display: grid; grid-template-columns: repeat(2,1fr); gap: clamp(24px,3vw,48px); margin-top: clamp(40px,5vw,64px); border-top: 1px solid var(--line); }
.tq { padding-top: clamp(24px,3vw,32px); border-right: 0; }
.tq p { font-family: var(--serif-quote); font-style: italic; font-weight: 400; font-size: 1.3rem; line-height: 1.45; }
.tq .byl { margin-top: 18px; }

/* =========================================================================
   9 · Reliability
   ========================================================================= */
.rely { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,72px); align-items: start; }
.rely-list { margin: clamp(20px,3vw,28px) 0 0; }
.rely-list div { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 1.02rem; }
.rely-list div::before { content: "—"; font-family: var(--mono); color: var(--accent); }
.switch { border: 1px solid var(--ink); padding: clamp(24px,3vw,36px); border-radius: 3px; }
.switch h3 { font-size: 1.6rem; margin-bottom: 14px; }

/* =========================================================================
   10 · Contact + form (editorial)
   ========================================================================= */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; }
.form { border: 1px solid var(--line-2); border-radius: 3px; padding: clamp(24px,3vw,40px); background: var(--ink-2); }
.fbar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: #9CAE9E; }
.fnum { width: 26px; height: 26px; border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; }
.fnum.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.fln { flex: 1; height: 1px; background: var(--line-2); transition: background .25s ease; }
.fln.on { background: var(--accent); }
.fld label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: #9CAE9E; }
.fstep { display: none; } .fstep.on { display: block; }
.fld { margin-bottom: 18px; }
.fld label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: #BECDBF; margin-bottom: 10px; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--paper);
  font-family: var(--sans); font-size: 1rem; border-radius: 2px;
}
.fld input::placeholder, .fld textarea::placeholder { color: #71836F; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--accent); }
.fld select { color: var(--paper); }
.fld select option { color: #000; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; padding: 11px 15px; border: 1px solid var(--line-2); border-radius: 2px; color: #BECDBF; transition: .15s; }
.chip input { position: absolute; opacity: 0; width: 0; }
.chip.sel, .chip:has(input:checked) { border-color: var(--accent); background: var(--accent); color: #fff; }
.fnav { display: flex; justify-content: space-between; gap: 14px; margin-top: 26px; }
.freassure { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; color: #9CAE9E; text-align: center; margin-top: 16px; text-transform: uppercase; }
/* spam honeypot — hidden from people, visible to bots */
.hp-field { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* form send failure notice */
.form-senderr { margin-top: 16px; padding: 11px 15px; border: 1px solid rgba(23,105,74,.5); border-radius: 6px; font-size: .92rem; line-height: 1.5; color: var(--accent); }
.form-senderr a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.or-line { display: flex; align-items: center; gap: 16px; margin: 28px 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.or-line::before, .or-line::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* Free-audit section (07) — explainer + simple form on light */
.audit-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px,5vw,72px); align-items: start; margin-top: clamp(28px,3.5vw,44px); }
.audit-form { border: 1px solid var(--line); border-radius: 12px; padding: clamp(24px,3vw,38px); background: var(--paper); position: relative; }
.audit-form h3 { font-size: clamp(1.35rem,2vw,1.85rem); margin: 0; letter-spacing: -.01em; }
.audit-form-sub { color: var(--muted); margin: 8px 0 24px; font-size: .96rem; }
.audit-form .fld label { color: var(--ink); }
.audit-form .fld label .opt { color: var(--muted); }
.audit-form .fld input, .audit-form .fld textarea { color: var(--ink); border-color: var(--line); background: var(--paper-2); border-radius: 6px; }
.audit-form .fld input::placeholder, .audit-form .fld textarea::placeholder { color: #8C9C8B; }
.audit-form .fld input:focus, .audit-form .fld textarea:focus { border-color: var(--accent); background: var(--paper); }
.audit-form > .btn { width: 100%; justify-content: center; margin-top: 4px; }
.audit-form .freassure { color: var(--muted); }
.audit-done { text-align: center; padding: 14px 0; }
.audit-form.sent > :not(.audit-done) { display: none; }
.audit-form.sent .audit-done { display: block; }
@media (max-width: 860px) {
  .audit-layout { grid-template-columns: 1fr; }
  .audit-layout .audit-form { order: -1; }
}
/* Homepage free-audit teaser (full form lives on free-audit.html) */
.audit-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,72px); align-items: start; margin-top: clamp(28px,3.5vw,44px); }
.audit-teaser-list { align-self: center; }
@media (max-width: 860px) { .audit-teaser { grid-template-columns: 1fr; } }

/* Cookie consent banner */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--ink); color: var(--paper);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px clamp(18px,3vw,32px);
  padding: 15px clamp(16px,4vw,40px); border-top: 1px solid var(--line-2); box-shadow: 0 -10px 30px -16px rgba(0,0,0,.5); }
.consent-banner p { margin: 0; font-size: .9rem; line-height: 1.5; max-width: 66ch; color: #D6DED4; }
.consent-banner a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.consent-actions { display: flex; gap: 10px; flex: none; }
/* buttons sit on the dark banner — give them light treatment so BOTH are clearly visible
   (Essential-only was rendering ink-on-ink; reject must be as easy to see as accept) */
.consent-banner .btn { padding: 9px 16px; font-size: .74rem; background: var(--paper); border-color: var(--paper); color: var(--ink); }
.consent-banner .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.consent-banner .btn--line { background: transparent; border-color: var(--paper); color: var(--paper); }
.consent-banner .btn--line:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
@media (max-width: 560px) { .consent-actions { width: 100%; } .consent-banner .btn { flex: 1; justify-content: center; } }

/* Sticky free-audit CTA (long pages) */
.sticky-cta { position: fixed; right: clamp(14px,2vw,28px); bottom: clamp(14px,2vw,28px); z-index: 75;
  display: flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease; }
.sticky-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.sticky-cta .btn { box-shadow: 0 14px 32px -12px rgba(19,34,26,.6); }
.sticky-cta-x { background: var(--ink); color: var(--paper); border: 0; width: 26px; height: 26px; border-radius: 50%;
  font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; flex: none;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.45); transition: background .15s ease; }
.sticky-cta-x:hover { background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
@media (max-width: 600px) { .sticky-cta { left: clamp(12px,4vw,20px); right: clamp(12px,4vw,20px); } .sticky-cta .btn { flex: 1; justify-content: center; } }

/* =========================================================================
   Footer — oversized wordmark
   ========================================================================= */
.foot { background: var(--ink); color: var(--paper); padding-top: clamp(56px,7vw,88px); padding-bottom: 32px; }
.foot-cols { display: grid; grid-template-columns: 1.9fr 1fr 1fr; gap: clamp(28px,4vw,56px); padding-bottom: clamp(48px,6vw,80px); }
.foot h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #9CAE9E; margin: 0 0 18px; font-weight: 500; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.foot ul a { font-family: var(--sans); font-size: .98rem; color: #D6DED4; }
.foot ul a:hover { color: var(--accent); }
.foot-mark { font-family: var(--serif); font-weight: 600; font-size: clamp(3rem,13vw,11rem); line-height: .85; letter-spacing: -.03em; border-top: 1px solid var(--line-2); padding-top: clamp(24px,3vw,40px); }
.foot-mark .u { color: var(--accent); }
.foot-carbon { display: flex; align-items: center; gap: 10px; margin-top: clamp(22px,3vw,30px); font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #9CAE9E; }
.foot-colophon { font-family: var(--mono); font-size: .7rem; letter-spacing: .03em; color: #7F927F; margin-top: 10px; max-width: 74ch; line-height: 1.8; }
.foot-colophon b { color: #C9CFD8; font-weight: 500; }
.foot-carbon .mark { width: 13px; height: 13px; color: var(--accent); }
.foot-status { margin-top: 18px; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: #9CAE9E; display: flex; align-items: center; gap: 9px; }
.foot-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(23,105,74,.18); flex: none; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px 28px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-top: clamp(24px,3vw,34px); margin-top: clamp(40px,5vw,64px); font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #9CAE9E; }
.foot-bottom a:hover { color: var(--accent); }
.foot-fine { display: inline-flex; align-items: center; gap: 8px; }
.foot-fine .mark { width: 12px; height: 12px; color: var(--accent); flex: none; }

/* =========================================================================
   Service / inner page hero + components
   ========================================================================= */
.page-hero { text-align: center; padding-block: clamp(44px,7vw,108px) clamp(20px,3vw,36px); }
.page-hero .kick { display: block; margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.page-hero .lede { margin: clamp(18px,2.5vw,28px) auto 0; max-width: 62ch; }
.page-hero .hero-cta { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: clamp(28px,3vw,36px); }

/* Checklist (what's included) */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks.cols { grid-template-columns: 1fr 1fr; gap: 16px 48px; }
.checks li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-size: 1.05rem; line-height: 1.5; }
.checks li::before { content: "✳"; font-family: var(--mono); font-size: .82em; color: var(--accent); padding-top: 4px; }
.checks li strong { font-weight: 600; }
.sec--ink .checks li { color: #D6DED4; }
@media (max-width: 640px) { .checks.cols { grid-template-columns: 1fr; } }

/* Feature grid (bordered cells, like why-grid but for any page) */
.feat-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feat-grid.two { grid-template-columns: repeat(2,1fr); }
.feat-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(24px,2.6vw,36px); transition: background .2s ease; }
.feat-cell:hover { background: rgba(19,34,26,.03); }
.sec--ink .feat-cell:hover { background: rgba(244,242,236,.045); }
.feat-cell .n { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; color: var(--accent); }
.feat-cell h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin: 16px 0 10px; line-height: 1.1; }
.feat-cell p { color: var(--muted); font-size: .98rem; margin: 0; }
@media (max-width: 880px) { .feat-grid, .feat-grid.two { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-grid, .feat-grid.two { grid-template-columns: 1fr; } }

/* FAQ accordion */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 4px; display: flex; justify-content: space-between; gap: 24px; align-items: baseline; font-family: var(--serif); font-weight: 600; font-size: clamp(1.15rem,1.8vw,1.4rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .a { padding: 0 4px 26px; color: var(--muted); max-width: 72ch; font-size: 1.05rem; line-height: 1.65; }
.sec--ink .faq, .sec--ink .faq details { border-color: var(--line-2); }
.sec--ink .faq .a { color: #9CAE9E; }
/* Related guides — article foot, internal-link cluster */
.relposts-sec { border-top: 1px solid var(--line); }
.relposts { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.6vw,22px); }
.relpost { display: flex; flex-direction: column; gap: 12px; padding: clamp(20px,2vw,26px); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.relpost:hover { border-color: rgba(23,105,74,.45); transform: translateY(-3px); box-shadow: 0 16px 32px -24px rgba(19,34,26,.5); }
.relpost .cat { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.relpost h3 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; line-height: 1.32; letter-spacing: -.01em; color: var(--ink); margin: 0; flex: 1; }
.relpost .go { font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 760px) { .relposts { grid-template-columns: 1fr; } }

/* Grouped FAQ (mono cluster labels) + open-state left accent */
.faq:has(.faq-group) { border-top: 0; }
.faq-group { border-top: 1px solid var(--line); }
.faq-group + .faq-group { margin-top: clamp(26px,3vw,42px); }
/* grouped FAQ fills the section width: full-width group label, items in 2 balanced columns */
@media (min-width: 820px) {
  .faq-group { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(36px,5vw,72px); align-items: start; }
  .faq-group .faq-glabel { grid-column: 1 / -1; }
}
.sec--ink .faq-group { border-color: var(--line-2); }
.faq-glabel { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; padding: 18px 4px 2px; }
.faq details[open] { position: relative; background: rgba(23,105,74,.05); }
.faq details[open]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.faq details[open] summary, .faq details[open] > p, .faq details[open] > .a { padding-left: 16px; }
.sec--ink .faq details[open] { background: rgba(23,105,74,.10); }

/* =========================================================================
   Article (single post)
   ========================================================================= */
.article-head { padding-top: clamp(28px,4vw,52px); }
.backlink { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: inline-flex; gap: 8px; }
.backlink:hover { color: var(--accent); }
.article-head .cat { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); display: block; margin: clamp(28px,4vw,44px) 0 16px; }
.article-head h1 { font-size: clamp(2rem,4.4vw,3.4rem); font-weight: 600; max-width: 20ch; }
.article-meta { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 22px; display: flex; gap: 18px; flex-wrap: wrap; }
.prose { max-width: 720px; }
.prose > * { margin: 0 0 1.35em; }
.prose p { font-size: 1.12rem; line-height: 1.7; }
.prose h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem,2.8vw,2.1rem); line-height: 1.15; margin: 1.8em 0 .5em; }
.prose h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 1.5em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { font-size: 1.1rem; line-height: 1.65; margin-bottom: .5em; }
.prose a { color: var(--accent); border-bottom: 1px solid var(--accent); }
.prose a:hover { background: var(--accent); color: #fff; }
.prose strong { font-weight: 600; }
.prose code { font-family: var(--mono); font-size: .9em; background: rgba(19,34,26,.07); padding: 2px 6px; border-radius: 3px; }
.prose pre { background: var(--ink); color: var(--paper); padding: 20px 22px; border-radius: 4px; overflow-x: auto; font-family: var(--mono); font-size: .9rem; line-height: 1.55; }
.prose pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.prose blockquote { border-left: 3px solid var(--accent); padding-left: 18px; color: var(--muted); font-family: var(--serif); font-size: 1.2rem; }
.prose img { border-radius: 4px; border: 1px solid var(--line); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; background: var(--paper-2); }

/* =========================================================================
   Blog index
   ========================================================================= */
.post-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px,3.5vw,44px); }
.fbtn { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 10px 16px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 2px; transition: .15s; }
.fbtn.on, .fbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.posts { border-top: 1px solid var(--line); }
.post { display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: baseline; padding: clamp(22px,2.4vw,32px) 8px; border-bottom: 1px solid var(--line); transition: background .2s ease, color .2s ease, padding .2s ease; }
.post .cat { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding-top: 4px; }
.post h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem,2.1vw,1.7rem); margin-bottom: 8px; line-height: 1.12; }
.post p { color: var(--muted); font-size: 1rem; margin: 0; max-width: 64ch; }
.post .go { font-family: var(--mono); font-size: 1.2rem; opacity: .4; transition: opacity .2s, transform .2s; align-self: center; }
.post:hover { background: var(--ink); color: var(--paper); padding-left: 22px; }
.post:hover .cat { color: var(--accent); }
.post:hover p { color: #BECDBF; }
.post:hover .go { opacity: 1; color: var(--accent); transform: translateX(5px); }
.post.hide { display: none; }
@media (max-width: 760px) { .post { grid-template-columns: 1fr; gap: 8px; } .post .go { display: none; } .post .cat { padding-top: 0; } }

/* =========================================================================
   Mobile
   ========================================================================= */
.mpanel { display: none; }
@media (max-width: 980px) {
  .hnav { display: none; }
  .burger { display: inline-flex; }
  /* #4 — full-screen typographic overlay nav */
  .mpanel.open { display: flex; flex-direction: column; justify-content: center; position: fixed; inset: 0; background: var(--paper); z-index: 70; padding: clamp(24px,7vw,56px); overflow: auto; }
  .mpanel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: mnav; }
  .mpanel a { display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-size: clamp(2rem,9vw,3.2rem); font-weight: 600; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mpanel li a::before { counter-increment: mnav; content: "0" counter(mnav); font-family: var(--mono); font-size: .42em; color: var(--accent); letter-spacing: .08em; }
  .mpanel .btn { width: 100%; justify-content: center; margin-top: clamp(28px,5vw,40px); }
  .mpanel-close { position: absolute; top: clamp(16px,4vw,28px); right: clamp(18px,5vw,40px); background: none; border: 0; font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px 10px; }
  .mpanel-close:hover { color: var(--accent); }
  body.nav-open { overflow: hidden; }
  .hero-grid, .reframe, .case, .rely, .contact, .tgrid { grid-template-columns: 1fr; }
  .why-grid, .plans { grid-template-columns: 1fr 1fr; }
  .plan--pop { box-shadow: inset 3px 0 0 var(--accent); }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .report { margin-top: 8px; }
  .svc-row { grid-template-columns: 48px 1fr auto; }
  .svc-row p { display: none; }
  .step { grid-template-columns: 64px 1fr; }
  .step p { grid-column: 2; }
}
@media (max-width: 600px) {
  .hdr-right { gap: 10px; }
  /* shorten the visible CTA label on small screens (screen readers still read the full text) */
  .hdr .btn { padding: 9px 12px; font-size: 0; }
  .hdr .btn::before { content: "Free audit"; font-size: .72rem; letter-spacing: .03em; }
  .hdr .btn .ar { display: none; }
  .why-grid, .plans, .statline, .case-res, .foot-cols { grid-template-columns: 1fr; }
  .statline .s + .s { border-left: 0; padding-left: 0; }
  .case-res .r + .r { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
}

/* Reveal */
/* #6 — CSS scroll-driven reveal (replaces JS observer). Visible by default = safe fallback. */
.rev { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .rev { animation: reveal linear both; animation-timeline: view(); animation-range: entry 4% entry 52%; }
  }
}

/* Accessible, on-brand focus states (keyboard only) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.btn:focus-visible, .chip:focus-visible, summary:focus-visible { outline-offset: 4px; }
.fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sec--ink :focus-visible, .form :focus-visible { outline-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .rev { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; } .status .live { animation: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================================
   #7 — Cross-document (MPA) view transitions
   ========================================================================= */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .24s ease both; }
::view-transition-new(root) { animation: vt-in .30s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
.hdr .logo { view-transition-name: logo; }   /* persists/morphs across pages */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* =========================================================================
   #10 — Recurring brand mark (single source, recolours via currentColor)
   ========================================================================= */
:root { --mark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cline x1='12' y1='3.2' x2='12' y2='20.8'/%3E%3Cline x1='5.4' y1='7.4' x2='18.6' y2='16.6'/%3E%3Cline x1='18.6' y1='7.4' x2='5.4' y2='16.6'/%3E%3C/g%3E%3C/svg%3E"); }
.mark { display: inline-block; width: .9em; height: .9em; background: currentColor; vertical-align: -.08em; flex: none;
  -webkit-mask: var(--mark-svg) center / contain no-repeat; mask: var(--mark-svg) center / contain no-repeat; }
.rule-mark { display: flex; align-items: center; gap: clamp(16px,3vw,28px); color: var(--accent); margin: 0; }
.rule-mark::before, .rule-mark::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.rule-mark .mark { width: 15px; height: 15px; }
.foot-mark { position: relative; }
.foot-mark::before { content: ""; display: block; width: 22px; height: 22px; background: var(--accent);
  -webkit-mask: var(--mark-svg) center / contain no-repeat; mask: var(--mark-svg) center / contain no-repeat;
  margin-bottom: clamp(20px,3vw,30px); }

/* =========================================================================
   #8 — Hairline scroll-progress bar + sticky case visual
   ========================================================================= */
.progress-bar { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 100; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes grow { to { transform: scaleX(1); } }
    .progress-bar { animation: grow auto linear; animation-timeline: scroll(root block); }
  }
}
@supports not (animation-timeline: scroll()) { .progress-bar { display: none; } }
@media (min-width: 981px) {
  .case-img { position: sticky; top: 96px; align-self: start; }
}

/* =========================================================================
   #4 — Single editorial drop cap on article intros
   ========================================================================= */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .prose > p:first-of-type::first-letter {
    -webkit-initial-letter: 3; initial-letter: 3;
    font-family: var(--serif-quote); font-weight: 500; color: var(--accent);
    margin-right: .08em;
  }
}

/* =========================================================================
   NEW #3 — Hide-on-scroll condensing header
   ========================================================================= */
.hdr { transition: transform .3s ease, box-shadow .3s ease, background .3s ease; will-change: transform; }
.hdr--scrolled { box-shadow: 0 1px 0 var(--line); background: rgba(244,242,236,.92); backdrop-filter: saturate(160%) blur(8px); }
.hdr--hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { .hdr { transition: none; } .hdr--hidden { transform: none; } }

/* =========================================================================
   NEW #5 — State & micro-interaction polish
   ========================================================================= */
/* on-brand native controls */
:root { accent-color: var(--accent); }
input, textarea, select { caret-color: var(--accent); }

/* refined desktop scrollbar (thin, palette-matched, no layout jump) */
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(19,34,26,.34) transparent; }
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(19,34,26,.28); border-radius: 999px; border: 3px solid var(--paper); }
  ::-webkit-scrollbar-thumb:hover { background: rgba(19,34,26,.46); }
  .sec--ink ::-webkit-scrollbar-thumb { border-color: var(--ink); }
}

/* button states */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }

/* smooth native <details> open/close */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .34s ease, content-visibility .34s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* =========================================================================
   NEW #5 — Code-copy button on article code blocks
   ========================================================================= */
.prose pre { position: relative; }
.copy-btn { position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #BECDBF; background: rgba(244,242,236,.07); border: 1px solid var(--line-2); border-radius: 3px; padding: 5px 9px; cursor: pointer; opacity: 0; transition: opacity .2s ease, color .2s ease, border-color .2s ease; }
.prose pre:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn.copied { color: var(--accent); border-color: var(--accent); }

/* =========================================================================
   NEW #6/#7 — Form validation states + autofill fix
   ========================================================================= */
.fld input:user-invalid, .fld textarea:user-invalid { border-color: var(--accent); }
.fld input:user-valid, .fld textarea:user-valid { border-color: rgba(244,242,236,.4); }
.fld-error { color: #FF8A6A; font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; margin-top: 8px; }
.fld input:-webkit-autofill, .fld textarea:-webkit-autofill, .fld select:-webkit-autofill {
  -webkit-text-fill-color: var(--paper);
  -webkit-box-shadow: 0 0 0 1000px var(--ink-2) inset;
  caret-color: var(--paper);
  transition: background-color 9999s ease-in-out 0s;
}

/* =========================================================================
   NEW #9 — Skip render of long off-screen content (no layout jump)
   ========================================================================= */
.foot { content-visibility: auto; contain-intrinsic-size: auto 480px; }
.posts { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* =========================================================================
   NEW #10 — Hover-reveal motif on service rows (swap for client thumbnails later)
   ========================================================================= */
@media (hover: hover) and (min-width: 981px) {
  .svc-row::after {
    content: ""; position: absolute; right: 62px; top: 10px; bottom: 10px; width: 128px; border-radius: 3px;
    background-color: #24382C; border: 1px solid var(--line-2);
    background-image: radial-gradient(rgba(23,105,74,.6) 1.2px, transparent 1.4px); background-size: 10px 10px;
    -webkit-mask-image: linear-gradient(135deg, #000 10%, transparent 95%);
    mask-image: linear-gradient(135deg, #000 10%, transparent 95%);
    opacity: 0; transform: translateX(16px); transition: opacity .25s ease, transform .25s ease; pointer-events: none;
  }
  .svc-row:hover::after { opacity: 1; transform: none; }
}

/* =========================================================================
   ROUND 4 — "Published edition" signatures
   ========================================================================= */

/* #5/#6 — Masthead + dateline (homepage), edition number */
.masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(16px,3vw,48px); flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: clamp(12px,1.8vw,22px); margin-bottom: clamp(28px,5vw,72px); }
.masthead-name { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem,4.5vw,3.2rem); line-height: .9; letter-spacing: -.03em; color: var(--ink); white-space: nowrap;
  /* #2 risograph misregistration (vermillion offset) + #3 letterpress deboss (white lower lip) */
  text-shadow: 2px 2px 0 var(--accent), 0 1px 0 rgba(255,255,255,.55); }
.masthead-name .u { color: var(--accent); }
.masthead-name [data-ch] { display: inline-block; will-change: font-variation-settings; }
.masthead-line { font-family: var(--mono); font-size: clamp(.62rem,1vw,.74rem); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; padding-bottom: .5em; }
@media (max-width: 600px) { .masthead-name { font-size: clamp(1.9rem,12vw,2.8rem); white-space: normal; } .masthead-line { text-align: left; } }

/* #4 — paper grain + ink sinking into it (hero headline) */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: -10% 0 0; z-index: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hero > * { position: relative; z-index: 1; }
.hero h1 { mix-blend-mode: multiply; }

/* #7 — scroll-drawn vermillion thread (left gutter spine) */
.thread { position: fixed; left: max(14px, calc((100vw - var(--maxw)) / 2 - 18px)); top: 0; width: 1px; height: 100vh; background: var(--accent); transform-origin: top; transform: scaleY(0); z-index: 5; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) { .thread { animation: thread-grow auto linear; animation-timeline: scroll(root block); } @keyframes thread-grow { to { transform: scaleY(1); } } }
}
@supports not (animation-timeline: scroll()) { .thread { display: none; } }
@media (max-width: 1120px) { .thread { display: none; } }

/* #8 — highlighter swipe across key words on scroll */
.swipe { background-image: linear-gradient(rgba(23,105,74,.3) 0 0); background-repeat: no-repeat; background-position: 0 86%; background-size: 0% .58em; padding: 0 .04em; }
@supports not (animation-timeline: view()) { .swipe { background-size: 100% .58em; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes swipe { to { background-size: 100% .58em; } }
    .swipe { animation: swipe linear both; animation-timeline: view(); animation-range: entry 35% cover 48%; }
  }
}
@media (prefers-reduced-motion: reduce) { .swipe { background-size: 100% .58em; } }

/* #9 — Tufte-style margin sidenotes & figure captions (articles) */
.prose { counter-reset: sidenote; }
.sidenote-ref { counter-increment: sidenote; }
.sidenote-ref::after { content: counter(sidenote); font-family: var(--mono); font-size: .7em; vertical-align: super; color: var(--accent); margin-left: 1px; }
.sidenote { float: right; clear: right; width: 42%; margin: .2rem -48% .8rem 0; font-family: var(--sans); font-size: .82rem; line-height: 1.45; color: var(--muted); position: relative; }
.sidenote::before { content: counter(sidenote) "  "; font-family: var(--mono); font-size: .8em; color: var(--accent); }
.fignote { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted); margin-top: 8px; }
.fignote b { color: var(--accent); font-weight: 500; }
@media (max-width: 1180px) { .sidenote { float: none; width: auto; margin: 1.1em 0; padding-left: 16px; border-left: 2px solid var(--accent); } .sidenote-ref::after { display: none; } }

/* #10 — ink-soak weight on section headings as they enter + axis-weight link hover */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes inksoak { from { font-variation-settings: "wght" 420, "opsz" 14; } to { font-variation-settings: "wght" 660, "opsz" 40; } }
    .sec-head h2 { animation: inksoak linear both; animation-timeline: view(); animation-range: entry 6% entry 56%; }
  }
}
.foot a, .tlink, .related a { transition: font-variation-settings .25s ease, color .2s ease; }
.foot a:hover { font-variation-settings: "wght" 600; }
.related a:hover { font-variation-settings: "wght" 700; }

/* =========================================================================
   ROUND 5 — KINETIC MOTION + ANGLED GEOMETRY  (the "wow" layer)
   Everything scroll-linked via animation-timeline (no JS), reduced-motion safe.
   Goal: the page moves as you scroll, and it stops being stacked rectangles.
   ========================================================================= */
:root { --slant: clamp(26px, 4.5vw, 64px); }

/* ---- Angled section edges --------------------------------------------------
   Dark bands are cut on a diagonal so the page reads as interlocking planes,
   not a stack of boxes. Extra padding compensates so content is never clipped. */
.sec--slant, .sec--slant-rev {
  padding-block: calc(clamp(64px,9vw,120px) + var(--slant));
  margin-block: calc(var(--slant) * -0.55);
}
.sec--slant     { clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 calc(100% - var(--slant))); }
.sec--slant-rev { clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%); }
.poster.sec--slant-rev, .poster.sec--slant { margin-block: calc(var(--slant) * -0.55); }
/* single-edge slants — for dark bands that sit beside another dark band on one side */
.sec--slant-bot { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant)), 0 100%); padding-bottom: calc(clamp(64px,9vw,120px) + var(--slant)); margin-bottom: calc(var(--slant) * -0.55); }
.sec--slant-top { clip-path: polygon(0 var(--slant), 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(64px,9vw,120px) + var(--slant)); margin-top: calc(var(--slant) * -0.55); }
@media (max-width: 600px) { :root { --slant: 18px; } }

/* ---- Scroll-linked motion primitives -------------------------------------- */
.px, .slide-l, .slide-r, .drift-x, .spin, .grow-up { /* safe static fallback */ }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* vertical parallax — element rises/falls against the scroll */
    @keyframes ar-rise { from { transform: translateY(var(--rise, 46px)); } to { transform: translateY(calc(var(--rise, 46px) * -1)); } }
    .px { animation: ar-rise linear both; animation-timeline: view(); animation-range: cover; will-change: transform; }

    /* slide in from the gutter as a block enters */
    @keyframes ar-slide-l { from { opacity:.001; transform: translateX(-46px); } to { opacity:1; transform:none; } }
    .slide-l { animation: ar-slide-l linear both; animation-timeline: view(); animation-range: entry 4% entry 44%; }
    @keyframes ar-slide-r { from { opacity:.001; transform: translateX(46px); } to { opacity:1; transform:none; } }
    .slide-r { animation: ar-slide-r linear both; animation-timeline: view(); animation-range: entry 4% entry 44%; }

    /* horizontal drift — big type slides as you pass it */
    @keyframes ar-drift-x { from { transform: translateX(var(--dx, 6%)); } to { transform: translateX(calc(var(--dx, 6%) * -1)); } }
    .drift-x { animation: ar-drift-x linear both; animation-timeline: view(); animation-range: cover; will-change: transform; }

    /* rotate + scale — for SVG riso discs (transform-box keeps origin on the shape) */
    @keyframes ar-spin { from { transform: rotate(var(--spin-from, 0deg)) scale(var(--spin-s0, .96)); } to { transform: rotate(var(--spin, 24deg)) scale(var(--spin-s1, 1.06)); } }
    .spin { transform-box: fill-box; transform-origin: center; animation: ar-spin linear both; animation-timeline: view(); animation-range: cover; will-change: transform; }

    /* numerals rise + ink-soak as the stat line enters */
    @keyframes ar-grow { from { opacity:.001; transform: translateY(34px); } to { opacity:1; transform:none; } }
    .grow-up { animation: ar-grow linear both; animation-timeline: view(); animation-range: entry 2% entry 42%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sec--slant, .sec--slant-rev, .sec--slant-top, .sec--slant-bot { clip-path: none; }
}

/* ---- Full-bleed vermillion POSTER interstitial (#2/#3/#4) ------------------ */
.poster { background: var(--accent); color: #fff; overflow: clip; position: relative; isolation: isolate; }
.poster .wrap { padding-block: clamp(56px,10vw,128px); }
.poster-eyebrow { font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(19,34,26,.6); }
.poster-line { font-family: var(--serif); font-weight: 700; font-size: clamp(2.7rem, 9.4vw, 7.4rem); line-height: .9; letter-spacing: -.035em; color: #fff; margin: clamp(18px,2.6vw,30px) 0 0; max-width: 16ch; text-wrap: balance; }
.poster-line .stop { color: var(--ink); }
.poster-sub { font-family: var(--serif-quote); font-style: italic; font-size: clamp(1.15rem,2vw,1.7rem); color: rgba(19,34,26,.78); margin-top: clamp(18px,2.4vw,28px); max-width: 40ch; }
/* registration crosshair, top-right, as a print tell */
.poster::after { content: ""; position: absolute; top: clamp(20px,3vw,40px); right: clamp(20px,3vw,40px); width: 26px; height: 26px;
  background:
    linear-gradient(rgba(19,34,26,.55),rgba(19,34,26,.55)) center/1.4px 100% no-repeat,
    linear-gradient(rgba(19,34,26,.55),rgba(19,34,26,.55)) center/100% 1.4px no-repeat;
  border: 1.4px solid rgba(19,34,26,.55); border-radius: 50%; }

/* ---- Disciplines taxonomy line (#15) -------------------------------------- */
.taxonomy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5em 1.1em; margin-top: clamp(22px,3vw,32px);
  font-family: var(--mono); font-size: clamp(.72rem,1vw,.86rem); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.taxonomy span { display: inline-flex; align-items: baseline; gap: 1.1em; }
.taxonomy span::after { content: "/"; color: var(--accent); }
.taxonomy span:last-child::after { content: ""; }

/* ---- Dark "gallery" work section + copy-led hairline work index ------------ */
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #9CAE9E;
  border-top: 1px solid var(--line-2); padding-top: 16px; margin-top: clamp(36px,4.5vw,56px); }
.work-head b { color: var(--accent); font-weight: 500; }
.work-index { list-style: none; margin: 0; padding: 0; }
.wx-row { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: clamp(18px,3vw,52px); align-items: start;
  padding: clamp(28px,3.6vw,48px) 4px; border-bottom: 1px solid var(--line-2); position: relative; }
.wx-row .wx-n { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: #7F927F; font-variant-numeric: tabular-nums; padding-top: .5em; }
.wx-client { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 14px; }
.wx-head { font-family: var(--serif); font-weight: 600; font-size: clamp(1.7rem, 4.2vw, 3.5rem); line-height: .98; color: var(--paper); max-width: 18ch; letter-spacing: -.02em; transition: color .2s ease; }
.wx-head .ar { color: var(--accent); font-family: var(--mono); font-size: .5em; vertical-align: .25em; opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; display: inline-block; }
.wx-scope { font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #7F927F; margin: 16px 0 0; }
.wx-scope b { color: #BECDBF; font-weight: 400; }

/* Case study — client quote, scope chips, dual CTA (homepage 05, on light) */
.case-quote { margin: 22px 0 0; padding: 2px 0 2px 18px; border-left: 2px solid var(--accent); font-family: var(--serif); font-style: italic; font-size: 1.1rem; line-height: 1.5; color: var(--ink); }
.case-quote cite { display: block; margin-top: 9px; font-family: var(--mono); font-style: normal; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cs-scope-lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 24px 0 10px; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chip { font-family: var(--mono); font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; padding: 7px 13px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink); background: var(--paper); }
.case-cta { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-top: 26px; }

/* Hosting — "Where your site lives" renewable-energy panel */
.sec--contact-top { padding-top: clamp(40px,6vw,84px); }

.green-home { margin-top: clamp(40px,5vw,64px); border: 1px solid var(--line); border-radius: 14px; padding: clamp(26px,3.4vw,44px); background: var(--paper); }
.green-home .gh-head { max-width: 66ch; }
.green-home .gh-head .kick { display: block; margin-bottom: 12px; }
.green-home .gh-head h3 { font-size: clamp(1.45rem,2.3vw,2.1rem); margin: 0 0 14px; letter-spacing: -.01em; }
.gh-sources { list-style: none; margin: clamp(26px,3vw,40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(14px,1.8vw,24px); }
.gh-sources li { display: flex; flex-direction: column; gap: 9px; padding: clamp(18px,2vw,24px); border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); }
.gh-glyph { width: 34px; height: 34px; }
.gh-glyph .g-ink { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gh-glyph .g-acc { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gh-sources b { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.gh-sources span { color: var(--muted); font-size: .92rem; line-height: 1.45; }
.gh-stats { display: flex; flex-wrap: wrap; gap: clamp(22px,4.5vw,56px); margin-top: clamp(26px,3vw,38px); padding-top: clamp(22px,2.6vw,30px); border-top: 1px solid var(--line); }
.gh-stats b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(1.8rem,3vw,2.4rem); color: var(--accent); line-height: 1; }
.gh-stats span { font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 9px; display: block; }
@media (max-width: 720px) { .gh-sources { grid-template-columns: 1fr; } }

/* Hosting — second accent: muted forest green, used ONLY on renewable elements */
:root { --green: #3E7D5B; --green-soft: rgba(62,125,91,.10); }
.green { color: var(--green); }
.gh-glyph .g-acc { stroke: var(--green); }
.green-home { border-color: rgba(62,125,91,.38); }
.green-home .gh-head .kick { color: var(--green); }
.gh-sources li { border-color: rgba(62,125,91,.26); }
.gh-stats b { color: var(--green); }

/* Hosting — carbon-per-visit badge */
.carbon-badge { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(24px,3vw,32px); padding: 12px 20px; border: 1px solid rgba(62,125,91,.42); border-radius: 100px; background: var(--green-soft); }
.carbon-badge .cb-leaf { width: 18px; height: 18px; color: var(--green); flex: none; }
.carbon-badge b { color: var(--green); font-family: var(--serif); font-weight: 600; font-size: 1.02rem; }
.carbon-badge span { font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; color: var(--muted); }
.carbon-badge a { color: var(--green); }
@media (max-width: 560px) { .carbon-badge { border-radius: 14px; align-items: flex-start; } }

/* Hosting — accreditation / credential bar under the hero */
.cred-bar { border-block: 1px solid var(--line); background: var(--paper-2); }
.cred-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(12px,1.6vw,22px); padding-block: clamp(18px,2vw,24px); }
.cred-bar .lbl { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.cred { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); padding: 8px 14px; border: 1px solid var(--line); border-radius: 100px; background: var(--paper); }
.cred svg { width: 15px; height: 15px; flex: none; color: var(--accent); }
.cred--green { border-color: rgba(62,125,91,.45); color: var(--green); }
.cred--green svg { color: var(--green); }
@media (max-width: 600px) { .cred { font-size: .64rem; padding: 7px 11px; gap: 7px; } }

/* Hosting — "two ways to buy" as a guided decision */
.fc-price { font-family: var(--mono); font-size: .8rem; letter-spacing: .03em; color: var(--muted); margin-top: 16px; }
.fc-price b { color: var(--accent); font-size: 1.1rem; font-family: var(--serif); font-weight: 600; }
.feat-cell--pick { border-color: rgba(23,105,74,.5); }
.fc-pick { display: block; width: fit-content; margin-bottom: 14px; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 5px 12px; border-radius: 100px; }
.wx-metric { text-align: right; align-self: center; }
.wx-metric b { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 5vw, 4rem); line-height: .86; color: var(--accent); display: block; font-variant-numeric: tabular-nums lining-nums; }
.wx-metric span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: #9CAE9E; display: block; margin-top: 8px; }
.wx-row:hover .wx-head { color: var(--accent); }
.wx-row:hover .wx-head .ar { opacity: 1; transform: none; }
/* broken-rhythm: nudge alternating rows so baselines don't all align (#6) */
@media (min-width: 900px) {
  .wx-row:nth-child(even) { padding-left: clamp(28px,6vw,120px); }
  .wx-row:nth-child(even)::before { content: ""; position: absolute; left: 0; top: 50%; width: clamp(16px,4vw,80px); height: 1px; background: var(--line-2); }
}
@media (max-width: 760px) {
  .wx-row { grid-template-columns: 1fr; gap: 6px; }
  .wx-row .wx-n { padding-top: 0; }
  .wx-metric { text-align: left; margin-top: 14px; }
}
/* case study sitting on the dark gallery ground */
.sec--ink .case-img { border-color: var(--line-2); }
.sec--ink .case-res { border-color: var(--line-2); }
.sec--ink .case-res .r + .r { border-color: var(--line-2); }
.sec--ink .pull { color: var(--paper); }
.sec--ink .case-res span { color: #9CAE9E; }
.sec--ink .byl .ic { border-color: var(--line-2); }
/* type overhang: the case headline laps over the plate edge (#5) */
@media (min-width: 981px) {
  .case--overhang .case-body { z-index: 2; }
  .case--overhang .case-body .h-md { margin-left: clamp(-72px,-5vw,-32px); }
}

/* ---- Bracketed related links (#13) ---------------------------------------- */
.bracket-row { display: flex; flex-wrap: wrap; gap: 14px clamp(20px,3vw,36px); align-items: baseline; margin-top: clamp(32px,4vw,52px);
  border-top: 1px solid var(--line-2); padding-top: clamp(22px,2.6vw,30px); }
.bracket-row .lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #7F927F; }
.bracket { font-family: var(--mono); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); transition: color .15s ease; }
.bracket::before { content: "[ "; color: var(--accent); }
.bracket::after  { content: " ]"; color: var(--accent); }
.bracket:hover { color: var(--accent); }

/* ---- Wordmark conceit: registered mark locked into the name (#20) --------- */
.reg { font-family: var(--mono); font-weight: 500; vertical-align: super; color: var(--muted); }
.logo .reg { font-size: .42em; margin-left: 1px; }
.masthead-name .reg { font-size: .26em; margin-left: .12em; vertical-align: super; text-shadow: none; -webkit-text-fill-color: var(--muted); }
.foot .logo .reg { color: #9CAE9E; }
.foot-mark .reg { font-size: .16em; vertical-align: super; color: var(--accent); margin-left: .1em; }

/* section index numbers slide in from the gutter as each section enters */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .sec-head .idx { animation: ar-slide-l linear both; animation-timeline: view(); animation-range: entry 3% entry 40%; }
  }
}

/* =========================================================================
   ROUND 6 — masthead cleanup, mobile status bar, interactive hero,
   pinned horizontal work gallery
   ========================================================================= */

/* ---- Dateline ribbon (name removed — no longer doubles the header logo) ---- */
.masthead { justify-content: flex-start; }
.masthead-line { display: inline-flex; align-items: center; gap: .7em; text-align: left; padding-bottom: 0; }
.masthead-line .mark { color: var(--accent); width: .9em; height: .9em; }

/* ---- Mobile-only availability bar, directly under the nav ------------------ */
.statusbar { display: none; }
@media (max-width: 980px) {
  .statusbar { display: flex; justify-content: center; align-items: center; gap: 10px;
    padding: 11px 20px; border-bottom: 1px solid var(--line); background: var(--paper); }
  .statusbar .status { font-size: .72rem; }
  .hero-copy .status { display: none; }   /* avoid showing it twice on mobile */
}

/* ---- Interactive hero: pointer-reactive depth parallax (WOW 1) ------------- */
.hero-art-wrap { position: relative; }
.hero-art [data-depth] { transition: transform .3s cubic-bezier(.2,.7,.2,1); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .hero-art [data-depth] { transition: none; transform: none !important; } }
.hero-art .screen-line { opacity: .9; }

/* ---- Pinned horizontal work gallery (WOW 2) ------------------------------- */
.hwork { background: var(--ink); color: var(--paper); position: relative; }
.hwork-pin { padding-block: clamp(48px,6vw,80px); }
.hwork-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #9CAE9E; margin-bottom: clamp(28px,3.5vw,44px); }
.hwork-head b { color: var(--accent); font-weight: 500; }
.hwork-head .drag-hint { display: inline-flex; align-items: center; gap: 8px; color: #7F927F; }
.hwork-track { display: flex; flex-wrap: wrap; gap: clamp(18px,2vw,28px); padding-inline: var(--pad); max-width: var(--maxw); margin-inline: auto; }
.wcard { flex: 0 0 auto; width: min(86vw, 400px); border: 1px solid var(--line-2); border-radius: 4px; padding: clamp(20px,2vw,28px); display: flex; flex-direction: column; background: #1F1A13; }
.wcard-plate { position: relative; height: 150px; border-radius: 3px; overflow: hidden; background: #120F0B; border: 1px solid var(--line-2); margin-bottom: 22px; }
.wcard-plate::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(23,105,74,.6) 1.3px, transparent 1.5px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(135deg,#000 6%,transparent 90%); mask-image: linear-gradient(135deg,#000 6%,transparent 90%); }
.wcard-plate::after { content: ""; position: absolute; right: -18%; bottom: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--accent); mix-blend-mode: screen; opacity: .9; }
.wcard-plate .pn { position: absolute; top: 14px; right: 14px; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); z-index: 2; }
.wcard .wc-client { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.wcard h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem,2vw,1.7rem); line-height: 1.04; margin: 12px 0 0; color: var(--paper); letter-spacing: -.01em; }
.wcard .wc-metric { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2); }
.wcard .wc-metric b { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem,3vw,2.6rem); line-height: .85; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }
.wcard .wc-metric span { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: #9CAE9E; }
.wcard .wc-scope { font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: #7F927F; margin: 14px 0 0; }
.wcard--cta { justify-content: center; align-items: flex-start; background: var(--accent); border-color: var(--accent); }
.wcard--cta h3 { color: #fff; font-size: clamp(1.6rem,2.6vw,2.2rem); max-width: 12ch; }
.wcard--cta .wc-go { font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin-top: 22px; display: inline-flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
/* Pin + horizontal scroll-drive on capable desktops only */
@media (min-width: 981px) {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .hwork { height: 340vh; }
      .hwork-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
      .hwork-track { flex-wrap: nowrap; width: max-content; max-width: none; padding-inline: 0; margin-inline: 0;
        padding-left: max(var(--pad), calc((100vw - var(--maxw))/2 + var(--pad)));
        animation: htrack linear both; animation-timeline: view(); animation-range: contain 0% contain 100%; will-change: transform; }
      @keyframes htrack { from { transform: translateX(0); } to { transform: translateX(calc(-100% + 92vw)); } }
      .hwork-head { margin-bottom: clamp(28px,3vw,40px); }
    }
  }
}

/* =========================================================================
   ROUND 7 — interactive hero + real-screenshot case frame on inner pages
   ========================================================================= */

/* ---- Two-zone interactive hero for inner pages (copy + pointer-depth art) -- */
.page-hero--art { display: grid; grid-template-columns: 7fr 3fr; gap: clamp(28px,5vw,72px); align-items: center; text-align: left; padding-block: clamp(32px,4.5vw,72px) clamp(24px,3vw,44px); }
.page-hero--art .ph-copy { max-width: none; }
.page-hero--art h1, .page-hero--art .lede { margin-inline: 0; max-width: none; }
.page-hero--art .lede { margin-top: clamp(16px,2vw,24px); max-width: 54ch; }
.page-hero--art .hero-cta { justify-content: flex-start; }
.page-hero--art .hero-art { max-height: 56vh; }
@media (max-width: 900px) {
  .page-hero--art { grid-template-columns: 1fr; }
  .page-hero--art .hero-art-wrap { order: -1; max-width: 400px; }
}

/* ---- Real screenshot inside a case-img frame ------------------------------ */
.case-img--shot { background: var(--paper-2); }
.case-img--shot::before, .case-img--shot::after { display: none !important; }
.case-img--shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* prominent dark meta card pinned to the bottom — clear of the client logo up top */
.shot-meta { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 3;
  background: rgba(18,15,11,.84); border: 1px solid rgba(244,242,236,.22); border-radius: 8px;
  padding: 17px 19px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.shot-meta b { font-family: var(--serif); font-weight: 600; font-size: clamp(1.4rem,2vw,1.85rem); color: #fff; display: block; letter-spacing: -.01em; line-height: 1.04; }
.shot-meta span { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #BECDBF; display: block; margin-top: 8px; }
.shot-live { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #fff;
  border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.shot-live .live { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(23,105,74,.6); animation: pulse 2.4s infinite; }
.shot-live:hover { color: var(--accent); }
.case-scope { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.case-scope b { color: var(--ink); font-weight: 500; }
.sec--ink .case-scope b { color: var(--paper); }

/* ---- Device-framed real work: browser frame + overlapping phone (proof of responsive craft) */
.case-img--device { background: transparent; border: 0; min-height: 0; overflow: visible; display: flex; align-items: center;
  padding-bottom: clamp(26px,4vw,54px); padding-right: clamp(8px,2vw,24px); }
.case-img--device::before, .case-img--device::after { display: none !important; }
.case-img--device-solo { padding-right: 0; padding-bottom: 0; }
.case-img--device-solo .dv-browser { box-shadow: 0 26px 56px -30px rgba(19,34,26,.5); }
.device { position: relative; width: 100%; }
.dv-browser { border: 1px solid var(--ink); border-radius: 11px; overflow: hidden; background: #fff;
  box-shadow: 0 22px 48px -28px rgba(19,34,26,.55); }
.dv-bar { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 15px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.dv-dots { display: inline-flex; gap: 7px; flex: none; }
.dv-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(19,34,26,.22); }
.dv-dots i:first-child { background: var(--accent); }
.dv-url { font-family: var(--mono); font-size: .68rem; letter-spacing: .03em; color: var(--muted);
  background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: 4px 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-screen img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.dv-screen picture { display: block; width: 100%; }
.dv-phone { position: absolute; bottom: -9%; right: 2%; width: 29%; min-width: 96px;
  border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden; background: #fff;
  box-shadow: 0 18px 34px -18px rgba(19,34,26,.6); }
.dv-phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 17.5; object-fit: cover; object-position: top center; }
.sec--ink .dv-browser, .sec--ink .dv-phone { box-shadow: 0 22px 50px -26px rgba(0,0,0,.7); }
@media (max-width: 760px) { .dv-phone { width: 26%; right: 2%; } }
.tagn .loc { color: var(--muted); font-size: .8em; text-transform: none; letter-spacing: .02em; margin-left: 6px; }
.sec--ink .tagn .loc { color: #9CAE9E; }

/* =========================================================================
   ROUND 8 — burger menu on ALL devices + availability status in the header
   ========================================================================= */
/* always use the full-screen overlay menu; retire the inline desktop nav */
.hnav { display: none !important; }
.burger { display: inline-flex; }

.hdr-right { display: flex; align-items: center; gap: clamp(12px,1.6vw,20px); }
.hdr-status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hdr-status .live { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none;
  box-shadow: 0 0 0 0 rgba(23,105,74,.6); animation: pulse 2.4s infinite; }
@media (max-width: 1040px) { .hdr-status { display: none; } }

/* full-screen overlay menu now active at every width (moved out of the ≤980 query) */
.mpanel.open { display: flex; flex-direction: column; justify-content: center; position: fixed; inset: 0;
  background: var(--paper); z-index: 70; padding: clamp(24px,7vw,72px); overflow: auto; }
.mpanel.open ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: mnav; max-width: 760px; }
.mpanel.open a { display: flex; align-items: baseline; gap: 16px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem,7vw,3.4rem); padding: 12px 0; border-bottom: 1px solid var(--line); transition: color .15s ease; }
.mpanel.open a:hover { color: var(--accent); }
.mpanel.open li a::before { counter-increment: mnav; content: "0" counter(mnav); font-family: var(--mono);
  font-size: .42em; color: var(--accent); letter-spacing: .08em; }
.mpanel.open .btn { align-self: flex-start; justify-content: center; margin-top: clamp(28px,4vw,44px); }
.mpanel-close { position: absolute; top: clamp(16px,4vw,30px); right: clamp(18px,5vw,44px); background: none; border: 0;
  font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px 10px; }
.mpanel-close:hover { color: var(--accent); }
body.nav-open { overflow: hidden; }

/* hero dateline (replaces the old masthead ribbon) */
.status--date { text-transform: uppercase; }
.status--date .mark { color: var(--accent); width: .9em; height: .9em; }

/* tighten the top of the hero now the masthead ribbon is gone — everything moves up */
.hero-main { padding-block: clamp(10px,2vw,26px) clamp(40px,7vw,90px); }
.hero-copy .status--date { margin-bottom: clamp(16px,2.2vw,24px); }

/* =========================================================================
   ROUND 9 — full-page menu (no scrollbar), redesigned scrollbar, 70/30 hero
   ========================================================================= */

/* ---- Site scrollbar, redesigned: bold vermillion bar in a ruled paper gutter.
   IMPORTANT: Chrome 121+ ignores ::-webkit-scrollbar if the standard scrollbar-color
   / scrollbar-width are set — so reset those to `auto` for Chrome (re-enabling the
   webkit pseudo styling) and apply the standard props only in Firefox. */
html { scrollbar-gutter: stable; }
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 22px; height: 22px; }
  /* paper channel with a hairline gutter rule on both edges */
  ::-webkit-scrollbar-track {
    background: var(--paper-2);
    box-shadow: inset 1px 0 0 var(--line), inset -1px 0 0 var(--line);
  }
  /* squared vermillion thumb with subtle ledger ruling + registration tick texture */
  ::-webkit-scrollbar-thumb {
    background-color: var(--accent);
    background-image: repeating-linear-gradient(0deg, rgba(19,34,26,.18) 0 1px, transparent 1px 7px);
    border: 3px solid var(--paper-2);
    border-radius: 3px;
    min-height: 52px;
  }
  ::-webkit-scrollbar-thumb:hover  { background-color: var(--accent-2); }
  ::-webkit-scrollbar-thumb:active { background-color: var(--ink); }
  ::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: var(--paper-2); }
}
/* Firefox (no ::-webkit-scrollbar support): standard properties only */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: var(--accent) var(--paper-2); }
}

/* ---- Full-screen menu: full-page, no scrollbar, better composition -------- */
.mpanel { scrollbar-width: none; -ms-overflow-style: none; }
.mpanel::-webkit-scrollbar { display: none; width: 0; height: 0; }
.mpanel.open { overflow-y: auto; padding: clamp(28px,6vw,80px); justify-content: center; }
.mpanel.open ul { width: 100%; max-width: 860px; }
.mpanel.open a { font-size: clamp(1.6rem,3.4vw,2.6rem); line-height: 1.04; padding: 12px 0; }
.mpanel.open::before {
  content: "Menu"; position: absolute; top: clamp(22px,5vw,46px); left: clamp(28px,8vw,96px);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.mpanel.open::after {
  content: "ash@ashleyrowe.co.uk · Available for new projects — 2 slots, Q3 2026";
  position: absolute; left: clamp(28px,8vw,96px); right: clamp(28px,8vw,96px); bottom: clamp(22px,4vw,48px);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}

/* ---- Hero: 70/30 text-to-art, dateline on one line, balanced rhythm ------- */
@media (min-width: 901px) {
  .hero-main { grid-template-columns: 7fr 3fr; gap: clamp(32px,4.5vw,72px); align-items: center; }
  .hero-copy { max-width: none; }
  .hero-copy h1 { max-width: 18ch; }
  .hero-copy .hero-sub { max-width: 52ch; }
  .status--date { white-space: nowrap; }
  .hero-art { max-height: 62vh; }
}

/* ---- Trust band: "Built with" software-logo strip + Google rating ---- */
.trustband .wrap.builtlogos { display: flex; align-items: center; justify-content: center; gap: clamp(16px,3vw,42px); flex-wrap: wrap; padding-block: clamp(18px,2.4vw,28px); }
.builtlogos .lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.builtlogos .tlogo { display: inline-flex; align-items: center; color: #82927F; transition: color .18s ease; }
.builtlogos .tlogo svg { width: auto; display: block; fill: currentColor; }
.builtlogos .tlogo:hover { color: var(--ink); }
/* per-logo heights — balanced after cropping each viewBox to its content */
.tlogo--wp svg    { height: 46px; }
.tlogo--woo svg   { height: 27px; }
.tlogo--php svg   { height: 36px; }
.tlogo--mysql svg { height: 45px; }
.tlogo--js svg    { height: 40px; }
/* vertical divider + Google rating (no review count) */
.bl-sep { width: 1px; height: 30px; background: var(--line); }
.builtlogos .score { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.builtlogos .score .stars { color: var(--accent); letter-spacing: 2px; font-size: .84rem; }
.builtlogos .score b { font-weight: 600; }
.builtlogos .score .g-logo { width: 20px; height: 20px; flex: none; }

/* ---- Distinctive logo wordmark font (Syne) — stands out from the Bricolage headings */
.logo { font-family: "Syne", var(--serif); font-weight: 700; letter-spacing: -.01em; }
.foot-mark { font-family: "Syne", var(--serif); font-weight: 800; letter-spacing: -.02em; }

/* ---- Problem section: question + supporting-fact list ---- */
.symptoms--qa li { align-items: start; }
.symptoms--qa li::before { padding-top: 6px; }
.symptoms--qa b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(1.1rem,1.5vw,1.3rem); line-height: 1.18; letter-spacing: -.01em; color: var(--ink); }
.symptoms--qa i { display: block; font-style: normal; color: var(--muted); font-size: 1rem; line-height: 1.45; margin-top: 7px; }
.symptoms--qa i::before { content: "— "; color: var(--accent); }

/* =========================================================================
   Services as premium cards (redesigned grid) — hover: ink fill + riso halftone
   ========================================================================= */
.svc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.4vw,18px); margin-top: clamp(34px,4vw,56px); }
.svc-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(228px,20vw,290px);
  border: 1px solid var(--line); border-radius: 7px; padding: clamp(22px,2.2vw,30px); background: var(--paper); color: var(--ink);
  transition: background .28s ease, color .28s ease, transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease; }
.svc-card > * { position: relative; z-index: 1; }
.svc-card .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.svc-card .sc-n { font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; color: var(--muted); transition: color .25s ease; }
.svc-card .sc-tag { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--line); border-radius: 100px; padding: 4px 11px; transition: border-color .25s ease, color .25s ease; }
.svc-card h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem,1.9vw,1.65rem); line-height: 1.05; letter-spacing: -.01em;
  margin: clamp(30px,3.4vw,46px) 0 10px; transition: color .25s ease; }
.svc-card p { color: var(--muted); font-size: .98rem; line-height: 1.5; margin: 0; transition: color .25s ease; }
.svc-card .sc-go { font-family: var(--mono); color: var(--accent); margin-top: auto; padding-top: 22px; font-size: 1.15rem; transition: transform .22s ease; }
/* risograph halftone reveal on hover */
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background-image: radial-gradient(rgba(23,105,74,.55) 1.3px, transparent 1.5px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(150deg,#000 4%,transparent 66%); mask-image: linear-gradient(150deg,#000 4%,transparent 66%); }
.svc-card:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-5px); box-shadow: 0 22px 44px -26px rgba(19,34,26,.5); }
.svc-card:hover::before { opacity: 1; }
.svc-card:hover .sc-n { color: #9CAE9E; }
.svc-card:hover .sc-tag { border-color: var(--line-2); }
.svc-card:hover h3 { color: var(--paper); }
.svc-card:hover p { color: #BECDBF; }
.svc-card:hover .sc-go { transform: translateX(6px); }
.svc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* featured CTA card (the 6th box) */
.svc-card--cta { background: var(--accent); border-color: var(--accent); color: #fff; }
.svc-card--cta .sc-n { color: rgba(255,255,255,.72); }
.svc-card--cta h3 { color: #fff; margin-top: clamp(30px,3.4vw,46px); }
.svc-card--cta p { color: rgba(255,255,255,.9); }
.svc-card--cta .sc-go { color: #fff; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; display: inline-flex; align-items: center; gap: 9px; }
.svc-card--cta::before { display: none; }
.svc-card--cta:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-5px); }
.svc-card--cta:hover .sc-go { color: var(--accent); transform: none; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ===== Services wow layer — bento + riso glyphs + cursor tilt/spotlight ===== */
.svc-grid { perspective: 1400px; }
.svc-card { transform-style: preserve-3d; will-change: transform;
  transition: background .28s ease, color .28s ease, transform .16s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease; }

/* cursor-follow spotlight (vermillion glow tracks the pointer) */
.svc-card::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease;
  background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(23,105,74,.32), transparent 62%); }
.svc-card:hover::after { opacity: 1; }
.svc-card--cta::after { display: none; }

/* riso line-glyph — swaps in for the tag and draws itself on hover */
.sc-glyph { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; opacity: 0; transition: opacity .3s ease; z-index: 2; pointer-events: none; }
.sc-glyph * { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sc-glyph .g-ink { stroke: var(--paper); }
.sc-glyph .g-acc { stroke: var(--accent); }
.sc-glyph .g-dot { fill: var(--accent); stroke: none; }
.svc-card:hover .sc-glyph { opacity: 1; }
.svc-card:hover .sc-tag { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .sc-glyph .g-ink, .sc-glyph .g-acc { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .svc-card:hover .sc-glyph .g-ink { animation: sc-draw .5s ease .05s forwards; }
  .svc-card:hover .sc-glyph .g-acc { animation: sc-draw .5s ease .26s forwards; }
  @keyframes sc-draw { to { stroke-dashoffset: 0; } }
}

/* bento layout — wide flagship (01) + full-width CTA banner (06) */
@media (min-width: 901px) {
  .svc-card:nth-child(1) { grid-column: span 2; }
  .svc-card:nth-child(1) h3 { font-size: clamp(1.7rem,2.5vw,2.5rem); }
  .svc-card:nth-child(1) p { max-width: 46ch; font-size: 1.05rem; }
  .svc-card:nth-child(1) .sc-glyph { width: 56px; height: 56px; top: 22px; right: 22px; }
  .svc-card--cta { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between;
    gap: clamp(24px,3vw,48px); min-height: 0; padding: clamp(26px,2.6vw,38px) clamp(28px,3vw,44px); }
}
.svc-card--cta .cta-body h3 { margin: 0 0 7px; }
.svc-card--cta .cta-body p { margin: 0; max-width: 52ch; }
.svc-card--cta .sc-go { margin: 0; padding: 0; white-space: nowrap; }

/* ---- Inner-page feature cells → same card style + hover (site-wide consistency) ---- */
.feat-grid { border: 0; gap: clamp(12px,1.4vw,18px); perspective: 1400px; }
.feat-cell { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--paper);
  transform-style: preserve-3d; will-change: transform;
  transition: background .28s ease, color .28s ease, transform .16s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease; }
.feat-cell > * { position: relative; z-index: 1; }
.feat-cell::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background-image: radial-gradient(rgba(23,105,74,.55) 1.3px, transparent 1.5px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(150deg,#000 4%,transparent 66%); mask-image: linear-gradient(150deg,#000 4%,transparent 66%); }
.feat-cell::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(23,105,74,.32), transparent 62%); }
.feat-cell:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-5px); box-shadow: 0 22px 44px -26px rgba(19,34,26,.5); }
.feat-cell:hover::before, .feat-cell:hover::after { opacity: 1; }
.feat-cell:hover h3 { color: var(--paper); }
.feat-cell:hover p { color: #BECDBF; }
.feat-cell:hover .n { color: var(--accent); }
/* dark-section variant (feat-grid on an ink band) */
.sec--ink .feat-cell { background: var(--ink-2); border-color: var(--line-2); }
.sec--ink .feat-cell:hover { background: #24382C; border-color: var(--accent); }

/* ---- "The way I work" — kinetic heading + longevity year-line ---- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .kin-head { animation: inksoak linear both; animation-timeline: view(); animation-range: entry 6% entry 56%; }
  }
}
.yearline { display: flex; align-items: center; gap: 16px; max-width: 340px; margin-top: clamp(26px,3vw,36px);
  font-family: var(--mono); font-size: .8rem; letter-spacing: .12em; color: #9CAE9E; font-variant-numeric: tabular-nums; }
.yearline .yl-track { position: relative; flex: 1; height: 1px; background: var(--line-2); }
.yearline .yl-dot { position: absolute; top: 50%; left: 60%; width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  transform: translate(-50%,-50%); box-shadow: 0 0 0 0 rgba(23,105,74,.6); animation: pulse 2.4s infinite; }
@media (prefers-reduced-motion: reduce) { .yearline .yl-dot { animation: none; } }

/* ===== Care plans — card system + featured tier, monthly-rhythm pill, guarantee chips ===== */
.plans { gap: clamp(14px,1.6vw,22px); border: 0; align-items: stretch; padding-top: 16px; }
.plan { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); position: relative;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease; }
.plan .ptag { display: none; }
.plan:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -28px rgba(19,34,26,.42); border-color: rgba(19,34,26,.3); }
/* featured "Growth" tier */
.plan--pop { border-color: var(--accent); transform: translateY(-10px); z-index: 1;
  box-shadow: inset 0 4px 0 var(--accent), 0 20px 44px -26px rgba(23,105,74,.5); }
.plan--pop:hover { transform: translateY(-15px); box-shadow: inset 0 4px 0 var(--accent), 0 28px 52px -26px rgba(23,105,74,.55); border-color: var(--accent); }
.plan--pop .ptag { display: inline-block; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 15px; border-radius: 100px; white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(23,105,74,.6); }
@media (max-width: 760px) { .plan--pop, .plan--pop:hover { transform: none; } }

/* monthly-rhythm pill */
.rhythm { display: flex; align-items: center; justify-content: center; gap: clamp(14px,2vw,30px); flex-wrap: wrap;
  margin-top: clamp(38px,4.2vw,56px); padding: clamp(15px,1.7vw,20px) clamp(22px,2.6vw,36px);
  border: 1px solid var(--line); border-radius: 100px; background: var(--paper); }
.rhythm-lbl { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.rhythm-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px,1.6vw,22px); list-style: none; margin: 0; padding: 0; }
.rhythm-list li { font-family: var(--serif); font-weight: 600; font-size: clamp(1rem,1.4vw,1.2rem); color: var(--ink); letter-spacing: -.01em;
  display: flex; align-items: center; gap: clamp(12px,1.6vw,22px); }
.rhythm-list li:not(:last-child)::after { content: "·"; color: var(--accent); font-weight: 400; }

/* guarantee chips */
.guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; margin-top: clamp(22px,2.6vw,32px); }
.gtee { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line); border-radius: 100px; padding: 9px 16px; background: var(--paper); }
.gtee::before { content: "✓"; color: var(--accent); font-weight: 700; font-size: .9em; }

/* per-tier glyph + outcome label */
.plan-glyph { width: 38px; height: 38px; display: block; margin-bottom: 18px; }
.plan-glyph * { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan-glyph .g-ink { stroke: var(--ink); }
.plan-glyph .g-acc { stroke: var(--accent); }
.plan-outcome { display: block; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }

/* upgrade path — "+" connectors between tiers + a scale-up note */
@media (min-width: 981px) {
  .plans { position: relative; }
  .plans::before, .plans::after { content: "+"; position: absolute; top: 50%; transform: translate(-50%,-50%);
    width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #fff; z-index: 3;
    display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 1.05rem; line-height: 1;
    box-shadow: 0 5px 14px -4px rgba(23,105,74,.55); }
  .plans::before { left: 33.33%; }
  .plans::after { left: 66.66%; }
}
.plan-upgrade { text-align: center; font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin-top: clamp(26px,3vw,38px); }
.plan-upgrade .ar { color: var(--accent); }

/* ===== (04) Why — cards + glyphs + bento feature + proof + comparison matrix ===== */
.why-grid { border: 0; gap: clamp(12px,1.4vw,18px); perspective: 1400px; }
.why-cell { position: relative; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-2); padding: clamp(22px,2.2vw,30px);
  transform-style: preserve-3d; will-change: transform;
  transition: background .28s ease, transform .16s cubic-bezier(.2,.7,.2,1), border-color .28s ease, box-shadow .28s ease; }
.why-cell > * { position: relative; z-index: 1; }
.why-cell::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background-image: radial-gradient(rgba(23,105,74,.6) 1.3px, transparent 1.5px); background-size: 12px 12px;
  -webkit-mask-image: linear-gradient(150deg,#000 4%,transparent 66%); mask-image: linear-gradient(150deg,#000 4%,transparent 66%); }
.why-cell::after { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .3s ease; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(23,105,74,.3), transparent 62%); }
.why-cell:hover { background: #24382C; border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 24px 46px -26px rgba(0,0,0,.6); }
.why-cell:hover::before, .why-cell:hover::after { opacity: 1; }
.wc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: clamp(18px,2vw,28px); }
.why-glyph { width: 40px; height: 40px; display: block; flex: none; }
.why-glyph * { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.why-glyph .g-ink { stroke: var(--paper); }
.why-glyph .g-acc { stroke: var(--accent); }
.why-glyph .g-fill { fill: var(--accent); stroke: none; }
.why-cell .n { font-family: var(--mono); font-size: .76rem; letter-spacing: .12em; color: #7F927F; }
.why-cell h4 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.25rem,1.7vw,1.55rem); line-height: 1.08; color: var(--paper); margin: 0 0 10px; letter-spacing: -.01em; }
.why-cell p { color: #9CAE9E; font-size: .98rem; line-height: 1.5; margin: 0; }
.why-proof { display: inline-block; margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
@media (min-width: 901px) {
  .why-grid { grid-template-columns: repeat(3,1fr); }
  .why-cell:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .why-cell:nth-child(1) .why-glyph { width: 54px; height: 54px; }
  .why-cell:nth-child(1) h4 { font-size: clamp(1.7rem,2.5vw,2.4rem); max-width: 16ch; }
  .why-cell:nth-child(1) p { font-size: 1.08rem; max-width: 42ch; }
  .why-cell:nth-child(1) .why-proof { font-size: .72rem; }
}

/* (04) Why — full-width horizontal boxes (distinct from the card grids above) */
.why-list { display: flex; flex-direction: column; gap: clamp(10px,1.1vw,14px); margin-top: clamp(8px,1vw,18px); }
.why-row { position: relative; overflow: hidden; display: grid; align-items: center;
  grid-template-columns: 42px minmax(190px,1.05fr) 1.9fr auto; gap: clamp(16px,2.4vw,40px);
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-2);
  padding: clamp(15px,1.6vw,21px) clamp(20px,2.2vw,30px);
  transition: background .25s ease, border-color .25s ease; }
.why-row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); transform: scaleY(0); transition: transform .25s ease; }
.why-row:hover { border-color: rgba(23,105,74,.45); background: #24382C; }
.why-row:hover::before { transform: scaleY(1); }
.why-row .why-glyph { width: 36px; height: 36px; flex: none; }
.wr-head { display: flex; flex-direction: column; gap: 4px; }
.wr-head .n { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; color: #7F927F; }
.wr-head h4 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.1rem,1.5vw,1.4rem); line-height: 1.05; color: var(--paper); margin: 0; letter-spacing: -.01em; }
.why-row > p { color: #9CAE9E; font-size: .96rem; line-height: 1.45; margin: 0; }
.why-row .why-proof { margin: 0; padding: 0; text-align: right; white-space: nowrap; }
@media (max-width: 860px) {
  .why-row { grid-template-columns: 36px 1fr; gap: 8px 16px; padding: 16px 18px; align-items: start; }
  .why-row > p { grid-column: 1 / -1; }
  .why-row .why-proof { grid-column: 1 / -1; text-align: left; padding-top: 6px; }
}

/* comparison matrix (unused — kept for reference) */
.vs-table { margin-top: clamp(42px,5vw,66px); border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; }
.vs-row { display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr; align-items: stretch; }
.vs-row + .vs-row { border-top: 1px solid var(--line-2); }
.vs-crit { padding: clamp(14px,1.6vw,20px) clamp(16px,2vw,26px); color: var(--paper); font-size: clamp(.95rem,1.2vw,1.08rem); display: flex; align-items: center; }
.vs-cell { display: grid; place-items: center; padding: clamp(14px,1.6vw,20px) 8px; font-family: var(--mono); font-size: 1.15rem; color: #7F927F; }
.vs-head .vs-cell, .vs-head .vs-crit { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #9CAE9E; font-weight: 500; }
.vs-me { background: rgba(23,105,74,.1); }
.vs-head .vs-me { background: var(--accent); color: #fff; }
.vs-cell.yes { color: var(--accent); font-weight: 700; }
.vs-cell.no { color: #5E705F; }
.vs-cell.part { color: #7F927F; }
@media (max-width: 640px) {
  .vs-row { grid-template-columns: 1.5fr .8fr .8fr .8fr; }
  .vs-crit { font-size: .82rem; padding: 12px 10px; }
  .vs-cell { font-size: 1rem; padding: 12px 4px; }
}
@media (max-width: 560px) {
  .tlogo--wp svg{height:28px} .tlogo--mysql svg{height:27px} .tlogo--js svg{height:25px}
  .tlogo--php svg{height:22px} .tlogo--woo svg{height:16px} .bl-sep{display:none}
}

/* ---- Letterhead footer: address + availability table + index (#17/#18/#19) - */
.foot-meta { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: clamp(28px,4vw,56px);
  border-top: 1px solid var(--line-2); padding-top: clamp(36px,4vw,52px); margin-top: clamp(8px,2vw,24px); }
.foot-meta h3 { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #9CAE9E; margin: 0 0 16px; font-weight: 500; }
.foot-addr { font-style: normal; font-family: var(--mono); font-size: .82rem; line-height: 1.9; color: #BECDBF; letter-spacing: .02em; }
.foot-addr .sl { color: var(--accent); margin: 0 .3em; }
.foot-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .76rem; }
.foot-table td { border-top: 1px solid var(--line-2); padding: 9px 0; color: #BECDBF; letter-spacing: .03em; }
.foot-table td:last-child { text-align: right; color: #9CAE9E; font-variant-numeric: tabular-nums; }
.foot-index { list-style: none; margin: 0; padding: 0; }
.foot-index > li { border-top: 1px solid var(--line-2); }
.foot-index summary { list-style: none; cursor: pointer; padding: 10px 0; display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #D6DED4; }
.foot-index summary::-webkit-details-marker { display: none; }
.foot-index summary::after { content: "+"; color: var(--accent); }
.foot-index details[open] summary::after { content: "–"; }
.foot-index .sub { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.foot-index .sub a { font-family: var(--sans); font-size: .92rem; color: #9CAE9E; }
.foot-index .sub a:hover { color: var(--accent); }
@media (max-width: 760px) { .foot-meta { grid-template-columns: 1fr; gap: 28px; } }


/* =========================================================================
   v2 components: work wall / service list rows / statement / photo slot
   (additive - only used by pages that opt in)
   ========================================================================= */
.wall { padding: clamp(46px,7vw,88px) 0 clamp(64px,8vw,120px); overflow: clip; }
.wall-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  max-width: var(--maxw); margin: 0 auto clamp(30px,4vw,48px); padding: 0 var(--pad); }
.wall-band { position: relative; height: clamp(430px, 44vw, 590px); }
.wall-shot { position: absolute; display: block; border: 1px solid var(--line); background: #fff;
  box-shadow: 0 30px 70px -34px rgba(19,34,26,.4); transition: transform .3s ease; }
.wall-shot:hover { transform: translateY(-6px) rotate(0deg) !important; z-index: 9 !important; }
.wall-shot img { width: 100%; height: auto; display: block; }
.wall-shot .wtag { position: absolute; left: 0; bottom: -28px; white-space: nowrap;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wall-shot--phone { border-radius: 14px; overflow: hidden; }
.wall-shot--phone img { border-radius: 13px; }
@media (max-width: 760px) {
  .wall-band { height: auto; display: flex; gap: 14px; overflow-x: auto; padding: 0 16px 40px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .wall-shot { position: static !important; transform: none !important; width: 80% !important;
    flex: 0 0 auto; scroll-snap-align: center; }
  .wall-shot--phone { width: 38% !important; }
  .wall-shot .wtag { position: static; display: block; margin-top: 8px; }
}

.svc-list { border-top: 1px solid var(--line); margin-top: clamp(26px,4vw,44px); }
.svc-li { display: grid; grid-template-columns: 52px minmax(0,1fr) minmax(0,46ch) 30px;
  gap: clamp(14px,3vw,40px); align-items: baseline; padding: clamp(20px,3vw,30px) 10px;
  border-bottom: 1px solid var(--line); text-decoration: none;
  transition: background .22s ease, padding-left .22s ease; }
.svc-li:hover { background: var(--paper-2); padding-left: 22px; }
.svc-li .n { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.svc-li h3 { font-size: clamp(1.3rem, 2.5vw, 1.9rem); font-weight: 560; line-height: 1.1; }
.svc-li p { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.svc-li .go { font-family: var(--mono); color: var(--accent); justify-self: end; }
@media (max-width: 820px) {
  .svc-li { grid-template-columns: 38px 1fr; }
  .svc-li p { grid-column: 2; }
  .svc-li .go { display: none; }
}

.statement { padding: clamp(80px,11vw,150px) 0; }
.statement .wrap { max-width: 1080px; }
.statement h2 { font-size: clamp(2.1rem, 5.4vw, 4.4rem); line-height: 1.06; font-weight: 500;
  letter-spacing: -.01em; max-width: 24ch; }
.statement .lede { margin-top: clamp(22px,3vw,34px); max-width: 58ch; }
.st-att { display: flex; gap: 22px; align-items: center; margin-top: clamp(34px,5vw,52px); }
.photo-slot { width: 88px; height: 108px; flex: 0 0 auto; border: 1px dashed var(--line);
  display: grid; place-items: center; font-family: var(--mono); font-size: .58rem;
  letter-spacing: .14em; color: var(--muted); text-transform: uppercase; text-align: center; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.st-who b { display: block; font-family: var(--serif); font-size: 1.15rem; font-weight: 560; }
.st-who span { color: var(--muted); font-size: .92rem; }
/* statement with a case box alongside */
.statement--split .wrap { max-width: var(--maxw); }
.statement-grid { display: grid; grid-template-columns: minmax(0,430px) minmax(0,1fr);
  gap: clamp(30px,5vw,72px); align-items: center; }
@media (max-width: 900px) {
  .statement-grid { grid-template-columns: 1fr; }
  .statement-grid .note { order: 2; margin-top: 38px; }
}
/* hero audit form (replaces hero artwork slot on the homepage) */
.hero-form-wrap { position: relative; }
.hero-form-wrap .hf-riso { position: absolute; top: -7%; right: -9%; width: 118%; height: auto; z-index: 0; pointer-events: none; }
.hero-audit { position: relative; z-index: 1; max-width: 540px; margin-left: auto;
  padding: clamp(28px,3.2vw,46px); box-shadow: 0 34px 80px -42px rgba(19,34,26,.5); }
.hero-audit .fld { margin-bottom: 16px; }
.hero-audit .fld input { padding: 13px 15px; }
@media (max-width: 900px) {
  .hero-audit { margin: 0 auto; }
  .hero-form-wrap .hf-riso { display: none; }
  /* unlike the old artwork, the form goes BELOW the copy on mobile */
  .hero-main .hero-form-wrap { order: 2; max-width: 460px; width: 100%; margin: 0 auto; }
}
/* the 70/30 split was sized for the artwork — give the form a wider column */
@media (min-width: 901px) {
  .hero-main:has(.hero-form-wrap) { grid-template-columns: 1.15fr 1fr; }
}

/* marketing opt-in checkbox */
.optin { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 4px; font-size: .84rem; color: var(--muted); cursor: pointer; }
.optin input { margin-top: 3px; accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 auto; }

/* hosting: hero form column, 4-up feature grid, centred green block */
@media (min-width: 901px) { .page-hero--art:has(.hero-form-wrap) { grid-template-columns: 1.15fr 1fr; } }
.feat-grid--four { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1020px) { .feat-grid--four { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .feat-grid--four { grid-template-columns: 1fr; } }
.green-home--centered { text-align: center; }
.green-home--centered .gh-head { max-width: none; }
.green-home--centered .gh-head h3, .green-home--centered .gh-head .muted { max-width: 72ch; margin-inline: auto; }
.green-home--centered .gh-sources li { align-items: center; text-align: center; }
.green-home--centered .gh-stats { justify-content: center; }
.green-home--centered .gh-stats > div { text-align: center; }
@media (max-width: 900px) { .page-hero--art .hero-form-wrap { order: 2; max-width: 460px; width: 100%; margin: 0 auto; } }
/* accreditation bar: stamp-style icon badges */
.cred { padding: 9px 18px 9px 9px; gap: 12px; font-size: .73rem; }
.cred .ic { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; flex: none; }
.cred .ic svg { width: 19px; height: 19px; color: inherit; }
.cred--green .ic { background: var(--green); color: #fff; }
/* cred bar v2: no label, six badges on one line, icon above text */
.cred-bar .wrap { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(10px, 1.5vw, 20px); padding-block: clamp(24px, 2.8vw, 36px); }
.cred { flex-direction: column; align-items: center; gap: 11px; text-align: center;
  padding: 0; border: 0; background: transparent; border-radius: 0; }
.cred .ic { width: 54px; height: 54px; }
.cred .ic svg { width: 26px; height: 26px; }
@media (max-width: 760px) { .cred-bar .wrap { grid-template-columns: repeat(3, 1fr); row-gap: 22px; } }
/* carbon badge: stack + centre on small screens */
@media (max-width: 700px) {
  .carbon-badge { flex-direction: column; align-items: center; text-align: center; gap: 8px; border-radius: 16px; padding: 16px 20px; }
}
/* cred badges: icons share one row even when a label wraps */
.cred-bar .wrap { align-items: start; }
.cred { justify-content: flex-start; }
/* two-ways: "most clients" ribbon becomes a corner stamp so card content aligns */
.feat-cell--pick { position: relative; }
.feat-cell--pick .fc-pick { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px;
  border-radius: 50%; display: grid; place-items: center; padding: 0; margin: 0;
  background: var(--accent); color: var(--paper); font-size: 1.15rem; line-height: 1; letter-spacing: 0; }
/* mobile header: show Contact instead of the audit button (form is on the page) */
@media (max-width: 768px) {
  .hdr-row .btn { display: none; }
  .hdr-row .hdr-contact { display: inline-flex; }
}
/* articles: centre the reading column (was left-aligned, leaving dead space right) */
.article-head { max-width: 760px; margin-inline: auto; }
.prose { margin-inline: auto; }
/* contact: social/email icon row */
.soc-row { display: flex; gap: 12px; }
.soc { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; color: var(--ink); background: var(--paper);
  transition: background .18s ease, color .18s ease, border-color .18s ease; }
.soc svg { width: 21px; height: 21px; }
.soc:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* blog: 5-up card grid with category icons + publish dates */
.posts { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.6vw, 20px); }
.posts .post { display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: clamp(16px, 1.8vw, 22px); border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.posts .post:hover { background: var(--paper-2); }
.post .cat-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; flex: none; }
.post .cat-ic svg { width: 19px; height: 19px; }
.posts .post h3 { font-size: 1.02rem; line-height: 1.3; }
.post .post-date { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); display: block; margin-top: 9px; }
.posts .post > div > p, .posts .post .go { display: none; }
@media (max-width: 1100px) { .posts { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .posts { grid-template-columns: repeat(2, 1fr); } }
/* case studies: compact 4-up grid */
.case-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(26px,3.4vw,44px); }
.case-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: clamp(14px, 1.6vw, 20px); border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.case-card h3 { font-size: 1.18rem; }
.case-card .loc2 { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.case-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 6px 0 0; }
.case-card .tlink { margin-top: 12px; }
.case-card .device { width: 100%; }
@media (max-width: 1020px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .case-grid { grid-template-columns: 1fr; } }
/* case grid: long dv-urls must not force column widths */
.case-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.case-card { min-width: 0; }
.case-card .dv-bar { min-width: 0; }
.case-card .dv-url { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1020px) { .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .case-grid { grid-template-columns: minmax(0, 1fr); } }
/* topbar (availability) + Google review badge in the header */
.topbar { display: flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: .68rem;
  letter-spacing: .09em; text-transform: uppercase; text-align: center; padding: 8px 14px; }
.grev { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
  font-size: .76rem; color: var(--ink); white-space: nowrap; }
.grev .g-logo { width: 18px; height: 18px; flex: none; }
.grev .stars { color: var(--accent); font-size: .82rem; letter-spacing: 2px; } /* was Google-amber #F4B400 — revert if the green reads as decorative */
.grev b { font-weight: 600; }
.grev .gr-count { color: var(--muted); }
.grev:hover b { color: var(--accent); }
@media (max-width: 900px) { .grev .stars { display: none; } }
@media (max-width: 768px) { .grev { display: none; } .topbar { font-size: .6rem; padding: 7px 10px; } }

/* case-studies hero: full-width, left-aligned */
.page-hero--wide { text-align: left; }
.page-hero--wide h1 { max-width: none; margin-inline: 0; }
.page-hero--wide .lede { max-width: 78ch; margin-inline: 0; }
.page-hero--wide .hero-cta { justify-content: flex-start; }
/* case grid: break out of the boxed container to full viewport width on desktop */
@media (min-width: 1021px) {
  .case-grid { width: 100vw; margin-left: calc(50% - 50vw); padding-inline: clamp(20px, 2.5vw, 44px); }
}
/* guard: full-bleed sections (100vw) must not cause a horizontal scrollbar */
html, body { overflow-x: clip; }

/* case grid: second row of six smaller placeholder cards */
@media (min-width: 1021px) {
  .case-grid--mini { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: clamp(14px, 1.8vw, 24px); }
}
.case-card--mini h3 { font-size: .98rem; }
.case-card--mini .loc2 { font-size: .58rem; }
.case-card--mini .tlink { margin-top: 8px; font-size: .68rem; }
.mini-plate { width: 100%; aspect-ratio: 16 / 10; border: 1px dashed var(--line); border-radius: 8px;
  background: var(--paper-2); display: grid; place-items: center; margin-bottom: 10px; }
.mini-plate span { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
@media (max-width: 1020px) { .case-grid--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .case-grid--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* case-studies: tighter hero + grid starts higher */
.page-hero--wide { padding-block: clamp(20px, 3vw, 44px) clamp(10px, 1.5vw, 20px); }
.page-hero--wide .hero-cta { margin-top: clamp(16px, 2vw, 24px); }

/* contact: light page, dark form panel
   The contact page section no longer carries .sec--ink (page background is now
   the standard light paper, matching every other page). The .form itself keeps
   its own dark surface (var(--ink-2), set earlier in this file), so it needs
   the same accent remap + button/chip contrast fixes that used to arrive for
   free via the ancestor .sec--ink selector. Scoped to .form so it's harmless
   (fully redundant) anywhere .form still sits inside a .sec--ink section. */
.form {
  --accent: #55B287;
  --accent-2: #7CC7A3;
}
.form .fc-pick, .form .chip:has(input:checked), .form .chip.sel { color: var(--ink); }
.form .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.form .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.form .btn--line { background: transparent; color: var(--paper); border-color: var(--line-2); }
.form .btn--line:hover { background: var(--paper); color: var(--ink); }
#featured { padding-block: clamp(18px, 2.5vw, 36px) clamp(40px, 5vw, 72px); }

/* blog: posts grid breaks out to full viewport width (like the case grid) */
@media (min-width: 1021px) {
  .posts { width: 100vw; margin-left: calc(50% - 50vw); padding-inline: clamp(20px, 2.5vw, 44px); }
}

/* fix: .posts .post { display:flex } (line ~1688) has equal specificity to
   .post.hide { display:none } (line ~578) and comes later in the cascade, so it
   was winning and the category filter (which toggles the .hide class via JS)
   stopped hiding posts. Raise specificity so .hide wins again. */
.posts .post.hide { display: none; }

/* homepage services: compressed serif link strip (descriptions removed as filler) */
.svc-strip { display: flex; flex-wrap: wrap; gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(22px, 3vw, 36px); }
.svc-strip a { font-family: var(--serif); font-weight: 560; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.2;
  padding: clamp(14px, 1.6vw, 20px) clamp(18px, 2vw, 26px); border: 1px solid var(--line); border-radius: 100px;
  transition: background .18s ease, color .18s ease, border-color .18s ease; }

/* services folded into the why section: one linked line, no boxes */
.svc-line { margin-top: 20px; max-width: 60ch; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem); line-height: 1.8; color: #9CAE9E; }
.svc-line a { color: var(--paper); border-bottom: 1px solid var(--line-2); padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease; }
.svc-line a:hover { color: var(--accent); border-color: var(--accent); }
.svc-line .sep { margin: 0 11px; }
.svc-strip a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* homepage: hero testimonial section (replaced the why-rows) */
.tq-hero { margin: clamp(10px,1.5vw,20px) 0 0; }
.tq-hero .tbig { max-width: 26ch; }
.sec--ink .tbig { color: var(--paper); }
.tq-att { display: flex; align-items: center; gap: 12px; margin-top: clamp(22px,3vw,34px);
  font-family: var(--mono); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase; color: #9CAE9E; }
.tq-att .g-logo { width: 20px; height: 20px; flex: none; }
.tq-att .stars { color: var(--accent); font-size: .9rem; letter-spacing: 2px; }
.tq-att b { color: var(--paper); font-weight: 600; }
.tq-services { margin-top: clamp(32px,4.5vw,52px); padding-top: clamp(20px,2.6vw,30px); border-top: 1px solid var(--line-2); }

/* testimonial: full width of the container */
.tq-hero .tbig { max-width: none; }

/* testimonial: quote left, client site right */
.tq-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(10px,1.5vw,20px); }
.tq-grid .tq-hero { margin: 0; }
.tq-shot { display: block; min-width: 0; }
.tq-shot .dv-url { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) { .tq-grid { grid-template-columns: 1fr; } }
/* FAQ carousel: one question per slide, swipe + arrow nav */
.faq-car { position: relative; margin-top: clamp(24px,3vw,40px); }
.faq-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.faq-track::-webkit-scrollbar { display: none; }
.faq-slide { flex: 0 0 100%; scroll-snap-align: start; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper);
  padding: clamp(22px,3vw,36px); }
.faq-slide h3 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.15rem,2vw,1.5rem); margin: 0 0 12px; }
.faq-slide p, .faq-slide .a { margin: 0; color: var(--muted); line-height: 1.6; }
.faq-nav { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.faq-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); cursor: pointer; font-size: 1.05rem;
  transition: background .18s ease, color .18s ease, border-color .18s ease; }
.faq-nav button:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.faq-count { font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; color: var(--muted); margin-left: 6px; }

/* mobile nav: full-width, prominent audit button */
.mpanel .btn { width: 100%; justify-content: center; padding: 17px 20px; font-size: .82rem;
  background: var(--accent); border-color: var(--accent); color: #fff; }
.mpanel .btn:hover { background: var(--accent-2); border-color: var(--accent-2); }

/* contact: FAQ carousel must not inflate the left grid column (desktop only —
   below 980px .contact already stacks to a single column; this must not
   fight that rule, see @media (max-width: 980px) above) */
@media (min-width: 981px) {
  .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.contact > div { min-width: 0; }
.contact .faq-car, .contact .faq-track { min-width: 0; max-width: 100%; }
/* stacked (mobile/tablet): form first, supporting text and FAQs below it */
@media (max-width: 980px) {
  .contact form { order: -1; }
}

/* development: what-I-build editorial index (replaces numbered rows) */
.build-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 4vw, 72px); margin-top: clamp(26px, 3.4vw, 44px); }
.build-item { border-top: 1px solid var(--line); padding: clamp(18px, 2.4vw, 26px) 4px; min-width: 0; }
.build-item h3 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 0; }
.build-item p { margin: 7px 0 0; color: var(--muted); font-size: .93rem; line-height: 1.55; }
@media (max-width: 760px) { .build-index { grid-template-columns: minmax(0, 1fr); } }

/* topbar: client login link on the right */
.topbar { justify-content: space-between; padding-inline: clamp(14px, 3vw, 32px); }
.topbar .tb-status { display: inline-flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .tb-login { color: var(--paper); display: inline-flex; align-items: center; gap: 6px; flex: none; }
.topbar .tb-login:hover { color: #55B287; }

/* --- SEO fix batch 2026-08-22: a11y + heading-level neutralizers, skip link, print --- */
.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; }
.feat h3 { font-size: 1em; font-weight: bold; margin: 1.33em 0; }

/* utility classes generated from repeated inline styles, 2026-08-22 */
.u-sf1 { margin-bottom:18px }
.u-sf2 { margin-top:22px }
.u-sf3 { color:var(--paper); font-size:1.4rem }
.u-sf4 { margin-top:18px; max-width:36ch; color:#D6DED4 }
.u-sf5 { text-align:center }
.u-sf6 { color:var(--accent) }
.u-sf7 { margin-top:30px }
.u-sf8 { margin:18px auto 0 }
.u-sf9 { max-width:20ch; margin:0 auto }
.u-sf10 { margin-top:clamp(32px,4vw,52px) }
.u-sf11 { margin:0 }
.u-sf12 { margin-top:14px }
.u-sf13 { margin-top:16px }
.u-sf14 { margin:0 0 10px }
.u-sf15 { font-size:2.4rem; color:var(--accent); margin:0 }
.u-sf16 { margin:6px 0 }
.u-sf17 { margin-top:12px }
.u-sf18 { margin-bottom:14px }
.u-sf19 { margin:0 0 14px }
.u-sf20 { max-width:760px }
.u-sf2-1 { margin-top:16px; color:var(--muted) }
.u-sf2-2 { margin-top:clamp(28px,4vw,44px) }
.u-sf2-3 { margin-top:26px }
.u-sf2-4 { display:block; margin-bottom:20px }
.u-sf2-5 { font-size:clamp(1.25rem,1.9vw,1.6rem) }
.u-sf2-6 { font-size:.86rem; margin-top:4px }
.u-sf2-7 { text-transform:none; letter-spacing:0; color:var(--muted) }
.u-sf2-8 { margin:20px auto 0; max-width:52ch }
.u-sf2-9 { margin-top:32px }
.u-sf2-10 { margin:0 auto; max-width:18ch }
.u-sf3-1 { align-items:center }

.u-sf3-2 { color:var(--ink); font-style:italic }

.u-sf3-3 { font-size:1.8rem; margin:8px 0 }

.u-sf3-4 { font-size:3rem; color:var(--accent) }

.u-sf3-5 { font-size:clamp(1.35rem,2vw,1.85rem); margin:0 }

.u-sf3-6 { font-weight:600 }

.u-sf3-7 { margin-bottom:clamp(26px,4vw,46px) }

.u-sf3-8 { margin-top:10px }

.u-sf3-9 { margin-top:16px; max-width:18ch }

.u-sf3-10 { margin-top:18px; max-width:48ch }

.u-sf3-11 { margin-top:28px }

.u-sf3-12 { margin-top:clamp(24px,3vw,32px) }

.u-sf3-13 { margin-top:clamp(24px,3vw,36px) }

.u-sf3-14 { margin-top:clamp(28px,3.5vw,40px); text-transform:none; letter-spacing:0; font-size:.95rem }

.u-sf3-15 { margin-top:clamp(28px,3vw,40px) }

.u-sf3-16 { margin-top:clamp(44px,5vw,68px) }

.u-sf3-17 { margin:0 auto }

.u-sf3-18 { margin:0 auto; max-width:20ch }

.u-sf3-19 { margin:18px auto 0; max-width:none }

.u-sf3-20 { margin:20px auto 0; max-width:54ch }

.u-sf3-21 { margin:clamp(30px,4vw,44px) 0 0; font-size:clamp(1.3rem,2vw,1.7rem) }

.u-sf3-22 { max-width:14ch }

.u-sf3-23 { max-width:22ch; margin:0 auto }

.u-sf3-24 { max-width:58ch; margin-top:18px }

.u-sf3-25 { padding-block:clamp(44px,6vw,72px) }

.u-sf3-26 { position:static; color:var(--accent) }

.u-sf3-27 { text-align:center; padding:20px 0 }