/* =====================================================================
   Right Design — "Aqua Studio" design system
   A love letter to peak-2003 Apple: glossy lickable gel, candy gradients,
   pinstripe canvas, brushed metal chrome, and wet-floor reflections.
   Hand-written, system-font only, no webfonts, fully usable without JS.
   Honors prefers-reduced-motion. Every class hook from the original markup
   is preserved — this restyles, it does not re-scaffold.
   ===================================================================== */

:root {
  /* ---- Brand palette (candy-saturated) ---- */
  --brand-red: #c01f26;
  --brand-red-dark: #8d0a10;
  --brand-red-bright: #e2474d;
  --ink: #1b2330;
  --ink-2: #243044;
  --slate: #4a4e57;
  --amber: #f3b53f;
  --amber-deep: #d8901a;
  --green: #46c37b;
  --green-deep: #1f9b58;
  --aqua: #3a9be0;          /* a wink of classic Aqua blue for cool accents */
  --paper: #eef1f6;
  --paper-2: #e6eaf1;
  --line: #d9dee7;
  --line-strong: #c6ccd6;
  --muted: #616875;   /* darkened from #6b7280 to clear WCAG AA 4.5:1 on tinted backgrounds */
  --white: #ffffff;

  /* Semantic */
  --bg: #f4f6fa;
  --text: #232c3a;
  --text-soft: #4a5260;
  --accent: var(--brand-red);
  --accent-hover: var(--brand-red-dark);

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Lucida Grande", Roboto, Helvetica, Arial, sans-serif;
  --fs-base: 1.0625rem;
  --lh-base: 1.65;

  /* Spacing scale */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radii — Aqua loved a generous, pill-soft corner */
  --r-sm: 9px;  --r-md: 16px;  --r-lg: 26px;  --r-xl: 34px;  --r-full: 999px;

  /* Shadows + gloss primitives */
  --shadow-sm: 0 1px 2px rgba(27,35,48,.07), 0 2px 6px rgba(27,35,48,.07);
  --shadow-md: 0 6px 16px rgba(27,35,48,.10), 0 18px 40px rgba(27,35,48,.10);
  --shadow-lg: 0 24px 70px rgba(27,35,48,.22);
  /* Reusable "gel" inset: bright top rim + soft inner floor shading */
  --gloss-rim: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -14px 22px rgba(27,35,48,.05);
  --glass-edge: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.35);

  /* Pinstripe + canvas wash, the signature Aqua window backdrop */
  --pinstripe: repeating-linear-gradient(0deg, rgba(27,35,48,.022) 0 1px, transparent 1px 5px);

  --container: 1180px;
  --container-narrow: 800px;
  --header-h: 78px;
}

/* ---- Reset / base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text);
  /* Cool, faintly luminous canvas with a hairline pinstripe — Aqua's desktop. */
  background:
    var(--pinstripe),
    radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #f4f6fa 38%, #e8ecf3 100%) fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  width: 100%;
  max-width: 100%;
  /* Kill horizontal pan/blank-space on mobile. MUST be `clip`, not `hidden`:
     `hidden` makes the root a scroll container and breaks the sticky header. */
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
h1, h2, h3, h4 { line-height: 1.12; color: var(--ink); font-weight: 700; letter-spacing: -.022em; }
p { color: var(--text-soft); }
strong { color: var(--ink); }
ul, ol { padding-left: 1.2em; }
::selection { background: rgba(192,31,38,.18); }

/* ---- Accessibility -------------------------------------------------- */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }
:focus-visible { outline: 3px solid var(--brand-red); outline-offset: 2px; border-radius: 3px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout --------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.container-narrow { max-width: var(--container-narrow); }
section { padding-block: var(--sp-8); position: relative; }
.section-tight { padding-block: var(--sp-7); }

/* Paper sections float as soft pinstriped "sheets" over the desktop wash. */
.bg-paper {
  background:
    var(--pinstripe),
    linear-gradient(180deg, #ffffff 0%, #f3f5fa 100%);
  border-block: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(27,35,48,.04);
}
.bg-ink {
  background:
    radial-gradient(120% 120% at 80% -20%, #2c3a52 0%, #1b2330 55%, #141a25 100%);
  color: #fff; position: relative; isolation: isolate;
}
.bg-ink::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px);
}
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: #fff; }
.bg-ink p { color: rgba(255,255,255,.82); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 800;
  color: var(--brand-red); margin-bottom: var(--sp-3);
}
/* Little gel pip before eyebrows — a candy bullet. */
.eyebrow::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7b80, var(--brand-red) 60%, var(--brand-red-dark));
  box-shadow: 0 0 0 3px rgba(192,31,38,.14), inset 0 1px 1px rgba(255,255,255,.7);
}
.section-title { font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.6rem); letter-spacing: -.028em; }
.section-lead { font-size: 1.16rem; color: var(--text-soft); max-width: 56ch; }
.section-head-center { text-align: center; max-width: 760px; margin-inline: auto; margin-bottom: var(--sp-7); }
.section-head-center .eyebrow { justify-content: center; }
.section-head-center .section-lead { margin-inline: auto; }

/* ---- Buttons : the lickable Aqua gel ------------------------------- */
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-weight: 700; font-size: 1rem; line-height: 1; cursor: pointer;
  padding: .92rem 1.55rem; border-radius: var(--r-full); border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .15s ease;
  text-align: center; letter-spacing: -.005em;
}
/* The specular sweep — a bright glass highlight across the top half. */
.btn::before {
  content: ""; position: absolute; left: 4%; right: 4%; top: 2px; height: 46%;
  border-radius: var(--r-full);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.06));
  pointer-events: none; z-index: 1; opacity: .9;
  transition: opacity .2s ease;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn:hover::before { opacity: 1; }

