/* ==========================================================================
   CARETTA — Design System (LOCKED tokens v1)
   Source: deliverables/caretta-design-system.md + design-system.html
   Type: Spectral (serif) + Inter (sans). Warm paper + oak material thread.
   Sea (#2E3C44) = orientation/chrome only (header banner, nav, links).
   Motif: thin cartographic rules, waypoints, coordinate micro-type.
   ========================================================================== */

/* Self-hosted, subsetted webfonts (latin + hebrew ranges actually used). font-display:swap. */
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:300; font-display:swap; src:url(../fonts/spectral-300.woff2) format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/spectral-400.woff2) format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url(../fonts/spectral-400-italic.woff2) format('woff2'); }
@font-face{ font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/spectral-500.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/inter-400.woff2) format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/inter-500.woff2) format('woff2'); }
@font-face{ font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/frank-ruhl-libre-500.woff2) format('woff2'); }
@font-face{ font-family:'Frank Ruhl Libre'; font-style:normal; font-weight:600; font-display:swap; src:url(../fonts/frank-ruhl-libre-600.woff2) format('woff2'); }
@font-face{ font-family:'Heebo'; font-style:normal; font-weight:400; font-display:swap; src:url(../fonts/heebo-400.woff2) format('woff2'); }
@font-face{ font-family:'Heebo'; font-style:normal; font-weight:500; font-display:swap; src:url(../fonts/heebo-500.woff2) format('woff2'); }

:root{
  --paper:   #F4F2EC;
  --surface: #FBFAF7;
  --ink:     #232020;
  --muted:   #615C53;   /* darkened for WCAG AA on sand + paper */
  --line:    #E3DDD2;
  --oak:     #9D7C5A;   /* decorative material thread (swatch, underlines) */
  --oak-text:#75583A;   /* oak as TEXT/interactive (AA on paper) */
  --oak-grad: linear-gradient(180deg,#B2906E,#8A6949);
  --sea:     #2E3C44;
  --sand:    #E7DFD2;
  --clay:    #9C5A4A;
  /* 26.07.2026 — --clay measures 4.00:1 on --sand and 4.10:1 on #eae1d8: below AA for text.
     The warning was already written at line ~104 and never enforced. --clay stays for decoration
     (borders, dots); any clay that is READ AS TEXT moves here. 5.23:1 on --sand, same hue. */
  --clay-text: #8A4736;
  /* Drawing language — locked technical-sheet hierarchy. These are intentional
     sheet inks, kept distinct from web UI so section cuts and fine shading retain
     their measured contrast in every EN/HE SVG. */
  --drawing-ink: #6F6A60;
  --drawing-muted: #999489;
  --drawing-shade: #B6B0A2;
  /* Deep-Sea Night — founder-locked brand colour 2026-07-01 (the cinematic hero blue) */
  --night:   #0E1B23;
  --night-2: #11202A;
  --night-grad: linear-gradient(180deg,#11202A 0%,#0B1418 60%,#070D11 100%);
  --night-glow: radial-gradient(120% 78% at 50% 6%, rgba(220,230,234,.20), rgba(11,20,24,0) 44%);

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(56px, 9vh, 96px);

  /* ====================================================================
     SEMANTIC LAYER — added 2026-07-25
     ====================================================================
     Everything above this line is a PRIMITIVE: the raw palette.
     Everything below is a ROLE.

     Why it exists: design_lock.py found 66 off-palette hexes in 22 shades.
     Taken apart, not one of them was somebody wanting something prettier —
     they were all "the token ran out": 18 status colours that had no token,
     17 dark steps, 16 greys, 13 paper variants. The palette ENDED, and the
     continuation was hand-sewn, hex by hex, one file at a time.

     RULE FOR THIS BLOCK: every value here is an existing hex lifted out of the
     code as it already renders. No new hue was invented, and no pixel moved.
     Each line names where it came from and how many places used it.
     ==================================================================== */

  /* — paper tier — */
  --paper-2: #F7F4EC;        /* ×9 · paper used as ink or fill ON night surfaces
                                (.closing.on-dark, .cmp2-mid, .hero-pause) */

  /* — ink tier — */
  --ink-2: #26221E;          /* ×3 · warm near-black for type over pale imagery
                                (.closing.on-light) — needs more weight than --ink */
  --ink-3: #1c1c1a;          /* ×5 · print ink: toner on white, deeper than --ink */

  /* — night tier · companions to --night / --night-2 — */
  --night-deep:     #0a141b; /* ×1 · the Compass canvas, one step below --night */
  --ink-on-night:   #eef1ec; /* ×1 · body type on that canvas */
  --muted-on-night: #9fb2bc; /* ×3 · secondary type on that canvas */

  /* — oak tier — */
  --oak-deep: #746546;       /* ×1 · Compass quote button; the darkest oak in use.
                                ⚠ ΔE ≈ 2 from --oak-text — a real consolidation
                                candidate, but merging it moves pixels, so it is
                                a colour call, not a refactor's. */

  /* — print greys — deliberately scoped to print. Generic web grey is the
       opposite of warm ivory and must never reach the screen UI; naming them
       --print-* is what stops them leaking. — */
  --print-coord: #555555;    /* ×1 · coordinate micro-type */
  --print-muted: #666666;    /* ×4 · labels, dt, fine print */
  --print-rule:  #cccccc;    /* ×5 · table and section rules */
  --print-hair:  #eeeeee;    /* ×2 · row hairlines */

  /* — status —
     ⚠ THE ONLY OFF-PALETTE HUES ON THIS SITE. A green and a pink-red reached
     certificates.html and contact.html (the post-submit banner) and eye.css.
     CARETTA's book says "colour = meaning, not decoration" and has no green.
     They are QUARANTINED here, at their exact current values, so that:
       (a) the count of unnamed drift goes to zero;
       (b) re-hueing them to the palette becomes a FOUR-LINE change instead of
           18 edits across 5 files.
     Not re-hued in this pass because that moves pixels, and this pass is a
     zero-diff refactor. Palette-native option, MEASURED, awaiting a colour decision:
       --ok-bg → var(--surface) · --ok-ink  → var(--sea)   = 10.90:1  AA ✔
       --err-bg → var(--surface) · --err-ink → var(--clay) =  5.06:1  AA ✔
     ⚠ --clay on --sand is only 4.00:1 — below AA for body text. If the banner
       ever moves onto sand, the ink has to darken. Today's values pass too:
       ok 7.97:1 · err 5.23:1. So this is a brand question, not an access one.
     ✔ 26.07.2026 — this warning was ENFORCED: --clay-text (#8A4736) now exists for any clay
       that is read as text (5.23:1 on --sand). --clay itself stays decorative. — */
  --ok-bg:  #EEF3EE;
  --ok-ink: #2F5133;
  --err-bg: #F6ECE9;
  --err-ink: #9C4A3C;
  --wa-ink: #0b3d20;         /* ×1 · type on WhatsApp's own #25D366. An external
                                brand's pairing, quoted — not a CARETTA colour. */

  /* — motion —
     Measured before this block existed: 59 transition/animation declarations,
     20 distinct durations, 4 curves, zero tokens. IBM Carbon runs a whole design
     system on 6 and 6. CARETTA needs two, and they are already in the doctrine:
       RESPONSE — hover, focus, press. Fast enough to be invisible.
       ARRIVAL  — "every transition is arriving at a coast"
                  (knowledge/caretta-navigation-journey.md). The one brand idea
                  that lives only as code.
     Ambient loops (the ticker, the route flow, the gate breath) are periods, not
     transitions, and keep their own timing — converging them would break them. — */
  --t-fast:     150ms;
  --t-arrive:   700ms;
  --e-standard: cubic-bezier(.2,0,.38,.9);  /* Carbon standard-productive */
  --e-arrive:   cubic-bezier(.4,0,.2,1);    /* already the most-used curve here */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; max-width:100%; }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{ font-family:var(--sans); color:var(--ink); background:var(--paper); font-size:17px; line-height:1.7; font-weight:400; overflow-x:clip; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
[id]{ scroll-margin-top:112px; }

.skip-link{ position:absolute; top:-48px; inset-inline-start:10px; z-index:200; background:var(--paper); color:var(--ink); padding:9px 16px; border-radius:4px; border:1px solid var(--ink); font-size:13px; transition:top var(--t-fast) var(--e-standard); }
.skip-link:focus{ top:10px; }
a:focus-visible,.btn:focus-visible,.nav-toggle:focus-visible,button:focus-visible,
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.coast:focus-visible{
  outline:2px solid var(--sea); outline-offset:3px; border-radius:3px; }
.site-head a:focus-visible,.nav-toggle:focus-visible,.hero-img a:focus-visible{ outline-color:var(--paper); }

/* — Type — */
.display{ font-family:var(--serif); font-weight:500; line-height:1.05; letter-spacing:-.01em; }
h1,.h1{ font-family:var(--serif); font-weight:500; font-size:clamp(40px,6.2vw,80px); line-height:1.06; letter-spacing:-.012em; }
h2,.h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,4vw,46px); line-height:1.14; letter-spacing:-.008em; }
h3,.h3{ font-family:var(--serif); font-weight:500; font-size:clamp(19px,2.2vw,24px); line-height:1.3; }
.kicker{ font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.lead{ font-size:clamp(18px,2vw,22px); line-height:1.55; color:var(--ink); font-weight:400; }
.muted{ color:var(--muted); }
.small{ font-size:14px; color:var(--muted); }
em{ font-style:italic; }

/* — Layout — */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.band{ background:var(--sand); }
.surface{ background:var(--surface); }
.rule{ height:1px; background:var(--line); border:0; }
.stack > * + *{ margin-top:1.05rem; }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.grid > *{ min-width:0; }
.cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cols-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.center{ text-align:center; }
.measure{ max-width:62ch; }
.measure-sm{ max-width:46ch; }

/* — Cartographic motif — */
.coord{ font-family:var(--sans); font-size:10.5px; letter-spacing:.18em; color:var(--muted); }
.chartline{ display:flex; align-items:center; gap:14px; color:var(--muted); }
.chartline::before,.chartline::after{ content:""; height:1px; background:var(--line); flex:1; }
.chartline .coord{ white-space:nowrap; }
.waypoint{ display:flex; flex-wrap:wrap; gap:10px 16px; align-items:flex-start; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.waypoint b{ color:var(--ink); font-weight:500; }
.waypoint .wp,.waypoint .wp-now{ display:inline-flex; flex-direction:column; gap:3px; }
.waypoint .wp-t{ line-height:1; }
.waypoint .wp-s{ font-size:9px; letter-spacing:.03em; text-transform:none; font-weight:400; font-style:normal; line-height:1.1; color:var(--muted); opacity:.82; }
.waypoint .node{ width:5px; height:5px; border:1px solid var(--oak); transform:rotate(45deg); margin-top:3px; }
html[dir="rtl"] .waypoint .wp-s{ font-family:'Heebo','Assistant',sans-serif; letter-spacing:0; }
/* live breadcrumb trail */
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:9px 12px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-block:14px; }
.breadcrumb a{ color:var(--muted); } .breadcrumb a:hover{ color:var(--ink); }
.breadcrumb .here{ color:var(--ink); }
.breadcrumb .node{ width:5px; height:5px; border:1px solid var(--oak); transform:rotate(45deg); }

/* — Header — Deep Sea brand banner, white logo, large & clear — */
.site-head{ position:sticky; top:0; z-index:50; background:var(--sea); }
.site-head .wrap{ display:flex; align-items:center; justify-content:space-between; height:96px; }
.brand{ display:flex; align-items:center; height:100%; }
.brand img{ height:64px; width:auto; }
.nav{ display:flex; gap:clamp(18px,2.4vw,34px); align-items:center; }
.nav a{ font-size:13px; letter-spacing:.05em; color:rgba(244,242,236,.86); transition:color var(--t-fast) var(--e-standard); }
.nav a:hover{ color:#fff; }
.nav a[aria-current="page"]{ color:#fff; border-bottom:1px solid var(--oak); padding-bottom:4px; }
.nav .cta{ border:1px solid rgba(244,242,236,.6); padding:9px 18px; border-radius:8px; color:#fff; font-weight:500; }
.nav .cta:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.nav-toggle{ display:none; background:none; border:0; font-size:24px; color:var(--paper); cursor:pointer; line-height:1; padding:10px 12px; margin:-10px -12px; }

/* — Buttons — */
.btn{ display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:500; letter-spacing:.02em; padding:13px 24px; border-radius:8px; border:1px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer; transition:all var(--t-fast) var(--e-standard); }
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--oak-text); border-color:var(--oak-text); }
.link-arrow{ font-size:14px; font-weight:500; letter-spacing:.02em; border-bottom:1px solid var(--oak); padding-bottom:3px; color:var(--oak-text); }
.link-arrow:hover{ color:var(--ink); border-color:var(--ink); }
.link-arrow::after{ content:" \2192"; }

/* — Hero — */
.hero{ border-bottom:1px solid var(--line); }
.hero .wrap{ padding-block:clamp(56px,12vh,128px); }
.hero h1{ max-width:17ch; }
.hero .lead{ max-width:48ch; margin-top:1.3rem; color:var(--muted); }
.hero .row{ display:flex; gap:16px; flex-wrap:wrap; margin-top:2rem; }
.hero-img{ position:relative; min-height:clamp(520px,80vh,820px); display:flex; align-items:flex-end; overflow:hidden; background:var(--sand); }
.hero-img > .hero-eager-pic{ position:absolute; inset:0; z-index:0; display:block; }
.hero-img .hero-eager{ width:100%; height:100%; object-fit:cover; object-position:center 32%; }
.hero-img .bg{ position:absolute; inset:0; z-index:1; background-size:cover; background-position:center; }
/* Hero scrim — MEASURED, not eyeballed (2026-07-25). The old ramp (.08 at 35% → .62) left the
   hero text over the plank photo below WCAG AA on the light floors: St Barth measured CR 2.60 on
   the coordinate line, 3.73 on the lead — failure class ① (text on image without enough scrim),
   and it tracked the floor's lightness, so it failed on 8 of 18 models and passed on the dark
   ones. The ramp now reaches its working density where the text block actually sits (48%), not
   at the very bottom. Re-measured on the rendered pixels behind each line, EN + HE, 375 px and
   1440 px: 0 failures on 18 of 18 models; worst case 5.24 (HE St Barth coordinate line), best
   12.23 (Havana). Final tone is a colour decision — the ratio is not negotiable, the mood is. */
.hero-img .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(35,32,32,.05) 0%,rgba(35,32,32,.10) 26%,rgba(35,32,32,.60) 48%,rgba(35,32,32,.80) 100%); }
.hero-img .wrap{ position:relative; z-index:2; padding-block:clamp(40px,7vh,90px); width:100%; color:var(--paper); }
.hero-img h1{ color:var(--paper); text-shadow:0 2px 28px rgba(14,20,24,.60), 0 1px 4px rgba(14,20,24,.55); }
.hero-img .lead{ color:rgba(244,242,236,.92); text-shadow:0 2px 20px rgba(14,20,24,.60), 0 1px 3px rgba(14,20,24,.55); }
.hero-img .coord{ color:rgba(244,242,236,.85); text-shadow:0 1px 12px rgba(14,20,24,.6); }
/* model number beside the name — Capri 747 */
.mno{ font-family:var(--sans); font-size:.32em; font-weight:400; letter-spacing:.1em; color:rgba(244,242,236,.62); margin-inline-start:.55em; vertical-align:.42em; }
/* sticky model CTA — mobile only, restrained */
.model-bar{ display:none; }
@media (max-width:680px){
  .model-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--paper); border-top:1px solid var(--line); padding:10px var(--gutter); box-shadow:0 -4px 16px rgba(14,27,35,.10); }
  .model-bar .mb-name{ font-family:var(--serif); font-size:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .model-bar .btn{ padding:10px 18px; font-size:13px; white-space:nowrap; }
  body:has(.model-bar){ padding-bottom:64px; }
}
/* architect layer — expandable measured signature */
.arch-layer{ margin-top:16px; }
.arch-layer summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 24px; border:1px solid var(--oak); border-radius:4px; background:var(--sand); transition:background var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.arch-layer summary:hover,.arch-layer[open] summary{ background:var(--oak-text); border-color:var(--oak-text); }
.arch-layer summary .coord{ font-size:12.5px; letter-spacing:.16em; color:var(--ink); }
.arch-layer summary:hover .coord,.arch-layer[open] summary .coord{ color:var(--paper); }
.arch-layer summary::-webkit-details-marker{ display:none; }
.arch-layer summary::after{ content:"\002B"; font-size:22px; line-height:1; color:var(--oak-text); }
.arch-layer summary:hover::after,.arch-layer[open] summary::after{ color:var(--paper); }
.arch-layer[open] summary::after{ content:"\2212"; }
.arch-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 32px; margin:24px 0 6px; }
.arch-grid dt{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.arch-grid dd{ font-family:var(--serif); font-size:17px; color:var(--ink); margin-top:4px; }
html[dir="rtl"] .arch-grid dd{ font-family:'Heebo','Assistant',sans-serif; }
@media(max-width:680px){ .arch-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.arch-cta{ display:flex; gap:14px 28px; flex-wrap:wrap; margin-top:18px; }
/* Voyage · arrival moment — the coast's name + coordinates surface as you land */
@media (prefers-reduced-motion:no-preference){
  .hero-img .arrive > *{ animation:hero-arrive var(--t-arrive) var(--e-arrive) backwards; }
  .hero-img .arrive > *:nth-child(1){ animation-delay:.45s; }
  .hero-img .arrive > *:nth-child(2){ animation-delay:.57s; }
  .hero-img .arrive > *:nth-child(3){ animation-delay:.69s; }
  .hero-img .arrive > *:nth-child(4){ animation-delay:.81s; }
  @keyframes hero-arrive{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
}
.hero-img .btn{ border-color:rgba(244,242,236,.6); color:var(--paper); }
.hero-img .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

/* — Image slot + editorial PLATE (intentional empty state) — */
.imgslot{ position:relative; background:var(--sand); border:1px solid var(--line); aspect-ratio:4/3; overflow:hidden; border-radius:2px; }
.imgslot[data-ratio="3/4"]{ aspect-ratio:3/4; }
.imgslot[data-ratio="16/9"]{ aspect-ratio:16/9; }
.imgslot[data-ratio="1/1"]{ aspect-ratio:1/1; }
.imgslot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }


/* — Coast / world cards — */
.coast{ display:block; }
.coast .imgslot,.coast .plate{ aspect-ratio:3/4; }
.coast .meta{ display:flex; align-items:baseline; justify-content:space-between; margin-top:13px; padding-top:11px; border-top:1px solid var(--line); }
.coast .name{ font-family:var(--serif); font-weight:500; font-size:23px; }
.coast .loc{ font-size:11px; letter-spacing:.16em; color:var(--muted); }
.coast .lt{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.coast:hover .name{ color:var(--oak-text); }

/* — Principle blocks — */
.principle{ border-top:1px solid var(--line); padding-top:16px; }
.principle .n{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--oak-text); }
.principle h2,.principle h3{ margin:9px 0 6px; font-size:clamp(19px,2.2vw,24px); line-height:1.3; letter-spacing:normal; }

/* — Spec table — */
.spec{ width:100%; border-collapse:collapse; }
.spec td{ padding:11px 4px; border-bottom:1px solid var(--line); vertical-align:top; font-size:15px; }
.spec td:first-child{ color:var(--muted); width:42%; }
.spec td:last-child{ font-weight:500; }

/* — Material DNA block — */

/* — Risk panel (clay — "consider carefully") — */

/* — Comparison block — */

/* — Continue the voyage — */
.voyage .grid{ margin-top:clamp(28px,4vh,48px); }

/* — Form — */
.form{ display:grid; gap:18px; }
.field{ display:grid; gap:7px; }
.field label{ font-size:13px; letter-spacing:.03em; color:var(--muted); }
.field input,.field select,.field textarea{ font-family:var(--sans); font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:13px 14px; width:100%; }
/* 26.07.2026 — this was plain `:focus`, so it cancelled the :focus-visible rule at line 141
   (same specificity, declared later). Result: form fields had no keyboard focus ring. Narrowed to
   `focus without focus-visible` — the mouse keeps the clean look, the keyboard keeps the ring. */
.field input:focus:not(:focus-visible),.field select:focus:not(:focus-visible),.field textarea:focus:not(:focus-visible){ outline:none; border-color:var(--ink); }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ border-color:var(--ink); }
.field textarea{ min-height:120px; resize:vertical; }

/* — Form · legal block (26.07.2026) —
   .s11-notice = the Privacy Protection Law s.11 notice. It MUST be visible beside the fields,
   not behind a link — the statute says the request "shall be accompanied by" the notice.
   .field-consent = the Communications Law s.30א marketing consent. Separate, never pre-checked,
   never a condition of sending. Both need their own rules because `.field input` is width:100%. */
/* 29.7 — הכרעת-מייסד: "אף אחד לא רוצה להיות מודע לעניין שאוספים עליו מידע".
   מה שאפשר ומה שאסור: סעיף 11 קובע ש**ההודעה תלווה את הפנייה** ומה היא חייבת לומר —
   זהות בעל-המאגר, המטרה, משמעות הסירוב, למי נמסר, וזכויות העיון והתיקון. הוא **אינו**
   קובע גודל-פונט, מסגרת, כרטיס או רקע. לכן התוכן המשפטי לא נגעתי בו במילה, והמשקל
   הוויזואלי ירד: הקופסה יורדת, הטקסט קטן ומושתק, וקו-שיער דק מפריד במקום מסגרת.
   ⚠️ מה שלא זז: ההודעה נשארת גלויה וצמודה לטופס. הסתרה מאחורי קישור או אקורדיון-סגור
   היא הפרה. הקנס נקוב בסעיף לפי פנייה, עם רצפה — הסכומים ב-
   `deliverables/legal-accessibility/`, לא כאן: קובץ-הסגנון נשלח לדפדפן, ושומר-המחירים
   (`tools/guardrails/price_leak.py`) סופר סימן-מטבע צמוד-למספר גם בתוך הערה — ובצדק. */
/* 29.7 (שני) — "לנטרל את הנראות עד כמה שאפשר". הורד גם קו-השיער, והניסוח קוצר
   מ-~90 מילים ל-~40 בגוף-ה-HTML בלי להשמיט אף אחד מחמשת הפריטים שהסעיף מונה.
   זו התחתית: הצבע כבר על סף 1.4.3 (5.93:1), ולהקטין עוד את הפונט או להבהיר עוד
   את הצבע מפיל את הנגישות — כלומר מחליף חשיפה אחת בחשיפה אחרת. */
.s11-notice{ margin-top:18px; }
.s11-notice p{ margin:0; color:var(--muted); font-size:10.5px; line-height:1.6; }
.s11-notice a{ color:var(--muted); border-bottom:1px solid var(--line); }
.s11-notice a:hover{ color:var(--ink); }
.field-consent{ display:block; margin-top:16px; }
.field-consent label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer; font-size:inherit; letter-spacing:0; color:inherit; }
.field-consent input[type="checkbox"]{ width:18px; height:18px; min-width:18px; flex:0 0 18px; margin-top:4px; padding:0; border-radius:3px; accent-color:var(--sea); }
/* the checkbox was falling back to Chrome's default blue focus ring — off-palette, and the only
   control on the page that did not match the rest of the form. */
