/* ==========================================================================
   KINWUD · Crafting Spaces, Defining Lifestyles
   Design system + components
   --------------------------------------------------------------------------
   1.  Tokens                 8.  Categories         15. Footer
   2.  Reset & base           9.  Product grid       16. Quick-view modal
   3.  Layout                 10. Story              17. Reveal
   4.  Typography             11. Dealer band        18. Stub pages
   5.  Buttons                12. Stores             19. Collections
   6.  Header / nav           13. Testimonials       20. Product detail
   7.  Hero                   14. CTA band           21. About
                                                     22. Showroom page
                                                     23. Dealer page
                                                     24. WhatsApp forms
                                                     25. Questions
                                                     26. Contact page
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink: a cool slate, tuned to sit under the brand blue. */
  --ink:        #16242f;
  --ink-2:      #35485a;
  --ink-3:      #56697b;
  --ink-4:      #8695a3;

  /* Brand blue is lifted straight from the Kinwud logo (#016aac). */
  --brand:      #016aac;
  --brand-2:    #01568c;
  --brand-3:    #072e49;
  --gold:       #c0924f;

  /* Warm paper base, cooled a touch so it reads as neutral beside the blue. */
  --sand:       #e3dbd0;
  --sand-2:     #f0ebe4;
  --cream:      #f7f3ed;
  --cream-2:    #fcfaf7;
  --paper:      #ffffff;

  /* The one colour that is not brand or paper: a form needs somewhere to say
     no, and a bright red would fight the blue. This is a brick, dulled to sit
     on cream. */
  --bad:        #a63f33;

  --line:       rgba(22, 36, 47, .13);
  --line-2:     rgba(22, 36, 47, .07);

  --shadow-s:   0 1px 2px rgba(22,36,47,.05), 0 4px 14px rgba(22,36,47,.06);
  --shadow-m:   0 2px 6px rgba(22,36,47,.06), 0 18px 46px rgba(22,36,47,.11);
  --shadow-l:   0 40px 90px rgba(22,36,47,.22);

  --wrap:       1280px;
  --gut:        clamp(20px, 5vw, 56px);
  --r:          3px;
  --ease:       cubic-bezier(.22, .61, .36, 1);

  --f-display:  'Lora', Georgia, 'Times New Roman', serif;
  --f-ui:       'Jost', 'Helvetica Neue', Arial, sans-serif;

  --header-h:   78px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4, h5 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

::selection { background: var(--brand); color: #fff; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--sand); border: 3px solid var(--cream); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--brand); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 20px; font-size: 13px;
}
.skip:focus { left: 12px; top: 12px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.wrap--wide { max-width: 1560px; }
.wrap--narrow { max-width: 880px; }

.section { padding-block: clamp(64px, 9vw, 130px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 86px); }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand-2); }
.section--dark  { background: var(--brand-3); color: #e9f0f6; }
.section--dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(circle at 15% 20%, rgba(192,146,79,.15), transparent 45%),
                    radial-gradient(circle at 85% 85%, rgba(1,106,172,.34), transparent 50%);
}
.section--dark > * { position: relative; }

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */
/* Section labels are marked out rather than underlined: two gold hairline
   brackets clip the text at opposite corners, the way a cut is squared off on
   a board before it is made. They sit outside the text box, so the label still
   lines up hard against the heading below it. */
.eyebrow {
  position: relative; display: inline-block; margin: 0 0 26px;
  padding-right: .3em;          /* soak up the trailing letter-space */
  font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before, .eyebrow::after {
  content: ""; position: absolute; width: 27px; height: 8px; pointer-events: none;
}
.eyebrow::before {
  top: -8px; left: -11px;
  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold);
}
.eyebrow::after {
  bottom: -8px; right: -11px;
  border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold);
}
.section--dark .eyebrow { color: rgba(233, 240, 246, .88); }

.h-display { font-size: clamp(2.9rem, 6.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.03em; }
.h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.h2 { font-size: clamp(1.95rem, 3.4vw, 2.95rem); }
.h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.h4 { font-size: 1.08rem; letter-spacing: -.01em; }

.lead { font-size: clamp(1.01rem, 1.3vw, 1.14rem); line-height: 1.75; color: var(--ink-3); max-width: 56ch; }
.section--dark .lead { color: rgba(226, 236, 244, .72); }

.serif-em { font-style: italic; color: var(--brand); }
.section--dark .serif-em { color: var(--gold); }

.center { text-align: center; }
.center .lead { margin-inline: auto; }

.section-head { margin-bottom: clamp(38px, 5vw, 64px); }
.section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.section-head--split .lead { max-width: 46ch; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand); --btn-fg: #fff; --btn-bd: var(--brand); --btn-hover: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 15px 30px; background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r);
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; background: var(--btn-hover);
  transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:hover::after { transform: translateY(0); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; --btn-hover: var(--brand); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #e9f0f6; --btn-bd: rgba(255,255,255,.32); --btn-hover: #fff; }
.btn--outline-light:hover { color: var(--ink); border-color: #fff; }
.btn--sm { padding: 12px 22px; font-size: 11px; }
.btn--block { width: 100%; }

.btn .ico { width: 15px; height: 15px; flex: none; transition: transform .4s var(--ease); }
.btn:hover .ico { transform: translateX(4px); }

.tlink {
  display: inline-flex; align-items: center; gap: 10px; position: relative; padding-bottom: 5px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform-origin: right; transition: transform .45s var(--ease);
}
.tlink:hover::after { animation: sweep .6s var(--ease); }
.tlink .ico { width: 14px; height: 14px; transition: transform .4s var(--ease); }
.tlink:hover .ico { transform: translateX(5px); }
.section--dark .tlink { color: var(--gold); }
@keyframes sweep {
  0%   { transform: scaleX(1); transform-origin: right; }
  49%  { transform: scaleX(0); transform-origin: right; }
  50%  { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* --------------------------------------------------------------------------
   6. Header / nav
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.header.is-solid {
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom-color: var(--line-2);
  box-shadow: 0 1px 24px rgba(22,36,47,.06);
}
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); }

.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo {
  height: 32px; width: auto; flex: none;
  transition: opacity .35s var(--ease);
}
.brand:hover .brand__logo { opacity: .82; }
@media (max-width: 420px) { .brand__logo { height: 27px; } }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.1vw, 34px); margin-left: auto; }
.nav__link {
  position: relative; padding: 6px 0; color: var(--ink-2);
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--brand);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav__link:hover { color: var(--brand); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--brand); }
.nav__link.is-active::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 14px; flex: none; }

