/* ==========================================================================
   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;
  /* Hardcoded to match --colour-bg (now #F5F5F7 site-wide, see tokens.css)
     so it stays pixel-identical even if the token is retuned later. */
  background: linear-gradient(#F5F5F7, #F5F5F7) 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;
}

.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;
}

/* Mobile "back to top" trigger — replaces the three-dot .pg-menu-btn in
   every section except the hero (Section 1 keeps its three-dot menu
   trigger, unchanged). Same slot in .pg-label-row, just an arrow icon
   scrolling to #top instead of opening the mobile nav overlay. Hidden on
   desktop (>=760px) alongside .pg-menu-btn — desktop already has its own
   "back to top" arrow inside the persistent floating nav bar. */
.pg-top-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
  color: var(--colour-ink);
}
.pg-top-btn svg { display: block; }
@media (min-width: 760px) {
  .pg-top-btn { display: none !important; }
}

/* .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: calc(var(--size-page-title) - 2pt); letter-spacing: 0.04em; color: var(--colour-ink); text-transform: uppercase; }
/* Mobile only: bump the hero title 2pt larger than the shared base size. */
@media (max-width: 759px) {
  .hero-title { font-size: calc(var(--size-page-title) - 2pt + 2pt); }
}
.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: row; flex-wrap: wrap; gap: min(10px, 1.2dvh); width: 100%; box-sizing: border-box; padding: 0 15px; }
.hero-cta .hero-btn { flex: 1 1 170px; width: auto; white-space: nowrap; }
.hero-btn { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; padding: min(18px, 1.6dvh) 12px; border-radius: 999px; 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); }

/* "Packages" CTA — sits beside "Begin Here" in the same .hero-cta row,
   requested as a lighter-fill variant of the same glass button (lower fill
   opacity, no other treatment change) so the two read as a primary/secondary
   pair rather than two equal-weight buttons. */
.hero-cta .hero-btn.hero-btn-light { background: rgba(123, 148, 175, 0.16); box-shadow: 0 10px 26px rgba(58, 63, 67, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.6); }

/* All screens: drop the manual mid-sentence <br> in the hero description so
   the paragraph always wraps organically against whatever width its layout
   actually gives it, rather than always breaking at the same fixed point —
   this leaves enough room for the 2 CTA buttons below on every screen size,
   not just tablet/mobile. */
.hero-desc-break { display: none; }

/* Mobile only: keep "Begin Here" and "Packages" side by side in one row
   instead of wrapping to two lines — flex:1 1 0 (no fixed 170px basis) plus
   min-width:0 lets each button shrink to share the row's actual width
   instead of falling back to its content's natural minimum width, which is
   what was forcing the wrap on narrow phones. */
@media (max-width: 759px) {
  .hero-cta .hero-btn { flex: 1 1 0; min-width: 0; }
  /* CTAs span the full width of the row — drop the row's own 15px side
     padding so the two buttons stretch edge to edge with the rest of the
     column content, instead of sitting inset from it. */
  .hero-cta { padding: 0; }
  /* 5px shorter — 2.5px off each of the button's top/bottom padding. */
  .hero-cta .hero-btn {
    padding-top: calc(min(18px, 1.6dvh) - 2.5px);
    padding-bottom: calc(min(18px, 1.6dvh) - 2.5px);
  }
}

/* ===== 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: 999px; 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: min(1200px, calc(100vw - 48px)) !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: min(1200px, calc(100vw - 48px)) !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%; }
/* Desktop layout: outer column holding (1) a row with the portrait fixed to
   the left and headline/description/awards stacked to the right, then (2)
   the "describe in five words" prompt+input as a full-width block below
   both the image and the content column. */
/* Same pattern as Section 2 (Success Stories: .ss-cards) and Section 3
   (Selected Marks): label/title stays flush at the top-left of .pg-col,
   the main content block is centred verticaly ONLY (margin-top/bottom:auto
   on .onto-desktop-row below) within the leftover height, and the final
   CTA-ish row (.onto-desktop-prompt-row) follows it in normal flow, ending
   up near the bottom — never an independent horizontal max-width/margin:auto
   on the row itself, so it stays flush-left with "THE BRAND ONTOLOGIST",
   full width of .pg-col, exactly like every other section. */
