/* ==========================================================================
   YANFENG · OBSIDIAN & CHAMPAGNE — design layer (v4)
   Loaded after main.css. main.css keeps every behaviour and every Customizer
   hook; this file decides how all of it looks.

   Palette   obsidian #0E0F11 · ivory #F2EEE6 · champagne #C9A96E
   Type      Cormorant Garamond (display) · Inter (text) · IBM Plex Arabic
   Surfaces  obsidian bands carry the brand; stone bands carry the catalogue;
             product photographs always sit on white, because they are shot
             on white.
   ========================================================================== */

:root { --axiom-obsidian: "4.0.0"; }

/* 00 · TYPEFACES — self-hosted, so pages load the same in Guangzhou as in
   Frankfurt and no request leaves the site for a font. */
@font-face {
  font-family: 'Yanfeng Serif';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'Yanfeng Serif';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Yanfeng Serif';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Yanfeng Serif';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Yanfeng Serif';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-cyrillic-wght-italic.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Yanfeng Serif';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-ext-wght-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Yanfeng Serif';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(../fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Yanfeng Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

@font-face {
  font-family: 'Yanfeng Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-cyrillic-wght-normal.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

@font-face {
  font-family: 'Yanfeng Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Yanfeng Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Yanfeng Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Yanfeng Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'Yanfeng Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* 01 · TOKENS ------------------------------------------------------------- */
:root {
  /* Obsidian scale — warm-neutral blacks, never blue */
  --ink-900: #0B0C0E;
  --ink-800: #141518;
  --ink-700: #1C1D21;
  --ink-600: #2A2B30;
  --ink-500: #45433F;
  --ink-400: #5F5A51;   /* body copy on stone — 6.2:1 */
  --ink-300: #A39D92;   /* secondary copy on obsidian — 7.2:1 */
  --ink-200: #D3CDC2;
  --ink-100: #E4DFD5;
  --ink-050: #EFEBE3;
  --paper:   #FBFAF7;
  --mist:    #F1EDE6;
  --stone:   #F6F4EF;
  --obsidian: #0E0F11;
  --obsidian-2: #16171A;
  --ivory:   #F2EEE6;

  /* Champagne. --signal is the gold that reads on a LIGHT surface (5.2:1 on
     stone); dark surfaces redefine it below to the bright champagne. */
  --signal:      #7F612F;
  --signal-ink:  #5E4721;
  --signal-soft: rgba(201, 169, 110, .14);
  --gold:        #C9A96E;
  --gold-hi:     #EEDCB0;
  --gold-deep:   #9A7743;
  --metal: linear-gradient(115deg, #9A7743 0%, #C9A96E 34%, #EEDCB0 52%, #C9A96E 70%, #9A7743 100%);

  --bg: var(--stone);
  --fg: var(--ink-800);
  --muted: var(--ink-400);
  --line: rgba(20, 21, 24, .11);
  --line-strong: rgba(20, 21, 24, .22);
  --line-dark: rgba(242, 238, 230, .11);

  --font-sans: "Yanfeng Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-serif: "Yanfeng Serif", "Cormorant Garamond", "Noto Serif SC", "Source Han Serif SC",
                "Songti SC", "STSong", "SimSun", Georgia, "Times New Roman", serif;
  --font-display: var(--font-serif);
  /* The blueprint mono is retired: labels are tracked capitals in the text face. */
  --font-mono: var(--font-sans);

  --radius: 2px;
  --radius-lg: 3px;
  --wrap: 1360px;
  --gutter: clamp(18px, 3.4vw, 48px);

  --shadow-sm: 0 1px 2px rgba(11, 12, 14, .06);
  --shadow-md: 0 18px 40px -24px rgba(11, 12, 14, .32);
  --shadow-lg: 0 40px 80px -36px rgba(11, 12, 14, .55);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);

  --label: 500 11px/1.2 var(--font-sans);
}

/* Dark surfaces get the bright champagne and the light lines. */
.topbar, .site-header, .mega, .mobile-nav, .hero, .page-hero, .section--dark,
.cta-band, .site-footer, .statband, .film, .dock__list {
  --signal: var(--gold);
  --signal-ink: var(--gold-hi);
  --line: var(--line-dark);
  --line-strong: rgba(242, 238, 230, .22);
  --muted: var(--ink-300);
}

/* Arabic: one face that actually has the script, for text and display alike */
:root:lang(ar) {
  --font-sans: "Yanfeng Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-serif: "Yanfeng Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, serif;
}

/* 02 · BASE --------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  animation: none;
}
::selection { background: var(--gold); color: var(--ink-900); }
:focus-visible { outline: 1px solid var(--gold-deep); outline-offset: 4px; }
.section--dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: var(--gold); }

/* Skip link: hidden by moving it up, not 9999px sideways — in a right-to-left
   page a far-left element makes the whole document scroll ten thousand
   pixels wide, which is what the Arabic pages were doing. */
.skip-link { left: 12px; right: auto; top: 0; transform: translateY(-140%); transition: transform .3s var(--ease-out); }
.skip-link:focus { left: 12px; top: 12px; transform: none; }
[dir="rtl"] .skip-link, [dir="rtl"] .skip-link:focus { left: auto; right: 12px; }
[dir="rtl"] .langsw__list { left: 0; right: auto; }

/* Chinese: no fake italics on characters that have none, and a CJK face with
   real weights for display lines (Latin in the line still uses the serif). */
:root:lang(zh) {
  --font-serif: "Yanfeng Serif", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif;
}
:root:lang(zh) em, :root:lang(zh) i, :root:lang(zh) .hero h1 em { font-style: normal; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3, :lang(zh) .display { font-weight: 400; letter-spacing: .01em; line-height: 1.2; }
:lang(zh) .hero h1, :lang(zh) .hero .display { line-height: 1.16; }
:lang(zh) .eyebrow, :lang(zh) .mono, :lang(zh) .tlink, :lang(zh) .btn { letter-spacing: .08em; }
:root:lang(ar) em, :root:lang(ar) i, :root:lang(ar) .hero h1 em { font-style: normal; }
:lang(ar) .eyebrow, :lang(ar) .mono, :lang(ar) .tlink, :lang(ar) .btn, :lang(ar) .brand__tag { letter-spacing: 0; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3, :lang(ar) .display { line-height: 1.3; font-weight: 500; letter-spacing: 0; }

/* 03 · TYPE --------------------------------------------------------------- */
h1, h2, h3,
.display, .section-head h2, .page-hero h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.04;
  color: var(--ink-900);
  font-variant-numeric: lining-nums;
}
h1 { font-size: clamp(40px, 4.6vw, 68px); }
h2 { font-size: clamp(34px, 3.6vw, 56px); }
h3 { font-size: clamp(22px, 1.7vw, 27px); line-height: 1.15; letter-spacing: -.005em; }
h4, h5 {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -.005em;
  font-size: 15.5px; line-height: 1.35; color: var(--ink-900);
}
h1 em, h2 em, h3 em, .display em { font-style: italic; font-weight: 400; color: var(--signal); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4,
.cta-band h2, .page-hero h1 { color: var(--ivory); }

.display { font-size: clamp(48px, 7vw, 108px); line-height: .96; letter-spacing: -.02em; font-weight: 500; }

.lede { font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.7; color: var(--ink-400); font-weight: 400; }
.section--dark .lede, .cta-band p { color: var(--ink-300); }

.eyebrow, .eyebrow--light {
  font: var(--label); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--signal); gap: 14px; margin-bottom: 20px;
}
.eyebrow::before, .eyebrow--light::before {
  width: 34px; height: 1px; background: var(--metal);
}
.eyebrow--light { color: var(--gold); }

.mono { font-family: var(--font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums; }

/* 04 · LAYOUT ------------------------------------------------------------- */
.wrap { max-width: var(--wrap); padding-inline: var(--gutter); }
.section { padding-block: clamp(84px, 9vw, 148px); }
.section--tight { padding-block: clamp(64px, 6.5vw, 104px); }
@media (min-width: 1100px) {
  .section { padding-block: 140px; }
  .section--tight { padding-block: 100px; }
  .wrap { padding-inline: var(--gutter); }
}
.section--mist { background: var(--mist); }
.section--line-top { border-top: 1px solid var(--line); }
.section--dark { background: var(--obsidian); color: var(--ink-200); }

/* Section heads: a serif statement, a quiet lede, no counter. */
.section-head { margin-bottom: clamp(44px, 5vw, 76px); gap: clamp(28px, 5vw, 96px); align-items: end; }
.section-head__no { display: none; }
.section-head__text { max-width: 64ch; }
.section-head h2 { font-size: clamp(36px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.018em; margin-bottom: 22px; }
.section-head__text > p:last-child { font-size: 17px; color: var(--ink-400); max-width: 58ch; line-height: 1.7; }
.section--dark .section-head__text > p:last-child { color: var(--ink-300); }

/* The grain that main.css lays over dark bands is kept, a touch quieter. */
.hero::after, .section--dark::after, .cta-band::after, .page-hero::after, .site-footer::after { opacity: .028; }

/* 05 · BUTTONS & LINKS ---------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-900);
  --btn-fg: var(--ivory);
  min-height: 52px; padding: 0 28px; gap: 14px;
  border-radius: 999px;
  font: 500 12px/1 var(--font-sans);
  letter-spacing: .16em; text-transform: uppercase;
  transition: transform .5s var(--ease-out), background .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease), box-shadow .6s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; }
.btn--sm { min-height: 42px; padding: 0 20px; font-size: 11px; letter-spacing: .15em; }

/* The champagne button: a metal sheen that travels across on hover. */
.btn--signal {
  --btn-bg: transparent; --btn-fg: #17130C;
  background: var(--metal); background-size: 220% 100%; background-position: 0% 0;
  border: 0;
  box-shadow: 0 14px 34px -18px rgba(154, 119, 67, .85), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: background-position 1.1s var(--ease-out), transform .5s var(--ease-out), box-shadow .6s var(--ease-out);
}
.btn--signal:hover {
  --btn-bg: transparent;
  background-position: 100% 0;
  box-shadow: 0 20px 40px -18px rgba(154, 119, 67, .95), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.btn--signal::before { display: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink-900); border: 1px solid var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--ink-900); --btn-fg: var(--ivory); border-color: var(--ink-900); }
.section--dark .btn--ghost, .site-footer .btn--ghost { --btn-fg: var(--ivory); }
.section--dark .btn--ghost:hover { --btn-bg: var(--ivory); --btn-fg: var(--ink-900); border-color: var(--ivory); }
.btn--ghost-light { --btn-bg: transparent; --btn-fg: var(--ivory); border: 1px solid rgba(242, 238, 230, .34); }
.btn--ghost-light:hover { background: transparent; border-color: var(--gold); --btn-fg: var(--gold-hi); }

.tlink {
  font: 500 12px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-900); padding-bottom: 6px;
  background-image: var(--metal); background-size: 34px 1px; background-position: 0 100%;
  transition: background-size .6s var(--ease-out), color .3s;
}
.tlink:hover { background-size: 100% 1px; color: var(--signal); }
.section--dark .tlink, .site-footer .tlink { color: var(--ivory); }

.chip {
  font: 500 10.5px/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase;
  border-radius: 999px; padding: 7px 12px; background: transparent; border: 1px solid var(--line-strong); color: var(--ink-500);
}
.chip--solid { background: var(--ink-900); color: var(--ivory); border-color: var(--ink-900); }

/* The technical-drawing corner ticks belong to the old blueprint look. */
.ticked::before, .ticked::after { display: none; }

/* 06 · TOP BAR ------------------------------------------------------------ */
.topbar {
  background: #070809; color: var(--ink-300);
  border-bottom: 1px solid rgba(242, 238, 230, .07);
  font-size: 11.5px; letter-spacing: .04em;
}
.topbar__inner { min-height: 36px; }
.topbar__item.mono { font-size: 10.5px; letter-spacing: .24em; color: rgba(242, 238, 230, .5); }
.topbar__item svg { opacity: .5; color: var(--gold); }
.topbar a:hover { color: var(--gold-hi); }

/* 07 · HEADER ------------------------------------------------------------- */
.site-header,
.site-header.is-stuck {
  background: rgba(14, 15, 17, .92);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  border-top: 0;
  border-bottom: 1px solid rgba(242, 238, 230, .08);
  color: var(--ivory);
  box-shadow: none;
}
.site-header.is-stuck { background: rgba(14, 15, 17, .86); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .8); }
.header__inner, .topbar__inner { max-width: 1680px; }
.header__inner { min-height: var(--header-h); gap: clamp(18px, 2vw, 36px); transition: min-height .5s var(--ease-out); }
.site-header.is-compact .header__cta { margin-left: auto; }
.site-header.is-stuck .header__inner { min-height: calc(var(--header-h) - 12px); }

/* Brand lock-up: the emblem, then the name set in the display face. */
.brand { gap: 14px; }
.brand__emblem { position: relative; display: block; width: var(--emblem, 46px); height: var(--emblem, 46px); flex: none; }
.brand__emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.brand__emblem .brand__mark-svg { inset: 17%; width: 66%; height: 66%; }
.brand__ring { fill: none; stroke: url(#yf-gold); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.brand__emblem--disc .brand__disc { fill: var(--obsidian); }
.brand__text { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.brand__name {
  font-family: var(--font-serif); font-weight: 500; font-size: 21px; line-height: 1;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ivory);
}
.brand__tag {
  font: 500 8.5px/1 var(--font-sans); letter-spacing: .42em; text-transform: uppercase;
  color: rgba(242, 238, 230, .55);
}
.brand__mark { background: var(--ivory); color: var(--ink-900); font-family: var(--font-serif); }
.site-header .brand--image .brand__logo { filter: none; }

/* Navigation */
.nav > ul { gap: 0; }
.nav > ul > li > a {
  position: relative; padding: 12px clamp(7px, .62vw, 11px);
  font: 400 13px/1 var(--font-sans); letter-spacing: .015em;
  color: rgba(242, 238, 230, .78); background: none; border-radius: 0;
}
.nav > ul > li > a::before {
  content: ""; position: absolute; left: clamp(7px, .62vw, 11px); right: clamp(7px, .62vw, 11px); bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .55s var(--ease-out);
}
.nav > ul > li > a:hover,
.nav > ul > li.current-menu-item > a,
.nav > ul > li.current-menu-parent > a,
.nav > ul > li.current-menu-ancestor > a { color: var(--ivory); background: none; }
.nav > ul > li > a:hover::before,
.nav > ul > li.current-menu-item > a::before,
.nav > ul > li.current-menu-parent > a::before,
.nav > ul > li.current-menu-ancestor > a::before { transform: scaleX(1); transform-origin: 0 50%; }
.nav .menu-item-has-children > a::after { opacity: .45; border-width: 0 1px 1px 0; }
.nav > ul > li > a { white-space: nowrap; }

/* When the menu does not fit — long menus, long translations — the header
   folds into the menu button instead of wrapping words onto three lines.
   main.js measures and sets .is-compact; no fixed breakpoint can know how
   long the client's menu or the Russian labels will be. */
.site-header.is-compact .nav { display: none; }
.site-header.is-compact .burger { display: block; margin-left: auto; }

.nav ul ul {
  background: rgba(16, 17, 20, .98); border: 1px solid rgba(242, 238, 230, .1);
  border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
  padding: 10px; min-width: 248px;
}
.nav ul ul a { color: rgba(242, 238, 230, .74); font-size: 13.5px; padding: 11px 14px; transition: color .3s, background .3s, padding .4s var(--ease-out); }
.nav ul ul a:hover { background: rgba(242, 238, 230, .05); color: var(--ivory); padding-left: 20px; }

.header__cta .btn--signal {
  background: transparent; color: var(--gold-hi); border: 1px solid rgba(201, 169, 110, .55);
  box-shadow: none; min-height: 42px;
}
.header__cta .btn--signal:hover { background: var(--metal); background-size: 100% 100%; color: #17130C; border-color: transparent; }

.burger { border: 1px solid rgba(242, 238, 230, .2); border-radius: 999px; width: 46px; height: 46px; }
.burger span { background: var(--ivory); height: 1px; left: 14px; width: 16px; }
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }

/* Mega menu */
.mega {
  background: rgba(14, 15, 17, .985);
  border-top: 1px solid rgba(242, 238, 230, .08); border-bottom: 1px solid rgba(201, 169, 110, .25);
  box-shadow: 0 50px 80px -40px rgba(0, 0, 0, .85);
}
.mega__inner { padding-block: 34px 28px; }
.mega__grid { gap: 10px; }
.mega__card { padding: 12px; border-radius: var(--radius); }
.mega__card:hover { background: rgba(242, 238, 230, .04); }
.mega__thumb { border: 0; border-radius: var(--radius); background: #fff; margin-bottom: 14px; }
.mega__no { display: none; }
.mega__name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--ivory); letter-spacing: 0; margin-bottom: 6px; }
.mega__tag { color: var(--ink-300); font-size: 12.5px; }
.mega__count { color: var(--gold); letter-spacing: .2em; font-size: 9.5px; margin-top: 10px; }
.mega__foot { border-top: 1px solid rgba(242, 238, 230, .08); }
.mega__note { color: var(--ink-300); }
.mega .tlink { color: var(--ivory); }

/* Mobile navigation: a full obsidian sheet, set in the display face */
.mobile-nav {
  background: var(--obsidian); color: var(--ivory);
  padding: calc(var(--header-h) + 28px) var(--gutter) 48px;
}
.mobile-nav > ul > li { border-bottom: 1px solid rgba(242, 238, 230, .09); }
.mobile-nav a { color: var(--ivory); font-family: var(--font-serif); font-size: 28px; font-weight: 500; padding: 14px 0; letter-spacing: 0; }
.mobile-nav ul ul a { font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-300); }
.mobile-nav.is-open > ul > li { animation: mnavIn .7s var(--ease-out) both; }
.mobile-nav.is-open > ul > li:nth-child(2) { animation-delay: .04s; }
.mobile-nav.is-open > ul > li:nth-child(3) { animation-delay: .08s; }
.mobile-nav.is-open > ul > li:nth-child(4) { animation-delay: .12s; }
.mobile-nav.is-open > ul > li:nth-child(5) { animation-delay: .16s; }
.mobile-nav.is-open > ul > li:nth-child(6) { animation-delay: .2s; }
.mobile-nav.is-open > ul > li:nth-child(7) { animation-delay: .24s; }
.mobile-nav.is-open > ul > li:nth-child(n+8) { animation-delay: .28s; }
@keyframes mnavIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mnav-collections a { border-bottom-color: rgba(242, 238, 230, .08); }
.mnav-collections img { border: 0; background: #fff; border-radius: var(--radius); }
.mnav-collections b { color: var(--ivory); font-family: var(--font-sans); font-size: 14px; }
.mnav-collections em { color: var(--gold); letter-spacing: .16em; }
.mobile-nav .btn--ghost { --btn-fg: var(--ivory); border-color: rgba(242, 238, 230, .25); text-transform: none; letter-spacing: .02em; }

/* 08 · HERO --------------------------------------------------------------- */
.hero { background: var(--obsidian); color: var(--ink-200); --hero-accent: var(--gold); }
.hero__grid-layer, .hero > .hero__grid-layer { display: none !important; }

/* Full-bleed cinema frame on a desktop; main.css + the Customizer's phone
   rules (emitted after this file) take over on touch screens and narrow
   windows, where the photograph sits whole above the words. */
.hero__inner { padding-block: clamp(56px, 5vw, 96px) clamp(96px, 9vw, 150px); }
.hero__grid { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: end; }
.hero__copy { max-width: min(860px, 100%); }
.hero h1, .hero .display {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6.1vw, 100px);
  line-height: .96; letter-spacing: -.022em; font-weight: 500;
  margin: 0 0 28px; max-width: 13.5ch;
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--hero-accent); }
.hero__lede { font-size: clamp(16.5px, 1.2vw, 18.5px); line-height: 1.7; max-width: 52ch; margin-bottom: 36px; font-weight: 400; }
.hero__actions { gap: 14px; }
.hero .eyebrow, .hero .eyebrow--light { color: var(--gold); letter-spacing: .32em; margin-bottom: 28px; }

/* Slow push-in on the photograph, a curtain on the headline */
.hero__slide .hero__bg img { transform: scale(1.1); transition: transform 10s cubic-bezier(.2, .6, .25, 1), opacity 1.4s var(--ease-out); }
.hero__slide.is-active .hero__bg img { transform: scale(1); }
.hero__slide { transition: opacity 1.3s var(--ease-out), visibility 1.3s; }
.hero__slide [data-anim] { transform: translateY(22px); transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out); }
.hero__slide [data-anim="2"] {
  opacity: 1; transform: translateY(.35em);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.35s var(--ease-io), transform 1.5s var(--ease-out);
}
.hero__slide.is-active [data-anim="2"] { clip-path: inset(-10% -5% -12% -5%); transform: none; transition-delay: .18s; }
.hero__slide.is-active [data-anim="1"] { transition-delay: .1s; }
.hero__slide.is-active [data-anim="3"] { transition-delay: .55s; }
.hero__slide.is-active [data-anim="4"] { transition-delay: .7s; }

/* Controls: counter, progress bars that are the timer, two round arrows */
.hero__controls {
  margin-top: 0; position: absolute; left: 0; right: 0; bottom: 40px; z-index: 4;
  padding-bottom: 0; align-items: center;
}

.hero__dots { gap: 14px; align-items: center; }
.hero__dot { width: 84px; gap: 12px; }
.hero__dot-bar { height: 1px; background: rgba(242, 238, 230, .2); }
.hero__dot-fill { background: var(--metal); background-size: 260px 1px; }
.hero__dot-no { font: 500 11px/1 var(--font-serif); font-size: 14px; letter-spacing: .08em; color: rgba(242, 238, 230, .45); font-variant-numeric: lining-nums; }
.hero__dot.is-active .hero__dot-no, .hero__dot:hover .hero__dot-no { color: var(--ivory); }
.hero__arrows { gap: 10px; }
.hero__arrow {
  width: 52px; height: 52px; border-radius: 999px; border-color: rgba(242, 238, 230, .24);
  transition: border-color .4s, color .4s, background .4s, transform .5s var(--ease-out);
}
.hero__arrow:hover { background: transparent; border-color: var(--gold); color: var(--gold-hi); }

/* The figures run along the foot of the hero, under one champagne hairline */
.hero__statsbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; }
.hero__statsbar .wrap { position: relative; }
.hero__statsbar .wrap::before {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 1px;
  background: var(--metal); transform-origin: 0 50%; transform: scaleX(0);
  animation: yfDraw 1.8s var(--ease-io) .5s forwards;
}
.hero__figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero__figure { padding: 22px 24px 26px; border-left: 1px solid rgba(242, 238, 230, .1); }
.hero__figure:first-child { padding-left: 0; border-left: 0; }
.hero__figure b {
  display: block; font: 400 clamp(30px, 2.8vw, 44px)/1 var(--font-serif); color: var(--ivory);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
}
.hero__figure span { display: block; margin-top: 10px; font: var(--label); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 238, 230, .62); }
@keyframes yfDraw { to { transform: scaleX(1); } }

