/* ============================================================
   Alon AI - landing page
   Design language: premium editorial, white + gold, light-locked.
   Direction-agnostic: built on CSS logical properties so the same
   rules serve both RTL (Hebrew, default) and LTR (English).
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces (off-white, never pure #fff) */
  --paper:      #FCFBF8;
  --paper-2:    #F6F4EE;
  --paper-3:    #EFEBE1;
  --ink:        #14151A;
  --ink-2:      #3A3C45;
  --ink-3:      #6B6E7A;
  --line:       #E4E0D5;

  /* gold: one accent, locked for the whole page */
  --gold:       #C8A54B;   /* display / fills only, 2.3:1 on paper */
  --gold-deep:  #8A6A18;   /* text-safe gold, 4.98:1 on paper (WCAG AA) */
  --gold-soft:  #F3E9CE;
  --gold-wash:  #FAF4E4;
  --foil: linear-gradient(115deg,#E9D9A4 0%,#C8A54B 28%,#9C7C1E 52%,#F0E4B6 74%,#C8A54B 100%);
  /* same shimmer, but every stop clears 3.3:1 on paper so it is safe on
     display text. --foil keeps the bright stops for rules and fills. */
  --foil-text: linear-gradient(115deg,#A8842A 0%,#8A6A18 30%,#6E520E 55%,#A8842A 78%,#8A6A18 100%);

  /* shadows tinted to the paper hue, never pure black */
  --sh-1: 0 1px 2px rgba(60,50,20,.05), 0 4px 14px rgba(60,50,20,.05);
  --sh-2: 0 2px 4px rgba(60,50,20,.05), 0 14px 40px rgba(60,50,20,.09);
  --sh-3: 0 4px 8px rgba(60,50,20,.06), 0 30px 70px rgba(60,50,20,.13);

  /* ONE radius system: cards 20px, small 12px, controls full pill */
  --r-card: 20px;
  --r-sm:   12px;
  --r-pill: 999px;

  /* type */
  --f-disp: "Rubik", "Segoe UI", system-ui, sans-serif;
  --f-body: "Assistant", "Rubik", "Segoe UI", system-ui, sans-serif;

  /* rhythm - VISUAL_DENSITY 3, airy */
  --pad:   clamp(1.25rem, 5vw, 4rem);
  --gap-s: clamp(5rem, 11vw, 9.5rem);
  --wrap:  1280px;

  --ease: cubic-bezier(.16,1,.3,1);

  /* z-scale, documented and finite */
  --z-grain: 90;
  --z-modal: 80;
  --z-nav:   60;
  --z-prog:  70;
}

/* light-locked by brief (white + gold is the brand). Declared so the
   browser paints form controls and scrollbars for a light page even
   when the OS is in dark mode. */
html{ color-scheme: light; }

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-block-start:96px;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,picture,svg{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3{ font-family:var(--f-disp); font-weight:700; margin:0; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

:focus-visible{
  outline:2.5px solid var(--gold-deep);
  outline-offset:3px;
  border-radius:6px;
}

.skip{
  position:fixed; inset-block-start:8px; inset-inline-start:8px;
  z-index:200; padding:.7rem 1.1rem;
  background:var(--ink); color:var(--paper);
  border-radius:var(--r-sm); font-weight:600;
  transform:translateY(-160%);
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:none; }

/* Hebrew reads better slightly heavier and with a touch more line-height */
[lang="he"] body,
html[lang="he"]{ --f-body:"Assistant","Rubik",system-ui,sans-serif; }
html[lang="he"] body{ line-height:1.72; }

/* ---------- 2. ICONS ---------- */
.ic{ inline-size:1.25em; block-size:1.25em; fill:currentColor; flex:none; }
.ic--lg{ inline-size:1.9rem; block-size:1.9rem; }
.ic--arw{ inline-size:1.05em; block-size:1.05em; transition:transform .3s var(--ease); }
/* the arrow glyph points up-right; mirror it in RTL so it points away from text */
[dir="rtl"] .ic--arw{ transform:scaleX(-1); }

/* ---------- 3. GRAIN (fixed layer only, never on a scroller) ---------- */
.grain{
  position:fixed; inset:0; z-index:var(--z-grain);
  pointer-events:none; opacity:.032; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 4. SCROLL PROGRESS (CSS scroll-driven, zero JS) ---------- */
.progress{
  position:fixed; inset-block-start:0; inset-inline:0;
  block-size:2px; z-index:var(--z-prog); pointer-events:none;
}
.progress span{
  display:block; block-size:100%; background:var(--foil);
  transform:scaleX(0); transform-origin:left center;
}
[dir="rtl"] .progress span{ transform-origin:right center; }
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .progress span{
      animation:prog linear both;
      animation-timeline:scroll(root block);
    }
  }
}
@keyframes prog{ to{ transform:scaleX(1); } }

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.9rem 1.6rem;
  border-radius:var(--r-pill);
  font-family:var(--f-disp); font-weight:600; font-size:.975rem;
  letter-spacing:-.005em; white-space:nowrap;
  border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease),
             background-color .25s ease, border-color .25s ease, color .25s ease;
  /* magnetic offset written by JS as a CSS var, never React/DOM state */
  translate:var(--mx,0) var(--my,0);
}
.btn--sm{ padding:.62rem 1.15rem; font-size:.9rem; }

