/*
Theme Name: Sitecraft
Author: Sitecraft
Description: Lightweight base theme for small business websites.
Version: 122.7
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sitecraft
*/

/* ============================================================
   SELF-HOSTED FONTS — Montserrat only, latin subset
   (this theme's sites are English/French only, no need for the
   Cyrillic/Greek/Vietnamese subsets Google's own CSS ships by default).
   Downloaded once into /fonts, served from this site instead of pulling
   live from Google's CDN: removes an external request, and sidesteps the
   2022 Munich court ruling on Google Fonts + GDPR (loading fonts live
   sends visitor IPs to Google without consent). If you swap fonts for a
   client with existing branding, self-host that pairing the same way
   rather than reaching for Google's live CDN again. (Inter and Playfair
   Display were this theme's earlier default pairing, before No Sweat
   Builds moved to Montserrat, removed 11 Aug 2026 since nothing on the
   live site referenced them, dead weight in the stylesheet.)
   ============================================================ */
/* Font files are cache-busted via ?v=. BUMP THIS every time montserrat-*.woff2 bytes change on disk, or browsers keep serving stale cached font files forever since these URLs have no other versioning. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/montserrat-400.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/montserrat-500.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/montserrat-600.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/montserrat-700.woff2?v=fix1') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/montserrat-800.woff2?v=fix1') format('woff2'); }

/* ============================================================
   PER-CLIENT SETTINGS — the handful of things to change per site.
   Everything else below is structural and shouldn't need touching.
   ============================================================ */
:root {
  /* New Light Sites palette, taken directly from the real logo (navy + sunrise orange) */
  --brand: #1a2540;        /* primary brand colour */
  --brand-dark: #0d1424;   /* darker shade, hovers */
  --accent: #f5a623;       /* secondary accent colour */
  --accent-light: #f8c374;
  --paper: #f7f8fa;        /* page background */
  --cream: #ffffff;        /* card background */
  --ink: #1a2332;          /* body text */
  --muted: #5b6472;        /* secondary text */
  --shadow: 0 20px 50px rgba(26,37,64,0.14);
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;  /* headings */
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* body */
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.65; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3, .wordmark { font-family: var(--font-display); }
h1, h2, h3, .pull-quote { text-wrap: balance; }
.wrap { max-width: 1360px; margin: 0 auto; padding: 0 32px; }
section { padding: 90px 0; }
h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.78rem; font-weight: 700; color: var(--accent); margin-bottom: 12px; display: block; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head p { color: var(--muted); font-size: 1.05rem; margin-top: 14px; }

/* scroll-reveal, add class="reveal" (optionally reveal-delay-1/2/3) to any element */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.7,.3,1), transform 0.8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: 0.1s; }
.reveal-delay-2.is-visible { transition-delay: 0.2s; }
.reveal-delay-3.is-visible { transition-delay: 0.3s; }

/* ============================================================
   ANNOUNCEMENT BAR (optional, above the header)
   ============================================================ */
.announce-bar { background: var(--accent); }
.announce-bar a { display: block; color: var(--ink); font-weight: 700; font-size: 0.9rem; padding: 11px 32px; text-decoration: none; letter-spacing: 0.01em; }
.announce-bar:hover a { background: var(--accent-light); }

/* ============================================================
   MARQUEE BAR (scrolling ticker, alternative to the static
   announcement bar, above the header)
   ============================================================ */
.marquee-bar { background: var(--accent); overflow: hidden; }
.marquee-track { display: flex; width: max-content; text-decoration: none; animation: wdc-marquee 104s linear infinite; }
.marquee-bar:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group span { display: inline-block; padding: 12px 36px; color: var(--ink); font-weight: 700; font-size: 0.88rem; white-space: nowrap; border-right: 1px solid rgba(26,35,50,0.18); }
/* 5 real copies, not just one duplicate. Same scroll speed as a simple
   2-copy loop (26s per copy-width travelled), but it scrolls through 4 of
   the 5 copies before it has to snap back to the start, so that one reset
   moment happens a quarter as often, not on every single pass. */
@keyframes wdc-marquee { from { transform: translateX(0); } to { transform: translateX(-80%); } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { background: rgba(247,248,250,0.92); backdrop-filter: blur(8px); padding: 16px 0; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(26,37,64,0.12); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: center; position: relative; }
.header-right { display: flex; align-items: center; gap: 28px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.wordmark { font-size: 1.35rem; font-weight: 700; color: var(--brand); line-height: 1.1; text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; }
.wordmark span { display: block; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-top: 4px; }
/* 52px, not 44px: this theme's lockups carry a small strapline under the
   wordmark, and at 44px that line drops below the point where it reads as
   text at all. Sized against the nav's cap height so the two still balance. */
.wordmark-logo { max-height: 52px; width: auto; display: block; }
@media (max-width: 640px) { .wordmark-logo { max-height: 40px; } }
.main-nav { display: flex; align-items: center; gap: 28px; }
.main-nav a.nav-link { font-size: 0.92rem; font-weight: 500; text-decoration: none; }
.main-nav a.nav-link:hover { color: var(--brand); }
/* Hamburger. Hidden above 900px, where the full nav is on show. Below it this
   button is the ONLY way into the menu, so it is a real 44px tap target and it
   is never allowed to disappear: hiding a nav at a breakpoint with nothing in
   its place turns a multi-page site into a one-page site on a phone. */
.nav-toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle span { display: block; width: 24px; height: 2.5px; border-radius: 2px; background: var(--brand); transition: transform 0.25s ease, opacity 0.15s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.call-btn { background: var(--brand); color: #fff; font-weight: 600; padding: 11px 22px; border-radius: 30px; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 20px rgba(26,37,64,0.25); transition: background 0.2s ease, transform 0.2s ease; }
.call-btn:hover { background: var(--brand-dark); transform: translateY(-1px); }
.lang-toggle { background: transparent; border: 1.5px solid rgba(26,35,50,0.25); color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; padding: 9px 16px; border-radius: 30px; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; white-space: nowrap; }
.lang-toggle:hover { border-color: var(--brand); background: rgba(26,37,64,0.06); }

/* ============================================================
   HERO SPLIT (full-width, two purposeful halves, replaces the old
   full-bleed-photo-with-gradient-fade hero: that left text floating
   over a fading background instead of properly composed against it)
   ============================================================ */
.hero-split { display: flex; height: 600px; padding: 0; background: var(--brand); }
.hero-split-text { flex: 0.94 1 0; height: 600px; box-sizing: border-box; min-width: 320px; display: flex; flex-direction: column; justify-content: center; padding: 0 24px 0 6vw; }
.hero-split-text .hero-eyebrow { color: var(--accent-light); }
.hero-split-text h1 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); font-weight: 800; line-height: 1.12; color: #fff; margin-bottom: 20px; }
.hero-split-text h1 em { font-style: normal; color: var(--accent-light); }
.hero-split-text p.tag { color: rgba(255,255,255,0.85); font-size: 1.1rem; max-width: 100%; margin-bottom: 32px; }
.hero-split-text .cta { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-split-text .btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.hero-split-text .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.hero-split-image { flex: 1.06 1 0; height: 600px; overflow: hidden; }
.hero-split-image img { width: 100%; height: 600px; margin: 0; display: block; object-fit: cover; }
@media (max-width: 900px) {
  .hero-split { flex-direction: column; height: auto; }
  .hero-split-text { flex: none; height: auto; padding: 50px 24px; }
  .hero-split-image { order: -1; flex: none; height: 260px; }
  .hero-split-image img { height: 260px; }
}

/* ============================================================
   HERO (asymmetric, two-column) — still available for subpages
   that want the boxed style rather than a full-bleed banner.
   ============================================================ */
.hero { padding: 64px 0 100px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero-eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; font-weight: 700; color: var(--accent); margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 800; line-height: 1.08; color: var(--ink); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--brand); }
.hero p.tag { font-size: 1.15rem; color: var(--muted); max-width: 480px; margin-bottom: 34px; }
.hero .cta { display: flex; gap: 16px; flex-wrap: wrap; }
.btn-primary { background: var(--brand); color: #fff; font-weight: 600; padding: 16px 32px; border-radius: 30px; text-decoration: none; font-family: var(--font-body); transition: background 0.2s ease, transform 0.2s ease; box-shadow: 0 10px 24px rgba(26,37,64,0.3); display: inline-block; }
.btn-primary:hover { background: var(--brand-dark); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid rgba(26,35,50,0.25); color: var(--ink); padding: 16px 32px; border-radius: 30px; text-decoration: none; font-family: var(--font-body); font-weight: 600; transition: border-color 0.2s ease, background 0.2s ease; display: inline-block; }
.btn-ghost:hover { border-color: var(--brand); background: rgba(26,37,64,0.05); }
.hero-visual { position: relative; }
.hero-visual .blob { position: absolute; top: -28px; right: -28px; width: 92%; height: 92%; background: linear-gradient(135deg, var(--accent-light), var(--accent)); border-radius: 24px; z-index: 0; }
.hero-visual img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 20px; box-shadow: var(--shadow); }
.rating-float { position: absolute; z-index: 2; left: -24px; bottom: 32px; background: var(--cream); border-radius: 16px; padding: 16px 22px; box-shadow: 0 16px 34px rgba(26,35,50,0.22); display: flex; align-items: center; gap: 12px; }
.rating-float .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--brand); line-height: 1; }
.rating-float .stars { color: var(--accent); font-size: 0.9rem; letter-spacing: 1px; }
.rating-float .label { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

/* ============================================================
   PAGE HEAD (solid brand colour banner for non-homepage pages, text
   anchored left against a real page-width measure, not centred over
   a fading photo, matches the hero-split treatment)
   ============================================================ */
.page-head { background: var(--brand); padding: 70px 0; }
.page-head .hero-eyebrow { color: var(--accent-light); }
.page-head h1 { font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 800; line-height: 1.15; color: #fff; margin-bottom: 14px; max-width: 700px; }
.page-head p.tag { max-width: 620px; font-size: 1.1rem; color: rgba(255,255,255,0.85); }

/* ============================================================
   FAQ (plain, no JS accordion, always crawlable/visible)
   ============================================================ */
.faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.faq-item { border-bottom: 1px solid rgba(26,37,64,0.12); padding: 26px 0; }
.faq-item h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--brand); margin-bottom: 10px; }
.faq-item p { color: var(--muted); font-size: 0.98rem; }
@media (max-width: 800px) { .faq-list { grid-template-columns: 1fr; } }

/* ============================================================
   COMPARE (simple side-by-side comparison cards, pricing page)
   ============================================================ */
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.compare-card { background: var(--cream); border-radius: 16px; padding: 30px 26px; box-shadow: var(--shadow); }
.compare-card.highlight { background: var(--brand); color: #fff; transform: scale(1.03); }
.compare-card h3 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; }
.compare-card.highlight h3 { color: var(--accent-light); }
.compare-card .price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 800; margin-bottom: 14px; }
.compare-card ul { list-style: none; padding: 0; }
.compare-card li { padding: 7px 0; font-size: 0.95rem; }
.compare-card:not(.highlight) p, .compare-card:not(.highlight) li { color: var(--muted); }
.compare-card.highlight p, .compare-card.highlight li { color: rgba(255,255,255,0.9); }
@media (max-width: 900px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-card.highlight { transform: none; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about { background: var(--cream); }
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.about p { color: var(--muted); font-size: 1.05rem; margin-top: 16px; }
.about-photo-wrap { position: relative; }
.about-photo-wrap::before { content: ""; position: absolute; top: 20px; left: -20px; width: 100%; height: 100%; border: 3px solid var(--accent); border-radius: 16px; z-index: 0; }
.about-photo { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow); }
.stat-row { display: flex; gap: 40px; margin-top: 30px; flex-wrap: wrap; }
.stat b { font-family: var(--font-display); font-size: 1.9rem; color: var(--brand); display: block; }
.stat span { font-size: 0.85rem; color: var(--muted); }

/* ============================================================
   STEPS ("how it works" numbered process)
   ============================================================ */
.steps { background: var(--paper); }

/* Connected timeline row (numbered badges + a line running through them),
   sits above the card grid on desktop. Replaces four identical, disconnected
   boxes with a real sense of sequence. Falls back to a plain in-card number
   on mobile, where a horizontal line across stacked cards makes no sense. */
.steps-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 50px; }
.steps-track::before { content: ""; position: absolute; top: 50%; left: 12.5%; right: 12.5%; height: 2px; background: rgba(26,37,64,0.15); transform: translateY(-50%); }
.step-node { display: flex; justify-content: center; }
.step-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--accent-light); font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px rgba(26,37,64,0.3); border: 4px solid var(--paper); }

.steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 18px; }
.step-card { background: var(--cream); border-radius: 16px; padding: 30px 26px; box-shadow: var(--shadow); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(26,37,64,0.2); }
.step-card .step-num { display: none; }
.step-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.step-card p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) {
  .steps-track { display: none; }
  .steps-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .step-card .step-num { display: block; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 12px; }
}

/* ============================================================
   SERVICES GRID (what's included, broken into real components)
   ============================================================ */
.services { background: var(--cream); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 20px; }
.service-card { background: var(--paper); border-radius: 16px; padding: 32px 28px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card .ico { width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 20px; box-shadow: 0 10px 22px rgba(26,37,64,0.28); }
.service-card .ico svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.service-card p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .services-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TAG CLOUD ("loved for" / feature chips)
   ============================================================ */
/**
 * Deliberately no blanket text-align here any more. This class got reused as a
 * generic section wrapper for a lot more than tag clouds (FAQ lists, service
 * descriptions), and a blanket center-align was silently centering body text
 * and FAQ answers sitewide, which reads badly for anything longer than a
 * short chip or headline. Centre only the specific things that should be
 * centred (section-head intros, the tag cloud itself), explicitly, below.
 */
.loved-for { background: var(--paper); }
.loved-for .section-head { margin-left: auto; margin-right: auto; text-align: center; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; text-align: center; }
.tag-chip { background: var(--cream); border: 1px solid rgba(26,37,64,0.18); color: var(--brand); font-weight: 600; font-size: 0.95rem; padding: 11px 22px; border-radius: 30px; transition: transform 0.2s ease, background 0.2s ease; }
.tag-chip:hover { transform: translateY(-3px); background: var(--brand); color: #fff; }
.tag-note { margin-top: 24px; font-size: 0.85rem; color: var(--muted); font-style: italic; text-align: center; }
.faq-list { text-align: left; }

/* ============================================================
   BENTO GALLERY
   ============================================================ */
.gallery { background: var(--cream); }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 260px 260px; gap: 18px; margin-top: 20px; }
.bento a { grid-column: span 2; position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px rgba(26,35,50,0.14); }
.bento a:first-child { grid-row: span 2; grid-column: span 2; }
.bento img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.bento a:hover img { transform: scale(1.06); }
.bento .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 18px 16px; background: linear-gradient(0deg, rgba(20,15,10,0.78) 0%, rgba(20,15,10,0) 100%); color: #fff; }
.bento .cap b { font-family: var(--font-display); font-size: 1.15rem; display: block; }
.bento .cap span { font-size: 0.85rem; opacity: 0.85; }

/* ============================================================
   REVIEWS (pull-quote + carousel)
   ============================================================ */
.reviews { background: var(--brand); color: #fff; overflow: hidden; }
.reviews h2, .reviews .eyebrow { color: #fff; }
.reviews .eyebrow { color: var(--accent-light); }
.reviews .section-head p { color: rgba(255,255,255,0.75); }
.pull-quote { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.4; max-width: 780px; margin-bottom: 50px; }
.pull-quote span { color: var(--accent-light); }
.pull-quote .who { display: block; font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.7); margin-top: 16px; }
.carousel-wrap { position: relative; }
.carousel { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.review-card { scroll-snap-align: start; flex: 0 0 320px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 26px 24px; backdrop-filter: blur(4px); }
.review-card .stars { color: var(--accent-light); font-size: 0.95rem; margin-bottom: 12px; letter-spacing: 2px; }
.review-card p.quote { font-size: 1rem; margin-bottom: 16px; color: #fff; }
.review-card .who { font-size: 0.85rem; color: rgba(255,255,255,0.65); font-weight: 500; }
.carousel-controls { display: flex; gap: 12px; margin-top: 28px; }
.carousel-btn { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 1.1rem; cursor: pointer; transition: background 0.2s ease; }
.carousel-btn:hover { background: rgba(255,255,255,0.22); }

/* ============================================================
   BLOG CAROUSEL (reuses the .carousel scroll-snap mechanics from
   the reviews carousel, different card design for blog previews)
   ============================================================ */
.blog-section { background: var(--cream); }
.blog-carousel { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none; }
.blog-carousel::-webkit-scrollbar { display: none; }
.blog-card { scroll-snap-align: start; flex: 0 0 340px; background: var(--paper); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit; display: block; transition: transform 0.25s ease; }
.blog-card:hover { transform: translateY(-5px); }
/* WordPress core injects "html :where(img[class*=wp-image-]) { height: auto; }"
   on every page automatically, that class gets added to every image inserted
   via the media library. It never conflicted with this rule by specificity,
   it just quietly applied alongside it, because this rule never explicitly
   set height itself, only implied one via aspect-ratio. Explicit height in
   pixels, with !important, removes any ambiguity about which wins. */
.blog-card .blog-card-img { width: 100% !important; height: 230px !important; object-fit: cover; display: block; }
.blog-card .blog-card-body { padding: 22px 22px 26px; }
.blog-card .blog-card-cat { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 8px; display: block; }
.blog-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.blog-card p { color: var(--muted); font-size: 0.92rem; }
.blog-section .carousel-controls { margin-top: 24px; }
.blog-section .carousel-btn { background: var(--brand); color: #fff; border: none; }
.blog-section .carousel-btn:hover { background: var(--brand-dark); }

/* Static grid version for the full blog index (as opposed to the
   scrolling carousel used as a homepage teaser), same card design. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-grid .blog-card { flex: none; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.pagination { display: flex; gap: 10px; justify-content: center; }
.pagination a, .pagination span { padding: 10px 16px; border-radius: 8px; background: var(--cream); color: var(--brand); text-decoration: none; font-weight: 600; }
.pagination .current { background: var(--brand); color: #fff; }

/* ============================================================
   CTA BANNER
   ============================================================ */
/* Blog post banner image: capped at roughly two-thirds of the viewport height,
   not tied purely to page width via aspect-ratio, that let it grow taller than
   the screen itself on wide monitors since a 21:9 ratio at full page width can
   exceed most viewport heights outright. min() caps it at whichever constraint
   is smaller, viewport height or the 21:9 ratio, so narrow screens still get a
   sensible strip instead of a needlessly tall one. */
.post-hero { width: 100%; height: min(66vh, calc(100vw * 9 / 21)); overflow: hidden; background: var(--brand); }
@media (max-width: 640px) {
  .post-hero { height: 42vh; }
}
.cta-banner { background: var(--accent); text-align: center; padding: 64px 0; }
.cta-banner h2 { color: var(--ink); margin-bottom: 12px; }
.cta-banner p { color: rgba(26,35,50,0.75); margin-bottom: 28px; font-size: 1.05rem; }
.cta-banner .btn-primary { background: var(--ink); box-shadow: 0 10px 24px rgba(0,0,0,0.2); }
.cta-banner .btn-primary:hover { background: #000; }

/* ============================================================
   CONTACT (info card + form card)
   ============================================================ */
.contact-main { padding: 20px 0 90px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 50px; align-items: start; }
.info-card { background: var(--cream); border-radius: 18px; padding: 34px 30px; box-shadow: var(--shadow); }
.info-card h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 18px; color: var(--brand); }
.info-row { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.info-row .ico { width: 38px; height: 38px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem; }
.info-row a.phone { color: var(--brand); font-weight: 700; text-decoration: none; }
.info-row .muted-note { font-size: 0.85rem; color: var(--muted); }

/* Icon-led feature list: used on Pricing's "What's Included" instead of pill/tag-chip
   buttons, each item is a small gradient icon box (matches .service-card's icon treatment
   at a smaller scale) plus a label, so each line "tells its own story" rather than reading
   as a clickable button that goes nowhere. */
.feature-list { display: flex; flex-direction: column; gap: 18px; margin-top: 22px; }
.feature-item { display: flex; align-items: center; gap: 16px; }
.feature-item .ico { width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%); color: var(--accent-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 8px 18px rgba(26,37,64,0.24); }
.feature-item .ico svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.feature-item span { font-weight: 600; color: var(--ink); font-size: 1.02rem; }
.feature-list.grid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px 40px; max-width: 920px; margin-left: auto; margin-right: auto; }
/* Map: a static image (or plain fallback card if no screenshot supplied yet) linking out to
   Google Maps for directions, instead of a live embedded iframe. Almost nobody actually pans/zooms
   an embedded map on a small business contact page, they want directions, a link does that better
   anyway (opens their own maps app on mobile) at zero iframe weight and no API key. */
.map-card { display: block; margin-top: 22px; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); text-decoration: none; position: relative; }
.map-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.map-card.no-image { height: 220px; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.map-card .map-pin { font-size: 2rem; }
.map-card .map-label { font-family: var(--font-body); font-weight: 600; color: var(--brand); }
.map-card .map-cta { position: absolute; right: 14px; bottom: 14px; background: var(--brand); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 8px 16px; border-radius: 30px; }
.map-card.no-image .map-cta { position: static; margin-top: 4px; }

/* Social: a plain "Follow us" link/button, not a live embedded feed. A live Facebook feed pulls in
   Facebook's own SDK regardless of who embeds it, real weight for something almost nobody scrolls
   through on a contact page. If a client genuinely wants live posts shown, that's a deliberate
   upgrade decision (a proper cached server-side pull), not the default. */
.social-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; background: var(--cream); border: 1px solid rgba(26,37,64,0.18); border-radius: 30px; padding: 12px 22px; text-decoration: none; color: var(--brand); font-weight: 600; box-shadow: var(--shadow); }
.social-link:hover { background: var(--brand); color: #fff; }
.form-card { background: var(--brand); color: #fff; border-radius: 18px; padding: 44px 38px; box-shadow: var(--shadow); }
.form-card h3 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 8px; }
.form-card > p { color: rgba(255,255,255,0.75); margin-bottom: 30px; }

/* Plain HTML form fields (if not using Contact Form 7) */
.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: rgba(255,255,255,0.9); }
.form-row input, .form-row select, .form-row textarea { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); font-size: 0.98rem; }
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(255,255,255,0.45); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent-light); background: rgba(255,255,255,0.14); }
.form-row select option { color: #000; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.submit-btn { background: var(--accent); color: #2b1c00; font-weight: 700; padding: 15px 34px; border-radius: 30px; border: none; font-size: 1rem; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; font-family: var(--font-body); }
.submit-btn:hover { background: var(--accent-light); transform: translateY(-2px); }
.form-note { margin-top: 16px; font-size: 0.82rem; color: rgba(255,255,255,0.6); }

/* Contact Form 7 restyle, so CF7's default markup matches the theme instead of looking bare */
.form-card .wpcf7-form p { margin-bottom: 20px; }
.form-card .wpcf7-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; color: rgba(255,255,255,0.9); }
.form-card .wpcf7-form-control { width: 100%; padding: 13px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-family: var(--font-body); font-size: 0.98rem; }
.form-card .wpcf7-form-control:focus { outline: none; border-color: var(--accent-light); background: rgba(255,255,255,0.14); }
.form-card select.wpcf7-form-control option { color: #000; }
.form-card .wpcf7-submit { background: var(--accent); color: #2b1c00; font-weight: 700; padding: 15px 34px; border-radius: 30px; border: none; font-size: 1rem; cursor: pointer; font-family: var(--font-body); }
.form-card .wpcf7-submit:hover { background: var(--accent-light); }
.form-card .wpcf7-not-valid-tip { color: var(--accent-light); font-size: 0.8rem; margin-top: 4px; }
.form-card .wpcf7-response-output { border-radius: 10px; margin-top: 20px; font-size: 0.9rem; }

/* ============================================================
   BLOG POST BODY (prose styling for single.php)
   ============================================================ */
.blog-post-body h2 { font-size: 1.6rem; font-weight: 700; margin: 40px 0 16px; color: var(--ink); }
.blog-post-body h3 { font-size: 1.25rem; font-weight: 700; margin: 30px 0 12px; color: var(--brand); }
.blog-post-body p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 18px; }
.blog-post-body ul, .blog-post-body ol { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin: 0 0 18px 22px; }
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body a { color: var(--brand); font-weight: 600; }
.blog-post-body strong { color: var(--ink); }

/* ============================================================
   FOOTER + STICKY CTA
   ============================================================ */
.site-footer { padding: 70px 0 0; font-size: 0.9rem; color: rgba(255,255,255,0.65); background: var(--brand); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,0.12); text-align: left; }
.footer-col h4 { font-family: var(--font-display); color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 18px; }
.footer-col p { line-height: 1.6; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-col a:hover { color: var(--accent-light); }
/* The whitening filter is the fallback for sites that only supply one logo.
   A real dark-background variant (Customizer > Business Info) keeps its own
   colours, so `.is-dark-variant` opts out of the filter entirely. */
.footer-brand .wordmark-logo { max-height: 42px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand .wordmark-logo.is-dark-variant { filter: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 22px 0; font-size: 0.82rem; }
.footer-bottom .foot-links a { color: rgba(255,255,255,0.6); text-decoration: none; margin-right: 16px; }
.footer-bottom .foot-links a:hover { color: var(--accent-light); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }
.sticky-enquire { position: fixed; right: 22px; bottom: 22px; z-index: 60; background: var(--brand); color: #fff; padding: 14px 22px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 0.92rem; box-shadow: 0 14px 30px rgba(26,37,64,0.4); transition: transform 0.2s ease; }
.sticky-enquire:hover { transform: translateY(-3px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: 200px 200px 200px; }
  .bento a:first-child { grid-column: span 2; grid-row: span 1; }

  /* Mobile menu. This used to be `.main-nav a.nav-link { display: none; }` with
     nothing put in its place, which made every page except Home unreachable on a
     phone. The nav is now a drawer hung under the header and opened by
     .nav-toggle; it is closed by tapping a link, tapping outside it, or Escape. */
  .nav-toggle { display: flex; }
  .header-right { gap: 0; }
  .main-nav {
    position: absolute; top: calc(100% + 17px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border: 1px solid rgba(26,37,64,0.12); border-radius: 14px;
    box-shadow: 0 20px 44px rgba(26,37,64,0.22);
    padding: 8px; max-height: calc(100vh - 140px); overflow-y: auto;
    display: none;
  }
  .main-nav.is-open { display: flex; animation: wdc-nav-in 0.18s ease-out; }
  /* The header normally sits at z-index 50, below the cookie bar's 200. With the
     drawer open it has to win, or the bottom of the menu (FAQ, Blog, Contact on
     this site) is covered by the cookie bar on a first visit and can't be tapped. */
  body.wdc-nav-open .site-header { z-index: 300; }
  /* The bar above the header rides with it, otherwise the dimming stops in a hard
     line halfway up the screen. */
  body.wdc-nav-open .marquee-bar,
  body.wdc-nav-open .announce-bar { position: relative; z-index: 300; }
  body.wdc-nav-open { overflow: hidden; }
  body.wdc-nav-open::after { content: ""; position: fixed; inset: 0; z-index: 250; background: rgba(15,22,38,0.45); }
  .main-nav a.nav-link { display: block; padding: 15px 16px; font-size: 1rem; font-weight: 600; border-radius: 10px; }
  .main-nav a.nav-link + a.nav-link { border-top: 1px solid rgba(26,37,64,0.08); }
  .main-nav a.nav-link.is-current { color: var(--brand); background: rgba(26,37,64,0.05); }
}
@keyframes wdc-nav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .hero h1 { font-size: 2rem; }
}

/* ============================================================
   AD LANDING PAGE (template: page-landing.php)
   Stripped layout for paid traffic. Intentionally self-contained
   so changing the main site's header or footer can never quietly
   alter a page that ad spend is pointed at.
   ============================================================ */
.wdc-landing { background: var(--paper); }
.landing-bar { background: var(--brand); padding: 14px 0; }
.landing-bar .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.landing-bar .wordmark-logo { max-height: 40px; width:auto; display:block; filter: brightness(0) invert(1); }
.landing-bar .wordmark-logo.is-dark-variant { filter: none; }
.landing-wordmark { color:#fff; font-weight:800; font-size:1.2rem; }
.landing-price { color: var(--accent); font-weight:800; font-size:0.95rem; letter-spacing:0.04em; }

.landing-hero { padding: 56px 0 64px; }
.landing-hero-grid { display:grid; grid-template-columns: 1.05fr 0.95fr; gap:56px; align-items:start; }
.landing-eyebrow { color: var(--accent); font-weight:700; font-size:0.85rem; text-transform:uppercase; letter-spacing:0.18em; margin-bottom:14px; }
.landing-hero-text h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height:1.1; margin-bottom:20px; }
.landing-lead { font-size:1.08rem; line-height:1.6; color: var(--muted); margin-bottom:26px; }
.landing-points { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.landing-points li { position:relative; padding-left:34px; line-height:1.5; }
/* Tick drawn in CSS rather than an emoji: emoji render differently per OS and
   this page has to look identical to every visitor an ad sends. */
.landing-points li::before {
  content:''; position:absolute; left:0; top:4px; width:20px; height:20px; border-radius:50%;
  background: var(--accent);
}
.landing-points li::after {
  content:''; position:absolute; left:6px; top:10px; width:8px; height:4px;
  border-left:2px solid var(--brand); border-bottom:2px solid var(--brand);
  transform: rotate(-45deg);
}

.landing-form-card { background:#fff; border-radius:18px; padding:34px 32px; box-shadow: 0 18px 50px rgba(26,37,64,0.14); }
.landing-form-card h2 { font-size:1.5rem; margin-bottom:6px; }
.landing-form-sub { color: var(--muted); font-size:0.95rem; margin-bottom:22px; }
.landing-form-card label { display:block; font-weight:600; font-size:0.9rem; margin-bottom:14px; }
.landing-form-card input[type=text], .landing-form-card input[type=email],
.landing-form-card input[type=tel], .landing-form-card input[type=url],
.landing-form-card textarea {
  width:100%; margin-top:6px; padding:12px 14px; border:1px solid rgba(26,37,64,0.18);
  border-radius:10px; font-family:inherit; font-size:1rem; background:var(--paper);
}
/* Deliberately short. Two full-height textareas on a landing page make the
   form look like a chore before anyone has read a word of it. */
.landing-form-card textarea { min-height:64px; }
.landing-form-card p { margin:0; }
.landing-form-card input[type=submit] {
  width:100%; background:var(--accent); color:var(--brand); font-family:inherit;
  font-weight:800; font-size:1.05rem; border:0; border-radius:50px; padding:16px 24px; cursor:pointer;
}

.landing-trust { background: var(--brand); padding: 44px 0; text-align:center; }
.landing-quote { color:#fff; font-weight:700; font-size:1.25rem; text-wrap:balance; max-width:760px; margin:0 auto 14px; }
.landing-meta { color:rgba(255,255,255,0.62); font-size:0.85rem; }
.landing-meta a { color:rgba(255,255,255,0.62); }

@media (max-width: 900px) {
  .landing-hero-grid { grid-template-columns: 1fr; gap:36px; }
  .landing-hero { padding: 36px 0 44px; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   Only rendered when a Pixel ID is configured. Accept and Decline
   are given equal visual weight on purpose: a "Decline" styled as a
   faint link is exactly the dark pattern regulators single out.
   ============================================================ */
.wdc-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--brand); box-shadow: 0 -10px 30px rgba(0,0,0,0.18); }
.wdc-consent[hidden] { display: none; }
.wdc-consent-inner { max-width: 1360px; margin: 0 auto; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.wdc-consent p { color: rgba(255,255,255,0.86); font-size: 0.92rem; line-height: 1.5; margin: 0; max-width: 780px; }
.wdc-consent a { color: var(--accent); }
.wdc-consent-actions { display: flex; gap: 12px; flex-shrink: 0; }
.wdc-consent-btn { font-family: inherit; font-weight: 700; font-size: 0.92rem; padding: 12px 26px; border-radius: 40px; cursor: pointer; border: 1px solid rgba(255,255,255,0.35); }
.wdc-consent-no { background: transparent; color: #fff; }
.wdc-consent-yes { background: var(--accent); color: var(--brand); border-color: var(--accent); }
@media (max-width: 640px) {
  .wdc-consent-inner { padding: 16px 20px; gap: 14px; }
  .wdc-consent-actions { width: 100%; }
  .wdc-consent-btn { flex: 1; }
}

/* ============================================================
   AD LANDING PAGE — rewritten 13 August 2026
   The old version was a stripped capture page. It now mirrors the
   homepage's own components so paid traffic can actually read and
   decide before being asked for anything.
   ============================================================ */

/* On a navy hero, .btn-primary is navy on navy: it renders as plain
   text with no button shape at all (visible on the live homepage).
   A paid-traffic page cannot afford an invisible primary CTA, so it
   takes the accent colour instead. Applies to the homepage hero too,
   which has the same defect. */
.hero-split-text .btn-primary { background: var(--accent); color: var(--brand); box-shadow: 0 10px 24px rgba(0,0,0,0.28); }
.hero-split-text .btn-primary:hover { background: var(--accent-light); }

.landing-price-link { text-decoration: none; transition: color 0.2s ease; }
.landing-price-link:hover { color: var(--accent-light); }

.landing-start { padding: 90px 0; background: var(--paper); }
.landing-start-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 56px; align-items: center; }
.landing-start-text h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.15; margin-bottom: 18px; }
.landing-start-text p { color: var(--muted); font-size: 1.05rem; line-height: 1.65; margin-bottom: 16px; }
.landing-start-note { font-weight: 600; color: var(--ink); }

/* Two FAQ-style bands run back to back (the assurances, then the real
   questions). Without this they read as one long undivided list. */
.wdc-landing .loved-for + .loved-for { padding-top: 0; }

@media (max-width: 900px) {
  .landing-start { padding: 60px 0; }
  .landing-start-grid { grid-template-columns: 1fr; gap: 34px; }
}

/* The shared .reveal animation starts at opacity:0 and only becomes visible
   when JavaScript adds .is-visible. On the pages that cost money per visitor
   that is a single point of failure: one script error and the page is blank
   below the hero. Paid traffic gets guaranteed rendering instead of a fade. */
.wdc-landing .reveal { opacity: 1; transform: none; transition: none; }

/* A persistent way to act. The page is deliberately long now, so the CTA
   cannot only exist in the hero and again 8,000px later at the form. */
.wdc-landing .sticky-enquire { background: var(--accent); color: var(--brand); font-weight: 700; }
@media (max-width: 640px) {
  .wdc-landing .sticky-enquire { right: 14px; bottom: 14px; padding: 13px 20px; }
}
.landing-price-link { white-space: nowrap; }
@media (max-width: 900px) {
  /* The hero photo is the first thing on a phone. At 260px it pushed the
     headline and both CTAs down past the fold on a 844px screen. */
  .wdc-landing .hero-split-image, .wdc-landing .hero-split-image img { height: 200px; }
  .wdc-landing .hero-split-text { padding: 38px 24px; }
}

/* ============================================================
   AD LANDING PAGE — "The 48 Hour Clock"
   Chosen by Neil 13 August 2026 from four concepts.

   Everything below is prefixed `nsb-` and scoped under
   body.wdc-landing, so this dark, standalone treatment cannot
   collide with the shared components used on the real site.

   Note on type: the timeline uses a system monospace stack, not
   JetBrains Mono. This theme deliberately self-hosts its fonts,
   and a Google Fonts request on the one page that costs money per
   visit would add a render-blocking third-party call for the sake
   of four numbers.
   ============================================================ */
.wdc-landing.nsb-clock-page{--nsb-navy:#0f1626;--nsb-navy-2:#1a2540;--nsb-gold:#f5a623;--nsb-gold-lt:#f8c374;
  --nsb-ink:#eef1f6;--nsb-muted:rgba(238,241,246,.62);--nsb-line:rgba(255,255,255,.14);
  --nsb-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  background:var(--nsb-navy);color:var(--nsb-ink)}
.nsb-clock-page .nsb-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.nsb-clock-page img{max-width:100%;display:block}

.nsb-clock-page .nsb-bar{padding:16px 0;border-bottom:1px solid var(--nsb-line);position:sticky;top:0;
  background:rgba(15,22,38,.92);backdrop-filter:blur(10px);z-index:60}
.nsb-clock-page .nsb-bar .nsb-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.nsb-clock-page .nsb-logo{max-height:38px;width:auto;filter:brightness(0) invert(1)}
.nsb-clock-page .nsb-logo.is-dark-variant{filter:none}
.nsb-clock-page .nsb-wordmark{color:#fff;font-weight:800;font-size:1.15rem}
.nsb-clock-page .nsb-bar-right{display:flex;align-items:center;gap:26px}
.nsb-clock-page .nsb-bar-nav{display:flex;gap:22px}
.nsb-clock-page .nsb-bar-nav a{color:rgba(238,241,246,.72);font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap}
.nsb-clock-page .nsb-bar-nav a:hover{color:var(--nsb-gold)}
.nsb-clock-page .nsb-bar-cta{background:var(--nsb-gold);color:#0f1626;padding:11px 20px;border-radius:26px;
  font-size:.88rem;font-weight:800;text-decoration:none;white-space:nowrap}
.nsb-clock-page .nsb-bar-cta:hover{background:var(--nsb-gold-lt)}

.nsb-clock-page .nsb-hero{padding:76px 0 60px;position:relative;overflow:hidden;background:var(--nsb-navy)}
.nsb-clock-page .nsb-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 78% 28%,rgba(245,166,35,.16),transparent 70%)}
.nsb-clock-page .nsb-hero .nsb-wrap{position:relative;z-index:1}
.nsb-clock-page .nsb-eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:var(--nsb-gold);margin-bottom:20px}
.nsb-clock-page .nsb-hero h1{font-size:clamp(2.4rem,6vw,5rem);font-weight:900;line-height:.98;
  letter-spacing:-.035em;margin-bottom:24px;max-width:14em;color:var(--nsb-ink)}
/* Not an outline. -webkit-text-stroke on 900-weight type with negative letter
   spacing makes adjacent letterforms collide and read as noise. */
.nsb-clock-page .nsb-out{color:var(--nsb-gold);text-decoration:underline;
  text-decoration-color:rgba(245,166,35,.34);text-decoration-thickness:.055em;text-underline-offset:.1em}
.nsb-clock-page .nsb-lead{font-size:1.14rem;color:var(--nsb-muted);max-width:40em;margin-bottom:34px}
.nsb-clock-page .nsb-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nsb-clock-page .nsb-btn{display:inline-block;padding:17px 32px;border-radius:32px;font-weight:800;
  text-decoration:none;transition:.2s}
.nsb-clock-page .nsb-btn-gold{background:var(--nsb-gold);color:#0f1626;box-shadow:0 14px 34px rgba(245,166,35,.28)}
.nsb-clock-page .nsb-btn-gold:hover{background:var(--nsb-gold-lt);transform:translateY(-2px)}
.nsb-clock-page .nsb-btn-line{border:1.5px solid var(--nsb-line);color:#fff}
.nsb-clock-page .nsb-btn-line:hover{border-color:var(--nsb-gold)}

.nsb-clock-page .nsb-clock{margin-top:56px;border:1px solid var(--nsb-line);border-radius:20px;
  background:rgba(255,255,255,.035);overflow:hidden}
.nsb-clock-page .nsb-clock-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  padding:18px 26px;border-bottom:1px solid var(--nsb-line);font-family:var(--nsb-mono);font-size:.76rem;
  letter-spacing:.14em;color:var(--nsb-muted)}
.nsb-clock-page .nsb-live{display:flex;align-items:center;gap:8px;color:var(--nsb-gold)}
.nsb-clock-page .nsb-dot{width:8px;height:8px;border-radius:50%;background:var(--nsb-gold);animation:nsbPulse 1.6s infinite}
@keyframes nsbPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.75)}}
.nsb-clock-page .nsb-track{position:relative;padding:52px 26px 40px}
.nsb-clock-page .nsb-rail{position:absolute;left:26px;right:26px;top:74px;height:3px;background:var(--nsb-line);border-radius:3px}
.nsb-clock-page .nsb-rail-fill{position:absolute;left:0;top:0;bottom:0;width:12%;
  background:linear-gradient(90deg,var(--nsb-gold),var(--nsb-gold-lt));border-radius:3px;
  animation:nsbFill 6s ease-in-out infinite alternate}
@keyframes nsbFill{from{width:8%}to{width:100%}}
.nsb-clock-page .nsb-marks{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.nsb-clock-page .nsb-pin{width:22px;height:22px;border-radius:50%;background:var(--nsb-navy);
  border:3px solid var(--nsb-gold);margin-bottom:26px;position:relative;z-index:2}
.nsb-clock-page .nsb-mark:first-child .nsb-pin{background:var(--nsb-gold)}
.nsb-clock-page .nsb-t{font-family:var(--nsb-mono);font-size:1.5rem;font-weight:700;color:var(--nsb-gold);
  letter-spacing:-.02em;line-height:1}
.nsb-clock-page .nsb-t small{font-size:.7rem;letter-spacing:.14em;color:var(--nsb-muted);display:block;margin-top:6px}
.nsb-clock-page .nsb-mark h3{font-size:1.02rem;font-weight:800;margin:14px 0 5px;color:var(--nsb-ink)}
.nsb-clock-page .nsb-mark p{font-size:.9rem;color:var(--nsb-muted)}

.nsb-clock-page .nsb-band{border-top:1px solid var(--nsb-line);border-bottom:1px solid var(--nsb-line);
  background:rgba(245,166,35,.06);padding:0}
.nsb-clock-page .nsb-band .nsb-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:44px 24px}
.nsb-clock-page .nsb-stat b{display:block;font-size:2.6rem;font-weight:900;letter-spacing:-.03em;color:var(--nsb-gold);line-height:1}
.nsb-clock-page .nsb-stat span{display:block;margin-top:8px;color:var(--nsb-muted);font-size:.95rem}

.nsb-clock-page .nsb-sec{padding:90px 0}
.nsb-clock-page .nsb-sec-head{max-width:760px;margin-bottom:44px}
.nsb-clock-page .nsb-sec-head h2{font-size:clamp(1.9rem,3.2vw,2.7rem);font-weight:900;line-height:1.1;
  letter-spacing:-.02em;margin-bottom:14px;color:var(--nsb-ink)}
.nsb-clock-page .nsb-sec-head p{color:var(--nsb-muted);font-size:1.06rem}
.nsb-clock-page .nsb-qgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.nsb-clock-page .nsb-q{border:1px solid var(--nsb-line);border-radius:16px;padding:26px 24px;background:rgba(255,255,255,.03)}
.nsb-clock-page .nsb-q h3{font-size:1.04rem;font-weight:800;margin-bottom:7px;color:#fff}
.nsb-clock-page .nsb-q p{color:var(--nsb-muted);font-size:.94rem}

.nsb-clock-page .nsb-start{padding:90px 0}
.nsb-clock-page .nsb-start .nsb-wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.nsb-clock-page .nsb-start h2{font-size:clamp(1.9rem,3vw,2.7rem);font-weight:900;line-height:1.12;
  margin-bottom:16px;letter-spacing:-.02em;color:var(--nsb-ink)}
.nsb-clock-page .nsb-start p{color:var(--nsb-muted);margin-bottom:14px}
.nsb-clock-page .nsb-strong{color:#fff;font-weight:700}
.nsb-clock-page .nsb-card{background:#fff;color:#1a2332;border-radius:20px;padding:36px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.nsb-clock-page .nsb-card h3{font-size:1.45rem;font-weight:900;margin-bottom:6px;color:#1a2332}
.nsb-clock-page .nsb-card > p{color:#5b6472;font-size:.94rem;margin-bottom:22px}
.nsb-clock-page .nsb-card label{display:block;font-size:.82rem;font-weight:700;margin-bottom:6px;color:#1a2332}
.nsb-clock-page .nsb-card .wpcf7-form p{margin:0 0 4px}
.nsb-clock-page .nsb-card input[type=text],
.nsb-clock-page .nsb-card input[type=email],
.nsb-clock-page .nsb-card input[type=tel]{width:100%;padding:14px 16px;border:1.5px solid rgba(26,37,64,.16);
  border-radius:10px;font-family:inherit;font-size:1rem;margin-bottom:14px;background:#fff;color:#1a2332}
.nsb-clock-page .nsb-card input:focus{outline:none;border-color:var(--nsb-gold)}
.nsb-clock-page .nsb-card input[type=submit]{width:100%;background:var(--nsb-navy-2);color:#fff;border:0;
  padding:17px;border-radius:32px;font-family:inherit;font-weight:800;font-size:1.02rem;cursor:pointer;margin-top:6px}
.nsb-clock-page .nsb-card input[type=submit]:hover{background:#0f1626}
.nsb-clock-page .nsb-card .wpcf7-not-valid-tip{color:#c0392b;font-size:.82rem;margin:-8px 0 10px}
.nsb-clock-page .nsb-card .wpcf7-response-output{border:1px solid rgba(26,37,64,.2);border-radius:10px;
  padding:12px 14px;font-size:.9rem;margin:14px 0 0}

.nsb-clock-page .nsb-foot{border-top:1px solid var(--nsb-line);color:var(--nsb-muted);padding:52px 0 26px;font-size:.9rem}
.nsb-clock-page .nsb-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;padding-bottom:34px}
.nsb-clock-page .nsb-foot-brand img{max-height:36px;width:auto;margin-bottom:16px}
.nsb-clock-page .nsb-foot-brand p{max-width:32em;line-height:1.7}
.nsb-clock-page .nsb-foot-col h4{color:#fff;font-size:.78rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:14px}
.nsb-clock-page .nsb-foot-col a{display:block;color:var(--nsb-muted);text-decoration:none;margin-bottom:9px;transition:.15s}
.nsb-clock-page .nsb-foot-col a:hover{color:var(--nsb-gold)}
.nsb-clock-page .nsb-foot-bottom{border-top:1px solid var(--nsb-line);padding-top:22px;text-align:center;font-size:.82rem}

@media(max-width:900px){
  .nsb-clock-page .nsb-marks{grid-template-columns:1fr;gap:30px}
  .nsb-clock-page .nsb-rail{display:none}
  .nsb-clock-page .nsb-pin{margin-bottom:12px}
  .nsb-clock-page .nsb-band .nsb-wrap,
  .nsb-clock-page .nsb-qgrid,
  .nsb-clock-page .nsb-start .nsb-wrap{grid-template-columns:1fr}
  .nsb-clock-page .nsb-sec,.nsb-clock-page .nsb-start{padding:60px 0}
  .nsb-clock-page .nsb-foot-grid{grid-template-columns:1fr;gap:30px}
}
/* The bar's links used to be `display:none` here, which on a phone left this page
   with no route through to the main site except the footer. That defeats the whole
   reason they are in the bar (see this template's header comment: a stranger off a
   cold ad has to be able to go and check the business is real), and ad traffic is
   mostly phones. They now drop to a visible second row instead of disappearing. */
@media(max-width:820px){
  /* Tightened up because the bar is sticky: a second row that stays on screen the
     whole scroll has to cost as little height as it can. */
  .nsb-clock-page .nsb-bar{padding:10px 0}
  .nsb-clock-page .nsb-bar .nsb-wrap{flex-wrap:wrap;gap:8px}
  .nsb-clock-page .nsb-bar-right{flex:1 0 100%;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px}
  .nsb-clock-page .nsb-bar-nav{gap:18px}
  .nsb-clock-page .nsb-bar-nav a{font-size:.85rem;padding:4px 0}
  .nsb-clock-page .nsb-bar-cta{padding:9px 16px;font-size:.82rem}
}
@media(max-width:560px){
  .nsb-clock-page .nsb-bar .nsb-wrap{gap:10px}
  .nsb-clock-page .nsb-logo{max-height:30px}
  .nsb-clock-page .nsb-bar-cta{padding:9px 14px;font-size:.78rem}
  .nsb-clock-page .nsb-hero h1{letter-spacing:-.02em;overflow-wrap:break-word}
  .nsb-clock-page .nsb-clock-top{flex-direction:column;align-items:flex-start;gap:8px;font-size:.66rem}
}

/* ============================================================
   HOMEPAGE — "BUILT FIRST" (nsx-)
   Rebuilt 26 August 2026. The old homepage was the generic
   navy-on-white template: stock laptop photo, six floating grey
   cards, alternating text/image bands. Nothing on it looked like
   it had been made by someone who can make things, which is the
   only thing a website-builder's own homepage has to prove.

   Direction taken from the ad landing page (page-landing.php,
   "The 48 Hour Clock"), which Neil already picked from four
   concepts on 13 August 2026 and which was quietly the best
   design in the brand. The homepage was still two generations
   behind it. This brings the front door up to that language and
   pushes it further, so the brand reads as one thing.

   Everything is prefixed `nsx-` and scoped under `.nsx`, a
   wrapper div around the homepage content. Nothing here can
   reach any other page. The only unscoped rules in this block
   are the dark header/footer treatment, which is deliberate and
   sitewide (every template already puts navy directly under the
   header, so a light sticky bar was the odd one out).

   No photographs. Every visual on this page is drawn in CSS or
   inline SVG: it costs no requests, it can't go stale, and it
   is itself the portfolio piece. Stock photos of someone else's
   MacBook were the single loudest "template" signal on the old
   page.
   ============================================================ */

.nsx {
  --nsx-bg:      #080d18;   /* deeper than the landing page's #0f1626: the gold has to sing off it */
  --nsx-bg-2:    #0f172a;
  --nsx-bg-3:    #141f36;
  --nsx-paper:   #f2ede3;   /* warm bone, NOT white. White is where the old page lived. */
  --nsx-paper-2: #e8e0d1;
  --nsx-gold:    #f5a623;
  --nsx-gold-lt: #ffc76b;
  --nsx-text:    #f4f6fa;
  --nsx-dim:     rgba(244,246,250,0.60);
  --nsx-dimmer:  rgba(244,246,250,0.38);
  --nsx-line:    rgba(244,246,250,0.13);
  --nsx-line-2:  rgba(244,246,250,0.07);
  --nsx-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--nsx-bg);
  color: var(--nsx-text);
  display: block;
}
.nsx * { box-sizing: border-box; }
.nsx section { padding: 0; }
.nsx .nsx-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) { .nsx .nsx-wrap { padding: 0 20px; } }

/* Shared type scale. One place, so the page has a real rhythm rather than
   whatever clamp() each section happened to be given. */
.nsx h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 900; line-height: 1.04; letter-spacing: -0.035em; color: inherit; margin: 0 0 16px; text-wrap: balance; }
.nsx h3 { font-weight: 800; letter-spacing: -0.015em; color: inherit; }
.nsx p { margin: 0; }
.nsx a { text-decoration: none; }
.nsx .nsx-eyebrow { font-family: var(--nsx-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--nsx-gold); margin-bottom: 20px; display: block; }
.nsx .nsx-lead { font-size: 1.1rem; line-height: 1.65; color: var(--nsx-dim); max-width: 38em; }
.nsx .nsx-gold { color: var(--nsx-gold); }

/* Buttons. The old .btn-primary was navy-on-navy and rendered as bare text
   in the hero (found 13 Aug, patched there, never fixed as a pattern). */
.nsx .nsx-btn { display: inline-block; padding: 17px 34px; border-radius: 34px; font-weight: 800; font-size: 1rem; transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.nsx .nsx-btn-gold { background: var(--nsx-gold); color: #0b1120; box-shadow: 0 16px 38px rgba(245,166,35,0.26); }
.nsx .nsx-btn-gold:hover { background: var(--nsx-gold-lt); transform: translateY(-2px); }
.nsx .nsx-btn-line { border: 1.5px solid var(--nsx-line); color: var(--nsx-text); }
.nsx .nsx-btn-line:hover { border-color: var(--nsx-gold); color: var(--nsx-gold); }
.nsx .nsx-btn-ink { background: #0b1120; color: #fff; box-shadow: 0 16px 38px rgba(0,0,0,0.28); }
.nsx .nsx-btn-ink:hover { background: #000; transform: translateY(-2px); }
.nsx .nsx-btns { display: flex; gap: 14px; flex-wrap: wrap; }

/* Grain. A flat navy fill is what makes a dark page look cheap; real ink has
   tooth. feTurbulence as a data URI, so it costs no request and never 404s. */
.nsx .nsx-dark { position: relative; background: var(--nsx-bg); }
.nsx .nsx-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}
.nsx .nsx-dark > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------ */
.nsx .nsx-hero { padding: 84px 0 0; overflow: hidden; }
/* Faint gold hairline grid + a single warm bloom behind the browser mock.
   Both drawn, both free, both stop the ground reading as a flat rectangle. */
.nsx .nsx-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 55% 60% at 76% 34%, rgba(245,166,35,0.16), transparent 68%),
    linear-gradient(rgba(244,246,250,0.028) 1px, transparent 1px) 0 0 / 100% 76px,
    linear-gradient(90deg, rgba(244,246,250,0.028) 1px, transparent 1px) 0 0 / 76px 100%;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, #000 30%, transparent 78%);
}
.nsx .nsx-hero-grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 60px; align-items: center; }
.nsx .nsx-hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  font-weight: 900; line-height: 0.96; letter-spacing: -0.045em;
  margin: 0 0 26px; color: var(--nsx-text); text-wrap: balance;
}
/* Colour alone. Not -webkit-text-stroke (at 900 weight with this much negative
   tracking an outline collapses into noise, learned on the landing page) and
   not an underline either: this phrase runs to three lines at desktop width,
   and a rule under three lines reads as a correction mark rather than emphasis. */
.nsx .nsx-hero h1 em { font-style: normal; color: var(--nsx-gold); }
.nsx .nsx-hero .nsx-lead { margin-bottom: 34px; font-size: 1.14rem; }

/* Stat rail under the hero: the three numbers that are the entire offer,
   stated as numbers instead of buried mid-paragraph the way they were. */
.nsx .nsx-rail { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--nsx-line); margin-top: 76px; }
.nsx .nsx-rail-item { padding: 30px 30px 34px; border-right: 1px solid var(--nsx-line); }
.nsx .nsx-rail-item:first-child { padding-left: 0; }
.nsx .nsx-rail-item:last-child { border-right: 0; padding-right: 0; }
.nsx .nsx-rail-item b { display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: var(--nsx-gold); }
.nsx .nsx-rail-item span { display: block; margin-top: 10px; font-family: var(--nsx-mono); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nsx-dimmer); }

/* ------------------------------------------------------------
   THE BUILD WINDOW
   A website assembling itself, drawn entirely in CSS. This is the
   hero image, and it is on-message in a way no stock photograph
   can be: the product is "we build it first", so the picture is
   the building. It also quietly is the portfolio, on a site that
   cannot show client work without claiming prospects as clients.
   ------------------------------------------------------------ */
.nsx .nsx-build { position: relative; }
.nsx .nsx-window {
  background: linear-gradient(180deg, #16213a 0%, #101a2e 100%);
  border: 1px solid var(--nsx-line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 48px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.nsx .nsx-window-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--nsx-line); background: rgba(255,255,255,0.03); }
.nsx .nsx-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(244,246,250,0.18); }
.nsx .nsx-url { flex: 1; margin-left: 10px; height: 24px; border-radius: 12px; background: rgba(0,0,0,0.25); display: flex; align-items: center; padding: 0 12px; font-family: var(--nsx-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--nsx-dimmer); }
.nsx .nsx-canvas { position: relative; padding: 20px; display: grid; gap: 12px; min-height: 366px; grid-template-rows: 34px 128px auto auto; }

/* Every block starts collapsed and snaps in on its own beat, then the whole
   loop resets. 9s total: long enough to read as deliberate assembly, short
   enough that a visitor sees a full cycle before scrolling past. */
.nsx .nsx-blk { border-radius: 8px; background: rgba(244,246,250,0.07); transform-origin: left center; animation: nsxBuild 9s cubic-bezier(.2,.8,.25,1) infinite; opacity: 0; }
.nsx .nsx-blk-nav { display: flex; gap: 8px; align-items: center; background: transparent; }
.nsx .nsx-blk-nav i { display: block; height: 8px; border-radius: 4px; background: rgba(244,246,250,0.16); animation: nsxBuild 9s cubic-bezier(.2,.8,.25,1) infinite; opacity: 0; }
.nsx .nsx-blk-nav i:nth-child(1) { width: 62px; background: var(--nsx-gold); height: 11px; animation-delay: 0.15s; }
.nsx .nsx-blk-nav i:nth-child(2) { width: 34px; animation-delay: 0.3s; }
.nsx .nsx-blk-nav i:nth-child(3) { width: 44px; animation-delay: 0.4s; }
.nsx .nsx-blk-nav i:nth-child(4) { width: 30px; animation-delay: 0.5s; }
.nsx .nsx-blk-nav i:nth-child(5) { width: 52px; margin-left: auto; background: rgba(245,166,35,0.5); height: 16px; border-radius: 8px; animation-delay: 0.6s; }

.nsx .nsx-blk-hero { background: linear-gradient(120deg, rgba(245,166,35,0.20), rgba(245,166,35,0.05)); border: 1px solid rgba(245,166,35,0.22); padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 9px; animation-delay: 0.85s; }
.nsx .nsx-blk-hero i { display: block; height: 12px; border-radius: 6px; background: rgba(244,246,250,0.42); }
.nsx .nsx-blk-hero i:nth-child(1) { width: 74%; }
.nsx .nsx-blk-hero i:nth-child(2) { width: 52%; }
.nsx .nsx-blk-hero i:nth-child(3) { width: 88px; height: 20px; border-radius: 10px; background: var(--nsx-gold); margin-top: 6px; }

.nsx .nsx-blk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; background: transparent; animation: none; opacity: 1; }
.nsx .nsx-blk-card { border-radius: 8px; background: rgba(244,246,250,0.07); border: 1px solid var(--nsx-line-2); height: 74px; padding: 12px; display: flex; flex-direction: column; gap: 7px; animation: nsxBuild 9s cubic-bezier(.2,.8,.25,1) infinite; opacity: 0; }
.nsx .nsx-blk-card:nth-child(1) { animation-delay: 1.3s; }
.nsx .nsx-blk-card:nth-child(2) { animation-delay: 1.45s; }
.nsx .nsx-blk-card:nth-child(3) { animation-delay: 1.6s; }
.nsx .nsx-blk-card u { display: block; width: 20px; height: 20px; border-radius: 6px; background: rgba(245,166,35,0.55); }
.nsx .nsx-blk-card i { display: block; height: 6px; border-radius: 3px; background: rgba(244,246,250,0.22); }
.nsx .nsx-blk-card i:last-child { width: 60%; }

.nsx .nsx-blk-foot { height: 40px; animation-delay: 1.95s; }

/* The stamp is the payoff of the loop, and the promise of the business:
   the thing finishes, then you decide. */
.nsx .nsx-stamp {
  position: absolute; right: -14px; bottom: -18px; z-index: 3;
  background: var(--nsx-gold); color: #0b1120;
  font-family: var(--nsx-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  padding: 12px 20px; border-radius: 30px; box-shadow: 0 18px 40px rgba(245,166,35,0.34);
  display: flex; align-items: center; gap: 9px;
  animation: nsxStamp 9s cubic-bezier(.2,.8,.25,1) infinite; opacity: 0;
}
.nsx .nsx-stamp::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #0b1120; animation: nsxPulse 1.5s infinite; }

@keyframes nsxBuild {
  0%   { opacity: 0; transform: translateY(10px) scaleY(0.4); }
  8%   { opacity: 1; transform: translateY(0) scaleY(1); }
  88%  { opacity: 1; transform: translateY(0) scaleY(1); }
  96%, 100% { opacity: 0; transform: translateY(6px) scaleY(0.6); }
}
@keyframes nsxStamp {
  0%, 25%   { opacity: 0; transform: translateY(14px) scale(0.9); }
  31%       { opacity: 1; transform: translateY(0) scale(1); }
  88%       { opacity: 1; transform: translateY(0) scale(1); }
  95%, 100% { opacity: 0; transform: translateY(8px) scale(0.94); }
}
@keyframes nsxPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Anyone who has asked their OS to stop moving things gets the finished
   state, not a frozen half-built page. */
@media (prefers-reduced-motion: reduce) {
  .nsx .nsx-blk, .nsx .nsx-blk-nav i, .nsx .nsx-blk-card, .nsx .nsx-stamp { animation: none !important; opacity: 1 !important; transform: none !important; }
  .nsx .nsx-stamp::before { animation: none; }
}

/* ------------------------------------------------------------
   2. TRADES TICKER
   Reuses the brand's own marquee device inside the page. Labelled
   "built for", i.e. the market this is aimed at. It is NOT a client
   list and must never be relabelled as one: these are trades, not
   customers, and the demo pool is full of businesses who have not
   bought anything.
   ------------------------------------------------------------ */
.nsx .nsx-ticker { border-top: 1px solid var(--nsx-line); border-bottom: 1px solid var(--nsx-line); background: rgba(245,166,35,0.045); overflow: hidden; display: flex; align-items: stretch; }
.nsx .nsx-ticker-label { flex: 0 0 auto; display: flex; align-items: center; padding: 0 26px; border-right: 1px solid var(--nsx-line); font-family: var(--nsx-mono); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--nsx-gold); white-space: nowrap; }
.nsx .nsx-ticker-view { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.nsx .nsx-ticker-track { display: flex; width: max-content; animation: nsxTicker 46s linear infinite; }
.nsx .nsx-ticker-group { display: flex; flex-shrink: 0; }
.nsx .nsx-ticker-group span { padding: 17px 30px; font-family: var(--nsx-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--nsx-dim); white-space: nowrap; }
.nsx .nsx-ticker-group span::after { content: "·"; margin-left: 30px; color: var(--nsx-gold); }
@keyframes nsxTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .nsx .nsx-ticker-track { animation: none; } }
@media (max-width: 640px) { .nsx .nsx-ticker-label { display: none; } }

/* ------------------------------------------------------------
   3. THE PRICE
   £350 was a clause in the middle of a paragraph. It is the whole
   proposition, so it is now the largest thing on the page.
   ------------------------------------------------------------ */
.nsx .nsx-paper { background: var(--nsx-paper); color: #16203a; }
.nsx .nsx-paper .nsx-eyebrow { color: #9a6b12; }
.nsx .nsx-paper .nsx-lead { color: rgba(22,32,58,0.68); }

.nsx .nsx-price { padding: 96px 0 100px; }
.nsx .nsx-price-grid { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 64px; align-items: center; }
.nsx .nsx-fig { position: relative; text-align: center; }
.nsx .nsx-fig b {
  display: block; font-size: clamp(6rem, 15vw, 12.5rem); font-weight: 900;
  letter-spacing: -0.06em; line-height: 0.82; color: #16203a;
}
.nsx .nsx-fig b sup { font-size: 0.42em; font-weight: 800; letter-spacing: -0.02em; vertical-align: 0.72em; margin-right: 0.02em; }
.nsx .nsx-fig-note { margin-top: 18px; font-family: var(--nsx-mono); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(22,32,58,0.5); }
/* Hand-drawn underline, not a border-bottom: a border would read as a divider. */
.nsx .nsx-fig-rule { display: block; margin: 6px auto 0; width: min(300px, 78%); height: 12px; color: var(--nsx-gold); }

.nsx .nsx-price-list { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid rgba(22,32,58,0.14); }
.nsx .nsx-price-list li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid rgba(22,32,58,0.14); }
.nsx .nsx-price-list b { font-family: var(--nsx-mono); font-size: 0.95rem; font-weight: 700; color: #16203a; white-space: nowrap; min-width: 92px; }
.nsx .nsx-price-list span { color: rgba(22,32,58,0.7); font-size: 1rem; line-height: 1.55; }
.nsx .nsx-price-list em { font-style: normal; color: #16203a; font-weight: 700; }

/* ------------------------------------------------------------
   4. RENT vs OWN
   Same argument the old page made in two grey paragraphs beside a
   greyscale stock photo of a meeting. Staged as the comparison it
   actually is.
   ------------------------------------------------------------ */
.nsx .nsx-own { padding: 100px 0; }
.nsx .nsx-own-head { max-width: 780px; margin-bottom: 56px; }
.nsx .nsx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--nsx-line); border-radius: 18px; overflow: hidden; }
.nsx .nsx-col { padding: 34px 34px 38px; }
.nsx .nsx-col + .nsx-col { border-left: 1px solid var(--nsx-line); }
.nsx .nsx-col-own { background: rgba(245,166,35,0.06); }
.nsx .nsx-col h3 { font-family: var(--nsx-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 24px; }
.nsx .nsx-col-rent h3 { color: var(--nsx-dimmer); }
.nsx .nsx-col-own h3 { color: var(--nsx-gold); }
.nsx .nsx-col ul { list-style: none; margin: 0; padding: 0; }
.nsx .nsx-col li { position: relative; padding: 15px 0 15px 34px; border-top: 1px solid var(--nsx-line-2); font-size: 1rem; line-height: 1.5; }
.nsx .nsx-col li:first-child { border-top: 0; padding-top: 0; }
.nsx .nsx-col-rent li { color: var(--nsx-dim); }
.nsx .nsx-col-own li { color: var(--nsx-text); }
/* Marks drawn in CSS, not emoji: emoji render differently on every OS and this
   comparison only works if both columns are visually parallel. */
.nsx .nsx-col-rent li::before,
.nsx .nsx-col-rent li::after { content: ""; position: absolute; left: 4px; top: 22px; width: 15px; height: 1.5px; background: rgba(244,246,250,0.32); }
.nsx .nsx-col-rent li:first-child::before,
.nsx .nsx-col-rent li:first-child::after { top: 7px; }
.nsx .nsx-col-rent li::before { transform: rotate(45deg); }
.nsx .nsx-col-rent li::after { transform: rotate(-45deg); }
.nsx .nsx-col-own li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 14px; height: 7px; border-left: 2px solid var(--nsx-gold); border-bottom: 2px solid var(--nsx-gold); transform: rotate(-45deg); }
.nsx .nsx-col-own li:first-child::before { top: 5px; }

/* ------------------------------------------------------------
   5. WHAT'S INCLUDED
   Six floating grey cards became one ruled grid. Cards on a light
   page with a soft shadow each is the default every template ships;
   a hairline grid with mono numerals is a decision.
   ------------------------------------------------------------ */
.nsx .nsx-inc { padding: 0 0 100px; }
.nsx .nsx-inc-head { max-width: 760px; margin-bottom: 54px; }
.nsx .nsx-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--nsx-line); border-left: 1px solid var(--nsx-line); }
.nsx .nsx-cell { padding: 34px 30px 38px; border-right: 1px solid var(--nsx-line); border-bottom: 1px solid var(--nsx-line); transition: background 0.25s ease; }
.nsx .nsx-cell:hover { background: rgba(245,166,35,0.05); }
.nsx .nsx-cell-num { font-family: var(--nsx-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--nsx-gold); display: block; margin-bottom: 22px; }
.nsx .nsx-cell svg { width: 26px; height: 26px; stroke: var(--nsx-gold); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; display: block; }
.nsx .nsx-cell h3 { font-size: 1.1rem; margin: 0 0 9px; color: var(--nsx-text); }
.nsx .nsx-cell p { color: var(--nsx-dim); font-size: 0.95rem; line-height: 1.6; }

/* ------------------------------------------------------------
   6. THE 48 HOUR CLOCK
   Lifted onto the homepage from the ad landing page, where it was
   only ever seen by paid traffic. It is the most distinctive thing
   the brand owns and it was hidden behind ad spend.
   ------------------------------------------------------------ */
.nsx .nsx-clock-sec { padding: 100px 0; border-top: 1px solid var(--nsx-line); }
.nsx .nsx-clock { margin-top: 50px; border: 1px solid var(--nsx-line); border-radius: 20px; background: rgba(244,246,250,0.03); overflow: hidden; }
.nsx .nsx-clock-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 17px 26px; border-bottom: 1px solid var(--nsx-line); font-family: var(--nsx-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nsx-dimmer); }
.nsx .nsx-live { display: flex; align-items: center; gap: 9px; color: var(--nsx-gold); }
.nsx .nsx-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--nsx-gold); animation: nsxPulse 1.6s infinite; }
.nsx .nsx-track { position: relative; padding: 54px 30px 42px; }
.nsx .nsx-rail-line { position: absolute; left: 30px; right: 30px; top: 76px; height: 3px; background: var(--nsx-line); border-radius: 3px; overflow: hidden; }
.nsx .nsx-rail-fill { position: absolute; inset: 0 auto 0 0; width: 10%; background: linear-gradient(90deg, var(--nsx-gold), var(--nsx-gold-lt)); border-radius: 3px; animation: nsxFill 7s ease-in-out infinite alternate; }
@keyframes nsxFill { from { width: 8%; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .nsx .nsx-rail-fill { animation: none; width: 100%; } .nsx .nsx-live i { animation: none; } }
.nsx .nsx-marks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.nsx .nsx-pin { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--nsx-bg); border: 3px solid var(--nsx-gold); margin-bottom: 26px; position: relative; z-index: 2; }
.nsx .nsx-mark:first-child .nsx-pin { background: var(--nsx-gold); }
.nsx .nsx-t { font-family: var(--nsx-mono); font-size: 1.5rem; font-weight: 700; color: var(--nsx-gold); letter-spacing: -0.02em; line-height: 1; }
.nsx .nsx-t small { display: block; margin-top: 7px; font-size: 0.66rem; letter-spacing: 0.16em; color: var(--nsx-dimmer); }
.nsx .nsx-mark h3 { font-size: 1.02rem; margin: 15px 0 6px; color: var(--nsx-text); }
.nsx .nsx-mark p { font-size: 0.92rem; color: var(--nsx-dim); line-height: 1.55; }

