/* ==========================================================================
   CARBONIX — Design System  v3
   --------------------------------------------------------------------------
   Three rules this revision is built on:

   1. TYPE IS A SCALE, NOT A PILE OF CLAMPS.
      Seven roles, one ratio, explicit line-height and weight per role, and a
      separate Persian tuning block. Display sizes came down (they were
      shouting), body sizes went up (they were whispering).

   2. SPACE IS A SYSTEM.
      One 4px-based ladder. Sections, grids and stacks all draw from it, so
      vertical rhythm repeats instead of being improvised per component.

   3. STRUCTURE OVER DECORATION.
      Numbered section badges, uniform card grids and identical section
      rhythm are what make a layout read as generated. Cards now carry a real
      classification tag, sections alternate their structure, and the
      technology block is a stack of full-screen panels, not another grid.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* surfaces */
  --bg:            #141515;
  --bg-1:          #191A1A;
  --bg-2:          #1E1F1F;
  --bg-3:          #262727;
  --bg-inset:      #101111;
  --bg-glass:      rgba(20,21,21,.74);

  /* type colours */
  --fg:            #F4F1EB;
  --fg-dim:        #B0ABA2;
  --fg-mute:       #8B857E;
  --fg-faint:      #56524D;

  /* brand */
  --gold:          #E6CBB1;
  --gold-hi:       #F4DFC8;
  --gold-dim:      #A88C6E;
  --copper-1:      #7A4426;
  --copper-2:      #C1652F;
  --copper-3:      #E8935A;
  --copper-grad:   linear-gradient(100deg, var(--copper-1), var(--copper-2) 45%, var(--copper-3));

  --ok:            #8FBF9F;
  --err:           #E08159;

  --line:          rgba(244,241,235,.09);
  --line-2:        rgba(244,241,235,.16);
  --line-3:        rgba(244,241,235,.30);

  --shadow-1:      0 2px 12px rgba(0,0,0,.3);
  --shadow-2:      0 20px 52px -14px rgba(0,0,0,.66);

  /* motion */
  --e-out:         cubic-bezier(.16,.84,.44,1);
  --e-io:          cubic-bezier(.66,0,.34,1);
  --e-spring:      cubic-bezier(.34,1.4,.64,1);
  --t-fast:        .25s;
  --t-mid:         .45s;
  --t-slow:        .8s;

  /* ---------- SPACE LADDER (4px base) ---------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;   --s-6: 32px;   --s-7: 40px;  --s-8: 56px;
  --s-9: 80px;   --s-10: 112px; --s-11: 152px;

  /* the only two fluid spacing values, both derived from the ladder */
  --gap:      clamp(var(--s-5), 2.2vw, var(--s-7));   /* grid + stack gaps  */
  --sec-y:    clamp(var(--s-9), 8vw, var(--s-11));    /* section padding    */
  --sec-y-sm: clamp(var(--s-8), 5vw, var(--s-9));

  --gutter:   clamp(20px, 4vw, 72px);
  --wrap:       min(1480px, calc(100vw - var(--gutter) * 2));
  --wrap-tight: min(1080px, calc(100vw - var(--gutter) * 2));
  --wrap-read:  min(720px,  calc(100vw - var(--gutter) * 2));

  --header-h:  76px;
  --radius:    4px;
  --radius-lg: 14px;
  --radius-pill: 100px;
  --tap: 44px;

  /* ---------- TYPE SCALE ----------
     Latin defaults. The jump from body to display is deliberately large: a
     product page has exactly one voice that should carry across the room
     (the hero line) and everything else supports it. Anything in between
     reads as timid. Body never drops below 17px.

     Each role uses a ~1.33 ratio at the top end:
       17 → 21 → 27 → 36 → 56 → 88 → 136                                    */
  --fs-display: clamp(3.4rem,  9.4vw, 8.5rem);   /* hero line only       */
  --fs-h1:      clamp(2.5rem,  5.6vw, 4.75rem);  /* page + section title */
  --fs-h2:      clamp(1.95rem, 3.6vw, 3.1rem);   /* block title          */
  --fs-h3:      clamp(1.32rem, 1.75vw,1.72rem);  /* card title           */
  --fs-h4:      clamp(1.1rem,  1.2vw, 1.25rem);  /* small heading        */
  --fs-lead:    clamp(1.14rem, 1.3vw, 1.4rem);   /* intro paragraph      */
  --fs-body:    1.0625rem;                       /* body copy — 17px     */
  --fs-small:   .9375rem;                        /* meta, captions       */
  --fs-label:   .8125rem;                        /* eyebrows, tags       */

  --lh-display: .98;
  --lh-head:    1.1;
  --lh-lead:    1.6;
  --lh-body:    1.72;

  --w-display: 700;
  --w-head:    600;
  --w-body:    300;
  --w-strong:  500;

  --track-display: -.03em;
  --track-head:    -.02em;
  --track-label:   .2em;
  --upper: uppercase;

  --ff-display: 'Bricolage Grotesque', 'Bricolage Local', 'Inter Local', system-ui, sans-serif;
  --ff-body:    'Inter', 'Inter Local', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-accent:  'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-mono:    ui-monospace, 'SF Mono', 'Roboto Mono', 'Courier New', monospace;
}

/* ---------- Persian tuning ----------
   NOTE the |= selector. The document is served as lang="fa-IR", so the exact
   selector html[lang="fa"] matched nothing and this entire block was dead —
   which is why Persian was rendering in the Latin display face's fallback
   with Latin line-heights. [lang|="fa"] matches "fa" and any "fa-*".

   Sizes are measured, not guessed. In IRANYekanWeb the alef is 0.648em tall against
   Inter's 0.727em cap height, so Persian set at the same font-size looks
   about 10% smaller than the Latin next to it. The Persian scale is therefore
   set slightly ABOVE the Latin one — the opposite of the usual instinct.

   Everything else follows from the script: no uppercase, no tracking, heavier
   weights to hold colour, and more leading because the descenders are deep. */
html[lang|="fa"] {
  --ff-display: 'IRANYekan', 'IRANYekanX', 'Vazirmatn', 'Vazirmatn Local', Tahoma, system-ui, sans-serif;
  --ff-body:    'IRANYekan', 'IRANYekanX', 'Vazirmatn', 'Vazirmatn Local', Tahoma, system-ui, sans-serif;
  --ff-accent:  'IRANYekan', 'IRANYekanX', 'Vazirmatn', Tahoma, sans-serif;

  --fs-display: clamp(3.5rem,  9.8vw, 9rem);
  --fs-h1:      clamp(2.5rem,  5.6vw, 4.9rem);
  --fs-h2:      clamp(1.95rem, 3.6vw, 3.15rem);
  --fs-h3:      clamp(1.34rem, 1.8vw, 1.78rem);
  --fs-h4:      clamp(1.12rem, 1.2vw, 1.28rem);
  --fs-lead:    clamp(1.16rem, 1.35vw,1.44rem);
  --fs-body:    1.09rem;
  --fs-small:   .97rem;
  --fs-label:   .86rem;

  --lh-display: 1.16;
  --lh-head:    1.34;
  --lh-lead:    1.82;
  --lh-body:    1.9;

  --w-display: 700;   /* Bold is the heaviest real file — no faux weights */
  --w-head:    700;
  --w-body:    400;
  --w-strong:  500;

  --track-display: 0;
  --track-head:    0;
  --track-label:   .02em;
  --upper: none;
}