/* primary: gold fill + ink text = 8.0:1 contrast */
.btn--gold{ background:var(--gold); color:var(--ink); box-shadow:var(--sh-1); }
.btn--gold:hover{ background:#D3B15C; box-shadow:var(--sh-2); }
.btn--gold:active{ scale:.975; }
.btn--gold .ic--arw{ opacity:.75; }
.btn--gold:hover .ic--arw{ transform:translate(2px,-2px); }
[dir="rtl"] .btn--gold:hover .ic--arw{ transform:scaleX(-1) translate(2px,-2px); }

/* outline: ink text on paper = 15:1 */
.btn--line{ border-color:var(--line); background:rgba(255,255,255,.65); color:var(--ink); }
.btn--line:hover{ border-color:var(--gold); background:var(--gold-wash); }
.btn--line:active{ scale:.975; }

.btn--ghost{ color:var(--ink-2); }
.btn--ghost:hover{ color:var(--ink); background:var(--paper-3); }

.lnk{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--f-disp); font-weight:600; font-size:.95rem;
  color:var(--gold-deep); padding-block:.3rem;
  border-block-end:1px solid transparent;
  transition:border-color .3s var(--ease);
}
.lnk:hover{ border-block-end-color:var(--gold); }
.lnk:hover .ic--arw{ transform:translate(2px,-2px); }
[dir="rtl"] .lnk:hover .ic--arw{ transform:scaleX(-1) translate(2px,-2px); }

/* ---------- 6. BRAND ---------- */
/* The wordmark IS the logo. No tile, no monogram: "Alon" in ink, "AI" in
   text-safe gold (--gold-deep, 4.98:1 on paper). Locked to LTR so the
   Latin logotype keeps its order inside the RTL document. */
.brand{ display:inline-flex; align-items:center; }
.brand__txt{
  position:relative;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(1.2rem,1.1rem + .4vw,1.4rem);
  letter-spacing:-.038em; line-height:1;
  color:var(--ink); white-space:nowrap;
  padding-block-end:.22em;   /* room for the hover rule, no reflow */
}
.brand__txt em{ font-style:normal; font-weight:800; color:var(--gold-deep); }
/* hover: a foil rule draws in under the wordmark, from the reading edge */
.brand__txt::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0;
  block-size:2px; border-radius:2px; background:var(--foil);
  transform:scaleX(0); transform-origin:inline-start;
  transition:transform .4s var(--ease);
}
.brand:hover .brand__txt::after{ transform:scaleX(1); }
.brand--ft .brand__txt{ font-size:clamp(1.3rem,1.15rem + .55vw,1.55rem); }