/* ------------------------------------------------------------
   7. FOUND BY GOOGLE AND AI
   Neil's standing instruction is that this argument lives on a main
   page body, not delegated to a blog post. Kept in full. The purple
   stock "AI" render beside it is gone; the visual is a drawn search
   result, which is the actual thing being described.
   ------------------------------------------------------------ */
.nsx .nsx-found { padding: 100px 0; }
.nsx .nsx-found-grid { display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 64px; align-items: center; }
.nsx .nsx-found p + p { margin-top: 16px; }
.nsx .nsx-serp { background: #fff; border-radius: 16px; padding: 26px 26px 28px; box-shadow: 0 40px 80px rgba(0,0,0,0.45); color: #16203a; }
.nsx .nsx-serp-bar { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(22,32,58,0.16); border-radius: 24px; padding: 11px 16px; font-size: 0.9rem; color: rgba(22,32,58,0.6); }
.nsx .nsx-serp-bar svg { width: 16px; height: 16px; stroke: rgba(22,32,58,0.45); fill: none; stroke-width: 2; flex-shrink: 0; }
.nsx .nsx-ai { margin-top: 20px; border: 1px solid rgba(245,166,35,0.45); background: rgba(245,166,35,0.09); border-radius: 12px; padding: 16px 18px; }
.nsx .nsx-ai-tag { font-family: var(--nsx-mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: #9a6b12; display: block; margin-bottom: 10px; }
.nsx .nsx-ai p { font-size: 0.92rem; line-height: 1.55; color: rgba(22,32,58,0.82); }
.nsx .nsx-ai b { color: #16203a; }
.nsx .nsx-serp-res { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(22,32,58,0.1); }
.nsx .nsx-serp-res i { display: block; height: 7px; border-radius: 4px; background: rgba(22,32,58,0.1); margin-top: 9px; }
.nsx .nsx-serp-res i:first-child { width: 46%; height: 10px; background: rgba(22,32,58,0.2); margin-top: 0; }
.nsx .nsx-serp-res i:last-child { width: 68%; }

/* ------------------------------------------------------------
   8. THE LINE
   The brand's own sentence, given the room it has earned. Gold ground,
   ink type: the one place on the page where the accent is the whole
   surface rather than a detail.
   ------------------------------------------------------------ */
.nsx .nsx-line-band { background: var(--nsx-gold); color: #16203a; padding: 88px 0; }
.nsx .nsx-line-band .nsx-eyebrow { color: rgba(22,32,58,0.55); }
.nsx .nsx-quote { font-size: clamp(1.8rem, 4vw, 3.1rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.035em; max-width: 20em; text-wrap: balance; }
.nsx .nsx-quote span { color: #fff; }
.nsx .nsx-quote-sub { margin-top: 30px; max-width: 46em; font-size: 1.06rem; line-height: 1.6; color: rgba(22,32,58,0.78); }
.nsx .nsx-quote-sub b { color: #16203a; }
/* The band was two-thirds empty on the right. A drawn seal fills it and says the
   brand's own promise a second time, in the shape people already read as a
   guarantee. Ink on gold, no image. */
.nsx .nsx-line-grid { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.nsx .nsx-seal { flex-shrink: 0; width: 208px; height: 208px; border-radius: 50%; border: 2px solid rgba(22,32,58,0.32); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transform: rotate(-7deg); position: relative; }
.nsx .nsx-seal::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; border: 1px dashed rgba(22,32,58,0.28); }
.nsx .nsx-seal b { display: block; font-size: 1.62rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: #16203a; }
.nsx .nsx-seal span { display: block; margin-top: 11px; font-family: var(--nsx-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(22,32,58,0.66); line-height: 1.7; }

/* ------------------------------------------------------------
   9. FAQ
   ------------------------------------------------------------ */
.nsx .nsx-faq { padding: 100px 0; }
.nsx .nsx-faq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; margin-top: 44px; }
.nsx .nsx-faq-item { padding: 26px 0; border-bottom: 1px solid var(--nsx-line); }
.nsx .nsx-faq-item h3 { font-size: 1.08rem; color: var(--nsx-text); margin: 0 0 10px; }
.nsx .nsx-faq-item p { color: var(--nsx-dim); font-size: 0.96rem; line-height: 1.6; }

/* ------------------------------------------------------------
   10. BLOG
   ------------------------------------------------------------ */
.nsx .nsx-blog { padding: 0 0 100px; }
.nsx .nsx-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px; margin-top: 44px; }
.nsx .nsx-post { display: block; border: 1px solid var(--nsx-line); border-radius: 16px; overflow: hidden; background: rgba(244,246,250,0.03); transition: transform 0.25s ease, border-color 0.25s ease; }
.nsx .nsx-post:hover { transform: translateY(-4px); border-color: rgba(245,166,35,0.45); }
.nsx .nsx-post img { width: 100% !important; height: 200px !important; object-fit: cover; display: block; }
.nsx .nsx-post-body { padding: 22px 24px 26px; }
.nsx .nsx-post-cat { font-family: var(--nsx-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--nsx-gold); display: block; margin-bottom: 10px; }
.nsx .nsx-post h3 { font-size: 1.08rem; color: var(--nsx-text); margin: 0 0 8px; line-height: 1.32; }
.nsx .nsx-post p { color: var(--nsx-dim); font-size: 0.92rem; line-height: 1.55; }

/* ------------------------------------------------------------
   11. CLOSING CTA
   ------------------------------------------------------------ */
.nsx .nsx-close { padding: 110px 0 120px; border-top: 1px solid var(--nsx-line); text-align: center; position: relative; }
.nsx .nsx-close::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(245,166,35,0.14), transparent 70%); }
.nsx .nsx-close .nsx-wrap { position: relative; z-index: 1; }
.nsx .nsx-close h2 { max-width: 15em; margin-left: auto; margin-right: auto; }
.nsx .nsx-close .nsx-lead { margin: 0 auto 34px; text-align: center; }
.nsx .nsx-close .nsx-btns { justify-content: center; }

/* ------------------------------------------------------------
   RESPONSIVE
   Rule 14: these previews get opened on phones. Every breakpoint
   below was checked against a rendered screenshot, not reasoned about.
   ------------------------------------------------------------ */
@media (max-width: 1040px) {
  .nsx .nsx-hero-grid,
  .nsx .nsx-price-grid,
  .nsx .nsx-found-grid { grid-template-columns: 1fr; gap: 46px; }
  .nsx .nsx-grid { grid-template-columns: repeat(2, 1fr); }
  .nsx .nsx-marks { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .nsx .nsx-rail-line { display: none; }
  .nsx .nsx-pin { margin-bottom: 14px; }
}
@media (max-width: 760px) {
  .nsx .nsx-hero { padding-top: 52px; }
  .nsx .nsx-price, .nsx .nsx-own, .nsx .nsx-clock-sec, .nsx .nsx-found, .nsx .nsx-faq { padding: 64px 0; }
  .nsx .nsx-inc, .nsx .nsx-blog { padding-bottom: 64px; }
  .nsx .nsx-close { padding: 72px 0 84px; }
  .nsx .nsx-line-band { padding: 60px 0; }
  .nsx .nsx-grid { grid-template-columns: 1fr; }
  .nsx .nsx-faq-list { grid-template-columns: 1fr; gap: 0; }
  .nsx .nsx-marks { grid-template-columns: 1fr; gap: 30px; }
  /* Stacked, the two columns need a rule between them or the "own" list reads
     as a continuation of the "rent" list. */
  .nsx .nsx-cols { grid-template-columns: 1fr; }
  .nsx .nsx-col + .nsx-col { border-left: 0; border-top: 1px solid var(--nsx-line); }
  .nsx .nsx-rail { grid-template-columns: 1fr; margin-top: 54px; }
  .nsx .nsx-rail-item { border-right: 0; border-bottom: 1px solid var(--nsx-line); padding: 22px 0 24px; display: flex; align-items: baseline; gap: 16px; }
  .nsx .nsx-rail-item:last-child { border-bottom: 0; }
  .nsx .nsx-rail-item b { font-size: 2rem; min-width: 3.2em; }
  .nsx .nsx-rail-item span { margin-top: 0; }
  .nsx .nsx-btn { padding: 15px 26px; font-size: 0.95rem; }
  .nsx .nsx-stamp { right: 8px; bottom: -16px; font-size: 0.66rem; padding: 10px 16px; }
  .nsx .nsx-canvas { min-height: 300px; grid-template-rows: 30px 108px auto auto; padding: 16px; }
  .nsx .nsx-blk-card { height: 62px; }
  .nsx .nsx-clock-top { flex-direction: column; align-items: flex-start; gap: 8px; font-size: 0.66rem; }
  .nsx .nsx-track { padding: 34px 22px 30px; }
  .nsx .nsx-col { padding: 26px 24px 30px; }
  .nsx .nsx-serp { padding: 20px 20px 22px; }
  .nsx .nsx-price-list li { grid-template-columns: 1fr; gap: 6px; }
  .nsx .nsx-line-grid { grid-template-columns: 1fr; gap: 36px; }
  .nsx .nsx-seal { width: 168px; height: 168px; }
  .nsx .nsx-seal b { font-size: 1.32rem; }
}
@media (max-width: 420px) {
  .nsx .nsx-blk-nav i:nth-child(4) { display: none; }
  .nsx .nsx-fig b { letter-spacing: -0.05em; }
}

/* ============================================================
   DARK HEADER — sitewide, deliberate.
   Every template in this theme puts navy directly under the header
   (.page-head on pages, .hero-split on the old homepage, .post-hero
   on posts), so the pale sticky bar was the only light element in the
   frame and it read as a bar bolted on top of the design rather than
   part of it. This is the one unscoped change in this block.

   The mobile drawer is restyled with it. A dark header with a white
   drawer hanging off it is worse than either, and the drawer is the
   ONLY route to the other pages on a phone (rule 14), so it cannot be
   left to inherit half a theme.
   ============================================================ */
.site-header { background: rgba(8,13,24,0.88); border-bottom: 1px solid rgba(244,246,250,0.11); }
.site-header .wordmark { color: #fff; }
.site-header .wordmark-logo { filter: brightness(0) invert(1); }
.site-header .wordmark-logo.is-dark-variant { filter: none; }
.main-nav a.nav-link { color: rgba(244,246,250,0.72); }
.main-nav a.nav-link:hover { color: var(--accent); }
.main-nav a.nav-link.is-current { color: #fff; }
.nav-toggle span { background: #fff; }
.call-btn { background: var(--accent); color: #0b1120; box-shadow: 0 10px 24px rgba(245,166,35,0.28); }
.call-btn:hover { background: var(--accent-light); color: #0b1120; }
/* The shared footer's navy (#1a2540) sits several stops lighter than this
   homepage's ground and read as a pale slab bolted on the end. Scoped to the
   front page only: every other page still runs on the theme navy, and a
   #080d18 footer under a #1a2540 .page-head would be the same jump in reverse. */
body.home .site-footer { background: #080d18; border-top: 1px solid rgba(244,246,250,0.11); }

@media (max-width: 900px) {
  .main-nav { background: #0f172a; border-color: rgba(244,246,250,0.13); box-shadow: 0 24px 50px rgba(0,0,0,0.6); }
  .main-nav a.nav-link + a.nav-link { border-top-color: rgba(244,246,250,0.09); }
  .main-nav a.nav-link.is-current { background: rgba(245,166,35,0.12); color: var(--accent); }
}