/* ═══════════════════════════════════════════════════════════════════
   IN·DETAIL — ROBOTIC DESIGN SYSTEM  ·  site-wide
   Loads AFTER style.css and re-skins it to the light, high-tech language.
   Backgrounds #D7D7D7 · highlight #2598C7 · Archivo / Inter / Martian Mono
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces: the dark tokens are repointed to light greys, which
        flips the ~459 var() references in style.css in one move ── */
  --black:        #D7D7D7;
  --black-rich:   #D7D7D7;
  --black-deep:   #D0D0D0;
  --black-card:   #E4E4E4;
  --black-border: rgba(20,24,26,.16);
  --black-hover:  #FFFFFF;

  /* ── ink: the "white" tokens now carry text colour ── */
  --white:    #14181A;
  --white-90: rgba(20,24,26,.90);
  --white-60: rgba(20,24,26,.62);
  --white-30: rgba(20,24,26,.45);
  --white-10: rgba(20,24,26,.08);

  /* ── accent: one hue (197°), three jobs ── */
  --gold:       #2598C7;
  --gold-light: #2598C7;
  --gold-dim:   rgba(37,152,199,.10);
  --gold-glow:  rgba(37,152,199,.22);
  --blue:       #2598C7;
  --blue-mid:   #2598C7;
  --blue-glow:  rgba(37,152,199,.18);

  /* flat, not gradient — this alone neutralises 243 .text-gradient uses */
  --accent-gradient: linear-gradient(#2598C7, #2598C7);
  --blue-gradient:   linear-gradient(#2598C7, #2598C7);

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'Martian Mono', ui-monospace, SFMono-Regular, monospace;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 5px;

  --transition:      .45s cubic-bezier(.16, 1, .3, 1);
  --transition-slow: .9s  cubic-bezier(.16, 1, .3, 1);
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* new roles */
  --paper:     #D7D7D7;
  --paper-alt: #D0D0D0;
  --surface:   #E4E4E4;
  --surface-2: #FFFFFF;
  --ink:       #14181A;
  --ink-2:     #50565A;
  --ink-3:     #7C8386;
  --accent:    #2598C7;
  --accent-ink:#1A6A8B;   /* caption-sized text — 4.6:1+ on #D7D7D7 */
  --accent-glow:#7FD8F5;
  --hair:      rgba(20,24,26,.16);
}

html, body { background: var(--paper); color: var(--ink); }
body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; }

::selection { background: rgba(37,152,199,.24); color: var(--ink); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper-alt); }
::-webkit-scrollbar-thumb { background: #B4B4B4; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #9C9C9C; }

/* ── typography ─────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.section-heading, .hero-headline, .service-hero h1, .sub-hero h1,
.card-title, .retainer-heading, .hero-finale-line, .hero3d-tagline h2 {
  font-family: var(--font-display);
  letter-spacing: -.03em;
  color: var(--ink);
}
.section-heading, .hero-headline, .service-hero h1, .sub-hero h1 { font-weight: 700; }

/* the gradient device is retired — flat accent instead */
.text-gradient,
.hero-headline .highlight,
.stat-number, .placeholder-number, .price-num, .test-avatar, .card-badge {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--accent) !important;
}
.card-badge {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 2px;
  font-family: var(--font-mono);
  letter-spacing: .08em;
}

/* mono spec layer — eyebrows, tags, labels, small caps */
.section-tag, .service-hero-eyebrow, .hero-badge, .work-tag, .related-card-tag,
.price-label, .retainer-label, .contact-label, .form-label, .footer-col-title,
.sub-service-num, .pillar-link, .stat-label, .placeholder-label, .scroll-text,
.hero-finale-eyebrow, .breadcrumb {
  font-family: var(--font-mono) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .07em !important;
}
.section-tag, .service-hero-eyebrow, .hero-badge {
  display: inline-block;
  background: none !important;
  border: none !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 2px 0 2px 10px !important;
  color: var(--accent-ink) !important;
  font-size: 11px !important;
}
.stat-label, .work-tag, .related-card-tag, .price-label, .retainer-label,
.contact-label, .form-label, .sub-service-num, .placeholder-label, .scroll-text,
.hero-finale-eyebrow { color: var(--accent-ink) !important; }
.footer-col-title { color: var(--ink) !important; }

