/* --- Self-hosted Fonts --- */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('/fonts/open-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url('/fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Design Tokens & Base Reset --- */

:root {
  /* Colors — Light theme */
  --color-navy: #1B365D;
  --color-teal: #1F7477;
  --color-amber: #E59500;
  --color-coral: #FF6F61;
  --color-purple: #8B6CAF;
  /* hero minor accents (corner bloom) — analogous neighbours of each card colour */
  --color-green: #34A85B;        /* Web minor   (teal -> green) */
  --color-blue: #3A6EA5;         /* AI hero major (clean steel-blue; navy muddies in pastel) */
  --color-orange-deep: #CB5A14;  /* Product minor (amber -> deep orange) */
  --color-red-deep: #A4262C;     /* Content minor (coral -> deep red) */
  /* Action accent — logo teal, replaces the former orange/amber across the site.
     Constant in both modes; bright enough for dark text on fills (~6.4:1 AA). */
  --color-action: #3DBCC2;
  --color-action-hover: #2BA7AD;
  --color-bg: #F8F6F3;
  --color-bg-alt: #F0EDEA;
  --color-bg-surface: #FFFFFF;
  --color-text: #1F2933;
  --color-text-inverse: #FFFFFF;
  --color-text-on-accent: #1F2933;
  /* Error text/border: darkened coral so it clears WCAG AA on light bg (coral
     alone is only ~2.7:1 on white). Uses the mode-flipping coral+text tokens,
     so it stays AA in dark mode automatically. Light 4.9:1 / dark 9.4:1. */
  --color-error: color-mix(in srgb, var(--color-coral) 60%, var(--color-text));
  /* Dark-hero gradient mid-stop (between navy and teal) + navy panel tint */
  --hero-gradient-mid: #234875;
  --color-navy-tint: #3a5a7c;

  /* Typography */
  --font-heading: 'Newsreader', Georgia, serif;
  --font-subheading: 'DM Sans', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;

  /* Type scale (1.25 ratio) */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;

  /* Spacing (8px base) */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --max-width: 75rem;
  --max-width-narrow: 50rem;
  --header-height: 4rem;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.12);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* --- Per-page accent system (interior sub-pages) ---
     The sub-page hero is a soft gradient of TINTS of the card's own colour over --color-bg-alt,
     with dark text -- the card, enlarged. The full-strength card colour carries the accents
     (badges, labels, rule, secondary button). Each page sets ONE token = its exact card colour;
     hero tints derive from it, so the match is exact and dark-mode-correct automatically. */

  /* pastel hero tint stops: % of accent mixed into --color-bg-alt */
  --hero-tint-1: 13%;     /* 0% stop  -- light, ~ the card's own body tint; holds the dark text */
  --hero-tint-2: 40%;     /* mid stop (major) -- deeper tint, still light enough for dark text */
  --hero-tint-minor: 40%; /* 100% stop (minor) -- lightened from 55% so the hero subheading clears WCAG AA over the densest corner (verified: >=4.5:1 both modes) */

  /* base fallback so pages with no .page--* class keep a sensible look */
  --page-accent: var(--color-teal);
  --page-accent-2: var(--color-teal);
}

/* Each page sets its MAJOR (--page-accent = exact card colour) and a MINOR (--page-accent-2,
   an analogous neighbour that blooms in the hero corner). Applied via <body class="page page--x">. */
.page--web     { --page-accent: var(--color-teal);   --page-accent-2: var(--color-green); }
.page--ai      { --page-accent: var(--color-navy);   --page-accent-2: var(--color-purple); }
.page--product { --page-accent: var(--color-teal);   --page-accent-2: var(--color-navy); }
.page--apps    { --page-accent: var(--color-purple); --page-accent-2: var(--color-navy); }
.page--content { --page-accent: var(--color-coral);  --page-accent-2: var(--color-red-deep); }

@media (prefers-color-scheme: dark) {
  :root {
    --color-teal: #3DBCC2;
    --color-amber: #F0A500;
    --color-coral: #FF8577;
    --color-bg: #0F1A2E;
    --color-bg-alt: #162036;
    --color-bg-surface: #1C2D4A;
    --color-text: #E8E6E3;
    --color-text-inverse: #0F1A2E;
    --color-text-on-accent: #0F1A2E;

    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.2);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.25);
    --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.3);
  }
}

/* --- Reset & Base --- */

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

html {
  font-size: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Contain the off-canvas .nav-list (position:fixed, parked off-screen right)
     so it can't add horizontal scroll. clip (not hidden) keeps the sticky
     header / scroll JS working — no scroll container is created. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
  /* clip (not hidden): prevents horizontal scroll WITHOUT making body a scroll
     container — which would break the sticky header + window scroll detection. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.2;
  color: var(--color-navy);
}

@media (prefers-color-scheme: dark) {
  h1, h2, h3, h4 {
    color: var(--color-text);
  }
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

a {
  color: var(--color-teal);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--color-navy);
}

@media (prefers-color-scheme: dark) {
  a:hover {
    color: var(--color-text);
  }
}

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

/* --- Skip to Content --- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 1000;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-navy);
  color: var(--color-text-inverse);
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
}

.skip-link:focus {
  top: 0;
}

/* --- Focus Indicators --- */

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

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: var(--space-sm) var(--space-xl);
  font-family: var(--font-subheading);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-primary {
  background-color: var(--color-action);
  color: var(--color-text-on-accent);
  border-color: var(--color-action);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-action-hover);
  color: var(--color-text-on-accent);
  border-color: var(--color-action-hover);
}

/* CTA buttons invert on hover to an outlined look (per Susan) — matches the hero
   "Tell Us About Your Project" style. Teal reads on the navy/dark CTA sections
   (5.3:1 light / 6.0:1 dark). Higher specificity beats the .btn-primary:hover above. */
.btn-primary.cta-button:hover,
.btn-primary.cta-button:focus-visible {
  background-color: transparent;
  color: var(--color-action);
  border-color: var(--color-action);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-teal);
  border-color: var(--color-teal);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-teal);
  color: var(--color-text-inverse);
}

/* Custom-apps CTA: equal whitespace above the button and below it
   (matches the 32px top margin of the .app-tabs showcase that follows). */
.solution-cta {
  margin-block-start: 32px;
}

/* --- Utilities --- */

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

/* --- Print --- */

@media print {
  *,
  *::before,
  *::after {
    background: transparent;
    color: #000;
    box-shadow: none;
    text-shadow: none;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  nav,
  .skip-link {
    display: none;
  }
}

/* --- Container --- */

.container {
  inline-size: 100%;
  max-inline-size: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-xl);
  }
}

/* --- Site Header --- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  block-size: var(--header-height);
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid color-mix(in srgb, var(--color-navy) 10%, transparent);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* Hide-on-scroll (Headroom): slide the bar up out of view when scrolling down;
   JS removes .is-hidden when scrolling up or near the top. */
.site-header.is-hidden {
  transform: translateY(-100%);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: 100%;
}

.site-logo {
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
}

.site-logo img {
  display: block;
  height: 48px;
  width: auto;
}

@media (prefers-color-scheme: dark) {
  .site-logo {
    color: var(--color-text);
  }
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  inline-size: 24px;
  block-size: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-fast);
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  inset-inline-start: 0;
}

.nav-toggle-icon::before {
  inset-block-start: -7px;
}

.nav-toggle-icon::after {
  inset-block-start: 7px;
}

.nav-list {
  position: fixed;
  inset-block-start: var(--header-height);
  inset-inline-end: 0;
  inline-size: min(75vw, 20rem);
  block-size: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-xl);
  background: var(--color-bg);
  list-style: none;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-base), visibility var(--transition-base);
  box-shadow: var(--shadow-lg);
}

.nav-list.is-open {
  transform: translateX(0);
  visibility: visible;
}

