/* ==========================================================================
   Ops Acceleration — site stylesheet
   Light theme: one continuous soft white → light-blue background fixed on
   scroll, white cards with soft shadows, a single dark navy feature band for
   the closing CTA.

   Color follows the DW `color_tokens` house-style pattern: the canonical
   nine --color-brand-* tokens are the SOURCE OF TRUTH. Everything else in
   this file reads from them, so re-branding the site means editing the
   block below and nothing more.
   ========================================================================== */

:root {
  /* --- DW canonical brand tokens (the whole vocabulary) ----------------- */

  /* Foundations */
  --color-brand-bg: #f7fafd;        /* page background */
  --color-brand-surface: #ffffff;   /* cards, panels */
  --color-brand-text: #16294d;      /* primary text / headings */
  --color-brand-muted: #52607a;     /* body copy, captions, meta */
  --color-brand-border: #e3e9f2;    /* hairlines, card borders */

  /* Brand */
  --color-brand-primary: #1f6fd6;   /* CTAs, active states, progress fill */
  --color-brand-on-brand: #ffffff;  /* foreground on brand-primary */

  /* Links */
  --color-brand-link: #1f6fd6;
  --color-brand-link-hover: #1857aa;

  /* --- Design-specific extras -------------------------------------------
     Two beyond the canonical nine, both load-bearing for this design:
     a secondary accent, and the dark band the closing CTA sits on. */
  --color-brand-accent: #16c79a;    /* the green half of the gradient pair */
  --color-brand-deep: #101d38;      /* dark feature band / footer */

  /* --- Derived shades ---------------------------------------------------
     Per the pattern: derive with color-mix() rather than adding
     --color-brand-primary-100 / -200 / … variants. */
  --navy: var(--color-brand-text);
  --navy-deep: var(--color-brand-deep);
  --blue: var(--color-brand-primary);
  --blue-dark: var(--color-brand-link-hover);
  --blue-soft: color-mix(in srgb, var(--color-brand-primary) 11%, #fff);
  --green: var(--color-brand-accent);
  --green-dark: color-mix(in srgb, var(--color-brand-accent) 78%, #000);
  --green-soft: color-mix(in srgb, var(--color-brand-accent) 12%, #fff);

  --slate: var(--color-brand-muted);
  --slate-light: color-mix(in srgb, var(--color-brand-muted) 72%, #fff);
  --line: var(--color-brand-border);

  --white: var(--color-brand-surface);
  --card-shadow: 0 1px 2px rgba(22, 41, 77, 0.04),
                 0 8px 24px rgba(22, 41, 77, 0.06);
  --card-shadow-hover: 0 2px 4px rgba(22, 41, 77, 0.06),
                       0 16px 40px rgba(22, 41, 77, 0.12);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --maxw: 1180px;
  --nav-h: 84px;
  --nav-h-condensed: 64px;

  --font-head: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- reset ------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Keep anchored sections clear of the sticky nav. */
  scroll-padding-top: calc(var(--nav-h-condensed) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-brand-muted);
  background: var(--color-brand-bg);
  overflow-x: hidden;
}

/* The single continuous background for the whole page. Fixed so it does not
   scroll with content — the "one gradient" look the brief asks for. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1100px 700px at 12% -8%, #ffffff 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 92% 8%, #eaf2fd 0%, rgba(234,242,253,0) 55%),
    linear-gradient(168deg, #ffffff 0%, #f4f9ff 38%, #e9f1fb 72%, #dfeaf8 100%);
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy);
  margin: 0 0 0.5em;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.02rem; }

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

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); }

ul { margin: 0; padding: 0; list-style: none; }

button { font-family: inherit; font-size: inherit; cursor: pointer; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* --- layout ------------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- how a section comes to rest ----------------------------------------
   Section heights are content-driven and vary a lot (571px to 1537px) against
   a ~790px viewport, so stopping a scroll used to leave you looking at the
   tail of one section and the head of the next, with neither framed and the
   sticky nav covering whatever you had just arrived at.

   `proximity` snapping fixes the resting position without taking control of
   the scroll: stop NEAR the top of a section and it settles there; stop in
   the middle of a long one and nothing moves. `mandatory` would have fought
   every section taller than the viewport, which is most of them.

   The snap position honors the `scroll-padding-top` already declared on
   <html>, so a section head lands below the condensed nav rather than under
   it. Gated on prefers-reduced-motion: a reader who has asked the OS to stop
   moving things should keep an inert scroll. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-snap-type: y proximity; }
  section { scroll-snap-align: start; }
}

section { padding: 88px 0; position: relative; }
/* For sections whose payload is a long form: the standard 96px band pushes
   the submit button off a 900px laptop screen for no gain. */
.section-tight { padding: 76px 0; }
section:first-of-type { padding-top: 0; }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.lead { font-size: 1.1rem; color: var(--slate); }
.small-note { font-size: 0.88rem; color: var(--slate-light); margin-top: 18px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- cards ------------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: var(--card-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: #d3e0f2;
}

.card h3 { margin-bottom: 10px; }
.card p { color: var(--slate); font-size: 0.97rem; }

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--blue-soft), #f3f8ff);
  color: var(--blue);
  flex: none;
}
.card-icon svg { width: 24px; height: 24px; }
.card-icon.green {
  background: linear-gradient(135deg, var(--green-soft), #f0fdf9);
  color: var(--green-dark);
}

.tick-list li {
  position: relative;
  padding-left: 27px;
  margin-bottom: 9px;
  font-size: 0.94rem;
  color: var(--slate);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 15px;
  height: 8px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
  border-radius: 1px;
}

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 26px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  color: #fff;
  box-shadow: 0 6px 18px rgba(31, 111, 214, 0.28);
}
.btn-primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 111, 214, 0.36);
}

.btn-green {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff;
  box-shadow: 0 6px 18px rgba(22, 199, 154, 0.28);
}
.btn-green:hover { color: #fff; transform: translateY(-2px); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.75);
  border-color: #cfdcee;
  color: var(--navy);
}
.btn-ghost:hover {
  background: #fff;
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px);
}

.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { color: var(--blue); transform: translateY(-2px); }

.btn-outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

.btn-sm { padding: 10px 20px; font-size: 0.87rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* --- scroll progress bar ----------------------------------------------- */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 120;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width 0.08s linear;
}

/* --- navigation -------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: height 0.28s ease, background 0.28s ease,
              border-color 0.28s ease, box-shadow 0.28s ease;
}

.nav.condensed {
  height: var(--nav-h-condensed);
  background: rgba(255, 255, 255, 0.93);
  border-bottom-color: var(--line);
  box-shadow: 0 4px 20px rgba(22, 41, 77, 0.06);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Logo + wordmark */
.brand { display: flex; align-items: center; gap: 13px; flex: none; }
.brand:hover { color: inherit; }

/* The mark is a wide lockup (940x361), not a square — size by height and let
   the width follow, or it distorts. */
