/* =========================================================================
   LENJAWI — Sovereign Dark + Gold
   Cinematic concept · token-driven · light/dark · reduced-motion aware
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* colour — two neutrals + one accent (gold ramp sampled from the logo) */
  --bg:#0C0B0A;              /* Obsidian, warm near-black */
  --bg-2:#141210;            /* raised panel */
  --bg-3:#1C1916;            /* card hover / inset */
  --ink:#F3ECDD;             /* Bone, warm ivory */
  --ink-soft:#C9BEA8;        /* secondary text */
  --muted:#8C8371;           /* tertiary text / captions */
  --gold:#C9A15E;            /* the single accent */
  --gold-bright:#DEBC89;
  --champagne:#F4D9AC;
  --bronze:#8C6A34;
  --line:rgba(243,236,221,0.12);
  --line-2:rgba(243,236,221,0.22);
  --veil:rgba(12,11,10,0.55);
  --metal:linear-gradient(100deg,#8C6A34 0%,#C9A15E 30%,#F4D9AC 52%,#C9A15E 72%,#8C6A34 100%);
  --shadow:0 24px 60px -20px rgba(0,0,0,.65);

  /* type */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* rhythm */
  --maxw:1320px;
  --gutter:clamp(1.25rem,5vw,5rem);
  --section-y:clamp(4.5rem,10vw,9rem);

  /* motion */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --dur:.8s;

  --header-h:84px;
}

html[data-theme="light"]{
  --bg:#F4EFE4;              /* warm ivory, never stark white */
  --bg-2:#EAE2D2;
  --bg-3:#E1D7C3;
  --ink:#1A1613;
  --ink-soft:#4A4238;
  --muted:#7A7060;
  --gold:#9C7A32;            /* deeper gold reads on light */
  --gold-bright:#B8893B;
  --bronze:#7A5E29;
  --line:rgba(26,22,19,0.14);
  --line-2:rgba(26,22,19,0.24);
  --veil:rgba(20,17,14,0.42);
  --shadow:0 24px 60px -22px rgba(60,45,20,.28);
}

/* ---------- 2. RESET / BASE --------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* the UA's [hidden]{display:none} loses to any author display rule
   (.btn{display:flex}, .unit-mix{display:grid}), so restate it here */
[hidden]{display:none !important}
/* Skip link: clip it rather than parking it at left:-999px. A negative inline
   offset is harmless in LTR but becomes real scrollable overflow in RTL — it
   widened the page ~999px and dragged the fixed header/menu/FABs off-screen.
   Clipping takes no space in either direction, and it now actually appears on
   keyboard focus (it never did before). */
.skip-link{
  position:absolute;top:0;left:0;
  width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%)
}
.skip-link:focus{
  width:auto;height:auto;clip:auto;clip-path:none;
  z-index:200;margin:.6rem;padding:.7rem 1.2rem;
  background:var(--bg-2);color:var(--ink);
  border:1px solid var(--gold);border-radius:4px;
  font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;text-decoration:none
}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  transition:background .6s var(--ease),color .6s var(--ease);
}
body.menu-open{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--gold);color:#1A1613}

h1,h2,h3,h4,.display{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:.005em}

/* smooth-scroll base (Lenis adds .lenis classes) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- 3. SHARED PRIMITIVES ---------------------------------------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.eyebrow{
  display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.26em;color:var(--gold);
}
.eyebrow--line{position:relative;padding-left:56px}
.eyebrow--line::before{
  content:"";position:absolute;left:0;top:50%;width:40px;height:1px;background:var(--gold);opacity:.7
}
.section-head{max-width:60ch;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head h2{
  font-size:clamp(2.1rem,5vw,3.7rem);margin-top:1.1rem;
}
.section-head p{color:var(--ink-soft);margin-top:1.3rem;font-size:1.05rem;max-width:52ch}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-soft)}
.metal-text{
  background:var(--metal);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* on the ivory (default/light) canvas the metallic gradient's champagne peak is
   too pale to read, so render metal-text as a solid rich gold there instead. */