.field-consent input[type="checkbox"]:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; }
.field-consent .small{ color:var(--muted); }

/* — Footer — */
.site-foot{ background:var(--ink); color:rgba(244,242,236,.74); padding-block:clamp(48px,7vh,88px); }
.site-foot a{ color:rgba(244,242,236,.74); }
.site-foot a:hover{ color:var(--paper); }
.site-foot .flogo{ height:48px; width:auto; }
.site-foot .cols{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; }
.site-foot h2{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,242,236,.66); font-weight:500; margin-bottom:14px; }
.site-foot li{ margin-bottom:9px; font-size:14px; }
.site-foot .fine{ border-top:1px solid rgba(244,242,236,.18); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.site-foot .fine .coord{ color:rgba(244,242,236,.6); }
.site-foot .coord,.site-foot .latin{ color:rgba(244,242,236,.62); }

.reveal{ opacity:0; transform:translateY(12px); transition:opacity var(--t-arrive) var(--e-arrive), transform var(--t-arrive) var(--e-arrive); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
.print-mast{ display:none; }
.print-btn{ background:none; border:0; cursor:pointer; font:inherit; padding:0; }

/* — Gated technical spec pages — */
.spec-sheet{ background:#f4f2ec; }
.spec-page{ padding-top:72px; }
.spec-wrap{ max-width:980px; }
.spec-hero{ padding:clamp(58px,9vh,96px) 0 22px; }
.spec-actions{ display:flex; gap:14px 22px; flex-wrap:wrap; align-items:center; margin-top:22px; }
.spec-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; align-items:start; }
.spec-figure,.spec-card{ background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 28px rgba(14,27,35,.06); }
.spec-figure{ margin:0; padding:18px; grid-column:1 / -1; }
.spec-figure img{ display:block; width:100%; height:auto; aspect-ratio:1830/228; object-fit:cover; border:1px solid rgba(120,110,98,.2); }
.spec-figure figcaption{ margin-top:10px; font-family:var(--sans); font-size:12px; color:var(--muted); }
/* 28.7 — ⚠️ שרטוט חייב direction:ltr גם בתוך עמוד RTL, אחרת הוא נחתך.
   ‏`text-anchor:start/end` נפתרים לפי כיוון-הכתיבה, לא לפי גאומטריה. תחת RTL הם
   מתהפכים: תווית שצוירה ב-x=968 עם anchor:end נמתחת ימינה עד 1258 במקום שמאלה,
   ותווית ב-x=20 עם anchor:start נמתחת שמאלה עד ‎-37. נמדד ב-/he/material:
   **כל 15 הטקסטים בגיליון 07 היו מחוץ ל-viewBox.** הטקסט העברי עצמו לא נפגע —
   הוא כבר עטוף ב-RLI/PDI בבנאי, וזה מה שמטפל בדו-כיווניות. אותו באג בדיוק תפס
   אותנו במצגת המלון ב-27.7; זו הפעם השנייה, ולכן ההערה. */
.spec-figure svg{ direction:ltr; display:block; width:100%; height:auto; }
.spec-card{ padding:22px; break-inside:avoid; }
.spec-card h2{ font-size:22px; margin:0 0 14px; }
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th,.spec-table td{ text-align:start; vertical-align:top; padding:11px 0; border-bottom:1px solid var(--line); }
.spec-table th{ width:38%; padding-inline-end:18px; font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.spec-table td{ font-weight:500; }
.spec-list{ margin:0; padding-inline-start:1.1em; }
.spec-list li{ margin:9px 0; line-height:1.55; }
.spec-palette{ margin-bottom:12px; }
@media (max-width:760px){ .spec-grid{ grid-template-columns:1fr; } .spec-page{ padding-top:68px; } .spec-card{ padding:18px; } }

/* — Architect spec sheet · clean A4 when printed / saved as PDF — */
@media print{
  @page{ margin:16mm 14mm; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body{ background:#fff; color:var(--ink-3); font-size:11pt; }
  .reveal{ opacity:1!important; transform:none!important; }
  .site-head,.hero-cinema,.hero-pause,.ticker,.compass,.compass-top,.cmp-bezel,
  .palfan,.mr-cap,.actual,.closing,.voyage,.model-bar,.arch-cta,.breadcrumb,.waypoint,
  .site-foot .cols,.no-print,.hero-img .bg,.hero-img .row,.innature-strip,.nt-tag,
  .hero-img .stack > .lead,.hero-img .arrive > .lead{ display:none!important; }
  main{ padding:0!important; }
  section{ padding:0!important; margin:0 0 10mm!important; break-inside:avoid; }
  .print-mast{ display:flex!important; flex-direction:column; gap:3px; border-bottom:1.5pt solid var(--ink-3); padding-bottom:8px; margin-bottom:14px; }
  .print-mast .pm-brand{ font-family:var(--serif); font-size:20pt; letter-spacing:.02em; }
  .print-mast .pm-model{ font-family:var(--serif); font-size:15pt; }
  .print-mast .pm-model b{ font-family:var(--sans); font-weight:500; font-size:.7em; letter-spacing:.06em; }
  .print-mast .pm-coord{ font-family:var(--sans); font-size:8.5pt; letter-spacing:.08em; text-transform:uppercase; color:var(--print-coord); }
  .techbar{ background:#fff!important; color:var(--ink-3)!important; }
  .techbar .kicker,.techbar .display,.techbar .sub{ color:var(--ink-3)!important; }
  .techgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; border:1pt solid var(--print-rule); }
  .techgrid dt{ color:var(--print-muted)!important; font-size:8pt; }
  .techgrid dd,.techgrid .cell{ border-bottom:1pt solid var(--print-hair); padding:6px 10px!important; }
  .arch-layer{ margin-top:8mm!important; }
  .arch-layer > summary{ list-style:none; font-family:var(--sans); font-size:9pt; letter-spacing:.1em; text-transform:uppercase; color:var(--print-muted); border:0!important; background:none!important; padding:0 0 6px!important; }
  .arch-layer > summary::after,.arch-layer > summary::-webkit-details-marker{ display:none!important; }
  .arch-layer > *{ display:block!important; }        /* force the accordion open in print */
  .arch-grid{ display:grid!important; grid-template-columns:repeat(2,1fr); gap:0; border:1pt solid var(--print-rule); }
  .arch-grid > div{ padding:6px 10px; border-bottom:1pt solid var(--print-hair); }
  .arch-grid dt{ color:var(--print-muted)!important; font-size:8pt; } .arch-grid dd{ color:var(--ink-3)!important; }
  .tscale svg{ max-width:150mm; }
  .site-foot{ border-top:1pt solid var(--print-rule); padding-top:8px; }
  .site-foot .fine .coord{ color:var(--print-muted)!important; font-size:8pt; }
  a[href]::after{ content:""; }   /* no ugly URL expansion */
  .spec-sheet .site-head,.spec-sheet .spec-actions{ display:none!important; }
  .spec-sheet .spec-page{ padding:0!important; }
  .spec-sheet .spec-hero{ padding:0!important; margin:0 0 8mm!important; }
  .spec-sheet .spec-body{ margin:0!important; }
  .spec-sheet .spec-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7mm; }
  .spec-sheet .spec-figure,.spec-sheet .spec-card{ box-shadow:none; border:1pt solid var(--print-rule); border-radius:0; padding:5mm; background:#fff; }
  .spec-sheet .spec-table th,.spec-sheet .spec-table td{ padding:5px 0; }
  .spec-sheet .spec-card h2{ font-size:13pt; }
  .spec-sheet .display{ font-size:25pt; }
}

/* Specifier pack hub — registry-built downloads, 2026-07-27 */
.specifier-hero{padding-bottom:clamp(44px,7vw,84px)}
.specifier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:28px}
.specifier-card{border:1px solid var(--line);background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:18px}
.specifier-card-head{display:grid;grid-template-columns:148px 1fr;gap:18px;align-items:center}
.specifier-card-head img{display:block;width:148px;height:48px;object-fit:cover;border:1px solid var(--line)}
.specifier-card-head h2{margin:5px 0 0;font-family:var(--serif);font-size:clamp(25px,2.3vw,34px);font-weight:400}
.specifier-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.specifier-facts div{border-top:1px solid var(--line);padding-top:9px}
.specifier-facts dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.specifier-facts dd{margin:5px 0 0;font-size:13px}
.specifier-swatch{display:inline-block;width:19px;height:12px;margin-inline-end:7px;border:1px solid rgba(23,33,38,.28);vertical-align:-1px}
.specifier-downloads{display:grid;gap:9px;align-items:start}
.link-button{appearance:none;border:0;background:none;color:inherit;font:inherit;text-align:start;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.specifier-copy{border-top:1px solid var(--line);padding-top:12px}
.specifier-copy summary{cursor:pointer;font-size:12px;letter-spacing:.04em}
.specifier-copy pre{white-space:pre-wrap;margin:12px 0 0;padding:14px;background:var(--mist);font:12px/1.55 var(--sans);direction:ltr;text-align:left}
.spec-copy-he{display:none}
html[lang="he"] .spec-copy-en{display:none}
html[lang="he"] .spec-copy-he{display:block;direction:rtl;text-align:right}
@media(max-width:780px){
  .specifier-grid{grid-template-columns:1fr}
  .specifier-card-head{grid-template-columns:112px 1fr}
  .specifier-card-head img{width:112px}
}
@media(max-width:430px){
  .specifier-card{padding:17px}
  .specifier-facts{grid-template-columns:1fr}
}

/* — Responsive — */
@media (max-width:900px){ .cols-3,.cols-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .site-foot .cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dna{ grid-template-columns:1fr; } .dna .chip{ max-width:120px; } }
@media (max-width:680px){
  body{ font-size:16px; }
  .kicker{ letter-spacing:.13em; }
  .waypoint{ letter-spacing:.1em; gap:8px 12px; }
  .breadcrumb{ letter-spacing:.1em; }
  .nav-toggle{ display:block; }
  .site-head .wrap{ height:68px; }
  .brand img{ height:44px; }
  .nav{ top:68px; }
  .nav{ display:none; position:absolute; top:96px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:0; background:var(--sea); padding:8px var(--gutter) 22px; border-top:1px solid rgba(244,242,236,.12); }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 0; width:100%; border-bottom:1px solid rgba(244,242,236,.12); font-size:15px; }
  .nav a[aria-current="page"]{ border-bottom:1px solid rgba(244,242,236,.12); padding-bottom:14px; }
  .nav .cta{ margin-top:14px; border-radius:8px; padding:12px 18px; }
  .cols-2,.cols-3,.cols-4{ grid-template-columns:minmax(0,1fr); }
  .site-foot .cols{ grid-template-columns:minmax(0,1fr); }
}

/* — Model scales (DNA bars) + navigation + companions — added for model pages v2 — */
.nav-from{ display:grid; gap:0; }
.nav-from a{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding:11px 0; }
.nav-from a .dir{ color:var(--muted); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.nav-from a .to{ font-family:var(--serif); font-size:18px; }
.nav-from a:hover .to{ color:var(--oak-text); }
.punch{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,3.2vw,36px); line-height:1.15; color:var(--oak-text); letter-spacing:-.01em; }
@media (max-width:680px){ .companions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* — Model page v2 — bold scales · palette · architect tech banner — */
.sc-nav:hover{ color:var(--oak-text); }
.sc-ar{ color:var(--oak); }
.palette{ display:flex; height:70px; border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.palette span{ flex:1; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 -2px 4px rgba(0,0,0,.07); }
.statline{ display:flex; gap:26px; flex-wrap:wrap; margin-top:4px; }
.statline .stat .v{ font-family:var(--serif); font-weight:500; font-size:24px; line-height:1; }
.statline .stat .k{ font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:5px; }
.techbar{ background:var(--night) var(--night-grad); }
.techbar .kicker{ color:rgba(244,242,236,.62); }
.techbar h2{ color:var(--paper); }
.techbar .sub{ color:rgba(244,242,236,.82); }
.techgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(244,242,236,.16); border:1px solid rgba(244,242,236,.16); border-radius:12px; overflow:hidden; margin-top:30px; }
.techgrid .cell{ background:var(--sea); padding:18px 16px; }
.techgrid dt{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,242,236,.72); }
.techgrid dd{ font-family:var(--serif); font-weight:500; font-size:19px; color:var(--paper); margin-top:6px; line-height:1.12; }
.macro{ width:100%; border-radius:4px; border:1px solid var(--line); display:block; }
@media(max-width:900px){ .techgrid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .techgrid{ grid-template-columns:repeat(2,1fr); } }

/* — Pairs-with · visual material scheme — */
.scheme{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.swatch{ position:relative; aspect-ratio:3/4; border-radius:12px; border:1px solid var(--line); display:flex; align-items:flex-end; overflow:hidden; transition:transform var(--t-fast) var(--e-standard); }
.swatch:hover{ transform:translateY(-4px); }
.swatch .lbl{ width:100%; padding:12px 13px 15px; font-size:12.5px; font-weight:500; line-height:1.28; }
.swatch .tag{ position:absolute; top:11px; left:13px; font-size:9px; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.swatch.anchor{}
@media(max-width:900px){ .scheme{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:680px){ .scheme{ grid-template-columns:repeat(2,1fr); } }

/* — scheme v2 — small, subtle inspiration chips — */
.scheme{ display:flex; flex-wrap:wrap; gap:22px; }
.swatch{ width:auto; aspect-ratio:auto; border:0; border-radius:0; display:block; }
.swatch:hover{ transform:none; }
.swatch .chip{ width:74px; height:74px; border-radius:9px; border:1px solid var(--line); transition:transform var(--t-fast) var(--e-standard); box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 -3px 7px rgba(0,0,0,.10); }
.swatch:hover .chip{ transform:translateY(-3px); }
.swatch.anchor .chip{ box-shadow:0 0 0 1px var(--line); }
.swatch.anchor .cap{ color:var(--ink); font-weight:500; }
.swatch .cap{ font-size:11px; color:var(--muted); margin-top:9px; line-height:1.3; max-width:90px; }

/* — Home: world / range cards with real floor imagery — */
.worldcard{ position:relative; aspect-ratio:3/4; overflow:hidden; border-radius:2px; border:1px solid var(--line); margin:0; background:var(--sand); }
.worldcard[data-ratio="16/9"]{ aspect-ratio:16/9; }
.worldcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--t-fast) var(--e-standard); }
.coast:hover .worldcard img, a:hover > .worldcard img{ transform:scale(1.035); }
/* a11y 26.07.2026 — the scrim did not hold on the light models (Comporta/Naxos): .wc-word measured
   2.41:1 and .wc-coord 4.17:1 against real pixels. The edges were deepened, the centre (36–64%) is
   unchanged — the photograph itself is untouched. */
.worldcard figcaption{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:16px;
  background:linear-gradient(180deg,rgba(20,18,18,.82),rgba(20,18,18,.74) 16%,rgba(35,32,32,.10) 40%,rgba(35,32,32,.10) 62%,rgba(20,18,18,.72)); }
.worldcard .wc-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.worldcard .wc-word{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#F4F2EC; max-width:64%; line-height:1.4; text-shadow:0 1px 3px rgba(14,20,24,.9); }
.worldcard .wc-coord{ font-size:11px; letter-spacing:.13em; color:#F4F2EC; text-align:right; white-space:nowrap; text-shadow:0 1px 3px rgba(14,20,24,.9); }
.worldcard .wc-name{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.6vw,30px); color:var(--paper); line-height:1.05; }

/* — nav-from: one long thin plank running between direction and target — */
.nav-from a{ align-items:center; gap:20px; }
.nav-from a .dir{ flex:0 0 auto; }
.nav-from a .to{ flex:0 0 auto; white-space:nowrap; }
.nav-plank{ flex:1 1 auto; min-width:40px; height:13px; object-fit:cover; border-radius:0; border:1px solid var(--line); display:block; }
.nav-from a:hover .nav-plank{ filter:brightness(1.05); }

/* — Cinematic entrance hero: full-moon loggerhead arriving at the safe shore — */
.hero-cinema{ position:relative; min-height:clamp(560px,88vh,920px); min-height:clamp(560px,88svh,920px); display:flex; align-items:flex-end; overflow:hidden;
  background:var(--night); }
.hero-cinema::before{ content:""; position:absolute; inset:0;
  z-index:1;
  background:radial-gradient(120% 78% at 50% 6%, rgba(220,230,234,.20), rgba(11,20,24,0) 44%),
             var(--night-grad); }
/* z-index 1, not 0: ::before above paints an OPAQUE night gradient, so a poster
   at 0 is loaded, sized, positioned — and completely buried. That is what shipped
   on 27.7 and what the old build avoided by accident, because the poster used to
   arrive through the <video poster> attribute, which sits at z-index 1. The video
   follows this picture in the DOM and shares the layer, so it still covers the
   poster the moment it mounts. */
.hero-poster{ position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; }
.hero-poster img{ display:block; width:100%; height:100%; object-fit:cover; }
.hero-cinema .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
/* founder-approved 21.7: mirror the sea in RTL — Hebrew headline lands on the dark side (11:1), moon path moves to the empty side */
html[dir="rtl"] .hero-cinema .hero-video,
html[dir="rtl"] .hero-cinema .hero-poster img{ transform:scaleX(-1); }
.hero-cinema-scrim{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,14,18,.45),rgba(8,14,18,.18) 40%,rgba(8,14,18,.85)); }
.hero-cinema-inner{ position:relative; z-index:2; width:100%; padding-block:clamp(48px,9vh,112px); color:var(--paper); }
.hero-cinema-inner h1{ text-shadow:0 2px 30px rgba(14,20,24,.65), 0 1px 4px rgba(14,20,24,.6); }
.hero-cinema-inner .lead,.hero-cinema-inner .kicker{ text-shadow:0 2px 18px rgba(14,20,24,.6), 0 1px 3px rgba(14,20,24,.55); }
/* 28.7 — נמדד מול פריים-הפוסטר: מעל הסקרים הטקסט יושב על 8.4–15.6:1, הרבה מעל AA.
   אבל הווידאו זז, ובפריים בהיר (קאוסטיקה, קצף) אזור בודד מטפס. ה-h1, ה-lead וה-kicker
   כבר נשאו צל שסופג את זה; רצועת-האמון, החיצים ולחצן-ההשהיה לא. אותו צל בדיוק —
   בלי לשנות צבע, משקל או גודל, ובלי להכהות את הסקרים ולהחשיך את הווידאו. */
.hero-cinema-inner .trust-strip li,
.hero-cinema-inner .link-arrow,
.hero-cinema-inner .hero-explore,
.hero-cinema .hero-pause{ text-shadow:0 2px 18px rgba(14,20,24,.6), 0 1px 3px rgba(14,20,24,.55); }
.hero-cinema-inner .kicker{ color:rgba(244,242,236,.80); }
.hero-cinema-inner h1{ color:var(--paper); max-width:21ch; margin-top:16px; text-wrap:balance; }
.hero-cinema-inner .lead{ color:rgba(244,242,236,.90); max-width:46ch; margin-top:1.3rem; }
.hero-cinema-inner .btn{ border-color:rgba(244,242,236,.55); color:var(--paper); }
.hero-cinema-inner .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero-cinema-inner .btn-solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.hero-cinema-inner .btn-solid:hover{ background:var(--oak-text); border-color:var(--oak-text); color:var(--paper); }
@media (prefers-reduced-motion:reduce){ .hero-cinema .hero-video{ display:none; } }
@media (max-width:760px){ .hero-cinema{ min-height:clamp(560px,88svh,920px); background-position:20% center; }
  /* the video/poster element paints ABOVE the container background — it must carry the same 20% framing, or mobile crops at center and buries the composition (audit P1). In RTL the scaleX(-1) flip turns 20% into a visual 80% = the intended mirrored framing. */
  .hero-cinema .hero-video,
  .hero-cinema .hero-poster img{ object-position:20% center; } }


/* — Deep-Sea Night surface (founder-locked brand colour) — */
.night-bg{ background:var(--night) var(--night-grad); color:var(--paper); }
.night-bg .night-glow{ position:absolute; inset:0; background:var(--night-glow); pointer-events:none; }

/* — Evidence: anticipated-record cards (deep-sea-night) — */
.ev-card{ position:relative; aspect-ratio:4/3; border-radius:2px; overflow:hidden; display:flex; background:var(--night) var(--night-grad); border:1px solid rgba(244,242,236,.12); }
.ev-card .ev-inner{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding:20px; width:100%; }
.ev-card .coord{ color:rgba(244,242,236,.55); }
.ev-card .ev-type{ font-family:var(--serif); font-weight:500; font-size:24px; color:var(--paper); line-height:1.1; }
.ev-card .ev-note{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(244,242,236,.62); }

/* — Arrival / threshold CTA in deep-sea-night — */
.cta-night{ background:var(--night) var(--night-grad); color:var(--paper); position:relative; overflow:hidden; }
.cta-night::before{ content:""; position:absolute; inset:0; background:var(--night-glow); pointer-events:none; }
.cta-night > .wrap{ position:relative; z-index:2; }
.cta-night .display, .cta-night h2{ color:var(--paper); }
.cta-night .muted, .cta-night p{ color:rgba(244,242,236,.80); }
.cta-night .kicker{ color:rgba(244,242,236,.70); }
.cta-night .btn{ border-color:rgba(244,242,236,.55); color:var(--paper); }
.cta-night .btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cta-night .btn-solid{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.cta-night .btn-solid:hover{ background:var(--oak-text); border-color:var(--oak-text); color:var(--paper); }

/* — Collections: read-by-direction filter — */
/* The bar sits directly under the compass field and read as part of it. ~12px of this margin is
   absorbed above the bar, so the visible gap lands ~12 short — calibrated by measuring, not guessing. */
.filterbar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:clamp(38px,5vh,52px) 0 clamp(28px,4vh,44px); }
.chip{ font-family:var(--sans); font-size:13px; font-weight:500; letter-spacing:.04em; padding:9px 18px; border-radius:22px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; transition:all var(--t-fast) var(--e-standard); }
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip.is-active{ background:var(--night) var(--night-grad); border-color:var(--night); color:var(--paper); }
.filtercount{ font-size:12px; color:var(--muted); margin-inline-start:auto; letter-spacing:.05em; }
.coast.is-hidden{ display:none; }

/* — Evidence: measured-colour record strip — */
.cgrid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; }
.cswatch .cc{ aspect-ratio:1/1; border-radius:8px; border:1px solid var(--line); }
.cswatch .cmeta{ display:flex; flex-direction:column; margin-top:10px; }
.cswatch .cnm{ font-family:var(--serif); font-weight:500; font-size:15px; color:var(--ink); line-height:1.1; }
.cswatch .chx{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11px; letter-spacing:.04em; color:var(--muted); margin-top:3px; }
@media(max-width:900px){ .cgrid{ grid-template-columns:repeat(4,1fr); } }
@media(max-width:680px){ .cgrid{ grid-template-columns:repeat(3,1fr); } }

/* — Model: found in nature (cartographic micro-legend) — */
.innature-strip{ display:flex; align-items:center; gap:14px 30px; flex-wrap:wrap; padding-block:clamp(30px,4.5vh,50px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nt-tag{ display:inline-flex; align-items:center; gap:11px; font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); transition:color var(--t-fast) var(--e-standard); }
.nt-tag:hover{ color:var(--ink); }
.nt-dot{ width:9px; height:9px; transform:rotate(45deg); border:1px solid var(--oak); display:inline-block; flex:0 0 auto; box-shadow:inset 0 1px 0 rgba(255,255,255,.30); }

/* — Collections: model-colour dot — */
.cdot.lg{ width:18px; height:18px; border-radius:4px; margin-inline-end:7px; vertical-align:-3px; }
.cdot{ display:inline-block; width:11px; height:11px; border-radius:3px; border:1px solid var(--line); margin-inline-end:9px; vertical-align:-1px; box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 2px rgba(0,0,0,.10); }

/* ============================================================
   Hebrew · RTL  (founder-locked typography 2026-07-01)
   Hebrew serif = Frank Ruhl Libre (pairs Spectral)
   Hebrew sans  = Heebo (pairs Inter)
   HE pages: <html lang="he" dir="rtl"> + load the Hebrew fonts.
   Proper names stay Latin → wrap in <span class="latin">.
   ============================================================ */
html[dir="rtl"] body{ font-family:'Heebo','Assistant',system-ui,sans-serif; }
html[dir="rtl"] .display,html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3,html[dir="rtl"] .punch,
html[dir="rtl"] .nav-from a .to,html[dir="rtl"] .pname,html[dir="rtl"] .worldcard .wc-name,
html[dir="rtl"] .coast .name,html[dir="rtl"] .sc-nm,html[dir="rtl"] .nt-type{
  font-family:'Frank Ruhl Libre',Georgia,serif; font-weight:600; letter-spacing:-.005em; }
html[dir="rtl"] body{ line-height:1.85; }
html[dir="rtl"] .lead{ line-height:1.7; }
html[dir="rtl"] .kicker,html[dir="rtl"] .coord{ letter-spacing:.02em; }
/* Latin proper names inside Hebrew text — original script, correct direction */
.latin{ font-family:'Spectral',Georgia,serif; direction:ltr; unicode-bidi:isolate; }
.latin-sans{ font-family:'Inter',system-ui,sans-serif; direction:ltr; unicode-bidi:isolate; }
/* language switch chip in the header */
.lang-switch{ font-size:12.5px; font-weight:500; letter-spacing:.06em; color:rgba(244,242,236,.92); border:1px solid rgba(244,242,236,.55); border-radius:8px; padding:6px 12px; margin-inline-start:6px; margin-inline-end:10px; transition:color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard), background var(--t-fast) var(--e-standard); }
.lang-switch:hover{ color:var(--night,#0e1b23); background:rgba(244,242,236,.92); border-color:transparent; }
/* directional glyphs mirror in RTL */
html[dir="rtl"] .link-arrow::after{ content:" \2190"; }

/* — Voyage · arrival — every page surfaces from Deep-Sea Night, so entering a page feels like arriving at a coast — */
@media (prefers-reduced-motion:no-preference){
  body::after{ content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; background:var(--night-grad); animation:voyage-arrive var(--t-arrive) var(--e-arrive) forwards; }
  @keyframes voyage-arrive{ 0%{ opacity:1; } 70%{ opacity:.55; } 100%{ opacity:0; visibility:hidden; } }
}



/* — CARETTA Compass · minimal preference field (cool↔warm × dark↔light) — */
.compass{ margin-top:clamp(30px,4vh,54px); }
/* The read-out sits on its OWN row, always — flex-basis:100%, never a text-driven break.
   Two rules ride on this and both are load-bearing:
   1. the mood text changes on every pointer move; if the break depended on its width the page
      below would jump a full row (~74px measured) as the words changed length;
   2. head + swatch + mood + link do not fit one row at common widths — forcing nowrap only
      truncated the floor's name ("Helsinki" → "nki…"). A forced break gives the text its room. */
.compass-top{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.cmp-head{ display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
.cmp-tabs{ display:inline-flex; gap:5px; }
.cmp-tab{ font-family:var(--sans); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); background:none; border:1px solid var(--line); border-radius:2px; padding:6px 12px; cursor:pointer; transition:color var(--t-fast) var(--e-standard), background var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.cmp-tab:hover{ color:var(--ink); border-color:var(--ink); }
.cmp-tab.is-on{ color:var(--paper); background:var(--night) var(--night-grad); border-color:var(--night); }
html[dir="rtl"] .cmp-tab{ font-family:'Heebo',sans-serif; letter-spacing:.01em; }
/* Layout-stability law: this row must NEVER change size on hover — the swatch box is
   reserved at a fixed size and only changes its image. Any width/height/margin change here
   reflows the whole page under the pointer (the "screen jumps on mouse move" bug). */
.compass-read{ display:flex; align-items:center; flex-wrap:nowrap; gap:18px; font-family:var(--serif); font-size:clamp(19px,2.5vw,28px); color:var(--ink); line-height:1.2; min-height:calc(min(460px,52vw) * 23 / 183 + 8px); flex:1 1 100%; min-width:0; }
html[dir="rtl"] .compass-read{ font-family:'Heebo','Assistant',sans-serif; font-weight:600; }
.cmp-swatch{ flex:0 0 auto; width:min(460px,52vw); aspect-ratio:183/23; height:auto; border-radius:2px; background-color:rgba(14,27,35,.05); background-size:cover; background-position:center; border:1px solid var(--line); box-shadow:0 1px 6px rgba(14,27,35,.18); overflow:hidden; transition:background-image var(--t-fast) var(--e-standard); }
.cmp-mood{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.compass-read .cmp-go{ flex:0 0 auto; margin-inline-start:auto; display:inline-block; font-family:var(--sans); font-size:13px; letter-spacing:.03em; color:var(--oak-text); border-bottom:1px solid var(--oak); opacity:0; visibility:hidden; transform:translateY(2px); transition:opacity var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard), visibility var(--t-fast) var(--e-standard); pointer-events:none; }
html[dir="rtl"] .compass-read .cmp-go{ font-family:'Heebo',sans-serif; }
/* visibility must be reverted too — opacity alone left this CTA invisible & unclickable */
.compass-read .cmp-go.on{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
/* Move 5a — the "because" conclusion line under the compass reading */
.cmp-why{ margin:6px 0 0; font-family:var(--sans); font-size:14px; line-height:1.6; color:var(--muted); max-width:72ch; min-height:1.6em; opacity:0; transition:opacity var(--t-fast) var(--e-standard); }
html[dir="rtl"] .cmp-why{ font-family:'Heebo','Assistant',sans-serif; }
.cmp-why.on{ opacity:1; }
.cmp-bezel{ padding:0; border-radius:0; background:none; box-shadow:none; }
.cmp-field{ position:relative; width:100%; aspect-ratio:5/2.2; min-height:300px; border-radius:0; overflow:hidden; cursor:crosshair; touch-action:pan-y; background:var(--night); border:1px solid rgba(221,230,233,.18); }
.cmp-field::before{ display:none; }
.cmp-rose{ display:none; }
.cmp-grid{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.cmp-grid::before,.cmp-grid::after{ content:""; position:absolute; background:rgba(221,230,233,.11); }
.cmp-grid::before{ left:50%; top:0; bottom:0; width:1px; }
.cmp-grid::after{ top:50%; left:0; right:0; height:1px; }
.cmp-ax{ position:absolute; font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:rgba(221,230,233,.72); pointer-events:none; z-index:4; }
html[dir="rtl"] .cmp-ax{ font-family:'Heebo',sans-serif; letter-spacing:.02em; }
.cmp-ax.t{ top:10px; left:50%; transform:translateX(-50%); }
.cmp-ax.b{ bottom:10px; left:50%; transform:translateX(-50%); }
.cmp-ax.l{ left:12px; top:50%; transform:translateY(-50%); }
.cmp-ax.r{ right:12px; top:50%; transform:translateY(-50%); }
.cmp-dot{ position:absolute; width:10px; height:10px; margin:-5px; border-radius:50%; background:var(--c); border:1px solid rgba(255,255,255,.42); transform:scale(calc(.9 + var(--p,0) * .8)); transition:transform var(--t-fast) var(--e-standard); cursor:pointer; z-index:2; }
.cmp-dot::after{ content:""; position:absolute; width:44px; height:44px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; }  /* 44px thumb target; visible dot stays restrained */
/* label scales by transform only — font-size on hover reflows text metrics */
.cmp-dot .lbl{ position:absolute; left:50%; bottom:150%; transform:translateX(-50%); transform-origin:bottom center; white-space:nowrap; font-family:var(--sans); font-size:11px; letter-spacing:.01em; color:rgba(240,245,247,.92); background:rgba(14,27,35,.82); padding:1px 7px 2px; border-radius:999px; text-shadow:0 1px 4px rgba(10,20,27,.95),0 0 2px rgba(10,20,27,.8); transition:color var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard); pointer-events:none; }
/* 25.7 (אודיט-סופי, כשל 2): scrim-pill קבוע מאחורי תווית-הקומפס — הניגודיות אינה תלויה עוד
   בצבע-הדגם/השדה שמתחת (15/18 נכשלו ב-AA כשהתווית ישבה על צבע-הדגם). נמדד: כל 18 ≥ 4.5:1. */
.cmp-dot.near .lbl,.cmp-dot:hover .lbl,.cmp-dot:focus-visible .lbl{ color:#fff; transform:translateX(-50%) scale(1.18); }
.cmp-dot.near{ box-shadow:0 0 0 3px var(--night),0 0 0 4px rgba(233,240,242,.85); z-index:5; }
.cmp-dot:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--night),0 0 0 4px rgba(233,240,242,.9); z-index:5; }
@media (max-width:680px){
  /* stacked: swatch / mood / link — each exactly one line, so the row height is constant
     and nothing reflows while a finger or pointer moves across the field */
  .compass-top{ flex-wrap:wrap; }              /* head and read stack — a fixed break, not a text-driven one */
  .compass-read{ flex-wrap:wrap; gap:12px; min-height:0; font-size:17px; flex:1 1 100%; }
  .cmp-swatch{ width:80vw; }
  .cmp-mood{ flex:1 1 100%; }
  .compass-read .cmp-go{ margin-inline-start:0; }
  .cmp-field{ aspect-ratio:auto; min-height:400px; }
  .cmp-dot{ width:14px; height:14px; margin:-7px; }              /* larger touch target */
  .cmp-dot .lbl{ display:block; font-size:9px; letter-spacing:0; }  /* keep names visible on small screens (founder note 21.7) */
  /* only the active coast names itself — at its own size, not the desktop scale-up */
  .cmp-dot.near .lbl,.cmp-dot:focus-visible .lbl{ display:block; font-size:13px; transform:translateX(-50%); }
}

/* — Moodroom · the palette shown as an abstract room elevation (wall / earth / accent / depth / metal on the real floor) — */
.mr-wall{ inset:0 0 26% 0; }
.mr-floor{ left:0; right:0; bottom:0; height:26%; background-size:cover; background-position:center bottom; box-shadow:inset 0 16px 22px -14px rgba(25,18,12,.45), 0 -1px 0 rgba(35,32,32,.16); }
.mr-light{ inset:0 0 26% 0; background:radial-gradient(115% 95% at 16% -5%, rgba(255,252,243,.6), rgba(255,252,243,0) 56%); pointer-events:none; z-index:1; }
.mr-earth{ bottom:26%; inset-inline-start:11%; width:30%; height:23%; z-index:2; box-shadow:0 10px 18px -8px rgba(35,32,32,.30); }
.mr-accent{ bottom:37%; inset-inline-start:15%; width:8.5%; height:10%; z-index:2; box-shadow:0 5px 9px -4px rgba(35,32,32,.28); }
.mr-depth{ top:11%; inset-inline-end:9%; width:9%; bottom:26%; z-index:2; box-shadow:0 12px 24px -10px rgba(35,32,32,.28); }
.mr-metal{ bottom:26%; inset-inline-start:48%; width:3px; height:27%; }
.mr-metal::after{ content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%); width:11px; height:7px; background:inherit; border-radius:2px 2px 0 0; }
.mr-metal::after{ content:""!important; }  /* keep the lamp head, label via its ::before instead */
.mr-metal::before{ content:attr(title); position:absolute; bottom:104%; inset-inline-start:-6px; white-space:nowrap; font-family:var(--sans); font-size:10.5px; color:var(--ink); background:rgba(244,242,236,.94); border:1px solid var(--line); border-radius:2px; padding:2px 7px; opacity:0; transition:opacity var(--t-fast) var(--e-standard); pointer-events:none; }
.mr-metal:hover::before{ opacity:1; }
.mr-cap{ margin-top:12px; font-size:13px; color:var(--muted); letter-spacing:.02em; }
@media (max-width:680px){ .moodroom{ aspect-ratio:16/9; } }

/* — Compare two floors — */
.cmp2-stage{ position:relative; }
.cmp2-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); }
.cmp2-swatch{ width:100%; aspect-ratio:3/4; background-size:cover; background-position:center; border:1px solid var(--line); border-radius:4px; box-shadow:0 14px 40px rgba(14,27,35,.14); }
.cmp2-mid{ position:absolute; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:2px; background:var(--night); color:var(--paper-2); border-radius:50%; width:118px; height:118px; justify-content:center; text-align:center; box-shadow:0 10px 30px rgba(14,27,35,.35); pointer-events:none; }
.cmp2-vsw{ font-family:var(--serif); font-size:15px; opacity:.6; font-style:italic; }
html[dir="rtl"] .cmp2-vsw{ font-family:'Heebo',sans-serif; font-style:normal; }
.cmp2-de{ font-family:var(--sans); font-size:19px; letter-spacing:.02em; }
.cmp2-dev{ font-family:var(--sans); font-size:11.5px; color:var(--sand); }
html[dir="rtl"] .cmp2-dev{ font-family:'Heebo',sans-serif; }
.cmp2-dek{ display:none; }
.cmp2-rail{ margin-top:16px; }
.cmp2-hint{ font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; }
html[dir="rtl"] .cmp2-hint{ font-family:'Heebo',sans-serif; letter-spacing:0; font-size:12.5px; }
.cmp2-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.cmp2-chip{ width:30px; height:44px; border-radius:2px; border:1px solid var(--line); background-size:cover; background-position:center; cursor:pointer; padding:0; transition:transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard); }
.cmp2-chip:hover{ transform:translateY(-3px); box-shadow:0 6px 14px rgba(14,27,35,.22); }
.cmp2-chip.is-on{ outline:2px solid var(--oak); outline-offset:2px; transform:translateY(-3px); }
.cmp2-name{ font-family:var(--serif); font-size:clamp(24px,3vw,32px); color:var(--ink); margin-top:18px; }
.cmp2-no{ font-family:var(--sans); font-size:.5em; letter-spacing:.08em; color:var(--muted); vertical-align:.3em; margin-inline-start:.3em; }
.cmp2-sub{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; }
.cmp2-evokes{ color:var(--muted); font-size:16px; line-height:1.55; margin-top:14px; min-height:3em; }
.cmp2-scales{ margin-top:18px; display:grid; gap:16px; }
.cmp2-blab{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:7px; }
.cmp2-blab b{ font-family:var(--sans); font-weight:500; color:var(--ink); letter-spacing:.12em; }
.cmp2-track{ position:relative; height:3px; background:var(--line); border-radius:2px; }
.cmp2-track i{ position:absolute; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--oak); transform:translateX(-50%); }
.cmp2-actions{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:24px; }
.cmp2-chip{ }
@media(max-width:680px){ .cmp2-chip{ width:40px; height:56px; } .cmp2-grid{ grid-template-columns:1fr; } .cmp2-mid{ position:static; transform:none; margin:0 auto 26px; } .cmp2-stage{ display:flex; flex-direction:column; } .cmp2-mid{ order:-1; } }

/* — What this floor actually is · the customer layer (plain, paper, room-anchored) — */
.actual{ background:var(--paper); }
.actual-room,.actual-room figure{ margin:0; }
.actual-room .imgslot img{ border-radius:3px; }
.actual-cap{ display:block; margin-top:10px; }
.actual-cards{ display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; margin:0; }
.ac{ display:flex; flex-direction:column; gap:4px; }
.ac-i{ display:block; height:26px; }
.ac-i svg{ width:26px; height:26px; stroke:var(--oak); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ac-plain{ font-family:var(--serif); font-weight:500; font-size:15.5px; line-height:1.34; color:var(--ink); margin:3px 0 0; }
.ac-basis{ font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--muted); margin:0; }
.actual-consider{ margin-top:clamp(26px,4vh,44px); padding-top:16px; border-top:1px solid var(--line); }
.ac-tag{ font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--oak-text); margin-inline-end:8px; }
html[dir="rtl"] .ac-plain{ font-family:'Spectral',serif; }
html[dir="rtl"] .ac-basis,html[dir="rtl"] .actual-consider,html[dir="rtl"] .ac-tag{ font-family:'Heebo',sans-serif; letter-spacing:.02em; }
@media (max-width:900px){ .actual-grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .actual-cards{ grid-template-columns:1fr; } }

/* 26.7 (founder) — "make the picture a rectangle above the text, filling the whole width,
   edge to edge, so it looks big and they really understand what the parquet looks like."
   The image left the half-width column and became a full-bleed band above the copy.
   The height is fixed here, so the box never depends on the file: zero CLS, and the
   figure stays lazy (it sits far below the fold on every width, so LCP is untouched). */
.actual-room-full{ margin:0 0 clamp(28px,4.5vh,52px); width:100%; }
.actual-room-full img{ display:block; width:100%; height:clamp(300px,58vh,660px);
  object-fit:cover; object-position:center; border-block:1px solid var(--line); border-radius:0; }
.actual-room-full .actual-cap{ margin-top:12px; }
.actual-room-full .actual-cap .wrap{ display:block; }
/* five short facts read better as one row of columns under a wide image than as a 2-up block.
   auto-fit was tried first and left a 4 + 1 orphan at 1440; the count is fixed and known, so
   the track count is stated outright at each breakpoint. */
.actual-cards-wide{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:26px 28px; }
@media (max-width:1080px){ .actual-cards-wide{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){ .actual-cards-wide{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:480px){ .actual-cards-wide{ grid-template-columns:1fr; } }

/* — Fan deck · eighteen real planks, cool to warm — */
.fandeck{ display:flex; gap:3px; height:clamp(170px,26vh,240px); }
.fd{ flex:1; min-width:0; background-size:cover; background-position:center; position:relative; border-radius:2px; overflow:hidden; transition:flex var(--t-fast) var(--e-standard); }
.fd::after{ content:""; position:absolute; inset:0; background:rgba(14,27,35,0); transition:background var(--t-fast) var(--e-standard); }
.fd:hover{ flex:3.2; }
.fd:hover::after{ background:rgba(14,27,35,.18); }
/* a11y 26.07.2026 — .fd-nm measured 1.72:1 over the light planks, and on ≤680px the label is
   always visible (not hover-only). Dedicated scrim in the bottom third only: the label reads,
   the plank stays the hero. The photograph itself is untouched. */
.fd::before{ content:""; position:absolute; inset:auto 0 0 0; height:46%; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(14,20,24,0),rgba(14,20,24,.52) 38%,rgba(14,20,24,.84) 70%,rgba(14,20,24,.9)); opacity:0;
  transition:opacity var(--t-fast) var(--e-standard); }
.fd:hover::before,.fd:focus-visible::before{ opacity:1; }
.fd .fd-nm{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:2; font-family:var(--serif); font-size:14px; color:#F4F2EC; text-shadow:0 1px 4px rgba(0,0,0,.95); white-space:nowrap; opacity:0; transition:opacity var(--t-fast) var(--e-standard) .06s; }
/* opacity:.75 on 9.5px text pushed the model code below AA. Hierarchy is carried by size, not alpha. */
.fd .fd-nm i{ font-style:normal; font-family:var(--sans); font-size:9.5px; letter-spacing:.08em; opacity:1; margin-inline-start:6px; }
.fd:hover .fd-nm,.fd:focus-visible .fd-nm{ opacity:1; }
@media (max-width:680px){ .fandeck{ flex-wrap:wrap; height:auto; gap:4px; } .fd{ flex:1 1 22%; height:88px; } .fd:hover{ flex:1 1 22%; } .fd::before{ opacity:1; height:56%; } .fd .fd-nm{ display:block; opacity:1; bottom:6px; font-size:10px; } .fd .fd-nm i{ display:none; } }

/* — True scale · the plank as it is (architectural dimension drawing) — */
.tscale{ margin:26px 0 30px; }
.tscale svg{ width:100%; max-width:1100px; height:auto; display:block; }
/* Phone: the plank must READ as a plank. Forcing min-width:1000px inside a ~340px screen showed
   only its left third — a wood cube nobody scrolls past. So it scales to fit, and the labels and
   rules are scaled back UP in viewBox units (×~3.2) so they stay legible at that size. */
@media (max-width:680px){
  .tscale{ overflow-x:visible; }
  .tscale svg{ min-width:0; width:100%; }
  .tscale svg text{ font-size:34px; letter-spacing:0; }
  .tscale svg line{ stroke-width:3; }
  .tscale svg rect{ stroke-width:3; }
}

/* — Palette fan · designer's sample cards held in a hand — */
.palfan{ display:flex; justify-content:center; align-items:flex-end; padding:38px 10px 16px; }
.pf-card{ position:relative; width:clamp(96px,12.5vw,152px); aspect-ratio:5/7; border-radius:9px; background-size:cover; background-position:center; border:1px solid rgba(35,32,32,.15); box-shadow:0 12px 26px -12px rgba(35,32,32,.38); transform:rotate(var(--r)); transform-origin:50% 125%; margin-inline-start:-28px; transition:transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard), z-index 0s; }
.pf-card:first-child{ margin-inline-start:0; }
.pf-card:hover{ transform:rotate(var(--r)) translateY(-20px); z-index:6; box-shadow:0 26px 40px -14px rgba(35,32,32,.42); }
.pf-card i{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); font-style:normal; font-family:var(--sans); font-size:10.5px; letter-spacing:.02em; color:var(--ink); background:rgba(244,242,236,.94); border:1px solid rgba(35,32,32,.08); border-radius:2px; padding:2px 8px; white-space:nowrap; }
.mr-cap.center{ text-align:center; }
@media (max-width:680px){ .pf-card{ width:15.2vw; margin-inline-start:-14px; } .pf-card i{ display:none; } .palfan{ padding-top:24px; } }

/* — Closing band · the last word bathed in the model's own colour — */
.closing .punch{ }
.closing.on-dark, .closing.on-dark .display{ color:var(--paper-2); }
.closing.on-dark .muted{ color:rgba(247,244,236,.85); }
.closing.on-dark .punch{ color:#FFFFFF; }
.closing.on-dark .btn{ border-color:rgba(247,244,236,.85); color:var(--paper-2); }
.closing.on-dark .btn:hover{ background:var(--paper-2); color:var(--ink); }
.closing.on-dark .btn-solid{ background:var(--paper-2); color:var(--ink); border-color:var(--paper-2); }
.closing.on-dark .btn-solid:hover{ background:transparent; color:var(--paper-2); }
.closing.on-light, .closing.on-light .display{ color:var(--ink-2); }
.closing.on-light .muted{ color:rgba(38,34,30,.82); }
.closing.on-light .punch{ color:var(--ink-2); }

/* — You-are-here waypoint on model pages — */
.wp-now{ color:var(--oak-text); }
.wp-now .wp-t{ border-bottom:1px solid var(--oak); padding-bottom:2px; }

/* card material grain */
.pf-card::after{ content:""; position:absolute; inset:0; border-radius:9px; background:url(../brand/card-grain.png); background-size:130px; opacity:.16; mix-blend-mode:overlay; pointer-events:none; }
.pf-card.pf-floor::after{ opacity:.05; }
/* closing on the real floor */
.closing{ position:relative; overflow:hidden; }
/* Scrim floor is MEASURED, not eyeballed: on the palest floors (1140-19 St Barth, p98 rgb 203/199/187)
   the old .34 top stop left the lead at CR 3.48 — below AA 4.5 on 7 of 18 models (14 pages).
   .56 is the minimum top stop at which every text row in the band clears 4.5 on all 18:
   coord 4.84 · lead 5.55 · pairline 7.56 · steps 7.14 (worst-case model, brightest 2% of the tile).
   The bottom stop is untouched — the floor's own colour still bathes the band. */
.closing-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,20,24,.56),rgba(14,20,24,.74)); }
.closing .wrap{ position:relative; z-index:2; }
.closing.on-dark .punch{ text-shadow:0 1px 14px rgba(0,0,0,.35); }
/* Beat 4 · the quiet pairing line (rational anchor). Never .reveal — a beat that JS can hide
   is a beat that was not delivered. Serif italic in Latin; RTL keeps upright, because
   Frank Ruhl Libre has no true italic and the browser would fake-slant Hebrew. */
