/* ════════════════════════════════════════════════════════════════
   OPO SEO — shared page shell (subpages)
   Same tokens, grain architecture, nav/footer and motion hooks as
   index.html. index.html stays self-contained; every OTHER page
   links this + js/shell.js.
   ════════════════════════════════════════════════════════════════ */

:root {
  --cream: #ede9e6;
  --amber: #d4baa0;
  --ink: #5c4f4a;
  --sage: var(--amber); /* alias of --amber — kept for nav-underline semantics */
  --dark: #0c0907;
  /* NOTE: --ink here is the dark-theme taupe. about.html deliberately
     overrides --ink to near-black (#16130f) for its light plate; that is
     page-scoped and intentional, not a collision. */
  --din:
    "DIN Alternate", "DIN Alternate Bold", "Barlow Condensed",
    "Arial Narrow", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --body: "Schibsted Grotesk", "Inter", "Helvetica Neue", Arial, sans-serif;
  --g: clamp(28px, 5vw, 88px);
  --nav-h: clamp(64px, 5.5vw, 90px);
  --fg: #f4f3f1;
  --muted: rgba(244, 243, 241, 0.62);
  --faint: rgba(244, 243, 241, 0.4);
  --hair: rgba(244, 243, 241, 0.1);
  --hair-mid: rgba(244, 243, 241, 0.18);
  --accent: #ffac2e;
  --maxw: 1200px;
  --pad-x: clamp(16px, 4vw, 36px);
  --r: 22px;

  /* ── ONE type scale (shared by every subpage) ── */
  --fs-h1: clamp(36px, 4.8vw, 76px); /* page hero title */
  --fs-h2: clamp(28px, 3.4vw, 50px); /* section headings */
  --fs-h3: clamp(18px, 2vw, 28px); /* sub / stub headings */
  --fs-lede: clamp(15px, 1.2vw, 18px); /* intro copy */
  --fs-body: 15px; /* running body */
  --fs-small: 13px; /* secondary body */
  --fs-label: 11px; /* uppercase micro-labels */
  --fs-nano: 10px; /* peripheral legal / meta */
  /* caps tracking — tied to role; never below 0.06em on a caps label */
  --tr-display: 0.02em; /* DIN caps at display sizes */
  --tr-label: 0.12em; /* uppercase micro-labels */
  --tr-eyebrow: 0.16em; /* looser accent eyebrow */
  /* vertical rhythm — one section ramp */
  --section-y: clamp(56px, 8vw, 112px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  background: #0a0a0b;
}
body {
  background: #0a0a0b;
  color: var(--fg);
  font-family: var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#page-base {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #0a0a0b;
}
#smooth-wrapper {
  position: relative;
  z-index: 2; /* content stacks above any fixed z:1 base layer */
}

/* ── GRAIN — RETIRED on interior pages (user rule 2026-07-14: backgrounds
   are plain black, no texture; the landing page keeps its own inline
   recipe). The hooks stay so legacy markup renders cleanly with no film. ── */
.page-grain { position: relative; }
.page-grain > * { position: relative; z-index: 1; }
.band > * { position: relative; z-index: 1; }

/* ── NAV — live-site menu, hero-matched styling ── */
.nav {
  position: relative;
  z-index: 6;
  height: var(--nav-h);
  padding: 0 var(--g);
  display: flex;
  align-items: center;
}
.nav-logo {
  width: clamp(34px, 3vw, 50px);
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  line-height: 0;
  transform: translateY(5px);
  transition: color 0.3s ease;
}
.nav-logo:hover {
  color: var(--sage);
}
.nav-logo svg {
  width: 100%;
  height: auto;
  aspect-ratio: 546 / 501;
  display: block;
  overflow: visible;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.8vw, 44px);
  list-style: none;
  margin-left: auto;
}
.nav-links > li {
  position: relative;
}
.nav-links a {
  font-family: var(--body);
  font-size: clamp(9px, 0.65vw, 11px);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 233, 230, 0.48);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color 0.25s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--sage);
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover {
  color: rgba(237, 233, 230, 0.9);
}
.nav-links a:hover::after {
  width: 100%;
}
.nav-links a[aria-current="page"] {
  color: rgba(237, 233, 230, 0.9);
}
/* dropdown — near-transparent glass, sharp edges (cookie-card language) */
.nav-drop > .drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 236px;
  padding: 10px 0;
  list-style: none;
  background: rgba(10, 10, 11, 0.72);
  border: 1px solid rgba(244, 243, 241, 0.16);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}