/* The old in-slide stat panel is replaced by the bar above */
.hero__slide .hero__stats { display: none; }

/* The ribbon becomes a quiet index line */
.hero__ribbon { display: none; }


/* Room under the copy for the controls and the figures — on a desktop only;
   on touch screens the Customizer's phone rules lay the hero out instead. */
@media (min-width: 1401px), (min-width: 1025px) and (pointer: fine) {
  /* The cinema frame fills the window under the header, and no more. */
  .hero--slider .hero__slide, .hero:not(.hero--slider) {
    min-height: clamp(640px, calc(100svh - var(--header-h) - 36px), 980px);
  }
  .hero--slider .hero__slide { display: flex; flex-direction: column; justify-content: flex-end; }
  .hero:not(.hero--slider) { display: flex; flex-direction: column; justify-content: flex-end; }
  .hero--has-figures .hero__controls { bottom: 118px; }
  .hero--slider .hero__inner { padding-bottom: 150px; }
  .hero--has-figures .hero__inner { padding-bottom: 214px; }
  .hero:not(.hero--slider):not(.hero--has-figures) .hero__inner { padding-bottom: clamp(80px, 8vw, 120px); }
}

/* Interior page hero */
.page-hero {
  background: var(--obsidian); color: var(--ink-200);
  padding-block: clamp(76px, 8vw, 128px) clamp(64px, 6.5vw, 104px);
}
.page-hero__veil {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C9A96E'%3E%3Ccircle cx='50' cy='50' r='49.6' stroke-width='.12' stroke-opacity='.55'/%3E%3Ccircle cx='50' cy='50' r='38' stroke-width='.08' stroke-opacity='.35'/%3E%3Ccircle cx='50' cy='50' r='26.5' stroke-width='.06' stroke-opacity='.22'/%3E%3C/g%3E%3C/svg%3E") no-repeat calc(100% + 140px) 50% / min(62vw, 760px) auto,
    radial-gradient(70% 120% at 92% -10%, rgba(201, 169, 110, .16), transparent 60%),
    radial-gradient(50% 80% at 0% 110%, rgba(242, 238, 230, .04), transparent 60%);
}
@media (max-width: 760px) { .page-hero__veil { background-position: calc(100% + 120px) 30%, 0 0, 0 0; background-size: 420px auto, auto, auto; } }
.page-hero h1 { font-size: clamp(44px, 5.6vw, 88px); line-height: 1; letter-spacing: -.02em; max-width: 16ch; margin-bottom: 24px; }
.page-hero h1 { animation: yfRise 1.2s var(--ease-out) both; }
.page-hero p { color: var(--ink-300); font-size: 17.5px; line-height: 1.7; max-width: 58ch; animation: yfRise 1.2s var(--ease-out) .12s both; }
.page-hero .wrap::after {
  content: ""; display: block; height: 1px; margin-top: clamp(40px, 5vw, 64px);
  background: linear-gradient(90deg, var(--gold) 0, rgba(201, 169, 110, .3) 30%, rgba(242, 238, 230, .08) 60%, transparent);
  transform-origin: 0 50%; animation: yfDraw 1.6s var(--ease-io) .3s both;
}
@keyframes yfRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.crumbs, .crumbs a { font: var(--label); font-size: 10.5px; letter-spacing: .24em; color: var(--ink-400); }
.crumbs { gap: 10px; }
.page-hero .crumbs { margin-bottom: 28px; }
section > .wrap > .crumbs:only-child { margin: 0; }
.crumbs a:hover { color: var(--signal); }
.crumbs span[aria-current] { color: var(--signal); }
/* On the dark page heads the trail turns ivory and champagne. */
.page-hero .crumbs, .page-hero .crumbs a, .crumbs--light, .crumbs--light a { color: rgba(242, 238, 230, .5); }
.page-hero .crumbs a:hover, .crumbs--light a:hover { color: var(--gold-hi); }
.page-hero .crumbs span[aria-current], .crumbs--light span[aria-current] { color: var(--gold); }

