/*
Theme Name: Locksmith Web Co
Theme URI: https://locksmithwebco.co.uk
Author: QB Digital Software Ltd
Author URI: https://qbdigital.co.uk
Description: Bespoke classic WordPress theme for Locksmith Web Co — websites, booking and local SEO for auto and domestic/general locksmiths across the UK. Styled in QB Digital's "Signal" brand: neon-on-ink, Archivo + JetBrains Mono.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: locksmithwebco
License: All Rights Reserved
License URI: https://qbdigital.co.uk
*/

/* ==========================================================================
   Design tokens — QB Digital "Signal" brand (matches qbdigital.co.uk, the
   small-business qb-smb theme, and the approved locksmithwebco/public/
   index.html reference): neon #40ff2b on ink, Archivo display + body,
   JetBrains Mono for kickers/labels.

   Committed single-theme DARK brand — there is no light mode and no
   [data-theme] toggle. Every colour and the body ground are painted
   explicitly below.

   Token NAMES are kept identical to the previous brass theme (--bg, --ink,
   --brass-strong, --btn-bg, etc.) so every selector further down this file
   keeps working unchanged — only the underlying Signal primitives they
   resolve to have changed. --ink is (as before) the TEXT colour, not a
   background — the literal near-black background hex lives in the new
   --signal-* primitives below and is exposed as --bg / --surface.
   ========================================================================== */
:root{
  /* Signal primitives */
  --signal-ink:#090a0b;      /* deepest ground — hero, default sections */
  --signal-carbon:#0e1113;   /* banded/alternate section ground */
  --signal-card:#14181b;     /* elevated card face (plates, header, footer) */
  --signal-card-2:#191e21;   /* nested chip/tag/mock-bar surface */
  --neon:#40ff2b;
  --on-neon:#04120a;         /* dark text for use on a SOLID neon fill (skip-link only) */

  /* semantic tokens used throughout this stylesheet */
  --bg:var(--signal-ink);
  --bg-elevated:var(--signal-card);
  --surface:var(--signal-carbon);
  --surface-2:var(--signal-card-2);
  --ink:rgba(255,255,255,.92);        /* primary text on dark ground */
  --ink-muted:rgba(255,255,255,.60);  /* secondary / lede text */
  --line:rgba(255,255,255,.10);
  --brass:var(--neon);                /* decorative / large text / icons / borders */
  --brass-strong:var(--neon);         /* body-size text, links, focus */
  --brass-soft:rgba(64,255,43,.14);   /* tints, hover backgrounds */
  --btn-bg:rgba(64,255,43,.14);
  --btn-bg-hover:rgba(64,255,43,.24);
  --btn-text:var(--neon);
  --btn-ring:rgba(64,255,43,.4);
  --btn-ring-hover:rgba(64,255,43,.75);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.6);

  --font-display:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --container:1180px;
  color-scheme: dark;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto;}

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  color:var(--ink);
}
p{margin:0;}
a{color:inherit;}
ul{margin:0;padding:0;list-style:none;}

.skip-link{
  position:absolute; left:1rem; top:-3rem;
  background:var(--neon); color:var(--on-neon);
  padding:.65rem 1rem; border-radius:.25rem; font-weight:700;
  transition:top .2s ease;
  z-index:100;
}
.skip-link:focus{top:1rem;}

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

