/* ==================================================================
   BranDive — The Dive System
   One source of truth. No inline styles anywhere in the markup.
   ================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* brand */
  --dive:#F63D14;          /* wordmark vermilion — display scale + the curve only */
  --dive-deep:#C42D0B;     /* every accent at body size — 5.32:1 on paper */
  --marine:#0C3B3F;        /* secondary: data, admin, quiet structure */
  --marine-lift:#12565B;
  --ink:#0B0B0C;
  --paper:#FAF8F6;
  --mist:#E7E1DB;
  --slate:#57595C;

  /* roles */
  --fg:var(--ink);
  --fg-soft:var(--slate);
  --bg:var(--paper);
  --surface:#FFFFFF;
  --surface-2:#F2EEEA;
  --rule:var(--mist);
  --accent:var(--dive);
  --accent-strong:var(--dive-deep);
  --accent-ink:#FFFFFF;
  --second:var(--marine);

  /* semantic */
  --ok:#1B7A4B;
  --warn:#9A6207;
  --crit:#B3261E;

  /* type */
  --display:"Bricolage Grotesque",Segoe UI,Helvetica,Arial,sans-serif;
  --body:"Public Sans",-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-xs:.78rem;
  --t-sm:.88rem;
  --t-base:1rem;
  --t-lead:1.16rem;
  --t-h3:clamp(1.15rem,2vw,1.45rem);
  --t-h2:clamp(1.9rem,4vw,2.9rem);
  --t-h1:clamp(2.6rem,6.4vw,4.6rem);

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --gut:clamp(18px,4vw,56px);
  --max:1180px;
  --max-text:66ch;
  --radius:2px;
  --ease:cubic-bezier(.4,.14,.3,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fg:#EFEBE7; --fg-soft:#A2A09E;
    --bg:#0B0B0C; --surface:#151517; --surface-2:#1D1D20;
    --rule:#2A2A2D;
    --accent:#FF5326; --accent-strong:#FF5326; --accent-ink:#140906;
    --second:#4FB3B8; --marine-lift:#7FCFD3;
    --ok:#4FB380; --warn:#D9A43C; --crit:#E0685E;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fg:#EFEBE7; --fg-soft:#A2A09E;
  --bg:#0B0B0C; --surface:#151517; --surface-2:#1D1D20;
  --rule:#2A2A2D;
  --accent:#FF5326; --accent-strong:#FF5326; --accent-ink:#140906;
  --second:#4FB3B8; --marine-lift:#7FCFD3;
  --ok:#4FB380; --warn:#D9A43C; --crit:#E0685E;
  color-scheme:dark;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--accent-strong);text-decoration:none;transition:color .16s var(--ease)}
