/* =========================================================
   The JBee Method: unified site  ·  Design system v2
   Light, airy, honeycomb-accented. Preserves the brand.
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* palette */
  --cream:      hsl(36, 30%, 95%);
  --cream-2:    hsl(34, 26%, 91%);
  --cream-deep: hsl(34, 24%, 86%);
  --slate:      hsl(202, 28%, 18%);
  --navy:       hsl(203, 40%, 13%);
  --navy-2:     hsl(203, 34%, 22%);
  --steel:      hsl(198, 34%, 55%);
  --steel-soft: hsl(198, 40%, 90%);
  --white:      hsl(40, 30%, 98%);
  --paper:      #ffffff;
  --gold:       #c0904a;
  --gold-bright:#d8ad63;
  --gold-2:     #cfa25a;
  --gold-deep:  #8c6a2b;   /* darkened from #9a742f to clear 4.5:1 on cream */
  /* Text-only golds. The display gold (#c0904a) renders at 2.59:1 on cream and
     the eyebrow gold at 3.86:1, both under WCAG AA. These are the minimum
     darkening that clears 3:1 (large) and 4.5:1 (small) on cream AND paper.
     Fills, buttons and hex accents keep the brighter golds above. */
  --gold-script: #b4843f;
  --gold-label:  var(--gold-deep);
  --ink:        hsl(202, 30%, 15%);
  --muted:      hsl(202, 17%, 33%);
  --muted-2:    hsl(202, 12%, 43%);  /* was 46%: 4.09:1 on cream, under AA */
  --line:       hsl(38, 18%, 84%);
  --line-2:     hsl(38, 14%, 78%);

  /* type */
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Caveat", cursive;

  /* fluid scale: deliberately reduced (headings were too big) */
  --step--1: clamp(0.82rem, 0.8rem + 0.12vw, 0.9rem);
  --step-0:  clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
  --step-1:  clamp(1.12rem, 1.05rem + 0.35vw, 1.35rem);
  --step-2:  clamp(1.35rem, 1.2rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.65rem, 1.45rem + 1vw, 2.35rem);
  --step-4:  clamp(1.95rem, 1.65rem + 1.5vw, 3rem);
  --step-5:  clamp(2.35rem, 1.95rem + 2.1vw, 3.85rem);

  /* spacing / motion */
  --container: 1180px;
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 6px 22px -12px rgba(24, 40, 50, 0.22);
  --shadow: 0 26px 60px -30px rgba(24, 40, 50, 0.34);
  --shadow-gold: 0 20px 46px -22px rgba(192, 144, 74, 0.5);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
  --util-h: 40px;
  --main-h: 74px;
  --header-h: 114px;   /* util + main */

  /* honeycomb pattern (subtle, gold outline) */
  --honeycomb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60.0' viewBox='0 0 34.641 60.0'%3E%3Cg fill='none' stroke='%23c0904a' stroke-opacity='0.22' stroke-width='1'%3E%3Cpath d='M17.32,0 L34.64,10 L34.64,30 L17.32,40 L0,30 L0,10 Z'/%3E%3Cpath d='M0,30 L17.32,40 L17.32,60 L0,70 L-17.32,60 L-17.32,40 Z'/%3E%3Cpath d='M34.64,30 L51.96,40 L51.96,60 L34.64,70 L17.32,60 L17.32,40 Z'/%3E%3Cpath d='M0,-30 L17.32,-20 L17.32,0 L0,10 L-17.32,0 L-17.32,-20 Z'/%3E%3Cpath d='M34.64,-30 L51.96,-20 L51.96,0 L34.64,10 L17.32,0 L17.32,-20 Z'/%3E%3C/g%3E%3C/svg%3E");
  --honeycomb-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60.0' viewBox='0 0 34.641 60.0'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1'%3E%3Cpath d='M17.32,0 L34.64,10 L34.64,30 L17.32,40 L0,30 L0,10 Z'/%3E%3Cpath d='M0,30 L17.32,40 L17.32,60 L0,70 L-17.32,60 L-17.32,40 Z'/%3E%3Cpath d='M34.64,30 L51.96,40 L51.96,60 L34.64,70 L17.32,60 L17.32,40 Z'/%3E%3Cpath d='M0,-30 L17.32,-20 L17.32,0 L0,10 L-17.32,0 L-17.32,-20 Z'/%3E%3Cpath d='M34.64,-30 L51.96,-20 L51.96,0 L34.64,10 L17.32,0 L17.32,-20 Z'/%3E%3C/g%3E%3C/svg%3E");

  /* small bee mark (grayscale: luminance-matched from the gold/navy original) */
  --bee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-16 12 13)'%3E%3Cellipse cx='7.7' cy='8.1' rx='3.5' ry='2.1' fill='%23959595' fill-opacity='.42' transform='rotate(-30 7.7 8.1)'/%3E%3Cellipse cx='16.3' cy='8.1' rx='3.5' ry='2.1' fill='%23959595' fill-opacity='.42' transform='rotate(30 16.3 8.1)'/%3E%3Cpath d='M10.4 8.2C9.9 6.6 9.2 5.9 8.1 5.4M13.6 8.2c.5-1.6 1.2-2.3 2.3-2.8' stroke='%23959595' stroke-width='1.15' fill='none' stroke-linecap='round'/%3E%3Cellipse cx='12' cy='14.4' rx='4.15' ry='5.3' fill='%23959595'/%3E%3Cpath d='M8.35 12.5h7.3M8.15 15.5h7.7M9.7 18.3h4.6' stroke='%23212121' stroke-width='1.35' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5 { font-family: var(--font-sans); font-weight: 600; line-height: 1.12; color: var(--slate); letter-spacing: -0.018em; }
h1 { font-size: var(--step-5); line-height: 1.06; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { max-width: 66ch; }
strong { font-weight: 700; }

/* signature gold Caveat emphasis */
h1 strong, h2 strong, h3 strong, .script {
  font-family: var(--font-script);
  color: var(--gold-script);
  font-weight: 700;
  letter-spacing: 0;
}
h1 strong { font-size: 1.12em; }
h2 strong, h3 strong { font-size: 1.15em; }

.eyebrow {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--gold-label);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
/* honeycomb cell marker on every eyebrow label */
.eyebrow::before, .eyebrow.center::after {
  content: ""; width: 10px; height: 11px; flex: none; display: inline-block;
  background: var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.eyebrow.center::before { display: inline-block; }
.bg-slate .eyebrow.center::after, .bg-navy .eyebrow.center::after, .leadmag .eyebrow.center::after { background: var(--gold-bright); }
.bg-slate .eyebrow, .bg-navy .eyebrow, .leadmag .eyebrow, .cta-band.bg-slate .eyebrow { color: var(--gold-bright); }
.bg-slate .eyebrow::before, .bg-navy .eyebrow::before, .leadmag .eyebrow::before { background: var(--gold-bright); }

.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.6; }
.measure { max-width: 60ch; }

/* ---------- Layout ---------- */
.container { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; }
.container-wide { width: min(100% - var(--gutter) * 2, 1360px); margin-inline: auto; }
.section { padding-block: clamp(3rem, 5.2vw, 5.25rem); position: relative; }
.section-sm { padding-block: clamp(2.25rem, 3.5vw, 3.25rem); }
.stack > * + * { margin-top: 1rem; }
.stack.tight > * + * { margin-top: 0.6rem; }
.center { text-align: center; }
.center .lead, .center p, p.center, .lead.center { margin-inline: auto; }

.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-paper { background: var(--paper); }
.bg-steel-soft { background: var(--steel-soft); }
.bg-slate { background: var(--slate); color: var(--cream); }
.bg-navy { background: var(--navy); color: var(--cream); }
.bg-slate h1, .bg-slate h2, .bg-slate h3, .bg-slate h4,
.bg-navy h1, .bg-navy h2, .bg-navy h3, .bg-navy h4 { color: #fff; }
.bg-slate .lead, .bg-navy .lead { color: hsla(38, 30%, 92%, 0.82); }
.bg-slate p, .bg-navy p { color: hsla(38, 26%, 92%, 0.82); }
/* light cards nested inside dark sections keep dark headings */
/* Only cards that still carry a light fill need dark text on a dark section.
   Plain (unboxed) cards must inherit the section's light text instead. */
.bg-slate .card.bg-cream h1, .bg-slate .card.bg-cream h2, .bg-slate .card.bg-cream h3, .bg-slate .card.bg-cream h4,
.bg-slate .card.bg-paper h1, .bg-slate .card.bg-paper h2, .bg-slate .card.bg-paper h3, .bg-slate .card.bg-paper h4,
.bg-navy .card.bg-cream h1, .bg-navy .card.bg-cream h2, .bg-navy .card.bg-cream h3, .bg-navy .card.bg-cream h4,
.bg-navy .card.bg-paper h1, .bg-navy .card.bg-paper h2, .bg-navy .card.bg-paper h3, .bg-navy .card.bg-paper h4 { color: var(--slate); }
.bg-slate .card.bg-cream p:not([style*="color"]), .bg-slate .card.bg-paper p:not([style*="color"]),
.bg-navy .card.bg-cream p:not([style*="color"]), .bg-navy .card.bg-paper p:not([style*="color"]) { color: var(--muted); }

/* honeycomb backdrop helper */
.honey { position: relative; }
.honey::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--honeycomb); background-size: 69px 120px;
  opacity: 0.5; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 90% 10%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 90% 10%, #000, transparent 70%);
}
.honey > * { position: relative; z-index: 1; }
.bg-slate.honey::before, .bg-navy.honey::before { background-image: var(--honeycomb-light); opacity: 1; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--slate); --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.85em 1.55em;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: 100px; font-weight: 600; font-size: var(--step-0);
  position: relative; overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color .3s ease;
}
.btn::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: translateY(101%); transition: transform .4s var(--ease); z-index: 0; }
.btn > *, .btn span, .btn svg { position: relative; z-index: 1; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); color: #fff; }
.btn:hover::after { transform: translateY(0); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: #231803; }
.btn--gold::after { background: var(--slate); }
.btn--gold:hover { color: #fff; }
.btn--outline { background: transparent; color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--slate); }
.btn--outline::after { background: var(--slate); }
.btn--outline:hover { color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px hsla(0,0%,100%,0.55); }
.btn--ghost-light::after { background: #fff; }
.btn--ghost-light:hover { color: var(--slate); }
.btn--lg { padding: 1em 1.9em; font-size: var(--step-1); }

.textlink { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; color: var(--gold-deep); position: relative; }
.textlink::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.textlink:hover::after { transform: scaleX(1); transform-origin: left; }
.textlink .arrow { transition: transform .3s var(--ease); }
.textlink:hover .arrow { transform: translateX(3px); }

/* ---------- Header (utility bar + main) ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; }

.util-bar {
  background: var(--navy); color: hsla(38,26%,92%,0.8);
  font-size: 0.8rem; height: var(--util-h); position: relative; z-index: 3;
  transition: height .4s var(--ease), opacity .3s var(--ease);
}
.util-bar__inner { width: min(100% - var(--gutter) * 2, 1360px); margin-inline: auto; height: var(--util-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.util-left { display: inline-flex; align-items: center; gap: .5em; letter-spacing: .02em; }
.util-left svg { width: 14px; height: 14px; opacity: .8; }
.util-right { display: flex; align-items: center; gap: 1.2rem; }
.util-right a { transition: color .25s ease; }
.util-right a:hover { color: var(--gold-bright); }
.util-phone { display: inline-flex; align-items: center; gap: .4em; }
/* util dropdown */
.util-menu { position: relative; }
.util-menu > button { display: inline-flex; align-items: center; gap: .4em; color: inherit; font-size: inherit; }
.util-menu .chev-sm { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform .3s var(--ease); opacity: .7; }
.util-menu:hover .chev-sm { transform: rotate(-135deg) translateY(-1px); }
.util-drop {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px;
  background: var(--slate); border-radius: 14px; padding: .5rem; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index: 1200;
}
.util-drop::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 12px; }
.util-menu:hover .util-drop, .util-menu.open .util-drop { opacity: 1; visibility: visible; transform: none; }
.util-drop a { display: block; padding: .6rem .8rem; border-radius: 9px; color: hsla(38,26%,92%,0.85); font-size: .85rem; transition: background .25s ease, color .25s ease; }
.util-drop a:hover { background: hsla(38,26%,92%,0.08); color: #fff; }

.header-main { height: var(--main-h); transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease); position: relative; }
.header-main::before { content: ""; position: absolute; inset: 0; background: hsla(36,34%,96%,0.85); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; opacity: 0; transition: opacity .4s var(--ease); }
.header-main__inner { position: relative; height: 100%; width: min(100% - var(--gutter) * 2, 1360px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }

/* scrolled state: hide util bar, solidify main */
.site-header.scrolled .util-bar { height: 0; opacity: 0; overflow: hidden; pointer-events: none; }
.site-header.scrolled .header-main { --main-h: 66px; }
.site-header.scrolled .header-main::before { opacity: 1; border-bottom-color: var(--line); }

.brand { display: flex; align-items: center; z-index: 2; }
.brand img { height: clamp(34px, 4vw, 44px); width: auto; transition: height .4s var(--ease); }
.site-header.scrolled .brand img { height: 33px; }

.nav { display: flex; align-items: center; gap: clamp(0.3rem, 1.2vw, 1.1rem); }
.nav-list { display: flex; align-items: center; gap: clamp(0.1rem, 0.7vw, 0.6rem); }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 0.32em; padding: 0.55em 0.8em; font-weight: 500; color: var(--slate); border-radius: 10px; transition: color .25s ease; }
.nav-link .chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .35s var(--ease); opacity: .55; }
.nav-item:hover .nav-link, .nav-link.active { color: var(--gold-deep); }
.nav-item.has-mega:hover .nav-link .chev { transform: rotate(-135deg) translateY(-2px); }

/* ---------- Mega panel (light, redesigned) ---------- */
.mega {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 16px); width: max-content; max-width: min(94vw, 820px);
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 22px; padding: 1.4rem; box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; z-index: 60;
}
.mega::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 20px; }
.mega > * { position: relative; z-index: 1; }
.nav-item.has-mega:hover .mega, .nav-item.has-mega.open .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 8px); }
.nav-item.align-right .mega { left: auto; right: 0; transform: translate(0, 16px); }
.nav-item.align-right:hover .mega, .nav-item.align-right.open .mega { transform: translate(0, 8px); }

