@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@500;600&family=Montserrat:wght@600;800&display=swap');

/* =========================================================================
   SUH Solutions - site stylesheet
   =========================================================================
   Written against the SUH Solutions design tokens rather than inherited from
   the previous site's stylesheet, so this file only contains rules the 100
   generated pages actually use.

   Reading order, and the order to keep when adding to it:
     01  tokens
     02  reset + base elements
     03  layout primitives        .wrap .section .section-head .label
     04  buttons + pills
     05  overlays                 preloader, cursor, floating CTA
     06  header + mega menus + mobile nav
     07  heroes                   home, inner, tool, case, listing
     08  bands                    hc-strip, logo rails, tech, stats
     09  card grids               pillars, who, approach, areas, industries
     10  narrative                process, outcomes, blueprint, fit, about
     11  case studies             cs-*, work filters
     12  showcases                project carousel, industry slider
     13  conversion               faq, calc, contact, social, modals, tools
     14  footer
     15  async sections           google reviews, latest blog
     16  responsive
     17  reduced motion

   Unlike the stylesheet this replaces, there are no appended override blocks:
   each selector appears once, in its section. Keep it that way - if a rule
   needs changing, change it in place rather than re-declaring it at the end.
   ========================================================================= */

/* ---- 01 tokens --------------------------------------------------------- */

:root {
  /* Brand palette (brand/suh/color-palette.txt): off-black #121212, slate
     #233D4D, orange #FE7F2D, light grey #EAECF0.
     --hero-void and --deep-navy keep their old names because ~40 rules
     use them; they now hold the slate and the near-black. */
  --hero-void: #233d4d;
  --deep-navy: #121212;
  --white: #fff;

  /* Orange. White text on #FE7F2D is only 2.5:1, so text ON the orange is
     near-black (--on-primary, 7.8:1) and orange TEXT on light surfaces uses
     --primary-ink, the same hue darkened to clear 4.5:1 on white and on
     #EAECF0. The bright value stays for fills, borders, icons and anything
     on the dark slate. */
  --primary: #fe7f2d;
  --primary-ink: #b54708;
  --on-primary: #121212;
  --secondary: #e8691a;
  --primary-container: #fe7f2d;
  --inverse-primary: #ffc8a3;
  --surface: #fff;
  --surface-gray: #eaecf0;
  --surface-variant: #eaecf0;
  --surface-container: #f2f4f7;
  --ink: #121212;
  --slate: #475467;
  --outline: #5b6472;
  --line: #d0d5dd;
  --error: #ba1a1a;

  /* Headline accent words. Dark orange on light panels, bright on dark ones
     (see the dark-panel rule in section 02). */
  --em-from: var(--primary-ink);
  --em-to: #d9590f;

  /* Accent tones. Pillar rows, card icons and section eyebrows pick one. */
  --indigo: #6366f1;
  --teal: #14b8a6;
  --amber: #f59e0b;
  --green: #22c55e;
  --red: #ef4444;
  --purple: #a855f7;
  /* The same tones darkened for small text on white; each clears 4.5:1. The
     bright values above stay for icons, borders and fills. */
  --indigo-text: #4338ca;
  --teal-text: #0f766e;
  --amber-text: #b45309;
  --green-text: #15803d;
  --red-text: #b91c1c;
  --purple-text: #7e22ce;
  /* Small accents on dark panels (active numbers, live-site links, ticks).
     Was a neon cyan; now the light orange, 5.8:1 on the slate. */
  --neon-cyan: #ffa366;
  --lime: #22c55e;

  /* Type */
  --font-display: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Rhythm */
  --gutter: 1.5rem;
  --container: 1280px;
  --section-gap: 8rem;
  --section-gap-md: 4rem;
  --radius: 1rem;
  --radius-lg: 1.75rem;
  --radius-xl: 3rem;

  /* One easing curve for the whole site */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 20px 40px -15px rgba(35, 61, 77, 0.18);
  --shadow-lg: 0 30px 70px -20px rgba(18, 18, 18, 0.28);
}

/* ---- 02 reset + base --------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Set by main.js while a modal or the mobile nav is open. */
body.locked {
  overflow: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

/* .hero-title: the homepage carousel's later slides use <h2> for SEO (one
   real <h1> per page) but must look identical to it. */
h1,
.hero-title {
  font-size: clamp(2.25rem, 3.7vw, 3.75rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
}

h3 {
  font-size: 1.5rem;
  font-weight: 600;
}

p {
  margin: 0 0 1rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Headline accent: the markup writes `Lead<br /><em>accent.</em>` throughout. */
h1 em,
h2 em,
h3 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--em-from) 0%, var(--em-to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* Italic descenders clip against a tight line-height. */
  line-height: 1.15;
  padding-bottom: 0.05em;
}

/* Icons are inline SVG in the markup, stroked not filled. */
svg {
  width: 20px;
  height: auto;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vendor wordmarks are filled paths, so they opt out of the stroke default. */
.logo-chip svg,
.mini-logo svg,
.realistic-icon svg {
  fill: currentColor;
  stroke: none;
}

::selection {
  background: var(--primary);
  color: var(--on-primary);
}

/* Dark panels: headline accents switch to the bright orange. */
.hero,
.proof-section,
.hc-trust,
.calc,
.cs-snapshot-sec,
.cs-results,
.cs-live,
.contact-side-card,
.estimate-result,
.site-footer,
.nf {
  --em-from: var(--primary);
  --em-to: #ffa366;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- 03 layout primitives ---------------------------------------------- */

.wrap {
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-gap);
}

/* Section eyebrow: small uppercase text above a heading. The owner asked
   for the short rule that used to lead it to be dropped; text only. */
.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--outline);
}

/* On a dark panel. The two section selectors cover markup that carries a
   plain .label inside a dark band. */
.label.light,
.proof-section .label,
.hc-trust .label {
  color: rgba(226, 232, 240, 0.72);
}

/* Heading spacing below an eyebrow. */
.section-head h2 {
  margin-top: 1rem;
}

.section-head {
  display: grid;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3.5rem;
}

.section-head > div {
  max-width: 40rem;
}


.section-head > p {
  max-width: 30rem;
  color: var(--slate);
  font-size: 1.125rem;
}

@media (min-width: 900px) {
  .section-head {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* ---- 04 buttons + pills ------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-family: var(--font-body);
  white-space: nowrap;
  transition:
    transform 0.2s var(--ease),
    opacity 0.2s var(--ease),
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}

.btn.primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--on-primary);
  box-shadow: 0 12px 28px -12px rgba(254, 127, 45, 0.55);
}

.btn.primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.btn.ghost {
  border: 2px solid rgba(91, 100, 114, 0.25);
  color: var(--primary-ink);
  background: var(--white);
}

.btn.ghost:hover {
  background: var(--surface-variant);
}

.btn.dark {
  background: var(--deep-navy);
  color: var(--white);
}

.btn.light {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white);
}

.btn.light:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* The homepage showcase CTA. The source named it for the black panel it sat
   on; SUH's showcase stage is white, so it takes the navy fill instead. */
.btn.white {
  background: var(--deep-navy);
  color: var(--white);
}

.btn.white:hover {
  background: var(--primary);
  color: var(--on-primary);
}

.btn:active {
  transform: scale(0.98);
}

.btn.icon-only {
  padding: 0.7rem;
  min-height: 0;
}

/* Tag rows under pillar rows and case cards. */
.pills,
.cs-card-tags,
.hc-case-tags,
.hc-hipaa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pills span,
.cs-tag,
.hc-case-tags span,
.hc-hipaa-chips span {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--surface-variant);
  color: var(--slate);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- 05 overlays ------------------------------------------------------- */

/* Preloader: types the wordmark, then lifts. sessionStorage-gated in main.js,
   with a 4s safety timeout so it can never trap the page. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--hero-void);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}

/* main.js fades this with GSAP and then removes the node, so there is no
   "hidden" class to match. body.loading holds the scroll while it runs. */
body.loading {
  overflow: hidden;
}

/* The SUH mark above the brand name typed out letter by letter. */
.loader-type {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--white);
}

.loader-type .type-mark {
  width: clamp(3.25rem, 7vw, 4.5rem);
  height: auto;
  stroke: none;
}

.type-word {
  white-space: nowrap;
}

.type-char {
  opacity: 0;
}

.type-char.on {
  opacity: 1;
}

.type-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.1em;
  background: var(--primary);
  animation: caret-blink 1s steps(2) infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.loader-blackout {
  position: absolute;
  inset: 0;
  background: var(--hero-void);
  transform-origin: top;
}

/* Cursor follower: an orange dot with a trailing slate ring. main.js moves
   both with GSAP transforms and sets the ring's state classes (see the
   contract table in CLAUDE.md). The native pointer stays visible beneath. */
.cursor-ring,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 190;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

/* main.js adds this once it is actually tracking the pointer, so nothing
   sits frozen at 0,0 before the first mousemove, and drops it when the
   pointer leaves the window. */
body.cursor-ready .cursor-ring,
body.cursor-ready .cursor-dot {
  opacity: 1;
}

.cursor-ring {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin: -1.125rem 0 0 -1.125rem;
  border: 1.5px solid rgba(35, 61, 77, 0.45);
  transition:
    width 0.3s var(--ease),
    height 0.3s var(--ease),
    margin 0.3s var(--ease),
    border-color 0.3s var(--ease),
    background-color 0.3s var(--ease),
    opacity 0.2s var(--ease);
}

.cursor-dot {
  width: 0.5rem;
  height: 0.5rem;
  margin: -0.25rem 0 0 -0.25rem;
  background: var(--primary);
  transition: opacity 0.2s var(--ease);
}

/* "View" label, shown only in the disc state. */
.cursor-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--on-primary);
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.2s var(--ease), scale 0.3s var(--ease);
}

.cursor-label svg {
  width: 14px;
  stroke-width: 2.2;
}

.cursor-ring.cursor-dark {
  border-color: rgba(234, 236, 240, 0.55);
}

/* Over a link or button: the ring opens into an orange halo around the dot. */
.cursor-ring.cursor-hover {
  width: 3.5rem;
  height: 3.5rem;
  margin: -1.75rem 0 0 -1.75rem;
  border-color: var(--primary);
  background: rgba(254, 127, 45, 0.12);
}

/* Over a card or project image: a solid disc that says "View". */
.cursor-ring.cursor-view {
  width: 5.25rem;
  height: 5.25rem;
  margin: -2.625rem 0 0 -2.625rem;
  border-color: var(--primary);
  background: var(--primary);
}

.cursor-ring.cursor-view .cursor-label {
  opacity: 1;
  scale: 1;
}

/* The dot hides only behind the "View" disc; over links it stays as the
   precise click point inside the halo. Hidden with opacity, not scale: GSAP
   writes an inline `scale: none` on both cursor elements as it moves them,
   which beats any stylesheet `scale`. */
body.cursor-ready .cursor-ring.cursor-view + .cursor-dot {
  opacity: 0;
}

/* Coarse pointers have no cursor to decorate. */
@media (hover: none), (pointer: coarse) {
  .cursor-ring,
  .cursor-dot {
    display: none;
  }
}

