/* ==========================================================================
   BAR'EVO SOCIAL - style.css
   Layout + brand layer. Loads AFTER assets/motion.css.
   RTL only. Logical CSS properties only - no physical inset or margin.
   ASCII comments only. No build step.

   Concept: two materials, strictly alternating.
     PLATE - emerald, bleeds edge to edge, carries the image and the wordmark.
     SHEET - bone or beige paper, capped at 1200px, hairline ruled, carries type.
   Seams between them are 1px rules. Depth comes from colour steps, never from
   a shadow - there is not one in this file.
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */

:root {
  /* grounds */
  --emerald:       #0F2E26;
  --emerald-raise: #1A4136;
  --deep:          #081F19;
  --bone:          #FBF8F3;
  --beige:         #F2ECE1;

  /* inks */
  --ink:       #0F2E26;
  --ink-soft:  #51675F;
  --brass:     #7A6840;   /* PAPER ONLY - 2.70:1 on emerald, never used on dark */
  --brass-lit: #B8A98E;
  --sand:      #D9CFBE;
  --sage:      #9DB3A8;

  /* hairlines */
  --rule-paper:        rgba(15, 46, 38, 0.16);
  --rule-paper-strong: rgba(15, 46, 38, 0.28);
  --rule-dark:         rgba(217, 207, 190, 0.18);
  --outline-pill:      rgba(217, 207, 190, 0.30);
  --outline-pill-ink:  rgba(15, 46, 38, 0.30);

  /* type ramp - every clamp solved to hit its endpoints at 390px and 1440px.
     Nothing on this site sits between 18px and 28px except the ledger
     "before" figure, which is 20-28px by design. */
  --t-mark:   clamp(48px, 6.6vw, 96px);
  --t-h1:     clamp(30px, 0.952vw + 26.29px, 40px);
  --t-h2:     clamp(28px, 0.571vw + 25.77px, 34px);
  --t-fig:    clamp(40px, 2.286vw + 31.09px, 64px);
  --t-fig-sm: clamp(20px, 0.762vw + 17.03px, 28px);
  /* The number is the offer. At 32px it sat BELOW the greeting it answers
     (h2 = 34px); at 44px it is the largest object on the contact plate and
     exactly on the heading ceiling, with nothing to spare. Solved at both
     endpoints: 390 -> 1.524*3.90+22.06 = 28.0; 1440 -> 1.524*14.40+22.06 = 44.0. */
  --t-phone:  clamp(28px, 1.524vw + 22.06px, 44px);
  --t-lead:   clamp(17px, 0.095vw + 16.63px, 18px);
  --t-sub:    18px;
  --t-body:   clamp(16px, 0.095vw + 15.63px, 17px);
  --t-label:  clamp(11px, 0.095vw + 10.63px, 12px);
  --t-micro:  11px;

  /* faces */
  --f-display: Italiana, "Times New Roman", Times, serif;
  --f-heb:     "Frank Ruhl Libre", "David Libre", Georgia, serif;
  --f-body:    Assistant, "Segoe UI", Arial, sans-serif;

  /* grid */
  --page-max: 1200px;
  --gut:      clamp(20px, 4vw, 56px);
  --sec-y:    clamp(56px, 5vw, 88px);
  --head-h:   72px;
  --anchor-gap: 28px;      /* breathing room under the fixed bar on an anchor landing */

  /* The focus ring takes the GROUND, not the element. outline:currentColor
     paints the element's own ink 4px outside the element, i.e. ON the ground -
     so a bone pill on emerald and an ink skip-link on emerald both drew a ring
     at 1.00:1. This pair is redefined per ground below. */
  --focus-ring: var(--ink);

  /* grain, emerald grounds only */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 2. BASE */

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

html {
  -webkit-text-size-adjust: 100%;
  /* One line at the root instead of one selector (.m-btn) out of seven control
     types. Contact feedback is not lost: every control here has an :active
     transform. */
  -webkit-tap-highlight-color: transparent;
  /* The only untouched surface on the site was the OS scrollbar. It is painted
     on the viewport, not per section, so it can only be one pair on a page that
     alternates emerald and paper: the paper pair is chosen because the majority
     of the home page's scroll height is paper. --ink-soft on --beige = 5.17:1. */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-soft) var(--beige);
}

/* The header is fixed, so every anchor target has to reserve its own height or
   a jump to #results or work.html#events lands underneath the chrome. The bar
   is constant-height and never hides, so this number is now honest. */
[id] { scroll-margin-block-start: calc(var(--head-h) + var(--anchor-gap)); }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure, figcaption, ul, ol, dl, dd, dt { margin: 0; padding: 0; }
ul, ol { list-style: none; }

img, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* One global rule painted an emerald highlight behind bone text on every
   emerald ground - which is what those sections already look like, so selecting
   text on the dark half of the site produced no visible selection at all. */
::selection { background: var(--emerald); color: var(--bone); }
.hero ::selection,
.sec--emerald ::selection,
.sec--deep ::selection,
.header ::selection,
.site-foot ::selection,
.callbar ::selection { background: var(--bone); color: var(--emerald); }

/* Ground-scoped focus ring. Contrast after this (DESIGN-V5 2.2): bone on
   emerald 13.77, bone on emerald-raise 10.70, bone on deep 16.24, ink on bone
   13.77, ink on beige 12.41 - every ring clears 3:1 by an order of magnitude.
   A second, contrasting halo ring was considered and rejected: the only way to
   draw one is box-shadow, and there is not one in this codebase. */
.hero,
.sec--emerald,
.sec--deep,
.header,
.site-foot,
.callbar,
.skip { --focus-ring: var(--bone); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;      /* 3px sat almost on the glyphs - measured */
}

/* Visually hidden but readable by assistive tech. */
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  inset-block-start: -200px;
  inset-inline-start: var(--gut);
  z-index: 200;
  padding: 12px 20px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: var(--bone);
  color: var(--ink);
  font-size: var(--t-body);
}
.skip:focus { inset-block-start: 12px; }

/* ------------------------------------------------------------- 3. LAYOUT */

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sec {
  position: relative;
  overflow: hidden;              /* guard: nothing in a section may bleed sideways */
  padding-block: var(--sec-y);
}

/* Ground scoping. motion.css reads --m-ground / --m-ink for its veils. */
.sec--emerald { background: var(--emerald); color: var(--bone); --m-ground: var(--emerald); --m-ink: var(--bone); }
.sec--deep    { background: var(--deep);    color: var(--bone); --m-ground: var(--deep);    --m-ink: var(--bone); }
.sec--bone    { background: var(--bone);    color: var(--ink);  --m-ground: var(--bone);    --m-ink: var(--ink); }
.sec--beige   { background: var(--beige);   color: var(--ink);  --m-ground: var(--beige);   --m-ink: var(--ink); }

.sec--emerald::after,
.sec--deep::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
  z-index: 0;
}
.sec--emerald > *,
.sec--deep > * { position: relative; z-index: 1; }

/* THE REGISTER. Every section opens the same way: a tracked Latin slug, a
   full-column hairline, then heading | body across the whole 1200px. It is what
   makes the page read as one composed sheet instead of five stacked blocks,
   and it is why no section leaves half its column empty. */
.duo { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .duo {
    grid-template-columns: 5fr 7fr;
    column-gap: 56px;
    align-items: start;
  }
}
.duo__head .h2 { margin-block-start: 0; }
.duo__body > * + * { margin-block-start: 18px; }
.duo__body .unit { margin-block-start: 12px; }

/* ---------------------------------------------------------- 4. TYPE ROLES */

/* Every Latin label carries dir="ltr", which makes its default text-align
   (start) resolve to the physical LEFT. As a block that parks the label on the
   wrong side of an RTL page - measured on screen, not assumed. inline-block
   shrink-wraps it so it sits at the parent's inline-start, where it belongs. */
.label {
  display: inline-block;
  font-family: var(--f-body);
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.18em;        /* Latin only - Hebrew is never letterspaced */
  text-transform: uppercase;
}
.label--ink  { color: var(--ink-soft); }
.label--sand { color: var(--sand); }

/* Hebrew label: separated by weight, tracking stays at zero. */
.label-he {
  display: block;
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}

.h2 {
  font-family: var(--f-heb);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.22;
  letter-spacing: 0;
  margin-block-start: 16px;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.65;
  max-width: 52ch;
}

.body {
  font-size: var(--t-body);
  line-height: 1.75;
  max-width: 58ch;
}

/* Hebrew unit / footnote line. Tracking is zero, always. */
.unit {
  font-size: var(--t-micro);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.soft { color: var(--ink-soft); }
.sand { color: var(--sand); }

.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  line-height: 1.05;
}

.rule {
  display: block;
  height: 1px;
  border: 0;
  background: var(--rule-paper-strong);
  margin-block: 28px;
}
.rule--dark { background: var(--rule-dark); }
.rule--reg  { margin-block: 18px 34px; }   /* the section register rule */

/* --------------------------------------------------------- 5. CONTROLS */

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: 26px;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
}
.pill--fill  { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.pill--sand  { color: var(--sand); border-color: currentColor; }
.pill--ink   { color: var(--ink);  border-color: var(--outline-pill-ink); }

/* PILL HOVER, per component. motion.css gives every .m-btn a ::before of
   currentColor at 10% - which on .pill--fill is 10% ink over bone, i.e. the
   captured "hover" state was indistinguishable from rest on the primary CTA.
   Each variant now names a real fill.

   WHY the label change is `color 0s linear 75ms` and not a 150ms crossfade:
   the law is transform/opacity only. A stepped colour change at the fill's
   midpoint keeps every ANIMATED property on the compositor - at t=75ms the
   fill is ~60% opaque and sand-on-60%-bone is still legible, then the label
   snaps. On exit the delay is 0, so the label returns to sand instantly while
   the fill retracts. No frame exists in which the label is invisible. */
.pill--sand,
.pill--ink { transition: color 0s linear 0s; }

.pill--sand::before { background: var(--bone); }
.pill--fill::before { background: var(--beige); }   /* the site's second paper */
.pill--ink::before  { background: var(--emerald); }

.pill--sand:focus-visible { color: var(--emerald); }
.pill--ink:focus-visible  { color: var(--bone); }
.pill:focus-visible::before,
.pill:active::before      { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .pill--sand:hover { color: var(--emerald); transition: color 0s linear 75ms; }
  .pill--ink:hover  { color: var(--bone);    transition: color 0s linear 75ms; }
  /* --ink on --beige is 12.41:1, so the filled pill needs no colour change. */
  .pill:hover::before {
    opacity: 1;
    transition: opacity 150ms var(--e-out);
  }
}

/* THE GHOST PILL. One primitive, three users: the header nav, the footer nav
   and the back link. 44px is the target, so the LINK is 44px - the old form
   grew the hit area with an absolutely positioned pseudo-element, which is
   invisible to getBoundingClientRect.

   .m-link is GONE from all three. An underline plus a focus ring is two
   indicators on one control (focus-3.png shows both at once), and the
   underline needed a `bottom: calc((100% - 1.75em) / 2 - 2px)` correction that
   existed purely because a 1px rule and a 44px line box disagree. Deleting the
   underline deletes the hack. */
.nav__link,
.foot__nav a,
.back {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 14px;
  border-radius: 999px;
  color: var(--sand);
  transition: color 0s linear 60ms;   /* stepped at the fill's midpoint */
}
.nav__link::before,
.foot__nav a::before,
.back::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--ghost, var(--bone));
  opacity: 0;
  transition: opacity var(--d-out) var(--e-in);
}
.nav__link { font-size: var(--t-body); }

