/* ==========================================================================
   AAJ Digital — Shared Stylesheet
   Colour palette adapted from aajglobal.co.uk (dark shell, orange/blue brand
   colours) plus a wider bento-card palette sampled directly from the
   gradient inside the supplied AAJ logo mark itself (blue → plum → rose →
   orange), and a layout language inspired by tristarwebsolutions.co.uk
   (floating rounded header, colourful feature grid, numbered service list,
   icon-circle trust row, accordion FAQs). See REFERENCE-NOTES.md §5.
   ========================================================================== */

/* -----------------------------------------------------------------------
   1. Design tokens
   ----------------------------------------------------------------------- */
:root {
  /* ---------------------------------------------------------------------
     This is a single full-black theme throughout — no light sections.
     NOTE ON NAMING: --color-paper / --color-text-on-light* keep their
     original names from an earlier light-sections draft, to limit the
     size of this diff, but now hold DARK surface / LIGHT text values
     respectively. --color-paper is a dark section surface;
     --color-text-on-light* is the light text used on top of it. See
     REFERENCE-NOTES.md §6. --color-ink stays the deepest tone (header,
     hero, footer); --color-ink-raised is the "raised card" surface.
     --------------------------------------------------------------------- */
  --color-ink: #0a0a0a;
  --color-ink-raised: #18181c;
  --color-ink-border: rgba(255, 255, 255, 0.14);
  --color-ink-border-soft: rgba(255, 255, 255, 0.08);

  --color-paper: #0a0a0a;          /* dark section/page surface (== --color-ink) */
  --color-paper-alt: #131316;      /* subtly-raised alternate section band */
  --color-paper-border: rgba(255, 255, 255, 0.1);

  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #b7b7b7;
  --color-text-on-dark-faint: #8a8a8a;

  --color-text-on-light: #f3f2f0;        /* light text, used on dark surfaces */
  --color-text-on-light-muted: #a4a4a9;

  /* Brand — orange/blue, as used in the AAJ logo mark and aajglobal.co.uk */
  --color-orange: #f5511e;
  --color-orange-deep: #c9401a;
  --color-orange-darker: #a8330f;   /* white-on-orange and orange-on-tint text both
                                        need this darker step to clear 4.5:1 */
  --color-orange-tint: #fde5d8;

  --color-blue: #12399a;
  --color-blue-mid: #1f3a8a;
  --color-blue-bright: #2e6be6;
  --color-blue-light: #7ea6ff;      /* text-on-dark link colour — --color-blue and
                                        --color-blue-bright both fail 4.5:1 as text
                                        against the dark card/page surfaces */
  --color-blue-tint: #dfe7fb;

  /* Extended bento palette — sampled from the logo's own blue-to-orange
     gradient (its mid-tones pass through plum and rose), not invented.
     The "-bright" variants are lightened for use as text/icon/border
     accents against dark surfaces, where the base tone is too dark. */
  --color-plum: #4b3f78;
  --color-plum-bright: #9585d1;
  --color-plum-tint: #e7e2f2;
  --color-rose: #a5455a;
  --color-rose-bright: #e0708a;
  --color-rose-tint: #f5e2e6;
  --color-teal: #12786d;
  --color-teal-bright: #2bbaa8;
  --color-teal-tint: #dcf0eb;

  --gradient-blue: linear-gradient(90deg, #29429c 0%, #1f3a8a 50%, #2149c6 100%);
  /* Logo gradient's own end stop (#f5511e, plain --color-orange) is
     only ~3.45:1 against white text — fails the 4.5:1 AA minimum this
     project audits for (see REFERENCE-NOTES.md §6). Swapped for
     --color-orange-deep (~4.96:1) so this token stays safe to use
     with white text anywhere, not just where it happens to today. */
  --gradient-logo: linear-gradient(135deg, #12399a 0%, #4b3f78 35%, #a5455a 65%, #c9401a 100%);
  --gradient-hero-glow:
    radial-gradient(32% 48% at 82% 30%, rgba(245, 81, 30, 0.28), transparent 60%),
    radial-gradient(34% 40% at 15% 70%, rgba(1, 56, 157, 0.4), transparent 60%);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Headings use the same Inter family as body text, distinguished by
     weight (700, set on h1–h6) rather than a second typeface — matching
     a client reference's own type system, which uses "Inter
     Display"/Inter for everything (see REFERENCE-NOTES.md §36). Google
     Fonts doesn't serve the "Inter Display" optical-size cut under its
     own API, so plain Inter at bold weight is the closest match without
     self-hosting font files, which this project's Google-Fonts-only
     convention avoids. A separate "Sora" display face was used here
     until this pass — removed, not layered on top. */
  --font-display: "Inter", var(--font-sans);
  /* Monospace accent for the homepage "live build" code panel only —
     loaded in index.html's <head> alone, not site-wide. */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container-width: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-card-dark: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-card-hover: 0 18px 44px rgba(0, 0, 0, 0.45);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3.5rem;
  --space-xl: 6rem;
  --space-2xl: 8.5rem;

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* -----------------------------------------------------------------------
   2. Reset & base
   ----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-paper);
  color: var(--color-text-on-light);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-sm); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

/* Visible focus for keyboard users everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 200;
  background: var(--color-blue);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* -----------------------------------------------------------------------
   4. Layout helpers
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  padding-block: var(--space-2xl);
}

.section--tight { padding-block: var(--space-xl); }

.section--dark {
  background: var(--color-ink);
  color: var(--color-text-on-dark);
}

.section--alt {
  background: var(--color-paper-alt);
}

.section-head {
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* --color-orange against --color-orange-tint is only ~2.9:1 — the
     darker step clears 4.5:1 (see contrast audit in REFERENCE-NOTES.md §6) */
  color: var(--color-orange-darker);
  background: var(--color-orange-tint);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}

.section--dark .eyebrow { color: var(--color-orange); background: rgba(245, 81, 30, 0.14); }

