/* ============================================================
   WEDAI · WEDDING SITE — layout & components. RTL Hebrew.
   ============================================================ */

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-inline); }
section { position: relative; padding-block: var(--section-pad-y); }
.rule { height: 1px; background: var(--border-soft); border: 0; margin: 0; }

/* --- kicker / eyebrow --- */
.kicker {
  font-family: var(--tt-kicker-face);
  font-size: var(--fs-kicker);
  font-weight: var(--tt-kicker-fw);
  letter-spacing: var(--tt-kicker-ls);
  color: var(--gold);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-md);
}
.kicker::before {
  content: ""; width: 26px; height: 1px; background: var(--gold);
  opacity: 0.7;
}
.sec-title {
  font-family: var(--tt-h-lg-face);
  font-weight: var(--tt-h-lg-fw);
  font-size: var(--fs-h-lg);
  line-height: var(--tt-h-lg-lh);
  color: var(--ink);
  letter-spacing: var(--tt-h-lg-ls);
}
.sec-lead {
  font-size: var(--fs-lead);
  font-weight: var(--tt-lead-fw);
  line-height: var(--tt-lead-lh);
  color: var(--ink-2);
  max-width: 60ch;
  margin-top: var(--sp-md);
}

/* ============================ CHROME / NAV ============================ */
.chrome {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad-inline);
  background: linear-gradient(180deg, rgba(247,243,236,0.94), rgba(247,243,236,0));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
[data-theme="dark"] .chrome {
  background: linear-gradient(180deg, rgba(10,10,11,0.92), rgba(10,10,11,0));
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 44px; min-height: 44px; }
.brand-mark {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 24px; color: var(--ink); letter-spacing: 0.01em;
  direction: ltr; unicode-bidi: isolate;
}
.brand-mark .dot { color: var(--gold); }
.brand-sub {
  font-family: var(--font-label); font-size: 11px; font-weight: 400;
  color: var(--ink-muted); letter-spacing: 0.02em;
}
.nav { display: flex; align-items: center; gap: 30px; }
.nav a {
  font-family: var(--font-label); font-size: 14px; color: var(--ink-3);
  transition: color calc(.25s * var(--motion-scale)) var(--ease); position: relative;
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav a:hover, .nav a.is-active { color: var(--ink); }
.nav a.is-active::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -7px;
  height: 1px; background: var(--gold);
}
.nav-cta {
  font-family: var(--font-label); font-size: 14px; color: var(--bg) !important;
  background: var(--gold); padding: 9px 20px; border-radius: 100px;
  transition: background calc(.25s * var(--motion-scale)) var(--ease);
}
.nav-cta:hover { background: var(--gold-soft); }
.hamb {
  display: none; width: 44px; height: 44px; border: 1px solid var(--border);
  background: rgba(255,253,248,0.7); border-radius: 12px; cursor: pointer;
  color: var(--ink); align-items: center; justify-content: center;
}
[data-theme="dark"] .hamb { background: rgba(22,22,25,0.6); }
.hamb svg { width: 20px; height: 20px; }

/* full-page overlay menu */
.menu {
  position: fixed; inset: 0; z-index: 70; background: #08080a;
  display: flex; flex-direction: column; padding: 26px var(--pad-inline);
  opacity: 0; visibility: hidden; transition: opacity calc(.4s * var(--motion-scale)) var(--ease), visibility 0s linear calc(.4s * var(--motion-scale));
}
.menu.open { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-close {
  width: 44px; height: 44px; border: 1px solid var(--border);
  background: none; border-radius: 12px; color: var(--ink); cursor: pointer;
  font-size: 20px; line-height: 1;
}
.menu-list {
  margin: auto 0; display: flex; flex-direction: column; gap: 6px;
}
.menu-list a {
  font-family: var(--font-serif); font-size: clamp(28px, 8vw, 46px);
  color: var(--ink-3); padding: 8px 0; display: flex; align-items: baseline; gap: 16px;
  transition: color calc(.2s * var(--motion-scale)) var(--ease);
}
.menu-list a .idx {
  font-family: var(--font-label); font-size: 13px; color: var(--gold);
  min-width: 34px;
}
.menu-list a.is-active, .menu-list a:hover { color: var(--ink); }
.menu-list a.is-active .idx { opacity: 1; }

/* ============================ HERO ============================ */
.hero {
  min-height: var(--cap-hero, 100svh); display: flex; align-items: center;
  padding-block: 130px var(--sp-2xl); overflow: hidden;
}
.hero-inner { max-width: min(760px, 100%); }
.hero-kicker {
  font-family: var(--font-label); font-size: var(--fs-kicker); font-weight: 500;
  letter-spacing: 0.08em; color: var(--gold); margin-bottom: var(--sp-md);
}
.hero-title {
  font-family: var(--tt-hero-face); font-weight: var(--tt-hero-fw);
  font-size: var(--fs-hero); line-height: var(--tt-hero-lh); color: var(--ink);
  letter-spacing: var(--tt-hero-ls);
}
.hero-title .em { color: var(--gold); font-weight: 700; }
.hero-sub {
  font-size: var(--fs-lead); color: var(--ink-2); max-width: 46ch;
  margin-top: var(--sp-lg); line-height: 1.55;
}
.hero-actions { display: flex; gap: 16px; margin-top: var(--sp-lg); flex-wrap: wrap; }
.btn {
  font-family: var(--font-label); font-size: 15px; padding: 14px 30px;
  border-radius: 100px; transition: all calc(.25s * var(--motion-scale)) var(--ease); cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary { background: var(--gold); color: var(--bg); }
.btn-primary:hover { background: var(--gold-soft); transform: translateY(-1px); }
.btn-ghost { border-color: var(--border); color: var(--ink-2); }
.btn-ghost:hover { border-color: var(--gold); color: var(--ink); }
.hero-scroll {
  position: absolute; inset-block-end: 34px; inset-inline-start: var(--pad-inline);
  font-family: var(--font-label); font-size: 12px; color: var(--ink-muted);
  letter-spacing: 0.04em; display: flex; align-items: center; gap: 10px;
}
.hero-scroll::after {
  content: ""; width: 1px; height: 30px;
  background: linear-gradient(180deg, var(--gold), transparent);
}

/* ============================ LANGUAGE (02) ============================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.language .body-col p { color: var(--ink-2); margin-top: var(--sp-md); }
.language .body-col p:first-of-type { margin-top: var(--sp-lg); }
.language .body-col strong { color: var(--ink); font-weight: 600; }
/* the "one language" visual: stacked warm cards */
.lang-stack { position: relative; height: clamp(300px, 42vw, 460px); }
.lang-card {
  position: absolute; inset-inline: 0; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-3);
  padding: 20px 24px; box-shadow: 0 20px 50px -30px rgba(0,0,0,0.8);
}
.lang-card .lc-k { font-family: var(--font-label); font-size: 12px; color: var(--gold); }
.lang-card .lc-t { font-family: var(--font-serif); font-size: 20px; color: var(--ink); margin-top: 6px; }
.lang-card:nth-child(1) { top: 0; transform: rotate(-2deg); z-index: 1; }
.lang-card:nth-child(2) { top: 30%; transform: rotate(1.4deg); z-index: 2; background: var(--bg-2); }
.lang-card:nth-child(3) { top: 60%; transform: rotate(-0.6deg); z-index: 3;
  border-color: var(--gold-deep); }

/* ============================ TIMELINE (04) ============================ */
.timeline { }
.tl-head { max-width: 60ch; margin-bottom: var(--sp-2xl); }
.tl-track { position: relative; display: flex; flex-direction: column; gap: 4px; }
.tl-track::before {
  content: ""; position: absolute; inset-block: 12px; inset-inline-start: 7px;
  width: 1px; background: linear-gradient(180deg, var(--gold-deep), var(--border) 90%);
}
.tl-item {
  position: relative; padding-inline-start: 44px; padding-block: 26px;
  border-bottom: 1px solid var(--border-soft);
}
.tl-item:last-child { border-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 32px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--gold-deep);
}
.tl-item::after {
  content: ""; position: absolute; inset-inline-start: 4px; top: 36px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 12px 2px rgba(201,162,106,0.5);
}
.tl-phase { font-family: var(--font-label); font-size: 13px; color: var(--gold); letter-spacing: 0.03em; }
.tl-title { font-family: var(--tt-h-sm-face); font-size: var(--fs-h-sm); font-weight: var(--tt-h-sm-fw); letter-spacing: var(--tt-h-sm-ls); color: var(--ink); margin-top: 4px; }
.tl-body { color: var(--ink-3); margin-top: 10px; max-width: 62ch; }