.mega-split { display: grid; grid-template-columns: minmax(0, 1fr) 208px; gap: 1.4rem; align-items: stretch; }
.mega-grid { display: grid; gap: .35rem .8rem; }
.mega-2 { grid-template-columns: 1fr 1fr; }
.mega-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-bottom: .8rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.mega-head .eyebrow { color: var(--gold-deep); }
.mega-head .textlink { color: var(--gold-deep); font-size: .85rem; }
.mega-link { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 14px; transition: background .25s var(--ease); }
.mega-link:hover { background: var(--cream); }
.mega-link .mi { width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--steel-soft); display: grid; place-items: center; color: var(--gold-deep); transition: background .25s var(--ease), color .25s var(--ease); }
.mega-link:hover .mi { background: var(--gold); color: #fff; }
.mega-link .mi svg { width: 20px; height: 20px; }
.mega-link .t { font-weight: 600; color: var(--slate); display: block; font-size: .97rem; }
.mega-link .d { display: block; font-size: .82rem; color: var(--muted); margin-top: 1px; line-height: 1.35; }

/* categorized services mega */
.mega-feature { margin-bottom: .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.mega-feature .mega-link { background: var(--steel-soft); }
.mega-feature .mega-link:hover { background: var(--cream-deep); }
.mega-cats { gap: .3rem 1.2rem; }
.mega-cat { display: flex; flex-direction: column; }
.mega-cat__label { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--gold-deep); padding: .55rem .8rem .15rem; }

.mega-aside { background: linear-gradient(158deg, var(--slate), var(--navy)); border-radius: 18px; padding: 1.35rem; display: flex; flex-direction: column; justify-content: center; gap: .8rem; color: #fff; position: relative; overflow: hidden; }
.mega-aside::after { content: ""; position: absolute; inset: 0; background-image: var(--honeycomb-light); background-size: 24px 42px; pointer-events: none; -webkit-mask-image: radial-gradient(80% 80% at 100% 100%, #000, transparent 72%); mask-image: radial-gradient(80% 80% at 100% 100%, #000, transparent 72%); }
.mega-aside > * { position: relative; z-index: 1; }
.mega-aside .script { font-size: 1.85rem; line-height: 1.02; color: var(--gold-bright); }
.mega-aside p { font-size: .82rem; color: hsla(38,26%,92%,0.72); line-height: 1.4; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.chip { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .4em .85em; border-radius: 100px; background: var(--cream); color: var(--gold-deep); border: 1px solid var(--line); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.chip:hover { background: var(--gold); color: #fff; border-color: transparent; }

/* mega insights cards (light) */
.mega-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mega-post { border-radius: 14px; overflow: hidden; background: var(--cream); border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.mega-post:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.mega-post img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
/* .mp-body is a <span>. Left inline, its horizontal padding applies to the
   inline tag but NOT to .mp-title, which is display:-webkit-box for the
   line clamp and so escapes the inline flow. That put the title 12.8px
   left of the tag. Making the body a block fixes both. */
.mega-post .mp-body { display: block; padding: .7rem .8rem .9rem; }
.mega-post .mp-tag { display: block; }
.mega-post .mp-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--gold-deep); }
.mega-post .mp-title { font-size: .86rem; color: var(--slate); font-weight: 600; line-height: 1.3; margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.header-cta { display: inline-flex; }
.nav-toggle { display: none; }

/* minimal header (conversion pages) */
body[data-nav="minimal"] { --header-h: 78px; }
.site-header.minimal .header-main::before { opacity: 1; border-bottom-color: var(--line); }
body[data-nav="minimal"] .header-cta { display: inline-flex !important; }
@media (max-width: 560px) { .site-header.minimal .header-cta { padding: .7em 1.1em; font-size: var(--step--1); } }

/* ---------- Hero (light, split) ---------- */
.hero {
  position: relative; background: var(--cream); overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(1.5rem, 3vw, 2.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--honeycomb); background-size: 81px 140px; opacity: .55; -webkit-mask-image: radial-gradient(110% 90% at 95% 8%, #000, transparent 62%); mask-image: radial-gradient(110% 90% at 95% 8%, #000, transparent 62%); }
.hero > .container { position: relative; z-index: 1; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__copy { max-width: 34rem; }
.hero__copy h1 { color: var(--slate); }
.hero__copy .lead { color: var(--muted); max-width: 40ch; }
.hero__actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow); object-fit: cover; aspect-ratio: 4/3.4; }
.hero__media.hex img { border-radius: 0; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: none; aspect-ratio: 1/1; }

/* ---------- Hero (full-photo banner) ---------- */
.hero--banner { display: flex; align-items: center; min-height: 100vh; min-height: 100dvh; padding-top: var(--header-h); padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.hero--banner::before { display: none; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 32%; }
.hero--banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(96deg, hsla(36,32%,95%,0.96) 0%, hsla(36,32%,95%,0.9) 24%, hsla(36,32%,95%,0.6) 44%, hsla(36,32%,95%,0.15) 62%, transparent 76%); }
.hero--banner > .container { position: relative; z-index: 2; }
.hero--banner .hero__copy { max-width: 39rem; }
.hero--banner h1 { font-size: clamp(2.4rem, 1.9rem + 2.3vw, 3.7rem); }
.hero--banner h1 strong { display: inline-block; line-height: 1; margin-top: .12em; padding-bottom: .06em; }
.hero--banner .hero__actions { flex-wrap: nowrap; }
@media (max-width: 620px) { .hero--banner .hero__actions { flex-wrap: wrap; } }
.hero--banner .hex-float { z-index: 2; }
@media (max-width: 820px) {
  .hero--banner { min-height: 100vh; min-height: 100dvh; align-items: flex-end; padding-bottom: clamp(2.5rem, 8vw, 4rem); }
  .hero__bg img { object-position: 74% 22%; }
  /* the copy block is tall on a phone and was reaching into the sheer part of
     this scrim, putting the headline over the photo. Hold it near-opaque up to
     the top of the copy, then clear fast so Bee's face stays visible. */
  .hero--banner::after { background: linear-gradient(4deg, hsla(36,32%,95%,0.98) 0%, hsla(36,32%,95%,0.96) 50%, hsla(36,32%,95%,0.88) 64%, hsla(36,32%,95%,0.45) 80%, hsla(36,32%,95%,0.06) 100%); }
  .hero--banner .hero__copy { max-width: 100%; }
}

/* page hero (interior, light) */
.page-hero { position: relative; background: var(--cream); overflow: hidden; padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem)); padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--honeycomb); background-size: 81px 140px; opacity: .55; -webkit-mask-image: radial-gradient(90% 100% at 92% 0%, #000, transparent 60%); mask-image: radial-gradient(90% 100% at 92% 0%, #000, transparent 60%); }
.page-hero > .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--slate); max-width: 20ch; }
.page-hero .lead { color: var(--muted); max-width: 58ch; }
.page-hero .stack { max-width: 100%; }
.crumbs { font-size: var(--step--1); color: var(--muted-2); letter-spacing: .03em; }
.crumbs a { color: var(--gold-deep); }
.crumbs a:hover { color: var(--gold-script); }

/* floating hex decor */
.hex-float { position: absolute; z-index: 0; opacity: .55; pointer-events: none; }

/* ---------- Lists ---------- */
.check-list { display: grid; gap: 0.7rem; }
.check-list li { position: relative; padding-left: 2rem; line-height: 1.5; }
.check-list li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 1.35rem; height: 1.35rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0904a'%3E%3Cpath d='M12 2l8.66 5v10L12 22 3.34 17V7z' fill='%23c0904a' fill-opacity='0.16'/%3E%3Cpath d='M9.5 12.5l1.8 1.8 3.5-3.8' fill='none' stroke='%239a742f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; }
.bg-slate .check-list li, .bg-navy .check-list li { color: hsla(38,26%,92%,0.9); }
.q-list { display: grid; gap: .55rem; }
.q-list li { position: relative; padding-left: 1.5rem; color: var(--muted); }
.q-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--gold-script); font-weight: 700; }

/* ---------- Grids / cards ---------- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.6vw, 2rem); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); position: relative; overflow: hidden; }
/* background utilities must win over the default .card background */
.card.bg-slate { background: var(--slate); }
.card.bg-navy { background: var(--navy); }
.card.bg-cream { background: var(--cream); }
.card.bg-paper { background: var(--paper); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card h3 { font-size: var(--step-1); }
.card .num { font-family: var(--font-script); font-size: 2.1rem; color: var(--gold-script); line-height: 1; }
.card .card-hex { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: var(--steel-soft); color: var(--gold-deep); margin-bottom: 1rem; }
.card .card-hex svg { width: 26px; height: 26px; }

/* image tile */
.tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow-sm); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); z-index: 0; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, hsla(202,42%,10%,0.9), hsla(202,42%,10%,0.15) 60%, transparent); z-index: 1; }
.tile:hover img { transform: scale(1.06); }
.tile__body { position: relative; z-index: 2; padding: 1.4rem; }
.tile__body h3 { color: #fff; }
.tile__body .arrow-c { margin-top: .7rem; display: inline-flex; width: 38px; height: 38px; border-radius: 50%; background: hsla(0,0%,100%,0.14); border: 1px solid hsla(0,0%,100%,0.35); align-items: center; justify-content: center; transition: background .3s ease, transform .3s ease; }
.tile:hover .arrow-c { background: var(--gold); transform: translateX(4px); border-color: transparent; }

/* pricing tier */
.tier { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-lg); border: 1px solid var(--line); padding: clamp(1.5rem, 2.6vw, 2rem); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease); position: relative; }
.tier:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tier.featured { border: 1.5px solid var(--gold); box-shadow: var(--shadow-gold); }
.tier__badge { position: absolute; top: 1.1rem; right: 1.1rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--gold-deep); background: hsla(41,45%,55%,0.16); padding: .3em .75em; border-radius: 100px; }
.tier__name { font-size: var(--step-2); }
.tier__tag { color: var(--muted); }
.tier__price { font-family: var(--font-script); font-size: 2rem; color: var(--gold-script); }
.tier__who { font-size: var(--step--1); color: var(--muted); border-left: 2px solid var(--gold); padding-left: .85rem; }
.tier__level { margin-top: auto; font-size: var(--step--1); color: var(--slate); font-weight: 600; background: var(--cream); border-radius: 12px; padding: .65rem .85rem; }
.tier hr { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }

/* blog card */
.post-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card__img { aspect-ratio: 16/10; overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.05); }
.post-card__body { padding: 1.2rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.tag { align-self: flex-start; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--gold-deep); }
.post-card h3 { font-size: var(--step-1); }
.post-card .meta { font-size: var(--step--1); color: var(--muted-2); margin-top: auto; }

/* ---------- Split media ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.split--media-first .split__media { order: -1; }
.split__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media.hex { border-radius: 0; box-shadow: none; }
.split__media.hex img { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); aspect-ratio: 1/1; }
/* belita.jpg is a tall portrait: centred cover put her hairline in the top apex
   and clipped her head. Anchor near the top so the whole head sits inside. */
.split__media--portrait.hex img {
  object-position: 50% 18%;
}

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(1rem, 2.4vw, 1.6rem); position: relative; }
.step { text-align: center; position: relative; }
/* honeycomb cell holding the step number */
.step__icon {
  width: 86px; height: 99px; margin: 0 auto 1.1rem;
  display: grid; place-items: center; position: relative;
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 52%, var(--gold-deep) 100%);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border-radius: 0; box-shadow: none;
  filter: drop-shadow(0 10px 16px hsla(35, 45%, 30%, .28));
  transition: transform .45s var(--ease), filter .45s var(--ease);
}
/* faint honeycomb texture inside the cell */
.step__icon::after {
  content: ""; position: absolute; inset: 0;
  background-image: var(--honeycomb); background-size: 22px 38px;
  opacity: .28; pointer-events: none;
}
.step:hover .step__icon { transform: translateY(-5px); filter: drop-shadow(0 14px 20px hsla(35, 45%, 30%, .34)); }
.step__icon img { width: 42px; position: relative; z-index: 1; }
.step__n { position: relative; z-index: 1; font-family: var(--font-script); font-size: 2.9rem; font-weight: 700; color: var(--navy); line-height: 1; }
.step__num { position: absolute; top: -9px; left: -9px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #231803; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.step h4 { margin-bottom: .3rem; }
.step p { color: var(--muted); font-size: var(--step--1); margin-inline: auto; max-width: 24ch; }

/* ---------- Accordion ---------- */
.accordion { display: grid; gap: .7rem; }
.acc { border: 1px solid var(--line); border-radius: 15px; background: var(--paper); overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease; }
.acc.open { border-color: var(--gold); box-shadow: var(--shadow-sm); }
.acc__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.3rem; text-align: left; font-weight: 600; font-size: var(--step-0); color: var(--slate); }
.acc__head .sign { position: relative; width: 16px; height: 16px; flex: none; }
.acc__head .sign::before, .acc__head .sign::after { content: ""; position: absolute; background: var(--gold); border-radius: 2px; transition: transform .35s var(--ease); }
.acc__head .sign::before { top: 7px; left: 0; width: 16px; height: 2px; }
.acc__head .sign::after { top: 0; left: 7px; width: 2px; height: 16px; }
.acc.open .sign::after { transform: scaleY(0); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.acc.open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__inner { padding: 0 1.3rem 1.3rem; color: var(--muted); }
.acc__inner .eyebrow { color: var(--gold-deep); margin-bottom: .3rem; display: block; }

/* ---------- CTA band ---------- */
/* ---------- honeycomb & bee accents ---------- */
/* faint honeycomb texture in the corner of every card */
.card::after {
  content: ""; position: absolute; right: -18px; bottom: -22px;
  width: 96px; height: 96px; background-image: var(--honeycomb);
  background-size: 26px 45px; opacity: .75; pointer-events: none; z-index: 0;
}
.card.bg-slate::after, .card.bg-navy::after { background-image: var(--honeycomb-light); }
.card > * { position: relative; z-index: 1; }

/* small bee mark */
.bee-mark {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em;
  background-image: var(--bee); background-size: contain;
  background-repeat: no-repeat; background-position: center;
}
.cta-band::after {
  content: ""; position: absolute; right: 4%; top: 16%;
  width: 74px; height: 74px; opacity: .22; pointer-events: none;
  background-image: var(--bee); background-size: contain; background-repeat: no-repeat;
  transform: rotate(14deg);
}
@media (max-width: 780px) { .cta-band::after { width: 48px; height: 48px; right: 3%; top: 8%; opacity: .16; } }

.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; max-width: 24ch; margin-inline: auto; }
.cta-band .lead { max-width: 54ch; margin-inline: auto; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }

/* ---------- Lead magnet (BIG tablet) ---------- */
.leadmag { display: grid; grid-template-columns: 1fr 0.85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3.25rem); overflow: hidden; position: relative; }
.leadmag::after { content: ""; position: absolute; inset: 0; background-image: var(--honeycomb-light); background-size: 69px 120px; opacity: 1; pointer-events: none; -webkit-mask-image: radial-gradient(80% 100% at 0% 100%, #000, transparent 65%); mask-image: radial-gradient(80% 100% at 0% 100%, #000, transparent 65%); }
.leadmag > * { position: relative; z-index: 1; }
.leadmag h2 { color: #fff; }
.leadmag__media { position: relative; display: grid; place-items: center; }
.leadmag__media::before { content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, hsla(41,55%,55%,0.55), transparent 68%); filter: blur(6px); }
.leadmag__media img { position: relative; width: 100%; max-width: 560px; filter: drop-shadow(0 30px 44px rgba(0,0,0,.45)); transform: rotate(-3deg); transition: transform .5s var(--ease); }
.leadmag__media img:hover { transform: rotate(0deg) scale(1.02); }
/* fallback for pages that use a bare <img> inside .leadmag (articles, services) */
.leadmag > img { width: 100%; max-width: 300px; margin-inline: auto; filter: drop-shadow(0 20px 34px rgba(0,0,0,.4)); }

/* ---------- Reviews ---------- */
.reviews-head { display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; }
.g-badge { display: inline-flex; align-items: center; gap: .7rem; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; padding: .5rem 1.1rem .5rem .8rem; box-shadow: var(--shadow-sm); font-weight: 600; color: var(--slate); }
.g-badge .g-logo { width: 22px; height: 22px; }
.g-badge .g-score { font-size: 1.2rem; }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars svg { width: 17px; height: 17px; }
.review-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .8rem; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.review-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.review-card .r-text { color: var(--ink); line-height: 1.6; }
.review-card .r-foot { display: flex; align-items: center; gap: .7rem; margin-top: auto; }
.r-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--steel); flex: none; }
.r-name { font-weight: 600; color: var(--slate); font-size: .95rem; }
.r-src { font-size: .78rem; color: var(--muted-2); display: inline-flex; align-items: center; gap: .3em; }
.r-src svg { width: 13px; height: 13px; }
.badge-sample { display: inline-block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); background: hsla(41,45%,55%,0.16); padding: .2em .55em; border-radius: 5px; }

/* ---------- Team ---------- */
.team-card { text-align: left; }
.team-card__img { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1/1; box-shadow: var(--shadow-sm); }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.team-card:hover .team-card__img img { transform: scale(1.04); }
.team-card h3 { font-size: var(--step-1); margin-top: 1rem; }
.team-card .role { color: var(--gold-deep); font-weight: 600; font-size: var(--step--1); margin-top: .15rem; }
.team-card .read-bio { margin-top: .7rem; font-weight: 600; color: var(--gold-deep); display: inline-flex; align-items: center; gap: .4em; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.team-card .read-bio:hover { color: var(--gold); }

/* bio modal */
.bio-modal { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1.2rem; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
.bio-modal.open { opacity: 1; visibility: visible; }
.bio-modal__backdrop { position: absolute; inset: 0; background: hsla(202,40%,10%,0.6); backdrop-filter: blur(3px); }
.bio-modal__panel { position: relative; background: var(--paper); border-radius: var(--radius-lg); max-width: 640px; width: 100%; max-height: 88vh; overflow-y: auto; padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow); transform: translateY(16px) scale(.98); transition: transform .35s var(--ease); }
.bio-modal.open .bio-modal__panel { transform: none; }
.bio-modal__close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; transition: background .25s ease, transform .25s ease; }
.bio-modal__close:hover { background: var(--cream-deep); transform: rotate(90deg); }
.bio-modal__head { display: flex; gap: 1.1rem; align-items: center; margin-bottom: 1.2rem; }
.bio-modal__head img { width: 82px; height: 82px; border-radius: 16px; object-fit: cover; flex: none; }
.bio-modal__head .role { color: var(--gold-deep); font-weight: 600; font-size: var(--step--1); }
.bio-modal__body p { margin-top: .9rem; color: var(--muted); }
body.modal-open { overflow: hidden; }

/* ---------- Article ---------- */
.article { max-width: 72ch; margin-inline: auto; }
.article h2 { font-size: var(--step-3); margin-top: 2.2rem; }
.article h3 { font-size: var(--step-1); margin-top: 1.6rem; }
.article p, .article ul { margin-top: 1rem; }
.article p { color: var(--ink); }
.article ul { display: grid; gap: .55rem; }
.article ul li { position: relative; padding-left: 1.4rem; color: var(--ink); }
.article ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); }
.article .callout { background: var(--cream); border-left: 3px solid var(--gold); border-radius: 12px; padding: 1.2rem 1.4rem; margin-top: 1.6rem; }
.article .callout p { margin-top: 0; }

/* ---------- Blog / article page (editorial layout) ---------- */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1300; pointer-events: none; background: hsla(202,20%,80%,0.25); }
.reading-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); }

