:root {
  --brand-cream: #ffd2b6;
  --brand-orange: #ff9d00;
  --brand-orange-hover: #ffa01d;
  --brand-amber: #ca7b00;
  --brand-brown: #693d00;
  --brand-black-2: #3d2100;
  --brand-black: #1d0d00;
  --gray-100: #dddad9;
  --gray-400: #b9b2af;
  --gray-500: #938c89;
  --gray-700: #4a4645;
}

@font-face {
  font-family: "MomoTrustDisplay";
  src: url("assets/fonts/MomoTrustDisplay-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

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

body {
  font-family: "MomoTrustDisplay", system-ui, -apple-system, sans-serif;
  background: var(--brand-black);
  color: #f5f5f7;
}

a {
  text-decoration: none;
}

/* Body copy warms to brand-orange right where the cursor actually is, not
   across the whole paragraph — script.js wraps each paragraph's text in
   one .hover-word span per word (nested spans, .split-word for headings,
   would work too, but those come pre-hidden for the scroll-reveal
   animation and have no unhide trigger outside a .split-heading parent).
   Two classes on the hover state (.hover-word + :hover) outranks the
   single-class descendant selectors most paragraph variants use for their
   own color (".letter-body p", ".messy-text p", etc.), so this doesn't
   need repeating per-component or !important. */
.hover-word {
  transition: color 0.2s ease;
}

.hover-word:hover {
  color: var(--brand-orange);
}

body.menu-open {
  overflow: hidden;
}

html {
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis.lenis-smooth {
  scroll-behavior: auto;
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

.reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group > *:nth-child(2) { transition-delay: 90ms; }
.reveal-group > *:nth-child(3) { transition-delay: 180ms; }
.reveal-group > *:nth-child(4) { transition-delay: 270ms; }

/* ---------- Split-text heading reveal ---------- */

.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.split-word-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 45ms);
}

.split-heading.is-revealed .split-word-inner {
  transform: translateY(0);
}

/* ---------- Hero graphic motion ---------- */

.pulse-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulse-scale 2.6s ease-in-out infinite;
}

@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

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

.hero-pin-wrap {
  position: relative;
  height: calc(100vh + 60vh);
}

.hero {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
  background: #ffffff;
  padding: 22px;
}

.hero-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 3rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 45%, rgba(255, 157, 0, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 65% 60%, rgba(255, 210, 182, 0.08) 0%, transparent 40%),
    linear-gradient(160deg, #2b1706 0%, var(--brand-black) 60%);
}

/* Refracted echo of the live hero constellation: a <use> of the same animated
   geometry, enlarged and blurred — reads as its light diffusing through the
   background. The mirrored second copy overlaps into caustic-like patterns. */
.hero-bg-refract {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(150vw, 1500px);
  height: min(150vw, 1500px);
  transform: translate(-50%, -50%);
  filter: blur(18px) saturate(1.5);
  opacity: 0.34;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero-bg-refract {
    width: 125vw;
    height: 125vw;
    filter: blur(12px) saturate(1.5);
    opacity: 0.3;
  }
}

/* ---------- Hero background: mobile fluid glow + darkened edges ---------- */

@keyframes heroFluidDrift {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1);    opacity: 0.85; }
  50%  { transform: translate3d(4%, 2%, 0)  scale(1.15);  opacity: 1;    }
  100% { transform: translate3d(-2%, 5%, 0) scale(1.06);  opacity: 0.9;  }
}

@media (max-width: 768px) {
  .hero-bg {
    /* punchier center glow so the drifting motion reads on a small screen */
    background:
      radial-gradient(circle at 64% 44%, rgba(255, 157, 0, 0.20) 0%, transparent 48%),
      radial-gradient(circle at 56% 62%, rgba(255, 210, 182, 0.09) 0%, transparent 42%),
      linear-gradient(160deg, #2b1706 0%, var(--brand-black) 62%);
  }

  /* slow drifting warm glow — the "fluid" layer (sits behind the vignette) */
  .hero-bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 45%, rgba(255, 160, 40, 0.18) 0%, transparent 46%);
    animation: heroFluidDrift 16s ease-in-out infinite alternate;
    will-change: transform, opacity;
    pointer-events: none;
  }

  /* vignette — darkens edges & corners so the corner logo pops (painted on top) */
  .hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(118% 96% at 50% 38%, transparent 32%, rgba(8, 3, 0, 0.58) 64%, rgba(0, 0, 0, 0.92) 100%);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg::before { animation: none; }
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 70;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

/* No contrast/saturate filter here — on this PNG's anti-aliased circular
   edge, boosting contrast+saturation visibly bleeds a warm halo beyond the
   ring. Invisible against the busy home/about hero, but obvious sitting on
   the plain flat header on case-studies/loop-carpet. Confirmed by isolating
   the filter with the icon alone: halo disappears the instant it's removed. */
.logo-mark {
  display: block;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.logo-title {
  font-weight: 700;
  font-size: 0.95rem;
}

.logo-sub {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Same glass material as the hero's contact card (.hero-contact) rather than
   the old near-opaque white pill: translucent white wash, heavy blur with
   saturation so colour comes through from whatever is behind, a bright inset
   top edge, and a soft drop shadow. Shadow is scaled down from the hero card's
   70px — that spread reads as depth on a 380px card and as smudge on a pill.
   Going translucent over a dark page inverts the pill's own value, so the link
   colour below flips from near-black to white to keep it legible. */
.nav-pill {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  padding: 6px;
}

/* Specular sheen, same off-centre highlight the hero card uses. */
.nav-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, 0.3), transparent 60%);
  pointer-events: none;
}

.nav-pill a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: 8px 17px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-pill a::after {
  content: "\2192";
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Flipped with the pill: a dark wash was the readable hover on the old white
   pill, and is invisible on the glass one. */
.nav-pill a:hover {
  background: rgba(255, 255, 255, 0.16);
}

.nav-pill a:hover::after {
  max-width: 14px;
  opacity: 1;
  margin-left: 6px;
}

.btn-primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #ffb454, var(--brand-orange) 55%, #ec8a00);
  color: #1d0d00;
  padding: 12px 22px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 20px rgba(255, 157, 0, 0.3);
}

.btn-primary::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  /* Inherit, don't hard-code: .btn-lg raises the radius to 10px. Without this
     the overlay is a sharp rectangle and only the parent's overflow:hidden
     rounds it — a clip the browser drops once this element is transformed on
     hover, which showed up as the button turning square. */
  border-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-cream);
  color: var(--brand-black);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}

.btn-primary:hover::after {
  transform: translateY(0);
}

/* Header-only glass variant of the CTA, matching the nav pill beside it.
   Deliberately scoped to .site-header: .btn-primary is also the hero, footer,
   guide and scorecard call to action, and those want to stay solid — a
   translucent primary button has less visual weight, which is the wrong trade
   on the page's main conversion point. In the header it sits next to the pill,
   so material consistency wins.
   The specular highlight rides as an extra background layer instead of a
   pseudo-element, because ::after is already carrying the slide-up hover
   label (content: attr(data-label)). */
.site-header .btn-primary {
  background:
    radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, 0.28), transparent 60%),
    linear-gradient(165deg, rgba(255, 157, 0, 0.58), rgba(255, 157, 0, 0.24));
  border: 1px solid rgba(255, 190, 90, 0.5);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  color: #fff;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn-lg {
  padding: 16px 30px;
  font-size: 0.9rem;
  border-radius: 10px;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 16px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.15s ease;
}

.btn-ghost:hover {
  border-color: #fff;
}

/* ---------- Mobile nav ---------- */

.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  z-index: 60;
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, top 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-toggle span:nth-child(1) { top: 16px; }
.menu-toggle span:nth-child(2) { top: 21px; }
.menu-toggle span:nth-child(3) { top: 26px; }

.menu-toggle.is-open {
  border-color: var(--brand-orange);
  background: rgba(255, 157, 0, 0.1);
}

.menu-toggle.is-open span:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
  top: 21px;
  transform: rotate(-45deg);
}

/* A self-contained close button living inside the drawer itself, always
   reachable regardless of scroll position or which toggle opened it — the
   floating-nav's own toggle hides itself the instant the drawer opens (see
   body.menu-open .floating-nav below), and the in-page header's toggle can
   be scrolled out of view, so neither can be relied on to close it too.
   Shares the .menu-toggle class, so it's picked up by the site-wide
   menuToggles click-wiring and its is-open (X-icon) state automatically —
   no separate JS needed. */
.mobile-menu-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 2;
}

.mobile-menu {
  position: fixed;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  /* Neutral glass, not a brown panel. This used to stack two warm radial glows
     over a rgba(43,23,6) base, which painted the drawer solid brown on every
     page and completely masked whatever was behind it — most obviously on the
     starfield pages, where a blue-purple background turned amber the moment
     the menu opened. Now it's the same neutral dark + white wash the floating
     nav uses (rgba(18,18,20)), so the blurred page reads through and the drawer
     looks like it belongs to the page it's actually on.
     The dark base is not optional: this is a full-screen surface and the home
     page has cream service cards behind it, so a lighter tint would let white
     text wash out — the same trap the floating nav hit. */
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%),
    rgba(18, 18, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
  margin: 0;
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.5s;
}

.mobile-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, 0.12), transparent 60%);
  pointer-events: none;
}

.menu-constellation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0s;
}

.mobile-menu a {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu.is-open a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open a:nth-of-type(1) { transition-delay: 0.45s; }
.mobile-menu.is-open a:nth-of-type(2) { transition-delay: 0.51s; }
.mobile-menu.is-open a:nth-of-type(3) { transition-delay: 0.57s; }
.mobile-menu.is-open a.btn-primary { transition-delay: 0.63s; }

.mobile-menu a:not(.btn-primary):hover {
  color: var(--brand-orange);
}

.mobile-menu .btn-primary {
  justify-content: center;
  margin-top: 0.5rem;
  padding: 16px 34px;
  font-size: 0.85rem;
}

.mobile-menu a.menu-contact {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2rem;
  text-align: center;
  color: var(--gray-400);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.25);
  text-underline-offset: 4px;
}

.mobile-menu.is-open a.menu-contact {
  transition-delay: 0.7s;
}