:focus-visible{
  outline:2px solid var(--brass-strong);
  outline-offset:3px;
  border-radius:2px;
}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem);
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(64,255,43,.7);
  font-weight:600;
}
.lede{
  font-size:1.0625rem;
  color:var(--ink-muted);
  max-width:60ch;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-weight:700;
  font-size:.95rem;
  padding:.85rem 1.5rem;
  border-radius:.3rem;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  min-height:44px;
}
@media (prefers-reduced-motion: no-preference){
  .btn:hover{transform:translateY(-1px);}
}
.btn-primary{
  background:var(--btn-bg);
  color:var(--btn-text);
  box-shadow:inset 0 0 0 1px var(--btn-ring);
}
.btn-primary:hover{background:var(--btn-bg-hover); box-shadow:inset 0 0 0 1px var(--btn-ring-hover);}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{border-color:var(--brass-strong); color:var(--brass-strong);}
.btn-on-brass{
  background:var(--bg-elevated);
  color:var(--brass-strong);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn-on-brass:hover{background:var(--surface);}

section{padding-block:clamp(3.5rem,8vw,6.5rem);}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.85rem;
}
.logo{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display);
  font-weight:700; font-size:1.05rem;
  letter-spacing:.01em;
  text-decoration:none;
  color:var(--ink);
}
.logo .mark{color:var(--brass-strong); flex:none;}
.logo .co{
  font-family:var(--font-mono); font-weight:500;
  color:var(--brass-strong); font-size:.8em;
}
nav.primary-nav{display:none;}
@media (min-width:900px){
  nav.primary-nav{
    display:flex; align-items:center; gap:2rem;
    font-size:.9rem; font-weight:600;
  }
  nav.primary-nav ul{display:flex; align-items:center; gap:2rem;}
  nav.primary-nav a{text-decoration:none; color:var(--ink-muted);}
  nav.primary-nav a:hover{color:var(--brass-strong);}
}
.header-cta{display:inline-flex;}
.header-cta .cta-short{display:none;}
@media (max-width:479px){
  /* Widths checked with canvas.measureText() against the live fonts down to
     a 320px viewport (the toggle button below adds a fixed 44px + one more
     gap to this row, so it was re-verified after adding it) — comfortably
     fits with ~20px to spare at 320px. */
  .header-inner{gap:.5rem;}
  .logo{font-size:.85rem; gap:.4rem;}
  .header-cta{padding:.5rem .65rem; font-size:.78rem;}
  .header-cta .cta-full{display:none;}
  .header-cta .cta-short{display:inline;}
}

/* Current-page indicator on the primary/footer nav — added by WordPress core
   (current-menu-item class + aria-current="page") whenever a real "Primary
   Menu" is assigned in Appearance > Menus; harmless no-op with the fallback
   nav, which never sets either. */
nav.primary-nav a[aria-current="page"],
.footer-col a[aria-current="page"]{
  color:var(--brass-strong);
}

/* ---------- Mobile nav (hamburger + dropdown panel) ----------
   Below 900px (the same breakpoint that hides the desktop nav.primary-nav
   row) the SAME <nav id="primary-nav-panel"> — one wp_nav_menu() render, no
   duplicate markup — is repurposed as a full-width dropdown panel toggled by
   .nav-toggle. mobile-nav.js drives the open/close state via a `.is-open`
   class + aria-expanded; everything panel-related is scoped inside this
   max-width query so it can never fight the desktop `display:flex` rule
   above regardless of what class is left on the DOM (e.g. after a resize
   while open). */
.nav-toggle{
  display:none;
  align-items:center; justify-content:center;
  width:44px; height:44px;
  padding:0; margin:0;
  background:transparent;
  border:1px solid var(--line);
  border-radius:.4rem;
  color:var(--ink);
  cursor:pointer;
}
.nav-toggle:hover{border-color:var(--brass-soft); color:var(--brass-strong);}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

@media (max-width:899.98px){
  .nav-toggle{display:inline-flex;}

  nav.primary-nav{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    background:var(--bg-elevated);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);
    padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.5rem;
    max-height:calc(100vh - 100%);
    overflow-y:auto;
  }
  nav.primary-nav.is-open{display:block;}
  nav.primary-nav ul{display:flex; flex-direction:column;}
  nav.primary-nav li{border-top:1px solid var(--line);}
  nav.primary-nav li:first-child{border-top:none;}
  nav.primary-nav a{
    display:flex; align-items:center;
    min-height:44px;
    font-size:1rem; font-weight:600;
    color:var(--ink);
    text-decoration:none;
  }
  nav.primary-nav a:hover,
  nav.primary-nav a:focus-visible{color:var(--brass-strong);}

  .nav-backdrop{
    display:block;
    position:fixed; inset:0;
    background:color-mix(in srgb, var(--bg) 60%, transparent);
    z-index:30;
  }
  .nav-backdrop[hidden]{display:none;}
}
@media (min-width:900px){
  .nav-backdrop{display:none !important;}
}
/* Applied to <html> by mobile-nav.js while the panel is open, so the page
   behind the dropdown/backdrop can't scroll. Never applies at >=900px since
   the panel can't be open there (matchMedia reset in the script). */