@media (hover: hover) and (pointer: fine) {
  .nav__link:hover,
  .foot__nav a:hover { color: var(--bone); }
  .nav__link:hover::before,
  .foot__nav a:hover::before,
  .back:hover::before {
    opacity: var(--ghost-op, 0.10);
    transition: opacity var(--d-hover) var(--e-out);
  }
}
.nav__link:active,
.foot__nav a:active,
.back:active { transform: scale(0.97); transition: transform var(--d-press) var(--e-out); }

/* ACTIVE PAGE: two signals, not one. Colour alone was the whole indicator, and
   --sand against --bone on emerald is not a difference a reader can name. */
.nav__link[aria-current="page"],
.foot__nav a[aria-current="page"] { color: var(--bone); }
.nav__link[aria-current="page"]::before,
.foot__nav a[aria-current="page"]::before { opacity: 0.12; }

/* The breadcrumb's hit area was real - a ::before grown 15px inline and 14px
   block - but getBoundingClientRect on the anchor itself still reported
   15 x 19, so every audit that measures rects (all of them) reports this link
   as a 15px target forever, and it read as an exception to the 44px-link
   primitive its three neighbours (.nav__link, .foot__nav a, .back) use.
   The box is now real: 45 x 44 on the element. The negative BLOCK margins are
   what keep the promise the ::before was making - a flex item contributes its
   MARGIN box to the line's cross size, so 44 - 13 - 13 = 18px is all this
   still occupies and the 8px strip does not open into a hole. */
.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 15px;
  margin-inline: -15px;
  margin-block: -13px;
}

/* ------------------------------------------------------------ 6. HEADER
   The bar is PERMANENT and changes ground; it does not hide on scroll down.
   The hide pattern (motion.css .m-header + motion.js) is wrong for this site
   for a specific reason, not a stylistic one: the home page is a one-pager
   whose only in-page nav target - #contact - is at the very bottom, so the bar
   hid the link to the bottom of the page exactly while the reader travelled to
   the bottom of the page. It bought back 73px of viewport and spent the site's
   only navigation. The markup no longer carries .m-header or [data-header], so
   neither of those rules can reach this element.

   TRADE-OFF, stated: a permanent bar costs 72px of every viewport (8.1% at
   1440x900, 9.1% at 390x660). That is the correct price for brand, nav and a
   contact route being available at every scroll position on a site whose whole
   job is producing one phone call.

   position:fixed lives HERE, not in motion.css: it used to exist only there,
   so a 404 on motion.css dropped the header to static and .hero's
   padding-block-start opened a 185px hole at the top of the page. */
.header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 50;
  isolation: isolate;
  color: var(--bone);
  background: none;      /* the ground is on ::before, so it can be a compositor fade */
  border: 0;
  --solid: 1;            /* NO JS -> solid at every scroll position */
}
/* --sand nav text on --bone computes 1.15:1. Without this gate a JS-off
   visitor would get a transparent bar over the bone statement section and an
   invisible nav. .js is set by the inline <head> script, before first paint,
   so there is no flash. */
.js .header:not(.is-solid):not(.header--solid) { --solid: 0; }

/* The solid bar. --emerald-raise, not --emerald: the bar must read as ON TOP
   of the emerald sections it crosses, not merged into them. Bone on
   emerald-raise is 10.70:1. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--emerald-raise);
  border-block-end: 1px solid var(--rule-dark);
  opacity: var(--solid);
  transition: opacity 160ms var(--e-in);    /* the EXIT curve lives on the base */
}
.header.is-solid::before,
.header--solid::before { transition: opacity 200ms var(--e-out); }

/* At-top legibility scrim over the silk. The gradient itself is static and is
   never transitioned - only its opacity moves, so this stays on the
   compositor. Replaces the unconditional emerald slab + hairline, which
   painted emerald on emerald and then ruled a seam across the cover photograph
   at y=72 that described nothing. */
.header::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 132px;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(8, 31, 25, 0.42) 0%,
              rgba(8, 31, 25, 0) 100%);
  opacity: calc(1 - var(--solid));
  transition: opacity 160ms var(--e-in);
}
.header.is-solid::after,
.header--solid::after { transition: opacity 200ms var(--e-out); }

/* Two frames at boot while the initial scroll position is applied. Nothing on
   this site animates on first paint. */
.header.is-instant::before,
.header.is-instant::after { transition: none; }

.header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--head-h);
}
.header__mark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.06em;
  /* Kills the trailing letter-space after the final L. .hero__mark already
     carries this correction and this one did not, which is why the two
     wordmarks on the home page hung 8px apart from the same column edge. */
  margin-inline-end: -0.06em;
  color: var(--bone);
}
.header__end {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 8px;              /* 8 gap + 14 padding each side = 36px optical separation */
}
.header__sep {
  display: block;
  width: 1px;
  height: 20px;
  background: var(--rule-dark);
}
/* The always-available contact route. WhatsApp and not tel: - it is her
   primary channel in every source, and it is the only one that works on a
   desktop, where this bar is widest and a tel: link would be dead.
   44px, not the 40px the spec drafted: a target measured at 40 fails the
   site's own law, and 44 inside a 72px bar still leaves 14px of air. */
.header__wa {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 18px;
  border: 1px solid var(--outline-pill);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: var(--sand);
  transition: color 0s linear 60ms;
}
.header__wa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--bone);
  opacity: 0;
  transition: opacity var(--d-out) var(--e-in);
}
@media (hover: hover) and (pointer: fine) {
  .header__wa:hover { color: var(--bone); }
  .header__wa:hover::before {
    opacity: 0.12;
    transition: opacity var(--d-hover) var(--e-out);
  }
}
.header__wa:active { transform: scale(0.97); transition: transform var(--d-press) var(--e-out); }

/* --------------------------------------------------------------- 7. HERO
   The cover. One emerald plate, ONE column: eyebrow, rule, wordmark, byline,
   Hebrew line, lead, two pills - all on the same inline-start edge every other
   section on the page uses. Bar stands bottom-flush on the inline-end half.

   What was here before: the Hebrew flush to one edge, the wordmark flung to
   the opposite edge, and the portrait floating between them touching neither.
   Three objects, three anchors. And because the wordmark was right-anchored
   while she was left-anchored, the collision the "interlock" was designed
   around landed on the FIRST letter, not the last - the brand name rendered as
   "bAR'EVO SOCIAL" at 1440 and 1920, with her blazer covering the B's stem.

   TRADE-OFF, stated: the interlock is gone. The wordmark no longer passes
   behind her shoulder, because there is no width at which that gesture is
   worth a broken B. She reads whole; the name reads whole.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 76vh, 700px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--head-h) + 40px) 48px;
  background: var(--emerald);
  color: var(--bone);
  --m-ground: var(--emerald);
  --m-ink: var(--bone);
}

.hero__silk { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__silk img,
.hero__silk-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The still sits underneath the video, so a 404 or a codec failure leaves the
   poster frame on screen instead of an empty box. */
.hero__silk-video { z-index: 1; }

/* Scrim sized against measured pixels: alpha 0.80 where the type sits.
   270deg puts the 0% stop at the inline-start edge under dir=rtl - no
   physical keyword needed. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(270deg,
      rgba(8, 31, 25, 0.80) 0%,
      rgba(8, 31, 25, 0.62) 42%,
      rgba(8, 31, 25, 0.22) 74%,
      rgba(8, 31, 25, 0.14) 100%),
    linear-gradient(0deg,
      rgba(8, 31, 25, 0.62) 0%,
      rgba(8, 31, 25, 0) 38%);
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: var(--grain);
  opacity: 0.035;
  pointer-events: none;
}

/* .hero__in keeps the page column's geometry so its inline-start edge lines up
   with every other section. Capping it at 700px here would have CENTRED it
   (margin-inline:auto), which is what the first measured pass showed. The cap
   belongs on the line that needs it, not on the column. */
.hero__in { position: relative; z-index: 4; }

/* The wordmark is now IN the column, in reading order, between the eyebrow and
   the byline. RE-MEASURED with a Range over the span's own text, because the
   figure that stood here (~470px at 95px) was an estimate and was 15% high:
   the run is 406.6px at 95.04px and 410.7px at 96px, i.e. 4.278px of width per
   px of font-size. At the 116px of the >=2200 tier that is 496.3px inside a
   1328px column - it still does not reach anywhere near her. */
.hero__mark {
  margin-block: 18px 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-mark);
  line-height: 0.92;
  letter-spacing: 0.06em;
  color: var(--bone);
}
/* The span is dir=ltr, so its default text-align:start is the physical LEFT.
   Without this the two-line mobile wordmark sets flush left while every other
   line on the page sets flush to the inline-start. Measured, then fixed. */
.hero__mark > span {
  display: block;
  text-align: end;
  /* letter-spacing adds a trailing space after the final L, which would leave
     the wordmark optically 6px short of the column edge the eyebrow sits on. */
  margin-inline-end: -0.06em;
}