.nav-link {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-subheading);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-navy);
  border-radius: var(--radius-sm);
}

@media (prefers-color-scheme: dark) {
  .nav-link {
    color: var(--color-text);
  }
}

.nav-link:hover {
  color: var(--color-teal);
}

.nav-link--active {
  color: var(--color-teal);
}

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

  .nav-list {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    inline-size: auto;
    block-size: auto;
    padding: 0;
    background: none;
    transform: none;
    visibility: visible;
    box-shadow: none;
  }

  .nav-link {
    padding: var(--space-sm) var(--space-sm);
  }

  .nav-link--active {
    border-block-end: 2px solid var(--color-teal);
    border-radius: 0;
  }

}

/* --- Hero --- */

.hero-dark {
  padding-block: var(--space-2xl) var(--space-3xl);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--hero-gradient-mid) 60%, var(--color-teal) 100%);
  color: #FFFFFF;
  overflow: hidden;
  --hero-teal: #3DBCC2;
  --hero-amber: #F0A500;
  --hero-coral: #FF8577;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-2xl);
}

.hero-content {
  text-align: start;
}

.hero-dark .hero-heading {
  color: #FFFFFF;
}

.hero-heading {
  font-size: clamp(var(--text-2xl), 5vw, 3.5rem);
  line-height: 1.1;
  margin-block-end: var(--space-md);
}

.hero-heading-accent {
  color: var(--hero-amber);
}

/* Hero CTA keeps the .btn-secondary outlined look + .page-hero-cta squared
   shape. Locally remap the teal token the outline rules read to the bright
   --hero-teal (#3DBCC2) so border, text, and hover-fill read clearly on the
   dark hero in both colour schemes. */
.hero-dark .page-hero-cta {
  /* Brightened teal so the outline text/border clear AA over the hero gradient
     (the mid stop drops #3DBCC2 to 4.07:1; #63D0D5 is 5.11 on mid / 6.65 on navy). */
  --color-teal: #63D0D5;
}

/* Hover fills with the teal; use dark text (was white ≈2.3:1 in light mode). */
.hero-dark .page-hero-cta:hover,
.hero-dark .page-hero-cta:focus-visible {
  color: var(--color-text-on-accent);
}

.hero-subheading {
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  line-height: 1.5;
  margin-block-end: var(--space-lg);
  max-inline-size: 42ch;
  opacity: 0.9;
}

.hero-industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  list-style: none;
  margin-block-end: var(--space-xl);
}

.hero-industry {
  padding: 0.3em 1em;
  border: 1px solid color-mix(in srgb, #FFFFFF 40%, transparent);
  border-radius: var(--radius-full);
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  color: #FFFFFF;
  opacity: 0.85;
}

.hero-cta {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--text-lg);
  border-radius: var(--radius-full);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-action) 40%, transparent);
}

.hero-visual {
  display: none;
  min-block-size: 20rem;
}

@media (min-width: 768px) {
  .hero-inner {
    grid-template-columns: 1fr 1fr;
  }

  .hero-visual {
    display: block;
  }
}

/* --- Hero Animation --- */

.hero-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-shape,
.hero-ring,
.hero-line,
.hero-glow {
  transform-box: fill-box;
  transform-origin: center;
}

.hero-shape {
  animation:
    heroFadeIn 0.8s ease-out var(--delay, 0s) both,
    heroBreathe var(--dur, 6s) ease-in-out 2s infinite;
}

.hero-ring {
  animation:
    heroDraw 1.2s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both,
    heroPulse var(--pulse-dur, 8s) ease-in-out 2s infinite;
}

.hero-line {
  animation:
    heroDraw 1s cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both,
    heroBreathe var(--dur, 6s) ease-in-out 2s infinite;
}

.hero-glow {
  animation:
    heroFadeIn 0.6s ease-out var(--delay, 0s) both,
    heroPulse var(--pulse-dur, 5s) ease-in-out 2s infinite;
}

@keyframes heroFadeIn {
  from { opacity: 0; scale: 0.5; }
  to { opacity: var(--o, 1); scale: 1; }
}

@keyframes heroBreathe {
  0%, 100% {
    translate: var(--bx1, 0px) var(--by1, 0px);
    rotate: var(--br1, 0deg);
  }
  50% {
    translate: var(--bx2, 0px) var(--by2, 0px);
    rotate: var(--br2, 0deg);
  }
}

@keyframes heroDraw {
  from { stroke-dashoffset: var(--circumference); opacity: 0; }
  20% { opacity: var(--o, 1); }
  to { stroke-dashoffset: 0; opacity: var(--o, 1); }
}

@keyframes heroPulse {
  0%, 100% { scale: 1; }
  50% { scale: var(--ps, 1.05); }
}

.hero-layer {
  transition: transform 0.6s ease-out;
}

/* index hero SVG — per-element animation params (moved off inline style for CSP, F1) */
.hero-el-1  { --circumference: 880; --delay: 0.3s; --o: 0.2; --ps: 1.03; --pulse-dur: 8s; }
.hero-el-2  { --circumference: 565; --delay: 0.5s; --o: 0.25; --ps: 1.04; --pulse-dur: 7s; }
.hero-el-3  { --delay: 0s; --o: 0.8; --ps: 1.15; --pulse-dur: 5s; }
.hero-el-4  { --delay: 0.9s; --o: 0.5; --dur: 6.5s; --bx1: 18px; --by1: -10px; --bx2: -28px; --by2: 8px; }
.hero-el-5  { --delay: 0.7s; --o: 0.45; --dur: 7s; --bx1: -15px; --by1: 12px; --bx2: 22px; --by2: -18px; }
.hero-el-6  { --delay: 0.8s; --o: 0.5; --dur: 6s; --bx1: 12px; --by1: -18px; --bx2: -10px; --by2: 25px; }
.hero-el-7  { --delay: 1.0s; --o: 0.4; --dur: 7.5s; --bx1: -20px; --by1: -8px; --bx2: 28px; --by2: 6px; }
.hero-el-8  { --delay: 1.1s; --o: 0.4; --dur: 6.8s; --bx1: 15px; --by1: 18px; --bx2: -20px; --by2: -22px; }
.hero-el-9  { --delay: 0.4s; --o: 0.75; --dur: 5.8s; --bx1: 3px; --by1: -22px; --bx2: -2px; --by2: 18px; }
.hero-el-10 { --delay: 0.6s; --o: 0.7; --dur: 6.2s; --bx1: -18px; --by1: 12px; --bx2: 14px; --by2: -10px; }
.hero-el-11 { --delay: 0.6s; --o: 0.7; --dur: 6.2s; --bx1: 18px; --by1: 12px; --bx2: -14px; --by2: -10px; }
.hero-el-12 { --circumference: 75; --delay: 0.8s; --o: 0.4; --dur: 5.8s; --bx1: 1px; --by1: -10px; --bx2: -1px; --by2: 8px; }
.hero-el-13 { --circumference: 70; --delay: 0.9s; --o: 0.35; --dur: 6.2s; --bx1: -8px; --by1: 5px; --bx2: 6px; --by2: -4px; }
.hero-el-14 { --circumference: 70; --delay: 0.9s; --o: 0.35; --dur: 6.2s; --bx1: 8px; --by1: 5px; --bx2: -6px; --by2: -4px; }
.hero-el-15 { --delay: 0.3s; --o: 0.55; --dur: 5.5s; --bx1: -3px; --by1: 4px; --bx2: 3px; --by2: -4px; --br1: -5deg; --br2: 5deg; }
.hero-el-16 { --delay: 1.0s; --o: 0.45; --dur: 6.8s; --bx1: -12px; --by1: -15px; --bx2: 10px; --by2: 12px; }
.hero-el-17 { --delay: 1.1s; --o: 0.4; --dur: 7s; --bx1: 14px; --by1: -12px; --bx2: -10px; --by2: 14px; }
.hero-el-18 { --delay: 0.5s; --o: 0.65; --dur: 5.5s; --bx1: 2px; --by1: -18px; --bx2: -2px; --by2: 15px; --br1: -4deg; --br2: 3deg; }
.hero-el-19 { --delay: 0.8s; --o: 0.6; --dur: 6.3s; --bx1: 20px; --by1: -10px; --bx2: -18px; --by2: 8px; }
.hero-el-20 { --delay: 0.9s; --o: 0.55; --dur: 6.8s; --bx1: -18px; --by1: -8px; --bx2: 20px; --by2: 8px; }
.hero-el-21 { --delay: 1.0s; --o: 0.5; --dur: 6.5s; --bx1: 12px; --by1: 20px; --bx2: -14px; --by2: -18px; }
.hero-el-22 { --delay: 1.1s; --o: 0.4; --dur: 7.2s; --bx1: -14px; --by1: 18px; --bx2: 16px; --by2: -16px; }
.hero-el-23 { --circumference: 42; --delay: 1.0s; --o: 0.4; --dur: 6.5s; --bx1: 10px; --by1: 12px; --bx2: -10px; --by2: -14px; }

