/* =============================================================
   Kingdom Minded - Mobile Polish
   Cross-page mobile usability overrides. Loaded last so these
   rules win on small viewports without restyling desktop.
   ============================================================= */

@media (max-width: 760px){

  /* ---------- Global rhythm ---------- */
  html{ -webkit-text-size-adjust: 100%; }
  body{ font-size: 15px; line-height: 1.6; }
  .wrap{ padding: 0 20px !important; }

  /* ---------- Topbar marquee ---------- */
  .topbar-track{ font-size: 9.5px !important; gap: 38px !important; padding: 9px 0 !important; }
  .topbar-track span{ gap: 10px !important; }

  /* ---------- Nav ---------- */
  .nav-inner{
    grid-template-columns: auto 1fr auto !important;
    height: 64px !important;
    gap: 14px !important;
  }
  .nav-links{ display: none !important; }
  .wordmark{ justify-self: center; }
  .wordmark img{ width: 108px !important; height: auto !important; }
  .nav-right{ gap: 12px !important; }
  .icon-btn{ padding: 6px !important; min-width: 36px; min-height: 36px; }
  .icon-btn .lbl, .icon-btn span:not([class]){ display: none !important; }
  .cart-pill{ padding: 8px 12px !important; font-size: 10px !important; letter-spacing: .18em !important; }
  .cart-pill .count{ width: 16px; height: 16px; font-size: 9px; }

  /* ---------- Buttons (tap targets) ---------- */
  .btn{
    min-height: 48px;
    padding: 14px 20px !important;
    font-size: 11px !important;
    letter-spacing: .22em !important;
    width: auto;
  }
  .hero-ctas .btn{ width: 100%; justify-content: space-between; }

  /* ---------- HOMEPAGE HERO ---------- */
  .hero{
    min-height: 100svh !important;
    padding-top: 24px;
  }
  .hero-bg img{
    object-position: 58% center !important;
    filter: saturate(1) contrast(1.05) brightness(1.05) !important;
  }
  .hero-bg::after{
    background:
      linear-gradient(180deg, rgba(8,8,10,.30) 0%, rgba(8,8,10,.15) 28%, rgba(8,8,10,.78) 78%, var(--ink) 100%) !important;
  }
  .hero-meta{ position: static !important; padding: 18px 0 0 !important; }
  .hero-meta .wrap{ flex-direction: row; align-items: flex-start; gap: 16px; }
  .hero-meta .col{ gap: 4px; }
  .hero-meta .col[style*="right"]{ text-align: right !important; }
  .hero-meta .num, .hero-meta .smallcaps, .hero-meta .eyebrow{ font-size: 9px !important; letter-spacing: .22em !important; }
  .hero-content{ padding: 0 0 96px !important; }
  .hero-grid{ gap: 24px !important; }
  .hero-headline{
    font-size: clamp(56px, 16vw, 84px) !important;
    line-height: .92 !important;
    letter-spacing: -.025em !important;
  }
  .hero-sub{
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-top: 22px !important;
    max-width: 100%;
  }
  .hero-sub strong{ font-size: 18px !important; margin-bottom: 10px !important; }
  .hero-ctas{
    flex-direction: column;
    gap: 10px !important;
    margin-top: 24px !important;
    width: 100%;
  }
  .hero-trust{
    gap: 12px !important;
    font-size: 9px !important;
    letter-spacing: .2em !important;
    margin-top: 22px !important;
  }
  .hero-trust .sep{ display: none; }
  .hero-foot{ display: none !important; } /* scroll cue + side quote - too cramped on mobile */

  /* ---------- Section atoms ---------- */
  section .sec-pad, .sec-pad{ padding: 72px 0 !important; }
  .sec-pad-sm{ padding: 56px 0 !important; }
  .sec-head{ grid-template-columns: 1fr !important; gap: 18px !important; margin-bottom: 36px !important; }
  .sec-head h2{ font-size: clamp(34px, 9vw, 48px) !important; line-height: 1.02 !important; }
  .sec-head .lede{ font-size: 14.5px !important; line-height: 1.6 !important; max-width: 100%; }
  .sec-num{ font-size: 10px !important; margin-bottom: 14px !important; }
  .eyebrow{ font-size: 10px !important; letter-spacing: .26em !important; }

  /* ---------- Trust bar (4-up  2-up) ---------- */
  .trust-grid{ grid-template-columns: 1fr 1fr !important; }
  .trust-item{ padding: 18px 16px !important; gap: 12px !important; }
  .trust-item .t{ font-size: 11px !important; letter-spacing: .14em !important; }
  .trust-item .d{ font-size: 9px !important; }

  /* ---------- Categories / Shop the Collection on home ---------- */
  .cat-grid{ grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .cat-grid .cat,
  .cat-grid .cat:nth-child(1),
  .cat-grid .cat:nth-child(2),
  .cat-grid .cat:nth-child(3),
  .cat-grid .cat:nth-child(4),
  .cat-grid .cat:nth-child(5){ aspect-ratio: 3/4 !important; grid-column: span 1 !important; }
  .cat-body{ padding: 16px 14px !important; gap: 10px !important; }
  .cat-name{ font-size: 18px !important; }
  .cat-grid .cat:nth-child(1) .cat-name,
  .cat-grid .cat:nth-child(2) .cat-name,
  .cat-grid .cat:nth-child(3) .cat-name{ font-size: 18px !important; }
  .cat-num{ top: 14px; left: 14px; font-size: 9px !important; }
  .cat-meta{ font-size: 9px !important; margin-top: 6px !important; }
  .cat-arrow{ width: 34px !important; height: 34px !important; }

  /* ---------- Product grid (Shop and Collections) ---------- */
  .col-grid{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .product, .card{ width: 100% !important; }
  .product img, .card img{ width: 100% !important; }

  /* ---------- Mission ---------- */
  .mission-grid{ grid-template-columns: 1fr !important; gap: 36px !important; }
  .mission-stmt{ font-size: clamp(26px, 7.5vw, 36px) !important; line-height: 1.18 !important; }
  .mission-pillars, .mission-pillars-2{ grid-template-columns: 1fr !important; gap: 22px !important; margin-top: 32px !important; }
  .pillar h4{ font-size: 19px !important; }
  .pillar p{ font-size: 13.5px !important; line-height: 1.6 !important; }
  .mission-img{ height: 380px !important; }
  .mission-img .badge{ width: 92px !important; height: 92px !important; right: -6px !important; top: 14px !important; font-size: 7.5px !important; }

  /* ---------- Manifesto / Movement ---------- */
  .manifesto{ padding: 70px 0 60px !important; }
  .manifesto .mani-eye{ font-size: 9.5px !important; margin-bottom: 22px !important; gap: 10px !important; }
  .manifesto .mani-eye::before, .manifesto .mani-eye::after{ width: 22px !important; }
  .mani-headline{
    font-size: clamp(32px, 9.5vw, 48px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.012em !important;
    text-wrap: balance;
  }
  .mani-pillars{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    margin-top: 44px !important;
    padding-top: 28px !important;
  }
  .mani-pillar h4{ font-size: 18px !important; }
  .mani-pillar p{ font-size: 13.5px !important; }
  .mani-foot{ grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 48px !important; padding-top: 28px !important; }
  .mani-quote{ font-size: 18px !important; line-height: 1.5 !important; padding: 4px 0 4px 18px !important; }
  .mani-cta{ justify-content: flex-start !important; }
  .mani-cta .btn{ width: 100%; }

  /* ---------- Premium Banner (Undefeated/Undisputed) ---------- */
  .banner-grid{ grid-template-columns: 1fr !important; min-height: 0 !important; }
  .banner-text{ padding: 56px 22px !important; order: 2 !important; }
  .banner-text::after{ display: none !important; }
  .banner-img{ aspect-ratio: 4/5 !important; order: 1 !important; }
  .banner-eye{ font-size: 9.5px !important; margin-bottom: 18px !important; }
  .banner-eye::after{ width: 32px !important; }
  .banner-headline{ font-size: clamp(44px, 12.5vw, 64px) !important; line-height: .96 !important; margin-bottom: 22px !important; }
  .banner-copy{ font-size: 14.5px !important; line-height: 1.65 !important; margin-bottom: 28px !important; max-width: 100%; }
  .banner-text .btn{ width: 100%; }
  .banner-next{ padding: 16px 22px !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; font-size: 9.5px !important; }

  /* ---------- Volumes accordion ---------- */
  .vol-shell{ margin-top: 28px !important; }
  .vol-row{ grid-template-columns: 44px 1fr 24px !important; gap: 12px !important; padding: 20px 0 !important; }
  .vol-row:hover, .vol-item.open .vol-row{ padding-left: 0 !important; }
  .vol-row::before{ display: none !important; }
  .vol-row .num{ font-size: 22px !important; }
  .vol-row .name{ font-size: 18px !important; line-height: 1.2 !important; }
  .vol-row .name .thin{ font-size: 9.5px !important; margin-top: 4px !important; letter-spacing: .18em !important; }
  .vol-row .toggle{ font-size: 18px !important; }
  .vol-panel-content{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 4px 0 28px 0 !important;
  }
  .vol-theme{ font-size: 14.5px !important; line-height: 1.65 !important; margin-bottom: 18px !important; }
  .vol-theme-label, .vol-coll-label{ font-size: 9.5px !important; }
  .vol-chips{ gap: 6px !important; margin-bottom: 20px !important; }
  .vol-chip{ font-size: 11px !important; padding: 8px 11px !important; }
  .vol-cta{ flex-direction: column; gap: 8px !important; width: 100%; }
  .vol-cta .btn{ width: 100%; }
  .vol-aside{ border-left: 0 !important; border-top: 1px solid var(--line); padding: 18px 0 0 0 !important; }
  .vol-aside .quote{ font-size: 18px !important; line-height: 1.45 !important; }
  .vol-aside .roman{ font-size: 10px !important; margin-bottom: 12px !important; }

  /* ---------- Lookbook (homepage editorial grid) ---------- */
  .lb-grid{ grid-template-columns: 1fr !important; grid-auto-rows: auto !important; gap: 12px !important; }
  .lb-grid > *{ grid-column: span 1 !important; grid-row: auto !important; aspect-ratio: 4/5; }

  /* ---------- Statement / pillars row ---------- */
  .statement{ padding: 72px 0 !important; }
  .statement-pillars{ grid-template-columns: 1fr 1fr !important; gap: 18px !important; }
  .sp-title{ font-size: 19px !important; }
  .sp-text{ font-size: 12.5px !important; }

  /* ---------- Testimony / Move body ---------- */
  .move-body{ grid-template-columns: 1fr !important; padding: 56px 0 !important; gap: 32px !important; }
  .move-img{ height: 360px !important; }

  /* ---------- PDP (homepage product detail) ---------- */
  .pdp-grid{ grid-template-columns: 1fr !important; gap: 22px !important; }
  .pdp-thumbs{ flex-direction: row !important; overflow-x: auto !important; gap: 8px !important; }
  .pdp-thumbs .t{ width: 70px !important; flex-shrink: 0; }
  .pdp-info h3{ font-size: 32px !important; }
  .pdp-info .desc{ font-size: 14px !important; }
  .pdp-cta{ flex-direction: row; }
  .pdp-cta .add{ padding: 16px 18px !important; font-size: 10.5px !important; letter-spacing: .22em !important; }
  .size-row button{ padding: 12px 0 !important; min-height: 44px; }
  .swatch{ width: 36px !important; height: 36px !important; min-width: 36px; min-height: 36px; }

  /* ---------- Signup ---------- */
  .signup{ }
  .signup-inner{ padding: 80px 22px !important; }
  .signup h2{ font-size: clamp(32px, 9vw, 44px) !important; line-height: 1.05 !important; }
  .signup p{ font-size: 14px !important; line-height: 1.6 !important; margin-bottom: 28px !important; }
  .signup-form{ grid-template-columns: 1fr !important; }
  .signup-form .field + .field{ border-left: 0 !important; border-top: 1px solid var(--line) !important; }
  .signup-form input{ padding: 16px 18px !important; font-size: 14px !important; }
  .signup-form button{ padding: 18px !important; min-height: 52px; justify-content: center; }
  .signup-fine{ font-size: 9px !important; line-height: 1.6 !important; }

  /* ---------- Footer ---------- */
  footer{ padding: 56px 0 28px !important; }
  .ft-grid{ grid-template-columns: 1fr !important; gap: 28px !important; }
  .ft-brand{ grid-column: span 1 !important; }
  .ft-brand .km-mark{ font-size: 22px !important; }
  .ft-brand p{ font-size: 13px !important; max-width: 100%; }
  .ft-brand .verse{ font-size: 13px !important; }
  .ft-col h5{ margin-bottom: 14px !important; }
  .ft-col ul{ gap: 10px !important; }
  .ft-col a{ font-size: 13px !important; padding: 4px 0; display: inline-block; }
  .ft-bar{ flex-direction: column; align-items: flex-start; gap: 12px !important; margin-top: 36px !important; padding-top: 18px !important; font-size: 9px !important; line-height: 1.6; }

  /* ---------- Page hero (subpages) ---------- */
  .page-hero{ padding: 36px 0 28px !important; }
  .page-hero-grid{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .page-hero h1{ font-size: clamp(40px, 11vw, 60px) !important; line-height: .98 !important; }
  .page-hero .lede{ font-size: 16px !important; line-height: 1.5 !important; max-width: 100%; }
  .crumb{ font-size: 9.5px !important; letter-spacing: .22em !important; margin-bottom: 18px !important; }

  /* ---------- Generic .sec heading (support pages) ---------- */
  .sec{ padding: 56px 0 !important; }
  .sec-h{ font-size: clamp(28px, 8.5vw, 38px) !important; line-height: 1.05 !important; }
  .sec-sub{ font-size: 14.5px !important; line-height: 1.65 !important; margin-bottom: 28px !important; }

  /* ---------- Split layout (support pages) ---------- */
  .split{ grid-template-columns: 1fr !important; gap: 32px !important; }
  .split aside{ position: static !important; border-left: 0 !important; border-top: 1px solid var(--line); padding: 22px 0 0 !important; order: 2; }
  .split aside ul{ flex-direction: row; flex-wrap: wrap; gap: 8px !important; }
  .split aside a{ font-size: 12px !important; padding: 8px 12px !important; border: 1px solid var(--line); }
  .split aside a:hover{ padding-left: 12px !important; }

  /* ---------- Prose ---------- */
  .prose h2{ font-size: clamp(24px, 7.5vw, 32px) !important; margin: 32px 0 12px !important; }
  .prose h3{ font-size: 18px !important; margin: 22px 0 8px !important; }
  .prose p, .prose li{ font-size: 14.5px !important; line-height: 1.7 !important; }

  /* ---------- Forms (Contact) ---------- */
  .form{ grid-template-columns: 1fr !important; }
  .form .full, .form .actions{ grid-column: span 1 !important; }
  .form input, .form select, .form textarea{ font-size: 16px !important; padding: 14px 0 !important; }
  .form .actions{ flex-direction: column; align-items: stretch; gap: 14px !important; }
  .form .actions .btn{ width: 100%; }
  .form .note{ text-align: center; font-size: 9.5px !important; }

  /* ---------- Contact card ---------- */
  .contact-card{ padding: 24px !important; }
  .contact-card .row .val{ font-size: 18px !important; word-break: break-word; }
  .contact-card .row p{ font-size: 13.5px !important; }

  /* ---------- Info cards (Shipping) ---------- */
  .info-grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .info-card{ padding: 22px !important; }
  .info-card .val{ font-size: 24px !important; }
  .info-card .desc{ font-size: 13px !important; }

  /* ---------- Tables (Size guide) ---------- */
  .tbl-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl{ min-width: 480px; font-size: 13px !important; }
  .tbl th, .tbl td{ padding: 12px 14px !important; }
  .tbl td:first-child{ font-size: 16px !important; }

  /* ---------- Accordion (FAQ) ---------- */
  .acc-cat{ margin-top: 40px !important; }
  .acc-cat-h{ font-size: 24px !important; }
  .acc-q{ padding: 18px 4px !important; gap: 14px !important; }
  .acc-q:hover, .acc-item.open .acc-q{ padding-left: 4px !important; }
  .acc-q .q-text{ font-size: 16px !important; line-height: 1.35 !important; }
  .acc-a{ font-size: 14px !important; line-height: 1.7 !important; padding-bottom: 22px !important; }

  /* ---------- CTA bands ---------- */
  .cta{ padding: 72px 0 !important; }
  .cta h2{ font-size: clamp(30px, 9vw, 44px) !important; line-height: 1.02 !important; margin-bottom: 16px !important; }
  .cta p{ font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 26px !important; }
  .cta-row{ flex-direction: column; gap: 10px !important; width: 100%; max-width: 320px; }
  .cta-row .btn{ width: 100%; }

  /* ---------- Collection page extras ---------- */
  .col-hero{ padding: 36px 0 24px !important; }
  .col-hero-grid{ grid-template-columns: 1fr !important; gap: 26px !important; }
  .col-hero h1{ font-size: clamp(44px, 12vw, 64px) !important; }
  .col-hero-img{ aspect-ratio: 4/5 !important; height: auto !important; }
  .col-meta{ flex-wrap: wrap; gap: 14px !important; font-size: 9px !important; }
  .col-meta-strip{ grid-template-columns: 1fr 1fr !important; gap: 1px !important; }
  .col-includes-grid{ grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .col-includes-cell{ padding: 16px !important; }
  .filter-bar{ overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px 0 !important; }
  .filter-pills{ flex-wrap: nowrap !important; gap: 8px !important; padding: 0 4px; }
  .filter-pill{ flex-shrink: 0; padding: 9px 14px !important; font-size: 10px !important; }
  .related-grid{ grid-template-columns: 1fr !important; gap: 14px !important; }

  /* ---------- Shop page filter bar ---------- */
  .shop-filter, .filter-rail{ overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- PDP (Product page) ---------- */
  .pdp-page-grid{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .pdp-gallery{ position: static !important; }
  .pdp-thumb-rail{ flex-direction: row !important; overflow-x: auto; gap: 8px !important; padding: 0 0 6px 0 !important; }
  .pdp-thumb-rail > *{ flex-shrink: 0 !important; width: 64px !important; height: 80px !important; }
  .pdp-buy h1{ font-size: clamp(34px, 9.5vw, 48px) !important; }
  .pdp-buy .price{ font-size: 26px !important; }
  .pdp-color-row, .pdp-size-row{ gap: 8px !important; }
  .pdp-size-grid{ grid-template-columns: repeat(3, 1fr) !important; }
  .pdp-buy-row{ flex-direction: row; gap: 10px !important; }
  .pdp-qty{ width: auto !important; }
  .pdp-add-cart{ flex: 1; min-height: 56px !important; padding: 16px !important; font-size: 11px !important; }
  .pdp-trust-strip{ grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .pdp-accordion-row{ padding: 18px 0 !important; }
  .pdp-related-grid{ grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
/* ---------- About / Volumes pages ---------- */
  .about-grid, .vols-grid{ grid-template-columns: 1fr !important; gap: 32px !important; }

  /* ---------- General "stop big text from breaking poorly" ---------- */
  h1, h2, h3, .display, .mani-headline, .hero-headline, .banner-headline, .sec-head h2, .sec-h{
    text-wrap: balance;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }

  /* Force any oversized inline-styled fonts on hero copy back into bounds */
  [style*="font-size:"][class*="hero-"]{ font-size: inherit !important; }
}

/* Smaller phone tweaks */
@media (max-width: 380px){
  .wrap{ padding: 0 20px !important; }
  .wordmark img{ width: 96px !important; }
  .hero-headline{ font-size: clamp(46px, 14vw, 56px) !important; }
  .hero-sub{ font-size: 13.5px !important; }
  .hero-sub strong{ font-size: 17px !important; }
  .mani-headline{ font-size: 32px !important; }
  .banner-headline{ font-size: 42px !important; }
  .cat-name{ font-size: 16px !important; }
  .btn{ padding: 13px 18px !important; font-size: 10.5px !important; letter-spacing: .2em !important; }
}

/* =============================================================
   Narrow-screen safety + Tablet breakpoint refinements
   Adds proper edge padding, scales hero headline cleanly, and
   keeps "Wear the witness" from cropping at any width 1024 .
   ============================================================= */

/* =============================================================
   Hero safe-gutter - guarantees breathing room at every width
   below true desktop (<=1280px). Targets the hero content wrap
   only; does not change the desktop hero layout above 1280px.
   ============================================================= */
@media (max-width: 1280px){
  .hero-content.wrap{ padding-left: 56px !important; padding-right: 56px !important; }
  .hero-meta .wrap{ padding-left: 56px !important; padding-right: 56px !important; }
  .hero-foot .wrap{ padding-left: 56px !important; padding-right: 56px !important; }
}
@media (max-width: 1024px){
  .hero-content.wrap{ padding-left: 48px !important; padding-right: 48px !important; }
  .hero-meta .wrap{ padding-left: 48px !important; padding-right: 48px !important; }
  .hero-foot .wrap{ padding-left: 48px !important; padding-right: 48px !important; }
}
@media (max-width: 760px){
  .hero-content.wrap{ padding-left: 28px !important; padding-right: 28px !important; }
  .hero-meta .wrap{ padding-left: 28px !important; padding-right: 28px !important; }
  .hero-foot .wrap{ padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 420px){
  .hero-content.wrap{ padding-left: 24px !important; padding-right: 24px !important; }
  .hero-meta .wrap{ padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---------- Universal: never let big type touch the edge ---------- */
@media (max-width: 1024px){
  .hero-headline,
  .banner-headline,
  .mani-headline,
  .display,
  .sec-head h2,
  .page-hero h1,
  .col-hero h1,
  .sec-h{
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-wrap: balance;
    hyphens: none;
    max-width: 100%;
  }
  .hero-headline{ letter-spacing: -.022em !important; }
}

/* ---------- TABLET (761px - 1024px) ---------- */
@media (min-width: 761px) and (max-width: 1024px){

  /* Safe edge padding - generous, premium feel */
  .wrap{ padding: 0 36px !important; }

  /* Nav: keep links visible but tightened */
  .nav-inner{ height: 84px !important; }
  .nav-links{ gap: 22px !important; font-size: 11px !important; }
  .nav-links a{ letter-spacing: .18em !important; }
  .wordmark img{ width: 122px !important; height: auto !important; }

  /* HERO - re-cap font size so it never crops at 800-1000px */
  .hero{ min-height: 92vh !important; }
  .hero-content{ padding: 0 0 96px !important; }
  .hero-headline{
    font-size: clamp(72px, 9.2vw, 108px) !important;
    line-height: .9 !important;
    letter-spacing: -.028em !important;
  }
  .hero-sub{
    font-size: 15px !important;
    line-height: 1.65 !important;
    margin-top: 28px !important;
    max-width: 540px !important;
  }
  .hero-sub strong{ font-size: 20px !important; }
  .hero-ctas{ gap: 12px !important; flex-wrap: wrap; margin-top: 30px !important; }
  .hero-ctas .btn{ flex: 0 1 auto; min-width: 220px; }
  .hero-trust{ gap: 18px !important; flex-wrap: wrap; }
  .hero-meta .wrap{ padding: 0 36px !important; }
  .hero-foot .wrap{ padding: 0 36px !important; }
  .hero-foot .hero-quote{ max-width: 280px; font-size: 13px !important; }

  /* Trust bar - 4-up stays, but with breathing room */
  .trust-grid{ gap: 1px !important; }
  .trust-item{ padding: 22px 18px !important; gap: 14px !important; }
  .trust-item .t{ font-size: 12px !important; }
  .trust-item .d{ font-size: 10px !important; }

  /* Section heads */
  .sec-head{ gap: 32px !important; margin-bottom: 60px !important; }
  .sec-head h2{ font-size: clamp(44px, 6.5vw, 72px) !important; }
  .sec-head .lede{ font-size: 15px !important; }

  /* Featured collection grid: 3-up  2-up at tablet */
  .col-grid{ grid-template-columns: 1fr 1fr !important; gap: 22px !important; }

  /* Categories: 5-up editorial  2-up clean */
  .cat-grid{ grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .cat-grid .cat,
  .cat-grid .cat:nth-child(1),
  .cat-grid .cat:nth-child(2),
  .cat-grid .cat:nth-child(3),
  .cat-grid .cat:nth-child(4),
  .cat-grid .cat:nth-child(5){ aspect-ratio: 4/5 !important; grid-column: span 1 !important; grid-row: auto !important; }

  /* Banner */
  .banner-headline{ font-size: clamp(56px, 8vw, 88px) !important; }
  .banner-text{ padding: 64px 36px !important; }

  /* Volumes */
  .vol-row{ grid-template-columns: 80px 1fr 32px !important; gap: 22px !important; padding: 26px 0 !important; }
  .vol-row .name{ font-size: 22px !important; }
  .vol-panel-content{ grid-template-columns: 1.2fr .8fr !important; gap: 36px !important; }

  /* Mission */
  .mission-grid{ gap: 50px !important; }
  .mission-stmt{ font-size: clamp(28px, 4vw, 40px) !important; }
  .mission-pillars, .mission-pillars-2{ gap: 22px !important; }

  /* Lookbook */
  .lb-grid{ gap: 14px !important; }
}

/* ---------- Phone (<=760) extra hero polish ---------- */
@media (max-width: 760px){

  /* Solid edge padding - enough room to breathe */
  .wrap{ padding: 0 24px !important; }

  /* Hero - refine the existing rules */
  .hero-content{ padding: 0 0 88px !important; }
  .hero-headline{
    font-size: clamp(54px, 14.5vw, 78px) !important;
    line-height: .92 !important;
    letter-spacing: -.024em !important;
    margin-right: -2px;  /* hairline pull so italic 's' tail isn't clipped */
  }
  .hero-headline .it{ display: inline-block; }
  .hero-sub{
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    margin-top: 24px !important;
    padding-right: 4px;
  }
  .hero-sub strong{ font-size: 18px !important; line-height: 1.32 !important; }

  /* CTAs - comfortable, not crowded */
  .hero-ctas{ gap: 12px !important; margin-top: 26px !important; }
  .hero-ctas .btn{
    width: 100%;
    min-height: 52px;
    padding: 15px 22px !important;
    justify-content: space-between;
    font-size: 11px !important;
    letter-spacing: .2em !important;
  }

  /* Trust strip - 1-line items, vertical when needed */
  .hero-trust{
    flex-wrap: wrap;
    gap: 10px 18px !important;
    font-size: 9.5px !important;
    margin-top: 26px !important;
  }
  .hero-trust .item{ white-space: nowrap; }

  /* Hero meta - give it real edge gutter */
  .hero-meta .wrap{ padding: 0 24px !important; }

  /* Trust band - never feel cramped */
  .trustband .wrap{ padding: 0 24px !important; }
  .trust-grid{ gap: 12px !important; }
  .trust-item{ padding: 18px 14px !important; gap: 10px !important; min-height: 92px; }
  .trust-item .ic{ flex-shrink: 0; }
  .trust-item .t{ font-size: 11px !important; line-height: 1.2; }
  .trust-item .d{ font-size: 9.5px !important; line-height: 1.35; }
}

/* ---------- Very narrow phones ---------- */
@media (max-width: 420px){
  .hero-headline{ font-size: clamp(48px, 14.5vw, 60px) !important; }
  .hero-trust{ gap: 8px 14px !important; }
  .trust-grid{ grid-template-columns: 1fr !important; }
  .trust-item{ padding: 16px 18px !important; }
}