/* ==========================================================================
   Homepage-specific styles (index.html)
   Section-level layout, responsive overrides, animations.
   Shared button / nav / footer / cookie / case-overlay component styles
   live in components.css — this file only covers what's unique to the
   homepage's seven sections + hero.
   ========================================================================== */

.pg-sec {
  height: 100dvh;
  overflow: hidden;
  background: linear-gradient(var(--colour-bg), var(--colour-bg)) center / 100% 100% no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  padding: min(20px, 1.8dvh) 20px min(20px, 1.8dvh) 20px;
  position: relative;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.pg-label-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-top: 8px;
}

.pg-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  gap: 5px;
  padding: 4px 0;
  flex-shrink: 0;
}

.pg-menu-btn span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--colour-ink);
  display: block;
}

/* .pg-col, .pg-title, .pg-headline, .pg-body now live in base.css since
   every page uses the same global type-scale primitives, not just home. */

/* ===== Global keyframes ===== */
@keyframes caseSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes caseSlideDown { from { transform: translateY(0); } to { transform: translateY(100%); } }
.slide-up { animation: caseSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.slide-down { animation: caseSlideDown 0.42s cubic-bezier(0.4, 0, 1, 1) forwards; }

/* ===== Global glass-button hover/active (mirrors .pg-btn in components.css) =====
   Homepage glass CTAs (.hero-btn, .eng-btn, .iq-submit, .iq-reset) don't carry
   the shared .pg-btn class, so they need their own copy of the same
   hover/press treatment — otherwise they're dead buttons on desktop. */
.hero-btn, .eng-btn, .iq-submit, .iq-reset, .ss-tier-btn,
.pg-btn {
  transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.hero-btn:hover, .eng-btn:hover, .iq-submit:hover, .iq-reset:hover, .ss-tier-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: var(--shadow-glass-hover);
}
.hero-btn:active, .eng-btn:active, .iq-submit:active, .iq-reset:active, .ss-tier-btn:active {
  filter: brightness(1.05);
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(58, 63, 67, 0.18);
}
/* .onto-next-btn keeps its own hover/press rule (rather than joining the
   list above) because its base position already relies on a
   translateY(-50%) transform for vertical centring — it needs that
   preserved alongside the hover/press offset, unlike the other glass CTAs
   here which have no base transform. */
.onto-next-btn { transition: filter 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.onto-next-btn:hover { filter: brightness(1.05); transform: translateY(-50%) translateY(-1px); box-shadow: var(--shadow-glass-hover); }
.onto-next-btn:active { filter: brightness(1.05); transform: translateY(-50%) translateY(1px); box-shadow: inset 0 2px 6px rgba(58, 63, 67, 0.18); }

/* Prev / next / close icon hover colour */
button[aria-label="Close"] svg, button[aria-label="Previous"] svg, button[aria-label="Next"] svg,
button[aria-label="Previous case"] svg, button[aria-label="Next case"] svg,
button[aria-label="Previous review"] svg, button[aria-label="Next review"] svg {
  transition: stroke 0.2s ease;
}
button[aria-label="Close"]:hover svg, button[aria-label="Previous"]:hover svg, button[aria-label="Next"]:hover svg,
button[aria-label="Previous case"]:hover svg, button[aria-label="Next case"]:hover svg,
button[aria-label="Previous review"]:hover svg, button[aria-label="Next review"]:hover svg {
  stroke: var(--colour-accent) !important;
}

/* ===== Hero ===== */
.hero-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--size-page-title); letter-spacing: 0.04em; color: var(--colour-ink); text-transform: uppercase; }
.hero-slogan { margin: 2px 0 0 0; font-family: var(--font-body); font-size: calc(var(--size-page-title) - 0.5pt - 0.05rem); font-weight: 300; color: #6E7780; }
.hero-mono { width: 100%; max-width: 300px; height: 100%; min-height: max(100px, 18dvh); max-height: 345px; align-self: center; position: relative; }
.hero-headline { margin: 0; font-family: var(--font-ui); font-weight: 400; -webkit-text-stroke: 0.048em currentColor; font-size: var(--size-hero-headline); line-height: 1.14; letter-spacing: calc(0.029em + 0.2pt); text-transform: uppercase; color: var(--colour-ink); text-wrap: balance; }
.hero-bottom-row { display: flex; flex-direction: column; }
.hero-cta { margin-top: min(24px, 2dvh); display: flex; flex-direction: column; gap: min(10px, 1.2dvh); width: 100%; }
.hero-btn { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; padding: min(18px, 1.6dvh) 12px; border-radius: 14px; background: rgba(123, 148, 175, 0.37); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(58, 63, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.50); color: var(--colour-ink); font-size: calc(var(--size-body) - 0.5pt); font-weight: 400; -webkit-text-stroke: 0.018em currentColor; font-family: var(--font-ui); }

/* ===== Section 2 — Success Stories ===== */
.ss-body { margin-top: calc(var(--size-page-title) * 1.15); max-width: 640px; }
.ss-cards { display: flex; flex-direction: column; gap: min(14px, 1.5dvh); flex: 1; min-height: 0; width: 100%; margin-top: calc(min(16px, 1.6dvh) + 10px); }
.ss-card { flex: 1; min-height: 80px; background: var(--colour-card); border-radius: 18px; padding: 12px 16px; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05); cursor: pointer; position: relative; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.ss-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(58, 63, 67, 0.16); }
.ss-cardname { font-family: var(--font-ui); font-weight: 400; -webkit-text-stroke: 0.018em currentColor; font-size: min(0.9rem, 4cqw, 2.4dvh); letter-spacing: 0.1em; color: var(--colour-ink); text-transform: uppercase; }
.ss-logo { position: relative; display: flex; align-items: center; justify-content: center; }
.ss-logo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.ss-card:nth-child(1) .ss-logo { transform: scale(0.75); }
.ss-card:nth-child(2) .ss-logo { transform: scale(0.92625); }
.ss-card:nth-child(3) .ss-logo { transform: scale(1.0890625); }
.ss-tier { font-family: var(--font-ui); font-size: min(0.95rem, 4.2cqw, 2.5dvh); font-weight: 400; -webkit-text-stroke: 0.02em currentColor; letter-spacing: 0.08em; color: var(--colour-accent); text-transform: uppercase; }
.ss-desc { font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); line-height: 1.25; color: #5C646B; }
.ss-qual { margin-top: min(16px, 1.6dvh); text-align: center; width: 100%; }
.ss-tiers { display: flex; justify-content: center; gap: min(8px, 2cqw); margin-top: min(10px, 1dvh); width: 100%; }
.ss-tier-btn {
  flex: 1; cursor: pointer; border: none; border-radius: 14px; padding: min(11px, 1.2dvh) 6px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(123, 148, 175, 0.37); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(58, 63, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.50);
  font-family: var(--font-ui); font-size: min(0.8rem, 3.5cqw, 2dvh); letter-spacing: 0.06em; color: var(--colour-ink); text-transform: uppercase;
}
.ss-tier-dot { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid rgba(58, 63, 67, 0.45); box-sizing: border-box; background: rgba(255, 255, 255, 0.45); display: flex; align-items: center; justify-content: center; }
.ss-tier-dot__fill { width: 8px; height: 8px; border-radius: 50%; background: var(--colour-ink); display: none; }
.ss-tier-btn.is-selected .ss-tier-dot__fill { display: block; }