html.nav-scroll-lock{overflow:hidden;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% -12%, rgba(64,255,43,.14), transparent 46%),
    radial-gradient(circle at 6px 6px, rgba(64,255,43,.18) 1.4px, transparent 1.6px) 0 0/28px 28px,
    var(--bg);
  padding-block:clamp(3.5rem,9vw,6rem);
}
.hero-grid{
  display:grid; gap:2.5rem;
  align-items:center;
}
@media (min-width:960px){
  .hero-grid{grid-template-columns:1.1fr .9fr;}
}
.hero h1{
  font-weight:900;
  font-size:clamp(2.35rem,5.4vw,3.75rem);
  margin-block:.85rem 1.1rem;
}
.hero h1 em{
  font-style:normal;
  color:var(--brass-strong);
}
.hero .lede{font-size:1.15rem; max-width:52ch;}
.cta-row{
  display:flex; flex-wrap:wrap; gap:.85rem;
  margin-top:1.75rem;
}
.trust-strip{
  display:flex; flex-wrap:wrap; gap:.6rem 1.5rem;
  margin-top:2.25rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.trust-item{
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; color:var(--ink-muted); font-weight:500;
}
.trust-item svg{flex:none; color:var(--brass-strong);}

.hero-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1;
  max-width:420px; margin-inline:auto;
}
.hero-art .ring{
  position:absolute; inset:0;
  border:1px dashed var(--line);
  border-radius:50%;
}
.hero-art .ring.r2{inset:12%; border-style:solid; opacity:.6;}
.key-illustration{width:62%; height:auto; color:var(--brass-strong);}

/* ---------- Section headers ---------- */
.section-head{
  max-width:64ch;
  margin-bottom:clamp(2rem,5vw,3rem);
}
.section-head h2{
  font-size:clamp(1.65rem,3.6vw,2.5rem);
  margin-top:.6rem;
}
.section-head.center{margin-inline:auto; text-align:center;}

/* ---------- Service cards ---------- */
.services{background:var(--surface);}
.card-grid{
  display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.plate{
  position:relative;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:1.75rem 1.6rem 1.6rem;
  background-image:
    radial-gradient(circle at 14px 14px, var(--line) 0 2.6px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--line) 0 2.6px, transparent 2.8px),
    radial-gradient(circle at 14px calc(100% - 14px), var(--line) 0 2.6px, transparent 2.8px),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--line) 0 2.6px, transparent 2.8px);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (prefers-reduced-motion: no-preference){
  .plate:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brass-soft);}
}
.plate .icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:.4rem;
  background:color-mix(in srgb, var(--brass) 14%, transparent);
  color:var(--brass-strong);
  margin-bottom:1rem;
}
.plate h3{font-size:1.15rem; margin-bottom:.5rem;}
.plate p{color:var(--ink-muted); font-size:.94rem;}

/* ---------- Why us ---------- */
.why-us .container{
  display:grid; gap:2.5rem;
}
@media (min-width:880px){
  .why-us .container{grid-template-columns:.9fr 1.1fr; align-items:start;}
}
.why-copy p{color:var(--ink-muted); margin-top:1rem; max-width:46ch;}
.why-list{
  display:grid; gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:.5rem;
  overflow:hidden;
}
.why-list li{
  display:flex; gap:.85rem;
  background:var(--bg-elevated);
  padding:1.1rem 1.25rem;
  font-size:.95rem;
}
.why-list svg{flex:none; margin-top:.15rem; color:var(--brass-strong);}
.why-list strong{display:block; font-weight:700; margin-bottom:.15rem;}
.why-list span{color:var(--ink-muted);}

/* ---------- Pricing ---------- */
.pricing{background:var(--surface);}
.price-banner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:.6rem;
  padding:1.5rem 1.75rem;
  margin-bottom:2.5rem;
}
.price-banner .amount{
  font-family:var(--font-mono);
  font-size:2rem; font-weight:600; color:var(--brass-strong);
}
.price-banner .amount span{font-size:1rem; color:var(--ink-muted); font-weight:500;}
.price-banner-note{margin-top:.35rem;}

