@charset "UTF-8";
/* ============================================================================
   מתכת בתנועה · Metal in Motion — Michael Perez
   Design system + components.  RTL-first (logical properties throughout).
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root{
  /* surfaces — dark museum, warm-neutral not blue */
  --void:      #08090A;
  --canvas:    #0D0F11;
  --plinth:    #131619;
  --raise:     #191D21;
  --raise-2:   #22272C;

  /* metal */
  --steel:     #EAEEF1;
  --steel-2:   #A9B2BA;
  /* both paint small text on --void (#08090A). At the old values --steel-4
     measured 2.48:1 against it — well under the 4.5:1 WCAG minimum for text
     this size, which is why the breadcrumb line read as invisible. Nine rules
     use --steel-4; lifting the token fixes all of them at once and keeps the
     tonal step between the two. */
  --steel-3:   #868F98;   /* 6.07:1 */
  --steel-4:   #737C84;   /* 4.69:1 */

  --bronze:    #B08D57;
  --bronze-hi: #E0C596;
  --bronze-lo: #6E5734;
  --copper:    #C0703F;

  --hair:      rgba(228, 234, 240, .11);
  --hair-2:    rgba(228, 234, 240, .06);
  --hair-bronze: rgba(176, 141, 87, .34);

  /* type */
  /* Heebo, not Frank Ruhl Libre: that face is a David-style Hebrew serif and
     the client did not want David. Heebo carries the same weight range in a
     clean modern sans, so the headings keep their presence. */
  --f-display: "Heebo", "Assistant", "Segoe UI", system-ui, sans-serif;
  --f-body:    "Assistant", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-spec:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --t-hero:  clamp(2.6rem, 1.15rem + 5.4vw, 6.1rem);
  --t-h1:    clamp(2.25rem, 1.2rem + 4.2vw, 4.5rem);
  --t-h2:    clamp(1.75rem, 1.1rem + 2.6vw, 3.15rem);
  --t-h3:    clamp(1.25rem, 1rem + 1.1vw, 1.85rem);
  --t-lead:  clamp(1.05rem, .96rem + .5vw, 1.35rem);
  --t-body:  clamp(.98rem, .94rem + .18vw, 1.075rem);
  --t-spec:  clamp(.66rem, .63rem + .13vw, .76rem);

  /* rhythm */
  --gut:  clamp(1.15rem, .6rem + 2.2vw, 2.75rem);
  --sec:  clamp(4rem, 2.3rem + 6vw, 8rem);
  --max:  1340px;
  --max-txt: 68ch;

  /* corner softening — one dial for every framed box on the site */
  --r: 3px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  color-scheme: dark;
}

/* ---------- 2. RESET ----------------------------------------------------- */
body.site *, body.site *::before, body.site *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body.site{
  margin: 0;
  background: var(--canvas);
  color: var(--steel-2);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.site.is-locked{ overflow: hidden; }

body.site h1, body.site h2, body.site h3, body.site h4{
  font-family: var(--f-display);
  color: var(--steel);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
body.site p{ margin: 0 0 1em; text-wrap: pretty; }
body.site p:last-child{ margin-bottom: 0; }
body.site a{ color: inherit; text-decoration: none; }
body.site img, body.site svg, body.site video{ display: block; max-width: 100%; }
body.site button, body.site input, body.site select, body.site textarea{ font: inherit; color: inherit; }
body.site ul, body.site ol{ margin: 0; padding: 0; list-style: none; }
body.site :focus-visible{ outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }
body.site ::selection{ background: var(--bronze); color: var(--void); }

/* ---------- 3. LAYOUT ---------------------------------------------------- */
body.site .wrap{ width: min(100% - (var(--gut) * 2), var(--max)); margin-inline: auto; }
body.site .wrap--narrow{ width: min(100% - (var(--gut) * 2), 900px); margin-inline: auto; }
body.site .sec{ padding-block: var(--sec); position: relative; }
body.site .sec--tight{ padding-block: calc(var(--sec) * .62); }
body.site .sec--plinth{ background: var(--plinth); }
body.site .sec--void{ background: var(--void); }

body.site .grid{ display: grid; gap: clamp(1.1rem, .6rem + 1.6vw, 2.2rem); }
body.site .g-2{ grid-template-columns: repeat(2, 1fr); }
body.site .g-3{ grid-template-columns: repeat(3, 1fr); }
body.site .g-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ body.site .g-3, body.site .g-4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ body.site .g-2, body.site .g-3, body.site .g-4{ grid-template-columns: 1fr; } }

body.site .stack > * + *{ margin-block-start: var(--gap, 1.15rem); }

/* hairline rules with architectural corner ticks */
body.site .rule{ height: 1px; background: var(--hair); border: 0; margin: 0; }
body.site .ticked{ position: relative; }
body.site .ticked::before, body.site .ticked::after{
  content: ""; position: absolute; inset-block-start: 0;
  width: 1px; height: 14px; background: var(--hair-bronze);
}
body.site .ticked::before{ inset-inline-start: 0; }
body.site .ticked::after{ inset-inline-end: 0; }

/* ---------- 4. TYPE HELPERS --------------------------------------------- */
body.site .eyebrow{
  font-family: var(--f-spec);
  font-size: var(--t-spec);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.35rem;
  font-weight: 500;
}
body.site .eyebrow::before{
  content: ""; width: clamp(20px, 4vw, 44px); height: 1px;
  background: var(--bronze); opacity: .6; flex: none;
}
body.site .eyebrow--center{ justify-content: center; }
body.site .eyebrow--center::after{
  content: ""; width: clamp(20px, 4vw, 44px); height: 1px;
  background: var(--bronze); opacity: .6; flex: none;
}

body.site .h-hero{ font-size: var(--t-hero); line-height: .96; letter-spacing: -.028em; }
body.site .h-1{ font-size: var(--t-h1); }
body.site .h-2{ font-size: var(--t-h2); }
body.site .h-3{ font-size: var(--t-h3); line-height: 1.22; }
body.site .lead{ font-size: var(--t-lead); line-height: 1.62; color: var(--steel-2); max-width: var(--max-txt); }
body.site .muted{ color: var(--steel-3); }
body.site .spec{
  font-family: var(--f-spec); font-size: var(--t-spec);
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel-3);
}
body.site .gold{ color: var(--bronze-hi); }
body.site .serif-en{ font-family: var(--f-display); font-style: italic; letter-spacing: .01em; }
body.site .num{
  font-family: var(--f-spec); font-size: var(--t-spec);
  color: var(--bronze); letter-spacing: .18em;
}

/* ---------- 5. BUTTONS --------------------------------------------------- */
body.site .btn{
  --btn-bg: transparent; --btn-fg: var(--steel); --btn-bd: var(--hair);
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95em 1.9em;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  font-family: var(--f-body); font-size: .95rem; font-weight: 600;
  letter-spacing: .01em; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
body.site .btn::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bronze);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform .5s var(--ease);
}
body.site .btn:hover{ color: var(--void); border-color: var(--bronze); }
body.site .btn:hover::before{ transform: scaleX(1); }
body.site .btn:active{ transform: translateY(1px); }
body.site .btn .ico{ flex: none; transition: transform .45s var(--ease); }
body.site .btn:hover .ico{ transform: translateX(-3px); }

body.site .btn--solid{ --btn-bg: var(--bronze); --btn-fg: var(--void); --btn-bd: var(--bronze); }
body.site .btn--solid::before{ background: var(--bronze-hi); }
body.site .btn--solid:hover{ color: var(--void); }
body.site .btn--ghost{ --btn-bd: var(--hair); }
body.site .btn--sm{ padding: .7em 1.35em; font-size: .85rem; }
body.site .btn--wide{ width: 100%; justify-content: center; }

