/* ===========================================================================
   BRAND LAYER — מצפה כלניות Brand Direction
   Loaded last. Redefines the palette and adds the depth, motion and
   restraint the direction asks for.

   §6 שפה חזותית : one central visual per section, clear hierarchy, little
   text, space, natural light, natural materiality.
   §2/§3        : quiet, self-assured, mature. Never strains to prove luxury,
                  never loud, never cluttered. So: expensive by restraint.
   Gold values are sampled from the company's own logo, not chosen.
   =========================================================================== */

:root{
  /* ---- the only four colours ---- */
  --black:#0B0B09;
  --black-lift:#121210;
  --panel:#171613;
  --off:#F2EEE6;
  --off-deep:#E7E1D5;
  --white:#FFFFFF;

  --gold:#D1A942;          /* on black only — 9.2:1 */
  --gold-bright:#F4DE6E;
  --gold-deep:#B2822B;
  --gold-ink:#8A6420;      /* on light only — 4.6:1 */
  --gold-veil:rgba(209,169,66,.16);
  --gold-hair:rgba(209,169,66,.28);

  /* ---- remapped so every existing rule inherits the new world ---- */
  --canvas:var(--black);
  --canvas-deep:var(--black-lift);
  --stone:rgba(242,238,230,.14);
  --sage:var(--gold);
  --sage-deep:var(--gold);
  --accent:var(--gold);
  --accent-hover:var(--gold-bright);
  --accent-muted:var(--gold-veil);
  --text-primary:var(--off);
  --text-secondary:rgba(242,238,230,.62);
  --hero-ink:var(--off);

  --tshadow:0 1px 2px rgba(0,0,0,.95),0 4px 16px rgba(0,0,0,.8),0 14px 52px rgba(0,0,0,.85);

  --ease-lux:cubic-bezier(.16,.84,.28,1);
  --gut:clamp(22px,6vw,88px);
  --maxw:1280px;
}

/* ============================ GROUND ============================ */
html,body{background:var(--black)}
body{color:var(--off);font-weight:300;letter-spacing:.005em}
main{background:var(--black)}

/* the two grounds. §6 asks for space, so both breathe hard. */
section{padding:clamp(96px,13vw,190px) var(--gut)}
.sec-light{background:var(--off);color:var(--black)}
.sec-light .kick{color:var(--gold-ink)}
.sec-light h1,.sec-light h2,.sec-light h3{color:var(--black)}
.sec-light .lede,.sec-light p{color:#5A554C}
.sec-light .rule{background:rgba(11,11,9,.16)}
.sec-dark{background:var(--black);color:var(--off)}

/* ============================ TYPE ============================ */
h1,h2,h3{font-weight:300;letter-spacing:-.015em;line-height:1.08}
h2{font-size:clamp(30px,5.2vw,68px);text-wrap:balance;max-width:18ch}
.sec-light h2,.sec-dark h2{max-width:18ch}
.kick{font-family:var(--label);font-size:11px;font-weight:400;letter-spacing:.34em;color:var(--gold)}
.rule{height:1px;background:var(--gold-hair);margin:20px 0 40px;max-width:120px}
.lede{margin-top:26px;max-width:46ch;font-size:clamp(16px,1.3vw,20px);font-weight:300;line-height:1.72;
  color:var(--text-secondary)}

/* the meaning line — §4: the fact is not the message */
.meaning{display:block;margin-top:10px;font-family:var(--body);font-weight:300;font-size:.94rem;
  line-height:1.6;color:var(--text-secondary);max-width:34ch}
.sec-light .meaning{color:#5A554C}

/* ============================ NAV ============================ */
.nav{padding:20px var(--gut);background:linear-gradient(to bottom,rgba(11,11,9,.72),rgba(11,11,9,0))}
.nav.solid{background:rgba(11,11,9,.86);backdrop-filter:blur(20px) saturate(1.1);
  border-block-end:1px solid var(--gold-hair)}
.nav.solid .mark,.nav.solid .nav-links a{color:var(--off)}
.nav-links a{letter-spacing:.1em;font-size:12.5px;opacity:.7}
.nav-links a:hover,.nav.solid .nav-links a:hover{color:var(--gold);opacity:1}
.nav-links a[aria-current="page"],.nav.solid .nav-links a[aria-current="page"]{color:var(--gold);opacity:1}
.nav-cta{border-color:var(--gold-hair)!important;color:var(--gold)!important;letter-spacing:.14em;padding:9px 20px}
.nav.solid .nav-cta{color:var(--gold)!important}
.mark .wm b{font-weight:400;letter-spacing:.01em}
.mark .wm i{color:var(--gold);opacity:.85;letter-spacing:.24em}
.sound{border-color:var(--gold-hair);color:var(--gold);letter-spacing:.16em}
.sound[data-on="1"]{background:var(--gold);border-color:var(--gold);color:var(--black)}
.nav-toggle{border-color:var(--gold-hair);color:var(--gold)}
.nav-drawer{background:var(--black)}
.nav-drawer a{font-weight:300;color:var(--off)}
.nav-drawer a:hover{color:var(--gold)}

/* ============================ BUTTONS ============================ */
.btn{background:var(--gold);color:var(--black);font-weight:700;letter-spacing:.14em;font-size:12.5px;
  padding:17px 38px;border-radius:0;position:relative;overflow:hidden;
  transition:color .5s var(--ease-lux),transform .5s var(--ease-lux),box-shadow .5s var(--ease-lux)}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold-bright);
  transform:translateX(-101%);transition:transform .6s var(--ease-lux);z-index:0}