/* ============================ SCREEN / TECHNICAL (03) ============================ */
.screencraft { background: var(--bg-2); }
.sc-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(30px,5vw,70px); align-items: center; }
/* the U-shaped screen diagram */
.u-screen { aspect-ratio: 2.5 / 1; width: 100%; position: relative;
  border-radius: 10px; overflow: hidden; background: #0b0906;
  border: 1px solid var(--border); }
.u-top { position: absolute; inset-inline: 0; top: 0; height: 60%;
  background: radial-gradient(120% 160% at 50% 0%, rgba(201,162,106,0.16), rgba(11,9,6,0) 70%);
  border-bottom: 1px solid rgba(201,162,106,0.12); }
.u-leg { position: absolute; bottom: 0; width: 24%; height: 40%;
  background: radial-gradient(120% 140% at 50% 100%, rgba(201,162,106,0.14), rgba(11,9,6,0) 72%); }
.u-leg.l { inset-inline-start: 0; border-inline-end: 1px solid rgba(201,162,106,0.10); }
.u-leg.r { inset-inline-end: 0; border-inline-start: 1px solid rgba(201,162,106,0.10); }
.u-oval { position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
  width: 40%; aspect-ratio: 2.6/1; border: 1px solid var(--gold-deep); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 13px; color: var(--gold-soft); }
.u-dead { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 52%; height: 40%; background: repeating-linear-gradient(45deg,
    rgba(109,101,90,0.10) 0 8px, transparent 8px 16px);
  border: 1px dashed var(--border); display: flex; align-items: center; justify-content: center; }
.u-dead span { font-family: var(--font-label); font-size: 10px; color: var(--ink-muted); }

/* --- shape rack: one language, four screen shapes --- */
.scr-rack { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; align-items: end; }
.scr-item { margin: 0; min-width: 0; }
.scr-item.span2 { grid-column: 1 / -1; }
.shp-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-top: 7px; font-family: var(--font-label); font-size: 11px;
  letter-spacing: .06em; color: var(--ink-3); }
.shp-cap .r { color: var(--gold-deep); }