a:hover{color:var(--accent)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.05em;padding-left:1.1em}
li{margin-bottom:.4em}
strong{font-weight:600;color:var(--fg)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s7) 0}
:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px}
::selection{background:var(--accent);color:#fff}

h1,h2,h3,h4,h5{
  font-family:var(--display);color:var(--fg);margin:0 0 .42em;
  font-weight:800;line-height:1.04;letter-spacing:-.035em;
  font-variation-settings:"wdth" 88;text-wrap:balance;
}
h1{font-size:var(--t-h1);font-variation-settings:"wdth" 84;letter-spacing:-.042em}
h2{font-size:var(--t-h2);letter-spacing:-.032em}
h3{font-size:var(--t-h3);letter-spacing:-.022em;font-variation-settings:"wdth" 94}
h4{font-size:1rem;font-weight:600;letter-spacing:-.012em;font-variation-settings:"wdth" 100}
.accent{color:var(--accent)}

/* ---------- 3. LAYOUT ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap-text{max-width:760px;margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(52px,7vw,104px)}
.section--tight{padding-block:clamp(38px,5vw,68px)}
.section--sunk{background:var(--surface-2)}
.section--ink{background:var(--ink);color:#EFEBE7}
.section--ink h2,.section--ink h3{color:#fff}
.section--ink .lead,.section--ink p{color:#BFBBB7}
.lead{font-size:var(--t-lead);line-height:1.55;max-width:62ch;color:var(--fg-soft)}
.prose{max-width:var(--max-text)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(26px,4vw,64px);align-items:start}
.split--center{align-items:center}
.split--center .btnrow{justify-content:flex-end}
@media (max-width:940px){.split--center .btnrow{justify-content:flex-start}}

/* ---------- 4. THE DIVE DEVICE ---------- */
.lbl{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:.685rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--fg-soft);
}
.lbl::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px;flex:none}
.section--ink .lbl{color:#9A9691}

.dive-rule{display:block;width:100%;height:auto;overflow:visible;margin-block:clamp(26px,4vw,48px)}
.dive-rule .live{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.dive-rule .ghost{fill:none;stroke:var(--rule);stroke-width:1.5;stroke-linecap:round}

.shead{margin-bottom:clamp(26px,3.6vw,44px);display:flex;flex-direction:column;gap:var(--s3);max-width:64ch}
.shead.center{margin-inline:auto;text-align:center;align-items:center}
.shead h2{margin:0}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100;
  font-size:.92rem;letter-spacing:-.012em;line-height:1.2;
  padding:14px 24px;border:2px solid transparent;border-radius:var(--radius);
  cursor:pointer;text-align:center;
  transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:16px;height:16px;flex:none}
.btn--solid{background:var(--accent-strong);color:#fff;border-color:var(--accent-strong)}
.btn--solid:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--line{background:transparent;color:var(--fg);border-color:var(--fg)}
.btn--line:hover{background:var(--fg);color:var(--bg)}
.btn--quiet{background:transparent;color:var(--fg-soft);border-color:var(--rule)}
.btn--quiet:hover{color:var(--fg);border-color:var(--fg-soft)}
.btn--onink{background:#fff;color:var(--ink);border-color:#fff}
.btn--onink:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--lg{padding:16px 30px;font-size:1rem}
.btn--block{width:100%}
.btnrow{display:flex;gap:var(--s3);flex-wrap:wrap}
a.btn,a.btn:hover,a.btn:visited{text-decoration:none}

/* ---------- 6. HEADER ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent-strong);color:#fff;padding:12px 18px}
.skip:focus{left:0}

.hdr{
  position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.hdr.stuck{box-shadow:0 6px 24px rgba(11,11,12,.08)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:76px}
.brand{flex:none;display:block}
.brand img{width:128px}
.brand .lg-light{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand .lg-dark{display:none}
  :root:not([data-theme="light"]) .brand .lg-light{display:block}
}
:root[data-theme="dark"] .brand .lg-dark{display:none}
:root[data-theme="dark"] .brand .lg-light{display:block}

.nav{display:flex;align-items:center;gap:2px}
.nav>a,.navitem>a{
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 100;
  font-size:.9rem;letter-spacing:-.012em;color:var(--fg);
  padding:10px 12px;position:relative;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
}
.nav>a:hover,.navitem>a:hover{color:var(--accent-strong)}
.nav>a[aria-current="page"],.navitem.on>a{color:var(--accent-strong)}
.nav>a[aria-current="page"]::after,.navitem.on>a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--accent);
}
.nav a.btn,.nav a.btn:hover{color:var(--accent-ink);background:var(--accent-strong)}
.nav a.btn::after{display:none}

.navitem{position:relative;display:flex;align-items:center}
.navitem .caret{width:13px;height:13px;opacity:.65;transition:transform .18s var(--ease)}
.navitem:hover .caret,.navitem:focus-within .caret{transform:rotate(180deg)}
.drop{
  position:absolute;top:100%;left:0;min-width:264px;padding:8px;z-index:70;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  box-shadow:0 18px 40px rgba(11,11,12,.14);
  opacity:0;visibility:hidden;transform:translateY(7px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.navitem:hover>.drop,.navitem:focus-within>.drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:11px 13px;border-radius:var(--radius);font-size:.9rem;color:var(--fg);
  font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 100}
.drop a:hover{background:var(--surface-2);color:var(--accent-strong)}
.drop a[aria-current="page"]{background:var(--surface-2);color:var(--accent-strong)}

.hdr-cta{display:flex;align-items:center;gap:var(--s3);flex:none}
.navtoggle{display:none;width:46px;height:46px;border:2px solid var(--rule);background:transparent;
  border-radius:var(--radius);align-items:center;justify-content:center;cursor:pointer;color:var(--fg);flex:none}
.navtoggle svg{width:22px;height:22px}
.navtoggle .x{display:none}
.navtoggle[aria-expanded="true"] .x{display:block}
.navtoggle[aria-expanded="true"] .burger{display:none}
.nav .mcta{display:none}

/* ---------- 7. HERO ----------
   align-items:stretch, NOT end. Bottom-aligning the two columns pushed the
   headline down by however much taller the right-hand column happened to be,
   which read as a hole above the h1 on every page. Both columns now start at
   the same line; the accent rule still runs the full height of the block. */
.hero{padding-block:clamp(40px,5.5vw,76px) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(24px,4vw,56px);align-items:stretch}
.hero-copy{display:flex;flex-direction:column;gap:var(--s4);align-self:start}
.hero-copy .lbl{margin:0}
.hero h1{margin:0}
.hero-side{display:flex;flex-direction:column;gap:var(--s5);align-self:start;
  border-left:2px solid var(--accent);padding-left:var(--s5)}
.hero-side p{color:var(--fg-soft);font-size:1.02rem;margin:0}
/* Equal-width CTAs. auto-fit gives two matched columns when they fit and one
   full-width column when they do not — either way the pair lines up. */
.hero-side .btnrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  gap:var(--s3)}
.hero-side .btnrow .btn{width:100%}

.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(32px,5vw,60px)}
.proof div{background:var(--bg);padding:20px 18px;display:flex;flex-direction:column;gap:3px}
.proof b{font-family:var(--display);font-size:1.6rem;font-weight:800;letter-spacing:-.03em;
  font-variation-settings:"wdth" 92;font-variant-numeric:tabular-nums;line-height:1}
.proof span{font-size:.8rem;color:var(--fg-soft);line-height:1.4}

/* ---------- 8. CARDS & PLATES ---------- */
.plate{border:1px solid var(--rule);background:var(--surface);padding:clamp(22px,2.8vw,30px);
  display:flex;flex-direction:column;gap:var(--s3);height:100%}
.plate h3{margin:0}
.plate p{font-size:.95rem;color:var(--fg-soft)}

.svc{border:1px solid var(--rule);background:var(--surface);padding:clamp(22px,2.8vw,30px);
  display:flex;flex-direction:column;gap:var(--s3);height:100%;position:relative;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.svc:hover{border-color:var(--accent);transform:translateY(-3px)}
.svc .num{font-family:var(--mono);font-size:.7rem;color:var(--fg-soft);letter-spacing:.12em}
.svc h3{margin:0;color:var(--fg)}
.svc p{font-size:.94rem;color:var(--fg-soft);margin:0}
.svc .go{margin-top:auto;padding-top:var(--s4);font-family:var(--display);font-weight:800;
  font-variation-settings:"wdth" 100;font-size:.88rem;color:var(--accent-strong);
  display:inline-flex;align-items:center;gap:7px}
.svc .go svg{width:15px;height:15px;transition:transform .18s var(--ease)}
.svc:hover .go svg{transform:translateX(4px)}

.ticks{list-style:none;padding:0;margin:0;display:grid;gap:var(--s3)}
.ticks li{display:flex;gap:var(--s3);align-items:flex-start;margin:0;font-size:.97rem}
.ticks svg{width:19px;height:19px;color:var(--accent-strong);flex:none;margin-top:4px}
.section--ink .ticks svg{color:var(--accent)}

/* ---------- 9. FORMS ---------- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-soft)}
.field label .req{color:var(--crit);margin-left:3px}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:.95rem;color:var(--fg);background:var(--bg);width:100%;
  border:1.5px solid var(--rule);border-bottom-color:var(--fg-soft);
  border-radius:var(--radius);padding:12px 13px;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.field textarea{resize:vertical;min-height:112px;line-height:1.6}
.field select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357595C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent-strong);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-strong) 20%,transparent)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--crit)}
.field .msg{font-size:.78rem;color:var(--crit);font-weight:600}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.alert{display:flex;gap:var(--s3);padding:15px 17px;border:1px solid;border-radius:var(--radius);
  font-size:.93rem;line-height:1.55;margin-bottom:var(--s5)}
.alert svg{width:20px;height:20px;flex:none;margin-top:2px}
.alert--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 42%,transparent);
  background:color-mix(in srgb,var(--ok) 9%,transparent)}
.alert--err{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 42%,transparent);
  background:color-mix(in srgb,var(--crit) 9%,transparent)}

/* ---------- 10. PILLS ---------- */
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.68rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius);border:1px solid}
.pill--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}
.pill--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.pill--crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,transparent);
  background:color-mix(in srgb,var(--crit) 10%,transparent)}
