/* KORDIA — stylesheet for the 2026 site.
   Values are lifted from the V3 design comp, which expressed everything as inline
   styles. Moving them into classes is what makes the responsive rules, the
   Chinese typography overrides and the hover states expressible at all. */

/* ---------------------------------------------------------------------------
   Webfonts, self-hosted.
   Not loaded from Google/Fontshare CDNs: fonts.googleapis.com is unreachable
   from mainland China and this site ships a full Chinese version, so a blocked
   stylesheet would drop all Latin text to a fallback face. Re-download with
   scripts/fetch-fonts.sh.

   Urbanist is the variable file (wght 100..900) — one request covers body 400,
   medium 500 and every 600/700 heading. Split latin / latin-ext exactly as
   Google subsets it, so the ext file only downloads when a page needs it.
   Stardom ships a single 400 cut and NO italic; see the .hero h1 em rules.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: Urbanist; src: url("fonts/urbanist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Urbanist; src: url("fonts/urbanist-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Stardom; src: url("fonts/stardom-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --cream: #FAF6EA;
  --paper: #FFFFFF;
  --sand: #EFE7D3;
  --sand-2: #F4EEE0;
  --sand-3: #EAE2CE;
  --line: #DCD5C2;
  --navy: #12224F;
  --navy-2: #182A5C;
  --ink: #16224C;
  --body: #394054;
  --muted: #6B7183;
  --red: #C8102E;
  --red-dark: #A00C24;
  --gold: #F2B705;
  --light: #EDF0F8;
  /* Stardom is hero-scale only — one weight, no italic, hairline serifs. */
  --display: Stardom, Georgia, "Times New Roman", serif;
  --sans: Urbanist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Menlo, Consolas, monospace;
  --shell: 1440px;
  --pad: 32px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--cream);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is load-bearing. The width/height attributes on every <img> become
   presentational hints, and a fixed height beats `aspect-ratio` — so without
   this, .ar-16-9 and friends are silently ignored and the image renders at its
   attribute height. Rules that genuinely need height:100% set it by class and
   still win over this type selector. */
img { display: block; max-width: 100%; height: auto; }
a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(200, 16, 46, .18); }
*:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--pad); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 200; padding: 10px 16px;
  background: var(--navy); color: var(--light); transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 400; color: var(--ink); }
/* Urbanist is a geometric sans: it needs 600 and slightly tight tracking to hold
   presence at heading size, where Fraunces carried it through the serif itself. */
h1, h2, h3 { font-family: var(--sans); font-weight: 600; letter-spacing: -.015em;
             color: var(--ink); margin: 0; }