/* --- Section Headers --- */

.section-header {
  text-align: center;
  max-inline-size: var(--max-width-narrow);
  margin-inline: auto;
  margin-block-end: var(--space-3xl);
}

.section-heading {
  margin-block-end: var(--space-md);
}

.section-subheading {
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  color: var(--color-text);
  line-height: 1.5;
}

/* --- Services --- */

.services {
  padding-block: 4rem;
  background: var(--color-bg-alt);
}

.services-grid {
  display: grid;
  gap: 2rem;
  list-style: none;
  grid-template-columns: 1fr;
}

.services-header {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3rem;
  text-align: start;
}

.services-header .section-heading {
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  margin-block-end: 0;
}

.service-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-surface);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .service-card:hover {
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
  }
}

.service-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  height: 100%;
}

.service-card-image {
  background: var(--color-bg-alt);
  overflow: hidden;
}

.service-card-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

@media (hover: hover) {
  .service-card:hover .service-card-image img {
    filter: blur(6px);
  }
}

.service-card:focus-within .service-card-image img {
  filter: blur(6px);
}

.service-card-image--web { background: color-mix(in srgb, var(--color-teal) 15%, var(--color-bg-alt)); }
.service-card-image--ai { background: color-mix(in srgb, var(--color-navy) 15%, var(--color-bg-alt)); }
.service-card-image--integrate { background: color-mix(in srgb, var(--color-teal) 15%, var(--color-bg-alt)); }
.service-card-image--visibility { background: color-mix(in srgb, var(--color-coral) 15%, var(--color-bg-alt)); }
.service-card-image--product { background: color-mix(in srgb, var(--color-teal) 10%, var(--color-bg-alt)); }
.service-card-image--apps { background: color-mix(in srgb, var(--color-navy) 10%, var(--color-bg-alt)); }
.service-card-image--writing { background: color-mix(in srgb, var(--color-coral) 10%, var(--color-bg-alt)); }

.service-card--web { --card-pastel: color-mix(in srgb, var(--color-teal) 15%, var(--color-bg-alt)); }
.service-card--ai { --card-pastel: color-mix(in srgb, var(--color-navy) 15%, var(--color-bg-alt)); }
.service-card--product { --card-pastel: color-mix(in srgb, var(--color-teal) 10%, var(--color-bg-alt)); }
.service-card--apps { --card-pastel: color-mix(in srgb, var(--color-purple) 12%, var(--color-bg-alt)); }
.service-card--writing { --card-pastel: color-mix(in srgb, var(--color-coral) 10%, var(--color-bg-alt)); }

.service-card-body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  background: var(--card-pastel, var(--color-bg-surface));
  max-height: 92px;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, var(--card-pastel, var(--color-bg-surface)) 38%);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}

@media (hover: hover) {
  .service-card:hover::after {
    opacity: 1;
  }
}

.service-card:focus-within::after {
  opacity: 1;
}

.service-card-body {
  z-index: 2;
}

@media (hover: hover) {
  .service-card:hover .service-card-body {
    max-height: 260px;
  }
}

.service-card:focus-within .service-card-body {
  max-height: 260px;
}

.service-title {
  font-family: var(--font-subheading);
  padding: 1rem 2rem;
  margin: 0;
  height: 92px;
}

.service-card-overlay {
  padding: 0 2rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

@media (hover: hover) {
  .service-card:hover .service-card-overlay {
    max-height: 10rem;
    padding-block-end: 2rem;
    opacity: 1;
  }
}

.service-card:focus-within .service-card-overlay {
  max-height: 10rem;
  padding-block-end: 2rem;
  opacity: 1;
}

.service-description {
  margin-block-end: 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.service-tag {
  padding: 0.2em 0.7em;
  border: 1px solid color-mix(in srgb, var(--color-teal) 40%, transparent);
  border-radius: 9999px;
  font-family: var(--font-subheading);
  font-size: 0.75rem;
  color: var(--color-teal);
}

@media (max-width: 767px) {
  .service-card {
    max-width: 320px;
    width: 100%;
    justify-self: center;
  }

  .service-card-body {
    position: relative;
    z-index: 2;
    margin-block-start: -73px;
    max-height: none;
    overflow: visible;
    border-radius: 8px 8px 0 0;
  }

  .service-card-body::before {
    display: none;
  }

  .service-title {
    height: auto;
  }

  .service-card-overlay {
    max-height: none;
    opacity: 1;
    padding-block-end: 2rem;
  }

  .service-card:hover {
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
  }

  .service-card::after {
    display: none;
  }

  .service-card:hover .service-card-image img {
    filter: none;
  }
}

@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 320px);
    justify-content: center;
  }

  .services-header {
    width: 320px;
    padding-inline-end: 1rem;
  }

  .service-card {
    width: 320px;
    height: 420px;
  }

  .service-card-image {
    position: absolute;
    inset: 0;
  }

}

@media (min-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 320px);
  }
}

@media (prefers-color-scheme: dark) {
  .service-card {
    border: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  }

}

/* --- Value Proposition (image band with gradient overlay) --- */

.value-prop {
  position: relative;
  background-image: url('/img/Why_RGA.webp');
  background-color: var(--color-navy-tint);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-block: 80px;
  overflow: hidden;
}

.value-prop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--hero-gradient-mid) 60%, var(--color-teal) 100%);
  opacity: 0.82;
  z-index: 1;
}

.value-prop-inner {
  position: relative;
  z-index: 2;
}

.value-prop-heading {
  text-align: center;
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  margin-block-end: 0;
}

.value-prop-divider {
  width: 40px;
  height: 3px;
  background: #ffffff;
  margin: 16px auto 24px;
}

.value-grid {
  display: grid;
  gap: 24px;
  list-style: none;
  grid-template-columns: 1fr;
}

.value-item {
  padding: 24px;
  border-inline-start: none;
  border-radius: 0;
  text-align: center;
}

.value-icon {
  width: 64px;
  height: 64px;
  color: #ffffff;
  margin-inline: auto;
  margin-block-end: 20px;
  opacity: 0.9;
}

.value-title {
  font-family: var(--font-subheading);
  font-size: 1.125rem;
  color: #ffffff;
  margin-block-end: 8px;
}

.value-description {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--text-sm);
  line-height: 1.6;
}

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

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

  .value-title {
    min-height: 2.7em;
  }
}

/* --- Social Proof --- */

.social-proof {
  padding-block: var(--space-3xl);
  background: var(--color-bg-alt);
  text-align: center;
}

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