.scr-shape { position: relative; width: 100%; overflow: hidden;
  background: #0b0906; border: 1px solid var(--border); }
.scr-shape .g { position: absolute; inset: 0; }

/* real approved work sitting inside each shape, under the safe/dead-zone overlays */
.u-screen > picture, .scr-shape > picture { display: block; }
.scr-photo { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0; border-radius: inherit; }
.scr-scrim { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: rgba(11,9,6,0.34); }
.u-screen > .u-top, .u-screen > .u-leg, .u-screen > .u-oval, .u-screen > .u-dead,
.scr-shape > .g, .scr-shape > .scr-safe, .scr-shape > .scr-dead, .scr-shape > .scr-inset { z-index: 2; }
.u-oval, .scr-safe { text-shadow: 0 1px 3px rgba(0,0,0,0.75); }
.u-dead span { text-shadow: 0 1px 3px rgba(0,0,0,0.75); }
[data-theme="dark"] .scr-scrim { background: rgba(6,6,7,0.40); }
/* zone marks must stay readable once real work sits behind them */
.u-screen:has(.scr-photo) .u-dead,
.scr-shape:has(.scr-photo) .scr-dead {
  background: repeating-linear-gradient(45deg,
    rgba(11,9,6,0.55) 0 8px, rgba(11,9,6,0.16) 8px 16px);
  border-color: rgba(201,162,106,0.45);
}
.u-screen:has(.scr-photo) .u-oval,
.scr-shape:has(.scr-photo) .scr-safe {
  background: rgba(11,9,6,0.42); border-color: var(--gold); color: var(--gold-soft);
}
.scr-safe { position: absolute; left: 50%; transform: translateX(-50%);
  border: 1px solid var(--gold-deep); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 11px; color: var(--gold-soft);
  white-space: nowrap; }
.scr-dead { position: absolute; top: 0; bottom: 0; width: 17%;
  background: repeating-linear-gradient(45deg,
    rgba(109,101,90,0.10) 0 8px, transparent 8px 16px);
  border-inline: 1px dashed var(--border); }
.scr-dead.l { inset-inline-start: 0; }
.scr-dead.r { inset-inline-end: 0; }

/* 5:1 ultra-wide strip: the sides are the risk, centre is the only safe ground */
.scr-ultra { aspect-ratio: 5 / 1; border-radius: 6px; }
.scr-ultra .g { background: radial-gradient(58% 170% at 50% 50%, rgba(201,162,106,0.17), rgba(11,9,6,0) 72%); }
.scr-ultra .scr-safe { top: 50%; transform: translate(-50%,-50%); width: 24%; aspect-ratio: 2.6/1; font-size: 10px; }

/* 16:9 standard: clean field, title-safe inset */
.scr-wide { aspect-ratio: 16 / 9; border-radius: 6px; }
.scr-wide .g { background: radial-gradient(120% 130% at 50% 0%, rgba(201,162,106,0.15), rgba(11,9,6,0) 70%); }
.scr-wide .scr-inset { position: absolute; inset: 7%; border: 1px dashed var(--border); border-radius: 2px; }
.scr-wide .scr-safe { top: 50%; transform: translate(-50%,-50%); width: 54%; aspect-ratio: 2.6/1; }

/* half circle: diameter is the 16 of 16:9, so the box is 16 x 8 */
.scr-dome { aspect-ratio: 16 / 8; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  border-bottom-color: rgba(201,162,106,0.35); }
.scr-dome .g { background: radial-gradient(85% 130% at 50% 100%, rgba(201,162,106,0.18), rgba(11,9,6,0) 70%); }
.scr-dome .scr-safe { bottom: 11%; width: 44%; aspect-ratio: 2.6/1; }

/* ============================ DELIVERABLES (05) ============================ */
.deliver-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--sp-xl); }
.dcard {
  background: var(--bg-3); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px; transition: border-color calc(.25s * var(--motion-scale)) var(--ease), transform calc(.25s * var(--motion-scale)) var(--ease);
}
.dcard:hover { border-color: var(--gold-deep); transform: translateY(-3px); }
.dcard .d-num { font-family: var(--font-label); font-size: 12px; color: var(--gold); }
.dcard .d-title { font-family: var(--font-serif); font-size: 21px; color: var(--ink); margin-top: 10px; }
.dcard .d-body { font-size: var(--fs-body-sm); color: var(--ink-3); margin-top: 8px; }

/* ============================ MEDIA SLOTS (DevG-swappable) ============================ */
.cell-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; z-index: 2; border-radius: inherit;
}
.cell-media[src], .cell-media[poster] { opacity: 1; }
/* keep-then-hide: fade the placeholder/mock once a slot holds media */
.gcell:has(> .cell-media[src]) > :not(.cell-media),
.gcell:has(> .cell-media[poster]) > :not(.cell-media),
.scr:has(> .cell-media[src]) > :not(.cell-media),
.scr:has(> .cell-media[poster]) > :not(.cell-media),
.u-screen:has(> .cell-media[src]) > :not(.cell-media),
.u-screen:has(> .cell-media[poster]) > :not(.cell-media),
.scr-shape:has(> .cell-media[src]) > :not(.cell-media),
.scr-shape:has(> .cell-media[poster]) > :not(.cell-media) {
  opacity: 0; transition: opacity calc(.3s * var(--motion-scale)) var(--ease); pointer-events: none;
}

/* ============================ EXAMPLES (06) ============================ */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: var(--sp-xl); }
.gcell { aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  position: relative; }
.gcell .g-tag { font-family: var(--font-label); font-size: 12px; color: var(--ink-muted); }
.gcell.wide { grid-column: span 2; aspect-ratio: 8/3; }

/* ============================ PROCESS (07) ============================ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: var(--sp-xl); }
.step .s-num { font-family: var(--font-serif); font-size: 40px; color: var(--gold-deep); }
.step .s-title { font-family: var(--font-serif); font-size: 20px; color: var(--ink); margin-top: 8px; }
.step .s-body { font-size: var(--fs-body-sm); color: var(--ink-3); margin-top: 6px; }

/* ============================ PACKAGE (08) ============================ */
.package { background: var(--bg-2); }
.pkg-card {
  max-width: 720px; margin: var(--sp-xl) auto 0; text-align: center;
  border: 1px solid var(--gold-deep); border-radius: var(--radius);
  padding: clamp(34px, 5vw, 60px); background:
    radial-gradient(120% 100% at 50% 0%, rgba(201,162,106,0.08), transparent 70%), var(--bg-3);
}
.pkg-card .p-name { font-family: var(--tt-h-md-face); font-size: var(--fs-h-md); font-weight: var(--tt-h-md-fw); letter-spacing: var(--tt-h-md-ls); color: var(--ink); }
.pkg-card .p-lead { color: var(--ink-2); margin-top: 12px; }
.pkg-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: var(--sp-lg); }
.pkg-list span {
  font-family: var(--font-label); font-size: 13px; color: var(--ink-2);
  border: 1px solid var(--border); border-radius: 100px; padding: 8px 16px;
}
.pkg-note { font-size: var(--fs-body-sm); color: var(--ink-muted); margin-top: var(--sp-lg); }

/* ============================ CONTACT (09) ============================ */
.contact { text-align: center; }
.contact .sec-title { max-width: 18ch; margin: 0 auto; }
.contact .sec-lead { margin-inline: auto; }
.contact-actions { display: flex; gap: 16px; justify-content: center; margin-top: var(--sp-xl); flex-wrap: wrap; }

/* ============================ FOOTER ============================ */
.foot { padding-block: var(--sp-xl); border-top: 1px solid var(--border-soft); }
.foot-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.foot .brand-mark { font-size: 20px; }
.foot-meta { font-family: var(--font-label); font-size: 12px; color: var(--ink-muted); }