.btn:hover::before{transform:translateX(0)}
.btn>*{position:relative;z-index:1}
.btn:hover{background:var(--gold);transform:translateY(-2px);box-shadow:0 18px 44px rgba(209,169,66,.22)}
.btn.ghost{background:transparent;border:1px solid var(--gold-hair);color:var(--gold)}
.btn.ghost::before{background:var(--gold-veil)}
.btn.ghost:hover{background:transparent;border-color:var(--gold);box-shadow:none}
.sec-light .btn.ghost{border-color:rgba(138,100,32,.34);color:var(--gold-ink)}
.sec-light .btn.ghost:hover{border-color:var(--gold-ink)}

/* ============================ FIGURES ============================ */
.figs{background:transparent;border:0;gap:0;margin-top:clamp(48px,6vw,84px);
  border-top:1px solid var(--gold-hair)}
.fig{background:transparent;border-bottom:1px solid var(--gold-hair);
  border-inline-start:1px solid var(--gold-hair);padding:clamp(30px,3.4vw,46px) clamp(20px,2.4vw,34px)}
.fig:nth-child(3n+1){border-inline-start:0}
@media (max-width:900px){.fig:nth-child(3n+1){border-inline-start:1px solid var(--gold-hair)}
  .fig:nth-child(2n+1){border-inline-start:0}}