.mobile-menu a.menu-contact:hover {
  color: var(--brand-orange);
  text-decoration-color: var(--brand-orange);
}

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

  .header-right .btn-primary {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* ---------- Floating nav (home page) ----------
   A second copy of the header, fixed to the viewport, hidden by default.
   The in-hero header (above) only reads as "pinned" for the hero's own
   scroll-pin phase; past that it scrolls away with the rest of the page.
   This one takes over from there: hidden while scrolling down, revealed
   the moment the user scrolls up, so nav is always a scroll-tick away
   without permanently floating over the hero itself. */
.floating-nav {
  position: fixed;
  top: 18px;
  left: 22px;
  right: 22px;
  z-index: 90;
  padding: 10px 16px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  /* Some engines mis-size the backdrop capture when backdrop-filter and an
     SVG filter (.liquid-glass-bend) stack on the same element, ballooning
     it far past the pill's own box — clip hard to the rounded rect as a
     backstop regardless of that bug. Costs the face layer's outer glow. */
  overflow: hidden;
  transform: translateY(-130%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.floating-nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

body.menu-open .floating-nav {
  opacity: 0;
  pointer-events: none;
}

/* Liquid glass, built to Apple's actual HIG spec for the material
   (developer.apple.com/design/human-interface-guidelines/materials + .../color),
   not just visual guesswork:
   - "By default, Liquid Glass has no inherent color, and instead takes on
     colors from the content directly behind it... Apply color sparingly...
     prefer a monochromatic appearance for toolbars." So the bend layer's
     tint is neutral gray, not brand orange — real color comes only from
     whatever page content is actually scrolled behind it.
   - "The regular variant blurs and adjusts the luminosity of background
     content to maintain legibility" — heavy blur plus a brightness lift
     (not just blur alone), since this nav sits over arbitrary, often-dark
     page sections and has real text on it (the HIG's cue to use the
     regular, not clear, variant).
   - warp: the SVG feDisplacementMap distortion (#glass-distort, defined in
     each page's hidden <svg>) applied to a neutral near-white layer, not a
     colored one — a hint of refraction, not a decorative color pattern.
     Kept on a separate layer from backdrop-filter: combining the two on one
     element made the browser's backdrop capture balloon past the pill's own
     box in testing (confirmed by isolating each half — fine alone, broken
     together), so they're still split here for that reason too.
   - face: a soft outer glow via box-shadow.
   - edge: a restrained inset highlight tracing the rim, like light catching
     the edge of a lens.
   Real content (.logo, .header-right) is pulled above all four by z-index. */
.floating-nav .liquid-glass-bend,
.floating-nav .liquid-glass-warp,
.floating-nav .liquid-glass-face,
.floating-nav .liquid-glass-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Tint carries most of the legibility load here. At 0.4 the bar let bright
   content through almost unchanged — scrolling it over the cream service
   cards washed the logo and the nav links out to near-invisible. The bar is
   fixed and travels over every section on the page, so it has to darken
   whatever lands behind it rather than assuming a dark backdrop. 0.7 still
   reads as glass over the dark hero while holding white text legible over the
   lightest thing on the site (the cream cards, rgb(255, 210, 182)).
   brightness() is dropped for the same reason — it was lifting bright
   backdrops further. */
.floating-nav .liquid-glass-bend {
  z-index: 0;
  background: rgba(18, 18, 20, 0.7);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
}

.floating-nav .liquid-glass-warp {
  z-index: 1;
  background: rgba(255, 255, 255, 0.05);
  filter: url(#glass-distort);
  mix-blend-mode: overlay;
  opacity: 0.5;
}

.floating-nav .liquid-glass-face {
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.2);
}

.floating-nav .liquid-glass-edge {
  z-index: 3;
  box-shadow: inset 1.5px 1.5px 1.5px rgba(255, 255, 255, 0.25), inset -1.5px -1.5px 1.5px rgba(255, 255, 255, 0.2);
}

.floating-nav > .logo,
.floating-nav > .header-right {
  position: relative;
  z-index: 4;
}

@media (max-width: 768px) {
  .floating-nav {
    padding: 8px 10px;
    border-radius: 14px;
  }
}

/* ---------- Hero top (headline) ---------- */

.hero-top {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin-top: 3.5rem;
}

.trust-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #d9d9dc;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

/* ---------- Hero terminal badge (amber-CRT typewriter) ---------- */

.hero-terminal {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  max-width: 100%;
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.85rem;
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #ffb454;
  background: rgba(18, 8, 0, 0.55);
  border: 1px solid rgba(255, 157, 0, 0.35);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 157, 0, 0.05),
    0 6px 22px rgba(0, 0, 0, 0.35),
    0 0 22px rgba(255, 157, 0, 0.10);
  text-shadow: 0 0 6px rgba(255, 157, 0, 0.45);
  overflow: hidden;
}

.hero-terminal-prompt {
  color: rgba(255, 157, 0, 0.75);
  font-weight: 700;
}

.hero-terminal-line {
  position: relative;
  display: inline-block;
}

.hero-terminal-sizer {
  visibility: hidden;
  white-space: pre;
}

.hero-terminal-run {
  position: absolute;
  inset: 0;
  display: inline-flex;
  align-items: center;
  white-space: pre;
}

.hero-terminal-typed {
  white-space: pre;
}

.hero-terminal-cursor {
  display: inline-block;
  flex-shrink: 0;
  width: 0.6em;
  height: 1.15em;
  margin-left: 1px;
  background: #ffb454;
  box-shadow: 0 0 8px rgba(255, 157, 0, 0.6);
  animation: terminalBlink 1.05s steps(1, end) infinite;
}

@keyframes terminalBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-terminal-cursor { animation: none; }
}

@media (max-width: 480px) {
  .hero-terminal {
    font-size: 0.66rem;
    padding: 0.55rem 0.7rem;
  }
}

.hero-top h1 {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

/* ---------- Hero bottom bar ---------- */

.hero-bottom-bar {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 3rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.hero-sub {
  max-width: 36ch;
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.5;
}

.hero-cta {
  display: flex;
  filter: url(#cta-goo);
}

.hero-cta-link {
  display: flex;
  align-items: stretch;
}

.hero-cta-pill {
  position: relative;
  z-index: 1; /* paints above the droplet so it can tuck underneath without covering the label */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  background: linear-gradient(160deg, #ffb454, var(--brand-orange) 55%, #ec8a00);
  color: #1d0d00;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: background 0.3s ease, color 0.3s ease;
}

.hero-cta-link:hover .hero-cta-pill {
  background: var(--brand-cream);
}

/* The droplet: swallowed by the pill, bulges out, hangs like a water drop
   on a goo bridge (#cta-goo filter on .hero-cta), then gets pulled back in.
   Shape "fluidity" comes from three layered effects, not just scale:
     1. asymmetric border-radius morphing a real organic blob (never a plain
        ellipse — scale alone always looks like a stretched circle)
     2. a slight rotate/lean, like torque from surface tension as it pulls
     3. a tiny settle-jiggle right after it stops (real droplets wobble
        instead of snapping straight to rest) */
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: linear-gradient(160deg, #ffb454, var(--brand-orange) 55%, #ec8a00);
  color: var(--brand-black);
  font-size: 1.2rem;
  flex-shrink: 0;
  transform-origin: 50% 50%;
  will-change: transform, border-radius;
  animation: ctaDropBob 3.9s cubic-bezier(0.45, 0.05, 0.15, 1) infinite;
}

.btn-arrow-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
  animation: ctaDropGlyph 3.9s cubic-bezier(0.45, 0.05, 0.15, 1) infinite;
}

.btn-arrow-glyph svg {
  width: 19px;
  height: 19px;
}

/* Every stop defines the full 8-value border-radius so the browser
   interpolates each corner independently instead of snapping shape. */
@keyframes ctaDropBob {
  0%   { transform: translateX(-48px) rotate(0deg)   scale(0.7, 0.7);   border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  6%   { transform: translateX(-47px) rotate(-2deg)  scale(0.72, 0.65); border-radius: 54% 46% 48% 52% / 56% 54% 44% 46%; }
  20%  { transform: translateX(-23px) rotate(-5deg)  scale(0.83, 1.07); border-radius: 62% 38% 42% 58% / 46% 60% 40% 54%; }
  34%  { transform: translateX(-2px)  rotate(-3deg)  scale(0.96, 1.05); border-radius: 47% 53% 55% 45% / 60% 44% 52% 48%; }
  46%  { transform: translateX(17px)  rotate(2deg)   scale(1.09, 0.88); border-radius: 40% 60% 62% 38% / 65% 40% 58% 42%; }
  52%  { transform: translateX(20px)  rotate(1deg)   scale(1.02, 0.98); border-radius: 46% 54% 52% 48% / 54% 47% 51% 49%; }
  56%  { transform: translateX(21px)  rotate(0deg)   scale(1, 1);       border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  60%  { transform: translateX(21px)  rotate(1.5deg) scale(1.04, 0.965);border-radius: 55% 45% 47% 53% / 45% 55% 46% 54%; }
  63%  { transform: translateX(21px)  rotate(-1deg)  scale(0.975, 1.02);border-radius: 45% 55% 53% 47% / 54% 46% 55% 45%; }
  67%  { transform: translateX(21px)  rotate(0deg)   scale(1, 1);       border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  80%  { transform: translateX(-8px)  rotate(4deg)   scale(0.85, 1.13); border-radius: 38% 62% 64% 36% / 66% 38% 60% 40%; }
  91%  { transform: translateX(-41px) rotate(1deg)   scale(0.73, 0.85); border-radius: 52% 48% 46% 54% / 56% 50% 45% 50%; }
  100% { transform: translateX(-48px) rotate(0deg)   scale(0.7, 0.7);   border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
}

@keyframes ctaDropGlyph {
  0%, 13%   { opacity: 0; }
  28%, 74%  { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-arrow { animation: none; transform: translateX(6px); }
  .btn-arrow-glyph { animation: none; opacity: 1; }
}

/* ---------- Hero graphic ---------- */

.hero-graphic {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 880px);
  z-index: 0;
  filter: drop-shadow(0 0 60px rgba(255, 157, 0, 0.22));
}

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

.graphic-line {
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.1;
}

.graphic-line-hub {
  stroke: rgba(255, 157, 0, 0.4);
  stroke-width: 1.3;
}

@media (max-width: 900px) {
  .hero-graphic {
    width: min(105vw, 480px);
  }
}

/* ---------- Hero contact form ---------- */

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

.hero-contact {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(90vw, 380px);
  padding: 2.25rem 1.75rem;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-align: center;
  overflow: hidden;
}

.hero-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, 0.3), transparent 60%);
  pointer-events: none;
}

.hero-contact-panel {
  position: relative;
}

.hero-contact-title {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

.hero-contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hero-contact-form input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s ease, background 0.25s ease;
}

.hero-contact-form input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.hero-contact-form input:focus {
  outline: none;
  border-color: var(--brand-orange);
  background: rgba(255, 255, 255, 0.13);
}

.hero-contact-submit {
  width: 100%;
  margin-top: 0.4rem;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.hero-contact-success {
  color: #fff;
  font-size: 1rem;
  line-height: 1.5;
}

.hero-contact-error {
  margin-top: 0.6rem;
  color: #ffb4a1;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hero-contact-error a {
  color: var(--brand-orange);
  font-weight: 700;
  text-decoration: underline;
}

/* Honeypot. Deliberately NOT display:none — the cheaper bots skip fields that
   are display:none/hidden and would sail past this. Pulling it out of the flow
   off-screen keeps it in the DOM looking like a real field to a script, while
   aria-hidden + tabindex="-1" on the markup keep it away from screen readers
   and the tab order. */
.hero-contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.hero-contact-trigger {
  display: none;
}

.hero-contact-close {
  display: none;
}

/* The always-visible glass card needs ~1000px of clear vertical room (headline
   zone + card + bottom CTA zone) to avoid the headline above it — most laptop
   and even many desktop-monitor viewports don't have that. So the tap-to-reveal
   SCALE circle (originally mobile/tablet-only) now covers that whole range;
   only genuinely spacious displays (>=1900 wide AND >=900 tall) get the
   always-open card. Verified by measuring real overlap at 1920x1080, 1600x900,
   1440x900, 1366x768, 1280x800, 1024x768/1366 — see project memory. */
@media (max-width: 1899px), (max-height: 899px) {
  .hero-contact {
    top: calc(50% + var(--hero-contact-collapsed-nudge-y, 0px));
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    place-items: center;
    width: 96px;
    height: 96px;
    padding: 0;
    border-radius: 50%;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
      top 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      height 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      padding 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      border-radius 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      background 0.5s ease,
      border-color 0.5s ease,
      box-shadow 0.5s ease,
      backdrop-filter 0.5s ease;
  }

  .hero-contact::before {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .hero-contact-trigger,
  .hero-contact-panel {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
  }

  .hero-contact-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.06));
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: #fff;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.25s ease, opacity 0.3s ease;
  }

  .hero-contact-trigger:active {
    transform: scale(0.94);
  }

  .hero-contact-panel {
    justify-self: stretch;
    width: auto;
    opacity: 0;
    transform: scale(0.85);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.4s ease;
  }

  .hero-contact-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -0.7rem;
    right: -0.7rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1;
  }

  .hero-contact-title {
    font-size: 1.05rem;
    margin-bottom: 1rem;
    padding-right: 1.5rem; /* keep clear of the floating close button */
  }

  .hero-contact-form {
    gap: 0.5rem;
  }

  .hero-contact-form input {
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
  }

  .hero-contact-submit {
    margin-top: 0.2rem;
  }

  .hero-contact.is-expanded {
    top: calc(54% + var(--hero-contact-expand-nudge-y, 0px));
    width: min(88vw, 340px);
    height: var(--hero-contact-expanded-height, 320px);
    padding: 1.1rem 1rem;
    border-radius: 24px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow:
      0 24px 70px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(26px) saturate(180%);
    -webkit-backdrop-filter: blur(26px) saturate(180%);
  }

  .hero-contact.is-expanded::before {
    opacity: 1;
  }

  .hero-contact.is-expanded .hero-contact-trigger {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.7);
  }

  .hero-contact.is-expanded .hero-contact-panel {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    transition-delay: 0.18s;
  }
}

/* On short viewports (typical of laptops in the 900-1899px width band above)
   there isn't enough room between the headline and the CTA text for even the
   compact panel — shrink it further so the JS-computed nudge (script.js) has
   a real gap to fit it into instead of just minimizing an unavoidable overlap. */
@media (max-height: 820px) {
  .hero-contact.is-expanded {
    padding: 0.65rem 0.8rem;
  }

  .hero-contact-title {
    font-size: 0.92rem;
    margin-bottom: 0.4rem;
  }

  .hero-contact-form {
    gap: 0.32rem;
  }

  .hero-contact-form input {
    padding: 0.42rem 0.7rem;
    font-size: 0.85rem;
  }

  .hero-contact-submit {
    margin-top: 0.05rem;
  }
}

/* Even on spacious displays the always-open card can be a near-miss from the
   headline by default (e.g. only ~7px clear at 1920x1080) — nudge it right
   just enough to clear it. Both a flat guessed px offset and a percentage
   were tried here and both overshot on wide monitors (a percentage scales
   with viewport width and compounds the problem; a flat px guess still
   pushes the card visibly off-center on screens with plenty of natural
   clearance already). --hero-contact-desktop-nudge-x is measured for real
   in script.js (actual gap between the headline's right edge and the card),
   so screens with room stay at true center and only the tight ones get
   nudged, by exactly as much as they need. */
@media (min-width: 1900px) and (min-height: 900px) {
  .hero-contact {
    left: calc(50% + var(--hero-contact-desktop-nudge-x, 0px));
  }
}

/* ---------- Founder ---------- */

.founder {
  background: #241202;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6rem 3rem;
}

.founder-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 4rem;
  align-items: start;
}

.founder-photo-frame {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(160deg, #2b1706, var(--brand-black));
  border: 2px solid rgba(255, 157, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: var(--brand-orange);
  letter-spacing: 0.02em;
}

.founder-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  display: block;
}

.founder-text h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 1.25rem 0 1.5rem;
}

.founder-text p {
  max-width: 60ch;
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.pull-quote {
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  font-style: italic;
  border-left: 3px solid var(--brand-orange);
  padding-left: 1.25rem;
  margin: 1.75rem 0;
}

@media (max-width: 700px) {
  .founder {
    padding: 4rem 1.5rem;
  }

  .founder-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .founder-photo-frame {
    width: 140px;
    height: 140px;
    font-size: 2rem;
  }
}

/* ---------- About page (structure adapted from vogel.haus: oversized
   low-clutter hero, minimal proof strip, honest "messy middle" narrative
   section) — executed in NES's own bold/orange-on-black brand, not vogel's
   light cream theme or regular-weight type. ---------- */

/* Scroll-linked parallax wrapper (see script.js) — a plain transform host so
   the drift doesn't collide with a child's own CSS transform (e.g. the
   letter card's rotate()). Kept as a separate element per drifting card. */
.parallax-float {
  will-change: transform;
}

/* .about-hero, .about-stats and .letter-section sit directly on
   .about-bg-photo's fixed starfield photo — no tint layer on top of it. */
.about-glow {
  position: relative;
}

/* ---------- About page: fixed starfield photo behind everything. ----------
   This used to be background-attachment: fixed directly on <body>, which
   had two real problems: that property is flaky on mobile browsers, and —
   the actual cause of the bad blur — a fixed background's `cover` sizing is
   normally computed against the *viewport*, but once mobile's media query
   below dropped back to attachment: scroll, `cover` sized against <body>'s
   own box instead. On a long page, body is several times taller than any
   viewport, so the image had to be stretched enormously to "cover" that
   height — that's what was actually blurring it, not just source
   resolution. A dedicated position: fixed layer sizes against the viewport
   on every device, no attachment property or mobile fallback needed. */
/* Shared full-viewport backdrop, generalised from .about-bg-photo below.
   The point of a fixed layer rather than a background on the section itself:
   a section starts *below* the in-flow header, so its background does too,
   leaving a band of bare page colour above it — the brown banner that used to
   sit across the top of the guides and case-studies pages. This sits behind
   everything, header included.

   Overscanned so the parallax transform has somewhere to travel without
   dragging an edge into view. The layer must stay taller than
   100vh + TRAVEL_VH (9vh, set in script.js); 128vh leaves ~9vh of slack on top
   of that rather than the ~1vh a snug 120vh gave, which was close enough to
   the edge that rounding could open a hairline gap at full scroll. */
.page-bg,
.about-bg-photo {
  position: fixed;
  top: -14vh;
  left: 0;
  right: 0;
  height: 128vh;
  z-index: -1;
  background-color: var(--brand-black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* Uses the -xl export at every width, not just past 1900px. The layer is 128vh
   tall, so `cover` is height-constrained on a normal desktop: the 1800x1200
   original had to upscale ~1.35x to fill it, which is what made it look soft.
   2400x1600 lands at roughly 1:1 instead. */
.about-bg-photo {
  background-image: url("assets/about-bg-stars-xl.jpg");
  background-position: center 60%;
}

/* Milky Way + silhouetted rig. Genuinely dark, so it needs far less scrim than
   the sky does and the stars survive. Note this is the one background whose
   subject sits centre-bottom, so background-position keeps it from being
   cropped out on narrow viewports. */
.page-bg-stars {
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.42) 0%, rgba(21, 8, 0, 0.28) 45%, rgba(21, 8, 0, 0.6) 100%),
    url("assets/skyblog.jpg");
  background-position: center 55%;
}

/* The sky is far brighter than the starfields, so it carries a heavier, more
   even scrim: as a full-page backdrop it has to stay legible under body copy
   the whole way down, not just under a hero headline. Sections that need more
   contrast than this add their own on top — which works because those scrims
   scroll with the content, whereas a gradient on this fixed layer would stay
   pinned to the viewport and put a bright band at the top of every screen. */
/* Top stop is a balance, not a free dial. Lighter than this and the sky looks
   great but the logo's "STUDIOS" line — small, white, and sitting right in the
   brightest part of the photo — washes out to nothing. 0.44 is about as bright
   as the top can go while that stays readable. */
.page-bg-sky {
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.44) 0%, rgba(21, 8, 0, 0.64) 55%, rgba(21, 8, 0, 0.82) 100%),
    url("assets/sky.jpg");
  background-position: center 32%;
}

