/* ══════════════════════════════════════════════════════════
   TAL Home — TAILI bathroom safety, U.S. distribution.
   Visual language follows the TAILI brand store:
   Poppins headings / Mulish body / Cormorant italic accents,
   signal red, warm gold, charcoal bands, 10px cards.
   ══════════════════════════════════════════════════════════ */

:root{
  /* brand */
  --red:#EF2613;          --red-deep:#C81D0C;
  --gold:#FA9B17;         --gold-soft:#F3B54A;
  --ink:#212020;          --ink-2:#292929;
  --fg:#1A1A1A;           --muted-fg:#6B6B6B;

  /* surfaces */
  --bg:#FFFFFF;
  --card:#F6F6F6;
  --soft:#F4F4F5;
  --border:#E7E7E7;
  --on-dark:#FFFFFF;
  --on-dark-dim:rgba(255,255,255,.72);

  /* type */
  --head:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --body:'Mulish',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --accent-font:'Cormorant',Georgia,'Times New Roman',serif;

  --fs-display:clamp(40px,4.2vw,68px);
  --fs-section:clamp(30px,2.7vw,46px);
  --fs-compact:clamp(24px,2.1vw,34px);
  --fs-lead:clamp(17px,1.3vw,21px);
  --fs-body:clamp(15px,1.05vw,17px);
  --fs-small:14px;
  --fs-eyebrow:12px;
  --lh-head:1.1;
  --lh-body:1.6;

  /* layout */
  --content:1440px;
  --inset:clamp(20px,6vw,144px);
  --section:clamp(64px,7vw,112px);
  --r-card:10px;
  --r-btn:4px;
  --btn-h:44px;
  --t:220ms cubic-bezier(.2,.6,.3,1);
  --header-h:74px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;overflow-x:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{font-family:var(--head);font-weight:600;line-height:var(--lh-head);margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:var(--inset)}
.wrap-narrow{max-width:900px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;
  padding:.75rem 1.25rem;font-size:var(--fs-small);font-weight:700;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ── shared bits ───────────────────────────────────────── */

.eyebrow{
  font-family:var(--head);
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin-bottom:.9rem;
}
.eyebrow.on-dark{color:var(--gold-soft)}

.section{padding-block:var(--section)}
.section-head{max-width:760px;margin-bottom:clamp(2rem,4vw,3.5rem)}
.section-head h2{font-size:var(--fs-section)}
.section-head .lede{margin-top:1rem;font-size:var(--fs-lead);color:var(--muted-fg)}
.section-head.center{margin-inline:auto;text-align:center}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--btn-h);padding:0 1.5rem;
  font-family:var(--body);font-size:var(--fs-small);font-weight:700;
  letter-spacing:.02em;border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);
  white-space:nowrap;
}
.btn .i{width:16px;height:16px;flex:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-dark{background:var(--ink-2);color:#fff}
.btn-dark:hover{background:#000}
.btn-line{background:transparent;color:var(--fg);border-color:#C9C9C9}
.btn-line:hover{background:var(--fg);color:#fff;border-color:var(--fg)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#ECECEC}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost-light:hover{background:#fff;color:var(--ink)}
.btn-sm{min-height:38px;padding:0 1.1rem;font-size:13px}
.btn-full{width:100%}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ── header (overlays the hero, solidifies on scroll) ──── */

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:background var(--t),box-shadow var(--t),border-color var(--t);
  background:transparent;border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom-color:var(--border);
}
.bar{display:flex;align-items:center;gap:1.5rem;width:100%}

.logo{display:flex;align-items:baseline;gap:.45rem;font-family:var(--head);font-weight:700;font-size:19px;letter-spacing:-.02em;color:#fff;transition:color var(--t)}
.logo em{font-family:var(--accent-font);font-style:italic;font-weight:700;color:var(--gold-soft)}
.scrolled .logo{color:var(--ink)}
.scrolled .logo em{color:var(--red)}

.nav{display:flex;gap:2rem;margin-inline:auto;font-size:var(--fs-small);font-weight:600;font-family:var(--head)}
.nav a{color:rgba(255,255,255,.92);position:relative;padding-block:.35rem;transition:color var(--t)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--red);transform:scaleX(0);transition:transform var(--t)}
.nav a:hover::after{transform:scaleX(1)}
.scrolled .nav a{color:var(--fg)}

.menu-toggle{
  display:none;width:42px;height:42px;padding:9px;margin-left:auto;
  background:transparent;border:0;color:#fff;cursor:pointer;
}
.scrolled .menu-toggle{color:var(--ink)}

.mobile-nav[hidden]{display:none}
.mobile-nav{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:99;
  background:#fff;border-bottom:1px solid var(--border);
  padding:1rem var(--inset) 1.5rem;
  display:flex;flex-direction:column;gap:.25rem;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.4);
}
.mobile-nav a:not(.btn){padding:.85rem 0;border-bottom:1px solid var(--border);font-family:var(--head);font-weight:600}
.mobile-nav .btn{margin-top:1rem}

/* ── hero ──────────────────────────────────────────────── */

/* The page opens on a room, not on a product: one full-bleed lifestyle
   photograph, with the copy set over it. Everything below stays as before. */
.hero{
  position:relative;isolation:isolate;
  background:var(--ink);color:var(--on-dark);
  padding-top:var(--header-h);
  overflow:hidden;

  /* How the opening photograph is cropped. Swapping the image is meant to be
     a three-number change here and nothing else:
       --scene-zoom  >100% scales past the frame and spills off the right,
                     which trims dead space and pushes the subject left-to-right
       --scene-x/y   the cover anchor. Keep y low when a standing figure's head
                     is near the top of the source. */
  --scene-zoom:100%;
  --scene-x:50%;
  --scene-y:20%;

  /* Where the pool of shade sits. The copy column is pinned to the 1440
     content grid, so past that width it drifts inward and the shade has
     to follow it. */
  --shade-x:-7%;

  /* Left gutter that keeps the copy on the 1440 content grid. */
  --hero-gutter:max(var(--inset),calc((100vw - var(--content))/2 + var(--inset)));
}
.hero-scene{position:absolute;inset:0;z-index:0}
.hero-scene img{
  position:absolute;inset:0 auto 0 0;
  width:var(--scene-zoom);height:100%;
  object-fit:cover;object-position:var(--scene-x) var(--scene-y);
}
.hero-scene::after{
  content:"";position:absolute;inset:0;
  background:
    /* keeps the white header legible over a very bright photograph */
    linear-gradient(180deg,rgba(20,19,19,.60) 0%,rgba(20,19,19,.54) 6%,rgba(20,19,19,.18) 16%,transparent 32%),
    /* one pool of shade anchored under the copy, so the rest of the room
       keeps the high-key light the photograph was shot for */
    radial-gradient(130% 118% at var(--shade-x) 112%,
      rgba(20,19,19,.94) 0%,
      rgba(20,19,19,.82) 24%,
      rgba(20,19,19,.58) 46%,
      rgba(20,19,19,.24) 66%,
      rgba(20,19,19,.06) 82%,
      transparent 92%);
}
.hero-inner{
  position:relative;z-index:1;
  display:flex;align-items:flex-end;
  /* Fills the first screen. The 75vw ceiling only bites on portrait tablets,
     where a full-height band would zoom the photo until she leaves the frame. */
  min-height:min(calc(100vh - var(--header-h)),75vw);
  min-height:min(calc(100svh - var(--header-h)),75vw);
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:flex-end;
  /* Anchored low: the figure in the photograph stands centre-frame, so the
     copy has to stay under her rather than across her. */
  /* border-box: the gutter counts toward max-width, so add it on top. A bare
     56rem was swallowed whole by the 704px gutter at 2560 wide. */
  max-width:calc(var(--hero-gutter) + 42rem + clamp(2rem,4vw,4rem));
  padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,4vw,3.5rem);
  /* Full-bleed hero: the grid spans the viewport, so the copy carries the
     gutter itself to stay aligned with the 1440 content column below. */
  padding-inline:var(--hero-gutter) clamp(2rem,4vw,4rem);
}
.hero h1,.hero .lede{text-shadow:0 1px 2px rgba(20,19,19,.45),0 2px 28px rgba(20,19,19,.6)}
.hero h1{font-size:var(--fs-display);font-weight:700;text-wrap:balance}
.hero h1 em{font-family:var(--accent-font);font-style:italic;font-weight:700;color:var(--gold-soft)}
/* Capped short of the viewport centre line: between ~900 and ~1200px the photo
   scales by height and the grab bar lands right on that line. */
.hero .lede{margin-top:1rem;font-size:var(--fs-lead);color:rgba(255,255,255,.88);
  max-width:min(52ch,calc(50vw - var(--hero-gutter) - 2.5rem))}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* benefit row, in place of the old spec strip */
.hero-badges{
  list-style:none;margin:1.75rem 0 0;padding:1.25rem 0 0;
  display:flex;flex-wrap:wrap;gap:.5rem .75rem;
  border-top:1px solid rgba(255,255,255,.16);
}
.hero-badges li{
  display:flex;align-items:center;gap:.5rem;
  padding:.4rem .85rem .4rem .7rem;
  border:1px solid rgba(255,255,255,.28);border-radius:999px;
  font-family:var(--head);font-size:13px;font-weight:600;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(2px);
}
.hero-badges li::before{
  content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--gold);
}

/* ── mosaic ────────────────────────────────────────────── */

.mosaic{
  display:grid;gap:12px;
  grid-template-columns:1.2fr 1fr 1fr;
  grid-template-rows:repeat(2,minmax(220px,30vh));
  grid-template-areas:"a b c" "a d e";
}
.tile{position:relative;overflow:hidden;border-radius:var(--r-card);color:#fff;display:block;isolation:isolate}
.tile:nth-child(1){grid-area:a}
.tile:nth-child(2){grid-area:b}
.tile:nth-child(3){grid-area:c}
.tile:nth-child(4){grid-area:d}
.tile:nth-child(5){grid-area:e}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.6,.3,1)}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.72) 100%)}
.tile-body{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.25rem,2vw,1.75rem)}
.tile-body h3{font-size:clamp(19px,1.5vw,25px);font-weight:600}
.tile-body p{margin-top:.4rem;font-size:var(--fs-small);color:rgba(255,255,255,.82);max-width:34ch}
.tile-more{margin-top:.9rem;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--head);font-size:13px;font-weight:600}
.tile-more svg{width:15px;height:15px;transition:transform var(--t)}
.tile:hover .tile-more svg{transform:translateX(4px)}