.section-title {
  font-size: clamp(1.85rem, 3.6vw, 2.9rem);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.section-lede {
  font-size: 1.125rem;
  color: var(--color-text-on-light-muted);
  max-width: 42rem;
}

.section--dark .section-lede { color: var(--color-text-on-dark-muted); }

.section-lede a {
  color: var(--color-blue-light);
  text-decoration: underline;
}

.grid {
  display: grid;
  gap: var(--space-md);
}

.grid--2 { grid-template-columns: repeat(1, 1fr); }
.grid--3 { grid-template-columns: repeat(1, 1fr); }
.grid--4 { grid-template-columns: repeat(1, 1fr); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Grid items default to min-width:auto (their content's min-content
   size), which can force a horizontal scrollbar on narrow viewports
   when a child is itself a grid/flex layout with its own minimum
   width. Letting these specific containers' items shrink fixes it
   without changing sizing at any wider breakpoint. */
.hero-inner > *,
.two-col > * {
  min-width: 0;
}

/* -----------------------------------------------------------------------
   5. Buttons
   ----------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  min-height: 48px;
  line-height: 1.1;
  text-align: center;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--gradient-logo);
  color: #fff;
  box-shadow: 0 10px 24px rgba(165, 69, 90, 0.35);
}
.btn-primary:hover { box-shadow: 0 14px 30px rgba(165, 69, 90, 0.45); filter: brightness(1.08); }

.btn-accent {
  background: var(--color-orange);
  color: #fff;
  box-shadow: 0 10px 24px rgba(245, 81, 30, 0.3);
}
.btn-accent:hover { background: var(--color-orange-deep); }

.btn-outline-light {
  background: transparent;
  color: #fff;
  border-color: var(--color-ink-border);
}
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.08); }

.btn-outline-dark {
  background: transparent;
  color: var(--color-text-on-light);
  border-color: var(--color-paper-border);
}
.btn-outline-dark:hover { background: rgba(10, 10, 10, 0.05); }

.btn-block { width: 100%; }

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-teal {
  background: var(--color-teal);
  color: #fff;
  box-shadow: 0 10px 24px rgba(18, 120, 109, 0.3);
}
.btn-teal:hover { background: #0d5e55; }

/* Floating side CTA tab — desktop only, echoes a common UK web-agency
   pattern (see REFERENCE-NOTES.md §5). Fixed positioning keeps it out of
   normal document flow so it cannot introduce horizontal scroll.
   `writing-mode` (rather than a rotate transform) sidesteps the
   bounding-box math that made an earlier rotate-based version render
   off-screen. */
.floating-cta {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 95;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  /* white on --color-orange is only ~3.5:1 at this text size — the
     deep step clears 4.5:1 (see contrast audit in REFERENCE-NOTES.md §6) */
  background: var(--color-orange-deep);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.01em;
  padding: 1.5rem 0.65rem;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  box-shadow: -6px 0 20px rgba(0, 0, 0, 0.18);
  transition: background var(--transition-fast), padding var(--transition-fast);
  display: none;
}

.floating-cta:hover { background: var(--color-orange-darker); }

@media (min-width: 1100px) {
  .floating-cta { display: inline-flex; }
}

/* Back-to-top button. Base state (no JS) is always visible and fully
   functional as a plain anchor to the empty fragment "#", which the
   HTML spec defines as scrolling to the top of the document — no
   JavaScript is required for the core behaviour, matching this site's
   progressive-enhancement rule. `html.js` scope only adds the
   auto-hide-until-scrolled polish (main.js toggles `.is-visible`). */
.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink-raised);
  border: 1.5px solid var(--color-orange);
  color: var(--color-orange);
  box-shadow: var(--shadow-card);
  transition: opacity var(--transition-base), transform var(--transition-base), background var(--transition-fast), color var(--transition-fast);
}

.back-to-top svg { width: 20px; height: 20px; }

.back-to-top:hover { background: var(--color-orange); color: #fff; }

html.js .back-to-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s linear var(--transition-base), background var(--transition-fast), color var(--transition-fast);
}

html.js .back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--transition-base), transform var(--transition-base), visibility 0s, background var(--transition-fast), color var(--transition-fast);
}

@media (max-width: 599.98px) {
  .back-to-top { right: 1rem; bottom: 1rem; width: 44px; height: 44px; }
}

/* -----------------------------------------------------------------------
   6. Header & navigation
   ----------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.97);
  border-bottom: 1px solid var(--color-ink-border-soft);
}

.nav-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  flex-shrink: 0;
}

.brand-mark {
  display: block;
  height: 36px;
  width: auto;
}

.brand-word {
  display: flex;
  align-items: center;
}

.brand-word strong {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav-toggle {
  /* Hidden until JS confirms it can actually drive the collapse (see
     html.js rules below). Without JS the full nav stays visible and
     static, so no inert toggle button is shown. */
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-sm);
  padding: 0;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 20px;
  margin-inline: auto;
  background: #fff;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar--top {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar--mid { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar--bottom {
  transform: translateY(-7px) rotate(-45deg);
}

/* Primary nav is a single element (no separate wrapping panel div, as
   an earlier version had). No-JS default: always visible, and — via
   flex-basis:100% wrapping onto its own line within .nav-bar's wrap —
   sits full-width below the brand row, so navigation works with
   JavaScript disabled. JS-enhanced collapsible behaviour only applies
   once main.js adds `js` to <html>, scoped to the mobile breakpoint. */
.primary-nav {
  flex-basis: 100%;
  order: 3;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-ink);
  border-top: 1px solid var(--color-ink-border-soft);
  margin-top: 0.9rem;
  padding-block: var(--space-md);
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-size: 1rem;
}

.nav-links a {
  color: var(--color-text-on-dark-muted);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: #fff;
}

.nav-cta { margin-top: 0.5rem; }

.nav-cta svg { width: 18px; height: 18px; }

/* Services nav dropdown — native <details>/<summary>, same zero-JS
   disclosure pattern already used for the FAQ accordions. Fully
   functional with no JavaScript (click/Enter/Space toggles it
   natively); main.js only adds the "close on outside click / on
   Escape / when a link inside is followed" polish. On mobile it just
   expands inline within the vertical nav list; ≥900px it becomes an
   absolutely-positioned panel below the nav item. Every link inside
   goes to a real page — no fabricated sub-service pages. */
.nav-dropdown summary {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  color: var(--color-text-on-dark-muted);
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::marker { content: ""; }

.nav-dropdown summary:hover,
.nav-dropdown[open] summary { color: #fff; }

.nav-dropdown-caret {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.nav-dropdown[open] .nav-dropdown-caret { transform: rotate(180deg); }

/* .mega-menu is the positioning wrapper; .mega-menu-panel carries the
   actual visual card. Split so that on desktop the gap between the nav
   item and the panel can be closed with padding (kept inside the
   hoverable box) rather than margin (a dead zone outside it) — see the
   hover-to-open rule below. */
.mega-menu {
  margin-top: 0.75rem;
  margin-bottom: 0.25rem;
}

/* Semi-transparent "glass" panel — lets the page behind blur through
   rather than sitting on a flat opaque card, matching a client
   reference. backdrop-filter is progressive enhancement: unsupported
   browsers just get the slightly-higher-opacity fallback background
   below (still fully readable on its own). */
.mega-menu-panel {
  background: rgba(15, 15, 19, 0.94);
  border: 1px solid var(--color-ink-border-soft);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .mega-menu-panel {
    background: rgba(15, 15, 19, 0.72);
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
  }
}

/* Category header — one icon for the whole panel, matching the
   reference's "one big icon per category, not per item" pattern. */
.mega-menu-head {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-ink-border-soft);
}

.mega-menu-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: rgba(46, 107, 230, 0.16);
  color: var(--color-blue-bright);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  box-shadow: 0 0 18px -4px color-mix(in srgb, currentColor 75%, transparent);
  flex-shrink: 0;
}

.mega-menu-head-icon svg { width: 22px; height: 22px; }

.mega-menu-head strong {
  display: block;
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
}

.mega-menu-head span {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-on-dark-faint);
  margin-top: 0.25rem;
}

