/* ============================================================
   TOLMACH GEMS — design system
   Display: Bodoni Moda / Cormorant  ·  UI: Jost
   Accent: Colombian emerald  ·  Gold + dark luxe base
   ============================================================ */

:root {
  /* fonts (switchable via tweak) */
  --font-display: "Bodoni Moda", "Cormorant Garamond", serif;
  --font-ui: "Jost", system-ui, sans-serif;

  /* emerald accent (switchable) */
  --accent: #0f7355;
  --accent-deep: #0a4d39;
  --accent-bright: #199c74;
  --accent-ink: #f3efe4;

  /* gold */
  --gold: #c9a24b;
  --gold-soft: #e2c77e;

  /* ivory/cream — kept only for header & the Menu dropdown */
  --cream: #f6f3ec;

  /* theme surfaces — default = NOIR */
  --bg: #0b0e0d;
  --bg-alt: #0f1413;
  --surface: #141a18;
  --surface-2: #1a221f;
  --text: #f4f1ea;
  --text-muted: #a9a59a;
  --line: rgba(244, 241, 234, 0.12);
  --line-strong: rgba(244, 241, 234, 0.22);
  --placeholder-a: #213029;
  --placeholder-b: #121b18;
  --ph-text: rgba(244, 241, 234, 0.55);
  --ph-sheen: rgba(199, 162, 75, 0.10);
  --shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);

  --maxw: 1680px;
  --gut: clamp(20px, 4vw, 64px);
}

/* ---------------- IVORY theme ---------------- */
:root[data-theme="ivory"] {
  --bg: #ffffff;
  --bg-alt: #efeadf;
  --surface: #ffffff;
  --surface-2: #f1ece1;
  --text: #16201b;
  --text-muted: #6a6b62;
  --line: rgba(22, 32, 27, 0.14);
  --line-strong: rgba(22, 32, 27, 0.28);
  --placeholder-a: #e7e0d2;
  --placeholder-b: #d4d2c4;
  --ph-text: rgba(22, 32, 27, 0.5);
  --ph-sheen: rgba(199, 162, 75, 0.16);
  --accent-ink: #f3efe4;
  --shadow: 0 30px 70px -45px rgba(40, 50, 40, 0.35);
}

/* ---------------- BOLD theme ---------------- */
:root[data-theme="bold"] {
  --bg: #ffffff;
  --bg-alt: #0b0e0d;
  --surface: #ffffff;
  --surface-2: #f3f1ea;
  --text: #0b0e0d;
  --text-muted: #5d5f58;
  --line: rgba(11, 14, 13, 0.16);
  --line-strong: rgba(11, 14, 13, 0.4);
  --placeholder-a: #ebe8df;
  --placeholder-b: #d6d2c6;
  --ph-text: rgba(11, 14, 13, 0.5);
  --ph-sheen: rgba(199, 162, 75, 0.16);
  --accent-ink: #ffffff;
  --shadow: 0 24px 60px -42px rgba(0, 0, 0, 0.45);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 0.4s ease, color 0.4s ease;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); }

.eyebrow {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}
.display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

/* link with underline reveal */
.link-u {
  position: relative;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 3px;
  display: inline-block;
}
.link-u::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.link-u:hover::after { transform: scaleX(0); transform-origin: right; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-ui);
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500;
  padding: 15px 30px;
  border: 1px solid transparent;
  background: var(--text); color: var(--bg);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, opacity .3s;
}
.btn { border-radius: 999px; }
.btn:hover { opacity: .88; }
.btn--sm { padding: 11px 22px; font-size: 11.5px; letter-spacing: 0.12em; }
.btn--ghost {
  background: transparent; color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--text); color: var(--bg); opacity: 1; }
