/* ==========================================================================
   BREAKPOINTS All responsive rules consolidated
   Breakpoints: 1200, 1024, 768, 576, 480, 375, 320
   ========================================================================== */

/* ---- Global overflow protection ---- */
html, body { overflow-x: hidden;}
img, video, embed, iframe, object { max-width: 100%; height: auto;}

/* ---- Large desktop (≥1440px) no changes needed ---- */

/* ---- Header: 8 nav links need the room, so the phone numbers drop out first ----
   Was max-width: 1400px, which collided exactly with the min-width: 1400px query
   in layout.css that reshapes the header grid. At 1401px and up both applied at
   once: the phones came back at the same moment the logo track became
   space-sized, and the wordmark broke across two lines.

   1500px leaves the bar enough room for the nav, the logo and the CTA without
   the phones, which is the state that has to hold from 1025px up. */
@media (max-width: 1500px) {
  .header-phone, .header-phone-sep { display: none;}
}

/* ---- Header: one number in the bar, not two ----
   Above 1500px the grid is 1fr auto 1fr, so the two outer tracks are forced
   EQUAL and the nav only stays dead centre while that holds. Measured at a
   1600px viewport with both numbers forced back on: .header-right comes to 377px
   against a 326.4px track, so the bar runs 50.6px past its own track. The track
   is (1440 - nav 751.2 - gaps 36) / 2 at the 1440px container cap.

   That is arithmetic, not a tuning problem: raising the hide threshold does not
   help, because --container caps at 1440px and the shortfall is inside the cap.
   Shrinking the type does not close it either, which is the other reason the
   number stayed where it is: at 0.6rem the pair only falls to about 360px, still
   34px over. See layout.css.

   One number plus the CTA measures 280.9px, which fits the 326.4px track with
   45.5px spare and leaves the wordmark unchallenged. The second number,
   +92-333 5846340, is untouched in the footer on all 24 pages that carry a
   header, so nothing is lost but a duplicate. nth-of-type(2) counts the <a>
   elements in .header-right, which are phone, phone, CTA in that order on every
   page, so the rule hides the second number and leaves the first alone.

   Verified at a 1600px viewport: tracks 326.4 / 751.2 / 326.4, nav off-centre by
   0px, header overflow 0, wordmark on one line. */
.header-phone:nth-of-type(2) { display: none; }

/* ---- Desktop (≤1200px) ---- */
@media (max-width: 1200px) {
  .hero-headline { font-size: clamp(2.4rem, 5.5vw, 4.8rem);}
  .hero { min-height: auto;}
  .nav-list { gap: 2px;}
  .nav-list a { font-size: 0.78rem; padding: 7px 8px;}
}

/* ---- Tablet / Laptop (≤1024px) ---- */
@media (max-width: 1024px) {
  :root { --gutter: 20px;}

  /* Header / Nav */
  .header-inner { grid-template-columns: auto 1fr auto; gap: 12px;}
  .header-cta { display: none;}
  .header-phone, .header-phone-sep { display: none;}
  .menu-toggle { display: block; order: 1; width: 44px; height: 44px; border: none; background: transparent; position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
  .menu-toggle span { left: 12px; right: 12px;}
  /* The only control on the site that had no hover at all. It is a 44px target
     carrying two bars and nothing else, and the bars sat still under the
     pointer, so the one thing a phone user reaches for first gave no feedback.
     scaleX rather than a width change because .menu-toggle span already
     transitions transform, and left/right are not in that list, so animating
     the box would have snapped instead of eased.
     Deliberately not a colour change. These bars turn white over the seven
     photo banners (page-overrides.css sets that per page group) and charcoal on
     plain pages, so there is no single colour that is correct on both grounds.
     Widening is the one signal that is legible either way. */
  .menu-toggle:hover span,
  .menu-toggle:focus-visible span { transform: scaleX(1.22);}
  .nav-mobile-head, .nav-close, .nav-mobile-cta { display: flex;}
  .header-inner .logo-mark { width: 40px; height: 40px; font-size: 0.85rem;}
  .header-inner .logo-name { font-size: 1.1rem;}
  .mobile-cta { display: block;}

  /* Mobile nav panel slide-in from right */
  .site-header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;}
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100vw;
    height: auto;
    max-height: 100vh;
    max-height: 100dvh;
background: var(--gold);
    display: flex; flex-direction: column;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 200;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    margin: 0;
}
  .nav.open { transform: translateX(0);}