.nav-drop:hover > .drop,
.nav-drop:focus-within > .drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}
.nav-drop > .drop a {
  display: block;
  padding: 8px 18px;
  font-size: var(--fs-nano);
  letter-spacing: 0.08em;
}
.nav-drop > .drop a::after {
  display: none;
}
/* PRIMARY nav CTA — larger + FILLED (the one solid button in the nav)
   so it stands apart from the outline pills. Inverts to outline on hover. */
.nav-links .nav-audit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(124px, 9.6vw, 158px);
  min-height: 46px;
  padding: 11px 24px 10px;
  border: 1px solid #f4f3f1;
  border-radius: 1440px;
  background: #f4f3f1;
  color: #0c0907;
  font-size: clamp(8px, 0.62vw, 10px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-align: center;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.nav-links .nav-audit::after {
  display: none;
}
.nav-links .nav-audit:hover {
  background: transparent;
  border-color: rgba(244, 243, 241, 0.5);
  color: #f4f3f1;
}
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
}

/* ── PAGE HERO — dark editorial header with the footer-bloom atmosphere ── */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 clamp(48px, 7vw, 96px);
}
.page-bloom {
  position: absolute;
  right: -14%;
  top: -34%;
  width: 64%;
  height: 150%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  background:
    radial-gradient(42% 38% at 72% 30%, rgba(255, 172, 46, 0.2), transparent 62%),
    radial-gradient(50% 44% at 84% 44%, rgba(126, 104, 118, 0.26), transparent 66%),
    radial-gradient(40% 40% at 66% 58%, rgba(160, 224, 171, 0.09), transparent 60%);
  filter: blur(26px);
}
/* NOTE: the page-hero carries NO extra grain film. One layer only —
   .page-grain's screen 0.22, the exact recipe approved on the landing
   page's dark ground. A second overlay film was tried here and read as
   "extremely strong" static over the bloom midtones; never stack two
   grain layers over the same pixels. */
.page-hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(56px, 9vw, 128px) var(--pad-x) 0;
  text-align: center;
}

/* ── scroll rail — thin vertical rail (track + progress fill + moving tick
   + percent) PLUS a skip-to-section dot per [data-nav] element, placed
   along the rail at that section's scroll position. Difference-blended so
   it reads over dark + light. [data-nav] is an explicit whitelist. ── */
.scroll-progress {
  position: fixed;
  right: clamp(14px, 1.6vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  height: min(52vh, 520px);
  width: 2px;
  z-index: 80;
  pointer-events: none;
  mix-blend-mode: difference;
}
.sp-rail {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
}
.sp-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.55);
  transform-origin: top center;
  transform: scaleY(0);
  will-change: transform;
}
.sp-tick {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.sp-num {
  position: absolute;
  right: calc(100% + 10px);
  top: 0;
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 500;
  font-style: normal;
  color: #fff;
  transform: translateY(-50%);
  will-change: transform;
}
.sp-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.3s ease;
}
/* generous invisible hit area so a small dot is easy to hover */
.sp-dot::before {
  content: "";
  position: absolute;
  left: -9px;
  right: -9px;
  top: -9px;
  bottom: -9px;
}
.sp-dot:hover {
  background: #fff;
}
.sp-dot.is-active {
  background: #fff;
  outline: 1.5px solid #fff;
  outline-offset: 3px;
}
.sp-dlabel {
  position: absolute;
  right: calc(100% + 18px);
  top: 50%;
  font-family: var(--body);
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 900px) {
  .scroll-progress {
    display: none;
  }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: clamp(14px, 1.8vw, 24px);
}
.eyebrow i {
  width: clamp(20px, 3vw, 36px);
  height: 1px;
  background: currentColor;
  display: block;
}
.page-title {
  font-family: var(--din);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  color: var(--fg);
  max-width: 24ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.page-lede {
  margin: clamp(16px, 2vw, 26px) auto 0;
  max-width: 62ch;
  font-family: var(--body);
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--muted);
}