.hero__byline {
  font-family: var(--f-heb);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--bone);
  /* The BYLINE, not the wordmark, is the run that comes closest to her: with
     the cutout at 50vw-500px the wordmark clears by 112px but a 22ch byline
     cleared by only 27px - close enough that a font swap to David Libre or
     Georgia could push it into her shoulder. The hard px cap makes the
     clearance independent of which face is resolved: 490px -> 460px, measured
     clearance 27px -> 67px at every width from 1312 to 2560. */
  max-width: min(22ch, 460px);
  margin-block-start: 26px;
}
.hero__lead {
  margin-block-start: 16px;
  font-size: var(--t-lead);
  line-height: 1.65;
  color: var(--sand);
  max-width: 46ch;
}

.hero__eyebrow { color: var(--sand); margin-block-start: 18px; }
.hero__hair {
  display: block;
  width: 28px;
  height: 1px;
  background: var(--sand);
  margin-block: 14px 20px;
  border: 0;
}

.hero__cta { margin-block-start: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* The scroll cue. A hairline, not a chevron: no word, no bounce, NO INFINITE
   ANIMATION - an object that loops forever in the corner of a cover is
   attention-seeking, and every other motion on this site is a one-shot. It
   hangs on the same inline-start edge as the eyebrow, the wordmark and the
   byline, so it aligns to something.
   The edge is computed from the hero's own width, not from 50vw: vw includes
   the scrollbar, which would put the cue 7-8px off the column edge on Windows.

   MEASURED, and it changed the geometry: the spec drew this 44px tall and 24px
   up from the hero's bottom edge, on the arithmetic that the hero column is
   ~430px tall. The real column is 463.8px. Solving the general case,
   clearance = (hero height - CTA bottom) - cue height - offset, and with a hero
   that is clamp(560, 76vh, 700) the 44+24 form NEVER clears the CTA row: at
   1440x802 it overlapped the WhatsApp pill by 32px - and the pill's right edge
   is exactly the column edge the cue hangs on, so the hairline would have been
   drawn across a bone button.
   The cue is now 24px tall and seated ON the hero's bottom edge, so it runs
   into the seam between the plate and the statement section - a real object -
   and the clearance to the CTA is 12px at the worst case (a hero at its
   content-driven minimum) and 42px at 1440x900. Re-measured, both.
   Without JS there is no scroll state, so there is no cue. */
.hero__cue {
  position: absolute;
  z-index: 4;
  inset-block-end: 0;
  inset-inline-start: max(var(--gut), calc((100% - var(--page-max)) / 2 + var(--gut)));
  width: 1px;
  /* 24px at 0.55 terminal opacity measured 3.45:1 against #0B211A over a 22.5
     css px run - found only with a pixel scanner, invisible in the render at
     any zoom. An invisible cue does no work, so it is committed, not deleted.
     The contrast is carried by the terminal opacity (0.55 -> 0.8 = 8.6:1 on
     #0B211A, computed), the noticeability by the length.
     LENGTH IS GATED ON VIEWPORT HEIGHT, deliberately: the previously measured
     clearance from the cue's top to the hero CTA is 12px with a hero at its
     content-driven minimum and 42px at 1440x900, so a flat 40px would put the
     line through the WhatsApp pill on a short viewport - the exact overlap
     that made this cue 24px in the first place. 32px keeps >=4px there; the
     full 44px only runs where 20px of the 42px is provably spare. */
  height: 32px;
  background: linear-gradient(to bottom,
              rgba(217, 207, 190, 0) 0%,
              rgba(217, 207, 190, 0.8) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms var(--e-in);
}
.js .hero__cue { opacity: 1; transition: opacity 200ms var(--e-out); }
.js.is-scrolled .hero__cue { opacity: 0; transition: opacity 160ms var(--e-in); }
@media (min-height: 860px) { .hero__cue { height: 44px; } }
@media (max-width: 767px) { .hero__cue { display: none; } }

/* Below 1024 she is NOT in the hero. At opacity .24, cropped 48px past the
   edge, her face sat directly behind the full-width white pill: eyes and nose
   erased, 250px of ghost torso below it. The brief's requirement is sharp,
   whole and still - a 24%-opacity face under a button fails it on the exact
   viewport her clients use. The markup carries loading="lazy" so a phone
   downloads none of this. */
.hero__cutout { display: none; }

@media (min-width: 1024px) {
  .hero__cutout {
    display: block;
    position: absolute;
    z-index: 3;
    inset-block-end: 0;               /* the bottom cut must read as a crop */
    /* Anchored to the same (100vw - 1200) / 2 rhythm as the column, so the gap
       to the wordmark is constant from 1312 to 2560.
       620 -> 500 closes 120px of the dead silk between her and the mark.
       Measured, headless Chrome, box edges: gap cutout-right -> B-left was
       237 / 232 / 232 css px at 1440 / 1920 / 2560; then 117 / 112 / 112, and
       after the wide tiers it re-measures 119.7 / 166.0 / 134.3 - the tiers
       IMPROVE the clearance they inherit at every width.
       It is NOT closed further. The wordmark span is dir=ltr and text-align:end
       inside the RTL column, so the glyph nearest the cutout is the FIRST one -
       the B, advance box 60px at 1920 - not the final O. Any overlap here
       re-creates the bisected B this build already shipped once.
       WRITTEN AGAINST --page-max, not against a baked 1200. `50vw - 500` was
       `50vw - --page-max/2 + 100` with the 1200 column hard-coded into it, so
       the moment the wide tiers move --page-max it stopped tracking the column:
       at 1920/pm1320 the correct anchor is 400 and the old form yields 460, at
       2560/pm1440 correct is 620 and the old form yields 800. Identical output
       at pm1200 - this is a refactor, not a move. */
    inset-inline-end: max(0px, calc(50vw - var(--page-max) / 2 + 100px));
    width: clamp(360px, 36vw, 520px); /* 520 is a hard cap: source is 1400px */
    opacity: 1;
    pointer-events: none;
    user-select: none;
  }
  .hero__cutout img { display: block; width: 100%; height: auto; }
}

/* Between 1024 and 1279 the wordmark is short and she is narrow, so the two
   simply sit apart. Nothing collides at any width - verified 320 to 2560. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__byline { max-width: 18ch; }
}

/* ------------------------------------------------- 8. SECTION FURNITURE */

/* --------------------------------------------------------- 9. STATEMENT */

/* The scope index. What stood here was one 17px line of five bare nouns -
   "אפיון · אסטרטגיה · צילום · עריכה · תפעול" - in the one section where the
   spec handed over a full column of real content. This is that column: three
   labelled, ruled groups of package TYPES, and it is the section's density.
   It reuses the .duo register exactly (5fr head / 7fr body, 56px gutter) so it
   reads as part of the same sheet rather than as a second block. */
/* Below 1024 the hero cutout is display:none, and the audit was right: that
   left a personal brand with no photograph of its person anywhere on either
   page, on the exact viewport her clients hold. She goes here, at FULL opacity
   - the same rule that governs the desktop cutout. No tint, no blend, no
   reduced opacity; a 24%-opacity face is what was deleted, not what is
   restored. display:none above 1024 means only one of the two ever has a
   layout box, so a browser only ever downloads one of them. */
.about__por {
  display: block;
  width: 180px;
  margin-block-end: 18px;
  /* The source's bottom edge is a hard horizontal cut through the blazer
     (DESIGN-V5 0/7). In the hero it is seated on the section boundary so it
     reads as a crop; here it is seated on a hairline for the same reason. A
     cut that ends in mid-air reads as a severed torso. */
  border-block-end: 1px solid var(--rule-paper-strong);
}
.about__por img { width: 100%; height: auto; }
@media (min-width: 1024px) { .about__por { display: none; } }

.idx {
  margin-block-start: 44px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--rule-paper-strong);
}
.idx__h {
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.3;
}
.idx__list { margin-block-start: 20px; }
.idx__group {
  padding-block: 18px;
  border-block-end: 1px solid var(--rule-paper);
}
.idx__group:last-child { border-block-end: 0; padding-block-end: 0; }
.idx__label {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;            /* Hebrew is never letterspaced */
  color: var(--ink);
}
.idx__items {
  margin-block-start: 8px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.idx__note {
  margin-block-start: 22px;
  color: var(--ink-soft);
  max-width: 46ch;
}
.idx__head + .idx__list { margin-block-start: 20px; }
/* Real spaces around the middots, not padding alone: without them a long run
   is one unbreakable token and the last item is cut off the edge at 390px. */
.dot { padding-inline: 5px; opacity: 0.55; }

/* The heading and its note are ONE cell. As two rows with the list spanning
   both, the list's height was distributed across the tracks and opened a 145px
   hole between them - measured, not guessed. */
@media (min-width: 900px) {
  .idx {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 56px;
    align-items: start;
  }
  .idx__list { margin-block-start: 0; }
}

/* ------------------------------------------------------------ 10. LEDGER */

.ledger { margin-block-start: 28px; }

/* The multiple column is max-content, not 2fr. As 2fr it left ~270px of empty
   beige past the payoff figure of the entire section, and the arrow column was
   a 90px rule in a column that was mostly air. Fixed arrow width, tighter
   gutter, and the multiple sized to its own glyphs. */
.ledger__row {
  display: grid;
  grid-template-columns: 3fr 1.6fr 64px 2fr 88px;
  gap: 20px;
  align-items: baseline;
  border-block-end: 1px solid var(--rule-paper);
  padding-block: 26px;
}
.ledger__row--head {
  padding-block: 0 12px;
  border-block-end: 1px solid var(--rule-paper-strong);
}

/* The row aligns on ONE baseline: the descriptor, both figures and the
   multiple all sit on it. The Latin slug hangs below the descriptor, so it
   never disturbs the register line. */
.ledger__slug { color: var(--ink-soft); margin-block-start: 10px; }
/* Visible column labels. Off at desktop, where .ledger__row--head names the
   columns once for all three rows; on below 768, where that head row is gone.
   aria-hidden, because the .vh prefix in the same cell already says it to a
   screen reader at every width. */
.ledger__lab { display: none; }
.ledger__name {
  font-size: var(--t-sub);
  font-weight: 600;
  line-height: 1.3;
}
.ledger__before {
  font-size: var(--t-fig-sm);
  font-weight: 400;
  color: var(--ink-soft);
}
.ledger__after {
  font-size: var(--t-fig);
  font-weight: 600;
  color: var(--ink);
  display: inline-block;
}
/* The one accent on the page, used four times: the three arrows and the
   multiple column. Brass is paper only - it fails on every dark ground. */
.ledger__cell--arrow { font-size: var(--t-fig); line-height: 1.05; }
.ledger__arrow {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 1px;
  background: var(--brass);
  transform: translateY(-0.33em);    /* up to the middle of the big figure */
}
/* RTL-only site: the head points to the inline-end, which is physical left. */
.ledger__arrow::after {
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline-end: 0;
  width: 7px;
  height: 7px;
  background: var(--brass);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}
/* Derived, not extracted: 16500/32 = 515.6, 29200/444 = 65.8, 56500/8400 = 6.73
   x516 is the payoff of the section and it used to be set at 12px - smaller
   than the "before" figure it exists to dwarf. 28px brass on beige computes
   4.60:1, and at 28px that clears AA large (3:1) with room. */
.ledger__mult {
  font-size: var(--t-fig-sm);
  font-weight: 400;
  color: var(--brass);
  text-align: end;
}

.ledger__note { margin-block-start: 24px; }

.strip {
  margin-block-start: 32px;
  border-block-start: 1px solid var(--rule-paper);
}
.strip__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  padding-block: 24px;
  border-block-end: 1px solid var(--rule-paper);
}
.strip__intro {
  flex: 0 0 auto;
  min-width: 148px;
  color: var(--ink-soft);
}
.strip__figs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
}
.strip__fig {
  font-size: var(--t-fig-sm);
  font-weight: 600;
  color: var(--ink);
}
.strip__unit { color: var(--ink-soft); font-size: var(--t-micro); }