.article-hero { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.article-hero__inner { max-width: 64ch; margin-inline: auto; text-align: center; }
.article-hero h1 { max-width: none; font-size: clamp(1.8rem, 1.35rem + 2vw, 2.9rem); margin: .7rem 0 0; }
.article-hero .crumbs { justify-content: center; }
.article-meta { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: var(--step--1); color: var(--muted-2); }

.article-cover-wrap { max-width: 960px; margin-inline: auto; margin-bottom: clamp(2rem, 4vw, 3rem); }
.article-cover { width: 100%; aspect-ratio: 96 / 46; border-radius: var(--radius-lg); max-height: 460px; object-fit: cover; box-shadow: var(--shadow); }

.article-layout { display: grid; grid-template-columns: 230px minmax(0, 720px); gap: clamp(2rem, 4vw, 4.5rem); justify-content: center; align-items: start; }
.article-body .article { max-width: none; margin: 0; }
.article-body .article > .lead:first-child { font-size: 1.16rem; color: var(--slate); line-height: 1.6; }

/* Sticky TOC */
.toc { position: sticky; top: calc(var(--main-h) + 24px); align-self: start; }
.toc__title { font-size: .74rem; text-transform: uppercase; letter-spacing: .15em; font-weight: 700; color: var(--gold-deep); margin-bottom: .9rem; }
.toc__nav { display: flex; flex-direction: column; border-left: 2px solid var(--line); }
.toc__nav a { padding: .5rem .95rem; font-size: .87rem; color: var(--muted); border-left: 2px solid transparent; margin-left: -2px; transition: color .2s, border-color .2s; line-height: 1.35; }
.toc__nav a:hover { color: var(--slate); }
.toc__nav a.active { color: var(--gold-deep); border-left-color: var(--gold); font-weight: 600; }
.toc__cta { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.toc__cta p { font-size: .85rem; color: var(--muted); margin-bottom: .7rem; }
.toc__cta .btn { width: 100%; justify-content: center; font-size: .88rem; padding: .7em 1em; }

/* Share */
.article-share { display: flex; align-items: center; gap: .6rem; margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.article-share__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); margin-right: .2rem; }
.share-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--slate); border: 1px solid var(--line); cursor: pointer; transition: background .25s, color .25s, transform .25s; }
.share-btn:hover { background: var(--gold); color: #fff; border-color: transparent; transform: translateY(-2px); }
.share-btn svg { width: 18px; height: 18px; }
.share-btn.copied::after { content: "Copied!"; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--slate); color: #fff; font-size: .7rem; padding: .3em .6em; border-radius: 6px; white-space: nowrap; }

/* Author byline */
.byline { display: flex; gap: 1.1rem; align-items: center; margin-top: 2rem; padding: 1.3rem 1.4rem; background: var(--cream); border-radius: var(--radius-lg); border: 1px solid var(--line); }
.byline img { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; flex: none; }
.byline__name { font-weight: 700; color: var(--slate); }
.byline__role { font-size: .85rem; color: var(--muted); margin-top: .25rem; line-height: 1.45; }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .toc { position: static; margin-bottom: 1.8rem; padding: 1.1rem 1.3rem; background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius); }
  .toc__nav { border-left: none; }
  .toc__nav a { border-left: none; padding: .42rem 0; margin-left: 0; }
  .toc__nav a.active { border-left: none; }
  .toc__cta { display: none; }
}

/* ---------- Pricing CTA (service pages) ---------- */
.price-cta { display: grid; grid-template-columns: 1fr auto; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow-sm); }
.price-cta h2 { font-size: var(--step-3); }
.price-cta p { color: var(--muted); margin-top: .5rem; }
@media (max-width: 720px) { .price-cta { grid-template-columns: 1fr; text-align: left; } }

/* ---------- Pull-quote cards (reframe) ---------- */

/* ---------- Blog category filter ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.4rem; }
.filter-chip { padding: .5em 1.15em; border-radius: 100px; font-weight: 600; font-size: .85rem; color: var(--muted); background: var(--paper); border: 1px solid var(--line); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.filter-chip:hover { color: var(--slate); border-color: var(--gold); }
.filter-chip.on { background: var(--slate); color: #fff; border-color: transparent; }
.post-card.hide { display: none !important; }
.blog-empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; display: none; }
.blog-empty.show { display: block; }

/* ---------- FAQ finder ---------- */
.faq-tools {
  position: sticky; top: calc(var(--header-h) - 6px); z-index: 20;
  background: hsla(36, 32%, 97%, .93); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.1rem clamp(.9rem, 2vw, 1.4rem) .9rem;
  box-shadow: var(--shadow-sm); margin-bottom: 2.4rem;
}
.faq-search {
  display: flex; align-items: center; gap: .65rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 100px; padding: .1rem .4rem .1rem 1rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.faq-search:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px hsla(41, 45%, 55%, .18); }
.faq-search svg { width: 18px; height: 18px; flex: none; color: var(--gold-deep); }
.faq-search input {
  flex: 1; border: 0; background: none; outline: none;
  font: inherit; font-size: var(--step-0); color: var(--slate);
  padding: .72rem 0;
}
.faq-search input::-webkit-search-cancel-button { display: none; }
.faq-clear {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--cream); color: var(--muted); font-size: 1.15rem; line-height: 1;
  cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease);
}
.faq-clear:hover { background: var(--gold); color: #fff; }
.faq-tools .filter-bar { margin: .9rem 0 0; justify-content: flex-start; }
.faq-tools .filter-chip { font-size: .8rem; padding: .42em .95em; }
.faq-count { margin-top: .7rem; font-size: .8rem; color: var(--muted-2); font-weight: 500; }
.faq-group { scroll-margin-top: 190px; }
.faq-group.hide, .acc.hide { display: none; }
.faq-empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; display: none; }
.faq-empty.show { display: block; }
@media (max-width: 620px) {
  .faq-tools { position: static; }
  .faq-tools .filter-bar { justify-content: center; }
}

/* ---------- Contact booking embed ---------- */
.booking-wrap { max-width: 820px; margin-inline: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.4rem, 3vw, 2.2rem); overflow-x: auto; }
.booking-wrap iframe, .booking-wrap form, .booking-wrap > div { max-width: 100%; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
[data-reveal-stagger].in > * { opacity: 1; transform: none; }

/* honeycomb divider */
.comb-divider { height: 18px; background-image: var(--honeycomb); background-size: 24px 42px; opacity: .5; }

/* ---------- J-B-E-E framework ---------- */
.jbee { text-align: left; padding: 1.4rem 1.4rem 1.4rem 1.5rem; border-left: 2px solid hsla(41,55%,60%,0.35); }
.jbee__l { font-family: var(--font-script); font-size: 3.4rem; line-height: .8; color: var(--gold-bright); display: block; margin-bottom: .4rem; }
.jbee h3 { color: #fff; font-size: var(--step-1); }
.jbee p { color: hsla(38,26%,92%,0.82); margin-top: .5rem; font-size: var(--step--1); line-height: 1.5; }
/* gold callout box */
.callout-gold { background: var(--cream); border: 1.5px solid var(--gold); border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--shadow-gold); }
.callout-gold__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; }
.callout-gold__copy { flex: 1 1 34rem; min-width: 0; }
.callout-gold__copy p { max-width: 62ch; }
.callout-gold__cta { flex: none; }
@media (max-width: 700px) { .callout-gold__cta .btn { width: 100%; justify-content: center; } }
.persona { text-align: left; }
.persona h3 { font-size: var(--step-1); }
/* 3-up persona cards: honeycomb badge, titles normalised so body copy lines up */
.persona-grid .persona { display: flex; flex-direction: column; }
.persona-grid .persona__badge { margin-bottom: .9rem; }
.persona-grid .persona h3 { min-height: 2.3em; display: flex; align-items: flex-end; }
.persona-grid .persona p { color: var(--muted); margin-top: .55rem; }
@media (max-width: 860px) { .persona-grid .persona h3 { min-height: 0; display: block; } }
.persona .p-tag { font-family: var(--font-script); font-size: 1.5rem; color: var(--gold); line-height: 1; display: block; margin-bottom: .3rem; }

/* GovCon: "why different" balanced 2-column numbered reasons */
.reason-grid { column-count: 2; column-gap: 1.5rem; }
.reason { break-inside: avoid; margin: 0 0 1.5rem; display: flex; gap: 1.1rem; align-items: flex-start; }
.reason__n { flex: none; font-family: var(--font-script); font-weight: 700; font-size: 2rem; color: var(--gold-script); line-height: .9; min-width: 1.4ch; }
.reason h3 { font-size: var(--step-0); }
.reason p { color: var(--muted); margin-top: .35rem; font-size: var(--step--1); }
@media (max-width: 760px) { .reason-grid { column-count: 1; } }

/* GovCon: "who we work with" persona cards */
.who-grid { max-width: 940px; margin-inline: auto; }
.who-grid .persona { display: flex; flex-direction: column; }
.persona__top { display: flex; align-items: center; gap: .85rem; margin-bottom: .5rem; }
.persona__top h3 { margin: 0; }
.persona__badge { flex: none; display: grid; place-items: center; width: 46px; height: 53px; background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); color: var(--navy); font-family: var(--font-script); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.persona__fit { margin-top: auto; padding-top: 1.25rem; font-weight: 600; color: var(--gold-deep); font-size: var(--step--1); display: inline-flex; align-items: center; gap: .5em; }
.persona__fit span { transition: transform .3s var(--ease); }
.persona__fit:hover { color: var(--gold); }
.persona__fit:hover span { transform: translateX(4px); }
/* anchor scroll offset under sticky header */
main [id] { scroll-margin-top: 110px; }
/* full-width service tier card */
.tier-full { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(1.6rem, 3vw, 2.6rem); }
.tier-full.featured { border: 1.5px solid var(--gold); box-shadow: var(--shadow-gold); }
.tier-full .split { align-items: start; gap: clamp(1.5rem, 4vw, 3.5rem); }
.relationship { font-family: var(--font-script); font-size: 1.58rem; color: var(--gold-script); line-height: 1.05; }
.grp-label { display: block; margin: 1.1rem 0 .5rem; }
.gain { background: var(--cream); border-radius: 14px; padding: 1.05rem 1.2rem; margin-top: 1.2rem; }

