/* ══════════════════════════════════════════════════
   NR STUDIO — Shared Stylesheet
   Website Design · Photography · Cinematic Video
   ══════════════════════════════════════════════════ */

/* ── Fonts: self-hosted, Hebrew + Latin subsets only (the browser fetches just the ranges a page uses) ── */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../assets/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url('../assets/fonts/frank-ruhl-libre-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Frank Ruhl Libre'; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url('../assets/fonts/frank-ruhl-libre-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Heebo'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../assets/fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  /* Ink — #0C0D10 is the exact background of the logo artwork, so the
     brand PNGs sit on the page with no visible edge. */
  --ink:       #0C0D10;
  --ink-deep:  #060709;
  --ink-soft:  #12141A;
  --ink-card:  #15171E;
  --ink-line:  #1E212A;

  --gold:      #D4AF37;
  --gold-lite: #E8C77A;
  --gold-deep: #A8862A;
  --gold-grad: linear-gradient(135deg, #B8860B 0%, #D4AF37 38%, #F2DFA0 62%, #C9A227 100%);

  --bone:      #F7F5F0;
  --text:      rgba(247,245,240,0.90);
  --muted:     rgba(247,245,240,0.66);   /* ≥ 6:1 on --ink */
  --faint:     rgba(247,245,240,0.56);   /* ≥ 4.5:1 on every dark surface; was 0.32 (2.6:1) */

  --line:      rgba(212,175,55,0.14);
  --line-soft: rgba(247,245,240,0.07);

  --radius:    14px;
  --shadow:    0 18px 50px rgba(0,0,0,0.55);

  --font-he:   'Heebo', 'Segoe UI', Arial, sans-serif;
  --font-he-d: 'Frank Ruhl Libre', 'Heebo', Georgia, serif;
  --font-en:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --nav-h:     76px;
  --wrap:      1180px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-he);
  background: var(--ink);
  color: var(--text);
  direction: rtl;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-he-d); font-weight: 700; line-height: 1.18; color: var(--bone); }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); letter-spacing: -0.5px; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); letter-spacing: -0.3px; }
h3 { font-size: 1.18rem; }
p  { line-height: 1.85; color: var(--muted); font-size: 0.97rem; }
a  { text-decoration: none; color: inherit; }
img, svg, video { display: block; max-width: 100%; }
::selection { background: rgba(212,175,55,0.28); color: var(--bone); }


/* ── Accessibility basics ───────────────────────── */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip-link {
  position: fixed; top: -80px; right: 16px; z-index: 300;
  background: var(--gold); color: #1A1508; font-weight: 700; font-size: 0.95rem;
  padding: 12px 22px; border-radius: 0 0 12px 12px; transition: top .2s ease;
}
.skip-link:focus { top: 0; outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
main { display: block; }
/* anchor targets stop under the fixed nav, not behind it */
[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ── Placeholder marker ─────────────────────────────
   Anything not yet supplied by the owner is wrapped in .todo so it cannot
   be mistaken for real copy and cannot ship unnoticed. Remove the class
   (and the brackets) once the real value is in. */
.todo {
  outline: 1.5px dashed #E0A23A; outline-offset: 3px; border-radius: 4px;
  background: rgba(224,162,58,0.1); color: #F0C77A;
}

/* ── Long-form text (accessibility statement, privacy) ── */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 44px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1rem; line-height: 1.9; color: var(--text); opacity: 0.84; }
.prose p { margin-bottom: 14px; }
.prose ul { margin: 0 0 14px; padding-inline-start: 22px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--gold-lite); border-bottom: 1px solid rgba(212,175,55,0.35); }
.prose a:hover { color: var(--gold); }

/* ── Eyebrow: the small latin label used throughout the brand ── */
.eyebrow {
  display: inline-block;
  font-family: var(--font-en);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  direction: ltr;
  margin-bottom: 18px;
}
.eyebrow.muted { color: var(--faint); }