.brand-mark {
  width: auto;
  height: 41px;
  flex: none;
  transition: height 0.28s ease;
}
.nav.condensed .brand-mark { height: 34px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.03rem;
  color: var(--navy);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-divider {
  display: inline-block;
  width: 1.5px;
  height: 13px;
  background: var(--blue);
  opacity: 0.55;
  border-radius: 2px;
}
.brand-tagline {
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  color: var(--slate-light);
  font-weight: 500;
  margin-top: 2px;
  transition: opacity 0.24s ease, max-height 0.24s ease;
}
.nav.condensed .brand-tagline { opacity: 0; max-height: 0; overflow: hidden; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* The Careers tab took the bar to six items plus the CTA. Without these the
   flex children shrink and labels break mid-phrase ("Ways we can / help")
   instead of the bar tightening up. Never let a nav label wrap. */
.nav-links > * { flex: none; }
.nav-links a,
.nav-more-btn { white-space: nowrap; }

/* Between the desktop cutoff and a roomy screen there is not quite space for
   six labels at full padding — trim the padding rather than the words. */
@media (max-width: 1560px) {
  .nav-links { gap: 2px; }
  .nav-links a,
  .nav-more-btn { padding: 9px 9px; font-size: 0.87rem; }
}

.nav-links a {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate);
  padding: 9px 13px;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease;
  position: relative;
}
.nav-links a:hover { color: var(--navy); background: rgba(31, 111, 214, 0.07); }

.nav-links a.active { color: var(--blue); font-weight: 600; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 13px;
  right: 13px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
}

/* The CTA is a .btn inside .nav-links, and `.nav-links a` (0,1,1) outranks
   `.btn-primary` / `.btn-sm` (0,1,0) — without this it renders slate-on-blue
   with the wrong padding, and the hover rule replaces the gradient with a
   flat wash. Restate the button's own values at matching specificity. */
.nav-links a.nav-cta {
  margin-left: 10px;
  color: var(--color-brand-on-brand);
  padding: 10px 20px;
}
.nav-links a.nav-cta:hover {
  color: var(--color-brand-on-brand);
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
}

/* "More" dropdown */
.nav-more { position: relative; }
.nav-more-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--slate);
  padding: 9px 13px;
  border-radius: 8px;
}
.nav-more-btn:hover { color: var(--navy); background: rgba(31, 111, 214, 0.07); }
.nav-more-btn svg { width: 11px; height: 11px; transition: transform 0.22s ease; }
.nav-more.open .nav-more-btn svg { transform: rotate(180deg); }

.nav-more-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(22, 41, 77, 0.14);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-more.open .nav-more-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-more-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 0.9rem;
  border-radius: 8px;
  color: var(--slate);
}
.nav-more-menu a:hover { background: var(--blue-soft); color: var(--blue); }

/* Mobile hamburger */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  padding: 0;
  place-items: center;
}
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  position: relative;
  transition: background 0.2s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.24s ease, top 0.24s ease;
}
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle.open span { background: transparent; }
.nav-toggle.open span::before { top: 0; transform: rotate(45deg); }
.nav-toggle.open span::after { top: 0; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: var(--nav-h-condensed) 0 0 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  z-index: 99;
  padding: 28px 24px 48px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a {
  display: block;
  padding: 15px 4px;
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:hover { color: var(--blue); }

/* Group labels in the mobile menu — the nav is grouped on desktop, so the
   drawer needs the same shape rather than one long flat list. */
.mobile-group {
  display: block;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin: 22px 0 8px;
}
.mobile-group:first-child { margin-top: 0; }
.mobile-menu a { font-size: 1.02rem; }
.mobile-menu .btn { margin-top: 26px; }

/* --- hero -------------------------------------------------------------- */
/* Signature hero, move: "let the hero work". A committed canvas (88vh, capped)
   with three ambient layers at different rates behind the copy and the working
   probe. Every animation below is covered by the global
   prefers-reduced-motion guard at the foot of this file. */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(88vh, 940px);
  padding: 76px 0 86px;
}

.hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-layer { position: absolute; inset: 0; display: block; }

/* Layer 1 — a slow structural grid, masked to the probe side so the copy
   column stays clean. */
.hero-grid {
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--navy) 8%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--navy) 8%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 74% 66% at 72% 42%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 74% 66% at 72% 42%, #000 10%, transparent 70%);
  animation: hero-drift 38s linear infinite;
}
@keyframes hero-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

/* Layer 2 — brand-token wash, breathing slowly. */
.hero-glow {
  background:
    radial-gradient(38% 46% at 74% 26%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%),
    radial-gradient(34% 42% at 90% 76%, color-mix(in srgb, var(--green) 14%, transparent), transparent 72%);
  animation: hero-breathe 14s ease-in-out infinite;
}
@keyframes hero-breathe {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* Layer 3 — the swoosh from the logo, carrying work along it as flowing
   dashes. This is the motif the brand actually owns: throughput, moving. */
.hero-swoosh { width: 100%; height: 100%; }
.hero-swoosh path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 7 27;
}
.hero-swoosh .s1 {
  stroke: color-mix(in srgb, var(--blue) 42%, transparent);
  stroke-width: 2.4;
  animation: hero-flow 11s linear infinite;
}
.hero-swoosh .s2 {
  stroke: color-mix(in srgb, var(--green) 34%, transparent);
  stroke-width: 2;
  animation: hero-flow 17s linear infinite;
}
.hero-swoosh .s3 {
  stroke: color-mix(in srgb, var(--blue) 22%, transparent);
  stroke-width: 1.6;
  animation: hero-flow 25s linear infinite;
}
@keyframes hero-flow { to { stroke-dashoffset: -680; } }

/* Freight on the routes.

   Deliberately quiet: this is ambient, behind the headline, and the moment a
   truck competes with the H1 for attention the hero has stopped working. The
   nodes sit fainter than the freight because a building you pass is context,
   and the thing moving is the point.

   `vector-effect: non-scaling-stroke` matters here — the icons are scaled up
   ~1.5x to be legible in a 1200-wide viewBox, and without it the stroke
   scales too and they turn into fat blobs that no longer match the 1.9-weight
   icon language used everywhere else on the site. */
