/* ==========================================================================
   BAR'EVO SOCIAL — EDITORIAL SYSTEM (rewritten clean, not layered)
   Loaded after style.css and deliberately authoritative over it.
   One system: tokens → type → grid → surfaces → buttons → sections → motion.
   ========================================================================== */

:root {
  /* colour — seven values, nothing else */
  --g-deep:  #032D25;
  --g-black: #011B17;
  --g-em:    #06483B;
  --ivory:   #F4F0E8;
  --cream:   #EBE4D8;
  --champ:   #B8A27D;
  --white:   #F9F7F2;

  --ink:       #16211D;
  --ink-soft:  #4B5A54;
  --on-dark:   #D8DCD6;
  --on-dark-2: #93A79E;

  --line-dark:  rgba(248, 247, 242, 0.16);
  --line-light: rgba(22, 33, 29, 0.16);

  /* grid */
  --page: 1560px;
  --gutter: clamp(20px, 4.4vw, 76px);
  --col-gap: clamp(18px, 2.2vw, 38px);

  /* type */
  --f-disp: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --f-heb:  'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  --f-ui:   'Assistant', 'Segoe UI', system-ui, sans-serif;

  --t-hero:      clamp(4.5rem, 8vw, 9.375rem);
  --t-display:   clamp(2.75rem, 5vw, 5.25rem);
  --t-statement: clamp(1.75rem, 3.2vw, 3.25rem);
  --t-h3:        clamp(1.5rem, 2.3vw, 2.375rem);
  --t-lead:      clamp(1.125rem, 1.35vw, 1.375rem);
  --t-body:      clamp(1rem, 1.1vw, 1.1875rem);
  --t-micro:     13px;
  --t-metric-lg: clamp(6rem, 15vw, 16.25rem);
  --t-num:       clamp(7rem, 20vw, 24rem);

  /* motion — one feel */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 240ms;
  --d-mid: 420ms;
  --d-slow: 620ms;
}

::selection { background: var(--champ); color: var(--g-black); }

/* ------------------------------------------------------------- GRID ----- */

.shell { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }

/* The header is fixed, so an anchor that lands flush at the top of the
   viewport puts the thing you asked for UNDERNEATH it — 60px of it on a
   phone, more on a desktop. Every element anything links to reserves that
   much room above itself when it is the scroll target. */
section[id], [id="main"], [id="top"] { scroll-margin-block-start: clamp(72px, 6vw, 112px); }

/* ----------------------------------------------------------- SURFACES --- */

.ed { position: relative; isolation: isolate; overflow: hidden; }
.s-deep  { background: var(--g-deep);  color: var(--on-dark); }
.s-black { background: var(--g-black); color: var(--on-dark); }
.s-ivory { background: var(--ivory);   color: var(--ink); }
.s-cream { background: var(--cream);   color: var(--ink); }

/* Vertical rhythm is deliberately unequal — three heights, assigned by role. */
.pad-s { padding-block: clamp(56px, 6vw, 104px); }
.pad-m { padding-block: clamp(84px, 9vw, 168px); }
.pad-l { padding-block: clamp(104px, 12vw, 224px); }

/* ------------------------------------------------------------- TYPE ----- */

.micro {
  font-family: var(--f-ui); font-size: var(--t-micro); font-weight: 400;
  letter-spacing: 0.22em; line-height: 1; text-transform: uppercase;
  margin: 0; color: var(--champ);
}
.s-ivory .micro, .s-cream .micro { color: #8A7649; }

.disp {
  font-family: var(--f-heb); font-weight: 300; font-size: var(--t-display);
  line-height: 1.06; letter-spacing: -0.01em; margin: 0;
  max-width: 15em; text-wrap: balance; color: var(--white);
}
.s-ivory .disp, .s-cream .disp { color: var(--g-deep); }
.disp em { font-style: normal; color: var(--champ); }

.stmt {
  font-family: var(--f-heb); font-weight: 300; font-size: var(--t-statement);
  line-height: 1.22; letter-spacing: -0.005em; margin: 0;
  max-width: 17em; text-wrap: balance; color: var(--white);
}
.s-ivory .stmt, .s-cream .stmt { color: var(--g-deep); }

.lead {
  font-family: var(--f-ui); font-size: var(--t-lead); line-height: 1.62;
  margin: 0; max-width: 34em; color: var(--on-dark);
}
.s-ivory .lead, .s-cream .lead { color: var(--ink-soft); }

.copy {
  font-family: var(--f-ui); font-size: var(--t-body); line-height: 1.78;
  margin: 0; max-width: 38em; color: var(--on-dark-2);
}
.s-ivory .copy, .s-cream .copy { color: var(--ink-soft); }

.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* The running index. Same anchor in every section, so it reads as a system. */
.snum {
  position: absolute; z-index: 0; top: -0.14em;
  inset-inline-start: calc(var(--gutter) * 0.4);
  font-family: var(--f-disp); font-size: var(--t-num);
  line-height: 0.8; letter-spacing: -0.03em;
  color: rgba(248, 247, 242, 0.055);
  pointer-events: none; user-select: none;
}
.s-ivory .snum, .s-cream .snum { color: rgba(3, 45, 37, 0.06); }
.snum--end { inset-inline-start: auto; inset-inline-end: calc(var(--gutter) * 0.4); }

.rule-h { display: block; width: 100%; height: 1px; background: var(--line-dark); border: 0; margin: 0; }
.s-ivory .rule-h, .s-cream .rule-h { background: var(--line-light); }

/* ----------------------------------------------------------- BUTTONS ---- */

.b {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 62px; padding-inline: clamp(26px, 2.4vw, 42px);
  font-family: var(--f-ui); font-size: 16px; letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent; border-radius: 3px;
  transition: background-color var(--d-fast) var(--ease),
              color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.b--fill { background: var(--ivory); color: var(--g-deep); border-color: var(--ivory); }
.b--fill:hover { background: var(--white); border-color: var(--white); }
.b--line { background: transparent; color: var(--white); border-color: rgba(248,247,242,0.42); }
.b--line:hover { border-color: var(--white); background: rgba(248,247,242,0.07); }
.s-ivory .b--fill, .s-cream .b--fill { background: var(--g-deep); color: var(--ivory); border-color: var(--g-deep); }
.s-ivory .b--fill:hover, .s-cream .b--fill:hover { background: var(--g-black); border-color: var(--g-black); }
.s-ivory .b--line, .s-cream .b--line { color: var(--g-deep); border-color: rgba(3,45,37,0.34); }
.s-ivory .b--line:hover, .s-cream .b--line:hover { border-color: var(--g-deep); background: rgba(3,45,37,0.05); }

.tl {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 48px; min-width: 48px;
  font-family: var(--f-ui); font-size: 15px; letter-spacing: 0.06em;
  text-decoration: none; color: var(--white);
  border-block-end: 1px solid currentColor; padding-block-end: 3px;
}
.s-ivory .tl, .s-cream .tl { color: var(--g-deep); }
.tl i { font-style: normal; transition: transform var(--d-mid) var(--ease); }
.tl:hover i { transform: translateX(-6px); }

/* ------------------------------------------------------- IMAGE ROLES ---- */

.fig { margin: 0; overflow: hidden; position: relative; }
.fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fig--zoom img { transition: transform var(--d-slow) var(--ease); }
.fig--zoom:hover img { transform: scale(1.025); }
.fig--face img { object-position: center 22%; }

/* ================================================================ HERO == */

.hx {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 96svh; display: flex; align-items: center; background: var(--g-deep);
}
.hx__silk { position: absolute; inset: 0; z-index: 0; }
.hx__silk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hx__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(1,27,23,0.70) 0%, rgba(1,27,23,0.26) 34%, rgba(1,27,23,0.52) 72%, rgba(3,45,37,0.94) 100%),
    radial-gradient(78% 60% at 74% 46%, rgba(1,27,23,0) 0%, rgba(1,27,23,0.44) 100%);
}
.hx__pool {
  position: absolute; z-index: 2; bottom: 0; pointer-events: none;
  inset-inline-start: max(var(--gutter), calc(50vw - var(--page)/2));
  width: min(740px, 52vw); height: min(76svh, 760px);
  background: radial-gradient(58% 48% at 50% 64%,
    rgba(12,110,86,0.36) 0%, rgba(6,72,59,0.18) 46%, rgba(3,45,37,0) 74%);
  filter: blur(10px);
}
.hx__figure {
  position: absolute; z-index: 3; bottom: 0; pointer-events: none;
  inset-inline-start: max(var(--gutter), calc(50vw - var(--page)/2));
  width: auto; height: min(88svh, 900px);
}
.hx__figure img {
  display: block; width: auto; height: 100%;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 40px 44px rgba(1,15,12,0.52));
}
.hx__contact {
  position: absolute; z-index: 2; bottom: -14px; pointer-events: none;
  inset-inline-start: max(var(--gutter), calc(50vw - var(--page)/2));
  width: min(500px, 38vw); height: 94px;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(1,15,12,0.64) 0%, rgba(1,15,12,0.24) 48%, rgba(1,15,12,0) 76%);
  filter: blur(12px);
}
.hx__in { position: relative; z-index: 4; width: 100%; }
.hx__type { grid-column: 7 / 13; }
.hx__mark {
  font-family: var(--f-disp); font-size: var(--t-hero);
  line-height: 0.9; letter-spacing: 0.01em; margin: 0; color: var(--white);
}
.hx__kicker { margin-block-start: clamp(16px, 1.8vw, 26px); }
.hx__stmt {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.5rem, 2.3vw, 2.375rem); line-height: 1.3;
  margin: clamp(28px, 3.4vw, 52px) 0 0; max-width: 15em; color: var(--white);
}
.hx__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: clamp(32px, 3.6vw, 54px); }

/* ============================================================ 01 ABOUT == */

/* The ivory panel OVERLAPS the hero — a designed seam, not a fade. */
.about { margin-block-start: clamp(-104px, -6vw, -60px); z-index: 5; }
.about__grid { align-items: center; row-gap: clamp(36px, 5vw, 64px); }
.about__fig { grid-column: 1 / 5; height: clamp(420px, 46vw, 660px); }
.about__fig img { object-position: center 12%; filter: grayscale(0.16) contrast(1.03); }
.about__body { grid-column: 6 / 13; }
.about__stmt { margin-block-start: clamp(20px, 2.2vw, 34px); }
.about__copy { margin-block-start: clamp(20px, 2vw, 30px); }
.sig {
  font-family: var(--f-disp); font-size: clamp(2.25rem, 3.6vw, 3.75rem);
  line-height: 1; color: var(--champ); margin: clamp(28px, 3vw, 46px) 0 0;
}

/* ========================================================= 02 THE WORK == */

.work__head { grid-column: 1 / 9; }
.work__rail {
  display: grid; grid-template-columns: 1.55fr 0.85fr 0.85fr 1.05fr;
  gap: clamp(10px, 1vw, 18px); align-items: end;
  margin-block-start: clamp(44px, 5vw, 76px);
}
.work__f { position: relative; overflow: hidden; }
.work__f img { display: block; width: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease); }
.work__f:hover img { transform: scale(1.025); }
.work__f--feature img { height: clamp(420px, 46vw, 660px); object-position: center 20%; }
.work__f--a img { height: clamp(280px, 30vw, 430px); object-position: center 22%; }
.work__f--b img { height: clamp(240px, 26vw, 370px); object-position: center 24%; }
.work__f--c img { height: clamp(330px, 36vw, 520px); object-position: center 20%; }
.work__meta {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  display: flex; align-items: baseline; gap: 12px;
  padding: clamp(14px, 1.4vw, 22px);
  background: linear-gradient(to top, rgba(1,27,23,0.88) 0%, rgba(1,27,23,0) 100%);
}
.work__meta span { font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); }
.work__meta .yr { color: var(--champ); margin-inline-start: auto; }
.work__foot { margin-block-start: clamp(32px, 3.4vw, 52px); }

/* ========================================================== 03 SERVICES = */

.svc { list-style: none; margin: 0; padding: 0; }
.svc__row { position: relative; }
.svc__row + .svc__row { border-block-start: 1px solid var(--line-light); }
.s-deep .svc__row + .svc__row, .s-black .svc__row + .svc__row { border-block-start-color: var(--line-dark); }
.svc__inner { align-items: center; padding-block: clamp(44px, 5vw, 88px); row-gap: clamp(26px, 3vw, 40px); }
.svc__fig { grid-column: 1 / 6; height: clamp(300px, 32vw, 480px); }
.svc__body { grid-column: 7 / 13; }
.svc__row--flip .svc__fig { grid-column: 8 / 13; }
.svc__row--flip .svc__body { grid-column: 1 / 7; }
.svc__n {
  display: block; font-family: var(--f-disp);
  font-size: clamp(2.5rem, 4vw, 4.5rem); line-height: 0.9;
  color: var(--champ); opacity: 0.62; margin-block-end: clamp(12px, 1.2vw, 18px);
}
.svc__h { font-family: var(--f-heb); font-weight: 300; font-size: var(--t-h3); line-height: 1.14; margin: 8px 0 0; color: var(--white); }
.s-ivory .svc__h, .s-cream .svc__h { color: var(--g-deep); }
.svc__copy { margin-block-start: clamp(14px, 1.4vw, 22px); max-width: 30em; }
.svc__row--type .svc__body { grid-column: 3 / 11; text-align: center; }
.svc__row--type .svc__copy { margin-inline: auto; }

/* =========================================================== 04 RESULTS = */

.res__head { grid-column: 1 / 8; }
.res__list { margin-block-start: clamp(48px, 5.4vw, 86px); }
.res__row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 4fr);
  align-items: baseline; gap: clamp(16px, 2vw, 40px);
  padding-block: clamp(26px, 3vw, 46px);
  border-block-start: 1px solid var(--line-light);
}
.s-deep .res__row, .s-black .res__row { border-block-start-color: var(--line-dark); }
.res__row:last-child { border-block-end: 1px solid var(--line-light); }
.s-deep .res__row:last-child, .s-black .res__row:last-child { border-block-end-color: var(--line-dark); }
.res__big { font-family: var(--f-disp); line-height: 0.86; margin: 0; color: var(--g-deep); }
.s-deep .res__big, .s-black .res__big { color: var(--white); }
/* One metric dominates — the anti-three-equal-columns rule. */
.res__row--1 .res__big { font-size: clamp(4.5rem, 9.5vw, 10.5rem); }
.res__row--2 .res__big { font-size: clamp(3.25rem, 6.2vw, 6.5rem); }
.res__row--3 .res__big { font-size: clamp(2.75rem, 5vw, 5.25rem); }
.res__cap { font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink-soft); margin: 0; }
.s-deep .res__cap, .s-black .res__cap { color: var(--on-dark-2); }
.res__delta { font-family: var(--f-disp); font-size: clamp(1.5rem, 2.2vw, 2.25rem); color: var(--champ); margin: 0; }
.res__ctx { font-family: var(--f-ui); font-size: 15px; color: var(--ink-soft); margin: 6px 0 0; }
.s-deep .res__ctx, .s-black .res__ctx { color: var(--on-dark-2); }

/* ============================================================= 05 REACH = */

.reach {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 84svh; display: flex; align-items: center; background: var(--g-black);
}
.reach__silk { position: absolute; inset: 0; z-index: 0; }
.reach__silk img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reach__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(1,27,23,0.30) 0%, rgba(1,27,23,0.84) 100%),
    linear-gradient(to bottom, rgba(1,27,23,0.72) 0%, rgba(1,27,23,0.28) 44%, rgba(1,27,23,0.88) 100%);
}
.reach__in { position: relative; z-index: 2; width: 100%; text-align: center; }
.reach__num {
  font-family: var(--f-disp); font-size: var(--t-metric-lg);
  line-height: 0.82; letter-spacing: -0.02em;
  margin: clamp(16px, 1.8vw, 28px) 0 0; color: var(--white);
}
.reach__heb {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem); color: var(--on-dark);
  margin: clamp(14px, 1.6vw, 24px) 0 0;
}
.reach__orbit {
  list-style: none; margin: clamp(44px, 5vw, 84px) auto 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 44px); max-width: 1100px;
}
.reach__orbit li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.reach__orbit b { font-family: var(--f-disp); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1; color: var(--white); }
.reach__orbit span { font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-dark-2); }
@media (min-width: 1024px) {
  .reach__orbit li:nth-child(1) { transform: translateY(-26px); }
  .reach__orbit li:nth-child(2) { transform: translateY(14px); }
  .reach__orbit li:nth-child(3) { transform: translateY(-8px); }
  .reach__orbit li:nth-child(4) { transform: translateY(22px); }
}