body.nav-open .mobile-cta { display: none !important;}

  /* Mobile nav header bar */
  .nav-mobile-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    padding-top: calc(20px + env(safe-area-inset-top, 0));
    flex-shrink: 0;
}
  .nav-close {
    position: fixed;
    right: 16px;
    top: 16px;
    width: 48px; height: 48px;
    display: grid; place-items: center;
    background: rgba(255,255,255,0.16); border: none;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s ease;
    z-index: 210;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
  .nav-close:hover { background: rgba(255,255,255,0.3);}
  .nav-close .ph { font-size: 1.5rem; color: #fff;}
  .nav-mobile-head .logo { gap: 0;}
  .nav-mobile-head .logo-mark { background: #fff; color: var(--gold);}
  .nav-mobile-head .logo-name { font-family: 'Cormorant Garamond', var(--font-display); font-size: 1.8rem; font-weight: 600; white-space: nowrap; letter-spacing: 0.04em; text-transform: uppercase; color: #fff;}
  .nav-mobile-head .logo-tagline { font-size: 0.65rem; letter-spacing: 0.1em; margin-top: 2px; color: rgba(255,255,255,0.75);}

  /* Nav list */
  .nav-list {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0;
    width: 100%;
    padding: 0;
}
  .nav-item { border-bottom: none;}
  .nav-item:last-child { border-bottom: none;}
  .nav-list a {
    font-size: clamp(1rem, 3.5vw, 1.25rem);
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    padding: 0 20px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0;
    width: 100%;
    max-width: none;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
    box-sizing: border-box;
}
  /* Mobile drawer. Identical treatment to the desktop header - near-white pill at
     90% with black ink - so the nav does not change character between the two.
     The colour was --gold-soft, a pale mint that read as a colour in its own right
     rather than as a brighter version of the resting ink. */
  .nav-list a:hover, .nav-list a:focus-visible {
    background: rgba(255, 255, 255, 0.9);
    color: var(--black);
}
  .nav-list a.active { color: var(--gold); background: #fff;}

  /* Dropdown icon */
  .dropdown-icon {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.7);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
  .has-dropdown.open > a .dropdown-icon { transform: rotate(180deg);}

  /* Dropdown submenu */
  .has-dropdown .dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
  .has-dropdown.open .dropdown {
    max-height: 300px;
}
  .dropdown li { border-bottom: none;}
  .dropdown li:last-child { border-bottom: none;}
  .dropdown li a {
    font-size: clamp(0.85rem, 2.8vw, 0.95rem);
    font-family: var(--font-ui);
    font-weight: 500;
    color: #fff;
    padding: 0 20px 0 36px;
    height: 46px;
    display: flex;
    align-items: center;
    border-radius: 0;
    white-space: normal;
    max-width: none;
    box-sizing: border-box;
}
  .dropdown li a:hover { color: var(--gold-soft); background: rgba(255, 255, 255, 0.08);}

  /* Mobile CTA at bottom of nav */
  .nav-mobile-cta {
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0));
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
  .btn-block { display: block; width: 100%; text-align: center; padding: 14px 20px; font-size: 0.95rem;}
  .nav-mobile-cta .btn { background: #fff; color: var(--gold);}
  .nav-mobile-cta .btn:hover { background: #fff; color: var(--gold);}

  /* Hero */
  .hero { min-height: auto; padding: 120px 0 60px;}
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center;}
  .hero-visual { max-width: 400px; margin-inline: auto; order: -1;}
  .hero-content { max-width: 100%; margin-inline: auto;}
  .hero-actions { justify-content: center;}
  .hero-trust { justify-content: center; flex-wrap: wrap;}
  .hero-badge { top: 10px; right: 20px;}
  .hero-stat-card { right: 20px; bottom: -16px;}

  /* Subpage hero blobs */
  .hero-blob { display: none;}

  /* Sections */
  .section { padding: clamp(32px, 5vw, 48px) 0;}
  .section-head { margin-bottom: clamp(16px, 3vw, 24px);}

  /* Meet grid */
  .meet-grid { grid-template-columns: 1fr; gap: 40px; text-align: center;}
  .meet-media { max-width: 440px; margin-inline: auto;}
  /* Stacks to one column here, so the copy rejoins the centred measure and
     picks up the site-wide "line equally end" formula again. */
  .meet-copy { hyphens: manual; }

  /* Services */
  .services-grid { grid-template-columns: 1fr 1fr; gap: 20px;}

  /* Editorial */
  .editorial-grid { grid-template-columns: 1fr 1fr; gap: 12px;}
  .edi-img { border-radius: var(--radius-md);}

  /* Program panel */
  .program-panel { border-radius: var(--radius-md);}
  .program-media { min-height: 300px;}
  .program-body { padding: clamp(24px, 4vw, 40px);}

  /* Story */
  .story-grid { gap: 32px;}
  .story-media { aspect-ratio: 4/5;}

  /* Mini cards */
  .mini-cards { gap: 14px;}
  .mini-card .body { padding: 18px;}
  .mini-card .body h3 { font-size: 1.15rem;}

  /* Lead panel */
  .lead-panel { padding: clamp(28px, 5vw, 56px); gap: 24px;}

  /* Why layout */
  .why-layout { grid-template-columns: 1fr; gap: 32px;}
  .why-sticky { position: static; text-align: center;}
  .why-sticky .lead { margin-inline: auto;}

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr 1fr;}
  .testi-card { padding: clamp(20px, 3vw, 36px);}

  /* Transformation scroll */
  .trans-scroll { gap: 16px; grid-auto-columns: min(55vw, 380px);}
  .stage { padding: clamp(20px, 2.5vw, 36px);}

  /* Contact page */
  .contact-grid { grid-template-columns: 1fr;}

  /* Footer */
  .foot-main { grid-template-columns: 1fr 1fr; gap: 28px; text-align: left;}

  /* Mobile CTA */
  .mobile-cta { display: none !important;}

  /* Removed body padding-bottom: 82px it reserved space for the mobile CTA,
     which is force-hidden above, leaving a blank strip after the footer */

  /* Resources page */
  .res-grid-2 { grid-template-columns: 1fr;}

  /* Post page */
  .post-nav { grid-template-columns: 1fr 1fr;}

  /* Cert carousel */

  /* Packages pricing cards 2-col on tablet */
  .packages-grid { grid-template-columns: 1fr 1fr;}

  /* Home Section 04 outcome cards: 3-across drops to 2 */
  .achieve-grid { grid-template-columns: repeat(2, 1fr);}

  /* Home Section 06 themes: 3-across drops to 2 */
  .themes-grid { grid-template-columns: repeat(2, 1fr);}
}

/* ---- Mobile (≤768px) ---- */
@media (max-width: 768px) {
  :root { --header-h: 64px; --header-h-scrolled: 52px;}

  /* Hero banner headings - sized down for phones. Covers the About banner
     ("My Story.") and the FAQ banner ("Questions people ask."), which are the
     same band and should behave the same way.

     Nothing between 321px and 768px overrides .h-display, so the phone widths
     were taking the 2.8rem floor out of the token clamp in design-tokens.css
     (clamp(2.8rem, 6.5vw, 6rem)) - a flat 44.8px. That is a cliff, not a scale:
     the same heading rendered 32px at 320px and 44.8px at 321px, and at 390px
     the nine characters of "My Story." ran to 344px, 88% of the viewport. It
     filled the band edge to edge with no air around it.

     The floor moves to 1.55rem and the slope is flattened to 8.2vw, which lands
     "My Story." at 26.2px / 29.5px / 32px / 35.3px across 320 / 360 / 390 / 430,
     putting the text at 63-70% of the viewport instead of 86-89%.

     The FAQ heading is the longer of the two - "Questions people ask." measures
     9.83em against "My Story." at 4.028em, both taken off a nowrap clone at
     100px with .h-display's -0.035em tracking intact, since measuring without
     the tracking overstates the ratio by about 7%. It needs its own check
     rather than an assumption, and it passes on this same clamp: the widest font
     that still fits one line is 26.9px at a 300px viewport and 35px at 380px,
     against 25.4px and 32px delivered here, so 5-9% of air; past 470px the cap
     takes over and the slack widens fast, 38.4px used of 74px available at
     768px. Verified at nineteen widths from 300px to 980px, all single-line.

     That heading does sit at 83% of viewport width where "My Story." sits at
     34%, and that is the cost of a string 2.4x longer, not a fault in the
     clamp - it stays inside the band's own padding at every width. The slope is
     left shared with the About banner deliberately: if only the FAQ heading
     were flattened, the two bands would stop scaling together, which is the
     thing being asked for.

     Scoped to the four banner selectors rather than .h-display, because every
     other hero on the site depends on that class and was not the thing being
     complained about. Specificity 0,1,1 also beats the .h-display phone rule
     further down this file, so this one line governs the whole 0-768px range
     with no second edit needed at the 320px boundary.

     The floor and slope are set by the longest string in the group. "Let's start
     a conversation." measures 364px unwrapped at the old 8.2vw, which overflowed
     the 344px measure at 390px and wrapped to two lines. It is the binding
     constraint at 30.2px, so the floor is 1.45rem and the slope 7.2vw, chosen to
     clear it with air at 390px rather than exactly. The other three are shorter
     and were never wrapping: "Questions people ask." tops out at 35px,
     "What Is Happiness?" at 39.4px, "My Story." at 79.8px.

     The cap stays 2.4rem so the 768px end (38.4px) meets the desktop clamp's
     slope just above the boundary (40.8px at 769px) instead of jumping. */
  :is(.about-hero, .faq-hero, .poem-hero, .contact-hero, .services-banner, .packages-banner, .resources-banner, .blog-hero) h1 { font-size: clamp(1.45rem, 7.2vw, 2.4rem);}

  /* Home: Section 02 welcome grid stacks, image above the copy */
  #meet .welcome-grid { grid-template-columns: minmax(0, 1fr); gap: 24px;}

  /* Home Section 04 outcome cards: 2-across drops to a single column */
  .achieve-grid { grid-template-columns: 1fr;}

  /* Home Section 06 themes: 2-across drops to a single column */
  .themes-grid { grid-template-columns: 1fr;}

  /* Header */
  .logo-name { font-size: 0.95rem;}
  /* Raised from 0.55rem with the base clamp. This query owns 769px down to
     577px, which is the narrowest band where the nav is still inline AND the
     tagline is still on screen: the 576px query below hides it outright. */
  .logo-tagline { font-size: 0.66rem;}
  .foot-brand .logo-name { font-size: 1.25rem;}
  .foot-brand .logo-tagline { font-size: 0.62rem;}
  .logo-mark { width: 34px; height: 34px; font-size: 0.75rem;}

  /* Nav mobile */
  .nav { padding: calc(var(--header-h) + 16px) clamp(20px, 6vw, 40px) 40px;}
  .nav-list a { font-size: 1.25rem; padding: 12px 18px; max-width: 280px; min-height: 48px;}
  .dropdown li a { font-size: 0.95rem; padding: 8px 14px; max-width: 240px; min-height: 44px;}

  /* Hero */
  .hero { padding: 80px 0 48px;}
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); letter-spacing: -0.03em;}
  .hero-content { margin: 0.8em 0 1.4em;}
  .hero-actions { gap: 10px; flex-direction: column; align-items: stretch;}
  .hero-actions .btn { justify-content: center;}
  .hero-visual { max-width: 360px;}
  .hero-figure { aspect-ratio: 3/4;}
  .hero-figure-secondary { width: 110px; left: -20px; bottom: 40px;}
  .hero-deco { display: none;}

  /* Home hero: start the block at the top on phones.
     .hero-inner is align-self:stretch inside a 100vh hero, and .hero-headline
     carries margin-top:auto, which absorbed all the slack above itself and
     parked the content mid-screen. Zero the top margin so the copy begins
     under the header instead.

     This block used to add a 96px reserve on top of the header for the roles
     pills, which sat pinned there. They are in the flow under the headline now,
     so the reserve is gone: the gap below the header is the .hero padding. */
  /* The desktop rule zeroes .hero--full's padding-top from 769px up, on the
     grounds that the .hero-inner padding below already carries --header-h.
     At exactly 768px that inner padding is also zeroed, so this width was
     left with neither: the headline started 16px under the header, against 24px
     on either side of the boundary. Restating the phone figure here closes
     the one-pixel-wide cliff. */
  #hero.hero--tint { padding-top: calc(var(--header-h) + 24px);}
  #hero.hero--tint .hero-inner { padding-top: 0; padding-bottom: 40px;}
  /* auto, not 0. The copy block belongs at the bottom of the hero at every width,
     and the headline is the first child, so it is the one that has to absorb the
     slack; .hero-actions stays at margin-top:0 so there is only one auto in the
     column. At 0 this rule pinned the copy to the top on every phone and tablet,
     while the desktop rule above pushed it to the bottom, leaving a measured
     233px to 554px of empty hero below the button below 768px. */
  #hero.hero--tint .hero-headline { margin-top: auto;}

  /* The CTA is centred on phones, not held at the left edge. It was
     flex-start here to match the desktop rule, but on a phone the headline and
     the roles pill are both centred on the same measure and the button was the
     one element hanging off to the left under them: measured 16px of left inset
     against 56px of right at 320, and 16px against 110px at 390.

     Both declarations are needed. .hero-inner is a flex column, so align-self
     centres the row itself, and justify-content then centres the button inside
     the now content-width row. Scoped to this breakpoint so the desktop hero
     keeps its left-aligned button. */
  #hero.hero--tint .hero-actions {
    align-self: center;
    justify-content: center;
}

  /* Hero stat card reposition to avoid overlap on mobile */
  .hero-stat-card {
    position: relative;
    right: auto; bottom: auto;
    min-width: 0;
    width: 100%;
    margin-top: 16px;
    border-radius: var(--radius-md);
}
  .stat-top { gap: 8px;}
  .stat-number { font-size: 1.5rem;}

  /* Sections */
  .section { padding: clamp(28px, 5vw, 40px) 0;}
  .section-head { margin-bottom: clamp(16px, 3vw, 24px);}
  .section-head h2 { font-size: clamp(1.6rem, 5vw, 2.2rem);}

  /* Services: "Our 3-Stage Transformation Process", a 34-character .h-section
     heading that still has to hold ONE line at 320px. Measured on the rendered
     line box in Bricolage Grotesque 600 at -0.025em tracking, the string is
     16.7145em wide, so it needs 17.59px for the 294px a 320px viewport leaves,
     19.74px at 360px and 19.98px at 376px.

     The floor, not the slope, is what broke it. The 1.25rem floor on the shared
     rule's 480px step pins 20px from 325px to 400px, and 20px needs 334.3px of
     measure. It clears the 335px a 365px viewport leaves, misses the 334px at
     364px, and misses again at 376px, where .container takes its padding from
     30px to 42px and loses 12px of measure on one pixel of viewport.

     Keeping the shared 5vw and only dropping the floor to 17px fixes every width
     and changes nothing above 400px, where 5vw was never the binding term:
     20px against 21.42px of need at 400px, 24px against 26.21px at 480px, 30px
     against 33.39px at 600px, 35.2px against 43.44px at 768px. The 2.2rem cap is
     the shared rule's own cap, so 768px lands on the same 35.2px it does today
     and the 769px seam is unchanged.

     The floor sits about 5% under the measured need at 320px, the margin that
     survives letter-spacing differences between the Bricolage build and the
     fallback, and it is still larger than the 16px body copy beside it.

     One rule for all four .section-head .h-section headings on this page, so they
     stay one size and read as siblings. Only this string is close to the limit:
     the other three measure 10.98em, 10.32em and 7.00em and clear the same clamp
     with room to spare, so they lose the same 2 to 3px at the bottom of the range
     and nothing at all above 400px. */
  .page-services .section-head .h-section {
    font-size: clamp(17px, 5vw, 2.2rem);
}

  /* Authority */
  .authority-inner { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 0;}
  .auth-item b { font-size: 1.4rem;}
  .auth-item span { font-size: 0.64rem;}

  /* Meet grid */
  .meet-grid { gap: 28px;}
  .meet-media { max-width: 100%; gap: 10px;}
  .meet-media .photo-a { margin-top: 20px; aspect-ratio: 1/1.1;}
  .meet-media .photo-b { aspect-ratio: 1/1.1;}
  .meet-media .exp-stamp { width: 88px; height: 88px; top: -12px; right: -2px;}
  .meet-media .exp-stamp b { font-size: 1.2rem;}

  /* Services */
  .services-grid { grid-template-columns: 1fr; gap: 16px;}
  .testi-grid { grid-template-columns: 1fr; gap: 16px;}
  .services-grid--text { grid-template-columns: 1fr;}

  /* Editorial */
  .editorial-grid { grid-template-columns: 1fr; gap: 10px;}
  .edi-1, .edi-4 { grid-column: auto; grid-row: auto; min-height: 0;}
  .edi-img { border-radius: var(--radius-md);}

  /* Program panel stack vertically on mobile */
  .program-panel {
    grid-template-columns: 1fr;
    border-radius: var(--radius-md);
}
  .program-media { min-height: 220px;}
  .program-body { padding: clamp(20px, 4vw, 36px);}
  .program-body .spec { grid-template-columns: 1fr; gap: 12px;}

  /* Story */
  .story-grid { grid-template-columns: 1fr; gap: 32px; text-align: center;}
  .story-media { aspect-ratio: 4/5;}

  /* Mini cards */
  .mini-cards { gap: 14px;}
  .mini-card .body { padding: 18px;}
  .mini-card .body h3 { font-size: 1.15rem;}

  /* Lead panel */
  .lead-panel { padding: clamp(24px, 5vw, 48px); gap: 24px;}

  /* Why layout */
  .why-layout { grid-template-columns: 1fr; gap: 32px;}
  .why-sticky { position: static; text-align: center;}
  .why-sticky .lead { margin-inline: auto;}

  /* Testimonials */
  .testi-grid { grid-template-columns: 1fr;}
  .testi-card { padding: clamp(20px, 3vw, 36px);}

  /* Transformation scroll */
  .trans-scroll { gap: 16px; grid-auto-columns: min(50vw, 340px);}
  .stage { padding: clamp(20px, 2.5vw, 36px);}

  /* Contact page */
  /* .contact-hero is the shared 2170/725 banner band, so it needs no width
     override. The .contact-float-card overrides that used to sit here went with
     the card itself; it belonged to the old text-only hero's portrait. */
  .contact-form-wrap { padding: 22px;}
  .contact-info-card { padding: 14px; gap: 12px;}
  .cic-icon { width: 40px; height: 40px;}
  /* .comment-form .form-row is listed with .form-row, not left to it.
     layout.css:1626 sets .comment-form .form-row to 1fr 1fr at (0,2,0), which
     outranks a bare .form-row at (0,1,0), so the one-column step below never
     reached the comment form on post.html. Measured at 320px: two input fields
     of 93px each. Same selector shape, same file order, so this one wins. */
  .form-row,
  .comment-form .form-row { grid-template-columns: 1fr;}

  /* Post page */
  .post-nav { grid-template-columns: 1fr;}
  .post-author { flex-direction: column; text-align: center;}

  /* Cert carousel */
  .cert-track { gap: 1.2em;}
  .cert-arrow { width: 42px; height: 42px; min-width: 42px; min-height: 42px;}
  .cert-arrow svg { width: 16px; height: 16px;}

  /* Footer */
  .foot-main { grid-template-columns: 1fr 1fr; gap: 24px;}

  /* Why list cols-2 */
  .why-list.cols-2 { grid-template-columns: 1fr;}
  .why-item { padding: 18px 20px;}
  .why-item h3 { font-size: 1.05rem;}
  .why-item p { font-size: 0.88rem;}
  .w-num { font-size: 1.2rem; min-width: 28px;}

  /* Cert Gallery */
  .cert-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px;}

  /* Resources */
  .mini-cards.cols-2 { grid-template-columns: 1fr;}
  .mini-cards.cols-4 { grid-template-columns: repeat(2, 1fr);}
  .res-grid-2 { grid-template-columns: 1fr;}

  /* Legal page reduce excessive top padding */
  .legal-hero { padding: 90px 0 32px;}

  /* 404 page reduce excessive top padding */
  .fine-hero { padding: 90px 0 48px;}

  /* Packages pricing cards 1-col on mobile */
  .packages-grid { grid-template-columns: 1fr; gap: 24px;}
  .packages-grid .service-card > .body { padding: 20px;}
  .packages-grid .service-card .check-list li { font-size: 0.85rem;}

  /* Services grid responsive */
  .services-grid .service-card .body { padding: 20px; gap: 10px;}
  .services-grid .service-card .card-block { margin-top: 10px; padding-top: 10px;}
  .services-grid .service-card p:not(.card-label, .card-note) { font-size: 0.9rem; line-height: 1.65;}
  .services-grid .service-card .meta-tag { font-size: 0.68rem;}
  .services-grid .service-card .card-arrow { width: 44px; height: 44px; font-size: 0.9rem;}
  .services-grid .service-card h3 { font-size: 1.1rem;}

  /* FAQ responsive */
  .faq-item summary { padding: 16px 20px; font-size: 0.95rem;}
  .faq-item p { padding: 0 20px 16px; font-size: 0.88rem;}

  /* Hero Full-Width */
  .hero--full { min-height: 90vh;}
  .hero--full .hero-headline { font-size: clamp(2rem, 8vw, 2.8rem);}
  .hero-inner { margin: 0 auto; padding: 0 20px; text-align: center;}
  .hero--full .hero-actions { justify-content: center;}
  .hero--full .hero-trust { display: none;}
  .work-options { grid-template-columns: 1fr;}

  /* Contact form responsive */
  .contact-form .field input,
  .contact-form .field textarea { padding: 12px 14px; font-size: 0.88rem;}

  /* Intake chat */
  .chat-section { padding: 0 16px 48px;}
  .chat-messages { min-height: 320px; max-height: 420px; padding: 20px 16px; gap: 12px;}
  .chat-msg { max-width: 90%; font-size: 0.88rem; padding: 12px 16px;}
  .result-card { padding: 24px 20px;}
  .result-actions .btn { min-width: 100%;}

  /* Blog post responsive */
  .post-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem);}
  .post-body { padding: 0 4px;}
  .post-body p { font-size: 0.98rem;}

  /* Resources mini-cards portrait */
  .mini-cards.portrait .mini-card .media { aspect-ratio: 16/10;}

  /* Inline testimonials */
  .section .testi-inline { padding: 1.2em 1.5em;}

  /* Lightbox on phones: the arrows go away.
     The image can now be dragged/swiped left and right, so on a touch screen the
     40px arrow discs were pure liability - they sit over the certificate, and a
     thumb aiming at the edge of the image lands on them instead of starting a
     swipe. The close button stays, and so does keyboard access on desktop,
     which is unaffected because this block cannot match above 768px. */
  .lb-prev, .lb-next { display: none;}
}