/* ------------------------------------------------------ 11. WORKS TEASER
   No job thumbnails on the home page. Two unexposed plates, each carrying a
   9:16 registration frame, the panel title, one line and its link. */

/* THE REEL STRIP (DESIGN-V5 6.4). Four unexposed frames, each carrying one
   real reel's play count. What stood here instead was a 38 x 68 empty outlined
   box at the top of each teaser card - the exact "failed image slot" the spec
   forbids - while the figures that were supposed to make these cells read as
   designed had been moved into the ledger.
   NO ATTRIBUTION: CONTENT.md records the four counts as "individual reel play
   counts circled in the deck" and does not tie any of them to a business or to
   an event, so none of them is placed inside a category card. The slug is
   REEL 01..04 and nothing on this page claims more than the source supports. */
/* DE-BOXED. What stood here was four 220 x 391px rectangles outlined in 1px on
   a raised fill, mostly empty, for four numbers - and an outlined empty
   rectangle is what a failed <img> looks like. The four counts are now one
   ruled register in the same family as .ledger__row and .strip__row: a label,
   a tabular figure, a hairline, no container. 391px -> ~107px.
   TRADE-OFF, stated: four stacked rows would be more scannable if the reader
   were COMPARING these numbers. CONTENT.md ties none of them to a business, so
   there is nothing to compare, and one horizontal sweep is the calmer form. */
.reels__intro {
  margin-block-start: 40px;
  margin-block-end: 16px;
  color: var(--sand);
  font-size: var(--t-lead);
}
.reels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--rule-dark);
}
.reel {
  display: block;
  padding-block: 26px;
  padding-inline: 0;
  background: none;
  border: 0;
}
.reel + .reel {
  border-inline-start: 1px solid var(--rule-dark);
  padding-inline-start: 28px;
}
/* .label stays inline-block. As display:block a dir="ltr" label resolves its
   text-align:start to the physical LEFT and parks itself at the wrong edge of
   an RTL cell - measured on screen, twice now. */
.reel__slug { color: var(--sage); }
.reel__fig { display: flex; align-items: baseline; gap: 8px; margin-block-start: 14px; }
.reel__num {
  font-size: var(--t-fig-sm);
  font-weight: 600;
  color: var(--sand);
}
.reel__unit { font-size: var(--t-micro); line-height: 1; color: var(--sage); }

/* THE SPLIT BAND. Two outlined rectangles on a raised fill were the exact card
   template the system forbids, and an outline on a raised fill reads as a
   component demo rather than as a door. One band, one seam, two halves, and
   the whole half is the link.

   Full bleed OUT of .wrap without 100vw: 50% resolves against .wrap's content
   box (1088px at 1440), so the margin is 544 - 50vw = -176px, which is exactly
   .wrap's own offset. `width: 100vw` would instead be 1455px on Windows and
   ship 15px of horizontal overflow. .sec{overflow:hidden} clips the half
   scrollbar-width that vw still contributes at each edge. */
.teaser {
  margin-inline: calc(50% - 50vw);
  width: auto;
  margin-block-start: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-block: 1px solid var(--rule-dark);
}
/* This element IS the <a>. No box, anywhere.

   THE COLUMN LAW, BOTH SIDES. The band bleeds; the type never does. Until this
   pass the max() inset was applied to the FIRST half only, so at 2560 the
   events half set its type on the column (measured content box 1331 -> 1819)
   while the business half ran to 51px from the screen edge - a 680px overrun,
   and 488px of content box against 1168px, 2.39x, inside a band whose two
   halves are identical in every other respect. --band-inset is computed FROM
   the column, so it follows --page-max at every tier, and it carries the same
   half-scrollbar error the band's own 50vw margin does, so the two cancel and
   the type lands on the true column edge. Below --page-max the max() falls
   through to --gut, which is exactly what the mobile stack needs - so the 767
   block no longer touches inline padding at all. */
.teaser__half {
  --band-inset: max(var(--gut), calc(50vw - var(--page-max) / 2 + var(--gut)));
  /* The seam gutter is the page gutter. clamp(24px, 4vw, 56px) and --gut
     differ only below a 600px viewport, where the halves are stacked and this
     is not a seam at all but the page's own edge - so --gut is the honest
     token and the mobile override that used to restate it can go. */
  --seam-pad: var(--gut);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* WAS flex-end. Bottom-seating the stack put the two halves' eyebrows on
     different lines whenever the two copy lines wrapped differently - measured
     at 2560: slug tops 3048.3 and 3078.1, 30px apart. Both halves now open on
     the band's top line and close on its bottom line (.teaser__go, below). */
  justify-content: flex-start;
  /* Without this the default `stretch` makes the inline-block Latin slug a
     full-width flex item, and a dir="ltr" box sets its text at the physical
     left - i.e. the far side of the half. Shrink-wrap keeps every line on the
     half's inline-start edge. */
  align-items: flex-start;
  min-height: 260px;
  padding-block: 44px 38px;
  padding-inline: var(--seam-pad);
  color: var(--bone);
}
.teaser__half:first-child { padding-inline-start: var(--band-inset); }
.teaser__half:last-child  { padding-inline-end:   var(--band-inset); }
/* In RTL the second half is drawn to the left, so its inline-start edge is its
   right edge - the seam between the two. One hairline, correct side. */
.teaser__half + .teaser__half { border-inline-start: 1px solid var(--rule-dark); }
.teaser__half::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--emerald-raise);
  opacity: 0;
  transition: opacity var(--d-out) var(--e-in);
}
@media (hover: hover) and (pointer: fine) {
  .teaser__half:hover::before { opacity: 1; transition: opacity var(--d-hover) var(--e-out); }
}
.teaser__half:focus-visible::before,
.teaser__half:active::before { opacity: 1; }

.teaser__slug { color: var(--sage); }
/* THE ANCHOR AT THE OUTBOARD EDGE. The block used to hang off the seam with
   nothing touching the column edge, so at 1600+ the half read as a fragment in
   a dark field. This hairline spans the half's FULL content width, which after
   --band-inset is the same 608px in both halves, so each half is now pinned at
   both of its inline edges - one line at the top, one link on the bottom. */
.teaser__rule {
  display: block;
  align-self: stretch;          /* beats the parent's align-items: flex-start */
  height: 1px;
  background: var(--rule-dark);
  margin-block-start: 16px;
  border: 0;
}
/* 24px, up from --t-sub 18px: the band is 260px tall and full-bleed, and an
   18px title in it reads as a caption. Well under the 44px heading cap. */
.teaser__title {
  font-family: var(--f-heb);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--bone);
  margin-block-start: 18px;     /* was 12px - it now sits under a rule */
}
.teaser__line {
  margin-block-start: 10px;
  color: var(--sand);
  max-width: 34ch;
}
.teaser__go {
  display: flex;
  align-items: center;
  gap: 10px;
  /* auto, not 24px: this is what levels the two halves. Whatever the copy above
     does, both arrow-links sit on the band's bottom line. */
  margin-block-start: auto;
  padding-block-start: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--bone);
}
/* The arrow moves in the direction the glyph already points. 6px, not 4px: the
   band is twice the width of the old card and 4px no longer registers. */
.teaser__go .arrow {
  color: var(--brass-lit);
  display: inline-block;
  transform: translateX(0);
  transition: transform var(--d-out) var(--e-in);
}
@media (hover: hover) and (pointer: fine) {
  .teaser__half:hover .arrow {
    transform: translateX(-6px);
    transition: transform var(--d-hover) var(--e-out);
  }
}
.teaser__half:focus-visible .arrow {
  transform: translateX(-6px);
  transition: transform var(--d-hover) var(--e-out);
}

/* 12. SERVICES - deleted. The home page had a "חבילות" section whose one line
   was an eight-item comma run, and work.html carried a byte-identical copy of
   it. The package types now live once, in the statement index (.idx), and the
   full scope lives once, in the work.html scope table (.scope). */

/* ----------------------------------------------------------- 13. CONTACT */

/* THE CLOSING IS ONE UNIT. #contact and .site-foot already share --deep and
   are separated only by a hairline, so they are composed as one plate.
   What was measured on the shipped page: the 5fr head track carried 42px of
   type (the word נדבר) against 235px beside it - 430 x 193 = ~83,000 css px2
   of empty deep green, the single largest dead field on either page - and the
   footer band's one right cluster left 832 of 1088px, 76.5%, empty.

   ROW B fixed the far edge but not the field: two stacked grids on the same
   tracks, the upper one's head cell carrying 90px of type in a 430px track
   beside a 59px line, plus a 40px gap row across the whole column. Measured on
   the shipped page at 2560: .duo 59.4 tall, a 40px gap, then .contact__row -
   (430 - 90) x 59 + 1088 x 40 = ~63,600 css px2 at 1440 and ~80,400 after the
   column widens. THE CLOSING IS NOW ONE GRID: heading + line on one side, the
   number + the two doors on the other, both tracks filled from the same top
   line to the same bottom line.
   TRADE-OFF, stated: this is the one section on the site where the register is
   7/5 rather than 5/7. The inline-end track here carries OBJECTS (a 44px
   number, two 190px pills = 392px), not prose, so it takes the narrower track;
   the 52ch lead needs the wider one. Two tracks, 56px gutter, same fr
   denominator - the register the page reads as is preserved, only the roles
   swap. */