/* ---------- 7. NAV ---------- */
.nav{
  position:sticky; inset-block-start:0; z-index:var(--z-nav);
  background:rgba(252,251,248,.78);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-block-end:1px solid transparent;
  transition:border-color .35s ease, background-color .35s ease;
}
.nav.is-stuck{ background:rgba(252,251,248,.92); }
/* the stuck state is marked by a foil hairline, not a grey border */
.nav::after{
  content:""; position:absolute; inset-block-end:-1px; inset-inline:0;
  block-size:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);
  opacity:0; transition:opacity .35s ease;
}
.nav.is-stuck::after{ opacity:.5; }
@media (prefers-reduced-transparency:reduce){
  .nav{ background:var(--paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
}

.nav__in{
  max-inline-size:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  block-size:70px;
  display:flex; align-items:center; gap:1.5rem;
}
.nav__links{ display:flex; gap:1.75rem; margin-inline-start:auto; }
.nav__links a{
  font-size:.95rem; font-weight:600; color:var(--ink-2);
  position:relative; padding-block:.35rem;
  transition:color .25s ease;
}
.nav__links a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0;
  block-size:1.5px; background:var(--gold);
  transform:scaleX(0); transform-origin:inline-start;
  transition:transform .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); }

.nav__act{ display:flex; align-items:center; gap:.6rem; margin-inline-start:auto; }
.nav__links + .nav__act{ margin-inline-start:0; }

.lang{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .8rem; border-radius:var(--r-pill);
  border:1px solid var(--line);
  font-family:var(--f-disp); font-weight:600; font-size:.85rem;
  color:var(--ink-2);
  transition:border-color .25s, color .25s, background-color .25s;
}
.lang:hover{ border-color:var(--gold); color:var(--ink); background:var(--gold-wash); }

.burger{ display:none; inline-size:44px; block-size:44px; }
.burger span{
  display:block; inline-size:20px; block-size:2px; margin-inline:auto;
  background:var(--ink); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s;
}
.burger span+span{ margin-block-start:5px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mnav{
  display:none; flex-direction:column; gap:.25rem;
  padding:1rem var(--pad) 1.5rem;
  border-block-start:1px solid var(--line);
  background:var(--paper);
}
.mnav a:not(.btn){
  padding:.85rem .25rem; font-family:var(--f-disp);
  font-weight:600; font-size:1.05rem;
  border-block-end:1px solid var(--line);
}
.mnav .btn{ margin-block-start:.75rem; }
/* the secondary action sits in the same column as the links above it */
.mnav .btn--ghost{
  justify-content:flex-start; padding-inline:.25rem;
  margin-block-start:.25rem; font-size:1.05rem;
  border-block-end:1px solid var(--line); border-radius:0;
  padding-block:.85rem;
}
.mnav .btn--ghost:hover{ background:none; color:var(--gold-deep); }

@media (max-width:1023px){
  .nav__links{ display:none; }
  .nav__act .btn{ display:none; }
  .burger{ display:block; }
  .nav__act{ margin-inline-start:auto; }
  .mnav[data-open="true"]{ display:flex; }
}

/* ---------- 8. SHARED SECTION ---------- */
.sec{
  max-inline-size:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:var(--gap-s);
}
.sec__hd{ max-inline-size:52ch; margin-block-end:clamp(2.5rem,5vw,4rem); }
.sec__hd--row{
  max-inline-size:none; display:flex; align-items:baseline;
  justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}

.h2{
  font-size:clamp(1.9rem,1.3rem + 2.9vw,3.4rem);
  line-height:1.14; letter-spacing:-.032em;
  text-wrap:balance;
}
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--f-disp);
  font-size:.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em;
  color:var(--gold-deep);
  margin-block-end:.9rem;
}
.eyebrow::before{
  content:""; flex:none;
  inline-size:1.75rem; block-size:2px; border-radius:2px;
  background:var(--foil);
}
.gold{
  font-style:normal;
  background:var(--foil-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* descender clearance for Hebrew finals and Latin g/y/p */
  line-height:1.14; padding-block-end:.08em;
}

/* ---------- 9. HERO ---------- */
.hero{ position:relative; overflow:hidden; }
.hero__glow{
  position:absolute; inset-block-start:-30%; inset-inline-end:-10%;
  inline-size:min(880px,90vw); aspect-ratio:1;
  background:radial-gradient(circle,rgba(200,165,75,.20) 0%,rgba(200,165,75,.06) 42%,transparent 68%);
  pointer-events:none;
}
.hero__in{
  position:relative;
  max-inline-size:var(--wrap); margin-inline:auto;
  padding-inline:var(--pad);
  padding-block-start:clamp(2.5rem,5vw,5.5rem);   /* hero top pad capped */
  padding-block-end:clamp(2rem,4vw,3.5rem);
  min-block-size:min(calc(100dvh - 70px),810px);
  display:grid; align-items:center;
  grid-template-columns:1.06fr .94fr;             /* asymmetric split */
  gap:clamp(1.5rem,4vw,4rem);
}
.hero__copy{ max-inline-size:none; }
.hero__h1{
  font-size:clamp(2rem,1.05rem + 3.6vw,3.9rem);
  line-height:1.08; letter-spacing:-.042em;
  font-weight:800;
  text-wrap:balance;
  margin-block:.35rem 1.25rem;
}
.hero__h1 .w{ display:block; }
.hero__sub{
  font-size:clamp(1.03rem,.98rem + .38vw,1.22rem);
  color:var(--ink-2); max-inline-size:44ch; line-height:1.62;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-block-start:2rem; }
@media (max-width:560px){
  .hero__cta{ flex-direction:column; align-items:stretch; }
  .hero__cta .btn{ inline-size:100%; }
}

.hero__fig{
  position:relative; margin:0;
  justify-self:center; align-self:end;
  inline-size:min(100%,560px);
}
.hero__fig img{
  position:relative; z-index:2;
  inline-size:100%;
  filter:drop-shadow(0 34px 60px rgba(60,50,20,.20));
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.5) 85%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 62%,rgba(0,0,0,.5) 85%,transparent 100%);
}
/* gold ring + disc behind the portrait give the cutout a stage to stand on */
.hero__ring{
  position:absolute; z-index:1;
  inset-block-start:6%; inset-inline:0; margin-inline:auto;
  inline-size:min(86%,430px); aspect-ratio:1;
  border:1.5px solid var(--gold);
  border-radius:50%; opacity:.42;
}
.hero__disc{
  position:absolute; z-index:0;
  inset-block-start:13%; inset-inline:0; margin-inline:auto;
  inline-size:min(84%,410px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 34% 26%,var(--gold-soft),var(--gold-wash) 55%,transparent 76%);
}