/* ---- Small mobile (≤576px) ---- */
@media (max-width: 576px) {
  /* Hero roles: one pill, and at 0.62rem/0.12em its label measures 387px of
     glyphs, 411px with the box and border. That width does not scale with the
     viewport, so nowrap would push it out of the measure on the narrowest
     phones: at 390px the measure is 350px and at 320px it is 280px. Fitting
     one line at 320px needs 0.41rem, which is not readable, so nowrap is
     released here and the label wraps to two lines. Measured: one line down to
     520px (411px box), two lines from 480px down (406px box at 44px tall).

     No max-width needed: the pill is a flex item in .hero-inner now, so it is
     already bounded by the container, and releasing nowrap lets fit-content
     resolve to min(max-content, container width). */
  #hero.hero--tint .hero-roles span {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    padding: 7px 12px;
    white-space: normal;
    line-height: 1.4;
    text-align: center;
}

  /* The CTA. .cinematic-btn is inline-flex, so 242px was not a fixed width but
     the label's own size: 152px of text plus 26px+26px of padding and a 14px
     gap to the arrow, which is 76% of a 320px viewport. The label is fixed by
     the copy and the font size by the component, so padding and gap are the
     only free variables. 18px and 10px take it to 222px, in the range .btn's
     own phone padding already sits at, without shrinking the text. */
  .cinematic-btn {
    padding: 0 18px;
    gap: 10px;
}

  /* Header */
  /* Scoped to the header lockup. Unscoped, this also hid the footer brand's
     tagline, which is why "Coach · Mentor · Healer" disappeared under the name
     on phones. The footer owns its own tagline size in layout.css. */
  .header-inner .logo-tagline { display: none;}
  .logo-name { font-size: 0.88rem;}
  .logo-mark { width: 30px; height: 30px; font-size: 0.68rem;}
  .logo { gap: 8px;}
  .header-inner { gap: 8px;}

  /* Nav */
  .nav { padding: calc(var(--header-h) + 12px) 20px 32px;}
  .nav-list a { font-size: 1.1rem; padding: 12px 16px; max-width: 240px; min-height: 48px;}
  .dropdown li a { font-size: 0.9rem; padding: 8px 12px; max-width: 220px; min-height: 44px;}
  /* 44x44, not 40x40. Measured at 390px across six pages: the hamburger was
     40x40 here while every other phone-sized control on the site is 44 or more,
     and it is the single control a phone user has to hit to reach anything at
     all. It was the one shrink on this breakpoint that took a primary target
     below the minimum for no gain: the button is absolutely positioned inside a
     64px header, so the 4px was never needed to fit anything.

     The bar offsets move with the box rather than staying where they were. At
     40px the two bars sat 2px above the vertical centre; left alone in a 44px
     box they would sit 4px above it, which reads as a misaligned icon. Bar
     centres land at 18 and 26, midpoint 22, which is the centre of 44. */
  .menu-toggle { width: 44px; height: 44px; border-radius: 10px;}
  .menu-toggle span { left: 11px; right: 11px;}
  .menu-toggle span:nth-child(1) { top: 17px;}
  .menu-toggle span:nth-child(2) { top: 25px;}

  /* Hero */
  .hero h1 { font-size: clamp(1.8rem, 9vw, 2.4rem);}
  .hero-visual { max-width: 300px;}
  .hero-figure { border-radius: var(--radius-md);}
  .hero-stat-card { right: 10px; bottom: -8px; padding: 14px 16px; border-radius: 14px; min-width: 160px;}
  .stat-number { font-size: 1.6rem;}
  .stat-icon { width: 34px; height: 34px; border-radius: 10px;}
  .stat-icon .ph { font-size: 0.95rem;}
  .stat-label { font-size: 0.6rem; margin-bottom: 6px;}
  .stat-stars { margin-bottom: 6px;}
  .stat-stars .ph-fill { font-size: 0.7rem;}
  .stat-tags { font-size: 0.52rem; padding-top: 6px;}
  .hero-badge { display: none;}
  .hero-figure-secondary { display: none;}

  /* Low-end phone: disable blur and animations */
  .site-header.scrolled { backdrop-filter: none; -webkit-backdrop-filter: none;}
  .gs-up, .gs-fade, .gs-scale { opacity: 1 !important; transform: none !important;}
  .hero .eyebrow, .hero .line-inner, .hero .lead, .hero .btn { opacity: 1; transform: none;}
  .hero-figure img { transform: none;}

  /* Sections */
  .section { padding: clamp(24px, 5vw, 36px) 0;}
  .section-head { margin-bottom: clamp(14px, 3vw, 20px);}
  .section-head h2 { font-size: clamp(1.4rem, 5vw, 1.8rem);}

  /* Authority */
  .authority-inner { gap: 10px; padding: 16px 0;}
  .auth-item b { font-size: 1.2rem;}

  /* Meet media */
  .meet-media { grid-template-columns: 1fr; max-width: 260px;}
  .meet-media .photo-a { margin-top: 0;}

  /* Poem / card panels */
  .poem-card, .poem-panel { padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 40px);}
  .poem-card .quote-big, .poem-quote { font-size: 5rem;}

  /* Intake chat */
  .chat-messages { min-height: 280px; max-height: 380px; padding: 20px 16px; gap: 12px;}
  .chat-msg { max-width: 90%; font-size: 0.88rem; padding: 12px 16px;}
  .result-card { padding: 24px 20px;}
  .result-actions .btn { min-width: 100%;}

  /* Legal page */
  .legal-hero { padding: 80px 0 28px;}

  /* 404 page */
  .fine-hero { padding: 80px 0 40px;}

  /* Packages pricing cards */
  .packages-grid { gap: 20px;}

  /* Services grid */
  .services-grid .service-card .body { padding: 16px;}

  /* Hero Full-Width */
  .hero--full { min-height: 100vh; min-height: 100dvh; padding: 0 0 40px; align-items: flex-end;}
  .hero--full .hero-headline { font-size: clamp(1.8rem, 9vw, 2.4rem);}
  .hero-inner { padding: 0 16px;}
  .hero--full .hero-actions { flex-direction: column; align-items: stretch;}
  .hero--full .hero-actions .btn { justify-content: center;}
  .balance-step { padding: 20px 24px;}

  /* Contact form responsive */
  .contact-form-wrap { padding: 16px;}

  /* FAQ responsive */
  .faq-item summary { padding: 14px 16px; font-size: 0.9rem;}
  .faq-item summary::after { width: 28px; height: 28px; font-size: 1.2rem;}
  .faq-item p { padding: 0 16px 14px;}

  /* Cert Gallery */
  .cert-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px;}

  /* Qualifications list. Two columns at this width leaves roughly 344px each,
     which wraps the longer credentials onto three lines and reads worse than
     the single column it becomes. */
  /* Card columns step down with the measure: two across on a tablet, one on a
   phone.

   The inset tightens on the narrow step. Measured at a 390px viewport the card
   was 286px wide and 34px of that was the marker gutter, leaving 236px of text
   - enough to wrap "Institute of Mind Sciences, Pakistan" onto three lines. The
   marker is 6px rather than 7px and sits 11px in, and the right inset drops to
   12px, which hands about 16px back to the text. */
  .qual-list { grid-template-columns: repeat(2, minmax(0, 1fr));}
  .qual-list li { padding: 11px 12px 11px 22px; font-size: 0.92rem;}
  .qual-list li::before { left: 11px; width: 6px; height: 6px;}
  .qual-org { font-size: 0.82rem;}

  /* Inline testimonials */
  .section .testi-inline { padding: 1em 1.2em;}

  /* Mini-cards portrait */
  .mini-cards.portrait .mini-card .media { aspect-ratio: 16/10;}
}

