/* ── Self-hosted fonts (site31) ──
   Were loaded from Google Fonts. Now served from /fonts: one less third-party
   connection on every page, no visitor IP sent to Google, and the heading
   font can be preloaded. Latin subset only — it covers Irish fadas and €.
   Anything outside it falls back to the system font in the stack. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;src:url(/fonts/ibm-plex-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/fraunces-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/public-sans-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ════════════════════════════════════════════════════════════
   FENTECH — DESIGN SYSTEM v14  ·  Workshop (paper · ink · cobalt · orange)
   Light-first · dual theme · accessible · fast
   ════════════════════════════════════════════════════════════ */
/* fonts: self-hosted @font-face at the top of this file, preloaded from <head> — never @import, which blocks render */

:root{
  /* Brand */
  --brand:#1b4dff; --brand-strong:#123ad4; --brand-soft:rgba(27,77,255,.07);
  --accent:#00c2d1; --success:#00996b; --warn:#d98315; --danger:#dc3b3b;
  --grad:linear-gradient(135deg,#1b4dff 0%,#00c2d1 100%);
  /* Surfaces (light) */
  --bg:#f6f2e9; --bg-soft:#ece6d8; --bg-card:#fffcf5; --bg-deep:#0b1626;
  --ink:#0d1117; --ink-soft:#3a4250; --ink-faint:#5a616c;
  --border:#d6cfbf; --border-strong:#a79e8a;
  /* v14 workshop tokens */
  --line:#0d1117; --pop:#ff6a2b; --pop-soft:rgba(255,106,43,.16); --marker:rgba(255,106,43,.55);
  --hard:4px 4px 0 var(--line); --hard-hover:6px 6px 0 var(--pop);
  --hand:'Caveat','Segoe Print','Bradley Hand',cursive;
  --shadow-sm:0 1px 2px rgba(14,27,44,.05),0 2px 8px rgba(14,27,44,.04);
  --shadow-md:0 4px 14px rgba(14,27,44,.06),0 12px 32px rgba(14,27,44,.07);
  --shadow-lg:0 8px 24px rgba(14,27,44,.09),0 24px 64px rgba(14,27,44,.12);
  --ring:0 0 0 3px rgba(27,77,255,.22);
  /* Type */
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Space Grotesk',var(--sans);
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  /* Shape / layout */
  --r-sm:3px; --r-md:5px; --r-lg:8px; --r-full:999px;
  --nav-h:72px; --container:1180px;
  --ease:cubic-bezier(.22,.8,.28,1);
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0a0c11; --bg-soft:#101319; --bg-card:#13171f; --bg-deep:#07090d;
  --ink:#e9edf3; --ink-soft:#9ba6b6; --ink-faint:#8791a1;
  --border:rgba(150,166,190,.13); --border-strong:rgba(150,166,190,.26);
  --brand:#6b8dff; --brand-strong:#8ba6ff; --brand-soft:rgba(107,141,255,.12);
  --line:rgba(233,237,243,.34); --pop:#ff7a42; --pop-soft:rgba(255,122,66,.14); --marker:rgba(255,122,66,.6);
  --hard:4px 4px 0 #1b212c; --hard-hover:6px 6px 0 var(--pop);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 4px 14px rgba(0,0,0,.35),0 12px 32px rgba(0,0,0,.3);
  --shadow-lg:0 8px 24px rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.45);
  --ring:0 0 0 3px rgba(107,141,255,.32);
  color-scheme:dark;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:1rem;line-height:1.65;overflow-x:hidden;transition:background .35s,color .35s;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
button{font-family:inherit}
::selection{background:color-mix(in srgb,var(--brand) 18%,transparent)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:.6rem 1.2rem;z-index:99999;border-radius:0 0 var(--r-sm) 0}
.skip-link:focus{left:0}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ── Layout helpers ────────────────────────────────────── */
.container{max-width:var(--container);margin:0 auto;padding:0 1.5rem}
.section{padding:5.5rem 0}
.section.soft{background:var(--bg-soft)}
.section-head{max-width:680px;margin-bottom:3.2rem}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);background:none;padding:0;border-radius:0;margin-bottom:1rem}
.eyebrow::before{content:'//';font-weight:600;opacity:.55;letter-spacing:0;width:auto;height:auto;border-radius:0;background:none}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em;line-height:1.15;color:var(--ink);text-wrap:balance}
.section-title{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:700;margin-bottom:1rem}
.section-lead{font-size:1.08rem;color:var(--ink-soft);line-height:1.7}
.grid{display:grid;gap:1.4rem}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ── Buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:550;font-size:.92rem;letter-spacing:-.005em;padding:.72rem 1.4rem;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 28%,transparent)}
.btn-primary:hover{background:var(--brand-strong);transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 32%,transparent)}
[data-theme="dark"] .btn-primary{color:#06101f}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-2px)}
.btn-soft{background:var(--brand-soft);color:var(--brand)}
.btn-soft:hover{background:color-mix(in srgb,var(--brand) 14%,transparent);transform:translateY(-2px)}
.btn-lg{padding:.85rem 1.7rem;font-size:.97rem;border-radius:var(--r-md)}
.btn-sm{padding:.45rem .9rem;font-size:.83rem}
.btn-white{background:#fff;color:#0b1626}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* ── Nav ───────────────────────────────────────────────── */
nav.site-nav{position:fixed;top:0;left:0;right:0;z-index:9000;height:var(--nav-h);display:flex;align-items:center;background:transparent;transition:background .3s,box-shadow .3s,border-color .3s;border-bottom:1px solid transparent}
nav.site-nav.scrolled{background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.nav-inner{max-width:var(--container);margin:0 auto;padding:0 1.5rem;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.nav-logo{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--ink);letter-spacing:-.01em}
.nav-logo b{color:var(--brand);font-weight:700}
.nav-links{display:flex;gap:.2rem;list-style:none;align-items:center}
.nav-links>li>a{display:block;font-size:.92rem;font-weight:500;color:var(--ink-soft);padding:.5rem .85rem;border-radius:var(--r-sm);transition:color .2s,background .2s}
.nav-links>li>a:hover{color:var(--ink);background:var(--brand-soft)}
.nav-links>li>a.active{color:var(--brand);font-weight:600}
.nav-dropdown{position:relative}
.nav-dropdown>a .caret{display:inline-block;transition:transform .2s;font-size:.7em;margin-left:.25rem}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-lg);padding:.5rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown:hover>a .caret{transform:rotate(180deg)}
.dropdown-menu a{display:block;padding:.55rem .8rem;font-size:.9rem;color:var(--ink-soft);border-radius:var(--r-sm);transition:background .15s,color .15s}
.dropdown-menu a:hover{background:var(--brand-soft);color:var(--brand)}
.nav-right{display:flex;align-items:center;gap:.7rem}
.nav-phone{font-size:.9rem;font-weight:600;color:var(--ink-soft);transition:color .2s}
.nav-phone:hover{color:var(--brand)}
.theme-toggle{width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg-card);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--brand);color:var(--brand)}
.nav-burger{display:none;width:42px;height:42px;border:1px solid var(--border);background:var(--bg-card);border-radius:var(--r-sm);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--bg);z-index:8999;padding:1.4rem 1.5rem 6rem;overflow-y:auto;flex-direction:column;gap:.2rem}
.mobile-menu.open{display:flex}
.mobile-menu a{display:block;padding:.9rem .4rem;font-size:1.05rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border)}
.mobile-menu a.sub{font-size:.95rem;font-weight:500;color:var(--ink-soft);padding-left:1.2rem}
.mobile-menu .mm-cta{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
@media(max-width:1060px){
  .nav-links,.nav-phone{display:none}
  .nav-burger{display:flex}
}

/* ── Page hero (inner pages) ───────────────────────────── */
.page-hero{padding:calc(var(--nav-h) + 4.5rem) 0 4rem;background:
  radial-gradient(900px 400px at 85% -10%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%),
  radial-gradient(700px 380px at 10% -20%,color-mix(in srgb,var(--brand) 10%,transparent),transparent 60%),var(--bg)}
.page-hero h1{font-size:clamp(2.1rem,4.5vw,3.2rem);font-weight:800;margin-bottom:1rem}
.page-hero .lead{font-size:1.12rem;color:var(--ink-soft);max-width:640px;line-height:1.7}
.page-hero .hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}

/* ── Cards ─────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.8rem;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.card .icon{width:42px;height:42px;border-radius:var(--r-sm);background:none;border:1px solid var(--border-strong);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-bottom:1.15rem;transition:border-color .25s,background .25s}
.card .icon svg{width:21px;height:21px}
.card:hover .icon{border-color:var(--brand);background:var(--brand-soft)}
.card h3{font-size:1.12rem;font-weight:700;margin-bottom:.55rem}
.card p{font-size:.94rem;color:var(--ink-soft);line-height:1.65}
.card .card-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-size:.9rem;font-weight:600;color:var(--brand)}
.card .card-link .arr{transition:transform .2s}
.card:hover .card-link .arr{transform:translateX(4px)}
a.card{display:block;color:inherit}

/* ── Stats ─────────────────────────────────────────────── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:760px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat{text-align:center;padding:1.6rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg)}
.stat .num{font-family:var(--display);font-size:2.3rem;font-weight:800;color:var(--brand);letter-spacing:-.03em;line-height:1.1}
.stat .lbl{font-size:.85rem;color:var(--ink-faint);font-weight:500;margin-top:.35rem}

/* ── Marquee (trust strip) ─────────────────────────────── */
.marquee{overflow:hidden;position:relative;padding:1.1rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-soft);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:3rem;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:500;color:var(--ink-faint);white-space:nowrap}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ── Process steps ─────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;counter-reset:step}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding:1.6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg)}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--display);font-weight:800;font-size:.9rem;color:var(--brand);background:var(--brand-soft);width:38px;height:38px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.step h3{font-size:1.05rem;margin-bottom:.5rem}
.step p{font-size:.92rem;color:var(--ink-soft)}