.onto-desktop { display: none; flex: 1 1 auto; min-height: 0; width: 100%; flex-direction: column; padding-top: min(20px, 2.4dvh); }
/* Row default align-items (stretch) is what makes the content column share
   the portrait box's full height; align-items: flex-start on
   .onto-portrait-d itself (below) is what then pins the image's own top
   edge — not just its containing box's top edge — level with the
   headline's top edge, since both the box and the headline start flush
   with this row's top.
   flex: 0 0 auto (not 1 1 auto) — sized to a fixed height, NOT stretched to
   fill the section's remaining vertical space (that stretch was what
   pushed .onto-desktop-prompt-row down to near the bottom of the section).
   An explicit `height` (not just flex-grow filling available space) is
   required here — .onto-portrait-d's image is height:80%, a percentage,
   which only resolves against a DEFINITE parent height; when this row had
   no set height of its own (auto), that 80% couldn't resolve and fell back
   to the photo's full native pixel height (1500px+), blowing the row (and
   the whole section) far past 100dvh. (A later "increase image 25%"
   request was scoped to mobile's .onto-portrait only — see below — this
   desktop image stays at its original 80%.) */
/* position:relative;top:20px shifts the whole row (and its content) down
   20px visually, without touching the margin-top/bottom:auto centring math
   that positions it in the first place. */
.onto-desktop-row { display: flex; flex-direction: row; justify-content: center; flex: 0 0 auto; height: calc(min(58dvh, 520px) + 125px); width: 100%; margin-top: auto; margin-bottom: auto; gap: 20px; position: relative; top: 0; }
/* iPad-portrait-ish widths only: image and content sit too close with 0 gap
   at this narrower column width, so add breathing room back in just for
   this band (does not affect the 0-gap look on full desktop widths). */
@media (min-width: 760px) and (max-width: 900px) {
  .onto-desktop-row { gap: 30px; }
}
/* Now a child of .onto-desktop-content (moved out of its own full-width row
   under both columns) so it sits directly under the section content — right
   below the award logos row, aligned to that column's own width, not
   spanning the portrait too. A fixed top margin (not margin-top:auto, which
   pushed it all the way to the bottom of the content column) keeps it
   immediately under .onto-award-row-d instead. */
.onto-desktop-prompt-row { width: 100%; margin: calc(min(20px, 2.4dvh) + 20px) 0 0 0; flex: 0 0 auto; }
.onto-awards { display: flex; justify-content: center; align-items: flex-start; gap: 35px; margin-top: calc(var(--size-page-title) * 1.15 + 10px); width: 100%; }
/* Mobile only: nudge the award logos row up 20px (visual-only, transform so
   it doesn't reflow the bio/prompt below it). */
@media (max-width: 759px) {
  .onto-awards { transform: translateY(-20px); }
}
.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; }
/* Middle (Logo Wave) badge sized 2px smaller than the other two. */
.onto-award-slot:nth-child(2) { margin-top: 3px; width: calc(min(58px, 15cqw) - 2px); height: calc(min(74px, 9dvh) - 2px); }
.onto-award-slot img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.4765625); }
/* Logo Wave badge (now the 2nd logo, after the middle/right swap) has a
   wider/rounder intrinsic aspect ratio than the two A' Design red-block
   logos, so object-fit:contain letterboxes it top/bottom within the same
   slot box — it needs a larger scale factor than the shared one above to
   render at the same visual height as the other two logos. */
.onto-award-slot:nth-child(2) img { transform: scale(1.9019); }
/* width was 75% — now that the portrait image renders wider, that narrower
   box was clipping its sides even though the container had headroom in the
   column; full-width (100%) gives the image the whole content column to sit
   in before overflow:hidden ever needs to clip anything. */
