/* ============================================================
   deepalivijayjain.com — V4 "THE ROOM"
   Dark, still and low-key. Warm off-white on near-black, a single
   restrained gold accent for hairlines and labels — no gradient,
   no colour beyond it. Type system unchanged: Bricolage Grotesque
   display + Fraunces italic accents + Inter body + DM Sans labels.
   Single-file build.
   ============================================================ */

@font-face { font-family:'Bricolage'; font-weight:700; font-style:normal; font-display:swap; src:url('../fonts/Bricolage-700.woff2') format('woff2'); }
@font-face { font-family:'Bricolage'; font-weight:800; font-style:normal; font-display:swap; src:url('../fonts/Bricolage-800.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:400; font-style:italic; font-display:swap; src:url('../fonts/Fraunces-400i.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:500; font-style:italic; font-display:swap; src:url('../fonts/Fraunces-500i.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap; src:url('../fonts/Inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap; src:url('../fonts/Inter-500.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:100 900; font-style:normal; font-display:swap; src:url('../fonts/Fraunces-var.woff2') format('woff2'); }
@font-face { font-family:'DM Sans'; font-weight:100 900; font-style:normal; font-display:swap; src:url('../fonts/DMSans-var.woff2') format('woff2'); }

@view-transition { navigation: auto; }

:root {
  --display: 'Bricolage', system-ui, sans-serif;
  --accent-f: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;
  --label: 'DM Sans', system-ui, sans-serif;

  /* Surfaces — near-black to raised panel */
  --ink: #0E0F11;
  --ink-2: #131417;
  --ink-3: #1A1B1F;
  --paper: #0E0F11;
  --porcelain: #F0ECE3;      /* primary text / headings (warm off-white) */
  --porcelain-2: #16171A;    /* image + media placeholder background */

  /* Text ramp */
  --text-2: #C8C4BC;         /* body copy */
  --text-soft: #9A9A9F;      /* muted / secondary */
  --text-faint: #5A5A62;     /* small labels */
  --text-dim: #3A3A42;       /* lowest — footer, hairline captions */

  /* The one accent */
  --gold: #B8963E;
  --gold-bright: #CBA75A;
  --gold-deep: #8A6F2E;

  /* Legacy aliases — existing rules reference these; all now resolve to gold */
  --sapphire: var(--gold);
  --sapphire-deep: var(--gold-deep);
  --sapphire-bright: var(--gold-bright);
  --prism: var(--gold);              /* was a 3-colour gradient; now a solid gold rule */
  --prism-soft: rgba(184, 150, 62, 0.5);

  --line: #1E2025;                   /* hairline on dark */
  --line-l: rgba(240, 236, 227, 0.10);

  --wrap: 84rem;
  --gut: clamp(1.25rem, 4vw, 4.5rem);
  --cut: clamp(14px, 2vw, 26px);

  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);

  --z-grain: 5; --z-nav: 96; --z-menu: 95; --z-cursor: 120; --z-pre: 200; --z-prog: 100;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  font-size: 1.0625rem; line-height: 1.65;
  background: var(--ink); color: var(--text-2);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; padding: 0; }
::selection { background: var(--gold); color: var(--ink); }
@media (min-width: 1025px) and (hover: hover) { body { cursor: none; } }

/* ---------- Grain overlay ---------- */
.grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.12; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- Scroll progress ---------- */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-prog); background: var(--prism); transform: scaleX(0); transform-origin: left; }

/* ---------- Custom cursor ---------- */
.cur, .cur-dot { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); will-change: transform; }
.cur { width: 42px; height: 42px; border: 1px solid var(--gold); transition: width 0.3s var(--e-out), height 0.3s var(--e-out), background 0.3s, border-color 0.3s; display: grid; place-items: center; }
.cur-dot { width: 5px; height: 5px; background: var(--gold); }
.cur__label { font-family: var(--display); font-weight: 700; font-size: 0.4rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.25s; white-space: nowrap; }
.cur.is-hover { width: 42px; height: 42px; background: var(--gold); border-color: transparent; }
.cur.is-hover .cur__label { opacity: 1; transform: scale(1); }
@media (max-width: 1024px), (hover: none) { .cur, .cur-dot { display: none; } }

