.tm::after { content: "™"; }
.sector-proof { font-family: var(--font-serif); font-size: 0.95rem; color: var(--grey-1); margin: 14px 0 0; }


/* ── Lora, local font faces ─────────────────────────────────── */
/* ── Container ───────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 64px);
}

/* ── Skip link ───────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 18px;
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  z-index: 10000;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top 0.15s;
}
.skip-link:focus { top: 0; outline: 2px solid var(--cream); outline-offset: 2px; }

/* ── Token overrides ─────────────────────────────────────────── */
:root {
  --cream:    #F0EDE8;
  --grey-1:   #D2D2D2;
  --grey-2:   #8D8D8D; /* AA on black and surface */
  --grey-3:   #3A3A3A;
  --charcoal: #1A1A1A;
  --black:    #111111;
  --surface:  #161616;
  --border:   #2A2A2A;

  --border-col: #2A2A2A;

  /* Overlay opacity levels */
  --overlay-xs: rgba(12, 13, 16, 0.25);
  --overlay-sm: rgba(12, 13, 16, 0.52);
  --overlay-md: rgba(12, 13, 16, 0.58);
  --overlay-lg: rgba(12, 13, 16, 0.78);
  --overlay-xl: rgba(12, 13, 16, 0.84);
  --overlay-xxl: rgba(12, 13, 16, 0.88);

  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body:  'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:  'Lora', Georgia, 'Times New Roman', serif;

  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

html { overflow-x: hidden; }
body {
  font-family: var(--font-serif);
  background: var(--black);
  color: var(--cream);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--cream);
}
h1 {
  font-size: clamp(2.9rem, 6.5vw, 5.6rem);
  font-style: normal;
  font-weight: 400;
  line-height: 1.06;
  margin: 0;
}
.h1-pre {
  display: block;
  font-size: clamp(1.4rem, 2.8vw, 2.4rem);
  line-height: 1.3;
  color: var(--grey-1);
  margin-bottom: 0.15em;
  font-weight: 400;
}
.h1-big {
  display: block;
  font-size: clamp(3.8rem, 8.5vw, 7.2rem);
  line-height: 0.95;
  color: var(--cream);
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 500;
  line-height: 1.15;
}
h3 {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
}
p {
  font-family: var(--font-serif);
  color: var(--grey-1);
  font-size: 1rem;
  line-height: 1.82;
  font-weight: 400;
}
.lede {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--grey-1);
  line-height: 1.76;
  font-weight: 400;
}

/* Eyebrow: Lora */
.eyebrow {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  display: inline-block;
  margin-bottom: 18px;
  transition: letter-spacing 0.7s var(--ease);
}
.eyebrow.eyebrow-in {
  letter-spacing: 0.02em;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn-primary,
.btn-outline {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-primary {
  background: var(--cream);
  color: var(--charcoal);
  border-color: var(--cream);
}
.btn-primary:hover { background: transparent; color: var(--cream); border-color: var(--cream); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--cream);
  border-color: var(--grey-3);
}
.btn-outline:hover { border-color: var(--cream); color: var(--cream); transform: translateY(-1px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Nav CTA */
.nav-links .btn-primary {
  color: var(--charcoal) !important;
  padding: 9px 18px;
  font-size: 0.75rem;
}
.nav-links .btn-primary:hover,
.nav-links .btn-primary:focus-visible,
a.nav-cta-mobile:hover,
a.nav-cta-mobile:focus-visible {
  background: transparent !important;
  color: var(--cream) !important;
  border-color: var(--cream) !important;
}

/* ── Nav ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--overlay-xl);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-col);
}
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 clamp(20px, 5vw, 64px);
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  z-index: 10;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--cream);
  border-radius: 1px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 640px) {
  /* Remove backdrop-filter on mobile, it creates a stacking context
     that traps position:fixed children and breaks the overlay */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #111111;
  }
  .nav { height: 56px; }
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #111111;
    border-bottom: 1px solid var(--border-col);
    padding: 8px clamp(20px, 5vw, 40px) 28px;
    /* Hidden state, use opacity/pointer-events so transitions fire */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Sequential item reveal */
  .nav-links > * {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-links.is-open > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.08s; }
  .nav-links.is-open > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.14s; }
  .nav-links.is-open > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.20s; }
  .nav-links.is-open > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.26s; }
  .nav-links.is-open > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.32s; }

  .nav-links a:not(.btn-primary) {
    padding: 16px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-col);
    width: 100%;
  }
  .nav-links .btn-primary {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
  }
}
/* nav drawer extended to 900px */
@media (min-width: 641px) and (max-width: 940px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #111111;
  }
  .nav { height: 56px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    z-index: 9999;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #111111;
    border-bottom: 1px solid var(--border-col);
    padding: 8px clamp(20px, 5vw, 40px) 28px;
    
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links > * {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .nav-links.is-open > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.08s; }
  .nav-links.is-open > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.14s; }
  .nav-links.is-open > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.20s; }
  .nav-links.is-open > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.26s; }
  .nav-links.is-open > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.32s; }
  .nav-links a:not(.btn-primary) {
    padding: 16px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--border-col);
    width: 100%;
  }
  .nav-links .btn-primary {
    margin-top: 22px;
    width: 100%;
    justify-content: center;
    font-size: 0.85rem;
  }
}

.nav-links a {
  font-family: var(--font-serif);
  font-size: 0.83rem;
  font-weight: 400;
  color: var(--grey-1);
  letter-spacing: 0.02em;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--cream); }
.nav-links a[aria-current="page"]::after { background: var(--cream); height: 1px; }

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
}
.card:hover { border-color: var(--grey-3); transform: translateY(-2px); }

/* ── Section baseline ────────────────────────────────────────── */
.rule { border: none; border-top: 1px solid var(--border-col); margin: 0; }
.section-head { max-width: 720px; margin-bottom: clamp(36px, 5vw, 52px); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ── HERO ────────────────────────────────────────────────────── */
.hero {
  padding-top: clamp(88px, 13vw, 168px);
  padding-bottom: clamp(64px, 9vw, 120px);
  position: relative;
}
/* ── Hero two-column grid ────────────────────────────────────── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 188px;
  gap: clamp(48px, 7vw, 80px);
  align-items: end;
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
}
.hero-aside {
  padding-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero-id { display: flex; align-items: center; gap: 12px; }
.hero-id-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-col); flex-shrink: 0; }
.hero-id-name { display: block; font-family: var(--font-serif); font-size: 0.92rem; font-weight: 500; color: var(--cream); }
.hero-id-role { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin-top: 3px; }

.hero-aside-block {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  border-top: 1px solid var(--border-col);
}
.hero-aside-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  display: block;
  margin-bottom: 9px;
}
.hero-aside-value {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  display: block;
  line-height: 1.7;
}
/* Hero secondary audit link */
.hero-audit-link {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  margin: 14px 0 0;
  line-height: 1.5;
}
.hero-audit-cta {
  color: var(--grey-1);
  border-bottom: 1px solid var(--border-col);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero-audit-cta:hover { color: var(--cream); border-color: var(--grey-2); }

/* The signature diagonal, referencing the M& brand slash */
.hero-slash {
  width: clamp(160px, 44vw, 480px);
  height: 1px;
  background: linear-gradient(90deg, var(--grey-3) 0%, transparent 100%);
  margin: 44px 0 48px;
  transform: rotate(-7deg);
  transform-origin: left center;
}

.hero-sub {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 400;
  color: var(--grey-1);
  line-height: 1.5;
  margin: 18px 0 0;
  max-width: 620px;
}
.hero .lede { max-width: 560px; margin-bottom: 40px; }

/* ── Problem ─────────────────────────────────────────────────── */
.problem-section { padding: clamp(72px, 10vw, 128px) 0; }
.problem-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.problem-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  line-height: 1.7;
  padding-top: 10px;
  position: sticky;
  top: 100px;
}
.problem-right h2 { margin-bottom: 26px; }
.problem-right .lede { margin-bottom: 22px; }
.problem-right p + p { margin-top: 16px; }
.concept-link { display: inline-block; margin-top: 28px; font-family: var(--font-serif); font-size: 0.78rem; letter-spacing: 0.02em; color: var(--grey-1); border-bottom: 1px solid rgba(176,179,196,0.3); padding-bottom: 2px; text-shadow: 0 0 14px rgba(240, 237, 232,0.22); transition: color 0.25s, border-color 0.25s, text-shadow 0.25s; }
.concept-link:hover { color: var(--cream); border-color: var(--grey-2); text-shadow: 0 0 18px rgba(240, 237, 232,0.5); }
@media (max-width: 740px) {
  .problem-layout { grid-template-columns: 1fr; gap: 20px; }
  .problem-label { position: static; }
}

/* ── Proof strip ─────────────────────────────────────────────── */
.proof-strip { padding: clamp(28px, 4vw, 44px) 0; border-bottom: 1px solid var(--border-col); }
.proof-strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 32px);
}
.proof-item { text-align: left; }
.proof-value {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 500;
  color: var(--cream);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.proof-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  line-height: 1.5;
}
@media (max-width: 740px) {
  .proof-strip-inner { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
}

/* ── Symptoms ────────────────────────────────────────────────── */
.symptoms-section { padding: clamp(72px, 10vw, 128px) 0; }
.symptoms-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 48px); }
.symptoms-head h2 { margin-top: 14px; }
.symptoms-close { max-width: 700px; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cream); line-height: 1.6; }
/* ── Work, editorial rows ───────────────────────────────────── */
.work-section { padding: clamp(72px, 10vw, 128px) 0; }

.pillars { border-top: 1px solid var(--border-col); margin-top: 0; }
.pillar-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 40px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border-col);
  align-items: start;
  transition: background 0.2s;
}
.pillar-num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  padding-top: 4px;
}
.pillar-title {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.8vw, 1.42rem);
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 10px;
  line-height: 1.2;
  transition: color 0.2s;
}
.pillar-row:hover .pillar-title { color: var(--cream); }
.pillar-row p { font-size: 0.96rem; color: var(--grey-1); line-height: 1.78; margin: 0; }
.pillar-price {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  font-weight: 400;
  margin-left: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.pillar-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--cream);
  border-bottom: 1px solid var(--grey-3);
  padding-bottom: 2px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.pillar-link:hover { border-color: var(--cream); }
.pillar-group { margin-top: 28px; padding: clamp(28px, 4vw, 40px); }
.pillar-group-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.pillar-group-num {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--grey-1);
  flex-shrink: 0;
}
.pillar-group-head-main { flex: 1; min-width: 200px; }
.pillar-group-head-aside { flex-shrink: 0; text-align: right; padding-top: 4px; }
.pillar-group-title {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  font-weight: 600;
  color: var(--cream);
  margin-bottom: 8px;
  line-height: 1.2;
}
.pillar-group-desc { font-size: 0.92rem; color: var(--grey-2); line-height: 1.6; margin: 0; max-width: 560px; }
.pillar-group-body { margin-top: 18px; padding-left: 52px; }
.pillar-group-body p { font-size: 0.96rem; color: var(--grey-1); line-height: 1.78; margin: 0; }
.pillar-group-body p.pillar-feature-intro { color: var(--cream); font-weight: 600; margin-top: 20px; }
.pillar-variant { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--border-col); border-radius: var(--radius-md); background: rgba(255,255,255,0.02); }
.pillar-variant-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--cream); margin-bottom: 6px; }
.pillar-variant p { font-size: 0.9rem; color: var(--grey-1); line-height: 1.68; margin: 0; }
.ctp-blueprint { margin-top: 44px; border: 1px solid var(--border-col); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.ctp-blueprint img { display: block; width: 100%; height: auto; }
.pillar-group-body p.pillar-footnote { font-size: 0.88rem; color: var(--grey-2); line-height: 1.7; }
.pillar-group-body p.pillar-footnote + p.pillar-footnote { margin-top: 8px; }
.pillar-cta-link { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); border-bottom: 1px solid var(--grey-2); padding-bottom: 3px; text-decoration: none; transition: border-color 0.2s var(--ease); }
.pillar-cta-link:hover { border-color: var(--cream); }
.audit-dims { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.audit-dim { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); border: 1px solid var(--border-col); border-radius: 50px; padding: 6px 12px; }
.pillar-feature-list { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 11px; }
.pillar-feature-list li { font-family: var(--font-serif); font-size: 0.94rem; color: var(--grey-1); line-height: 1.68; padding-left: 18px; position: relative; }
.pillar-feature-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--grey-3); }
.pillar-feature-list li strong { color: var(--cream); font-weight: 600; }
.pillar-stages { margin-top: 20px; padding-left: 52px; display: flex; flex-direction: column; gap: 12px; }
.pillar-stage {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.02);
}
.pillar-stage-main { flex: 1; min-width: 200px; }
.pillar-stage-aside { flex-shrink: 0; text-align: right; }
.pillar-stage-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--cream); margin-bottom: 6px; }
.pillar-stage p { font-size: 0.9rem; color: var(--grey-1); line-height: 1.68; margin: 0; }
.pillar-group-head-aside .pillar-price,
.pillar-stage-aside .pillar-price { display: block; margin-left: 0; top: 0; font-size: 0.75rem; color: var(--cream); }
.pillar-meta { display: block; margin-top: 6px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); white-space: nowrap; }
.work-cta { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border-col); text-align: center; }
@media (max-width: 560px) {
  .pillar-group { padding: 24px 20px; }
  .pillar-group-body, .pillar-stages { padding-left: 0; }
  .pillar-group-head-aside { display: flex; align-items: baseline; gap: 14px; text-align: left; width: 100%; border-top: 1px solid var(--border-col); margin-top: 16px; padding-top: 14px; }
  .pillar-group-head-aside .pillar-meta { margin-top: 0; }
  .pillar-meta { white-space: normal; }
}
@media (max-width: 560px) {
  .pillar-row { grid-template-columns: 48px 1fr; gap: 16px; }
}

/* ── Sectors ─────────────────────────────────────────────────── */
.sectors-section { margin-top: 52px; padding-top: 40px; border-top: 1px solid var(--border-col); }
.sectors-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  display: block;
  margin-bottom: 20px;
}
.sectors-flow { display: flex; flex-wrap: wrap; }
.sector-tag {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--grey-1);
  padding: 7px 0;
  white-space: nowrap;
}
.sector-tag::after {
  content: '·';
  margin: 0 14px;
  color: var(--grey-2);
}
.sector-tag:last-child::after { display: none; }

/* ── About ───────────────────────────────────────────────────── */
.about-section { padding: clamp(72px, 10vw, 128px) 0; }
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1.75fr;
  gap: clamp(48px, 7vw, 88px);
  align-items: start;
}
.about-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
  display: block;
  filter: grayscale(6%) contrast(1.02) brightness(1.18);
}
.about-copy h2 { margin-bottom: 22px; }
.about-copy p + p { margin-top: 16px; }
@media (max-width: 840px) {
  .about-layout { grid-template-columns: 1fr; gap: 36px; }
  .about-photo { aspect-ratio: 4/3; max-height: 400px; object-position: center 15%; }
}

/* About services list */
.about-services {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
}
.about-services li {
  font-family: var(--font-serif);
  font-size: 0.96rem;
  color: var(--grey-1);
  line-height: 1.7;
  padding-left: 16px;
  position: relative;
}
.about-services li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--grey-2);
}

/* About scorecard */
.about-scorecard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(24px, 3.5vw, 44px);
  row-gap: 32px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--border-col);
}
@media (max-width: 560px) {
  .about-scorecard { grid-template-columns: 1fr; gap: 28px; }
}
.scorecard-list li a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease);
  display: block;
}
.scorecard-list li a:hover { color: var(--cream); }
.scorecard-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  display: block;
  margin-bottom: 14px;
}
.scorecard-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.scorecard-list li {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--grey-1);
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-col);
}
.scorecard-list li:last-child { border-bottom: none; }
.client-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px 26px;
  padding-top: 10px;
}
.client-logo {
  height: 17px;
  width: auto;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s var(--ease);
}
.client-logo:hover { opacity: 1; }
.client-logo--toyota,
.client-logo--qantas,
.client-logo--clearscore { height: 15px; }
.client-logo--kitkat { height: 30px; }

/* ── Thinking, pull quote ───────────────────────────────────── */
.thinking-section { padding: clamp(72px, 10vw, 128px) 0; }
.pov-pull {
  border-left: 1.5px solid var(--grey-3);
  padding-left: clamp(24px, 4vw, 52px);
  margin: 0 0 20px 0;
  max-width: 800px;
}
.pov-pull p {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
  line-height: 1.42;
  margin: 0;
}
.pov-meta {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  
  display: block;
  margin-bottom: 36px;
  padding-left: clamp(24px, 4vw, 52px);
}
.pov-body {
  padding-left: clamp(24px, 4vw, 52px);
  max-width: 680px;
  margin: 28px 0 40px;
}
.pov-body p { color: var(--grey-1); font-size: 1rem; line-height: 1.82; margin-bottom: 16px; }
.pov-body p:last-child { margin-bottom: 0; }
.thinking-cta { padding-left: clamp(24px, 4vw, 52px); }
.thinking-thumb { padding-left: clamp(24px, 4vw, 52px); margin: 32px 0 0; }
.thinking-thumb img { width: 100%; max-width: 560px; height: clamp(160px, 22vw, 240px); object-fit: cover; object-position: center; border: 1px solid var(--border-col); display: block; }

/* ── Testimonial cinema ──────────────────────────────────────── */
.testi-section { padding: 0; }

.testi-cinema-wrap {
  position: relative;
  min-height: 76vh;
  overflow: hidden;
}
.testi-cinema {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s var(--ease);
}
.testi-cinema.is-active {
  opacity: 1;
  pointer-events: auto;
}
@keyframes testiZoomOut {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}
.testi-cinema-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-color: var(--black);
  transform: scale(1.06);
}
/* Zoom starts only once the carousel is scrolled into view, so the first
   slide gets the same entrance as the others instead of burning its
   animation at page load */
.testi-cinema-wrap.in-view .testi-cinema.is-active .testi-cinema-bg {
  animation: testiZoomOut 9s ease forwards;
}

/* Uniform dark overlay, no directional gradient */
.testi-cinema-scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-sm);
}

/* Full-inset inner, quote in the top dead space, attribution bottom */
.testi-cinema-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(48px, 6vw, 88px) clamp(32px, 9vw, 148px);
}