.onto-portrait { flex: 1 1 auto; min-height: min(263.671875px, 35.15625dvh); max-height: 66.40625dvh; width: 100%; align-self: center; margin-top: calc(min(24px, 3dvh) - 25px); border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
/* Fixed-proportion left column (was width:100%/full-width when the image
   sat above the text) — now sized as a share of the row instead, with the
   content column taking the remaining space alongside it. */
.onto-portrait-d { flex: 0 0 40%; max-width: 460px; min-height: 0; border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center; transform: translateX(-20px); }
.onto-desktop-content { flex: 0 1 640px; min-width: 0; display: flex; flex-direction: column; justify-content: center; position: relative; top: 0; }
/* Tablet-portrait only: content column shifted up 30px from its 80px
   desktop offset (i.e. 50px here), nothing else about this width band
   touched — desktop (>900px) and mobile (<760px) are unaffected. */
@media (min-width: 760px) and (max-width: 900px) and (orientation: portrait) {
  .onto-desktop-content { top: 50px; }
}
.onto-portrait img { height: 100%; width: auto; max-width: none; filter: grayscale(1); transform: scale(0.85); }
.onto-portrait-d img { height: 80%; 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-bio { margin: calc(min(18px, 2.2dvh) + 5px) 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: calc(min(16px, 1.8dvh) + 10px); 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); }
/* Continue-to-next-section arrow, always visible inside the input field —
   same glass treatment as every other CTA on the site, just circular/icon-only
   since it lives inside the input 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; }
/* margin-left removed (was 10px) so the row's left edge lines up with the
   description text below it, per the "left align to description" request. */
.onto-award-row-d { display: flex; gap: 20px; align-items: flex-start; flex: 0 0 auto; transform: translateX(-15px); }
.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; }
/* Middle (Logo Wave) badge sized 2px smaller than the other two. */
.onto-award-slot-d:nth-child(2) { margin-top: 1px; width: 90px; height: 114px; }
.onto-award-slot-d img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.125); }
.onto-award-slot-d:nth-child(2) img { transform: scale(1.21); }

@media (min-width: 760px) {
  #the-ontologist { background-size: 100% 100% !important; }
  #the-ontologist .pg-col { max-width: min(1200px, calc(100vw - 48px)) !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: min(1200px, calc(100vw - 48px)) !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(255px, 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; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior-x: contain; }
#engagements-carousel::-webkit-scrollbar { display: none; }
.eng-card { flex: 0 0 86%; 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: 999px; 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: min(1200px, calc(100vw - 48px)) !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; 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; }
}

/* Mid desktop (1280px-1439px): Section 5 review cards trimmed 50px shorter
   than the >=768px baseline (25px + a further 25px), with the testimonial
   preview clamped to 2 lines (down from 3) so the shorter card doesn't
   crowd/clip the excerpt. Section 6 package cards trimmed 55px shorter
   (25px + a further 30px). */
@media (min-width: 1280px) and (max-width: 1439px) {
  #the-proof .pf-grid { grid-auto-rows: calc(min(255px, 48dvh) - 50px) !important; }
  #the-proof .pf-preview { -webkit-line-clamp: 2 !important; }
  #the-engagements #engagements-carousel > .eng-card { min-height: calc(min(505px, 66dvh) + 50px - 55px) !important; }
  /* Hero title ("Samadara Ginige") + tagline ("Logo & Brand Strategy").
     Base >=760px rule (further down this file) sets translateY(70px)
     !important on plain .hero-title/.hero-slogan; here that's 45px
     (70 - 25 requested earlier), then title nudged up a further 5px
     (-> 40px) and tagline up a further 10px (-> 35px) per follow-up
     request. Selectors are prefixed with #top (this section's id) to
     out-specificity the base rule — both rules are !important with a
     plain class selector, so without the extra #top the later one in
     the file (the base >=760px block) wins the tie on source order and
     silently overrides this one, which is what happened the first time. */
  #top .hero-title { transform: translateY(40px) !important; }
  /* margin-top 12px, combined with the 5px difference between the title's
     (40px) and tagline's (35px) transforms, nets a 7px visual gap
     (12px - 5px) between the title and tagline. */
  #top .hero-slogan { transform: translateY(35px) !important; margin-top: 12px !important; }
}

/* Wide desktop (1440px+): Section 5 review cards net +5px taller than the
   >=768px baseline above (originally trimmed 25px shorter, then increased
   30px per follow-up request: -25px + 30px = +5px). Section 6 package
   cards remain trimmed 25px shorter than the baseline. */
