/* ==========================================================================
   Elimination Station — Responsive breakpoints (mobile-first overrides)
   ========================================================================== */

@media (max-width: 900px) {
  .cards-grid { grid-template-columns: 1fr; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .downloads-grid { grid-template-columns: 1fr; }
  /* Mobile footer: logo + blurb full width on top, then a two-column row with
     the nav on the left and "Follow along" above the business info on the
     right. The copyright sits outside .footer-inner, already full width under
     both. Columns are uneven because the right one carries the address and a
     28-character email while the nav labels are short. */
  .footer-inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 26px 20px;
    /* Everything reads flush left now -- the nav column, "Follow along" and the
       business info under it. Only the copyright below stays centred. */
    text-align: left;
    /* stretch (not the desktop `start`) so both columns take the full row height
       and the divider spans it regardless of which column happens to be taller. */
    align-items: stretch;
  }
  /* Mobile only: spans both columns so the blurb runs the full width. Desktop
     keeps it in column one alongside nav / social / business info. */
  .footer-about {
    grid-column: 1 / -1;
    align-items: flex-start;
    gap: 14px;
  }
  .footer-logo img { max-width: 190px; }
  /* The About blurb's extra sentences are desktop-only -- the narrow footer
     column would run them to six lines. Hiding the tail leaves exactly the
     short version, with no duplicated copy in the markup. */
  .blurb-more { display: none; }
  /* The forced breaks are tuned to the wide desktop column. On the narrow one
     they strand single words, so let the short version wrap naturally instead --
     each break has a space in front of it, so the sentence still reads right. */
  .footer-blurb br { display: none; }
  .footer-links { grid-column: 1; }
  /* Back to a real box here, so social and the business info share one cell
     instead of becoming separate grid items as they do on desktop. */
  .footer-contact {
    grid-column: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    /* Space between the hairline divider and this column's text. The divider is
       absolutely positioned against this box's left edge, so padding moves the
       content without moving the rule. */
    padding-left: 14px;
  }
  /* Divider hairline, centred in the 20px column gap. Positioned rather than a
     border with padding: both columns are already tight for their content (the
     email alone wants 206px), and this way the rule costs them no width. Same
     weight and tint the footer used for its horizontal rule. top/bottom 0 spans
     the whole row because the columns stretch. */
  .footer-contact::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(247, 244, 238, 0.13);
  }
  .footer-nav,
  .footer-social { align-items: flex-start; }
  .split-media { grid-template-columns: 1fr; }
  /* Stacks to a single column: questions 1-3 then 4-6, original order. */
  .faq-columns { grid-template-columns: 1fr; }
  /* Stacked: text above video, as before. */
  /* Stacked: the float is dropped so the video sits full width at the top and
     the copy runs beneath it, still inside the one card. */
  .results-video {
    float: none;
    width: 100%;
    margin: 0 0 22px;
  }
  /* Two reviews visible on tablet. */
  .reviews-track > .testimonial-card { flex-basis: calc((100% - 20px) / 2); }

  /* Stacked, both images get a little more room but stay fully visible. */
  .science-figure img { max-height: 520px; }
  .product-figure img { max-height: 340px; }


  /* Stacked: text card on top, photo beneath. The frame needs a definite
     height here -- once it is no longer stretched by a grid row, the image's
     height:100% would resolve against an auto height and collapse to zero. */
  .text-media { grid-template-columns: 1fr; gap: 24px; }
  /* Stacks text-then-image in source order, same as .text-media above, with the
     same 24px between them so nothing butts together. The width is capped and
     centred rather than letting a 4:5 photo run the full width -- at 820px that
     produced a 772x360 letterbox that cropped the hands out of the frame. */
  .aftercare-grid { grid-template-columns: 1fr; gap: 24px; }
  /* Stacked there is no sibling column to match, and the image is absolutely
     positioned, so the figure needs a definite box of its own or it collapses.
     Centred via justify-self, not auto margins: auto margins make a stretched
     grid item shrink to its content, which here is nothing, giving it 0 width. */
  .aftercare-media {
    width: 100%;
    max-width: 400px;
    justify-self: center;
    aspect-ratio: 4 / 5;
  }
  /* Stacked, there is no sibling column to match, so give the frame a definite
     height -- its image is absolutely positioned and would otherwise collapse. */
  .media-frame { height: 340px; }

  .card-duo { grid-template-columns: 1fr; }

  /* Treatment Process photos: <figure> has no reset in this codebase, so it
     keeps the UA default margin: 1em 40px, and .mt-0 only zeroes the top. Once
     the column stacks that cost 40px a side out of 318px -- a quarter of the
     width. Desktop keeps the inset. */
  #treatment-process figure {
    margin-left: 0;
    margin-right: 0;
  }
  /* The source is 569px wide, so between roughly 640px and 900px the column is
     wider than the image can fill. Centre it rather than letting it sit left
     with all the slack on one side; stretching it would only blur it. */
  #treatment-process figure img {
    margin-left: auto;
    margin-right: auto;
  }

  /* About intro stacks: portrait on top at its original 340px, centred, then
     the heading and opening lines beneath it. */
  .about-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-portrait {
    width: 100%;
    max-width: 340px;
    justify-self: center;
  }
}