.testi-cinema blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.6vw, 2.25rem);
  font-weight: 400;
  font-style: italic;
  color: var(--cream);
  line-height: 1.42;
  margin: 0 0 40px 0;
  max-width: 860px;
  text-shadow: 0 1px 24px rgba(12, 13, 16, 0.55);
}
.testi-cinema-attr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  max-width: 860px;
  background: var(--overlay-sm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 237, 232,0.14);
  border-radius: 50px;
  padding: 8px 20px 8px 8px;
}
.testi-cinema-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(240, 237, 232,0.28);
}
.testi-cinema-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 3px;
}
.testi-cinema-role {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: rgba(176,179,196,0.9);
  line-height: 1.6;
}
.testi-cinema-raise {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: rgba(176,179,196,0.65);
  margin-top: 2px;
}

/* Nav: elegant counter pill, bottom right, mirrors the attribution pill */
.testi-nav {
  position: absolute;
  z-index: 4;
  bottom: clamp(48px, 6vw, 88px);
  right: clamp(32px, 9vw, 148px);
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(12,13,16,0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(240, 237, 232,0.14);
  border-radius: 50px;
  padding: 5px;
}
.testi-prev,
.testi-next {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: rgba(240, 237, 232,0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.testi-prev:hover,
.testi-next:hover {
  color: var(--cream);
  background: rgba(240, 237, 232,0.08);
}
.testi-count {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(176,179,196,0.65);
  padding: 0 8px;
  white-space: nowrap;
  user-select: none;
}
.testi-count-current { color: var(--cream); }
.testi-count-sep { padding: 0 5px; }

@media (max-width: 640px) {
  .testi-cinema-wrap { min-height: 84vh; }
  .testi-cinema blockquote { font-size: 1.1rem; line-height: 1.5; min-height: 0; display: block; }
  .testi-cinema-inner { padding: clamp(40px, 10vw, 72px) clamp(20px, 6vw, 36px); padding-bottom: 76px; }
  .testi-cinema-attr { width: 100%; }
  .testi-nav {
    left: clamp(20px, 6vw, 36px);
    right: clamp(20px, 6vw, 36px);
    bottom: 18px;
    justify-content: space-between;
  }
}
/* nav drawer extended to 900px */
@media (min-width: 641px) and (max-width: 940px) {
  .testi-nav {
    left: clamp(20px, 6vw, 36px);
    right: clamp(20px, 6vw, 36px);
    bottom: 18px;
    justify-content: space-between;
  }
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-section { padding: clamp(72px, 10vw, 128px) 0; }
.faq-list { max-width: 860px; }
.faq-item { border-top: 1px solid var(--border-col); }
.faq-item:last-of-type { border-bottom: 1px solid var(--border-col); }
.faq-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-serif);
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.4;
  transition: color 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.faq-btn:hover { color: var(--cream); }
.faq-icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  position: relative;
  margin-top: 4px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--grey-3);
  transition: transform 0.25s var(--ease), opacity 0.2s;
}
.faq-icon::before { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
.faq-icon::after  { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.faq-item.is-open .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.faq-body {
  font-family: var(--font-serif);
  font-size: 0.97rem;
  color: var(--grey-1);
  line-height: 1.82;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease), padding-bottom 0.2s;
  padding-bottom: 0;
}
.faq-item.is-open .faq-body { max-height: 1200px; padding-bottom: 28px; }
.faq-cta {
  margin-top: 44px;
  padding: 22px 26px;
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.faq-cta p { font-size: 0.86rem; color: var(--grey-1); margin: 0; max-width: 460px; }


/* ── Contact ─────────────────────────────────────────────────── */
.contact-section { padding: clamp(72px, 10vw, 128px) 0; }
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(48px, 8vw, 96px);
  align-items: start;
}
.contact-left h2 { margin-bottom: 18px; }
.contact-left .lede { margin-bottom: 26px; }
.contact-email {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
  border-bottom: 1px solid var(--grey-3);
  display: inline-block;
  padding-bottom: 3px;
  transition: border-color 0.2s;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.contact-email:hover { border-color: var(--cream); }
.contact-process {
  margin-top: 36px;
}
.contact-process-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  display: block;
  margin-bottom: 14px;
}
.contact-process-step {
  display: flex;
  gap: 14px;
  margin-bottom: 12px;
  align-items: baseline;
}
.contact-process-num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  flex-shrink: 0;
  padding-top: 1px;
}
.contact-process-text {
  font-family: var(--font-serif);
  font-size: 0.94rem;
  color: var(--grey-1);
  line-height: 1.65;
}
/* Enquiry form */
.enquiry-form { display: flex; flex-direction: column; }
.form-field {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-col);
  transition: border-color 0.2s;
}
.form-field:first-child { border-top: 1px solid var(--border-col); }
.form-field:focus-within { border-bottom-color: var(--grey-2); }
.form-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  padding: 16px 0 0;
  display: block;
  transition: color 0.2s;
}
.form-field:focus-within .form-label { color: var(--grey-1); }
.form-field input,
.form-field textarea {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--cream);
  padding: 7px 0 15px;
  width: 100%;
  line-height: 1.5;
  resize: none;
  caret-color: var(--cream);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--grey-2); opacity: 0.85; }
.form-field textarea { min-height: 90px; }
.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}
.form-note {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  max-width: 240px;
  line-height: 1.6;
}
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form-footer { flex-direction: column; align-items: flex-start; }
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer-one {
  border-top: 1px solid var(--border-col);
  padding: clamp(28px, 4vw, 44px) 0;
}
.footer-one-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-nav a {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--grey-1);
  position: relative;
  transition: color 0.25s;
}
.footer-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-nav a:hover { color: var(--cream); }
.footer-nav a:hover::after { transform: scaleX(1); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-col);
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  border: 1px solid var(--border-col);
  border-radius: 999px;
  padding: 7px 14px;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.footer-social a:hover { color: var(--cream); border-color: var(--grey-2); }
.footer-copy {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
}

/* ── Acknowledgement of Country ─────────────────────────────── */
.aoc-wrap {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border-col);
}
.aoc-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 0;
  text-align: left;
  color: var(--grey-2);
  transition: color 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.aoc-btn:hover { color: var(--grey-1); }
.aoc-btn:hover .faq-icon::before,
.aoc-btn:hover .faq-icon::after { background: var(--grey-1); }
.aoc-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  display: flex;
  align-items: center;
  gap: 10px;
}
.aoc-flags {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.aoc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.aoc-wrap.is-open .aoc-body { max-height: 900px; }
.aoc-wrap.is-open .faq-icon::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.aoc-inner {
  padding-top: 24px;
  padding-bottom: 8px;
  max-width: 600px;
}
.aoc-inner p {
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--grey-1);
  line-height: 1.85;
  margin-bottom: 0;
}
.aoc-always {
  display: block;
  margin-top: 18px;
  font-style: italic;
  color: var(--grey-1) !important;
}

/* ── Cursor-revealed grid ────────────────────────────────────── */
#grid-cursor {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(240, 237, 232, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240, 237, 232, 0.1) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle 260px at var(--cx, -400px) var(--cy, -400px), black 0%, transparent 70%);
  mask-image:         radial-gradient(circle 260px at var(--cx, -400px) var(--cy, -400px), black 0%, transparent 70%);
}
/* Ensure content sits above the fixed grid layer */
#main, .footer-one { position: relative; z-index: 1; }

/* ── Scroll reveals ──────────────────────────────────────────── */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
/* Stagger pillar rows */
.pillars .pillar-row:nth-child(2) { transition-delay: 0.08s; }
.pillars .pillar-row:nth-child(3) { transition-delay: 0.16s; }
.pillars .pillar-row:nth-child(4) { transition-delay: 0.24s; }

/* ── Pillar row hover wipe ───────────────────────────────────── */
.pillar-row { position: relative; overflow: hidden; }
.pillar-row::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(240, 237, 232, 0.025);
  transform: translateX(-100%);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.pillar-row:hover::after { transform: translateX(0); }

/* ── POV quote, border draws down on scroll entry ───────────── */
.pov-pull { border-left: none; position: relative; }
.pov-pull::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.5px; height: 0;
  background: var(--grey-3);
  transition: height 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.pov-pull.in-view::before { height: 100%; }

/* ── Testimonial, fade up on scroll entry ────────────────────── */
/* (handled by shared .reveal / .in-view classes) */

/* ── Availability badge ──────────────────────────────────────── */
.availability-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 32px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
}
.availability-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #F0EDE8;
  flex-shrink: 0;
  animation: avail-pulse 2.2s ease-in-out infinite;
}
@keyframes avail-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 237, 232, 0.45); }
  50%       { box-shadow: 0 0 0 5px rgba(240, 237, 232, 0); }
}

/* ── Contact form PS line ────────────────────────────────────── */
.contact-ps {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--grey-2);
  margin-top: 24px;
  max-width: 100%;
}


/* ── Nav link underline slides in ───────────────────────────── */
.nav-links a:not(.btn-primary) { position: relative; }
.nav-links a:not(.btn-primary)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-links a:not(.btn-primary):hover::after { transform: scaleX(1); }

/* ── About photo hover swap ──────────────────────────────────── */
.about-photo-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  display: block;
}
.about-photo,
.about-photo-alt {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-photo-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
  object-position: center 15%;
}
.about-photo-wrap:hover .about-photo { opacity: 0; transform: scale(1.02); }
.about-photo-wrap:hover .about-photo-alt { opacity: 1; transform: scale(1.02); }
@media (max-width: 840px) {
  .about-photo, .about-photo-alt { aspect-ratio: 4/3; max-height: 400px; }
  .about-photo { object-position: center 15%; }
}

/* Hero content is visible on first paint. A short settle on the nav mark keeps a hint of the old entrance. */
@keyframes markSettle { from { opacity: 0.82; } to { opacity: 1; } }
.nav-logo img { animation: markSettle 0.8s ease both; }
@media (prefers-reduced-motion: reduce) { .nav-logo img { animation: none; } }

/* ── Hero aside, line draw + content stagger ────────────────── */
@keyframes lineDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes asideItemIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Container shows immediately; children animate individually */
.is-loaded .hero-aside { opacity: 1; animation: none; }

/* Identity chip fades in just after the aside container */
.hero .hero-id { opacity: 1; }
.is-loaded .hero .hero-id { animation: heroFadeUp 0.6s var(--ease) 0.55s both; }

/* Swap static border for an animated pseudo-element */
.hero-aside-block { border-top: none; position: relative; }
.hero-aside-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 1px;
  background: var(--border-col);
  transform: scaleX(0);
  transform-origin: left center;
}

/* Labels and values start hidden */
.hero-aside-label,
.hero-aside-value { opacity: 1; }

/* Block 1, Focus */
.is-loaded .hero-aside-block:nth-child(2)::before                        { animation: lineDraw    0.55s var(--ease) 0.65s both; }
.is-loaded .hero-aside-block:nth-child(2) .hero-aside-label               { animation: asideItemIn 0.40s var(--ease) 0.92s both; }
.is-loaded .hero-aside-block:nth-child(2) .hero-aside-value:nth-child(2)  { animation: asideItemIn 0.40s var(--ease) 0.98s both; }
.is-loaded .hero-aside-block:nth-child(2) .hero-aside-value:nth-child(3)  { animation: asideItemIn 0.40s var(--ease) 1.04s both; }
.is-loaded .hero-aside-block:nth-child(2) .hero-aside-value:nth-child(4)  { animation: asideItemIn 0.40s var(--ease) 1.10s both; }
.is-loaded .hero-aside-block:nth-child(2) .hero-aside-value:nth-child(5)  { animation: asideItemIn 0.40s var(--ease) 1.16s both; }

/* Block 2, Based */
.is-loaded .hero-aside-block:nth-child(3)::before                        { animation: lineDraw    0.50s var(--ease) 1.10s both; }
.is-loaded .hero-aside-block.hero-journey .hero-aside-label               { animation: asideItemIn 0.40s var(--ease) 1.32s both; }
.is-loaded .hero-aside-block:nth-child(3) .hero-aside-value               { animation: asideItemIn 0.40s var(--ease) 1.40s both; }

/* Reduced motion: reveal everything flat */
@media (prefers-reduced-motion: reduce) {
  .hero-aside-block::before { transform: scaleX(1) !important; animation: none !important; }
  .hero-aside-label, .hero-aside-value { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero .hero-id { opacity: 1 !important; animation: none !important; }
}

/* ── Reduced motion ──────────────────────────────────────────── */
/* ── Card transition ─────────────────────────────────────────── */
.card { transition: border-color 0.35s var(--ease), transform 0.35s var(--ease); }

/* ── Nav link hover underline ────────────────────────────────── */
.nav-links a:not(.btn-primary) { position: relative; padding-bottom: 3px; }
.nav-links a:not(.btn-primary)::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--cream);
  opacity: 0.55;
  transition: width 0.32s var(--ease);
}
.nav-links a:not(.btn-primary):hover::after,
.nav-links a:not(.btn-primary).is-active::after { width: 100%; }

/* ── Concept link hover ──────────────────────────────────────── */
.concept-link:hover { color: var(--cream); border-color: var(--grey-2); text-shadow: 0 0 18px rgba(240, 237, 232,0.5); }
.concept-link .arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.concept-link:hover .arrow { transform: translateX(4px); }

/* ── Form input / textarea focus ─────────────────────────────── */
.field input, .field textarea {
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--grey-2);
  background: rgba(255,255,255,0.03);
}

/* ── Hero text stagger (fires after loader via .is-loaded) ───── */
@keyframes heroFadeUp {
  from { opacity: 1; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero h1,
.hero .hero-sub,
.hero .hero-slash,
.hero .lede,
.hero .btn-row,
.hero .hero-audit-link,
.hero-aside { opacity: 1; }
.is-loaded .hero h1              { animation: heroFadeUp 0.75s var(--ease) 0.05s both; }
.is-loaded .hero .hero-sub       { animation: heroFadeUp 0.75s var(--ease) 0.17s both; }
.is-loaded .hero .hero-slash     { animation: heroFadeUp 0.5s  var(--ease) 0.26s both; }
.is-loaded .hero .lede           { animation: heroFadeUp 0.75s var(--ease) 0.30s both; }
.is-loaded .hero .btn-row        { animation: heroFadeUp 0.75s var(--ease) 0.42s both; }
.is-loaded .hero-aside           { animation: heroFadeUp 0.75s var(--ease) 0.50s both; }

/* ── Scorecard list item stagger ─────────────────────────────── */
.scorecard-list li {
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.in-view .scorecard-list li:nth-child(1) { opacity: 1; transform: none; }
.in-view .scorecard-list li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.07s; }
.in-view .scorecard-list li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.14s; }
.in-view .scorecard-list li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.21s; }
.in-view .scorecard-list li:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.28s; }
.in-view .scorecard-list li:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.35s; }

/* ── Nav scrollspy active state ──────────────────────────────── */
.nav-links a.is-active:not(.btn-primary) { color: var(--cream); }

/* ── Hide scroll-hint on mobile (aside is hidden, hint has no context) ─ */
@media (max-width: 900px) {
  .scroll-hint { display: none !important; }
  /* Hero CTAs: once the hero collapses to one column, stack the buttons
     at full width so they align instead of wrapping at uneven widths */
  .hero .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn-primary,
  .hero .btn-row .btn-outline { width: 100%; justify-content: center; box-sizing: border-box; text-align: center; }
}

/* ── Mobile optimisation ──────────────────────────────────────── */
@media (max-width: 480px) {
  /* "misunderstood.", 3.8rem at 375px overflows; pull back to ~38px */
  .h1-big { font-size: 2.4rem; line-height: 1.05; }

  /* Tighten the brand slash so it doesn't swamp the hero on small screens */
  .hero-slash { margin: 26px 0 30px; }

  /* Hero CTAs, both full width, stacked, easier tap targets */
  .btn-row .btn-primary,
  .btn-row .btn-outline { width: 100%; justify-content: center; box-sizing: border-box; }

  /* Pillar price tags, drop onto their own line so titles don't wrap mid-word */
  .pillar-price { display: block; margin-left: 0; margin-top: 5px; }

  /* Pillar inline link, bump font up slightly for touch */
  .pillar-link { font-size: 0.75rem; }

  /* About scorecard, less top breathing room */
  .about-scorecard { margin-top: 28px; }
}

/* ── Thinking section, strip right-column indent on single-column layout ── */
@media (max-width: 740px) {
  /* pov-pull keeps a small left pad to accommodate its animated border */
  .pov-pull { padding-left: 18px; }
  /* remaining elements flush with container edge */
  .thinking-thumb,
  .thinking-cta,
  .newsletter-wrap { padding-left: 0; }
  /* newsletter form fills available width */
  .newsletter-form { max-width: 100%; }
}

/* Touch / no-hover devices, suppress desktop-only interactions */
@media (hover: none) {
  #grid-cursor { display: none; }
  /* Photo swap effect is hover-only; hide the alt image to avoid flash on tap */
  .about-photo-alt { display: none; }
  /* FIX: tap fires :hover on touch, which faded the main photo to nothing.
     Keep it visible since there is no alt image to reveal on touch. */
  .about-photo-wrap:hover .about-photo { opacity: 1; transform: none; }
}

/* ── Newsletter signup ────────────────────────────────────────── */
.newsletter-wrap {
  padding-left: clamp(24px, 4vw, 52px);
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--border-col);
}
.newsletter-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  display: block;
  margin-bottom: 12px;
}
.newsletter-heading {
  font-family: var(--font-serif);
  font-size: clamp(0.92rem, 1.2vw, 1.05rem);
  font-weight: 400;
  color: var(--grey-1);
  line-height: 1.65;
  margin-bottom: 22px;
}
.newsletter-form {
  display: flex;
  align-items: center;
  max-width: 400px;
  border-bottom: 1px solid var(--border-col);
  transition: border-color 0.2s var(--ease);
}
.newsletter-form:focus-within { border-color: var(--grey-2); }
.newsletter-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--cream);
  padding: 10px 0;
  caret-color: var(--cream);
}
.newsletter-form input[type="email"]::placeholder { color: var(--grey-2); }
.newsletter-form button {
  flex-shrink: 0;
  background: none;
  border: none;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  cursor: pointer;
  padding: 10px 0 10px 14px;
  transition: color 0.2s var(--ease);
  white-space: nowrap;
}
.newsletter-form button:hover { color: var(--cream); }
.newsletter-note {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin-top: 10px;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slash { display: none; }
  #grid-cursor { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1, .hero .hero-sub, .hero .hero-slash,
  .hero .lede, .hero .btn-row, .hero .hero-audit-link,
  .hero-aside { opacity: 1; animation: none; }
  .scorecard-list li { opacity: 1; transform: none; transition: none; }
  /* new animation overrides */
  .hero .h1-big { clip-path: none !important; animation: none !important; }
  .eyebrow { letter-spacing: 0.02em !important; transition: none !important; }
  .scroll-hint { display: none !important; }
  #grain-overlay { display: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ── Scroll progress bar ─────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 1px;
  width: 100%;
  background: var(--grey-2);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 9999;
  pointer-events: none;
}

