/* ==========================================================================
   FurnitureDirect — design system
   Palette and typography follow the art direction of the campaign banners:
   warm ivory paper, near-black ink, brushed gold. Type pairs Playfair Display
   (editorial display) with Inter (UI and body), plus Noto Kufi Arabic for the
   Arabic lockup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --ink: #17150f;
  --ink-2: #353025;
  --ink-soft: #4a443a;
  --muted: #6e6659;
  --muted-2: #8d8374;

  --paper: #fbf8f2;
  --paper-2: #f4eee3;
  --paper-3: #ece4d5;
  --white: #ffffff;

  --line: #e6ddcc;
  --line-2: #d5c8b2;
  --line-dark: rgba(255, 255, 255, 0.14);

  --gold: #b08a4e;
  --gold-2: #c9a66b;
  --gold-3: #8c6e3f;

  --dark: #17150f;
  --dark-2: #201c15;
  --dark-3: #2b261d;

  --price: #b4532f;

  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Noto Kufi Arabic", "Segoe UI", "Tahoma", sans-serif;

  --shell: min(1320px, 100% - 48px);
  --shell-narrow: min(1040px, 100% - 48px);

  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(23, 21, 15, 0.05), 0 6px 16px -12px rgba(23, 21, 15, 0.22);
  --shadow-md: 0 2px 6px rgba(23, 21, 15, 0.06), 0 22px 40px -28px rgba(23, 21, 15, 0.4);
  --shadow-lg: 0 40px 90px -50px rgba(23, 21, 15, 0.55);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

/* The UA stylesheet's `[hidden] { display: none }` loses to any later
   `display` declaration, and `.modal` / `.lightbox` both set `display: grid`.
   Without this rule the enquiry modal and the lightbox stay laid out as
   full-screen fixed overlays and swallow every click on the page. */
[hidden] { display: none !important; }

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

html.is-locked,
html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
address { font-style: normal; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--gold-2); color: var(--ink); }

.shell { width: var(--shell); margin-inline: auto; }

.skip {
  position: fixed;
  top: -100px;
  left: 20px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  border-radius: var(--r-sm);
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 16px; }

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   3. Typography helpers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(30px, 4.1vw, 54px);
  line-height: 1.02;
}

.section-lede {
  max-width: 460px;
  color: var(--muted);
  font-size: 15px;
}

.dot { color: var(--line-2); margin-inline: 6px; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--dark-3); }

.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }

.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--paper-2); }

.btn-outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); background: var(--white); }