.btn--light { background: #fff; color: #111; }
.btn--accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-bright); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--ghost-light:hover { background: #fff; color: #111; }

/* ============================================================
   HEADER
   ============================================================ */
.utility {
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background .3s;
}
.utility__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 8px var(--gut);
  display: flex; align-items: center; justify-content: space-between;
}
.utility__msg { display: flex; align-items: center; gap: 8px; opacity: .92; }
.utility__right { display: flex; align-items: center; gap: 22px; }
.utility a { opacity: .9; }
.utility a:hover { opacity: 1; }
.lang-toggle { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.lang-toggle button {
  background: none; border: none; color: inherit; font: inherit;
  letter-spacing: 0.12em; padding: 0; opacity: .55;
}
.lang-toggle button.is-active { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.lang-toggle span { opacity: .5; }

header.site {
  position: sticky; top: 0; z-index: 80;
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  transition: background .3s, border-color .3s;
}
header.site.scrolled { background: color-mix(in srgb, var(--cream) 97%, transparent); box-shadow: 0 1px 0 var(--line); }
.nav {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(18px, 2vw, 36px);
  height: 120px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  transition: height .35s ease;
}
header.site.scrolled .nav { height: 84px; }

/* ---- mega nav: tabs row + hover dropdown ---- */
.meganav {
  position: relative;
}
.meganav--noline { border-top: 1px solid var(--line); }
.meganav__tabs {
  list-style: none; margin: 0;
  padding: 0 clamp(18px, 2vw, 36px);
  max-width: var(--maxw); margin-inline: auto;
  display: flex; justify-content: center; flex-wrap: wrap;
  column-gap: clamp(20px, 2.4vw, 40px);
}
.meganav__item { position: static; }
.meganav__tab {
  display: block; padding: 14px 2px;
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); opacity: .82; white-space: nowrap;
  position: relative; transition: opacity .25s;
}
.meganav__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--text); transform: scaleX(0);
  transition: transform .3s ease;
}
.meganav__item:hover .meganav__tab,
.meganav__tab:hover { opacity: 1; }
.meganav__item:hover .meganav__tab::after { transform: scaleX(1); }
.meganav__tab--accent {
  font-family: var(--font-display); text-transform: none;
  font-size: 14px; letter-spacing: 0.01em; font-weight: 600; opacity: 1;
}
.meganav__tab--accent::after { display: none; }

.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream);
  border-top: 1px solid var(--line);
  box-shadow: 0 24px 40px -28px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  z-index: 5;
}
.meganav__item:hover > .mega {
  opacity: 1; visibility: visible; transform: none;
}
.mega__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(34px, 4vw, 60px) clamp(18px, 2vw, 36px);
  display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 5vw, 90px);
  align-items: start;
}
.mega__cols { display: flex; gap: clamp(40px, 5vw, 96px); flex-wrap: wrap; }
.mega__col { display: flex; flex-direction: column; gap: 14px; }
.mega__h {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.mega__col a {
  font-family: var(--font-display); font-size: 17px; color: var(--text);
  letter-spacing: .005em; transition: color .25s; width: fit-content;
}
.mega__col a:hover { color: var(--accent); }
.mega__feature { margin: 0; width: clamp(260px, 24vw, 360px); }
.mega__feature image-slot { width: 100%; height: clamp(220px, 20vw, 300px); }
.mega__feature figcaption {
  margin-top: 14px; font-family: var(--font-ui); font-size: 12.5px;
  letter-spacing: .04em; color: var(--text-muted);
}
@media (max-width: 900px) { .meganav { display: none; } }
.nav__menu { display: flex; align-items: center; gap: 26px; }
.nav__menu a {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; color: var(--text); opacity: .82;
  position: relative; padding: 6px 0;
}
.nav__menu a::after {
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--accent); transition: width .35s ease;
}
.nav__menu a:hover { opacity: 1; }
.nav__menu a:hover::after { width: 100%; }

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.5vw, 48px);
  letter-spacing: 0.36em;
  text-align: center;
  padding-left: 0.36em;
  white-space: nowrap;
  transition: font-size .35s ease;
}
header.site.scrolled .brand { font-size: clamp(24px, 2.6vw, 34px); }
.brand small {
  display: block; font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.55em; font-weight: 500;
  color: var(--accent); margin-top: 2px; padding-left: 0.55em;
}
:root[data-theme="bold"] .brand small,
:root[data-theme="ivory"] .brand small { color: var(--accent); }

.nav__icons { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
.icon-btn {
  background: none; border: none; color: var(--text); padding: 4px;
  display: inline-flex; opacity: .85; transition: opacity .25s, transform .25s;
}
.icon-btn:hover { opacity: 1; transform: translateY(-1px); }
.icon-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.4; }
.nav__spacer { display: block; }

