/* Minimal design system: premium + clean - Staqo-inspired palette */

:root {
  /* Colors - Base / Accent / Dark / Neutral  (matched to Staqo.com) */
  --color-bg: #ffffff;            /* dominant - 70-80% of surfaces  */
  --color-surface: #ffffff;
  --color-subtle: #f9fafb;        /* light gray section backgrounds  */
  --color-text: #101828;          /* near-black - headings           */
  --color-muted: #667085;         /* gray - secondary text, borders  */
  --color-border: #e5e7eb;        /* dividers                        */
  --color-dark: #242430;          /* CTA, footer, impact - logo navy */
  --color-dark-rgb: 36, 36, 48;

  /* Amber - InnTech Future brand accent (from logo) */
  --color-accent: #fca80c;        /* primary CTA amber               */
  --color-accent-rgb: 252, 168, 12;
  --color-accent-light: #ffc24d;  /* hover / glow                    */
  --color-accent-light-rgb: 255, 194, 77;
  --color-accent-dark: #d98a00;   /* active states                   */
  --color-accent-dark-rgb: 217, 138, 0;
  --color-accent-ink: #1a1a22;    /* navy text on amber buttons      */
  --color-ring: rgba(var(--color-accent-rgb), 0.35);

  /* Prussian - hero ground. Split-complement of the amber (210 deg),
     high chroma at low value so the amber reads warm-against-cool
     rather than bright-against-dark. Deliberately distinct from
     --color-dark, which stays the footer / CTA-panel surface.        */
  --color-hero: #0f2a47;
  --color-hero-rgb: 15, 42, 71;
  --color-hero-deep: #0a1e33;     /* bottom of the hero field         */
  --color-hero-ink: #f7f4ee;      /* warm white - not pure #fff       */
  --color-hero-ink-rgb: 247, 244, 238;

  /* The hero field, declared once and painted by BOTH the navbar and the hero
     so the two read as a single surface. Each sizes it to 100vw x 100vh and
     offsets it by its own position in that field - see .site-header / .hero. */
  --hero-field:
    radial-gradient(115% 85% at 22% 8%, rgba(var(--color-accent-rgb), 0.10), transparent 62%),
    linear-gradient(178deg, var(--color-hero) 0%, var(--color-hero-deep) 100%);

  /* Type */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  --text-sm: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: clamp(1.85rem, 1.2rem + 2.4vw, 3rem);
  --text-hero: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);

  /* Layout */
  --container: 1600px;
  --header-h: 84px;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  --shadow-soft: 0 8px 20px rgba(16, 24, 40, 0.06);
  --shadow-hover: 0 14px 34px rgba(16, 24, 40, 0.12);

  /* Spacing */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --section-y: clamp(3.25rem, 2.25rem + 3vw, 5rem);

  /* Glass system - one material, three depths */
  --glass-blur   : 4px;
  --glass-wash   : rgba(255, 255, 255, 0.38);
  --glass-base   : rgba(255, 255, 255, 0.52);
  --glass-raised : rgba(255, 255, 255, 0.62);
  --glass-border : 1px solid rgba(255, 255, 255, 0.55);
}

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

html {
  overflow-x: hidden; /* prevent horizontal scroll from full-bleed hero */
}

html,
body {
  min-height: 100%; /* allow content to grow; body { height:100% } breaks sticky+overflow */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-subtle); /* very light base so canvas alpha blends cleanly */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

:focus-visible {
  outline: 3px solid var(--color-ring);
  outline-offset: 3px;
}

.container {
  max-width: var(--container);
  width: min(var(--container), calc(100vw - 3rem)); /* always 1.5rem breathing room each side */
  margin: 0 auto;
  padding: 0 clamp(var(--space-3), 2vw, var(--space-6));
}

/* Header / navbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Brand navy is the site's chrome colour and stays the default: every page
     except Home opens on light content, where navy is the correct bar. */
  background: var(--color-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Separation from light page content; removed over a hero, see below. */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: background 220ms ease, backdrop-filter 220ms ease,
    box-shadow 220ms ease, border-color 220ms ease;
}

/* Over a hero the bar is not chrome sitting on content - it is the top of the
   same Prussian field, so it adopts the ground colour and drops the divider and
   drop shadow that would otherwise draw a seam across it. Home only today; the
   :has() keeps it automatic for any future page that opens with a hero, and
   degrades to the plain navy bar above if unsupported. */
body:has(.hero) .site-header:not(.is-scrolled) {
  /* Top slice of the same field the hero paints - identical gradient, identical
     100vw x 100vh sizing, offset 0 - so the bar and the hero are one surface. */
  background-color: var(--color-hero);
  background-image: var(--hero-field);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  border-bottom-color: transparent;
  box-shadow: none;
}

/* Solid Prussian at the top of the page; eases into the translucent BRAND NAVY
   glass material once the user scrolls (class toggled in main.js). The navy
   here is deliberate - at rest the bar belongs to the hero, but in motion it
   belongs to the chrome, and navy is the site's chrome colour. Tech pages only -
   the Social page keeps its own permanent glass header (.page-social .site-header). */
.site-header.is-scrolled {
  background: rgba(var(--color-dark-rgb), 0.72);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.navbar {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #f8fafc; /* light text - .site-header is brand navy (--color-dark) */
  letter-spacing: 0.01em;
  transition: color 140ms ease;
}

.nav-links a:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.nav-links a[aria-current="page"] {
  color: var(--color-accent);
  font-weight: 700;
}

/* Sliding underline on hover/focus - desktop horizontal nav only */
@media (min-width: 981px) {
  .nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms ease;
  }

  .nav-links a:hover::after,
  .nav-links a:focus-visible::after {
    transform: scaleX(1);
  }

  .nav-links a[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-links a::after {
      transition: none;
    }
  }
}

.nav-cta {
  flex-shrink: 0;
}

.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: pointer;
}

.brand-home {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-home {
  cursor: pointer;
}

.brand-home:hover {
  text-decoration: none;
}

/* Light text - .site-header is brand navy (--color-dark); overridden for
   the Social page by the more specific .page-social .brand-text rule. */
.brand-text {
  color: #f8fafc;
  font-size: clamp(1.4rem, 2.5vw, 1.75rem);
}

/* Brand logo image - hidden when no logo is uploaded (empty src) */
.brand-logo {
  display: none;
  max-height: 64px;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  :root {
    --header-h: 72px;
  }
  .navbar {
    min-height: 72px;
  }
  .brand-logo {
    max-height: 48px;
  }
  .brand-text {
    font-size: 1.25rem;
  }
}
.brand-logo[src]:not([src=""]) {
  display: inline-block;
}
.brand-logo[src]:not([src=""]) ~ .brand-text {
  display: none;
}

.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--color-accent);
  box-shadow: 0 0 0 6px rgba(var(--color-accent-rgb), 0.15);
  flex-shrink: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.brand-mark:hover {
  transform: scale(1.35);
  box-shadow: 0 0 0 9px rgba(var(--color-accent-rgb), 0.25);
}

.brand-mark[aria-expanded="true"] {
  box-shadow: 0 0 0 9px rgba(var(--color-accent-rgb), 0.3);
  transform: scale(1.2);
}

/* Social popup */
.brand-social-popup {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  min-width: 170px;
  z-index: 300;
  animation: brand-popup-in 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes brand-popup-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.brand-social-popup__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-2);
}

.brand-social-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-2);
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background 130ms ease, color 130ms ease;
}

.brand-social-link:hover {
  background: var(--color-subtle);
  color: var(--color-accent);
  text-decoration: none;
}

.brand-social-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.brand-social-link:hover svg {
  opacity: 1;
}

/* Main layout - no bottom padding: sections already carry their own
   padding-bottom (--section-y) and the footer has its own top padding.
   Keeping a gap here exposed raw veil / body background before the footer
   on every page, creating a visual disconnect. */
.site-main {
  padding: var(--space-12) 0 0;
}
/* Home page hero is full-bleed and carries its own top padding -
   remove the site-main gap so it butts flush against the header. */
.page-home .site-main {
  padding-top: 0;
}

.section {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

/* ══════════════════════════════════════════════════════════════════════
   SCROLL REVEAL - reversible + direction aware
   Sections (and the card grids inside them) fade/slide in as they enter the
   viewport and slide back out as they leave. `.reveal--above` flips the
   hidden-state offset to negative so an element that exited through the TOP
   returns by settling DOWNWARD on scroll-up - reusing one offset for both
   directions is what makes a bidirectional reveal read backwards.
   Driven by the IntersectionObserver in assets/js/main.js.
   ══════════════════════════════════════════════════════════════════════ */
.reveal,
.reveal.reveal {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 16px), 0)
             scale(var(--reveal-scale, 1));
  transition:
    opacity var(--reveal-dur, 620ms) ease,
    transform var(--reveal-dur, 620ms) cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step, 70ms));
  /* No `will-change` here on purpose - main.js sets it only while an element
     is actually animating. A permanent one would pin a compositing layer on
     every section and card for the life of the page. */
}

/* Element left through the top of the viewport - come back down, not up. */
.reveal.reveal--above { --reveal-y: -16px; }

/* Opt-in variants: data-reveal="fade|up|down|left|right|zoom" in markup. */
.reveal[data-reveal='fade'] { --reveal-y: 0px; }
.reveal[data-reveal='left'],
.reveal[data-reveal='right'] { --reveal-y: 0px; }
.reveal[data-reveal='left']  { --reveal-x: -32px; }
.reveal[data-reveal='right'] { --reveal-x: 32px; }
.reveal[data-reveal='left'].reveal--above  { --reveal-x: -32px; --reveal-y: 0px; }
.reveal[data-reveal='right'].reveal--above { --reveal-x: 32px;  --reveal-y: 0px; }
.reveal[data-reveal='fade'].reveal--above  { --reveal-y: 0px; }
.reveal[data-reveal='zoom'] { --reveal-y: 0px; --reveal-scale: 0.94; }
.reveal[data-reveal='zoom'].reveal--above { --reveal-y: 0px; }

/* Cards / grid children travel a little further and stagger via --reveal-i. */
.reveal-item { --reveal-y: 24px; --reveal-dur: 540ms; }
.reveal-item.reveal--above { --reveal-y: -24px; }

.reveal.is-in,
.reveal.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Legacy fixed-delay helpers - superseded by --reveal-i, kept for any
   markup or CMS content that still sets them directly. */
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }

/* Both escape hatches are pure CSS so flipping the reduce-effects toggle
   mid-page reveals everything instantly - no JS re-run required.

   The class is DOUBLED here for the same reason it is doubled on the hidden
   state above: a media query adds no specificity, so a plain `.reveal` (0-1-0)
   loses to `.reveal.reveal { opacity: 0 }` (0-2-0) and this hatch did nothing
   for an element that had not yet been revealed. main.js no longer force-adds
   `is-in` under reduced motion, so the effect was that reduced-motion users saw
   sections stay blank until the observer fired, then go blank again on
   scroll-out - the exact thing this block exists to prevent. `.reduce-effects
   .reveal` below is already 0-2-0, which is why that one always worked. */
@media (prefers-reduced-motion: reduce) {
  .reveal.reveal,
  .reveal.reveal.is-in {
    opacity: 1;
    transform: none;
    /* !important because main.js holds the reveal timing in an inline style
       while an element animates, and inline beats any normal declaration. */
    transition: none !important;
  }
}

.reduce-effects .reveal,
.reduce-effects .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: none !important;
}

/* Full-bleed glass bands - home + IT site inner pages */
.home > .section,
.page-about-content > .section,
.page-services-content > .section,
.page-portfolio-content > .section,
.page-contact-content > .section,
.page-privacy-content > .section,
.page-about .page-intro,
.page-services .page-intro,
.page-portfolio .page-intro,
.page-contact .page-intro,
.page-privacy .page-intro {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left:  calc(50vw - 50% + clamp(var(--space-3), 2vw, var(--space-6)));
  padding-right: calc(50vw - 50% + clamp(var(--space-3), 2vw, var(--space-6)));
  background: var(--glass-wash);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-top: var(--glass-border);
}

/* Portfolio, About & Services pages: keep backdrop-filter off so the Three.js
   blob morphing stays clearly visible. The #content-veil (above) handles the
   primary frosting; sections only need a mild white wash for extra contrast. */
.page-portfolio .page-intro,
.page-portfolio-content > .section,
.page-about .page-intro,
.page-about-content > .section,
.page-services .page-intro,
.page-services-content > .section {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(255, 255, 255, 0.30); /* veil + section together ~46% total wash;
                                             blob morph stays vivid and visible */
}

/* Blob-page muted text - override the default mid-gray (#667085) with a deep
   navy blue (#1e3a5f) that achieves:
   • ~12.5:1 contrast on white (WCAG AAA)
   • Strong contrast on the combined veil + section wash over the dark blob
   • A colour that coheres with the blob's navy/cyan palette rather than
     looking like arbitrary darkened gray.
   Applies to: .eyebrow, .lede, card descriptions, service card p,
   .process-step p, .stat-card p, .portfolio-card__desc, etc. */
.page-portfolio,
.page-about,
.page-services {
  --color-muted: #1e3a5f;
  /* Accent-coloured TEXT on the same pages. --color-accent (#fca80c) is ~1.9:1
     on white and near-invisible on the amber blob; deep rust is ~9:1 on white
     and ~5:1 on the blob. Buttons keep --color-accent. Applied by the
     blob-page accent-text rule at the end of this file. */
  --color-accent-text: #7c2d12;
}

.section-header {
  margin-bottom: var(--space-8);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-muted);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h1 {
  font-size: var(--text-hero);
  font-weight: 800;
  text-shadow: none;
}

/* Soft shadow separates the headline from the network lines behind it */
.hero h1 {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  font-weight: 800;
}

h3 {
  font-size: var(--text-xl);
  font-weight: 750;
}

p {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
  font-size: 0.95em;
  padding: 0.12em 0.35em;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--color-text);
}

/* ── Fixed fullscreen 3-D background canvas ───────────────────────── */
#three-container {
  position: fixed;
  inset: 0;
  z-index: 0;         /* behind all page content */
  pointer-events: none;
}

#three-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Content veil ────────────────────────────────────────────────────────
   Fixed layer that sits between the Three.js blob canvas (#three-container,
   z:0) and the scrolling page sections (z:1). DOM order (veil declared after
   the canvas) gives it paint priority at the same z-index level.

   Goal: make text in sections above comfortably readable while keeping the
   blob's morphing animation clearly visible through the translucent wash.

   Only active on pages where the dark 3-D blob is the primary background
   (about, services, portfolio). Home hero has its own solid gradient;
   social page uses its own .social-glass-pane; contact/privacy are white.
   ──────────────────────────────────────────────────────────────────────── */
#content-veil {
  position: fixed;
  inset: 0;
  z-index: 0;             /* DOM order places it above #three-container */
  pointer-events: none;
  display: none;          /* hidden on all non-blob pages */
}

/* Activate on blob pages ─────────────────────────────────────────────── */
.page-about    #content-veil,
.page-services #content-veil,
.page-portfolio #content-veil {
  display: block;
  /* Very light frost - blob morph remains dramatically visible (78% through),
     just soft enough to lift dark text off the darkest blob regions.
     Low blur preserves the sharp morphing shape; high opacity would wash it out. */
  background: rgba(249, 250, 251, 0.22);
  backdrop-filter: blur(1px) saturate(1.05);
  -webkit-backdrop-filter: blur(1px) saturate(1.05);
}

/* Reduced-motion: keep tint, drop blur */
@media (prefers-reduced-motion: reduce) {
  .page-about    #content-veil,
  .page-services #content-veil,
  .page-portfolio #content-veil {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(249, 250, 251, 0.45);
  }
}

/* Phase label (fixed, bottom-right corner of viewport) */
.phase-label {
  position: fixed;
  bottom: 18px;
  right: 20px;
  z-index: 10;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease, transform 400ms ease;
  transform: translateY(4px);
}

.phase-label.phase-visible {
  opacity: 0.85;
  transform: translateY(0);
}

/* ── Solid card (non-glass alternative for stats, testimonials) ─────── */
.solid-card {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-8);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.solid-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(16, 24, 40, 0.12);
}

/* ── Client trust / logo bar ────────────────────────────────────────── */
.logo-trust {
  padding-top: var(--space-6) !important;
  padding-bottom: var(--space-6) !important;
  text-align: center;
}

.logo-bar__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 var(--space-5);
}

.logo-bar__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.logo-bar__list li {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
  opacity: 0.55;
  letter-spacing: 0.02em;
  transition: opacity 200ms ease;
}

.logo-bar__list li:hover {
  opacity: 0.85;
}

/* ── Testimonial enhancements ───────────────────────────────────────── */
.testimonial-stars {
  color: var(--color-accent);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-3);
}

.testimonial-role {
  display: block;
  font-size: 0.72rem;
  color: var(--color-muted);
  font-weight: 500;
  font-style: normal;
  margin-top: 3px;
}

/* ── Portfolio card description ─────────────────────────────────────── */
.project-desc {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.55;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
/* Full-viewport gradient: deep navy → Staqo blue → purple */
.hero {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 5rem);
  padding-left: calc(50vw - 50% + var(--space-10));
  padding-right: calc(50vw - 50% + var(--space-10));

  /* The hero shows the field from the header's height down, so the navbar above
     it continues into this surface with no seam. The flat colour underneath is
     the field's own end tone, so a hero taller than the viewport carries on in
     the same value instead of banding. */
  background-color: var(--color-hero-deep);
  background-image: var(--hero-field);
  background-size: 100vw 100vh;
  background-position: 0 calc(-1 * var(--header-h));
  background-repeat: no-repeat;
  backdrop-filter: blur(var(--glass-blur));   /* softens Three.js bleed */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid rgba(var(--color-hero-ink-rgb), 0.08);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.35);

  /* Warm white on Prussian - 14.6:1 */
  color: var(--color-hero-ink);
}

/* Decorative neural-network background layer for the hero */
.hero-network {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Cursor-reactive canvas that assets/js/hero-constellation.js swaps in for the
   SVG above when motion is allowed. Same box, same layer - `.hero` creates a
   stacking context via `position:relative; z-index:1` (and `backdrop-filter`),
   so `z-index:-1` paints above the hero's own gradient, not behind it. */
.hero-net-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  /* The hero's two CTA buttons sit above this - never swallow their clicks. */
  pointer-events: none;
}

.hero-network__lines line {
  stroke: var(--color-hero-ink);
  /* Kept in step with LINE_ALPHA / LINE_WIDTH in assets/js/hero-constellation.js
     so the no-JS and reduced-motion rendering matches the live canvas. */
  stroke-width: 1.5;
  opacity: 0.26;
}

/* Amber sparks on Prussian - the accent doing signal work, not field work */
.hero-network__nodes circle {
  fill: var(--color-accent);
  opacity: 0.9;
}