/* ============================================================ 06 WORLDS = */

.worlds { display: grid; grid-template-columns: 1fr 1fr; min-height: 88svh; }
.wld {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end; text-decoration: none; color: var(--white);
  transition: flex-grow var(--d-slow) var(--ease);
}
.wld__bg { position: absolute; inset: 0; z-index: 0; }
.wld__bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease); }
.wld__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(1,27,23,0.92) 0%, rgba(1,27,23,0.46) 46%, rgba(1,27,23,0.24) 100%);
  transition: background var(--d-slow) var(--ease);
}
.wld__in { position: relative; z-index: 2; padding: clamp(30px, 4vw, 68px); width: 100%; }
.wld__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem); line-height: 1.24; max-width: 15em;
  margin: clamp(14px, 1.6vw, 22px) 0 clamp(22px, 2.4vw, 34px); color: var(--white);
}
.wld + .wld { border-inline-start: 1px solid rgba(248,247,242,0.14); }
@media (min-width: 1024px) {
  .worlds:hover .wld { flex: 1 1 46%; }
  .wld:hover { flex: 1 1 58%; }
  .wld:hover .wld__bg img { transform: scale(1.04); }
  .wld:hover .wld__veil { background: linear-gradient(to top, rgba(1,27,23,0.88) 0%, rgba(1,27,23,0.26) 52%, rgba(1,27,23,0.05) 100%); }
}

/* =============================================================== 07 BTS = */

.bts__head { grid-column: 1 / 8; }
.sheet {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 24px); margin-block-start: clamp(44px, 5vw, 76px);
  align-items: end;
}
.sheet__f { position: relative; overflow: hidden; }
.sheet__f img { display: block; width: 100%; object-fit: cover; transition: transform var(--d-slow) var(--ease); }
.sheet__f:hover img { transform: scale(1.025); }
.sheet__f--1 { grid-column: 1 / 6; }
.sheet__f--1 img { height: clamp(300px, 32vw, 460px); object-position: center 24%; }
.sheet__f--2 { grid-column: 6 / 9; }
.sheet__f--2 img { height: clamp(220px, 24vw, 340px); object-position: center 20%; }
.sheet__f--3 { grid-column: 9 / 13; }
.sheet__f--3 img { height: clamp(260px, 28vw, 400px); }
.sheet__f--4 { grid-column: 3 / 8; }
.sheet__f--4 img { height: clamp(200px, 22vw, 300px); }
.sheet__tag {
  position: absolute; z-index: 2; top: clamp(12px, 1.2vw, 18px);
  inset-inline-start: clamp(12px, 1.2vw, 18px);
  font-family: var(--f-ui); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--white);
  text-shadow: 0 1px 12px rgba(1,27,23,0.9);
}

/* =========================================================== 08 CONTACT = */

.fin {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92svh; display: flex; align-items: center; background: var(--g-black);
}
.fin__silk { position: absolute; inset: 0; z-index: 0; }
.fin__silk img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; display: block; }
/* Ivory type never sits on raw silk: a controlled plate carries the words. */
.fin__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(1,27,23,0.95) 0%, rgba(1,27,23,0.82) 44%, rgba(1,27,23,0.40) 100%),
    linear-gradient(to bottom, rgba(1,27,23,0.58) 0%, rgba(1,27,23,0.26) 40%, rgba(1,27,23,0.76) 100%);
}
.fin__in { position: relative; z-index: 2; width: 100%; }
.fin__block { grid-column: 1 / 9; }
.fin__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2.5rem, 5.4vw, 6.25rem); line-height: 1.06; letter-spacing: -0.01em;
  margin: clamp(18px, 2vw, 30px) 0 0; color: var(--white); max-width: 13em;
}
.fin__sub { margin-block-start: clamp(20px, 2.2vw, 32px); color: var(--on-dark); }
.fin__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-block-start: clamp(30px, 3.4vw, 50px); }
.fin__cta .b--fill { min-height: 68px; font-size: 17px; }
.fin__tel {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--f-disp); font-size: clamp(1.375rem, 2vw, 1.875rem);
  letter-spacing: 0.05em; color: var(--on-dark); text-decoration: none;
  margin-block-start: clamp(24px, 2.6vw, 38px);
  border-block-end: 1px solid rgba(216,220,214,0.3); padding-block-end: 3px;
}
.fin__tel:hover { color: var(--white); border-color: var(--white); }
.status { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--champ); box-shadow: 0 0 0 4px rgba(184,162,125,0.16); }

/* ============================================================== FOOTER == */

.ft { background: var(--g-black); color: var(--on-dark-2); }
.ft__top {
  display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr));
  gap: clamp(28px, 3vw, 56px);
  padding-block: clamp(56px, 6vw, 92px) clamp(34px, 3.4vw, 52px);
}
.ft__mark { display: block; font-family: var(--f-disp); font-size: clamp(1.25rem, 1.7vw, 1.75rem); letter-spacing: 0.07em; color: var(--white); }
.ft__say { font-family: var(--f-ui); font-size: 15px; line-height: 1.7; color: var(--on-dark-2); margin: 14px 0 0; max-width: 30ch; }
.ft__ttl { display: block; font-family: var(--f-ui); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champ); margin-block-end: 12px; }
.ft__col { display: flex; flex-direction: column; align-items: start; }
.ft__col a {
  display: inline-flex; align-items: center; min-height: 42px; min-width: 44px;
  font-family: var(--f-ui); font-size: 15px; color: var(--on-dark);
  text-decoration: none; transition: color var(--d-fast) var(--ease);
}
.ft__col a:hover { color: var(--white); }
.ft__base {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 24px; padding-block: 18px 24px;
  border-block-start: 1px solid var(--line-dark);
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.08em; color: var(--on-dark-2);
}

/* =========================================================== RESPONSIVE = */

@media (max-width: 1279px) {
  .hx__type { grid-column: 6 / 13; }
  .about__fig { grid-column: 1 / 6; }
  .about__body { grid-column: 6 / 13; }
  .svc__fig { grid-column: 1 / 7; }
  .svc__body { grid-column: 7 / 13; }
  .svc__row--flip .svc__fig { grid-column: 7 / 13; }
  .svc__row--flip .svc__body { grid-column: 1 / 7; }
}

@media (max-width: 1023px) {
  .hx { min-height: 94svh; align-items: flex-start; padding-block-start: clamp(96px, 15vh, 150px); }
  .hx__type { grid-column: 1 / 13; }
  .hx__figure { inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; height: min(46svh, 460px); }
  .hx__pool, .hx__contact { inset-inline-start: 0; inset-inline-end: 0; margin-inline: auto; }
  .hx__in { padding-block-end: min(46svh, 460px); }
  .hx__stmt { max-width: 20em; }

  .about { margin-block-start: clamp(-64px, -5vw, -40px); }
  .about__grid { display: block; }
  .about__fig { height: clamp(340px, 62vw, 500px); margin-block-end: clamp(26px, 5vw, 40px); }

  .work__rail { grid-template-columns: 1fr 1fr; gap: 10px; }
  .work__f--feature img { height: clamp(300px, 62vw, 440px); }
  .work__f--a img, .work__f--b img, .work__f--c img { height: clamp(220px, 44vw, 320px); }

  .svc__inner { display: block; }
  .svc__fig { height: clamp(260px, 56vw, 400px); margin-block-end: clamp(20px, 4vw, 30px); }
  .svc__row--type .svc__body { text-align: start; }

  .res__row { grid-template-columns: 1fr; gap: 6px; }
  .res__row--1 .res__big { font-size: clamp(4rem, 20vw, 7rem); }
  .res__row--2 .res__big { font-size: clamp(3.25rem, 16vw, 5.5rem); }
  .res__row--3 .res__big { font-size: clamp(2.75rem, 13vw, 4.5rem); }

  .reach__orbit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
  .reach__orbit li { transform: none !important; }

  .worlds { grid-template-columns: 1fr; min-height: 0; }
  .wld { min-height: 68svh; }
  .wld + .wld { border-inline-start: 0; border-block-start: 1px solid rgba(248,247,242,0.14); }

  .sheet { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sheet__f--1 { grid-column: 1 / 7; }
  .sheet__f--1 img { height: clamp(280px, 58vw, 400px); }
  .sheet__f--2 { grid-column: 1 / 4; }
  .sheet__f--3 { grid-column: 4 / 7; }
  .sheet__f--4 { grid-column: 1 / 7; }
  .sheet__f--2 img, .sheet__f--3 img { height: clamp(190px, 38vw, 260px); }
  .sheet__f--4 img { height: clamp(180px, 36vw, 240px); }

  .fin { min-height: 88svh; }
  .fin__block { grid-column: 1 / 13; }
  .fin__veil { background: linear-gradient(to bottom, rgba(1,27,23,0.88) 0%, rgba(1,27,23,0.60) 44%, rgba(1,27,23,0.92) 100%); }

  .ft__top { grid-template-columns: 1fr 1fr; }
  .ft__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .work__rail { grid-template-columns: 1fr; }
  .work__f--feature img { height: clamp(340px, 88vw, 460px); }
  .work__f--a img, .work__f--b img, .work__f--c img { height: clamp(260px, 70vw, 340px); }
  .b { width: 100%; }
  .hx__cta .b, .fin__cta .b { flex: 1 1 100%; }
  .ft__top { grid-template-columns: 1fr; }
  .snum { font-size: clamp(6rem, 40vw, 11rem); }
}

/* =============================================================== MOTION = */

.js .rv { opacity: 0; transform: translateY(22px); }
.js .rv-mask { clip-path: inset(0 0 100% 0); }
.rv, .rv-mask {
  transition: opacity var(--d-slow) var(--ease),
              transform var(--d-slow) var(--ease),
              clip-path 900ms var(--ease);
}
.js .rv.in { opacity: 1; transform: none; }
.js .rv-mask.in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .rv-mask { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fig--zoom:hover img, .work__f:hover img, .sheet__f:hover img, .wld:hover .wld__bg img { transform: none; }
  .worlds:hover .wld, .wld:hover { flex: 1 1 50%; }
}

/* ================================================================ FOCUS = */

.ed a:focus-visible, .hx a:focus-visible, .reach a:focus-visible,
.fin a:focus-visible, .ft a:focus-visible, .wld:focus-visible {
  outline: 2px solid var(--champ); outline-offset: 4px; border-radius: 2px;
}

/* ================================================================ PRINT = */

@media print {
  .snum, .hx__silk, .hx__veil, .hx__pool, .hx__contact,
  .reach__silk, .reach__veil, .fin__silk, .fin__veil, .wld__bg { display: none !important; }
  .ed, .hx, .reach, .fin, .ft { background: #fff !important; color: #000 !important; min-height: 0 !important; }
  .disp, .stmt, .hx__mark, .reach__num, .fin__h, .res__big { color: #000 !important; }
}

/* head/lead helpers used by the section heads */
.work__h { margin-block-start: clamp(16px, 1.8vw, 26px); }
.res__lead { margin-block-start: clamp(18px, 2vw, 28px); }

/* ==========================================================================
   MOBILE MENU — a fullscreen plate, not a dropdown
   The five-link bar overflowed a 390px viewport (measured: header__end ran to
   left:-3px). Below 1024 the links move into this overlay and the bar keeps
   only the wordmark and the button.
   ========================================================================== */

.menu-btn {
  display: none;
  position: relative;
  width: 48px; height: 48px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.menu-btn span {
  position: absolute; inset-inline: 10px; height: 1px;
  background: var(--white); transition: transform var(--d-mid) var(--ease);
}
.menu-btn span:first-child { top: 20px; }
.menu-btn span:last-child { top: 27px; }
.menu-btn:hover span:first-child { transform: translateY(-2px); }
.menu-btn:hover span:last-child { transform: translateY(2px); }

.menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--g-deep);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-mid) var(--ease), visibility var(--d-mid);
}
.menu[hidden] { display: block; }        /* animate instead of snapping */
.menu.is-open { opacity: 1; visibility: visible; }
.menu__in {
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 6vw, 64px);
  max-width: var(--page); margin-inline: auto;
}
.menu__x {
  position: absolute; top: clamp(16px, 3vw, 30px); inset-inline-end: clamp(16px, 4vw, 40px);
  width: 52px; height: 52px; background: none; border: 0; cursor: pointer;
}
.menu__x span {
  position: absolute; inset-inline: 12px; top: 25px; height: 1px; background: var(--white);
}
.menu__x span:first-child { transform: rotate(45deg); }
.menu__x span:last-child { transform: rotate(-45deg); }

.menu__nav { display: flex; flex-direction: column; gap: clamp(4px, 1.4vw, 14px); }
.menu__nav a {
  display: flex; align-items: baseline; gap: 16px;
  min-height: 56px;
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2rem, 9vw, 3.5rem); line-height: 1.16;
  color: var(--white); text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.menu__nav a:hover { color: var(--champ); }
.menu__n {
  font-family: var(--f-disp); font-size: 0.34em;
  color: var(--champ); opacity: 0.75;
}
.menu__foot {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-block-start: clamp(30px, 6vw, 56px);
  padding-block-start: clamp(20px, 3vw, 30px);
  border-block-start: 1px solid var(--line-dark);
}
.menu__foot a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-ui); font-size: 15px; color: var(--on-dark); text-decoration: none;
}
.menu__foot a:hover { color: var(--white); }

@media (max-width: 1023px) {
  .header .nav, .header__sep, .header__wa { display: none !important; }
  .menu-btn { display: block; }
}
body.menu-open { overflow: hidden; }

/* Footer links were 42px tall — one under the 44px target. */
.ft__col a { min-height: 44px; }

/* ==========================================================================
   LENGTH — the rebuild measured 11,692px at 1440. Trim without flattening
   the rhythm: the svh sections keep their scale, the stacked ones tighten.
   ========================================================================== */
@media (min-width: 1024px) {
  .pad-m { padding-block: clamp(72px, 7vw, 130px); }
  .svc__inner { padding-block: clamp(32px, 3.4vw, 58px); }
  .svc__fig { height: clamp(250px, 24vw, 360px); }
  .res__row { padding-block: clamp(20px, 2.2vw, 34px); }
  .res__list { margin-block-start: clamp(36px, 4vw, 62px); }
  .work__rail { margin-block-start: clamp(34px, 3.6vw, 56px); }
  .work__f--feature img { height: clamp(380px, 38vw, 540px); }
  .work__f--a img { height: clamp(250px, 25vw, 350px); }
  .work__f--b img { height: clamp(215px, 22vw, 300px); }
  .work__f--c img { height: clamp(295px, 30vw, 420px); }
  .sheet { margin-block-start: clamp(34px, 3.6vw, 56px); }
  .sheet__f--1 img { height: clamp(270px, 27vw, 380px); }
  .sheet__f--2 img { height: clamp(200px, 20vw, 280px); }
  .sheet__f--3 img { height: clamp(230px, 23vw, 320px); }
  .sheet__f--4 img { height: clamp(180px, 18vw, 250px); }
  .about__fig { height: clamp(400px, 40vw, 560px); }
  .reach { min-height: 78svh; }
  .worlds { min-height: 80svh; }
  .fin { min-height: 86svh; }
}

/* ==========================================================================
   FIXES FROM VISUAL QA PASS 1
   ========================================================================== */

/* WORLDS: .wld is an <a>, so its children are spans for validity — and spans
   are inline, so the label, headline and link rendered ON TOP of each other.
   They stack now. */
.wld__in { display: flex; flex-direction: column; align-items: flex-start; }
.wld__in > * { display: block; }
.wld__in .micro { display: block; margin-block-end: clamp(10px, 1.2vw, 16px); }
.wld__in .tl { display: inline-flex; }
.wld__h { display: block; }

/* CONTACT: the block held 9 of 12 columns but the type filled only part of
   it, so ~60% of the plate read as empty rather than composed. Narrower
   block, larger type, and a hairline that gives the negative space an edge. */
.fin__block { grid-column: 1 / 8; position: relative; }
.fin__h { font-size: clamp(2.75rem, 6vw, 7rem); max-width: 11em; }
.fin__block::after {
  content: "";
  position: absolute; inset-block: -6%; inset-inline-end: calc(var(--col-gap) * -0.5);
  width: 1px;
  background: linear-gradient(to bottom, rgba(248,247,242,0) 0%, rgba(248,247,242,0.22) 30%, rgba(248,247,242,0.22) 70%, rgba(248,247,242,0) 100%);
}
@media (max-width: 1023px) {
  .fin__block::after { display: none; }
  .fin__block { grid-column: 1 / 13; }
}