.pairline{ font-family:var(--serif); font-style:italic; font-size:clamp(15px,1.5vw,18px);
  line-height:1.55; letter-spacing:.005em; margin-top:1.05rem; }
.closing.on-dark .pairline{ color:var(--paper-2); text-shadow:0 1px 12px rgba(0,0,0,.35); }
.closing.on-light .pairline{ color:var(--ink-2); text-shadow:none; }
html[dir="rtl"] .pairline{ font-family:'Frank Ruhl Libre',Georgia,serif; font-style:normal; line-height:1.7; }
/* — No synthetic oblique on Hebrew (whole class, found 25.7 while verifying beat 4) —
   Spectral ships a real italic file; Frank Ruhl Libre and Heebo do not. Every italic rule that
   also lands on Hebrew was therefore being faked by the browser as a slant — the same
   promise-vs-reality fault as a wrong font. Measured on /he: 18 closing headlines,
   19 <em> runs (the `evokes` line), 18 convergence captions.
   Latin names keep their own face; .latin sets its family explicitly. */
html[dir="rtl"] em,
html[dir="rtl"] .closing .display,
html[dir="rtl"] .convcap{ font-style:normal; }
/* hero: quieter headline */
.hero-cinema h1{ font-size:clamp(31px,5vw,62px); }