/* 09 · HOME MODULES ------------------------------------------------------- */
/* Collections: uniform plates, photographs first */
.ccollections { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(16px, 2vw, 28px); }
.ccollections .ccard:first-child { grid-column: auto; grid-row: auto; }
.ccollections .ccard:first-child .ccard__media { aspect-ratio: var(--img-ratio); flex: none; }
.ccollections .ccard:first-child h3 { font-size: clamp(26px, 2.1vw, 32px); }
.ccollections .ccard:first-child .ccard__body { padding: 24px 2px 10px; flex: 1; }
.ccollections .ccard:first-child .ccard__body p { font-size: 14.5px; max-width: none; }
.ccollections .ccard:first-child .ccard__media { min-height: 0; height: auto; }

.ccard {
  border: 0; border-radius: var(--radius); background: transparent; overflow: visible;
  box-shadow: none;
}
.ccard:hover { transform: none; box-shadow: none; border-color: transparent; }
.ccard::after { display: none; }
.ccard__media { border-radius: var(--radius); background: #fff; position: relative; }
.ccard__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(20, 21, 24, .07); border-radius: inherit;
}
.ccard__media img { transition: transform 1.4s var(--ease-out), opacity .6s var(--ease-out); }
.ccard:hover .ccard__media img { transform: scale(1.045); }
.ccard__body { padding: 24px 2px 10px; background: transparent; }
.ccollections .ccard .ccard__body { padding: 24px 2px 10px; }
.ccard__no { display: none; }
.ccard h3 { font-size: clamp(26px, 2.1vw, 32px); margin: 0 0 8px; transition: color .4s; }
.ccard:hover h3 { color: var(--signal-ink); }
.ccard p { font-size: 14.5px; color: var(--ink-400); line-height: 1.6; }
.ccard__foot {
  background: transparent; border-top: 1px solid var(--line); padding: 14px 2px 0;
  font: var(--label); font-size: 10.5px; letter-spacing: .22em; color: var(--ink-400); position: relative;
}
.ccard__foot::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--metal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-out);
}
.ccard:hover .ccard__foot::before { transform: scaleX(1); }
.ccard__foot span:last-child { color: var(--signal); }
.uncover::after { background: var(--obsidian); }

