/* Design tokens: desktop sizing, typography and brand colors. */
:root {
  --scale: 1vw;
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, calc(var(--scale) * 0));
  padding-bottom: env(safe-area-inset-bottom, calc(var(--scale) * 0));
  --serif: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --sans: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --bg: #fefdf1;
  --surface: #fdf4d3;
  --fg: #231f20;
  --muted: #6b5a52;
  --line: #d8c7a1;
  --link: #7a1e0f;
  --btn-bg: #7a1e0f;
  --btn-fg: #fefdf1;
  --gold: #b07f22;
  --gold-soft: #e3bc62;
  --deep-bg: #7a1e0f;
  --deep-fg: #fefdf1;
  --deep-muted: #f0e2bd;
  --deep-line: #b87653;
  --foot-bg: #46130c;
  --foot-fg: #fefdf1;
  --foot-muted: #ddc6ac;
  --alert: #f6bba8;
  --err: #a3261a;
  --logo-l: block;
  --logo-d: none;
  --cream-fixed: #fefdf1;
  --ink-fixed: #231f20;
  --muted-fixed: #6b5a52;
}

html {
  scroll-padding-top: env(safe-area-inset-top, calc(var(--scale) * 0));
}

body {
  margin: 0;
  padding: 0;
  font:
    calc(var(--scale) * 0.97222) -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  background: #faf9f5;
  color: #141413;
}

img {
  max-width: 100%;
}

[hidden]:not([hidden="until-found" i]) {
  display: none !important;
}

/* Base styles */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 calc(var(--scale) * 1.1111) / 1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  line-height: 1.08;
  letter-spacing: calc(var(--scale) * -0.016667);
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: calc(var(--scale) * 0.13889) solid var(--gold);
  outline-offset: calc(var(--scale) * 0.27778);
}

.wrap {
  width: 100%;
  max-width: calc(var(--scale) * 91.667);
  margin-inline: auto;
  padding-inline: calc(var(--scale) * 4);
}

.sec {
  padding-block: calc(var(--scale) * 6.5);
}

h2 {
  font-size: calc(var(--scale) * 4.2);
}

.sh {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: calc(var(--scale) * 1.3889) calc(var(--scale) * 2.7778);
  flex-wrap: wrap;
  margin-bottom: calc(var(--scale) * 3.5);
}

.sh p {
  max-width: calc(var(--scale) * 30);
  color: var(--muted);
}

.lnk {
  display: inline-block;
  font: 500 calc(var(--scale) * 1) / 1.2 var(--sans);
  letter-spacing: calc(var(--scale) * 0.022222);
  text-decoration: none;
  color: var(--link);
  border-bottom: calc(var(--scale) * 0.069444) solid currentColor;
  padding-bottom: calc(var(--scale) * 0.27778);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--scale) * 3.6111);
  padding: 0 calc(var(--scale) * 2.2222);
  border: calc(var(--scale) * 0.069444) solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 500 calc(var(--scale) * 1) / 1 var(--sans);
  letter-spacing: calc(var(--scale) * 0.044444);
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}

.btn:hover {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

.btn.ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}

.btn.ghost:hover {
  background: var(--fg);
  color: var(--bg);
}

.btn.sm {
  min-height: calc(var(--scale) * 2.9167);
  padding: 0 calc(var(--scale) * 1.3889);
  font-size: calc(var(--scale) * 0.93333);
}

/* Arch motif */
.arch {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--scale) * 69.375) calc(var(--scale) * 69.375) 0 0;
  background: #9a8478;
}

.arch::after {
  content: "";
  position: absolute;
  inset: calc(var(--scale) * 0.69444);
  border: calc(var(--scale) * 0.069444) solid rgba(255, 255, 255, 0.4);
  border-radius: calc(var(--scale) * 69.375) calc(var(--scale) * 69.375) 0 0;
  pointer-events: none;
}

.arch canvas,
.flat canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.flat {
  position: relative;
  overflow: hidden;
  background: #9a8478;
}

figure {
  margin: 0;
}

figure:hover canvas {
  transform: scale(1.045);
}

/* Top bar and header */
.top {
  background: var(--deep-bg);
  color: var(--deep-fg);
  font-size: calc(var(--scale) * 0.88889);
  letter-spacing: calc(var(--scale) * 0.022222);
}

.top .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--scale) * 1.1111);
  min-height: calc(var(--scale) * 2.9167);
}

.top .t-r {
  display: flex;
  gap: calc(var(--scale) * 1.5278);
}

.top .t-r span + span {
  padding-left: calc(var(--scale) * 1.5278);
  border-left: calc(var(--scale) * 0.069444) solid var(--deep-line);
}

.hdr {
  position: sticky;
  top: env(safe-area-inset-top, calc(var(--scale) * 0));
  z-index: 20;
  background: var(--bg);
  border-bottom: calc(var(--scale) * 0.069444) solid var(--line);
  transition: box-shadow 0.3s;
}

@supports (background: color-mix(in srgb, red 50%, blue)) {
  .hdr {
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    -webkit-backdrop-filter: blur(calc(var(--scale) * 0.97222));
    backdrop-filter: blur(calc(var(--scale) * 0.97222));
  }
}