@media (max-width:520px){.fig{border-inline-start:0!important}}
.sec-light .figs,.sec-light .fig{border-color:rgba(11,11,9,.14)}
.fig b{font-weight:300;font-size:clamp(40px,5.6vw,72px);letter-spacing:-.04em;color:var(--gold)}
.sec-light .fig b{color:var(--gold-ink)}
.fig b .u{color:inherit;opacity:.6}
.fig.iso b{font-size:clamp(19px,2.1vw,26px);letter-spacing:.02em}
.fig span{margin-top:16px;font-size:15px;font-weight:300;color:var(--off)}
.sec-light .fig span{color:var(--black)}
.fig em{color:var(--text-secondary);letter-spacing:.1em;font-size:11px;margin-top:8px}
.sec-light .fig em{color:#7A7469}
.fig::after{display:none}

/* ============================ 3D : the density field ============================ */
.field-holder{background:var(--black);padding:clamp(40px,6vw,90px) var(--gut);border-block:1px solid var(--gold-hair)}
.field-cap{color:rgba(242,238,230,.55);letter-spacing:.14em;font-size:11px;gap:30px;margin-top:34px}
.field-cap i{background:var(--gold);width:8px;height:8px;border-radius:0}
.field-cap i.pale{background:rgba(242,238,230,.22)}

/* ============================ 3D : tilt cards ============================ */
.tilt-wrap{perspective:1400px}
.tilt{transform-style:preserve-3d;transition:transform .8s var(--ease-lux),box-shadow .8s var(--ease-lux);
  will-change:transform}
.tilt .lift{transform:translateZ(34px);transition:transform .8s var(--ease-lux)}
.tilt .lift-soft{transform:translateZ(16px);transition:transform .8s var(--ease-lux)}

/* ============================ CARDS ============================ */
.pcard,.prj{background:var(--panel);border:1px solid var(--gold-hair);border-radius:0}
.sec-light .pcard,.sec-light .prj{background:var(--white);border-color:rgba(11,11,9,.12)}
.prj:hover{box-shadow:0 26px 70px rgba(0,0,0,.5);border-color:var(--gold)}
.sec-light .prj:hover{box-shadow:0 26px 70px rgba(11,11,9,.13)}
.pcard h3,.prj h3{font-weight:300;font-size:clamp(19px,1.8vw,26px)}
.pcard .who,.prj .cat{color:var(--gold);letter-spacing:.2em;font-size:10.5px}
.sec-light .pcard .who,.sec-light .prj .cat{color:var(--gold-ink)}
.prj .row b{color:var(--gold)}
.sec-light .prj .row b{color:var(--gold-ink)}
.prj .row,.sec-light .prj .row{border-top-color:var(--gold-hair)}
.sec-light .prj .row{border-top-color:rgba(11,11,9,.12)}
.prj p,.sec-light .prj p{font-weight:300}
.prj a.more{color:var(--gold)}
.sec-light .prj a.more{color:var(--gold-ink)}
.prj .ph.none,.pimg.soon{background:var(--black-lift)}
.sec-light .prj .ph.none{background:var(--off-deep)}
.prj .ph.none span,.pimg.soon span{color:var(--gold);letter-spacing:.22em}

/* one central visual per section: images get room and a gold hairline */
.mosaic figure,.pcard .ph,.prj .ph,.pimg,.cert img,.orb{border-radius:0}
.mosaic{gap:clamp(12px,1.4vw,20px);margin-top:clamp(48px,6vw,80px)}

/* ============================ FILTERS ============================ */
.filters button{border-radius:0;border-color:var(--gold-hair);color:var(--text-secondary);
  letter-spacing:.12em;font-size:11.5px;padding:11px 22px}
.filters button:hover{border-color:var(--gold);color:var(--off)}
.filters button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--black)}
.sec-light .filters button{border-color:rgba(11,11,9,.16);color:#5A554C}
.sec-light .filters button:hover{border-color:var(--gold-ink);color:var(--black)}
.sec-light .filters button[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:var(--off)}
.prj-meta{letter-spacing:.16em;color:var(--text-secondary)}
.sec-light .prj-meta{color:#7A7469}

/* ============================ TABLES ============================ */
.tbl th,.spec th{color:var(--gold);letter-spacing:.18em;border-bottom-color:var(--gold-hair)}
.tbl td,.spec td{border-bottom-color:var(--gold-hair);font-weight:300}
.tbl td:first-child{font-weight:300}
.tbl td b,.spec td b{color:var(--gold)}
.tbl td.soon,.spec td.soon{color:var(--text-secondary)}
.sec-light .tbl th,.sec-light .spec th{color:var(--gold-ink);border-bottom-color:rgba(11,11,9,.2)}
.sec-light .tbl td,.sec-light .spec td{border-bottom-color:rgba(11,11,9,.1)}
.sec-light .tbl td b,.sec-light .spec td b{color:var(--gold-ink)}

/* ============================ HOLD ============================ */
.hold{border-radius:0;border-color:var(--gold-hair);color:var(--off);letter-spacing:.16em;height:72px;
  width:min(320px,84vw)}
.hold .fill{background:var(--gold)}
.hold[data-open="1"]{border-color:var(--gold);color:var(--black)}
.hold-hint{color:var(--text-secondary);letter-spacing:.18em}
.sec-light .hold{border-color:rgba(11,11,9,.2);color:var(--black)}
.sec-light .hold[data-open="1"]{color:var(--black)}
.sec-light .hold-hint{color:#7A7469}

/* ============================ FORM ============================ */
.field label{color:var(--gold);letter-spacing:.2em;font-size:10.5px}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--gold-hair);
  border-radius:0;padding:16px 2px;color:var(--off);font-weight:300;font-size:17px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:none;
  border-bottom-color:var(--gold)}
.sec-light .field label{color:var(--gold-ink)}
.sec-light .field input,.sec-light .field select,.sec-light .field textarea{
  border-bottom-color:rgba(11,11,9,.2);color:var(--black)}
.sec-light .field input:focus,.sec-light .field select:focus,.sec-light .field textarea:focus{
  border-bottom-color:var(--gold-ink)}
.thanks{background:transparent;border:1px solid var(--gold);color:var(--gold);border-radius:0;font-weight:300}
.deets{border-top:1px solid var(--gold)}
.deets dt{color:var(--gold);letter-spacing:.2em}
.deets dd{font-weight:300}
.deets dd a{border-bottom-color:var(--gold-hair)}
.deets dd a:hover{border-bottom-color:var(--gold)}
.sec-light .deets{border-top-color:var(--gold-ink)}
.sec-light .deets dt{color:var(--gold-ink)}

/* ============================ MISC SURFACES ============================ */
.cert{background:var(--panel);border-color:var(--gold-hair)}
.sec-light .cert{background:var(--white);border-color:rgba(11,11,9,.12)}
.cert .valid{color:var(--gold);letter-spacing:.14em}
.sec-light .cert .valid{color:var(--gold-ink)}
.pricebox{background:var(--panel);border-color:var(--gold-hair)}
.pricebox::before{background:var(--gold)}
.sec-light .pricebox{background:var(--white)}
.blist{background:var(--gold-hair);border-color:var(--gold-hair)}
.blist li{background:var(--black);font-weight:300}
.blist li::before{background:var(--gold)}
.sec-light .blist{background:rgba(11,11,9,.12);border-color:rgba(11,11,9,.12)}
.sec-light .blist li{background:var(--off)}
.sec-light .blist li::before{background:var(--gold-ink)}
.person{background:var(--panel);border-color:var(--gold-hair)}
.person .init{background:var(--gold);color:var(--black);border-radius:0;font-weight:400}
.person .role{color:var(--gold);letter-spacing:.18em}
.sec-light .person{background:var(--white);border-color:rgba(11,11,9,.12)}
.sec-light .person .init{background:var(--black);color:var(--gold)}
.sec-light .person .role{color:var(--gold-ink)}
.tl li{border-inline-end-color:var(--gold-hair)}
.tl li::before{background:var(--black);border-color:var(--gold)}
.tl li:first-child::before{background:var(--gold);border-color:var(--gold)}
.tl b{font-weight:300;color:var(--gold)}
.sec-light .tl li{border-inline-end-color:rgba(11,11,9,.14)}
.sec-light .tl li::before{background:var(--off);border-color:var(--gold-ink)}
.sec-light .tl li:first-child::before{background:var(--gold-ink)}
.sec-light .tl b{color:var(--gold-ink)}
.cmp{border-top-color:var(--gold-hair)}
.cmp b{font-weight:300}
.cmp div:first-child b{color:var(--gold)}
.sec-light .cmp{border-top-color:rgba(11,11,9,.14)}
.sec-light .cmp div:first-child b{color:var(--gold-ink)}
.qa div{border-top-color:var(--gold-hair)}
.qa h3{font-weight:300}
.sec-light .qa div{border-top-color:rgba(11,11,9,.14)}
.tube{background:var(--panel);border-color:var(--gold-hair)}
.tube a:hover{color:var(--gold)}
.strip{background:var(--panel);border-block:1px solid var(--gold-hair)}
.strip h3{font-weight:300;color:var(--off)}
.vo{background:transparent;border:1px solid var(--gold-hair);border-radius:0;padding:16px 22px}
.vo-btn{background:var(--gold);color:var(--black);border-radius:0}
.vo-btn:hover{background:var(--gold-bright)}
.vo .vo-lbl{color:var(--gold);letter-spacing:.18em}
.vo .vo-bar{background:var(--gold-hair)}
.vo .vo-bar i{background:var(--gold)}
.sec-light .vo{border-color:rgba(11,11,9,.16)}
.sec-light .vo .vo-lbl{color:var(--gold-ink)}
.orb{background:var(--black);border-color:var(--gold-hair)}
.orb .orb-track{background:rgba(242,238,230,.14)}
.orb .orb-track::after{background:var(--gold)}
.orb .orb-hint{letter-spacing:.2em;color:rgba(242,238,230,.8)}
.proof-tail{font-weight:300;color:var(--off)}
.sec-light .proof-tail{color:var(--black)}

/* ============================ FOOTER ============================ */
footer{background:var(--black);border-top:1px solid var(--gold-hair);color:var(--text-secondary)}
footer h4{color:var(--gold);letter-spacing:.22em}
footer a:hover{color:var(--gold)}
.fnote{border-top-color:var(--gold-hair);color:rgba(242,238,230,.38)}

/* ============================ HERO ============================ */
.stage{background:var(--black)}
.scrim{background:radial-gradient(ellipse 130% 100% at 50% 45%,rgba(0,0,0,0) 26%,rgba(0,0,0,.7) 100%)}
.band h1,.band h2{font-weight:300;letter-spacing:-.02em}
.band .kick{letter-spacing:.34em;color:var(--gold)}
.band .sub{font-weight:300;color:rgba(242,238,230,.82);line-height:1.7}
.band::before{background:linear-gradient(to bottom,
  rgba(0,0,0,0) 0%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.54) 38%,
  rgba(0,0,0,.76) 50%,rgba(0,0,0,.54) 62%,rgba(0,0,0,.18) 80%,rgba(0,0,0,0) 100%)}