html[data-theme="light"] .metal-text{background:none;-webkit-text-fill-color:#8C6A2E;color:#8C6A2E}
.hairline{height:1px;background:var(--line);border:0}

/* buttons */
.btn{
  --pad-y:.95em;--pad-x:1.9em;
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--sans);font-size:.82rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;padding:var(--pad-y) var(--pad-x);border-radius:999px;
  border:1px solid var(--gold);color:var(--gold);
  transition:color .5s var(--ease),background .5s var(--ease),transform .3s var(--ease);
  will-change:transform;overflow:hidden;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--metal);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.btn:hover{color:#141210}
.btn:hover::before{transform:translateY(0)}
.btn--solid{background:var(--metal);color:#141210;border-color:transparent}
.btn--solid::before{background:#141210;transform:translateY(101%)}
.btn--solid:hover{color:var(--gold-bright)}
.btn--solid:hover::before{transform:translateY(0)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn__arrow{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* reveal defaults (JS toggles .is-in; CSS fallback if no JS) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* line reveal (clip) */
.line-mask{overflow:hidden}
.line-mask>*{transform:translateY(110%);transition:transform 1s var(--ease)}
.line-mask.is-in>*{transform:none}

/* ---------- 4. CUSTOM CURSOR -------------------------------------------- */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s
}
.cursor{width:7px;height:7px;background:var(--champagne);transform:translate(-50%,-50%)}
.cursor-ring{
  width:44px;height:44px;border:1px solid rgba(244,217,172,.6);transform:translate(-50%,-50%);
  transition:width .3s var(--ease),height .3s var(--ease),opacity .3s,background .3s
}
body.cursor-ready .cursor,body.cursor-ready .cursor-ring{opacity:1}
body.cursor-hover .cursor-ring{width:64px;height:64px;background:rgba(201,161,94,.12)}
body.cursor-hover .cursor{opacity:0}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none}}

/* WhatsApp floating button (all pages) */
.wa-fab{position:fixed;right:clamp(1.1rem,2.5vw,1.9rem);bottom:clamp(1.1rem,2.5vw,1.9rem);z-index:95;
  width:56px;height:56px;border-radius:50%;background:var(--metal);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(0,0,0,.28);transition:transform .35s var(--ease),box-shadow .35s,opacity .3s}
.wa-fab svg{width:30px;height:30px;position:relative;z-index:1;fill:#1A1613;transform:translate(1px,3px)}
.wa-fab::before{content:"";position:absolute;inset:0;border-radius:50%;background:#C9A15E;z-index:0;animation:waPulse 2.6s ease-out infinite}
.wa-fab:hover{transform:scale(1.08);box-shadow:0 16px 40px rgba(0,0,0,.34)}
@keyframes waPulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.7);opacity:0}}
body.menu-open .wa-fab{opacity:0;pointer-events:none}

/* ---------- 5. HEADER --------------------------------------------------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .5s var(--ease),height .4s var(--ease),border-color .5s;
  border-bottom:1px solid transparent;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;width:100%}
.site-header.is-scrolled{
  height:66px;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line);
}
.brand{display:flex;align-items:center;gap:.8rem;z-index:130}
.brand__word{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.7rem);letter-spacing:.34em;text-transform:uppercase;color:#C9A15E;line-height:1;white-space:nowrap;padding-left:.34em;transition:font-size .4s var(--ease)}
.is-scrolled .brand__word{font-size:clamp(1.15rem,2vw,1.45rem)}

.header-actions{display:flex;align-items:center;gap:clamp(1rem,2vw,1.8rem);z-index:120}
.theme-toggle{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink);transition:border-color .4s,color .4s,transform .4s
}
/* Header controls sit over a DARK surface while the header is un-scrolled (the
   hero band) or the fullscreen menu is open → force light controls there.
   Once scrolled onto the themed (ivory) header bar they use the normal --ink. */
.site-header:not(.is-scrolled) .theme-toggle,
.site-header:not(.is-scrolled) .menu-toggle,
body.menu-open .theme-toggle,
body.menu-open .menu-toggle{color:#F3ECDD}
.site-header:not(.is-scrolled) .theme-toggle,
body.menu-open .theme-toggle{border-color:rgba(243,236,221,.28)}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);transform:rotate(15deg)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .sun{display:none}
html[data-theme="light"] .theme-toggle .sun{display:block}
html[data-theme="light"] .theme-toggle .moon{display:none}

.menu-toggle{
  display:flex;align-items:center;gap:.7rem;font-family:var(--sans);font-size:.78rem;
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)
}
.menu-toggle .bars{display:inline-flex;flex-direction:column;gap:5px;width:26px}
.menu-toggle .bars span{height:1.5px;background:currentColor;transition:transform .45s var(--ease),opacity .3s;transform-origin:center}
.menu-toggle .bars span:first-child{width:26px}
.menu-toggle .bars span:last-child{width:18px;margin-left:auto}
.menu-toggle:hover{color:var(--gold)}
.menu-toggle:hover .bars span:last-child{width:26px}
body.menu-open .menu-toggle .bars span:first-child{transform:translateY(6.5px) rotate(45deg)}
body.menu-open .menu-toggle .bars span:last-child{width:26px;transform:translateY(-6px) rotate(-45deg)}
body.menu-open .menu-toggle .label-open{display:none}
.menu-toggle .label-close{display:none}
body.menu-open .menu-toggle .label-close{display:inline}

/* ---------- 6. FULLSCREEN MENU (scoped dark in both themes) -------------- */
.menu{
  --bg:#0C0B0A;--bg-2:#141210;--ink:#F3ECDD;--ink-soft:#C9BEA8;--gold:#C9A15E;
  --line:rgba(243,236,221,0.12);--line-2:rgba(243,236,221,0.22);
  position:fixed;inset:0;z-index:110;background:var(--bg);color:var(--ink);
  display:grid;grid-template-columns:1.15fr .85fr;
  clip-path:inset(0 0 100% 0);pointer-events:none;
  transition:clip-path .9s var(--ease);
}
body.menu-open .menu{clip-path:inset(0 0 0% 0);pointer-events:auto}
.menu__inner{
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--header-h) var(--gutter) 3rem;gap:2.5rem
}
.menu__nav{display:flex;flex-direction:column}
.menu__nav li{overflow:hidden}
.menu__nav a{
  --i:0;position:relative;display:inline-flex;align-items:baseline;gap:1.2rem;
  font-family:var(--serif);font-weight:500;color:var(--ink);
  font-size:clamp(2.2rem,min(7vw,8.5vh),4.6rem);line-height:1.24;
  padding-block:.12em;transition:color .45s var(--ease),padding-left .45s var(--ease);
}
.menu__nav a .idx{font-family:var(--sans);font-size:.8rem;font-weight:500;letter-spacing:.1em;color:var(--gold);opacity:.7;transform:translateY(-.6em)}
.menu__nav a::after{
  content:"";position:absolute;left:0;bottom:.18em;width:0;height:1px;background:var(--gold);
  transition:width .5s var(--ease)
}
.menu__nav a:hover{color:var(--gold-bright);padding-left:.6rem}
.menu__nav a:hover::after{width:calc(100% - .6rem)}
.menu__meta{display:flex;flex-wrap:wrap;gap:2rem 3rem;border-top:1px solid var(--line);padding-top:2rem}
.menu__meta .eyebrow{margin-bottom:.5rem;display:block}
.menu__meta a,.menu__meta p{color:var(--ink-soft);font-size:.98rem}
.menu__meta a:hover{color:var(--gold)}

.menu__preview{position:relative;overflow:hidden;background:var(--bg-2)}
.menu__preview .pv{
  position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),transform 1.2s var(--ease);transform:scale(1.08)
}
.menu__preview .pv.is-active{opacity:1;visibility:visible;transform:scale(1)}
.menu__preview .pv img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) brightness(.62) contrast(1.05) sepia(.18) saturate(1.15)}
.menu__preview::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(12,11,10,.5),transparent 60%);pointer-events:none}
.menu__preview .pv__label{
  position:absolute;left:2rem;bottom:2rem;z-index:2;font-family:var(--serif);
  font-size:1.4rem;color:var(--ink);opacity:0;transform:translateY(12px);transition:opacity .6s .1s var(--ease),transform .6s .1s var(--ease)
}
.menu__preview .pv.is-active .pv__label{opacity:1;transform:none}

/* ---------- 7. HERO (scoped dark) --------------------------------------- */
.hero{
  --bg:#0C0B0A;--ink:#F3ECDD;--ink-soft:#C9BEA8;--gold:#C9A15E;--line:rgba(243,236,221,0.12);
  position:relative;min-height:100svh;display:flex;align-items:center;
  background:var(--bg);color:var(--ink);overflow:hidden;
}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.5) contrast(1.08) saturate(1.1) sepia(.16);
  transform:scale(1.12);will-change:transform
}
/* video hero background (all pages) — lighter grade than the still veil so the
   footage reads bright; the ::after gradient keeps hero text legible. */
.hero__bg video,.page-hero__bg video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.8) contrast(1.08) saturate(1.07) sepia(.09)
}
/* cinematic veil — darken the left for the copy, ground the base, soft gold
   glow to the right where the footage breathes, plus a vignette for focus. */