/* ---- Extra small (≤480px) ---- */
@media (max-width: 480px) {
  /* Header only: the footer keeps the wordmark tagline at every width. */
  .header-inner .logo-tagline { display: none;}
  .logo-name { font-size: 0.82rem;}
  .logo-mark { width: 28px; height: 28px; font-size: 0.62rem;}
  .logo { gap: 6px;}
  .header-inner { gap: 6px;}

  /* Nav */
  .nav-mobile-head { padding: 16px;}
  .nav-list a { font-size: 1rem; padding: 0 16px; height: 52px; min-height: 48px;}
  .dropdown li a { font-size: 0.85rem; padding: 0 16px 0 32px; height: 44px; min-height: 44px;}
  .nav-mobile-cta { padding: 14px 16px;}

  /* Hero */
  .hero { padding: 72px 0 36px;}
  .hero h1 { font-size: clamp(1.6rem, 9vw, 2rem);}
  .hero-visual { max-width: 260px;}
  .hero-figure { border-radius: 16px;}
  .hero-desc { font-size: 0.95rem;}
  .hero-trust { gap: 1em;}
  .trust-item .ph { font-size: 1rem;}
  .trust-item strong { font-size: 0.72rem;}
  .trust-item span { font-size: 0.62rem;}

  /* Hero stat card fully repositioned on small mobile */
  .hero-stat-card {
    position: relative;
    right: auto; bottom: auto;
    min-width: 0;
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
}
  .stat-number { font-size: 1.3rem;}
  .stat-icon { width: 28px; height: 28px; border-radius: 8px;}
  .stat-icon .ph { font-size: 0.8rem;}

  /* Authority */
  .authority-inner { gap: 8px;}
  .auth-item b { font-size: 1.1rem;}
  .auth-item span { font-size: 0.58rem;}

  /* Sections */
  .section { padding: clamp(20px, 5vw, 32px) 0;}
  .section-head h2 { font-size: clamp(1.25rem, 5vw, 1.6rem);}

  /* Cards */
  .mini-card .body { padding: 14px;}
  .mini-card .body h3 { font-size: 1.05rem;}
  .mini-card .body p { font-size: 0.85rem;}

  /* Service card */
  .services-grid .service-card .body { padding: 14px;}
  .services-grid .service-card h3 { font-size: 1rem;}
  .services-grid .service-card p:not(.card-label, .card-note) { font-size: 0.85rem;}

  /* Program panel */
  .program-body { padding: clamp(18px, 4vw, 28px);}
  .program-meta .chip { font-size: 0.75rem; padding: 6px 12px;}
  .program-media { min-height: 160px;}

  /* Lead panel */
  .lead-panel { padding: clamp(20px, 5vw, 36px); gap: 20px;}

  /* Testimonials */
  .testi-card { padding: clamp(16px, 3vw, 28px);}
  .testi-card blockquote { font-size: clamp(1.1rem, 3vw, 1.3rem);}
  .testi-card .quote-mark { font-size: 3rem;}
  .testi-meta img, .testi-avatar { width: 44px; height: 44px;}

  /* Trans scroll */
  .trans-scroll { grid-auto-columns: min(65vw, 280px); padding: 16px 4px 32px;}
  .stage .st-num { font-size: 2.2rem;}
  .stage h3 { font-size: clamp(1.2rem, 3vw, 1.5rem);}

  /* Why items */
  .why-item { padding: 18px 20px; gap: 14px;}
  .why-item .w-num { font-size: 1.2rem;}
  .why-item h3 { font-size: 1.1rem;}
  .why-item p { font-size: 0.88rem;}

  /* Timeline */
  .tl-item { grid-template-columns: 60px 1fr; gap: 12px; padding: 14px 0;}
  .tl-item .tl-year { font-size: 1.1rem;}

  /* Contact form */
  .contact-form-wrap { padding: 14px;}
  .contact-form .field input,
  .contact-form .field textarea { padding: 10px 12px; font-size: 0.85rem;}

  /* Footer compact 2-column layout on phones (was a long single-column stack)

     Three changes here, all phone-only. Desktop keeps the four-column layout
     from layout.css untouched.

     The nav is pinned to the left edge, against align-items: center on the row
     below and text-align: center inherited from .foot-main, which was centring
     the link text in the column and floating the whole column off the edge.

     Legal moves into the right-hand column, above Contact. It used to sit at
     the bottom of the left column, level with the social icons and below them
     in reading order, so it looked like it belonged to the nav list. The nav now
     spans both rows to make room. The icons are nested inside .foot-contact, so
     no placement can slot Legal between the phone numbers and the icons; putting
     it at the head of the Contact column is the closest a grid area can get, and
     it is still above the icons.

     An earlier attempt moved the .foot-legal element itself into .foot-contact
     in the markup, which put it directly on top of the icons on a phone but also
     collapsed the Legal column on desktop. That was reverted: the element is a
     child of .foot-main again, and only this placement is phone-scoped. */
  .foot-main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "brand brand" "nav legal" "nav contact";
    gap: 16px 12px;
    text-align: center;
}
  /* The brand stays left-aligned on a phone: the name on its own line with
     "Coach · Mentor · Healer" directly underneath, both flush to the left edge
     of the container. The centring inherited from .foot-main above is for the
     nav/legal/contact columns only, so it is opted out here rather than on the
     row, and the brand is dropped from the centring rule below. */
  .foot-brand { grid-area: brand; padding-left: 0; align-items: flex-start; text-align: left;}
  .foot-nav { grid-area: nav; align-items: flex-start; text-align: left;}
  .foot-legal { grid-area: legal;}
  .foot-contact { grid-area: contact;}
  .foot-legal, .foot-contact { align-items: center;}
  .foot-nav ul { gap: 6px;}
  .foot-nav a { font-size: 0.85rem;}
  .foot-contact .socials { flex-wrap: wrap; justify-content: center; gap: 8px;}
  /* Space below the social icons, before the CTA. This was 28px carried as an
     inline style on the anchor in the markup, which left the button almost
     touching the second row of icons. It went to 40px to clear them and then to
     56px for the extra breathing room that was asked for. The margin sits on the
     button rather than as margin-bottom on .socials so it is the gap between
     the two blocks specifically, and it stays correct if the icons ever wrap to
     a different number of rows. */
  .foot-contact .btn { margin-top: 56px; width: 100%; justify-content: center; font-size: 0.74rem; padding: 12px 8px;}
  .foot-contact .btn .arw { display: none;}
  .foot-bar .container { flex-direction: column; text-align: center;}
  .foot-email { font-size: 0.85rem; word-break: break-all;}

  /* Post author */
  .post-author { padding: 20px;}
  .post-author img { width: 56px; height: 56px;}
  .post-author-stats { flex-wrap: wrap; gap: 10px;}

  /* Resources */
  .mini-cards.cols-2 { grid-template-columns: 1fr;}
  .mini-cards.cols-4 { grid-template-columns: 1fr;}

  /* Final CTA */
  .final-cta { padding: clamp(36px, 6vw, 64px) 0;}
  .final-cta .cta-actions { flex-direction: column; align-items: stretch;}
  .final-cta .cta-actions .btn { justify-content: center;}

  /* stretch is right for a band with several buttons, since it stacks them at
     full width. #first-step has one, and stretching one child turns a
     label-hugging pill into a full-row pill: at 390px this rendered 340px for
     a label 273px wide, with the arrow sitting on empty gold. align-self
     sizes it to its own label and still centres it. */
  #first-step .cta-actions .btn { align-self: center;}

  /* Lightbox */
  .lightbox img { max-width: 95vw; max-height: 80vh;}
  .lb-close { top: 12px; right: 12px; width: 40px; height: 40px;}
  .lb-prev { left: 12px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;}
  .lb-next { right: 12px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;}

  /* Toast */
  .toast { bottom: 14px; right: 14px; left: 14px; text-align: center;}

  /* Booking hero */
  .booking-title { font-size: clamp(1.5rem, 5vw, 2rem);}

  /* 404 hero */
  .fine-hero { padding: 80px 0 36px;}

  /* Legal */
  .legal-hero { padding: 72px 0 24px;}
  .legal-hero .container, .legal-body .container { max-width: 100%;}

  /* Intake chat */
  .chat-messages { min-height: 240px; max-height: 340px; padding: 16px 12px; gap: 10px;}
  .chat-msg { max-width: 92%; font-size: 0.85rem; padding: 10px 14px;}

  /* Packages pricing cards full-width on mobile */
  .packages-grid { grid-template-columns: 1fr; gap: 16px;}
  .packages-grid .service-card > .body { padding: 16px;}
  .packages-grid .service-card .check-list li { font-size: 0.82rem; line-height: 1.5;}

  /* Packages responsive */
  .faq-item summary { padding: 14px 16px; font-size: 0.9rem;}
  .faq-item summary::after { width: 28px; height: 28px; font-size: 1.2rem;}
  .faq-item p { padding: 0 16px 14px;}
}