@keyframes hero-node-pulse {
  0%, 100% {
    opacity: 0.62;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

.hero-network__nodes circle {
  animation: hero-node-pulse 6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

.hero-network__nodes circle.n-d1 { animation-delay: 0s; }
.hero-network__nodes circle.n-d2 { animation-delay: 1.5s; }
.hero-network__nodes circle.n-d3 { animation-delay: 3s; }
.hero-network__nodes circle.n-d4 { animation-delay: 4.5s; }

@media (prefers-reduced-motion: reduce) {
  .hero-network__nodes circle {
    animation: none;
    opacity: 0.8;
  }
}

/* Keep text at a comfortable reading width inside the full-bleed panel */
.hero > p,
.hero > h1 {
  max-width: 68ch;
}

/* Hero text overrides - warm white on Prussian backdrop */
.hero .eyebrow {
  color: rgba(var(--color-hero-ink-rgb), 0.72);
}

.hero .lede {
  color: rgba(var(--color-hero-ink-rgb), 0.82);
}

/* Primary CTA returns to amber - 7.5:1 on Prussian, and it gains
   apparent chroma sitting on a chromatic cool rather than a neutral. */
.hero .button.primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  box-shadow: 0 10px 30px rgba(var(--color-accent-dark-rgb), 0.30);
}

.hero .button.primary:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
  box-shadow: 0 16px 36px rgba(var(--color-accent-dark-rgb), 0.38);
}

/* Ghost button on Prussian hero - warm white border + text */
.hero .button.ghost {
  background: rgba(var(--color-hero-ink-rgb), 0.06);
  border-color: rgba(var(--color-hero-ink-rgb), 0.32);
  color: var(--color-hero-ink);
}

.hero .button.ghost:hover {
  background: rgba(var(--color-hero-ink-rgb), 0.12);
  border-color: rgba(var(--color-hero-ink-rgb), 0.52);
}

.lede {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 60ch;
}

.hero-actions,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Components */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* touch-friendly */
  padding: 0.78rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: #ffffff;
  color: var(--color-text);
  font-weight: 650;
  letter-spacing: -0.01em;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease,
    background-color 140ms ease, color 140ms ease;
}

.button:hover {
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(16, 24, 40, 0.08);
  border-color: rgba(16, 24, 40, 0.14);
}

.button:active {
  transform: translateY(0);
}

.button:not(.primary):hover {
  background: #f8fafc;
}

.button.primary {
  background: var(--color-accent);
  border-color: rgba(var(--color-accent-rgb), 0.7);
  color: var(--color-accent-ink);
  box-shadow: 0 10px 30px rgba(var(--color-accent-rgb), 0.25);
}

.button.primary:hover {
  background: var(--color-accent-light);
  border-color: rgba(var(--color-accent-light-rgb), 0.7);
  box-shadow: 0 16px 36px rgba(var(--color-accent-light-rgb), 0.32);
}

.button.primary:active {
  background: var(--color-accent-dark);
  border-color: rgba(var(--color-accent-dark-rgb), 0.8);
  box-shadow: none;
}

/* ── Glass card (shared base) ───────────────────────────────────────── */
.glass-card {
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-8);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(16, 24, 40, 0.12);
}

/* ── Section label ──────────────────────────────────────────────────── */
.section-label {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  /* text-transform: uppercase; */
  color: var(--color-accent);
}

/* ── Before / After ─────────────────────────────────────────────────── */
.before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
}

.split-arrow {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
  flex-shrink: 0;
  user-select: none;
}

.before-card {
  border-left: 3px solid var(--color-border);
}

.after-card {
  border-left: 3px solid var(--color-accent);
}

.card-tag {
  margin: 0 0 var(--space-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.card-tag.accent {
  color: var(--color-accent);
}

.before-card ul,
.after-card ul {
  margin: var(--space-4) 0 0;
  padding-left: 1.1rem;
  color: var(--color-muted);
}

.before-card li + li,
.after-card li + li {
  margin-top: var(--space-2);
}

/* ── Service grid ───────────────────────────────────────────────────── */
.service-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

.service-card {
  position: relative;
}

.service-card p {
  margin-bottom: 0;
}

.service-num {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

/* ── Process steps ──────────────────────────────────────────────────── */
.process-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
}

.process-step {
  position: relative;
  padding: var(--space-6) var(--space-5);
}

.process-step p {
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.step-num {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.35;
}

/* ── CTA panel ──────────────────────────────────────────────────────── */
.cta-panel {
  max-width: 56ch;
  margin: 0 auto;
  padding: var(--space-12) var(--space-10);
  text-align: center;
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(var(--color-accent-rgb), 0.28);
  border-radius: var(--radius);
  box-shadow: 0 16px 48px rgba(var(--color-accent-rgb), 0.1), var(--shadow);
}

/* ── Contact panel ──────────────────────────────────────────────────── */
.contact-panel {
  max-width: 52ch;
  margin: 0 auto;
  padding: var(--space-10);
  text-align: center;
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ── Ghost button ───────────────────────────────────────────────────── */
.button.ghost {
  background: var(--glass-raised);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
}

.button.ghost:hover {
  background: rgba(255, 255, 255, 0.88);
}

/* ══════════════════════════════════════════════════════════════════════
   SERVICES - Premium asymmetric redesign
   ══════════════════════════════════════════════════════════════════════ */

/* Shared tag: the card's position number (01) on the home page, the CMS
   `tag` text on a service detail hero */
.svc-tag {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.8;
}

/* ── Zone 1: Hero card ─────────────────────────────────────────────── */
.svc-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-dark);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  min-height: clamp(360px, 40vw, 520px);
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--space-4);
  cursor: default;
  transition: box-shadow 400ms ease;
}

/* Static ambient glow */
.svc-hero__ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 90% at 85% 40%, rgba(var(--color-accent-rgb),0.13) 0%, transparent 60%),
    radial-gradient(ellipse 35% 50% at 15% 85%, rgba(var(--color-accent-rgb),0.07) 0%, transparent 55%);
  pointer-events: none;
}

/* Cursor-tracked glow */
.svc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(380px circle at var(--cx, -200px) var(--cy, -200px), rgba(var(--color-accent-rgb),0.2), transparent 70%);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.svc-hero__content {
  position: relative;
  z-index: 1;
  max-width: 52ch;
}

/* Massive ghost text - adds cinematic depth */
.svc-hero__index {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: -0.15em;
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.svc-hero__name {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 var(--space-5);
  text-shadow: none;
}

.svc-hero__rule {
  width: 44px;
  height: 2px;
  background: var(--color-accent);
  margin-bottom: var(--space-5);
  transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.svc-hero:hover .svc-hero__rule { width: 100px; }

.svc-hero__desc {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-base);
  max-width: 46ch;
  line-height: 1.65;
  margin: 0 0 var(--space-6);
}

.svc-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: gap 240ms ease, color 200ms ease;
}

.svc-hero__cta:hover {
  gap: var(--space-5);
  color: var(--color-accent-light);
  text-decoration: none;
}

/* ── Zone 2: Asymmetric core grid ──────────────────────────────────── */
.svc-core {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.svc-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius);
  padding: var(--space-8);
  cursor: default;
  transition: border-color 300ms ease, box-shadow 300ms ease, transform 300ms ease;
}

/* Cursor-tracked gold sweep */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--cx, 50%) var(--cy, 50%), rgba(var(--color-accent-rgb),0.12), transparent 65%);
  opacity: 0;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.svc-card:hover::before   { opacity: 1; }
.svc-card:hover {
  border-color: rgba(var(--color-accent-rgb),0.38);
  box-shadow: 0 24px 56px rgba(16,24,40,0.13);
}

/* Tall card spans both rows */
.svc-card--tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
}

.svc-card h3 {
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
  transition: color 250ms ease;
}

.svc-card:hover h3 { color: var(--color-dark); }

.svc-card p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0;
}

.svc-card__footer {
  margin-top: auto;
  padding-top: var(--space-8);
}

.svc-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--color-accent-rgb),0.4);
  color: var(--color-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── Zone 3: Capability rail ───────────────────────────────────────── */
.svc-rail-wrap {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-4);
}

/* Fade edges to hint at scroll */
.svc-rail-wrap::before,
.svc-rail-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;
}
.svc-rail-wrap::before { left:  0; background: linear-gradient(to right, rgba(248,250,252,0.9), transparent); }
.svc-rail-wrap::after  { right: 0; background: linear-gradient(to left,  rgba(248,250,252,0.9), transparent); }

.svc-rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: var(--space-2) var(--space-8);
}
.svc-rail::-webkit-scrollbar { display: none; }

.svc-cap {
  flex: 0 0 200px;
  scroll-snap-align: start;
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  transition: border-color 200ms ease, transform 200ms ease;
}

.svc-cap:hover {
  border-color: rgba(var(--color-accent-rgb),0.38);
  transform: translateY(-3px);
}

.svc-cap__num {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent);
  opacity: 0.65;
  margin-bottom: var(--space-2);
}

.svc-cap__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  transition: color 200ms ease;
}

.svc-cap:hover .svc-cap__name { color: var(--color-accent); }

.svc-cap__desc {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin: 0;
  line-height: 1.45;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .svc-core {
    grid-template-columns: 1fr;
  }
  .svc-card--tall {
    grid-row: span 1;
  }
  .svc-hero__index { display: none; }
  .svc-hero {
    align-items: flex-start;
    min-height: 0;
    height: auto;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   END SERVICES
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   SERVICES PAGE - Featured tile + grid (full /services page only -
   the home page teaser above keeps its own svc-hero/svc-core-grid/
   svc-rail markup and classes untouched).

   The first service is the one featured tile: a full-width navy banner
   with the ambient glow and ghost word of the home hero card. Every
   other service is a solid-white tile in a 3-up grid (2-up to 980px,
   1-up to 640px). The grid has 6 tracks so a short last row is widened
   instead of leaving a gap: services.php sets data-tail to the tiles
   left over (count mod 3), and a tail of 2 closes on two half-width
   tiles, a tail of 1 on two rows of two. Solid backgrounds (no
   translucent glass + backdrop-filter) so the Three.js blob behind
   the page never bleeds through into the tiles.
   ══════════════════════════════════════════════════════════════════════ */

.svc-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.svc-tile {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.09);
  padding: var(--space-8) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: box-shadow 300ms ease, transform 300ms ease, border-color 300ms ease;
}

.svc-tile:hover {
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.14);
  border-color: rgba(var(--color-accent-rgb), 0.35);
  transform: translateY(-2px);
}

/* Amber bar drawn across the top edge on hover */
.svc-tile:not(.svc-tile--big)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.svc-tile:not(.svc-tile--big):hover::before { transform: scaleX(1); }

/* --color-accent-text is the blob-page rust (amber is ~1.9:1 on white) */
.svc-tile__num {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: var(--space-4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-accent-text, var(--color-accent));
}

.svc-tile h3 {
  position: relative;
  z-index: 1;
  font-size: var(--text-xl);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}

.svc-tile p {
  position: relative;
  z-index: 1;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
  margin: 0;
}

.svc-tile__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: var(--space-6);
  color: var(--color-accent-text, var(--color-accent));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: gap 240ms ease, color 200ms ease;
}

.svc-tile__cta:hover {
  gap: var(--space-5);
  text-decoration: none;
}

/* Featured tile: the first service */
.svc-tile--big {
  min-height: clamp(17rem, 28vw, 23rem);
  background: var(--color-dark);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 40px rgba(16, 24, 40, 0.22);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

/* Ambient glow - same recipe as .svc-hero__ambient */
.svc-tile--big::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 90% at 88% 30%, rgba(var(--color-accent-rgb), 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 35% 60% at 8% 95%, rgba(var(--color-accent-rgb), 0.1) 0%, transparent 55%);
  pointer-events: none;
}

