/* ==========================================================================
   Website MVP v0.1 — controlled beta preview (internal working draft)
   Zero-dependency stylesheet. No framework, no build step, no webfonts.
   RTL-safe: logical properties only (inline-start/end, block-start/end).
   ========================================================================== */

:root {
  /* Precision Luxury — light monochrome architectural surfaces.
     Near-white paper, graphite ink, no cream, no bronze. The one allowed
     warmth is what the imagery itself carries. */
  /* The same ivory as --paper, as components, because the hero wash needs it
     with an alpha and rgba() cannot take a hex variable. Anything that fades
     paper into transparency must use this, or it stays cream when the palette
     changes underneath it. */
  --paper-rgb: 250, 247, 241;
  --paper: #faf7f1;            /* warm ivory */
  --paper-raised: #fffdf9;     /* warm white */
  --paper-deep: #f3ede2;       /* soft champagne */
  --paper-arch: #efe8db;       /* warm architectural panel */
  --ink: #1b1813;              /* warm deep graphite */
  --ink-soft: #4d473d;
  --muted: #6a645a;         /* AA on every light surface incl. footer --paper-arch #efe8db: 4.81:1 there, >=5.03:1 elsewhere */
  --hairline: #e9e1d4;
  /* Form controls need a visible boundary, which a decorative hairline is not.
     WCAG 1.4.11 asks 3:1 for the edge of a control; --hairline gives 1.21
     against paper and 1.05 against the field fill, so on 2026-08-10 a visitor
     had nothing showing where an input began. Measured now: 3.37 against paper,
     3.55 against the fill. Deliberately the lightest value that clears the bar,
     so the forms keep their quiet look. */
  --field-line: #94856a;
  --accent: #4d473d;           /* warm graphite — structural accent */
  --accent-deep: #2a251d;
  --accent-wash: #f4eddf;      /* warm champagne wash */
  --gold: #9c7c44;             /* muted gold — used sparingly */
  --gold-deep: #7c6234;
  --emerald: #234b40;          /* deep accent — rare */
  --focus: #2b5b8a;
  --danger: #8a3f3f;
  --ok: #3f6a4a;

  /* Selected direction: Century Gothic (CG Refinement 05 — Precision Luxury).
     Local weights 400/700 only; no web license, so the documented geometric
     fallback stack ships instead of a webfont. Hebrew glyphs fall through to
     Segoe UI per-glyph automatically. */
  --font-display: "Century Gothic", "Avant Garde", "URW Gothic", Corbel, "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", -apple-system, "Helvetica Neue", Arial, "Noto Sans Hebrew", sans-serif;
  --font-geo: "Century Gothic", "Avant Garde", "URW Gothic", Corbel, "Segoe UI", system-ui, sans-serif;

  /* Royal lilac — beta banner + primary actions only (founder decision
     2026-07-19). Base pairing #3F245F / #FFFDF9 ≈ 12.7:1. Not a site-wide
     palette change: everything outside those two surfaces keeps its colour. */
  --royal-lilac: #3F245F;
  --royal-lilac-hover: #321B4D;
  --royal-lilac-active: #29133F;
  --royal-lilac-on: #FFFDF9;
  /* Softer than --royal-lilac-on on purpose, and a variable rather than a
     literal so an inverted palette can move it: light text on a light bar
     is what a hardcoded value produced. */
  --beta-bar-ink: #ded3ea;

  --w-max: 1200px;
  --w-narrow: 720px;
  --radius: 2px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--muted); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.skip-link {
  position: absolute; inset-inline-start: -999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 100;
}
.skip-link:focus { inset-inline-start: 0; }

/* --- kicker / small caps: EN only (letter-spacing harms Hebrew) ------- */
.kicker {
  display: block;
  font-size: .74rem;
  font-weight: 400;
  font-family: var(--font-geo);
  color: var(--muted);
  margin-block-end: 1.1rem;
}
:lang(en) .kicker { text-transform: uppercase; letter-spacing: .28em; }
:lang(he) .kicker { letter-spacing: 0; font-size: .9rem; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: .01em; }
h1 { font-size: clamp(1.95rem, 6.7vw, 4rem); overflow-wrap: break-word; }
h2 { font-size: clamp(1.6rem, 4.4vw, 2.5rem); }
h3 { font-size: 1.22rem; }

.lede { font-size: clamp(1.05rem, 1.7vw, 1.22rem); color: var(--ink-soft); max-width: 34em; line-height: 1.7; }

/* ==========================================================================
   Beta ribbon
   ========================================================================== */
.beta-bar {
  background: var(--royal-lilac);
  color: var(--beta-bar-ink);
  font-size: .74rem;
  text-align: center;
  padding: .4rem 1rem;
  line-height: 1.4;
}
.beta-bar strong { color: var(--royal-lilac-on); font-weight: 600; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--hairline);
}
.header-inner {
  max-width: var(--w-max);
  margin-inline: auto;
  padding: .9rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.brand {
  display: flex; align-items: center; gap: .7rem;
  text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.brand-lockup { display: block; color: var(--ink); direction: ltr; min-width: 0; }
.brand-lockup img { width: 225px; max-width: 100%; height: auto; display: block; }
@media (min-width: 880px) { .brand-lockup img { width: 239px; } }
@media (min-width: 1100px) { .brand-lockup img { width: 282px; } }

.nav-toggle {
  display: none;
  margin-inline-start: auto;
  background: none; border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: .5rem .7rem; cursor: pointer; color: var(--ink); font-size: 1rem;
}

/* margin-inline:auto centres the menu in the space left of the lockup, so the
   free space splits evenly on both sides instead of piling up next to the
   logo (the "drifted to the far edge" look, in EN and mirrored in HE). */
.site-nav { margin-inline: auto; display: flex; align-items: center; gap: 1.4rem; }
.site-nav a { text-decoration: none; color: var(--ink); font-size: .95rem; transition: color .18s ease; }
.site-nav a[aria-current="page"] { color: var(--ink); border-block-end: 1px solid var(--accent); }

.lang-switch { font-size: .9rem; color: var(--muted); white-space: nowrap; }
.lang-switch a { text-decoration: none; color: var(--ink-soft); }
.lang-switch .active { color: var(--ink); font-weight: 600; }

/* --- Theme switch --------------------------------------------------------
   The dark theme existed but was reachable only through the accessibility
   panel, which is where someone looks for a disability accommodation, not for
   a preference. It now has its own control, and it is the same switch as the
   panel's "Dark theme" row: one state in localStorage, one sync().

   It sits inside the navigation rather than loose in the header bar. Measured
   at 375px: the header row leaves 21.6px free beside the lockup and the Menu
   button (21.4px in Hebrew), and a 44px target with a gap beside it needs 68.
   At 320px the free space is already zero and the lockup is being squeezed by
   the flexbox. Shrinking the lockup would have made room; it is a brand
   decision, not spare width, so the switch went where there was space.

   The icon shows the state rather than the action -- the sun means the page is
   light -- which is also what aria-pressed says, so the two cannot contradict
   each other. Both are drawn in currentColor, like the accessibility sign on
   the floating button, and neither is a file: no request, no cache question. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .55rem; flex: none;
  inline-size: 32px; block-size: 32px;
  padding: 0;
  background: none; border: none; border-radius: 999px;
  color: var(--ink); cursor: pointer;
  font: inherit;
}
.theme-toggle svg { inline-size: 21px; block-size: 21px; flex: none; }
.theme-toggle:hover { color: var(--ink-soft); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* The label is carried for the mobile menu, where a lone icon in a column of
   words reads as a mistake. On the desktop row the accessible name does the
   same job and the icon stands on its own. */
.theme-toggle-label { display: none; }
.theme-icon-moon { display: none; }
html[data-a11y-dark="1"] .theme-icon-moon { display: block; }
html[data-a11y-dark="1"] .theme-icon-sun { display: none; }

.btn {
  display: inline-block;
  background: var(--royal-lilac); color: var(--royal-lilac-on);
  border: 1px solid var(--royal-lilac);
  padding: .72rem 1.5rem;
  font-size: .95rem; font-family: var(--font-body);
  text-decoration: none; cursor: pointer;
  border-radius: var(--radius);
  transition: background .15s ease;
}
:lang(en) .btn { text-transform: uppercase; letter-spacing: .13em; font-size: .8rem; padding: .85rem 1.7rem; }
:lang(en) .btn-small { font-size: .74rem; padding: .55rem 1.1rem; }
.btn:hover { background: var(--royal-lilac-hover); border-color: var(--royal-lilac-hover); color: var(--royal-lilac-on); }
.btn:active { background: var(--royal-lilac-active); border-color: var(--royal-lilac-active); }
/* Contact's two external routes must not inherit the browser's dark visited
   colour. Scope this to those route cards so ordinary links remain unchanged. */
.contact-routes a.btn,
.contact-routes a.btn:link,
.contact-routes a.btn:visited,
.contact-routes a.btn:hover,
.contact-routes a.btn:focus,
.contact-routes a.btn:focus-visible {
  color: var(--royal-lilac-on);
}
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink-soft);
}
/* Paper rather than white: the rule fills with ink, so the text has to be
   whatever ink is currently the opposite of. Hardcoded white put white on a
   near-white fill the moment the palette inverted. */
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-small { padding: .45rem 1rem; font-size: .88rem; }

@media (max-width: 1024px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    background: var(--paper-raised);
    border-block-end: 1px solid var(--hairline);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: .5rem 1.25rem 1.25rem;
    box-shadow: 0 12px 24px rgba(29, 26, 22, .07);
  }
  /* The menu previously had no animation at all: display:none -> display:flex
     is not animatable, so it simply snapped open. Keeping display as the
     hidden/shown switch preserves the correct closed state (out of the tab
     order, not hit-testable) and the reveal is carried by a keyframe that
     runs when the panel appears. */
  .site-nav.open { display: flex; animation: navReveal .22s ease both; }
  .site-nav a { padding: .8rem 0; border-block-end: 1px solid var(--paper-deep); }
  .site-nav a[aria-current="page"] { border-block-end: 1px solid var(--paper-deep); color: var(--accent-deep); }
  .site-nav .btn { margin-block-start: 1rem; text-align: center; }
  .lang-switch { padding-block: .8rem; }
  /* In the open menu it is a row like any other, so it takes the row's
     padding, rule and alignment -- and its label, because an icon alone in a
     column of words looks like something failed to load. */
  .theme-toggle {
    inline-size: 100%; block-size: auto;
    justify-content: flex-start;
    padding: .8rem 0;
    border-block-end: 1px solid var(--paper-deep);
    border-radius: 0;
    font-size: .95rem;
  }
  .theme-toggle-label { display: inline; }
}

@keyframes navReveal {
  from { opacity: 0; transform: translateY(-.5rem); }
  to   { opacity: 1; transform: none; }
}

/* Respect a reduced-motion preference: the menu still opens and closes, it
   just appears without the slide/fade. */
@media (prefers-reduced-motion: reduce) {
  .site-nav.open { animation: none; }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container { max-width: var(--w-max); margin-inline: auto; padding-inline: 1.25rem; }
.container-narrow { max-width: var(--w-narrow); margin-inline: auto; padding-inline: 1.25rem; }

.section { padding-block: clamp(3.5rem, 9vw, 7rem); }
.section-tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section-alt { background: var(--paper-deep); }
.rule { border: none; border-block-start: 1px solid var(--hairline); max-width: var(--w-max); margin-inline: auto; }

/* ==========================================================================
   Hero
   ========================================================================== */
/* Image-led hero — mobile-first: large art band on top, copy below.
   Desktop: art and copy side by side. Art is a swappable slot (see README). */
/* Mobile: calm copy block on paper first, then the artwork wide below it.
   Desktop: copy left / artwork right, generous and unboxed. */
.hero { background: var(--paper); overflow: hidden; }
.hero-art {
  position: relative;
  margin: 0;
  background: var(--paper-arch);
}
.hero-art img {
  width: 100%;
  height: clamp(300px, 52vh, 480px);
  object-fit: cover;
  object-position: 42% 62%;
  display: block;
}
.hero-body { padding-block: clamp(2.6rem, 8vw, 4rem) clamp(2.4rem, 6vw, 3.2rem); padding-inline: 1.25rem; }
.hero-copy h1 { margin-block-end: 1.1rem; max-width: 13em; }
.hero-copy .lede { margin-block-end: 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.hero-actions .btn { flex: 1 1 auto; text-align: center; }
.hero-caution {
  margin-block-start: 1.6rem; font-size: .85rem; color: var(--muted); max-width: 34em;
  padding-inline-start: .9rem; border-inline-start: 2px solid var(--hairline);
}

@media (min-width: 880px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
    max-width: var(--w-max); margin-inline: auto;
    padding-inline: 1.25rem;
    padding-block: clamp(3rem, 6vw, 5.5rem);
    align-items: center;
  }
  .hero-body { padding-block: 0; padding-inline: 0; }
  .hero-art {
    order: 2; border-radius: var(--radius); overflow: hidden;
    align-self: stretch;
  }
  .hero-art img { height: 100%; min-height: 520px; }
  .hero-actions .btn { flex: 0 0 auto; }
}

/* ==========================================================================
   Steps (how it works)
   ========================================================================== */
.steps {
  display: grid; gap: 1px; background: var(--hairline);
  border-block: 1px solid var(--hairline);
  grid-template-columns: repeat(4, 1fr);
  counter-reset: step;
}
.step { background: var(--paper); padding: 1.8rem 1.4rem 2rem; }
.section-alt .step { background: var(--paper-deep); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem; color: var(--accent);
  margin-block-end: .8rem;
}
.step h2, .step h3 { font-size: 1.08rem; margin-block-end: .5rem; font-family: var(--font-body); font-weight: 600; }
.step p { font-size: .93rem; color: var(--ink-soft); }

@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }

/* The detail belonging to the last step, kept out of it. The cards are cells of
   one grid and the dividers between them are the grid's own background showing
   through 1px gaps, so every card is stretched to the tallest: three sentences
   in step 04 left the other three two-thirds empty and the row stopped reading
   as a sequence. Here the same words cost nothing, and the row is four short
   steps again. */
.steps-note {
  margin-block-start: 1rem;
  max-width: 62ch;
  font-size: .88rem;
  color: var(--muted);
}

/* ==========================================================================
   Feature split / editorial blocks
   ========================================================================== */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.split-media img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.split-copy h2 { margin-block-end: 1rem; }
.split-copy p + p { margin-block-start: .9rem; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* Two-column balance is set at the end of this file, after the section rules
   that would otherwise re-centre these grids. */

.note-list { list-style: none; margin-block-start: 1.4rem; }
.note-list li {
  padding-block: .9rem;
  border-block-start: 1px solid var(--hairline);
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  font-size: .97rem; color: var(--ink-soft);
}
.note-list li::before { content: "◆"; color: var(--accent); font-size: .6rem; line-height: 2.4; }
.note-list strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Callouts
   ========================================================================== */
.callout {
  background: var(--accent-wash);
  border-inline-start: 3px solid var(--accent);
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  font-size: .95rem; color: var(--ink-soft);
  margin-block: 1.5rem;
}
.callout strong { color: var(--ink); }
.callout-plain { background: var(--paper-deep); border-inline-start-color: var(--muted); }

.status-tag {
  display: inline-block;
  font-size: .72rem; font-weight: 600;
  padding: .2rem .6rem; border-radius: 2px;
  background: var(--paper-deep); color: var(--ink-soft);
  border: 1px solid var(--hairline);
  margin-block-end: 1rem;
}
:lang(en) .status-tag { text-transform: uppercase; letter-spacing: .12em; }

/* ==========================================================================
   Page headers
   ========================================================================== */
.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-head h1 { max-width: 16em; margin-block-end: 1rem; }
.page-head .lede { max-width: 38em; }

/* ==========================================================================
   Forms
   ========================================================================== */
.form-shell { max-width: var(--w-narrow); }

/* The optional half of the request form, folded away and closed by default.
   Founder decision 2026-08-10: the five-step wizard hid the form's length
   behind buttons, and someone who only wants to be called back should not have
   to click through four screens to say so. Four required answers stay above the
   button; the other fifteen fields live in here, one line tall until asked for. */
.more-fields {
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  margin-block: 1.4rem;
  background: var(--paper-raised);
}
.more-fields > summary {
  cursor: pointer;
  padding: .85rem 1rem;
  font-weight: 600;
  list-style-position: inside;
}
.more-fields > summary::marker { color: var(--muted); }
.more-fields[open] > summary { border-block-end: 1px solid var(--field-line); }
.more-fields-body { padding: 1rem 1rem 1.4rem; }
.more-fields-body .field:first-child { margin-block-start: 0; }
.form-actions { margin-block-start: 1.6rem; }

fieldset { border: none; padding-block: 1.8rem; border-block-start: 1px solid var(--hairline); }
fieldset:first-of-type { border-block-start: none; padding-block-start: .5rem; }
legend {
  font-family: var(--font-display); font-size: clamp(1.35rem, 4vw, 1.7rem);
  padding-block-end: .5rem;
}
.legend-hint { font-size: .9rem; color: var(--muted); margin-block-end: 1.2rem; }

.field { margin-block-end: 1.25rem; }
.field label { display: block; font-size: .92rem; font-weight: 600; margin-block-end: .4rem; }
.field .hint { display: block; font-size: .84rem; font-weight: 400; color: var(--muted); margin-block-start: .35rem; }
.optional { color: var(--muted); font-weight: 400; font-size: .84rem; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="date"], input[type="number"], select, textarea {
  width: 100%;
  font: inherit; color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--field-line);
  border-radius: var(--radius);
  padding: .7rem .9rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid transparent; box-shadow: 0 0 0 2px var(--accent-wash); }
textarea { min-height: 7rem; resize: vertical; }

.field-row { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

.choice-group { display: flex; flex-wrap: wrap; gap: .6rem; }
.choice {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised);
  padding: .65rem 1.2rem; font-size: .95rem;
}
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.consent-box {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.1rem 1.3rem; margin-block: 1.2rem;
  display: grid; grid-template-columns: auto 1fr; gap: .8rem;
  font-size: .93rem; color: var(--ink-soft);
}
.consent-box input { margin-block-start: .3rem; width: 1.05rem; height: 1.05rem; }
.consent-box .draft-note { display: block; font-size: .8rem; color: var(--muted); margin-block-start: .5rem; }

.form-error { color: var(--danger); font-size: .88rem; margin-block-start: .4rem; display: none; }
.field.invalid .form-error { display: block; }
.field.invalid input, .field.invalid select { border-color: var(--danger); }
.consent-box.invalid { border-color: var(--danger); }
/* The consent message sits beside the consent box rather than inside a
   .field, so it needs its own reveal rule — without this the message stays
   hidden and only the red border signals the problem. */
.consent-box.invalid + .form-error { display: block; }

.form-footer { padding-block: 1.5rem; border-block-start: 1px solid var(--hairline); }
.prototype-note { font-size: .84rem; color: var(--muted); margin-block-start: 1rem; }

[hidden] { display: none !important; }

/* --- success state ---- */
.success-panel { max-width: var(--w-narrow); }
.success-panel h2 { margin-block-end: 1rem; }
.outcome-list { list-style: none; margin-block: 1.2rem; }
.outcome-list li {
  padding: .8rem 0; border-block-start: 1px solid var(--hairline);
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; font-size: .95rem;
}
.outcome-list li::before { content: "—"; color: var(--accent); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: var(--w-narrow); }
.faq-list details { border-block-start: 1px solid var(--hairline); }
.faq-list details:last-child { border-block-end: 1px solid var(--hairline); }
.faq-list summary {
  cursor: pointer; list-style: none;
  padding-block: 1.1rem;
  font-weight: 600; font-size: 1rem;
  display: flex; align-items: baseline; gap: .8rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "+"; color: var(--accent); font-family: var(--font-display); flex: none; }
.faq-list details[open] summary::before { content: "–"; }
.faq-list .answer { padding-block-end: 1.3rem; color: var(--ink-soft); font-size: .97rem; max-width: 60ch; }
.faq-list .answer p + p { margin-block-start: .7rem; }

/* ==========================================================================
   Journal shell
   ========================================================================== */
.journal-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .journal-grid { grid-template-columns: 1fr; } }
.journal-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.8rem 1.5rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.journal-card h2 { font-size: 1.15rem; }
.journal-card p { font-size: .92rem; color: var(--ink-soft); flex: 1; }
.journal-card .status-tag { margin: 0; align-self: start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  border-block-start: 1px solid var(--hairline);
  background: var(--paper-deep);
  padding-block: 2.5rem 2rem;
  font-size: .9rem; color: var(--ink-soft);
}
.footer-grid {
  display: grid; gap: 2rem; grid-template-columns: 2fr 1fr 1fr;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: .82rem; color: var(--muted); margin-block-end: .7rem; font-weight: 600; }
:lang(en) .site-footer h2 { text-transform: uppercase; letter-spacing: .14em; }
.site-footer ul { list-style: none; }
.site-footer li { padding-block: .2rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-legal { margin-block-start: 2rem; padding-block-start: 1.2rem; border-block-start: 1px solid var(--hairline); font-size: .8rem; color: var(--muted); max-width: 70ch; }

/* ==========================================================================
   Floating chat
   ========================================================================== */
/* Floating WhatsApp button. Uses WhatsApp's own brand green (#25D366) with a
   darker shade for hover, so the control is recognisable as WhatsApp rather
   than reading as a generic site button. The white glyph on brand green is
   the standard WhatsApp lockup; WCAG 1.4.11 exempts logotypes from the 3:1
   non-text contrast minimum, so the brand pairing is kept intact. */
/* WhatsApp's own darker palette rather than its light green. The light
   #25D366 gives a white glyph 1.98 against it, where a graphical object
   needs 3.0; the focus ring managed 2.90 against the page and the button
   itself 1.85, so the control was hardest to see when at rest and easiest
   on hover - backwards. Measured 2026-08-03. #128C7E takes the glyph to
   4.14, the button to 3.87 against paper, and the ring to 7.17. */
:root { --wa-accent: #128C7E; --wa-accent-deep: #075E54; }
.wa-fab {
  position: fixed;
  inset-inline-end: clamp(1rem, 3vw, 1.5rem);
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  inline-size: 52px; block-size: 52px;
  background: var(--wa-accent); color: #ffffff;
  border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(29, 26, 22, .25);
  transition: background .18s ease, transform .18s ease;
}
.wa-fab svg { inline-size: 26px; block-size: 26px; flex: none; }
.wa-fab-label { display: none; }
.wa-fab:hover { background: var(--wa-accent-deep); color: #ffffff; transform: translateY(-1px); }
.wa-fab:focus-visible { outline: 3px solid var(--wa-accent-deep); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: background .18s ease; } .wa-fab:hover { transform: none; } }

.chat-fab {
  position: fixed; inset-inline-end: 1.25rem; inset-block-end: 1.25rem; z-index: 60;
  display: flex; align-items: center; gap: .6rem;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 999px;
  padding: .8rem 1.3rem;
  font: inherit; font-size: .92rem;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(29, 26, 22, .25);
}
.chat-fab:hover { background: var(--accent-deep); }

.chat-panel {
  position: fixed; inset-inline-end: 1.25rem; inset-block-end: 5.4rem; z-index: 61;
  width: min(24rem, calc(100vw - 2.5rem));
  max-height: min(34rem, calc(100vh - 8rem));
  display: flex; flex-direction: column;
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: 0 24px 60px rgba(29, 26, 22, .22);
  overflow: hidden;
}
.chat-head {
  padding: .9rem 1.1rem;
  background: var(--ink); color: var(--paper);
  display: flex; align-items: center; gap: .8rem;
}
.chat-head h2 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; flex: 1; }
.chat-head p { font-size: .72rem; color: #b9b1a3; }
.chat-close { background: none; border: none; color: var(--paper); font-size: 1.1rem; cursor: pointer; padding: .2rem .4rem; }

.chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .7rem; }
.chat-msg { max-width: 88%; padding: .6rem .9rem; border-radius: 8px; font-size: .9rem; line-height: 1.5; }
.chat-msg.bot { background: var(--paper-deep); color: var(--ink); align-self: flex-start; }
.chat-msg.user { background: var(--ink); color: var(--paper); align-self: flex-end; }
.chat-msg a { color: var(--accent-deep); }
.chat-msg.bot .chat-route { display: block; margin-block-start: .45rem; font-size: .85rem; }

.chat-topics { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.chat-topic {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 999px;
  font: inherit; font-size: .78rem; color: var(--ink-soft);
  padding: .32rem .75rem; cursor: pointer;
}
.chat-topic:hover { border-color: var(--accent); color: var(--ink); }

.chat-input-row { display: flex; gap: .5rem; padding: .8rem 1rem; border-block-start: 1px solid var(--hairline); }
.chat-input-row input { flex: 1; border: 1px solid var(--hairline); border-radius: 999px; padding: .55rem 1rem; font: inherit; font-size: .9rem; }
.chat-input-row button {
  background: var(--ink); color: var(--paper); border: none; border-radius: 999px;
  padding: .55rem 1.1rem; font: inherit; font-size: .9rem; cursor: pointer;
}
.chat-foot { font-size: .68rem; color: var(--muted); text-align: center; padding: 0 1rem .7rem; }

@media (max-width: 480px) {
  .chat-panel { inset-inline: 1.25rem; width: auto; }
}

/* ==========================================================================
   Interests trio (reference: editorial category storytelling)
   ========================================================================== */
.interest-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .interest-grid { grid-template-columns: 1fr; } }
.interest-card { text-decoration: none; color: var(--ink); display: block; }
.interest-card .card-media { overflow: hidden; border-radius: var(--radius); background: var(--paper-raised); }
.interest-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
}
/* Hover zoom removed sitewide on owner request 2026-07-26: some images zoomed
   and some did not, which read as inconsistent. It could not be equalised the
   other way — the documentary images in .home-visual-media are shown whole,
   with overflow visible and no frame, so scaling them would spill the image
   over adjacent content unless they were cropped into a card, which is what
   their author deliberately avoided. Removing the effect also makes desktop
   match touch devices, where hover does not exist at all. The transitions are
   left in place so restoring this is a one-line change per component. */
.interest-card h3 { margin-block-start: 1.1rem; font-size: 1.2rem; }
.interest-card p { margin-block-start: .35rem; font-size: .93rem; color: var(--ink-soft); }
.interest-note { margin-block-start: 2rem; font-size: .92rem; color: var(--muted); max-width: 52ch; }

/* ==========================================================================
   Education strip — the four Cs (reference: plain-language education)
   ========================================================================== */