/* hero rotator crossfade */
.hero-cinema .hero-video{ transition:opacity var(--t-arrive) var(--e-arrive); }
.hero-cinema .hero-video-b{ opacity:0; }

/* closing: editorial type on the real floor */
.closing .coord{ color:rgba(247,244,236,.6); letter-spacing:.2em; }
.closing .display{ font-size:clamp(22px,2.9vw,34px); font-style:italic; font-weight:400; opacity:.95; }
.closing .lead{ font-size:clamp(16px,1.8vw,19px); }
.closing .punch{ font-size:clamp(32px,4.6vw,54px); line-height:1.12; }

/* — Coast ticker · a slow voyage line of the eighteen coasts — */
.ticker{ overflow:hidden; border-bottom:1px solid var(--line); background:var(--surface); direction:ltr; }
.tk-track{ display:inline-flex; align-items:center; gap:34px; white-space:nowrap; padding:11px 0; animation:tk 70s linear infinite; will-change:transform; }
.ticker:hover .tk-track{ animation-play-state:paused; }
.tk-track a{ font-family:var(--sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tk-track a b{ font-weight:500; color:var(--ink); margin-inline-end:8px; }
.tk-track a:hover b{ color:var(--oak-text); }
.tk-dot{ width:5px; height:5px; border:1px solid var(--oak); transform:rotate(45deg); flex:none; }
@keyframes tk{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .tk-track{ animation:none; } }

/* — FAQ · straight answers — */
.faq{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 2px; font-family:var(--serif); font-size:18px; color:var(--ink); }
html[dir="rtl"] .faq summary{ font-family:'Heebo',sans-serif; font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"\002B"; color:var(--oak-text); font-size:20px; flex:none; }
.faq[open] summary::after{ content:"\2212"; }
.faq p{ padding:0 2px 18px; color:var(--muted); max-width:64ch; }

/* — Voyage route · one line instead of two word-sections — */
.vroute{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin:clamp(46px,7vh,84px) auto 0; max-width:980px; padding-top:5px; }
.vroute::before{ content:""; position:absolute; top:10px; left:3%; right:3%; height:1px;
  background-image:linear-gradient(90deg, var(--oak) 0 6px, transparent 6px 14px); background-size:14px 1px; background-repeat:repeat-x;
  animation:vflow 2.6s linear infinite; opacity:.55; }
html[dir="rtl"] .vroute::before{ animation-direction:reverse; }
@keyframes vflow{ from{ background-position:0 0; } to{ background-position:14px 0; } }
@media (prefers-reduced-motion: reduce){ .vroute::before{ animation:none; } }
.vr-p{ position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; min-width:0; }
.vr-p i{ width:11px; height:11px; border-radius:50%; background:var(--paper); border:2px solid var(--oak); margin-top:-1px; }
.vr-p i.vr-plank{ width:64px; height:15px; border-radius:2px; border:1px solid var(--line); background-size:cover; background-position:center; margin-top:-3px; box-shadow:0 3px 8px rgba(14,27,35,.2); }
.vr-p b{ font-family:var(--serif); font-weight:500; font-size:clamp(15px,1.6vw,19px); color:var(--ink); margin-top:8px; }
html[dir="rtl"] .vr-p b{ font-family:'Heebo',sans-serif; font-weight:600; }
.vr-p small{ font-family:var(--sans); font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
html[dir="rtl"] .vr-p small{ font-family:'Heebo',sans-serif; }
@media(max-width:680px){
  .vroute{ flex-direction:column; align-items:flex-start; gap:20px; padding-top:0; padding-inline-start:6px; }
  .vroute::before{ top:4px; bottom:4px; left:auto; right:auto; inset-inline-start:11px; width:1px; height:auto;
    background-image:linear-gradient(180deg, var(--oak) 0 6px, transparent 6px 14px); background-size:1px 14px; background-repeat:repeat-y; animation:none; }
  .vr-p{ flex-direction:row; align-items:center; gap:12px; }
  .vr-p i{ flex:none; margin:0; }
  .vr-p b{ margin:0; }
  .vr-p small{ margin-inline-start:2px; }
}

/* — The shelf · the whole collection in real planks, this model in place — */
.shelves{ display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(34px,5vh,54px); }
.shf-row{ min-width:0; }
.shf-row .lab{ display:flex; justify-content:space-between; align-items:baseline; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.shf-row .lab b{ font-family:var(--sans); font-weight:500; letter-spacing:.12em; color:var(--ink); }
html[dir="rtl"] .shf-row .lab, html[dir="rtl"] .shf-row .lab b{ font-family:'Heebo',sans-serif; letter-spacing:0; font-size:12px; }
.shf{ display:flex; align-items:flex-end; gap:5px; }
.shf-it{ position:relative; flex:1; min-width:0; display:block; }
.shf-strip{ display:block; height:52px; border-radius:2px; border:1px solid var(--line); background-size:cover; background-position:center; opacity:.62; filter:saturate(.92); transition:opacity var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard); }
.shf-it:hover .shf-strip{ opacity:1; transform:translateY(-3px); }
.shf-it.is-cur{ flex:1.9; }
.shf-it.is-cur .shf-strip{ height:72px; opacity:1; filter:none; outline:2px solid var(--oak); outline-offset:2px; box-shadow:0 8px 20px rgba(14,27,35,.22); }
.shf-lbl{ position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); font-family:var(--serif); font-size:14.5px; color:var(--ink); white-space:nowrap; }
.shf-row{ padding-top:26px; }
.shf-sent{ margin-top:14px; font-family:var(--serif); font-size:clamp(15.5px,1.8vw,18px); color:var(--ink); }
html[dir="rtl"] .shf-sent{ font-family:'Heebo',sans-serif; font-size:15.5px; }
@media(max-width:680px){ .shf{ gap:5px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:8px; scroll-snap-type:x proximity; } .shf-it{ flex:0 0 34px; scroll-snap-align:center; } .shf-it.is-cur{ flex:0 0 60px; } .shf-strip{ height:46px; } .shf-it.is-cur .shf-strip{ height:60px; } .shf-lbl{ font-size:12.5px; } .lt-btn{ padding:10px 14px; } }

/* — hero video pause control — */
.hero-pause{ position:absolute; bottom:16px; inset-inline-end:16px; z-index:6; width:40px; height:40px; border-radius:50%; border:1px solid rgba(247,244,236,.4); background:rgba(14,27,35,.42); color:var(--paper-2); font-size:11px; letter-spacing:2px; cursor:pointer; display:grid; place-items:center; transition:background var(--t-fast) var(--e-standard); }
.hero-pause:hover{ background:rgba(14,27,35,.7); }
.hero-pause[aria-pressed="true"]::before{ content:"\25B6"; font-size:13px; }
.hero-pause[aria-pressed="true"]{ font-size:0; }
@media (prefers-reduced-motion: reduce){ .hero-pause{ display:none; } }

/* — Evidence registry table — */
.reg{ width:100%; border-collapse:collapse; font-family:var(--sans); margin-top:8px; }
.reg th{ text-align:start; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:0 14px 10px; border-bottom:1px solid var(--ink); }
.reg td{ padding:13px 14px; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink); vertical-align:top; }
.reg td:first-child{ color:var(--muted); width:34%; }
.reg td:last-child,.reg th:last-child{ font-size:12.5px; letter-spacing:.03em; color:var(--muted); white-space:nowrap; }
.reg tbody tr:last-child td{ border-bottom:0; }
html[dir="rtl"] .reg{ font-family:'Heebo',sans-serif; }
html[dir="rtl"] .reg td:last-child,html[dir="rtl"] .reg th:last-child{ font-family:var(--sans); direction:ltr; text-align:right; }
@media(max-width:680px){ .reg th:last-child,.reg td:last-child{ font-size:11px; white-space:normal; } .reg td{ padding:11px 8px; font-size:13.5px; } }

/* — Copy-paste specification clause — */
.spec-clause{ margin:26px 0 8px; padding:20px 22px; border:1px solid var(--line); border-inline-start:2px solid var(--oak); border-radius:3px; background:var(--sand); }
.clause-text{ margin:8px 0 14px; font-family:var(--sans); font-size:13.5px; line-height:1.7; color:var(--ink); }
html[dir="rtl"] .clause-text{ font-family:'Heebo',sans-serif; }
.clause-copy{ background:none; border:0; cursor:pointer; font:inherit; padding:0; }
@media print{ .spec-clause{ break-inside:avoid; background:#fff; border:1pt solid var(--print-rule); } .clause-text{ font-size:9.5pt; } }

/* — Arrival · surface from the floor's own locked tone (Navigation-as-Voyage) —
   Move 2 (NAV-DESIGN-TOKENS 2026-07-20): the veil is the model's darkened shade (--veil,
   set inline per-model); it surfaces in .88s (a breath of arrival, not a crossfade) and
   melts toward the pale --band of the landing strip below. Opacity only — no slide/zoom. */
.arrive-veil{ position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:0;
  animation:arrive-surface var(--t-arrive) var(--e-arrive) forwards; }
@keyframes arrive-surface{ 0%{ opacity:.6; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .arrive-veil{ display:none; } }
@media print{ .arrive-veil{ display:none; } }

/* — Landing strip · a pale band of arrival above the origin image —
   colour comes from --band / --rule, set inline per model page.
   Text = --ink (13.5:1 on every model). A hairline --rule closes it. Restrained. */
.landing-strip{
  min-height: clamp(84px, 12vh, 124px);
  padding-block: clamp(18px, 3.2vh, 34px);
  padding-inline: var(--gutter);
  background: var(--band);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.landing-strip .ls-eyebrow{
  font-family: var(--sans); font-weight: 500; font-size: 12.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.landing-strip .ls-place{
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.5vw, 27px); line-height: 1.25; color: var(--ink);
  letter-spacing: .005em; max-width: 34ch; margin: 0;
}
html[dir="rtl"] .landing-strip .ls-place{
  font-family: 'Frank Ruhl Libre', Georgia, serif; font-style: normal; font-weight: 500;
  max-width: 40ch;
}
.landing-strip .ls-coord{
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: .16em; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0;
}
@media (prefers-reduced-motion: no-preference){
  .landing-strip .ls-place{ animation:ls-in var(--t-fast) var(--e-standard) .12s backwards; }
  @keyframes ls-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
}
@media print{ .landing-strip{ background:none; border-bottom:1px solid var(--line); } }

/* — Move 3 · Taste-gate · a quiet corner pill for the unsure visitor —
   chrome-orientation (sea family), never a model tone. Rest = low-contrast surface+muted;
   hover/open = filled sea+paper. Self-mounted by taste-gate.js; hidden where a compass exists. */
.taste-gate{
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 55;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(14,27,35,.06); cursor: pointer;
  transition: background var(--t-fast) var(--e-standard), color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard);
}
.taste-gate::before{
  content:""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--sea); opacity: .55; flex: none;
}
@media (prefers-reduced-motion: no-preference){
  .taste-gate::before{ animation: tg-breathe 3.2s ease-in-out infinite; }
  @keyframes tg-breathe{ 0%,100%{ opacity:.35; } 50%{ opacity:.7; } }
}
.taste-gate:hover, .taste-gate:focus-visible{
  background: var(--sea); color: var(--paper); border-color: var(--sea);
  box-shadow: 0 4px 16px rgba(14,27,35,.16); transform: translateY(-1px);
}
.taste-gate:hover::before, .taste-gate:focus-visible::before{ background: var(--paper); opacity: 1; }
.taste-gate .tg-dismiss{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-inline-start:2px; border:0; border-radius:50%;
  background:transparent; color:inherit; font-size:15px; line-height:1; cursor:pointer; opacity:.6;
}
.taste-gate .tg-dismiss:hover{ opacity:1; }
/* opened panel — in place, not full-screen */
.taste-gate-panel{
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 56;
  width: min(300px, calc(100vw - 40px));
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(14,27,35,.16); padding: 20px 20px 18px;
  color: var(--ink); font-family: var(--sans);
}
@media (prefers-reduced-motion: no-preference){
  .taste-gate-panel{ animation:tg-open var(--t-fast) var(--e-standard) backwards; }
  @keyframes tg-open{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
}
.taste-gate-panel .tgp-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.taste-gate-panel .tgp-q{ font-family:var(--serif); font-size:19px; line-height:1.25; color:var(--ink); margin:0; }
.taste-gate-panel .tgp-line{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:10px 0 16px; }
.taste-gate-panel .tgp-go{
  display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:500;
  padding:11px 18px; border-radius:8px; background:var(--sea); color:var(--paper); border:1px solid var(--sea);
  transition:background var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard);
}
.taste-gate-panel .tgp-go:hover{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.taste-gate-panel .tgp-later{ display:block; margin-top:12px; padding:0;
  border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:12.5px; color:var(--muted);
  border-bottom:1px solid transparent; transition:color var(--t-fast) var(--e-standard), border-color var(--t-fast) var(--e-standard); }
.taste-gate-panel .tgp-later:hover{ color:var(--ink); border-color:var(--line); }
.taste-gate-panel .tgp-close{
  border:0; background:transparent; color:var(--muted); font-size:20px; line-height:1;
  cursor:pointer; padding:0; margin:-2px -2px 0 0; flex:none;
}
.taste-gate-panel .tgp-close:hover{ color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .taste-gate{ transition: background .01s, color .01s; }
  .taste-gate:hover{ transform: none; }
}
.taste-gate .tg-short{ display:none; }
@media (max-width: 720px){
  /* mobile: a narrow pill with two words. It used to collapse to a 42px grey circle with
     the label clipped away — a dot with no word, which nobody has a reason to press. */
  .taste-gate{ inset-block-end: 78px; inset-inline-end: 16px; z-index: 61;
    width: auto; height: auto; padding: 12px 16px; gap: 8px;
    border-radius: 999px; justify-content: center; }
  .taste-gate .tg-label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .taste-gate .tg-short{ display:inline; font-size:13px; }
  .taste-gate::before{ width: 9px; height: 9px; }
  .taste-gate-panel{ inset-block-end: 78px; z-index: 62; }
}
@media print{ .taste-gate, .taste-gate-panel{ display:none !important; } }

.eye-card{ position:relative; display:block; width:100%; aspect-ratio:4/5; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; cursor:pointer; padding:0; background:var(--surface);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 18px 44px -22px rgba(35,32,32,.45);
  transition:transform var(--t-fast) var(--e-standard), box-shadow var(--t-fast) var(--e-standard); }
.eye-card:hover{ transform:translateY(-4px); box-shadow:0 1px 0 rgba(0,0,0,.04), 0 26px 54px -20px rgba(35,32,32,.5); }
.eye-card:active{ transform:translateY(-1px); }
.eye-card:focus-visible{ outline:2px solid var(--sea); outline-offset:3px; }
.ec-field,.ec-planks{ position:absolute; inset:0; }
.ec-wall{ position:absolute; top:0; left:0; right:0; height:56%; }
.ec-floor{ position:absolute; bottom:0; left:0; right:0; height:44%; }
.ec-planks{ display:flex; }
.ec-planks > i{ flex:1; height:100%; }

/* — the pair screen's BOX MODEL · moved here from eye.css on 2026-07-26 —
   Founder: "you click it and it jumps huge, then a second later it goes small."
   Measured in Chrome frame-by-frame (requestAnimationFrame + getBoundingClientRect):
   with eye.css blocked, a card renders 560x700; with it applied, 270x337.5. eye.css is
   loaded async on the home page (media=print swap) because making it render-blocking
   costs ~1.0s of LCP — so it must not own any geometry the home page renders. These are
   the rules that decide the SIZE of a pair screen; they now live in the render-blocking
   sheet and cannot lose a race. eye.css keeps only colour/typography/state.
   /eye.html loads site.css before eye.css, so that surface is byte-identical. */
.eye-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:12px; }
.eye-count{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; color:var(--muted); font-variant-numeric:tabular-nums; }
.eye-bar{ height:2px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:26px; }
.eye-bar > i{ display:block; height:100%; background:var(--ink); transition:width var(--t-fast) var(--e-standard); }
.eye-kicker{ font-family:var(--sans); font-size:12.5px; letter-spacing:.03em; color:var(--muted); margin:0 0 6px; }
.eye-ask{ font-family:var(--serif); font-size:clamp(19px,2.6vw,24px); margin:0 0 18px; }
html[dir="rtl"] .eye-ask{ font-family:'Frank Ruhl Libre',Georgia,serif; font-weight:500; }
.eye-pairing{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,3vw,20px);
  transition:opacity var(--t-fast) var(--e-standard), transform var(--t-fast) var(--e-standard); }
.eye-skip{ text-align:center; margin-top:22px; }
@media (prefers-reduced-motion:reduce){ .eye-pairing{ transition:none; } }

/* — CARETTA EYESIGHT · the first question, in the page (home-page entry, 2026-07-25) —
   Quiet by construction: no button, no counter, no progress bar. The cards ARE the
   entry. The slot reserves exactly the height the pair will occupy, so nothing jumps
   when it arrives. */
/* 25.7 — founder review: "two beige squares, off to one side, nobody understands what
   this is". Two failures, both fixed here as a class: (a) the block was left-aligned in a
   page whose every other feature block is centred, so it read as debris; (b) it asked a
   question with no statement of WHAT it is. The layout is centred, and .eyi-do names the
   affordance out loud, because an unlabelled colour field does not look tappable.
   25.7 (later, same day) — founder again: "you're digging a hole there for nothing".
   The fix above had over-corrected into three paragraphs of explaining-before-trying.
   The block is now capped at ONE line above the question (≤25 words, both languages):
   .eyi-open (what it is) · .eyi-q (the question) · .eyi-do (the affordance).
   .eyi-how and .eyi-note were removed from the markup, and their rules with them —
   a dead rule is how a design system starts drifting. */
.eye-inline{ padding-block:clamp(44px,7vh,84px); }
.eye-inline .wrap{ text-align:center; }
.eye-inline .eyi-open{ font-family:var(--sans); font-size:15px; line-height:1.6;
  color:var(--ink); max-width:46ch; margin:0 auto 24px; text-wrap:balance; }
.eye-inline .eyi-q{ font-family:var(--serif); font-weight:500;
  font-size:clamp(21px,3vw,30px); line-height:1.25; color:var(--ink);
  margin:0 auto 8px; max-width:26ch; text-wrap:balance; }
html[dir="rtl"] .eye-inline .eyi-q{ font-family:'Frank Ruhl Libre',Georgia,serif; }
.eye-inline .eyi-do{ font-family:var(--sans); font-size:13px; line-height:1.6;
  letter-spacing:.01em; color:var(--muted); margin:0 auto 20px; max-width:40ch; }
.eyi-stage{ display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(12px,3vw,20px); max-width:560px; margin-inline:auto; }
.eyi-slot{ grid-column:1 / -1; aspect-ratio:5/3; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:20px;
  border:1px solid var(--line); border-radius:3px; background:var(--surface); }
@media (max-width:560px){ .eyi-stage{ max-width:none; } }
@media (prefers-reduced-motion:reduce){ .eyi-stage .eye-card{ transition:none; } }

/* 26.7 (founder) — "I don't want the entry page to jump to another page — I want everything
   operated from there. And it needs an explanation. Call it CARETTA EYESIGHT."
   .eyi-what is that explanation (≤25 words, both languages) and sits above the question.
   .eyi-run hosts the full reading, in place: once the first pair is answered the intro
   chrome is hidden and every following screen renders here. */
.eye-inline .eyi-what{ font-family:var(--sans); font-size:15px; line-height:1.6;
  color:var(--ink); max-width:52ch; margin:0 auto 10px; text-wrap:balance; }
.eye-inline .eyi-open{ margin-bottom:24px; }
.eye-inline.is-running .eyi-what,
.eye-inline.is-running .eyi-open,
.eye-inline.is-running .eyi-q,
.eye-inline.is-running .eyi-do,
.eye-inline.is-running .eyi-stage{ display:none; }
.eyi-run{ max-width:880px; margin-inline:auto; text-align:start; }
.eyi-run[hidden]{ display:none; }
.eye-inline.is-running .eyi-run{ text-align:center; }
/* 25.7 (founder) — "the cards grow and don't stay the same, it's odd". They did: the
   first pair sits in .eyi-stage (560px), and from the second onward in .eyi-run (880px),
   so every card jumped ~270px → ~430px wide on the first click. The pair grid is now
   pinned to the same 560px in BOTH hosts, so a card is the same size on all 14 steps.
   Only the pair is capped — the reading's prose and result keep the wider 880px. */
.eye-inline .eye-pairing{ max-width:560px; margin-inline:auto; }
/* 26.7 — the second half of the same founder report, measured on the live site at 1440,
   1920 and 390, EN and HE: on the first click the section collapsed 696px -> 167px to an
   EMPTY 880px box for the whole duration of the /api/eye round-trip, then sprang back.
   Locally that gap is ~60ms; on a cold serverless call it is the "second" the founder saw
   — a wide empty box opening, then a small pair dropping into it. And the smooth-scroll
   that runs at the same moment was measuring a collapsed layout, so it parked at the
   wrong offset too.
   Fix: the answered pair STAYS in place, faded, holding the section's height, until the
   next screen has actually painted. There is no empty state to see. This mirrors what
   /eye.html already did (.eye-fade on the outgoing pair) — the inline surface was the
   only one that tore its own content down before it had a replacement. */
.eyi-stage.eyi-handoff{ opacity:.38; pointer-events:none;
  transition:opacity var(--t-fast) var(--e-standard); }
@media (prefers-reduced-motion:reduce){ .eyi-stage.eyi-handoff{ transition:none; } }
/* .eye-ask is focused programmatically after each step so a screen reader hears the new
   question. It is not an interactive control, and Chrome was painting a full-width blue
   focus ring around the question on every mouse click. Silence the ring; the SR
   announcement (the reason for the focus) is unaffected. */
.eye-ask[tabindex="-1"]:focus,
.eye-ask[tabindex="-1"]:focus-visible{ outline:none; }

/* — Convergence mark · many readings, one lock — */
.convmark{ margin:22px 0 6px; max-width:340px; }
.convmark svg{ width:100%; height:auto; display:block; }
.convcap{ font-family:var(--serif); font-size:14px; color:var(--muted); margin-top:6px; font-style:italic; }
html[dir="rtl"] .convcap{ font-family:'Heebo',sans-serif; font-style:normal; }
@media print{ .convmark{ display:none; } }

/* — Light control · warm / natural / cool, an elegant sliding segmented control — */
.lightbox{ position:relative; display:flex; flex-direction:column; }
.lightbox .macro{ transition:filter var(--t-fast) var(--e-standard); border-radius:2px; }
.plankbox{ align-items:stretch; }
.plank-strip{ width:100%; height:clamp(122px,15vh,168px); object-fit:cover; object-position:center; border:1px solid var(--line); border-radius:3px; box-shadow:0 14px 40px rgba(14,27,35,.13); }
.plankbox .light-toggle{ align-self:center; }
.light-toggle{ position:relative; align-self:center; display:inline-flex; margin:0 0 16px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--sand); }
.lt-slider{ position:absolute; top:0; left:0; z-index:0; border-radius:999px; background:var(--night) var(--night-grad); box-shadow:0 2px 8px rgba(14,27,35,.22); transition:transform var(--t-fast) var(--e-standard), width var(--t-fast) var(--e-standard), height var(--t-fast) var(--e-standard); }
.lt-btn{ position:relative; z-index:1; font-family:var(--sans); font-size:12px; letter-spacing:.02em; color:var(--muted); background:none; border:0; border-radius:999px; padding:9px 18px; cursor:pointer; transition:color var(--t-fast) var(--e-standard); white-space:nowrap; }
html[dir="rtl"] .lt-btn{ font-family:'Heebo',sans-serif; letter-spacing:0; }
.lt-btn.is-on{ color:var(--paper); }
.lt-note{ align-self:center; text-align:center; margin-top:12px; max-width:46ch; color:var(--muted); }
@media (prefers-reduced-motion:reduce){ .lt-slider,.lightbox .macro{ transition:none; } }
@media print{ .light-toggle,.lt-note{ display:none; } .lightbox .macro{ filter:none!important; } }
@media(max-width:680px){ .lt-btn{ padding:9px 13px; font-size:11.5px; } }

/* — Accessibility statement — */
.a11y-list{ margin:12px 0 0; padding-inline-start:1.2em; }
.a11y-list li{ margin:7px 0; line-height:1.6; }
/* 26.07.2026 — `.a11y-fill` (the dashed "to be filled" marker) was REMOVED. It shipped on the live
   accessibility statement, which is the first document a claimant reads, and it also measured
   4.10:1 — the accessibility page failing accessibility. Every placeholder is now filled.
   Do not reintroduce it on a published legal page. */

/* — Evidence registry · honest status labels (P0-05/06) — */
.ev-status,.ev-req,.ev-pending,.ev-ok{ display:inline-block; padding:2px 9px; border-radius:999px; letter-spacing:.12em; white-space:nowrap; }
.ev-req{ color:var(--muted); border:1px solid rgba(120,110,98,.34); }
.ev-pending{ color:var(--clay-text); border:1px dashed rgba(165,98,63,.5); }
.ev-ok{ color:var(--ink); border:1px solid rgba(120,110,98,.28); }

/* 26.07.2026 — the locked colour code used to be painted in the colour it describes (#ae8558 on
   white = 3.34:1). The colour moved to a swatch chip, the text went back to --ink. Intent kept,
   legibility restored. */
.hex-chip{ display:inline-block; width:.72em; height:.72em; border-radius:2px; border:1px solid rgba(0,0,0,.28); margin-inline-end:.4em; vertical-align:baseline; }

/* — Robot 03 authority modules + specifier dock (P0-03/04/13) — */
.r03-list{ list-style:none; margin:0; padding:0; }
.r03-list li{ padding:7px 0 7px 18px; border-bottom:1px solid rgba(120,110,98,.16); position:relative; line-height:1.55; }
.r03-list li:before{ content:"—"; position:absolute; left:0; color:var(--muted); }
[dir=rtl] .r03-list li{ padding:7px 18px 7px 0; }
[dir=rtl] .r03-list li:before{ left:auto; right:0; }
.r03-truth .coord{ color:var(--muted); }
.spec-dock{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 18px; border:1px solid rgba(120,110,98,.22); border-radius:8px; background:rgba(120,110,98,.04); }
.dock-lbl{ margin-inline-end:6px; }
.dock-a{ display:inline-block; padding:9px 15px; border:1px solid rgba(120,110,98,.34); border-radius:999px; font-size:14px; text-decoration:none; color:var(--ink); min-height:40px; line-height:1.5; }
.dock-a:hover{ border-color:var(--ink); }
.dock-a.is-disabled{ opacity:.5; cursor:default; }

/* — Evidence registry · three lanes (P0-05/06) — */
.ev-lanes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.5vw,34px); }
.ev-lane{ border:1px solid rgba(120,110,98,.18); border-radius:10px; padding:18px 18px 8px; }
.ev-lane .kicker{ margin-bottom:10px; }
.ev-lane .reg{ width:100%; border-collapse:collapse; }
.ev-lane .reg td{ padding:9px 0; border-bottom:1px solid rgba(120,110,98,.12); vertical-align:top; line-height:1.4; font-size:14px; }
.ev-lane .reg tr:last-child td{ border-bottom:none; }
.ev-lane .reg td:last-child{ text-align:end; white-space:nowrap; padding-inline-start:10px; }
@media (max-width:760px){ .ev-lanes{ grid-template-columns:1fr; } }