.marquee {
  overflow: hidden;
  margin-block-start: 3rem;
  max-width: 56rem;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

@media (min-width: 768px) {
  .marquee {
    padding-inline: 4rem;
  }
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 35s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.proof-logos {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 3rem;
  list-style: none;
  padding-inline: 1.5rem;
}

.proof-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.proof-item img {
  block-size: 2.5rem;
  inline-size: auto;
  max-inline-size: 8rem;
  object-fit: contain;
}

/* --- Breadcrumb (interior pages) --- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
  list-style: none;
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  margin-block-end: 16px;
}

/* Breadcrumb sits on the light pastel hero -> dark (navy) text.
   80% navy keeps a softly muted look while clearing WCAG AA (>=4.5:1) on the pastel. */
.breadcrumb a {
  color: color-mix(in srgb, var(--color-navy) 80%, transparent);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--color-navy);
  text-decoration: underline;
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline-end: 0.4em;
  color: color-mix(in srgb, var(--color-navy) 35%, transparent);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-navy);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .breadcrumb a {
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
  }
  .breadcrumb a:hover,
  .breadcrumb [aria-current="page"] {
    color: var(--color-text);
  }
  .breadcrumb li + li::before {
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
  }
}

/* --- Page Hero (interior pages) --- */

/* Pastel hero: tints of the card colour (major) easing to a tint of an analogous brand
   neighbour (minor) in the far corner. 135deg keeps the lightest tint top-left under the text;
   the minor only blooms bottom-right. */
.page-hero {
  padding-block: 64px 56px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--page-accent)   var(--hero-tint-1), var(--color-bg-alt)) 0%,
    color-mix(in srgb, var(--page-accent)   var(--hero-tint-2), var(--color-bg-alt)) 58%,
    color-mix(in srgb, var(--page-accent-2) var(--hero-tint-minor), var(--color-bg-alt)) 100%);
}

/* AI: pure navy goes violet-grey when tinted into the warm bg, so the hero uses a clean
   steel-blue major (navy's lighter sibling) -> cyan. Navy stays the page accent (badges,
   breadcrumb) so the page still matches the navy card. */
.page--ai .page-hero {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--color-blue) var(--hero-tint-1), var(--color-bg-alt)) 0%,
    color-mix(in srgb, var(--color-blue) var(--hero-tint-2), var(--color-bg-alt)) 58%,
    color-mix(in srgb, var(--page-accent-2) var(--hero-tint-minor), var(--color-bg-alt)) 100%);
}

/* Dark hero (matches homepage .hero-dark) — opt-in for legal/info pages. */
.page-hero--dark {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--hero-gradient-mid) 60%, var(--color-teal) 100%);
  color: #FFFFFF;
}
.page-hero--dark .page-hero-heading {
  color: #FFFFFF;
}
.page-hero--dark .page-hero-subheading {
  color: #FFFFFF;
  opacity: 0.9;
}
.page-hero--dark .breadcrumb a {
  color: color-mix(in srgb, #FFFFFF 75%, transparent);
}
.page-hero--dark .breadcrumb a:hover,
.page-hero--dark .breadcrumb [aria-current="page"] {
  color: #FFFFFF;
}
.page-hero--dark .breadcrumb li + li::before {
  color: color-mix(in srgb, #FFFFFF 45%, transparent);
}

.page-hero-heading {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
  margin-block-end: 16px;
}

.page-hero-subheading {
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  color: var(--color-text);
  opacity: 0.85;
  max-inline-size: 55ch;
  line-height: 1.5;
}

/* --- Portfolio --- */

.portfolio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 64px;
  background: var(--color-bg);
}

/* Ambient brush strokes scattered across the section, in the page accent. The
   SVG is an alpha mask, so background-color sets the tint and follows
   --page-accent. Faint, full-bleed, behind all content. isolation:isolate
   contains the negative z-index above the section's own background. */
.portfolio::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--page-accent);
  opacity: 0.08;
  -webkit-mask: url(/img/decorative/brush-strokes.svg) top center / 100% 100% no-repeat;
  mask: url(/img/decorative/brush-strokes.svg) top center / 100% 100% no-repeat;
}

@media (prefers-color-scheme: dark) {
  .portfolio::before {
    opacity: 0.14;
  }
}

.portfolio-entries {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.portfolio-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.portfolio-entry + .portfolio-entry {
  border-block-start: 1px solid color-mix(in srgb, var(--color-navy) 10%, transparent);
  padding-block-start: 48px;
}

@media (prefers-color-scheme: dark) {
  .portfolio-entry + .portfolio-entry {
    border-block-start-color: color-mix(in srgb, var(--color-text) 15%, transparent);
  }
}

.portfolio-screenshot {
  container-type: inline-size;
  aspect-ratio: 1857 / 1448;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-bg-alt);
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent);
  box-shadow: var(--shadow-md);
}

.portfolio-screenshot img {
  width: 100%;
  height: auto;
}

.portfolio-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-block: 4px;
}

/* Shared accent badge — any interior page can reuse .tag.
   Text uses --page-accent; safe for teal (portfolio). NOTE: when amber/coral/purple
   pages are built, verify badge-text contrast and darken via color-mix if it fails AA. */
.tag,
.portfolio-sector {
  display: inline-block;
  align-self: flex-start;
  padding: 0.3em 0.95em;
  border: 1px solid color-mix(in srgb, var(--page-accent) 45%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--page-accent) 8%, transparent);
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--page-accent);
}

.portfolio-name {
  font-size: var(--text-2xl);
  line-height: 1.15;
  margin: 0;
}

.portfolio-description {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text);
}

.portfolio-built {
  padding-block-start: 6px;
  border-block-start: 1px solid color-mix(in srgb, var(--color-navy) 8%, transparent);
}

@media (prefers-color-scheme: dark) {
  .portfolio-built {
    border-block-start-color: color-mix(in srgb, var(--color-text) 12%, transparent);
  }
}

.portfolio-built-label {
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--page-accent);
  margin-block-end: 8px;
}

.portfolio-built p,
.portfolio-built ul {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-text);
  opacity: 0.85;
}

.portfolio-built ul {
  padding-inline-start: 1.2em;
}

.portfolio-built li {
  margin-block-end: 4px;
}

/* Secondary CTA tied to the page accent (teal on portfolio). Scoped so the global
   .btn-secondary contract is untouched. Future non-teal pages: confirm hover fill /
   text contrast before reusing this on amber/coral. */
.portfolio-link {
  align-self: flex-start;
  margin-block-start: 8px;
  color: var(--page-accent);
  border-color: var(--page-accent);
}

.portfolio-link:hover,
.portfolio-link:focus-visible {
  background-color: var(--page-accent);
  color: var(--color-text-inverse);
  border-color: var(--page-accent);
}

@media (min-width: 768px) {
  .portfolio-entry {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
  }

  .portfolio-entry:nth-child(even) .portfolio-screenshot {
    order: 1;
  }

  /* Box height follows the text column. The img is taken out of flow so the
     screenshot contributes zero intrinsic height; the grid row is then sized by
     the text column, and align-items:stretch grows the box to match. The img
     keeps its natural (tall) height anchored to the top, so it overflows the box
     and the JS auto-scroll (translateY) still reveals the full page. */
  .portfolio-screenshot {
    position: relative;
    aspect-ratio: auto;
  }

  .portfolio-screenshot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
}

@media (min-width: 1024px) {
  .portfolio-entry {
    grid-template-columns: 45fr 45fr;
  }
}

/* --- Testimonials --- */

.testimonials {
  padding-block: 96px;
  background: var(--color-bg-alt);
}

.testimonials-heading {
  text-align: center;
  margin-block-end: 64px;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
}

/* Editorial pull-quote: no card, quote leads (CSS order), accent hanging quote mark,
   attribution sits below a hairline accent rule. */