/* Giant faint ghost word (data-ghost = first word of the service name) */
.svc-tile--big::after {
  content: attr(data-ghost);
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: -0.14em;
  font-size: clamp(4rem, 11vw, 9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.svc-tile--big .svc-tile__num { color: var(--color-accent); }

.svc-tile--big h3 {
  max-width: 18ch;
  margin-bottom: var(--space-5);
  color: #ffffff;
  font-size: clamp(1.75rem, 4vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

/* Amber rule under the name, as on the home hero card */
.svc-tile--big h3::after {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  margin-top: var(--space-5);
  background: var(--color-accent);
  transition: width 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.svc-tile--big:hover h3::after { width: 100px; }

.svc-tile--big p {
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--text-base);
}

.svc-tile--big .svc-tile__cta { color: var(--color-accent); }
.svc-tile--big .svc-tile__cta:hover { color: var(--color-accent-light); }

/* 2-up: an odd tile out (an even child, the featured tile being the first)
   closes the grid full-width */
@media (min-width: 641px) {
  .svc-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .svc-tile { grid-column: span 3; }
  .svc-tile--big { grid-column: 1 / -1; }
}

@media (min-width: 641px) and (max-width: 980px) {
  .svc-tile:not(.svc-tile--big):last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* 3-up, with the short last row rebalanced from data-tail */
@media (min-width: 981px) {
  .svc-tile:not(.svc-tile--big) { grid-column: span 2; }

  .svc-bento[data-tail="2"] > .svc-tile:not(.svc-tile--big):nth-last-child(-n+2),
  .svc-bento[data-tail="1"] > .svc-tile:not(.svc-tile--big):nth-last-child(-n+4) {
    grid-column: span 3;
  }

  /* Two services in total: the lone tile takes the row */
  .svc-bento[data-tail="1"] > .svc-tile:not(.svc-tile--big):nth-child(2):last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .svc-tile--big::after { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   END SERVICES PAGE GRID
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   SOLUTIONS - Signal Flow (refined timeline 2.0)
   ══════════════════════════════════════════════════════════════════════ */

.section.solutions {
  position: relative;
}

.sol-flow {
  position: relative;
  margin-top: var(--space-10);
}

/* Step labels (each block defines its own rhythm; no shared card base) */
.sol-step__index {
  display: block;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  opacity: 0.8;
  margin-bottom: var(--space-4);
}

.sol-step__ghost {
  position: absolute;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Interactive steps: gold rail + dim siblings when section focuses */
.sol-flow [data-sol-step] {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  transition:
    opacity 0.45s ease,
    filter 0.45s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sol-flow .sol-step--coda [data-sol-step] {
  margin-bottom: 0;
}

.sol-flow [data-sol-step]::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  width: 0;
  opacity: 0;
  background: linear-gradient(to bottom, var(--color-accent-light), var(--color-accent-dark));
  transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s ease;
  border-radius: 2px;
}

.sol-flow [data-sol-step].is-active::before {
  width: 4px;
  opacity: 1;
}

/* Dim non-active narrative steps - direct children only (coda lives inside wrapper) */
.sol-flow.sol-flow--in-view:not(.sol-flow--reduce):has([data-sol-step].is-active)
  > [data-sol-step]:not(.is-active):not(.sol-step--anchor) {
  opacity: 0.76;
  filter: saturate(0.94);
}

/* Ecosystem cards: never dim - both halves stay readable together */
.sol-flow.sol-flow--in-view:not(.sol-flow--reduce) .sol-step--coda [data-sol-step] {
  opacity: 1 !important;
  filter: none !important;
}

.sol-flow.sol-flow--in-view:not(.sol-flow--reduce) .sol-step--anchor:not(.is-active) {
  opacity: 0.72;
  filter: saturate(0.88);
}

.sol-flow.sol-flow--reduce [data-sol-step]::before {
  display: none;
}

.sol-flow.sol-flow--reduce [data-sol-step],
.sol-flow.sol-flow--reduce .sol-step--anchor {
  opacity: 1 !important;
  filter: none !important;
}

/* ── 01 Anchor - full-bleed dominant ───────────────────────────────── */
.sol-step--anchor {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.sol-step--anchor .sol-anchor__bleed {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: clamp(2.75rem, 6vw, 4.5rem)
    calc(50vw - 50% + var(--space-6))
    clamp(2.25rem, 4vw, 3.25rem);
  min-height: clamp(320px, 60vh, 560px);
  display: flex;
  align-items: flex-end;
  background: var(--color-dark);
  cursor: default;
  overflow: hidden;
}

.sol-anchor__ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 75% at 85% 28%, rgba(var(--color-accent-rgb), 0.14) 0%, transparent 55%),
    radial-gradient(ellipse 40% 55% at 10% 85%, rgba(var(--color-accent-rgb), 0.07) 0%, transparent 52%);
  pointer-events: none;
}

.sol-anchor__afterglow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    420px circle at var(--cx, -400px) var(--cy, -400px),
    rgba(var(--color-accent-rgb), 0.2),
    transparent 72%
  );
  pointer-events: none;
}

.sol-anchor__inner {
  position: relative;
  z-index: 2;
  max-width: min(52ch, 92%);
}

.sol-step--anchor .sol-step__index {
  color: var(--color-accent-light);
}

.sol-anchor__title {
  font-size: clamp(2.5rem, 6.5vw, 4.25rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 0 0 var(--space-5);
}

.sol-anchor__inner > p {
  color: rgba(255, 255, 255, 0.58);
  font-size: var(--text-lg);
  line-height: 1.65;
  margin: 0 0 var(--space-8);
  max-width: 44ch;
}

.sol-anchor__ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sol-anchor__ribbon li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 7rem;
}

.sol-anchor__metric {
  font-size: clamp(1.35rem, 2.5vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
}

.sol-anchor__metric-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.sol-step--anchor .sol-step__ghost {
  right: min(4%, 2rem);
  bottom: -0.08em;
  font-size: clamp(6rem, 18vw, 13rem);
  color: rgba(255, 255, 255, 0.045);
}

/* ── 02 Lean panel - flush with the content column, like the 03 inset ── */
.sol-step--lean-left,
.sol-step--lean-right {
  max-width: 100%;
}

.sol-lean {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--space-6);
  align-items: end;
  padding: var(--space-8);
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--shadow-soft);
}

.sol-lean--left {
  margin-inline: 0;
  border-radius: var(--radius-sm) var(--radius) var(--radius) var(--radius-sm);
}

.sol-lean--right {
  margin-left: -2.5rem;
  margin-right: 0;
  border-radius: var(--radius) var(--radius-sm) var(--radius-sm) var(--radius);
}

.sol-lean__title {
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
}

.sol-lean__body p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0 0 var(--space-5);
}

.sol-step--lean-left .sol-step__ghost--edge {
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(4rem, 12vw, 8rem);
  color: rgba(16, 24, 40, 0.06);
}

.sol-step--lean-right .sol-step__ghost--edge {
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(4rem, 12vw, 8rem);
  color: rgba(16, 24, 40, 0.06);
}

/* 03 ghost numeral: same size, tint and 0.5rem overhang as the 02 edge ghost -
   both panels share the article's left edge. */
.sol-step--inset .sol-step__ghost--edge {
  left: -0.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(4rem, 12vw, 8rem);
  color: rgba(16, 24, 40, 0.06);
}

/* Stream + layer mini-visuals */
.sol-visual--stream {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 52px;
}

.sol-visual--stream span {
  flex: 1;
  min-height: 12px;
  background: linear-gradient(to top, rgba(var(--color-accent-rgb), 0.45), rgba(var(--color-accent-rgb), 0.08));
  border-radius: 3px 3px 0 0;
  animation: sol-stream 2.4s ease-in-out infinite;
}

.sol-visual--stream span:nth-child(1) { animation-delay: 0s; min-height: 28%; }
.sol-visual--stream span:nth-child(2) { animation-delay: 0.15s; min-height: 55%; }
.sol-visual--stream span:nth-child(3) { animation-delay: 0.3s; min-height: 80%; }
.sol-visual--stream span:nth-child(4) { animation-delay: 0.45s; min-height: 48%; }
.sol-visual--stream span:nth-child(5) { animation-delay: 0.6s; min-height: 65%; }

@keyframes sol-stream {
  0%, 100% { opacity: 0.55; transform: scaleY(0.92); }
  50% { opacity: 1; transform: scaleY(1); }
}

.sol-visual--layers {
  position: relative;
  height: 56px;
  perspective: 400px;
}

.sol-visual__layer {
  position: absolute;
  inset: auto 0 0 0;
  height: 38px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.35);
  background: rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-sm);
  transform-origin: bottom center;
}

.sol-visual__layer:nth-child(1) {
  transform: translateZ(0) translateY(-18px) scale(0.92);
  opacity: 0.45;
}

.sol-visual__layer:nth-child(2) {
  transform: translateZ(0) translateY(-9px) scale(0.96);
  opacity: 0.68;
}

.sol-visual__layer:nth-child(3) {
  transform: translateZ(0);
  opacity: 1;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
}

/* ── 04 Inset - wide stat band ──────────────────────────────────────── */
.sol-step--inset .sol-inset {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 0.85fr);
  gap: var(--space-10);
  align-items: center;
  /* Same edges and text inset as the 02 lean card above it: no side pull, and
     the left padding gives back the 2px this panel's amber rule is thicker
     than that card's 1px border. */
  padding: var(--space-8);
  padding-left: calc(var(--space-8) - 2px);
  /* Same glass depth as the 02 lean card (`--glass-base` + `--shadow-soft`),
     not the raised one. At 0.62 alpha with the heavier shadow this panel read
     as a solid slab while its neighbour let the constellation through, which
     made the last step of the flow look like it belonged to a different
     section. The amber left rule stays - that is the step's accent, not part
     of the material. */
  background: var(--glass-base);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: var(--glass-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 2px var(--radius) var(--radius) 2px;
  box-shadow: var(--shadow-soft);
}

.sol-inset__title {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.sol-inset__main p {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.65;
  max-width: 52ch;
}

.sol-inset__stat {
  text-align: right;
  padding-left: var(--space-6);
  border-left: 1px solid rgba(var(--color-accent-rgb), 0.22);
}

.sol-inset__stat-num {
  display: block;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-accent);
}

.sol-inset__stat-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ── Coda - two offset halves ───────────────────────────────────────── */
.sol-step--coda {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
  margin-bottom: 0;
  padding-left: 0.25rem;
}

.sol-step--coda::before {
  display: none;
}

.sol-coda {
  position: relative;
  z-index: 3;
  padding: var(--space-8);
  /* Solid surface: glass over the hero canvas blurred the inactive card into illegibility */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.sol-coda--raised {
  margin-top: 0;
  border-radius: var(--radius-sm) var(--radius) var(--radius-sm) var(--radius-sm);
}

.sol-coda--lowered {
  margin-top: 4rem;
  border-radius: var(--radius) var(--radius-sm) var(--radius-sm) var(--radius-sm);
}

.sol-coda__title {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.18;
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.sol-coda p {
  margin: 0;
  font-size: var(--text-sm);
  color: #475569; /* slate-600 - readable on white vs. --color-muted on glass */
  line-height: 1.62;
}

.sol-step--coda .sol-step__index {
  color: var(--color-accent-dark);
  opacity: 1;
}

.sol-coda.is-active {
  border-color: rgba(var(--color-accent-rgb), 0.35);
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sol-visual--stream span {
    animation: none;
    opacity: 0.85;
  }

  .sol-flow.sol-flow--in-view [data-sol-step],
  .sol-flow.sol-flow--in-view .sol-step--anchor {
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Responsive */
@media (max-width: 680px) {
  .before-after {
    grid-template-columns: 1fr;
  }

  .split-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
    display: block;
    text-align: center;
  }

  .sol-step--anchor .sol-anchor__bleed {
    min-height: 50vh;
    padding-inline: var(--space-6);
  }

  .sol-anchor__ribbon {
    gap: var(--space-4);
  }

  .sol-lean {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .sol-lean--left,
  .sol-lean--right {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius-sm);
  }

  .sol-step--lean-left .sol-step__ghost--edge,
  .sol-step--lean-right .sol-step__ghost--edge,
  .sol-step--inset .sol-step__ghost--edge {
    display: none;
  }

  .sol-step--inset .sol-inset {
    grid-template-columns: 1fr;
    border-radius: var(--radius-sm);
  }

  .sol-inset__stat {
    text-align: left;
    padding-left: 0;
    padding-top: var(--space-5);
    border-left: none;
    border-top: 1px solid rgba(var(--color-accent-rgb), 0.22);
  }

  .sol-step--coda {
    grid-template-columns: 1fr;
  }

  .sol-coda--lowered {
    margin-top: 0;
  }

  .sol-step--anchor .sol-step__ghost {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   END SOLUTIONS
   ══════════════════════════════════════════════════════════════════════ */

/* ── About card ─────────────────────────────────────────────────────── */
.about-card {
  max-width: 72ch;
}

.about-card p {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.7;
}

/* ── Service grid wide (5-col for services list) ────────────────────── */
.service-grid--wide {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

/* ── Section action (centered button below a grid) ──────────────────── */
.section-action {
  margin-top: var(--space-8);
  display: flex;
  justify-content: flex-start;
}

/* ── Stats grid ─────────────────────────────────────────────────────── */
.stats-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}

.stat-card {
  text-align: center;
  padding: var(--space-10) var(--space-6);
}

.stat-card p {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.stat-num {
  display: block;
  margin-bottom: var(--space-2);
  font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  line-height: 1;
}

/* ── Project tag ─────────────────────────────────────────────────────── */
.project-tag {
  display: inline-block;
  margin-bottom: var(--space-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ── Testimonials ────────────────────────────────────────────────────── */
.testimonial-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.testimonial-card blockquote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.testimonial-card blockquote p:not(.testimonial-stars) {
  margin: 0;
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.6;
  font-style: italic;
}

.testimonial-card blockquote footer {
  display: flex;
  flex-direction: column;
}

.testimonial-author {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  font-style: normal;
}

/* ── Chat UI ─────────────────────────────────────────────────────────── */
.chat-window {
  max-width: 680px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  background: var(--color-dark);
  flex-shrink: 0;
}

.chat-header .brand-mark {
  width: 10px;
  height: 10px;
}

.chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), 0.15);
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.chat-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.5);
}

.chat-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  animation: chat-pulse 2.4s ease infinite;
}

@keyframes chat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: 300px;
  max-height: 400px;
  scroll-behavior: smooth;

  /* Thin custom scrollbar – Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-accent-rgb), 0.35) transparent;

  /* Fade at top & bottom to hint at scrollable content */
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 28px,
    #000 calc(100% - 28px),
    transparent 100%
  );
}

/* Thin custom scrollbar – WebKit */
.chat-body::-webkit-scrollbar {
  width: 4px;
}

.chat-body::-webkit-scrollbar-track {
  background: transparent;
}

.chat-body::-webkit-scrollbar-thumb {
  background: rgba(var(--color-accent-rgb), 0.35);
  border-radius: 999px;
}

.chat-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--color-accent-rgb), 0.65);
}

.chat-msg {
  display: flex;
  max-width: 78%;
  animation: chat-in 200ms ease both;
}

@keyframes chat-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-msg--bot { align-self: flex-start; }
.chat-msg--user { align-self: flex-end; }

.chat-msg p {
  margin: 0;
  padding: 0.6rem var(--space-4);
  border-radius: 18px;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.chat-msg--bot p {
  background: rgba(16, 24, 40, 0.06);
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-bottom-left-radius: 4px;
}

/* ── Markdown-rendered bot bubble ────────────────────────────────────── */
.chat-msg--bot .chat-content {
  padding: 0.65rem var(--space-4);
  border-radius: 18px;
  border-bottom-left-radius: 4px;
  background: rgba(16, 24, 40, 0.06);
  border: 1px solid rgba(16, 24, 40, 0.08);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
}

.chat-msg--bot .chat-content > *:first-child { margin-top: 0; }
.chat-msg--bot .chat-content > *:last-child  { margin-bottom: 0; }

.chat-msg--bot .chat-content p {
  margin: 0 0 0.5rem;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.chat-msg--bot .chat-content ul,
.chat-msg--bot .chat-content ol {
  margin: 0.35rem 0 0.5rem 1.1rem;
  padding: 0;
}

.chat-msg--bot .chat-content li {
  margin-bottom: 0.25rem;
}

.chat-msg--bot .chat-content li > p {
  margin: 0;
}

.chat-msg--bot .chat-content strong {
  font-weight: 700;
  color: var(--color-heading, inherit);
}

.chat-msg--bot .chat-content em {
  font-style: italic;
}

.chat-msg--bot .chat-content code {
  font-family: ui-monospace, monospace;
  font-size: 0.82em;
  background: rgba(16, 24, 40, 0.08);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.chat-msg--bot .chat-content hr {
  border: none;
  border-top: 1px solid rgba(16, 24, 40, 0.12);
  margin: 0.5rem 0;
}

.chat-msg--user p {
  background: var(--color-dark);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

/* Quick reply chips */
.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
  align-self: flex-start;
}

.chat-chip {
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 120ms ease, color 120ms ease;
}

.chat-chip:hover {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* Typing indicator */
.chat-typing p {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.7rem var(--space-4);
  min-width: 56px;
}

.chat-typing .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-muted);
  animation: chat-bounce 1.2s ease infinite;
}

.chat-typing .dot:nth-child(2) { animation-delay: 0.18s; }
.chat-typing .dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* Input row */
.chat-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid rgba(16, 24, 40, 0.08);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  padding: 0.62rem var(--space-4);
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.chat-input::placeholder {
  color: var(--color-muted);
}

.chat-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-ring);
}

.chat-send {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-accent);
  border: none;
  color: var(--color-accent-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 140ms ease, transform 140ms ease;
}

.chat-send:hover {
  background: var(--color-accent-light);
  transform: scale(1.06);
}

.chat-send:active {
  background: var(--color-accent-dark);
  transform: scale(0.96);
}

/* ══════════════════════════════════════════════════════════════════════
   OFFICE LOCATION CARDS
   Two-column band: the section header holds the left rail, the location
   cards fill the right. The old layout was a pair of centred 3/4-portrait
   photo frames, which left ~500px of dead gutter either side of a 1600px
   container and collapsed to an empty gradient whenever the photo was
   missing. Photos are now optional decoration - a card is complete with
   nothing but its type, city and badge.
   ══════════════════════════════════════════════════════════════════════ */

.offices-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

/* Left rail - the section header, no longer orphaned from its cards */
.offices-intro {
  margin-bottom: 0;
  position: sticky;
  top: calc(var(--header-h) + var(--space-8));
}

.offices-intro p {
  color: var(--color-muted);
  max-width: 46ch;
  margin: 0;
}

.offices-intro__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  text-decoration: none;
  border-bottom: 2px solid rgba(var(--color-accent-rgb), 0.35);
  padding-bottom: 2px;
  transition: color 160ms ease, border-color 160ms ease, gap 160ms ease;
}

.offices-intro__cta:hover,
.offices-intro__cta:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
  gap: var(--space-3);
}

/* ── Card grid ─────────────────────────────────────────────────────── */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Natural heights, not stretched: if one office has a photo and its
     neighbour does not, stretching would reopen the same empty-box gap this
     redesign closed. A ragged bottom edge is the cheaper trade. */
  align-items: start;
}

.office-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 220ms ease,
              border-color 220ms ease;
}

/* Amber top rule - same accent language as .award-card */
.office-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
}

.office-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--color-accent-rgb), 0.38);
}

/* ── Optional photo - a slim banner, never the card's whole body ───── */
.office-card__media {
  width: calc(100% + var(--space-6) * 2);
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-4);
  height: 132px;
  overflow: hidden;
  background: var(--color-subtle);
}

.office-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Head row - glyph on the left, badge pinned right ──────────────── */
.office-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  margin-bottom: var(--space-2);
}

.office-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: var(--color-accent-dark);
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
}

.office-card__icon svg {
  width: 21px;
  height: 21px;
}

.office-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(var(--color-accent-rgb), 0.10);
  border: 1px solid rgba(var(--color-accent-rgb), 0.28);
  color: var(--color-accent-dark);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Copy ──────────────────────────────────────────────────────────── */