/* ── moments (risk cards) ──────────────────────────────── */

.moments-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.5rem,3vw,3rem);align-items:center}
.moments-art{border-radius:var(--r-card);overflow:hidden}
.moments-art img{width:100%;aspect-ratio:4/3;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.chip{border:1px solid var(--border);border-radius:999px;padding:.4rem 1rem;font-size:13px;font-weight:600;font-family:var(--head);background:#fff}
.moment-list{display:grid;gap:.75rem}
.moment{display:flex;gap:1rem;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:1.15rem 1.35rem}
.moment .ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--soft);color:var(--red);display:grid;place-items:center}
.moment .ic svg{width:20px;height:20px}
.moment h3{font-size:19px;font-weight:600}
.moment p{font-size:var(--fs-small);color:var(--muted-fg);margin-top:.15rem}
.moment-tip{margin-top:1.25rem;font-size:var(--fs-small);color:var(--muted-fg)}
.moment-tip b{color:var(--fg)}

/* ── series (tab rail + product cards) ─────────────────── */

.series{background:var(--card);border-radius:var(--r-card);overflow:hidden}
.series-grid{display:grid;grid-template-columns:280px 1fr}
.rail{background:var(--ink);padding:clamp(1.5rem,2vw,2rem) 0;display:flex;flex-direction:column;gap:2px}
.rail-head{padding:0 1.5rem 1.25rem;color:rgba(255,255,255,.5);font-family:var(--head);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.tab{
  appearance:none;background:transparent;border:0;cursor:pointer;text-align:left;
  padding:.95rem 1.5rem;color:rgba(255,255,255,.72);
  font-family:var(--head);font-size:15px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  transition:background var(--t),color var(--t);
}
.tab small{display:block;font-weight:400;font-size:12px;color:rgba(255,255,255,.45);letter-spacing:.02em}
.tab:hover{background:rgba(255,255,255,.07);color:#fff}
.tab[aria-selected="true"]{background:var(--red);color:#fff}
.tab[aria-selected="true"] small{color:rgba(255,255,255,.8)}
.tab svg{width:16px;height:16px;flex:none;opacity:0;transition:opacity var(--t)}
.tab[aria-selected="true"] svg{opacity:1}

.panels{padding:clamp(1.5rem,2.5vw,2.5rem)}
.panel-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.panel-head h3{font-size:var(--fs-compact)}
.panel-head .sub{font-size:var(--fs-small);color:var(--muted-fg);margin-top:.35rem;max-width:52ch}
.panel[hidden]{display:none}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}

.pcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.pcard-art{background:#fff;aspect-ratio:1/1;position:relative;overflow:hidden}
.pcard-art img{width:100%;height:100%;object-fit:contain;padding:.75rem;transition:transform 500ms cubic-bezier(.2,.6,.3,1)}
.pcard:hover .pcard-art img{transform:scale(1.04)}
.tagx{position:absolute;top:10px;left:10px;background:var(--red);color:#fff;font-family:var(--head);font-size:11px;font-weight:700;letter-spacing:.06em;padding:.25rem .55rem;border-radius:3px}
.pcard-body{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;flex:1}
.pbrand{font-family:var(--head);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-fg)}
.pcard-body h4{font-family:var(--head);font-size:16px;font-weight:600;margin-top:.3rem;line-height:1.35}
.pspec{margin-top:.85rem;display:grid;gap:.4rem;font-size:13px;color:var(--muted-fg)}
.pspec li{display:flex;gap:.5rem}
.pspec b{color:var(--fg);font-weight:600;flex:none;min-width:66px}
.pvariants{margin-top:.85rem;display:flex;flex-wrap:wrap;gap:.35rem}
.sw{font-size:11px;font-family:var(--head);font-weight:600;border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem;color:var(--muted-fg)}
.pcard-actions{margin-top:auto;padding-top:1.1rem;display:grid;gap:.5rem}

/* ── dark engineering band ─────────────────────────────── */

.band-dark{background:var(--ink);color:var(--on-dark)}
.band-dark .section-head h2{color:#fff}
.band-dark .section-head .lede{color:var(--on-dark-dim)}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(1.5rem,3vw,3rem)}
.why{border-top:2px solid rgba(255,255,255,.18);padding-top:1.5rem}
.why-num{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--gold-soft)}
.why h3{font-size:21px;margin-top:.6rem}
.why p{margin-top:.7rem;color:var(--on-dark-dim);font-size:var(--fs-small)}

/* ── pillars (gold circles) ────────────────────────────── */

.band-soft{background:var(--soft)}

/* ── safety notice ─────────────────────────────────────── */

.notice{
  border:1px solid #F0D9A6;background:#FFF9EE;border-radius:var(--r-card);
  padding:clamp(1.5rem,3vw,2.25rem);
  display:grid;grid-template-columns:auto 1fr;gap:1.25rem;align-items:start;
}
.notice .ic{width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;display:grid;place-items:center}
.notice .ic svg{width:20px;height:20px}
.notice h3{font-family:var(--head);font-size:18px;font-weight:700}
.notice ul{margin-top:.85rem;display:grid;gap:.5rem;font-size:var(--fs-small);color:#6A5730}
.notice li{display:flex;gap:.6rem}
.notice li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:.62em}
.notice b{color:#4A3B18}

/* ── wholesale + form ──────────────────────────────────── */

.wholesale-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,4.5rem);align-items:start}
.wholesale-list{margin-top:1.75rem;display:grid;gap:.85rem}
.wholesale-list li{display:flex;gap:.75rem;font-size:var(--fs-small)}
.wholesale-list svg{width:18px;height:18px;color:var(--red);flex:none;margin-top:.15rem}
.contact-line{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--border);display:grid;gap:.4rem;font-size:var(--fs-small)}
.contact-line a{font-weight:700;text-decoration:underline;text-underline-offset:3px}