.band::after{background:radial-gradient(ellipse 80% 72% at 50% 50%,
  rgba(0,0,0,.6) 0%,rgba(0,0,0,.34) 55%,rgba(0,0,0,0) 80%)}
.ring{color:var(--gold)}
.chev{color:var(--gold);letter-spacing:.2em}
.static-hero{background:var(--black)}
.static-hero .sh-kick{color:var(--gold);letter-spacing:.3em}
.static-hero h1{font-weight:300}
.static-hero p{font-weight:300}
.phero .pscrim{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.4) 48%,rgba(0,0,0,.66) 100%)}
.phero h1{font-weight:300}
.phero .prule{background:var(--gold);height:1px;width:80px}
.phero .kick{color:var(--gold)}
.crumb{color:rgba(242,238,230,.55);letter-spacing:.14em}
.crumb a:hover{color:var(--gold)}

/* ============================ ENVIRONMENT ============================ */
.env::before{background:
  radial-gradient(ellipse 55% 45% at 18% 12%,rgba(209,169,66,.09),transparent 62%),
  radial-gradient(ellipse 50% 42% at 84% 74%,rgba(209,169,66,.05),transparent 62%)}
.env::after{opacity:.28}
.pulse{display:none}          /* §3: not cluttered. the ground carries it instead */