.contact__grid { display: grid; gap: 32px; }
/* A grid item is its own formatting context, so .h2's 16px top margin no
   longer collapses out of it and would push the heading 16px off the register
   every other section opens on. Measured: 3360.6 -> 3376.6 at 1440. */
.contact__say .h2 { margin-block-start: 0; }
.contact__say .lead { margin-block-start: 16px; }
.contact__act .contact__cta { margin-block-start: 20px; }

@media (min-width: 900px) {
  .contact__grid {
    /* minmax(max-content, 5fr), not a bare 5fr. MEASURED at 1024: a bare 5fr
       track is 365px, the two pills are 190 + 12 + 190 = 392, and the pair
       wrapped to two rows - which the two-grid form it replaces never did,
       because there the objects sat in the 7fr track. The floor is the row's
       own max-content, so it is right whatever the pills measure. From ~1100
       up the 5fr share exceeds it and the register is a plain 7/5 again. */
    grid-template-columns: minmax(0, 7fr) minmax(max-content, 5fr);
    column-gap: 56px;
    align-items: end;          /* both stacks land on ONE bottom line */
    margin-block-start: 40px;
  }
  /* The anchor is dir="ltr" (the digits are Latin) AND inline-flex, so as a
     stretched item it would fill the track and pack the number against the
     PHYSICAL left of it. Shrink-wrapping the cell and setting its text to the
     inline-end keeps the number and the pills on one edge - the column's. */
  .contact__act { justify-self: end; text-align: end; }
  .contact__act .contact__cta { justify-content: flex-end; }
}

.contact__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: var(--t-phone);
  font-weight: 400;
  line-height: 1.05;
  color: var(--bone);
  letter-spacing: 0.02em;   /* Latin digits only - Hebrew is untouched */
}
.contact__cta { margin-block-start: 20px; display: flex; gap: 12px; flex-wrap: wrap; }

/* .contact__row and its 900px block are DELETED with the second grid they
   described. The justify-self: start hack went with them: it existed only to
   shrink-wrap a dir="ltr" anchor that had been stretched by a grid track the
   number no longer occupies. */

/* A real contentinfo landmark, outside <main>. The sign-off is 20px, not the
   header's 24px: the bar now carries a 24px wordmark permanently, and two
   identical wordmarks 100px apart is a repetition, not a rhythm. */
.site-foot {
  background: var(--deep);
  color: var(--bone);
  border-block-start: 1px solid var(--rule-dark);
  padding-block: 30px 36px;
}
.foot__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.foot__mark {
  font-family: var(--f-display);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.06em;
  margin-inline-end: -0.06em;
  color: var(--bone);
}
.foot__by { color: var(--sand); font-size: var(--t-label); }
/* TRADE-OFF, stated: a footer nav on a two-page site whose header is now
   permanently visible is arguably redundant. It is kept because the
   alternative is an empty inline-end cell, and a dead field is the exact
   defect being fixed. Two links, no icons. */
.foot__nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-block-start: 12px;
}
.foot__nav a { font-size: 15px; padding-inline: 10px; }
.foot__copy,
.foot__ig {
  color: var(--sand);
  font-size: var(--t-micro);
  margin-block-start: 14px;
  text-align: end;   /* dir=ltr elements: end is their own inline end */
}
.foot__ig { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 768px) {
  /* Four fields, both edges occupied on both rows, zero empty cells. */
  .foot__grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 40px;
    row-gap: 14px;
  }
  .foot__line { grid-column: 1; grid-row: 1; }
  .foot__nav  { grid-column: 3; grid-row: 1; margin-block-start: 0; }
  .foot__copy { grid-column: 1; grid-row: 2; margin-block-start: 0; }
  .foot__ig   { grid-column: 3; grid-row: 2; margin-block-start: 0; }
}

/* ONE ROW at >=1280. Four short fields on two rows spent the 1fr middle track
   twice: at 2560 that track measured ~900px of empty deep green on each row.
   wordmark + nav at the inline-start, @handle + copyright at the inline-end,
   one 1fr track absorbing the slack between them - four fields, one
   hairline-topped register, both edges occupied. The 768 block above is
   untouched and still serves 768-1279. */
@media (min-width: 1280px) {
  .foot__grid {
    grid-template-columns: auto auto 1fr auto auto;
    align-items: baseline;
    column-gap: 32px;
    row-gap: 0;
  }
  .foot__line { grid-column: 1; grid-row: 1; }
  .foot__nav  { grid-column: 2; grid-row: 1; margin-block-start: 0; }
  .foot__ig   { grid-column: 4; grid-row: 1; margin-block-start: 0; }
  .foot__copy { grid-column: 5; grid-row: 1; margin-block-start: 0; }
}

/* ------------------------------------------------------- 14. CALL BAR */

.callbar {
  z-index: 60;
  display: none;
  background: var(--deep);
  border-block-start: 1px solid var(--rule-dark);
}
.callbar__in { display: flex; gap: 10px; padding: 10px var(--gut); }
.callbar .pill { flex: 1 1 0; min-height: 44px; padding-inline: 12px; }
@media (max-width: 767px) { .callbar { display: block; } }

/* 15. WORK PLATE - deleted. work-18.jpg is 712px wide and the plate stretched
   it across 1440-1920px: a 2.0-2.7x upscale, visibly soft in every capture,
   and its crop had already lost the BAR'EVO wordmark that was the only reason
   to use that file. It cost 260 of the first 900 vertical pixels on a gallery
   page. 260px of blur is not an entrance; the page opens on the work. */

/* The section owns its own ground. As a margin, the bone started 72px below
   the viewport top and the fixed emerald bar sat over BODY background - which
   only looked right because body is also bone. */
.workhead {
  padding-block: calc(var(--head-h) + var(--sec-y)) 0;
}
.workhead h1 {
  font-family: var(--f-heb);
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.18;
  letter-spacing: 0;
  margin-block-start: 16px;
}

/* ------------------------------------------------------- 16. SWITCHER */

/* The pills used to float in bone with nothing to sit on, and the change was a
   hard snap on background-color, border-color and color - exactly the three
   properties the motion law excludes. The ground now ARRIVES and DEPARTS as an
   opacity crossfade on a pseudo-element (180ms in / 120ms out); that is the
   moving affordance, and it is compositor-only. The hairline is a register for
   the pills to sit on, not a second indicator - the travelling rail stays
   deleted. */
.sw {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-start: 24px;
  padding-block-end: 18px;
  border-block-end: 1px solid var(--rule-paper);
}
.sw__pill {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 22px;
  border: 1px solid var(--outline-pill-ink);
  border-radius: 22px;
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0s linear 0s;
}
.sw__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--emerald);
  opacity: 0;
  transition: opacity var(--d-out) var(--e-in);
}
/* ONE selection indicator: the filled emerald pill IS the state. */
.sw__pill[aria-selected="true"] {
  color: var(--bone);
  border-color: var(--emerald);
  transition: color 0s linear 90ms;   /* stepped at the fill's midpoint */
}
.sw__pill[aria-selected="true"]::before {
  opacity: 1;
  transition: opacity 180ms var(--e-out);
}
@media (hover: hover) and (pointer: fine) {
  .sw__pill[aria-selected="false"]:hover { color: var(--ink); border-color: var(--ink); }
}

.panel { padding-block-start: 36px; }
.panel__intro { margin-block-end: 28px; max-width: 60ch; }

/* With JS the pills ARE the panel titles, so the per-panel heading is dropped
   to assistive tech only. With JS off it is a real visible heading and both
   panels render stacked. */
.js .panel__h {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.js [data-off] { display: none; }
[hidden] { display: none; }

/* ------------------------------------------------ 17. CONTACT SHEET GRID */

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px)  { .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(5, 1fr); } }

/* .grid--short is DELETED. It changed the TRACK COUNT while .grid uses 1fr
   tracks, so the same object - "פריים אנכי מתוך רילס" - measured 200 css px in
   one tab and 349 in the other: 1.75x. Click a tab and every photograph on the
   page changed size by three quarters; the two panels read as two pages.
   Both panels now use .grid, so the cell is locked, and the events panel's
   intro moves INTO the grid to occupy the two tracks its three frames leave
   over. The slack becomes a deliberately placed caption instead of 440px of
   empty bone or three silently inflated photographs.

   BOTH panels do this now. The business panel's 21 frames in 5 tracks left ONE
   frame alone in row 5 - 4 empty tracks x 356px = ~307,000 css px2 of empty
   bone, 3.7x the field the contact plate was convened to fix, and on the page
   whose entire job is showing pictures. Same arithmetic at 1024 (4 tracks: 5
   rows + 1 orphan). The intro takes the slack: 4 + 21 = 25 = 5 exact rows at
   1280+, 3 + 21 = 24 = 6 exact rows at 1024. At 768 (3 tracks) 21 divides
   evenly, so the intro spans the full width above the frames as before. */