html[lang|="ar"] {
  --ff-display: 'Cairo', 'Cairo Local', 'Noto Kufi Arabic', Tahoma, system-ui, sans-serif;
  --ff-body:    'Cairo', 'Cairo Local', 'Noto Kufi Arabic', Tahoma, system-ui, sans-serif;
  --ff-accent:  'Cairo', 'Cairo Local', Tahoma, sans-serif;

  --fs-display: clamp(3.2rem,  8.8vw, 8rem);
  --fs-h1:      clamp(2.35rem, 5.2vw, 4.4rem);
  --fs-h2:      clamp(1.85rem, 3.4vw, 2.9rem);
  --fs-h3:      clamp(1.3rem,  1.72vw,1.7rem);
  --fs-h4:      clamp(1.1rem,  1.18vw,1.24rem);
  --fs-lead:    clamp(1.14rem, 1.3vw, 1.4rem);
  --fs-body:    1.06rem;
  --fs-small:   .95rem;
  --fs-label:   .84rem;

  --lh-display: 1.24;
  --lh-head:    1.4;
  --lh-lead:    1.84;
  --lh-body:    1.92;

  --w-display: 700;
  --w-head:    700;
  --w-body:    400;
  --w-strong:  600;

  --track-display: 0;
  --track-head:    0;
  --track-label:   .01em;
  --upper: none;
}

/* No synthesised weights: only the three real IRANYekan files are used. */
html[lang|="fa"] body { font-synthesis: none; }

@media (min-width: 2200px) { :root { --wrap: 1680px; --gutter: 96px; } }

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--fg-faint) var(--bg);
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: var(--w-body);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, picture { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--gold); color: var(--bg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-inset); }
::-webkit-scrollbar-thumb { background: var(--fg-faint); border-radius: 10px; border: 2px solid var(--bg-inset); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius); }

/* ---------- 3. Typographic roles ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--ff-display);
  font-weight: var(--w-head);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-wrap: balance;
}

.t-display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: var(--upper);
}
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: var(--fs-h4); }

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-body);
  color: var(--fg-dim);
  text-wrap: pretty;
}
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-dim); }
.t-small { font-size: var(--fs-small); line-height: 1.6; }
.t-label {
  font-family: var(--ff-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: var(--upper);
  line-height: 1.4;
}

/* legacy aliases so existing markup keeps working */
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--fg-dim); font-weight: var(--w-body); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.6; }
.micro { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: var(--upper); line-height: 1.4; }

.dim { color: var(--fg-dim); }
.mute { color: var(--fg-mute); }
.gold { color: var(--gold); }
.num { font-family: var(--ff-mono); font-variant-numeric: tabular-nums; }
html[lang|="fa"] .num, html[lang|="ar"] .num { font-family: var(--ff-body); }

.accent-it { font-family: var(--ff-accent); font-style: italic; font-weight: 400; color: var(--gold-hi); }
html[lang|="fa"] .accent-it, html[lang|="ar"] .accent-it { font-style: normal; }

.grad-text {
  background: var(--copper-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* If background-clip:text is unavailable the headline must not vanish. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .grad-text { background: none; -webkit-text-fill-color: currentColor; color: var(--gold); }
}

/* Section eyebrow — a label, never a number. */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: var(--upper);
  color: var(--gold); line-height: 1.4;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; flex: none; background: var(--copper-grad); }
.eyebrow.no-rule::before { display: none; }

.skip-link {
  position: fixed; top: var(--s-2); inset-inline-start: var(--s-2); z-index: 10001;
  background: var(--gold); color: var(--bg); padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600;
  transform: translateY(-250%); transition: transform .3s var(--e-out);
}
.skip-link:focus { transform: translateY(0); }

.sr-only, .a11y-live {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- 4. Layout ---------- */
.wrap { width: var(--wrap); margin-inline: auto; }
.wrap-tight { width: var(--wrap-tight); margin-inline: auto; }
.wrap-read { width: var(--wrap-read); margin-inline: auto; }

.sec { padding-block: var(--sec-y); position: relative; }
.sec-sm { padding-block: var(--sec-y-sm); }
.sec-hairline { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--gap); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g12 { grid-template-columns: repeat(12, 1fr); }
.grid > *, .stack > *, .tabs > *, .showcase-row > * { min-width: 0; }

@media (max-width: 1200px) { .g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1024px) { .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  {
  .g12 { grid-template-columns: 1fr; }
  .g12 > * { grid-column: 1 / -1 !important; }
  .sticky-top, .toc { position: static; }
}
@media (max-width: 768px) { .g2 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .g3, .g4 { grid-template-columns: 1fr; } }

.stack { display: flex; flex-direction: column; }
.gap-xs { gap: var(--s-2); }
.gap-sm { gap: var(--s-4); }
.gap-md { gap: var(--s-5); }
.gap-lg { gap: var(--s-7); }
.gap-xl { gap: var(--s-9); }
.row { display: flex; align-items: center; }
.wrapf { flex-wrap: wrap; }
.between { justify-content: space-between; }
.mt-a { margin-top: auto; }
.hr { height: 1px; background: var(--line); border: 0; }
.center { text-align: center; }
.maxw-60 { max-width: 60ch; } .maxw-70 { max-width: 70ch; }
.sticky-top { position: sticky; top: calc(var(--header-h) + var(--s-6)); }
[hidden] { display: none !important; }

/* Section header: title block on one side, action on the other. */
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-8);
}
.sec-head .stack { gap: var(--s-4); }
@media (max-width: 620px) { .sec-head { margin-bottom: var(--s-6); } .sec-head .btn { width: 100%; } }