/* Thin gold rule with a centred diamond — echoes the brand banner */
.rule {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin: 0 auto 26px; max-width: 260px;
}
.rule::before, .rule::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-deep));
}
.rule::after { background: linear-gradient(270deg, transparent, var(--gold-deep)); }
.rule i { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); flex-shrink: 0; }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Navigation ─────────────────────────────────── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  background: rgba(12,13,16,0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, height .35s ease;
}
nav.scrolled {
  background: rgba(8,9,12,0.94);
  border-bottom-color: var(--line);
  height: 66px;
}
.nav-inner {
  max-width: var(--wrap); height: 100%; margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.logo { display: flex; align-items: center; flex-shrink: 0; }
.logo img { height: 34px; width: auto; transition: height .35s ease; }
nav.scrolled .logo img { height: 30px; }

.nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 0.9rem; font-weight: 500; color: var(--muted);
  position: relative; padding: 6px 0; transition: color .22s ease;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; right: 0; left: 0;
  height: 1px; background: var(--gold); transform: scaleX(0);
  transition: transform .28s ease;
}
.nav-links a:hover { color: var(--bone); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--bone); }
.nav-links a.nav-cta::after { display: none; }

.nav-hamburger {
  display: none; flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;                       /* touch target */
  cursor: pointer; padding: 8px; background: none; border: 0;
}
.nav-hamburger span {
  display: block; width: 24px; height: 1.5px; background: var(--gold);
  border-radius: 2px; transition: transform .3s ease, opacity .3s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Buttons ────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px; border-radius: 100px; border: 1px solid transparent;
  font-family: var(--font-he); font-size: 0.95rem; font-weight: 600;
  cursor: pointer; transition: transform .22s ease, box-shadow .22s ease,
                              background .22s ease, border-color .22s ease, color .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { flex-shrink: 0; }

.btn-gold {
  background: var(--gold-grad); color: #1A1508;
  box-shadow: 0 6px 26px rgba(212,175,55,0.26);
  font-weight: 700;
}
.btn-gold:hover { box-shadow: 0 12px 38px rgba(212,175,55,0.40); }

.btn-outline { border-color: rgba(212,175,55,0.38); color: var(--gold-lite); background: transparent; }
.btn-outline:hover { border-color: var(--gold); background: rgba(212,175,55,0.08); }

.btn-ghost { border-color: var(--line-soft); color: var(--text); background: rgba(247,245,240,0.03); }
.btn-ghost:hover { border-color: rgba(247,245,240,0.22); background: rgba(247,245,240,0.06); }

.btn-wa { background: #25D366; color: #08260F; font-weight: 700; box-shadow: 0 6px 26px rgba(37,211,102,0.26); }
.btn-wa:hover { box-shadow: 0 12px 38px rgba(37,211,102,0.40); }

.btn-lg { padding: 17px 42px; font-size: 1rem; }

/* ── Sections ───────────────────────────────────── */
section { padding: 104px 32px; position: relative; }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.section-head { max-width: 640px; margin-bottom: 58px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: 14px; font-size: 1.02rem; }
.bg-soft { background: var(--ink-soft); }
.bg-deep { background: var(--ink-deep); }

/* A hairline of gold across the top of a section */
.edge-top::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(900px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.35), transparent);
}

/* ── Page hero (inner pages) ────────────────────── */
.page-hero {
  padding: calc(var(--nav-h) + 92px) 32px 78px;
  text-align: center; position: relative; overflow: hidden;
  background: var(--ink-deep);
}
.page-hero::after {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 780px; height: 520px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.13), transparent 68%);
}
.page-hero .wrap { position: relative; z-index: 1; max-width: 720px; }
.page-hero p { font-size: 1.05rem; margin-top: 16px; }

/* ── Cards ──────────────────────────────────────── */
.card {
  background: var(--ink-card);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 34px 30px;
  position: relative; overflow: hidden;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.45), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.card:hover { border-color: rgba(212,175,55,0.3); transform: translateY(-4px); box-shadow: var(--shadow); }
.card:hover::before { opacity: 1; }
.card h3 { margin-bottom: 12px; }
.card p  { font-size: 0.92rem; }

.card-icon {
  width: 52px; height: 52px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.22);
  color: var(--gold);
  margin-bottom: 22px;
}