/* ── Grain overlay ───────────────────────────────────────────── */
#grain-overlay {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23grain)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── H1 big clip-path reveal ─────────────────────────────────── */
@keyframes h1Unveil {
  from { clip-path: inset(-0.1em 100% -0.25em 0); }
  to   { clip-path: inset(-0.1em 0% -0.25em 0); }
}
.hero .h1-big { clip-path: none; }

/* ── Hero scroll hint ────────────────────────────────────────── */
.hero .scroll-hint { opacity: 1; }
.is-loaded .hero .scroll-hint { animation: heroFadeUp 0.75s var(--ease) 0.56s both; }
.scroll-hint { margin-top: 40px; transition: opacity 0.6s var(--ease); }
.scroll-hint.is-gone { opacity: 0; pointer-events: none; }
.scroll-hint-line {
  width: 1px;
  height: 48px;
  background: var(--grey-3);
  position: relative;
  overflow: hidden;
}
@keyframes scrollHintDot {
  0%   { top: -100%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}
.scroll-hint-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 45%;
  background: linear-gradient(to bottom, transparent, var(--cream), transparent);
  animation: scrollHintDot 2.2s ease-in-out infinite 1.8s;
}

/* ── Pillar rows, slide from left ──────────────────────────── */
.pillars .pillar-row.reveal { transform: translateX(-20px); }
.pillars .pillar-row.reveal.in-view { transform: translateX(0); }


/* ── Section h2 underline draw ───────────────────────────────── */
.problem-right h2,
.contact-left h2 { position: relative; padding-bottom: 12px; }
.problem-right h2::after,
.contact-left h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 55%;
  background: linear-gradient(90deg, var(--grey-3) 0%, transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.35s;
}
.problem-right.in-view h2::after,
.contact-left.in-view h2::after { transform: scaleX(1); }


.contact-phone { display: block; margin-top: 8px; font-size: 0.9em; }

/* ── AIDN membership chip ──────────────────────────────── */
.aidn-chip { display: inline-flex; align-items: center; background: #F0EDE8; border-radius: 3px; padding: 10px 14px; flex-shrink: 0; }
.aidn-chip img { display: block; width: 120px; height: auto; }
.footer-bottom { flex-wrap: wrap; row-gap: 18px; }

/* ══════════════════════════════════════════════════════════════
   V2, sales architecture components
   ══════════════════════════════════════════════════════════════ */

/* ── Hero additions ──────────────────────────────────────────── */
.hero .hero-sub { color: var(--cream); font-size: clamp(1.15rem, 1.9vw, 1.5rem); margin: 0 0 16px; }
.hero .lede { margin-bottom: 32px; max-width: 600px; }
.hero-for {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin: 0 0 32px;
}
.hero .hero-for { opacity: 1; }
.is-loaded .hero .hero-for { animation: heroFadeUp 0.75s var(--ease) 0.36s both; }
.is-loaded .hero .hero-audit-link { animation: heroFadeUp 0.75s var(--ease) 0.48s both; }
.hero-meta {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin: clamp(40px, 6vw, 64px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-col);
  opacity: 1;
}
.is-loaded .hero-meta { animation: heroFadeUp 0.75s var(--ease) 0.62s both; }

/* Journey block in the aside: Technical credibility > Commercial momentum */
.hero-journey .hero-aside-value { color: var(--grey-1); }
.hero-journey-line {
  display: block;
  width: 1px;
  height: 26px;
  margin: 6px 0 6px 5px;
  background: linear-gradient(to bottom, var(--grey-3), var(--grey-2));
  position: relative;
  transform-origin: top;
  transform: scaleY(0);
}
.hero-journey-arrow {
  position: absolute;
  left: -3px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--grey-2);
  border-bottom: 1px solid var(--grey-2);
  transform: rotate(45deg);
}
.is-loaded .hero-aside-block.hero-journey::before                       { animation: lineDraw    0.50s var(--ease) 1.48s both; }
.is-loaded .hero-aside-block.hero-journey .hero-aside-label              { animation: asideItemIn 0.40s var(--ease) 1.66s both; }
.is-loaded .hero-aside-block.hero-journey .hero-journey-a                { animation: asideItemIn 0.40s var(--ease) 1.74s both; }
.is-loaded .hero-aside-block.hero-journey .hero-journey-line             { animation: journeyDraw 0.55s var(--ease) 1.86s both; }
.is-loaded .hero-aside-block.hero-journey .hero-journey-b                { animation: asideItemIn 0.40s var(--ease) 2.20s both; }
@keyframes journeyDraw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-journey-line { transform: scaleY(1) !important; animation: none !important; }
  .hero-for, .hero-meta { opacity: 1 !important; animation: none !important; }
}
.proof-strip-inner.proof-strip-three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 740px) {
  .proof-strip-inner.proof-strip-three { grid-template-columns: 1fr 1fr; }
}

/* ── 02 Trusted ──────────────────────────────────────────────── */
.trusted-section { padding: clamp(64px, 9vw, 112px) 0; }
.trusted-section .eyebrow { display: block; margin-bottom: 28px; }
.trusted-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px clamp(36px, 5vw, 72px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-col);
}
.trusted-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  opacity: 0.88;
  transition: opacity 0.2s var(--ease);
}
.trusted-logo:hover { opacity: 1; }
.trusted-logo-img { display: block; width: auto; }
.trusted-logo--at { height: 26px; }
.trusted-logo--eq { height: 34px; }
.trusted-logo--sb { height: 30px; }
.trusted-wordmark {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cream);
  white-space: nowrap;
}
.trusted-wordmark--solo { font-size: 1.15rem; letter-spacing: 0.02em; }
.trusted-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding: 22px 0 0;
}
.trusted-secondary .client-logos { padding-top: 0; gap: 16px 24px; }
.trusted-secondary .client-logo { height: 13px; opacity: 0.55; }
.trusted-secondary .client-logo--kitkat { height: 22px; }
.trusted-secondary .client-logo--google { height: 15px; }
.trusted-secondary-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
}
.client-wordmark {
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--grey-2);
}
.trusted-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  margin-top: clamp(40px, 6vw, 64px);
  align-items: start;
}
.trusted-quote { margin: 0; }
.trusted-quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-style: italic;
  line-height: 1.38;
  color: var(--cream);
  margin: 0 0 22px;
}
.trusted-quote footer {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
}
.trusted-quote-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-col); flex-shrink: 0; }
.trusted-stat {
  border-left: 1px solid var(--border-col);
  padding-left: clamp(22px, 3vw, 36px);
}
.trusted-stat-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin-bottom: 14px;
}
.trusted-stat p { font-size: 1.02rem; line-height: 1.7; color: var(--grey-1); margin: 0; }
.trusted-stat .concept-link { margin-top: 20px; }
@media (max-width: 800px) {
  .trusted-grid { grid-template-columns: 1fr; }
  .trusted-stat { border-left: none; padding-left: 0; border-top: 1px solid var(--border-col); padding-top: 24px; }
}

/* ── 03 Diagnostic statements ────────────────────────────────── */
.symptoms-hint { margin-top: 14px; max-width: 560px; }
.diag-list { border-top: 1px solid var(--border-col); }
.diag-row {
  width: 100%;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 3vw, 30px) 0;
  border-bottom: 1px solid var(--border-col);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.diag-row::after { content: none; }
.diag-row:hover,
.diag-row:focus-visible,
.diag-row.is-open { border-bottom-color: var(--cream); }
.diag-row:focus-visible { outline: 1px solid var(--grey-2); outline-offset: -1px; }
.diag-num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
}
.diag-text {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.35;
  color: var(--cream);
  transition: transform 0.4s var(--ease);
}
.diag-result {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s var(--ease), transform 0.45s var(--ease);
}
.diag-arrow { color: var(--grey-2); font-size: 0.8rem; }
.diag-row:hover .diag-result,
.diag-row:focus-visible .diag-result,
.diag-row.is-open .diag-result { opacity: 1; transform: translateY(0); }
.diag-row:hover .diag-text,
.diag-row.is-open .diag-text { transform: translateX(6px); }
.symptoms-close { margin-top: 28px; }
.ctg-intro {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: clamp(40px, 6vw, 64px);
}
.ctg-intro-line {
  flex: 0 0 clamp(48px, 8vw, 120px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--grey-2));
}
.ctg-intro-name {
  font-family: var(--font-serif);
  font-size: clamp(0.72rem, 1.4vw, 0.95rem);
  letter-spacing: 0.02em;
  
  color: var(--cream);
}
.ctg-intro-name sup { font-size: 0.55em; letter-spacing: 0; vertical-align: super; color: var(--grey-2); }
@media (max-width: 640px) {
  .diag-row { grid-template-columns: 40px 1fr; gap: 12px 14px; }
  .diag-result { grid-column: 2; }
  .diag-row:hover .diag-text, .diag-row.is-open .diag-text { transform: none; }
  .diag-result { display: none; }
  .diag-row.is-open .diag-result { display: inline-flex; }
}

/* ── 04 CTG diagram ──────────────────────────────────────────── */
.ctg-diagram {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  margin: 0 0 clamp(28px, 4vw, 40px);
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.ctg-pole { display: flex; flex-direction: column; gap: 8px; }
.ctg-pole--right { text-align: right; }
.ctg-pole-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
}
.ctg-pole-value {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  font-weight: 500;
  color: var(--cream);
  white-space: nowrap;
}
.ctg-span { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ctg-span-line { flex: 1; height: 1px; background: var(--grey-3); min-width: 12px; }
.ctg-span-label {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  text-align: center;
  white-space: nowrap;
}
.ctg-copy { max-width: 720px; margin-top: clamp(32px, 4vw, 44px); }
.ctg-copy .lede + .lede { margin-top: 12px; }
.ctg-copy-strong { color: var(--cream); }
.problem-section .ctp-blueprint { margin-top: 0; }
@media (max-width: 760px) {
  .ctg-diagram { grid-template-columns: 1fr; text-align: left; }
  .ctg-pole--right { text-align: left; }
  .ctg-span { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ctg-span-line { width: 48px; flex: none; }
  .ctg-span-label { white-space: normal; text-align: left; }
}

/* ── 05 / 10 Spec sheet ──────────────────────────────────────── */
.sprint-section { padding: clamp(72px, 10vw, 128px) 0 clamp(32px, 4vw, 48px); }
.activation-section { padding: clamp(64px, 9vw, 112px) 0; }
.spec-sheet {
  border: 1px solid var(--grey-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.spec-sheet::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(240, 237, 232, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240, 237, 232, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 55%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 55%);
}
.spec-sheet > * { position: relative; }
.spec-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px clamp(32px, 5vw, 64px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--border-col);
  align-items: start;
}
.spec-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin-bottom: 20px;
}
.spec-kicker {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-style: italic;
  color: var(--grey-1);
  margin: 0 0 8px;
}
.spec-head h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.spec-tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--grey-1);
  line-height: 1.5;
  margin: 0;
  max-width: 560px;
}
.spec-head-aside {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 220px;
  border: 1px solid var(--border-col);
  border-radius: var(--radius-sm);
  background: var(--black);
}
.spec-meta-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-col);
}
.spec-meta-row:last-child { border-bottom: none; }
.spec-meta-k {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
}
.spec-meta-v {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--cream);
  white-space: nowrap;
}
.spec-intro {
  padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--border-col);
  max-width: 820px;
}
.spec-outcome {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--cream);
  margin: 18px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--grey-3);
}
.spec-deliverables { padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 48px); }
.spec-section-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin-bottom: 22px;
}
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-col);
  border: 1px solid var(--border-col);
}
.spec-item {
  background: var(--surface);
  padding: 22px 22px 24px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
  transition: background 0.25s var(--ease);
}
.spec-item:hover { background: var(--black); }
.spec-item:nth-child(2) { transition-delay: 0.05s; }
.spec-item:nth-child(3) { transition-delay: 0.10s; }
.spec-item:nth-child(4) { transition-delay: 0.15s; }
.spec-item:nth-child(5) { transition-delay: 0.20s; }
.spec-item:nth-child(6) { transition-delay: 0.25s; }
.spec-item:nth-child(7) { transition-delay: 0.30s; }
.spec-item:nth-child(8) { transition-delay: 0.35s; }
.spec-item:nth-child(9) { transition-delay: 0.40s; }
.spec-item:nth-child(10) { transition-delay: 0.45s; }
.spec-item:nth-child(11) { transition-delay: 0.50s; }
.spec-num {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  padding-top: 5px;
}
.spec-item h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 6px; }
.spec-item p { font-size: 0.92rem; line-height: 1.65; margin: 0; }
.spec-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 32px;
  padding: clamp(22px, 3vw, 30px) clamp(24px, 4vw, 48px);
  border-top: 1px solid var(--grey-3);
  background: var(--black);
}
.spec-footer-stamp {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--cream);
}
.spec-footer-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.spec-footer-alt { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; }
.spec-sheet--compact .spec-head { border-bottom: 1px solid var(--border-col); }
.activation-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-col);
  border-bottom: 1px solid var(--border-col);
}
.activation-list li {
  background: var(--surface);
  padding: 18px clamp(20px, 3vw, 28px);
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--grey-1);
  line-height: 1.5;
  position: relative;
  padding-left: calc(clamp(20px, 3vw, 28px) + 16px);
}
.activation-list li::before {
  content: '';
  position: absolute;
  left: clamp(20px, 3vw, 28px);
  top: 26px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--grey-3);
}
.spec-footnote {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  padding: 18px clamp(24px, 4vw, 48px);
  margin: 0;
}
@media (max-width: 800px) {
  .spec-head { grid-template-columns: 1fr; }
  .spec-head-aside { min-width: 0; }
  .spec-grid { grid-template-columns: 1fr; }
  .activation-list { grid-template-columns: 1fr; }
}

/* ── 06 Guarantee ────────────────────────────────────────────── */
.guarantee-section { padding: clamp(32px, 4vw, 48px) 0 clamp(72px, 10vw, 128px); }
.guarantee-box {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
  border: 1px dashed var(--grey-3);
  border-radius: var(--radius-md);
  position: relative;
}
.guarantee-stamp {
  width: 160px;
  height: 160px;
  color: var(--grey-1);
  opacity: 0.75;
  transform: rotate(-8deg);
  transition: transform 1.2s var(--ease), opacity 0.8s var(--ease);
}
.guarantee-box.in-view .guarantee-stamp { transform: rotate(-4deg); opacity: 0.9; }
.guarantee-stamp svg { width: 100%; height: 100%; }
.guarantee-body h2 { margin: 0 0 18px; }
.guarantee-body .lede { max-width: 720px; color: var(--cream); }
.guarantee-terms {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-col);
  display: grid;
  gap: 8px;
  max-width: 720px;
}
.guarantee-terms li {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}
.guarantee-terms li::before { content: '–'; position: absolute; left: 0; color: var(--grey-2); }
@media (max-width: 720px) {
  .guarantee-box { grid-template-columns: 1fr; }
  .guarantee-stamp { width: 120px; height: 120px; }
}

/* ── 07 Before / After ───────────────────────────────────────── */
.ba-section { padding: clamp(72px, 10vw, 128px) 0; }
.ba-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-col);
  border: 1px solid var(--border-col);
  border-bottom: none;
}
.ba-tab {
  background: var(--black);
  padding: 18px 20px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  position: relative;
  transition: background 0.25s var(--ease);
}
.ba-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--cream);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.ba-tab.is-active { background: var(--surface); }
.ba-tab.is-active::after { transform: scaleX(1); }
.ba-tab:hover { background: var(--surface); }
.ba-tab-name {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
}
.ba-tab.is-active .ba-tab-name { color: var(--cream); }
.ba-tab-sub { font-family: var(--font-serif); font-size: 0.82rem; color: var(--grey-2); line-height: 1.4; }
.ba-panels {
  border: 1px solid var(--border-col);
  background: var(--surface);
  position: relative;
}
.ba-panel {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  gap: 0;
  align-items: stretch;
  animation: baIn 0.5s var(--ease) both;
}
.ba-panel[hidden] { display: none; }
@keyframes baIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ba-col { padding: clamp(28px, 4vw, 44px) clamp(22px, 3.5vw, 40px); display: flex; flex-direction: column; }
.ba-col-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin-bottom: 18px;
}
.ba-before p {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--grey-2);
  margin: 0;
}
.ba-after { background: rgba(240, 237, 232, 0.025); }
.ba-after .ba-col-label { color: var(--grey-1); }
.ba-after p {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--cream);
  margin: 0;
}
.ba-source {
  display: block;
  margin-top: auto;
  padding-top: 22px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
}
.ba-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border-col);
  border-right: 1px solid var(--border-col);
  color: var(--grey-2);
  font-size: 1.1rem;
}
.ba-note {
  margin-top: 16px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--grey-2);
}
@media (max-width: 760px) {
  .ba-tabs { grid-template-columns: 1fr; }
  .ba-tab { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .ba-tab-sub { text-align: right; }
  .ba-panel { grid-template-columns: 1fr; }
  .ba-divider { border: none; border-top: 1px solid var(--border-col); border-bottom: 1px solid var(--border-col); padding: 10px 0; }
  .ba-divider span { transform: rotate(90deg); display: inline-block; }
}

/* ── 08 Case studies ─────────────────────────────────────────── */
.cases-section { padding: clamp(72px, 10vw, 128px) 0; }
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.case-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.case-card:hover { border-color: var(--grey-3); transform: translateY(-3px); }
.case-card:nth-child(2) { transition-delay: 0.08s; }
.case-card:nth-child(3) { transition-delay: 0.16s; }
.case-card:hover, .case-card:hover:nth-child(2), .case-card:hover:nth-child(3) { transition-delay: 0s; }
.case-card-img {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-color: var(--black);
  filter: saturate(0.85);
  transition: filter 0.4s var(--ease);
}
.case-card:hover .case-card-img { filter: saturate(1); }
.case-card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.case-card-name {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin-bottom: 12px;
}
.case-card h3 { font-size: 1.1rem; font-weight: 500; line-height: 1.32; margin: 0 0 12px; }
.case-card-tags {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  margin-bottom: 18px;
  line-height: 1.7;
}
.case-card-pio {
  margin: 0 0 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-col);
  display: grid;
  gap: 10px;
}
.case-card-pio div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: start; }
.case-card-pio dt {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  padding-top: 3px;
}
.case-card-pio dd { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--grey-1); }
.case-card-result {
  margin: 2px 0 12px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
}
.case-card-result b { font-weight: 500; color: var(--cream); letter-spacing: 0.02em; margin-right: 8px; }
.case-card-link {
  margin-top: auto;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--cream);
}
@media (max-width: 900px) {
  .cases-grid { grid-template-columns: 1fr; }
  .case-card-img { aspect-ratio: 16 / 7; }
}

