/*
Theme Name: WorksNet
Theme URI: https://welchmarketing.co.uk/
Author: Welch Marketing
Author URI: https://welchmarketing.co.uk/
Description: A premium, plugin-free WordPress theme for WorksNet, a web design and SEO studio. Dark navy aesthetic with a red accent, editable from a Welch Settings panel for branding, colours, contact details, pricing, reviews and SEO. Self-building: creates its own pages, menus and starter blog on activation.
Version: 1.32.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: worksnet
*/

/* ============================================================
   1. Design tokens (Linear-inspired) + reset
   Colours below are defaults. The Welch Settings panel can
   override --canvas, --primary and --primary-hover at runtime
   through an inline style printed in the head.
   ============================================================ */
:root {
  /* Surface ladder (Highscore navy) */
  --canvas: #16243c;
  --surface-1: #1b2c48;
  --surface-2: #213457;
  --surface-3: #26406a;
  --surface-4: #2b4776;

  /* Hairlines */
  --hairline: #2c3f61;
  --hairline-strong: #3a5079;
  --hairline-tertiary: #45597f;

  /* Ink */
  --ink: #ffffff;
  --ink-muted: #b7c3d5;
  --ink-subtle: #8b9bb5;
  --ink-tertiary: #6c7c98;

  /* Brand accent (red) */
  --primary: #cf0a2c;
  --on-primary: #ffffff;
  --primary-hover: #e83a55;
  --primary-focus: #cf0a2c;
  --success: #cf0a2c;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 9999px;

  /* Spacing (4px base) */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 84px;

  --maxw: 1200px;
  --nav-h: 80px;

  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Keep anchor targets clear of the fixed header when jumping to a section. */
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink-muted);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.05px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--primary-focus);
  outline-offset: 2px;
}

::selection { background: var(--primary); color: #fff; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 0.4em;
  letter-spacing: -0.8px;
  line-height: 1.15;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* Low-specificity icon backstop: intrinsic 1em so icons never balloon
   to the 300x150 replaced-element default when CSS is slow to load. */
.icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  flex: none;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* ============================================================
   2. Layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* Belt and braces: the page wrapper stays edge to edge so full-bleed sections
   (.hero, .page-hero, .showcase) always paint their backgrounds across the
   viewport. Inner .container elements handle max-width. */
#main {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.section { padding: var(--s-section) 0; }
.section--tight { padding: 64px 0; }
/* A sunken band, one step darker than the canvas, so a section (the logo and
   branding block on the pricing page) reads as visually separate from the
   website sections around it. The colour change at each edge is a deliberate
   break, and the lighter cards still stand out against it. */
.section--alt { background: #101a2e; }

.eyebrow {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--primary-hover);
  margin: 0 0 16px;
  display: block;
}

.section-head { max-width: 720px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: 40px;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.section-head p {
  font-size: 18px;
  color: var(--ink-subtle);
  line-height: 1.55;
  letter-spacing: -0.1px;
}

.lead { font-size: 18px; color: var(--ink-muted); line-height: 1.55; letter-spacing: -0.1px; }

/* ============================================================
   3. Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 11px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  white-space: nowrap;
  min-height: 42px;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--primary-hover); }

.btn--secondary {
  background: var(--surface-1);
  color: var(--ink);
  border-color: var(--hairline);
}
.btn--secondary:hover { border-color: var(--hairline-strong); background: var(--surface-2); }

.btn--inverse { background: #fff; color: #000; }
.btn--inverse:hover { background: #e9eaea; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn--ghost:hover { background: var(--surface-1); }

.btn .icon { width: 16px; height: 16px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.textlink {
  color: var(--primary-hover);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.textlink:hover { color: var(--ink); }
.textlink .icon { width: 15px; height: 15px; transition: transform .15s ease; }
.textlink:hover .icon { transform: translateX(3px); }

/* ============================================================
   4. Header + navigation
   ============================================================ */
/* Fixed header, transparent at the very top so the dark stage (and the beam on
   the home page) runs up behind it, then a solid bar fades in once scrolled
   (the .wn-stuck class is toggled by a small script). Every template opens with
   a .hero or .page-hero carrying enough top padding to clear it.
   Note: do not add backdrop-filter OR transform here. Either would become the
   containing block for the fixed mobile menu and trap it inside the header. */
.site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.wn-stuck {
  background: #0c1626;
  border-bottom-color: var(--hairline);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.85);
}
/* Three columns: brand left, nav centred, actions right. */
.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  height: var(--nav-h);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); justify-self: start; }
.brand .brand-mark { height: 30px; width: auto; }
.brand svg { display: block; }
.brand .logo-img { max-height: 34px; width: auto; }