.tier-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
}
.tier{
  position:relative;
  background:var(--bg-elevated);
  border-radius:.6rem;
  padding:1.9rem 1.7rem 1.7rem;
  display:flex; flex-direction:column; gap:1.25rem;
  border:1px solid var(--line);
  border-top:4px solid var(--tier-color, var(--brass));
}
/* Tier accent runs on a single-hue Signal-neon intensity ramp (dim -> mid ->
   full-bright neon) rather than a multi-hue palette — communicates the
   Bronze/Silver/Gold hierarchy while staying inside the one-accent Signal
   system (the tier names themselves already carry the label). */
.tier.bronze{--tier-color:rgba(255,255,255,.32);}
.tier.silver{--tier-color:rgba(64,255,43,.55);}
.tier.gold{--tier-color:var(--neon);}
.tier-head{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.tier-name{font-family:var(--font-display); font-size:1.25rem; font-weight:600;}
.tier-key{width:2.6rem; height:auto; color:var(--tier-color);}
.tier ul{display:flex; flex-direction:column; gap:.65rem; flex:1;}
.tier li{display:flex; gap:.6rem; font-size:.9rem; color:var(--ink-muted);}
.tier li svg{flex:none; margin-top:.2rem; color:var(--tier-color);}
.tier-foot{font-size:.8rem; color:var(--ink-muted); text-align:center; margin-top:2rem;}
.tier-foot-link{
  display:inline-block; margin-left:.4rem;
  color:var(--brass-strong); font-weight:600; text-decoration:none;
}
.tier-foot-link:hover{text-decoration:underline; text-underline-offset:2px;}

/* ---------- Portfolio ---------- */
.portfolio-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.mock{
  border-radius:.55rem;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-elevated);
  box-shadow:var(--shadow);
}
.mock-bar{
  display:flex; align-items:center; gap:.35rem;
  padding:.6rem .75rem;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.mock-bar span{width:8px; height:8px; border-radius:50%; background:var(--line);}
.mock-body{padding:1.1rem; display:flex; flex-direction:column; gap:.55rem;}
.mock-hero{
  height:52px; border-radius:.3rem;
  background:linear-gradient(120deg, var(--mock-tone,var(--neon)), color-mix(in srgb, var(--mock-tone,var(--neon)) 55%, var(--bg-elevated)));
}
.mock-line{height:8px; border-radius:4px; background:var(--surface-2);}
.mock-line.short{width:55%;}
.mock-cta{
  margin-top:.3rem; width:78px; height:22px; border-radius:4px;
  background:var(--mock-tone,var(--neon));
}
.mock-caption{padding:1rem 1.1rem 1.25rem;}
.mock-caption .eyebrow{font-size:.66rem;}
.mock-caption h3{font-size:1rem; margin-top:.3rem;}
.mock-caption p{font-size:.85rem; color:var(--ink-muted); margin-top:.25rem;}
/* Same single-accent neon-intensity ramp as the pricing tiers above — this
   trio (.mock.tone-a/b/c) isn't wired into any current template output, kept
   only so an unused-but-present class never falls back to a stray brass hex. */
.mock.tone-a{--mock-tone:rgba(255,255,255,.32);}
.mock.tone-b{--mock-tone:rgba(64,255,43,.55);}
.mock.tone-c{--mock-tone:var(--neon);}

/* ---------- SEO Performance Dashboard feature ---------- */
.dashboard-feature{background:var(--surface);}
.dashboard-grid{display:grid; gap:2.75rem;}
@media (min-width:960px){
  .dashboard-grid{grid-template-columns:.95fr 1.15fr; align-items:center; gap:3.5rem;}
}
.dashboard-copy .lede{margin-top:1rem; max-width:52ch;}
.dashboard-points{margin-top:1.75rem;}
.dashboard-copy .cta-row{margin-top:2rem;}

.dashboard-shot-wrap{min-width:0;}
.dashboard-frame{margin-inline:auto;}
.dashboard-frame picture{display:block;}
.dashboard-frame img{display:block; width:100%; height:auto;}
.dashboard-caption{
  margin-top:.85rem;
  font-size:.8rem; color:var(--ink-muted); text-align:center;
}

/* ---------- Case studies (real client builds) ---------- */
.case-grid{
  display:grid; gap:2rem;
  grid-template-columns:1fr; /* stacked full-width, one card per row */
}
.case-card{
  border-top:4px solid var(--case-color, var(--brass));
  display:flex; flex-direction:column;
}

/* Website screenshot — real capture of the live client site, wired in via
   the 'screenshot' entry on each case in locksmithwebco_case_studies()
   (functions.php), never hardcoded here. Inset within the card's existing
   .plate padding (matches every other card component in this theme — price
   tiers, service cards — rather than bleeding to the card edge). */
.case-card-media{margin-bottom:1.5rem;}
.case-card-media picture{display:block;}
.case-card-media img{
  display:block; width:100%; height:auto;
  border-radius:.5rem;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* .case-card--split — homepage/portfolio compact card only (short copy: flag,
   name, tagline, star line, two buttons). At >=700px the screenshot sits
   alongside that copy instead of stacked above it; below 700px the base
   .case-card{display:flex;flex-direction:column} rule already stacks the
   media (first in DOM) above the body, so this needs no extra mobile CSS.
   The full narrative cards (Our Work / case-study page — far denser: a
   paragraph, two meta-grids, badges, awards) deliberately do NOT get this
   split treatment — squeezing a 2-column .case-meta-grid into a ~60%-width
   body column reads cramped, so those keep the screenshot full-width on top
   and the copy full-width below. */
@media (min-width:700px){
  .case-card.case-card--split{
    display:grid;
    grid-template-columns:minmax(220px,38%) 1fr;
    align-items:center;
    gap:1.75rem;
  }
  .case-card--split .case-card-media{margin-bottom:0; min-width:0;}
  .case-card--split .case-card-body{display:flex; flex-direction:column; min-width:0;}
}
/* Single Signal accent for both case categories — content already carries
   the distinction (category text, business name, screenshot), so both tones
   share the one on-brand neon accent rather than reviving the old
   bronze/slate brass hues. The case-flag chip's contrast is guaranteed by
   design here (neon text always reads AA against a low-alpha neon tint on
   this dark ground), so the old per-tone --case-flag-text override (needed
   to fix a real AA failure under the brass palette) is no longer required. */
.case-card.tone-domestic,
.case-card.tone-auto{--case-color:var(--neon);}
.case-flag{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brass-strong); font-weight:700;
  background:color-mix(in srgb, var(--case-color, var(--brass)) 16%, transparent);
  padding:.3rem .6rem; border-radius:.25rem;
  width:fit-content;
}
/* Bug fix — inside a case-card, .plate p{color:var(--ink-muted)} (specificity
   0,1,1) outranked the .case-flag color rule above (0,1,0) and silently
   clobbered the intended neon tint. This restores it. */
.case-card .case-flag{
  color:var(--brass-strong);
}
.case-card h3{font-size:1.3rem; margin-top:.6rem;}
.case-card .lede{margin-top:.5rem; font-size:.95rem; max-width:none;}
.stars{display:inline-flex; gap:1px; color:var(--case-color, var(--brass-strong)); vertical-align:middle;}
.case-stars{
  display:flex; align-items:center; gap:.35rem;
  margin-top:.85rem;
  font-size:.85rem; font-weight:600; color:var(--ink);
}
/* Same .plate p specificity bug as .case-flag above — .plate p (0,1,1) beats
   the bare .case-stars rule (0,1,0) and was silently flattening the "5.0★ ·
   100+ reviews" line to --ink-muted wherever it sits inside a case-card. */
.case-card .case-stars{color:var(--ink);}
.case-stars .count{color:var(--ink-muted); font-weight:500;}
.case-card .trust-strip{margin-top:1.1rem; padding-top:1.1rem;}
.case-card .trust-item .stars{margin-right:.15rem;}
.case-meta-grid .lede{font-size:.9rem;}
.case-card .cta-row{margin-top:1.35rem;}
.case-full .case-card{padding:2.1rem 1.9rem 1.9rem;}
.case-narrative{color:var(--ink-muted); font-size:.98rem; margin-top:.9rem;}
.case-meta-grid{display:grid; gap:1.5rem; margin-top:1.5rem;}
@media (min-width:760px){.case-meta-grid{grid-template-columns:1fr 1fr;}}
/* h4 on the Our Work page (nested under a real h3 case-name heading); h3 on
   the individual case-study page, where "The build" is already h2 and there
   is no intervening h3 — both share this label styling. */
.case-meta-grid h3,
.case-meta-grid h4{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-muted); margin-bottom:.65rem;
  font-weight:600;
}
.case-tag-list{display:flex; flex-wrap:wrap; gap:.5rem;}
.case-tag-list li{
  font-size:.82rem; background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.35rem .75rem; color:var(--ink-muted);
}
.case-award-list li{display:flex; gap:.6rem; font-size:.9rem; color:var(--ink-muted); align-items:flex-start; padding-block:.15rem;}
.case-award-list svg{flex:none; margin-top:.2rem; color:var(--case-color, var(--brass-strong));}

