/* ==========================================================================
   EXHORTEK — site stylesheet
   Complete replacement for the previous style.css. Use on every page.

   Load order:
     <link rel="stylesheet" href="/css/bootstrap.min.css">   (grid + JS only)
     <link rel="stylesheet" href="/css/exhortek.css">        (this file, last)

   Bootstrap collisions avoided: this file does not define .card, .container,
      .row, .col-, .navbar, .lead, .h1-.h6, or any .text- / .bg- utility.
   It DOES restyle .btn deliberately, so Bootstrap buttons match the system.

   COLOUR CONTRACT — every colour has exactly one job.
     Navy   #16223D  the dark ground
     Yellow #EEE542  the accent. Fields, buttons, numbers, rules.
                     NEVER text on white (1.6:1) or on yellow.
     Green  #3AAA35  system state only: done, confirmed, resolved.
                     Never a background field. Fails on yellow (2.3:1).
     Blue   #4B6CB2  links on light surfaces, secondary fills.

   On yellow, everything is navy. On navy, everything is white or yellow.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  --ink:        #16223D;
  --ink-soft:   #24365C;
  --ink-line:   #2F4370;
  --blue:       #4B6CB2;
  --gold:       #EEE542;
  --gold-lift:  #F5EC5E;
  --gold-deep:  #736C11;   /* yellow darkened to 5.4:1 on white — 8A8215 was 3.97:1 and failed AA */
  --green:      #3AAA35;

  --paper:      #FFFFFF;
  --mist:       #EDEFF4;
  --slate:      #55607A;
  --slate-soft: #6B7488;   /* 4.6:1 on white — 7A8398 was 3.80:1 and failed AA */

  --hairline:   rgba(22, 34, 61, 0.12);
  --hairline-d: rgba(255, 255, 255, 0.14);

  --font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, Helvetica, Arial, sans-serif;

  --pad-y:  96px;
  --max:    1200px;
  --gutter: 24px;

  --topbar-h: 40px;
  --header-h: 72px;
  --chrome:   calc(var(--topbar-h) + var(--header-h));

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  /* fixed topbar + header */
  padding-top: var(--chrome);
}
/* Pages using _LayoutBare (no site-header, e.g. "/Contact-Us") only need to clear the fixed
   topbar, not the full topbar+header chrome — otherwise there's a header-height gap of blank
   space where the (absent) header would have been. */
body.no-header { padding-top: var(--topbar-h); }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol, dl, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--blue); text-decoration: none; transition: color .18s var(--ease); }
/* :not(.btn) on every scoped link rule below. A surface rule like
   `.site-footer a` is (0,1,1) and out-specifies `.btn--solid` at (0,1,0),
   which renders a navy button with navy text. Buttons colour themselves. */
a:not(.btn):hover { color: var(--ink); }

button { font: inherit; cursor: pointer; }

::selection { background: var(--gold); color: var(--ink); }

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

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

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 2000;
  background: var(--gold); color: var(--ink);
  padding: 12px 20px; border-radius: 4px; font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 8px; }


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-transform: none;
}
h1 { font-size: clamp(2.4rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.85rem, 3.4vw, 2.55rem); }
h3 { font-size: 1.35rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; }
h5 { font-size: 0.95rem; font-weight: 600; }

/* .lede not .lead — .lead belongs to Bootstrap */
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--slate);
  max-width: 62ch;
}
.prose { max-width: 68ch; }
.prose + .prose { margin-top: 1.1em; }
.note { font-size: 0.875rem; line-height: 1.5; color: var(--slate-soft); }

.eyebrow {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold-deep);      /* raw yellow is unreadable on white */
  margin-bottom: 14px;
}

/* The one recurring brand device: a short yellow rule above a heading */
.mark::before {
  content: "";
  display: block;
  width: 48px; height: 4px;
  border-radius: 2px;
  background: var(--gold);
  margin-bottom: 22px;
}

.link {
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.link:hover { border-bottom-color: currentColor; }

hr.rule { border: 0; border-top: 1px solid var(--hairline); margin: 0; }

.stack > * + *    { margin-top: 20px; }
.stack-sm > * + * { margin-top: 12px; }


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 860px; }

.section { padding: var(--pad-y) 0; background: var(--paper); }
.section--mist  { background: var(--mist); }
.section--tight { padding: 64px 0; }

/* Full viewport. min-height so content can always exceed it.
   svh avoids mobile overflow: 100vh assumes browser chrome is hidden. */