/* Once main.js is tracking the pointer, the round cursor replaces the system
   one everywhere, links and form fields included. Never before: under reduced
   motion, without JS, or with the pointer outside the window, cursor-ready is
   absent and the system cursor stays, so there is always a visible pointer. */
@media (hover: hover) and (pointer: fine) {
  body.cursor-ready,
  body.cursor-ready * {
    cursor: none !important;
  }
}

/* Floating estimate CTA, bottom-right past the fold. */
.estimate-peek {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--on-primary);
  font-weight: 700;
  box-shadow: 0 18px 40px -14px rgba(254, 127, 45, 0.6);
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.estimate-peek:hover {
  transform: translateY(-2px);
}

@media (max-width: 700px) {
  .estimate-peek {
    display: none;
  }
}

/* Honeypot: off-screen rather than hidden, so bots that skip display:none
   fields still fill it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-turnstile:not(:empty) {
  margin-block: 1rem;
}

/* ---- 06 header + mega menus + mobile nav ------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(208, 213, 221, 0.5);
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

/* main.js adds .shipped once the page is scrolled past the hero. */
.header.shipped {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px -18px rgba(35, 61, 77, 0.3);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-right: auto;
}

/* The logo is inline SVG (from brand/suh/logo-horizontal.svg) rather than
   an <img>, so its Montserrat wordmark can use the web font loaded above;
   an SVG loaded as an image cannot. It opts out of the global stroked-icon
   rule because every shape carries its own fill. */
.brand-logo {
  display: block;
  width: auto;
  height: 56px;
  stroke: none;
  transition: transform 0.3s var(--ease);
}

.brand-logo-main,
.brand-logo-sub {
  font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

.brand-logo-main {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: 2px;
}

.brand-logo-sub {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 5px;
}

.brand:hover .brand-logo {
  transform: scale(1.03);
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  white-space: nowrap;
}

.navlinks > a,
.navlinks > button {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding-block: 0.25rem;
  font-weight: 500;
  color: var(--slate);
  transition: color 0.25s var(--ease);
}

.navlinks > a.current {
  color: var(--primary-ink);
  font-weight: 600;
}

.navlinks > a:hover,
.navlinks > button:hover,
.navlinks > button[aria-expanded="true"] {
  color: var(--primary-ink);
}

/* The caret's wrapper span is otherwise a full line box tall with the icon
   at its top, which left the arrow 3px above the label's centre line. */
.navlinks [data-caret] {
  display: inline-flex;
  align-items: center;
}

.navlinks svg {
  display: block;
  width: 18px;
  transition: transform 0.3s var(--ease);
}

.navlinks svg.up,
.navlinks [data-caret].up svg {
  transform: rotate(180deg);
}

/* Search collapses to an icon until opened. The form is a real GET so it
   works without JS. */
.header-search {
  position: relative;
  flex: none;
}

.header-search-btn,
.header-icon-btn,
.hamb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--slate);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.header-search-btn:hover,
.hamb:hover {
  background: var(--surface-variant);
  color: var(--primary-ink);
}

/* The call and WhatsApp glyphs are white SVG files, so these buttons carry
   the slate fill (white on orange would be 2.5:1) on the white header and in
   the white drawer alike. */
.header-icon-btn {
  background: var(--hero-void);
}

.header-icon-btn:hover {
  background: var(--secondary);
}

.header-icon-btn img {
  width: 18px;
  height: 18px;
}

/* main.js swaps in the plus glyph while the drawer is open; turn it into a
   cross, as the modal close buttons do. */
body.locked .hamb svg {
  transform: rotate(45deg);
}

.header-search-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(22rem, 70vw);
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.header-search.open .header-search-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.header-search-panel form {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 0.5rem;
}

.header-search-panel input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
}

.header-search-ic {
  color: var(--outline);
}

.header-search-go {
  color: var(--primary-ink);
}

.header-contact-icons {
  display: flex;
  gap: 0.25rem;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.65rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--on-primary);
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 12px 26px -14px rgba(254, 127, 45, 0.6);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.nav-cta:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.hamb {
  display: none;
}

/* --- mega menus (desktop only) --- */

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 95;
  /* Fully opaque: at 98% the white hero headlines behind show through. */
  background: var(--white);
  border-top: 1px solid rgba(208, 213, 221, 0.5);
  box-shadow: var(--shadow-lg);
  /* GSAP drives display/opacity/visibility/clip-path from main.js, so the only
     thing declared here is the closed state it opens from. */
  display: none;
}

.studio-in,
.mega-head {
  padding-block: 2.5rem;
}

/* Eight service pillars as two rows of four. */
.studio-cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 2rem;
}

/* Rule between the two rows. */
.studio-col:nth-child(n + 5) {
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.studio-col-h {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.studio-ic {
  display: inline-flex;
  color: var(--primary-ink);
}

.studio-col-h b {
  font-family: var(--font-display);
  font-size: 0.875rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--deep-navy);
}

.studio-col-h b a:hover {
  color: var(--primary-ink);
}

.studio-col > a {
  display: block;
  padding-block: 0.3rem;
  font-size: 0.875rem;
  line-height: 1.35;
  color: var(--slate);
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}

.studio-col > a:hover {
  color: var(--primary-ink);
  transform: translateX(2px);
}

/* Per-column accent, cycling the tone tokens. */
.studio-col:nth-child(8n + 1) .studio-ic { color: var(--indigo); }
.studio-col:nth-child(8n + 2) .studio-ic { color: var(--purple); }
.studio-col:nth-child(8n + 3) .studio-ic { color: var(--red); }
.studio-col:nth-child(8n + 4) .studio-ic { color: var(--teal); }
.studio-col:nth-child(8n + 5) .studio-ic { color: var(--green); }
.studio-col:nth-child(8n + 6) .studio-ic { color: var(--indigo); }
.studio-col:nth-child(8n + 7) .studio-ic { color: var(--amber); }
.studio-col:nth-child(8n + 8) .studio-ic { color: var(--teal); }

.mega-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: end;
  justify-content: space-between;
  padding-bottom: 0;
}

.mega-head h2 {
  margin-top: 0.75rem;
  font-size: 1.5rem;
}

.mega-head > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--primary-ink);
}

.mega-head > a svg {
  transition: transform 0.2s var(--ease);
}

.mega-head > a:hover svg {
  transform: translateX(3px);
}

/* Industries menu: seven industry cards plus a "let's talk" card, as two
   rows of four. */
.ind-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding-block: 2rem 2.5rem;
}

.ind-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ind-card:hover,
.ind-card.current {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.ind-card-media {
  display: block;
  height: 6.5rem;
  overflow: hidden;
  background: var(--surface-variant);
}

.ind-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}

.ind-card:hover .ind-card-media img {
  transform: scale(1.05);
}

.ind-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.9rem 1rem 1rem;
}

.ind-card-body > span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--primary-ink);
}

.ind-card-body b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--ink);
}

.ind-card-body small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--slate);
}

/* The eighth card has no image: a slate panel inviting other sectors. */
.ind-card.more {
  justify-content: flex-end;
  border-color: var(--hero-void);
  background: var(--hero-void);
}

.ind-card.more .ind-card-body > span {
  font-size: 1.25rem;
  color: var(--primary);
}

.ind-card.more b {
  font-size: 1.125rem;
  color: var(--white);
}

.ind-card.more em {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary);
}

.ind-card.more em svg {
  width: 16px;
}

/* --- mobile nav --- */

.mobile-nav {
  display: none;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  padding: 1.5rem;
  border-top: 1px solid rgba(208, 213, 221, 0.5);
  background: var(--white);
}

.mobile-nav.show {
  display: block;
}

.mobile-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.mobile-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
}

.mobile-search-ic {
  color: var(--outline);
}

/* Each row is <span>number</span>label<svg arrow>. */
.mobile-nav > div > a {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  gap: 0 0.75rem;
  align-items: center;
  padding-block: 0.7rem;
  border-bottom: 1px solid rgba(208, 213, 221, 0.4);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
}

.mobile-nav > div > a.current {
  color: var(--primary-ink);
  font-weight: 600;
}

.mobile-nav > div > a svg {
  width: 16px;
  color: var(--outline);
}

.mobile-nav > div > a span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--outline);
}

.mobile-contact-icons {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.mobile-est {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.9rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--on-primary);
  font-weight: 700;
}

/* ---- 07 heroes --------------------------------------------------------- */

/* Shared frame. The home hero runs dark; inner heroes run light, so the
   shared rules stay colour-neutral and each variant sets its own palette. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: 4.5rem 5rem;
  background: var(--hero-void);
  color: var(--white);
}

/* --- homepage hero carousel ---
   Slide 1 is the brand video behind the original headline; slides 2-9 are
   the service pillars. Slides share one grid cell, so the hero keeps the
   tallest slide's height and never jumps. main.js moves `is-active` and
   `inert`; there is no autoplay, only arrows, tabs, keys and swipe. */
.hero.hero-carousel {
  display: grid;
  padding-block: 0;
}

.hero-slides {
  display: grid;
}

.hero-slide {
  position: relative;
  grid-area: 1 / 1;
  display: grid;
  align-items: center;
  padding-block: 4.5rem 3rem;
  opacity: 0;
  visibility: hidden;
  /* Outgoing slide clears fast; the incoming one waits for it, so two sets
     of copy never sit on top of each other mid-fade. */
  transition: opacity 0.25s ease-out, visibility 0s linear 0.25s;
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s var(--ease) 0.2s, visibility 0s linear 0s;
}

/* Video backdrop, held back by a slate scrim so the copy stays readable. */
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--hero-void) url("/videos/hero-code-poster.jpg") center / cover no-repeat;
}

.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(35, 61, 77, 0.97) 0%, rgba(35, 61, 77, 0.86) 48%, rgba(35, 61, 77, 0.7) 100%),
    linear-gradient(0deg, var(--hero-void) 0%, rgba(35, 61, 77, 0) 35%);
}

/* Pillar slides: a soft orange glow behind the framed photo. */
.hero-slide-image {
  background: radial-gradient(55% 70% at 80% 45%, rgba(254, 127, 45, 0.16), transparent 70%);
}

.hero-kicker {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.8);
}

.hero-kicker b {
  color: var(--primary);
}

.hero-title {
  max-width: 18ch;
  color: var(--white);
}

.hero-shot {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 80px -30px rgba(18, 18, 18, 0.7);
}

.hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  scale: 1.06;
  transition: scale 1.4s var(--ease);
}

.hero-slide.is-active .hero-shot img {
  scale: 1;
}

/* Controls: previous arrow, a tab per slide along a shared rule, next arrow. */
.hero-controls {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding-bottom: 2.5rem;
}

.hero-arrow {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  color: var(--white);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.hero-arrow:hover {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--on-primary);
}

.hero-tabs {
  position: relative;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
}

.hero-tabs::-webkit-scrollbar {
  display: none;
}

.hero-tabs button {
  flex: 1 1 0;
  display: grid;
  gap: 0.15rem;
  min-height: 44px;
  padding: 0.75rem 0.85rem 0;
  border-top: 2px solid rgba(255, 255, 255, 0.16);
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.72);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.hero-tabs button b {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(226, 232, 240, 0.72);
}