/* ── buttons: square, no pills, no glow-lift ─────────────────── */
.btn-primary, .btn-nav, .btn-submit, .btn-sm, .btn-full {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 3px !important;
  background: var(--ink) !important;
  color: #EDEDED !important;
  border: 1px solid var(--ink) !important;
  box-shadow: none !important;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary:hover, .btn-nav:hover, .btn-submit:hover, .btn-sm:hover, .btn-full:hover {
  background: #0B4A66 !important;
  border-color: #0B4A66 !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-ghost {
  border-radius: 3px !important;
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: none !important;
}
.btn-ghost:hover {
  background: transparent !important;
  color: #0B4A66 !important;
  border-color: #0B4A66 !important;
  transform: none !important;
  box-shadow: none !important;
}
.btn-arrow { transition: transform var(--transition); }
.btn-primary:hover .btn-arrow, .btn-ghost:hover .btn-arrow { transform: translate(2px, -2px); }

.filter-btn {
  border-radius: 2px !important;
  background: transparent !important;
  border: 1px solid var(--hair) !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2) !important;
}
.filter-btn:hover, .filter-btn.active {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #EDEDED !important;
}

/* ── nav ─────────────────────────────────────────────────────── */
.navbar { background: transparent; border-bottom: 1px solid transparent; }
.navbar.scrolled {
  background: rgba(215,215,215,.86) !important;
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--hair) !important;
  box-shadow: none !important;
}
.logo-img, .footer-logo-img { opacity: 1; }
.nav-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-radius: 0 !important;
  padding: 6px 0 !important;
  margin: 0 8px;
  border-bottom: 1px solid transparent;
}
.nav-link:hover, .nav-link.active { color: var(--ink); background: none !important; border-bottom-color: var(--accent); }
.nav-link::after { display: none !important; }
.hamburger span { background: var(--ink) !important; }

/* ── mobile navigation drawer ─────────────────────────────────
   Below 860px the inline nav is retired entirely and replaced by
   the #mnav sheet that mobile-nav.src.js builds from the same
   anchors. The two legacy panels (.nav-links.open @768 in
   style.css and .nav-links.mobile-open @860) are suppressed here
   so nothing can surface underneath the drawer.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .hamburger { display: flex !important; }
  .btn-nav   { display: none !important; }
  .nav-links,
  .nav-links.open,
  .nav-links.mobile-open { display: none !important; }
}

body.mnav-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
/* the WhatsApp bubble is fixed at z-index 900+ and otherwise floats on
   top of the sheet, competing with the drawer's own contact block */
body.mnav-locked .wa-widget { display: none; }

.mnav {
  position: fixed;
  inset: 0;
  z-index: 4000;
}
.mnav[hidden] { display: none; }

.mnav__scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 15, 17, .48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}
.mnav.is-open .mnav__scrim { opacity: 1; }

.mnav__sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(87vw, 380px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--hair);
  box-shadow: -24px 0 60px rgba(12, 15, 17, .22);
  /* a single cool bloom off the top corner, matching the hero stages */
  background-image: radial-gradient(120% 45% at 100% 0%, rgba(37,152,199,.16), transparent 62%);
  padding: max(18px, env(safe-area-inset-top)) 0 max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(102%);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  outline: none;
}
.mnav.is-open .mnav__sheet { transform: translateX(0); }

.mnav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 22px 18px;
}

.mnav__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.mnav__close {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-right: -8px;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: rgba(255, 255, 255, .5);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.mnav__close:hover { border-color: var(--accent); color: var(--accent-ink); }
.mnav__svg { width: 20px; height: 20px; flex: none; }

.mnav__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair);
}