.section--full {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section--full > .wrap { width: 100%; }
@media (max-height: 820px) { .section--full { min-height: 0; } }

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

.split {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 72px;
  align-items: center;
}
.split--even { grid-template-columns: 1fr 1fr; }
.split--flip > *:first-child { order: 2; }


/* ==========================================================================
   5. SURFACES
   --------------------------------------------------------------------------
   Dark and gold surfaces recolour their contents. Buttons are excluded from
   link rules via :not(.btn) — otherwise the surface rule out-specifies the
   button rule and you get gold text on a gold button.
   ========================================================================== */

/* ---- DARK ---- */
.section--dark, .hero {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.78);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.hero h1, .hero h2, .hero h3, .hero h4 { color: #FFFFFF; }

.section--dark .lede, .hero .lede { color: rgba(255, 255, 255, 0.80); }
.section--dark .prose, .hero .prose { color: rgba(255, 255, 255, 0.72); }
.section--dark .note, .hero .note { color: rgba(255, 255, 255, 0.55); }
.section--dark .eyebrow, .hero .eyebrow { color: var(--gold); }
.section--dark hr.rule, .hero hr.rule { border-color: var(--hairline-d); }

.section--dark a:not(.btn), .hero a:not(.btn) { color: var(--gold); }
.section--dark a:not(.btn):hover, .hero a:not(.btn):hover { color: var(--gold-lift); }

/* ---- GOLD CONTENT SECTION ----
   One per page, and never directly adjacent to the yellow footer — put at
   least one other section between them so the two fields read as separate
   moments rather than one long block. On the homepage the partner band is
   separated from the footer by the team section and the dark closing CTA.

   Everything here is navy: white is 1.3:1 and green is 2.3:1 on this yellow,
   both unreadable. Buttons must be --solid (navy), never --primary. */
.section--gold { background: var(--gold); color: var(--ink); }
.section--gold h1, .section--gold h2, .section--gold h3, .section--gold h4 { color: var(--ink); }
.section--gold .lede, .section--gold .prose { color: var(--ink); opacity: 0.86; }
.section--gold .eyebrow { color: var(--ink); opacity: 0.7; }
.section--gold .note { color: var(--ink); opacity: 0.65; }
.section--gold .mark::before { background: var(--ink); }   /* would be yellow-on-yellow */
.section--gold hr.rule { border-color: rgba(22, 34, 61, 0.22); }
.section--gold a:not(.btn) { color: var(--ink); text-decoration: underline; }
.section--gold a:not(.btn):hover { color: var(--ink-soft); }


/* ==========================================================================
   6. BUTTONS
   Restyles Bootstrap's .btn deliberately. Variants use -- to avoid
   colliding with Bootstrap's .btn-primary / .btn-secondary.
   ========================================================================== */
.btns { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 16px 30px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease);
}
.btn--sm { padding: 11px 20px; font-size: 0.9rem; }

/* Yellow with NAVY text. White on yellow is 1.6:1 and illegible. */
.btn--primary { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-lift); border-color: var(--gold-lift); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #FFFFFF; }

/* Ghost on dark surfaces — .hero must be listed, it is dark but not .section--dark */
.section--dark .btn--ghost, .hero .btn--ghost {
  color: #FFFFFF; border-color: rgba(255, 255, 255, 0.45);
}
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover {
  background: #FFFFFF; color: var(--ink); border-color: #FFFFFF;
}

/* Navy solid — the primary action on a gold surface, where --primary vanishes */
.btn--solid { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.btn--solid:hover { background: var(--ink-soft); border-color: var(--ink-soft); color: #FFFFFF; }

.section--gold .btn--ghost { color: var(--ink); border-color: var(--ink); }
.section--gold .btn--ghost:hover { background: var(--ink); color: #FFFFFF; }
.section--gold .btn:focus-visible { outline-color: var(--ink); }


/* ==========================================================================
   7. TOPBAR  —  yellow, navy foreground (12:1)
   ========================================================================== */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1001;
  height: var(--topbar-h);
  background: var(--gold);
  color: var(--ink);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}
.topbar__inner {
  width: 100%; max-width: var(--max);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topbar__contact { display: flex; align-items: center; gap: 22px; }
.topbar a:not(.btn) { color: var(--ink); font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.topbar a:not(.btn):hover { color: var(--ink-soft); text-decoration: underline; }
.topbar svg { width: 15px; height: 15px; flex: 0 0 auto; }

.social { display: flex; align-items: center; gap: 6px; }
.social a:not(.btn) {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
  transition: background-color .18s var(--ease);
}
.social a:not(.btn):hover { background: rgba(22, 34, 61, 0.12); }
.social svg { width: 16px; height: 16px; flex: 0 0 auto; }
/* Guard: inline SVGs with no intrinsic size will fill their container if a
   class is ever missing. Any icon inside a link stays icon-sized. */
.topbar svg, .social svg, .nav__caret svg, .to-top svg, .nav-toggle svg { max-width: 26px; max-height: 26px; }

/* Social icons in the footer sit on navy */



/* ==========================================================================
   8. HEADER + NAV
   ========================================================================== */
.site-header {
  position: fixed;
  inset: var(--topbar-h) 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center;
  transition: box-shadow .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 1px 16px rgba(22, 34, 61, 0.10); }

.site-header__inner {
  width: 100%; max-width: var(--max);
  margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand img { height: 38px; width: auto; }
.site-footer .brand img { height: 40px; }
.brand__text { font-size: 1.4rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) {
  display: inline-block;
  padding: 9px 14px;
  font-size: 0.95rem; font-weight: 500;
  color: var(--slate);
  border-radius: 4px;
}
.nav a:not(.btn):hover { color: var(--ink); background: var(--mist); }
.nav a[aria-current="page"]:not(.btn) { color: var(--ink); font-weight: 600; }
.nav a[aria-current="page"]::after {
  content: ""; display: block; height: 3px; border-radius: 2px;
  background: var(--gold); margin-top: 5px;
}

.nav-toggle {
  display: none;
  background: transparent; border: 0; padding: 8px;
  color: var(--ink);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* ---- DROPDOWN ----
   One dropdown over four items. The old site had dropdowns on both About and
   Services across eight services, which is what made the nav feel heavy.
   The parent link still navigates to the index page; the menu is extra. */
.nav__group { position: relative; display: flex; align-items: center; }
.nav__group > a:not(.btn) { padding-right: 6px; }

.nav__caret {
  background: none; border: 0; padding: 8px 8px 8px 2px;
  color: var(--slate); line-height: 0; border-radius: 4px;
}
.nav__caret svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.nav__group:hover .nav__caret svg,
.nav__caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__caret:hover { color: var(--ink); background: var(--mist); }

.nav__menu {
  position: absolute;
  top: calc(100% + 10px); left: -8px;
  min-width: 268px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(22, 34, 61, 0.13);
  padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 60;
}
.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__menu a:not(.btn) {
  display: block;
  padding: 11px 14px;
  font-size: 0.95rem;
  border-radius: 4px;
  white-space: normal;
}
.nav__menu a:not(.btn):hover { background: var(--mist); color: var(--ink); }
.nav__menu a:not(.btn)[aria-current="page"]::after { display: none; }

/* A hover-only dropdown is unreachable on touch, so the caret is a real
   button. Hover opens it on pointer devices; click or Enter works everywhere. */
@media (hover: none) {
  .nav__group:hover .nav__menu { opacity: 0; visibility: hidden; }
  .nav__group .nav__menu.is-open { opacity: 1; visibility: visible; }
}


/* ==========================================================================
   9. HERO  (headline + stats + waves, one dark unit)
   ========================================================================== */
.hero {
  position: relative;
  padding: 92px 0 0;
  overflow: hidden;
}
.hero__body { padding-bottom: 72px; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-top: 26px; }
.hero .btns { margin-top: 38px; }
/* Lattice canvas, drawn by /js/hero-lattice.js. Square box reserves the
   space up front so nothing shifts when the script arrives. */
.hero__lattice { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin-inline: auto; }
.hero__lattice canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 991px) { .hero__lattice { max-width: 380px; } }

/* Copy fades up in step with the lattice build */
.hero__body h1, .hero__body .lede, .hero__body .btns, .hero__stats > div {
  animation: hero-in .9s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__body h1    { animation-delay: .3s; }
.hero__body .lede { animation-delay: .55s; }
.hero__body .btns { animation-delay: .8s; }
.hero__stats > div:nth-child(1) { animation-delay: 1.1s; }
.hero__stats > div:nth-child(2) { animation-delay: 1.2s; }
.hero__stats > div:nth-child(3) { animation-delay: 1.3s; }
.hero__stats > div:nth-child(4) { animation-delay: 1.4s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero__body h1, .hero__body .lede, .hero__body .btns, .hero__stats > div { animation: none; }
}

/* ---- Stats live INSIDE the hero, above the waves ----
   Gold numerals need a dark ground: gold on white is 1.6:1 and fails.
   Keeping them here means the wave closes the whole unit instead of
   cutting between two navy blocks. */
.hero__stats {
  border-top: 1px solid var(--hairline-d);
  padding: 36px 0 calc(36px + 90px);   /* 90px reserves room for the waves */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat__num {
  font-size: 2.3rem; font-weight: 600; line-height: 1;
  color: var(--gold); letter-spacing: -0.02em; margin-bottom: 10px;
}
.stat__lbl { font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.66); }

/* ---- ANIMATED WAVES ----
   Three <g> layers each <use> the same path from <defs>, translated at
   different speeds. The path is deliberately wider than the viewBox so the
   drift never exposes an edge. `color` sets the solid front layer, so the
   wave always matches whatever section follows — override with
   .hero__waves--mist / --gold. */
.hero__waves {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  line-height: 0;
  pointer-events: none;
  color: var(--paper);
  z-index: 5;
}
.hero__waves svg { width: 100%; height: 90px; display: block; }
.hero__waves--mist { color: var(--mist); }
.hero__waves--gold { color: var(--gold); }

.wave-1 use { animation: wave-drift-a 11s linear infinite; animation-delay: -2s; }
.wave-2 use { animation: wave-drift-b  9s linear infinite; animation-delay: -3s; }
.wave-3 use { animation: wave-drift-a  7s linear infinite; animation-delay: -4s; }

@keyframes wave-drift-a {
  from { transform: translate(85px, 0); }
  to   { transform: translate(-90px, 0); }
}
@keyframes wave-drift-b {
  from { transform: translate(-90px, 0); }
  to   { transform: translate(85px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .wave-1 use, .wave-2 use, .wave-3 use { animation: none; }
}

/* Inner-page banner — same dark ground, no stats */
.page-banner { position: relative; background: var(--ink); padding: 72px 0 96px; overflow: hidden; }
.page-banner h1 { color: #FFFFFF; }
.page-banner .lede { color: rgba(255, 255, 255, 0.80); margin-top: 18px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.875rem; margin-bottom: 20px; }
.crumbs a:not(.btn) { color: var(--gold); }
.crumbs li { color: rgba(255, 255, 255, 0.55); }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .45; }


/* ==========================================================================
   10. TILES  (not .card — Bootstrap owns that)
   Hairline borders, no shadows. Shadowed cards are the strongest
   "bought template" signal there is.
   ========================================================================== */
.tile {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: border-color .18s var(--ease);
}
.tile:hover { border-color: var(--ink); }
.tile h3 { margin-bottom: 12px; }
.tile .prose { flex: 1 1 auto; margin-bottom: 22px; font-size: 0.97rem; }

.tile--accent { border-left: 4px solid var(--gold); }

.section--dark .tile {
  background: var(--ink-soft);
  border-color: rgba(255, 255, 255, 0.09);
}
.section--dark .tile:hover { border-color: rgba(255, 255, 255, 0.3); }

.section--gold .tile { background: var(--paper); border-color: rgba(22, 34, 61, 0.18); }

/* Numbered steps — no icons. Four icons in four boxes is the most
   templated pattern in B2B web design. */
.steps { display: grid; gap: 0; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--hairline); }
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step__n { font-size: 1.6rem; font-weight: 600; color: var(--gold-deep); line-height: 1.1; }
.section--dark .step { border-color: var(--hairline-d); }
.section--dark .step__n { color: var(--gold); }

/* Definition rows — dense two-column lists */
.rows { display: grid; }
.row-item { display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 20px 0; border-top: 1px solid var(--hairline); }
.row-item:last-child { border-bottom: 1px solid var(--hairline); }
.row-item__k { font-weight: 600; color: var(--ink); }
.section--dark .row-item { border-color: var(--hairline-d); }
.section--dark .row-item__k { color: var(--gold); }

/* Fact list — green dots. Green's only job: confirmed. */
.facts { display: flex; flex-wrap: wrap; gap: 28px; font-size: 0.95rem; }
.facts li { display: flex; align-items: center; gap: 10px; }
.facts li::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); flex: 0 0 auto;
}
.section--gold .facts li::before { background: var(--ink); }  /* green on yellow is 2.3:1 */


/* ==========================================================================
   11. ELEVATE — ledger card + the bar
   ========================================================================== */
.ledger {
  background: var(--ink-soft);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 40px;
}
.ledger__lbl  { font-size: 0.9rem; color: rgba(255, 255, 255, 0.62); margin-bottom: 10px; }
.ledger__num  { font-size: 5rem; font-weight: 600; line-height: .95; color: var(--gold); letter-spacing: -0.03em; margin-bottom: 26px; }
.ledger__meta { font-size: 0.875rem; color: rgba(255, 255, 255, 0.62); margin-top: 14px; }
.ledger__foot {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.45);
}

/* The signature device. Tier bars are PROPORTIONAL — the 80 bar is twice
   the 40 bar. That communicates the tiers faster than any table. */
.bar { height: 12px; width: 100%; background: var(--mist); border-radius: 2px; overflow: hidden; }
.section--dark .bar, .ledger .bar { background: rgba(255, 255, 255, 0.10); }
.bar__fill { display: block; height: 100%; background: var(--gold); border-radius: 2px; }

.baseline-strip {
  margin-top: 56px; padding-top: 26px;
  border-top: 1px solid var(--hairline-d);
  font-size: 1rem; color: rgba(255, 255, 255, 0.72);
}
.baseline-strip strong { color: #FFFFFF; font-weight: 600; }
.baseline-strip .hl { color: var(--gold); font-weight: 600; }


/* ==========================================================================
   12. TEAM
   ========================================================================== */
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.member__photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 6px; margin-bottom: 20px; background: var(--mist);
}
.member__role { color: var(--gold-deep); font-weight: 600; font-size: 0.9rem; margin: 4px 0 12px; }
.member .prose { font-size: 0.94rem; }


/* ==========================================================================
   13. FORMS
   ========================================================================== */
.field { display: block; margin-bottom: 20px; }
.field__label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--ink);
  padding: 13px 15px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
  transition: border-color .18s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(75, 108, 178, 0.15);
}
.field textarea { min-height: 150px; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--slate-soft); }

/* Field labels/notes are set in --ink and the contact-card inherits its section's text colour by
   default — both illegible once the ContactForm partial is reused on a --section--dark surface
   (see "/Contact-Us"), so re-fix them back to a dark-surface-appropriate colour here. */
.section--dark .field__label { color: rgba(255, 255, 255, 0.9); }
.section--dark .form-note { color: rgba(255, 255, 255, 0.55); }
.section--dark .contact-card { color: var(--ink); }

/* ---- "/Contact-Us" standalone page ---- */
.contact-us-ink { padding: 96px 0; display: flex; align-items: center; min-height: calc(100vh - var(--topbar-h)); }
.contact-us-ink .wrap { display: flex; justify-content: center; }

/* The glass box — same idea as .footer-contact, tuned for a dark ink surface: a soft light wash
   with a blurred backdrop, so the centred logo+form read as one floating panel rather than
   sitting directly on the flat ink background. */
.contact-us-panel {
  width: 100%;
  max-width: 620px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  padding: 48px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align: center;
}
.contact-us-logo { display: inline-block; margin-bottom: 36px; }
.contact-us-panel form, .contact-us-panel .field { text-align: left; }

@media (max-width: 767.98px) {
  .contact-us-ink { padding: 56px 0; }
  .contact-us-panel { padding: 32px 22px; }
}

/* Green's other legitimate job */
.msg--ok   { background: rgba(58, 170, 53, .10); border-left: 3px solid var(--green); padding: 14px 18px; border-radius: 4px; color: var(--ink); }
.msg--err  { background: rgba(200, 40, 40, .08);  border-left: 3px solid #C82828;    padding: 14px 18px; border-radius: 4px; color: var(--ink); }


/* ==========================================================================
   14. FOOTER
   ========================================================================== */
/* Yellow body, green bottom bar, translucent contact box — the structure
   from the original site, tightened.

   Everything on the yellow is navy. White is 1.3:1 here and unreadable.
   Yellow now appears as CHROME — topbar at the top, footer at the bottom.
   That frames the page in brand colour and is why no content section on the
   homepage should also be gold. See the note on .section--gold above. */
.site-footer { background: var(--gold); color: var(--ink); padding: 64px 0 0; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 44px;
  padding-bottom: 48px;
}
.site-footer h4 { color: var(--ink); font-size: 1rem; margin-bottom: 18px; }
.site-footer a:not(.btn) { color: var(--ink); }
.site-footer a:not(.btn):hover { color: var(--ink-soft); text-decoration: underline; }
.site-footer__links li + li { margin-top: 10px; }
.site-footer__links a { font-size: 0.95rem; }
.site-footer__brand .brand__text { color: var(--ink); }
.site-footer__meta { font-size: 0.95rem; color: var(--ink); opacity: .82; }
.site-footer__meta p + p { margin-top: 8px; }

/* The glass box. rgba white over yellow reads as a pale panel and gives the
   contact details somewhere to sit without introducing a fourth colour. */
.footer-contact {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 14px;
  padding: 22px 24px;
  backdrop-filter: blur(2px);
}
.footer-contact p { margin: 0; font-size: 0.95rem; color: var(--ink); }
.footer-contact p + p { margin-top: 9px; }
.footer-contact a { font-weight: 600; }

/* Social on yellow — navy icons, deeper navy wash on hover */
.site-footer .social a:not(.btn) { color: var(--ink); }
.site-footer .social a:not(.btn):hover { background: rgba(22, 34, 61, 0.12); color: var(--ink); }

/* Green bottom bar. Green's other legitimate job: it closes the page
   without competing with the yellow above it. */
/* Navy text, not white. White on #3AAA35 is 3.01:1 and fails AA — the
   original site has this problem. Navy on the same green is 5.25:1 and keeps
   your brand green exactly as it is. */
.site-footer__bar {
  background: var(--green);
  color: var(--ink);
  font-size: 0.85rem;
}
.site-footer__bar-inner {
  width: 100%; max-width: var(--max);
  margin-inline: auto; padding: 18px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
}
.site-footer__bar a:not(.btn) { color: var(--ink); text-decoration: underline; font-weight: 500; }
.site-footer__bar a:not(.btn):hover { color: var(--ink-soft); }

.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 999;
  width: 46px; height: 46px; border-radius: 4px;
  background: var(--gold); color: var(--ink);
  border: 0; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top svg { width: 20px; height: 20px; }


/* ==========================================================================
   15. UTILITIES
   ========================================================================== */
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 32px; }
.mt-l { margin-top: 56px; }
.mb-m { margin-bottom: 32px; }
.center { text-align: center; }
.center .mark::before { margin-inline: auto; }
.center .lede, .center .prose { margin-inline: auto; }


/* ==========================================================================
   16. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
  .split, .split--even { grid-template-columns: 1fr; gap: 44px; }
  .split--flip > *:first-child { order: 0; }
  .grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .hero { padding-top: 64px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .hero__visual { order: -1; }   /* lattice above the copy when stacked */

  /* Mobile nav */
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: var(--chrome) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--hairline);
    padding: 12px var(--gutter) 20px;
    box-shadow: 0 14px 30px rgba(22, 34, 61, .12);
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--hairline); }

  /* Accordion inside a hamburger is two taps to reach anything and people
     abandon it. The four services render as indented items, always visible. */
  .nav__group { display: block; position: static; }
  .nav__caret { display: none; }
  .nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; border: 0; box-shadow: none; padding: 0;
    background: transparent;
  }
  .nav__menu a:not(.btn) { padding-left: 20px; font-size: 0.92rem; color: var(--slate); }
  .nav__menu a:not(.btn)::before { content: "\2014\00a0"; opacity: .45; }
  .nav a:hover { background: transparent; }
  .nav a[aria-current="page"]::after { display: none; }
  .nav .btn { margin-top: 14px; }
}

