/* Layout: full-viewport photo hero; brand block hangs from top-left, two-row header over the image, headline + button lower-left, scroll cue clipped at bottom centre. Measured from a 1517 x 732 reference. */
:root {
  --brand: #5c1520;        /* logo block */
  --accent: #a11d31;       /* button */
  --accent-hover: #86172a;
  --ink: #ffffff;          /* text on photo */
  --field: #ffffff;        /* search box */
  --field-ink: #1d1a1b;
  --field-muted: #6b6466;
  --cue: #141213;
  --ground: #1a1716;

  --font-display: "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-mark: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-ui: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --side-l: 71px;
  --side-r: 50px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--font-ui); }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: #5b4a35;
}
/* The photo is positioned by a small script so the middle of the knife sits at the exact centre of the screen at any size. Without script it falls back to a close approximation. */
.hero-img {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover; object-position: 44% 55%;
  display: block;
}
.hero::after { /* shade so white text stays readable over the light grass */
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,0) 50%, rgba(0,0,0,.2) 100%),
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.12) 30%, rgba(0,0,0,0) 50%);
  pointer-events: none;
}

/* ---------- Header ---------- */
.header {
  position: absolute; z-index: 2;
  inset: 0 0 auto 0;
  padding-left: max(var(--side-l), env(safe-area-inset-left, 0px));
  padding-right: max(var(--side-r), env(safe-area-inset-right, 0px));
}
.brand {
  position: absolute;
  left: max(var(--side-l), env(safe-area-inset-left, 0px));
  top: 0;
  width: 184px; height: 115px;
  background: var(--brand);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
}
.brand-mark { height: 50px; width: auto; display: block; }
.brand-word {
  font-family: var(--font-mark);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.search {
  position: absolute;
  top: 63px;
  right: max(var(--side-r), env(safe-area-inset-right, 0px));
  width: 252px; height: 40px;
  display: flex; align-items: center;
  background: var(--field);
  border: 1px solid #2a2627;
  border-radius: 4px;
  padding: 0 12px 0 23px;
}
.search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font-family: var(--font-ui); font-size: 15px; color: var(--field-ink);
}
.search input::placeholder { color: var(--field-muted); }
.search button { border: 0; background: none; padding: 0; color: var(--field-ink); cursor: pointer; display: flex; }

.nav-row {
  position: absolute;
  top: 128px;
  left: max(var(--side-l), env(safe-area-inset-left, 0px));
  right: max(var(--side-r), env(safe-area-inset-right, 0px));
  height: 28px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-main, .nav-util { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.nav-main { gap: 24px; }
.nav-main a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-util { gap: 21px; }
.nav-util a.text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav-util .icon { display: flex; width: 24px; height: 24px; }
.nav-util .icon + .icon { margin-left: -6px; }
.nav-util .first-icon { margin-left: 15px; }
.nav-main a:hover, .nav-util a:hover { opacity: .8; }

/* ---------- Headline ---------- */
.hero-copy {
  position: absolute; z-index: 2;
  left: max(155px, env(safe-area-inset-left, 0px));
  bottom: 155px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 50px;
}
.hero-copy h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 72px;
  line-height: .9;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 148px; height: 56px;
  background: var(--accent);
  border-radius: 3px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  text-transform: uppercase;
  transition: background-color .15s ease;
}
.cta:hover { background: var(--accent-hover); }

/* ---------- Scroll cue ---------- */
.cue {
  position: absolute; z-index: 2;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--cue);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease;
}