.hero-swoosh .freight,
.hero-swoosh .freight-node {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* vector-effect is NOT an inherited property. Setting it on the wrapper <g>
   (which is what the group carrying the motion is) silently does nothing, and
   the stroke then scales with the icon — at scale 3 that is a 6px slab that
   no longer matches the 1.9-weight line icons used everywhere else. It has to
   land on the drawn elements themselves. */
.hero-swoosh .freight *,
.hero-swoosh .freight-node * {
  vector-effect: non-scaling-stroke;
  stroke-width: 2.2;
  /* The routes are drawn as flowing dashes by `.hero-swoosh path` above, and
     that selector catches every path in this SVG — including the ones making
     up a ship. Inheriting it shatters each icon into 7-unit fragments, which
     is exactly what it looked like: scattered ticks that read as noise on the
     line rather than as a vehicle. Solid strokes here. */
  stroke-dasharray: none;
}
.hero-swoosh .freight { stroke: color-mix(in srgb, var(--navy) 52%, transparent); }
.hero-swoosh .freight-node { stroke: color-mix(in srgb, var(--navy) 30%, transparent); }
/* The two on the blue route pick up the blue; the parcel rides the green one. */
.hero-swoosh .f-truck { stroke: color-mix(in srgb, var(--blue) 62%, transparent); }
.hero-swoosh .f-parcel { stroke: color-mix(in srgb, var(--green) 64%, transparent); }

/* A ship and a plane are drawn nose-right, and rotate="auto" turns them along
   the route — which is what you want for something with a nose. The parcel is
   a cube: rotating it just reads as a box rolling downhill, so its
   <animateMotion> deliberately omits rotate and it travels upright. That is
   enforced in the markup, not here — CSS cannot override a SMIL motion
   rotation, which is a trap worth leaving a note about. */

/* Below the tablet breakpoint the hero is mostly headline and the freight is
   scaled down past the point of being readable, so it becomes noise. */
@media (max-width: 720px) {
  .hero-swoosh .freight,
  .hero-swoosh .freight-node { display: none; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: 56px;
  align-items: center;
}

.hero h1 { margin-bottom: 20px; }
.hero-accent {
  display: block;
  background: linear-gradient(105deg, var(--blue) 10%, var(--green) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead { font-size: 1.14rem; max-width: 560px; margin-bottom: 30px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-bottom: 30px;
}

/* Proof rail, not a tile grid — the probe's figure is the hero's one dominant
   element, so these read as a quiet supporting line. */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  margin-bottom: 22px;
}
.hero-stats > div { display: flex; align-items: baseline; gap: 7px; }

/* Base size — also used by the Results stat cards, so it stays large. */
.hero-stat-value {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 7px;
}
.hero-stat-label {
  font-size: 0.83rem;
  color: var(--slate-light);
  line-height: 1.4;
}

/* ...but inside the hero's proof rail they are deliberately quiet, so the
   probe's figure stays the one dominant element. */
.hero-stats .hero-stat-value { font-size: 1.2rem; margin-bottom: 0; }
.hero-stats .hero-stat-label { font-size: 0.81rem; line-height: 1.3; }

/* --- the working probe -------------------------------------------------- */

.hero-probe {
  background: color-mix(in srgb, var(--white) 86%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 30px 24px;
  box-shadow: var(--card-shadow-hover);
}

.probe-title {
  display: block;
  font-family: var(--font-head);
  font-size: 0.79rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate-light);
  margin-bottom: 18px;
}

.probe-fields {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 14px;
  margin-bottom: 22px;
}
.probe-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--slate);
  margin-bottom: 6px;
}
.probe-input { position: relative; display: flex; align-items: center; }
.probe-prefix {
  position: absolute;
  left: 13px;
  font-size: 0.95rem;
  color: var(--slate-light);
  pointer-events: none;
}
.probe-input input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.probe-input:has(.probe-prefix) input { padding-left: 27px; }
.probe-input input:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.probe-result {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.probe-total {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(105deg, var(--blue) 8%, var(--green) 94%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.probe-total-label {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 16px;
}
.probe-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--slate-light);
  margin: 0;
}

/* --- scroll cue (the handoff) ------------------------------------------- */

.hero-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 1;
  width: 26px;
  height: 42px;
  margin-left: -13px;
  border: 1.5px solid color-mix(in srgb, var(--navy) 26%, transparent);
  border-radius: 14px;
  transition: border-color 0.2s ease;
}
.hero-cue:hover { border-color: var(--blue); }
.hero-cue span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--blue);
  animation: hero-cue-bob 2.3s ease-in-out infinite;
}
@keyframes hero-cue-bob {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%      { transform: translateY(13px); opacity: 0.3; }
}

.pillar-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 0.83rem;
  color: var(--slate-light);
}
.pillar-strip .label {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--slate);
}
.pillar-strip .pill {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 14px;
  font-weight: 500;
  color: var(--navy);
  font-size: 0.82rem;
}

/* --- value ladder ------------------------------------------------------ */

.tier-card { display: flex; flex-direction: column; height: 100%; }

.signal-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 26px;
  margin-bottom: 18px;
}
.signal-bars span {
  width: 8px;
  border-radius: 3px;
  background: #dde6f3;
  transition: background 0.3s ease;
}
/* Three rungs now, not four — Self-Serve came out and the capital routes sit
   in their own band below, so the scale has to reach 100% at the third bar
   or the ladder never looks full. */
.signal-bars span:nth-child(1) { height: 40%; }
.signal-bars span:nth-child(2) { height: 70%; }
.signal-bars span:nth-child(3) { height: 100%; }
.signal-bars span.lit {
  background: linear-gradient(180deg, var(--blue), var(--green));
}

.tier-price {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--blue);
  margin-bottom: 12px;
}
.tier-card p { flex: 1; margin-bottom: 20px; }

.tier-link {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tier-link::after {
  content: "→";
  transition: transform 0.2s ease;
}
.tier-link:hover::after { transform: translateX(4px); }

/* --- pillars ----------------------------------------------------------- */

.pillar-card { text-align: left; }
.pillar-num {
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--blue);
  opacity: 0.6;
  margin-bottom: 8px;
}

.pillar-quote {
  margin-top: 40px;
  padding: 34px 38px;
  background: linear-gradient(120deg, var(--blue-soft), #f5faff);
  border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.pillar-quote p {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
}

/* --- ROI calculator ---------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
}

.calc-panel { padding: 34px; }

.field { margin-bottom: 22px; }
.field:last-child { margin-bottom: 0; }

.field label,
.field-label {
  display: block;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 9px;
}
.field-hint {
  font-size: 0.79rem;
  color: var(--slate-light);
  font-weight: 400;
  margin-top: -4px;
  margin-bottom: 9px;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
select,
textarea {
  width: 100%;
  padding: 12px 15px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--navy);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 214, 0.13);
}
textarea { resize: vertical; min-height: 96px; }

/* Pillar toggle chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; }
.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chip span {
  display: inline-block;
  padding: 9px 17px;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  font-size: 0.89rem;
  font-weight: 500;
  color: var(--slate);
  background: #fff;
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}
.chip span:hover { border-color: #bcd2ee; color: var(--navy); }
.chip input:checked + span {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(31, 111, 214, 0.25);
}
.chip input:focus-visible + span {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Severity slider */
.slider-row { display: flex; align-items: center; gap: 14px; }
input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  outline: none;
  padding: 0;
  border: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(22, 41, 77, 0.2);
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--blue);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(22, 41, 77, 0.2);
}
.slider-value {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--blue);
  min-width: 78px;
  text-align: right;
}

/* Result panel */
.calc-result {
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: #fff;
  border-radius: var(--radius);
  padding: 34px;
  position: sticky;
  top: calc(var(--nav-h-condensed) + 20px);
  box-shadow: 0 16px 44px rgba(22, 41, 77, 0.24);
}
.calc-result h2,
.calc-result h3 { color: #fff; font-size: 1.02rem; margin-bottom: 4px; }
.calc-result .sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 22px;
}

.calc-total {
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 5.5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(100deg, #fff 20%, var(--green) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 6px;
}
.calc-total-label {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 26px;
}

.calc-breakdown {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 20px;
}
.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  font-size: 0.9rem;
}
.calc-row .name { color: rgba(255, 255, 255, 0.86); }
.calc-row .note {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
}
.calc-row .amount {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}
.calc-empty {
  font-size: 0.89rem;
  color: rgba(255, 255, 255, 0.5);
  padding: 8px 0 4px;
}
.calc-capped {
  margin-top: 16px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.72);
}
.calc-disclaimer {
  margin-top: 20px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.55;
}
.calc-result .btn { margin-top: 22px; }

/* --- process ----------------------------------------------------------- */

.process { position: relative; }
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
/* The connecting line behind the step numbers. */
.process-grid::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  opacity: 0.25;
  z-index: 0;
}
.step { position: relative; z-index: 1; text-align: center; }
.step-num {
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
  box-shadow: 0 6px 18px rgba(31, 111, 214, 0.3);
  border: 4px solid #fff;
}
.step:nth-child(4) .step-num {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  box-shadow: 0 6px 18px rgba(22, 199, 154, 0.3);
}
.step-sub {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 6px;
}
.step p { font-size: 0.93rem; }

/* --- why us / who we are ----------------------------------------------- */

.why-band {
  background: linear-gradient(125deg, var(--blue-soft), #f2f9ff 55%, var(--green-soft));
  border: 1px solid #dde9f8;
  border-radius: var(--radius-lg);
  padding: 52px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}

/* Where the right-hand column is a form rather than a panel, give it the
   wider half — a three-across field row needs the room. */
.about-grid.form-lead { grid-template-columns: 0.82fr 1.18fr; gap: 40px; }

/* --- pedigree / format panels ------------------------------------------
   Both replaced empty photo placeholders. When real photography arrives,
   adopt it with dw_adopt_image and it can sit alongside (or instead of)
   these — see dw-site/README.md. */

.pedigree-panel h3,
.format-panel h3 { margin-bottom: 16px; }

.pedigree-list,
.format-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: fmt;
}