/* The >1900px swap that used to live here is gone: the base rule now serves
   the -xl export at every width, so the media query pointed at the same file
   it was already loading. */

/* Shared plain header for every interior page (about, case-studies,
   case-study-loop-carpet) — no card, no frame, no background of its own,
   just the header row sitting flush on whatever the page's own background
   is. Interior pages used to each wrap their header in a separately
   boxed/blurred frame; that stacked two differently-treated sections (the
   frame vs. the page below it) and kept surfacing seams and stray
   backgrounds no matter how the frame's own fill was tuned. Living inline
   like this instead — matching how the home page's header sits inside one
   continuous hero, not a separate frame stacked in front of it — means
   there's nothing of its own left to look different.
   46px/70px matches the logo's inset on the home page exactly: home stacks
   an outer 22px wrapper padding with an inner 24px/48px frame padding
   (.hero + .hero-frame); this header has no such outer layer, so it nets
   the same total in one rule instead of two. */
.inline-header {
  position: relative;
  z-index: 1;
  padding: 46px 70px 0;
}

@media (max-width: 640px) {
  .inline-header {
    padding: 28px 32px 0;
  }
}

.about-hero {
  padding: 4rem 3rem 5rem;
  text-align: center;
}

.about-hero-inner {
  max-width: 820px;
  margin: 0 auto;
}

.about-hero .trust-badge {
  margin-bottom: 1.5rem;
}

.about-hero-title {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}

.about-hero-sub {
  max-width: 46ch;
  margin: 1.75rem auto 0;
  color: var(--gray-400);
  font-size: 1.15rem;
  line-height: 1.6;
}

/* Letter section (structure adapted from vogel.haus's "We are nerds" block):
   a small, faded greeting line, then a large, near-full-opacity personal
   letter — inverted hierarchy on purpose, so the greeting whispers and the
   letter itself carries the visual weight. Content is Wes's to fill in. */
.letter-section {
  padding: 7rem 3rem 8rem;
}

.letter-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* An actual paper surface — warm off-white, soft shadow lifting it off the
   ambient gradient behind it, a slight rotation and uneven corners so it
   reads as something dropped on a desk rather than a flat CSS card. */
.letter-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #fff8f0, #ffe6cc);
  border-radius: 0;
  padding: 3.5rem;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    inset 0 0 90px rgba(105, 61, 0, 0.14);
  transform: rotate(-0.7deg);
}