/* — Homepage decision screen + lead capture (P0-01/02/07/09/10/12) — */
.trust-strip{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 10px; margin:20px 0 0; padding:0; }
.trust-strip li{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:rgba(244,242,236,.9); border:1px solid rgba(244,242,236,.28); border-radius:999px; padding:5px 12px; }
.hero-routes{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.hero-explore{ margin-top:14px; }
.hero-explore .link-arrow, .link-arrow.on-dark{ color:rgba(244,242,236,.85); }
.hero-secondary{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.hero-secondary .link-arrow{ font-weight:400; border-bottom-color:rgba(244,242,236,.38); }
/* 25.7 (WEBOS hero move): the reservations below are FONT-SWAP guards, not layout.
   They were sized for a five-chip / five-button hero; with the calm hero they were
   reserving dead space and — worse — `min-height` on a nowrap flex row stretched the
   chips into 84px ovals. Measured at 375: h1 2 lines, lead 3 lines, chips 1 row,
   buttons 2 rows. Reserve exactly that, and never stretch a chip again. */
@media (max-width:760px){
  .hero-cinema-inner h1{ min-height:2.2em; }
  .hero-cinema-inner .lead{ min-height:3.4em; }
  .trust-strip{ min-height:34px; align-content:flex-start; align-items:flex-start; }
  .hero-routes{ min-height:50px; align-content:flex-start; }
  .hero-explore, .hero-explore .link-arrow{ font-size:12.8px; line-height:1.9; }
}
.btn-wa{ border-color:rgba(37,211,102,.6)!important; }
.btn-wa:hover{ border-color:#25D366!important; }

/* material strip — two priority models */
.mat-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.mat-img{ display:block; overflow:hidden; border-radius:8px; }
.mat-img img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; transition:transform var(--t-fast) var(--e-standard); }
.mat-img:hover img{ transform:scale(1.02); }
.mat-head{ margin:16px 0 4px; }
.mat-code{ font-family:var(--sans); color:var(--muted); letter-spacing:.05em; }
.mat-name{ font-family:var(--serif,'Spectral',serif); font-size:22px; }
.mat-mood{ color:var(--muted); font-size:14px; margin:0 0 12px; }
.mat-cta{ display:flex; gap:22px; flex-wrap:wrap; }
@media (max-width:680px){ .mat-strip{ grid-template-columns:1fr; } }

/* contact route chips */
.route-controls{ border:none; margin:0 0 22px; padding:0; }
.route-controls legend{ padding:0; margin-bottom:10px; }
.route-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.route-chip{ font-family:var(--sans); font-size:14px; padding:9px 15px; border:1px solid rgba(120,110,98,.34); border-radius:999px; background:transparent; cursor:pointer; color:var(--ink); min-height:40px; }
.route-chip.is-on{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.form-more{ border:0; border-top:1px solid var(--line); padding-top:14px; }
.form-more > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:12px; font-family:var(--sans); font-size:14px; color:var(--ink); padding:4px 0; }
.form-more > summary::-webkit-details-marker{ display:none; }
.form-more > summary::after{ content:"+"; margin-inline-start:auto; font-size:20px; line-height:1; color:var(--oak-text); }
.form-more[open] > summary::after{ content:"\2212"; }
.form-more-body{ display:grid; gap:18px; margin-top:18px; }
.form .field label{ font-size:14px; }
.form .route-controls .kicker{ font-size:13px; letter-spacing:.12em; }
.decision-proof{ border:1px solid var(--line); border-radius:8px; padding:16px 18px; background:rgba(120,110,98,.04); }
.decision-proof h2{ font-family:var(--sans); font-size:14px; letter-spacing:.03em; margin:0 0 10px; }
.decision-proof ul{ margin:0; padding-inline-start:1.1em; }
.decision-proof li{ margin:7px 0; font-size:14px; line-height:1.5; color:var(--muted); }
.decision-proof a{ color:var(--ink); border-bottom:1px solid var(--line); }
.form-alternative{ font-size:14px; color:var(--muted); }
.form-alternative a{ color:var(--ink); border-bottom:1px solid var(--line); }
.cta-secondary{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px 24px; margin-top:16px!important; font-size:14px; }
.cta-secondary a{ color:rgba(244,242,236,.78); border-bottom:1px solid rgba(244,242,236,.32); padding-bottom:2px; }
.cta-secondary a:hover{ color:var(--paper); border-bottom-color:var(--paper); }

/* what happens next */
.next-steps{ margin:12px 0 0; padding-inline-start:1.1em; }
.next-steps li{ margin:9px 0; line-height:1.55; }
/* 26.7 — the "we come to measure" step was removed (founder: no measurement commitment).
   One step left is not a list; it is a sentence. Same optical weight as the old list item. */
.next-step-line{ margin:12px 0 0; line-height:1.55; }

/* mobile sticky action bar — one primary decision */
.mobile-cta{ position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; grid-template-columns:1fr; gap:1px; background:rgba(120,110,98,.2); border-top:1px solid rgba(120,110,98,.25); }
/* 27.7 founder ruling: the dock carries the quote AND WhatsApp. The quote keeps
   the wider column so it still reads as the primary decision. */
.mobile-cta.has-wa{ grid-template-columns:1.4fr 1fr; }
.mobile-cta .mcta{ display:flex; align-items:center; justify-content:center; min-height:52px; background:var(--paper); color:var(--ink); text-decoration:none; font-family:var(--sans); font-size:14px; }
.mobile-cta .mcta-primary{ background:var(--ink); color:var(--paper); font-weight:500; }
.mobile-cta .mcta.wa{ background:#25D366; color:var(--wa-ink); font-weight:500; }
@media (max-width:760px){ .mobile-cta{ display:grid; } body{ padding-bottom:52px; } }

/* Conversion trio · exact sample, reversible shortlist, honest SLA */
.model-conversion .sample-honesty{flex-basis:100%;max-width:56ch;margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.shortlist-toggle{font-family:var(--sans);cursor:pointer;background:transparent}
.shortlist-toggle.is-saved{border-color:var(--oak-text);color:var(--oak-text)}
.shortlist-chip{position:fixed;z-index:58;inset-inline-end:clamp(14px,2vw,28px);inset-block-end:clamp(66px,7vw,88px);padding:10px 15px;border:1px solid rgba(120,110,98,.34);border-radius:999px;background:rgba(244,242,236,.94);color:var(--ink);box-shadow:0 8px 30px rgba(14,27,35,.14);text-decoration:none;font-size:13px;backdrop-filter:blur(10px)}
.shortlist-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);min-height:280px}
.shortlist-card{border:1px solid var(--line);background:rgba(255,255,255,.25)}
.shortlist-card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.shortlist-card-copy{padding:18px}.shortlist-card h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:5px 0 14px}
.shortlist-card dl{margin:0}.shortlist-card dl div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-top:1px solid var(--line)}
.shortlist-card dt{color:var(--muted)}.shortlist-card dd{margin:0;text-align:end}
.shortlist-card-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:18px}.shortlist-card-actions button,#shortlist-clear,#shortlist-share{border:0;background:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:8px 0}
.shortlist-page-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:28px}
.shortlist-notice{position:fixed;z-index:75;inset-inline:var(--gutter);inset-block-end:84px;max-width:520px;margin-inline:auto;padding:12px 16px;border:1px solid var(--line);background:var(--paper);box-shadow:0 10px 30px rgba(14,27,35,.14);font-size:13px;text-align:center}
.shortlist-notice:empty{display:none}
.sample-pilot-steps{counter-reset:sample-step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,36px);margin-top:32px}
.sample-pilot-step{border-top:1px solid var(--line);padding-top:18px}
.sample-pilot-step::before{counter-increment:sample-step;content:"0" counter(sample-step);display:block;margin-bottom:12px;font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--muted)}
.sample-pilot-state{margin-top:28px;padding:18px;border:1px solid var(--line);background:rgba(255,255,255,.24)}
.sla-line{font-size:13px;color:var(--muted);margin:8px 0 0;flex-basis:100%}
.sample-flow .sample-extra,.sample-flow .route-controls,.sample-flow .form-more{display:none!important}.sample-flow #quote-form>.grid.cols-2{grid-template-columns:1fr}.sample-flow #quote-form{max-width:520px}
@media(max-width:900px){.shortlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.shortlist-grid,.sample-pilot-steps{grid-template-columns:1fr}.shortlist-chip{inset-block-end:66px}.shortlist-grid{min-height:420px}}