.mnav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  /* 60px rows clear the 44px minimum tap target with room to spare */
  min-height: 60px;
  padding: 0 22px;
  border-bottom: 1px solid var(--hair);
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* the left rule is the active/pressed marker — it grows from the edge
   rather than filling the row, which would fight the flat paper ground */
.mnav__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 50%;
  transition: transform .24s ease;
}
.mnav__item.is-active::before,
.mnav__item:active::before { transform: scaleY(1); }
.mnav__item.is-active { background: rgba(255, 255, 255, .46); }
.mnav__item:active     { background: rgba(255, 255, 255, .46); }

.mnav__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: rgba(255, 255, 255, .5);
  color: var(--ink-2);
  transition: color .2s ease, border-color .2s ease;
}
.mnav__item.is-active .mnav__ico {
  color: var(--accent-ink);
  border-color: rgba(37, 152, 199, .5);
}

.mnav__label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.mnav__chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-2);
  opacity: .5;
}
.mnav__item.is-active .mnav__chev { color: var(--accent-ink); opacity: 1; }

.mnav__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 22px 0;
  margin-top: auto;
}

.mnav__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  margin-top: 4px;
  padding: 0 20px;
  border-radius: 3px;
  background: var(--ink);
  color: #EDEDED;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.mnav__cta:active { background: #000; }

.mnav__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
}
.mnav__meta .mnav__svg { width: 17px; height: 17px; color: var(--accent-ink); }
.mnav__meta:active { color: var(--accent-ink); }

/* rows settle in behind the sheet, so the drawer reads as one gesture
   rather than a panel that is already fully populated on arrival */
.mnav.is-open .mnav__item,
.mnav.is-open .mnav__foot {
  animation: mnav-in .34s cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: calc(90ms + var(--i) * 32ms);
}
@keyframes mnav-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav__sheet { transition: none; }
  .mnav__scrim { transition: none; }
  .mnav.is-open .mnav__item,
  .mnav.is-open .mnav__foot { animation: none; }
}

/* ── footer ──────────────────────────────────────────────────── */
.footer { background: var(--paper-alt) !important; border-top: 1px solid var(--hair) !important; }
.footer-link, .footer-tagline, .footer-copy, .footer-est { color: var(--ink-2) !important; }
.footer-link:hover { color: var(--accent-ink) !important; }
.footer-col-title { font-size: 11px; letter-spacing: .1em; }
.footer-top { border-bottom: 1px solid var(--hair) !important; }

.footer-legal { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.footer-legal .footer-link { font-size: 13px; }
@media (max-width: 700px) {
  .footer-legal { width: 100%; order: 3; margin-top: 4px; }
}

/* address / hours detail line on the contact card */
.contact-sub {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
a.contact-sub { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
a.contact-sub:hover { color: var(--ink); }

/* ── client reviews ──────────────────────────────────────────
   Real Google reviews, so the source is stated plainly under
   them and links back to the profile — which is also where new
   reviews need to be left.
   ──────────────────────────────────────────────────────────── */
.test-stars { color: var(--accent) !important; letter-spacing: 2px; }
.test-quote { color: var(--ink-2) !important; }
.test-source {
  margin-top: 26px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--ink-2);
}
.test-source a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.test-source a:hover { color: var(--ink); }
.test-source a + a { margin-left: 14px; }

/* Five reviews on a three-column grid leaves a short last row. Doubling to
   six columns and spanning each card by two keeps three per row, and lets
   the final pair start at column 2 so it centres — without margins, which
   would shrink the cards. */
@media (min-width: 901px) {
  .testimonials-grid:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, 1fr);
  }
  .testimonials-grid:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .testimonials-grid:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
}

/* ── legal pages: long-form prose ────────────────────────────
   These pages are read, not skimmed, so the measure is narrower
   and the rhythm looser than the marketing sections.
   ──────────────────────────────────────────────────────────── */