/* Individual case-study page */
.case-hero{background:var(--surface); padding-bottom:2.5rem;}
.case-hero .back-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.85rem; font-weight:600; color:var(--brass-strong); text-decoration:none;
  margin-bottom:1.5rem;
}
.case-hero .back-link:hover{color:var(--ink);}
.case-hero .case-flag{margin-bottom:.9rem;}
.case-hero .trust-strip{border-top:none; padding-top:0; margin-top:1.75rem;}

/* ---------- Testimonial ---------- */
.testimonial{
  background:var(--surface);
  color:var(--ink);
}
.testimonial .container{max-width:820px; text-align:center;}
.testimonial blockquote{
  margin:0;
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(1.4rem,3.2vw,2rem);
  line-height:1.35;
  text-wrap:balance;
}
.testimonial cite{
  display:block; margin-top:1.5rem;
  font-style:normal; font-family:var(--font-mono);
  font-size:.85rem; color:var(--brass-strong); letter-spacing:.04em;
}

/* ---------- FAQ ---------- */
.faq-list{
  display:grid; gap:.75rem;
  max-width:820px;
}
details{
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:1rem 1.25rem;
}
summary{
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:700; font-size:1rem;
}
summary::-webkit-details-marker{display:none;}
summary .plus{
  flex:none; width:1.5rem; height:1.5rem;
  border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--brass-strong);
  transition:transform .2s ease;
}
details[open] summary .plus{transform:rotate(45deg);}
details p{color:var(--ink-muted); margin-top:.85rem; font-size:.95rem; max-width:62ch;}

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative;
  overflow:hidden;
  background:var(--bg);
  border-top:1px solid var(--line);
}
.final-cta::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 120%, rgba(64,255,43,.12), transparent 60%);
}
.final-cta .container{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem;
}
.final-cta h2{color:var(--ink); font-weight:900; font-size:clamp(1.9rem,4.4vw,3rem);}
.final-cta .lede{color:var(--ink-muted); max-width:48ch;}
.final-cta .cta-row{justify-content:center;}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--surface);
  border-top:1px solid var(--line);
  padding-block:3rem 2rem;
}
.footer-grid{
  display:grid; gap:2.5rem;
  grid-template-columns:1.3fr repeat(2,1fr);
}
@media (max-width:760px){ .footer-grid{grid-template-columns:1fr;} }
.footer-brand .logo{margin-bottom:.75rem;}
.footer-brand p{color:var(--ink-muted); font-size:.9rem; max-width:32ch;}
.footer-col h4{
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:.9rem;
}
.footer-col ul{display:flex; flex-direction:column; gap:.6rem;}
.footer-col a{text-decoration:none; font-size:.9rem; color:var(--ink);}
.footer-col a:hover{color:var(--brass-strong);}
.footer-bottom{
  margin-top:2.75rem; padding-top:1.75rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; align-items:center; justify-content:space-between;
  font-size:.8rem; color:var(--ink-muted);
}
.footer-bottom a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.footer-bottom a:hover{color:var(--brass-strong);}