/* ── asset-protection layer (design-neutral): no drag, no long-press save, no select on imagery ── */
img, picture, video { -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; }
img { user-select: none; -webkit-user-select: none; }

/* webos 21.7: mobile minimum text size */
@media(max-width:640px){ .coord{ font-size:11.5px; } .worldcard .wc-word{ font-size:12px; } .worldcard .wc-coord{ font-size:11px; }
  /* 25.7 (אודיט-סופי, כשל 3): שורת-coord ארוכה בתוך chartline נחתכה ללא-גלילה במסך 375
     (nowrap בתוך overflow-x:clip). במובייל מתירים שבירת-שורה לכל המחלקה — לא פר-מופע. */
  .chartline .coord{ white-space:normal; text-align:center; } }

/* webos: closing section serves mobile-sized bg */
@media(max-width:640px){ .closing{ background-image:var(--close-bg-m, none) !important; } }

/* founder 21.7: calm hero CTAs — desktop 3, mobile 2; trust chips become one scroll row on mobile */
.hero-cinema .btn.cta-3{ display:none; }
.wp-below{ padding-block:12px 2px; border-bottom:1px solid var(--line); }
@media(max-width:680px){
  .hero-cinema .btn.cta-2{ display:none; }
  .hero-cinema .trust-strip{ display:flex; flex-wrap:nowrap; align-items:flex-start; overflow-x:auto; gap:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .hero-cinema .trust-strip::-webkit-scrollbar{ display:none; }
  .hero-cinema .trust-strip li{ flex:none; }
}

/* ══ Move 1 · 1:1 grain windows (WEBOS 25.7) ═══════════════════════════════════
   Closed by default → zero bytes, zero layout shift until asked for. The panes
   have a FIXED height, so the native-pixel images can never shift the page. */
.zoom1x{ margin-top:clamp(30px,4vh,44px); border-top:1px solid var(--line); }
.zoom1x>summary{ list-style:none; cursor:pointer; padding:16px 0 14px; display:flex;
  flex-wrap:wrap; align-items:baseline; gap:6px 16px; }
.zoom1x>summary::-webkit-details-marker{ display:none; }
.zoom1x>summary::after{ content:"+"; margin-inline-start:auto; font-family:var(--sans);
  font-size:19px; line-height:1; color:var(--oak-text); }
.zoom1x[open]>summary::after{ content:"\2212"; }
.zoom1x>summary:focus-visible{ outline:2px solid var(--oak-text); outline-offset:3px; }
.zoom1x .z1-sum{ font-family:var(--serif); font-size:clamp(17px,2vw,21px); color:var(--ink); }
.zoom1x .z1-body{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.4vw,30px); padding-bottom:8px; }
.z1-fig{ margin:0; min-width:0; }
.z1-pane{ max-height:clamp(300px,46vh,520px); overflow:auto; background:var(--sand);
  border:1px solid var(--line); border-radius:3px; -webkit-overflow-scrolling:touch;
  /* fit the real crop: a 486px window must not sit in a 507px box with a sand gap.
     No CLS — the <img> carries width/height, so the intrinsic box is known before load. */
  width:max-content; max-width:100%;
  /* the crop is not a language: start the pan at the rule, in both directions */
  direction:ltr; }