/* ============================ RESPONSIVE ============================ */
/* tablet / iPad (portrait & landscape) */
@media (max-width: 1024px) {
  .nav { display: none; }
  .hamb { display: inline-flex; }
  .deliver-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gcell.wide { grid-column: span 2; }
}
@media (max-width: 900px) {
  .split, .sc-grid { grid-template-columns: 1fr; }
  .lang-stack { margin-top: var(--sp-lg); }
  .language .split { direction: rtl; }
}
/* phone */
@media (max-width: 640px) {
  .deliver-grid, .steps, .gallery-grid { grid-template-columns: 1fr; }
  .scr-rack { grid-template-columns: 1fr; }
  .scr-item.span2 { grid-column: auto; }
  .gcell.wide { grid-column: span 1; aspect-ratio: 4/3; }
  .hero { min-height: 92svh; }
  .hero-sub { margin-top: var(--sp-md); }
  .brand-sub { display: none; }
  .tl-item { padding-inline-start: 36px; }
  .hero-scroll { display: none; }
  .btn { flex: 1; text-align: center; }
}

/* ============================================================
   v2 OVERRIDES · "the screen is the star" — stark, cool, confident
   ============================================================ */
/* headlines: contemporary grotesque, heavier, tighter. no serif romance.
   hero/sec/tl/p-name weights + tracking folded into the TEXT THEMES
   (tokens.css --tt-*), the base rules consume them — no shadow overrides. */