.mega-menu-columns {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1.75rem;
}

.mega-menu-col h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-on-dark-faint);
  margin-bottom: 0.9rem;
}

.mega-menu-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.5rem;
  margin: 0 -0.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-on-dark-muted);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.3;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mega-menu-row:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

.mega-menu-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-orange);
}

.mega-menu-row-dot--blue { background: var(--color-blue-bright); }
.mega-menu-row-dot--plum { background: var(--color-plum-bright); }
.mega-menu-row-dot--teal { background: var(--color-teal-bright); }
.mega-menu-row-dot--rose { background: var(--color-rose-bright); }

.mega-menu-row span:not(.mega-menu-row-dot) { flex: 1; }

.mega-menu-row svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--color-text-on-dark-faint);
  transition: transform var(--transition-fast);
}

.mega-menu-row:hover svg { transform: translateX(2px); color: var(--color-orange); }

.mega-menu-viewall {
  display: block;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-ink-border-soft);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-orange);
  text-align: center;
}

.mega-menu-viewall:hover { color: #fff; }

@media (min-width: 900px) {
  /* Visibility is driven by the <details> [open] attribute — native
     for click/keyboard, and set by main.js on hover too (see
     initNavDropdowns). A pure-CSS :hover-driven reveal was tried and
     dropped: Chromium hides a closed <details>'s content via an
     internal mechanism that a plain `display` override on a
     descendant doesn't reliably undo, even though the computed style
     reports the override took effect. JS toggling the real attribute
     sidesteps that entirely and is exactly what click already does. */
  .nav-dropdown[open] .mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    /* Padding (inside the hoverable box), not margin (outside it) —
       keeps the gap to the nav item part of the same continuous
       hover target, so moving the pointer from "Services" down into
       the panel doesn't cross a dead zone and close it early. */
    padding-top: 0.9rem;
    width: 760px;
    max-width: 85vw;
    z-index: 110;
  }

  .mega-menu-panel { box-shadow: var(--shadow-card-hover); }

  .mega-menu-columns { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899.98px) {
  html.js .nav-toggle { display: inline-flex; }
  html.js .primary-nav { display: none; }
  html.js .primary-nav.is-open { display: flex; }
}

@media (min-width: 900px) {
  .nav-toggle { display: none; }

  /* One row: logo, nav links spread across the middle, CTA pinned
     right — adapted from digitalcode.dev's header layout at the
     client's request (see REFERENCE-NOTES.md §9), replacing an
     earlier two-row layout (logo row, nav row stacked below it). */
  .primary-nav {
    flex-basis: auto;
    order: 0;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-lg);
    background: transparent;
    border-top: none;
    margin-top: 0;
    padding-block: 0;
  }

  .nav-links {
    flex-direction: row;
    flex: 1;
    justify-content: center;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }

  .nav-item-dropdown { position: relative; }

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

/* -----------------------------------------------------------------------
   7. Hero
   ----------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--color-ink);
  color: #fff;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-glow);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  padding-block: var(--space-2xl) var(--space-xl);
  display: grid;
  gap: var(--space-lg);
}

.hero-copy {
  display: grid;
  gap: var(--space-lg);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  background: rgba(245, 81, 30, 0.14);
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  width: fit-content;
}

.hero-title {
  font-size: clamp(2.35rem, 5.4vw, 3.6rem);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 17ch;
}

.hero-title .accent-orange { color: var(--color-orange); }
.hero-title .accent-blue { color: var(--color-blue-bright); }

.hero-lede {
  font-size: 1.15rem;
  color: var(--color-text-on-dark-muted);
  max-width: 40rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hero-meta {
  padding-top: 1rem;
  border-top: 1px solid var(--color-ink-border-soft);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-on-dark-muted);
}

@media (min-width: 900px) {
  .hero-inner {
    padding-block: 5rem 4.5rem;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: var(--space-xl);
  }
}

/* Hero visual — a "live build" code panel, in the spirit of a developer
   tool's status widget rather than literal photography we don't have
   licensed rights to use. Wording, layout and the six build lines are
   original to AAJ Digital; only the general "code panel with a live
   status badge" concept is adapted from a reference site's home page
   (see REFERENCE-NOTES.md §11) — no text, imagery or specific tech
   badges were copied. Monospace type via --font-mono (JetBrains Mono,
   loaded on the home page only — see index.html <head>). */
.code-panel {
  position: relative;
  background: #0c0c0f;
  border: 1px solid var(--color-ink-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  overflow: hidden;
}

.code-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--color-ink-border-soft);
}

.code-panel-dots {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.code-panel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-ink-border);
}

.code-panel-filename {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: var(--color-text-on-dark-faint);
  flex: 1;
  text-align: center;
}

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-bright);
  flex-shrink: 0;
}

.live-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-teal-bright);
  animation: livePulse 1.8s ease-in-out infinite;
}

.code-panel-body {
  padding: 1.5rem 1.35rem 1.25rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.92rem;
  line-height: 1.9;
}

.code-panel-prompt {
  color: var(--color-text-on-dark-faint);
}

.code-line {
  color: var(--color-text-on-dark-muted);
  opacity: 0;
  transform: translateY(6px);
  animation: codeLineIn 0.5s ease forwards;
}

.code-line .code-check { color: var(--color-teal-bright); }
.code-line .code-highlight { color: #fff; font-weight: 600; }

.code-line:nth-child(2) { animation-delay: 0.3s; }
.code-line:nth-child(3) { animation-delay: 0.75s; }
.code-line:nth-child(4) { animation-delay: 1.2s; }
.code-line:nth-child(5) { animation-delay: 1.65s; }
.code-line:nth-child(6) { animation-delay: 2.1s; }
.code-line:nth-child(7) { animation-delay: 2.55s; }

.code-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  margin-left: 0.2em;
  background: var(--color-orange);
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

.code-panel-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.1rem 1.35rem 1.35rem;
  border-top: 1px solid var(--color-ink-border-soft);
}

.code-chip {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-text-on-dark-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-ink-border-soft);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
}

@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(43, 186, 168, 0.5); }
  50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(43, 186, 168, 0); }
}

@keyframes codeLineIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* -----------------------------------------------------------------------
   8. Cards
   ----------------------------------------------------------------------- */
.card {
  background: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-card);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Subtle lift on hover — a common "premium agency" tell. The global
   prefers-reduced-motion rule (section 2) already zeroes transition
   durations, so this degrades to an instant, non-animated state change
   rather than being separately guarded here. */