.btn-outline-light { border-color: rgba(255, 255, 255, 0.42); color: #fff; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }

.btn-wa { background: #1f8a4c; color: #fff; }
.btn-wa:hover { background: #18743f; }

/* --------------------------------------------------------------------------
   5. Utility bar
   -------------------------------------------------------------------------- */

.utility {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.74);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.utility-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
}
.utility-notice,
.utility-links,
.utility-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.utility-notice {
  color: var(--gold-2);
  font-weight: 600;
  text-transform: uppercase;
}
.utility-notice .icon { width: 14px; height: 14px; }
.utility-links { gap: 26px; }
.utility-links a { transition: color 0.2s var(--ease); }
.utility-links a:hover { color: #fff; }
.utility-links .icon { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   6. Brand bar — the trilingual logo lockup
   -------------------------------------------------------------------------- */

.brandbar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.brandbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 0;
  min-height: 116px;
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 22px);
  flex: 0 1 auto;
  min-width: 0;
}

.brand-mark-svg {
  width: clamp(44px, 4.4vw, 58px);
  height: auto;
  flex: none;
  border-radius: 12px;
}

/* The lockup must never be squeezed — it is the brand. */
.brand-words {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  flex: none;
}

.brand-en {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 46px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--ink);
  white-space: nowrap;
}

/* French and Arabic sit at roughly half the display size, flanking the
   English name and held apart by hairline gold rules. */
.brand-side {
  position: relative;
  padding-inline: clamp(12px, 1.6vw, 22px);
  color: var(--gold-3);
  font-size: clamp(10.5px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
}
.brand-fr { border-right: 1px solid var(--line-2); }
.brand-ar {
  border-left: 1px solid var(--line-2);
  font-family: var(--font-ar);
  font-size: clamp(11.5px, 1.05vw, 15px);
  letter-spacing: 0;
  text-transform: none;
}

.brandbar-side {
  display: grid;
  gap: 9px;
  justify-items: end;
  text-align: right;
  flex: none;
}

.brand-badge {
  display: grid;
  gap: 3px;
  padding: 10px 18px;
  border: 1px solid var(--gold-3);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  text-align: left;
  box-shadow: 0 14px 26px -20px rgba(140, 110, 63, 0.95);
}
.brand-badge strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.brand-badge span {
  color: rgba(23, 21, 15, 0.7);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.brandbar-line {
  color: var(--ink-soft);
  /* Kept small: this line carries a long descriptor and must not crowd the
     brand lockup or wrap on a narrow desktop. Tracking tightened to keep the
     line ~20% narrower than the previous copy at every viewport width. */
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.brandbar-line-soft { color: var(--muted-2); letter-spacing: 0.02em; text-transform: none; }

/* --------------------------------------------------------------------------
   7. Navigation
   -------------------------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 248, 242, 0.94);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.25s var(--ease);
}
.navbar.is-stuck { box-shadow: 0 12px 30px -24px rgba(23, 21, 15, 0.5); }

.navbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 66px;
}

.mainnav { flex: 1 1 auto; min-width: 0; }

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 22px 15px;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 16px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.nav-item:hover > .nav-link,
.nav-item.is-active > .nav-link { color: var(--ink); }
.nav-item.is-active > .nav-link::after,
.nav-item:hover > .nav-link::after { transform: scaleX(1); }

.nav-caret { width: 13px; height: 13px; color: var(--gold); transition: transform 0.25s var(--ease); }
.nav-item:hover .nav-caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  min-width: 280px;
  padding-top: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-inner {
  display: grid;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
}
.dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-radius: var(--r-xs);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.dropdown-link .icon { width: 13px; height: 13px; opacity: 0; transform: translateX(-4px); transition: all 0.2s var(--ease); }
.dropdown-link:hover { background: var(--paper-2); color: var(--ink); }
.dropdown-link:hover .icon { opacity: 1; transform: translateX(0); }
.dropdown-all {
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 13px;
  color: var(--gold-3);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
}
.dropdown-all .icon { opacity: 1; transform: none; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 42px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.22s var(--ease);
}
.nav-cta:hover { background: var(--gold-3); }
.nav-cta .icon { width: 15px; height: 15px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle-close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-close { display: block; }

.mobile-nav {
  display: none;
  padding: 8px 0 22px;
  border-top: 1px solid var(--line);
  background: var(--white);
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-list > li { border-bottom: 1px solid var(--line); }
.mobile-list a {
  display: block;
  padding: 15px 4px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.mobile-sub { padding: 0 0 10px 18px; }
.mobile-sub a {
  padding: 10px 4px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.mobile-cta { display: grid; gap: 10px; padding-top: 18px; }

/* Sub navigation (second level, changes with the active main menu item) */
.subnav {
  position: sticky;
  top: 66px;
  z-index: 55;
  background: var(--dark-2);
  border-bottom: 1px solid var(--line-dark);
}
.subnav-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 50px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav-label {
  flex: none;
  margin-right: 8px;
  color: var(--gold-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.subnav-link {
  flex: none;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  color: rgba(255, 255, 255, 0.72);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.subnav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.subnav-link.is-active { background: var(--gold); color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.hero { background: var(--dark); }

.hero-track {
  position: relative;
  width: 100%;
  aspect-ratio: 2560 / 900;
  max-height: min(64vh, 660px);
  min-height: 280px;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Per-slide text scales. Slide 1 carries the longest copy, so its block is
     set a little smaller; its eyebrow and its <h1> are then dialled back up
     individually, which is what keeps the eyebrow on one row while the title
     still reads large. */
  --hero-scale: 1;
  --hero-title-scale: 1;
  --hero-eyebrow-scale: 1;
  /* Nudges the whole copy block off dead centre. 0 means perfectly centred. */
  --hero-copy-lift: 0px;
  /* Inactive slides sit on top of the active one and would otherwise swallow
     every click aimed at the visible slide's buttons. */
  pointer-events: none;
  transition: opacity 1s var(--ease);
}
/* The original artwork set this block above the middle of the panel, so the
   copy is lifted 1cm from true centre to sit where the design had it. */
.hero-slide:first-child {
  --hero-scale: 0.85;
  --hero-title-scale: 1.21;
  --hero-copy-lift: 1cm;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
}

.hero-bar {
  background: var(--dark);
  border-bottom: 1px solid var(--line-dark);
}
.hero-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 0;
  flex-wrap: wrap;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.hero-dots { display: flex; gap: 8px; }
.hero-dot {
  width: 30px;
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.26);
  transition: background-color 0.25s var(--ease), width 0.25s var(--ease);
}
.hero-dot.is-active { background: var(--gold-2); width: 48px; }

/* The hero copy is real DOM text laid over a text-free photograph. It is sized
   in viewport units so it scales exactly like the artwork it replaced, and it
   occupies the panel that artwork reserved for it (roughly 6%–32% of the
   width) — which keeps it clear of the photograph at every viewport. */
.hero-copy {
  position: absolute;
  left: 5.6%;
  top: 0;
  bottom: 0;
  width: 27%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(clamp(4px, 0.5vw, 11px) * var(--hero-scale, 1));
  /* Breathing room so a long lede can never push the buttons off the edge. */
  padding-block: clamp(14px, 4%, 42px);
  /* Off-centre placement for slides whose design called for it. */
  transform: translateY(calc(-1 * var(--hero-copy-lift, 0px)));
  color: var(--ink);
}
.hero-eyebrow {
  margin: 0;
  color: var(--gold-3);
  font-size: calc(clamp(10px, 0.66vw, 14px) * var(--hero-scale, 1) * var(--hero-eyebrow-scale, 1));
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
/* Slides 1 and 3 name the whole service line in the eyebrow. It has to hold a
   single row at every width, so it is set a little smaller, tracked a little
   tighter, and finally capped against the viewport — the `vw` term only bites
   on narrow desktops, where the 27%-wide copy column would otherwise be
   overrun. */
.hero-slide:first-child .hero-eyebrow,
.hero-slide:nth-child(3) .hero-eyebrow {
  white-space: nowrap;
  letter-spacing: 0.135em;
}
.hero-slide:first-child .hero-eyebrow {
  font-size: min(calc(clamp(9px, 0.66vw, 14px) * 0.9), 0.72vw);
}
.hero-slide:nth-child(3) .hero-eyebrow {
  font-size: min(calc(clamp(8px, 0.62vw, 13px) * 0.88), 0.6vw);
}
.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(clamp(24px, 3.8vw, 84px) * var(--hero-scale, 1) * var(--hero-title-scale, 1));
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
/* The home page's <h1> is worth reading as the headline, not as a caption:
   heavier weight, and a touch more leading between its two lines. */
.hero-slide:first-child .hero-title {
  font-weight: 700;
  line-height: 1.05;
}
/* One look for the small line above the buttons, on every slide: the colour,
   size and face are all taken from slide 1 so the three banners read as a
   single family. On a phone all three already share the dark scrim below. */
.hero-lede {
  margin: 0;
  color: #9c9488;
  font-size: calc(clamp(11px, 0.9vw, 19px) * 0.85);
  line-height: 1.45;
}
/* Slide 1 carries the most copy, so it gets a little air between the title,
   this line and the buttons. */
.hero-slide:first-child .hero-lede {
  margin-top: clamp(8px, 1vw, 18px);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(6px, 0.75vw, 16px);
  margin-top: clamp(3px, 0.45vw, 12px);
}
.hero-cta .btn {
  min-height: 0;
  padding: clamp(5px, 0.55vw, 10px) clamp(7px, 0.78vw, 16px);
  font-size: clamp(8px, 0.5vw, 9.5px);
}
.hero-cta .btn .icon { width: 1em; height: 1em; }
.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
  opacity: 0.82;
}
.btn-ghost:hover { opacity: 1; }

/* Slides 2 and 3 sit on near-black artwork, so the copy inverts. The lede is
   deliberately left out — it keeps slide 1's muted grey on every slide. */
.hero-copy-dark { color: #f4f0e8; }
.hero-copy-dark .hero-eyebrow { color: #d3b184; }

/* The small service line each banner used to carry, now real text. It always
   sits on the dark band or dark panel, so it stays light whatever the slide. */
.hero-notes {
  position: absolute;
  right: 4%;
  bottom: 9%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(clamp(3px, 0.7vw, 8px) * var(--hero-scale, 1));
  text-align: right;
  pointer-events: none;
}
.hero-notes-left { right: auto; left: 5.6%; align-items: flex-start; text-align: left; }
.hero-notes-label {
  color: var(--gold-2);
  font-size: clamp(8.5px, 0.66vw, 13px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-notes-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(6px, 0.8vw, 13px);
  color: rgba(255, 255, 255, 0.86);
  font-size: clamp(8px, 0.62vw, 12px);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-notes-left .hero-notes-row { justify-content: flex-start; }
.hero-notes-sep { color: rgba(255, 255, 255, 0.35); }

/* The track is capped by `max-height`, so on a wide-but-short window a
   width-based scale would push the copy out of the top of the photograph.
   Where container queries are available the copy is scaled by the height of
   the hero itself instead, which keeps it inside the panel at every size. */
@supports (container-type: size) {
  .hero-slide { container-type: size; }
  .hero-copy { gap: calc(clamp(4px, 1.3cqh, 13px) * var(--hero-scale, 1)); }
  .hero-eyebrow { font-size: calc(clamp(9px, 2.1cqh, 15px) * var(--hero-scale, 1) * var(--hero-eyebrow-scale, 1)); }
  /* Same single-row eyebrows as above, but scaled by the hero's own height,
     then capped against the viewport so a narrow desktop cannot overrun the
     27% copy column and run the line over the photograph. */
  .hero-slide:first-child .hero-eyebrow { font-size: min(calc(clamp(9px, 2.1cqh, 15px) * 0.9), 0.72vw); }
  .hero-slide:nth-child(3) .hero-eyebrow { font-size: min(calc(clamp(7px, 2.1cqh, 15px) * 0.88), 0.6vw); }
  .hero-title { font-size: calc(clamp(20px, 11.5cqh, 82px) * var(--hero-scale, 1) * var(--hero-title-scale, 1)); }
  .hero-lede { font-size: calc(clamp(10px, 2.9cqh, 19px) * 0.85); }
  .hero-slide:first-child .hero-lede { margin-top: clamp(8px, 2.4cqh, 20px); }
  .hero-cta { margin-top: calc(clamp(3px, 1.1cqh, 12px) * var(--hero-scale, 1)); }
  .hero-cta .btn {
    padding: clamp(5px, 1.7cqh, 10px) clamp(7px, 2.4cqh, 16px);
    font-size: clamp(8.5px, 1.75cqh, 9.5px);
  }
  .hero-notes { gap: 4px; }
  .hero-notes-label { font-size: clamp(8.5px, 2cqh, 13px); }
  .hero-notes-row { font-size: clamp(8px, 1.9cqh, 12px); }
}

/* --------------------------------------------------------------------------
   9. Contact strip
   -------------------------------------------------------------------------- */

.strip {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.strip-cell {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 24px;
  border-left: 1px solid var(--line);
  transition: background-color 0.22s var(--ease);
}
.strip-cell:first-child { border-left: 0; }
a.strip-cell:hover { background: var(--paper-2); }
.strip-cell-note { background: var(--paper-2); }
.strip-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  color: var(--gold-3);
}
.strip-icon .icon { width: 19px; height: 19px; }
.strip-body { display: grid; gap: 2px; min-width: 0; }
.strip-body strong {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.strip-body span { color: var(--muted); font-size: 12px; }
.strip-go { margin-left: auto; color: var(--gold); }
.strip-go .icon { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   10. Section scaffolding
   -------------------------------------------------------------------------- */

.section { padding: clamp(58px, 7vw, 108px) 0; }
.section-soft { background: var(--paper-2); }
.section-dark { background: var(--dark); color: #fff; }
.section-dark .section-title { color: #fff; }
.section-dark .section-lede { color: rgba(255, 255, 255, 0.66); }
.section-dark .eyebrow { color: var(--gold-2); }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.section-head > div { max-width: 720px; }
.section-dark .section-head { border-color: var(--line-dark); }

.section-foot {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.section-foot-note { color: var(--muted); font-size: 13px; }
.section-dark .section-foot-note { color: rgba(255, 255, 255, 0.6); }

/* --------------------------------------------------------------------------
   11. Collection tiles
   -------------------------------------------------------------------------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--paper-3);
  aspect-ratio: 4 / 3;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.tile:hover img { transform: scale(1.045); }
.tile-body {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 2px;
  padding: 56px 22px 22px;
  background: linear-gradient(transparent, rgba(15, 13, 9, 0.86));
  color: #fff;
}
.tile-body strong { font-family: var(--font-display); font-size: 23px; font-weight: 600; letter-spacing: -0.02em; }
.tile-body > span:not(.tile-go) { color: rgba(255, 255, 255, 0.72); font-size: 12.5px; }
.tile-go {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.28s var(--ease);
}
.tile:hover .tile-go { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------------------
   12. Product grid
   -------------------------------------------------------------------------- */

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.pcard {
  position: relative;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.pcard:hover {
  border-color: var(--gold-2);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.pcard-media {
  position: relative;
  aspect-ratio: 1200 / 980;
  overflow: hidden;
  background: var(--white);
}
.pcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.pcard:hover .pcard-media img { transform: scale(1.03); }

.pcard-flag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.pcard-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 17, 12, 0.24);
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.pcard-zoom .icon { width: 26px; height: 26px; }
.pcard:hover .pcard-zoom { opacity: 1; }

.pcard-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
}
.pcard-code {
  flex: none;
  color: var(--gold-3);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.pcard-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
}
.pcard-price {
  flex: none;
  color: var(--price);
  font-weight: 700;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 30px 0;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.pagination-status { color: var(--muted); font-size: 13px; }
.pagination-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pagination-links a,
.pagination-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 38px;
  padding: 5px 10px;
  font-size: 13px;
}
.pagination-links a { border: 1px solid var(--line); border-radius: var(--r-sm); }
.pagination-links a:hover,
.pagination-links a:focus-visible { border-color: var(--gold-3); color: var(--gold-3); }
.pagination-links a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pagination-links .icon { width: 14px; height: 14px; }
.pagination-links .pagination-prev .icon { transform: rotate(180deg); }
.pagination-links a:has(.icon) { gap: 6px; }
.pagination-gap { color: var(--muted); }

/* --------------------------------------------------------------------------
   13. Price sheets
   -------------------------------------------------------------------------- */

.sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}
.sheet-card {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.sheet-card:hover { border-color: var(--gold-2); box-shadow: var(--shadow-md); }
.sheet-card img { width: 100%; }
.sheet-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
}
.sheet-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--gold-3);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sheet-zoom .icon { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   14. Series (group) cards
   -------------------------------------------------------------------------- */

.series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}
.series-card {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.series-card:hover { border-color: var(--gold-2); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.series-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.series-body { display: grid; gap: 5px; padding: 20px 22px 22px; }
.series-body strong { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.series-body > span { color: var(--muted); font-size: 13px; }
.series-count { color: var(--gold-3) !important; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   15. Pillars and company panels
   -------------------------------------------------------------------------- */

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.pillar {
  padding: 30px 26px 34px;
  border-left: 1px solid var(--line);
}
.pillar:first-child { border-left: 0; padding-left: 0; }
.pillar-index {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.1em;
}
.pillar h3 { margin-bottom: 8px; font-size: 20px; }
.pillar p { color: var(--muted); font-size: 14px; }
.pillar-grid-wide { margin-top: 8px; }

.panel-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 54px;
}
.panel {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  overflow: hidden;
}
/* The supplied company panels are printed in the factory's own blue livery.
   Warming and desaturating them keeps the information but brings them into the
   site's ivory-and-gold palette. */
.panel img {
  width: 100%;
  filter: grayscale(0.78) sepia(0.3) saturate(1.35) brightness(1.02) contrast(1.02);
  transition: filter 0.35s var(--ease);
}
.panel:hover img { filter: grayscale(0.2) sepia(0.06) saturate(1) brightness(1); }

/* --------------------------------------------------------------------------
   16. Factory
   -------------------------------------------------------------------------- */

.factory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.factory-tile {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--dark-3);
}
.factory-tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.factory-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.factory-tile:hover img { transform: scale(1.04); }
.factory-tile figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 34px 16px 14px;
  background: linear-gradient(transparent, rgba(15, 13, 9, 0.84));
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.factory-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 8px;
}
.factory-gallery .factory-tile { aspect-ratio: 16 / 10; cursor: zoom-in; }
.factory-gallery .factory-tile:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   17. Page hero
   -------------------------------------------------------------------------- */

.page-hero {
  padding: clamp(44px, 5vw, 78px) 0 clamp(30px, 3.4vw, 52px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 20px;
  color: var(--muted-2);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.crumbs a:hover { color: var(--gold-3); }
.page-title { font-size: clamp(34px, 5vw, 66px); }
.page-intro {
  max-width: 680px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.68;
}
.page-meta {
  margin-top: 20px;
  color: var(--muted-2);
  font-size: 12.5px;
  letter-spacing: 0.05em;
}
.page-meta strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   18. Exhibition layout + contact rail
   -------------------------------------------------------------------------- */

.exhibit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
.exhibit-main { min-width: 0; display: grid; gap: clamp(38px, 4vw, 60px); }

.block-head { margin-bottom: 24px; max-width: 640px; }
.block-head h2 {
  margin-bottom: 8px;
  font-size: clamp(22px, 2.4vw, 30px);
}
.block-head p { color: var(--muted); font-size: 14px; }

.exhibit-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--paper-2);
}
.exhibit-note .icon { width: 20px; height: 20px; color: var(--gold-3); margin-top: 2px; }
.exhibit-note p { color: var(--ink-soft); font-size: 13.5px; }

.rail {
  position: sticky;
  top: 128px;
  display: grid;
  gap: 14px;
  align-self: start;
}
.rail-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.rail-card-soft { background: var(--paper-2); box-shadow: none; }
.rail-card-note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
}
.rail-card-note .icon { width: 22px; height: 22px; color: var(--gold-2); flex: none; margin-top: 2px; }
.rail-card-note p { color: rgba(255, 255, 255, 0.74); font-size: 12.5px; }
.rail-card-note strong { color: #fff; font-size: 13px; letter-spacing: 0.04em; }

.rail-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--gold-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.rail-kicker .icon { width: 14px; height: 14px; }
.rail-title { margin-bottom: 10px; font-size: 25px; }
.rail-copy { margin-bottom: 20px; color: var(--muted); font-size: 13.5px; }
.rail-actions { display: grid; gap: 9px; }
.rail-actions .btn { font-size: 11px; padding-inline: 14px; letter-spacing: 0.04em; }
.rail-actions .btn .icon { width: 15px; height: 15px; }

.rail-address { margin-bottom: 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.rail-note { margin-bottom: 14px; color: var(--muted); font-size: 12.5px; }
.rail-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-3);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rail-link .icon { width: 13px; height: 13px; }

/* Reach-us block (inner pages) */
.reach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: clamp(28px, 3.4vw, 52px);
  align-items: start;
}
.reach-list { display: grid; gap: 12px; margin-top: 26px; }
.reach-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink-soft); font-size: 14.5px; }
.reach-list .icon { width: 17px; height: 17px; color: var(--gold); margin-top: 3px; }
.reach-grid .rail { position: static; }

/* --------------------------------------------------------------------------
   19. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--dark);
  color: #fff;
  padding-top: clamp(48px, 5vw, 78px);
}

.footer-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-bottom: clamp(38px, 4vw, 60px);
  border-bottom: 1px solid var(--line-dark);
}
.footer-cta .eyebrow { color: var(--gold-2); text-transform: none; letter-spacing: 0.06em; font-size: 12.5px; }
.footer-cta h2 {
  margin-bottom: 14px;
  font-size: clamp(30px, 4vw, 52px);
  color: #fff;
}
.footer-cta-text { max-width: 460px; color: rgba(255, 255, 255, 0.62); font-size: 14.5px; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }

.footer-grid {
  display: grid;
  grid-template-columns: 0.85fr 0.9fr 1.35fr 1.4fr;
  gap: 30px;
  padding: 42px 0;
  border-bottom: 1px solid var(--line-dark);
}
.footer-col { display: grid; align-content: start; gap: 9px; }
.footer-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.footer-label .icon { width: 14px; height: 14px; }
.footer-strong { color: rgba(255, 255, 255, 0.92); font-size: 14.5px; line-height: 1.55; font-weight: 500; }
a.footer-strong:hover { color: var(--gold-2); }
.footer-muted { color: rgba(255, 255, 255, 0.5); font-size: 12px; line-height: 1.6; }

.footer-map { padding: 34px 0 0; }
.map-card {
  position: relative;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--dark-2);
  min-height: 240px;
}
.map-card iframe { display: block; width: 100%; height: 340px; border: 0; filter: grayscale(0.25); }
.map-placeholder {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  min-height: 240px;
  padding: 30px clamp(22px, 3vw, 40px);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
}
.map-pin {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--r-pill);
  border: 1px solid var(--gold-2);
  color: var(--gold-2);
}
.map-pin .icon { width: 24px; height: 24px; }
.map-placeholder > div { display: grid; gap: 3px; margin-right: auto; }
.map-placeholder strong { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #fff; }
.map-placeholder span { color: rgba(255, 255, 255, 0.58); font-size: 13px; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 0 34px;
}
.footer-brandline { display: flex; align-items: center; gap: 13px; color: rgba(255, 255, 255, 0.62); font-size: 12.5px; }
.footer-mark { width: 34px; height: 34px; border-radius: 8px; }
.footer-legal { display: grid; gap: 4px; text-align: right; color: rgba(255, 255, 255, 0.4); font-size: 11.5px; }

/* --------------------------------------------------------------------------
   20. Floating dock
   -------------------------------------------------------------------------- */

.dock {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 80;
  display: grid;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.dock.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 52px;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-md);
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.3s var(--ease), background-color 0.22s var(--ease);
}
.dock-btn .icon { width: 22px; height: 22px; flex: none; }
.dock-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.dock-btn:hover { width: 148px; }
.dock-btn:hover .dock-label { opacity: 1; }
.dock-wa { background: #1f8a4c; }
.dock-mail { background: var(--dark); }
.dock-top { background: rgba(23, 21, 15, 0.62); backdrop-filter: blur(6px); }
.dock-top .icon { transform: rotate(-90deg); }

/* --------------------------------------------------------------------------
   21. Modal + lightbox
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
}
.modal-scrim {
  position: absolute;
  inset: 0;
  background: rgba(12, 11, 8, 0.62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
}
.modal-panel {
  position: relative;
  width: min(600px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: clamp(26px, 3vw, 40px);
  border-radius: var(--r-md);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(14px) scale(0.99);
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.modal.is-open .modal-scrim { opacity: 1; }
.modal.is-open .modal-panel { opacity: 1; transform: none; }
.modal h2 { margin-bottom: 10px; font-size: clamp(26px, 3vw, 34px); }
.modal-copy { margin-bottom: 24px; color: var(--muted); font-size: 14px; }
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  color: var(--muted);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.modal-close:hover { background: var(--paper-2); color: var(--ink); }
.modal-close .icon { width: 18px; height: 18px; }

.enquiry-form { display: grid; gap: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: grid; gap: 7px; }
.field > span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 104px; }
.field input:focus,
.field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176, 138, 78, 0.16); }
.form-status { min-height: 20px; font-size: 13px; color: var(--muted); }
.form-status.is-success { color: #1f8a4c; font-weight: 600; }
.form-status.is-error { color: var(--price); font-weight: 600; }
.modal-alt {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modal-alt a { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-3); }
.modal-alt a:hover { color: var(--ink); }
.modal-alt .icon { width: 16px; height: 16px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 60px);
  background: rgba(11, 10, 7, 0.92);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.24s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox-figure {
  display: grid;
  gap: 14px;
  justify-items: center;
  max-width: min(1100px, 100%);
  max-height: 100%;
  margin: 0;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100dvh - 210px);
  width: auto;
  border-radius: var(--r-sm);
  background: #fff;
  object-fit: contain;
}
.lightbox-figure figcaption {
  color: rgba(255, 255, 255, 0.82);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
.lightbox-close .icon { width: 20px; height: 20px; }
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-nav .icon { width: 22px; height: 22px; }
.lightbox-prev { left: clamp(12px, 2vw, 28px); }
.lightbox-next { right: clamp(12px, 2vw, 28px); }
.lightbox-prev .icon { transform: rotate(180deg); }
.lightbox-actions {
  position: absolute;
  bottom: clamp(16px, 3vw, 34px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   22. Misc
   -------------------------------------------------------------------------- */

.empty {
  grid-column: 1 / -1;
  padding: 56px 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
.empty a { color: var(--gold-3); font-weight: 600; text-decoration: underline; }

.notfound { padding: clamp(70px, 10vw, 150px) 0; }
.notfound-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 34px; }

/* Scroll reveal.
   The hidden state is applied by JavaScript, so content stays visible if the
   script never runs or fails part way through. */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .exhibit-layout,
  .reach-grid { grid-template-columns: minmax(0, 1fr) 300px; }
  .brandbar-line { display: none; }
  .pillar-grid { grid-template-columns: repeat(2, 1fr); }
  .pillar { border-left: 0; padding-left: 0; }
  .pillar:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .factory-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  :root { --shell: min(100% - 36px, 900px); }
  .nav-list, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .navbar-inner { min-height: 60px; justify-content: space-between; }
  .subnav { top: 60px; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-cell:nth-child(3) { border-left: 0; }
  .strip-cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .sheet-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .footer-cta { grid-template-columns: 1fr; }
  .footer-cta-actions { justify-content: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-legal { text-align: left; }
  .brand-badge { padding: 8px 14px; }
  .brand-badge strong { font-size: 11.5px; }
  .brand-badge span { font-size: 8.5px; }
}

@media (max-width: 800px) {
  .brandbar-side { display: none; }
}

@media (max-width: 820px) {
  .exhibit-layout,
  .reach-grid { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: 1fr; }
  .reach-grid .rail { grid-template-columns: 1fr; }
  .factory-grid { grid-template-columns: repeat(2, 1fr); }
  .factory-tile:first-child { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 9; }
  .factory-gallery { grid-template-columns: repeat(2, 1fr); }
  .factory-gallery .factory-tile:first-child { grid-column: span 2; }
  .panel-strip { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  :root { --shell: calc(100% - 32px); }

  .utility-inner { min-height: 36px; justify-content: center; }
  .utility-links { display: none; }

  .brandbar-inner { min-height: 0; padding: 16px 0; gap: 14px; }
  .brand { flex-wrap: wrap; gap: 12px; }
  .brand-words { flex-wrap: wrap; gap: 6px 12px; }
  .brand-en { font-size: 30px; }
  .brand-side { border: 0; padding: 0; font-size: 11px; }
  .brand-ar { font-size: 12px; }
  .brand-mark-svg { width: 42px; }

  .hero-track { aspect-ratio: 4 / 3; max-height: none; }
  .hero-slide img { object-position: 26% center; }
  .hero-bar-inner { padding: 16px 0; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; padding-inline: 16px; font-size: 11px; }
  .hero-dots { display: none; }

  /* On a phone the artwork's copy panel is partly cropped, so the copy moves
     to a full-width scrim along the bottom instead — always legible, whatever
     the slide underneath. */
  .hero-copy {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: auto;
    height: 78%;
    padding: 16px 18px 44px;
    gap: 5px;
    /* The scrim already sits at the bottom, so the desktop off-centre nudge
       is cancelled here. */
    --hero-copy-lift: 0px;
    color: #f4f0e8;
    background: linear-gradient(180deg, rgba(12, 10, 8, 0) 0%, rgba(12, 10, 8, 0.72) 52%, rgba(12, 10, 8, 0.94) 100%);
  }
  .hero-copy .hero-eyebrow { color: #d3b184; font-size: 9px; letter-spacing: 0.14em; }
  .hero-slide:first-child .hero-eyebrow { white-space: normal; }
  .hero-copy .hero-title { font-size: 26px; }
  .hero-copy .hero-lede { color: rgba(244, 240, 232, 0.62); font-size: 12px; }
  /* The desktop-only spacing tweak for slide 1 has no place in the scrim. */
  .hero-slide:first-child .hero-lede { margin-top: 0; }
  .hero-copy .hero-cta { margin-top: 6px; gap: 8px 12px; }
  .hero-copy .btn-ghost { color: #f4f0e8; }

  /* The service line tucks into the darkest band at the very bottom. */
  .hero-notes,
  .hero-notes-left {
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 0 18px;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
  }
  .hero-notes-row,
  .hero-notes-left .hero-notes-row { flex-wrap: wrap; justify-content: flex-start; gap: 6px; white-space: normal; }
  .hero-notes-label { font-size: 8.5px; }
  .hero-notes-row { font-size: 8px; }

  /* Contact strip stacks so the labels never break mid-phrase. */
  .strip-grid { grid-template-columns: 1fr; }
  .strip-cell {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 17px 0;
    gap: 13px;
  }
  .strip-cell:first-child { border-top: 0; }
  .strip-cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .strip-icon { width: 38px; height: 38px; }
  .strip-icon .icon { width: 17px; height: 17px; }

  .section { padding: 52px 0; }
  .section-head { display: block; }
  .section-head .section-lede { margin-top: 16px; }

  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pcard-meta { padding: 10px; font-size: 10.5px; gap: 6px; }
  .pcard-flag { top: 8px; left: 8px; font-size: 8.5px; padding: 4px 8px; }
  .sheet-grid { grid-template-columns: 1fr; }
  .tile-grid { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 3 / 2; }
  .series-grid { grid-template-columns: 1fr; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar { padding: 22px 0; }
  .pillar:nth-child(n + 2) { border-top: 1px solid var(--line); }
  .reach-list { margin-top: 20px; }
  .footer-cta-actions .btn { flex: 1 1 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .map-placeholder { gap: 14px; }
  .map-placeholder > div { margin-right: 0; flex: 1 1 100%; }

  .dock { right: 12px; bottom: 12px; gap: 8px; }
  .dock-btn { width: 46px; height: 46px; padding: 0 12px; }
  .dock-btn .icon { width: 20px; height: 20px; }
  .dock-btn:hover { width: 46px; }
  .dock-btn:hover .dock-label { opacity: 0; }

  .lightbox-nav { width: 42px; height: 42px; }
  .lightbox-actions { position: static; transform: none; margin-top: 4px; }
  .lightbox { padding: 14px; align-content: center; }

  .field-row { grid-template-columns: 1fr; }
  .modal { padding: 0; align-items: end; }
  .modal-panel {
    width: 100%;
    max-height: 92dvh;
    border-radius: var(--r-md) var(--r-md) 0 0;
    padding: 28px 20px 34px;
  }
}

@media (max-width: 420px) {
  .brand-en { font-size: 26px; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .factory-grid, .factory-gallery { grid-template-columns: 1fr; }
  .factory-tile:first-child,
  .factory-gallery .factory-tile:first-child { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   24. Motion + print
   -------------------------------------------------------------------------- */

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

@media print {
  .utility, .navbar, .subnav, .dock, .modal, .lightbox, .hero-bar, .strip { display: none !important; }
  body { background: #fff; }
  .pcard, .sheet-card { break-inside: avoid; }
}

/* --------------------------------------------------------------------------
   Legal pages (Privacy Policy, Return & Refund Policy)
   -------------------------------------------------------------------------- */

.legal-body {
  max-width: 780px;
  display: grid;
  gap: 34px;
}

.legal-block { display: grid; gap: 10px; }

.legal-block h2 {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}

.legal-block p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.75;
}

.legal-block ul {
  display: grid;
  gap: 8px;
  padding-left: 20px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}

.legal-block a {
  color: var(--gold-3);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-block a:hover { color: var(--ink); }

.footer-legal-links {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  font-size: 11.5px;
}

.footer-legal-links a { color: rgba(255, 255, 255, 0.66); }
.footer-legal-links a:hover { color: var(--gold-2); }
.footer-legal-links span { color: rgba(255, 255, 255, 0.3); }

@media (max-width: 760px) {
  .footer-legal-links { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   20. Cookie consent
   -------------------------------------------------------------------------- */

.footer-legal-link {
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.66);
  font: inherit;
  cursor: pointer;
}
.footer-legal-link:hover { color: var(--gold-2); }

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 16px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.consent.is-open { opacity: 1; transform: none; }

.consent-panel {
  width: var(--shell-narrow);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 22px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 24px 48px -30px rgba(23, 21, 15, 0.6);
}
.consent-text {
  flex: 1 1 auto;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}
.consent-text strong { color: var(--ink); font-weight: 600; }
.consent-text a { color: var(--ink); text-decoration: underline; }
.consent-actions { display: flex; flex: none; gap: 10px; }
.consent-actions .btn { min-height: 42px; padding: 0 18px; font-size: 12px; }

@media (max-width: 780px) {
  .consent { padding: 10px; }
  .consent-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }
  .consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .consent-actions .btn { padding: 0 10px; font-size: 11.5px; }
}