.hero__bg::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(9,8,7,.84) 0%,rgba(9,8,7,.48) 30%,rgba(9,8,7,.1) 56%,transparent 82%),
    linear-gradient(180deg,rgba(9,8,7,.5) 0%,transparent 22%,transparent 54%,rgba(9,8,7,.8) 100%),
    radial-gradient(70% 60% at 74% 40%,rgba(201,161,94,.13),transparent 60%);
  box-shadow:inset 0 0 clamp(120px,18vw,240px) rgba(6,5,4,.6);
}
.hero__content{position:relative;z-index:2;color:var(--ink);width:100%;padding-block:clamp(2rem,5vh,4rem)}
.hero__eyebrow{margin-bottom:1.6rem}
.hero h1{
  font-size:clamp(2.9rem,9vw,7.5rem);line-height:.98;letter-spacing:.01em;color:var(--ink);
  text-wrap:balance
}
.hero h1 .row{display:block;overflow:hidden}
.hero h1 .tagline-serif{font-style:italic;color:var(--gold-bright)}
.hero__sub{margin-top:1.8rem;max-width:46ch;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.18rem)}
.hero__cta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1rem}

/* split text helpers */
.split-word{white-space:nowrap;display:inline-block}
.split-char{display:inline-block;will-change:transform}  /* JS sets the from-state; no-JS shows text normally */

/* hero stats strip */
.hero__stats{
  position:relative;z-index:2;border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.stat{padding:clamp(1.4rem,3vw,2.2rem) 0;display:flex;flex-direction:column;gap:.35rem}
.stat + .stat{border-left:1px solid var(--line);padding-left:clamp(1.2rem,3vw,2.4rem)}
.stat__num{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;color:var(--ink)}
.stat__num .metal-text,.stat__num{color:var(--gold-bright)}
.stat__label{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-soft)}

.scroll-cue{
  position:absolute;right:var(--gutter);bottom:clamp(2.2rem,5vw,3.4rem);z-index:2;
  writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:1rem
}
.scroll-cue::after{content:"";width:1px;height:64px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- 8. MARQUEE -------------------------------------------------- */
.marquee{
  border-block:1px solid var(--line);padding-block:1.6rem;overflow:hidden;
  background:var(--bg-2)
}
.marquee__track{display:flex;gap:0;width:max-content;will-change:transform}
.marquee__track span{
  font-family:var(--serif);font-size:clamp(1.5rem,3.4vw,2.6rem);font-style:italic;
  color:var(--ink-soft);padding-inline:clamp(1.5rem,4vw,3rem);white-space:nowrap;display:flex;align-items:center;gap:clamp(1.5rem,4vw,3rem)
}
.marquee__track span::after{content:"✦";font-style:normal;color:var(--gold);font-size:.7em}

/* ---------- 9. ABOUT ---------------------------------------------------- */
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.about__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:4/5}
.about__media img{width:100%;height:100%;object-fit:cover;filter:brightness(1.06) contrast(1) sepia(.05) saturate(1.05);transform:scale(1.12);will-change:transform}
.about__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,11,10,.5))}
.about__media .frame-tag{
  position:absolute;left:1.4rem;bottom:1.4rem;z-index:2;font-family:var(--serif);font-style:italic;
  font-size:1.15rem;color:#F3ECDD
}
.about__body p{color:var(--ink-soft);margin-top:1.4rem}
.about__body .btn{margin-top:2.2rem}
.about__lead{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.3;color:var(--ink);font-weight:500;margin-top:1.2rem}

/* ---------- 10. SERVICES (spotlight grid) ------------------------------- */
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc{
  position:relative;background:var(--bg);padding:clamp(1.8rem,3vw,2.8rem);
  min-height:clamp(15rem,26vw,19rem);display:flex;flex-direction:column;
  transition:background .5s var(--ease)
}
.services__grid:has(.svc:hover) .svc:not(:hover){opacity:.5}
.svc{transition:background .5s var(--ease),opacity .5s var(--ease)}
.svc__num{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;color:var(--gold);opacity:.7}
.svc__icon{margin-top:.4rem;color:var(--gold);width:34px;height:34px}
.svc__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.1}
.svc h3{font-size:clamp(1.45rem,2vw,1.85rem);margin-top:auto;padding-top:1.6rem}
.svc p{color:var(--ink-soft);font-size:.94rem;margin-top:.7rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .5s}
.svc__more{margin-top:1.1rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:.5rem;opacity:0;transform:translateY(6px);transition:opacity .5s .05s var(--ease),transform .5s .05s var(--ease)}
.svc:hover{background:var(--bg-2)}
.svc:hover p{max-height:12rem;opacity:1;margin-top:.9rem}
.svc:hover .svc__more{opacity:1;transform:none}
.svc::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--metal);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.svc:hover::before{transform:scaleX(1)}

/* ---------- 11. PORTFOLIO teaser ---------------------------------------- */
.portfolio .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.portfolio__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:3/2}
.portfolio__media img{width:100%;height:100%;object-fit:cover;filter:brightness(1.05) contrast(1) sepia(.05) saturate(1.05);transform:scale(1.1);will-change:transform}
.portfolio__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 120px rgba(12,11,10,.7)}
.portfolio__body h2{font-size:clamp(2rem,4.5vw,3.4rem);margin-top:1rem}
.portfolio__body p{color:var(--ink-soft);margin-top:1.3rem}
.portfolio__body .btn{margin-top:2.2rem}

/* ---------- 12. VALUES -------------------------------------------------- */
.values__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:clamp(2.2rem,4vw,3.2rem)}
.value{background:var(--bg);padding:clamp(1.8rem,4vw,3rem) clamp(1.5rem,3vw,2.5rem);display:flex;gap:1.5rem;align-items:flex-start}
.value__k{font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);color:var(--gold);line-height:1;min-width:2ch}
.value h3{font-size:clamp(1.2rem,1.8vw,1.5rem)}
.value p{color:var(--ink-soft);font-size:.94rem;margin-top:.5rem}

/* Leadership (about page) — Chairman + CEO */
.leaders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4vw,3.5rem)}
.leader__photo{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line);background:#EDE7DB;box-shadow:var(--shadow)}
.leader__photo img{width:100%;height:100%;object-fit:cover;object-position:center top;filter:sepia(.12) contrast(1.02) brightness(1.01)}
.leader__role{display:inline-block;margin-top:1.4rem;font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.leader h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,2.4vw,2.1rem);margin:.35rem 0 .8rem}
.leader p{color:var(--ink-soft);max-width:46ch}
@media (max-width:700px){.leaders{grid-template-columns:1fr;gap:2.5rem;max-width:440px}}