.hero-tabs button:hover {
  color: var(--white);
}

.hero-tabs button.is-active {
  border-top-color: var(--primary);
  color: var(--white);
}

.hero-tabs button.is-active b {
  color: var(--primary);
}

@media (max-width: 760px) {
  .hero-slide {
    padding-block: 2.5rem 1.75rem;
  }

  .hero-controls {
    gap: 0.5rem;
  }

  .hero-tabs button {
    flex: 1 0 auto;
    padding-inline: 0.6rem;
  }

  .hero-shot {
    aspect-ratio: 16 / 10;
  }
}

/* Dotted grid wash behind the hero copy. */
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(120% 90% at 20% 10%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 20% 10%, #000 0%, transparent 70%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3rem;
  align-items: center;
}

@media (min-width: 1000px) {
  .hero-content {
    grid-template-columns: 1.05fr 1fr;
    gap: 4rem;
  }
}

.hero-copy {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.hero-copy h1 {
  max-width: 18ch;
}

.hero-copy > p {
  max-width: 48ch;
  font-size: 1.125rem;
  color: rgba(226, 232, 240, 0.85);
}

/* Eyebrow chip row above the home headline. */
.hero-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.7);
}

.hero-label span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--neon-cyan);
}

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

/* Proof trio, separated by thin rules. */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.hero-proof > div {
  display: grid;
  gap: 0.15rem;
}

.hero-proof strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--white);
}

.hero-proof span {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.72);
}

.hero-proof > i {
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* Breadcrumbs. Visual only in the source; now paired with BreadcrumbList. */
.hero-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: rgba(226, 232, 240, 0.75);
}

.hero-crumbs a:hover {
  color: var(--neon-cyan);
}

.hero-crumbs [aria-current] {
  color: var(--white);
}

.crumb-sep {
  width: 14px;
  color: rgba(255, 255, 255, 0.3);
}

.scroll-cue {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 3rem auto 0;
  width: min(var(--container), calc(100% - 3rem));
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.scroll-cue span {
  width: 2rem;
  height: 1px;
  background: currentColor;
}

/* --- home hero visual: device mock plus orbiting vendor marks --- */

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 24rem;
}

.visual-halo {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(42% 52% at 30% 25%, rgba(254, 127, 45, 0.6), transparent 62%),
    radial-gradient(38% 46% at 75% 20%, rgba(255, 163, 102, 0.28), transparent 62%),
    radial-gradient(46% 56% at 70% 80%, rgba(232, 105, 26, 0.42), transparent 64%);
  filter: blur(14px);
  pointer-events: none;
}

.brand-ball {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  animation: ball-float 7s var(--ease) infinite;
}

.brand-ball svg {
  width: 18px;
}

@keyframes ball-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

.chip-openai     { top: 4%;  left: 6%;   animation-delay: 0s; }
.chip-claude     { top: 16%; right: 4%;  animation-delay: 0.6s; }
.chip-gemini     { top: 46%; left: 0;    animation-delay: 1.2s; }
.chip-mistral    { bottom: 20%; right: 0; animation-delay: 1.8s; }
.chip-perplexity { bottom: 4%; left: 14%; animation-delay: 2.4s; }
.chip-n8n        { top: 0;   left: 48%;  animation-delay: 3s; }
.chip-ollama     { bottom: 0; right: 30%; animation-delay: 3.6s; }

.hero-device {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(35, 61, 77, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
}

/* Photographic backdrop sits behind the overlaid panel. */
.hero-device-photo {
  width: 100%;
  height: 7rem;
  object-fit: cover;
  opacity: 0.35;
}

.device-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(18, 18, 18, 0.9);
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.7);
}

.device-bar i {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}

.device-bar span {
  margin-left: 0.35rem;
  flex: 1;
}

.device-bar b {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.18);
  color: #7ee2a8;
  font-size: 0.6875rem;
  font-weight: 600;
}

.device-shell {
  display: grid;
  grid-template-columns: 3rem 1fr;
  background: rgba(18, 18, 18, 0.82);
}

.device-shell aside {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1rem 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  justify-items: center;
}

.mini-logo {
  display: grid;
  grid-template-columns: repeat(2, 5px);
  gap: 2px;
  margin-bottom: 0.5rem;
}

.mini-logo i {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: var(--inverse-primary);
}

.device-shell aside > span {
  width: 1.25rem;
  height: 0.3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.device-shell aside > span.active {
  background: var(--neon-cyan);
}

.device-shell > main {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}

.device-shell > main header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.device-shell > main header small {
  display: block;
  font-size: 0.6875rem;
  color: rgba(226, 232, 240, 0.72);
}

.device-shell > main header strong {
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--white);
}

.device-shell > main header button {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.6875rem;
  color: rgba(226, 232, 240, 0.85);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.health-score,
.activity-chart {
  display: grid;
  gap: 0.3rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.health-score span,
.activity-chart span {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.health-score b,
.activity-chart b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.health-score b small {
  font-size: 0.875rem;
  color: var(--neon-cyan);
}

/* Progress track, filled by the inner <em>. */
.health-score i {
  display: block;
  height: 0.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.health-score i em {
  display: block;
  width: 92%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--neon-cyan));
}

.health-score > small {
  font-size: 0.625rem;
  color: #7ee2a8;
}

.activity-chart svg {
  width: 100%;
  height: 2rem;
  stroke: var(--neon-cyan);
  stroke-width: 2;
}

.agent-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
}

.agent-row > span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.agent-row > span i {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.agent-row > span i.pulse {
  background: #22c55e;
  animation: pulse-dot 2s var(--ease) infinite;
}

@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.8);
  }
}

.agent-row b {
  display: block;
  font-size: 0.75rem;
  color: var(--white);
}

.agent-row small {
  display: block;
  font-size: 0.625rem;
  color: rgba(226, 232, 240, 0.72);
}

.agent-row strong {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--neon-cyan);
}

/* --- inner page hero --- */

.ind-hero {
  padding-block: 3.5rem 4.5rem;
}

.ind-hero-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
}

.ind-hero-shot {
  width: min(100%, 30rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 36px 80px -34px rgba(0, 0, 0, 0.7);
}

.ind-hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Floating credential/feature cards over the hero image. */
.float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white);
  animation: ball-float 8s var(--ease) infinite;
}

.float-card.security {
  top: 8%;
  left: -2%;
}

.float-card.shipped {
  bottom: 10%;
  right: -2%;
  animation-delay: 1.4s;
}

.float-card i {
  display: grid;
  place-items: center;
}

.float-card i img {
  width: 22px;
  height: 22px;
}

/* Icon-only badges float over dark heroes; the slate icons need a white
   disc behind them to read. */
.float-card.icon-only {
  padding: 0.7rem;
  border-color: rgba(255, 255, 255, 0.6);
  background: var(--white);
  box-shadow: 0 14px 30px -12px rgba(18, 18, 18, 0.45);
}

.float-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
}

.float-card small {
  display: block;
  font-size: 0.6875rem;
  color: rgba(226, 232, 240, 0.7);
}

/* Credential card variant on the seven industry heroes: a white card with an
   icon tile or short-code badge beside a two-line label. `.cred-shield` and
   `.cred-doc` are position modifiers on the card, not icon tiles. */
.float-card.cred {
  gap: 0.75rem;
  padding: 0.8rem 1.05rem 0.8rem 0.8rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid rgba(254, 127, 45, 0.1);
  box-shadow:
    0 24px 46px -14px rgba(18, 18, 18, 0.5),
    0 3px 10px rgba(18, 18, 18, 0.1);
  color: var(--deep-navy);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.float-card.cred-shield {
  left: -7%;
  bottom: 9%;
}

.float-card.cred-doc {
  right: -6%;
  top: 10%;
  animation-delay: 1.4s;
}

@media (max-width: 1000px) {
  .float-card.cred {
    max-width: 82%;
  }

  .float-card.cred-shield {
    left: 0;
    bottom: 5%;
  }

  .float-card.cred-doc {
    right: 0;
    top: 5%;
  }
}

.cred-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 0.7rem;
  background: linear-gradient(140deg, var(--primary), var(--secondary));
  color: var(--on-primary);
  box-shadow: 0 6px 14px rgba(254, 127, 45, 0.35);
}

.cred-ic svg {
  width: 19px;
  stroke-width: 2;
}

.cred-badge {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 2.4rem;
  height: 2.4rem;
  padding: 0 0.6rem;
  border-radius: 0.7rem;
  background: var(--surface-variant);
  border: 1px solid rgba(254, 127, 45, 0.15);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--primary-ink);
}

/* --- tool, case and listing hero variants --- */

.tool-hero {
  padding-block: 3.5rem;
}

.tool-hero-content {
  display: grid;
  gap: 1.25rem;
  max-width: 48rem;
}

/* The listing hero is copy only. Case heroes keep the shared two-column
   grid: copy left, the project screenshot right. */
.cs-listing-hero .hero-content {
  grid-template-columns: 1fr;
}

.cs-hero-media {
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cs-listing-feat {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  width: min(var(--container), calc(100% - 3rem));
  margin: 3rem auto 0;
}

@media (min-width: 820px) {
  .cs-listing-feat {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cs-feature {
  display: grid;
  gap: 0.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease);
}

.cs-feature:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.1);
}

.cs-feature-shot img {
  width: 100%;
  height: 9rem;
  object-fit: cover;
}

.cs-feature-body {
  display: grid;
  gap: 0.4rem;
  padding: 0 1.25rem 1.25rem;
}

.cs-feature-body small {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.cs-feature-body b {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--white);
}

.cs-feature-body em {
  font-style: normal;
  font-size: 0.8125rem;
  color: rgba(226, 232, 240, 0.75);
}

.cs-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--neon-cyan);
}

/* ---- 08 bands ---------------------------------------------------------- */

/* Feature ribbon directly under a hero. The most reused band on the site. */
.hc-strip {
  background: var(--deep-navy);
  color: rgba(226, 232, 240, 0.9);
}

.hc-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  padding-block: 1.25rem;
}

.hc-strip span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
}

.hc-strip svg {
  width: 18px;
  color: var(--neon-cyan);
}

/* Horizontal logo rails. CSS-driven marquee rather than a scroll listener. */
/* main.js drifts these by writing scrollLeft each frame and lets a visitor drag
   them, so this must stay scrollable and must not animate anything itself. */
.logo-rail {
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

.logo-rail::-webkit-scrollbar {
  display: none;
}

/* No-JS fallback: one spread-out row rather than a clipped strip. */
.logo-rail-track {
  display: flex;
  align-items: center;
  gap: 3rem;
  min-width: 100%;
  justify-content: space-between;
}

/* main.js adds .is-live once it has cloned enough logos to loop. */
.logo-rail.is-live .logo-rail-track {
  width: max-content;
  min-width: 0;
  justify-content: flex-start;
}

.tech {
  padding-block: var(--section-gap-md);
  background: var(--surface-gray);
}

.tech .wrap > span {
  display: block;
  margin-bottom: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--outline);
}

.tech-row > div {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  flex: none;
  color: var(--slate);
}