.testimonial {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial p {
  order: 2;
  position: relative;
  padding-block-start: 28px;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.6;
}

.testimonial p::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: -2px;
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 3.25rem;
  line-height: 1;
  color: color-mix(in srgb, var(--page-accent) 55%, transparent);
}

.testimonial-header {
  order: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 24px;
  padding-block-end: 20px;
  border-block-end: 1px solid color-mix(in srgb, var(--page-accent) 30%, transparent);
}

.testimonial-attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial cite {
  font-family: var(--font-subheading);
  font-style: normal;
  font-weight: 600;
  color: var(--color-navy);
}

@media (prefers-color-scheme: dark) {
  .testimonial cite {
    color: var(--color-text);
  }
}

.testimonial-org {
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  color: var(--page-accent);
}

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

/* Shared hairline accent divider for editorial sections (interior pages). */
.rule-accent {
  border: 0;
  block-size: 1px;
  background: color-mix(in srgb, var(--page-accent) 30%, transparent);
  margin-block: var(--space-2xl);
}

/* --- CTA Section --- */

.cta-section {
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--color-navy);
  color: var(--color-text-inverse);
  text-align: center;
}

.cta-inner {
  max-inline-size: var(--max-width-narrow);
  margin-inline: auto;
}

.cta-heading {
  color: var(--color-text-inverse);
  font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
  margin-block-end: var(--space-md);
}

.cta-subheading {
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  margin-block-end: var(--space-xl);
  opacity: 0.9;
}

.cta-button {
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--text-lg);
  border-radius: var(--radius-full);
}

@media (prefers-color-scheme: dark) {
  .cta-section {
    background: var(--color-bg-surface);
  }

  .cta-heading {
    color: var(--color-text);
  }

  .cta-subheading {
    color: var(--color-text);
  }
}

/* --- Site Footer --- */

.site-footer {
  padding-block: var(--space-xl) var(--space-xl);
  background: var(--color-navy);
  color: var(--color-text-inverse);
}

.footer-inner {
  display: grid;
  gap: var(--space-2xl);
}

.footer-tagline {
  margin-block-start: var(--space-md);
  font-size: var(--text-sm);
  opacity: 0.8;
}

.footer-logo {
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-inverse);
}

.footer-logo img {
  display: block;
  height: 72px;
  width: auto;
}

.footer-nav-heading {
  font-family: var(--font-subheading);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: var(--space-md);
  color: var(--color-text-inverse);
}

.footer-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-nav a {
  display: inline-block;
  padding-block: 8px;
  color: color-mix(in srgb, var(--color-text-inverse) 80%, transparent);
  text-decoration: none;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--color-text-inverse);
}

.footer-bottom {
  padding-block-start: var(--space-xl);
  border-block-start: 1px solid color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
  text-align: center;
  font-size: var(--text-sm);
  opacity: 0.7;
}

@media (min-width: 768px) {
  .footer-inner {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .footer-bottom {
    grid-column: 1 / -1;
  }
}

@media (prefers-color-scheme: dark) {
  .site-footer {
    background: var(--color-bg-alt);
    color: var(--color-text);
    border-block-start: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  }

  .footer-logo,
  .footer-nav-heading {
    color: var(--color-text);
  }

  .footer-nav a {
    color: color-mix(in srgb, var(--color-text) 80%, transparent);
  }

  .footer-nav a:hover {
    color: var(--color-text);
  }

  .footer-bottom {
    border-block-start-color: color-mix(in srgb, var(--color-text) 20%, transparent);
  }
}

/* --- Scroll Animations --- */

.fade-in {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- AI Solutions page (page--ai) ---------------------------------------- *
 * Scoped components for /ai. Reuses .container, .page-hero, .breadcrumb,
 * .tag, .btn(.btn-secondary), .cta-section, .fade-in. The page accent is navy
 * (set by .page--ai). Navy is AA-safe as text in light mode; in dark mode it
 * is too dark on the dark bg, so we lift --page-accent to a light steel-blue
 * for this page only (see dark-mode block below). */

.page-hero-cta {
  margin-block-start: 24px;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--text-lg);
  border-radius: var(--radius-sm);
}

/* Overview menu */
.solutions-overview {
  padding-block: 64px;
  background: var(--color-bg);
}

.solutions-overview-intro {
  max-inline-size: 62ch;
  margin-block-start: 16px;
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  line-height: 1.5;
}

/* Overview (mobile/tablet): heading + intro, then the stacked card list. */
.solutions-overview-inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* On mobile the circle wrapper collapses so its cards join the stacked flow. */
.solution-circle {
  display: contents;
}

/* The pie SVG only renders in the desktop two-column layout. */
.pie-svg {
  display: none;
}

.solutions-overview-text {
  text-align: center;
}

.solutions-overview-text .section-heading {
  font-size: clamp(var(--text-xl), 6vw, var(--text-2xl));
}

.solutions-overview-text .solutions-overview-intro {
  margin-inline: auto;
}

.solution-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: 32px;
  list-style: none;
}

/* Desktop: title + subtitle on the left, a filled pie of the service tiles on the
   right. Below 1024px (and at high zoom) it collapses to the stacked card list. */