/* ── 09 Why ladder (inside About) ────────────────────────────── */
.about-copy .lede { margin-bottom: 8px; }
.why-ladder { margin-top: 26px; border-top: 1px solid var(--border-col); }
.why-step {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-col);
}
.why-step-k {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--cream);
  padding-top: 4px;
}
.why-step-v { font-family: var(--font-serif); font-size: 0.96rem; color: var(--grey-1); line-height: 1.65; }
@media (max-width: 560px) {
  .why-step { grid-template-columns: 1fr; gap: 6px; }
}

/* ── 11 (retired) ─────────────────────────────────────────────── */
.audit-section { padding: clamp(72px, 10vw, 128px) 0; }
.audit-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.audit-left h2 { margin-bottom: 18px; }
.audit-left .lede { margin-bottom: 22px; max-width: 520px; }
.audit-right {
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: clamp(24px, 3vw, 32px);
}
.audit-facts { display: grid; gap: 0; margin-bottom: 24px; border-top: 1px solid var(--border-col); }
.audit-facts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-col);
}
.audit-fact-k {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
}
.audit-fact-v { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--cream); }
.audit-right .btn-primary { width: 100%; justify-content: center; }
@media (max-width: 800px) {
  .audit-layout { grid-template-columns: 1fr; }
}

/* ── 12 Field Notes cards ────────────────────────────────────── */
.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.note-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.note-card:hover { border-color: var(--grey-3); transform: translateY(-3px); }
.note-card:nth-child(2) { transition-delay: 0.08s; }
.note-card:nth-child(3) { transition-delay: 0.16s; }
.note-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.note-card-body { padding: 20px 20px 22px; }
.note-card-tag {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin-bottom: 10px;
}
.note-card h3 { font-size: 1.05rem; font-weight: 500; line-height: 1.32; margin: 0 0 8px; }
.note-card p { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.notes-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: 24px;
  border-top: 1px solid var(--border-col);
}
.notes-footer .newsletter-form { max-width: 360px; flex: 1; min-width: 240px; }
.notes-footer .newsletter-note { width: 100%; margin-top: 0; }
@media (max-width: 900px) {
  .notes-grid { grid-template-columns: 1fr; }
}

/* ── 14 Final CTA ────────────────────────────────────────────── */
.final-cta {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(56px, 8vw, 96px);
  padding-bottom: clamp(48px, 7vw, 80px);
  border-bottom: 1px solid var(--border-col);
}
.final-cta h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); margin-bottom: 20px; }
.final-cta-meta {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-2);
  margin: 0 0 32px;
  line-height: 1.8;
}
.final-cta .btn-row { justify-content: center; }
@media (max-width: 480px) {
  .final-cta .btn-row { flex-direction: column; }
}

/* ── Nav: six links on mobile ────────────────────────────────── */
@media (max-width: 640px) {
  .nav-links.is-open > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.38s; }
}
/* nav drawer extended to 900px */
@media (min-width: 641px) and (max-width: 940px) {
  .nav-links.is-open > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.38s; }
}


/* ══════════════════════════════════════════════════════════════
   V2, mobile pass
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Hero aside becomes a compact two-up panel instead of a long stack */
  .hero-aside {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px 24px;
    margin-top: 8px;
    padding-top: 22px;
    border-top: 1px solid var(--border-col);
  }
  .hero-aside .hero-id { grid-column: 1 / -1; }
  .hero-aside-block { padding-top: 0; }
  .hero-aside-block::before { display: none; }
  .hero-aside-label, .hero-aside-value, .hero-journey-line { opacity: 1 !important; animation: none !important; transform: none !important; }
  .hero .hero-id { opacity: 1 !important; animation: none !important; }
  .hero-meta { margin-top: 36px; }
}
@media (max-width: 640px) {
  .hero { padding-top: clamp(64px, 12vw, 88px); }
  .hero .hero-sub { font-size: 1.1rem; }
  .hero-meta { font-size: 0.75rem; line-height: 2; }
  .proof-strip-inner.proof-strip-three { grid-template-columns: 1fr; row-gap: 0; }
  .proof-strip-three .proof-item { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border-col); }
  .proof-strip-three .proof-item:last-child { border-bottom: none; }
  .proof-strip-three .proof-value { margin: 0; font-size: 1.2rem; white-space: nowrap; }
  .proof-strip-three .proof-label { text-align: right; }
  .trusted-logos { gap: 22px 32px; }
  .trusted-logo--at { height: 22px; }
  .trusted-logo--eq { height: 30px; }
  .trusted-logo--sb { height: 26px; }
  .trusted-wordmark { font-size: 0.95rem; }
  .trusted-quote p { font-size: 1.3rem; }
  .ctg-intro { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ctg-intro-line { width: 48px; flex: none; }
  .ctg-intro-name { letter-spacing: 0.02em; font-size: 0.75rem; line-height: 1.8; }
  .spec-head h2 { font-size: 1.8rem; }
  .spec-footer { flex-direction: column; align-items: stretch; }
  .spec-footer-stamp { display: block; line-height: 1.9; letter-spacing: 0.02em; font-size: 0.75rem; }
  .spec-footer-cta { flex-direction: column; align-items: stretch; gap: 14px; }
  .spec-footer-cta .btn-primary { width: 100%; justify-content: center; }
  .spec-footer-alt { text-align: center; }
  .spec-item { padding: 18px 16px 20px; grid-template-columns: 32px 1fr; }
  .guarantee-box { padding: 28px 20px; }
  .guarantee-stamp { width: 104px; height: 104px; }
  .ba-tab { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .ba-tab-sub { text-align: left; font-size: 0.78rem; }
  .ba-col { padding: 22px 18px; }
  .case-card-body { padding: 18px 18px 20px; }
  .case-card-pio div { grid-template-columns: 76px 1fr; }
  .about-scorecard { grid-template-columns: 1fr; gap: 24px; }
  .audit-right { padding: 20px; }
  .notes-footer { flex-direction: column; align-items: stretch; }
  .notes-footer .btn-outline { width: 100%; justify-content: center; }
  .notes-footer .newsletter-form { max-width: 100%; }
  .final-cta h2 br, .audit-left h2 br { display: none; }
  .final-cta { margin-bottom: 48px; padding-bottom: 40px; }
  .final-cta-meta { line-height: 2; font-size: 0.75rem; }
  .contact-layout { gap: 36px; }
  .spec-footnote, .ba-note, .symptoms-hint { font-size: 0.75rem; }
  .symptoms-hint { font-size: 0.98rem; }
}
@media (min-width: 641px) and (max-width: 840px) {
  .about-scorecard { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
@media (max-width: 400px) {
  .diag-text { font-size: 1.08rem; }
  .diag-row { padding: 18px 0; }
  .ba-after p { font-size: 1.1rem; }
  .spec-outcome { font-size: 1.1rem; }
}
/* Touch devices: no lingering hover states on rows and cards */
@media (hover: none) {
  .diag-row:hover::after { transform: translateX(-100%); }
  .diag-row.is-open::after { transform: translateX(0); }
  .diag-row:hover .diag-result { opacity: 0; transform: translateY(6px); }
  .diag-row.is-open .diag-result { opacity: 1; transform: translateY(0); }
  .diag-row:hover .diag-text { transform: none; }
  .case-card:hover, .note-card:hover { transform: none; }
  .guarantee-stamp { transition: none; }
}

/* ── Mobile: audit CTA stays visible in the header, outside the menu ── */
.nav-mobile-right { display: contents; }
.nav-cta-mobile { display: none; }
@media (max-width: 640px) {
  .nav-mobile-right { display: flex; align-items: center; gap: 10px; }
  .nav-cta-mobile { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; font-size: 0.75rem; color: var(--charcoal) !important; white-space: nowrap; }
  .nav-links .nav-cta { display: none; }
}
/* nav drawer extended to 900px */
@media (min-width: 641px) and (max-width: 940px) {
  .nav-mobile-right { display: flex; align-items: center; gap: 10px; }
  .nav-cta-mobile { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; font-size: 0.75rem; color: var(--charcoal) !important; white-space: nowrap; }
  .nav-links .nav-cta { display: none; }
}

/* ── V2.1 offer stack ─────────────────────────────────────────── */
.spec-timeline { margin-top: 26px; border-top: 1px solid var(--border-col); }
.spec-timeline li {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 22px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-col);
}
.spec-tl-k { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); padding-top: 4px; white-space: nowrap; }
.spec-tl-v { font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.62; color: var(--grey-1); }
.spec-item--wide { grid-column: 1 / -1; }
.spec-item--wide p { max-width: 720px; }
.spec-ask { margin-top: clamp(24px, 3vw, 32px); padding-top: clamp(22px, 3vw, 28px); border-top: 1px solid var(--border-col); }
.spec-ask-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px clamp(20px, 3vw, 32px); }
.spec-ask-list li { font-family: var(--font-serif); font-size: 0.9rem; line-height: 1.62; color: var(--grey-1); }
.spec-ask-list li strong { display: block; color: var(--cream); font-weight: 600; margin-bottom: 4px; }
.spec-footer-gst { display: block; margin-top: 6px; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); }
.teardown-section { padding: clamp(64px, 9vw, 112px) 0; }
.teardown-section .section-head { margin-bottom: clamp(24px, 3vw, 32px); }
.teardown-list { grid-template-columns: repeat(2, 1fr); }
.act-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-col); border-bottom: 1px solid var(--border-col); }
.act-shape { background: var(--surface); padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 28px); }
.act-shape-k { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin-bottom: 12px; }
.act-shape h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 8px; }
.act-shape p { font-size: 0.92rem; line-height: 1.65; margin: 0; }
.audit-ladder { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 22px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); }
.audit-ladder-sep { color: var(--grey-2); letter-spacing: 0; }
.form-field select {
  background: transparent; border: none; outline: none; font-family: var(--font-serif); font-size: 0.9rem; color: var(--cream);
  padding: 7px 0 15px; width: 100%; line-height: 1.5; appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B6E82' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px top 12px;
}
.form-field select option { background: var(--surface); color: var(--cream); }
.form-field select:invalid, .form-field select option[value=""] { color: var(--grey-2); }
@media (max-width: 800px) {
  .spec-ask-list { grid-template-columns: 1fr; }
  .teardown-list, .act-shapes { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .spec-timeline li { grid-template-columns: 1fr; gap: 4px; }
  .nav-links.is-open > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.44s; }
  .nav-links.is-open > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.50s; }
}
/* nav drawer extended to 900px */
@media (min-width: 641px) and (max-width: 940px) {
  .nav-links.is-open > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.44s; }
  .nav-links.is-open > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.50s; }
}

/* ══════════════════════════════════════════════════════════════
   V3, pacing, chapters and the four-stage pathway
   ══════════════════════════════════════════════════════════════ */

/* Chapter tone: alternate surface backgrounds so the page reads in chapters */
.section-tone { background: var(--surface); border-top: 1px solid var(--border-col); border-bottom: 1px solid var(--border-col); }
.section-tone + .rule, .rule:has(+ .section-tone) { display: none; }
.section-tone .spec-sheet, .section-tone .ctg-diagram, .section-tone .audit-right { background: var(--black); }

/* Hero: two CTAs, differentiated */
.hero .btn-row { margin-bottom: 4px; }
.hero .hero-audit-link { margin-top: 18px; }

/* CTG chapter: one big statement, then the diagram */
.ctg-statement { max-width: 760px; margin-bottom: clamp(32px, 5vw, 48px); }
.ctg-statement .ctg-intro-name { display: block; margin-bottom: 22px; font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-1); }
.ctg-statement h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); margin-bottom: 20px; }
.ctg-statement .lede { max-width: 640px; }
.ctg-link-row { margin: clamp(24px, 3vw, 32px) 0 0; }
.problem-section.section-tone { padding: clamp(80px, 11vw, 140px) 0; }

/* Pathway: the four-stage anchor */
.pathway-section { padding: clamp(80px, 11vw, 140px) 0; }
.pathway {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 40px);
  position: relative;
  padding-top: 28px;
}
.pathway::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--grey-3) 0%, var(--grey-2) 50%, var(--grey-3) 100%);
}
.path-stage { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.path-stage::before {
  content: '';
  position: absolute;
  top: -32px; left: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grey-2);
  border: 1px solid var(--black);
}
.path-stage--start::before { background: var(--cream); box-shadow: 0 0 0 4px rgba(240, 237, 232,0.12); }
.path-num { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--grey-2); line-height: 1; letter-spacing: -0.02em; }
.path-stage--start .path-num { color: var(--cream); }
.path-name { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 600; color: var(--cream); line-height: 1.25; margin-top: 8px; }
.path-desc { font-family: var(--font-serif); font-size: 0.95rem; color: var(--grey-1); line-height: 1.5; }
.path-price { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin-top: 6px; line-height: 1.7; }
.path-link { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); margin-top: 10px; border-bottom: 1px solid var(--grey-3); padding-bottom: 3px; align-self: flex-start; transition: border-color 0.2s var(--ease); }
.path-link:hover { border-color: var(--cream); }
.path-stage--start .path-link { border-color: var(--cream); }
.pathway-note { margin-top: clamp(28px, 4vw, 40px); font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); line-height: 1.8; }
@media (max-width: 800px) {
  .pathway { grid-template-columns: 1fr; gap: 0; padding-top: 0; padding-left: 28px; }
  .pathway::before { top: 0; bottom: 0; left: 3px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--grey-3), var(--grey-2), var(--grey-3)); }
  .path-stage { padding: 22px 0; border-bottom: 1px solid var(--border-col); }
  .path-stage:last-child { border-bottom: none; }
  .path-stage::before { top: 30px; left: -28px; }
}

/* Diagnostic: editorial two-column, no box */
.diagnostic-section { padding: clamp(80px, 11vw, 140px) 0; }
.diag-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 96px); align-items: start; }
.diag-main h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 20px; }
.diag-main .lede { margin-bottom: 18px; }
.diag-outcome { font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; color: var(--grey-1); margin: 0 0 28px; padding-left: 18px; border-left: 2px solid var(--grey-3); max-width: 560px; }
.diag-terms { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 30px; padding: 18px 0; border-top: 1px solid var(--border-col); border-bottom: 1px solid var(--border-col); }
.diag-term { display: flex; flex-direction: column; gap: 6px; }
.diag-term-k { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); }
.diag-term-v { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--cream); }
.diag-side { padding-top: 10px; }
.diag-side-label { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin-bottom: 16px; }
.diag-scope { counter-reset: scope; border-top: 1px solid var(--border-col); margin-bottom: 30px; }
.diag-scope li { counter-increment: scope; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-col); font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.55; color: var(--grey-1); }
.diag-scope li::before { content: counter(scope, decimal-leading-zero); font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); padding-top: 4px; }
.diag-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.diag-boundary p { font-size: 0.88rem; line-height: 1.6; color: var(--grey-1); margin: 0; }
.diag-boundary div:first-child p { color: var(--cream); }
@media (max-width: 860px) {
  .diag-layout { grid-template-columns: 1fr; }
  .diag-boundary { grid-template-columns: 1fr; gap: 18px; }
}

/* Sprint: four outcomes, progressive disclosure */
.sprint-section.section-tone { padding: clamp(80px, 11vw, 140px) 0; }
.sprint-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.sprint-head h2 { font-size: clamp(2rem, 3.8vw, 3rem); margin-bottom: 16px; }
.sprint-tagline { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--cream); margin: 0 0 16px; }
.sprint-head .lede { max-width: 640px; }
.outcomes { border-top: 1px solid var(--grey-3); }
.outcome { border-bottom: 1px solid var(--border-col); }
.outcome summary {
  list-style: none;
  display: grid;
  grid-template-columns: 56px 1fr 28px;
  gap: 20px;
  align-items: start;
  padding: clamp(20px, 3vw, 28px) 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.outcome summary::-webkit-details-marker { display: none; }
.outcome summary:focus-visible { outline: 1px solid var(--grey-2); outline-offset: 4px; }
.outcome-num { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); padding-top: 6px; }
.outcome-main { display: flex; flex-direction: column; gap: 6px; }
.outcome-name { font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 500; color: var(--cream); line-height: 1.25; }
.outcome-desc { font-family: var(--font-serif); font-size: 0.96rem; color: var(--grey-1); line-height: 1.62; max-width: 640px; }
.outcome-toggle { position: relative; width: 15px; height: 15px; margin-top: 8px; justify-self: end; }
.outcome-toggle::before, .outcome-toggle::after { content: ''; position: absolute; background: var(--grey-3); transition: transform 0.25s var(--ease), opacity 0.2s; }
.outcome-toggle::before { width: 100%; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
.outcome-toggle::after { width: 1px; height: 100%; left: 50%; top: 0; transform: translateX(-50%); }
.outcome[open] .outcome-toggle::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.outcome-includes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; padding: 0 0 clamp(20px, 3vw, 28px) 76px; }
.outcome-includes li { font-family: var(--font-serif); font-size: 0.9rem; color: var(--grey-1); line-height: 1.6; padding-left: 14px; position: relative; }
.outcome-includes li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 4px; height: 4px; border-radius: 50%; background: var(--grey-3); }
.sprint-meta { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 64px); margin-top: clamp(36px, 5vw, 56px); }
.spec-timeline--compact { margin-top: 0; }
.spec-timeline--compact .spec-tl-v { font-size: 0.9rem; }
.spec-ask-list--stack { grid-template-columns: 1fr; gap: 14px; border-top: 1px solid var(--border-col); padding-top: 14px; }
.sprint-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 32px; margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--grey-3); }
.sprint-price { display: flex; flex-direction: column; gap: 6px; }
.sprint-price-main { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); }
.sprint-price-sub { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); }
@media (max-width: 800px) {
  .outcome summary { grid-template-columns: 40px 1fr 20px; gap: 12px; }
  .outcome-includes { grid-template-columns: 1fr; padding-left: 52px; }
  .sprint-meta { grid-template-columns: 1fr; }
  .sprint-footer { flex-direction: column; align-items: stretch; }
  .sprint-footer .btn-primary { width: 100%; justify-content: center; }
  .sprint-price-main { line-height: 1.9; letter-spacing: 0.02em; }
}