/* ---------- 13. PARTNERS ------------------------------------------------ */
.partners{text-align:center}
.partners__head{margin-bottom:clamp(2rem,4vw,3.2rem)}
.partners__wall{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(2rem,6vw,5rem)}
.partners__wall img{
  height:clamp(30px,4vw,46px);width:auto;opacity:.55;
  filter:brightness(0) invert(1);
  transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease)
}
html[data-theme="light"] .partners__wall img{filter:brightness(0);opacity:.55}
.partners__wall img:hover{opacity:1;transform:translateY(-3px);
  filter:brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(2deg) brightness(.95)}
html[data-theme="light"] .partners__wall img:hover{filter:brightness(0.4) sepia(1) saturate(2)}

/* ---------- 14. CTA BAND ------------------------------------------------ */
.cta-band{position:relative;text-align:center;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 140% at 50% 0%,rgba(201,161,94,.14),transparent 60%)}
.cta-band .crest{width:clamp(70px,10vw,110px);height:auto;margin:0 auto 2rem;opacity:.9}
.cta-band h2{font-size:clamp(2.2rem,6vw,4.6rem);max-width:18ch;margin-inline:auto}
.cta-band p{color:var(--ink-soft);margin:1.4rem auto 0;max-width:48ch}
.cta-band__actions{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ---------- 15. CONTACT ------------------------------------------------- */
.contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}
.contact__list{display:flex;flex-direction:column}
.contact__row{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding-block:1.5rem;border-top:1px solid var(--line)}
.contact__row:last-child{border-bottom:1px solid var(--line)}
.contact__row .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted)}
.contact__row .v{font-family:var(--serif);font-size:clamp(1.2rem,2vw,1.7rem);color:var(--ink)}
.contact__row a.v:hover{color:var(--gold)}
.contact__cta h2{font-size:clamp(1.9rem,4vw,3rem)}
.contact__cta p{color:var(--ink-soft);margin-top:1.2rem}
.contact__cta .btn{margin-top:2rem}

/* ---------- 16. FOOTER -------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(3rem,6vw,5rem) 2.5rem}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2.5rem;margin-bottom:3rem}
.footer-brand__word{font-family:var(--serif);font-weight:500;font-size:1.7rem;letter-spacing:.3em;text-transform:uppercase;color:#C9A15E;display:inline-block;margin-bottom:1.1rem;padding-left:.3em}
.footer-brand p{color:var(--muted);max-width:34ch;font-size:.92rem}
.footer-cols{display:flex;gap:clamp(2.5rem,6vw,6rem);flex-wrap:wrap}
.footer-col h4{font-family:var(--sans);font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:1.2rem}
.footer-col a{display:block;color:var(--ink-soft);padding-block:.4rem;font-size:.95rem;transition:color .3s,padding-left .3s}
.footer-col a:hover{color:var(--gold);padding-left:.3rem}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;border-top:1px solid var(--line);padding-top:2rem;color:var(--muted);font-size:.82rem}
.footer-bottom .note{color:var(--gold);opacity:.85}
/* centred footer on mobile */
@media (max-width:720px){
  .footer-top{flex-direction:column;align-items:center;text-align:center}
  .footer-brand{display:flex;flex-direction:column;align-items:center}
  .footer-brand p{max-width:40ch}
  .footer-cols{width:100%;justify-content:center;text-align:center;gap:clamp(2rem,12vw,4rem)}
  .footer-col a:hover{padding-left:0}
  .footer-bottom{flex-direction:column;text-align:center;gap:.7rem}
}

/* ---------- 17. PLACEHOLDER FLAG (concept only) ------------------------- */
[data-placeholder]{position:relative}
.ph-badge{
  display:inline-block;font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);border:1px solid var(--line-2);border-radius:999px;
  padding:.2em .7em;margin-left:.6em;vertical-align:middle;opacity:.7
}

/* ---------- 18. RESPONSIVE ---------------------------------------------- */
@media (max-width:980px){
  :root{--header-h:72px}
  .menu{grid-template-columns:1fr}
  .menu__preview{display:none}
  .about .grid,.portfolio .grid,.contact .grid{grid-template-columns:1fr}
  .about__media{aspect-ratio:16/10;order:-1}
  .services__grid{grid-template-columns:repeat(2,1fr)}
  .svc p{max-height:12rem;opacity:1;margin-top:.9rem}   /* touch: show copy */
  .svc__more{opacity:1;transform:none}
  .values__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .site-header .container{padding-inline:1.25rem}
  .menu-toggle .label-open,.menu-toggle .label-close{display:none}
  body.menu-open .menu-toggle .label-close{display:none}
  .brand{position:absolute;left:50%;transform:translateX(-50%)}
  .header-actions{width:100%;justify-content:space-between}
  .menu-toggle{order:-1}   /* menu → far left */
  .theme-toggle{order:1}   /* sun → far right */
  .hero__stats{grid-template-columns:1fr 1fr}
  .stat:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--line);padding-left:0}
  .services__grid{grid-template-columns:1fr}
  .scroll-cue{display:none}
  .footer-top{flex-direction:column}
}

/* ---------- 19. REDUCED MOTION ------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.line-mask>*,.split-char{opacity:1!important;transform:none!important}
  .hero__bg img,.about__media img,.portfolio__media img{transform:none}
  .scroll-cue::after{animation:none}
}

/* =========================================================================
   20. PROJECTS — case-study grid + filter + detail modal
   ========================================================================= */