/* animated hairline link */
body.site .lnk{
  position: relative; color: var(--steel); font-weight: 600;
  display: inline-flex; align-items: center; gap: .5rem; padding-block-end: 3px;
}
body.site .lnk::after{
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: inline-end;
  transition: transform .5s var(--ease);
}
body.site .lnk:hover::after{ transform: scaleX(1); transform-origin: inline-start; }

/* ---------- 6. HEADER ---------------------------------------------------- */
body.site .hdr{
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 90;
  transition: background .5s var(--ease), border-color .5s var(--ease);
  border-block-end: 1px solid transparent;
}
body.site .hdr::after{ /* full-bleed hairline that only shows when condensed */
  content: ""; position: absolute; inset-block-end: -1px; inset-inline: 0; height: 1px;
  background: var(--hair); opacity: 0; transition: opacity .5s var(--ease);
}
body.site .hdr.is-stuck{ background: rgba(10, 12, 14, .86); backdrop-filter: blur(14px); }
body.site .hdr.is-stuck::after{ opacity: 1; }
body.site .hdr.is-open{ background: rgba(10, 12, 14, .97); }

body.site .hdr__bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1rem, 2vw, 2.5rem);
  min-height: 84px;
  transition: min-height .5s var(--ease);
}
body.site .hdr.is-stuck .hdr__bar{ min-height: 66px; }

/* logo lockup */
body.site .logo{ display: flex; align-items: center; gap: .8rem; flex: none; }
body.site .logo__mark{ width: 38px; height: 38px; flex: none; overflow: visible; }
body.site .logo__mark{ animation: mark-spin 26s linear infinite; will-change: transform; }
@keyframes mark-spin{ to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ body.site .logo__mark{ animation: none; } }
body.site .logo__txt{ display: grid; line-height: 1; }
body.site .logo__he{ font-family: var(--f-display); font-size: 1.16rem; color: var(--steel); letter-spacing: .01em; }
body.site .logo__en{
  font-family: var(--f-spec); font-size: .56rem; letter-spacing: .3em;
  color: var(--steel-3); text-transform: uppercase; margin-block-start: 5px;
}

/* nav */
body.site .nav{ display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.5rem); }
body.site .nav__a{
  position: relative; padding: .55rem .35rem; font-size: .95rem; font-weight: 500;
  color: var(--steel-2); display: inline-flex; align-items: center; gap: .35rem;
  transition: color .35s var(--ease); white-space: nowrap;
}
body.site .nav__a::after{
  content: ""; position: absolute; inset-inline: .35rem; inset-block-end: 0; height: 1px;
  background: var(--bronze); transform: scaleX(0); transform-origin: inline-end;
  transition: transform .45s var(--ease);
}
body.site .nav__a:hover, body.site .nav__a[aria-current="page"], body.site .nav__a[aria-expanded="true"]{ color: var(--steel); }
body.site .nav__a:hover::after, body.site .nav__a[aria-current="page"]::after, body.site .nav__a[aria-expanded="true"]::after{
  transform: scaleX(1); transform-origin: inline-start;
}
body.site .nav__a .chev{ transition: transform .4s var(--ease); }
body.site .nav__a[aria-expanded="true"] .chev{ transform: rotate(180deg); }

body.site .hdr__end{ display: flex; align-items: center; gap: clamp(.5rem, 1.2vw, 1rem); flex: none; }

/* language switcher */
body.site .mim-lang{ display: flex; align-items: center; border: 1px solid var(--hair); }
body.site .mim-lang__b{
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-spec); font-size: .68rem; letter-spacing: .12em;
  padding: .5rem .68rem; color: var(--steel-3);
  transition: color .35s, background .35s;
}
body.site .mim-lang__b[aria-pressed="true"]{ color: var(--void); background: var(--bronze); }
body.site .mim-lang__b:hover:not([aria-pressed="true"]){ color: var(--steel); }

body.site .icon-btn{
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--hair); background: none; cursor: pointer;
  color: var(--steel-2); transition: color .35s, border-color .35s, background .35s;
}
body.site .icon-btn:hover{ color: var(--bronze-hi); border-color: var(--hair-bronze); background: rgba(176,141,87,.08); }

body.site .burger{ display: none; }

/* ---------- 7. MEGA MENU ------------------------------------------------- */
body.site .mega{
  position: absolute; inset-inline: 0; inset-block-start: 100%;
  background: var(--void);
  border-block: 1px solid var(--hair);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .42s var(--ease), transform .42s var(--ease), visibility .42s;
}
body.site .mega.is-open{ opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
body.site .mega__in{
  display: grid; grid-template-columns: 1.55fr 1fr 1fr;
  gap: clamp(1.4rem, 2.5vw, 3rem);
  padding-block: clamp(1.8rem, 3vw, 3rem);
}
body.site .mega__col > .eyebrow{ margin-block-end: 1.1rem; }

body.site .mega__series{ display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem 1.4rem; }
body.site .mega__item{
  display: flex; align-items: center; gap: .85rem;
  padding: .55rem .6rem; margin-inline: -.6rem;
  transition: background .35s var(--ease);
}
body.site .mega__item:hover{ background: rgba(176, 141, 87, .07); }
body.site .mega__thumb{
  width: 54px; height: 54px; flex: none; background: var(--raise);
  border: 1px solid var(--hair); overflow: hidden; position: relative;
}
body.site .mega__thumb img{
  width: 100%; height: 100%; object-fit: contain; padding: 5px;
  transition: transform .55s var(--ease);
}
body.site .mega__item:hover .mega__thumb img{ transform: scale(1.1); }
body.site .mega__nm{ display: grid; gap: 3px; min-width: 0; }
body.site .mega__nm b{ font-weight: 600; color: var(--steel); font-size: .95rem; line-height: 1.2; }
body.site .mega__nm span{ font-size: .78rem; color: var(--steel-3); line-height: 1.3; }

/* video panel inside mega */
body.site .mega__video{
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--hair); background: var(--raise);
  display: grid; place-items: center; text-align: center;
}
body.site .mega__video img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: grayscale(1); }
body.site .mega__video .vinner{ position: relative; z-index: 1; padding: 1rem; }
body.site .play{
  width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--hair-bronze);
  display: grid; place-items: center; margin: 0 auto .8rem; color: var(--bronze-hi);
  background: rgba(10,12,14,.5); transition: background .4s, transform .4s var(--ease);
}
body.site .mega__video:hover .play, body.site .studio-video:hover .play{ background: var(--bronze); color: var(--void); transform: scale(1.08); }
body.site .mega__video:hover .play::after, body.site .studio-video:hover .play::after{ animation: pulse 2.6s var(--ease) infinite; }
body.site .play::after{
  content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid var(--hair-bronze); opacity: 0;
}
@keyframes pulse{ 0% { transform: scale(.9); opacity: .8 } 100% { transform: scale(1.35); opacity: 0 } }

body.site .mega__promo{
  position: relative; border: 1px solid var(--hair-bronze); padding: clamp(1.1rem, 2vw, 1.6rem);
  background: linear-gradient(160deg, rgba(176,141,87,.12), transparent 65%);
  display: grid; align-content: space-between; gap: 1rem; min-height: 100%;
}
body.site .mega__foot{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: 1.1rem; border-block-start: 1px solid var(--hair);
}

/* ---------- 8. MOBILE DRAWER -------------------------------------------- */
body.site .drawer{
  position: fixed; inset: 0; z-index: 85; background: var(--void);
  transform: translateX(-100%); visibility: hidden;
  transition: transform .55s var(--ease), visibility .55s;
  overflow-y: auto; padding: 96px var(--gut) var(--gut);
  display: none;
}
body.site [dir="rtl"] .drawer{ transform: translateX(100%); }
body.site .drawer.is-open{ transform: none; visibility: visible; }
body.site .drawer__a{
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-display); font-size: 1.6rem; color: var(--steel);
  padding-block: 1.05rem; border-block-end: 1px solid var(--hair);
}
body.site .drawer__sub{ display: grid; gap: .1rem; padding: .4rem 0 1rem; }
body.site .drawer__sub a{ color: var(--steel-3); padding: .45rem 0; font-size: .95rem; }
body.site .drawer__sub a:hover{ color: var(--bronze-hi); }