.card:hover {
  transform: translateY(-4px);
  border-color: var(--color-ink-border);
  box-shadow: var(--shadow-card-hover);
}

/* Glowing icon chip — border and outer glow both use currentColor via
   color-mix(), so every existing tint variant (which already sets
   `color` per context — orange default, or one of the
   .card-icon--(tint) / .card--tint-(tint) overrides) gets a matching
   glow automatically, no per-variant duplication needed. Adapted from
   a client reference's neon-bordered icon tiles, using AAJ's own
   palette rather than the reference's pink/magenta. */
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--color-orange-tint);
  color: var(--color-orange);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  box-shadow: 0 0 18px -4px color-mix(in srgb, currentColor 75%, transparent);
  flex-shrink: 0;
}

.card-icon svg { width: 26px; height: 26px; }

/* Tint variants for standalone .card-icon use (outside a .card--tint-*
   wrapper) — e.g. a mixed-colour icon list like the About page hero
   highlights. Same rgba values as the .card--tint-* icon colours. */
.card-icon--blue { background: rgba(46, 107, 230, 0.16); color: var(--color-blue-bright); }
.card-icon--teal { background: rgba(43, 186, 168, 0.16); color: var(--color-teal-bright); }
.card-icon--plum { background: rgba(149, 133, 209, 0.18); color: var(--color-plum-bright); }

.card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.25rem;
}

.card p {
  color: var(--color-text-on-light-muted);
  margin-bottom: 0;
}

.card-link {
  margin-top: auto;
  font-weight: 600;
  color: var(--color-blue-light);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.card-link:hover { text-decoration: underline; }

/* Dark variant card, used on dark sections */
.card--dark {
  background: var(--color-ink-raised);
  border-color: var(--color-ink-border-soft);
  box-shadow: var(--shadow-card-dark);
  color: #fff;
}
.card--dark p { color: var(--color-text-on-dark-muted); }

/* Bento colour variants — dark card surface with a coloured top accent
   and icon chip; colours sampled from the logo gradient. Deliberately
   NOT a full pastel fill (that read as a generic light-mode template
   against the rest of the site — see REFERENCE-NOTES.md §6). */
.card--tint-blue { border-top: 3px solid var(--color-blue-bright); }
.card--tint-orange { border-top: 3px solid var(--color-orange); }
.card--tint-teal { border-top: 3px solid var(--color-teal-bright); }
.card--tint-plum { border-top: 3px solid var(--color-plum-bright); }
.card--tint-rose { border-top: 3px solid var(--color-rose-bright); }

.card--tint-blue .card-icon { background: rgba(46, 107, 230, 0.16); color: var(--color-blue-bright); }
.card--tint-orange .card-icon { background: rgba(245, 81, 30, 0.16); color: var(--color-orange); }
.card--tint-teal .card-icon { background: rgba(43, 186, 168, 0.16); color: var(--color-teal-bright); }
.card--tint-plum .card-icon { background: rgba(149, 133, 209, 0.18); color: var(--color-plum-bright); }
.card--tint-rose .card-icon { background: rgba(224, 112, 138, 0.18); color: var(--color-rose-bright); }

/* Circular outline icon — used in the "why choose us" trust row */
.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--color-teal-bright);
  color: var(--color-teal-bright);
  flex-shrink: 0;
  background: rgba(43, 186, 168, 0.1);
  box-shadow: 0 0 20px -4px color-mix(in srgb, currentColor 70%, transparent);
}
.icon-circle svg { width: 26px; height: 26px; }

/* Numbered process steps */
.process-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-ink-border-soft);
  background: var(--color-ink-raised);
  height: 100%;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.process-step:hover {
  transform: translateY(-3px);
  border-color: var(--color-ink-border);
}

.process-step .step-number {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-orange);
}

.process-step h3 { font-size: 1.1rem; margin-bottom: 0.15rem; }
.process-step p { color: var(--color-text-on-light-muted); margin-bottom: 0; }

/* Homepage-only process timeline — a vertical, alternating-side layout
   (adapted from a client reference's structure; AAJ's own orange
   accent stands in for the reference's pink/magenta, per the
   standing "adapt the layout, not the reference's palette or wording"
   rule — see REFERENCE-NOTES.md §5/§20). Kept separate from
   .process-step/.step-number above deliberately: those classes are
   still used, unchanged, for the six-step process grids on each
   individual service page — this is a distinct pattern for the
   homepage's five-stage overview only. */
.process-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

/* The connecting line — a single element behind every marker rather
   than per-item segments, so it reads as one continuous line however
   many steps there are. Centred at 50% on desktop (matching the
   markers, which sit in the fixed middle column of each item's grid);
   moved to sit under the markers' column on mobile, where the layout
   collapses to a single side. */
.process-timeline::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 21px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    var(--color-ink-border) 0,
    var(--color-ink-border) 6px,
    transparent 6px,
    transparent 12px
  );
}

@media (min-width: 800px) {
  .process-timeline::before { left: 50%; transform: translateX(-50%); }
}

.process-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (min-width: 800px) {
  .process-timeline-item {
    grid-template-columns: 1fr 44px 1fr;
    align-items: center;
    gap: 1.75rem;
  }

  /* Odd steps (1st, 3rd, 5th…) show their card on the left, even
     steps on the right — the marker stays in the fixed middle column
     either way, keeping it aligned on the line regardless of side. */
  .process-timeline-item .process-timeline-card { grid-column: 1; }
  .process-timeline-item:nth-child(even) .process-timeline-card { grid-column: 3; }
  .process-timeline-item .process-timeline-marker { grid-column: 2; }
}

.process-timeline-marker {
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--color-ink);
  color: var(--color-orange);
  border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: 0 0 16px -3px color-mix(in srgb, currentColor 70%, transparent);
}

.process-timeline-card {
  display: flex;
  gap: 1rem;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-ink-border-soft);
  background: var(--color-ink-raised);
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.process-timeline-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-ink-border);
}

.process-timeline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: rgba(245, 81, 30, 0.16);
  color: var(--color-orange);
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  box-shadow: 0 0 16px -4px color-mix(in srgb, currentColor 70%, transparent);
  flex-shrink: 0;
}

.process-timeline-icon svg { width: 22px; height: 22px; }

.process-timeline-card .step-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 0.15rem;
}

.process-timeline-card h3 { font-size: 1.1rem; margin-bottom: 0.15rem; }
.process-timeline-card p { color: var(--color-text-on-light-muted); margin-bottom: 0; }

/* Reason / value list */
.reason-list {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .reason-list { grid-template-columns: repeat(2, 1fr); }
}

.reason-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.reason-item .card-icon { width: 44px; height: 44px; }
.reason-item .card-icon svg { width: 22px; height: 22px; }