.z1-pane:focus-visible{ outline:2px solid var(--oak-text); outline-offset:2px; }
.z1-pane img{ display:block; max-width:none; width:auto; height:auto; }
.z1-cap{ font-family:var(--sans); font-size:12.5px; letter-spacing:.02em;
  color:var(--muted); margin-top:9px; }
.z1-note{ grid-column:1/-1; color:var(--muted); margin:2px 0 0; }
@media(max-width:820px){ .zoom1x .z1-body{ grid-template-columns:1fr; } }
@media(prefers-reduced-motion:no-preference){ .z1-pane{ scroll-behavior:smooth; } }

/* ══ Move 2 · true plank scale on Compare (WEBOS 25.7) ═════════════════════════
   One scale for both boards, in percentages of the longest board we make, so it
   holds at every viewport and mirrors correctly in RTL. The rule is real text. */
.tscale2{ max-width:900px; }
.ts2-row{ margin-bottom:clamp(16px,2.4vh,26px); }
.ts2-lab{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin:0 0 8px;
  font-family:var(--sans); font-size:13px; letter-spacing:.02em; }
.ts2-lab b{ font-family:var(--serif); font-weight:500; font-size:17px; letter-spacing:0; }
.ts2-no{ color:var(--muted); }
.ts2-dim{ margin-inline-start:auto; color:var(--muted); font-variant-numeric:tabular-nums; }
.ts2-track{ width:100%; }
.ts2-plank{ background-size:cover; background-position:center; border:1px solid var(--line);
  border-radius:2px; box-shadow:0 1px 0 rgba(0,0,0,.05); }
.ts2-rule{ position:relative; margin-top:10px; }
.ts2-ticks{ position:relative; height:11px; border-top:1px solid var(--line); }
.ts2-ticks i{ position:absolute; inset-block-start:0; width:1px; height:5px; background:rgba(97,92,83,.78); } /* 3.2:1 on --sand — WCAG 1.4.11, the rule must be readable */
.ts2-ticks i.is-major{ height:11px; background:var(--muted); }
.ts2-ticks i.is-end{ background:var(--ink); }
.ts2-nums span.is-end{ color:var(--ink); }
.ts2-nums{ position:relative; height:16px; }
.ts2-nums span{ position:absolute; inset-block-start:0; transform:translateX(-50%);
  font-family:var(--sans); font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }
html[dir="rtl"] .ts2-nums span{ transform:translateX(50%); }
.ts2-unit{ margin:2px 0 0; font-family:var(--sans); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.ts2-verdict{ margin:18px 0 0; font-family:var(--serif); font-size:clamp(17px,2.2vw,22px);
  line-height:1.35; color:var(--ink); border-inline-start:2px solid var(--clay);
  padding-inline-start:14px; max-width:52ch; }
.ts2-scans{ margin:10px 0 0; color:var(--muted); padding-inline-start:16px; }
@media(max-width:520px){ .ts2-nums span{ font-size:10px; } .ts2-lab{ font-size:12px; } }

/* ══ Move 4 · the same room, one floor changed (WEBOS 25.7) ════════════════════
   A real customer photograph with our floor visualised on it. The wipe is a
   native range input (keyboard-operable), the handle is drawn on the seam.
   The stage is dir=ltr in both languages: the photograph is not a language. */
.ba{ position:relative; aspect-ratio:1100/1467; border:1px solid var(--line); border-radius:3px;
  overflow:hidden; background:var(--sand); --x:52%; }
.ba img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.ba-top{ position:absolute; inset:0; clip-path:inset(0 calc(100% - var(--x)) 0 0); }
.ba-line{ position:absolute; inset-block:0; left:var(--x); width:2px; margin-left:-1px;
  background:rgba(244,242,236,.92); box-shadow:0 0 0 1px rgba(14,27,35,.25); pointer-events:none; }
.ba-line i{ position:absolute; inset-block-start:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--paper);
  box-shadow:0 3px 14px rgba(14,27,35,.42); display:grid; place-items:center; }
.ba-line i::before{ content:"\2039\00a0\203A"; font-family:var(--sans); font-size:19px;
  line-height:1; color:var(--ink); letter-spacing:-.06em; }
.ba-range{ position:absolute; inset-inline:0; inset-block-start:50%; transform:translateY(-50%);
  width:100%; height:56px; margin:0; padding:0; background:transparent; -webkit-appearance:none;
  appearance:none; cursor:ew-resize; z-index:3; }
.ba-range::-webkit-slider-runnable-track{ background:transparent; height:56px; }
.ba-range::-moz-range-track{ background:transparent; height:56px; }
.ba-range::-webkit-slider-thumb{ -webkit-appearance:none; width:56px; height:56px;
  background:transparent; border:0; cursor:ew-resize; }
.ba-range::-moz-range-thumb{ width:56px; height:56px; background:transparent; border:0; cursor:ew-resize; }
.ba-range:focus{ outline:none; }
.ba-range:focus-visible ~ .ba-line i{ outline:3px solid var(--sea); outline-offset:2px; }
.ba-badge{ position:absolute; inset-block-end:10px; inset-inline-start:10px; z-index:2;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); background:rgba(244,242,236,.9); border-radius:2px; padding:5px 9px; }
.room-swap .stack{ gap:14px; }
@media(max-width:720px){ .ba{ aspect-ratio:4/5; } .ba-line i{ width:38px; height:38px; } }

/* — for-your-home · the FAQ diagrams (founder 26.7) —————————————————————————
   "Nobody likes getting a page full of letters with no quick understanding."
   One small drawing per answer that CAN be drawn. Strokes only, locked tokens,
   no new claim: every diagram restates a fact the answer already states.
   Pure inline SVG — no library, no request, nothing to fail. */
.dg-fig{ margin:16px 0 4px; }
svg.dg{ width:100%; max-width:340px; height:auto; display:block; overflow:visible; }
.dg-solid,.dg-base,.dg-thin,.dg-arrow,.dg-lead,.dg-floor,.dg-pipe,.dg-heat,.dg-pool,
.dg-ok,.dg-ok-t,.dg-no,.dg-hatch{ fill:none; stroke:var(--oak); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round; }
.dg-base,.dg-thin,.dg-lead,.dg-floor,.dg-hatch{ stroke:var(--line); stroke-width:1; }
.dg-fill{ fill:rgba(122,106,85,.10); }
.dg-pool{ fill:rgba(122,106,85,.18); stroke:var(--oak); }
.dg-dot{ fill:var(--oak); stroke:none; }
.dg-no{ stroke:var(--err-ink); }   /* the locked clay; no literal fallback — an off-palette hex is a design-lock failure */
.dg-heat{ stroke-dasharray:3 3; }
.dg-t{ font-family:var(--sans); font-size:8px; letter-spacing:.06em; text-transform:uppercase;
  fill:var(--ink); stroke:none; }
.dg-mute{ fill:var(--muted); }
html[dir="rtl"] .dg-t{ font-family:'Heebo',sans-serif; letter-spacing:.02em; text-transform:none; font-size:8.5px; }
/* the drawings are direction-neutral by construction; only the label anchors would flip,
   and they are already placed at the two outer edges, so RTL needs no mirror. */