/* ---------- TYPE ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 0.98; letter-spacing: -0.025em; color: var(--porcelain); }
.d1 { font-family: var(--display); font-weight: 800; font-size: clamp(3.4rem, 1rem + 13vw, 12rem); line-height: 0.86; letter-spacing: -0.04em; }
.d2 { font-family: var(--display); font-weight: 800; font-size: clamp(2.3rem, 1.2rem + 4.5vw, 5.5rem); line-height: 0.94; letter-spacing: -0.035em; }
.d3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.02; }
.fr { font-family: var(--accent-f); font-weight: 400; font-style: italic; letter-spacing: -0.01em; }
.grad { color: var(--gold); }
p { text-wrap: pretty; }

.kicker { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.kicker::before { content: none; }
.kicker--c { justify-content: center; }
.lead { font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.6; }
.muted { color: var(--text-soft); }

/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: clamp(4.5rem, 3rem + 10vw, 10rem); }
.sec--tight { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
/* Whole site is dark now; skin-ink just adds a faint warm wash + a top hairline
   to mark the section apart from the plain background. */
.skin-ink { background: var(--ink-2); color: var(--text-2); border-block: 1px solid var(--line); }
.skin-ink::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 0%, rgba(184,150,62,0.06), transparent 55%); pointer-events: none; }
.skin-ink > * { position: relative; }
.skin-ink .kicker { color: var(--gold-bright); }
.skin-ink .muted { color: var(--text-soft); }

/* Faceted cut motif — reusable angular clip */
.cut { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }

/* ---------- BUTTONS (magnetic + shimmer) ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; padding: 1.05rem 1.9rem; font-family: var(--display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); overflow: hidden; isolation: isolate; transition: background 0.4s var(--e-out), color 0.4s; }
.btn__ic { transition: transform 0.5s var(--e-out); }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(184,150,62,0.18) 50%, transparent 65%); transform: translateX(-130%); }
.btn:hover .btn__ic, .btn:focus-visible .btn__ic { transform: translate(4px, -4px); }
.btn:hover::after, .btn:focus-visible::after { transform: translateX(130%); transition: transform 0.7s var(--e-out); }
.btn--sap { background: var(--gold); color: var(--ink); box-shadow: none; }
.btn--sap:hover, .btn--sap:focus-visible { background: var(--gold-bright); }
.tlink { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); padding-bottom: 0.35rem; }
.tlink::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--e-out); }
.tlink:hover::after, .tlink:focus-visible::after { transform: scaleX(1); }

/* ---------- Faceted image frame ---------- */
.facet { position: relative; overflow: hidden; background: var(--porcelain-2); clip-path: inset(0 0 0 0); }
/* Square variant — plain rectangle, no angled corners. Kept as inset() rather than
   `none` so the [data-facet] reveal still interpolates from inset(0 0 100% 0). */
.facet--square { clip-path: inset(0 0 0 0); }
.facet img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--e-out), filter 0.6s; }
.facet--gray img { filter: grayscale(1) contrast(1.03); }
.facet--gray:hover img, .facet--gray:focus-within img { filter: grayscale(0); transform: scale(1.04); }
/* Opt-in: lock one image to black & white — no colour, no zoom, even on hover.
   Add class="bw" to the .facet wrapper (or straight to the <img>). */
.bw, .bw img { filter: grayscale(1) contrast(1.03) !important; }
.bw:hover img, .bw:focus-within img { transform: none !important; }

/* ---------- STATIC ROW (was a marquee; now a fixed, centred, non-animating list) ---------- */
.mq { display: flex; justify-content: center; padding-inline: var(--gut); }
.mq__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.1rem 2.5rem; }
.mq__row span { font-family: var(--display); font-weight: 700; }
.mq__dia { color: var(--gold); }