.hdr.is-scrolled {
  box-shadow: 0 calc(var(--scale) * 0.97222) calc(var(--scale) * 2.0833)
    calc(var(--scale) * -1.6667) rgba(60, 10, 5, 0.55);
}

.hdr-in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(var(--scale) * 1.1111);
}

.brand {
  display: block;
  padding-block: calc(var(--scale) * 0.83333);
  transition: padding 0.3s;
}

.brand img {
  height: calc(var(--scale) * 4.8611);
  width: auto;
  transition: height 0.3s;
}

.hdr.is-scrolled .brand {
  padding-block: calc(var(--scale) * 0.55556);
}

.hdr.is-scrolled .brand img {
  height: calc(var(--scale) * 3.4722);
}

.logo-l {
  display: var(--logo-l);
}

.logo-d {
  display: var(--logo-d);
}

.links {
  display: flex;
  gap: calc(var(--scale) * 0.41667);
  list-style: none;
  margin: 0;
  padding: 0;
}

.links a {
  display: block;
  position: relative;
  padding: calc(var(--scale) * 0.69444) calc(var(--scale) * 1.1111);
  text-decoration: none;
  font-size: calc(var(--scale) * 1.0222);
  font-weight: 400;
  letter-spacing: calc(var(--scale) * 0.022222);
}

.links a::after {
  content: "";
  position: absolute;
  left: calc(var(--scale) * 1.1111);
  right: calc(var(--scale) * 1.1111);
  bottom: calc(var(--scale) * 0.27778);
  height: calc(var(--scale) * 0.069444);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.links a:hover::after,
.links a[aria-current="true"]::after {
  transform: scaleX(1);
}

.links a[aria-current="true"] {
  color: var(--link);
}

.hdr-r {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: calc(var(--scale) * 1.8056);
}

.menu-btn {
  display: none;
  width: calc(var(--scale) * 3.1944);
  height: calc(var(--scale) * 3.1944);
  border: calc(var(--scale) * 0.069444) solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.menu-btn svg {
  width: calc(var(--scale) * 1.5278);
  height: calc(var(--scale) * 1.5278);
}

.mnav {
  border-top: calc(var(--scale) * 0.069444) solid var(--line);
  background: var(--bg);
}

.mnav ul {
  list-style: none;
  margin: 0;
  padding: calc(var(--scale) * 0.55556) 0 0;
  display: grid;
}

.mnav li a {
  display: block;
  padding: calc(var(--scale) * 1.1111) 0;
  border-bottom: calc(var(--scale) * 0.069444) solid var(--line);
  text-decoration: none;
  font: 400 calc(var(--scale) * 1.7778) / 1.2 var(--serif);
}

.mnav .cta-row {
  margin: calc(var(--scale) * 1.6667) 0 calc(var(--scale) * 1.9444);
}

/* Hero */
.hero {
  padding-block: calc(var(--scale) * 6) calc(var(--scale) * 8);
  overflow-x: clip;
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: calc(var(--scale) * 6);
  align-items: center;
}

h1 {
  font-size: calc(var(--scale) * 6.4);
  line-height: 1.03;
  letter-spacing: calc(var(--scale) * -0.031111);
}

.lede {
  max-width: calc(var(--scale) * 29);
  margin-top: calc(var(--scale) * 1.9444);
  color: var(--muted);
  font-size: calc(var(--scale) * 1.2222);
}

.cta-row {
  display: flex;
  gap: calc(var(--scale) * 0.97222);
  flex-wrap: wrap;
  margin-top: calc(var(--scale) * 2.7778);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--scale) * 1.6667);
  margin-top: calc(var(--scale) * 4.4444);
  padding-top: calc(var(--scale) * 1.6667);
  border-top: calc(var(--scale) * 0.069444) solid var(--line);
  font-size: calc(var(--scale) * 0.97778);
  color: var(--muted);
}

.hero-art {
  position: relative;
  justify-self: end;
  width: min(100%, calc(var(--scale) * 31.944));
  margin-bottom: 6%;
}

.hero-art::before {
  content: "";
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border: calc(var(--scale) * 0.069444) solid var(--gold);
  border-radius: 50%;
  right: -16%;
  top: 12%;
  opacity: 0.8;
}

.hero-main {
  aspect-ratio: 4/5.6;
}

.hero-small {
  position: absolute;
  left: -17%;
  bottom: -8%;
  width: 44%;
  aspect-ratio: 3/4;
  box-shadow: 0 0 0 calc(var(--scale) * 0.55556) var(--bg);
}

.cap {
  position: relative;
  margin-top: calc(var(--scale) * 1.1111);
  font: italic 400 calc(var(--scale) * 1.1667) / 1.4 var(--serif);
  color: var(--muted);
  text-align: right;
}

/* Statement */
.statement .big {
  font: 400 calc(var(--scale) * 4.5) / 1.14 var(--serif);
  letter-spacing: calc(var(--scale) * -0.022222);
  max-width: calc(var(--scale) * 23.333);
  text-wrap: balance;
}

.statement .foot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--scale) * 1.9444) calc(var(--scale) * 3.3333);
  align-items: end;
  margin-top: calc(var(--scale) * 3.8889);
  max-width: calc(var(--scale) * 62.5);
  color: var(--muted);
}

/* Shop grid */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: calc(var(--scale) * 4.4444) calc(var(--scale) * 1.6667);
  align-items: end;
}