.pill--quiet{color:var(--fg-soft);border-color:var(--rule)}

/* ---------- 11. FOOTER ---------- */
.ftr{background:var(--ink);color:#A8A4A0;font-size:.93rem;padding-top:clamp(44px,6vw,76px)}
.ftr a{color:#A8A4A0}
.ftr a:hover{color:#fff}
.ftr h4{color:#fff;font-family:var(--mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;margin-bottom:var(--s4)}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:10px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(24px,3.4vw,48px);
  padding-bottom:clamp(34px,4.5vw,56px)}
.ftr-brand img{width:150px;margin-bottom:var(--s4)}
.ftr-brand p{max-width:38ch;font-size:.9rem;line-height:1.62}
.ftr-btm{border-top:1px solid #24242700;border-top-color:#242427;padding-block:var(--s5);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-size:.85rem}
.ftr-btm p{margin:0}

/* ---------- 12. RESPONSIVE ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .navtoggle{display:flex}
  .hdr .nav.open{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;left:0;right:0;top:100%;background:var(--bg);
    border-bottom:1px solid var(--rule);padding:12px var(--gut) 22px;
    box-shadow:0 20px 36px rgba(11,11,12,.14);max-height:calc(100vh - 76px);overflow-y:auto;
  }
  .hdr .nav.open>a,.hdr .nav.open .navitem>a{padding:13px 12px;font-size:1rem}
  .hdr .nav.open .navitem{display:block;position:static}
  .hdr .nav.open .navitem>a{display:flex;justify-content:space-between}
  .hdr .nav.open .caret{display:none}
  .hdr .nav.open .drop{
    position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    background:transparent;border:0;border-left:2px solid var(--rule);border-radius:0;
    min-width:0;padding:2px 0 4px 10px;margin:2px 0 6px 14px}
  .hdr .nav.open .mcta{display:grid;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid var(--rule)}
  .hdr .nav.open a[aria-current="page"]::after,.hdr .nav.open .navitem.on>a::after{display:none}
}
@media (max-width:1340px){ .hdr-cta .btn{display:none} }
@media (max-width:940px){
  .hero-grid,.split{grid-template-columns:minmax(0,1fr)}
  .hero-side{border-left:0;border-top:2px solid var(--accent);padding-left:0;padding-top:var(--s5)}
  .g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--gut:18px}
  .g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}
  .formgrid{grid-template-columns:minmax(0,1fr)}
  .ftr-grid{grid-template-columns:1fr}
  .ftr-btm{flex-direction:column;gap:var(--s2)}
  .btnrow .btn{flex:1 1 100%}
  .brand img{width:112px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
@media print{ .hdr,.ftr,.btnrow{display:none!important} body{color:#000;background:#fff} }

/* ---------- 13. BREADCRUMBS ---------- */
.crumbs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:var(--s5);font-size:.83rem;color:var(--fg-soft)}
.crumbs a{color:var(--fg-soft)}
.crumbs a:hover{color:var(--accent-strong)}
.crumbs span[aria-hidden]{opacity:.45}

/* ---------- 14. NUMBERED PLATES ---------- */
.plate .num,.svc .num{font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.14em;color:var(--accent-strong)}

/* ---------- 15. WIDE SERVICE CARD ---------- */
.svc--wide{gap:var(--s4)}
.minilist{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.minilist li{margin:0;font-family:var(--mono);font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-soft);
  border:1px solid var(--rule);border-radius:var(--radius);padding:5px 10px}

/* ---------- 16. FAQs ---------- */
.faqs{border-top:1px solid var(--rule);max-width:900px}
.faq{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  padding:20px 2px;cursor:pointer;list-style:none;
  font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 94;
  font-size:1.04rem;letter-spacing:-.02em;color:var(--fg);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-strong)}
.faq summary svg{width:18px;height:18px;flex:none;margin-top:4px;color:var(--fg-soft);
  transition:transform .2s var(--ease)}
.faq[open] summary svg{transform:rotate(180deg)}
.faq[open] summary{color:var(--accent-strong)}
.faq-a{padding:0 2px 22px;max-width:72ch}
.faq-a p{color:var(--fg-soft);font-size:.97rem;margin:0}

/* ---------- 17. FORM CARD ---------- */
.formcard{border:1px solid var(--rule);background:var(--surface);
  padding:clamp(24px,3.2vw,36px);display:flex;flex-direction:column;gap:var(--s4)}
.formcard h3{margin:0}
.formcard .formsub{font-size:.93rem;color:var(--fg-soft);margin:0}
.formnote{font-size:.82rem;color:var(--fg-soft);margin:0}
.formcard form{display:flex;flex-direction:column;gap:var(--s4)}
a.plate{text-decoration:none;transition:border-color .18s var(--ease),transform .18s var(--ease)}
a.plate:hover{border-color:var(--accent);transform:translateY(-3px)}
a.plate h3{color:var(--fg)}

/* ---------- 18. PRICING TIERS ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,24px);align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;gap:var(--s3);
  border:1px solid var(--rule);background:var(--surface);padding:clamp(24px,3vw,32px)}
.tier--feat{border-color:var(--accent);border-width:2px}
.tier-flag{position:absolute;top:-1px;right:18px;transform:translateY(-50%);
  background:var(--accent-strong);color:#fff;font-family:var(--mono);font-size:.62rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:var(--radius)}
.tier h3{margin:0}
.tier-for{font-size:.9rem;color:var(--fg-soft);margin:0;min-height:2.8em}
.tier-price{display:flex;align-items:baseline;gap:3px;margin:var(--s2) 0 var(--s3);
  padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.tier-price b{font-family:var(--display);font-size:2.4rem;font-weight:800;letter-spacing:-.04em;
  font-variation-settings:"wdth" 90;line-height:1;color:var(--fg);font-variant-numeric:tabular-nums}
.tier-price span{font-family:var(--mono);font-size:.78rem;color:var(--fg-soft)}
.tier-feats{list-style:none;padding:0;margin:0 0 var(--s4);display:grid;gap:10px;flex:1}
.tier-feats li{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:.9rem;color:var(--fg-soft)}
.tier-feats svg{width:15px;height:15px;color:var(--accent-strong);flex:none;margin-top:4px}
.tier .btn{margin-top:auto}

/* ---------- 19. FLAGSHIP ---------- */
.flagship{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.flagship-price{border:2px solid var(--accent);padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;gap:var(--s3);position:sticky;top:100px}
.flagship-price b{font-family:var(--display);font-size:3.2rem;font-weight:800;letter-spacing:-.045em;
  font-variation-settings:"wdth" 88;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.flagship-price p{font-size:.92rem;color:#BFBBB7;margin:0}
.flagship-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px)}
.fgroup h3{font-size:.95rem;color:#fff;margin:0 0 var(--s3);padding-bottom:10px;
  border-bottom:1px solid #2A2A2D;font-variation-settings:"wdth" 100}
.fgroup ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.fgroup li{margin:0;font-size:.88rem;color:#A8A4A0;padding-left:16px;position:relative;line-height:1.5}
.fgroup li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:1.5px;background:var(--accent)}

@media (max-width:940px){
  .tiers{grid-template-columns:minmax(0,1fr)}
  .tier-for{min-height:0}
  .flagship{grid-template-columns:minmax(0,1fr)}
  .flagship-price{position:static}
}
@media (max-width:640px){ .flagship-groups{grid-template-columns:minmax(0,1fr)} }

/* ---------- 20. ARTICLE BODY ---------- */
.post-title{margin-bottom:var(--s4)}
.article-body{font-size:1.04rem;line-height:1.75}
.article-body h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:2em 0 .6em}
.article-body h3{margin:1.7em 0 .5em}
.article-body p{margin:0 0 1.15em}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.25em}
.article-body li{margin-bottom:.5em}
.article-body a{text-decoration:underline;text-underline-offset:3px}
.article-body blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);
  font-size:1.1rem;line-height:1.6;color:var(--fg)}