.primary-nav { justify-self: center; }
.primary-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  display: inline-block;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a { color: var(--ink); }
/* Brighter nav on the transparent home header. */
.home .primary-nav a { color: rgba(255, 255, 255, 0.80); }
.home .primary-nav a:hover,
.home .primary-nav .current-menu-item > a { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }

/* Mobile toggle (pure CSS, hidden checkbox + label) */
.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--surface-1);
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translate(-50%, -8px); }
.nav-toggle span::after { transform: translate(-50%, 6px); }

/* ============================================================
   5. Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 132px 0 80px;
  overflow: hidden;
  /* Dark stage: side vignette over a navy centre that fades down, so the beam
     glow reads against near-black edges. */
  background:
    linear-gradient(90deg, #06090e 0%, rgba(6, 9, 14, 0) 24%, rgba(6, 9, 14, 0) 76%, #06090e 100%),
    radial-gradient(135% 100% at 50% 6%, #14243e 0%, #0c1626 46%, #070b13 100%);
}

/* Fine dot grid, masked so it is brightest around the beam and fades out with
   distance. The beam script publishes its measured position as --beam-x/--beam-y;
   the percentage fallbacks keep a sensible fade if that script never runs. */
.hero-dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(200, 212, 240, 0.22) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-mask-image: radial-gradient(44% 68% at var(--beam-x, 62%) var(--beam-y, 40%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 46%, rgba(0, 0, 0, 0) 85%);
  mask-image: radial-gradient(44% 68% at var(--beam-x, 62%) var(--beam-y, 40%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 46%, rgba(0, 0, 0, 0) 85%);
}
.hero .container { position: relative; z-index: 1; }

/* "Molten beam" animation: a white hot to brand red shaft that flows down and
   bursts into a glowing pool. Drawn on canvas by a script in the footer; screen
   blend so the light adds over the navy stage. Blank if the script does not run. */
.hero-rainbow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Give the hero call to action a warm brand glow. */
.hero .btn--primary {
  box-shadow: 0 0 0 1px rgba(207, 10, 44, 0.35), 0 12px 44px -10px rgba(207, 10, 44, 0.65);
}

/* ============================================================
   5b. Border beam (animated light travelling around a button edge)
   ============================================================
   Pure CSS take on Magic UI's BorderBeam, applied to every .btn across the site
   except the solid red primary buttons, where a red ring would be lost anyway.
   A conic gradient is rotated by an animated custom property; a two layer mask
   hides everything except a thin ring, so the beam appears to run around the
   edge and the label stays crisp. Two beams chase each other half a cycle
   apart, in the same brand red to white palette as the hero light beam, one
   leading with red and one with white. Where @property is unsupported the ring
   sits still. */
@property --wn-beam-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --wn-beam-b {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.btn { position: relative; }
.btn:not(.btn--primary)::before,
.btn:not(.btn--primary)::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.btn:not(.btn--primary)::before {
  background: conic-gradient(from var(--wn-beam-a),
    transparent 0 56%,
    rgba(207, 10, 44, 0.85) 65%,
    rgba(255, 120, 140, 0.95) 72%,
    #ffffff 79%,
    rgba(207, 10, 44, 0.85) 88%,
    transparent 95% 100%);
  animation: wn-beam-a 5s linear infinite;
}
.btn:not(.btn--primary)::after {
  background: conic-gradient(from var(--wn-beam-b),
    transparent 0 56%,
    rgba(255, 255, 255, 0.9) 66%,
    rgba(255, 120, 140, 0.95) 74%,
    rgba(207, 10, 44, 0.9) 84%,
    transparent 95% 100%);
  animation: wn-beam-b 5s linear infinite;
  animation-delay: -2.5s;
}
@keyframes wn-beam-a { to { --wn-beam-a: 360deg; } }
@keyframes wn-beam-b { to { --wn-beam-b: 360deg; } }

/* Decorative outlined squares (parallax on scroll via a small script) */
.wn-deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deco-box {
  position: absolute;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  opacity: 0.55;
  will-change: transform;
}
.deco-box.red { border-color: rgba(207,10,44,0.5); }
.deco-box.cyan { border-color: rgba(53,199,224,0.4); }
.deco-box.soft { opacity: 0.32; }
.deco-box.fill { background: rgba(255,255,255,0.015); }

/* Keep section content above its decorative layer */
.section { position: relative; }
.section > .container { position: relative; z-index: 1; }
.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* fill the viewport so the panel can drop to the bottom, under the copy */
  min-height: calc(100vh - 212px);
}
.hero-copy { max-width: 560px; }
.hero h1 {
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: -3px;
  margin-bottom: 20px;
}
/* Aurora text on the highlighted words: an animated multi colour gradient
   clipped to the letters, in the spirit of Magic UI's AuroraText. The palette
   starts and ends on the brand red so the phrase still reads as the red words,
   sweeping through a lighter red to white highlight in between. Wrapped in @supports
   so any browser without background-clip: text keeps solid, readable colour
   rather than showing invisible text. */
.hero h1 .accent { color: var(--primary-hover); }

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .accent {
    background-image: linear-gradient(115deg, #cf0a2c, #ff6a84, #ffffff, #ff6a84, #cf0a2c);
    background-size: 200% auto;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: wn-aurora 9s linear infinite;
  }
}
@keyframes wn-aurora {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
.hero .lead { font-size: 20px; margin-bottom: 28px; max-width: 34ch; }
.hero-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-note .icon { width: 15px; height: 15px; color: var(--success); }

/* Hero panel is a monitor, sharing the .dev-* device styles used by the
   showcase section below. The screen shows the uploaded hero image if one is
   set, otherwise the same abstract wireframe as the showcase monitor. */
.hero-panel {
  align-self: flex-end;
  width: 100%;
  max-width: 640px;
  margin-top: auto;
}
.hero-panel .dev--desktop { width: 100%; }
/* cover, so the screenshot fills the monitor with no side gaps. Anchored to the
   top so the header and headline stay in view and any crop comes off the bottom. */
.hero-panel .dev-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #0b1220; }

/* ============================================================
   5c. Device showcase section
   ============================================================
   Same dark stage as the hero and footer: side vignette over a navy centre,
   with the dot grid on its own masked layer so it fades out into the dark
   sides. isolate is required, or the z-index: -1 dot layer falls behind this
   element's own background and disappears. */
.showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, #06090e 0%, rgba(6, 9, 14, 0) 24%, rgba(6, 9, 14, 0) 76%, #06090e 100%),
    radial-gradient(135% 100% at 50% 6%, #14243e 0%, #0c1626 46%, #070b13 100%);
}
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(200, 212, 240, 0.20) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-mask-image: radial-gradient(68% 62% at 50% 48%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0) 88%);
          mask-image: radial-gradient(68% 62% at 50% 48%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0.5) 62%, rgba(0, 0, 0, 0) 88%);
}

