/* LightHouse143 — layout and styling layer. Loaded after editorial.css.
   Every rule here exists because the measured default was wrong. */

/* ── 1. Section rhythm ─────────────────────────────────────────────
   Default was clamp(72px,8.2vw,128px) top AND bottom, so sections sat
   up to 256px apart. Halved, and kept proportional on small screens. */
section { padding: clamp(36px, 3.6vw, 56px) 0 !important; }
.work-group { padding: 20px 0 !important; }
.work-groups { row-gap: 26px !important; }
.section-intro { margin-bottom: clamp(20px, 2vw, 30px) !important; }
.sec, .wrap { row-gap: clamp(18px, 2vw, 28px); }
.still-work { margin-top: clamp(28px, 3.4vw, 48px) !important; padding-top: clamp(26px, 2.6vw, 38px) !important; }
footer { padding-top: clamp(36px, 4vw, 56px) !important; }
section .wrap > :first-child, .seclabel > :first-child, .group-head > :first-child { margin-top: 0 !important; }

/* ── 2. Banner → hero gap ──────────────────────────────────────────
   .heropanel pulled up 11vw then padded 11vw back down, leaving a
   large empty band under the artwork. */
#top .heropanel { margin-top: -6vw !important; padding-top: 6vw !important; }
#top .heroline  { padding-top: clamp(10px, 1.4vw, 20px) !important; }
#top .banner img { margin-bottom: 0; display: block; }

/* ── 3. Out of Sight = Out of Mind, stacked on three lines ─────────*/
.probhead { display: grid; justify-items: center; gap: .04em; line-height: 1.04; }
.probhead .pl { display: block; }
.probhead .eq { display: block; margin: 0; color: var(--gold); font-size: .78em; line-height: 1; }

/* ── 4. The three problem cards: centred icon and text ─────────────*/
.probgrid { align-items: stretch; }
.probcard { text-align: center; display: flex; flex-direction: column; align-items: center; }
.probcard .editor-icon { display: block; margin: 0 auto 14px; }
.probcard h3 { margin-top: 0; }