@media (max-width: 767.98px) {
  :root { --pad-y: 60px; --header-h: 64px; }
  .site-footer { padding-top: 48px; }
  .footer-contact { padding: 18px 20px; }
  body { font-size: 16px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr; max-width: 380px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .btns { flex-direction: column; align-items: stretch; }
  .btn { width: 100%; }
  .tile { padding: 26px; }
  .ledger { padding: 30px; }
  .ledger__num { font-size: 4rem; }
  .step { grid-template-columns: 44px 1fr; gap: 16px; }
  .row-item { grid-template-columns: 1fr; gap: 6px; }
  .hero__waves svg { height: 56px; }
  .hero__stats { padding-bottom: calc(32px + 56px); }
  .topbar__contact { gap: 14px; }
  .topbar__contact .t-hide { display: none; }   /* hide email label, keep icons */
}

@media (max-width: 575.98px) {
  h1 { font-size: 2.05rem; }
  .hero__stats { grid-template-columns: 1fr 1fr; gap: 22px; }
  .stat__num { font-size: 1.8rem; }
}


/* ==========================================================================
   17. MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ==========================================================================
   18. PRINT
   ========================================================================== */
@media print {
  .topbar, .site-header, .to-top, .hero__waves, .btns { display: none !important; }
  body { padding-top: 0; color: #000; }
  .hero, .section--dark, .section--gold { background: #FFF !important; color: #000 !important; }
  .hero h1, .section--dark h2, .section--dark h3 { color: #000 !important; }
  a { color: #000 !important; }
}


/* ==========================================================================
   19. COMPONENTS FOR INNER PAGES
   ========================================================================== */

/* ---- Data table ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 640px; }
.table th, .table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.table thead th { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.table tbody th { font-weight: 500; color: var(--ink); }
.table tbody tr:last-child td, .table tbody tr:last-child th { border-bottom: 0; }
.table .is-price { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.table .is-off { color: var(--slate-soft); }

/* ---- Buying ladder / tiers ---- */
.ladder { border-top: 1px solid var(--hairline); }
.tier {
  display: grid;
  grid-template-columns: 1fr 200px 180px;
  gap: 28px; align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
}
.tier__name { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.tier__desc { font-size: 0.95rem; color: var(--slate); margin-top: 8px; }
.tier__bar { margin-top: 14px; }
.tier__price { font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.tier__price small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--slate-soft); margin-top: 4px; }
.ladder__label { font-size: 0.9rem; font-weight: 600; color: var(--gold-deep); margin-bottom: 10px; }
.ladder__split { margin: 40px 0 10px; }

/* ---- Big price treatment ---- */
.price-block { text-align: left; }
.price-block__num { font-size: 5rem; font-weight: 600; line-height: .95; color: var(--gold); letter-spacing: -0.03em; }
.price-block__sub { font-size: 1rem; color: rgba(255,255,255,.62); margin-top: 8px; }
.price-block__note { font-size: 1.25rem; color: var(--gold); font-weight: 600; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline-d); }

/* ---- Q&A ---- */
.qa { border-top: 1px solid var(--hairline); }
.qa__item { padding: 26px 0; border-bottom: 1px solid var(--hairline); }
.qa__q { font-size: 1.1rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.qa__a { color: var(--slate); max-width: 78ch; }

/* ---- Case study ---- */
.case { border-top: 3px solid var(--gold); padding-top: 34px; }
.case + .case { margin-top: 72px; }
.case__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 0.875rem; color: var(--slate-soft); margin-bottom: 18px; }
.case__meta span { display: inline-flex; align-items: center; gap: 8px; }
.case__meta span + span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--slate-soft); }
.case h3 { font-size: 1.05rem; color: var(--ink); margin: 28px 0 10px; }

/* ---- Maturity / status list ---- */
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.85rem; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.status--deep::before   { background: var(--green); }
.status--building::before { background: var(--gold); }
.status--advisory::before { background: var(--slate-soft); }

/* ---- Contact split ---- */
.contact-card { background: var(--mist); border-radius: 8px; padding: 34px; }
.contact-card p + p { margin-top: 12px; }
.contact-card a { font-weight: 600; }

@media (max-width: 767.98px) {
  .tier { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; }
  .tier__price { font-size: 1.3rem; }
  .price-block__num { font-size: 3.6rem; }
  .case + .case { margin-top: 52px; }
  .contact-card { padding: 26px; }
}


/* ==========================================================================
   20. DIAGRAMS
   --------------------------------------------------------------------------
   Inline SVG, no image files, no load cost. Colours come from CSS variables
   so one diagram works on any surface:

     light   accent = --gold-deep   (raw yellow is 1.6:1 on white)
     dark    accent = --gold
     gold    accent = --ink

   Text uses currentColor, so it inherits the surface's text colour.
   ========================================================================== */
.diagram {
  --dg-accent: var(--gold-deep);
  --dg-line:   var(--hairline);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}
.section--dark .diagram { --dg-accent: var(--gold); --dg-line: var(--hairline-d); }
.section--gold .diagram { --dg-accent: var(--ink);  --dg-line: rgba(22,34,61,.22); }

/* min-width keeps SVG text legible on phones rather than shrinking it to
   6px. Slight horizontal scroll is the honest trade. */
.diagram svg { width: 100%; min-width: 560px; height: auto; display: block; }

.diagram figcaption {
  font-size: 0.875rem;
  color: var(--slate-soft);
  margin-top: 14px;
  max-width: 70ch;
}
.section--dark .diagram figcaption { color: rgba(255,255,255,.55); }
.section--gold .diagram figcaption { color: var(--ink); opacity: .7; }

.dg-box { fill: none; stroke: var(--dg-line); stroke-width: 1.5; }
.dg-box--accent { stroke: var(--dg-accent); stroke-width: 2; }
.dg-fill { fill: var(--dg-accent); }
.dg-t { fill: currentColor; font-family: var(--font); }
.dg-t--lg { font-size: 19px; font-weight: 600; }
.dg-t--md { font-size: 16px; font-weight: 500; }
.dg-t--sm { font-size: 13.5px; opacity: .72; }
.dg-t--accent { fill: var(--dg-accent); font-weight: 600; }
.dg-arrow { stroke: var(--dg-line); stroke-width: 1.5; fill: none; }
.dg-arrow--accent { stroke: var(--dg-accent); stroke-width: 2; fill: none; }


/* ==========================================================================
   21. DAY-1 VISIBILITY SWITCH
   --------------------------------------------------------------------------
   Everything that should stay hidden until Insights has enough articles to
   be worth clicking carries `.until-published`.

   TO REVEAL THE WHOLE LOT: delete this one rule. Nothing else to change.

   Do it when you have FOUR published articles, not before. A nav item that
   leads to one thin post is worse than no nav item — the visitor now has
   evidence you're small and inactive.
   ========================================================================== */
.until-published { display: none !important; }


/* ==========================================================================
   22. INSIGHTS
   ========================================================================== */

/* ---- Index cards ----
   Thumbnail left, content right. Server rule: if the post has no image,
   render the card WITHOUT the <a class="post__figure"> element and add
   .post--noimg, so the text takes the full width rather than sitting
   beside an empty box or a grey placeholder. */
.post-list { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.post {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 32px 0;
  border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.post--noimg { grid-template-columns: 1fr; }

.post__figure { display: block; border-radius: 6px; overflow: hidden; background: var(--mist); }
.post__thumb {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  display: block; transition: transform .35s var(--ease);
}
.post__figure:hover .post__thumb { transform: scale(1.03); }

.post__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-size: 0.85rem; color: var(--slate-soft); margin-bottom: 10px;
}
.post__meta .post__tag { color: var(--gold-deep); font-weight: 600; }
.post__meta span + span::before { content: "\00b7"; margin-right: 14px; opacity: .6; }

.post h3 { margin-bottom: 8px; }
.post h3 a { color: var(--ink); }
.post h3 a:hover { color: var(--blue); }
.post__excerpt { font-size: 0.97rem; color: var(--slate); max-width: 72ch; }

/* ---- Article hero image ----
   Sits between the dark page banner and the article meta. Wider than the
   text column, which gives the page an editorial shape.
   Server rule: omit the whole <figure> if the post has no banner image.
   Never render a grey placeholder — an absent image reads better than a
   deliberate blank. */
.article-hero { margin: 0 0 44px; }
.article-hero img {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover;
  border-radius: 8px; display: block; background: var(--mist);
}
.article-hero figcaption {
  font-size: 0.85rem; color: var(--slate-soft); margin-top: 12px;
}

/* ---- Article page ---- */
.article { max-width: 720px; }
.article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 0.875rem; color: var(--slate-soft);
  padding-bottom: 22px; border-bottom: 1px solid var(--hairline);
  margin-bottom: 36px;
}
.article__body > * + * { margin-top: 22px; }
.article__body h2 { font-size: 1.6rem; margin-top: 48px; }
.article__body h3 { font-size: 1.2rem; margin-top: 34px; }
.article__body p { font-size: 1.05rem; line-height: 1.7; max-width: none; }
.article__body ul { margin-left: 0; }
.article__body ul li {
  position: relative; padding-left: 24px; margin-top: 10px;
  font-size: 1.05rem; line-height: 1.65;
}
.article__body ul li::before {
  content: ""; position: absolute; left: 4px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep);
}
.article__body blockquote {
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 24px;
  font-size: 1.15rem; color: var(--ink); font-weight: 500;
}
.article__body figure.diagram { margin: 36px 0; }

.article-end {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--hairline);
}