/* Device frames, drawn in markup so they stay sharp and need no image files. */
.devices { display: flex; align-items: flex-end; justify-content: center; gap: 26px; }
.dev { position: relative; }
.dev-screen { position: relative; overflow: hidden; background: #0b1220; }

.dev--desktop { width: min(600px, 56%); }
.dev--desktop .dev-screen {
  aspect-ratio: 16 / 10;
  border: 10px solid #1b2740;
  border-radius: 10px;
  box-shadow: 0 30px 70px -35px rgba(0, 0, 0, 0.9);
}
.dev--desktop .dev-neck { width: 58px; height: 26px; margin: 0 auto; background: #1b2740; }
.dev--desktop .dev-base { width: 184px; height: 9px; margin: 0 auto; border-radius: 0 0 7px 7px; background: #22304d; }

.dev--tablet { width: 186px; }
.dev--tablet .dev-screen {
  aspect-ratio: 3 / 4;
  border: 8px solid #1b2740;
  border-radius: 12px;
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.9);
}

.dev--phone { width: 102px; }
.dev--phone .dev-screen {
  aspect-ratio: 9 / 19;
  border: 6px solid #1b2740;
  border-radius: 14px;
  box-shadow: 0 20px 50px -28px rgba(0, 0, 0, 0.9);
}
.dev-notch {
  position: absolute; z-index: 2;
  top: 9px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 5px; border-radius: 3px;
  background: #1b2740;
}

/* Abstract page inside each screen. Flex ratios so one set of rules scales
   correctly from the phone up to the monitor. */
.dev-ui { position: absolute; inset: 0; padding: 6%; display: flex; flex-direction: column; gap: 4%; }
.u-bar { flex: 0 0 8%; display: flex; align-items: center; gap: 5%; }
.u-bar i { width: 9%; aspect-ratio: 1; border-radius: 2px; background: var(--primary); }
.u-bar b { flex: 1; height: 3px; border-radius: 2px; background: #22304d; }
.u-hero { flex: 0 0 34%; border-radius: 4px; background: linear-gradient(150deg, rgba(207, 10, 44, 0.35) 0%, #16273f 60%, #0c1524 100%); }
.u-line { flex: 0 0 4%; border-radius: 2px; background: #22304d; }
.u-line.short { width: 55%; }
.u-cards { flex: 1; display: flex; align-items: flex-end; gap: 4%; }
.u-cards em { flex: 1; height: 70%; border-radius: 3px; background: #131f33; border: 1px solid #22304d; }

@media (max-width: 900px) {
  .devices { gap: 16px; }
  .dev--tablet { width: 148px; }
  .dev--phone { width: 84px; }
}
@media (max-width: 620px) {
  .devices { gap: 14px; }
  .dev--tablet { display: none; }
  .dev--desktop { width: 74%; }
  .dev--phone { width: 78px; }
}

/* ============================================================
   6. Trust / logos marquee
   ============================================================ */
.trust { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.trust .container { padding-top: 40px; padding-bottom: 40px; }
.trust p { text-align: center; color: var(--ink-tertiary); font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 22px; }
.trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
}
.trust-row span { color: var(--ink-subtle); font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.4px; opacity: .8; }

/* ============================================================
   7. Cards / feature grid
   ============================================================ */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 24px;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.card--hover:hover { border-color: var(--hairline-strong); background: var(--surface-2); transform: translateY(-2px); }

/* Spotlight cards (React Bits SpotlightCard, ported to vanilla): a soft brand
   glow follows the cursor across the card. Just a gradient driven by two custom
   properties a pointer handler updates, so there is no animation loop at all.
   Falls back to a plain card if the script never runs. */
.card--hover {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
}
.card--hover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(232, 58, 85, 0.16), transparent 70%);
  opacity: 0;
  transition: opacity .45s ease;
}
.card--hover:hover::before,
.card--hover:focus-within::before { opacity: 1; }

/* Scroll reveal for the sections below the hero. The class is added by script,
   and only to elements that start below the fold, so nothing can ever be left
   invisible with JavaScript off or for content already on screen. */
.wn-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.wn-reveal.is-in { opacity: 1; transform: none; }
.card h3 { font-size: 20px; letter-spacing: -0.4px; margin-bottom: 8px; }
.card p { color: var(--ink-subtle); font-size: 15px; line-height: 1.55; }

.card-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  color: var(--primary-hover);
  margin-bottom: 16px;
}
.card-icon .icon { width: 20px; height: 20px; }

.card-index { font-family: var(--font-mono); font-size: 13px; color: var(--primary-hover); margin-bottom: 12px; display: block; }

.card-list { list-style: none; margin: 16px 0 0; padding: 0; }
.card-list li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--ink-muted); font-size: 15px; }
.card-list li .icon { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; color: var(--success); }

/* ============================================================
   8. Portfolio
   ============================================================ */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.work-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  aspect-ratio: 4 / 3;
}
.work-card .work-media { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(207,10,44,0.32), rgba(22,36,60,0.65)); }
.work-card:nth-child(2) .work-media { background: linear-gradient(160deg, rgba(53,199,224,0.28), rgba(22,36,60,0.65)); }
.work-card:nth-child(3) .work-media { background: linear-gradient(160deg, rgba(240,150,90,0.26), rgba(22,36,60,0.7)); }
/* contain, not cover, so the whole screenshot shows with nothing cropped off
   the sides. The dark background fills the letterbox area cleanly. */