.projects .section-head{display:flex;flex-direction:column}
.filter{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:clamp(2rem,4vw,3rem)}
.filter button{
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.7em 1.4em;
  transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)
}
.filter button:hover{color:var(--ink);border-color:var(--line-2)}
.filter button.is-active{color:#141210;background:var(--metal);border-color:transparent}

.projects__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.6vw,1.5rem)}
.project{
  position:relative;overflow:hidden;border-radius:6px;aspect-ratio:4/5;cursor:pointer;
  border:1px solid var(--line);background:var(--bg-2);
  transition:opacity .5s var(--ease),transform .5s var(--ease)
}
.project.is-hidden{display:none}
.project img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(1.05) contrast(1) saturate(1.05) sepia(.04);
  transform:scale(1.04);transition:transform 1s var(--ease),filter .6s var(--ease)
}
.project::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,11,10,.9));transition:opacity .5s}
.project__body{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(1.2rem,2vw,1.8rem);width:100%}
.project__cat{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.project__name{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,1.8vw,1.7rem);color:#F3ECDD;margin-top:.3rem;line-height:1.1}
.project__meta{font-size:.8rem;color:rgba(243,236,221,.82);margin-top:.35rem;display:flex;gap:.6rem;align-items:center;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.project__view{position:absolute;top:1.1rem;right:1.1rem;z-index:2;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);
  opacity:0;transform:scale(.8) rotate(-20deg);transition:opacity .5s var(--ease),transform .5s var(--ease),background .4s,color .4s}
.project__view svg{width:16px;height:16px}
.project:hover img{transform:scale(1.1);filter:brightness(1.14) contrast(1) saturate(1.08) sepia(.02)}
.project:hover .project__meta{opacity:1;transform:none}
.project:hover .project__view{opacity:1;transform:scale(1) rotate(0)}
.project:hover .project__view{background:var(--metal);color:#141210;border-color:transparent}
.projects__grid:has(.project:hover) .project:not(:hover){opacity:.55}

/* detail modal */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.modal.is-open{opacity:1;visibility:visible}
.modal__scrim{position:absolute;inset:0;background:rgba(6,5,4,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal__panel{
  --ink:#F3ECDD;--ink-soft:#C9BEA8;--gold:#C9A15E;--line:rgba(243,236,221,0.14);
  position:relative;z-index:2;width:min(1040px,100%);max-height:90vh;overflow:auto;
  background:#141210;color:var(--ink);border:1px solid var(--line);border-radius:10px;
  display:grid;grid-template-columns:1.1fr .9fr;box-shadow:var(--shadow);
  transform:translateY(26px) scale(.98);transition:transform .6s var(--ease)}
.modal.is-open .modal__panel{transform:none}
.modal__media{position:relative;min-height:340px}
.modal__media img{width:100%;height:100%;object-fit:cover;filter:brightness(1.04) contrast(1) sepia(.04)}
.modal__body{padding:clamp(1.8rem,3vw,2.8rem);display:flex;flex-direction:column}
.modal__cat{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.modal__body h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3vw,2.6rem);margin:.5rem 0 .2rem;color:var(--ink)}
.modal__loc{color:var(--ink-soft);font-size:.95rem;margin-bottom:1.4rem}
.modal__desc{color:var(--ink-soft);font-size:.98rem;line-height:1.7}
.modal__facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:auto}
.modal__facts>div{background:#141210;padding:1rem 1.2rem}
.modal__facts .fk{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);opacity:.85}
.modal__facts .fv{font-family:var(--serif);font-size:1.35rem;color:var(--ink);margin-top:.2rem}
.modal__close{position:absolute;top:1rem;right:1rem;z-index:3;width:44px;height:44px;border-radius:50%;
  background:rgba(12,11,10,.6);border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;transition:transform .4s,background .4s}
.modal__close:hover{transform:rotate(90deg);background:var(--gold);color:#141210}
.modal__ph{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.6;margin-top:1.2rem}
body.modal-open{overflow:hidden}

/* =========================================================================
   21. LEGACY — heritage story + milestone timeline
   ========================================================================= */
.legacy__intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-bottom:clamp(3.5rem,8vw,6.5rem)}
.legacy__media{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:5/6}
.legacy__media img{width:100%;height:100%;object-fit:cover;filter:brightness(1.05) contrast(1) sepia(.1) saturate(1.06);transform:scale(1.12);will-change:transform}
.legacy__media::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(201,161,94,.12),transparent 50%,rgba(12,11,10,.5))}
.legacy__media .frame-tag{position:absolute;left:1.4rem;bottom:1.4rem;z-index:2;font-family:var(--serif);font-style:italic;font-size:1.15rem;color:#F3ECDD}
.legacy__story .about__lead{margin-top:1.2rem}
.legacy__story p{color:var(--ink-soft);margin-top:1.3rem}
.legacy__quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.35;color:var(--gold-bright);border-left:2px solid var(--gold);padding-left:1.4rem;margin-top:2rem}
.legacy__story .btn{margin-top:1.6rem}   /* breathing room below the pull-quote */

.timeline{position:relative;max-width:920px;margin-inline:auto}
.timeline::before{content:"";position:absolute;left:5px;top:.5rem;bottom:.5rem;width:1px;
  background:linear-gradient(180deg,var(--gold),rgba(201,161,94,.12))}
.milestone{position:relative;padding-left:clamp(2.2rem,5vw,3.2rem);padding-bottom:clamp(2.5rem,5vw,3.6rem)}
.milestone:last-child{padding-bottom:0}
.milestone::before{content:"";position:absolute;left:0;top:.5rem;
  width:11px;height:11px;border-radius:50%;background:var(--metal);box-shadow:0 0 0 4px var(--bg),0 0 14px rgba(201,161,94,.5)}
.milestone__year{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--gold-bright)}
.milestone__title{font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,2vw,1.7rem);margin:.5rem 0 .5rem;color:var(--ink)}
.milestone__text{color:var(--ink-soft);max-width:56ch}
.legacy__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-top:clamp(3rem,6vw,5rem)}
.legacy__stats .lstat{background:var(--bg);padding:clamp(1.6rem,3vw,2.4rem);text-align:center}
.legacy__stats .lstat b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,3.2rem);color:var(--gold-bright);line-height:1}
.legacy__stats .lstat span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem;display:block}

/* responsive for the two new sections */
@media (max-width:980px){
  .projects__grid{grid-template-columns:repeat(2,1fr)}
  .project__meta{opacity:1;transform:none}
  .modal__panel{grid-template-columns:1fr;max-height:88vh}
  .modal__media{min-height:230px;aspect-ratio:16/10}
  .legacy__intro{grid-template-columns:1fr}
  .legacy__media{order:-1;aspect-ratio:16/10}
}
@media (max-width:560px){
  .projects__grid{grid-template-columns:1fr}
  .modal__facts{grid-template-columns:1fr}
  .legacy__stats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .project img,.legacy__media img{transform:none}
  .modal__panel{transform:none}
}

/* =========================================================================
   22. FEATURED PROJECT CARD (homepage flagship)
   ========================================================================= */
.project-featured{
  position:relative;display:grid;grid-template-columns:1.25fr .75fr;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--bg-2);
  margin-bottom:clamp(2rem,4vw,3rem);min-height:clamp(360px,42vw,520px)
}
/* fixed 5:4 frame so a portrait source can't blow the card height out
   (matches Diamond's native 1402x1122); mobile overrides to 16/10 below */
.project-featured__media{position:relative;overflow:hidden;aspect-ratio:5/4}
.project-featured__media img{width:100%;height:100%;object-fit:cover;
  filter:brightness(1.05) contrast(1) saturate(1.03);transform:scale(1.03);transition:transform 1.2s var(--ease)}