.edu-strip {
  display: grid; gap: 1px; background: var(--hairline);
  border-block: 1px solid var(--hairline);
  grid-template-columns: repeat(4, 1fr);
}
.edu-cell { background: var(--paper-deep); padding: 1.7rem 1.4rem 1.9rem; }
.section:not(.section-alt) .edu-cell { background: var(--paper); }
.edu-cell .edu-letter {
  font-family: var(--font-display);
  font-size: 2.1rem; color: var(--accent);
  display: block; margin-block-end: .45rem;
}
.edu-cell h3 { font-size: 1.02rem; font-family: var(--font-body); font-weight: 600; margin-block-end: .4rem; }
.edu-cell p { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 900px) { .edu-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .edu-strip { grid-template-columns: 1fr; } }

/* ==========================================================================
   Journal cards with media
   ========================================================================== */
.journal-card { overflow: hidden; }
.journal-card .card-media {
  margin: -1.8rem -1.5rem 1.2rem;
  overflow: hidden;
}
.journal-card .card-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
}
/* Journal cards are editorial placeholders, not links — no hover zoom, no
   pointer, no interactive affordance until real article pages exist. */
.journal-card, .journal-card * { cursor: default; }

/* refined split media treatment */
.split-media { overflow: hidden; border-radius: var(--radius); }
/* Hover zoom removed — see the note at .interest-card above. */

/* ==========================================================================
   Editorial "starting points" — text-led, replaces generic product-card row
   ========================================================================== */
.starts { max-width: 60rem; }
.start-row {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.3rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-block-start: 1px solid var(--hairline);
}
.start-row:last-of-type { border-block-end: 1px solid var(--hairline); }
.start-index {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--accent);
  line-height: 1.2;
}
.start-row h3 { font-size: 1.3rem; margin-block-end: .3rem; }
.start-row p { color: var(--ink-soft); font-size: .97rem; max-width: 44ch; }
.start-row .start-body { grid-column: 2; }
@media (max-width: 520px) {
  .start-row { grid-template-columns: 1fr; gap: .3rem; }
  .start-row .start-body { grid-column: 1; }
}

/* ==========================================================================
   Progressive request wizard (mobile-first conversational flow)
   ========================================================================== */
.wizard { max-width: var(--w-narrow); }
.wizard-progress { margin-block-end: 1.8rem; }
.wizard-bar {
  height: 4px; background: var(--paper-deep); border-radius: 999px; overflow: hidden;
}
.wizard-bar-fill {
  display: block; height: 100%; width: 20%;
  background: var(--accent); border-radius: 999px;
  transition: width .3s ease;
}
.wizard-count {
  margin-block-start: .7rem; font-size: .82rem; color: var(--muted);
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.wizard-count .wizard-step-label { color: var(--ink-soft); font-weight: 600; }
:lang(en) .wizard-count { text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; }

.step-panel { animation: fadeStep .28s ease; }
.step-panel > fieldset { border-block-start: none; padding-block-start: 0; }
@keyframes fadeStep { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step-panel { animation: none; } }

/* Larger touch-friendly option cards for channel / arrival choices */
.option-list { display: grid; gap: .7rem; }
.option-card {
  position: relative; display: block; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1rem 1.15rem; min-height: 48px;
}
.option-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.option-card .option-title { display: block; font-weight: 600; font-size: 1rem; }
.option-card .option-sub { display: block; font-size: .86rem; color: var(--muted); margin-block-start: .2rem; }
.option-card:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.option-card:has(input:checked) .option-title { color: var(--ink); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.wizard-nav {
  display: flex; gap: .8rem; align-items: center;
  margin-block-start: 2rem; padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--hairline);
}
.wizard-nav .btn { flex: 1 1 auto; text-align: center; }
.wizard-nav .wizard-back {
  flex: 0 0 auto; background: none; border: 1px solid var(--hairline);
  color: var(--ink-soft); cursor: pointer;
}
.wizard-nav .wizard-back:hover { border-color: var(--ink-soft); background: var(--paper-raised); color: var(--ink); }

/* Review step summary */
.review-summary {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised); margin-block: 1.3rem;
}
.review-summary .review-item {
  display: grid; grid-template-columns: 10rem 1fr; gap: .5rem 1rem;
  padding: .85rem 1.15rem; border-block-start: 1px solid var(--hairline);
  font-size: .95rem;
}
.review-summary .review-item:first-child { border-block-start: none; }
.review-summary dt { color: var(--muted); }
.review-summary dd { color: var(--ink); }
.review-summary .review-edit {
  background: none; border: none; color: var(--accent-deep);
  font: inherit; font-size: .84rem; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 520px) {
  .review-summary .review-item { grid-template-columns: 1fr; gap: .15rem; }
}

/* ==========================================================================
   Utility
   ========================================================================== */
.center { text-align: center; }
.mt-1 { margin-block-start: 1rem; }
.mt-2 { margin-block-start: 2rem; }
.max-copy { max-width: 62ch; }
.full-bleed { margin-inline: calc(50% - 50vw); }

/* ==========================================================================
   Photo band — full-width supplied photography with a short editorial intro
   ========================================================================== */
.photo-band { padding-block-start: clamp(3.5rem, 9vw, 7rem); }
.photo-band .band-copy { margin-block-end: clamp(1.8rem, 5vw, 3rem); }
.photo-band .band-copy h2 { margin-block-end: .8rem; max-width: 16em; }
.photo-band .band-copy p { color: var(--ink-soft); max-width: 44em; }
.photo-band .band-copy p + p { margin-block-start: .9rem; }

/* Merged setting block: copy beside the illustrative diamond-trading-hall
   photograph, above the panorama band. The hall image keeps its own oval
   artwork and 700x467 ratio, so it is contained, never cropped or covered. */
.photo-band .band-split { align-items: center; }
.photo-band .band-hall { margin: 0; }
/* Higher specificity than the generic `.photo-band img` band rule below, whose
   fixed height + cover crop would otherwise trim the oval artwork. */
.photo-band .band-hall img {
  display: block;
  inline-size: 100%;
  height: auto;
  aspect-ratio: 700 / 467;
  object-fit: contain;
}
.photo-band figure { margin: 0; }
.photo-band img {
  width: 100%;
  height: clamp(260px, 52vw, 560px);
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

/* ==========================================================================
   Slogan — working secondary line (never fused into the header lockup)
   ========================================================================== */
.slogan {
  font-family: var(--font-geo);
  font-size: .78rem;
  color: var(--muted);
  margin-block-start: 1.4rem;
}
:lang(en) .slogan { text-transform: uppercase; letter-spacing: .24em; }

/* Footer brand block */
.footer-brand { margin-block-end: 1.1rem; color: var(--ink); }
.footer-brand svg { height: 26px; width: auto; display: block; direction: ltr; }
.footer-brand + .slogan { margin-block-start: .9rem; margin-block-end: 1.2rem; }


/* ==========================================================================
   Home service-expansion components (2026-07-12)
   ========================================================================== */

/* Button readability + light variant for dark surfaces */
.btn { font-weight: 600; }
.btn-light { background: #ffffff; color: var(--ink); border: 1px solid #ffffff; }
.btn-light:hover { background: var(--paper-deep); color: var(--ink); }

/* Hero brand lockup with slogan directly under the logo */
.hero-brand { margin-block-end: 1.7rem; }
.hero-lockup { display: block; color: var(--ink); }
.hero-lockup svg { height: 30px; width: auto; display: block; }
.hero-slogan { font-family: var(--font-geo); font-size: .72rem; color: var(--muted); margin-block-start: .55rem; }
:lang(en) .hero-slogan { text-transform: uppercase; letter-spacing: .2em; }
:lang(he) .hero-slogan { letter-spacing: .04em; direction: ltr; }

/* Possible-outcome chips */
.outcome-strip { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.7rem .3rem; }
.outcome-chip { font-size: .82rem; color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--hairline); border-radius: 999px; padding: .38rem .95rem; }
.section-alt .outcome-chip { background: var(--paper); }

/* Fine notes / claims-review note */
.fine-note { font-size: .85rem; color: var(--muted); margin-block-start: 1.1rem; max-width: 48ch; padding-inline-start: .9rem; border-inline-start: 2px solid var(--hairline); }
.claims-note { font-size: .84rem; color: var(--ink-soft); background: var(--accent-wash); border: 1px dashed var(--muted); border-radius: var(--radius); padding: .65rem 1rem; margin-block-end: 1.9rem; max-width: 64ch; }
.claims-note strong { color: var(--ink); letter-spacing: .05em; }

/* Reasons-to-visit feature grid */
.feature-grid { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); grid-template-columns: repeat(3, 1fr); }
.feature-card { background: var(--paper-deep); padding: 1.5rem 1.4rem 1.7rem; }
.section:not(.section-alt) .feature-card { background: var(--paper); }
.feature-card h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; margin-block-end: .4rem; }
.feature-card p { font-size: .92rem; color: var(--ink-soft); }
@media (max-width: 820px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .feature-grid { grid-template-columns: 1fr; } }

/* Custom-design numbered flow */
.flow-list { list-style: none; counter-reset: flow; margin-block: 1.4rem; display: grid; gap: .55rem; }
.flow-list li { counter-increment: flow; display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: baseline; font-size: 1.02rem; color: var(--ink); }
.flow-list li::before { content: counter(flow, decimal-leading-zero); font-family: var(--font-display); color: var(--accent); font-size: .95rem; }
.flow-list li span { padding-block: .3rem; border-block-start: 1px solid var(--hairline); }
.flow-list li:first-child span { border-block-start: none; }

/* Split reverse (image on the far side at desktop) */
@media (min-width: 821px) { .split-reverse .split-media { order: 2; } }

