/* DINAR direction C shared stylesheet. Extracted 2026-09-21 from the inline <style> of index.html so the inner pages speak the same visual language. index.html still carries its own inline copy; when both are stable, index should link this file too. */
/* Direction C, built from the 2026-09-20 research (ERA Residence, OMNIYAT, Aman, Sobha, Sea Breeze):
   one idea per screen · serif display, small tracked sans labels · ONE hero video and ONE gold moment, stills elsewhere ·
   small images in large ivory space · editorial 60/30 rows instead of tiles · figures as typography with a source ·
   a quiet, persistent enquiry. Palette is the brand book without the navy. Gold is hairlines, the DR mark, and one band. */
:root{
  --ivory:#F4F0E7; --stone:#DED6C8; --taupe:#9A8775; --espresso:#211C17; --gold:#C9A972; --gold-deep:#86672c; --paper:#fffdf8;
  --metal:linear-gradient(105deg,#8a6a30 0%,#c9a972 22%,#fbeec6 46%,#d2b47c 58%,#8f6f35 100%);
  --maxw:1280px; --gut:clamp(20px,5vw,72px); --ease:cubic-bezier(.19,.7,.22,1);
  --f-serif:"Frank Ruhl Libre",Georgia,serif; --f-sans:"Heebo","Segoe UI",Arial,sans-serif; --f-lat:"Cormorant Garamond",Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--espresso);font-family:var(--f-sans);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--f-serif);font-weight:500;margin:0;line-height:1.08;text-wrap:balance}
p{margin:0}
button{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.label{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--taupe)}
.lat{font-family:var(--f-lat);letter-spacing:.04em;direction:ltr;unicode-bidi:isolate}
.rule{height:1px;background:var(--gold);border:0;margin:0;transform-origin:right}
.link{display:inline-flex;align-items:center;gap:12px;font-weight:500;font-size:16px;padding-bottom:6px;border-bottom:1px solid var(--gold);transition:gap .4s var(--ease),border-color .3s}
.link:hover{gap:20px;border-color:var(--espresso)}
.link::after{content:"←";font-family:var(--f-sans)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 34px;background:var(--espresso);color:var(--ivory);border:1px solid var(--espresso);font-size:16px;font-weight:500;letter-spacing:.02em;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease)}
.btn:hover{background:transparent;color:var(--espresso)}
.dr{display:block;width:60px;aspect-ratio:320/240;background:var(--metal);background-size:240% 100%;animation:sheen 9s ease-in-out infinite;-webkit-mask:url("assets/logo-dr-mask.png") center/contain no-repeat;mask:url("assets/logo-dr-mask.png") center/contain no-repeat}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}

/* header: logo, menu, WhatsApp. Nothing else. */
.hd{position:fixed;top:0;inset-inline:0;z-index:70;padding-top:env(safe-area-inset-top,0px);color:var(--ivory);transition:background .5s var(--ease),color .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
.hd.solid{background:rgba(244,240,231,.94);backdrop-filter:blur(14px);color:var(--espresso);border-color:var(--stone)}
.hd-in{display:flex;align-items:center;justify-content:space-between;height:78px}
.hd-acts{display:flex;align-items:center;gap:clamp(14px,2.5vw,34px)}
.menu-btn{background:none;border:0;color:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:500;letter-spacing:.22em;padding:10px 0}
.menu-btn i{display:block;width:30px;height:9px;border-block:1px solid currentColor}
.wa-top{font-size:12px;font-weight:500;letter-spacing:.2em;border:1px solid currentColor;padding:11px 20px;transition:background .3s,color .3s}
.wa-top:hover{background:var(--gold);border-color:var(--gold);color:var(--espresso)}
.menu{position:fixed;inset:0;z-index:90;background:var(--espresso);color:var(--ivory);display:flex;flex-direction:column;justify-content:center;padding:90px var(--gut) 40px;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.menu.open{opacity:1;visibility:visible}
.menu a{font-family:var(--f-serif);font-size:clamp(34px,6vw,72px);line-height:1.25;display:flex;align-items:baseline;gap:20px;border-bottom:1px solid rgba(201,169,114,.22);padding:10px 0;transition:color .3s,padding .4s var(--ease)}
.menu a:hover{color:var(--gold);padding-inline-start:16px}
.menu a span{font-family:var(--f-sans);font-size:12px;letter-spacing:.2em;color:var(--taupe)}
.menu-close{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));inset-inline-end:var(--gut);background:none;border:0;color:var(--ivory);font-size:12px;letter-spacing:.22em;cursor:pointer;padding:10px 0}