.office-card__type {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.office-card__city {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.office-card__detail {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .offices-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .offices-intro {
    position: static;
  }
}

@media (max-width: 560px) {
  .office-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .office-card,
  .offices-intro__cta {
    transition: none;
  }

  .office-card:hover {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   END OFFICE LOCATION CARDS
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Footer ─────────────────────────────────────────────────── */
.site-footer {
  background: #101828;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: rgba(248, 250, 252, 0.6);
  padding: var(--space-16) 0 var(--space-8);
}

/* Glass footer - IT site pages (home + inner pages); blurs Three.js behind */
.page-home .site-footer,
.page-about .site-footer,
.page-services .site-footer,
.page-portfolio .site-footer,
.page-contact .site-footer,
.page-privacy .site-footer {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + var(--space-4));
  padding-right: calc(50vw - 50% + var(--space-4));
  box-sizing: border-box;
  background: rgba(16, 24, 40, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  .page-home .site-footer,
  .page-about .site-footer,
  .page-services .site-footer,
  .page-portfolio .site-footer,
  .page-contact .site-footer,
  .page-privacy .site-footer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #101828;
  }
}

/* 4-column grid: brand wide, 3 link/contact cols */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-10);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* Brand */
.footer-logo {
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #f8fafc;
  text-decoration: none;
  margin-bottom: var(--space-4);
}
.footer-logo:hover { color: var(--color-accent); text-decoration: none; }

/* Footer logo image - hidden when no logo is uploaded (empty src) */
.footer-logo-img {
  display: none;
  max-height: 40px;
  width: auto;
  object-fit: contain;
}
.footer-logo-img[src]:not([src=""]) {
  display: inline-block;
}
.footer-logo-img[src]:not([src=""]) ~ .footer-logo-text {
  display: none;
}

.footer-desc {
  margin: 0 0 var(--space-6);
  font-size: 0.875rem;
  line-height: 1.75;
  color: rgba(248, 250, 252, 0.45);
}

/* Social icons row */
.footer-social {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(248, 250, 252, 0.5);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease,
              border-color 160ms ease;
}
.footer-social__link svg { width: 15px; height: 15px; flex-shrink: 0; }
.footer-social__link:hover {
  background: rgba(var(--color-accent-rgb), 0.12);
  border-color: rgba(var(--color-accent-rgb), 0.35);
  color: var(--color-accent);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Link columns */
.footer-col__title {
  margin: 0 0 var(--space-5);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.footer-col__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col__links a {
  font-size: 0.875rem;
  color: rgba(248, 250, 252, 0.5);
  transition: color 140ms ease;
  text-decoration: none;
}
.footer-col__links a:hover { color: #f8fafc; text-decoration: none; }

.footer-col__all {
  margin-top: var(--space-2);
  color: var(--color-accent) !important;
  font-size: 0.8rem !important;
}
.footer-col__all:hover { color: var(--color-accent-light) !important; }

/* Contact column */
.footer-contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
}

.footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  color: rgba(248, 250, 252, 0.5);
  text-decoration: none;
  transition: color 140ms ease;
  line-height: 1.5;
}
.footer-contact__item svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  stroke: var(--color-accent);
  opacity: 0.75;
}
a.footer-contact__item:hover         { color: #f8fafc; text-decoration: none; }
a.footer-contact__item:hover svg     { opacity: 1; }

/* CTA link in contact col */
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 18px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.35);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.footer-cta:hover {
  background: rgba(var(--color-accent-rgb), 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent-light);
  text-decoration: none;
}

/* Bottom bar */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
}

.footer-copy,
.footer-location {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(248, 250, 252, 0.28);
}

/* Footer responsive */
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ── Social media landing (dark / Stryds-inspired) ─────────────────── */
.page-social {
  background-color: #0b0c0f;
  color: #f1f5f9;
}

.page-social h1,
.page-social h2,
.page-social h3 {
  color: #f8fafc;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.85);
}

.page-social p {
  color: rgba(241, 245, 249, 0.90);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.page-social .site-main {
  padding-top: var(--space-10);
}

.page-social .site-main .container {
  position: relative;
  z-index: 1;
}

.page-social .site-header {
  background: rgba(11, 12, 15, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-social .nav-links a {
  color: rgba(248, 250, 252, 0.95);
}

.page-social .nav-links a:hover {
  color: #f8fafc;
}

.page-social .nav-links a[aria-current="page"] {
  color: var(--color-accent-light);
  text-decoration: none;
}

.page-social .brand-text {
  color: #f8fafc;
}

.page-social .site-footer {
  position: relative;
  z-index: 1;
  background: #0b0c0f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Chat section - social page overrides ───────────────────────────
   The global .glass-card uses white rgba which turns grey on dark bg.
   Override everything to a solid dark theme that sits cleanly above
   the Three.js canvas.
   ─────────────────────────────────────────────────────────────────── */
.page-social .chat-ai-section {
  position: relative;
  z-index: 2;                              /* above the Three.js canvas  */
  background: rgba(11, 12, 15, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Section label + heading already handled by .page-social h2/p */
.page-social .chat-ai-section .section-label {
  color: var(--color-accent-light);
}

/* Solid dark card - replaces the semi-transparent glass-card */
.page-social .chat-window {
  background: #13161e;
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* Header bar */
.page-social .chat-header {
  background: #0d1018;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Message area */
.page-social .chat-body {
  background: #13161e;
}

/* Bot bubble */
.page-social .chat-msg--bot p,
.page-social .chat-msg--bot .chat-content {
  background: #1e2233;
  color: rgba(241, 245, 249, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* User bubble - keep accent blue */
.page-social .chat-msg--user p {
  background: var(--color-accent);
  color: #ffffff;
}

/* Typing dots */
.page-social .chat-typing p {
  background: #1e2233;
}

/* Input field */
.page-social .chat-input {
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.12);
}

.page-social .chat-input::placeholder {
  color: rgba(255, 255, 255, 0.30);
}

.page-social .chat-input:focus {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(var(--color-accent-rgb), 0.55);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.18);
}

/* Send button */
.page-social .chat-send {
  background: var(--color-accent);
  color: #ffffff;
}

.page-social .chat-send:hover {
  background: var(--color-accent-light);
}

/* Form row wrapper */
.page-social .chat-form {
  background: #0d1018;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.page-social .button:not(.primary) {
  color: rgba(248, 250, 252, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

.page-social .button:not(.primary):hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.28);
}

.page-social .button.ghost {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.page-social a:hover {
  color: inherit;
}

.page-social .social-page a:not(.button):not(.social-pill):not(.social-breadcrumb__link) {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-social .social-page a:not(.button):not(.social-pill):not(.social-breadcrumb__link):hover {
  color: var(--color-accent);
}

/* ── Social contact page - full dark-theme overrides ─────────────────
   Every surface here is overridden so the form sits cleanly inside the
   dark social site instead of inheriting the default light styles.
   ─────────────────────────────────────────────────────────────────── */

/* Section wrapper - solid dark band so no gap appears */
.page-social .social-contact-section {
  background: rgba(11, 12, 15, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Form card - solid dark, no white glass wash */
.page-social .social-contact-form-wrap {
  background: #13161e;
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.50);
}

.page-social .social-contact-form-wrap:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

/* "Start the conversation" label inside form card */
.page-social .social-contact-form-wrap .section-label {
  color: var(--color-accent-light);
  letter-spacing: 0.08em;
}

/* Heading & sub-text inside form card - tighten shadows for card context */
.page-social .social-contact-form-wrap h2 {
  color: #f8fafc;
  text-shadow: none;
}

.page-social .social-contact-form-wrap p {
  text-shadow: none;
  color: rgba(241, 245, 249, 0.55);
}

/* Field labels */
.page-social .social-contact-section .contact-form__field label,
.page-social .social-contact-section .social-contact-fieldset legend {
  color: rgba(248, 250, 252, 0.78);
}

/* Inputs + textarea + select */
.page-social .social-contact-section .contact-form__field input,
.page-social .social-contact-section .contact-form__field textarea,
.page-social .social-contact-section .contact-form__field select {
  background: rgba(255, 255, 255, 0.05);
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.12);
}

.page-social .social-contact-section .contact-form__field input::placeholder,
.page-social .social-contact-section .contact-form__field textarea::placeholder {
  color: rgba(255, 255, 255, 0.28);
}

.page-social .social-contact-section .contact-form__field input:focus,
.page-social .social-contact-section .contact-form__field textarea:focus,
.page-social .social-contact-section .contact-form__field select:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(var(--color-accent-rgb), 0.60);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.16);
  outline: none;
}

/* Select dropdown - dark arrow + option bg */
.page-social .social-contact-section .contact-form__field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  color-scheme: dark;
}

/* The options popup is native: it inherits the select's light text but not its
   translucent background, and `color-scheme` alone doesn't darken it on
   Windows Chrome/Edge - so options rendered white-on-white. Give them a solid
   dark surface explicitly (the page background lifted a step). */
.page-social .social-contact-section .contact-form__field select option {
  background-color: #1a1d24;
  color: #f1f5f9;
}

.page-social .social-contact-section .contact-form__field select option[value=""] {
  color: rgba(241, 245, 249, 0.5);
}

/* Platform checkbox pills - dark base */
.page-social .social-contact-check__pill {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(241, 245, 249, 0.60);
}

.page-social .social-contact-check__pill:hover {
  background: rgba(var(--color-accent-rgb), 0.10);
  border-color: var(--color-accent);
  color: #f1f5f9;
}

.page-social .social-contact-check input[type="checkbox"]:checked + .social-contact-check__pill {
  background: rgba(var(--color-accent-rgb), 0.16);
  border-color: var(--color-accent-light);
  color: var(--color-accent-light);
}

/* Platform-tinted checked states on dark bg */
.page-social .social-contact-check input:checked + .social-contact-check__pill[data-platform="instagram"] {
  background: rgba(225, 48, 108, 0.12);
  border-color: #e1306c;
  color: #f472b6;
}
.page-social .social-contact-check input:checked + .social-contact-check__pill[data-platform="linkedin"] {
  background: rgba(10, 102, 194, 0.14);
  border-color: #0a66c2;
  color: var(--color-accent-light);
}
.page-social .social-contact-check input:checked + .social-contact-check__pill[data-platform="tiktok"] {
  background: rgba(110, 64, 201, 0.12);
  border-color: #a78bfa;
  color: #c4b5fd;
}
.page-social .social-contact-check input:checked + .social-contact-check__pill[data-platform="facebook"] {
  background: rgba(24, 119, 242, 0.14);
  border-color: #1877f2;
  color: #93c5fd;
}
.page-social .social-contact-check input:checked + .social-contact-check__pill[data-platform="twitter"] {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(248, 250, 252, 0.35);
  color: #f1f5f9;
}

/* Field validation error text */
.page-social .social-contact-section .field-error {
  color: #f87171;
}

.page-social .social-contact-section .contact-form__field input.is-invalid,
.page-social .social-contact-section .contact-form__field textarea.is-invalid {
  border-color: rgba(248, 113, 113, 0.55);
}

/* "Follow us" label in sidebar */
.page-social .social-contact-info__label {
  color: var(--color-accent-light);
}

/* Contact info card - dark */
.page-social .social-contact-info {
  background: #13161e;
  border-color: rgba(255, 255, 255, 0.09);
}

.page-social .social-contact-info__link {
  color: rgba(241, 245, 249, 0.80);
}

.page-social .social-contact-info__link:hover {
  color: var(--color-accent-light);
}

.page-social .social-contact-info__link-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(241, 245, 249, 0.40);
}

.page-social .social-contact-info__response {
  color: rgba(241, 245, 249, 0.35);
}

/* Platform follow cards - dark */
.page-social .spc-card {
  background: #13161e;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.page-social .spc-card:hover {
  background: #1a1e2a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
}

.page-social .spc-card__name {
  color: #f1f5f9;
}

.page-social .spc-card__handle {
  color: rgba(241, 245, 249, 0.40);
}

/* Platform icon bg on dark */
.page-social .spc-card--instagram { --soc-bg: rgba(225, 48, 108, 0.10); }
.page-social .spc-card--linkedin  { --soc-bg: rgba(10, 102, 194, 0.10); }
.page-social .spc-card--tiktok    { --soc-bg: rgba(139, 92, 246, 0.10); }
.page-social .spc-card--facebook  { --soc-bg: rgba(24, 119, 242, 0.10); }
.page-social .spc-card--twitter   { --soc-color: #94a3b8; --soc-bg: rgba(148, 163, 184, 0.08); }

/* Form submit status */
.page-social #scf-status.is-success {
  background: rgba(34, 197, 94, 0.08);
  border-color: rgba(34, 197, 94, 0.22);
  color: #86efac;
}

.page-social #scf-status.is-error {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

/* Hero */
.social-hero {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: calc(100vh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(4rem, 3rem + 4vw, 7rem);
  padding-bottom: clamp(3rem, 2rem + 3vw, 6rem);
  padding-left: calc(50vw - 50% + var(--space-10));
  padding-right: calc(50vw - 50% + var(--space-10));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.social-eyebrow {
  margin: 0 0 var(--space-4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  text-shadow: 0 0 20px rgba(var(--color-accent-rgb), 0.5);
}

.social-hero-lead {
  margin: 0 0 var(--space-8);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.22rem);
  line-height: 1.65;
  max-width: 44ch;
  color: rgba(241, 245, 249, 0.92);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

.social-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ── Hero additions ─────────────────────────────────────────────────── */

.social-hero__dim {
  display: block;
  color: rgba(241, 245, 249, 0.68);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

.social-hero h1 {
  margin-bottom: var(--space-6);
  font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.045em;
  max-width: 14ch;
}

/* Platform pills */
.social-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.social-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(241, 245, 249, 0.90);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  transition: background 0.18s, border-color 0.18s;
}

/* A pill is an <a> only when the matching social_* setting holds a URL; with
   none configured it stays a <span>. Every interactive affordance below is
   therefore scoped to `a.social-pill` - issue #10 was that inert spans lit up
   on hover and read as broken links. */
a.social-pill {
  cursor: pointer;
  text-decoration: none;
}

a.social-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(var(--color-accent-rgb), 0.35);
  color: rgba(241, 245, 249, 0.9);
}

a.social-pill:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 3px;
}

/* ── Stats band ──────────────────────────────────────────────────────── */

.social-stats-band {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
}

.social-stat {
  flex: 1 1 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  text-align: center;
}

.social-stat:last-child {
  border-right: none;
}

.social-stat__n {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 6px;
}

.social-stat__l {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 245, 249, 0.78);
}

/* ── Feature sections ────────────────────────────────────────────────── */

.social-feature {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(5rem, 3rem + 6vw, 9rem) calc(50vw - 50% + var(--space-10));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.social-feature--alt {
  background: rgba(255, 255, 255, 0.02);
}

.social-feature__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 8rem);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.social-feature--flip .social-feature__layout {
  direction: rtl;
}

.social-feature--flip .social-feature__layout > * {
  direction: ltr;
}

.social-step {
  display: block;
  margin-bottom: var(--space-4);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #d4a833;
  text-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.45);
}

.social-feature__copy h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #f8fafc;
  margin-bottom: var(--space-5);
}

.social-feature__copy p {
  font-size: var(--text-lg);
  line-height: 1.72;
  color: rgba(241, 245, 249, 0.90);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
  margin-bottom: var(--space-6);
}

.social-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.social-checks li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: rgba(241, 245, 249, 0.92);
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
}

.social-checks li::before {
  content: '';
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(var(--color-accent-rgb), 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%230b61d8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center;
  border: 1px solid rgba(var(--color-accent-rgb), 0.3);
}

/* ── Visual mocks ────────────────────────────────────────────────────── */

.social-feature__visual {
  position: relative;
}

.social-mock {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: var(--space-6);
  overflow: hidden;
}

/* Calendar mock */
.social-mock--calendar .social-mock__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}

.social-mock__month {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(241, 245, 249, 0.88);
}

.social-mock__badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(var(--color-accent-rgb), 0.1);
  color: rgba(var(--color-accent-rgb), 0.85);
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
}

.social-mock__cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: var(--space-4);
}

.social-cal-day {
  aspect-ratio: 1;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
}

.social-cal-day--post {
  background: rgba(var(--color-accent-rgb), 0.22);
  border: 1px solid rgba(var(--color-accent-rgb), 0.4);
}

.social-cal-day--reel {
  background: rgba(var(--color-accent-rgb), 0.5);
  border: 1px solid rgba(var(--color-accent-rgb), 0.7);
  box-shadow: 0 0 8px rgba(var(--color-accent-rgb), 0.18);
}

.social-mock__legend {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(241, 245, 249, 0.78);
  letter-spacing: 0.06em;
}

.social-mock__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
}

.social-mock__dot--post {
  background: rgba(var(--color-accent-rgb), 0.35);
  border: 1px solid rgba(var(--color-accent-rgb), 0.55);
}

.social-mock__dot--reel {
  background: rgba(var(--color-accent-rgb), 0.65);
  border: 1px solid rgba(var(--color-accent-rgb), 0.85);
}

/* Post card mocks */
.social-post-stack {
  position: relative;
  max-width: 320px;
  margin: auto;
}

.social-mock--post {
  max-width: 300px;
}

.social-mock--post-b {
  margin-top: var(--space-4);
  transform: translateX(20px);
}

.social-mock-post__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.social-mock-post__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  flex-shrink: 0;
}

.social-mock-post__avatar--li {
  background: linear-gradient(135deg, #0077b5, #00a0dc);
}

.social-mock-post__meta {
  flex: 1;
  min-width: 0;
}

.social-mock__line {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 6px;
}

.social-mock__line--name { width: 85px; }
.social-mock__line--handle { width: 55px; height: 5px; background: rgba(255, 255, 255, 0.07); }
.social-mock__line--short { width: 55%; }

.social-mock-post__badge {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(var(--color-accent-rgb), 0.14);
  color: rgba(var(--color-accent-rgb), 0.9);
  border: 1px solid rgba(var(--color-accent-rgb), 0.25);
  flex-shrink: 0;
}

.social-mock-post__badge--li {
  background: rgba(0, 119, 181, 0.18);
  color: #7ec8e3;
  border-color: rgba(0, 119, 181, 0.28);
}

.social-mock-post__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.14), rgba(var(--color-accent-rgb), 0.04));
  border: 1px solid rgba(var(--color-accent-rgb), 0.1);
  margin-bottom: var(--space-4);
}

.social-mock-post__caption {
  margin-bottom: var(--space-3);
}

.social-mock-post__stats {
  display: flex;
  gap: var(--space-4);
  font-size: 0.72rem;
  color: rgba(241, 245, 249, 0.72);
}

/* Chart mock */
.social-mock--chart {
  min-width: 260px;
}

.social-mock__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}

.social-mock__chart-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(241, 245, 249, 0.88);
}

.social-mock__chart-delta {
  font-size: 0.72rem;
  font-weight: 700;
  color: #4ade80;
}

.social-mock__bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 110px;
  margin-bottom: var(--space-8);
}

.social-mock__bar {
  flex: 1;
  height: var(--h, 50%);
  background: rgba(var(--color-accent-rgb), 0.2);
  border-radius: 5px 5px 0 0;
  position: relative;
}

.social-mock__bar--hi {
  background: rgba(var(--color-accent-rgb), 0.65);
  box-shadow: 0 0 16px rgba(var(--color-accent-rgb), 0.22);
}

.social-mock__bar-lbl {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 600;
  color: rgba(241, 245, 249, 0.72);
  white-space: nowrap;
}

.social-mock__metrics {
  display: flex;
  gap: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.social-mock__metric {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.social-mock__metric-n {
  font-size: 1.1rem;
  font-weight: 800;
  color: rgba(241, 245, 249, 0.92);
  letter-spacing: -0.02em;
}

.social-mock__metric-l {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 245, 249, 0.72);
}

/* ── Platform breakdown (analytics dashboard mock) ─────────────────── */

.social-mock__plat-section {
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.social-mock__plat-label {
  display: block;
  margin-bottom: var(--space-3);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(241, 245, 249, 0.55);
}

.social-mock__plat-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.social-mock__plat-row:last-child {
  margin-bottom: 0;
}

.social-mock__plat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--plat-color, rgba(255, 255, 255, 0.4));
}

.social-mock__plat-name {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(241, 245, 249, 0.78);
  min-width: 68px;
}