.pedigree-list li {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  padding: 12px 0 12px 26px;
  border-top: 1px solid var(--line);
  position: relative;
}
.pedigree-list li:first-child { border-top: 0; padding-top: 2px; }
.pedigree-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--green));
}
.pedigree-list li:first-child::before { top: 12px; }

.format-list li {
  counter-increment: fmt;
  position: relative;
  padding: 0 0 16px 38px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--slate);
}
.format-list li:last-child { padding-bottom: 0; }
.format-list li::before {
  content: counter(fmt);
  position: absolute;
  left: 0;
  top: -1px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
}


/* --- storefront -------------------------------------------------------- */

.filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 34px;
}
.filter-tab {
  padding: 10px 20px;
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 100px;
  font-family: var(--font-head);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--slate);
  transition: all 0.18s ease;
}
.filter-tab:hover { border-color: #bcd2ee; color: var(--navy); }
.filter-tab.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

.product-card { display: flex; flex-direction: column; height: 100%; }
.product-card .badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--font-head);
}
.badge-word   { background: #e8f0fc; color: #1a5fb8; }
.badge-excel  { background: #e2f8f2; color: #0d8a6a; }
.badge-pdf    { background: #fdecec; color: #c0392b; }
.badge-powerpoint { background: #fdf0e6; color: #c76a1b; }
.badge-featured { background: var(--navy); color: #fff; }

.product-card h3 { font-size: 1.06rem; }
.product-card p { flex: 1; margin-bottom: 18px; font-size: 0.92rem; }

.product-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.price {
  font-family: var(--font-head);
  font-size: 1.42rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.price small {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--slate-light);
}

.offer-card { position: relative; display: flex; flex-direction: column; }
.offer-card.popular {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 214, 0.12), var(--card-shadow-hover);
}
.ribbon {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: #fff;
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(31, 111, 214, 0.3);
}
.offer-price {
  font-family: var(--font-head);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin: 14px 0 6px;
}
.offer-price small {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--slate-light);
}
.offer-card ul { margin: 20px 0 24px; flex: 1; }

.empty-note {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--slate-light);
  font-size: 0.94rem;
}

/* --- events ------------------------------------------------------------ */

.event-card { display: flex; gap: 20px; align-items: flex-start; }
.event-date {
  flex: none;
  width: 66px;
  text-align: center;
  background: linear-gradient(160deg, var(--blue-soft), #f4f9ff);
  border: 1px solid #dbe7f7;
  border-radius: 12px;
  padding: 10px 4px;
}
.event-date .month {
  font-family: var(--font-head);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
}
.event-date .day {
  font-family: var(--font-head);
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.event-body { flex: 1; min-width: 0; }
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 9px;
  font-size: 0.8rem;
  color: var(--slate-light);
}
.tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  font-family: var(--font-head);
}
.tag-in_person { background: var(--green-soft); color: var(--green-dark); }
.tag-virtual { background: var(--blue-soft); color: var(--blue-dark); }
.event-card h3 { font-size: 1.04rem; margin-bottom: 7px; }
.event-card p { font-size: 0.9rem; margin-bottom: 14px; }

/* --- articles ---------------------------------------------------------- */

.article-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.article-banner {
  height: 88px;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 14px 18px;
}
.article-banner.topic-operations { background: linear-gradient(120deg, #1f6fd6, #4a94ec); }
.article-banner.topic-scaling    { background: linear-gradient(120deg, #16c79a, #4bd9b6); }
.article-banner.topic-systems    { background: linear-gradient(120deg, #6b4fd8, #9179ea); }
.article-banner.topic-leadership { background: linear-gradient(120deg, #d67a1f, #eaa054); }
.article-banner .topic-name {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
}
.article-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.article-card h3 { font-size: 1.05rem; }
.article-card p { font-size: 0.91rem; flex: 1; margin-bottom: 16px; }
.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--slate-light);
}
.article-meta .ext { color: var(--blue); font-weight: 600; }

/* --- forms ------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }

.toggle-group {
  display: inline-flex;
  background: #f2f6fc;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 4px;
  gap: 2px;
}
.toggle-group label { margin: 0; }
.toggle-group input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-group span {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: var(--font-head);
  color: var(--slate);
  cursor: pointer;
  transition: all 0.18s ease;
  user-select: none;
}
.toggle-group input:checked + span {
  background: #fff;
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(22, 41, 77, 0.1);
}
.toggle-group input:focus-visible + span { outline: 2px solid var(--blue); }

/* --- compact inquiry forms ----------------------------------------------
   The hire and operator-bench forms each ask a dozen questions. At full field
   size that runs well past a laptop viewport, so answering the back half
   scrolls the front half off screen — you lose sight of what you already
   said. These rules tighten spacing and type on the same controls while
   keeping every target comfortably clickable. */

.form-compact .field { margin-bottom: 15px; }
.form-compact .field label,
.form-compact .field-label { margin-bottom: 6px; font-size: 0.82rem; }
.form-compact .form-grid { gap: 12px; }
.form-compact .form-grid .field { margin-bottom: 0; }
.form-compact .form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-compact input[type="text"],
.form-compact input[type="email"],
.form-compact input[type="tel"],
.form-compact input[type="url"],
.form-compact select,
.form-compact textarea { padding: 9px 12px; font-size: 0.9rem; }
.form-compact textarea { min-height: 58px; }
.form-compact .toggle-group { padding: 3px; }
.form-compact .toggle-group span { padding: 6px 16px; font-size: 0.84rem; }
.form-compact .form-status { margin-top: 12px; padding: 10px 14px; }

/* Dense multi-select. Ten wrapping pills was what pushed the hire form off
   the screen; two columns of real checkboxes says the same thing in a third
   of the height and reads faster down a column. */
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 16px;
}
.field .check-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 2px 0;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--slate);
  cursor: pointer;
  transition: color 0.15s ease;
}
.field .check-grid label:hover { color: var(--navy); }
.check-grid input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* Resume attachment. The native file input is unstyleable and looks broken
   next to the rest of the form, so it is clipped rather than hidden — that
   keeps it focusable and keyboard-operable — and the label is the control. */
.file-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcfe;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.file-drop:hover { border-color: #bcd2ee; background: var(--blue-soft); }
.file-drop:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(31, 111, 214, 0.13);
}
.file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-drop svg { flex: none; width: 18px; height: 18px; color: var(--blue); }
.file-drop-text {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--slate);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-drop.has-file {
  border-style: solid;
  border-color: var(--blue);
  background: var(--blue-soft);
}
.file-drop.has-file .file-drop-text { color: var(--navy); font-weight: 600; }

/* The "or just email it" escape hatch under the resume form. */
.form-aside {
  margin-top: 12px;
  font-size: 0.82rem;
  color: var(--slate-light);
  text-align: center;
}
.form-aside a { font-weight: 600; }

.form-status {
  margin-top: 16px;
  padding: 13px 17px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  display: none;
}
.form-status.show { display: block; }
.form-status.success {
  background: var(--green-soft);
  color: #0b6e55;
  border: 1px solid #b8ecdc;
}
.form-status.error {
  background: #fdecec;
  color: #9e2b20;
  border: 1px solid #f6cfcb;
}

/* --- dual path (investment) -------------------------------------------- */

.path-card {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border-top: 4px solid var(--blue);
}
.path-card.investor { border-top-color: var(--green); }
.path-card p { flex: 1; }

/* --- FAQ ---------------------------------------------------------------
   Plain stacked Q&A rather than accordions: the answers are the point, and
   collapsed text is worth less to a reader skimming for the price. */

.faq-list {
  max-width: 860px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.faq-item { padding: 28px 32px; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.faq-item h3::before {
  content: "Q";
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 5px;
  padding: 3px 7px;
  transform: translateY(-0.15em);
}
.faq-item p {
  color: var(--slate);
  font-size: 0.97rem;
  margin: 0;
  padding-left: 34px;
}

@media (max-width: 620px) {
  .faq-item { padding: 22px 24px; }
  .faq-item p { padding-left: 0; }
}

/* --- dark feature band (closing CTA) ----------------------------------- */

.cta-band {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-deep) 55%, #0b1628 100%);
  position: relative;
  overflow: hidden;
  padding: 92px 0;
  margin-top: 40px;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 111, 214, 0.38), transparent 68%);
}
.cta-band::after {
  content: "";
  position: absolute;
  bottom: -220px;
  left: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(22, 199, 154, 0.24), transparent 68%);
}
.cta-band .wrap { position: relative; z-index: 1; text-align: center; }
.cta-band h2 { color: #fff; max-width: 760px; margin: 0 auto 18px; }
.cta-band p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 620px;
  margin: 0 auto 32px;
  font-size: 1.06rem;
}
.cta-band .eyebrow {
  background: rgba(255, 255, 255, 0.12);
  color: #8fc0ff;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
}

/* --- footer ------------------------------------------------------------ */

.footer {
  background: #0b1628;
  color: rgba(255, 255, 255, 0.62);
  padding: 62px 0 34px;
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer .brand-name { color: #fff; }
/* The tagline is a full sentence pair, so it wraps here — give it room and a
   readable leading rather than the lockup's tight 1.1. */
.footer .brand-tagline {
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  max-width: 24ch;
  margin-top: 5px;
}
/* Column headings are h3, not h4: the last content heading above the footer is
   an h2, and jumping straight to h4 is a hierarchy skip Vision grades down. */
.footer h3 {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer li { margin-bottom: 9px; }
.footer a { color: rgba(255, 255, 255, 0.62); }
.footer a:hover { color: #fff; }
.footer-bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.4);
}

/* --- scroll reveal ----------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* Stagger children inside a revealed grid. */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.11s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.18s; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.25s; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.39s; }

/* --- simple content pages (article, purchase success) ------------------ */

.page-narrow { max-width: 760px; margin: 0 auto; padding: 56px 0 80px; }
.prose p { margin-bottom: 1.15rem; font-size: 1.04rem; }
.prose p { color: var(--slate); }
.prose .lead { color: var(--navy); }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin: 2.4rem 0 0.9rem; }
.prose h3 { font-size: 1.16rem; margin: 1.9rem 0 0.7rem; }
.prose > :first-child { margin-top: 0; }
.prose .tick-list { margin: 0 0 1.3rem; }
.prose .tick-list li { color: var(--slate); }
.prose .btn { margin-top: 0.3rem; }
.prose-gap { margin-top: 2.2rem; }

/* Breadcrumb trail on subpages — mirrors the BreadcrumbList JSON-LD. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 22px;
  font-size: 0.86rem;
  color: var(--slate-light);
  font-family: var(--font-head);
}
.crumbs span[aria-hidden] { color: var(--line); }
.crumbs a { font-weight: 600; }

.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 30px;
  font-size: 0.86rem;
  color: var(--slate-light);
  font-family: var(--font-head);
}

.topic-grid { margin: 26px 0 8px; }
.blog-newsletter { max-width: none; margin: 34px 0 0; }
.blog-newsletter h2 { font-size: 1.3rem; margin-bottom: 8px; }

.guide-next { margin-top: 44px; }
.guide-next h2 { font-size: 1.2rem; margin-bottom: 14px; }
.guide-next li { margin-bottom: 9px; color: var(--slate); font-size: 0.96rem; }
.guide-next li:last-child { margin-bottom: 0; }
.guide-next a { font-weight: 600; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-head);
  margin-bottom: 26px;
}

/* The purchase-success page has no nav or footer, so the lockup is the only
   thing telling a paying customer whose receipt they are looking at. */
.notice-brand { display: block; width: 176px; margin: 0 auto 30px; }
.notice-brand img { width: 100%; height: auto; display: block; }

.notice-card { padding: 40px; text-align: center; }
.notice-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green-dark);
}
.notice-icon.warn { background: #fdf0e6; color: #c76a1b; }
.notice-icon svg { width: 30px; height: 30px; }
.download-meta {
  margin-top: 22px;
  font-size: 0.84rem;
  color: var(--slate-light);
}

/* --- static-build utility classes ---------------------------------------
   The Django templates used inline style="" attributes for these. In the
   static build they're real classes, so the markup stays clean enough for
   `dw_cms` to adopt the copy. */

.card-tagline { color: var(--color-brand-primary); font-weight: 600; }

.tick-list + .btn,
.card > form { margin-top: 16px; }

.pillar-quote-sub {
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 400;
  color: var(--color-brand-muted);
  margin-top: 12px;
}

.about-gap { margin-bottom: 56px; }
.why-band { margin-bottom: 64px; }
.stat-card { text-align: center; }
.inner-grid { gap: 18px; }
/* One card left in the row after the investor/LP card came out — keep it at a
   readable measure instead of stretching it across the full band. */
.inner-grid-single { max-width: 620px; }
.footer-brand { margin-bottom: 16px; }
.footer-blurb { max-width: 340px; }
.newsletter-card, .blog-pending { max-width: 640px; }
.newsletter-card { margin-top: 28px; }
.coaching-cta { margin-top: 24px; align-self: flex-start; }
.coaching-form { margin-top: 18px; }
.blog-cta { margin-top: 18px; align-self: flex-start; }

.offer-price + .tick-list { margin-top: 18px; }
.pillar-card .card-tagline { color: var(--color-brand-text); font-weight: 500; }

/* Honeypot — must be invisible to humans but present in the DOM for bots. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Turnstile placeholder stays collapsed until DW injects the widget. */
[data-dw-turnstile]:empty { display: none; }
[data-dw-turnstile] { margin: 14px 0 4px; }

.notice-title { font-size: 1.9rem; }
.notice-back { text-align: center; margin-top: 30px; }

.blog-todo, .blog-cta-card { margin-bottom: 24px; }
.blog-todo h3 { margin-top: 22px; }
.blog-todo code {
  background: var(--blue-soft);
  color: var(--color-brand-link-hover);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.88em;
}
.tick-list.numbered { counter-reset: step; margin-top: 12px; }
.tick-list.numbered li { counter-increment: step; }
.tick-list.numbered li::before {
  content: counter(step);
  border: none;
  transform: none;
  top: 0.15em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-brand-primary);
  color: var(--color-brand-on-brand);
  font-size: 0.7rem;
  font-weight: 700;
  font-family: var(--font-head);
  display: grid;
  place-items: center;
}
.blog-warning {
  margin-top: 22px;
  padding: 14px 18px;
  background: #fdf0e6;
  border-left: 3px solid #c76a1b;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.92rem;
  color: #7d4310;
}

/* --- the six stages --------------------------------------------------- */
/* Reuses .pillar-card wholesale — the two sections are a deliberate pair, so
   they should read as one system. Only the numbered badge and the attribution
   line are new. */

.stage-badge {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  margin-bottom: 18px;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-soft);
}
.stage-badge.green { color: var(--green-dark); background: var(--green-soft); }