.tech-row img {
  height: 2rem;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s var(--ease), opacity 0.3s var(--ease);
}

.tech-row > div:hover img {
  filter: none;
  opacity: 1;
}

.tech-row span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

/* Animated stat band. main.js counts [data-count] up on first view. */
.proof-section {
  padding-block: var(--section-gap);
  background: var(--hero-void);
  color: var(--white);
}

.proof-heading {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 3rem;
}

@media (min-width: 900px) {
  .proof-heading {
    grid-template-columns: 1.4fr 1fr;
  }
}

.proof-heading h2 {
  margin-top: 1rem;
  color: var(--white);
}

.proof-heading > p {
  color: rgba(226, 232, 240, 0.7);
}

.stats {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 760px) {
  .stats {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
}

.stats article {
  display: grid;
  gap: 0.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats article.featured {
  background: linear-gradient(135deg, rgba(254, 127, 45, 0.5), rgba(232, 105, 26, 0.3));
  border-color: rgba(211, 187, 255, 0.3);
}

.stats header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.72);
}

.stats header i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--neon-cyan);
}

.stat-number {
  display: flex;
  align-items: flex-start;
  gap: 0.15rem;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-number sup {
  font-size: 0.4em;
  color: var(--neon-cyan);
}

.stat-number .stat-star svg {
  width: 1rem;
  fill: var(--amber);
  stroke: none;
}

.stats h3 {
  font-size: 1.125rem;
}

.stats p {
  font-size: 0.9375rem;
  color: rgba(226, 232, 240, 0.7);
}

.stats footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.stats footer i {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

/* ---- 09 card grids ----------------------------------------------------- */

/* Pillar rows: a numbered list of services, one row per leaf. */
.services-list {
  display: grid;
  gap: 1rem;
}

.pillar {
  display: grid;
  gap: 0.75rem 1.5rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}

@media (min-width: 860px) {
  .pillar {
    grid-template-columns: 4rem 1fr 11rem;
    align-items: start;
  }
}

.pillar:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.pillar-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--outline);
}

.pillar-title span {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

.pillar-title h3 {
  font-size: 1.375rem;
}

.pillar > p {
  grid-column: 1 / -1;
  max-width: 60ch;
  color: var(--slate);
}

.pillar .pills {
  grid-column: 1 / -1;
}

.pillar > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  grid-column: 1 / -1;
  font-weight: 700;
  color: var(--primary-ink);
}

.pillar > a svg {
  transition: transform 0.2s var(--ease);
}

.pillar:hover > a svg {
  transform: translateX(4px);
}

@media (min-width: 860px) {
  .pillar > p,
  .pillar .pills {
    grid-column: 2 / 3;
  }

  .pillar > a {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    justify-content: flex-end;
  }
}

/* Row accent tone. The markup adds one of the six tone classes. */
.pillar.indigo .pillar-title span { color: var(--indigo-text); }
.pillar.teal   .pillar-title span { color: var(--teal-text); }
.pillar.amber  .pillar-title span { color: var(--amber-text); }
.pillar.green  .pillar-title span { color: var(--green-text); }
.pillar.red    .pillar-title span { color: var(--red-text); }
.pillar.purple .pillar-title span { color: var(--purple-text); }

.pillar.indigo:hover { border-color: var(--indigo); }
.pillar.teal:hover   { border-color: var(--teal); }
.pillar.amber:hover  { border-color: var(--amber); }
.pillar.green:hover  { border-color: var(--green); }
.pillar.red:hover    { border-color: var(--red); }
.pillar.purple:hover { border-color: var(--purple); }

/* Numbered audience cards. */
.hc-who-grid {
  display: grid;
  gap: 1rem;
}

/* Always four cards: two by two, then one row. */
@media (min-width: 680px) {
  .hc-who-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .hc-who-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hc-who-grid article {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--surface-gray);
  border: 1px solid transparent;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.hc-who-grid article:hover {
  border-color: var(--line);
  transform: translateY(-4px);
}

.hc-who-grid span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: var(--outline);
}

.hc-who-grid i,
.hc-hipaa-grid i,
.lg-areas-grid i {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: rgba(254, 127, 45, 0.08);
  color: var(--primary-ink);
}

.hc-who-grid h3,
.hc-hipaa-grid h3,
.lg-areas-grid h3 {
  font-size: 1.0625rem;
}

.hc-who-grid p,
.hc-hipaa-grid p,
.lg-areas-grid p {
  font-size: 0.9375rem;
  color: var(--slate);
}

/* Approach / capability cards. */
.hc-hipaa-grid,
.lg-areas-grid {
  display: grid;
  gap: 1rem;
}

/* Explicit column counts, chosen so every card count in use divides evenly:
   capability grids hold 3, 4 or 6 cards; the industry areas grid holds 16.
   auto-fit left orphans (4 + 2, 5 + 5 + 5 + 1). */
@media (min-width: 680px) {
  .hc-hipaa-grid,
  .lg-areas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hc-hipaa-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .hc-hipaa-grid:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hc-hipaa-grid:has(> :nth-child(4):last-child),
  .lg-areas-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hc-hipaa-grid article,
.lg-areas-grid article {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

.hc-hipaa-grid article:hover,
.lg-areas-grid article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.hc-hipaa,
.lg-areas {
  background: var(--surface-gray);
}

/* Callout under an approach grid, with standard/tech chips. */
.hc-hipaa-note {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--white);
}

.hc-hipaa-note b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
}

.hc-hipaa-note p {
  color: var(--slate);
}

.hc-hipaa-chips {
  margin-top: 1rem;
}

/* Homepage industries grid, image-backed. */
.industries {
  padding-block: var(--section-gap);
}

.industry-grid {
  display: grid;
  gap: 1rem;
}

/* Seven industries: pairs with the odd last card spanning the row, then
   four + three as in the source. */
@media (min-width: 720px) {
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .industry-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .industry-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .industry-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

/* Column flex so "Explore industry" sits on the bottom edge across a row. */
.industry-grid article {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.industry-grid article:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.industry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--outline);
}

.industry-top i,
.industry-top span {
  color: var(--primary-ink);
}

.industry-image {
  border-radius: var(--radius);
  overflow: hidden;
}

.industry-image img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.industry-grid article:hover .industry-image img {
  transform: scale(1.05);
}

/* "Relevant proof" over the client name. */
.industry-proof {
  display: grid;
  gap: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
}

.industry-proof b {
  color: var(--deep-navy);
}

.industry-grid article > a {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-weight: 700;
  color: var(--primary-ink);
}

/* --- homepage "What we build": capability bento ---
   Four columns, three rows: AI development is a featured slate card two
   columns by two rows, six cards fill single cells, and the last card spans
   two cells so the grid closes square. Each card is wholly clickable through
   its heading link's ::after. */
.cap-grid {
  display: grid;
  gap: 1rem;
}

@media (min-width: 680px) {
  .cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cap-card.is-featured {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1100px) {
  .cap-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cap-card.is-featured {
    grid-column: span 2;
    grid-row: span 2;
  }

  .cap-card.is-wide {
    grid-column: span 2;
  }
}

.cap-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cap-card:hover,
.cap-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.cap-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.cap-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: rgba(254, 127, 45, 0.12);
  color: var(--primary-ink);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}

.cap-icon svg {
  width: 22px;
}

.cap-card:hover .cap-icon,
.cap-card:focus-within .cap-icon {
  background: var(--primary);
  color: var(--on-primary);
}

.cap-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--outline);
}

.cap-kicker {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

.cap-card h3 {
  font-size: 1.25rem;
}

.cap-card h3 a {
  color: inherit;
}

.cap-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.cap-card h3 a:focus-visible {
  outline: none;
}

.cap-card:has(h3 a:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.cap-card p {
  font-size: 0.9375rem;
  color: var(--slate);
}

.cap-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cap-pills span {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-variant);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--slate);
}

.cap-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-ink);
}

.cap-go svg {
  width: 16px;
  transition: transform 0.3s var(--ease);
}

.cap-card:hover .cap-go svg {
  transform: translate(3px, -3px);
}

/* Featured card: the slate panel with an orange glow and a dotted wash. */
.cap-card.is-featured {
  overflow: hidden;
  padding: 2.25rem;
  border-color: var(--hero-void);
  background:
    radial-gradient(70% 60% at 85% 15%, rgba(254, 127, 45, 0.3), transparent 65%),
    var(--hero-void);
  color: var(--white);
  --em-from: var(--primary);
  --em-to: #ffa366;
}

.cap-card.is-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 65%);
  pointer-events: none;
}

.cap-card.is-featured > * {
  position: relative;
}

/* Copy sits on the card's lower edge; the wash and glow fill the space above. */
.cap-card.is-featured .cap-kicker {
  margin-top: auto;
  padding-top: 2rem;
}

.cap-card.is-featured .cap-go {
  margin-top: 0.75rem;
}

.cap-card.is-featured h3 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  color: var(--white);
}

.cap-card.is-featured p {
  max-width: 34ch;
  font-size: 1.0625rem;
  color: rgba(226, 232, 240, 0.85);
}

.cap-card.is-featured .cap-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--primary);
  color: var(--on-primary);
}

.cap-card.is-featured .cap-icon svg {
  width: 26px;
}

.cap-card.is-featured .cap-num,
.cap-card.is-featured .cap-pills span {
  color: rgba(226, 232, 240, 0.8);
}

.cap-card.is-featured .cap-kicker,
.cap-card.is-featured .cap-go {
  color: var(--neon-cyan);
}

.cap-card.is-featured .cap-pills span {
  background: rgba(255, 255, 255, 0.1);
}

.cap-card.is-featured:hover {
  border-color: var(--primary);
}

/* ---- 10 narrative ------------------------------------------------------ */

/* Four-step process. The step-icon is three bars that fill in sequence. */
.process-grid {
  display: grid;
  gap: 1rem;
  counter-reset: step;
}

/* Always four steps: two by two, then one row. */
@media (min-width: 680px) {
  .process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .process-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.process-grid article {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.5rem;
  border-top: 2px solid var(--line);
  transition: border-color 0.3s var(--ease);
}

.process-grid article:hover {
  border-top-color: var(--primary);
}

.process-grid span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--outline);
}

.step-icon {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 1.25rem;
}

.step-icon i {
  width: 4px;
  border-radius: 2px;
  background: var(--primary);
  opacity: 0.3;
}

.step-icon i:nth-child(1) { height: 45%; }
.step-icon i:nth-child(2) { height: 72%; }
.step-icon i:nth-child(3) { height: 100%; }

.process-grid article:hover .step-icon i {
  opacity: 1;
}

.process-grid p {
  font-size: 0.9375rem;
  color: var(--slate);
}

/* Outcome checklist beside a headline and CTA. */
.ux-outcomes {
  background: var(--surface-gray);
}

.ux-outcomes-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .ux-outcomes-grid {
    grid-template-columns: 1fr 1.1fr;
  }
}

.ux-outcomes-grid h2 {
  margin-top: 0.5rem;
}

.ux-outcomes-grid > div:first-child {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}


.ux-outcomes-grid > div:first-child p {
  color: var(--slate);
}