.article-body blockquote p:last-child{margin:0}
.article-body img{margin:1.6em 0;border:1px solid var(--rule);width:100%;height:auto}
.article-body figure{margin:2em 0}
.article-body figure img{margin:0}
.article-body figcaption{font-size:.85rem;color:var(--fg-soft);line-height:1.5;
  margin-top:10px;padding-left:12px;border-left:2px solid var(--accent)}
/* Pictures wider than the text column. The article sits in a 66ch measure,
   so these break out symmetrically rather than pushing the page sideways. */
.article-body .img--wide{width:min(100%,860px);max-width:none;
  margin-left:50%;transform:translateX(-50%)}
.article-body .img--full{width:min(calc(100vw - 2*var(--gut)),1180px);max-width:none;
  margin-left:50%;transform:translateX(-50%)}
@media (max-width:880px){
  .article-body .img--wide,.article-body .img--full{width:100%;margin-left:0;transform:none}
}
.article-body code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);
  padding:2px 6px;border-radius:var(--radius)}
.article-body pre{background:var(--surface-2);border:1px solid var(--rule);padding:var(--s4);
  overflow-x:auto;border-radius:var(--radius);margin:1.5em 0}
.article-body pre code{background:none;padding:0}
.article-body hr{margin:2.4em 0}