/* ---------- 3-up pricing packages ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.pricing-grid .tier { gap: .28rem; }
.tier__step { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--gold-deep); margin-bottom: .15rem; }
.tier__desc { color: var(--muted); font-size: var(--step--1); margin-top: .5rem; }
.tier__price-note { display: block; font-family: var(--font-sans); font-size: .78rem; font-weight: 500; color: var(--muted-2); letter-spacing: .01em; margin-top: .1rem; }
.tier__cta { margin-top: auto; padding-top: 1.4rem; }
.tier__cta .btn { width: 100%; justify-content: center; }
.pricing-grid .tier .check-list { gap: .5rem; }
.pricing-grid .tier .check-list li { font-size: var(--step--1); padding-left: 1.75rem; }
.pricing-grid .tier .check-list li::before { width: 1.15rem; height: 1.15rem; }
@media (min-width: 981px) {
  .pricing-grid .tier.featured { transform: scale(1.035); z-index: 1; }
  .pricing-grid .tier.featured:hover { transform: scale(1.035) translateY(-6px); }
}
@media (max-width: 980px) { .pricing-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---------- Tabs (pricing) ---------- */
.tabs { display: inline-flex; gap: .3rem; background: var(--cream-deep); padding: .35rem; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--line-2); }
.tab { padding: .7em 1.6em; border-radius: 100px; font-weight: 600; color: var(--muted); transition: background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); white-space: nowrap; }
.tab:hover:not(.on) { color: var(--slate); }
.tab.on { background: var(--slate); color: #fff; box-shadow: var(--shadow-sm); }
.tab-panel { display: none; }
.tab-panel.on { display: block; animation: tabfade .45s var(--ease); }
@keyframes tabfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Reviews summary badge (bigger) ---------- */
.g-badge .g-score { font-size: 1.25rem; font-weight: 700; }
.review-card .r-head { display: flex; align-items: center; justify-content: space-between; }
.review-card .r-g { width: 20px; height: 20px; opacity: .9; }
.review-card .r-text { font-size: 1.02rem; }
.review-card .r-text::before { content: "\201C"; color: var(--gold); font-family: Georgia, serif; font-size: 1.4em; line-height: 0; vertical-align: -0.25em; margin-right: 2px; }
.reviews-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---------- Mobile nav ---------- */
@media (max-width: 1000px) {
  .util-bar { display: none; }
  :root { --header-h: 74px; }
  .nav-toggle { display: inline-flex; flex-direction: column; gap: 5px; width: 46px; height: 46px; align-items: center; justify-content: center; z-index: 1200; border-radius: 12px; }
  .nav-toggle span { width: 24px; height: 2px; background: var(--slate); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s ease; }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav { position: fixed; inset: 0; background: var(--slate); color: var(--cream); flex-direction: column; justify-content: flex-start; align-items: stretch; padding: calc(74px + 1.2rem) var(--gutter) 2.5rem; gap: 0; overflow-y: auto; transform: translateX(100%); transition: transform .45s var(--ease); z-index: 1100; }
  body.nav-open .nav { transform: none; }
  .nav > * { position: relative; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .nav-item { border-bottom: 1px solid hsla(38,26%,92%,0.1); }
  .nav-link { color: #fff; font-size: var(--step-2); padding: .9rem .2rem; justify-content: space-between; }
  .nav-item:hover .nav-link, .nav-link.active { color: var(--gold-bright); }
  .mega { position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto; width: auto; max-width: none; background: transparent; border: none; box-shadow: none; padding: 0 0 .7rem; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
  .mega::before { display: none; }
  .nav-item.open .mega { grid-template-rows: 1fr; }
  .mega > .mega-wrap { overflow: hidden; }
  .nav-item.open .nav-link .chev { transform: rotate(-135deg) translateY(-2px); }
  .mega-split, .mega-2 { grid-template-columns: 1fr; display: grid; }
  .mega-aside, .chips { display: none; }
  /* the Blog accordion hid its post cards, leaving it almost empty on a phone;
     show them as compact rows instead */
  .mega-posts { grid-template-columns: 1fr; gap: .15rem; }
  .mega-post { display: flex; align-items: center; gap: .75rem; background: transparent; border: 0; border-radius: 10px; padding: .45rem .2rem; }
  .mega-post:hover { transform: none; box-shadow: none; background: hsla(38,26%,92%,0.06); }
  .mega-post img { width: 62px; height: 42px; flex: none; border-radius: 8px; aspect-ratio: auto; }
  .mega-post .mp-body { padding: 0; min-width: 0; }
  .mega-post .mp-tag { color: var(--gold-bright); }
  .mega-post .mp-title { color: #fff; }
  .mega-head { border-color: hsla(38,26%,92%,0.14); flex-wrap: wrap; row-gap: .35rem; }
  .mega-head .textlink { white-space: nowrap; }
  .mega-head .eyebrow { line-height: 1.35; }
  .mega-head .eyebrow, .mega-head .textlink { color: var(--gold-bright); }
  .mega-link { padding: .55rem .2rem; }
  .mega-link:hover { background: transparent; }
  .mega-link .mi { background: hsla(38,26%,92%,0.1); color: var(--gold-bright); }
  .mega-link:hover .mi { background: var(--gold); color: #fff; }
  .mega-link .t { color: #fff; }
  .mega-link .d { color: hsla(38,26%,92%,0.66); }
  .mega-feature { border-color: hsla(38,26%,92%,0.14); }
  .mega-feature .mega-link { background: transparent; }
  .mega-cat__label { color: var(--gold-bright); }
  .header-cta { display: none; }
  .nav .header-cta { display: inline-flex; margin-top: 1.4rem; align-self: flex-start; }
  .nav .util-in-drawer { display: block; margin-top: 1.6rem; }
  .util-in-drawer a { display: block; color: hsla(38,26%,92%,0.8); padding: .5rem 0; }

  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 440px; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr !important; }
}
.util-in-drawer { display: none; }

@media (max-width: 560px) {
  .leadmag { grid-template-columns: 1fr; text-align: center; }
  .leadmag__media { order: -1; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--slate); color: hsla(38,26%,92%,0.78); padding-top: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
.site-footer > * { position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: clamp(1.6rem, 3.5vw, 3rem); padding-bottom: 2.5rem; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.site-footer h4 { color: #fff; font-size: var(--step--1); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1rem; }
.site-footer .brand img { height: 40px; margin-bottom: 1.1rem; }
.site-footer p { color: hsla(38,26%,92%,0.72); }
.footer-nav li + li, .footer-contact li + li { margin-top: .6rem; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold-bright); }
.social { display: flex; gap: .6rem; margin-top: 1.1rem; }
.social a { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: hsla(38,26%,92%,0.08); transition: background .3s ease, transform .3s ease; }
.social a:hover { background: var(--gold); transform: translateY(-3px); }
.social svg { width: 19px; height: 19px; }
.footer-bottom { border-top: 1px solid hsla(38,26%,92%,0.12); padding: 1.4rem 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: var(--step--1); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}

/* ---------- Breadcrumbs (rendered by site.js from each page's BreadcrumbList) ---------- */
.breadcrumb { margin-bottom: clamp(0.9rem, 2vw, 1.4rem); }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.5rem;
  font-size: var(--step--1); color: var(--muted-2);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.breadcrumb li + li::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .5;
}
.breadcrumb a { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s var(--ease), border-color .25s var(--ease); }
.breadcrumb a:hover { color: var(--gold-deep); border-bottom-color: var(--gold); }
.breadcrumb__here span {
  color: var(--muted); display: inline-block; max-width: 42ch;
  /* overflow: hidden;  */
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.article-hero__inner .breadcrumb ol { justify-content: center; }
.bg-slate .breadcrumb, .bg-navy .breadcrumb { color: hsla(40,30%,96%,.72); }
.bg-slate .breadcrumb a, .bg-navy .breadcrumb a { color: hsla(40,30%,96%,.82); }
@media (max-width: 640px) {
  .breadcrumb__here span { max-width: 24ch; }
}

/* ---------- Key takeaways (article summary block) ---------- */
.takeaways {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 clamp(1.8rem, 3.5vw, 2.6rem);
  padding: clamp(1.3rem, 2.6vw, 1.9rem) clamp(1.3rem, 2.8vw, 2rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  position: relative;
}
.takeaways::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background-image: var(--honeycomb); background-size: 69px 120px; opacity: .4;
  -webkit-mask-image: radial-gradient(80% 120% at 100% 0%, #000, transparent 62%);
  mask-image: radial-gradient(80% 120% at 100% 0%, #000, transparent 62%);
}
.takeaways > * { position: relative; z-index: 1; }
.takeaways h2 {
  font-size: var(--step--1) !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep);
  margin: 0 0 .9rem !important;
  padding: 0 !important;
  border: 0 !important;
}
.takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.takeaways li {
  position: relative;
  padding-left: 1.75rem;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
}
.takeaways li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 11px; height: 11px;
  background: var(--gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.takeaways strong { color: var(--slate); font-weight: 700; }

/* =========================================================
   Mobile nav fixes
   The drawer background is var(--slate). Three things were
   painted in var(--slate) on top of it and became invisible:
   the close (X) bars, the header CTA, and (behind it) the logo.
   Fix: keep the header bar above the drawer on a solid cream
   background, and give the drawer CTA the gold treatment.
   ========================================================= */
@media (max-width: 1000px) {
  /* header bar stays visible and tappable above the open drawer */
  body.nav-open .header-main::before {
    opacity: 1;
    background: var(--cream);
    border-bottom-color: var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body.nav-open .brand { z-index: 1200; }

  /* drawer starts below the header instead of covering it */
  .nav { top: var(--header-h); padding-top: 1.35rem; }

  /* the X bars were slate-on-slate; on the cream bar they read correctly */
  body.nav-open .nav-toggle span { background: var(--slate); }

  /* .btn defaults to --btn-bg: var(--slate): invisible on the slate drawer */
  .nav .header-cta {
    --btn-bg: var(--gold);
    --btn-fg: #231803;
    align-self: stretch;
    justify-content: center;
    margin-top: 1.5rem;
  }
  .nav .header-cta::after { background: #fff; }
  .nav .header-cta:hover { color: var(--slate); }

  /* stop the page behind the drawer from scrolling */
  body.nav-open { overflow: hidden; }
}

/* The desktop dropdown rules (.nav-item.has-mega.open .mega, 4 classes) out-specify
   the mobile `.mega { transform: none }` (1 class), so the accordion panel kept the
   desktop `translate(-50%)` and slid off the left edge. Re-assert at equal weight. */
@media (max-width: 1000px) {
  .nav-item.has-mega .mega,
  .nav-item.has-mega:hover .mega,
  .nav-item.has-mega.open .mega,
  .nav-item.align-right .mega,
  .nav-item.align-right:hover .mega,
  .nav-item.align-right.open .mega {
    transform: none;
    left: auto;
    right: auto;
    width: auto;
    max-width: none;
  }
}

/* =========================================================
   Mobile tap targets
   Footer links rendered 19px tall, well under the 44px
   minimum, and on a phone the footer is a primary nav.
   ========================================================= */
@media (max-width: 1000px) {
  .footer-nav li + li { margin-top: 0; }
  .footer-nav a {
    display: flex; align-items: center;
    min-height: 44px;
  }
  .footer-contact li + li { margin-top: .25rem; }
  .footer-contact a {
    display: inline-flex; align-items: center;
    min-height: 44px;
  }
  .social a { width: 44px; height: 44px; }

  /* "Read Bio" was 89x23 */
  .read-bio { min-height: 44px; padding-block: .5rem; }

  /* modal close was 39x39 */
  .bio-modal__close { width: 44px; height: 44px; }

  /* micro-labels in the drawer were ~10.6px */
  .mega-post .mp-tag { font-size: .72rem; }
}

@media (max-width: 1000px) {
  /* FAQ category chips were 35px tall */
  .filter-chip { min-height: 44px; }

  /* standalone "Learn more" / "Book a call" text CTAs were ~23-27px */
  .textlink { padding-block: .45rem; }

  /* footer legal + article back-link */
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .article-back a, a.article-back { display: inline-flex; align-items: center; min-height: 44px; }

  /* logo anchor matched the image height (34px) rather than the header bar */
  .brand { min-height: 44px; }
}

/* Contact card details, was an inline 1fr 1fr grid, which broke the email
   address mid-word at phone widths. */
.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem 1.6rem;
  margin-top: 1.4rem;
}
@media (max-width: 560px) {
  .contact-info-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* --- contact page, open layout ----------------------------
   The details used to sit in a dark rounded panel beside a
   bordered form box: two boxes side by side. Now both columns
   sit directly on the section, split by a hairline, with the
   details as a ruled list anchored by hex icons and the map
   given the site's chamfered corners.
   ---------------------------------------------------------- */
/* The GHL form drops to a single column when its iframe is narrower than
   ~650px, so the form column gets the larger share (~710px at full width)
   and the split stacks before the form column would fall below that. */
.contact-split {
  align-items: start;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
}
.contact-list {
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
}
.contact-list li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding-block: .95rem;
  border-top: 1px solid var(--line);
}
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list .hex-icon { width: 46px; height: 51px; margin: 0; }
.contact-list .hex-icon svg { width: 21px; height: 21px; }
.contact-list li:hover .hex-icon {
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--navy);
}
.contact-list__label {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.contact-list p { margin-top: .15rem; color: var(--slate); }

.contact-map {
  --map-cut: clamp(26px, 4vw, 40px);
  margin-top: 1.8rem;
  /* chamfer only the corners Google leaves empty: "Open in Maps" sits
     top-left and the zoom controls bottom-right */
  clip-path: polygon(
    0 0, calc(100% - var(--map-cut)) 0, 100% var(--map-cut),
    100% 100%, var(--map-cut) 100%, 0 calc(100% - var(--map-cut))
  );
  filter: saturate(.85);
}
.contact-map iframe { display: block; border: 0; height: 200px; }

@media (min-width: 1181px) {
  .contact-split { position: relative; }
  /* hairline between the columns, centred in the gap */
  .contact-split::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(4 / 11 * (100% - clamp(2rem, 5vw, 4rem)) + clamp(2rem, 5vw, 4rem) / 2);
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--line) 12%, var(--line) 88%, transparent);
  }
}
@media (max-width: 1180px) {
  .contact-split { grid-template-columns: 1fr; }
}

/* --- contact FAQ, open layout ------------------------------
   Intro on the left, questions on the right as a numbered,
   ruled list instead of a stack of bordered pills. The +/-
   sits in a small hex cell that fills gold when open.
   ---------------------------------------------------------- */
.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 1001px) {
  .faq-split__intro { position: sticky; top: 120px; }
}
.faq-split__links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.6rem;
  margin-top: .6rem;
}

.accordion--open { gap: 0; counter-reset: faq; }
.accordion--open .acc {
  counter-increment: faq;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.accordion--open .acc:last-child { border-bottom: 1px solid var(--line); }
.accordion--open .acc.open { box-shadow: none; }
.accordion--open .acc__head {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.35rem 0;
  font-size: var(--step-1);
  line-height: 1.3;
  transition: color .3s ease;
}
.accordion--open .acc__head::before {
  content: counter(faq, decimal-leading-zero);
  font-family: var(--font-script);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold-script);
}
.accordion--open .acc__head:hover,
.accordion--open .acc.open .acc__head { color: var(--navy); }

/* hex cell around the +/- */
.accordion--open .acc__head .sign {
  width: 36px;
  height: 40px;
  clip-path: var(--hex);
  background: hsla(41, 62%, 58%, 0.2);
  transition: background .35s var(--ease);
}
.accordion--open .acc__head .sign::before { top: 19px; left: 11px; width: 14px; }
.accordion--open .acc__head .sign::after  { top: 13px; left: 17px; height: 14px; }
.accordion--open .acc__head .sign::before,
.accordion--open .acc__head .sign::after { background: var(--gold-deep); }
.accordion--open .acc__head:hover .sign { background: hsla(41, 62%, 58%, 0.36); }
.accordion--open .acc.open .sign {
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
}
.accordion--open .acc.open .sign::before { background: var(--navy); }

/* answer lines up under the question text, not the number */
.accordion--open .acc__inner {
  padding: 0 3.4rem 1.5rem 3.6rem;
  font-size: var(--step-0);
  line-height: 1.6;
}

@media (max-width: 1000px) {
  .faq-split { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .accordion--open .acc__head {
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    gap: .75rem;
    font-size: var(--step-0);
    padding: 1.1rem 0;
  }
  .accordion--open .acc__head::before { font-size: 1.4rem; }
  .accordion--open .acc__inner { padding: 0 0 1.25rem 2.75rem; }
}
/* =========================================================
   HEXAGON DESIGN LANGUAGE  (client direction, rev 13)
   Move away from blocky rectangles toward a honeycomb motif.
   ========================================================= */

/* --- shared hex geometry --------------------------------- */
:root {
  --hex: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  /* flat-top hex reads better for wide media */
  --hex-flat: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* --- tilted honeycomb photo frame ------------------------ */
/* The clip lives on the WRAPPER so the hexagon itself rotates;
   the <img> counter-rotates so the subject stays upright. */
.hexframe {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  /* flat-top hex: the source photo is landscape, and a pointy top apex
     clipped Bee's head. A regular flat-top hex is 2:sqrt(3) = 1.155:1. */
  aspect-ratio: 1.155 / 1;
  transform: rotate(-7deg);
}
.hexframe__shape {
  position: absolute;
  inset: 0;
  clip-path: var(--hex-flat);
  overflow: hidden;
  background: var(--cream-deep);
}
.hexframe__shape img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hero-hex.webp is pre-cropped to 1.155:1 and centred on Bee, so plain
     cover is exact. scale 1.15 covers the corners a 7deg rotation exposes. */
  object-position: center;
  transform: rotate(7deg) scale(1.15);
  transform-origin: 50% 50%;
}
/* gold outline echo, offset behind: gives depth without a box */
.hexframe::before {
  content: "";
  position: absolute;
  inset: -18px -18px 18px 18px;
  clip-path: var(--hex-flat);
  background: linear-gradient(150deg, var(--gold-bright), var(--gold) 45%, var(--gold-deep));
  opacity: .34;
  z-index: -1;
}
/* small solid hex accent, bottom-left */
.hexframe__dot {
  position: absolute;
  width: 82px; height: 71px;
  left: -30px; bottom: 2%;
  clip-path: var(--hex-flat);
  background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep));
  transform: rotate(7deg);
  box-shadow: var(--shadow-gold);
}

/* --- split hero (replaces the overlaid full-photo banner) -- */
.hero--split { padding-bottom: clamp(3rem, 6vw, 5.5rem); }
.hero--split .hero__grid { grid-template-columns: 1.02fr 0.98fr; align-items: center; }
.hero--split .hero__copy { max-width: 36rem; }
.hero--split h1 { font-size: clamp(2.3rem, 1.75rem + 2.2vw, 3.5rem); }
.hero--split .hero__media { display: flex; justify-content: center; }

@media (max-width: 900px) {
  .hero--split .hero__grid { grid-template-columns: 1fr; gap: clamp(2.5rem, 7vw, 3.5rem); }
  .hero--split .hero__media { order: -1; }
  .hexframe { max-width: 380px; transform: rotate(-6deg); }
  .hexframe__dot { width: 60px; height: 52px; left: -20px; }
}
@media (max-width: 480px) {
  .hexframe { max-width: 290px; }
}

/* --- chamfered (hex-derived) cards ------------------------ */
/* Two opposing corners cut at the hexagon's angle instead of a uniform radius.
   clip-path would clip a box-shadow, so definition comes from drop-shadow,
   which follows the clipped silhouette. */
:root { --chamfer: 20px; }
.card {
  border-radius: 0;
  border: 0;
  box-shadow: none;
  clip-path: polygon(
    var(--chamfer) 0, 100% 0,
    100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
    0 100%, 0 var(--chamfer)
  );
  filter: drop-shadow(0 5px 18px rgba(24, 40, 50, 0.13));
}
.card:hover {
  box-shadow: none;
  filter: drop-shadow(0 18px 34px rgba(24, 40, 50, 0.19));
}
@media (max-width: 560px) { :root { --chamfer: 14px; } }

/* ---------- Thank-you confirmation mark ---------- */
.ty-mark {
  display: grid;
  place-items: center;
  width: 66px;
  height: 74px;
  margin-bottom: 1.25rem;
  clip-path: var(--hex);
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--navy);
  box-shadow: var(--shadow-gold);
}
.ty-mark svg { width: 30px; height: 30px; }
.bg-slate .ty-mark, .bg-navy .ty-mark { color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .ty-mark { animation: ty-pop .55s var(--ease) both; }
  @keyframes ty-pop {
    from { opacity: 0; transform: scale(.72) rotate(-12deg); }
    to   { opacity: 1; transform: none; }
  }
}
@media (max-width: 560px) {
  .ty-mark { width: 56px; height: 63px; }
  .ty-mark svg { width: 25px; height: 25px; }
}

/* =========================================================
   Button rows
   Replaces the inline `display:flex;gap:1rem;flex-wrap:wrap`
   that was repeated across 18 files. On a phone a stacked
   pair shrink-wrapped to its own label, so the edges came out
   ragged; below 560px they go full width and line up.
   ========================================================= */
.btn-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.btn-row--center { justify-content: center; }
.btn-row--tight { gap: .8rem; }

@media (max-width: 560px) {
  .btn-row,
  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .btn-row .btn,
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* The lead-magnet promo column is narrow enough that its two CTAs stack at
   every width, so stretch them to match instead of leaving ragged edges. */
.leadmag .btn-row { flex-direction: column; align-items: stretch; }
.leadmag .btn-row .btn { width: 100%; justify-content: center; }

/* ---------- Third-party form embed (GoHighLevel) ---------- */
/* The GHL script resizes the iframe to its content height via postMessage,
   so the wrapper must not constrain or clip it. */
.form-embed {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
/* The iframe carries its own inline height (GHL's data-height) and the embed
   script adjusts it, so the wrapper must not add a floor of its own or the
   form ends up with dead space under it. This is just anti-collapse. */
.form-embed iframe {
  display: block;
  width: 100%;
  min-height: 300px;
  border: 0;
}

/* =========================================================
   BEES  (rev 18)
   The old hero decoration was a dashed trail with an arrowhead
   pointing off-canvas at the left edge, half clipped. Replaced
   with a self-contained flight path that stays in frame and has
   a bee actually flying it. All motion is reduced-motion guarded.
   ========================================================= */

/* --- the bee mark (gold body, navy stripes, from the token) --- */
.bee {
  position: absolute;
  width: 26px;
  height: 26px;
  background-image: var(--bee);
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
  opacity: .9;
}

/* --- hero flight trail --------------------------------------- */
.bee-trail {
  position: absolute;
  width: 320px;
  height: 220px;
  pointer-events: none;
  z-index: 1;
}
.bee-trail svg { width: 100%; height: 100%; overflow: visible; }
.bee-trail path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 9;
  opacity: .5;
}

/* the bee rides the same path the trail draws */
.bee-trail .bee {
  top: 0;
  left: 0;
  margin: -13px 0 0 -13px;
  offset-path: path("M6,190 C70,180 110,132 150,98 C178,74 168,32 140,36 C114,40 120,86 158,98 C212,116 262,80 314,22");
  offset-rotate: auto 12deg;
  offset-distance: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  /* trail draws itself once */
  .bee-trail path {
    stroke-dashoffset: 320;
    animation: trail-draw 2.6s var(--ease) .35s both;
  }
  /* bee flies it, then settles at the end and breathes */
  .bee-trail .bee {
    animation: bee-fly 2.9s cubic-bezier(.45,.05,.35,1) .2s both,
               bee-hover 3.4s ease-in-out 3.3s infinite;
  }
  @keyframes trail-draw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
  @keyframes bee-fly {
    from { offset-distance: 0%; opacity: 0; }
    8%   { opacity: .9; }
    to   { offset-distance: 100%; opacity: .9; }
  }
  @keyframes bee-hover {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(3px, -6px); }
  }

  /* the static hex decorations get a slow drift so they feel alive */
  .hex-float { animation: hex-drift 11s ease-in-out infinite; }
  .hex-float:nth-of-type(even) { animation-duration: 14s; animation-delay: -4s; }
  @keyframes hex-drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(0, -12px) rotate(2.5deg); }
  }

  /* idle bee: gentle bob only */
  .bee--idle { animation: bee-bob 4.2s ease-in-out infinite; }
  @keyframes bee-bob {
    0%, 100% { transform: translate(0, 0) rotate(-4deg); }
    50%      { transform: translate(4px, -7px) rotate(3deg); }
  }
}

/* Hero placement: the cream pocket left by the hexagon's angled top-left edge,
   so the trail reads as leading the eye toward Bee rather than floating loose. */
.hero--split .bee-trail { top: 21%; left: 48.5%; width: 250px; height: 175px; }
@media (max-width: 1200px) { .hero--split .bee-trail { left: 44%; width: 210px; height: 148px; } }
/* below the split breakpoint the hero stacks and there is no gap to fill */
@media (max-width: 900px)  { .hero--split .bee-trail { display: none; } }

/* Section-heading bee */
.bee--idle { width: 30px; height: 30px; }
@media (max-width: 700px) { .bee--idle { display: none; } }

/* =========================================================
   NO BOXES  (client direction, rev 19)
   Cards become plain content blocks: no background, border,
   shadow, chamfer or inner texture. Content and spacing stay.
   ========================================================= */
.card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  filter: none;
  padding: 0;
  overflow: visible;
}
.card:hover {
  transform: none;
  box-shadow: none;
  filter: none;
  border-color: transparent;
}
/* the honeycomb texture that lived inside the card box */
.card::after { display: none; }

/* Explicit filled panels are kept: they exist where a block genuinely needs
   contrast against its section (e.g. the dark contact details panel on a
   light section). They keep their padding and radius. */
.card.bg-slate, .card.bg-navy, .card.bg-cream, .card.bg-paper {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border-radius: var(--radius-lg);
}
/* ...but a dark card inside an already-dark section is just a box for its own
   sake, so it loses the fill too. */
.bg-slate .card.bg-slate, .bg-slate .card.bg-navy,
.bg-navy .card.bg-slate,  .bg-navy .card.bg-navy {
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Pull quotes: keep the gold quote mark, drop the panel around it. */
  background: transparent;
  border: 0;
  border-top: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* =========================================================
   PRINCIPLES  (rev 20)
   Replaces the three pull-quote cards in the "reframe" sections.
   Once the boxes came off, three ragged columns of bold text had
   nothing holding them together. Stacked as a centered manifesto:
   hex marker, hairline rules, one strong measure.
   ========================================================= */
.principles {
  list-style: none;
  margin: clamp(1.8rem, 3.6vw, 2.6rem) auto 0;
  padding: 0;
  max-width: 58ch;
  text-align: left;
}
.principles li {
  display: flex;
  align-items: flex-start;
  gap: clamp(.85rem, 1.8vw, 1.15rem);
  padding-block: clamp(.95rem, 2.1vw, 1.4rem);
  border-top: 1px solid var(--line);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.28;
  color: var(--slate);
  letter-spacing: -0.005em;
  /* keeps a two-line statement from breaking as 5 words + 1 orphan */
  text-wrap: balance;
}
.principles li:last-child { border-bottom: 1px solid var(--line); }
/* hexagon marker, aligned to the first line rather than the block centre */
.principles li::before {
  content: "";
  flex: none;
  width: 15px;
  height: 17px;
  margin-top: .38em;
  clip-path: var(--hex);
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
}
/* the emphasis word keeps the brand script treatment */
.principles li strong {
  font-family: var(--font-script);
  color: var(--gold-script);
  font-weight: 700;
  font-size: 1.15em;
}
/* light text if a reframe section is ever placed on a dark background */
.bg-slate .principles li, .bg-navy .principles li { color: #fff; border-color: hsla(38,26%,92%,0.16); }

@media (max-width: 560px) {
  .principles li { font-size: var(--step-1); }
  .principles li::before { width: 13px; height: 15px; }
}

/* Reassurance points sitting under the registration form */
.register-points {
  max-width: 640px;
  margin: clamp(1.3rem, 2.6vw, 1.8rem) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem 1.6rem;
}
.bg-navy .register-points li, .bg-slate .register-points li { color: hsla(34,20%,92%,.88); }
.register-points li { font-size: var(--step--1); }
@media (max-width: 620px) {
  .register-points { grid-template-columns: 1fr; }
}

/* Team grid: 3 members read better constrained than stretched across the full container */
.team-grid { max-width: 940px; margin-inline: auto; }

/* =========================================================
   REFRAME  (rev 21)
   Was a centred stack: the statements sat under a centred
   heading with hairline rules running the full container,
   which left the type stranded in the middle. Now an
   asymmetric editorial split: the argument on the left,
   the three truths stacked on the right.
   ========================================================= */
.reframe {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
.reframe__intro { max-width: 32rem; }
/* stops the script-emphasis phrase orphaning its last word onto a third line */
.reframe__intro h2 { text-wrap: balance; }
.reframe__intro .lead { color: var(--muted); }

/* the three statements, scoped to their column so the rules stop
   stretching across dead space */
.reframe .principles {
  max-width: none;
  margin: 0;
}
.reframe .principles li {
  padding-block: clamp(1.05rem, 2.3vw, 1.55rem);
}
.reframe .principles li:first-child { border-top: 0; padding-top: 0; }
.reframe .principles li:last-child { border-bottom: 0; padding-bottom: 0; }

/* a hairline that ties the two columns together without a box */
.reframe__close {
  max-width: 64ch;
  margin: clamp(2.2rem, 4.5vw, 3.2rem) auto 0;
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: var(--step-1);
  color: var(--muted);
  text-wrap: balance;
}
.reframe__close strong {
  font-family: var(--font-sans);
  color: var(--gold-deep);
  font-weight: 700;
}
.bg-slate .reframe__close, .bg-navy .reframe__close { border-color: hsla(38,26%,92%,0.16); }

@media (max-width: 900px) {
  .reframe { grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 2.4rem); }
  .reframe__intro { max-width: none; }
}

/* Form sitting inside an existing card: drop the wrapper's own panel so the
   card border isn't doubled up. */
.form-embed--bare {
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* =========================================================
   FEATURE ITEMS with HEX ICONS  (rev 22)
   Once the boxes came off, the 4-up "believe" / "how we help"
   grids were bare heading+paragraph columns with no anchor.
   A tinted hexagon carrying a line icon gives each item a
   visual entry point and pulls the honeycomb motif into the
   content, without reintroducing a panel.
   ========================================================= */
.hex-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 62px;
  flex: none;
  margin-bottom: 1.05rem;
  clip-path: var(--hex);
  background: linear-gradient(155deg, hsla(41, 62%, 58%, 0.26) 0%, hsla(41, 48%, 42%, 0.15) 100%);
  color: var(--gold-deep);
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.hex-icon svg { width: 26px; height: 26px; }

.feature h3 { font-size: var(--step-1); line-height: 1.25; }
.feature p { color: var(--muted); margin-top: .5rem; }

/* the whole column responds, so the icon reads as part of the item */
.feature:hover .hex-icon {
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--navy);
  transform: translateY(-4px);
}

/* dark sections */
.bg-slate .hex-icon, .bg-navy .hex-icon {
  background: hsla(38, 26%, 92%, 0.10);
  color: var(--gold-bright);
}
.bg-slate .feature p, .bg-navy .feature p { color: hsla(38, 26%, 92%, 0.78); }

@media (max-width: 560px) {
  .hex-icon { width: 48px; height: 53px; margin-bottom: .85rem; }
  .hex-icon svg { width: 22px; height: 22px; }
}

/* The right-aligned mega (Blog) anchored to its nav item, so an 820px panel
   hanging off an item near the middle of the bar ran off the left edge of the
   viewport (-124px at 1100w). Releasing the item as the containing block makes
   it anchor to .header-main__inner instead, which always fits. */
@media (min-width: 1001px) {
  .nav-item.align-right { position: static; }
}

/* =========================================================
   SERVICE ROWS  (rev 23)
   "How we help" sat directly under "What we believe" as a
   second identical 4-up icon grid. These are the concrete
   offerings, so they get a different rhythm: a 2x2 of
   horizontal rows, icon beside the text, ruled like a menu.
   ========================================================= */
.services-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4.5vw, 3.75rem);
}
.service-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.35rem);
  padding-block: clamp(1.35rem, 2.6vw, 1.9rem);
  border-top: 1px solid var(--line);
}
.service-row__body { min-width: 0; }
.service-row h3 {
  font-size: var(--step-1);
  line-height: 1.25;
  text-wrap: balance;
}
.service-row p {
  color: var(--muted);
  margin-top: .45rem;
}
/* the icon is the row's anchor, so it sits with the title rather than centred */
.service-row .hex-icon {
  width: 52px;
  height: 58px;
  margin-bottom: 0;
  margin-top: .12em;
}
.service-row .hex-icon svg { width: 24px; height: 24px; }
.service-row:hover .hex-icon {
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--navy);
  transform: translateY(-3px);
}