/* Real photographed crumpled-paper texture (Wes-provided), shown whole via
   `cover` rather than tiled — the creases and fold shadows are large-scale,
   so tiling a crop of them would read as an obviously-repeating pattern.
   One full image per card instead, multiplied over the paper gradient so
   the warm base tone still comes through under the crease shadows. */
.letter-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("assets/letter-paper.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
  opacity: 0.85;
  pointer-events: none;
}

.letter-greeting {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 400;
  color: rgba(29, 13, 0, 0.34);
  margin-bottom: 1.75rem;
}

.letter-body p {
  color: var(--brand-black);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
  line-height: 1.6;
}

.letter-body p + p {
  margin-top: 1.25rem;
}

.letter-sign-off {
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: 700;
  font-style: italic;
  color: var(--brand-black);
}

@media (max-width: 700px) {
  .letter-section {
    padding: 4rem 1.5rem 5rem;
  }

  .letter-card {
    padding: 2rem 1.75rem;
    transform: rotate(-0.4deg);
  }

  .letter-greeting {
    margin-bottom: 1.25rem;
  }
}

.messy-section {
  background: #241202;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7rem 3rem;
}

.messy-inner {
  max-width: 980px;
  margin: 0 auto;
}

.messy-title {
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0.75rem 0 3.5rem;
  max-width: 16ch;
}

.messy-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3.5rem;
  align-items: start;
}

