/* ==========================================================================
   İntersivin — Wholesale landing page
   Heritage tailoring: warm cream paper, near-black ink, aged-brass accent.
   Tokens below are the İntersivin design system (tokens/*.css), flattened.
   ========================================================================== */

:root {
  /* ---- Warm neutral ramp (paper → ink) ---- */
  --paper: #f5f1e8;
  --paper-raised: #fbf8f1;
  --paper-sunken: #ece6d8;
  --linen-200: #e3dccc;
  --linen-300: #d3cab6;
  --stone-400: #b3a892;
  --stone-500: #8c8270;
  --stone-600: #645d50;
  --ink-700: #3a352c;
  --ink-800: #262219;
  --ink-900: #17150f;

  /* ---- Navy (formalwear) ---- */
  --navy-700: #24384f;
  --navy: #1c2a3a;
  --navy-deep: #131e2a;

  /* ---- Brass accent (aged gold) ---- */
  --brass-700: #8a6636;
  --brass: #a9824c;
  --brass-500: #b89360;
  --brass-bright: #c8a36a;
  --brass-wash: #efe6d4;

  /* ---- Support ---- */
  --whatsapp: #1f7a52;
  --whatsapp-deep: #155c3d;
  --danger: #9a3b2e;

  /* ---- Semantic ---- */
  --text: var(--ink-900);
  --text-muted: var(--stone-600);
  --text-faint: var(--stone-500);
  --text-inverse: var(--paper);
  --text-inverse-muted: #c9c0ad;
  --accent: var(--brass);
  --accent-strong: var(--brass-700);
  --on-accent: #1a160d;
  --border: var(--linen-300);
  --border-strong: var(--stone-400);
  --border-inverse: rgba(245, 241, 232, 0.16);
  --hairline: rgba(23, 21, 15, 0.10);
  --focus-ring: rgba(169, 130, 76, 0.65);

  /* ---- Type ---- */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display-xl: clamp(2.75rem, 9.5vw, 5.25rem);
  --text-display-lg: clamp(2.35rem, 7vw, 4rem);
  --text-display-md: clamp(1.9rem, 5.4vw, 2.9rem);
  --text-display-sm: clamp(1.5rem, 4.4vw, 2.1rem);
  --tracking-label: 0.22em;

  /* ---- Space & shape ---- */
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-pill: 999px;
  --maxw-content: 72rem;

  /* ---- Elevation & motion ---- */
  --shadow-sm: 0 2px 6px rgba(23, 21, 15, 0.07);
  --shadow-md: 0 8px 24px -10px rgba(23, 21, 15, 0.18);
  --shadow-lg: 0 24px 60px -22px rgba(23, 21, 15, 0.30);
  --shadow-card: 0 1px 0 var(--paper-raised), 0 14px 34px -20px rgba(23, 21, 15, 0.28);
  --gilt-line: inset 0 1px 0 rgba(200, 163, 106, 0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button { font: inherit; }
::selection { background: var(--brass); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 2px; }

.container {
  width: 100%;
  max-width: var(--maxw-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.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: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--ink-900); color: var(--paper);
  padding: 10px 16px; border-radius: var(--radius-sm); font-size: 14px;
  transition: top var(--dur) var(--ease-out);
}
.skip-link:focus { top: 12px; }

/* Warm film grain used on ink bands */
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Brand wordmark (real logo, rendered as a single-colour mask)
   ========================================================================== */

.wordmark {
  display: block;
  aspect-ratio: 763 / 145;
  background-color: currentColor;
  -webkit-mask: url("assets/brand/wordmark-mask@2x.png") no-repeat center / contain;
  mask: url("assets/brand/wordmark-mask@2x.png") no-repeat center / contain;
}
.wordmark--header { width: 132px; color: var(--ink-900); }
.wordmark--footer { width: 168px; color: var(--paper); }

@media (min-width: 900px) { .wordmark--header { width: 152px; } }

/* ==========================================================================
   Typographic helpers
   ========================================================================== */

.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-strong);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); flex: none; }
.eyebrow--inverse { color: var(--brass-bright); }
.eyebrow--inverse::before { background: var(--brass-bright); }