/* ---- Cross-link strip on service pages ---- */
.insight-strip {
  display: grid; grid-template-columns: 1fr auto;
  gap: 28px; align-items: center;
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 26px 30px;
}
.insight-strip__label {
  font-size: 0.8rem; font-weight: 600; color: var(--gold-deep);
  margin-bottom: 7px;
}
.insight-strip h3 { font-size: 1.15rem; margin-bottom: 6px; }
.section--dark .insight-strip { border-color: var(--hairline-d); border-left-color: var(--gold); }
.section--dark .insight-strip__label { color: var(--gold); }

@media (max-width: 767.98px) {
  .post { grid-template-columns: 1fr; gap: 16px; padding: 26px 0; }
  .post__figure { max-width: 100%; }
  .post__thumb { aspect-ratio: 16 / 9; }
  .article-hero { margin-bottom: 32px; }
  .article-hero img { aspect-ratio: 16 / 10; border-radius: 6px; }
  .insight-strip { grid-template-columns: 1fr; gap: 18px; padding: 22px 24px; }
  .article__body p, .article__body ul li { font-size: 1rem; }
}


/* ==========================================================================
   23. INSIGHTS — filter, related, subscribe
   ========================================================================== */

/* ---- Topic filter ----
   Server rule: render a chip only for topics that have at least one PUBLISHED
   article, and render the whole bar only when there are 2+ such topics.
   A filter with one option is furniture. */
.filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filter__label {
  font-size: 0.85rem; font-weight: 600; color: var(--slate-soft);
  margin-right: 6px;
}
.chip {
  font-family: var(--font);
  font-size: 0.9rem; font-weight: 500;
  color: var(--slate);
  background: transparent;
  border: 1.5px solid var(--hairline);
  border-radius: 100px;
  padding: 8px 18px;
  transition: border-color .16s var(--ease), color .16s var(--ease), background-color .16s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] {
  background: var(--ink); border-color: var(--ink); color: #FFFFFF;
}
.chip__n { opacity: .55; margin-left: 6px; font-variant-numeric: tabular-nums; }

.post[hidden] { display: none; }
.filter-empty { padding: 40px 0; color: var(--slate-soft); }

/* ---- Related articles ---- */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.related__item {
  border-top: 3px solid var(--gold);
  padding-top: 18px;
}
.related__tag { font-size: 0.75rem; font-weight: 600; color: var(--gold-deep); margin-bottom: 8px; }
.related__item h4 { line-height: 1.35; }
.related__item h4 a { color: var(--ink); }
.related__item h4 a:hover { color: var(--blue); }

/* ---- LinkedIn discussion ---- */
.discuss {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 0.95rem;
}
.discuss svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---- Subscribe ---- */
.subscribe { display: grid; grid-template-columns: 1fr auto; gap: 12px; max-width: 520px; }
.subscribe input {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: 14px 16px; border-radius: 4px;
  border: 1.5px solid var(--hairline); background: var(--paper);
}
.subscribe input:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(75,108,178,.15);
}
.section--dark .subscribe input { border-color: rgba(255,255,255,.25); }
.subscribe__note { font-size: 0.85rem; color: var(--slate-soft); margin-top: 12px; max-width: 60ch; }
.section--dark .subscribe__note { color: rgba(255,255,255,.55); }
.section--dark .subscribe-msg { color: #FFFFFF; max-width: 520px; }

/* ---- Email preferences: radio options ---- */
.choice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  border: 1.5px solid var(--hairline); border-radius: 6px; background: var(--paper);
}
.choice:has(input:checked) { border-color: var(--ink); }
.choice input { margin-top: 4px; accent-color: var(--ink); flex: none; }
.choice__title { display: block; font-weight: 600; color: var(--ink); }
.choice__desc { display: block; font-size: 0.9rem; color: var(--slate-soft); margin-top: 2px; }