/* SERVICES measured 2,888px — the tallest block on the page by a wide margin. */
@media (min-width: 1024px) {
  .svc__inner { padding-block: clamp(28px, 3vw, 48px); }
  .svc__fig { height: clamp(230px, 21vw, 320px); }
}

/* ==========================================================================
   REVEAL FAILSAFE — measured: 58 of 66 reveal elements never received .in,
   with ZERO JavaScript errors. The IntersectionObserver simply missed them
   during a fast programmatic scroll, and because the hidden state was the
   default under html.js, those images and headings stayed invisible for
   good. A reveal system must never be able to hide content permanently.
   html.rv-off is set by an inline timer 2.2s after parse and overrides
   everything, so the worst case is "no animation", never "no content".
   ========================================================================== */
.rv-off .rv, .rv-off .rv-mask {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
}

/* ==========================================================================
   LENGTH DISCIPLINE — measured 9,888px at 1440 against the reference site's
   4,206px. The rhythm stays unequal; the air comes out of the stacked
   sections, not the cinematic ones.
   ========================================================================== */
@media (min-width: 1024px) {
  .pad-m { padding-block: clamp(56px, 5vw, 96px); }
  .pad-s { padding-block: clamp(44px, 4vw, 72px); }

  /* services: five rows was the single biggest block on the page */
  .svc__inner { padding-block: clamp(22px, 2.2vw, 38px); }
  .svc__fig { height: clamp(200px, 18vw, 270px); }
  .svc__n { font-size: clamp(2rem, 3vw, 3.25rem); margin-block-end: 8px; }
  .svc__copy { margin-block-start: 10px; }
  .svc__h { margin-block-start: 4px; }

  /* the work rail and the sheet lose a little height, not their proportions */
  .work__f--feature img { height: clamp(340px, 33vw, 470px); }
  .work__f--a img { height: clamp(225px, 22vw, 305px); }
  .work__f--b img { height: clamp(195px, 19vw, 260px); }
  .work__f--c img { height: clamp(265px, 26vw, 365px); }
  .sheet__f--1 img { height: clamp(240px, 24vw, 330px); }
  .sheet__f--2 img { height: clamp(180px, 18vw, 245px); }
  .sheet__f--3 img { height: clamp(205px, 20vw, 280px); }
  .sheet__f--4 img { height: clamp(160px, 16vw, 215px); }
  .about__fig { height: clamp(360px, 35vw, 490px); }

  .res__row { padding-block: clamp(16px, 1.8vw, 28px); }
  .res__list { margin-block-start: clamp(30px, 3.2vw, 50px); }
  .work__rail { margin-block-start: clamp(28px, 3vw, 46px); }
  .sheet { margin-block-start: clamp(28px, 3vw, 46px); }

  /* the cinematic bands keep their scale but stop being full-height */
  .reach { min-height: 70svh; }
  .worlds { min-height: 72svh; }
  .fin { min-height: 78svh; }
  .hx { min-height: 92svh; }
}

/* ==========================================================================
   MOBILE / TABLET LENGTH — measured tablet 12,694px and mobile 11,502px
   against desktop's 8,720px. Stacking a 12-column editorial page makes it
   LONGER, not shorter, so the small viewports need their own trim rather
   than inheriting the desktop one.
   ========================================================================== */
@media (max-width: 1023px) {
  .pad-m { padding-block: clamp(48px, 7vw, 76px); }
  .pad-s { padding-block: clamp(38px, 5vw, 58px); }

  .about__fig { height: clamp(300px, 52vw, 400px); margin-block-end: clamp(20px, 4vw, 30px); }

  .svc__inner { padding-block: clamp(24px, 4vw, 38px); }
  .svc__fig { height: clamp(200px, 42vw, 290px); margin-block-end: clamp(16px, 3vw, 24px); }
  .svc__n { font-size: clamp(1.75rem, 7vw, 2.5rem); margin-block-end: 6px; }
  .svc__copy { margin-block-start: 10px; }

  .work__f--feature img { height: clamp(260px, 52vw, 360px); }
  .work__f--a img, .work__f--b img, .work__f--c img { height: clamp(190px, 38vw, 270px); }
  .work__rail { margin-block-start: clamp(24px, 5vw, 36px); }

  .res__row { padding-block: clamp(18px, 3.4vw, 28px); }
  .res__list { margin-block-start: clamp(26px, 5vw, 40px); }

  .sheet { margin-block-start: clamp(24px, 5vw, 38px); }
  .sheet__f--1 img { height: clamp(230px, 46vw, 320px); }
  .sheet__f--2 img, .sheet__f--3 img { height: clamp(160px, 32vw, 220px); }
  .sheet__f--4 img { height: clamp(150px, 30vw, 200px); }

  .reach { min-height: 0; padding-block: clamp(64px, 12vw, 110px); }
  .wld { min-height: 56svh; }
  .fin { min-height: 0; padding-block: clamp(72px, 14vw, 120px); }
  .hx { min-height: 92svh; }

  .ft__top { padding-block: clamp(40px, 8vw, 64px) clamp(24px, 5vw, 36px); }
}

@media (max-width: 560px) {
  .wld { min-height: 62svh; }
  .reach__orbit { margin-block-start: clamp(30px, 8vw, 48px); gap: 20px 14px; }
}

/* ==========================================================================
   HERO v2 — her logo's own colour, centred cover, three doors
   The greens here are SAMPLED from assets/img/logo-plate.jpg, not chosen:
   14,959 midtone pixels average #243C34, with the lit satin running
   #284838–#385848 and the folds down around #182828. The whole dark family
   is retuned to that measurement so the site matches her logo rather than
   sitting a few degrees off it.
   ========================================================================== */

:root {
  --g-deep:  #1E332C;   /* logo midtone, deepened just enough for white type */
  --g-black: #101D19;   /* the fold shadow */
  --g-em:    #2E4C40;   /* the lit satin */
}

.hx { align-items: center; text-align: center; }
.hx__in { position: relative; z-index: 4; width: 100%; }

/* One veil, tuned so the fabric still reads but type never sits on raw silk. */
.hx__veil {
  background:
    radial-gradient(66% 58% at 50% 46%, rgba(16,29,25,0.30) 0%, rgba(16,29,25,0.80) 100%),
    linear-gradient(to bottom, rgba(16,29,25,0.72) 0%, rgba(16,29,25,0.34) 38%, rgba(16,29,25,0.66) 78%, rgba(30,51,44,0.96) 100%);
}

.hx__owner {
  font-family: var(--f-ui);
  font-size: 13px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--champ);
  margin: 0;
}
.hx__mark {
  font-family: var(--f-disp);
  font-size: clamp(3.25rem, 8.5vw, 9rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  margin: clamp(18px, 2.2vw, 34px) 0 0;
  color: var(--white);
}
.hx__stmt {
  font-family: var(--f-heb);
  font-weight: 300;
  font-size: clamp(1.1875rem, 2vw, 1.875rem);
  line-height: 1.5;
  margin: clamp(20px, 2.4vw, 34px) auto 0;
  max-width: 24em;
  color: var(--on-dark);
}

/* Three doors. Outlined plates, not pills and not cards — the same register
   as the reference, sized so each is a real target on a phone. */
.hx__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
  margin: clamp(34px, 4vw, 60px) auto 0;
  max-width: 1000px;
}
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 74px;
  padding-inline: clamp(14px, 1.6vw, 26px);
  border: 1px solid rgba(248, 247, 242, 0.38);
  border-radius: 2px;
  text-decoration: none;
  background: rgba(16, 29, 25, 0.22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color var(--d-fast) var(--ease),
              border-color var(--d-fast) var(--ease);
}
.tile__t {
  font-family: var(--f-ui);
  font-size: clamp(14px, 1.05vw, 16px);
  letter-spacing: 0.02em;
  color: var(--white);
  text-align: center;
}
.tile__i {
  font-style: normal;
  color: var(--champ);
  transition: transform var(--d-mid) var(--ease);
}
.tile:hover { background: rgba(248, 247, 242, 0.10); border-color: var(--white); }
.tile:hover .tile__i { transform: translateX(-6px); }

@media (max-width: 860px) {
  .hx__tiles { grid-template-columns: 1fr; max-width: 460px; gap: 10px; }
  .tile { min-height: 68px; justify-content: space-between; }
  .tile__t { text-align: start; }
}
@media (max-width: 1023px) {
  /* the figure is gone from the hero, so the old bottom padding must go too */
  .hx { align-items: center; padding-block-start: 0; }
  .hx__in { padding-block-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tile:hover .tile__i { transform: none; }
}

/* ==========================================================================
   HER BRIEF — חלק 2 (about, compact + read-more) and חלק 3 (two domains)
   ========================================================================== */

/* ---- 01 ABOUT: compact, never a full screen -------------------------- */
.about__grid { align-items: center; row-gap: clamp(28px, 4vw, 44px); }
.about__fig { grid-column: 1 / 5; height: clamp(320px, 30vw, 430px); }
.about__body { grid-column: 6 / 13; }
.about__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.28;
  margin: clamp(16px, 1.8vw, 24px) 0 0; max-width: 20em; color: var(--g-deep);
}
.about__more { margin-block-start: clamp(16px, 1.8vw, 24px); }
.about__more[hidden] { display: none; }
.about__more .copy + .copy { margin-block-start: 14px; }

.more-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; margin-block-start: clamp(16px, 1.8vw, 24px);
  padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 15px; letter-spacing: 0.06em;
  color: var(--g-deep);
  border-block-end: 1px solid currentColor;
}
.more-btn__i {
  font-family: var(--f-disp); font-size: 18px; line-height: 1;
  color: var(--champ); transition: transform var(--d-mid) var(--ease);
}
.more-btn[aria-expanded="true"] .more-btn__i { transform: rotate(45deg); }

/* The .dom__*, .chips and .chip rules that lived here are gone. They styled
   the first two-domains build; section 02 is now the .wr / .door diptych and
   no page on the site carries any of those classes. */

@media (max-width: 1023px) {
  .about__grid { display: block; }
  .about__fig { height: clamp(280px, 52vw, 380px); margin-block-end: clamp(20px, 4vw, 28px); }
}

/* No JS: the read-more button cannot function, so show the copy and remove
   the control rather than trapping the text behind a dead button. */
html:not(.js) .about__more[hidden] { display: block !important; }
html:not(.js) .more-btn { display: none; }

/* ==========================================================================
   חלק 4 — PACKAGES PAGE
   Two options behind the packages tile, exactly as her brief describes.
   No prices anywhere: she listed none, and the owner's rule is that prices
   are quoted privately.
   ========================================================================== */

.pkghead { padding-block: clamp(104px, 11vw, 170px) clamp(48px, 5vw, 80px); }
.pkghead__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.06;
  margin: clamp(14px, 1.6vw, 22px) 0 0; color: var(--white);
}
.pkghead__lead { margin-block-start: clamp(16px, 1.8vw, 26px); }
.crumbs {
  display: flex; gap: 10px; align-items: center;
  font-family: var(--f-ui); font-size: 13px; color: var(--on-dark-2);
  margin-block-end: clamp(18px, 2vw, 28px);
}
.crumbs a { color: var(--on-dark-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.crumbs a:hover { color: var(--white); }

/* ---- the two options ---- */
.pkgtabs {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-block-end: clamp(34px, 4vw, 60px);
}
.pkgtab {
  flex: 1 1 260px;
  min-height: 66px; padding-inline: clamp(18px, 2vw, 30px);
  font-family: var(--f-ui); font-size: clamp(15px, 1.1vw, 17px);
  color: var(--g-deep); background: transparent;
  border: 1px solid rgba(3, 45, 37, 0.30); border-radius: 2px;
  cursor: pointer;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.pkgtab:hover { border-color: var(--g-deep); }
.pkgtab[aria-selected="true"] {
  background: var(--g-deep); color: var(--ivory); border-color: var(--g-deep);
}
.pkgpanel[hidden] { display: none; }
/* With JS off both panels show, each under its own visible heading. */
.pkgpanel__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  margin: 0 0 clamp(18px, 2vw, 28px); color: var(--g-deep);
}
html.js .pkgtabs + .pkgpanel .pkgpanel__h,
html.js .pkgpanel .pkgpanel__h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pkgnote {
  font-family: var(--f-ui); font-size: var(--t-body); line-height: 1.7;
  color: var(--ink-soft); margin: 0 0 clamp(26px, 3vw, 42px);
  padding-block-end: clamp(18px, 2vw, 26px);
  border-block-end: 1px solid var(--line-light);
  max-width: 52em;
}
.pkggroup {
  font-family: var(--f-disp); font-size: clamp(1.375rem, 2vw, 1.875rem);
  letter-spacing: 0.02em; color: var(--g-deep);
  margin: clamp(28px, 3vw, 44px) 0 clamp(12px, 1.4vw, 18px);
}
.pkglist { list-style: none; margin: 0; padding: 0; }

/* A ruled register row, the same device the results section uses. */
.pkg {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 2fr);
  align-items: baseline; gap: 6px clamp(16px, 2vw, 36px);
  padding-block: clamp(16px, 1.8vw, 24px);
  border-block-start: 1px solid var(--line-light);
}
.pkg:last-child { border-block-end: 1px solid var(--line-light); }
.pkg__name {
  font-family: var(--f-heb); font-weight: 400;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem); color: var(--g-deep);
}
.pkg__scope { font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink-soft); }
.pkg__reels {
  font-family: var(--f-ui); font-size: 15px; color: var(--ink-soft);
  text-align: end; white-space: nowrap;
}
.pkg__reels b {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem); color: var(--champ);
  margin-inline-end: 6px;
}
.pkg--gold .pkg__name { color: var(--g-deep); }
.pkg--gold { background: linear-gradient(to left, rgba(184,162,125,0.10), rgba(184,162,125,0)); }

/* business packages read as documents, not rows */
.bpkg {
  padding-block: clamp(24px, 2.8vw, 40px);
  border-block-start: 1px solid var(--line-light);
}
.bpkg:last-of-type { border-block-end: 1px solid var(--line-light); }
.bpkg__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 18px; }
.bpkg__name {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.2;
  margin: 0; color: var(--g-deep);
}
.bpkg__term {
  font-family: var(--f-ui); font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--champ); margin: 0;
}
.bpkg__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px clamp(20px, 3vw, 48px);
  list-style: none; margin: clamp(18px, 2vw, 26px) 0 0; padding: 0;
  max-width: 46em;
}
.bpkg__list li {
  position: relative; padding-inline-start: 18px;
  font-family: var(--f-ui); font-size: var(--t-body); color: var(--ink-soft);
}
.bpkg__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.62em;
  width: 6px; height: 1px; background: var(--champ);
}

.pkgterms {
  font-family: var(--f-ui); font-size: 15px; line-height: 1.7;
  color: var(--ink-soft); margin: clamp(30px, 3.4vw, 50px) 0 0;
  max-width: 46em;
}

@media (max-width: 760px) {
  .pkg { grid-template-columns: 1fr; gap: 4px; }
  .pkg__reels { text-align: start; }
  .bpkg__list { grid-template-columns: 1fr; }
  .pkgtab { flex: 1 1 100%; }
}

/* ==========================================================================
   HERO — full viewport, and let the silk actually READ
   MEASURED before this block: the fabric sat at luminance 24 at the edges and
   38 in the centre. That is near-black; none of the weave or the fold sheen
   was visible, which is exactly why it looked flat rather than expensive.
   The blanket veil is cut right back and replaced with (a) a focused radial
   scrim that only darkens behind the type, (b) a low-opacity second fabric
   layer for depth, (c) a vignette. Type contrast is preserved by the scrim,
   not by crushing the whole image.
   ========================================================================== */

.hx { min-height: 100svh; }

/* (a) the veil is now a soft floor + a scrim under the type only */
.hx__veil {
  background:
    radial-gradient(52% 46% at 50% 44%, rgba(1,27,23,0.62) 0%, rgba(1,27,23,0.34) 52%, rgba(1,27,23,0) 78%),
    linear-gradient(to bottom, rgba(1,27,23,0.42) 0%, rgba(1,27,23,0.06) 30%, rgba(1,27,23,0.10) 62%, rgba(30,51,44,0.72) 100%);
}

/* (b) depth: the same fabric, offset, low opacity, soft-light blended. Adds
   fold structure the single photograph cannot carry on its own. */
.hx__depth {
  position: absolute; inset: -6%; z-index: 1; pointer-events: none;
  background-image: url("../img/ed-silkedge-1600.jpg");
  background-size: cover;
  background-position: 30% 60%;
  mix-blend-mode: soft-light;
  opacity: 0.42;
  transform: scaleX(-1);
}