@media (max-width:560px){ svg.dg{ max-width:100%; } }
@media print{ .dg-fig{ break-inside:avoid; } }

/* ══ THE COLLECTION — NINE PAIRS, EIGHTEEN FLOORS ══════════════════════════════
   Founder correction, 2026-07-26, after seeing the first floor live:
     "you use only ONE plank — that is ugly as murder. And I asked for it to be
      longer: join 2 boards top-to-bottom. And you — right side a model, left side
      a model. 2 models. Head joint and 2 storeys. Do a FULL variation of the
      planks, not just one plank. And the way you write the model — I did not like
      it. Write it ONCE, at the side. And do not take over the whole screen with
      the parquet — do it at the normal width we usually use, and at its side
      write the model number, beautifully."

   What this block lays out, therefore:
     · a PAIR per row — two models side by side, so the customer compares instead
       of remembering. The two floors are separated by a 3px shadow gap (.fl-seam),
       which is the CARETTA threshold detail, not a border.
     · TWO STOREYS per column with a real head joint between them. The window is
       1.60 plank-lengths tall and each column is shifted by its own offset, so the
       joint lands at a different height in every column and never twice the same.
     · the name ONCE, on the outer side of each floor, running up the rail, sticky
       so it stays with you while the floor scrolls past. The CODE is the loud part
       — it is what a customer quotes.
     · the whole thing inside .wrap — the site's own content width (--maxw 1200px
       + --gutter). The floor is an element on the page, not the page.

   Four things this file must never do:
     · put a gap between two planks OF THE SAME FLOOR. What separates them is the
       real micro-bevel, baked into all four edges of the calibrated plank.
     · stretch a plank. The aspect ratio comes from the image's own width/height
       attributes — the asset's true 1830x228 / 1830x230 / 1530x228. 211 Rio really
       is the short plank, and here it really shows one more joint than the others.
     · reserve a box from the file. .fl-win gets its height from aspect-ratio and
       every <img> carries width/height, so CLS is 0 by construction.
     · repeat a plank face next to itself. Six real cuts per model are generated
       from the model's own calibrated print; the assignment is proven collision-
       free by tools/build_collections_floor.py before a byte of HTML is written.
   Geometry, offsets, cut assignment and the model order are all generated there;
   the column count and rail width per breakpoint live in floor-cols.css. */

.floorsec{ margin-block-start:clamp(22px,3.5vh,44px); }

/* one row = one pair. align-items:stretch is load-bearing: it is what makes the
   name rail exactly as tall as the floor beside it, which is what lets the sticky
   tag stop at the bottom of its own floor instead of drifting into the next pair. */
.fl-pair{ display:flex; align-items:stretch; margin-block-end:clamp(26px,4.5vh,64px); }
.fl-half{ flex:1 1 0; min-inline-size:0; display:flex; align-items:stretch; column-gap:10px; }
/* the second model mirrors, so each name sits on the OUTER edge of its own floor
   and the two floors meet in the middle. row-reverse (not `direction`) because the
   flow must mirror again on /he — there `row` is already right-to-left, so the
   outer edge stays the outer edge in both languages, with no second rule. */
/* :last-child, NOT `.fl-half + .fl-half` — the .fl-seam divider sits between the two
   halves, so the adjacent-sibling form silently never matches and both names end up
   on the same inner edge. Caught in the browser, not in the head. */
.fl-half:last-child{ flex-direction:row-reverse; }
/* the shadow gap: the two floors are different products and must not read as one
   floor with a colour fault. 3px of ink = the slim reveal we detail in reality. */
.fl-seam{ flex:0 0 3px; background:var(--ink); align-self:stretch; }

.fl-rail{ flex:0 0 var(--rail); }
.fl-stick{ display:block; text-align:center; position:sticky;
  /* the tag parks a quarter of the way down the viewport: high enough to be read
     against the top of a floor, low enough that it is never under the header. */
  top:clamp(96px,25vh,300px); }
/* vertical-rl + rotate(180deg) reads bottom-to-top — the architectural convention
   for an edge label, and the one that survives every browser (sideways-lr does not).
   direction:ltr + isolate: model names and codes are Latin in BOTH languages, and
   left to inherit rtl on /he the vertical inline axis reverses and the same floor
   ends up labelled two different ways. Explicit bidi, on both surfaces. */
.fl-tag{ display:inline-flex; align-items:baseline; gap:.8em;
  writing-mode:vertical-rl; transform:rotate(180deg);
  direction:ltr; unicode-bidi:isolate;
  text-decoration:none; padding-block:8px; }
.fl-tag b{ font-family:var(--serif); font-weight:500; font-size:clamp(19px,1.7vw,25px);
  line-height:1; letter-spacing:.01em; color:var(--ink); }
.fl-tag i{ font-style:normal; font-family:var(--sans); font-weight:500; font-size:10.5px;
  line-height:1; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); }
@media (hover:hover){ .fl-tag:hover i{ color:var(--ink); } }
.fl-tag:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

/* the window onto the floor. Its height is 1.60 reference plank-lengths, expressed
   as an aspect ratio against the column count, so it is known before any image
   loads: cols x plank wide, 12.845 x plank tall  (12.845 = 1.60 x 8.028). */
.fl-win{ flex:1 1 auto; min-inline-size:0; overflow:hidden; background:var(--ink);
  aspect-ratio:calc(var(--cols) / 12.845); }
.fl-grid{ display:grid; grid-template-columns:repeat(var(--cols),1fr); }
/* the head joint. The column is pulled up by --o plank-LENGTHS; a percentage
   translate resolves against the column's own height, which is --n plank-lengths,
   so -100% * o / n is exactly o plank-lengths and needs no container query. */
.fl-col{ min-inline-size:0; transform:translateY(calc(-100% * var(--o) / var(--n))); }
.fl-plank{ display:block; position:relative; overflow:hidden; }
/* -0.5px closes the sub-pixel hairline that fractional plank heights open between
   two stacked images. It costs half a device pixel of bevel and buys a floor with
   no white threads running through it. */
.fl-plank + .fl-plank{ margin-block-start:-0.5px; }
.fl-plank img{ display:block; inline-size:100%; block-size:auto; }

/* hover: the founder asked for a tone lift OR an emphasised seam, never a size
   change. An emphasised seam it is — a colour-locked floor may not have its colour
   touched by a UI state, not even for 200ms. */
.fl-plank::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(244,242,236,0); }
@media (hover:hover){
  .fl-plank:hover{ z-index:2; }
  .fl-plank:hover::after{ box-shadow:inset 0 0 0 1px rgba(244,242,236,.62), inset 0 0 0 3px rgba(14,27,35,.30); }
}
/* A two-tone focus ring, both tones OPAQUE. Measured: a translucent inner ring
   composited to luminance .082 on Sylt and gave 2.99:1 against the wood — WCAG
   1.4.11 wants 3:1 and does not care that it missed by a hundredth. Opaque, the
   pair covers the whole collection: paper carries every floor up to luminance .26
   (Havana and the darks), the deep tone carries everything from .14 up (St Barth
   and the pales). The ring is drawn by ::after, not by `outline`: an inset outline
   was being painted UNDER the <img> that fills the plank and never reached the
   screen. `outline` stays transparent so Windows High Contrast draws its own. */
.fl-plank:focus-visible{ outline:2px solid transparent; outline-offset:2px; z-index:3; }
.fl-plank:focus-visible::after{
  box-shadow:inset 0 0 0 3px rgb(244,242,236), inset 0 0 0 6px rgb(14,27,35); }
@media (prefers-reduced-motion:reduce){ .fl-plank, .fl-plank::after{ transition:none; } }

/* narrow screens: still a pair, still two floors side by side — never a stack,
   never a carousel, and never a horizontal scrollbar. Only the column count and
   the rail get smaller (floor-cols.css), and the rail keeps the same two lines. */
@media (max-width:559px){
  .fl-half{ column-gap:7px; }
  .fl-tag{ gap:.7em; padding-block:6px; }
  .fl-tag i{ font-size:9.5px; letter-spacing:.16em; }
}

.visually-hidden{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* 747 architect-proof pilot — this class is emitted on Capri only. */
.architect-proof{ background:var(--paper); border-block:1px solid var(--line); }
.architect-proof-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); }
.architect-proof-card{ min-inline-size:0; padding:clamp(24px,3vw,42px); background:var(--paper); }
.architect-proof-colour{ display:flex; align-items:center; gap:16px; margin-block:18px 14px; }
.architect-proof-colour > div{ display:grid; gap:3px; }
.architect-proof-colour strong{ font:500 clamp(21px,2vw,29px)/1 var(--serif); letter-spacing:.02em; }
.architect-proof-colour span:not(.architect-proof-swatch){ color:var(--muted); font:500 11px/1.45 var(--sans); letter-spacing:.08em; text-transform:uppercase; }
.architect-proof-swatch{ inline-size:62px; block-size:62px; flex:0 0 62px; border:1px solid rgba(14,27,35,.18); }
.architect-proof-layers{ display:grid; margin-block:18px; border:1px solid var(--line); }
.architect-proof-layers > span{ display:block; padding:7px 12px; border-block-end:1px solid var(--line);
  font:500 10px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; }
.architect-proof-layers > span:nth-child(1){ background:#e8e2d7; }
.architect-proof-layers > span:nth-child(2){ background:#d6c5ad; }
.architect-proof-layers > span:nth-child(3){ background:#ae8558; color:#101010; }
.architect-proof-layers > span:nth-child(4){ padding-block:17px; background:#738083; color:#fff; }
.architect-proof-layers > span:nth-child(5){ background:#b9b7ae; border-block-end:0; }
.architect-proof-links{ display:grid; gap:10px; align-content:start; }
.architect-proof-evidence{ display:grid; margin-block:18px; }
.architect-proof-evidence > div{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:18px; padding-block:10px; border-block-end:1px solid var(--line); }
.architect-proof-evidence dt{ font:500 10px/1.4 var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.architect-proof-evidence dd{ margin:0; font-size:13px; line-height:1.5; }
@media (max-width:760px){
  .architect-proof-grid{ grid-template-columns:1fr; }
  .architect-proof-evidence > div{ grid-template-columns:1fr; gap:3px; }
}
@media print{
  .architect-proof{ break-before:page; }
  .architect-proof-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ── פישבון · עמוד-הכניסה (28.7) ─────────────────────────────────────────
   כרטיס = תצלום-רצפה מלא-רוחב + שלוש עובדות. התצלום הוא הטיעון; הטקסט רק
   מאשר אותו. אין כאן מחיר ואין סופרלטיב — אותה משמעת של עמודי-הדגם. */
.hb-grid{ display:grid; gap:clamp(20px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); margin-top:clamp(24px,4vh,44px); }
.hb-card{ border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--paper); }
.hb-shot{ display:block; aspect-ratio:1/1; overflow:hidden; }
.hb-shot img{ display:block; width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow) var(--e-standard); }
.hb-card:hover .hb-shot img{ transform:scale(1.02); }
@media (prefers-reduced-motion:reduce){ .hb-shot img{ transition:none; }
  .hb-card:hover .hb-shot img{ transform:none; } }
.hb-body{ padding:18px 18px 20px; }
.hb-name{ font-size:19px; font-weight:500; margin:0 0 12px; }
.hb-facts{ margin:0 0 14px; display:grid; gap:7px; }
.hb-facts div{ display:flex; justify-content:space-between; align-items:center; gap:14px;
  border-bottom:1px solid var(--line); padding-bottom:6px; }
.hb-facts dt{ font-family:var(--sans); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); }
.hb-facts dd{ margin:0; font-size:13px; display:flex; align-items:center; gap:8px; }
.hb-sw{ width:13px; height:13px; border-radius:2px; border:1px solid rgba(35,32,32,.22);
  display:inline-block; flex:none; }

/* ── פישבון · הפניה מעמוד-הדגם (29.7) ────────────────────────────────────
   סעיף ולא מתג-בהירו: תמונת-ההירו היא ה-LCP ונטענת מראש, והחלפה שלה ב-JS
   הייתה מבטלת את שיפור ה-500-750 מילישניות שנמדד. כאן הטעינה עצלה. */
/* ⚠️ 29.7 (שני) — הכרעת-מייסד: *"בדף של הפלאנק הפלאנק הוא הסיפור"*. הסעיף
   הזה הוא הפניה, לא פרק. לכן הוא מכווץ: התמונה יורדת מחצי-רוחב לשליש, הכותרת
   יורדת מ-`display` לגודל-סעיף, והריפוד האנכי נחתך. הוא עדיין נראה ועדיין
   מוביל לדף-הפישבון — הוא פשוט מפסיק להתחרות בקרש על תשומת-הלב. */
.hb-cross{ padding-block:clamp(38px,5vw,60px); }
.hb-cross-grid{ display:grid; gap:clamp(18px,3vw,34px); align-items:center;
  grid-template-columns:1fr; }
@media (min-width:820px){ .hb-cross-grid{ grid-template-columns:minmax(0,300px) 1fr; } }
.hb-cross-shot{ border-radius:3px; overflow:hidden; border:1px solid var(--line); }
.hb-cross-shot img{ display:block; width:100%; height:auto; }
.hb-cross-text h2{ font-size:clamp(20px,2.4vw,26px); line-height:1.25; }
.hb-cross-text p.lead{ font-size:14px; line-height:1.7; }

/* ── Navigation Herringbone · דף-המפרט (29.7) ────────────────────────────
   טבלה ורשימת-הגדרות, בלי כרטיסים. המספר שחשוב באמת — הפחת — מקבל את
   הגודל היחיד בעמוד, כי הוא זה שמונע הזמנה בחסר. */
.hbs-facts{ margin:clamp(20px,3vh,32px) 0 0; display:grid; gap:0;
  grid-template-columns:1fr; max-width:56ch; }
.hbs-facts div{ display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; padding:12px 0; border-bottom:1px solid var(--line); }
.hbs-facts dt{ font-family:var(--sans); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); }
.hbs-facts dd{ margin:0; font-size:15px; text-align:end; }
.hbs-big{ font-family:var(--serif); font-size:clamp(46px,8vw,86px); line-height:1;
  margin:clamp(14px,2vh,22px) 0 16px; color:var(--ink); }
.hbs-warn{ margin-top:18px; padding-inline-start:14px; border-inline-start:2px solid var(--sea);
  color:var(--ink-2); font-size:14px; }
.hbs-table{ width:100%; border-collapse:collapse; max-width:64ch; }
.hbs-table th,.hbs-table td{ text-align:start; padding:13px 0; border-bottom:1px solid var(--line);
  font-weight:400; vertical-align:middle; }
.hbs-table th{ font-size:15px; }
.hbs-table td{ font-size:13px; color:var(--muted); }
.hbs-table td .hb-sw{ margin-inline-end:9px; vertical-align:-2px; }

/* ── תת-קולקציית Herringbone · דף-מוצר לדגם (29.7) ────────────────────────
   מראה של עמוד-הדגם, לא שפה חדשה: אותן `.section`, `.band`, `.display`,
   `.kicker` ו-`.link-arrow`. מה שנוסף כאן הוא רק מה שאין לעמוד-הפלנק —
   ההשוואה בין שתי הפריסות, והחלק בגודל אמיתי. */
.hbm-hero .hbm-code{ font-size:.42em; letter-spacing:.14em; color:var(--muted);
  vertical-align:.34em; margin-inline-start:.3em; }
.hbm-shot{ margin:clamp(28px,4vw,52px) auto 0; max-width:1180px; padding-inline:clamp(16px,4vw,40px); }
.hbm-shot img{ display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:3px; }

/* ההשוואה. שני השדות נבנו באותה מידה פיזית (1.5 מ') ובאותו קנה-מידה, ולכן
   הם חייבים להופיע באותו רוחב בדיוק — רוחב שונה היה משקר על היחס ביניהם. */
.hbm-two{ display:grid; gap:clamp(16px,2.6vw,30px); margin-top:clamp(26px,4vw,44px);
  grid-template-columns:1fr; }
@media (min-width:820px){ .hbm-two{ grid-template-columns:1fr 1fr; } }
.hbm-two figure{ margin:0; }
.hbm-two-img{ border:1px solid var(--line); border-radius:3px; overflow:hidden; }
.hbm-two-img img{ display:block; width:100%; height:auto; }
.hbm-two figcaption{ margin-top:10px; }

.hbm-scale{ margin:clamp(20px,3vw,34px) 0 0; }
.hbm-scale svg{ display:block; width:100%; max-width:560px; height:auto; }
.hbm-scale figcaption{ margin-top:8px; }

.hbm-facts{ display:grid; gap:0; margin-top:22px; max-width:760px; }
.hbm-facts > div{ display:grid; grid-template-columns:1fr; gap:2px;
  padding:13px 0; border-top:1px solid var(--line); }
@media (min-width:620px){ .hbm-facts > div{ grid-template-columns:190px 1fr; gap:20px; align-items:baseline; } }
.hbm-facts dt{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.hbm-facts dd{ margin:0; font-size:15px; line-height:1.6; }

.hbm-hex{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:14px; }