/* ── Accordion ─────────────────────────────────────────── */
.accordion{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-card)}
.acc-item+.acc-item{border-top:1px solid var(--border)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;background:none;border:none;cursor:pointer;text-align:left;font-size:1rem;font-weight:600;color:var(--ink);transition:background .2s}
.acc-q:hover{background:var(--brand-soft)}
.acc-q .acc-icon{flex-shrink:0;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--border-strong);color:var(--ink-faint);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .3s,background .2s,color .2s,border-color .2s}
.acc-item.open .acc-icon{transform:rotate(45deg);background:var(--brand);border-color:var(--brand);color:#fff}
.acc-a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.no-js .acc-a{max-height:none}
.acc-a-inner{padding:0 1.5rem 1.4rem;font-size:.95rem;color:var(--ink-soft);line-height:1.7}

/* ── Pricing ───────────────────────────────────────────── */
.price-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem;display:flex;flex-direction:column;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.price-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.price-card.featured{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--shadow-md)}
.price-card .plan-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .95rem;border-radius:var(--r-full);white-space:nowrap}
.price-card .plan-name{font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
.price-card .plan-price{font-family:var(--display);font-size:2rem;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.price-card .plan-price small{font-size:.9rem;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.price-card .plan-note{font-size:.86rem;color:var(--ink-faint);margin:.4rem 0 1.2rem}
.price-card ul{list-style:none;margin:0 0 1.6rem;flex:1;display:flex;flex-direction:column;gap:.55rem}
.price-card ul li{font-size:.92rem;color:var(--ink-soft);padding-left:1.55rem;position:relative}
.price-card ul li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:700}
.price-table{width:100%;border-collapse:collapse;background:var(--bg-card);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.price-table th{background:var(--bg-soft);text-align:left;font-size:.82rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);padding:.9rem 1.3rem}
.price-table td{padding:.9rem 1.3rem;font-size:.93rem;border-top:1px solid var(--border);color:var(--ink-soft)}
.price-table td:first-child{color:var(--ink);font-weight:500}
.price-table td:last-child{white-space:nowrap;font-weight:600;color:var(--brand)}
.table-wrap{overflow-x:auto;border-radius:var(--r-lg)}

/* ── Forms ─────────────────────────────────────────────── */
.form-group{margin-bottom:1.2rem}
.form-label{display:block;font-size:.88rem;font-weight:600;color:var(--ink);margin-bottom:.45rem}
.form-input,select.form-input,textarea.form-input{width:100%;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:.8rem 1rem;font-size:.95rem;font-family:inherit;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.form-input:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
textarea.form-input{min-height:130px;resize:vertical}
.form-hint{font-size:.8rem;color:var(--ink-faint);margin-top:.35rem}
.form-status{display:none;padding:1rem 1.3rem;border-radius:var(--r-md);font-size:.93rem;font-weight:500;margin-bottom:1.2rem}
.form-status.ok{display:block;background:rgba(0,153,107,.1);color:var(--success);border:1px solid rgba(0,153,107,.3)}
.form-status.err{display:block;background:rgba(216,67,67,.08);color:var(--danger);border:1px solid rgba(216,67,67,.3)}

/* ── CTA band ──────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;background:var(--bg-deep);border-radius:var(--r-lg);padding:3.5rem 2.5rem;text-align:center;color:#fff}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 20% 0%,color-mix(in srgb,var(--brand) 35%,transparent),transparent 60%),radial-gradient(600px 300px at 85% 100%,color-mix(in srgb,var(--accent) 28%,transparent),transparent 60%)}
.cta-band>*{position:relative}
.cta-band h2{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:.8rem}
.cta-band p{color:rgba(255,255,255,.72);max-width:560px;margin:0 auto 1.8rem;font-size:1.02rem}
.cta-band .cta-actions{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}

/* ── Footer ────────────────────────────────────────────── */
footer.site-footer{background:var(--bg-deep);color:#93a3b8;margin-top:5rem;padding:4rem 0 2rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:2.5rem;margin-bottom:3rem}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .nav-logo{color:#fff;margin-bottom:1rem}
.footer-brand p{font-size:.9rem;line-height:1.7;max-width:300px}
.footer-brand p.footer-products{margin-top:1rem;font-size:.82rem;line-height:1.6;opacity:.9}
.footer-products a{text-decoration:underline;text-underline-offset:2px}
.footer-col h4,.footer-col h2{color:#fff;font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1.1rem;font-family:var(--sans)}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer-col a{color:#93a3b8;font-size:.92rem;transition:color .2s}
.footer-col a:hover{color:#fff}
.footer-contact li{display:flex;gap:.6rem;font-size:.92rem;align-items:baseline}
.footer-bottom{border-top:1px solid rgba(147,163,184,.15);padding-top:1.6rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.84rem}
.footer-bottom a{color:#93a3b8}
.footer-bottom a:hover{color:#fff}
.footer-socials{display:flex;gap:.7rem}
.footer-socials a{width:36px;height:36px;border-radius:var(--r-sm);border:1px solid rgba(147,163,184,.25);display:flex;align-items:center;justify-content:center;color:#93a3b8;transition:border-color .2s,color .2s,transform .2s}
.footer-socials a:hover{color:#fff;border-color:#fff;transform:translateY(-2px)}

/* ── Blog / prose ──────────────────────────────────────── */
.post-meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-size:.86rem;color:var(--ink-faint);margin-bottom:2rem}
.prose{max-width:720px;margin:0 auto;font-size:1.03rem;line-height:1.8;color:var(--ink-soft)}
.prose h2{font-size:1.5rem;margin:2.4rem 0 1rem;color:var(--ink)}
.prose h3{font-size:1.18rem;margin:1.8rem 0 .8rem;color:var(--ink)}
.prose p{margin-bottom:1.2rem}
.prose ul,.prose ol{margin:0 0 1.2rem 1.4rem}
.prose li{margin-bottom:.45rem}
.prose strong{color:var(--ink)}
.prose blockquote,.callout{border-left:3px solid var(--brand);background:var(--brand-soft);padding:1.1rem 1.4rem;border-radius:0 var(--r-md) var(--r-md) 0;margin:1.6rem 0;font-size:.97rem}
.callout.warn{border-left-color:var(--warn);background:rgba(232,160,16,.08)}
.callout.danger{border-left-color:var(--danger);background:rgba(216,67,67,.07)}
.tag{display:inline-block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);background:var(--brand-soft);padding:.25rem .6rem;border-radius:var(--r-sm);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent)}
.blog-card{display:flex;flex-direction:column;overflow:hidden}
.blog-card .thumb{height:150px;border-radius:var(--r-md);background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:2.6rem;margin-bottom:1.2rem;color:#fff}
.blog-card time{font-size:.82rem;color:var(--ink-faint)}

/* ── Portfolio ─────────────────────────────────────────── */
.pf-card .pf-visual{height:170px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:1.3rem;background:var(--bg-soft);border:1px solid var(--border)}
.pf-tags{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.9rem}
.pf-tags span{font-size:.74rem;font-weight:600;background:var(--bg-soft);border:1px solid var(--border);color:var(--ink-faint);padding:.25rem .65rem;border-radius:var(--r-full)}
.filter-row{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:2.4rem}
.filter-btn{padding:.5rem 1.15rem;border-radius:var(--r-full);border:1px solid var(--border-strong);background:var(--bg-card);color:var(--ink-soft);font-size:.88rem;font-weight:500;cursor:pointer;transition:all .2s}
.filter-btn:hover{border-color:var(--brand);color:var(--brand)}
.filter-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── Reveal animations ─────────────────────────────────── */
.reveal,.reveal-group>*{opacity:1;transform:none}
.reveal-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-ready .reveal.visible{opacity:1;transform:none}
.reveal-ready .reveal-group>*{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal-ready .reveal-group.visible>*{opacity:1;transform:none}
.reveal-group.visible>*:nth-child(2){transition-delay:.08s}
.reveal-group.visible>*:nth-child(3){transition-delay:.16s}
.reveal-group.visible>*:nth-child(4){transition-delay:.24s}
.reveal-group.visible>*:nth-child(5){transition-delay:.32s}
.reveal-group.visible>*:nth-child(6){transition-delay:.4s}
@media(prefers-reduced-motion:reduce){.reveal,.reveal-group>*{opacity:1!important;transform:none!important}}

/* ── Utility widgets ───────────────────────────────────── */
#back-top{position:fixed;bottom:5.6rem;right:1.3rem;width:44px;height:44px;border-radius:var(--r-md);background:var(--bg-card);border:1px solid var(--border-strong);color:var(--ink-soft);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .3s;z-index:8000;box-shadow:var(--shadow-sm)}
#back-top.show{opacity:1;visibility:visible;transform:none}
#back-top:hover{color:var(--brand);border-color:var(--brand)}
.mobile-action-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:8500;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--border);padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));grid-template-columns:1fr 1fr;gap:.7rem}
.mobile-action-bar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem;border-radius:var(--r-md);font-weight:600;font-size:.92rem}
.mobile-action-bar .mab-call{background:var(--brand);color:#fff}
.mobile-action-bar .mab-quote{background:var(--bg-card);color:var(--ink);border:1px solid var(--border-strong)}
@media(max-width:760px){.mobile-action-bar{display:grid}body{padding-bottom:66px}}
.badge-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.badge-row span{display:inline-flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:500;color:var(--ink-soft);background:var(--bg-card);border:1px solid var(--border);padding:.45rem .9rem;border-radius:var(--r-full)}
.badge-row span b{color:var(--success)}

/* ── Breadcrumb ────────────────────────────────────────── */
.crumbs{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--ink-faint);margin-bottom:1.3rem;flex-wrap:wrap}
.crumbs a{color:var(--ink-faint)}
.crumbs a:hover{color:var(--brand)}
.crumbs .sep{opacity:.5}

/* ── Legal pages ───────────────────────────────────────── */
.legal-toc{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem 1.8rem;margin-bottom:2.5rem}
.legal-toc h3{font-size:.95rem;margin-bottom:.8rem}
.legal-toc ol{margin-left:1.2rem;font-size:.92rem;color:var(--ink-soft);columns:2;column-gap:2rem}
@media(max-width:600px){.legal-toc ol{columns:1}}
.legal-toc li{margin-bottom:.35rem}

/* ── Print ─────────────────────────────────────────────── */
@media print{nav.site-nav,.mobile-action-bar,#back-top,#ft-bubble,#ft-chat,.cta-band,footer.site-footer{display:none!important}body{padding-bottom:0}}

/* ════════════════════════════════════════════════════════════
   v5 EFFECTS LAYER — showcase interactions
   ════════════════════════════════════════════════════════════ */
:root{--accent2:#ff6a2b;--grad2:linear-gradient(120deg,#1b4dff,#00c2d1 45%,#ff6a2b 110%)}

/* ── View Transitions (cross-page) ── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s ease forwards}
::view-transition-new(root){animation:vtIn .3s ease forwards}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Scroll progress ── */
#scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--grad2);z-index:99998;box-shadow:0 0 10px color-mix(in srgb,var(--brand) 45%,transparent);border-radius:0 3px 3px 0}

/* ── Cursor glow (desktop) ── */
#cursor-glow{display:none}
@media(pointer:fine){
  #cursor-glow{display:block;position:fixed;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:1;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--brand) 7%,transparent),transparent 60%);transition:opacity .3s;will-change:left,top}
  [data-theme="dark"] #cursor-glow{background:radial-gradient(circle,rgba(107,141,255,.09),transparent 60%)}
}

/* ── Aurora / floating orbs ── */
.fx-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:orbFloat 16s ease-in-out infinite}
.orb.o1{width:420px;height:420px;background:color-mix(in srgb,var(--brand) 20%,transparent);top:-120px;left:-80px}
.orb.o2{width:360px;height:360px;background:color-mix(in srgb,var(--accent) 16%,transparent);bottom:-100px;right:8%;animation-delay:-5s}
.orb.o3{width:260px;height:260px;background:rgba(255,106,43,.12);top:30%;right:-60px;animation-delay:-10s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}

/* ── Hero canvas ── */
#net-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.9}

/* ── Gradient shimmer text ── */
.grad{background:var(--grad2);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gradShift 6s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── Split-text reveal ── */
.st-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.st-w>span{display:inline-block;transform:translateY(110%);animation:stUp .7s var(--ease) forwards}
.grad .st-w>span,.st-w>span.stg{background:var(--grad2);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes stUp{to{transform:none}}

/* ── Typewriter ── */
.typewriter{border-right:2px solid var(--brand);padding-right:2px;animation:caret 1s step-end infinite}
@keyframes caret{0%,100%{border-color:var(--brand)}50%{border-color:transparent}}

/* ── Spotlight cards ── */
.card,.price-card,.step,.stat{position:relative;overflow:hidden}
.card::before,.price-card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--brand) 10%,transparent),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
[data-theme="dark"] .card::before,[data-theme="dark"] .price-card::before{background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(107,141,255,.14),transparent 45%)}
.card:hover::before,.price-card:hover::before{opacity:1}
.card>*,.price-card>*{position:relative;z-index:1}

/* ── Tilt + magnetic (JS-driven) ── */
.tilt{transform-style:preserve-3d;will-change:transform}
.magnetic{will-change:transform;transition:transform .18s var(--ease)}

/* ── Hero logo reveal ── */
.hero-logo{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.hero-mark{position:relative;width:64px;height:64px;flex-shrink:0}
.hero-mark .m-ring{animation:diamondSpin .8s cubic-bezier(.34,1.56,.64,1) forwards;opacity:0}
.hero-mark .m-up{animation:chevReveal .5s ease forwards .7s;opacity:0}
.hero-mark .m-down{animation:chevReveal .5s ease forwards .95s;opacity:0}
@keyframes diamondSpin{0%{opacity:0;transform:rotate(-45deg) scale(.4)}100%{opacity:1;transform:none}}
@keyframes chevReveal{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
.hero-word{overflow:hidden;line-height:1}
.hero-word .w1{display:inline-block;font-family:var(--display);font-size:2rem;font-weight:800;color:var(--ink);letter-spacing:-.03em;animation:wordIn .5s ease forwards 1.1s;opacity:0;transform:translateX(-20px)}
.hero-word .w2{display:inline-block;font-family:var(--display);font-size:1.8rem;font-weight:700;color:var(--brand);animation:wordIn .5s ease forwards 1.3s;opacity:0;transform:translateX(-20px)}
@keyframes wordIn{to{opacity:1;transform:none}}

/* ── Live status panel ── */
.status-panel{background:color-mix(in srgb,var(--bg-card) 88%,transparent);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.status-head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem;border-bottom:1px solid var(--border);background:var(--bg-soft)}
.status-head .sh-t{font-family:var(--display);font-weight:700;font-size:.9rem}
.status-head .sh-dots{display:flex;gap:5px}
.status-head .sh-dots span{width:9px;height:9px;border-radius:50%}
.status-row{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;border-bottom:1px solid var(--border);font-size:.88rem}
.status-row:last-child{border-bottom:none}
.status-row .sr-l{color:var(--ink-faint);display:flex;align-items:center;gap:.55rem}
.status-row .sr-v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.status-row .sr-v.ok{color:var(--success)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 0 rgba(0,153,107,.5);animation:pulse2 2s infinite}
#spark{width:100%;height:44px;display:block}

/* ── Before / After slider ── */
.ba-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-md);user-select:none;touch-action:none;cursor:ew-resize}
.ba-wrap img,.ba-wrap svg{width:100%;display:block}
.ba-top{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 calc(100% - var(--ba,50%)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--ba,50%);width:3px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.35);transform:translateX(-50%);pointer-events:none}
.ba-handle::after{content:'◂ ▸';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--brand);color:#fff;font-size:.7rem;letter-spacing:.1em;padding:.45rem .6rem;border-radius:var(--r-full);white-space:nowrap;box-shadow:var(--shadow-md)}
.ba-tag{position:absolute;top:12px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:var(--r-full);background:rgba(0,0,0,.55);color:#fff;z-index:2;pointer-events:none}
.ba-tag.l{left:12px}.ba-tag.r{right:12px}

/* ── Command palette ── */
#cmdk{position:fixed;inset:0;z-index:99000;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(8,14,24,.45);backdrop-filter:blur(6px)}
#cmdk.open{display:flex}
.cmdk-box{width:min(560px,92vw);background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;animation:cmdkIn .2s var(--ease)}
@keyframes cmdkIn{from{opacity:0;transform:translateY(-12px) scale(.98)}to{opacity:1;transform:none}}
.cmdk-box input{width:100%;border:none;outline:none;background:transparent;padding:1.1rem 1.3rem;font-size:1rem;color:var(--ink);font-family:inherit;border-bottom:1px solid var(--border)}
.cmdk-list{max-height:320px;overflow-y:auto;padding:.5rem}
.cmdk-item{display:flex;align-items:center;gap:.8rem;padding:.7rem .9rem;border-radius:var(--r-sm);color:var(--ink-soft);font-size:.93rem;cursor:pointer}
.cmdk-item.sel,.cmdk-item:hover{background:var(--brand-soft);color:var(--brand)}
.cmdk-hint{padding:.6rem 1.2rem;font-size:.72rem;color:var(--ink-faint);border-top:1px solid var(--border);display:flex;gap:1rem}
.cmdk-hint kbd{background:var(--bg-soft);border:1px solid var(--border);border-radius:4px;padding:.05rem .4rem;font-family:inherit}
.nav-cmdk{display:none}
@media(pointer:fine) and (min-width:1061px){.nav-cmdk{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--ink-faint);border:1px solid var(--border);border-radius:var(--r-sm);padding:.42rem .7rem;background:var(--bg-card);cursor:pointer}.nav-cmdk:hover{border-color:var(--brand);color:var(--brand)}.nav-cmdk kbd{font-family:inherit;font-size:.72rem;background:var(--bg-soft);border:1px solid var(--border);border-radius:4px;padding:0 .35rem}}

/* ── Lightbox ── */
#lightbox{position:fixed;inset:0;z-index:98000;display:none;align-items:center;justify-content:center;background:rgba(5,10,18,.85);backdrop-filter:blur(8px);cursor:zoom-out}
#lightbox.open{display:flex}
#lightbox .lb-inner{max-width:min(920px,92vw);max-height:86vh;animation:cmdkIn .25s var(--ease)}
#lightbox .lb-inner>*{max-width:100%;max-height:86vh;border-radius:var(--r-lg);box-shadow:0 40px 120px rgba(0,0,0,.6)}

/* ── Marquee reverse row ── */
.marquee-track.reverse{animation-direction:reverse}

/* ── Parallax base ── */
[data-parallax]{will-change:transform}

/* ── Nav logo image ── */
.nav-logo .logo-mark{width:34px;height:34px}
.hero-badges .badge-row{margin-top:1.6rem}

/* ── Reduced motion: kill showcase effects ── */
@media(prefers-reduced-motion:reduce){
  #cursor-glow,.orb{display:none!important}
  .typewriter{border-right:none;animation:none}
  .st-w>span{transform:none;animation:none}
  .hero-mark .m-ring,.hero-mark .m-up,.hero-mark .m-down,.hero-word .w1,.hero-word .w2{opacity:1;animation:none;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
.page-hero{position:relative;overflow:hidden}

/* ── v5.1 image slots (photo appears when file exists, fallback otherwise) ── */
.pf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:2}
.pf-visual{position:relative;overflow:hidden}
.img-slot{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border);min-height:340px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 14%,transparent),color-mix(in srgb,var(--accent) 10%,transparent) 55%,rgba(255,106,43,.08));display:flex;align-items:center;justify-content:center;font-size:3.4rem}
.img-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}