/* (c) a real vignette, not a black box: keeps the eye centred and stops the
   corners from competing with the wordmark. */
.hx__vig {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(78% 70% at 50% 50%, rgba(1,27,23,0) 42%, rgba(1,27,23,0.55) 100%);
}

.hx__in { z-index: 5; }

/* A hairline frame set in from the viewport edge — the detail that reads as
   "designed" on a full-bleed plate. Hidden on phones where it would crowd. */
@media (min-width: 900px) {
  .hx::after {
    content: "";
    position: absolute; z-index: 4; pointer-events: none;
    inset: clamp(18px, 2vw, 34px);
    border: 1px solid rgba(248, 247, 242, 0.16);
  }
}

/* The type sits on the lighter fabric now, so it needs its own weight back. */
.hx__mark { text-shadow: 0 2px 40px rgba(1, 27, 23, 0.55); }
.hx__stmt { text-shadow: 0 1px 24px rgba(1, 27, 23, 0.6); }
.hx__owner { text-shadow: 0 1px 18px rgba(1, 27, 23, 0.7); }
/* ...except the mark. Bar: "והייתי רוצה שבפתיחה יהיה ממש חד האותיות כמו פה",
   pointing at the header wordmark — which carries no shadow at all. A 40px
   blur behind 196px letters is a dark halo: the glyph edges stay sharp but the
   ground around them is smudged, so the whole word reads soft. This is the
   same note as the light pool she had removed from behind the logo, in a
   different form.

   The shadow was there to buy contrast over the silk. It was not needed:
   MEASURED after removing it, white on the graded plate is still far above
   AA. If the fabric ever gets brighter the lever is the veil, not a blur on
   the type. */
.hx__mark { text-shadow: none; }
.tile { background: rgba(1, 27, 23, 0.34); }
.tile:hover { background: rgba(248, 247, 242, 0.12); }

@media (prefers-reduced-motion: reduce) { .hx__depth { opacity: 0.34; } }

/* The depth layer used inset:-6% to feel offset; .hx clips it so there was no
   real scrollbar, but it still registered on the overflow probe and that
   signal is worth keeping clean. Same look via background-size instead. */
.hx__depth { inset: 0; background-size: 118%; background-position: 28% 62%; }

/* The new silk is properly exposed (mean luminance 45.6 against the old
   image's 20.9), so the heavy compensating layers come off: the soft-light
   depth pass was DARKENING a dark photo, and the vignette was closing the
   corners down to 14. Light touch now — the fabric carries itself. */
.hx__depth { display: none; }
.hx__vig { background: radial-gradient(84% 76% at 50% 48%, rgba(1,27,23,0) 52%, rgba(1,27,23,0.42) 100%); }
.hx__veil {
  background:
    radial-gradient(50% 44% at 50% 44%, rgba(1,27,23,0.58) 0%, rgba(1,27,23,0.26) 56%, rgba(1,27,23,0) 80%),
    linear-gradient(to bottom, rgba(1,27,23,0.34) 0%, rgba(1,27,23,0.02) 30%, rgba(1,27,23,0.06) 60%, rgba(30,51,44,0.78) 100%);
}

/* Arithmetic, not taste: the graded plate is luminance 45.6, but the veil was
   still rendering it at 23. White (#F9F7F2) on a luminance-45 emerald is
   already ~11:1, so a 0.58 centre scrim buys nothing and costs the fabric.
   Scrim and vignette both cut roughly in half. */
.hx__veil {
  background:
    radial-gradient(46% 40% at 50% 44%, rgba(1,27,23,0.30) 0%, rgba(1,27,23,0.12) 58%, rgba(1,27,23,0) 82%),
    linear-gradient(to bottom, rgba(1,27,23,0.20) 0%, rgba(1,27,23,0) 28%, rgba(1,27,23,0) 58%, rgba(30,51,44,0.72) 100%);
}
.hx__vig { background: radial-gradient(88% 80% at 50% 48%, rgba(1,27,23,0) 58%, rgba(1,27,23,0.24) 100%); }

/* ==========================================================================
   HERO — bridal plate at low opacity over the brand green
   The fabric shot was the wrong subject: on a photographer's site the hero
   should show the WORLD she shoots, not a swatch. This is a bridal veil and
   roses at low opacity over the logo green, so the emerald still owns the
   page and the image reads as atmosphere rather than as wallpaper.
   NOTE: this plate is generated ambience with no faces and no identifiable
   client — it is NOT presented as her work. A real bridal frame from Bar
   should replace it; see ASSETS.md.
   ========================================================================== */

/* Exactly the viewport. 100svh on its own left a sliver of the next section
   showing on short landscape windows because the header is not in the flow. */
.hx {
  min-height: 100svh;
  height: 100svh;
  max-height: 100svh;
}
@supports not (height: 100svh) { .hx { height: 100vh; max-height: 100vh; } }

/* The image sits low so the emerald ground reads first. */
.hx__silk img { opacity: 0.30; filter: saturate(0.55) contrast(1.05); }
.hx { background: var(--g-deep); }

/* Because the plate is pale and low-opacity, the veil only needs to deepen
   the ground, not fight a bright photograph. */
.hx__veil {
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(16,29,25,0.42) 0%, rgba(16,29,25,0.20) 60%, rgba(16,29,25,0) 84%),
    linear-gradient(to bottom, rgba(16,29,25,0.52) 0%, rgba(16,29,25,0.10) 26%, rgba(16,29,25,0.14) 62%, rgba(16,29,25,0.72) 100%);
}
.hx__vig { background: radial-gradient(90% 82% at 50% 48%, rgba(16,29,25,0) 56%, rgba(16,29,25,0.34) 100%); }

/* The frame was clipping against the section edge. Inset it properly and put
   it above the veil so all four sides read. */
@media (min-width: 900px) {
  .hx::after {
    inset: clamp(22px, 2.2vw, 40px);
    border-color: rgba(248, 247, 242, 0.26);
    z-index: 6;
  }
}
@media (max-width: 899px) {
  .hx::after {
    content: "";
    position: absolute; z-index: 6; pointer-events: none;
    inset: 14px;
    border: 1px solid rgba(248, 247, 242, 0.20);
  }
}

/* ==========================================================================
   FULL VIEWPORT — the real cause
   The hero was already height:100svh. What broke it was .about carrying a
   NEGATIVE top margin (two rules: -104px and -64px) from an earlier
   "overlapping panel" idea. That pulled the ivory section up over the bottom
   of the hero, which is exactly the white strip showing under it. Both are
   cancelled here; the hero now ends where the viewport ends.
   ========================================================================== */
.about { margin-block-start: 0 !important; }

/* The page is now only what she asked for: hero, about, the two domains,
   then contact. Nothing between the domains and the closing plate. */

/* ==========================================================================
   HERO FRAME — clear the header
   MEASURED: header is 72px tall (60px on phones) with the nav ending at 58px,
   but the frame's top edge was drawn at 31–40px, i.e. straight through the
   navigation. The frame now starts below the header instead of crossing it,
   so the line reads as a frame rather than a strike-through.
   ========================================================================== */
@media (min-width: 900px) {
  .hx::after {
    inset: auto clamp(22px, 2.2vw, 40px) clamp(22px, 2.2vw, 40px);
    top: calc(72px + clamp(16px, 1.6vw, 28px));
  }
}
@media (max-width: 899px) {
  .hx::after {
    inset: auto 14px 14px;
    top: calc(60px + 14px);
  }
}

/* The sub-900 rule assumed a 60px header, but at tablet widths the header is
   still 72px — that left the frame 2px under the nav. Split the range. */
@media (min-width: 560px) and (max-width: 899px) {
  .hx::after { top: calc(72px + 16px); }
}
@media (max-width: 559px) {
  .hx::after { top: calc(60px + 14px); }
}

/* ==========================================================================
   01 ABOUT — the editorial spread
   Three fields on one baseline: the statement, a signed pull-quote holding
   what used to be dead paper, and Bar standing free on the ivory.
   She is a transparent PNG/WebP, so object-fit:contain lets her stand ON the
   page instead of being cropped into a box. A soft elliptical ground shadow
   seats her; without it a cutout floats.
   ========================================================================== */

.about {
  padding-block: clamp(64px, 7vw, 120px) 0;   /* she meets the section's floor */
  overflow: hidden;
}
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.4fr) minmax(0, 3.6fr);
  column-gap: clamp(28px, 3.4vw, 64px);
  align-items: end;
  min-height: clamp(430px, 42vw, 580px);
}

/* the numeral is a running index, not a crop — keep it whole */
.about__num { top: clamp(8px, 1.4vw, 26px); inset-inline-start: auto; inset-inline-end: calc(var(--gutter) * 0.5); }

.about__body { padding-block-end: clamp(40px, 5vw, 80px); }
.about__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.5rem, 2.5vw, 2.375rem); line-height: 1.32;
  margin: clamp(16px, 1.8vw, 24px) 0 0; color: var(--g-deep);
  text-wrap: balance;
}
.about__more { margin-block-start: clamp(16px, 1.8vw, 22px); }
.about__more .copy + .copy { margin-block-start: 12px; }

/* the middle field: a hairline, a quote, her signature */
.about__mark {
  padding-block-end: clamp(40px, 5vw, 80px);
  display: flex; flex-direction: column; align-items: flex-start;
}
.about__rule {
  display: block; width: 48px; height: 1px;
  background: var(--champ); margin-block-end: clamp(18px, 2vw, 28px);
}
.about__quote {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.0625rem, 1.35vw, 1.375rem); line-height: 1.68;
  color: var(--ink-soft); margin: 0;
}
.about__mark .sig { margin-block-start: clamp(20px, 2.4vw, 34px); }

/* she stands on the floor of the section */
.about__fig {
  position: relative;
  align-self: end;
  height: clamp(430px, 44vw, 620px);
  overflow: visible;
}
.about__fig picture { display: block; height: 100%; }
.about__fig img {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: none;
}
.about__ground {
  position: absolute; z-index: -1;
  bottom: -6px; inset-inline: 8%;
  height: 46px;
  background: radial-gradient(50% 50% at 50% 50%,
    rgba(22, 33, 29, 0.26) 0%, rgba(22, 33, 29, 0.10) 46%, rgba(22, 33, 29, 0) 74%);
  filter: blur(6px);
}

@media (max-width: 1023px) {
  .about { padding-block: clamp(48px, 7vw, 76px) 0; }
  .about__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: clamp(24px, 4vw, 36px);
    min-height: 0;
  }
  .about__body { grid-column: 1 / -1; padding-block-end: 0; }
  .about__mark { padding-block-end: clamp(26px, 5vw, 40px); }
  .about__fig { height: clamp(300px, 52vw, 420px); }
}
@media (max-width: 620px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__mark { order: 3; padding-block-end: clamp(20px, 5vw, 32px); }
  .about__fig { order: 2; height: clamp(280px, 66vw, 380px); }
  .about__quote { font-size: 1.0625rem; }
}

/* The three children still carried grid-column placements from the old
   12-column layout (.about__body 6/13, .about__fig 1/5). Against a 3-track
   template those line numbers force NINE implicit tracks, which is why the
   figure measured 873px in a 386px column. Placement is reset to auto so the
   children simply take the three tracks in order. */
.about__body,
.about__mark,
.about__fig { grid-column: auto !important; grid-row: auto !important; }

/* ==========================================================================
   01 ABOUT — rebuilt as one composition
   The previous version put three fields at three different heights across
   1,800px, with the top half of the section empty and the numeral cropped.
   Now: two fields sharing one vertical centre, the figure inside a tinted
   plate that gives the cutout an edge and a home, and the numeral fully
   inside that plate rather than bleeding off the page.
   ========================================================================== */

.ab { padding-block: clamp(64px, 7vw, 116px); overflow: hidden; }
.ab__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 4.5vw, 88px);
  align-items: center;
}

/* --- the plate: her home, with a real edge --------------------------- */
.ab__plate {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    linear-gradient(165deg, #E7E0D2 0%, #DCD4C3 52%, #CFC7B4 100%);
  isolation: isolate;
}
.ab__plate picture { display: block; height: 100%; }
.ab__plate img {
  position: relative; z-index: 2;
  display: block; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
}
/* the numeral lives INSIDE the plate, so it can never crop off the page */
.ab__num {
  position: absolute; z-index: 1;
  top: clamp(-10px, -0.6vw, -4px);
  inset-inline-start: clamp(6px, 1vw, 18px);
  font-family: var(--f-disp);
  font-size: clamp(6rem, 13vw, 12rem);
  line-height: 0.82; letter-spacing: -0.03em;
  color: rgba(22, 33, 29, 0.09);
  pointer-events: none; user-select: none;
}
/* she stands on the plate's floor rather than floating in it */
.ab__plate::after {
  content: "";
  position: absolute; z-index: 1;
  inset-inline: 14%; bottom: 0; height: 12%;
  background: linear-gradient(to top, rgba(22,33,29,0.16) 0%, rgba(22,33,29,0) 100%);
}

/* --- the text field -------------------------------------------------- */
.ab__body { max-width: 40rem; }
.ab__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.625rem, 2.7vw, 2.75rem); line-height: 1.28;
  margin: clamp(16px, 1.8vw, 24px) 0 0; color: var(--g-deep);
}
.ab__rule {
  display: block; width: 52px; height: 1px;
  background: var(--champ);
  margin-block: clamp(22px, 2.6vw, 34px);
}
.ab__quote {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem); line-height: 1.7;
  color: var(--ink-soft); margin: 0; max-width: 34em;
}
.ab__more { margin-block-start: clamp(16px, 1.8vw, 24px); }
.ab__more .copy + .copy { margin-block-start: 12px; }
.ab__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; margin-block-start: clamp(20px, 2.4vw, 32px);
}
.ab__sig {
  font-family: var(--f-disp);
  font-size: clamp(1.75rem, 2.6vw, 2.75rem); line-height: 1;
  color: var(--champ); opacity: 0.85;
}

@media (max-width: 1023px) {
  .ab__grid { grid-template-columns: 1fr; row-gap: clamp(26px, 5vw, 40px); }
  .ab__plate { aspect-ratio: 3 / 3.2; max-width: 420px; }
  .ab__body { max-width: none; }
}
@media (max-width: 560px) {
  .ab__plate { aspect-ratio: 3 / 3.4; max-width: none; }
  .ab__foot { flex-direction: row; align-items: center; }
}

/* ==========================================================================
   02 — THE TWO WORLDS  (חלק 3)
   Replaced the old .dm bands. Those were two leftovers at different scales:
   a flat five-up filmstrip edge to edge, then a half-width block with four
   scattered thumbs, outlined pills that wrapped to an orphan row, captions
   that did not match their pictures (a grocery-store frame read "אווירה"),
   and a dead third of green at the bottom.

   Her brief asks for navigation, not a gallery — two domains, each with
   intro copy above its categories. So the section is a fork: two equal
   floor-to-ceiling doors split by one hairline, each a single link.

   MEASURED: her real frames top out at 720x1280, so they cannot ground a
   panel this size without visible upscaling. The grounds are the 1600px
   still-life plates instead — props only, no people, atmosphere and never
   presented as her work. The work itself lives behind the door.
   ========================================================================== */

.wr { background: var(--g-black); }

/* the slim register that carries the numeral, so 02 stops floating loose */
.wr__bar {
  display: flex; align-items: center;
  gap: clamp(16px, 2vw, 30px);
  padding-block: clamp(28px, 3.2vw, 52px);
}
.wr__num {
  font-family: var(--f-disp); font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1; color: var(--champ);
}
.wr__rule { flex: 1 1 auto; height: 1px; background: var(--line-dark); }

.wr__pair { display: grid; grid-template-columns: 1fr 1fr; }

.door {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: min(84svh, 820px);
  padding: clamp(30px, 3.4vw, 64px);
  text-decoration: none; color: var(--on-dark);
}
/* the single hairline that makes it read as one diptych, not two panels */
.door + .door::before {
  content: ""; position: absolute; z-index: 4;
  inset-block: 0; inset-inline-start: 0; width: 1px;
  background: rgba(248, 247, 242, 0.18);
}

.door__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 46%;
  transform: scale(1.02);
  transition: transform var(--d-slow) var(--ease);
}
/* bottom-weighted so the index sits on near-solid ground while the top of
   the plate still breathes */