/* ---- Tiny (≤375px) ---- */
@media (max-width: 375px) {
  .hero h1 { font-size: clamp(1.4rem, 8vw, 1.8rem);}
  .hero-visual { max-width: 220px;}
  .hero-stat-card { min-width: 0; padding: 10px 12px;}
  .stat-number { font-size: 1.3rem;}
  .stat-icon { width: 28px; height: 28px; border-radius: 8px;}
  .stat-icon .ph { font-size: 0.8rem;}

  /* The padding cuts above are height cuts too: with 11px padding and 0.7rem
     type a button measured 35px tall, and the ≤320 block trims it again. That
     is under the 44px a finger needs, and it hit the two full-width toggles
     ("View More Reviews", "View All Credentials") that people tap most. The
     floor keeps the compact padding and only forbids the height falling below
     a tappable size; content stays centred by the existing flex rule. */
  .btn { padding: 11px 18px; font-size: 0.7rem; min-height: 44px;}
  .btn-gold { padding: 12px 22px; font-size: 0.75rem;}
  .btn-outline-dark { padding: 12px 22px; font-size: 0.75rem;}

  .container { width: min(100% - 20px, 1200px);}

  .nav-list a { font-size: 0.95rem; padding: 0 16px; height: 50px;}
  .dropdown li a { font-size: 0.8rem; padding: 0 16px 0 28px; height: 42px;}

  .trans-scroll { grid-auto-columns: min(70vw, 260px);}

  .testi-card { padding: 16px;}

  .hero-actions { gap: 8px;}

  .lead-panel { padding: 16px; gap: 16px;}
  .lead-panel .media { max-width: 100%; border-radius: var(--radius-md);}

  .mini-card .body { padding: 12px;}
  .mini-card .media { aspect-ratio: 16/10;}
}

