/* =====================================================================
   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-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem; padding-bottom: var(--sp-7); }
.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: 38ch; }
.footer-nap { font-style: normal; display: grid; gap: .5rem; margin-top: 1.2rem; }
.footer-nap a, .footer-nap span { color: rgba(255,255,255,.78); display: inline-flex; align-items: center; gap: .5rem; 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: 1rem; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: rgba(255,255,255,.72); font-size: .94rem; transition: color .15s ease; }
.footer-col a:hover { color: #fff; }
.group-logos { display: grid; gap: .7rem; margin-bottom: 1.2rem; }
.group-logos img { height: 28px; width: auto; opacity: .9; }
.group-logos a { color: rgba(255,255,255,.8); }
.footer-social { list-style: none; padding: 0; margin-top: 1.1rem; 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: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-block: 1.3rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.footer-bar-inner p { color: rgba(255,255,255,.6); }

/* ---- 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); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  /* Roomier tap targets for the dense footer link lists on touch screens. */
  .footer-col ul { gap: .1rem; }
  .footer-col a { display: inline-block; padding-block: .45rem; }
  .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); }
}
@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; }
  .footer-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; }
  /* 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; } }