.work-card .work-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; background: #0b1220; display: block; }
.work-card .work-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, transparent 30%, rgba(1,1,2,0.85));
  z-index: 1;
}
.work-card .work-overlay h3 { font-size: 20px; margin-bottom: 4px; }
.work-card .work-overlay span { color: var(--ink-subtle); font-size: 14px; }

/* ============================================================
   9. Process steps
   ============================================================ */
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step .step-num {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 15px; color: var(--primary-hover);
}
.step h3 { font-size: 22px; letter-spacing: -0.4px; margin-bottom: 6px; }
.step p { color: var(--ink-subtle); font-size: 16px; max-width: 62ch; }

/* ============================================================
   10. Pricing
   ============================================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
}
.price-card.featured { background: var(--surface-2); border-color: var(--hairline-strong); }

/* Electric border on the featured package card. Vanilla port of React Bits'
   ElectricBorder: a canvas traces the card's rounded rectangle and displaces it
   with fractal noise, sitting over layered CSS glows. Progressive, so without
   the script the card keeps the soft glow and simply loses the animated arc.
   Change --eb-color to recolour the whole effect. */
.price-card.featured {
  position: relative;
  isolation: isolate;
  --eb-color: #7df9ff;
  --eb-color-soft: rgba(125, 249, 255, 0.6);
}
.price-card.featured .eb-layers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}
.price-card.featured .eb-layers > span {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
}
.price-card.featured .eb-glow-1 { border: 2px solid var(--eb-color-soft); filter: blur(1px); }
.price-card.featured .eb-glow-2 { border: 2px solid var(--eb-color); filter: blur(4px); }
.price-card.featured .eb-bg-glow {
  z-index: -1;
  transform: scale(1.08);
  filter: blur(32px);
  opacity: 0.3;
  background: linear-gradient(-30deg, var(--eb-color), transparent, var(--eb-color));
}
.price-card.featured .eb-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
  z-index: 2;
}
/* Pinned to the corner rather than sitting in the flow, so the featured card's
   heading and price line up with the cards either side of it. */