/* contact link + language dropdown in nav */
.nav__contact {
  font-size: 13px; letter-spacing: 0.06em; color: var(--text);
  opacity: .82; white-space: nowrap;
}
.nav__contact:hover { opacity: 1; }
.lang-dd { position: relative; }
.lang-dd__trigger {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; color: var(--text); font: inherit;
  font-size: 13px; letter-spacing: 0.10em; opacity: .82; padding: 4px 0;
}
.lang-dd__trigger:hover { opacity: 1; }
.lang-dd__chev { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; transition: transform .25s; }
.lang-dd[data-open] .lang-dd__chev { transform: rotate(180deg); }
.lang-dd__menu {
  position: absolute; top: calc(100% + 12px); right: 0;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  min-width: 156px; padding: 6px; background: var(--bg);
  border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 90;
}
.lang-dd[data-open] .lang-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dd__menu button {
  text-align: left; padding: 9px 12px; opacity: .7; letter-spacing: .03em;
  font-size: 13px; text-decoration: none;
}
.lang-dd__menu button:hover { opacity: 1; background: var(--bg-alt); }
.lang-dd__menu button.is-active { opacity: 1; text-decoration: none; color: var(--accent); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: clamp(560px, 90vh, 940px);
  overflow: hidden;
  background: var(--bg);
}
.hero image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,.06) 60%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}
.hero__content {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(48px, 7vh, 90px);
  padding-inline: var(--gut);
  max-width: var(--maxw); margin: 0 auto;
  color: #fff;
}
.hero__eyebrow { color: rgba(255,255,255,.85); margin-bottom: 18px; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 7vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0 0 26px;
  max-width: 16ch;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.hero__sub { font-size: clamp(15px, 1.3vw, 18px); max-width: 46ch; color: rgba(255,255,255,.9); margin-bottom: 30px; }
.hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
/* split layout: actions left, descriptive copy aligned bottom-right */
.hero__content--split { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 6vw, 90px); }
.hero__content--split .hero__left { display: flex; flex-direction: column; }
.hero__content--split .hero__cta { margin-bottom: 0; }
.hero__content--split .hero__sub { margin-bottom: 0; text-align: right; max-width: 40ch; }
/* end layout: elegant serif copy + neat button, raised, bottom-left */
.hero__content--end { display: flex; justify-content: flex-start; bottom: clamp(78px, 14vh, 168px); }
.hero__block { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2vw, 26px); max-width: 46ch; text-align: left; }
.hero__content--end .hero__sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(21px, 2vw, 32px); font-style: italic; font-weight: 500;
  line-height: 1.28; margin: 0; max-width: 100%; color: #fff;
}
.hero__content--end .hero__cta { margin: 0; }
@media (max-width: 720px) {
  .hero__content--split { flex-direction: column; align-items: flex-start; }
  .hero__content--split .hero__sub { text-align: left; }
  .hero__content--end { justify-content: flex-start; }
  .hero__block { align-items: flex-start; text-align: left; }
}

/* ============================================================
   FULL-BLEED MEDIA BANDS (full-screen photo / video)
   ============================================================ */
.media-bands { display: block; }
.media-band { position: relative; width: 100%; }
.media-band + .media-band { margin-top: 0; }
.media-band image-slot { display: block; width: 100%; height: clamp(560px, 92vh, 1040px); }

/* scroll cue */
.hero__cue {
  position: absolute; z-index: 3; right: var(--gut); bottom: clamp(48px, 7vh, 90px);
  writing-mode: vertical-rl; color: rgba(255,255,255,.8);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  display: flex; align-items: center; gap: 12px;
}
.hero__cue::after { content:""; width:1px; height:46px; background: rgba(255,255,255,.6); animation: cue 2.2s infinite; transform-origin: top; }
@keyframes cue { 0%,100%{transform:scaleY(.4);opacity:.4} 50%{transform:scaleY(1);opacity:1} }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section { position: relative; }
.section-pad { padding-block: clamp(64px, 9vw, 130px); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); flex-wrap: wrap;
}
.section-head h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4.4vw, 60px); margin: 10px 0 0; line-height: 1; }
.section-head .eyebrow { color: var(--accent); }
:root[data-theme="noir"] .section-head .eyebrow { color: var(--gold-soft); }

/* ============================================================
   2-UP EDITORIAL (new collection)
   ============================================================ */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 26px); }
.duo--full { gap: 0; padding: 0; }
.duo--full .feature-card image-slot { width: 100%; height: auto; aspect-ratio: 1 / 1; }