.messy-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(255, 157, 0, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.messy-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

.messy-text p {
  max-width: 62ch;
  color: var(--gray-400);
  font-size: 1.08rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.messy-text .pull-quote {
  max-width: 62ch;
}

@media (max-width: 900px) {
  .messy-body {
    grid-template-columns: 1fr;
  }

  .messy-photo {
    max-width: 280px;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 700px) {
  .about-hero {
    padding: 3.5rem 1.5rem 3.5rem;
  }

  .messy-section {
    padding: 4rem 1.5rem;
  }

  .messy-title {
    margin-bottom: 2.25rem;
    max-width: none;
  }
}

/* ---------- Results ---------- */

.results {
  position: relative;
  overflow: hidden;
  background-color: #2b1603;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4rem 3rem;
}

.results-bg-photo {
  position: absolute;
  top: -120px;
  left: 0;
  right: 0;
  bottom: -120px;
  background-image: url("assets/stars3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

.results-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(20, 12, 4, 0.6), rgba(20, 12, 4, 0.38));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.results-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, 0.14), transparent 60%);
  pointer-events: none;
}

.section-eyebrow {
  color: var(--brand-orange);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.results h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 3rem;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.stat-num {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}

.stat-label {
  color: var(--gray-500);
  font-size: 0.95rem;
}

.case-study p {
  max-width: 65ch;
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.case-study .pull-quote {
  margin-top: 1.5rem;
}

@media (max-width: 700px) {
  .results {
    padding: 4rem 1.5rem;
  }

  .results-inner {
    padding: 1.75rem;
    border-radius: 20px;
  }

  .stats-row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* ---------- Services ---------- */

.services {
  background: var(--brand-black);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6rem 0;
  overflow: hidden;
}

.services-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 3rem;
}

.services h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 3rem;
}

/* USP-style panels (adapted from integratedbio.com "What We Do" cards) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 420px;
  padding: 2.25rem 1.9rem;
  background: var(--card-bg, #241202);
  color: var(--card-fg, #fff);
  overflow: hidden;
}

/* panel colour themes */
.service-card.-c-orange { --card-bg: var(--brand-orange);  --card-fg: var(--brand-black); }
.service-card.-c-dark   { --card-bg: var(--brand-black);   --card-fg: #ffffff; }
.service-card.-c-cream  { --card-bg: var(--brand-cream);   --card-fg: var(--brand-black); }
.service-card.-c-brown  { --card-bg: var(--brand-black-2); --card-fg: #ffffff; }

/* hairline seam between flush panels */
.service-card + .service-card { box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14); }

.service-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}

.service-num {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  opacity: 0.5;
}

.service-icon svg {
  width: 62px;
  height: 62px;
  color: var(--card-fg);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-card:hover .service-icon svg {
  transform: translateY(-6px) scale(1.06);
}

.service-body h3 {
  color: var(--card-fg);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.service-body p {
  color: var(--card-fg);
  opacity: 0.72;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ---------- Big scrolling marquee (adapted from integratedbio.com) ---------- */

.marquee-band {
  overflow: hidden;
  background: var(--brand-black);
  border-top: 1px solid rgba(255, 157, 0, 0.18);
  border-bottom: 1px solid rgba(255, 157, 0, 0.18);
  padding: 2.4rem 0;
}

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

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

.marquee-group {
  display: flex;
  flex-shrink: 0;
}

.marquee-item {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--brand-cream);
  padding-right: 0.35em;
}

.marquee-arrow {
  display: inline-flex;
  align-items: center;
  width: 0.85em;
  height: 0.34em;
  margin: 0 0.35em;
  color: var(--brand-orange);
  vertical-align: middle;
}

.marquee-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

@media (max-width: 1000px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 340px; }
}

@media (max-width: 700px) {
  .services { padding: 4rem 0; }
  .services-inner { padding: 0 1.5rem; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card {
    min-height: 0;
    gap: 1.6rem;
    padding: 2rem 1.5rem;
  }
  .service-icon svg { width: 52px; height: 52px; }
}

/* ---------- Reviews ---------- */

.reviews {
  background: #241202;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6rem 3rem;
}

.reviews-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.reviews h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 3rem;
}

/* Testimonial carousel (adapted from clonix.framer.website) */
.tstm {
  margin-top: 2.5rem;
  max-width: 880px;
}

.tstm-stage {
  display: grid;
}

.tstm-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.tstm-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.stars {
  display: block;
  color: var(--brand-orange);
  font-size: 1rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.4rem;
}

.tstm-quote {
  margin: 0 0 1.75rem;
  color: #fff;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.tstm-quote::before { content: "\201C"; }
.tstm-quote::after { content: "\201D"; }

.tstm-author {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.tstm-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffb454, var(--brand-orange) 60%, #ec8a00);
  color: var(--brand-black);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.tstm-avatar.sm { width: 30px; height: 30px; font-size: 0.72rem; }

.tstm-name {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.tstm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.tstm-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tstm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.9rem 0.35rem 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: transparent;
  color: var(--gray-400);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

.tstm-chip:hover { border-color: rgba(255, 157, 0, 0.4); color: #fff; }

.tstm-chip.is-active {
  border-color: var(--brand-orange);
  background: rgba(255, 157, 0, 0.1);
  color: #fff;
}

.tstm-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.tstm-count {
  color: var(--gray-400);
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tstm-count b { color: #fff; font-weight: 700; }

.tstm-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 157, 0, 0.4);
  background: transparent;
  color: var(--brand-orange);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.tstm-arrow:hover { background: var(--brand-orange); color: var(--brand-black); }
.tstm-arrow:active { transform: scale(0.94); }

@media (max-width: 700px) {
  .reviews { padding: 4rem 1.5rem; }
  .tstm-bar { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}

/* ---------- Process (How It Works) ----------
   Left column pins in place while the right column's numbered steps scroll
   past and fade in one at a time — adapted from openable.dev's "four simple
   steps" section. Reuses the site's existing .reveal/.reveal-group system
   for the fade-in (no new JS needed) and .split-heading for the title. */
.process {
  position: relative;
  background-color: var(--brand-black);
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.82) 0%, rgba(21, 8, 0, 0.6) 45%, rgba(21, 8, 0, 0.92) 100%),
    url("assets/stars4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7rem 3rem;
}

.process-inner {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 4rem;
}

.process-sticky {
  position: sticky;
  top: 120px;
  align-self: start;
  padding-bottom: 2rem;
}

.process-title {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.25rem;
}

.process-sub {
  position: relative;
  z-index: 1;
  max-width: 32ch;
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Rings share one tangent point (bottom-left) instead of a common center —
   each is just anchored left:0/bottom:0 at its own diameter, matching the
   reference's four evenly-stepped, uniformly-styled concentric arcs. */
.process-rings {
  position: absolute;
  left: -40px;
  bottom: -140px;
  width: 560px;
  height: 560px;
  z-index: -1;
  pointer-events: none;
}

.process-ring {
  position: absolute;
  left: 0;
  bottom: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.process-ring-1 { width: 140px; height: 140px; }
.process-ring-2 { width: 280px; height: 280px; }
.process-ring-3 { width: 420px; height: 420px; }
.process-ring-4 { width: 560px; height: 560px; }

.process-steps {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* Dimmed-to-full-opacity instead of the site's usual invisible+slide-up
   reveal — matches the reference exactly (steps sit dim until reached, no
   movement, just a 0.25->1 opacity fade). Same .reveal/.is-revealed
   mechanism as everywhere else, just a more specific override here.
   .process-step.reveal.is-revealed (3 classes) is declared explicitly
   because .process-step.reveal alone ties in specificity with the generic
   .reveal.is-revealed rule (both 0,2,0) — a tie a later, unrelated rule
   would otherwise win regardless of which element it's even meant for. */
.process-step.reveal {
  opacity: 0.25;
  transform: none;
}

.process-step.reveal.is-revealed {
  opacity: 1;
}

.process-step-num {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--brand-orange);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.process-step-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 0.75rem;
}

.process-step-desc {
  max-width: 52ch;
  color: var(--gray-400);
  font-size: 1.02rem;
  line-height: 1.65;
}

@media (max-width: 900px) {
  .process { padding: 5rem 1.5rem; }
  .process-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-sticky { position: static; padding-bottom: 0; }
  .process-rings { display: none; }
  .process-steps { gap: 2.5rem; }
}

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

.contact {
  background: #2b1603;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6rem 3rem;
  text-align: center;
}

.contact-inner {
  max-width: 700px;
  margin: 0 auto;
}

.contact .section-eyebrow {
  display: block;
}

.contact h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.25rem;
}

.contact-sub {
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .contact {
    padding: 4rem 1.5rem;
  }
}

/* ---------- Guides: index ---------- */

/* Backdrop moved to the fixed .page-bg layer so it runs behind the header —
   a background here started below the in-flow header and left a brown band. */
.guides {
  position: relative;
  padding: 8rem 3rem 6rem;
}

.guides-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.guides-head {
  max-width: 640px;
  margin-bottom: 3.5rem;
}

.guides-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.25rem;
}

.guides-sub {
  color: var(--gray-400);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Two lanes, one tab stop. Real tablist semantics (roles, roving tabindex,
   arrow keys) live in script.js — see the testimonial carousel for the same
   pattern. Without JS every panel is simply visible, so the content is never
   trapped behind a script. */
.guide-tabs {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 1.25rem;
}

.guide-tab {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--gray-400);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.guide-tab:hover {
  color: #fff;
  border-color: rgba(255, 157, 0, 0.4);
}

.guide-tab.is-active {
  color: #fff;
  border-color: rgba(255, 157, 0, 0.65);
  background: rgba(255, 157, 0, 0.1);
}

.guide-tab-note {
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.guides-scorecard-promo {
  display: block;
  padding: 1.75rem 2rem;
  margin-bottom: 2.5rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 157, 0, 0.35);
  background: rgba(255, 157, 0, 0.08);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.guides-scorecard-promo:hover {
  border-color: rgba(255, 157, 0, 0.7);
  transform: translateY(-2px);
}

.guides-scorecard-promo-eyebrow {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--brand-orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.guides-scorecard-promo strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.35;
}

.guides-scorecard-promo-sub {
  color: var(--gray-400);
  font-size: 0.95rem;
  line-height: 1.6;
}

.guide-panel-intro {
  color: var(--gray-400);
  font-size: 0.98rem;
  margin-bottom: 1.75rem;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}

.guide-card {
  display: block;
  padding: 2rem 1.9rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(165deg, rgba(30, 18, 6, 0.72), rgba(20, 12, 4, 0.5));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease;
}

.guide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 157, 0, 0.45);
}

/* Thumbnail sits flush to the card's top edge, so the card padding is moved
   onto the inner content when one is present. 16:9 with object-fit keeps the
   grid tidy regardless of the source photo's aspect ratio. */
.guide-card.has-thumb {
  padding: 0;
  overflow: hidden;
}

.guide-card.has-thumb .guide-card-badge {
  margin-top: 1.6rem;
}

.guide-card.has-thumb > :not(.guide-card-thumb) {
  margin-left: 1.9rem;
  margin-right: 1.9rem;
}

.guide-card.has-thumb .guide-card-meta {
  margin-bottom: 1.75rem;
}

.guide-card-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}

.guide-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide-card:hover .guide-card-thumb img {
  transform: scale(1.04);
}

/* Lead image on the article itself. */
.guide-lead {
  margin: 0 0 2.5rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.guide-lead img {
  display: block;
  width: 100%;
  height: auto;
}

.guide-card-badge {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--brand-orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.guide-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 0.7rem;
}

.guide-card-desc {
  color: var(--gray-400);
  font-size: 0.97rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.guide-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-500, #938c89);
  font-size: 0.82rem;
}

.guide-empty {
  color: var(--gray-400);
  font-size: 0.98rem;
  padding: 2.5rem 0;
}

/* ---------- Guides: article ---------- */

.guide {
  position: relative;
  background-color: var(--brand-black);
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.92) 0%, rgba(21, 8, 0, 0.74) 45%, rgba(21, 8, 0, 0.96) 100%),
    url("assets/footer-stars.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 8rem 3rem 6rem;
}

/* Measure is deliberately narrower than the marketing pages — this is the only
   place on the site anyone reads more than a paragraph at a stretch. */
.guide-inner {
  max-width: 720px;
  margin: 0 auto;
}

.guide-crumbs {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
  color: var(--gray-500, #938c89);
  font-size: 0.85rem;
}

.guide-crumbs a {
  color: var(--brand-orange);
  font-weight: 700;
}

.guide-crumbs a:hover {
  text-decoration: underline;
}

.guide-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: #fff;
  margin-bottom: 1rem;
}

.guide-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-meta-facts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-500, #938c89);
  font-size: 0.88rem;
}

.guide-print {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: var(--gray-400);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.guide-print svg {
  width: 16px;
  height: 16px;
}

.guide-print:hover {
  color: #fff;
  border-color: rgba(255, 157, 0, 0.5);
}

/* Auto table of contents, generated from the post's h2s at build time. */
.guide-toc {
  margin-bottom: 3rem;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.guide-toc-title {
  color: var(--brand-orange);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.guide-toc-list {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}

.guide-toc-list li {
  counter-increment: toc;
  margin-bottom: 0.45rem;
}

.guide-toc-list a {
  display: flex;
  gap: 0.7rem;
  color: var(--gray-400);
  font-size: 0.95rem;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.guide-toc-list a::before {
  content: counter(toc, decimal-leading-zero);
  color: rgba(255, 157, 0, 0.55);
  font-size: 0.78rem;
  font-weight: 700;
  padding-top: 0.15rem;
}

.guide-toc-list a:hover,
.guide-toc-list a.is-current {
  color: #fff;
}

.guide-toc-list a.is-current::before {
  color: var(--brand-orange);
}

/* Anchor jumps must clear the floating nav, and :target alone can't do it. */
.guide-body h2,
.guide-body h3 {
  scroll-margin-top: 110px;
}

/* Shown only when printing — see the print block at the end of this file. */
.guide-print-head,
.guide-print-foot {
  display: none;
}

.guide-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 3rem 0 1rem;
}

.guide-body h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin: 2.25rem 0 0.75rem;
}

.guide-body p,
.guide-body li {
  color: #cfc7c3;
  font-size: 1.06rem;
  line-height: 1.8;
}

.guide-body p {
  margin-bottom: 1.35rem;
}

.guide-body ul,
.guide-body ol {
  margin: 0 0 1.6rem 1.4rem;
}

.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }

.guide-body li {
  margin-bottom: 0.7rem;
  padding-left: 0.4rem;
}

.guide-body strong {
  color: #fff;
  font-weight: 700;
}

.guide-body a {
  color: var(--brand-orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.guide-body blockquote {
  margin: 2rem 0;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--brand-orange);
  border-radius: 0 14px 14px 0;
  background: rgba(255, 157, 0, 0.07);
  color: #f2e9e3;
  font-size: 1.04rem;
  line-height: 1.7;
}

.guide-body pre {
  margin: 0 0 1.6rem;
  padding: 1.2rem 1.4rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  overflow-x: auto;
}

.guide-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: #ffcf8a;
}

.guide-body hr {
  margin: 2.75rem 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.guide-body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 1.5rem 0;
}

.guide-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.guide-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.guide-pager-link:hover {
  border-color: rgba(255, 157, 0, 0.45);
  transform: translateY(-2px);
}

.guide-pager-link span {
  color: var(--brand-orange);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-pager-link strong {
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.guide-pager-next {
  text-align: right;
}

.guide-cta {
  margin-top: 3.5rem;
  padding: 2.25rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 157, 0, 0.3);
  background: rgba(255, 157, 0, 0.08);
}

.guide-cta-title {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.guide-cta p {
  color: #e4dbd6;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.guide-cta-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .guides,
  .guide {
    padding: 6rem 1.5rem 4rem;
  }

  .guide-grid {
    grid-template-columns: 1fr;
  }

  .guide-pager {
    grid-template-columns: 1fr;
  }

  .guide-pager-next {
    text-align: left;
  }
}

/* ---------- Scorecard ---------- */

.scorecard {
  position: relative;
  background-color: var(--brand-black);
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.9) 0%, rgba(21, 8, 0, 0.68) 45%, rgba(21, 8, 0, 0.95) 100%),
    url("assets/stars4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 8rem 3rem 6rem;
}

.scorecard-inner {
  max-width: 760px;
  margin: 0 auto;
}

.scorecard-head {
  margin-bottom: 3rem;
}

.scorecard-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.25rem;
}

.scorecard-sub {
  color: var(--gray-400);
  font-size: 1.08rem;
  line-height: 1.7;
}

/* Progress sticks to the top so the "how much is left" answer is always
   visible — the main reason people abandon a ten-question form is not knowing. */
.scorecard-progress {
  position: sticky;
  top: 96px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding: 0.9rem 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 12, 4, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.scorecard-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.scorecard-progress-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-orange);
  transition: width 0.3s ease;
}

.scorecard-progress-text {
  color: var(--gray-400);
  font-size: 0.82rem;
  white-space: nowrap;
}

.scorecard-progress-text b {
  color: #fff;
}

.scorecard-questions {
  list-style: none;
  counter-reset: scq;
  margin: 0 0 2.5rem;
  padding: 0;
}

.sc-q {
  counter-increment: scq;
  padding: 1.6rem 1.75rem;
  margin-bottom: 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.sc-q fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.sc-q legend {
  display: flex;
  gap: 0.75rem;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.sc-q legend::before {
  content: counter(scq, decimal-leading-zero);
  color: var(--brand-orange);
  font-size: 0.8rem;
  padding-top: 0.2rem;
}

.sc-opts {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-left: 1.85rem;
}

.sc-opts label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--gray-400);
  font-size: 0.92rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.sc-opts label:hover {
  color: #fff;
  border-color: rgba(255, 157, 0, 0.45);
}

.sc-opts input {
  accent-color: var(--brand-orange);
  margin: 0;
}

/* :has() keeps the checked styling on the label without extra JS. Browsers
   without it simply fall back to the native radio dot, which still reads. */
.sc-opts label:has(input:checked) {
  color: #fff;
  border-color: rgba(255, 157, 0, 0.7);
  background: rgba(255, 157, 0, 0.12);
}

.sc-opts label:focus-within {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
}

.scorecard-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.scorecard-actions button {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

#scReset {
  background: none;
  border: 0;
  color: var(--gray-400);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#scReset:hover {
  color: var(--brand-orange);
}

.scorecard-note {
  margin-top: 1rem;
  color: #ffb4a1;
  font-size: 0.9rem;
}

.scorecard-result {
  margin-top: 3.5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.scorecard-score {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.scorecard-score-num {
  display: inline-flex;
  align-items: baseline;
  padding: 1.1rem 1.5rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 157, 0, 0.5);
  background: rgba(255, 157, 0, 0.1);
  color: #fff;
}

.scorecard-score-num b {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
}

.scorecard-score-num small {
  font-size: 1.05rem;
  color: var(--gray-400);
}

.scorecard-verdict {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}

.scorecard-verdict:focus {
  outline: none;
}

.scorecard-verdict-sub {
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.65;
}

.scorecard-fixes-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
}

.scorecard-fixes {
  list-style: none;
  counter-reset: fix;
  margin: 0 0 2.5rem;
  padding: 0;
}

.scorecard-fixes li {
  counter-increment: fix;
  position: relative;
  padding: 1.35rem 1.5rem 1.35rem 3.4rem;
  margin-bottom: 0.85rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.scorecard-fixes li::before {
  content: counter(fix);
  position: absolute;
  left: 1.4rem;
  top: 1.35rem;
  color: var(--brand-orange);
  font-size: 0.85rem;
  font-weight: 700;
}

.scorecard-fixes strong {
  display: block;
  color: #fff;
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 0.45rem;
}

.scorecard-fixes p {
  color: var(--gray-400);
  font-size: 0.94rem;
  line-height: 1.6;
}

.scorecard-fix-link {
  display: inline-block;
  margin-top: 0.7rem;
  color: var(--brand-orange);
  font-size: 0.88rem;
  font-weight: 700;
}

.scorecard-fix-link:hover {
  text-decoration: underline;
}

.scorecard-cta {
  padding: 2.25rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 157, 0, 0.3);
  background: rgba(255, 157, 0, 0.08);
}

.scorecard-cta-title {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.scorecard-cta p {
  color: #e4dbd6;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.scorecard-cta-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .scorecard {
    padding: 6rem 1.5rem 4rem;
  }

  .sc-q {
    padding: 1.35rem 1.25rem;
  }

  .sc-opts {
    padding-left: 0;
  }

  /* Clear the 44px touch minimum. Nearly everyone answering this is doing it
     one-handed on a phone, and the desktop padding lands at 39px. */
  .sc-opts label {
    min-height: 44px;
    padding: 0.7rem 1.25rem;
    flex: 1 1 auto;
    justify-content: center;
  }

  .scorecard-progress {
    top: 80px;
  }
}

/* ---------- Legal pages (privacy) ---------- */

/* Long-form reading page. Deliberately plain compared to the rest of the site:
   no glass panels, no reveal animations, no decorative bleed — someone opening
   this wants to read it, and anything that delays or animates the text is
   working against that. Sits on the same starfield the footer uses so it still
   reads as part of the site. */
.legal {
  position: relative;
  background-color: var(--brand-black);
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.9) 0%, rgba(21, 8, 0, 0.72) 45%, rgba(21, 8, 0, 0.95) 100%),
    url("assets/footer-stars.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 8rem 3rem 6rem;
}

.legal-inner {
  max-width: 760px;
  margin: 0 auto;
}

.legal-title {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.75rem;
}

.legal-updated {
  color: var(--gray-400);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
}

.legal-summary {
  padding: 1.75rem 1.9rem;
  margin-bottom: 3rem;
  border-radius: 18px;
  border: 1px solid rgba(255, 157, 0, 0.28);
  background: rgba(255, 157, 0, 0.07);
}

.legal-summary-title {
  color: var(--brand-orange);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.legal-summary p:last-child {
  color: #f2e9e3;
  font-size: 1.02rem;
  line-height: 1.7;
}

.legal-inner h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 2.75rem 0 0.9rem;
}

.legal-inner p,
.legal-inner li {
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.75;
}

.legal-inner p {
  margin-bottom: 1rem;
}

.legal-inner ul {
  margin: 0 0 1.25rem 1.25rem;
  list-style: disc;
}

.legal-inner li {
  margin-bottom: 0.5rem;
  padding-left: 0.35rem;
}

.legal-inner strong {
  color: #f2e9e3;
  font-weight: 700;
}

.legal-inner a {
  color: var(--brand-orange);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-inner a:hover {
  color: var(--brand-orange-hover);
}

@media (max-width: 700px) {
  .legal {
    padding: 6rem 1.5rem 4rem;
  }
}

/* Sits between the copyright and the address in .footer-bottom. */
.footer-legal-link {
  color: inherit;
  text-decoration: none;
  opacity: 0.85;
}

.footer-legal-link:hover {
  color: var(--brand-orange);
  opacity: 1;
  text-decoration: underline;
}

/* ---------- 404 ---------- */

/* Self-contained page: no floating nav, no reveal JS, no glass filter — a
   dead end should load instantly and point back out. Reuses footer-stars.jpg
   (the smallest of the starfields) so it costs nothing extra on a warm cache. */
.notfound {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 1.5rem;
  text-align: center;
  background-color: var(--brand-black);
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.86) 0%, rgba(21, 8, 0, 0.62) 45%, rgba(21, 8, 0, 0.94) 100%),
    url("assets/footer-stars.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.notfound-inner {
  max-width: 620px;
}

.notfound-logo {
  display: inline-block;
  margin-bottom: 2.5rem;
}

.notfound-code {
  color: var(--brand-orange);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-bottom: 1rem;
}

.notfound-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 1.1rem;
}

.notfound-sub {
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.65;
  margin-bottom: 2.25rem;
}

.notfound-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.notfound-call {
  color: var(--gray-400);
  font-size: 0.92rem;
  line-height: 1.7;
}

.notfound-call a {
  color: var(--brand-orange);
  font-weight: 700;
}

.notfound-call a:hover {
  text-decoration: underline;
}

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

/* Footer (adapted from ruul.io) */
.site-footer {
  position: relative;
  background-color: #150800;
  background-image:
    linear-gradient(180deg, rgba(21, 8, 0, 0.82) 0%, rgba(21, 8, 0, 0.6) 45%, rgba(21, 8, 0, 0.92) 100%),
    url("assets/footer-stars.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid rgba(255, 157, 0, 0.18);
  color: #f2e9e3;
}

.footer-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 5rem 3rem 2.5rem;
}

.footer-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2.5rem 3rem;
  margin-bottom: 3rem;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.footer-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, 0.14), transparent 60%);
  pointer-events: none;
}

.footer-panel {
  position: relative;
  padding: 2.5rem 2.5rem 2rem;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.footer-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, 0.14), transparent 60%);
  pointer-events: none;
}