.price-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--on-primary);
  background: var(--primary);
  padding: 3px 10px;
  border-radius: var(--r-pill);
}
/* Keep a long package name clear of the badge. */
.price-card.featured h3 { padding-right: 108px; }
.price-card h3 { font-size: 20px; margin-bottom: 6px; }
.price-card .price-desc { color: var(--ink-subtle); font-size: 14px; min-height: 42px; }
.price-amount { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 40px; letter-spacing: -1.4px; margin: 14px 0 2px; }
.price-amount small { font-size: 15px; color: var(--ink-subtle); font-weight: 400; letter-spacing: 0; }
.price-note { color: var(--ink-tertiary); font-size: 13px; margin-bottom: 20px; }
.price-features { list-style: none; margin: 4px 0 24px; padding: 0; }
.price-features li { position: relative; padding-left: 26px; margin-bottom: 11px; color: var(--ink-muted); font-size: 15px; }
.price-features li .icon { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; color: var(--success); }
.price-card .btn { margin-top: auto; width: 100%; justify-content: center; }

/* ============================================================
   10b. Pricing page
   ============================================================ */
/* "Something bigger" note under the websites row: text on the left, action on
   the right, stacks on small screens. */
.pricing-more {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 22px;
  padding: 26px 30px;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
}
.pricing-more__text { flex: 1 1 auto; }
.pricing-more__text h3 { margin: 0 0 6px; font-size: 19px; color: var(--ink); }
.pricing-more__text p { margin: 0; color: var(--ink-muted); line-height: 1.55; max-width: 62ch; }
.pricing-more__cta { flex: 0 0 auto; white-space: nowrap; }

/* Price and button pinned to the foot of the card, so the buttons share a
   baseline across the row whatever the feature count above them. */
.price-foot { margin-top: auto; }
.price-foot .price-amount { margin: 0 0 14px; }
.price-foot .btn { margin-top: 0; width: 100%; justify-content: center; }
.price-from { font-family: var(--font-text); font-size: 15px; font-weight: 400; color: var(--ink-subtle); letter-spacing: 0; }
.price-text { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.5px; }

.vat-note { text-align: center; color: var(--ink-tertiary); font-size: 13px; margin: 24px 0 0; }
.row-note { text-align: center; color: var(--ink-subtle); font-size: 14px; margin: 22px auto 0; max-width: 62ch; }

/* Bundle cards reuse the .price-card chain. The price, the separate total and
   the saving sit in the foot, so the buttons share a baseline across the row. */
.bundle-blurb { color: var(--ink-subtle); font-size: 14px; line-height: 1.55; margin: 0 0 18px; }
.bundle-mo { color: var(--ink-muted); font-size: 15px; margin: -6px 0 14px; }
.bundle-compare { display: flex; flex-direction: column; gap: 3px; margin-bottom: 16px; }
.bundle-sep { color: var(--ink-tertiary); font-size: 13px; }
.bundle-save { color: var(--success); font-size: 13px; font-weight: 500; }

/* Ownership: a calm bordered panel. */
.ownership {
  max-width: 820px;
  margin: 0 auto;
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 40px;
}
.ownership h2 { font-size: 30px; letter-spacing: -0.8px; margin-bottom: 14px; }
.ownership p { color: var(--ink-muted); font-size: 17px; line-height: 1.65; margin-bottom: 14px; }
.ownership p:last-child { margin-bottom: 0; }

/* Comparison table: scrolls sideways on small screens rather than breaking. */
.compare-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-lg); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.compare-table thead th { background: var(--surface-2); color: var(--ink); font-size: 14px; letter-spacing: 0.2px; }
.compare-table tbody th { color: var(--ink); font-weight: 500; font-size: 16px; }
.compare-table td { color: var(--ink-muted); font-size: 16px; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* Bundle comparison table: centred value columns, the recommended column
   tinted, and readable ink for the tier names. Reuses .compare-table above. */
.bundle-compare-heading { text-align: center; font-size: 22px; letter-spacing: -0.5px; margin: 48px 0 20px; }
.bundle-compare-table thead th + th,
.bundle-compare-table td { text-align: center; }
.bundle-compare-table tbody th { white-space: nowrap; }
.bundle-compare-table td { color: var(--ink); }
.compare-table .is-featured-col { background: rgba(207, 10, 44, 0.06); }
.compare-table thead th.is-featured-col { box-shadow: inset 0 -2px 0 var(--primary); }
.compare-x { display: inline-flex; color: var(--ink-tertiary); }
.compare-x .icon { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .ownership { padding: 28px; }
  .pricing-more { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px; }
  .pricing-more__cta { width: 100%; justify-content: center; }
}

/* ============================================================
   11. Reviews
   ============================================================ */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.stars { display: flex; gap: 3px; margin-bottom: 14px; color: #f5c451; }
.stars .icon { width: 16px; height: 16px; }
.review-card p { font-size: 17px; line-height: 1.55; color: var(--ink); letter-spacing: -0.1px; }
.review-meta { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--surface-3);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-weight: 600; font-family: var(--font-display);
}
.review-name { color: var(--ink); font-weight: 500; font-size: 15px; }
.review-role { color: var(--ink-subtle); font-size: 13px; }

.reviews-empty {
  text-align: center;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-lg);
  padding: 48px 24px;
  color: var(--ink-subtle);
}