.door__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(16, 29, 25, 0.32) 0%,
    rgba(16, 29, 25, 0.40) 28%,
    rgba(16, 29, 25, 0.78) 64%,
    rgba(16, 29, 25, 0.94) 100%);
}
/* the door you are NOT pointing at steps back */
.door__dim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--g-black); opacity: 0;
  transition: opacity var(--d-fast) var(--ease);
}
.wr__pair:hover .door:not(:hover) .door__dim,
.wr__pair:focus-within .door:not(:focus-visible) .door__dim { opacity: 0.46; }

.door__body { position: relative; z-index: 3; width: 100%; }
.door__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--white); margin: clamp(14px, 1.4vw, 22px) 0 0;
  max-width: 11em; text-wrap: balance;
}
.door__copy {
  font-family: var(--f-ui); font-size: var(--t-body); line-height: 1.75;
  color: var(--on-dark); margin: clamp(14px, 1.5vw, 22px) 0 0;
  max-width: 30em;
}

/* the categories as a ruled typographic index — the pills are gone */
.door__index {
  list-style: none; margin: clamp(22px, 2.4vw, 34px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px clamp(10px, 1.1vw, 16px);
  border-block-start: 1px solid rgba(248, 247, 242, 0.20);
  padding-block-start: clamp(16px, 1.7vw, 24px);
}
.door__index li {
  display: flex; align-items: center; gap: clamp(10px, 1.1vw, 16px);
  font-family: var(--f-ui); font-size: 0.9375rem; line-height: 1.4;
  color: rgba(248, 247, 242, 0.84);
}
.door__index li + li::before {
  content: ""; flex: 0 0 auto;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--champ);
}

.door__go {
  display: inline-flex; align-items: center; gap: 12px;
  margin-block-start: clamp(24px, 2.6vw, 38px);
  min-height: 44px;
  font-family: var(--f-ui); font-size: 0.9375rem; font-weight: 600;
  letter-spacing: 0.02em; color: var(--white);
}
.door__go i {
  font-style: normal; display: inline-block;
  transition: transform var(--d-fast) var(--ease);
}

.door:hover .door__bg,
.door:focus-visible .door__bg { transform: scale(1.075); }
.door:hover .door__go i,
.door:focus-visible .door__go i { transform: translateX(-6px); }
/* overflow:hidden would clip an outset ring, so it goes inside */
.door:focus-visible { outline: 2px solid var(--champ); outline-offset: -6px; }

@media (max-width: 1023px) {
  .wr__pair { grid-template-columns: 1fr; }
  .door { min-height: min(70svh, 560px); }
  /* MEASURED at 834: worst-pixel contrast under the copy was 4.70:1 against a
     4.5 requirement — passing, but too thin to trust across plates. */
  .door__veil {
    background: linear-gradient(to bottom,
      rgba(16, 29, 25, 0.34) 0%,
      rgba(16, 29, 25, 0.44) 26%,
      rgba(16, 29, 25, 0.84) 62%,
      rgba(16, 29, 25, 0.95) 100%);
  }
  .door + .door::before {
    inset-block: auto 0; inset-inline: 0;
    width: auto; height: 1px;
    inset-block-start: 0;
  }
}
@media (max-width: 560px) {
  .door { min-height: min(74svh, 520px); padding: clamp(26px, 6vw, 36px) var(--gutter); }
  .door__h { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  /* MEASURED at 390: worst-pixel contrast was 2.57:1 under the events copy and
     2.83:1 under the business copy — both failing 4.5:1. The cause is
     geometric, not tonal: a 4:3 plate cropped into a 390x520 box drops
     specular highlights (the rose, the pen's gold band) straight into the
     text zone, and a percentage gradient compresses in a short box. The
     scrim goes near-solid from the headline down; the top third still
     carries the photograph, which is all a phone needs for atmosphere. */
  .door__veil {
    background: linear-gradient(to bottom,
      rgba(16, 29, 25, 0.34) 0%,
      rgba(16, 29, 25, 0.50) 20%,
      rgba(16, 29, 25, 0.88) 46%,
      rgba(16, 29, 25, 0.94) 72%,
      rgba(16, 29, 25, 0.96) 100%);
  }
  .door__index li { font-size: 0.875rem; }
  /* MEASURED: as a wrapping flex row the six event words broke 5+1 and the
     five business words broke 4+1 — the orphan row this redesign existed to
     kill. A two-column grid cannot orphan: every row is deliberate, and the
     dot becomes a bullet on each item rather than a separator between them. */
  .door__index {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px clamp(12px, 3vw, 18px);
  }
  /* Both selectors carry the same declaration on purpose: `li + li::before`
     outranks a bare `li::before`, so switching the separator off and a bullet
     on in two rules left every item after the first with no dot. */
  .door__index li::before,
  .door__index li + li::before {
    content: ""; display: block; flex: 0 0 auto;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--champ);
  }
}

@media (prefers-reduced-motion: reduce) {
  .door__bg, .door__dim, .door__go i { transition: none; }
  .door:hover .door__bg, .door:focus-visible .door__bg { transform: scale(1.02); }
  .door:hover .door__go i, .door:focus-visible .door__go i { transform: none; }
}

/* ==========================================================================
   08 CONTACT — centred finale
   Was: an 8-of-12 block pinned to the inline-start edge, ~45% of the plate
   empty, a vertical rule dividing nothing, and a hard <br> that orphaned
   "שלכם" onto its own line. Now it closes the way the page opens — centred,
   on its own measure, with the CTA carrying real weight.
   ========================================================================== */

.fin { min-height: 84svh; display: flex; align-items: center; }
.fin__in { position: relative; z-index: 2; width: 100%; text-align: center; }

/* the vertical rule and the block offset are gone */
.fin__block, .fin__block::after { all: unset; }

.fin .status { margin: 0 0 clamp(22px, 2.4vw, 34px); justify-content: center; }

.fin__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 5rem);
  line-height: 1.12; letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 17ch;              /* wraps on its own measure, no forced break */
  color: var(--white);
  text-wrap: balance;
}
.fin__sub {
  font-family: var(--f-ui);
  font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
  line-height: 1.6;
  margin: clamp(20px, 2.2vw, 32px) auto 0;
  max-width: 34em;
  color: var(--on-dark);
}

.fin__cta {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px; margin-block-start: clamp(30px, 3.4vw, 48px);
}
.fin__wa { min-height: 70px; font-size: 17px; padding-inline: clamp(34px, 3.4vw, 56px); }

.fin__foot {
  display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 6px 16px;
  margin-block-start: clamp(26px, 3vw, 42px);
}
.fin__or {
  font-family: var(--f-ui); font-size: 14px;
  color: var(--on-dark-2);
}
.fin__tel {
  display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--f-disp);
  font-size: clamp(1.375rem, 2vw, 1.875rem);
  letter-spacing: 0.05em; color: var(--white); text-decoration: none;
  border-block-end: 1px solid rgba(248,247,242,0.34); padding-block-end: 2px;
  transition: border-color var(--d-fast) var(--ease);
  margin: 0;
}
.fin__tel:hover { border-color: var(--white); }

/* a symmetric veil now that the composition is centred */
.fin__veil {
  background:
    radial-gradient(56% 50% at 50% 48%, rgba(16,29,25,0.52) 0%, rgba(16,29,25,0.26) 58%, rgba(16,29,25,0.08) 82%),
    linear-gradient(to bottom, rgba(16,29,25,0.62) 0%, rgba(16,29,25,0.20) 34%, rgba(16,29,25,0.24) 64%, rgba(16,29,25,0.74) 100%);
}

@media (max-width: 560px) {
  .fin { min-height: 0; padding-block: clamp(72px, 16vw, 120px); }
  .fin__cta .b { flex: 1 1 100%; }
  .fin__h { max-width: 14ch; }
}

/* ==========================================================================
   08 CONTACT — the closing plate, rebuilt with structure
   The centred version still read as text dropped onto a photograph, and the
   old .fin__foot flex row let "או פשוט חייגו" collide with the phone number.
   This is a composed column: brand bookend, hairline, the question at full
   scale, ONE action, then the channels on a ruled register.
   `all: unset` on the old .fin__block is also removed — it was nuking
   inherited type on anything that class touched.
   ========================================================================== */

.fin {
  min-height: 92svh;
  display: flex; align-items: center;
  padding-block: clamp(72px, 8vw, 130px);
}
.fin__in {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--page);
  margin-inline: auto; padding-inline: var(--gutter);
}
/* one true centre: the column centres itself, the text centres inside it */
.fin__col {
  max-width: 62rem;
  margin-inline: auto;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

.fin__mark {
  font-family: var(--f-disp);
  font-size: clamp(0.9375rem, 1.2vw, 1.125rem);
  letter-spacing: 0.34em;
  color: var(--on-dark-2);
  margin: 0;
}
.fin__hair {
  display: block; width: 1px; height: clamp(34px, 4vw, 62px);
  background: linear-gradient(to bottom, rgba(184,162,125,0.7), rgba(184,162,125,0));
  margin-block: clamp(20px, 2.2vw, 32px);
}

.fin__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2.5rem, 5.6vw, 5.75rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin: 0; color: var(--white);
}
.fin__sub {
  font-family: var(--f-ui);
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.6; color: var(--on-dark);
  margin: clamp(18px, 2vw, 28px) 0 0; max-width: 32em;
}

/* ONE action, and it looks like one */
.fin__wa {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 74px; padding-inline: clamp(34px, 3.6vw, 60px);
  margin-block-start: clamp(30px, 3.4vw, 48px);
  background: var(--ivory); color: var(--g-deep);
  border: 1px solid var(--ivory); border-radius: 3px;
  font-family: var(--f-ui); font-size: clamp(16px, 1.2vw, 18px);
  text-decoration: none;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.fin__wa i { font-style: normal; color: var(--champ); transition: transform var(--d-mid) var(--ease); }
.fin__wa:hover { background: var(--white); }
.fin__wa:hover i { transform: translateX(-6px); }

.fin .status { margin: clamp(22px, 2.4vw, 34px) 0 0; justify-content: center; }

/* the channels: a ruled register, no collisions */
.fin__ch {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 40px);
  list-style: none; padding: clamp(24px, 2.8vw, 38px) 0 0;
  margin: clamp(34px, 3.8vw, 56px) 0 0;
  width: 100%; max-width: 46rem;
  border-block-start: 1px solid rgba(248,247,242,0.18);
}
.fin__ch li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fin__ch-l {
  font-family: var(--f-ui); font-size: 11px; letter-spacing: 0.2em;
  color: var(--on-dark-2);
}
.fin__ch-v {
  font-family: var(--f-disp);
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  letter-spacing: 0.03em; color: var(--white); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px;
  border-block-end: 1px solid transparent;
  transition: border-color var(--d-fast) var(--ease);
}
a.fin__ch-v:hover { border-block-end-color: var(--white); }

@media (max-width: 620px) {
  .fin { min-height: 0; padding-block: clamp(72px, 16vw, 110px); }
  .fin__wa { width: 100%; justify-content: center; }
  .fin__ch { grid-template-columns: 1fr; gap: 18px; }
  .fin__ch li { gap: 4px; }
}

/* ==========================================================================
   FOOTER — a signature, not a second contact section
   The closing plate above already carries phone / Instagram / WhatsApp. The
   old footer repeated all three plus a four-column link grid, so the same
   details appeared twice within one screen and the band read as filler.
   Now: the wordmark as the closing graphic, then one thin legal row.
   ========================================================================== */

.ft {
  background: var(--g-black);
  color: var(--on-dark-2);
  overflow: hidden;
}
.ft__wrap {
  width: 100%; max-width: var(--page);
  margin-inline: auto; padding-inline: var(--gutter);
  padding-block: clamp(48px, 5.5vw, 88px) clamp(20px, 2vw, 30px);
}

/* the wordmark sized to the column, cropped a touch at the baseline so it
   reads as a graphic rather than a heading */
.ft__giant {
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(2.25rem, 11.2vw, 12rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  color: rgba(248, 247, 242, 0.13);
  text-decoration: none;
  transition: color 500ms var(--ease);
}
.ft__giant:hover { color: rgba(248, 247, 242, 0.24); }

.ft__bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 28px;
  margin-block-start: clamp(34px, 4vw, 62px);
  padding-block-start: clamp(18px, 2vw, 26px);
  border-block-start: 1px solid rgba(248, 247, 242, 0.14);
}
.ft__nav { display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 1.8vw, 30px); }
.ft__nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;
  font-family: var(--f-ui); font-size: 15px;
  color: var(--on-dark); text-decoration: none;
  transition: color var(--d-fast) var(--ease);
}
.ft__nav a:hover { color: var(--white); }
.ft__legal {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.1em;
  color: var(--on-dark-2); margin: 0;
}
.ft__dot { color: var(--champ); }