.project-featured:hover .project-featured__media img{transform:scale(1.08)}
.project-featured__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,rgba(20,18,16,.6))}
.project-featured__badge{position:absolute;top:1.2rem;left:1.2rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#141210;
  background:var(--metal);padding:.55em 1.1em;border-radius:999px}
.project-featured__body{padding:clamp(1.8rem,3vw,3rem);display:flex;flex-direction:column;justify-content:center}
.project-featured__cat{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.project-featured__body h3{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.02;margin:.5rem 0 .1rem}
.project-featured__loc{color:var(--ink-soft);font-size:.98rem;margin-bottom:1.2rem}
.project-featured__desc{color:var(--ink-soft);font-size:1rem;line-height:1.65;max-width:44ch}
.project-featured__stats{display:flex;gap:2rem;margin:1.6rem 0 1.8rem;flex-wrap:wrap}
.project-featured__stats div b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--gold-bright);line-height:1}
.project-featured__stats div span{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.project-featured .btn{align-self:flex-start}

/* card as link (homepage grid) */
a.project{display:block;text-decoration:none;color:inherit}

/* =========================================================================
   23. PROJECT DETAIL PAGE (project.html)
   ========================================================================= */
.pd-hero{
  --bg:#0C0B0A;--ink:#F3ECDD;--ink-soft:#C9BEA8;--gold:#C9A15E;--line:rgba(243,236,221,0.12);
  position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg);color:var(--ink)
}
.pd-hero__bg{position:absolute;inset:0;z-index:0}
.pd-hero__bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.7) contrast(1.05) saturate(1.06);transform:scale(1.08)}
.pd-hero__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,10,.55),rgba(12,11,10,.12) 35%,rgba(12,11,10,.9))}
.pd-hero__content{position:relative;z-index:2;width:100%;padding-block:clamp(2.5rem,6vw,4.5rem);color:var(--ink)}
.pd-back{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.8rem;transition:color .3s,gap .3s}
.pd-back:hover{color:var(--gold);gap:.9rem}
.pd-hero__eyebrow{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.1rem}
.pd-hero__tag{font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#141210;background:var(--metal);padding:.5em 1.1em;border-radius:999px}
.pd-hero h1{font-size:clamp(2.6rem,7vw,6rem);line-height:.98;color:var(--ink)}
.pd-hero__sub{margin-top:1.2rem;max-width:52ch;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.2rem)}
.pd-hero__quick{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.pd-hero__quick div b{display:block;font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,2rem);color:var(--gold-bright);line-height:1}
.pd-hero__quick div span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pd-hero__cta{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}

.pd-section{padding-block:var(--section-y)}
.pd-section--tight{padding-block:clamp(3rem,6vw,5rem)}
.pd-overview{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(2rem,5vw,5rem)}
.pd-overview__lead{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.15rem);line-height:1.3;color:var(--ink);font-weight:500}
.pd-overview p{color:var(--ink-soft);margin-top:1.3rem}
.pd-facts{border-top:1px solid var(--line)}
.pd-facts .row{display:flex;justify-content:space-between;gap:1.5rem;padding-block:.95rem;border-bottom:1px solid var(--line)}
.pd-facts .row .k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pd-facts .row .v{font-family:var(--serif);font-size:1.12rem;color:var(--ink);text-align:right}

/* unit mix */
.unit-mix{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:clamp(2.5rem,5vw,4rem)}
.unit-mix .u{background:var(--bg-2);padding:clamp(1.6rem,3vw,2.4rem);text-align:center}
.unit-mix .u b{display:block;font-family:var(--serif);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--gold-bright);line-height:1}
.unit-mix .u span{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.5rem;display:block}

