/* ============ HERO - full-bleed editorial image ============ */
  .hero{position:relative;min-height:clamp(560px,82vh,820px);display:flex;align-items:flex-end;
        color:var(--cream);overflow:hidden;border-bottom:5px solid var(--ink)}
  .hero-bg{position:absolute;inset:0;z-index:0}
  .hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
  .hero-bg::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to top, oklch(0.24 0.05 30 / .82) 0%, oklch(0.24 0.05 30 / .45) 34%, oklch(0.24 0.05 30 / .12) 62%, transparent 100%)}
  .hero-inner{position:relative;z-index:2;width:100%;padding-top:0;padding-bottom:64px}
  .hero-kicker{display:inline-flex;align-items:center;gap:9px;font-family:"Poppins";font-weight:800;
    font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);
    background:oklch(0.24 0.05 30 / .58);border:2px solid oklch(1 0 0 / .55);padding:9px 17px;border-radius:var(--r-pill);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin-bottom:22px;
    text-shadow:0 1px 6px oklch(0.2 0.04 30 / .6)}
  .hero-logo{width:min(560px,82%);margin-bottom:18px;filter:drop-shadow(5px 6px 0 var(--maroon))}
  .hero h1{font-family:"Poppins";font-weight:900;font-size:clamp(34px,4.6vw,60px);line-height:.96;
    letter-spacing:-0.03em;margin-bottom:18px;max-width:18ch;text-shadow:0 2px 24px oklch(0.2 0.04 30 / .4)}
  .hero h1 em{font-style:normal;background:var(--peach-deep);color:var(--ink);padding:1px 14px;border-radius:12px;
    display:inline-block;transform:rotate(-2deg);text-shadow:none}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-taps{display:inline-flex;align-items:center;gap:9px;font-family:"Poppins";font-weight:800;font-size:13.5px;
    color:var(--cream);letter-spacing:.01em}
  .hero-taps svg{width:18px;height:18px;color:var(--mustard)}

  .kicker-line{display:inline-flex;align-items:center;gap:10px;font-family:"Poppins";font-weight:800;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
  .kicker-line::before{content:"";width:26px;height:2.5px;background:var(--red);border-radius:2px}

  .how{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
  .how-flow{display:flex;flex-direction:column;gap:18px}
  .flow-step{display:flex;gap:18px;align-items:flex-start;background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--pop);padding:22px 24px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .flow-step:hover{transform:translateX(4px);box-shadow:var(--pop-lg)}
  .flow-step .fn{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--peach-deep);color:var(--ink);border:2.5px solid var(--ink);font-family:"Poppins";font-weight:900;font-size:19px;display:grid;place-items:center}
  .flow-step h3{font-size:19px;margin-bottom:5px}
  .flow-step p{font-size:14.5px;color:oklch(0.45 0.02 50)}
  .how-visual{position:relative;border-radius:var(--r-xl);overflow:hidden;border:3px solid var(--ink);box-shadow:var(--pop-mustard);aspect-ratio:4/5;background:var(--ink)}
  .how-visual>img{width:100%;height:100%;object-fit:cover}
  .ob-mock{position:absolute;left:18px;right:18px;bottom:18px;background:var(--ink);border:2.5px solid var(--peach-deep);border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:13px;box-shadow:0 10px 30px oklch(0.2 0.04 30 / .45)}
  .ob-mock .obn{width:38px;height:38px;border-radius:50%;background:var(--peach-deep);color:var(--ink);font-family:"Poppins";font-weight:900;display:grid;place-items:center;flex:0 0 auto}
  .ob-mock .obt{flex:1;color:var(--cream);font-family:"Poppins";font-weight:800;font-size:14px;line-height:1.2}
  .ob-mock .obt small{display:block;color:var(--peach);font-weight:600;font-size:11.5px;opacity:.8;margin-top:2px}
  .ob-mock .obtot{color:var(--peach-deep);font-family:"Poppins";font-weight:900;font-size:19px}
  .how-tag{position:absolute;top:16px;left:16px;background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--r-pill);font-family:"Poppins";font-weight:800;font-size:12.5px;padding:7px 15px;box-shadow:var(--pop);display:flex;align-items:center;gap:7px}
  .how-tag svg{width:15px;height:15px}

  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--peach-deep);border:3px solid var(--ink);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--pop-lg)}
  .stat{padding:40px 28px;text-align:center;border-right:2px solid oklch(0.375 0.044 226.2 / .18)}
  .stat:last-child{border-right:none}
  .stat .sv{font-family:"Poppins";font-weight:900;font-size:clamp(34px,3.6vw,48px);color:var(--ink);line-height:1;letter-spacing:-0.02em}
  .stat .sl{font-family:"Poppins";font-weight:700;font-size:13.5px;color:var(--ink);margin-top:10px}
  .stat .sd{font-size:12.5px;color:oklch(0.375 0.044 226.2 / .65);margin-top:5px}

  /**
   * .quotes/.quote/.stars/.who/.av (the hand-written placeholder review
   * cards this section used before) are gone - front-page.php now embeds
   * the real Trustindex.io Google-reviews shortcode instead. These target
   * Trustindex's REAL class names, confirmed against the actual rendered
   * DOM via the client's own DevTools inspection (not guessed):
   * .ti-review-item > .ti-inner is where its "Light border" style set
   * actually paints the visible card (border-color:#d9d9d9, border-radius:
   * 4px, padding:20px, background:#fff, all its own rules using !important).
   *
   * Two earlier attempts at this didn't survive contact with the live site:
   * (1) styling .ti-review-item directly did nothing, because .ti-inner (a
   * child of it) paints its own opaque background on top; (2) matching
   * Trustindex's own selector depth exactly and relying on LOAD ORDER to
   * win a tied-specificity fight (a stylesheet injected later in the
   * document wins ties) worked only sometimes - Trustindex injects its CSS
   * whenever the widget actually scrolls into view via its own script, not
   * on a fixed timer, so a delayed injection here raced it and sometimes
   * lost. .quotes-ti repeated 3x below is the actual fix: repeating a class
   * selector multiplies its contribution to specificity (CSS spec, not a
   * quirk), so .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item
   * .ti-inner is now numerically MORE specific than Trustindex's own
   * 4-class-deep selector regardless of which stylesheet loaded when -
   * removes the load-order race entirely instead of trying to win it.
   */
  /**
   * $ti is the shared prefix every rule below repeats in full - the border
   * fix (previous round) used this exact 6-class-deep chain and reliably
   * won; the reorder rules that round used a SHORTER 4-class chain
   * (.quotes-ti x3 + target class only, skipping the .ti-widget/.ti-review-
   * item ancestors) which tied Trustindex's own equally-4-class-deep rule
   * for the SAME property (display/order) and lost the tie to whichever
   * stylesheet loaded later - confirmed live: border/background won,
   * reorder didn't, on the exact same page. Every rule now goes through the
   * full chain so nothing is short-changed the same way again.
   */
  .quotes-ti.quotes-ti.quotes-ti .ti-widget{font-family:"Nunito Sans",sans-serif!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item{background:transparent!important;border:none!important;box-shadow:none!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-inner{background:var(--paper)!important;border:2.5px solid var(--ink)!important;border-radius:var(--r-lg)!important;box-shadow:var(--pop)!important;overflow:hidden}

  /**
   * Visual reorder to match the old card's flow (stars, then quote text,
   * then who-said-it) - Trustindex's own DOM order is header(photo+name+
   * date) -> stars -> text. flex + order swaps this purely visually,
   * without touching the actual DOM Trustindex's own JS (read-more height
   * measurement, slider positioning) depends on. Deliberately ONLY `order`
   * on the review-content element, not flex-grow/margin too - it already
   * carries Trustindex's own inline height (data-initial-height/data-
   * expanded-height, animated on Read more) and flex:1 here would hand it a
   * computed flex-basis that could fight that inline height.
   */
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-inner{display:flex!important;flex-direction:column!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-inner .ti-stars{order:1!important;margin-bottom:14px!important;display:inline-flex!important;gap:3px!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-inner .ti-stars .ti-star{margin:0!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-inner .ti-review-text-container.ti-review-content{order:2!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-inner .ti-read-more{order:3!important;margin-bottom:14px!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-inner .ti-review-header{order:4!important;margin-bottom:0!important}

  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-name{font-family:"Poppins"!important;font-weight:800!important;font-size:14.5px!important;color:var(--ink)!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-date{font-size:13px!important;color:oklch(0.45 0.02 50)!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-review-content{font-size:15.5px!important;line-height:1.55!important;color:var(--ink)!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-profile-img img{border-radius:50%!important;border:2.5px solid var(--ink)!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-review-item .ti-read-more-active{color:var(--red)!important;font-weight:700!important}

  /* .ti-next/.ti-prev (slider arrows) and the per-card gap are deliberately
     left untouched - see front-page.php's own comment for why. Column count
     (currently 4, client wants 3) is handled separately in front-page.php,
     by overriding the widget's own data-review-target-width attribute
     before Trustindex's script reads it - not a CSS concern. */

  /* Client-identified via their own DevTools inspection: Trustindex's own
     .ti-widget-container margin-bottom (15px) left a visible gap below the
     card row before the next section, and .ti-reviews-container-wrapper's
     own padding-bottom (1px) was clipping the cards' own drop-shadow at the
     bottom edge (the shadow needs room below the card to render into, same
     reasoning as the .gf-checkout-wrap shadow fix elsewhere in this theme -
     1px wasn't enough, 10px is). */
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-widget-container{margin-bottom:0!important}
  .quotes-ti.quotes-ti.quotes-ti .ti-widget .ti-reviews-container-wrapper{padding-bottom:10px!important}

  .why-band{border:3px solid var(--ink);border-radius:var(--r-xl);background:var(--peach-deep);box-shadow:var(--pop-lg);padding:clamp(30px,4vw,48px);display:flex;flex-direction:column;gap:26px}
  .why-band-head h2{margin:0}
  .why-band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
  .wb-item{display:flex;gap:14px;align-items:flex-start}
  .wb-item .ic{width:44px;height:44px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--red);border:2.5px solid var(--ink);display:grid;place-items:center;box-shadow:2px 2px 0 var(--ink)}
  .wb-item .ic svg{width:22px;height:22px;color:var(--cream)}
  .wb-item h4{font-family:"Poppins";font-weight:800;font-size:15.5px;margin-bottom:4px}
  .wb-item p{font-size:13px;color:var(--navy-soft);line-height:1.5}

  .journal-strip{padding-top:var(--sp-sm)}
  .journal-strip .sec-head{margin-bottom:var(--s-2)}

  .occ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .occ-tile{position:relative;border-radius:var(--r-lg);overflow:hidden;border:3px solid var(--ink);box-shadow:var(--pop);aspect-ratio:1.5;display:block;transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
  .occ-tile:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
  .occ-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
  .occ-tile:hover img{transform:scale(1.06)}
  .occ-tile .occ-ov{position:absolute;inset:0;background:linear-gradient(180deg,oklch(0.375 0.044 226 / 0) 35%,oklch(0.30 0.042 228 / .82) 100%)}
  .occ-tile .occ-lab{position:absolute;left:18px;bottom:16px;right:18px;color:var(--cream)}
  .occ-tile .occ-lab h3{font-family:"Poppins";font-weight:900;font-size:20px;line-height:1.05}
  .occ-tile .occ-lab span{font-size:13px;font-weight:600;opacity:.9}
  @media(max-width:900px){.occ-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.occ-grid{grid-template-columns:1fr}.occ-tile{aspect-ratio:1.7}}

  /* "Add a bestseller" as a continuous, seamless marquee-style carousel
     (assets/js/bs-carousel.js) - auto-scrolls smoothly (requestAnimationFrame,
     not a discrete step-and-pause), pauses on hover, and also takes
     arrows/dots. Two things client feedback specifically called out:
     1) ALWAYS exactly 4 cards visible on desktop, never a cropped partial
        one - each .card's width is set by JS to (viewport width - 3 gaps)/4
        (recalculated on resize), not a fixed px width, so the count is
        fixed and the width flexes, the opposite of the earlier version
        which fixed the width and only fit however many happened to div
        evenly into the leftover space.
     2) Arrows are position:absolute, OVERLAPPING the card edges rather
        than sitting in their own space beside the track - hidden by
        default on desktop and revealed on hover (:hover), but always
        visible on mobile (no hover to reveal them there).
     .bs-viewport is the ONLY element that clips (overflow:hidden) - its
     own top/bottom padding gives .card's hover lift+shadow
     (transform:translate(-3px,-3px) + box-shadow:10px 10px, see
     .card:hover in styles.css) room to render without being cropped too. */
  .bs-carousel{position:relative}
  .bs-viewport{overflow:hidden;padding:16px 0}
  .bs-track{display:flex;gap:22px;width:max-content}
  /* --bs-card-w is set on .bs-track itself by bs-carousel.js (inherits down
     to every .card); the 300px fallback only ever shows for an instant
     before JS runs on first paint. */
  .bs-track .card{flex:0 0 var(--bs-card-w,300px)}
  /* No transition here - continuous scroll sets transform every animation
     frame in JS; a per-step transition here would fight that. Arrow clicks
     get their own short-lived transition, added/removed by JS only while
     that one jump animates. */
  /* Same cream/peach floating-icon-button look as .fab-item (the footer
     quick-actions button) - cream fill, ink glyph, peach-deep border AND
     drop-shadow - instead of the flat dark navy circle used before. */
  .bs-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;background:var(--cream);color:var(--ink);border:2.5px solid var(--peach-deep);display:grid;place-items:center;line-height:1;cursor:pointer;appearance:none;font:inherit;padding:0;opacity:0;transition:opacity .2s,background .15s,color .15s,box-shadow .18s var(--ease),transform .18s var(--ease);box-shadow:5px 5px 0 var(--peach-deep)}
  /* The glyph itself, not the button/background - client feedback was
     specifically "bigger arrow icon, not bigger padding" after an earlier
     round just enlarged the whole circle. */
  .bs-arrow svg{width:26px;height:26px}
  .bs-carousel:hover .bs-arrow{opacity:1}
  .bs-arrow:hover{background:var(--red);color:var(--cream);box-shadow:7px 7px 0 var(--peach-deep);transform:translateY(-50%) translate(-2px,-2px)}
  .bs-prev{left:8px}
  .bs-next{right:8px}
  .bs-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .bs-dot{width:9px;height:9px;border-radius:50%;background:var(--peach-deep);border:none;padding:0;cursor:pointer;appearance:none;transition:background .2s,transform .2s}
  .bs-dot.is-active{background:var(--red);transform:scale(1.3)}
  @media(max-width:560px){
    /* No hover on touch - arrows stay visible, still absolute/overlapping. */
    .bs-arrow{opacity:1;width:40px;height:40px}
    .bs-arrow svg{width:20px;height:20px}
  }
  @media(prefers-reduced-motion:reduce){.bs-track{animation:none}}

  .trust{border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:30px 0;display:flex;flex-direction:column;gap:20px;align-items:center;text-align:center}
  .trust-label{font-family:"Poppins";font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-soft)}
  .trust-logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 42px}
  .trust-logo{font-family:"Poppins";font-weight:900;font-size:20px;letter-spacing:-0.02em;color:var(--ink);opacity:.55;transition:opacity .2s}
  .trust-logo:hover{opacity:1}

  .sf-cta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px}
  .sf-link{display:inline-flex;align-items:center;gap:7px;font-family:"Poppins";font-weight:800;font-size:14px;color:var(--ink);opacity:.85}
  .sf-link svg{width:16px;height:16px}
  .sf-link:hover{opacity:1}

  .bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:200px;gap:18px}
  .bento .cat-tile:nth-child(1){grid-column:span 3;grid-row:span 2}
  .bento .cat-tile:nth-child(2){grid-column:span 3}
  .bento .cat-tile:nth-child(3){grid-column:span 3}
  .bento .cat-tile:nth-child(4){grid-column:span 2}
  .bento .cat-tile:nth-child(5){grid-column:span 2}
  .bento .cat-tile:nth-child(6){grid-column:span 2}

  .split-full{display:grid;grid-template-columns:1fr 1fr;width:100%;align-items:stretch}
  .split-full .sf-copy{padding:96px clamp(40px,7vw,110px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
  .split-full .sf-inner{width:100%;max-width:520px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start}
  .split-full .sf-photo{position:relative;min-height:560px}
  .split-full .sf-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .split-full .sf-photo .scale-tag{position:absolute;top:26px;left:26px;background:var(--cream);border:2.5px solid var(--ink);border-radius:var(--r-pill);font-family:"Poppins";font-weight:800;font-size:13px;padding:9px 17px;box-shadow:var(--pop)}
  .split-full.sf-dark{background:var(--peach-deep)}
  .split-full.sf-dark .sf-copy{color:var(--ink)}
  .split-full.sf-dark .sf-copy h2{color:var(--ink);margin:14px 0 16px}
  .split-full.sf-dark .sf-copy>.sf-inner>p{color:oklch(0.375 0.044 226.2 / .82);font-size:16px;margin-bottom:28px;align-self:stretch}
  .split-full.sf-dark .kicker-line{color:var(--red)}
  .split-full.sf-dark .kicker-line::before{background:var(--red)}
  .cat-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:30px;align-self:stretch}
  .cat-stat{background:oklch(0.375 0.044 226.2 / .07);border:2px solid oklch(0.375 0.044 226.2 / .22);border-radius:var(--r-md);padding:18px 20px}
  .cat-stat .v{font-family:"Poppins";font-weight:900;font-size:26px;color:var(--red);line-height:1}
  .cat-stat .l{font-family:"Poppins";font-weight:700;font-size:13px;color:var(--ink);margin-top:6px}

  .ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  .ig-tile{position:relative;aspect-ratio:1;border:2.5px solid var(--ink);border-radius:var(--r-md);overflow:hidden;box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .ig-tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
  .ig-tile:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
  .ig-tile:hover img{transform:scale(1.07)}
  .ig-tile .ig-ov{position:absolute;inset:0;display:grid;place-items:center;background:oklch(0.24 0.05 30 / 0);transition:background .25s;color:var(--cream);opacity:0}
  .ig-tile:hover .ig-ov{background:oklch(0.24 0.05 30 / .42);opacity:1}
  .ig-tile .ig-ov svg{width:26px;height:26px}

  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .post{display:flex;flex-direction:column;background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--pop);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
  .post:hover{transform:translate(-3px,-3px);box-shadow:var(--pop-lg)}
  .post .pimg{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:2.5px solid var(--ink)}
  .post .pimg img{width:100%;height:100%;object-fit:cover}
  .post .pcat{position:absolute;top:14px;left:14px;background:var(--peach-deep);border:2px solid var(--ink);border-radius:var(--r-pill);font-family:"Poppins";font-weight:800;font-size:11.5px;padding:5px 12px}
  .post .pbody{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
  .post .pdate{font-family:"Poppins";font-weight:700;font-size:12.5px;color:var(--red);margin-bottom:9px}
  .post h3{font-size:19px;line-height:1.2;margin-bottom:10px}
  .post p{font-size:14px;color:oklch(0.45 0.02 50);flex:1;margin-bottom:16px}
  .post .pmore{font-family:"Poppins";font-weight:800;font-size:14px;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
  .post .pmore svg{width:15px;height:15px}

  @keyframes riseIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
  @keyframes heroKen{from{transform:scale(1.12)}to{transform:scale(1.04)}}
  .reveal{opacity:0;transform:translateY(30px)}
  @media(prefers-reduced-motion:no-preference){
    .reveal.in{animation:riseIn .7s var(--ease) forwards}
    .hero-bg img{animation:heroKen 9s var(--ease) forwards}
    .hero-inner>*{opacity:0;animation:riseIn .7s var(--ease) forwards}
    .hero-inner>.hero-kicker{animation-delay:.06s}
    .hero-inner>.hero-logo{animation-delay:.16s}
    .hero-inner>h1{animation-delay:.28s}
    .hero-inner>.hero-cta{animation-delay:.40s}
  }
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

  @media(max-width:900px){
    .hero{min-height:78vh}
    .hero-inner{padding-top:30px;padding-bottom:48px;text-align:left}
    .how{grid-template-columns:1fr;gap:30px}
    .how-visual{aspect-ratio:16/12;order:-1}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat:nth-child(2){border-right:none}
    .stat:nth-child(1),.stat:nth-child(2){border-bottom:2px solid oklch(0.375 0.044 226.2 / .18)}
    .quotes{grid-template-columns:1fr}
    .why-band-grid{grid-template-columns:1fr 1fr}
    .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:175px}
    .bento .cat-tile:nth-child(1){grid-column:span 2;grid-row:span 1}
    .bento .cat-tile:nth-child(2),.bento .cat-tile:nth-child(3),
    .bento .cat-tile:nth-child(4),.bento .cat-tile:nth-child(5){grid-column:span 1}
    .bento .cat-tile:nth-child(6){grid-column:span 2}
    .split-full{grid-template-columns:1fr}
    .split-full .sf-photo{min-height:320px;order:2}
    .split-full .sf-copy{padding:56px 26px;order:1}
    .cat-stats{grid-template-columns:1fr 1fr;max-width:none}
    .ig-grid{grid-template-columns:repeat(3,1fr)}
    .blog-grid{grid-template-columns:1fr}
  }
  .split-full + #gf-footer footer{margin-top:0;border-top:5px solid var(--ink)}
  @media(max-width:560px){
    .ig-grid{grid-template-columns:repeat(2,1fr)}
    .why-band-grid{grid-template-columns:1fr}
  }