.t1 {
  grid-column: 1/6;
}

.t2 {
  grid-column: 6/10;
  margin-top: calc(var(--scale) * 9.7222);
}

.t3 {
  grid-column: 10/13;
}

.t4 {
  grid-column: 1/5;
}

.t5 {
  grid-column: 5/9;
  margin-top: calc(var(--scale) * 6.25);
}

.t6 {
  grid-column: 9/13;
}

.t1 .arch {
  aspect-ratio: 4/5.4;
}

.t2 .arch {
  aspect-ratio: 4/5;
}

.t3 .arch {
  aspect-ratio: 3/4;
}

.t4 .arch {
  aspect-ratio: 3/4;
}

.t5 .arch {
  aspect-ratio: 4/5.2;
}

.t6 .arch {
  aspect-ratio: 3.4/4.6;
}

.tile figcaption {
  display: grid;
  gap: calc(var(--scale) * 0.55556);
  margin-top: calc(var(--scale) * 1.3889);
  justify-items: start;
}

.tile h3 {
  font-size: calc(var(--scale) * 1.8333);
}

.tile p {
  color: var(--muted);
  font-size: calc(var(--scale) * 1.0333);
  max-width: calc(var(--scale) * 16.667);
}

/* Fit finder */
.fit {
  background: var(--deep-bg);
  color: var(--deep-fg);
}

.fit .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--scale) * 7);
  align-items: start;
}

.fit h2 {
  max-width: none;
  font-size: calc(var(--scale) * 3.35);
  line-height: 1.14;
}

.fit-title-line {
  display: block;
  white-space: nowrap;
}

.fit .intro {
  margin-top: calc(var(--scale) * 1.6667);
  color: var(--deep-muted);
  max-width: calc(var(--scale) * 32);
}

ol.steps {
  margin: calc(var(--scale) * 2.7778) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
  display: grid;
  gap: calc(var(--scale) * 1.25);
  max-width: calc(var(--scale) * 25.556);
}

ol.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: calc(var(--scale) * 2.4444) minmax(0, 1fr);
  gap: calc(var(--scale) * 0.55556);
  color: var(--deep-fg);
}

ol.steps li::before {
  content: counter(s);
  font: italic 400 calc(var(--scale) * 1.6667) / 1.3 var(--serif);
  color: var(--gold-soft);
}

.fitcard {
  border: calc(var(--scale) * 0.069444) solid var(--deep-line);
  padding: calc(var(--scale) * 2.5);
  background: rgba(255, 255, 255, 0.04);
}

.fit-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--scale) * 1.1111);
  flex-wrap: wrap;
  margin-bottom: calc(var(--scale) * 1.9444);
}

.fit-top p {
  font-size: calc(var(--scale) * 0.95556);
  color: var(--deep-muted);
}

.units {
  display: inline-flex;
  border: calc(var(--scale) * 0.069444) solid var(--deep-line);
}

.units input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.units label {
  padding: calc(var(--scale) * 0.55556) calc(var(--scale) * 1.25);
  font-size: calc(var(--scale) * 0.95556);
  cursor: pointer;
  color: var(--deep-muted);
  transition:
    background 0.3s,
    color 0.3s;
}

.units input:checked + label {
  background: var(--deep-fg);
  color: var(--deep-bg);
}

.units input:focus-visible + label {
  outline: calc(var(--scale) * 0.13889) solid var(--gold-soft);
  outline-offset: calc(var(--scale) * 0.20833);
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--scale) * 1.9444);
}

.field {
  display: grid;
  gap: calc(var(--scale) * 0.41667);
  min-width: 0;
}

.field label {
  font-size: calc(var(--scale) * 0.95556);
  color: var(--deep-muted);
}

.field input {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: calc(var(--scale) * 0.069444) solid var(--deep-line);
  border-radius: 0;
  color: var(--deep-fg);
  font: 400 calc(var(--scale) * 2.4444) / 1.2 var(--serif);
  padding: calc(var(--scale) * 0.27778) 0 calc(var(--scale) * 0.55556);
}

.field input:focus-visible {
  outline: calc(var(--scale) * 0.13889) solid var(--gold-soft);
  outline-offset: calc(var(--scale) * 0.27778);
  border-bottom-color: var(--gold-soft);
}

.result {
  margin-top: calc(var(--scale) * 2.5);
  padding-top: calc(var(--scale) * 2.0833);
  border-top: calc(var(--scale) * 0.069444) solid var(--deep-line);
}

.result .lbl {
  font-size: calc(var(--scale) * 0.95556);
  color: var(--deep-muted);
}

.size {
  font: 400 calc(var(--scale) * 8) / 1.05 var(--serif);
  letter-spacing: calc(var(--scale) * -0.022222);
  margin-top: calc(var(--scale) * 0.41667);
}

.sister {
  margin-top: calc(var(--scale) * 0.55556);
  color: var(--deep-fg);
}

.note {
  margin-top: calc(var(--scale) * 1.3889);
  font-size: calc(var(--scale) * 0.97778);
  color: var(--deep-muted);
  max-width: calc(var(--scale) * 24.444);
}

.msg {
  color: var(--alert);
}

/* Products */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(var(--scale) * 3.3333) calc(var(--scale) * 1.6667);
}

.prod .flat {
  aspect-ratio: 4/5.2;
}

