/* ==========================================================================
   premium.css - header + home hero + business-first work section.
   Loaded LAST on every page, after home-en.css.

   Why this exists, in Bar's words (21 Oct): "no message, no call to action,
   nothing. A site that does not draw the eye to businesses - and it matters
   more to me that this site is for businesses than for events."

   Each of those was literally true, and measured:
   - the hero said "SOCIAL MEDIA MANAGEMENT" over a wordmark and three nav
     tiles: no promise, no action, no picture of her work;
   - editorial.css:650 hides .header__wa below 1024px with !important, so a
     phone's first screen had NO route to contact her at all;
   - the home page showed none of the 46 business reels she has published;
   - events was the first door and the same weight as business.

   Ground rules carried over from her earlier notes: ONE flat green
   (--g-deep, rgb 30 51 44) everywhere, no glow, no sheen, no texture. The
   eye-catching part is her own work - real reel posters - not decoration.
   Motion is transform only, ambient, and stops under reduced-motion.
   ========================================================================== */

/* ---- 1. header ----------------------------------------------------------
   The solid bar was --emerald-raise (#1A4136), a different green from the
   rest of the site (#1E332C), and a 132px dark gradient scrim sat over the
   top of the hero: the strip Bar kept reading as "not the same colour". Both
   go. Flat green, one hairline, nothing else.                              */
.header::before {
  background: var(--g-deep);
  border-block-end: 1px solid var(--line-dark);
}
.header::after { display: none; }

/* The contact button is the point of the bar, so it is never hidden. Over the
   hero (which carries its own filled button) it is an outline; once the hero
   has scrolled away it fills, so there is exactly one primary action in view
   at any scroll position. */
.header .header__wa {
  background: transparent;
  border: 1px solid rgba(249, 247, 242, 0.34);
  color: var(--white);
  min-height: 44px;
  padding-inline: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: background-color 0s, color 0s;
}
.header .header__wa::before { background: var(--champ); opacity: 0; }
.header.is-solid .header__wa {
  background: var(--ivory);
  border-color: var(--ivory);
  color: var(--g-black);
}
@media (hover: hover) and (pointer: fine) {
  .header .header__wa:hover { color: var(--g-black); }
  .header .header__wa:hover::before { opacity: 1; }
  .header.is-solid .header__wa:hover { color: var(--g-black); }
}
.header .header__wa:focus-visible {
  outline: 2px solid var(--champ);
  outline-offset: 3px;
}

/* Below 1024 the nav moves into the fullscreen menu, but the button stays.
   Specificity (0,2,0) beats the (0,1,0) !important hide at editorial.css:650
   and style.css:1723 without adding another !important war. */
@media (max-width: 1023px) {
  .header .header__wa { display: inline-flex !important; }
  .header__end { gap: 6px; }
  .header__in { gap: 10px; }
}
@media (max-width: 767px) {
  .header .header__wa { padding-inline: 16px; min-height: 44px; }
  /* 19px at 390 and a hard floor of 15px: the wordmark shares one row with the
     button and the menu, and wrapping to two lines was MEASURED at 360 */
  .header__mark { font-size: clamp(15px, 4.7vw, 19px); white-space: nowrap; letter-spacing: 0.05em; }
  .menu-btn { width: 44px; margin-inline-end: -6px; }
}
@media (max-width: 380px) {
  .header .header__wa { padding-inline: 13px; letter-spacing: 0.1em; }
}


/* ==========================================================================
   HOME - image-led. 23 Oct.

   The glow-field hero read as a trick; the brief was "clean, a background
   image, something remarkable, and the rest of the page at the same level".
   The material was already in the site's image folder: Bar's emerald satin,
   a full-length cutout of her, and still-lifes of a camera, a notebook,
   perfume, roses and lace. This lays them out instead of decorating with CSS.

   The lesson of Bar's 6-7 Oct note is kept, not undone: her complaint was
   "a different green from everything around it". So the silk is GRADED to sit
   on the site's own shadow colour and its bottom edge is baked to exactly
   rgb(30 51 44); the hero hands over to the next section with no seam.
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E3D3AE;
}
.eyebrow::before { content: ""; flex: 0 0 auto; width: 28px; height: 1px; background: currentColor; }
.eyebrow--ink { color: #6E5E39; }


/* ---- 1. hero ------------------------------------------------------------ */
.bh {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 94svh;
  overflow: hidden;
  background: var(--g-deep);
  color: var(--white);
  padding-block-start: calc(var(--head-h, 60px) + clamp(20px, 4svh, 44px));
}
.bh__bg {
  position: absolute;
  z-index: -4;
  left: -3%;
  top: -3%;
  width: 106%;
  height: 106%;
  max-width: none;
  object-fit: cover;
  object-position: 62% 40%;
  transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -6px + var(--sy, 0) * 0.1px), 0);
  will-change: transform;
}
/* protects the type, nothing more: a soft shade on the side the words sit */
.bh__shade {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(8, 18, 15, 0.82) 0%, rgba(8, 18, 15, 0.74) 50%, rgba(8, 18, 15, 0.26) 72%, rgba(8, 18, 15, 0) 100%);
}
.bh__grid { position: relative; z-index: 2; flex: 0 0 auto; padding-block-end: clamp(6px, 1.5svh, 20px); }
.bh__copy { max-width: 34rem; }