/* ── v5.2 HEADER FIX + responsive polish ── */
.nav-inner{flex-wrap:nowrap;min-width:0}
.nav-logo{flex-shrink:0;white-space:nowrap}
.nav-logo .logo-mark{width:32px;height:32px;flex-shrink:0}
.nav-links{flex-wrap:nowrap;gap:.1rem;flex-shrink:0}
.nav-links>li>a{padding:.5rem .65rem;font-size:.88rem;white-space:nowrap}
.nav-right{flex-shrink:0;gap:.55rem}
.nav-right .btn{white-space:nowrap}
nav.site-nav{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* progressive collapse: phone → search → full menu */
@media(max-width:1460px){.nav-phone{display:none}}
@media(max-width:1310px){.nav-cmdk{display:none!important}}
@media(max-width:1200px){
  .nav-links{display:none}
  .nav-burger{display:flex}
}
@media(min-width:1201px){.nav-burger{display:none}}
/* small screens: keep CTA visible but compact */
@media(max-width:480px){
  .nav-right .btn-sm{padding:.45rem .8rem;font-size:.8rem}
  .nav-inner{padding:0 1rem}
}
/* general mobile/tablet polish */
@media(max-width:820px){
  .section{padding:3.8rem 0}
  .page-hero{padding:calc(var(--nav-h) + 3rem) 0 3rem}
  .section-head{margin-bottom:2.4rem}
  .cta-band{padding:2.6rem 1.5rem}
  .hero-cta .btn,.hero-actions .btn{flex:1 1 auto;justify-content:center}
  .steps{gap:1rem}
  .footer-grid{gap:2rem}
}
@media(max-width:640px){
  .stats-row{gap:.7rem}
  .stat{padding:1.2rem .8rem}
  .stat .num{font-size:1.8rem}
  .badge-row span{font-size:.78rem;padding:.4rem .75rem}
  .price-table th,.price-table td{padding:.7rem .9rem;font-size:.86rem}
  .prose{font-size:.98rem}
}

/* ── Seasonal theming ── */
.season-ribbon{position:fixed;top:calc(var(--nav-h) + 8px);left:50%;transform:translateX(-50%);z-index:8900;background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--r-full);box-shadow:var(--shadow-md);padding:.5rem 1.1rem;font-size:.88rem;font-weight:600;display:flex;gap:.7rem;align-items:center;animation:cmdkIn .4s var(--ease)}
.season-ribbon .sr-x{background:none;border:none;color:var(--ink-faint);cursor:pointer;font-size:.85rem;padding:0 .1rem}
.season-fx{position:fixed;top:-4vh;z-index:1;pointer-events:none;animation:seasonFall linear infinite;opacity:.7}
@keyframes seasonFall{to{transform:translateY(110vh) rotate(240deg)}}
body.season-xmas .eyebrow::before{background:#d23b3b}
body.season-paddy .eyebrow::before{background:#169b62}
body.season-halloween .eyebrow::before{background:#ff6a2b}
.avail-dot.closed::before{background:var(--ink-faint);animation:none;box-shadow:none}

/* ── Parallax bands ── */
.plx-band{position:relative;min-height:340px;background-size:cover;background-position:center;background-attachment:fixed;display:flex;align-items:flex-end}
@media (hover:none){.plx-band{background-attachment:scroll}}
.plx-band .plx-cap{position:relative;width:100%;background:linear-gradient(transparent,rgba(7,13,24,.82));color:#fff;padding:4rem 1.5rem 1.6rem}
.plx-band .plx-cap .container{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.plx-band h2{color:#fff;font-size:1.4rem;margin:0}
.plx-band p{color:rgba(255,255,255,.8);font-size:.9rem;margin:0}

/* ── v6 header/footer upgrades ── */
.nav-clock{font-family:'Consolas',monospace;font-size:.8rem;font-weight:600;color:var(--ink-faint);background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:.4rem .7rem;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:1600px){.nav-clock{display:none}}
.footer-wave{line-height:0;margin-top:5rem}
.footer-wave svg{width:100%;height:70px;display:block}
.footer-live{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;justify-content:center;padding:0 0 2.4rem;font-size:.85rem;color:#93a3b8;font-variant-numeric:tabular-nums}
.footer-live span{display:inline-flex;align-items:center;gap:.5rem}
#fl-clock{font-family:'Consolas',monospace;font-weight:700;color:#fff;font-size:1rem}
/* consent banner */
#consent{position:fixed;bottom:1rem;left:1rem;transform:translateY(140%);width:min(440px,calc(100vw - 2rem));background:var(--bg-card);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:.85rem 1rem;z-index:97000;transition:transform .5s var(--ease)}
#consent.show{transform:translateY(0)}
#consent p{font-size:.8rem;color:var(--ink-soft);margin:0 0 .7rem;line-height:1.55}
#consent .c-actions{display:flex;gap:.6rem;flex-wrap:wrap}
#consent .c-actions .btn{padding:.55rem .9rem;font-size:.8rem}
@media(max-width:760px){#consent{bottom:76px}}
/* click-to-load embed gate */
.embed-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;background:var(--bg-soft);border-radius:inherit;text-align:center;padding:1rem;z-index:3}
.embed-gate p{font-size:.8rem;color:var(--ink-faint);max-width:280px;margin:0}

/* ── post share + navigation ── */
.share-row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;max-width:720px;margin:2.5rem auto 0;font-size:.85rem;color:var(--ink-faint)}
.share-row a,.share-row button{border:1px solid var(--border-strong);background:var(--bg-card);border-radius:99px;padding:.42rem 1rem;font-size:.82rem;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit;transition:border-color .2s,color .2s}
.share-row a:hover,.share-row button:hover{border-color:var(--brand);color:var(--brand)}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;max-width:720px;margin:1.4rem auto 0}
.post-nav a{display:block;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);padding:1rem 1.2rem;transition:border-color .2s,transform .2s}
.post-nav a:hover{border-color:var(--brand);transform:translateY(-2px)}
.post-nav span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:.3rem}
.post-nav b{font-size:.9rem;color:var(--ink);line-height:1.4}
@media(max-width:560px){.post-nav{grid-template-columns:1fr}}
/* ── lazy image fade-in ── */
img[loading="lazy"]{opacity:0;transition:opacity .6s ease}
img[loading="lazy"].ld,html.no-js img[loading="lazy"]{opacity:1}
@media(prefers-reduced-motion:reduce){img[loading="lazy"]{opacity:1;transition:none}}

/* v7: on-this-page TOC */
#post-toc{position:fixed;top:120px;right:max(1.2rem,calc((100vw - 1080px)/2 - 240px));width:200px;font-size:.82rem;z-index:50;animation:fadeUp .5s var(--ease) both .4s}
#post-toc strong{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:.6rem}
#post-toc a{display:block;padding:.32rem 0 .32rem .8rem;color:var(--ink-soft);border-left:2px solid var(--border);line-height:1.35;transition:all .2s}
#post-toc a:hover{color:var(--brand)}
#post-toc a.on{color:var(--brand);border-left-color:var(--brand);font-weight:600}
@media(max-width:1399px){#post-toc{display:none}}

/* ── v7.1 mobile bottom-of-screen tidy-up ── */
@media(max-width:760px){
  /* one thing per corner: chat bubble sits above the action bar, nothing else competes */
  #back-top{display:none!important}
  #ft-bubble{bottom:calc(66px + .7rem)!important;right:.9rem!important;width:48px!important;height:48px!important}
  #ft-chat{bottom:calc(66px + 4rem)!important;right:.7rem!important;left:.7rem!important;max-width:none!important;height:min(70dvh,520px)!important}
  /* cookie banner clears the bar */
  #consent{bottom:calc(66px + .6rem)!important;padding:1rem 1.1rem}
  #consent p{font-size:.83rem;line-height:1.5}
  #consent .c-actions .btn{flex:1;justify-content:center;font-size:.86rem}
  /* live strip: tidy two-line layout instead of ragged wrap */
  .footer-live{gap:.5rem 1.1rem;padding:0 1rem 1.8rem;font-size:.8rem}
  .footer-live span{white-space:nowrap}
  #fl-clock{font-size:.92rem}
  /* footer breathing room + centred bottom line */
  .footer-wave{margin-top:3rem}
  .footer-bottom{flex-direction:column;gap:.6rem;text-align:center;font-size:.78rem;line-height:1.6}
  footer.site-footer .footer-col h4{margin-bottom:.5rem}
  /* newsletter form stacks cleanly */
  footer.site-footer form[data-ajax]{flex-direction:column;align-items:stretch;gap:.9rem}
  footer.site-footer form[data-ajax] input[type=email]{width:100%;min-width:0}
  footer.site-footer form[data-ajax] .btn{width:100%;justify-content:center}
}
@media(max-width:400px){
  .mobile-action-bar a{font-size:.85rem;padding:.7rem .4rem}
  .footer-live{font-size:.75rem}
}

/* v8: narrow-screen containment for animated heroes */
html.hero-settled .hero-up{opacity:1!important;transform:none!important;animation:none!important}
html.hero-settled .status-panel{opacity:1!important;transform:none;animation:float 8s ease-in-out infinite}
html.hero-settled .home-hero .st-w>span{transform:none!important;animation:none!important}
@media(max-width:640px){
  .nav-right>.btn{display:none}
  .home-hero{min-height:auto!important;padding:calc(var(--nav-h) + 3rem) 0 4rem!important}
  .hero-grid,.hero-grid>div{min-width:0}
  .home-hero h1{font-size:clamp(2.05rem,10.5vw,2.7rem)!important;text-wrap:wrap;overflow-wrap:anywhere}
  .home-hero .type-line{font-size:1.05rem!important;min-height:3.2em!important;overflow-wrap:anywhere}
  .hero-actions{display:grid!important;grid-template-columns:1fr;width:100%}
  .hero-actions .btn{width:100%;white-space:normal}
  .hero-trust{display:grid!important;grid-template-columns:1fr;gap:.45rem!important}
}

/* ════════════════════════════════════════════════════════════
   v8 TECHNICAL LAYER — blueprint detail, measured rules,
   monospace data, engineered mobile sizing
   ════════════════════════════════════════════════════════════ */

/* ── Blueprint grid behind page heroes ── */
.page-hero,.home-hero{position:relative}
.page-hero::before,.home-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 20%,transparent 78%);
  opacity:.55}
.page-hero>*,.home-hero>*{position:relative;z-index:1}
@media(prefers-reduced-motion:no-preference){
  .page-hero::before{animation:gridIn 1.2s var(--ease) both}
  @keyframes gridIn{from{opacity:0;transform:translateY(-8px)}to{opacity:.55;transform:none}}
}

/* ── Section index numbers: pages read like a spec sheet ── */
main{counter-reset:sec}
main .section>.container>.section-head{counter-increment:sec}
main .section>.container>.section-head .eyebrow::after{
  content:' · ' counter(sec,decimal-leading-zero);opacity:.45;letter-spacing:.1em}

/* ── Measured rule: a section divider with tick marks ── */
.section+.section>.container>.section-head::before{
  content:'';display:block;width:100%;height:9px;margin-bottom:2.2rem;
  background-image:linear-gradient(90deg,var(--border-strong) 1px,transparent 1px);
  background-size:12px 100%;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 62%);
  mask-image:linear-gradient(90deg,#000,transparent 62%);
  opacity:.75}
.section-head.center::before{-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 45%,#000 55%,transparent)}

/* ── Monospace for data, numbers and small print ── */
.stat .num,.big-number,output,time,kbd,.price,.pkg-price-num,
#fl-clock,.nav-clock,.post-meta,.form-hint{font-family:var(--mono);font-feature-settings:'tnum' 1}
.post-meta,.form-hint{letter-spacing:-.01em}
.section-lead,.hero .lead{max-width:62ch}

/* ── Headings: tighter, more deliberate ── */
h1,h2,h3,h4{letter-spacing:-.028em;font-weight:600}
.section-title{font-weight:600;letter-spacing:-.03em}
.page-hero h1,.home-hero h1{letter-spacing:-.035em}

/* ── Cards: crisper, with a corner index mark ── */
.card{position:relative;overflow:hidden}
.card::after{content:'';position:absolute;top:0;right:0;width:14px;height:14px;
  border-left:1px solid var(--border);border-bottom:1px solid var(--border);
  opacity:0;transition:opacity .25s}
.card:hover::after{opacity:1}

/* ── Numbered process steps: mono, boxed, not round ── */
.step::before{border-radius:var(--r-sm)!important;font-family:var(--mono)!important;
  border:1px solid var(--border-strong);background:none!important;color:var(--brand)!important}

/* ── Badge row: technical chips ── */
.badge-row span{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;
  border-radius:var(--r-sm);padding:.4rem .7rem}

/* ── "Beyond websites" card on the homepage ── */
.pf-visual-alt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  background:linear-gradient(150deg,var(--brand-soft),transparent 70%),var(--bg-soft);font-size:initial!important}
.pf-count{font-family:var(--mono);font-size:2.6rem;font-weight:600;color:var(--brand);line-height:1;letter-spacing:-.04em}
.pf-count-lbl{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.pf-more{border-style:dashed}
.pf-more:hover{border-style:solid}

/* ── Inline icon spans (build-time emoji replacements) ── */
.ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.18em;
  width:1.05em;height:1.05em;flex-shrink:0;color:currentColor}
.ic svg{width:100%;height:100%;stroke-width:1.7}
.btn .ic{width:1em;height:1em;vertical-align:-.12em}
.co-ic{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;
  flex-shrink:0;margin-right:.6rem;vertical-align:-.35em;color:var(--brand)}
.co-ic svg{width:100%;height:100%}
.callout.warn .co-ic{color:var(--warn)}
.callout.danger .co-ic{color:var(--danger)}
.badge-row .ic,.tag .ic{width:.95em;height:.95em}
.status-row .sr-l .ic,.footer-live .ic{width:1em;height:1em;opacity:.85}
.blog-card .thumb .ic,.pf-visual .ic{width:2.2rem;height:2.2rem}
.eo-ic .ic{width:1.6rem;height:1.6rem}

/* ── Inline icons everywhere inherit weight ── */
.icon svg,.feature-icon svg{stroke-width:1.6}

/* ════════════ MOBILE: engineered sizing, nothing oversized ════════════ */
@media(max-width:760px){
  /* buttons sit at a comfortable tap size without becoming slabs */
  .btn{font-size:.88rem;padding:.62rem 1.05rem;min-height:42px}
  .btn-lg{font-size:.9rem;padding:.68rem 1.15rem;min-height:44px}
  .btn-sm{font-size:.8rem;padding:.42rem .8rem;min-height:36px}
  /* hero CTAs: side by side, not stretched full width */
  .hero-cta,.hero-actions,.cta-actions{gap:.6rem}
  .hero-cta .btn,.hero-actions .btn,.cta-actions .btn{flex:0 1 auto;width:auto}
  /* sticky bar: slimmer */
  .mobile-action-bar{padding:.45rem .7rem calc(.45rem + env(safe-area-inset-bottom));gap:.5rem}
  .mobile-action-bar a{padding:.6rem;font-size:.86rem;min-height:40px;border-radius:var(--r-sm)}
  body{padding-bottom:60px}
  #ft-bubble{bottom:calc(60px + .6rem)!important}
  #consent{bottom:calc(60px + .5rem)!important}
  /* blueprint grid finer on small screens */
  .page-hero::before,.home-hero::before{background-size:44px 44px;opacity:.4}
  /* tighter card padding */
  .card{padding:1.35rem}
  .card .icon{width:38px;height:38px;margin-bottom:.9rem}
  .card .icon svg{width:19px;height:19px}
  .section-head::before{margin-bottom:1.6rem}
}
@media(max-width:400px){
  .btn,.btn-lg{font-size:.85rem;padding:.6rem .9rem}
  .hero-cta .btn,.cta-actions .btn{flex:1 1 100%}
}

/* ════════════════════════════════════════════════════════════
   v9 FEATURE COMPONENTS — for replacing paragraphs with things
   people can scan, compare and interact with
   ════════════════════════════════════════════════════════════ */

/* ── Split feature row: text one side, visual the other, alternating ── */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:center;margin-bottom:4.5rem}
.feature-row:nth-child(even) .fr-text{order:2}
.feature-row .fr-text h3{font-size:1.45rem;margin-bottom:.7rem}
.feature-row .fr-text p{color:var(--ink-soft);font-size:1rem;margin-bottom:1.2rem}
.fr-visual{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-soft);
  min-height:280px;overflow:hidden;display:grid;place-items:center}