.grid > .panel__intro { margin-block-end: 0; }
@media (min-width: 1280px) {
  .panel--short .panel__intro {
    grid-column: 4 / 6;      /* line-based, so RTL puts it at the inline-end */
    grid-row: 1;
    align-self: start;       /* attach to the tab row above; air below reads as
                                intent, a caption floating at the bottom of an
                                empty field reads as broken */
    max-width: 34ch;
    margin-block-end: 4px;
  }
  .panel:not(.panel--short) .panel__intro {
    grid-column: 1 / 5;      /* inline-start: the intro precedes its pictures */
    grid-row: 1;
    align-self: start;       /* see .panel--short note */
    /* NOT 34ch. The events intro's 34ch fills 70% of its 2-track area; the
       same 34ch in a 4-track area fills a third of it and re-opens the hole
       this rule exists to close. The base 60ch - the measure this paragraph
       already had before it moved into the grid - sets it two lines wide and
       leaves the row reading as caption / air / photograph. */
    margin-block-end: 4px;
  }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .panel:not(.panel--short) .panel__intro {
    grid-column: 1 / 4;
    grid-row: 1;
    align-self: start;       /* see .panel--short note */
    margin-block-end: 4px;
  }
}
@media (max-width: 1279px) {
  .panel--short .panel__intro { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .panel:not(.panel--short) .panel__intro { grid-column: 1 / -1; margin-block-end: 8px; }
}

/* A filled cell, not a hairline outline. Until its image arrives - which on a
   slow connection is most of the visit - an outlined empty box reads as a
   broken image slot, and eleven of them read as a broken page. aspect-ratio
   plus width/height on every img means nothing reflows when they land. */
.frame {
  display: block;
  aspect-ratio: 9 / 16;
  background: var(--beige);
}

/* The 7fr/5fr .split is DELETED. It ran the events panel's 3 photographs down
   the 7fr column, which ended at css y=775 at 1440, while the packages list in
   the 5fr column beside it ran to y~1390 - 625 x 606 css px of uniform bone
   under the only pictures on the page, 31% of the page height on half its
   width. The frames now run 3-up across the full 1200px column and the scope
   sits below them on the same 5fr/7fr register .duo and .idx already use. */
.scope {
  margin-block-start: 44px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--rule-paper-strong);
}
.scope__h { margin-block-start: 12px; }
.scope__list {
  margin-block-start: 28px;
  border-block-start: 1px solid var(--rule-paper-strong);
}
/* Ten rows in a 7fr column would leave ~700px of empty bone beside a head that
   is only ~200px tall - the same defect one column over. The head takes the
   page's own 5fr/7fr register and the list runs the full width in two
   COLUMN-major tracks, so it reads down the inline-start five and then down
   the inline-end five, not left-right in pairs. */
@media (min-width: 900px) {
  .scope__list {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: 1fr 1fr;
    column-gap: 56px;
  }
}
.scope__row { padding-block: 14px; border-block-end: 1px solid var(--rule-paper); }
.scope__name {
  font-size: var(--t-label);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}
.scope__detail {
  margin-block-start: 6px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.scope__note {
  margin-block-start: 20px;
  color: var(--ink-soft);
  max-width: 46ch;
}

.closing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 24px;
  margin-block-start: 48px;
  padding-block-start: 36px;
  border-block-start: 1px solid var(--rule-paper-strong);
}
.closing__line { font-family: var(--f-heb); font-size: var(--t-sub); }

/* Three 11px --ink-soft runs at one weight read as one undifferentiated grey
   run: legible (5.74:1) but with no hierarchy, so the reader cannot see which
   one is HERE. The separator recedes, the current page carries the weight. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: var(--t-micro);
  margin-block-end: 10px;
}
/* .crumbs a { position: relative } is gone with the ::before it anchored (§5). */
.crumbs > [aria-hidden="true"]  { opacity: 0.45; }
.crumbs > [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* The one navigational escape on the gallery page. It stays a quiet link
   rather than becoming a third pill - the CTA must remain the loudest thing in
   the row - but it is pushed to the inline-end edge instead of being
   flex-packed against the CTA, and it now has a hover state at all. */
.back {
  margin-inline-start: auto;
  padding-inline: 16px;
  color: var(--ink-soft);
  --ghost: var(--emerald);
  --ghost-op: 0.07;
}
@media (hover: hover) and (pointer: fine) {
  .back:hover { color: var(--ink); }
}

/* ------------------------------------------------- 18. THE WIDE TIERS
   Measured, headless Chrome, before this block existed: at a 2560 window the
   layout viewport is 2550 and the page column sits 731px in from each edge -
   1088px of content inside 2550px of screen, with the hero carrying a 520px
   figure and a 411px word in a 700px band. The column was fixed at 1200 for
   every width from 1312 up, so the whole page got narrower, relatively, the
   bigger the monitor.

   Two tiers. Tier A moves the COLUMN and nothing else, so the owner-tested
   scale law at <=1920 - wordmark <=96, headings <=44, body 16-17, ledger <=64 -
   stands exactly as tested. Tier B is the only place any type grows and it is
   the tier the owner's ~2560 monitor lands in.
   --t-fig stays 64: no authority was given above it, and the ledger gains its
   presence from the wider column instead. --t-body stays 17: 18 would collide
   with --t-lead and --t-sub and collapse three roles into one. */

/* WIDE TIER A: >= 1600. Column only. 1200 -> 1320 is +10% of column for +11%
   of viewport at 1600. */
@media (min-width: 1600px) {
  :root { --page-max: 1320px; }
}

/* WIDE TIER B: >= 2200. --t-mark 116 is the brief's ceiling; --t-h1 44 and
   --t-h2 40 are both at or under the 44px heading ceiling that governs every
   width already. */
@media (min-width: 2200px) {
  :root {
    --page-max: 1440px;
    --t-mark:   116px;
    --t-h1:     44px;
    --t-h2:     40px;
    --t-fig-sm: 34px;
    --sec-y:    104px;
  }
}

/* THE ULTRAWIDE HERO. The cutout is sized by viewport HEIGHT, not by the
   horizontal void: a cover figure should grow with the fold. At 2560x1440 she
   was 520px in a 700px band (65.5%); she is now 617 in 900 (68.6%).
   617 is a hard cap and here is the arithmetic: the source is 1400px wide, so
   700 css px is the largest width a DPR-2 screen can ask for without
   upscaling, and 700 / 1.1336 = 617.5. The old 520 was the same discipline at
   a 2x safety margin; this spends that margin deliberately and stops at 1:1.
   Clearance to the wordmark's B is re-measured after this block and is stated
   in the implementation report - the floor of 112px is never crossed. */
@media (min-width: 1600px) {
  .hero { min-height: clamp(640px, 70vh, 800px); }
  .hero__cutout {
    width: auto;
    height: min(48vh, 520px);          /* width = 1.1336 x height, cap 589 */
  }
  .hero__cutout img { width: auto; height: 100%; }

  /* The band grows with the column, so the two doors keep their proportion
     instead of turning into a letterbox. */
  .teaser__half { min-height: 320px; }
}

@media (min-width: 2200px) {
  .hero { min-height: clamp(760px, 64vh, 900px); }
  .hero__cutout {
    /* At this tier she stands ON the column's inline-end content edge rather
       than 100px inboard of it. That is exactly what the 116px wordmark
       needs back. */
    inset-inline-end: max(0px, calc(50vw - var(--page-max) / 2 + var(--gut)));
    height: min(44vh, 617px);
  }

  .teaser__half { min-height: 380px; }
}

/* ------------------------------------------------------ 19. RESPONSIVE */

@media (max-width: 767px) {
  :root { --head-h: 60px; }

  /* The nav is two links at EVERY width now. It used to be five, three of
     which display:none removed below 768 with no hamburger and no
     replacement - on work.html that left a phone visitor with no route to any
     home-page section at all. */
  .nav { gap: 2px; }
  .nav__link { font-size: 15px; padding-inline: 10px; }
  .header__mark { font-size: 20px; }
  /* At 390 the bar already carries a 20px wordmark and two 44px pills; a third
     target crosses into collision. The mobile contact route is the fixed
     .m-callbar, which carries BOTH WhatsApp and the number - so the LOGIC is
     identical (transparent over the hero, solid past it) and only the contents
     differ, because this viewport already has a better-placed contact bar. */
  .header__sep,
  .header__wa { display: none; }
  .header__in { gap: 12px; }

  .hero__cta .pill,
  .contact__cta .pill { flex: 1 1 100%; }

  /* One column: the seam turns with the stack. */
  .teaser { grid-template-columns: 1fr; margin-block-start: 40px; }
  /* Inline padding is not touched here any more: below --page-max the
     --band-inset max() already resolves to --gut on both sides. */
  .teaser__half { min-height: 200px; padding-block: 32px 28px; }
  .teaser__half + .teaser__half {
    border-inline-start: 0;
    border-block-start: 1px solid var(--rule-dark);
  }

  /* The register folds to 2 x 2 rather than four 1-column rows. */
  .reels { grid-template-columns: repeat(2, 1fr); }
  .reel { padding-block: 20px; }
  .reel:nth-child(-n+2) { border-block-end: 1px solid var(--rule-dark); }
  .reel:nth-child(even) {
    border-inline-start: 1px solid var(--rule-dark);
    padding-inline-start: 20px;
  }
  .reel:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }

  /* DESIGN-V5 6.3, mobile: "each row becomes a 2-line block: descriptor line,
     then before -> after on one baseline with the arrow rotated to horizontal;
     the multiple moves under the descriptor as an 11px brass tag."
     What was built instead was `1fr auto`, which threw the AFTER figure to one
     edge and the before figure to the other: measured at 390, 16.5K's right
     edge sat at css x=114 and 32's left edge at x=325 - 211 css px of empty
     beige, 54% of the viewport, between the two numbers the row exists to
     compare, bridged by a 16px inline arrow, with no column labels at all
     because the head row is display:none here.
     Now: both figures are packed at the inline-start with the real 28px brass
     arrow between them, each under its own 11px label, and the 1fr fourth
     column absorbs all the slack at the inline-end. */
  .ledger__row {
    grid-template-columns: auto 28px auto 1fr;
    column-gap: 12px;
    row-gap: 6px;
    align-items: end;
    padding-block: 20px;
  }
  .ledger__row--head { display: none; }
  .ledger__cell--name   { grid-area: 1 / 1 / 2 / -1; }
  .ledger__cell--mult   { grid-area: 2 / 1 / 3 / -1; }
  .ledger__cell--before { grid-area: 3 / 1 / 4 / 2; align-self: last baseline; }
  .ledger__cell--arrow  { grid-area: 3 / 2 / 4 / 3; display: block; align-self: last baseline; }
  .ledger__cell--after  { grid-area: 3 / 3 / 4 / 4; align-self: last baseline; }
  /* BUSINESS 01 under עסק א׳ is a second name for the same row. On a 390px
     phone it is 11px of Latin furniture in a block that is trying to be 132px
     tall - and the spec's mobile row does not have it. */
  .ledger__slug { display: none; }
  .ledger__lab {
    display: block;
    font-size: var(--t-micro);
    font-weight: 600;
    line-height: 1;
    color: var(--ink-soft);
    margin-block-end: 6px;
  }
  .ledger__mult { text-align: start; font-size: var(--t-micro); }

  .strip__intro { flex: 1 1 100%; }

  .site-foot { padding-block-end: 108px; }   /* clear of the fixed call bar */
}