/* ============================================================ NAV */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); transition: background 0.5s var(--e-io), box-shadow 0.5s; }
.nav.is-scrolled { background: rgba(14,15,17,0.78); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 1px 0 var(--line); }
/* 3-column grid keeps the four nav links optically centred now that the
   Enquire CTA has been removed from the right-hand side. */
.nav__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; height: 5rem; }
.nav__logo { grid-column: 1; justify-self: start; }
.nav__right { grid-column: 3; justify-self: end; }
.nav.is-scrolled .nav__in { height: 4rem; transition: height 0.5s var(--e-io); }
.nav__logo { font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.03em; color: var(--text-soft); display: inline-flex; gap: 0.1rem; }
.nav__logo em { font-style: normal; }
.nav__logo em:last-child { color: var(--gold); }
.nav__links { grid-column: 2; display: flex; gap: 2.2rem; }
.nav__links a { position: relative; font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-soft); padding: 0.4rem 0; transition: color 0.3s; }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--gold); }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--e-out); }
.nav__links a:hover::after, .nav__links a:focus-visible::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 1.2rem; }
.nav__burger { display: none; width: 2.75rem; height: 2.75rem; place-items: center; }
.nav__burger span, .nav__burger span::before, .nav__burger span::after { display: block; width: 1.5rem; height: 2px; background: currentColor; transition: transform 0.45s var(--e-out), opacity 0.3s; }
.nav__burger span { position: relative; }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; }
.nav__burger span::before { top: -6px; } .nav__burger span::after { top: 6px; }
.nav__burger.is-open span { background: transparent; }
.nav__burger.is-open span::before { transform: translateY(6px) rotate(45deg); }
.nav__burger.is-open span::after { transform: translateY(-6px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--ink); color: var(--porcelain); display: grid; align-content: center; padding: var(--gut); clip-path: circle(0% at calc(100% - 3.5rem) 3rem); transition: clip-path 0.75s var(--e-io); }
.menu.is-open { clip-path: circle(150% at calc(100% - 3.5rem) 3rem); }
.menu[hidden] { display: none; }
.menu__list { display: grid; gap: 0.4rem; }
.menu__list a { font-family: var(--accent-f); font-weight: 500; font-style: italic; font-size: clamp(1.6rem, 7vw, 2rem); line-height: 1.3; letter-spacing: -0.01em; }
.menu__list a:hover { color: var(--gold-bright); }
.menu__meta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-l); display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: 0.82rem; color: rgba(247,245,241,0.7); }

/* ============================================================ HERO (video / ambient) */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background: #0A0906; }

/* Ambient background — stands in for the eventual UAE footage.
   Swap in a <video class="hero__video" autoplay muted loop playsinline poster="…">
   and the lights/grain below can stay as a poster-load fallback or be removed. */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* Screens ≤820px load the dedicated 9:16 mobile source (see the <source media>
   in the markup) instead of the 16:9 desktop file, so cover fills edge-to-edge
   here without the heavy side-cropping a landscape video would need. */
.hero__light { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; }
.hero__light--1 { width: min(64vw, 620px); aspect-ratio: 1; top: -12%; right: -8%; background: radial-gradient(circle, rgba(184,150,62,0.10) 0%, transparent 70%); animation: heroDrift1 14s ease-in-out infinite alternate; }
.hero__light--2 { width: min(52vw, 470px); aspect-ratio: 1; bottom: -14%; left: 3%; background: radial-gradient(circle, rgba(240,236,227,0.045) 0%, transparent 70%); animation: heroDrift2 18s ease-in-out infinite alternate; }
.hero__light--3 { width: min(42vw, 350px); aspect-ratio: 1; top: 38%; left: 52%; background: radial-gradient(circle, rgba(184,150,62,0.06) 0%, transparent 65%); animation: heroDrift3 11s ease-in-out infinite alternate; }
.hero__grain { position: absolute; inset: 0; opacity: 0.26; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px; }
.hero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 12%, rgba(10,9,6,0.68) 72%, rgba(10,9,6,0.94) 100%),
    linear-gradient(to right, rgba(10,9,6,0.08) 0%, rgba(10,9,6,0.32) 28%, rgba(10,9,6,0.86) 100%); }