@media (max-width: 1080px){
  body.site .nav, body.site .hdr__end .btn, body.site .mim-lang{ display: none; }
  body.site .burger{ display: grid; }
  body.site .drawer{ display: block; }
}

/* ---------- 9. HERO ------------------------------------------------------ */
body.site .hero{
  position: relative; min-height: calc(100svh - 34px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  padding-block: 128px 96px; overflow: hidden; background: var(--void);
  isolation: isolate;
}
body.site .hero__glow{
  position: absolute; z-index: 0; inset-block-start: 50%; left: 50%;
  width: min(120vw, 1250px); aspect-ratio: 1; translate: -50% -50%;
  background: radial-gradient(circle, rgba(176,141,87,.17) 0%, rgba(176,141,87,.05) 34%, transparent 62%);
  pointer-events: none;
}
body.site .hero__grid{
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(to right, var(--hair-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hair-2) 1px, transparent 1px);
  background-size: clamp(60px, 8vw, 110px) clamp(60px, 8vw, 110px);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 20%, transparent 78%);
}
body.site .hero__in{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}
/* the grid column sizes the headline; only the paragraph gets a measure cap */
body.site .hero__copy{ max-width: none; min-width: 0; }
body.site .hero h1{ margin-block-end: 1.5rem; }
body.site .hero h1 .ln{ display: block; overflow: hidden; }
body.site .hero h1 .ln > span{ display: block; }
body.site .hero__sub{ font-size: var(--t-lead); line-height: 1.6; color: var(--steel-2); margin-block-end: 2.2rem; max-width: 46ch; }
body.site .hero__cta{ display: flex; flex-wrap: wrap; gap: .85rem; }

body.site .hero__stage{ position: relative; display: grid; place-items: center; min-height: min(62vh, 560px); }
body.site .hero__stage > *{ grid-area: 1 / 1; }
body.site .hero__piece{
  position: relative; z-index: 1; width: 100%; height: auto; max-width: 660px;
  /* No drop-shadow here on purpose: a 70px-blur filter over a 1400px alpha
     image is re-rasterised every parallax/scroll frame and pinned the home
     page at 30fps. The ground shadow below is a plain gradient, so it is free. */
  will-change: transform;
}

/* soft ground shadow under the floating piece — replaces the filter above */
body.site .hero__stage::after{
  content: ""; grid-area: 1 / 1; place-self: end center; z-index: 0;
  width: min(58%, 400px); height: clamp(34px, 5vw, 62px);
  margin-block-end: clamp(6px, 3vh, 34px);
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .46) 42%, transparent 72%);
  pointer-events: none;
}
body.site .hero__ring{
  grid-area: 1 / 1; place-self: center;
  width: min(78%, 520px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--hair-bronze); pointer-events: none;
}
body.site .hero__ring::after{
  content: ""; position: absolute; inset: -9%; border-radius: 50%;
  border: 1px dashed rgba(176,141,87,.15);
  animation: mark-spin 70s linear infinite; will-change: transform;
}

/* hero footer: scroll cue + running series marquee */
body.site .hero__foot{
  position: absolute; inset-block-end: 0; inset-inline: 0; z-index: 3;
  border-block-start: 1px solid var(--hair); background: linear-gradient(to top, var(--void), transparent);
}
body.site .hero__foot .wrap{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1rem; }
body.site .scrollcue{ display: flex; align-items: center; gap: .7rem; }
body.site .scrollcue .bar{
  width: 1px; height: 34px; background: linear-gradient(to bottom, var(--bronze), transparent);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue{ 0%,100% { opacity: .25; transform: scaleY(.5); transform-origin: top } 50% { opacity: 1; transform: scaleY(1); transform-origin: top } }

body.site .marquee{ overflow: hidden; flex: 1; min-width: 0; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
body.site .marquee__track{
  display: flex; gap: 2.6rem; width: max-content;
  animation: slide 42s linear infinite; will-change: transform;
}
body.site .marquee:hover .marquee__track{ animation-play-state: paused; }
body.site [dir="rtl"] .marquee__track{ animation-direction: reverse; }
@keyframes slide{ to { transform: translateX(-50%); } }
body.site .marquee span{ display: inline-flex; align-items: center; gap: 2.6rem; }
body.site .marquee span::after{ content: "◆"; color: var(--bronze); font-size: .5em; }

@media (max-width: 980px){
  body.site .hero{ min-height: auto; padding-block: 108px 84px; }
  body.site .hero__in{ grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 2.5rem); }
  body.site .hero__stage{ order: -1; min-height: auto; }
  body.site .hero__piece{ max-width: min(100%, 460px); }
  body.site .hero__ring{ width: min(88%, 340px); }
  body.site .hero__copy{ max-width: none; }
  body.site .hero__foot{ position: static; background: none; margin-block-start: 2.5rem; }
  body.site .hero__foot .wrap{ width: 100%; }
  body.site .hero__foot .scrollcue, body.site .hero__foot .spec:last-child{ display: none; }
}

/* ---------- 10. USP — NO WELD ------------------------------------------- */
body.site .usp{ background: var(--void); position: relative; }
body.site .usp__head{ text-align: center; margin-block-end: clamp(2.4rem, 5vw, 4.2rem); }
body.site .usp__head h2{ max-width: 21ch; margin-inline: auto; }
body.site .usp__head .lead{ max-width: 62ch; }
body.site .usp__head .lead{ margin-inline: auto; text-align: center; }

body.site .negs{ display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--hair); }
body.site .neg{
  padding: clamp(1.6rem, 3.4vw, 3.2rem) clamp(1.2rem, 2.4vw, 2.4rem);
  text-align: center; position: relative; overflow: hidden; isolation: isolate;
  border-inline-start: 1px solid var(--hair);
}
body.site .neg:first-child{ border-inline-start: 0; }
body.site .neg::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(176,141,87,.11), transparent 70%);
  opacity: 0; transition: opacity .55s var(--ease);
}
body.site .neg:hover::before{ opacity: 1; }
body.site .neg__ico{ width: 62px; height: 62px; margin: 0 auto 1.25rem; color: var(--bronze); }
body.site .neg__ico .strike{ stroke-dasharray: 76; stroke-dashoffset: 76; transition: stroke-dashoffset .6s var(--ease); }
body.site .neg.is-in .neg__ico .strike, body.site .neg:hover .neg__ico .strike{ stroke-dashoffset: 0; }
body.site .neg h3{ font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); margin-block-end: .5rem; }
body.site .neg p{ font-size: .93rem; color: var(--steel-3); margin: 0; }
@media (max-width: 720px){
  body.site .negs{ grid-template-columns: 1fr; }
  body.site .neg{ border-inline-start: 0; border-block-start: 1px solid var(--hair); }
  body.site .neg:first-child{ border-block-start: 0; }
}