.btn-primary {
  background: linear-gradient(180deg, #e0474d 0%, #c8232a 50%, #ad131a 51%, #c5212a 100%);
  color: #fff; border-color: rgba(120,8,12,.7);
  text-shadow: 0 -1px 0 rgba(120,8,12,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -10px 16px rgba(120,8,12,.35),
    0 8px 18px rgba(192,31,38,.36),
    0 1px 2px rgba(27,35,48,.3);
}
.btn-primary:hover { color: #fff; filter: brightness(1.06) saturate(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -10px 16px rgba(120,8,12,.4), 0 12px 28px rgba(192,31,38,.5), 0 2px 4px rgba(27,35,48,.32); }
/* On a red surface (hero, page title bar) a red primary button melts into the
   background. Frame it with a bright border + dark separating halo so its edge
   stays legible on crimson while it remains the dominant red primary action. */
.hero .btn-primary,
.page-title-bar .btn-primary {
  border-color: rgba(255,255,255,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -10px 16px rgba(120,8,12,.4),
    0 0 0 2px rgba(120,8,12,.45),
    0 10px 24px rgba(50,3,5,.5);
}
.hero .btn-primary:hover,
.page-title-bar .btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 16px rgba(120,8,12,.45),
    0 0 0 2px rgba(120,8,12,.55),
    0 14px 30px rgba(50,3,5,.55);
}

/* The white Aqua gel — a glassy lozenge split by a hard mid-line, with a
   cool reflective lower half, exactly like an OS X push button. */
.btn-light, .btn-ghost {
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfdff 49%, #d7e2ef 50%, #e4ecf6 74%, #f4f8fc 100%);
  color: var(--ink); border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.65),
    inset 0 -9px 14px rgba(120,150,190,.20),
    0 5px 14px rgba(27,35,48,.15),
    0 1px 2px rgba(27,35,48,.14);
}
/* Brighter, glassier specular dome on the white gel than the default sweep. */
.btn-light::before, .btn-ghost::before {
  top: 1px; left: 3%; right: 3%; height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.55) 60%, rgba(255,255,255,0) 100%);
  opacity: 1;
}
.btn-light:hover, .btn-ghost:hover {
  color: var(--brand-red); filter: brightness(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -9px 14px rgba(120,150,190,.26),
    0 9px 22px rgba(27,35,48,.20),
    0 1px 2px rgba(27,35,48,.14);
}
.btn-block { width: 100%; }
.btn .rd-icon { flex: none; position: relative; z-index: 2; }
/* Inline icon baseline fix: an inline SVG defaults to the text baseline, which
   leaves a few px of descender drift next to text. Center it so every inline
   rd_icon() sits level with the words it accompanies (see CRITERIA §13). */
.rd-icon { vertical-align: middle; }

/* ---- Header / nav : dark brushed-metal control surface ------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 18px rgba(20,26,37,.35);
}
/* Brushed-metal bar lives on ::before so .site-header is never a containing
   block — the fixed off-canvas mobile nav (a descendant) must anchor to the
   viewport, which a filter/transform/backdrop-filter on the header would break. */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, rgba(255,255,255,0) 1px 3px),
    linear-gradient(180deg, #313c50 0%, #232d3f 50%, #1a2230 100%);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { width: auto; height: 48px; filter: drop-shadow(0 2px 5px rgba(0,0,0,.45)); transition: transform .2s ease; }
.brand:hover .brand-logo { transform: scale(1.03); }
.primary-nav { display: flex; align-items: center; gap: 1.25rem; }
.nav-list { display: flex; align-items: center; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: .97rem; font-weight: 600; color: rgba(255,255,255,.86);
  padding: .55rem .8rem; border-radius: var(--r-full); white-space: nowrap;
  transition: color .15s ease, background .18s ease, box-shadow .18s ease;
}
/* Hover lifts a translucent glass pill behind the link. */
.nav-link:hover {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.25);
}
.nav-list a[aria-current="page"] { color: var(--amber); }
.nav-list .is-active > .nav-link { color: var(--amber); }
.nav-toggle { color: #fff; }
.caret { transition: transform .2s ease; }

/* Portfolio nav item — a subtle "go look" enticement: a faint amber underline
   that brightens on hover and a trailing arrow that nudges right. Scoped to
   .nav-portfolio so the shared .nav-link styling is untouched. */
.nav-portfolio { position: relative; gap: .35rem; }
.nav-portfolio .nav-portfolio-arrow {
  transition: transform .2s ease; opacity: .8;
}
.nav-portfolio::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .32rem; height: 2px;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(245,166,35,0), var(--amber), rgba(245,166,35,0));
  opacity: .55; transform: scaleX(.62); transform-origin: center;
  transition: opacity .2s ease, transform .2s ease;
}
.nav-portfolio:hover::after,
.nav-portfolio:focus-visible::after { opacity: 1; transform: scaleX(1); }
.nav-portfolio:hover .nav-portfolio-arrow { transform: translateX(3px); opacity: 1; }
/* The underline affordance only makes sense on the horizontal desktop bar; in
   the off-canvas mobile panel the item is a full-width row, so suppress it. */
@media (max-width: 860px) {
  .nav-portfolio::after { display: none; }
}

/* Dropdown — a floating glossy sheet */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 256px;
  background: linear-gradient(180deg, #ffffff, #f4f6fa);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-md), var(--glass-edge); padding: .5rem; list-style: none; margin: 0;
  /* A long menu (e.g. Industry Marketing) must never run off the bottom of a
     short viewport — cap to the space below the sticky header and scroll.
     No overscroll-behavior:contain here: when the menu is short (the common
     case) it isn't a scroll container, and `contain` makes the browser swallow
     the wheel anyway — so the page won't scroll while the pointer rests on a
     menu entry. Letting a long menu chain at its scroll boundary is the lesser
     evil than a dead wheel. */
  max-height: calc(100vh - var(--header-h) - 28px); overflow-y: auto;
  /* On the rare short viewport where even the column layout overflows, the
     scrollbar should read as a slim glass rail, not a chunky default gutter. */
  scrollbar-width: thin; scrollbar-color: rgba(27,35,48,.28) transparent;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.98); transform-origin: top left;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.dropdown::-webkit-scrollbar { width: 9px; }
.dropdown::-webkit-scrollbar-track { background: transparent; }
.dropdown::-webkit-scrollbar-thumb {
  background: rgba(27,35,48,.26); border-radius: var(--r-full);
  border: 2px solid transparent; background-clip: content-box;
}
.dropdown::-webkit-scrollbar-thumb:hover { background: rgba(27,35,48,.42); background-clip: content-box; }
/* Open state is driven solely by aria-expanded (JS syncs it on hover/focus
   for desktop) so a second click reliably closes the menu — a CSS :hover
   trigger would keep it visible and fight the click-to-close. */