.burger { display: none; width: 44px; height: 44px; margin-right: -10px; place-items: center; }
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); position: relative; transition: background .3s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--ink);
  transition: transform .4s var(--ease);
}
.burger span::before { top: -7px; }
.burger span::after  { top: 7px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { transform: translateY(7px) rotate(45deg); }
.burger.is-open span::after  { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 49; background: var(--cream);
  padding: calc(var(--header-h) + 34px) var(--gut) 40px;
  display: flex; flex-direction: column;
  transform: translateY(-100%); visibility: hidden;
  transition: transform .6s var(--ease), visibility .6s; overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer__link {
  font-family: var(--f-display); font-size: clamp(1.6rem, 7vw, 2.2rem);
  padding: 13px 0; border-bottom: 1px solid var(--line-2);
  display: block;
  opacity: 0; transform: translateY(16px);
}
.drawer.is-open .drawer__link { animation: drawerIn .55s var(--ease) forwards; animation-delay: calc(var(--i) * .055s + .1s); }
.drawer__foot { margin-top: auto; padding-top: 34px; display: grid; gap: 18px; }
.drawer__meta { font-size: 13.5px; color: var(--ink-3); line-height: 1.8; }
@keyframes drawerIn { to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .nav { display: none; }
  .header__actions .btn { display: none; }
  /* With the nav gone there is no auto margin left to push the actions over,
     so the burger has to claim the free space itself and sit hard right. */
  .header__actions { margin-left: auto; }
  .burger { display: grid; }
  .header { background: rgba(255,255,255,.95); backdrop-filter: blur(14px); border-bottom-color: var(--line-2); }
}

/* --------------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------------
   The copy column holds the left half and the piece sits on the right,
   bleeding off that edge, with the scrim washing the photograph out behind
   the text. The two label blocks, the stamp above the headline and the spec
   plate below it, borrow from the furniture itself: a brass maker plate of
   the kind screwed to the underside of a well-built frame.
   -------------------------------------------------------------------------- */
.hero {
  /* --copy is the width of the label column. --copy-edge is where the
     photograph starts, worked back through the .wrap geometry: 100px inside
     the end of that column, which is ragged right and mostly white space by
     then, and where the scrim has already taken the image down to a tenth of
     its weight. Anchoring to it keeps that relationship at every width. */
  --copy:      min(640px, 52vw);
  --copy-edge: calc(50% - min(1560px, 100%) / 2 + var(--gut) + var(--copy) - 100px);

  position: relative; background: var(--cream); overflow: hidden; isolation: isolate;
  min-height: min(92vh, 900px); display: flex; align-items: center;
  margin-top: calc(var(--header-h) * -1); padding-top: var(--header-h);
}
.hero__arch {
  position: absolute; right: -8%; top: 2%; width: min(70vw, 940px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 36%, #fdfcfa 0%, var(--sand-2) 42%, var(--sand) 62%, rgba(227,219,208,0) 73%);
  z-index: 0; animation: floaty 15s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(0,-20px,0) scale(1.02); }
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__bg img {
  position: absolute; left: var(--copy-edge); bottom: 3%;
  /* Sized off the space it has been left, so the crop stays even as the
     window narrows rather than eating the piece from the left. */
  width: calc((100% - var(--copy-edge)) * 1.18); max-width: 1320px;
  mix-blend-mode: multiply; filter: saturate(1.05) contrast(1.02);
  animation: heroIn 1.6s var(--ease) .15s both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translate3d(52px, 22px, 0) scale(1.03); }
  to   { opacity: 1; transform: none; }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(100deg, var(--cream) 4%, rgba(247,243,237,.97) 38%, rgba(247,243,237,.62) 54%, rgba(247,243,237,0) 72%),
    linear-gradient(to top, var(--cream) 0%, rgba(247,243,237,0) 22%);
}

.hero > .wrap { position: relative; z-index: 3; }
/* The foot of the block is padded out further than the head: .hero__scroll is
   pinned to the bottom of the section, and the copy has to clear it. */
.hero__content { max-width: var(--copy); padding-block: clamp(40px, 3.4vw, 48px) clamp(74px, 6.6vw, 92px); }
.hero__title { font-size: clamp(2.5rem, 5.4vw, 4.7rem); line-height: 1.04; letter-spacing: -.035em; }
.hero__title .ln { display: block; overflow: hidden; }
.hero__title .ln > span { display: block; animation: lineUp 1.15s var(--ease) both; }
.hero__title .ln:nth-child(1) > span { animation-delay: .12s; }
.hero__title .ln:nth-child(2) > span { animation-delay: .22s; }
.hero__title .ln:nth-child(3) > span { animation-delay: .32s; }
.hero__title .ln:nth-child(4) > span { animation-delay: .42s; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }

.hero__sub {
  margin-top: 22px; max-width: 45ch; color: var(--ink-3);
  font-size: clamp(1.01rem, 1.25vw, 1.13rem); line-height: 1.78;
  animation: fadeUp .9s var(--ease) .5s both;
}
.hero__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; animation: fadeUp .9s var(--ease) .62s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Stamp: a hairline chip split into two segments with a live gold pip on the
   front of it. It stands in for the plain letterspaced eyebrow, in the hero
   only, where the label has to hold its own against a full-bleed photograph. */
.stamp {
  display: inline-flex; align-items: stretch; margin: 0 0 30px;
  border: 1px solid var(--line); border-radius: 99px;
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2); overflow: hidden;
  animation: fadeUp .9s var(--ease) .05s both;
}
.stamp__seg { display: flex; align-items: center; padding: 9px 16px 9px 14px; }
.stamp__seg + .stamp__seg { border-left: 1px solid var(--line); color: var(--ink-3); }
.stamp__dot {
  align-self: center; flex: none; width: 6px; height: 6px; margin-left: 15px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 0 rgba(192,146,79,.55);
  animation: pip 2.8s var(--ease) infinite;
}
@keyframes pip {
  0%        { box-shadow: 0 0 0 0 rgba(192,146,79,.55); }
  55%, 100% { box-shadow: 0 0 0 7px rgba(192,146,79,0); }
}

/* Spec plate: the three numbers set as one plate rather than three loose
   stats. Gold corner brackets echo the .eyebrow marks used through the rest
   of the page. */
.plate {
  position: relative; margin-top: clamp(26px, 2.6vw, 36px); max-width: 560px;
  padding: 15px 22px 18px;
  background: linear-gradient(152deg, rgba(255,255,255,.9), rgba(255,255,255,.52));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: var(--shadow-s);
  animation: fadeUp .9s var(--ease) .76s both;
}
.plate::before, .plate::after {
  content: ""; position: absolute; width: 22px; height: 22px; pointer-events: none;
}
.plate::before { top: -1px; left: -1px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.plate::after  { bottom: -1px; right: -1px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

.plate__head {
  display: flex; align-items: center; gap: 12px; padding-bottom: 12px;
  font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--ink-4);
}
/* The rule runs from the label out to the tool mark at the far end. */
.plate__head span { flex: none; }
.plate__head::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.plate__ico { width: 14px; height: 14px; flex: none; color: var(--gold); }

.plate__rows { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; }
.plate__cell { display: flex; flex-direction: column; padding-top: 4px; }
/* The rule between cells sits in an equal gap either side. */
.plate__cell + .plate__cell {
  border-left: 1px solid var(--line-2); margin-left: 22px; padding-left: 22px;
}
.plate__val {
  order: 1; margin: 0; font-family: var(--f-display); font-weight: 500; line-height: 1; color: var(--brand);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.02em;
}
.plate__val i { font-style: normal; font-size: .5em; letter-spacing: .02em; margin-left: 2px; }
.plate__key {
  order: 2; margin-top: 8px; max-width: 13ch;
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase; line-height: 1.5; color: var(--ink-4);
}

.hero__scroll {
  position: absolute; left: var(--gut); bottom: 26px; z-index: 3;
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-4);
  animation: fadeUp .9s var(--ease) 1s both;
}
.hero__scroll i { display: block; width: 46px; height: 1px; background: var(--sand); position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--brand); animation: track 2.4s var(--ease) infinite; }
@keyframes track {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

@media (max-width: 1140px) {
  .plate__key { letter-spacing: .13em; }
}

@media (max-width: 900px) {
  .hero { min-height: 0; display: flex; flex-direction: column; }
  .hero > .wrap { order: 1; }
  .hero__content { padding-block: 52px 0; max-width: none; }
  .hero__bg { position: relative; inset: auto; order: 2; margin-top: -6px; }
  .hero__bg img { position: relative; left: auto; bottom: auto; width: 116%; max-width: none; margin-left: -8%; animation: none; }
  .hero__scrim, .hero__scroll { display: none; }
  .hero__arch { top: auto; bottom: -6%; right: -30%; width: 130vw; }
  .plate { max-width: none; }
}

@media (max-width: 560px) {
  .stamp { font-size: 10px; letter-spacing: .16em; }
  .stamp__seg { padding: 8px 13px; }
  .stamp__dot { margin-left: 12px; }
  .plate__rows { grid-template-columns: 1fr; }
  .plate__cell { padding: 14px 0; }
  .plate__cell + .plate__cell {
    border-left: 0; margin-left: 0; padding-left: 0; border-top: 1px solid var(--line-2);
  }
  .plate__cell:first-child { padding-top: 4px; }
  .plate__cell:last-child { padding-bottom: 4px; }
  .plate__key { max-width: none; margin-top: 7px; }
}

/* --------------------------------------------------------------------------
   8. Categories
   -------------------------------------------------------------------------- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.cat {
  position: relative; display: flex; flex-direction: column; min-height: 310px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--cream-2); overflow: hidden; isolation: isolate;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.cat--feature { grid-column: span 2; grid-row: span 2; }

.cat__img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 13% 11%; }
.cat__img img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform .9s var(--ease);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: transparent; }
.cat:hover .cat__img img { transform: scale(1.055); }

.cat__meta {
  background: var(--brand-3); color: #fff; padding: 19px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  transition: background .5s var(--ease);
}
.cat:hover .cat__meta { background: var(--brand); }
.cat__eyebrow { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.cat__name { display: block; font-family: var(--f-display); font-size: clamp(1.1rem, 1.5vw, 1.32rem); letter-spacing: -.01em; line-height: 1.2; }
.cat__blurb { display: none; }
.cat__go {
  width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.24); color: #fff;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.cat__go .ico { width: 15px; height: 15px; transition: transform .45s var(--ease); }
.cat:hover .cat__go { background: #fff; border-color: #fff; color: var(--brand-3); }
.cat:hover .cat__go .ico { transform: translate(2px, -2px); }

.cat--feature .cat__meta { padding: 26px 28px; }
.cat--feature .cat__name { font-size: clamp(1.4rem, 2.1vw, 1.85rem); }
.cat--feature .cat__blurb {
  display: block; margin-top: 9px; max-width: 42ch;
  font-size: 13.5px; line-height: 1.65; color: rgba(226,236,244,.66);
}

@media (max-width: 900px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .cat--feature { grid-column: span 2; grid-row: auto; min-height: 380px; }
}
@media (max-width: 560px) {
  .cats { grid-template-columns: 1fr; }
  .cat--feature { grid-column: auto; }
  .cat { min-height: 270px; }
  .cat--feature .cat__blurb { display: none; }
}

/* --------------------------------------------------------------------------
   9. Filter chips + product grid
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 3.4vw, 44px); }
.chip {
  padding: 10px 20px; border: 1px solid var(--line); border-radius: 99px; background: transparent;
  font-size: 11.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-4); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip b { font-weight: 400; opacity: .55; margin-left: 7px; font-size: 10px; }

.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 1.9vw, 28px); }
@media (max-width: 1080px) { .products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  { .products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .products { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
  transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: transparent; }
.card.is-hidden { display: none; }

.card__media {
  position: relative; aspect-ratio: 4 / 3.2; background: var(--cream-2);
  display: grid; place-items: center; padding: 9%; overflow: hidden; isolation: isolate;
}
.card__shot { display: block; width: 100%; height: 100%; }
.card__media img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform .8s var(--ease);
}
.card:hover .card__media img { transform: scale(1.055); }

.card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 99px; background: var(--ink); color: #fff;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
}
.card__tag--gold { background: var(--gold); color: var(--brand-3); }

.card__quick {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2;
  padding: 12px; border-radius: var(--r); background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border: 1px solid var(--line-2);
  font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.card:hover .card__quick { opacity: 1; transform: none; }
.card__quick:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; border-top: 1px solid var(--line-2); }
.card__cat { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); margin-bottom: 9px; }
.card__name { font-family: var(--f-display); font-size: 1.1rem; line-height: 1.32; letter-spacing: -.01em; }
.card__name a { transition: color .3s var(--ease); }
.card:hover .card__name a { color: var(--brand); }
.card__meta { margin-top: 7px; font-size: 13px; color: var(--ink-4); }
.card__foot { margin-top: auto; padding-top: 16px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.card__price { font-family: var(--f-display); font-size: 1.02rem; color: var(--ink); }
.card__price small { font-family: var(--f-ui); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); display: block; margin-bottom: 2px; }
.card__store { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }

/* Discounts. The regular price is struck through in muted ink beside the
   offer, and the percentage sits in a brand-blue pill: on the card plate, next
   to the price on a product page, and in the quick view. .sr carries the words
   "Regular price" and "Offer price" to a screen reader, which does not announce
   a strikethrough on its own. */
.card__off {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  padding: 6px 12px; border-radius: 99px; background: var(--brand); color: #fff;
  font-size: 9.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
}
.price-was {
  font-family: var(--f-ui); font-size: .78em; color: var(--ink-4);
  text-decoration-thickness: 1px; margin-right: 4px;
}
.price-off {
  display: inline-block; padding: 5px 10px; border-radius: 99px; background: var(--brand); color: #fff;
  font-family: var(--f-ui); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1; vertical-align: middle;
}
.price-was[hidden], .price-off[hidden] { display: none; }
.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.grid-note { margin-top: clamp(34px, 4vw, 52px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.grid-note p { font-size: 14px; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   10. Story / craft
   -------------------------------------------------------------------------- */
.story { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 82px); align-items: center; }
@media (max-width: 900px) { .story { grid-template-columns: 1fr; } }

.story__figure { position: relative; background: var(--cream-2); border-radius: var(--r); isolation: isolate; }
.story__figure::before {
  content: ""; position: absolute; inset: 8% -6% -7% 8%; border: 1px solid var(--sand); border-radius: var(--r);
}
.story__figure img {
  position: relative; width: 100%; border-radius: var(--r);
  mix-blend-mode: multiply; padding: 4%;
}
.story__badge {
  position: absolute; right: -4%; bottom: 6%; z-index: 2;
  background: var(--brand-3); color: #e9f0f6; padding: 20px 24px; border-radius: var(--r);
  box-shadow: var(--shadow-l); text-align: center; min-width: 148px;
}
.story__badge b { display: block; font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--gold); font-weight: 500; }
.story__badge span { display: block; margin-top: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .78; }

.pillars { display: grid; gap: 2px; margin-top: 38px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.pillar { background: var(--paper); padding: 22px 24px; display: flex; gap: 18px; align-items: flex-start; }
.section--cream .pillar { background: var(--cream); }
.pillar__ico { width: 34px; height: 34px; flex: none; color: var(--brand); }
.pillar h4, .pillar .h4 { margin-bottom: 7px; }
.pillar p { font-size: 14px; color: var(--ink-3); line-height: 1.7; }

/* Counter row */
.counters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.counter { background: var(--paper); padding: clamp(24px, 3vw, 38px) 26px; text-align: center; }
.section--cream .counter { background: var(--cream); }
.counter b { display: block; font-family: var(--f-display); font-size: clamp(2rem, 3.4vw, 2.9rem); font-weight: 500; line-height: 1; color: var(--brand); }
.counter span { display: block; margin-top: 12px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); }
@media (max-width: 760px) { .counters { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   11. Dealer band
   --------------------------------------------------------------------------
   The band on the homepage that points at /dealers. The page itself is 23.
   -------------------------------------------------------------------------- */
.dealer { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(34px, 5vw, 80px); align-items: center; }
@media (max-width: 940px) { .dealer { grid-template-columns: 1fr; } }

.steps { display: grid; gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); overflow: hidden; }
.step { background: var(--brand-3); padding: 24px 26px; transition: background .45s var(--ease); }
.step:hover { background: #0d3f61; }
.step::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 17px; background: var(--gold); }
.step h4 { color: #fff; margin-bottom: 6px; }
.step p { font-size: 14px; line-height: 1.7; color: rgba(226,236,244,.66); }

.dealer__perks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.perk {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 99px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(226,236,244,.8);
}
.perk svg { width: 13px; height: 13px; color: var(--gold); flex: none; }

/* --------------------------------------------------------------------------
   12. Stores
   -------------------------------------------------------------------------- */
.stores { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.9vw, 26px); }
@media (max-width: 940px) { .stores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .stores { grid-template-columns: 1fr; } }

.store {
  position: relative; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 30px 30px 26px; display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.store:hover { transform: translateY(-4px); box-shadow: var(--shadow-m); border-color: transparent; }
.store__flag {
  position: absolute; top: 0; right: 26px; z-index: 2; padding: 6px 12px; border-radius: 0 0 var(--r) var(--r);
  background: var(--brand); color: #fff; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
}
/* Storefront photo, bled to the card edge. Cards with no shot of their own get
   the house mark on a cream panel so the three cards stay on the same grid. */
.store__media {
  margin: -30px -30px 24px; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r) var(--r) 0 0; background: var(--cream);
}
.store__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 74%; }
.store:hover .store__media:not(.store__media--blank) img { transform: scale(1.04); }
.store__media:not(.store__media--blank) img { transition: transform .8s var(--ease); }
.store__media--blank { display: grid; place-items: center; }
.store__media--blank img { width: 54px; height: auto; opacity: .14; object-fit: contain; }
.store__city { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.store__name { font-family: var(--f-display); font-size: 1.28rem; letter-spacing: -.01em; }
.store__addr { margin-top: 12px; font-size: 14px; line-height: 1.75; color: var(--ink-3); }
.store__rows { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-2); display: grid; gap: 9px; }
.store__row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--ink-2); }
.store__row svg { width: 15px; height: 15px; color: var(--brand); flex: none; }
.store__row a:hover { color: var(--brand); }
.store__foot { margin-top: 22px; }