/* Guarantee: sits on tone, lose the dashed box */
.guarantee-section.section-tone { padding: clamp(80px, 11vw, 140px) 0; }
.guarantee-section.section-tone .guarantee-box { border: none; padding: 0; }

/* Quarter layout */
.activation-section { padding: clamp(80px, 11vw, 140px) 0; }
.act-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 40px); }
.act-head h2 { margin-bottom: 16px; }
.act-shapes--open { background: transparent; border-bottom: none; gap: clamp(24px, 4vw, 48px); }
.act-shapes--open .act-shape { background: transparent; padding: 22px 0 0; border-top: 1px solid var(--grey-3); }
.act-price { margin-top: clamp(24px, 3vw, 32px); font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); line-height: 1.9; }

/* Audit on tone */
.audit-section.section-tone { padding: clamp(72px, 10vw, 120px) 0; }

/* Insights: compact row */
.thinking-section { padding: clamp(56px, 8vw, 88px) 0; }
.insights-row { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.insights-head h3 { font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 500; line-height: 1.3; margin: 0; }
.insights-head .eyebrow { display: block; }
.insights-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-col); }
.insights-list li { border-bottom: 1px solid var(--border-col); }
.insights-list a { display: block; padding: 12px 0; font-family: var(--font-serif); font-size: 0.95rem; color: var(--grey-1); line-height: 1.45; transition: color 0.2s var(--ease); }
.insights-list a:hover { color: var(--cream); }
.insights-list .arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.insights-list a:hover .arrow { transform: translateX(4px); }
.insights-all a { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); }
.insights-news .newsletter-form { max-width: 100%; }
@media (max-width: 900px) {
  .insights-row { grid-template-columns: 1fr; gap: 24px; }
}

/* Form footer note */
.form-footer .form-note { max-width: none; }

/* Symptoms head: eyebrow now says The problem */
.symptoms-section { padding-bottom: clamp(56px, 8vw, 96px); }

/* ── V3.1 simplification ─────────────────────────────────────── */
.trusted-grid--single { grid-template-columns: 1fr; max-width: 860px; }
.trusted-logos { border-bottom: none; padding-bottom: 8px; }
.trusted-grid { margin-top: clamp(28px, 4vw, 40px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--border-col); }
.problem-section .ctp-blueprint { margin-top: 0; }
.path-stage { gap: 6px; }
.guarantee-fine { margin-top: 24px; max-width: 720px; }
.guarantee-fine summary { list-style: none; cursor: pointer; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); padding: 12px 0; border-top: 1px solid var(--border-col); border-bottom: 1px solid var(--border-col); display: flex; justify-content: space-between; align-items: center; }
.guarantee-fine summary::-webkit-details-marker { display: none; }
.guarantee-fine summary::after { content: '+'; font-size: 0.9rem; color: var(--grey-2); }
.guarantee-fine[open] summary::after { content: '\2013'; }
.guarantee-fine summary:focus-visible { outline: 1px solid var(--grey-2); outline-offset: 2px; }
.guarantee-fine .guarantee-terms { margin-top: 16px; padding-top: 0; border-top: none; }
.about-press { margin-top: 22px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); }
.about-press a { color: var(--grey-1); border-bottom: 1px solid var(--border-col); padding-bottom: 1px; transition: color 0.2s, border-color 0.2s; }
.about-press a:hover { color: var(--cream); border-color: var(--grey-1); }
.audit-layout--single { grid-template-columns: 1fr; max-width: 640px; }
.audit-layout--single .audit-dims { margin-bottom: 28px; }
.final-cta { padding-bottom: 0; border-bottom: none; margin-bottom: clamp(40px, 6vw, 64px); }
.final-cta-meta { margin-bottom: 0; }
.case-card h3 { margin-bottom: 18px; }

/* ══════════════════════════════════════════════════════════════
   V4, hero, client grid, loud symptoms, four tiers, gallery, callout
   ══════════════════════════════════════════════════════════════ */
.hero--v4 { padding-bottom: clamp(28px, 4vw, 40px); }
.proof-strip { padding: 4px 0 clamp(36px, 5vw, 56px); }
.proof-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; }
.proof-list a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; min-height: 44px; text-decoration: none; color: inherit; }
.proof-mark { height: 32px; display: flex; align-items: center; }
.proof-logo { display: block; width: auto; max-width: 100%; object-fit: contain; }
.proof-logo--eq { height: 18px; }
.proof-logo--at { height: 18px; }
.proof-logo--sb { height: 28px; }
.proof-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.proof-stat { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; line-height: 1.2; color: var(--cream); }
.proof-desc { font-family: var(--font-serif); font-size: 13px; line-height: 1.4; color: var(--grey-2); }
@media (max-width: 720px) {
  .proof-list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--border-col); }
  .proof-list a { flex-direction: row; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border-col); }
  .proof-mark { width: 146px; flex: none; }
  .proof-logo--eq, .proof-logo--at { height: 16px; }
}
.hero-grid--single { grid-template-columns: 1fr; }
.h1-v4 { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.04; max-width: 15ch; }
.hero--v4 .hero-sub { color: var(--cream); font-size: clamp(1.1rem, 1.7vw, 1.35rem); margin: 0 0 14px; max-width: 640px; }
.hero--v4 .lede { max-width: 620px; margin-bottom: 36px; }
.hero--v4 .btn-row { margin-bottom: 0; }
@media (max-width: 480px) { .hero--v4 .h1-v4 { font-size: 1.95rem; } }

/* Selected clients grid */
.clients-section { padding: clamp(40px, 6vw, 64px) 0 clamp(56px, 8vw, 88px); }
.clients-section .eyebrow { display: block; margin-bottom: 22px; }
.client-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--border-col);
  border: 1px solid var(--border-col);
}
.client-cell {
  background: var(--black);
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  transition: background 0.25s var(--ease);
}
.client-cell:hover { background: var(--surface); }
.client-cell a { display: flex; align-items: center; justify-content: center; }
.client-cell-img { display: block; width: auto; opacity: 0.78; transition: opacity 0.2s var(--ease); }
.client-cell:hover .client-cell-img { opacity: 1; }
.client-cell--google { height: 22px; }
.client-cell--toyota { height: 18px; }
.client-cell--streamotion { height: 15px; }
.client-cell--at { height: 24px; }
.client-cell--sb { height: 28px; }
.client-cell--eq { height: 56px; }
.client-cell-word { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; color: var(--grey-1); }
.client-cell-word--sm { font-size: 0.86rem; font-weight: 500; letter-spacing: 0.01em; margin-left: 10px; white-space: nowrap; }
.client-cell-combo { gap: 0; }
@media (max-width: 900px) { .client-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .client-grid { grid-template-columns: repeat(2, 1fr); } .client-cell { min-height: 84px; } .client-cell-word--sm { white-space: normal; text-align: center; margin-left: 8px; } }

/* Loud symptom reveal */
.diag-list--loud .diag-row { grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 11.5rem); align-items: center; overflow: visible; }
.diag-list--loud .diag-row::after { content: none; background: none; }
.diag-list--loud .diag-text { transition: color 0.35s var(--ease); }
.diag-list--loud .diag-row:hover .diag-text,
.diag-list--loud .diag-row:focus-visible .diag-text,
.diag-list--loud .diag-row.is-open .diag-text { color: var(--cream); transform: none; }
.diag-list--loud .diag-result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  white-space: normal; letter-spacing: 0; text-transform: none;
  min-width: 0; max-width: 100%;
  padding-left: 18px; border-left: 1px solid var(--grey-3);
  opacity: 0.22; transform: none;
  transition: opacity 0.35s var(--ease), border-color 0.35s var(--ease);
}
.diag-result-k { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); }
.diag-result-v { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.25; color: var(--cream); white-space: normal; overflow-wrap: break-word; }
.diag-list--loud .diag-row:hover .diag-result,
.diag-list--loud .diag-row:focus-visible .diag-result,
.diag-list--loud .diag-row.is-open .diag-result { opacity: 1; border-left-color: var(--cream); }
@media (max-width: 800px) {
  .diag-list--loud .diag-row { grid-template-columns: 40px 1fr; gap: 10px 14px; }
  .diag-list--loud .diag-result { grid-column: 2; display: flex; opacity: 1; border-left-color: var(--grey-3); padding-left: 16px; }
  .diag-list--loud .diag-result-v { font-size: 1.1rem; }
  .diag-list--loud .diag-row:hover .diag-text, .diag-list--loud .diag-row.is-open .diag-text { color: var(--cream); transform: none; }
}
@media (hover: none) { .diag-list--loud .diag-result { opacity: 1; } }

/* Four tiers */
.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-col);
  border: 1px solid var(--border-col);
}
.tier { background: var(--black); padding: clamp(24px, 3vw, 32px) clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 10px; position: relative; }
.tier--start { background: var(--surface); }
.tier--start::before { content: 'Start here'; position: absolute; top: 14px; right: 16px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); border: 1px solid var(--grey-3); border-radius: 50px; padding: 4px 9px; }
.tier-num { font-family: var(--font-serif); font-size: 1.6rem; color: var(--grey-2); line-height: 1; }
.tier--start .tier-num { color: var(--cream); }
.tier-name { font-family: var(--font-serif); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 600; color: var(--cream); line-height: 1.25; margin: 6px 0 0; }
.tier-desc { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); }
.tier-body { font-size: 0.9rem; line-height: 1.62; color: var(--grey-1); margin: 8px 0 4px; }
.tier-list { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border-col); }
.tier-list li { font-family: var(--font-serif); font-size: 0.84rem; line-height: 1.55; color: var(--grey-1); padding-left: 12px; position: relative; }
.tier-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--grey-3); }
.tier-price { margin-top: auto; padding-top: 16px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); line-height: 1.7; }
.tier-link { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); border-bottom: 1px solid var(--grey-3); padding-bottom: 3px; align-self: flex-start; transition: border-color 0.2s var(--ease); }
.tier-link:hover { border-color: var(--cream); }
@media (max-width: 1000px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tiers { grid-template-columns: 1fr; } }

/* Quote under case studies */
.trusted-quote--after { max-width: 860px; margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--border-col); }

/* Field Notes gallery */
.thinking-section--gallery { padding: clamp(72px, 10vw, 128px) 0; }
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(200px, auto);
  gap: clamp(12px, 1.6vw, 20px);
}
.gallery-tile {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  background: var(--surface);
  min-height: 220px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.gallery-tile:hover { border-color: var(--grey-3); transform: translateY(-3px); }
.gallery-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8); transition: transform 0.9s var(--ease), filter 0.4s var(--ease); }
.gallery-tile:hover img { transform: scale(1.03); filter: saturate(1); }
.gallery-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,13,16,0.92) 0%, rgba(12,13,16,0.45) 45%, rgba(12,13,16,0.05) 100%); }
.gallery-tile-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px 18px 20px; }
.gallery-tag { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); margin-bottom: 8px; }
.gallery-tile h3 { font-size: 1rem; font-weight: 500; line-height: 1.3; margin: 0; color: var(--cream); }
.gallery-tile p { display: none; font-size: 0.9rem; color: var(--grey-1); line-height: 1.55; margin: 8px 0 0; max-width: 480px; }
.gallery-tile--feature { grid-column: span 2; grid-row: span 2; min-height: 420px; }
.gallery-tile--feature .gallery-tile-body { padding: 28px; }
.gallery-tile--feature h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
.gallery-tile--feature p { display: block; }
.gallery-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-top: clamp(28px, 4vw, 40px); padding-top: 24px; border-top: 1px solid var(--border-col); }
.gallery-footer .newsletter-form { max-width: 360px; flex: 1; min-width: 240px; }
.gallery-footer .newsletter-note { width: 100%; margin-top: 0; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } .gallery-tile--feature { grid-column: span 2; grid-row: span 1; min-height: 300px; } }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr; } .gallery-tile--feature { grid-column: span 1; } .gallery-footer { flex-direction: column; align-items: stretch; } .gallery-footer .btn-outline { width: 100%; justify-content: center; } .gallery-footer .newsletter-form { max-width: 100%; } }

/* Contact callout */
.contact-section--callout { padding: clamp(64px, 9vw, 112px) 0 clamp(72px, 10vw, 128px); }
.callout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(36px, 6vw, 80px);
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--grey-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(240, 237, 232, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240, 237, 232, 0.035) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.9), transparent 60%);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.9), transparent 60%);
}
.callout > * { position: relative; }
.callout-left h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 26px; }
.callout-left .contact-email { display: inline-block; }
.callout-note { margin-top: 22px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); line-height: 1.8; }
.callout-book { margin-top: 22px; }
.form-alt { margin: 0 0 18px; font-family: var(--font-serif); font-size: 1.02rem; line-height: 1.4; color: var(--cream); }
.callout-note a { color: var(--cream); border-bottom: 1px solid var(--grey-3); padding-bottom: 1px; }
.callout-note a:hover { border-color: var(--cream); }
.callout .enquiry-form { margin: 0; }
@media (max-width: 860px) { .callout { grid-template-columns: 1fr; padding: 28px 22px; } }

/* ── V4.1 ───────────────────────────────────────────────────── */
.symptoms-close--big { max-width: 820px; font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.32; color: var(--cream); margin-top: clamp(32px, 4vw, 44px); }
/* Symptoms close sits on the same ground as the section */
.symptoms-box {
  margin-top: clamp(34px, 4.5vw, 52px);
  max-width: 860px;
  padding: 0;
  border: none;
  background: transparent;
}
.symptoms-box-k {
  margin: 0 0 14px;
  font-family: var(--font-serif); font-size: 0.75rem;
  letter-spacing: 0.02em;  color: var(--grey-2);
}
.symptoms-box-body {
  margin: 0; min-width: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.72rem);
  line-height: 1.36; color: var(--cream); text-wrap: pretty;
}
.h1-v4 { max-width: 14ch; font-size: clamp(2.8rem, 6.2vw, 5.4rem); }

/* Tiers as aligned rows */
.tiers--rows { grid-template-columns: 1fr; gap: 0; background: transparent; border: none; border-top: 1px solid var(--grey-3); }
.tiers--rows .tier {
  display: grid;
  grid-template-columns: 64px 1.1fr 1.5fr 0.9fr;
  gap: 16px clamp(24px, 3vw, 48px);
  align-items: start;
  padding: clamp(28px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--border-col);
  background: transparent;
}
.tiers--rows .tier--start { background: transparent; }
.tiers--rows .tier--start::before { position: static; grid-column: 2; order: -1; justify-self: start; margin-bottom: 4px; }
.tiers--rows .tier-num { grid-column: 1; grid-row: 1 / span 5; font-size: 1.9rem; padding-top: 2px; }
.tiers--rows .tier-name { grid-column: 2; grid-row: 1; margin: 0; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.tiers--rows .tier-desc { grid-column: 2; grid-row: 2; }
.tiers--rows .tier-price { grid-column: 2; grid-row: 3; margin-top: 12px; padding-top: 0; }
.tiers--rows .tier-link { grid-column: 2; grid-row: 4; margin-top: 4px; }
.tiers--rows .tier-body { grid-column: 3; grid-row: 1 / span 4; margin: 0; font-size: 0.98rem; line-height: 1.7; max-width: 520px; }
.tiers--rows .tier-list { grid-column: 4; grid-row: 1 / span 4; border-top: none; padding-top: 4px; gap: 8px; }
.tiers--rows .tier--start .tier-name { grid-row: 2; }
.tiers--rows .tier--start .tier-desc { grid-row: 3; }
.tiers--rows .tier--start .tier-price { grid-row: 4; }
.tiers--rows .tier--start .tier-link { grid-row: 5; }
.tiers--rows .tier--start .tier-body, .tiers--rows .tier--start .tier-list { grid-row: 1 / span 5; }
@media (max-width: 900px) {
  .tiers--rows .tier { grid-template-columns: 48px 1fr; }
  .tiers--rows .tier-num { grid-row: 1 / span 6; }
  .tiers--rows .tier-name, .tiers--rows .tier-desc, .tiers--rows .tier-body, .tiers--rows .tier-list, .tiers--rows .tier-price, .tiers--rows .tier-link,
  .tiers--rows .tier--start .tier-name, .tiers--rows .tier--start .tier-desc, .tiers--rows .tier--start .tier-body, .tiers--rows .tier--start .tier-list, .tiers--rows .tier--start .tier-price, .tiers--rows .tier--start .tier-link { grid-column: 2; grid-row: auto; }
  .tiers--rows .tier-body { margin-top: 10px; }
  .tiers--rows .tier-list { padding-top: 12px; border-top: 1px solid var(--border-col); margin-top: 6px; }
  .tiers--rows .tier-price { margin-top: 14px; }
}

/* Testimonial strip sits between case studies and guarantee */
.testi-section { border-top: 1px solid var(--border-col); }
.testi-cinema-wrap { min-height: 62vh; }
@media (max-width: 640px) { .testi-cinema-wrap { min-height: 78vh; } }

/* About ladder bullet lists */
.why-step-list { display: flex; flex-direction: column; gap: 6px; }
.why-step-list li { position: relative; padding-left: 14px; font-family: var(--font-serif); font-size: 0.96rem; color: var(--grey-1); line-height: 1.6; }
.why-step-list li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 4px; height: 4px; border-radius: 50%; background: var(--grey-3); }