.bh__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--f-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #E3D3AE;
}
.bh__eyebrow::before { content: ""; flex: 0 0 auto; width: 28px; height: 1px; background: currentColor; }

.bh__h {
  margin: clamp(16px, 2.2svh, 24px) 0 0;
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(2rem, 9.6vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: 0.004em;
  color: var(--white);
  text-wrap: balance;
}
.bh__sub {
  width: fit-content;
  max-width: 100%;
  margin: clamp(16px, 2.4svh, 26px) 0 0;
  font-family: var(--f-heb);
  font-weight: 300;
  font-size: clamp(1.0625rem, 4.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--on-dark);
  text-wrap: balance;
}
.bh__cta { display: flex; flex-direction: column; gap: 10px; margin-block-start: clamp(22px, 3.2svh, 34px); }
.bh__btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 56px;
  padding-inline: 30px;
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  transition: transform 220ms var(--ease);
}
.bh__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
.bh__btn i { font-style: normal; display: inline-block; transition: transform 200ms var(--ease); }
.bh__btn--primary { background: linear-gradient(135deg, #FBF8F3 0%, #EFE3C8 100%); color: var(--g-black); }
.bh__btn--primary::before { background: var(--champ); }
.bh__btn--ghost { min-height: 52px; border: 1px solid rgba(249, 247, 242, 0.4); color: var(--white); }
.bh__btn--ghost::before { background: rgba(249, 247, 242, 0.12); }
.bh__btn:active { transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale(0.98); transition-duration: 90ms; }
.bh__btn:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .bh__btn:hover::before { opacity: 1; }
  .bh__btn--primary:hover i { transform: translateX(5px); }
}

.bh__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: clamp(20px, 2.8svh, 28px) 0 0;
  font-family: var(--f-ui);
  font-size: 14px;
  color: #B8C8BF;
}
.bh__proof b { font-family: var(--f-disp); font-weight: 400; font-size: 1.7rem; line-height: 1; letter-spacing: 0.02em; color: var(--white); font-variant-numeric: tabular-nums; }
.bh__proof a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.bh__proof a i { font-style: normal; color: #E3D3AE; transition: transform 200ms var(--ease); }
.bh__proof a:focus-visible { outline: 2px solid var(--champ); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bh__proof a:hover i { transform: translateX(4px); } }

.bh__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 0;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #D8DCD6;
}
.bh__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--champ); }
.bh__alt { display: flex; flex-wrap: wrap; align-items: center; gap: 0 22px; margin: 4px 0 0; font-family: var(--f-ui); font-size: 14px; }
.bh__alt a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.bh__alt a i { font-style: normal; color: #E3D3AE; transition: transform 200ms var(--ease); }
.bh__alt a:focus-visible { outline: 2px solid var(--champ); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bh__alt a:hover { color: var(--white); } .bh__alt a:hover i { transform: translateX(4px); } }

/* Bar: her REAL photograph as a framed plate. The cutout portraits (bar-hd, bar-cutout, bar-tall) are enhanced renderings with a
   visibly broader face (compared side by side) and Bar said the hero "does not look like her". bar-real-800.jpg (800x948) is the only
   authentic file, so the plate is never wider than 460px: it is never upscaled past 2x. */
.bh__plate {
  position: relative;
  isolation: isolate;
  z-index: 1;
  width: min(76vw, 340px);
  aspect-ratio: 800 / 948;
  margin: clamp(24px, 4svh, 40px) auto clamp(30px, 5svh, 48px);
  transform: translate3d(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 5px + var(--sy, 0) * 0.02px), 0);
  will-change: transform;
}
.bh__plate::before {            /* the offset hairline frame, behind the photograph */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid rgba(227, 211, 174, 0.55);
  transform: translate(12px, 12px);
}
.bh__plate img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }

@media (min-width: 600px) and (max-width: 1023px) {
  .bh__copy { max-width: 38rem; }
  .bh__cta { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .bh__h { font-size: clamp(3rem, 7.4vw, 4.6rem); }
  .bh__plate { width: min(52vw, 420px); }
}

@media (min-width: 1024px) {
  .bh { min-height: max(640px, min(94svh, 1000px)); }   /* capped so a very tall monitor does not stretch the hero into empty silk */
  .bh__shade {
    background:
      linear-gradient(90deg, rgba(8, 18, 15, 0.9) 0%, rgba(8, 18, 15, 0.78) 36%, rgba(8, 18, 15, 0.2) 60%, rgba(8, 18, 15, 0) 76%),
      linear-gradient(180deg, rgba(8, 18, 15, 0.5) 0%, rgba(8, 18, 15, 0) 22%);
  }
  .bh__grid { flex: 1 1 auto; display: grid; align-items: center; padding-block-end: clamp(36px, 7svh, 80px); }
  .bh__copy { max-width: min(46vw, 780px); }
  .bh__h { font-size: clamp(3.2rem, 5.1vw, 5rem); line-height: 1.02; }   /* 80px cap: 'makes your business' must fit the column at 1920 */
  .bh__sub { font-size: clamp(1.1875rem, 1.35vw, 1.4rem); max-width: 24em; }
  .bh__cta { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .bh__btn { min-height: 60px; padding-inline: 34px; font-size: 17px; }
  .bh__btn--ghost { min-height: 60px; }
  .bh__plate {
    position: absolute;
    top: 50%;
    translate: 0 -47%;            /* the individual `translate` property: independent of the parallax `transform` */
    inset-inline-end: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter)));   /* flush with the header's right edge */
    width: min(33vw, 460px);
    margin: 0;
  }
  .bh__plate::before { transform: translate(18px, 18px); }
}


/* 1024-1279: the copy column is only ~470px; both buttons must fit on one row */
@media (min-width: 1024px) and (max-width: 1279px) {
  .bh__btn { min-height: 56px; padding-inline: 24px; font-size: 16px; gap: 10px; }
  .bh__btn--ghost { min-height: 56px; }
  .bh__cta { gap: 10px; }
}


/* A real Safari viewport is much shorter than the device: MEASURED in WebKit with the toolbars showing, Bar's head
   was 0% visible on small iPhones, 57% on an iPhone 14 and 76% on a Pro Max (the CTA was always above the fold).
   On short phones the secondary status/links row goes and the type tightens, so her face lands in the first screen. */
@media (max-width: 1023px) and (max-height: 760px) {
  .bh { padding-block-start: calc(var(--head-h, 60px) + 12px); }
  .bh__status, .bh__alt { display: none; }
  .bh__h { margin-top: 12px; font-size: clamp(1.9rem, 9.2vw, 3.1rem); }
  .bh__sub { margin-top: 12px; font-size: 1rem; line-height: 1.6; }
  .bh__cta { margin-block-start: 16px; gap: 8px; }
  .bh__btn--primary { min-height: 52px; }
  .bh__btn--ghost { min-height: 48px; }
  .bh__grid { padding-block-end: 0; }
}

@media (max-width: 1023px) and (max-height: 600px) {   /* the smallest Safari viewports: headline, action and her face; nothing else */
  .bh { padding-block-start: calc(var(--head-h, 60px) + 6px); }
  .bh__eyebrow { display: none; }
  .bh__h { margin-top: 6px; font-size: clamp(1.7rem, 8.4vw, 2.7rem); }
  .bh__sub { margin-top: 8px; font-size: 0.94rem; line-height: 1.5; }
  .bh__cta { margin-block-start: 12px; }
}

@media (max-width: 1023px) and (max-height: 520px) {   /* the very smallest Safari viewports (an old iPhone SE): still headline, Hebrew line, both actions, and her whole face */
  .bh__h { font-size: clamp(1.45rem, 7.4vw, 2.3rem); margin-top: 4px; }
  .bh__sub { font-size: 0.88rem; line-height: 1.4; margin-top: 6px; }
  .bh__cta { margin-block-start: 10px; gap: 6px; }
  .bh__btn--primary { min-height: 48px; font-size: 15px; }
  .bh__btn--ghost { min-height: 44px; font-size: 15px; }
}