/* One showroom on the books: lay its card out wide, photo beside the details,
   so the row does not read as two missing cards. */
.stores--single { grid-template-columns: 1fr; }
.store--wide { flex-direction: row; align-items: stretch; padding: 0; gap: clamp(22px, 3vw, 46px); }
.store--wide .store__media { margin: 0; flex: 0 0 42%; aspect-ratio: auto; border-radius: var(--r) 0 0 var(--r); }
.store--wide .store__body { flex: 1; display: flex; flex-direction: column; padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px) clamp(26px, 3vw, 34px) 0; }
.store--wide .store__addr { max-width: 42ch; }
.store--wide .store__foot { margin-top: auto; padding-top: 26px; }
@media (max-width: 720px) {
  .store--wide { flex-direction: column; padding: 30px 30px 26px; gap: 0; }
  .store--wide .store__media { margin: -30px -30px 24px; flex: none; aspect-ratio: 16 / 10; border-radius: var(--r) var(--r) 0 0; }
  .store--wide .store__body { padding: 0; }
  .store--wide .store__foot { margin-top: 22px; padding-top: 0; }
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 940px) { .quotes { grid-template-columns: 1fr; } }

.quote { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: 34px 32px; display: flex; flex-direction: column; }
.quote__stars { display: flex; gap: 3px; color: var(--gold); margin-bottom: 20px; }
.quote__stars svg { width: 14px; height: 14px; }
.quote__text { font-family: var(--f-display); font-size: 1.1rem; line-height: 1.68; color: var(--ink-2); letter-spacing: -.005em; }
.quote__who { margin-top: auto; padding-top: 24px; display: flex; align-items: center; gap: 13px; }
.quote__av {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--sand-2); color: var(--brand); font-family: var(--f-display); font-size: 1rem;
}
img.quote__av { object-fit: cover; display: block; }
.quote__who b { display: block; font-size: 14px; font-weight: 500; }
.quote__who span { display: block; font-size: 12px; color: var(--ink-4); }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 60px); align-items: center; }
@media (max-width: 860px) { .cta { grid-template-columns: 1fr; } }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.footer { background: var(--brand-3); color: rgba(226,236,244,.72); padding-top: clamp(56px, 7vw, 96px); }
.footer a { transition: color .3s var(--ease); }
.footer a:hover { color: var(--gold); }