/* ---------- Our categories ---------- */
.cats {
  background: #ffffff; color: #1d1a1b;
  padding: 138px clamp(16px, 4.74vw, 72px) 112px;
}
.cats h2 {
  margin: 0 0 70px;
  padding-left: 16px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 22.4px;
  line-height: 1.2;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.cat {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #cfcfcf;
}
.cat img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s ease;
}
.cat::after { /* soft shade so the white title stays readable on light photos */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 45%);
  pointer-events: none;
}
.cat:hover img { transform: scale(1.03); }
.cat-tag { /* crimson overlay with a tagline, shown on hover / keyboard focus */
  position: absolute; inset: 0; z-index: 2;
  padding: 52px 32px 0 40px;
  background: rgba(150, 25, 48, .92);
  color: #ffffff;
  font-family: var(--font-ui);
  font-weight: 300;
  font-size: 32px;
  line-height: 42px;
  opacity: 0;
  transition: opacity .25s ease;
}
.cat:hover .cat-tag, .cat:focus-visible .cat-tag { opacity: 1; }
.cat:hover .cat-title, .cat:focus-visible .cat-title { opacity: 0; }
.cat-title {
  position: absolute; z-index: 1;
  top: 57px; left: 40px; right: 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* ---------- Top bar that slides in after you scroll past the logo ---------- */
.topbar {
  position: fixed; z-index: 50;
  top: 0; left: 0; right: 0;
  height: 72px;
  display: flex; align-items: center;
  background: #ffffff; color: var(--field-ink);
  border-bottom: 1px solid #e2e0e0;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.topbar.show {
  transform: translateY(0);
  visibility: visible;
  transition: transform .3s ease, visibility 0s;
}
.tb-brand {
  flex: none;
  width: 72px; height: 72px; margin-top: -1px;
  background: var(--brand); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.tb-brand svg { width: 32px; height: 32px; }
.tb-brand img { height: 42px; width: auto; display: block; }
.tb-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.tb-nav { gap: 24px; margin-left: 24px; }
.tb-nav a {
  font-family: var(--font-display); font-weight: 500;
  font-size: 16.5px; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap;
}
.tb-util { gap: 21px; margin-left: auto; padding-right: 24px; }
.tb-util a.text {
  font-family: var(--font-display); font-weight: 400;
  font-size: 15.5px; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap;
}
.tb-util .icon { display: flex; width: 22px; height: 22px; }
.tb-util .icon svg { width: 100%; height: 100%; }
.tb-util .first-icon { margin-left: 6px; }
.tb-util .icon-li + .icon-li { margin-left: -7px; }
.tb-nav a:hover, .tb-util a:hover { opacity: .7; }

/* ---------- Bestsellers carousel ---------- */
.best { background: #ffffff; color: #1d1a1b; padding: 18px 0 112px; --side: clamp(16px, 4.74vw, 72px);
  --tile-w: 320px; --tile-h: 540px; --card-w: 380px; --card-pad: 60px; }
.best h2 {
  margin: 0 0 50px; padding-left: var(--side);
  font-family: var(--font-ui); font-weight: 600; font-size: 22.4px; line-height: 1.2;
}
.best-wrap { position: relative; }
.best-track {
  display: flex; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  padding-left: var(--side); scroll-padding-left: var(--side);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.best-track::-webkit-scrollbar { display: none; }
.best-promo, .best-card { flex: none; scroll-snap-align: start; display: block; }
.best-promo {
  position: relative; width: var(--tile-w); height: var(--tile-h);
  overflow: hidden; background: #2b2f3a; color: #ffffff;
}
.best-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.best-promo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,31,42,.92) 0%, rgba(28,31,42,.6) 38%, rgba(28,31,42,.3) 62%, rgba(28,31,42,.78) 100%);
}
.best-promo-title {
  position: absolute; z-index: 1; top: 41px; left: 32px; right: 24px;
  font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 33px;
  text-transform: uppercase;
}
.best-btn {
  position: absolute; z-index: 1; left: 50%; bottom: 60px; transform: translateX(-50%);
  width: 157px; height: 55px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22);
  font-family: var(--font-display); font-weight: 500; font-size: 17.6px; text-transform: uppercase;
  transition: background-color .15s ease;
}
.best-promo:hover .best-btn { background: rgba(255,255,255,.34); }
.best-card { width: var(--card-w); padding-left: var(--card-pad); }
.best-img { display: block; aspect-ratio: 8 / 9; overflow: hidden; background: #ffffff; }
.best-img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; background: #fff; display: block; transition: transform .4s ease; }
.best-card:hover .best-img img { transform: scale(1.03); }
.best-name {
  display: block; margin-top: 33px;
  font-family: var(--font-display); font-weight: 500; font-size: 16.5px; line-height: 1.2;
  letter-spacing: .01em; text-transform: uppercase; color: #1d1a1b;
}
.best-desc {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 32px;
  font-family: var(--font-ui); font-weight: 300; font-size: 21.6px; line-height: 28px; color: #3a3a3a;
}
.best-arrow {
  position: absolute; top: 155px; z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0;
  background: #0b0b0b; color: #ffffff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease, background-color .15s ease;
}
.best-arrow:hover { background: #2a2a2a; }
.best-arrow svg { width: 18px; height: 18px; }
.best-next { right: 19px; }
.best-prev { left: 19px; }
.best-arrow[hidden] { display: none; }

/* ---------- Full-width photo banner ---------- */
.banner {
  position: relative; height: 100svh; min-height: 560px;
  overflow: hidden; background: #2a2622; color: #ffffff;
}
.banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; display: block;
}
.banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,10,9,.66) 0%, rgba(12,10,9,.5) 34%, rgba(12,10,9,.18) 64%, rgba(12,10,9,0) 100%),
    linear-gradient(0deg, rgba(12,10,9,.28) 0%, rgba(12,10,9,0) 40%);
}
.banner-copy {
  position: absolute; z-index: 1;
  left: clamp(24px, 10.5vw, 160px); bottom: 82px;
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: min(470px, calc(100% - 48px));
}
.banner-eyebrow {
  margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: 1.2;
  text-transform: uppercase;
}
.banner-title {
  margin: 23px 0 0;
  font-family: var(--font-ui); font-weight: 300; font-size: 35.2px; line-height: 42px;
  letter-spacing: -.005em;
}
.banner-btn {
  margin-top: 49px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 28px; border-radius: 3px;
  background: rgba(255,255,255,.26);
  font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap;
  transition: background-color .15s ease;
}
.banner-btn:hover { background: rgba(255,255,255,.4); }