.kicker {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 500; color: var(--red);
}
.eyebrow {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 500; color: var(--muted);
}
.rule-sm { width: 40px; height: 1px; background: var(--red); margin-bottom: 16px; }
.lede { margin: 0; color: var(--body); max-width: 64ch; text-wrap: pretty; }
.slot-caption {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.h-page { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -.015em; text-wrap: pretty; }
.h-sec { font-size: clamp(1.75rem, 2.5vw, 2.5rem); line-height: 1.15; text-wrap: pretty; }
.h-sub { font-size: 2rem; line-height: 1.15; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 4px; padding: 16px 30px; min-height: 44px; cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  border: 0; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-outline { background: none; border: 1px solid var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--cream); }
.btn-ghost-light { background: transparent; border: 1px solid rgba(237, 240, 248, .55); color: var(--light); }
.btn-ghost-light:hover { background: var(--light); color: var(--ink); }
/* WhatsApp's darker brand green rather than the neon #25D366, which glares
   against the navy hero. The outlined catalog button sits between this and the
   red primary so the two saturated fills never touch. */
.btn-whatsapp { background: #1FA855; color: #fff; }
.btn-whatsapp:hover { background: #17843F; color: #fff; }
.btn-whatsapp .wa-glyph { width: 16px; height: 16px; fill: currentColor; flex: none; }
.btn-sm { padding: 12px 20px; font-size: 11px; }
.link-underline {
  background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 0 0 4px;
  cursor: pointer; font-size: 15px; color: var(--ink); min-height: 44px;
}
.link-underline:hover { color: var(--red); border-color: var(--red); }
.text-link { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: var(--muted); font-size: 14px; }
.text-link:hover { color: var(--red); }

/* ---------- intro ---------- */
#intro {
  position: fixed; inset: 0; z-index: 300; background: var(--navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity .8s ease, visibility .8s;
}
#intro.done { opacity: 0; visibility: hidden; }
.ki-word {
  font-family: var(--sans); font-weight: 600; font-size: clamp(34px, 6vw, 58px);
  letter-spacing: .32em; text-transform: uppercase; color: var(--light);
  opacity: 0; animation: kiIn 1.2s .2s forwards; padding-left: .32em;
}
.ki-rule {
  width: 0; height: 1px; margin-top: 22px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  animation: kiRule 1.6s .5s forwards;
}
.ki-sub {
  font-size: 10px; letter-spacing: .45em; text-transform: uppercase;
  color: var(--muted); margin-top: 18px; opacity: 0; animation: kiIn 1s 1s forwards;
}
@keyframes kiIn { to { opacity: 1 } }
@keyframes kiRule { to { width: min(280px, 60vw) } }

/* ---------- cursor ---------- */
#cursor, #cursor-ring { position: fixed; left: -100px; top: -100px; pointer-events: none; border-radius: 50%; }
#cursor { width: 10px; height: 10px; background: var(--red); z-index: 999; transform: translate(-50%, -50%); transition: width .25s, height .25s, opacity .25s; }
#cursor-ring { width: 40px; height: 40px; border: 1px solid rgba(200, 16, 46, .5); z-index: 998; transform: translate(-50%, -50%); transition: width .3s, height .3s; }
#cursor-ring.grow { width: 64px; height: 64px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--cream); border-bottom: 1px solid var(--line); }
.header-inner {
  max-width: var(--shell); margin: 0 auto; padding: 14px var(--pad); min-height: 76px;
  display: flex; align-items: center; gap: 14px 28px;
}
.brand { background: none; border: 0; padding: 0; cursor: pointer; flex: none; display: flex; align-items: center; height: 44px; }
.brand img { height: 38px; width: auto; }
.main-nav { display: flex; gap: 24px; align-items: center; flex: 1 1 auto; min-width: 0; }
.main-nav button {
  background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; color: var(--body);
  display: flex; align-items: center; gap: 6px;
}
.main-nav button:hover, .main-nav button.is-active { color: var(--red); }
.main-nav .nav-collections { font-weight: 500; color: var(--ink); }
.caret { font-size: 10px; color: var(--muted); transition: transform .25s ease; }
.nav-collections[aria-expanded="true"] .caret { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 14px; flex: none; white-space: nowrap; }
.lang-toggle { display: flex; gap: 8px; font-size: 12px; letter-spacing: .08em; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 8px 4px; min-height: 44px; align-items: center; }
.lang-toggle .is-active { color: var(--ink); font-weight: 600; }
.lang-toggle .sep { color: var(--line); }
.selection-btn {
  background: none; border: 1px solid var(--line); border-radius: 4px; height: 44px; padding: 0 14px;
  cursor: pointer; font-size: 13px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex: none;
}
.selection-btn:hover { border-color: var(--ink); }
.sel-count {
  min-width: 22px; height: 22px; border-radius: 11px; background: var(--red); color: #fff;
  font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: 0 6px;
}
.menu-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: 4px; width: 44px; height: 44px; cursor: pointer; flex-direction: column; gap: 4px; align-items: center; justify-content: center; }
.menu-toggle span { display: block; width: 18px; height: 1px; background: var(--ink); }

/* mega menu */
.mega { border-top: 1px solid var(--line); background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.mega-inner {
  max-width: var(--shell); margin: 0 auto; padding: 44px var(--pad) 52px;
  display: grid; grid-template-columns: repeat(3, 1fr) 1fr; gap: 40px;
}
.mega-col > button {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--sans); font-weight: 600; font-size: 17px; color: var(--ink); margin-bottom: 4px;
}
.mega-col > button:hover { color: var(--red); }
.mega-count { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); font-weight: 500; margin-bottom: 14px; }
.mega-subs { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.mega-feature { grid-column: 4; grid-row: 1 / span 2; }
.mega-feature img { aspect-ratio: 3/4; object-fit: cover; width: 100%; background: var(--sand); }
.mega-feature p { margin: 12px 0 0; font-size: 13px; color: var(--muted); }

.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--paper); padding: 12px var(--pad) 20px; }
.mobile-nav button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 0; cursor: pointer; font-size: 16px; color: var(--ink); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: calc(100vh - 96px); display: flex; background: var(--sand-3); overflow: hidden; }
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 8s ease;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-shade-a { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,34,79,.82) 0%, rgba(18,34,79,.7) 45%, rgba(18,34,79,.38) 72%, rgba(18,34,79,0) 92%); }
.hero-shade-b { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,34,79,.35) 0%, rgba(18,34,79,0) 30%); }
.hero-inner {
  position: relative; max-width: var(--shell); margin: 0 auto; padding: 140px var(--pad) 96px;
  width: 100%; display: flex; flex-direction: column; justify-content: center;
}
/* Stardom. Weight 300 does not exist (single 400 cut), and negative tracking closes
   a didone's hairlines until the word smears — so tracking goes to 0 and the line
   opens up to clear the taller ascenders. */
.hero h1 {
  font-family: var(--display);
  font-weight: 400; font-size: clamp(56px, 10.3vw, 138px); line-height: .98; letter-spacing: 0;
  color: #fff; margin: 0 0 32px; max-width: 16ch; text-wrap: pretty;
}
/* Stardom has no italic; a synthesised oblique shears the hairlines. The line break
   and the gold already carry the emphasis — same call as the Chinese block. */