.ux-checklist {
  display: grid;
  gap: 1rem;
}

@media (min-width: 620px) {
  .ux-checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ux-checklist article {
  display: grid;
  gap: 0.45rem;
  align-content: start;
  padding: 1.35rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}

.ux-checklist b {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--primary-ink);
}

.ux-checklist h3 {
  font-size: 1rem;
}

.ux-checklist p {
  font-size: 0.9375rem;
  color: var(--slate);
}

/* Blueprint split: image-backed panel beside numbered steps. */
.blueprint-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 980px) {
  .blueprint-grid {
    grid-template-columns: 1fr 1.05fr;
  }
}

/* --blueprint-img is set inline per page. */
.blueprint-visual {
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: end;
  min-height: 24rem;
  padding: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--white);
  background-image: linear-gradient(180deg, rgba(18, 18, 18, 0.35) 0%, rgba(18, 18, 18, 0.92) 70%),
    var(--blueprint-img);
  background-size: cover;
  background-position: center;
}

.blueprint-visual .label {
  color: rgba(226, 232, 240, 0.75);
}

.blueprint-visual h3 {
  font-size: 1.5rem;
}

.blueprint-visual p {
  color: rgba(226, 232, 240, 0.8);
}

.blueprint-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.blueprint-stats span {
  display: grid;
  gap: 0.1rem;
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.75);
}

.blueprint-stats b {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--neon-cyan);
}

.blueprint-copy {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.blueprint-steps {
  display: grid;
  gap: 1rem;
}

.blueprint-step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.blueprint-step:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.blueprint-step i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(254, 127, 45, 0.1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  color: var(--primary-ink);
}

.blueprint-step h3 {
  font-size: 1.0625rem;
  margin-bottom: 0.25rem;
}

.blueprint-step p {
  font-size: 0.9375rem;
  color: var(--slate);
}

/* Fit / anti-fit columns. */
.fit-section {
  background: var(--surface-gray);
}

.fit-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 820px) {
  .fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.fit-col {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--white);
  border: 1px solid var(--line);
}

.fit-col > i {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
}

.fit-col.good > i {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.fit-col.bad > i {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}

.fit-col ul {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fit-col li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: var(--slate);
}

.fit-col.good li svg {
  color: #16a34a;
}

.fit-col.bad li svg {
  color: var(--red);
}

/* About page link columns and sister-company grid. */
.about-intro {
  padding-block: var(--section-gap);
}

/* The intro paragraph runs much longer than the heading, so the shared
   bottom alignment left the heading floating mid-block. Pin it to the top. */
.about-intro .section-head {
  align-items: start;
}

/* On the homepage the head is the whole section; nothing follows it. */
.about-intro .section-head:last-child {
  margin-bottom: 0;
}

.about-lists {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 820px) {
  .about-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Disciplines and industries: two matching cards of link rows. */
.about-list {
  padding: 1.75rem 1.75rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.about-list h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--primary);
  font-size: 1.125rem;
}

.about-link-grid {
  display: grid;
  counter-reset: about-link;
}

.about-link-grid a {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0.75rem;
  margin-inline: -0.75rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.6rem;
  font-weight: 500;
  color: var(--ink);
  counter-increment: about-link;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.about-link-grid a::before {
  content: counter(about-link, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--outline);
}

.about-link-grid a + a {
  border-top: 1px solid var(--surface-variant);
}

.about-link-grid a:hover {
  background: rgba(254, 127, 45, 0.08);
  color: var(--primary-ink);
}

.about-link-grid svg {
  width: 16px;
  color: var(--outline);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.about-link-grid a:hover svg {
  color: var(--primary-ink);
  transform: translate(2px, -2px);
}

.about-why-grid {
  margin-top: 1rem;
}

/* Sister companies: icon beside the copy, so two cards fill the row
   instead of floating in it. */
.sister-grid article {
  grid-template-columns: auto 1fr;
  column-gap: 1.25rem;
  align-items: start;
  padding: 2rem;
  border-color: var(--line);
}

.sister-grid article > i {
  grid-row: span 2;
}

.sister-grid h3 {
  font-size: 1.25rem;
}

.sister-grid h3 a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.2s var(--ease);
}

.sister-grid h3 a:hover {
  color: var(--primary-ink);
}

.sister-grid h3 svg {
  width: 16px;
  color: var(--outline);
}

/* --- trust panel: copy, metrics and a safeguard list --- */

.hc-trust {
  padding-block: var(--section-gap);
  background: var(--hero-void);
  color: var(--white);
}

.hc-trust-inner {
  display: grid;
  gap: 2.5rem;
  align-items: start;
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}

@media (min-width: 960px) {
  .hc-trust-inner {
    grid-template-columns: 1.1fr 1fr;
  }
}

.hc-trust-copy h2 {
  margin: 1rem 0;
  color: var(--white);
}

.hc-trust-copy > p {
  color: rgba(226, 232, 240, 0.75);
}

.case-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  margin-top: 1.75rem;
}

.case-metrics > div {
  display: grid;
  gap: 0.2rem;
}

.case-metrics b {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--neon-cyan);
}

.case-metrics span {
  font-size: 0.8125rem;
  color: rgba(226, 232, 240, 0.72);
}

.hc-safeguards {
  display: grid;
  gap: 0.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.hc-safeguards span {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 0.75rem;
  font-size: 0.9375rem;
  color: rgba(226, 232, 240, 0.85);
}

.hc-safeguards svg {
  color: #7ee2a8;
}

/* ---- FAQ accordion ----------------------------------------------------- */

.faq {
  background: var(--surface-gray);
}

.faq-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .faq-grid {
    grid-template-columns: 1fr 1.3fr;
  }
}

.faq-grid > div:first-child {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.faq-grid > div:first-child p {
  color: var(--slate);
}

.faq-grid > div:first-child > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--primary-ink);
}

.questions {
  display: grid;
  gap: 0.75rem;
}

.questions article {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.questions h3 {
  margin: 0;
  font-size: 1rem;
}

.questions button {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.35rem;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--deep-navy);
}

.questions button span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--outline);
}

.questions button i {
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--primary-ink);
  transition: transform 0.3s var(--ease);
}

.questions article.open button i {
  transform: rotate(180deg);
}

/* Collapsed by default; main.js toggles .open on the article. */
.questions article > div {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}

.questions article.open > div {
  grid-template-rows: 1fr;
}

.questions article > div > p {
  overflow: hidden;
  margin: 0;
  padding-inline: 1.35rem;
  color: var(--slate);
  font-size: 0.9375rem;
}

.questions article.open > div > p {
  padding-bottom: 1.35rem;
}

/* ---- calculator teaser ------------------------------------------------- */

.calc {
  background: var(--hero-void);
  color: var(--white);
}

.calc-inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

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

.calc-copy {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.calc-copy h2 {
  color: var(--white);
}

.calc-copy p {
  color: rgba(226, 232, 240, 0.75);
}

.btn.lime {
  background: var(--primary);
  color: var(--on-primary);
}

.btn.lime:hover {
  opacity: 0.9;
}

/* Static preview of the estimator UI. */
.calc-window {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.calc-window header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.72);
}

.calc-window .progress {
  display: flex;
  gap: 0.35rem;
}

.calc-window .progress i,
.calc-window .progress span {
  flex: 1;
  height: 3px;
  border-radius: 999px;
}

.calc-window .progress i {
  background: var(--neon-cyan);
}

.calc-window .progress span {
  background: rgba(255, 255, 255, 0.15);
}

.calc-window h3 {
  font-size: 1.125rem;
}

/* Decorative mock of the estimator: the buttons are inert. */
.calc-window .choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.5rem;
}

.calc-window .choices button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.875rem;
  text-align: left;
  color: rgba(226, 232, 240, 0.85);
  pointer-events: none;
}

.calc-window .choices button svg {
  flex: none;
  width: 16px;
}

.calc-window .choices button.selected {
  border-color: var(--neon-cyan);
  background: rgba(255, 163, 102, 0.12);
  color: var(--white);
}

.calc-window .choices button.selected svg {
  color: var(--neon-cyan);
}

.calc-window footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.72);
}

.calc-window footer b {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--white);
}

.calc-embedded-tool {
  margin-top: 2.5rem;
}

/* ---- 11 case studies --------------------------------------------------- */

/* Snapshot strip directly under a case hero. */
.cs-snapshot-sec {
  padding-block: 2rem;
  background: var(--deep-navy);
  color: var(--white);
}

.cs-snapshot {
  display: grid;
  gap: 1.25rem;
}

/* Four across only once the longest live-site domain fits a quarter row. */
@media (min-width: 560px) {
  .cs-snapshot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .cs-snapshot {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs-snap {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  min-width: 0;
}

.cs-snap span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.cs-snap b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
}

.cs-snap a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--neon-cyan);
}

.cs-snap a svg {
  width: 15px;
}

/* Overview paragraph plus a challenge callout. */
.cs-brief-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 900px) {
  .cs-brief-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}

.cs-brief-lead p {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--slate);
}

.cs-brief-challenge {
  display: grid;
  gap: 0.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-gray);
  border-left: 3px solid var(--primary);
}

.cs-brief-tag {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

.cs-brief-challenge p {
  color: var(--slate);
}

/* Outlined button for light panels. It must restate the background, or
   `.btn.dark`'s navy fill shows through under the navy label. */
.btn.ghost.dark {
  border-color: rgba(91, 100, 114, 0.3);
  background: var(--white);
  color: var(--deep-navy);
}

.btn.ghost.dark:hover {
  background: var(--surface-variant);
}

/* Numbered scope cards. */
.cs-scope {
  display: grid;
  gap: 1rem;
}

/* Three or four cards per case: three sit in one row; four go two by two,
   then one row. */
@media (min-width: 680px) {
  .cs-scope {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-scope:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .cs-scope:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cs-scope article {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
}

.cs-scope span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--primary-ink);
}

.cs-scope h3 {
  font-size: 1.0625rem;
}

.cs-scope p {
  font-size: 0.9375rem;
  color: var(--slate);
}

/* Results band. Rendered only where a project has real figures. */
.cs-results {
  padding-block: var(--section-gap-md);
  background: var(--hero-void);
  color: var(--white);
}

.cs-metrics {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 680px) {
  .cs-metrics {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

.cs-metrics > div {
  display: grid;
  gap: 0.3rem;
}

.cs-metrics b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--neon-cyan);
}

.cs-metrics span {
  font-size: 0.875rem;
  color: rgba(226, 232, 240, 0.75);
}

/* "See it live" band. */
.cs-live-sec {
  padding-block: var(--section-gap-md);
}

.cs-live {
  display: grid;
  gap: 2rem;
  align-items: center;
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--deep-navy);
  color: var(--white);
  overflow: hidden;
}

@media (min-width: 900px) {
  .cs-live {
    grid-template-columns: 1fr 1fr;
  }
}