/* Why buyers stay */
.vcard {
  background: transparent; border: 0; border-top: 1px solid var(--line-strong);
  border-radius: 0; padding: 30px 0 8px;
}
.vcard:hover { transform: none; box-shadow: none; border-color: var(--gold-deep); }
.vcard__no { display: none; }
.vcard__icon { width: 30px; height: 30px; color: var(--gold-deep); margin-bottom: 22px; stroke-width: 1.2; }
.vcard h3 { font-size: 25px; margin-bottom: 12px; }
.vcard p { font-size: 14.5px; line-height: 1.7; color: var(--ink-400); }
.reasons { gap: 18px 48px !important; }

.checklist { gap: 14px; }
.checklist li { font-size: 15px; color: var(--ink-500); }
.checklist svg { color: var(--gold-deep); }
.section--dark .checklist li, .section--dark .checklist li span { color: var(--ink-300) !important; }
.section--dark .checklist svg { color: var(--gold); }

/* How we work — a real sequence, so the step numbers stay */
.steps { border-top: 1px solid var(--line-strong); }
.steps__item { padding: 34px 28px 0; border-right: 1px solid var(--line); }
.steps__item::before { height: 1px; background: var(--metal); top: -1px; transition: width 1.2s var(--ease-io); }
.steps__no { font: 500 13px/1 var(--font-serif); font-size: 15px; letter-spacing: .14em; color: var(--signal); font-variant-numeric: lining-nums; }
.steps__item h4 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: 0; line-height: 1.12; margin: 22px 0 12px; }
.steps__item p { font-size: 14.5px; line-height: 1.7; color: var(--ink-400); }

/* Figures band */
.statband { background: transparent; gap: 0; }
.statband__i { background: transparent; padding: clamp(48px, 5.4vw, 78px) clamp(20px, 2.4vw, 36px); border-left: 1px solid rgba(242, 238, 230, .08); }
.statband__i:first-child { border-left: 0; }
.statband__i b {
  font: 400 clamp(48px, 5.4vw, 84px)/.95 var(--font-serif); color: var(--ivory);
  letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums;
}
.statband__i span { margin-top: 18px; font: var(--label); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-300); }
.statband__i:hover b { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Logo wall */
.logos { border: 0; border-top: 1px solid var(--line); border-radius: 0; gap: 0; }
.logos__item { background: transparent; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 112px; }
.logos__item span { font: var(--label); font-size: 10.5px; letter-spacing: .22em; color: var(--ink-400); text-align: center; }

/* Projects */
.case-card { border-radius: var(--radius); background: var(--obsidian); }
.case-card__img { aspect-ratio: 4 / 5; }
.case-card__img img { opacity: .82; transition: transform 1.6s var(--ease-out), opacity .8s; }
.case-card:hover .case-card__img img { transform: scale(1.05); opacity: .95; }
.case-card__body { padding: 28px; background: linear-gradient(to top, rgba(11, 12, 14, .94) 10%, rgba(11, 12, 14, .5) 55%, transparent); }
.case-card__body h3 { font-size: clamp(24px, 2vw, 30px); color: var(--ivory); margin: 8px 0 0; }
.case-card__body span { font: var(--label); font-size: 10.5px; letter-spacing: .24em; color: var(--gold); }

/* Insights */
.post-card { gap: 18px; }
.post-card__img { aspect-ratio: 3 / 2; border-radius: var(--radius); }
.post-card__img img { transition: transform 1.4s var(--ease-out); }
.post-card__meta { font: var(--label); font-size: 10.5px; letter-spacing: .22em; color: var(--signal); }
.post-card h3 { font-size: clamp(24px, 1.9vw, 29px); line-height: 1.12; transition: color .4s; }
.post-card:hover h3 { color: var(--signal-ink); }
.post-card p { font-size: 14.5px; line-height: 1.7; }

/* Marquee: the collection names, slow, in italic serif */
.marquee { --marquee-speed: 70s; background: var(--obsidian); border-block: 1px solid rgba(242, 238, 230, .08); padding-block: 34px; }
.marquee__item { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(30px, 3.6vw, 56px); color: rgba(242, 238, 230, .82); gap: clamp(28px, 3vw, 48px); padding-inline: clamp(14px, 1.5vw, 24px); }
.marquee__item::after { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); border-radius: 0; }