/* ============================ CINEMATIC MOTION ============================ */
/* the reveal is a rise from behind a line, not a fade. everything eases long. */
.up{opacity:0;transform:translateY(38px);
  transition:opacity 1.25s var(--ease-lux),transform 1.25s var(--ease-lux)}
.in .up{opacity:1;transform:none}
.in .up:nth-child(2){transition-delay:.1s}
.in .up:nth-child(3){transition-delay:.2s}
.in .up:nth-child(4){transition-delay:.3s}
.in .up:nth-child(5){transition-delay:.4s}
.in .up:nth-child(6){transition-delay:.5s}
.rule{transform:scaleX(0);transform-origin:right center;transition:transform 1.5s var(--ease-lux) .15s}
.in .rule{transform:scaleX(1)}

/* masked line reveal for the big statements */
.reveal{display:block;overflow:hidden;padding-block:.14em;margin-block:-.14em}
.reveal>span{display:block;transform:translateY(105%);
  transition:transform 1.35s var(--ease-lux)}
.in .reveal>span{transform:translateY(0)}
.in .reveal:nth-of-type(2)>span{transition-delay:.12s}
.in .reveal:nth-of-type(3)>span{transition-delay:.24s}

/* a gold hairline that draws itself across a section */
.drawline{height:1px;background:var(--gold-hair);transform:scaleX(0);transform-origin:right center;
  transition:transform 1.8s var(--ease-lux)}
.in .drawline{transform:scaleX(1)}

/* image reveal: the picture slides out from behind its own mask */
.imgreveal{position:relative;overflow:hidden}
.imgreveal img{transform:scale(1.14);transition:transform 1.9s var(--ease-lux)}
.in .imgreveal img{transform:scale(1)}
.imgreveal::after{content:"";position:absolute;inset:0;background:var(--black);transform-origin:left center;
  transition:transform 1.5s var(--ease-lux)}
.in .imgreveal::after{transform:scaleX(0)}

/* ============================ ACCESSIBILITY ============================ */
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.skip{background:var(--gold);color:var(--black)}

@media (prefers-reduced-motion:reduce){
  .reveal>span{transform:none!important}
  .imgreveal::after{transform:scaleX(0)!important}
  .imgreveal img{transform:none!important}
  .drawline{transform:scaleX(1)!important}
  .tilt{transform:none!important}
  .tilt .lift,.tilt .lift-soft{transform:none!important}
  .btn::before{display:none}
}