/* ---------- 5. Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-3) var(--s-6);
  border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: var(--upper); line-height: 1.2;
  isolation: isolate; overflow: hidden; text-align: center;
  transition: color var(--t-mid) var(--e-out), border-color var(--t-mid) var(--e-out);
  will-change: transform;
}
.btn::before {
  content: ''; position: absolute; inset: 0; background: var(--gold);
  border-radius: inherit; transform: translateY(101%); z-index: -1;
  transition: transform var(--t-mid) var(--e-out);
}
.btn:hover, .btn:focus-visible { color: var(--bg); border-color: var(--gold); }
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: scale(.975); }
.btn .ico { transition: transform var(--t-mid) var(--e-out); flex: none; }
.btn:hover .ico { transform: translate(3px, -3px); }
[dir="rtl"] .btn .ico { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ico { transform: scaleX(-1) translate(3px, -3px); }
.btn[disabled], .btn.is-busy { opacity: .5; pointer-events: none; }

.btn-solid { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.btn-solid::before { background: var(--fg); }
.btn-solid:hover, .btn-solid:focus-visible { color: var(--bg); border-color: var(--fg); }
.btn-sm { padding: var(--s-2) var(--s-5); min-height: 38px; }
.btn-lg { padding: var(--s-4) var(--s-7); }

.link-u {
  display: inline-flex; align-items: center; gap: var(--s-2); position: relative;
  font-size: var(--fs-small); font-weight: var(--w-strong); color: var(--fg);
  padding-block: 6px 5px;
}
.link-u::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 3px;
  width: 100%; height: 1px; background: var(--gold); transform: scaleX(0);
  transition: transform var(--t-mid) var(--e-out);
}
[dir="ltr"] .link-u::after { transform-origin: right; }
[dir="rtl"] .link-u::after { transform-origin: left; }
.link-u:hover::after, .card:hover .link-u::after { transform: scaleX(1); }
[dir="ltr"] :is(.link-u:hover, .card:hover .link-u)::after { transform-origin: left; }
[dir="rtl"] :is(.link-u:hover, .card:hover .link-u)::after { transform-origin: right; }
.link-u .ico { transition: transform var(--t-mid) var(--e-out); }
.link-u:hover .ico, .card:hover .link-u .ico { transform: translateX(4px); }
[dir="rtl"] .link-u .ico { transform: scaleX(-1); }
[dir="rtl"] :is(.link-u:hover, .card:hover .link-u) .ico { transform: scaleX(-1) translateX(4px); }

/* ---------- 6. Overlays ---------- */
.grain {
  position: fixed; inset: 0; z-index: 9996; pointer-events: none;
  opacity: .03; mix-blend-mode: overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.cursor, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; }
.cursor { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translate(-50%,-50%); mix-blend-mode: difference; transition: opacity .3s; }
.cursor-ring {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(244,241,235,.4);
  transform: translate(-50%,-50%); z-index: 9998;
  transition: width .4s var(--e-spring), height .4s var(--e-spring),
              border-color .3s var(--e-out), background .3s var(--e-out), opacity .3s;
  display: grid; place-items: center;
  font-size: 9px; letter-spacing: .1em; color: transparent; text-transform: uppercase; font-weight: 600;
}
body.cursor-ready .cursor, body.cursor-ready .cursor-ring { opacity: 1; }
.cursor-ring.is-hover { width: 56px; height: 56px; border-color: var(--gold); }
.cursor-ring.is-label { width: 84px; height: 84px; background: rgba(230,203,177,.12); border-color: var(--gold); color: var(--gold); }
body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  .cursor, .cursor-ring { display: none !important; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
}

.preloader { position: fixed; inset: 0; z-index: 10000; background: var(--bg); display: grid; place-items: center; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-6); }
.preloader-mark { width: 44px; color: var(--gold); }
.preloader-mark svg { width: 100%; height: auto; }
.preloader-bar { width: min(220px, 50vw); height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.preloader-bar i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--gold); display: block; }
.preloader-pct { font-size: var(--fs-label); letter-spacing: .2em; color: var(--fg-mute); }
.preloader.is-done { pointer-events: none; }

.curtain { position: fixed; inset: 0; z-index: 9990; background: var(--bg-inset); transform: scaleY(0); transform-origin: bottom; pointer-events: none; display: grid; place-items: center; }
.curtain span { color: var(--gold); opacity: 0; width: 40px; }
.curtain svg { width: 100%; height: auto; }

.progress { position: fixed; inset-block-start: 0; inset-inline: 0; height: 2px; z-index: 9995; background: var(--copper-grad); transform: scaleX(0); }
[dir="ltr"] .progress { transform-origin: left; }
[dir="rtl"] .progress { transform-origin: right; }

/* ---------- 7. Header ---------- */
.hdr {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-4) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: padding var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out);
}
.hdr.is-stuck {
  padding-block: var(--s-3); background: var(--bg-glass);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.hdr.is-hidden { transform: translateY(-102%); }
body.menu-open .hdr { background: transparent; border-bottom-color: transparent; backdrop-filter: none; transform: none; }

.brand { display: flex; align-items: center; gap: var(--s-3); color: var(--gold); flex: none; padding-block: var(--s-3); }
.brand svg { height: 26px; width: auto; transition: height var(--t-mid) var(--e-out); }
.hdr.is-stuck .brand svg { height: 23px; }
.brand:hover { color: var(--gold-hi); }
@media (max-width: 480px) { .brand svg { height: 21px; } }

.nav { display: flex; align-items: center; gap: clamp(var(--s-3), 1.5vw, var(--s-7)); }
.nav-item { position: relative; }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: var(--w-strong);
  letter-spacing: var(--track-label); text-transform: var(--upper);
  color: var(--fg-dim); padding-block: var(--s-3); white-space: nowrap;
  transition: color var(--t-fast) var(--e-out);
}
.nav-link::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 6px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0);
  transition: transform var(--t-mid) var(--e-out);
}
[dir="ltr"] .nav-link::after { transform-origin: right; }
[dir="rtl"] .nav-link::after { transform-origin: left; }
.nav-link:hover, .nav-link[aria-current], .nav-item.is-open .nav-link { color: var(--fg); }
.nav-link:hover::after, .nav-item.is-open .nav-link::after { transform: scaleX(1); }
[dir="ltr"] :is(.nav-link:hover, .nav-item.is-open .nav-link)::after { transform-origin: left; }
[dir="rtl"] :is(.nav-link:hover, .nav-item.is-open .nav-link)::after { transform-origin: right; }
.nav-link[aria-current]::after { transform: scaleX(1); background: var(--gold-dim); }
.nav-link .caret { transition: transform var(--t-fast) var(--e-out); opacity: .7; }
.nav-item.is-open .caret { transform: rotate(180deg); }