.dropdown-toggle[aria-expanded="true"] + .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.dropdown li { margin: 0; }
.dropdown a {
  display: block; padding: .62rem .85rem; border-radius: var(--r-sm); color: var(--ink); font-weight: 600; font-size: .96rem;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.dropdown a:hover {
  background: linear-gradient(180deg, #e0474d, #b51d23); color: #fff; transform: translateX(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}
.dropdown a[aria-current="page"] { color: var(--brand-red); background: var(--paper); }

/* The Industry Marketing list is long (17 industries + "All industries"). As a
   single column it became a tall, thin, scroll-trapped strip. On desktop it
   fans into two columns so the whole menu fits on screen at virtually any
   viewport height — no scrollbar — while the "All industries →" link spans the
   full width as a footer row. (Mobile keeps the single-column accordion below.) */
@media (min-width: 861px) {
  #industry-menu {
    min-width: 440px;
    display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .35rem; align-content: start;
  }
  #industry-menu li:last-child {
    grid-column: 1 / -1; margin-top: .3rem; padding-top: .35rem;
    border-top: 1px solid var(--line);
  }
}

/* Phone CTA — a candy-red gel chip */
.btn-phone {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #e0474d 0%, #c8232a 50%, #ad131a 51%, #c5212a 100%);
  color: #fff; padding: .62rem 1.1rem; border-radius: var(--r-full);
  font-weight: 700; font-size: .95rem; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  border: 1px solid rgba(120,8,12,.7); text-shadow: 0 -1px 0 rgba(120,8,12,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 6px 14px rgba(192,31,38,.34), 0 1px 2px rgba(27,35,48,.25);
  transition: filter .2s ease, box-shadow .2s ease, transform .15s ease;
}
.btn-phone::before { content:""; position:absolute; left:5%; right:5%; top:2px; height:45%; border-radius:var(--r-full); background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.05)); pointer-events:none; }
.btn-phone:hover { color: #fff; filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 22px rgba(192,31,38,.46); }
.btn-phone .rd-icon, .btn-phone span { position: relative; z-index: 1; }

.nav-toggle {
  display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  cursor: pointer; color: #fff; padding: .5rem; border-radius: var(--r-sm);
  /* Frosted gel pill so the icon reads clearly against the dark brushed-metal bar. */
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(0,0,0,.3);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.nav-toggle:hover { background: linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.12)); }
/* Three-bar glyph that morphs into an X (state keyed off [aria-expanded]).
   Bars animate top + rotate so the hamburger folds into a crossing pair. */
.nav-toggle-bars { position: relative; display: inline-block; width: 22px; height: 16px; }
.nav-toggle-bars .bar {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor; box-shadow: 0 1px 1px rgba(0,0,0,.4);
  transform-origin: center; transition: transform .3s cubic-bezier(.2,.8,.2,1), top .3s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
}
.nav-toggle-bars .bar:nth-child(1) { top: 2px; }
.nav-toggle-bars .bar:nth-child(2) { top: 7px; }
.nav-toggle-bars .bar:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; transform: scaleX(.1); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* ---- Hero : a candy color field with a glass console ---------------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: var(--sp-7) var(--sp-9);
  /* Saturated crimson light field — the iPod-silhouette-ad energy. */
  background:
    radial-gradient(95% 80% at 78% 8%, rgba(255,170,120,.55) 0%, rgba(255,150,90,0) 46%),
    radial-gradient(120% 120% at 18% 110%, #6f0c12 0%, rgba(111,12,18,0) 55%),
    linear-gradient(160deg, #d8333a 0%, #b51d23 38%, #8d0a10 100%);
  color: #fff;
}
/* The hero photo becomes a faint textural ghost, not the subject. */
.hero-bg {
  position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%;
  opacity: .16; mix-blend-mode: soft-light;
}
/* Glossy light streaks + pinstripe sheen sweeping over the color field. */
.hero-overlay {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px),
    radial-gradient(60% 90% at 90% 100%, rgba(0,0,0,.28), transparent 60%);
}
/* A single specular sweep glides across on load — a polished entrance, then
   it rests. No perpetual animation, so the compositor stays idle afterward. */
.hero::after {
  content: ""; position: absolute; z-index: -1; top: -40%; left: 0;
  width: 55%; height: 120%; transform: translateX(-160%) rotate(13deg);
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  animation: heroSheen 2.4s cubic-bezier(.22,.61,.36,1) .35s 1 both;
  pointer-events: none;
}
@keyframes heroSheen {
  0% { transform: translateX(-160%) rotate(13deg); opacity: 0; }
  35% { opacity: 1; }
  100% { transform: translateX(420%) rotate(13deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; opacity: 0; } }

.hero-inner { max-width: 760px; color: #fff; position: relative; }
.hero h1 {
  color: #fff; font-size: clamp(2.3rem, 1.3rem + 4vw, 4.1rem); line-height: 1.04; letter-spacing: -.035em;
  text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 2px 18px rgba(80,5,8,.45);
}
.hero .hero-sub { color: rgba(255,255,255,.94); font-size: 1.24rem; margin-top: var(--sp-4); max-width: 54ch; text-shadow: 0 1px 8px rgba(80,5,8,.3); }
/* Hero pills — frosted glass gel chips */
.hero-pills { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: var(--sp-5); list-style: none; padding: 0; }
.hero-pills li {
  font-size: .85rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.1));
  border: 1px solid rgba(255,255,255,.4); padding: .45rem .95rem; border-radius: var(--r-full);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 6px rgba(80,5,8,.18);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: var(--sp-6); }
/* Light buttons over the red field get extra lift. */
/* On the crimson hero, keep the Aqua gel's inner sheen but cast a deeper,
   warm-toned drop shadow so the glassy white pill lifts off the red field. */