/* ---------- Inner-page intro (Pricing / Our Work / Contact page templates) ---------- */
.page-intro{padding-bottom:0;}
.page-intro .section-head{margin-bottom:0;}

/* ---------- Reveal on scroll ---------- */
[data-reveal]{opacity:1; transform:none;}
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease;}
  [data-reveal].is-visible{opacity:1; transform:none;}
}

/* ---------- WP core alignment / editor-content helpers (page.php / singular.php) ---------- */
.entry-content{color:var(--ink-muted);}
.entry-content > * + *{margin-top:1.25rem;}
.entry-content a{color:var(--brass-strong); text-decoration:underline; text-underline-offset:2px;}
.alignwide{width:100%;}
.alignfull{width:100vw; margin-left:calc(50% - 50vw);}

/* ---------- Lightbox trigger (case-study + dashboard screenshots) ----------
   Wraps the existing thumbnail <picture> in a plain <button> so the whole
   image is a single native, keyboard-operable control (click/Enter/Space —
   no extra JS needed for that part). The dialog markup itself is built once
   by assets/js/lightbox.js and appended to <body>; see that file for the
   open/close/focus-trap behaviour. */
.lightbox-trigger{
  display:block;
  width:100%;
  padding:0; margin:0; border:0;
  background:transparent;
  font:inherit; color:inherit; text-align:inherit;
  cursor:zoom-in;
  position:relative;
}
.lightbox-trigger img{cursor:zoom-in;}
.lightbox-trigger .lightbox-affordance{
  position:absolute;
  right:.75rem; bottom:.75rem;
  width:2.25rem; height:2.25rem;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  color:#fff;
  border-radius:.35rem;
  opacity:0;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .lightbox-trigger .lightbox-affordance{transition:opacity .15s ease;}
}
.lightbox-trigger:hover .lightbox-affordance,
.lightbox-trigger:focus-visible .lightbox-affordance{opacity:1;}
/* Coarse-pointer (touch) devices can't hover — show the affordance so the
   image still visibly communicates that it's tappable. */