body.site .usp__note{
  margin-block-start: clamp(1.6rem, 3vw, 2.6rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem 1.6rem; text-align: center;
}

/* rotating "no weld" seal */
body.site .seal{ position: relative; width: clamp(112px, 13vw, 158px); aspect-ratio: 1; flex: none; }
body.site .seal__txt{
  position: absolute; inset: 0;
  animation: mark-spin 30s linear infinite; will-change: transform;
}
@media (prefers-reduced-motion: reduce){ body.site .seal__txt, body.site .hero__ring::after{ animation: none; } }
body.site .seal__txt text{ font-family: var(--f-spec); font-size: 7px; letter-spacing: .26em; fill: var(--bronze); text-transform: uppercase; }
body.site .seal__core{
  position: absolute; inset: 22%; border: 1px solid var(--hair-bronze); border-radius: 50%;
  display: grid; place-items: center; text-align: center; color: var(--steel);
  font-family: var(--f-display); font-size: clamp(.7rem, 1.4vw, .92rem); line-height: 1.15;
  background: radial-gradient(circle at 35% 30%, rgba(176,141,87,.16), transparent 70%);
}

/* ---------- 11. TRUST STRIP --------------------------------------------- */
body.site .trust{ border-block: 1px solid var(--hair); background: var(--plinth); }
body.site .trust__grid{ display: grid; grid-template-columns: repeat(4, 1fr); }
body.site .trust__cell{
  padding: clamp(1.5rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem);
  border-inline-start: 1px solid var(--hair); text-align: center;
}
body.site .trust__cell:first-child{ border-inline-start: 0; }
body.site .trust__n{
  font-family: var(--f-display); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem);
  color: var(--steel); line-height: 1; display: block; margin-block-end: .45rem;
}
body.site .trust__n em{ font-style: normal; color: var(--bronze); font-size: .55em; vertical-align: super; }
@media (max-width: 760px){
  body.site .trust__grid{ grid-template-columns: repeat(2, 1fr); }
  body.site .trust__cell:nth-child(-n+2){ border-block-end: 1px solid var(--hair); }
  body.site .trust__cell:nth-child(odd){ border-inline-start: 0; }
}