.nav-drop {
  position: absolute; inset-block-start: calc(100% + 10px);
  left: 50%; transform: translateX(-50%) translateY(-8px);
  width: max-content; min-width: 320px; max-width: min(380px, calc(100vw - 32px));
  padding: var(--s-2);
  background: rgba(25,26,26,.94); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--line-2); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--e-out), transform .32s var(--e-out), visibility .28s;
}
.nav-item.is-open .nav-drop { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.nav-drop.align-start { left: 0; transform: translateX(0) translateY(-8px); }
.nav-item.is-open .nav-drop.align-start { transform: translateX(0) translateY(0); }
.nav-drop.align-end { left: auto; right: 0; transform: translateX(0) translateY(-8px); }
.nav-item.is-open .nav-drop.align-end { transform: translateX(0) translateY(0); }
.nav-drop::before { content: ''; position: absolute; inset-block-start: -12px; inset-inline: 0; height: 12px; }
.nav-drop a {
  display: block; padding: var(--s-3) var(--s-4); border-radius: 10px; color: var(--fg-dim);
  transition: background var(--t-fast) var(--e-out), color var(--t-fast) var(--e-out);
}
.nav-drop a:hover, .nav-drop a:focus-visible { background: var(--bg-3); color: var(--fg); }
.nav-drop .t { font-size: var(--fs-small); font-weight: var(--w-strong); display: block; }
.nav-drop .d { font-size: var(--fs-label); color: var(--fg-mute); display: block; margin-top: 2px; letter-spacing: 0; text-transform: none; font-weight: 400; }
.nav-drop-all { border-top: 1px solid var(--line); margin-top: var(--s-1); padding-top: var(--s-1); }
.nav-drop-all .t { color: var(--gold); }

.hdr-right { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.langsw { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line-2); border-radius: var(--radius-pill); padding: 3px; }
.langsw a {
  font-family: var(--ff-body); font-size: .7rem; font-weight: 600; letter-spacing: .08em;
  padding: 0 var(--s-3); border-radius: var(--radius-pill); color: var(--fg-mute); line-height: 1;
  min-width: 34px; min-height: 32px; display: inline-grid; place-items: center;
  transition: all var(--t-fast) var(--e-out);
}
.langsw a[aria-current] { background: var(--gold); color: var(--bg); }
.langsw a:not([aria-current]):hover { color: var(--fg); background: var(--bg-3); }

.burger { display: none; width: var(--tap); height: var(--tap); place-items: center; position: relative; z-index: 950; }
.burger i { display: block; width: 22px; height: 1.5px; background: var(--fg); position: absolute; border-radius: 2px; transition: transform .42s var(--e-out), width .3s var(--e-out); }
.burger i:nth-child(1) { transform: translateY(-4px); }
.burger i:nth-child(2) { transform: translateY(4px); }
.burger:hover i:nth-child(1) { width: 16px; }
body.menu-open .burger i:nth-child(1) { transform: rotate(45deg); width: 22px; }
body.menu-open .burger i:nth-child(2) { transform: rotate(-45deg); }
@media (max-width: 1180px) { .nav, .hdr-right > .btn { display: none; } .burger { display: grid; } }
/* Below ~360px the brand + language pill + burger no longer fit on one line.
   The language switch is repeated inside the mobile menu, so drop it here
   rather than letting the header push the document wider than the screen. */
@media (max-width: 380px) { .hdr > .hdr-right > .langsw { display: none; } }

.menu {
  position: fixed; inset: 0; z-index: 940; background: var(--bg-1);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + var(--s-5)) var(--gutter) var(--s-7);
  clip-path: inset(0 0 100% 0); transition: clip-path .72s var(--e-io);
  overflow-y: auto; overscroll-behavior: contain;
}
body.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(193,101,47,.13), transparent 65%); }
.menu nav { position: relative; }
.menu-link {
  display: block; font-family: var(--ff-display);
  font-size: clamp(1.5rem, 5.6vw, 2.6rem); font-weight: var(--w-head);
  line-height: var(--lh-head);
  padding-block: clamp(var(--s-2), 1.4vw, var(--s-4));
  border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(24px);
  transition: color var(--t-fast) var(--e-out), padding-inline-start var(--t-mid) var(--e-out);
}
.menu-link:hover { color: var(--gold); padding-inline-start: var(--s-2); }
body.menu-open .menu-link { animation: menuIn .65s var(--e-out) forwards; }
@keyframes menuIn { to { opacity: 1; transform: none; } }
.menu-foot { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; position: relative; opacity: 0; transform: translateY(20px); }
body.menu-open .menu-foot { animation: menuIn .65s var(--e-out) .45s forwards; }
.menu-foot .btn { flex: 1 1 220px; }
.menu-foot a.h4, .menu-foot a.t-h4 { padding-block: var(--s-2); display: inline-block; }
.menu-foot a.small { padding-block: 7px; display: inline-block; }

/* ---------- 8. Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: clip; background: #000; }
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 116%; object-fit: cover; object-position: 58% 42%; will-change: transform; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,.62) 0%, rgba(10,9,8,.16) 28%, rgba(12,11,10,.58) 64%, rgba(20,21,21,.99) 100%),
    radial-gradient(ellipse 70% 60% at 18% 26%, rgba(230,203,177,.15), transparent 62%);
}
.hero-body { position: relative; z-index: 2; width: 100%; padding: 0 var(--gutter) var(--s-9); }
.hero-tags { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.pill-gold {
  font-family: var(--ff-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--bg); background: var(--gold);
  padding: 8px var(--s-4); border-radius: var(--radius-pill); line-height: 1.4;
}
/* The one line that has to carry across the room. */
.hero h1 {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-transform: var(--upper);
  text-wrap: nowrap;
}
@media (max-width: 620px) { .hero h1 { text-wrap: balance; } }

.line-mask { overflow: hidden; display: block; padding-bottom: .12em; }
.line-mask > span { display: block; will-change: transform; }
.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-7); flex-wrap: wrap; margin-top: var(--s-6); }
.hero-sub { max-width: 52ch; flex: 1 1 320px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.scroll-cue { display: flex; align-items: center; gap: var(--s-3); color: var(--fg-mute); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); }
.scroll-cue i { width: 1px; height: 44px; background: var(--line-2); position: relative; overflow: hidden; display: block; }
.scroll-cue i::after { content: ''; position: absolute; inset-inline: 0; top: -100%; height: 100%; background: var(--gold); animation: cue 2.4s var(--e-io) infinite; }
@keyframes cue { 0% { top: -100%; } 62% { top: 100%; } 100% { top: 100%; } }
@media (max-width: 768px) { .scroll-cue { display: none; } }
@media (max-width: 620px) {
  .hero { min-height: 92svh; }
  .hero-media::after {
    background:
      linear-gradient(180deg, rgba(10,9,8,.52) 0%, rgba(10,9,8,.08) 24%, rgba(12,11,10,.4) 56%, rgba(20,21,21,.97) 92%),
      radial-gradient(ellipse 90% 50% at 30% 24%, rgba(230,203,177,.16), transparent 66%);
  }
  .hero-tags .micro, .hero-tags .t-label { display: none; }
  .hero-body { padding-bottom: var(--s-7); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; }
}

.phero { position: relative; padding-block: calc(var(--header-h) + var(--s-9)) var(--s-8); overflow: clip; }
.phero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 90% 70% at 50% -10%, rgba(193,101,47,.15), transparent 60%); }
.phero h1 { font-size: var(--fs-h1); }
.phero .lead, .phero .t-lead { max-width: 62ch; }

/* ---------- 9. Reveals + media ---------- */
.rv { opacity: 0; transform: translateY(24px); }
.rv-in { opacity: 1; transform: none; transition: opacity .85s var(--e-out), transform .85s var(--e-out); }
.rv-d1 { transition-delay: .06s; } .rv-d2 { transition-delay: .12s; }
.rv-d3 { transition-delay: .18s; } .rv-d4 { transition-delay: .24s; }
.rv-d5 { transition-delay: .3s; }  .rv-d6 { transition-delay: .36s; }