@media (min-width: 1024px) {
  .solutions-overview-inner {
    flex-direction: row;
    align-items: center;
    gap: 56px;
  }

  .solutions-overview-text {
    flex: 1 1 0;
    text-align: start;
  }

  .solutions-overview-text .section-heading {
    font-size: var(--text-3xl);
    line-height: 1.15;
  }

  .solutions-overview-text .solutions-overview-intro {
    margin-block-start: 20px;
    margin-inline: 0;
    max-inline-size: 46ch;
  }

  .solution-circle {
    flex: 1 1 0;
    display: block;
    position: relative;
    inline-size: 100%;
    max-inline-size: 460px;
    aspect-ratio: 1;
    margin-inline: auto;
  }

  /* Filled pie: 4 wedges in page-scheme blues, split by thin page-coloured gaps,
     lifted with a soft shadow. A white icon + title sits in each wedge. */
  .pie-svg {
    display: block;
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    filter: drop-shadow(0 6px 16px rgb(0 0 0 / 0.12));
  }

  /* Each wedge carries its own blue outline (stroke), so when a wedge scales up
     on hover its border grows outward with it. Adjacent radial edges sit on top
     of each other and the arcs form the ring, so the resting pie looks unchanged. */
  .pie-seg {
    fill: var(--color-bg-surface);
    stroke: var(--page-accent);
    stroke-width: 1;
    stroke-linejoin: round;
    transform-box: view-box;
    transform-origin: 50% 50%;
    transition: transform var(--transition-base), fill var(--transition-base);
  }

  /* Hovering/focusing a card grows its matching wedge radially: the tip stays
     pinned at the circle centre (transform-origin) and the opening angle is
     unchanged, so only the arc pushes outward past the ring. Same nth index. */
  .solution-circle:has(.solution-nav > li:nth-child(1) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(1),
  .solution-circle:has(.solution-nav > li:nth-child(1) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(1) {
    transform: scale(1.2);
    fill: var(--color-bg-surface);
  }

  .solution-circle:has(.solution-nav > li:nth-child(2) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(2),
  .solution-circle:has(.solution-nav > li:nth-child(2) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(2) {
    transform: scale(1.2);
    fill: var(--color-bg-surface);
  }

  .solution-circle:has(.solution-nav > li:nth-child(3) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(3),
  .solution-circle:has(.solution-nav > li:nth-child(3) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(3) {
    transform: scale(1.2);
    fill: var(--color-bg-surface);
  }

  .solution-circle:has(.solution-nav > li:nth-child(4) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(4),
  .solution-circle:has(.solution-nav > li:nth-child(4) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(4) {
    transform: scale(1.2);
    fill: var(--color-bg-surface);
  }

  .solution-circle .solution-nav {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
  }

  .solution-circle .solution-nav > li {
    position: absolute;
    inline-size: 112px;
    transform: translate(-50%, -50%);
    transition: inset var(--transition-base), inline-size var(--transition-base);
  }

  /* Labels sit at each wedge's centroid; summary is collapsed until hover/focus. */
  .solution-circle .solution-nav-summary {
    display: block;
    margin-block-start: 4px;
    font-size: 0.75rem;
    opacity: 0;
    max-block-size: 0;
    overflow: hidden;
    transition: opacity var(--transition-base), max-block-size var(--transition-base);
  }

  .solution-circle .solution-nav > li:nth-child(1) { inset-block-start: 28.9%; inset-inline-start: 71.1%; }
  .solution-circle .solution-nav > li:nth-child(2) { inset-block-start: 71.1%; inset-inline-start: 71.1%; }
  .solution-circle .solution-nav > li:nth-child(3) { inset-block-start: 71.1%; inset-inline-start: 28.9%; }
  .solution-circle .solution-nav > li:nth-child(4) { inset-block-start: 28.9%; inset-inline-start: 28.9%; }

  /* On hover the wedge scales 1.2 from the centre, so its centroid moves outward.
     Re-anchor the label to the enlarged wedge's centroid (base offset from 50% × 1.2). */
  .solution-circle .solution-nav > li:nth-child(1):hover,
  .solution-circle .solution-nav > li:nth-child(1):focus-within { inset-block-start: 24.7%; inset-inline-start: 75.3%; }
  .solution-circle .solution-nav > li:nth-child(2):hover,
  .solution-circle .solution-nav > li:nth-child(2):focus-within { inset-block-start: 75.3%; inset-inline-start: 75.3%; }
  .solution-circle .solution-nav > li:nth-child(3):hover,
  .solution-circle .solution-nav > li:nth-child(3):focus-within { inset-block-start: 75.3%; inset-inline-start: 24.7%; }
  .solution-circle .solution-nav > li:nth-child(4):hover,
  .solution-circle .solution-nav > li:nth-child(4):focus-within { inset-block-start: 24.7%; inset-inline-start: 24.7%; }

  .solution-circle .solution-nav-card {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    text-align: center;
  }

  /* No card box: the label widens, raises above its neighbours, and the text
     fills the enlarged white wedge directly (no background/shadow/rounded-rect). */
  .solution-circle .solution-nav > li:hover,
  .solution-circle .solution-nav > li:focus-within {
    inline-size: 150px;
    z-index: 2;
  }

  /* Pie cards are chrome-less: neutralise the stacked-card hover lift/shadow that
     leaks in from the base .solution-nav-card:hover rule (equal specificity, later
     in source). Higher specificity here (0,3,0) keeps the pie card flat on hover. */
  .solution-circle .solution-nav-card:hover,
  .solution-circle .solution-nav-card:focus-visible {
    background: none;
    border-color: transparent;
    box-shadow: none;
    transform: none;
  }

  .solution-circle .solution-nav-card:hover .solution-nav-summary,
  .solution-circle .solution-nav-card:focus-visible .solution-nav-summary {
    opacity: 1;
    max-block-size: 6em;
  }

  .solution-circle .solution-nav-icon {
    inline-size: 30px;
    block-size: 30px;
  }

  .solution-circle .solution-nav-title {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.2;
  }
}

/* Reduced motion: still reveal the summary, but don't scale the wedge or move the
   label. Since the wedge stays at its resting size, the label stays at its resting
   centroid so the text never drifts off the (unscaled) wedge. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .solution-circle:has(.solution-nav > li:nth-child(1) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(1),
  .solution-circle:has(.solution-nav > li:nth-child(1) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(1),
  .solution-circle:has(.solution-nav > li:nth-child(2) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(2),
  .solution-circle:has(.solution-nav > li:nth-child(2) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(2),
  .solution-circle:has(.solution-nav > li:nth-child(3) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(3),
  .solution-circle:has(.solution-nav > li:nth-child(3) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(3),
  .solution-circle:has(.solution-nav > li:nth-child(4) .solution-nav-card:hover) .pie-svg .pie-seg:nth-of-type(4),
  .solution-circle:has(.solution-nav > li:nth-child(4) .solution-nav-card:focus-visible) .pie-svg .pie-seg:nth-of-type(4) {
    transform: none;
  }

  .solution-circle .solution-nav > li {
    transition: none;
  }

  /* Keep the label at its resting position (no recenter outward). */
  .solution-circle .solution-nav > li:nth-child(1):hover,
  .solution-circle .solution-nav > li:nth-child(1):focus-within { inset-block-start: 28.9%; inset-inline-start: 71.1%; }
  .solution-circle .solution-nav > li:nth-child(2):hover,
  .solution-circle .solution-nav > li:nth-child(2):focus-within { inset-block-start: 71.1%; inset-inline-start: 71.1%; }
  .solution-circle .solution-nav > li:nth-child(3):hover,
  .solution-circle .solution-nav > li:nth-child(3):focus-within { inset-block-start: 71.1%; inset-inline-start: 28.9%; }
  .solution-circle .solution-nav > li:nth-child(4):hover,
  .solution-circle .solution-nav > li:nth-child(4):focus-within { inset-block-start: 28.9%; inset-inline-start: 28.9%; }
}

.solution-nav-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--color-bg-surface);
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.solution-nav-card:hover,
.solution-nav-card:focus-visible {
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--page-accent) 45%, transparent);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .solution-nav-card:hover,
  .solution-nav-card:focus-visible {
    transform: none;
  }
}

.solution-nav-icon {
  flex-shrink: 0;
  inline-size: 40px;
  block-size: 40px;
  color: var(--page-accent);
}

.solution-nav-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.solution-nav-title {
  font-family: var(--font-subheading);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-navy);
}

.solution-nav-summary {
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text);
  opacity: 0.85;
}

/* .solution-nav is a single full-width column (wide, short rows) at all sizes. */

/* Deep solution sections */
.solution {
  padding-block: 64px;
  background: var(--color-bg);
  scroll-margin-block-start: calc(var(--header-height) + var(--space-md));
}

/* Alternating band uses the page colour theme (a soft tint), not the warm grey. */
.solution--alt {
  background: color-mix(in srgb, var(--page-accent) 6%, var(--color-bg));
}

/* AI page: navy muddies as a pastel, so tint with the hero's steel-blue instead. */
.page--ai .solution--alt {
  background: color-mix(in srgb, var(--color-blue) 9%, var(--color-bg));
}

/* AI Search Visibility: plain page bg (like the FAQ section) so it doesn't read
   the same as the blue-tinted Workflow section above it. id beats .solution--alt. */
#ai-visibility {
  background: var(--color-bg);
}

/* AI-page FAQ takes the blue tint of the Workflow/solution--alt sections. */
.page--ai .faq-section {
  background: color-mix(in srgb, var(--color-blue) 9%, var(--color-bg));
}

.solution-detail--narrow {
  max-inline-size: 68ch;
}

/* Section kicker — reads as part of the heading, not a pill/button. */
.solution-eyebrow {
  display: block;
  margin-block-end: 8px;
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--page-accent);
}

.solution-lead {
  margin-block-start: 12px;
  font-size: var(--text-lg);
  line-height: 1.6;
}

.solution-apps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin-block: 20px;
}

.solution-apps li {
  position: relative;
  padding-inline-start: 28px;
  font-family: var(--font-subheading);
  line-height: 1.5;
}