/* ---- Extremely small (≤320px) ---- */
@media (max-width: 320px) {
  :root { --gutter: 16px;}

  .hero h1 { font-size: 1.3rem;}
  .hero-visual { max-width: 200px;}
  .hero-trust { flex-direction: column; align-items: center; gap: 0.6em;}

  .container { width: min(100% - 16px, 1200px);}

  .nav-mobile-head { padding: 12px 16px;}
  .nav-list a { font-size: 0.9rem; padding: 0 16px; height: 48px;}
  .dropdown li a { font-size: 0.8rem; padding: 0 16px 0 28px; height: 40px;}
  .nav-mobile-cta { padding: 12px 16px;}

  .section-head h2 { font-size: 1.2rem;}
  .h-section { font-size: 1.3rem;}
  .h-display { font-size: clamp(2rem, 8vw, 3rem);}
  .h-mid { font-size: clamp(1.2rem, 5vw, 1.6rem);}

  .btn { padding: 10px 16px; font-size: 0.68rem;}

  .authority-inner { grid-template-columns: 1fr 1fr; gap: 6px;}
  .auth-item b { font-size: 1rem;}
  .auth-item span { font-size: 0.55rem; letter-spacing: 0.1em;}

  .why-item { padding: 14px 16px; gap: 10px;}

  .contact-form-wrap { padding: 12px;}
  .contact-info-card { padding: 10px; gap: 8px;}
  .cic-icon { width: 32px; height: 32px;}
  .cic-value { font-size: 0.82rem;}
  .cic-label { font-size: 0.6rem;}

  /* Cert Gallery */
  .cert-gallery { grid-template-columns: repeat(2, 1fr); gap: 8px;}

  .foot-main { gap: 14px 10px;}
  .site-footer .foot-email { font-size: 0.8rem;}
  .socials a { width: 38px; height: 38px;}

  .trans-scroll { grid-auto-columns: min(75vw, 240px); gap: 12px;}
  .stage { padding: 16px;}
  .stage .st-num { font-size: 1.8rem;}
  .stage h3 { font-size: 1.1rem;}
  .stage li { font-size: 0.85rem;}

  .testi-card { padding: 16px;}
  .testi-card blockquote { font-size: 1rem;}

  .program-body { padding: 16px;}
  .program-meta .chip { font-size: 0.7rem; padding: 5px 10px;}
}

/* ---- Desktop-only flips ---- */
/* About Sections 01 and 02: photo on the right, copy on the left. Kept above
   768px so the phone layout still stacks the photo above the text, which is
   what the single-column .story-grid rule at max-width:768px already gives us. */
@media (min-width: 769px) {
  #journey .story-grid > .story-media,
  #about-coach .story-grid > .story-media { order: 2;}
  #journey .story-grid > div:not(.story-media),
  #about-coach .story-grid > div:not(.story-media) { order: 1;}
}

/* ---- Headings held to a single line, every page (769px and up) ----
   Two home headings were the only ones breaking to a second line, and each
   needed a different amount of shrink, so both caps come from measured text
   widths rather than a guess:

   "Leading Shouldn't Cost Your Well-being" sits in .philosophy-detail, a
   fixed 820px column (measured constant from an 800px to a 1404px container).
   Its text needs 17.83px of width per px of type, so 820/17.83 = 45.9px is the
   ceiling. Capped at 45px for a little slack. The 3.1vw slope only matters
   below 1452px and keeps the fit intact down to 852px, where the fixed column
   stops being the constraint.

   "Take the First Step toward Your Growth" spans the full container, so its
   ceiling tracks the viewport: font <= (100vw - 32px)/17.6. A 5.3vw slope
   satisfies that from ~769px up, capped at 76px so it never outgrows the
   container at 1472px where .container stops widening.

   Both floors sit below where their slope lands at 769px, so the slope always
   governs on desktop and a min can never quietly re-break a heading. The
   1.6rem .h-section floor exists for "How We Can Grow Together.", which sits
   in a half-width grid column (~345px at 769px) and needs 12.88px of width
   per px of type; 26.4px of type is the most that fits there.

   Site-wide rather than .home-page-scoped, but it still only has to win on
   source order: breakpoints.css is linked last on every page, after
   design-tokens.css where the scale lives, so equal specificity is enough.
   Below 769px the phone scale in this same file
   (.h-section 1.3rem, .h-display clamp(2rem,8vw,3rem)) takes over and wraps
   normally, which is unavoidable at phone widths. */
@media (min-width: 769px) {
  .h-section { font-size: clamp(1.6rem, 3.1vw, 36px);}

  /* The same ladder, and the same numbers. .h-display was clamp(2.4rem, 5.3vw,
     76px), which is what put the closing band at 68.7px on twenty-two pages
     while index.html carried an identical copy of that band at 36px - two
     sizes for one component depending only on which page it was on.

     .h-display serves two roles, the page hero and the closing band, and they
     are split two lines below by h1 + .gs-up rather than by a second ladder:
     bands are h2 and carry .gs-up, heroes are h1 and do not. */
  .h-display { font-size: clamp(1.6rem, 3.1vw, 36px);}
  .h-mid { font-size: clamp(1.6rem, 3.1vw, 36px);}

  /* The page hero. Home's headline is a flat 50px from 769px up (see the
     @media block at page-overrides.css:1993); this is that figure applied to
     the .display.h-display h1 the other banners open with, which was landing
     anywhere from 41.5px to 68.7px depending on which per-page ceiling it hit.

     The h1 is load-bearing. The closing bands share .display.h-display with
     the heroes but are h2 and .gs-up, so they miss this rule and stay on the
     36px ladder above - without the h1 both halves would collapse to 50px. */
  h1.display.h-display { font-size: 50px;}
}

/* ---- Per-page one-line ceilings: retired ----
   This block used to hold seven per-page font-size ceilings. Each was measured
   the same way: read the heading's container width and its unwrapped text
   width, derive the px of column per px of type, and take 96% of the resulting
   one-line font. They were:

     services   .split-copy .h-section        673px column, one line at 37.4px
     corporate  .split-copy .h-section        509px column, one line at 24px
     resources  .section-head.narrow-md       720px measure, one line at 44.3px
     legal      .legal-hero .h-display        760px measure, one line at 71.2px
     packages   .section-head .h-section      984px measure, one line at 47.7px
     packages   .final-cta .h-display         727px measure, one line at 40.8px
     services   .final-cta .h-display         needs 22.904em of string

   All seven are gone because the scale they were carved out of is gone. Headings
   now run off the home page's ladder - clamp(1.6rem, 3.1vw, 36px) for section
   level, 50px flat for the page hero - and every one of those measured ceilings
   sat ABOVE 36px except corporate's.

   Six of the seven therefore stop binding on their own: 36px is below 37.4,
   44.3, 71.2, 47.7 and 40.8, and the services band was already coming down from
   56px. What the ceilings were doing was making these headings LARGER than the
   shared scale, not smaller - they were the reason packages read at 45px and the
   closing bands at 68.7px on every page except home.

   corporate's 24px is the one that changes behaviour rather than size. Its
   string is still the longest on the site and still sits in a 509px split
   column, so at 36px it now sets on two lines instead of one. That is the
   trade: a single uniform section size across all twenty-five pages against one
   heading holding a single line. Home's own .split-copy headings wrap, and a
   43-character sentence in a half-width column reading over two lines is the
   normal result of putting it at the same size as everything else. The line box
   is line-height 1.05 from the h1-h6 block in design-tokens.css, so the second
   line does not collide with anything below it. */