@media (hover:none){
  .lightbox-trigger .lightbox-affordance{opacity:1;}
}

/* ---------- Lightbox dialog ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  opacity:0;
}
.lightbox-overlay[hidden]{display:none;}
@media (prefers-reduced-motion: no-preference){
  .lightbox-overlay{transition:opacity .2s ease;}
}
.lightbox-overlay.is-open{opacity:1;}
.lightbox-dialog{
  position:relative;
  max-width:min(96vw, 1400px);
  max-height:92vh;
  background:var(--bg-elevated);
  border:1px solid var(--line);
  border-radius:.55rem;
  box-shadow:0 24px 64px -20px rgba(0,0,0,.7);
  padding:2.75rem 1rem 1rem;
  display:flex; flex-direction:column;
  transform:scale(.97);
}
@media (prefers-reduced-motion: no-preference){
  .lightbox-dialog{transition:transform .2s ease;}
}
.lightbox-overlay.is-open .lightbox-dialog{transform:scale(1);}
@media (min-width:640px){
  .lightbox-dialog{padding:3rem 2rem 1.5rem;}
}
.lightbox-figure{margin:0; min-height:0; display:flex; flex-direction:column; overflow:auto;}
.lightbox-figure picture{display:block; min-height:0;}
.lightbox-img{
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:calc(92vh - 6.5rem);
  margin-inline:auto;
  border-radius:.3rem;
}
.lightbox-caption{
  margin-top:.85rem;
  font-size:.85rem; color:var(--ink-muted); text-align:center;
}
.lightbox-caption[hidden]{display:none;}
.lightbox-close{
  position:absolute;
  top:.75rem; right:.75rem;
  width:2.5rem; height:2.5rem;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:.4rem;
  color:var(--ink);
  cursor:pointer;
  min-width:44px; min-height:44px;
}
.lightbox-close:hover{border-color:var(--brass-soft); color:var(--brass-strong);}

/* Applied to <html> by lightbox.js while the dialog is open. Kept distinct
   from .nav-scroll-lock (mobile nav) so the two features can never clobber
   each other's lock state if one closes while the other thinks it's open. */
html.lightbox-scroll-lock{overflow:hidden;}