.prod figcaption {
  display: grid;
  gap: calc(var(--scale) * 0.41667);
  margin-top: calc(var(--scale) * 1.25);
  justify-items: start;
}

.prod h3 {
  font-size: calc(var(--scale) * 1.5);
}

.prod p {
  font-size: calc(var(--scale) * 1.0222);
  color: var(--muted);
}

.dots {
  display: flex;
  gap: calc(var(--scale) * 0.55556);
  margin-block: calc(var(--scale) * 0.41667) calc(var(--scale) * 0.27778);
}

.dots span {
  width: calc(var(--scale) * 0.90278);
  height: calc(var(--scale) * 0.90278);
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--scale) * 0.069444) rgba(0, 0, 0, 0.16);
}

/* Fabric */
.fabric {
  background: var(--surface);
  border-block: calc(var(--scale) * 0.069444) solid var(--line);
}

.fabric .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: calc(var(--scale) * 7);
  align-items: start;
}

.fabric .lead {
  margin-top: calc(var(--scale) * 1.6667);
  color: var(--muted);
  max-width: calc(var(--scale) * 22.222);
}

.frow {
  display: grid;
  grid-template-columns: calc(var(--scale) * 6.1111) minmax(0, 1fr);
  gap: calc(var(--scale) * 1.9444);
  align-items: center;
  padding-block: calc(var(--scale) * 2.0833);
  border-top: calc(var(--scale) * 0.069444) solid var(--line);
}

.frow:last-child {
  border-bottom: calc(var(--scale) * 0.069444) solid var(--line);
}

.sw {
  position: relative;
  width: calc(var(--scale) * 6.1111);
  height: calc(var(--scale) * 6.1111);
  border-radius: 50%;
  overflow: hidden;
  background: #9a8478;
}

.sw canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.frow h3 {
  font-size: calc(var(--scale) * 1.6667);
}

.frow p {
  margin-top: calc(var(--scale) * 0.41667);
  color: var(--muted);
  max-width: calc(var(--scale) * 24.444);
  font-size: calc(var(--scale) * 1.0556);
}

/* Shades */
.shades {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: calc(var(--scale) * 1.3889);
}

.shade {
  display: grid;
  gap: calc(var(--scale) * 0.97222);
  font-size: calc(var(--scale) * 0.97778);
}

.dot {
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 calc(var(--scale) * 0.069444) rgba(0, 0, 0, 0.1);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.shade:hover .dot {
  transform: translateY(calc(var(--scale) * -0.55556));
}

/* Story */
.story .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: calc(var(--scale) * 8);
  align-items: center;
}

.story .arch {
  width: min(100%, calc(var(--scale) * 30.556));
  aspect-ratio: 4/5.4;
}

.story .body {
  display: grid;
  gap: calc(var(--scale) * 1.5278);
  margin-top: calc(var(--scale) * 1.9444);
  max-width: calc(var(--scale) * 30);
  color: var(--muted);
}

.vals {
  margin: calc(var(--scale) * 2.5) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.vals li {
  display: grid;
  grid-template-columns: minmax(0, calc(var(--scale) * 13.333)) minmax(0, 1fr);
  gap: calc(var(--scale) * 0.55556) calc(var(--scale) * 1.6667);
  padding-block: calc(var(--scale) * 1.3889);
  border-top: calc(var(--scale) * 0.069444) solid var(--line);
}

.vals li:last-child {
  border-bottom: calc(var(--scale) * 0.069444) solid var(--line);
}

.vals b {
  font: 400 calc(var(--scale) * 1.3889) / 1.3 var(--serif);
}

.vals span {
  color: var(--muted);
  font-size: calc(var(--scale) * 1.0333);
}

/* Quotes */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--scale) * 2.7778);
}

blockquote {
  margin: 0;
  padding-top: calc(var(--scale) * 1.8056);
  border-top: calc(var(--scale) * 0.069444) solid var(--link);
}

blockquote p {
  font: italic 400 calc(var(--scale) * 1.5556) / 1.45 var(--serif);
}

cite {
  display: block;
  margin-top: calc(var(--scale) * 1.5278);
  font-style: normal;
  font-size: calc(var(--scale) * 0.97778);
  color: var(--muted);
}

.sample {
  font-size: calc(var(--scale) * 0.93333);
  color: var(--muted);
}

/* FAQ */
.faq .wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: calc(var(--scale) * 7);
  align-items: start;
}

.faq .aside {
  margin-top: calc(var(--scale) * 1.5278);
  color: var(--muted);
  max-width: calc(var(--scale) * 18.889);
}

details {
  border-top: calc(var(--scale) * 0.069444) solid var(--line);
}

details:last-child {
  border-bottom: calc(var(--scale) * 0.069444) solid var(--line);
}

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--scale) * 1.6667);
  padding: calc(var(--scale) * 1.8056) 0;
  font: 400 calc(var(--scale) * 1.5556) / 1.3 var(--serif);
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  flex: none;
  font: 300 calc(var(--scale) * 2) / 1 var(--sans);
  transition: transform 0.35s;
}

details[open] summary::after {
  transform: rotate(45deg);
}

details p {
  padding-bottom: calc(var(--scale) * 1.9444);
  max-width: calc(var(--scale) * 31.111);
  color: var(--muted);
  font-size: calc(var(--scale) * 1.0556);
}