.footer-cta-title {
  max-width: 16ch;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.footer-cta-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Large grid of cells (adapted from leadsatscale.com's footer). Cells are
   fully transparent — no per-cell square — and the divider lines are drawn
   with explicit borders instead of the old gap-reveals-background trick,
   since that trick needs opaque cells to work and opaque cells is exactly
   the "square" look this shouldn't have. Two rows (not one) plus a couple
   of deliberately blank cells is what actually reads as "large" here —
   leadsatscale's own footer grid is mostly empty space, not denser content.
   DOM order relies on sparse auto-placement: Brand and Get in Touch each
   span both rows (grid-row: span 2), so the two .footer-cell-empty cells
   land in the gaps that leaves — col2/row2 and col3/row1 — without needing
   explicit grid-column/row on every cell. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  grid-template-rows: repeat(2, minmax(190px, auto));
  margin-bottom: 2.5rem;
}

.footer-cell {
  background: transparent;
  padding: 3rem 2.25rem;
}

/* Hand-placed divider lines matching the fixed DOM order above: 1 Brand,
   2 Services, 3 empty, 4 Get in Touch, 5 empty, 6 Company. Every cell but
   the last column (4, Get in Touch) gets a right-hand rule; only the two
   row-1 cells that aren't part of a row-spanning cell (2, 3) get a bottom
   rule, since Brand/Get in Touch already span both rows on their own. */
.footer-grid > *:nth-child(1),
.footer-grid > *:nth-child(2),
.footer-grid > *:nth-child(3),
.footer-grid > *:nth-child(5),
.footer-grid > *:nth-child(6) {
  border-right: 1px solid rgba(255, 157, 0, 0.4);
}

.footer-grid > *:nth-child(2),
.footer-grid > *:nth-child(3) {
  border-bottom: 1px solid rgba(255, 157, 0, 0.4);
}

.footer-cell-tall {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-brand .logo { margin-bottom: 1.25rem; }

.footer-tagline {
  max-width: 34ch;
  margin-bottom: 1.75rem;
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.6;
}

.footer-social { display: flex; gap: 0.6rem; }

.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gray-400);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, transform 0.2s ease;
}

.footer-social-link svg { width: 18px; height: 18px; }

.footer-social-link:hover {
  color: var(--brand-black);
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  transform: translateY(-2px);
}

.footer-col { display: flex; flex-direction: column; }

.footer-col-title {
  margin-bottom: 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* break-word only breaks a word as a last resort when it truly can't fit —
   unlike the old `overflow-wrap: anywhere`, which broke inside long strings
   like the email/domain links even when unnecessary, stranding a lone
   character (e.g. "m") on its own line. */
.footer-col a {
  display: inline-block;
  padding: 0.45rem 0;
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: normal;
  transition: color 0.25s ease, transform 0.25s ease;
}

.footer-col a:hover { color: var(--brand-orange); transform: translateX(4px); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  color: var(--gray-500);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  /* The asymmetric spanning grid needs the extra columns of a wide screen to
     read as deliberate — on tablet/mobile it's just dead space, so drop back
     to a plain stacked list: hide the blank cells, un-span the tall ones. */
  .footer-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .footer-cell-brand { grid-column: 1 / -1; }
  .footer-cell-tall { grid-row: auto; }
  .footer-cell-empty { display: none; }
}

@media (max-width: 700px) {
  .footer-shell { padding: 3.5rem 1.5rem 2rem; }
  .footer-cta { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 1.75rem; border-radius: 20px; }
  .footer-panel { padding: 1.75rem 1.5rem 1.5rem; border-radius: 20px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-cell { padding: 2.25rem 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ---------- Global mobile pass ---------- */

@media (max-width: 640px) {
  .hero {
    padding: 8px;
  }

  .hero-frame {
    padding: 1.25rem 1.5rem;
    border-radius: 16px;
  }

  .logo-mark {
    width: 44px !important;
    height: 44px !important;
  }

  .logo-title {
    font-size: 0.85rem;
  }

  .hero-top {
    margin-top: 2.5rem;
  }

  .hero-bottom-bar {
    padding-top: 2rem;
  }

}

/* ---------- Custom cursor (site-wide, fine-pointer devices only) ----------
   A precise inner dot plus a softly-lagging outer ring, both position:fixed
   and pointer-events:none so they never intercept clicks. Built fresh for
   NES (own colors, own easing, no blend-mode tricks) — inspired by the
   dot-follow cursor on cuberto.com, not copied from it: that site's own
   version is JS from a bundled, minified library, so this is a from-scratch
   implementation of the same interaction idea. script.js creates and skips
   these elements itself (via matchMedia checks), so nothing renders at all
   on touch devices or under prefers-reduced-motion. */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  background: var(--brand-orange);
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 0.3s ease;
}

.cursor-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(185, 178, 175, 0.55);
  transform: translate3d(-50%, -50%, 0);
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease,
    background 0.25s ease, opacity 0.3s ease;
}

.cursor-ring.-active {
  width: 56px;
  height: 56px;
  border-color: var(--gray-100);
  background: rgba(221, 218, 217, 0.12);
}

/* Two small "electrons" orbiting the ring's own edge. Each orbit wrapper is
   sized 100% of .cursor-ring, so the dot (placed at its top edge) traces the
   ring's exact radius and keeps riding the border as the ring grows on
   hover. Different durations (rather than a fixed angle offset) make the
   two drift in and out of sync instead of staying rigidly opposite. */
.cursor-orbit {
  position: absolute;
  inset: 0;
  animation: cursorOrbit 3.2s linear infinite;
}

.cursor-orbit-2 {
  animation-duration: 2.1s;
  animation-direction: reverse;
}

.cursor-orbit-dot {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gray-500);
}

@keyframes cursorOrbit {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

body.has-custom-cursor * {
  cursor: none;
}

/* ---------- Expandable "What We Do" accordion (about.html) ----------
   Same interaction idea as cuberto.com's "What We Do" list — a numbered,
   click-to-expand accordion — rebuilt from scratch in NES's own markup,
   styling and copy (the four services already used on the homepage's
   .service-card grid). The expand/collapse itself is the well-known CSS
   grid-template-rows 0fr->1fr trick (no JS height math, no fixed max-height
   guess), toggled by script.js adding/removing .is-open. */
.services-accordion {
  background: #241202;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7rem 3rem;
}

.services-accordion-inner {
  max-width: 820px;
  margin: 0 auto;
}

.services-accordion-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0.75rem 0 3rem;
  max-width: 18ch;
}

.accordion-list {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.accordion-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.accordion-item-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding: 1.75rem 0;
  background: none;
  border: none;
  color: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: padding-left 0.3s ease;
}

.accordion-item-head:hover {
  padding-left: 0.5rem;
}

.accordion-item-num {
  flex-shrink: 0;
  width: 2.5ch;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-orange);
}