.cs-live-copy {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.cs-live-copy h2 {
  color: var(--white);
}

.cs-live-copy p {
  color: rgba(226, 232, 240, 0.75);
}

.cs-live-shot {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cs-live-shot img {
  width: 100%;
  object-fit: cover;
}

/* --- case cards: listing grid and the related trio --- */

.cs-grid,
.cs-rel-grid {
  display: grid;
  gap: 1.25rem;
}

/* 42 cases divide into threes; the related trio is always three. */
@media (min-width: 640px) {
  .cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  .cs-rel-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

/* Shot on top, body filling the rest, so the CTA can sit on the card's
   bottom edge across a row of uneven copy. */
.cs-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.cs-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.cs-card-shot {
  display: block;
  overflow: hidden;
  background: var(--surface-variant);
}

.cs-card-shot img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}

.cs-card:hover .cs-card-shot img {
  transform: scale(1.04);
}

.cs-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.35rem;
}

.cs-card-body small {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

.cs-card-body b {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--deep-navy);
}

.cs-card-body em {
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--slate);
}

.cs-card-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-ink);
}

.cs-card-cta svg {
  width: 16px;
  transition: transform 0.2s var(--ease);
}

.cs-card:hover .cs-card-cta svg {
  transform: translateX(3px);
}

/* --- filter pills --- */

.work-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.work-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.work-pill span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--outline);
}

.work-pill:hover {
  border-color: var(--primary);
  color: var(--primary-ink);
}

.work-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.work-pill.is-active span {
  color: rgba(255, 255, 255, 0.7);
}

/* Shown by main.js when a filter matches nothing. */
.work-card.is-hidden {
  display: none;
}

.work-empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--slate);
}

/* ---- 12 showcases ------------------------------------------------------ */

/* Homepage project carousel. */
.project-showcase {
  padding-block: var(--section-gap);
  background: var(--surface-gray);
  overflow: hidden;
}

.project-heading {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

@media (min-width: 900px) {
  .project-heading {
    grid-template-columns: 1fr auto;
  }
}

.project-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--outline);
}

.project-controls button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.project-controls button:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.project-stage {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: var(--radius-xl);
  background: var(--white);
  border: 1px solid var(--line);
}

@media (min-width: 960px) {
  .project-stage {
    grid-template-columns: 1fr 1.15fr;
  }
}

.project-copy {
  display: grid;
  gap: 1rem;
  justify-items: start;
}

.project-industry {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-ink);
}

/* Caption under the screenshot: slide number, then client name. */
.project-name {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--deep-navy);
}

.project-name span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--primary-ink);
}

.project-copy h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.875rem);
}

.project-copy > p {
  color: var(--slate);
}

.project-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project-proof span {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: var(--surface-variant);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate);
}

.project-media {
  min-width: 0;
}

/* Navy frame around the screenshot. */
.project-browser {
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  background: var(--deep-navy);
}

.project-shot {
  border-radius: var(--radius);
  overflow: hidden;
}

.project-shot img {
  width: 100%;
  object-fit: cover;
}

/* Fade applied by main.js as slides change. */
.project-reveal {
  animation: project-in 0.5s var(--ease) both;
}

@keyframes project-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.project-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Each tab is <span>number</span><b>name</b><i></i>. The <i> is the source's
   progress underline; the pill treatment here does not use it. */
.project-tabs button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--slate);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.project-tabs button span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--primary-ink);
}

.project-tabs button i {
  display: none;
}

.project-tabs button.active {
  background: var(--deep-navy);
  border-color: var(--deep-navy);
  color: var(--white);
}

.project-tabs button.active span {
  color: var(--neon-cyan);
}

/* Industry-page project slider. */
.hc-case {
  padding-block: var(--section-gap);
}

.hc-case-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
}

@media (min-width: 960px) {
  .hc-case-grid {
    grid-template-columns: 1fr 1.1fr;
  }
}

.hc-case-copy {
  display: grid;
  gap: 1rem;
  justify-items: start;
  min-width: 0;
}

.hc-case-copy h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.875rem);
}

.hc-case-copy > p {
  color: var(--slate);
}

/* min-width: 0 lets the slider dots shrink instead of widening the column on
   pages with many slides (ecommerce has eleven). */
.hc-case-media {
  position: relative;
  min-width: 0;
}

.hc-slider {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}

/* Slides stack in one grid cell so the frame keeps the tallest slide's height;
   positioning them absolutely collapsed the container to nothing. */
.hc-slider {
  display: grid;
}

.hc-slider figure {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

/* main.js only adds .active once the first interval fires or a dot is clicked,
   so the first slide has to be visible before any of that happens. */
.hc-slider figure:first-child,
.hc-slider figure.active {
  opacity: 1;
}

.hc-slider:has(figure.active) figure:first-child:not(.active) {
  opacity: 0;
}

.hc-slider img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hc-slider figcaption {
  padding: 0.75rem 1rem;
  background: var(--deep-navy);
  color: rgba(226, 232, 240, 0.8);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.hc-slider-dots {
  display: flex;
  gap: 0.4rem;
  margin-top: 1rem;
}

.hc-slider-dots button {
  flex: 0 1 2rem;
  min-width: 0.6rem;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  transition: background-color 0.2s var(--ease);
}

.hc-slider-dots button.on {
  background: var(--primary);
}

/* ---- 13 conversion ----------------------------------------------------- */

/* Contact section: form plus a details aside. Injected above the footer on
   every page except /contact, which carries the same form as its body. */
.contact-section {
  padding-block: var(--section-gap);
}

.contact-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 1.35fr 1fr;
  }
}

.contact-form {
  display: grid;
  gap: 1.5rem;
}

.lead-fields {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 620px) {
  .lead-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Textareas and the project-type select run full width. */
  .lead-fields label:has(textarea),
  .lead-fields label:has(select) {
    grid-column: 1 / -1;
  }
}

.lead-fields label {
  display: grid;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.lead-fields input,
.lead-fields select,
.lead-fields textarea {
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 2px solid var(--line);
  background: none;
  font-family: var(--font-body);
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s var(--ease);
}

.lead-fields textarea {
  resize: vertical;
}

.lead-fields input::placeholder,
.lead-fields textarea::placeholder {
  color: var(--outline);
}

.lead-fields input:focus,
.lead-fields select:focus,
.lead-fields textarea:focus {
  border-bottom-color: var(--primary);
}

.lead-error {
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  background: rgba(186, 26, 26, 0.08);
  color: var(--error);
  font-size: 0.875rem;
}

.lead-error a {
  font-weight: 700;
  text-decoration: underline;
}

.lead-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  justify-self: start;
  min-height: 44px;
  padding: 0.95rem 2.25rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--on-primary);
  font-weight: 700;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.lead-next:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.lead-next:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.contact-side {
  display: grid;
  gap: 1.5rem;
}

.contact-side-card {
  display: grid;
  gap: 1rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--deep-navy);
  color: var(--white);
}

.contact-side-card .label {
  color: rgba(226, 232, 240, 0.72);
}

.contact-email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  word-break: break-all;
}

.contact-email:hover {
  color: var(--neon-cyan);
}

.contact-email img {
  width: 20px;
  height: 20px;
}

.contact-facts {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-facts dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.contact-facts dd {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  color: rgba(226, 232, 240, 0.9);
}

.contact-facts dd a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.contact-facts dd img {
  width: 16px;
  height: 16px;
}

.contact-basis {
  font-size: 0.8125rem;
  color: rgba(226, 232, 240, 0.7);
}

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

.contact-side-list article {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.85rem;
  align-items: start;
}

.contact-side-list i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(254, 127, 45, 0.1);
  color: var(--primary-ink);
}

.contact-side-list b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
}

.contact-side-list span {
  font-size: 0.875rem;
  color: var(--slate);
}

.contact-alt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  font-weight: 700;
  color: var(--primary-ink);
}

/* --- social showcase --- */

.social-showcase {
  padding-block: var(--section-gap-md);
  background: var(--surface-gray);
}

.social-heading {
  display: grid;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

@media (min-width: 900px) {
  .social-heading {
    grid-template-columns: 1.4fr 1fr;
  }
}

.social-heading > p {
  color: var(--slate);
}

.social-grid {
  display: grid;
  gap: 0.75rem;
}

/* Seven channels: pairs with the odd last card spanning the row, then
   4 + 3 as in the source, never 5 + 2. */
@media (min-width: 560px) {
  .social-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .social-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .social-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .social-grid > :last-child:nth-child(odd) {
    grid-column: auto;
  }
}

.social-card {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.social-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.social-card > span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: var(--outline);
}

.social-card i {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--surface-variant);
}

.social-card i img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.social-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--deep-navy);
}

.social-card small {
  font-size: 0.8125rem;
  color: var(--slate);
}

.social-card em {
  color: var(--outline);
}

/* --- modals: estimate and lead wizard --- */

.estimate-modal,
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: start center;
  padding: 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.estimate-modal[hidden],
.lead-modal[hidden] {
  display: none;
}

/* Both dialogs restate the text colour: the estimator is also embedded in
   the homepage's dark calculator section and would inherit white. */
.estimate-dialog,
.lead-dialog {
  position: relative;
  width: 100%;
  color: var(--ink);
  margin-block: 2.5rem;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.estimate-dialog {
  max-width: 60rem;
  display: grid;
}

@media (min-width: 900px) {
  .estimate-dialog {
    grid-template-columns: 1.3fr 1fr;
  }
}

/* The pop-up estimator fills the viewport less an even margin. On wide
   screens the question panel scrolls on its own while the live result stays
   in view beside it; stacked on small screens, the whole dialog scrolls. The
   homepage's embedded copy (.is-embedded) keeps its natural height. */
.estimate-modal:not(.is-embedded) {
  --modal-gap: clamp(0.75rem, 3vh, 2rem);
  place-items: center;
  padding: var(--modal-gap);
  overflow: hidden;
}

.estimate-modal:not(.is-embedded) .estimate-dialog {
  max-width: 72rem;
  height: calc(100dvh - 2 * var(--modal-gap));
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 900px) {
  .estimate-modal:not(.is-embedded) .estimate-dialog {
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
  }

  .estimate-modal:not(.is-embedded) .estimate-form,
  .estimate-modal:not(.is-embedded) .estimate-result {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }

  .estimate-modal:not(.is-embedded) .estimate-form {
    padding: 2.75rem 3rem 3rem;
  }
}

.lead-dialog {
  max-width: 34rem;
  padding: 2.25rem;
  display: grid;
  gap: 1.5rem;
}

.modal-close,
.lead-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--slate);
  /* The source's close glyph is a plus; rotate it into a cross. */
  transform: rotate(45deg);
  transition: background-color 0.2s var(--ease);
}

.modal-close:hover,
.lead-close:hover {
  background: var(--surface-variant);
}

.estimate-form {
  display: grid;
  gap: 1.5rem;
  align-content: start;
  padding: 2.25rem;
}

/* Keep the eyebrow clear of the absolutely placed close button. */
.estimate-form > .label {
  margin-right: 3rem;
}

.estimate-form h2 {
  font-size: 1.5rem;
}

.estimate-form > p {
  color: var(--slate);
  font-size: 0.9375rem;
}

.estimate-group {
  display: grid;
  gap: 0.75rem;
}

.estimate-group > b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--deep-navy);
}