/* Contact */
.contact {
  background: var(--surface);
  border-block: calc(var(--scale) * 0.069444) solid var(--line);
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: calc(var(--scale) * 7);
  align-items: start;
}

.clist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.clist > li {
  display: grid;
  grid-template-columns: calc(var(--scale) * 3.1944) minmax(0, 1fr);
  gap: calc(var(--scale) * 1.3889);
  padding-block: calc(var(--scale) * 1.8056);
  border-top: calc(var(--scale) * 0.069444) solid var(--line);
}

.clist > li:last-child {
  border-bottom: calc(var(--scale) * 0.069444) solid var(--line);
}

.ic {
  width: calc(var(--scale) * 3.1944);
  height: calc(var(--scale) * 3.1944);
  border: calc(var(--scale) * 0.069444) solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--link);
}

.ic svg {
  width: calc(var(--scale) * 1.3889);
  height: calc(var(--scale) * 1.3889);
}

.clist h3 {
  font-size: calc(var(--scale) * 1.4444);
  margin-bottom: calc(var(--scale) * 0.41667);
}

.clist address,
.clist .ctext {
  font-style: normal;
  color: var(--muted);
  font-size: calc(var(--scale) * 1.0556);
}

.clist .lnk {
  margin-top: calc(var(--scale) * 0.83333);
}

.phone {
  font: 400 calc(var(--scale) * 1.8889) / 1.2 var(--serif);
  color: var(--fg);
}

.copy-row {
  display: flex;
  align-items: center;
  gap: calc(var(--scale) * 1.1111);
  flex-wrap: wrap;
  margin-top: calc(var(--scale) * 0.83333);
}

.status {
  font-size: calc(var(--scale) * 0.95556);
  color: var(--muted);
}

.cform {
  background: var(--bg);
  border: calc(var(--scale) * 0.069444) solid var(--line);
  padding: calc(var(--scale) * 4);
  display: grid;
  gap: calc(var(--scale) * 1.5278);
}

.cform h3 {
  font-size: calc(var(--scale) * 2);
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--scale) * 1.5278);
}

.cf {
  display: grid;
  gap: calc(var(--scale) * 0.27778);
  min-width: 0;
}

.cf label {
  font-size: calc(var(--scale) * 0.93333);
  color: var(--muted);
}

.cf input,
.cf select,
.cf textarea {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: calc(var(--scale) * 0.069444) solid var(--muted);
  border-radius: 0;
  color: var(--fg);
  font: 400 calc(var(--scale) * 1.1111) / 1.5 var(--sans);
  padding: calc(var(--scale) * 0.55556) 0 calc(var(--scale) * 0.69444);
}

.cf textarea {
  min-height: calc(var(--scale) * 7.2222);
  resize: vertical;
}

.cf input:focus-visible,
.cf select:focus-visible,
.cf textarea:focus-visible {
  outline: calc(var(--scale) * 0.13889) solid var(--gold);
  outline-offset: calc(var(--scale) * 0.27778);
}

.cf .err {
  font-size: calc(var(--scale) * 0.91111);
  color: var(--err);
  min-height: calc(var(--scale) * 1.4444);
}

.form-foot {
  display: flex;
  align-items: center;
  gap: calc(var(--scale) * 1.3889);
  flex-wrap: wrap;
}

.form-msg {
  font-size: calc(var(--scale) * 0.97778);
  color: var(--muted);
  max-width: calc(var(--scale) * 24.444);
  min-height: calc(var(--scale) * 1.7778);
}

/* Signature band (fixed brand cream so the gold logo always sits on its own ground) */
.sig {
  background: var(--cream-fixed);
  color: var(--ink-fixed);
  border-top: calc(var(--scale) * 0.069444) solid rgba(122, 31, 18, 0.2);
  padding-block: calc(var(--scale) * 7);
}

.sig .wrap {
  display: grid;
  justify-items: center;
  gap: calc(var(--scale) * 1.5278);
  text-align: center;
}

.sig img {
  width: min(100%, calc(var(--scale) * 36.111));
  height: auto;
}

.sig p {
  color: var(--muted-fixed);
  font-size: calc(var(--scale) * 1.0556);
  max-width: calc(var(--scale) * 20);
}

/* Footer */
.foot {
  background: var(--foot-bg);
  color: var(--foot-fg);
  padding-block: calc(var(--scale) * 8) calc(var(--scale) * 2.2222);
}

.foot-logo {
  height: auto;
  width: calc(var(--scale) * 14.167);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: calc(var(--scale) * 3.3333) calc(var(--scale) * 2.2222);
}

.foot h4 {
  margin: 0 0 calc(var(--scale) * 1.25);
  font: 400 calc(var(--scale) * 1.2222) / 1.2 var(--serif);
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: calc(var(--scale) * 0.69444);
  font-size: calc(var(--scale) * 1);
  color: var(--foot-muted);
}

.foot a {
  text-decoration: none;
}

.foot a:hover {
  color: var(--foot-fg);
}

.foot .blurb {
  margin-top: calc(var(--scale) * 1.3889);
  max-width: calc(var(--scale) * 16.667);
  color: var(--foot-muted);
  font-size: calc(var(--scale) * 1);
}