.post-cover{margin:0 0 var(--s6);border:1px solid var(--rule);overflow:hidden}
.post-cover--top{margin-top:clamp(28px,4vw,48px);margin-bottom:0}
.post-cover img{width:100%;height:auto;display:block}

.note{border-left:3px solid var(--second);padding:var(--s2) 0 var(--s2) var(--s5);max-width:72ch;
  display:flex;flex-direction:column;gap:var(--s2)}
.note p{font-size:1rem;color:var(--fg-soft);margin:0}

/* ---------- 21. DATA TABLE ---------- */
.dtable{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.4em 0;
  display:block;overflow-x:auto;white-space:nowrap}
.dtable th,.dtable td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.dtable th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-soft);font-weight:600}
.dtable td code{font-family:var(--mono);font-size:.85em}
@media (min-width:720px){ .dtable{display:table;white-space:normal} }

/* ---------- 22. CARDS WITH A COVER ----------
   The .svc card gains an optional picture above the text. The ratio is
   fixed so a grid of three never goes ragged when one screenshot is
   taller than the others. */
.svc--cover{padding:0;overflow:hidden}
.svc-shot{display:block;aspect-ratio:16/10;background:var(--surface-2);
  border-bottom:1px solid var(--rule);overflow:hidden;flex:none}