.lede { font-size: clamp(1rem, 2.6vw, 1.125rem); color: var(--text-muted); max-width: 54ch; }

.section { position: relative; padding-block: var(--section-y); overflow: hidden; }
.section--sunken { background: var(--paper-sunken); }
.section--ink { background: var(--ink-900); color: var(--text-inverse-muted); }
.section--navy { background: var(--navy-deep); color: var(--text-inverse-muted); }

.section__head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.section__head h2 { font-size: var(--text-display-md); color: var(--ink-900); max-width: 22ch; }
.section--ink .section__head h2, .section--navy .section__head h2 { color: var(--paper); }

/* Wide screens: set the headline against the supporting copy instead of
   letting a 22ch column leave half the band empty. */
@media (min-width: 900px) {
  .section__head--split {
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 10px clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  .section__head--split > .eyebrow { grid-column: 1 / -1; }
  .section__head--split > h2 { grid-column: 1; grid-row: 2 / span 2; }
  .section__head--split > .lede { grid-column: 2; grid-row: 2; padding-top: 0.35em; }
  .section__head--split > .collection__note { grid-column: 2; grid-row: 3; align-self: start; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--brass);
  --btn-fg: var(--on-accent);
  --btn-bd: var(--brass);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 500;
  letter-spacing: 0.02em; line-height: 1.2;
  cursor: pointer; text-align: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { --btn-bg: var(--brass-700); --btn-bd: var(--brass-700); }
.btn:active { transform: scale(0.985); }
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--lg { padding: 16px 28px; font-size: 1rem; }
.btn--sm { padding: 9px 15px; font-size: 0.8125rem; }
.btn--full { width: 100%; }

.btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink-900); --btn-bd: var(--border-strong); }
.btn--secondary:hover { --btn-bg: rgba(23,21,15,0.04); --btn-bd: var(--ink-900); --btn-fg: var(--ink-900); }

.btn--wa { --btn-bg: var(--whatsapp); --btn-fg: #fff; --btn-bd: var(--whatsapp); }
.btn--wa:hover { --btn-bg: var(--whatsapp-deep); --btn-bd: var(--whatsapp-deep); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: rgba(245,241,232,0.4); }
.btn--ghost:hover { --btn-bg: rgba(245,241,232,0.10); --btn-bd: var(--paper); --btn-fg: var(--paper); }

.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* ==========================================================================
   Top bar + header
   ========================================================================== */

.topbar {
  background: var(--ink-900); color: var(--brass-bright);
  text-align: center; padding: 8px 14px;
  font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
}

.header { position: sticky; top: 0; z-index: 50; }
.header__bar {
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.header.is-scrolled .header__bar {
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline);
}
.header__inner {
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.header__actions { display: flex; align-items: center; gap: 10px; }

.nav { display: none; gap: 28px; align-items: center; }
.nav a { font-size: 0.875rem; color: var(--ink-700); position: relative; padding-block: 4px; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px;
  background: var(--brass); transition: right var(--dur) var(--ease-out);
}
.nav a:hover::after { right: 0; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--whatsapp-deep); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { border-color: var(--whatsapp-deep); background: rgba(31,122,82,0.06); }
.icon-btn svg { width: 19px; height: 19px; }

.burger { color: var(--ink-900); }
.burger:hover { border-color: var(--ink-900); background: rgba(23,21,15,0.04); }

.header__cta { display: none; }

.mobile-menu {
  display: none; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--hairline);
  background: var(--paper);
  padding: 8px var(--gutter) 20px;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a.mobile-menu__link {
  padding: 13px 2px; font-size: 1rem; color: var(--ink-900);
  border-bottom: 1px solid var(--hairline);
}
.mobile-menu__cta { display: flex; gap: 8px; margin-top: 14px; }
.mobile-menu__cta .btn { flex: 1; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .header__cta { display: inline-flex; }
  .burger { display: none; }
  .mobile-menu, .mobile-menu.is-open { display: none; }
}

/* ==========================================================================
   Language switcher
   A <details>, so it opens and the links work with no JavaScript at all.
   ========================================================================== */

.lang { position: relative; flex: none; }

.lang__btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding-inline: 9px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-700); cursor: pointer;
  list-style: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn::marker { content: ""; }
.lang__btn:hover { border-color: var(--ink-900); background: rgba(23,21,15,0.04); }
/* The hairline keeps the white stripe of a Polish or Russian flag from
   dissolving into the cream behind it. */
.lang__flag {
  width: 18px; height: 12px; flex: none;
  border-radius: 1.5px;
  box-shadow: 0 0 0 1px rgba(23, 21, 15, 0.16);
}
.lang__code { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; }
.lang__caret {
  width: 13px; height: 13px; flex: none; opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-out);
}
.lang[open] .lang__btn { border-color: var(--ink-900); background: rgba(23,21,15,0.04); }
.lang[open] .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70;
  min-width: 11.5rem; margin: 0; padding: 6px; list-style: none;
  background: var(--paper-raised);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}