.hero h1 em { display: block; font-style: normal; color: var(--gold); }
.hero-lede { font-size: 18px; line-height: 1.6; color: rgba(237,240,248,.86); margin: 0 0 52px; max-width: min(52ch, 46vw); text-wrap: pretty; }
.hero-stats { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; margin-bottom: 44px; }
.hero-stat { display: flex; flex-direction: column; gap: 6px; }
.hero-stat b { font-family: var(--sans); font-size: 2rem; color: rgba(237,240,248,.9); line-height: 1; font-weight: 600; }
.hero-stat span { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: rgba(237,240,248,.7); }
.hero-div { width: 1px; height: 48px; background: rgba(237,240,248,.25); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-pager { position: absolute; right: var(--pad); bottom: 28px; display: flex; gap: 8px; z-index: 2; }
.hero-pager button {
  width: 40px; height: 40px; background: none; border: 0; border-bottom: 1px solid rgba(237,240,248,.35);
  color: rgba(237,240,248,.6); cursor: pointer; font-size: 10px; letter-spacing: .08em;
}
.hero-pager button.is-active { color: #fff; border-color: #fff; }

/* ---------- sections ---------- */
.section { padding: 140px 0; }
.section-cream { background: var(--cream); }
.section-white { background: var(--paper); }
.section-navy { background: var(--navy); }
.section-sand { background: var(--sand); }
.section-head { max-width: 760px; margin-bottom: 72px; }
.section-head h2 { margin: 0 0 22px; }
.section-head .eyebrow { margin-bottom: 22px; display: block; }

/* collection cards on home */
.home-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 24px; }
.coll-card { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.coll-card .frame { overflow: hidden; background: var(--sand); }
.coll-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(.2,.7,.3,1); }
.coll-card:hover .frame img { transform: scale(1.04); }
.coll-card h3 { font-size: 1.5rem; margin: 20px 0 8px; }
.coll-card p { margin: 0 0 10px; font-size: 15px; color: var(--muted); max-width: 52ch; }
.coll-card .count { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.span-8 { grid-column: span 8; } .span-4 { grid-column: span 4; } .span-12 { grid-column: span 12; }
.ar-16-9 { aspect-ratio: 16/9; } .ar-3-4 { aspect-ratio: 3/4; } .ar-21-9 { aspect-ratio: 21/9; }
.ar-4-3 { aspect-ratio: 4/3; } .ar-1-1 { aspect-ratio: 1/1; }
.coll-card-wide-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; }

/* why kordia */
.split-5-7 { display: grid; grid-template-columns: 5fr 7fr; gap: 80px; }
.split-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; }
.sticky-col { position: sticky; top: 120px; }
.point { display: grid; grid-template-columns: auto 1fr; gap: 0 32px; padding: 40px 0; border-bottom: 1px solid var(--line); }
.point:first-child { padding-top: 0; }
.point:last-child { border-bottom: 0; padding-bottom: 0; }
.point b { font-family: var(--sans); font-size: 3rem; color: var(--line); line-height: 1; font-weight: 600; }
.point h3 { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; margin: 0 0 12px; }
.point p { margin: 0; max-width: 60ch; }
.verify { color: var(--red); }

.thirds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.material-tile img { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--sand); }
.material-tile .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); font-weight: 500; margin-top: 16px; }

/* catalog band */
.band-split { display: grid; grid-template-columns: 1fr 1fr; }
.band-split img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.band-copy { padding: 110px 80px; display: flex; flex-direction: column; justify-content: center; }
.band-copy h2 { color: var(--light); margin: 0 0 22px; }
.band-copy p { margin: 0 0 36px; color: rgba(237,240,248,.78); max-width: 46ch; text-wrap: pretty; }
.band-cta { border-top: 1px solid rgba(237,240,248,.15); padding: 140px var(--pad); text-align: center; }
.band-cta h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0;
               font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.12; color: var(--light); margin: 0 0 22px; }
.band-cta h2 em { display: block; font-style: normal; color: var(--gold); }
.band-cta p { margin: 0 auto 44px; color: rgba(237,240,248,.72); max-width: 56ch; text-wrap: pretty; }
.band-cta .row { display: flex; gap: 24px; justify-content: center; align-items: center; flex-wrap: wrap; }
.band-cta a.wa { border-bottom: 1px solid rgba(237,240,248,.6); color: var(--light); padding-bottom: 4px; font-size: 15px; }

/* ---------- collections index ---------- */
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 40px; }
.crumb button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); font-size: 13px; }
.crumb button:hover { color: var(--red); }
.crumb .here { color: var(--ink); }
.coll-row { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; padding: 48px 0; border-top: 1px solid var(--line); align-items: center; }
.coll-row img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--sand); }
.coll-row h2 { font-size: 2rem; margin: 0 0 14px; }
.coll-row p { margin: 0 0 24px; color: var(--body); max-width: 56ch; }
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  background: none; border: 1px solid var(--line); border-radius: 4px; padding: 10px 16px;
  cursor: pointer; font-size: 13px; color: var(--body); min-height: 44px;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* ---------- browse ---------- */