.hero-actions .btn-light {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.65),
    inset 0 -9px 14px rgba(120,150,190,.20),
    0 8px 22px rgba(60,4,6,.38),
    0 1px 2px rgba(40,2,4,.3);
}
.hero-actions .btn-light:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -9px 14px rgba(120,150,190,.26),
    0 12px 28px rgba(60,4,6,.48),
    0 1px 2px rgba(40,2,4,.3);
}
.hero-trust { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: 2rem; color: rgba(255,255,255,.9); font-size: .95rem; }
.hero-trust span { position: relative; }
.hero-trust strong {
  color: #ffe39a; font-size: 1.7rem; display: block; letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(120,8,12,.4), 0 2px 14px rgba(255,190,90,.35);
}

/* ---- Stat band : glossy console of figures ------------------------- */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center;
  background: linear-gradient(180deg, #ffffff, #eef1f7);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), var(--glass-edge); overflow: hidden;
}
.stat-band .stat { padding: 1.6rem 1rem; border-right: 1px solid rgba(27,35,48,.07); position: relative; }
.stat-band .stat::before { content:""; position:absolute; inset:0 0 50% 0; background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0)); pointer-events:none; }
.stat-band .stat:last-child { border-right: 0; }
.stat-band .stat strong {
  display: block; font-size: clamp(1.9rem, 1.2rem + 2.2vw, 2.8rem); letter-spacing: -.03em;
  background: linear-gradient(180deg, #e0474d, #9c0f15);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--brand-red);
}
.stat-band .stat span { color: var(--muted); font-size: .95rem; position: relative; }

/* ---- Glossy card family -------------------------------------------- */
/* Shared "gel sheet": white-to-paper gradient, bright top rim, soft float,
   and a glass sheen ribbon across the top edge. */
.service-card, .feature, .review-card, .price-card,
.city-card, .team-card, .cat-card, .note-card {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.service-card::before, .feature::before, .review-card::before, .price-card::before,
.city-card::before, .team-card::before, .cat-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 42%;
  border-radius: var(--r-lg) var(--r-lg) 50% 50% / var(--r-lg) var(--r-lg) 18% 18%;
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0));
  pointer-events: none; z-index: 0;
}
.service-card > *, .feature > *, .review-card > *, .price-card > *,
.city-card > *, .team-card > *, .cat-card > * { position: relative; z-index: 1; }

/* ---- Service cards -------------------------------------------------- */
.service-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* When the current service is excluded the block shows three cards — give them
   their own row of three so they don't stretch under an empty fourth column.
   Desktop only; the tablet/mobile breakpoints below keep their 2- and 1-up grids. */
@media (min-width: 1081px) {
  .service-cards[data-count="3"] { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin-inline: auto; }
}
.service-card { display: flex; flex-direction: column; gap: .6rem; color: var(--ink); padding: 1.7rem; text-decoration: none; }
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1); border-color: rgba(192,31,38,.4); color: var(--ink); }
.service-card-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
  border-radius: var(--r-md); color: #fff;
  background: linear-gradient(180deg, #e0474d, #b51d23 55%, #9c0f15);
  border: 1px solid rgba(120,8,12,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 12px rgba(120,8,12,.3), 0 5px 12px rgba(192,31,38,.32);
}
.service-card-icon::after { content:""; position:absolute; }
.service-card h3 { font-size: 1.22rem; }
.service-card p { font-size: .96rem; flex: 1; }
.service-card-link { color: var(--brand-red); font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: .3rem; transition: gap .18s ease; }
.service-card:hover .service-card-link { gap: .55rem; }

/* ---- Feature grid / benefits --------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature { padding: 1.7rem; }
.feature:hover { transform: translateY(-5px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1); border-color: rgba(192,31,38,.4); }
.feature .feature-icon {
  color: #fff; margin-bottom: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: var(--r-md);
  background: linear-gradient(180deg, #e0474d, #b51d23 55%, #9c0f15);
  border: 1px solid rgba(120,8,12,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 12px rgba(120,8,12,.3), 0 5px 12px rgba(192,31,38,.3);
}
.feature h3 { font-size: 1.14rem; margin-bottom: .4rem; }
.feature p { font-size: .96rem; }

.checklist { list-style: none; padding: 0; display: grid; gap: .9rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-soft); }
.checklist .rd-icon {
  flex: none; color: #fff; margin-top: 1px; width: 22px; height: 22px; padding: 3px; border-radius: 50%;
  background: linear-gradient(180deg, #5fd08c, var(--green-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(31,155,88,.4); box-sizing: border-box;
}

/* ---- Split / prose -------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-7); align-items: center; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 1.5rem; }
.prose ul { color: var(--text-soft); display: grid; gap: .5rem; }

/* ---- Industry problem → solution flow ------------------------------ */
/* A "before → after" narrative: a muted, recessed challenge card flows
   through a brand badge into an elevated, accented solution card. */
.ps-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1.4rem; }
.ps-card { position: relative; border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 1.7vw, 2.4rem); border: 1px solid var(--line); overflow: hidden; }
.ps-card h2 { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.8rem); letter-spacing: -.025em; margin: .8rem 0 .7rem; }
.ps-card p { color: var(--text-soft); margin: 0; }
.ps-tag { display: inline-flex; align-items: center; gap: .5rem; font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; margin: 0; }
.ps-tag .rd-icon { flex: none; }