/* ---- left "showcard": small photo + dot switcher + static text ---- */
.feature-card.showcard {
  background: #ffffff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(20px, 2.2vw, 34px);
  padding: clamp(30px, 4vw, 70px) clamp(24px, 3vw, 56px);
}
.showcard__stage {
  position: relative; width: 100%; flex: 1 1 auto; min-height: 0;
  display: grid; place-items: center;
}
.feature-card.showcard .showcard__photo {
  grid-area: 1 / 1;
  width: clamp(200px, 56%, 380px); height: auto; aspect-ratio: 1 / 1;
  background: #ffffff;
  opacity: 0; visibility: hidden; transition: opacity .55s ease;
}
.feature-card.showcard .showcard__photo.is-active { opacity: 1; visibility: visible; }
.showcard__photo::part(frame) { background: #ffffff; box-shadow: none; }
.showcard__photo::part(empty) { color: #9a9a90; }
.showcard__name {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(20px, 1.7vw, 30px); line-height: 1.15; color: #16201b; margin: 0;
}
.showcard__meta {
  font-family: var(--font-ui); font-size: clamp(12px, 0.95vw, 14.5px);
  letter-spacing: .04em; color: #8a8b82; margin: clamp(8px, 0.9vw, 14px) 0 0;
}
.showcard__dots { display: flex; gap: 11px; justify-content: center; }
.showcard__dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: #cdcabf; cursor: pointer; transition: background .3s, transform .3s;
}
.showcard__dot:hover { transform: scale(1.25); }
.showcard__dot.is-active { background: #16201b; }
.showcard__link {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: #16201b; text-decoration: none;
  border-bottom: 1px solid rgba(22, 32, 27, 0.4); padding-bottom: 7px;
  transition: color .3s, border-color .3s;
}
.showcard__link:hover { color: var(--accent); border-color: var(--accent); }

/* right card photo — pure white background */
#new-2 { background: #ffffff; }
#new-2::part(frame) { background: #ffffff; box-shadow: none; }
#new-2::part(empty) { color: #9a9a90; }
.duo--full .feature-card:nth-child(2) { background: #ffffff; }
.feature-card { position: relative; overflow: hidden; background: var(--bg); }
.feature-card image-slot { width: 100%; height: clamp(440px, 52vw, 740px); }
.feature-card__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(26px, 3vw, 48px);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.55));
  color: #fff;
}
.feature-card__body .eyebrow { color: rgba(255,255,255,.85); }
.feature-card__body h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 42px); margin: 10px 0 18px; }

/* ============================================================
   SHOWCASE — "Наши украшения" (category carousel, light)
   ============================================================ */
.showcase {
  background: #ffffff; color: #16201b;
  padding-block: clamp(48px, 6vw, 96px);
}
.showcase__head { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 4vw, 58px); padding-inline: var(--gut); }
.showcase__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 4.4vw, 60px); line-height: 1.04; margin: 0;
  color: #16201b; letter-spacing: .005em;
}
.showcase__sub {
  margin: clamp(14px, 1.4vw, 20px) 0 0; color: #6a6b62;
  font-size: clamp(14px, 1.05vw, 17px); letter-spacing: .01em;
}
.showcase__carousel { position: relative; border-right: 1px solid rgba(22,32,27,.14); }
.showcase__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(100% / 3);
  gap: 0; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-top: 1px solid rgba(22,32,27,.14);
  border-bottom: 1px solid rgba(22,32,27,.14);
}
.showcase__track::-webkit-scrollbar { display: none; }
@media (max-width: 1100px) { .showcase__track { grid-auto-columns: calc(100% / 2); } }
@media (max-width: 680px)  { .showcase__track { grid-auto-columns: 100%; } }