@media (max-width: 760px) {
  .services-list { grid-template-columns: 1fr; }
  .service-row { padding-block: clamp(1.1rem, 4vw, 1.5rem); }
}

/* =========================================================
   LEAD MAGNET, full-bleed variant  (rev 24)
   The boxed panel stays for the inline promo inside articles.
   On the home / GovCon pages the band now runs edge to edge:
   the dark colour and honeycomb move up to the section, and
   the panel itself becomes a plain grid inside .container.
   ========================================================= */
.leadmag--full {
  background: transparent;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.leadmag--full::after { display: none; }   /* .honey on the section provides it */
.leadmag--full h2, .leadmag--full h3 { color: #fff; }

/* a touch more breathing room now that the panel padding is gone */
.section.leadmag-band { padding-block: clamp(3.2rem, 6vw, 5.5rem); }

@media (max-width: 560px) {
  /* the shared .leadmag centres its text on small screens, which leaves the
     4-item check-list with ragged check icons. The full-bleed band reads
     better left-aligned; the boxed article promo keeps centring. */
  .leadmag--full { text-align: left; }
  .leadmag--full .check-list { margin-inline: 0; }
}

/* =========================================================
   PERSONAS  (rev 26)
   These are diagnostic profiles ("which one are you?"), so the
   numeral is promoted to a real graphic anchor: an OUTLINED
   hexagon rather than the small filled chip, the two columns
   are split by a vertical hairline (no other section uses one),
   and the "where you start" link becomes a proper pill so the
   route out of the section is unmistakable.
   ========================================================= */
.persona__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 72px;
  flex: none;
  background: none;
  clip-path: none;
  color: var(--gold-deep);
  transition: transform .45s var(--ease);
}
.persona__badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  opacity: .8;
}
.persona__badge i {
  position: relative;
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gold-deep);
}
.persona:hover .persona__badge { transform: translateY(-3px); }
.persona:hover .persona__badge svg { opacity: 1; }
.persona__top { gap: 1rem; }

/* the two GovCon profiles read as a pair, divided rather than stacked */
@media (min-width: 861px) {
  .who-grid .persona + .persona {
    border-left: 1px solid var(--line);
    padding-left: clamp(2rem, 4vw, 3.5rem);
  }
}

/* the route out of the section, promoted from a bare arrow link */
.persona__fit {
  align-self: flex-start;
  padding: .72em 1.25em;
  border: 1.5px solid var(--gold);
  border-radius: 100px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.persona__fit:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}

/* dark sections */
.bg-slate .persona__badge i, .bg-navy .persona__badge i { color: var(--gold-bright); }
.bg-slate .who-grid .persona + .persona,
.bg-navy .who-grid .persona + .persona { border-left-color: hsla(38,26%,92%,0.16); }

@media (max-width: 560px) {
  .persona__badge { width: 54px; height: 61px; }
  .persona__badge i { font-size: 1.45rem; }
}

/* Standalone note callout: label left, body right.
   The global `p { max-width: 66ch }` is a good readability default, but inside a
   full-width callout it left ~350px empty. Splitting the label off uses the
   width without stretching the line length. */
.callout-note {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(.9rem, 3vw, 2.5rem);
  align-items: start;
}
.callout-note p { max-width: none; margin-top: 0; }
@media (max-width: 760px) {
  .callout-note { grid-template-columns: 1fr; gap: .5rem; }
}

/* Compact header CTA label on phones (see data-cta-short in site.js) */
.header-cta .cta-short { display: none; }
@media (max-width: 560px) {
  .header-cta .cta-long { display: none; }
  .header-cta .cta-short { display: inline; }
  .site-header.minimal .header-cta { white-space: nowrap; }
}

/* =========================================================
   HEX CELLS  (rev 29)
   The three reframe statements set inside interlocking
   honeycomb cells. Flat-top hexagons are used because their
   wide middle band is the only part that holds text well;
   pointy-top wastes the usable area on the apexes.
   ========================================================= */
.hexcells {
  --hexw: clamp(148px, 17vw, 205px);
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* clip-path crops box-shadow off the cells, so the shadow is cast by the
     parent instead: drop-shadow traces the clipped hexagon silhouettes. */
  filter: drop-shadow(0 14px 18px hsla(203, 30%, 21%, 0.26))
          drop-shadow(0 3px 5px hsla(203, 30%, 21%, 0.16));
}
.hexcells li {
  flex: 0 0 auto;
  width: var(--hexw);
  aspect-ratio: 1.155 / 1;
  clip-path: var(--hex-flat);
  display: grid;
  place-items: center;
  /* text only fits in the wide middle band, so keep the inset modest */
  padding: 0 9%;
  text-align: center;
  font-size: clamp(.82rem, .62rem + .42vw, .97rem);
  font-weight: 600;
  line-height: 1.28;
  color: var(--slate);
  text-wrap: balance;
  position: relative;
  isolation: isolate;
  /* A `border` is cropped away by clip-path, so the element background acts as
     the ring and ::before (inset by the ring width, same clip) is the fill. */
  background: hsla(41, 52%, 45%, 0.72);
  transition: background .45s var(--ease), color .45s var(--ease);
}
.hexcells li::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: var(--hex-flat);
  background: linear-gradient(155deg, rgb(236, 222, 191) 0%, rgb(234, 227, 213) 100%);
  transition: background .45s var(--ease);
}
/* Interlock. Flat-top hexes tessellate at a column pitch of 0.75w, i.e. a
   -25% overlap; anything less leaves them floating apart rather than packed. */
/* NB: a percentage margin resolves against the CONTAINER width, not the
   element's own width, so -25% overlapped wildly. Use the cell variable. */
.hexcells li + li { margin-left: calc(var(--hexw) * -0.25 + .5rem); }
.hexcells li:nth-child(even) { margin-top: calc(var(--hexw) / 1.155 / 2); }

.hexcells li:hover { background: var(--gold-deep); color: var(--navy); }
.hexcells li:hover::before {
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
}

/* dark sections */
.bg-slate .hexcells li, .bg-navy .hexcells li {
  background: hsla(41, 55%, 62%, 0.45);
  color: #fff;
}
.bg-slate .hexcells li::before, .bg-navy .hexcells li::before {
  background: hsla(203, 30%, 21%, 0.97);
}

/* --- mobile: plain list, not hexagons  (rev 33) -----------
   A stacked hexagon needs roughly 320px of width before its
   text sits in the wide middle band, and at that width three
   of them run past the fold: a two-line reframe turns into a
   scroll. On phones the statements become an ordinary list.
   The honeycomb motif survives as the small gold cell marker,
   which is the same one the eyebrow labels use.
   ---------------------------------------------------------- */