.reason-item h3 { font-size: 1.05rem; margin-bottom: 0.2rem; }
.reason-item p { color: var(--color-text-on-light-muted); margin-bottom: 0; }

/* Raised dark band, used for the "why choose us" trust band */
.section--lavender { background: var(--color-ink-raised); }

/* Raised dark band with a teal accent, used for the local/remote intro */
.section--teal { background: var(--color-ink-raised); color: var(--color-text-on-light); }
.section--teal .eyebrow { background: rgba(43, 186, 168, 0.16); color: var(--color-teal-bright); }
.section--teal .section-lede { color: var(--color-text-on-light-muted); }

.section-title-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.section-title-inline img { height: 34px; width: auto; }

.text-center { text-align: center; }
.mx-auto { margin-inline: auto; }
.mt-lg { margin-top: var(--space-lg); }
.max-w-narrow { max-width: 40rem; }

/* Numbered services list, paired with a decorative panel */
.numbered-list {
  display: flex;
  flex-direction: column;
}

.numbered-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--color-paper-border);
}

.numbered-item:last-child { border-bottom: 1px solid var(--color-paper-border); }

.numbered-item .item-number {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-orange);
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.numbered-item h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.numbered-item p { color: var(--color-text-on-light-muted); margin-bottom: 0; }

.numbered-item .item-arrow {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-orange);
  padding-top: 0.2rem;
}

/* Decorative gradient panel — stands in for photography we don't have
   licensed rights to use (see REFERENCE-NOTES.md §5). Hand-drawn inline
   SVG pattern, no external image dependency. */
.decorative-panel {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--gradient-logo);
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.decorative-panel svg { width: 100%; height: 100%; position: absolute; inset: 0; opacity: 0.5; }

.decorative-panel .panel-mark {
  position: relative;
  height: 30%;
  width: auto;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

/* -----------------------------------------------------------------------
   9. FAQ (native details/summary)
   ----------------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 48rem;
}

.faq-item {
  border: 1px solid var(--color-ink-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-ink-raised);
  overflow: hidden;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  font-weight: 600;
  font-size: 1rem;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }

.faq-item summary .faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-paper-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-base);
  position: relative;
}

.faq-item summary .faq-icon::before,
.faq-item summary .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--color-text-on-light);
}
.faq-item summary .faq-icon::before { width: 10px; height: 2px; }
.faq-item summary .faq-icon::after { width: 2px; height: 10px; }

.faq-item[open] summary .faq-icon { transform: rotate(45deg); }

.faq-item .faq-body {
  padding: 0 1.35rem 1.25rem;
  color: var(--color-text-on-light-muted);
}

/* -----------------------------------------------------------------------
   10. Forms
   ----------------------------------------------------------------------- */
.form-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 640px) {
  .form-row-2 { grid-template-columns: repeat(2, 1fr); display: grid; gap: var(--space-md); }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-weight: 600;
  font-size: 0.92rem;
}

.field .optional-tag {
  font-weight: 400;
  color: var(--color-text-on-light-muted);
  font-size: 0.82rem;
}

.field input,
.field select,
.field textarea {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink-border);
  background: var(--color-ink-raised);
  color: var(--color-text-on-light);
  font-size: 1rem;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--color-text-on-light-muted);
}

.field select {
  color-scheme: dark;
}

.field textarea { resize: vertical; min-height: 140px; }

.field input:invalid[data-touched="true"],
.field select:invalid[data-touched="true"],
.field textarea:invalid[data-touched="true"] {
  border-color: var(--color-orange);
}

/* Honeypot — off-screen (not merely visually-hidden-but-announced like
   .visually-hidden; genuinely unreachable) so real visitors, including
   screen reader/keyboard users, never encounter it, while a spam bot
   that fills every field it finds in the DOM still does. */
.field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  /* --color-orange-deep fails 4.5:1 text contrast against the dark
     field background; the brighter --color-orange clears ~6:1. */
  color: var(--color-orange);
  font-size: 0.85rem;
  min-height: 1.1em;
}

.form-notice {
  border: 1px solid var(--color-ink-border);
  background: rgba(46, 107, 230, 0.12);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: 0.95rem;
  color: var(--color-text-on-light);
}

.form-notice--error {
  background: rgba(201, 64, 26, 0.16);
  border-color: rgba(245, 81, 30, 0.4);
}

.form-notice--success {
  background: rgba(28, 150, 90, 0.16);
  border-color: rgba(28, 150, 90, 0.4);
}

.form-status { margin-bottom: var(--space-md); }
.form-status[hidden] { display: none; }

/* -----------------------------------------------------------------------
   11. Footer
   ----------------------------------------------------------------------- */
.site-footer {
  background: var(--color-ink);
  color: var(--color-text-on-dark-muted);
  border-top: 1px solid var(--color-ink-border-soft);
  padding-block: var(--space-xl) var(--space-lg);
}

.footer-top {
  display: grid;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .footer-top { grid-template-columns: 1.3fr 0.9fr 1fr 1fr; }
}

@media (min-width: 640px) and (max-width: 999.98px) {
  .footer-brand { grid-column: 1 / -1; }
}

.footer-brand .brand-word strong,
.footer-brand .brand { color: #fff; }

.footer-brand p {
  max-width: 34ch;
  margin-top: 0.75rem;
}

/* Social row — icons are intentionally NOT links: no AAJ Digital
   social profile is confirmed live yet (see REFERENCE-NOTES.md §12).
   Rendered as inert, visibly muted <span>s with an explicit caption
   rather than dead/placeholder <a> hrefs, so nothing here reads as a
   broken link. Swap to real <a href> tags the moment profiles exist,
   remove the muted styling and caption. */
.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-ink-border-soft);
  color: var(--color-text-on-dark-faint);
  opacity: 0.55;
}

.footer-social-icon svg { width: 18px; height: 18px; }