.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(28px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 940px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__top { grid-template-columns: 1fr; } }

.footer .brand__logo { height: 38px; }
.footer__blurb { margin-top: 22px; font-size: 14px; line-height: 1.8; max-width: 34ch; }

.footer__h { font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 20px; font-weight: 500; }
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; }
.footer__contact { display: grid; gap: 13px; font-size: 14px; line-height: 1.6; }
.footer__contact div { display: flex; gap: 12px; align-items: flex-start; }
.footer__contact svg { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 5px; }

.socials { display: flex; gap: 10px; margin-top: 24px; }
.socials a {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); color: rgba(226,236,244,.8);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--brand-3); transform: translateY(-2px); }
.socials svg { width: 16px; height: 16px; }

.footer__legal {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 20px;
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between;
  font-size: 12.5px; color: rgba(226,236,244,.55);
}
.footer__legal p { margin: 0; }

.footer__bar {
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  font-size: 12.5px;
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 22px; }

/* --------------------------------------------------------------------------
   16. Quick-view modal
   -------------------------------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: var(--gut);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__veil { position: absolute; inset: 0; background: rgba(11,26,36,.58); backdrop-filter: blur(5px); }
.modal__box {
  position: relative; width: min(940px, 100%); max-height: 88vh; overflow: auto;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow-l);
  display: grid; grid-template-columns: 1.05fr 1fr;
  transform: translateY(24px) scale(.985); transition: transform .5s var(--ease);
}
.modal.is-open .modal__box { transform: none; }
@media (max-width: 760px) { .modal__box { grid-template-columns: 1fr; } }

.modal__media { background: var(--cream-2); display: grid; place-items: center; padding: 8%; min-height: 260px; isolation: isolate; }
.modal__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.modal__body { padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; }
.modal__cat { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.modal__title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); }
.modal__desc { margin-top: 16px; font-size: 14.5px; line-height: 1.8; color: var(--ink-3); }
.modal__specs { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.modal__specs li { background: var(--paper); padding: 12px 16px; display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.modal__specs dt, .modal__specs .k { color: var(--ink-4); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
.modal__specs .v { color: var(--ink-2); text-align: right; }
.modal__price { margin-top: 26px; font-family: var(--f-display); font-size: 1.5rem; }
.modal__price small { display: block; font-family: var(--f-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 4px; }
.modal__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.modal__close {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.9); border: 1px solid var(--line-2); color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.modal__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.modal__close svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   17. Reveal on scroll
   -------------------------------------------------------------------------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; }
.rv-d2 { transition-delay: .16s; }
.rv-d3 { transition-delay: .24s; }
.rv-d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Stub pages (About / Contact / …, built later)
   -------------------------------------------------------------------------- */
.pagehead {
  background: var(--cream); padding-block: clamp(56px, 8vw, 104px);
  margin-top: calc(var(--header-h) * -1); padding-top: calc(var(--header-h) + clamp(56px, 8vw, 104px));
  border-bottom: 1px solid var(--line-2); position: relative; overflow: hidden;
}
/* Decoration only: it has to sit behind the copy and stay out of the way of
   the pointer. `> *` cannot reach a pseudo-element, so without the z-index the
   disc paints last and washes out anything in the top right of the block. */
.pagehead::after {
  content: ""; position: absolute; right: -10%; top: -40%; width: 60vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--sand-2) 0%, rgba(240,235,228,0) 68%);
  pointer-events: none;
}
.pagehead > * { position: relative; z-index: 1; }
/* Wraps rather than squeezing: the product trail runs to four levels. */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 22px; }
.crumbs a:hover { color: var(--brand); }
.pagehead__cta { margin-top: clamp(26px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 14px; }

.soon { display: grid; place-items: center; text-align: center; gap: 22px; padding-block: clamp(50px, 8vw, 90px); }
.soon__ico { width: 58px; height: 58px; color: var(--brand); opacity: .55; }
.soon__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }

/* --------------------------------------------------------------------------
   19. Collections
   --------------------------------------------------------------------------
   The whole catalogue is printed into the page and grouped by room, so the
   #beds style anchors linked from the homepage and the footer still land
   somewhere, and the page reads in full with scripting off. The bar below the
   masthead only hides what does not match.
   -------------------------------------------------------------------------- */