/* The menu names each language in its own script, so a Latin page would pull
   down the Cyrillic and Arabic webfonts purely to draw this list. Rendering it
   in the system UI font — which already covers every script here — keeps that
   weight on the pages that actually need it. */
.lang__item, .lang-chip {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Helvetica Neue", sans-serif;
}

.lang__item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 0.875rem; color: var(--ink-700); white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lang__item:hover { background: var(--paper-sunken); color: var(--ink-900); }
.lang__item.is-current { color: var(--accent-strong); font-weight: 500; }

/* Eleven entries are ~450px — fine on any normal window, so the list simply
   runs its full length. Only a genuinely short viewport (a phone held sideways)
   needs to scroll it. */
@media (max-height: 620px) {
  .lang__menu { max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; }
}

/* Narrow phones: the code alone is enough to find it. */
@media (max-width: 400px) {
  .lang__caret { display: none; }
  .lang__btn { padding-inline: 7px; gap: 4px; }
}

.mobile-menu__lang { margin-top: 18px; }
.mobile-menu__lang-label {
  display: block; margin-bottom: 9px;
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-faint);
}
.lang-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.lang-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--paper-raised); color: var(--ink-700); font-size: 0.8125rem;
}
.lang-chip.is-current { border-color: var(--accent); background: var(--brass-wash); color: var(--accent-strong); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 620px;
  min-height: clamp(600px, 88svh, 940px);
  display: flex; align-items: flex-end;
  background: var(--ink-900); color: var(--paper);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(20,17,11,0.50) 0%, rgba(20,17,11,0.20) 22%,
    rgba(20,17,11,0.72) 62%, rgba(20,17,11,0.92) 100%);
}
.hero__inner { position: relative; padding-block: clamp(2.5rem, 7vw, 4.5rem); }
.hero__copy { display: flex; flex-direction: column; gap: clamp(1.1rem, 3vw, 1.75rem); max-width: 34rem; }
.hero__title { font-size: var(--text-display-xl); line-height: 1.02; color: var(--paper); }
.hero__sub { font-size: clamp(1rem, 3vw, 1.1875rem); line-height: 1.5; color: var(--text-inverse-muted); max-width: 46ch; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* on a phone two half-width buttons read as broken — go full width instead */
@media (max-width: 559px) { .hero .cta-row .btn { width: 100%; } }

.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 2px; }
.trust li {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-inverse-muted);
}
.trust svg { width: 15px; height: 15px; color: var(--brass-bright); flex: none; }