.product-options,
.topic-options,
.compliance-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.product-options button,
.topic-options button,
.compliance-options button {
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--slate);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.product-options button:hover,
.topic-options button:hover,
.compliance-options button:hover {
  border-color: var(--primary);
  color: var(--primary-ink);
}

.product-options button.selected,
.topic-options button.selected,
.compliance-options button.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

/* Quantity slider, shown only for products that have a screen scope. */
.screen-group {
  display: grid;
  gap: 0.75rem;
}

.screen-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.screen-label strong {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--primary-ink);
}

.screen-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.screen-control button {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
}

.screen-control button:hover {
  border-color: var(--primary);
  color: var(--primary-ink);
}

.screen-control input[type="range"] {
  flex: 1;
  accent-color: var(--primary);
}

.screen-group small {
  font-size: 0.8125rem;
  color: var(--outline);
}

.design-brief {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--slate);
}

.design-brief textarea {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--white);
  font-family: var(--font-body);
  resize: vertical;
  outline: none;
}

.design-brief textarea:focus {
  border-color: var(--primary);
}

.design-brief small {
  text-align: right;
  color: var(--outline);
}

/* Result pane. Reports an hourly rate, not a total. */
.estimate-result {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 2.25rem;
  background: var(--hero-void);
  color: var(--white);
}

.estimate-result > span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.7);
}

.estimate-result h3 {
  font-size: clamp(2.25rem, 6vw, 3rem);
  font-weight: 800;
}

.estimate-result h3 i {
  font-style: normal;
  font-size: 0.4em;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.72);
}

.estimate-result > small {
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.72);
}

.estimate-result .stack {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

.estimate-result .stack > span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.stack-detail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.stack-detail small {
  color: rgba(226, 232, 240, 0.72);
}

.stack-detail b {
  text-align: right;
}

.estimate-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--on-primary);
  font-weight: 700;
}

.estimate-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.estimate-result > p {
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.72);
}

/* Empty state before enough questions are answered. */
.estimate-empty {
  display: grid;
  gap: 0.75rem;
}

.estimate-empty i {
  font-family: var(--font-mono);
  font-style: normal;
  color: var(--neon-cyan);
}

.estimate-empty h3 {
  font-size: 1.5rem;
}

.estimate-empty p {
  font-size: 0.9375rem;
  color: rgba(226, 232, 240, 0.72);
}

.estimate-empty > div {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.estimate-empty > div span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: rgba(226, 232, 240, 0.72);
}

.estimate-empty > div span svg {
  color: rgba(255, 255, 255, 0.25);
}

.estimate-empty > div span.done {
  color: var(--white);
}

.estimate-empty > div span.done svg {
  color: #7ee2a8;
}

/* Brief and contact steps inside the result pane. */
.result-summary {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
}

.result-summary b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
}

.result-summary b i {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 500;
  color: rgba(226, 232, 240, 0.72);
}

.result-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.result-summary-tags span {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.6875rem;
  color: rgba(226, 232, 240, 0.8);
}

.result-recap {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
}

.result-recap span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.result-recap p {
  font-size: 0.875rem;
  color: rgba(226, 232, 240, 0.8);
}

.result-step-h {
  font-size: 1.5rem;
}

.result-step-p {
  font-size: 0.9375rem;
  color: rgba(226, 232, 240, 0.7);
}

.result-fields {
  display: grid;
  gap: 0.85rem;
}

.result-fields label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: rgba(226, 232, 240, 0.72);
}

.result-fields input,
.result-fields textarea {
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  outline: none;
}

.result-fields input:focus,
.result-fields textarea:focus {
  border-color: var(--neon-cyan);
}

.result-fields textarea {
  resize: vertical;
}

.result-fields-grow textarea {
  min-height: 12rem;
}

.result-error {
  font-size: 0.875rem;
  color: #ff9a9a;
}

.result-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.result-actions .estimate-submit {
  flex: 1;
}

.result-back {
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(226, 232, 240, 0.8);
}

.result-back:hover {
  background: rgba(255, 255, 255, 0.08);
}

.result-done {
  display: grid;
  gap: 0.75rem;
}

/* Embedded variant: the calculator inlined on the homepage. */
.estimate-modal.is-embedded {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  padding: 0;
  overflow: visible;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Embedded in the homepage's dark calculator band, whose background matches
   the result panel's: outline the card and lift the panel so both halves
   read as one object. */
.estimate-modal.is-embedded .estimate-dialog {
  margin: 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.estimate-modal.is-embedded .estimate-result {
  background: var(--deep-navy);
}

.estimate-modal.is-embedded .modal-close {
  display: none;
}

/* --- lead wizard --- */

/* Ends short of the close button in the dialog's corner. */
.lead-progress {
  display: flex;
  gap: 0.35rem;
  margin-right: 3rem;
}

.lead-progress i {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: var(--surface-variant);
}

.lead-progress i.active {
  background: var(--primary);
}

.lead-step {
  display: grid;
  gap: 1.25rem;
}

.lead-step h2 {
  font-size: 1.5rem;
}

.lead-step > p {
  color: var(--slate);
  font-size: 0.9375rem;
}

.lead-choices {
  display: grid;
  gap: 0.75rem;
}

.lead-choices button {
  display: grid;
  gap: 0.25rem;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.lead-choices button:hover {
  border-color: var(--primary);
}

.lead-choices button.selected {
  border-color: var(--primary);
  background: rgba(254, 127, 45, 0.05);
}

.lead-choices b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--deep-navy);
}

.lead-choices span {
  font-size: 0.875rem;
  color: var(--slate);
}

.lead-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.lead-actions .lead-next {
  flex: 1;
  justify-self: stretch;
}

.lead-back {
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--slate);
}

.lead-back:hover {
  background: var(--surface-variant);
}

/* main.js sets this on the dialog while the calendar step is showing. */
.lead-dialog.lead-cal-mode {
  max-width: 46rem;
}

.lead-calendly {
  min-height: 34rem;
}

.lead-cal-loading {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--slate);
}

.lead-success {
  text-align: left;
}

/* --- tool pages --- */

.tool-section {
  padding-block: var(--section-gap-md) var(--section-gap);
}

.tool-widget {
  display: grid;
  gap: 1.5rem;
  width: min(var(--container), calc(100% - 3rem));
  margin-inline: auto;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--white);
  box-shadow: var(--shadow);
}

.tool-noscript {
  padding: 2rem;
  text-align: center;
  color: var(--slate);
}

.tool-cards {
  display: grid;
  gap: 1rem;
}

/* Four tool cards: two by two, then one row. */
@media (min-width: 680px) {
  .tool-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .tool-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Column flex so the CTA can sit on the bottom edge across a row. */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.tool-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.tool-card-ic {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: rgba(254, 127, 45, 0.08);
  color: var(--primary-ink);
}

.tool-card b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--deep-navy);
}

.tool-card p {
  font-size: 0.9375rem;
  color: var(--slate);
}

.tool-card-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--primary-ink);
}

.tool-card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-variant);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--outline);
}

/* --- interactive tools: cost calculator + AI readiness ------------------
   Everything below is injected by main.js at runtime, so none of it appears
   in the built HTML. The two widgets share this markup vocabulary. */

.tool-card-inner {
  display: grid;
  gap: 1.5rem;
}

/* Breadcrumb back to the service page a visitor arrived from. */
.tool-card-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--outline);
}

.tool-card-crumb a {
  color: var(--primary-ink);
  font-weight: 600;
}

.tool-card-crumb a:hover {
  text-decoration: underline;
}

.tool-card-crumb i {
  font-style: normal;
}

/* Step rail. `.on` is the current step, `.done` the completed ones. */
.tool-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.tool-progress span {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--outline);
}

.tool-progress span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.375rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
}

.tool-progress span.on {
  color: var(--primary-ink);
}

.tool-progress span.on::before {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: inset 0 0 0 2px var(--white);
}

.tool-progress span.done {
  color: var(--slate);
}

.tool-progress span.done::before {
  border-color: var(--primary);
  background: var(--primary);
}

.tool-step {
  display: grid;
  gap: 1rem;
}

.tool-step h2 {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.tool-q-help {
  color: var(--slate);
  font-size: 0.9375rem;
}

/* Answer buttons. `.sel` marks the chosen one. */
.tool-choices {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 620px) {
  .tool-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* Wider answer sets: four across, or three when the count divides by three. */
@media (min-width: 1000px) {
  .tool-choices-2 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tool-choices-2:has(> :nth-child(3n):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tool-choice {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
  background: var(--white);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.tool-choice:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.tool-choice b {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--deep-navy);
}

.tool-choice small {
  font-size: 0.8125rem;
  color: var(--slate);
}

.tool-choice.sel {
  border-color: var(--primary);
  background: rgba(254, 127, 45, 0.06);
}

.tool-choice.sel b {
  color: var(--primary-ink);
}

.tool-textarea {
  width: 100%;
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  resize: vertical;
  outline: none;
}

.tool-textarea:focus {
  border-color: var(--primary);
}

.tool-design-brief-count {
  text-align: right;
  font-size: 0.75rem;
  color: var(--outline);
}

.tool-fields {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 620px) {
  .tool-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tool-fields label {
  display: grid;
  gap: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.tool-fields input {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  letter-spacing: normal;
  text-transform: none;
  outline: none;
}

.tool-fields input:focus {
  border-color: var(--primary);
}

.tool-error {
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: rgba(186, 26, 26, 0.08);
  color: var(--error);
  font-size: 0.875rem;
}

/* Back / continue row. */
.tool-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.tool-nav button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  color: var(--slate);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.tool-nav button:hover {
  background: var(--surface-variant);
}

/* The forward action is the primary one wherever it appears. */
.tool-nav button:last-child,
.tool-result-actions button:first-child {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  border-color: transparent;
  color: var(--on-primary);
}

.tool-nav button:last-child:hover,
.tool-result-actions button:first-child:hover {
  opacity: 0.92;
}

.tool-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- result --- */

.tool-result {
  display: grid;
  gap: 1.25rem;
}

.tool-result-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--outline);
}

.tool-result-range {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--deep-navy);
}

.tool-result-range em {
  font-style: normal;
  font-size: 0.32em;
  font-weight: 500;
  color: var(--slate);
}

.tool-result-note,
.tool-disclaimer {
  font-size: 0.8125rem;
  color: var(--outline);
}

.tool-stack {
  display: grid;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-gray);
}

.tool-stack > span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

.tool-stack-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.tool-stack-row small {
  color: var(--slate);
}

.tool-stack-row b {
  text-align: right;
  color: var(--deep-navy);
}

.tool-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.tool-result-actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 600;
  color: var(--slate);
}

.tool-recap {
  display: grid;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--surface-gray);
}

.tool-recap span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

.tool-recap b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--deep-navy);
}

.tool-recap b i {
  font-style: normal;
  font-size: 0.55em;
  font-weight: 500;
  color: var(--slate);
}

.tool-brief-preview {
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--line);
  font-size: 0.875rem;
  color: var(--slate);
}

/* --- AI readiness score --- */

.tool-score {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
}

/* Conic-fill progress ring. --pct is set inline by main.js (0-100), and the
   ::after punches the hole so the b sits in a clear centre. */