.social-mock__plat-bar-wrap {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.social-mock__plat-bar {
  height: 100%;
  width: var(--w, 0%);
  border-radius: 2px;
  background: var(--plat-color, rgba(255, 255, 255, 0.4));
}

.social-mock__plat-pct {
  flex: 0 0 auto;
  min-width: 2.5ch;
  text-align: right;
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(241, 245, 249, 0.65);
}

.social-mock__plat-row[data-platform="instagram"] { --plat-color: rgba(225, 48, 108, 0.75); }
.social-mock__plat-row[data-platform="linkedin"]  { --plat-color: rgba(10, 102, 194, 0.75); }
.social-mock__plat-row[data-platform="tiktok"]    { --plat-color: rgba(139, 92, 246, 0.75); }

/* ── CTA closer ──────────────────────────────────────────────────────── */

.social-closer {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(5rem, 3rem + 6vw, 9rem) calc(50vw - 50% + var(--space-10));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.social-closer__panel {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  padding: var(--space-12) var(--space-10);
  border-radius: var(--radius);
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.social-closer__panel .social-eyebrow {
  margin-bottom: var(--space-3);
}

.social-closer__panel h2 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-5);
}

.social-closer__meta {
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  color: rgba(241, 245, 249, 0.90);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

.social-closer__cta {
  display: inline-flex;
}

.social-closer__panel a:not(.button) {
  color: var(--color-accent-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .social-feature__layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .social-feature--flip .social-feature__layout {
    direction: ltr;
  }
  .social-feature__visual {
    max-width: 420px;
    margin: 0 auto;
  }
  .social-mock--post-b {
    transform: none;
  }
}

@media (max-width: 600px) {
  .social-stat {
    flex: 1 1 120px;
  }
  .social-closer__panel {
    padding: var(--space-10) var(--space-6);
  }
  .social-mock--chart .social-mock__bars {
    height: 80px;
  }
}

/* Responsive */
@media (max-width: 980px) {
  .nav-links {
    display: none;
  }

  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-grid--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cta-panel,
  .contact-panel {
    padding: var(--space-10) var(--space-8);
  }
}

@media (max-width: 560px) {
  .container {
    padding: 0 var(--space-5);
  }

  body {
    font-size: var(--text-sm);
  }

  h1 {
    letter-spacing: -0.04em;
  }

  h2 {
    font-size: clamp(1.2rem, 1.05rem + 0.9vw, 1.6rem);
  }

  h3 {
    font-size: 1.125rem;
  }

  .service-grid,
  .service-grid--wide,
  .testimonial-grid,
  .process-steps {
    grid-template-columns: 1fr;
  }

  /* Stats 2-up: four ~170px-tall cards one per row read as a list, not a
     figure. An odd last card spans the row. */
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .stats-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .stat-card {
    padding: var(--space-6) var(--space-3);
  }
  .stat-num {
    font-size: 1.75rem;
  }
  .stat-card p {
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
  }

  .hero-actions,
  .cta-actions {
    gap: var(--space-3);
  }

  .button {
    width: 100%;
    justify-content: center;
    padding: 0.9rem 1rem;
  }

  .nav-cta {
    display: none;
  }

  /* Phone section rhythm: 40px each side. With card padding and the footer's
     own top padding stacked on top, 48px left 140-200px gaps between blocks. */
  .section {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  .site-footer {
    padding-top: var(--space-10);
  }

  /* Cards that end a section: 32px -> 24px so the card's inner padding
     doesn't add a third layer of whitespace to the section gap. */
  .glass-card.service-card,
  .glass-card.about-card,
  .solid-card.testimonial-card {
    padding: var(--space-6);
  }

  .home > .section,
  .page-about-content > .section,
  .page-services-content > .section,
  .page-portfolio-content > .section,
  .page-contact-content > .section,
  .page-privacy-content > .section,
  .page-about .page-intro,
  .page-services .page-intro,
  .page-portfolio .page-intro,
  .page-contact .page-intro,
  .page-privacy .page-intro {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .page-home .site-footer,
  .page-about .site-footer,
  .page-services .site-footer,
  .page-portfolio .site-footer,
  .page-contact .site-footer,
  .page-privacy .site-footer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .hero {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* The glass-white CTA override here existed only to lift the button
     off the old amber ground. On Prussian the amber CTA carries itself
     at every breakpoint, so the base .hero .button.primary rule stands. */

  /* No side padding: headings share the band's 16px gutter with the cards
     beneath them instead of sitting 24px further in. */
  .section-header {
    padding: 0;
  }

  /* Service detail hero sits outside the full-bleed bands, so it inherited the
     container's 44px inset; put it on the same 16px gutter as the cards below. */
  .page-services-content > .svc-hero,
  .pf-detail > .pf-breadcrumb,
  .pf-detail > .pf-hero,
  .pf-detail > .pf-image {
    width: calc(100vw - 2 * var(--space-4));
    margin-left: calc(50% - 50vw + var(--space-4));
  }

  /* 72% navy over white content reads as muddy grey on a small screen. */
  .site-header.is-scrolled {
    background: rgba(var(--color-dark-rgb), 0.94);
  }

  .cta-panel,
  .contact-panel {
    padding: var(--space-8) var(--space-6);
  }

  .step-num {
    font-size: 1.8rem;
  }

  /* Decorative scroll-phase word; on a phone it only overlaps body copy. */
  .phase-label {
    display: none;
  }

  /* One gutter for every social band. On desktop the bands pad by
     calc(50vw - 50% + …) to line up with .container, but on a phone that
     stacks the container's own 44px inset on top (64-108px per side), and the
     bands that never went full-bleed (svc/values/cases/contact grids, stats
     band, AI chat) ended up as ~175px columns. Here every band spans the
     viewport and pads 20px. `.social-page >` beats .social-subhero, whose base
     rule sits later in this file. .social-glass-pane is deliberately omitted. */
  .social-page > .social-hero,
  .social-page > .social-subhero,
  .social-page > .social-feature,
  .social-page > .social-stats-band,
  .social-page > .section,
  .page-social .chat-ai-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  /* Social feature bands pad 80px top and bottom here (clamp floor of 5rem),
     so consecutive features sat ~186px apart. Match the 48px .section rhythm. */
  .social-page > .social-feature {
    padding-top: var(--space-10);
    padding-bottom: var(--space-10);
  }

  /* Sub-page hero bottom (56px) + the lede's 32px margin stacked to ~90px
     before the next band's own padding even started. */
  .social-page > .social-subhero {
    padding-bottom: var(--space-10);
  }
  .social-page > .social-hero,
  .social-page > .social-hero--contact {
    padding-bottom: var(--space-10);
  }
  .social-hero > :last-child,
  .social-subhero > :last-child {
    margin-bottom: 0;
  }

  .social-closer .social-closer__panel {
    padding: var(--space-8) var(--space-5);
  }

  /* A full-viewport hero on a phone centres ~350px of copy in ~770px, leaving
     150-250px of blank field under the buttons. Size to content instead. */
  .hero,
  .social-page > .social-hero {
    min-height: 0;
  }

  .social-stripe__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VIBRANT SOCIAL PAGE - aurora, gradient text, platform colors
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Hero overflow containment ───────────────────────────────────── */
.social-hero {
  overflow: hidden;
}

/* ── 2. Aurora blobs ────────────────────────────────────────────────── */
.social-hero__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.social-hero > *:not(.social-hero__aurora) {
  position: relative;
  z-index: 1;
}

.social-hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

/* Blob A - pink/magenta, top-left drift */
.social-hero__blob--a {
  width: clamp(320px, 45vw, 600px);
  height: clamp(320px, 45vw, 600px);
  background: radial-gradient(circle, rgba(225, 48, 108, 0.32) 0%, transparent 70%);
  top: -10%;
  left: -5%;
  animation: aurora-blob-a 12s ease-in-out infinite alternate;
}

/* Blob B - cyan, bottom-right drift */
.social-hero__blob--b {
  width: clamp(280px, 40vw, 520px);
  height: clamp(280px, 40vw, 520px);
  background: radial-gradient(circle, rgba(0, 187, 255, 0.25) 0%, transparent 70%);
  bottom: -5%;
  right: 5%;
  animation: aurora-blob-b 14s ease-in-out infinite alternate;
}

/* Blob C - purple, centre pulse */
.social-hero__blob--c {
  width: clamp(240px, 35vw, 460px);
  height: clamp(240px, 35vw, 460px);
  background: radial-gradient(circle, rgba(136, 0, 255, 0.2) 0%, transparent 70%);
  top: 30%;
  left: 35%;
  animation: aurora-blob-c 10s ease-in-out infinite alternate;
}

@keyframes aurora-blob-a {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(8%, 12%) scale(1.18); }
}

@keyframes aurora-blob-b {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-10%, -8%) scale(1.14); }
}

@keyframes aurora-blob-c {
  from { transform: translate(0, 0) scale(0.9); }
  to   { transform: translate(-6%, 8%) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .social-hero__blob { animation: none; }
}

/* ── 3. Animated gradient headline word ─────────────────────────────── */
.social-hero__gradient-word {
  background: linear-gradient(90deg, #ff0080, #8800ff, #00bbff, var(--color-accent), #ff0080);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: gradient-shift 6s ease infinite;
  text-shadow: none;
  /* background-clip:text only paints inside the span's box, and at this
     weight/line-height descenders (the "y" in "strategy") hang below it and
     got sliced off. Vertical padding on an inline box grows the painted area
     without moving the line; the right padding (cancelled by the negative
     margin) does the same for the last glyph under the tight letter-spacing. */
  padding-bottom: 0.18em;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .social-hero__gradient-word {
    animation: none;
    background-position: 0% 50%;
  }
}

/* ── 4. Platform pill brand colours ─────────────────────────────────── */
a.social-pill[data-platform="instagram"]:hover {
  border-color: #e1306c;
  color: #e1306c;
  box-shadow: 0 0 14px rgba(225, 48, 108, 0.22);
}

a.social-pill[data-platform="linkedin"]:hover {
  border-color: #0077b5;
  color: #5bb8e8;
  box-shadow: 0 0 14px rgba(0, 119, 181, 0.22);
}

a.social-pill[data-platform="tiktok"]:hover {
  border-color: #00f2ea;
  color: #00f2ea;
  box-shadow: 0 0 14px rgba(0, 242, 234, 0.2);
}

a.social-pill[data-platform="facebook"]:hover {
  border-color: #1877f2;
  color: #5fa3f5;
  box-shadow: 0 0 14px rgba(24, 119, 242, 0.2);
}

a.social-pill[data-platform="twitter"]:hover {
  border-color: #aaaaaa;
  color: #cccccc;
  box-shadow: 0 0 14px rgba(200, 200, 200, 0.15);
}

/* ── 5. Vibrant stats - each number a different platform colour ──────── */
.social-stat:nth-child(1) .social-stat__n { color: #e1306c; }
.social-stat:nth-child(2) .social-stat__n { color: #00e5d4; }
.social-stat:nth-child(3) .social-stat__n { color: #5bb8e8; }
/* nth-child(4) keeps the default gold from .social-stat__n */

/* ── 6. Calendar - story (pink) and linkedin (blue) day types ────────── */
.social-cal-day--story {
  background: rgba(225, 48, 108, 0.38);
  border: 1px solid rgba(225, 48, 108, 0.6);
  box-shadow: 0 0 8px rgba(225, 48, 108, 0.18);
}

.social-cal-day--linkedin {
  background: rgba(0, 119, 181, 0.38);
  border: 1px solid rgba(0, 119, 181, 0.6);
  box-shadow: 0 0 8px rgba(0, 119, 181, 0.18);
}

.social-mock__dot--story {
  background: rgba(225, 48, 108, 0.65);
  border: 1px solid rgba(225, 48, 108, 0.85);
}

.social-mock__dot--linkedin {
  background: rgba(0, 119, 181, 0.65);
  border: 1px solid rgba(0, 119, 181, 0.85);
}

/* ── 7. Animated chart bars (grow-in on scroll) ─────────────────────── */
.social-mock__bar {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.social-mock__bar.is-visible {
  transform: scaleY(1);
}

.social-mock__bar:nth-child(1).is-visible { transition-delay: 0s; }
.social-mock__bar:nth-child(2).is-visible { transition-delay: 0.08s; }
.social-mock__bar:nth-child(3).is-visible { transition-delay: 0.16s; }
.social-mock__bar:nth-child(4).is-visible { transition-delay: 0.24s; }
.social-mock__bar:nth-child(5).is-visible { transition-delay: 0.32s; }

.social-mock__bar--hi {
  background: linear-gradient(to top, var(--color-accent) 0%, #e1306c 100%);
  box-shadow: 0 0 20px rgba(225, 48, 108, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .social-mock__bar {
    transform: scaleY(1);
    transition: none;
  }
}

/* ── 8. CTA panel - spinning rainbow border ─────────────────────────── */
@property --social-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.social-closer__panel {
  position: relative;
  border-color: transparent;
  isolation: isolate;
}

.social-closer__panel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  background: conic-gradient(
    from var(--social-angle, 0deg),
    #ff0080, #8800ff, #00bbff, var(--color-accent), #ff0080
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  animation: spin-social-border 6s linear infinite;
  z-index: -1;
  pointer-events: none;
}

@keyframes spin-social-border {
  to { --social-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .social-closer__panel::before {
    animation: none;
    background: rgba(var(--color-accent-rgb), 0.22);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   GLASS BLUR LAYER - social media page
   Sits between the Three.js canvas (fixed, z:0) and the sections (z:1).
   Because it is later in the DOM than #three-container and shares
   z-index:0, it paints on top of the canvas and blurs it.
   ══════════════════════════════════════════════════════════════════════ */

.social-glass-pane {
  position: fixed;
  inset: 0;
  z-index: 0;                           /* same level as canvas - DOM order wins */
  background: rgba(8, 8, 10, 0.12);    /* light tint - keeps animation vivid    */
  backdrop-filter: blur(1.8px) saturate(1.2);
  -webkit-backdrop-filter: blur(1.8px) saturate(1.2);
  pointer-events: none;
}

/* ── Per-section glass panels (sit above the global glass pane) ──────── */

/* Hero: minimal - aurora blobs + nodes clearly visible */
.page-social .social-hero {
  background: rgba(8, 8, 10, 0.10);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Stats band */
.page-social .social-stats-band {
  background: rgba(8, 8, 10, 0.50);
  backdrop-filter: blur(3.6px);
  -webkit-backdrop-filter: blur(3.6px);
}

/* Feature sections */
.page-social .social-feature {
  background: rgba(8, 8, 10, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.page-social .social-feature--alt {
  background: rgba(8, 8, 10, 0.50);
}

/* CTA closer */
.page-social .social-closer {
  background: rgba(8, 8, 10, 0.55);
  backdrop-filter: blur(4.8px);
  -webkit-backdrop-filter: blur(4.8px);
}

/* Respect reduced-motion: keep tint, drop blur */
@media (prefers-reduced-motion: reduce) {
  .social-glass-pane {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(8, 8, 10, 0.65);
  }
  .page-social .social-hero,
  .page-social .social-stats-band,
  .page-social .social-feature,
  .page-social .social-closer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   SOCIAL MEDIA - SUB-PAGES  (/social-media/about|services|portfolio)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb (first line inside .social-subhero, so it shares the
   hero's padding/alignment and background - no separate bar) ────────── */
.social-breadcrumb {
  margin-bottom: var(--space-6);
}

.social-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.4;
}

.social-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(241, 245, 249, 0.45);
}

/* After (not before) each crumb, so a wrapped trail ends its line with "/"
   rather than starting the next one with it. */
.social-breadcrumb li:not(:last-child)::after {
  content: "/";
  content: "/" / "";
  color: rgba(241, 245, 249, 0.25);
}

.social-breadcrumb li[aria-current="page"] {
  color: rgba(241, 245, 249, 0.8);
}

/* Excluded from the generic `.page-social .social-page a` link rule (blue +
   underline), which otherwise outranks this. */
.social-breadcrumb__link {
  color: rgba(241, 245, 249, 0.55);
  text-decoration: none;
  transition: color 0.18s;
}
.social-breadcrumb__link:hover,
.social-breadcrumb__link:focus-visible { color: var(--color-accent-light); }

/* Active state for social nav items injected into the primary header */
.page-social .nav-links a[aria-current="page"] {
  color: var(--color-accent-light, var(--color-accent-light));
}

/* ── Sub-page hero (compact; reuses aurora blobs from social-hero) ───── */
.social-subhero {
  position: relative;
  z-index: 1;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(3.5rem, 2.5rem + 4vw, 6rem) calc(50vw - 50% + var(--space-10));
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.social-subhero .social-hero__aurora { opacity: 0.5; }

.social-subhero > *:not(.social-hero__aurora) {
  position: relative;
  z-index: 1;
}

.social-subhero h1 {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 700;
  line-height: 1.18;
  color: #f1f5f9;
  max-width: 22ch;
}

.page-social .social-subhero {
  background: rgba(8, 8, 10, 0.10);
  backdrop-filter: blur(1.2px);
  -webkit-backdrop-filter: blur(1.2px);
}

/* ── Shared section header for sub-pages ────────────────────────────── */
.social-section-header {
  margin-bottom: var(--space-8);
}

.social-section-header h2 {
  margin: var(--space-3) 0 0;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
}

/* Every social band must sit above the fixed .social-glass-pane (z-index:0) and
   the Three.js canvas. .social-hero / .social-subhero / .social-feature /
   .social-closer each carry `position:relative; z-index:1` for this reason, and
   the bands with their own backdrop-filter get a stacking context for free.
   The three grid sections below had neither, so the pane painted ON TOP of them
   and its blur(1.8px) fell on their own text - issue #9. A section-level rule
   rather than three per-section declarations so a new band can't reintroduce it.
   `.page-social-content` is the CMS social template, which has no glass pane but
   sits under the same fixed canvas - included as hardening. */
.social-page > .section,
.page-social-content > .section {
  position: relative;
  z-index: 1;
}

/* ── Values section (about page) ────────────────────────────────────── */
.social-values-section { background: rgba(8, 8, 10, 0.42); }

.social-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.social-value-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: var(--space-6);
  transition: border-color 0.22s, background 0.22s;
}

.social-value-card:hover {
  background: rgba(var(--color-accent-rgb), 0.06);
  border-color: rgba(var(--color-accent-rgb), 0.22);
}

.social-value-card .social-step { display: block; margin-bottom: var(--space-3); }

.social-value-card h3 {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  font-weight: 600;
  color: #f1f5f9;
}

.social-value-card p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(241, 245, 249, 0.62);
  line-height: 1.6;
}

/* ── Services grid (services page) ─────────────────────────────────── */
.social-svc-section { background: rgba(8, 8, 10, 0.50); }

.social-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.social-svc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: var(--space-6);
  transition: border-color 0.22s, background 0.22s;
}

.social-svc-card:hover {
  background: rgba(var(--color-accent-rgb), 0.07);
  border-color: rgba(var(--color-accent-rgb), 0.28);
}

.social-svc-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--color-accent-rgb), 0.12);
  border: 1px solid rgba(var(--color-accent-rgb), 0.2);
  margin-bottom: var(--space-4);
  font-size: 1.2rem;
}

.social-svc-card h3 {
  margin: 0 0 var(--space-3);
  font-size: 1rem;
  font-weight: 600;
  color: #f1f5f9;
}

.social-svc-card > p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(241, 245, 249, 0.62);
  line-height: 1.6;
}

.social-svc-card ul {
  margin: var(--space-4) 0 0;
  padding: 0 0 0 var(--space-5);
  color: rgba(241, 245, 249, 0.52);
  font-size: 0.875rem;
  line-height: 1.75;
}

/* ── Case studies grid (portfolio page) ─────────────────────────────── */
.social-cases-section { background: rgba(8, 8, 10, 0.42); }

.social-cases-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.social-case-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: var(--space-7, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color 0.22s, background 0.22s;
}

.social-case-card:hover {
  background: rgba(var(--color-accent-rgb), 0.05);
  border-color: rgba(var(--color-accent-rgb), 0.2);
}

.social-case-card__platform {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.social-case-card h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #f1f5f9;
  line-height: 1.3;
}

.social-case-card > p {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(241, 245, 249, 0.62);
  line-height: 1.65;
}

.social-case-results {
  display: flex;
  gap: var(--space-6);
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.social-case-result__n {
  display: block;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-accent-light);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.social-case-result__l {
  font-size: 0.78rem;
  color: rgba(241, 245, 249, 0.45);
}

/* .social-case-card is now rendered on an <a> (whole card is the click
   target for /social-media/portfolio/<slug>), so it needs its own reset -
   child elements already carry explicit colors, only the anchor itself does
   not. */
.social-cases-grid > li {
  margin: 0;
  list-style: none;
}

a.social-case-card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.social-case-card:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: 3px;
}

.social-case-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: var(--space-2);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent-light);
  transition: gap 0.18s ease;
}

a.social-case-card:hover .social-case-card__cta {
  gap: 0.55em;
}

/* Visually clamp long descriptions rather than truncating the string server
   side, so the full text is still available to assistive tech / view-source. */
.social-case-card > p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-cases-empty {
  margin: var(--space-8) 0 0;
  padding: var(--space-8);
  text-align: center;
  color: rgba(241, 245, 249, 0.55);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

/* ── Featured projects strip (social overview, app/Views/social.php) ─────
   A full-bleed band like .social-feature, so it sits with its neighbours; the
   cards are the portfolio page's .social-cases-grid / .social-case-card. The
   phone-width gutter comes from the `.social-page > .section` rule above. */
.social-featured {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: clamp(4rem, 2.5rem + 5vw, 7rem) calc(50vw - 50% + var(--space-10));
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(8, 8, 10, 0.42);
}

.social-featured > * {
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.social-featured__more {
  margin-top: var(--space-8);
  text-align: center;
}

/* ── Responsive breakpoints for sub-page grids ──────────────────────── */
@media (max-width: 900px) {
  .social-svc-grid      { grid-template-columns: repeat(2, 1fr); }
  .social-values-grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .social-svc-grid      { grid-template-columns: 1fr; }
  .social-values-grid   { grid-template-columns: 1fr; }
  .social-cases-grid    { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   SOCIAL PORTFOLIO DETAIL PAGE  (app/Views/social/portfolio-detail.php)
   Reuses the sub-page tokens above (.social-subhero, .social-eyebrow,
   .social-section-header, .social-values-grid/.social-value-card for the
   campaign steps, .social-closer for the CTA) and adds only what the tech
   .pf-* detail page has no dark-themed equivalent for.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Hero platform / sector chips ───────────────────────────────────── */
.social-detail-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-5);
}

.social-detail-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(241, 245, 249, 0.85);
}

.social-detail-chip--platform {
  color: var(--chip-color, var(--color-accent-light));
  border-color: color-mix(in srgb, var(--chip-color, var(--color-accent-light)) 45%, transparent);
  background: color-mix(in srgb, var(--chip-color, var(--color-accent-light)) 14%, transparent);
}

.social-detail-chip--sector {
  color: #c4b5fd;
  border-color: rgba(139, 92, 246, 0.35);
  background: rgba(139, 92, 246, 0.12);
}

/* ── Results band - shares copy with the listing card's .social-case-result,
       shown standalone (not inside a card) directly under the hero.        */
.social-detail-results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  position: relative;
  z-index: 1;
  margin: 0 auto var(--space-12);
  padding: var(--space-6) var(--space-8);
  max-width: 1100px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
}

.social-detail-result__n {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--color-accent-light);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.social-detail-result__l {
  font-size: 0.8125rem;
  color: rgba(241, 245, 249, 0.55);
}

/* ── Generic section wrapper for overview / gallery / related ──────────── */
.social-detail-section { position: relative; z-index: 1; }

/* ── Overview two-column layout ─────────────────────────────────────── */
.social-detail-overview {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-10);
  align-items: start;
}

.social-detail-overview__copy p {
  margin-top: var(--space-3);
}

.social-detail-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: var(--space-6);
}

.social-detail-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.social-detail-meta p {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
}

.social-detail-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(241, 245, 249, 0.45);
  margin: 0 0 2px !important;
}

/* ── Gallery ─────────────────────────────────────────────────────────── */
.social-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  align-items: start;
}

.social-detail-gallery__item { margin: 0; }

.social-detail-gallery__figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease;
}

.social-detail-gallery__figure:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--color-accent-rgb), 0.35);
}

.social-detail-gallery__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.social-detail-gallery__caption {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: rgba(241, 245, 249, 0.6);
}

/* ── Related case studies - compact link cards ──────────────────────── */
.social-detail-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
}

.social-detail-related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.social-detail-related-card:hover {
  transform: translateY(-3px);
  background: rgba(var(--color-accent-rgb), 0.06);
  border-color: rgba(var(--color-accent-rgb), 0.28);
}

.social-detail-related-card__title {
  font-weight: 600;
  color: #f1f5f9;
}

.social-detail-related-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-accent-light);
}