/* ── As seen in strip ─────────────────────────────────────────── */
.press-strip { margin-top: clamp(48px, 7vw, 80px); padding-top: 26px; border-top: 1px solid var(--border-col); display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(28px, 4vw, 56px); }
.press-strip-label { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); white-space: nowrap; }
.press-strip-list { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(28px, 4vw, 52px); }
.press-mark { display: inline-flex; align-items: center; color: var(--grey-1); opacity: 1; line-height: 0; }
.press-mark:hover { color: var(--cream); }
.press-mark--mi3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; letter-spacing: 0.02em; }
.press-mark--mi3 span { color: var(--grey-2); }
.press-mark--adnews { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; }
.press-mark--bt { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; letter-spacing: 0.02em; }
.press-mark--mediaweek { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.98rem; font-weight: 600;  letter-spacing: 0.02em; }
.press-mark--cb { font-family: var(--font-serif); font-size: 1.05rem; font-style: italic; font-weight: 500; }
.press-mark--mumbrella { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.03em; }
@media (max-width: 640px) { .press-strip { gap: 14px 24px; } .press-strip-list { gap: 12px 24px; } }

.press-logo { display: block; width: auto; height: 24px; max-height: 24px; object-fit: contain; filter: grayscale(1); opacity: 0.85; }
@media (max-width: 900px) { .press-logo { height: 22px; max-height: 22px; } }

/* ── V5 amendments ────────────────────────────────────────────── */
.h1-v4 { max-width: 15ch; }
.hero-helper { margin: 12px 0 0; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); opacity: 1; }
.is-loaded .hero .hero-helper { animation: heroFadeUp 0.75s var(--ease) 0.5s both; }
.client-grid--three { grid-template-columns: repeat(3, 1fr); }
.client-grid--three .client-cell { min-height: 124px; }
.client-cell--at { height: 30px; }
.client-cell--sb { height: 34px; }
.client-cell--eq { height: 64px; }
.craft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(28px, 4vw, 48px); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-col); }
.craft-label { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); white-space: nowrap; }
.craft-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(22px, 3vw, 40px); }
.craft-logo { display: block; width: auto; height: 14px; opacity: 0.55; transition: opacity 0.2s var(--ease); }
.craft-logo:hover { opacity: 0.85; }
.craft-logo--streamotion { height: 12px; }
.craft-logo--google { height: 16px; }
@media (max-width: 640px) { .client-grid--three { grid-template-columns: 1fr; } .client-grid--three .client-cell { min-height: 96px; } .craft-row { gap: 12px 20px; } }
.gallery--bento { grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(196px, 1fr); }
.gallery--bento .gallery-tile--feature { grid-column: span 2; grid-row: span 2; min-height: 412px; }
.gallery-lede { margin: 16px 0 0; max-width: 62ch; }
.gallery-latest {
  display: inline-block; margin-right: 10px; padding: 2px 7px;
  border: 1px solid rgba(240, 237, 232,0.45); border-radius: 3px;
  color: var(--cream); letter-spacing: 0.02em;
}
@media (max-width: 900px) {
  .gallery--bento { grid-template-columns: 1fr; grid-auto-rows: minmax(210px, auto); }
  .gallery--bento .gallery-tile--feature { grid-column: span 1; grid-row: span 1; min-height: 300px; }
}
/* Keyboard focus */
.nav-links a:focus-visible, .btn-primary:focus-visible, .btn-outline:focus-visible, .faq-btn:focus-visible, .diag-row:focus-visible, .tier-link:focus-visible, .case-card:focus-visible, .gallery-tile:focus-visible, .nav-toggle:focus-visible, .testi-prev:focus-visible, .testi-next:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.form-field input:focus-visible, .form-field textarea:focus-visible, .form-field select:focus-visible { outline: none; box-shadow: 0 1px 0 0 var(--cream); }
.newsletter-form input:focus-visible { outline: none; }
.newsletter-form:focus-within { border-color: var(--cream); }
/* Mobile nav: full-screen drawer */
@media (max-width: 640px) {
  .nav-links { top: 0; bottom: 0; height: 100dvh; padding: 84px clamp(20px, 6vw, 40px) 40px; visibility: hidden; border-bottom: none; justify-content: flex-start; overflow-y: auto; }
  .nav-links.is-open { visibility: visible; }
  .nav-links a:not(.btn-primary) { font-size: 1.35rem; padding: 18px 0; }
  .nav-toggle { position: relative; z-index: 10000; }
  .nav-cta-mobile { position: relative; z-index: 10000; }
  body.nav-open { overflow: hidden; }
}
/* nav drawer extended to 900px */
@media (min-width: 641px) and (max-width: 940px) {
  .nav-links { top: 0; bottom: 0; height: 100dvh; padding: 84px clamp(20px, 6vw, 40px) 40px; visibility: hidden; border-bottom: none; justify-content: flex-start; overflow-y: auto; }
  .nav-links.is-open { visibility: visible; }
  .nav-links a:not(.btn-primary) { font-size: 1.35rem; padding: 18px 0; }
  .nav-toggle { position: relative; z-index: 10000; }
  .nav-cta-mobile { position: relative; z-index: 10000; }
  body.nav-open { overflow: hidden; }
}

/* Hero centred */
.hero-grid--centre { justify-items: center; text-align: center; }
.hero-grid--centre .h1-v4 { margin-left: auto; margin-right: auto; }
.hero-grid--centre .hero-slash { margin-left: auto; margin-right: auto; transform: none; background: linear-gradient(90deg, transparent 0%, var(--grey-3) 50%, transparent 100%); }
.hero-grid--centre .lede { margin-left: auto; margin-right: auto; }
.hero-grid--centre .btn-row { justify-content: center; }
/* Craft row inside About */
.about-section .craft-row { margin-top: 22px; padding-top: 18px; }

/* ── Widows: balance headings, avoid orphan words in body copy ─── */
h1, h2, h3, .h1-big, .sprint-tagline, .spec-outcome, .symptoms-close,
.diag-text, .ba-after p, .case-line p, .trusted-quote p, .case-quote p,
.outcome-name, .tier-name, .case-tile h3, .gallery-tile h3, .case-card h3 {
  text-wrap: balance;
}
p, .lede, .tier-body, .outcome-desc, .why-step-v, .case-card-pio dd,
.act-shape p, .diag-scope li, .tier-list li, .guarantee-terms li,
.faq-body p, .spec-tl-v, .note-card p, .gallery-tile p {
  text-wrap: pretty;
}

/* ── Hero: audit-led, tighter vertical rhythm ──────────────────── */
.hero--v4 .h1-v4 { margin-bottom: 22px; }
.hero--v4 .lede { max-width: 620px; margin-bottom: 34px; }
.hero--v4 .btn-row { margin-bottom: 0; }
.hero--v4 .btn-primary { padding: 15px 26px; font-size: 0.84rem; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(20px, 3vw, 34px);
  margin: 22px 0 0;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  
  color: var(--grey-1);
  white-space: nowrap;
}
.hero-points li::before {
  content: '';
  width: 11px; height: 11px;
  flex-shrink: 0;
  border: 1px solid var(--grey-3);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' viewBox='0 0 8 8'%3E%3Cpath d='M1 4.2l2 2L7 1.6' fill='none' stroke='%23B0B3C4' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.hero-alt { margin: 28px 0 0; font-family: var(--font-serif); font-size: 0.92rem; color: var(--grey-2); }
.hero-alt a { color: var(--grey-1); border-bottom: 1px solid var(--border-col); padding-bottom: 2px; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
.hero-alt a:hover { color: var(--cream); border-color: var(--grey-2); }
.hero .hero-points, .hero .hero-alt { opacity: 1; }
.is-loaded .hero .hero-points { animation: heroFadeUp 0.75s var(--ease) 0.5s both; }
.is-loaded .hero .hero-alt    { animation: heroFadeUp 0.75s var(--ease) 0.58s both; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-points, .hero .hero-alt { opacity: 1 !important; animation: none !important; }
}
@media (max-width: 640px) {
  .hero-points { flex-direction: column; align-items: center; gap: 10px; }
  .hero-points li { white-space: normal; text-align: left; }
  .hero--v4 .btn-row .btn-primary { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   V5.1, polish pass: motion, rhythm, stamp
   ══════════════════════════════════════════════════════════════ */

/* Reveals: rise + de-blur, staggered inside grids */
.reveal { transform: translateY(16px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.reveal.in-view { filter: blur(0); }
.tier.reveal:nth-child(2), .gallery-tile.reveal:nth-child(2), .case-card.reveal:nth-child(2) { transition-delay: 0.08s; }
.tier.reveal:nth-child(3), .gallery-tile.reveal:nth-child(3) { transition-delay: 0.16s; }
.tier.reveal:nth-child(4) { transition-delay: 0.24s; }
.client-grid.in-view .client-cell { animation: cellIn 0.7s var(--ease) both; }
.client-grid.in-view .client-cell:nth-child(2) { animation-delay: 0.08s; }
.client-grid.in-view .client-cell:nth-child(3) { animation-delay: 0.16s; }
@keyframes cellIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.diag-list.in-view .diag-row { animation: cellIn 0.6s var(--ease) both; }
.diag-list.in-view .diag-row:nth-child(2) { animation-delay: 0.07s; }
.diag-list.in-view .diag-row:nth-child(3) { animation-delay: 0.14s; }
.diag-list.in-view .diag-row:nth-child(4) { animation-delay: 0.21s; }
.diag-list.in-view .diag-row:nth-child(5) { animation-delay: 0.28s; }

/* Hero: no overflow, eyebrow that wraps gracefully, considered stagger */
.hero { overflow: hidden; }
.hero--v4 .h1-v4 { display: block; overflow: visible; padding-bottom: 0.08em; }
.is-loaded .hero h1 { animation: heroFadeUp 0.9s var(--ease) 0.12s both; }
.is-loaded .hero .lede { animation-delay: 0.3s; }
.is-loaded .hero .btn-row { animation-delay: 0.42s; }
.hero--v4 .btn-primary { position: relative; }
.hero--v4 .btn-primary::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(240, 237, 232,0.35); transition: box-shadow 0.4s var(--ease); pointer-events: none; }
.hero--v4 .btn-primary:hover::after { box-shadow: 0 0 0 5px rgba(240, 237, 232,0.08); }
.hero-points li { white-space: normal; }

/* Buttons: arrow nudge on hover */
.btn-primary, .btn-outline { transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.btn-primary:hover { box-shadow: 0 8px 24px -12px rgba(240, 237, 232,0.35); }

/* Section rhythm: one consistent vertical beat, toned chapters get a faint top light */
.section-tone { position: relative; }
.section-tone::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(240, 237, 232,0.18), transparent); pointer-events: none; }
.symptoms-section, .pathway-section, .cases-section, .about-section, .thinking-section--gallery, .faq-section { padding-top: clamp(80px, 11vw, 136px); padding-bottom: clamp(80px, 11vw, 136px); }
.problem-section.section-tone, .guarantee-section.section-tone { padding: clamp(80px, 11vw, 136px) 0; }

/* Client cells: quiet lift */
.client-cell { transition: background 0.3s var(--ease); }
.client-cell-img { transition: opacity 0.3s var(--ease), transform 0.5s var(--ease); }
.client-cell:hover .client-cell-img { transform: translateY(-2px); opacity: 1; }

/* Tiers: whole row responds */
.tiers--rows .tier { transition: background 0.3s var(--ease); }
.tiers--rows .tier:hover { background: rgba(240, 237, 232,0.02); }
.tiers--rows .tier-num { transition: color 0.3s var(--ease); }
.tiers--rows .tier:hover .tier-num { color: var(--cream); }

/* Symptom rows: number brightens with the row */
.diag-row .diag-num { transition: color 0.3s var(--ease); }
.diag-row:hover .diag-num, .diag-row.is-open .diag-num { color: var(--cream); }

/* Testimonials: gentle scale-in on the quote */
.testi-cinema blockquote { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s; }
.testi-cinema.is-active blockquote { opacity: 1; transform: none; }
.testi-cinema-attr { opacity: 0; transition: opacity 0.6s var(--ease) 0.4s; }
.testi-cinema.is-active .testi-cinema-attr { opacity: 1; }

/* Guarantee stamp: rubber-stamp treatment */
.guarantee-box { grid-template-columns: 220px 1fr; align-items: center; }
.guarantee-stamp { width: 200px; height: 200px; color: var(--cream); opacity: 0; transform: rotate(-14deg) scale(1.12); transition: transform 0.9s cubic-bezier(0.2, 1.4, 0.3, 1), opacity 0.5s var(--ease); mix-blend-mode: screen; }
.guarantee-box.in-view .guarantee-stamp { opacity: 0.92; transform: rotate(-9deg) scale(1); }
.guarantee-stamp svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 720px) { .guarantee-box { grid-template-columns: 1fr; } .guarantee-stamp { width: 150px; height: 150px; } }

/* Gallery tiles: title lifts on hover */
.gallery-tile-body { transition: transform 0.5s var(--ease); }
.gallery-tile:hover .gallery-tile-body { transform: translateY(-4px); }

/* Callout: subtle rise of the form fields as they arrive */
.callout.in-view .form-field { animation: cellIn 0.6s var(--ease) both; }
.callout.in-view .form-field:nth-child(2) { animation-delay: 0.05s; }
.callout.in-view .form-field:nth-child(3) { animation-delay: 0.10s; }
.callout.in-view .form-field:nth-child(4) { animation-delay: 0.15s; }
.callout.in-view .form-field:nth-child(5) { animation-delay: 0.20s; }
.callout.in-view .form-field:nth-child(6) { animation-delay: 0.25s; }

/* Reduced motion honours everything above */
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none !important; transform: none !important; }
  .client-grid.in-view .client-cell, .diag-list.in-view .diag-row, .callout.in-view .form-field { animation: none !important; opacity: 1 !important; }
  .guarantee-stamp { transition: none; transform: rotate(-9deg); opacity: 0.92; }
  .testi-cinema blockquote, .testi-cinema-attr { transition: none; }
}

/* ── Hero: left-aligned split with CTA panel ───────────────────── */
.hero-grid--split { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: clamp(36px, 5vw, 72px); align-items: center; text-align: left; justify-items: stretch; }
.hero-main { min-width: 0; }
.hero-main .h1-v4 { margin-left: 0; margin-right: 0; max-width: 11ch; text-wrap: initial; font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1.05; letter-spacing: -0.015em; overflow-wrap: normal; }
.lede-strong { color: var(--cream); font-weight: 500; }
.hero-main .lede { font-size: clamp(1rem, 1.25vw, 1.08rem); }
.hero-main .lede { margin-left: 0; margin-right: 0; max-width: 560px; margin-bottom: 26px; }
.hero-main .hero-alt { margin-top: 0; }
.h1-br { display: inline; }
.hero-cta-box {
  position: relative;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--grey-3);
  border-radius: var(--radius-md);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
}
.hero-cta-box::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, rgba(240, 237, 232,0.035) 1px, transparent 1px), linear-gradient(to bottom, rgba(240, 237, 232,0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 70%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 70%);
}
.hero-cta-box > * { position: relative; }
.hero-cta-label { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); }
.hero-cta-title { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.3; color: var(--cream); margin: 0; }
.hero-cta-box .hero-points { justify-content: flex-start; flex-direction: column; gap: 9px; margin: 2px 0 6px; }
.hero-cta-box .btn-primary { width: 100%; justify-content: center; }
.hero-cta-foot { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); text-align: center; }
.hero .hero-cta-box { opacity: 1; }
.is-loaded .hero .hero-cta-box { animation: heroFadeUp 0.85s var(--ease) 0.42s both; }
@media (max-width: 900px) {
  .hero-grid--split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-main .h1-v4 { max-width: 16ch; font-size: clamp(2rem, 6.4vw, 2.8rem); }
  .h1-br { display: none; }
  .hero-cta-box { min-width: 0; }
}
@media (max-width: 480px) { .hero-cta-box { padding: 22px 18px; } }
@media (prefers-reduced-motion: reduce) { .hero .hero-cta-box { opacity: 1 !important; animation: none !important; } }

/* CTA button: label and arrow on one line, arrow nudges */
.hero-cta-box .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; font-size: 0.8rem; padding: 14px 18px; }
.hero-cta-box .btn-primary .btn-arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.hero-cta-box .btn-primary:hover .btn-arrow { transform: translateX(4px); }
@media (max-width: 380px) { .hero-cta-box .btn-primary { white-space: normal; text-align: center; } }
/* Technical bench: inline chips */
.why-step-list--inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.why-step-list--inline li { padding: 6px 12px; border: 1px solid var(--border-col); border-radius: 50px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); line-height: 1.4; }
.why-step-list--inline li::before { display: none; }

/* ══════════════════════════════════════════════════════════════
   Mobile above the fold
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .hero--v4 { padding-top: 44px; padding-bottom: 28px; }
  .hero-grid--split { gap: 26px; }
  /* Headline: three tight lines */
  .hero-main .h1-v4 { font-size: 2.1rem; line-height: 1.1; letter-spacing: -0.012em; max-width: none; padding-bottom: 0; }
  .hero--v4 .h1-v4 { font-size: 2.1rem; }
  .hero-main .h1-v4 { margin-bottom: 14px; }
  /* Body: shorter measure, tighter leading */
  .hero-main .lede { font-size: 0.96rem; line-height: 1.6; margin-bottom: 0; }
  /* The text link moves into the panel on mobile */
  .hero-main .hero-alt { display: none; }
  .hero-cta-alt { display: inline-block; align-self: center; margin-top: 2px; font-family: var(--font-serif); font-size: 0.9rem; color: var(--grey-1); border-bottom: 1px solid var(--border-col); padding-bottom: 2px; }
  /* Panel: label, button, one-line facts, alt link */
  .hero-cta-box { padding: 18px 18px 16px; gap: 12px; border-color: var(--border-col); }
  .hero-cta-box .hero-cta-title { display: none; }
  .hero-cta-box .hero-points { display: none; }
  .hero-cta-box .btn-primary { padding: 15px 16px; font-size: 0.84rem; }
  .hero-cta-foot-long { display: none; }
  .hero-cta-foot-short { display: inline; }
  .hero-cta-foot { font-size: 0.75rem; letter-spacing: 0.02em; }
}
@media (max-width: 380px) {
  .hero-main .h1-v4, .hero--v4 .h1-v4 { font-size: 1.85rem; }
  .hero-cta-foot { letter-spacing: 0.02em; }
}

/* ══════════════════════════════════════════════════════════════
   V6 — two pathways, marketing & activation
   ══════════════════════════════════════════════════════════════ */