@media (min-width: 900px) {
  .hero__media { left: auto; width: 55%; }
  .hero__media::after {
    background:
      linear-gradient(90deg, rgba(23,21,15,1) 0%, rgba(23,21,15,0.88) 18%, rgba(23,21,15,0.34) 55%, rgba(23,21,15,0.05) 88%, rgba(23,21,15,0) 100%),
      linear-gradient(180deg, rgba(23,21,15,0.25) 0%, rgba(23,21,15,0) 40%, rgba(23,21,15,0.35) 100%);
  }
  .hero__copy { max-width: 33rem; }
}

/* ==========================================================================
   Stats strip
   ========================================================================== */

.stats { position: relative; background: var(--ink-900); color: var(--paper); }
.stats__grid {
  position: relative;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px 18px;
  padding-block: clamp(2.25rem, 6vw, 3.25rem);
}
.stat__value {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 6vw, 3rem); line-height: 1; color: var(--paper);
  display: block;
}
.stat__label {
  display: block; margin-top: 10px;
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--brass-bright);
}
@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Collection — spec sheets + product cards
   ========================================================================== */

.collection__note {
  display: flex; align-items: flex-start; gap: 12px;
  align-self: flex-start; max-width: 46ch;
  margin-top: 4px; padding: 12px 18px 12px 15px;
  background: var(--brass-wash); border-left: 2px solid var(--brass);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.9375rem; color: var(--ink-800);
}
.collection__note svg { width: 18px; height: 18px; color: var(--brass-700); flex: none; margin-top: 3px; }

.sheets { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 3vw, 1.75rem); }
@media (min-width: 700px) { .sheets { grid-template-columns: 1fr 1fr; } }

.media-card { display: block; width: 100%; text-align: left; padding: 0; background: none; border: 0; cursor: zoom-in; }
.media-card__frame {
  display: block; position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--paper-raised);
}
.media-card__frame img { width: 100%; height: auto; transition: transform 600ms var(--ease-out); }
.media-card:hover .media-card__frame img { transform: scale(1.02); }
.media-card__zoom {
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(23,21,15,0.62); color: var(--paper); border-radius: var(--radius-sm);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.media-card__zoom svg { width: 16px; height: 16px; }
.media-card:hover .media-card__zoom, .media-card:focus-visible .media-card__zoom { opacity: 1; }

.media-card__meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-bottom: 2px;
}
.media-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--ink-900); }
.media-card__code {
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap;
}
/* the four narrow product cards stack their caption instead of crowding it */
.products .media-card__meta { flex-direction: column; align-items: flex-start; gap: 3px; }
.products .media-card__name { font-size: 1.0625rem; }

.rule { border: 0; border-top: 1px solid var(--hairline); margin: clamp(2.25rem, 6vw, 3.5rem) 0; }