@media (max-width: 620px) {
  .ft__giant { font-size: clamp(1.5rem, 10.5vw, 3rem); }
  .ft__bar { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* The giant wordmark is a link (back to top), so it needs a real target
   height. At 390px its type is only 37px tall — padding gives it the 44px
   without changing how the mark sits. */
.ft__giant { padding-block: 6px; }
@media (max-width: 620px) { .ft__giant { padding-block: 10px; } }

/* ==========================================================================
   CONTACT → FOOTER SEAM
   MEASURED: the plate's veil bottomed out at rgba(16,29,25,0.74), so ~26% of
   brightly lit silk survived all the way to the boundary and met a flat
   #101D19 footer — a hard visible edge. The veil now ramps to FULLY opaque
   footer colour over the last quarter of the section, so the photograph
   dissolves into the footer instead of stopping against it.
   ========================================================================== */
.fin__veil {
  background:
    radial-gradient(56% 50% at 50% 44%, rgba(16,29,25,0.50) 0%, rgba(16,29,25,0.24) 58%, rgba(16,29,25,0.06) 82%),
    linear-gradient(to bottom,
      rgba(16,29,25,0.62) 0%,
      rgba(16,29,25,0.18) 30%,
      rgba(16,29,25,0.20) 56%,
      rgba(16,29,25,0.62) 80%,
      rgba(16,29,25,0.93) 93%,
      #101D19 100%);
}
/* belt and braces: the footer opens with the same colour it is, so even a
   sub-pixel rounding difference at the boundary cannot show as a line */
.ft { border-block-start: 0; }
.ft::before {
  content: "";
  display: block;
  height: clamp(28px, 3vw, 56px);
  margin-block-start: calc(clamp(28px, 3vw, 56px) * -1);
  background: linear-gradient(to bottom, #101D19, #101D19);
  pointer-events: none;
}

/* ==========================================================================
   HERO — her two colours, and alive
   MEASURED before this block, averaged across the top, middle and lower
   thirds of the plate at 1440: HSL saturation 0.084 / 0.084 / 0.140. Her logo
   green is 0.259, so the hero was running at roughly HALF the chroma of her
   own brand colour. The hue was already right (156-160deg) — the missing
   thing was saturation, which is exactly why it read grey rather than green.

   The cause was one line: the bridal plate was held at opacity 0.30 AND
   filter: saturate(0.55), so a pale, drained image lay over the green and
   washed it out, while every veil above it was near-neutral rgba(16,29,25).

   Also measured: zero animations anywhere in the hero. Nothing moved.

   Her brief names two colours — "הירוק זה הצבע שמייחד את העסק" and
   "צבע בהיר - בז". The green was under-delivered; the beige was absent
   entirely. Both are explicit layers now.
   ========================================================================== */

/* (1) The ground stops being one flat fill. Four stops, all sampled from her
   logo plate: the lit satin where the light falls, the midtone through the
   centre, the fold shadow at the floor. */
.hx {
  background:
    radial-gradient(116% 86% at 50% 24%,
      #2E4C40 0%, #264237 34%, #1C332B 66%, #12241E 100%);
}

/* (2) The plate keeps its own colour instead of being drained, and sits at a
   base scale so the drift below has somewhere to travel without ever
   exposing an edge. */
/* MEASURED by toggling each layer and sampling the middle third:
     ground only ........ 0.210   (the gradient alone is nearly her 0.259)
     + veils ............ 0.176
     + the plate ........ 0.111   <- the photograph is the whole problem
   Tinting OVER the image could not win: a colour-blend layer above it bought
   only +0.030, because a pale near-neutral tulle photograph averages the
   green out no matter what sits on top. So the image is graded green itself.
   desaturate -> sepia (one warm tone) -> hue-rotate into her green ->
   re-saturate. The fabric keeps every fold; it just stops being grey. */
.hx__silk img {
  opacity: 0.32;
  filter: grayscale(1) sepia(0.92) hue-rotate(103deg) saturate(3.1) brightness(0.76) contrast(1.14);
  transform: scale(1.06);
  will-change: transform;
}

/* (3) mix-blend-mode:color takes hue and saturation from THIS layer and
   luminance from everything beneath it. That is the whole trick: the fabric
   keeps all of its fold structure, but the colour is forced back to her
   green, so no amount of pale tulle can grey the hero out again. */
/* The colour-blend experiment is gone: it cost a full-viewport re-blend and
   returned +0.030 saturation. A plain green wash does more for less, now
   that the plate underneath is green rather than grey. */
.hx__depth {
  display: block;
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: none;
  background-image: radial-gradient(88% 76% at 50% 38%,
    rgba(46,76,64,0.34) 0%, rgba(38,66,55,0.46) 44%, rgba(28,51,43,0.62) 74%, rgba(20,38,32,0.74) 100%);
  mix-blend-mode: normal;
  opacity: 1;
  transform: none;
}

/* (4) The beige. Screened over the green so it reads as warm light falling
   on the fabric, not as a beige panel laid on top. */
/* MEASURED: the first version of this pool read R-B = -12, i.e. still cool —
   spread too wide and too weak to be seen as beige at all. Tighter, warmer,
   and concentrated where the wordmark sits, so it reads as warm light on the
   fabric rather than as a wash. */
.hx__glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(38% 33% at 50% 40%,
      rgba(232, 210, 170, 0.38) 0%, rgba(205, 180, 138, 0.16) 50%, rgba(205, 180, 138, 0) 78%),
    radial-gradient(30% 26% at 74% 80%,
      rgba(205, 180, 138, 0.13) 0%, rgba(205, 180, 138, 0) 74%);
  mix-blend-mode: screen;
  opacity: 0.72;
  will-change: opacity, transform;
}

/* The beige also has to exist as STRUCTURE, not only as light — a glow alone
   is too easy to miss. The hairline frame and the three tile outlines were
   near-white; both carry her champagne now. */
@media (min-width: 900px) { .hx::after { border-color: rgba(190, 168, 130, 0.40); } }
@media (max-width: 899px) { .hx::after { border-color: rgba(190, 168, 130, 0.34); } }
.hx .tile { border-color: rgba(190, 168, 130, 0.44); }
.hx .tile:hover, .hx .tile:focus-visible { border-color: rgba(214, 194, 158, 0.85); }

/* (5) The scrim carries a green tint now instead of the old neutral, so it
   deepens the colour rather than dulling it. */
.hx__veil {
  background:
    radial-gradient(52% 46% at 50% 42%, rgba(18,44,36,0.30) 0%, rgba(18,44,36,0.10) 60%, rgba(18,44,36,0) 84%),
    linear-gradient(to bottom, rgba(16,36,30,0.44) 0%, rgba(16,36,30,0.04) 28%, rgba(16,36,30,0.08) 60%, rgba(18,35,30,0.80) 100%);
}
.hx__vig { background: radial-gradient(92% 84% at 50% 46%, rgba(14,28,23,0) 54%, rgba(14,28,23,0.40) 100%); }

/* --------------------------------------------------------------------------
   NO LIGHT BEHIND THE WORDMARK — Bar's call.
   The champagne pool above was screened over the fabric exactly where the
   mark sits. She wants the mark on plain silk, so the whole layer comes off
   (both the desktop pool and the phone variant further down).

   Removing a SCREEN layer can only darken the ground under white type, so it
   cannot cost legibility. MEASURED against the mark's own ink box, sampling
   the rendered pixels rather than the block it sits in:

     1440   glow on 11.5:1  ->  glow off 14:1   (ground 37,57,46 -> 20,43,34)
      390   glow on   11:1  ->  glow off 16:1   (ground 45,59,48 -> 12,31,24)

   The ground also goes cooler — R-B from -9 to -14 at 1440 — which is the
   beige leaving, which is the point.
   -------------------------------------------------------------------------- */
.hx__glow { display: none !important; animation: none !important; }

/* --------------------------------------------------------------- alive ---
   Two layers move, and only transform and opacity. Ambient loops are long
   and symmetric, so ease-in-out is the honest curve here (linear is still
   never used). Each animation's 0% frame is identical to the element's
   resting state, which is what stops it from lurching on first paint.
   The tint layer deliberately does NOT animate: it is a smooth gradient, so
   moving it would cost a full-viewport re-blend every frame and show
   nothing. The fabric moving underneath it is what the eye actually reads.
   -------------------------------------------------------------------------- */
@keyframes hxDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.5%, -1.1%, 0); }
}
@keyframes hxBreathe {
  from { opacity: 0.62; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.10); }
}
.hx__silk img { animation: hxDrift 34s cubic-bezier(0.45, 0, 0.55, 1) 600ms infinite alternate; }
.hx__glow     { animation: hxBreathe 17s cubic-bezier(0.45, 0, 0.55, 1) 600ms infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .hx__silk img, .hx__glow { animation: none; }
}

/* --------------------------------------------------- hero type legibility ---
   MEASURED against each string's own ink box (a Range union, not the centred
   block it sits in - the block is 1313px wide while "OWNER . BAR DOTAN" inks
   only 188px, so sampling the block reads mostly bare fabric and lies).

     owner, champagne #B8A27D ... 2.34:1 @1440, 2.43:1 @390   (needs 4.5)
     statement, #D8DCD6 ......... 3.41:1 @390                 (needs 4.5)

   The statement is clamp(1.1875rem..): 30px at 1440, which IS WCAG large text
   at 3:1, but 19px at 400 weight on a phone, which is NOT - so it owes 4.5:1
   there and was short.

   The owner line moves to --cream, which is a LIGHTER beige than champagne
   and therefore closer to the "צבע בהיר - בז" she asked for, not further
   from it. The champagne stays everywhere it already passes.
   -------------------------------------------------------------------------- */
.hx__owner { color: var(--cream); }
.hx__stmt  { color: var(--white); }

/* White on the phone plate still landed at 4.40:1, ~3% short. The mobile
   scrim deepens just enough to clear it without touching the desktop grade. */
@media (max-width: 899px) {
  .hx__veil {
    background:
      radial-gradient(58% 50% at 50% 42%, rgba(18,44,36,0.40) 0%, rgba(18,44,36,0.20) 60%, rgba(18,44,36,0.06) 84%),
      linear-gradient(to bottom, rgba(16,36,30,0.50) 0%, rgba(16,36,30,0.16) 28%, rgba(16,36,30,0.20) 60%, rgba(18,35,30,0.84) 100%);
  }
}

/* ==========================================================================
   PAGE STRUCTURE — alternating grounds
   MEASURED before this block, at 1440:
     hero    dark    900px
     about   ivory   852px
     worlds  dark    956px
     contact dark    952px
     footer  dark    394px
   The last three ran together as 2,302px of unbroken dark — 57% of the page
   with no ground change. That is why it read as one long slab rather than a
   structured page. Contact flips to the second light ground, so the page now
   alternates dark / light / dark / light / dark and each section is legible
   as its own thing.

   Also measured: section 02 began at y=1752 but its doors did not start
   until y=1952 — a 200px dead band (a 135px bar plus 65px of nothing above
   it). The bar is gone; the doors now meet the ivory edge directly.
   ========================================================================== */

/* the register that produced the dead band no longer exists */
.wr__bar, .wr__num, .wr__rule { display: none !important; }

/* --------------------------------------------------------- 03 CONTACT ---
   Was a full-bleed silk plate carrying white type. On a light ground the
   photograph and its veil are not needed at all, so both were removed from
   the markup — that also stops a 1920px image loading for a section that no
   longer shows it. The CTA inverts: a solid deep-green button on cream now
   carries far more weight than an ivory button on a dark photograph did.
   ------------------------------------------------------------------------ */