@media (max-width: 800px) {
  /* The full tagline used to be hidden here because it wrapped to three cramped
     lines beside the icons. The marquee scrolls it on one nowrap line instead,
     so phones can show the whole message again. */
  .top-strip .tagline { font-size: 0.64rem; font-style: normal; }

  /* The nav collapses to the hamburger at this width, freeing the whole middle
     of the header, so the lockup can carry more presence than on desktop. */
  .logo-lockup { height: 40px; }
  .marquee-track > * { padding-right: 2.25rem; }

  /* Softer than the default h2 clamp so the sage banner isn't overwhelming. */
  .banner-heading { font-size: clamp(1.25rem, 5vw, 1.7rem); }

  .section { padding-top: 36px; padding-bottom: 40px; }
  .section--tight { padding-top: 26px; padding-bottom: 30px; }

  /* How It Works scopes its own uniform gap in main.css at (0,2,0), which
     outranks the two rules above -- so its mobile value has to be set at
     matching specificity here or the page keeps the desktop figure.
     24px both edges -> 48px gaps; 20px -> 40px, which is the phone value. */
  .page-hiw .section,
  .page-hiw .section--tight { padding-top: 20px; padding-bottom: 20px; }
  .page-hiw .hero { padding-bottom: 20px; }
  .page-hiw #immune { margin-top: 40px; }
  .page-hiw .section--sage { margin-top: 20px; margin-bottom: 20px; }
  .hero { padding-top: 40px; padding-bottom: 48px; }

  /* A landscape photo crops hard into a tall phone viewport, so ease the
     min-height and run the wash vertically rather than left-to-right.
     The old even 0.88-0.93 wash was the desktop's *left-hand* strength applied
     everywhere -- but desktop only holds that over the blank wall and eases to
     0.66 across the plant and candle, which is why the photo read on desktop and
     vanished on phones. Here the wash is heaviest through the middle band where
     the heading, lede and buttons sit, and lifts at the top and bottom edges so
     the photo is actually visible. */
  .hero-bg {
    min-height: 380px;
    background-position: 72% center;
  }
  /* Measured: the text block occupies 9%-79% of the hero's height, so the heavy
     band covers exactly that and the light ends fall where nothing sits. */
  .hero-bg::before {
    background: linear-gradient(
      to bottom,
      rgba(247, 244, 238, 0.52) 0%,
      rgba(247, 244, 238, 0.8) 8%,
      rgba(247, 244, 238, 0.8) 80%,
      rgba(247, 244, 238, 0.48) 100%
    );
  }
  /* The outline button has no fill, so the photo reads straight through its
     label -- it measured 2.4:1 against the sideboard once the wash was eased.
     A frosted fill fixes just that button instead of darkening the whole hero
     back down and losing the photo again. */
  /* Even both edges on the narrow measure -- centred, the rag left every line a
     different length. text-align-last keeps the closing line centred so the
     block still reads as a centred lockup, and hyphens stop justification from
     opening rivers between words. */
  .panel-intro {
    text-align: justify;
    text-align-last: center;
    hyphens: auto;
  }

  .hero-actions .btn-secondary { background: var(--cream); }
  .hero-actions .btn-secondary:hover { background: var(--blush); }
  .card { padding: 24px 20px 28px; }

  /* Stop buttons/cards butting straight up against whatever follows them. */
  .hero-actions { margin-bottom: 10px; }
  .feature-photo { margin: 28px 0; }
  .callout { margin: 24px 0; }

  .tabs { gap: 4px; }
  .tab-btn { padding: 10px 14px; font-size: 0.92rem; }

  /* Sit the panel directly under the header rather than covering it, so the
     logo and the close button stay visible and tappable. */
  /* `.site-header` uses backdrop-filter, which makes it the containing block
     for position:fixed descendants -- so `fixed` here resolved against the
     ~90px header, not the viewport, collapsing the panel to a tiny scroller.
     Anchor it to the header on purpose instead, and let the height hug the
     content so it only scrolls when the items genuinely do not fit. */
  .site-nav {
    position: absolute;
    /* Grid (not flex) so the CTA and phone link can share one row while the
       six nav links each span the full width above them. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    align-content: start;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - var(--header-h, 96px) - 8px);
    max-height: calc(100dvh - var(--header-h, 96px) - 8px);
    background: var(--deep-charcoal);
    border-top: 1px solid rgba(247, 244, 238, 0.08);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.35);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(247, 244, 238, 0.28) transparent;
    padding: 10px 20px 24px;
    /* Do NOT park this off-screen with translateX(100%): a position:fixed
       element sits in the viewport's containing block, so `overflow-x:hidden`
       on body/html cannot clip it, and a full-width panel pushed 100% to the
       right becomes scrollable area -> horizontal scrollbar on mobile.
       Fade + a short vertical slide keeps the animation with zero x-overflow. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s linear 0.24s;
    z-index: 99;
  }
  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0s;
  }

  .site-nav::-webkit-scrollbar { width: 4px; }
  .site-nav::-webkit-scrollbar-track { background: transparent; }
  .site-nav::-webkit-scrollbar-thumb {
    background: rgba(247, 244, 238, 0.28);
    border-radius: 4px;
  }

  /* Keep the toggle above the panel so it is always clickable. */
  .nav-toggle { position: relative; z-index: 101; }

  /* Matching specificity with the uppercase desktop rule, which is (0,3,1) and
     would otherwise win here. */
  .site-nav a:not(.nav-cta):not(.nav-phone) {
    font-size: 0.9rem;
    letter-spacing: 0.04em;
  }
  .site-nav a {
    grid-column: 1 / -1;   /* nav links stay full width */
    font-size: 0.92rem;
    font-weight: 500;
    text-align: left;
    /* 13px + ~22px line + 13px lands each row at ~48px, so the rows shrink
       without dropping under a comfortable tap target. */
    padding: 13px 14px;
    border: 0;
    border-bottom: 1px solid rgba(247, 244, 238, 0.09);
    border-left: 3px solid transparent;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .site-nav a:hover {
    background: rgba(247, 244, 238, 0.06);
    text-decoration: none;
  }
  .site-nav a[aria-current="page"] {
    color: var(--blush);
    border-left-color: var(--sage);
    background: rgba(122, 139, 111, 0.16);
  }

  /* The header CTA is hidden on mobile, so surface it inside the menu instead
     rather than losing the primary action entirely. It shares a row with the
     phone link: CTA on the left, tap-to-call on the right. */
  .site-nav .nav-cta {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    padding: 12px 14px;
    background: var(--sage);
    color: var(--white);
    border: 0;
    border-radius: var(--radius-btn);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
  }
  .site-nav .nav-cta:hover { background: var(--sage-dark); }

  .site-nav .nav-phone {
    grid-column: 2;
    align-self: center;   /* centre against the taller button beside it */
    display: block;
    margin-top: 20px;
    padding: 10px 4px;
    border: 0;
    text-align: center;
    font-size: 0.84rem;
    line-height: 1.3;
    color: var(--blush);
  }
  .site-nav .nav-phone:hover { background: none; }

  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Header + subnav would both stick to the top and overlap on small screens,
     so let the subnav scroll away naturally instead.
     nowrap keeps all four items on a single line; the size, gap and side padding
     all scale with the viewport so the row still fits at 320px. Vertical padding
     moves onto the links themselves to keep a ~34px tap target at the smaller
     type size. */
  .subnav {
    position: static;
    flex-wrap: nowrap;
    gap: clamp(8px, 2.4vw, 18px);
    padding: 5px clamp(10px, 3vw, 24px);
    /* 0.66rem is what a 320px screen can take; the 3vw term lets everything
       larger scale up rather than being held at the smallest phone's size. */
    font-size: clamp(0.66rem, 3vw, 0.82rem);
  }
  .subnav a {
    white-space: nowrap;
    padding: 10px 0;
  }

  /* Square renders its full scheduler only when its container is >=280px wide,
     otherwise it degrades to a bare "Book Appointment Now" button. Nested
     padding (container + card + embed) was eating ~96px and pushing narrow
     phones under that threshold, so claw those pixels back here. Vertical
     padding is safe - Square only measures horizontal. */
  .scheduler-embed { padding: 16px 0; }
  #appointment > .card { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 640px) {
  /* Horizontal longhands only. The `padding: 0 16px` shorthand also reset
     top/bottom to 0, and since sections are `class="section container"` that
     silently wiped every section's vertical padding below 640px. */
  .container { padding-left: 16px; padding-right: 16px; }

  /* Dropped a step so the brand leads clearly. `balance` evens the rag and, more
     importantly, stops "PA." stranding alone on line 4 at 390px. */
  .hero .lede {
    font-size: 0.97rem;
    line-height: 1.55;
    text-wrap: balance;
  }

  /* Uppercase + letter-spacing makes this run wide; trim it so the pill fits
     on a 320px screen without wrapping. */
  .media-frame { height: 260px; }
  /* One review per swipe on phones. Side gutters would eat ~90px of a 360px
     screen, so the arrows move beneath the row instead (still never over a card). */
  .reviews-track { gap: 14px; }
  .reviews-track > .testimonial-card { flex-basis: 100%; }
  .reviews-carousel {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "track track"
      "prev  next";
    gap: 14px 10px;
  }
  .reviews-carousel .carousel-arrow--prev { justify-self: end; }
  .reviews-carousel .carousel-arrow--next { justify-self: start; }
  /* The gallery arrows drop to 36px on phones because they overlay the photo and
     space is tight. These sit in their own row, so they keep the full 44px tap
     target rather than shrinking further. */
  .reviews-carousel .carousel-arrow { width: 44px; height: 44px; }
  .reviews-track .testimonial-card { min-height: 260px; }

  .tagline-band { padding-top: 20px; }
  .tagline-strip {
    padding: 8px 16px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
  }

  /* 36px puts it at ~202px wide. With the hamburger (24px) and the 24px gap that
     comes to 250px inside the 272px a 320px screen leaves after header padding,
     so it still clears comfortably on the narrowest phones. */
  .logo-lockup { height: 36px; }

  .form-grid { grid-template-columns: 1fr; }
  /* Centred rather than stretched: the buttons size to their own text instead of
     spanning the full column width, which read as oversized next to the label. */
  .hero-actions { flex-direction: column; align-items: center; }

  /* Buttons trimmed further for phones. Height works out at ~43px (10+10 padding
     + ~19px line + 4px border). That is a shade under the 44px guideline, but the
     narrowest button on a phone is still ~170px wide, so the target stays
     comfortable in practice. */
  .btn {
    padding: 10px 18px;
    font-size: 0.88rem;
    gap: 6px;
  }
  .site-nav .nav-cta {
    padding: 12px 12px;
    font-size: 0.84rem;
  }
  .sms-widget span.label { display: none; }
  /* Shrink every child, not just the score: the star row kept its desktop size
     and spilled outside the circle's curve. */
  .rating-badge { width: 112px; height: 112px; padding: 6px; gap: 1px; }
  .rating-badge .stars { font-size: 0.6rem; letter-spacing: 0.5px; }
  .rating-badge .score { font-size: 1.5rem; }
  .rating-badge .rating-label { font-size: 0.58rem; }
  .carousel-thumb { flex-basis: 64px; height: 48px; }
  .carousel-arrow { width: 36px; height: 36px; font-size: 1.3rem; }
  .carousel-slide { height: 260px; }
  /* Single column, and rows back to their natural height -- forcing them equal
     here would pad every box out to the tallest one's height. */
  .promise-list { grid-template-columns: 1fr; grid-auto-rows: auto; }

  /* Labels ease down slightly on the narrower measure. */
  .tabs { flex-wrap: wrap; }
  .tab-btn { flex: 1 1 auto; text-align: center; padding: 10px 8px; font-size: 0.85rem; }
  .map-embed iframe { height: 260px; }
  .cards-grid { gap: 16px; }
  .downloads-grid { gap: 12px; }
  .download-card { padding: 14px; gap: 12px; }

  /* 16px minimum stops iOS Safari from auto-zooming the page on focus. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="file"],
  select,
  textarea { font-size: 16px; }

  /* Icon-only on phones; 11px padding + 20px icon = 42px, still an easy tap. */
  /* Icon-only on phones; 11px padding + 22px icon + 2px border = 46px, a
     comfortable tap target. */
  .sms-widget { right: 14px; bottom: 14px; padding: 11px; gap: 0; }
  .faq-question { padding: 16px; font-size: 0.98rem; }
  .faq-answer { padding: 0 16px 18px; }
  .testimonial-card { padding: 18px; }
  .callout { padding: 16px 18px; }
  /* The fixed "Text us" button occupies the bottom-right 56px of the viewport
     (42px tall + 14px offset). Rather than reserving that whole height as empty
     padding, the copyright is inset on the right so the centred text is steered
     clear of the button horizontally -- see .footer-copy below. */
  .site-footer { padding: 28px 0 26px; }
  .footer-inner {
    padding-left: 18px;
    padding-right: 18px;
  }

  /* Whole footer column steps down a notch on phones. */
  .footer-heading { font-size: 0.88rem; margin-bottom: 6px; }
  .footer-brand p:not(.footer-heading) { margin-bottom: 2px; font-size: 0.78rem; }
  /* Icon discs scale with the text around them. */
  .footer-icons { gap: 8px; }
  .footer-icons a { width: 33px; height: 33px; }
  .footer-icons svg { width: 15px; height: 15px; }
  .footer-blurb { font-size: 0.86rem; }
  .footer-inner { gap: 22px 16px; }
  .footer-contact { gap: 16px; }
  .footer-contact::before { left: -8px; }
  .footer-logo img { max-width: 176px; }

  /* Tighter rows and no left inset, so the labels sit flush with the column
     edge. ~29px tall each -- modest for a tap target, but these are secondary
     footer links, not primary navigation.
     .footer-social a is deliberately NOT in this list: its only links are the
     icon buttons, and `display: inline-block` here was beating the inline-flex
     that centres their glyphs -- which is why they sat off-centre on phones but
     looked fine on desktop, where this rule does not apply. */
  .footer-brand a,
  .footer-nav a {
    display: inline-block;
    padding: 4px 0;
  }
  .footer-nav,
  .footer-social {
    align-items: flex-start;
    gap: 0;
    font-size: 0.8rem;
  }

  .footer-copy {
    margin-top: 18px;
    padding-left: 18px;
    /* Extra right inset shifts the centred line away from the "Text us" button
       now that the footer no longer clears it with height. */
    padding-right: 62px;
  }
}

/* Hero brand name, sized for Playfair Display. The base clamp floors at 2.1rem
   far above phone widths, leaving the name at only ~79% of its column on a 430px
   screen. Playfair sets much wider than the Cormorant this used to be -- 8.99px
   of width per 1px of font-size, against 7.18 -- so the ramp is rebuilt on those
   metrics for a steady ~95% fill on one line:

     320px -> 29px   360px -> 33px   390px -> 36px   430px -> 40px

   min() caps it at the same 4.4rem the base clamp tops out at, reached at ~711px,
   so the 880px edge of this query is seamless (both are 70.4px there) and nothing
   above 880px changes. */
@media (max-width: 880px) {
  .hero-brand { font-size: min(calc(10.64vw - 5.24px), 4.4rem); }
}
}

/* Very narrow phones (~320px): the CTA and phone link genuinely cannot sit
   side by side without cramping, so fall back to stacking them. */
@media (max-width: 359px) {
  /* At 36px the lockup leaves only 6px between itself and the hamburger on a
     320px screen. Ease it back just for these widths. */
  .logo-lockup { height: 32px; }

  .site-nav { grid-template-columns: 1fr; }
  .site-nav .nav-cta,
  .site-nav .nav-phone { grid-column: 1 / -1; }
  .site-nav .nav-phone { margin-top: 10px; }
}