/* ---------- 12. WORK CARD (the plinth) ---------------------------------- */
body.site .works{ display: grid; gap: clamp(1.1rem, .5rem + 2vw, 2.4rem); }
body.site .works--3{ grid-template-columns: repeat(3, 1fr); }
body.site .works--4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px){ body.site .works--4{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px){ body.site .works--3, body.site .works--4{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ body.site .works--3, body.site .works--4{ grid-template-columns: 1fr; } }

body.site .work{
  position: relative; display: flex; flex-direction: column;
  background: var(--plinth); border: 1px solid var(--hair);
  transition: border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
  transform-style: preserve-3d;
}
body.site .work:hover{ border-color: var(--hair-bronze); background: var(--raise); }

body.site .work__stage{
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  display: grid; place-items: center; padding: clamp(.85rem, 1.8vw, 1.5rem);
  background:
    radial-gradient(ellipse 60% 44% at 50% 92%, rgba(176,141,87,.13), transparent 70%),
    linear-gradient(180deg, var(--raise) 0%, var(--plinth) 100%);
}
body.site .work__stage::after{ /* plinth line */
  content: ""; position: absolute; inset-block-end: 13%; inset-inline: 22%;
  height: 1px; background: linear-gradient(to right, transparent, var(--hair-bronze), transparent);
  opacity: .55;
}
body.site .work__img{
  width: 100%; height: 100%; object-fit: contain; object-position: center 58%;
  transform: translateZ(30px) scale(1);
  transition: transform .75s var(--ease), filter .75s var(--ease);
  filter: drop-shadow(0 26px 26px rgba(0,0,0,.6));
}
body.site .work:hover .work__img{ transform: translateZ(45px) scale(1.075); }
/* photos that still carry their white studio background get boxed instead of floated */
body.site .work__img--boxed{
  width: 100%; height: 100%; object-fit: cover; max-height: none;
  filter: grayscale(.15) contrast(1.04);
}
body.site .work:hover .work__img--boxed{ transform: scale(1.05); filter: grayscale(0) contrast(1.06); }

body.site .work__tags{ position: absolute; inset-block-start: 0; inset-inline-start: 0; padding: .85rem; display: grid; gap: .35rem; z-index: 2; }
body.site .tag{
  font-family: var(--f-spec); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .34em .7em; border: 1px solid var(--hair); color: var(--steel-2);
  background: rgba(10, 12, 14, .92); justify-self: start;
}
body.site .tag--sold{ color: var(--steel-4); }
body.site .tag--quote{ color: var(--bronze-hi); border-color: var(--hair-bronze); }
body.site .tag--new{ color: var(--void); background: var(--bronze); border-color: var(--bronze); }

body.site .work__body{ padding: clamp(1rem, 2vw, 1.5rem); display: grid; gap: .55rem; flex: 1; align-content: start; }
body.site .work__title{ font-size: 1.18rem; line-height: 1.25; color: var(--steel); }
body.site .work__spec{ font-family: var(--f-spec); font-size: .68rem; letter-spacing: .07em; color: var(--steel-3); line-height: 1.7; }
body.site .work__foot{
  margin-block-start: auto; padding-block-start: .9rem; border-block-start: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
body.site .work__price{ font-family: var(--f-display); font-size: 1.22rem; color: var(--steel); white-space: nowrap; }
body.site .work__price small{ font-size: .62em; color: var(--steel-3); font-family: var(--f-body); }
body.site .work__ask{ font-family: var(--f-body); font-size: .88rem; font-weight: 600; color: var(--bronze-hi); }
body.site .work__go{
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--hair); color: var(--steel-2);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
body.site .work:hover .work__go{ background: var(--bronze); color: var(--void); border-color: var(--bronze); }
/* The whole card is one big quick-view target. It has to sit under the two
   controls that do something else, or it swallows their clicks — which is
   exactly what happened: the expand button and the price link were unreachable
   while the cursor still promised they were clickable. */
body.site .work__link{
  position: absolute; inset: 0; z-index: 3;
  border: 0; background: none; padding: 0; cursor: pointer;
}
body.site .work__foot{ position: relative; z-index: 4; }

/* ---------- 13. SERIES TILES -------------------------------------------- */
body.site .series{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (max-width: 900px){ body.site .series{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ body.site .series{ grid-template-columns: 1fr; } }
body.site .serie{
  position: relative; background: var(--canvas); overflow: hidden; isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.4rem); min-height: clamp(210px, 26vw, 300px);
  display: grid; align-content: end; gap: .4rem;
  transition: background .55s var(--ease);
}
body.site .serie:hover{ background: var(--plinth); }
body.site .serie__bg{
  /* `inset:0` alone does not size a replaced element: for an <img> with
     `height:auto` the browser keeps the intrinsic height and ignores `bottom`,
     so these ran 790px tall inside a 300px tile — cropped and off-centre, with
     `object-fit:contain` never getting a box to fit into. Explicit 100%/100%
     hands it one, and `object-position` then centres every tile alike.        */
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; object-fit: contain; object-position: center; padding: 12%;
  opacity: .22; filter: grayscale(1);
  transition: opacity .7s var(--ease), transform .9s var(--ease), filter .7s var(--ease);
}
body.site .serie:hover .serie__bg{ opacity: .5; transform: scale(1.09); filter: grayscale(0); }
body.site .serie h3{ font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
body.site .serie__meta{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body.site .serie__n{ font-family: var(--f-spec); font-size: .68rem; color: var(--bronze); letter-spacing: .16em; }
body.site .serie__arrow{ color: var(--bronze); opacity: 0; transform: translateX(6px); transition: all .5s var(--ease); }
body.site .serie:hover .serie__arrow{ opacity: 1; transform: none; }

/* ---------- 14. SPLIT / FEATURE BANDS ----------------------------------- */
body.site .split{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 4.5rem); align-items: center; }
body.site .split--wide-media{ grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px){ body.site .split, body.site .split--wide-media{ grid-template-columns: 1fr; } }

body.site .media-frame{ position: relative; }
body.site .media-frame::before{
  content: ""; position: absolute; inset-block-start: -14px; inset-inline-start: -14px;
  width: 58px; height: 58px; border-block-start: 1px solid var(--hair-bronze);
  border-inline-start: 1px solid var(--hair-bronze); pointer-events: none;
}
body.site .media-frame::after{
  content: ""; position: absolute; inset-block-end: -14px; inset-inline-end: -14px;
  width: 58px; height: 58px; border-block-end: 1px solid var(--hair-bronze);
  border-inline-end: 1px solid var(--hair-bronze); pointer-events: none;
}
body.site .media-frame img{ width: 100%; }
body.site .media-frame--plinth img{
  width: auto; max-width: 100%; max-height: min(56vh, 540px);
  margin-inline: auto;
}
body.site .media-frame--plinth{
  background: radial-gradient(ellipse 55% 40% at 50% 88%, rgba(176,141,87,.15), transparent 70%), var(--plinth);
  padding: clamp(1.4rem, 4vw, 3.2rem); border: 1px solid var(--hair);
}
body.site .media-frame--plinth img{ filter: drop-shadow(0 40px 45px rgba(0,0,0,.7)); }

/* Less is More band */
body.site .lim{ position: relative; background: var(--void); overflow: hidden; }
body.site .lim__word{
  position: absolute; inset-block-start: 50%; left: 50%; translate: -50% -50%;
  font-family: var(--f-display); font-style: italic;
  font-size: clamp(3rem, 11vw, 11rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(176,141,87,.07);
  inset-block-start: 12%; translate: -50% 0;
  pointer-events: none; user-select: none; z-index: 0;
}
body.site .lim .split{ position: relative; z-index: 1; }

/* ---------- 15. STEPS (technique / how it works) ------------------------ */
body.site .steps{ counter-reset: s; display: grid; gap: 0; border-block-start: 1px solid var(--hair); }
body.site .step{
  counter-increment: s; display: grid;
  grid-template-columns: clamp(64px, 8vw, 110px) minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem); align-items: start;
  padding-block: clamp(1.6rem, 3.4vw, 2.9rem);
  border-block-end: 1px solid var(--hair);
  transition: background .5s var(--ease);
}
body.site .step:hover{ background: var(--plinth); }
body.site .step__n{
  font-family: var(--f-spec); font-size: clamp(.8rem, 1.4vw, 1rem); color: var(--bronze);
  letter-spacing: .1em; padding-block-start: .35rem;
}
body.site .step__n::before{ content: counter(s, decimal-leading-zero); }
body.site .step h3{ margin-block-end: .5rem; }
body.site .step__txt{ color: var(--steel-3); font-size: .98rem; }
/* portrait cut-outs are up to 1400px tall — bound them by height, not width */
body.site .step__media{
  justify-self: center; display: flex; align-items: center; justify-content: center;
  height: clamp(110px, 13vw, 168px); width: 100%;
}
body.site .step__media img{
  max-height: 100%; width: auto; max-width: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .6));
}
@media (max-width: 800px){
  body.site .step{ grid-template-columns: 46px 1fr; }
  body.site .step__txt{ grid-column: 2; }
  body.site .step__media{ display: none; }
}

/* ---------- 16. TESTIMONIALS -------------------------------------------- */
body.site .quotes{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (max-width: 900px){ body.site .quotes{ grid-template-columns: 1fr; } }
body.site .quote{
  background: var(--canvas); padding: clamp(1.6rem, 3vw, 2.6rem);
  display: grid; align-content: start; gap: 1.2rem;
  transition: background .5s var(--ease);
}
body.site .quote:hover{ background: var(--plinth); }
body.site .quote__mark{ font-family: var(--f-display); font-size: 3.4rem; line-height: .6; color: var(--bronze); opacity: .5; }
body.site .quote p{ font-family: var(--f-display); font-size: clamp(1.02rem, .95rem + .4vw, 1.22rem); line-height: 1.6; color: var(--steel); }
body.site .quote__by{ display: grid; gap: 2px; }
body.site .quote__by b{ color: var(--steel-2); font-size: .92rem; font-weight: 600; }
body.site .quote__by span{ font-family: var(--f-spec); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-4); }
body.site .stars{ display: flex; gap: 3px; color: var(--bronze); }

/* ---------- 17. FILTER BAR ---------------------------------------------- */
body.site .filters{
  position: sticky; inset-block-start: 66px; z-index: 40;
  background: rgba(13, 15, 17, .985);
  border-block: 1px solid var(--hair); margin-block-end: clamp(2rem, 4vw, 3.4rem);
}
body.site .filters__row{
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.4rem;
  padding-block: 1rem;
}
body.site .fgroup{ display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
body.site .fgroup--primary{ flex-basis: 100%; }
body.site .fgroup__lbl{ font-family: var(--f-spec); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel-4); margin-inline-end: .2rem; }
body.site .chip{
  border: 1px solid var(--hair); background: none; cursor: pointer;
  padding: .48rem .95rem; font-size: .85rem; color: var(--steel-3);
  transition: color .35s, border-color .35s, background .35s;
  white-space: nowrap;
}
body.site .chip:hover{ color: var(--steel); border-color: var(--steel-4); }
body.site .chip[aria-pressed="true"]{ color: var(--void); background: var(--bronze); border-color: var(--bronze); font-weight: 600; }
body.site .chip small{
  font-family: var(--f-spec); font-size: .82em; opacity: .65;
  margin-inline-start: .45em; unicode-bidi: isolate;
}
body.site .filters__count{ margin-inline-start: auto; font-family: var(--f-spec); font-size: .7rem; letter-spacing: .1em; color: var(--steel-4); }
@media (max-width: 1080px){ body.site .filters{ inset-block-start: 0; } }

body.site .work.is-hidden{ display: none; }
body.site .empty-state{ text-align: center; padding-block: 4rem; color: var(--steel-3); }

/* ---------- 18. FAQ ------------------------------------------------------ */
body.site .faq{ border-block-start: 1px solid var(--hair); }
body.site .faq__i{ border-block-end: 1px solid var(--hair); }
body.site .faq__q{
  width: 100%; background: none; border: 0; cursor: pointer; text-align: start;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.1rem, 2.2vw, 1.7rem) 0;
  font-family: var(--f-display); font-size: clamp(1.05rem, .95rem + .55vw, 1.35rem);
  color: var(--steel); transition: color .35s;
}
body.site .faq__q:hover{ color: var(--bronze-hi); }
body.site .faq__ico{ flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--hair); color: var(--bronze); position: relative; }
body.site .faq__ico::before, body.site .faq__ico::after{
  content: ""; position: absolute; background: currentColor; transition: transform .45s var(--ease), opacity .45s;
}
body.site .faq__ico::before{ width: 11px; height: 1px; }
body.site .faq__ico::after{ width: 1px; height: 11px; }
body.site .faq__q[aria-expanded="true"] .faq__ico::after{ transform: scaleY(0); }
body.site .faq__q[aria-expanded="true"] .faq__ico{ background: var(--bronze); color: var(--void); border-color: var(--bronze); }
body.site .faq__a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
body.site .faq__q[aria-expanded="true"] + .faq__a{ grid-template-rows: 1fr; }
body.site .faq__a > div{ overflow: hidden; }
body.site .faq__a p{ padding-block-end: 1.5rem; max-width: 72ch; color: var(--steel-3); }

/* ---------- 19. FORMS (WPForms wrapper look) ---------------------------- */
body.site .form{ display: grid; gap: 1.15rem; }
body.site .form > .btn:not(.btn--wide){ justify-self: start; }
body.site .form__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px){ body.site .form__row{ grid-template-columns: 1fr; } }
body.site .field{ display: grid; gap: .45rem; }
body.site .field > label{
  font-family: var(--f-spec); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--steel-3);
}
body.site .field > label .req{ color: var(--bronze); }
body.site .field input, body.site .field select, body.site .field textarea{
  background: var(--void); border: 1px solid var(--hair); color: var(--steel);
  padding: .95rem 1.05rem; font-size: .98rem; width: 100%;
  transition: border-color .35s, background .35s;
  border-radius: 0; -webkit-appearance: none; appearance: none;
}
body.site .field textarea{ min-height: 148px; resize: vertical; line-height: 1.6; }
body.site .field input::placeholder, body.site .field textarea::placeholder{ color: var(--steel-4); }
body.site .field input:focus, body.site .field select:focus, body.site .field textarea:focus{
  outline: none; border-color: var(--bronze); background: rgba(176,141,87,.05);
}
/* single clean chevron, always on the inline-end side */
body.site .field select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23B08D57' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1.05rem center;
  padding-inline-end: 2.6rem;
}
body.site .field select option{ background: var(--plinth); color: var(--steel); }
body.site .consent{ display: flex; align-items: flex-start; gap: .7rem; font-size: .84rem; color: var(--steel-3); line-height: 1.55; }
body.site .consent input{ width: 17px; height: 17px; flex: none; margin-block-start: 3px; accent-color: var(--bronze); }