.stages-note {
  max-width: 680px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--slate-light);
}
.stages-note strong { color: var(--slate); font-weight: 600; }

/* --- hero: two doors ----------------------------------------------------
   The hero no longer carries the estimator. Instead it forks: two buyers,
   two registers, both landing on the estimator in the right mode. */

.hero-inner-center {
  position: relative;
  z-index: 1;
  text-align: center;
}
.hero-inner-center .hero-copy { max-width: 940px; margin: 0 auto; }
/* Each sentence is its own line, so size it to hold one — at the shared
   heading scale the second broke as "where you / want to go." */
.hero-inner-center h1 {
  font-size: clamp(1.65rem, 3.1vw, 2.5rem);
  line-height: 1.18;
  margin-bottom: 22px;
}
.hero-inner-center .hero-lead { max-width: 640px; margin: 0 auto 40px; }
.hero-inner-center .eyebrow { margin-left: auto; margin-right: auto; }

/* The belief line that replaced the category eyebrow. Deliberately quieter
   than the headline and set in the brand gradient, so it reads as a signature
   rather than a second claim competing with the promise above it. */
/* Currently UNUSED — the hero line this styled was removed on the owner's
   instruction. Kept because the hero copy has been iterated several times and
   reinstating the line should not mean rebuilding the gradient text. Delete
   this block if the hero settles without it. */