/* 1 · hero: one video, six words, a scroll cue. The video shrinks into an arch on ivory as you scroll. */
.hero{height:190vh;position:relative}
.hero-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ivory)}
.hero-frame{--p:0;position:absolute;inset:0;overflow:hidden;background:var(--espresso);
  clip-path:inset(calc(var(--p)*16vh) calc(var(--p)*31vw) calc(var(--p)*9vh) calc(var(--p)*31vw) round calc(var(--p)*50vw) calc(var(--p)*50vw) 0 0)}
.hero-frame video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.08 - var(--p)*.08))}
.hero-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,28,23,.35) 0%,rgba(33,28,23,0) 30%,rgba(33,28,23,.62) 100%);opacity:calc(1 - var(--p))}
.hero-copy{position:absolute;inset-inline:0;bottom:clamp(64px,11vh,120px);color:var(--ivory);opacity:calc(1 - var(--p)*2.2);transform:translateY(calc(var(--p)*-40px));pointer-events:none}
.hero-copy .label{color:var(--gold)}
.hero h1{font-size:calc(var(--hs)*clamp(46px,8.2vw,132px));font-weight:500;max-width:11ch;margin-top:18px;letter-spacing:-.01em}
.cue{position:absolute;bottom:34px;inset-inline-end:var(--gut);display:flex;align-items:center;gap:14px;color:var(--ivory);font-size:11px;letter-spacing:.24em;opacity:calc(1 - var(--p)*3)}
.cue i{display:block;width:1px;height:56px;background:rgba(244,240,231,.3);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--gold);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
.hero-after{position:absolute;inset-inline:0;bottom:7vh;text-align:center;opacity:calc((var(--p) - .6)*2.5);pointer-events:none}
.hero-after p{font-family:var(--f-serif);font-size:clamp(20px,2.2vw,30px)}

section{padding-block:clamp(90px,14vh,180px)}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;margin-bottom:clamp(40px,7vh,90px)}
.sec-head .rule{width:100%}

/* 2 · intent: four plain words, one small arched image in a lot of ivory */
.intent{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(40px,8vw,140px);align-items:center}
.words a{display:grid;grid-template-columns:54px 1fr;align-items:baseline;gap:6px 0;padding:clamp(18px,2.6vh,30px) 0;border-bottom:1px solid var(--stone);color:var(--taupe);transition:color .5s var(--ease),padding .5s var(--ease)}
.words a:first-child{border-top:1px solid var(--stone)}
.words a b{font-family:var(--f-serif);font-weight:500;font-size:calc(var(--hs)*clamp(40px,6.4vw,100px));line-height:1}
.words a small{grid-column:2;font-size:16px;color:var(--taupe);max-width:44ch}
.words a .label{align-self:start;padding-top:1.1em}
.words a:hover,.words a.on{color:var(--espresso);padding-inline-start:18px}
.arch{position:relative;aspect-ratio:3/4;border-radius:999px 999px 0 0;overflow:hidden;background:var(--stone);max-width:420px;margin-inline:auto;width:100%}
.arch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:opacity 1s var(--ease),transform 1.6s var(--ease)}
.arch img.on{opacity:1;transform:none}
.warm{filter:sepia(.4) saturate(1.05)}

/* 3 · figures: typography on plain ivory, with a source */
.figs{display:grid;grid-template-columns:repeat(4,1fr)}
.fig{padding:0 clamp(16px,2.4vw,40px);border-inline-start:1px solid var(--gold)}
.fig:first-child{border-inline-start:0;padding-inline-start:0}
.fig b{display:block;font-family:var(--f-serif);font-weight:400;font-size:calc(var(--hs)*clamp(46px,6.4vw,108px));line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;direction:ltr;text-align:right}
.fig b.he{direction:rtl}
.fig span{display:block;margin-top:18px;font-size:15.5px;color:#5d5245;max-width:22ch;min-width:15ch;text-wrap:balance}
.source{margin-top:clamp(36px,6vh,64px);font-size:13.5px;color:var(--taupe)}

/* 4 · flagship: a 60/40 row, real project photography */
.row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(36px,6vw,110px);align-items:center}
.row.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}
.row.flip .pic{order:2}
.pic{overflow:hidden;background:var(--stone);aspect-ratio:4/3}
.pic.tall{aspect-ratio:4/5;max-width:520px}
.duo{position:relative;padding-bottom:clamp(30px,5vw,70px)}
.pic.inset{position:absolute;bottom:0;inset-inline-end:clamp(-56px,-3.4vw,-14px);width:34%;aspect-ratio:4/5;border:clamp(5px,.6vw,9px) solid var(--ivory);background:var(--ivory)}
.pic.inset img{height:100%;object-position:50% 50%}
.pic img{width:100%;height:116%;object-fit:cover;will-change:transform}
.txt h2{font-size:calc(var(--hs)*clamp(36px,4.6vw,70px));margin-top:16px}
.txt h2.lat{font-weight:400;font-size:clamp(50px,6vw,104px);text-align:right;white-space:nowrap}
.txt p{margin-top:22px;color:#5d5245;font-size:18px;max-width:46ch}
.facts{margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--stone)}
.facts li{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--stone);font-size:15.5px;color:#5d5245}
.facts b{font-family:var(--f-serif);font-weight:500;font-size:20px;color:var(--espresso);direction:ltr}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin-top:34px}