@media (max-width: 419px) {
  .header__mark { font-size: 18px; }
  /* In RTL the decorative middot wraps to its own line and strands itself at
     the far edge. It carries nothing; drop it. */
  .foot__by[aria-hidden="true"] { display: none; }
}

@media (min-width: 768px) {
  .hero__cta .pill, .contact__cta .pill { min-width: 190px; }
}

/* Print: the ledger and the contact details are the only things worth paper.
   motion.css carries the matching @media print block that releases every
   reveal - without it the printed page was the blank page. */
/* Every new transition here is opacity or transform, and every one is killed.
   The STATES still change - instantly. Nothing is stranded. */
@media (prefers-reduced-motion: reduce) {
  .header::before, .header::after,
  .hero__cue,
  .teaser__half::before, .teaser__go .arrow,
  .pill::before, .nav__link::before, .foot__nav a::before, .back::before,
  .header__wa::before, .sw__pill::before,
  .nav__link, .foot__nav a, .back, .header__wa, .pill, .sw__pill {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .teaser__go .arrow,
  .teaser__half:hover .arrow,
  .teaser__half:focus-visible .arrow,
  .nav__link:active, .foot__nav a:active, .back:active,
  .header__wa:active, .teaser__half:active { transform: none !important; }
}

@media print {
  .header, .callbar, .hero__silk, .hero__scrim, .hero__grain, .hero__cutout,
  .hero__cue, .about__por { display: none; }
  body { background: #fff; color: #000; }
  .sec { padding-block: 24px; }
}

/* =====================================================================
   14. THE ASSET FAMILY - photography integrated into the bands
   One lighting world (emerald silk, hard side light, black shadow) shot as
   a family on fal.ai. Every asset is DARKENED into the hero's emerald range
   so the page reads as one photoshoot, never as decorated stock. Rules:
   backgrounds bleed with their band, nothing is boxed, text contrast is
   preserved by the scrim - not by luck.
   ===================================================================== */

/* --- teaser halves: the still sits behind the type, heavily scrimmed ---- */
.teaser__half {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  isolation: isolate;
}
.teaser__half::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(15, 46, 38, 0.86) 0%,
    rgba(15, 46, 38, 0.70) 45%,
    rgba(8, 31, 25, 0.90) 100%);
  transition: background 260ms var(--e-out, ease-out);
}
.teaser__half:nth-child(1) { background-image: url("../img/bridal-still-1600.jpg"); }
.teaser__half:nth-child(2) { background-image: url("../img/business-still-1600.jpg"); }
/* Hover lifts the veil a little instead of adding a fill - the photograph is
   the reward, and it stays legible because the scrim never drops below .72 */
.teaser__half:hover::after,
.teaser__half:focus-visible::after {
  background: linear-gradient(
    to bottom,
    rgba(15, 46, 38, 0.74) 0%,
    rgba(15, 46, 38, 0.54) 45%,
    rgba(8, 31, 25, 0.82) 100%);
}

/* --- contact plate: the silk wave, its dark upper field holds the type --- */
.sec--deep#contact {
  position: relative;
  isolation: isolate;
  background-color: var(--deep);
  background-image:
    linear-gradient(to bottom, rgba(8,31,25,0.93) 0%, rgba(8,31,25,0.62) 45%, rgba(8,31,25,0.80) 100%),
    image-set(url("../img/contact-silk-1920.jpg") 1x);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
}
/* The ambient loop, injected by main.js on desktop with motion allowed. */
.plate-video {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms var(--e-out, ease-out);
  pointer-events: none;
}
.plate-video.is-ready { opacity: 1; }
.sec--deep#contact > .wrap { position: relative; z-index: 1; }

/* --- light sections: the ivory silk gives the paper a material ---------- */
.sec--bone::before,
.sec--beige::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/bone-silk-1920.jpg");
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.05;
}
.sec--bone, .sec--beige { position: relative; isolation: isolate; }
.sec--bone > .wrap, .sec--beige > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .plate-video { display: none; }
}

/* =====================================================================
   15. THE SEAM AND THE FOOTER
   ===================================================================== */

/* The works section ends in a full-bleed band. Its own bottom padding was
   therefore painting an empty emerald strip between the band's bottom rule
   and the contact plate - a seam that read as a rendering fault. The band IS
   the section's end, so the section stops where the band stops. */
#work { padding-block-end: 0; }
#work .teaser { border-block-end: 0; }

/* --- footer ------------------------------------------------------------
   Three fields on the page column, a hairline, then a quiet base row. */
.site-foot {
  background: var(--deep);
  color: var(--sand);
  border-block-start: 1px solid var(--rule-dark);
}
.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-block: clamp(40px, 5vw, 68px) clamp(28px, 3.5vw, 44px);
}
.foot__mark {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(19px, 1.5vw, 24px);
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--bone);
}
.foot__tag {
  margin-block-start: 14px;
  max-width: 34ch;
  font-size: var(--t-body-s, 15px);
  line-height: 1.75;
  color: var(--sage);
}
.foot__col { display: flex; flex-direction: column; align-items: start; }
.foot__ttl {
  font-size: var(--t-micro, 11px);
  letter-spacing: 0.18em;
  color: var(--sage);
  margin-block-end: 6px;
}
/* min-width as well as min-height: short Hebrew words ("בית") make a 20px-wide
   link, which is a 20x44 target no matter how tall the box is. The text still
   starts at the inline-start edge, so nothing moves visually. */
.foot__col a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--sand);
  text-decoration: none;
  font-size: 15px;
  transition: color 150ms var(--e-out, ease-out);
}
.foot__col a:hover { color: var(--bone); }
.foot__tel { font-size: 17px !important; letter-spacing: 0.01em; }

.foot__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding-block: 18px 22px;
  border-block-start: 1px solid var(--rule-dark);
  font-size: var(--t-micro, 11px);
  letter-spacing: 0.1em;
  color: var(--sage);
}
.foot__base .foot__by { letter-spacing: 0; }

@media (max-width: 860px) {
  .foot__top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot__top { grid-template-columns: 1fr; }
  .foot__base { justify-content: flex-start; }
}

/* =====================================================================
   16. THE REACH - the one cinematic band
   Full-bleed dark silk plate carrying her single strongest number. This is
   the ONLY place type passes the heading ceiling, and it is a numeral, not
   a sentence: 621.3K is the argument the whole section exists to make.
   ===================================================================== */
.reach {
  position: relative;
  isolation: isolate;
  margin-inline: calc(50% - 50vw);
  margin-block-start: 44px;
  border-block: 1px solid var(--rule-dark);
  overflow: hidden;
}
.reach__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/reach-2200.jpg");
  background-size: cover;
  background-position: center;
}
.reach::after {              /* the scrim that guarantees the numerals */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(8, 31, 25, 0.86) 0%,
    rgba(8, 31, 25, 0.68) 45%,
    rgba(8, 31, 25, 0.90) 100%);
}
.reach__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 700ms var(--e-out, ease-out);
}
.reach__video.is-ready { opacity: 1; }

.reach__in {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(46px, 6vw, 88px) var(--gut);
}
.reach__slug { display: block; color: var(--sage); }

/* The band was heavy at the inline-start and empty across its whole other
   half. Two fields on one baseline: the figure anchors its edge, the note
   holds the far edge, and the small counts spread the full width beneath. */
.reach__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 40px;
  margin-block-start: 22px;
}
.reach__note {
  font-size: 15px;
  line-height: 1.7;
  color: var(--sage);
  max-width: 26ch;
}
.reach__hero {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.reach__num {
  font-family: var(--f-display);
  font-size: clamp(3.4rem, 8vw, 7rem);   /* numeral-only exception */
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.reach__cap { font-size: 15px; color: var(--sand); }

.reach__rest {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-block-start: clamp(28px, 3.5vw, 44px);
  padding-block-start: 20px;
  border-block-start: 1px solid var(--rule-dark);
  list-style: none;
}
.reach__rest { justify-content: space-between; }
.reach__rest li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.reach__n {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.reach__u { font-size: var(--t-micro, 11px); letter-spacing: 0.12em; color: var(--sage); }

@media (max-width: 560px) {
  .reach__rest li { padding-inline-end: 26px; }
}
@media (prefers-reduced-motion: reduce) { .reach__video { display: none; } }

/* =====================================================================
   17. THE COVER - hero rebuilt around the three-quarter figure
   She is bottom-flush on every viewport, phones included. The old crop was
   head-and-shoulders, which is why she had to be hidden below 1024 and why
   she never filled the plate at 1920+. Overrides section 7 deliberately.
   ===================================================================== */

.hero { position: relative; isolation: isolate; }

.hero__cutout {
  display: block;
  position: absolute;
  z-index: 2;
  bottom: 0;
  inset-inline-end: max(var(--gut), calc(50vw - var(--page-max) / 2));
  width: auto;
  height: min(78vh, 700px);
  pointer-events: none;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45));
}
.hero__cutout img {
  display: block;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

/* The type sits on the opposite side, vertically centred against her. */
.hero__in { position: relative; z-index: 3; }

/* A soft vertical wash under the type so it never fights the silk. */
.hero__scrim {
  background:
    linear-gradient(to bottom, rgba(8,31,25,0.62) 0%, rgba(8,31,25,0.30) 40%, rgba(8,31,25,0.86) 100%);
}

@media (min-width: 1024px) {
  .hero { min-height: min(92vh, 900px); display: flex; align-items: center; }
  .hero__cutout { height: min(80vh, 760px); }
}
@media (min-width: 1600px) {
  .hero { min-height: min(90vh, 950px); }
  .hero__cutout { height: min(80vh, 820px); }
}
@media (min-width: 2200px) {
  .hero { min-height: min(88vh, 1020px); }
  .hero__cutout { height: min(80vh, 900px); }
}

/* ---- phones: she is the lower half of the cover, type is the upper ---- */
@media (max-width: 1023px) {
  .hero {
    min-height: 92svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-block-start: clamp(78px, 15vh, 128px);
    overflow: hidden;
  }
  /* Centre WITHOUT a transform. inset-inline-end:50% + translateX(50%) does
     not centre in RTL - it pushed her into the corner and off the canvas,
     which is where the two overflow hits came from. Auto margins between two
     zeroed logical insets centre correctly in both directions. */
  .hero__cutout {
    inset-inline-start: 0;
    inset-inline-end: 0;
    margin-inline: auto;
    width: fit-content;
    transform: none;
    height: min(54svh, 480px);
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.5));
  }
  /* The type must clear her head: it stops above the figure, and the scrim
     under it is stronger because the silk is busiest at phone crops. */
  .hero__in { padding-block-end: min(52svh, 470px); }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(8,31,25,0.80) 0%, rgba(8,31,25,0.52) 42%, rgba(8,31,25,0.92) 100%);
  }
}
@media (max-width: 560px) {
  .hero__cutout { height: min(46svh, 400px); }
  .hero__in { padding-block-end: min(46svh, 400px); }
}