.browse-head { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: end; margin-bottom: 56px; }
.browse-count { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.browse-count b { font-family: var(--sans); font-size: 2.5rem; color: var(--ink); line-height: 1; font-weight: 600; }
.browse-count span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.chip-bar { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.browse-body { display: grid; grid-template-columns: 240px 1fr; gap: 56px; }
.facet { padding: 18px 0; border-top: 1px solid var(--line); }
.facet-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 14px; }
.facet-list { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.facet-list button { background: none; border: 0; padding: 4px 0; cursor: pointer; font-size: 14px; color: var(--body); text-align: left; }
.facet-list button:hover { color: var(--red); }
.facet-list button.is-active { color: var(--ink); font-weight: 600; }
.field-line { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 12px 0; font-size: 16px; color: var(--ink); min-height: 44px; }
.field-line:focus { border-color: var(--ink); outline: none; }
.browse-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.browse-toolbar .count { font-size: 14px; color: var(--muted); }
.sort-wrap { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.sort-wrap select { border: 0; border-bottom: 1px solid var(--line); background: none; padding: 8px 4px; font-size: 14px; color: var(--ink); min-height: 44px; cursor: pointer; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 24px; }
.p-card { display: flex; flex-direction: column; height: 100%; }
.p-card > button {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left; width: 100%; display: block;
}
.p-card .frame { aspect-ratio: 4/3; overflow: hidden; background: var(--sand); }
.p-card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.2,.7,.3,1); }
.p-card > button:hover .frame img { transform: scale(1.03); }
.p-card .name { font-size: 16px; font-weight: 500; color: var(--ink); margin-top: 16px; }
.p-card .meta { font-size: 14px; color: var(--muted); margin-top: 4px; }
.p-card .foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 12px; }
.p-card .foot > span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.add-btn {
  background: none; border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px;
  cursor: pointer; font-size: 12px; min-height: 36px; color: var(--muted);
}
.add-btn:hover { border-color: var(--red); color: var(--red); }
.add-btn.is-selected { border-color: var(--red); color: var(--red); }
.empty { padding: 80px 0; text-align: center; color: var(--muted); }
.load-more-row { display: flex; justify-content: center; margin-top: 72px; }

/* ---------- product detail ---------- */
.pd-main { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; background: var(--sand); margin-bottom: 16px; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pd-thumbs button { background: none; border: 0; padding: 0; cursor: pointer; }
.pd-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sand); }
.pd-thumbs button.is-active img { outline: 2px solid var(--ink); outline-offset: 2px; }
.pd-model { font-size: 15px; color: var(--muted); margin-bottom: 32px; }
.glance { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); margin-bottom: 36px; }
.glance > div { background: var(--cream); padding: 16px 18px; }
.glance dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.glance dd { margin: 0; font-size: 15px; color: var(--ink); }
.swatch-group { margin-bottom: 28px; }
.swatch-group .facet-label { color: var(--ink); font-weight: 600; }
.swatches { display: flex; gap: 12px; flex-wrap: wrap; }
.swatch { width: 44px; height: 44px; border-radius: 4px; cursor: pointer; border: 1px solid var(--line); }
.swatch.is-active { outline: 2px solid var(--ink); outline-offset: 2px; }
.swatch-note { font-size: 14px; color: var(--muted); margin-top: 12px; }
.moq { padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 28px; font-size: 15px; color: var(--ink); }
.pd-actions { display: flex; flex-direction: column; gap: 14px; }
.pd-actions .row { display: flex; gap: 14px; flex-wrap: wrap; }
.pd-actions .row > * { flex: 1; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th { text-align: left; font-weight: 400; color: var(--muted); padding: 14px 0; border-bottom: 1px solid var(--line); width: 44%; }
.spec-table td { text-align: right; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line); }
.oem-note { margin-top: 36px; padding: 24px; background: var(--sand); }
.oem-note p { margin: 0; font-size: 15px; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* ---------- inquiry wizard ---------- */
.wizard { max-width: 1000px; margin: 0 auto; padding: 0 var(--pad); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
.steps button { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.steps .bar { height: 3px; background: var(--line); }
.steps button.is-done .bar, .steps button.is-current .bar { background: var(--red); }
.steps .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin-top: 12px; color: var(--muted); }
.steps button.is-current .label { color: var(--ink); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; margin-bottom: 48px; }
.fields label, .field-block { display: block; }
.fields label > span, .field-block > span {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 10px;
}
.wizard textarea { resize: vertical; }
.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); }
.wizard-nav .right { display: flex; align-items: center; gap: 24px; }
.attached { background: var(--paper); border: 1px solid var(--line); padding: 24px; margin-bottom: 40px; }
.field-error { display: block; font-size: 13px; color: var(--red-dark); margin-top: 8px; }
.invalid { border-color: var(--red) !important; }

/* ---------- factory / materials / contact ---------- */
/* auto-fit, not repeat(3): tiles whose figure is still unconfirmed are filtered
   out, and a fixed three-column track left an empty cell behind them. */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1px; background: var(--line); border: 1px solid var(--line); }