/* ---------- About: four tall photo panels ---------- */
.about { background: #ffffff; color: #1d1a1b; padding: 64px 0 0; }
.about h2 {
  margin: 0 0 36px; padding-left: clamp(16px, 4.74vw, 72px);
  font-family: var(--font-ui); font-weight: 600; font-size: 22.4px; line-height: 1.2;
}
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.about-card {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 9 / 16; background: #3a3631; color: #ffffff;
}
.about-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform .6s ease;
}
.about-card:hover img { transform: scale(1.04); }
.about-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 28%, rgba(0,0,0,0) 52%);
}
.about-copy {
  position: absolute; z-index: 1; left: 42px; right: 42px; bottom: 33px;
}
.about-label {
  display: block; margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 500; font-size: 12.5px; line-height: 15px;
  letter-spacing: .04em; text-transform: uppercase;
}
.about-title {
  display: block;
  font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 27px;
  text-transform: uppercase;
}

/* ---------- Info block: message on the left, link columns on the right ---------- */
.info { background: #ffffff; color: #1d1a1b; padding: 100px 0 100px; }
.info-grid {
  display: grid;
  grid-template-columns: minmax(0, 666fr) minmax(0, 242fr) minmax(0, 250fr) minmax(0, 190fr);
  padding-left: clamp(24px, 6.84vw, 104px);
  padding-right: clamp(24px, 4.5vw, 68px);
}
.info h2, .info h3 {
  margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: 1.2;
  letter-spacing: .005em; text-transform: uppercase; white-space: nowrap;
}
.info-lead {
  margin: 15px 0 0; max-width: 600px;
  font-family: var(--font-ui); font-weight: 300; font-size: 32px; line-height: 42px;
}
.info-btn {
  margin-top: 33px;
  display: inline-flex; align-items: center; justify-content: center;
  height: 54px; padding: 0 28px; border-radius: 3px;
  background: #5c5c5c; color: #ffffff;
  font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: .01em;
  text-transform: uppercase; white-space: nowrap;
  transition: background-color .15s ease;
}
.info-btn:hover { background: #444444; }
.info-links { list-style: none; margin: 15px 0 0; padding: 0; }
.info-links li { margin: 0 0 12px; }
.info-links a {
  display: block; max-width: 190px;
  font-family: var(--font-ui); font-weight: 300; font-size: 15.5px; line-height: 23.2px;
}
.info-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Crimson footer band ---------- */
.band {
  --band: var(--accent);
  background: var(--band); color: #ffffff;
  padding: 64px clamp(24px, 5.4vw, 82px) 62px clamp(24px, 4.74vw, 72px);
}
.band-top, .band-bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, auto); column-gap: 0;
}
.band-tag {
  margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 33.6px;
  text-transform: uppercase;
}
.band-tag span { display: block; font-weight: 400; }
.band-follow-title {
  margin: 0;
  font-family: var(--font-display); font-weight: 600; font-size: 25.6px; line-height: 1.2;
  text-transform: uppercase; white-space: nowrap;
}
.social { display: flex; align-items: center; gap: 19px; list-style: none; margin: 30px 0 0; padding: 0; }
.social a { display: flex; width: 21px; height: 21px; color: #ffffff; }
.social svg { width: 100%; height: 100%; }
.social .cut { fill: var(--band); }
.band-bottom { margin-top: 81px; align-items: center; }
.legal { display: flex; flex-wrap: wrap; column-gap: 16.8px; row-gap: 6px; list-style: none; margin: 0; padding: 0; }
.legal a, .band-copy {
  font-family: var(--font-ui); font-weight: 300; font-size: 16.8px; line-height: 24px; white-space: nowrap;
}
.legal a:hover { text-decoration: underline; text-underline-offset: 3px; }
.band-right { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.lang { display: inline-flex; align-items: center; gap: 12px; color: #ffffff; }
.lang svg { width: 17px; height: 17px; }
.lang span { font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: .02em; }

/* ---------- Hover menu (mega menu) ---------- */
.header-wash {
  position: absolute; left: 0; right: 0; top: 0; height: 167px;
  background: #ffffff; border-bottom: 1px solid #e2e0e0;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.mega-open .header-wash { opacity: 1; }
.nav-row a, .nav-row .icon { transition: color .2s ease, opacity .15s ease; }
.mega-open .header .nav-row a, .mega-open .header .nav-row .icon { color: #1d1a1b; }
.nav-row [data-menu][aria-expanded="true"], .tb-nav [data-menu][aria-expanded="true"] {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px;
}
.mega {
  position: fixed; left: 0; right: 0; z-index: 45;
  background: #ffffff; color: #1d1a1b;
  box-shadow: 0 28px 40px -20px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  pointer-events: none;
}
.mega.open {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .18s ease, transform .18s ease, visibility 0s;
}
.mega-panel { display: none; padding: 49px 96px 64px; }
.mega-panel.active { display: flex; align-items: flex-start; }
.mega-lists { flex: 1; min-width: 0; }
.mega-label {
  margin: 0 0 6px;
  font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; line-height: 20px; letter-spacing: .02em;
}
.mega-group + .mega-group { margin-top: 16px; }
.mega-cols { display: grid; grid-template-columns: 232px 232px; align-items: start; }
.mega-cols ul { list-style: none; margin: 0; padding: 0; }
.mega-cols li { margin: 0 0 8.5px; }
.mega-cols a {
  display: block; max-width: 180px;
  font-family: var(--font-ui); font-weight: 300; font-size: 17px; line-height: 25.6px;
}
.mega-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mega-cards { display: flex; gap: 32px; margin-left: auto; padding-left: 40px; }
.mega-card {
  position: relative; display: block; flex: none;
  width: 288px; aspect-ratio: 288 / 368; overflow: hidden; background: #3a3631; color: #ffffff;
}
.mega-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.mega-card:hover img { transform: scale(1.03); }
.mega-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 38%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%);
}
.mega-card-title {
  position: absolute; z-index: 1; top: 44px; left: 25px; right: 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 33px; text-transform: uppercase;
}
.mega-card-link {
  position: absolute; z-index: 1; left: 25px; right: 20px; bottom: 41px;
  font-family: var(--font-ui); font-weight: 700; font-size: 16.5px; line-height: 22.4px; text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 1100px) { .mega { display: none; } }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
  :root { --side-l: 32px; --side-r: 32px; }
  .nav-main { gap: 18px; }
  .nav-util a.text { display: none; }
  .tb-util a.text { display: none; }
  .tb-util .first-icon { margin-left: 0; }
  .nav-util .first-icon { margin-left: 0; }
  .hero-copy { left: max(64px, env(safe-area-inset-left, 0px)); }
}
@media (max-width: 720px) {
  :root { --side-l: 16px; --side-r: 16px; }
  .brand { width: 128px; height: 82px; gap: 8px; }
  .brand-mark { height: 34px; width: auto; }
  .brand-word { font-size: 8.5px; }
  .search { top: 92px; left: max(16px, env(safe-area-inset-left, 0px)); width: auto; }
  .nav-row { top: 24px; left: auto; height: 28px; }
  .nav-main { display: none; }
  .nav-scroll {
    position: absolute; top: 146px;
    left: 0; right: 0;
    overflow-x: auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    scrollbar-width: none;
  }
  .nav-scroll::-webkit-scrollbar { display: none; }
  .nav-scroll .nav-main { display: flex; gap: 20px; }
  .nav-scroll .nav-main a { font-size: 15px; }
  .hero-copy { left: max(24px, env(safe-area-inset-left, 0px)); bottom: 110px; gap: 32px; }
  .hero-copy h1 { font-size: 52px; }
  .best { --tile-w: 240px; --tile-h: 470px; --card-w: 280px; --card-pad: 16px; padding-bottom: 80px; }
  .best-promo-title { font-size: 28px; line-height: 30px; top: 32px; left: 24px; }
  .best-btn { bottom: 40px; }
  .best-desc { font-size: 18px; line-height: 24px; margin-top: 20px; }
  .best-name { margin-top: 22px; }
  .best-arrow { display: none; }
  .banner-copy { bottom: 56px; }
  .banner-eyebrow { font-size: 18px; }
  .banner-title { font-size: 28px; line-height: 34px; margin-top: 16px; }
  .banner-btn { margin-top: 32px; height: 48px; padding: 0 20px; font-size: 15px; }
  .about { padding-top: 48px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-card { aspect-ratio: 4 / 5; }
  .about-copy { left: 24px; right: 24px; bottom: 28px; }
  .about-title { font-size: 26px; line-height: 30px; }
  .info { padding: 64px 0; }
  .info-grid { grid-template-columns: 1fr 1fr; padding-left: 24px; padding-right: 24px; column-gap: 24px; row-gap: 40px; }
  .info-col:last-child { grid-column: 1 / -1; }
  .info-lead { font-size: 24px; line-height: 32px; }
  .info-links a { font-size: 15px; }
  .band { padding-top: 48px; padding-bottom: 40px; }
  .band-tag { font-size: 24px; line-height: 28px; }
  .legal { flex-direction: column; }
  .topbar { height: 56px; }
  .tb-brand { width: 56px; height: 56px; }
  .tb-brand svg { width: 26px; height: 26px; }
  .tb-brand img { height: 32px; }
  .tb-nav { display: none; }
  .tb-util { padding-right: 16px; }
  .cats { padding-top: 80px; padding-bottom: 80px; }
  .cats h2 { margin-bottom: 40px; padding-left: 0; }
  .cat-grid { grid-template-columns: 1fr; gap: 16px; }
  .cat-title { top: 40px; left: 28px; font-size: 34px; }
  .cat-tag { padding: 36px 28px 0; font-size: 30px; line-height: 40px; }
}
@media (max-width: 1100px) {
  .band-top, .band-bottom { grid-template-columns: 1fr; row-gap: 32px; }
  .band-bottom { margin-top: 48px; align-items: start; }
  .band-right { justify-content: flex-start; gap: 40px; }
  .info-grid { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
  .info-main { grid-column: 1 / -1; }
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .about-card { aspect-ratio: 3 / 4; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .cat-grid { gap: 16px; }
  .cat-title { top: 36px; left: 24px; font-size: 28px; }
  .cat-tag { padding: 30px 24px 0; font-size: 24px; line-height: 32px; }
  .cats h2 { margin-bottom: 56px; }
}
@media (min-width: 721px) { .nav-scroll { display: none; } }
@media (prefers-reduced-motion: reduce) { .cta, .cue, .topbar, .topbar.show { transition: none; } }
html,body{margin:0}
@media (max-width: 1100px) {
  .about-card:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 3 / 2; }
}