/* ---- 2. what a business gets -------------------------------------------- */
.sv { background: var(--g-deep); color: var(--white); padding-block: clamp(64px, 8vw, 128px); }
.sv__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-block-end: clamp(28px, 4vw, 56px); }
.sv__h {
  margin: 16px 0 0;
  font-family: var(--f-disp);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 4.2rem);
  line-height: 1.04;
  text-wrap: balance;
}
.sv__all, .sr__all, .rs__all {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: #E3D3AE; text-decoration: none;
}
.sv__all i, .sr__all i { font-style: normal; transition: transform 200ms var(--ease); }
.sv__all:focus-visible, .sr__all:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sv__all:hover i, .sr__all:hover i { transform: translateX(5px); } }

.sv__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sv__tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  isolation: isolate;
  background: #14231E;
}
.sv__tile img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1000ms var(--ease);
}
.sv__tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 18, 15, 0.95) 0%, rgba(8, 18, 15, 0.84) 40%, rgba(8, 18, 15, 0.34) 70%, rgba(8, 18, 15, 0) 100%);
}
.sv__txt { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 6px; padding: clamp(14px, 1.8vw, 26px); }
.sv__n { font-family: var(--f-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; color: #E3D3AE; font-variant-numeric: lining-nums; }
.sv__t { font-family: var(--f-disp); font-size: clamp(1.6rem, 6.4vw, 2rem); line-height: 1.1; color: var(--white); }
.sv__d { font-family: var(--f-heb); font-size: 15.5px; line-height: 1.5; color: #D8DCD6; text-align: left; }   /* Hebrew, flush with the English title above it */
.sv__tile:focus-visible { outline: 2px solid var(--champ); outline-offset: -4px; }
@media (hover: hover) and (pointer: fine) { .sv__tile:hover img { transform: scale(1.06); } }
@media (min-width: 640px) { .sv__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .sv__tile { aspect-ratio: 4 / 3; } }
@media (min-width: 900px) { .sv__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 22px); } .sv__tile { aspect-ratio: 3 / 4; } .sv__t { font-size: clamp(1.25rem, 2vw, 2rem); } .sv__d { font-size: 14.5px; } }


/* ---- 3. showreel -------------------------------------------------------- */
.sr { background: var(--ivory); color: var(--ink); padding-block: clamp(64px, 8vw, 120px); overflow: hidden; }
.sr__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-block-end: clamp(24px, 3.4vw, 44px); }
.sr__h { margin: 16px 0 0; font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1.04; color: var(--g-deep); }
.sr__hint { margin: 12px 0 0; font-family: var(--f-ui); font-size: 14px; color: #4B5A54; }
.sr__hint-touch { display: inline; }
.sr__hint-fine { display: none; }
@media (hover: hover) and (pointer: fine) { .sr__hint-fine { display: inline; } .sr__hint-touch { display: none; } }
.sr__ctl { display: flex; align-items: center; gap: 12px; }
.sr__all { color: var(--g-deep); margin-inline-end: 8px; }
.sr__btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid rgba(22, 33, 29, 0.28); border-radius: 50%;
  background: transparent; color: var(--g-deep); font-size: 18px; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 0s;
}
.sr__btn:active { transform: scale(0.94); }
.sr__btn:focus-visible { outline: 2px solid var(--g-deep); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .sr__btn:hover { background: var(--g-deep); color: var(--white); } }
@media (max-width: 767px) { .sr__btn { display: none; } }