/* Inside the factory */
.fac__media { border-radius: var(--radius); }
.fac__steps li { grid-template-columns: 56px minmax(0, 1fr); padding: 26px 0; border-top: 1px solid var(--line); }
.fac__no { font: 500 15px/1 var(--font-serif); letter-spacing: .1em; color: var(--signal); padding-top: 6px; font-variant-numeric: lining-nums; }
.fac__steps h3 { font-size: 24px; margin-bottom: 8px; }
.fac__steps p { font-size: 14.5px; line-height: 1.7; }
.fac__cap { border-block: 1px solid var(--line-strong); padding: 30px 0; }
.fac__cap b { font-family: var(--font-serif); font-size: clamp(32px, 3vw, 46px); font-weight: 400; letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.fac__cap span { font: var(--label); font-size: 10px; letter-spacing: .2em; color: var(--ink-400); margin-top: 12px; }

/* Contact page: the form gets the wider column, until the screen is narrow
   (this used to be an inline style, which no media query could undo, so the
   form ran off the side of every phone). */
.split--contact { grid-template-columns: .85fr 1.15fr; align-items: start; }
@media (max-width: 1024px) { .split--contact { grid-template-columns: minmax(0, 1fr); } }

/* Split feature */
.split__media img { border-radius: var(--radius); }
.split__media::after { border-color: rgba(20, 21, 24, .06); }
.split__badge { background: var(--obsidian); border-radius: var(--radius); border-top: 1px solid var(--gold); }
.split__badge b { font-family: var(--font-serif); font-weight: 400; font-size: 40px; }

/* Final call to action, with its form */
#inquiry.section--dark { padding-block: clamp(96px, 10vw, 160px); overflow: hidden; }
#inquiry.section--dark::before {
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; height: 140%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(201, 169, 110, .14), transparent 70%);
}
.cta-band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(40px, 6vw, 110px); padding-block: 0; align-items: center; }
.cta-band__inner h2 { font-size: clamp(42px, 5vw, 76px); line-height: 1; color: var(--ivory); margin-bottom: 26px; }
.cta-band__inner > div > p { color: var(--ink-300); font-size: 17px; line-height: 1.75; max-width: 50ch; }
.cta-band { background: var(--obsidian); }
.cta-band h2 { color: var(--ivory); }

/* Quote */
.quote { border-left: 1px solid var(--gold-deep); }
.quote blockquote { font-family: var(--font-serif); font-size: clamp(24px, 2.2vw, 32px); font-weight: 400; font-style: italic; line-height: 1.35; }
.pullquote { font-family: var(--font-serif); border-left-width: 1px; border-left-color: var(--gold-deep); }

/* 10 · CATALOGUE ---------------------------------------------------------- */
.filters__title { font: var(--label); font-size: 10.5px; letter-spacing: .24em; color: var(--signal); }
.filters li a { font-size: 14.5px; color: var(--ink-500); padding: 10px 12px; border-radius: var(--radius); }
.filters li a:hover { background: rgba(20, 21, 24, .04); color: var(--ink-900); }
.filters li.is-active a { background: var(--ink-900); color: var(--ivory); }
.filters li.is-active a em { color: var(--gold); opacity: 1; }
.filters li a em { font-family: var(--font-sans); font-size: 11px; font-variant-numeric: tabular-nums; }
.catalog__bar { border-bottom: 1px solid var(--line-strong); }
.catalog__count { font: var(--label); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-400); }
.viewtoggle { border-color: var(--line-strong); border-radius: 999px; }
.viewtoggle button { padding: 9px 14px; }
.viewtoggle button.is-active { background: var(--ink-900); color: var(--ivory); }

/* The product card. The photograph frame is exactly the live site's: same
   ratio, same fit, same padding — only what surrounds it has changed. */
.pgrid { gap: clamp(16px, 1.8vw, 26px); }
.pcard {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out), border-color .5s;
}
.pcard:hover { transform: translateY(-6px); border-color: rgba(154, 119, 67, .4); box-shadow: 0 40px 70px -46px rgba(11, 12, 14, .55); }
.pcard::after { display: none; }
.pcard__media { background: #fff; background-image: none; border-bottom: 1px solid var(--line); }
.pcard__media img { mix-blend-mode: normal; transition: transform 1.3s var(--ease-out), opacity .6s var(--ease-out); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__sku {
  top: 14px; left: 14px; background: rgba(255, 255, 255, .9); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 11px;
  font: 500 10px/1 var(--font-sans); letter-spacing: .16em; color: var(--ink-700); font-variant-numeric: lining-nums;
}
.pcard__flag { top: 14px; right: 14px; border-radius: 999px; padding: 6px 11px; background: var(--ink-900); color: var(--gold); font: 500 10px/1 var(--font-sans); letter-spacing: .16em; }
.pcard__body { padding: 24px 24px 20px; }
.pcard__cat { font: var(--label); font-size: 10px; letter-spacing: .24em; color: var(--signal); margin-bottom: 12px; }
.pcard h3 { font-family: var(--font-serif); font-size: clamp(23px, 1.75vw, 27px); font-weight: 500; line-height: 1.12; letter-spacing: 0; margin-bottom: 12px; }
.pcard h3 a { transition: color .35s; }
.pcard:hover h3 a { color: var(--signal-ink); }
.pcard__excerpt { font-size: 14px; line-height: 1.65; color: var(--ink-400); }
.pcard__specs { border-top: 1px solid var(--line); padding-top: 14px; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.pcard__spec { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.pcard__spec dt { font: var(--label); font-size: 9.5px; letter-spacing: .2em; color: var(--ink-400); margin: 0; flex: none; }
.pcard__spec dd { font-size: 13.5px; font-weight: 500; color: var(--ink-800); font-variant-numeric: lining-nums; text-align: right; min-width: 0; }
.pcard__foot { background: transparent; border-top: 1px solid var(--line); padding: 14px 24px; }
.pcard__foot .tlink { font-size: 10.5px; }
.pcard__quote {
  font: 500 10px/1 var(--font-sans); letter-spacing: .18em; color: var(--ink-900);
  border: 1px solid var(--line-strong); border-radius: 999px; padding: 9px 14px; background: transparent;
  transition: background .4s, color .4s, border-color .4s;
}
.pcard__quote:hover { background: var(--ink-900); border-color: var(--ink-900); color: var(--gold-hi); }

.ptable thead th { font: var(--label); font-size: 10px; letter-spacing: .2em; color: var(--ink-400); border-bottom: 1px solid var(--line-strong); }
.ptable tbody tr:hover { background: rgba(255, 255, 255, .7); }
.ptable__thumb { background: #fff; border-color: var(--line); }
.ptable__name { font-family: var(--font-serif); font-size: 19px; font-weight: 500; }
.ptable__sku { font-family: var(--font-sans); letter-spacing: .1em; }

/* 11 · PRODUCT PAGE ------------------------------------------------------- */
.product-top { gap: clamp(36px, 5vw, 96px); }
.gallery__main { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: 0 30px 60px -48px rgba(11, 12, 14, .5); }
.gallery__main img { transition: opacity .5s var(--ease-out), transform 1s var(--ease-out); }
.gallery__thumb { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .35s, transform .5s var(--ease-out); }
.gallery__thumb:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.gallery__thumb.is-active { border-color: var(--gold-deep); box-shadow: 0 0 0 1px var(--gold-deep); }

.product-meta__head { border-bottom: 1px solid var(--line-strong); padding-bottom: 30px; margin-bottom: 8px; }
.product-meta__sku { gap: 8px; margin-bottom: 24px; }
.product-meta h1 { font-size: clamp(42px, 4.4vw, 68px); line-height: 1; letter-spacing: -.018em; margin-bottom: 20px; }
.product-meta__lede { font-size: 17px; line-height: 1.7; color: var(--ink-400); }
.speclist { margin-bottom: 36px; }
.speclist__row { grid-template-columns: 40% 1fr; padding: 15px 0; border-bottom: 1px solid var(--line); }
.speclist__row dt { font: var(--label); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-400); padding-top: 3px; }
.speclist__row dd { font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink-900); font-variant-numeric: lining-nums tabular-nums; }

/* Finish codes on the product page become swatches */
.finchips { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.finchip { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1 var(--font-sans); letter-spacing: .08em; cursor: default; }
.finchip i {
  width: 18px; height: 18px; border-radius: 50%; flex: none; background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 6px 8px -4px rgba(255, 255, 255, .55), 0 1px 2px rgba(0, 0, 0, .15);
  transition: transform .4s var(--ease-out);
}
.finchip:hover i { transform: scale(1.18); }

.rfq-box {
  background: var(--obsidian); border: 0; border-radius: var(--radius); padding: 30px;
  color: var(--ink-300); position: relative; overflow: hidden;
  --signal: var(--gold);
}
.rfq-box::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--metal); }
.rfq-box h4 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; color: var(--ivory); margin-bottom: 10px; }
.rfq-box p { color: var(--ink-300); font-size: 14.5px; line-height: 1.7; margin-bottom: 22px; }
.rfq-box .btn--ghost { --btn-fg: var(--ivory); border-color: rgba(242, 238, 230, .26); }
.rfq-box .btn--ghost:hover { --btn-bg: var(--ivory); --btn-fg: var(--ink-900); border-color: var(--ivory); }

.tabs { border-top: 0; margin-top: clamp(80px, 8vw, 128px); }
.tabs__nav { border-bottom: 1px solid var(--line-strong); gap: clamp(18px, 3vw, 44px); }
.tabs__nav button { padding: 20px 0; font: 500 11.5px/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-400); }
.tabs__nav button::after { height: 1px; background: var(--metal); }
.tabs__nav button.is-active { color: var(--ink-900); }
.tabs__panel { padding-top: 56px; }