.svc-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease)}
.svc--cover:hover .svc-shot img{transform:scale(1.035)}
.svc-text{display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(20px,2.5vw,26px);flex:1}
.svc-text h3{margin:0}
.svc-text p{font-size:.94rem;color:var(--fg-soft);margin:0}
.svc-text .go{margin-top:auto;padding-top:var(--s3)}

/* Initial-letter stand-in until a real screenshot is uploaded. */
.shot-none{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--surface-2),var(--surface));
  font-family:var(--display);font-weight:800;font-size:2.6rem;letter-spacing:-.05em;
  color:var(--accent);font-variation-settings:"wdth" 88;opacity:.85}

/* ---------- 23. PORTFOLIO ---------- */
.pf-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,32px)}
.pf-filters button{
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 15px;cursor:pointer;color:var(--fg-soft);
  background:transparent;border:1px solid var(--rule);border-radius:var(--radius);
  transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);
}
.pf-filters button:hover{color:var(--fg);border-color:var(--fg-soft)}
.pf-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,26px)}
.pf{border:1px solid var(--rule);background:var(--surface);display:flex;flex-direction:column;
  overflow:hidden;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.pf:hover{border-color:var(--accent);transform:translateY(-3px)}
.pf-shot{aspect-ratio:16/10;background:var(--surface-2);overflow:hidden;flex:none;
  border-bottom:1px solid var(--rule)}
.pf-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.pf:hover .pf-shot img{transform:scale(1.035)}
.pf-body{padding:clamp(18px,2.2vw,24px);display:flex;flex-direction:column;gap:10px;flex:1}
.pf-cat{font-family:var(--mono);font-size:.64rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-strong)}
.pf h3{margin:0;font-size:1.08rem}
.pf-client{font-size:.84rem;color:var(--fg-soft);margin:0;font-weight:500}
.pf-body p{font-size:.9rem;color:var(--fg-soft);margin:0}
.pf-links{margin-top:auto;padding-top:var(--s3);display:flex;gap:var(--s4);flex-wrap:wrap;
  font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 100;font-size:.84rem}
.pf-links a{display:inline-flex;align-items:center;gap:6px;color:var(--accent-strong)}
.pf-links svg{width:14px;height:14px}
.pf-none{grid-column:1/-1;color:var(--fg-soft);font-size:.95rem}
/* .pf sets display:flex, which outranks the browser's own [hidden] rule —
   without this the filter buttons would do nothing at all. */
.pf[hidden]{display:none}

@media (max-width:940px){ .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .pf-grid{grid-template-columns:minmax(0,1fr)} }

/* ---------- 24. CLIENT STRIP ---------- */
.clients{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.clients a,.clients span{background:var(--bg);padding:20px 16px;display:flex;
  flex-direction:column;gap:4px;justify-content:center;min-height:88px;
  transition:background .18s var(--ease)}
.clients a:hover{background:var(--surface-2)}
.clients b{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 92;
  letter-spacing:-.025em;font-size:1rem;line-height:1.2;color:var(--fg)}
.clients em{font-style:normal;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-soft)}
.clients-cta{margin-top:clamp(20px,2.6vw,30px)}
/* A lone CTA should not stretch to the full column — only a pair needs
   matching widths. */
.hero-side .btnrow .btn:only-child{width:auto;justify-self:start}