/* ── Cross-link to the tech-site case study ─────────────────────────── */
.social-detail-crosslink-section { position: relative; z-index: 1; }

.social-detail-crosslink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.social-detail-crosslink:hover {
  background: rgba(var(--color-accent-rgb), 0.07);
  border-color: rgba(var(--color-accent-rgb), 0.3);
}

.social-detail-crosslink__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(241, 245, 249, 0.5);
}

.social-detail-crosslink__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #f1f5f9;
}

@media (max-width: 860px) {
  .social-detail-overview { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .social-detail-results       { padding: var(--space-5) var(--space-6); gap: var(--space-6); }
  .social-detail-related-grid  { grid-template-columns: 1fr; }
  .social-detail-crosslink     { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .social-detail-chips    { gap: 0.4rem; }
  .social-detail-chip     { font-size: 0.66rem; padding: 3px 10px; }
  .social-detail-results  { padding: var(--space-4); gap: var(--space-5); }
  .social-detail-result__n { font-size: 1.4rem; }
  .social-detail-meta,
  .social-detail-related-card,
  .social-detail-crosslink { padding: var(--space-4); }
}

/* ══════════════════════════════════════════════════════════════════════
   PAGE TRANSITION OVERLAY
   Starts opaque on every page load; JS fades it out via .is-out.
   On exit it returns to opaque, then JS navigates after transitionend.
   ══════════════════════════════════════════════════════════════════════ */

#page-transition {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: radial-gradient(ellipse at 35% 55%, #111827 0%, #0b0c0f 70%);
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.48s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
  overflow: hidden;
}

/* Shimmering gold bar at the bottom while overlay is visible */
#page-transition::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent, var(--color-accent)) 30%,
    var(--color-accent-light, var(--color-accent-light)) 50%,
    var(--color-accent, var(--color-accent)) 70%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: pt-shimmer 1.4s linear infinite;
}

@keyframes pt-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

#page-transition.is-out {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #page-transition { transition: none; }
  #page-transition::after { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   DEDICATED PAGES - reveal, nav highlight, dropdown, new components
   ══════════════════════════════════════════════════════════════════════ */

/* Active nav link highlight */
.page-about .nav-links a[aria-current="page"],
.page-services .nav-links a[aria-current="page"],
.page-portfolio .nav-links a[aria-current="page"],
.page-contact .nav-links a[aria-current="page"],
.page-privacy .nav-links a[aria-current="page"] { color: var(--color-accent); text-decoration: none; }

/* ── Services dropdown ─────────────────────────────────────────────── */
.nav-item--dropdown { position: relative; }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 220px;
  list-style: none;
  margin: 0;
  /* 8px top padding acts as the visual gap AND keeps the hover area
     connected - no dead zone between the trigger and the panel */
  padding: 8px 0 var(--space-3);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 30;
}

/* The visible panel sits inside the padding-bridged wrapper */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.13), 0 2px 6px rgba(16, 24, 40, 0.07);
  z-index: -1;
}

.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}

/* Mobile-only row inside the Services panel - see the @media (max-width: 980px)
   block for why it exists. Hidden on desktop, where the "Services" label is
   itself the link to /services and this would just duplicate it. */
.nav-dropdown__overview { display: none; }

.nav-dropdown a:hover {
  background: #f0f6ff;
  color: var(--color-accent);
  text-decoration: none;
}

/* svc-cap used as anchor on services overview page */
a.svc-cap { text-decoration: none; color: inherit; }

/* ── Portfolio mega-menu ────────────────────────────────────────────── */
.nav-item--mega { position: relative; }

.nav-megamenu {
  position: absolute;
  top: 100%;
  right: 0;              /* align right so it doesn't overflow viewport edge */
  padding-top: 8px;      /* invisible bridge keeps hover active over the gap  */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 30;
}

.nav-item--dropdown:hover .nav-megamenu,
.nav-item--dropdown:focus-within .nav-megamenu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-megamenu__inner {
  display: flex;
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.13), 0 2px 6px rgba(16, 24, 40, 0.07);
  overflow: hidden;
  min-width: 440px;
}

.nav-megamenu__col {
  flex: 1;
  padding: 20px 22px 18px;
}

.nav-megamenu__sep {
  width: 1px;
  background: #f1f5f9;
  flex-shrink: 0;
  margin: 14px 0;
}

.nav-megamenu__heading {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.nav-megamenu__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-megamenu__col ul a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 0.84rem;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.nav-megamenu__col ul a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
  transition: background 120ms ease;
}
.nav-megamenu__col ul a:hover {
  background: #f0f6ff;
  color: var(--color-accent);
}
.nav-megamenu__col ul a:hover::before {
  background: var(--color-accent);
}

/* ── Portfolio filter buttons ──────────────────────────────────────── */
/* ── Portfolio card grid ──────────────────────────────────────────────── */
.portfolio-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}

/* ── Glass card ─────────────────────────────────────────────────────────
   Semi-transparent frosted panel - blob from #three-container bleeds through
   ─────────────────────────────────────────────────────────────────────── */
.portfolio-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: var(--radius);
  box-shadow:
    0 4px 24px rgba(11, 42, 107, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.80);  /* top-edge inner highlight */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.68);
  box-shadow:
    0 12px 40px rgba(11, 42, 107, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
  border-color: rgba(96, 165, 250, 0.55);     /* blue-400 rim on hover */
}

/* Image area - subtle frosted wash so blob glows softly behind it */
.portfolio-card__thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(219, 234, 254, 0.30);      /* blue-100 at low opacity */
  flex-shrink: 0;
  position: relative;
}

.portfolio-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 360ms ease, opacity 360ms ease;
  opacity: 0.90;                              /* slight transparency - blob glows through */
}

.portfolio-card:hover .portfolio-card__thumb img {
  transform: scale(1.04);
  opacity: 1;
}

/* Text content area */
.portfolio-card__body {
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.portfolio-card__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.portfolio-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.portfolio-card__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.65;
}

/* "View →" button - glass pill */
.portfolio-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding: 7px 14px;
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
  border-radius: var(--radius-sm, 6px);
  background: rgba(255, 255, 255, 0.50);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
  width: fit-content;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
  cursor: default;
}

.portfolio-card:hover .portfolio-card__cta {
  background: rgba(var(--color-accent-rgb), 0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 700px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Portfolio filter chips ───────────────────────────────────────────── */
.portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.portfolio-filter {
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.portfolio-filter:hover {
  background: rgba(255, 255, 255, 0.65);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.portfolio-filter.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Industry filters - hidden in the strip until activated via nav link */
.portfolio-filter[data-filter="construction"],
.portfolio-filter[data-filter="hospitality"],
.portfolio-filter[data-filter="education"],
.portfolio-filter[data-filter="retail"],
.portfolio-filter[data-filter="manufacturing"] {
  display: none;
}
.portfolio-filter[data-filter="construction"].is-active,
.portfolio-filter[data-filter="hospitality"].is-active,
.portfolio-filter[data-filter="education"].is-active,
.portfolio-filter[data-filter="retail"].is-active,
.portfolio-filter[data-filter="manufacturing"].is-active {
  display: inline-flex;
}

/* ── Contact page layout ───────────────────────────────────────────── */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-10);
  align-items: start;
}

.contact-details { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-info-card { padding: var(--space-6); }
.contact-info-card p { margin: var(--space-2) 0 0; }

.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.contact-form__field label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }

.contact-form__field input,
.contact-form__field textarea {
  padding: 0.62rem var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  resize: vertical;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-ring);
}

@media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .contact-form__row { grid-template-columns: 1fr; } }

/* ── Contact form status ──────────────────────────────────────────── */
#form-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  display: none;
}
#form-status.is-success {
  display: block;
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.35);
  color: #166534;
}
#form-status.is-error {
  display: block;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.3);
  color: #991b1b;
}
.contact-form__field .field-error {
  font-size: .8125rem;
  font-weight: 500;
  color: #b91c1c;
  margin-top: .25rem;
}
.contact-form__field input.is-invalid,
.contact-form__field textarea.is-invalid {
  border-color: rgba(239,68,68,.6);
  box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}

/* ── Contact social channels ──────────────────────────────────────── */
.contact-social {
  background: var(--color-subtle);
  border-radius: var(--radius);
}

.contact-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

.contact-social-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative;
  overflow: hidden;
}

.contact-social-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 220ms ease;
}

.contact-social-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

.contact-social-card:hover::before { opacity: 1; }

/* Platform accent colours */
.contact-social-card--instagram { --soc-color: #e1306c; --soc-bg: rgba(225,48,108,.06); }
.contact-social-card--linkedin  { --soc-color: #0a66c2; --soc-bg: rgba(10,102,194,.06); }
.contact-social-card--tiktok    { --soc-color: #010101; --soc-bg: rgba(1,1,1,.04); }
.contact-social-card--facebook  { --soc-color: #1877f2; --soc-bg: rgba(24,119,242,.06); }
.contact-social-card--twitter   { --soc-color: #101828; --soc-bg: rgba(16,24,40,.04); }

.contact-social-card::before { background: var(--soc-bg); }
.contact-social-card:hover { border-color: color-mix(in srgb, var(--soc-color) 30%, transparent); }

.contact-social-card__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--soc-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soc-color);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: background 180ms ease;
}

.contact-social-card:hover .contact-social-card__icon {
  background: color-mix(in srgb, var(--soc-color) 14%, transparent);
}

.contact-social-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  position: relative;
  z-index: 1;
  flex: 1;
}

.contact-social-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
}

.contact-social-card__handle {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.contact-social-card__cta {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--soc-color);
  position: relative;
  z-index: 1;
  transition: gap 140ms ease;
}

@media (max-width: 900px) {
  .contact-social-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .contact-social-grid { grid-template-columns: 1fr; }
  .contact-social-card { flex-direction: row; align-items: center; padding: var(--space-5) var(--space-5); }
  .contact-social-card__body { flex: 1; }
}

/* ── Social media contact page ────────────────────────────────────── */

.social-hero--contact {
  min-height: 0;
  padding-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  padding-bottom: clamp(3rem, 2rem + 2vw, 4.5rem);
}

.social-contact-section {
  position: relative;
  z-index: 1;
}

.social-contact-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-10);
  align-items: start;
}

.social-contact-form-wrap {
  padding: var(--space-10);
}

/* Platform checkbox pills */
.social-contact-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.social-contact-fieldset legend {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.social-contact-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.social-contact-check {
  display: contents;
}

.social-contact-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.social-contact-check__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
  user-select: none;
}

.social-contact-check__pill:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.social-contact-check input[type="checkbox"]:checked + .social-contact-check__pill {
  background: rgba(var(--color-accent-rgb), 0.12);
  border-color: var(--color-accent);
  color: var(--color-accent-light);
}

/* Platform-tinted checked states */
.social-contact-check input:checked + .social-contact-check__pill[data-platform="instagram"] {
  background: rgba(225, 48, 108, 0.10);
  border-color: #e1306c;
  color: #e1306c;
}
.social-contact-check input:checked + .social-contact-check__pill[data-platform="linkedin"] {
  background: rgba(10, 102, 194, 0.10);
  border-color: #0a66c2;
  color: #0a66c2;
}
.social-contact-check input:checked + .social-contact-check__pill[data-platform="tiktok"] {
  background: rgba(110, 64, 201, 0.10);
  border-color: #6e40c9;
  color: #a78bfa;
}
.social-contact-check input:checked + .social-contact-check__pill[data-platform="facebook"] {
  background: rgba(24, 119, 242, 0.10);
  border-color: #1877f2;
  color: #1877f2;
}
.social-contact-check input:checked + .social-contact-check__pill[data-platform="twitter"] {
  background: rgba(100, 116, 139, 0.10);
  border-color: var(--color-muted);
  color: var(--color-text);
}

/* Select field */
.contact-form__field select {
  width: 100%;
  padding: 0.62rem var(--space-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: inherit;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: 2.5rem;
  cursor: pointer;
  transition: border-color 160ms ease;
}

.contact-form__field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--color-accent-rgb), 0.15);
}

/* Sidebar */
.social-contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: calc(var(--header-h, 72px) + var(--space-8));
}

/* Compact contact info card */
.social-contact-info {
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.social-contact-info__label {
  margin: 0 0 var(--space-4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.social-contact-info__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.social-contact-info__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
}

.social-contact-info__link:hover { color: var(--color-accent); text-decoration: none; }

.social-contact-info__link-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-muted);
}

.social-contact-info__response {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* Platform follow grid */
.social-platform-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* Square platform cards */
.spc-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease, background 170ms ease;
  position: relative;
  overflow: hidden;
}

.spc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.10);
  text-decoration: none;
}

/* Wide card (5th - spans full row) */
.spc-card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
}

.spc-card--wide .spc-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.spc-card--wide .spc-card__cta {
  margin-top: 0;
  margin-left: auto;
}

/* Icon circle */
.spc-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--soc-bg, rgba(16,24,40,.05));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soc-color, var(--color-accent));
  flex-shrink: 0;
  margin-bottom: var(--space-1);
  transition: background 170ms ease;
}

.spc-card:hover .spc-card__icon {
  background: color-mix(in srgb, var(--soc-color, var(--color-accent)) 15%, transparent);
}

.spc-card__name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.spc-card__handle {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.spc-card__cta {
  display: block;
  margin-top: auto;
  padding-top: var(--space-3);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--soc-color, var(--color-accent));
}

/* Platform accent colours */
.spc-card--instagram { --soc-color: #e1306c; --soc-bg: rgba(225,48,108,.07); }
.spc-card--linkedin  { --soc-color: #0a66c2; --soc-bg: rgba(10,102,194,.07); }
.spc-card--tiktok    { --soc-color: #8b5cf6; --soc-bg: rgba(139,92,246,.07); }
.spc-card--facebook  { --soc-color: #1877f2; --soc-bg: rgba(24,119,242,.07); }
.spc-card--twitter   { --soc-color: #64748b; --soc-bg: rgba(100,116,139,.06); }

.spc-card:hover { border-color: color-mix(in srgb, var(--soc-color, var(--color-accent)) 35%, transparent); }

/* Form status */
#scf-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  display: none;
}

#scf-status:not(:empty) { display: block; }

#scf-status.is-success {
  background: rgba(34, 197, 94, 0.10);
  border: 1px solid rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

#scf-status.is-error {
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
}

@media (max-width: 1100px) {
  .social-contact-layout { grid-template-columns: 1fr 360px; }
}

@media (max-width: 860px) {
  /* minmax(0, …) so the form card's min-content can't widen the track past the section */
  .social-contact-layout { grid-template-columns: minmax(0, 1fr); }
  .social-contact-sidebar { position: static; }
  .social-contact-platforms .contact-social-card { flex-direction: row; }
}

@media (max-width: 560px) {
  /* was var(--space-7), which is not a defined token - the whole declaration
     was dropped and the card rendered with 0 padding */
  .social-contact-form-wrap { padding: var(--space-6) var(--space-5); }
}

/* ── Privacy policy prose ─────────────────────────────────────────── */
.privacy-prose { max-width: 72ch; margin: 0 auto; }
.privacy-prose h2 { margin-top: var(--space-10); margin-bottom: var(--space-4); font-size: var(--text-xl); font-weight: 700; }
.privacy-prose h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); font-size: var(--text-base); font-weight: 700; }
.privacy-prose p, .privacy-prose li { line-height: 1.75; color: var(--color-muted); }
.privacy-prose ul { padding-left: var(--space-6); margin-bottom: var(--space-5); }
.privacy-prose li { margin-bottom: var(--space-2); }
.privacy-prose a { color: var(--color-accent); }
.privacy-prose .effective-date { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-10); }

/* ── Inner page intro ─────────────────────────────────────────────── */
.page-intro {
  padding-top: var(--space-16);
  padding-bottom: var(--space-10);
  text-align: center;
  position: relative;
  z-index: 1;
}
.page-intro .eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}
.page-intro h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.page-intro .lede {
  font-size: var(--text-lg);
  color: var(--color-muted);
  max-width: 54ch;
  margin: 0 auto;
  line-height: 1.6;
}


/* ══════════════════════════════════════════════════════════════════════
   LOGO NAVIGATION - visual indicator on social page
   ══════════════════════════════════════════════════════════════════════ */

/* Brand mode badge */
.brand-mode-badge {
  display: none;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff0080, #8800ff);
  color: #fff;
  vertical-align: middle;
  margin-left: 4px;
  user-select: none;
}
.navbar--social .brand-mode-badge { display: inline; }