/* ── shared band + wrap ── */
.band {
  position: relative;
  width: 100%;
  padding: var(--section-y) var(--pad-x);
}
.wrap {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
}
.band--light {
  background: #f6f6f5;
  color: #16130f;
}
.band--light .eyebrow {
  color: #8a8278;
}
.h2 {
  font-family: var(--din);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  max-width: 18ch;
  text-wrap: balance;
}

/* ── buttons — THE site pill, exactly as on the landing page: rounded,
   transparent, hairline, mono ALL-CAPS. (The sharp glass look belongs
   ONLY to the cookie card's own internals.) ── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 1440px;
  border: 1px solid rgba(244, 243, 241, 0.4);
  background: transparent;
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.btn-pill:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: #0c0907;
}
.band--light .btn-pill {
  border-color: #16130f;
  background: transparent;
  color: #16130f;
}
.band--light .btn-pill:hover {
  background: #16130f;
  border-color: #16130f;
  color: #f4f2ee;
}

/* ── stub rows (bones pages: real IA, honest placeholders) ── */
.stub-list {
  list-style: none;
  border-top: 1px solid var(--hair-mid);
}
.stub-list li {
  border-bottom: 1px solid var(--hair);
}
.stub-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2vw, 24px) 2px;
  text-decoration: none;
  color: var(--fg);
  transition: padding-left 0.3s ease;
}
.stub-list a:hover {
  padding-left: 12px;
}
.stub-title {
  font-family: var(--din);
  font-weight: 600;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
}
.stub-note {
  font-family: var(--body);
  font-size: var(--fs-nano);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.coming {
  margin-top: clamp(20px, 3vw, 36px);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--muted);
  max-width: 52ch;
}

/* ── reveal hooks (same scrubbed language as the landing page) ── */
.reveal,
.sx {
  opacity: 0;
  transform: translateY(28px);
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .sx {
    opacity: 1;
    transform: none;
  }
}

/* ── FOOTER — landing footer, shared markup ── */
.site-footer {
  position: relative;
  /* NO overflow:hidden — clipping the bloom at the top edge is what created
     the visible line. The footer shares the body's EXACT near-black, so with
     no clip and no divider the top edge is indistinguishable from the page
     above it; the bloom simply bleeds up across the seam. Body already has
     overflow-x:hidden, so the off-canvas bloom can't cause a scrollbar. */
  background: #0a0a0b;
  color: var(--fg);
  padding-block: clamp(64px, 9vw, 120px) clamp(26px, 4vw, 44px);
  padding-inline: clamp(24px, 6vw, 88px);
}
/* Atmospheric glow that SPANS the boundary — it starts well above the footer's
   top edge and its own top is masked to nothing, so there is no line where it
   begins. This is the only thing marking the footer, and it can't be located
   to a single row. Sits behind footer content (z-index:0 < content z:1). */