/* 4C education: image + two-column strip */
.edu-split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); align-items: center; }
.edu-figure { margin: 0; overflow: hidden; border-radius: var(--radius); }
.edu-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.edu-strip-2col { grid-template-columns: repeat(2, 1fr); border: 1px solid var(--hairline); }
@media (max-width: 820px) { .edu-split { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .edu-strip-2col { grid-template-columns: 1fr; } }

/* Subtle scroll reveal — only when JS is on and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
  .js .reveal.is-in { opacity: 1; transform: none; }
}


/* Request success — general contact note + internal verify flag */
.contact-note { border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem 1.2rem; margin-block: 1.4rem; font-size: .95rem; color: var(--ink-soft); }
.contact-note strong { color: var(--ink); }
.contact-note a { color: var(--ink); font-weight: 600; }
.contact-label { color: var(--ink); font-weight: 600; }
.internal-flag { margin-block-start: .8rem; font-size: .7rem; letter-spacing: .08em; color: var(--danger); background: #fbeaea; border: 1px dashed var(--danger); border-radius: var(--radius); padding: .32rem .65rem; display: inline-block; }
:lang(en) .internal-flag { text-transform: uppercase; }

/* Latin lockups must always render LTR, even on RTL (he) pages */
.hero-lockup, .hero-lockup svg { direction: ltr; }
.footer-brand, .footer-brand svg { direction: ltr; }

/* ...but that forced LTR also pinned the footer lockup and the Latin slogan to
   the LEFT on Hebrew pages, while the Hebrew copy beneath them sits right —
   so they read as misaligned. Both are pushed back to the column's start edge.
   Physical properties are deliberate here: the elements are inside an
   LTR context, so inline-start would resolve to the wrong side. */
:lang(he) .footer-brand img { margin-left: auto; margin-right: 0; }
:lang(he) .site-footer .slogan { text-align: right; }


/* ==========================================================================
   CURATION PASS (2026-07-12): warm premium refinements
   ========================================================================== */

/* Hero: real photograph, no duplicated logo; slogan as a symmetric brand line */
.hero { background: var(--paper); }
.hero-brand { display: none; }                 /* logo no longer duplicated in hero */
.hero-brandline {
  display: block; font-family: var(--font-geo);
  font-size: .82rem; letter-spacing: .12em; color: var(--gold-deep);
  margin-block-end: 1.1rem; text-transform: uppercase;
}
.hero-art img { object-position: 50% 32%; }    /* keep the tower + sign, not sky */

/* Warm gold hairline used sparingly */
.rule-gold { border: none; border-block-start: 1px solid var(--gold); opacity:.5; max-width: 3rem; margin-block: 1.2rem 1.4rem; }
:lang(he) .hero-brandline { letter-spacing: .06em; }

/* Outcome chips — warm */
.outcome-strip { display:flex; flex-wrap:wrap; gap:.5rem; margin-block: 1.4rem; }
.outcome-chip {
  font-size:.8rem; color: var(--ink-soft); background: var(--paper-raised);
  border:1px solid var(--hairline); border-radius:999px; padding:.4rem .9rem;
}
:lang(en) .outcome-chip { text-transform: uppercase; letter-spacing:.06em; font-size:.72rem; }
.outcome-chip::before { content:"◆"; color: var(--gold); font-size:.55rem; margin-inline-end:.45rem; vertical-align: middle; }

/* Fine notes (claims-safe, quiet) */
.fine-note { font-size:.84rem; color: var(--muted); margin-block-start:1rem; max-width: 44ch; }

/* Feature grid (reasons to visit) — warm cards */
.feature-grid { display:grid; gap:1px; background:var(--hairline); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; grid-template-columns:repeat(3,1fr); margin-block-start:1.6rem; }
.feature-card { background: var(--paper-raised); padding:1.5rem 1.4rem; }
.section-alt .feature-card { background: var(--paper); }
.feature-card h3 { font-size:1.06rem; font-family:var(--font-body); font-weight:600; margin-block-end:.4rem; }
.feature-card p { font-size:.92rem; color:var(--ink-soft); }
@media (max-width:820px){ .feature-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .feature-grid { grid-template-columns:1fr; } }

/* Split reverse + editorial media */
.split-reverse .split-media { order: 2; }
@media (max-width:820px){ .split-reverse .split-media { order: 0; } }

/* Numbered flow list (custom design) */
.flow-list { list-style:none; counter-reset:flow; margin-block:1.2rem; display:flex; flex-wrap:wrap; gap:.5rem .4rem; }
.flow-list li { counter-increment:flow; display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-soft); background:var(--paper-raised); border:1px solid var(--hairline); border-radius:999px; padding:.4rem .9rem; }
.flow-list li::before { content:counter(flow); font-family:var(--font-geo); color:var(--gold-deep); font-size:.8rem; font-weight:700; }
/* The pill rendering above reuses markup styled earlier as a stacked list,
   where `li span` carried a hairline top border. Inside the pills that border
   reads as a stray line through steps 2-4, so it is cleared for this use only
   (the earlier stacked-list rules are left intact). */
.form-shell > .flow-list li span { padding-block: 0; border-block-start: 0; }

/* Custom-design video */
.media-video { position:relative; overflow:hidden; border-radius:var(--radius); background:var(--paper-deep); }
.media-video video { width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:1/1; }
@media (prefers-reduced-motion: reduce){ .media-video video { display:none; } .media-video { background-size:cover; background-position:center; } }

/* Editorial (model) band */
.edu-split { display:grid; gap:clamp(1.4rem,4vw,3rem); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; }
.edu-figure img { width:100%; border-radius:var(--radius); display:block; }
.edu-strip-2col { grid-template-columns:1fr 1fr; }
@media (max-width:820px){ .edu-split { grid-template-columns:1fr; } .edu-strip-2col{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .edu-strip-2col{ grid-template-columns:1fr; } }

.editorial-band { display:grid; gap:clamp(1.4rem,4vw,3rem); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; }
.editorial-band .ed-media img { width:100%; border-radius:var(--radius); display:block; }
@media (max-width:820px){ .editorial-band { grid-template-columns:1fr; } }

/* Social proof (restrained, no caption/claim) */
.proof { display:grid; gap:clamp(1.4rem,4vw,2.6rem); grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:center; }
.proof img { width:100%; border-radius:var(--radius); display:block; }
@media (max-width:820px){ .proof { grid-template-columns:1fr; } }

/* ==========================================================================
   Reveal animation (moderate) + reduced motion
   ========================================================================== */
.js .reveal { opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal { opacity:1 !important; transform:none !important; transition:none; } }

/* ==========================================================================
   Refined footer
   ========================================================================== */
.site-footer { background: var(--paper-arch); }
.footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.2rem; align-items: start; }
/* Footer column headings must read as titles, not as one more link. English
   carries that distinction with uppercase + tracking; Hebrew has no uppercase,
   so it needs weight, size and colour to do the same work. Links below stay
   --ink-soft at .92rem, so the heading now outranks them in both languages. */
.footer-col h2 { font-size:.78rem; color:var(--ink); margin-block-end:.8rem; font-weight:700; }
:lang(en) .footer-col h2 { text-transform:uppercase; letter-spacing:.14em; }
:lang(he) .footer-col h2 { font-size:1.02rem; letter-spacing:0; }
.footer-col ul { list-style:none; }
.footer-col li { padding-block:.28rem; }
.footer-col a { color:var(--ink-soft); text-decoration:none; font-size:.92rem; }
.footer-col a:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.footer-trust {
  margin-block-start: 1.5rem;
  padding-block: 1.15rem 1.35rem;
  border-block: 1px solid var(--hairline);
}
.footer-trust-list {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem 1.6rem;
}
/* Plain statements, not links: these describe the hosting plan's active
   protections and must not read as third-party endorsements. */
.footer-trust-list .trust-item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--ink-soft);
  font-size: .82rem;
}
.footer-trust-list svg {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  color: var(--royal-lilac);
}
.footer-trust-note {
  margin-block-start: .7rem;
  color: var(--muted);
  font-size: .75rem;
  text-align: center;
}
@media (max-width: 520px) {
  .footer-trust-list {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    max-inline-size: 14rem;
    margin-inline: auto;
  }
}
.footer-social { display:flex; gap:.6rem; margin-block-start:1rem; }
.footer-social .soc { display:inline-flex; align-items:center; justify-content:center; width:43px; height:43px; border:1px solid var(--hairline); border-radius:999px; color:var(--ink-soft); background:var(--paper-raised); cursor:default; }
.footer-social .soc svg { width:19px; height:19px; }
/* Facebook is the only live social profile. It reuses the existing button
   accent token, so the footer icon matches the site's primary CTA colour
   without introducing a new visual system. */
