/* ==========================================================================
   SNS Motorcycles — responsive layer
   Section rhythm: desktop 100px · tablet 75px · mobile 50px
   ========================================================================== */

/* --------------------------------------------- Gallery columns  ≤ 1440px

   Three across from 1440 down, four only above it. The client asked for three
   per row at both 1024 and 1440, and at 1440 four tiles of ~320px made the
   frames small enough that the bikes stopped being readable. */
@media (max-width: 1440px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------ Large laptop  ≤ 1200px */
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr; gap: 30px; }
  .brands__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------ Compact in-bar nav  1025px – 1399px */
/* One band owns the whole in-bar nav. It used to be split across breakpoints
   and the seams did not fit: at 1080-1366 the nav list ran into the phone pill
   and "Track Day" broke over two lines.

   What buys the room now is that the entire `.header__cta` leaves the bar
   (below) and the links shrink fluidly with the viewport rather than stepping.

   ⚠️ This band only reaches down to 1025 — at 1024 and below the drawer takes
   over and `.nav__list` is not in the bar at all, so these rules stop mattering
   there. Verified collision-free at every width from 1025 to 1920. */
@media (max-width: 1399px) {
  .header__inner { gap: clamp(10px, 1.4vw, 20px); }
  .nav__link {
    padding: 9px clamp(4px, .78vw, 12px);
    font-size: clamp(.68rem, .82vw, .78rem);
    letter-spacing: .05em;
  }
  .nav__link::after { left: clamp(4px, .78vw, 12px); right: clamp(4px, .78vw, 12px); }

  /* ⚠️ The WHOLE in-bar CTA group goes — phone pill and Book button both.

     At the client's request the phone number is no longer a permanent fixture
     of the bar on laptop, tablet or phone. Below 1400 it lives only in the
     drawer (`.nav__cta`, reached from the three-line button), alongside Book a
     Service. Above 1400 the bar is wide enough for both and they stay.

     It is not lost anywhere: the number is also in the hero, in the Services
     mega-menu aside, in the footer and on the contact page. */
  .header__cta { display: none; }

  /* ---- Footer column order, laptop and tablet only --------------------
     At the client's request the footer reads logo · Our Services · Quick
     Links · Contact here, instead of the desktop logo · Quick Links · Our
     Services · Contact. Four across on laptop; at ≤1024 the grid drops to two
     columns and the same order wraps to logo | Our Services over Quick Links |
     Contact, which is the arrangement in the client's screenshot.

     ⚠️ Done with `order`, not by editing the markup. The footer is duplicated
     into all eleven pages from `partials/footer.php` (§1), so a markup change
     is an eleven-file change plus a re-sync; a four-line CSS rule is not. The
     trade is that `order` moves the boxes visually but not in the DOM, so a
     keyboard or screen-reader user still meets Quick Links before Our
     Services. For two short link lists in a footer that is an acceptable cost —
     do not extend this technique to the nav or to anything interactive.

     ⚠️ nth-child is positional: it assumes the footer's four children stay in
     the order brand, Quick Links, Our Services, Contact. If a column is ever
     added or moved, these numbers must be checked. Reset to DOM order at
     ≤640 (mobile), which the client asked to leave alone. */
  .footer__grid > :nth-child(1) { order: 1; }   /* brand + socials */
  .footer__grid > :nth-child(3) { order: 2; }   /* Our Services   */
  .footer__grid > :nth-child(2) { order: 3; }   /* Quick Links    */
  .footer__grid > :nth-child(4) { order: 4; }   /* Contact Us     */
}
/* ---------------------------------------------------- Tablet  ≤ 1024px */
@media (max-width: 1024px) {
  :root {
    --section-y: 75px;
    --header-h: 86px;
  }

  .brand img { height: 52px; }   /* 136px wide; 2x = 272, inside the 391px file */

  /* --- Layout --- */
  .hero { min-height: 540px; padding-top: calc(var(--header-h) + 64px); padding-bottom: 64px; }
  .hero--home { min-height: 640px; align-items: flex-end; }

  /* ⚠️ The hero keeps BOTH columns down to 900px — see the 899 block below for
     where it finally stacks. Stacking it at 1024 put the form entirely under
     the fold on a 1024x768 laptop, which is the one size where it most needs
     to be seen. What makes two columns work here is a narrower form track
     (320-360 rather than 330-400) and less padding over the hero, so the whole
     card clears the fold. */
  .hero--home { padding-top: calc(var(--header-h) + 40px); }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: clamp(26px, 3vw, 40px);
  }

  /* ⚠️ The approvals band keeps BOTH columns down to 820px — it used to stack
     here at 1024, which put a 340px badge alone on one row with two thirds of
     that row empty and the copy squeezed underneath. That is the "compressed
     into roughly half the page" the client reported. A 300px badge track plus
     a 1fr copy column fits comfortably in the 922px available at 1024; it
     finally stacks in the ≤820 block below. */
  .approvalband__head {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 44px);
  }
  .approvalband__copy .lede { max-width: none; }
  .hero--inner { min-height: 420px; }
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(11,30,61,.94) 0%, rgba(11,30,61,.74) 55%, rgba(11,30,61,.58) 100%),
      linear-gradient(180deg, rgba(11,30,61,.68) 0%, rgba(11,30,61,.10) 35%, rgba(8,20,41,.90) 100%);
  }

  /* Sideways reveals become vertical once columns stack — a ±30px horizontal
     translate on a full-width block would otherwise push past the viewport. */
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translateY(24px); }

  .split,
  .contact-grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }

  /* ⚠️ Stacked blocks give up their print measure.

     Once a two-column block stacks there is nothing beside the copy, so a
     62ch/56ch measure stops being a reading aid and just leaves the other half
     of the row empty — which reads as content that has been cut off. Measured
     before this rule, at 1024: `.body-text` rendered 560px wide with 922px
     available, so 39% of every copy row was blank, on ten of the eleven pages.

     The lines get long here (about 100 characters at 1024). That is the
     deliberate trade, and it is the same one the hero makes at ≤899 below.
     `.section-head` is NOT in this list: it is a single centred block whose
     measure is doing real work at every width. */
  .body-text { max-width: none; }
  .split__copy,
  .split__copy .lede { max-width: none; }
  .mediaband__copy,
  .mediaband__copy .lede { max-width: none; }
  .wcta__copy,
  .wcta__copy .lede { max-width: none; }
  /* nothing else to reset — every `.split` is 1fr / 1fr at every width now, and
     the rule above is the only place that changes it. See the width-modifier
     warning in style.css. */
  /* natural ratio at every width — see .split__media img in style.css */

  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }

  /* Photograph above, service list below */
  .svcband { grid-template-columns: 1fr; }
  .svcband__media { min-height: 0; aspect-ratio: 16 / 9; }
  .svcband__media::after { width: 76px; height: 5px; }
  .svcband__copy { padding-inline: var(--gutter); }

  .trackband__cards { grid-template-columns: repeat(2, 1fr); }
  .tcard__media { aspect-ratio: 16 / 10; }

  /* ⚠️ Two columns, and each item is CENTRED in its cell.

     On the desktop four-across the items sit left of a divider, which is right
     there — the dividers give the row its structure. At two columns the
     dividers go, and left-aligning left each item hugging the left of a half
     that is nearly twice as wide as it needs to be, so the strip read as a
     block of content shoved to one side with a hole down the middle-right.
     Centred, the four sit as a balanced 2 × 2. */
  .svcstrip__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
  .svcstrip__item { border-left: 0; padding: 4px 16px; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(-n+2) { border-top: 0; }

  /* already three from the =1440 block above; kept so the tablet band states
     its own column count rather than inheriting it silently */
  .gallery { grid-template-columns: repeat(3, 1fr); }

  .mediaband { min-height: 380px; }
  /* copy sits across the whole width, so the left-weighted desktop scrim no
     longer covers it — wash the band evenly instead */
  /* Lightened to match the desktop band. Its weakest stop (.64) is still
     denser than the desktop scrim's weakest point (~.54 composited), which
     measured 4.82:1 against the dimmest text — so this stays inside AA. */
  .mediaband__bg::after {
    background: linear-gradient(180deg, rgba(8,17,33,.80) 0%, rgba(8,17,33,.64) 40%, rgba(8,17,33,.84) 100%);
  }

  /* copy spans the band once it stacks, so wash the frame evenly */
  .wcta__bg::after {
    background: linear-gradient(180deg, rgba(8,10,13,.88) 0%, rgba(8,10,13,.76) 42%, rgba(8,10,13,.92) 100%);
  }
  .wcta__points { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
  .wcta__points li:nth-child(odd) { border-left: 0; padding-left: 0; }

  /* the approvals row keeps its three across here — at this width they still
     fit on one line each, and two-plus-one would leave an odd gap */
  .approvalband__points { row-gap: 26px; }

  .pillars { grid-template-columns: repeat(2, 1fr); row-gap: clamp(34px, 5vw, 48px); }
  /* first in each row loses both the divider and the inset that went with it,
     so its numeral stays flush with the container edge */
  .pillar:nth-child(odd) { border-left: 0; padding-left: 0; }

  .mapwrap { height: clamp(320px, 60vw, 460px); }

  /* ⚠️ The brand no longer spans the full row. It used to (`grid-column:
     1 / -1`), which put the logo, the blurb and the socials in a box twice as
     wide as their content and left an obviously empty half-row beside them —
     the gap the client circled. It now sits in column 1 with Our Services
     beside it; see the order rules in the ≤1399 band above. */
  .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 44px; }

  .brands__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ----------------------------------------- Drawer starts  ≤ 1024px */
@media (max-width: 1024px) {
  .header__inner { gap: 18px; }
  /* --- Navigation collapses to a full-height drawer --- */
  .nav-toggle { display: grid; }
  /* the Book button moves into the drawer, but click-to-call stays in the bar —
     it is the single most useful control on a phone */
  /* ⚠️ `.header__cta` is NOT re-shown here. It used to be — the bar carried the
     phone pill next to the hamburger — and this rule is what made it visible
     again after the ≤1399 band had hidden it. The client asked for the pill to
     leave the bar on every device that has a menu button, so the only way to
     the number below 1400 is the drawer (`.nav__cta`).

     With the pill gone the toggle is the only thing on the right, so the auto
     margin moves onto it. */
  .nav-toggle { margin-left: auto; order: 2; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    margin: 0;
    flex: none;
    display: block;
    background: #fff;
    border-top: 1px solid var(--line);
    padding: 28px var(--gutter) 40px;
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s var(--ease), transform .35s var(--ease),
                visibility .35s var(--ease);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  /* --- Mega menu becomes an in-drawer accordion --- */
  .nav__item--mega {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .nav__toggle-sub {
    display: grid; place-items: center;
    width: 44px; height: 44px;
    margin-left: 0;              /* the desktop pull-back would clip it here */
    border-left: 1px solid var(--line);
    color: var(--ink-2);
  }
  .nav__toggle-sub svg { width: 18px; height: 18px; }

  .mega {
    grid-column: 1 / -1;
    position: static;
    border: 0;
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    /* collapsed by default; the caret button opens it */
    display: none;
    background: var(--surface);
  }
  .mega.is-open { display: block; }

  .mega__inner {
    display: block;
    max-width: none;
    padding: 20px var(--gutter) 26px;
  }
  .mega__cols { grid-template-columns: 1fr; gap: 22px; }
  .mega__title { font-size: .78rem; margin-bottom: 10px; padding-bottom: 10px; }
  .mega__list a { padding: 9px 0; font-size: .95rem; }
  .mega__aside { margin-top: 22px; }

  .nav__link {
    padding: 17px 0;
    font-size: 1.15rem;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
  }
  .nav__link::after { display: none; }
  .nav__link.is-active { color: var(--red); }

  /* ⚠️ Both drawer buttons are full width and the same height.

     The call pill used to be `inline-flex`, so it shrank to its text and sat
     as a small lozenge on the left above a full-width Book button — the two
     read as different kinds of control rather than a pair, and it looked like
     a mistake. `display: grid` on the wrapper stretches both to the column,
     and the shared `min-height` lines their heights up. */
  .nav__cta {
    margin-top: 28px;
    display: grid;
    gap: 12px;
  }
  .nav__cta .btn,
  .nav__cta .header__tel {
    width: 100%;
    min-height: 54px;
  }
  .nav__cta .header__tel {
    display: flex;
    justify-content: center;
    font-size: .9rem;
  }
}

/* ------------------------------------------- Hero stacks  ≤ 899px

   The one place the hero form finally goes under the copy. 900 is not an
   arbitrary number: it is the narrowest viewport where the copy column still
   clears 450px once a 320px form and the gutters are taken out, and 450 is
   what "MOTORCYCLE" needs at this size before the h1 breaks mid-word.

   ⚠️ This is a different breakpoint from the 1024/1025 drawer band, and that is
   on purpose — the nav and the hero are answering different questions. Do not
   "tidy" them into one number without re-measuring both. */
@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  /* the hero stops being a fixed height so it can grow to hold both; with
     `min-height` alone the card overflowed the section and sat on top of the
     service strip */
  .hero--home {
    min-height: 0;
    align-items: stretch;
    padding-top: calc(var(--header-h) + 48px);
    padding-bottom: 56px;
  }
  /* ⚠️ Once the form is under the copy rather than beside it, BOTH of them run
     the full container width. The 520px cap and the copy's 660px / 56ch
     measures exist to stop a column growing wider than the photograph beside
     it — there is nothing beside either of them here, so all they did was leave
     a couple of hundred pixels of dead space down the right of a tablet and
     make the card look like it had failed to load. */
  .hero__copy { max-width: none; }
  .hero__copy .lede { max-width: none; }
  .heroform { max-width: none; }
}

/* --------------------------------- Hero on a short screen  ≥ 900 × ≤ 880

   A laptop is a wide screen, not a tall one: 1366x768 and 1440x900 are both
   "desktop" by width and both cut the enquiry card in half at the hero's full
   vertical padding. The condition that actually matters is the viewport
   HEIGHT, so that is what this asks about. Nothing here changes the card's
   design — it tightens the space around and inside it just enough that the
   whole form clears the fold. */
@media (min-width: 900px) and (max-height: 880px) {
  .hero--home {
    min-height: 0;
    padding-top: calc(var(--header-h) + 34px);
    padding-bottom: 56px;
  }
  .heroform { padding: clamp(18px, 2vw, 24px); }
  .heroform__sub { margin-bottom: 14px; }
  .heroform .field { margin-bottom: 10px; }
  .heroform textarea { min-height: 70px; }
}

/* ----------------------------------------------- Small tablet  ≤ 820px */
@media (max-width: 820px) {
  .section-head { margin-bottom: 40px; }

  /* the heading and its action no longer fit on one row — stack them */
  .section-head--split { flex-direction: column; align-items: flex-start; gap: 26px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }

  /* badge above the copy — this is where the approvals band finally stacks */
  .approvalband__head { grid-template-columns: 1fr; gap: 30px; }
  .approvalband__mark { max-width: 320px; }

  .ctabar { flex-direction: column; align-items: flex-start; }
  .ctabar .btn { width: 100%; }

  .brands__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------- Mobile  ≤ 640px */
@media (max-width: 640px) {
  :root {
    --section-y: 50px;
    --gutter: 20px;
  }

  body { font-size: 15px; }

  .h1, h1 { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .h2, h2 { font-size: clamp(1.65rem, 7.4vw, 2.15rem); }

  .hero { min-height: 480px; padding-bottom: 48px; }
  .hero--home { min-height: 560px; }
  .hero--inner { min-height: 360px; }
  .hero__copy .lede { font-size: .98rem; }

  .btn-row { margin-top: 26px; gap: 10px; }
  .btn { width: 100%; padding: 14px 20px; }
  .btn-row .btn { flex: 1 1 100%; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid { gap: 16px; }

  .trackband__cards { grid-template-columns: 1fr; }
  /* 16/7 sliced the bikes into a letterbox strip once the card went full
     width — 16/9 still keeps a stacked card short enough to scroll past */
  .tcard__media { aspect-ratio: 16 / 9; }
  .tcard__body { padding: 22px 20px 20px; }
  /* keep the hairline flush with the narrower body padding */
  .tcard__foot { padding-top: 18px; margin-inline: -20px; padding-inline: 20px; }

  /* one per row: the dividing hairlines have nothing left to divide, so the
     row gap carries the separation instead */
  .wcta__points, .approvalband__points { grid-template-columns: 1fr; row-gap: 20px; }
  .wcta__points li, .approvalband__points li { border-left: 0; padding-inline: 0; }

  .pillars { grid-template-columns: 1fr; row-gap: 40px; }
  .pillar { border-left: 0; padding-inline: 0; }
  /* nothing to line up against once they stack, so drop the reserved two-line
     title box rather than leave dead space under a one-line title */
  .pillar__title { min-height: 0; }
  .pillar__title::after { margin-top: 14px; }

  .svcband__media { aspect-ratio: 4 / 3; }
  .svclist { columns: 1; }
  .svclist li { margin-bottom: 11px; }

  /* ⚠️ Stays TWO columns on a phone — two tiles left, two right — rather than
     collapsing to a single column. Four full-width rows pushed the rest of the
     page down for no gain, and the client asked for the 2 × 2 block.

     The icon moves ABOVE the label here instead of beside it. Side by side, a
     320px screen leaves each cell about 140px: a 30px icon plus a gap leaves
     ~98px for the word, and "PERFORMANCE" needs more than that at this size, so
     it overflowed its cell. Stacked, the label gets the full cell width. */
  .svcstrip__grid { grid-template-columns: repeat(2, 1fr); gap: 26px 14px; }
  .svcstrip__item {
    flex-direction: column;
    align-items: center;      /* centred in its cell — see the ≤1024 note */
    justify-content: flex-start;
    text-align: center;
    gap: 10px;
    border-left: 0;
    padding: 0;
  }
  .svcstrip__item svg { width: 28px; height: 28px; }
  .svcstrip__item span { font-size: .78rem; }

  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; border-top: 1px solid var(--line); }
  .stat:first-child { border-top: 0; }
  .stat { padding: 28px 20px; }



  .field-row { grid-template-columns: 1fr; gap: 0; }

  /* three tiles stack rather than going 2 + 1, which leaves a hole */
  .gpeek__grid { grid-template-columns: 1fr; }

  /* narrower cards travel a shorter track, so shorten the loop to keep the
     apparent speed roughly the same as on desktop */
  .rmarquee__track { animation-duration: 58s; }
  .rcard { padding: 24px 22px 22px; }
  .rmarquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  }

  .gallery { grid-template-columns: 1fr; gap: 12px; }

  .filters { gap: 8px; }
  .filter { padding: 9px 15px; font-size: .72rem; }

  /* ⚠️ The segmented pill becomes a 2×2 grid on a phone. As a single row it
     scrolled sideways (`overflow-x: auto`), which is technically fine and reads
     as broken: the fourth tab sat half-cut at the edge with nothing to say it
     could be scrolled. Both pages that use this have exactly four tabs. */
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    overflow: visible;
    border-radius: 16px;
  }
  .tab { padding: 14px 10px; font-size: .74rem; letter-spacing: .05em; }
  .tabpanel { padding-top: 34px; }

  .mediaband { min-height: 320px; }
  .play { width: 66px; height: 66px; }

  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .brands__item { min-height: 78px; padding: 18px 12px; }

  /* padding-top stays on var(--section-y) — 50px here — so the footer keeps
     the same rhythm as every section above it. */
  .footer__grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 40px; }
  /* Mobile keeps the original DOM order, which the client asked to leave
     untouched — so the laptop/tablet `order` swap is cancelled here.

     ⚠️ `:nth-child(n)` rather than `*`. It matches every child just the same,
     but `.footer__grid > *` is (0,1,0) and loses to the (0,2,0) of the
     `:nth-child(3)` rules above no matter how late it appears — the reset
     silently did nothing and Our Services stayed above Quick Links on phones.
     `:nth-child(n)` ties the specificity, so being later in the file wins. */
  .footer__grid > :nth-child(n) { order: 0; }
  .footer__about { max-width: none; }
  .footer__bar { flex-direction: column; align-items: center; gap: 8px; }

  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__close { top: 12px; right: 12px; }

  .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}

/* -------------------------------------------------- Small phone ≤ 400px */
@media (max-width: 400px) {
  /* ⚠️ The call pill is NOT collapsed to an icon here any more.

     This used to shrink it to a 44px circle because at ≤400 the number would
     not fit in the bar beside the logo. The pill no longer appears in the bar
     at all below 1400 — it lives in the drawer, which is 280px wide even on a
     320px phone, so there is room for the digits and every reason to show
     them: a phone number you cannot read is not a call to action. */

  .brands__grid { grid-template-columns: repeat(2, 1fr); }
  .brand img { height: 44px; }   /* 115px wide; 2x = 230, inside the 391px file */
  .quote p { font-size: 1.08rem; }
}

/* ------------------------- Roomier hero form  ≥ 1280 × ≥ 881 (desktop only)

   The client asked for a slightly larger enquiry card on desktop. Larger, not
   redesigned: the same panel with a wider track, a little more padding and
   fields a couple of pixels taller. Nothing about its colours, type or
   behaviour changes.

   ⚠️ Both halves of the condition are load-bearing.
   - `min-width: 1280` keeps tablets and small laptops out of it, as asked.
   - `min-height: 881` keeps the 1366x768 and 1280x800 laptops out of it. They
     are wide enough to qualify on width alone, and on those screens a taller
     card is a card whose bottom half you cannot see. It dovetails exactly with
     the `max-height: 880` block above, so every viewport gets one or the other
     and never both.

   The hero also gives back 24px of its top padding here, so the bigger card
   still clears the fold on a 1440x900 laptop with room to spare rather than by
   two pixels. */
@media (min-width: 1280px) and (min-height: 881px) {
  .hero--home { padding-top: calc(var(--header-h) + 56px); }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(380px, 440px); }

  .heroform { padding: clamp(26px, 2.6vw, 34px); }
  .heroform__title { font-size: clamp(1.18rem, 1.6vw, 1.4rem); }
  .heroform__sub { font-size: .92rem; margin-bottom: 20px; }
  .heroform .field { margin-bottom: 14px; }
  .heroform .field-row { gap: 14px; }
  .heroform label { font-size: .75rem; }
  .heroform input,
  .heroform textarea { padding: 13px 15px; font-size: .95rem; }
  .heroform textarea { min-height: 92px; }
}

/* ------------------------------------------------------------- Printing */
@media print {
  .header, .to-top, .lightbox, .mediaband, .filters, .gallery-more { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}