@media (max-width: 820px) {
  .hexcells {
    display: block;
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
    filter: none;
  }
  .hexcells li {
    width: auto;
    aspect-ratio: auto;
    clip-path: none;
    background: none;
    isolation: auto;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 0;
    text-align: left;
    text-wrap: pretty;
    font-size: var(--step-0);
    line-height: 1.45;
  }
  .hexcells li + li {
    margin: 0;
    border-top: 1px solid var(--line);
  }
  .hexcells li:nth-child(even) { margin-top: 0; }
  /* the fill layer has no cell to fill any more, so it becomes the marker */
  .hexcells li::before {
    position: static;
    inset: auto;
    z-index: auto;
    width: 10px;
    height: 11px;
    flex: none;
    margin-top: .4em;
    clip-path: var(--hex);
    background: var(--gold);
  }
  /* a tap leaves :hover stuck on touch, so the gold fill must not come back */
  .hexcells li:hover { background: none; color: var(--slate); }
  .hexcells li:hover::before { background: var(--gold); }

  .bg-slate .hexcells li, .bg-navy .hexcells li { background: none; color: #fff; }
  .bg-slate .hexcells li + li,
  .bg-navy .hexcells li + li { border-top-color: hsla(0, 0%, 100%, .15); }
  .bg-slate .hexcells li::before,
  .bg-navy .hexcells li::before,
  .bg-slate .hexcells li:hover::before,
  .bg-navy .hexcells li:hover::before { background: var(--gold-bright); }
}

/* the packed cluster sits beside the heading, so the section stays compact */
.reframe .hexcells { justify-self: center; }
@media (max-width: 900px) {
  .reframe .hexcells { margin-top: .5rem; }
}

/* =========================================================
   HEADER CTA sizing  (rev 30)
   It inherited the page-button scale: same font-size as the
   nav links plus full button padding, giving a 58px pill in a
   74px bar, and at 1024w it wrapped to 86px and overflowed the
   header entirely. A header CTA should sit below the nav-link
   size and never wrap.
   ========================================================= */
@media (min-width: 1001px) {
  .header-cta {
    font-size: var(--step--1);
    padding: .74em 1.35em;
    white-space: nowrap;
  }
}
/* the minimal header (conversion pages) uses the same compact scale */
.site-header.minimal .header-cta { white-space: nowrap; }
@media (min-width: 561px) {
  .site-header.minimal .header-cta { font-size: var(--step--1); padding: .78em 1.45em; }
}

/* =========================================================
   STATIC HONEYCOMB FIELD  (rev 32)
   The ambient hexagons used to ride along with each section,
   so the pattern restarted at every section boundary. Pinning
   the tile to the viewport instead turns it into one continuous
   lattice that the page scrolls over, and the section masks
   become moving windows onto it.

   Only section-scale layers are pinned. The small decorative
   accents (card corners, step cells, dividers, the mega-menu
   aside) stay attached, because a viewport-locked tile inside a
   96px badge just reads as a random crop.

   Tile sizes are unified here on purpose: a shared 81x140 grid
   is what makes the lattice line up across section boundaries.

   TO ROLL BACK: delete this whole block. Nothing above it
   changed.
   ========================================================= */
@media (pointer: fine) {
  .hero::before,
  .page-hero::before,
  .honey::before,
  .leadmag::after {
    background-attachment: fixed;
    background-size: 81px 140px;
    background-position: center top;
  }
}

/* =========================================================
   LEGAL PAGES + FOOTER LEGAL LINKS  (rev 34)
   ========================================================= */
.footer-legal { display: inline-flex; align-items: center; gap: .75rem; }
.footer-legal .sep { opacity: .38; }

/* A legal page runs to 25 headings. The article h2 scale tops out at
   2.35rem, which turns that into a wall of display type, so step it down
   and let a hairline rule do the separating instead of size. */
.article--legal h2 {
  font-size: var(--step-1);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.article--legal h3 { font-size: var(--step-0); margin-top: 1.8rem; }
.article--legal p, .article--legal ul { font-size: var(--step-0); }
.article--legal > .lead { font-size: 1.1rem; color: var(--slate); line-height: 1.6; }
.article--legal .callout { margin-block: 1.4rem; }

/* =========================================================
   PRE-FOOTER CTA  (rev 35)
   Every page ends on a .cta-band, and every one of them was
   slate or navy sitting directly on the slate footer, so the
   CTA dissolved into it. The band is now a gold field with
   navy type: distinct from the light content above and the
   dark footer below, on every page, from this one rule set.
   ========================================================= */
.cta-band.bg-slate, .cta-band.bg-navy {
  background: linear-gradient(120deg, #e3bd78 0%, var(--gold-bright) 45%, var(--gold) 100%);
  color: var(--navy);
}
.cta-band.bg-slate h2, .cta-band.bg-navy h2 { color: var(--navy); }
.cta-band.bg-slate h2 strong, .cta-band.bg-navy h2 strong { color: var(--navy); }
.cta-band.bg-slate p, .cta-band.bg-navy p,
.cta-band.bg-slate .lead, .cta-band.bg-navy .lead { color: hsla(203, 40%, 13%, 0.82); }
.cta-band.bg-slate .eyebrow, .cta-band.bg-navy .eyebrow { color: var(--navy); }
.cta-band.bg-slate .eyebrow::before, .cta-band.bg-navy .eyebrow::before,
.cta-band.bg-slate .eyebrow.center::after, .cta-band.bg-navy .eyebrow.center::after { background: var(--navy); }

/* Hive backdrop across the whole band, same cell size as the dark
   bands had, in light cream lines that sit behind the navy type. Applies whether or not the page put .honey
   on the section, and drops .honey's corner fade so it spans edge to edge. */
.cta-band.bg-slate, .cta-band.bg-navy {
  --honeycomb-cta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.641' height='60.0' viewBox='0 0 34.641 60.0'%3E%3Cg fill='none' stroke='%23fff8e8' stroke-opacity='0.1' stroke-width='1'%3E%3Cpath d='M17.32,0 L34.64,10 L34.64,30 L17.32,40 L0,30 L0,10 Z'/%3E%3Cpath d='M0,30 L17.32,40 L17.32,60 L0,70 L-17.32,60 L-17.32,40 Z'/%3E%3Cpath d='M34.64,30 L51.96,40 L51.96,60 L34.64,70 L17.32,60 L17.32,40 Z'/%3E%3Cpath d='M0,-30 L17.32,-20 L17.32,0 L0,10 L-17.32,0 L-17.32,-20 Z'/%3E%3Cpath d='M34.64,-30 L51.96,-20 L51.96,0 L34.64,10 L17.32,0 L17.32,-20 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.cta-band.bg-slate::before, .cta-band.bg-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--honeycomb-cta);
  background-size: 69px 120px;
  opacity: 1;
  /* same fade as every other .honey section: strongest top-right,
     dissolving toward the bottom-left */
  -webkit-mask-image: radial-gradient(120% 90% at 90% 10%, #000, transparent 70%);
  mask-image: radial-gradient(120% 90% at 90% 10%, #000, transparent 70%);
}
/* and the same fixed, scroll-under behaviour on desktop pointers */
@media (pointer: fine) {
  .cta-band.bg-slate::before, .cta-band.bg-navy::before {
    background-attachment: fixed;
    background-size: 81px 140px;
    background-position: center top;
  }
}
/* the corner bee reads as a navy silhouette on gold */
.cta-band.bg-slate::after, .cta-band.bg-navy::after { filter: brightness(0); opacity: .14; }

/* primary becomes navy, secondary a navy outline */
.cta-band .btn--gold { --btn-bg: var(--navy); --btn-fg: #fff; }
.cta-band .btn--gold::after { background: #fff; }
.cta-band .btn--gold:hover { color: var(--navy); box-shadow: 0 10px 24px hsla(203, 40%, 13%, .25); }
.cta-band .btn--ghost-light { color: var(--navy); box-shadow: inset 0 0 0 1.5px hsla(203, 40%, 13%, .6); }
.cta-band .btn--ghost-light::after { background: var(--navy); }
.cta-band .btn--ghost-light:hover { color: #fff; box-shadow: none; }
.cta-band :focus-visible { outline-color: var(--navy); }

/* =========================================================
   BLOG INDEX  (rev 35)
   Was a row of pill chips over a bordered featured card and a
   3-up grid of bordered cards. Now an editorial list: tab-style
   filters on a rule, a featured story laid out beside its image,
   and open article tiles with chamfered images. Scoped to the
   blog page; .post-card elsewhere is unchanged.
   ========================================================= */
.blog-index { --cut: clamp(18px, 2.4vw, 28px); }

/* filters: text tabs on a hairline, active one underlined in gold */
.blog-index .filter-bar {
  justify-content: flex-start;
  gap: 0 clamp(1rem, 2.4vw, 2rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.blog-index .filter-chip {
  position: relative;
  padding: .9rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.blog-index .filter-chip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.blog-index .filter-chip:hover { color: var(--slate); }
.blog-index .filter-chip:hover::after { transform: scaleX(.4); }
.blog-index .filter-chip.on { background: none; color: var(--navy); }
.blog-index .filter-chip.on::after { transform: scaleX(1); }

/* shared: no card chrome */
.blog-index .post-card {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.blog-index .post-card:hover { transform: none; box-shadow: none; }
.blog-index .post-card__img {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.blog-index .post-card__body { padding: 1.1rem 0 0; gap: .55rem; }
.blog-index .post-card h2,
.blog-index .post-card h3 { color: var(--slate); transition: color .3s ease; text-wrap: balance; }
.blog-index .post-card:hover h2,
.blog-index .post-card:hover h3 { color: var(--gold-deep); }
.blog-index .post-card .meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* featured */
.blog-index .post-card--featured {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(1.6rem, 4vw, 3.5rem);
  align-items: center;
  padding-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
  margin-bottom: clamp(2.2rem, 4.5vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.blog-index .post-card--featured .post-card__img { aspect-ratio: 3 / 2; }
.blog-index .post-card--featured .post-card__body { padding: 0; gap: .8rem; }
.blog-index .post-card--featured h2 { font-size: var(--step-3); line-height: 1.12; }
.blog-index .post-card--featured p { color: var(--muted); font-size: var(--step-0); line-height: 1.6; }
.blog-index .post-card--featured .meta { margin-top: .6rem; }
.post-card__go {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 600; color: var(--gold-deep);
}
.post-card__go .arrow { transition: transform .35s var(--ease); }
.post-card:hover .post-card__go .arrow { transform: translateX(4px); }

/* grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.2rem, 4vw, 3.2rem) clamp(1.4rem, 3vw, 2.4rem);
}
.blog-grid .post-card h3 { font-size: var(--step-1); line-height: 1.28; }
/* the date sits on its own hairline so the row of tiles lines up */
.blog-grid .post-card .meta { padding-top: .8rem; border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blog-index .post-card--featured { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; }
  /* tabs scroll sideways rather than wrapping into a ragged block */
  .blog-index .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .blog-index .filter-bar::-webkit-scrollbar { display: none; }
  .blog-index .filter-chip { white-space: nowrap; flex: none; }
}

/* =========================================================
   SINGLE ARTICLE  (rev 36)
   Same direction as the blog index: the panels come off.
   Left-aligned editorial header with the author in the meta,
   chamfered cover, and the takeaways / callout / byline /
   next-step blocks rebuilt as ruled, open sections anchored
   by gold hex marks instead of tinted boxes.
   ========================================================= */

/* header: left-aligned, same width as the cover below it */
.article-hero__inner { max-width: 960px; text-align: left; }
.article-hero__inner .breadcrumb ol { justify-content: flex-start; }
.article-hero .crumbs {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: .9rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-deep);
}
.article-hero .crumbs::before {
  content: ""; width: 10px; height: 11px; flex: none;
  clip-path: var(--hex); background: var(--gold);
}
.article-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  line-height: 1.08;
  /* max-width: 22ch; */
  text-wrap: balance;
}
.article-meta { flex-wrap: wrap; gap: .45rem .6rem; margin-top: 1.4rem; color: var(--muted); }
.article-meta strong { color: var(--slate); font-weight: 600; }
.article-meta__avatar {
  width: 34px; height: 38px; flex: none;
  object-fit: cover; object-position: center 18%;
  clip-path: var(--hex);
  margin-right: .15rem;
}

/* cover: the site's chamfered corners in place of radius + shadow */
.article-cover {
  --cut: clamp(22px, 3vw, 38px);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}

/* body copy */
.article-body .article { font-size: 1.06rem; line-height: 1.72; }
.article h2 { font-size: var(--step-2); line-height: 1.2; margin-top: 2.8rem; }
.article ul li::before {
  width: 9px; height: 10px; top: .6em;
  border-radius: 0; clip-path: var(--hex);
}

/* key takeaways: open block between two rules */
.takeaways {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: clamp(1.4rem, 2.8vw, 2rem) 0;
}
.takeaways::before { display: none; }
.takeaways li::before { background: var(--gold-bright); }

/* callout: a pull line, not a panel */
.article .callout {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 2rem 0;
  padding: .2rem 0 .2rem 2.4rem;
}
.article .callout::before {
  content: ""; position: absolute; left: 0; top: .35rem;
  width: 22px; height: 25px;
  clip-path: var(--hex);
  background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep));
}
.article .callout p {
  font-size: var(--step-1);
  line-height: 1.45;
  font-weight: 500;
  color: var(--slate);
}
.article .callout strong { color: var(--gold-deep); }

/* share + byline read as one closing strip */
.share-btn { background: none; }
.byline {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 1.5rem 0 0;
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.byline img {
  width: 64px; height: 72px;
  border-radius: 0;
  clip-path: var(--hex);
  object-position: center 18%;
}

/* next step: open, light, still clearly a call to action */
.leadmag--article {
  background: none;
  color: var(--ink);
  border-radius: 0;
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
  margin-top: 2.6rem;
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) 190px;
  overflow: visible;
}
.leadmag--article::after { display: none; }
.leadmag--article h2 { color: var(--slate); font-size: var(--step-2); }
.leadmag--article p { color: var(--muted); }
.leadmag--article .eyebrow { color: var(--gold-deep); }
.leadmag--article .eyebrow::before { background: var(--gold); }
.leadmag--article .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.leadmag--article .btn-row .btn { width: auto; }
.leadmag--article .btn--ghost-light { color: var(--slate); box-shadow: inset 0 0 0 1.5px var(--slate); }
.leadmag--article .btn--ghost-light::after { background: var(--slate); }
.leadmag--article .btn--ghost-light:hover { color: #fff; }
.leadmag--article > img { max-width: 190px; filter: drop-shadow(0 16px 24px rgba(24, 40, 50, .22)); transform: rotate(-3deg); }

/* related posts: open tiles like the blog index */
.related .post-card {
  --cut: clamp(16px, 2vw, 24px);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.related .post-card:hover { transform: none; box-shadow: none; }
.related .post-card__img {
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.related .post-card__body { padding: 1rem 0 0; }
.related .post-card h3 { color: var(--slate); transition: color .3s ease; text-wrap: balance; }
.related .post-card:hover h3 { color: var(--gold-deep); }

@media (max-width: 640px) {
  .leadmag--article { grid-template-columns: 1fr; }
  .leadmag--article > img { max-width: 150px; margin-inline: 0; }
  .leadmag--article .btn-row .btn { width: 100%; justify-content: center; }
  .article .callout { padding-left: 2rem; }
  .article .callout::before { width: 18px; height: 20px; }
}

/* numbered steps: the number is the marker, so no hex bullet */
/* spacing matches the bullet lists: same item gap, same text indent */
.article ol { list-style: none; padding: 0; margin-top: 1rem; display: grid; gap: .55rem; counter-reset: step; }
.article ol li { position: relative; padding-left: 1.4rem; color: var(--ink); counter-increment: step; }
.article ol li::before {
  content: counter(step) ".";
  position: absolute; left: 0; top: 0;
  font-weight: 700;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   SERVICES TIERS, open comparison  (rev 37)
   Three bordered cards (the middle one scaled up) become one
   open comparison: columns split by hairlines, each headed by
   a rule, the featured tier marked by a gold rule and a tint
   that fades out rather than a box. Scoped to services.html.
   ========================================================= */
.pricing-grid--open {
  gap: 0;
  align-items: stretch;
}
.pricing-grid--open .tier {
  /* near-solid surface so the honeycomb behind never runs under the text */
  background: hsla(0, 0%, 100%, 0.94);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  border-top: 1px solid var(--line);
  padding: clamp(1.6rem, 2.6vw, 2.1rem) clamp(1.2rem, 2.6vw, 2.2rem) 0;
  gap: .3rem;
}
.pricing-grid--open .tier + .tier { border-left: 1px solid var(--line); }
.pricing-grid--open .tier { padding-bottom: clamp(1.4rem, 2.4vw, 1.9rem); }
.pricing-grid--open .tier:hover { transform: none; box-shadow: none; }

/* featured: gold rule + a tint that dissolves down the column */
.pricing-grid--open .tier.featured {
  border: 0;
  border-top: 3px solid var(--gold);
  border-left: 1px solid var(--line);
  box-shadow: none;
  transform: none;
  background:
    linear-gradient(to bottom, hsla(41, 62%, 58%, 0.14), hsla(41, 62%, 58%, 0) 55%),
    hsla(0, 0%, 100%, 0.96);
  /* the 3px rule is 2px thicker than the others; keep the rows aligned */
  padding-top: calc(clamp(1.6rem, 2.6vw, 2.1rem) - 2px);
}
.pricing-grid--open .tier.featured:hover { transform: none; }
.pricing-grid--open .tier.featured + .tier { border-left: 1px solid var(--line); }

/* badge sits in the label row instead of floating in a corner */
.pricing-grid--open .tier__badge {
  top: calc(clamp(1.35rem, 2.3vw, 1.85rem) - 2px);
  right: clamp(1.2rem, 2.6vw, 2.2rem);
  background: var(--gold);
  color: var(--navy);
}
.pricing-grid--open .tier__step { margin-bottom: .3rem; }
.pricing-grid--open .tier__name { font-size: var(--step-2); line-height: 1.15; text-wrap: balance; }

/* price: one compact line instead of a big script word */
.pricing-grid--open .tier__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem;
  margin-top: .9rem;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--slate);
}
.pricing-grid--open .tier__price-note { display: inline; margin: 0; font-size: var(--step--1); }
.pricing-grid--open .tier__price-note::before { content: "\00B7"; margin-right: .5rem; color: var(--muted-2); }

.pricing-grid--open .tier__desc { font-size: var(--step-0); line-height: 1.6; }
.pricing-grid--open .tier hr { margin: 1.4rem 0 .4rem; }

/* group labels: restore the eyebrow's marker gap */
.pricing-grid--open .grp-label {
  display: flex;
  gap: .6em;
  margin: 1.3rem 0 .7rem;
  font-size: .72rem;
  letter-spacing: .16em;
  line-height: 1.4;
}
.pricing-grid--open .grp-label::before { margin-top: .12em; align-self: flex-start; }

/* what you gain: ruled, not tinted */
.pricing-grid--open .gain {
  background: none;
  border-radius: 0;
  padding: 1.2rem 0 0;
  margin-top: 1.5rem;
  border-top: 1px dashed hsla(41, 45%, 45%, 0.45);
}
/* the label carries an inline display:block, which drops the marker gap */
.pricing-grid--open .gain .eyebrow { display: flex !important; gap: .6em; font-size: .72rem; letter-spacing: .16em; }
.pricing-grid--open .gain .check-list li { color: var(--slate); font-weight: 500; }

.pricing-grid--open .tier__cta { padding-top: 1.8rem; padding-bottom: .4rem; }

@media (max-width: 980px) {
  .pricing-grid--open { grid-template-columns: 1fr; max-width: 620px; }
  .pricing-grid--open { row-gap: 1.2rem; }
  .pricing-grid--open .tier { padding: 1.8rem 1.3rem 2rem; border: 1px solid var(--line); }
  .pricing-grid--open .tier + .tier,
  .pricing-grid--open .tier.featured,
  .pricing-grid--open .tier.featured + .tier { border-left: 0; }
  .pricing-grid--open .tier.featured { border: 1px solid var(--line); border-top: 3px solid var(--gold); }
}

/* =========================================================
   SERVICES: positioning + extras  (rev 38)
   The client list lost its cream panel and the add-ons /
   GovCon pair lost their card and gold-bordered box. Both
   are now open two-column layouts split by a hairline.
   ========================================================= */
.positioning { align-items: start; position: relative; }
.positioning__clients .eyebrow { margin-bottom: .4rem; }
.client-list { list-style: none; margin: 0; padding: 0; }
.client-list li {
  position: relative;
  padding: .95rem 0 .95rem 1.9rem;
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  font-size: var(--step-0);
  line-height: 1.5;
}
.client-list li:first-child { border-top: 1px solid var(--line); margin-top: .6rem; }
/* same hex-tick icon as .check-list */
.client-list li { padding-left: 2.2rem; }
.client-list li::before {
  content: "";
  position: absolute; left: 0; top: 1.05rem;
  width: 1.35rem; height: 1.35rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c0904a'%3E%3Cpath d='M12 2l8.66 5v10L12 22 3.34 17V7z' fill='%23c0904a' fill-opacity='0.16'/%3E%3Cpath d='M9.5 12.5l1.8 1.8 3.5-3.8' fill='none' stroke='%239a742f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.extras {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.extras__col {
  display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.4rem, 3.5vw, 3rem) 0 0;
  border-top: 1px solid var(--line);
}
.extras__col + .extras__col {
  padding-left: clamp(1.4rem, 3.5vw, 3rem);
  padding-right: 0;
  border-left: 1px solid var(--line);
}
.extras__col h3 { font-size: var(--step-2); line-height: 1.2; }
.extras__col p { color: var(--muted); max-width: 52ch; }
.extras__col .textlink { margin-top: .4rem; }
.extras__col--govcon { border-top: 3px solid var(--gold); padding-top: calc(clamp(1.6rem, 3vw, 2.2rem) - 2px); }
.extras__col--govcon .btn { margin-top: .5rem; }

.extras__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem 1.5rem;
  width: 100%;
}
.extras__list li {
  position: relative; padding-left: 1.3rem;
  color: var(--slate); font-weight: 500; font-size: var(--step--1);
}
.extras__list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 8px; height: 9px; clip-path: var(--hex); background: var(--gold);
}

@media (min-width: 1001px) {
  .positioning::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 1px; background: var(--line);
  }
}
@media (max-width: 760px) {
  .extras { grid-template-columns: 1fr; }
  .extras__col, .extras__col + .extras__col { padding: 1.6rem 0 2rem; border-left: 0; }
}
@media (max-width: 420px) {
  .extras__list { grid-template-columns: 1fr; }
}

/* =========================================================
   GOVCON: stage path + outcomes  (rev 39)
   The tier cards read as a progression, so they became one:
   numbered hex stages on a connecting line. The outcome cards
   (tiny tag, grey paragraph) became a ruled 2x2 with a gold
   script numeral and a real heading.
   ========================================================= */
.stage-path {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3.5vw, 3rem);
  position: relative;
  text-align: center;
}
/* the line runs hex centre to hex centre */
.stage-path::before {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  border-top: 2px dashed hsla(41, 55%, 45%, 0.45);
}
.stage-path__step {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
}
.stage-path__num {
  display: grid; place-items: center;
  width: 64px; height: 72px;
  margin-bottom: .7rem;
  clip-path: var(--hex);
  background: linear-gradient(155deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  color: var(--navy);
  font-family: var(--font-script);
  font-size: 2.1rem;
  line-height: 1;
  transition: transform .45s var(--ease);
}
.stage-path__step:hover .stage-path__num { transform: translateY(-4px); }
.stage-path__label {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.stage-path h3 { font-size: var(--step-1); line-height: 1.25; }
.stage-path p { color: var(--muted); max-width: 32ch; line-height: 1.6; }

.outcomes {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1040px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  counter-reset: outcome;
}
.outcome {
  counter-increment: outcome;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: clamp(1.4rem, 2.8vw, 2rem) 0;
  border-top: 1px solid var(--line);
}
.outcome:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.outcome::before {
  content: counter(outcome, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--font-script);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--gold-script);
}
.outcome h3 { font-size: var(--step-1); line-height: 1.25; text-wrap: balance; }
.outcome p { color: var(--muted); margin-top: .45rem; line-height: 1.6; }

@media (max-width: 860px) {
  .stage-path { grid-template-columns: 1fr; text-align: left; gap: 0; max-width: 560px; margin-inline: auto; }
  /* vertical line down the hex column */
  .stage-path::before { top: 36px; bottom: 36px; left: 31px; right: auto; border-top: 0; border-left: 2px dashed hsla(41, 55%, 45%, 0.45); }
  .stage-path__step {
    display: grid; grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 1.2rem; row-gap: .35rem; align-items: start;
    padding-bottom: 1.8rem;
  }
  .stage-path__num { grid-row: 1 / span 3; margin: 0; }
  .stage-path p { max-width: none; }
  .outcomes { grid-template-columns: 1fr; }
  .outcome:nth-last-child(2) { border-bottom: 0; }
}
@media (max-width: 480px) {
  .outcome { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .outcome::before { font-size: 1.8rem; }
}

/* =========================================================
   ABOUT: values + team  (rev 40)
   Values: a sticky intro beside a ruled index of six rows
   (number | title | description), instead of a 3x2 card grid
   that duplicated the numbered pattern used elsewhere.
   Team: portraits cut to the honeycomb cell with a gold ring,
   centred credits, instead of rounded photo tiles.
   ========================================================= */
.values {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.values__intro p { color: var(--muted); max-width: 34ch; }
@media (min-width: 1001px) {
  .values__intro { position: sticky; top: 120px; }
}
.values__list { list-style: none; margin: 0; padding: 0; counter-reset: value; }
.value-row {
  counter-increment: value;
  display: grid;
  grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(1rem, 2.5vw, 2rem);
  align-items: baseline;
  padding: clamp(1.2rem, 2.4vw, 1.6rem) 0;
  border-top: 1px solid var(--line);
  transition: background .35s var(--ease);
}
.value-row:last-child { border-bottom: 1px solid var(--line); }
.value-row::before {
  content: counter(value, decimal-leading-zero);
  font-family: var(--font-script);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--gold-script);
}
.value-row h3 { font-size: var(--step-1); line-height: 1.25; text-wrap: balance; transition: color .3s ease; }
.value-row p { color: var(--muted); line-height: 1.6; }
.value-row:hover h3 { color: var(--gold-deep); }

@media (max-width: 1000px) {
  .values { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .value-row { grid-template-columns: 2.4rem minmax(0, 1fr); row-gap: .35rem; }
  .value-row::before { grid-row: 1 / span 2; font-size: 1.6rem; }
  .value-row p { grid-column: 2; }
}

/* team */
.team-grid { gap: clamp(1.6rem, 4vw, 3rem); }
.team-card {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.team-card__img {
  width: 240px;
  max-width: 100%;
  aspect-ratio: 0.866 / 1;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  clip-path: var(--hex);
  /* the element is the gold ring; the photo sits inset inside it */
  background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep));
  padding: 4px;
  transition: transform .45s var(--ease);
}
/* photo pinned inside the frame so every portrait is the same cell,
   whatever the source image's proportions */
.team-card__img { position: relative; height: auto; }
.team-card__img img {
  position: absolute; inset: 4px;
  width: calc(100% - 8px); height: calc(100% - 8px);
  object-fit: cover;
  clip-path: var(--hex);
  display: block;
}
.team-card:hover .team-card__img { transform: translateY(-5px); }
.team-card:hover .team-card__img img { transform: scale(1.05); }
.team-card h3 { margin-top: 1.3rem; }
.team-card .role { max-width: 28ch; line-height: 1.45; margin-top: .3rem; }
.team-card .read-bio {
  margin-top: .9rem;
  padding: .55em 1.1em;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1.5px hsla(41, 45%, 40%, 0.45);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.team-card .read-bio:hover { background: var(--gold); color: var(--navy); box-shadow: none; }

/* =========================================================
   HOME: GovCon band  (rev 41)
   Was a gold-bordered, shadowed callout box. Now an open band
   between a gold rule and a hairline: the headline as the
   statement on the left, the four pressures as a list and the
   CTA on the right.
   ========================================================= */
.govcon-band {
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.8rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(1.8rem, 3.5vw, 2.6rem) 0;
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid var(--line);
}
.govcon-band__lead h3 {
  margin-top: .8rem;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: 1.12;
  text-wrap: balance;
}
.govcon-band__lead h3 strong { display: block; margin-top: .15em; }
.govcon-band__body { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.govcon-band__body p { color: var(--muted); }
.govcon-band__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1.4rem; width: 100%;
}
.govcon-band__list li {
  position: relative; padding-left: 1.35rem;
  color: var(--slate); font-weight: 600; font-size: var(--step--1);
}
.govcon-band__list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 9px; height: 10px; clip-path: var(--hex); background: var(--gold);
}
.govcon-band .btn { margin-top: .4rem; }

@media (max-width: 860px) {
  .govcon-band { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .govcon-band__list { grid-template-columns: 1fr; }
}

/* =========================================================
   TRAINING page  (rev 42)
   Pain list and who/why lose their panels (they reuse the open
   .client-list / .positioning / .extras patterns). Registration
   goes from a centred stack to intro-beside-form, and the form
   drops its rounded box for the chamfered cell.
   ========================================================= */
.pain__verdict {
  position: relative;
  margin-top: 1.4rem;
  padding-left: 2.2rem;
  font-size: var(--step-1);
  line-height: 1.4;
  font-weight: 600;
  color: var(--slate);
  text-wrap: balance;
}
.pain__verdict::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 20px; height: 23px;
  clip-path: var(--hex);
  background: linear-gradient(155deg, var(--gold-bright), var(--gold-deep));
}
.extras__col .client-list { width: 100%; }

/* registration */
.register {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* "it's free" stays on the heading's line; never breaks off on its own */
.register__intro h2 strong { white-space: nowrap; }
.register__when {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: .2rem;
  font-weight: 600;
  color: var(--gold-bright) !important;
}
.register__when::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px hsla(41, 62%, 58%, 0.22);
}
.register .register-points {
  grid-template-columns: 1fr;
  max-width: none;
  margin: 1.2rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid hsla(38, 26%, 92%, 0.16);
}
/* The GHL form draws its own white card (radius + shadow) inside the iframe,
   so the wrapper stays bare: a panel around it read as a box in a box.
   Height is left to GHL's embed script, which sizes the wrapper to the
   form; forcing the iframe's 435px left dead space under the button. */
.register__form {
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
  /* chamfer GHL's own card directly (no panel around it); the clip also
     trims the card's grey shadow edge */
  --cut: 26px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.register__form iframe { border-radius: 0 !important; }
@media (max-width: 620px) { .register__form { --cut: 18px; } }
/* training registration: inside its iframe GHL puts ~43px above the card
   but ~105px below it, so the section read as a big empty band at the
   bottom. Trim the difference (clip + pull the section up) so the space
   under the card matches the space above it. */
.register > .register__form {
  --trim: 62px;
  margin-bottom: calc(-1 * var(--trim));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--trim)), var(--cut) calc(100% - var(--trim)), 0 calc(100% - var(--trim) - var(--cut)));
}
@media (max-width: 620px) { .register > .register__form { --trim: 5.75rem; } }

@media (max-width: 900px) {
  .register { grid-template-columns: 1fr; }
  .register .register-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .register .register-points { grid-template-columns: 1fr; }
}

/* media with the site's chamfered corners instead of radius + halo shadow.
   The shadow's blur read as a soft frame where the photo's own light edges
   met the cream section. */
.split__media--cut {
  --cut: clamp(22px, 3vw, 36px);
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.split__media--cut img { display: block; }

/* training hero: facts row + open form (rev 43) */
.training-hero { align-items: center; }
.hero-facts {
  list-style: none; margin: .9rem 0 .5rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem;
}
.hero-facts li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--step--1); font-weight: 600; color: var(--slate);
}
.hero-facts svg { width: 17px; height: 17px; color: var(--gold-deep); flex: none; }
.hero-facts__live::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--gold);
  box-shadow: 0 0 0 4px hsla(41, 62%, 58%, 0.22);
}
.hero-facts li + li { padding-left: 1.4rem; border-left: 1px solid var(--line); }

.hero-form { width: 100%; }
.hero-form__head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: .3rem 1rem;
  margin-bottom: .8rem;
}
.hero-form__head p { font-size: var(--step--1); color: var(--muted); }
.hero-form__head strong { color: var(--slate); }
/* GHL's iframe carries ~120px of empty space under its card, so the list
   is pulled up into it to sit just below the visible form. */
.hero-form__points { position: relative; margin-top: -5.5rem; color: var(--slate); }
/* GHL hides the iframe off-page until it loads, collapsing the wrapper, which
   would pull the list up over the heading. Reserve the form's space (loaded
   height is ~770px desktop / ~830px mobile) so it can't. */
.hero-form .form-embed:has(+ .hero-form__points) { min-height: 640px; }
/* GHL's mobile layout leaves a little less (~95px) */
@media (max-width: 620px) { .hero-form__points { margin-top: -4.5rem; } }
/* intensive hero: the GHL form drops to a single column below ~650px of
   iframe width, so the form column is held at 680px and the hero stacks
   before it would get narrower than that. */
.hero-apply { grid-template-columns: minmax(0, 1fr) 680px; }
@media (max-width: 1180px) {
  .hero-apply { grid-template-columns: 1fr; }
}


@media (max-width: 560px) {
  .hero-facts li + li { padding-left: 0; border-left: 0; }
}

/* =========================================================
   INTENSIVE page  (rev 44)
   Hero, who/gap and choose-your-path reuse the open training /
   services patterns. New pieces: the gap as a pull statement,
   the scope note as a ruled strip, and an "or" cell on the
   divider between the two paths.
   ========================================================= */
.gap-quote {
  align-self: center;
  padding-top: clamp(1.4rem, 2.6vw, 1.9rem);
  border-top: 3px solid var(--gold);
}
.gap-quote h3 {
  margin-top: .8rem;
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.22;
  text-wrap: balance;
}
.gap-quote p { margin-top: .9rem; color: var(--muted); line-height: 1.65; }

.scope-note {
  display: grid;
  grid-template-columns: auto minmax(0, 12rem) minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: start;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.scope-note__icon {
  display: grid; place-items: center;
  width: 38px; height: 42px;
  clip-path: var(--hex);
  background: hsla(41, 62%, 58%, 0.2);
  color: var(--gold-deep);
}
.scope-note__icon svg { width: 20px; height: 20px; }
.scope-note .eyebrow { margin-top: .7rem; }
/* the info hex already marks it; no second marker on the label */
.scope-note .eyebrow::before { display: none; }
/* run the text to the right edge instead of the default paragraph measure */
.scope-note p { color: var(--muted); line-height: 1.65; margin-top: .45rem; max-width: none; }

/* two paths: an "or" cell sits on the divider */
.paths { position: relative; }
.paths__or {
  position: absolute;
  /* sits on the top rule, straddling the column divider */
  left: 50%; top: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid; place-items: center;
  width: 42px; height: 46px;
  clip-path: var(--hex);
  background: var(--navy);
  color: var(--gold-bright);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
/* the "or" span sits between the columns, so ".extras__col + .extras__col"
   no longer reaches the second one; give it the divider directly */
.paths .extras__col--govcon {
  padding-left: clamp(1.4rem, 3.5vw, 3rem);
  padding-right: 0;
  border-left: 1px solid var(--line);
}
.paths .register__form { width: 100%; margin-top: .4rem; }
.paths__fine { font-size: .78rem !important; color: var(--muted-2) !important; }
/* same as the hero: the GHL form drops to its single-column layout below
   ~650px of iframe width, so the form column is held at 680px (plus its
   left padding) and the paths stack before it would get narrower. */
.paths { grid-template-columns: minmax(0, 1fr) calc(680px + clamp(1.4rem, 3.5vw, 3rem)); }
.paths__or { left: calc(100% - 680px - clamp(1.4rem, 3.5vw, 3rem)); }
@media (max-width: 1260px) {
  .paths { grid-template-columns: 1fr; }
  .paths .extras__col:first-child { padding-right: 0; padding-bottom: 2rem; }
  .paths__or { position: static; transform: none; margin: 0 auto -.8rem; }
  .paths .extras__col--govcon { padding-left: 0; border-left: 0; }
}

@media (max-width: 760px) {
  .scope-note { grid-template-columns: auto minmax(0, 1fr); }
  .scope-note p { grid-column: 1 / -1; }
  .paths__or { position: static; transform: none; margin: 0 auto -.8rem; }
  .paths .extras__col--govcon { padding-left: 0; border-left: 0; }
}

/* client list without the row rules (intensive "who this is for") */
.client-list--plain li,
.client-list--plain li:first-child { border: 0; padding-block: .45rem; }
.client-list--plain li:first-child { margin-top: .4rem; }
.client-list--plain li::before { top: .55rem; }

/* =========================================================
   MEMBERSHIP page  (rev 45)
   Same direction as training / intensive. Most sections reuse
   those open patterns; new here are the price panels (hero and
   pricing) and the add-on row under the included list.
   ========================================================= */

/* price panel: near-solid surface under a gold rule, no box chrome,
   so the hive behind never runs under the price or list */
.price-panel {
  background: hsla(0, 0%, 100%, 0.94);
  border-top: 3px solid var(--gold);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
}
.price-panel__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%;
}
.price-panel__badge {
  display: inline-flex; align-items: center;
  line-height: 1;
  padding: .55em .9em .47em;
  border-radius: 100px;
  background: var(--gold);
  color: var(--navy);
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
@supports (text-box: trim-both cap alphabetic) {
  .price-panel__badge { text-box: trim-both cap alphabetic; padding: .6em .9em; }
}
.price-panel__name { font-size: var(--step-2); line-height: 1.15; margin-top: .2rem; }
.price-panel__price {
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--slate);
  margin-top: .5rem;
}
.price-panel__price span { font-size: var(--step-0); font-weight: 500; color: var(--muted); letter-spacing: 0; margin-left: .15rem; }
.price-panel__terms { font-size: var(--step--1); color: var(--muted); }
.price-panel .check-list {
  width: 100%;
  margin: 1rem 0 .4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  gap: .55rem;
}
.price-panel .check-list li { font-size: var(--step--1); }
.price-panel .btn { width: 100%; justify-content: center; margin-top: .6rem; }

/* sound-familiar column: label sits above the ruled list */
.pain > .eyebrow { margin-bottom: .2rem; }

/* add-on: a full-width row under a gold rule, set apart from the included list */
.addon-row {
  display: flex; align-items: flex-start; gap: clamp(1rem, 2vw, 1.35rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding: clamp(1.4rem, 2.8vw, 2rem) clamp(1.2rem, 2.8vw, 2rem);
  background: hsla(0, 0%, 100%, 0.94);
  border-top: 3px solid var(--gold);
}
.addon-row .hex-icon { width: 52px; height: 58px; margin: .12em 0 0; background: linear-gradient(155deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep)); color: var(--navy); }
.addon-row .hex-icon svg { width: 24px; height: 24px; }
.addon-row h3 { font-size: var(--step-1); line-height: 1.25; margin-top: .35rem; }
.addon-row p { color: var(--muted); margin-top: .45rem; max-width: 70ch; }

/* eligibility / scope columns */
.extras__col h2 { font-size: var(--step-3); line-height: 1.12; }

/* wide pricing panel */
.price-wide {
  max-width: 980px; margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: hsla(0, 0%, 100%, 0.94);
  border-top: 3px solid var(--gold);
}
.price-wide__lead,
.price-wide__list { padding: clamp(1.6rem, 3.2vw, 2.6rem); }
.price-wide__lead { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.price-wide__lead .btn { margin-top: 1rem; }
.price-wide__addon {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--step--1); color: var(--muted);
}
.price-wide__addon strong { color: var(--slate); }
.price-wide__list { border-left: 1px solid var(--line); }
.price-wide__label {
  display: block; margin-bottom: 1rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-deep);
}
.price-wide__list .check-list { gap: .7rem; }

@media (max-width: 760px) {
  .price-wide { grid-template-columns: 1fr; }
  .price-wide__list { border-left: 0; border-top: 1px solid var(--line); }
  .price-wide__lead .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   PACKAGE pages  (rev 46)
   The package cards reuse the open services comparison
   (.pricing-grid--open). Package-specific pieces: the "who it's
   for" line without its side bar, the response time as an icon
   line instead of a grey box, and the compare prompt as an open
   band (.price-cta--open) instead of a bordered box.
   ========================================================= */
.packages .tier__name {
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.05;
  color: var(--slate);
}
.packages .tier.featured .tier__name { color: var(--navy); }
.packages .tier__tag { color: var(--slate); font-weight: 500; line-height: 1.5; margin-top: .5rem; }
.packages .tier__who {
  border-left: 0; padding-left: 0;
  margin-top: .6rem;
  font-size: var(--step--1); line-height: 1.55;
  color: var(--muted);
}
.packages .tier hr { margin: 1.3rem 0 1rem; }
.packages .check-list li { font-size: var(--step--1); }
.packages .tier__level {
  display: flex; align-items: flex-start; gap: .55rem;
  margin-top: 1.3rem; padding: 1rem 0 0;
  background: none; border-radius: 0;
  border-top: 1px solid var(--line);
  font-size: var(--step--1); font-weight: 500; color: var(--muted);
}
.packages .tier__level svg { width: 18px; height: 18px; flex: none; margin-top: .1em; color: var(--gold-deep); }
.packages .tier__level strong { color: var(--slate); font-weight: 600; }
/* the second hr sat directly above the level line; the line brings its own rule */
.packages .tier__level { order: 0; }
.packages .check-list + hr { display: none; }

/* near-solid surface so the section's hive never runs under the text */
.price-cta--open {
  background: hsla(0, 0%, 100%, 0.94);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.4rem, 3.5vw, 2.8rem);
  border-top: 3px solid var(--gold);
}
.price-cta--open p { max-width: 58ch; }

/* tighten the gaps around the package grid: the hero's bottom padding plus
   the section's top padding stacked into a large empty band, and the same
   happened between the pricing note and the compare band */
.packages-section { padding-top: clamp(.5rem, 1.5vw, 1.2rem); padding-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.packages-compare { padding-top: clamp(1rem, 2vw, 1.6rem); }

/* =========================================================
   PRICING page  (rev 47)
   Entry options: open columns instead of three cards. Package
   grids reuse the open comparison (.pricing-grid--open
   .packages). The comparison tables had no styles at all; they
   now sit on a light surface under a gold rule, with the
   featured column tinted and hex ticks for "included".
   ========================================================= */
.entry-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
.entry-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  padding: clamp(1.5rem, 2.8vw, 2rem) clamp(1.2rem, 2.6vw, 2.2rem) 0;
}
.entry-option:first-child { padding-left: 0; }
.entry-option:last-child { padding-right: 0; }
.entry-option + .entry-option { border-left: 1px solid var(--line); }
.entry-option h3 { font-size: var(--step-2); line-height: 1.15; }
.entry-option p { color: var(--muted); line-height: 1.6; }
.entry-option__price {
  margin-top: auto;
  padding-top: .9rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--slate) !important;
}
.entry-option .textlink { margin-top: .2rem; }

@media (max-width: 860px) {
  .entry-options { grid-template-columns: 1fr; border-top: 0; }
  .entry-option, .entry-option:first-child, .entry-option:last-child {
    padding: 1.5rem 0; border-left: 0; border-top: 1px solid var(--line);
  }
  .entry-option__price { margin-top: .2rem; padding-top: 0; }
}

/* Every .tier__badge (services, pricing tabs, package pages): caps-only
   label, so trim the line box to cap height and use equal padding. Without
   it the unused descender space makes the bottom look deeper than the top. */
.tier__badge {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: .52em .9em .44em;
}
@supports (text-box: trim-both cap alphabetic) {
  .tier__badge { text-box: trim-both cap alphabetic; padding: .6em .9em; }
}

/* =========================================================
   PRICING comparison tables  (rev 48)
   Styling only: the table markup and every cell's text are
   unchanged. Dark header bar + rounded, shadowed box become a
   light surface under a gold rule, a navy-text header, a tinted
   "most popular" column, and a row label pinned for sideways
   scrolling on phones.
   ========================================================= */
.cmp-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: hsla(0, 0%, 100%, 0.94);
  border-top: 3px solid var(--gold);
}
table.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--step--1);
}
table.cmp th, table.cmp td {
  padding: .95rem 1.2rem;
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
table.cmp th:first-child { text-align: left; }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0; }

table.cmp thead th {
  padding-block: 1.25rem;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--slate);
  border-bottom: 1px solid var(--line);
}
table.cmp thead th:first-child {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
table.cmp tbody th { font-weight: 500; color: var(--slate); white-space: nowrap; }
table.cmp td { color: var(--muted); }
table.cmp td.mark { color: var(--gold-deep); font-weight: 700; font-size: 1.05rem; }

/* most popular (middle) column */
table.cmp th:nth-child(3), table.cmp td:nth-child(3) { background: hsla(41, 62%, 58%, 0.10); }
table.cmp thead th:nth-child(3) { color: var(--navy); box-shadow: inset 0 3px 0 var(--gold); }

table.cmp tbody tr { transition: background-color .25s ease; }
table.cmp tbody tr:hover { background-color: hsla(41, 62%, 58%, 0.06); }

/* keep the row label visible while the table scrolls sideways */
table.cmp tbody th, table.cmp thead th:first-child {
  position: sticky; left: 0; z-index: 1;
  background: #fff;
}

/* =========================================================
   FAQ page  (rev 49)
   Markup regrouped only (no copy changes): the finder becomes
   a sticky sidebar with the category chips as a vertical list,
   and the questions become open ruled rows with the hex toggle
   (the contact-page accordion, minus the numbering).
   ========================================================= */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 1001px) {
  .faq-side { position: sticky; top: 120px; }
}
.faq-side .faq-tools { position: static; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; }