.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.75rem, 2.4vw, 1.25rem); }
@media (min-width: 900px) { .products { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   Split feature (atelier / showroom)
   ========================================================================== */

.split { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
.split__copy { display: flex; flex-direction: column; gap: clamp(1rem, 2.6vw, 1.5rem); }
.split__copy h2 { font-size: var(--text-display-md); color: var(--ink-900); max-width: 20ch; }
/* long, multi-clause headline — steps down a notch so it stays readable */
.split__copy h2.h2--long { font-size: clamp(1.6rem, 4.6vw, 2.4rem); max-width: 26ch; line-height: 1.12; }
.split__copy p { color: var(--text-muted); max-width: 46ch; }
.split__media img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first .split__media { order: -1; }
  /* let the photo carry the full height of the band */
  .split--fill .split__media { align-self: stretch; }
  .split--fill .split__media img { height: 100%; min-height: 440px; object-fit: cover; object-position: var(--img-pos, center); }
}

.specs {
  display: grid; grid-template-columns: 1fr; gap: 16px 20px;
  border-top: 1px solid var(--hairline); padding-top: clamp(1.25rem, 3vw, 1.75rem);
}
@media (min-width: 480px) { .specs { grid-template-columns: 1fr 1fr; } }
.specs li { display: flex; gap: 12px; align-items: flex-start; }
.specs svg { width: 19px; height: 19px; color: var(--brass-700); flex: none; margin-top: 2px; }
.specs span { font-size: 0.875rem; line-height: 1.45; color: var(--ink-800); }

.meta-line { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--ink-800); }
.meta-line svg { width: 18px; height: 18px; color: var(--brass-700); flex: none; }

/* ==========================================================================
   Showroom video
   ========================================================================== */

.video-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--ink-900); box-shadow: var(--shadow-lg);
  max-width: 420px; margin-inline: auto; width: 100%;
}
.video-card video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink-900); }
.video-card__play {
  position: absolute; inset: 0; display: grid; place-items: center; gap: 14px;
  border: 0; background: linear-gradient(180deg, rgba(23,21,15,0.05) 0%, rgba(23,21,15,0.45) 100%);
  cursor: pointer; color: var(--paper);
  transition: opacity var(--dur) var(--ease-out);
}
.video-card__play[hidden] { display: none; }
.video-card__disc {
  width: 68px; height: 68px; border-radius: var(--radius-pill);
  background: rgba(245,241,232,0.94); color: var(--ink-900);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.video-card__disc svg { width: 26px; height: 26px; margin-left: 3px; }
.video-card__play:hover .video-card__disc { transform: scale(1.06); background: var(--brass-bright); }
.video-card__cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--paper); text-align: center; pointer-events: none;
}

/* ==========================================================================
   Catalogs
   ========================================================================== */

.catalogs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.875rem, 2.4vw, 1.25rem); }
@media (min-width: 900px) { .catalogs { grid-template-columns: repeat(4, 1fr); } }

.cat {
  display: flex; flex-direction: column;
  background: var(--paper-raised); border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
a.cat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.cat__cover { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-sunken); }
.cat__cover img { width: 100%; height: 100%; object-fit: cover; }
.cat__badge {
  position: absolute; top: 10px; left: 10px;
  background: var(--brass); color: var(--on-accent);
  font-size: 0.625rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--radius-pill);
}
.cat__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cat__season {
  font-size: 0.625rem; font-weight: 500; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent-strong);
}
.cat__title { font-family: var(--font-display); font-weight: 600; font-size: 1.3125rem; line-height: 1.1; color: var(--ink-900); }
.cat__meta { font-size: 0.8125rem; color: var(--text-muted); }
.cat__action {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 500; color: var(--ink-900);
}
.cat__action svg { width: 15px; height: 15px; flex: none; }

.cat--soon { background: transparent; border-style: dashed; box-shadow: none; }
.cat--soon .cat__cover {
  display: grid; place-items: center; background: transparent;
  border-bottom: 1px dashed var(--border);
}
.cat--soon .cat__cover svg { width: 30px; height: 30px; color: var(--stone-400); }
.cat--soon .cat__title, .cat--soon .cat__action { color: var(--text-faint); }
.cat--soon .cat__action { border-top-color: var(--border); }

/* ==========================================================================
   Why partner
   ========================================================================== */

.why { display: grid; grid-template-columns: 1fr; gap: 0 44px; }
@media (min-width: 768px) { .why { grid-template-columns: 1fr 1fr; } }
.why__item { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-top: 1px solid var(--hairline); }
.why__icon {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--paper-raised); color: var(--brass-700);
}
.why__icon svg { width: 20px; height: 20px; }
.why__title { font-family: var(--font-display); font-weight: 600; font-size: 1.1875rem; color: var(--ink-900); display: block; }
.why__text { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--text-muted); }

/* ==========================================================================
   Private-label band
   ========================================================================== */

.pl {
  position: relative; background: var(--paper-sunken);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding-block: clamp(2.25rem, 6vw, 3.5rem);
}
.pl__inner { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.pl__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-display-sm); color: var(--ink-900); }
.pl__text { color: var(--text-muted); max-width: 52ch; }
@media (min-width: 900px) {
  .pl__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .pl__copy { display: flex; flex-direction: column; gap: 8px; }
}