/* the unified hero geometry forces 100svh with !important and is declared
   later in this file, so the legal variant needs the extra class to win */
.service-hero.service-hero--plain {
  min-height: auto !important;
  padding-bottom: 40px;
}
.service-hero.service-hero--plain .service-hero-sub { min-height: 0 !important; }
.service-hero.service-hero--plain h1 { min-height: 0 !important; margin-bottom: 18px !important; }

.legal-section { padding-top: 0 !important; }

.legal-content {
  max-width: 74ch;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
}
.legal-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--accent-ink);
  padding-bottom: 22px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--hair);
}
.legal-content h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 44px 0 14px;
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 26px 0 10px;
}
.legal-content p { margin: 0 0 16px; }
.legal-content ul { margin: 0 0 18px; padding-left: 22px; }
.legal-content li { margin-bottom: 9px; }
.legal-content li::marker { color: var(--accent); }
.legal-content strong { color: var(--ink); font-weight: 600; }
.legal-content a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content a:hover { color: var(--ink); }

/* unfilled statutory detail — deliberately loud so it cannot ship unnoticed */
.legal-todo {
  background: #FFE9A8;
  color: #6A4B00;
  padding: 1px 7px;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .legal-content { font-size: 15px; }
  .legal-content h2 { font-size: 19px; margin-top: 36px; }
}

/* ── footer: social row + review call to action ──────────────── */
.footer-social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 0;
  border-bottom: 1px solid var(--hair);
}
.footer-social-links { display: flex; gap: 10px; }

.social-link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hair);
  border-radius: 3px;
  background: rgba(255, 255, 255, .4);
  color: var(--ink-2);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.social-link svg { width: 19px; height: 19px; }
.social-link:hover {
  color: var(--accent-ink);
  border-color: rgba(37, 152, 199, .55);
  background: #fff;
}

/* the review ask is the one thing in the footer that should look clickable
   at a glance — square, inked, matching .btn-primary elsewhere */