.accordion-item-title {
  flex: 1;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.accordion-item-icon {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
}

.accordion-item-icon::before,
.accordion-item-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--brand-orange);
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item-icon::before {
  width: 14px;
  height: 2px;
}

.accordion-item-icon::after {
  width: 2px;
  height: 14px;
}

/* Open state turns the plus into a minus: the vertical bar rotates flat
   onto the horizontal one instead of fading, so the icon never blanks out
   mid-transition. */
.accordion-item.is-open .accordion-item-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.accordion-item-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion-item-body {
  grid-template-rows: 1fr;
}

.accordion-item-body-inner {
  overflow: hidden;
  min-height: 0;
}

.accordion-item-body-inner p {
  max-width: 60ch;
  padding-bottom: 1.75rem;
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.6;
}

@media (pointer: coarse) {
  .cursor-dot,
  .cursor-ring {
    display: none;
  }
}

@media (max-width: 700px) {
  .services-accordion {
    padding: 4rem 1.5rem;
  }

  .accordion-item-title {
    font-size: 1.05rem;
  }
}

/* ---------- Case Studies index (case-studies.html) ---------- */

/* Sunset sky behind the hero. The photo is bright — pale pink and white —
   against a site that is otherwise dark with white type, so it can't be used
   at anything near full strength. The overlay does two jobs: it holds the
   headline legible, and it resolves to solid --brand-black by 100% so the
   hero dissolves into the section beneath instead of ending on a hard seam.
   Kept warm (21,8,0) rather than neutral so the darkening reads as dusk
   rather than as a grey scrim over a colour photo. */
/* Sky moved to the fixed .page-bg-sky layer so it runs behind the header and
   carries down the whole page. This section stays transparent — it's the part
   of the page where the sky should read most clearly. */
.case-studies-hero {
  position: relative;
  padding: 8rem 3rem 5rem;
  text-align: center;
}

.case-studies-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}

.case-studies-hero-title {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 0.75rem;
}

.case-studies-hero-sub {
  max-width: 46ch;
  margin: 1.5rem auto 0;
  color: var(--gray-400);
  font-size: 1.1rem;
  line-height: 1.6;
}

.case-section {
  padding: 3rem 3rem 5rem;
}

/* Content below the hero gets its own scrim so body copy stays readable over
   the sky. It lives on the scrolling section rather than on the fixed backdrop
   deliberately: a gradient on .page-bg-sky is viewport-relative, so it would
   pin a bright band to the top of every screen instead of easing in as you
   move down the page. Transparent at the top so the hero flows into it with
   no seam. */
.case-section {
  position: relative;
  isolation: isolate;
}

.case-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(21, 8, 0, 0) 0%,
    rgba(21, 8, 0, 0.55) 18%,
    rgba(21, 8, 0, 0.68) 100%
  );
  pointer-events: none;
}

.concept-section::before {
  background: rgba(21, 8, 0, 0.68);
}

.case-section-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.case-section-head {
  margin-bottom: 2.5rem;
}

.case-section-title {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: #fff;
  margin-top: 0.5rem;
}

.case-section-sub {
  max-width: 60ch;
  margin-top: 0.5rem;
  color: var(--gray-400);
  font-size: 1rem;
  line-height: 1.6;
}

.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.case-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.75rem;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: border-color 0.3s ease, transform 0.3s ease;
}

a.case-card {
  color: inherit;
}

.case-card:hover {
  border-color: rgba(255, 157, 0, 0.4);
  transform: translateY(-4px);
}

.case-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.case-card-industry {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-orange);
}

.case-card-client {
  margin-top: 0.4rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.case-card-brief {
  max-width: 60ch;
  color: var(--gray-400);
  font-size: 1.02rem;
  line-height: 1.6;
}

.case-card-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.case-card-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--gray-400);
  font-size: 0.95rem;
  line-height: 1.5;
}

.case-card-list li::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--brand-orange);
}

.case-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.case-card-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease;
}

.case-card:hover .case-card-link svg {
  transform: translateX(4px);
}

/* Spare pattern: kept for the next client whose study isn't written yet. No
   card currently uses it. */
.case-card.-pending {
  opacity: 0.6;
}

.case-card.-pending:hover {
  border-color: rgba(255, 255, 255, 0.1);
  transform: none;
}

.case-card-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--gray-500);
}

/* Concept Work — demo builds with no real client behind them, so the card
   deliberately has no results/stat treatment, only what was designed. */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

a.concept-card {
  color: inherit;
}

.concept-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2.25rem;
  background: #150800;
  transition: background 0.3s ease;
}

.concept-card:hover {
  background: #1d0d00;
}

.concept-card-icon svg {
  width: 38px;
  height: 38px;
  color: var(--brand-orange);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.concept-card:hover .concept-card-icon svg {
  transform: translateY(-4px);
}

.concept-card-industry {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

.concept-card-title {
  margin-top: 0.3rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
}

.concept-card-desc {
  flex: 1;
  color: var(--gray-400);
  font-size: 0.92rem;
  line-height: 1.55;
}

.concept-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
}

.concept-card-link svg {
  width: 14px;
  height: 14px;
  transition: transform 0.3s ease;
}

.concept-card:hover .concept-card-link svg {
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .concept-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .case-studies-hero {
    padding: 5rem 1.5rem 2.5rem;
  }

  .case-section {
    padding: 2rem 1.5rem 3.5rem;
  }

  .case-card {
    padding: 1.75rem;
  }

  .concept-grid {
    grid-template-columns: 1fr;
  }

  .concept-card {
    padding: 1.75rem;
  }
}

/* ---------- Case study detail page (case-study-loop-carpet.html) ---------- */

.case-detail-hero {
  padding: 4rem 3rem 3rem;
}

.case-detail-hero-inner {
  max-width: 780px;
  margin: 0 auto;
}

.case-detail-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  color: var(--gray-400);
  font-size: 0.9rem;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.case-detail-back:hover {
  color: var(--brand-orange);
}

.case-detail-industry {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-orange);
}

.case-detail-title {
  margin-top: 0.75rem;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.case-detail-sub {
  max-width: 60ch;
  margin-top: 1.25rem;
  color: var(--gray-400);
  font-size: 1.1rem;
  line-height: 1.6;
}

.case-detail-visit {
  margin-top: 1.75rem;
}

.case-detail-body {
  padding: 2rem 3rem 6rem;
}

.case-detail-body-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.case-detail-block-label {
  margin-bottom: 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-orange);
}

.case-detail-block h2 {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #fff;
}

/* Direct children only. As a plain descendant selector this outranked every
   .case-*-something class applied to a <p> inside the block — including
   .case-detail-block-label, whose 0.78rem eyebrow was quietly rendering at
   body size on both detail pages. */
.case-detail-block > p {
  color: var(--gray-400);
  font-size: 1.05rem;
  line-height: 1.65;
}

.case-detail-block > p.case-detail-block-label {
  font-size: 0.78rem;
}

/* Loop Carpet's blocks are single-paragraph; House Keep Up's run several, and
   without this they butt straight up against each other. */
.case-detail-block > p + p {
  margin-top: 1rem;
}

.case-detail-features {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
  padding: 0.5rem 2rem;
  border-radius: 24px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.case-detail-feature {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.case-detail-feature:last-child {
  border-bottom: none;
}

.case-detail-feature-icon svg {
  width: 28px;
  height: 28px;
  color: var(--brand-orange);
  flex-shrink: 0;
}

.case-detail-feature h3 {
  margin-bottom: 0.3rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
}

.case-detail-feature p {
  color: var(--gray-400);
  font-size: 0.95rem;
  line-height: 1.55;
}

@media (max-width: 700px) {
  .case-detail-hero {
    padding: 3rem 1.5rem 2rem;
  }

  .case-detail-body {
    padding: 1rem 1.5rem 4rem;
  }

  .case-detail-feature {
    gap: 1rem;
  }
}

/* ---------- Case study detail: results / timeline blocks ----------
 * Added for the House Keep Up study, which is a numbers-and-narrative piece
 * rather than the feature list Loop Carpet needed. Scoped under .case-detail-*
 * so both detail pages stay siblings.
 */

.case-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.case-detail-meta div {
  min-width: 0;
}

.case-detail-meta dt {
  margin-bottom: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gray-500);
}

.case-detail-meta dd {
  color: var(--gray-100);
  font-size: 0.98rem;
  line-height: 1.45;
}

.case-detail-meta dd a {
  color: var(--brand-orange);
  transition: color 0.25s ease;
}

.case-detail-meta dd a:hover {
  color: var(--brand-orange-hover);
  text-decoration: underline;
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin-top: 1.5rem;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.case-stat {
  padding: 1.75rem 1.5rem;
  background: linear-gradient(165deg, rgba(38, 24, 10, 0.92), rgba(20, 12, 4, 0.92));
}

.case-stat-num {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-orange);
}

.case-stat-label {
  margin-top: 0.5rem;
  color: var(--gray-100);
  font-size: 0.95rem;
  line-height: 1.45;
}

.case-stat-note {
  margin-top: 0.4rem;
  color: var(--gray-500);
  font-size: 0.8rem;
  line-height: 1.4;
}

.case-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.case-col {
  padding: 1.75rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}

.case-col-title {
  margin-bottom: 1.1rem;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

.case-col.-after .case-col-title {
  color: var(--brand-orange);
}

.case-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.case-col li {
  position: relative;
  padding-left: 1.65rem;
  color: var(--gray-400);
  font-size: 0.97rem;
  line-height: 1.5;
}

.case-col li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.case-col.-before li::before {
  content: "\00d7";
  color: var(--gray-500);
  font-size: 1.15rem;
  line-height: 1.25;
}

.case-col.-after li::before {
  content: "\2192";
  color: var(--brand-orange);
}

.case-pull {
  margin-top: 1.5rem;
  padding: 1.75rem 2rem;
  border-radius: 22px;
  border: 1px solid rgba(255, 157, 0, 0.28);
  border-left: 3px solid var(--brand-orange);
  background: linear-gradient(120deg, rgba(255, 157, 0, 0.1), rgba(255, 157, 0, 0.02));
}

.case-pull p {
  color: var(--gray-100);
  font-size: 1.05rem;
  line-height: 1.6;
}

.case-pull p + p {
  margin-top: 0.85rem;
}

.case-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.75rem;
  padding-left: 1.75rem;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.case-phase {
  position: relative;
  padding-bottom: 2.5rem;
}

.case-phase:last-child {
  padding-bottom: 0;
}

.case-phase::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 5px);
  top: 0.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(255, 157, 0, 0.16);
}

.case-phase-when {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand-orange);
}

.case-phase h3 {
  margin: 0.45rem 0 1.1rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.case-phase-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem 2rem;
}