/* ==========================================================================
   Lead form
   ========================================================================== */

.lead { position: relative; background: var(--navy-deep); color: var(--text-inverse-muted); padding-block: var(--section-y); }
.lead__grid { position: relative; display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .lead__grid { grid-template-columns: 1fr 1fr; } }

.lead__copy { display: flex; flex-direction: column; gap: clamp(1rem, 2.6vw, 1.5rem); }
.lead__copy h2 { font-size: var(--text-display-lg); color: var(--paper); }
.lead__copy p { font-size: clamp(1rem, 2.6vw, 1.125rem); color: var(--text-inverse-muted); max-width: 42ch; }
.lead__list { display: flex; flex-direction: column; gap: 12px; }
.lead__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9375rem; }
.lead__list svg { width: 17px; height: 17px; color: var(--brass-bright); flex: none; margin-top: 3px; }
.lead__aside {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  border-top: 1px solid var(--border-inverse); padding-top: 20px; margin-top: 4px;
}
.lead__aside span { font-size: 0.875rem; }

.form {
  background: var(--paper-raised); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--gilt-line), var(--shadow-lg);
  padding: clamp(1.25rem, 4vw, 2rem);
  display: flex; flex-direction: column; gap: 16px;
}
.form h3 { font-size: var(--text-display-sm); color: var(--ink-900); }
.form__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 520px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label {
  font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
}
.field > label .req { color: var(--brass-700); }
.field input, .field select, .field textarea {
  font-family: var(--font-sans); font-size: 0.9375rem; color: var(--ink-900);
  background: var(--paper); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px 13px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 84px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23645d50' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--stone-400); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(169,130,76,0.18);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); }

.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 0.75rem; color: var(--text-faint); text-align: center; }
.form__error {
  font-size: 0.875rem; color: var(--danger);
  background: rgba(154,59,46,0.07); border: 1px solid rgba(154,59,46,0.25);
  border-radius: var(--radius-sm); padding: 10px 12px;
}
.form__alt { display: flex; align-items: center; gap: 12px; }
.form__alt::before, .form__alt::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }
.form__alt span { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }

.form__done { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.form__done .disc {
  width: 46px; height: 46px; border-radius: var(--radius-pill);
  background: var(--brass-wash); color: var(--brass-700); display: grid; place-items: center;
}
.form__done .disc svg { width: 24px; height: 24px; }
.form__done h3 { font-size: var(--text-display-sm); }
.form__done p { color: var(--text-muted); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--ink-900); color: var(--text-inverse-muted); }
.footer__inner { padding-block: clamp(3rem, 8vw, 4.5rem) clamp(1.5rem, 4vw, 2rem); }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr; } }

.footer__about { display: flex; flex-direction: column; gap: 16px; max-width: 34ch; }
.footer__about p { font-size: 0.875rem; line-height: 1.65; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__title {
  font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-bright);
}
.footer__link { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--paper); }
.footer__link:hover { color: var(--brass-bright); }
.footer__link svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.footer__link address { font-style: normal; }

.footer__bottom {
  margin-top: clamp(2rem, 6vw, 3rem); padding-top: 20px; border-top: 1px solid var(--border-inverse);
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; align-items: baseline;
  font-size: 0.75rem;
}
.footer__bottom .tagline { letter-spacing: 0.14em; text-transform: uppercase; }

/* ==========================================================================
   Floating WhatsApp
   ========================================================================== */