/* ── Footer ─────────────────────────────────────── */
footer { background: var(--ink-deep); border-top: 1px solid var(--ink-line); padding: 66px 32px 30px; }
.footer-top {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 48px;
  padding-bottom: 42px; border-bottom: 1px solid var(--ink-line); margin-bottom: 26px;
}
.footer-brand img { height: 42px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: 0.88rem; max-width: 280px; }
.footer-col h4 {
  font-family: var(--font-en); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 18px;
  /* inline-block so the latin text renders LTR but the box still sits at the
     inline-start of the RTL column, lined up with the links under it */
  display: inline-block; direction: ltr;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { font-size: 0.89rem; color: var(--muted); transition: color .2s ease; }
.footer-col a:hover { color: var(--gold-lite); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
}
.footer-copy { font-size: 0.78rem; color: var(--faint); }
.footer-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.tag {
  font-family: var(--font-en); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; direction: ltr;
  color: var(--faint); border: 1px solid var(--ink-line);
  border-radius: 100px; padding: 5px 14px;
}

/* ── Play button over a video card's thumbnail ──
   Put inside a positioned media frame (.shot / .work-slot); the whole frame
   becomes the button. Opens the dialog below via data-video-open. */
.shot-play {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(6,7,9,0.45), transparent 55%);
}
.shot-play-ico {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center; padding-right: 3px;   /* optical centring of the triangle */
  color: var(--gold); background: rgba(12,13,16,0.7);
  border: 1.5px solid rgba(212,175,55,0.6); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 7px rgba(212,175,55,0.12), 0 0 28px rgba(212,175,55,0.3);
  transition: transform .25s ease, box-shadow .25s ease;
}
.shot-play-ico svg { color: inherit; }
.shot-play:hover .shot-play-ico { transform: scale(1.08); box-shadow: 0 0 0 9px rgba(212,175,55,0.16), 0 0 36px rgba(212,175,55,0.5); }
.shot-play:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }

/* ── Video player dialog ────────────────────────
   Built by js/main.js for any [data-video-open] button. Sized from the
   viewport height so a vertical (9:16) reel always fits without scrolling. */
.video-modal {
  /* the global reset zeroes margins, which is what centres a modal <dialog> */
  margin: auto; padding: 0; overflow: visible; color: var(--text);
  border: 1px solid rgba(212,175,55,0.35); border-radius: 16px;
  background: var(--ink-deep);
  box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 40px rgba(212,175,55,0.08);
}
.video-modal::backdrop { background: rgba(6,7,9,0.88); backdrop-filter: blur(6px); }
.video-modal video {
  display: block; height: auto; aspect-ratio: 9 / 16; background: #000;
  width: min(92vw, calc(82vh * 9 / 16)); border-radius: 15px;
}
.video-modal-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; padding: 0 0 3px;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--bone); background: rgba(6,7,9,0.7);
  border: 1px solid rgba(212,175,55,0.4); backdrop-filter: blur(6px);
  transition: border-color .2s ease, color .2s ease;
}
.video-modal-close:hover { color: var(--gold); border-color: var(--gold); }
.video-modal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Floating WhatsApp button ───────────────────── */
.wa-float {
  position: fixed; bottom: 26px; left: 26px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #fff;
  box-shadow: 0 8px 28px rgba(37,211,102,0.36);
  transition: transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 12px 36px rgba(37,211,102,0.5); }

/* ── Scroll reveal ──────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s ease, transform .75s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ── Utilities ──────────────────────────────────── */
.center { text-align: center; }
.gold   { color: var(--gold) !important; }
.en     { font-family: var(--font-en); direction: ltr; letter-spacing: 0.05em; }

/* ── Before / after comparator ──────────────────────
   Markup + behaviour: js/compare-reveal.js ([data-compare]). "Before" is the
   RIGHT side because the page reads right to left. */
.compare {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--ink-line); background: var(--ink-deep);
  cursor: ew-resize; touch-action: pan-y; user-select: none;
}
.compare-layer { position: absolute; inset: 0; }
.compare-before { will-change: clip-path; }
.compare-layer img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; }
.compare-chip {
  position: absolute; top: 12px; z-index: 8;
  border-radius: 100px; padding: 5px 13px;
  border: 1px solid rgba(212,175,55,0.3);
  background: rgba(6,7,9,0.66); backdrop-filter: blur(6px);
  font-family: var(--font-he); font-size: 0.78rem; font-weight: 500;   /* no letter-spacing on Hebrew */
  color: var(--gold-lite); pointer-events: none; transition: opacity .3s ease;
}
.compare-chip.is-before { right: 12px; }
.compare-chip.is-after  { left: 12px; }
.compare-divider {
  position: absolute; top: 0; bottom: 0; z-index: 10;
  width: 2px; margin-left: -1px; pointer-events: none;
  background: var(--gold); will-change: left; box-shadow: 0 0 18px rgba(212,175,55,0.5);
}
.compare-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; pointer-events: auto; cursor: ew-resize;
  color: var(--gold); border: 2px solid var(--gold);
  background: rgba(12,13,16,0.82); backdrop-filter: blur(4px);
  box-shadow: 0 0 0 6px rgba(212,175,55,0.14), 0 0 26px rgba(212,175,55,0.4);
}
.compare-handle:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }

/* Side-by-side, for pairs framed differently (a slider would jump).
   --ar = width ÷ height, so both images end up the same height. */
.pair { display: flex; gap: 10px; }
.pair figure {
  flex: var(--ar) 1 0%; margin: 0; position: relative; overflow: hidden;
  border-radius: 10px; border: 1px solid var(--ink-line); background: var(--ink-deep);
}
.pair img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }
.pair .compare-chip { right: 10px; top: 10px; }

/* ── Work cards (home + work page) ──────────────── */
.wgrid { display: grid; gap: 22px; }
.wgrid.c2 { grid-template-columns: repeat(2, 1fr); }
.wgrid.c3 { grid-template-columns: repeat(3, 1fr); }
.wcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--ink-line); border-radius: var(--radius);
  overflow: hidden; background: var(--ink-card);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.wcard:hover { border-color: rgba(212,175,55,0.3); box-shadow: var(--shadow); }
.wmedia { padding: 12px 12px 0; }
.wmedia .compare, .wmedia .pair figure { border-radius: 10px; }
.wshot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--ink-deep); border-bottom: 1px solid var(--ink-line);
}
.wshot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.wcard:hover .wshot > img { transform: scale(1.04); }
.wshot.site { padding-top: 30px; }
.wshot.site > img { top: 30px; height: calc(100% - 30px); }
.chrome {
  position: absolute; top: 0; right: 0; left: 0; z-index: 3;
  height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  background: #16181F; border-bottom: 1px solid var(--ink-line);
}
.chrome b { width: 7px; height: 7px; border-radius: 50%; background: #2C3039; }
.chrome span {
  flex: 1; height: 16px; margin: 0 8px; border-radius: 4px; background: #0E1015; direction: ltr;
  font-family: var(--font-en); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.wbody { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.wcat {
  font-family: var(--font-en); direction: ltr; align-self: flex-start;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 9px;
}
.wbody h3 { font-size: 1.08rem; margin-bottom: 8px; }
.wbody p  { font-size: 0.88rem; line-height: 1.7; }
.wtags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 14px; }
.wtags span { font-size: 0.74rem; color: var(--muted); border: 1px solid var(--ink-line); border-radius: 100px; padding: 4px 11px; }
.visit {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: auto; padding-top: 16px;
  font-size: 0.86rem; font-weight: 600; color: var(--gold-lite);
}
.visit span { border-bottom: 1px solid rgba(212,175,55,0.3); padding-bottom: 2px; transition: border-color .2s ease; }
.visit:hover span { border-color: var(--gold); }
.visit svg { transition: transform .2s ease; }
.visit:hover svg { transform: translateX(-3px); }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .nav-hamburger { display: flex; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    /* fully opaque — at 98% the bright hero type still ghosted through */
    background: #08090C;
    border-bottom: 1px solid var(--line);
    padding: 12px 32px 26px;
    transform: translateY(-14px); opacity: 0; pointer-events: none;
    transition: opacity .28s ease, transform .28s ease;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links li { border-bottom: 1px solid var(--ink-line); }
  .nav-links li:last-child { border-bottom: 0; padding-top: 18px; }
  .nav-links a { display: block; padding: 16px 0; font-size: 1rem; }
  .nav-links a::after { display: none; }
  .nav-links .btn { width: 100%; }
}
@media (max-width: 900px) {
  .wgrid.c2, .wgrid.c3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .compare-chip { font-size: 0.72rem; top: 10px; padding: 4px 11px; }
  .compare-chip.is-before { right: 10px; } .compare-chip.is-after { left: 10px; }
  .compare-handle { width: 40px; height: 40px; }
  section { padding: 76px 20px; }
  .nav-inner { padding: 0 20px; }
  .page-hero { padding: calc(var(--nav-h) + 62px) 20px 58px; }
  .footer-top { grid-template-columns: 1fr; }
  footer { padding: 52px 20px 26px; }
  .wa-float { bottom: 18px; left: 18px; width: 52px; height: 52px; }
  .hero-actions .btn, .cta-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}