/* ============================================================
   12. About split
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split h2 { font-size: 36px; letter-spacing: -1px; }
.stat-row { display: flex; gap: 40px; margin-top: 28px; flex-wrap: wrap; }
.stat .stat-num { font-family: var(--font-display); font-weight: 600; font-size: 34px; color: var(--ink); letter-spacing: -1px; }
.stat .stat-label { color: var(--ink-subtle); font-size: 14px; margin-top: 2px; }

/* ============================================================
   13. FAQ (pure-CSS accordion)
   ============================================================ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 6px 0;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  position: relative;
  width: 18px; height: 18px; flex: none;
}
.faq summary .plus::before,
.faq summary .plus::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--ink-subtle);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.faq summary .plus::before { width: 16px; height: 2px; }
.faq summary .plus::after { width: 2px; height: 16px; }
.faq details[open] summary .plus::after { opacity: 0; }
.faq details[open] summary .plus::before { background: var(--primary-hover); }
.faq .faq-body { padding: 0 4px 22px; color: var(--ink-subtle); font-size: 16px; line-height: 1.6; max-width: 68ch; }

/* ============================================================
   14. CTA banner
   ============================================================ */
.cta-banner {
  background:
    radial-gradient(closest-side at 80% 0%, rgba(207,10,44,0.20), transparent 70%),
    var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: 56px 48px;
  text-align: center;
}
.cta-banner h2 { font-size: 34px; letter-spacing: -1px; margin-bottom: 10px; }
.cta-banner p { color: var(--ink-subtle); font-size: 18px; margin-bottom: 26px; }
.cta-banner .btn-row { justify-content: center; }

/* ============================================================
   15. Forms
   ============================================================ */
.form-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 32px;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; color: var(--ink-muted); margin-bottom: 7px; }
.field input,
.field textarea,
.field select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  padding: 12px 14px;
  transition: border-color .15s ease;
}
.field input:focus,
.field textarea:focus,
.field select:focus { border-color: var(--primary-focus); }
.field textarea { min-height: 140px; resize: vertical; }
/* Honeypot: visually hidden, off-screen */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice {
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin-bottom: 20px;
  font-size: 15px;
}
.form-notice.ok { background: rgba(39,166,68,0.12); border: 1px solid rgba(39,166,68,0.4); color: #7ee29a; }
.form-notice.err { background: rgba(207,46,46,0.12); border: 1px solid rgba(207,46,46,0.4); color: #f2a3a3; }

/* Brand Brief form: fieldsets, legends, a checkbox grid and paired field rows,
   built on the existing form tokens so it matches the contact form. */
.brief-wrap { max-width: 760px; margin: 0 auto; }
.brief-form fieldset {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 22px 22px 6px;
  margin: 0 0 24px;
  min-width: 0;
}
.brief-form legend {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 20px;
  letter-spacing: -0.4px;
  padding: 0 8px;
  margin-left: -4px;
}
.brief-form .field-help {
  color: var(--ink-subtle);
  font-size: 14px;
  margin: 0 0 18px;
}
/* A group label that is not tied to one input (used above a checkbox grid). */
.brief-form .field-label {
  display: block;
  font-size: 14px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
/* Visually hidden but read by screen readers, for labels the layout already
   makes obvious (e.g. a review's text box under its named heading). */
.sr-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Two fields side by side, stacking on narrow screens. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
.checkbox-grid .checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-muted);
  cursor: pointer;
}
.checkbox-grid .checkbox input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--primary);
  cursor: pointer;
}
.btn--lg { padding: 14px 24px; font-size: 15px; min-height: 50px; }
.form-note { color: var(--ink-tertiary); font-size: 13px; margin: 14px 0 0; }

@media (max-width: 560px) {
  .field-row,
  .checkbox-grid { grid-template-columns: 1fr; }
  .brief-form fieldset { padding: 18px 16px 4px; }
}

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-info .contact-item { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.contact-info .contact-item:first-child { padding-top: 0; }
.contact-info .icon-badge {
  width: 40px; height: 40px; flex: none;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-hover);
}
.contact-info .icon-badge .icon { width: 18px; height: 18px; }
/* Stack the label above the value. Both are inline spans, so without an explicit
   display they run together on one line ("Call us07809381274"). */