/* Brand dot - social mode: spinning gradient */
@property --dot-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.navbar--social .brand-mark {
  background: conic-gradient(from var(--dot-angle), #ff0080, #8800ff, #00bbff, var(--color-accent), #ff0080);
  box-shadow: 0 0 0 6px rgba(225, 48, 108, 0.18), 0 0 14px rgba(136, 0, 255, 0.2);
  animation: dot-spin 3s linear infinite;
}
@keyframes dot-spin { to { --dot-angle: 360deg; } }
.navbar--social .brand-mark:hover {
  box-shadow: 0 0 0 9px rgba(225, 48, 108, 0.25), 0 0 20px rgba(136, 0, 255, 0.28);
}
.brand-mark[aria-pressed="true"] {
  box-shadow: 0 0 0 9px rgba(225, 48, 108, 0.28);
  transform: scale(1.2);
}
@media (prefers-reduced-motion: reduce) {
  .navbar--social .brand-mark {
    animation: none;
    background: linear-gradient(135deg, #ff0080, #8800ff, #00bbff);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   MODE-SWITCH HINT
   Subtle visual cues that another mode exists and clicking the brand
   area navigates there.

   Tech pages  (.mode-tech-active):
     • Resting : the blue dot carries a faint social-gradient aura so a
                 design-savvy eye notices "this dot is a little different".
     • Hover   : dot transitions to the social gradient (preview of what
                 it becomes) and a pill tooltip "→ Social Media" fades in.

   Social pages (.mode-social-active):
     • Resting : spinning conic-gradient already signals the mode perfectly.
     • Hover   : a "← IT Services" pill tooltip fades in.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Tech pages - resting aura ────────────────────────────────────── */
/* A very faint pink-purple outer ring sits permanently around the blue
   dot. Opacity is intentionally low (~8 %) - just enough for a subtle
   "something is different here" feeling without drawing the eye.
   Also extend the transition to include background so the gradient
   preview animates smoothly on hover.                                  */
.mode-tech-active .brand-mark {
  box-shadow:
    0 0 0 3px rgba(225, 48, 108, 0.08),   /* faint social pink ring   */
    0 0 8px  rgba(136,   0, 255, 0.06);   /* ghost purple glow        */
  transition: transform 220ms ease, box-shadow 220ms ease, background 280ms ease;
}

/* ── Tech pages - hover preview ───────────────────────────────────── */
/* The dot transforms into the social-mode gradient on hover -
   a clear preview: "clicking takes you here."                          */
.mode-tech-active .brand:hover .brand-mark {
  background: linear-gradient(135deg, #ff0080, #8800ff 60%, #00bbff);
  box-shadow:
    0 0 0 8px rgba(225, 48, 108, 0.18),
    0 0 16px rgba(136,   0, 255, 0.20);
  transform: scale(1.25);
}

/* ── Shared tooltip base ──────────────────────────────────────────── */
/* Absolutely positioned below the brand area on hover of either mode. */
.mode-tech-active .brand,
.mode-social-active .brand {
  position: relative; /* already set - reinforced here for clarity */
}
.mode-tech-active .brand::after,
.mode-social-active .brand::after {
  position: absolute;
  top: calc(100% + 9px);
  left: 0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px) scale(0.95);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
  z-index: 200;
  line-height: 1.6;
}

/* Tech → Social pill */
.mode-tech-active .brand::after {
  content: '→ Social Media';
  background: linear-gradient(135deg, #ff0080 0%, #8800ff 100%);
  box-shadow: 0 3px 10px rgba(225, 48, 108, 0.25);
}

/* Social → Tech pill */
.mode-social-active .brand::after {
  content: '← IT Services';
  background: var(--color-accent);
  box-shadow: 0 3px 10px rgba(var(--color-accent-rgb), 0.25);
}

/* Reveal on hover */
.mode-tech-active .brand:hover::after,
.mode-social-active .brand:hover::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Keyboard focus - show tooltip when any child is focused */
.mode-tech-active .brand:focus-within::after,
.mode-social-active .brand:focus-within::after {
  opacity: 0.9;
  transform: translateY(0) scale(1);
}

/* Reduced-motion - keep aura, skip gradient hover on dot */
@media (prefers-reduced-motion: reduce) {
  .mode-tech-active .brand:hover .brand-mark {
    background: var(--color-accent);
    box-shadow: 0 0 0 8px rgba(225, 48, 108, 0.20);
    transform: scale(1.2);
  }
}

/* CTA button tint in social mode */
.navbar--social .nav-cta.button.primary {
  background: linear-gradient(135deg, #e1306c, #8800ff);
  border-color: rgba(136, 0, 255, 0.45);
  box-shadow: 0 10px 30px rgba(225, 48, 108, 0.25);
}
.navbar--social .nav-cta.button.primary:hover {
  background: linear-gradient(135deg, #ff3a78, #a020f0);
  box-shadow: 0 16px 36px rgba(225, 48, 108, 0.35);
}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */

/* Hidden on desktop - shown in drawer on mobile */
.nav-item--mobile-cta { display: none; }
.nav-subnav-toggle    { display: none; }

/* Hamburger button - hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
}
.nav-toggle:hover { background: rgba(0, 0, 0, 0.06); }
.page-social .nav-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.nav-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text, #101828);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.18s ease;
  pointer-events: none;
}

/* Dim overlay - sits behind drawer, tap to close */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 198;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-open .nav-overlay { display: block; animation: nav-overlay-in 0.2s ease; }
@keyframes nav-overlay-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 980px) {

  /* ── Hamburger button ────────────────────────────────────────────── */
  .nav-toggle {
    display: flex;
    margin-left: auto;
    margin-right: 4px;
  }
  /* Tech pages - light bars on brand-navy header */
  .nav-toggle__bar { background: rgba(255, 255, 255, 0.88); }
  /* Social page - white bars on dark header */
  .page-social .nav-toggle__bar { background: rgba(255, 255, 255, 0.88); }

  /* Bars animate to × when nav is open */
  .nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Lock page scroll while drawer is open */
  .nav-open { overflow: hidden; }

  /* ── Drawer ─────────────────────────────────────────────────────── */
  /* JS teleports #site-nav to <body> at ≤980px so position:fixed is
     relative to the viewport, not the header's backdrop-filter block. */
  .nav-links {
    display: none;
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    flex-direction: column;
    align-items: stretch;
    /* Override the desktop `justify-content: center`: in a scrolling column
       it floats the items mid-drawer and, once an open sub-panel overflows,
       pushes Home/About above the scroll origin where they can't be reached. */
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    background: #0c1220;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    z-index: 200;
    list-style: none;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
  }
  .nav-open .nav-links {
    display: flex;
    animation: drawer-slide-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
  @keyframes drawer-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Top-level items ─────────────────────────────────────────────── */
  .nav-links > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav-links > li:last-child { border-bottom: none; }

  .nav-links > li > a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 20px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88) !important;
    letter-spacing: 0.01em;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-links > li > a:hover          { color: #fff !important; background: rgba(255,255,255,0.04); }
  .nav-links > li > a[aria-current="page"] { color: var(--color-accent) !important; }

  /* ── Expandable parent row (Services / Portfolio) ────────────────── */
  .nav-item--dropdown {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .nav-item--dropdown > a { flex: 1; }

  /* Chevron button */
  .nav-subnav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 52px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-subnav-toggle:hover { background: rgba(255, 255, 255, 0.05); }
  .nav-subnav-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

  /* Two angled bars forming a ∨ */
  .nav-subnav-toggle::before,
  .nav-subnav-toggle::after {
    content: '';
    position: absolute;
    width: 7px; height: 2px;
    background: rgba(255, 255, 255, 0.45);
    border-radius: 2px;
    transition: transform 0.22s ease, background 0.15s;
  }
  .nav-subnav-toggle::before { transform: translateX(-3px) rotate(45deg); }
  .nav-subnav-toggle::after  { transform: translateX(3px)  rotate(-45deg); }

  /* Flips to ∧ and turns accent when open */
  .nav-item--dropdown.open > .nav-subnav-toggle { background: rgba(var(--color-accent-rgb), 0.1); }
  .nav-item--dropdown.open > .nav-subnav-toggle::before,
  .nav-item--dropdown.open > .nav-subnav-toggle::after { background: var(--color-accent); }
  .nav-item--dropdown.open > .nav-subnav-toggle::before { transform: translateX(-3px) rotate(-45deg); }
  .nav-item--dropdown.open > .nav-subnav-toggle::after  { transform: translateX(3px)  rotate(45deg); }

  /* Sub-panels expand to full row width */
  .nav-dropdown,
  .nav-megamenu { width: 100%; flex-basis: 100%; }

  /* ── Services sub-list ───────────────────────────────────────────── */
  .nav-item--dropdown .nav-dropdown {
    position: static; transform: none; box-shadow: none;
    opacity: 0; max-height: 0;
    overflow: hidden; pointer-events: none;
    background: rgba(0, 0, 0, 0.18);
    border: none;
    transition: max-height 0.28s ease, opacity 0.22s ease;
  }
  /* The desktop :hover/:focus-within rules above aren't media-scoped and
     outrank the reset here. Tapping "Services" focuses the link, so they
     (a) re-applied translateX(-50%), pushing half the open panel - every
     label included - off the left edge, and (b) kept opacity:1 after the
     panel collapsed, leaving its padding + the desktop white ::before
     backdrop showing as a white bar. Neutralise both states; `.open`
     (same specificity, later) is the only thing that shows the panel. */
  .nav-item--dropdown:hover .nav-dropdown,
  .nav-item--dropdown:focus-within .nav-dropdown {
    transform: none; opacity: 0; pointer-events: none;
  }
  .nav-item--dropdown.open .nav-dropdown {
    opacity: 1; max-height: 800px; pointer-events: auto;
  }
  /* No desktop padding-bridge or white card in the drawer - padding isn't
     clipped by max-height:0, so it would leave a sliver when collapsed. */
  .nav-item--dropdown .nav-dropdown { padding: 0; }
  .nav-dropdown::before { display: none; }

  .nav-dropdown > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  .nav-dropdown > li:last-child { border-bottom: none; }

  .nav-dropdown li > a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 20px 0 36px;
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.65) !important;
    transition: color 0.15s, background 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-dropdown li > a::before {
    content: '–';
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.22);
    font-size: 0.75rem;
    flex-shrink: 0;
  }
  .nav-dropdown li > a:hover { color: rgba(255,255,255,0.95) !important; background: rgba(255,255,255,0.03); }

  /* The landing-page link, surfaced only here. Above this width the "Services"
     label is itself a link to /services; below it, that label opens this panel
     instead, so without this row the landing page would have no route on a
     phone. Styled apart from its siblings - it is the parent, not a sibling.
     Selectors carry `.nav-dropdown li` so they outrank the generic
     `.nav-dropdown li > a` / `::before` rules above rather than losing to them. */
  .nav-dropdown li.nav-dropdown__overview { display: list-item; }

  .nav-dropdown li.nav-dropdown__overview > a {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600;
  }
  .nav-dropdown li.nav-dropdown__overview > a::before {
    content: '\2192';
    color: var(--color-accent);
  }

  /* ── Portfolio mega-menu ─────────────────────────────────────────── */
  .nav-megamenu {
    position: static; transform: none;
    opacity: 0; max-height: 0;
    overflow: hidden; pointer-events: none;
    background: rgba(0, 0, 0, 0.18);
    transition: max-height 0.3s ease, opacity 0.24s ease;
    padding: 0;
  }
  /* Same desktop :hover/:focus-within leak as the Services panel above. */
  .nav-item--dropdown:hover .nav-megamenu,
  .nav-item--dropdown:focus-within .nav-megamenu {
    transform: none; opacity: 0; pointer-events: none;
  }
  .nav-item--dropdown.open .nav-megamenu {
    opacity: 1; max-height: 900px; pointer-events: auto;
  }

  .nav-megamenu__inner {
    flex-direction: column;
    background: transparent; border: none;
    border-radius: 0; box-shadow: none;
    min-width: 0; padding: 4px 0; gap: 0;
  }
  .nav-megamenu__sep { display: none; }

  .nav-megamenu__col { padding: 12px 20px; }
  .nav-megamenu__col + .nav-megamenu__col {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-megamenu__heading {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accent);
    opacity: 0.9;
    margin: 0 0 8px;
    padding: 0;
    border: none;
  }

  .nav-megamenu__col ul { margin: 0; padding: 0; }
  .nav-megamenu__col ul a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 4px 0 4px 12px;
    font-size: 0.875rem;
    font-weight: 400;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.65) !important;
    border-radius: 0;
    transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-megamenu__col ul a::before { display: none; }
  .nav-megamenu__col ul a:hover { color: rgba(255,255,255,0.95) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-overlay,
  .nav-open .nav-links { animation: none; }
  .nav-toggle__bar,
  .nav-subnav-toggle::before,
  .nav-subnav-toggle::after { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle__bar,
  .nav-item--dropdown .nav-dropdown {
    transition: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO CARD - clickable link wrapper
   ─────────────────────────────────────────────────────────────────────── */
.portfolio-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
  cursor: pointer;
  border-radius: inherit;
  outline-offset: 3px;
}
.portfolio-card__link:focus-visible {
  outline: 2px solid var(--color-accent);
}
/* Lift the whole card on hover when wrapped in a link */
.portfolio-card:has(.portfolio-card__link:hover) {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.68);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PORTFOLIO DETAIL PAGE  (.page-portfolio-detail)
   ─────────────────────────────────────────────────────────────────────── */

/* Every direct child of the detail/industry article must sit above the
   Three.js canvas (position:fixed; z-index:0) and the content veil.
   Without this, .pf-breadcrumb / .pf-hero / .pf-image / .page-intro -
   which are NOT .section elements and therefore miss the general z-index:1
   rule - render beneath the fixed blob canvas and are obscured by it.      */
.pf-detail > *,
.pf-industry > * {
  position: relative;
  z-index: 1;
}

/* ── Breadcrumb ────────────────────────────────────────────────────────── */
.pf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.pf-breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}
.pf-breadcrumb a:hover {
  text-decoration: underline;
}
.pf-breadcrumb span[aria-hidden] {
  opacity: 0.4;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.pf-hero {
  margin-bottom: var(--space-10);
}
.pf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-4);
}
.pf-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.pf-chip--cat {
  background: rgba(var(--color-accent-rgb), 0.1);
  color: var(--color-accent);
  border: 1px solid rgba(var(--color-accent-rgb), 0.2);
}
.pf-chip--ind {
  background: rgba(139, 92, 246, 0.1);
  color: #7c3aed;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
/* Make the industry chip a real link without losing chip styling */
a.pf-chip--ind {
  text-decoration: none;
  transition: background 0.18s, border-color 0.18s;
}
a.pf-chip--ind:hover {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.4);
}

/* ── Industry landing page ─────────────────────────────────────────────────── */
.pf-industry__count {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: #7c3aed;
  letter-spacing: 0.01em;
}

.pf-industry__empty {
  text-align: center;
  color: var(--color-text-muted);
  padding: var(--space-10) 0;
}
.pf-industry__empty a {
  color: var(--color-accent);
}

/* "Other Industries" nav grid */
.pf-industry-nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pf-industry-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  text-decoration: none;
  color: var(--color-heading);
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.pf-industry-nav__item:hover {
  transform: translateY(-3px);
  color: var(--color-accent);
  box-shadow: 0 8px 24px rgba(var(--color-accent-rgb), 0.1);
}

.pf-industry-nav__arrow {
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.18s, transform 0.18s;
}
.pf-industry-nav__item:hover .pf-industry-nav__arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

.pf-hero__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  color: var(--color-heading);
}
.pf-hero__tag {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-4);
}
.pf-hero__lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  max-width: 68ch;
  margin: 0;
}

/* ── Featured image ────────────────────────────────────────────────────── */
.pf-image {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: var(--space-12);
  aspect-ratio: 16 / 7;
  background: var(--color-surface);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
}
.pf-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   PORTFOLIO PLACEHOLDER + GALLERY
   `portfolio_media()` emits .pf-placeholder in place of an <img> when a
   project has no uploaded image. It replaced a `picsum.photos` fallback that
   put a random third-party stock photo on the page as if it were this
   company's work. Sized to fill whichever fixed-ratio box it lands in
   (.portfolio-card__thumb 16/9, .pf-image 16/7), so it needs no ratio of its
   own.
   ══════════════════════════════════════════════════════════════════════ */

.pf-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
  padding: var(--space-5);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 78% 12%, rgba(var(--color-accent-rgb), 0.30), transparent 58%),
    linear-gradient(158deg, var(--color-hero) 0%, var(--color-hero-deep) 100%);
}

/* Faint grid, so the panel reads as a designed surface rather than a flat fill */
.pf-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(var(--color-hero-ink-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--color-hero-ink-rgb), 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.pf-placeholder__mark {
  position: relative;
  z-index: 1;
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  /* Set per container below - a card thumb and a full-width 16/7 hero are far
     enough apart in size that one clamp cannot serve both. */
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--color-accent);
}

.pf-placeholder__label {
  position: relative;
  z-index: 1;
  max-width: 22ch;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--color-hero-ink-rgb), 0.62);
}

/* The card thumb dims its <img> by default and lifts it on hover; mirror that
   on the placeholder so a mixed grid animates consistently. */
.portfolio-card__thumb .pf-placeholder {
  transition: transform 360ms ease;
}

.portfolio-card:hover .portfolio-card__thumb .pf-placeholder {
  transform: scale(1.04);
}

/* The featured-image box is ~4x the height of a card thumb; without this the
   mark floats as a speck in the middle of a large empty navy field. */
.pf-image .pf-placeholder {
  gap: var(--space-3);
}

.pf-image .pf-placeholder__mark {
  font-size: clamp(3rem, 7vw, 5.5rem);
}

.pf-image .pf-placeholder__label {
  max-width: 32ch;
  font-size: 0.78rem;
}

/* ── Gallery - editor-uploaded project images on a detail page ─────────── */
.pf-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  /* Natural heights: a figure with no caption should not stretch to match one
     that has a two-line caption. */
  align-items: start;
}

.pf-gallery__item {
  margin: 0;
}

.pf-gallery__figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
}

.pf-gallery__figure:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.pf-gallery__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.pf-gallery__caption {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-muted);
  background: var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
  .pf-gallery__figure,
  .portfolio-card__thumb .pf-placeholder {
    transition: none;
  }

  .pf-gallery__figure:hover,
  .portfolio-card:hover .portfolio-card__thumb .pf-placeholder {
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   END PORTFOLIO PLACEHOLDER + GALLERY
   ══════════════════════════════════════════════════════════════════════ */

/* ── Sections shared ───────────────────────────────────────────────────── */
/* No margin between sections: each one is a full-bleed band with its own
   --section-y padding (like every other page), so a margin here only opened
   an empty strip between two bands. */
.pf-section {
  margin-bottom: 0;
}

/* ── Two-column overview layout ────────────────────────────────────────── */
.pf-two-col {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--space-10);
  align-items: start;
}
@media (max-width: 860px) {
  .pf-two-col {
    grid-template-columns: 1fr;
  }
}

/* ── Meta box (client, year, solution type) ────────────────────────────── */
.pf-meta-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  padding: var(--space-6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.pf-meta-box > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pf-meta-box p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text);
  font-weight: 500;
}

/* ── Small label above metadata values ─────────────────────────────────── */
.pf-label-sm {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 2px !important;
}

/* ── Overview prose area ───────────────────────────────────────────────── */
.pf-two-col > div:first-child .section-label {
  margin-bottom: var(--space-2);
}
.pf-two-col > div:first-child h2 {
  margin-bottom: var(--space-5);
}
.pf-two-col > div:first-child p {
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-top: var(--space-3);
}

/* ── Cross-link to the social media campaign, when the project is `both` ── */
.pf-crosslink-section { margin-top: 0; }

.pf-crosslink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  background: var(--color-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, var(--radius));
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.pf-crosslink:hover {
  transform: translateY(-2px);
  background: rgba(var(--color-accent-rgb), 0.06);
  border-color: rgba(var(--color-accent-rgb), 0.3);
}

.pf-crosslink__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}

.pf-crosslink__title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-heading);
}