@media (max-width: 767.98px) {
  .related { grid-template-columns: 1fr; gap: 24px; }
  .subscribe { grid-template-columns: 1fr; }
}


/* ==========================================================================
   24. TESTIMONIALS
   --------------------------------------------------------------------------
   One quote, given room. Not a carousel of three — a rotating set of short
   praise quotes reads as decoration and nobody waits for slide two.

   SERVER RULES
     - Render only when a real, attributed quote exists. No placeholder.
     - An unattributed quote ("a client") is worth close to nothing. If the
       client will not be named, omit the block rather than run it anonymous.
     - Role and company are both required. A first name alone reads as invented.
     - One per page. Two on a page and neither is believed.
   ========================================================================== */
.testimonial { max-width: 900px; }
.testimonial__mark {
  display: block; width: 48px; height: 4px; border-radius: 2px;
  background: var(--gold); margin-bottom: 28px;
}
.testimonial__quote {
  font-family: var(--font);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: none;
}
.section--dark .testimonial__quote { color: #FFFFFF; }
.section--gold .testimonial__quote { color: var(--ink); }

.testimonial__by {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin-top: 26px; font-size: 0.95rem;
}
.testimonial__name { font-weight: 600; color: var(--ink); }
.testimonial__role { color: var(--slate); }
.section--dark .testimonial__name { color: var(--gold); }
.section--dark .testimonial__role { color: rgba(255,255,255,.66); }
.section--gold .testimonial__name { color: var(--ink); }
.section--gold .testimonial__role { color: var(--ink); opacity: .72; }

/* Inside a case study — smaller, indented, sits with the prose */
.testimonial--inline {
  border-left: 3px solid var(--gold);
  padding: 6px 0 6px 26px;
  margin: 34px 0;
  max-width: 720px;
}
.testimonial--inline .testimonial__mark { display: none; }
.testimonial--inline .testimonial__quote { font-size: 1.2rem; line-height: 1.5; }
.testimonial--inline .testimonial__by { margin-top: 16px; font-size: 0.9rem; }

/* Client logo strip. Only worth running with 4+ logos — three logos in a row
   labelled "trusted by" advertises that there are only three. */
.logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 44px; margin-top: 34px;
}
.logos img { height: 34px; width: auto; opacity: .62; filter: grayscale(1); }
.logos img:hover { opacity: 1; filter: none; }

@media (max-width: 767.98px) {
  .testimonial--inline { padding-left: 18px; margin: 26px 0; }
  .logos { gap: 28px; }
  .logos img { height: 26px; }
}