.fin {
  min-height: 0;
  padding-block: clamp(64px, 6.4vw, 104px);
}
.fin__mark  { color: #8A7649; }
.fin__hair  {
  height: clamp(26px, 3vw, 44px);
  margin-block: clamp(16px, 1.8vw, 24px);
  background: linear-gradient(to bottom, rgba(138,118,73,0.75), rgba(138,118,73,0));
}
.fin__h     { color: var(--g-deep); }
.fin__sub   { color: var(--ink-soft); }

.fin__wa {
  background: var(--g-deep); color: var(--ivory);
  border-color: var(--g-deep);
  min-height: 68px;
}
.fin__wa i      { color: var(--champ); }
.fin__wa:hover  { background: var(--g-black); border-color: var(--g-black); }

.fin .status        { color: #8A7649; }
.fin .status i      { background: #6E8F5E; }

.fin__ch    { border-block-start-color: var(--line-light); }
.fin__ch-l  { color: var(--ink-soft); }
.fin__ch-v  { color: var(--g-deep); }
a.fin__ch-v:hover { border-block-end-color: var(--g-deep); }

/* The CTA-to-footer seam patch is removed with the plate it was built for.
   It ramped the silk veil into the footer colour and pulled a dark strip up
   over the last 43px of the section — on a cream ground that strip would
   paint a dark bar across the bottom. Cream meeting the dark footer is a
   clean, deliberate edge and needs no blending at all. */
.ft::before { display: none !important; }

@media (max-width: 620px) {
  .fin { padding-block: clamp(56px, 12vw, 84px); }
}

/* --- two cascade fixes found by asking the browser, not by reading ------- */

/* .s-cream sits at line 65 but `.fin { background: var(--g-black) }` sits at
   line 405 — identical specificity, later in the file, so the dark ground
   won and the section stayed dark despite carrying the class. Set here,
   at the end, where it actually takes effect. */
.fin.s-cream { background: var(--cream); color: var(--ink); }

/* style.css carries `#work { padding-block-start: clamp(56px,4.5vw,80px) }`
   — an ID selector, so no class rule could ever cancel it. That padding was
   the last 65px of the dead band. It belonged to the previous work section,
   which no longer exists. */
#work { padding-block-start: 0; }

/* --- micro labels on light grounds -------------------------------------
   MEASURED: #8A7649 gives 3.87:1 on ivory and 3.49:1 on cream. These are
   13-17px at 400 weight, so they owe 4.5:1 and all three instances failed
   (about micro, contact mark, contact status). The about one was already
   failing before contact was flipped — this is a pre-existing defect that
   the new light section made three-of-three instead of one-of-one.
   Darkened until it clears on BOTH light grounds while staying gold.
   ----------------------------------------------------------------------- */
.s-ivory .micro, .s-cream .micro,
.fin__mark, .fin .status { color: #6E5E39; }

/* --- ABOUT: two alignment defects --------------------------------------
   1. The label is <p class="micro" dir="ltr">ABOUT</p>. On a BLOCK element
      dir="ltr" does not merely fix bidi ordering — it moves the text-align
      start edge to the LEFT. So the label sat hard against the left gutter
      while the heading it introduces was right-aligned, and the two never
      looked related. direction:rtl restores the start edge; a lone Latin
      word still renders left-to-right on its own, so nothing is reordered.
   2. The ghost "01" is gone from the markup. It overlapped her hair, and
      after the WORLDS bar was removed it was the only numeral left on the
      page — a system of one is not a system.
   ----------------------------------------------------------------------- */
.ab__body > .micro { direction: rtl; text-align: start; }
.ab__num { display: none !important; }

/* The read-more button and the "Bar" signature sat at opposite ends of the
   block with nothing between them, so the gap read as a mistake rather than
   as spacing. A hairline turns the pair into one ruled register - the same
   device the contact channels use - and the distance becomes deliberate. */
.ab__foot {
  align-items: center;
  border-block-start: 1px solid var(--line-light);
  padding-block-start: clamp(18px, 2vw, 28px);
  margin-block-start: clamp(26px, 3vw, 42px);
}

/* ==========================================================================
   CONTACT — the light silk plate
   main.js injects a looping video into #contact on desktop. It was still
   pointing at the GREEN silk, so after this section flipped to a light ground
   every desktop visitor got dark type over a dark green video. My own harness
   could not see it: headless Chromium has no H.264 decoder, so play() rejects
   and the script removes the element — the section photographed as clean
   cream while a real browser showed the opposite.

   The clip is the same fabric motion regraded to ivory with ffmpeg:
     hue stripped, black point lifted hard, then warmed.
     source  min   0.0  mean  25.9  max 175.9   hue 152deg  sat 0.737
     graded  min 113.3  mean 131.4  max 207.0   hue  41deg  sat 0.063
   The lifted floor is what makes dark type safe on moving fabric.

   MEASURED on the real composite (every one of the 121 frames rendered over
   the cream ground and sampled, not blend arithmetic): at 0.30 opacity the
   darkest pixel in any frame is #C6C0B5, L=0.530.
   ========================================================================== */

#contact .plate-video { z-index: 0; }
#contact .plate-video.is-ready { opacity: 0.30; }

/* On that darkest frame the old text colours gave 4.02:1 (sub) and 3.49:1
   (micro) against a 4.5 requirement — they only ever cleared it on FLAT
   cream. Darkened until they pass on the worst frame the video can produce,
   which also keeps them passing when the video never loads at all. */
.fin__sub, .fin__ch-l { color: #3A4741; }
.fin__mark, .fin .status { color: #5A4B2C; }

/* The plate must never outrank the type. */
.fin__in { position: relative; z-index: 3; }

/* ==========================================================================
   WORK PAGE — rebuilt on this system
   The old page was 35 KB on style.css's .sec--bone / .wrap / .panel tabs and
   never loaded editorial.js, so it looked like a different website: different
   type scale, different grounds, JS-dependent tab panels, and a reveal engine
   the rest of the site no longer uses.

   It is a monograph now. Her medium is the 9:16 reel, so the page is built
   around that frame at its native ratio and never larger than the source can
   carry (every file tops out at 720x1280; four columns at 1560px puts each
   plate at ~334px, roughly 2.1x density).

   The two bodies of work are ANCHORED sections, not tab panels — the home
   page's two doors link to #business and #events, and anchors survive with
   JavaScript off, which tab panels do not.
   ========================================================================== */

/* --- the opening ------------------------------------------------------- */
.wh { padding-block: clamp(104px, 11vw, 176px) clamp(52px, 6vw, 92px); }
.wh__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1.04; letter-spacing: -0.015em;
  margin: clamp(12px, 1.4vw, 22px) 0 0; color: var(--g-deep);
}
.wh__lead { margin-block-start: clamp(18px, 2vw, 28px); max-width: 34em; color: var(--ink-soft); }

/* a ruled index of the two bodies of work, carrying their real counts */
.wh__reg {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(18px, 2.4vw, 48px);
  margin-block-start: clamp(34px, 4vw, 58px);
  border-block-start: 1px solid var(--line-light);
}
.wreg {
  display: flex; align-items: baseline; gap: clamp(10px, 1.2vw, 18px);
  padding-block: clamp(18px, 2vw, 26px); min-height: 44px;
  text-decoration: none; border-block-end: 1px solid transparent;
  transition: border-color var(--d-fast) var(--ease);
}
.wreg + .wreg { border-inline-start: 1px solid var(--line-light); padding-inline-start: clamp(18px, 2.4vw, 48px); }
.wreg__n { font-family: var(--f-disp); font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1; color: #6E5E39; }
.wreg__t { font-family: var(--f-heb); font-weight: 300; font-size: clamp(1.0625rem, 1.5vw, 1.4375rem); color: var(--g-deep); }
.wreg__c {
  margin-inline-start: auto; font-family: var(--f-ui); font-size: 13px;
  letter-spacing: 0.14em; color: var(--ink-soft);
}
.wreg:hover, .wreg:focus-visible { border-block-end-color: var(--g-deep); }

/* --- a band of work ---------------------------------------------------- */
.wk { padding-block: clamp(76px, 8.5vw, 136px); }
.wk__head { max-width: 44em; }
.wk__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.875rem, 3.4vw, 3.125rem);
  line-height: 1.1; letter-spacing: -0.01em;
  margin: clamp(11px, 1.3vw, 19px) 0 0;
}
.s-deep .wk__h  { color: var(--white); }
.s-cream .wk__h { color: var(--g-deep); }
.wk__copy { margin-block-start: clamp(13px, 1.5vw, 21px); max-width: 34em; }

/* --- the filter row ----------------------------------------------------
   Eight categories across two worlds. A row of quiet type, not a row of
   pills: the wall is the loud thing on this page and the filter should read
   as an index above it. The count is stated on every button so choosing one
   is an informed choice rather than a guess. */
.filt {
  display: flex; flex-wrap: wrap; gap: 6px clamp(4px, 0.6vw, 10px);
  margin-block-start: clamp(28px, 3.4vw, 48px);
  padding-block-end: clamp(14px, 1.6vw, 22px);
  border-block-end: 1px solid var(--line-dark);
}
.s-cream .filt { border-block-end-color: var(--line-light); }
.filt__b {
  appearance: none; background: none; border: 0; border-radius: 2px;
  min-height: 44px; padding-inline: clamp(10px, 1.1vw, 16px);
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-ui); font-size: clamp(13px, 1vw, 14.5px); line-height: 1;
  color: var(--on-dark-2); cursor: pointer;
  transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
/* The count is information, not decoration — "(40)" is why you would pick
   this filter. It is set apart by size only; an opacity that dimmed it enough
   to read as secondary also dropped it to 2.9:1, below AA for 11.8px text. */
.filt__b span { font-size: 0.82em; }
.s-cream .filt__b { color: var(--ink-soft); }
.filt__b:hover { color: var(--white); background: rgba(248, 247, 242, 0.07); }
.s-cream .filt__b:hover { color: var(--g-deep); background: rgba(30, 51, 44, 0.06); }
.filt__b.is-on { color: var(--g-deep); background: var(--champ); }
.s-cream .filt__b.is-on { color: var(--ivory); background: var(--g-deep); }
.filt__b:focus-visible { outline: 2px solid var(--champ); outline-offset: 2px; }
.s-cream .filt__b:focus-visible { outline-color: var(--g-deep); }

/* --- the wall of plates ------------------------------------------------
   MASONRY, and it must read ACROSS THE ROWS.

   It used to be CSS multi-column, which packs beautifully but flows top-to-
   bottom down each column. Bar's note: "גם אם אני עושה אותו לפי סדר מסוים זה
   מסדר לי זה אחרת באתר" — she sets an order in the manager and the site shows
   another. MEASURED: the DOM order was correct all along; what was wrong was
   the reading direction. In a four-column wall her first four frames were
   stacked in one column, and the top row held items 1, 17, 33, 49.

   So: a grid, which is row-major, with each tile spanning as many 4px rows as
   its own height needs. Item 1 is top-right, item 2 beside it, item 3 beside
   that. The order she drags is the order the page reads.

   The spans are set by script. Without one, `grid-auto-rows: auto` gives a
   plain gallery grid — rows as tall as their tallest frame. Looser, never
   broken, and still in her order. */
.wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(14px, 1.6vw, 28px);
  row-gap: clamp(16px, 1.9vw, 32px);
  align-items: start;
  list-style: none; margin: clamp(30px, 3.6vw, 56px) 0 0; padding: 0;
}
/* masonry mode: the row gap moves INTO each tile's span so tiles can offset */
html.msn .wall { grid-auto-rows: 4px; row-gap: 0; }
.plate { margin: 0; }
.plate[hidden] { display: none; }
.plate__f {
  position: relative; overflow: hidden; display: block; width: 100%;
  padding: 0; border: 0; cursor: pointer;
  aspect-ratio: 9 / 16;                 /* fallback; the item's real ratio is inline */
  background: rgba(16, 29, 25, 0.28);   /* holds the box before the image decodes */
}
.s-cream .plate__f { background: rgba(30, 51, 44, 0.10); }

/* Each frame fades up as it decodes. NOT the site's .rv reveal: that system's
   2.2s failsafe releases every element at once, which on a 32,000px wall means
   205 frames "revealing" while 200 of them are nowhere near the screen. The
   network already staggers this page; the fade just rides it.
   Guarded on html.js so a frame is never invisible without a script to show
   it, and filter.js releases every image on load, on error, and on a 10s
   sweep — three independent ways out of the hidden state. */
.js .plate__f img {
  opacity: 0;
  /* the hover scale lives further down this file on a lower-specificity
     selector; restate it here or this rule would silently drop it */
  transition: opacity 260ms var(--ease), transform 620ms var(--ease);
}
.js .plate__f img.is-on { opacity: 1; }

/* filtering back in: a short fade-and-rise, exits are instant because the
   plate that leaves is replaced by the reflow, not by empty space */
.plate.is-in .plate__f { opacity: 0; transform: translateY(10px); }
.plate .plate__f { transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.s-cream .plate__f { background: rgba(30, 51, 44, 0.10); }
.plate__f img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The plate index. A monograph numbers its plates; this one does it quietly,
   on the frame itself and only while you are on it. Printing it under all 205
   would be 205 pieces of noise for no information. aria-hidden: it is
   decoration, and the button already carries a real name. */
.plate__i {
  position: absolute; inset-block-end: 8px; inset-inline-start: 10px;
  font-family: var(--f-disp); font-size: 13px; line-height: 1;
  letter-spacing: 0.06em; color: rgba(248, 247, 242, 0.92);
  text-shadow: 0 1px 6px rgba(9, 18, 15, 0.75);
  opacity: 0; transform: translateY(4px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
}
.plate__f:hover .plate__i, .plate__f:focus-visible .plate__i { opacity: 1; transform: none; }

/* --- before and after ---------------------------------------------------
   "אחד ליד השני פשוט" — two halves side by side, each captioned underneath.
   One tile, not two: the pair is a single record, so it filters, hides and
   orders as one thing and cannot come apart.

   This tile is the only one without a declared aspect-ratio — its height
   comes from the two pictures inside, each of which reserves its own box, so
   nothing reflows when they decode. */
.plate--ba .plate__f { aspect-ratio: auto; background: none; }
.ba {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px; width: 100%;
}

/* MEASURED: inside a two-column wall each half came out 83x103px on a 390px
   phone and 66x82px at 320 — far too small to compare one against the other,
   which is the entire job of the tile. A pair takes the full width of the
   wall there instead. Above 700px the halves are 154px and read fine in
   place. (`grid-column: 1 / -1` now that the wall is a grid; it used to be
   `column-span: all`, which only means anything in multi-column.) */
@media (max-width: 699px) {
  .plate--ba { grid-column: 1 / -1; }
  .ba { gap: 8px; }
  .plate--ba .ba__t { font-size: 12.5px; letter-spacing: 0.18em; padding-block-start: 9px; }
}
.ba__half { display: block; min-width: 0; }
.ba__pic {
  display: block; position: relative; overflow: hidden;
  background: rgba(16, 29, 25, 0.28); border-radius: 2px;
}
.s-cream .ba__pic { background: rgba(30, 51, 44, 0.10); }
.ba__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba__t {
  display: block; text-align: center;
  padding-block: 7px 2px;
  font-family: var(--f-ui); font-size: 11.5px;
  letter-spacing: 0.14em; color: var(--on-dark-2);
}
.s-cream .ba__t { color: var(--ink-soft); }
/* the index sits under a pair rather than over it — there is no single
   photograph to sit on */
.plate--ba .plate__i { position: static; opacity: 1; transform: none; text-shadow: none;
  display: block; text-align: center; color: var(--champ); padding-block-start: 2px; }
.s-cream .plate--ba .plate__i { color: #6E5E39; }

/* a wave across each row rather than everything arriving at once */
.wall .plate:nth-child(4n+2) { transition-delay: 60ms; }
.wall .plate:nth-child(4n+3) { transition-delay: 120ms; }
.wall .plate:nth-child(4n+4) { transition-delay: 180ms; }

@media (min-width: 1700px) { .wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1279px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* MEASURED on an earlier build: dropping to two columns at 899 made the 834px
   tablet the LONGEST page of any viewport — 11,001px against 6,992px at 1440 —
   because a 9:16 plate at half a tablet's width is ~658px tall. Three columns
   hold until 700. */
@media (max-width: 699px)  {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; }
}

/* Two kinds of frame live in this wall and they do not want the same room.

   A 9:16 reel poster is a glance — at 169px on a 390px phone it is exactly the
   Instagram reels grid and reads fine. Bar's 1:1 frames are not glances: they
   are composites she builds in her own template, two phone screenshots side by
   side under a printed label — "Before / After", "Results", "banner", a
   client's name. MEASURED two-up: the whole composite is 169px, so each half
   is 84px. At that size a before-and-after is indistinguishable from a banner,
   which defeats the only reason the frame exists. Full width gives 350px,
   halves of 175px — enough to see that the grid changed and decide to open it.

   The cost is real and it is height: MEASURED, the page grows about 120%. So
   this stops at 520px rather than running to 700.

     320px   13,174 -> 28,022      390px   15,833 -> 34,365
     430px   17,233 -> 37,801      560px   21,772 -> 48,484
     699px   26,531 -> 59,787

   520 clears every phone in portrait — the widest mainstream one is 430 — and
   keeps the worst case near 40,000px instead of 60,000. Above it two columns
   give a 234px tile and up, which is the same register as the 311px desktop
   tile, where the printed label is legible already. */
@media (max-width: 520px) {
  .plate--wide { grid-column: 1 / -1; }
}
@media (max-width: 380px)  { .wall { column-gap: 10px; row-gap: 10px; } }

/* ==========================================================================
   404 — a wrong turn should say so and then be useful.
   MEASURED before this existed: any unknown path returned the HOME PAGE with
   HTTP 200, because Caddy's php_fastcgi falls through to index.php. A missing
   image answered with 18 KB of HTML and a 200, which is the worst possible
   answer: nothing looks broken until you look at the picture.
   ========================================================================== */
.e4 { padding-block: clamp(120px, 13vw, 200px) clamp(80px, 9vw, 140px); min-height: 60vh; }
.e4__in { max-width: 44em; }
.e4__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -0.015em;
  margin: clamp(12px, 1.4vw, 22px) 0 0; color: var(--g-deep);
}
.e4__lead { margin-block-start: clamp(16px, 1.8vw, 26px); max-width: 32em; color: var(--ink-soft); }
.e4__nav {
  display: grid; margin-block-start: clamp(30px, 3.4vw, 48px);
  border-block-start: 1px solid var(--line-light);
}
.e4__nav a {
  display: flex; align-items: baseline; gap: clamp(12px, 1.4vw, 20px);
  padding-block: clamp(15px, 1.7vw, 22px); min-height: 44px;
  border-block-end: 1px solid var(--line-light);
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  color: var(--g-deep); text-decoration: none;
  transition: padding-inline-start var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.e4__nav a span { font-family: var(--f-disp); font-size: 0.8em; color: #6E5E39; }
.e4__nav a:hover { padding-inline-start: 10px; color: #14251F; }
.e4__nav a:focus-visible { outline: 2px solid var(--g-deep); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .e4__nav a { transition: none; } .e4__nav a:hover { padding-inline-start: 0; } }

/* --- closing ----------------------------------------------------------- */
.wcta { padding-block: clamp(76px, 8vw, 128px); }
.wcta__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wcta__h {
  font-family: var(--f-heb); font-weight: 300;
  font-size: clamp(1.875rem, 3.8vw, 3.25rem); line-height: 1.14;
  margin: clamp(14px, 1.6vw, 24px) 0 0; color: var(--white); max-width: 16em;
}
.wcta__wa {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 68px; padding-inline: clamp(32px, 3.4vw, 56px);
  margin-block-start: clamp(28px, 3vw, 44px);
  background: var(--ivory); color: var(--g-deep);
  border: 1px solid var(--ivory); border-radius: 3px;
  font-family: var(--f-ui); font-size: clamp(16px, 1.2vw, 18px); text-decoration: none;
  transition: background-color var(--d-fast) var(--ease);
}
.wcta__wa i { font-style: normal; color: #6E5E39; transition: transform var(--d-fast) var(--ease); }
.wcta__wa:hover { background: var(--white); }
.wcta__wa:hover i { transform: translateX(-6px); }
.wcta__alt { margin: clamp(20px, 2.2vw, 30px) 0 0; }
.wcta__alt a {
  font-family: var(--f-ui); font-size: 15px; color: var(--on-dark);
  text-decoration: none; border-block-end: 1px solid rgba(216,220,214,0.42);
  padding-block-end: 3px; min-height: 44px; display: inline-flex; align-items: center;
}
.wcta__alt a:hover { color: var(--white); border-block-end-color: var(--white); }

@media (max-width: 620px) {
  .wcta__wa { width: 100%; justify-content: center; }
  .wh__reg { grid-template-columns: 1fr; }
  .wreg + .wreg { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--line-light); }
}
@media (prefers-reduced-motion: reduce) {
  .wall .plate { transition-delay: 0ms !important; }
  .wcta__wa:hover i { transform: none; }
  .plate .plate__f { transition: none; }
  .plate__i { transition: none; transform: none; }
  .js .plate__f img { opacity: 1 !important; transition: none; }
}

/* ==========================================================================
   MOBILE — the phone gets its own composition, not a squeezed desktop
   ========================================================================== */

/* --- 1. the hero ground -------------------------------------------------
   MEASURED: the desktop plate is 1600x686. A 390x844 phone window crops that
   to roughly a 3% horizontal slice of the middle, which is why the fabric
   read as a flat gradient with no structure. The phone now loads a portrait
   source (1080x1935) whose folds run the full height of the screen.

   It also needs a DIFFERENT grade. The desktop plate is pale bridal tulle
   forced green by a hue-rotate; this one is already her emerald, so putting
   the same chain on it would double-process the colour. Here the fabric only
   needs to be seated and slightly deepened, and it can sit far more opaque
   because it is not fighting to become green.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  .hx__silk img {
    opacity: 0.72;
    filter: saturate(1.04) contrast(1.06) brightness(0.86);
    object-position: center 46%;
    transform: scale(1.04);
  }
  @keyframes hxDriftM {
    from { transform: scale(1.04) translate3d(0, 0, 0); }
    to   { transform: scale(1.10) translate3d(0, -1.6%, 0); }
  }
  .hx__silk img { animation: hxDriftM 38s cubic-bezier(0.45, 0, 0.55, 1) 600ms infinite alternate; }

  /* the tint layer is fighting nothing now — it only has to seat the folds */
  .hx__depth {
    background-image: radial-gradient(96% 74% at 50% 40%,
      rgba(46,76,64,0.18) 0%, rgba(30,51,44,0.34) 48%, rgba(18,35,30,0.56) 100%);
  }
  /* the beige pool sits behind the wordmark rather than the middle of a
     landscape frame */
  .hx__glow {
    background:
      radial-gradient(56% 26% at 50% 33%,
        rgba(232, 210, 170, 0.34) 0%, rgba(205, 180, 138, 0.13) 52%, rgba(205, 180, 138, 0) 80%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hx__silk img { animation: none !important; }
}

/* --- 2. the three doors become a ruled register -------------------------
   Three outlined boxes stacked on a phone read as form fields, not as the
   entrance to the site. The site already speaks in ruled registers (the
   door index, the work page index, the contact channels) — so on a phone
   these become one, with the whole row as the target.
   ------------------------------------------------------------------------ */
@media (max-width: 860px) {
  .hx__tiles {
    grid-template-columns: 1fr;
    gap: 0; max-width: none;
    margin-block-start: clamp(30px, 7vw, 46px);
    border-block-start: 1px solid rgba(190, 168, 130, 0.32);
  }
  .hx .tile {
    background: none; border: 0; border-radius: 0;
    border-block-end: 1px solid rgba(190, 168, 130, 0.32);
    min-height: 62px; padding-inline: 2px;
    justify-content: space-between;
  }
  .hx .tile:hover, .hx .tile:focus-visible { background: none; }
  .hx .tile__t { text-align: start; font-size: 16px; letter-spacing: 0.01em; }
  .hx .tile__i { color: var(--champ); font-size: 15px; }
  .hx .tile:active .tile__i { transform: translateX(-5px); }
}

/* --- 3. the footer ------------------------------------------------------
   MEASURED: 251px tall on a phone, with the wordmark squeezed onto one line
   at 41px and all five links crammed into a single wrapped row. It read as a
   leftover strip rather than the close of the page. It gets real height, the
   wordmark gets room, and the links become a two-column ruled menu with
   48px rows instead of a cramped line of text.
   ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .ft__wrap { padding-block: clamp(34px, 9vw, 54px) clamp(20px, 5vw, 30px); }
  .ft__giant {
    font-size: clamp(1.75rem, 12.4vw, 3.25rem);
    padding-block: clamp(10px, 3vw, 18px);
    color: rgba(248, 247, 242, 0.17);
  }
  .ft__bar {
    flex-direction: column; align-items: stretch; gap: 0;
    margin-block-start: clamp(22px, 6vw, 34px);
  }
  .ft__nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(14px, 4vw, 24px);
    border-block-start: 1px solid rgba(248, 247, 242, 0.14);
  }
  .ft__nav a {
    display: flex; align-items: center; min-height: 50px;
    border-block-end: 1px solid rgba(248, 247, 242, 0.14);
    font-size: 15px;
  }
  /* an odd count leaves the last cell empty — let it span so the rule closes */
  .ft__nav a:nth-child(5) { grid-column: 1 / -1; }
  .ft__legal {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-block-start: clamp(16px, 4vw, 24px);
    font-size: 12.5px;
  }
}

/* --- desktop hero ground: real emerald instead of forced emerald ---------
   The desktop plate was pale bridal tulle held at 32% and dragged to green by
   grayscale > sepia > hue-rotate(103deg) > saturate(3.1). That worked — it
   measured 0.322/0.277/0.370 saturation — but a forced hue has no fold
   structure of its own, so beside the phone's portrait curtain it read flat.
   This source is emerald silk to begin with, so the whole rotate chain comes
   off and the fabric only needs seating and deepening.
   ------------------------------------------------------------------------- */
.hx__silk img {
  opacity: 0.66;
  filter: saturate(1.02) contrast(1.06) brightness(0.62);
  transform: scale(1.06);
  will-change: transform;
}

/* ==========================================================================
   BAR'S NOTES — her own photograph, her own background, clearer numbers
   ========================================================================== */

/* --- 1. the About figure is a real photograph now -----------------------
   The plate was built for a transparent cutout: object-fit:contain so she
   stood ON the tinted panel, plus a ::after contact shadow to seat her feet.
   Her photograph carries its own backdrop, so contain would letterbox it and
   the shadow would smear a grey band across the bottom of a real picture.
   ------------------------------------------------------------------------ */
.ab__plate { background: var(--cream); }
.ab__plate img { object-fit: cover; object-position: center 6%; }
.ab__plate::after { display: none; }
.ab__sig { display: none !important; }   /* she asked for this to go */

/* --- 2. her silk on the hero -------------------------------------------
   MEASURED: her file has mean luminance 24.4 (portrait) / 23.1 (landscape
   crop) out of 255 — near-black, and far darker than the plate it replaces.
   The grade in place multiplied brightness by 0.62, which on this source
   would have crushed the hero back to a flat dark panel. It has to be
   LIFTED instead. Saturation is already 0.42-0.49, well past her logo's
   0.259, so the colour needs nothing.
   ------------------------------------------------------------------------ */
.hx__silk img {
  opacity: 0.92;
  filter: saturate(1.04) contrast(1.03) brightness(1.95);
  transform: scale(1.06);
  will-change: transform;
}
@media (max-width: 899px) {
  .hx__silk img {
    opacity: 0.95;
    filter: saturate(1.04) contrast(1.03) brightness(2.05);
    object-position: center 46%;
    transform: scale(1.04);
  }
}

/* --- 3. her silk on both doors -----------------------------------------
   One cloth behind both worlds, at her request. Two crops of the same frame
   keep them related without making them identical: the events door takes the
   upper folds, the business door the lower ones, mirrored.
   ------------------------------------------------------------------------ */
.door__bg { filter: saturate(1.04) contrast(1.03) brightness(1.72); }
.wr__pair > .door:first-child .door__bg { object-position: center 20%; }
.wr__pair > .door + .door .door__bg {
  object-position: center 80%;
  transform: scale(1.02) scaleX(-1);
}
.door:hover .door__bg,
.door:focus-visible .door__bg { transform: scale(1.075); }
.wr__pair > .door + .door:hover .door__bg,
.wr__pair > .door + .door:focus-visible .door__bg { transform: scale(1.075) scaleX(-1); }

/* --- 4. the package numbers --------------------------------------------
   Bar: the packages are right, only the numbers need to read more clearly.
   She is correct and it is measurable — they were --champ #B8A27D, which is
   3.87:1 on ivory against a 4.5 minimum, set in a light display face. The
   figure now leads and the word sits under it as a label, so the count is
   the thing you see first in the row.
   ------------------------------------------------------------------------ */
.pkg__reels {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: var(--f-ui); font-size: 12px; font-weight: 400;
  letter-spacing: 0.1em; line-height: 1.2;
  color: var(--ink-soft); white-space: nowrap;
}
.pkg__reels b {
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(2.125rem, 3.1vw, 2.875rem); line-height: 1;
  color: #6E5E39; margin: 0;
}
.pkg { align-items: center; }
@media (max-width: 700px) {
  .pkg__reels { align-items: flex-start; margin-block-start: 4px; }
  .pkg__reels b { font-size: clamp(1.875rem, 9vw, 2.375rem); }
}

/* --- the lift moved into the image, so CSS stops multiplying ------------
   MEASURED after regrading with a tone curve (shadows and midtones lifted,
   highlights rolled off below clipping):
     before   mean 24.4   max 152   -> CSS brightness(1.95) clipped it to 255
     after    mean 46.4   max 157   -> no multiply needed at all
   The blown fold highlights that were sitting under the wordmark are gone
   because the highlights were never pushed past white in the first place.
   ----------------------------------------------------------------------- */
.hx__silk img {
  opacity: 0.94;
  filter: saturate(1.02) contrast(1.04);
  transform: scale(1.06);
}
@media (max-width: 899px) {
  .hx__silk img {
    opacity: 0.96;
    filter: saturate(1.02) contrast(1.04);
    object-position: center 46%;
    transform: scale(1.04);
  }
}
.door__bg { filter: saturate(1.02) contrast(1.03); }

/* The cream owner label landed at 4.14:1 against a 4.5 requirement on a lit
   fold at 1440. Deepening the centre scrim by a tenth keeps her beige on that
   line rather than bleaching it to white to pass. */
.hx__veil {
  background:
    radial-gradient(58% 52% at 50% 36%, rgba(18,44,36,0.42) 0%, rgba(18,44,36,0.18) 58%, rgba(18,44,36,0) 84%),
    linear-gradient(to bottom, rgba(16,36,30,0.46) 0%, rgba(16,36,30,0.06) 28%, rgba(16,36,30,0.10) 60%, rgba(18,35,30,0.82) 100%);
}
@media (max-width: 899px) {
  .hx__veil {
    background:
      radial-gradient(64% 54% at 50% 38%, rgba(18,44,36,0.46) 0%, rgba(18,44,36,0.22) 60%, rgba(18,44,36,0.06) 84%),
      linear-gradient(to bottom, rgba(16,36,30,0.50) 0%, rgba(16,36,30,0.14) 28%, rgba(16,36,30,0.18) 60%, rgba(18,35,30,0.84) 100%);
  }
}

/* ==========================================================================
   BAR: two more notes
   ========================================================================== */

/* --- 1. the big logo takes the small logo's treatment -------------------
   "לשנות את הגופן בלוגו הגדול לגופן כמו שעשית בקטן".
   Same face already (Italiana) — what differed was case and tracking: the
   header is uppercase at 0.06em, the hero was sentence case at 0.02em. Now
   they are one lockup.

   The mark then became BAR'EVO — seven characters where it had been
   seventeen. Two consequences. It now holds one line at any width, so the
   phone no longer needs the two-word stack it used to break into. And at the
   old 7.8vw it inked only 33% of the shell and read as a caption rather than
   as the hero. MEASURED: ink runs 4.27x the font size for this string, so
   13.6vw puts it at ~58% of the shell from 320 to 1920 — big enough to own
   the plate, short of an edge-to-edge shout.
   ------------------------------------------------------------------------ */
.hx__mark {
  font-size: clamp(3rem, 13.6vw, 13rem);
  letter-spacing: 0.06em;
  line-height: 1.04;
  text-transform: uppercase;
}
/* the tracking adds a trailing gap after the last letter, which throws a
   centred line off-centre by half of it */
.hx__mark span { margin-inline-end: -0.06em; display: inline-block; }

/* --- 2. one cloth behind both doors -------------------------------------
   "זה יש לך אופציה שכאילו הרקע התחבר בניהם?"
   Yes. Each door was cropping the same photograph separately, so the two
   crops met at the divider and the cloth visibly jumped. Instead the image
   is now sized to the WHOLE PAIR and offset per door, so one continuous
   piece of fabric runs across the diptych — horizontally on a desktop,
   vertically when the doors stack on a phone.
   ------------------------------------------------------------------------ */
.door__bg { position: absolute; }

@media (min-width: 1024px) {
  .door__bg { inset-block: 0; width: 200%; height: 100%; }
  .wr__pair > .door:first-child .door__bg { inset-inline-start: 0; }
  .wr__pair > .door + .door  .door__bg { inset-inline-start: -100%; }
}
@media (max-width: 1023px) {
  .door__bg { inset-inline: 0; width: 100%; height: 200%; }
  .wr__pair > .door:first-child .door__bg { inset-block-start: 0; }
  .wr__pair > .door + .door  .door__bg { inset-block-start: -100%; }
}

/* The per-door crop and the mirror are gone: both would break the join.
   Hover no longer scales the fabric either — scaling one half of a shared
   cloth tears it at the divider. The sibling dim already carries the
   interaction. */
.wr__pair > .door:first-child .door__bg,
.wr__pair > .door + .door .door__bg { object-position: center; transform: none; }
.door:hover .door__bg,
.door:focus-visible .door__bg,
.wr__pair > .door + .door:hover .door__bg,
.wr__pair > .door + .door:focus-visible .door__bg { transform: none; }

/* --- the join, corrected -------------------------------------------------
   The first version offset the second door by -100% on the inline axis. In
   RTL `inset-inline-start` resolves to `right`, so -100% pushed that image
   completely outside its own door and overflow:hidden clipped it away — the
   business half rendered as bare #101D19 with no cloth at all.

   The right construction needs no negative offset. Anchor each door's copy
   to its OWN OUTER edge at 200% size, and both copies land on exactly the
   same physical rectangle — the full width of the pair — so object-fit
   computes one crop across the diptych and the cloth cannot step at the
   divider. Direction-proof, because neither side depends on a sign.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .door__bg {
    inset-block: 0; inset-inline: auto;
    width: 200%; height: 100%;
  }
  .wr__pair > .door:first-child .door__bg { inset-inline-start: 0; inset-inline-end: auto; }
  .wr__pair > .door + .door      .door__bg { inset-inline-end: 0;   inset-inline-start: auto; }
}
@media (max-width: 1023px) {
  .door__bg {
    inset-inline: 0; inset-block: auto;
    width: 100%; height: 200%;
  }
  .wr__pair > .door:first-child .door__bg { inset-block-start: 0; inset-block-end: auto; }
  .wr__pair > .door + .door      .door__bg { inset-block-end: 0;   inset-block-start: auto; }
}

/* style.css:118 carries a global `img, video { max-width: 100% }`. It won
   silently over `width: 200%` — the cascade showed 200% winning while the
   USED width stayed 720px — which is why the shared cloth worked when the
   doors stacked (height:200% is uncapped) and not when they sat side by
   side. Opt this one image out of the reset. */
.door__bg { max-width: none; }

/* ==========================================================================
   THE PORTFOLIO VIEWER
   ========================================================================== */
.plate__f {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: rgba(16, 29, 25, 0.28);
  position: relative; overflow: hidden;
}
/* a video frame is not a zoom, it is a play */
.plate__f--vid { cursor: pointer; }
.s-cream .plate__f { background: rgba(30, 51, 44, 0.10); }
.plate__f img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 620ms var(--ease);
}
.plate__f:hover img, .plate__f:focus-visible img { transform: scale(1.045); }
.plate__f:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; }

html.lb-on { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.lb__bg { position: absolute; inset: 0; background: rgba(9, 18, 15, 0.93); }

/* MEASURED, and the cause was not the obvious one. The box carried an
   explicit height, but its grid row was `auto` and `align-items: center`
   stopped the stretch — so `height: 100%` on the figure had nothing definite
   to resolve against and fell back to content height. The video then sized
   itself off the COLUMN WIDTH: at 1440x900 the <video> element came out
   976x1735 inside an 828px box, 835px taller than the whole viewport. That
   is the "opens full page". Same for a tall image.

   The cure is a definite row, stretch instead of centre, and min-height: 0
   at every level so a flex/grid child is actually allowed to be smaller than
   its content. */
.lb__box {
  position: relative; z-index: 1;
  width: min(1100px, 96vw);
  height: min(92svh, 1000px);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}
.lb__fig {
  margin: 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.lb__media {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}

/* The element hugs the picture rather than letterboxing inside a full-width
   box. Three things follow: the native controls sit under the video instead
   of stretching across black, the dark area beside a 9:16 reel is the
   backdrop so clicking it closes the viewer, and nothing overflows. */
.lb__img, .lb__vid {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  min-width: 0; min-height: 0;
  border-radius: 3px;
}
.lb__vid { background: #000; }

/* a pair opens as a pair, still labelled underneath */
.lb__ba {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 20px);
  width: 100%; max-height: 100%; min-height: 0;
}
.lb__ba[hidden] { display: none; }
.lb__ba figure {
  margin: 0; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
}
.lb__ba-pic { display: block; min-height: 0; }
.lb__ba img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  border-radius: 3px;
}
.lb__ba figcaption {
  flex: 0 0 auto; padding-block-start: 10px;
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.16em;
  color: var(--on-dark-2);
}
@media (max-width: 560px) { .lb__ba { gap: 8px; } .lb__ba figcaption { font-size: 11px; letter-spacing: 0.1em; } }

.lb__cap {
  flex: 0 0 auto; text-align: center; padding-block-start: 14px;
  font-family: var(--f-ui); font-size: 14px; color: var(--on-dark);
}
.lb__nav, .lb__x {
  background: rgba(248, 247, 242, 0.08);
  border: 1px solid rgba(248, 247, 242, 0.22);
  color: var(--white); border-radius: 50%;
  width: 48px; height: 48px; cursor: pointer;
  display: grid; place-items: center; font-size: 24px; line-height: 1;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.lb__nav:hover, .lb__x:hover { background: rgba(248, 247, 242, 0.18); border-color: var(--champ); }
.lb__x { position: absolute; top: -8px; inset-inline-end: -4px; z-index: 2; font-size: 17px; }
/* the row now stretches, so the circles have to opt out of it */
.lb__nav { align-self: center; }
.lb__nav--prev { justify-self: start; }
.lb__nav--next { justify-self: end; }
/* The counter, drawn from the attribute the script keeps up to date.

   MEASURED: it read "20 / 1" on the first frame of a twenty-frame category.
   The script writes "1 / 20", but this is an RTL document, and a neutral "/"
   between two numbers takes the paragraph direction — so the two runs came
   out reversed and the viewer said it was on the last frame when it was on
   the first. The counter is a Latin-numeral construct; isolate it and give
   it its own direction. text-align stays centre, so nothing moves. */
.lb::after {
  content: attr(data-i);
  position: absolute; bottom: 18px; inset-inline: 0; text-align: center;
  direction: ltr; unicode-bidi: isolate;
  font-family: var(--f-ui); font-size: 12px; letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--on-dark-2); pointer-events: none;
}

/* On a phone the arrows had been floated over the bottom of the picture —
   which is exactly where a video's own play/scrub controls live. Two sets of
   controls in the same 48px band is a guaranteed mis-tap. They get their own
   row underneath instead. */
@media (max-width: 700px) {
  .lb__box {
    width: 94vw;
    height: min(88svh, 900px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .lb__fig  { grid-column: 1 / -1; grid-row: 1; }
  .lb__nav  { position: static; }
  .lb__nav--prev { grid-column: 1; grid-row: 2; justify-self: start; }
  .lb__nav--next { grid-column: 2; grid-row: 2; justify-self: end; }
  .lb__cap { padding-block-end: 0; font-size: 13.5px; }
  .lb__x { top: 0; inset-inline-end: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .plate__f:hover img, .plate__f:focus-visible img { transform: none; }
}

/* CRITICAL: `.lb { display: grid }` beat the UA stylesheet's
   `[hidden] { display: none }`, so the closed viewer stayed laid out as a
   fixed, full-screen grid and swallowed every click on the page. Playwright
   reported ".lb__box … intercepts pointer events" on an element that was
   marked hidden. The attribute selector raises specificity above the class,
   so hidden now genuinely means hidden. */
.lb[hidden] { display: none !important; }

/* ---------------------------------------------------------------- video -- */
.plate__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none;
}
.plate__play svg {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(16, 29, 25, 0.6); fill: var(--white);
  padding: 14px; border: 1px solid rgba(248, 247, 242, 0.4);
  backdrop-filter: blur(3px);
  transition: background-color var(--d-fast) var(--ease);
}
.plate__f--vid:hover .plate__play svg,
.plate__f--vid:focus-visible .plate__play svg { background: rgba(16, 29, 25, 0.82); }

/* This block used to restate width/height: 100% and, being later in the file,
   it quietly beat the sizing above — the element stayed 976px wide with 54%
   of it black. Sizing now lives in one place; only the hidden rule is left
   here, because [hidden] has to outrank `display: block`. */
.lb__vid[hidden], .lb__img[hidden] { display: none !important; }