.footer-social a.soc {
  color:var(--royal-lilac); cursor:pointer; text-decoration:none;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.footer-social a.soc:hover {
  background:var(--royal-lilac); border-color:var(--royal-lilac);
  color:var(--royal-lilac-on);
}
.footer-social a.soc:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.footer-legal-row { display:flex; flex-wrap:wrap; gap:.4rem 1.1rem; margin-block:1.2rem .4rem; font-size:.82rem; }
.footer-legal-row a { color:var(--muted); text-decoration:none; }
.footer-legal-row a:hover { color:var(--ink-soft); text-decoration:underline; }
.footer-copy { font-size:.82rem; color:var(--muted); }
@media (max-width:720px){ .footer-grid { grid-template-columns:1fr; gap:1.6rem; } }

/* ==========================================================================
   Nav: secondary utility items + clearer CTA
   ========================================================================== */
.site-nav a.nav-secondary { font-size:.88rem; }

/* ==========================================================================
   Floating chat — spacing so it never overlaps CTAs/footer
   ========================================================================== */
.chat-fab { inset-inline-end: clamp(1rem,3vw,1.5rem); inset-block-end: clamp(1rem,3vw,1.5rem); }
@supports (padding: max(0px)) {
  .chat-fab { inset-block-end: max(1rem, env(safe-area-inset-bottom)); }
}
main { padding-block-end: 2rem; }   /* breathing room above footer / fab */

/* ==========================================================================
   COMPREHENSIVE PASS (2026-07-14)
   Accent system, calmer header, hero rebalance, editorial media treatments.
   ========================================================================== */

/* --- Chosen Moment accent tokens (Aurora Spectrum, desaturated for UI).
       Base surfaces stay ivory/graphite/gold; accents cover ≤10% of the UI:
       eyebrow markers, selected states, focus, small educational cues. ----- */
:root {
  --acc-violet: #5b4a9e;
  --acc-sapphire: #3f5cb0;
  --acc-teal: #1f7d6d;
  --aurora-line: linear-gradient(90deg, #6F4DBD, #5A79EF 48%, #2DAA9B);
  --focus: #3f5cb0;
}

/* Eyebrow labels carry a tiny aurora marker — the one recurring accent cue */
.kicker { display: flex; align-items: center; gap: .55rem; }
.kicker::before {
  content: ""; flex: none;
  inline-size: 22px; block-size: 2px; border-radius: 1px;
  background: var(--aurora-line); opacity: .85;
}
.center .kicker, .success-panel .kicker { justify-content: flex-start; }

/* Selected navigation state + restrained hovers */
.site-nav a[aria-current="page"] { color: var(--ink); border-block-end: 1px solid var(--acc-teal); }
a:hover { color: var(--acc-teal); }
/* One consistent response for every ordinary nav label: a single dark default
   that lightens on hover and on keyboard focus. The primary CTA is excluded —
   it keeps its own weight + gold-underline treatment. */
.site-nav a:not(.nav-request):hover,
.site-nav a:not(.nav-request):focus-visible { color: var(--ink-soft); }

/* Nav hover: an underline that grows from the centre and fades in, instead of
   the previous colour-only change. Desktop only — on mobile the nav links
   already carry divider borders, so a second line would read as noise.
   The current page keeps its static border and is excluded, so the two
   indicators never stack. */
@media (min-width: 1025px) {
  .site-nav a { position: relative; }
  .site-nav a:not([aria-current="page"])::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -4px;
    block-size: 1px;
    background: var(--acc-teal);
    opacity: 0;
    transform: scaleX(0);
    transition: transform .24s ease, opacity .24s ease;
  }
  .site-nav a:not([aria-current="page"]):hover::after,
  .site-nav a:not([aria-current="page"]):focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .site-nav a.nav-request:not([aria-current="page"])::after { background: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav a::after { transition: opacity .24s ease; transform: scaleX(1); }
}
.chat-topic:hover { border-color: var(--acc-teal); color: var(--ink); }

/* Calm header request route (replaces the filled header button) */
.site-nav a.nav-request { color: var(--ink); font-weight: 600; }
.site-nav a.nav-request:hover { border-block-end: 1px solid var(--gold); }
@media (max-width: 1024px) {
  .site-nav a.nav-request { border-block-end: 1px solid var(--paper-deep); }
}

/* Keep the desktop nav on one line on 1280-class screens: items never
   wrap internally; gaps, nav type and the lockup tighten slightly at mid
   widths (lockup stays >= 246px — comfortably readable). */
@media (min-width: 1025px) {
  .site-nav a { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: .9rem; }
  .lang-switch { font-size: .84rem; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
  .brand-lockup img { width: 246px; }
}

/* Educational cues: the four Cs each take one restrained accent */
.edu-cell:nth-child(1) .edu-letter { color: var(--acc-violet); }
.edu-cell:nth-child(2) .edu-letter { color: var(--acc-sapphire); }
.edu-cell:nth-child(3) .edu-letter { color: var(--acc-teal); }
.edu-cell:nth-child(4) .edu-letter { color: var(--gold); }

/* --- Hero rebalance: copy leads, the tower supports ---------------------- */
.hero-art img { height: clamp(230px, 44vw, 380px); object-position: 50% 28%; }
@media (min-width: 880px) {
  .hero-inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    padding-block: clamp(2.4rem, 4.5vw, 4rem);
  }
  .hero-art { align-self: center; aspect-ratio: 1 / 1.06; max-block-size: 540px; }
  .hero-art img { height: 100%; min-height: 0; object-position: 50% 30%; }
}

/* --- Static Exchange hero photograph -------------------------------------
   The hero is a single 4:3 landscape photograph whose building sign must stay
   readable end to end. The earlier portrait/near-square framing above would
   crop the sign horizontally, so the image is shown in its own 4:3 ratio at
   every breakpoint: no crop, no rotation, no slideshow. */
.hero-art { aspect-ratio: auto; }
.hero-art picture { display: block; }
.hero-art img {
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}
@media (min-width: 880px) {
  .hero-art { aspect-ratio: auto; max-block-size: none; align-self: center; }
  .hero-art img { height: auto; min-height: 0; aspect-ratio: 4 / 3; object-position: 50% 50%; }
}

/* --- Home intro composition: copy column + supporting media column -------
   Continues the hero's 6fr/5fr rhythm at the same 880px breakpoint, so
   "What Chosen Moment does", the founder portrait and "About Mark" share the
   hero copy's left edge and width instead of floating in a centred narrow
   column, and the Exchange photograph continues the hero's media column.
   Source order is the mobile reading order; desktop placement is grid-only,
   so nothing is duplicated and the section-level .reveal is reused as-is.
   The portrait carries a larger gap above than below, so it reads as part of
   "About Mark" rather than as a trailing element of the block above. */
.intro-inner { display: grid; row-gap: clamp(1rem, 2vw, 1.4rem); }
.intro-portrait { margin: 0; margin-block-start: clamp(1.6rem, 4vw, 2.6rem); }
.intro-portrait img {
  display: block;
  width: 100%;
  max-inline-size: clamp(180px, 30vw, 260px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.intro-media { margin: 0; }
.intro-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

@media (max-width: 879px) {
  /* Single column: the Exchange photograph is a tall 555x986 frame, so cap it
     to an editorial plate instead of a full-column band on tablet. Width-only
     cap — the image is never cropped. */
  .intro-media img { max-inline-size: min(100%, 380px); }
}

@media (min-width: 880px) {
  .intro-inner {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .intro-about { grid-column: 1; grid-row: 1; }
  .intro-portrait { grid-column: 1; grid-row: 2; }
  .intro-aboutmark { grid-column: 1; grid-row: 3; }
  /* Centred across all three copy rows, so the photograph reads as the shared
     setting behind both the service explanation and Mark's role rather than as
     an illustration of the first block alone. Grid alignment only — no fixed
     offsets. */
  .intro-media { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}

/* --- Orientation map card (Request page) --------------------------------- */
.map-card { margin: clamp(1.2rem, 3vw, 1.8rem) 0 0; }
.map-card iframe {
  display: block; inline-size: 100%; block-size: 340px;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-deep);
}
.map-card figcaption {
  margin-block-start: .6rem; font-size: .8rem; color: var(--muted);
}
@media (max-width: 600px) { .map-card iframe { block-size: 260px; } }

/* --- Inline Home CTA + Facebook share ------------------------------------
   The share link reuses the footer's Facebook glyph and the site's lilac
   button accent; no second social network and no tracking pixel. */
.cta-inline { margin-block: clamp(1.6rem, 4vw, 2.6rem); }
.share-row { margin-block: clamp(1.2rem, 3vw, 2rem); }
.fb-share {
  display: inline-flex; align-items: center; gap: .5rem;
  text-decoration: none;
  color: var(--royal-lilac);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .86rem; line-height: 1;
  background: var(--paper-raised);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.fb-share svg { inline-size: 15px; block-size: 15px; flex: none; }
.fb-share:hover { background: var(--royal-lilac); border-color: var(--royal-lilac); color: var(--royal-lilac-on); }
.fb-share:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* --- Journal: clickable cards + essay pages ------------------------------
   The whole card is one link, so the target is the card rather than a small
   text hit-area. Structure ready for future essays: add another
   .journal-card, or a .journal-card--soon which is deliberately NOT a link
   and carries a "Coming soon" tag so it cannot be mistaken for published. */
.journal-card-link { display: block; text-decoration: none; color: inherit; }
.journal-card-link h3 { transition: color .18s ease; }
.journal-card-link:hover h3 { color: var(--acc-teal); }
.journal-card-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.journal-card-link .card-media { overflow: hidden; }
/* Hover zoom removed — see the note at .interest-card above. */
.journal-card--soon { opacity: .72; }
.journal-card--soon .card-media { filter: grayscale(1); }

.essay-hero { margin: 0 0 clamp(1.4rem, 4vw, 2rem); }
.essay-hero img {
  display: block; inline-size: 100%; block-size: auto;
  max-block-size: 420px; object-fit: cover; border-radius: var(--radius);
}
.essay-body { max-inline-size: 68ch; }
.essay-body h2 { margin-block: 1.9rem .6rem; font-size: 1.24rem; }
.essay-body p { margin-block-end: .95rem; }

/* --- About page figures -------------------------------------------------
   The generic .split-media crop is a square cover — wrong for both About
   images. The Exchange photograph (555x986) must be shown IN FULL, sized to
   its block: natural ratio, no crop, so the building and the entrance steps
   stay visible. The portrait returns to the compact editorial size it had in
   the old Home intro (max ~260px), not a half-column plate.

   Two separate things are being undone here, and they were once conflated.

   The square: .split-media img sets aspect-ratio 1 and object-fit cover, so
   the ratio must be overridden or the building is cropped to a square. It is
   overridden with the photograph's own 555/986 rather than with "auto",
   because "auto" discards the ratio the width and height attributes derive
   and leaves the box with no shape at all until the file decodes.

   The collapse: .split-media img is width 100%, which resolves against the
   figure - and the figure was sized to fit its content, which is that same
   image. An image that has not loaded has no intrinsic width, so the figure
   was zero wide, the image was 100% of zero, and any ratio applied to zero is
   still zero. The cap therefore lives on the figure now, giving it a definite
   width that the image can fill. Together these hold the box open at its full
   height before the file arrives; without both, Home jumped 746px on every
   first visit - measured on the live site, document height 15386 -> 16131.

   If this photograph is ever replaced, the ratio below has to move with it. */
.about-figure--place img {
  aspect-ratio: 555 / 986;
  height: auto;
  object-fit: contain;
}
.about-figure--place { justify-self: center; inline-size: min(100%, 420px); }
.about-figure--place img { margin-inline: auto; }
.about-figure--portrait { overflow: visible; }
.about-figure--portrait img {
  max-inline-size: clamp(180px, 30vw, 260px);
  margin-inline: auto;
}

/* --- Home solitaire block ------------------------------------------------
   The square still that opened the page until the district banner replaced
   it on 2026-07-28. It returns below the banner as its own block rather than
   in place of it. Capped at the same 400px the Exchange photograph below it
   already uses, so both pictures take the same three-quarters of their column
   and read as one system. At 540 it filled the column edge to edge while the
   one below left a quarter of it as air, and the pair looked mismatched even
   though their areas were within three percent of each other. */
.ring-section { padding-block: clamp(1rem, 2.5vw, 1.75rem); }
/* The block below it keeps its own rhythm elsewhere on the page; only this
   one junction is tightened, because a light picture block followed by a full
   section opening left 165px of empty page. */
.ring-section + .section { padding-block-start: clamp(1.5rem, 4vw, 3.5rem); }
.ring-split { align-items: center; }
.ring-figure { margin: 0; }
.ring-figure img {
  max-inline-size: min(100%, 400px);
  /* Flush to the outer edge of the container, not centred in the column: the
     Exchange photograph in the section below already sits that way, and two
     pictures one above the other with different left edges read as a slip.
     Logical properties, so right-to-left mirrors it without a second rule. */
  margin-inline-start: auto;
  margin-inline-end: 0;
  border-radius: var(--radius);
}

/* --- Home building section (#what-we-do): CTA below the copy on desktop, and
   BELOW the building photograph on mobile ---------------------------------
   The CTA is a flat child placed AFTER the figure, so the mobile single-column
   flow reads text -> building image -> buttons (never buttons buried in the
   text). On desktop a two-column grid returns the buttons to the copy column;
   fr spacer rows lift the copy/CTA group a touch above centre for a deliberate,
   editorial asymmetry that still stays well below the tower top. */
@media (min-width: 821px) {
  #what-we-do .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 0.8fr) auto auto minmax(0, 1fr);
    grid-template-areas:
      "top  media"
      "copy media"
      "cta  media"
      "bot  media";
    align-items: start;
    column-gap: clamp(2rem, 5vw, 4.5rem);
    row-gap: 0;
  }
  #what-we-do .split-copy { grid-area: copy; }
  #what-we-do .about-figure--place { grid-area: media; align-self: center; }
  #what-we-do .section-actions-block { grid-area: cta; }
}

/* Relocated hero CTA, now living below a section's explanatory text. Mirrors
   the old hero-actions rhythm — inline on desktop, full-width and tappable on
   mobile — and the caution stays directly attached beneath the buttons. */
.section-actions {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: center;
  margin-block-start: 1.6rem;
}
.section-actions .btn { flex: 0 0 auto; text-align: center; }
.section-caution {
  margin-block-start: 1rem; font-size: .85rem; color: var(--muted);
  max-width: 40em; padding-inline-start: .9rem;
  border-inline-start: 2px solid var(--hairline);
}
@media (max-width: 820px) {
  .section-actions .btn { flex: 1 1 auto; }
}

/* Hero copy now ends at the lede (its CTA moved out); drop the trailing gap so
   no empty band is left where the buttons used to be. */
.hero-copy .lede:last-child { margin-block-end: 0; }

/* Custom-design section shows a square (1080x1080) solitaire-ring photograph.
   It uses the standard full-column square .split-media treatment (width:100%,
   aspect-ratio:1, object-fit:cover) so it matches the other Home image/text
   splits (e.g. the loupe and Journal sections) and balances its adjacent copy.
   A 1:1 source in a 1:1 box is shown in full — no crop, no distortion. */

/* Arrival photo: landscape architectural shot shown in its own ratio —
   no square crop that would cut the building signage */
.split-media img.media-landscape { aspect-ratio: auto; }

/* --- Service commitments: quiet benefit strip (claims-safe wording) ------ */
.benefit-strip {
  display: grid; gap: 1.4rem 1.2rem;
  grid-template-columns: repeat(3, 1fr);
  margin-block-start: 1.8rem;
}
@media (max-width: 1000px) { .benefit-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .benefit-strip { grid-template-columns: 1fr; } }
.benefit { display: flex; flex-direction: column; gap: .45rem; padding-block-start: 1rem; border-block-start: 1px solid var(--hairline); }
.benefit-icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 40px; block-size: 40px; flex: none;
  /* No disc and no border: a clean glyph, as in the footer trust row, which is
     where the owner judged these icons read best. The box keeps its 40px so the
     grid rhythm is unchanged. royal-lilac matches the footer icons and gives
     11.07:1 on the page background, against 4.93:1 for the earlier gold-deep.
     Kickers and flow counters stay gold-deep — they are small-caps text, not
     icons. */
  color: var(--royal-lilac);
  margin-block-end: .25rem;
}
/* 36px inside the 40px box keeps the stroke clear of the edge while filling the
   space the disc used to occupy. stroke-width is overridden here rather than in
   the markup so the line keeps the footer's delicate weight at the larger size:
   1.1 in a 24-unit viewBox renders about 1.65px at 36px, close to the footer's
   1.33px at 20px. Scaling the authored 1.5 would render 2.25px and read
   noticeably heavier than the footer. */
.benefit-icon svg { inline-size: 36px; block-size: 36px; stroke-width: 1.1; }
.benefit h3 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; }
.benefit p { font-size: .89rem; color: var(--ink-soft); }
/* Secondary qualifier line (e.g. warranty terms): quieter, still readable */
.benefit .benefit-qualifier { font-size: .84rem; color: var(--muted); margin-block-start: .1rem; }

/* Optional inline consent-style checkbox (e.g. custom-design interest) */
.consent-plain { border: none; background: none; padding: 0; margin-block: .4rem 0; }
.consent-plain .optional { font-weight: 400; }

/* "Not sent" delivery notice: neutral, not celebratory (no false success). */
.success-panel .kicker { color: var(--muted); }

/* Legal / policy documents: readable measure, clear heading rhythm. */
.legal-doc { max-width: 68ch; }
.legal-doc h2 { font-size: 1.15rem; margin-block: 1.6rem .5rem; }
.legal-doc p { color: var(--ink-soft); margin-block-end: .6rem; }
.legal-doc .legal-updated { font-size: .86rem; color: var(--muted); margin-block-end: 1.2rem; }
.legal-doc a { color: var(--ink); text-underline-offset: 2px; }

/* Footer lockup: canonical asset replaces the legacy inline mark */
.footer-brand img { width: 218px; max-width: 100%; height: auto; display: block; }

/* Journal upcoming-topics line */
.journal-topics { margin-block-start: .9rem; font-size: .86rem; color: var(--muted); }

/* --- Diamond shapes: quiet educational gallery --------------------------- */
.shape-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: 1.7rem;
}
@media (min-width: 720px) { .shape-grid { grid-template-columns: repeat(5, 1fr); } }
/* The grid moved off the Home page and into the shapes essay on 2026-08-12. The
   reading column is 623px where the Home container was 1200, which took every
   cell from about 230px down to 112 — small enough that comparing shapes, the
   only reason the grid exists, stops working. It takes the wider measure inside
   an essay while the prose keeps its own. */
@media (min-width: 820px) {
  .essay-body .shape-grid { inline-size: min(920px, calc(100vw - 2.5rem)); }
}
.shape-cell {
  margin: 0; text-align: center;
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised);
  padding: .8rem .8rem .9rem;
  transition: border-color .2s ease;
}
.shape-cell:hover { border-color: var(--acc-teal); }
.shape-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.shape-cell figcaption { margin-block-start: .55rem; font-size: .88rem; font-weight: 600; color: var(--ink); }

/* --- Contact: three equal routes, quiet iconography ---------------------- */
.contact-routes { display: grid; gap: 1.4rem; grid-template-columns: repeat(3, 1fr); margin-block-start: 1.7rem; }
@media (max-width: 900px) { .contact-routes { grid-template-columns: 1fr; } }
.route-card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.7rem 1.5rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.route-card h3 { font-size: 1.12rem; font-family: var(--font-body); font-weight: 600; }
.route-card p { font-size: .93rem; color: var(--ink-soft); }
.route-card p a { font-weight: 600; color: var(--ink); }
.route-icon {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 42px; block-size: 42px; flex: none;
  border: 1px solid var(--hairline); border-radius: 999px;
  background: var(--paper); margin-block-end: .3rem;
}
.route-icon svg { inline-size: 20px; block-size: 20px; }
.contact-routes .route-card:nth-child(1) .route-icon { color: var(--acc-teal); }
.contact-routes .route-card:nth-child(2) .route-icon { color: var(--acc-sapphire); }
.contact-routes .route-card:nth-child(3) .route-icon { color: var(--acc-violet); }
.route-note {
  margin-block-start: auto; padding-block-start: .7rem;
  border-block-start: 1px solid var(--hairline);
  font-size: .8rem !important; color: var(--muted) !important;
}
.route-note .internal-flag { display: block; margin-block-start: .5rem; }

/* --- Exchange panorama: a true edge-to-edge editorial band ---------------
   The source is the approved 1704x768 home-band crop. The figure is outside
   every content container, so width follows the browser without 100vw
   scrollbar overflow. Reveal changes opacity/translateY only; never scale. */
.photo-band { overflow: clip; }
.photo-band figure {
  inline-size: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
.photo-band .band-photo {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 1704 / 768;
  object-fit: contain;
  object-position: 50% 50%;
  margin: 0;
  border: 0;
}

/* --- One movement, every photograph --------------------------------------
   Founder decision: the site should feel a little alive, and feel the same way
   everywhere. Four components already carried `transition: transform .7s` for a
   hover zoom whose rule had been deleted, so they were paying for an animation
   that never ran while every other picture had none. This is that zoom,
   written once and applied to all of them.

   Deliberately small: 1.03 over .7s. The subject is jewellery and the audience
   is frequently over sixty; movement here is a sign of life, not an effect.
   Hover only, because a touch screen has none — on a phone the section reveal
   carries the movement instead — and off entirely under reduced motion.

   Every wrapper listed here clips, or the growing image would push its own
   layout sideways. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .interest-card .card-media,
  .journal-card .card-media,
  .journal-card-link .card-media,
  .split-media,
  .edu-figure,
  .ed-media,
  .shape-cell,
  .band-hall,
  .home-visual-media,
  .proof-media,
  .ring-figure,
  .hero-wide-media { overflow: hidden; }

  .interest-card img,
  .journal-card .card-media img,
  .journal-card-link img,
  .split-media img,
  .edu-figure img,
  .ed-media img,
  .shape-cell img,
  .band-hall img,
  .home-visual-media img,
  .proof-media img,
  .ring-figure img,
  .hero-wide-image { transition: transform .7s ease; }

  .interest-card:hover img,
  .journal-card:hover .card-media img,
  .journal-card-link:hover img,
  .split-media:hover img,
  .edu-figure:hover img,
  .ed-media:hover img,
  .shape-cell:hover img,
  .band-hall:hover img,
  .home-visual-media:hover img,
  .proof-media:hover img,
  .ring-figure:hover img,
  .hero-wide-media:hover .hero-wide-image { transform: scale(1.03); }
}

/* --- Home visual completion: brokers' hall + confirmed showroom ----------
   Both sections reuse the existing section-level .reveal observer.

   There is no longer an exception to the zoom. Founder decision: every image
   on the site moves, the showroom included. It is shown whole at rest —
   object-fit: contain, no crop — and gives up 1.5% at each edge only while a
   pointer is on it. That is a narrower reading of ba31aca than the one that
   stood here: what that commit was protecting was how the picture is
   presented, not a rule that it may never move.

   The earlier wording here also claimed the exception covered the brokers'
   hall. It never did — that figure is .band-hall inside .photo-band, and the
   neutraliser only ever matched .home-visual-media. Both now behave alike,
   which is the point. */
.home-visual-layout {
  direction: ltr;
  align-items: center;
}
.home-visual-copy,
.home-visual-media { min-width: 0; }
.home-visual-copy { direction: ltr; }
:lang(he) .home-visual-copy,
:lang(he) .image-clarification { direction: rtl; text-align: start; }
.home-visual-media {
  margin: 0;
  overflow: hidden;
  border-radius: 0;
}
.home-visual-media img,
.home-visual-media img.media-landscape {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.home-visual-section--showroom .home-visual-media img { aspect-ratio: 1600 / 877; }
.home-visual-section--showroom .home-visual-media img { border-radius: var(--radius); }

/* The trading-hall photograph was removed from this section on 2026-08-15.
   It had been a full-width band with its own layout; the merge of the two
   setting sections dropped it into a column, where it never worked — first
   flush against the note above it, then dominating the column, then standing
   opposite text that describes something else. Three attempts at placing it
   were three ways of arranging the same mismatch, and the founder's call was to
   take it out. Its illustrative-view note went with it: that note exists to
   qualify the photograph, and with no photograph there is nothing to qualify.
   The file stays in the library. */
.image-clarification {
  margin-block-start: .85rem;
  max-width: 48ch;
  padding-inline-start: .85rem;
  border-inline-start: 2px solid var(--hairline);
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.55;
}
.image-clarification span { display: block; }
.image-clarification span + span { margin-block-start: .15rem; }

@media (min-width: 821px) {
  .home-visual-section--showroom .home-visual-layout {
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
  }
  .home-visual-section--showroom .home-visual-media { grid-column: 1; grid-row: 1; }
  .home-visual-section--showroom .home-visual-copy { grid-column: 2; grid-row: 1; }
}

/* --- Brand lockup rendering ----------------------------------------------
   No filter. The lockup is drawn in the colour it is meant to be, and nothing
   here adjusts it afterwards.

   What stood here was `filter: saturate(1.55) contrast(1.16)`, written when the
   mark had three aurora rays and a gold diamond: pale hairlines at header size,
   which the filter lifted. The monochrome decisions of 2026-08-09 and
   2026-08-10 removed every one of those colours — the lockup is now a single
   colour throughout, #14161A on light paper and #F6F2E9 on dark.

   Against a single colour the filter stopped helping and started interfering.
   `saturate` has almost no chroma to act on, but `contrast` drives every
   channel away from mid-grey: by the definition of the CSS filter functions
   #F6F2E9 renders as rgb(255,255,250), clipped on two channels, and #14161A as
   rgb(3,5,10). The warm white was chosen precisely so the mark matches the type
   beside it; the filter was quietly bleaching it to plain white and darkening
   the light-theme mark past the value the founder approved. */

/* ==========================================================================
   Home hero — static solitaire ring image (founder decision 2026-07-23)
   Replaces the neutral ring video in the hero media slot. Single static
   image, no video element, no playback controls, no autoplay. The source is
   square (1080x1080) and shown at its intrinsic 1:1 ratio so the whole ring
   stays visible with no crop, no stretch, and no reserved-background beige.
   ========================================================================== */

/* Screen-reader-only utility (kept for general use). */
.sr-only {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Honeypot field. Hidden by clipping rather than display:none, because the
   crude scrapers this is meant to catch skip anything set to display:none and
   fill everything else. The markup carries aria-hidden and tabindex="-1" to
   keep it away from a screen reader and the keyboard, and autocomplete="off"
   so no browser fills it in for a real visitor.

   It is clipped in place, not pushed off-screen. left:-9999px works in a
   left-to-right document, where the browser does not extend the scrollable area
   backwards past the start edge. In RTL the start edge is on the right, so the
   same offset lands beyond the end and the page grows by 9999px: measured
   2026-08-10 on he/request.html and he/manage.html at scrollWidth 11264 against
   a clientWidth of 1265, while the English pages were unaffected. Introduced by
   the honeypot itself the same day. */
.hp-field {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Centre the still in the media column and clear the legacy picture-hero
   portrait framing (aspect-ratio / max-block-size / stretch) that would
   otherwise crop this square image. */
.hero-art--image {
  background: transparent;
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  max-block-size: none;
  align-self: center;
}

/* The image reserves its exact box before it loads (width/height attributes
   plus aspect-ratio), so it can never shift layout. object-fit: cover on a
   1:1 image inside a 1:1 box performs no crop — the complete ring is
   preserved and nothing is stretched. The class-level scope (.hero-ring-image)
   outranks the legacy `.hero-art img` rules left from the retired picture
   hero, which would otherwise impose their own height, min-height, 4/3 ratio
   and tower-crop object-position on this still. */
.hero-art--image .hero-ring-image {
  display: block;
  inline-size: min(100%, 340px);
  block-size: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;   /* ring centred and complete */
  border-radius: var(--radius);
  background: var(--paper-arch);
}

@media (min-width: 880px) {
  .hero-art--image .hero-ring-image { inline-size: min(100%, 400px); }
}

/* --- Home media calibration ----------------------------------------------
   The hero still and the Exchange photograph below it sat on different
   vertical lines: 35px apart on the left and 15px on the right. Both were
   centred, but in columns of different widths — 495px for the hero media and
   544px for the intro media — so centring could never align them, whatever the
   image width. Both columns do end on the same line, so the two images are
   matched in width and pinned to that shared column end instead. Desktop only:
   below the breakpoint the blocks stack and centring is correct. */
@media (min-width: 880px) {
  .hero-art--image .hero-ring-image { inline-size: min(100%, 400px); justify-self: end; }
  /* The cap and the pinning both sit on the figure now, not on the image
     inside it. The image fills the figure, so its box is definite before the
     file loads; sizing the image and letting the figure shrink to fit was what
     left the box at zero height. justify-self: end is the logical equivalent
     of the margin pair it replaces and mirrors in Hebrew on its own. */
  .about-figure--place {
    inline-size: min(100%, 400px);
    justify-self: end;
  }
}

/* --- Mobile hero order: copy and CTA come before the media ---------------
   The media element is first in the DOM (it is the desktop right-hand
   column), so at narrow widths the order is flipped to lift the primary CTA
   above the fold. Hero spacing only — no layout redesign. */
@media (max-width: 879px) {
  .hero-inner { display: flex; flex-direction: column; }
  .hero-body { order: 1; padding-block: clamp(.9rem, 4vw, 1.8rem) clamp(1.2rem, 4vw, 1.8rem); }
  .hero-art  { order: 2; }
  .hero-brandline { margin-block-end: .5rem; }
  .hero-copy h1 { margin-block-end: .6rem; }
  .hero-copy .lede { margin-block-end: 1.1rem; }
  .hero-caution { margin-block-start: 1rem; }
}

/* --- Corrective patch 1A: EN primary CTA vs chat FAB at tiny viewports ---
   On very small, short screens the English primary button still spans the
   full column and runs under the corner chat button. Trimming its basis by
   4rem clears the FAB without touching button height, typography, the FAB
   itself, or the global .btn rule. EN only (the Hebrew CTA is shorter and
   already clears), and only below 340px wide / 600px tall. */
@media (max-width: 339px) and (max-height: 600px) {
  html:lang(en) .hero-actions .btn:first-child {
    flex: 0 0 calc(100% - 4rem);
  }
}

/* --- Corrective patch 1B: EN ghost CTA vs chat FAB on short viewports ----
   The secondary button sits one row lower than the primary, so on short
   screens it lands in the corner chat button's band. Measured: the overlap
   is driven by viewport HEIGHT, not width — the ghost clears unaided once
   the viewport is at least (ghost bottom + 64px), which is 630px at 339-340
   wide and 608-609px from 345-390 wide. Above 390 wide the copy rewraps and
   the row moves up. Hence the bounds below: they cover every measured EN
   overlap while leaving 360x640 and every larger viewport untouched. Primary
   button, button heights, the FAB and the global .btn rule are unaffected. */
@media (max-width: 390px) and (max-height: 630px) {
  html:lang(en) .hero-actions .btn:nth-child(2) {
    flex: 0 0 calc(100% - 4rem);
  }
}

/* --- Floating chat: keep it clear of the hero CTA on small screens -------
   The pill's text label made it ~110-130px wide, wide enough to sit on top
   of the full-width hero buttons. Below the hero breakpoint it collapses to
   a compact icon button in the corner; the accessible name is preserved via
   aria-label and desktop is unchanged. */
@media (max-width: 879px) {
  .chat-fab-label { display: none; }
  .chat-fab {
    padding: 0;
    inline-size: 48px; block-size: 48px;
    justify-content: center;
    inset-inline-end: 1rem;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
  }
  .chat-fab svg { inline-size: 18px; block-size: 18px; }
}

/* --- Practical tap-target sizing for dense link groups -------------------
   Footer column, footer legal and mobile nav links sat at roughly 20-22px of
   effective height. Padding (not larger type) lifts them to >=24px while the
   list rhythm is trimmed to keep the footer the same overall height. */
.footer-col li { padding-block: .1rem; }
.footer-col a,
.footer-legal-row a {
  display: inline-block;
  padding-block: .32rem;
}
.footer-legal-row { gap: .2rem 1.1rem; }
/* Nav rows: the secondary, consultation and language links measured 20-23px.
   A 24px floor lifts them without touching type size; the tallest sibling is
   already 25px, so the header row height is unchanged. */
.site-nav a { min-block-size: 24px; display: inline-flex; align-items: center; }

/* --- Accessibility controls ----------------------------------------------
   A panel of the site's own rather than a bought overlay. The overlays sold
   for this purpose inject a third party's script and cookies into a site that
   currently loads neither, and the organisations they claim to serve reject
   them: they paint over markup instead of correcting it, and they interfere
   with the assistive software people already use. These four settings are
   small, real, and act on this site's own markup.

   Choices are kept in the browser and re-applied by the inline script in every
   head, before the page paints, so someone who needs larger text never has to
   watch the default appear first. */

/* A percentage on the root scales every rem in the stylesheet at once. */
html[data-a11y-text="1"] { font-size: 112.5%; }
html[data-a11y-text="2"] { font-size: 125%; }

/* AA is already met across the palette. This is for people who need more than
   AA: ink to true black, greys pulled down, hairlines made actually visible. */
html[data-a11y-contrast="1"] {
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --paper-deep: #f2f2f2;
  --paper-arch: #ebebeb;
  --ink: #000000;
  --ink-soft: #1a1a1a;
  --muted: #333333;
  --hairline: #6b6b6b;
  --accent: #1a1a1a;
  --accent-deep: #000000;
}

/* Dark palette. Not a mood: some people cannot read dark-on-light for long,
   and the browser cannot invert a site for them without wrecking the
   photographs. It is the same override shape as higher contrast above - the
   variables change, no component is restyled - so anything built on the
   palette follows, and anything that hardcoded a colour does not. Three such
   places existed and were fixed with this change rather than patched here.

   The lilac inverts rather than darkens. It is used both as a fill with light
   text on it and as a text colour on paper; a light lilac serves both on a
   dark page, where a darker one would disappear into the background in the
   first role and stay unreadable in the second.

   Photographs are deliberately untouched. Dimming them would break the tone
   standard, and a bright photograph on a dark page is what every dark theme
   does. */
html[data-a11y-dark="1"] {
  --paper-rgb: 23, 20, 15;
  --paper: #17140f;
  --paper-raised: #1f1b15;
  --paper-deep: #262118;
  --paper-arch: #2c261b;
  --ink: #f6f2e9;
  --ink-soft: #ddd7c9;
  --muted: #b5ada0;
  --hairline: #4a4438;
  --field-line: #7a7160;   /* 3.81 against dark paper; --hairline gives 1.90 */
  --accent: #ddd7c9;
  --accent-deep: #f6f2e9;
  --accent-wash: #2c261b;
  --gold: #d8b268;
  --gold-deep: #e6c689;
  --emerald: #7cc0aa;
  --focus: #93baf0;
  --danger: #e89696;
  --ok: #8cc79b;
  --royal-lilac: #bda6e6;
  --royal-lilac-hover: #cbb8ee;
  --royal-lilac-active: #a98fd8;
  --royal-lilac-on: #1b1226;
  --beta-bar-ink: #1b1226;
  /* The three editorial accents are mid-tone by design and land at 2.2 to
     2.6 against dark paper, under the 3.0 a large glyph needs. Lightened
     rather than dropped, so the C / C / C lettering keeps its three
     colours. */
  --acc-violet: #a99bdd;
  --acc-sapphire: #8aa8e8;
  --acc-teal: #6ec3b1;
  color-scheme: dark;
}

/* The light-paper lockup is a dark-ink drawing and all but disappears on a
   dark page, so the dark theme swaps in its counterpart through content: url()
   and the markup on forty pages stays as it is. The counterpart is monochrome
   #F6F2E9, the same warm white as the type beside it, by the founder decision
   of 2026-08-10 -- the gold version this comment used to describe no longer
   exists. */
html[data-a11y-dark="1"] .brand-lockup img,
html[data-a11y-dark="1"] .footer-brand img {
  content: url("../img/brand/chosen-moment-lockup-dark.svg?v=20260816f");
  filter: none;
}

/* Both at once is a real combination, not a conflict: someone who needs dark
   may also need more of it. Contrast pushes the dark palette further apart
   instead of dropping back to the light one. */
html[data-a11y-dark="1"][data-a11y-contrast="1"] {
  --paper-rgb: 0, 0, 0;
  --paper: #000000;
  --paper-raised: #000000;
  --paper-deep: #0d0d0d;
  --paper-arch: #141414;
  --ink: #ffffff;
  --ink-soft: #f0f0f0;
  --muted: #d6d6d6;
  --hairline: #7a7a7a;
  --accent: #f0f0f0;
  --accent-deep: #ffffff;
  --accent-wash: #141414;
}

/* Century Gothic is the site's face and it is the worst common case for
   dyslexia: a geometric gothic builds a, o, c, e and d from one circle, so the
   letters that are already confused are drawn to be similar. This swaps all
   three families for the most legible stack that is already on the machine -
   no webfont, no licence, nothing to download - and opens the spacing, which
   is the part the research is actually consistent about. Verdana and Tahoma
   both carry Hebrew, so the Hebrew pages get the same treatment rather than
   falling back mid-sentence. */
html[data-a11y-font="1"] {
  --font-display: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  --font-body: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  --font-geo: Verdana, Tahoma, "Segoe UI", Arial, sans-serif;
  letter-spacing: .012em;
  word-spacing: .06em;
}
/* Century Gothic is set literally in a few places rather than through the
   variables; those have to be caught too or the switch is half applied. */
html[data-a11y-font="1"] h1,
html[data-a11y-font="1"] h2,
html[data-a11y-font="1"] h3,
html[data-a11y-font="1"] .brand,
html[data-a11y-font="1"] .kicker,
html[data-a11y-font="1"] .hero-brandline {
  font-family: var(--font-display);
}
/* The display face is wider per character, so headings that fit on one line in
   Century Gothic can break awkwardly. Letting them wrap is correct; forcing
   them not to is what would clip. */
html[data-a11y-font="1"] .hero-wide-copy .hero-brandline { white-space: normal; }

/* So a link is not signalled by colour alone. */
html[data-a11y-links="1"] main a,
html[data-a11y-links="1"] .site-header a,
html[data-a11y-links="1"] .site-footer a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* What the operating-system preference does, offered to visitors whose system
   is not set that way. */
html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* --- Keeping tappable things out from under the floating buttons ---------
   Both floating buttons are fixed in the bottom corner and the page scrolls
   beneath them, so given enough scrolling any full-width control passes
   underneath. On the live site at 391x844 the Home CTA is 351px wide and the
   buttons take its right 48px: of 45 points sampled inside that button, three
   were answered by a floating button instead — the top-right corner by the
   accessibility panel, the bottom-right by WhatsApp. A tap there opens the
   wrong thing, on the one control the entire page exists to get pressed.

   It also explains why nobody saw it. The middle of the button works, and the
   middle is where a thumb lands; only the corners fail.

   Text passing under a button is harmless — it stays readable and a tap there
   costs nothing. Controls are not harmless. So the reservation is made for
   what can be tapped and the reading column is left as it is. 4.25rem is the
   buttons' own footprint: 52px plus the 1rem they sit in from the edge. */
@media (max-width: 820px) {
  /* Reserved on BOTH edges, not just the end one, and up to 820px rather than
     700. Between those two widths the columns had already stacked while this
     block had not taken effect, so at 768 the buttons sat at the start of the
     line and two of them ran under the floating column. 820 is where the grid
     collapses, so the two now change together. Putting 4.25rem on the end
     alone did keep the floating buttons off the tap target, and it also pushed
     every button off centre -- measured at 375px: 20px of margin on one side
     against 88 on the other, which the founder saw immediately as buttons
     sitting left of centre. The same protection, symmetrical: the button keeps
     the middle of the page and cannot reach the column the floating buttons
     occupy, whichever edge that column is on in RTL.

     Width comes from the content rather than from a cap. Capping it at
     100% - 8.5rem was the first attempt and it broke at 320px: the container is
     280 there, so the cap left 144px and every button on the page wrapped onto
     two lines. A centred button sized to its own text is 181px wide, which ends
     at 250 on a 320px screen while the floating column starts at 252 -- it does
     not need a cap to stay clear of it. */
  .btn {
    inline-size: fit-content;
    margin-inline: auto;
  }
  /* Buttons inside a flex row ignore both of those: .hero-actions stretches its
     children with flex-grow, which is how two of them stayed 280px wide and ran
     under the floating column at 320px even after the rule above. Centre the row
     and let the buttons keep their own width. */
  .hero-actions,
  .section-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  .hero-actions .btn,
  .section-actions .btn { flex-grow: 0; }
}

/* At 320px the longest label — "See How It Works" — still measured 201px and
   ended at 261, nine pixels inside the floating column that starts at 252. The
   fix is the button's own padding rather than a width cap: capping it would
   wrap the label onto two lines, which is what the first attempt at all of this
   did. Narrower padding keeps one line and clears the column. */
@media (max-width: 360px) {
  .btn,
  :lang(en) .btn { padding-inline: 1rem; }
  /* Already reserved by the shell around it; twice would be visible, and the
     form's own button belongs at the start of its row rather than centred. */
  .form-shell { padding-inline-end: calc(4.25rem + 1.25rem); }
  .form-shell .btn { margin-inline: 0; max-inline-size: none; }
}

/* Sits directly above the WhatsApp button, same size and column. */
.a11y-fab {
  position: fixed;
  inset-inline-end: clamp(1rem, 3vw, 1.5rem);
  inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 3.9rem);
  z-index: 60;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 52px; block-size: 52px;
  background: var(--ink); color: var(--paper);
  border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 28px rgba(29, 26, 22, .25);
  transition: background .18s ease, transform .18s ease;
}
.a11y-fab svg { inline-size: 28px; block-size: 28px; flex: none; }
.a11y-fab:hover { background: var(--accent-deep); transform: translateY(-1px); }
.a11y-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .a11y-fab { transition: background .18s ease; }
  .a11y-fab:hover { transform: none; }
}

.a11y-panel {
  position: fixed;
  inset-inline-end: clamp(1rem, 3vw, 1.5rem);
  inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 7.6rem);
  z-index: 62;
  inline-size: min(21rem, calc(100vw - 2.5rem));
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 6px;
  box-shadow: 0 24px 60px rgba(29, 26, 22, .22);
  padding: 1rem 1.1rem 1.1rem;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: 1rem; margin: 0 0 .15rem; }
.a11y-panel .a11y-note { font-size: .82rem; color: var(--muted); margin: 0 0 .7rem; }
.a11y-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding-block: .5rem; border-block-start: 1px solid var(--hairline);
}
.a11y-row:first-of-type { border-block-start: none; }
.a11y-row > span { font-size: .9rem; }
.a11y-btns { display: inline-flex; gap: .3rem; flex: none; }
.a11y-btns button, .a11y-toggle {
  font: inherit; font-size: .85rem; line-height: 1.2;
  padding: .35rem .65rem; min-inline-size: 2.5rem; min-block-size: 2rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 4px; cursor: pointer;
}
.a11y-btns button[aria-pressed="true"], .a11y-toggle[aria-pressed="true"] {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.a11y-btns button:focus-visible,
.a11y-toggle:focus-visible,
.a11y-close:focus-visible,
.a11y-reset:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.a11y-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin-block-start: .9rem;
}
.a11y-foot a { font-size: .85rem; }
.a11y-reset {
  font: inherit; font-size: .85rem; padding: 0;
  background: none; border: none; color: var(--muted);
  text-decoration: underline; cursor: pointer;
}
/* A way out that is visible, not only remembered. Escape has always closed this
   panel, but Escape is knowledge; a button is a thing you can find. Sized to the
   24px minimum target rather than to the footer's other text, because the people
   most likely to need it are the least likely to hit a small one. */
.a11y-close {
  font: inherit; font-size: .85rem; font-weight: 600;
  min-block-size: 24px; padding: .2rem .6rem;
  background: none; border: 1px solid var(--hairline); border-radius: 999px;
  color: var(--ink); cursor: pointer;
}
.a11y-close:hover { border-color: var(--accent); }

/* --- Phone: country code beside the number -------------------------------
   The code is a control of its own, so it gets its own box rather than a
   prefix glued to the input. On a narrow screen the two stack instead of
   squeezing: a 240-entry select and a phone field cannot share 375px and stay
   tappable, and the number is what most visitors are typing.

   The list is left-to-right even in Hebrew, because a dialling code is a
   number and reads the same everywhere -- the same reason the phone input
   already carries dir="ltr" on the Hebrew pages. */
.phone-row {
  display: flex; gap: .5rem; align-items: stretch;
}
.phone-row select {
  flex: 0 1 42%; min-width: 0; direction: ltr;
}
.phone-row input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) {
  .phone-row { flex-direction: column; }
  .phone-row select { flex: none; width: 100%; }
}
/* What will actually be dialled, shown back before it is sent. This is the
   whole point of the control: an error the visitor cannot see is an error they
   cannot fix. */