/* Hero capability line */
.hero-caps { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 20px 0 0; }
.hero-caps li { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); }
.hero-caps li + li::before { content: '·'; margin-right: 18px; color: var(--grey-2); }
.hero .hero-caps { opacity: 1; }
.is-loaded .hero .hero-caps { animation: heroFadeUp 0.75s var(--ease) 0.4s both; }

/* Hero: two doors in the panel */
.hero-door { display: flex; flex-direction: column; gap: 8px; }
.hero-door .btn-primary, .hero-door .btn-outline { width: 100%; justify-content: center; gap: 10px; white-space: nowrap; font-size: 0.8rem; padding: 14px 16px; }
.hero-door .btn-arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.hero-door a:hover .btn-arrow { transform: translateX(4px); }
.hero-door-note { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); line-height: 1.7; text-align: center; }
.hero-cta-box { gap: 20px; }

/* Symptom groups */
.diag-group-label { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); margin: 0 0 14px; }
.diag-group-label--second { margin-top: clamp(40px, 5vw, 60px); }
.ctg-caveat { margin-top: 14px; color: var(--grey-2); font-size: 0.98rem; }

/* Two doors */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
.door { display: flex; flex-direction: column; gap: 12px; padding: clamp(26px, 3.4vw, 38px); border: 1px solid var(--grey-3); border-radius: var(--radius-md); background: var(--surface); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), background 0.3s var(--ease); }
.door:hover { border-color: var(--cream); transform: translateY(-3px); background: rgba(240, 237, 232,0.02); }
.door-num { font-family: var(--font-serif); font-size: 1.6rem; color: var(--grey-2); line-height: 1; }
.door:hover .door-num { color: var(--cream); }
.door-title { font-family: var(--font-serif); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; line-height: 1.25; color: var(--cream); margin: 4px 0 0; }
.door-body { font-size: 0.96rem; line-height: 1.68; color: var(--grey-1); margin: 0; }
.door-stages { counter-reset: st; display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; padding-top: 16px; border-top: 1px solid var(--border-col); }
.door-link { margin-top: auto; }
.door-stages li { counter-increment: st; display: grid; grid-template-columns: 28px 1fr; gap: 10px; font-family: var(--font-serif); font-size: 0.92rem; color: var(--grey-1); }
.door-stages li::before { content: counter(st, decimal-leading-zero); font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); padding-top: 4px; }
.door-link { margin-top: auto; padding-top: 18px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); }
.door-link .arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.door:hover .door-link .arrow { transform: translateX(5px); }
.pathway-section--tight { padding-top: clamp(64px, 9vw, 104px); }
@media (max-width: 800px) { .doors { grid-template-columns: 1fr; } }

/* Capability grid */
.caps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-col); border: 1px solid var(--border-col); margin-bottom: clamp(32px, 4vw, 48px); }
.cap { background: var(--black); padding: clamp(22px, 3vw, 30px) clamp(20px, 2.6vw, 26px); display: flex; flex-direction: column; gap: 10px; transition: background 0.3s var(--ease); }
.cap:hover { background: var(--surface); }
.cap-num { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); }
.cap h3 { font-size: 1.02rem; font-weight: 600; margin: 0; line-height: 1.3; }
.cap p { font-size: 0.9rem; line-height: 1.62; margin: 0; }
@media (max-width: 900px) { .caps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .caps-grid { grid-template-columns: 1fr; } }

/* Quarter modes */
.act-modes { padding-top: clamp(24px, 3vw, 32px); border-top: 1px solid var(--grey-3); }
.act-modes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-bottom: 24px; }
.act-mode-k { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); margin-bottom: 8px; }
.act-mode p { font-size: 0.92rem; line-height: 1.62; margin: 0; }
.act-modes .act-price { margin: 0 0 24px; }
@media (max-width: 700px) { .act-modes-grid { grid-template-columns: 1fr; gap: 20px; } }

@media (max-width: 640px) {
  .hero-cta-box .hero-door-note { font-size: 0.75rem; }
  .hero-caps { gap: 6px 14px; }
  .hero-caps li + li::before { margin-right: 14px; }
}

/* Hero audit panel */
.hero-cta-title { font-family: var(--font-serif); font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.3; color: var(--cream); margin: 0; }
.hero-cta-body { font-size: 0.94rem; line-height: 1.62; color: var(--grey-1); margin: 0; }
.hero-cta-box .hero-points { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 9px; margin: 2px 0 4px; }
.hero-cta-box .hero-points li { white-space: normal; text-align: left; }
.hero-cta-box .btn-primary { width: 100%; justify-content: center; gap: 10px; font-size: 0.82rem; padding: 15px 16px; }
.hero-cta-box .btn-arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.hero-cta-box .btn-primary:hover .btn-arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .hero-cta-box .hero-cta-title { display: block; font-size: 1.05rem; }
  .hero-cta-box .hero-cta-body { display: none; }
  .hero-cta-box .hero-points { display: flex; }
  .hero-cta-box .hero-points li { font-size: 0.75rem; }
}

/* ── V7 widow guards ───────────────────────────────────────────── */
.door-title, .tier-name, .cap h3, .so h2, .hero-cta-title, .act-mode-k,
.diag-result-v, .case-tile h3, .note-card h3, .door-body, .tier-body,
.cap p, .so p, .act-mode p, .hero-door-note, .hero-cta-body { text-wrap: balance; }
.tier-list li, .door-stages li, .so li, .guarantee-terms li, .spec-tl-v,
.diag-scope li, .why-step-v, .hero-points li { text-wrap: pretty; }
/* A hard-joined word can never blow out a grid column */
.doors > *, .caps-grid > *, .tiers > *, .client-grid > *, .cases-grid > *,
.gallery > *, .so-grid > *, .act-modes-grid > *, .hero-grid > *,
.callout > *, .about-layout > *, .sprint-split > * { min-width: 0; }

/* ══════════════════════════════════════════════════════════════
   V7 — CTG diagram, pathway questions, fit band, case logos
   ══════════════════════════════════════════════════════════════ */

/* Commercial Translation Gap diagram */
.ctgv {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3vw, 40px);
  border: 1px solid var(--border-col);
  border-radius: var(--radius-md);
  background: var(--black);
  position: relative;
  overflow: hidden;
}
.ctgv::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(240, 237, 232,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(240, 237, 232,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}
.ctgv > * { position: relative; }
.ctgv-side { display: flex; flex-direction: column; gap: 14px; }
.ctgv-side--right { align-items: flex-end; text-align: right; }
.ctgv-k {
  font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;
   color: var(--grey-2);
}
.ctgv-node {
  font-family: var(--font-serif); font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 500; color: var(--cream); line-height: 1.25;
  border: 1px solid var(--grey-3); border-radius: var(--radius-sm);
  padding: 16px 18px; background: var(--surface);
}
.ctgv-audiences { display: flex; flex-direction: column; gap: 6px; width: 100%; align-items: flex-end; }
.ctgv-audiences li {
  font-family: var(--font-serif); font-size: 0.95rem; color: var(--cream);
  border: 1px solid var(--border-col); border-radius: var(--radius-sm);
  padding: 9px 14px; background: var(--surface); min-width: 148px; text-align: right;
}
/* The gap itself: hatched blueprint band with dimension ticks */
.ctgv-gap {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; align-self: stretch; min-width: clamp(150px, 20vw, 240px); padding: 14px 10px;
  background-image: repeating-linear-gradient(135deg, rgba(240, 237, 232,0.075) 0 1px, transparent 1px 9px);
  border-left: 1px dashed var(--grey-3); border-right: 1px dashed var(--grey-3);
}
.ctgv-gap-label {
  font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;
   color: var(--cream); text-align: center; line-height: 1.8;
}
.ctgv-gap-label sup { font-size: 0.6em; color: var(--grey-2); }
.ctgv-tick { display: block; width: 1px; flex: 1; min-height: 18px; background: linear-gradient(to bottom, transparent, var(--grey-3), transparent); }
@media (max-width: 800px) {
  .ctgv { grid-template-columns: 1fr; gap: 16px; }
  .ctgv-side--right { align-items: stretch; text-align: left; }
  .ctgv-audiences { align-items: stretch; }
  .ctgv-audiences li { text-align: left; min-width: 0; }
  .ctgv-gap { min-width: 0; padding: 14px; border-left: none; border-right: none; border-top: 1px dashed var(--grey-3); border-bottom: 1px dashed var(--grey-3); }
  .ctgv-tick { width: 40px; height: 1px; flex: none; background: linear-gradient(to right, transparent, var(--grey-3), transparent); }
}

/* Pathway: best-for + price */
.door-best {
  margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--border-col);
  font-size: 0.92rem; line-height: 1.6; color: var(--cream); text-wrap: pretty;
}
.door-best-k {
  display: block; font-family: var(--font-serif); font-size: 0.75rem;
  letter-spacing: 0.02em;  color: var(--grey-2);
  margin-bottom: 6px;
}
.door-price {
  display: block; margin-top: 10px; font-family: var(--font-serif);
  font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-1);
}


/* Quarter price note */
.act-price-note { margin: 8px 0 24px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); line-height: 1.8; max-width: 640px; }
.act-modes .act-price { margin: 0; }

/* Case card client logos */
.case-card-logo { display: block; width: auto; opacity: 0.85; margin-bottom: 14px; transition: opacity 0.25s var(--ease); }
.case-card:hover .case-card-logo { opacity: 1; }
.case-card-logo--at { height: 20px; }
.case-card-logo--sb { height: 24px; }

/* Case card: headline left, client logo right */
.case-card-head { display: grid; grid-template-columns: 1fr auto; gap: 16px clamp(14px, 2vw, 24px); align-items: center; margin-bottom: 12px; }
.case-card-head > * { min-width: 0; }
.case-card-head h3 { margin: 0; }
.case-card-logo { display: block; width: auto; opacity: 0.8; margin: 0; align-self: start; justify-self: end; transition: opacity 0.25s var(--ease); }
.case-card:hover .case-card-logo { opacity: 1; }
.case-card-logo--at { height: 22px; margin-top: 0; }
.case-card-logo--sb { height: 22px; margin-top: 0; }
@media (max-width: 520px) { .case-card-head { grid-template-columns: 1fr; } .case-card-logo { justify-self: start; } }





/* ── Testimonials: the longest quote sits smaller so it never clips ── */
.testi-cinema blockquote.is-long { font-size: clamp(1.05rem, 1.95vw, 1.72rem); line-height: 1.46; margin-bottom: 32px; }
@media (max-width: 640px) { .testi-cinema blockquote.is-long { font-size: 0.98rem; line-height: 1.5; } }


/* ── Case studies: one filled frame, logo by default, headline on hover ─ */
.cases-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.cases-three > .case-card { position: relative; min-width: 0; display: flex; flex-direction: column; }
.cases-three .case-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: transparent;
  line-height: 0;
}
.cases-three .case-card-media picture { display: block; width: 100%; height: 100%; }
.cases-three .case-card-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.9);
  transition: transform 400ms var(--ease), filter 400ms var(--ease);
}
.cases-three .case-card-photo--eq { object-position: center center; }
.cases-three .case-card-photo--at { object-position: center 82%; }
.cases-three .case-card-photo--sb { object-position: center center; }
.cases-three .case-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.cases-three .case-card-logo-slot {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
}
.cases-three .case-card-logo {
  height: 22px; width: auto; max-width: 100%; margin: 0;
  object-fit: contain; object-position: left center; opacity: 0.92;
}
.cases-three .case-card-logo--eq { height: 28px; opacity: 1; }
.cases-three .case-card-logo--at { height: 18px; opacity: 1; }
.cases-three .case-card-logo--sb { height: 28px; opacity: 1; }
.cases-three .case-card h3 {
  margin: 12px 0 0;
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.36;
  color: var(--cream);
}
.cases-three .case-card-foot {
  margin-top: 0;
  padding-top: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.cases-three .case-card-result { margin: 0; line-height: 1.45; min-height: 0; white-space: nowrap; }
.cases-three .case-card-link { margin-top: auto; padding-top: 14px; }
.cases-three.in-view > .case-card { animation: cellIn 0.7s var(--ease) both; }
.cases-three.in-view > .case-card:nth-child(2) { animation-delay: 0.08s; }
.cases-three.in-view > .case-card:nth-child(3) { animation-delay: 0.16s; }
@media (hover: hover) and (pointer: fine) {
  .cases-three .case-card:hover .case-card-photo,
  .cases-three .case-card:focus-visible .case-card-photo {
    transform: scale(1.03);
    filter: grayscale(1) blur(6px) brightness(0.62);
  }
  .cases-three .case-card h3 {
    position: absolute;
    top: 0; left: 0; right: 0;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-shadow: 0 1px 18px rgba(17, 17, 17, 0.9);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.35s var(--ease);
  }
  .cases-three .case-card:hover h3,
  .cases-three .case-card:focus-visible h3 { opacity: 1; }
}
@media (max-width: 1100px) {
  .cases-three .case-card-result { white-space: normal; }
}
@media (max-width: 760px) {
  .cases-three { grid-template-columns: 1fr; overflow: visible; }
  .cases-three > .case-card { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cases-three.in-view > .case-card { animation: none; }
  .cases-three .case-card-photo,
  .cases-three .case-card h3 { transition: none; }
  .cases-three .case-card:hover .case-card-photo,
  .cases-three .case-card:focus-visible .case-card-photo { transform: none; }
}

/* ── Anti-spam: honeypot + Turnstile slot ─────────────────────── */
.hp { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.form-error { margin: 10px 0 0; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.7; color: #F0EDE8; }
.form-error[hidden] { display: none; }
.form-field input.is-invalid, .form-field textarea.is-invalid { border-color: #F0EDE8; }
.cf-slot { margin: 10px 0 2px; min-height: 0; }
.cf-slot[data-appearance="always"] { min-height: 65px; }
.cf-slot:empty { display: none; }
.cf-slot iframe { border-radius: 8px; }
.newsletter-form .cf-slot--inline { flex-basis: 100%; }


/* ── Footer details, stacked on mobile ─────────────────────────── */
.footer-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.footer-copy .fc-s { color: var(--grey-2); }
.footer-copy .fc-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-col); padding-bottom: 1px; transition: border-color 0.2s; }
.footer-copy .fc-link:hover { border-color: var(--grey-2); }
.footer-aidn { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.footer-aidn:hover { color: var(--cream); }
@media (max-width: 640px) {
  .footer-copy { flex-direction: column; gap: 7px 0; line-height: 1.5; }
  .footer-copy .fc-s { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; row-gap: 16px; }
}

/* ── Membership badge, sits with the proof cluster in About ────── */
.cred-strip { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-col); display: flex; flex-wrap: wrap; align-items: center; gap: 14px clamp(20px, 3vw, 36px); }
.aidn-badge { display: inline-flex; align-items: center; background: var(--cream); border-radius: 3px; padding: 9px 13px; flex-shrink: 0; transition: opacity 0.2s var(--ease); }
.aidn-badge:hover { opacity: 0.85; }
.aidn-badge img { display: block; width: 108px; height: auto; }
.cred-note { font-family: var(--font-serif); font-size: 0.86rem; color: var(--grey-2); line-height: 1.5; }
@media (max-width: 560px) { .cred-strip { gap: 12px 18px; } .cred-note { font-size: 0.82rem; } }

/* ── 08c Speaking ─────────────────────────────────────────────── */
.speaking-section { padding: clamp(72px, 10vw, 128px) 0; }
.speaking-section .section-head { margin-bottom: clamp(28px, 4vw, 40px); }
.sp-lede { max-width: 62ch; margin-top: 18px; }
.sp-label { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin: clamp(36px, 5vw, 56px) 0 14px; }
.section-head + .sp-label { margin-top: 0; }

.stage-carousel { margin-top: 0; }
.sc-stage { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--surface); border: 1px solid var(--border-col); cursor: pointer; }
.sc-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,13,16,0.86), rgba(12,13,16,0.05) 55%); pointer-events: none; }
.sc-main { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; transition: opacity 0.4s var(--ease); filter: saturate(0.9); }
.sc-count { position: absolute; top: clamp(14px, 2vw, 22px); right: clamp(16px, 2vw, 26px); z-index: 2; font-family: var(--font-serif); font-size: 0.75rem; color: var(--grey-1); pointer-events: none; }
.sc-count b { color: var(--cream); font-weight: 500; font-size: 1.1rem; }
.sc-cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(18px, 2.4vw, 34px); pointer-events: none; }
.sc-name { display: block; font-family: var(--font-serif); font-weight: 500; color: var(--cream); font-size: clamp(1.2rem, 2.4vw, 2rem); line-height: 1.15; }
.sc-role { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); margin-top: 8px; }
.sc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; border-radius: 50%; background: rgba(240, 237, 232,0.92); color: var(--black); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; padding-bottom: 3px; transition: background 0.2s var(--ease), transform 0.2s var(--ease); }
.sc-arrow:hover { background: var(--cream); transform: translateY(-50%) scale(1.06); }
.sc-prev { left: clamp(12px, 1.5vw, 18px); }
.sc-next { right: clamp(12px, 1.5vw, 18px); }
.sc-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(8px, 1vw, 12px); margin-top: clamp(8px, 1vw, 12px); }
.sc-thumb { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; opacity: 0.45; transition: opacity 0.25s var(--ease); background: var(--surface); }
.sc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-thumb::after { content: ''; position: absolute; inset: 0; border: 1px solid transparent; border-radius: var(--radius-sm); transition: border-color 0.2s; }
.sc-thumb.active { opacity: 1; }
.sc-thumb.active::after { border-color: var(--cream); }
.sc-thumb:hover { opacity: 0.85; }

.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-col); border: 1px solid var(--border-col); border-radius: var(--radius-md); overflow: hidden; margin-top: clamp(34px, 4vw, 50px); }
.topic { background: var(--surface); padding: clamp(24px, 3vw, 32px) clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; }
.topic-num { font-family: var(--font-serif); font-size: 0.75rem; color: var(--grey-2); letter-spacing: 0.02em; }
.topic h3 { margin: 14px 0 10px; font-size: 1.18rem; font-weight: 500; color: var(--cream); }
.topic p { font-size: 0.94rem; line-height: 1.65; color: var(--grey-1); margin: 0; }
.topic-format { display: block; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-col); font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); line-height: 1.6; }
.topic p + .topic-format { margin-top: 18px; }