@media (min-width: 1440px) {
  #the-proof .pf-grid { grid-auto-rows: calc(min(255px, 48dvh) + 5px) !important; }
  #the-engagements #engagements-carousel > .eng-card { min-height: calc(min(505px, 66dvh) + 50px - 25px) !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: 999px; 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: 999px; 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: min(1200px, calc(100vw - 48px)) !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; }
}

/* Wide screens only: review expand box 50px wider than the base
   min(440px, 1200px, 92vw) cap below. */
@media (min-width: 760px) {
  .t-card { max-width: min(490px, 1200px, 92vw) !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;
}
/* column-reverse (not column) so the quote-mark can stay first in the DOM
   (unchanged markup) while rendering visually BELOW the prev/next/close
   actions row — actions render first in a column-reverse stack, quote-mark
   second. align-items: flex-start keeps the quote-mark flush left (its
   original position); the actions row overrides back to flex-end via
   align-self below so it keeps sitting flush right, matching its original
   side of the old space-between row layout. */
.t-card-head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 8px; width: 100%; flex-shrink: 0; }
.t-card-head-actions { display: flex; align-items: center; gap: min(14px, 3cqw); align-self: flex-end; }
.t-card-head-actions button { background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
.t-quote-mark { margin: 0; font-family: var(--font-ui); font-weight: 500; font-size: calc(min(3rem, 14cqw) + 4pt + 3pt + 5pt); line-height: 0.8; color: var(--colour-accent); flex-shrink: 0; }
/* The quote-mark-to-text gap reduction (originally applied as a negative
   margin-top directly on .t-quote, see below) has to live on .t-card-body
   instead: .t-card-body is the overflow-y:auto scroll container, and a
   negative margin on its own first child gets clipped at scrollTop 0 with
   no way to scroll into the negative space — that was cutting off the
   testimonial's opening line(s)/punch text every time the overlay opened.
   Applying the same net negative offset to .t-card-body's own margin-top
   instead shifts the whole (unclipped) scroll box up in the flex layout,
   keeping the tight visual gap without hiding any of its content. */
.t-card-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin-top: calc(min(6px, 0.7dvh) + min(20px, 2.2dvh) - 40px); display: flex; flex-direction: column; }
.t-card-body::-webkit-scrollbar { display: none; }
.t-quote { margin: 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; }
/* Track holding prev/current/next slides for the mobile case card swipe. */
.case-track {
  display: flex; flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.case-track::-webkit-scrollbar { display: none; }
.case-slide {
  flex: 0 0 100%; max-width: 100%;
  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; }
  /* transform (not margin-top) so the title+tagline shift down purely
     visually — margin-top was physically pushing every sibling below it in
     the flex column (slogan, monogram, bottom row) down the same amount,
     which had been quietly dragging the monogram out of its intended
     vertical-middle position each time this was increased. transform
     leaves each element's own layout box in place, so the monogram after
     them never moves. The tagline gets the SAME transform as the title
     (not its own independent offset) so it keeps following directly below
     the title instead of being overlapped by it. */
  .hero-title { font-size: calc(1.7rem - 4pt) !important; transform: translateY(70px) !important; }
  .hero-slogan { font-size: 13pt !important; transform: translateY(70px) !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; }
  /* Two-button hero-cta (Begin Here + Packages): drop the single-button
     fixed width above and let each button share the row instead. .hero-cta
     itself is width:auto (shrink-to-fit) above, so without an explicit
     width here flex:1 has nothing to grow into and both buttons just hug
     their own text — give the row the same width the single button used
     to have, then split it evenly between the two buttons. */
  .hero-cta:has(.hero-btn-light) { width: calc(var(--lib-w, 400px) - 50px) !important; }
  .hero-cta:has(.hero-btn-light) .hero-btn:not(.cg-submit) { width: auto !important; flex: 1 1 0 !important; }
  #scroll-root .mode-fluid .pg-col, #scroll-root .pg-col { max-width: min(1200px, calc(100vw - 48px)) !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) ===== */
/* box-shadow "spillover": a hard-edged (0-blur), same-colour duplicate of
   this section's own box, painted 150px below it. box-shadow is a paint-only
   effect — it does NOT add to scrollable overflow/document height, so it
   can never change how far the page scrolls (unlike the overscroll-behavior
   attempts this replaces). It exists purely so that IF a mobile browser's
   dynamic viewport unit (dvh) recompute ever leaves a few-px gap between
   this section's own box and the true bottom of the scrollable area
   (typically caused by the address bar collapsing/expanding exactly as the
   user reaches the bottom of the page), the ancestor's cream background
   isn't what's revealed there — this accent-coloured spillover is, which is
   visually indistinguishable from the footer itself. */
#the-footer.pg-sec { background: linear-gradient(var(--colour-accent), var(--colour-accent)) center / 100% 100% no-repeat; padding-bottom: min(56px, 8dvh); box-shadow: 0 150px 0 0 var(--colour-accent); }
@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. */
/* Homepage-only: push the footer quote down 75px. Scoped to #the-footer
   (this page's own footer section) rather than editing the shared
   .footer-statement rule in components.css, so every other page's footer
   is untouched. All screens (no width scoping requested). */
#the-footer .footer-statement { margin-top: calc(min(8px, 1dvh) + 75px); }

/* All buttons site-wide are now pill-shaped at the base rule (.pg-btn via
   --radius-button in tokens.css; .hero-btn/.eng-btn/.iq-reset/.iq-submit/
   .ss-tier-btn directly above), on every screen size — this override block
   (previously desktop-only, mobile kept 14px) is no longer needed. */

/* ===== Homepage-only desktop nav extras =====
   The pill-shaped/centred bar itself, its link hover colour, and the
   footer-hover swap are now the shared site-wide default in components.css
   (originated here, promoted to shared when every other page adopted the
   same treatment). What's left here is genuinely homepage-only: clearing
   space for the bar above each section's title, and the "back to top"
   arrow appended to the bar (home-only feature, not present on other
   pages' nav). */
@media (min-width: 760px) {
  /* Push each homepage section's title row down to clear the floating nav
     bar above it now that the bar sits centred over the top of every
     section instead of tucked in the top-right corner. */
  .pg-label-row {
    margin-top: 100px !important;
  }
  /* Tighten the gap between each section's title and its description
     paragraph (where one exists) by 20px total (5px + a further 15px) —
     Section 2's .ss-body, Section 3's #selected-marks .pg-body, Section 6's
     .eng-body, Section 7's .iq-intro all share the same
     calc(var(--size-page-title) * 1.15) top-margin formula, so each gets
     the same amount trimmed off it here. Sections without a description
     directly under the title (Ontologist's bio, Proof) are untouched —
     they don't use this shared formula. */
  .ss-body,
  #selected-marks .pg-body,
  .eng-body,
  .iq-intro {
    margin-top: calc(var(--size-page-title) * 1.15 - 20px) !important;
  }
  /* "Back to top" button styling now lives in components.css (shared —
     every page's nav bar has this button, not just the homepage's). */
}

/* ===== Tablet override (both orientations, tablet widths only) =====
   Placed BEFORE the tablet-landscape block below so that block's more
   specific values (tuned to avoid the Section 7 form needing to scroll on
   short landscape heights) still win for landscape — this general rule only
   ends up governing tablet-portrait for anything the landscape block also
   touches (.iq-form gap). Same 760-1200px "tablet" width band used
   elsewhere this session. */
@media (min-width: 760px) and (max-width: 1200px) {
  /* Hero title 10px higher than the standard >=760px desktop offset. The
     slogan MUST carry the exact same transform value as the title (not its
     own independent offset) so the visual gap between them stays whatever
     margin-top alone produces — a fixed, device-independent value — rather
     than drifting whenever the two elements' transforms diverge. */
  .hero-title, .hero-slogan { transform: translateY(60px) !important; }
  /* 5px more breathing room between Section 7's form fields. */
  .iq-form { gap: calc(min(10px, 1.2dvh) + 5px) !important; }
}

/* ===== Tablet-landscape override (iPad/tablet landscape widths only) =====
   The >=760px block above pushes .pg-label-row/descriptions down to clear
   the floating nav bar, tuned against full desktop heights. On tablet
   landscape screens (short viewport height relative to width, e.g. iPad
   1024x768, iPad Pro 1194x834) that same offset sits too low, so this band
   pulls both back up 20px on top of the desktop values above. Scoped by
   width (tablet, not full desktop) + orientation:landscape + a height cap
   (excludes tall desktop monitors, which never match max-height:900px). */
@media (min-width: 760px) and (max-width: 1200px) and (orientation: landscape) and (max-height: 900px) {
  .pg-label-row {
    margin-top: 60px !important;
  }
  /* Hero: tighten the gap between the page title and the tagline below it
     to exactly 7px on tablet landscape (this whole band, max-height:900,
     already covers only the smaller tablet-landscape sizes — iPad mini
     through 11" iPad Pro; 12.9"/13" iPad Pro's taller landscape height
     falls outside this query and gets the general tablet spacing instead),
     plus a further 10px on the smaller iPad mini/11" sizes specifically
     (7px + 10px = 17px), then nudge the tagline itself up 15px on top of
     that. The translateY value here is the SAME 60px base the tablet block
     above applies to both .hero-title and .hero-slogan, minus 15px
     (60 - 15 = 45) — NOT an independent -15px transform, which would
     replace (not add to) the shared 60px baseline and blow the gap out to
     75px versus the title on devices matching this landscape band, while
     devices that miss this band (matching only the general tablet block
     above) kept the correct 60px/60px match. Keeping both title and
     slogan on the same base offset formula is what makes the gap a fixed,
     device-independent value again. */
  .hero-slogan {
    margin-top: 17px !important;
    transform: translateY(45px) !important;
  }
  /* Smaller tablet-landscape sizes (iPad mini / 11" iPad Pro) — reduce the
     hero title and slogan 2pt below the shared >=760px desktop sizes. */
  .hero-title {
    font-size: calc(1.7rem - 4pt - 2pt) !important;
  }
  .hero-slogan {
    font-size: 11pt !important;
  }
  .ss-body,
  #selected-marks .pg-body,
  .eng-body,
  .iq-intro {
    margin-top: calc(var(--size-page-title) * 1.15 - 30px) !important;
  }
  /* Section 6 (Packages) — nudge the package boxes down 10px. transform
     (not margin-top) so it doesn't reflow/resize the grid or its siblings. */
  #the-engagements #engagements-carousel {
    transform: translateY(10px);
  }
  /* Section 7 (Request) — nudge the form down 10px, same transform approach. */
  .iq-form {
    transform: translateY(10px);
  }
  /* Fields were internally scrolling (overflow-y:auto on .iq-form, sized for
     full desktop height) because this shorter tablet-landscape viewport
     doesn't give the form enough vertical room. Tighten field/gap/padding
     spacing so the whole form fits without needing its own scrollbar, and
     drop the internal scroll entirely once it does. */
  .iq-form {
    gap: calc(min(6px, 0.7dvh) + 5px) !important;
    margin-top: min(8px, 1dvh) !important;
    overflow-y: visible !important;
  }
  .iq-field {
    gap: 2px !important;
  }
  .iq-input, .iq-textarea {
    padding: min(7px, 0.8dvh) 14px !important;
  }
  #iq-details {
    height: calc((min(7px, 0.8dvh) * 2) + (min(0.95rem, 4.2cqw, 2.5dvh) * 1.3 * 3) - 20px) !important;
  }
  .iq-actions {
    margin-top: min(8px, 1dvh) !important;
    margin-bottom: 12px !important;
  }
  /* Section 5 (Proof) — review card title 2pt smaller. */
  #the-proof .pf-punch {
    font-size: calc(min(1.15rem, 2.5dvh) + 1pt) !important;
  }
  /* Section 6 (Packages) — card height reduced 20px (505/66dvh + 50px -> +30px).
     #engagements-carousel keeps its own margin-top:auto/margin-bottom:35px
     from the >=768px rule above, so shorter cards still settle at the
     bottom of the section exactly as before. */
  #the-engagements #engagements-carousel > .eng-card {
    min-height: calc(min(505px, 66dvh) + 30px) !important;
  }
}