.btn-review {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 3px;
  background: var(--ink);
  color: #EDEDED !important;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.btn-review svg { width: 16px; height: 16px; color: var(--accent-glow); }
.btn-review:hover { background: var(--accent-ink); color: #fff !important; }
.btn-review:hover svg { color: #fff; }

@media (max-width: 600px) {
  .footer-social { flex-direction: column; align-items: flex-start; gap: 18px; }
  .btn-review { width: 100%; justify-content: center; }
}
.google-badge, .google-text { color: var(--ink-2) !important; }

/* ── heroes: light studio stage ──────────────────────────────── */
.hero, .hero--cinematic, .service-hero, .sub-hero, .hero3d {
  background: var(--paper) !important;
}
.service-hero::before, .sub-hero::before {
  background:
    radial-gradient(60% 55% at 78% 30%, rgba(37,152,199,.10), transparent 62%),
    radial-gradient(70% 60% at 12% 88%, rgba(255,255,255,.55), transparent 60%) !important;
}
/* copy left, character right — a directional scrim keeps the headline on
   flat grey instead of on top of the subject */
.hero-bg-img { object-position: 62% center; }
.hero-bg-overlay {
  background:
    linear-gradient(90deg,
      rgba(215,215,215,.98) 0%, rgba(215,215,215,.92) 30%, rgba(215,215,215,.55) 46%,
      rgba(215,215,215,.14) 62%, rgba(215,215,215,0) 76%),
    linear-gradient(180deg,
      rgba(215,215,215,.40) 0%, rgba(215,215,215,0) 20%,
      rgba(215,215,215,0) 70%, #D7D7D7 100%) !important;
}
/* inner-page heroes carry full-frame subjects, so they need a firmer wash
   than the homepage portrait to keep left-aligned copy readable */
.service-hero .hero-bg-overlay,
.hero3d .hero-bg-overlay,
.sub-hero .hero-bg-overlay {
  background:
    linear-gradient(90deg,
      rgba(215,215,215,.97) 0%, rgba(215,215,215,.92) 32%, rgba(215,215,215,.68) 50%,
      rgba(215,215,215,.34) 68%, rgba(215,215,215,.20) 100%),
    linear-gradient(180deg,
      rgba(215,215,215,.50) 0%, rgba(215,215,215,0) 26%,
      rgba(215,215,215,0) 64%, #D7D7D7 100%) !important;
}
@media (max-width: 900px) {
  .hero-bg-img { object-position: 68% center; }
  .hero-bg-overlay,
  .service-hero .hero-bg-overlay,
  .hero3d .hero-bg-overlay,
  .sub-hero .hero-bg-overlay {
    background:
      linear-gradient(180deg,
        rgba(215,215,215,.90) 0%, rgba(215,215,215,.84) 40%,
        rgba(215,215,215,.45) 66%, #D7D7D7 100%) !important;
  }
}
.hero-bg-vignette {
  background: radial-gradient(120% 90% at 50% 42%, transparent 46%, rgba(160,160,160,.30) 100%) !important;
}
.hero-bg-img { opacity: 1 !important; }

/* Homepage hero: the still is the base layer and the LCP element. The video
   sits above it at opacity 0 and only fades in once it can actually play, so
   a slow or blocked video costs the visitor nothing but the still they can
   already see. Frame 0 of the clip is this exact image, so the swap is silent. */
/* Both must be taken out of flow: .hero-bg-img in style.css is only sized
   (100%/100%, no position), which was fine while the hero held a single
   image. With the video added as a second child the two stacked vertically
   — the video was laid out a full hero-height BELOW the still and clipped
   away, so it played where nobody could see it. No z-index here on purpose:
   paint order follows the DOM (still → video → overlay → vignette), which
   keeps the scrims on top exactly as they were. */
.hero-still,
.hero-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-vid {
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}
.hero-vid.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-vid { display: none; }
}
/* the constellation canvas was drawn light-on-dark and is invisible here;
   it also ran an unthrottled O(n²) link pass every frame */
#particles-canvas { display: none !important; }
.hero-content, .service-hero-inner { position: relative; z-index: 3; }
.hero-sub, .service-hero-sub, .sub-hero-sub, .section-sub { color: var(--ink-2) !important; }
.scroll-line { background: linear-gradient(180deg, rgba(20,24,26,.45), transparent) !important; }
.hero-progress { background: rgba(20,24,26,.14) !important; box-shadow: none !important; }
.hero-progress > * { background: var(--accent) !important; box-shadow: none !important; }
.badge-dot { background: var(--accent-glow) !important; box-shadow: 0 0 0 3px rgba(127,216,245,.30), 0 0 12px rgba(127,216,245,.9) !important; }

/* ═══════════ UNIFIED HERO GEOMETRY ═══════════
   Every hero now uses the landing page's model: full-viewport stage,
   content vertically centred and locked to the container's left edge.
   Previously .service-hero was 60vh top-aligned, .sub-hero used a
   different padding, and .hero3d added a perspective offset — which is
   why headings and buttons landed in different places page to page. */
.service-hero,
.sub-hero,
.hero3d .hero3d-sticky {
  min-height: 100svh !important;
  display: flex !important;
  /* top-aligned at a fixed offset, NOT centred — centring a block whose
     height varies with copy length moves the heading page to page */
  align-items: flex-start !important;
  padding-top: calc(var(--nav-h) + 120px) !important;
  padding-bottom: 0 !important;
}
.service-hero > .container,
.sub-hero > .container,
.hero3d .container { width: 100%; }

/* one text column: same left edge, same measure, same internal rhythm.
   NOTE: inner-page heroes nest .container > .*-inner, so the inner block is
   what gets constrained. The homepage is different — .hero-content IS the
   container (max-width 1280 + auto margins), so it must NOT be in this list. */
.service-hero-inner,
.sub-hero-inner,
.hero3d-content {
  max-width: 860px;
  margin: 0;
  text-align: left;
  padding-top: 0 !important;
}

/* homepage: keep the container geometry, constrain the text inside it so the
   left edge still lines up with every other page */
.hero .hero-content,
.hero--cinematic .hero-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  padding-top: 60px;
  text-align: left;
}
.hero-headline, .hero-sub { max-width: 860px; }
.service-hero-inner .breadcrumb,
.sub-hero-inner .breadcrumb { margin-bottom: 26px; }

/* one headline size everywhere — .service-hero and .sub-hero previously
   used different clamps, so headings read at different sizes page to page.
   The min-height reserves two lines so what follows starts at a fixed y. */
.service-hero h1,
.sub-hero h1,
.hero3d-content h1 {
  font-size: clamp(38px, 5.6vw, 74px) !important;
  line-height: 1.05 !important;
  min-height: 2.1em;
  margin-bottom: 22px !important;
}

/* one intro-copy size, with a reserved measure, so the buttons land at the
   same y whether the paragraph runs two lines or four */
.service-hero-sub,
.sub-hero-sub {
  font-size: clamp(16px, 1.45vw, 19px) !important;
  line-height: 1.65 !important;
  margin-bottom: 36px !important;
  max-width: 40em;
  min-height: calc(1.65em * 4);
}
.service-hero-cta { margin-top: 0 !important; }

/* pointer from a category page to the deeper service page that owns the
   query — it has to read as a link, not as body copy */
.sub-hero-note { color: var(--ink-2); }
.sub-hero-note a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.sub-hero-note a:hover { color: var(--ink); }

/* the landing page joins the same two sizes. It keeps its own vertical
   rhythm — the min-height reserves above exist to line the service pages
   up with each other, and a four-line headline doesn't need them. */
.hero-headline {
  font-size: clamp(38px, 5.6vw, 74px) !important;
  line-height: 1.05 !important;
}
.hero-sub {
  font-size: clamp(16px, 1.45vw, 19px) !important;
  line-height: 1.65 !important;
}

/* solutions: keep the scroll-recede, but start from identity so the
   resting position matches every other hero */
.hero3d-content {
  transform: rotateX(calc(var(--p, 0) * 26deg)) translateZ(calc(var(--p, 0) * -220px)) !important;
}

@media (max-width: 900px) {
  .service-hero,
  .sub-hero,
  .hero3d .hero3d-sticky {
    min-height: 82svh !important;
    padding-top: calc(var(--nav-h) + 16px) !important;
  }
}

.breadcrumb { font-size: 10px; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent-ink); }
.breadcrumb-current { color: var(--accent-ink) !important; }
.breadcrumb-sep { color: var(--ink-3); }

/* 3D scroll hero (solutions) — keep the motion, relight it */
.hero3d .hero-bg-img { filter: brightness(calc(1 - var(--p, 0) * .12)) saturate(1) !important; }

/* the floating glass orbs/rings were decoration for the old dark hero.
   The new artwork carries its own holographic panels, so the two layers
   competed — retire the shapes and let the image do the work. */
.hero3d-shapes { display: none !important; }
.hero3d-hint { border-color: rgba(20,24,26,.35) !important; }
.hero3d-hint span { background: var(--ink) !important; }

/* ── sections & structure ────────────────────────────────────── */
.section { padding: clamp(84px, 10vw, 150px) 0; }
.solutions-section, .benefits-section, .sub-services-section, .ai-section,
.service-cta-section { background-image: none !important; }
.solutions-section, .work-section, .sub-services-section { background: var(--paper-alt) !important; }
.ai-section, .benefits-section, .related-section { background: var(--paper) !important; }

/* ── cards: hairline grid, no glow-lift ──────────────────────── */
.solutions-grid, .services-pillar-grid, .sub-services-grid, .related-grid,
.siblings-grid, .testimonials-grid {
  gap: 1px !important;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.solution-card, .services-pillar-card, .sub-service-card, .related-card,
.sibling-card, .testimonial-card, .benefit-card, .detail-list-item,
.contact-item, .ai-feature, .price-card, .retainer-card, .work-follow-banner,
.form-success-screen {
  background: var(--surface) !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  transition: background var(--transition) !important;
}
.benefit-card, .detail-list-item, .contact-item, .ai-feature, .price-card,
.retainer-card, .work-follow-banner, .form-success-screen {
  border: 1px solid var(--hair) !important;
}
.solution-card::before, .solution-card::after,
.services-pillar-card::before, .services-pillar-card::after { display: none !important; }
.solution-card:hover, .services-pillar-card:hover, .sub-service-card:hover,
.related-card:hover, .sibling-card:hover, .testimonial-card:hover,
.benefit-card:hover, .contact-item:hover, .ai-feature:hover, .work-card:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--surface-2) !important;
  border-color: var(--hair) !important;
}
/* hover resolves as a rule drawing, not a lift */
.solution-card, .services-pillar-card, .benefit-card { position: relative; }
.solution-card > .card-rule, .services-pillar-card > .card-rule { display: none; }
.solution-card::after, .services-pillar-card::after {
  content: '' !important; display: block !important;
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--accent); transition: width .7s var(--ease);
  z-index: 2;
}
.solution-card:hover::after, .services-pillar-card:hover::after { width: 100%; }

.card-icon, .benefit-icon {
  background: transparent !important;
  border: 1px solid var(--hair) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  color: var(--accent) !important;
}
.card-icon svg, .benefit-icon svg { color: var(--accent); }
.solution-card:hover .card-icon, .benefit-card:hover .benefit-icon {
  transform: none !important;
  border-color: var(--accent) !important;
}
.card-title, .sub-service-card h3, .related-card h3, .sibling-card h4,
.benefit-card h3, .services-pillar-card h3, .step-title, .detail-list-item h3, .detail-list-item h4,
.ai-feature h2, .ai-feature h4, .test-name, .faq-q {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--ink) !important;
}
.card-desc, .card-list a, .sub-service-card p, .related-card p, .sibling-card p,
.benefit-card p, .services-pillar-card p, .step-desc, .ai-text, .about-text,
.contact-text, .location-content p, .test-quote, .faq-a, .detail-list-item p {
  color: var(--ink-2) !important;
}
.card-list a:hover { color: var(--accent-ink) !important; }
.card-arrow { color: var(--accent) !important; }
.retainer-label { background: var(--accent) !important; color: #fff !important; border-radius: 2px !important; }
.solution-card--retainer { background: var(--surface-2) !important; }
.retainer-card::before, .ai-bg-glow { display: none !important; }

/* work grid — the mosaic, restored */
.work-grid { gap: 1px !important; background: var(--hair); }
.work-card { border-radius: 0 !important; background: var(--surface) !important; }
.work-img { filter: saturate(.9) contrast(1.03); transition: transform 1.1s var(--ease), filter .8s var(--ease) !important; }
.work-card:hover .work-img { transform: scale(1.04); filter: saturate(1) contrast(1.03); }
.work-overlay { background: linear-gradient(to top, rgba(20,24,26,.82), rgba(20,24,26,.15) 55%, transparent) !important; }
.work-overlay * { color: #fff !important; }
.work-placeholder { background: var(--surface) !important; border: 1px solid var(--hair) !important; }

/* testimonials */
.testimonial-card::before { color: rgba(20,24,26,.07) !important; }

/* pricing / retainer */
.price-card::after { background: var(--accent) !important; }
.price-num { color: var(--accent) !important; }

/* AI section */
.ai-img { border-radius: 3px; }
.ai-feature h2, .ai-feature h4 { color: var(--ink) !important; }

/* ── forms ───────────────────────────────────────────────────── */
/* background-color, NOT the shorthand — the shorthand resets background-repeat
   and makes the select's chevron tile across the whole field */
.form-input, .form-textarea, .form-select {
  background-color: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 2px !important;
  color: var(--ink) !important;
  font-family: var(--font-body);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(37,152,199,.16) !important;
  outline: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-3) !important; }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2314181A' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;
}
.form-label { color: var(--ink-2) !important; }