@media (max-width:900px){
  .hero__in{
    grid-template-columns:1fr;
    min-block-size:auto;
    padding-block-end:0;
    gap:1rem;
    text-align:start;
  }
  .hero__copy{ max-inline-size:none; }
  .hero__fig{ inline-size:min(88%,400px); justify-self:center; }
  .hero__glow{ inset-block-start:-14%; inset-inline-end:-30%; }
}

/* ---------- 10. MARQUEE (one per page) ---------- */
.mq{
  border-block:1px solid var(--line);
  background:var(--paper-2);
  overflow:hidden; padding-block:1.15rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.mq__track{ display:flex; inline-size:max-content; }
.mq__set{
  display:flex; align-items:center; gap:2.5rem;
  padding-inline-end:2.5rem;
  animation:mqRun 42s linear infinite;
}
.mq:hover .mq__set{ animation-play-state:paused; }
.mq__set li{
  display:flex; align-items:center; gap:2.5rem;
  font-family:var(--f-disp); font-weight:600;
  font-size:clamp(.95rem,.9rem + .3vw,1.15rem);
  color:var(--ink-2); white-space:nowrap;
}
/* separator is a gold lozenge, not a middle-dot character */
.mq__set li::after{
  content:""; inline-size:5px; block-size:5px;
  background:var(--gold); rotate:45deg; flex:none;
}
@keyframes mqRun{ to{ transform:translateX(-100%); } }
[dir="rtl"] .mq__set{ animation-name:mqRunRtl; }
@keyframes mqRunRtl{ to{ transform:translateX(100%); } }

/* ---------- 11. BENTO (5 items, 5 cells, no empty tiles) ---------- */
.bento{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(.8rem,1.4vw,1.15rem);
}
.cell{
  grid-column:span 2;
  border-radius:var(--r-card);
  padding:clamp(1.5rem,2.4vw,2.1rem);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  display:flex; flex-direction:column; gap:.7rem;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.cell:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.cell .ic--lg{ color:var(--gold-deep); margin-block-end:.35rem; }
.cell h3{ font-size:clamp(1.12rem,1rem + .5vw,1.4rem); line-height:1.25; }
.cell p{ color:var(--ink-3); font-size:.97rem; line-height:1.6; }

/* visual variation: an ink tile, a foil tile, a photographic tile */
.cell--ink{
  grid-column:span 4; grid-row:span 2;
  background:
    radial-gradient(120% 90% at 82% 4%,rgba(200,165,75,.22),transparent 58%),
    linear-gradient(165deg,#1B1D24,#101116);
  border-color:#272A33; color:var(--paper);
  justify-content:flex-end;
}
.cell--ink .ic--lg{ color:var(--gold); }
.cell--ink h3{ font-size:clamp(1.4rem,1.1rem + 1.3vw,2.15rem); }
.cell--ink p{ color:#B4B7C2; max-inline-size:38ch; }

.cell--gold{
  background:linear-gradient(150deg,var(--gold-soft),var(--gold-wash) 58%,#fff);
  border-color:#E6D5A8;
}
.cell--gold .ic--lg{ color:#7A5C12; }
.cell--gold p{ color:#6A5A34; }

.cell--img{
  grid-column:span 4;
  position:relative; overflow:hidden;
  flex-direction:row; align-items:center; justify-content:space-between;
  gap:clamp(1rem,2.5vw,2.25rem);
  background:
    radial-gradient(95% 130% at 88% 50%,rgba(200,165,75,.24),transparent 62%),
    linear-gradient(160deg,#fff,var(--paper-2));
}
.cell--img .cell__copy{ display:flex; flex-direction:column; gap:.6rem; }
.cell--img h3{ font-size:clamp(1.2rem,1rem + .8vw,1.65rem); }
.cell--img p{ color:var(--ink-2); max-inline-size:34ch; }
/* portrait medallion: echoes the gold ring staging the hero cutout */
.cell__ph{
  flex:none; display:block;
  inline-size:clamp(84px,15vw,140px); aspect-ratio:1;
  border-radius:50%; overflow:hidden;
  border:1.5px solid var(--gold);
  box-shadow:0 12px 32px rgba(60,50,20,.18);
}
.cell__ph img{
  inline-size:100%; block-size:100%;
  object-fit:cover; object-position:50% 20%;
}

@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .cell{ grid-column:span 1; }
  .cell--ink{ grid-column:span 2; grid-row:auto; }
  .cell--img{ grid-column:span 2; min-block-size:170px; }
}
@media (max-width:560px){
  .bento{ grid-template-columns:1fr; }
  .cell,.cell--ink,.cell--img{ grid-column:span 1; }
  .cell--img{ gap:1rem; }
}

/* ---------- 12. STICKY STACK ---------- */
/* Pure CSS sticky-stack: each panel pins at the top of the viewport and
   the next one slides over it. Motivated: it turns three offerings into a
   sequence the reader moves through, instead of three parallel cards. */
.stack-sec{ padding-block-end:calc(var(--gap-s) * .6); }
.stack{ display:flex; flex-direction:column; gap:clamp(1rem,2vw,1.5rem); }

.panel{
  position:sticky;
  inset-block-start:calc(70px + clamp(1rem,3vw,2.5rem));
  border-radius:var(--r-card);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--sh-2);
  overflow:hidden;
}
.panel--1{ z-index:1; }
.panel--2{ z-index:2; }
.panel--3{ z-index:3; }

.panel__in{
  position:relative;
  padding:clamp(1.8rem,4vw,3.4rem);
  min-block-size:clamp(260px,36vh,340px);
  display:flex; align-items:center; gap:2rem;
}
.panel__copy{ max-inline-size:46ch; }
.panel__copy .ic--lg{ color:var(--gold-deep); margin-block-end:1rem; }
/* third-party brand mark: it keeps its own colours, so it sits on a neutral
   chip rather than directly on the panel's gold wash */
.panel__logo{
  display:grid; place-items:center;
  inline-size:3.4rem; block-size:3.4rem;
  margin-block-end:1rem;
  border-radius:var(--r-sm);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
}
.panel__logo img{ inline-size:2.2rem; block-size:auto; }
.panel__logo--icon{ color:var(--gold-deep); }
.panel__logo--icon .ic{ inline-size:1.7rem; block-size:1.7rem; }
.panel__copy h3{
  font-size:clamp(1.5rem,1.15rem + 1.6vw,2.5rem);
  line-height:1.16; margin-block-end:.7rem;
}
.panel__copy p{ color:var(--ink-2); margin-block-end:1.6rem; line-height:1.62; }

.panel__num{
  margin-inline-start:auto;
  font-family:var(--f-disp); font-weight:800;
  font-size:clamp(4rem,11vw,9rem); line-height:1;
  letter-spacing:-.06em;
  background:var(--foil);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:.26; user-select:none;
}

/* each panel gets its own gold wash so the stack reads as depth, not repetition */
.panel--1 .panel__in{ background:radial-gradient(90% 130% at 92% 0%,var(--gold-wash),transparent 60%); }
.panel--2 .panel__in{ background:radial-gradient(90% 130% at 8% 100%,var(--gold-wash),transparent 60%); }
.panel--3 .panel__in{ background:radial-gradient(80% 120% at 50% 0%,var(--gold-wash),transparent 62%); }

@media (max-width:760px){
  .panel__in{ flex-direction:column; align-items:flex-start; gap:.5rem; min-block-size:0; }
  .panel__num{
    margin-inline-start:0; order:-1;
    font-size:3.2rem; opacity:.3;
  }
  .panel__copy .ic--lg{ margin-block-end:.6rem; }
}

/* Sticky stacking depends on scroll position. Under reduced motion the
   panels simply flow as normal cards. */
@media (prefers-reduced-motion:reduce){
  .panel{ position:relative; inset-block-start:auto; }
}

/* ---------- 13. CONTACT ---------- */
.contact__in{
  border-radius:clamp(20px,3vw,32px);
  border:1px solid #E6D5A8;
  background:
    radial-gradient(85% 120% at 88% 0%,rgba(200,165,75,.22),transparent 58%),
    linear-gradient(165deg,var(--gold-wash),#fff 62%);
  padding:clamp(1.75rem,4.5vw,4rem);
  box-shadow:var(--sh-2);
}
.contact__lead{ max-inline-size:min(100%,660px); margin-block-end:clamp(2rem,3.5vw,3rem); }
.contact__sub{ color:var(--ink-2); margin-block-start:1rem; max-inline-size:46ch; }

.contact__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(.75rem,1.4vw,1rem);
}
.ccard{
  grid-column:span 1;
  display:flex; flex-direction:column; gap:.3rem;
  padding:clamp(1.2rem,2.2vw,1.6rem);
  border-radius:var(--r-card);
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.ccard--wide{ grid-column:span 2; }
.ccard:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--gold); }
.ccard .ic--lg{ color:var(--gold-deep); margin-block-end:.5rem; }
.ccard__k{ font-family:var(--f-disp); font-weight:700; font-size:1.05rem; }
.ccard__v{ color:var(--ink-3); font-size:.95rem; }

@media (max-width:760px){
  .contact__grid{ grid-template-columns:1fr; }
  .ccard,.ccard--wide{ grid-column:span 1; }
}

/* ---------- 14. FOOTER ---------- */
.ft{ border-block-start:1px solid var(--line); background:var(--paper-2); }
.ft__in{
  max-inline-size:var(--wrap); margin-inline:auto;
  padding:2.5rem var(--pad);
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.ft__nav{ display:flex; gap:1.5rem; flex-wrap:wrap; margin-inline:auto; }
.ft__nav a,.ft__nav button{
  font-size:.92rem; font-weight:600; color:var(--ink-2);
  transition:color .25s;
}
.ft__nav a:hover,.ft__nav button:hover{ color:var(--gold-deep); }
.ft__c{ font-size:.88rem; color:var(--ink-3); }

/* ---------- 15. LINKS DIALOG ---------- */
.lk{
  border:0; padding:0; background:transparent;
  max-inline-size:min(94vw,520px); inline-size:100%;
  max-block-size:92dvh;
  margin:auto;
  overflow:visible;
}
.lk::backdrop{
  background:rgba(20,21,26,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .35s ease;
}
.lk.is-open::backdrop{ opacity:1; }

.lk__box{
  position:relative;
  border-radius:clamp(20px,3vw,28px);
  background:var(--paper);
  border:1px solid #E6D5A8;
  box-shadow:0 40px 90px rgba(20,15,0,.34);
  padding:clamp(1.75rem,4vw,2.5rem) clamp(1.25rem,3vw,2rem) clamp(1.5rem,3vw,2rem);
  max-block-size:92dvh; overflow-y:auto;
  /* entrance state; JS adds .is-open on the next frame */
  opacity:0; transform:translateY(18px) scale(.97);
  transition:opacity .4s var(--ease), transform .45s var(--ease);
}
.lk.is-open .lk__box{ opacity:1; transform:none; }

.lk__box::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0;
  block-size:3px; background:var(--foil);
  border-start-start-radius:inherit; border-start-end-radius:inherit;
}

.lk__x{
  position:absolute; inset-block-start:.85rem; inset-inline-end:.85rem;
  inline-size:2.3rem; block-size:2.3rem; border-radius:50%;
  display:grid; place-items:center; color:var(--ink-3);
  transition:background-color .25s, color .25s;
}
.lk__x:hover{ background:var(--paper-3); color:var(--ink); }

.lk__hd{ text-align:center; margin-block-end:1.5rem; }
.lk__av{
  display:block; inline-size:88px; block-size:88px;
  margin:0 auto .9rem; border-radius:50%; overflow:hidden;
  border:2px solid var(--gold);
  box-shadow:0 8px 24px rgba(60,50,20,.18);
}
.lk__av img{ inline-size:100%; block-size:100%; object-fit:cover; }
.lk__hd h2{ font-size:1.4rem; letter-spacing:-.025em; }
.lk__hd p{ color:var(--ink-3); font-size:.95rem; margin-block-start:.25rem; }

.lk__list{ display:flex; flex-direction:column; gap:.5rem; }
.lk__list a{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:#fff;
  transition:transform .3s var(--ease), border-color .25s, background-color .25s, box-shadow .3s;
}
.lk__list a:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  background:var(--gold-wash);
  box-shadow:var(--sh-1);
}
.lk__list .ic--lg{ color:var(--gold-deep); inline-size:1.6rem; block-size:1.6rem; }
.lk__logo{
  display:grid; place-items:center;
  inline-size:1.6rem; block-size:1.6rem; flex:none;
}
.lk__logo img{ inline-size:100%; block-size:auto; }
.lk__k{ font-family:var(--f-disp); font-weight:600; font-size:.98rem; }
.lk__v{
  margin-inline-start:auto; color:var(--ink-3);
  font-size:.85rem; white-space:nowrap;
}
.lk__v + .ic--arw{ margin-inline-start:.6rem; }
.lk__list .ic--arw{ color:var(--gold-deep); opacity:.55; margin-inline-start:auto; }
.lk__list a:hover .ic--arw{ transform:translate(2px,-2px); opacity:1; }
[dir="rtl"] .lk__list a:hover .ic--arw{ transform:scaleX(-1) translate(2px,-2px); }

@media (max-width:380px){
  .lk__v{ display:none; }
}

body.is-locked{ overflow:hidden; }

/* ---------- 16. SCROLL REVEAL ---------- */
/* Driven by IntersectionObserver in script.js (never a scroll listener).
   Elements start hidden only when JS is running, so a no-JS visitor sees
   the full page. .js is set on <html> by the first line of script.js. */
.js .rv{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:calc(var(--d,0) * 90ms);
  will-change:opacity, transform;
}
.js .rv.is-in{ opacity:1; transform:none; will-change:auto; }

/* hero entrance runs on load, not on scroll */
.js .hero .rv{ transform:translateY(20px); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .rv{ opacity:1; transform:none; transition:none; }
  /* the [dir="rtl"] marquee rule outranks a bare .mq__set reset, so match it */
  .mq__set,
  [dir="rtl"] .mq__set{ animation:none; }
  .btn,.cell,.ccard,.lk__list a,.lk__box{ transition:none; }
  .btn{ translate:none; }
  .lk__box{ opacity:1; transform:none; }
  .hero__fig,.hero__glow{ animation:none !important; }
}

/* ---------- 17. SCROLL-DRIVEN PARALLAX (progressive enhancement) ---------- */
/* Native CSS scroll timelines: no JS, no scroll listener, and the browser
   runs it off the main thread. Silently absent where unsupported. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:901px){
    .hero__fig{
      animation:heroPar linear both;
      animation-timeline:view();
      animation-range:exit-crossing 0% exit 100%;
    }
    @keyframes heroPar{
      to{ transform:translateY(-60px) scale(.96); opacity:.55; }
    }
    .hero__ring{
      animation:ringSpin linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes ringSpin{
      from{ rotate:0deg; }
      to{ rotate:38deg; }
    }
  }
}