.video-embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden; background: var(--surface) center/cover no-repeat; border: 1px solid var(--border-col); cursor: pointer; }
.video-embed::after { content: ''; position: absolute; inset: 0; background: rgba(12,13,16,0.32); transition: background 0.3s var(--ease); }
.video-embed:hover::after { background: rgba(12,13,16,0.14); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.video-embed.is-playing::after, .video-embed.is-playing .video-play { display: none; }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 74px; height: 74px; border-radius: 50%; background: rgba(240, 237, 232,0.94); color: var(--black); display: flex; align-items: center; justify-content: center; padding-left: 5px; transition: transform 0.3s var(--ease), background 0.3s var(--ease); }
.video-embed:hover .video-play { transform: translate(-50%, -50%) scale(1.06); background: var(--cream); }

.speak-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-col); border: 1px solid var(--border-col); border-radius: var(--radius-md); overflow: hidden; margin-top: clamp(40px, 5vw, 60px); }
.speak-quote { background: var(--surface); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; }
.speak-quote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.02rem, 1.6vw, 1.25rem); color: var(--cream); line-height: 1.5; margin: 0; }
.speak-quote cite { display: block; margin-top: auto; padding-top: 20px; font-style: normal; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); }

.book-cta { margin-top: clamp(40px, 5vw, 60px); padding: clamp(26px, 4vw, 40px); border: 1px solid var(--grey-3); border-radius: var(--radius-md); background: var(--surface); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.book-cta-text h3 { font-size: clamp(1.2rem, 2.1vw, 1.6rem); font-weight: 500; margin: 0 0 6px; color: var(--cream); }
.book-cta-text p { font-size: 0.94rem; color: var(--grey-1); max-width: 46ch; margin: 0; }

@media (max-width: 900px) { .topics, .speak-quotes { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .sc-arrow { display: none; }
  .sc-name { font-size: 1.2rem; }
  .sc-thumbs { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .book-cta { padding: 22px 18px; }
  .book-cta .btn-primary { width: 100%; justify-content: center; }
}
@media (hover: none) { .sc-thumb:hover { opacity: 0.45; } .sc-thumb.active { opacity: 1; } }

/* ── 01b Hero artwork band ─────────────────────────────────────── */
.hero-art { padding: 0 0 clamp(8px, 1vw, 14px); }
.hero-art-wrap { position: relative; line-height: 0; border-top: 1px solid var(--border-col); border-bottom: 1px solid var(--border-col); background: var(--surface); }
.hero-art-wrap img { width: 100%; height: auto; display: block; filter: saturate(0.92); }
.hero-art-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(12,13,16,0.22) 0%, rgba(12,13,16,0) 18%, rgba(12,13,16,0) 82%, rgba(12,13,16,0.28) 100%); }
@media (max-width: 640px) { .hero-art-wrap img { aspect-ratio: 4 / 5; object-fit: cover; } }

/* ── 03 Symptoms artwork beside the list ─────────────────────────── */
.symptoms-layout { display: grid; grid-template-columns: minmax(280px, 0.8fr) 1.45fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.symptoms-art { position: sticky; top: 96px; }
.symptoms-art,
.symptoms-art-wrap,
.symptoms-main,
.symptoms-layout { background: transparent; }
.symptoms-art-wrap { border: none; border-radius: 0; overflow: hidden; background: transparent; line-height: 0; }
.symptoms-art-wrap img { width: 100%; height: auto; display: block; filter: saturate(0.9); transition: filter 0.5s var(--ease); }
.symptoms-art:hover .symptoms-art-wrap img { filter: saturate(1); }
.symptoms-art-cap { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin: 12px 0 0; line-height: 1.6; }
@media (max-width: 1000px) {
  .symptoms-layout { grid-template-columns: 1fr; }
  .symptoms-art { position: static; max-width: 560px; }
}

/* ── Craft row: linked case studies ────────────────────────────── */
.craft-link { display: inline-flex; align-items: center; }
.craft-link .craft-logo { opacity: 0.55; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.craft-link:hover .craft-logo, .craft-link:focus-visible .craft-logo { opacity: 1; transform: translateY(-1px); }
.craft-link:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; border-radius: 2px; }
.craft-logo--kitkat { height: 22px; }
.craft-logo--anytime { height: 14px; }
.craft-hint { flex-basis: 100%; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin-top: 2px; }
@media (max-width: 640px) { .craft-logo--kitkat { height: 18px; } .craft-logo--anytime { height: 12px; } }

/* ── Carousel crossfade layers ─────────────────────────────────── */
.sc-layer { opacity: 0; transition: opacity 0.9s var(--ease); will-change: opacity; }
.sc-layer.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sc-layer { transition: none; } }

/* ── Browser test pass fixes ───────────────────────────────────── */
/* symptoms art only sits beside the list when the list has real room */
@media (min-width: 1001px) and (max-width: 1180px) {
  .symptoms-layout { grid-template-columns: 1fr; }
  .symptoms-art { position: static; max-width: 560px; }
}
/* touch targets: logos, footer links and text links were 12 to 15px tall on phones */
@media (max-width: 640px) {
  .craft-link { padding: 12px 6px; margin: -12px -6px; }
  .footer-nav a { padding: 10px 0; }
  .concept-link, .fc-link, .footer-aidn, .lf-mail, .contact-email { display: inline-block; padding: 8px 0; }
  .sc-thumbs { gap: 8px; }
}
/* nav drawer extended to 900px */
@media (min-width: 641px) and (max-width: 940px) {
  .footer-nav a { padding: 10px 0; }
}

/* Debriefs nav item: tighten spacing between tablet and wide desktop */
@media (min-width: 941px) and (max-width: 1180px) { .nav-links { gap: 20px; } .nav-links a { white-space: nowrap; } }
@media (min-width: 941px) and (max-width: 1040px) { .nav-links { gap: 13px; } }


/* ── Diagnostic week by week ─────────────────────────────── */
.diag-weeks { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(22px, 3vw, 30px); border-top: 1px solid var(--border-col); }
.diag-weeks-label { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin: 0 0 18px; }
.diag-weeks-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: none; }
.diag-week { position: relative; padding: 20px 0 0; border-top: 1px solid var(--grey-3); }
.diag-week::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--cream); transition: width 0.9s var(--ease); }
.diag-weeks.in-view .diag-week::before { width: 36px; }
.diag-weeks.in-view .diag-week:nth-child(2)::before { transition-delay: 0.15s; }
.diag-weeks.in-view .diag-week:nth-child(3)::before { transition-delay: 0.3s; }
.diag-week-n { display: block; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin-bottom: 8px; }
.diag-week-t { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 500; color: var(--cream); margin: 0 0 8px; }
.diag-week p { font-family: var(--font-serif); font-size: 0.94rem; line-height: 1.65; color: var(--grey-1); margin: 0; text-wrap: pretty; }
.diag-dims { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.diag-dims li { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); border: 1px solid var(--grey-3); border-radius: var(--radius-sm); padding: 5px 8px; }
@media (max-width: 800px) { .diag-weeks-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .diag-week::before { transition: none; width: 36px; } }


/* ── Speaking band (full page lives at /speaking) ──────────────── */
.speaking-band { padding: clamp(64px, 9vw, 112px) 0; }
.spb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4.5vw, 64px); align-items: center; }
.spb-media { position: relative; display: block; line-height: 0; border: 1px solid var(--border-col); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.spb-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 32%; filter: saturate(0.85); transition: transform 0.9s var(--ease), filter 0.4s var(--ease); }
.spb-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,13,16,0.78), rgba(12,13,16,0) 45%); pointer-events: none; }
.spb-cap { position: absolute; left: 18px; bottom: 16px; z-index: 1; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-1); line-height: 1.4; }
@media (hover: hover) { .spb-media:hover img { transform: scale(1.03); filter: saturate(1); } }
.spb-body h2 { margin: 0 0 16px; }
.spb-lede { font-family: var(--font-serif); font-size: 1rem; line-height: 1.75; color: var(--grey-1); max-width: 52ch; margin: 0; }
.spb-topics { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--border-col); }
.spb-topics li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border-col); font-family: var(--font-serif); font-size: 1.05rem; color: var(--cream); }
.spb-topics span { font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); min-width: 20px; }
.spb-quote { margin: 22px 0 0; font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; color: var(--cream); }
.spb-quote cite { font-style: normal; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); margin-left: 10px; }
.spb-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 900px) { .spb { grid-template-columns: 1fr; } .spb-media img { aspect-ratio: 16 / 9; } }
@media (max-width: 480px) { .spb-ctas a { width: 100%; justify-content: center; } }


/* Growth Quarters grid: a lone last card fills its row, no empty cells */
.caps-grid > .cap:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
@media (max-width: 900px) { .caps-grid > .cap:last-child:nth-child(3n+1) { grid-column: auto; } .caps-grid > .cap:last-child:nth-child(2n+1) { grid-column: 1 / -1; } }
@media (max-width: 560px) { .caps-grid > .cap:last-child { grid-column: auto; } }

/* Mobile trims: keep the long middle of the page moving */
@media (max-width: 560px) {
  .caps-grid { grid-template-columns: 1fr 1fr; }
  .caps-grid > .cap:last-child { grid-column: 1 / -1; }
  .cap { padding: 16px 14px 18px; gap: 6px; }
  .cap h3 { font-size: 0.98rem; line-height: 1.3; }
  .cap p { display: none; }
  .act-head { margin-bottom: 24px; }
  .about-photo-wrap { max-height: 380px; overflow: hidden; }
  .about-photo-wrap img { object-fit: cover; object-position: center 20%; }
  .door-best { font-size: 0.92rem; }
}

/* ── Selected work: results in the tiles (number first, story on hover) ── */
.client-grid--results .client-cell { display: block; padding: 0; min-height: 0; }
.client-grid--results .cr { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100%; padding: clamp(22px, 2.6vw, 30px) clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 26px); }
.cr-logo { display: flex; align-items: center; height: 40px; margin-bottom: clamp(18px, 2.4vw, 26px); }
.client-grid--results .client-cell--at { height: 20px; }
.client-grid--results .client-cell--sb { height: 26px; }
.client-grid--results .client-cell--eq { height: 40px; }
.cr-num { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1; color: var(--cream); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; transition: transform 0.45s var(--ease); }
.cr-k { margin-top: 10px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--grey-2); line-height: 1.5; transition: transform 0.45s var(--ease); }
.cr-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s var(--ease), opacity 0.35s var(--ease), margin 0.45s var(--ease); margin-top: 0; }
.cr-more > * { overflow: hidden; }
.cr-more { gap: 0; }
.cr-line { display: block; font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.5; color: var(--grey-1); text-wrap: balance; }
.cr-go { display: block; margin-top: 10px; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em;  color: var(--cream); }
.cr-more { grid-template-rows: 0fr; }
.cr-more-inner { min-height: 0; }
/* space for the story is always reserved, so hovering never moves the page */
.client-grid--results .cr-more { grid-template-rows: 1fr; margin-top: 16px; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease); }
@media (hover: hover) {
  .client-grid--results .client-cell:hover .cr-more, .client-grid--results .cr:focus-visible .cr-more { opacity: 1; transform: none; }
  .client-grid--results .client-cell:hover .cr-num { transform: translateY(-2px); }
}
@media (hover: none) { .client-grid--results .cr-more { opacity: 1; transform: none; margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .cr-num, .cr-k, .cr-more { transition: none; } }

/* Never allow sideways page scroll on small screens */
html, body { overflow-x: clip; }

/* Homepage labels are Lora at 0.8rem. Grey text stays at least 0.75rem. */
.eyebrow,
.hero-caps li,
.diag-week-n,
.diag-dims li,
.door-num,
.door-best-k,
.door-price,
.door-link,
.cap-num,
.why-step-k,
.case-card-link,
.symptoms-box-k,
.craft-label,
.craft-hint,
.form-field label,
.guarantee-fine summary,
.diag-side-label,
.mode-card h4 {
  font-family: var(--font-serif);
}
.eyebrow,
.hero-caps li,
.diag-week-n,
.diag-dims li,
.door-num,
.door-best-k,
.door-price,
.door-link,
.cap-num,
.why-step-k,
.case-card-link,
.symptoms-box-k,
.craft-label,
.craft-hint,
.form-field label,
.guarantee-fine summary,
.diag-side-label {
  font-size: 0.8rem;
}
.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.mode-card { border: 1px solid var(--border-col); border-radius: var(--radius-md); padding: 22px 20px 24px; background: transparent; min-height: 100%; }
.mode-card h4 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.25; margin: 0 0 12px; color: var(--cream); }
.mode-card p { margin: 0; color: var(--grey-1); font-size: 0.98rem; line-height: 1.6; }
@media (max-width: 800px) { .mode-grid { grid-template-columns: 1fr; } }
.sticky-cta {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  left: auto;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 14px 22px;
  border: 1px solid #F0EDE8;
  border-radius: 2px;
  background: #F0EDE8;
  color: #111111;
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: none;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
}
.sticky-cta.is-on {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.sticky-cta small { display: none; }
@media (max-width: 768px) {
  .sticky-cta,
  .sticky-cta.is-on {
    left: 0; right: 0; bottom: 0;
    width: 100%;
    border-radius: 0;
    min-height: 56px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (min-width: 769px) {
  .sticky-cta,
  .sticky-cta.is-on { display: none !important; }
}


/* Folded pathway meetings */
.door-meet { display: flex; flex-direction: column; gap: 8px; }
.door-meet + .door-meet { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--border-col); }
.door-meet-k { margin: 0; font-family: var(--font-serif); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--grey-2); }
.door .diag-dims { margin-top: 4px; }

/* Smaller stage boxes */
.act-fit-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--cream); margin: 8px 0 18px; text-wrap: balance; }
.act-modes .mode-card { padding: 16px 16px 18px; }
.act-modes .mode-card h4 { font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin-bottom: 8px; }
.act-modes .mode-card p { font-size: 0.92rem; line-height: 1.5; }
.act-modes .act-price { margin: 18px 0 16px; font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.5; color: var(--grey-1); }

/* Capability hub */
.hub { margin: 8px 0 clamp(36px, 5vw, 56px); }
.hub-radial { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; aspect-ratio: 1000 / 640; }
.hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-pill { fill: #111111; stroke: #D2D2D2; stroke-width: 1.25; }
.hub-you-t, .hub-chris-t, .hub-co-t { font-family: "Lora", Georgia, serif; fill: #F0EDE8; }
.hub-you-t { font-size: 16px; }
.hub-chris-t { font-size: 20px; font-weight: 500; }
.hub-co-t { font-size: 12px; fill: #D2D2D2; }
.hub-line { stroke-dasharray: 1; stroke-dashoffset: 0; fill: none; }
.hub-nodes { list-style: none; margin: 0; padding: 0; }
.hub-node {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  width: max-content; max-width: 168px; text-align: center; z-index: 2;
}
.hub-name {
  display: block; font-family: var(--font-serif); font-size: 0.92rem; line-height: 1.3;
  color: #F0EDE8; font-weight: 500; text-wrap: balance;
}
.hub-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 220px; padding: 8px 10px;
  background: #111111; color: #D2D2D2; border: 1px solid rgba(141,141,141,.35); border-radius: 2px;
  font-family: var(--font-serif); font-size: 0.75rem; line-height: 1.45; text-align: left;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 3;
}
.hub-node--below .hub-tip { bottom: auto; top: calc(100% + 8px); }
.hub-node:hover .hub-tip, .hub-node:focus-within .hub-tip { opacity: 1; }
.hub.is-on .hub-line { animation: hubDraw 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
.hub.is-on .hub-node { animation: hubIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
.hub.is-on .hub-pair { animation: hubIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes hubDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hubIn { from { opacity: 0; } to { opacity: 1; } }
.hub-tree { display: none; }
@media (max-width: 900px) {
  .hub-radial { display: none; }
  .hub-tree { display: block; max-width: 100%; }
  .hub-tree-core { display: flex; flex-direction: column; align-items: center; gap: 0; margin-bottom: 8px; }
  .hub-you, .hub-chris {
    margin: 0; border: 1px solid #D2D2D2; background: transparent; color: #F0EDE8;
    font-family: var(--font-serif); text-align: center; border-radius: 999px;
  }
  .hub-you { padding: 10px 22px; font-size: 1rem; position: relative; z-index: 1; }
  .hub-bridge { display: block; width: 1px; height: 18px; background: #D2D2D2; margin: -1px 0; }
  .hub-chris { padding: 12px 22px 11px; min-width: 0; max-width: 100%; }
  .hub-chris strong { display: block; font-weight: 500; font-size: 1.05rem; }
  .hub-chris span { display: block; margin-top: 2px; font-size: 0.75rem; color: #D2D2D2; }
  .hub-branches { list-style: none; margin: 14px 0 0; padding: 0; }
  .hub-branch { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: stretch; }
  .hub-stem { position: relative; display: block; }
  .hub-stem::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: rgba(141,141,141,.35); transform-origin: top; }
  .hub-branch:last-child .hub-stem::before { bottom: auto; height: 16px; }
  .hub-stem::after { content: ""; position: absolute; left: 10px; top: 15px; width: 16px; height: 1px; background: #D2D2D2; transform-origin: left center; }
  .hub-leaf { min-width: 0; padding: 8px 0 12px; }
  .hub-leaf strong { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 0.98rem; line-height: 1.35; color: #F0EDE8; text-wrap: balance; }
  .hub-leaf small { display: block; margin-top: 3px; font-family: var(--font-serif); font-size: 0.8rem; line-height: 1.45; color: #D2D2D2; text-wrap: pretty; }
  .hub.is-on .hub-stem::before, .hub.is-on .hub-stem::after, .hub.is-on .hub-bridge { animation: hubGrow 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
  .hub.is-on .hub-leaf, .hub.is-on .hub-tree-core { animation: hubIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
  @keyframes hubGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
}
@media (max-width: 900px) {
  .hub.is-on .hub-stem::after { animation-name: hubGrowX; }
  @keyframes hubGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce), (scripting: none) {
  .hub.is-on .hub-line, .hub.is-on .hub-pair { animation: none !important; stroke-dashoffset: 0 !important; }
  .hub.is-on .hub-node, .hub.is-on .hub-leaf, .hub.is-on .hub-tree-core { animation: none !important; opacity: 1 !important; }
  .hub.is-on .hub-stem::before, .hub.is-on .hub-stem::after, .hub.is-on .hub-bridge { animation: none !important; }
}