.contact-info .contact-item .label {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink-subtle);
  margin-bottom: 3px;
}
.contact-info .contact-item .value {
  display: block;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
}
.contact-info .contact-item .value a:hover { color: var(--primary-hover); }

/* ============================================================
   16. Service / location / generic page hero
   ============================================================ */
/* Inner page top section: same dark stage as the home hero and footer, minus the
   beam. Side vignette over a navy centre, with the dot grid on its own masked
   layer so it fades out into the dark sides. isolate is required, or the
   z-index: -1 dot layer falls behind this element's own background. Top padding
   clears the transparent header that overlays it. */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Explicit full width so the dark stage always spans edge to edge, whatever
     a template puts inside it. */
  display: block;
  width: 100%;
  padding: calc(var(--nav-h) + 52px) 0 56px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(90deg, #06090e 0%, rgba(6, 9, 14, 0) 24%, rgba(6, 9, 14, 0) 76%, #06090e 100%),
    radial-gradient(135% 100% at 50% 6%, #14243e 0%, #0c1626 46%, #070b13 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(200, 212, 240, 0.20) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-mask-image: radial-gradient(72% 78% at 50% 42%, rgba(0, 0, 0, 1) 26%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 88%);
          mask-image: radial-gradient(72% 78% at 50% 42%, rgba(0, 0, 0, 1) 26%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 88%);
}
.page-hero .breadcrumb { font-size: 13px; color: var(--ink-tertiary); margin-bottom: 16px; }
.page-hero .breadcrumb a:hover { color: var(--ink); }
.page-hero h1 { font-size: 48px; letter-spacing: -1.6px; margin-bottom: 14px; }
.page-hero p { font-size: 19px; color: var(--ink-subtle); max-width: 62ch; }

.prose { max-width: 760px; }
.prose h2 { font-size: 28px; letter-spacing: -0.6px; margin-top: 40px; }
.prose h3 { font-size: 21px; margin-top: 28px; }
.prose p { color: var(--ink-muted); font-size: 17px; line-height: 1.65; margin-bottom: 1.1em; }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1.2em; }
.prose ul li { position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--ink-muted); font-size: 17px; }
.prose ul li .icon { position: absolute; left: 0; top: 4px; width: 17px; height: 17px; color: var(--success); }
.prose a { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-size: 14px;
  color: var(--ink-muted);
}
.chip:hover { border-color: var(--hairline-strong); color: var(--ink); }
.chip .icon { width: 14px; height: 14px; color: var(--primary-hover); }

/* ============================================================
   17. Blog
   ============================================================ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.post-card {
  background: var(--surface-1);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 26px;
  display: flex;
  flex-direction: column;
}
.post-card:hover { border-color: var(--hairline-strong); }
.post-card .post-date { font-family: var(--font-mono); font-size: 12px; color: var(--ink-tertiary); margin-bottom: 12px; }
.post-card h3 { font-size: 20px; letter-spacing: -0.4px; margin-bottom: 10px; }
.post-card p { color: var(--ink-subtle); font-size: 15px; line-height: 1.55; margin-bottom: 20px; }
.post-card .textlink { margin-top: auto; }

/* Named wn-post, NOT single-post: WordPress adds a core "single-post" class to
   <body> on every blog post, so a bare .single-post rule matches the body itself
   and squashes the whole page to this width. Never name a theme class after a
   WordPress body class (single, single-post, page, blog, home, search, archive). */
.wn-post { max-width: 760px; margin: 0 auto; }
.wn-post .post-meta { color: var(--ink-tertiary); font-size: 14px; margin-bottom: 20px; font-family: var(--font-mono); }
.wn-post .prose img { border-radius: var(--r-lg); border: 1px solid var(--hairline); margin: 24px 0; }

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers {
  padding: 9px 15px; border: 1px solid var(--hairline); border-radius: var(--r-md);
  color: var(--ink-subtle); font-size: 14px; background: var(--surface-1);
}
.pagination .page-numbers.current { color: var(--ink); border-color: var(--hairline-strong); background: var(--surface-2); }
.pagination a.page-numbers:hover { color: var(--ink); border-color: var(--hairline-strong); }

/* ============================================================
   18. Footer
   ============================================================ */
/* Footer uses the same dark stage as the hero, minus the beam: a side vignette
   with near-black outer edges over a navy centre that fades down, so the page
   finishes on near-black. */