.case-phase h4 {
  margin-bottom: 0.7rem;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray-500);
}

.case-phase ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.case-phase li {
  position: relative;
  padding-left: 1rem;
  color: var(--gray-400);
  font-size: 0.94rem;
  line-height: 1.5;
}

.case-phase li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 157, 0, 0.55);
}

/* Evidence screenshots. These are light-UI dashboard captures dropped onto a
   dark page, so they need a frame to stop them glaring — and they are the one
   thing on the page a sceptical reader will want to inspect closely, hence
   every figure is a link to the full-size file. */
.case-shot {
  margin-top: 1.5rem;
}

.case-shot a {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: #fff;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  transition: border-color 0.25s ease, transform 0.25s ease;
}

.case-shot a:hover {
  border-color: rgba(255, 157, 0, 0.55);
  transform: translateY(-2px);
}

.case-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.case-shot figcaption {
  margin-top: 0.8rem;
  color: var(--gray-500);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* The backlink table and the rank-tracker grids carry small type that turns to
   mush at the 780px text measure, so they break out of the column. */
/* The negative margin alone re-centres the wider box on the 780px column.
   Adding a translateX(-50%) on top double-counts the shift and throws the
   figure off the left edge of the viewport. */
.case-shot.-wide {
  width: min(1120px, 92vw);
  margin-left: calc(50% - min(560px, 46vw));
}

.case-shot.-wide figcaption {
  max-width: 780px;
  margin-inline: auto;
}

/* Cut-out photo, not a screenshot: no frame, no white plate. */
.case-shot.-cutout a {
  border: none;
  background: none;
  box-shadow: none;
  overflow: visible;
}

.case-shot.-cutout img {
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

.case-shot.-portrait {
  max-width: 320px;
}

@media (max-width: 1200px) {
  .case-shot.-wide {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 700px) {
  .case-detail-meta {
    gap: 1.25rem 2rem;
  }

  .case-stat {
    padding: 1.4rem 1.25rem;
  }

  .case-col,
  .case-pull {
    padding: 1.4rem 1.25rem;
  }

  .case-timeline {
    padding-left: 1.35rem;
  }

  .case-phase::before {
    left: calc(-1.35rem - 5px);
  }
}

/* ---------- ScoutMyBusiness sections (home + /tools) ----------
 * The heatmap is built from divs rather than an image: it is the clearest way
 * to explain the product, it weighs nothing, and it stays sharp at any size.
 * Rank colours follow the tool's own legend (top 3 / 4-10 / below 10 / not
 * found) so the graphic here and the real product read the same.
 */

.scout {
  padding: 7rem 3rem;
}

.scout-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4.5rem;
  align-items: center;
}

.scout-title {
  margin: 0.75rem 0 1.25rem;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #fff;
}

.scout-lede {
  color: var(--gray-400);
  font-size: 1.08rem;
  line-height: 1.65;
}

.scout-lede + .scout-lede {
  margin-top: 1rem;
}

.scout-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 1.75rem;
}

.scout-points li {
  position: relative;
  padding-left: 1.9rem;
  color: var(--gray-100);
  font-size: 1rem;
  line-height: 1.5;
}

.scout-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--brand-orange);
  box-shadow: 0 0 0 4px rgba(255, 157, 0, 0.18);
}

.scout-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
}

.scout-note {
  color: var(--gray-500);
  font-size: 0.86rem;
}

/* ---- the grid ---- */

.scout-grid-frame {
  padding: 1.5rem;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.scout-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.scout-pin {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font-size: clamp(0.7rem, 1.1vw, 0.85rem);
  font-weight: 700;
  color: #0d0600;
  background: #3f9c52;
}

.scout-pin.-mid    { background: var(--brand-orange); }
.scout-pin.-low    { background: #b8442e; color: #fff; }
.scout-pin.-none   { background: rgba(255, 255, 255, 0.13); color: var(--gray-500); }

.scout-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.15rem;
  margin-top: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.scout-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--gray-400);
  font-size: 0.8rem;
}

.scout-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #3f9c52;
}

.scout-legend .-mid i  { background: var(--brand-orange); }
.scout-legend .-low i  { background: #b8442e; }
.scout-legend .-none i { background: rgba(255, 255, 255, 0.22); }

.scout-caption {
  margin-top: 1rem;
  color: var(--gray-500);
  font-size: 0.82rem;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .scout {
    padding: 4.5rem 1.5rem;
  }

  /* The grid is the whole point of this section, so give it back the width
     the frame padding was taking on a phone. */
  .scout-grid-frame {
    padding: 1rem;
  }

  .scout-grid {
    gap: 4px;
  }

  .scout-inner {
    grid-template-columns: 1fr;
    gap: 2.75rem;
  }
}


/* The Scout split inside a tool card already sits in a padded panel, so it
   does not need the section-level top margin the home page version gets. */
.tool-card-split {
  margin-top: 2.5rem;
}

/* ---------- /tools ---------- */

.tools-hero {
  padding: 4rem 3rem 2rem;
}

.tools-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.tools-hero-title {
  margin-top: 0.9rem;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
}

.tools-hero-sub {
  max-width: 62ch;
  margin: 1.25rem auto 0;
  color: var(--gray-400);
  font-size: 1.1rem;
  line-height: 1.6;
}

.tool-card {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
}

.tool-card + .tool-card {
  margin-top: 2rem;
}

.tool-card-tag {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 157, 0, 0.4);
  color: var(--brand-orange);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tool-card h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
}

.tool-card > p {
  max-width: 68ch;
  margin-top: 0.9rem;
  color: var(--gray-400);
  font-size: 1.03rem;
  line-height: 1.65;
}

.tool-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tool-feature h3 {
  margin-bottom: 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}

.tool-feature p {
  color: var(--gray-400);
  font-size: 0.93rem;
  line-height: 1.55;
}

.tool-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 700px) {
  .tools-hero {
    padding: 3rem 1.5rem 1.5rem;
  }

  .tool-card {
    padding: 1.5rem 1.25rem;
    border-radius: 22px;
  }
}

/* ---------- Nav pill: fitting seven items ----------
 * Adding Tools took the nav from six links to seven, which no longer fit
 * beside the logo and the Let's Talk button at the original sizing. Measured
 * on the real header rather than guessed:
 *
 *   1280px  base 0.8rem / 17px padding   ->  715px pill, one row, fine
 *   1200px  base sizing                  ->  wraps
 *   1000px  0.75rem / 11px padding       ->  604px pill, one row
 *    ~960px  even the tightened pill      ->  wraps
 *
 * A wrapped pill is not merely ugly here: .nav-pill has overflow:hidden, so a
 * seventh link pushed to a second row is clipped out of existence rather than
 * shown. A nav item that silently vanishes is the worst outcome, so below
 * 1024px the drawer takes over instead of shrinking the type further.
 *
 * The Let's Talk button keeps its original 768px breakpoint — it is the
 * primary CTA and still fits comfortably above that.
 */
@media (max-width: 1200px) {
  .nav-pill a {
    padding: 8px 11px;
    font-size: 0.75rem;
  }
}

@media (max-width: 1024px) {
  .nav-pill {
    display: none;
  }

  .menu-toggle {
    display: flex;
  }
}

/* ---------- Print ----------
 * Deliberately last in the file so these rules win without !important games.
 *
 * This is the site's "download the PDF" feature. Rather than generating and
 * hosting separate PDF files — which go stale the moment a guide is edited and
 * can never be recalled once downloaded — the browser's own Save-as-PDF is
 * pointed at a print-specific rendering of the live page. Always current, no
 * extra artifacts, no build dependency.
 */
@media print {
  /* Kill everything that isn't the article: chrome, decoration, and the
     interactive bits that mean nothing on paper. */
  .site-header,
  .floating-nav,
  .mobile-menu,
  .site-footer,
  .guide-crumbs,
  .guide-print,
  .guide-toc,
  .guide-pager,
  .guide-cta,
  .cursor-dot,
  .custom-cursor,
  svg[aria-hidden="true"]:not(.guide-print-head svg) {
    display: none !important;
  }

  /* Dark theme on paper wastes an entire cartridge. */
  html,
  body {
    background: #fff !important;
    color: #111 !important;
  }

  .guide {
    background: none !important;
    background-image: none !important;
    padding: 0 !important;
  }

  .guide-inner {
    max-width: none;
    margin: 0;
  }

  .guide-print-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 10pt;
    margin-bottom: 18pt;
    border-bottom: 1.5pt solid #ff9d00;
    font-size: 8.5pt;
    color: #444;
  }

  .guide-print-head img {
    height: 26pt;
    width: auto;
  }

  .guide-print-foot {
    display: block !important;
    margin-top: 20pt;
    padding-top: 8pt;
    border-top: 0.5pt solid #ccc;
    font-size: 8pt;
    color: #666;
  }

  .section-eyebrow {
    color: #b36e00 !important;
    font-size: 8.5pt !important;
  }

  .guide-title {
    color: #111 !important;
    font-size: 22pt !important;
    margin-bottom: 6pt;
  }

  .guide-meta {
    border-bottom: 0.5pt solid #ccc !important;
    margin-bottom: 16pt;
    padding-bottom: 8pt;
  }

  .guide-meta-facts {
    color: #666 !important;
    font-size: 8.5pt;
  }

  .guide-body p,
  .guide-body li {
    color: #222 !important;
    font-size: 10.5pt !important;
    line-height: 1.55 !important;
  }

  .guide-body h2 {
    color: #111 !important;
    font-size: 13.5pt !important;
    margin: 16pt 0 6pt !important;
  }

  .guide-body h3 {
    color: #111 !important;
    font-size: 11.5pt !important;
    margin: 12pt 0 4pt !important;
  }

  .guide-body strong {
    color: #000 !important;
  }

  .guide-body blockquote {
    background: #fdf3e3 !important;
    border-left: 2pt solid #ff9d00 !important;
    color: #222 !important;
    font-size: 10pt !important;
    padding: 8pt 10pt !important;
  }

  .guide-body code {
    color: #a3521a !important;
  }

  .guide-body pre {
    background: #f5f5f5 !important;
    border: 0.5pt solid #ddd !important;
  }

  /* On paper a link is just words, so spell out where it actually went —
     but only for external URLs. Printing the href of every in-page anchor
     would litter the text with "(#step-one)". */
  .guide-body a {
    color: #111 !important;
    text-decoration: underline;
  }

  .guide-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #777;
    word-break: break-all;
  }

  /* Keep headings attached to what follows, and don't split list items or
     callouts across a page break. */
  .guide-body h2,
  .guide-body h3 {
    break-after: avoid;
    page-break-after: avoid;
  }

  .guide-body li,
  .guide-body blockquote,
  .guide-body pre,
  .guide-body img {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Scroll-reveal leaves everything at opacity:0 until JS runs. A print from a
     page that was never scrolled would otherwise come out blank — the single
     most important rule in this block. */
  .reveal,
  .split-heading,
  .reveal.is-revealed {
    opacity: 1 !important;
    transform: none !important;
  }

  @page {
    margin: 14mm 15mm;
  }
}