.mask-img { position: relative; overflow: hidden; background: var(--bg-3); border-radius: var(--radius); }
.mask-img picture { display: block; width: 100%; height: 100%; }
.mask-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--focus, 50%); will-change: transform; }
.mask-img::after { content: ''; position: absolute; inset: 0; background: var(--bg-inset); transform-origin: bottom; transition: transform 1.05s var(--e-io); }
.mask-img.rv-in::after { transform: scaleY(0); }
.ratio-4-5 { aspect-ratio: 4/5; }
.ratio-3-4 { aspect-ratio: 3/4; }
.ratio-1-1 { aspect-ratio: 1/1; }
.ratio-16-9 { aspect-ratio: 16/9; }
.ratio-3-2 { aspect-ratio: 3/2; }
.ratio-4-3 { aspect-ratio: 4/3; }   /* the one card ratio */
@media (max-width: 620px) { .ratio-16-9 { aspect-ratio: 4/3; } }

.zoom-hover { overflow: hidden; }
.zoom-hover img { transition: transform 1.05s var(--e-out); }
.zoom-hover:hover img, .card:hover .zoom-hover img { transform: scale(1.05); }

/* ---------- 10. Marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: var(--s-4); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee span {
  font-family: var(--ff-display); font-size: clamp(1rem, 1.9vw, 1.7rem);
  font-weight: var(--w-strong); letter-spacing: var(--track-head);
  color: var(--fg-mute); white-space: nowrap; transition: color var(--t-mid) var(--e-out);
}
.marquee span em { font-style: normal; color: var(--gold-dim); }
.marquee:hover span { color: var(--fg-dim); }

/* ---------- 11. Cards ----------
   One card, four uses. The rules that make a set of cards read as designed
   rather than assembled:

   • ONE aspect ratio everywhere (4:3). Mixing 4:5 and 3:2 in the same scroll
     is the single loudest "assembled from parts" signal.
   • The tag sits at the bottom of the image, not the top. The bottom of a
     photograph is where the scrim is darkest, so the chip is legible on every
     image without a per-image adjustment.
   • One action affordance — the circle at the foot — and it is the same
     object on every card. Hovering the card fills it.
   • The body is a fixed rhythm: title, one spec line, description, rule,
     foot. Cards in a row therefore align at the rule even when the text
     lengths differ, because the description takes the slack.                */
.card {
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out),
              transform var(--t-mid) var(--e-out), box-shadow var(--t-mid) var(--e-out);
}
.card:hover { border-color: rgba(230,203,177,.34); background: var(--bg-2); transform: translateY(-6px); box-shadow: var(--shadow-2); }
.card:has(.stretch:focus-visible) { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.card .stretch:focus-visible { outline: none; }

.card-media { position: relative; overflow: hidden; }
.card-media .mask-img { border-radius: 0; }
/* scrim under the tag so the chip never fights the photograph */
.card-media::after {
  content: ''; position: absolute; inset-inline: 0; inset-block-end: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(12,13,13,.72));
  pointer-events: none; z-index: 1;
  transition: opacity var(--t-mid) var(--e-out);
}
.card:hover .card-media::after { opacity: .85; }
.card-media .tag { position: absolute; inset-block-end: var(--s-4); inset-inline-start: var(--s-4); z-index: 2; }

.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px var(--s-4) 7px var(--s-3);
  font-family: var(--ff-body); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: var(--track-label); text-transform: var(--upper); line-height: 1.3;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: rgba(14,15,15,.72); color: var(--gold);
  border: 1px solid rgba(230,203,177,.24);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: background var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out);
}
[dir="rtl"] .tag { padding: 7px var(--s-3) 7px var(--s-4); }
.tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--copper-3); flex: none; transition: background var(--t-mid) var(--e-out); }
.card:hover .tag { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.card:hover .tag::before { background: var(--copper-1); }

.card-body {
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3); flex: 1;
}
/* Two lines is the common case for these titles. Reserving that height is
   what makes the descriptions in a row start on the same line instead of
   stair-stepping — the detail that separates a card grid from a list of
   boxes. Longer titles still grow; they just do not pull the row apart. */
.card-body h3 {
  font-size: var(--fs-h3); line-height: var(--lh-head);
  min-height: calc(2em * var(--lh-head));
  transition: color var(--t-mid) var(--e-out);
}
@media (max-width: 620px) { .card-body h3 { min-height: 0; } }
.card:hover .card-body h3 { color: var(--gold); }
.card-body > p:last-of-type { flex: 1; }        /* description absorbs the slack */
.card-desc { color: var(--fg-dim); font-size: var(--fs-small); line-height: 1.68; }

.card-foot {
  margin-top: var(--s-5); padding-top: var(--s-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  border-top: 1px solid var(--line);
  transition: border-color var(--t-mid) var(--e-out);
}
.card:hover .card-foot { border-color: rgba(230,203,177,.22); }
.card-spec {
  font-size: var(--fs-label); color: var(--fg-mute); letter-spacing: 0; text-transform: none;
  line-height: 1.45; min-width: 0; overflow-wrap: anywhere;
}
/* the single action affordance, identical on every card */
.card-go {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--fg-mute);
  transition: background var(--t-mid) var(--e-out), color var(--t-mid) var(--e-out),
              border-color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-spring);
}
[dir="rtl"] .card-go svg { transform: scaleX(-1); }
.card:hover .card-go { background: var(--gold); border-color: var(--gold); color: var(--bg); transform: scale(1.08); }

.stretch { position: absolute; inset: 0; z-index: 3; display: block; }

/* showcase rows */
.showcase-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(var(--s-6), 4vw, var(--s-10)); align-items: center; padding-block: var(--sec-y-sm); border-top: 1px solid var(--line); }
.showcase-row.alt .showcase-media { order: 2; }
@media (max-width: 900px) { .showcase-row { grid-template-columns: 1fr; gap: var(--s-5); } .showcase-row.alt .showcase-media { order: 0; } }
.showcase-txt { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; }
.showcase-txt h2, .showcase-txt h3 { font-size: var(--fs-h2); }

/* feature tiles */
.feat { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); transition: border-color var(--t-mid) var(--e-out), background var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out); }
.feat:hover { border-color: var(--line-3); background: var(--bg-2); transform: translateY(-3px); }
.feat-ico { width: 30px; height: 30px; color: var(--gold); transition: transform var(--t-mid) var(--e-spring); }
.feat:hover .feat-ico { transform: scale(1.1) rotate(-4deg); }
.feat-ico svg { width: 100%; height: 100%; }
.feat h3 { font-size: var(--fs-h4); }

.checks { display: flex; flex-direction: column; gap: var(--s-3); }
.checks li { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--fg-dim); }
.checks li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .62em; border-radius: 50%; background: var(--copper-grad); }