@media (min-width: 769px) {

  /* Packages: closing CTA band, the desktop half only.
     page-overrides.css carries five phone rungs for this one selector at
     (0,3,0) - a 1.6rem cap at the base, then 481-576, 577-768, max-320 - and
     the desktop half used to live in the retired block above. With that gone
     the 1.6rem cap is the last rule to match above 769px, so the band rendered
     at 25.6px where every other closing band on the site reads 36px: the same
     string in the same .final-cta band at a third of the size.

     The value is the .h-display ladder from the block above, which is the home
     page's own. Restated for this selector rather than folded into the
     .home-page :is(...) ladder because that rule is gated on the .home-page
     body class, and widening it would drag every other heading on packages
     along with it. */
  .page-packages #first-step .h-display {
    font-size: clamp(1.6rem, 3.1vw, 36px);
  }

  /* Services: the seven work-on cards, three across above 769px.
     .why-list has no column count in its base rule, so it is one column by
     default and nothing overrides it at any width. Seven cards is too many for
     three columns to look intentional on a tablet, so the count only changes once
     the cards can carry a readable measure, which is the same 769px the shared
     rules use. Below that they stack full width, which suits one sentence each. */
  .page-services .svc-areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

/* ---- Packages: three-across grids above the phone breakpoint ----
   Both grids are reused components written for a different number of children, and
   both defaults are wrong for three. One argument each fixes them.

   .steps-grid is built for five steps and its base rule is five columns. That is
   wrong twice over here, and the first time was measured, not reasoned about: the
   component's own overrides sit in the max-width: 576px and max-width: 480px
   blocks, so between 481px and 768px NO override applies and the grid falls back
   to five. Three stage cards then rendered as five tracks of roughly 130px each,
   and all three titles wrapped to two lines. services.html and
   corporate-wellbeing.html have the same latent fault at the same widths.

   So this is written as one column first and three above 681px, not as a
   min-width: 769px override. 681px is where three columns of 200px plus the 48px
   of gaps first fit, and 200px is the width below which "Immediate
   Stabilization" starts wrapping. This is deliberately its own number rather than
   769px, which is the width the .why-list below uses.

   .why-list has no column count in its base rule, so it is one column by default
   and nothing overrides it at any width. Three across above 769px is all it
   needs; the three tool descriptions are long enough that three columns under that
   would be narrower than the text is comfortable in.

   .page-services .svc-stages below is the same fault on a second page, so it is
   one more argument on the same component rather than a new grid. The three
   transformation stages are three items in a five-column component. */
.page-packages .steps-grid { grid-template-columns: 1fr;}
.page-packages .why-list { grid-template-columns: 1fr;}
.page-services .svc-stages { grid-template-columns: 1fr;}

@media (min-width: 940px) {
  .page-packages .steps-grid { grid-template-columns: repeat(3, minmax(0, 1fr));}
  .page-services .svc-stages { grid-template-columns: repeat(3, minmax(0, 1fr));}
}
@media (min-width: 940px) {
  .page-packages .why-list { grid-template-columns: repeat(3, minmax(0, 1fr));}
}

/* ---------- Column counts raised off the dip widths ----------

   Every grid on the site was swept for a DIP: a width where an item is narrower
   than it is at the widths either side. Four more turned up beyond the .split
   fix, all the same fault - a column count that survived into a band where the
   resulting card was too narrow to hold its own text.

   Measured, and all of them multi-column:

     services   .steps-grid.svc-stages  700px -> 166px per card
     packages   .steps-grid             700px -> 166px per card
     resources  .mini-cards.cols-4      820px -> 151px   1025px -> 187px
     programs   .spec                   820px -> 137px
     index      .work-options          1025px -> 183px

   The two steps grids were the sharpest. Three columns started at 681px, and
   the comment directly above that rule says the descriptions are long enough
   that three columns under some width "would be narrower than the text is
   comfortable in" - 681px is that width. Three cards across the full container
   need about 940px to clear 240px each; below that they are one column.

   .work-options needed 1280px rather than 940 because it is the one grid that
   sits inside another: two cards in .split-copy, which is itself half of a
   .split. Two half-width decisions multiplied, which is what took those cards to
   142px before the .split fix. Above 1024px the split is still two column, so
   the cards need the full 1280px before two across is worth it.

   .spec is the worst of the four at 137px: two columns inside a program panel,
   so the label and the value each got 137px to sit in.

   Values are unchanged, only the width at which each kicks in. */
@media (max-width: 1280px) {
  .work-options { grid-template-columns: 1fr;}
}
@media (max-width: 1200px) {
  .mini-cards.cols-4 { grid-template-columns: repeat(2, 1fr);}
}

/* The three threshold corrections this sweep finished on. Each is the same
   fault at a different width: a column count that started at a viewport too
   narrow to carry it, so a band just above the boundary ran columns that were
   narrower than they were one pixel below it.

     .svc-areas         services.html      769px  191px per card
     .social-hooks-grid resources.html     769px  191px per card
     .contact-grid      contact.html      1101px 198px per field
     .spec              programs.html     1201px 209px per cell

   Both 769px cases are the identical arithmetic: three columns inside a
   container that is 84% of the viewport, so each card needs a viewport of
   about 934px before it clears 240px. Three across starts at 940px now, and
   the two-column default carries the tablet range instead of three squeezed
   cards. .contact-grid hands the form the whole container 200px earlier, and
   .spec gives up its second column at 1400px rather than 1200px.

   .spec needed the largest move because it is nested: two columns inside a
   program panel, so it inherits a fraction of the container growth and needs
   200px of viewport to gain the 31px of column it was short. */
/* The lead panel stacks at 760px, not 576px.

   .lead-panel is display: flex with .media at flex-shrink: 0 and max-width 280px,
   so the image holds 280px at every width. The text half is the other flex item
   and its floor is its own min-content width, 221px. With the 24px gap the two
   columns need 525px of inner width before they fit, and the inner width only
   reaches 525px at about a 730px viewport.

   So from 577px to 730px the panel was always overflowing. Measured on
   resources.html at 600px: panel 462px, inner 402px, children 280 + 24 + 221 =
   525px, so the text column ran 124px past the panel's content box and 30px off
   the viewport, where body { overflow-x: hidden} cut it. The free-guide panel
   was losing the right-hand third of its text on a whole band of tablet widths,
   and nothing reported it because a clipped element is exactly what a
   scrollWidth check cannot see.

   760px is above the 730px crossover, with margin. min-width: 0 is not added to
   the text half because stacking is what is wanted here, not a squeezed column:
   at 600px the two columns side by side would leave the copy 98px wide. */
@media (max-width: 760px) {
  .lead-panel { flex-direction: column;}
  .lead-panel .media { max-width: 100%;}
}

/* Blog: the View More control, and why it stops at 1200px.

   #additional holds three notes in .mini-cards, which is three columns at
   1201px and up and two below that. So above 1200px all three already sit in
   one row and there is nothing to reveal: the button is not drawn at all and
   every note is visible. Below it the third note is held back until asked for,
   which keeps a phone from opening on a page three times longer than it needs
   to be.

   The hidden state is done in CSS rather than with the hidden attribute,
   because whether a note starts hidden depends on the width and an attribute
   cannot answer that. It also could not have worked as an attribute anyway:
   .mini-card is display: flex in its base rule, and an author display beats
   the UA sheet's [hidden] whatever its specificity, so a card marked hidden
   stayed 453px tall in the grid and the button moved nothing. Both rules here
   are above .mini-card in specificity, and both name display: flex rather than
   block so a revealed card keeps the layout it had while it was visible. */
@media (min-width: 1201px) {
  #blog-view-more { display: none;}
}
@media (max-width: 1200px) {
  #additional .blog-extra { display: none;}
  #additional.is-expanded .blog-extra { display: flex;}
}

@media (max-width: 949px) {
  .page-services .svc-areas { grid-template-columns: 1fr;}
}
@media (min-width: 950px) {
  .social-hooks-grid { grid-template-columns: repeat(3, minmax(0, 1fr));}
}

/* Poem verse: put the authored lineation back.
   560px is measured, not guessed. The longest authored line needs 365px of
   measure and the poem column is 84% of the viewport, so this is the first width
   at which every one of them fits without being broken again. Below it the spans
   stay inline and the poem reads as prose, which is the right trade: an orphaned
   single word is a worse fault than a line sitting where the poet did not put it.
   The base rule for .poem-line is inline in page-overrides.css. */