/* Print: the figure is decorative here. */
@media print { .hero__cutout { display: none; } }

/* =====================================================================
   18. THE HEADER - refinement pass
   Glass over the silk, a drawn underline instead of a colour swap, and a
   hairline that reports reading progress. Nothing here moves layout.
   ===================================================================== */

/* Glass only in the solid state: over the hero the bar must stay invisible,
   and a blur over a photograph at the top of the page reads as a smudge. */
.header::before {
  -webkit-backdrop-filter: blur(14px) saturate(118%);
  backdrop-filter: blur(14px) saturate(118%);
}

/* Progress hairline. Scale-X only - it never triggers layout. */
.header__prog {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(to left, var(--brass-lit, #B8A98E), rgba(184,169,142,0.25));
  transform: scaleX(0);
  transform-origin: right center;      /* RTL: progress grows leftward */
  opacity: 0;
  transition: opacity 220ms var(--e-out, ease-out);
  pointer-events: none;
}
.header.is-solid .header__prog { opacity: 1; }
html[dir="ltr"] .header__prog { transform-origin: left center; }

/* Nav: an underline that draws from the reading edge, not a colour flash. */
.nav__link {
  position: relative;
  padding-block: 2px;
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 220ms var(--e-out, cubic-bezier(0.25,1,0.5,1));
}
html[dir="ltr"] .nav__link::after { transform-origin: left center; }
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); opacity: 0.55; }

/* The wordmark gets the same treatment at a quieter weight. */
.header__mark { position: relative; }
.header__mark::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 260ms var(--e-out, cubic-bezier(0.25,1,0.5,1));
}
.header__mark:hover::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .nav__link::after, .header__mark::after, .header__prog { transition: none; }
}

/* =====================================================================
   19. THE CRAFT PLATE + a denser scope index
   The light zone was ~2,900px of cream with no image and an empty half.
   ===================================================================== */

.craft {
  position: relative;
  margin-inline: calc(50% - 50vw);
  margin-block: clamp(52px, 6vw, 92px) clamp(44px, 5vw, 76px);
  overflow: hidden;
}
.craft img {
  display: block;
  width: 100%;
  height: clamp(220px, 30vw, 420px);
  object-fit: cover;
  object-position: center 58%;
}
.craft__cap {
  position: absolute;
  inset-inline-start: max(var(--gut), calc(50vw - var(--page-max) / 2 + var(--gut)));
  bottom: clamp(18px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--bone);
  text-shadow: 0 1px 18px rgba(8, 31, 25, 0.8);
}
.craft__cap .label { color: var(--brass-lit, #B8A98E); }
.craft__line { font-size: clamp(15px, 1.5vw, 19px); line-height: 1.5; }

/* ---- the scope index: columns, not dot-runs ---------------------------
   Three dot-separated word-runs read as a sitemap footer. Each group is now
   a column of its own items on hairlines, which is the same register the
   ledger uses - one idea reused, per the system. */
.idx__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(24px, 3vw, 56px);
  margin-block-start: 26px;
}
.idx__group { border-block-start: 1px solid var(--rule); padding-block-start: 14px; }
.idx__label {
  font-size: var(--t-micro, 11px);
  letter-spacing: 0.16em;
  color: var(--brass, #7A6840);
  margin-block-end: 10px;
}
.idx__items {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.idx__items .dot { display: none; }        /* separators are the gaps now */

@media (max-width: 860px) {
  .idx__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .idx__group:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .idx__list { grid-template-columns: 1fr; }
  .idx__group:nth-child(3) { grid-column: auto; }
  .idx__group + .idx__group { margin-block-start: 18px; }
}

/* The about portrait is now the HD figure, so it needs a real box. */
.about__por img { object-fit: cover; object-position: center top; }

/* =====================================================================
   20. THE WORKS GRID - three columns, and the intro leaves the grid
   21 business frames and 3 event frames BOTH divide exactly by 3, so a
   three-column grid gives 7 perfect rows and 1 perfect row with no orphan
   and no hole. At 4 and 5 columns the remainder forced the intro into the
   grid to plug a gap, which produced a lone frame beside ~875x300 of empty
   bone as the first thing under the tabs. Three columns also makes each
   9:16 frame ~380px instead of ~215px - on a page whose only job is
   showing pictures, bigger is the point.
   ===================================================================== */
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1280px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* The intro is a caption for the whole set, not a grid cell. It sits above
   the frames on the page column at every width. */
.grid > .panel__intro,
.panel--short .panel__intro,
.panel:not(.panel--short) .panel__intro {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  align-self: start !important;
  max-width: 62ch;
  margin-block-end: 20px !important;
}

/* Frames: raw on the canvas, a slow de-zoom on hover, nothing boxed. */
.grid img, .grid picture, .grid a { display: block; width: 100%; }
.grid figure, .grid a { overflow: hidden; }
.grid img { transition: transform 520ms var(--e-out, cubic-bezier(0.25,1,0.5,1)); }
.grid a:hover img, .grid figure:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .grid img { transition: none; }
  .grid a:hover img, .grid figure:hover img { transform: none; }
}

/* =====================================================================
   21. DENSITY PASS - the column was never being filled
   MEASURED at 1920 before this block: .wrap = 1320px, but .duo resolved to
   a fixed "480px 672px" (1208px incl. gap) and .idx__list was 672px wide
   starting 56px INSIDE the column - so the scope index used barely half the
   page and the rest was dead bone. Small type in a half-empty column is
   what reads as unfinished. Everything below fills the measure and raises
   the ramp one step. The scale law still holds: nothing here passes 48px.
   ===================================================================== */

/* ---- fill the column ---- */
.duo {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(40px, 4vw, 72px);
}
.duo__body { max-width: 62ch; }

/* The index now spans the whole column: a narrow head, then three generous
   columns instead of three 186px slivers. */
.idx {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: clamp(40px, 4vw, 72px);
  align-items: start;
}
.idx__list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 clamp(28px, 3vw, 56px);
  width: 100%;
  margin-block-start: 0;
}
.idx__items { font-size: 16px; line-height: 1.55; gap: 9px; }
.idx__label { font-size: 12px; letter-spacing: 0.15em; margin-block-end: 12px; }

/* ---- one step up the ramp: 1320px of measure needs more than 34px ---- */
.h2  { font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1.18; }  /* 28 -> 44 */
.lead { font-size: clamp(1.0625rem, 1.25vw, 1.3125rem); line-height: 1.65; } /* 17 -> 21 */
.body { font-size: clamp(1rem, 1.05vw, 1.125rem); line-height: 1.75; }  /* 16 -> 18 */
.idx__h { font-size: clamp(1.25rem, 1.6vw, 1.625rem); }                  /* 20 -> 26 */
.idx__note { font-size: 16px; line-height: 1.7; }

/* ---- section rhythm: less dead air above and below sparse content ---- */
@media (min-width: 1024px) {
  .sec { padding-block: clamp(64px, 5.5vw, 96px); }
  #about .idx { margin-block-start: clamp(40px, 4vw, 64px); }
}

/* The works teaser head had 88px of emerald above a two-line heading and
   then a gap before the reach band. Tighten the head, keep the band. */
#work { padding-block-start: clamp(56px, 4.5vw, 80px); }
#work .duo { margin-block-end: clamp(28px, 3vw, 44px); }

@media (max-width: 1023px) {
  .idx { grid-template-columns: 1fr; row-gap: 26px; }
  .duo { grid-template-columns: 1fr; row-gap: 20px; }
}

/* The scope index sits inside #about, so #about .idx beats the bare .idx
   rule that was still resolving to 5fr/7fr with a 56px gap. Measured: the
   list was 757px inside a 1320px column, starting 56px inboard. */
@media (min-width: 1024px) {
  #about .idx {
    display: grid;
    grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr);
    column-gap: clamp(40px, 3.5vw, 64px);
    align-items: start;
  }
  #about .idx__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(24px, 2.6vw, 48px);
    width: 100%;
  }
}

/* =====================================================================
   22. THE ABOUT SPREAD
   MEASURED: the section was 1,439px tall to carry one heading and two
   paragraphs, with the entire inline-end third of a 1320px column empty.
   The portrait was built for phones and hidden on the very viewport with
   the hole in it. It now holds that third as the spread's third column:
   heading / text / her. Personal brand, so the person is on the page.
   ===================================================================== */
@media (min-width: 1024px) {
  #about .duo {
    grid-template-columns: minmax(0, 3.4fr) minmax(0, 5.2fr) minmax(0, 3.4fr);
    column-gap: clamp(32px, 3vw, 56px);
    align-items: end;
  }
  #about .about__por {
    display: block;
    position: relative;
    align-self: end;
    margin-block-end: -6px;          /* sits ON the section's baseline */
  }
  #about .about__por img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 440px;
    object-fit: cover;
    object-position: center 12%;      /* her face, not her hem */
  }
  /* A hairline under her, so she is seated on the register like everything
     else on this page rather than floating in bone. */
  #about .about__por::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 1px;
    background: var(--rule, rgba(20,18,16,0.16));
  }
  #about .duo__body { max-width: none; padding-block-end: 8px; }
  #about .duo__head { padding-block-end: 8px; }
}

/* Phones keep the old behaviour: she sits under the heading, full width. */
@media (max-width: 1023px) {
  #about .about__por { display: block; max-width: 260px; margin-block: 4px 18px; }
  #about .about__por img { width: 100%; height: auto; }
}