.cap-grid > div { background: var(--cream); padding: 32px; }
.cap-grid b { font-family: var(--sans); font-size: 2rem; color: var(--ink); line-height: 1; font-weight: 600; display: block; margin-bottom: 14px; }
.cap-grid span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.mat-row { display: grid; grid-template-columns: 4fr 8fr; gap: 56px; padding: 48px 0; border-top: 1px solid var(--line); }
.mat-row img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--sand); }
.mat-row h2 { font-size: 1.75rem; margin: 0 0 16px; }
.finish-strip { display: flex; gap: 28px; flex-wrap: wrap; }
.finish-strip > div { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.finish-strip .sw { width: 72px; height: 72px; border-radius: 4px; border: 1px solid var(--line); }
.finish-strip span { font-size: 12px; color: var(--muted); }
.slot {
  background: repeating-linear-gradient(135deg, var(--sand) 0 10px, var(--sand-2) 10px 20px);
  display: flex; align-items: flex-end; padding: 18px;
}
.slot-dark { background: repeating-linear-gradient(135deg, var(--navy-2) 0 12px, #1D3168 12px 24px); }
.slot-dark .slot-caption { color: rgba(237,240,248,.5); }

/* ---------- projects ---------- */
.split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; max-width: none; }
.split-head > div { max-width: 760px; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.photo-pair figure { margin: 0; }
.photo-pair img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--sand); }
.photo-pair figcaption { margin-top: 14px; }
@media (max-width: 860px) { .photo-pair { grid-template-columns: 1fr; gap: 32px; } }
.photo-band img { width: 100%; aspect-ratio: 4/3; max-height: 620px; object-fit: cover; background: var(--sand); }
.photo-band { margin: 0; }
.photo-band figcaption { margin-top: 14px; }
.project-feature { margin: 0 0 24px; }
.project-feature button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.project-feature img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--sand); transition: transform 600ms cubic-bezier(.2,.7,.3,1); }
.project-feature button:hover img { transform: scale(1.025); }
.project-feature figcaption { margin-top: 14px; }
.project-card { display: flex; flex-direction: column; }
.project-card button { padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; display: block; }
.project-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--sand); transition: transform 500ms cubic-bezier(.2,.7,.3,1); }
.project-card button:hover img { transform: scale(1.04); }
.project-card .cap { margin-top: 14px; font-size: 15px; color: var(--ink); font-weight: 500; }
.project-card .sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.project-cta { margin-top: 88px; padding: 56px 32px; background: var(--sand); text-align: center; }
.project-cta h2 { margin: 0 0 14px; }
.project-cta p { margin: 0 auto 28px; max-width: 52ch; text-wrap: pretty; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 40px; }
.lightbox-scrim { position: absolute; inset: 0; background: rgba(18,34,79,.88); border: 0; cursor: zoom-out; backdrop-filter: blur(6px); }
.lightbox-fig { position: relative; margin: 0; max-width: min(1240px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; }
.lightbox-fig img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; object-fit: contain; }
.lightbox-fig figcaption { color: rgba(237,240,248,.75); text-align: center; }
.lightbox-close {
  position: absolute; right: 20px; top: 20px; z-index: 2; width: 48px; height: 48px;
  border-radius: 24px; border: 0; background: rgba(250,246,234,.92); color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: #fff; }

/* ---------- map ---------- */
.map-embed { width: 100%; aspect-ratio: 16/9; border: 0; display: block; background: var(--sand); }
.map-note { margin: 12px 0 0; font-size: 13px; }
@media (max-width: 620px) { .map-embed { aspect-ratio: 4/3; } }

/* ---------- footer ---------- */
.site-footer { background: var(--navy); padding: 96px 0 0; }
.footer-brand { font-family: var(--sans); font-weight: 700; font-size: 2rem; letter-spacing: .02em; color: var(--light); margin-bottom: 56px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding-bottom: 72px; }
.footer-cols .head { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,240,248,.45); font-weight: 500; margin-bottom: 20px; }
.footer-links { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-links button, .footer-links a { background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-size: 15px; color: rgba(237,240,248,.8); }
.footer-links button:hover, .footer-links a:hover { color: var(--light); }
.footer-contact { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: rgba(237,240,248,.8); }
.footer-bottom {
  border-top: 1px solid rgba(237,240,248,.15); padding: 28px 0 40px; display: flex;
  justify-content: space-between; gap: 24px; flex-wrap: wrap; font-size: 13px; color: rgba(237,240,248,.5);
}
.footer-bottom .row { display: flex; gap: 24px; align-items: center; }
.footer-bottom button { background: none; border: 0; padding: 0; cursor: pointer; color: rgba(237,240,248,.5); font-size: 13px; }
.footer-bottom button:hover { color: var(--light); }

/* ---------- drawer ---------- */
.drawer-layer { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: flex-end; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(18,34,79,.4); border: 0; cursor: pointer; }
.drawer {
  position: relative; width: 440px; max-width: 100%; background: var(--cream); height: 100%;
  display: flex; flex-direction: column; box-shadow: -8px 0 40px rgba(18,34,79,.18); border-radius: 8px 0 0 8px;
}
.drawer-head { padding: 28px 28px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.drawer-head .n { font-family: var(--sans); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin-top: 6px; }
.drawer-close { background: none; border: 0; cursor: pointer; font-size: 22px; color: var(--muted); width: 44px; height: 44px; }
.drawer-body { flex: 1; overflow: auto; padding: 8px 28px; }
.drawer-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.drawer-item img { width: 84px; height: 63px; object-fit: cover; background: var(--sand); flex: none; }
.drawer-item .name { font-size: 15px; font-weight: 500; color: var(--ink); }
.drawer-item .ref { font-size: 13px; color: var(--muted); margin-top: 4px; }
.drawer-item .row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.drawer-item input { width: 64px; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 6px 0; font-size: 14px; color: var(--ink); }
.drawer-remove { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; color: var(--red-dark); margin-left: auto; }
.drawer-foot { padding: 24px 28px 28px; border-top: 1px solid var(--line); }
.drawer-foot .btn { width: 100%; }
.drawer-foot p { margin: 14px 0 0; font-size: 13px; color: var(--muted); text-align: center; }

/* ---------- chat ---------- */
.chat-fab {
  position: fixed; right: 28px; bottom: 28px; z-index: 70; height: 56px; min-width: 56px;
  border-radius: 28px; background: var(--red); color: #fff; display: flex; align-items: center;
  justify-content: center; gap: 8px; padding: 0 20px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 24px rgba(18,34,79,.22);
  transition: background .2s ease, transform .2s ease;
}
.chat-fab:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .05s } .d2 { transition-delay: .12s } .d3 { transition-delay: .19s } .d4 { transition-delay: .26s }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .mega-inner { grid-template-columns: repeat(2, 1fr); }
  .mega-feature { grid-column: auto; grid-row: auto; display: none; }
  .split-5-7, .split-7-5 { grid-template-columns: 1fr; gap: 48px; }
  .sticky-col { position: static; }
  .browse-head { grid-template-columns: 1fr; gap: 24px; }
  .browse-count { text-align: left; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .band-copy { padding: 80px 40px; }
}
@media (max-width: 980px) {
  :root { --pad: 24px; }
  .main-nav { display: none; }
  .menu-toggle { display: flex; }
  .mobile-nav.is-open { display: block; }
  .header-inner { min-height: 68px; }
  .section { padding: 96px 0; }
  .hero { min-height: calc(100svh - 68px); }
  .hero-inner { padding: 110px var(--pad) 96px; }
  .hero-lede { max-width: 100%; }
  .browse-body { grid-template-columns: 1fr; gap: 32px; }
  .browse-body aside .sticky-col { position: static; }
  .coll-row, .mat-row { grid-template-columns: 1fr; gap: 28px; }
  .band-split { grid-template-columns: 1fr; }
  .band-split img { min-height: 320px; }
  .home-grid > * { grid-column: span 6 !important; }
  .thirds, .cap-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .fields, .glance { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
/* Three hero actions need ~712px plus gutters. Below that they wrap and leave
   the WhatsApp button orphaned on a row of its own, so stack them deliberately
   instead of letting flex-wrap decide. */
@media (max-width: 840px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 620px) {
  :root { --pad: 18px; }
  body { font-size: 16px; }
  .section { padding: 72px 0; }
  .section-head { margin-bottom: 48px; }
  .hero h1 { font-size: clamp(40px, 13vw, 64px); }
  .hero-lede { font-size: 16px; margin-bottom: 36px; }
  .hero-stats { gap: 20px; margin-bottom: 32px; }
  .hero-div { display: none; }
  .hero-pager { display: none; }
  .home-grid > * { grid-column: span 12 !important; }
  .product-grid, .related-grid, .thirds, .cap-grid, .footer-cols, .pd-thumbs { grid-template-columns: repeat(2, 1fr); }
  .product-grid { gap: 28px 16px; }
  .band-copy { padding: 64px var(--pad); }
  .band-cta { padding: 80px var(--pad); }
  .wizard-nav { flex-direction: column; align-items: stretch; gap: 16px; }
  .wizard-nav .right { justify-content: space-between; }
  .chat-fab { right: 16px; bottom: 16px; padding: 0 16px; }
  .drawer { border-radius: 0; }
  .ar-21-9 { aspect-ratio: 16/9; }

  /* The header carried four controls behind white-space:nowrap, so it could not
     shrink below 398px and forced ~190px of horizontal scroll on every phone.
     Get-a-Quote already appears in the mobile menu, in the hero and as the chat
     FAB, so the header keeps only brand / language / selection / menu. */
  .header-actions { gap: 8px; }
  .header-actions .btn-primary { display: none; }
  .selection-btn span { display: none; }
  .selection-btn { padding: 0 10px; }
  .header-inner { gap: 8px; }

  /* Hero content ran 791px against a 780px viewport — nothing below the
     headline was reachable without scrolling past a full screen of padding. */
  .hero-inner { padding: 72px var(--pad) 56px; }

  /* iOS zooms the whole page when a focused control is under 16px. */
  /* Class-scoped rules (.sort-wrap select, .drawer-item input) outrank a bare
     element selector, so they are named explicitly. */
  input, select, textarea, .field-line,
  .sort-wrap select, .drawer-item input { font-size: 16px; }

  /* Give the lightbox the screen; 40px of desktop padding left a 295px image. */
  .lightbox { padding: 12px; }
  .lightbox-close { right: 10px; top: 10px; }
  .lightbox-fig img { max-height: calc(100vh - 96px); }
}

/* Landscape phones. The hero is sized for a tall screen, so on a 375px-high
   viewport it ran 2.1x the screen — two-plus swipes of hero before any content.
   Keyed to height rather than width, because an 812px-wide landscape phone
   otherwise looks like a small desktop to the width queries. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero-inner { padding: 56px var(--pad) 40px; }
  .hero h1 { font-size: clamp(32px, 5.4vw, 58px); margin-bottom: 20px; }
  .hero-lede { font-size: 15px; margin-bottom: 24px; }
  .hero-stats { margin-bottom: 24px; gap: 24px; }
  /* Vertical space is the scarce axis here, so the actions go back to a row. */
  .hero-actions { flex-direction: row; flex-wrap: wrap; }
  .hero-actions .btn { width: auto; }
  .sig-hero { min-height: 0; padding: 56px 0 40px; }
  .section { padding: 56px 0; }
}

/* Touch targets. Keyed to the pointer, not the width — a small tablet is still
   a finger. 44px is the WCAG 2.5.5 / Apple HIG minimum; inline links inside
   running text are exempt and deliberately not touched here. */
@media (pointer: coarse) {
  .facet-list button { min-height: 44px; }
  .steps button { min-height: 44px; }
  .chip { min-height: 44px; }
  .text-link { min-height: 44px; display: inline-flex; align-items: center; }
  .drawer-remove { min-height: 44px; padding: 0 4px; }
  .hero-pager button { min-height: 44px; }
  .add-btn { min-height: 44px; }
  /* Breadcrumbs are exempt from the 44px rule as inline text, but the hit area
     is free to grow: the negative margin absorbs the padding so the trail sits
     exactly where it did. */
  .crumb button { padding: 11px 2px; margin: -11px 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  #cursor, #cursor-ring { display: none; }
}
@media (hover: none), (pointer: coarse) {
  #cursor, #cursor-ring { display: none; }
}

/* ---------------------------------------------------------------------------
   Chinese typography
   The Latin type here is set tight on purpose — Urbanist takes -.015em and
   Stardom sits at display size. Han glyphs are full-width squares with no side
   bearings, so the same values collide. Neither webfont has Han coverage, and
   the Georgia fallback resolves to SimSun on Windows, which looks dated at
   display sizes; the platform UI faces are the better fallback.
   --------------------------------------------------------------------------- */
html[lang^="zh"] {
  /* Latin face first, CJK behind it: Han falls through to PingFang/YaHei while
     KORDIA, WhatsApp, model codes and figures stay in the brand face. */
  --display: Stardom, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --sans: Urbanist, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] .display { letter-spacing: .01em; }
html[lang^="zh"] .hero h1 { font-size: clamp(38px, 7vw, 88px); line-height: 1.2; letter-spacing: .01em; }
html[lang^="zh"] .hero h1 em { font-style: normal; }
html[lang^="zh"] .band-cta h2 em { font-style: normal; }
html[lang^="zh"] .sig-hero-inner h1 em { font-style: normal; }
html[lang^="zh"] .h-page { font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.3; }
html[lang^="zh"] .h-sec { font-size: clamp(1.5rem, 2.1vw, 2.1rem); line-height: 1.35; }
html[lang^="zh"] .h-sub, html[lang^="zh"] .coll-row h2 { line-height: 1.35; }
html[lang^="zh"] .coll-card h3 { line-height: 1.45; }
html[lang^="zh"] .p-card .name { line-height: 1.5; }
html[lang^="zh"] .point h3 { line-height: 1.5; }
/* Micro-labels keep their case so mixed Latin still reads as a label, but
   .14em-.16em tracking on Han opens gaps wide enough to read as word breaks. */
html[lang^="zh"] .kicker,
html[lang^="zh"] .eyebrow,
html[lang^="zh"] .btn,
html[lang^="zh"] .chip,
html[lang^="zh"] .mega-count,
html[lang^="zh"] .facet-label,
html[lang^="zh"] .hero-stat span,
html[lang^="zh"] .coll-card .count,
html[lang^="zh"] .p-card .foot > span,
html[lang^="zh"] .browse-count span,
html[lang^="zh"] .cap-grid span,
html[lang^="zh"] .glance dt,
html[lang^="zh"] .steps .label,
html[lang^="zh"] .fields label > span,
html[lang^="zh"] .field-block > span,
html[lang^="zh"] .material-tile .label,
html[lang^="zh"] .footer-cols .head,
html[lang^="zh"] .chat-fab { letter-spacing: .04em; }
html[lang^="zh"] .ki-word { letter-spacing: .3em; }
html[lang^="zh"] .lede,
html[lang^="zh"] .hero-lede,
html[lang^="zh"] .point p,
html[lang^="zh"] .coll-row p { line-break: strict; text-wrap: pretty; }

/* ── Product dimensions ───────────────────────────────────────────────────
   Per-piece measurements from the factory quote book. A set is several
   pieces (armchair + 3-seat + coffee table), so this is a labelled list,
   not a single figure. Values are tabular so the numbers align down the
   column when a buyer scans them. */
.pd-dims { margin: 26px 0 4px; }
.dim-list { list-style: none; margin: 10px 0 0; padding: 0;
            border-top: 1px solid var(--line); }
.dim-list li { display: flex; justify-content: space-between; gap: 20px;
               padding: 9px 0; border-bottom: 1px solid var(--line);
               font-size: 14.5px; }
.dim-label { color: var(--muted); }
.dim-value { color: var(--ink); white-space: nowrap; }
.dim-pending { display: block; color: var(--muted); font-style: italic;
               padding: 9px 0; border-bottom: 1px solid var(--line); }

/* ═══════════════════════════════════════════════════════════════════════════
   V4 · Signature screen + Browse by Setting
   The second and third "doors" into the same catalogue — see IA-PROPOSAL.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Signature hero ─────────────────────────────────────────────────────── */
.sig-hero { position: relative; min-height: 78vh; display: flex; align-items: flex-end;
            overflow: hidden; background: var(--navy); }
.sig-hero-img { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover; }
.sig-hero-shade { position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,34,79,.88) 0%, rgba(18,34,79,.35) 46%, rgba(18,34,79,.15) 100%); }
.sig-hero-inner { position: relative; width: 100%; max-width: var(--shell);
                  margin: 0 auto; padding: 0 var(--pad) 88px; }
.sig-hero-inner h1 { font-family: var(--display); font-weight: 400; color: #fff;
  font-size: clamp(44px, 8.1vw, 108px); line-height: 1.02; letter-spacing: 0;
  margin: 20px 0 24px; }
.sig-hero-inner h1 em { display: block; font-style: normal; color: var(--gold); }
.sig-hero-inner .hero-lede { color: rgba(255,255,255,.82); max-width: 56ch; }
.rule-light { background: var(--gold) !important; }
.eyebrow-light { color: rgba(255,255,255,.75) !important; }

/* ── Signature grid ─────────────────────────────────────────────────────── */
.sig-grid { display: grid; grid-template-columns: repeat(2, 1fr);
            gap: 24px; margin-top: 64px; }
.sig-item { margin: 0; overflow: hidden; background: var(--sand-2); }
.sig-item-wide { grid-column: 1 / -1; }
.sig-item img { width: 100%; height: 100%; display: block; object-fit: cover;
                transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.sig-item:hover img { transform: scale(1.03); }
.sig-note { margin: 40px 0 0; font-size: 14px; color: var(--muted);
            max-width: 70ch; font-style: italic; }
.sig-actions { display: flex; gap: 28px; align-items: center;
               flex-wrap: wrap; margin-top: 40px; }

/* ── Setting tiles ──────────────────────────────────────────────────────── */
.set-grid { display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 24px; margin-top: 56px; }
.set-card { position: relative; display: block; padding: 0; border: 0;
            background: var(--sand-2); cursor: pointer; text-align: left;
            overflow: hidden; aspect-ratio: 4 / 3; }
.set-card img { position: absolute; inset: 0; width: 100%; height: 100%;
                object-fit: cover;
                transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.set-card:hover img { transform: scale(1.04); }
.set-card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18,34,79,.82) 0%, rgba(18,34,79,.15) 58%, transparent 100%); }
.set-card-body { position: absolute; left: 22px; right: 22px; bottom: 20px;
                 z-index: 2; display: block; }
.set-card-name { display: block; font-family: var(--sans); font-weight: 600; font-size: 22px;
                 color: #fff; margin-bottom: 4px; }
.set-card-count { display: block; font-size: 11px; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--gold); font-weight: 500; }

/* ── Projects placeholder ───────────────────────────────────────────────── */
.proj-placeholder { margin-top: 40px; padding: 72px 32px; text-align: center;
  border: 1px dashed var(--line); background: var(--sand-2);
  font-size: 14px; color: var(--muted); font-style: italic; }

@media (max-width: 980px) {
  .set-grid { grid-template-columns: repeat(2, 1fr); }
  .sig-hero { min-height: 62vh; }
}
@media (max-width: 620px) {
  .set-grid, .sig-grid { grid-template-columns: 1fr; }
  .sig-item-wide { grid-column: auto; }
}