/* search: an underlined field, not a pill box */
.faq-side .faq-search {
  border: 0;
  border-bottom: 2px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: .6rem 0;
}
.faq-side .faq-search:focus-within { border-bottom-color: var(--gold); box-shadow: none; }

/* category chips: a vertical list with a gold marker on the active one */
.faq-side .filter-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 1.4rem 0 0;
  border-left: 1px solid var(--line);
}
.faq-side .filter-chip {
  position: relative;
  text-align: left;
  padding: .6rem 0 .6rem 1.1rem;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--muted);
}
.faq-side .filter-chip::before {
  content: "";
  position: absolute; left: -1px; top: .45rem; bottom: .45rem;
  width: 3px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform .3s var(--ease);
}
.faq-side .filter-chip:hover { color: var(--slate); }
.faq-side .filter-chip.on { background: none; color: var(--navy); }
.faq-side .filter-chip.on::before { transform: scaleY(1); }
.faq-side .faq-count { margin-top: 1rem; }

/* groups */
.faq-main .faq-group + .faq-group { margin-top: clamp(2.6rem, 5vw, 3.6rem); }
.faq-main .faq-group > .stack { margin-bottom: .6rem !important; }
.faq-main .faq-group h2 { font-size: var(--step-2); }
.faq-main .faq-empty { text-align: left; padding: 1rem 0 2rem; }