@media(max-width:860px){.feature-row{grid-template-columns:1fr;gap:1.8rem;margin-bottom:3rem}
  .feature-row:nth-child(even) .fr-text{order:0}.fr-visual{min-height:210px}}

/* ── Checklist chips: turns a paragraph of "we also do X" into scannable rows ── */
.check-list{display:grid;gap:.55rem;list-style:none;margin:1.2rem 0 0}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--ink-soft);line-height:1.55}
.check-list li::before{content:'';flex-shrink:0;width:18px;height:18px;margin-top:.15rem;border-radius:var(--r-sm);
  background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 30%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b4dff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center}

/* ── Spec table: dense facts, no prose ── */
.spec{width:100%;border-collapse:collapse;font-size:.93rem}
.spec td{padding:.75rem 0;border-bottom:1px solid var(--border);color:var(--ink-soft);vertical-align:top}
.spec td:first-child{width:38%;color:var(--ink);font-weight:500}
.spec td:last-child{font-family:var(--mono);font-size:.86rem;text-align:right;color:var(--ink)}
.spec tr:last-child td{border-bottom:none}

/* ── Metric strip: numbers that carry the message ── */
.metric-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.metric{background:var(--bg-card);padding:1.5rem 1.3rem}
.metric b{display:block;font-family:var(--mono);font-size:1.9rem;font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1}
.metric span{display:block;font-size:.85rem;color:var(--ink-faint);margin-top:.4rem;line-height:1.4}
@media(max-width:520px){.metric{padding:1.1rem}.metric b{font-size:1.5rem}}

/* ── Compare: "most places do X · here's what happens instead" ── */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.compare>div{border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}
.compare .cmp-bad{background:var(--bg-soft)}
.compare .cmp-good{border-color:color-mix(in srgb,var(--brand) 45%,transparent);background:var(--brand-soft)}
.compare h4{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:1rem}
.compare .cmp-good h4{color:var(--brand)}
.compare ul{list-style:none;display:grid;gap:.6rem}
.compare li{font-size:.92rem;color:var(--ink-soft);padding-left:1.3rem;position:relative;line-height:1.5}
.compare .cmp-bad li::before{content:'\2715';position:absolute;left:0;color:var(--ink-faint);font-size:.8rem;top:.15rem}
.compare .cmp-good li::before{content:'\2713';position:absolute;left:0;color:var(--brand);font-weight:700;font-size:.85rem}
@media(max-width:700px){.compare{grid-template-columns:1fr}}

/* ── Timeline: process without four paragraphs ── */
.timeline{position:relative;padding-left:2.2rem}
.timeline::before{content:'';position:absolute;left:7px;top:.4rem;bottom:.4rem;width:1px;background:var(--border-strong)}
.tl-item{position:relative;padding-bottom:1.8rem}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:'';position:absolute;left:-2.2rem;top:.3rem;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:2px solid var(--brand)}
.tl-item h4{font-size:1.02rem;margin-bottom:.3rem}
.tl-item p{font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.tl-item .tl-when{font-family:var(--mono);font-size:.75rem;color:var(--ink-faint);letter-spacing:.06em;
  text-transform:uppercase;display:block;margin-bottom:.25rem}

/* ── Pull quote / key line ── */
.pull{font-family:var(--display);font-size:clamp(1.2rem,2.4vw,1.6rem);font-weight:500;line-height:1.4;
  letter-spacing:-.02em;color:var(--ink);border-left:2px solid var(--brand);padding-left:1.4rem;margin:2.5rem 0}

/* ── Tabs: several topics in one screen instead of stacked prose ── */
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.6rem;border-bottom:1px solid var(--border);padding-bottom:.8rem}
.tab-btn{font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.45rem .9rem;border-radius:var(--r-sm);border:1px solid transparent;background:none;
  color:var(--ink-faint);cursor:pointer;transition:all .2s}
.tab-btn:hover{color:var(--ink)}
.tab-btn.on{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 35%,transparent);color:var(--brand)}
.tab-panel{display:none;animation:fadeUp .35s var(--ease) both}
.tab-panel.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Terminal / code block: technical proof ── */
.term{background:#0a0d12;border:1px solid rgba(150,166,190,.18);border-radius:var(--r-lg);overflow:hidden;
  font-family:var(--mono);font-size:.84rem;line-height:1.75}