@media (min-width: 560px) {
  .poem-line { display: block; }
}
/* .spec used to need a max-width query here, at 1400px. It does not: the
   component is now one column in its base rule in layout.css, because its
   container stops growing at 492px and never offers a second column room. */
@media (max-width: 1300px) {
  .contact-grid { grid-template-columns: 1fr;}
}

/* The last two dips, both 24 credentials and 6 social cards sitting at 480px.

   .qual-list went to one column at 480px and .social-hooks-grid did the same.
   But two columns do not become readable at 481px: measured, they are 175px
   and 197px there, against 225px at 600px and 267px at 700px. Both need about
   645px of viewport before a column clears 240px, so the one-column step moves
   from 480px to 644px. On .qual-list the original 480px comment was already
   making this argument - two columns leave roughly 130px of text once the
   inset and the marker are taken out - it had just picked the wrong width to
   stop at. */
@media (max-width: 644px) {
  .qual-list { grid-template-columns: minmax(0, 1fr);}
}

/* Two more, both found by the same sweep.

   .steps-grid was the worst on the site. Its BASE rule was repeat(5, 1fr) and
   nothing reduced it until the 480px step, so from 481px to desktop it ran five
   columns. Measured on corporate-wellbeing.html at 600px:

     .steps-grid  width 462px  five tracks of 73px

   Seventy-three pixels per column, on a tablet. Only corporate-wellbeing uses
   the base - packages.html and services.html both carry .page-* overrides that
   win on specificity and were tuned separately - so this corrects the component
   without touching those two pages. The five columns were also unreachable in
   principle: .steps-grid caps itself at max-width 1200px, so five tracks top
   out at 221px even on a wide monitor. The base is now three columns in
   layout.css, which leaves only the two ladder steps below.

   .contact-grid is the nesting fault again. It held the form in a 466px column
   beside a 311px panel at 1025px, and .form-row then split that 466px in two,
   giving 183px input fields on a laptop. Collapsing the grid hands the form
   the whole container and the row gets 380px each. */

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

/* The steps ladder is 3 / 2 / 1 and both thresholds are derived from measured
   column widths rather than from a round guess.

   Three columns: measured at 1100px they are 278px and at 950px they would be
   236px, so 950px is where the two-column step starts.
   Two columns: measured at 700px they are 261px and at 640px they are 236px,
   so one column takes over below 650px, where it has the whole 496px.
   The step used to sit at 480px, which left 481px to 649px running two 169px
   tracks - the last dip this sweep found. It was hiding in the same component
   that carried the five-column base, and fixing the base without re-measuring
   the ladder would have shipped a new dip at every boundary. */
@media (max-width: 649px) {
  .steps-grid { grid-template-columns: 1fr;}
}

/* ---- Legal page: TOC placement ----
   Desktop keeps the two-column grid from page-overrides.css. The hero is NOT
   offset by the TOC width: indenting it squeezed the h1 into the 500px reading
   column, where "Privacy, terms & cookies." needs 726px and wrapped to two
   lines. Letting the hero span the full 812px container gives it back its
   width, and it starts from the page's own left edge like every other page.

   Below 1024px the grid collapses to one column and the TOC becomes a static
   block above the copy, set in two columns so fourteen entries do not push the
   first paragraph a long way down. */
@media (max-width: 1024px) {
  /* Collapsing to one column left the container at its full 812px, which put the
     measure at 112-122 characters on tablets: the widest on the whole site.
     500px keeps it near 75 characters, and keeps the copy flush with the hero
     title above it rather than floating in the middle of the container. */
  .legal-body .container { max-width: 500px;}
  /* The hero is a title, not running copy, so it is allowed to be wider than
     the reading column below it. 640px leaves the 25-character h1 enough room
     to stay on one line at 1024px, where 4.74vw resolves to 48.6px and needs
     519px. */
  .legal-hero .container { max-width: 640px;}
  .legal-body .legal-grid { grid-template-columns: 1fr; gap: 32px;}
  .legal-toc { position: static;}
  .legal-toc ul { columns: 2; column-gap: 28px;}
  .legal-toc a { break-inside: avoid;}
}
@media (max-width: 600px) {
  .legal-toc ul { columns: 1;}
}

/* ---- Floating WhatsApp ---- */
@media (max-width: 768px) {
  .wa-float { width: 52px; height: 52px; right: 14px;}
  .wa-float svg { width: 26px; height: 26px;}
}
@media (max-width: 480px) {
  .wa-float { width: 48px; height: 48px; right: 12px;}
  .wa-float svg { width: 24px; height: 24px;}
}

/* ---- Floating booking ---- */
@media (max-width: 768px) {
  .book-float { width: 52px; height: 52px; right: 14px; bottom: calc(88px + env(safe-area-inset-bottom, 0px));}
  .book-float svg { width: 24px; height: 24px;}
}
@media (max-width: 480px) {
  .book-float { width: 48px; height: 48px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px));}
  .book-float svg { width: 22px; height: 22px;}
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;}
  .gs-up, .gs-fade, .gs-scale { opacity: 1 !important; transform: none !important;}
  .hero-eyebrow, .hero-headline, .hero-desc, .hero-actions a, .trust-item, .hero-stat-card, .hero-badge, .hero-figure img, .hero-glow {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}
}

/* ---- Print ---- */
@media print {
  .site-header, .mobile-cta, .hero-blob, .lightbox, .wa-float, .book-float { display: none !important;}
  .hero { min-height: auto; padding: 20px 0;}
  .gs-up, .gs-fade, .gs-scale { opacity: 1 !important; transform: none !important;}
  body { padding-bottom: 0 !important;}
}

/* ---- Extra side width on every section ----
   --section-inset is half of --page-pad, so it lands on a true 3cm (113.4px) a
   side once the viewport is past about 1418px and scales down below that:
   26px a side at 320, 31px at 390, 61px at 768.

   This lives at the end of the file, not in design-tokens.css, because every
   .section rule that sets padding does it with the `padding` shorthand and puts
   0 on the inline axis - breakpoints.css alone has three, at the 768px, 576px
   and 375px steps - and those files load later. Measured with the rule in
   design-tokens.css it computed to 0px on every width, because the shorthand
   wiped it. Last position wins the tie at equal specificity.

   The padding is on the section, not on .container, so each section's background
   and any full-bleed child still span the whole viewport while the content is
   inset. That was the ask: the extra width comes from the sections. Headings
   are deliberately left alone. */
.section {
  padding-inline: var(--section-inset);
}

/* ---- Home page: one heading size for every heading ----
   On index.html the thirteen section-level headings came out at four different
   sizes at 1446px, because four unrelated rules each owned one of them:

     22.0px  #meet .welcome-title          (id rule, page-overrides.css)
     43.2px  the .h-section inside .split-copy
     44.5px  the nine .h-section in .section-head
     76.0px  the two .h-display closing bands

   The section-head headings were already consistent with each other and are the
   reference here, so this block pins the other three families to that scale
   rather than restating a new size. The ladder below is deliberately the same
   sequence the shared scale already uses - 45px cap above 769px, then
   clamp(1.6rem,5vw,2.2rem) at 768, clamp(1.4rem,5vw,1.8rem) at 576,
   clamp(1.25rem,5vw,1.6rem) at 480 and a flat 1.2rem at 320 - so the nine
   headings that were already right do not move by a single pixel.

   :is() carries the whole family, and #meet .welcome-title is inside it on
   purpose: an id selector outranks the .home-page class that wraps the rest, so
   leaving it out would keep that one heading pinned at 22px. The id it pulls in
   also raises the block to (1,2,1), which is what beats the 22px rule in
   page-overrides.css without needing !important.

   Scoped to .home-page, so the other 23 pages keep their own closing bands. */
.home-page :is(.section-head h2, .h-section, .h-display, .welcome-title, #meet .welcome-title) {
  font-size: clamp(1.25rem, 5vw, 1.6rem);
}
@media (min-width: 481px) and (max-width: 576px) {
  .home-page :is(.section-head h2, .h-section, .h-display, .welcome-title, #meet .welcome-title) {
    font-size: clamp(1.4rem, 5vw, 1.8rem);
}
}
@media (min-width: 577px) and (max-width: 768px) {
  .home-page :is(.section-head h2, .h-section, .h-display, .welcome-title, #meet .welcome-title) {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
}
}
@media (min-width: 769px) {
  .home-page :is(.section-head h2, .h-section, .h-display, .welcome-title, #meet .welcome-title) {
    font-size: clamp(1.6rem, 3.1vw, 36px);
}
}
@media (max-width: 320px) {
  .home-page :is(.section-head h2, .h-section, .h-display, .welcome-title, #meet .welcome-title) {
    font-size: 1.2rem;
}
}