.hero__content { position: relative; z-index: 2; width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--gut); }
.hero__name { font-family: var(--display); font-weight: 800; font-style: normal; font-size: clamp(2.2rem, 1rem + 4.6vw, 5rem); line-height: 1.0; letter-spacing: -0.035em; color: var(--porcelain); text-shadow: 0 2px 40px rgba(0,0,0,0.6); }
.hero__name span { display: block; }
.hero__title { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: clamp(0.85rem, 1.4vw, 1.15rem); font-family: var(--display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.hero__title::before { content: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero__content { opacity: 0; transform: translateY(14px); animation: heroIn 1.2s var(--e-out) 0.5s forwards; }
}
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroDrift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(-60px,40px) scale(1.15); } }
@keyframes heroDrift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(50px,-30px) scale(1.1); } }
@keyframes heroDrift3 { from { transform: translate(0,0); } to { transform: translate(-40px,30px); } }
@media (prefers-reduced-motion: reduce) { .hero__light { animation: none; } }

/* ============================================================ STATEMENT (ink) */
.state__lead { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 3.8vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 22ch; }
.state__lead .w { display: inline-block; }
.state__lead em { font-family: var(--accent-f); font-weight: 400; font-style: italic; letter-spacing: -0.01em; color: var(--gold-bright); }
.state__body { margin-top: 3rem; max-width: 46rem; margin-left: auto; display: grid; gap: 1.4rem; font-size: 1.08rem; line-height: 1.85; color: var(--text-2); }
.state__close { font-family: var(--accent-f); font-style: italic; font-size: 1.5rem; color: var(--gold); }

/* ============================================================ STATS (single line) */
/* One running line of small plain text — no cards, dividers or emphasis.
   Each phrase is nowrap so the line breaks between phrases, never mid-phrase. */
.statline { text-align: center; font-family: var(--label); font-weight: 400; font-size: clamp(0.74rem, 0.66rem + 0.24vw, 0.84rem); letter-spacing: 0.08em; text-transform: uppercase; line-height: 2.1; color: var(--text-soft); }
.statline span { white-space: nowrap; }
.statline__sep { font-style: normal; color: var(--text-faint); margin-inline: 0.5em; }
/* Once the phrases stack one per line, the separators would dangle at line ends. */
@media (max-width: 700px) { .statline__sep { display: none; } }

/* ============================================================ PILLARS */
.pil__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.pil { position: relative; padding: clamp(3.75rem, 4.5vw, 4.5rem) clamp(1.75rem, 3vw, 2.75rem) clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--line); overflow: hidden; --cut: 22px; }
.pil__num { font-family: var(--display); font-weight: 800; font-size: 5.5rem; line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px var(--line); position: absolute; top: -0.5rem; right: 0.5rem; z-index: 0; }
.pil__t { position: relative; z-index: 1; font-family: var(--display); font-weight: 700; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); margin-bottom: 0.8rem; }
.pil__d { position: relative; z-index: 1; color: var(--text-soft); }