.hero-creed {
  font-family: var(--font-head);
  font-size: clamp(0.92rem, 1.5vw, 1.06rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: -18px auto 38px;
  max-width: 640px;
  background: linear-gradient(100deg, var(--blue) 15%, var(--green) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  text-align: left;
  margin-bottom: 38px;
}

.door {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 26px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--white) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--card-shadow);
  color: inherit;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.22s ease, border-color 0.22s ease;
}
.door:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow-hover);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
}
.door-alt:hover { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); }

.door-eyebrow {
  font-family: var(--font-head);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.door-alt .door-eyebrow { color: var(--green-dark); }

.door h2 {
  font-size: clamp(1.2rem, 2.1vw, 1.5rem);
  line-height: 1.25;
  margin-bottom: 12px;
}
.door p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 18px;
  flex: 1;
}
.door-cta {
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue);
}
.door-alt .door-cta { color: var(--green-dark); }
.door:hover .door-cta { text-decoration: underline; text-underline-offset: 3px; }

.hero-inner-center .hero-stats { justify-content: center; border-top: 1px solid var(--line); }

/* --- teaser cards (home -> method / calculator) -------------------------- */

.teaser-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease;
}
.teaser-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.teaser-card h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 6px 0 12px; }
.teaser-card p { color: var(--slate); margin-bottom: 18px; flex: 1; }
.teaser-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.teaser-cta { font-family: var(--font-head); font-weight: 600; color: var(--blue); }
.teaser-card-alt .teaser-cta { color: var(--green-dark); }
.teaser-card:hover .teaser-cta { text-decoration: underline; text-underline-offset: 3px; }

/* --- standalone page head + closing CTA ---------------------------------- */

.page-head { max-width: 780px; padding: 46px 0 12px; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.15; margin-bottom: 18px; }
.page-head .lead { font-size: 1.12rem; }

.page-cta {
  max-width: 780px;
  margin: 0 auto;
  padding: 20px 0 84px;
  text-align: center;
}
.page-cta h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: 12px; }
.page-cta p { color: var(--slate); margin-bottom: 22px; }
.page-cta .cta-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }

/* --- estimator: mode switch + avoided-headcount line --------------------- */

.calc-modes { text-align: center; margin-bottom: 30px; }
.calc-mode-note {
  font-size: 0.9rem;
  color: var(--slate-light);
  max-width: 560px;
  margin: 14px auto 0;
  line-height: 1.55;
}

.calc-hires {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green-dark);
  background: var(--green-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 18px;
}

/* --- tools hub ----------------------------------------------------------
   A directory, not a link list: built to hold a growing set of app systems,
   some of which will move behind a subscription. Adding one is a copied
   .tool-card block plus a badge. */

.tool-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--card-shadow-hover); }
.tool-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.tool-card p { font-size: 0.93rem; color: var(--slate); margin-bottom: 18px; flex: 1; }
.tool-card:hover h3 { color: var(--blue); }

.tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tool-head .card-icon { margin-bottom: 14px; }

.tool-badge {
  font-family: var(--font-head);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.tool-badge-free { color: var(--green-dark); background: var(--green-soft); }
.tool-badge-paid { color: var(--blue); background: var(--blue-soft); }
.tool-badge-soon { color: var(--slate-light); background: #eef2f8; }

.tool-cta { font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; color: var(--blue); }
.tool-card:hover .tool-cta { text-decoration: underline; text-underline-offset: 3px; }

.tools-next {
  max-width: 760px;
  margin: 54px auto 0;
  padding: 34px 36px 84px;
  text-align: center;
}
.tools-next h2 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); margin-bottom: 14px; }
.tools-next p { color: var(--slate); margin-bottom: 14px; }
.tools-next .cta-actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

/* --- blog: post pages, topic pillars, listing cards ---------------------
   Rendered by scripts/build.js from the MDX DiscoverWorthy commits into
   content/. See dw-site/README.md → "Build the blog". */

/* Cinematic cover: a sharp contained image over a blurred, saturated backdrop. */
.post-cover {
  position: relative;
  height: clamp(220px, 42vw, 460px);
  overflow: hidden;
  background: var(--navy-deep);
}
.post-cover-blur {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(34px) saturate(1.5);
  opacity: 0.55;
}
.post-cover img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  object-fit: cover;
}

.post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 48px;
  padding: 44px 0 80px;
}
.post-grid-single { grid-template-columns: minmax(0, 1fr); }
.post { min-width: 0; max-width: 720px; }
.post h1 {
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  line-height: 1.12;
  margin-bottom: 18px;
}

.topic-chip {
  display: inline-block;
  font-size: 0.69rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
}
a.topic-chip:hover { background: color-mix(in srgb, var(--blue) 20%, transparent); }
.topic-chip.sm { font-size: 0.63rem; padding: 4px 9px; margin-bottom: 10px; }

.post-excerpt {
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--slate);
  margin-bottom: 26px;
}

/* byline */
.byline {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
}
.byline-avatar { height: 30px; width: auto; }
.byline-avatar.lg { height: 42px; }
.byline-meta { display: flex; flex-direction: column; }
.byline-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
}
.byline-sub { font-size: 0.79rem; color: var(--slate-light); }
.byline .share { margin-left: auto; }

.share { display: flex; gap: 7px; align-items: center; }
.share-btn {
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--slate);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.share-btn:hover { border-color: var(--blue); color: var(--blue); }

/* table of contents */
.toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: calc(var(--nav-h-condensed) + 24px);
  max-height: calc(100vh - var(--nav-h-condensed) - 48px);
  overflow-y: auto;
  border-left: 2px solid var(--line);
}
.toc-title {
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-light);
  padding: 0 0 9px 15px;
}
.toc-link {
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--slate);
  padding: 6px 0 6px 15px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.toc-link:hover { color: var(--blue); }
.toc-link.toc-h3 { padding-left: 27px; font-size: 0.78rem; }
.toc-link.active {
  color: var(--blue);
  font-weight: 600;
  border-left-color: var(--blue);
}

.toc-mobile {
  display: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  margin-bottom: 30px;
  padding: 0 16px;
}
.toc-mobile summary {
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 13px 0;
  color: var(--navy);
}
.toc-mobile .toc {
  position: static;
  max-height: none;
  overflow: visible;
  padding-bottom: 12px;
}