.foot-bot {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--scale) * 1.1111) calc(var(--scale) * 2.2222);
  flex-wrap: wrap;
  margin-top: calc(var(--scale) * 4.4444);
  padding-top: calc(var(--scale) * 1.6667);
  border-top: calc(var(--scale) * 0.069444) solid rgba(246, 235, 221, 0.16);
  font-size: calc(var(--scale) * 0.93333);
  color: var(--foot-muted);
}

.foot-bot ul {
  display: flex;
  gap: calc(var(--scale) * 1.6667);
  flex-wrap: wrap;
}

/* Ivory, deep red and gold palette from the supplied brand reference. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--scale) * 9);
}

body {
  overflow-x: clip;
}

button,
input,
select,
textarea {
  font-family: var(--sans);
}

button {
  cursor: pointer;
}

select option {
  background: var(--bg);
}

.wrap {
  max-width: none;
  padding-inline: calc(var(--scale) * 6);
}

.hdr.is-scrolled {
  box-shadow: none;
}

.hero-main,
.hero-small {
  animation: none;
}

.hero h1 {
  font-size: calc(var(--scale) * 6.4);
  max-width: calc(var(--scale) * 47);
}

.eyebrow {
  --gold-soft: var(--link);
  text-transform: uppercase;
  letter-spacing: calc(var(--scale) * 0.2);
  font-size: calc(var(--scale) * 0.8);
  color: var(--gold-soft);
  margin-bottom: calc(var(--scale) * 2);
}

.hero-main img,
.hero-small img,
.tile img,
.prod img,
.story .arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform 0.7s;
}

figure:hover img {
  transform: scale(1.04);
}

.hero-main img {
  object-position: 50% 30%;
}

.hero-art::before {
  opacity: 0.35;
}

.statement {
  border-top: calc(var(--scale) * 0.07) solid var(--line);
}

.statement .big {
  max-width: 85%;
  color: var(--fg);
}

.prod .flat {
  border-radius: calc(var(--scale) * 10) calc(var(--scale) * 10) 0 0;
}

.swatch {
  flex-shrink: 0;
  border: calc(var(--scale) * 0.07) solid var(--muted);
  border-radius: 50%;
  width: calc(var(--scale) * 2.5);
  height: calc(var(--scale) * 2.5);
  padding: calc(var(--scale) * 0.6);
  background: transparent;
  display: grid;
  place-items: center;
}

.dots .swatch span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.swatch[aria-pressed="true"] {
  outline: calc(var(--scale) * 0.12) solid var(--fg);
  outline-offset: calc(var(--scale) * 0.15);
}

.shade {
  background: transparent;
  border: 0;
  color: var(--fg);
  padding: calc(var(--scale) * 0.5);
  text-align: center;
}

.shade[aria-pressed="true"] .dot {
  outline: calc(var(--scale) * 0.15) solid var(--fg);
  outline-offset: calc(var(--scale) * 0.4);
}

.shade .dot {
  width: 100%;
}

.shade-status {
  margin-top: calc(var(--scale) * 2);
  color: var(--muted);
}

.newsletter {
  padding-top: calc(var(--scale) * 4);
  margin-top: calc(var(--scale) * 5);
  border-top: calc(var(--scale) * 0.07) solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--scale) * 4);
}

.newsletter h3 {
  font-size: calc(var(--scale) * 2.5);
}

.newsletter label {
  display: block;
}

.newsletter input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: calc(var(--scale) * 0.07) solid var(--muted);
  color: var(--fg);
  font-size: inherit;
  padding: calc(var(--scale) * 1) 0;
  margin-block: calc(var(--scale) * 1);
}

.newsletter [role="status"] {
  margin-top: calc(var(--scale) * 1);
  color: var(--muted);
}

.quick-view {
  width: 70%;
  max-height: 85svh;
  overflow: auto;
  background: var(--bg);
  color: var(--fg);
  border: calc(var(--scale) * 0.07) solid var(--line);
  padding: calc(var(--scale) * 3);
}

.quick-view::backdrop {
  background: #100806cc;
}

.quick-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--scale) * 3);
}

.quick-view img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
}

.quick-view h2 {
  font-size: calc(var(--scale) * 3);
}

.quick-view p {
  margin-block: calc(var(--scale) * 2);
}

.quick-close {
  float: right;
  margin-bottom: calc(var(--scale) * 1);
}

/* Product preview: clear close control and a simple image-to-details flow. */
.quick-view {
  position: fixed;
  border-radius: calc(var(--scale) * 0.8);
}

.quick-close {
  position: absolute;
  top: calc(var(--scale) * 1);
  right: calc(var(--scale) * 1);
  z-index: 1;
  float: none;
  margin: 0;
  padding: 0;
  width: calc(var(--scale) * 3);
  height: calc(var(--scale) * 3);
  min-height: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg);
  border-color: var(--line);
  font: 400 calc(var(--scale) * 2) / 1 var(--sans);
}

.quick-close:hover {
  background: var(--surface);
  color: var(--fg);
}

.quick-layout {
  clear: both;
  align-items: center;
}

.quick-layout > div {
  min-width: 0;
}

.quick-view .eyebrow {
  margin: 0 0 calc(var(--scale) * 1);
}

.quick-enquire {
  width: 100%;
}