/* highlight strip */
.hl-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.hl-strip > div { padding: var(--s-7) var(--s-5); border-inline-start: 1px solid var(--line); transition: background var(--t-mid) var(--e-out); }
.hl-strip > div:first-child { border-inline-start: 0; }
.hl-strip > div:hover { background: var(--bg-1); }
.hl-strip b { display: block; font-family: var(--ff-display); font-size: clamp(1.5rem, 2.4vw, 2.2rem); font-weight: var(--w-head); color: var(--gold); letter-spacing: var(--track-head); line-height: 1.2; }
.hl-strip span { display: block; margin-top: var(--s-2); font-size: var(--fs-small); color: var(--fg-mute); }
@media (max-width: 768px) {
  .hl-strip { grid-template-columns: repeat(2, 1fr); }
  .hl-strip > div:nth-child(odd) { border-inline-start: 0; }
  .hl-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 380px) {
  .hl-strip { grid-template-columns: 1fr; }
  .hl-strip > div { border-inline-start: 0; border-bottom: 1px solid var(--line); }
  .hl-strip > div:last-child { border-bottom: 0; }
}

/* ---------- 12. Technology — stacked full-screen panels ----------
   What the client asked for: each step is a whole screen, and scrolling
   brings the next screen out from behind the current one and lays it on top.

   The mechanism is `position: sticky` on every panel with the same `top: 0`.
   Panel 1 sticks to the viewport; panel 2 scrolls up over it and sticks in
   turn; and so on. That is the entire covering effect, and it is pure CSS —
   it works with JavaScript disabled, with a blocked CDN, and on any browser
   from the last five years.

   JavaScript only adds the depth cues on top: the covered panel scales down
   and dims a little (so it reads as receding, not just hidden), and the photo
   inside each panel drifts against the scroll. Nothing breaks without it.   */
.stackx { position: relative; }
.stackx-panel {
  position: sticky; top: 0; height: 100svh; min-height: 560px;
  overflow: hidden;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}
/* the incoming panel casts onto the one it is covering, so the overlap reads
   as a physical sheet rather than a hard cut */
.stackx-panel + .stackx-panel { box-shadow: 0 -34px 70px -18px rgba(0,0,0,.9); }
/* every panel is opaque, otherwise the one underneath shows through */
.stackx-panel::before { content: ''; position: absolute; inset: 0; background: var(--bg); z-index: 0; }

.stackx-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
/* <picture> is display:inline by default, so a percentage height on the <img>
   has no definite parent to resolve against and object-fit never runs. */
.stackx-media picture { display: block; width: 100%; height: 100%; }
/* A full-screen landscape crop of a portrait photograph shows one band of it.
   The per-image --focus keeps the tower in a 4:5 card; a 16:9 panel needs to
   sit lower still or the frame is all wall and no product. */
.stackx-media img {
  width: 100%; height: 118%; object-fit: cover;
  object-position: 50% calc(var(--focus, 50%) + 16%);
  will-change: transform;
}
/* The scrim runs from the copy side outward, so the photograph keeps its
   depth on the far side instead of the whole frame going flat black. */
.stackx-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,10,10,.4) 0%, rgba(10,10,10,.05) 34%, rgba(14,14,14,.66) 100%),
    linear-gradient(to var(--scrim-dir, right),
      rgba(11,12,12,.95) 0%, rgba(11,12,12,.9) 22%, rgba(11,12,12,.62) 44%,
      rgba(11,12,12,.22) 62%, transparent 78%);
}
[dir="rtl"] .stackx-media::after { --scrim-dir: left; }

.stackx-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
  padding-block: calc(var(--header-h) + var(--s-6)) var(--s-8);
}
.stackx-copy { max-width: 46ch; display: flex; flex-direction: column; gap: var(--s-4); }
.stackx-copy h3 { font-size: var(--fs-h1); line-height: var(--lh-head); letter-spacing: var(--track-head); }
.stackx-copy .stackx-lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--gold); }
.stackx-copy p:not(.stackx-lead) { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-dim); }

/* Step counter, set with the copy rather than floated in a corner: it answers
   "where am I in this sequence", which is a reading question, not decoration. */
.stackx-meter { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-1); }
.stackx-meter .bar { width: 56px; height: 2px; background: rgba(244,241,235,.2); position: relative; overflow: hidden; border-radius: 2px; flex: none; }
.stackx-meter .bar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--copper-grad); border-radius: 2px; }
.stackx-meter .lbl { font-family: var(--ff-mono); font-size: var(--fs-label); letter-spacing: .1em; color: var(--gold-dim); font-weight: 600; }
html[lang|="fa"] .stackx-meter .lbl, html[lang|="ar"] .stackx-meter .lbl { font-family: var(--ff-body); }

@media (max-width: 900px) {
  .stackx-panel { height: 100svh; min-height: 520px; }
  .stackx-copy { max-width: none; }
  .stackx-inner { align-items: flex-end; padding-block-end: calc(var(--s-9) + var(--s-5)); }
  /* On a phone the copy sits over the middle of the frame, so the scrim has
     to start climbing well before the text does. */
  .stackx-media::after {
    background: linear-gradient(to bottom,
      rgba(10,10,10,.46) 0%, rgba(10,10,10,.14) 16%, rgba(11,12,12,.6) 36%,
      rgba(12,13,13,.9) 55%, rgba(14,15,15,.96) 78%, rgba(16,17,17,.98) 100%);
  }
}
/* A sticky stack cannot be undone by JS alone, so the reduced-motion and
   no-sticky fallbacks are declared here: plain full-width sections. */
@media (prefers-reduced-motion: reduce) {
  .stackx-panel { position: relative; height: auto; min-height: 0; transform: none !important; opacity: 1 !important; }
  .stackx-inner { padding-block: var(--sec-y-sm); min-height: 62svh; }
}

/* ---------- 13. Flow steps ---------- */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; counter-reset: step; }
@media (max-width: 1024px) { .flow { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .flow { grid-template-columns: 1fr; } }
.flow > li { background: var(--bg-1); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); min-height: 150px; transition: background var(--t-mid) var(--e-out); }
.flow > li:hover { background: var(--bg-2); }
.flow .step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--copper-grad); flex: none; }
.flow p { font-size: var(--fs-small); color: var(--fg-dim); }