.footer-social-note {
  font-size: 0.78rem;
  color: var(--color-text-on-dark-faint);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

.footer-heading {
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  position: relative;
  padding-bottom: 0.6rem;
}

.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background: var(--color-orange);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a:hover { color: #fff; }

.footer-links a[href^="mailto:"],
.footer-links a[href^="tel:"] {
  color: var(--color-orange);
  font-weight: 600;
}
.footer-links a[href^="mailto:"]:hover,
.footer-links a[href^="tel:"]:hover { color: #fff; }

/* "Get in touch" column — icon + text rows, lighter-weight than
   .contact-info-item (which has its own card background; here the
   footer itself is already the dark surface). */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: 0 0 14px -4px color-mix(in srgb, currentColor 70%, transparent);
  color: var(--color-orange);
  flex-shrink: 0;
}

.footer-contact-icon svg { width: 16px; height: 16px; }

.footer-contact-item a,
.footer-contact-item span {
  color: var(--color-text-on-dark-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.footer-contact-item a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid var(--color-ink-border-soft);
  padding-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.85rem;
}

/* Below 1150px there isn't room to fit the copyright sentence and all
   four legal links on the same row at a legible size without either
   scrolling or truncating something — so it stays in the default
   column stack above (each one still a genuine single line, just not
   sharing a row with the other). */
@media (min-width: 1150px) and (max-width: 1259.98px) {
  /* This band sits below the 1200px container cap, so the row can run
     flush to the viewport edge — a slightly smaller size and tighter
     gaps make the combined row actually fit here without scrolling or
     clipping anything (verified empirically, not just estimated).
     calc() reserves clearance on the right for the fixed back-to-top
     button, which stays visible over the footer by design. */
  .footer-bottom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.78rem;
    width: calc(100% - 4.5rem);
  }

  .footer-bottom > div:first-child {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .footer-bottom > div:first-child p {
    white-space: nowrap;
  }

  .footer-legal-links {
    flex-wrap: nowrap;
    gap: 0.5rem 0.9rem;
  }
}

@media (min-width: 1260px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .footer-bottom > div:first-child {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .footer-bottom > div:first-child p {
    white-space: nowrap;
  }

  .footer-legal-links {
    flex-wrap: nowrap;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

@media (min-width: 768px) {
  .footer-legal-links {
    flex-wrap: nowrap;
    flex-shrink: 0;
  }

  .footer-legal-links a {
    white-space: nowrap;
  }
}

.footer-legal-links a:hover { color: #fff; }

.form-consent {
  font-size: 0.85rem;
  color: var(--color-text-on-light-muted);
}

.form-consent a { color: var(--color-blue-light); text-decoration: underline; }

.legal-content {
  max-width: 44rem;
}

.legal-content h2 {
  font-size: 1.4rem;
  margin-top: var(--space-lg);
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content p,
.legal-content li {
  color: var(--color-text-on-light-muted);
}

.legal-content a {
  color: var(--color-blue-light);
  text-decoration: underline;
}

.legal-content ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 var(--space-sm);
}

.legal-content ul li {
  padding-left: 1.25rem;
  position: relative;
}

.legal-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
}

.legal-meta {
  color: var(--color-text-on-light-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-lg);
}

/* -----------------------------------------------------------------------
   12. Page-level headers (non-home pages)
   ----------------------------------------------------------------------- */
.page-hero {
  background: var(--color-ink);
  color: #fff;
  padding-block: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-glow);
  pointer-events: none;
}

.page-hero-inner { position: relative; max-width: 46rem; }

/* Two-column variant — heading/copy on the left, a bespoke animated
   SVG panel on the right, one per page (adapted from a client
   reference's hero layout; the reference's photographic 3D device
   mockups aren't reproducible without an image pipeline this project
   doesn't have, so each panel here is original hand-drawn SVG/CSS in
   the site's own "developer console" visual language instead — see
   REFERENCE-NOTES.md §31). Not used on every page: the four legal
   pages keep the plain single-column .page-hero-inner above, since a
   decorative illustration doesn't suit legal boilerplate. */
.page-hero-inner--split {
  /* Explicitly restated (not just inherited) because this and
     .container are the same specificity on the same element and this
     rule comes later in the cascade — omitting it, or setting `none`,
     silently overrides .container's own cap and lets the whole hero
     row (including the visual panel) stretch to the full viewport
     width on wide screens instead of the site's normal content width. */
  max-width: var(--container-width);
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .page-hero-inner--split {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
  }
}

.page-hero-copy { max-width: 46rem; }

/* Rebuilt after feedback that the boxed-card version read as flat next
   to a digitalcode.pk/.dev reference's free-floating illustration with
   large halo rings and a slow continuous drift — see
   REFERENCE-NOTES.md §32. The reference's actual graphic is a
   photographic 3D device render this project has no way to
   reproduce, but the *staging* around it (soft glow, concentric rings,
   one slow "madFloat"-style animation on the whole group, a small
   pulsing accent dot) is plain CSS and is reproduced here. */
.page-hero-visual {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  overflow: visible;
}

.page-hero-visual svg { width: 100%; height: auto; display: block; }

.page-hero-visual-glow {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 70%);
}

.page-hero-visual-rings {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.page-hero-visual-rings::before,
.page-hero-visual-rings::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

.page-hero-visual-rings::before { width: 88%; }
.page-hero-visual-rings::after { width: 58%; }

.page-hero-visual-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
  animation: heroVisualFloat 6s ease-in-out infinite;
}

.page-hero-visual-dot {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: heroVisualPulse 2.4s ease-in-out infinite;
}

/* Shared animation vocabulary for the per-page panels, reusing the
   same techniques as the homepage's code panel (fade/rise-in, a
   pulsing dot, a blinking cursor) so every panel feels like one
   family rather than one-off effects. prefers-reduced-motion is
   already handled globally (section 2) — it zeroes duration, delay
   and iteration-count on all of these automatically. */
@keyframes heroVisualFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroVisualFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes heroVisualPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes heroVisualDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes heroVisualScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

/* Continuous "breathing" pair — unlike the reveal keyframes above
   (which run once, 0 -> fully visible, and stop), these loop forever
   without ever dropping to fully invisible, so a whole grid of staggered
   elements reads as gently alive rather than repeatedly blinking in and
   out of existence. Used for every panel element that should keep
   animating, not just reveal itself once on load. */
@keyframes heroVisualBreatheUp {
  0%, 100% { opacity: 0.72; transform: translateY(4px); }
  50% { opacity: 1; transform: translateY(0); }
}

@keyframes heroVisualBreatheScale {
  0%, 100% { opacity: 0.72; transform: scale(0.93); }
  50% { opacity: 1; transform: scale(1); }
}

/* Per-page accent — set once on .page-hero-visual, read by every
   component below via var(--accent), so the same handful of
   components can be reused across pages in each service's own colour
   without a full duplicate ruleset per page. */
.page-hero-visual { --accent: var(--color-orange); }
.page-hero-visual--blue { --accent: var(--color-blue-bright); }
.page-hero-visual--plum { --accent: var(--color-plum-bright); }
.page-hero-visual--teal { --accent: var(--color-teal-bright); }
.page-hero-visual--rose { --accent: var(--color-rose-bright); }

/* mock-browser — a minimal browser-chrome frame with page content
   blocks fading in beneath it, used for page visuals about building
   or showcasing a website. */
.mock-browser {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-ink-border-soft);
  background: var(--color-ink);
  overflow: hidden;
}

.mock-browser-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--color-ink-border-soft);
}

.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-border); flex-shrink: 0; }

.mock-url {
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-on-dark-faint);
}

.mock-browser-body { padding: 1.1rem; display: flex; flex-direction: column; gap: 0.65rem; }

.mock-row { display: flex; gap: 0.65rem; }
.mock-row .mock-block { flex: 1; }