/* accordion without the 01/02 numbering */
.accordion--plain .acc { counter-increment: none; }
.accordion--plain .acc__head { grid-template-columns: minmax(0, 1fr) auto; font-size: var(--step-0); font-weight: 600; padding: 1.15rem 0; }
.accordion--plain .acc__head::before { content: none; }
.accordion--plain .acc__inner { padding: 0 3.4rem 1.3rem 0; }

.faq-side, .faq-main { min-width: 0; }
@media (max-width: 1000px) {
  /* minmax(0, 1fr): a plain 1fr let the nowrap chip row set the column's
     minimum width, pushing the page wider than the phone */
  .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .faq-side .filter-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    border-left: 0;
    border-bottom: 1px solid var(--line);
    gap: 0 1.3rem;
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .faq-side .filter-bar::-webkit-scrollbar { display: none; }
  .faq-side .filter-chip { padding: .8rem 0; white-space: nowrap; flex: none; }
  .faq-side .filter-chip::before { left: 0; right: 0; top: auto; bottom: -1px; width: auto; height: 2px; transform: scaleX(0); }
  .faq-side .filter-chip.on::before { transform: scaleX(1); }
}
@media (max-width: 560px) {
  .accordion--plain .acc__inner { padding-right: 0; }
}

/* =========================================================
   MEMBERSHIP + STRATEGY SESSION pages  (rev 50)
   Markup regrouped only, no copy changes. "Benefit from" /
   "Ideal if you..." panels become open ruled lists beside the
   intro; the CFO "problems" cards become open rows on the dark
   section (their grey inline text failed contrast on slate).
   ========================================================= */
.benefits { display: flex; flex-direction: column; align-items: flex-start; }
.benefits > .eyebrow { margin-bottom: .2rem; }
.benefits .client-list { width: 100%; }
.benefits .btn { margin-top: 1.6rem; }

.problems {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(1.6rem, 4vw, 3rem);
}
.problem {
  position: relative;
  padding: clamp(1.3rem, 2.6vw, 1.8rem) 0 clamp(1.3rem, 2.6vw, 1.8rem) 2rem;
  border-top: 1px solid hsla(38, 26%, 92%, 0.16);
}
.problem::before {
  content: "";
  position: absolute; left: 0; top: calc(clamp(1.3rem, 2.6vw, 1.8rem) + .3em);
  width: 12px; height: 13px;
  clip-path: var(--hex);
  background: var(--gold-bright);
}
.problem h3 { font-size: var(--step-1); line-height: 1.25; color: #fff; }
.problem p { margin-top: .45rem; line-height: 1.6; color: hsla(38, 26%, 92%, 0.82); }

@media (max-width: 960px) { .problems { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .problems { grid-template-columns: 1fr; } }

/* long centred label kept on one line where it fits (it can overflow the
   heading's measure, so it's allowed to be wider than its wrapper) */
@media (min-width: 761px) {
  .eyebrow--nowrap { white-space: nowrap; align-self: center; }
}

/* compare band with equal space above and below */
.section.compare-even { padding-block: clamp(2.6rem, 4.5vw, 3.6rem); }

/* heading kept on one line where it fits; wraps normally on smaller screens */
@media (min-width: 900px) {
  .heading--nowrap { white-space: nowrap; align-self: center; }
}

/* =========================================================
   MOBILE HEADER / DRAWER fixes  (rev 51)
   1. The header shrank to 66px once scrolled while the drawer
      still started at 74px, so an 8px strip of page showed
      between them. Keep the bar at its full height on mobile.
   2. The drawer is a fixed-height flex column; with a submenu
      open (or a short screen) flex-shrink squashed its items,
      flattening the CTA. Items keep their size; the drawer scrolls.
   3. A tap leaves :hover stuck on touch screens, so "About" etc.
      stayed gold. Hover colour only where a real pointer hovers.
   ========================================================= */
@media (max-width: 1000px) {
  .site-header.scrolled .header-main { --main-h: 74px; }
  .site-header.scrolled .brand img { height: clamp(34px, 4vw, 44px); }
  .nav > *, .nav-list > .nav-item { flex-shrink: 0; }
  .nav { overscroll-behavior: contain; }
  .nav .header-cta { min-height: 52px; }
  .nav-item:hover .nav-link { color: #fff; }
  .nav-link.active, .nav-item:hover .nav-link.active { color: var(--gold-bright); }
}
@media (max-width: 1000px) and (hover: hover) {
  .nav-item:hover .nav-link { color: var(--gold-bright); }
}

/* Small uppercase labels had drifted to 10.9-11.8px; on small phones that
   is at the edge of readable. Floor them at 12px (.75rem). Sizes only. */
.tag,
.tier__step,
.tier__badge,
.price-panel__badge,
.toc__title,
.grp-label,
.pricing-grid--open .grp-label,
.pricing-grid--open .gain .eyebrow,
.stage-path__label,
.price-wide__label,
.paths__or,
table.cmp thead th:first-child { font-size: max(.75rem, 12px); }

/* footer bottom bar: the legal links get a 44px tap height on touch widths,
   the copyright line doesn't, so top-aligned items sat at different heights.
   Centre them on one line; when the bar wraps, centre each row. */
.footer-bottom { align-items: center; row-gap: .4rem; }
.footer-bottom > * { margin: 0; }
@media (max-width: 760px) {
  .footer-bottom { flex-direction: column; justify-content: center; text-align: center; }
}

/* homepage reframe hexagons: handwritten Caveat. Caveat runs much smaller
   than Inter Tight at the same size, so it's scaled up to read at a
   similar visual size inside the cell. */
.hexcells li {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(1.15rem, .85rem + .6vw, 1.4rem);
  line-height: 1.12;
  letter-spacing: 0;
}
@media (max-width: 820px) {
  .hexcells li { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.5rem); line-height: 1.25; }
}

/* single blog without section headings: no TOC sidebar, one centred column */
.article-layout.article-layout--solo { grid-template-columns: minmax(0, 760px); }

/* Accordion +/- drawn as one SVG mask instead of two positioned bars.
   Each row lands on a different sub-pixel offset, and the two bars were
   snapped to the pixel grid separately, so on some rows the cross came out
   1px off-centre or heavier. One vector icon keeps both strokes together. */
.accordion--open .acc__head .sign::before {
  top: 0; left: 0; width: 100%; height: 100%;
  border-radius: 0;
  transform: none;
  background: var(--gold-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0v14M0 7h14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.accordion--open .acc__head .sign::after { display: none; }
.accordion--open .acc.open .sign::before {
  background: var(--navy);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M0 7h14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M0 7h14' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E");
}

/* single blog: more breathing room between the header block and the cover
   (overrides the inline padding-top set on this section in each post) */
.article-hero + .section { padding-top: clamp(2.5rem, 5vw, 4rem) !important; }