.footer-bloom {
  position: absolute;
  right: -12%;
  top: -55%;
  width: 60%;
  height: 190%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  background:
    radial-gradient(42% 30% at 72% 46%, rgba(255, 172, 46, 0.24), transparent 62%),
    radial-gradient(50% 36% at 84% 56%, rgba(126, 104, 118, 0.28), transparent 66%),
    radial-gradient(40% 32% at 66% 66%, rgba(160, 224, 171, 0.1), transparent 60%);
  filter: blur(30px);
  /* dissolve the glow's upper reach so it fades in gradually across the
     page→footer join instead of presenting a top edge */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 42%);
  animation: footerBloom 14s ease-in-out infinite alternate;
}
@keyframes footerBloom {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-4%, 3%) scale(1.08);
  }
}
/* footer grain retired with the rest of the interior texture (plain black) */
.footer-wrap {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr);
  gap: clamp(30px, 4.5vw, 74px);
}
.footer-h {
  font-family: var(--din);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(34px, 3.8vw, 56px); /* footer statement — one size larger than --fs-h2 by intent */
  line-height: 0.98;
  letter-spacing: var(--tr-display);
  color: var(--fg);
  text-wrap: balance;
}
.footer-lede {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(20px, 2.6vw, 34px);
  min-height: 44px;
  padding: 12px 26px;
  border: 1px solid rgba(244, 243, 241, 0.4);
  border-radius: 1440px; /* THE site pill — original, locked */
  background: transparent;
  color: var(--fg);
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}
.footer-cta:hover {
  background: var(--fg);
  color: var(--dark);
  border-color: var(--fg);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
}
.fcol h3 {
  font-family: var(--body);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 16px;
}
.fcol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.fcol a {
  font-family: var(--body);
  font-size: var(--fs-small);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.fcol a:hover {
  color: var(--fg);
}
.footer-base {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: clamp(44px, 6vw, 84px) auto 0;
  padding-top: clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-mark {
  font-family: var(--din);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--fg);
  display: block;
}
.footer-tag {
  font-family: var(--body);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
  margin-top: 8px;
  display: block;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.footer-contact a {
  font-family: var(--body);
  font-size: var(--fs-small);
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s;
}
.footer-contact a:hover {
  color: var(--fg);
}
.footer-legal {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: clamp(30px, 4vw, 52px) auto 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--body);
  font-size: var(--fs-nano);
  letter-spacing: 0.06em;
  color: var(--faint);
}
@media (max-width: 860px) {
  .footer-wrap {
    grid-template-columns: 1fr;
  }
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-contact {
    align-items: flex-start;
    text-align: left;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Content patterns added for the full page buildout (services,
   industries, areas, guides, policy, and per-service detail pages).
   Ported into the LIVE stylesheet (pages link css/shell.css).
   ═══════════════════════════════════════════════════════════════ */
.footer-legal a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244,243,241,0.24); padding-bottom: 1px; transition: color .25s, border-color .25s; }
.footer-legal a:hover { color: var(--fg); border-color: var(--fg); }

.footer-socials { display: inline-flex; gap: 10px; margin-top: 12px; }
.footer-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(244,243,241,0.34); display: grid; place-items: center; color: var(--muted); transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease; }
.footer-socials a:hover { color: var(--dark); background: var(--fg); border-color: var(--fg); transform: translateY(-2px); }
.footer-socials svg { width: 16px; height: 16px; fill: currentColor; }
.footer-socials svg.stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* entry ledger — services / industries / areas */
.entry-list { list-style: none; border-top: 1px solid var(--hair-mid); }
.entry-list > li { border-bottom: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.5fr); gap: clamp(14px,3vw,56px); padding: clamp(20px,2.6vw,34px) 2px; align-items: baseline; scroll-margin-top: 96px; }
.entry-term { font-family: var(--din); font-weight: 600; font-size: clamp(19px,2.1vw,30px); line-height: 1.04; text-transform: uppercase; letter-spacing: 0.01em; color: var(--fg); }
a.entry-term { display: inline-block; position: relative; padding-right: 1em; text-decoration: none; }
a.entry-term::after { content: ""; display: block; height: 1px; width: 0; margin-top: 4px; background: var(--fg); transition: width .3s cubic-bezier(0.4,0,0.2,1); }
a.entry-term:hover::after { width: 100%; }
/* diagonal go-arrow — same path as the nav/hero sweep links */
a.entry-term::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.14em;
  width: 0.5em;
  height: 0.5em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f3f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M7 7h10v10'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.35;
  transition: transform 0.25s ease 0.1s, opacity 0.25s ease 0.1s;
}
a.entry-term:hover::before { transform: translate(3px, -3px); opacity: 1; }

/* numbered-disc columns — the portal's solid-disc section language, shared
   by interior pages (contact / services / process rows) */
.disc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(36px, 4.5vw, 64px);
}
.disc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.disc-num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--fg);
  color: #0c0907;
  font-family: var(--din);
  font-weight: 700;
  font-size: 14px;
}
.disc h3 {
  margin-top: clamp(14px, 1.6vw, 20px);
  font-family: var(--din);
  font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.disc p {
  margin-top: 10px;
  max-width: 34ch;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  color: var(--muted);
}
@media (max-width: 860px) {
  .disc-grid, .disc-grid--4 { grid-template-columns: 1fr; }
}

/* go-link — underline-sweep text link with the diagonal arrow (shared) */
.go-link {
  --hot: #ffffff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 600;
  color: rgba(244, 243, 241, 0.75);
  text-decoration: none;
}
.go-link p { position: relative; margin: 0; white-space: nowrap; }
.go-link p::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  width: 0%;
  overflow: hidden;
  color: var(--hot);
  white-space: nowrap;
  transition: width 0.3s ease-out;
}
.go-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--hot);
  transition: 0.3s ease-out;
}
.go-link:hover p::before { width: 100%; }
.go-link:hover::after { width: 100%; }
.go-link svg {
  width: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease 0.2s, color 0.2s ease 0.2s;
}
.go-link:hover svg { transform: translate(3px, -3px); color: var(--hot); }
.entry-kicker { display: block; font-family: var(--body); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.entry-desc { font-family: var(--body); font-size: clamp(14px,1.05vw,16px); line-height: 1.62; color: var(--muted); max-width: 60ch; }
.entry-desc a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hair-mid); transition: border-color .25s; }
.entry-desc a:hover { border-color: var(--fg); }
@media (max-width: 700px) { .entry-list > li { grid-template-columns: 1fr; gap: 10px; } }