/* 5 · project rail: cards as drawings (hairline, 4:5), draggable */
.rail-wrap{position:relative}
.rail{display:flex;gap:clamp(16px,2vw,30px);overflow-x:auto;scroll-snap-type:x proximity;padding-inline:var(--gut);scrollbar-width:none;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.pc{flex:0 0 min(360px,78vw);scroll-snap-align:start;border:1px solid var(--stone);background:var(--paper);user-select:none;transition:border-color .4s}
.pc:hover{border-color:var(--gold)}
.pc .ph{aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.pc img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease);pointer-events:none}
.pc:hover img{transform:scale(1.05)}
.pc .b{padding:20px 22px 24px}
.pc h3{font-family:var(--f-lat);font-weight:500;font-size:30px;direction:ltr;text-align:right;line-height:1.1}
.pc .m{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--stone);font-size:12px;letter-spacing:.14em;color:var(--taupe)}
.pc .m b{color:var(--espresso);font-weight:500;font-size:14px;letter-spacing:.04em;white-space:nowrap}
.dragcue{position:fixed;top:0;left:0;z-index:40;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;background:var(--espresso);color:var(--ivory);display:grid;place-items:center;font-size:11px;letter-spacing:.2em;pointer-events:none;opacity:0;transform:scale(.4);transition:opacity .3s,transform .4s var(--ease)}
.dragcue.on{opacity:1;transform:none}
.rail-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:40px}
.rail-foot span{color:#5d5245;font-size:15.5px}

/* 6 · the gold moment: the second and last video on the page */
.goldband{position:relative;isolation:isolate;min-height:88vh;display:grid;place-items:end center;text-align:center;background:var(--espresso);color:var(--ivory);padding-block:12vh 9vh;overflow:hidden}
.goldband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.goldband::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(33,28,23,.15) 0%,rgba(33,28,23,0) 35%,rgba(33,28,23,.9) 100%)}
.goldband h2{font-size:calc(var(--hs)*clamp(28px,3.6vw,56px));max-width:22ch;margin-inline:auto}
.goldband .label{color:var(--gold);display:block;margin-bottom:26px}
.goldband .hero-cta{margin-top:30px}

/* 7 · how it works */
.steps-head{display:flex;align-items:flex-end;gap:clamp(20px,3vw,44px);margin-top:clamp(90px,14vh,170px)}
.steps-head video{width:clamp(88px,9vw,132px);aspect-ratio:3/4;object-fit:cover;border-radius:999px 999px 0 0;flex:none}
.steps-head h2{font-size:calc(var(--hs)*clamp(30px,3.8vw,56px));margin-top:12px;max-width:18ch}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(34px,5vh,60px);border-top:1px solid var(--gold)}
.step{padding:26px clamp(12px,1.6vw,26px) 0 0;border-inline-start:1px solid var(--stone);padding-inline-start:clamp(12px,1.6vw,26px)}
.step:first-child{border-inline-start:0;padding-inline-start:0}
.step .lat{font-size:34px;color:var(--gold-deep)}
.step h3{font-size:24px;margin-top:10px}
.step p{font-size:15.5px;color:#5d5245;margin-top:8px}
.stack{display:grid;gap:clamp(80px,13vh,170px)}

/* 8 · founder and contact */
.close{background:var(--paper);border-top:1px solid var(--stone)}
.close-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px);align-items:start}
.founder .arch{max-width:340px;margin:0}
.founder .arch img{opacity:1;transform:none;object-position:50% 0}
.founder blockquote{margin:30px 0 0;font-family:var(--f-serif);font-size:calc(var(--hs)*clamp(22px,2.3vw,30px));line-height:1.4}
.founder .who{margin-top:16px;color:#5d5245;font-size:15.5px}
.form h2{font-size:calc(var(--hs)*clamp(40px,5.4vw,84px))}
.form p{margin-top:16px;color:#5d5245;font-size:18px;max-width:40ch}
.field{margin-top:26px}
.field label{display:block;font-size:12px;letter-spacing:.2em;color:var(--taupe);font-weight:500}
.field input,.field select{width:100%;border:0;border-bottom:1px solid var(--taupe);background:transparent;font-family:var(--f-serif);font-size:22px;color:var(--espresso);padding:10px 0;border-radius:0;min-height:52px}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold-deep)}
.form .btn{margin-top:34px;width:100%}
.fine{font-size:12.5px;color:var(--taupe);margin-top:12px}