@media (min-width: 760px) {
  #success-stories { background-size: 100% 100% !important; }
  #success-stories .pg-col { max-width: 1200px !important; margin: 0 auto !important; }
  #success-stories .ss-label { font-size: min(16pt, 3dvh) !important; }
  #success-stories .ss-body { font-size: min(12pt, 2.4dvh) !important; max-width: 700px !important; }
  #success-stories .ss-desc { font-size: min(12pt, 2.4dvh) !important; line-height: 1.3 !important; }
  #success-stories .ss-cards { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; gap: 0 !important; flex: 0 0 auto !important; margin-top: auto !important; margin-bottom: auto !important; }
  #success-stories .ss-card { flex: 0 0 auto !important; padding: 26px 28px !important; height: 55dvh !important; width: 30% !important; box-sizing: border-box !important; min-height: 0 !important; }
  #success-stories .ss-logo { height: min(150px, 17dvh) !important; max-width: 90% !important; }
  #success-stories .ss-card:nth-child(1) .ss-logo { transform: scale(0.6555) !important; }
  #success-stories .ss-card:nth-child(2) .ss-logo { transform: scale(0.8984625) !important; }
  #success-stories .ss-card:nth-child(3) .ss-logo { transform: scale(0.9001101563) !important; }
  #success-stories .ss-cardname { font-size: min(15pt, 2.7dvh) !important; }
  #success-stories .ss-tier { font-size: min(15pt, 2.7dvh) !important; font-weight: 500 !important; -webkit-text-stroke: 0.03em currentColor !important; margin-bottom: 10px !important; }
  #success-stories .ss-qual { margin-top: 0 !important; margin-bottom: min(30px, 4dvh) !important; }
  #success-stories .ss-tiers { max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; gap: 12px !important; }
  #success-stories .ss-tiers button { font-size: min(12pt, 2.4dvh) !important; }
}

/* ===== Section 3 — Selected Marks ===== */
#selected-marks { padding-bottom: 0 !important; }
/* Heading-to-description gap matched to Section 6's reference spacing (see
   .eng-body) — .pg-body has no bespoke section-3 class of its own, so this
   scopes the override to #selected-marks only, leaving the shared base
   .pg-body 10px margin-top untouched for every other page that uses it. */