/* guide list — seo-guides / blog */
.guide-list { list-style: none; border-top: 1px solid var(--hair-mid); }
.guide-list > li { border-bottom: 1px solid var(--hair); }
.guide-list a { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(14px,3vw,40px); align-items: baseline; padding: clamp(16px,2vw,26px) 2px; text-decoration: none; color: var(--fg); transition: padding-left .3s ease; }
.guide-list a:hover { padding-left: 12px; }
.guide-title { font-family: var(--din); font-weight: 600; font-size: clamp(16px,1.7vw,24px); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.01em; }
.guide-meta { font-family: var(--body); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; text-align: right; }
@media (max-width: 640px) { .guide-list a { grid-template-columns: 1fr; gap: 6px; } .guide-meta { text-align: left; } }

/* prose — policy / info / per-service body copy */
.prose { max-width: 76ch; margin-left: auto; margin-right: auto; }
.prose h2 { font-family: var(--din); font-weight: 700; font-size: clamp(22px,2.4vw,34px); text-transform: uppercase; letter-spacing: 0.01em; margin: clamp(34px,4vw,52px) 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-family: var(--body); font-size: clamp(15px,1.1vw,17px); line-height: 1.66; color: var(--muted); margin-bottom: 16px; }
.prose ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.prose ul li { position: relative; padding-left: 22px; margin-bottom: 10px; font-family: var(--body); font-size: clamp(14px,1.05vw,16px); line-height: 1.6; color: var(--muted); }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 1px; background: var(--faint); }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--hair-mid); }
.prose a:hover { border-color: var(--fg); }