/* ============================================================ PORTFOLIO (architectural prose list — no imagery, no cards) */
.pf__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.pf__list { list-style: none; margin: 0; padding: 0; }
.pf__row { display: grid; grid-template-columns: 9rem 1fr; gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(1.75rem, 3.5vw, 2.75rem); border-top: 1px solid var(--line); }
.pf__list li:last-child .pf__row, .pf__row:last-child { border-bottom: 1px solid var(--line); }
.skin-ink .pf__row { border-color: var(--line-l); }
.pf__label { font-family: var(--display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.skin-ink .pf__label { color: var(--gold-bright); }
.pf__intro { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); letter-spacing: -0.02em; line-height: 1.18; max-width: 42ch; }
.pf__names { margin-top: 0.9rem; font-size: 0.92rem; color: var(--text-soft); }
.skin-ink .pf__names { color: rgba(247,245,241,0.62); }
.pf__names b { color: inherit; font-weight: inherit; }
@media (max-width: 640px) { .pf__row { grid-template-columns: 1fr; gap: 0.6rem; } }

/* ============================================================ PRINCIPAL (sticky) */
.prin { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4vw, 5rem); align-items: start; }
.prin__sticky { position: sticky; top: 6rem; }
.prin__photo { aspect-ratio: 4/5; --cut: clamp(24px, 4vw, 44px); }
.prin__body { padding-top: 2rem; }
.prin__t { margin: 1rem 0 1.5rem; }
.prin__chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--line); font-size: 0.78rem; letter-spacing: 0.04em; --cut: 8px; clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.chip b { font-weight: 500; color: var(--sapphire); }

/* ============================================================ QUOTE */
.quote { text-align: center; position: relative; overflow: hidden; }
.quote__glow { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(184,150,62,0.10), transparent 70%); pointer-events: none; }
.quote__mark { font-family: var(--accent-f); font-style: italic; font-size: 6rem; line-height: 0.4; color: var(--gold); }
.quote__q { position: relative; font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3.4rem); line-height: 1.14; letter-spacing: -0.02em; max-width: 24ch; margin: 1.5rem auto; }
.quote__q em { font-family: var(--accent-f); font-weight: 400; font-style: italic; }
.quote__q .grad { display: inline; }

/* ============================================================ BRANDS */
.brands__feat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.4rem; text-align: center; padding: clamp(2.5rem, 5vw, 4rem); border: 1px solid var(--line); margin-bottom: 2rem; overflow: hidden; --cut: 26px; clip-path: polygon(0 var(--cut), var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.brands__feat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(184,150,62,0.10) 50%, transparent 60%); transform: translateX(-120%); }
.brands__feat:hover::after { transform: translateX(120%); transition: transform 0.9s var(--e-out); }
.brands__feat p { max-width: 44ch; color: var(--text-soft); }
.brands__name--lead { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); letter-spacing: -0.02em; color: var(--porcelain); }
.brands__mq { border-block: 1px solid var(--line); padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.brands__name { font-family: var(--display); font-weight: 700; font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem); letter-spacing: 0.01em; color: var(--text-soft); }
.skin-ink .brands__name { color: rgba(247,245,241,0.62); }

/* ============================================================ TIMELINE (The Arc) */
.arc__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.arc__bar { position: relative; height: 2px; width: 100%; background: var(--line-l); margin-bottom: clamp(2rem, 4vw, 3rem); overflow: hidden; }
.arc__bar i { position: absolute; inset: 0; background: var(--prism); transform: scaleX(0); transform-origin: left; }
.arc__nav { display: inline-flex; align-items: center; gap: 0.6rem; }
.arc__navbtn { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-l); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; color: var(--porcelain); transition: background 0.35s, border-color 0.35s, opacity 0.35s; }
.arc__navbtn:hover:not(:disabled), .arc__navbtn:focus-visible:not(:disabled) { background: var(--gold); border-color: transparent; color: var(--ink); }
.arc__navbtn:disabled { opacity: 0.32; cursor: default; }
.arc__scroll { overflow: hidden; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); }
.arc__items { display: inline-flex; gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: 0.5rem; list-style: none; margin: 0; padding-left: 0; transition: transform 0.55s var(--e-out); }
.arc__item { flex: 0 0 clamp(16rem, 26vw, 22rem); white-space: normal; }
.arc__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(184,150,62,0.20); margin-bottom: 1.6rem; }
.arc__yr { font-family: var(--display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); }
.arc__t { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); margin: 0.5rem 0 0.7rem; }
.arc__x { color: var(--text-soft); font-size: 0.95rem; }