@media (max-width: 600px) {
  :root {
    --scale: 3.84vw;
  }

  .statement .foot-row .lnk {
    justify-self: start;
    font-size: calc(var(--scale) * 1.15);
    padding-bottom: calc(var(--scale) * 0.55);
    margin-bottom: calc(var(--scale) * 0.5);
  }

  /* Consistent mobile rhythm, readable captions and compact supporting layouts. */
  .hero {
    padding-block: calc(var(--scale) * 3) calc(var(--scale) * 4);
  }

  .fabric .wrap,
  .story .wrap,
  .faq .wrap,
  .contact-grid {
    gap: calc(var(--scale) * 2.5);
  }

  .lede,
  .fit .intro,
  .fabric .lead,
  .faq .aside,
  .sh p,
  .story .body {
    max-width: 100%;
  }

  .frow {
    grid-template-columns: calc(var(--scale) * 4.5) minmax(0, 1fr);
    gap: calc(var(--scale) * 1.25);
    padding-block: calc(var(--scale) * 1.5);
  }

  .sw {
    width: calc(var(--scale) * 4.5);
    height: calc(var(--scale) * 4.5);
  }

  .size {
    font-size: calc(var(--scale) * 5);
  }

  .newsletter {
    margin-top: calc(var(--scale) * 3);
    padding-top: calc(var(--scale) * 2.5);
    gap: calc(var(--scale) * 2);
  }

  .newsletter h3 {
    font-size: calc(var(--scale) * 2);
  }

  .foot {
    padding-block: calc(var(--scale) * 3.5) calc(var(--scale) * 2);
  }

  .foot-logo {
    width: calc(var(--scale) * 10);
  }

  .foot-grid > div:first-child,
  .foot-grid > div:last-child {
    grid-column: 1/-1;
  }

  .foot-bot {
    margin-top: calc(var(--scale) * 2.5);
  }

  .foot-bot ul {
    gap: calc(var(--scale) * 1);
  }

  .quick-layout {
    gap: calc(var(--scale) * 1.5);
  }

  .quick-view {
    padding: calc(var(--scale) * 1.25);
  }

  /* Keep mobile forms spacious enough to use without wasting content width. */
  .fit .wrap {
    gap: calc(var(--scale) * 2.5);
  }

  .fitcard,
  .cform {
    padding: calc(var(--scale) * 1.25);
  }

  .wrap {
    padding-inline: 5%;
  }

  .top .t-r,
  .links,
  .hdr-r .lnk {
    display: none;
  }

  .top .wrap {
    justify-content: center;
    text-align: center;
  }

  .top {
    font-size: calc(var(--scale) * 0.8);
  }

  .menu-btn {
    display: inline-flex;
  }

  .hdr-in {
    grid-template-columns: 1fr auto 1fr;
    gap: calc(var(--scale) * 0.5);
  }

  .brand img {
    height: calc(var(--scale) * 3.6);
  }

  .hdr.is-scrolled .brand img {
    height: calc(var(--scale) * 3);
  }

  .hdr-r .btn {
    padding-inline: calc(var(--scale) * 0.8);
    font-size: calc(var(--scale) * 0.7);
  }

  .hero .wrap,
  .fit .wrap,
  .fabric .wrap,
  .story .wrap,
  .faq .wrap,
  .contact-grid,
  .statement .foot-row,
  .newsletter,
  .quick-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero h1 {
    font-size: calc(var(--scale) * 3.4);
    max-width: none;
  }

  .hero .wrap {
    gap: calc(var(--scale) * 3);
  }

  .hero-art {
    width: 80%;
    margin-inline: auto;
    margin-bottom: 12%;
  }

  .hero-art::before {
    right: -7%;
  }

  .hero-small {
    left: -10%;
  }

  h2 {
    font-size: calc(var(--scale) * 2.6);
  }

  .fit h2 {
    font-size: calc(var(--scale) * 1.85);
  }

  .statement .big {
    font-size: calc(var(--scale) * 2.5);
    max-width: 100%;
  }

  .sec {
    padding-block: calc(var(--scale) * 4);
  }

  .shop-grid,
  .prod-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--scale) * 3) calc(var(--scale) * 1);
  }

  .tile {
    grid-column: auto;
    margin-top: 0;
  }

  .tile h3,
  .prod h3 {
    font-size: calc(var(--scale) * 1.35);
  }

  .tile p,
  .prod p {
    font-size: calc(var(--scale) * 0.98);
    line-height: 1.6;
  }

  .shades {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: calc(var(--scale) * 1.5);
  }

  .quotes,
  .vals li,
  .two,
  .fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(var(--scale) * 2);
  }

  .facts {
    gap: calc(var(--scale) * 1);
    font-size: calc(var(--scale) * 0.75);
    margin-top: calc(var(--scale) * 3);
  }

  .sh {
    margin-bottom: calc(var(--scale) * 3);
  }

  .quick-view {
    width: 90%;
  }

  .quick-view h2 {
    font-size: calc(var(--scale) * 2.5);
  }

  .review-controls {
    margin-top: calc(var(--scale) * 1.5);
    gap: calc(var(--scale) * 1);
    font-size: calc(var(--scale) * 0.9);
  }

  /* Mobile product sheet: image, title, copy, then primary enquiry. */
  .quick-view {
    width: 92%;
    max-height: 90svh;
    padding: calc(var(--scale) * 1.1);
    border-radius: calc(var(--scale) * 1);
    overscroll-behavior: contain;
  }

  .quick-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--scale) * 1.4);
  }

  .quick-layout img {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center 35%;
    border-radius: calc(var(--scale) * 0.65);
  }

  .quick-close {
    top: calc(var(--scale) * 1.6);
    right: calc(var(--scale) * 1.6);
    width: calc(var(--scale) * 2.8);
    height: calc(var(--scale) * 2.8);
    font-size: calc(var(--scale) * 2);
  }

  .quick-view h2 {
    font-size: calc(var(--scale) * 2.05);
    line-height: 1.15;
  }

  .quick-view p {
    margin-block: calc(var(--scale) * 0.85);
    font-size: calc(var(--scale) * 0.98);
    line-height: 1.6;
  }

  .quick-view .eyebrow {
    font-size: calc(var(--scale) * 0.7);
    margin: 0 0 calc(var(--scale) * 0.6);
  }

  .quick-view .quick-fit {
    margin-top: calc(var(--scale) * 0.3);
    font-size: calc(var(--scale) * 0.95);
  }

  .quick-enquire {
    min-height: calc(var(--scale) * 3.2);
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  figure:hover img {
    transform: none;
  }
}