.term-bar{display:flex;gap:6px;padding:.7rem .95rem;border-bottom:1px solid rgba(150,166,190,.14);background:#0d1117}
.term-bar i{width:10px;height:10px;border-radius:50%;display:block}
.term-body{padding:1.1rem 1.2rem;color:#9ba6b6;overflow-x:auto}
.term-body .l{display:block;white-space:pre}
.term-body .c{color:#8b96a6}
.term-body .g{color:#3ddc97}
.term-body .b{color:#6b8dff}

/* ── Live hero panel: real movement ── */
.status-row .sr-v{transition:color .3s}
.sr-tick{display:inline-block;animation:tickPulse 2.4s var(--ease) infinite}
@keyframes tickPulse{0%,100%{opacity:1}50%{opacity:.45}}
.status-panel{position:relative}
.status-panel::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--brand),transparent);opacity:.7;
  animation:scanline 3.6s linear infinite}
@keyframes scanline{0%{transform:translateY(0);opacity:0}10%{opacity:.7}90%{opacity:.7}100%{transform:translateY(260px);opacity:0}}
@media(prefers-reduced-motion:reduce){.status-panel::after,.sr-tick{animation:none}}

/* ── Section that breaks the grid: full-bleed dark band ── */
.band{background:var(--bg-deep);color:#e9edf3;padding:4.5rem 0;position:relative;overflow:hidden}
.band h2,.band h3{color:#fff}
.band p{color:rgba(233,237,243,.7)}
.band .metric{background:rgba(255,255,255,.03)}
.band .metric b{color:#fff}
.band .metric span{color:rgba(233,237,243,.55)}
.band .metric-strip{background:rgba(150,166,190,.16);border-color:rgba(150,166,190,.16)}
@media(max-width:760px){.band{padding:3.2rem 0}}

/* ════════════════════════════════════════════════════════════
   v10 RESPONSIVE SAFETY NET — catches inline styles that would
   otherwise overflow a phone. !important is deliberate: it has
   to beat inline style attributes.
   ════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  /* any inline 3- or 4-column grid collapses to two */
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"]{
    grid-template-columns:1fr 1fr!important}
  /* two-column inline splits stack */
  [style*="grid-template-columns:1fr 1fr"],[style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.05fr"],[style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:2fr"],[style*="grid-template-columns:1fr 2fr"]{
    grid-template-columns:1fr!important}
  /* nothing may exceed the viewport */
  img,svg,video,iframe,table,pre,canvas{max-width:100%!important}
  .table-wrap,table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .spec{display:table;width:100%}
  /* long words and URLs break instead of pushing the page wide */
  h1,h2,h3,h4,p,li,td,a{overflow-wrap:anywhere;word-break:normal}
  /* inline fixed widths become fluid */
  [style*="width:420px"],[style*="width:400px"],[style*="width:440px"]{width:100%!important}
}
@media(max-width:460px){
  [style*="grid-template-columns:repeat(3"],[style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],[style*="grid-template-columns: repeat(4"]{
    grid-template-columns:1fr!important}
  .metric-strip{grid-template-columns:1fr 1fr!important}
}
/* tablet: three columns is usually one too many */
@media(min-width:761px) and (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .px-grid{grid-template-columns:repeat(2,1fr)}
  .feature-row{gap:2.2rem}
}

/* ════════════════════════════════════════════════════════════
   v11 ICON SIZING — icons carry width/height:1em from the build,
   so they scale with text. These rules set the intended size per
   slot; nothing can inflate to fill its container any more.
   ════════════════════════════════════════════════════════════ */
.fi{flex-shrink:0}
/* live monitor footnote */
.panel-note{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-faint);
  text-align:center;padding:.5rem 1rem 0;margin:0;opacity:.75}
#spark{width:100%;height:44px;display:block;padding:0 1.2rem}
/* card + feature icons */
.card .icon .fi,.card .icon svg{width:21px;height:21px}
/* blog thumbnails */
.blog-card .thumb{font-size:1rem}
.blog-card .thumb .fi,.blog-card .thumb svg{width:42px;height:42px;color:#fff}
/* portfolio / image placeholders */
.pf-visual{font-size:1rem}
.pf-visual>.fi,.pf-visual>svg,.pf-visual>.ic>svg{width:44px;height:44px;color:var(--brand);opacity:.9}
.img-slot{font-size:1rem}
.img-slot>.fi,.img-slot>svg,.img-slot>.ic>svg{width:52px;height:52px;color:var(--brand);opacity:.55}
/* estimator options, status rows, small chrome */
.eo-ic .fi,.eo-ic svg{width:24px;height:24px}
.status-row .fi,.footer-live .fi,.badge-row .fi,.tag .fi{width:1em;height:1em;opacity:.9}
.scroll-hint .fi,.mini-route .fi{width:15px;height:15px}
/* inline icons inside running text */
.ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.16em;
  width:1.05em;height:1.05em;max-width:1.4rem;max-height:1.4rem;flex-shrink:0;color:currentColor}
.ic>.fi,.ic>svg{width:100%;height:100%}
.co-ic{display:inline-flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;
  flex-shrink:0;margin-right:.55rem;vertical-align:-.3em;color:var(--brand)}
.co-ic>.fi,.co-ic>svg{width:100%;height:100%}
.callout.warn .co-ic{color:var(--warn)}
.callout.danger .co-ic{color:var(--danger)}
/* absolute ceiling — an icon can never exceed this anywhere on the site */
main .fi,footer .fi{max-width:56px;max-height:56px}
.btn .fi{width:1em;height:1em}
/* pricing / plan cards: never let an icon dominate the price */
.price-card .fi,.plan-price .fi,.pkg-price .fi,.price-table .fi{width:1em;height:1em;max-width:1.2em;max-height:1.2em}

/* ════════════════════════════════════════════════════════════
   v12 FINAL ICON + OVERFLOW GUARDS
   Descendant selectors (not child) so an icon is sized no matter
   how it is wrapped. !important beats inline and wrapper styles.
   ════════════════════════════════════════════════════════════ */
.pf-visual .ic,.pf-visual .fi,.pf-visual>svg{width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important}
.blog-card .thumb .ic,.blog-card .thumb .fi,.blog-card .thumb>svg{width:42px!important;height:42px!important;max-width:42px!important;max-height:42px!important}
.img-slot .ic,.img-slot .fi,.img-slot>svg{width:52px!important;height:52px!important;max-width:52px!important;max-height:52px!important}
.eo-ic .ic,.eo-ic .fi{width:24px!important;height:24px!important}
/* running text: an icon never exceeds its line */
p .ic,li .ic,td .ic,span.sr-l .ic,.badge-row .ic,.tag .ic,.btn .ic,.footer-live .ic,.post-meta .ic{
  width:1.05em!important;height:1.05em!important;max-width:1.4rem!important;max-height:1.4rem!important}
.callout .co-ic{width:1.3em!important;height:1.3em!important;max-width:1.6rem!important;max-height:1.6rem!important}

/* decorative background orbs must never widen the page */
.fx-orbs{overflow:hidden;pointer-events:none}
@media(max-width:760px){
  .orb{max-width:60vw!important;max-height:60vw!important;filter:blur(50px)}
  .orb.o2,.orb.o3{right:auto!important;left:-10vw!important}
}
html,body{overflow-x:clip}

/* ── v13 TAP TARGETS — every control comfortable on a phone ── */
.px-chip,.filter-btn,.tab-btn{min-height:38px;display:inline-flex;align-items:center}
.px-toggle{min-height:40px}
.season-ribbon .sr-x{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.share-row a,.share-row button{min-height:36px;display:inline-flex;align-items:center}

/* ── testimonials: real quotes only; add more as they come in ── */
.testimonials{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem}
.testimonial{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.8rem 1.8rem 1.5rem}
.testimonial::before{content:'\201C';position:absolute;top:.4rem;left:1.2rem;font-family:var(--display);font-size:4rem;line-height:1;color:var(--brand);opacity:.18}
.testimonial p{font-size:1.02rem;line-height:1.65;color:var(--ink);margin:0 0 1.1rem;position:relative}
.testimonial footer{display:flex;align-items:center;gap:.8rem;font-size:.86rem;color:var(--ink-faint)}
.testimonial footer b{display:block;color:var(--ink);font-weight:600;font-size:.9rem}
.testimonial .stars{font-family:var(--mono);color:var(--warn);letter-spacing:.1em;font-size:.8rem;margin-bottom:.7rem}
.testimonial-cta{border:1px dashed var(--border-strong);border-radius:var(--r-lg);padding:1.8rem;display:flex;flex-direction:column;justify-content:center;gap:.6rem;background:var(--bg-soft)}

/* ════════════════════════════════════════════════════════════
   v14 WORKSHOP LAYER — the site stops looking like a template.
   Paper background with grain, ink lines, hard offset shadows
   (print, not glass), orange marker highlights instead of
   gradient text, hand-written annotations, a real face.
   Everything here overrides what came before; tokens live in :root.
   ════════════════════════════════════════════════════════════ */

/* ── Paper grain on the page itself ── */
body{background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.section.soft{background-color:var(--bg-soft);background-image:inherit}
::selection{background:var(--marker);color:var(--ink)}

/* ── The AI tells, removed: glows, orbs, gradient text, cursor halo ── */
:root:not([data-theme="dark"]) .orb,:root:not([data-theme="dark"]) #cursor-glow{display:none!important}
:root:not([data-theme="dark"]) .card::before,:root:not([data-theme="dark"]) .price-card::before{display:none}
.page-hero{background:var(--bg)}
.page-hero::before,.home-hero::before{opacity:.8;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px)}
#scroll-progress{background:var(--pop);box-shadow:none;border-radius:0;height:3px}

/* ── Marker highlight: replaces every gradient heading ── */
.grad,.grad .st-w>span,.st-w>span.stg{-webkit-background-clip:border-box;background-clip:border-box;color:inherit;animation:none}
.grad{background-image:linear-gradient(100deg,transparent .6%,var(--marker) 1.2%,var(--marker) 98.8%,transparent 99.4%);background-repeat:no-repeat;background-size:100% .42em;background-position:0 88%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em}
@media(prefers-reduced-motion:no-preference){
  .grad{animation:markerIn .9s var(--ease) .55s both}
  @keyframes markerIn{from{background-size:0 .42em}to{background-size:100% .42em}}
}
.band .grad,.cta-band .grad,.ai-hero .grad{color:#fff}

/* ── Type: headings heavier and tighter, eyebrow becomes an orange chip ── */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.035em}
.section-title{font-weight:700;font-size:clamp(1.8rem,3.6vw,2.7rem);line-height:1.08}
.page-hero h1{font-size:clamp(2.3rem,5vw,3.6rem);font-weight:700;letter-spacing:-.04em}
.eyebrow{color:var(--ink);font-weight:600;gap:.6rem;display:flex;width:max-content;max-width:100%}
.eyebrow::before{content:'';width:10px;height:10px;background:var(--pop);border:1.5px solid var(--line);border-radius:1px;opacity:1;flex-shrink:0}
.band .eyebrow,.cta-band .eyebrow,.ai-hero .eyebrow{color:#e9edf3}
.band .eyebrow::before,.cta-band .eyebrow::before,.ai-hero .eyebrow::before{border-color:#e9edf3}
main .section>.container>.section-head .eyebrow::after{opacity:.6;color:var(--ink-faint)}
/* section heads read like an editorial page: left-aligned, not a centred template block */
.section-head.center{text-align:left;margin-left:0;margin-right:auto;max-width:720px}
.section-head.center .section-lead{margin-left:0!important;margin-right:0!important}
.section-head.center::before{-webkit-mask-image:linear-gradient(90deg,#000,transparent 62%);mask-image:linear-gradient(90deg,#000,transparent 62%)}
.section+.section>.container>.section-head::before{background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);opacity:.5}

/* ── Buttons: ink slabs with an orange offset, not glowing pills ── */
.btn{border-radius:var(--r-sm);font-weight:600;letter-spacing:0;border-width:1.5px}
.btn-primary{background:var(--ink);color:var(--bg);border-color:var(--line);box-shadow:3px 3px 0 var(--pop)}
.btn-primary:hover{background:var(--brand);color:#fff;border-color:var(--brand);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pop)}
.btn-primary:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--pop)}
[data-theme="dark"] .btn-primary{background:#e9edf3;color:#0a0c11;border-color:#e9edf3}
[data-theme="dark"] .btn-primary:hover{background:var(--brand);color:#06101f;border-color:var(--brand)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--line);transform:none}
.btn-soft{background:var(--pop-soft);color:var(--ink);border-color:transparent}
.btn-soft:hover{background:var(--pop);color:#0d1117;border-color:var(--line);transform:none}
.btn-white{background:#fffcf5;color:#0d1117;border-color:#0d1117;box-shadow:3px 3px 0 var(--pop)}
.btn-white:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pop)}
.cta-band .btn-ghost{background:transparent}
.cta-band .btn-ghost:hover{background:#fffcf5;color:#0d1117!important;border-color:#fffcf5!important}
.mobile-action-bar .mab-call{background:var(--ink);color:var(--bg);border:1.5px solid var(--line)}
.mobile-action-bar .mab-quote{border:1.5px solid var(--line);background:var(--pop-soft)}

/* ── Cards: printed, not floating. Ink border, hard shadow, lift on hover ── */
.card,.price-card,.step,.testimonial,.accordion,.status-panel,.metric-strip,.compare>div,.px,.post-nav a,.testimonial-cta,.legal-toc,.dropdown-menu,#consent,.cmdk-box,.blog-card,.fr-visual,.img-slot,.pf-visual,.term,.ba-wrap,.price-table,.stack{border:1.5px solid var(--line)}
.card,.price-card,.testimonial,.status-panel,.px,.term,.dropdown-menu,#consent,.cmdk-box,.compare .cmp-good{box-shadow:var(--hard)}
.card,.price-card,.step,.testimonial,.accordion,.metric-strip,.compare>div,.px,.post-nav a,.testimonial-cta,.blog-card,.fr-visual,.img-slot,.pf-visual,.price-table{border-radius:var(--r-md)}
.card{overflow:visible}
.card:hover,.price-card:hover,.px:hover,.post-nav a:hover{transform:translate(-2px,-2px);box-shadow:var(--hard-hover);border-color:var(--line)}
.card::after{display:none}
.card .icon{width:44px;height:44px;border:1.5px solid var(--line);background:var(--pop-soft);color:var(--ink);border-radius:var(--r-sm);box-shadow:2px 2px 0 var(--line)}
.card:hover .icon{background:var(--pop);border-color:var(--line);color:#0d1117}
.card h3{font-weight:700}
.card .card-link{color:var(--ink);font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.card .card-link .arr{color:var(--pop)}
.price-card.featured{border-color:var(--line);box-shadow:var(--hard-hover)}
.price-card .plan-badge{background:var(--pop);color:#0d1117;border:1.5px solid var(--line);border-radius:var(--r-sm);font-family:var(--mono);letter-spacing:.1em}
.price-card ul li::before{color:var(--pop)}
.price-table th{background:var(--ink);color:var(--bg);font-family:var(--mono);letter-spacing:.1em}
.price-table td:last-child{color:var(--ink);font-family:var(--mono)}
.step::before{background:var(--pop)!important;color:#0d1117!important;border:1.5px solid var(--line);box-shadow:2px 2px 0 var(--line)}
.accordion{box-shadow:var(--hard)}
.acc-item+.acc-item{border-top:1.5px solid var(--line)}
.acc-q .acc-icon{border:1.5px solid var(--line);color:var(--ink);border-radius:var(--r-sm)}
.acc-item.open .acc-icon{background:var(--pop);border-color:var(--line);color:#0d1117}
.acc-q:hover{background:var(--pop-soft)}
.metric-strip{background:var(--line);gap:1.5px}
.compare .cmp-good{background:var(--pop-soft);border-color:var(--line)}
.compare .cmp-good h4{color:var(--ink)}
.compare .cmp-good li::before{color:var(--ink)}
.compare .cmp-bad{border-style:dashed;box-shadow:none}
.tag{color:var(--ink);background:none;border:1.5px solid var(--line);border-radius:var(--r-sm)}
main .px-chip.on,main .filter-btn.active,main .tab-btn.on{background:var(--ink);border-color:var(--line);color:var(--bg)}
main .px-chip,main .filter-btn,main .tab-btn{border:1.5px solid var(--border-strong);border-radius:var(--r-sm)}
.check-list li::before{border:1.5px solid var(--line);background-color:var(--pop-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1117' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E")}
[data-theme="dark"] .check-list li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e9edf3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E")}
.tl-item::before{border:2px solid var(--line);background:var(--pop);border-radius:2px}
.timeline::before{background:var(--line)}
.pull{border-left:3px solid var(--pop)}
.prose blockquote,.callout{border-left:3px solid var(--pop);background:var(--pop-soft);color:var(--ink)}
.form-input,select.form-input,textarea.form-input{border:1.5px solid var(--line);border-radius:var(--r-sm);background:var(--bg-card)}
.form-input:focus{border-color:var(--brand);box-shadow:3px 3px 0 var(--pop)}
.img-slot{background:var(--bg-soft)}
.blog-card .thumb{background:var(--ink);border-radius:var(--r-sm);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:18px 18px}
.blog-card .thumb .fi,.blog-card .thumb svg,.blog-card .thumb .ic{color:var(--pop)!important}
.pf-visual{background:var(--bg-soft)}
.pf-more{border-style:dashed;box-shadow:none}
.testimonial{transform:rotate(-.6deg)}
.testimonial:hover{transform:rotate(0)}
.testimonial::before{color:var(--pop);opacity:1;top:-.9rem;left:1rem;font-size:5.2rem;font-weight:700}
.testimonial .stars{color:var(--pop)}
.testimonial-cta{border-style:dashed;background:transparent;box-shadow:none}
.status-panel{background:var(--bg-card);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:var(--r-md)}
.status-head{background:var(--ink);color:var(--bg);border-bottom:1.5px solid var(--line)}
.status-head .sh-t{font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bg)}
.status-panel::after{background:linear-gradient(90deg,transparent,var(--pop),transparent)}
.status-row{border-bottom:1px solid var(--border)}
.status-row .sr-v{font-family:var(--mono);font-size:.84rem}
.dropdown-menu{border-radius:var(--r-sm);padding:.4rem}
.dropdown-menu a{border-radius:2px}
.dropdown-menu a:hover{background:var(--ink);color:var(--bg)}
nav.site-nav.scrolled{border-bottom:1.5px solid var(--line);box-shadow:none}
.theme-toggle,.nav-burger,.nav-cmdk,.nav-clock{border:1.5px solid var(--line);border-radius:var(--r-sm);background:transparent}
.theme-toggle:hover{background:var(--ink);color:var(--bg)}
.nav-links>li>a.active{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pop);text-decoration-thickness:2px;text-underline-offset:5px}
.nav-links>li>a:hover{background:var(--pop-soft);color:var(--ink)}
#back-top{border:1.5px solid var(--line);box-shadow:var(--hard);border-radius:var(--r-sm)}
.share-row a,.share-row button,.px-chip,.filter-btn{border-radius:var(--r-sm)}
.badge-row span{border:1.5px solid var(--line);color:var(--ink);background:var(--bg-card);box-shadow:2px 2px 0 var(--line)}
.badge-row span b{color:var(--pop)}
.mini-route i{background:var(--line);animation:none;opacity:.5}
.route-card::before{background:var(--pop)}

/* ── Stats: a ruled ledger, not four boxes ── */
.stats-row{gap:0;border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
.stat{background:none;border:none;border-right:1.5px solid var(--line);border-radius:0;padding:1.8rem 1.4rem;text-align:left;overflow:visible}
.stat:last-child{border-right:none}
.stat .num{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:600;color:var(--ink);letter-spacing:-.05em;display:inline-block;background-image:linear-gradient(var(--marker),var(--marker));background-repeat:no-repeat;background-size:100% .3em;background-position:0 92%;padding:0 .08em}
.stat .lbl{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem}
@media(max-width:760px){
  .stat:nth-child(2n){border-right:none}
  .stat:nth-child(-n+2){border-bottom:1.5px solid var(--line)}
  .stat{padding:1.2rem .9rem}
}

/* ── Trust strip: an ink stripe across the page ── */
.marquee{background:var(--ink);border:none;padding:.8rem 0;-webkit-mask-image:none;mask-image:none}
.marquee-item{color:var(--bg);font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;opacity:.95}
.marquee-item .fi,.marquee-item .ic{color:var(--pop)}
.marquee-track{gap:2.6rem}
.marquee-item::after{content:'';display:inline-block;width:6px;height:6px;background:var(--pop);transform:rotate(45deg);margin-left:2rem;flex-shrink:0}

/* ── Dark bands and the CTA: navy with a blueprint, framed in orange ── */
.band{background:var(--bg-deep)}
.cta-band{background:var(--bg-deep);border:1.5px solid var(--line);border-radius:var(--r-md);box-shadow:8px 8px 0 var(--pop)}
.cta-band::before{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:36px 36px;-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 80%)}
.cta-band h2{font-weight:700}
[data-theme="dark"] .cta-band{border-color:var(--line)}
footer.site-footer{border-top:1.5px solid var(--pop)}
.footer-wave{display:none}
footer.site-footer{margin-top:5rem}
.footer-socials a{border:1.5px solid rgba(147,163,184,.35);border-radius:var(--r-sm)}
.footer-socials a:hover{background:var(--pop);border-color:var(--pop);color:#0d1117;transform:none}

/* ── Hand-written annotations: used sparingly, always true ── */
.hand{font-family:var(--hand);font-size:1.28rem;font-weight:500;line-height:1.15;color:var(--ink-soft);letter-spacing:.005em;display:inline-block;transform:rotate(-2deg)}
.hand.pop{color:var(--pop)}
.hand-arrow{display:inline-block;width:2.2em;height:1.3em;vertical-align:middle;margin-left:.2em;color:inherit}
.hand-arrow svg{width:100%;height:100%;overflow:visible}
.hand-arrow path{stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;animation:handDraw 1.2s ease forwards 1.4s}
@keyframes handDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.hand-arrow path{stroke-dashoffset:0;animation:none}}

/* ── Photo frame: a real print, slightly askew, with tape ── */
.polaroid{position:relative;display:inline-block;background:var(--bg-card);border:1.5px solid var(--line);padding:.75rem .75rem 3rem;box-shadow:var(--hard);transform:rotate(-2.2deg);max-width:340px;width:100%;transition:transform .35s var(--ease),box-shadow .35s}
.polaroid:hover{transform:rotate(0) translate(-2px,-2px);box-shadow:var(--hard-hover)}
.polaroid img{width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;display:block;border:1px solid var(--border-strong);filter:saturate(.95)}
.polaroid::before{content:'';position:absolute;top:-14px;left:50%;width:96px;height:26px;transform:translateX(-50%) rotate(-3deg);background:var(--marker);border:1px solid rgba(13,17,23,.25);opacity:.9}
.polaroid figcaption{position:absolute;left:.85rem;right:.85rem;bottom:.85rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;gap:.5rem}
.polaroid figcaption span:last-child{color:var(--ink-faint)}
.polaroid-wrap{position:relative;padding:1.2rem 0 0 .6rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.3rem}
.polaroid-wrap .hand{align-self:flex-end;max-width:240px;text-align:right;margin-right:.4rem}
@media(max-width:860px){.polaroid-wrap{align-items:center;padding:1rem 0 .5rem}.polaroid{transform:rotate(-1.5deg)}.polaroid-wrap .hand{align-self:center;text-align:center;margin:0}}

/* ── Rotating stamp (desktop only) ── */
.hero-stamp{position:absolute;right:max(1.5rem,calc((100vw - var(--container))/2 + 1.5rem));bottom:2.4rem;width:124px;height:124px;z-index:3;display:none}
@media(min-width:1180px){.hero-stamp{display:block}}
.hero-stamp svg.ring{position:absolute;inset:0;width:100%;height:100%;animation:stampSpin 26s linear infinite}
.hero-stamp svg.ring text{font-family:var(--mono);font-size:8.2px;font-weight:600;letter-spacing:.16em;fill:var(--ink);text-transform:uppercase}
.hero-stamp .stamp-core{position:absolute;inset:34px;border:1.5px solid var(--line);border-radius:50%;background:var(--bg-card);display:grid;place-items:center;box-shadow:2px 2px 0 var(--line)}
.hero-stamp .stamp-core svg{width:30px;height:30px}
@keyframes stampSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-stamp svg.ring{animation:none}}

/* ── Geo line and prompt-style ticker in the hero ── */
.geo{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-faint);margin-top:1.4rem;display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.geo b{font-weight:500;color:var(--ink)}
.geo a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pop);text-underline-offset:3px}
.home-hero .type-line{font-family:var(--mono);font-size:clamp(.88rem,1.5vw,1.02rem);font-weight:500;color:var(--ink-soft);display:flex;align-items:baseline;gap:.5rem}
.home-hero .type-line::before{content:'>';color:var(--pop);font-weight:600}
.typewriter{border-right:none;padding-right:0;animation:none}
.typewriter::after{content:'';display:inline-block;width:.55em;height:1em;background:var(--pop);vertical-align:-.15em;margin-left:.2em;animation:caretBlink 1s step-end infinite}
@keyframes caretBlink{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.typewriter::after{animation:none}}
.home-hero h1{font-size:clamp(2.5rem,5.4vw,4.3rem);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.hero-word .w1,.hero-word .w2{font-weight:700}
.avail-dot{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.hand-cta{position:absolute;left:-7.2rem;top:-.1rem;white-space:nowrap;display:none}
@media(min-width:1320px){.hand-cta{display:inline-block}}
.hero-actions{position:relative}

/* ── Dark theme keeps the same bones ── */
[data-theme="dark"] body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 1 0 1 0 0 1 0 0 1 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="dark"] .card .icon{background:rgba(255,122,66,.12);color:#e9edf3;box-shadow:2px 2px 0 rgba(233,237,243,.25)}
[data-theme="dark"] .card:hover .icon{color:#0a0c11}
[data-theme="dark"] .status-head{background:#e9edf3;color:#0a0c11}
[data-theme="dark"] .status-head .sh-t{color:#0a0c11}
[data-theme="dark"] .marquee{background:#e9edf3}
[data-theme="dark"] .marquee-item{color:#0a0c11}
[data-theme="dark"] .price-table th{background:#e9edf3;color:#0a0c11}
[data-theme="dark"] .btn-ghost:hover{background:#e9edf3;color:#0a0c11}
[data-theme="dark"] .theme-toggle:hover{background:#e9edf3;color:#0a0c11}
[data-theme="dark"] .dropdown-menu a:hover{background:#e9edf3;color:#0a0c11}
[data-theme="dark"] main .px-chip.on,[data-theme="dark"] main .filter-btn.active,[data-theme="dark"] main .tab-btn.on{background:#e9edf3;color:#0a0c11}
[data-theme="dark"] .mobile-action-bar .mab-call{background:#e9edf3;color:#0a0c11}
[data-theme="dark"] .polaroid::before{opacity:.75}
[data-theme="dark"] .hero-stamp .stamp-core{box-shadow:2px 2px 0 rgba(233,237,243,.3)}

/* ── Mobile: shadows shrink, nothing rotates into the edge ── */
@media(max-width:760px){
  :root{--hard:3px 3px 0 var(--line);--hard-hover:3px 3px 0 var(--pop)}
  .cta-band{box-shadow:5px 5px 0 var(--pop)}
  .testimonial{transform:none}
  .hand{font-size:1.15rem}
  .btn-primary{box-shadow:2px 2px 0 var(--pop)}
  .geo{font-size:.68rem;gap:.6rem}
}

/* ── v14.1 fixes after first render ── */
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}
@media(max-height:1000px),(max-width:920px){.home-hero .scroll-hint{display:none!important}}
.route-card .route-icon{width:44px;height:44px;border:1.5px solid var(--line);background:var(--pop-soft);border-radius:var(--r-sm);box-shadow:2px 2px 0 var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:1rem;animation:none}
.route-card .route-icon .fi,.route-card .route-icon svg{width:21px;height:21px}
.route-card:hover .route-icon{background:var(--pop)}
.pf-tags span{border:1.5px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--ink);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.pf-count{color:var(--ink);background-image:linear-gradient(var(--marker),var(--marker));background-repeat:no-repeat;background-size:100% .3em;background-position:0 92%;padding:0 .1em}
.pf-visual-alt{background:var(--bg-soft)}
.badge-row span{font-size:.74rem}
.section-lead strong{color:var(--ink)}
.band .compare .cmp-good h4,.band .compare .cmp-good li::before{color:var(--pop)}
.band .compare li,.band .compare .cmp-bad li{color:rgba(233,237,243,.85)!important}
.band .compare .cmp-bad li::before{color:rgba(233,237,243,.55)}
.band .compare>div{border-color:rgba(233,237,243,.35)}
.band .compare .cmp-good{box-shadow:4px 4px 0 var(--pop)}

#consent .c-actions .btn{min-height:38px}

/* ════════════════════════════════════════════════════════════
   v15 PAGE CHARACTER — every page gets its own animated motif in
   the hero, richer icons, and per-category blog art. The motif is
   a framed "instrument panel": ink border, hard shadow, mono
   caption. Each page's own keyframes ship in its <style>.
   ════════════════════════════════════════════════════════════ */

/* legacy gradients retuned to the workshop palette (used by older page styles) */
:root{--grad:linear-gradient(135deg,#0d1117 0%,#1b4dff 135%);--grad2:linear-gradient(120deg,#0d1117,#1b4dff 55%,#ff6a2b 125%)}
[data-theme="dark"]{--grad:linear-gradient(135deg,#1b2433 0%,#6b8dff 135%);--grad2:linear-gradient(120deg,#e9edf3,#6b8dff 55%,#ff7a42 125%)}

/* ── Hero split: copy left, motif right ── */
.page-hero .hero-split{display:grid;grid-template-columns:1.06fr .94fr;gap:3.2rem;align-items:center}
.page-hero .hero-copy{min-width:0}
@media(max-width:900px){
  .page-hero .hero-split{grid-template-columns:1fr;gap:2rem}
  .page-hero .hero-motif{max-width:420px;width:100%}
}

/* ── The motif frame ── */
.motif{position:relative;margin:0;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-card);box-shadow:var(--hard);padding:1rem 1rem .6rem;overflow:hidden;
  max-width:440px;margin-left:auto}
@media(max-width:900px){.motif{margin:0 auto}}
.motif::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000,transparent 78%)}
.motif svg{position:relative;width:100%;height:auto;display:block;overflow:visible}
.motif-cap{position:relative;display:flex;justify-content:space-between;gap:.8rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.75rem;padding-top:.6rem;border-top:1px dashed var(--border-strong)}
.motif-cap b{font-weight:500;color:var(--pop)}
.motif-cap b::before{content:'●';margin-right:.4em;animation:capBlink 2.4s ease-in-out infinite}
@keyframes capBlink{50%{opacity:.25}}
/* shared motif ink */
.motif .ln{stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.motif .lf{stroke:var(--ink-faint);fill:none;stroke-width:1.2;stroke-linecap:round}
.motif .pop{stroke:var(--pop);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.motif .popf{fill:var(--pop);stroke:none}
.motif .brandf{fill:var(--brand);stroke:none}
.motif .inkf{fill:var(--ink);stroke:none}
.motif .softf{fill:var(--pop-soft);stroke:none}
.motif .paper{fill:var(--bg-soft);stroke:var(--border-strong);stroke-width:1.2}
.motif .mono{font-family:var(--mono);font-size:9px;fill:var(--ink-faint);letter-spacing:.06em}
.motif .mono.hi{fill:var(--ink)}
@media(prefers-reduced-motion:reduce){.motif *{animation:none!important;offset-distance:0!important}
  .motif-cap b::before{animation:none}}

/* ── Icons: drawn in on first view, tile reacts on hover ── */
.card .icon{position:relative;overflow:visible}
.card .icon::after{content:'';position:absolute;right:-4px;bottom:-4px;width:10px;height:10px;
  border:1.5px solid var(--line);background:var(--bg-card);border-radius:1px;transition:transform .25s var(--ease),background .25s}
.card:hover .icon::after{background:var(--pop);transform:translate(2px,2px)}
.card:hover .icon .fi{animation:iconNudge .5s var(--ease)}
@keyframes iconNudge{40%{transform:translateY(-3px) rotate(-4deg)}}
.fi.drawn *{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:fiDraw .9s var(--ease) forwards}
.fi.drawn *:nth-child(2){animation-delay:.12s}
.fi.drawn *:nth-child(3){animation-delay:.24s}
@keyframes fiDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.fi.drawn *{animation:none;stroke-dashoffset:0}}

/* ── Blog thumbnails: per-category plate instead of one gradient ── */
.blog-card .thumb{position:relative;background:var(--bg-deep);overflow:hidden;border:1.5px solid var(--line)}
.blog-card .thumb::before{content:'';position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:16px 16px}
.blog-card .thumb::after{content:'';position:absolute;left:-40%;top:0;width:35%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);animation:thumbScan 5.5s ease-in-out infinite}
@keyframes thumbScan{0%{left:-40%}55%,100%{left:110%}}
.blog-card[data-cat="gaming"] .thumb{background:#131024}
.blog-card[data-cat="gaming"] .thumb .fi{color:#c084fc!important}
.blog-card[data-cat="security"] .thumb{background:#1a1210}
.blog-card[data-cat="security"] .thumb .fi{color:#ff8a5c!important}
.blog-card[data-cat="business"] .thumb{background:#0c1626}
.blog-card[data-cat="business"] .thumb .fi{color:#6b8dff!important}
.blog-card:hover .thumb .fi{transform:scale(1.08);transition:transform .3s var(--ease)}
@media(prefers-reduced-motion:reduce){.blog-card .thumb::after{animation:none;display:none}}

/* ── Blog / news post headers get a running rule ── */
.post-motif{display:flex;align-items:center;gap:.8rem;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin:.4rem 0 1.4rem}
.post-motif i{flex:1;height:1.5px;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px);opacity:.55}
.post-motif b{color:var(--pop);font-weight:500}

.motif-band{padding:2.6rem 0 0}
.motif-band .motif{margin:0 auto}
.hero-motif-wide .motif,.motif-band .motif{max-width:520px}

/* ── v15: news cards, blog reading experience, remaining stragglers ── */
.news-card{border:1.5px solid var(--line)!important;border-radius:var(--r-md)!important;box-shadow:var(--hard)}
.news-card:hover{transform:translate(-2px,-2px)!important;box-shadow:var(--hard-hover)!important}
.news-card .nsrc{font-family:var(--mono);color:var(--ink);letter-spacing:.1em}
.news-card .nsrc time{font-family:var(--mono)}
.news-skel{border:1.5px dashed var(--border-strong)}
/* blog prose: an editorial drop cap and marked-up key lines */
.prose>p:first-of-type::first-letter{float:left;font-family:var(--display);font-weight:700;font-size:3.4rem;
  line-height:.82;margin:.12em .12em 0 0;color:var(--ink)}
.prose>p:first-of-type::after{content:'';display:table;clear:both}
.prose mark,.prose .mk{background:linear-gradient(transparent 62%,var(--marker) 62%);color:var(--ink);padding:0 .06em}
.post-meta{font-family:var(--mono);letter-spacing:.02em}
.tag{font-family:var(--mono)}
/* the blog index filter row matches the projects chips */
.filter-btn{font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
/* h1 flourishes take the accent, not the link blue */
.page-hero h1 .qflip i,.page-hero h1 svg{color:var(--pop)}
.page-hero h1 svg [fill="var(--brand)"]{fill:var(--pop)}
.page-hero h1 svg [stroke="var(--brand)"]{stroke:var(--pop)}
/* metric strips: borders on the cells so a half-empty last row can't show a black block */
.metric-strip{background:transparent!important;gap:0!important;border:none!important}
.metric{border:1.5px solid var(--line);margin:0 -1.5px -1.5px 0;background:var(--bg-card)}
.band .metric{background:rgba(255,255,255,.03);border-color:rgba(233,237,243,.3)}
/* v15 tap targets + containment for two page-local components */
.cs-copy,.style-pick,.px-chip,.filter-btn,.tab-btn,.vat-mode,.vat-rate{min-height:38px!important;display:inline-flex!important;align-items:center;justify-content:center}
.cs-copy{border:1.5px solid var(--line)!important;border-radius:var(--r-sm)!important;color:var(--ink)!important}
.style-pick{border-radius:var(--r-sm)!important}
@media(max-width:900px){.dev-phone{right:0!important;bottom:-6px!important;width:26%!important;transform:none!important}}

/* ── v16: pages with a dark hero keep a legible header over it ── */
body.hero-dark nav.site-nav:not(.scrolled){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.hero-dark nav.site-nav:not(.scrolled) .nav-logo{color:#f3f6fb}
body.hero-dark nav.site-nav:not(.scrolled) .nav-logo b{color:#8ba6ff}
body.hero-dark nav.site-nav:not(.scrolled) .nav-links>li>a{color:rgba(233,237,243,.82)}
body.hero-dark nav.site-nav:not(.scrolled) .nav-links>li>a:hover{color:#fff;background:rgba(255,255,255,.1)}
body.hero-dark nav.site-nav:not(.scrolled) .nav-links>li>a.active{color:#fff}
body.hero-dark nav.site-nav:not(.scrolled) .nav-phone{color:rgba(233,237,243,.8)}
body.hero-dark nav.site-nav:not(.scrolled) .theme-toggle,
body.hero-dark nav.site-nav:not(.scrolled) .nav-cmdk,
body.hero-dark nav.site-nav:not(.scrolled) .nav-clock{color:rgba(233,237,243,.8);border-color:rgba(233,237,243,.35);background:rgba(255,255,255,.06)}
body.hero-dark nav.site-nav:not(.scrolled) .nav-burger{border-color:rgba(233,237,243,.4);background:rgba(255,255,255,.06)}
body.hero-dark nav.site-nav:not(.scrolled) .nav-burger span{background:#e9edf3}
body.hero-dark nav.site-nav:not(.scrolled) .btn-primary{background:#f3f6fb;color:#0b0e16;border-color:#f3f6fb}
body.hero-dark nav.site-nav:not(.scrolled) .btn-primary:hover{background:var(--pop);color:#0b0e16;border-color:var(--pop)}
/* the marker highlight has to work on a dark hero too */
.hero-dark .page-hero .grad,.band .grad,.cta-band .grad{color:#fff}
.hero-dark .page-hero .grad{background-image:linear-gradient(100deg,transparent .6%,rgba(255,106,43,.85) 1.2%,rgba(255,106,43,.85) 98.8%,transparent 99.4%)}
.hero-dark .page-hero .eyebrow{color:#e9edf3}
.hero-dark .page-hero .badge-row span{background:rgba(255,255,255,.06);border-color:rgba(233,237,243,.3);color:#d7dde6;box-shadow:2px 2px 0 rgba(0,0,0,.4)}
.hero-dark .page-hero .btn-ghost{color:#e9edf3;border-color:rgba(233,237,243,.45)}
.hero-dark .page-hero .btn-ghost:hover{background:#e9edf3;color:#0b0e16}
.hero-dark .page-hero .motif{background:rgba(255,255,255,.04);border-color:rgba(233,237,243,.28);box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.hero-dark .page-hero .motif .ln{stroke:#d7dde6}.hero-dark .page-hero .motif .lf{stroke:rgba(215,221,230,.6)}
.hero-dark .page-hero .motif .inkf{fill:#d7dde6}.hero-dark .page-hero .motif .paper{fill:rgba(255,255,255,.05);stroke:rgba(215,221,230,.4)}
.hero-dark .page-hero .motif .mono{fill:rgba(215,221,230,.75)}.hero-dark .page-hero .motif .mono.hi{fill:#f3f6fb}
.hero-dark .page-hero .motif-cap{color:rgba(215,221,230,.7);border-top-color:rgba(215,221,230,.3)}

/* ── v16: parts market panel (repairs, estimator, builds) ── */
.parts-market{border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--bg-card);box-shadow:var(--hard);overflow:hidden}
.pm-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.2rem;background:var(--ink);color:var(--bg);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.pm-head b{color:var(--pop);font-weight:500}
.pm-body{padding:1.2rem 1.3rem 1.4rem}
.pm-row{display:grid;grid-template-columns:1fr auto 92px;gap:1rem;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--border)}
.pm-row:last-of-type{border-bottom:none}
.pm-row .pm-n{font-size:.93rem;color:var(--ink)}
.pm-row .pm-n small{display:block;font-size:.76rem;color:var(--ink-faint);margin-top:.15rem}
.pm-row .pm-v{font-family:var(--mono);font-size:.9rem;color:var(--ink);white-space:nowrap}
.pm-row .pm-v::before{content:'▲ ';color:var(--pop)}
.pm-row.down .pm-v::before{content:'▼ ';color:var(--success)}
.pm-bar{height:10px;border:1.5px solid var(--line);background:var(--bg-soft);overflow:hidden}
.pm-bar i{display:block;height:100%;background:var(--pop);width:0;animation:pmFill 1.4s var(--ease) forwards}
@keyframes pmFill{to{width:var(--w,60%)}}
.pm-note{font-family:var(--mono);font-size:.7rem;line-height:1.8;color:var(--ink-faint);margin:1rem 0 0;padding-top:.9rem;border-top:1px dashed var(--border-strong)}
.pm-note b{color:var(--ink);font-weight:500}
@media(prefers-reduced-motion:reduce){.pm-bar i{animation:none;width:var(--w,60%)}}

/* ── v16: blog author card + related posts ── */
.post-author{display:grid;grid-template-columns:104px 1fr;gap:1.4rem;align-items:start;max-width:720px;margin:2.4rem auto 0;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--bg-card);box-shadow:var(--hard);padding:1.4rem 1.5rem}
.post-author img{width:104px;height:124px;object-fit:cover;border:1.5px solid var(--line);border-radius:var(--r-sm);display:block}
.post-author .pa-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pop)}
.post-author b{display:block;font-family:var(--display);font-size:1.15rem;margin:.2rem 0 .5rem}
.post-author p{font-size:.92rem;color:var(--ink-soft);line-height:1.65;margin:0 0 1rem}
.pa-cta{display:flex;gap:.6rem;flex-wrap:wrap}
@media(max-width:560px){.post-author{grid-template-columns:1fr}.post-author img{width:88px;height:104px}}
.post-related{max-width:720px;margin:2.4rem auto 0}
.post-related .eyebrow{margin-bottom:1rem}
.pr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:700px){.pr-grid{grid-template-columns:1fr}}
.pr-card{display:block;border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--bg-card);padding:1rem 1.1rem;color:inherit;
  transition:transform .2s var(--ease),box-shadow .2s}
.pr-card:hover{transform:translate(-2px,-2px);box-shadow:var(--hard)}
.pr-card span{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.pr-card b{display:block;font-size:.95rem;line-height:1.45;margin-top:.35rem;font-weight:600}
/* pay-online buttons appear only when a Stripe link is configured */
.pay-online[hidden]{display:none!important}

/* ============================================================
   v17 — SEO / discovery layer
   Contextual "often booked together" strip + answer-first block.
   In-body contextual links are what search engines and AI
   summarisers actually weigh; nav links are boilerplate.
   ============================================================ */
.related-band{padding-top:0}
.rel-head{margin-bottom:1.4rem}
.rel-head h2{font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.2;margin:.35rem 0 0;max-width:22ch}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:820px){.rel-grid{grid-template-columns:1fr}}
.rel-card{position:relative;display:block;padding:1.15rem 2.4rem 1.15rem 1.2rem;color:inherit;text-decoration:none;
  border:1.5px solid var(--line);border-left:4px solid var(--pop);border-radius:var(--r-md);background:var(--bg-card);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-left-color .18s}
.rel-card:hover{transform:translate(-3px,-3px);box-shadow:var(--hard);border-left-color:var(--brand)}
.rel-card b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.01em}
.rel-card span{display:block;margin-top:.3rem;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.rel-card i{position:absolute;right:1.1rem;top:1.15rem;font-style:normal;font-size:1.1rem;color:var(--pop);
  transition:transform .18s var(--ease)}
.rel-card:hover i{transform:translateX(4px)}

/* Answer-first block: the 40–55 word direct answer that featured
   snippets and AI Overviews lift verbatim. Sits under the H1. */
.answer-first{position:relative;margin:1.6rem 0 0;padding:1.15rem 1.3rem 1.15rem 1.5rem;max-width:66ch;
  border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--bg-card);box-shadow:var(--hard)}
.answer-first::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:var(--r-md) 0 0 var(--r-md);
  background:linear-gradient(180deg,var(--pop),var(--brand))}
.answer-first .af-k{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pop);margin-bottom:.45rem}
.answer-first p{margin:0;font-size:1rem;line-height:1.65;color:var(--ink)}
.answer-first p+p{margin-top:.6rem}

/* ============================================================
   v18 — DEMO GALLERY
   The live-demos page. Cards lead with a drawn preview of the
   real page rather than an icon on a gradient, because the
   thing being sold is how it looks.
   ============================================================ */
.demo-group{font-family:var(--display);font-size:clamp(1.05rem,2vw,1.3rem);font-weight:600;
  letter-spacing:-.01em;margin:2.6rem 0 1.1rem;padding-bottom:.6rem;
  border-bottom:1.5px solid var(--line);display:flex;align-items:center;gap:.8rem}
.demo-group::after{content:'';flex:1;height:1px;
  background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px)}
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:1000px){.demo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.demo-grid{grid-template-columns:1fr}}
.demo-card{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-card);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
.demo-card:hover{transform:translate(-3px,-3px);box-shadow:var(--hard);border-color:var(--pop)}
.demo-card img{display:block;width:100%;height:auto;aspect-ratio:8/5;object-fit:cover;
  border-bottom:1.5px solid var(--line);background:var(--bg-soft)}
.demo-card .dc-body{padding:1.15rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1}
.demo-card .dc-tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pop);font-weight:600}
.demo-card h4{font-family:var(--display);font-size:1.12rem;font-weight:700;letter-spacing:-.015em;
  margin:.35rem 0 .45rem}
.demo-card p{font-size:.88rem;line-height:1.6;color:var(--ink-soft);flex:1;margin:0}
.demo-card .dc-feats{display:flex;flex-wrap:wrap;gap:.35rem;margin:.9rem 0 .9rem}
.demo-card .dc-feats i{font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.02em;
  padding:.2rem .55rem;border-radius:99px;border:1px solid var(--line);color:var(--ink-faint)}
.demo-card .dc-go{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--brand);display:inline-flex;align-items:center;gap:.4rem}
.demo-card .dc-go .arr{transition:transform .2s var(--ease)}
.demo-card:hover .dc-go .arr{transform:translate(3px,-3px)}
@media(prefers-reduced-motion:reduce){
  .demo-card,.demo-card .dc-go .arr{transition:none}
  .demo-card:hover{transform:none}
}

.demo-group em{font-style:normal;font-family:var(--mono);font-size:.7rem;font-weight:600;
  letter-spacing:.06em;color:var(--pop);background:var(--pop-soft);border-radius:99px;
  padding:.15rem .6rem;flex:none}

.demo-group + .px-note{margin:-.4rem 0 1.2rem;max-width:76ch;font-size:.92rem}
.demo-group + .px-note strong{color:var(--ink)}

/* ── site31: homepage says what and where, and gets shorter on a phone ── */
/* The hero repeated the logo that is already in the nav — 150px of the most
   valuable screen on a phone, spent saying "fen/tech" twice. */
@media(max-width:820px){.home-hero .hero-logo{display:none}}
.status-panel .panel-note a{color:inherit;font-weight:600}

/* Nine service cards stacked full-width were ~3,000px on a 375px phone. On
   small screens they become a two-column set of tiles; the description stays
   in the page for search and returns at tablet width. */
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr 1fr!important;gap:.7rem}
  .svc-grid .card{padding:1rem .9rem}
  .svc-grid .card p,.svc-grid .card .card-link{display:none}
  .svc-grid .card h3{font-size:1rem;margin:0;line-height:1.2}
  .svc-grid .card .icon{margin-bottom:.6rem}
  .home-blog .grid > :nth-child(n+3){display:none}
}

/* ── site31: contact form optional block ── */
.form-check{display:flex;gap:.6rem;align-items:flex-start;margin-top:1.2rem;font-size:.92rem;cursor:pointer;line-height:1.45}
.form-check input{width:1.15rem;height:1.15rem;margin-top:.12rem;accent-color:var(--brand,#1b4dff);flex:none}
.repair-fields{margin-top:1rem;padding:1rem 1.1rem;border:1.5px solid var(--line,#c9cfd8);border-radius:10px;background:var(--bg-soft,color-mix(in srgb,var(--brand) 4%,transparent))}
.repair-fields[hidden]{display:none}
.repair-fields .form-hint{font-family:inherit;letter-spacing:0}
.repair-note{margin:.9rem 0 0;font-size:.86rem;line-height:1.55;color:var(--ink-soft)}
.form-more{margin-top:1.1rem;border:1px dashed var(--line,#c9cfd8);border-radius:10px;padding:.2rem 1rem}
.form-more > summary{cursor:pointer;padding:.75rem 0;font-weight:600;font-size:.95rem;list-style:none;display:flex;align-items:center;gap:.5rem}
.form-more > summary::-webkit-details-marker{display:none}
.form-more > summary::before{content:'+';display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--brand-soft,color-mix(in srgb,var(--brand) 10%,transparent));color:var(--brand,#1b4dff);font-weight:700;transition:transform .2s}
.form-more[open] > summary::before{content:'−'}
.form-more > summary span{font-weight:400;opacity:.65}
.form-more[open]{padding-bottom:1rem}
.form-more .form-group:last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){.form-more > summary::before{transition:none}}
.booking-cta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:1rem 1.2rem;border:1px solid var(--line,#c9cfd8);border-radius:12px;margin:0 0 1.4rem;background:var(--paper-2,color-mix(in srgb,var(--brand) 4%,transparent))}
.booking-cta p{margin:0;flex:1 1 16rem;font-size:.95rem}

/* ── site31 diagnostic: contrast ──
   Orange #ff6a2b is fine as a fill but only 2.79:1 as small text on cream.
   Text uses the darker shade (5.36:1); the dark theme keeps the bright one,
   which is 6.68:1 there. */
html:not([data-theme="dark"]) .route-tile .rt-k{color:#b8420f}

/* Homepage drone band (site31 diagnostic). Was the 1400px original (206 KB) on
   every screen; phones and tablets now get the smaller copies. */
.plx-band.plx-tourism{background-image:url(images/projects/tourism-aerial-960w.webp)}
@media(min-width:1000px){.plx-band.plx-tourism{background-image:url(images/projects/tourism-aerial.webp)}}

/* ── Sites I can build (sector tiles) ── */
.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1000px){.sector-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sector-grid{grid-template-columns:1fr}}
.sector-card{display:flex;flex-direction:column;padding:1.2rem 1.15rem}
.sector-card h3{font-size:1rem;margin:.2rem 0 .35rem}
.sector-card p{font-size:.84rem;flex:1;margin:0 0 .7rem}
.sector-card .icon{margin-bottom:.6rem}
.public-note{max-width:860px;margin:2rem auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:760px){.public-note{grid-template-columns:1fr}}
.public-note div{border:1.5px dashed var(--line);border-radius:var(--r-md);padding:1rem 1.1rem;font-size:.86rem}
.public-note b{display:block;margin-bottom:.25rem;color:var(--ink)}

/* ── Website Refresh offer ── */
.refresh-offer{position:relative;display:grid;grid-template-columns:150px 1fr;gap:1.6rem;align-items:start;max-width:900px;margin:2.5rem auto 0;
  background:var(--bg-card);border:2px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--hard);padding:1.8rem 2rem}
.refresh-offer[hidden]{display:none}
.ro-stamp{width:140px;height:140px;border-radius:50%;background:#b8420f;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transform:rotate(-8deg);box-shadow:0 0 0 6px var(--bg-card),0 0 0 8px #b8420f;margin:.4rem auto 0}
.ro-stamp b{font-family:var(--display);font-size:2.3rem;line-height:1}
.ro-stamp span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-top:.2rem}
.ro-kicker{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#b8420f;font-weight:600}
[data-theme="dark"] .ro-kicker{color:var(--pop)}
.ro-body h3{font-size:1.35rem;margin:.3rem 0 .5rem}
.ro-list{list-style:none;padding:0;margin:.9rem 0;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.2rem;font-size:.88rem}
.ro-list li::before{content:"✓ ";color:#b8420f;font-weight:700}
.ro-small{font-size:.78rem;color:var(--ink-faint);margin:.2rem 0 1rem}
@media(max-width:700px){.refresh-offer{grid-template-columns:1fr;padding:1.5rem 1.3rem}.ro-list{grid-template-columns:1fr}.ro-stamp{width:110px;height:110px}.ro-stamp b{font-size:1.8rem}}

/* ════════════════════════════════════════════════════════════════
   v37 — October 2026 platform motion + typographic covers
   Everything here is progressive: browsers without a feature get the
   plain, finished layout. Motion respects prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

/* ── Typographic blog covers (generated per post, no stock art) ── */
.blog-card .thumb.cover{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;height:172px;
  padding:.95rem 1.05rem;text-align:left;color:#fff;background:var(--cv-bg,#0d1117);background-image:var(--cv-pat);
  background-size:var(--cv-size,14px 14px);border:1.5px solid var(--line);font-size:1rem;isolation:isolate}
.blog-card .thumb.cover .cv-no{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;opacity:.85;
  background:var(--cv-chip,rgba(0,0,0,.28));padding:.22rem .5rem;border-radius:3px}
.blog-card .thumb.cover .cv-t{font-family:var(--display);font-weight:700;font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:.98;
  letter-spacing:-.035em;max-width:92%;text-wrap:balance;color:var(--cv-ink,#fff);transition:translate .35s var(--ease)}
.blog-card .thumb.cover .cv-ic{position:absolute;right:.85rem;bottom:.8rem;color:var(--cv-ink,#fff);opacity:.9}
.blog-card .thumb.cover .cv-ic .ic,.blog-card .thumb.cover .cv-ic .fi,.blog-card .thumb.cover .cv-ic svg{width:26px!important;height:26px!important;
  max-width:26px!important;max-height:26px!important;color:currentColor!important}
.blog-card:hover .thumb.cover .cv-t{translate:4px 0}
.cv-it{--cv-bg:#1b4dff;--cv-pat:repeating-linear-gradient(135deg,rgba(255,255,255,.09) 0 2px,transparent 2px 11px);--cv-size:auto}
.cv-gaming{--cv-bg:#0d1117;--cv-ink:#fff;--cv-pat:repeating-linear-gradient(0deg,rgba(255,106,43,.14) 0 1px,transparent 1px 5px);--cv-size:auto;--cv-chip:rgba(255,106,43,.25)}
.cv-gaming .cv-t{color:#ff8a57!important}
.cv-web{--cv-bg:#ff6a2b;--cv-ink:#0d1117;--cv-pat:radial-gradient(rgba(13,17,23,.18) 1.2px,transparent 1.4px);--cv-size:12px 12px;--cv-chip:rgba(255,255,255,.35)}
.cv-web{color:#0d1117!important}
.cv-repairs{--cv-bg:#efe6d4;--cv-ink:#0d1117;--cv-pat:linear-gradient(rgba(13,17,23,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(13,17,23,.08) 1px,transparent 1px);--cv-size:16px 16px;--cv-chip:rgba(13,17,23,.08)}
.cv-repairs{color:#0d1117!important}
.cv-v1 .cv-t{align-self:flex-end;text-align:right}
.cv-v2 .cv-t{font-size:clamp(1.5rem,2.5vw,2.15rem)}
.cv-v3{--cv-size:20px 20px}
.cv-v3 .cv-t{font-style:italic;letter-spacing:-.045em}
/* colour shifts within a category so a run of same-topic posts doesn't look stamped out */
.cv-it.cv-v1{--cv-bg:#0d1117;--cv-ink:#8aa6ff;--cv-pat:repeating-linear-gradient(135deg,rgba(138,166,255,.10) 0 2px,transparent 2px 11px);--cv-chip:rgba(138,166,255,.18)}
.cv-it.cv-v2{--cv-bg:#efe6d4;--cv-ink:#1b4dff;--cv-pat:repeating-linear-gradient(135deg,color-mix(in srgb,var(--brand) 10%,transparent) 0 2px,transparent 2px 11px);--cv-chip:color-mix(in srgb,var(--brand) 10%,transparent)}
.cv-it.cv-v2{color:#0d1117!important}
.cv-it.cv-v2 .cv-no,.cv-gaming.cv-v2 .cv-no,.cv-repairs .cv-no,.cv-web .cv-no{color:#0d1117}
.cv-gaming.cv-v1{--cv-bg:#ff6a2b;--cv-ink:#0d1117;--cv-pat:repeating-linear-gradient(0deg,rgba(13,17,23,.12) 0 1px,transparent 1px 5px);--cv-chip:rgba(255,255,255,.3)}
.cv-gaming.cv-v1{color:#0d1117!important}
.cv-gaming.cv-v1 .cv-t{color:#0d1117!important}
.cv-gaming.cv-v2{--cv-bg:#efe6d4;--cv-ink:#0d1117;--cv-chip:rgba(255,106,43,.2)}
.cv-gaming.cv-v2{color:#0d1117!important}
.cv-gaming.cv-v2 .cv-t{color:#c2410c!important}
[data-theme="dark"] .cv-repairs{--cv-bg:#2a2620;--cv-ink:#f3ead8}
[data-theme="dark"] .cv-repairs{color:#f3ead8!important}

/* ── Handwritten margin notes (Caveat, already self-hosted) ── */
.hand-note{font-family:var(--hand);font-size:1.65rem;margin-top:.5rem;line-height:1.1;color:var(--pop);display:inline-flex;align-items:center;gap:.4rem;rotate:-3deg}
.hand-note svg{width:46px;height:26px;flex:none}

/* ── Process: a staircase you walk down, not four identical boxes ── */
@media (min-width:900px){
  .steps.trail{grid-template-columns:repeat(4,1fr);gap:2.4rem;align-items:start;padding-bottom:4.5rem}
  .steps.trail .step{overflow:visible}
  .steps.trail .step:nth-child(1){rotate:-.6deg}
  .steps.trail .step:nth-child(2){margin-top:2.4rem;rotate:.5deg}
  .steps.trail .step:nth-child(3){margin-top:4.8rem;rotate:-.4deg}
  .steps.trail .step:nth-child(4){margin-top:7.2rem;rotate:.7deg}
  .steps.trail .step:not(:last-child)::after{content:"";position:absolute;right:-2.35rem;top:1.6rem;width:2.3rem;height:4.6rem;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 54' fill='none' stroke='%23ff6a2b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4c10 3 18 12 17 26-.6 7-3 13-6 17'/%3E%3Cpath d='M9 42l5 6 5-7'/%3E%3C/svg%3E") center/contain no-repeat}
}

/* ── Scroll-driven motion (Chrome, Safari 26+, Firefox 159+) ── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* photos wipe up into place as they enter, a touch of zoom settling out */
    .img-slot>img{animation:v37wipe linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
    @keyframes v37wipe{from{clip-path:inset(18% 0 0 0);scale:1.08}to{clip-path:inset(0 0 0 0);scale:1}}
    /* staircase steps settle one after another as the section scrolls through */
    .steps.trail .step{animation:v37step linear both;animation-timeline:view();animation-range:entry 5% cover 30%}
    .steps.trail .step:nth-child(2){animation-range:entry 12% cover 36%}
    .steps.trail .step:nth-child(3){animation-range:entry 19% cover 42%}
    .steps.trail .step:nth-child(4){animation-range:entry 26% cover 48%}
    @keyframes v37step{from{opacity:0;translate:0 2.2rem}to{opacity:1;translate:0 0}}
    .steps.trail .step::after{animation:v37draw linear both;animation-timeline:view();animation-range:entry 30% cover 50%}
    @keyframes v37draw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
    /* covers lean in as you scroll past them */
    .blog-card .thumb.cover .cv-t{animation:v37cover linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
    @keyframes v37cover{from{opacity:.2;translate:0 .9rem}to{opacity:1;translate:0 0}}
    /* the hand-drawn arrows draw themselves */
    .hand-note path{stroke-dasharray:120;animation:v37ink linear both;animation-timeline:view();animation-range:entry 20% cover 45%}
    @keyframes v37ink{from{stroke-dashoffset:120}to{stroke-dashoffset:0}}
  }
  /* page-to-page: the post title flies from its card into the article */
  ::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.7,0,1)}
  /* entry animations for things that appear, no JS needed */
  #consent{transition:transform .5s var(--ease),opacity .5s}
  @starting-style{#consent{opacity:0}}
}

/* ── Typography polish ── */
p,li{text-wrap:pretty}


/* ═══ v38 COLOUR SCHEMES — Classic (no data-look) plus three alternatives ═══
   <html data-look="a|b|c"> is set in <head> before paint (default "a") and changed
   by the palette button in the nav (main.js lookSwitcher). Visitors' choice is kept
   in localStorage. To change the default, edit d="a" in build.py's <head> script. */
html[data-look="a"]{ /* Turf & Ember: forest green, ember orange, warm paper */
  --brand:#1f5c45; --brand-strong:#164735; --brand-soft:rgba(31,92,69,.08); --accent:#c98a1b;
  --grad:linear-gradient(120deg,#1f5c45 0%,#e8591a 100%);
  --bg:#f4efe4; --bg-soft:#e9e2d2; --bg-card:#fffdf7; --bg-deep:#13261e;
  --ink:#1b1a17; --ink-soft:#45403a; --ink-faint:#6a6359; --border:#d9cfbc; --border-strong:#a89c85;
  --line:#1b1a17; --pop:#e8591a; --pop-soft:rgba(232,89,26,.15); --marker:rgba(232,89,26,.5);
  --ring:0 0 0 3px rgba(31,92,69,.25);
  --display:'Bricolage Grotesque','Space Grotesk',sans-serif; --sans:'Instrument Sans','IBM Plex Sans',system-ui,sans-serif;
}
html[data-look="a"][data-theme="dark"]{
  --bg:#12110f; --bg-soft:#191714; --bg-card:#1e1b17; --bg-deep:#0b0a09;
  --ink:#efe9de; --ink-soft:#bdb4a5; --ink-faint:#958c7e; --border:rgba(239,233,222,.12); --border-strong:rgba(239,233,222,.24);
  --brand:#74c29a; --brand-strong:#94d6b2; --brand-soft:rgba(116,194,154,.12); --line:rgba(239,233,222,.32);
  --pop:#ff8a4c; --pop-soft:rgba(255,138,76,.14); --grad:linear-gradient(120deg,#74c29a 0%,#ff8a4c 100%);
  --ring:0 0 0 3px rgba(116,194,154,.3);
}
html[data-look="b"]{ /* Ink & Copper: navy, copper, editorial serif headings */
  --brand:#1d3557; --brand-strong:#142640; --brand-soft:rgba(29,53,87,.07); --accent:#2f6f8f;
  --grad:linear-gradient(120deg,#1d3557 0%,#c8642a 100%);
  --bg:#f7f3ec; --bg-soft:#ede6da; --bg-card:#fffdf9; --bg-deep:#111c2e;
  --ink:#16181d; --ink-soft:#3f444e; --ink-faint:#646a74; --border:#dad1c2; --border-strong:#aa9f8c;
  --line:#16181d; --pop:#c8642a; --pop-soft:rgba(200,100,42,.15); --marker:rgba(200,100,42,.48);
  --ring:0 0 0 3px rgba(29,53,87,.22);
  --display:'Fraunces',Georgia,serif; --sans:'Public Sans','IBM Plex Sans',system-ui,sans-serif;
}
html[data-look="b"] :is(h1,h2,h3){letter-spacing:-.01em;font-weight:650;font-variation-settings:'SOFT' 50,'WONK' 0}
html[data-look="b"][data-theme="dark"]{
  --bg:#0e131b; --bg-soft:#131a24; --bg-card:#18202c; --bg-deep:#090d13;
  --ink:#ebeef3; --ink-soft:#a9b3c2; --ink-faint:#8892a2; --border:rgba(170,185,205,.13); --border-strong:rgba(170,185,205,.26);
  --brand:#93b6ea; --brand-strong:#b1cbf1; --brand-soft:rgba(147,182,234,.12); --line:rgba(235,238,243,.32);
  --pop:#ef9257; --pop-soft:rgba(239,146,87,.14); --grad:linear-gradient(120deg,#93b6ea 0%,#ef9257 100%);
  --ring:0 0 0 3px rgba(147,182,234,.3);
}
html[data-look="c"]{ /* Oxblood & Mustard: deep red, mustard, sturdy grotesk */
  --brand:#7a2e3b; --brand-strong:#5f2430; --brand-soft:rgba(122,46,59,.07); --accent:#2f5d50;
  --grad:linear-gradient(120deg,#7a2e3b 0%,#d99a1e 100%);
  --bg:#f6f3ee; --bg-soft:#ebe5dc; --bg-card:#fffdfa; --bg-deep:#231418;
  --ink:#1a1617; --ink-soft:#463e40; --ink-faint:#6b6264; --border:#dcd2c6; --border-strong:#ab9f92;
  --line:#1a1617; --pop:#d99a1e; --pop-soft:rgba(217,154,30,.18); --marker:rgba(217,154,30,.55);
  --ring:0 0 0 3px rgba(122,46,59,.22);
  --display:'Schibsted Grotesk','Space Grotesk',sans-serif; --sans:'Figtree','IBM Plex Sans',system-ui,sans-serif;
}
html[data-look="c"][data-theme="dark"]{
  --bg:#141113; --bg-soft:#1b171a; --bg-card:#211c1f; --bg-deep:#0c0a0b;
  --ink:#f1ebe8; --ink-soft:#bfb3b0; --ink-faint:#978b88; --border:rgba(241,235,232,.12); --border-strong:rgba(241,235,232,.24);
  --brand:#e48d9b; --brand-strong:#eeaab4; --brand-soft:rgba(228,141,155,.12); --line:rgba(241,235,232,.32);
  --pop:#f2be4a; --pop-soft:rgba(242,190,74,.15); --grad:linear-gradient(120deg,#e48d9b 0%,#f2be4a 100%);
  --ring:0 0 0 3px rgba(228,141,155,.3);
}
/* logo mark follows the colour scheme */
.logo-mark .lm-box{fill:var(--brand-soft);stroke:var(--brand)}
.logo-mark .lm-up{stroke:var(--pop)}
.logo-mark .lm-down{stroke:var(--accent)}
.look-toggle{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-card);color:var(--ink-soft);cursor:pointer}
.look-toggle:hover{border-color:var(--brand);color:var(--brand)}
.look-toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:9999;
  background:var(--ink);color:var(--bg);font:600 .82rem/1 var(--sans);padding:.65rem 1rem;border-radius:999px;transition:opacity .25s,transform .25s}
.look-toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.look-toast{transition:none}}