/* the "before" — desaturated and recessed, signalling the gap */
.ps-card--problem { background: linear-gradient(180deg, #e9edf3, #dde2ea); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 2px 16px rgba(27,35,48,.07); }
.ps-card--problem h2 { color: var(--ink-2); }
.ps-tag--problem { color: #9a5b12; }
.ps-tag--problem .rd-icon { color: #cc7d18; }

/* the "after" — elevated, glossy, brand-accented */
.ps-card--solution { background: linear-gradient(180deg, #ffffff, #f6f8fc); box-shadow: var(--shadow-md), var(--glass-edge); border-color: rgba(192,31,38,.26); }
.ps-card--solution::before { content:""; position:absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand-red-bright), var(--brand-red) 55%, var(--brand-red-dark)); }
.ps-tag--solution, .ps-tag--solution .rd-icon { color: var(--brand-red); }

/* the bridge — a brand badge carrying the eye from problem to solution */
.ps-bridge { display: flex; align-items: center; justify-content: center; }
.ps-bridge-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r-full); color: #fff;
  background: linear-gradient(180deg, #e0474d, #b51d23 55%, #9c0f15);
  border: 1px solid rgba(120,8,12,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -8px 12px rgba(120,8,12,.3), 0 8px 18px rgba(192,31,38,.34);
}
@media (max-width: 860px) {
  .ps-flow { grid-template-columns: 1fr; gap: .7rem; }
  .ps-bridge-badge { transform: rotate(90deg); }
}
.media-frame {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.6);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.3);
  -webkit-box-reflect: below 4px linear-gradient(transparent 72%, rgba(255,255,255,.16));
}

/* ---- Pricing -------------------------------------------------------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.pricing-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.price-card { display: flex; flex-direction: column; padding: 1.9rem; }
.price-card.featured {
  border-color: rgba(192,31,38,.55);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1), 0 0 0 3px rgba(192,31,38,.12);
}
.price-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(180deg, #e0474d, #b51d23); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: .35rem .9rem; border-radius: var(--r-full); white-space: nowrap;
  border: 1px solid rgba(120,8,12,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 10px rgba(192,31,38,.4);
}
.price-card h3 { font-size: 1.16rem; }
.price-amount {
  font-size: 2.5rem; font-weight: 800; letter-spacing: -.03em; margin: .4rem 0;
  background: linear-gradient(180deg, #2c3a52, #1b2330); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ink);
}
.price-amount span { font-size: .95rem; font-weight: 600; color: var(--muted); -webkit-text-fill-color: var(--muted); }
.price-card .price-note { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.price-card .checklist { margin: 1rem 0 1.5rem; }
.price-card .checklist li { font-size: .95rem; }
.price-card .btn { margin-top: auto; }

/* ---- Price list (label · price rows) -------------------------------- */
.price-list { width: 100%; max-width: 720px; margin-inline: auto; border-collapse: collapse; }
.price-list caption { text-align: left; color: var(--muted); font-size: .9rem; padding-bottom: .6rem; }
.price-list th, .price-list td { text-align: left; padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); }
.price-list thead th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.price-list tbody tr:last-child td { border-bottom: 0; }
.price-list td.price-col, .price-list th.price-col { text-align: right; white-space: nowrap; font-weight: 700; color: var(--ink); }
.price-list tbody tr:hover { background: rgba(44,58,82,.03); }

/* ---- Reviews -------------------------------------------------------- */
.reviews-head { text-align: center; margin-bottom: var(--sp-6); }
.reviews-rating { display: inline-flex; align-items: center; gap: .6rem; margin-top: .6rem; flex-wrap: wrap; justify-content: center; }
.stars, .review-stars { display: inline-flex; gap: 2px; color: var(--amber); }
.star-filled { fill: var(--amber); color: var(--amber); filter: drop-shadow(0 1px 1px rgba(216,144,26,.5)); }
.rating-text { color: var(--muted); font-size: .95rem; }
.review-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.review-card { padding: 1.6rem; }
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1); }
.review-stars { margin-bottom: .7rem; }
.review-text { color: var(--text); font-size: 1.02rem; line-height: 1.6; }
.review-author { margin-top: 1rem; font-weight: 800; color: var(--ink); font-size: .95rem; }