/* ── FAQ: a hairline list, not filled boxes.
   The base rule is `padding: 28px 0` (no horizontal padding), so boxing
   these pushed the question text flush against the edge. Back to rules,
   with real padding, a proper marker and an open/hover state. ── */
.faq-list { max-width: 860px; margin: 0 auto; }
.faq-item {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--hair) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  transition: background .4s var(--ease);
}
.faq-item:first-child { border-top: 1px solid var(--hair) !important; }
.faq-item:hover { background: rgba(255,255,255,.45) !important; }

details.faq-item > summary.faq-q {
  padding: 24px 20px !important;
  margin-bottom: 0 !important;
  gap: 28px !important;
  font-family: var(--font-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
  transition: color .35s var(--ease);
}
.faq-item:hover > summary.faq-q,
details.faq-item[open] > summary.faq-q { color: var(--accent-ink) !important; }

details.faq-item > summary.faq-q::after {
  content: '+' !important;
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  margin-top: 1px !important;
  color: var(--accent) !important;
  transition: transform .5s var(--ease);
}
details.faq-item[open] > summary.faq-q::after { transform: rotate(45deg); }

details.faq-item .faq-a {
  padding: 0 64px 26px 20px !important;
  color: var(--ink-2) !important;
  font-size: 15.5px !important;
  line-height: 1.72 !important;
}
.faq-a p + p { margin-top: 12px; }

/* ── ticker ──────────────────────────────────────────────────── */
.ticker-track, .ticker { background: var(--paper-alt) !important; border-block: 1px solid var(--hair) !important; }
.ticker-item, .ticker span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-2) !important; }