/* ---------- 20. CONTACT GRID -------------------------------------------- */
body.site .cgrid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
@media (max-width: 620px){ body.site .cgrid{ grid-template-columns: 1fr; } }
body.site .ccell{ background: var(--plinth); padding: clamp(1.3rem, 2.6vw, 2rem); display: grid; gap: .55rem; align-content: start; transition: background .45s; }
body.site .ccell:hover{ background: var(--raise); }
body.site .ccell__ico{ color: var(--bronze); margin-block-end: .35rem; }
body.site .ccell h4{ font-family: var(--f-spec); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--steel-4); font-weight: 500; }
body.site .ccell b{ font-family: var(--f-display); font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--steel); font-weight: 500; line-height: 1.3; }
body.site .ccell p{ font-size: .88rem; color: var(--steel-3); margin: 0; }

body.site .map{
  position: relative; aspect-ratio: 16 / 8; border: 1px solid var(--hair); overflow: hidden;
  background: var(--plinth); display: grid; place-items: center;
}
body.site .map iframe{ width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.85); }

/* ---------- 21. STUDIO VISIT BAND --------------------------------------- */
body.site .visit{ position: relative; background: var(--void); overflow: hidden; }
body.site .visit__in{ position: relative; z-index: 1; text-align: center; display: grid; gap: 1.5rem; justify-items: center; }
body.site .visit__bg{
  position: absolute; inset: 0; z-index: 0; opacity: .12;
  background-size: cover; background-position: center; filter: grayscale(1);
}
body.site .visit::after{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent, var(--void) 82%);
}

body.site .studio-video{
  position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--hair);
  overflow: hidden; display: grid; place-items: center; background: var(--plinth);
  cursor: pointer;
}
body.site .studio-video img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(1); transition: opacity .6s, transform .8s var(--ease); }
body.site .studio-video:hover img{ opacity: .45; transform: scale(1.04); }
body.site .studio-video .vinner{ position: relative; z-index: 1; text-align: center; }

/* ---------- 22. FOOTER --------------------------------------------------- */
body.site .ftr{ background: var(--void); border-block-start: 1px solid var(--hair); }
body.site .ftr__top{
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.35fr;
  gap: clamp(1.6rem, 3vw, 3rem); padding-block: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 980px){ body.site .ftr__top{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ body.site .ftr__top{ grid-template-columns: 1fr; } }
body.site .ftr h4{ font-family: var(--f-spec); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze); margin-block-end: 1.35rem; font-weight: 500; }
body.site .ftr__links{ display: grid; gap: .6rem; }
body.site .ftr__links a{ font-size: .93rem; color: var(--steel-3); transition: color .3s; width: fit-content; }
body.site .ftr__links a:hover{ color: var(--bronze-hi); }
body.site .ftr__story p{ font-size: .93rem; color: var(--steel-3); max-width: 42ch; }
body.site .socials{ display: flex; gap: .6rem; margin-block-start: 1.4rem; }
body.site .newsletter{ display: flex; border: 1px solid var(--hair); margin-block-start: .3rem; }
body.site .newsletter input{ flex: 1; min-width: 0; background: none; border: 0; padding: .85rem 1rem; font-size: .9rem; }
body.site .newsletter input:focus{ outline: none; }
body.site .newsletter button{
  border: 0; background: var(--bronze); color: var(--void); padding-inline: 1.15rem;
  cursor: pointer; font-weight: 700; transition: background .35s;
}
body.site .newsletter button:hover{ background: var(--bronze-hi); }
body.site .ftr__bot{
  border-block-start: 1px solid var(--hair); padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; align-items: center; justify-content: space-between;
}
body.site .ftr__bot p, body.site .ftr__bot a{ font-size: .8rem; color: var(--steel-4); margin: 0; }
body.site .ftr__bot a:hover{ color: var(--bronze); }

/* ---------- 23. POPUP / LIGHTBOX ---------------------------------------- */
body.site .ov{
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: var(--gut); background: rgba(4, 5, 6, .93);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
}
body.site .ov.is-open{ opacity: 1; visibility: visible; }
body.site .ov__panel{
  position: relative; width: min(100%, 940px); max-height: 88vh; overflow: auto;
  background: var(--plinth); border: 1px solid var(--hair-bronze);
  transform: translateY(22px) scale(.985); transition: transform .55s var(--ease);
  box-shadow: 0 40px 120px rgba(0,0,0,.7);
}
body.site .ov.is-open .ov__panel{ transform: none; }
body.site .ov__close{
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; z-index: 5;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(10,12,14,.7); border: 1px solid var(--hair); color: var(--steel-2); cursor: pointer;
  transition: color .35s, background .35s, transform .35s;
}
body.site .ov__close:hover{ color: var(--void); background: var(--bronze); transform: rotate(90deg); }

body.site .lead-pop{ display: grid; grid-template-columns: .85fr 1.15fr; }
@media (max-width: 760px){ body.site .lead-pop{ grid-template-columns: 1fr; } }
body.site .lead-pop__art{
  position: relative; background: radial-gradient(ellipse 60% 45% at 50% 85%, rgba(176,141,87,.2), transparent 70%), var(--void);
  display: grid; place-items: center; padding: 2rem; min-height: 200px;
}
body.site .lead-pop__art img{ max-height: 340px; width: auto; filter: drop-shadow(0 30px 35px rgba(0,0,0,.7)); }
body.site .lead-pop__body{ padding: clamp(1.5rem, 3.4vw, 2.8rem); }

/* lightbox */
body.site .lb__panel{ background: var(--void); border-color: var(--hair); width: min(100%, 1180px); }
body.site .lb__grid{ display: grid; grid-template-columns: 1.25fr .75fr; }
@media (max-width: 860px){ body.site .lb__grid{ grid-template-columns: 1fr; } }
body.site .lb__stage{
  position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: clamp(1.2rem, 3vw, 2.6rem);
  background: radial-gradient(ellipse 55% 40% at 50% 88%, rgba(176,141,87,.14), transparent 70%), var(--plinth);
}
body.site .lb__stage img{ max-height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.75)); }
body.site .lb__info{ padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; align-content: start; gap: 1rem; }
body.site .lb__dl{ display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; font-size: .9rem; }
body.site .lb__dl dt{ font-family: var(--f-spec); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-4); padding-block-start: .3em; }
body.site .lb__dl dd{ margin: 0; color: var(--steel-2); }
body.site .lb__nav{ position: absolute; inset-block-end: 12px; inset-inline-start: 12px; display: flex; gap: .4rem; }

/* video lightbox */
body.site .vid__panel{ width: min(100%, 1180px); background: var(--void); border-color: var(--hair); }
body.site .vid__panel video{
  display: block; width: 100%; height: auto; max-height: 78vh;
  background: #000; aspect-ratio: 16 / 9; object-fit: contain;
}
body.site .vid__cap{
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 2.4vw, 1.6rem);
  border-block-start: 1px solid var(--hair);
}
body.site .vid__cap b{ font-family: var(--f-display); font-weight: 500; color: var(--steel); font-size: 1.05rem; }