.spec-table { font-size: 14.5px; }
.spec-table caption { font: var(--label); font-size: 10.5px; letter-spacing: .22em; color: var(--signal); }
.spec-table thead th { background: var(--ink-900); color: var(--ivory); font: 500 11px/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.spec-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .6); }
.spec-table th, .spec-table td { padding: 15px 16px; }

.dl-item { border-radius: var(--radius); padding: 18px 20px; background: var(--paper); }
.dl-item:hover { border-color: var(--gold-deep); background: #fff; }
.dl-item svg { color: var(--gold-deep); }
.dl-item b { font-size: 15px; font-weight: 500; }
.dl-item span { font-family: var(--font-sans); letter-spacing: .14em; }

.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item__q { font-family: var(--font-serif); font-size: clamp(20px, 1.6vw, 24px); font-weight: 500; padding: 26px 48px 26px 0; transition: color .3s; }
.faq-item__q:hover { color: var(--signal-ink); }
.faq-item__q::after { border-color: var(--gold-deep); top: 34px; border-right-width: 1px; border-bottom-width: 1px; }
.faq-item__a { font-size: 15.5px; line-height: 1.75; color: var(--ink-400); }
.faq-group { border-top: 1px solid var(--line-strong); padding-block: 48px; }
.faq-group__title { font-size: clamp(28px, 2.4vw, 36px); }

/* 12 · EDITORIAL ---------------------------------------------------------- */
.entry { font-size: 17px; line-height: 1.8; color: var(--ink-500); }
.entry h2 { font-size: clamp(32px, 3vw, 44px); margin-top: 64px; margin-bottom: 20px; color: var(--ink-900); }
.entry h3 { font-size: clamp(24px, 2vw, 30px); margin-top: 44px; color: var(--ink-900); }
.entry blockquote { border-left: 1px solid var(--gold-deep); font-family: var(--font-serif); font-style: italic; font-size: 24px; line-height: 1.45; color: var(--ink-800); }
.entry a:not(.btn) { color: var(--signal); text-decoration-color: rgba(127, 97, 47, .4); text-decoration-thickness: 1px; }
.entry a:not(.btn):hover { text-decoration-color: currentColor; }
.entry img { border-radius: var(--radius); }
.entry th { font: var(--label); font-size: 10.5px; letter-spacing: .18em; color: var(--ink-400); }
.pagination .page-numbers { border-radius: 999px; font-family: var(--font-sans); border-color: var(--line-strong); }
.pagination .page-numbers.current { background: var(--ink-900); color: var(--gold-hi); }

/* 13 · FORMS -------------------------------------------------------------- */
textarea, input, select { max-width: 100%; }
.comment-form textarea, .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"] {
  width: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; font-size: 15px;
}
.field > label { font: var(--label); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-400); }
.field > label .req { color: var(--gold-deep); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"],
.field input[type="url"], .field input[type="number"], .field select, .field textarea, .search-field {
  padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: #fff; font-size: 15px;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-deep); box-shadow: 0 0 0 4px rgba(201, 169, 110, .16);
}
.form-card {
  border: 0; border-radius: var(--radius); background: var(--stone); padding: clamp(28px, 3.2vw, 48px);
  box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9);
  position: relative;
}
.form-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--metal); border-radius: var(--radius) var(--radius) 0 0; }
.section--dark .form-card .field > label { color: var(--ink-400); }
.section--dark .form-card { --signal: #7F612F; --line: rgba(20, 21, 24, .11); --line-strong: rgba(20, 21, 24, .22); --muted: var(--ink-400); color: var(--ink-800); }
.form-alert--ok { background: #F1F6EF; border-color: #B9D3B0; color: #2F5B25; }
.form-alert--err { background: #FAF0EC; border-color: #E5BFAE; color: #8A3418; }

.drawer { background: var(--stone); box-shadow: none; transition: transform .6s var(--ease-out), box-shadow .6s; }
.drawer.is-open { box-shadow: -40px 0 80px -40px rgba(0, 0, 0, .6); }
.drawer-backdrop { background: rgba(11, 12, 14, .58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.drawer__head { background: var(--obsidian); border-bottom: 0; padding: 30px; }
.drawer__head::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: var(--metal); }
.drawer__head h3 { font-family: var(--font-serif); font-weight: 500; font-size: 30px; color: var(--ivory); }
.drawer__head p { color: var(--gold); font: var(--label); letter-spacing: .18em; }
.drawer__close { border-color: rgba(242, 238, 230, .2); border-radius: 999px; color: var(--ivory); width: 40px; height: 40px; }
.drawer__close:hover { border-color: var(--gold); color: var(--gold-hi); }
.drawer__body { padding: 30px; }

/* 14 · FOOTER ------------------------------------------------------------- */
.site-footer {
  background: var(--obsidian); color: var(--ink-300); overflow: hidden;
  background-image: none; border-top: 0;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, rgba(201, 169, 110, .4) 60%, transparent);
}
.footer__top { padding-block: clamp(88px, 9vw, 140px) clamp(56px, 6vw, 88px); }
.footer__grid { grid-template-columns: 1.35fr .8fr .9fr 1.5fr; gap: 48px 40px; }
.footer__about { font-size: 14.5px; line-height: 1.75; color: var(--ink-300); margin: 28px 0; max-width: 38ch; }
.footer__col h4 { font: var(--label); font-size: 10.5px; letter-spacing: .26em; color: var(--gold); margin-bottom: 24px; }
.footer__col ul { gap: 13px; }
.footer__col a { font-size: 14.5px; color: rgba(242, 238, 230, .72); transition: color .3s, padding .4s var(--ease-out); }
.footer__col a:hover { color: var(--ivory); }
.footer__col li a:hover { padding-left: 6px; }
.certs span { font: var(--label); font-size: 10px; letter-spacing: .14em; border: 1px solid rgba(242, 238, 230, .14); border-radius: 999px; padding: 7px 12px; color: rgba(242, 238, 230, .66); }
.fcontact__label { font: var(--label); font-size: 10px; letter-spacing: .22em; color: rgba(242, 238, 230, .45); }
.fcontact__label::before { width: 4px; height: 4px; transform: rotate(45deg); }
.fcontact__item a { font-size: 14.5px; color: var(--ivory); }
.fcontact__address, .fcontact__hours { color: var(--ink-300); font-size: 13.5px; border-top-color: rgba(242, 238, 230, .08); }

/* The name, set enormous and almost invisible, under everything */
.footer__word {
  display: block; margin: 0 auto; padding-inline: var(--gutter); max-width: var(--wrap);
  font: 500 calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 5.6)/.78 var(--font-serif);
  letter-spacing: .06em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden;
  background: linear-gradient(180deg, rgba(242, 238, 230, .13), rgba(242, 238, 230, .01) 85%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  user-select: none; pointer-events: none; padding-bottom: 6px;
}
.footer__strip { border-top: 1px solid rgba(242, 238, 230, .08); background: transparent; }
.footer__strip .mono { font-size: 10px; letter-spacing: .22em; color: rgba(242, 238, 230, .4); }
.footer__since { color: var(--gold) !important; }
.footer__bottom { border-top: 1px solid rgba(242, 238, 230, .08); font-size: 12.5px; color: rgba(242, 238, 230, .5); padding-block: 26px; }
.footer__bottom a:hover { color: var(--gold-hi); }
.footer__brand .brand__name { color: var(--ivory); font-size: 24px; }
.footer__brand .brand__emblem { --emblem: 60px; }

.socials a { border-radius: 999px; border-color: rgba(242, 238, 230, .16); }

.totop { border-radius: 999px; background: var(--obsidian); color: var(--gold-hi); width: 46px; height: 46px; box-shadow: 0 0 0 1px rgba(201, 169, 110, .4); }
.totop:hover { background: var(--ink-700); }

/* 15 · CATALOGUE COMPONENTS ----------------------------------------------- */
.ordercode { border-color: var(--line-strong); border-radius: var(--radius); background: var(--paper); }
.ordercode__label { font: var(--label); font-size: 10px; letter-spacing: .22em; color: var(--ink-400); }
.ordercode__cell b { font-family: var(--font-serif); font-weight: 500; font-size: clamp(34px, 3vw, 48px); letter-spacing: 0; font-variant-numeric: lining-nums; }
.ordercode__result { background: var(--obsidian); }
.ordercode__result strong { font-family: var(--font-serif); font-size: 26px; font-weight: 500; letter-spacing: .06em; color: var(--gold-hi); font-variant-numeric: lining-nums; }

.swatches { border: 0; gap: clamp(12px, 1.4vw, 20px); }
.swatch { border: 0; background: transparent; padding: 0; }
.swatch__chip {
  border: 0; border-radius: var(--radius); margin-bottom: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08), 0 20px 40px -30px rgba(0, 0, 0, .5);
  background-image: linear-gradient(160deg, rgba(255, 255, 255, .35), transparent 45%, rgba(0, 0, 0, .18)) !important;
  transition: transform .8s var(--ease-out);
}
.swatch:hover .swatch__chip { transform: translateY(-4px); }
.swatch__code { font-family: var(--font-serif); font-size: 24px; font-weight: 500; letter-spacing: .04em; }
.swatch__name { font: var(--label); font-size: 10px; letter-spacing: .2em; color: var(--ink-400); margin-top: 6px; }

.certcard img { border-color: var(--line); border-radius: var(--radius); box-shadow: 0 30px 60px -44px rgba(0, 0, 0, .45); }
.certcard figcaption { font: var(--label); font-size: 10.5px; letter-spacing: .2em; color: var(--ink-400); }

.mapwrap { border-radius: var(--radius); border-color: var(--line); }
.mapwrap iframe { filter: grayscale(.85) contrast(1.05) brightness(.98); }
.mapwrap__link { border-radius: 999px; }

/* 16 · DOCK, CHAT, LANGUAGE ----------------------------------------------- */
.dock__list { background: rgba(14, 15, 17, .96); border-color: rgba(201, 169, 110, .22); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.dock__btn { color: rgba(242, 238, 230, .78); }
.dock__btn:hover, .dock__btn:focus-visible { color: var(--gold-hi); background: rgba(242, 238, 230, .05); }
.dock__tip { background: var(--obsidian); border-color: rgba(201, 169, 110, .3); color: var(--ivory); }
.dock__pop { border-radius: var(--radius); background: var(--stone); }

.chat__panel { border-radius: 14px; background: var(--stone); }
/* On a desktop the launcher sits bottom-right, where buyers look for it and
   where it no longer covers the hero's first figure; back-to-top steps up. */
@media (min-width: 761px) {
  .chat:not(.is-moved) { left: auto; right: 24px; bottom: 24px; }
  .totop { bottom: 92px; right: 28px; }
}
.chat__head { background: var(--obsidian); box-shadow: inset 0 -1px 0 rgba(201, 169, 110, .35); }
.chat__launcher { background: var(--obsidian); color: var(--ivory); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(201, 169, 110, .45); }
@media (hover: hover) { .chat__launcher:hover { background: var(--ink-700); } }
.chat__msg--me { background: var(--ink-900); color: var(--ivory); }
.chat__msg--them { background: #fff; }
.chat__chip:hover { color: var(--gold-hi); }

/* The draughtsman's corner ticks retire with the blueprint look. */
.tick::before, .tick::after { display: none !important; }

/* 17 · COMPANY, GALLERY, FILM --------------------------------------------- */
.co-h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(36px, 3.8vw, 58px); line-height: 1.04; }
.co-h1 em { font-style: italic; font-weight: 400; color: var(--signal); }
.co-photo { border-radius: var(--radius); }
.steps--co .steps__item h3 { font-size: 24px; }
.co-tl__y { font-family: var(--font-serif); font-weight: 500; color: var(--gold); font-variant-numeric: lining-nums; }
.co-tl__i { border-top-color: rgba(242, 238, 230, .1); }
.wsgal__item { border-radius: var(--radius); }
.wsgal__item img { transition: transform 1.4s var(--ease-out); }
.wsgal__item:hover img { transform: scale(1.04); }
.lbx { background: rgba(8, 9, 10, .94); }
.vplayer { border-radius: var(--radius); }
.film { background: var(--obsidian); }

/* 18 · MOTION ------------------------------------------------------------- */

/* First homepage visit of a session: the emblem draws its ring, then the
   curtain lifts. The head script adds html.yf-intro only when the visitor has
   not seen it yet, before the first paint, so nothing ever flashes. The lift is
   pure CSS: a blocked or slow script cannot leave the curtain standing. */
.yf-curtain {
  position: fixed; inset: 0; z-index: 400; display: none; place-items: center;
  background: var(--obsidian); pointer-events: none;
}
.yf-intro .yf-curtain { display: grid; animation: yfLift 1.05s var(--ease-io) 1.3s forwards; }
@keyframes yfLift { to { transform: translateY(-100%); visibility: hidden; } }
.yf-curtain__mark { position: relative; width: min(30vw, 132px); aspect-ratio: 1; opacity: 0; transform: scale(.94); animation: yfMarkIn 1s var(--ease-out) .05s forwards; }
.yf-curtain__mark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.yf-curtain__mark .yf-curtain__glyph { inset: 18%; width: 64%; height: 64%; }
.yf-curtain__ring { fill: none; stroke: url(#yf-gold); stroke-width: 1.2; stroke-dasharray: 302; stroke-dashoffset: 302; animation: yfRing 1.15s var(--ease-io) .2s forwards; }
.yf-curtain__word { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; font: 500 10.5px/1 var(--font-sans); letter-spacing: .62em; color: rgba(242, 238, 230, .5); opacity: 0; animation: yfFade .8s ease .55s forwards; }
@keyframes yfMarkIn { to { opacity: 1; transform: none; } }
@keyframes yfRing { to { stroke-dashoffset: 0; } }
@keyframes yfFade { to { opacity: 1; } }

/* The reading bar main.js already draws, in champagne. */
.readbar { height: 2px; background: var(--metal); background-size: 100vw 2px; z-index: 300; }

/* Reveals arrive a little further and a little slower than before. */
.reveal { transform: translateY(28px); }
.reveal.is-in { transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out); }
.mask > * { transition: transform 1.25s var(--ease-out); }

/* Images settle into place */
.pcard__media img, .ccard__media img, .post-card__img img, .case-card__img img { opacity: 0; }
.pcard__media img.is-loaded, .ccard__media img.is-loaded, .post-card__img img.is-loaded, .case-card__img img.is-loaded { opacity: 1; }
.case-card__img img.is-loaded { opacity: .82; }

/* Magnetic buttons — transform is written by main.js, eased here */
.mag { transition: transform .6s var(--ease-out), background-position 1.1s var(--ease-out), box-shadow .6s var(--ease-out), background .45s, border-color .45s, color .45s; }

/* Cross-page fade, where the browser supports it */
::view-transition-old(root) { animation: vtOut .35s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .55s var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .yf-curtain, .yf-intro .yf-curtain { display: none; }
  .hero__slide [data-anim="2"] { clip-path: none !important; transform: none !important; }
  .hero__statsbar .wrap::before, .page-hero .wrap::after { animation: none; transform: none; }
  .page-hero h1, .page-hero p { animation: none; }
  .mobile-nav.is-open > ul > li { animation: none; }
}

/* 19 · RESPONSIVE --------------------------------------------------------- */
@media (max-width: 1180px) {
  .ccollections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

/* Touch screens and narrow windows: the photograph sits whole above the words
   (the Customizer's phone rules, emitted after this file, place it), so the
   controls and the figures simply follow in the flow. */
@media (max-width: 1024px), (max-width: 1400px) and (pointer: coarse) {
  .hero__controls { position: relative; bottom: auto; margin: 0; padding-bottom: 26px; }
  .hero__statsbar { position: relative; bottom: auto; }
  .hero__figure { padding: 20px 16px 22px; }
  .hero__figure:first-child { padding-left: 0; }
  .topbar__list:not(.topbar__list--right) { display: none; }
  .topbar__inner { justify-content: flex-end; }
  .hero h1, .hero .display { font-size: clamp(42px, 8.4vw, 72px); max-width: 14ch; }
  .hero--has-figures .hero__inner, .hero--slider .hero__inner { padding-bottom: 34px; }
}

@media (max-width: 980px) {
  .cta-band__inner { grid-template-columns: 1fr; }
  .statband { grid-template-columns: repeat(2, 1fr); }
  .statband__i:nth-child(3) { border-left: 0; }
  .statband__i:nth-child(n+3) { border-top: 1px solid rgba(242, 238, 230, .08); }
}

@media (max-width: 760px) {
  body { font-size: 15.5px; }
  /* The top bar keeps one job on a phone: switching language. */
  .topbar__list:not(.topbar__list--right) { display: none; }
  .topbar__list--right { display: flex; margin-left: auto; }
  .topbar__inner { justify-content: flex-end; }
  /* Collections two-up, so nine of them are a glance rather than a long scroll */
  .ccollections { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .ccard h3, .ccollections .ccard:first-child h3 { font-size: 20px; }
  .ccard p { font-size: 13px; }
  .ccard__body, .ccollections .ccard .ccard__body, .ccollections .ccard:first-child .ccard__body { padding: 14px 0 8px; }
  .ccard__foot { font-size: 9.5px; letter-spacing: .14em; padding-top: 10px; }
  /* The homepage's selected models become a row to swipe through */
  .home .pgrid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none;
  }
  .home .pgrid::-webkit-scrollbar { display: none; }
  .home .pgrid > .pcard { flex: 0 0 82%; scroll-snap-align: start; }
  .pcard__excerpt { display: none; }
  .pcard:hover { transform: none; }
  .section-head h2 { font-size: clamp(34px, 9vw, 46px); }
  .footer__grid { grid-template-columns: 1fr; }
  .steps__item { padding: 28px 0 0; border-right: 0; }
  .hero__dot { width: 52px; }
  .hero__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__figure:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__figure:nth-child(n+3) { border-top: 1px solid rgba(242, 238, 230, .1); }
  .chat:not(.is-moved) { left: auto; right: 14px; }
  .hero__figure b { font-size: 32px; }
  .page-hero h1 { font-size: clamp(40px, 11vw, 56px); }
  .product-meta h1 { font-size: clamp(38px, 10vw, 52px); }
  .tabs__nav { gap: 24px; }
  .brand__name { font-size: 18px; letter-spacing: .18em; }
  .brand__tag { font-size: 7.5px; letter-spacing: .36em; }
  .brand__emblem { --emblem: 40px; }
  .marquee { padding-block: 22px; }
  .reasons { gap: 0 !important; }
}

/* 4.1 · REFINEMENTS -------------------------------------------------------- */

/* The interior page heads lost their ring and glow: a base rule made every
   child of .page-hero position:relative, which folded the veil to nothing. */
.page-hero > .page-hero__veil { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero > .wrap { z-index: 2; }

/* Seven menu items now: give them room to breathe. main.js still folds the
   menu into the button whenever a translation will not fit. */
.nav > ul > li > a { padding-inline: clamp(9px, .95vw, 17px); font-size: 13.5px; letter-spacing: .02em; }
.nav > ul > li > a::before { left: clamp(9px, .95vw, 17px); right: clamp(9px, .95vw, 17px); }

/* Marquee: fade the words into the band itself, not into grey. */
.marquee { position: relative; -webkit-mask-image: none; mask-image: none; }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: min(14vw, 200px); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--obsidian) 10%, rgba(14, 15, 17, 0)); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--obsidian) 10%, rgba(14, 15, 17, 0)); }

/* Section heads on wide screens: the title on the left, the introduction set
   against it on the right — the editorial layout of an annual report rather
   than a stack with an empty half-page beside it. */
@media (min-width: 1100px) {
  .section-head__text:has(> h2 + p) {
    display: grid; max-width: none; flex: 1 1 auto;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    column-gap: clamp(48px, 6vw, 120px); align-items: end;
  }
  .section-head__text:has(> h2 + p) > .eyebrow { grid-column: 1; }
  .section-head__text:has(> h2 + p) > h2 { grid-column: 1; margin-bottom: 0; }
  .section-head__text:has(> h2 + p) > p:last-child {
    grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; padding-bottom: .45em;
    padding-left: clamp(24px, 2.4vw, 40px); border-left: 1px solid var(--line);
  }
  .section--dark .section-head__text:has(> h2 + p) > p:last-child { border-left-color: rgba(242, 238, 230, .12); }
  .section-head:has(.section-head__aside) .section-head__text:has(> h2 + p) > p:last-child { padding-right: 24px; }
}

/* Lists in page text: a fine champagne rule instead of a bullet. */
.entry ul { list-style: none; padding-left: 0; }
.entry ul > li { position: relative; padding-left: 28px; }
.entry ul > li::before {
  content: ""; position: absolute; left: 2px; top: .82em; width: 12px; height: 1px; background: var(--signal);
}
.entry ol { padding-left: 1.4em; }
.entry ol > li::marker { color: var(--signal); font-family: var(--font-serif); font-size: 1.05em; }
:root[dir="rtl"] .entry ul > li { padding-left: 0; padding-right: 28px; }
:root[dir="rtl"] .entry ul > li::before { left: auto; right: 2px; }

/* A long page of text keeps its photograph in view. */
@media (min-width: 1025px) {
  .split--wide-left > .split__media { position: sticky; top: calc(var(--header-h, 76px) + 36px); }
}

/* Footer: brand · collections · company (two columns), then the contact row. */
@media (min-width: 1281px) {
  .footer__grid { grid-template-columns: 1.3fr .85fr 1.55fr; }
  .footer__col--contact { grid-column: 1 / -1; padding-top: 40px; border-top: 1px solid rgba(242, 238, 230, .09); }
  .footer__col--contact .fcontact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 761px) {
  .footer__col--company ul { display: block; columns: 2; column-gap: 40px; }
  .footer__col--company li { break-inside: avoid; margin: 0 0 13px; }
}
.section-head__aside { flex: none; white-space: nowrap; }
@media (min-width: 1025px) {
  .faq-group__title { position: sticky; top: calc(var(--header-h, 76px) + 32px); align-self: start; }
}
/* The phone bar's labels: long words (Arabic, Russian) wrap to two short
   lines inside their own sixth of the bar instead of running into the next. */
@media (max-width: 760px) {
  .dock--mobile .dock__btn { min-width: 0; padding-inline: 2px; }
  .dock--mobile .dock__label { white-space: normal; text-align: center; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; }
}