.dcard .d-title, .step .s-title,
.lang-card .lc-t { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.brand-mark { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
.menu-list a { font-family: var(--font-display); font-weight: 700; }
.s-num, .step .s-num { font-family: var(--font-display); font-weight: 800; color: var(--ink-muted); }

/* accents: DARK ONLY — white light for actions, cool steel spark elsewhere.
   In light mode these fall back to the base gold/brass rules above. */
[data-theme="dark"] .nav-cta { background: var(--white); }
[data-theme="dark"] .nav-cta:hover { background: #fff; }
[data-theme="dark"] .btn-primary { background: var(--white); color: var(--bg); }
[data-theme="dark"] .btn-primary:hover { background: #fff; }
[data-theme="dark"] .hero-title .em { color: var(--spark); font-weight: 800; }
[data-theme="dark"] .brand-mark .dot { color: var(--spark); }
[data-theme="dark"] .kicker { color: var(--ink-3); }
[data-theme="dark"] .kicker::before { background: var(--spark); opacity: 1; }
[data-theme="dark"] .tl-item::before { border-color: var(--spark-dim); }
[data-theme="dark"] .tl-item::after { background: var(--spark); box-shadow: 0 0 12px 2px rgba(127,166,189,0.45); }
[data-theme="dark"] .tl-phase, [data-theme="dark"] .d-num, [data-theme="dark"] .lc-k { color: var(--spark); }
[data-theme="dark"] .dcard:hover { border-color: var(--spark-dim); }
[data-theme="dark"] .u-oval { border-color: var(--spark-dim); color: var(--ink-3); }
[data-theme="dark"] .u-top { background: radial-gradient(120% 160% at 50% 0%, rgba(127,166,189,0.14), rgba(6,6,7,0) 70%);
  border-bottom-color: rgba(127,166,189,0.14); }
[data-theme="dark"] .u-leg { background: radial-gradient(120% 140% at 50% 100%, rgba(127,166,189,0.12), rgba(6,6,7,0) 72%); }
[data-theme="dark"] .scr-shape { background: #060607; }
[data-theme="dark"] .scr-safe { border-color: var(--spark-dim); color: var(--ink-3); }
[data-theme="dark"] .shp-cap .r { color: var(--spark-dim); }
[data-theme="dark"] .scr-ultra .g { background: radial-gradient(58% 170% at 50% 50%, rgba(127,166,189,0.15), rgba(6,6,7,0) 72%); }
[data-theme="dark"] .scr-wide .g { background: radial-gradient(120% 130% at 50% 0%, rgba(127,166,189,0.13), rgba(6,6,7,0) 70%); }
[data-theme="dark"] .scr-dome .g { background: radial-gradient(85% 130% at 50% 100%, rgba(127,166,189,0.16), rgba(6,6,7,0) 70%); }
[data-theme="dark"] .scr-dome { border-bottom-color: rgba(127,166,189,0.32); }
[data-theme="dark"] .pkg-card { border-color: var(--border);
  background: radial-gradient(120% 100% at 50% 0%, rgba(127,166,189,0.06), transparent 70%), var(--bg-3); }
[data-theme="dark"] .p-lead, [data-theme="dark"] .sec-lead { color: var(--ink-2); }

/* ============================ THEME TOGGLE ============================ */
.theme-toggle {
  width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 100px;
  background: var(--bg-3); color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color calc(.25s * var(--motion-scale)) var(--ease), border-color calc(.25s * var(--motion-scale)) var(--ease), background calc(.25s * var(--motion-scale)) var(--ease);
  margin-inline-start: 6px; flex: none;
}
.theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.theme-toggle svg { width: 19px; height: 19px; }
.theme-toggle .i-moon { display: none; }
.theme-toggle .i-sun  { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: block; }
[data-theme="dark"] .theme-toggle .i-sun  { display: none; }
[data-theme="dark"] .theme-toggle { background: rgba(22,22,25,0.6); }

/* HERO becomes a two-column: statement + the LED screen */
.hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 72px); align-items: center; width: 100%; }
.hero-inner { max-width: none; }
.hero-kicker {
  font-family: var(--font-label); font-weight: 500; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px; letter-spacing: 0.02em;
}
.hero-kicker .tick {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--spark);
  border: 1px solid var(--spark-dim); border-radius: 5px; padding: 3px 7px;
}

/* the LED screen object */
.hero-screen { position: relative; }
.scr {
  position: relative; aspect-ratio: 2.5 / 1; width: 100%;
  background: var(--bg-screen); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; box-shadow: 0 40px 120px -50px rgba(127,166,189,0.35), inset 0 0 60px rgba(0,0,0,0.6);
}
.scr-content { position: absolute; inset: 0; height: 62%;
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(127,166,189,0.22), transparent 60%),
    linear-gradient(160deg, #12212a 0%, #0a1015 55%, #0b0d10 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.scr-grid { position: absolute; inset: 0; opacity: 0.35;
  background-image: linear-gradient(rgba(127,166,189,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,166,189,0.10) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: radial-gradient(80% 100% at 50% 30%, #000 40%, transparent 85%); }
.scr-mono { font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5vw, 64px);
  color: var(--white); letter-spacing: 0.02em; position: relative; text-shadow: 0 0 30px rgba(127,166,189,0.5); }
.scr-mono span { color: var(--spark); font-weight: 300; margin: 0 2px; }
.scr-cap { font-family: var(--font-label); font-size: 12px; color: rgba(245,244,241,0.6);
  letter-spacing: 0.04em; position: relative; }
.scr-leg { position: absolute; bottom: 0; width: 24%; height: 38%;
  background: linear-gradient(180deg, rgba(127,166,189,0.06), rgba(6,6,7,0)); }
.scr-leg.l { inset-inline-start: 0; border-inline-end: 1px solid rgba(127,166,189,0.10); }
.scr-leg.r { inset-inline-end: 0; border-inline-start: 1px solid rgba(127,166,189,0.10); }
.scr-base { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 52%; height: 38%; background: #060607; }
.scr-meta { display: flex; justify-content: space-between; margin-top: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--ink-muted); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero { min-height: auto; padding-block: 120px var(--sp-2xl); }
  .hero-screen { order: 2; }
}

/* --- mobile hero overflow fix (grid/flex blowout) --- */
.hero-inner, .hero-screen, .body-col, .lang-stack { min-width: 0; }
.hero-grid > * { min-width: 0; }
@media (max-width: 640px) {
  .hero-title { font-size: clamp(34px, 12vw, 52px); }
  .hero-actions { width: 100%; }
  .hero-actions .btn { flex: 1 1 auto; min-width: 0; text-align: center; }
  .hero-sub { max-width: 100%; }
  .scr-meta { font-size: 9px; }
}

/* --- hard mobile hero containment --- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 640px) {
  .hero-title { font-size: clamp(30px, 10vw, 44px); overflow-wrap: anywhere; }
  .hero-inner { width: 100%; }
  .hero-actions { flex-wrap: wrap; }
  .hero-actions .btn { flex: 1 1 140px; }
  .chrome { padding-inline: 20px; }
}
html, body { max-width: 100%; overflow-x: hidden; }

/* hero is a flex container; its .wrap child must not blow out on narrow */
.hero > .wrap { width: 100%; min-width: 0; }

/* ============================================================
   STRUCTURE B — "פעימה" (locked 2026-07-16). Per-section grounds:
   every section owns data-bg="white|black" and remaps the SAME tokens,
   so all child styles just work. The global theme toggle retires (hidden),
   the page starts white and pulses dark per section.
   ============================================================ */
.theme-toggle { display: none !important; }

/* Ground blocks are pure ALIAS remaps (alias pass 2026-07-17): the palette
   lives ONCE in tokens.css primitives (--lt-* / --dk-*); a section's data-bg
   only decides which primitive set the semantic names point at. No raw hex
   here, ever — edit the primitives (THEME station) and both grounds follow. */
section[data-bg="white"], footer[data-bg="white"] {
  --bg: var(--lt-bg); --bg-2: var(--lt-bg-2); --bg-3: var(--lt-bg-3);
  --border: var(--lt-border); --border-soft: var(--lt-border-soft);
  --ink: var(--lt-ink); --ink-2: var(--lt-ink-2); --ink-3: var(--lt-ink-3); --ink-muted: var(--lt-ink-muted);
  --gold: var(--lt-gold); --gold-soft: var(--lt-gold-soft); --gold-deep: var(--lt-gold-deep);
  background: var(--bg); color: var(--ink-2);
}
section[data-bg="black"], footer[data-bg="black"] {
  --bg: var(--dk-bg); --bg-2: var(--dk-bg-2); --bg-3: var(--dk-bg-3);
  --border: var(--dk-border); --border-soft: var(--dk-border-soft);
  --ink: var(--dk-ink); --ink-2: var(--dk-ink-2); --ink-3: var(--dk-ink-3); --ink-muted: var(--dk-ink-muted);
  --gold: var(--dk-gold); --gold-soft: var(--dk-gold-soft); --gold-deep: var(--dk-gold-deep);
  background: var(--bg); color: var(--ink-2);
}

/* --- 01 hero, minimal white --- */
.hero-b { min-height: 86svh; display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; padding-block: 150px 90px; }
/* hero size override folded into the HERO text theme (tokens.css --tt-hero-*) */
.hero-b .hero-sub { margin-inline: auto; }
.hero-b .hero-kicker { justify-content: center; display: inline-flex; }
.hero-b .hero-actions { justify-content: center; }
.hero-b .hero-scroll { inset-inline: 0; text-align: center; display: block; }
.hero-b .hero-scroll::after { display: none; }

/* --- show sections: art plates with AIR --- */
.show { padding-block: clamp(110px, 14vh, 190px); }
.show .show-head { max-width: 640px; margin-bottom: clamp(44px, 6vh, 80px); }
.show .show-line { font-size: var(--fs-lead); color: var(--ink-3); margin-top: 10px; font-weight: 300; }
.art { margin: 0; }
.art + .art { margin-top: clamp(60px, 8vh, 110px); }
.art-slot { position: relative; aspect-ratio: 2.5 / 1; overflow: hidden; background: #0d0d0e;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.55); }
section[data-bg="white"] .art-slot { box-shadow: 0 34px 80px -36px rgba(28,24,17,.38); }
.art-slot .g-tag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.art-cap { direction: ltr; text-align: left; font-family: var(--font-label); font-size: 11px;
  letter-spacing: .22em; color: var(--ink-muted); padding-top: 16px; }
.art-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.art-duo .art + .art { margin-top: 0; }
.art-duo .art-slot { aspect-ratio: 4 / 3; }

/* --- art unit (Moreno sketch 2026-07-16): video window + two stacked image
   placeholders at its side. Every show window except the first (Magic). --- */
.art-unit { display: grid; grid-template-columns: 1fr clamp(180px, 23%, 300px);
  gap: clamp(18px, 2.2vw, 30px); align-items: stretch; }
.art-unit .art-slot { aspect-ratio: auto; height: 100%; min-height: 0; }
.art-unit > .art-slot { aspect-ratio: 2.5 / 1; height: auto; }
.art-side { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(18px, 2.2vw, 30px); min-width: 0; }
.img-slot { position: relative; overflow: hidden; background: var(--bg-3);
  border: 1px solid var(--border-soft); }
.img-slot .g-tag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.img-slot .cell-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-unit .art-cap { grid-column: 1 / -1; }
/* keep-then-hide for image placeholders */
.img-slot:has(> .cell-media[src]) > :not(.cell-media) {
  opacity: 0; transition: opacity calc(.3s * var(--motion-scale)) var(--ease); pointer-events: none;
}
.img-slot .cell-media:not([src]) { opacity: 0; }
@media (max-width: 900px) {
  .art-unit { grid-template-columns: 1fr; }
  .art-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .img-slot { aspect-ratio: 4 / 3; }
}

/* --- strips: quiet white information breaths --- */
.strip { padding-block: clamp(96px, 12vh, 160px); text-align: center; }
.strip-in { max-width: 720px; margin-inline: auto; }
/* two media windows under the language strip (Moreno 2026-07-17) */
.lang-media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 30px; }
.lang-media .img-slot { aspect-ratio: 16 / 10; }
@media (max-width: 640px) { .lang-media { grid-template-columns: 1fr; gap: 12px; } }
/* language block merged INTO show-1 (Moreno 2026-07-17): breathing room after the art */
.show .lang-in { margin-top: clamp(56px, 9vw, 110px); }
.strip .kicker { justify-content: center; display: inline-flex; }
.strip p { margin-top: var(--sp-md); }
.tl-compact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 34px;
  margin-top: var(--sp-xl); text-align: right; }
.tl-compact .tl-body { margin-top: 6px; font-size: var(--fs-body-sm); }

/* --- info home --- */
.info-home { padding-block: clamp(100px, 12vh, 170px); }
.dl-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 44px; margin-top: var(--sp-xl); }
.dlc { display: flex; flex-direction: column; gap: 4px; padding-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.dlc .d-title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); }
.dlc .d-body { font-size: var(--fs-body-sm); color: var(--ink-3); }
.ih-block { margin-top: clamp(90px, 11vh, 150px); }
.steps-b { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: var(--sp-xl); }

/* --- closing --- */
.closing .closing-in { text-align: center; max-width: 680px; margin: clamp(60px, 8vh, 100px) auto 0; }
.closing .sec-lead { margin-inline: auto; }
.foot[data-bg] { border-top: 1px solid var(--border-soft); }

/* --- U-wall mask (Moreno 2026-07-16): the media is cut to the physical wall
   silhouette; dead zone + corners punch through to the section ground.
   Per-slot opt-in via data-mask on .art-slot. Masks live in assets/masks/. --- */
/* the slot paints the SECTION's own ground (var remapped by data-bg), not
   transparency — immune to compositor white-backdrop paths behind video */
/* masked slots: transparent box, NO box-shadow ever (the rectangle shadow bug,
   Moreno caught it 2026-07-16). The shadow is cast BY THE MASK SHAPE instead:
   .art-shadow wears the same mask as the video (solid ground-colored fill) and
   its WRAPPER carries drop-shadow — filter on the wrapper reads the masked
   alpha, so the shadow follows the wall silhouette, not the box. The fill also
   doubles as the video's backdrop, so the multiply blend lands on ground color. */
.art-slot[data-mask] { background: transparent; box-shadow: none !important;
  /* the MASK clips the media shape, so the box may stay open — this lets the
     silhouette's drop shadow continue past the slot onto the page surface */
  overflow: visible; }
.art-shadow { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 20px 26px rgba(28, 24, 17, 0.38)); }
/* no mask assigned = clean full-frame plate; the mask-shaped shadow fill would
   paint a solid ground rectangle, so it only exists under a mask */