/* ── 5. Advertising / marketing / branding campaigns heading ───────*/
.still-work .group-head { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.still-work .group-head p, .still-work .group-head h3 { margin-left: auto; margin-right: auto; }

/* ── 6. Music library ──────────────────────────────────────────────*/
.track { grid-template-columns: auto minmax(0,1fr) auto auto auto !important; gap: 18px !important; }
.track .track-id h3 { margin: 0; }
.track .track-id p { margin: 2px 0 0; }
.track .tlen { font-variant-numeric: tabular-nums; color: var(--dim); white-space: nowrap; }
.track .genre { white-space: nowrap; }
.track.is-playing { border-color: var(--gold) !important; }
.music-choice-grid > div { display: flex; flex-direction: column; }
.music-choice-grid .buy-tier { margin-top: auto; align-self: flex-start; }
.music-choice-grid p { margin-bottom: 16px; }

/* ── 7. Body text must never start invisible ───────────────────────
   Scroll-reveal left whole sections blank on anchor jumps and slow
   loads. Content is shown; the motion is dropped. */
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ── 8. Desktop: let text fill the line ────────────────────────────
   The theme used text-wrap:balance, which makes short even lines and
   leaves horizontal space unused, and capped the left column at 30
   characters while ~750px sat empty beside it. */
h1, h2, h3, h4, p, li, summary, .hero-message p, .seclabel h2, .manifesto span { text-wrap: pretty; }
@media (min-width: 1181px) {
  .sec { grid-template-columns: minmax(420px, 1fr) minmax(0, 1.5fr) !important; column-gap: 48px !important; }
  .work-group { grid-template-columns: minmax(360px, .9fr) minmax(0, 1.5fr) !important; }
  .seclabel p, .group-head p { max-width: 54ch !important; }
}
.probsub, .probclose, .evidence-subtitle, .evidence-takeaway, .evidence-sources,
.campaign-intro, .campaign-roi p { max-width: 78ch; }
.section-intro h2, .seclabel h2, .closeh { line-height: 1.14; }

/* ── 9. Tablet: 3-column text was squeezing to ~195px ──────────────*/
@media (max-width: 1180px) { .sec { grid-template-columns: 1fr !important; row-gap: 26px; } }
@media (max-width: 1023px) {
  .evidence-grid, .campaign-roadmap { grid-template-columns: 1fr !important; }
  .campaign-roadmap > li, .evidence-grid > * { max-width: 640px; }
  .footcols { grid-template-columns: 1fr 1fr !important; }
}

/* ── 10. Mobile first ──────────────────────────────────────────────*/
@media (max-width: 767px) {
  .navin .nav-message { display: none !important; }
  nav .wordmark small { display: none !important; }     /* rendered at 6px */
  .navin .brand { font-size: 17px !important; }
  .navin .navbuy { font-size: 14px !important; padding: 10px 18px !important; }
  small, .case-type, .eyebrow { font-size: 13px !important; }
  a.btn, button.btn, .navbuy, footer a { min-height: 44px; display: inline-flex; align-items: center; }

  /* swipe rows instead of thousands of pixels of stacked cards */
  .yt-grid, .hero-proof, .offer-list {
    display: grid !important; grid-auto-flow: column; grid-auto-columns: 86%;
    grid-template-columns: none !important; gap: 14px; overflow-x: auto;
    scroll-snap-type: x mandatory; padding-bottom: 12px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .yt-grid > *, .hero-proof > *, .offer-list > * { scroll-snap-align: start; align-self: stretch; }
  /* keep the swipe rows from widening the page itself */
  .yt-grid, .hero-proof, .offer-list { width: 100%; max-width: 100%; min-width: 0; }
  .work-group, .work-group > *, .sec, .sec > *, .wrap, .wrap > * { min-width: 0; }
  /* NOTE: overflow-x on <html> makes it a scroll container, which kills
     position:sticky on the nav -- the bar (and its menu button) scrolled
     away on phones while sticking correctly on desktop. Keep the guard on
     <body> only, which contains the swipe rows without breaking sticky. */
  html, body { overflow-x: clip; }
  .yt-grid::-webkit-scrollbar, .hero-proof::-webkit-scrollbar, .offer-list::-webkit-scrollbar { display: none; }
  .probgrid { grid-template-columns: 1fr !important; }

  /* music rows stack cleanly */
  .track { grid-template-columns: auto minmax(0,1fr) auto !important; row-gap: 10px; }
  .track .genre { grid-column: 2 / 4; }
  .track .tlen { grid-column: 1; text-align: center; }
  .track .music-options { grid-column: 1 / -1; width: 100%; justify-content: center; }
}
@media (max-width: 420px) { .track .genre { white-space: normal; } }

/* ── 11. Header tagline was 6px on phones, 10.5px on desktop ───────*/
nav .wordmark small { font-size: 12px !important; line-height: 1.3 !important; }

/* ── 12. Footer room for the Legal column ──────────────────────────*/
/* Scoped to desktop: unscoped, this overrode the 2-column mobile rule in
   section 9 and left four 71px columns on a phone with every link broken
   across two lines. */
@media (min-width: 1024px) {
  .footcols { grid-template-columns: repeat(4, minmax(0, auto)) !important; }
}

/* ── 13. Focus visibility ──────────────────────────────────────────*/
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold, #F5CB5C); outline-offset: 3px; }

/* ===== 14. Banner → hero headline: tightest safe gap =====
   Measured default after §3 was 20px desktop / 10px mobile. User asked to
   minimize further, so the heroline pad drops to 10px / 6px. */
#top .wrap.heroline { padding-top: 10px !important; }
@media (max-width: 767px) { #top .wrap.heroline { padding-top: 6px !important; } }

/* ===== 15. Campaign intro: honor the authored line break =====
   .group-head p was set to text-wrap:balance, which can re-wrap around the
   <br>. Pin it so the two sentences stay on their own lines. */
.still-work .group-head p { text-wrap: pretty; }

/* ===== 16. Music rows, mobile-first =====
   At 390px the 5-column track grid crushed the genre label to ~40px.
   Stack it: play button in a fixed gutter, everything else in one column. */
@media (max-width: 720px) {
  .track {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "play id len" "play genre buy" !important;
    align-items: center;
    gap: 6px 14px !important;
    padding: 14px 4px !important;
  }
  .track .track-play { grid-area: play; }
  .track .track-id   { grid-area: id; min-width: 0; }
  .track .genre      { grid-area: genre; font-size: 12px; opacity: .8; white-space: normal; }
  .track .tlen       { grid-area: len; }
  .track .music-options { grid-area: buy; justify-self: end; white-space: nowrap; }
}

/* ===== 17. Genre label never truncates on desktop ===== */
.track .genre { min-width: 0; overflow-wrap: anywhere; }

/* ===== 18. Campaign eyebrow: keep it on one line on wider screens =====
   At 760px max-width the label broke after "&", leaving an orphan. */
@media (min-width: 700px) {
  .still-work .group-head .eyebrow { white-space: nowrap; }
}

/* ===== 19. Banner → hero seam =====
   The layout gap is only 10px, but the banner's bottom ~90px is dark ocean
   that reads as empty space, so the hero looked pushed down. Fade the banner's
   last 100px into the page colour and let the headline overlap that band.
   The image itself stays uncropped and fully visible. */
.banner { position: relative; }
.banner::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 100px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13,20,36,0) 0%, rgba(13,20,36,.55) 45%, var(--navy, #0d1424) 100%);
}
#top .wrap.heroline { margin-top: -56px !important; position: relative; z-index: 2; }
@media (max-width: 767px) {
  .banner::after { height: 56px; }
  #top .wrap.heroline { margin-top: -30px !important; }
}

/* ===== 20. Breathing room around divider rules =====
   §1 compressed section padding, which also compressed the space under every
   border-top that acts as a divider. And .evidence-sources had margin:0 — it
   used to be spaced by the takeaway paragraph that was removed. Sections stay
   tight; only the space touching a rule is restored. */

/* the small-print sources note, directly under the case-study grid */
.evidence-sources { margin-top: 28px !important; padding-top: 4px; }
@media (max-width: 767px) { .evidence-sources { margin-top: 22px !important; } }

/* case-study columns: rule → big number */
.evidence-grid > div { padding-top: 22px !important; }

/* section rules (.refined-work / .refined-goals / .refined-music) */
section { padding: clamp(44px, 4.4vw, 72px) 0 !important; }

/* work groups: rule → group heading */
.work-group { padding: 28px 0 !important; }

/* campaign blocks */
.campaign-assets { padding: 26px 0 !important; }
.campaign-roi summary { padding: 20px 0 !important; }

/* portfolio collections: rule → "Advertising · product-led creative" */
.campaign-collection { padding-top: 32px !important; }

/* music pricing tiers: rule → tier name */
.music-choice-grid > div { padding-top: 22px !important; }

/* ===== 21. Founder block: photo centred, name under it, title under the name =====
   Was a 2-column grid (photo | text) with name and role on one inline label. */
.founder {
  display: block !important;
  text-align: center;
}
.founder .founder-id {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 26px;
}
.founder .founderpic {
  width: 132px !important; height: 132px !important;
  border-radius: 50% !important; margin: 0 auto;
}
.founder .founder-name {
  font-family: var(--compressed, inherit);
  font-size: 20px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cream, #f6f1e8); line-height: 1.1;
}
.founder .founder-title {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #0A1022; background: linear-gradient(96deg, var(--violet), var(--cyan));
  font-family: var(--compressed, inherit); font-weight: 700;
  padding: 5px 14px; border-radius: 100px; display: inline-block;
}
.founder .founder-body h3 { text-align: center; }
/* bio paragraphs stay left-aligned and centred as a column — easier to read */
.founder .founder-body p {
  text-align: left; max-width: 62ch; margin-left: auto; margin-right: auto;
}
.founder .founder-link { display: inline-block; margin-top: 4px; }
@media (max-width: 600px) {
  .founder .founderpic { width: 108px !important; height: 108px !important; }
  .founder .founder-body p { max-width: 100%; }
}

/* ===== 22. Centre the "The goal is simple" subtitle under its heading =====
   .evidence-strip is text-align:center but the subtitle kept a max-width with
   no auto margins, so the block sat left of the centred h2. */
.evidence-strip .evidence-subtitle {
  max-width: 62ch; margin-left: auto !important; margin-right: auto !important;
  text-align: center;
}

/* ===== 23. Founder card padding =====
   §21 set .founder to display:block, which dropped its original
   padding:28px 30px — the photo and text ran to the card edge. */
.founder {
  padding: clamp(30px, 3.2vw, 46px) clamp(24px, 3vw, 44px) !important;
}
@media (max-width: 600px) {
  .founder { padding: 28px 20px !important; }
}

/* ===== 24. Campaign copy: use the width that's actually there =====
   .collection-intro was capped at 850px inside a 1160px column, so each
   sentence broke across 4 lines with 310px sitting empty beside it.
   The label now sits on its own line so the sentence starts clean. */
.collection-intro { max-width: 1100px !important; }
.collection-intro p { text-wrap: pretty; margin-bottom: 10px; }
.collection-intro p strong {
  display: block; margin-bottom: 2px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ref-gold, #f5cb5c); font-weight: 800;
}
@media (max-width: 900px) { .collection-intro { max-width: 100% !important; } }

/* ===== 25. Problem section: honour the authored two-line breaks =====
   .probsub and .probclose were capped at 954px / 868px inside a 1240px
   wrap, so the second half of each spilled onto a third line. Widen them
   to the full column so each authored line stays on one line. */
.probsub, .probclose { max-width: 1160px !important; margin-left: auto; margin-right: auto; }
@media (max-width: 1200px) { .probsub, .probclose { max-width: 100% !important; } }

/* ===== 26. Footer tagline: one line, in full =====
   Same words and same single line as the header wordmark. It was being
   clipped, so the clamp is lifted rather than letting it wrap. */
footer .wordmark small {
  display: block;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  font-size: 12px !important;
  line-height: 1.3;
}
/* below ~420px there isn't room for one line, so let it wrap rather than overflow */
@media (max-width: 420px) {
  footer .wordmark small { white-space: normal !important; }
}

/* ===== 27. Asset Refresh entry offer + free-sample block =====
   The low-ticket on-ramp. Styled to read as a step toward the retainer,
   not as a competing product: quieter than the flagship card, with an
   explicit hand-off line at the end pointing back up the ladder.
   Mobile-first; the two-column split only appears when there is room. */

/* the three terms: what you send / what comes back / what it costs */

/* how it goes / what this will and won't do */


/* ---- entry offer card in the offers grid ---- */
.offer-entry { border-color: rgba(245,203,92,.42); }
.offer-entry .offer-meta strong { color: var(--gold); }

/* ===== 28. Anchor landings clear the sticky nav =====
   The nav is sticky and 61px tall on mobile, 68px on desktop, but
   scroll-padding-top was never set — so every in-page jump (GET STARTED,
   Book now, the footer links, the new Asset Refresh and sample anchors)
   landed with its first line hidden behind the bar. */
html { scroll-padding-top: 78px; }
@media (min-width: 900px) { html { scroll-padding-top: 88px; } }


/* The swipe hint is a phone-only affordance: hidden everywhere by default
   so it never appears on the desktop layout. */
.swipe-hint { display: none; }

/* ===== 29. Mobile experience pass ==================================
   Everything below is scoped to phones. Desktop rendering is unchanged.
   Driven by measurement at 360px and 390px, not by eyeballing. */

@media (max-width: 767px) {

  /* --- 29a. The swipe rows now SAY they are swipe rows -------------
     The carousels already had an 86% peek and scroll-snap, but the
     scrollbars were hidden, so five of six offers were invisible with no
     signal they existed. On a phone that meant the monthly offers were
     effectively not on the page. */
  .swipe-hint {
    display: flex !important; align-items: center; gap: 7px;
    margin: 0 0 10px; padding: 0;
    font-size: 13px; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase;
    color: var(--gold, #F5CB5C); opacity: .92;
  }
  .swipe-hint span { display: inline-block; animation: swipenudge 1.9s ease-in-out infinite; }
  @keyframes swipenudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

  /* a little more of the next card shows -- the peek IS the affordance */
  .yt-grid, .hero-proof, .offer-list { grid-auto-columns: 84% !important; scroll-padding-left: 0; }

  /* --- 29b. Put the monthly offer second --------------------------
     Only ~1.2 cards are visible at a time, so card two is the most
     valuable slot on a phone. Content Engine (monthly) moves up behind
     the $297 entry offer; the one-off builds follow. Source order is
     unchanged, so desktop and screen readers are unaffected. */
  .offer-list > .offer:nth-child(1) { order: 1; }   /* Asset Refresh  $297 */
  .offer-list > .offer:nth-child(4) { order: 2; }   /* Content Engine $1,250/mo */
  .offer-list > .offer:nth-child(2) { order: 3; }   /* Flagship Film */
  .offer-list > .offer:nth-child(3) { order: 4; }   /* Foundation Sprint */
  .offer-list > .offer:nth-child(5) { order: 5; }   /* Site Build */
  .offer-list > .offer:nth-child(6) { order: 6; }   /* Strategy Session */

  /* --- 29c. Copy that was too small to read comfortably ------------
     Measured: 11px source links, 12px kickers and metadata, 14px list
     items. Raised to a readable floor without touching the type scale. */
  .evidence-sources { font-size: 13.5px !important; line-height: 1.6 !important; }
  .evidence-grid a, .case-source, .evidence-grid p a { font-size: 13.5px !important; }
  .probkicker, .eyebrow, .case-type { font-size: 12.5px !important; letter-spacing: .14em !important; }
  .track .genre { font-size: 13.5px !important; }
  .track .tlen { font-size: 14px !important; }
  .campaign-assets span { font-size: 14.5px !important; line-height: 1.5 !important; }
  .campaign-roadmap span { font-size: 12.5px !important; letter-spacing: .14em !important; }
  .campaign-booking span { font-size: 14.5px !important; line-height: 1.55 !important; }
  .offer-description li, .offer ul li { font-size: 15.5px !important; line-height: 1.55 !important; }
  .hero-video small, .yt-card small { font-size: 13.5px !important; line-height: 1.5 !important; }

  /* --- 29d. Form fields: 16px minimum -----------------------------
     iOS Safari zooms the whole page in when a focused input is under
     16px, and the visitor then has to pinch back out. That alone loses
     form completions. */
  input, select, textarea,
  .opt { font-size: 14px !important; }

  /* --- 29e. Tap targets -------------------------------------------
     Measured below the 44px minimum: source links 17px tall, the founder
     link 28px, the FAQ summary 32px, radio inputs 30x34. Thumbs are not
     mouse pointers. */
  .evidence-grid a, .founder-link, .text-link, footer a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 2px 0;
  }
  summary { min-height: 44px; display: flex; align-items: center; padding: 6px 0; }
  .opts label {
    display: flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 4px 2px; margin-bottom: 2px;
  }
  .opts input[type="radio"], .opts input[type="checkbox"] {
    width: 22px; height: 22px; min-width: 22px; margin: 0; flex: none;
  }
  .track-play { min-width: 46px; min-height: 46px; }
  .navin .brand, a.brand { min-height: 44px; display: inline-flex; align-items: center; }
  .opts label input { width: 22px !important; height: 22px !important; min-width: 22px; flex: none; }

  /* --- 29f. Footer: readable, and inside the gutter ---------------- */
  .footcols { grid-template-columns: 1fr 1fr !important; gap: 24px 18px !important; }
  .footcols a { line-height: 1.35; }
  footer .wrap, .footer, footer .footer { padding-left: 22px !important; padding-right: 22px !important; }
  footer .footer p, footer .footer small { line-height: 1.6; }

  /* --- 29g. The sticky bar was covering the last line of the page --- */
  body { padding-bottom: 76px; }
  .stickycta { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* very small phones: two footer columns still crowd, so give in gracefully */
@media (max-width: 380px) {
  .footcols { grid-template-columns: 1fr !important; gap: 18px !important; }
}


/* ===== 30. Mobile navigation, buyability and polish ================
   Goal: easy to navigate, easy to buy, easy to trust. All phone-scoped;
   the desktop layout is untouched and verified pixel-identical. */

/* the menu button and sheet simply do not exist above 767px */
.navtoggle, .mobilemenu { display: none; }
.mobilemenu[hidden] { display: none !important; }

@media (max-width: 767px) {

  /* --- 30a. A way to get around a 27,000px page -------------------
     The nav carried only a logo and Book Now, so every section was
     reachable only by scrolling past everything above it. */
  .navtoggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    gap: 5px; width: 46px; height: 46px; margin-left: 10px; padding: 0;
    background: transparent; border: 1px solid var(--rule, rgba(230,235,245,.14));
    border-radius: 9px; cursor: pointer; flex: none;
  }
  .navtoggle span {
    display: block; width: 20px; height: 2px; margin: 0 auto;
    background: var(--text, #F4F8FC); border-radius: 2px;
    transition: transform .22s ease, opacity .18s ease;
  }
  .navtoggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .navtoggle.is-open span:nth-child(2) { opacity: 0; }
  .navtoggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* CRITICAL: `display: block` here beats the [hidden] attribute's UA
     `display:none`, which left a full-screen, fully transparent overlay
     (opacity 0, z-index 90, pointer-events auto) across the whole page.
     It swallowed every tap below the nav -- music buttons, Book Now,
     offer links, form fields. The :not([hidden]) guard is the fix; the
     explicit [hidden] rule and pointer-events are belt and braces. */
  .mobilemenu:not([hidden]) {
    display: block; position: fixed; left: 0; right: 0;
    top: var(--navh, 61px); bottom: 0; z-index: 90;
    background: #080E1EF7; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    padding: 10px 22px calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
  }
  .mobilemenu[hidden] { display: none !important; }
  .mobilemenu:not(.is-open) { pointer-events: none; }
  .mobilemenu.is-open { opacity: 1; transform: translateY(0); }
  .mobilemenu ul { list-style: none; margin: 0 0 22px; padding: 0; }
  .mobilemenu li { border-bottom: 1px solid var(--rule, rgba(230,235,245,.12)); }
  .mobilemenu a {
    display: flex; align-items: center; min-height: 56px;
    font-family: var(--compressed, inherit); font-size: 18px; font-weight: 700;
    letter-spacing: .01em; color: var(--text, #F4F8FC); text-decoration: none;
  }
  .mobilemenu a:active { color: var(--gold, #F5CB5C); }
  .mobilemenu .menu-cta { justify-content: center; width: 100%; min-height: 54px; color: var(--ink, #0A1022); }
  body.menu-open { overflow: hidden; }

  /* the bar itself gets a solid backing so the sheet reads as attached */
  nav { background: #0A1022F2 !important; }

  /* --- 30b. Every offer visible, because hidden offers don't sell --
     These were a horizontal swipe row: six cards, 1,855px wide inside a
     346px window, so five of them were off-screen. Now they stack, the
     same way the desktop grid shows all of them at once. */
  .offer-list {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    grid-template-columns: 1fr !important;
    overflow-x: visible !important;
    gap: 16px !important;
    padding-bottom: 0 !important;
  }
  .offer-list > .offer { width: auto !important; scroll-snap-align: none; }

  /* monthly offer second: the $297 entry opens, the retainer follows */
  .offer-list > .offer:nth-child(1) { order: 1; }
  .offer-list > .offer:nth-child(4) { order: 2; }
  .offer-list > .offer:nth-child(2) { order: 3; }
  .offer-list > .offer:nth-child(3) { order: 4; }
  .offer-list > .offer:nth-child(5) { order: 5; }
  .offer-list > .offer:nth-child(6) { order: 6; }

  /* a stacked card does not need to be as tall as a swipe card */
  .offer-list > .offer { padding: 24px 22px !important; }
  .offer-list > .offer .btn { width: 100%; justify-content: center; }

  /* --- 30c. Music library: a taster, then the rest on request -----
     Seventeen tracks ran 2,500px on a phone and buried everything under
     it. Six show by default; the button reveals the rest. */
  .track-hidden { display: none !important; }
  .showall {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 52px; margin: 14px 0 0;
    background: transparent; color: var(--gold, #F5CB5C);
    border: 1px solid var(--gold, #F5CB5C); border-radius: 8px;
    font-family: var(--compressed, inherit); font-size: 15px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  }

  /* --- 30d. Headline wrapping: no orphan words, no ragged centres -- */
  /* The founder statement was centred and broke into four ragged lines.
     Left-aligned it reads as a statement rather than a torn banner.
     (.founder-head never existed -- the element is .founder-body h3.) */
  .founder-body h3 {
    text-align: left !important;
    font-size: clamp(22px, 5.9vw, 28px) !important;
    line-height: 1.28 !important;
    text-wrap: balance;
  }
  /* These two stay centred by design, but balanced so the lines even out
     instead of leaving one orphan word on the last row. */
  .closeh, .evidence-strip h2, .evidence-subtitle { text-wrap: balance; }

  /* --- 30e. One consistent side gutter down the whole page --------- */
  .wrap, .sec, .page { padding-left: 22px !important; padding-right: 22px !important; }
  .banner, .banner img, nav .wrap, .mobilemenu { padding-left: 0 !important; padding-right: 0 !important; }
  .mobilemenu { padding-left: 22px !important; padding-right: 22px !important; }
}


/* ===== 31. Anchor clearance under the restored sticky bar ==========
   scroll-padding-top (78px) and the sections' own scroll-margin-top
   (90px) were stacking, dropping every menu jump 168px low and leaving a
   dead gap above the heading. One source of truth instead, measured from
   the real bar height. */
@media (max-width: 767px) {
  html { scroll-padding-top: 0 !important; }
  section[id], header[id], article[id] {
    scroll-margin-top: calc(var(--navh, 71px) + 12px) !important;
  }
}


/* ===== 32. Portfolio image navigation =============================
   Arrows sit over the image at both edges, vertically centred, with a
   44px+ target so a thumb can hit them. The counter tells the visitor
   how many there are, which is why they keep going. */
#still-viewer { position: relative; }

.still-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  font: 400 30px/1 Georgia, 'Times New Roman', serif;
  color: var(--text, #F4F8FC);
  background: rgba(10, 16, 34, .82);
  border: 1px solid var(--rule, rgba(230, 235, 245, .22));
  border-radius: 50%;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .15s ease, border-color .15s ease;
}
.still-nav:hover { background: rgba(10, 16, 34, .95); border-color: var(--gold, #F5CB5C); color: var(--gold, #F5CB5C); }
.still-nav:active { transform: translateY(-50%) scale(.94); }
.still-nav[hidden] { display: none !important; }
.still-prev { left: 14px; }
.still-next { right: 14px; }

.still-count {
  margin: 10px 0 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .14em;
  color: var(--dim, #CFDAE6);
}
.still-count[hidden] { display: none !important; }

/* phones: tuck the arrows to the very edges so they never cover the
   middle of the image, and keep the target size */
@media (max-width: 767px) {
  .still-nav { width: 46px; height: 46px; font-size: 26px; }
  .still-prev { left: 6px; }
  .still-next { right: 6px; }
  #still-viewer { padding-left: 10px; padding-right: 10px; }
}