/* gallery */
.pd-gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px}
.pd-gallery figure{position:relative;overflow:hidden;border-radius:6px;cursor:pointer;aspect-ratio:3/2;border:1px solid var(--line)}
.pd-gallery figure:first-child{grid-column:span 2;grid-row:span 2}
.pd-gallery img{width:100%;height:100%;object-fit:cover;filter:brightness(1.05) contrast(1);transition:transform .9s var(--ease),filter .5s}
.pd-gallery figure:hover img{transform:scale(1.06);filter:brightness(1.13) contrast(1)}
.pd-gallery figcaption{position:absolute;left:0;bottom:0;z-index:2;padding:.9rem 1.1rem;font-size:.78rem;letter-spacing:.04em;color:#F3ECDD;
  background:linear-gradient(transparent,rgba(12,11,10,.75));width:100%;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.pd-gallery figure:hover figcaption{opacity:1;transform:none}
.pd-gallery .zoom{position:absolute;top:.8rem;right:.8rem;z-index:2;width:34px;height:34px;border-radius:50%;background:rgba(12,11,10,.5);display:grid;place-items:center;color:var(--ink);opacity:0;transition:opacity .4s}
.pd-gallery figure:hover .zoom{opacity:1}
.pd-gallery .zoom svg{width:15px;height:15px}

/* floor-plan viewer */
.fp-viewer{display:grid;grid-template-columns:220px 1fr;gap:clamp(1.5rem,3vw,2.5rem);align-items:start}
.fp-tabs{display:flex;flex-direction:column;gap:.5rem}
.fp-tabs button{text-align:left;font-family:var(--sans);font-size:.86rem;letter-spacing:.02em;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:8px;padding:.85em 1.1em;transition:all .35s var(--ease);display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.fp-tabs button .n{font-size:.66rem;color:var(--muted);letter-spacing:.1em}
.fp-tabs button:hover{border-color:var(--line-2);color:var(--ink)}
.fp-tabs button.is-active{background:var(--metal);color:#141210;border-color:transparent}
.fp-tabs button.is-active .n{color:rgba(12,11,10,.7)}
.fp-stage{position:relative;background:#F3ECDD;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in;min-height:320px}
.fp-stage img{width:100%;height:auto;display:block}
.fp-stage__hint{position:absolute;top:1rem;right:1rem;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#5b513f;background:rgba(255,255,255,.7);padding:.4em .8em;border-radius:999px;pointer-events:none}
.fp-stage__label{position:absolute;left:1rem;bottom:1rem;font-family:var(--serif);font-size:1.1rem;color:#1a1613;background:rgba(243,236,221,.85);padding:.3em .9em;border-radius:6px}

/* amenities */
.amenities{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.amenities .a{background:var(--bg-2);padding:clamp(1.4rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1rem;min-height:150px}
.amenities .a svg{width:30px;height:30px;stroke:var(--gold);fill:none;stroke-width:1.2}
.amenities .a span{font-size:.95rem;color:var(--ink);margin-top:auto;font-family:var(--serif);font-size:1.15rem}

/* materials */
.materials{display:flex;flex-wrap:wrap;gap:clamp(1.2rem,2.5vw,2rem)}
.materials .m{text-align:center}
.materials .m i{display:block;width:72px;height:72px;border-radius:50%;border:1px solid var(--line-2);margin:0 auto .7rem;box-shadow:inset 0 -8px 16px rgba(0,0,0,.15)}
.materials .m span{font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft)}

/* boards strip */
.boards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.boards figure{background:#F3ECDD;border-radius:8px;overflow:hidden;box-shadow:var(--shadow);cursor:zoom-in}
.boards img{width:100%;height:auto;display:block}
.boards figcaption{padding:.8rem 1.1rem;font-size:.76rem;letter-spacing:.06em;color:#5b513f;text-transform:uppercase}

/* register interest */
.pd-register{position:relative;overflow:hidden}
.pd-register::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 50% 0%,rgba(201,161,94,.12),transparent 60%)}
.register-card{position:relative;max-width:760px;margin-inline:auto;text-align:center}
.register-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.2rem;text-align:left}
.register-form .full{grid-column:1/-1}
.register-form label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.register-form input,.register-form textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:.9em 1em;color:var(--ink);font-family:var(--sans);font-size:.95rem;transition:border-color .3s}
.register-form input:focus,.register-form textarea:focus{outline:none;border-color:var(--gold)}
.register-form .btn{justify-self:center}

/* coming-soon (placeholder projects) */
.coming-soon{text-align:center;border:1px dashed var(--line-2);border-radius:10px;padding:clamp(2.5rem,6vw,4rem);background:var(--bg-2)}
.coming-soon .eyebrow{margin-bottom:1rem}
.coming-soon h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:1rem}
.coming-soon p{color:var(--ink-soft);max-width:52ch;margin:0 auto 1.8rem}

/* =========================================================================
   24. IN THE PRESS (Legacy)
   ========================================================================= */
.press{margin-top:clamp(3.5rem,7vw,6rem)}
.press__head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:2.4rem}
.press__quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-bottom:clamp(2.5rem,5vw,3.5rem)}
.press__quote{border-top:1px solid var(--line);padding-top:1.4rem}
.press__quote q{font-family:var(--serif);font-style:italic;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.35;color:var(--ink);display:block}
.press__quote cite{display:block;margin-top:.9rem;font-style:normal;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.press__rail{display:flex;gap:1.2rem;overflow-x:auto;padding-bottom:1.2rem;scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.press__rail::-webkit-scrollbar{height:6px}
.press__rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.clip{flex:0 0 auto;width:clamp(180px,20vw,240px);scroll-snap-align:start;cursor:pointer;background:#F3ECDD;
  border-radius:4px;padding:10px 10px 0;box-shadow:var(--shadow);transition:transform .5s var(--ease);position:relative}
.clip:nth-child(even){transform:rotate(-.8deg)}
.clip:hover{transform:translateY(-6px) rotate(0);z-index:2}
.clip img{width:100%;height:300px;object-fit:cover;object-position:top;border-radius:2px;filter:grayscale(.1) contrast(1.03)}
.clip figcaption{padding:.7rem .2rem .9rem;font-size:.66rem;letter-spacing:.06em;color:#5b513f;text-transform:uppercase;text-align:center}
.press__all{margin-top:1.6rem;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;gap:.5rem;cursor:pointer;background:none;border:none}

/* =========================================================================
   25. SHARED LIGHTBOX
   ========================================================================= */
.lightbox{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox__scrim{position:absolute;inset:0;background:rgba(6,5,4,.92);backdrop-filter:blur(4px)}
.lightbox__stage{position:relative;z-index:2;max-width:min(1200px,94vw);max-height:88vh;display:flex;flex-direction:column;align-items:center}
.lightbox__stage img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:4px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox__cap{margin-top:1rem;color:#C9BEA8;font-size:.85rem;letter-spacing:.04em;text-align:center}
.lightbox__cap .count{color:var(--gold);margin-right:.8rem}
.lightbox__btn{position:absolute;z-index:3;width:52px;height:52px;border-radius:50%;background:rgba(20,18,16,.7);
  border:1px solid var(--line-2);color:#F3ECDD;display:grid;place-items:center;transition:background .3s,transform .3s}
.lightbox__btn:hover{background:var(--gold);color:#141210}
.lightbox__btn svg{width:20px;height:20px}
.lightbox__close{top:1.4rem;right:1.4rem}
.lightbox__prev{left:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox__prev:hover{transform:translateY(-50%) scale(1.08)}
.lightbox__next:hover{transform:translateY(-50%) scale(1.08)}

/* responsive — project page / press / lightbox */
@media (max-width:980px){
  .project-featured{grid-template-columns:1fr}
  .project-featured__media{aspect-ratio:16/10}
  .project-featured__media::after{background:linear-gradient(180deg,transparent 55%,rgba(20,18,16,.7))}
  .pd-overview{grid-template-columns:1fr}
  .pd-gallery{grid-template-columns:repeat(2,1fr)}
  .pd-gallery figure:first-child{grid-column:span 2;grid-row:auto}
  .fp-viewer{grid-template-columns:1fr}
  .fp-tabs{flex-direction:row;flex-wrap:wrap}
  .fp-tabs button{flex:1 1 30%}
  .amenities{grid-template-columns:repeat(2,1fr)}
  .press__quotes{grid-template-columns:1fr}
  .boards{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pd-hero__quick{gap:1.4rem}
  .pd-gallery{grid-template-columns:1fr}
  .pd-gallery figure:first-child{grid-column:auto}
  .unit-mix{grid-template-columns:1fr}
  .amenities{grid-template-columns:1fr}
  .register-form{grid-template-columns:1fr}
  .lightbox__prev{left:.5rem}.lightbox__next{right:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .project-featured__media img,.pd-hero__bg img,.pd-gallery img,.clip{transform:none!important}
}

/* =========================================================================
   26. PAGE HERO (sub-pages) + active nav + section links
   ========================================================================= */
.page-hero{
  --bg:#0C0B0A;--ink:#F3ECDD;--ink-soft:#C9BEA8;--gold:#C9A15E;--line:rgba(243,236,221,0.12);
  position:relative;min-height:clamp(430px,64svh,700px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--bg);color:var(--ink)
}
.page-hero__bg{position:absolute;inset:0;z-index:0}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;
  filter:brightness(.5) contrast(1.08) saturate(1.08) sepia(.14);transform:scale(1.06)}
.page-hero__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 100% at 78% 12%,rgba(201,161,94,.13),transparent 55%),
             linear-gradient(180deg,rgba(12,11,10,.55),rgba(12,11,10,.25) 40%,rgba(12,11,10,.92))}
.page-hero__content{position:relative;z-index:2;width:100%;color:var(--ink);
  padding-block:clamp(2.5rem,6vw,4.5rem);animation:pageHeroIn 1s var(--ease) both}
.page-hero .eyebrow{margin-bottom:1.3rem}
.page-hero h1{font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;color:var(--ink);text-wrap:balance}
.page-hero h1 .tagline-serif{font-style:italic;color:var(--gold-bright)}
.page-hero__sub{margin-top:1.4rem;max-width:54ch;color:var(--ink-soft);font-size:clamp(1rem,1.4vw,1.18rem)}
@keyframes pageHeroIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* active nav item in the fullscreen menu */
.menu__nav a[aria-current="page"]{color:var(--gold-bright)}
.menu__nav a[aria-current="page"] .idx{opacity:1}

/* small "view all" section link */
.section-link{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.6rem;
  font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.section-link .btn__arrow{transition:transform .4s var(--ease)}
.section-link:hover .btn__arrow{transform:translateX(5px)}
.services__foot{margin-top:clamp(2rem,4vw,3rem)}

/* contact page extras */
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.contact-form .full{grid-column:1/-1}
.contact-form label{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.contact-form input,.contact-form textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;
  padding:.9em 1em;color:var(--ink);font-family:var(--sans);font-size:.95rem;transition:border-color .3s}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--gold)}
.studio-card{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:clamp(1.6rem,3vw,2.4rem);margin-top:2rem}
.studio-card h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;margin-bottom:.4rem}
.studio-card p{color:var(--ink-soft);font-size:.95rem}
.map-embed{border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:var(--shadow);line-height:0;background:var(--bg-2)}
.map-embed iframe{width:100%;height:clamp(320px,44vh,460px);border:0;display:block;filter:grayscale(.2) sepia(.08) contrast(.98)}

/* FAQ accordion (contact page) */
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.faq__intro h2{font-size:clamp(2rem,4.5vw,3.2rem);margin-top:1rem}
.faq__intro p{color:var(--ink-soft);margin-top:1.3rem;max-width:46ch}
.faq__intro .btn{margin-top:2rem}
.accordion{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;
  padding:clamp(1.15rem,2.4vw,1.6rem) .2rem;text-align:left;font-family:var(--serif);
  font-weight:500;font-size:clamp(1.12rem,1.7vw,1.4rem);color:var(--ink);transition:color .3s}
.acc-q:hover{color:var(--gold)}
.acc-q svg{flex:0 0 auto;width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.6;transition:transform .45s var(--ease)}
.acc-item.is-open .acc-q svg{transform:rotate(180deg)}
.acc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc-item.is-open .acc-a{grid-template-rows:1fr}
.acc-a > div{overflow:hidden}
.acc-a p{color:var(--ink-soft);padding:0 .2rem clamp(1.15rem,2.4vw,1.6rem);max-width:62ch;line-height:1.7}
@media (max-width:820px){ .faq__grid{grid-template-columns:1fr} }
@media (max-width:560px){ .contact-form{grid-template-columns:1fr} }

/* ---------- 20. LANGUAGE SWITCHER + RTL (Arabic) ---------------------- */
.lang-fab{
  position:fixed;z-index:95;right:clamp(1.1rem,2.5vw,1.9rem);
  bottom:calc(clamp(1.1rem,2.5vw,1.9rem) + 68px);
  width:52px;height:52px;padding:0;border-radius:50%;cursor:pointer;line-height:1;
  display:grid;place-items:center;background:var(--bg);color:var(--gold);
  border:1px solid var(--gold);font-family:var(--serif);font-size:1.15rem;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
  transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.lang-fab[data-lang="ar"]{font-family:var(--sans);font-size:.78rem;font-weight:700;letter-spacing:.04em}
.lang-fab:hover{transform:scale(1.08);background:var(--gold);color:#1A1613}
body.menu-open .lang-fab{opacity:0;pointer-events:none}
html[dir="rtl"] .lang-fab{right:auto;left:clamp(1.1rem,2.5vw,1.9rem)}

/* Arabic type + RTL */
html[dir="rtl"]{--serif:'Amiri',Georgia,serif;--sans:'Tajawal','Inter',sans-serif}
html[dir="rtl"] body{font-family:var(--sans)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] .tagline-serif,
html[dir="rtl"] .metal-text,html[dir="rtl"] .brand__word,html[dir="rtl"] .legacy__quote{font-family:var(--serif)}
/* Arabic display type is taller than Latin — give headings room and lift the hero char-mask clip */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3{line-height:1.35}
html[dir="rtl"] .hero h1{line-height:1.75}
html[dir="rtl"] .hero h1 .row{overflow:visible}
/* fullscreen menu: taller Arabic glyphs — lift the item mask + add line room */
html[dir="rtl"] .menu__nav li{overflow:visible}
html[dir="rtl"] .menu__nav a{line-height:1.5}
/* footer contact links are LTR (phone/email) — keep them right-aligned like the rest */
html[dir="rtl"] .footer-col a{text-align:right}
/* Arabic script has no case and must not be letter-spaced (breaks joins) */
html[dir="rtl"] .eyebrow,html[dir="rtl"] .brand__word,html[dir="rtl"] .marquee__track span,
html[dir="rtl"] .btn,html[dir="rtl"] .svc__more,html[dir="rtl"] .section-link,
html[dir="rtl"] .footer-col h4,html[dir="rtl"] .leader__role,html[dir="rtl"] .k,
html[dir="rtl"] .pv__label,html[dir="rtl"] .idx,html[dir="rtl"] .frame-tag{letter-spacing:normal;text-transform:none}
/* the eyebrow accent line sits on the correct side automatically via fl/gap, but flip its margins */
/* the eyebrow lead-line is pinned left — drop it (and its padding) in RTL */
html[dir="rtl"] .eyebrow--line{padding-left:0}
html[dir="rtl"] .eyebrow--line::before{display:none}
/* keep phone / email / latin numerals left-to-right inside RTL text */
html[dir="rtl"] a[href^="tel:"],html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .contact__row .v,html[dir="rtl"] .project-featured__stats b,
html[dir="rtl"] .pd-hero__quick b,html[dir="rtl"] .milestone__year{direction:ltr;unicode-bidi:isolate}
/* WhatsApp + cursor stay put; menu/preview flip naturally with fl/grid */
html[dir="rtl"] .wa-fab{right:auto;left:clamp(1.1rem,2.5vw,1.9rem)}