/* ============================================================ GALLERY */
.gal__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.gal__grid { columns: 3 17rem; column-gap: clamp(0.75rem, 1.5vw, 1.25rem); }
.gal__item { display: block; width: 100%; margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem); break-inside: avoid; padding: 0; border: 0; background: none; cursor: pointer; }
.gal__item .facet { --cut: clamp(14px, 2vw, 26px); display: block; }
.gal__item .facet img { height: auto; }

/* ============================================================ PRESS */
.press__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }
.press__mq { overflow: hidden; }
.press__mq .mq__row span { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.7rem); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.02em; transition: color 0.4s; }
.press__mq .mq__row span:hover { color: var(--porcelain); }

/* ============================================================ REACH */
/* ---------- REACH (typography only — no imagery) ---------- */
.reach { text-align: center; }
.reach__words { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: clamp(2.5rem, 5vw, 4rem); }
.reach__words li { padding: clamp(1.25rem, 3vw, 2rem) clamp(0.5rem, 2vw, 1.25rem); border-left: 1px solid var(--line); }
.reach__words li:first-child { border-left: 0; }
.skin-ink .reach__words li { border-color: var(--line-l); }
.reach__ix { display: block; font-family: var(--label); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; color: var(--text-faint); margin-bottom: 0.9rem; }
.skin-ink .reach__ix { color: rgba(247,245,241,0.5); }
.reach__word { font-family: var(--accent-f); font-style: normal; font-weight: 600; font-size: clamp(1.8rem, 1.1rem + 3.2vw, 3.4rem); letter-spacing: -0.02em; line-height: 1.02; color: var(--porcelain); }

/* ============================================================ IMPACT */
.impact__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
.impact__card { position: relative; padding: clamp(1.75rem, 3vw, 2.75rem); border: 1px solid var(--line); overflow: hidden; --cut: 22px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.impact__card::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: var(--prism); }
.impact__t { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); color: var(--gold-bright); margin-bottom: 0.8rem; }
.impact__p { color: var(--text-soft); line-height: 1.75; }

/* ============================================================ FOOTER (one centred line, identical on all five pages) */
.foot { background: var(--ink); color: var(--porcelain); padding-block: clamp(2.5rem, 4vw, 3.5rem); }
.foot__line { text-align: center; font-size: 0.8rem; letter-spacing: 0.02em; color: var(--text-dim); }