/* body typography */
.blog-body { font-size: 1.045rem; line-height: 1.75; color: var(--slate); }
.blog-body > * + * { margin-top: 1.15rem; }
.blog-body h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.25;
  color: var(--navy);
  margin-top: 2.6rem;
  scroll-margin-top: calc(var(--nav-h-condensed) + 20px);
}
.blog-body h3 {
  font-size: clamp(1.12rem, 2vw, 1.32rem);
  color: var(--navy);
  margin-top: 2rem;
  scroll-margin-top: calc(var(--nav-h-condensed) + 20px);
}
.blog-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.blog-body a:hover { color: var(--blue-dark); }
.blog-body ul, .blog-body ol { padding-left: 1.35rem; }
.blog-body li + li { margin-top: 0.45rem; }
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body img { width: 100%; height: auto; border-radius: var(--radius); }
.blog-body blockquote {
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 20px;
  color: var(--navy);
  font-size: 1.08rem;
}
.blog-body code {
  font-size: 0.88em;
  background: var(--blue-soft);
  border-radius: 5px;
  padding: 2px 6px;
}
.blog-body pre {
  background: var(--navy-deep);
  color: #e6edf8;
  border-radius: var(--radius-sm);
  padding: 18px;
  overflow-x: auto;
}
.blog-body pre code { background: none; padding: 0; color: inherit; }

/* Wide tables scroll inside their own box rather than the page. */
.blog-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  display: block;
  overflow-x: auto;
}
.blog-body th, .blog-body td {
  border: 1px solid var(--line);
  padding: 9px 13px;
  text-align: left;
}
.blog-body th {
  background: var(--blue-soft);
  font-family: var(--font-head);
  color: var(--navy);
  font-weight: 600;
  white-space: nowrap;
}

.blog-body-drop-cap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-head);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 0.86;
  color: var(--blue);
  margin: 5px 10px 0 0;
}

.heading-anchor {
  opacity: 0;
  margin-left: 9px;
  font-weight: 400;
  color: var(--slate-light);
  text-decoration: none;
  transition: opacity 0.16s ease;
}
h2:hover > .heading-anchor,
h3:hover > .heading-anchor { opacity: 1; }
.heading-anchor:focus-visible { opacity: 1; }

/* footer blocks */
.post-footer { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--line); }
.author-block { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.author-bio { font-size: 0.9rem; color: var(--slate); margin: 6px 0 8px; max-width: 46ch; }

.topic-pills { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 26px; }

.media-panel {
  margin-top: 30px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--blue-soft);
}
.media-panel h2 { font-size: 1.05rem; margin-bottom: 14px; }
.media-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; margin-bottom: 14px; }
.media-grid code { font-size: 0.8rem; word-break: break-all; display: block; margin-top: 3px; }

.related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.related-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.related-head h2 { font-size: 1.35rem; }

/* listing cards */
.post-card { padding: 0; overflow: hidden; }
.post-card-link { display: block; color: inherit; }
.post-card-cover { aspect-ratio: 16 / 10; overflow: hidden; background: var(--blue-soft); }
.post-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-card:hover .post-card-cover img { transform: scale(1.05); }
.post-card-cover-blank {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, #fff), color-mix(in srgb, var(--green) 13%, #fff));
}
.post-card-body { padding: 20px 22px 24px; }
.post-card-date { display: block; font-size: 0.76rem; color: var(--slate-light); margin-bottom: 7px; }
.post-card h3 { font-size: 1.08rem; line-height: 1.35; margin-bottom: 8px; transition: color 0.18s ease; }
.post-card:hover h3 { color: var(--blue); }
.post-card p {
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}
.post-card-more { font-size: 0.83rem; font-weight: 600; color: var(--blue); }

.listing-head { font-size: 1.45rem; margin: 8px 0 22px; }
.post-grid-list { margin-bottom: 46px; }

/* topic pillar page */
.topic-head { max-width: 760px; padding: 48px 0 34px; }
.topic-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: 16px; }
.topic-posts { padding-bottom: 24px; }
.topic-back { padding: 14px 0 72px; font-weight: 600; }

/* Capital and ownership routes — deliberately NOT styled as tier cards with a
   signal bar. A visitor picking between Invest and Buy is answering a
   different question from "how much help do I want", and the visual break is
   what says so. Separated by a hairline rather than another heading, so it
   reads as a footnote to the ladder instead of a competing section. */
.work-alt { margin-top: 46px; padding-top: 38px; border-top: 1px solid var(--line); }
.work-alt .eyebrow { margin-bottom: 22px; }
.work-alt-grid { align-items: stretch; }
.tier-card-alt {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--color-brand-primary) 4%, #fff), var(--white));
  border-color: color-mix(in srgb, var(--color-brand-primary) 16%, var(--line));
}
.tier-card-alt .tier-price { color: var(--slate); font-weight: 500; }

@media (max-width: 860px) {
  .work-alt { margin-top: 34px; padding-top: 28px; }
}

/* Topic hub on the blog index — the entry point into the pillar pages.
   Same pill language as the booking picker and the calculator's chips, so
   the three interactive surfaces read as one system. */
/* Deliberately NOT `.topic-chip` — that class already exists above for the
   small uppercase tag on post cards and post headers. Reusing the name here
   would silently restyle every one of them. */
.topic-hub-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.topic-hub-chip {
  font-family: var(--font-head);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.topic-hub-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

/* booking page — DW native appointments (/book/) */
.book-card { padding: 34px; max-width: 780px; margin-bottom: 72px; }
.book-step {
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 14px;
}
.book-muted { color: var(--slate-light); font-size: 0.92rem; margin: 0 0 14px; }

/* Day and time buttons share a pill language with the calculator's pillar
   chips, so the two interactive surfaces on the site feel like one system. */
.book-dates,
.book-slots { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.book-date,
.book-slot {
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.book-date:hover,
.book-slot:hover { border-color: var(--blue); color: var(--blue); }
.book-date.is-active,
.book-slot.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--color-brand-on-brand);
}
.book-slot { min-width: 104px; text-align: center; }

/* The week row is a shortcut, not the whole picker — it sits tighter to the
   calendar below it than a standalone block would. */
.book-week .book-dates { margin-bottom: 14px; }

/* Compact month calendar. The flat pill row it replaced grew with the
   availability window: five weekdays over a 60-day horizon is 40+ buttons,
   which buried the time picker under a wall of them. */
.book-cal {
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 26px;
  max-width: 340px;
}
.book-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.book-cal-month {
  font-family: var(--font-head);
  font-size: 0.98rem;
  color: var(--navy);
}
.book-cal-nav {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--navy);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.book-cal-nav:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.book-cal-nav:disabled { opacity: 0.35; cursor: default; }
.book-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.book-cal-dow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--slate-light);
  text-align: center;
  padding-bottom: 4px;
}
.book-cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--navy);
  background: var(--white);
  border: 1.5px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
/* `:not(.is-active)` is load-bearing, not tidiness. `:hover:not(:disabled)`
   scores (0,3,0) against `.is-active`'s (0,2,0), so without it the hover
   colour wins on the selected day and paints blue text on the blue fill —
   the date you just clicked vanishes while the cursor is still on it. The
   pills above dodge this only because their two rules tie and active
   happens to come later. */
.book-cal-day:not(:disabled):not(.is-active):hover {
  border-color: var(--blue);
  color: var(--blue);
}
/* Greyed, not hidden: the grid keeps its shape and an unavailable day still
   reads as a day, which a blank cell does not. */
.book-cal-day:disabled { color: var(--slate-light); opacity: 0.4; cursor: default; }
.book-cal-day.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--color-brand-on-brand);
}