/* Shared shade palette. */
.tone-0 {
  background: #e8bdbc;
}

.tone-1 {
  background: #ddb594;
}

.tone-2 {
  background: #2b2220;
}

.tone-3 {
  background: #e1c29f;
}

.tone-4 {
  background: #c99a70;
}

.tone-5 {
  background: #6e4630;
}

.tone-6 {
  background: #e0dcd8;
}

.tone-7 {
  background: #e6d4b6;
}

.tone-8 {
  background: #7a1f12;
}

.tone-9 {
  background: #f3e0d0;
}

.tone-10 {
  background: #ebcdb6;
}

.tone-11 {
  background: #b27f57;
}

.tone-12 {
  background: #94623f;
}

.tone-13 {
  background: #4a2d20;
}

/* Long contact links must wrap inside narrow grid columns. */
.foot-grid > * {
  min-width: 0;
}

.foot a,
.clist a {
  overflow-wrap: anywhere;
}

.fit .eyebrow {
  color: var(--gold-soft);
}

.quick-view .quick-close {
  font-size: calc(var(--scale) * 2);
  line-height: 1;
  padding: 0;
}

html:has(.quick-view[open]) {
  overflow: hidden;
}

/* Swiper core layout is kept here so the project still has one stylesheet. */
.quotes.is-slider {
  display: block;
  position: relative;
  overflow: hidden;
  min-width: 0;
  touch-action: pan-y;
  cursor: grab;
}

.quotes.is-slider:active {
  cursor: grabbing;
}

.quotes .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  box-sizing: content-box;
  transition-property: transform;
  transition-timing-function: ease;
  will-change: transform;
}

.quotes .swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  min-width: 0;
  transition-property: transform;
  padding-right: calc(var(--scale) * 1);
}

.quotes .swiper-slide p {
  line-height: 1.5;
}

.swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1;
}

.review-controls {
  display: flex;
  align-items: center;
  gap: calc(var(--scale) * 1.5);
  margin-top: calc(var(--scale) * 2.5);
  padding-top: calc(var(--scale) * 1.5);
  border-top: calc(var(--scale) * 0.07) solid var(--line);
  font-size: calc(var(--scale) * 1);
  color: var(--muted);
}

.review-arrows {
  display: flex;
  gap: calc(var(--scale) * 0.7);
}

.review-arrows button {
  display: grid;
  place-items: center;
  width: calc(var(--scale) * 3.2);
  height: calc(var(--scale) * 3.2);
  border: calc(var(--scale) * 0.07) solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--link);
  font-size: calc(var(--scale) * 1.5);
  padding: 0;
}

.review-arrows button:hover {
  background: var(--surface);
}

.review-arrows button {
  line-height: 1;
}

.review-arrows svg {
  display: block;
  width: calc(var(--scale) * 1.4);
  height: calc(var(--scale) * 1.4);
  flex-shrink: 0;
}

/* Text fields keep their form colors during focus and browser autofill. */
.field {
  --input-surface: color-mix(in srgb, var(--deep-bg) 96%, white);
  --input-text: var(--deep-fg);
  --input-focus: var(--deep-fg);
}
.cf {
  --input-surface: var(--bg);
  --input-text: var(--fg);
  --input-focus: var(--link);
}
#newsletter {
  --input-surface: var(--surface);
  --input-text: var(--fg);
  --input-focus: var(--link);
}
:is(.field, .cf, #newsletter)
  :is(input, select, textarea):is(:focus, :focus-visible) {
  outline: none;
  border-bottom-color: var(--input-focus);
}
:is(.field, .cf, #newsletter) input:autofill {
  background-color: var(--input-surface) !important;
  color: var(--input-text) !important;
  box-shadow: 0 0 0 100vw var(--input-surface) inset !important;
  caret-color: var(--input-text);
}
:is(.field, .cf, #newsletter) input:-webkit-autofill {
  -webkit-text-fill-color: var(--input-text) !important;
  -webkit-box-shadow: 0 0 0 100vw var(--input-surface) inset !important;
  caret-color: var(--input-text);
}