.art-slot:not([data-mask]) .art-shadow { display: none; }
section[data-bg="black"] .art-shadow { filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.65)); }
.art-shadow i { position: absolute; inset: 0; display: block; background: var(--bg);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.art-slot[data-mask="u-wall"] .art-shadow i {
  -webkit-mask-image: url('/assets/masks/u-wall.png'); mask-image: url('/assets/masks/u-wall.png'); }
.art-slot[data-mask="magic"] .art-shadow i {
  -webkit-mask-image: url('/assets/masks/magic.png'); mask-image: url('/assets/masks/magic.png'); }
.art-slot[data-mask="u-wall"] .cell-media {
  -webkit-mask-image: url('/assets/masks/u-wall.png');
  mask-image: url('/assets/masks/u-wall.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* On WHITE grounds, masked media multiplies with the cream: video whites
   become exactly the page cream (nothing inside the frame can out-glow the
   paper). This kills the pure-white bleed through fade masks. Black grounds
   keep normal blending (multiply would crush the art into the black). */
section[data-bg="white"] .art-slot[data-mask] .cell-media { mix-blend-mode: multiply; }

/* Magic style — LOCKED mask (Moreno 2026-07-16): the fade version, image or video */
.art-slot[data-mask="magic"] .cell-media {
  -webkit-mask-image: url('/assets/masks/magic.png');
  mask-image: url('/assets/masks/magic.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* keep-then-hide for the new art slots (.art-shadow is chrome, never hides) */
.art-slot:has(> .cell-media[src]) > :not(.cell-media):not(.art-shadow),
.art-slot:has(> .cell-media[poster]) > :not(.cell-media):not(.art-shadow) {
  opacity: 0; transition: opacity calc(.3s * var(--motion-scale)) var(--ease); pointer-events: none;
}

/* responsive */
@media (max-width: 900px) {
  .art-duo { grid-template-columns: 1fr; }
  .tl-compact { grid-template-columns: 1fr 1fr; }
  .dl-compact { grid-template-columns: 1fr; }
  .steps-b { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tl-compact { grid-template-columns: 1fr; }
  .steps-b { grid-template-columns: 1fr; }
  .art-slot { aspect-ratio: 16 / 9; }
  .hero-b { min-height: 78svh; }
}

/* ============================================================
   OT. RECUT (2026-08-29) - brand, ground-aware chrome, new blocks.
   Appended layer. The Structure-B ground system above is untouched.
   ============================================================ */

/* --- a11y: skip link + visible focus --- */
.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 90;
  background: var(--lt-ink); color: var(--lt-bg); padding: 10px 18px;
  border-radius: 100px; font-family: var(--font-label); font-size: 14px;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold, #a67c35); outline-offset: 3px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-scale: 0; }
  html { scroll-behavior: auto; }
  .skip-link { transition: none; }
}

/* ============================================================
   GROUND-AWARE CHROME - kills the fixed-header dark blurred band.
   The header carried a cream gradient + blur on every ground, so it
   painted a milky slab over the black sections. Now it is transparent
   until scrolled, and its scrim and ink follow the section underneath.
   ============================================================ */
.chrome {
  background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background calc(.3s * var(--motion-scale)) var(--ease);
  padding-block: 16px;
}
.chrome[data-over="white"] {
  --chr-bg: 247,243,236; --chr-ink: #1c1811; --chr-ink-3: #8a7f6c;
  --chr-border: #e7ddcc; --chr-accent: #a67c35;
}
.chrome[data-over="black"] {
  --chr-bg: 10,10,11; --chr-ink: #f5f4f1; --chr-ink-3: #9b9b9e;
  --chr-border: #2f2f34; --chr-accent: #c8a24c;
}
.chrome.is-stuck {
  background: linear-gradient(180deg, rgba(var(--chr-bg),0.94) 58%, rgba(var(--chr-bg),0) 100%);
}
.chrome .brand-mark { color: var(--chr-ink); }
.chrome .brand-mark .dot { color: var(--chr-accent); }
.chrome .brand-sub { color: var(--chr-ink-3); }
.chrome .nav a { color: var(--chr-ink-3); }
.chrome .nav a:hover, .chrome .nav a.is-active { color: var(--chr-ink); }
.chrome .nav a.is-active::after { background: var(--chr-accent); }
.chrome .nav-cta { background: var(--chr-accent); color: rgb(var(--chr-bg)) !important; }
.chrome .nav-cta:hover { filter: brightness(1.08); }
.chrome .hamb {
  border-color: var(--chr-border); color: var(--chr-ink);
  background: rgba(var(--chr-bg), 0.55);
}

/* the menu overlay is always dark, so it owns its own ink */
.menu { background: #08080a; }
.menu .brand-mark { color: #f5f4f1; }
.menu .brand-mark .dot { color: #c8a24c; }
.menu-close { color: #f5f4f1; border-color: #2f2f34; }
.menu-list a { color: #86868a; }
.menu-list a:hover, .menu-list a.is-active { color: #f5f4f1; }

/* --- brand mark: OT. reads as a wordmark --- */
.brand-mark { letter-spacing: 0.02em; }
.brand { gap: 14px; }

/* ============================================================
   HERO - statement, then one real screen plate.
   ============================================================ */
.hero-b { min-height: auto; padding-block: clamp(140px, 20vh, 190px) clamp(70px, 9vh, 110px); }
.hero-b .hero-sub { max-width: 54ch; }
.hero-plate { margin-top: clamp(52px, 7vh, 88px); }
.hero-plate .art-cap { text-align: center; direction: ltr; }

/* ============================================================
   WORK - one lead plate, then a tight four-up of real frames.
   ============================================================ */
.work-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.4vw, 32px); margin-top: clamp(56px, 7vh, 96px);
}
.wk-card { margin: 0; min-width: 0; }
.wk-frame {
  position: relative; aspect-ratio: 2.5 / 1; overflow: hidden;
  background: #0d0d0e; border: 1px solid var(--border-soft);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.6);
}
.wk-frame img { width: 100%; height: 100%; object-fit: cover; }
.wk-card figcaption {
  direction: ltr; text-align: left; font-family: var(--font-label);
  font-size: 10px; letter-spacing: .22em; color: var(--ink-muted); padding-top: 12px;
}

/* ============================================================
   SCREENS - the differentiator, now a full-width argument:
   claim, one annotated real design, then the four-shape rack.
   ============================================================ */
.screencraft { padding-block: clamp(100px, 13vh, 170px); }
.sc-head { max-width: 760px; }
.sc-head .sc-p2 { color: var(--ink-3); margin-top: var(--sp-md); max-width: 62ch; }

/* annotated real example. Box geometry is the verified U-wall spec
   (screen-spec/README.md, SVG 3169.3 x 1257) converted to percent. */
.zonecheck { margin: clamp(48px, 6vh, 76px) 0 0; }
.zc-frame {
  position: relative; width: 100%; aspect-ratio: 2.5 / 1; overflow: hidden;
  background: #0d0d0e; box-shadow: 0 34px 80px -36px rgba(28,24,17,.42);
}
.zc-frame img { width: 100%; height: 100%; object-fit: cover; }
.zc-box {
  position: absolute; display: flex; align-items: flex-start; justify-content: center;
  pointer-events: none;
}
.zc-box b {
  font-family: var(--font-label); font-weight: 500; font-size: clamp(9px, 1.1vw, 12px);
  letter-spacing: .04em; padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  transform: translateY(-50%);
}
.zc-logo {
  inset-inline-start: 29.03%; width: 41.97%; top: 7.32%; height: 44.55%;
  border: 1px solid rgba(232,200,120,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), inset 0 0 40px rgba(232,200,120,.12);
}
.zc-logo b { background: rgba(232,200,120,.95); color: #1c1811; }
.zc-dead {
  inset-inline-start: 23.76%; width: 52.50%; top: 59.27%; height: 40.73%;
  border: 1px dashed rgba(255,255,255,.55);
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.055) 0 9px, transparent 9px 18px);
  align-items: center;
}
.zc-dead b { background: rgba(20,18,14,.86); color: #efe8db; transform: none; }
.zc-cap {
  font-size: var(--fs-body-sm); color: var(--ink-3); padding-top: 16px; max-width: 68ch;
}

.sc-rack-block { margin-top: clamp(64px, 8vh, 104px); }
.sc-sub {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h-sm);
  color: var(--ink); margin-bottom: var(--sp-lg); letter-spacing: -0.01em;
}
.scr-rack { gap: clamp(16px, 2vw, 26px); }

/* ============================================================
   WHAT YOU GET - timeline and deliverables, merged into one list.
   ============================================================ */
.get-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 44px); margin-top: clamp(48px, 6vh, 72px);
}
.get {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
.get .g-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  color: var(--gold); direction: ltr; text-align: right;
}
.get .g-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--ink); }
.get .g-body { font-size: var(--fs-body-sm); color: var(--ink-3); }

/* ============================================================
   PROOF - method commitments, not invented social proof.
   ============================================================ */
.proof-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px clamp(28px, 4vw, 60px); margin-top: var(--sp-xl);
}
.pf { display: flex; flex-direction: column; gap: 5px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft); }
.pf-t {
  font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink);
  display: flex; align-items: baseline; gap: 10px;
}
.pf-t::before {
  content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: var(--gold); transform: translateY(-2px);
}
.pf-b { font-size: var(--fs-body-sm); color: var(--ink-3); }

/* ============================================================
   PACKAGE + CLOSING
   ============================================================ */
.pkg-head { text-align: center; }
.pkg-head .kicker { justify-content: center; display: inline-flex; }
.closing-plate { margin-top: clamp(70px, 9vh, 120px); }
.closing .closing-in { margin-top: clamp(50px, 6vh, 80px); }
.contact-note {
  font-family: var(--font-label); font-size: 12px; color: var(--ink-muted);
  margin-top: 16px; letter-spacing: .01em;
}

/* honest review state: the buttons are visibly not wired yet */
.contact-actions [aria-disabled="true"],
.contact-actions .btn:disabled {
  opacity: .55; cursor: not-allowed;
}
.contact-actions [aria-disabled="true"]:hover,
.contact-actions .btn:disabled:hover { transform: none; }
.contact-actions.is-live [aria-disabled] { opacity: 1; cursor: pointer; }

/* ============================================================
   RESPONSIVE - the recut blocks. Mobile is a deliberate single
   column, not a squeezed desktop.
   ============================================================ */
@media (max-width: 1024px) {
  .get-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .chrome { padding-block: 12px; }
  .work-grid { grid-template-columns: 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .hero-b { padding-block: clamp(120px, 17vh, 160px) 70px; }
}
@media (max-width: 640px) {
  .get-grid { grid-template-columns: 1fr; gap: 22px; }
  .brand-sub { display: none; }
  .brand-mark { font-size: 22px; }
  .hero-b { min-height: auto; padding-block: 116px 60px; }
  .hero-plate { margin-top: 40px; }
  .hero-plate .art-slot, .closing-plate .art-slot { aspect-ratio: 2.5 / 1; }
  .wk-frame { aspect-ratio: 2.5 / 1; }
  .work-grid { gap: 26px; }
  .zc-frame { aspect-ratio: 2.5 / 1; }
  .zc-box b { font-size: 9px; padding: 3px 7px; }
  .sc-rack-block { margin-top: 56px; }
  .scr-rack { gap: 22px; }
  .pkg-list span { font-size: 12px; padding: 7px 13px; }
  .contact-actions { width: 100%; }
  .contact-actions .btn { flex: 1 1 140px; }
}
/* very narrow phones: the annotation labels stop fighting the art */
@media (max-width: 420px) {
  .zc-logo b { font-size: 8px; padding: 2px 6px; }
  .zc-dead b { font-size: 8px; padding: 2px 6px; }
  .hero-title { font-size: clamp(28px, 9.6vw, 40px); }
}

/* the art plates keep their real 2.5:1 screen ratio on every width.
   The old rule squashed them to 16:9 on phones, which misrepresented
   the product: a U-wall is not a 16:9 screen. */
@media (max-width: 640px) {
  .art-slot { aspect-ratio: 2.5 / 1; }
}

/* ============================================================
   OT. MARK (study 09, chosen by Moreno 2026-08-30)
   The full stop is rebuilt as a 16:9 screen panel: the brand's
   whole idea is that the screen is part of the design, so the
   punctuation is a screen.

   Geometry, all in em so one font-size drives the mark:
     panel   0.267em wide x 0.150em tall  = exactly 16:9
     offset  0.09em from the T
     radius  0.02em, a panel edge, not a pill
   A Rubik 700 full stop is a 0.18em square. The panel is matched to
   that optical mass (about 1.1x), so the wordmark still reads as
   "OT." and the screen is a detail, not a slab. The first build used
   0.200em and read as a brick beside the letters (Moreno, 2026-08-30).

   The '.' character stays in the DOM for text and screen readers,
   so the mark still reads as "OT." to a reader, and is pushed out
   of the clipped box.
   Size floor: at 24px on a 1x display the panel is 6.4 x 3.6 CSS px,
   which reads as a tick of tobacco rather than a legible screen. On
   a 2x display it is 7.2 device px tall and reads properly. Below
   20px use the app icon.
   ============================================================ */
.brand-mark .dot {
  display: inline-block;
  width: .267em;
  height: .150em;
  margin-inline-start: .09em;
  border-radius: .02em;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  vertical-align: baseline;

  /* Brand-locked, not theme-driven. The legacy chrome/menu/dark rules were
     still colouring the full stop with the pre-R2 accents: a yellow gold
     (#c8a24c) in the header and menu, and a blue (#7fa6bd) in the dark
     footer. A logo accent must not drift with a ground token, so the two
     tobacco values are pinned here. */
  background: #8f3f18;
}
.chrome[data-over="black"] .brand-mark .dot,
.menu .brand-mark .dot,
.foot .brand-mark .dot,
[data-theme="dark"] .brand-mark .dot {
  /* lifted tobacco, the deep tone dies against black */
  background: #b86230;
}