#selected-marks .pg-body { margin-top: calc(var(--size-page-title) * 1.15); }
.s3-stack { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: min(14px, 1.6dvh); width: 100%; margin-top: 25px; }
.pg-prompt { margin: 0; }
.pg-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: calc((100cqw - 20px) / 3); gap: 10px; width: 100%; flex: 0 0 auto; min-height: 0; }
.pg-grid > * { transition: transform 0.22s ease, box-shadow 0.22s ease; border-radius: 16px; position: relative; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pg-grid > *:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(58, 63, 67, 0.16); z-index: 2; }
.mark-logo { pointer-events: none; filter: brightness(0) invert(1); transform: scale(0.75); }
.mark-heart {
  position: absolute; top: 8px; right: 8px; width: 39px; height: 39px; border-radius: 50%;
  background: var(--colour-card); display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.mark-heart__icon { width: 21px; height: 21px; background: var(--colour-accent); -webkit-mask: url(/assets/images/site/heart.svg) center / contain no-repeat; mask: url(/assets/images/site/heart.svg) center / contain no-repeat; }
.pg-grid > *.is-selected .mark-heart { display: flex; }
.s3-cta { margin-bottom: 35px; margin-top: 0; display: flex; flex-direction: column; align-items: center; gap: min(6px, 0.8dvh); width: 100%; }
.s3-cta-note { font-family: var(--font-body); font-weight: 300; font-size: min(0.8rem, 3.6cqw, 2.1dvh); color: #5C646B; text-align: center; }

@media (max-width: 759px) {
  #selected-marks .pg-grid > *:hover { transform: none; box-shadow: none; z-index: auto; }
}

@media (min-width: 760px) {
  .s1-width-btn { width: var(--lib-w, 400px) !important; align-self: center !important; }
  #selected-marks { background-size: 100% 100% !important; }
  #selected-marks .pg-col { max-width: 1200px !important; margin: 0 auto !important; }
  #selected-marks .pg-title { font-size: min(16pt, 3dvh) !important; }
  #selected-marks .pg-headline { font-size: min(40px, 5dvh) !important; max-width: 820px !important; }
  #selected-marks .pg-body { font-size: min(12pt, 2.4dvh) !important; max-width: 820px !important; }
  #selected-marks .pg-prompt { font-size: calc(min(12pt, 2.4dvh) + 1pt) !important; }
  #selected-marks .pg-grid {
    --mk-w: 100cqw; --mk-gap: 14px; --mk-cell: calc((var(--mk-w) - 5 * var(--mk-gap)) / 6);
    grid-template-columns: repeat(6, var(--mk-cell)) !important; grid-template-rows: none !important;
    grid-auto-rows: var(--mk-cell) !important; gap: var(--mk-gap) !important; width: 100% !important;
    flex: 0 0 auto !important; justify-content: center !important;
  }
  #selected-marks .pg-grid > *:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
  #selected-marks .pg-grid > *:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
  #selected-marks .pg-grid > *:nth-child(3) { grid-column: 3 !important; grid-row: 1 !important; }
  #selected-marks .pg-grid > *:nth-child(4) { grid-column: 1 !important; grid-row: 2 !important; }
  #selected-marks .pg-grid > *:nth-child(5) { grid-column: 2 / span 2 !important; grid-row: 2 !important; }
  #selected-marks .pg-grid > *:nth-child(6) { grid-column: 4 / span 2 !important; grid-row: 1 !important; }
  #selected-marks .pg-grid > *:nth-child(7) { grid-column: 6 !important; grid-row: 1 / span 2 !important; }
  #selected-marks .pg-grid > *:nth-child(8) { grid-column: 4 !important; grid-row: 2 !important; }
  #selected-marks .pg-grid > *:nth-child(9) { grid-column: 5 !important; grid-row: 2 !important; }
}

/* ===== Section 4 — The Ontologist ===== */
.onto-mobile { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; width: 100%; }
.onto-desktop { display: none; flex: 1 1 auto; min-height: 0; width: 100%; flex-direction: column; gap: min(26px, 3dvh); padding-top: min(20px, 2.4dvh); }
.onto-awards { display: flex; justify-content: center; align-items: flex-start; gap: 25px; margin-top: calc(var(--size-page-title) * 1.15 + 10px); width: 100%; }
.onto-award-slot { width: min(58px, 15cqw); height: min(74px, 9dvh); flex-shrink: 0; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box; }
.onto-award-slot:nth-child(1) { margin-right: 20px; }
.onto-award-slot:nth-child(2) { margin-right: 5px; }
.onto-award-slot:nth-child(3) { margin-top: 3px; }
.onto-award-slot img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.3125); }
.onto-award-slot:nth-child(1) img, .onto-award-slot:nth-child(2) img { transform: scale(1.96875); }
.onto-portrait { flex: 1 1 auto; min-height: min(135px, 18dvh); max-height: 34dvh; width: 75%; align-self: center; margin-top: calc(min(24px, 3dvh) + 20px); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.onto-portrait-d { flex: 1 1 auto; min-height: 0; width: 100%; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; }
.onto-portrait img, .onto-portrait-d img { height: 100%; width: auto; max-width: none; filter: grayscale(1); }
.onto-placeholder-text { font-family: var(--font-body); font-size: 0.7rem; color: rgba(58, 63, 67, 0.4); text-align: center; padding: 8px; }
.onto-headline { margin: calc(min(16px, 1.8dvh) + 20px) 0 0 0; font-family: var(--font-ui); font-weight: 400; -webkit-text-stroke: 0.048em currentColor; font-size: min(2.4rem, 8.8cqw, 4dvh); line-height: 1.1; letter-spacing: calc(0.029em + 0.2pt); text-transform: uppercase; color: var(--colour-ink); text-wrap: balance; }
.onto-bio { margin: min(18px, 2.2dvh) 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); line-height: 1.3; color: #5C646B; }
.onto-prompt { margin: auto 0 0 0; padding-top: min(16px, 1.8dvh); font-family: var(--font-ui); font-weight: 400; font-size: calc(min(0.95rem, 4.2cqw, 2.5dvh) + 1pt); letter-spacing: 0.02em; line-height: 1.15; color: var(--colour-accent); }
.onto-input-wrap { position: relative; width: 100%; margin-top: min(10px, 1.2dvh); }
.onto-input { width: 100%; box-sizing: border-box; background: var(--colour-card); border: none; border-radius: 4px; padding: min(16px, 1.8dvh) 60px min(16px, 1.8dvh) 16px; font-family: var(--font-body); font-weight: 300; font-size: min(1rem, 4.6cqw, 2.8dvh); color: var(--colour-ink); box-shadow: 0 4px 14px rgba(58, 63, 67, 0.06); }
.onto-count { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 300; font-size: min(0.9rem, 4cqw, 2.4dvh); color: #8A9299; pointer-events: none; }
/* Replaces the "5 of 5" counter once the fifth word is typed — same glass
   treatment as every other CTA on the site, just circular/icon-only since
   it lives inside the input field rather than as a full-width button. */
.onto-next-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: none; border-radius: 999px; background: rgba(123, 148, 175, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 10px rgba(58, 63, 67, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.55); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.onto-next-btn svg { display: block; }
.onto-award-row-d { display: flex; gap: 20px; align-items: flex-start; flex: 0 0 auto; margin-left: -10px; }
.onto-award-slot-d { width: 92px; height: 116px; border-radius: 4px; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; }
.onto-award-slot-d:nth-child(1) { margin-right: 15px; }
.onto-award-slot-d:nth-child(3) { margin-top: 3px; }
.onto-award-slot-d img { width: 100%; height: 100%; object-fit: contain; }
.onto-award-slot-d:nth-child(1) img, .onto-award-slot-d:nth-child(2) img { transform: scale(1.5); }

@media (min-width: 760px) {
  #the-ontologist { background-size: 100% 100% !important; }
  #the-ontologist .pg-col { max-width: 1200px !important; margin: 0 auto !important; }
  #the-ontologist .pg-title { font-size: min(16pt, 3dvh) !important; }
  #the-ontologist .onto-mobile { display: none !important; }
  #the-ontologist .onto-desktop { display: flex !important; }
}

/* ===== Section 5 — The Proof ===== */
.pf-headline { margin: calc(var(--size-page-title) * 1.15) 0 0 0; font-family: var(--font-ui); font-weight: 400; -webkit-text-stroke: 0.048em currentColor; font-size: min(2.4rem, 8.8cqw, 4dvh); line-height: 1.1; letter-spacing: calc(0.029em + 0.2pt); text-transform: uppercase; color: var(--colour-ink); }
.pf-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: min(12px, 1.4dvh); flex: 1 1 auto; min-height: 0; width: 100%; margin-top: calc(min(16px, 1.8dvh) + 10px); margin-bottom: 15px; }
.pf-card { background: var(--colour-card); border-radius: 16px; padding: min(11px, 1.2dvh) min(12px, 3cqw); display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05); cursor: pointer; min-height: 0; overflow: hidden; position: relative; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.pf-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(58, 63, 67, 0.12); }
.pf-expand { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 16px; right: 16px; z-index: 1; }
.pf-quote-mark { margin-top: 10px; font-family: var(--font-ui); font-weight: 500; font-size: calc(min(3rem, 13cqw, 5.2dvh) + 9pt); line-height: 0.5; color: var(--colour-accent); height: calc(min(1.2rem, 5cqw, 2.1dvh) - 10px); }
.pf-punch { margin-top: min(6px, 0.7dvh); padding: 0 10px; font-family: var(--font-ui); font-weight: 500; font-size: calc(min(0.92rem, 4.3cqw, 2dvh) + 7pt); letter-spacing: 0.5pt; line-height: 1.0; color: var(--colour-ink); }
.pf-preview { display: none; margin: calc(min(10px, 1.2dvh) + 1em) 0 0 0; padding: 0 10px; font-family: var(--font-body); font-weight: 300; font-size: min(0.9rem, 2dvh); line-height: 1.4; color: #5C646B; }
.pf-spacer { flex: 1; min-height: min(6px, 0.8dvh); }
.pf-meta { display: flex; align-items: flex-start; gap: min(8px, 2.2cqw); margin-top: min(8px, 1dvh); padding-right: 30px; box-sizing: border-box; }
.pf-avatar { width: min(42px, 8cqw); height: min(42px, 8cqw); border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--colour-bg); border: 1px solid rgba(58, 63, 67, 0.10); display: flex; align-items: center; justify-content: center; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-name { font-family: var(--font-ui); font-weight: 500; font-size: calc(min(0.66rem, 3cqw, 1.7dvh) + 2pt); line-height: 1.15; color: var(--colour-ink); }
.pf-sub { font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.62rem, 2.8cqw, 1.6dvh) + 1pt); line-height: 1.2; color: #5C646B; }

@media (max-width: 767px) {
  #the-proof .pf-expand { bottom: 10px; right: 10px; }
  #the-proof .pf-expand svg { width: 16px !important; height: 16px !important; }
  /* pf-expand sits absolutely at the card's bottom-right corner, well below
     the meta row, so the name/country line doesn't need to reserve space
     for it — freeing that width is what lets the name fit on one line. */
  #the-proof .pf-meta { padding-right: 0; }
  /* Client details: too many lines on mobile — drop the job title and the
     company name, keep just the name + country so it fits in two lines. */
  #the-proof .pf-name { font-size: calc(min(0.66rem, 3cqw, 1.7dvh) + 1.5pt); white-space: nowrap; }
  #the-proof .pf-title { display: none; }
  #the-proof .pf-company, #the-proof .pf-sep { display: none; }
  /* Punch title (the card's bold headline) — reduced 2pt, then a further
     3pt, from the base (+7pt) mobile size, so +2pt total. */
  #the-proof .pf-punch { font-size: calc(min(0.92rem, 4.3cqw, 2dvh) + 2pt); }
  /* Show a 2-line testimonial preview 10px below the (now smaller) title —
     previously mobile only showed the punch title with no preview text at
     all (preview was desktop-only). Line-height reduced 5px off the base
     1.4em via calc() so it's an exact px reduction regardless of the
     current font-size. */
  #the-proof .pf-preview { display: -webkit-box; margin-top: 10px; line-height: calc(1.4em - 5px); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

@media (min-width: 768px) {
  #the-proof { background-size: 100% 100% !important; }
  #the-proof .pg-col { max-width: 1200px !important; margin: 0 auto !important; }
  #the-proof .pf-label { font-size: min(16pt, 3dvh) !important; }
  #the-proof .pf-headline { font-size: min(40px, 5dvh) !important; }
  #the-proof .pf-grid { grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: min(265px, 48dvh) !important; align-content: center !important; gap: min(25px, 2.4dvh) !important; }
  #the-proof .pf-card { padding: min(20px, 2.2dvh) min(20px, 4.5cqw) !important; }
  #the-proof .pf-preview { display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #the-proof .pf-meta { display: flex !important; margin-top: min(14px, 1.6dvh) !important; gap: calc(min(8px, 2.2cqw) + 5px) !important; }
  #the-proof .pf-name { font-size: calc(min(0.66rem, 3cqw, 1.7dvh) + 3pt) !important; }
  #the-proof .pf-sub { font-size: calc(min(0.62rem, 2.8cqw, 1.6dvh) + 1.5pt) !important; }
  #the-proof .pf-punch { font-size: calc(min(1.15rem, 2.5dvh) + 3pt) !important; }
  #the-proof .pf-expand { display: block !important; }
}

/* ===== Section 6 — The Engagements ===== */
.eng-body { margin: calc(var(--size-page-title) * 1.15) 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); line-height: 1.3; color: #5C646B; }
#engagements-carousel { display: flex; gap: min(12px, 3cqw); flex: 1 1 auto; min-height: 0; width: 100%; margin-top: min(16px, 1.8dvh); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
#engagements-carousel::-webkit-scrollbar { display: none; }
.eng-card { flex: 0 0 86%; scroll-snap-align: center; display: flex; flex-direction: column; background: var(--colour-card); border-radius: 18px; padding: min(18px, 2dvh) min(18px, 4.5cqw); box-shadow: 0 6px 18px rgba(58, 63, 67, 0.05); box-sizing: border-box; min-height: 0; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease; }
.eng-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(58, 63, 67, 0.16); }
.eng-icon { width: min(26px, 3.2dvh); height: min(26px, 3.2dvh); margin-bottom: calc(min(9px, 1.1dvh) + 10px); flex-shrink: 0; }
.eng-tier { font-family: var(--font-ui); font-weight: 500; font-size: min(0.9rem, 4cqw, 2.4dvh); letter-spacing: 0.06em; color: var(--colour-accent); text-transform: uppercase; margin-bottom: 10px; }
.eng-receive-label { margin-top: min(12px, 1.4dvh); font-family: var(--font-body); font-weight: 700; font-size: min(0.72rem, 3.1cqw, 1.9dvh); letter-spacing: 0.1em; color: #8A9299; text-transform: uppercase; }
.eng-items { margin: min(8px, 1dvh) 0 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: min(7px, 0.9dvh); flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.eng-items::-webkit-scrollbar { display: none; }
.eng-items li { display: flex; gap: 9px; align-items: flex-start; font-family: var(--font-body); font-weight: 300; font-size: min(0.9rem, 4cqw, 2.3dvh); line-height: 1.25; color: var(--colour-ink); }
.eng-items svg { flex-shrink: 0; margin-top: 0.25em; }
.eng-delivers { margin: auto 0 0 0; font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: min(0.82rem, 3.7cqw, 2.1dvh); line-height: 1.3; color: #5C646B; }
.eng-btn { margin-top: min(16px, 1.8dvh); display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; padding: min(12px, 1.2dvh) 24px; border-radius: 14px; background: rgba(123, 148, 175, 0.37); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(58, 63, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.50); color: var(--colour-ink); font-size: calc(var(--size-body) - 0.5pt); font-weight: 400; -webkit-text-stroke: 0.018em currentColor; font-family: var(--font-ui); }
.eng-hint { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: min(12px, 1.4dvh); }
.eng-hint span { font-family: var(--font-body); font-weight: 300; font-size: min(0.75rem, 3.4cqw, 1.9dvh); color: #8A9299; }
.eng-hint button { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }

/* Featured middle engagement card */
#engagements-carousel > .eng-card:nth-child(2) { background: var(--colour-accent) !important; box-shadow: 0 14px 34px rgba(58, 63, 67, 0.24) !important; }
#engagements-carousel > .eng-card:nth-child(2) .eng-tier { color: var(--colour-bg) !important; }
#engagements-carousel > .eng-card:nth-child(2) .eng-receive-label { color: rgba(246, 243, 238, 0.72) !important; }
#engagements-carousel > .eng-card:nth-child(2) .eng-icon { stroke: var(--colour-bg) !important; }
#engagements-carousel > .eng-card:nth-child(2) .eng-items li { color: var(--colour-bg) !important; }
#engagements-carousel > .eng-card:nth-child(2) .eng-items li svg { stroke: var(--colour-bg) !important; }
#engagements-carousel > .eng-card:nth-child(2) .eng-delivers { color: rgba(246, 243, 238, 0.92) !important; }
#engagements-carousel > .eng-card:nth-child(2) .eng-btn { background: var(--colour-bg) !important; color: var(--colour-ink) !important; box-shadow: 0 10px 26px rgba(58, 63, 67, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; }

@media (max-width: 767px) {
  #the-engagements #engagements-carousel .eng-card { height: calc(100% - 25px); align-self: center; }
}

@media (min-width: 768px) {
  #the-engagements { background-size: 100% 100% !important; }
  #the-engagements .pg-col { max-width: 1200px !important; margin: 0 auto !important; }
  #the-engagements .eng-label { font-size: min(16pt, 3dvh) !important; }
  #the-engagements .eng-body { font-size: min(12pt, 2.4dvh) !important; line-height: 1.3 !important; max-width: 900px !important; }
  #the-engagements #engagements-carousel { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; overflow: visible !important; scroll-snap-type: none !important; flex: 0 0 auto !important; margin-top: auto !important; margin-bottom: 35px !important; align-items: stretch !important; }
  #the-engagements #engagements-carousel > .eng-card { flex: none !important; width: auto !important; min-height: calc(min(505px, 66dvh) + 50px) !important; }
  #the-engagements #engagements-carousel ul { flex: 0 1 auto !important; overflow: visible !important; margin-bottom: 0 !important; }
  #the-engagements .eng-btn { font-size: min(12pt, 2.4dvh) !important; }
  #the-engagements .eng-hint { display: none !important; }
}

/* ===== Section 7 — The Inquiry ===== */
.iq-intro { margin: calc(var(--size-page-title) * 1.15) 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); line-height: 1.3; color: #5C646B; }
.iq-intro + .iq-intro { margin-top: min(8px, 1dvh); }
.iq-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.iq-form { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: min(10px, 1.2dvh); margin-top: min(14px, 1.6dvh); overflow-y: auto; scrollbar-width: none; padding: 6px; margin-left: -6px; margin-right: -6px; box-sizing: border-box; }
.iq-form::-webkit-scrollbar { display: none; }
.iq-field { display: flex; flex-direction: column; gap: 4px; }
.iq-field-row { display: flex; gap: min(10px, 2.5cqw); }
.iq-field-row .iq-field { flex: 1; min-width: 0; }
.iq-field-label-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.iq-label-text { font-family: var(--font-ui); font-weight: 500; font-size: min(0.7rem, 3cqw, 1.8dvh); letter-spacing: 0.1em; color: var(--colour-accent); text-transform: uppercase; }
.iq-carried { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: min(0.62rem, 2.7cqw, 1.6dvh); letter-spacing: 0.02em; color: var(--colour-accent); background: rgba(123, 148, 175, 0.16); padding: 2px 8px; border-radius: 999px; text-transform: none; display: none; }
.iq-carried.is-visible { display: inline-block; }
.iq-input, .iq-textarea { width: 100%; box-sizing: border-box; background: var(--colour-card); border: none; border-radius: 10px; padding: min(11px, 1.3dvh) 14px; font-family: var(--font-body); font-weight: 300; font-size: min(0.95rem, 4.2cqw, 2.5dvh); color: var(--colour-ink); box-shadow: 0 3px 12px rgba(58, 63, 67, 0.05); }
.iq-textarea { line-height: 1.3; resize: none; }
#iq-details { height: calc((min(11px, 1.3dvh) * 2) + (min(0.95rem, 4.2cqw, 2.5dvh) * 1.3 * 4) - 40px); }
.iq-select-wrap { position: relative; display: block; width: 100%; }
.iq-select-wrap::after { content: ""; position: absolute; top: 50%; right: 16px; width: 9px; height: 9px; border-right: 1.6px solid var(--colour-accent); border-bottom: 1.6px solid var(--colour-accent); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.iq-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; padding-right: 40px; background: var(--colour-card); }
.iq-select:invalid, .iq-select option[value=""] { color: #8A9299; }
#the-inquiry input:focus, #the-inquiry textarea:focus, #the-inquiry select:focus { outline: 2px solid rgba(123, 148, 175, 0.55); outline-offset: 1px; }
.iq-actions { display: flex; gap: min(10px, 2.5cqw); margin-top: min(14px, 1.6dvh); margin-bottom: 25px; width: 100%; }
.iq-reset { flex: 0 0 34%; cursor: pointer; border: none; border-radius: 14px; padding: min(14px, 1.4dvh) 12px; background: rgba(123, 148, 175, 0.17); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45); color: var(--colour-ink); font-size: calc(var(--size-body) - 0.5pt); font-weight: 400; -webkit-text-stroke: 0.018em currentColor; font-family: var(--font-ui); }
.iq-submit { flex: 1; cursor: pointer; border: none; border-radius: 14px; padding: min(14px, 1.4dvh) 12px; background: rgba(123, 148, 175, 0.37); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 10px 26px rgba(58, 63, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.50); color: var(--colour-ink); font-size: calc(var(--size-body) - 0.5pt); font-weight: 400; -webkit-text-stroke: 0.018em currentColor; font-family: var(--font-ui); }
.iq-received { font-family: var(--font-ui); font-weight: 400; -webkit-text-stroke: 0.048em currentColor; font-size: min(2.4rem, 8.8cqw, 4dvh); line-height: 1.15; letter-spacing: calc(0.029em + 0.2pt); color: var(--colour-ink); text-transform: uppercase; }
.iq-thanks-copy { margin: 0; max-width: 32ch; font-family: var(--font-body); font-weight: 300; font-size: min(0.95rem, 4.4cqw, 2.5dvh); line-height: 1.35; color: #5C646B; }

@media (min-width: 768px) {
  #the-inquiry { background-size: 100% 100% !important; }
  #the-inquiry .pg-col { max-width: 1200px !important; margin: 0 auto !important; }
  #the-inquiry .iq-label { font-size: min(16pt, 3dvh) !important; }
  #the-inquiry .iq-wrap { max-width: 60cqw !important; margin-left: 0 !important; margin-right: auto !important; width: 100% !important; justify-content: center !important; }
  #the-inquiry .iq-wrap form, #the-inquiry .iq-wrap .iq-actions { max-width: 560px !important; width: 100% !important; }
  #the-inquiry .iq-wrap .iq-actions { box-sizing: border-box !important; padding-right: 12px !important; }
  #the-inquiry .iq-intro { text-align: left !important; }
  .iq-success-card .iq-received { font-size: min(40px, 5dvh) !important; }
  #iq-details { height: calc((min(11px, 1.3dvh) * 2) + (min(0.95rem, 4.2cqw, 2.5dvh) * 1.3 * 4) - 25px) !important; }
}

/* ===== Section 3 client-guide download lightbox (matches .iq-success-overlay) ===== */
.cg-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(246, 243, 238, 0.47);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.cg-overlay.is-open { display: flex; }

.cg-card {
  position: relative; width: 100%; max-width: min(440px, 92vw); max-height: 88dvh; overflow-y: auto; scrollbar-width: none;
  background: rgba(255, 255, 255, 0.50); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 18px; box-shadow: 0 20px 50px rgba(58, 63, 67, 0.18); padding: min(40px, 4.5dvh) min(30px, 6.5cqw) min(28px, 3dvh);
  box-sizing: border-box; container-type: inline-size;
}
.cg-card::-webkit-scrollbar { display: none; }

.cg-close { position: absolute; top: min(16px, 1.8dvh); right: min(16px, 1.8dvh); background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.cg-close svg { transition: stroke 0.2s ease; }
.cg-close:hover svg { stroke: var(--colour-accent); }

.cg-title { margin: 0; padding-right: 28px; font-family: var(--font-ui); font-weight: 500; font-size: min(1.1rem, 4.8cqw, 2.6dvh); line-height: 1.25; color: var(--colour-ink); }
.cg-subtitle { margin: min(8px, 1dvh) 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.9rem, 4cqw, 2.3dvh); line-height: 1.35; color: #5C646B; }

.cg-form { display: flex; flex-direction: column; gap: min(14px, 1.6dvh); margin-top: min(18px, 2dvh); }
.cg-submit { border: none; cursor: pointer; font-family: var(--font-ui); }
.cg-submit:disabled { opacity: 0.6; cursor: default; }
.cg-checkbox-row { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.8cqw, 2.1dvh); line-height: 1.35; color: var(--colour-ink); cursor: pointer; }
.cg-checkbox-row input { margin-top: 3px; accent-color: var(--colour-accent); flex-shrink: 0; }

.cg-success-view { display: none; flex-direction: column; align-items: center; text-align: center; gap: min(10px, 1.2dvh); }
.cg-card.is-success .cg-form-view { display: none; }
.cg-card.is-success .cg-success-view { display: flex; }
.cg-success-view .iq-received { font-size: min(1.9rem, 7cqw, 3.2dvh) !important; }

/* ===== Section 7 success lightbox (glass overlay, matches .t-overlay/.t-card) ===== */
.iq-success-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(246, 243, 238, 0.47);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.iq-success-overlay.is-open { display: flex; }

.iq-success-card {
  position: relative; width: 100%; max-width: min(460px, 92vw); max-height: 88dvh; overflow-y: auto; scrollbar-width: none;
  background: rgba(255, 255, 255, 0.50); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 18px; box-shadow: 0 20px 50px rgba(58, 63, 67, 0.18); padding: min(40px, 4.5dvh) min(30px, 6.5cqw) min(28px, 3dvh);
  box-sizing: border-box; container-type: inline-size; display: flex; flex-direction: column; align-items: center; text-align: center; gap: min(16px, 1.8dvh);
}
.iq-success-card::-webkit-scrollbar { display: none; }

.iq-success-close { position: absolute; top: min(16px, 1.8dvh); right: min(16px, 1.8dvh); background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.iq-success-close svg { transition: stroke 0.2s ease; }
.iq-success-close:hover svg { stroke: var(--colour-accent); }

.iq-success-cta { margin-top: min(10px, 1.2dvh); padding-top: min(20px, 2.2dvh); border-top: 1px solid rgba(58, 63, 67, 0.12); width: 100%; display: flex; flex-direction: column; align-items: center; gap: min(10px, 1.1dvh); }
.iq-success-cta-eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: min(0.7rem, 3cqw, 1.8dvh); letter-spacing: 0.14em; color: var(--colour-accent); text-transform: uppercase; }
.iq-success-cta-copy { margin: 0; max-width: 34ch; font-family: var(--font-body); font-weight: 300; font-style: italic; font-size: min(0.88rem, 4cqw, 2.3dvh); line-height: 1.35; color: #5C646B; }
.iq-success-cta-btn { width: auto; padding-left: 26px; padding-right: 26px; margin-top: min(4px, 0.5dvh); }

/* ===== Testimonial + Case overlays (dynamic content) ===== */
.t-overlay {
  position: fixed; inset: 0; z-index: 60; background: rgba(246, 243, 238, 0.47);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  display: none; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
.t-overlay.is-open { display: flex; }

@media (max-width: 767px) {
  .t-overlay { padding: 12px; }
  .t-card { max-width: 100% !important; }
}

.t-card {
  width: 100%; max-width: min(440px, 1200px, 92vw); height: calc(min(600px, 88dvh) + 50px); overflow: hidden;
  background: rgba(255, 255, 255, 0.50); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 18px; box-shadow: 0 20px 50px rgba(58, 63, 67, 0.18); padding: min(24px, 2.6dvh) min(26px, 6cqw);
  box-sizing: border-box; position: relative; container-type: inline-size; display: flex; flex-direction: column;
}
.t-card-head { display: flex; justify-content: flex-end; align-items: center; width: 100%; flex-shrink: 0; }
.t-card-head-actions { display: flex; align-items: center; gap: min(14px, 3cqw); }
.t-card-head-actions button { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.t-quote-mark { position: absolute; top: min(24px, 2.6dvh); left: min(26px, 6cqw); margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: calc(min(3rem, 14cqw) + 4pt); line-height: 0.8; color: var(--colour-accent); z-index: 2; }
.t-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin-top: min(6px, 0.7dvh); display: flex; flex-direction: column; }
.t-card-body::-webkit-scrollbar { display: none; }
.t-quote { margin: min(34px, 3.8dvh) 0 0 0; font-family: var(--font-body); font-weight: 500; font-size: min(1rem, 4.4cqw, 2.5dvh); line-height: 1.4; color: var(--colour-ink); }
.t-meta { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: min(22px, 2.6dvh); }
.t-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--colour-bg); border: 1px solid rgba(58, 63, 67, 0.10); display: flex; align-items: center; justify-content: center; }
.t-avatar img { width: 100%; height: 100%; object-fit: cover; }
.t-name { font-family: var(--font-ui); font-weight: 500; font-size: calc(min(0.9rem, 4cqw, 2.3dvh) + 2pt); color: var(--colour-ink); }
.t-sub { font-family: var(--font-body); font-weight: 300; font-size: calc(min(0.8rem, 3.6cqw, 2dvh) + 0.5pt); color: #5C646B; }

.case-overlay { display: none; }
.case-overlay.is-open { display: flex; justify-content: center; }
@media (max-width: 759px) {
  .case-overlay { padding: 12px; }
}
.case-mobile {
  width: 100%; max-width: 1200px; height: auto; max-height: 92dvh; overflow: hidden; scrollbar-width: none;
  background: rgba(255, 255, 255, 0.50); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 18px; box-shadow: 0 20px 50px rgba(58, 63, 67, 0.18);
  container-type: inline-size; box-sizing: border-box; padding: min(20px, 2.4dvh) min(20px, 5cqw) min(16px, 1.8dvh); display: flex; flex-direction: column;
}
.case-mobile::-webkit-scrollbar { display: none; }
.case-mobile-head { display: flex; justify-content: space-between; align-items: center; width: 100%; flex: 0 0 auto; }
.case-mobile-title { font-family: var(--font-ui); font-weight: 500; -webkit-text-stroke: 0.02em currentColor; font-size: min(1rem, 4.6cqw, 2.8dvh); letter-spacing: 0.12em; color: var(--colour-ink); text-transform: uppercase; }
.case-mobile-actions { display: flex; align-items: center; gap: min(14px, 3cqw); }
.case-mobile-actions button { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
/* Native scroll-snap track holding prev/current/next slides — gives the
   WHOLE case card the same drag-swipe physics as the Section 6 engagements
   carousel, instead of a custom gesture-then-content-swap. */
.case-track {
  display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.case-track::-webkit-scrollbar { display: none; }
.case-slide {
  flex: 0 0 100%; max-width: 100%; scroll-snap-align: center; scroll-snap-stop: always;
  overflow-y: auto; scrollbar-width: none; box-sizing: border-box; display: flex; flex-direction: column;
}
.case-slide::-webkit-scrollbar { display: none; }
.case-name { margin: min(18px, 2dvh) 0 0 0; font-family: var(--font-ui); font-weight: 500; font-size: calc(min(3.2rem, 15cqw, 5.4dvh) - 8pt); letter-spacing: 0.01em; line-height: 1; color: var(--colour-ink); text-transform: uppercase; }
.case-body { margin-top: calc(min(12px, 1.4dvh) - 10px); display: flex; flex-direction: column; flex: 1; min-height: 0; }
.case-blurb { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); line-height: 1.3; color: var(--colour-ink); }
.case-stage-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-top: min(18px, 2dvh); }
.case-stage-label { font-family: var(--font-ui); font-weight: 400; font-size: min(0.95rem, 4.2cqw, 2.5dvh); letter-spacing: 0.12em; color: var(--colour-accent); text-transform: uppercase; }
.case-stage-arrow { width: 22px; height: min(38px, 4.4dvh); justify-self: center; }
.case-traits-row { display: flex; justify-content: space-between; gap: 8px; margin-top: min(14px, 1.6dvh); }
.case-trait { flex: 1; display: flex; flex-direction: column; align-items: center; gap: min(10px, 1.2dvh); }
.case-trait-circle { width: min(74px, 19cqw, 9dvh); aspect-ratio: 1; border-radius: 50%; }
.case-trait-circle img { width: 100%; height: 100%; }
.case-trait-label { font-family: var(--font-ui); font-weight: 400; font-size: min(0.85rem, 3.8cqw, 2.2dvh); letter-spacing: 0.06em; color: var(--colour-ink); text-transform: uppercase; }
.case-liberation { display: flex; flex-direction: column; align-items: center; margin-top: min(12px, 1.4dvh); }
.case-mark-img { width: min(52%, 54cqw); max-height: 12dvh; object-fit: contain; height: auto; }
.case-tagline { margin: min(10px, 1.2dvh) 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); color: var(--colour-ink); }
.case-success-grid { margin-top: min(12px, 1.4dvh); width: 100%; flex: 1 1 auto; min-height: min(110px, 13dvh); display: grid; grid-template-columns: 1fr; gap: min(8px, 1.6cqw); }
.case-photo-slot { border-radius: 12px; overflow: hidden; background: rgba(58, 63, 67, 0.06); display: flex; align-items: center; justify-content: center; }
.case-photo-slot--single { grid-column: 1 / -1; }
.case-success-copy { margin: min(10px, 1.2dvh) 0 0 0; font-family: var(--font-body); font-weight: 300; font-size: min(0.85rem, 3.9cqw, 2.2dvh); line-height: 1.3; color: var(--colour-ink); }

@media (min-width: 760px) {
  .case-mobile { display: none !important; }
  .case-desktop { display: flex !important; }
  .case-overlay.is-open { align-items: center !important; }
  .hero-title { font-size: 1.7rem !important; }
  .hero-slogan { font-size: 13pt !important; }
  /* Only hide the first manual break (between "not" and "designed.") on
     desktop — the second break (between "designed." and "It is liberated.")
     stays, forcing the line to end exactly at the sentence boundary rather
     than leaving it to text-wrap:balance, which was splitting the two
     sentences unevenly (e.g. "...IS NOT" / "DESIGNED. IT IS..."). */
  .hero-break-mobile-only { display: none !important; }
  .hero-headline { text-wrap: wrap !important; }
  /* Desktop hero bottom row: the headline gets its OWN full-width row (not
     shared with the CTA button), so it always has the whole column's width
     to break cleanly after "Identity is not designed." rather than wrapping
     mid-sentence when squeezed beside the button. The description and the
     CTA button sit together on the row below, keeping their original
     relative position (desc left, button bottom-right). `.hero-copy` is
     unwrapped via `display:contents` so its children (`.hero-headline`,
     `.hero-desc`) become direct grid items of `.hero-bottom-row` without
     any HTML/mobile markup changes. */
  .hero-bottom-row { display: grid !important; grid-template-columns: 1fr auto; column-gap: 24px; row-gap: 0; container-type: inline-size !important; }
  .hero-copy { display: contents !important; }
  .hero-headline { grid-column: 1 / -1 !important; grid-row: 1 !important; margin-top: min(44px, 4.5dvh) !important; transform: translateY(-20px) !important; }
  .hero-desc { grid-column: 1 !important; grid-row: 2 !important; transform: translateY(-15px) !important; }
  .hero-cta { grid-column: 2 !important; grid-row: 2 !important; align-self: end !important; width: auto !important; margin-top: 0 !important; transform: translateY(-20px) !important; }
  .hero-btn:not(.cg-submit) { width: calc(var(--lib-w, 400px) - 50px) !important; flex: 0 0 auto !important; }
  #scroll-root .mode-fluid .pg-col, #scroll-root .pg-col { max-width: 1200px !important; }
}

.case-desktop-head { display: flex; justify-content: space-between; align-items: center; }
.case-desktop-title { font-family: var(--font-ui); font-weight: 500; -webkit-text-stroke: 0.02em currentColor; font-size: 12pt; letter-spacing: 0.12em; color: var(--colour-ink); text-transform: uppercase; }
.case-desktop-actions { display: flex; align-items: center; gap: min(14px, 3cqw); }
.case-desktop-actions button { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.case-desktop-name { margin: 22px 0 0 0; font-family: var(--font-ui); font-weight: 500; font-size: 40px; letter-spacing: 0.01em; line-height: 1; color: var(--colour-ink); text-transform: uppercase; }
.case-desktop-tier { font-family: var(--font-ui); font-weight: 500; -webkit-text-stroke: 0.03em currentColor; font-size: 13pt; letter-spacing: 0.08em; color: var(--colour-accent); text-transform: uppercase; margin-top: 6px; }
.case-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 22px; }
.case-flow-blurb { flex: 0 1 180px; min-width: 160px; margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 11.5pt; line-height: 1.5; color: var(--colour-ink); }
.case-flow-arrow { width: 28px; height: 18px; flex: 0 0 auto; }
.case-flow-traits { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.case-flow-trait { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.case-flow-trait-circle { width: 66px; height: 66px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.case-flow-trait-label { font-family: var(--font-ui); font-weight: 400; font-size: 9pt; letter-spacing: 0.08em; color: var(--colour-ink); text-transform: uppercase; }
.case-flow-liberation { flex: 0 0 172px; width: 172px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.case-flow-mark { width: 172px; max-height: 78px; object-fit: contain; }
.case-flow-tagline { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 11pt; color: var(--colour-ink); white-space: normal; text-align: center; }
.case-flow-success { flex: 1 1 300px; min-width: 240px; display: flex; flex-direction: column; gap: 14px; }
.case-flow-success-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.case-flow-photo { border-radius: 6px; overflow: hidden; height: 232px; background: rgba(58, 63, 67, 0.06); display: flex; align-items: center; justify-content: center; }
.case-flow-photo--single { grid-column: 1 / -1; }
.case-flow-success-copy { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: 11pt; line-height: 1.5; color: var(--colour-ink); }

/* ===== Footer (Section 8) ===== */
#the-footer.pg-sec { background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat; padding-bottom: min(56px, 8dvh); }
@media (min-width: 760px) {
  #the-footer { background-size: 100% 100% !important; }
}
/* Footer typography/layout (.footer-statement, .footer-zones, .footer-zone-label,
   .footer-zone a, .footer-thinking, .footer-social, .footer-copyright, etc.) now
   lives in components.css since the footer is a shared component across all pages. */