.showcase__item {
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: inherit;
  border-left: 1px solid rgba(22,32,27,.14);
  padding: clamp(26px, 3vw, 52px) clamp(20px, 2.5vw, 44px) clamp(28px, 3vw, 46px);
}
.showcase__track .showcase__item:last-child { border-right: 1px solid rgba(22,32,27,.14); }
.showcase__media {
  width: 100%; display: grid; place-items: center;
}
.showcase__media image-slot {
  width: 100%; height: clamp(300px, 30vw, 440px); background: #ffffff;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.showcase__item:hover .showcase__media image-slot { transform: scale(1.04); }
.showcase__media image-slot::part(frame) { background: #ffffff; box-shadow: none; }
.showcase__media image-slot::part(empty) { color: #9a9a90; }
.showcase__label {
  margin-top: clamp(22px, 2.4vw, 40px);
  font-family: var(--font-ui); font-size: 13px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #6a6b62;
  text-align: center; transition: color .3s;
}
.showcase__item:hover .showcase__label { color: #16201b; }

.showcase__nav {
  position: absolute; top: calc(clamp(26px, 3vw, 52px) + clamp(150px, 15vw, 220px));
  z-index: 4; width: clamp(42px, 3.4vw, 54px); height: clamp(42px, 3.4vw, 54px);
  border-radius: 50%; border: 1px solid rgba(22,32,27,.22);
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
  color: #16201b; display: grid; place-items: center; cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.showcase__nav:hover { background: #16201b; color: #fff; border-color: #16201b; }
.showcase__nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.showcase__nav--prev { left: clamp(8px, 1.6vw, 26px); }
.showcase__nav--next { right: clamp(8px, 1.6vw, 26px); }

/* ============================================================
   CATEGORY GRID
   ============================================================ */
.cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 1.2vw, 20px); }
.cat { grid-column: span 2; position: relative; overflow: hidden; background: var(--bg); }
.cat:nth-child(1) { grid-column: span 3; }
.cat:nth-child(2) { grid-column: span 3; }
.cat image-slot { width: 100%; height: clamp(260px, 26vw, 420px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.cat:hover image-slot { transform: scale(1.045); }
.cat__label {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(20px, 2vw, 30px);
  display: flex; align-items: center; justify-content: space-between;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.5));
}
.cat__label h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 30px); margin: 0; }
.cat__label .arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); display: grid; place-items: center; transition:.3s; }
.cat:hover .cat__label .arrow { background:#fff; color:#111; }
.cat__label .arrow svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* ============================================================
   BESPOKE BAND (accent)
   ============================================================ */
.bespoke { background: var(--accent); color: var(--accent-ink); overflow: hidden; }
.bespoke__inner {
  max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut);
  display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; gap: 0;
}
.bespoke__text { padding-block: clamp(56px, 8vw, 120px); padding-right: clamp(24px, 5vw, 90px); }
.bespoke__text .eyebrow { color: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.bespoke__text h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.02; margin: 16px 0 22px; }
.bespoke__text p { max-width: 46ch; opacity: .92; margin-bottom: 30px; }
.bespoke__media { position: relative; margin-right: calc(-1 * var(--gut)); }
.bespoke__media image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================
   HERITAGE / STORY
   ============================================================ */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 90px); align-items: center; }
.story image-slot { width: 100%; height: clamp(420px, 48vw, 680px); }
.story__text h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 56px); line-height: 1.04; margin: 14px 0 24px; }
.story__text p { color: var(--text-muted); max-width: 50ch; margin-bottom: 18px; font-size: 16.5px; }
.story__stats { display: flex; gap: clamp(28px, 4vw, 56px); margin: 34px 0 30px; }
.story__stats .n { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 48px); line-height: 1; }
.story__stats .l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); margin-top: 8px; }
.story__text .reverse { order: -1; }

/* ============================================================
   NEWSLETTER + FOOTER
   ============================================================ */