/* ---------- 14. Spec table ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
.spec-table { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; min-width: 260px; }
.spec-table th, .spec-table td { padding: var(--s-4) var(--s-5); text-align: start; border-bottom: 1px solid var(--line); }
.spec-table thead th { background: var(--bg-2); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--gold); font-weight: 600; }
.spec-table tbody tr { transition: background var(--t-fast) var(--e-out); }
.spec-table tbody tr:hover { background: var(--bg-1); }
.spec-table tbody tr:last-child td, .spec-table tbody tr:last-child th { border-bottom: 0; }
.spec-table td:last-child { font-family: var(--ff-mono); color: var(--fg); font-size: var(--fs-small); white-space: nowrap; }

/* ---------- 15. Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; align-items: center; gap: var(--s-5); text-align: start; padding: var(--s-5) 0; min-height: var(--tap); transition: color var(--t-fast) var(--e-out); }
.acc-head h3 { flex: 1; font-size: var(--fs-h4); font-weight: var(--w-head); }
.acc-head:hover { color: var(--gold); }
.acc-sign { flex: none; width: 18px; height: 18px; position: relative; }
.acc-sign::before, .acc-sign::after { content: ''; position: absolute; inset-inline: 0; top: 50%; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .42s var(--e-out); }
.acc-sign::after { transform: rotate(90deg); }
.acc-item.is-open .acc-sign::after { transform: rotate(0); }
.acc-item.is-open .acc-head { color: var(--gold); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .48s var(--e-io); }
.acc-item.is-open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { padding-bottom: var(--s-5); max-width: 76ch; color: var(--fg-dim); }

/* ---------- 16. Filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filter-btn {
  padding: var(--s-2) var(--s-5); min-height: 40px; border: 1px solid var(--line-2); border-radius: var(--radius-pill);
  font-family: var(--ff-body); font-size: var(--fs-label); letter-spacing: var(--track-label);
  text-transform: var(--upper); font-weight: 600; color: var(--fg-mute); white-space: nowrap;
  transition: all var(--t-fast) var(--e-out);
}
.filter-btn:hover { color: var(--fg); border-color: var(--line-3); }
.filter-btn[aria-pressed="true"] { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.filter-item { transition: opacity .4s var(--e-out), transform .4s var(--e-out); }
.filter-item.is-out { opacity: 0; transform: scale(.96); pointer-events: none; position: absolute; visibility: hidden; }
@media (max-width: 620px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .filters::-webkit-scrollbar { display: none; }
}

/* ---------- 17. Article ---------- */
.article-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-dim); }
.article-body > * + * { margin-top: 1.35em; }
.article-body h2 { font-size: var(--fs-h3); color: var(--fg); margin-top: 2em; margin-bottom: .15em; scroll-margin-top: calc(var(--header-h) + var(--s-6)); }
.article-body h3 { font-size: var(--fs-h4); color: var(--fg); margin-top: 1.6em; }
.article-body p { text-wrap: pretty; }
.article-body ul, .article-body ol { display: flex; flex-direction: column; gap: var(--s-3); padding-inline-start: 0; }
.article-body ul li { display: flex; gap: var(--s-3); }
.article-body ul li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: .74em; border-radius: 50%; background: var(--copper-grad); }
.article-body blockquote {
  border-inline-start: 2px solid var(--gold); padding-inline-start: var(--s-5);
  margin-block: 2em; font-family: var(--ff-accent); font-style: italic;
  font-size: var(--fs-h3); line-height: 1.5; color: var(--gold-hi);
}
html[lang|="fa"] .article-body blockquote, html[lang|="ar"] .article-body blockquote { font-style: normal; line-height: 1.85; }
.article-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.article-body a:hover { color: var(--gold-hi); }

.article-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; font-size: var(--fs-small); color: var(--fg-mute); }
.article-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }

.toc { position: sticky; top: calc(var(--header-h) + var(--s-6)); display: flex; flex-direction: column; gap: 2px; }
.toc a { font-size: var(--fs-small); color: var(--fg-mute); padding-inline-start: 15px; padding-block: 6px; position: relative; transition: color var(--t-fast) var(--e-out); line-height: 1.5; }
.toc a::before { content: ''; position: absolute; inset-inline-start: 0; top: 1.05em; width: 7px; height: 1px; background: var(--fg-faint); transition: all var(--t-fast) var(--e-out); }
.toc a:hover, .toc a.is-active { color: var(--gold); }
.toc a.is-active::before { background: var(--gold); width: 11px; }
@media (max-width: 900px) { .toc { flex-direction: row; flex-wrap: wrap; gap: var(--s-2) var(--s-4); padding: var(--s-4) 0; border-block: 1px solid var(--line); } }

/* ---------- 18. Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: var(--s-2); position: relative; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--ff-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--fg-mute); font-weight: 600; transition: color var(--t-fast) var(--e-out); }
.field:focus-within label { color: var(--gold); }
.field label .req { color: var(--copper-3); }
.field input, .field select, .field textarea { width: 100%; padding: var(--s-3) 0; min-height: var(--tap); border-bottom: 1px solid var(--line-2); color: var(--fg); font-size: var(--fs-body); transition: border-color var(--t-fast) var(--e-out); }
.field select { cursor: pointer; -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%); background-position: calc(100% - 12px) 22px, calc(100% - 7px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-inline-end: 26px; }
[dir="rtl"] .field select { background-position: 12px 22px, 17px 22px; padding-inline-end: 0; padding-inline-start: 26px; }
.field select option { background: var(--bg-2); color: var(--fg); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--gold); }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-bottom-color: var(--err); }
.field.is-valid input, .field.is-valid select, .field.is-valid textarea { border-bottom-color: rgba(143,191,159,.55); }
.field-msg { font-size: var(--fs-label); color: var(--err); min-height: 1em; letter-spacing: 0; text-transform: none; font-weight: 400; }
.form-note { font-size: var(--fs-small); color: var(--fg-mute); }
.form-status { padding: var(--s-4) var(--s-5); border-radius: var(--radius-lg); font-size: var(--fs-small); }
.form-status[hidden] { display: none; }
.form-status.ok { background: rgba(143,191,159,.1); border: 1px solid rgba(143,191,159,.45); color: #BFE0CB; }
.form-status.err { background: rgba(224,129,89,.11); border: 1px solid rgba(224,129,89,.5); color: var(--copper-3); }

/* ---------- 19. Contact rows ---------- */
.ct-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ct-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); min-height: var(--tap); transition: padding-inline-start var(--t-mid) var(--e-out); }
a.ct-row:hover { padding-inline-start: var(--s-2); }
.ct-row .k { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--fg-mute); min-width: 100px; font-weight: 600; }
.ct-row .v { font-size: var(--fs-h4); color: var(--fg); }
.ct-row .v[dir="ltr"] { font-family: var(--ff-mono); }

/* ---------- 20. Footer ---------- */
.ftr { border-top: 1px solid var(--line); background: var(--bg-inset); padding-block: var(--s-9) var(--s-6); }
.ftr-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-7); }
@media (max-width: 980px) { .ftr-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr-top { grid-template-columns: 1fr; } }
.ftr h4 { font-family: var(--ff-body); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--gold); margin-bottom: var(--s-4); font-weight: 600; }
.ftr ul { display: flex; flex-direction: column; gap: var(--s-1); }
.ftr ul a, .ftr .ftr-contact a { font-size: var(--fs-small); color: var(--fg-mute); transition: color var(--t-fast) var(--e-out); display: inline-block; padding-block: 7px; }
.ftr ul a:hover, .ftr .ftr-contact a:hover { color: var(--gold); }
.ftr-brand { display: inline-block; padding-block: var(--s-2); }  /* 28px mark + padding = 44px tap target */
.ftr-brand svg { height: 28px; width: auto; color: var(--gold); }
.ftr-wordmark { margin-top: var(--s-8); color: rgba(244,241,235,.045); }
.ftr-wordmark svg { width: 100%; height: auto; display: block; }
@media (max-width: 620px) { .ftr-wordmark { display: none; } }