.phone-echo {
  display: none;
  margin-block-start: .4rem;
  font-size: .88rem; color: var(--ink-soft);
  direction: ltr; text-align: start;
}
:lang(he) .phone-echo { text-align: start; }


/* --- Home banner: one wide image, the words standing on its quiet side ----
   The artwork is drawn with its left third left empty on purpose, so the
   headline sits on the picture instead of beside it. Below the breakpoint that
   third is far too narrow to hold readable type, so the two simply stack and
   the frame tightens onto the part of the picture that has something in it.

   The picture is never mirrored, in either language. The empty part of it is on
   the left, so the copy sits on the left on the Hebrew pages too: the block is
   pinned to the physical left edge with an auto right margin, which lands in
   the same place whichever direction the text runs. The Hebrew lines keep their
   own right-to-left alignment inside that block.

   The words stay words. A banner with its text baked in would have been
   simpler to place and worse in four ways at once: untranslatable on a site
   that is half Hebrew, invisible to search engines and to screen readers,
   immune to the text-size control in the accessibility panel, and reduced to
   about three pixels of body copy on a phone. */
.hero--wide { position: relative; background: var(--paper); overflow: hidden; }
.hero-wide-inner { position: relative; }
.hero-wide-media { display: block; }
.hero-wide-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1800 / 811;
  object-fit: cover;
  object-position: 60% 50%;
}