.book-chosen { margin-bottom: 18px; }
.book-chosen strong { color: var(--navy); }
.book-notes { display: block; margin-bottom: 18px; }
.book-notes > span,
.book-card .form-grid label > span { display: block; margin-bottom: 6px; font-size: 0.9rem; }
.book-notes em,
.book-card .form-grid em { color: var(--slate-light); font-style: normal; }

.book-status { margin: 14px 0 0; font-size: 0.92rem; color: var(--slate); }
.book-status.is-error { color: #b3261e; }

.book-tick {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-soft);
  color: var(--green-dark);
  margin-bottom: 18px;
}
.book-tick svg { width: 26px; height: 26px; }

@media (max-width: 620px) {
  .book-card { padding: 24px; }
  .book-slot { flex: 1 1 auto; }
}

/* --- responsive -------------------------------------------------------- */

/* The lockup mark is 2.6:1, so it costs ~60px more width than the old square
   one. Between the desktop nav's 1080px cutoff and full width that is enough
   to push the links past the edge — trim both rather than let the bar wrap. */
@media (max-width: 1200px) {
  .brand { gap: 10px; }
  .brand-mark { height: 36px; }
  .nav-links a { padding: 9px 10px; }
}

/* Every page — homepage and subpages alike — collapses to the hamburger here.
   Subpages used to be a special case (they had no drawer, so .nav-sub kept
   .nav-links visible to hold the "Book a call" button). That exception hid a
   bug: it dropped section links with `a:not(.nav-cta)`, which never matched
   the .nav-more dropdown DIVs, so four dropdown groups spilled into a 64px
   header on every subpage. Subpages now carry the drawer, so there is one
   rule again — do not reintroduce a .nav-sub override here. */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav { height: var(--nav-h-condensed); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid::before { display: none; }
  .calc { grid-template-columns: 1fr; }
  .calc-result { position: static; }

  /* Hero collapses to one column: same move, fewer layers. The probe stays —
     it IS the hero — it just sits under the copy. */
  .hero { min-height: 0; padding: 60px 0 72px; }
  .hero-inner { grid-template-columns: 1fr; gap: 38px; }
  .hero-lead { max-width: none; }
  .hero-grid { display: none; }
  .hero-cue { display: none; }

  .hero-doors { grid-template-columns: 1fr; gap: 14px; }
  .hero-inner-center .hero-lead { margin-bottom: 30px; }
  .page-head { padding-top: 34px; }
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .toc-sidebar { display: none; }
  .toc-mobile { display: block; }
  .post { max-width: none; }
}

@media (max-width: 860px) {
  body { font-size: 16px; }
  section { padding: 68px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-grid.form-lead { grid-template-columns: 1fr; gap: 32px; }
  .why-band { padding: 34px 26px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .hero { padding: 56px 0 60px; }
  .hero-stats { gap: 10px 22px; }   /* flex now, not a grid */
}

@media (max-width: 620px) {
  .wrap { padding: 0 18px; }
  .grid-4 { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .card, .calc-panel, .calc-result { padding: 24px; }
  .event-card { flex-direction: column; gap: 14px; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
  .toggle-group { width: 100%; justify-content: stretch; }
  .toggle-group label { flex: 1; }
  .toggle-group span { display: block; text-align: center; padding: 8px 10px; }
  .form-compact .form-grid.cols-3 { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; gap: 2px; }
  .field .check-grid label { padding: 5px 0; }
  .hero { padding: 44px 0 56px; }
  .probe-fields { grid-template-columns: 1fr; gap: 12px; }
  .hero-probe { padding: 22px 20px 20px; }
  .hero-stats { gap: 9px 20px; }
  .door { padding: 22px 20px 20px; }
  .page-cta { padding-bottom: 56px; }
  .post-card-body { padding: 18px 18px 20px; }
  .author-block { flex-direction: column; }
  .media-grid { grid-template-columns: 1fr; }
  .related-head { flex-direction: column; align-items: flex-start; gap: 6px; }

}

/* --- motion & print ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

@media print {
  .nav, .progress-bar, .mobile-menu, .cta-band, .footer { display: none; }
  body::before { display: none; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* Legal links in the footer bottom bar. */
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: rgba(255, 255, 255, 0.62); }
.footer-legal a:hover { color: #fff; }

/* Below-model caution on the estimator. Warmer than the cap note so it reads
   as "careful" rather than as another neutral footnote. */
.calc-floor {
  background: rgba(255, 214, 138, 0.16);
  color: rgba(255, 236, 200, 0.95);
}

/* --- closing a page ------------------------------------------------------
   Every page except the home page used to run its last section straight into
   the footer, so a long scroll did not end so much as stop. Measured on the
   home page: 17,335px of content and, of seventeen sections, only two
   offered anything to click — a reader who gave up at "partners" (row 12)
   had scrolled ~12,000px without passing a single call to action.

   Two pieces fix that. `.cta-band` (above) is the terminal moment: dark,
   full-bleed, one obvious action, unmistakably the end of the page — it now
   closes every page rather than just this one. `.section-action` punctuates
   the long middle, so a reader who stops partway still has a way to act
   without scrolling to the bottom to find one. */

.section-action {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  justify-content: center;
  margin-top: 46px;
}

/* Legal pages end too, but pitching consulting straight after a privacy
   policy reads badly. Same terminal shape, no sales voice. */
.cta-band-quiet {
  background: var(--navy-deep);
  padding: 66px 0;
}
.cta-band-quiet::before,
.cta-band-quiet::after { display: none; }
.cta-band-quiet h2 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); }
.cta-band-quiet p { margin-bottom: 26px; }

@media (max-width: 640px) {
  .section-action { margin-top: 34px; }
  .section-action .btn { width: 100%; }
}

/* Both hero doors lead to the estimator. This is the way out for someone who
   would rather talk than model — without it the first booking action on the
   page sat 6,119px below the fold. */
.hero-aside {
  text-align: center;
  margin: 26px 0 0;
  font-size: 0.96rem;
  color: var(--slate);
}
.hero-aside a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* A number needs its scope attached to it. The stat band claims an average
   cost reduction and a count of operations rebuilt; both span a career in
   operations leadership as well as consulting engagements, so the band says
   so rather than letting the reader assume it all happened here. */
.stat-scope {
  text-align: center;
  margin: 18px 0 0;
  font-size: 0.83rem;
  color: var(--slate-light);
}

/* Banner colors for the six registered topic clusters. The older
   topic-operations / topic-scaling pair stays defined above because the home
   page insights cards still use them as generic labels. */
.article-banner.topic-diagnostics   { background: linear-gradient(120deg, #1f6fd6, #4a94ec); }
.article-banner.topic-process       { background: linear-gradient(120deg, #16c79a, #4bd9b6); }
.article-banner.topic-warehouse     { background: linear-gradient(120deg, #6b4fd8, #9179ea); }
.article-banner.topic-inventory     { background: linear-gradient(120deg, #d67a1f, #eaa054); }
.article-banner.topic-manufacturing { background: linear-gradient(120deg, #c4453f, #e07b76); }
.article-banner.topic-integration   { background: linear-gradient(120deg, #0f8fa8, #45b8ce); }

/* Where we are. The footer bottom bar is a flex row; on narrow screens this
   wraps onto its own line rather than squeezing the copyright. */
.footer-place { color: rgba(255, 255, 255, 0.5); }

/* The estimator is built on operations of 20+ people, and both hero doors lead
   straight to it. The floor was stated inside the tool but nowhere on the way
   in, so a 12-person operation could model itself against a scope it sits
   outside. Say it before the click, not after. */
.door-note {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--slate-light);
}