.mock-block {
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  animation: heroVisualBreatheUp 2.6s ease-in-out infinite;
}

/* mock-phone — a vertical device frame for app-screen visuals. */
.mock-phone {
  width: 130px;
  margin-inline: auto;
  border-radius: 22px;
  border: 1px solid var(--color-ink-border-soft);
  background: var(--color-ink);
  padding: 0.7rem 0.6rem;
}

.mock-phone-notch {
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--color-ink-border);
  margin: 0 auto 0.7rem;
}

.mock-phone-screen { display: flex; flex-direction: column; gap: 0.5rem; }

/* mock-nodes — an animated network graph: circles pulsing, connected
   by lines that draw themselves in. Shared by the blockchain and AI
   pages, distinguished by their own labels/arrangement and accent. */
.mock-nodes-svg circle {
  fill: color-mix(in srgb, var(--accent) 22%, transparent);
  stroke: var(--accent);
  stroke-width: 1.5;
  animation: heroVisualPulse 2.6s ease-in-out infinite;
}

.mock-nodes-svg line {
  stroke: color-mix(in srgb, var(--accent) 55%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: heroVisualDraw 3.2s ease-in-out infinite alternate;
}

.mock-nodes-svg text {
  fill: var(--color-text-on-dark-muted);
  font-size: 7px;
  font-family: var(--font-sans);
}

/* mock-swatches — overlapping colour panes for the design page. */
.mock-swatches {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.9rem;
  padding: 1.5rem 0;
}

.mock-swatch {
  border-radius: var(--radius-md);
  animation: heroVisualBreatheScale 2.4s ease-in-out infinite;
}

/* mock-bubbles — chat/social icons popping in with a pulsing heart,
   for the marketing page. */
.mock-bubbles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.75rem 0;
}

.mock-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
  animation: heroVisualBreatheScale 2.4s ease-in-out infinite;
}

.mock-bubble svg { width: 26px; height: 26px; }
.mock-bubble--pulse { animation: heroVisualBreatheScale 2.4s ease-in-out infinite, heroVisualPulse 2s ease-in-out infinite 0.6s; }

/* mock-icon-grid — a grid of icon tiles fading in in sequence, used
   for pages summarising several items (services overview, products,
   industries). */
.mock-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.mock-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  text-align: center;
  animation: heroVisualBreatheUp 2.6s ease-in-out infinite;
}

.mock-icon-tile svg { width: 22px; height: 22px; color: var(--accent); }
.mock-icon-tile span { font-size: 0.7rem; color: var(--color-text-on-dark-muted); }

/* mock-pin — a location marker with radiating rings, for the About
   page. */
.mock-pin-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.25rem 0;
}

.mock-pin-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  animation: heroVisualScaleIn 1.8s ease-out infinite;
}

.mock-pin-ring:nth-child(2) { animation-delay: 0.6s; }
.mock-pin-ring:nth-child(3) { animation-delay: 1.2s; }

.mock-pin-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border: 1.5px solid var(--accent);
  color: var(--accent);
}

.mock-pin-icon svg { width: 26px; height: 26px; }

/* mock-gallery — a grid of gradient thumbnails for the Portfolio page,
   echoing portfolio.html's own .portfolio-thumb treatment. */
.mock-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
}

.mock-gallery-thumb {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-sm);
  animation: heroVisualBreatheScale 2.4s ease-in-out infinite;
}

/* mock-envelope — a message icon for the Contact page, sitting inside
   the shared .page-hero-visual-rings/-glow halo rather than its own
   custom ring (dropped when that shared system was added — see
   REFERENCE-NOTES.md §32). */
.mock-envelope {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.mock-envelope svg { width: 38px; height: 38px; }

/* mock-cycle — a recurring-payment cycle diagram for the payment
   plans page: an orbiting dot on a dashed ring around a coin icon. */
.mock-cycle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 0;
}

.mock-cycle-ring {
  stroke: color-mix(in srgb, var(--accent) 40%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 4 6;
}

.mock-cycle-dot {
  fill: var(--accent);
  transform-origin: 60px 60px;
  animation: mockCycleSpin 6s linear infinite;
}

@keyframes mockCycleSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.mock-cycle-icon {
  color: var(--accent);
}

/* product-mockup — an original laptop+phone device composition for
   showcasing AAJ's own real products (Tracka CRM, FitChain AI,
   Clinexa) on the homepage and portfolio page. Deliberately not a real
   product screenshot — abstract placeholder UI bars only, tinted via
   --accent (same convention as .page-hero-visual). Real screenshots
   exist only on the confidential reference site's own portfolio page
   and were not reused here — see REFERENCE-NOTES.md §37. */
.product-mockup {
  position: relative;
  padding: 1.5rem 1.25rem 2.5rem;
}

.product-mockup-laptop {
  width: 82%;
  margin-inline: auto;
  border-radius: 10px 10px 4px 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: var(--color-ink);
  overflow: hidden;
  box-shadow: 0 18px 32px -18px rgba(0, 0, 0, 0.65);
}

.product-mockup-screen {
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.product-mockup-bar {
  height: 7px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  animation: heroVisualBreatheUp 2.8s ease-in-out infinite;
}

.product-mockup-row { display: flex; gap: 0.4rem; }
.product-mockup-row .product-mockup-bar { flex: 1; height: 24px; border-radius: 6px; }

.product-mockup-base {
  height: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
}

.product-mockup-phone {
  position: absolute;
  right: 10%;
  bottom: 0.25rem;
  width: 50px;
  padding: 4px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--color-ink-raised);
  box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.7);
}

.product-mockup-phone-screen {
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  aspect-ratio: 9 / 17;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  padding: 5px;
}

.product-mockup-phone-screen span {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  animation: heroVisualBreatheUp 2.4s ease-in-out infinite;
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-text-on-dark-faint);
  margin-bottom: var(--space-sm);
}

.breadcrumb a { color: var(--color-text-on-dark-muted); }
.breadcrumb a:hover { color: #fff; }

.page-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.page-lede {
  font-size: 1.1rem;
  color: var(--color-text-on-dark-muted);
  max-width: 42rem;
}

/* -----------------------------------------------------------------------
   13. Misc components
   ----------------------------------------------------------------------- */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.tag {
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--color-paper-alt);
  border: 1px solid var(--color-paper-border);
  font-size: 0.85rem;
  font-weight: 500;
}

.section--dark .tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-ink-border-soft);
  color: #fff;
}

/* Payment-gateway "logo strip" — real logo image files, supplied
   directly by the client (assets/images/payment-gateways/, same basis
   as the site's own logo file) rather than reproduced/redrawn or
   scraped from a third party — see REFERENCE-NOTES.md §16 for why
   text wordmarks were used before this, and §34 for why real files
   changed that. Continuously scrolling strip: content is duplicated
   once in the markup and the pair is translated by exactly -50%, so
   the loop is seamless; pauses on hover/focus and stays fully static
   under prefers-reduced-motion (media query below) rather than
   freezing mid-scroll. */