.hero-wide-copy { padding-block: 1.9rem 2.4rem; }
/* Smaller than the site's other h1 on purpose. At the usual size the Hebrew
   headline needs more width than the quiet part of the picture has, and it
   broke across two lines for the sake of three words. */
.hero-wide-copy h1 { margin-block-end: 1rem; font-size: clamp(1.85rem, 3.1vw, 2.9rem); }
.hero-wide-copy .lede { margin-block-end: .9rem; }
.hero-wide-copy .hero-support {
  margin-block: 0 1.6rem;
  color: var(--ink-soft); font-size: .95rem; max-inline-size: 38ch;
}
.hero-wide-copy .hero-actions { margin: 0; }

/* Narrow: the empty third would eat half the band for nothing, so the crop
   moves onto the complex and the copy sits underneath on plain paper. */
@media (max-width: 879.98px) {
  .hero-wide-image { aspect-ratio: 3 / 2; object-position: 76% 50%; }
}

@media (min-width: 880px) {
  /* A wash from the paper colour into nothing, so the type keeps its contrast
     at the narrow end of the range where the trees creep leftward. */
  /* The wash carries the copy over the photograph. Its reach is a contrast
     decision, not a taste one: measured pixel by pixel under both lines, the
     previous 0.88/26%/56% left the supporting paragraph at 3.54 against a dark
     patch of the picture at 900px, and the slogan at 4.45 — both under the 4.5
     that normal text needs. The figures recorded beside the two colours below
     (3.91 and 4.13) were measured against the banner this hero used before
     v3 replaced it.

     0.90/36%/62% is the smallest change that clears the threshold everywhere it
     applies: worst case 5.21 and 5.18 at 880px, 5.34 and 6.15 at 900, 5.77 and
     7.95 at 1440, 5.88 and 7.67 at 1920. The photograph is still uncovered
     across the right half, which is the part of the frame it is there for.
     Founder decision 2026-08-10, choosing this over darkening the two colours,
     which would have cost the slogan its gold. */
  .hero--wide::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to right,
      var(--paper) 0%, rgba(var(--paper-rgb), 0.90) 36%, rgba(var(--paper-rgb), 0) 62%);
  }
  .hero-wide-copy {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center;
    padding: 0; pointer-events: none;
  }
  .hero-wide-copy .container { inline-size: 100%; }
  /* One width for every line, not a max per element. With different widths the
     right-hand edges drift apart on the Hebrew page, because right-to-left text
     aligns to the edge of its own box: the headline sat two centimetres left of
     the paragraph under it. Physical margins on purpose, too - the quiet part
     of the picture is on the left in both languages, so the block has to ignore
     the reading direction. */
  .hero-wide-copy .hero-brandline,
  .hero-wide-copy h1,
  .hero-wide-copy .lede,
  .hero-wide-copy .hero-support,
  .hero-wide-copy .hero-actions {
    inline-size: min(31.5rem, 44%);
    max-inline-size: none;
    margin-left: 0; margin-right: auto;
  }
  /* The slogan is one line. Broken across two it stops reading as a mark. */
  .hero-wide-copy .hero-brandline { white-space: nowrap; }
  /* A deeper gold than --gold-deep, and only here: the slogan is small text in
     the lightest colour on the block, so it needed the extra depth even before
     the wash was widened. The overlay only exists above this breakpoint; below
     it the line sits on plain paper and keeps the site's ordinary gold.
     Re-measured 2026-08-10 against the current banner and the 0.90/36%/62%
     wash: worst case 5.21 at 880px and 5.77 at 1440. SUPERSEDED 2026-08-10:
     "3.91 at 900px and 4.26 at 1440" — those were measured against the previous
     banner image and before the wash was corrected. */
  .hero-wide-copy .hero-brandline { color: #6b542d; }
  /* Same reasoning one line down. --ink-soft carries this paragraph everywhere
     else on the site against paper, where it is comfortable; over the
     photograph it needs the extra depth. Scoped to the overlay for the same
     reason as the slogan. Re-measured 2026-08-10 with the widened wash: worst
     case 5.18 at 880px and 7.95 at 1440. SUPERSEDED 2026-08-10: "4.13 at 900px
     and 4.18 at 1440 in its worst pixels" — the wash, not the colour, was what
     had to change, because over a picture this bright the left end of the line
     and the right end need opposite inks. */
  .hero-wide-copy .hero-support { color: #443e36; }
  :lang(he) .hero-wide-copy .hero-brandline { text-align: right; }
  /* flex-start already means "the edge the text starts from" in both
     directions, so the button lands under the first character either way. */
  .hero-wide-copy .hero-actions { pointer-events: auto; display: flex; justify-content: flex-start; }
  .hero-wide-copy .hero-actions .btn { flex: 0 0 auto; }

  /* Dark theme, same two lines. The colours above are literals chosen against a
     light wash over a bright photograph, and the dark palette cannot reach them:
     they are hard-coded, so --paper going dark left graphite text on a dark
     page. Measured on this build: 2.56 and 1.74 against 4.5.

     Recolouring alone does not fix it, because the background under one line is
     not one colour. The wash is opaque at the left edge and fully transparent by
     56%, and the photograph it uncovers is bright here - luminance median 0.70
     under the slogan and 0.74 under the paragraph, peaking near white. So the
     left end of the line needs light text and the right end needs dark text, and
     no single colour satisfies both: the requirement is L >= 0.34 on the left
     and L <= 0.07 on the right.

     The fix is therefore the wash, not just the ink. In dark mode it stays
     effectively opaque past the end of the text - which runs to 45% of the hero
     - and releases the photograph afterwards, so both lines sit on a known
     background and the palette's own tokens carry them. The light theme is
     untouched. */
  /* Softened 2026-08-12, founder: the transition read as a hard edge in dark
     mode. It was two straight segments meeting at 46% -- almost flat to there,
     then a plunge to nothing across 26% -- and an eye reads the corner, not the
     slope. Measured as the largest jump in gradient slope, that corner was 3.62;
     the stops below approximate a curve and bring it to 1.06, three and a half
     times gentler, with the plunge at the end (3.62 -> 0 at 72%) removed too.

     Why the text is safe. The furthest any line reaches is 45.8% of the hero, at
     1920 -- 43.5% at 880 and 43.7% at 1280 -- so 0.94 at 46% is the figure that
     protects it, and it is unchanged. Everywhere left of that the new curve is
     at or above the old one, so no pixel under any line got lighter. Measured
     per pixel at 1920: slogan 8.39 -> 8.57, h1 14.53 -> 14.70, lede 11.18
     unchanged, supporting line 11.30 -> 11.31. All above 4.5.

     What it costs, deliberately. Smoothness and openness pull against each
     other: with the left end pinned by the text, a gentler curve can only be had
     by releasing the photograph later. The wash now reads 0.70 at 60% and 0.36
     at 72% where it read 0.43 and 0, so the right of the frame carries a thin
     veil it did not carry before. It clears by 89%. */
  html[data-a11y-dark="1"] .hero--wide::after {
    background: linear-gradient(to right,
      var(--paper) 0%,
      rgba(var(--paper-rgb), 0.98) 28%,
      rgba(var(--paper-rgb), 0.94) 46%,
      rgba(var(--paper-rgb), 0.85) 53%,
      rgba(var(--paper-rgb), 0.70) 60%,
      rgba(var(--paper-rgb), 0.50) 67%,
      rgba(var(--paper-rgb), 0.30) 74%,
      rgba(var(--paper-rgb), 0.14) 80%,
      rgba(var(--paper-rgb), 0.04) 85%,
      rgba(var(--paper-rgb), 0) 89%);
  }
  html[data-a11y-dark="1"] .hero-wide-copy .hero-brandline { color: var(--gold); }
  html[data-a11y-dark="1"] .hero-wide-copy .hero-support { color: var(--ink-soft); }
}

/* ==========================================================================
   Two-column balance — last in the file on purpose
   ==========================================================================
   Measured on the Home page at 1280 on 2026-08-15, after the founder said the
   pictures were too large for the text beside them. He was right, and it was
   systematic: every two-column section carried a picture between 1.3 and 2.5
   times the height of its copy, and not one had its edges aligned. The worst
   was 2.46 — a 695px photograph beside 283px of text.

   Two causes, two fixes. The pictures are square at full column width, so a
   548px column makes a 548px picture however short the text is; they are
   capped here, cropped from slightly above centre so that faces and subjects
   keep their heads rather than losing them to a centred crop. And the columns
   were centred, which spread the surplus above AND below the shorter one;
   starting them on the same line collects whatever is left in one place, at
   the bottom, where it reads as margin instead of as a mistake.

   This block sits at the end because .ring-split (line ~1458) and
   .editorial-band (~1072) set align-items: center themselves. At equal
   specificity the later rule wins, so an earlier block was silently overridden
   for exactly those two sections — which is how the first attempt left the
   2.46 case untouched while appearing to work everywhere else.

   Not applied below 821px, where the columns stack and the question does not
   arise. */
@media (min-width: 821px) {
  .split { align-items: start; }

  /* The ring section is the exception, by the founder's eye on 2026-08-15. Its
     copy is the shortest on the page -- 205px against a 400px photograph -- and
     starting both at the top left the picture hanging below the text with
     nothing beside it. Two lines of type against a square plate want a common
     centre line, not a common top edge. Aligning to the top is right where the
     copy is substantial enough to hold its side of the row; here it is not. */
  .ring-split { align-items: center; }

  /* The editorial band joins that exception on 2026-09-01, for the same reason
     and more sharply. Its copy is four lines; the photograph beside it became a
     2:3 portrait that day -- 1320px of picture against roughly 200px of text.
     Starting both at the top left the copy stranded in the upper corner with a
     column of empty paper beneath it, which is the failure this whole block was
     written to remove. Here aligning tops causes it rather than curing it.
     SUPERSEDED 2026-09-01, for .editorial-band only: `align-items: start`. */
  .editorial-band { align-items: center; }

  /* The editorial-band photograph is not capped. It is a portrait of a person
     wearing the pieces the section is about, and a 460px cover crop took the
     lower third — the ring and the end of the necklace — out of the frame.
     Founder, 2026-08-15, the second photograph to come back from this cap after
     the Exchange building. The cap suits a square editorial plate and nothing
     else; if a third one needs exempting, the cap is the wrong tool. */
  .split-media img,
  .ring-figure img {
    max-block-size: 460px;
    object-fit: cover;
    object-position: 50% 35%;
  }
}

/* Exempt from the cap above, and restored to what they were on 2026-08-15 when
   the founder saw the Exchange photograph cropped. Both are shown whole by
   earlier decisions that the cap would otherwise undo: the Exchange building
   with its entrance steps (555x986, contain, see "About page figures"), and the
   showroom interior. A cap plus cover is right for a square editorial plate and
   wrong for a portrait of a building — it takes the top off it. */
@media (min-width: 821px) {
  .about-figure--place img {
    max-block-size: none;
    object-fit: contain;
    aspect-ratio: 555 / 986;
  }
  .home-visual-media img,
  .home-visual-media img.media-landscape {
    max-block-size: none;
    object-fit: contain;
  }
}

/* ==========================================================================
   One left edge per page
   ==========================================================================
   The site has two containers — 1200px and 720px — and both were centred. That
   is fine while a page uses one of them, and visible the moment a page uses
   both: their left edges land 240px apart at 1280, so a heading sits at 52 and
   the block below it at 292. On Contact that put "Planning a visit?" and its
   button a quarter of the way across the page while everything above them
   started at the margin; on Manage, six elements sat at 53 and one at 293. The
   founder read it as the buttons being out of line with each other, which is
   exactly what it was.

   The narrow column now starts where the wide one starts and keeps its reading
   width by ending sooner. Below 1240px there is no surplus to distribute and
   the two edges already coincide, so the rule does not apply there. */
@media (min-width: 1240px) {
  .container-narrow {
    margin-inline-start: calc((100% - var(--w-max)) / 2);
    margin-inline-end: auto;
  }
  /* Except when the block centres its own contents. A closing "Ready to plan a
     visit?" centres its heading and button on purpose; moving the box to the
     left margin centred them inside the left two-thirds of the screen, which
     looks like a mistake rather than a decision. Those stay centred. */
  .container-narrow.center { margin-inline: auto; }
}

/* A closing note that belongs to a whole section, not to one cell of it. At the
   default 44ch it measured 319px — near enough a grid column that it read as
   part of "Resizing & aftercare" directly above it, which is where the founder
   found it on 2026-08-15. Given the full width it reads as what it is. */
.fine-note--wide { max-width: none; }

/* ==========================================================================
   Journal list
   ==========================================================================
   A block that asks for an address and promises one thing: a note when an essay
   appears. It sits on the Journal and on the essays, where a reader has just
   finished something, and nowhere else — a subscription beside the visit
   request competes with it for the same gesture, and the Home page spent this
   week losing exactly that kind of competition.

   Deliberately quiet: no panel, no accent fill, nothing that reads as a
   promotion. It is a footnote with a field in it. */
.journal-signup-section { border-block-start: 1px solid var(--hairline); }
.jrn-form { margin-block-start: 1.2rem; max-inline-size: 30rem; }
.jrn-row { display: flex; flex-direction: column; gap: .35rem; }
.jrn-label { font-size: .9rem; color: var(--ink-soft); }
.jrn-form input[type="email"] {
  font: inherit; font-size: 1rem;
  padding: .6rem .75rem;
  background: var(--paper-raised); color: var(--ink);
  border: 1px solid var(--field-line); border-radius: var(--radius);
  inline-size: 100%;
}
.jrn-form input[type="email"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The checkbox is small; the label around it is the target, as on the request
   form, so the whole line is clickable rather than a 17px box. */
.jrn-consent {
  display: flex; align-items: flex-start; gap: .6rem;
  margin-block-start: .9rem;
  font-size: .9rem; color: var(--ink-soft); line-height: 1.5;
  cursor: pointer;
}
.jrn-consent input { margin-block-start: .25rem; flex: none; }
.jrn-form .btn { margin-block-start: 1rem; }
.jrn-notice { margin-block-start: .8rem; font-size: .9rem; }
.jrn-notice--error { color: var(--danger); }
.jrn-notice--ok { color: var(--ok); font-size: 1rem; }

/* --- Was this useful ------------------------------------------------------
   Deliberately small and unemphatic. It is a question at the end of a text, not
   a call to action competing with the visit request; if it draws the eye more
   than the essay did, it is wrong. */
.useful-ask { margin-block-start: 2rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--hairline); }
.useful-q { font-size: .95rem; color: var(--ink-soft); margin-block-end: .7rem; }
.useful-buttons { display: flex; gap: .6rem; }
.useful-note { margin-block-start: .7rem; font-size: .9rem; color: var(--muted); }
.useful-note--ok { margin-block-start: 2rem; padding-block-start: 1.4rem; border-block-start: 1px solid var(--hairline); color: var(--ok); }

/* --- One reading order when the columns stack ----------------------------
   Below 820px a two-column section becomes one column, and the order is
   whatever the source happens to be. On Home that produced two sections out of
   six leading with a photograph while the other four led with their heading —
   the founder saw it on the Journal block on 2026-08-16 and it was true of the
   showroom block too.

   Reading order is now the same everywhere: heading and text, then the picture
   that illustrates them. A photograph above the heading it belongs to is an
   illustration of nothing yet. */
@media (max-width: 820px) {
  .split-copy,
  .ed-copy,
  .home-visual-copy { order: 1; }
  .split-media,
  .ed-media,
  .home-visual-media,
  .ring-figure { order: 2; }
}

/* --- Pictures that lead where their section leads -------------------------
   A block that offers a link to another page now lets its photograph carry the
   same link — founder, 2026-08-16. On a phone the picture is the largest thing
   in the section and the most natural thing to press.

   tabindex="-1" on the wrapper, deliberately. The text link beside it goes to
   the same place, and two adjacent stops on one destination is noise in the tab
   order. The mouse and the thumb get the whole picture; the keyboard keeps the
   single link it already had.

   The Journal cards were already built this way — the whole card, picture
   included, has been one link all along — so nothing there needed changing. */
.media-link { display: block; text-decoration: none; color: inherit; }
.media-link img { display: block; }