.site-footer {
  position: relative;
  /* isolate creates a stacking context, without which the z-index: -1 dot layer
     below would fall behind this element's own background and vanish. */
  isolation: isolate;
  border-top: 1px solid var(--hairline);
  padding: 64px 0 32px;
  background:
    linear-gradient(90deg, #06090e 0%, rgba(6, 9, 14, 0) 24%, rgba(6, 9, 14, 0) 76%, #06090e 100%),
    radial-gradient(135% 100% at 50% 6%, #14243e 0%, #0c1626 46%, #070b13 100%);
}

/* Dot grid on its own layer, masked so the dots genuinely fade away into the
   dark sides rather than just sitting under the vignette. Negative z-index keeps
   it above the footer background but below the footer content. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(200, 212, 240, 0.20) 1px, transparent 1px);
  background-size: 3px 3px;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%);
          mask-image: linear-gradient(90deg, transparent 4%, #000 30%, #000 70%, transparent 96%);
}
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-brand p { color: var(--ink-subtle); font-size: 15px; margin-top: 16px; max-width: 32ch; }
.footer-col h4 { font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 16px; font-family: var(--font-text); font-weight: 500; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--ink-subtle); font-size: 15px; }
.footer-col a:hover { color: var(--ink); }
.footer-contact a { color: var(--ink-muted); font-size: 15px; display: block; margin-bottom: 8px; }
.footer-contact a:hover { color: var(--primary-hover); }
.footer-bottom {
  border-top: 1px solid var(--hairline);
  padding-top: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.footer-bottom p { color: var(--ink-tertiary); font-size: 13px; margin: 0; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: var(--r-md);
  border: 1px solid var(--hairline); background: var(--surface-1);
  display: flex; align-items: center; justify-content: center; color: var(--ink-subtle);
}
.footer-social a:hover { color: var(--ink); border-color: var(--hairline-strong); }
.footer-social .icon { width: 17px; height: 17px; }

/* ============================================================
   19. Utility
   ============================================================ */
.mt-0 { margin-top: 0; }
.center { text-align: center; }
.muted { color: var(--ink-subtle); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 12px; z-index: 200; background: var(--surface-2); color: var(--ink); padding: 10px 14px; border-radius: var(--r-md); }

/* ============================================================
   20. Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero h1 { font-size: 52px; letter-spacing: -2px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .work-grid, .pricing-grid, .reviews-grid, .post-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --s-section: 72px; }
  .hero { min-height: 0; }
  .hero-grid { min-height: 0; gap: 32px; }
  .hero-panel { margin-top: 24px; max-width: 560px; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* Header switches to full-screen mobile menu.
     backdrop-filter removed here so the fixed menu is not trapped. */
  .site-header { backdrop-filter: none; }
  .site-header .container { display: flex; justify-content: space-between; }
  .nav-toggle { display: block; }
  .header-actions .btn--desktop { display: none; }

  .primary-nav {
    display: none;
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    background: var(--canvas);
    z-index: 99;
    overflow-y: auto;
    padding: 12px 0 40px;
  }
  .nav-toggle-input:checked ~ .primary-nav { display: block; }
  .nav-toggle-input:checked ~ .nav-toggle span { background: transparent; }
  .nav-toggle-input:checked ~ .nav-toggle span::before { transform: translate(-50%, 0) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle span::after { transform: translate(-50%, 0) rotate(-45deg); }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0 16px; }
  .primary-nav a { padding: 16px 12px; font-size: 18px; border-bottom: 1px solid var(--hairline); border-radius: 0; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 680px) {
  .container { padding: 0 18px; }
  .hero { padding: 104px 0 48px; }
  .hero h1 { font-size: 40px; letter-spacing: -1.4px; }
  .hero .lead { font-size: 18px; }
  .section-head h2 { font-size: 30px; letter-spacing: -0.8px; }
  .grid-2, .grid-3, .grid-4,
  .work-grid, .pricing-grid, .reviews-grid, .post-grid { grid-template-columns: 1fr; }
  .cta-banner { padding: 40px 22px; }
  .cta-banner h2 { font-size: 27px; }
  .page-hero h1 { font-size: 34px; letter-spacing: -1px; }
  .footer-top { grid-template-columns: 1fr; }
  .btn-row { width: 100%; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
  .btn::before, .btn::after { animation: none !important; }
  .hero h1 .accent { animation: none !important; }
  .wn-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================================
   21. Image slots (client-fillable placeholders)
   ============================================================ */
.img-slot {
  position: relative;
  width: 100%;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--surface-1);
}
.img-slot.ratio-43 { aspect-ratio: 4 / 3; }
.img-slot.placeholder {
  border-style: dashed;
  border-color: var(--hairline-strong);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 12px, transparent 12px 24px),
    var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.img-slot.placeholder span {
  color: var(--ink-tertiary);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}
.img-slot.filled { border-style: solid; }
.img-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-slot.ratio-43 img { position: absolute; inset: 0; }