.pagehead__grid { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.pagehead__grid .lead { max-width: 46ch; }

/* Four figures set as one plate, the way the hero states its numbers. */
.facts {
  margin: clamp(34px, 4vw, 52px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
}
.fact { background: var(--cream); padding: 18px 22px 20px; }
.fact dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.fact dd {
  margin: 9px 0 0; font-family: var(--f-display); font-weight: 500; line-height: 1;
  font-size: clamp(1.4rem, 2.2vw, 1.95rem); letter-spacing: -.02em; color: var(--brand);
}
.fact dd i { font-style: normal; font-size: .5em; letter-spacing: .02em; margin-left: 2px; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* Filter bar. It parks under the sticky header, so the room chips stay
   reachable however far down the catalogue you are. */
.catbar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.catbar > .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px clamp(18px, 2.4vw, 32px); padding-block: 13px;
}
.catbar__rooms { margin-bottom: 0; }
.catbar__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.catbar__count { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.catbar__count b { font-weight: 500; color: var(--ink); }
.catbar__reset {
  padding: 10px 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
  transition: color .3s var(--ease);
}
.catbar__reset:hover { color: var(--ink); }
.catbar__reset[hidden] { display: none; }

/* Native selects, dressed to match the chips beside them. */
.field { position: relative; display: flex; align-items: center; }
.field label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.field select {
  appearance: none; -webkit-appearance: none;
  padding: 10px 36px 10px 17px; border: 1px solid var(--line); border-radius: 99px; background: transparent;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  cursor: pointer; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.field select:hover { color: var(--ink); border-color: var(--ink-4); }
.field::after {
  content: ""; position: absolute; right: 16px; width: 6px; height: 6px; pointer-events: none;
  border-right: 1px solid var(--ink-4); border-bottom: 1px solid var(--ink-4);
  transform: translateY(-2px) rotate(45deg);
}

/* Same bar, but a box to type in rather than a list to pick from: no chevron,
   and the pin sits inside the field where the chevron would have been. */
.field--find::after { display: none; }
.field__ico { position: absolute; left: 15px; width: 14px; height: 14px; color: var(--ink-4); pointer-events: none; }
.field--find input {
  width: clamp(160px, 20vw, 230px);
  padding: 10px 16px 10px 38px; border: 1px solid var(--line); border-radius: 99px; background: transparent;
  font-size: 12px; letter-spacing: .08em; color: var(--ink);
  transition: border-color .3s var(--ease);
}
.field--find input:hover { border-color: var(--ink-4); }
.field--find input::placeholder {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4);
}
@media (max-width: 620px) { .field--find input { width: 100%; } }

@media (max-width: 860px) {
  /* The chips become a rail rather than three wrapped rows, and bleed to the
     gutter so the last one does not look clipped. */
  .catbar__rooms {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); padding-block: 2px;
  }
  .catbar__rooms::-webkit-scrollbar { display: none; }
  .catbar__rooms .chip { flex: none; }
  .catbar__tools { width: 100%; }
  .catbar__count { order: 3; margin-left: auto; }
}

@media (max-width: 620px) {
  /* Three stacked selects would take half the screen with them, so they share
     one line and the tally drops below with the reset. */
  .catbar > .wrap { padding-block: 10px; gap: 9px; }
  .catbar__tools { gap: 8px; }
  .field { flex: 1 1 0; min-width: 0; }
  .field select { width: 100%; padding: 9px 24px 9px 12px; font-size: 10px; letter-spacing: .07em; }
  .field::after { right: 11px; width: 5px; height: 5px; }
  .catbar__count { flex: 1 0 100%; margin-left: 0; font-size: 10px; }
  .catbar__reset { order: 4; padding: 0; font-size: 10px; }
}

/* One room, one anchor. */
.room { scroll-margin-top: calc(var(--header-h) + 96px); }
.room[hidden] { display: none; }
/* Filtering hides whole rooms, so the gap has to key off the rooms still
   showing. A plain .room + .room would leave the top margin on the first
   visible room whenever an earlier one was filtered out. */
.room:not([hidden]) ~ .room:not([hidden]) { margin-top: clamp(54px, 7vw, 96px); }
.room__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: clamp(26px, 3vw, 40px); padding-bottom: 22px; border-bottom: 1px solid var(--line-2);
}
.room__head .h2 { margin-top: 2px; }
.room__head .lead { margin-top: 14px; max-width: 54ch; }
.room__count { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }

.empty { display: grid; place-items: center; text-align: center; gap: 20px; padding-block: clamp(50px, 8vw, 90px); }
.empty[hidden] { display: none; }

/* --------------------------------------------------------------------------
   20. Product detail
   -------------------------------------------------------------------------- */
.pdp {
  background: var(--cream); position: relative; overflow: hidden;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + clamp(30px, 4vw, 48px)) 0 clamp(48px, 6vw, 86px);
  border-bottom: 1px solid var(--line-2);
}
.pdp::after {
  content: ""; position: absolute; right: -12%; top: -32%; width: 56vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--sand-2) 0%, rgba(240, 235, 228, 0) 68%);
  pointer-events: none;
}
.pdp > * { position: relative; z-index: 1; }

.pdp__grid {
  margin-top: clamp(18px, 2.4vw, 30px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4.2vw, 74px); align-items: start;
}
@media (max-width: 940px) { .pdp__grid { grid-template-columns: 1fr; } }

/* The plate holds while the specs scroll past it, which is the whole point of
   a page about one object. */
.pdp__media { position: sticky; top: calc(var(--header-h) + 22px); }
@media (max-width: 940px) { .pdp__media { position: static; } }

/* Alone among the plates, this one carries the unedited photograph: its own
   paper, wall or floor is in the file. So it does not multiply, which would
   only muddy a real backdrop, and it does not impose a shape. It takes the
   file's, edge to edge, and the frame crops nothing off the piece. */
.pdp__plate {
  position: relative; isolation: isolate; overflow: hidden;
  width: fit-content; max-width: 100%; margin-inline: auto;
  background: var(--cream-2); border: 1px solid var(--line-2); border-radius: var(--r);
}
.pdp__plate img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: min(76vh, 760px);
}
.pdp__shotnote {
  margin-top: 15px; display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.7; color: var(--ink-4);
}
.pdp__shotnote svg { width: 14px; height: 14px; color: var(--gold); flex: none; margin-top: 4px; }

.pdp__title { margin-top: 2px; }
.pdp__price { margin-top: 20px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.pdp__price small { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); }
.pdp__price span { font-family: var(--f-display); font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1; color: var(--brand); }
.pdp__price .price-was { font-size: 1.05rem; margin-right: 0; }
.pdp__price .price-off { align-self: center; }
.pdp__blurb { margin-top: 18px; max-width: 52ch; }

.spec {
  margin: 28px 0 0; display: grid; gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
}
.spec__row { background: var(--cream); padding: 13px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.spec dt { flex: none; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); }
.spec dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); text-align: right; }

.pdp__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.pdp__note { margin-top: 20px; max-width: 48ch; font-size: 13px; line-height: 1.75; color: var(--ink-4); }
.pdp__note a { color: var(--brand); }
.pdp__note a:hover { text-decoration: underline; }

.tags { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li {
  padding: 7px 15px; border: 1px solid var(--line); border-radius: 99px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* The three things about a piece that a photograph cannot show. */
.build { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
@media (max-width: 860px) { .build { grid-template-columns: 1fr; } }
.build__item { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r); padding: 28px 26px 30px; }
.build__mark { display: block; width: 26px; height: 2px; margin-bottom: 17px; background: var(--gold); }
.build__item p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); }

.assure {
  margin-top: clamp(30px, 3.6vw, 46px);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
}
.assure .pillar { flex-direction: column; gap: 14px; }
@media (max-width: 1000px) { .assure { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .assure { grid-template-columns: 1fr; } }

/* Walk the room one piece at a time. */
.pager {
  margin-top: clamp(34px, 4vw, 52px); padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.pager__link { display: grid; gap: 6px; max-width: 47%; }
.pager__link span { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); }
.pager__link b {
  font-family: var(--f-display); font-weight: 500; font-size: 1.05rem; line-height: 1.35; color: var(--ink);
  transition: color .3s var(--ease);
}
.pager__link:hover b { color: var(--brand); }
.pager__link--next { margin-left: auto; text-align: right; }

/* --------------------------------------------------------------------------
   21. About
   --------------------------------------------------------------------------
   The works photographs are the one set on the site that is not a catalogue
   plate: real light, real dust, their own sky. So they are never blended into
   the page the way a product shot is. They are framed instead, cropped by the
   frame rather than by the file, captioned, and graded together so six shots
   taken on two different days read as one set.
   -------------------------------------------------------------------------- */
.abt-shot {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r); background: var(--sand-2);
}
.abt-shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.06);
  transition: transform 1.1s var(--ease);
}
/* A pale sky against a pale page needs an edge, or the photograph dissolves
   into the paper at the top and stays solid at the bottom. */
.abt-shot::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(22, 36, 47, .1);
}

/* Caption: the gold rule beside it is cut from the same mark as the .eyebrow
   brackets and the .plate corners. */
.abt-cap {
  margin: 15px 0 0; display: flex; align-items: flex-start; gap: 12px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; line-height: 1.6;
  color: var(--ink-4);
}
.abt-cap::before { content: ""; flex: none; width: 24px; height: 1px; margin-top: 8px; background: var(--gold); }
.section--dark .abt-cap { color: rgba(226, 236, 244, .55); }

/* A hard break in a heading is a wide-measure decision: on a narrow column
   there is no room to honour it and the ragged edge reads as an accident, so
   the breaks fold back into ordinary wrapping. */
@media (max-width: 700px) { .brk br { display: none; } }

/* ---------------------------------------------------------------- lede */
.abt-lede {
  position: relative; overflow: hidden; background: var(--cream);
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + clamp(34px, 4.6vw, 66px)) 0 clamp(54px, 7vw, 96px);
  border-bottom: 1px solid var(--line-2);
}
.abt-lede::after {
  content: ""; position: absolute; left: -14%; top: -34%; width: 54vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--sand-2) 0%, rgba(240, 235, 228, 0) 68%);
  pointer-events: none;
}
.abt-lede > * { position: relative; z-index: 1; }