/* ---- Portfolio : framed shots with a wet-floor reflection ---------- */
.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 1.25rem; }
.portfolio-item {
  display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid rgba(255,255,255,.7);
  background: #fff; position: relative;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.4);
  transition: transform .22s ease, box-shadow .28s ease;
  -webkit-box-reflect: below 6px linear-gradient(transparent 68%, rgba(255,255,255,.22));
}
.portfolio-item:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--shadow-md); }
.portfolio-shot { height: 300px; overflow: hidden; background: var(--paper-2); position: relative; }
/* A diagonal glass glint sweeping across the screenshot on hover. */
.portfolio-shot::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 60%);
  transform: translateX(-120%); transition: transform .7s ease;
}
.portfolio-item:hover .portfolio-shot::after { transform: translateX(120%); }
.portfolio-shot img { width: 100%; height: auto; display: block; transition: transform 3.5s ease; }
.portfolio-item:hover .portfolio-shot img { transform: translateY(calc(-100% + 300px)); }
.portfolio-cap { padding: .9rem 1.05rem; background: linear-gradient(180deg, #ffffff, #f3f5fa); }
.portfolio-cap h3 { font-size: 1rem; color: var(--ink); }
.portfolio-cap span { font-size: .82rem; color: var(--muted); }

/* Homepage teaser — a slim strip of preview thumbnails that links through to
   the full /portfolio/ page. Lighter than the full grid: fixed-height framed
   shots, the whole strip is one link, lifts gently on hover. */
.portfolio-teaser {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
  margin-top: var(--sp-2);
}
.portfolio-teaser-shot {
  display: block; height: 200px; overflow: hidden; border-radius: var(--r-md);
  border: 1px solid rgba(255,255,255,.7); background: var(--paper-2); position: relative;
  box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.4);
  transition: transform .22s ease, box-shadow .28s ease;
}
.portfolio-teaser-shot img { width: 100%; height: auto; display: block; }
.portfolio-teaser:hover .portfolio-teaser-shot { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (max-width: 860px) { .portfolio-teaser { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .portfolio-teaser { grid-template-columns: 1fr 1fr; gap: .8rem; } .portfolio-teaser-shot { height: 150px; } }

/* ---- Forms : an inset glass console -------------------------------- */
.contact-cta-inner {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--sp-7); align-items: start;
  background: linear-gradient(180deg, #ffffff, #eef1f7);
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1rem + 2.4vw, 3.2rem);
  box-shadow: var(--shadow-md), var(--glass-edge);
}
.contact-points { list-style: none; padding: 0; margin-top: var(--sp-5); display: grid; gap: .7rem; }
.contact-points li { display: flex; align-items: center; gap: .6rem; color: var(--text-soft); }
.contact-points .rd-icon { color: var(--brand-red); flex: none; }
.lead-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label, .field legend { font-weight: 700; font-size: .92rem; color: var(--ink); }
.field .req { color: var(--brand-red); }
/* Inputs sit "recessed" — a faint inner shadow, the Aqua sunken well. */
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .72rem .85rem;
  box-shadow: inset 0 1px 3px rgba(27,35,48,.09), inset 0 1px 0 rgba(27,35,48,.04);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-red); background: #fff;
  box-shadow: inset 0 1px 3px rgba(27,35,48,.06), 0 0 0 4px rgba(192,31,38,.16);
}
.field [aria-invalid="true"] { border-color: var(--brand-red); }
.field-err { color: var(--brand-red-dark); font-size: .85rem; font-weight: 600; }
.field-checkboxes legend { margin-bottom: .5rem; }
.checkbox-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
.checkbox { display: flex; align-items: center; gap: .5rem; font-weight: 500; color: var(--text-soft); font-size: .96rem; }
.checkbox input { width: auto; accent-color: var(--brand-red); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-fineprint { font-size: .82rem; color: var(--muted); text-align: center; }
.form-success { text-align: center; padding: 1.5rem; }
.form-success .rd-icon { color: var(--green); margin: 0 auto .6rem; width: 48px; height: 48px; }
.form-success h3 { margin-bottom: .4rem; }
.form-error-summary {
  background: linear-gradient(180deg, #fdeced, #f9dadc); border: 1px solid #f0a9ac; color: var(--brand-red-dark);
  padding: .85rem 1rem; border-radius: var(--r-sm); margin-bottom: 1rem; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

/* ---- Page title bar / breadcrumbs : candy header ------------------- */
.page-title-bar {
  color: #fff; padding-block: var(--sp-5) var(--sp-7); position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(90% 90% at 80% 0%, rgba(255,170,120,.45), transparent 50%),
    linear-gradient(160deg, #c8232a 0%, #9c0f15 60%, #6f0c12 100%);
}
.page-title-bar::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 6px);
}
.page-title-bar.has-bg {
  padding-block: var(--sp-6) var(--sp-8);
  background-size: cover; background-position: center 38%; background-repeat: no-repeat;
}
.page-title-bar.has-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(200,35,42,.92) 0%, rgba(141,10,16,.85) 55%, rgba(60,4,6,.7) 100%);
}
.page-title-bar .page-title { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); text-shadow: 0 2px 16px rgba(60,4,6,.5); }
.page-title-sub { color: rgba(255,255,255,.9); font-size: 1.12rem; margin-top: .6rem; max-width: 62ch; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: 0; margin-bottom: .8rem; font-size: .85rem; }
.breadcrumbs a { color: rgba(255,255,255,.8); }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs span[aria-current] { color: #ffe39a; }
.crumb-sep { display: inline-flex; color: rgba(255,255,255,.55); transform: rotate(-90deg); }

/* ---- FAQ accordion : glossy disclosure tiles ----------------------- */
.faq-list { display: grid; gap: .8rem; }
.faq-item {
  background: linear-gradient(180deg, #ffffff, #f4f6fa); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9); overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item[open] { border-color: rgba(192,31,38,.35); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer;
  padding: 1.15rem 1.35rem; font-weight: 700; color: var(--ink); list-style: none; font-size: 1.05rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-marker {
  color: #fff; transition: transform .25s ease; flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%;
  background: linear-gradient(180deg, #e0474d, #b51d23); box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 5px rgba(192,31,38,.4);
}
.faq-item[open] .faq-marker { transform: rotate(180deg); }
/* Center the chevron glyph within its round badge — no baseline drift. */
.faq-marker .rd-icon { display: block; width: 100%; height: 100%; }
.faq-a { padding: 0 1.35rem 1.25rem; }
.faq-a p { color: var(--text-soft); }
.faq-permalink { margin-top: .6rem; font-size: .9rem; }
.faq-permalink a { font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }

/* ---- Category / list cards ----------------------------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.cat-card { display: block; padding: 1.7rem; }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1); border-color: rgba(192,31,38,.35); }
.cat-card h3 { color: var(--ink); display: flex; align-items: center; gap: .5rem; }
.cat-card p { font-size: .96rem; margin-top: .4rem; }
.cat-card .count { font-size: .85rem; color: var(--muted); margin-top: .8rem; display: inline-block; }

/* ---- Cities --------------------------------------------------------- */
.city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.city-card { padding: 1.7rem; }
.city-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1); }
.city-card h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; }
.city-card .hq-tag { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: linear-gradient(180deg,#e0474d,#b51d23); padding: .22rem .55rem; border-radius: var(--r-full); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.city-card .city-phone { display: inline-flex; align-items: center; gap: .4rem; font-weight: 800; color: var(--brand-red); margin: .6rem 0; }
.city-card p { font-size: .95rem; }

/* ---- Team ----------------------------------------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.team-card { padding: 1.7rem; }
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,1); }
.team-avatar {
  width: 66px; height: 66px; border-radius: var(--r-full); display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.45rem; color: #fff; margin-bottom: 1rem;
  background: linear-gradient(180deg, #e0474d, #b51d23 55%, #8d0a10);
  border: 1px solid rgba(120,8,12,.5);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -10px 14px rgba(120,8,12,.35), 0 6px 14px rgba(192,31,38,.34);
}
.team-card h3 { font-size: 1.14rem; }
.team-card .role { color: var(--brand-red); font-weight: 700; font-size: .9rem; margin-bottom: .5rem; }
.team-card p { font-size: .94rem; }

/* ---- Column-count helpers ------------------------------------------- */
/* Override a grid's default template responsively. Use a class instead of an
   inline `grid-template-columns`, which would defeat the media queries below. */
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---- Misc ----------------------------------------------------------- */
.lead-intro { font-size: 1.22rem; color: var(--text-soft); max-width: 64ch; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-5); }
.note-card {
  padding: 1.6rem; border-left: 4px solid var(--brand-red);
  background: linear-gradient(180deg, #ffffff, #f4f6fa);
}
.callout {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(90% 120% at 85% -10%, rgba(255,170,120,.4), transparent 50%),
    linear-gradient(160deg, #2c3a52 0%, #1b2330 60%, #141a25 100%);
  color: #fff; border-radius: var(--r-xl); padding: clamp(1.8rem, 1rem + 2.4vw, 2.8rem); text-align: center;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.18);
}
.callout::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 6px); }
.callout h2 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.callout p { color: rgba(255,255,255,.86); max-width: 58ch; margin: .8rem auto 0; }
.callout .btn-row { justify-content: center; margin-top: var(--sp-6); }
.callout-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  color: var(--amber); font-weight: 700; font-size: .8rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.callout-eyebrow .rd-icon { color: var(--amber); flex: none; }
/* Trust row — fills the band and gives the CTA concrete reasons to act. */
.callout-trust {
  list-style: none; margin: 1.5rem auto 0; padding: 1.3rem 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2.2rem;
  max-width: 760px; border-top: 1px solid rgba(255,255,255,.14);
}
.callout-trust li {
  display: inline-flex; align-items: center; gap: .6rem;
  color: rgba(255,255,255,.92); font-weight: 600; font-size: .98rem;
}
.callout-trust .rd-icon { color: var(--amber); flex: none; }
/* True outline button for dark surfaces — transparent so white text stays
   legible (a btn-ghost here would put white text on its near-white gradient). */
.btn-outline-light {
  background: rgba(255,255,255,.07); color: #fff;
  border-color: rgba(255,255,255,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-outline-light::before { opacity: 0; }
.btn-outline-light:hover { background: rgba(255,255,255,.16); color: #fff; filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.amber { color: var(--amber); }

/* ---- Footer : deep graphite console -------------------------------- */
.site-footer {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #1b2330 0%, #141a25 100%);
  color: rgba(255,255,255,.78); padding-top: var(--sp-8); margin-top: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.site-footer::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px); }
/* Footer top row: three equal columns — identity (logo + tagline) on the left,
   the centred Our Group strip (logos stacked vertically) in the middle, and the
   contact NAP on the right. Below 860px this folds to Our Group spanning a full
   width row on top with a two-column identity + contact row beneath; on phones
   everything stacks to one column, Our Group still first. In both collapsed
   states the group logos lay out in a centred horizontal row.
   grid-template-areas drive all three arrangements from one DOM order. */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: "contact identity group";
  gap: var(--sp-6) clamp(2rem, 6vw, 5rem);
  align-items: stretch;
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
}
/* Vertical dividers between the three columns: a hairline centred in the
   column gap to the left of the identity (col 2) and group (col 3) cells.
   align-items:stretch makes every cell the row's full height, so the lines
   are uniform. These are hidden / re-purposed at the collapsed breakpoints. */
.footer-identity, .footer-group { position: relative; }
.footer-identity::before, .footer-group::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(clamp(2rem, 6vw, 5rem) / -2);
  width: 1px; background: rgba(255,255,255,.12);
}
/* Outer columns anchor to opposite edges (identity flush-left, contact
   flush-right) so the three-up row fills the full width symmetrically around the
   centred Our Group strip, instead of all three hugging the left. The contact
   NAP rows reverse so their icons line up against the right margin, mirroring
   the identity column on the left. */
.footer-identity { grid-area: identity; max-width: 42ch; }
.footer-group    { grid-area: group; }
.footer-contact  { grid-area: contact; }
.footer-col { min-width: 0; }
.footer-logo { height: 54px; width: auto; margin-bottom: 1rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.footer-tagline { color: rgba(255,255,255,.7); font-size: .95rem; max-width: 40ch; }
.footer-nap { font-style: normal; display: grid; gap: .5rem; justify-items: start; }
.footer-nap a, .footer-nap span { color: rgba(255,255,255,.78); display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; }
.footer-nap a:hover { color: #fff; }
.footer-nap .rd-icon { color: var(--brand-red-bright); flex: none; }

.footer-heading { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #fff; margin-bottom: 1.1rem; }

/* Our Group: the centred middle column. The colour partner logos stack
   vertically, centred at a uniform height — a tidy, consistent set. The
   heading and logos are centre-aligned; the orientation flips to a horizontal
   row once the three-column layout collapses (see the breakpoints below). */
.footer-group { text-align: center; }
.group-logos { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.group-logos a { display: inline-flex; align-items: center; opacity: .85; transition: opacity .15s ease, transform .15s ease; }
.group-logos a:hover { opacity: 1; transform: translateY(-1px); }
.group-logos img { height: 34px; width: auto; }
.footer-social { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: .7rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: var(--r-full); color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); transition: all .15s ease;
}
.footer-social a:hover { color: #fff; background: var(--brand-red); border-color: transparent; transform: translateY(-2px); }

/* ---- Social-media platform row (service page) ----------------------- */
.platform-list { list-style: none; padding: 0; margin: 1.4rem auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.platform-list li { display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--text-soft); font-size: .85rem; font-weight: 600; }
.platform-list .rd-icon {
  display: block; width: 54px; height: 54px; padding: 14px; box-sizing: border-box; color: var(--brand-red);
  background: linear-gradient(180deg, #ffffff, #f4f6fa); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.9);
}

.footer-bar { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bar-inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem 1.5rem; padding-block: 1.3rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.footer-bar-inner p { color: rgba(255,255,255,.6); }
.footer-bar-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.25rem; }

/* ---- Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .service-cards, .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid, .review-grid, .city-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .stat-band .stat:nth-child(2) { border-right: 0; }
  .stat-band .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(27,35,48,.07); }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  /* Roomier tap target for the footer phone/email on touch screens. */
  .footer-nap a { padding-block: .3rem; }
  .contact-points a { display: inline-block; padding-block: .3rem; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    /* Off-canvas panel anchored to the viewport (the header carries no
       filter/transform, so it isn't a containing block — see .site-header::before).
       Pinned top/right/bottom so it always fills below the header, scroll-safe. */
    position: fixed; top: var(--header-h); right: 0; bottom: 0; left: auto; z-index: 105;
    width: min(86vw, 360px); max-width: 100vw;
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, #ffffff, #eef1f7);
    border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
    padding: 1rem; transform: translateX(100%); transition: transform .25s ease;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* Pad the scroll tail so the last item / phone CTA never hugs the bottom edge. */
  .primary-nav { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .primary-nav.open { transform: translateX(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; }
  /* Off-canvas panel is light, so flip nav text back to ink (desktop bar is dark). */
  .nav-link { width: 100%; justify-content: space-between; padding: .85rem .7rem; font-size: 1.05rem; min-height: 48px; border-radius: var(--r-sm); color: var(--ink); }
  .nav-link:hover { color: var(--brand-red); background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(232,236,243,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
  .has-dropdown { position: static; }
  /* Industry Marketing collapses to a single-column accordion inside the narrow
     off-canvas panel. The desktop two-column grid (#industry-menu, min-width:440px)
     lives in a min-width:861px block and must never reach the panel — its width
     overflows it and clips the right column. Reset it explicitly here so the mobile
     layout is authoritative regardless of any breakpoint edge or viewport quirk. */
  #industry-menu { display: block; min-width: 0; }
  #industry-menu li:last-child { grid-column: auto; margin-top: 0; padding-top: 0; border-top: 0; }
  .dropdown {
    position: static; min-width: 0; opacity: 1; transform: none; box-shadow: none; background: transparent;
    border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 .5rem .6rem;
    padding: 0 0 0 .4rem; max-height: 0; overflow: hidden;
    /* visibility:hidden keeps the collapsed submenu's links out of the tab
       order (max-height:0 alone would still let keyboard focus reach them).
       Delay hiding until the collapse animation finishes; reveal immediately. */
    visibility: hidden; transition: max-height .25s ease, visibility 0s linear .25s;
  }
  .dropdown a { padding: .7rem .8rem; }
  .dropdown a:hover { transform: none; }
  /* Cap must clear the tallest submenu (Industry Marketing: 17 industries +
     "All industries" ≈ 18 rows) so the expanded list is never clipped by
     overflow:hidden. The panel itself scrolls, so an ample cap is safe. */
  .dropdown-toggle[aria-expanded="true"] + .dropdown { max-height: 1200px; visibility: visible; transition: max-height .25s ease, visibility 0s; }
  .btn-phone { margin-top: 1rem; width: 100%; }
  .split { grid-template-columns: 1fr; }
  .contact-cta-inner, .contact-cta-inner.is-full { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .pricing-grid.cols-2 { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  /* Footer folds to two columns (contact + identity) with the Our Group strip
     spanning full width underneath; its logos lay out in a centred horizontal row. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "contact identity"
      "group group";
  }
  /* Two-up row keeps the contact|identity vertical divider; the group strip
     now spans full width below it. */
  .footer-group::before { display: none; }
  .footer-group {
    padding-top: var(--sp-5); padding-bottom: var(--sp-2);
  }
  .group-logos { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; }
}
@media (max-width: 620px) {
  section { padding-block: var(--sp-7); }
  .service-cards, .portfolio-grid, .feature-grid, .review-grid, .city-grid, .team-grid, .cat-grid { grid-template-columns: 1fr; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .stat-band { grid-template-columns: repeat(2, 1fr); }
  .field-row, .checkbox-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { gap: 1.25rem; }
  /* Smaller, tighter chips so the five pills settle into neat rows instead of
     a ragged, oversized wrap on narrow screens. On phones the pills grow to
     fill each row (flex: 1) so every row is flush to both margins — matching
     the hero copy and full-width CTAs — rather than a lopsided 3-then-2 wrap. */
  .hero-pills { gap: .4rem .45rem; margin-top: var(--sp-4); }
  .hero-pills li { font-size: .76rem; padding: .35rem .7rem; flex: 1 1 auto; text-align: center; }
  /* Footer collapses to a single column on phones; Our Group sits at the
     bottom with its logos in a centred horizontal row. */
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "contact" "identity" "group";
    gap: var(--sp-5);
  }
  /* Single column: nothing sits side by side, so drop the vertical divider.
     The contact block (phone/email/address/hours) goes two-up on top, the
     identity (logo + tagline) is one column below it, then the group logos. */
  .footer-identity::before { display: none; }
  /* On phones the identity row sets the logo beside its description rather than
     stacked, so the brand mark reads alongside the tagline in the second row. */
  .footer-identity { display: flex; align-items: center; gap: 1rem; max-width: none; }
  .footer-identity .footer-logo { margin-bottom: 0; flex: none; }
  .footer-nap { grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; }
  /* Full-screen mobile menu: the panel owns the viewport below the header and
     scrolls on its own; the page beneath is locked (body.nav-open). The opaque
     full-width panel covers everything, so the scrim is redundant here. */
  .primary-nav {
    width: 100vw; max-width: 100vw; left: 0; right: 0;
    border-left: 0; box-shadow: none; padding-inline: 1.25rem;
  }
  .nav-scrim { display: none; }
}

/* Scroll-lock lives on the root, not <body>: an overflow on <body> would clip
   the sticky header's scroll ancestor and knock it out of view while the menu
   is open. Locking <html> freezes the page without breaking the sticky header.

   Scope the lock to touch devices only. On a phone the off-canvas menu should
   pin the page so it can't scroll behind the panel (and so a swipe that the
   panel doesn't consume can't bleed through). On a desktop pointer — including a
   narrowed desktop window showing this mobile layout — freezing the whole page
   reads as broken: the user expects the mouse wheel to keep scrolling. There we
   leave the page scrollable; the menu panel is position:fixed, so it stays
   anchored to the viewport while the page scrolls beneath it. */
@media (hover: none) and (pointer: coarse) {
  html.nav-open { overflow: hidden; }
  /* Trap the panel's own scroll so a swipe can't bleed through to the locked
     page. Scoped to touch only: on a desktop pointer the page beneath stays
     scrollable, so containing the wheel here would swallow it whenever the
     cursor sits over the panel (e.g. hovering a highlighted item) and the
     short panel has nothing of its own to scroll. */
  .primary-nav { overscroll-behavior: contain; }
}
.nav-scrim { position: fixed; inset: 0; background: rgba(27,35,48,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); z-index: 90; opacity: 0; visibility: hidden; transition: opacity .2s; }
.nav-scrim.show { opacity: 1; visibility: visible; }
@media (min-width: 861px) { .nav-scrim { display: none; } }