.news { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.news__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-block: clamp(48px, 6vw, 84px); }
.news h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3vw, 44px); margin: 0 0 10px; }
.news p { color: var(--text-muted); max-width: 44ch; }
.news form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; align-items: end; }
.news input {
  flex: 1; background: transparent; border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--text); font-family: var(--font-ui); font-size: 16px; padding: 14px 2px; outline: none;
}
.news input::placeholder { color: var(--text-muted); }
.news input:focus { border-color: var(--accent); }
.news select {
  background: transparent; border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--text); font-family: var(--font-ui); font-size: 16px; padding: 14px 2px; outline: none;
  appearance: none; -webkit-appearance: none; cursor: pointer; border-radius: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center; background-size: 18px;
  padding-right: 26px;
}
.news select:focus { border-color: var(--accent); }
.news select:invalid { color: var(--text-muted); }
.news select option { color: #111; }

/* custom styled dropdown (contact method) */
.field-dd { position: relative; align-self: end; }
.field-dd__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: transparent; border: none; border-bottom: 1px solid var(--line-strong);
  color: var(--text); font-family: var(--font-ui); font-size: 16px;
  padding: 14px 2px; outline: none; cursor: pointer; text-align: left;
  transition: border-color .25s;
}
.field-dd[data-open] .field-dd__trigger,
.field-dd__trigger:hover { border-color: var(--accent); }
.field-dd__cur.is-placeholder { color: var(--text-muted); }
.field-dd__chev { width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 1.6; flex: none; transition: transform .3s; }
.field-dd[data-open] .field-dd__chev { transform: rotate(180deg); }
.field-dd__menu {
  list-style: none; margin: 0; padding: 8px 0;
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 22px 44px -26px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.field-dd[data-open] .field-dd__menu { opacity: 1; visibility: visible; transform: none; }
.field-dd__menu li {
  font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: .005em;
  color: var(--text); padding: 11px 18px; cursor: pointer;
  transition: background .2s, color .2s, padding-left .2s;
}
.field-dd__menu li:hover,
.field-dd__menu li[aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent); padding-left: 22px;
}
.news form .btn { align-self: end; background: #1ede87; border-color: #1ede87; color: #0a3a26; }
.news form .btn:hover { background: color-mix(in srgb, #1ede87 88%, #000); }

/* white sections — story + newsletter (standard white) */
#story, .news {
  background: #ffffff;
  color: #16201b;
  --text: #16201b;
  --text-muted: #6a6b62;
  --line: rgba(22, 32, 27, 0.14);
  --line-strong: rgba(22, 32, 27, 0.28);
  --bg: #ffffff;
}

footer.site { background: var(--bg-alt); padding-top: clamp(56px, 7vw, 100px); }
.foot-grid { display: grid; grid-template-columns: minmax(210px, 300px) auto auto minmax(250px, 340px) minmax(150px, 1fr); gap: clamp(28px, 3vw, 52px); padding-bottom: clamp(48px, 6vw, 80px); align-items: start; }
.foot-brand .brand { text-align: left; padding-left: 0; font-size: 26px; }
.foot-brand .brand small { padding-left: 0; }
.foot-brand p { color: var(--text-muted); max-width: 30ch; margin: 18px 0 22px; font-size: 14px; }
.foot-social { display: flex; gap: 14px; }
.foot-social a { width: 40px; height: 40px; border: none; border-radius: 50%; display: grid; place-items: center; transition: transform .3s, filter .3s; }
.foot-social a:hover { transform: translateY(-2px); filter: brightness(1.08); }
.foot-social svg { width: 21px; height: 21px; fill: #fff; stroke: none; }
.foot-social a[aria-label="Instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.foot-social a[aria-label="Telegram"] { background: #229ed9; }
.foot-social a[aria-label="WhatsApp"] { background: #25d366; }
.foot-col h4 { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 18px; font-weight: 600; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.foot-col a { font-size: 14px; opacity: .85; }
.foot-col a:hover { opacity: 1; color: var(--accent); }
.foot-col ul a { white-space: nowrap; }

/* ---- footer offices ---- */
.foot-office + .foot-office { margin-top: 26px; }
.foot-office__h { font-family: var(--font-display); font-size: 17px; line-height: 1.2; font-weight: 500; color: var(--text); margin: 0 0 13px; text-transform: none; letter-spacing: .005em; }
.foot-office__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-office__list li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.foot-office__list svg { width: 15px; height: 15px; flex: none; margin-top: 1px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.foot-office__list a { font-size: 13px; opacity: .85; }
.foot-office__list a:hover { opacity: 1; color: var(--accent); }

/* ---- footer partners ---- */
.partner-logos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 4px; align-items: center; }
.plogo { height: 40px; display: flex; align-items: center; justify-content: center; }
.plogo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; opacity: .82; transition: opacity .3s ease; }
.plogo:hover img { opacity: 1; }
.foot-partners h4 { text-align: center; }
.foot-bottom { border-top: 1px solid var(--line); padding-block: 26px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); letter-spacing: .04em; }
.foot-bottom .pays { display: flex; gap: 10px; align-items: center; }
.foot-bottom .pays span { border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; font-size: 10px; letter-spacing: .1em; }

/* ============================================================
   PLACEHOLDER look for empty image-slots
   ============================================================ */
/* empty slots share the template background; no contrasting fill so rounded
   photos read as clean corners with no sharp-corner artifact behind them */
image-slot { background: var(--bg); }
image-slot::part(empty) { color: var(--ph-text); }
image-slot::part(frame) { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .nav__menu { display: none; }
  .nav__icons { gap: 14px; }
  .duo { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, 1fr); }
  .cat, .cat:nth-child(1), .cat:nth-child(2) { grid-column: span 1; }
  .bespoke__inner { grid-template-columns: 1fr; }
  .bespoke__media { margin: 0 calc(-1 * var(--gut)); height: 60vw; }
  .story { grid-template-columns: 1fr; }
  .story__text .reverse { order: 0; }
  .news__inner { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .utility__msg { display: none; }
  .nav__contact { display: none; }
  .cats { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero__cue { display: none; }
}

/* ===== MOBILE-NAV (hamburger) ===== */
.nav__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:7px;background:none;border:none;cursor:pointer}
.nav__burger span{display:block;height:1.6px;width:22px;background:var(--text);transition:.3s;opacity:.9}
.mnav,.mnav-overlay{display:none}
.mnav__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.mnav__head .brand{font-size:26px;letter-spacing:.28em;padding-left:.28em;text-align:left}
.mnav__head .brand small{font-size:9px;letter-spacing:.5em}
.mnav__close{background:none;border:none;color:var(--text);cursor:pointer;padding:6px}
.mnav__close svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.6}
.mnav__links{display:flex;flex-direction:column;gap:0}
.mnav__links a{font-family:var(--font-display);font-size:21px;color:var(--text);padding:14px 0;border-bottom:1px solid var(--line);transition:color .25s}
.mnav__links a:hover{color:var(--accent)}
.mnav__lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:30px}
.mnav__lang-h{width:100%;font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.mnav__lang button{font:inherit;font-size:13px;padding:7px 13px;cursor:pointer;background:none;color:var(--text);border:1px solid var(--line);border-radius:999px;opacity:.8}
.mnav__lang button:hover{opacity:1;border-color:var(--line-strong)}
.mnav__lang button.is-active{opacity:1;color:var(--accent);border-color:var(--accent)}
@media (max-width:900px){
  .nav__burger{display:inline-flex}
  .nav__spacer{display:none}
  .nav__icons{gap:14px}
  .mnav-overlay{display:block;position:fixed;inset:0;z-index:998;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .mnav-overlay[data-open]{opacity:1;visibility:visible}
  .mnav{display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;width:min(84vw,340px);z-index:999;background:var(--bg);border-right:1px solid var(--line);box-shadow:var(--shadow);transform:translateX(-100%);transition:transform .42s cubic-bezier(.16,1,.3,1);padding:22px 26px 30px;overflow-y:auto}
  .mnav[data-open]{transform:translateX(0)}
}

/* ============================================================
   MOBILE POLISH — header fit, banner heights (2026-06-09)
   Fixes: header overflowed the screen on phones (sideways scroll),
   and the hero/full-bleed banners were too tall (over-cropped).
   ============================================================ */
@media (max-width: 900px) {
  /* The right-side icons (search / account / bag) are decorative and made the
     header wider than the screen. Hide them on phones; keep the language switch. */
  .nav__icons .icon-btn { display: none; }
  .nav__icons { gap: 0; }
  .nav { padding-inline: clamp(14px, 4vw, 22px); }
  /* comfortable 44px tap targets for the two header controls that remain */
  .nav__burger { width: 44px; height: 44px; padding: 9px; }
  .lang-dd__trigger { padding: 11px 2px; }
}
@media (max-width: 600px) {
  /* keep the wordmark from forcing the header wider than the viewport */
  .nav .brand { letter-spacing: .2em; font-size: clamp(21px, 6vw, 27px); }
  header.site.scrolled .brand { font-size: clamp(19px, 5.4vw, 24px); }
}
@media (max-width: 720px) {
  /* hero photo is landscape (1.79) — keep it shorter on phones so much more of
     the image shows (a tall frame center-crops away the sides) */
  .hero { height: clamp(360px, 58vh, 500px); }
  .hero__content--end { bottom: clamp(28px, 5vh, 56px); }
  /* the full-bleed promo banners are 2:1 (one is 1.6:1) with composition + text
     across their width. Match each banner's own aspect ratio so the WHOLE banner
     is visible on phones — no side-crop. Full-bleed width = 100vw, so 50vw = 2:1. */
  .media-band image-slot { height: 50vw; }
  #band-3 { height: 62.5vw; }
}

/* ============================================================
   PAGE TRANSITIONS + MOTION (2026-06-09)
   Smooth cross-fade between pages (View Transitions API, MPA).
   Chrome/Edge/Safari 18+ animate; other browsers navigate instantly.
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* honour reduced-motion: no page fade, no scroll-reveal animation */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}