.gateway-strip {
  margin-top: var(--space-lg);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.gateway-track {
  display: flex;
  width: max-content;
  gap: 0.75rem;
  animation: gatewayScroll 26s linear infinite;
}

.gateway-strip:hover .gateway-track,
.gateway-strip:focus-within .gateway-track {
  animation-play-state: paused;
}

@keyframes gatewayScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

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

/* Real supplied brand logos (see REFERENCE-NOTES.md §34) — housed on a
   light card since every logo file is drawn for a light background
   (dark/coloured wordmarks on white), which a dark card would make
   unreadable. */
.gateway-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 62px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--color-ink-border-soft);
  transition: border-color var(--transition-fast);
}

.gateway-strip:hover .gateway-badge { border-color: var(--color-ink-border); }

.gateway-badge img {
  display: block;
  height: 26px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
}

.deliverables-list {
  display: grid;
  gap: 0.75rem;
}

.deliverables-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border-soft);
  border-radius: var(--radius-sm);
}

.deliverables-list li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--color-orange);
}

.deliverables-list--dark li {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--color-ink-border-soft);
  color: #fff;
}

.two-col {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 900px) {
  .two-col { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .two-col--reverse { grid-template-columns: 0.9fr 1.1fr; }
  /* .card defaults to height:100% for equal-height grid rows elsewhere;
     that percentage still resolves against the grid row track here even
     with align-items:start, so it must be overridden explicitly. */
  .two-col > .card { height: auto; }
}

.final-cta {
  background: var(--color-ink);
  color: #fff;
  text-align: center;
  padding-block: var(--space-2xl);
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gradient-hero-glow);
  pointer-events: none;
}

.final-cta-inner {
  position: relative;
  max-width: 40rem;
  margin-inline: auto;
}

.final-cta h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }

.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--space-md);
}

.notice-banner {
  background: rgba(245, 81, 30, 0.12);
  border: 1px solid rgba(245, 81, 30, 0.4);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
  color: var(--color-text-on-light);
}

.notice-banner a {
  color: var(--color-orange);
  font-weight: 700;
  text-decoration: underline;
}

.notice-banner a:hover { color: #fff; }

.notice-banner code {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.form-notice-spaced { margin-bottom: var(--space-md); }

.contact-info-panel {
  background: var(--color-ink);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-ink-border-soft);
}

.contact-info-list {
  display: grid;
  gap: 1rem;
}

.card-icon--sm {
  width: 40px;
  height: 40px;
}

.aside-heading {
  font-size: 1.5rem;
}

.contact-info-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1rem;
  border-radius: var(--radius-md);
  background: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border-soft);
}

.contact-info-item h3 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
  color: #fff;
}

.contact-info-item p {
  margin-bottom: 0;
  color: var(--color-text-on-dark-muted);
  font-size: 0.92rem;
}

/* -----------------------------------------------------------------------
   14. Portfolio (partner work)
   ----------------------------------------------------------------------- */
.portfolio-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
}

.portfolio-card {
  background: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform var(--transition-base), border-color var(--transition-base);
}

.portfolio-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-ink-border);
}

/* Stylised category thumbnail — deliberately NOT a photo or screenshot.
   No real project imagery exists for these builds to show (delivered
   under an NDA — see REFERENCE-NOTES.md §10/§37), so a gradient + icon
   stands in, grouped honestly by each project's own real tags rather
   than claiming to depict the actual product. The layered backgrounds
   below (added §38) add a plain abstract "window chrome + content
   bars" texture on top of the same per-category gradient, purely via
   CSS background layers — no new markup needed across all 21 cards —
   so each thumbnail reads a little more like a screenshot silhouette
   without pretending to show real, specific UI. */
.portfolio-thumb {
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position:
    top left,
    bottom 16px left 14px,
    bottom 16px left 56%;
  background-size:
    100% 16px,
    38% 7px,
    32% 7px;
}

.portfolio-thumb svg { width: 34px; height: 34px; color: rgba(255, 255, 255, 0.85); }

.portfolio-thumb--blockchain {
  background-color: var(--color-plum);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(145deg, #6753a8, var(--color-plum));
}
.portfolio-thumb--marketing {
  background-color: var(--color-teal);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(145deg, #189c8d, var(--color-teal));
}
.portfolio-thumb--app {
  background-color: var(--color-orange);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(145deg, #ff7648, var(--color-orange));
}
.portfolio-thumb--web {
  background-color: var(--color-blue);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.24)),
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)),
    linear-gradient(145deg, #1a4bc4, var(--color-blue));
}

.portfolio-card-body {
  padding: 1.1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.portfolio-card h3 { font-size: 1.05rem; margin-bottom: 0; }

.portfolio-card p {
  color: var(--color-text-on-light-muted);
  font-size: 0.85rem;
  margin-bottom: 0;
  flex-grow: 1;
}

/* -----------------------------------------------------------------------
   15. Pricing
   ----------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}

.pricing-card {
  background: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.pricing-card--featured {
  border-color: var(--color-orange);
  box-shadow: 0 0 0 1px var(--color-orange), var(--shadow-card);
}

.pricing-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pricing-card-head h3 { margin-bottom: 0; font-size: 1.15rem; }

.pricing-featured-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  background: rgba(245, 81, 30, 0.14);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
}

.pricing-amount {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}

.pricing-amount .amount {
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.pricing-amount .period {
  color: var(--color-text-on-light-muted);
  font-size: 0.95rem;
}

.pricing-discount {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.pricing-discount .discount-badge {
  background: rgba(43, 186, 168, 0.16);
  color: var(--color-teal-bright);
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
}

.pricing-discount .was-price {
  color: var(--color-text-on-light-muted);
  text-decoration: line-through;
}

.pricing-card > p {
  color: var(--color-text-on-light-muted);
  margin-bottom: 0;
  font-size: 0.92rem;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.pricing-features svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-teal-bright);
  margin-top: 0.15rem;
}

.pricing-note {
  font-size: 0.85rem;
  color: var(--color-text-on-light-muted);
  margin-top: var(--space-sm);
}

/* -----------------------------------------------------------------------
   16. Stats
   ----------------------------------------------------------------------- */
.stats-row {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(1, 1fr);
}

@media (min-width: 640px) {
  .stats-row { grid-template-columns: repeat(3, 1fr); }
}

.stat-item {
  text-align: center;
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-ink-raised);
  border: 1px solid var(--color-ink-border-soft);
}

.stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}

.stat-label {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-text-on-light-muted);
  font-size: 0.9rem;
}

.section--dark .stat-label { color: var(--color-text-on-dark-muted); }

/* -----------------------------------------------------------------------
   17. Print
   ----------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .hero-actions, .final-cta { display: none; }
}