/* ---------- 24. STICKY WHATSAPP ----------------------------------------- */
body.site .wa{
  position: fixed; inset-block-end: 22px; inset-inline-start: 22px; z-index: 80;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bronze); color: var(--void);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
  transition: transform .45s var(--ease), background .35s;
}
body.site .wa:hover{ transform: scale(1.09); background: var(--bronze-hi); }
body.site .wa:hover::after{ animation: pulse 2.8s var(--ease) infinite; }
body.site .wa::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--bronze); opacity: 0;
  transition: opacity .3s;
}

/* ---------- 25. PAGE HEAD (inner pages) --------------------------------- */
body.site .phead{
  position: relative; padding-block: clamp(9rem, 15vw, 13rem) clamp(3rem, 6vw, 5rem);
  background: var(--void); overflow: hidden; border-block-end: 1px solid var(--hair);
}
body.site .phead__glow{
  position: absolute; inset-block-start: -30%; left: 50%; translate: -50% 0;
  width: min(110vw, 1000px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(176,141,87,.13), transparent 62%);
  pointer-events: none;
}
body.site .phead__in{ position: relative; z-index: 1; }
/* .66rem uppercase at .12em tracking is ~10.5px of very open type; a little
   more size and weight buys legibility that colour alone could not */
body.site .crumbs{ display: flex; align-items: center; gap: .55rem; font-family: var(--f-spec); font-size: .72rem; letter-spacing: .1em; font-weight: 500; text-transform: uppercase; color: var(--steel-4); margin-block-end: 1.5rem; }
body.site .crumbs a:hover{ color: var(--bronze); }
body.site .crumbs .sep{ opacity: .45; }

/* ---------- 26. MOTION / REVEAL ----------------------------------------- */
body.site .rv{ opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
body.site .rv.is-in{ opacity: 1; transform: none; }
body.site .rv-d1{ transition-delay: .09s } body.site .rv-d2{ transition-delay: .18s }
body.site .rv-d3{ transition-delay: .27s } body.site .rv-d4{ transition-delay: .36s }
body.site .rv-d5{ transition-delay: .45s } body.site .rv-d6{ transition-delay: .54s }
@media (prefers-reduced-motion: reduce){
  body.site .rv{ opacity: 1; transform: none; transition: none; }
  body.site .marquee__track, body.site .seal__txt, body.site .logo__mark{ animation: none !important; }
}

/* mask-reveal for hero lines */
body.site .mask > span{ display: block; transform: translateY(105%); transition: transform 1.05s var(--ease); }
body.site .mask.is-in > span, body.site.ready .hero .mask > span{ transform: none; }
body.site .mask-d1 > span{ transition-delay: .1s } body.site .mask-d2 > span{ transition-delay: .2s }
body.site .mask-d3 > span{ transition-delay: .3s }

/* off-screen animations are paused by the observer in site.js */
body.site .is-paused, body.site .is-paused *, body.site .is-paused::before, body.site .is-paused::after, body.site .is-paused *::before, body.site .is-paused *::after{ animation-play-state: paused !important; }

/* ---------- 27. SKETCH-MODE DEV BAR ------------------------------------- */
body.site .devbar{
  position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 110;
  background: rgba(8, 9, 10, .985);
  border-block-start: 1px solid var(--hair-bronze);
  transform: translateY(calc(100% - 34px)); transition: transform .5s var(--ease);
}
body.site .devbar:hover, body.site .devbar:focus-within{ transform: none; }
body.site .devbar__tab{
  height: 34px; display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--f-spec); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bronze);
  cursor: default;
}
body.site .devbar__in{ display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 var(--gut) .9rem; align-items: center; justify-content: center; }
body.site .devbar a{
  font-family: var(--f-spec); font-size: .66rem; letter-spacing: .1em;
  padding: .42rem .8rem; border: 1px solid var(--hair); color: var(--steel-3);
  transition: all .3s;
}
body.site .devbar a:hover, body.site .devbar a.on{ color: var(--void); background: var(--bronze); border-color: var(--bronze); }
body.site{ padding-block-end: 34px; }