.abt-lede__grid {
  display: grid; grid-template-columns: 1.06fr .94fr;
  gap: clamp(34px, 5vw, 78px); align-items: center;
}
.abt-lede__cta { margin-top: clamp(26px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 14px; }

/* The frame is squared off at two opposite corners, the way a board is marked
   before it is cut, and the picture is inset from those marks. */
.abt-frame { position: relative; margin: 0; }
.abt-frame::before, .abt-frame::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  width: clamp(40px, 5vw, 66px); height: clamp(40px, 5vw, 66px);
}
.abt-frame::before { top: -13px; left: -13px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.abt-frame::after { bottom: -13px; right: -13px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.abt-frame .abt-shot { aspect-ratio: 5 / 6; }
.abt-frame:hover .abt-shot img { transform: scale(1.03); }

.abt-tag {
  position: absolute; z-index: 3; left: -18px; bottom: clamp(22px, 3vw, 38px);
  max-width: min(310px, 80%); padding: 15px 19px 16px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-m);
}
.abt-tag__k {
  display: block; margin-bottom: 8px;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.abt-tag__v { display: block; font-size: 12.5px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 940px) {
  .abt-lede__grid { grid-template-columns: 1fr; gap: clamp(40px, 7vw, 56px); }
  .abt-frame { max-width: 560px; }
  .abt-frame .abt-shot { aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
  .abt-frame::before { top: -9px; left: -9px; }
  .abt-frame::after { bottom: -9px; right: -9px; }
  .abt-tag { left: 12px; right: 12px; max-width: none; bottom: 14px; }
}

/* ------------------------------------------------------- reportage band */
/* Full width and unwrapped: the yard is the widest thing the company owns and
   the page lets it run edge to edge, with the copy on the wrap grid inside it
   so it still lines up with every section above and below. */
.abt-band { position: relative; background: var(--brand-3); }
.abt-band__fig {
  position: relative; margin: 0; display: grid; align-items: end;
  min-height: clamp(330px, 46vw, 600px); overflow: hidden;
}
.abt-band__fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.82) contrast(1.06);
}
.abt-band__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(7, 46, 73, .95) 0%, rgba(7, 46, 73, .74) 34%, rgba(7, 46, 73, .34) 68%, rgba(7, 46, 73, .5) 100%),
    linear-gradient(to right, rgba(7, 46, 73, .5), rgba(7, 46, 73, 0) 62%);
}
.abt-band__body { position: relative; z-index: 1; padding-block: clamp(36px, 5vw, 66px); color: #fff; }
.abt-band .eyebrow { color: rgba(255, 255, 255, .82); }
.abt-band__quote {
  margin: 0; max-width: 21ch;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.55rem, 3.3vw, 2.7rem); line-height: 1.22; letter-spacing: -.025em;
  text-wrap: balance;
}
.abt-band__by {
  margin-top: 20px; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
}
/* The credit line sits where a photograph is credited: hard into the far
   corner, small enough to ignore. */
.abt-band__cred {
  position: absolute; z-index: 1; right: var(--gut); bottom: 20px;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}
@media (max-width: 760px) { .abt-band__cred { display: none; } }

/* --------------------------------------------------------- works steps */
/* Three photographs stepped down the page rather than set in a row, so the
   eye reads them in order instead of comparing them. */
.abt-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 34px); align-items: start;
}
.abt-step { margin: 0; }
.abt-step:nth-child(2) { margin-top: clamp(18px, 3.4vw, 54px); }
.abt-step:nth-child(3) { margin-top: clamp(36px, 6.8vw, 108px); }
.abt-step .abt-shot { aspect-ratio: 3 / 2; }
.abt-step:hover .abt-shot img { transform: scale(1.035); }

.abt-step__body { padding-top: 24px; }
.abt-step__body::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 18px; background: var(--gold); }
.abt-step__body p { margin-top: 12px; font-size: 14.5px; line-height: 1.78; color: var(--ink-3); }

@media (max-width: 900px) {
  .abt-steps { grid-template-columns: 1fr; gap: clamp(38px, 6vw, 54px); }
  .abt-step:nth-child(2), .abt-step:nth-child(3) { margin-top: 0; }
  .abt-step__body { max-width: 60ch; }
}

/* --------------------------------------------------------------- creed */
.abt-creed {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(34px, 5vw, 76px); align-items: center;
}
.abt-creed__fig { margin: 0; }
.abt-creed__fig .abt-shot { aspect-ratio: 4 / 3; }
.abt-creed__fig .abt-shot::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.abt-creed__fig:hover .abt-shot img { transform: scale(1.035); }
@media (max-width: 940px) { .abt-creed { grid-template-columns: 1fr; } }

.creed { list-style: none; margin: clamp(28px, 3vw, 38px) 0 0; padding: 0; }
.creed li {
  position: relative; padding: 21px 0 21px 42px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.creed li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.creed li::before {
  content: ""; position: absolute; left: 0; top: 30px;
  width: 22px; height: 2px; background: var(--gold);
}
.creed h3 { color: #fff; margin-bottom: 6px; }
.creed p { font-size: 14px; line-height: 1.75; color: rgba(226, 236, 244, .66); }
@media (max-width: 480px) { .creed li { padding-left: 34px; } }

/* ----------------------------------------------------------- milestones */
.abt-time { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 38px); }
.abt-time__item { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
/* The dot sits on the rule and is punched out of the section behind it, so the
   row reads as one run of four stops rather than four separate rules. */
.abt-time__item::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 0 0 4px var(--cream);
}
/* The when is a year where the story has one and a word where it does not, so
   the line has to read as a label rather than as a figure. The stage under it
   is named rather than dated and carries words that wrap. Brand blue rather
   than gold: at this size gold sits too light on the cream ground to read as a
   heading. */
.abt-time__item .abt-time__when {
  margin: 0; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4);
}
.abt-time__item .abt-time__stage {
  margin: 10px 0 0; font-family: var(--f-display); font-weight: 500; line-height: 1.25; color: var(--brand);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -.01em;
}
.abt-time__item p { margin-top: 10px; font-size: 14px; line-height: 1.75; color: var(--ink-3); }
@media (max-width: 860px) { .abt-time { grid-template-columns: repeat(2, 1fr); row-gap: clamp(30px, 5vw, 44px); } }
@media (max-width: 480px) { .abt-time { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   22. Showroom page
   --------------------------------------------------------------------------
   /stores renders kinwud_stores() at whatever length it happens to be. One
   floor today, so the panel takes the full width and reads as a statement
   rather than as two missing cards; a second row simply stacks under it and
   the finder bar above the list starts being printed. Nothing here changes
   shape with the count, which is the point.

   The storefront is a real photograph of a real building, the way the works
   shots on /about are, so it is framed and graded rather than blended into
   the plate the way a catalogue shot is.
   -------------------------------------------------------------------------- */
/* The bar is the collections bar with a box to type in instead of three
   selects. On a narrow screen the box and the tally share the line rather
   than taking one each: the bar is sticky, so every row it grows by is a row
   of showroom taken off the screen. */
@media (max-width: 620px) {
  .catbar--find .field--find { flex: 1 1 0; min-width: 0; }
  .catbar--find .catbar__count { flex: none; margin-left: 10px; }
}

.shw-list { display: grid; gap: clamp(20px, 2.4vw, 34px); }

.shw {
  position: relative; scroll-margin-top: calc(var(--header-h) + 40px);
  display: grid; grid-template-columns: minmax(0, .66fr) minmax(0, 1.34fr);
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.shw:hover { box-shadow: var(--shadow-m); border-color: transparent; }
.shw.is-hidden { display: none; }

/* The picture stretches to whatever the details column needs, with a floor
   under it so a short entry still gets a frontage worth looking at. */
.shw__fig {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  min-height: clamp(300px, 32vw, 520px); background: var(--cream);
}
.shw__fig img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.06);
  transition: transform 1.1s var(--ease);
}
.shw:hover .shw__fig img { transform: scale(1.03); }
/* A pale frontage under a pale sky needs an edge, or the photograph dissolves
   into the panel along its top. */
.shw__fig::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(22, 36, 47, .1);
}

.shw__tag {
  position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px;
  max-width: 260px; padding: 13px 17px 14px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--shadow-s);
}
.shw__tag__k {
  display: block; margin-bottom: 7px;
  font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
}
.shw__tag__v { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }

.shw__body {
  display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 46px);
}
.shw__where { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--brand); }
.shw__name {
  margin-top: 11px; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.2; letter-spacing: -.015em;
}
.shw__lede { margin-top: 15px; max-width: 62ch; font-size: 14.5px; line-height: 1.78; color: var(--ink-3); }