.tool-score-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--pct) * 1%), var(--surface-variant) 0);
  transition: background 0.6s var(--ease);
}

.tool-score-ring::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--white);
}

.tool-score-ring b {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--deep-navy);
}

.tool-score-ring b i {
  font-style: normal;
  font-size: 0.55em;
  color: var(--slate);
}

.tool-score-copy {
  flex: 1 1 14rem;
}

.tool-score-copy h2 {
  margin-bottom: 0.3rem;
  font-size: 1.5rem;
}

.tool-score-copy p {
  color: var(--slate);
}

.tool-rec h3 {
  margin-bottom: 0.6rem;
  font-size: 1.0625rem;
}

.tool-rec ul {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--slate);
  font-size: 0.9375rem;
}

.tool-approach {
  display: grid;
  gap: 0.35rem;
  padding: 1.35rem;
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
  background: var(--surface-gray);
}

.tool-approach > span {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--outline);
}

.tool-approach b {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--deep-navy);
}

.tool-approach p {
  font-size: 0.9375rem;
  color: var(--slate);
}

.tool-approach-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--primary-ink);
}

/* --- cards rendered into the async sections --- */

.google-review-card,
.blog-card {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

/* The one review on stage; .blog-card sizes to its grid cell instead. */
.google-review-card {
  width: min(100%, 37rem);
  min-height: 16rem;
}

.google-review-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.google-review-top b,
.google-review-top small {
  display: block;
}

.google-review-top small {
  font-size: 0.8125rem;
  color: var(--outline);
}

/* Reviewer photo when Google supplies one, otherwise an initial. */
.google-review-top img,
.review-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-variant);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--primary-ink);
}

.review-stars {
  display: inline-flex;
  gap: 0.1rem;
  color: var(--amber);
}

.review-stars svg {
  width: 15px;
  fill: currentColor;
  stroke: none;
}

.google-rating {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 800;
}

.review-google {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--outline);
}

.review-dots {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1rem;
}

.review-dots button {
  width: 1.75rem;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
}

.review-dots button.active {
  background: var(--primary);
}

.blog-card-media img {
  width: 100%;
  height: 9rem;
  object-fit: cover;
  border-radius: var(--radius);
}

.blog-card-fallback {
  height: 9rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity: 0.15;
}

.blog-card-body {
  display: grid;
  gap: 0.4rem;
}

.blog-card-body time {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--outline);
}

.blog-card-body h3 {
  font-size: 1.0625rem;
}

.blog-card-body p {
  font-size: 0.9375rem;
  color: var(--slate);
}

/* --- assorted JS-rendered bits --- */

.round-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--slate);
}

.cta-grid,
.final-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contextual-question,
.compact-group {
  display: grid;
  gap: 0.75rem;
}

.ball-green { color: var(--green); }
.ball-lime  { color: var(--lime); }
.ball-red   { color: var(--red); }

/* ---- 14 footer --------------------------------------------------------- */

.site-footer {
  background: var(--hero-void);
  color: rgba(226, 232, 240, 0.75);
}

.footer-intro {
  display: grid;
  gap: 2rem;
  padding-block: 3.5rem 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Same tracks and gap as .footer-map below, so the contact block starts on
   the Industries column line. */
@media (min-width: 900px) {
  .footer-intro {
    grid-template-columns: 2fr 1fr 1fr;
    column-gap: 2.5rem;
    align-items: start;
  }

  .footer-contact {
    grid-column: 2 / -1;
  }
}

.brand-light .brand-logo {
  height: 64px;
}

.footer-intro p {
  max-width: 34ch;
  margin-top: 1.25rem;
}

.footer-contact {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.footer-contact > span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.footer-contact > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--white);
  word-break: break-all;
}

.footer-contact > a:hover {
  color: var(--neon-cyan);
}

.footer-contact img {
  width: 18px;
  height: 18px;
}

.footer-contact small {
  font-size: 0.8125rem;
  color: rgba(226, 232, 240, 0.72);
}

.footer-map {
  display: grid;
  gap: 2.5rem;
  padding-block: 2.5rem;
}

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

.footer-map h3 {
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(226, 232, 240, 0.72);
}

.footer-services > div {
  display: grid;
  gap: 0 2rem;
}

@media (min-width: 560px) {
  .footer-services > div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.footer-services a,
.footer-column a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.45rem;
  font-size: 0.875rem;
  color: rgba(226, 232, 240, 0.7);
  transition: color 0.2s var(--ease);
}

.footer-services a:hover,
.footer-column a:hover {
  color: var(--white);
}

.footer-services a span {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: rgba(226, 232, 240, 0.7);
}

.footer-services a svg,
.footer-column a svg {
  width: 15px;
  margin-left: auto;
  color: rgba(226, 232, 240, 0.3);
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}

.footer-services a:hover svg,
.footer-column a:hover svg {
  transform: translate(2px, -2px);
  color: var(--neon-cyan);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  padding-block: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8125rem;
  color: rgba(226, 232, 240, 0.72);
}

.footer-bottom a:hover {
  color: var(--white);
}

/* ---- 15 async sections ------------------------------------------------- */

/* Google reviews and the latest-blog strip both self-hide when their source
   is not configured, so these styles only apply once content arrives. */
.google-reviews {
  padding-block: var(--section-gap-md);
}

/* Two columns: the rating summary, then one rotating review card. */
.google-reviews-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .google-reviews-grid {
    grid-template-columns: 0.82fr 1.18fr;
    gap: 4rem;
  }
}

.google-review-summary {
  display: grid;
  gap: 1rem;
  justify-items: start;
  min-width: 0;
}

.google-review-summary p {
  max-width: 24rem;
  color: var(--slate);
}

.google-review-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 18rem;
}

.google-reviews-more {
  margin-top: 1.5rem;
  text-align: center;
}

.blog-latest {
  padding-block: var(--section-gap-md);
  background: var(--surface-gray);
}

.blog-latest-grid {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 760px) {
  .blog-latest-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog-latest-more {
  margin-top: 1.5rem;
  text-align: center;
}

/* Skeletons while a fetch is in flight. The review skeleton is a card
   holding three shimmering bars; the blog one is a single block. */
.google-review-skeleton {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.google-review-skeleton i,
.blog-card-skeleton {
  border-radius: var(--radius);
  background: linear-gradient(
    100deg,
    var(--surface-variant) 20%,
    var(--surface-container) 40%,
    var(--surface-variant) 60%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
}

.google-review-skeleton i {
  height: 1rem;
}

.google-review-skeleton i:nth-child(2) {
  width: 85%;
}

.google-review-skeleton i:nth-child(3) {
  width: 58%;
}

.blog-card-skeleton {
  min-height: 9rem;
}

/* Status line in the summary column while reviews load or stay unconnected. */
.google-loading {
  font-size: 0.875rem;
  color: var(--outline);
}

@keyframes skeleton-shimmer {
  to {
    background-position: -200% 0;
  }
}

/* ---- 404 --------------------------------------------------------------- */

.nf {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 2rem;
  background: var(--hero-void);
  color: var(--white);
  text-align: center;
}

.nf-inner {
  display: grid;
  gap: 1rem;
  justify-items: center;
}

/* ---- 15b modifiers + section rhythm ------------------------------------ */

/* Label on a dark panel. */
.label.white {
  color: rgba(226, 232, 240, 0.7);
}

/* Text block inside a credential float card. */
.cred-tx {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.cred-tx b {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--deep-navy);
}

.cred-tx small {
  font-size: 0.6875rem;
  line-height: 1.25;
  color: var(--slate);
}

/* `.page-*` on <main> is a scoping hook the behaviour script reads; it carries
   no styling of its own. Declared here so a reader does not go looking. */

/* Section rhythm. Service and industry pages stack several plain `.section`
   blocks in a row; tinting every second one keeps them from reading as one
   undifferentiated column. Sections with their own background (hc-hipaa, faq,
   fit-section, ux-outcomes, project-showcase) opt out. */
.page-sub > .section:not([class*="hc-hipaa"]):not([class*="faq"]):not([class*="fit-"]):not([class*="ux-outcomes"]):nth-of-type(even),
.page-case > .section:not([class*="faq"]):nth-of-type(even) {
  background: var(--surface-gray);
}

/* ---- 16 responsive ----------------------------------------------------- */

/* Mega menus are desktop-only; below this the mobile drawer takes over. */
@media (max-width: 1100px) {
  .mega {
    display: none;
  }

  .navlinks,
  .header-search,
  .header-contact-icons,
  .nav-cta {
    display: none;
  }

  .hamb {
    display: inline-flex;
  }

  .nav {
    justify-content: space-between;
  }
}

@media (max-width: 900px) {
  :root {
    --section-gap: 4.5rem;
    --section-gap-md: 3rem;
  }

  .hero {
    padding-block: 3rem 3.5rem;
  }

  .hero-visual {
    min-height: 0;
  }

  /* The orbiting vendor marks have nowhere to orbit on a phone. */
  .brand-ball {
    display: none;
  }

  .float-card.security,
  .float-card.shipped {
    position: static;
    animation: none;
  }

  .ind-hero-media {
    min-height: 0;
    gap: 0.75rem;
  }

  .hero-proof > i {
    display: none;
  }

  .hero-proof {
    gap: 1rem 2rem;
  }

  .estimate-dialog,
  .lead-dialog {
    border-radius: var(--radius-lg);
  }

  .estimate-form,
  .estimate-result,
  .lead-dialog {
    padding: 1.5rem;
  }

  .cs-live,
  .tool-widget {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
  }

  .project-stage {
    padding: 1.25rem;
    border-radius: var(--radius-lg);
  }
}

@media (max-width: 620px) {
  /* Some CTAs carry long labels (a full domain, a service name). Tighter
     padding fits them; wrapping onto a second line is only the last resort. */
  .btn {
    max-width: 100%;
    padding-inline: 1.25rem;
    font-size: 0.9375rem;
    white-space: normal;
    text-align: center;
  }

  .wrap,
  .hc-trust-inner,
  .hc-case-grid,
  .cs-live,
  .tool-widget,
  .scroll-cue,
  .cs-listing-feat {
    width: calc(100% - 2rem);
  }

  .device-shell {
    grid-template-columns: 1fr;
  }

  .device-shell aside {
    display: none;
  }

  .overview-grid {
    grid-template-columns: 1fr;
  }

  .pillar {
    padding: 1.25rem;
  }

  .cs-snapshot {
    gap: 1rem;
  }

  .footer-bottom {
    justify-content: flex-start;
  }
}

/* ---- 17 reduced motion ------------------------------------------------- */

/* Everything decorative stops; nothing that reveals content may stay hidden. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .tool-score-ring {
    transition: none !important;
  }

  .brand-ball,
  .float-card,
  .logo-rail-track,
  .agent-row > span i.pulse,
  .type-caret,
  .google-review-skeleton i,
  .blog-card-skeleton {
    animation: none !important;
  }

  /* main.js already stops the rail drift under reduced motion; drop the fade
     mask too so nothing is visually clipped while scrolling by hand. */
  .logo-rail {
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* The reveal animation is additive: content must be visible regardless. */
  .hero-in,
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .preloader {
    display: none;
  }
}