/* placeholder flag */
body.site .ph{ position: relative; }
body.site .ph::after{
  content: "PLACEHOLDER"; position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  font-family: var(--f-spec); font-size: .5rem; letter-spacing: .14em;
  padding: .2em .5em; background: rgba(192,112,63,.9); color: #fff; z-index: 6;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
body.site.show-ph .ph::after{ opacity: 1; }

/* ---------- 26. CORNERS -------------------------------------------------- */
/* One subtle radius on everything that draws a full box border. Single-side
   hairlines (section rules, table-like dividers) stay square, and the circular
   elements keep their 50%. Change --r once to retune the whole site.          */
body.site .btn, body.site .mim-lang, body.site .icon-btn, body.site .mega__thumb, body.site .mega__video, body.site .mega__promo, body.site .negs, body.site .work, body.site .tag, body.site .work__go, body.site .series, body.site .media-frame--plinth, body.site .quotes, body.site .chip, body.site .faq__ico, body.site .cgrid, body.site .map, body.site .studio-video, body.site .newsletter, body.site .ov__panel, body.site .ov__close, body.site .devbar a, body.site .field input, body.site .field select, body.site .field textarea{
  border-radius: var(--r);
}

/* a card's own corners must clip what sits flush inside them */
body.site .work, body.site .cgrid, body.site .newsletter, body.site .mega__promo{ overflow: hidden; }

/* the image stage fills the top of the card, so it inherits those corners */
body.site .work__stage{ border-start-start-radius: var(--r); border-start-end-radius: var(--r); }

/* keep the round things round */
body.site .play, body.site .play::after, body.site .hero__ring, body.site .hero__ring::after, body.site .seal__core, body.site .wa::after{
  border-radius: 50%;
}

/* ---------- 27. PAGE HEAD ------------------------------------------------ */
/* The section heads centre themselves; the page hero did not, so every inner
   page opened with a right-aligned block above centred content further down.  */
body.site .phead__in{ text-align: center; }
body.site .phead__in .crumbs, body.site .phead__in .eyebrow{ justify-content: center; }
/* .eyebrow draws its rule with ::before only, which reads lopsided once the row
   is centred — mirror it, the way .eyebrow--center already does */
body.site .phead__in .eyebrow::after{
  content: ""; width: clamp(20px, 4vw, 44px); height: 1px;
  background: var(--bronze); opacity: .6; flex: none;
}
body.site .phead__in .h-1, body.site .phead__in .lead{ margin-inline: auto; }
/* the CTA row is an inline-styled flex div with no class of its own */
body.site .phead__in > div{ justify-content: center; }

/* ---------- 28. GRID MODIFIERS ------------------------------------------- */
/* These used to be inline `style="grid-template-columns:..."` attributes. An
   inline style beats every stylesheet rule, media queries included, so those
   sections stayed locked at their desktop column count all the way down to a
   phone — the services cards were 176px wide at 390px and broke every three
   words. As classes they collapse like everything else.                      */
body.site .series--2{ grid-template-columns: repeat(2, 1fr); }
body.site .series--3{ grid-template-columns: repeat(3, 1fr); }
body.site .cgrid--3{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px){
  body.site .series--3{ grid-template-columns: repeat(2, 1fr); }
  body.site .cgrid--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  body.site .cgrid--3{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  body.site .series--2, body.site .series--3{ grid-template-columns: 1fr; }
}

/* ---------- 29. PRESS + EXHIBITION MEDIA --------------------------------
   Added 14.09.2026 with the Channel 13 segment and the exhibition pans. These
   clips are the only third-party proof on the site, so they get a frame that
   reads as evidence rather than decoration. The vertical pans autoplay muted
   and are paused off-screen by site.js — the same rule as every other loop
   here: nothing animates outside the viewport. */
body.site .press{ display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem); }
body.site .press__video video{
  display: block; width: 100%; height: auto; background: var(--void);
  border: 1px solid var(--hair); border-radius: var(--r);
}
body.site .press__cap{
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; align-items: baseline;
  margin-block-start: .9rem;
}
body.site .press__cap b{ font-weight: 600; color: var(--steel-2); font-size: .97rem; }

body.site .expo{
  display: grid; gap: clamp(.7rem, 1.8vw, 1.2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}
body.site .expo video{
  display: block; width: 100%; aspect-ratio: 464 / 832; object-fit: cover;
  background: var(--plinth); border: 1px solid var(--hair); border-radius: var(--r);
}

/* ---------- 30. MOBILE PASS ----------------------------------------------
   Added 23.09.2026 after a full audit at 320/360/390/430. Nothing overflowed
   sideways, so these rules are about the phone as a device: type that is
   actually readable, fingers instead of cursors, and screen height as the
   scarce resource. One block, all behind width/hover queries, so desktop is
   untouched. */

/* the filter bar stuck at top:0 below 1080px, which on a phone is *under* the
   fixed header — it scrolled out of reach exactly when it was needed */
@media (max-width: 1080px){ body.site .filters{ inset-block-start: 66px; } }

/* the CV rows put a word ("היום") where the other rows have a year, and the
   fixed 46px number column clipped it */
@media (max-width: 800px){ body.site .step{ grid-template-columns: minmax(46px, auto) 1fr; } }
/* on a phone the counter + date ("04אוגוסט 2026") read as one run-on token and
   ate a third of the row — put the number line above the title instead */
@media (max-width: 600px){
  body.site .step{ grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  body.site .step__txt{ grid-column: 1; }
  body.site .step__n{ display: flex; gap: .7em; padding-block-start: 0; }
}

/* touch screens: a tap leaves :hover stuck on, so the lift/zoom effects froze
   cards mid-animation. Keep the colour feedback, drop the movement. */
@media (hover: none){
  body.site .work:hover .work__img{ transform: translateZ(30px) scale(1); }
  body.site .work:hover .work__img--boxed{ transform: none; }
  body.site .serie:hover .serie__bg{ transform: none; }
  body.site .btn:hover .ico{ transform: none; }
}

@media (max-width: 600px){
  /* --- type: 10.5px uppercase mono at .22em tracking is not readable on a
     phone. Floor the small sizes at ~11.5–12px and close the tracking up. */
  :root{ --t-spec: .74rem; }
  body.site .eyebrow{ letter-spacing: .14em; }
  body.site .spec{ letter-spacing: .08em; }
  body.site .num{ letter-spacing: .12em; }
  body.site .work__spec{ font-size: .74rem; letter-spacing: .04em; }
  body.site .tag{ font-size: .66rem; letter-spacing: .1em; }
  body.site .serie__n, body.site .fgroup__lbl, body.site .filters__count{ font-size: .74rem; letter-spacing: .1em; }
  body.site .field > label, body.site .ccell h4, body.site .ftr h4, body.site .lb__dl dt{ font-size: .74rem; letter-spacing: .1em; }
  body.site .quote__by span{ font-size: .74rem; letter-spacing: .06em; }
  body.site .crumbs{ font-size: .78rem; }

  /* iOS zooms the whole page into any field under 16px — keep them at 16 */
  body.site .field input, body.site .field select, body.site .field textarea, body.site .newsletter input{ font-size: 16px; }

  /* --- touch targets: 40px minimum on everything a finger has to hit */
  body.site .work__go{ width: 40px; height: 40px; }
  body.site .work__ask{ display: inline-flex; align-items: center; min-height: 40px; }
  body.site .crumbs a{ display: inline-flex; align-items: center; min-height: 40px; }
  body.site .lnk{ min-height: 40px; }
  body.site .ftr__links{ gap: 0; }
  body.site .ftr__links a{ display: inline-flex; align-items: center; min-height: 40px; }
  body.site .ftr__bot a{ display: inline-block; padding-block: .6rem; }
  body.site .consent input{ width: 20px; height: 20px; margin-block-start: 1px; }
  body.site .chip{ min-height: 40px; }
  body.site .faq__ico{ width: 34px; height: 34px; }

  /* --- page heads: 144px of top padding under an 84px header is a screen
     of nothing before the title */
  body.site .phead{ padding-block: 7.25rem 2.5rem; }

  /* --- CTA rows stack into equal full-width buttons instead of two
     mismatched widths side by side */
  body.site .hero__cta{ width: 100%; }
  body.site .hero__cta .btn, body.site .visit__in .btn{ width: 100%; justify-content: center; }

  /* --- gallery filters: the chips wrapped into five rows and, being sticky,
     that was a third of the screen pinned over the catalogue. One row that
     scrolls sideways, bleeding to the screen edge. */
  body.site .filters__row{ flex-wrap: nowrap; flex-direction: column; align-items: stretch; gap: .5rem; padding-block: .7rem; }
  body.site .fgroup--primary{
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    scroll-padding-inline: var(--gut);
  }
  body.site .fgroup--primary::-webkit-scrollbar{ display: none; }
  body.site .fgroup--primary .fgroup__lbl{ display: none; }
  body.site .filters__count{ margin-inline-start: 0; }

  /* --- small screen furniture */
  body.site .map{ aspect-ratio: 4 / 3; }
  body.site .trust__cell{ padding-inline: .6rem; }
  body.site .ov{ padding: .75rem; }
  body.site .ov__panel{ max-height: 92svh; }
}

/* each card sits inside its own .rv reveal wrapper, and the wrapper — not the
   card — was the grid item, so a card with a one-line spec stopped short of its
   neighbour. Visible on desktop too, but two narrow columns made it obvious. */
body.site .works > .rv{ display: grid; }

/* lightbox + lead popup: `1fr` is `minmax(auto, 1fr)`, so the 1400px cut-out
   set the column's minimum and the stage ran 782px wide inside a 351px panel —
   the quick-view on a phone was a crop of the sculpture with no details. */
@media (max-width: 860px){
  body.site .lb__grid{ grid-template-columns: minmax(0, 1fr); }
  /* the stage's grid row is auto-sized, so a percentage max-height on the
     image resolves to nothing — cap the image itself instead */
  body.site .lb__stage{ aspect-ratio: auto; }
  body.site .lb__stage img{ width: auto; max-height: min(48svh, 400px); }
}
@media (max-width: 760px){
  body.site .lead-pop{ grid-template-columns: minmax(0, 1fr); }
  body.site .lead-pop__art{ min-height: 0; padding: 1.2rem; }
  body.site .lead-pop__art img{ max-height: min(30svh, 240px); }
}

/* --- work cards: one per row made the 68-piece catalogue 43,000px of
   scrolling. Two per row, with the card body trimmed to fit. The whole card
   is already the quick-view button, so the separate expand icon goes. */
@media (max-width: 480px){
  body.site .works--3, body.site .works--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  body.site .work__stage{ padding: .6rem; }
  body.site .work__tags{ padding: .5rem; }
  body.site .work__body{ padding: .8rem .75rem .7rem; gap: .35rem; }
  body.site .work__title{ font-size: 1rem; }
  body.site .work__spec{ font-size: .7rem; letter-spacing: 0; line-height: 1.55; }
  body.site .work__foot{ padding-block-start: .35rem; }
  body.site .work__go{ display: none; }
  body.site .work__ask{ font-size: .84rem; }
}

/* the sketch's dev bar sat on top of the WhatsApp button */
body.site:has(.devbar) .wa{ inset-block-end: calc(34px + 14px); }
@media (max-width: 600px){
  body.site .wa{ inset-inline-start: 14px; width: 50px; height: 50px; }
  body.site:has(.devbar) .wa{ inset-block-end: calc(34px + 12px); }
  body.site .devbar__tab{ font-size: .6rem; letter-spacing: .08em; padding-inline: .5rem; }
  body.site .devbar__in{ flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  body.site .devbar a{ white-space: nowrap; }
}