/* article byline — guides */
.article-byline { margin-top: clamp(14px,1.8vw,20px); font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* center the trailing CTA button on the same axis as the centered hero + prose */
.band .wrap > p:has(> .btn-pill) { text-align: center; }

/* ── related articles — "keep reading" 3-up grid at the foot of guide pages ── */
.rel { border-top: 1px solid var(--hair); }
.rel-h {
  font-family: var(--din);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.rel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  text-align: left;
}
.rel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(18px, 1.8vw, 22px);
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: transparent;
  text-decoration: none;
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}
.rel-card:hover {
  border-color: var(--hair-mid);
  transform: translateY(-2px);
}
.rel-cat {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.rel-title {
  font-family: var(--din);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.16;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.rel-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rel-date {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.rel-arrow {
  font-family: var(--body);
  font-size: 14px;
  color: var(--muted);
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}
.rel-card:hover .rel-arrow {
  color: var(--fg);
  transform: translateX(3px);
}
@media (max-width: 820px) { .rel-grid { grid-template-columns: 1fr; } }

/* ── proof, as prose — restored testimonial + results on service pages.
   Deliberately NOT a chip or a card: a pull-quote + a results sentence
   that reads as part of the page's own verbiage. ── */
.svc-proof {
  max-width: 76ch;
  margin: clamp(44px, 6vw, 76px) auto 0;
  padding-top: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--hair);
}
.prf-rate {
  display: block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: clamp(16px, 2vw, 22px);
}
.svc-quote {
  margin: 0;
  font-family: var(--body);
  font-weight: 500;
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.42;
  color: var(--fg);
  max-width: 40ch;
}
.svc-cite {
  display: block;
  margin-top: clamp(16px, 2vw, 22px);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.svc-cite strong { color: var(--fg); font-weight: 600; }
.svc-results {
  margin-top: clamp(22px, 3vw, 34px);
  font-family: var(--body);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.62;
  color: var(--muted);
  max-width: 64ch;
}
.svc-results strong { color: var(--fg); font-weight: 600; }

/* ── client portal — hero-link scale (same size, weight, sweep, and
   diagonal arrow as the hero's "See How We Work") so it stands apart
   from the wayfinding links ── */
.nav-links .nav-login {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(244, 243, 241, 0.75);
}
.nav-links .nav-login:hover { color: rgba(244, 243, 241, 0.75); }
.nav-links .nav-login::after {
  bottom: -7px;
  height: 2px;
  background: #fff;
}
.nav-links .nav-login .nl-t { position: relative; white-space: nowrap; }
.nav-links .nav-login .nl-t::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  width: 0%;
  overflow: hidden;
  color: #fff;
  white-space: nowrap;
  transition: width 0.3s ease-out;
}
.nav-links .nav-login:hover .nl-t::before { width: 100%; }
.nav-links .nav-login svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease 0.2s, color 0.2s ease 0.2s;
}
.nav-links .nav-login:hover svg { transform: translate(3px, -3px); color: #fff; }

/* ── MOBILE NAV — fixed burger + full-screen overlay (JS-injected).
   The burger lives in the ROOT stacking context: the nav's z-index:6
   would trap it below the overlay. It aligns to the bar via the same
   --nav-h / --g tokens. Keep in sync with the copy in index.html. ── */
.nav-burger {
  position: fixed;
  top: calc((var(--nav-h) - 48px) / 2);
  right: var(--g);
  z-index: 120;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(244, 243, 241, 0.16);
  border-radius: 50%;
  background: rgba(12, 9, 7, 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #f4f3f1;
  transition: transform 0.3s ease;
}
.nav-burger[aria-expanded="true"] span:first-child {
  transform: translateY(4.5px) rotate(45deg);
}
.nav-burger[aria-expanded="true"] span:last-child {
  transform: translateY(-4.5px) rotate(-45deg);
}
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--g) 40px;
  background: rgba(10, 10, 11, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu li + li {
  margin-top: 6px;
}
.mobile-menu a {
  display: inline-block;
  font-family: var(--din);
  font-size: clamp(24px, 5.2vh, 34px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg);
}
.mobile-menu a:active {
  color: var(--muted);
}
.mobile-menu .mm-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid #f4f3f1;
  border-radius: 1440px; /* THE site pill — locked spec */
  background: #f4f3f1;
  color: #0c0907;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.12em;
}
html.mm-lock,
html.mm-lock body {
  overflow: hidden;
}
@media (max-width: 860px) {
  .nav-burger {
    display: flex;
  }
}

/* ── PAGE-HERO CTAs (service + industry pages) — a complementary pair:
   the audit action on THE site pill (filled, inverts on hover, same spec
   as .nav-audit / the footer pill), the contact action in the client
   portal's link language (underline-grow + diagonal arrow). ── */
.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center; /* hero is centered; the pair aligns with the title axis */
  flex-wrap: wrap;
  gap: clamp(22px, 3vw, 36px);
  margin-top: clamp(40px, 5.2vh, 60px);
}
.hc-audit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 30px;
  border: 1px solid #f4f3f1;
  border-radius: 1440px; /* THE site pill — locked spec */
  background: #f4f3f1;
  color: #0c0907;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.hc-audit:hover,
.hc-audit:focus-visible {
  background: transparent;
  color: #f4f3f1;
}
.hc-contact {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--body);
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  color: rgba(244, 243, 241, 0.75);
}
/* the portal link's underline bar — same 2px white rule, same easing */
.hc-contact::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 0;
  height: 2px;
  background: #fff;
  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.hc-contact:hover::after,
.hc-contact:focus-visible::after {
  width: 100%;
}
.hc-contact .nl-t {
  position: relative;
  white-space: nowrap;
}
.hc-contact .nl-t::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  width: 0%;
  overflow: hidden;
  color: #fff;
  white-space: nowrap;
  transition: width 0.3s ease-out;
}
.hc-contact:hover .nl-t::before {
  width: 100%;
}
.hc-contact svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    transform 0.2s ease 0.2s,
    color 0.2s ease 0.2s;
}
.hc-contact:hover svg {
  transform: translate(3px, -3px);
  color: #fff;
}