footer{background:var(--espresso);color:#cfc5b4;padding-block:56px calc(56px + env(safe-area-inset-bottom,0px));font-size:13.5px}
.ft{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-bottom:30px;border-bottom:1px solid rgba(201,169,114,.24)}
.ft-logo{display:flex;align-items:center;gap:20px}
/* the wordmark file carries a navy plate; it is drawn through an alpha mask instead, in ivory */
.wordmark{display:block;height:30px;aspect-ratio:780/160;background:var(--ivory);-webkit-mask:url("assets/logo-dinar-mask.png") right center/contain no-repeat;mask:url("assets/logo-dinar-mask.png") right center/contain no-repeat}
.ft nav{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;letter-spacing:.18em;color:var(--ivory)}
footer p{margin-top:24px;max-width:100ch;line-height:1.8}

/* quiet, persistent enquiry on mobile */
.dock{display:none}

@media (max-width:980px){
  .intent,.row,.row.flip,.close-in{grid-template-columns:1fr}
  .row.flip .pic{order:0}
  .arch{max-width:300px}
  .figs{grid-template-columns:1fr 1fr;gap:44px 0}
  .fig:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .steps{grid-template-columns:1fr 1fr;gap:34px 0}
  .step:nth-child(odd){border-inline-start:0;padding-inline-start:0}
  .hero-frame{clip-path:inset(calc(var(--p)*14vh) calc(var(--p)*14vw) calc(var(--p)*12vh) calc(var(--p)*14vw) round calc(var(--p)*50vw) calc(var(--p)*50vw) 0 0)}
  .wa-top{display:none}
  .dock{display:grid;grid-template-columns:1fr 1fr;position:fixed;bottom:0;inset-inline:0;z-index:60;background:var(--espresso);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(100%);transition:transform .5s var(--ease)}
  .dock.on{transform:none}
  .dock a{color:var(--ivory);text-align:center;padding:17px 8px;font-size:12px;letter-spacing:.2em;font-weight:500}
  .dock a+a{border-inline-start:1px solid rgba(201,169,114,.3);color:var(--gold)}
  footer{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){
  .words a{grid-template-columns:40px 1fr}
  .hero h1{font-size:calc(var(--hs)*clamp(44px,13vw,70px))}
  .dragcue{display:none}
}

.hp{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
html[dir="ltr"] .link::after{content:"→"}
html[dir="ltr"] .rule,html[dir="ltr"] .btn::before{transform-origin:left}
html[dir="ltr"] .fig b,html[dir="ltr"] .txt h2.lat,html[dir="ltr"] .pc h3{text-align:left}
.menu{justify-content:flex-start;overflow-y:auto}
.menu a{font-size:calc(var(--hs)*clamp(28px,4.4vw,54px))}
/* the language switcher is injected by i18n.js in the old navy skin; re-dress it in the brand palette */
.dnar-lang-btn{background:transparent!important;border:1px solid currentColor!important;color:inherit!important;border-radius:0!important;padding:10px 14px!important;letter-spacing:.12em}
.dnar-lang-menu{background:var(--espresso)!important;border:1px solid rgba(201,169,114,.4)!important;border-radius:0!important}
.dnar-lang-menu button{color:var(--ivory)!important}
.dnar-lang-menu button.on{color:var(--gold)!important}

/* ---------- type per language (tested 2026-09-21 by rendering each script in each candidate face) ----------
   Frank Ruhl Libre and Heebo carry Hebrew and basic Latin only: no Cyrillic, and no Azerbaijani schwa, so Russian and
   Azerbaijani were silently falling back to system fonts. Cormorant Garamond and Montserrat are the pair that cover
   English, Turkish, Azerbaijani (9/9 test letters incl. the schwa) and Russian; Amiri and IBM Plex Sans Arabic cover Arabic.
   --hs scales display type to each face's proportions; Arabic must not be letter-spaced or upper-cased. */
:root{--hs:1;--track:.22em;--lh-head:1.08}
html[lang="en"],html[lang="tr"],html[lang="az"],html[lang="ru"]{--f-serif:"Cormorant Garamond",Georgia,serif;--f-sans:"Montserrat","Segoe UI",Arial,sans-serif;--hs:1.12;--lh-head:1.02}
html[lang="ru"]{--hs:1}
html[lang="ar"]{--f-serif:"Amiri","Noto Naskh Arabic",serif;--f-sans:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;--hs:1.02;--lh-head:1.42;--track:0}
html:not([lang="he"]) body{font-size:16px}
html[lang="ar"] body{font-size:17px;line-height:1.9}
h1,h2,h3{line-height:var(--lh-head)}
.label,.menu-btn,.wa-top,.dock a,.ft nav,.pc .m,.cue,.menu-close,.menu a span{letter-spacing:var(--track)}
html[lang="ar"] .label{text-transform:none;font-size:13.5px}
html:not([lang="he"]) h1,html:not([lang="he"]) h2{font-weight:500;letter-spacing:0}
html:not([lang="he"]) .hero h1{margin-top:28px}
html[lang="ru"] .hero h1{max-width:14ch}
html:not([lang="he"]):not([lang="ar"]) .words a b{font-weight:400}

/* hero, after the video has shrunk into the arch: the line sits UNDER the arch on ivory, never on the footage,
   set in the deep gold ramp with a hairline above it */
.hero-frame{clip-path:inset(calc(var(--p)*13vh) calc(var(--p)*31vw) calc(var(--p)*25vh) calc(var(--p)*31vw) round calc(var(--p)*50vw) calc(var(--p)*50vw) 0 0)}
.hero-after{bottom:6.5vh;display:grid;justify-items:center;gap:2.2vh;opacity:calc((var(--p) - .62)*3);transform:translateY(calc((1 - var(--p))*26px))}
.hero-after i{display:block;width:1px;height:5vh;background:var(--gold)}
.hero-after p{font-family:var(--f-serif);font-weight:500;font-size:calc(var(--hs)*clamp(26px,3.3vw,50px));line-height:1.15;
  background:linear-gradient(105deg,#6a5020 0%,#a07d38 24%,#d8b977 47%,#9a7838 60%,#6a5020 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sheen 8s ease-in-out infinite}

/* the hook: one line of what you get, one line of what it costs in metallic gold, then who walks you through it */
.hero h1{font-size:calc(var(--hs)*clamp(44px,6.8vw,112px));max-width:none}
html[lang="ru"] .hero h1{max-width:none}
.hero-price{font-family:var(--f-serif);font-weight:500;font-size:calc(var(--hs)*clamp(44px,6.8vw,112px));line-height:var(--lh-head);letter-spacing:-.01em;margin:.04em 0 0;color:var(--gold)}
.js .hero-price .w>i{background:linear-gradient(105deg,#c9a972 0%,#e6cf9a 25%,#fff4d2 48%,#d9bd85 62%,#b8934f 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sheen 7s ease-in-out infinite}
.hero-sub{text-wrap:balance;margin:clamp(18px,3vh,30px) 0 0;max-width:46ch;font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:rgba(244,240,231,.86)}
.hero-cta{display:inline-block;margin-top:clamp(20px,3.4vh,34px);padding-bottom:9px;pointer-events:auto;color:var(--ivory);text-decoration:none;font-size:13px;font-weight:500;letter-spacing:var(--track);
  background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;transition:color .5s var(--ease),background-size .7s var(--ease)}
.hero-cta:hover,.hero-cta:focus-visible{color:var(--gold);background-size:40% 1px}
@media(max-width:760px){.hero h1,.hero-price{font-size:calc(var(--hs)*clamp(38px,11.4vw,64px))}.hero-sub{max-width:26ch}}

/* the opening film: three stacked videos in a pinned stage. --t (0..1, set by the scroll) grows each next video out of
   the bottom of the screen as an arch until it fills it. Without the script the first chapter stands alone. */
.hero.film{height:100vh;height:100svh}
.hero.film.live{height:300vh}
.film-stick{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--espresso);color:var(--ivory)}
.film-v{--t:0;position:absolute;inset:0;
  clip-path:inset(calc((1 - var(--t))*100%) calc((1 - var(--t))*30vw) 0 calc((1 - var(--t))*30vw) round calc((1 - var(--t))*50vw) calc((1 - var(--t))*50vw) 0 0)}
.film-v[data-k="0"]{--t:1;clip-path:none}
.film-v video{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.14 - var(--t)*.14))}
/* one video for the whole film (owner, 2026-09-21); the scroll only pushes slowly into it while the chapters change */
.film-v[data-k="0"] video{transform:scale(calc(1 + var(--z,0)*.14));animation:heroZoom 2.6s var(--ease) .9s both}
.film-veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to left,rgba(33,28,23,.5),rgba(33,28,23,0) 62%),linear-gradient(180deg,rgba(33,28,23,.42) 0%,rgba(33,28,23,.05) 32%,rgba(33,28,23,.72) 100%)}
html:not([dir="rtl"]) .film-veil{transform:scaleX(-1)} /* the darker side follows the text */
/* on a phone the open doors fill the screen with light right behind the words, so the lower half is held darker */
@media(max-aspect-ratio:4/5){.film-veil{background:linear-gradient(180deg,rgba(33,28,23,.45) 0%,rgba(33,28,23,.08) 28%,rgba(33,28,23,.6) 56%,rgba(33,28,23,.9) 100%)}}
/* the doors end wide open and bright; the veil deepens as the film advances so chapters II and III stay readable */
.film .film-veil{background-color:rgba(33,28,23,calc(var(--z,0)*.42))}
.film-copy{position:absolute;inset-inline:0;bottom:clamp(64px,11vh,120px);pointer-events:none}
.film .ch{max-width:min(100%,980px)}
.film .ch+.ch{display:none}
.film.live .ch{position:absolute;bottom:0;inset-inline-start:var(--gut);inset-inline-end:var(--gut);display:block;visibility:hidden;transition:visibility 0s 1s}
.film.live .ch.on{visibility:visible;transition-delay:0s}
.film .ch .label{color:var(--gold)}
.film h1,.film h2{font-size:calc(var(--hs)*clamp(40px,6.2vw,104px));font-weight:500;letter-spacing:-.01em;max-width:15ch;margin-top:18px}
.film .ch p{margin-top:clamp(16px,2.6vh,28px);max-width:40ch;font-size:clamp(16px,1.35vw,21px);line-height:1.6;color:rgba(244,240,231,.9);text-wrap:balance}
.film-acts{display:flex;gap:clamp(22px,3vw,44px);flex-wrap:wrap}
.film .ch.on .hero-cta{pointer-events:auto}
.film .ch:not(.on) .hero-cta{pointer-events:none}
/* words rise into the chapter and leave upwards; the small lines fade with them */
.film.live .sw .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.film.live .sw .w>i{display:inline-block;font-style:normal;transform:translateY(118%);transition:transform 1.1s var(--ease)}
.film.live .ch.on .sw .w>i{transform:none}
.film.live .ch:not(.on) .sw .w>i{transition-duration:.55s;transition-delay:0s!important}
.film.live .ch.past .sw .w>i{transform:translateY(-118%)}
.film.live .ch .label,.film.live .ch p,.film.live .film-acts{opacity:0;transform:translateY(18px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.film.live .ch.on .label,.film.live .ch.on p,.film.live .ch.on .film-acts{transition-duration:.8s}
.film.live .ch.on .label{opacity:1;transform:none;transition-delay:.4s}
.film.live .ch.on p{opacity:1;transform:none;transition-delay:.9s}
.film.live .ch.on .film-acts{opacity:1;transform:none;transition-delay:1.15s}
.film.live .ch.past .label,.film.live .ch.past p,.film.live .ch.past .film-acts{transform:translateY(-18px);transition-duration:.45s}
/* the last words of the hook carry the metallic gold */
.film.live h1 .w.g>i{background:linear-gradient(105deg,#c9a972 0%,#e6cf9a 25%,#fff4d2 48%,#d9bd85 62%,#b8934f 100%);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:sheen 7s ease-in-out infinite}
/* when the hook opens with the name, the name stands on its own line */
.film.live h1 .w.g:first-child{display:block}
.film h1{max-width:24ch}
/* chapter marks: I · II · III with a hairline that fills as the film advances */
.film-nav{display:none}
.film.live .film-nav{--fp:0;position:absolute;inset-inline-end:var(--gut);top:50%;transform:translateY(-50%);display:grid;gap:34px;margin:0;padding:0 0 0 0;padding-inline-end:18px;list-style:none;font-family:var(--f-lat);font-size:17px;letter-spacing:.04em;color:rgba(244,240,231,.45);text-align:center}
html[dir="rtl"] .film .ch .label.lat{text-align:right}
.film-nav::before,.film-nav::after{content:"";position:absolute;inset-inline-end:0;top:0;bottom:0;width:1px;background:rgba(244,240,231,.25)}
.film-nav::after{background:var(--gold);transform-origin:top;transform:scaleY(var(--fp))}
.film-nav li{transition:color .5s var(--ease)}
.film-nav li.on{color:var(--gold)}
.film .cue{opacity:calc(1 - var(--p,0)*6)}
@media(max-width:760px){.film h1,.film h2{font-size:calc(var(--hs)*clamp(34px,10vw,58px))}.film.live .film-nav{top:auto;bottom:clamp(64px,11vh,120px);transform:none;display:none}.film .ch p{max-width:30ch}}

/* intent, pinned: the section holds still while the scroll walks through the four words, so every visitor meets
   each one at their own pace, on any device. Only the active word shows its line; a gold rule tracks progress. */
.js .pin{height:calc(100vh + 150vh);padding:0}
.js .pin-stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:78px}
.js .pin-stick>.wrap{width:100%}
.js .pin+section{padding-top:clamp(40px,7vh,90px)!important}
.js .pin .sec-head{margin-bottom:clamp(20px,4vh,56px)}
.js .words{position:relative;padding-inline-start:26px}
.js .words::before,.js .words::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:1px;background:var(--stone)}
.js .words::after{background:var(--gold);transform-origin:top;transform:scaleY(var(--ip,0));transition:transform .5s var(--ease)}
.js .words a{padding-block:clamp(10px,1.9vh,24px)}
.js .words a small{max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .6s var(--ease),margin .6s var(--ease)}
.js .words a.on small{max-height:5em;opacity:1;margin-top:4px}
.js .words a b{transition:transform .7s var(--ease);transform-origin:right center}
.js .words a:not(.on) b{transform:scale(.82)}
html[dir="ltr"] .js .words a b,html[dir="ltr"].js .words a b{transform-origin:left center}

/* five steps */
.steps{grid-template-columns:repeat(5,1fr)}
.step h3{font-size:calc(var(--hs)*21px);line-height:1.2}
.step p{font-size:15px}
.link.sm{font-size:14px;margin-top:16px;padding-bottom:4px;color:var(--gold-deep)}
.step.plnx{background:linear-gradient(180deg,rgba(201,169,114,.12),rgba(201,169,114,0));}
@media (max-width:1100px){.steps{grid-template-columns:1fr 1fr;gap:34px 0}.step:nth-child(odd){border-inline-start:0;padding-inline-start:0}.step:nth-child(even){border-inline-start:1px solid var(--stone);padding-inline-start:clamp(12px,1.6vw,26px)}}
@media (max-width:640px){.steps{grid-template-columns:1fr;gap:0}.step,.step:nth-child(even){border-inline-start:0;padding-inline-start:0;padding-block:22px;border-bottom:1px solid var(--stone)}}
@media (max-width:980px){
  .hero-frame{clip-path:inset(calc(var(--p)*12vh) calc(var(--p)*14vw) calc(var(--p)*33vh) calc(var(--p)*14vw) round calc(var(--p)*50vw) calc(var(--p)*50vw) 0 0)}
  /* the two-action dock covers the bottom 58px on phones, so pinned screens keep clear of it */
  .hero-after{bottom:calc(58px + 4.5vh)}
  .js .pin-stick{padding-bottom:64px}
  .js .pin .intent{gap:14px}
  .js .pin .arch{order:-1;height:25vh;width:auto;max-width:none;aspect-ratio:3/4;margin-inline:auto}
  .js .words a b{font-size:calc(var(--hs)*clamp(34px,9.5vw,56px))}
  .js .words a{grid-template-columns:36px 1fr}
}

/* closing section on the plaster-wall still: the page ends dark, as it began */
.close{position:relative;isolation:isolate;background:var(--espresso) url("assets/stills/still-wall.jpg") center/cover no-repeat;color:var(--ivory);border-top:0}
.close::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(33,28,23,.55),rgba(33,28,23,.82))}
.close .label{color:var(--gold)}
.close .founder .who,.close .form p{color:#cfc5b4}
.close .field label{color:#b8aa94}
.close .field input,.close .field select{color:var(--ivory);border-color:rgba(244,240,231,.4);color-scheme:dark}
.close .field select option{background:var(--espresso);color:var(--ivory)}
.close .field input:focus,.close .field select:focus{border-color:var(--gold)}
.close .btn{background:var(--metal);background-size:220% 100%;background-position:100% 0;border:0;color:var(--espresso);font-weight:700;transition:background-position 1s var(--ease)}
.close .btn:hover{background-position:0 0;color:var(--espresso)}
.close .fine{color:#9A8775}

/* espresso buttons fill from the right with gold on hover */
.btn{position:relative;overflow:hidden;z-index:0}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.btn:hover{background:var(--espresso);color:var(--espresso);border-color:var(--gold)}
.btn:hover::before{transform:none}
.close .btn::before{display:none}

/* intro: the DR mark on espresso, then the curtain lifts. CSS only, so it always finishes even if a script fails. */
.intro{position:fixed;inset:0;z-index:120;background:var(--espresso);display:grid;place-items:center;pointer-events:none;animation:introOut 1s var(--ease) 1s forwards}
.intro .dr{width:96px;opacity:0;animation:introMark 1s var(--ease) .1s forwards,sheen 2.4s ease-in-out infinite}
@keyframes introMark{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
@keyframes introOut{0%{clip-path:inset(0)}100%{clip-path:inset(0 0 100% 0);visibility:hidden}}
.hd{animation:hdIn 1s var(--ease) 1.5s both}
@keyframes hdIn{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
.hero-frame video{animation:heroZoom 2.6s var(--ease) .9s both}
@keyframes heroZoom{from{filter:brightness(.6)}to{filter:none}}

/* motion: only under html.js, never under reduced motion; the page is complete without it */
.js .pic.mask img{transition:scale 2s var(--ease);scale:1.18}
.js .pic.mask.in img{scale:1}
.js .arch{clip-path:inset(100% 0 0 0 round 999px 999px 0 0);transition:clip-path 1.6s var(--ease)}
.js .arch.in{clip-path:inset(0 round 999px 999px 0 0)}
.js .pc.fu{transform:translateY(40px)}
.js .pc.fu.in{transform:none}
.js .sw .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em}
.js .sw .w>i{display:inline-block;font-style:normal;transform:translateY(118%);transition:transform 1.25s var(--ease)}
.js .sw.in .w>i{transform:none}
.js .fu{opacity:0;transform:translateY(20px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .fu.in{opacity:1;transform:none}
.js .rule.dr-in{transform:scaleX(0);transition:transform 1.6s var(--ease)}
.js .rule.dr-in.in{transform:none}
.js .pic.mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.5s var(--ease)}
.js .pic.mask.in{clip-path:inset(0)}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .hero{height:100vh}.hero-after{display:none}
  .intro{display:none}
}

/* custom dropdowns for the filter selects (assets/dinar-select.js): ivory panel, hairlines, gold for the chosen line, no system blue */
.ff{position:relative}
.ff.cx select{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.cxb{width:100%;min-height:48px;border:0;border-bottom:1px solid var(--taupe);background:none;font-family:var(--f-serif);font-size:19px;color:var(--espresso);text-align:start;padding:8px 0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:border-color .3s}
.cxb:hover{border-color:var(--espresso)}
.cxb:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.cxb::after{content:"";width:8px;height:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease);flex:none;margin-inline-end:4px}
.cxb[aria-expanded="true"]{border-color:var(--gold-deep)}
.cxb[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.cxl{position:absolute;top:calc(100% + 10px);inset-inline:0;z-index:80;background:var(--paper);border:1px solid var(--stone);border-top:1px solid var(--gold);box-shadow:0 26px 50px -22px rgba(33,28,23,.35);padding:6px 0;margin:0;list-style:none;max-height:330px;overflow:auto;min-width:220px}
.cxl[hidden]{display:none}
.cxl li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 18px;font-family:var(--f-serif);font-size:18px;color:var(--espresso);cursor:pointer;border-inline-start:2px solid transparent}
.cxl li small{font-family:var(--f-sans);font-size:12.5px;color:var(--taupe);letter-spacing:.04em}
.cxl li.on{background:var(--ivory);border-color:var(--gold)}
.cxl li[aria-selected="true"]{color:var(--gold-deep)}
.cxl li[aria-disabled="true"]{opacity:.35;cursor:not-allowed}