.solution-apps li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.3em;
  inline-size: 1em;
  block-size: 1em;
  background-color: var(--page-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (min-width: 600px) {
  .solution-apps {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
  }
}

/* AI Search Visibility: text on the left, checklist in a right-hand rail (desktop). */
@media (min-width: 900px) {
  .solution-split {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 22rem);
    gap: 48px;
    align-items: start;
  }

  .solution-split .solution-apps {
    grid-template-columns: 1fr;
    margin-block: 0;
  }
}

/* Chatbots section: checklist on the left, comic speech bubble on the right. */
.chat-split {
  display: grid;
  gap: 28px;
  margin-block-start: 20px;
  align-items: center;
}

/* Keep the checkmarks in a single left-hand column even on wide screens. */
.chat-split .solution-apps {
  grid-template-columns: 1fr;
  margin-block: 0;
}

/* AI agent chat bubble: bot avatar + a message bubble with one squared
   corner pointing back to the avatar, like a messaging-app assistant reply. */
.chat-bubble {
  display: flex;
  align-items: flex-end;
  gap: 14px;
}

.chat-avatar {
  flex: 0 0 auto;
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--page-accent) 14%, var(--color-bg-surface));
  color: var(--page-accent);
}

.chat-avatar svg {
  inline-size: 26px;
  block-size: 26px;
}

.chat-message {
  position: relative;
  background: var(--color-bg-surface);
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent);
  border-radius: 18px;
  border-end-end-radius: 4px;
  padding: 14px 20px 16px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.chat-sender {
  display: block;
  margin-block-end: 4px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--page-accent);
}

@media (min-width: 860px) {
  .chat-split {
    grid-template-columns: 1fr 1fr;
  }
}

/* Metric chips */
.solution-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  margin-block: 20px 8px;
}

.solution-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.solution-stat-value {
  font-family: var(--font-subheading);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.1;
  color: var(--page-accent);
}

.solution-stat-label {
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  color: var(--color-text);
  opacity: 0.8;
}

.solution-stat-context {
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text);
  opacity: 0.75;
}

/* Result callout */
.solution-result {
  margin-block-start: 20px;
  padding: 16px 20px;
  background: color-mix(in srgb, var(--page-accent) 8%, transparent);
  border-inline-start: 3px solid var(--page-accent);
  border-radius: 8px;
}

/* In a media split the result is a direct grid child — span both columns so the
   closing line runs the full page width under the text + figure. */
.solution--media .solution-result {
  grid-column: 1 / -1;
  margin-block-start: 4px;
}

.solution-result-label {
  display: block;
  margin-block-end: 4px;
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--page-accent);
}

.solution-result p {
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Section action buttons (secondary, tied to page accent — same contract as .portfolio-link) */
.solution-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: 24px;
}

.solution-link {
  color: var(--page-accent);
  border-color: var(--page-accent);
}

.solution-link:hover,
.solution-link:focus-visible {
  background-color: var(--page-accent);
  color: var(--color-text-inverse);
  border-color: var(--page-accent);
}

/* Media sections: text + figure, two columns on desktop */
.solution-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}

.solution-figure {
  margin: 0;
}

.solution-screenshot {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-bg-alt);
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent);
  box-shadow: var(--shadow-md);
}

.solution-screenshot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.solution-screenshot--phone {
  aspect-ratio: 9 / 16;
  max-inline-size: 300px;
  margin-inline: auto;
}

.solution-screenshot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-md);
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--page-accent) 80%, var(--color-text));
  background:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--page-accent) 6%, transparent) 0,
      color-mix(in srgb, var(--page-accent) 6%, transparent) 12px,
      transparent 12px,
      transparent 24px),
    var(--color-bg-alt);
  border: 2px dashed color-mix(in srgb, var(--page-accent) 35%, transparent);
}

.solution-figcaption {
  margin-block-start: 10px;
  font-family: var(--font-subheading);
  font-size: var(--text-sm);
  color: var(--color-text);
  opacity: 0.75;
  text-align: center;
}

@media (min-width: 768px) {
  .solution--media .solution-inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: 48px;
  }

  .solution--media.solution--reverse .solution-figure {
    order: -1;
  }
}

/* Custom AI Applications: tabbed showcase. Tab labels name all three apps;
   the active tab's panel shows its description + buttons. No auto-rotation. */
.app-tabs {
  margin-block: 32px 0;
}

.app-tablist {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  position: relative;
  z-index: 1;
}

/* Folder tab: rounded top, recessed (darker) when inactive. */
.app-tab {
  font-family: var(--font-subheading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-bg-alt);
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent);
  border-block-end: none;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  padding: 10px 18px;
  min-block-size: 40px;
  cursor: pointer;
  margin-block-end: -1px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.app-tab:hover {
  color: var(--page-accent);
  background: color-mix(in srgb, var(--page-accent) 8%, var(--color-bg-alt));
}

/* Active tab pulls forward: matches the panel colour, taller, and overlaps the
   panel's top border so the two read as one connected folder. */
.app-tab[aria-selected="true"] {
  color: var(--page-accent);
  background: var(--color-bg-surface);
  padding-block: 14px;
  position: relative;
  z-index: 2;
}

.app-tab:focus-visible {
  outline: 2px solid var(--page-accent);
  outline-offset: -3px;
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
}

/* Narrow screens: three equal-width tabs share the row, labels wrap to two
   lines as needed, so nothing scrolls off-screen. */
@media (max-width: 560px) {
  .app-tablist {
    flex-wrap: nowrap;
    gap: 3px;
  }

  .app-tab {
    flex: 1 1 0;
    min-inline-size: 0;
    text-align: center;
    white-space: normal;
    line-height: 1.2;
    font-size: var(--text-sm);
    padding-inline: 8px;
  }

  /* Last tab reaches the right edge, so square its top-right and the panel's.
     Higher specificity than the base .app-panel/.app-card rules below. */
  .app-tabs .app-panel {
    border-start-end-radius: 0;
  }
}

.app-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  background: var(--color-bg-surface);
  border: 1px solid color-mix(in srgb, var(--page-accent) 18%, transparent);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.app-panel {
  margin-block-start: 0;
  min-block-size: 200px;
  position: relative;
  z-index: 0;
  border-start-start-radius: 0;
  border-start-end-radius: 12px;
}

.app-panel[hidden] {
  display: none;
}

.app-card-desc {
  font-size: var(--text-base);
  line-height: 1.6;
}

.app-card-link {
  margin-block-start: auto;
}

.app-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: auto;
}

/* AI page: dark-mode accent lift. Navy (#1B365D, the page accent) is not
   overridden for dark mode globally and would be near-invisible on the dark
   bg, so raise --page-accent to a light steel-blue for legible badges, list
   markers, result rules, stats, and secondary buttons. */
@media (prefers-color-scheme: dark) {
  .page--ai {
    --page-accent: #8AB6E8;
    --page-accent-2: #C2A9E0;
  }

  .page--ai .solution-nav-title {
    color: var(--color-text);
  }
}

/* --- Contact form --- */

.contact-section {
  padding-block: 56px 72px;
  background: var(--color-bg);
}

.contact-layout {
  max-inline-size: 40rem;
  margin-inline: auto;
}

.contact-intro {
  font-family: var(--font-subheading);
  font-size: 1.0625rem;
  color: var(--color-text);
  opacity: 0.85;
  margin-block-end: 8px;
}

.contact-response-note {
  font-size: 0.9375rem;
  color: var(--color-text);
  opacity: 0.7;
  margin-block-end: 32px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* `hidden` must win over the flex display above (else the form stays
   visible after a successful submit, and the success panel sits below it). */
.contact-form[hidden] {
  display: none;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-family: var(--font-subheading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-required {
  color: var(--color-red-deep);
  font-weight: 400;
}

.form-optional {
  font-weight: 400;
  opacity: 0.6;
}

.field-hint {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: 0;
}

.form-input,
.form-select,
.form-textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg-surface);
  border: 1.5px solid color-mix(in srgb, var(--color-text) 25%, transparent);
  border-radius: 8px;
  padding: 12px 14px;
  width: 100%;
  min-height: 48px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  opacity: 1;
}

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

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 35%, transparent);
}