/* Address, hours, number and the landmark, set as one plate. The address and
   the landmark run the full width because they are sentences; the hours and
   the number are a pair and sit side by side. */
.shw__rows {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden;
}
.shw__row { background: var(--paper); padding: 14px 18px 16px; }
.shw__row--wide { grid-column: 1 / -1; }
.shw__row dt {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4);
}
.shw__row dt svg { width: 13px; height: 13px; color: var(--gold); flex: none; }
.shw__row dd { margin: 9px 0 0; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
.shw__row dd a { transition: color .3s var(--ease); }
.shw__row dd a:hover { color: var(--brand); }
@media (max-width: 520px) { .shw__rows { grid-template-columns: 1fr; } }

.shw__label {
  margin-top: clamp(22px, 2.4vw, 28px);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4);
}
/* The pills carry links into the catalogue, so the border and the padding
   belong to the anchor rather than to the item around it. */
.shw__rooms { margin-top: 12px; }
.shw__rooms li { padding: 0; border: 0; }
.shw__rooms a {
  display: block; padding: 7px 15px; border: 1px solid var(--line); border-radius: 99px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.shw__rooms a:hover { color: var(--ink); border-color: var(--ink-4); background: var(--cream-2); }

.shw__actions { margin-top: auto; padding-top: clamp(26px, 3vw, 34px); display: flex; flex-wrap: wrap; gap: 12px; }

/* Stacked, the picture keeps the column's whole width, and a shopfront is a
   tall thing: a landscape crop of one loses either the board over the door or
   the building standing above it. So the frame squares up, and vh caps it on
   a wide tablet where a square would take the entire screen. */
@media (max-width: 980px) {
  .shw { grid-template-columns: 1fr; }
  .shw__fig { min-height: 0; aspect-ratio: 4 / 5; max-height: 62vh; }
  .shw__fig img { position: static; }
}
@media (max-width: 560px) {
  .shw__tag { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}

/* The four notes under "before you come" follow a section head that has
   already left the gap, so the plate's own top margin would double it. */
.section-head + .assure { margin-top: 0; }

/* ------------------------------------------------------------ where next */
.shw-next {
  display: grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(34px, 5vw, 76px); align-items: center;
}
@media (max-width: 940px) { .shw-next { grid-template-columns: 1fr; } }
.shw-next__cta { margin-top: clamp(28px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 14px; }
.shw-next .creed { margin-top: 0; }

/* --------------------------------------------------------------------------
   23. Dealer page
   --------------------------------------------------------------------------
   The proposition above the application: the flow, the fit and the terms. The
   form itself is section 24, because /contact asks in the same shape. Nothing
   here is a landing page bolted on the side; it is the same plate, pillar and
   rule the rest of the site is built from.
   -------------------------------------------------------------------------- */

/* Four stops, read left to right. The steps are ordered and the markup says so
   with an <ol>, but nothing prints a numeral: the dot sitting on the rule is
   what carries the sequence, the way the milestones on /about do. */
.dlr-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 38px);
}
.dlr-flow__step { position: relative; padding-top: 30px; border-top: 1px solid var(--line); }
.dlr-flow__step::before {
  content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--cream);
}
.dlr-flow__when { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); }
.dlr-flow__stage {
  margin: 10px 0 0; font-family: var(--f-display); font-weight: 500; line-height: 1.25;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -.01em; color: var(--brand);
}
.dlr-flow__step p:last-child { margin-top: 11px; font-size: 14px; line-height: 1.75; color: var(--ink-3); }
@media (max-width: 860px) { .dlr-flow { grid-template-columns: repeat(2, 1fr); row-gap: clamp(30px, 5vw, 44px); } }
@media (max-width: 480px) { .dlr-flow { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- fit */
/* Two columns that are not opposites: one is what works, the other is what
   does not work yet. So they are the same panel at the same weight and only
   the tick changes, rather than a green box sitting beside a red one. */
.dlr-fit { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.2vw, 32px); }
@media (max-width: 820px) { .dlr-fit { grid-template-columns: 1fr; } }
.dlr-fit__col {
  background: var(--cream); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: clamp(26px, 3vw, 42px);
}
.dlr-fit__list { list-style: none; margin: clamp(18px, 2vw, 24px) 0 0; padding: 0; }
.dlr-fit__list li {
  display: flex; align-items: flex-start; gap: 14px; padding: 16px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px; line-height: 1.72; color: var(--ink-2);
}
.dlr-fit__list li:last-child { padding-bottom: 0; }
.dlr-fit__list svg { flex: none; width: 17px; height: 17px; margin-top: 4px; }
.dlr-fit__list--yes svg { color: var(--brand); }
.dlr-fit__list--no  svg { color: var(--ink-4); }

/* ----------------------------------------------------------------- terms */
.dlr-terms {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 4vw, 66px); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.dlr-terms__row {
  display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 8px 20px;
  padding: 19px 0; border-top: 1px solid rgba(255, 255, 255, .12);
}
.dlr-terms dt {
  padding-top: 3px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.dlr-terms dd { margin: 0; font-size: 14px; line-height: 1.75; color: rgba(226, 236, 244, .72); }
@media (max-width: 900px) { .dlr-terms { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .dlr-terms__row { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   24. WhatsApp forms
   --------------------------------------------------------------------------
   Two pages ask for something back, /dealers and /contact, and both ask in
   this shape: a rail of notes on the left saying where the answers go, the
   fields on the right. Everything here is written against includes/waform.php
   rather than against either page, so neither owns it.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------------ shell */
/* The notes on the left say what the button does before it is pressed, and
   they stay put while the form scrolls past them, because "nothing is stored
   here" is worth reading at the bottom of the form as well as at the top. */
.waform-lay {
  display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: clamp(30px, 3.6vw, 68px); align-items: start;
}
@media (max-width: 980px) { .waform-lay { grid-template-columns: 1fr; } }

.waform-rail { position: sticky; top: calc(var(--header-h) + 26px); }
@media (max-width: 980px) { .waform-rail { position: static; } }
.waform-rail__list { list-style: none; margin: 0; padding: 0; }
.waform-rail__list li { padding: 24px 0; border-top: 1px solid var(--line); }
.waform-rail__list li:first-child { padding-top: 0; border-top: 0; }
.waform-rail__list h3 { margin-bottom: 8px; }
.waform-rail__list h3::before {
  content: ""; display: block; width: 26px; height: 2px; margin-bottom: 16px; background: var(--gold);
}
.waform-rail__list p { font-size: 14px; line-height: 1.75; color: var(--ink-3); }
.waform-rail__call {
  margin-top: 4px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.95; color: var(--ink-4);
}
.waform-rail__call a { color: var(--brand); }
.waform-rail__call a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ form */
.waform {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: clamp(24px, 3.2vw, 46px); box-shadow: var(--shadow-s);
}
.waform__intro {
  margin-bottom: clamp(22px, 2.6vw, 32px);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
}
/* Only ever printed on the no-scripting path, where the round trip has already
   happened and the page has come back with the answers still in it. */
.waform__alert {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; padding: 15px 18px;
  background: rgba(166, 63, 51, .06); border: 1px solid rgba(166, 63, 51, .3); border-radius: var(--r);
  font-size: 13.5px; line-height: 1.65; color: var(--bad);
}
.waform__alert svg { flex: none; width: 15px; height: 15px; margin-top: 3px; }

.waform__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.waform__set + .waform__set { margin-top: clamp(28px, 3.2vw, 44px); border-top: 1px solid var(--line-2); }
.waform__legend {
  display: block; width: 100%; padding: 0;
  font-family: var(--f-display); font-weight: 500; font-size: 1.26rem; letter-spacing: -.01em;
}
/* A legend is laid out against the fieldset's border box rather than its
   padding box, so padding on the fieldset opens its gap under the heading,
   between the heading and its own note, instead of above it. The space that
   separates one group from the last belongs on the legend. */
.waform__set + .waform__set .waform__legend { padding-top: clamp(26px, 3vw, 40px); }
.waform__note { margin: 7px 0 22px; font-size: 13.5px; line-height: 1.65; color: var(--ink-4); }

.waform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 22px); }
@media (max-width: 620px) { .waform__grid { grid-template-columns: 1fr; } }

.waform__foot {
  margin-top: clamp(26px, 3vw, 38px); padding-top: clamp(22px, 2.6vw, 30px);
  border-top: 1px solid var(--line-2); display: grid; gap: 18px; justify-items: start;
}
.waform__small { max-width: 58ch; font-size: 12.5px; line-height: 1.8; color: var(--ink-4); }

.waform__done {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; max-width: 62ch;
  background: rgba(1, 106, 172, .05); border: 1px solid rgba(1, 106, 172, .28); border-radius: var(--r);
  font-size: 13.5px; line-height: 1.7; color: var(--ink-2);
}
.waform__done[hidden] { display: none; }
.waform__done svg { flex: none; width: 15px; height: 15px; margin-top: 4px; color: var(--brand); }
.waform__done a { color: var(--brand); text-decoration: underline; }

/* ----------------------------------------------------------------- field */
.fld { min-width: 0; }
.fld--wide { grid-column: 1 / -1; }

.fld__lab {
  display: block; margin: 0 0 9px;
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.fld__opt {
  margin-left: 9px; font-weight: 400; font-style: italic; letter-spacing: .02em;
  text-transform: none; color: var(--ink-4);
}

.fld__in {
  width: 100%; padding: 13px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r);
  font-size: 15px; line-height: 1.5;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.fld__in::placeholder { color: var(--ink-4); }
.fld__in:hover { border-color: var(--ink-4); }
.fld__in:focus { border-color: var(--brand); }
.fld__in--area { min-height: 132px; resize: vertical; }
/* Under 16px, iOS Safari zooms the page in when a field takes focus and does
   not zoom back out when it loses it. The type goes up on a narrow screen
   rather than the form being left to fight the browser. */
@media (max-width: 620px) { .fld__in { font-size: 16px; } }

/* The native chevron is drawn by the platform and cannot be brought into line
   with the one on the collections bar, so it is turned off and redrawn. */
.fld__sel { position: relative; display: block; }
.fld__sel .fld__in { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.fld__sel::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; pointer-events: none;
  border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
}
/* Nothing picked yet reads as placeholder text rather than as an answer. */
.fld__sel .fld__in:invalid { color: var(--ink-4); }
.fld__sel option { color: var(--ink); }

/* Tick boxes as pills: the pill is the label, so the whole of it is the target
   rather than a 17px square sitting beside it. */
.fld__boxes { display: flex; flex-wrap: wrap; gap: 10px; }
.box {
  display: inline-flex; align-items: center; gap: 11px; padding: 11px 19px 11px 15px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 99px;
  font-size: 13.5px; color: var(--ink-2); cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
}
.box:hover { border-color: var(--ink-4); }
.box:has(input:checked) { border-color: var(--brand); background: rgba(1, 106, 172, .05); color: var(--ink); }
.box input {
  position: relative; flex: none; margin: 0; width: 17px; height: 17px;
  appearance: none; -webkit-appearance: none; cursor: pointer;
  border: 1px solid var(--ink-4); border-radius: 2px; background: transparent;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.box input::after {
  content: ""; position: absolute; left: 5.5px; top: 1.5px; width: 4px; height: 9px;
  border: solid #fff; border-width: 0 1.6px 1.6px 0;
  transform: rotate(42deg) scale(0); transition: transform .25s var(--ease);
}
.box input:checked { background: var(--brand); border-color: var(--brand); }
.box input:checked::after { transform: rotate(42deg) scale(1); }

.fld__hint { margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--ink-4); }
.fld__err {
  margin-top: 9px; display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.6; color: var(--bad);
}
.fld__err svg { flex: none; width: 13px; height: 13px; margin-top: 3px; }
.fld.is-bad .fld__lab { color: var(--bad); }
.fld.is-bad .fld__in { border-color: rgba(166, 63, 51, .55); }
.fld.is-bad .fld__boxes .box { border-color: rgba(166, 63, 51, .35); }

/* --------------------------------------------------------------------------
   25. Questions
   --------------------------------------------------------------------------
   The answered-before block under a form, on /dealers and on /contact. Plain
   <details>, so it opens with scripting off and a browser can find text inside
   a shut one.
   -------------------------------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-weight: 500; font-size: 1.12rem; line-height: 1.42;
  letter-spacing: -.01em; text-wrap: balance;
  transition: color .3s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--brand); }
.faq__q::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px;
  border-right: 1px solid var(--ink-4); border-bottom: 1px solid var(--ink-4);
  transform: rotate(45deg);
  transition: transform .35s var(--ease), border-color .35s var(--ease), margin .35s var(--ease);
}
.faq__item[open] .faq__q { color: var(--brand); }
.faq__item[open] .faq__q::after { margin-top: 11px; border-color: var(--brand); transform: rotate(-135deg); }
.faq__a { padding-bottom: 26px; }
.faq__a p { max-width: 66ch; font-size: 14.5px; line-height: 1.8; color: var(--ink-3); }


/* --------------------------------------------------------------------------
   26. Contact page
   --------------------------------------------------------------------------
   The form is section 24 and the questions under it are section 25, so all
   that is left here is the list of ways in and the pair of addresses. Both are
   plates in the same family as the pillars and the terms grid; a contact page
   is not the place to introduce a new one.
   -------------------------------------------------------------------------- */

/* ------------------------------------------------------------- ways in */
/* Each card is a channel, and the line under the heading is the thing you
   would actually dial, copy or walk to, so it is set larger than the sentence
   explaining it. The link sits on the floor of the card, on its own rule, so
   the cards line up along the bottom however long the sentences run. */
.ctc-ways {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden;
}
@media (max-width: 900px) { .ctc-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ctc-ways { grid-template-columns: 1fr; } }

.ctc-way {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--paper); padding: 26px 26px 22px;
}
.ctc-way__ico { width: 30px; height: 30px; margin-bottom: 6px; color: var(--brand); }
.ctc-way h3, .ctc-way .h4 { margin: 0; }
.ctc-way__v {
  font-family: var(--f-display); font-size: 1.02rem; line-height: 1.45; color: var(--ink);
  letter-spacing: -.01em;
}
.ctc-way p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-3); }
.ctc-way__go {
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line-2);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand);
}
.ctc-way__go svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.ctc-way__go:hover svg { transform: translateX(3px); }