.form-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);padding:clamp(1.5rem,3vw,2.25rem);box-shadow:0 24px 60px -40px rgba(0,0,0,.28)}
.field{margin-bottom:1.1rem}
.field label{display:block;font-family:var(--head);font-size:13px;font-weight:600;margin-bottom:.4rem}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:15px;color:var(--fg);
  background:#fff;border:1px solid #D6D6D6;border-radius:var(--r-btn);
  padding:.7rem .85rem;transition:border-color var(--t),box-shadow var(--t);
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--fg);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,38,19,.1)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.err{color:var(--red);font-size:13px;margin-top:.35rem;font-weight:600}
.form-status{margin-top:.9rem;font-size:var(--fs-small);font-weight:600}
.form-status.ok{color:#137333}
.form-status.bad{color:var(--red)}
.form-note{margin-top:.9rem;font-size:13px;color:var(--muted-fg)}

/* ── faq ───────────────────────────────────────────────── */

.faq-list{display:grid;gap:0;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item summary{
  cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--head);font-size:17px;font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:.35rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--muted-fg);border-bottom:2px solid var(--muted-fg);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--t);
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-item p{padding-bottom:1.5rem;color:var(--muted-fg);max-width:76ch}

/* ── closing cta band ──────────────────────────────────── */

.cta-band{background:var(--ink);color:#fff;border-radius:var(--r-card);padding:clamp(2rem,4vw,3.5rem);display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.cta-band h2{font-size:var(--fs-compact)}
.cta-band p{margin-top:.6rem;color:var(--on-dark-dim);font-size:var(--fs-small);max-width:56ch}

/* ── footer ────────────────────────────────────────────── */


/* Contact slots hide themselves while every link in them is still blank
   (emails were removed 2026-09-10; the phone placeholder is not filled yet). */
.contact-line:not(:has(a:not(:empty))),
.footer-col:has(> a):not(:has(> a:not(:empty))){display:none}

.site-footer{background:var(--ink);color:var(--on-dark-dim);padding-top:clamp(3rem,5vw,4.5rem)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(2rem,3vw,3rem)}
.footer-brand .logo{color:#fff;font-size:22px;margin-bottom:1rem}
.footer-brand p{font-size:var(--fs-small);max-width:38ch}
.footer-brand .addr{margin-top:1.25rem;font-size:13px;line-height:1.7}
.footer-col h4{font-family:var(--head);color:#fff;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem}
.footer-col a{display:block;padding:.35rem 0;font-size:var(--fs-small);transition:color var(--t)}
.footer-col a:hover{color:#fff}
.footer-bottom{
  margin-top:clamp(2.5rem,4vw,3.5rem);padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between;
  font-size:13px;
}
.footer-bottom .legal{max-width:70ch;color:rgba(255,255,255,.45)}

/* ── responsive ────────────────────────────────────────── */

@media (max-width:1080px){
  .series-grid{grid-template-columns:1fr}
  .rail{flex-direction:row;overflow-x:auto;padding:0;gap:0;scrollbar-width:none}
  .rail::-webkit-scrollbar{display:none}
  .rail-head{display:none}
  .tab{white-space:nowrap;justify-content:center;padding:1rem 1.35rem}
  .tab svg{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}

@media (min-width:1600px){
  /* the band gets short relative to its width: anchor high or her head is cropped */
  .hero{--shade-x:9%;--scene-y:4%}
}

@media (max-width:900px){
  .nav{display:none}
  .header-cta{display:none}
  .menu-toggle{display:block}
  /* Phones: the photograph stops sitting behind the copy and gets its own
     band on top. Overlaid at this width the copy lands squarely on the grab
     bar, and the bar is the one thing this picture has to show. */
  .hero{padding-top:0;--scene-zoom:100%;--scene-x:62%;--scene-y:50%}
  .hero-scene{position:relative;inset:auto;height:min(118vw,600px)}
  .hero-scene::after{
    background:
      linear-gradient(180deg,rgba(20,19,19,.58) 0%,rgba(20,19,19,.14) 18%,transparent 32%),
      linear-gradient(0deg,var(--ink) 0%,rgba(33,32,32,.5) 12%,transparent 32%);
  }
  .hero-inner{min-height:0}
  .hero-copy{max-width:100%;padding:.25rem var(--inset) clamp(2.5rem,8vw,3.5rem)}
  .hero h1,.hero .lede{text-shadow:none}
  .hero .lede{max-width:52ch}
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(190px,24vh));grid-template-areas:"a a" "b c" "d e"}
  .moments-grid{grid-template-columns:1fr}
  .wholesale-grid{grid-template-columns:1fr}
  .cta-band{grid-template-columns:1fr}
}

@media (max-width:560px){
  :root{--fs-display:clamp(32px,9vw,42px)}
  .mosaic{grid-template-columns:1fr;grid-template-rows:repeat(5,200px);grid-template-areas:"a" "b" "c" "d" "e"}
  .field-row{grid-template-columns:1fr}
  .notice{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero-badges{gap:.45rem;margin-top:1.75rem;padding-top:1.25rem}
  .hero-badges li{font-size:12px;padding:.35rem .7rem .35rem .6rem}
}