/* ── Responsive tweaks for pf-detail ──────────────────────────────────── */
@media (max-width: 640px) {
  .pf-image {
    border-radius: 10px;
    aspect-ratio: 4 / 3;
  }
  .pf-hero__title {
    font-size: 1.75rem;
  }
  .pf-meta-box {
    padding: var(--space-5);
  }
  .pf-crosslink {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 400px) {
  .pf-crosslink { padding: var(--space-4); }
  .pf-crosslink__title { font-size: 0.95rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   ACCESSIBILITY + SEO UTILITIES
   ══════════════════════════════════════════════════════════════════════ */

/* Skip navigation link - visually hidden until focused */
.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: -1;
}
.skip-nav:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: var(--space-3) var(--space-6);
  background: var(--color-accent);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Hide unconfigured social footer links */
.footer-social__link--hidden {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE TOUCH TARGETS
   Ensure interactive elements meet 44×44 px WCAG 2.5.5 guideline.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Form inputs & textarea */
  .contact-form input,
  .contact-form textarea,
  .contact-form select,
  .social-contact-form input,
  .social-contact-form textarea,
  .social-contact-form select {
    min-height: 48px;
    font-size: 1rem; /* prevent iOS zoom on focus */
    padding: var(--space-3) var(--space-4);
  }

  .contact-form textarea,
  .social-contact-form textarea {
    min-height: 120px;
  }

  /* Buttons */
  .button,
  .contact-form button,
  .social-contact-form button,
  .portfolio-filter,
  .nav-links > li > a {
    min-height: 44px;
  }

  /* Footer social icons - bigger tap area */
  .footer-social__link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Portfolio filter row - allow horizontal scroll on narrow screens */
  .portfolio-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }
  .portfolio-filters::-webkit-scrollbar { display: none; }
  .portfolio-filter {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Chat input on mobile */
  .chat-input-row input {
    font-size: 1rem; /* prevent iOS zoom */
    min-height: 44px;
  }
}

/* ── Improve line-length readability on very wide screens ─────────── */
@media (min-width: 1400px) {
  .page-intro .lede,
  .section-header > p,
  .cta-panel > p {
    max-width: 60ch;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   Layout improvements - polish pass
   ═══════════════════════════════════════════════════════════════════ */

/* ── Trust bar - pill badges ─────────────────────────────────────── */
.logo-bar__list {
  gap: 0.5rem;
}
.logo-bar__list li {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  opacity: 1;
  letter-spacing: 0.01em;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.logo-bar__list li:hover {
  opacity: 1;
  border-color: rgba(var(--color-accent-rgb), 0.35);
  box-shadow: 0 2px 8px rgba(var(--color-accent-rgb), 0.08);
}

/* ── Stat cards - gradient accent bar at top ─────────────────────── */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), #6628c4);
  border-radius: var(--radius) var(--radius) 0 0;
}
.stat-card:nth-child(2)::before { background: linear-gradient(90deg, #6628c4, #e1306c); }
.stat-card:nth-child(3)::before { background: linear-gradient(90deg, var(--color-accent), #0891b2); }
.stat-card:nth-child(4)::before { background: linear-gradient(90deg, #059669, var(--color-accent)); }

/* ── Service num - branded badge ─────────────────────────────────── */
.service-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, rgba(var(--color-accent-rgb), 0.1), rgba(102, 40, 196, 0.1));
  border: 1px solid rgba(var(--color-accent-rgb), 0.22);
  border-radius: 6px;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: var(--space-4);
}

/* ── Services capability rail - hover accent + slide arrow ───────── */
.svc-cap {
  position: relative;
  border-left: 2px solid transparent;
  transition: border-color 220ms ease, background 220ms ease, transform 200ms ease;
}
.svc-cap:hover,
.svc-cap:focus-visible {
  border-left-color: var(--color-accent);
  background: rgba(var(--color-accent-rgb), 0.05);
  transform: translateY(-3px);
}
.svc-cap::after {
  content: '→';
  position: absolute;
  right: var(--space-5);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  color: var(--color-accent);
  font-size: 0.875rem;
}
.svc-cap:hover::after,
.svc-cap:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ── CTA panel - navy with ambient amber glow (matches the theme's
   navy+amber palette; same glow recipe as .svc-hero__ambient /
   .svc-tile--big, previously an off-brand blue-to-purple gradient) ── */
.cta-panel {
  background: var(--color-dark);
  background-image:
    radial-gradient(ellipse 70% 80% at 85% 20%, rgba(var(--color-accent-rgb), 0.16) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 10% 90%, rgba(var(--color-accent-rgb), 0.09) 0%, transparent 55%);
  border-color: rgba(var(--color-accent-rgb), 0.22);
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.35), 0 0 0 1px rgba(var(--color-accent-rgb), 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.cta-panel .section-label { color: rgba(255, 255, 255, 0.42); }
.cta-panel h2,
[id$="-cta-title"] { color: #ffffff; }
.cta-panel > p { color: rgba(241, 245, 249, 0.7); }

/* ── Testimonial avatar + company credit ─────────────────────────── */
.testimonial-card {
  display: flex;
  flex-direction: column;
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: hsl(var(--avatar-hue, 220) 60% 90%);
  color: hsl(var(--avatar-hue, 220) 50% 30%);
  border: 2px solid hsl(var(--avatar-hue, 220) 50% 78%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 750;
  flex-shrink: 0;
  margin-bottom: var(--space-4);
  user-select: none;
}
.testimonial-company {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.2rem;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE LAYOUT REDESIGN
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design system token ─────────────────────────────────────────── */
:root { --section-gap: clamp(var(--space-8), 4vw, var(--space-16)); }

/* ── Home: Services two-zone layout ─────────────────────────────── */
.svc-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-6); align-items: start; }
/* min-width: 0 prevents svc-panel's rail content (~1100px+ of flex items) from
   overriding the 1.4fr track and squeezing svc-hero down to a ~100px sliver */
.svc-panel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.svc-core-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); min-width: 0; }
@media (max-width: 560px) { .svc-core-grid { grid-template-columns: 1fr; } }
.svc-also { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.svc-also__label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); display: block; margin-bottom: var(--space-3); }
@media (max-width: 860px) { .svc-layout { grid-template-columns: 1fr; } }

/* ── Home: Portfolio preview grid ───────────────────────────────── */
.home-portfolio-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .home-portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .home-portfolio-grid { grid-template-columns: 1fr; } }

/* ── Home: Testimonial featured-first layout ─────────────────────── */
.testimonial-grid { grid-template-columns: 1.6fr 1fr 1fr; }
.testimonial-card--featured { border-left: 3px solid var(--color-accent); }
.testimonial-card--featured blockquote p:not(.testimonial-stars) { font-size: var(--text-xl); }
@media (max-width: 860px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* ── About: Awards redesign ─────────────────────────────────────── */
.awards-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-6); list-style: none; margin: 0; padding: 0; }
.award-card { border-top: 3px solid var(--color-accent); padding-top: var(--space-5); }
.award-card__year { display: block; font-size: 2rem; font-weight: 800; color: var(--color-accent); opacity: 0.25; letter-spacing: -0.04em; line-height: 1; margin-bottom: var(--space-3); }
.award-card__title { font-size: var(--text-lg); font-weight: 750; margin: 0 0 var(--space-2); }
.award-card__body { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
@media (max-width: 700px) { .awards-grid { grid-template-columns: 1fr; } }

/* ── Portfolio: filter bar scroll ───────────────────────────────── */
.portfolio-filter-bar { margin-bottom: var(--space-8); }
.portfolio-filter-scroll {
  display: flex; align-items: center; gap: var(--space-2);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding-bottom: var(--space-2);
  mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 2%, black 98%, transparent);
}
.portfolio-filter-scroll::-webkit-scrollbar { display: none; }
.portfolio-filter-sep { width: 1px; height: 20px; background: var(--color-border); flex-shrink: 0; margin: 0 var(--space-1); }

/* ── Portfolio: card thumb aspect ratio ─────────────────────────── */
.portfolio-card__thumb { aspect-ratio: 16 / 9; background: var(--color-subtle); overflow: hidden; }
.portfolio-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.portfolio-card:hover .portfolio-card__thumb img { transform: scale(1.04); }

/* ── Services detail: feature card decorative mark ──────────────── */
.feature-card { position: relative; }
.feature-card__mark {
  position: absolute; top: var(--space-4); right: var(--space-5);
  font-size: 2.5rem; opacity: 0.07; color: var(--color-accent);
  font-weight: 900; line-height: 1; pointer-events: none;
  transition: opacity 300ms ease;
}
.feature-card:hover .feature-card__mark { opacity: 0.14; }

/* ── Services detail: process step timeline line ────────────────── */
.process-steps { position: relative; }
.process-steps::before {
  content: '';
  position: absolute;
  top: 2.4rem;
  left: calc(10% + 1.2rem);
  right: calc(10% + 1.2rem);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent) 20%, var(--color-accent) 80%, transparent);
  opacity: 0.2;
  pointer-events: none;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent), #6628c4);
  color: white;
  font-size: 0.85rem; font-weight: 800;
  opacity: 1;
  margin-bottom: var(--space-4);
}
@media (max-width: 700px) { .process-steps::before { display: none; } }

/* ── Services detail: stat metrics row ─────────────────────────── */
.svc-metrics { display: flex; gap: 0; background: var(--glass-base); border: var(--glass-border); border-radius: var(--radius); overflow: hidden; }
.svc-metric { flex: 1; padding: var(--space-8) var(--space-6); text-align: center; position: relative; }
.svc-metric + .svc-metric::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(var(--color-accent-rgb),0.12); }
.svc-metric__num { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-weight: 800; letter-spacing: -0.04em; color: var(--color-accent); line-height: 1; margin-bottom: var(--space-2); }
.svc-metric__label { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 560px) { .svc-metrics { flex-direction: column; } .svc-metric + .svc-metric::before { top: 0; bottom: auto; left: 20%; right: 20%; width: auto; height: 1px; } }

/* ── Contact: location card ─────────────────────────────────────── */
.contact-location-card { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.contact-location-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(var(--color-accent-rgb),0.08); border-radius: 50%; flex-shrink: 0; }
.contact-location-card__icon svg { width: 22px; height: 22px; stroke: var(--color-accent); }
.contact-location-card__city { font-weight: 700; font-size: var(--text-lg); margin: 0 0 0.1rem; }
.contact-location-card__country { font-size: var(--text-sm); color: var(--color-muted); margin: 0 0 var(--space-2); }
.contact-location-card__link { font-size: var(--text-sm); color: var(--color-accent); text-decoration: none; font-weight: 600; }
.contact-location-card__link:hover { text-decoration: underline; }

/* ── Social portfolio: platform-color case cards ────────────────── */
.social-case-card { border-top: 3px solid var(--case-color, var(--color-accent)); }
.social-case-card .social-case-card__platform { color: var(--case-color, var(--color-accent)); }

/* ── Social services: SVG icon sizing ───────────────────────────── */
.social-svc-card__icon svg { width: 24px; height: 24px; stroke: var(--color-accent); display: block; }

/* ── About: value card icon symbol styling ──────────────────────── */
.value-card .service-num {
  background: linear-gradient(135deg, var(--color-accent), #6628c4);
  color: white;
  border: none;
  font-size: 1rem;
}

/* ── Screen-reader only utility ─────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── CTA panel: ghost button on dark background ─────────────────── */
.cta-panel .button.ghost {
  border-color: rgba(255,255,255,0.35);
  color: rgba(255,255,255,0.9);
}
.cta-panel .button.ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.6);
}



/* ── Social microsite keeps the original blue palette (excluded from rebrand) ── */
.page-social {
  --color-dark: #161616;
  --color-accent: #0b61d8;
  --color-accent-rgb: 11, 97, 216;
  --color-accent-light: #3b82f6;
  --color-accent-light-rgb: 59, 130, 246;
  --color-accent-dark: #0847a8;
  --color-accent-dark-rgb: 8, 71, 168;
  --color-accent-ink: #ffffff;
  --color-ring: rgba(11, 97, 216, 0.35);
}

/* ── Floating social-hub button ───────────────────────────────────────
   Single always-visible button (bottom-right) that switches between
   the tech site and the /social-media hub. (It used to sit above a
   floating .ai-chat bubble; that widget and its CSS are gone - chat is
   the in-page .chat-ai-section - so the dock now owns the corner.)
   ──────────────────────────────────────────────────────────────────── */
.social-dock {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 890;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1, 4px);
}

.social-dock__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(248, 250, 252, 0.6);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: background 160ms ease, color 160ms ease, transform 160ms ease,
              border-color 160ms ease, box-shadow 160ms ease;
}

.social-dock__link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  pointer-events: none;
}

.social-dock__link:hover,
.social-dock__link:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  transform: translateX(-3px);
  box-shadow: 0 4px 16px rgba(var(--color-accent-rgb), 0.45);
  text-decoration: none;
  outline-offset: 3px;
}

.social-dock__caption {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(10, 10, 15, 0.72);
  color: rgba(248, 250, 252, 0.85);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
  pointer-events: none;
  transition: background 160ms ease, color 160ms ease;
}

.social-dock:hover .social-dock__caption,
.social-dock:focus-within .social-dock__caption {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

/* On small screens keep button + caption bottom-right but reduce the
   bottom offset so it sits just above the chat trigger */
/* Phones: one compact row (caption left of the icon) instead of a 44px
   disc + caption stacked over body copy. */
@media (max-width: 480px) {
  .social-dock {
    right: var(--space-4);
    bottom: var(--space-4);
    flex-direction: row-reverse;
    gap: var(--space-2);
  }
  .social-dock__link {
    width: 38px;
    height: 38px;
  }
  .social-dock__link svg {
    width: 17px;
    height: 17px;
  }
  /* Opaque chip: at 72% it vanished into the dark social bands and body
     copy showed through it. */
  .social-dock__caption {
    padding: 5px 10px;
    background: var(--color-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  .social-dock__link:hover,
  .social-dock__link:focus-visible {
    transform: translateY(-3px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   404 PAGE  (app/Views/errors/html/error_404.php)
   One full-height hero on the Prussian field - so the navbar joins it through
   body:has(.hero) - with "404" drawn as a constellation in the home hero's
   own node-and-line language. One node of the zero has come loose: the link
   that leads nowhere. Everything beside it stays plain.
   ══════════════════════════════════════════════════════════════════════ */
.page-404 .site-main {
  padding-top: 0;
}

/* three-hero.js names the home page's scroll phases ("Exploring", ...) in a
   fixed corner label on every page that gets its default scene. There are no
   phases here, and the label would sit on top of the dock. */
.page-404 .phase-label {
  display: none;
}

.nf-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(var(--space-8), 5vw, var(--space-20));
}

.nf-hero h1 {
  font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  margin-bottom: var(--space-5);
}

.nf-hero .lede {
  max-width: 44ch;
}

/* The address the visitor asked for. Can be long and unbroken. */
.nf-url {
  color: var(--color-hero-ink);
  font-weight: 650;
  overflow-wrap: anywhere;
}

.nf-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-10);
  font-size: var(--text-sm);
  color: rgba(var(--color-hero-ink-rgb), 0.62);
}

.nf-more ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nf-more a {
  color: rgba(var(--color-hero-ink-rgb), 0.92);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-hero-ink-rgb), 0.35);
  text-underline-offset: 5px;
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.nf-more a:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

/* Exception message, non-production only. */
.nf-debug {
  margin: var(--space-8) 0 0;
  font-size: 0.8125rem;
  color: rgba(var(--color-hero-ink-rgb), 0.5);
  overflow-wrap: anywhere;
}

.nf-figure {
  justify-self: end;
  width: 100%;
  max-width: 660px;
  height: auto;
  overflow: visible;
}

/* Same weights as .hero-network, so the figure reads as a piece of the home
   constellation. Every rule states the FINAL look and the animations only
   describe where it comes from - with motion off, the figure is simply there. */
.nf-figure__lines line,
.nf-figure__gap line,
.nf-figure__gap circle {
  fill: none;
  stroke: var(--color-hero-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.nf-figure__lines line {
  opacity: 0.34;
  stroke-dasharray: 1; /* of pathLength="1": one dash, the whole line */
  animation: nf-draw 700ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}

.nf-figure__gap {
  opacity: 0.42;
  animation: nf-fade 600ms ease 950ms backwards;
}

.nf-figure__gap line {
  stroke-dasharray: 2 7;
}

.nf-figure__gap circle {
  stroke-dasharray: 2.5 4;
}

.nf-figure__nodes circle,
.nf-figure__lost {
  transform-box: fill-box;
  transform-origin: center;
}

.nf-figure__nodes circle {
  fill: var(--color-accent);
  animation: nf-pop 420ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(250ms + var(--i, 0) * 55ms);
}

.nf-figure__stars circle {
  fill: var(--color-hero-ink);
  opacity: 0.28;
}

/* The loose node: leaves its socket once the figure is drawn, then idles. The
   second animation takes over the transform when its own delay runs out. */
.nf-figure__lost {
  fill: rgba(var(--color-accent-rgb), 0.14);
  stroke: var(--color-accent);
  stroke-width: 1.5;
  animation:
    nf-drift 1500ms cubic-bezier(0.2, 0.7, 0.2, 1) 1100ms backwards,
    nf-float 7s ease-in-out 2600ms infinite alternate;
}

@keyframes nf-draw  { from { stroke-dashoffset: 1; } }
@keyframes nf-pop   { from { opacity: 0; transform: scale(0.2); } }
@keyframes nf-fade  { from { opacity: 0; } }
@keyframes nf-drift { from { transform: translate(-34px, 35px); } }
@keyframes nf-float { to   { transform: translate(5px, -6px); } }

@media (prefers-reduced-motion: reduce) {
  .nf-figure * {
    animation: none !important;
  }
}

.reduce-effects .nf-figure * {
  animation: none !important;
}

@media (max-width: 900px) {
  .nf-hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: var(--space-8);
  }

  .nf-figure {
    order: -1;
    justify-self: start;
    max-width: 380px;
  }
}

/* ── Blob pages: accent-coloured text ─────────────────────────────────
   About / Services / Portfolio (incl. service + portfolio detail) render
   the amber Three.js blob behind the content, so any text painted in
   --color-accent disappears wherever it crosses the blob. Same idea as
   the --color-muted navy override on these pages: keep the warm hue,
   drop the lightness. Last in the file so it wins ties with the
   component rules above. Dark surfaces keep their own colours: the
   .cta-panel label stays light, the .value-card glyph stays white on its
   gradient square. */
:is(.page-about, .page-services, .page-portfolio) :is(
  .eyebrow,
  .section-label:not(.cta-panel *),
  .award-card__year,
  .stat-num,
  .feature-card__mark,
  .service-num:not(.value-card *),
  .svc-metric__num,
  .portfolio-card__tag,
  .pf-breadcrumb a,
  .pf-chip--cat,
  .pf-hero__tag
) {
  color: var(--color-accent-text);
}

/* The year was a 25%-opacity ghost numeral - unreadable over the blob. */
:is(.page-about, .page-services, .page-portfolio) .award-card__year {
  opacity: 1;
}