/* The works is an address rather than a way in, so it is printed paler and
   given nothing to press. */
.ctc-way--quiet { background: var(--cream); }
.ctc-way--quiet .ctc-way__ico { color: var(--ink-4); }

/* ---------------------------------------------------------- two places */
.ctc-two {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(30px, 4vw, 66px); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.ctc-two__row { padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.ctc-two dt {
  margin-bottom: 10px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.ctc-two dd { margin: 0; font-size: 14px; line-height: 1.8; color: rgba(226, 236, 244, .72); }
@media (max-width: 760px) { .ctc-two { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   27. Legal pages
   --------------------------------------------------------------------------
   Privacy, terms and warranty are one shape rendered three times out of
   includes/legal.php, so they read as one document set rather than three
   pages that drifted apart. Nothing here is decorative: the measure is held
   short because the copy is dense, and a heading is anchored by a gold rule
   rather than a numeral, the way every other repeated block on the site is.
   -------------------------------------------------------------------------- */
.legal { padding-block: clamp(52px, 7vw, 88px); }
.legal__updated {
  margin-bottom: clamp(34px, 5vw, 52px);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4);
}
.legal__sec { padding-block: clamp(26px, 3.4vw, 38px); border-top: 1px solid var(--line); }
.legal__sec:first-of-type { border-top: 0; padding-top: 0; }
.legal__h {
  margin: 0 0 18px; font-family: var(--f-display); font-weight: 500;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.3; color: var(--ink);
}
.legal__h::before {
  content: ""; display: block; width: 26px; height: 2px;
  margin-bottom: 16px; background: var(--gold);
}
.legal p { max-width: 68ch; margin: 0 0 16px; font-size: 15px; line-height: 1.85; color: var(--ink-2); }
.legal p:last-child { margin-bottom: 0; }
.legal a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--brand-2); }
.legal ul { max-width: 68ch; margin: 0 0 16px; padding: 0; list-style: none; }
.legal ul li {
  position: relative; padding-left: 22px; margin-bottom: 11px;
  font-size: 15px; line-height: 1.8; color: var(--ink-2);
}
.legal ul li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.legal__foot {
  margin-top: clamp(34px, 5vw, 52px); padding: clamp(24px, 3vw, 34px);
  background: var(--cream); border: 1px solid var(--line-2); border-radius: var(--r);
}
.legal__foot p { max-width: none; font-size: 14.5px; color: var(--ink-3); }