.ftr-bottom {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-7);
  justify-content: space-between; align-items: center;
  font-size: var(--fs-small); color: var(--fg-mute);
}
.ftr-rights { color: var(--fg-mute); }
.ftr-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.ftr-legal a { color: var(--fg-mute); padding-block: 6px; transition: color var(--t-fast) var(--e-out); }
.ftr-legal a:hover { color: var(--gold); }
.ftr-legal .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); flex: none; }

.ftr-bottom > * { min-width: 0; max-width: 100%; }
.credit { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; padding-block: 6px; color: var(--fg-mute); transition: color var(--t-fast) var(--e-out); }
.credit-txt { white-space: nowrap; }
.credit-heart { width: 13px; height: 13px; color: var(--copper-2); display: inline-flex; flex: none; transition: color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-spring); }
.credit-heart svg { width: 100%; height: 100%; }
.credit-brand { position: relative; color: var(--gold); font-weight: 600; transition: color var(--t-fast) var(--e-out); }
.credit-brand::after { content: ''; position: absolute; inset-inline-start: 0; bottom: -3px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transition: transform var(--t-mid) var(--e-out); }
[dir="ltr"] .credit-brand::after { transform-origin: right; }
[dir="rtl"] .credit-brand::after { transform-origin: left; }
.credit:hover { color: var(--fg-dim); }
.credit:hover .credit-brand { color: var(--gold-hi); }
.credit:hover .credit-brand::after { transform: scaleX(1); }
[dir="ltr"] .credit:hover .credit-brand::after { transform-origin: left; }
[dir="rtl"] .credit:hover .credit-brand::after { transform-origin: right; }
.credit:hover .credit-heart { color: var(--copper-3); transform: scale(1.18); }
@media (max-width: 860px) { .ftr-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-4); } }
@media (max-width: 480px) { .ftr-bottom { align-items: center; text-align: center; } .ftr-legal { justify-content: center; } }

/* ---------- 21. CTA band ---------- */
.cta-band { position: relative; overflow: clip; border-top: 1px solid var(--line); }
.cta-band::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 70% 90% at 50% 120%, rgba(193,101,47,.22), transparent 65%); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 480px) { .cta-actions .btn { width: 100%; } }

/* ---------- 22. Breadcrumb / pager ---------- */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--fs-label); color: var(--fg-mute); letter-spacing: .04em; font-weight: 400; }
.crumb a { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 3px; }
.crumb a:hover { color: var(--gold); }
.crumb .sep { color: var(--fg-faint); display: inline-flex; }
[dir="rtl"] .crumb .sep { transform: scaleX(-1); }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 620px) { .pager { grid-template-columns: 1fr; } }
.pager a, .pager > span { background: var(--bg); padding: var(--s-7) var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); transition: background var(--t-mid) var(--e-out); }
.pager a:hover { background: var(--bg-1); }
.pager .k { font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: var(--upper); color: var(--gold-dim); font-weight: 600; }
.pager .t { font-size: var(--fs-h4); }
.pager a.next { text-align: end; align-items: flex-end; }

/* ---------- 23. Lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 9800; background: rgba(10,10,10,.95); backdrop-filter: blur(12px); display: grid; place-items: center; padding: clamp(var(--s-4), 5vw, var(--s-9)); opacity: 0; visibility: hidden; transition: opacity .38s var(--e-out), visibility .38s; }
.lb.is-open { opacity: 1; visibility: visible; }
.lb figure { display: grid; place-items: center; max-width: 100%; }
.lb img { max-width: 100%; max-height: 80vh; width: auto; object-fit: contain; border-radius: 4px; transition: opacity .3s var(--e-out); }
.lb.is-loading img { opacity: .35; }
.lb figcaption { margin-top: var(--s-4); font-size: var(--fs-small); color: var(--fg-mute); text-align: center; }
.lb-close { position: absolute; top: var(--s-5); inset-inline-end: var(--s-5); width: var(--tap); height: var(--tap); border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; color: var(--fg); transition: all var(--t-fast) var(--e-out); }
.lb-close:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.lb-nav { position: absolute; inset-block: 0; width: 20%; display: grid; place-items: center; }
.lb-nav.prev { inset-inline-start: 0; } .lb-nav.next { inset-inline-end: 0; }
.lb-nav span { width: var(--tap); height: var(--tap); border: 1px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; opacity: .5; background: rgba(20,21,21,.5); transition: all var(--t-fast) var(--e-out); }
.lb-nav:hover span { opacity: 1; background: var(--gold); color: var(--bg); border-color: var(--gold); }
.lb-count { position: absolute; bottom: var(--s-5); inset-inline-start: 50%; transform: translateX(-50%); font-family: var(--ff-mono); font-size: var(--fs-label); color: var(--fg-mute); }
@media (max-width: 620px) { .lb-nav { width: 26%; } .lb img { max-height: 68vh; } }

/* ---------- 24. Floating actions ---------- */
.fab-stack { position: fixed; z-index: 880; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-3); transition: transform var(--t-mid) var(--e-out); }
.fab-stack.is-lifted { transform: translateY(calc(var(--fab-lift, 0px) * -1)); }
.fab { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); min-height: var(--tap); background: var(--gold); color: var(--bg); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: 600; box-shadow: var(--shadow-2); opacity: 0; transform: translateY(20px) scale(.94); pointer-events: none; transition: opacity .4s var(--e-out), transform .4s var(--e-spring), background .3s; }
.fab.is-in { opacity: 1; transform: none; pointer-events: auto; }
.fab:hover { background: var(--gold-hi); }
.fab svg { width: 19px; height: 19px; flex: none; }
.to-top { width: var(--tap); height: var(--tap); border-radius: 50%; display: grid; place-items: center; padding: 0; background: var(--bg-2); color: var(--gold); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
.to-top:hover { background: var(--bg-3); color: var(--gold-hi); }
@media (max-width: 620px) { .fab .lbl { display: none; } .fab { padding: 0; width: var(--tap); justify-content: center; } }

/* ---------- 25. 404 ---------- */
.nf-code { font-family: var(--ff-display); font-size: clamp(4.5rem, 17vw, 13rem); font-weight: var(--w-display); line-height: .9; letter-spacing: -.04em; display: block; }

/* ---------- 26. Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .rv { opacity: 1; transform: none; }
  .mask-img::after { display: none; }
  .cursor, .cursor-ring { display: none; }
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: auto; }
  .preloader { display: none; }
}

/* ---------- 27. Print ---------- */
@media print {
  .hdr, .ftr, .fab-stack, .grain, .cursor, .cursor-ring, .preloader, .progress, .curtain, .menu { display: none !important; }
  body { background: #fff; color: #000; }
  .rv { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}