/* MMM Embroidery site styles: tokens, header, buttons, footer and the homepage (the catalog page adds catalog.css). Layout follows references/NOVA-01-homepage-hero.webp exactly.
   Desktop: every size is in reference pixels (the comp is 1536 wide) times --u, so the composition keeps its exact
   proportions at any desktop width from 1180px up. Phones and tablets get their own stacked layout at the bottom of this file. */

/* Fonts are self-hosted (M-07, 10/23): the variable Latin files the owner app already uses, and the catalog/services script
   face. All three are SIL Open Font License (Google Fonts). font-display: swap, as Google Fonts served them. */
@font-face { font-family: "Inter Tight"; src: url("../fonts/inter-tight-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Mrs Saint Delafield"; src: url("../fonts/mrs-saint-delafield-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --u: min(calc(100vw / 1536), 1.25px);
  --ink: #0a0a0a;
  --ink-2: #1c1b19;
  --mute: #75726d;
  --cream: #efebe3;
  --shelf: #e6e3dd;
  --card: #f6f5f2;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ui: "Inter", system-ui, sans-serif;
  /* the phone's safe areas (home indicator, notch in landscape), one property each so every docked bar reads the same value
     (the page sets viewport-fit=cover, so these are real on iPhones; 0 elsewhere) */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--shelf);
  color: var(--ink);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-left: var(--safe-l); padding-right: var(--safe-r);   /* landscape iPhone: keep the page clear of the notch */
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input { font: inherit; }

/* arrow icon used everywhere */
.arr {
  display: inline-block;
  width: 1.05em; height: 1.05em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  vertical-align: -0.16em;
}
.arr--left { transform: scaleX(-1); }
.arr--thin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h17M14 6l6 6-6 6'/%3E%3C/svg%3E");
}
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ========================= HERO (0 - 538) ========================= */
.hero {
  position: relative;
  height: calc(538 * var(--u));
  overflow: hidden;
  background: var(--cream);
}
.hero__bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(118deg, rgba(0,0,0,0) 46%, rgba(150,136,120,.16) 62%, rgba(90,82,74,.28) 80%),
    linear-gradient(180deg, #eeebe3 0%, #f0ece4 52%, #e7e2d8 100%);
}
.hero__photo {
  position: absolute; top: 0; bottom: 0;
  left: calc(468 * var(--u)); width: calc(624 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 9%, rgba(0,0,0,.8) 22%, #000 32%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.3) 9%, rgba(0,0,0,.8) 22%, #000 32%);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 55%; filter: brightness(.86) contrast(1.06); }
.hero__photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 27% at 0% 0%, rgba(239,235,227,.92) 0%, rgba(239,235,227,.55) 45%, rgba(239,235,227,0) 100%),
    linear-gradient(180deg, rgba(25,24,22,.22) 0%, rgba(25,24,22,0) 22%),
    linear-gradient(90deg, rgba(25,24,22,0) 45%, rgba(25,24,22,.45) 78%, rgba(20,20,18,.85) 100%);
}
.hero__dark {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(1010 * var(--u));
  background: linear-gradient(90deg, rgba(20,20,18,0) 0%, rgba(20,20,18,.85) 9%, #141412 18%, #121210 100%);
}

/* header */
.hdr {
  position: absolute; top: 0; left: 0; right: 0;
  height: calc(64 * var(--u));
  z-index: 5;
}
.logo { position: absolute; left: calc(57 * var(--u)); top: calc(15 * var(--u)); display: flex; align-items: center; gap: calc(9 * var(--u)); }
.logo__mark { height: calc(32 * var(--u)); width: auto; }
.logo__words { display: flex; flex-direction: column; line-height: 1; }
.logo__name { font-family: var(--display); font-weight: 900; font-size: calc(16.5 * var(--u)); letter-spacing: -0.005em; white-space: nowrap; }
.logo__sub { font-family: var(--display); font-weight: 500; font-size: calc(6.2 * var(--u)); letter-spacing: 0.34em; margin-top: calc(3.5 * var(--u)); white-space: nowrap; }
.nav {
  position: absolute; left: calc(288 * var(--u)); top: 0; height: calc(64 * var(--u));
  display: flex; align-items: center; gap: calc(27 * var(--u));
  font-size: calc(12 * var(--u)); font-weight: 500; color: #1f1e1c;
}
.hdr__search {
  position: absolute; left: calc(933 * var(--u)); top: calc(15 * var(--u));
  width: calc(291 * var(--u)); height: calc(34 * var(--u));
  border-radius: calc(7 * var(--u));
  background: rgba(246,245,242,.95);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  display: flex; align-items: center;
}
.hdr__search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  padding: 0 calc(14 * var(--u)); font-size: calc(10.5 * var(--u)); color: var(--ink);
}
.hdr__search input::placeholder { color: #8f8c87; }
.hdr__search svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-right: calc(12 * var(--u)); color: #1a1a1a; stroke-width: 1.8; }
.hdr__icon { position: absolute; left: calc(1252 * var(--u)); top: calc(23 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #f4f3f0; }
.hdr__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.hdr__login { position: absolute; left: calc(1296 * var(--u)); top: calc(24 * var(--u)); font-size: calc(12.5 * var(--u)); color: #f4f3f0; font-weight: 500; }
.hdr .pill--dark { position: absolute; left: calc(1352 * var(--u)); top: calc(15 * var(--u)); }
.hdr__menu { display: none; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(7 * var(--u));
  height: calc(34 * var(--u)); padding: 0 calc(16 * var(--u));
  border-radius: 999px; font-size: calc(11.5 * var(--u)); font-weight: 500; white-space: nowrap;
}
.pill--dark { background: #060606; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.pill .arr { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* copy */
.hero__copy { position: absolute; left: calc(56 * var(--u)); top: 0; z-index: 3; }
.eyebrow {
  position: absolute; top: calc(102 * var(--u)); left: calc(1 * var(--u)); white-space: nowrap;
  font-family: var(--display); font-size: calc(12.4 * var(--u)); font-weight: 400;
  letter-spacing: 0.135em; text-transform: uppercase; color: #66635d;
}
.h1 {
  position: absolute; top: calc(129 * var(--u)); left: 0; width: calc(560 * var(--u));
  font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: calc(63.5 * var(--u)); line-height: calc(57.5 * var(--u)); letter-spacing: -0.004em;
  background: linear-gradient(172deg, #050505 0%, #0b0b0b 60%, #2c2c2c 86%, #5a5856 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h1 span { display: block; }
.hero__sub {
  position: absolute; top: calc(314 * var(--u)); left: calc(1 * var(--u)); width: calc(305 * var(--u));
  font-size: calc(13.4 * var(--u)); line-height: calc(18 * var(--u)); color: #393734;
}
.hero__ctas { position: absolute; top: calc(390 * var(--u)); left: calc(1 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  height: calc(42 * var(--u)); border-radius: calc(6 * var(--u));
  font-size: calc(13.5 * var(--u)); font-weight: 500; white-space: nowrap;
}
.btn .arr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.btn--dark { width: calc(154 * var(--u)); background: #050607; color: #fff; }
.btn--light { width: calc(141 * var(--u)); background: #fff; color: #0c0c0c; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(60,50,40,.06); }
.trust {
  position: absolute; top: calc(466 * var(--u)); left: calc(2 * var(--u));
  display: flex; gap: calc(24 * var(--u)); white-space: nowrap;
  font-size: calc(11.8 * var(--u)); color: #6f6c67;
}
.trust li { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.trust svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #5e5b57; stroke-width: 1.3; }

/* glass card */
.glass {
  position: absolute; z-index: 2;
  left: calc(1044 * var(--u)); right: 0; top: calc(72 * var(--u)); height: calc(232 * var(--u));
  border-radius: calc(12 * var(--u)) 0 0 calc(12 * var(--u));
  overflow: hidden;
  background: linear-gradient(140deg, rgba(95,94,91,.66) 0%, rgba(44,44,42,.84) 34%, rgba(22,22,21,.92) 70%);
  border: 1px solid rgba(255,255,255,.14); border-right: 0;
  -webkit-backdrop-filter: blur(16px) saturate(110%); backdrop-filter: blur(16px) saturate(110%);
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.glass__img { position: absolute; top: 0; bottom: 0; right: 0; width: calc(300 * var(--u)); }
.glass__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.glass__img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.6) 22%, #000 45%);
}
.glass__img img { filter: brightness(.9); }
.glass__copy { position: absolute; left: calc(21 * var(--u)); top: calc(28 * var(--u)); color: #f3f2ef; }
.glass__title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: calc(24 * var(--u)); line-height: calc(26.5 * var(--u)); letter-spacing: 0.005em;
}
.glass__rule { display: block; width: calc(33 * var(--u)); height: 1px; background: rgba(255,255,255,.5); margin-top: calc(9 * var(--u)); }
.glass__list { margin-top: calc(18 * var(--u)); }
.glass__list li {
  font-family: var(--display); font-size: calc(12.4 * var(--u)); line-height: calc(26.5 * var(--u));
  letter-spacing: 0.04em; text-transform: uppercase; color: #cfcdc8;
}

/* tiles */
.tile {
  position: absolute; z-index: 2; overflow: hidden;
  top: calc(306 * var(--u)); height: calc(232 * var(--u));
}
.tile--photo { left: calc(1044 * var(--u)); width: calc(235 * var(--u)); border-radius: calc(10 * var(--u)); }
.tile--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%); }
.tile__cap {
  position: absolute; z-index: 1; left: calc(21 * var(--u)); top: calc(181 * var(--u));
  font-family: var(--display); font-size: calc(12.4 * var(--u)); line-height: calc(15.5 * var(--u));
  letter-spacing: 0.03em; text-transform: uppercase; color: #fff;
}
.tile__plus {
  position: absolute; z-index: 1; left: calc(185 * var(--u)); top: calc(180 * var(--u));
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.tile__plus::before, .tile__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: #111;
  width: calc(14 * var(--u)); height: 1.6px; transform: translate(-50%, -50%);
}
.tile__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.tile--stack {
  left: calc(1281 * var(--u)); right: 0;
  border-radius: calc(10 * var(--u)) 0 0 calc(10 * var(--u));
  background: linear-gradient(180deg, #ecebe8 0%, #e3e1dc 60%, #d9d6d0 100%);
}
.tile__title {
  position: absolute; left: calc(19 * var(--u)); top: calc(17 * var(--u)); z-index: 2;
  font-family: var(--display); font-size: calc(12.4 * var(--u)); line-height: calc(15.5 * var(--u));
  letter-spacing: 0.04em; text-transform: uppercase; color: #4b4945;
}
.tile--stack .arr--thin { position: absolute; z-index: 2; right: calc(26 * var(--u)); top: calc(25 * var(--u)); width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: #111; }
.stack { position: absolute; left: 0; right: 0; bottom: 0; height: calc(176 * var(--u)); }
.stack img {
  position: absolute; height: calc(196 * var(--u)); width: auto; max-width: none;
  filter: drop-shadow(-6px 4px 7px rgba(0,0,0,.22));
}
.stack img:nth-child(1) { left: calc(-44 * var(--u)); bottom: calc(-78 * var(--u)); z-index: 5; }
.stack img:nth-child(2) { left: calc(2 * var(--u)); bottom: calc(-62 * var(--u)); z-index: 4; }
.stack img:nth-child(3) { left: calc(48 * var(--u)); bottom: calc(-46 * var(--u)); z-index: 3; }
.stack img:nth-child(4) { left: calc(94 * var(--u)); bottom: calc(-30 * var(--u)); z-index: 2; }
.stack img:nth-child(5) { left: calc(140 * var(--u)); bottom: calc(-14 * var(--u)); z-index: 1; }

/* ========================= SHELF (538 -) ========================= */
.shelf { background: var(--shelf); padding-bottom: calc(26 * var(--u)); }
.finder { position: relative; height: calc(81 * var(--u)); }
.finder__search {
  position: absolute; left: calc(56 * var(--u)); top: calc(11 * var(--u));
  width: calc(600 * var(--u)); height: calc(51 * var(--u));
  background: #fdfdfc; border-radius: calc(10 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(70,60,50,.06);
  display: flex; align-items: center;
}
.spark { width: calc(21 * var(--u)); height: calc(21 * var(--u)); margin-left: calc(19 * var(--u)); color: #111; stroke-width: 1.6; }
.finder__search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  padding: 0 calc(14 * var(--u)); font-size: calc(15.5 * var(--u)); color: var(--ink);
}
.finder__search input::placeholder { color: #8d8a84; }
.finder__search button {
  width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin-right: calc(12 * var(--u));
  border-radius: 50%; background: #b5aa9d; color: #14100c; display: grid; place-items: center;
}
.finder__search button .arr { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.chips { position: absolute; left: calc(681 * var(--u)); top: calc(20 * var(--u)); display: flex; gap: calc(12 * var(--u)); }
.chip {
  display: inline-flex; align-items: center; gap: calc(7 * var(--u));
  height: calc(37 * var(--u)); padding: 0 calc(14 * var(--u)) 0 calc(13 * var(--u));
  border-radius: calc(7 * var(--u)); background: rgba(244,243,239,.92);
  border: 1px solid rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.03);
  font-size: calc(11.8 * var(--u)); font-weight: 500; color: #1d1c1a; white-space: nowrap;
}
.chip svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); stroke-width: 1.5; }
.chip svg .fill { fill: currentColor; stroke: none; }

.cats { display: flex; gap: calc(4 * var(--u)); padding-left: calc(23 * var(--u)); }
.cat {
  position: relative; flex: 0 0 calc(246 * var(--u)); height: calc(165 * var(--u));
  border-radius: calc(9 * var(--u)); overflow: hidden;
  background: linear-gradient(180deg, #f9f9f7 0%, #f2f1ed 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.cat__t, .cat__d, .cat__go { position: absolute; z-index: 2; left: calc(16 * var(--u)); }
.cat__t { top: calc(54 * var(--u)); font-family: var(--display); font-weight: 700; font-size: calc(13.4 * var(--u)); letter-spacing: 0.01em; text-transform: uppercase; color: #111; }
.cat__d { top: calc(77 * var(--u)); font-size: calc(11.6 * var(--u)); line-height: calc(14.5 * var(--u)); color: #76736e; }
.cat__go {
  top: calc(124 * var(--u)); width: calc(31 * var(--u)); height: calc(31 * var(--u));
  border-radius: 50%; background: #fff; display: grid; place-items: center; color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.cat__go .arr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.cat__img { position: absolute; z-index: 1; width: auto; max-width: none; filter: drop-shadow(0 10px 10px rgba(0,0,0,.16)); }
.cat__img--tee    { height: calc(150 * var(--u)); left: calc(96 * var(--u)); top: calc(12 * var(--u)); transform: rotate(-9deg); }
.cat__img--hood   { height: calc(152 * var(--u)); left: calc(120 * var(--u)); top: calc(10 * var(--u)); }
.cat__img--polo   { height: calc(140 * var(--u)); left: calc(100 * var(--u)); top: calc(14 * var(--u)); }
.cat__img--jacket { height: calc(152 * var(--u)); left: calc(118 * var(--u)); top: calc(9 * var(--u)); }
.cat__img--hat    { height: calc(96 * var(--u)); left: calc(124 * var(--u)); top: calc(34 * var(--u)); transform: rotate(-6deg); }
.cat__img--work   { height: calc(150 * var(--u)); left: calc(108 * var(--u)); top: calc(10 * var(--u)); }

.duo { display: flex; gap: calc(17 * var(--u)); margin-top: calc(11 * var(--u)); }
.make {
  position: relative; flex: 0 0 calc(782 * var(--u)); height: calc(240 * var(--u));
  background: #0c0c0c; border-radius: 0 calc(10 * var(--u)) calc(10 * var(--u)) 0; overflow: hidden;
}
.make__bg {
  position: absolute; top: 0; bottom: 0; right: 0; width: calc(470 * var(--u)); height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 18%, #000 45%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 18%, #000 45%);
  opacity: .92;
}
.make::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0c0c0c 0%, #141414 30%, rgba(20,20,20,0) 55%); }
.make__copy { position: absolute; z-index: 2; left: calc(57 * var(--u)); top: calc(38 * var(--u)); color: #fff; }
.make__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(25 * var(--u)); line-height: calc(26 * var(--u)); letter-spacing: 0.005em; }
.make__text { margin-top: calc(16 * var(--u)); font-size: calc(12.8 * var(--u)); line-height: calc(16.5 * var(--u)); color: #c9c7c2; }
.btn--white { margin-top: calc(18 * var(--u)); width: calc(191 * var(--u)); height: calc(36 * var(--u)); background: #fff; color: #111; font-size: calc(12.8 * var(--u)); }
.make__inset {
  position: absolute; z-index: 2; left: calc(619 * var(--u)); top: calc(26 * var(--u));
  width: calc(123 * var(--u)); height: calc(178 * var(--u)); object-fit: cover;
  border-radius: calc(12 * var(--u)); border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}

.pop {
  position: relative; flex: 0 0 calc(720 * var(--u)); height: calc(240 * var(--u));
  background: #f4f2ee; border-radius: calc(12 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  overflow: hidden;
}
.pop__head { position: absolute; left: calc(20 * var(--u)); right: calc(16 * var(--u)); top: calc(18 * var(--u)); display: flex; justify-content: space-between; }
.pop__title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: calc(19.5 * var(--u)); line-height: 1.1; letter-spacing: 0.01em; color: #121212; }
.pop__sub { margin-top: calc(4 * var(--u)); font-size: calc(12.6 * var(--u)); color: #66635d; }
.pop__ctl { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(1 * var(--u)); }
.pill--line { height: calc(32 * var(--u)); padding: 0 calc(18 * var(--u)); border: 1px solid #cbc6bf; border-radius: calc(10 * var(--u)); background: rgba(255,255,255,.35); font-size: calc(12.4 * var(--u)); color: #141414; margin-right: calc(10 * var(--u)); }
.round { width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.08); color: #111; }
.round .arr { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.pop__rail {
  position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(64 * var(--u)); bottom: 0;
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none;
}
.pop__rail::-webkit-scrollbar { display: none; }
.prod { flex: 0 0 calc(136 * var(--u)); scroll-snap-align: start; position: relative; padding: 0 calc(8 * var(--u)); }
.prod + .prod::before { content: ""; position: absolute; left: 0; top: calc(4 * var(--u)); height: calc(96 * var(--u)); width: 1px; background: #e2dfd9; }
.prod img { height: calc(96 * var(--u)); width: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.12)); }
.prod b { display: block; margin-top: calc(11 * var(--u)); font-weight: 500; font-size: calc(12.8 * var(--u)); color: #151515; white-space: nowrap; }
.prod span { display: block; margin-top: calc(3 * var(--u)); font-size: calc(12.2 * var(--u)); color: #66635d; white-space: nowrap; }

[data-soon] { cursor: default; }

/* ===================== HOMEPAGE, BELOW THE FIRST SCREEN (reference: NOVA-02) ===================== */
.btn--lg { height: calc(46 * var(--u)); padding: 0 calc(26 * var(--u)); width: auto; font-size: calc(14 * var(--u)); }
.btn--lg .arr { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.eyebrow2 { font-family: var(--display); font-size: calc(12.4 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; color: #66635d; }
.eyebrow2--light { color: rgba(255,255,255,.62); }
.h2xl, .h2lg, .h2md, .h2cta {
  font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.006em;
  background: linear-gradient(172deg, #050505 0%, #0b0b0b 60%, #2c2c2c 86%, #5a5856 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h2xl { font-size: calc(59 * var(--u)); line-height: calc(64 * var(--u)); }
.h2lg { font-size: calc(40 * var(--u)); line-height: calc(44 * var(--u)); }
.h2md { font-size: calc(36 * var(--u)); line-height: calc(42 * var(--u)); margin-top: calc(8 * var(--u)); }
.h2md--light { background: none; color: #f5f4f1; -webkit-background-clip: border-box; background-clip: border-box; }
.h2cta { font-size: calc(46 * var(--u)); line-height: calc(52 * var(--u)); }

/* value props */
.props {
  display: grid; grid-template-columns: 378fr 366fr 386fr 360fr;
  padding: calc(34 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u)) calc(76 * var(--u));
  background: #f4f3ef;
}
.prop { display: flex; align-items: flex-start; gap: calc(26 * var(--u)); }
.prop__ic {
  flex: 0 0 auto; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%;
  border: 1.3px solid #1b1b1b; display: grid; place-items: center; color: #121212;
}
.prop__ic svg { width: calc(25 * var(--u)); height: calc(25 * var(--u)); stroke-width: 1.5; }
.prop > div > b { display: block; font-family: var(--display); font-weight: 500; font-size: calc(16.5 * var(--u)); color: #141414; margin-top: calc(3 * var(--u)); }
.prop > div > span { display: block; margin-top: calc(7 * var(--u)); font-size: calc(12.8 * var(--u)); line-height: calc(19 * var(--u)); color: #66635d; }

/* wide band */
.band { position: relative; height: calc(504 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #f1f0ec 0%, #ecebe7 100%); }
.band__img {
  position: absolute; top: 0; bottom: 0; right: 0; width: calc(1079 * var(--u)); height: 100%; object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 12%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.45) 12%, #000 34%);
}
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0) 55%, rgba(8,8,8,.55) 78%, rgba(8,8,8,.78) 100%); }
.band__copy { position: absolute; z-index: 2; left: calc(78 * var(--u)); top: calc(78 * var(--u)); }
.band__text { margin-top: calc(26 * var(--u)); width: calc(390 * var(--u)); font-size: calc(15.4 * var(--u)); line-height: calc(24 * var(--u)); color: #45433f; }
.band .btn--lg { margin-top: calc(32 * var(--u)); }
.band__tags { position: absolute; z-index: 2; left: calc(1234 * var(--u)); top: calc(76 * var(--u)); }
.band__tags li {
  position: relative; height: calc(61 * var(--u)); padding-left: calc(92 * var(--u));
  font-family: var(--display); font-size: calc(12.8 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; color: #f2f1ee;
  display: flex; align-items: flex-start;
}
.band__tags li::before { content: ""; position: absolute; left: 0; top: calc(8 * var(--u)); width: calc(76 * var(--u)); height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.85)); }
.band__tags li::after { content: ""; position: absolute; left: calc(72 * var(--u)); top: calc(5.5 * var(--u)); border: calc(3.2 * var(--u)) solid transparent; border-left: calc(5 * var(--u)) solid #fff; }

/* story */
.story { position: relative; height: calc(450 * var(--u)); margin-top: calc(44 * var(--u)); }
.vid { position: absolute; left: calc(54 * var(--u)); top: 0; width: calc(696 * var(--u)); height: 100%; border-radius: calc(14 * var(--u)); overflow: hidden; background: #111; }
.vid__v { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%); }
.vid__label {
  position: absolute; z-index: 2; left: calc(22 * var(--u)); bottom: calc(26 * var(--u)); width: calc(282 * var(--u));
  padding: calc(18 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  border-radius: calc(12 * var(--u)); background: rgba(40,38,36,.42); border: 1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff;
}
.vid__badge { display: inline-block; padding: calc(4 * var(--u)) calc(8 * var(--u)); border: 1px solid rgba(255,255,255,.55); border-radius: calc(3 * var(--u)); font-family: var(--display); font-size: calc(10 * var(--u)); letter-spacing: .12em; }
.vid__label b { display: block; margin-top: calc(14 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; }
.vid__label > span:last-child { display: block; margin-top: calc(5 * var(--u)); font-size: calc(14.5 * var(--u)); color: rgba(255,255,255,.85); }
.story__copy { position: absolute; left: calc(827 * var(--u)); top: calc(26 * var(--u)); }
.story__text { margin-top: calc(22 * var(--u)); width: calc(470 * var(--u)); font-size: calc(15.4 * var(--u)); line-height: calc(24.5 * var(--u)); color: #5a5752; }
.stats { display: flex; margin: calc(40 * var(--u)) 0 0; }
.stats div:nth-child(1) { width: calc(191 * var(--u)); }
.stats div:nth-child(2) { width: calc(198 * var(--u)); }
.stats div:nth-child(3) { width: calc(133 * var(--u)); }
.stats dt { font-family: "Inter", system-ui, sans-serif; font-weight: 700; font-size: calc(36 * var(--u)); line-height: 1; letter-spacing: -0.01em; color: #121212; }
.stats dd { margin: calc(12 * var(--u)) 0 0; font-family: var(--display); font-size: calc(12 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; color: #66635d; }
.story .btn--lg { margin-top: calc(44 * var(--u)); }

/* industries */
.ind { margin-top: calc(62 * var(--u)); }
.ind__head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 calc(52 * var(--u)) 0 calc(68 * var(--u)); }
.ind__ctl, .testi__ctl { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.pill--big { height: calc(44 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: calc(13.5 * var(--u)); border-radius: calc(12 * var(--u)); margin-right: calc(4 * var(--u)); }
.round--big { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.round--big .arr { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.ind__rail { display: flex; gap: calc(8.7 * var(--u)); margin-top: calc(24 * var(--u)); padding: 0 calc(52 * var(--u)); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.ind__rail::-webkit-scrollbar { display: none; }
.tile2 { flex: 0 0 calc(239 * var(--u)); scroll-snap-align: start; }
.tile2 img { width: 100%; height: calc(200 * var(--u)); object-fit: cover; border-radius: calc(11.7 * var(--u)); }
.tile2 b { display: block; margin-top: calc(16 * var(--u)); padding-left: calc(14 * var(--u)); font-family: var(--display); font-weight: 600; font-size: calc(12.6 * var(--u)); letter-spacing: 0.03em; text-transform: uppercase; color: #121212; }

/* testimonials */
.testi { margin-top: calc(52 * var(--u)); padding: calc(40 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(68 * var(--u)); background: radial-gradient(ellipse 60% 120% at 70% 0%, #1f1e1d 0%, #0f0f0f 60%, #0b0b0b 100%); }
.testi__head { display: flex; justify-content: space-between; align-items: flex-end; padding-right: calc(22 * var(--u)); }
.round--dark { width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: transparent; border: 1px solid rgba(255,255,255,.28); color: #f2f2f2; box-shadow: none; }
.round--dark .arr { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.quotes { display: flex; gap: calc(25 * var(--u)); margin: calc(30 * var(--u)) 0 0 calc(-5 * var(--u)); }
.quote {
  flex: 0 0 calc(455 * var(--u)); height: calc(214 * var(--u)); margin: 0; position: relative;
  padding: calc(28 * var(--u)) calc(40 * var(--u)) 0 calc(61 * var(--u));
  border-radius: calc(10 * var(--u)); background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1);
}
.quote blockquote { margin: 0; font-size: calc(18.6 * var(--u)); line-height: calc(29 * var(--u)); color: #ecebe8; }
.quote figcaption { position: absolute; left: calc(61 * var(--u)); bottom: calc(24 * var(--u)); display: grid; grid-template-columns: auto 1fr; column-gap: calc(14 * var(--u)); align-items: center; }
.av { grid-row: span 2; width: calc(46 * var(--u)); height: calc(46 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, #4a4845, #2a2928); color: #f1f0ed; font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: .04em; }
.quote figcaption b { font-size: calc(15.2 * var(--u)); font-weight: 600; color: #f4f3f0; }
.quote figcaption span:last-child { font-size: calc(13.4 * var(--u)); color: #9a9792; }

/* final call to action */
.cta { position: relative; height: calc(357 * var(--u)); overflow: hidden; background: linear-gradient(180deg, #f0efeb 0%, #e9e7e2 100%); }
.cta__img {
  position: absolute; top: 0; bottom: 0; right: 0; width: calc(903 * var(--u)); height: 100%; object-fit: cover; object-position: 50% 42%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 36%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 14%, #000 36%);
}
.cta__copy { position: absolute; z-index: 2; left: calc(78 * var(--u)); top: calc(58 * var(--u)); }
.cta__text { margin-top: calc(18 * var(--u)); font-size: calc(15.4 * var(--u)); line-height: calc(24 * var(--u)); color: #4d4b47; }
.cta__btns { display: flex; gap: calc(16 * var(--u)); margin-top: calc(30 * var(--u)); }

/* footer */
.foot { background: #f4f3ef; padding: calc(40 * var(--u)) calc(74 * var(--u)) calc(30 * var(--u)) calc(73 * var(--u)); }
.foot__top { position: relative; height: calc(232 * var(--u)); }   /* +32: the email line (B6) */
.logo--foot { position: absolute; left: 0; top: 0; }
.foot__col { position: absolute; top: 0; display: flex; flex-direction: column; gap: calc(12 * var(--u)); font-size: calc(14 * var(--u)); color: #66635d; }
.foot__col--1 { left: calc(265 * var(--u)); }
.foot__col--2 { left: calc(482 * var(--u)); }
.foot__col--3 { left: calc(699 * var(--u)); }
.foot__col b { font-family: var(--display); font-weight: 600; font-size: calc(14.6 * var(--u)); color: #131313; margin-bottom: calc(4 * var(--u)); }
.foot__text { position: absolute; right: 0; top: 0; width: calc(320 * var(--u)); }
.foot__text b { display: block; font-family: var(--display); font-weight: 600; font-size: calc(15 * var(--u)); color: #131313; }
.foot__text > span { display: block; margin-top: calc(9 * var(--u)); font-size: calc(12.4 * var(--u)); color: #66635d; }
.foot__field {
  display: flex; align-items: center; margin-top: calc(18 * var(--u)); height: calc(49 * var(--u));
  border: 1px solid #d6d2cb; border-radius: calc(10 * var(--u)); background: #f8f7f4; overflow: hidden;
}
.foot__field span { flex: 1; padding: 0 calc(20 * var(--u)); font-size: calc(13.4 * var(--u)); color: #3a3835; }
.foot__go { width: calc(50 * var(--u)); height: 100%; background: #0a0a0a; color: #fff; display: grid; place-items: center; }
.foot__go .arr { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.foot__bottom { display: flex; justify-content: space-between; align-items: center; margin-top: calc(24 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid #dedad3; font-size: calc(12.2 * var(--u)); color: #66635d; }
.foot__legal a { margin-left: calc(14 * var(--u)); color: #3a3835; text-decoration: underline; text-underline-offset: 3px; }
.social { display: flex; gap: calc(26 * var(--u)); }
.social a { width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: #161616; }
.social svg { width: 100%; height: 100%; stroke-width: 1.5; }
.social .dot { fill: currentColor; }

/* ========================= PHONES + TABLETS (below 1180px the exact desktop composition gets too small) ========================= */
@media (max-width: 1179px) {
  :root { --u: 1px; }
  .hero { height: auto; padding-bottom: 12px; background: var(--cream); }
  .hero__bg { background: linear-gradient(180deg, #eeebe3 0%, #f0ece4 60%, #e7e2d8 100%); }
  .hero__photo { position: relative; left: auto; width: auto; height: 360px; margin: 0 16px; border-radius: 12px; overflow: hidden;
    -webkit-mask-image: none; mask-image: none; order: 3; }
  .hero__dark { display: none; }
  .hero { display: flex; flex-direction: column; }
  .hdr { position: relative; order: 1; height: 60px; display: flex; align-items: center; padding: 0 16px; gap: 10px; }
  .logo { position: static; }
  .logo__mark { height: 30px; }
  .logo__name { font-size: 18px; }
  .logo__sub { font-size: 6.6px; letter-spacing: 0.355em; }
  .nav, .hdr__search, .hdr__login { display: none; }
  .hdr__icon { position: static; margin-left: auto; color: #111; width: 22px; height: 22px; }
  .hdr .pill--dark { display: none; }
  .hdr__menu { display: grid; gap: 5px; width: 40px; height: 40px; place-content: center; }
  .hdr__menu span { display: block; width: 20px; height: 1.6px; background: #111; }
  .hero__copy { position: relative; left: auto; order: 2; padding: 22px 16px 22px; }
  .eyebrow, .h1, .hero__sub, .hero__ctas, .trust { position: static; }
  .eyebrow { font-size: 11px; letter-spacing: .12em; white-space: normal; }
  .h1 { width: auto; margin-top: 12px; font-size: 46px; line-height: 43px; }
  .hero__sub { width: auto; max-width: 30em; margin-top: 16px; font-size: 15px; line-height: 22px; }
  .hero__ctas { margin-top: 20px; gap: 10px; }
  .btn { height: 46px; font-size: 15px; border-radius: 7px; }
  .btn--dark, .btn--light { flex: 1; width: auto; }
  .btn .arr { width: 15px; height: 15px; }
  .trust { margin-top: 18px; flex-wrap: wrap; gap: 10px 18px; font-size: 13px; white-space: normal; }
  .trust svg { width: 17px; height: 17px; }
  .glass { position: relative; order: 4; left: auto; top: auto; margin: 12px 16px 0; height: 210px; border-radius: 12px; border-right: 1px solid rgba(255,255,255,.14); }
  .glass__img { width: 58%; }
  .glass__copy { left: 18px; top: 22px; }
  .glass__title { font-size: 21px; line-height: 24px; }
  .glass__list { margin-top: 14px; }
  .glass__list li { font-size: 11.5px; line-height: 23px; }
  .tile { position: relative; top: auto; height: 210px; }
  .tile--photo, .tile--stack { order: 5; left: auto; right: auto; width: auto; border-radius: 12px; }
  .hero { display: grid; grid-template-columns: 1fr 1fr; }
  .hdr, .hero__copy, .hero__photo, .glass { grid-column: 1 / -1; }
  .hero__bg { z-index: 0; }
  .tile--photo { margin: 12px 6px 0 16px; }
  .tile--stack { margin: 12px 16px 0 6px; }
  .tile__cap { left: 14px; top: auto; bottom: 16px; font-size: 11.5px; line-height: 14px; }
  .tile__plus { left: auto; right: 12px; top: auto; bottom: 12px; width: 30px; height: 30px; }
  .tile__plus::before, .tile__plus::after { width: 12px; }
  .tile__title { left: 14px; top: 14px; font-size: 11.5px; line-height: 14px; }
  .tile--stack .arr--thin { right: 14px; top: 16px; width: 16px; height: 16px; }
  .stack { height: 150px; }
  .stack img { height: 128px; }
  .stack img:nth-child(1) { left: -22px; bottom: -18px; }
  .stack img:nth-child(2) { left: 12px; bottom: -10px; }
  .stack img:nth-child(3) { left: 46px; bottom: -2px; }
  .stack img:nth-child(4) { left: 80px; bottom: 6px; }
  .stack img:nth-child(5) { left: 114px; bottom: 14px; }

  .finder { height: auto; padding: 16px 16px 0; }
  .finder__search { position: relative; left: auto; top: auto; width: auto; height: 52px; }
  .spark { width: 20px; height: 20px; margin-left: 16px; }
  .finder__search input { font-size: 16px; }
  .finder__search button { width: 40px; height: 40px; margin-right: 6px; }
  .finder__search button .arr { width: 17px; height: 17px; }
  .chips { position: static; margin: 12px -16px 0; padding: 0 16px 4px; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { height: 38px; font-size: 13px; padding: 0 14px; border-radius: 8px; }
  .chip svg { width: 17px; height: 17px; }
  .cats { margin-top: 14px; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cat { height: 172px; border-radius: 10px; }
  .cat__t { left: 14px; top: 14px; font-size: 13px; }
  .cat__d { left: 14px; top: 36px; font-size: 11.5px; line-height: 14px; }
  .cat__go { left: 12px; top: auto; bottom: 12px; width: 32px; height: 32px; }
  .cat__go .arr { width: 14px; height: 14px; }
  .cat__img { height: 112px !important; left: auto !important; right: -4px; top: auto !important; bottom: -4px; }
  .duo { flex-direction: column; gap: 12px; margin-top: 14px; padding: 0 16px; }
  .make { flex: none; height: auto; min-height: 300px; border-radius: 12px; padding: 26px 18px 24px; }
  .make__bg { width: 100%; opacity: .55; -webkit-mask-image: none; mask-image: none; }
  .make::before { background: linear-gradient(180deg, rgba(12,12,12,.92) 0%, rgba(12,12,12,.72) 60%, rgba(12,12,12,.45) 100%); }
  .make__copy { position: relative; left: auto; top: auto; max-width: 62%; }
  .make__title { font-size: 22px; line-height: 25px; }
  .make__text { font-size: 14px; line-height: 20px; margin-top: 12px; }
  .make__text br { display: none; }
  .btn--white { width: auto; padding: 0 16px; height: 42px; font-size: 14px; margin-top: 18px; }
  .make__inset { left: auto; right: 16px; top: 26px; width: 30%; max-width: 130px; height: auto; aspect-ratio: 123 / 178; border-radius: 12px; }
  .pop { flex: none; height: auto; border-radius: 12px; padding: 18px 0 20px; }
  .pop__head { position: static; padding: 0 16px; }
  .pop__title { font-size: 18px; }
  .pop__sub { font-size: 13px; }
  .pill--line { display: none; }
  .round { width: 34px; height: 34px; }
  .round .arr { width: 14px; height: 14px; }
  .pop__rail { position: static; margin-top: 16px; padding: 0 8px; }
  .prod { flex: 0 0 44%; padding: 0 10px; }
  .prod + .prod::before { height: 110px; }
  .prod img { height: 110px; }
  .prod b { font-size: 14px; margin-top: 10px; }
  .prod span { font-size: 13px; }
}

@media (min-width: 640px) and (max-width: 1179px) {
  .hero__copy { padding: 34px 32px 26px; }
  .hdr { padding: 0 32px; }
  .h1 { font-size: 64px; line-height: 60px; }
  .hero__sub { font-size: 16px; line-height: 24px; }
  .hero__ctas { max-width: 460px; }
  .hero__photo { height: 480px; margin: 0 32px; }
  .glass { margin: 14px 32px 0; height: 240px; }
  .tile { height: 260px; }
  .tile--photo { margin: 14px 7px 0 32px; }
  .tile--stack { margin: 14px 32px 0 7px; }
  .finder, .cats, .duo { padding-left: 32px; padding-right: 32px; }
  .chips { margin: 12px -32px 0; padding: 0 32px 4px; }
  .cats { grid-template-columns: repeat(3, 1fr); }
  .prod { flex-basis: 30%; }
}

/* ===================== BELOW THE FIRST SCREEN: PHONES + TABLETS ===================== */
@media (max-width: 1179px) {
  .btn--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 7px; }
  .btn--lg .arr { width: 15px; height: 15px; }
  .eyebrow2 { font-size: 11px; }
  .h2xl { font-size: 40px; line-height: 42px; }
  .h2lg { font-size: 32px; line-height: 35px; }
  .h2md { font-size: 27px; line-height: 31px; margin-top: 6px; }
  .h2cta { font-size: 33px; line-height: 36px; }

  .props { grid-template-columns: 1fr 1fr; gap: 22px 18px; padding: 28px 16px; }
  .prop { gap: 12px; }
  .prop__ic { width: 44px; height: 44px; }
  .prop__ic svg { width: 21px; height: 21px; }
  .prop > div > b { font-size: 15px; margin-top: 2px; }
  .prop > div > span { font-size: 13px; line-height: 18px; margin-top: 5px; }
  .prop > div > span br { display: none; }

  .band { height: auto; padding: 36px 16px 30px; background: #0f0f0e; }
  .band__img { width: 100%; opacity: .5; -webkit-mask-image: none; mask-image: none; }
  .band::after { background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.75) 100%); }
  .band__copy { position: relative; left: auto; top: auto; }
  .band .h2xl { background: none; color: #f6f5f2; -webkit-background-clip: border-box; background-clip: border-box; }
  .band__text { width: auto; max-width: 30em; color: #d6d4cf; font-size: 15px; line-height: 23px; margin-top: 16px; }
  .band .btn--lg { margin-top: 22px; background: #fff; color: #111; }
  .band__tags { position: relative; left: auto; top: auto; margin-top: 26px; }
  .band__tags li { height: 36px; padding-left: 44px; font-size: 12.5px; }
  .band__tags li::before { width: 32px; top: 8px; }
  .band__tags li::after { left: 28px; top: 5px; border-width: 3.5px; border-left-width: 5px; }

  .story { height: auto; margin-top: 36px; padding: 0 16px; display: flex; flex-direction: column; gap: 26px; }
  .vid { position: relative; left: auto; width: auto; height: auto; aspect-ratio: 696 / 450; border-radius: 12px; }
  .vid__label { left: 12px; bottom: 12px; width: auto; max-width: 70%; padding: 12px 14px 13px; border-radius: 10px; }
  .vid__badge { font-size: 9px; padding: 3px 6px; }
  .vid__label b { margin-top: 8px; font-size: 15px; }
  .vid__label > span:last-child { font-size: 13px; margin-top: 3px; }
  .story__copy { position: static; }
  .story__text { width: auto; font-size: 15px; line-height: 23px; margin-top: 14px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 12px; margin-top: 24px; }
  .stats div:nth-child(n) { width: auto; }
  .stats dt { font-size: 30px; }
  .stats dd { font-size: 11px; margin-top: 8px; }
  .story .btn--lg { margin-top: 26px; }

  .ind { margin-top: 44px; }
  .ind__head { padding: 0 16px; align-items: flex-end; gap: 12px; }
  .pill--big { display: none; }
  .round--big { width: 38px; height: 38px; }
  .round--big .arr { width: 15px; height: 15px; }
  .ind__rail { gap: 10px; margin-top: 18px; padding: 0 16px; scroll-padding: 0 16px; }
  .tile2 { flex-basis: 62%; }
  .tile2 img { height: auto; aspect-ratio: 239 / 200; border-radius: 10px; }
  .tile2 b { font-size: 12.5px; margin-top: 10px; padding-left: 4px; }

  .testi { margin-top: 44px; padding: 34px 16px 30px; }
  .testi__head { padding-right: 0; gap: 12px; }
  .testi__ctl { display: none; }
  .quotes { flex-direction: column; gap: 12px; margin: 22px 0 0; }
  .quote { flex: none; height: auto; padding: 22px 20px 20px; border-radius: 10px; }
  .quote blockquote { font-size: 17px; line-height: 26px; }
  .quote figcaption { position: static; margin-top: 18px; column-gap: 12px; }
  .av { width: 40px; height: 40px; font-size: 13px; }
  .quote figcaption b { font-size: 15px; }
  .quote figcaption span:last-child { font-size: 13px; }

  .cta { height: auto; display: flex; flex-direction: column; }
  .cta__img { position: relative; order: 2; width: 100%; height: 220px; -webkit-mask-image: none; mask-image: none; }
  .cta__copy { position: relative; left: auto; top: auto; padding: 34px 16px 26px; }
  .cta__text { font-size: 15px; line-height: 23px; margin-top: 14px; }
  .cta__text br { display: none; }
  .cta__btns { flex-wrap: wrap; gap: 10px; margin-top: 22px; }

  .foot { padding: 34px 16px calc(26px + var(--safe-b)); }
  .foot__top { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .logo--foot, .foot__col, .foot__text { position: static; }
  .logo--foot { grid-column: 1 / -1; }
  .foot__col { gap: 10px; font-size: 14px; }
  .foot__col b { font-size: 14.5px; }
  .foot__col--3, .foot__text { grid-column: 1 / -1; }
  .foot__text { width: auto; }
  .foot__text b { font-size: 15px; }
  .foot__text > span { font-size: 13px; }
  .foot__field { height: 50px; border-radius: 10px; }
  .foot__field span { font-size: 15px; padding: 0 16px; }
  .foot__go { width: 52px; }
  .foot__go .arr { width: 17px; height: 17px; }
  .foot__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 18px; margin-top: 26px; padding-top: 20px; font-size: 12.5px; }
  .social { gap: 24px; }
  .social a { width: 22px; height: 22px; }
}
@media (min-width: 640px) and (max-width: 1179px) {
  .props { grid-template-columns: repeat(4, 1fr); padding: 30px 32px; }
  .band { padding: 50px 32px 40px; }
  .story, .ind__head, .testi, .foot { padding-left: 32px; padding-right: 32px; }
  .ind__rail { padding: 0 32px; }
  .tile2 { flex-basis: 30%; }
  .quotes { flex-direction: row; }
  .quote { flex: 1; }
  .cta__copy { padding: 44px 32px 32px; }
  .cta__img { height: 300px; }
  .foot__top { grid-template-columns: repeat(3, 1fr); }
  .foot__col--3 { grid-column: auto; }
}

/* ===================== MOTION (10/16, David): hero video + intro, colour reveals ===================== */
/* hero: his Barudan video (the same file as "Behind the Stitch") plays behind the copy, graded like the old still */
.hero__photo video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 38% 45%; filter: brightness(.86) contrast(1.06) saturate(.8) sepia(.12); }

/* colour reveals: his original-colour photo sits on the graded copy and fades in (hover, keyboard focus, or in view on touch) */
.is-color { opacity: 0; transition: opacity .7s ease; }
.ind__rail { padding-top: calc(12 * var(--u)); padding-bottom: calc(14 * var(--u)); margin-top: calc(12 * var(--u)); }
.tile2__img { position: relative; display: block; height: calc(200 * var(--u)); border-radius: calc(11.7 * var(--u)); overflow: hidden; transform: translateZ(0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.tile2 .tile2__img img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.tile2 .tile2__img img.is-color { opacity: 0; }
.tile2 { position: relative; transition: z-index 0s .5s; }
.tile2:hover, .tile2:focus-visible { z-index: 2; transition: none; }
.tile2:hover .tile2__img, .tile2:focus-visible .tile2__img { transform: scale(1.07); box-shadow: 0 16px 34px rgba(30, 25, 20, .24); }
.tile2:hover .tile2__img img, .tile2:focus-visible .tile2__img img { transform: scale(1.06); }
.tile2:hover .tile2__img img.is-color, .tile2:focus-visible .tile2__img img.is-color, .tile2.is-shown .tile2__img img.is-color { opacity: 1; }
.make .make__bg.is-color, .make .make__inset.is-color { opacity: 0; }
.make:hover .make__bg.is-color, .make.is-shown .make__bg.is-color { opacity: .92; }
.make:hover .make__inset.is-color, .make.is-shown .make__inset.is-color { opacity: 1; }
.band .band__img.is-color { opacity: 0; }
.band:hover .band__img.is-color, .band.is-shown .band__img.is-color { opacity: 1; }
/* final call to action: the storefront goes from muted to full colour as it scrolls in (--p set by home.js) */
.cta__img { filter: saturate(calc(.3 + .7 * var(--p, 0))) sepia(calc(.16 * (1 - var(--p, 0)))) brightness(calc(1.02 - .02 * var(--p, 0))); }

/* hero intro (R&R-style): the page starts empty, then the photo, copy and cards come in, about 2 s in all.
   Hidden only when JS runs (the "js" class), started by "intro-ready" (fonts loaded, 0.8 s at most); never with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.intro-ready) [data-intro] :is(.hdr, .hero__photo, .hero__dark, .eyebrow, .h1 > span, .hero__sub, .hero__ctas, .trust li, .glass, .tile--photo, .tile--stack),
  .js:not(.intro-ready) .shelf :is(.finder__search, .chip, .cat) { opacity: 0; }
  .intro-ready [data-intro] .hdr { animation: intro-fade .8s ease .05s backwards; }
  .intro-ready [data-intro] .hero__dark { animation: intro-fade 1.2s ease .15s backwards; }
  .intro-ready [data-intro] .hero__photo { animation: intro-reveal 1.4s cubic-bezier(.65, 0, .35, 1) .1s backwards; }
  .intro-ready [data-intro] .hero__photo video { animation: intro-zoom 2.4s cubic-bezier(.16, 1, .3, 1) .1s backwards; }
  .intro-ready [data-intro] .eyebrow { animation: intro-wipe .9s cubic-bezier(.65, 0, .35, 1) .25s backwards; }
  .intro-ready [data-intro] .h1 > span { animation: intro-line 1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .intro-ready [data-intro] .h1 > span:nth-child(1) { animation-delay: .35s; }
  .intro-ready [data-intro] .h1 > span:nth-child(2) { animation-delay: .45s; }
  .intro-ready [data-intro] .h1 > span:nth-child(3) { animation-delay: .55s; }
  .intro-ready [data-intro] .hero__sub { animation: intro-rise .9s cubic-bezier(.16, 1, .3, 1) .75s backwards; }
  .intro-ready [data-intro] .hero__ctas { animation: intro-rise .9s cubic-bezier(.16, 1, .3, 1) .88s backwards; }
  .intro-ready [data-intro] .trust li { animation: intro-rise .8s cubic-bezier(.16, 1, .3, 1) backwards; }
  .intro-ready [data-intro] .trust li:nth-child(1) { animation-delay: 1s; }
  .intro-ready [data-intro] .trust li:nth-child(2) { animation-delay: 1.08s; }
  .intro-ready [data-intro] .trust li:nth-child(3) { animation-delay: 1.16s; }
  .intro-ready [data-intro] .glass { animation: intro-card 1.1s cubic-bezier(.16, 1, .3, 1) .6s backwards; }
  .intro-ready [data-intro] .tile--photo { animation: intro-card 1s cubic-bezier(.16, 1, .3, 1) .8s backwards; }
  .intro-ready [data-intro] .tile--stack { animation: intro-card 1s cubic-bezier(.16, 1, .3, 1) .92s backwards; }
  .intro-ready .shelf .finder__search { animation: intro-wipe .9s cubic-bezier(.65, 0, .35, 1) 1.05s backwards; }
  .intro-ready .shelf .chip { animation: intro-rise .6s cubic-bezier(.16, 1, .3, 1) backwards; }
  .intro-ready .shelf .chip:nth-child(1) { animation-delay: 1.15s; }
  .intro-ready .shelf .chip:nth-child(2) { animation-delay: 1.2s; }
  .intro-ready .shelf .chip:nth-child(3) { animation-delay: 1.25s; }
  .intro-ready .shelf .chip:nth-child(4) { animation-delay: 1.3s; }
  .intro-ready .shelf .chip:nth-child(5) { animation-delay: 1.35s; }
  .intro-ready .shelf .chip:nth-child(6) { animation-delay: 1.4s; }
  .intro-ready .shelf .chip:nth-child(7) { animation-delay: 1.45s; }
  .intro-ready .shelf .cat { animation: intro-rise .9s cubic-bezier(.16, 1, .3, 1) backwards; }
  .intro-ready .shelf .cat:nth-child(1) { animation-delay: 1.2s; }
  .intro-ready .shelf .cat:nth-child(2) { animation-delay: 1.28s; }
  .intro-ready .shelf .cat:nth-child(3) { animation-delay: 1.36s; }
  .intro-ready .shelf .cat:nth-child(4) { animation-delay: 1.44s; }
  .intro-ready .shelf .cat:nth-child(5) { animation-delay: 1.52s; }
  .intro-ready .shelf .cat:nth-child(6) { animation-delay: 1.6s; }
}
@keyframes intro-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-reveal { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes intro-zoom { from { transform: scale(1.12); } to { transform: none; } }
@keyframes intro-wipe { 0% { opacity: 0; clip-path: inset(-12px 100% -12px -12px); } 15% { opacity: 1; } 100% { opacity: 1; clip-path: inset(-12px -12px -12px -12px); } }
@keyframes intro-line { 0% { opacity: 0; transform: translateY(.55em); clip-path: inset(0 -2% 100% -2%); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; clip-path: inset(-10% -2% -10% -2%); } }
@keyframes intro-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes intro-card { 0% { opacity: 0; transform: translateY(28px) scale(.965); filter: blur(6px); } 60% { filter: blur(0); } 100% { opacity: 1; transform: none; filter: none; } }

@media (max-width: 1179px) {
  .ind__rail { padding-top: 10px; padding-bottom: 12px; margin-top: 8px; }
  .tile2__img { height: auto; aspect-ratio: 239 / 200; border-radius: 10px; }
  .tile2:hover .tile2__img, .tile2:focus-visible .tile2__img { transform: scale(1.04); }
}

/* ===================== SHARED FRAME (tools/build_site.py): phone menu + "coming next" note ===================== */
.mnav { position: fixed; inset: 0; z-index: 90; background: rgba(15, 15, 14, .45); display: flex; justify-content: flex-end; }
.mnav[hidden] { display: none; }
.mnav__panel { width: min(400px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #f3f1ec; padding: 14px max(20px, var(--safe-r)) calc(24px + var(--safe-b)) 20px; display: flex; flex-direction: column; gap: 18px; box-shadow: -10px 0 40px rgba(0, 0, 0, .18); }
.mnav__top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.mnav .logo { position: static; }
.mnav .logo__mark { height: 30px; }
.mnav .logo__name { font-size: 18px; }
.mnav .logo__sub { font-size: 6.6px; letter-spacing: .355em; }
.mnav__close { width: 44px; height: 44px; border-radius: 50%; background: #fff; font-size: 26px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.mnav__links { display: grid; border-top: 1px solid #ddd9d1; }
.mnav__links a { padding: 15px 2px; border-bottom: 1px solid #ddd9d1; font-family: var(--display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: #111; }
.mnav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.mnav__ctas { display: grid; gap: 10px; margin-top: auto; }
.mnav__ctas .btn { width: 100%; height: 52px; font-size: 16px; border-radius: 8px; }
.mnav__call { text-align: center; font-size: 15px; color: #444; padding: 8px; }
html.is-menu-open { overflow: hidden; }
.soon {
  position: fixed; z-index: 95; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%);
  width: min(520px, calc(100% - 24px)); padding: 16px 48px 16px 18px; border-radius: 12px; background: #141413; color: #f4f2ee;
  display: grid; gap: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); font-size: 15px; line-height: 1.4;
}
.soon[hidden] { display: none; }
.soon .btn { justify-self: start; height: 42px; padding: 0 18px; width: auto; background: #fff; color: #111; font-size: 14px; border-radius: 7px; }
.soon__close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border-radius: 50%; color: #f4f2ee; font-size: 22px; line-height: 1; }
@media (prefers-reduced-motion: no-preference) {
  .soon:not([hidden]) { animation: soon-in .35s cubic-bezier(.16, 1, .3, 1); }
  .mnav:not([hidden]) .mnav__panel { animation: mnav-in .35s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes soon-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes mnav-in { from { transform: translateX(30px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ===================== LIGHT HEADER + BREADCRUMBS (shared: product, start, inner pages) ===================== */
.phead { position: relative; height: calc(108 * var(--u)); }
.hdr--light .hdr__icon, .hdr--light .hdr__login, .hdr--light .hdr__proj { color: #1c1b19; }
.hdr--light .hdr__search { background: #fff; border: 1px solid #e3e0da; box-shadow: none; }
.crumbs { position: absolute; left: calc(57 * var(--u)); top: calc(79 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(13.6 * var(--u)); color: #2e2c29; white-space: nowrap; }
.crumbs i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-right: 1.3px solid #777; border-top: 1.3px solid #777; transform: rotate(45deg); }
.crumbs span { color: #66635d; overflow: hidden; text-overflow: ellipsis; max-width: calc(700 * var(--u)); }

/* ===================== PROJECT (project.js): header button + count, drawer, desktop text card ===================== */
.hdr__proj { position: absolute; left: calc(1250 * var(--u)); top: calc(20 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); color: #f4f3f0; display: grid; place-items: center; }
.hdr__proj svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.hdr__count { position: absolute; top: calc(-7 * var(--u)); right: calc(-9 * var(--u)); min-width: calc(17 * var(--u)); height: calc(17 * var(--u)); padding: 0 calc(4 * var(--u)); border-radius: 99px; background: #d4512b; color: #fff; font: 700 calc(10 * var(--u))/calc(17 * var(--u)) "Inter", sans-serif; text-align: center; }
.hdr__count[hidden] { display: none; }
.hdr__proj.is-bump .hdr__count { animation: count-bump .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes count-bump { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@media (min-width: 1180px) { .hdr .hdr__icon { display: none; } }

.pdrawer { position: fixed; inset: 0; z-index: 92; background: rgba(15, 15, 14, .42); display: flex; justify-content: flex-end; }
.pdrawer[hidden] { display: none; }
.pdrawer__panel { width: min(440px, 100%); height: 100%; background: #f3f1ec; display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0, 0, 0, .18); padding-right: var(--safe-r); }
.pdrawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid #ddd9d1; }
.pdrawer__head h2 { font-family: var(--display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .01em; }
.pdrawer__head p { font-size: 13px; color: #66635d; margin-top: 2px; }
.pdrawer__x { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: #fff; font-size: 24px; line-height: 1; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.pdrawer__list { flex: 1; overflow-y: auto; padding: 12px 16px; display: grid; gap: 10px; align-content: start; }
.pitem { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.pitem.is-new { box-shadow: 0 0 0 2px #111; }
.pitem__img { width: 64px; height: 64px; border-radius: 8px; background: #efeeea; display: grid; place-items: center; overflow: hidden; }
.pitem__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pitem__img img.is-photo { object-fit: cover; mix-blend-mode: normal; }
.pitem__img svg { width: 28px; height: 28px; fill: none; stroke: #77746e; stroke-width: 1.5; }
.pitem b { display: block; font-size: 14px; font-weight: 600; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pitem span { display: block; font-size: 12.5px; line-height: 1.35; color: #66635d; margin-top: 2px; }
.pitem__acts { display: grid; gap: 4px; justify-items: end; }
.pitem__acts a, .pitem__acts button { font-size: 12.5px; color: #111; text-decoration: underline; text-underline-offset: 3px; padding: 4px 2px; }
.pdrawer__empty { padding: 30px 6px; text-align: center; color: #57544f; font-size: 15px; line-height: 1.5; display: grid; gap: 14px; justify-items: center; }
.pdrawer__foot { padding: 14px 16px calc(16px + var(--safe-b)); border-top: 1px solid #ddd9d1; display: grid; gap: 8px; }
.pdrawer__foot .btn { width: 100%; height: 50px; font-size: 15.5px; border-radius: 8px; }
.pdrawer__note { font-size: 12.5px; color: #66635d; text-align: center; }

.tcard { position: fixed; inset: 0; z-index: 96; background: rgba(15, 15, 14, .45); display: grid; place-items: center; padding: 16px; }
.tcard[hidden] { display: none; }
.tcard__box { position: relative; width: min(460px, 100%); max-height: 100%; overflow: auto; background: #f6f5f1; border-radius: 16px; padding: 26px 24px 22px; display: grid; gap: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.tcard__box h2 { font-family: var(--display); font-weight: 800; font-size: 24px; text-transform: uppercase; line-height: 1.05; }
.tcard__box p { font-size: 14.5px; color: #4b4945; line-height: 1.45; }
.tcard__num { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 10px; background: #fff; font-size: 20px; font-weight: 700; }
.tcard__num button { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 7px; background: #111; color: #fff; }
.tcard__qr { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: center; }
.tcard__qr[hidden] { display: none; }
.tcard__qr div { width: 180px; height: 180px; background: #fff; border-radius: 10px; padding: 8px; }
.tcard__qr div img, .tcard__qr div svg { width: 100%; height: 100%; display: block; }
.tcard__msg { font-size: 13px; color: #57544f; background: #fff; border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; max-height: 140px; overflow: auto; }
.tcard__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tcard__acts .btn { width: auto; height: 44px; padding: 0 16px; font-size: 14px; border-radius: 8px; }
.tcard__x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; background: #fff; font-size: 22px; line-height: 1; }
.toast { position: fixed; z-index: 97; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); padding: 12px 18px; border-radius: 10px; background: #141413; color: #f4f2ee; font-size: 14.5px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); white-space: nowrap; }
.toast[hidden] { display: none; }
/* the drawer's wide-screen header and labels (phones get their own below) */
.pdrawer__n, .pd-phone { display: none; }
.pdrawer__sumn + .pdrawer__pcs::before { content: " · "; }
.cartbar { display: none; }

/* ===================== PHONES (under 640 px, 10/22 mobile pass): the project sheet, the cart bar ===================== */
@media (max-width: 639px) {
  /* the project drawer is a full-height sheet: header, a list that scrolls on its own, the actions docked on the bottom edge */
  .pdrawer { bottom: auto; height: 100vh; height: 100dvh; align-items: flex-end; justify-content: stretch; }
  .pdrawer__panel { width: 100%; height: calc(100% - 8px); border-radius: 14px 14px 0 0; overflow: hidden; box-shadow: 0 -10px 40px rgba(0, 0, 0, .22); }
  .pdrawer__head { flex: 0 0 auto; padding: 14px max(12px, var(--safe-r)) 12px max(18px, var(--safe-l)); }
  .pdrawer__head h2 { font-size: 20px; line-height: 1.15; }
  .pdrawer__n { display: inline; }
  .pdrawer__sumn { display: none; }
  .pdrawer__sumn + .pdrawer__pcs::before { content: none; }
  .pdrawer__x { width: 44px; height: 44px; }
  .pdrawer__list { flex: 1 1 auto; min-height: 0; padding: 12px max(12px, var(--safe-r)) 16px max(12px, var(--safe-l)); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .pitem { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; padding: 8px 2px 8px 8px; }
  .pitem__img { width: 56px; height: 56px; }
  .pitem__acts { gap: 0; margin: -4px 0; }
  .pitem__acts a, .pitem__acts button { display: inline-flex; align-items: center; justify-content: flex-end; min-height: 44px; min-width: 44px; padding: 0 8px; font-size: 13.5px; }
  .pdrawer__foot { flex: 0 0 auto; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px;
    padding: 10px max(16px, var(--safe-r)) calc(12px + var(--safe-b)) max(16px, var(--safe-l));
    background: #fff; border-top: 1px solid #e2ded6; box-shadow: 0 -8px 22px rgba(30, 25, 20, .06); }
  .pdrawer__foot:empty { display: none; }
  .pdrawer__note { grid-column: 1 / -1; grid-row: 1; font-size: 12px; line-height: 1.35; }
  .pdrawer__foot .pdrawer__go { grid-column: 2; grid-row: 2; height: 52px; font-size: 16px; font-weight: 600; }
  .pdrawer__foot .pdrawer__keep { grid-column: 1; grid-row: 2; width: auto; height: 48px; padding: 0 6px; background: none; box-shadow: none;
    font-size: 15px; font-weight: 500; color: #2c2a27; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
  .pd-wide { display: none; }
  .pd-phone { display: inline; }
  .pdrawer__empty { padding: 26px 8px; }
  .pdrawer__empty .btn { width: 100%; max-width: 320px; height: 50px; }

  /* the cart bar: "3 items in your project · Continue", on the bottom edge once the project has an item (project.js) */
  .cartbar:not([hidden]) { display: block; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0;
    padding: 8px max(12px, var(--safe-r)) calc(8px + var(--safe-b)) max(12px, var(--safe-l));
    background: #fff; border-top: 1px solid #e2ded6; box-shadow: 0 -8px 22px rgba(30, 25, 20, .07); }
  .cartbar__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 4px 0 6px; text-align: left; }
  .cartbar__txt { flex: 1; min-width: 0; font-size: 15px; color: #3e3c38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cartbar__txt b { color: #111; font-weight: 700; }
  .cartbar__go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 8px; background: #050607; color: #fff; font-size: 15px; font-weight: 600; }
  .cartbar__go .arr { width: 15px; height: 15px; }
  .cartbar__btn:focus-visible { outline: 2px solid #111; outline-offset: 2px; border-radius: 10px; }
  html.has-cartbar body { padding-bottom: calc(64px + var(--safe-b)); }   /* the end of the page scrolls clear of the bar */
  html.has-cartbar .toast, html.has-cartbar .soon { bottom: calc(76px + var(--safe-b)); }
  html.is-menu-open .cartbar, body.filters-open .cartbar { display: none; }
  html.is-menu-open .toast { bottom: calc(118px + var(--safe-b)); }   /* above the sheet's docked actions ("Updated your …" shows with it) */
  .gi-full:not(.gi-done) .cartbar { visibility: hidden; }   /* first visit: never on top of the home intro */
  .toast { left: 12px; right: 12px; width: fit-content; max-width: none; margin: 0 auto; transform: none; white-space: normal; text-align: center; }
}
@media (max-width: 639px) and (prefers-reduced-motion: no-preference) {
  .pdrawer:not([hidden]) { animation: pd-fade .25s ease; }
  .pdrawer:not([hidden]) .pdrawer__panel { animation: pd-up .38s cubic-bezier(.16, 1, .3, 1); }
  .cartbar.is-in:not([hidden]) { animation: pd-up .38s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes pd-fade { from { background-color: rgba(15, 15, 14, 0); } }
@keyframes pd-up { from { transform: translateY(100%); } to { transform: none; } }

@media (max-width: 1179px) {
  .phead { height: auto; }
  .hdr--light { position: relative; }
  .crumbs { position: static; padding: 2px 16px 12px; font-size: 13px; gap: 8px; }
  .crumbs i { width: 6px; height: 6px; }
  .crumbs span { max-width: 52vw; }
  .hdr__proj { position: relative; left: auto; top: auto; margin-left: auto; width: 26px; height: 26px; color: #111; }
  .hdr .hdr__icon { margin-left: 8px; }
  .hdr__count { top: -6px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }
  /* 10/22 mobile pass: the bag, Text and menu buttons get 44 px targets; the icons keep their size and place */
  .hdr { gap: 0; }
  .hdr__proj { width: 44px; height: 44px; }
  .hdr__proj svg { width: 26px; height: 26px; }
  .hdr__count { top: 3px; right: 0; }
  .hdr .hdr__icon { width: 44px; height: 44px; margin-left: 0; display: grid; place-items: center; }
  .hdr .hdr__icon svg { width: 22px; height: 22px; }
  .hdr__menu { width: 44px; height: 44px; margin-right: -4px; }
  .round { position: relative; }
  .round::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }   /* the rail arrows: a 44 px target, same circle */
}

/* ===================== 404 (src/pages/notfound.html) ===================== */
body.page-nf { background: #f3f2ee; }
.nf { max-width: 900px; padding: 40px 57px 90px; }
.nf__h1 { margin-top: 10px; font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 5vw, 58px); line-height: .98; letter-spacing: -.01em; color: #0d0d0d; }
.nf__sub { margin-top: 14px; max-width: 52ch; font-size: 17px; line-height: 1.5; color: #57544f; }
.nf__search { margin-top: 24px; display: flex; gap: 8px; max-width: 560px; }
.nf__search input { flex: 1; min-width: 0; height: 50px; padding: 0 14px; border-radius: 9px; border: 1px solid #dcd8d1; background: #fff; font-size: 15px; }
.nf__search .btn { width: auto; height: 50px; padding: 0 22px; border-radius: 9px; }
.nf__links { margin-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nf__card { display: grid; gap: 4px; padding: 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.nf__card b { font-size: 15px; color: #111; } .nf__card span { font-size: 13px; color: #66635d; }
.nf__card:hover { box-shadow: 0 10px 24px rgba(30, 25, 20, .12); }
@media (max-width: 1179px) { .nf { padding: 20px 16px 70px; } .nf__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nf__search input { font-size: 16px; } }

/* ===================== HOME: THREE DOORS (between the shelf and the reasons) ===================== */
.doors3 { padding: calc(34 * var(--u)) calc(57 * var(--u)) calc(30 * var(--u)); background: #f3f1ec; }
.doors3__head { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(40 * var(--u)); }
.doors3__sub { max-width: calc(470 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: calc(21 * var(--u)); color: #57544f; }
.doors3__row { margin-top: calc(20 * var(--u)); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.door3 { position: relative; display: grid; grid-template-columns: calc(170 * var(--u)) minmax(0, 1fr); min-height: calc(150 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.door3:hover, .door3:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(30, 25, 20, .16); }
.door3__img { position: relative; overflow: hidden; background: linear-gradient(180deg, #ecebe7, #e4e2dd); }
.door3__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.door3__img img.is-color { opacity: 0; }
.door3:hover .door3__img img, .door3:focus-visible .door3__img img { transform: scale(1.05); }
.door3:hover .door3__img img.is-color, .door3:focus-visible .door3__img img.is-color, .door3.is-shown .door3__img img.is-color { opacity: 1; }
.door3__img--stack img { inset: auto; width: auto; height: 74%; bottom: 10%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .18)); }
.door3__img--stack img:nth-child(1) { left: 2%; transform: rotate(-8deg); }
.door3__img--stack img:nth-child(2) { left: 26%; height: 80%; z-index: 1; }
.door3__img--stack img:nth-child(3) { right: 0; transform: rotate(7deg); }
.door3__txt { padding: calc(20 * var(--u)) calc(56 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u)); display: grid; gap: calc(8 * var(--u)); align-content: center; }
.door3__txt b { font-family: "Inter", system-ui, sans-serif; font-weight: 800; text-transform: uppercase; font-size: calc(19 * var(--u)); letter-spacing: -.005em; color: #111; }
.door3__txt span { font-size: calc(13.6 * var(--u)); line-height: calc(19 * var(--u)); color: #57544f; }
.door3__go { position: absolute; right: calc(16 * var(--u)); bottom: calc(16 * var(--u)); width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; }
.door3__go .arr { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
@media (max-width: 1179px) {
  .doors3 { padding: 28px 16px 24px; }
  .doors3__head { display: block; }
  .doors3__sub { margin-top: 8px; max-width: none; font-size: 15px; line-height: 22px; }
  .doors3__row { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px; }
  .door3 { grid-template-columns: 116px minmax(0, 1fr); min-height: 118px; border-radius: 12px; }
  .door3__txt { padding: 14px 46px 14px 14px; gap: 5px; }
  .door3__txt b { font-size: 16.5px; }
  .door3__txt span { font-size: 13.5px; line-height: 19px; }
  .door3__go { right: 12px; bottom: auto; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; }
  .door3__go .arr { width: 12px; height: 12px; }
}
@media (min-width: 640px) and (max-width: 1179px) { .doors3 { padding-left: 32px; padding-right: 32px; } .doors3__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } .door3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: 120px auto; } }
.ind__rail { scroll-padding: 0 calc(52 * var(--u)); }
@media (max-width: 1179px) { .ind__rail { scroll-padding: 0 16px; } }

/* ===================== PHOTO COLOUR (David 10/17) =====================
   Touch screens have no hover: every photo shows its colour from the start. Pages with body.photos-color (Our Work, area pages,
   or every page when site.json photoReveal is false) show colour on all devices; the hover still zooms on desktop. */
@media (hover: none) {
  .is-color { opacity: 1 !important; transition: none !important; }
}
.photos-color .is-color { opacity: 1 !important; }
.photos-color .cta__img { filter: none; }

/* ===================== MENUS (10/17): dropdowns on desktop, tap-to-open groups in the phone menu ===================== */
.nav__item { position: relative; height: 100%; display: flex; align-items: center; }
.nav__chev { display: inline-block; width: calc(5.5 * var(--u)); height: calc(5.5 * var(--u)); margin-left: calc(6 * var(--u));
  border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: translateY(calc(-2 * var(--u))) rotate(45deg); opacity: .55; transition: transform .2s; }
.nav__menu { position: absolute; top: calc(52 * var(--u)); left: calc(-20 * var(--u)); padding-top: calc(6 * var(--u)); z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.nav__item:hover .nav__chev, .nav__item:focus-within .nav__chev { transform: translateY(0) rotate(225deg); }
.nav__panel { display: grid; min-width: calc(210 * var(--u)); padding: calc(8 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff;
  box-shadow: 0 18px 44px rgba(30, 25, 20, .16), 0 1px 2px rgba(0, 0, 0, .06); }
.nav__panel--2 { grid-template-columns: auto auto; column-gap: calc(6 * var(--u)); }
.nav__col { display: grid; align-content: start; }
.nav__panel a { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-size: calc(13.2 * var(--u)); font-weight: 500; color: #1c1b19; white-space: nowrap; }
.nav__panel a:hover, .nav__panel a:focus-visible { background: #f3f1ec; }
.nav__h { padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)); font-family: var(--display); font-size: calc(10.4 * var(--u)); letter-spacing: .14em; text-transform: uppercase; color: #66635d; }
.mnav__group { border-bottom: 1px solid #ddd9d1; }
.mnav__group summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; list-style: none; cursor: pointer;
  font-family: var(--display); font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: #111; }
.mnav__group summary::-webkit-details-marker { display: none; }
.mnav__group summary i { width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid #111; border-bottom: 2px solid #111; transform: rotate(45deg); transition: transform .2s; }
.mnav__group[open] summary i { transform: rotate(225deg); }
.mnav__sub { display: grid; padding: 0 0 12px 2px; }
.mnav__sub a { padding: 10px 0; border: 0; font-family: var(--ui); font-size: 17px; font-weight: 500; text-transform: none; letter-spacing: 0; color: #2a2826; }
.mnav__h { padding: 12px 0 4px; font-family: var(--display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #66635d; }

/* ===================== HOME INTRO (10/18, David: "way cooler"; 10/20 B11: usable by ~1.5 s) =====================
   html classes from assets/js/intro-gate.js: gi-full (first visit on this device) | gi-quick (every later visit), gi-pending
   (until home-intro.js / GSAP takes over the hero build), gi-lock (no scroll while the overlay is up), gi-open (the hoop is
   opening: taps reach the hero), gi-done. Everything up to the hero buttons runs on CSS time from the first frame, so it never
   waits for GSAP: the shield stitches in thread colours and the name drops in (0-0.46 s), the hoop opens onto the hero
   (0.42-0.92 s), the header and the two buttons pop in (0.44-0.92 s). home-intro.js then builds the rest of the hero, in step
   with the hoop. A tap skips it all (intro-gate.js). */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.gi { display: none; }
.gi-full .gi {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(ellipse 70% 60% at 50% 46%, #22201d 0%, #0f0e0d 68%, #0a0a09 100%);
  --r: 0px;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
  animation: gi-open .5s cubic-bezier(.65, 0, .35, 1) .42s forwards, gi-gone 0s linear .94s forwards;
}
.gi-full.gi-open .gi { pointer-events: none; }
.gi-done .gi { display: none; }
.gi-full.gi-lock { overflow: hidden; }
.gi__inner { display: grid; justify-items: center; }
.gi__mark { position: relative; width: 150px; height: 186px; }
.gi__shield { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gi__logo { position: absolute; left: 50%; top: 50%; width: 82px; opacity: 0; transform: translate(-50%, -48%) scale(.86); }
.gi__word { display: flex; margin-top: 26px; font-family: var(--display); font-weight: 900; font-size: 30px; letter-spacing: .02em; color: #f4f2ee; }
.gi__word span { display: inline-block; opacity: 0; transform: translateY(70%); }
.gi__sub { margin-top: 10px; font-family: var(--display); font-size: 11px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: rgba(255,255,255,.55); opacity: 0; }
.gi__bar { position: relative; margin-top: 28px; width: 220px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.gi__bar i { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, #e2553c, #f0a33a, #f4d35e, #3fae6b, #3a7bd5, #8e5bd0); }
.gi__hoop { position: fixed; left: 50%; top: 50%; z-index: 101; width: 0; height: 0; border-radius: 50%; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%); border: 2px solid #cfae7c;
  box-shadow: 0 0 0 2px #8a6b40, inset 0 0 0 2px #8a6b40, inset 0 0 0 5px rgba(255,255,255,.28), 0 0 60px rgba(0,0,0,.4); }
@keyframes gi-draw { to { stroke-dashoffset: 0; } }
@keyframes gi-in { to { opacity: 1; transform: none; } }
@keyframes gi-logo { to { opacity: 1; transform: translate(-50%, -48%) scale(1); } }
@keyframes gi-bar { to { transform: scaleX(1); } }
@keyframes gi-out { to { opacity: 0; transform: scale(.82); } }
@keyframes gi-open { to { --r: 75vmax; } }   /* 75vmax clears the corners of any screen */
@keyframes gi-gone { to { visibility: hidden; } }
@keyframes gi-hoop {
  0% { width: 0; height: 0; border-width: 2px; opacity: 0; }
  14% { opacity: 1; }
  70% { opacity: 1; }
  100% { width: 150vmax; height: 150vmax; border-width: 16px; opacity: 0; }
}
@keyframes gi-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } 55% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes gi-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
.gi-full .gi__draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gi-draw .44s cubic-bezier(.65, 0, .35, 1) .02s forwards; }
.gi-full .gi__logo { animation: gi-logo .32s cubic-bezier(.16, 1, .3, 1) .22s forwards; }
.gi-full .gi__word span { animation: gi-in .32s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(.06s + var(--i) * 18ms); }
.gi-full .gi__sub { animation: gi-in .3s ease .22s forwards; }
.gi-full .gi__bar i { animation: gi-bar .44s cubic-bezier(.65, 0, .35, 1) .02s forwards; }
.gi-full .gi__inner { animation: gi-out .2s cubic-bezier(.55, 0, 1, .45) .36s forwards; }
.gi-full .gi__hoop { animation: gi-hoop .5s cubic-bezier(.65, 0, .35, 1) .42s forwards; }
/* the header and the two hero buttons: CSS only (fill "backwards", so GSAP's magnetic buttons can move them afterwards) */
.gi-full .hero .hdr > *, .gi-quick .hero .hdr > * { animation: gi-drop .45s cubic-bezier(.16, 1, .3, 1) backwards; }
.gi-full .hero .hdr > * { animation-delay: .44s; }
.gi-quick .hero .hdr > * { animation-delay: .04s; }
.gi-full .hero__ctas .btn, .gi-quick .hero__ctas .btn { animation: gi-pop .42s cubic-bezier(.34, 1.56, .64, 1) backwards; }
.gi-full .hero__ctas .btn { animation-delay: .44s; }
.gi-full .hero__ctas .btn + .btn { animation-delay: .5s; }
.gi-quick .hero__ctas .btn { animation-delay: .1s; }
.gi-quick .hero__ctas .btn + .btn { animation-delay: .16s; }
.gi-done .hero .hdr > *, .gi-done .hero__ctas .btn { animation: none; }
/* the rest of the hero waits, hidden, until GSAP sets its starting positions (the 4 s failsafe shows it anyway) */
.gi-pending .hero :is(.hero__photo, .hero__dark, .eyebrow, .h1, .hero__sub, .trust, .glass, .tile) { opacity: 0; }
/* the headline, split into letters by the script (gradient text can't survive moving letters: solid near-black instead) */
.h1.is-split { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #0b0b0b; }
.h1.is-split .ch { display: inline-block; will-change: transform, opacity; }
.h1__last { position: relative; display: table !important; }
.h1__stitch { position: absolute; left: 0; right: calc(-6 * var(--u)); bottom: calc(-12 * var(--u)); width: calc(100% + 6 * var(--u)); height: calc(14 * var(--u)); overflow: visible; }
.eyebrow__thread { position: absolute; left: 0; right: 0; bottom: calc(-6 * var(--u)); height: 2px; border-radius: 2px; transform-origin: left center;
  background: linear-gradient(90deg, #e2553c, #f0a33a, #f4d35e, #3fae6b, #3a7bd5, #8e5bd0); }
.cnt { font-weight: inherit; }
@media (max-width: 1179px) {
  .gi__mark { width: 124px; height: 154px; }
  .gi__logo { width: 68px; }
  .gi__word { font-size: 24px; margin-top: 20px; }
  .gi__sub { font-size: 10px; letter-spacing: .36em; }
  .gi__bar { width: 180px; margin-top: 22px; }
  .h1__stitch { bottom: -10px; height: 12px; right: -4px; width: calc(100% + 4px); }
  .eyebrow { position: relative; top: auto; left: auto; display: inline-block; }
}

/* ===================== SHOP ANNOUNCEMENT (M-20, 10/23): Modesto's own line from Settings › Shop (site.js paintAnn) =====================
   Docked on the bottom edge and fixed, so it never moves the page or the home intro (a bar pushed in at the top would shift
   the hero after it has painted); hidden while the intro plays; dismissible for the session. It sits above the phone's
   cart bar when both show, and the page, the toast and the "coming next" note make room for it (--ann-h, measured). */
.ann { position: fixed; z-index: 44; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px;
  padding: 8px max(10px, var(--safe-r)) calc(8px + var(--safe-b)) max(20px, var(--safe-l));
  background: #141413; color: #f4f2ee; box-shadow: 0 -8px 24px rgba(0, 0, 0, .16); font-size: 15px; line-height: 1.4; }
.ann__text { flex: 1; min-width: 0; max-width: 1100px; margin: 0 auto; padding: 4px 0; overflow-wrap: anywhere; }
.ann__link { display: inline-flex; align-items: center; min-height: 32px; margin-left: 4px; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ann__x { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #f4f2ee; font-size: 26px; line-height: 1; }
.ann__x:focus-visible, .ann__link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) { .ann__x:hover { background: rgba(255, 255, 255, .12); } }
html.has-ann body { padding-bottom: var(--ann-h, 60px); }
html.has-ann .toast, html.has-ann .soon { bottom: calc(var(--ann-h, 60px) + 14px); }
html.gi-pending .ann, html.gi-full:not(.gi-done) .ann { visibility: hidden; }   /* never over the home intro */
html.is-menu-open .ann, body.filters-open .ann { display: none; }
.hours__off dt, .hours__off dd { color: #8f1d17; }   /* a closed day he added, under the week (About) */
@media (max-width: 639px) {
  .ann { font-size: 14px; padding-left: max(16px, var(--safe-l)); }
  html.has-ann.has-cartbar .ann { bottom: calc(64px + var(--safe-b)); padding-bottom: 8px; }
  html.has-ann.has-cartbar body { padding-bottom: calc(64px + var(--safe-b) + var(--ann-h, 60px)); }
  html.has-ann.has-cartbar .toast, html.has-ann.has-cartbar .soon { bottom: calc(76px + var(--safe-b) + var(--ann-h, 60px)); }
}