/* ── lightbox ────────────────────────────────────────────────── */
.lb-overlay { background: rgba(215,215,215,.94) !important; backdrop-filter: blur(12px); }
.lb-close, .lb-nav { background: var(--surface-2) !important; color: var(--ink) !important; border: 1px solid var(--hair) !important; border-radius: 2px !important; }
.lb-nav:hover, .lb-close:hover { background: var(--ink) !important; color: #EDEDED !important; }

/* ── reveal: clip wipe, not a bounce ─────────────────────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1.05s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ── WhatsApp widget on light.
   The bubble's own <p> children carry color: rgba(255,255,255,.85) from
   the dark theme, so setting colour on the bubble alone left white text
   on a white bubble. Override the children, and lift the black footer. ── */
.wa-popup {
  background: var(--surface-2) !important;
  border: 1px solid var(--hair) !important;
  box-shadow: 0 18px 50px rgba(20,24,26,.18) !important;
}
.wa-popup-body { background: var(--paper-alt) !important; }
.wa-message-bubble {
  background: #fff !important;
  border: 1px solid var(--hair) !important;
  box-shadow: 0 1px 2px rgba(20,24,26,.06) !important;
}
.wa-message-bubble,
.wa-message-bubble p,
.wa-message-bubble strong,
.wa-message-bubble b { color: var(--ink) !important; }
.wa-message-bubble strong, .wa-message-bubble b { font-weight: 600 !important; }
.wa-bubble-time { color: var(--ink-3) !important; }
.wa-popup-footer {
  background: var(--surface-2) !important;
  border-top: 1px solid var(--hair) !important;
}
/* the header and CTA stay WhatsApp green — brand recognition */
.wa-popup-close, #wa-popup-close { color: #fff !important; }

/* ── responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .solutions-grid, .services-pillar-grid, .testimonials-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .solutions-grid, .services-pillar-grid, .testimonials-grid,
  .sub-services-grid, .related-grid, .siblings-grid { grid-template-columns: 1fr !important; }
}

/* ── reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .work-img, .btn-arrow { transition: none !important; }
  .solution-card::after, .services-pillar-card::after { transition: none; }
}