.form-field--error .form-input,
.form-field--error .form-select,
.form-field--error .form-textarea,
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

.form-field--error .form-input:focus,
.form-input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-coral) 35%, transparent);
}

.field-error {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-error);
}

.field-error:empty {
  display: none;
}

/* Honeypot: visually and from-AT hidden, still in the DOM for bots */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-feedback {
  border-radius: 8px;
  padding: 16px 18px;
  font-family: var(--font-subheading);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.form-feedback:empty {
  display: none;
}

.form-feedback--success {
  background: color-mix(in srgb, var(--color-teal) 14%, var(--color-bg-surface));
  border: 1.5px solid var(--color-teal);
  color: color-mix(in srgb, var(--color-teal) 70%, var(--color-text));
}

.form-feedback--error {
  background: color-mix(in srgb, var(--color-coral) 12%, var(--color-bg-surface));
  border: 1.5px solid var(--color-error);
  color: var(--color-error);
}

.contact-form .btn {
  align-self: flex-start;
}

/* Success panel — replaces the form after a successful submit. */
.form-success-panel {
  text-align: center;
  padding: 40px 24px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-teal) 8%, var(--color-bg-surface));
  border: 1.5px solid color-mix(in srgb, var(--color-teal) 40%, transparent);
}

.form-success-panel[hidden] {
  display: none;
}

.form-success-heading {
  font-size: 1.5rem;
  margin-block: 0 12px;
  color: var(--color-text);
}

.form-success-heading:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 4px;
}

.form-success-text {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
  max-inline-size: 34rem;
  margin: 0 auto 28px;
}

.form-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* --- Content / legal / info pages --- */

.content-section {
  padding-block: 24px;
  background: var(--color-bg);
}

@media (max-width: 640px) {
  .content-section { padding-block: 18px; }
}

/* --- FAQ accordion — native <details>, full-width, zero JS, CSP-safe --- */
.faq-section {
  padding-block: 48px;
}

.faq-list {
  margin-block-start: 24px;
  border-block-start: 1px solid color-mix(in srgb, var(--color-navy) 15%, transparent);
}

.faq-item {
  border-block-end: 1px solid color-mix(in srgb, var(--color-navy) 15%, transparent);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 8px;          /* generous tap target (>=44px tall) */
  cursor: pointer;
  list-style: none;           /* drop default marker (Firefox) */
}
.faq-item summary::-webkit-details-marker { display: none; }  /* Safari/Chrome */

.faq-q {
  margin: 0;
  font-size: var(--text-lg);
}

/* Chevron drawn from borders; rotates on open. */
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 11px;
  block-size: 11px;
  margin-inline-end: 6px;
  border-inline-end: 2px solid var(--color-teal);
  border-block-end: 2px solid var(--color-teal);
  transform: rotate(45deg);           /* down = collapsed */
  transition: transform var(--transition-fast);
}
.faq-item[open] summary::after {
  transform: rotate(-135deg);         /* up = expanded */
}

.faq-item summary:hover .faq-q,
.faq-item summary:focus-visible .faq-q {
  color: var(--color-teal);
}
.faq-item summary:focus-visible {
  outline: 3px solid var(--color-teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.faq-a {
  padding: 0 8px 22px;
}
.faq-a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* The section's own padding sets the gap; kill the leading heading/paragraph
   top margin so it doesn't compound into a huge space between sections. */
.content-prose > :first-child {
  margin-block-start: 0;
}

.content-prose {
  max-inline-size: 44rem;
  margin-inline: auto;
}

/* Block sections (cards, steps, checklist) use a wider column so they fill the
   laptop, while plain reading prose stays at the narrower readable measure. */
.content-prose--wide {
  max-inline-size: 64rem;
}

.content-prose > * + * {
  margin-block-start: 20px;
}

/* Tighter paragraph rhythm on phones; 20px reads as too airy on narrow screens */
@media (max-width: 640px) {
  .content-prose > * + * {
    margin-block-start: 16px;
  }
}

.content-prose h2 {
  margin-block-start: 40px;
  font-size: var(--text-xl);
}

.content-prose h3 {
  margin-block-start: 28px;
  font-size: var(--text-lg);
}

.content-prose ul,
.content-prose ol {
  padding-inline-start: 24px;
}

.content-prose li + li {
  margin-block-start: 8px;
}

.content-prose li {
  padding-inline-start: 4px;
}

.content-updated {
  font-size: 0.9375rem;
  color: var(--color-text);
  opacity: 0.7;
  font-style: italic;
}

/* --- Info-page enhancements --------------------------------------------
   Used on how-we-work, accessibility, privacy, terms to break up text
   walls. Colours via tokens (dark-mode aware); spacing/sizing explicit.
   Pairs with reused .cta-section bands and .fade-in scroll reveals. */

/* Intro lead paragraph, left-aligned and full-column-width to match the rest */
.prose-lead {
  font-family: var(--font-subheading);
  font-size: 1.25rem;
  line-height: 1.6;
  text-align: left;
}

/* Short accent rule under a section heading */
.prose-divider {
  inline-size: 3rem;
  block-size: 3px;
  border: 0;
  background: var(--color-teal);
  margin: 0.75rem 0 1.5rem;
}

/* Highlighted callout box (legal-page lead paragraphs) */
.callout {
  background: var(--color-bg-alt);
  border-inline-start: 4px solid var(--color-teal);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}

.callout > :first-child { margin-block-start: 0; }
.callout > :last-child { margin-block-end: 0; }

/* Numbered process steps */
.process-steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.process-step {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-bg-surface);
  border-radius: 16px;
  border-inline-start: 4px solid var(--color-teal);
}

.process-num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 9999px;
  background: var(--color-navy);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
}

.process-step h3 {
  margin-block: 0 0.25rem;
  font-size: 1.25rem;
}

.process-step p { margin-block: 0; }

/* Light card grid (service categories, accessibility features) */
.feature-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.feature-card {
  padding: 1.5rem;
  background: var(--color-bg-surface);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--color-text) 12%, transparent);
}

.feature-card h3 {
  margin-block: 0 0.5rem;
  font-size: 1.125rem;
}

.feature-card p { margin-block: 0; }

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

/* A 3-card group reads best as a single row on desktop (scoped so other
   feature-card grids with 4/8 cards keep their even 2-col layout). */
@media (min-width: 900px) {
  .feature-cards--trio { grid-template-columns: repeat(3, 1fr); }
}

/* Ticked benefit list */
.checklist {
  list-style: none;
  padding: 0;
}

/* Two columns on wider screens so the short benefit items fill the row */
@media (min-width: 640px) {
  .content-prose--wide .checklist {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 32px;
  }
}

.checklist li {
  position: relative;
  padding-inline-start: 1.75rem;
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-teal);
  font-weight: 700;
}

/* --- Print --- */
/* !important is used here intentionally, as in the reduced-motion reset above:
   print needs to override themed colours and hide interactive chrome. */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.4;
  }

  .skip-link,
  .site-header,
  .site-footer,
  .nav-toggle,
  .hero-visual,
  .breadcrumb,
  .form-honeypot,
  .service-card-image,
  .portfolio::before {
    display: none !important;
  }

  main {
    padding: 0 !important;
  }

  /* Surface destination URLs for real links (skip in-page and JS anchors). */
  a[href^="http"]::after,
  a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }

  h1, h2, h3, h4 {
    page-break-after: avoid;
    break-after: avoid;
  }

  img, figure, table, blockquote, .form-field {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  p, blockquote, li {
    orphans: 3;
    widows: 3;
  }
}