.sr__rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-inline: var(--gutter);
  scroll-padding-inline: var(--gutter);
}
.sr__rail::-webkit-scrollbar { display: none; }
.sr__rail:focus-visible { outline: 2px solid var(--g-deep); outline-offset: 4px; }
.sr__list { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; margin: 0; padding: 0 var(--gutter) 0 0; list-style: none; }
.sr__card {
  position: relative; display: block; width: clamp(180px, 56vw, 270px); aspect-ratio: 9 / 16;
  border-radius: 6px; overflow: hidden; background: #1E332C; color: #fff; text-decoration: none; scroll-snap-align: start;
  isolation: isolate;
}
@media (min-width: 900px) { .sr__card { width: clamp(210px, 17vw, 270px); } }
.sr__card img, .sr__card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr__card video { opacity: 0; transition: opacity 320ms ease-out; background: #1E332C; }
.sr__card.is-playing video { opacity: 1; }
.sr__card::before {   /* the play mark */
  content: ""; position: absolute; z-index: 2; inset-block-start: 12px; inset-inline-end: 12px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(10, 22, 18, 0.58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M13 10.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") center / 100% no-repeat;
  transition: opacity 200ms ease-out;
}
.sr__card.is-playing::before { opacity: 0; }
.sr__name {
  position: absolute; z-index: 1; inset-inline: 0; bottom: 0; padding: 44px 14px 14px;
  background: linear-gradient(to top, rgba(8, 18, 15, 0.88), rgba(8, 18, 15, 0));
  font-family: var(--f-heb); font-size: 15px; line-height: 1.2; text-align: start;
}
.sr__card:focus-visible { outline: 2px solid var(--g-deep); outline-offset: 3px; }


/* ---- 4. results --------------------------------------------------------- */
.rs { background: var(--g-deep); color: var(--white); padding-block: clamp(64px, 8vw, 128px); }
.rs__h { margin: 16px 0 0; font-family: var(--f-disp); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1.04; }
.rs__sub { margin: 14px 0 0; font-family: var(--f-ui); font-size: 16px; color: #B8C8BF; }
.rs__list {
  list-style: none; margin: clamp(28px, 4vw, 56px) calc(var(--gutter) * -1) 0; padding: 4px var(--gutter) 24px;
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; scroll-padding-inline: var(--gutter);
}
.rs__list::-webkit-scrollbar { display: none; }
.rs__c { flex: 0 0 min(74vw, 300px); scroll-snap-align: start; }
.rs__fig { margin: 0; }
.rs__fig img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 10px; background: #fff; box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38); }
.rs__fig figcaption { display: grid; gap: 4px; margin-block-start: 18px; }
.rs__n { font-family: var(--f-heb); font-weight: 300; font-size: clamp(2.6rem, 3.8vw, 3.8rem); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }   /* Italiana's old-style figures read '1' as 'I' */
.rs__l { font-family: var(--f-ui); font-size: 14px; color: #B8C8BF; }
@media (min-width: 900px) {
  .rs__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .rs__c { flex: initial; }
  .rs__c:nth-child(even) { margin-block-start: clamp(28px, 4vw, 64px); }   /* an editorial stagger */
}


/* ---- 5. the two worlds -------------------------------------------------- */
.wd { background: var(--g-deep); }
.wd__pair { display: grid; grid-template-columns: minmax(0, 1fr); }
.wd__p {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(520px, 150vw, 720px); padding: clamp(26px, 6vw, 40px) var(--gutter);   /* tall enough that the photograph has room ABOVE the text */
  color: var(--on-dark); text-decoration: none;
}
.wd__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.wd__p::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 18, 15, 0.96) 0%, rgba(8, 18, 15, 0.9) 50%, rgba(8, 18, 15, 0.46) 66%, rgba(8, 18, 15, 0.1) 84%, rgba(8, 18, 15, 0) 100%);
}
.wd__body { width: 100%; max-width: 40rem; }
.wd .micro { color: #E3D3AE; }
.wd__h { margin: 14px 0 0; font-family: var(--f-heb); font-weight: 300; font-size: clamp(1.9rem, 7.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--white); text-wrap: balance; }
.wd__copy { margin: 16px 0 0; font-family: var(--f-ui); font-size: var(--t-body); line-height: 1.75; color: var(--on-dark); max-width: 30em; }
.wd__go { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; margin-block-start: 22px; font-family: var(--f-ui); font-size: 15px; font-weight: 600; color: #E3D3AE; }
.wd__go i { font-style: normal; transition: transform 200ms var(--ease); }
.wd__go--fill { padding-inline: 26px; border-radius: 999px; background: var(--ivory); color: var(--g-black); }
.wd__p:focus-visible { outline: 2px solid var(--champ); outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) {
  .wd__p:hover .wd__img { transform: scale(1.045); }
  .wd__p:hover .wd__go i { transform: translateX(5px); }
}
@media (max-width: 560px) { .wd__go--fill { display: flex; width: 100%; justify-content: center; } }
@media (min-width: 1024px) {
  .wd__p::after { background: linear-gradient(to top, rgba(8, 18, 15, 0.95) 0%, rgba(8, 18, 15, 0.84) 40%, rgba(8, 18, 15, 0.36) 72%, rgba(8, 18, 15, 0.1) 100%); }
  .wd__pair { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .wd__p { min-height: clamp(560px, 52vw, 760px); padding: clamp(36px, 4vw, 72px); }
  .wd__p--lead .wd__h { font-size: clamp(2.4rem, 3.9vw, 4rem); }
  .wd__p--minor .wd__h { font-size: clamp(1.7rem, 2.5vw, 2.5rem); }
  .wd__p--minor .wd__copy { color: #B8C8BF; }
}


/* ---- 6. reveal: hidden ONLY by the script that watches it ---------------- */
.fx-hide { opacity: 0; transform: translate3d(0, 22px, 0); }
.sv__c, .rs__c, .sr__c { transition: opacity 520ms ease-out, transform 640ms var(--ease); }
.sv__c:nth-child(2), .rs__c:nth-child(2) { transition-delay: 80ms; }
.sv__c:nth-child(3), .rs__c:nth-child(3) { transition-delay: 160ms; }
.sv__c:nth-child(4), .rs__c:nth-child(4) { transition-delay: 240ms; }
.fx-hide { transition-delay: 0ms !important; }

@media (prefers-reduced-motion: reduce) {
  .bh__bg, .bh__plate { transform: none !important; will-change: auto; }
  .bh__btn { transform: none; transition: none; }
  .fx-hide { opacity: 1; transform: none; }
  .sv__c, .rs__c, .sr__c, .sv__tile img, .wd__img { transition: none; }
}

/* the header gets its ground the moment content can pass beneath it (was in the previous layer) */
html.js .header.is-lifted:not(.is-solid):not(.header--solid) { --solid: 1; }
.header.is-lifted::before { transition: opacity 200ms var(--e-out, ease-out); }
.header.is-lifted .header__wa { background: var(--ivory); border-color: var(--ivory); color: var(--g-black); }
@media (hover: hover) and (pointer: fine) { .header.is-lifted .header__wa:hover { color: var(--g-black); } }


/* ---- 7. accessibility (axe-core + real WebKit) -------------------------------------------------
   The footer wordmark is decorative: a ghost at 13% opacity. axe flags any such TEXT as a serious contrast
   failure (and it is a link). The markup no longer contains the text; the same words are generated on the link, which
   keeps its aria-label. NOTHING about size, colour, padding or hover is redefined here: the generated content simply
   inherits them from .ft__giant, so it is identical by construction (a first attempt that re-declared the font size
   drew the mark 12% too large at 1440, MEASURED by diffing the two pages). */
/* each hex escape ENDS WITH A SPACE, which CSS consumes. (Earlier attempts shipped control characters instead of escapes because backslashes were collapsed on the way in: the footer drew 'BAR 9EVO aoSOCIA'. Found by diffing the page against live.) */
.ft__giant::before { content: "BAR\2019 EVO\00a0 SOCIAL"; }

/* the results strip scrolls sideways on a phone, so keyboard users must be able to reach it */
.rs__list:focus-visible { outline: 2px solid #E3D3AE; outline-offset: 4px; border-radius: 6px; }


/* the breadcrumb's current page was --ink on the packages header, which has been dark green since the English rebuild:
   #16211d on #1e332c is 1.23:1, effectively invisible (axe color-contrast, measured on the live page) */
.pkghead .crumbs > [aria-current="page"] { color: var(--white); }

/* the package length ("3-month retainer", "One day") was the champagne accent on ivory: #b8a27d on #f4f0e8 is 2.17:1.
   Champagne is for dark grounds; on paper the site uses this darker brass (about 5.6:1). Found by axe once Business became the visible default. */
.bpkg__term { color: #6E5E39; }


/* ---- 8. the closing: the same photograph as the hero ------------------------------------------------
   The closing (.fin: home + packages) was a pale cream block with a looping LIGHT silk video on desktop: the quietest
   moment on the page at its most important point. It is now the hero's graded silk (already cached, so no new bytes),
   blended into the section above and the footer below, with the same ivory primary button. One shared rule restyles
   both pages; main.js no longer injects the video. */
.fin.s-cream {
  position: relative;
  isolation: isolate;
  color: var(--on-dark);
  background-color: var(--g-deep);
  background-image:
    linear-gradient(to bottom, rgb(30, 51, 44) 0%, rgba(30, 51, 44, 0) 24%, rgba(16, 29, 25, 0) 64%, rgb(16, 29, 25) 100%),
    linear-gradient(rgba(8, 18, 15, 0.52), rgba(8, 18, 15, 0.52)),
    url("../img/hero-bg-2400.webp");
  background-size: 100% 100%, 100% 100%, cover;
  background-position: 0 0, 0 0, 30% 62%;
  background-repeat: no-repeat;
}
@media (max-width: 760px) {
  .fin.s-cream {
    background-image:
      linear-gradient(to bottom, rgb(30, 51, 44) 0%, rgba(30, 51, 44, 0) 24%, rgba(16, 29, 25, 0) 64%, rgb(16, 29, 25) 100%),
      linear-gradient(rgba(8, 18, 15, 0.52), rgba(8, 18, 15, 0.52)),
      url("../img/hero-bg-1200.webp");
  }
}
.fin .plate-video, .fin__silk, .fin__veil { display: none !important; }
.fin__mark { color: #E3D3AE; }
.fin__hair { background-image: linear-gradient(to bottom, rgba(227, 211, 174, 0), rgba(227, 211, 174, 0.7)); }
.fin__h { color: var(--white); }
.fin__sub { color: #D8DCD6; }
.fin__wa {
  background: linear-gradient(135deg, #FBF8F3 0%, #EFE3C8 100%);
  color: var(--g-black);
  border-color: transparent;
  border-radius: 999px;
  font-weight: 600;
}
.fin__wa i { color: var(--g-black); }
.fin__wa:hover { background: linear-gradient(135deg, #FFFFFF 0%, #F6EBD2 100%); }
.fin__wa:hover i { transform: translateX(6px); }      /* it moved LEFT: a leftover from the right-to-left site */
.fin .status { color: #D8DCD6; }
.fin__ch { border-color: rgba(249, 247, 242, 0.2); }
.fin__ch-l { color: #E3D3AE; }
.fin__ch-v { color: var(--white); }
.fin__ch-v.tnum { font-family: var(--f-heb); font-weight: 300; font-variant-numeric: lining-nums tabular-nums; }   /* Italiana's old-style figures */
.fin a:focus-visible { outline: 2px solid #E3D3AE; outline-offset: 3px; }


/* ---- 9. about: the portrait gets a frame and a name; the headline gets its size --------------------------------
   The portrait is clipped by its own overflow and a reveal clip-path, so the frame lives on a wrapper. The frame and
   the plate share ONE grid cell (the frame simply shifted 16px), so it frames the photograph only; the caption sits
   in the row below. (A first version positioned the frame against the whole wrapper and it wrapped the caption too.)
   The caption is her real title: the old hero said "OWNER / BAR DOTAN"; nothing said who she is once it went. */
.ab__fig { position: relative; min-width: 0; display: grid; }
.ab__fig::before {
  content: "";
  grid-area: 1 / 1;
  border: 1px solid rgba(110, 94, 57, 0.55);
  transform: translate(16px, 16px);
  pointer-events: none;
}
.ab__fig .ab__plate { grid-area: 1 / 1; position: relative; z-index: 1; }
.ab__cap { grid-row: 2; display: grid; gap: 4px; margin: 38px 0 0; }
.ab__cap b { font-family: var(--f-disp); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.04em; color: var(--g-deep); }
.ab__cap span { font-family: var(--f-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #6E5E39; }
@media (max-width: 1023px) {
  /* the WRAPPER is the centred, size-limited element and the plate fills it, so the frame always matches the photograph
     (an older rule centred the plate at a smaller width inside a wider cell) */
  .ab__fig { max-width: 420px; margin-inline: auto; }
  .ab__fig .ab__plate { max-width: none; margin: 0; }
  .ab__fig::before { transform: translate(12px, 12px); }
  .ab__cap { margin-top: 32px; }
}
@media (max-width: 560px) { .ab__fig { max-width: none; margin-inline: 0; } .ab__fig::before { transform: translate(10px, 10px); } .ab__cap { margin-top: 30px; } }
.ab__h { font-size: clamp(1.9rem, 3.5vw, 3.5rem); line-height: 1.2; }
.ab__quote { font-size: clamp(1.1rem, 1.5vw, 1.45rem); color: #3A4741; }