/* ============================================================ PRELOADER */
.pre { position: fixed; inset: 0; z-index: var(--z-pre); background: var(--ink); display: grid; place-items: center; }
html:not(.js) .pre { display: none; }
.pre__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(1.1rem, 3vw, 1.75rem); }
.pre__spin { position: relative; width: clamp(2rem, 5vw, 2.75rem); height: clamp(2rem, 5vw, 2.75rem); }
.pre__spin::before, .pre__spin::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #E4C878; opacity: 0; animation: prePulse 1.8s ease-out infinite; }
.pre__spin::after { animation-delay: 0.9s; }
@keyframes prePulse { 0% { transform: scale(0.25); opacity: 0.9; } 70% { opacity: 0.15; } 100% { transform: scale(1.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pre__spin::before, .pre__spin::after { animation: none; opacity: 0.5; transform: none; } }
.pre__mark { font-family: var(--display); font-weight: 800; font-size: clamp(2.25rem, 7vw, 3.75rem); letter-spacing: 0.06em; line-height: 1;
  background: linear-gradient(135deg, #6E5A2A 0%, #9A7B34 50%, #E4C878 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pre.is-done { clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--e-io); }

/* ============================================================ FEATURE BAND (full-bleed image) */
.feature { position: relative; height: clamp(22rem, 60vh, 40rem); overflow: hidden; background: var(--ink); display: flex; align-items: flex-end; }
.feature__media { position: absolute; inset: -8% 0; z-index: 0; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(14,15,17,0.86), rgba(14,15,17,0.2) 46%, transparent 72%); }
.feature__cap { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(2rem, 5vw, 4rem); }
.feature__cap .kicker { color: var(--gold-bright); }
.feature__t { font-family: var(--accent-f); font-style: italic; color: var(--porcelain); font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); line-height: 1.08; margin-top: 0.75rem; max-width: 22ch; }

/* Gems — split feature (ring + text) */
.gemf__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
.gemf__t { max-width: 15ch; margin-top: 1rem; }
.gemf__d { margin-top: 1.35rem; max-width: 34ch; }
.gemf__ring { width: 100%; max-width: 23rem; margin-left: auto; }
.gemf__ring .facet { --cut: clamp(16px, 3vw, 30px); aspect-ratio: 4 / 5; }
.gemf__ring .facet img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .gemf__grid { grid-template-columns: 1fr; } .gemf__ring { max-width: 20rem; margin-inline: auto; } }

/* ============================================================ RESPONSIVE */
@media (max-width: 991px) {
  .nav__links { display: none; }
  .nav__burger { display: grid; }
  .pil__grid { grid-template-columns: 1fr; }
  .prin { grid-template-columns: 1fr; gap: 2rem; }
  .prin__sticky { position: static; max-width: 26rem; }
  .impact__grid { grid-template-columns: 1fr; }
  .gal__grid { columns: 2 12rem; }
  .state__body { margin-left: 0; }
  .reach__words { grid-template-columns: repeat(2, 1fr); }
  .reach__words li:nth-child(2) { border-left: 1px solid var(--line); }
  .skin-ink .reach__words li:nth-child(2) { border-color: var(--line-l); }
  .reach__words li:nth-child(3) { border-left: 0; }
}

/* Arc timeline: vertical stack on phones (horizontal scroll reads as cut-off) */
@media (max-width: 640px) {
  .arc__scroll { overflow: visible; margin-inline: 0; padding-inline: 0; }
  .arc__items { display: flex; flex-direction: column; gap: 0; transform: none !important; }
  .arc__item { flex: none; width: 100%; position: relative; padding: 0 0 2.25rem 1.75rem; border-left: 1px solid var(--line-l); }
  .arc__item:last-child { padding-bottom: 0; }
  .arc__dot { position: absolute; left: -6.5px; top: 2px; margin-bottom: 0; }
  .arc__bar, .arc__nav { display: none; }
}
@media (max-width: 560px) {
  .gal__grid { columns: 2 8rem; }
}

/* ---------- a11y ---------- */
:focus-visible { outline: 2px solid var(--sapphire); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 1rem; left: 1rem; z-index: 400; padding: 0.7rem 1.1rem; background: var(--ink); color: var(--porcelain); transform: translateY(-200%); }
.skip:focus { transform: none; }
html.lock, html.lock body { overflow: hidden; }

/* ---------- Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(8,9,11,0.95); opacity: 0; transition: opacity 0.4s var(--e-out); }
.lb.is-on { opacity: 1; } .lb[hidden] { display: none; }
.lb__img { max-width: min(90vw, 54rem); max-height: 84vh; object-fit: contain; transform: scale(0.96); transition: transform 0.5s var(--e-out); }
.lb.is-on .lb__img { transform: none; }
.lb button { position: absolute; width: 3rem; height: 3rem; border: 1px solid rgba(247,245,241,0.3); border-radius: 50%; color: var(--porcelain); font-size: 1.3rem; display: grid; place-items: center; transition: background 0.4s, border-color 0.4s; }
.lb button:hover, .lb button:focus-visible { background: var(--sapphire); border-color: transparent; }
.lb__x { top: clamp(1rem,3vw,2rem); right: clamp(1rem,3vw,2rem); }
.lb__p { left: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
.lb__n { right: clamp(0.5rem,2vw,2rem); top: 50%; transform: translateY(-50%); }
.lb__c { position: absolute; bottom: clamp(1rem,3vw,2rem); left: 50%; transform: translateX(-50%); font-family: var(--display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; color: rgba(240,236,227,0.7); }