.fab {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  width: 54px; height: 54px; border-radius: var(--radius-pill);
  background: var(--whatsapp); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.fab:hover { background: var(--whatsapp-deep); transform: translateY(-2px); }
.fab svg { width: 27px; height: 27px; }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 10, 7, 0.94);
  display: none; overflow: auto; overscroll-behavior: contain;
  padding: 56px 16px 32px;
}
.lightbox.is-open { display: block; }
.lightbox img { margin: 0 auto; max-width: min(100%, 720px); height: auto; border-radius: var(--radius-sm); }
.lightbox__close {
  position: fixed; top: 12px; right: 12px; z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(245,241,232,0.12); color: var(--paper);
  border: 1px solid rgba(245,241,232,0.28); border-radius: var(--radius-sm); cursor: pointer;
}
.lightbox__close:hover { background: rgba(245,241,232,0.22); }
.lightbox__close svg { width: 20px; height: 20px; }
.lightbox__cap {
  position: fixed; left: 0; right: 0; top: 16px; text-align: center;
  font-size: 0.6875rem; letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-inverse-muted); pointer-events: none;
}
body.is-locked { overflow: hidden; }

/* ==========================================================================
   Reveal-on-scroll
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); }
.no-js .reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ==========================================================================
   Right-to-left (Arabic)
   The layout mirrors itself from `dir="rtl"`; these are the handful of places
   that were pinned to a physical side, plus the typography Arabic needs —
   letter-spacing breaks the joins between Arabic letters, so it goes to zero
   everywhere except the Turkish tagline in the footer.
   ========================================================================== */

[dir="rtl"] *:not(.tagline) { letter-spacing: 0; }
[dir="rtl"] body { line-height: 1.8; }

/* Naskh sets much larger on the em than Cormorant Garamond does, and Arabic
   carries marks above and below the line, so the display scale comes down and
   the leading opens up. */
[dir="rtl"] {
  --text-display-xl: clamp(2rem, 6.6vw, 3.6rem);
  --text-display-lg: clamp(1.75rem, 5vw, 2.8rem);
  --text-display-md: clamp(1.45rem, 3.9vw, 2.05rem);
  --text-display-sm: clamp(1.2rem, 3.2vw, 1.55rem);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.42; }
[dir="rtl"] .hero__title { line-height: 1.3; }
[dir="rtl"] .split__copy h2.h2--long { font-size: clamp(1.25rem, 3.4vw, 1.75rem); line-height: 1.45; }

[dir="rtl"] .skip-link { left: auto; right: 12px; }

[dir="rtl"] .nav a::after { left: 100%; right: 0; transition: left var(--dur) var(--ease-out); }
[dir="rtl"] .nav a:hover::after { left: 0; }

@media (min-width: 900px) {
  [dir="rtl"] .hero__media { left: 0; right: auto; }
  [dir="rtl"] .hero__media::after {
    background:
      linear-gradient(270deg, rgba(23,21,15,1) 0%, rgba(23,21,15,0.88) 18%, rgba(23,21,15,0.34) 55%, rgba(23,21,15,0.05) 88%, rgba(23,21,15,0) 100%),
      linear-gradient(180deg, rgba(23,21,15,0.25) 0%, rgba(23,21,15,0) 40%, rgba(23,21,15,0.35) 100%);
  }
}

[dir="rtl"] .collection__note {
  padding: 12px 15px 12px 18px;
  border-left: 0; border-right: 2px solid var(--brass);
}

[dir="rtl"] .media-card { text-align: right; }
[dir="rtl"] .media-card__zoom { right: auto; left: 10px; }
[dir="rtl"] .cat__badge { left: auto; right: 10px; }
[dir="rtl"] .video-card__disc svg { margin-left: 0; margin-right: 3px; }

[dir="rtl"] .field select {
  background-position: left 13px center;
  padding-right: 13px; padding-left: 34px;
}
[dir="rtl"] .form__hp { left: auto; right: -9999px; }

[dir="rtl"] .fab { right: auto; left: 16px; }
[dir="rtl"] .lightbox__close { right: auto; left: 12px; }

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  .header, .topbar, .fab, .lightbox, .mobile-menu, .video-card__play { display: none !important; }
  body { background: #fff; color: #000; }
  .hero { min-height: auto; }
}