/* =====================================================================
   LIRAZ HAZAN – il-design.co.il rebuild
   Palette (10.10, his Statuario marble reference): white ground, cool vein greys, graphite – no gold. Heebo + Rubik, LH logo.
   Mobile first (390 × 844), then 600 / 900 / 1200.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  /* color */
  --paper:#FFFFFF; --paper-2:#F4F5F6; --sand:#E3E6E9; --white:#FFFFFF;
  --ink:#1C1E21; --ink-2:#33363A; --ink-soft:#5E636A;
  --gold:#141517; --gold-d:#141517; --gold-l:#FFFFFF; /* accent = black on white, white on black (his marble, 10.10) */
  --text:#1C1E21; --muted:#6E747B; --line:rgba(28,30,33,.14);
  /* type */
  --f-display:"Heebo", system-ui, sans-serif;
  --f-body:"Rubik", "Heebo", system-ui, sans-serif;
  --t-h1:clamp(50px, 14vw, 104px);
  --t-h2:clamp(36px, 9.6vw, 72px);
  --t-h3:clamp(21px, 5.4vw, 28px);
  --t-body:16.5px;
  /* space */
  --gut:16px; --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px;
  --sec:72px; --max:1280px; --hdr:64px;
  /* shape + motion */
  --r:4px; --r-lg:10px;
  --ease:cubic-bezier(.22,.7,.12,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --d-fast:.25s; --d-med:.6s; --d-slow:1.1s;
}
@media (min-width:600px){ :root{ --gut:28px; --sec:96px; } }
@media (min-width:900px){ :root{ --gut:48px; --sec:128px; --hdr:84px; --t-body:17px; } }

/* ---------- 2. base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--hdr) + 16px); }
body{ margin:0; background:var(--paper); color:var(--text); font:400 var(--t-body)/1.7 var(--f-body); overflow-x:clip; -webkit-font-smoothing:antialiased; }
img,svg{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3{ font-weight:400; }
ul,ol{ margin:0; padding:0; list-style:none; }
figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.wrap{ width:100%; max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); }
.skip{ position:absolute; inset-inline-start:12px; top:12px; z-index:200; background:var(--ink); color:var(--white); padding:10px 16px; transform:translateY(-200%); }
.skip:focus{ transform:none; }

/* text line reveal wrapper: outer clips, inner moves */
.tl{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.tl > span{ display:inline-block; }

.eyebrow{ display:flex; align-items:center; gap:10px; font:500 13px/1 var(--f-body); letter-spacing:.16em; color:var(--gold-d); }
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; }
.eyebrow--gold{ color:var(--gold); }
.h2{ font:300 var(--t-h2)/1.02 var(--f-display); letter-spacing:-.02em; color:var(--ink); }
.h2 b{ font-weight:700; }

/* ---------- 3. buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:50px; padding:0 26px; border:1px solid transparent; border-radius:var(--r);
  font:500 16px/1 var(--f-body); letter-spacing:.02em; white-space:nowrap; transition:background var(--d-fast), color var(--d-fast), border-color var(--d-fast); }
.btn svg{ width:18px; height:18px; fill:currentColor; }
.btn--gold{ background:var(--gold); color:var(--white); }
.btn--gold:hover{ background:var(--gold-d); }
.btn--ink{ background:var(--ink); color:var(--white); }
.btn--ink:hover{ background:var(--ink-2); }
.btn--line{ border-color:var(--ink); color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--white); }
.btn--line-light{ border-color:rgba(255,253,249,.4); color:var(--white); }
.btn--line-light:hover{ border-color:var(--gold); color:var(--gold-l); }

/* ---------- 4. header ---------- */
.hdr{ position:fixed; inset:0 0 auto; z-index:100; height:var(--hdr); background:rgba(255,255,255,.94); transition:transform .45s var(--ease), background .3s, box-shadow .3s; }
@supports (backdrop-filter:blur(1px)){ .hdr{ background:rgba(255,255,255,.82); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } }
.hdr.is-stuck{ box-shadow:0 1px 0 var(--line); }
.hdr.is-hidden{ transform:translateY(-100%); }
.hdr__in{ height:100%; max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); display:flex; align-items:center; gap:16px; }
.hdr__logo{ margin-inline-end:auto; }
.hdr__logo img{ width:86px; transition:filter .3s; }
.hdr__nav{ display:none; }
.hdr__act{ display:flex; align-items:center; gap:8px; }
.hdr__tel{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; }
.hdr__tel svg{ width:18px; height:18px; fill:var(--gold-d); }
.hdr__tel span{ display:none; }
.hdr__cta{ display:none; }
.hdr__menu{ height:44px; display:flex; align-items:center; gap:10px; padding:0 14px 0 16px; border-radius:22px; background:var(--ink); color:var(--white); font:500 14px/1 var(--f-body); letter-spacing:.06em; }
.hdr__menu-lines{ width:18px; height:10px; position:relative; }
.hdr__menu-lines i{ position:absolute; inset-inline:0; height:1.5px; background:var(--gold-l); transition:transform .4s var(--ease), top .4s var(--ease); }
.hdr__menu-lines i:first-child{ top:0; }
.hdr__menu-lines i:last-child{ top:8.5px; inset-inline-start:6px; }
.hdr__menu[aria-expanded="true"] .hdr__menu-lines i{ top:4.25px; inset-inline-start:0; }
.hdr__menu[aria-expanded="true"] .hdr__menu-lines i:first-child{ transform:rotate(45deg); }
.hdr__menu[aria-expanded="true"] .hdr__menu-lines i:last-child{ transform:rotate(-45deg); }
.hdr.is-menu{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.hdr.is-menu .hdr__logo img{ filter:invert(1); }
.hdr.is-menu .hdr__tel{ border-color:rgba(255,253,249,.25); }
.hdr.is-menu .hdr__tel svg{ fill:var(--gold); }
.hdr.is-menu .hdr__menu{ background:var(--gold); }
.hdr.is-menu .hdr__menu-lines i{ background:var(--white); }

@media (min-width:1100px){
  .hdr__logo{ margin:0; }
  .hdr__logo img{ width:112px; }
  .hdr__nav{ display:block; margin-inline:auto; }
  .hdr__nav > ul{ display:flex; gap:clamp(14px, 1.9vw, 30px); }
  .hdr__nav li{ position:relative; display:flex; align-items:center; }
  .hdr__nav > ul > li > a{ position:relative; padding:10px 0; font:400 15.5px/1 var(--f-body); color:var(--ink); }
  .hdr__nav > ul > li > a::after{ content:""; position:absolute; inset-inline:0; bottom:2px; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease); }
  .hdr__nav > ul > li > a:hover::after, .hdr__nav a[aria-current]::after{ transform:scaleX(1); }
  .hdr__nav a[aria-current]{ font-weight:500; }
  .sub-toggle{ width:22px; height:22px; display:grid; place-items:center; color:var(--gold-d); }
  .sub-toggle svg{ width:14px; height:14px; transition:transform .3s; }
  .sub{ position:absolute; top:calc(100% + 14px); inset-inline-start:-24px; width:440px; padding:12px; background:var(--white); box-shadow:0 30px 60px -30px rgba(47,50,54,.45), 0 0 0 1px var(--line);
    display:grid; grid-template-columns:1fr 1fr; gap:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .3s, transform .4s var(--ease), visibility 0s .3s; }
  .sub::before{ content:""; position:absolute; inset:-16px 0 auto; height:16px; }
  .has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.is-open .sub{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
  .has-sub:hover .sub-toggle svg, .has-sub.is-open .sub-toggle svg{ transform:rotate(180deg); }
  .sub__item{ display:grid; gap:10px; }
  .sub__img{ display:block; aspect-ratio:4/3; overflow:hidden; }
  .sub__img img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
  .sub__item:hover img{ transform:scale(1.06); }
  .sub__t{ font:500 15px/1.3 var(--f-body); color:var(--ink); display:flex; justify-content:space-between; align-items:baseline; padding-inline:2px; }
  .sub__t small{ font-weight:400; font-size:12.5px; color:var(--muted); }
  .hdr__tel{ width:auto; border:0; gap:8px; display:flex; font:500 15px/1 var(--f-body); color:var(--ink); }
  .hdr__tel span{ display:inline; }
  .hdr__cta{ display:inline-flex; min-height:44px; padding:0 20px; font-size:15px; }
  .hdr__menu{ display:none; }
}

/* ---------- 5. mobile navigation ---------- */
.mnav{ position:fixed; inset:0; z-index:90; background:var(--ink); color:var(--white); overflow-y:auto; overscroll-behavior:contain; }
.mnav[hidden]{ display:none; }
.mnav__plan{ position:absolute; inset-inline-end:-60px; bottom:120px; width:300px; opacity:.16; pointer-events:none; }
.mnav__plan path{ fill:none; stroke:var(--gold); stroke-width:1.2; }
.mnav__in{ position:relative; min-height:100%; padding:calc(var(--hdr) + 18px) var(--gut) calc(28px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; justify-content:space-between; gap:36px; }
.mnav__list > li{ border-bottom:1px solid rgba(255,253,249,.1); }
.mnav__list a, .mnav__row > a{ display:flex; align-items:baseline; gap:14px; padding:13px 0; font:300 clamp(28px, 8.4vw, 40px)/1.1 var(--f-display); letter-spacing:-.01em; }
.mnav__list a[aria-current]{ color:var(--gold-l); }
.mnav__n{ font:400 12px/1 var(--f-body); color:var(--gold); letter-spacing:.12em; min-width:22px; }
.mnav__row{ display:flex; align-items:center; justify-content:space-between; }
.mnav__exp{ width:44px; height:44px; display:grid; place-items:center; color:var(--gold); }
.mnav__exp svg{ width:22px; transition:transform .35s var(--ease); }
.mnav__exp[aria-expanded="true"] svg{ transform:rotate(180deg); }
.mnav__sub{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:4px 0 18px 36px; padding-inline:36px 0; }
.mnav__sub a{ display:grid; gap:8px; padding:0; font:400 15px/1.3 var(--f-body); }
.mnav__sub img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.mnav__sub small{ display:block; color:rgba(255,253,249,.6); font-size:12.5px; }
.mnav__foot{ display:grid; gap:4px; }
.mnav__c{ display:flex; align-items:center; gap:12px; min-height:44px; font:400 16px/1.2 var(--f-body); }
.mnav__c svg, .mnav__addr svg{ width:18px; height:18px; fill:var(--gold); flex:none; }
.mnav__addr{ display:flex; gap:12px; align-items:center; color:rgba(255,253,249,.7); font-size:15px; }
body.is-locked{ overflow:hidden; }

/* ---------- 6. hero + ArchitecturalSketchReveal ---------- */
.hero{ position:relative; padding-top:var(--hdr); }
.hero__stage{ position:relative; height:clamp(360px, calc(100svh - var(--hdr) - 232px), 640px); overflow:hidden; background:var(--paper-2); }
.sketch__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.sketch__svg{ position:absolute; inset:0; width:100%; height:100%; display:none; }
html.motion .sketch__svg{ display:block; animation:sk-fallback .6s ease 4.5s forwards; } /* if JS never takes over, the photo comes back */
html.motion .sketch.is-run .sketch__svg{ animation:none; }
@keyframes sk-fallback{ to{ opacity:0; visibility:hidden; } }
.sk-paper__fill{ fill:#FFFFFF; }
.sk-gridline{ stroke:rgba(47,50,54,.07); stroke-width:1; vector-effect:non-scaling-stroke; }
.sk-lines path{ fill:none; stroke:var(--ink); stroke-linecap:round; stroke-linejoin:round; }
.sk-lines .sk-guide path{ stroke:var(--gold); opacity:.75; }
.sk-lines .g-dash{ stroke-dasharray:3 7; }
.sk-lines .sk-light path{ stroke:var(--gold-d); }
html.motion .sk-lines{ opacity:0; } /* JS shows it once the dash offsets are set (no flash of finished lines) */
@media (max-width:899px){ .sketch__svg .d{ display:none; } }
.sketch__label{ position:absolute; inset-inline-start:var(--gut); top:14px; display:none; gap:8px; font:400 11.5px/1 var(--f-body); letter-spacing:.12em; color:var(--ink-soft); }
.sketch__label span + span::before{ content:"·"; margin-inline-end:8px; color:var(--gold); }
html.motion .sketch__label{ display:flex; opacity:0; }
.hero__credit{ position:absolute; inset-inline-end:12px; bottom:48px; padding:8px 12px; background:rgba(255,253,249,.9); font:400 12.5px/1 var(--f-body); color:var(--ink); }

.hero__card{ position:relative; z-index:2; margin:-36px var(--gut) 0; padding:22px 20px 22px; background:var(--white); box-shadow:0 30px 60px -40px rgba(47,50,54,.45); display:grid; gap:12px; }
.hero__h{ display:grid; gap:2px; color:var(--ink); }
.hero__name{ font:700 clamp(46px, 13.2vw, 96px)/.98 var(--f-display); letter-spacing:-.03em; }
.hero__role{ display:inline-flex; align-items:center; gap:12px; font:200 clamp(30px, 8.6vw, 54px)/1.05 var(--f-display); letter-spacing:-.01em; }
.hero__role i{ width:clamp(22px, 6vw, 46px); height:2px; background:var(--gold); }
.hero__sub{ font:400 15.5px/1.5 var(--f-body); color:var(--muted); }
.hero__sub b{ color:var(--gold); font-weight:300; margin-inline:4px; }
.hero__cta{ display:grid; grid-template-columns:1.3fr 1fr; gap:8px; margin-top:4px; }

@media (min-width:600px) and (max-width:899px){
  .hero__stage{ height:min(64svh, 640px); }
  .hero__card{ margin-inline:auto; width:min(560px, calc(100% - 2 * var(--gut))); padding:28px; }
}
@media (min-width:900px){
  .hero{ padding-bottom:72px; }
  .hero__stage{ height:calc(100svh - var(--hdr) - 24px); min-height:600px; max-height:940px; margin-inline:20px; }
  .sketch__label{ top:22px; inset-inline-start:28px; }
  .hero__credit{ inset-inline-end:28px; bottom:auto; top:22px; }
  .hero__card{ position:absolute; bottom:0; left:50%; width:min(600px, 44vw); margin:0; transform:translateX(-50%); padding:36px 40px 34px; gap:16px; }
  .hero__sub{ font-size:17px; }
  .hero__cta{ display:flex; }
}

/* ---------- 7. projects (ProjectReveal + layouts) ---------- */
.projects{ padding:var(--sec) 0; }
.shead{ display:grid; gap:14px; margin-bottom:36px; }
.shead__count{ display:flex; flex-wrap:wrap; gap:6px 18px; font:400 15px/1.4 var(--f-body); color:var(--muted); }
.shead__count a{ border-bottom:1px solid var(--gold-l); padding-bottom:2px; }
.shead__count a:hover{ color:var(--ink); border-color:var(--gold); }

.pr{ position:relative; aspect-ratio:var(--ar, 4/3); }
.pr__clip{ position:absolute; inset:0; overflow:hidden; background:var(--paper-2); }
.pr__clip img{ width:100%; height:100%; object-fit:cover; }
.pl__a{ display:block; }
.pl__a:hover .pr__clip img{ transform:scale(1.04); }
.pl__a .pr__clip img{ transition:transform 1.2s var(--ease); }
html.motion .pl__a .pr__clip img{ transition:none; } /* GSAP owns the transform */

.pmeta{ display:grid; gap:4px; margin-top:16px; }
.pmeta__t{ font:400 var(--t-h3)/1.2 var(--f-display); color:var(--ink); }
.pmeta__m{ display:flex; gap:14px; font:400 14px/1.4 var(--f-body); color:var(--muted); }
.pmeta__m span + span::before{ content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--gold); vertical-align:middle; margin-inline-end:14px; }

.pl{ margin-bottom:var(--s5); }
/* full: bleeds edge to edge on phones, frame sits inside */
.pl--full .pmeta{ padding-inline:var(--gut); }
/* duo: main + overlapping detail */
.pl--duo{ padding-inline:var(--gut); }
.pl__duo{ position:relative; padding-bottom:16%; }
.pr--main{ width:80%; }
.pr--detail{ position:absolute; inset-inline-end:0; bottom:0; width:46%; }
.pr--detail .pr__clip{ outline:6px solid var(--paper); }
/* rail */
.rail__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; }
.rail__label{ font:500 13px/1 var(--f-body); letter-spacing:.14em; color:var(--gold-d); }
.rail__count{ font:400 14px/1 var(--f-body); color:var(--muted); }
.rail__count b{ color:var(--ink); font-weight:500; }
.rail{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px var(--gut) 10px; scroll-padding-inline:var(--gut); scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.rail::-webkit-scrollbar{ display:none; }
.rail__item{ flex:0 0 76%; scroll-snap-align:start; }
.rail__bar{ margin-top:18px; }
.rail__bar span{ display:block; height:2px; background:var(--line); position:relative; overflow:hidden; }
.rail__bar span::after{ content:""; position:absolute; inset-block:0; inset-inline-start:0; width:100%; background:var(--gold); transform:scaleX(var(--p, .25)); transform-origin:right; transition:transform .2s; }
/* alt full: anchored to the start edge only, asymmetric */
.pl--alt .pr{ margin-inline-end:var(--gut); }
.pl--alt .pr__clip{ border-start-end-radius:0; }
.pl--alt .pmeta{ padding-inline:var(--gut) var(--gut); }
/* business band */
.pl--biz{ background:var(--ink); color:var(--white); padding:48px 0 52px; }
.pl__biz-head{ margin-bottom:22px; }
.pl__duo--biz{ display:grid; gap:40px; padding-inline:var(--gut); padding-bottom:0; }
.pl--biz .pr--main{ width:88%; }
.pl--biz .pr--detail{ position:relative; width:70%; margin-inline-start:auto; }
.pl--biz .pr--detail .pr__clip{ outline:0; }
.pl--biz .pmeta__t{ color:var(--white); }
.pl--biz .pmeta__m{ color:rgba(255,253,249,.65); }
.pl__more{ display:flex; justify-content:center; }

@media (min-width:900px){
  .shead{ grid-template-columns:1fr auto; align-items:end; margin-bottom:56px; }
  .shead .eyebrow{ grid-column:1 / -1; }
  .pl{ margin-bottom:var(--s6); }
  .pl--full{ max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; padding-inline:var(--gut); display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:end; }
  .pl--full .pl__a{ display:contents; }
  .pl--full .pr{ --ar:16/9 !important; }
  .pl--full .pmeta{ padding:0 0 12px; }
  .pl--duo .pl__a{ max-width:var(--max); margin-inline:auto; display:grid; grid-template-columns:7fr 5fr; gap:48px; align-items:start; }
  .pl--duo .pl__duo{ padding-bottom:12%; }
  .pl--duo .pr--main{ width:82%; }
  .pl--duo .pr--detail{ width:42%; }
  .pl--duo .pmeta{ margin-top:120px; }
  .rail{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; overflow:visible; max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; }
  .rail__count, .rail__bar{ display:none; }
  .pl--alt{ grid-template-columns:300px 1fr; }
  .pl--alt .pmeta{ order:-1; }
  .pl--alt .pr{ margin:0; --ar:21/10 !important; }
  .pl--biz{ padding:96px 0; }
  .pl__duo--biz{ max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; grid-template-columns:7fr 5fr; gap:56px; align-items:end; }
  .pl--biz .pr--main, .pl--biz .pr--detail{ width:100%; }
}

/* ---------- 8. footer ---------- */
.ftr{ background:var(--ink); color:rgba(255,253,249,.78); }
.ftr__cta{ border-bottom:1px solid rgba(255,253,249,.1); padding:64px 0 56px; }
.ftr__cta-in{ display:grid; gap:18px; }
.ftr__h{ font:700 clamp(32px, 8.4vw, 60px)/1.05 var(--f-display); color:var(--white); letter-spacing:-.02em; }
.ftr__h span{ font-weight:200; color:var(--gold-l); }
.ftr__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.ftr__grid{ display:grid; padding-block:48px 8px; }
.ftr__brand{ display:grid; gap:14px; padding-bottom:28px; }
.ftr__brand img{ width:120px; filter:invert(1); }
.ftr__contact{ display:grid; gap:8px; font-size:15px; }
.ftr__contact li{ display:flex; gap:10px; align-items:center; }
.ftr__contact svg{ width:16px; height:16px; fill:var(--gold); flex:none; }
.ftr__follow{ font:500 13px/1 var(--f-body); letter-spacing:.14em; color:var(--gold); margin-top:6px; }
.ftr__social{ display:flex; gap:18px; font-size:15px; }
.ftr__social a:hover, .fcol a:hover{ color:var(--gold-l); }
.fcol{ border-top:1px solid rgba(255,253,249,.12); }
.fcol summary{ display:flex; justify-content:space-between; align-items:center; min-height:56px; cursor:pointer; list-style:none; }
.fcol summary::-webkit-details-marker{ display:none; }
.fcol h2{ font:500 17px/1.2 var(--f-display); color:var(--white); }
.fcol summary svg{ width:20px; color:var(--gold); transition:transform .3s; }
.fcol[open] summary svg{ transform:rotate(180deg); }
.fcol ul{ display:grid; gap:2px; padding-bottom:18px; }
.fcol a{ display:block; padding:6px 0; font-size:15px; }
.ftr__legal{ display:grid; gap:8px; padding-block:22px 96px; border-top:1px solid rgba(255,253,249,.12); font-size:13px; color:rgba(255,253,249,.5); }
.ftr__legal ul{ display:flex; gap:18px; }
@media (min-width:900px){
  .ftr__cta-in{ grid-template-columns:1fr auto; align-items:end; }
  .ftr__cta .eyebrow{ grid-column:1 / -1; }
  .ftr__grid{ grid-template-columns:1.2fr 1fr 1.3fr 1.2fr; gap:40px; padding-block:64px 40px; }
  .fcol{ border:0; }
  .fcol summary{ pointer-events:none; min-height:0; margin-bottom:14px; }
  .fcol summary svg{ display:none; }
  .ftr__legal{ grid-template-columns:auto 1fr auto; align-items:center; padding-bottom:28px; }
  .ftr__legal p:nth-child(2){ text-align:center; }
}

/* ---------- 9. floating whatsapp ---------- */
.fab{ position:fixed; inset-inline-end:16px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:80; width:52px; height:52px; border-radius:50%; background:#25D366; display:grid; place-items:center;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45); transform:translateY(140%); transition:transform .5s var(--ease); }
.fab.is-on{ transform:none; }
.fab svg{ width:27px; height:27px; fill:#fff; }

/* ---------- 10. motion prep ---------- */
html.motion .hero__card .tl > span, html.motion .hero__cta, html.motion .hero__card .eyebrow, html.motion .hero__credit{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ---------- 11. ProjectReveal frame: four 1px lines drawn in sequence (transform only) ---------- */
.pr__frame{ position:absolute; inset:-7px; pointer-events:none; }
.pr__frame i{ position:absolute; background:var(--gold); }
.pr__frame .f-t, .pr__frame .f-b{ height:1px; inset-inline:-10px; }
.pr__frame .f-s, .pr__frame .f-e{ width:1px; inset-block:-10px; }
.pr__frame .f-t{ top:0; } .pr__frame .f-b{ bottom:0; }
.pr__frame .f-s{ inset-inline-start:0; } .pr__frame .f-e{ inset-inline-end:0; }
.pl--full .pr__frame{ inset:12px; }
@media (min-width:900px){ .pl--full .pr__frame{ inset:-7px; } }
.pl--biz .pr__frame i{ background:var(--gold-l); }

/* JS-failure safety: anything hidden for an intro comes back on its own */
html.motion .hero:not(.is-run) .hero__card .tl > span, html.motion .hero:not(.is-run) .hero__cta,
html.motion .hero:not(.is-run) .hero__card .eyebrow, html.motion .hero:not(.is-run) .hero__credit{ animation:show .4s ease 3s forwards; }
@keyframes show{ to{ opacity:1; } }

/* ---------- r2 fixes ---------- */
html{ overflow-x:clip; }
.hero, .projects, .ftr{ overflow-x:clip; }
@media (max-width:899px){
  .pl--alt .pr__frame{ inset:12px; }
  .pl--full .pr__frame .f-t, .pl--full .pr__frame .f-b, .pl--alt .pr__frame .f-t, .pl--alt .pr__frame .f-b{ inset-inline:-8px; }
}
/* desktop hero card enters with its copy (no empty white box during the drawing) */
html.motion .hero__card{ opacity:0; }
html.motion .hero:not(.is-run) .hero__card{ animation:show .4s ease 3s forwards; }
.mnav__sub[hidden]{ display:none; }
.mnav__plan{ bottom:auto; top:calc(100% - 220px); width:220px; inset-inline-end:-40px; opacity:.12; }
.mnav__in{ z-index:1; }
.fab.is-off{ transform:translateY(140%); }
@media (min-width:900px){ .pl--duo .pmeta{ margin-top:0; align-self:center; } }

/* ---------- r3: menu button on the right on phones/tablets; footer credits ---------- */
@media (max-width:1099px){
  .hdr__act{ order:-1; }
  .hdr__menu{ order:-1; }
  .hdr__logo{ margin-inline-end:0; margin-inline-start:auto; }
}
.ftr__credits{ display:flex; flex-wrap:wrap; gap:4px 10px; justify-content:center; }
.ftr__credits b{ font-weight:600; color:var(--gold-l); letter-spacing:.04em; }
.ftr__credits a:hover{ color:var(--gold-l); }
/* r4: new hero photo – keep the black island (centre) clear; the card sits over the counter run (left) */
@media (min-width:900px){
  .hero__card{ left:auto; transform:none; inset-inline-start:auto; inset-inline-end:clamp(40px, 4vw, 72px); width:min(500px, 36vw); }
  .hero__credit{ inset-inline-end:auto; inset-inline-start:28px; }
}

/* AP DESIGN credit */
.ap-credit{ display:grid; justify-items:center; gap:14px; text-align:center; padding-block:clamp(40px,5vw,72px) clamp(36px,4vw,56px); border-top:1px solid rgba(255,253,249,.12); color:var(--white); }
.ap-credit img{ width:clamp(120px,12vw,180px); height:auto; opacity:.92; transition:opacity .4s, transform .8s var(--ease); }
.ap-credit__k{ font:500 11px/1 var(--f-body); letter-spacing:.36em; text-transform:uppercase; color:rgba(255,253,249,.5); direction:ltr; }
.ap-credit__t{ font-size:13px; color:rgba(255,253,249,.6); }
.ap-credit:hover img{ opacity:1; transform:scale(1.03); }
@media (prefers-reduced-motion:reduce){ .ap-credit img{ transition:none; } .ap-credit:hover img{ transform:none; } }

/* =====================================================================
   HOME · Liraz · Services · Advantages · Process · FAQ · Contact
   ===================================================================== */
.shead--center{ justify-items:center; text-align:center; }
.shead--center .eyebrow::after{ content:""; width:28px; height:1px; background:currentColor; }
.h2--light{ color:var(--white); }
[data-fade]{ }

/* ---------- Liraz ---------- */
.lz{ background:var(--paper-2); padding:var(--sec) 0; overflow-x:clip; position:relative; }
.lz::before{ content:""; position:absolute; inset:0; background:
  linear-gradient(rgba(47,50,54,.05) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(47,50,54,.05) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 70%); mask-image:linear-gradient(to bottom, #000, transparent 70%); pointer-events:none; }
.lz__in{ position:relative; display:grid; gap:56px; }
.lz__media{ position:relative; width:84%; margin-inline:auto 4%; }
.lz__lines{ position:absolute; inset:-14px -14px -26px; width:calc(100% + 28px); height:calc(100% + 40px); overflow:visible; pointer-events:none; z-index:2; }
.lz-l{ fill:none; stroke:var(--gold); stroke-width:1; vector-effect:non-scaling-stroke; }
.lz-l--dim{ stroke:var(--ink-soft); opacity:.5; }
.lz-l--dash{ stroke-dasharray:3 6; opacity:.5; }
.lz__photo{ position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:999px 999px 0 0; background:var(--sand); }
.lz__photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 18%; }
.lz__side{ position:absolute; z-index:3; inset-inline-start:-14%; bottom:-34px; width:44%; background:var(--white); padding:6px 6px 10px; box-shadow:0 24px 44px -26px rgba(47,50,54,.55); }
.lz__side img{ aspect-ratio:1; object-fit:cover; width:100%; }
.lz__side figcaption{ font:400 11.5px/1.3 var(--f-body); color:var(--muted); margin-top:7px; }
.lz__txt{ display:grid; gap:16px; }
.lz__h{ font:700 clamp(46px, 13vw, 92px)/.95 var(--f-display); letter-spacing:-.03em; color:var(--ink); }
.lz__h small{ display:inline-block; font:200 clamp(24px, 6.6vw, 40px)/1.15 var(--f-display); letter-spacing:-.01em; margin-top:8px; }
.lz__lead{ font:500 15px/1.5 var(--f-body); color:var(--gold-d); }
.lz__lead b{ font-weight:300; margin-inline:4px; color:var(--gold); }
.lz__txt > p{ color:var(--text); }
.lz__q{ margin:4px 0; padding:4px 18px 4px 0; padding-inline:18px 0; border-inline-start:2px solid var(--gold); }
.lz__q p{ font:300 21px/1.5 var(--f-display); color:var(--ink); }
.lz__contact{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:15px; }
.lz__contact li{ display:flex; align-items:center; gap:8px; }
.lz__contact svg{ width:16px; height:16px; fill:var(--gold-d); }
.lz__cta{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:6px; }
.lz__sig{ width:86px; opacity:.8; }
@media (min-width:900px){
  .lz__in{ grid-template-columns:5fr 6fr; gap:clamp(56px, 8vw, 128px); align-items:center; }
  .lz__media{ width:auto; margin:0 0 0 40px; }
  .lz__side{ inset-inline-start:auto; inset-inline-end:-56px; width:42%; }
  .lz__q p{ font-size:25px; }
}

/* ---------- Services: original navy/white cards with gold line icons ---------- */
.svc{ padding:var(--sec) 0; }
.svc__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.svc__item{ min-width:0; }
.svc__item:last-child{ grid-column:1 / -1; }
.svc__card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; height:100%; min-height:212px; padding:28px 12px 24px;
  border:1px solid var(--ink); transition:transform .45s var(--ease), background .45s var(--ease); -webkit-tap-highlight-color:transparent; }
.svc__item--dark .svc__card{ background:var(--ink); color:var(--white); }
.svc__item--light .svc__card{ background:var(--white); color:var(--ink); border-color:rgba(47,50,54,.2); }
.svc__card::after{ content:""; position:absolute; inset-inline:18%; bottom:14px; height:1px; background:var(--gold); transform:scaleX(0); transition:transform .5s var(--ease); }
.svc__ic{ width:64px; height:64px; display:block; transition:transform .5s var(--ease); }
.svc-ic{ width:100%; height:100%; overflow:visible; }
.svc-ic path{ fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.svc__t{ font:400 22px/1.15 var(--f-display); letter-spacing:-.01em; }
.svc__note{ font:400 13px/1.4 var(--f-body); opacity:.7; max-width:22ch; }
.svc__go{ font:500 13px/1 var(--f-body); color:var(--gold); opacity:0; transform:translateY(6px); transition:opacity .35s, transform .45s var(--ease); }
.svc__go i{ font-style:normal; display:inline-block; transition:transform .45s var(--ease); }
/* touch: show the affordance, give instant press feedback */
@media (hover:none){ .svc__go{ opacity:1; transform:none; } }
.svc__card:active{ transform:scale(.97); }
/* 5th card: full width, horizontal composition */
.svc__item:last-child .svc__card{ flex-direction:row; justify-content:flex-start; text-align:start; min-height:0; padding:22px 22px; gap:18px; }
.svc__item:last-child .svc__card > :not(.svc__ic){ }
.svc__item:last-child .svc__t{ flex:1; }
.svc__item:last-child .svc__note{ display:none; }
.svc__item:last-child .svc__go{ align-self:center; }
@media (hover:hover){
  .svc__card:hover{ transform:translateY(-5px); }
  .svc__item--dark .svc__card:hover{ background:var(--ink-2); }
  .svc__item--light .svc__card:hover{ background:#F7F7F6; }
  .svc__card:hover::after, .svc__card:focus-visible::after{ transform:scaleX(1); }
  .svc__card:hover .svc__ic{ transform:translateY(-3px) rotate(-3deg); }
  .svc__card:hover .svc__go, .svc__card:focus-visible .svc__go{ opacity:1; transform:none; }
  .svc__card:hover .svc__go i{ transform:translateX(-4px); }
}
.svc__card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
@media (min-width:600px){ .svc__card{ min-height:240px; } }
@media (min-width:1000px){
  .svc__grid{ grid-template-columns:repeat(5, 1fr); gap:14px; }
  .svc__item:last-child{ grid-column:auto; }
  .svc__item:last-child .svc__card{ flex-direction:column; justify-content:center; text-align:center; padding:28px 12px 24px; gap:10px; min-height:280px; }
  .svc__item:last-child .svc__t{ flex:none; }
  .svc__item:last-child .svc__note{ display:block; }
  .svc__card{ min-height:280px; }
  .svc__ic{ width:72px; height:72px; }
}

/* ---------- Advantages (navy band, like the original dark section) ---------- */
.adv{ background:var(--ink); color:rgba(255,253,249,.82); padding:var(--sec) 0; overflow-x:clip; }
.adv__head{ display:grid; gap:18px; margin-bottom:44px; }
.adv__p{ max-width:62ch; font-size:16.5px; }
.adv__strip{ position:relative; }
.adv__list{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 var(--gut) 8px; scroll-padding-inline:var(--gut); scrollbar-width:none; }
.adv__list::-webkit-scrollbar{ display:none; }
.adv__it{ flex:0 0 64%; scroll-snap-align:start; display:grid; gap:8px; position:relative; padding-top:26px; }
.adv__it::before{ content:""; position:absolute; top:5px; inset-inline:0 -14px; height:1px; background:rgba(188,148,77,.5); }
.adv__it:last-child::before{ inset-inline-end:0; }
.adv__dot{ position:absolute; top:0; inset-inline-start:0; width:11px; height:11px; border-radius:50%; background:var(--ink); border:1px solid var(--gold); }
.adv__n{ font:400 12px/1 var(--f-body); color:var(--gold); letter-spacing:.12em; }
.adv__it h3{ font:300 26px/1.1 var(--f-display); color:var(--white); }
.adv__it figure{ margin-top:6px; }
.adv__it img{ aspect-ratio:3/4; object-fit:cover; width:100%; }
.adv__it figcaption{ font-size:12.5px; color:rgba(255,253,249,.55); margin-top:8px; }
.adv__cta{ margin-top:36px; }
@media (min-width:900px){
  .adv__head{ grid-template-columns:1fr 1fr; align-items:end; gap:24px 64px; }
  .adv__head .eyebrow{ grid-column:1 / -1; }
  .adv__list{ display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; overflow:visible; max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; }
  .adv__it:nth-child(even){ margin-top:56px; }
}

/* ---------- Process + HouseAssemblyScene ---------- */
.proc{ padding:var(--sec) 0; }
.proc__grid{ display:grid; gap:12px; }
.proc__stage{ position:sticky; top:calc(var(--hdr) + 8px); z-index:2; background:var(--paper); padding-bottom:10px; }
.house{ position:relative; aspect-ratio:600/440; max-height:40svh; margin-inline:auto; }
.house__svg{ width:100%; height:100%; overflow:visible; }
.house__real{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; }
.house__real img{ width:100%; height:100%; object-fit:cover; }
.house__real figcaption{ position:absolute; inset-inline-start:10px; bottom:10px; background:rgba(255,253,249,.92); padding:7px 10px; font:400 12px/1 var(--f-body); color:var(--ink); }
.house__tag{ position:absolute; inset-inline-end:0; top:-4px; font:400 11px/1 var(--f-body); letter-spacing:.1em; color:var(--muted); }
.hf-floor{ fill:#E6D9C6; } .hf-lwall{ fill:#ECE3D6; } .hf-bwall{ fill:#F4EEE5; }
.hf-window{ fill:#DDE6EA; } .hf-door{ fill:#D9CBB6; }
.hf-wood{ fill:#B98A5E; } .hf-wood2{ fill:#8E6440; } .hf-cab{ fill:#FFFFFF; }
.hf-brass{ fill:var(--gold); } .hf-rug{ fill:#EFE6D8; } .hf-art{ fill:#FFFFFF; stroke:var(--ink); stroke-width:1.2; }
.hf-navy{ fill:#BDB4A8; } .hf-navy2{ fill:#ADA397; } .hf-cognac{ fill:#B5703F; } .hf-cognac2{ fill:#A5622F; } .hf-pot{ fill:#C9B79E; }
.hl{ fill:none; stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.hl--soft{ stroke:rgba(47,50,54,.18); } .hl--wood{ stroke:#8E6440; } .hl--gold{ stroke:var(--gold); stroke-width:1.6; } .hl--light{ stroke:rgba(255,255,255,.35); } .hl--leaf{ stroke:#6F7B55; stroke-width:2.4; }
.hp{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linejoin:round; }
.hp--wall{ stroke-width:1.2; } .hp--dash{ stroke-dasharray:4 5; stroke:var(--gold-d); } .hp--dim{ stroke:var(--gold); stroke-width:1; }
.proc__steps{ display:grid; }
.pstep{ position:relative; padding:28px 0 32px; padding-inline-start:52px; border-top:1px solid var(--line); min-height:50svh; opacity:.38; transition:opacity .5s; }
.pstep.is-on{ opacity:1; }
.pstep__n{ position:absolute; inset-inline-start:0; top:26px; width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--gold); border-radius:50%; font:400 14px/1 var(--f-body); color:var(--gold-d); transition:background .4s, color .4s; }
.pstep.is-on .pstep__n{ background:var(--ink); color:var(--gold-l); border-color:var(--ink); }
.pstep h3{ font:400 var(--t-h3)/1.2 var(--f-display); color:var(--ink); margin-bottom:8px; }
.pstep p{ color:var(--muted); max-width:46ch; }
.pstep__docs{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; max-width:420px; }
.pstep__docs img{ aspect-ratio:4/3; object-fit:cover; width:100%; background:#fff; border:1px solid var(--line); }
.pstep__src{ font-size:12.5px !important; margin-top:8px; }
html:not(.motion) .pstep{ opacity:1; }
html:not(.motion) .house__real{ opacity:1; visibility:visible; position:relative; margin-top:12px; }
@media (min-width:900px){
  .proc__grid{ grid-template-columns:7fr 5fr; gap:64px; align-items:start; }
  .proc__stage{ top:calc(var(--hdr) + 7vh); padding:0; background:none; }
  .house{ max-height:none; }
  .pstep{ min-height:72vh; padding-top:36px; }
  .pstep:last-child{ min-height:60vh; }
}

/* ---------- FAQ ---------- */
.faq{ padding:var(--sec) 0; background:var(--paper-2); }
.faq__in{ display:grid; gap:32px; }
.faq__side{ display:grid; gap:14px; align-content:start; }
.faq__img{ display:none; }
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa summary{ display:grid; grid-template-columns:auto 1fr 28px; gap:14px; align-items:center; padding:20px 0; cursor:pointer; list-style:none; }
.qa summary::-webkit-details-marker{ display:none; }
.qa__n{ font:400 12px/1 var(--f-body); color:var(--gold-d); letter-spacing:.1em; }
.qa h3{ font:400 clamp(18px, 4.8vw, 23px)/1.35 var(--f-display); color:var(--ink); }
.qa__ic{ position:relative; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; transition:background .3s, border-color .3s; }
.qa__ic::before, .qa__ic::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.5px; margin:-.75px 0 0 -5.5px; background:var(--ink); transition:transform .4s var(--ease); }
.qa__ic::after{ transform:rotate(90deg); }
.qa[open] .qa__ic{ background:var(--ink); border-color:var(--ink); }
.qa[open] .qa__ic::before, .qa[open] .qa__ic::after{ background:var(--gold-l); }
.qa[open] .qa__ic::after{ transform:rotate(0); }
.qa summary:hover h3{ color:var(--gold-d); }
.qa__a{ overflow:hidden; }
.qa__a p{ padding:0 0 22px; padding-inline-start:30px; color:var(--text); max-width:60ch; }
@media (min-width:900px){
  .faq__in{ grid-template-columns:5fr 7fr; gap:80px; }
  .faq__img{ display:block; margin-top:20px; }
  .faq__img img{ aspect-ratio:4/5; object-fit:cover; width:78%; }
}

/* ---------- Contact section + form ---------- */
.cta{ position:relative; display:grid; }
.cta__img{ height:46svh; min-height:300px; }
.cta__img img{ width:100%; height:100%; object-fit:cover; }
.cta__card{ position:relative; margin:-64px var(--gut) var(--sec); padding:28px 20px; background:var(--white); box-shadow:0 30px 60px -40px rgba(47,50,54,.5); display:grid; gap:14px; }
@media (min-width:900px){
  .cta{ grid-template-columns:1fr 1fr; min-height:720px; }
  .cta__img{ height:auto; min-height:0; }
  .cta__card{ margin:72px 0; margin-inline-start:-7vw; margin-inline-end:var(--gut); padding:52px 56px; align-self:center; z-index:2; }
}
.cform{ display:grid; gap:14px; margin-top:6px; }
.cform__row{ display:grid; gap:14px; }
@media (min-width:600px){ .cform__row{ grid-template-columns:1fr 1fr; } }
.fld{ display:grid; gap:6px; }
.fld span{ font:500 13.5px/1 var(--f-body); color:var(--ink-soft); }
.fld input, .fld textarea{ width:100%; font:400 16px/1.4 var(--f-body); color:var(--text); background:var(--paper-2); border:1px solid transparent; border-bottom-color:rgba(47,50,54,.35); padding:13px 14px; border-radius:0; transition:border-color .25s, background .25s; }
.fld input[dir="ltr"]{ text-align:right; }
.fld input:focus, .fld textarea:focus{ outline:none; background:var(--white); border-color:var(--gold); }
.fld.is-bad input{ border-color:#B4432F; background:#FBF0EC; }
.hp-fld{ position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.cform__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.cform__foot .btn{ min-width:150px; }
.cform__note{ font-size:14px; color:var(--muted); }
.cform__msg{ font-size:15px; min-height:1.2em; }
.cform__msg.is-ok{ color:#3C6E47; } .cform__msg.is-err{ color:#B4432F; }
.cform.is-sending .btn{ opacity:.6; pointer-events:none; }
.cdet{ display:grid; gap:14px; }
.cdet li{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:center; }
.cdet svg{ width:40px; height:40px; padding:10px; border:1px solid var(--line); border-radius:50%; fill:var(--gold-d); }
.cdet span{ display:block; font:500 12.5px/1 var(--f-body); letter-spacing:.08em; color:var(--muted); margin-bottom:4px; }
.cdet a, .cdet p{ font:400 17px/1.3 var(--f-body); color:var(--ink); }

/* motion prep */
html.motion [data-fade]{ opacity:0; }
html.motion .lz__photo{ clip-path:inset(100% 0 0 0); }
html.motion .lz__side{ opacity:0; }

/* business band sits last, right above the footer */
.biz-band .pl--biz{ margin-bottom:0; border-bottom:1px solid rgba(255,253,249,.1); }
.pl__biz-more{ margin-top:36px; }
.cta__card{ margin-bottom:var(--sec); }

/* =====================================================================
   INNER PAGES · one system: phero / article+prose / archives / project / about / posts / recs / contact
   ===================================================================== */
.sr{ position:absolute; inset-inline-start:0; top:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ---------- breadcrumbs ---------- */
.crumbs ol{ display:flex; flex-wrap:wrap; gap:4px 0; font:400 13px/1.4 var(--f-body); color:var(--muted); }
.crumbs li + li::before{ content:"/"; margin-inline:8px; color:var(--gold); }
.crumbs a:hover{ color:var(--ink); }
.crumbs [aria-current]{ color:var(--ink); }

/* ---------- page hero variants ---------- */
.phero{ position:relative; padding:calc(var(--hdr) + 36px) 0 40px; background:var(--paper-2); overflow-x:clip; }
.phero::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(rgba(47,50,54,.05) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, rgba(47,50,54,.05) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent); mask-image:linear-gradient(to bottom, #000 30%, transparent); }
.phero__in{ position:relative; display:grid; gap:28px; }
.phero__txt{ display:grid; gap:16px; align-content:end; }
.phero__h{ font:700 clamp(38px, 10.6vw, 84px)/1 var(--f-display); letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.phero__h b{ font-weight:200; }
.phero__h--post{ font-weight:600; font-size:clamp(30px, 7.6vw, 56px); line-height:1.12; }
.phero__lead{ font:300 clamp(17px, 4.4vw, 21px)/1.55 var(--f-display); color:var(--ink-soft); max-width:56ch; }
.phero__img{ margin:0 calc(var(--gut) * -1); aspect-ratio:4/3; overflow:hidden; }
.phero__img img{ width:100%; height:100%; object-fit:cover; }
.phero--hub, .phero--arch{ padding-bottom:48px; }
@media (min-width:900px){
  .phero{ padding:calc(var(--hdr) + 72px) 0 72px; }
  .phero--img .phero__in, .phero--post .phero__in:has(.phero__img){ grid-template-columns:7fr 5fr; align-items:end; gap:64px; }
  .phero__img{ margin:0; aspect-ratio:4/5; }
  .phero__img--post{ aspect-ratio:4/3; }
}

/* ---------- article + prose ---------- */
.article{ display:grid; gap:40px; padding-block:48px var(--sec); }
.prose{ font:400 17px/1.85 var(--f-body); color:var(--text); min-width:0; }
.prose > * + *{ margin-top:1.05em; }
.prose h2{ font:600 clamp(24px, 6vw, 34px)/1.2 var(--f-display); color:var(--ink); letter-spacing:-.015em; margin-top:1.9em; padding-top:.4em; position:relative; scroll-margin-top:calc(var(--hdr) + 20px); }
.prose h2::before{ content:""; position:absolute; top:0; inset-inline-start:0; width:36px; height:2px; background:var(--gold); }
.prose h3{ font:600 21px/1.3 var(--f-display); color:var(--ink); margin-top:1.6em; }
.prose h4, .prose h5{ font:600 18px/1.4 var(--f-display); color:var(--ink); }
.prose a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:3px; }
.prose a:hover{ color:var(--gold-d); }
.prose strong{ font-weight:500; color:var(--ink); }
.prose ul, .prose ol{ display:grid; gap:10px; padding-inline-start:0; }
.prose ul > li{ position:relative; padding-inline-start:26px; }
.prose ul > li::before{ content:""; position:absolute; inset-inline-start:2px; top:.72em; width:12px; height:1px; background:var(--gold); }
.prose ol{ counter-reset:o; }
.prose ol > li{ counter-increment:o; position:relative; padding-inline-start:34px; }
.prose ol > li::before{ content:counter(o); position:absolute; inset-inline-start:0; top:.15em; width:24px; height:24px; border:1px solid var(--gold); border-radius:50%; font:400 12px/22px var(--f-body); text-align:center; color:var(--gold-d); }
.prose blockquote{ margin-inline:0; padding-inline-start:20px; border-inline-start:2px solid var(--gold); font:300 21px/1.55 var(--f-display); color:var(--ink); }
.prose .c-img{ margin-block:1.8em; }
.prose .c-img img{ width:100%; }
.prose .c-img--tall img{ max-height:80vh; width:auto; margin-inline:auto; }
.prose table{ width:100%; border-collapse:collapse; font-size:15px; display:block; overflow-x:auto; }
.prose td, .prose th{ border:1px solid var(--line); padding:8px 10px; }
.c-gal{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-block:1.8em; }
.c-gal .c-img{ margin:0; aspect-ratio:1; overflow:hidden; }
.c-gal .c-img:nth-child(5n+1){ grid-column:1 / -1; aspect-ratio:16/10; }
.c-gal .c-img a, .c-gal .c-img img{ display:block; width:100%; height:100%; object-fit:cover; }
.c-gal .c-img img{ transition:transform .9s var(--ease); }
.c-gal .c-img a:hover img{ transform:scale(1.04); }
.c-video{ position:relative; aspect-ratio:16/9; margin-block:1.8em; }
.c-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.prose--lead{ font-size:17.5px; }
.prose--light{ color:rgba(255,253,249,.82); }
.prose--light strong{ color:var(--white); }

.article__aside{ display:grid; gap:20px; align-content:start; }
.toc{ border:1px solid var(--line); padding:20px; background:var(--white); }
.toc__t, .fam__t, .side-card__t{ font:600 13px/1 var(--f-body); letter-spacing:.12em; color:var(--gold-d); margin-bottom:12px; }
.toc ol{ display:grid; gap:2px; counter-reset:t; }
.toc li{ counter-increment:t; }
.toc a{ display:grid; grid-template-columns:26px 1fr; padding:6px 0; font-size:15px; color:var(--ink); }
.toc a::before{ content:counter(t, decimal-leading-zero); font-size:12px; color:var(--gold-d); padding-top:3px; }
.toc a:hover, .toc a.is-on{ color:var(--gold-d); }
.side-card{ display:grid; gap:10px; padding:22px 20px; background:var(--ink); color:var(--white); }
.side-card__t{ color:var(--gold-l); }
.side-card .btn--line{ border-color:rgba(255,253,249,.35); color:var(--white); }
.fam{ padding:4px 0; }
.fam ul{ display:grid; }
.fam a{ display:block; padding:9px 0; border-bottom:1px solid var(--line); font-size:15px; }
.fam a:hover{ color:var(--gold-d); }
@media (min-width:900px){
  .article{ grid-template-columns:minmax(0, 1fr) 300px; gap:80px; padding-block:72px var(--sec); }
  .prose{ max-width:720px; }
  .article__aside{ position:sticky; top:calc(var(--hdr) + 24px); }
  .c-gal{ grid-template-columns:repeat(3, 1fr); }
  .c-gal .c-img:nth-child(5n+1){ grid-column:span 2; aspect-ratio:auto; }
}

/* ---------- children (planning stages etc.) + hubs ---------- */
.kids{ padding-bottom:var(--sec); }
.kids__list{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
.kid{ display:grid; gap:8px; }
.kid__img{ aspect-ratio:4/3; overflow:hidden; background:var(--white); border:1px solid var(--line); }
.kid__img img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.kid:hover img{ transform:scale(1.05); }
.kid__img--plan{ background:linear-gradient(rgba(47,50,54,.06) 1px, transparent 1px) 0 0/16px 16px, linear-gradient(90deg, rgba(47,50,54,.06) 1px, transparent 1px) 0 0/16px 16px, var(--white); }
.kid__n{ font:400 12px/1 var(--f-body); color:var(--gold-d); }
.kid__t{ font:400 18px/1.25 var(--f-display); color:var(--ink); }
@media (min-width:900px){ .kids__list{ grid-template-columns:repeat(4, 1fr); gap:24px; } }

.hub{ padding-block:40px var(--sec); }
.hub__list{ display:grid; gap:36px; }
.hub__a{ display:grid; gap:14px; }
.hub__img{ aspect-ratio:16/10; overflow:hidden; background:var(--white); }
.hub__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.hub__a:hover .hub__img img{ transform:scale(1.04); }
.hub__meta{ display:grid; grid-template-columns:auto 1fr; gap:2px 14px; align-items:baseline; }
.hub__n{ grid-row:span 2; font:400 13px/1 var(--f-body); color:var(--gold-d); }
.hub__t{ font:400 var(--t-h3)/1.2 var(--f-display); color:var(--ink); }
.hub__c{ font-size:14px; color:var(--muted); }
@media (min-width:900px){
  .hub__list{ grid-template-columns:repeat(12, 1fr); gap:72px 32px; }
  .hub__it{ grid-column:span 6; }
  .hub__it:nth-child(3n+1){ grid-column:span 7; }
  .hub__it:nth-child(3n+2){ grid-column:span 5; margin-top:80px; }
  .hub__it:nth-child(3n){ grid-column:3 / span 8; }
}

/* ---------- project strip ---------- */
.pstrip{ padding-bottom:var(--sec); }
.pstrip .wrap{ margin-bottom:16px; }
.pstrip__list{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:var(--gut); scroll-padding-inline:var(--gut); scrollbar-width:none; }
.pstrip__list::-webkit-scrollbar{ display:none; }
.pstrip__list li{ flex:0 0 72%; scroll-snap-align:start; }
.pstrip__list a{ display:grid; gap:10px; }
.pstrip__list img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.pstrip__list span{ font:400 18px/1.25 var(--f-display); color:var(--ink); }
@media (min-width:900px){ .pstrip__list{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:28px; max-width:calc(var(--max) + 2 * var(--gut)); margin-inline:auto; overflow:visible; } }

/* ---------- project archives ---------- */
.ptabs{ display:flex; flex-wrap:wrap; gap:8px; }
.ptabs::-webkit-scrollbar{ display:none; }
.ptabs a{ flex:none; display:flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border:1px solid var(--line); background:var(--white); font:500 15px/1 var(--f-body); color:var(--ink); }
.ptabs small{ font-size:12.5px; color:var(--muted); }
.ptabs a[aria-current]{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.ptabs a[aria-current] small{ color:var(--gold-l); }
.arch{ padding-block:44px var(--sec); }
.arch__list{ display:grid; gap:52px; }
.ac .pr{ --ar:4/3; }
.ac--wide .pr{ --ar:4/5; }
.ac--tall .pr{ --ar:3/4; }
.ac--offset{ width:86%; margin-inline-start:auto; }
@media (max-width:899px){
  .ac--wide{ margin-inline:calc(var(--gut) * -1); }
  .ac--wide .pr__frame{ inset:12px; }
  .ac--wide .pmeta{ padding-inline:var(--gut); }
  .ac--half:nth-child(odd of .ac--half){ width:92%; }
}
@media (min-width:900px){
  .arch__list{ grid-template-columns:repeat(12, 1fr); gap:96px 32px; }
  .ac--wide{ grid-column:1 / -1; } .ac--wide .pr{ --ar:21/9; }
  .ac--half{ grid-column:span 6; } .ac--half:nth-child(6n+3){ margin-top:120px; }
  .ac--offset{ grid-column:3 / span 8; width:auto; } .ac--offset .pr{ --ar:16/9; }
  .ac--tall{ grid-column:span 5; } .ac--tall:nth-child(6n){ grid-column:8 / span 5; margin-top:-80px; }
  .arch .pmeta__t{ font-size:30px; }
}

/* ---------- project page ---------- */
.prj-hero{ position:relative; background:var(--ink); color:var(--white); padding-top:var(--hdr); }
.prj-hero__img{ height:62svh; min-height:340px; overflow:hidden; }
.prj-hero__img img{ width:100%; height:100%; object-fit:cover; }
.prj-hero__txt{ display:grid; gap:16px; padding-block:28px 36px; }
.prj-hero .crumbs ol, .prj-hero .crumbs a{ color:rgba(255,253,249,.65); }
.prj-hero .crumbs [aria-current]{ color:var(--white); }
.prj-hero__h{ font:700 clamp(38px, 10.6vw, 88px)/1 var(--f-display); letter-spacing:-.03em; }
.prj-meta{ display:flex; flex-wrap:wrap; gap:14px 36px; border-top:1px solid rgba(255,253,249,.15); padding-top:18px; font-size:16px; }
.prj-meta span{ display:block; font:500 11.5px/1 var(--f-body); letter-spacing:.14em; color:var(--gold); margin-bottom:6px; }
@media (min-width:900px){
  .prj-hero__img{ height:calc(100svh - var(--hdr)); }
  .prj-hero__txt{ position:absolute; inset-inline:0; bottom:0; padding-block:120px 44px; background:linear-gradient(to top, rgba(20,26,38,.88), rgba(20,26,38,.5) 55%, transparent); }
}
.gal{ display:grid; gap:10px; padding-block:12px 72px; }
.grow{ display:grid; gap:10px; }
.grow--pair, .grow--trio{ grid-template-columns:1fr 1fr; }
.grow--trio .gimg:first-child{ grid-column:1 / -1; }
.gimg{ position:relative; overflow:hidden; background:var(--paper-2); aspect-ratio:3/2; }
.grow--pair .gimg, .grow--trio .gimg:not(:first-child){ aspect-ratio:4/5; }
.gimg--tall{ aspect-ratio:3/4 !important; }
.grow--full .gimg--tall{ aspect-ratio:3/4; max-width:640px; margin-inline:auto; width:100%; }
.gimg a, .gimg img{ display:block; width:100%; height:100%; }
.gimg img{ object-fit:cover; }
.gimg a{ cursor:zoom-in; }
.gimg--frame::after{ content:""; position:absolute; inset:10px; border:1px solid rgba(255,253,249,.0); transition:border-color .9s; pointer-events:none; }
.gimg--frame.is-drawn::after{ border-color:rgba(255,253,249,.7); }
@media (min-width:900px){
  .gal{ gap:16px; } .grow{ gap:16px; }
  .grow--full .gimg{ aspect-ratio:21/10; }
  .grow--pair .gimg{ aspect-ratio:4/3; }
  .grow--trio{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
  .grow--trio .gimg:first-child{ grid-column:1; grid-row:1 / span 2; aspect-ratio:auto; }
  .grow--trio .gimg:not(:first-child){ aspect-ratio:4/3; }
}
.pnav{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding-bottom:var(--sec); }
.pnav__a{ position:relative; display:block; aspect-ratio:1; overflow:hidden; background:var(--ink); }
.pnav__a img{ width:100%; height:100%; object-fit:cover; opacity:.6; transition:opacity .5s, transform 1.1s var(--ease); }
.pnav__a:hover img{ opacity:.45; transform:scale(1.05); }
.pnav__a span{ position:absolute; inset:auto 0 0; padding:16px; color:var(--white); font:400 18px/1.25 var(--f-display); }
.pnav__a small{ display:block; font:500 11.5px/1 var(--f-body); letter-spacing:.12em; color:var(--gold-l); margin-bottom:8px; }
.pnav__a--next span{ text-align:end; }
@media (min-width:900px){ .pnav{ gap:16px; } .pnav__a{ aspect-ratio:16/9; } .pnav__a span{ padding:32px; font-size:30px; } }

/* ---------- about ---------- */
.ab-hero{ background:var(--paper-2); padding:calc(var(--hdr) + 32px) 0 var(--sec); overflow-x:clip; }
.ab-hero__in{ display:grid; gap:64px; }
.ab-hero__txt{ display:grid; gap:18px; }
.ab-hero__h{ font:700 clamp(46px, 13vw, 100px)/.95 var(--f-display); letter-spacing:-.03em; color:var(--ink); }
.ab-hero__h small{ display:inline-block; font:200 clamp(28px, 7.6vw, 50px)/1.1 var(--f-display); }
.ab-hero__cta{ display:flex; flex-wrap:wrap; gap:10px; }
.ab-hero__media{ order:-1; }
@media (min-width:900px){ .ab-hero__in{ grid-template-columns:7fr 5fr; align-items:center; gap:96px; } .ab-hero__media{ order:0; margin:0 0 0 30px; } }
.ab-3d{ background:var(--ink); color:var(--white); padding:var(--sec) 0; overflow-x:clip; }
.ab-3d__head{ display:grid; gap:18px; margin-bottom:36px; }
.ab-3d__list{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding-inline:var(--gut); scroll-padding-inline:var(--gut); scrollbar-width:none; }
.ab-3d__list::-webkit-scrollbar{ display:none; }
.ab-3d__list li{ flex:0 0 82%; scroll-snap-align:start; }
.ab-3d__list img{ width:100%; aspect-ratio:1876/888; object-fit:cover; }
.ab-3d__note{ margin-top:14px; font-size:13px; color:rgba(255,253,249,.55); }
@media (min-width:900px){ .ab-3d__head{ grid-template-columns:1fr 1fr; gap:64px; align-items:end; } .ab-3d__head .eyebrow{ grid-column:1 / -1; } .ab-3d__list li{ flex-basis:44%; } }
.ab-pro{ display:grid; gap:28px; padding-block:var(--sec); }
@media (min-width:900px){ .ab-pro{ grid-template-columns:4fr 7fr; gap:96px; } }
.ab-steps{ background:var(--paper-2); padding:var(--sec) 0; }
.ab-steps__list{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-block:22px 32px; }
.ab-steps__list li{ display:grid; gap:10px; padding:18px; background:var(--white); border:1px solid var(--line); }
.ab-steps__n{ font:400 12px/1 var(--f-body); color:var(--gold-d); }
.ab-steps__list svg{ width:100%; max-width:140px; }
.ab-steps__list path{ fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linejoin:round; }
.ab-steps__list h3{ font:400 19px/1.25 var(--f-display); color:var(--ink); }
@media (min-width:900px){ .ab-steps__list{ grid-template-columns:repeat(4, 1fr); gap:24px; } }
.ab-q{ padding-block:var(--sec); display:grid; gap:24px; justify-items:start; }
.ab-q__list{ display:grid; gap:20px; width:100%; }
.ab-q blockquote{ margin:0; padding:26px 22px; background:var(--white); border-top:2px solid var(--gold); height:100%; display:grid; gap:14px; }
.ab-q blockquote p{ font:300 20px/1.5 var(--f-display); color:var(--ink); }
.ab-q footer{ font-size:14px; color:var(--muted); }
@media (min-width:900px){ .ab-q__list{ grid-template-columns:repeat(3, 1fr); gap:24px; } }

/* ---------- recommendations ---------- */
.recs{ padding-block:48px var(--sec); }
.recs__list{ display:grid; gap:20px; }
.rec{ display:grid; grid-template-columns:96px 1fr; gap:18px; padding:20px; background:var(--white); border:1px solid var(--line); align-items:start; }
.rec__letter{ display:block; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line); cursor:zoom-in; background:var(--paper); }
.rec__letter img{ width:100%; height:100%; object-fit:cover; object-position:50% 10%; transition:transform .8s var(--ease); }
.rec__letter:hover img{ transform:scale(1.05); }
.rec__body{ display:grid; gap:12px; }
.rec blockquote{ margin:0; font:300 19px/1.5 var(--f-display); color:var(--ink); }
.rec blockquote::before{ content:"“"; display:block; font:700 46px/.6 var(--f-display); color:var(--gold); margin-bottom:6px; }
.rec__hand{ font:300 19px/1.4 var(--f-display); color:var(--muted); }
.rec__name{ display:flex; flex-wrap:wrap; gap:4px 12px; font:500 15px/1.3 var(--f-body); color:var(--ink); }
.rec__name span{ font-weight:400; color:var(--muted); }
.recs__more{ margin-top:40px; max-width:720px; }
@media (min-width:900px){ .recs__list{ grid-template-columns:1fr 1fr; gap:24px; } .rec{ grid-template-columns:140px 1fr; padding:28px; } .rec blockquote{ font-size:22px; } }
.rec1{ display:grid; gap:28px; padding-block:48px var(--sec); justify-items:center; }
.rec1__q{ margin:0; max-width:760px; font:300 clamp(22px, 5.6vw, 34px)/1.45 var(--f-display); color:var(--ink); text-align:center; }
.rec1__img{ max-width:620px; width:100%; border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(47,50,54,.5); cursor:zoom-in; }
.rec1__img img{ width:100%; height:auto; }
.rec1__nav{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ---------- posts ---------- */
.psearch{ display:block; max-width:420px; }
.psearch input{ width:100%; min-height:50px; padding:0 18px; border:1px solid var(--line); background:var(--white); font:400 16px/1 var(--f-body); }
.psearch input:focus{ outline:none; border-color:var(--gold); }
.posts{ padding-block:44px var(--sec); }
.posts__list{ display:grid; gap:32px; }
.post-card a{ display:grid; gap:12px; }
.post-card__img{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--white); }
.post-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.post-card a:hover .post-card__img img{ transform:scale(1.04); }
.post-card__img--none{ display:grid; place-items:center; background:linear-gradient(rgba(47,50,54,.06) 1px, transparent 1px) 0 0/18px 18px, linear-gradient(90deg, rgba(47,50,54,.06) 1px, transparent 1px) 0 0/18px 18px, var(--white); border:1px solid var(--line); }
.post-card__img--none svg{ width:40%; } .post-card__img--none path{ fill:none; stroke:var(--gold); stroke-width:1.4; }
.post-card__meta{ display:flex; flex-wrap:wrap; gap:4px 14px; font:400 13px/1.3 var(--f-body); color:var(--muted); }
.post-card__meta b{ font-weight:500; color:var(--gold-d); }
.post-card__t{ font:500 clamp(19px, 5vw, 22px)/1.3 var(--f-display); color:var(--ink); text-wrap:balance; }
.post-card a:hover .post-card__t{ color:var(--gold-d); }
.post-card--big .post-card__t{ font-size:clamp(24px, 6.4vw, 38px); font-weight:600; }
.posts__empty{ padding:32px 0; color:var(--muted); }
@media (min-width:700px){ .posts__list{ grid-template-columns:1fr 1fr; gap:44px 28px; } .post-card--big{ grid-column:1 / -1; } }
@media (min-width:1000px){
  .posts__list{ grid-template-columns:repeat(3, 1fr); }
  .post-card--big a{ grid-template-columns:3fr 2fr; align-items:end; gap:40px; }
  .post-card--big .post-card__img{ grid-row:span 2; aspect-ratio:16/9; }
  .posts__list--press .post-card:nth-child(4n+1){ grid-column:span 2; }
  .posts__list--press .post-card:nth-child(4n+1) .post-card__img{ aspect-ratio:21/10; }
}
.post-src{ font:600 13px/1 var(--f-body); letter-spacing:.14em; color:var(--gold-d); }
.post-meta{ display:flex; flex-wrap:wrap; gap:4px 18px; font-size:14px; color:var(--muted); }
.related{ padding-bottom:var(--sec); display:grid; gap:20px; }

/* ---------- contact page ---------- */
.ct{ padding-top:calc(var(--hdr) + 32px); background:var(--paper-2); }
.ct__in{ display:grid; gap:40px; padding-bottom:56px; }
.ct__txt{ display:grid; gap:18px; align-content:start; }
.ct__form{ background:var(--white); padding:26px 20px; box-shadow:0 30px 60px -40px rgba(47,50,54,.45); }
.ct__map{ height:360px; filter:grayscale(.6) sepia(.15); }
.ct__map iframe{ width:100%; height:100%; border:0; }
@media (min-width:900px){ .ct__in{ grid-template-columns:5fr 6fr; gap:80px; padding-block:40px 96px; } .ct__form{ padding:44px; } .ct__map{ height:440px; } }

/* ---------- thanks / 404 ---------- */
.thanks{ min-height:70svh; display:grid; place-content:center; justify-items:center; text-align:center; gap:18px; padding-block:calc(var(--hdr) + 48px) 72px; }
.thanks svg{ width:140px; } .thanks path{ fill:none; stroke:var(--gold); stroke-width:1.4; }
.thanks__cta{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }

/* ---------- lightbox ---------- */
.lb{ position:fixed; inset:0; z-index:200; background:rgba(16,20,30,.96); display:grid; place-items:center; }
.lb[hidden]{ display:none; }
.lb__stage{ width:100%; height:100%; display:grid; place-items:center; padding:64px 12px 56px; overflow:hidden; }
.lb__img{ max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; transition:transform .35s var(--ease); user-select:none; }
.lb.is-zoom .lb__img{ transform:scale(2.2); cursor:zoom-out; }
.lb__x{ position:absolute; top:12px; inset-inline-end:12px; width:48px; height:48px; color:var(--white); font:200 34px/1 var(--f-display); }
.lb__nav{ position:absolute; top:50%; width:48px; height:64px; margin-top:-32px; color:var(--white); font:200 46px/1 var(--f-display); }
.lb__nav--prev{ inset-inline-start:6px; } .lb__nav--next{ inset-inline-end:6px; }
.lb.is-single .lb__nav, .lb.is-single .lb__count{ display:none; }
.lb__count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:rgba(255,253,249,.7); font-size:14px; }
@media (hover:none){ .lb__nav{ display:none; } }

/* ---------- safety: if GSAP never starts, nothing stays hidden ---------- */
html.motion:not(.gsap-on) [data-fade], html.motion:not(.gsap-on) .lz__side{ animation:show .4s ease 2.5s forwards; }
html.motion:not(.gsap-on) .lz__photo{ animation:unclip .6s ease 2.5s forwards; }
@keyframes unclip{ to{ clip-path:inset(0 0 0 0); } }
.ab-3d .prose br{ display:none; }
.ab-3d .prose br + *{ }

/* ---------- Google reviews ---------- */
.grev{ display:grid; gap:24px; justify-items:start; padding-block:48px 8px; }
.grev__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; width:100%; }
.grev__score{ display:inline-flex; align-items:center; gap:10px; padding:10px 16px; background:var(--white); border:1px solid var(--line); font-size:14px; color:var(--muted); }
.grev__score b{ font:700 22px/1 var(--f-display); color:var(--ink); }
.gstars{ color:var(--ink); letter-spacing:1px; font-size:15px; }
.grev__list{ display:grid; gap:16px; width:100%; }
.grev__it{ background:var(--white); border:1px solid var(--line); padding:22px 20px; display:grid; gap:16px; align-content:space-between; }
.grev__it blockquote{ margin:0; font:300 17.5px/1.65 var(--f-display); color:var(--ink); }
.grev__by{ display:flex; align-items:center; gap:12px; font-size:14px; color:var(--muted); }
.grev__by b{ display:block; font-weight:500; color:var(--ink); }
.grev__av{ width:38px; height:38px; flex:none; border-radius:50%; background:var(--ink); color:var(--white); display:grid; place-items:center; font:500 16px/1 var(--f-body); }
.recs__letters{ margin-bottom:18px; }
@media (min-width:900px){ .grev__list{ grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:24px; } .grev{ padding-top:72px; } }
html.a11y-contrast .gstars{ color:#000; }
/* project entrance sketch (Liraz 11.10) – only with motion; if JS never runs the photo comes back */
.prj-hero__img{ position:relative; }
.psk{ position:absolute; inset:0; width:100%; height:100%; display:none; pointer-events:none; }
html.motion .psk{ display:block; animation:sk-fallback .6s ease 4.5s forwards; }
html.motion .psk.is-run{ animation:none; }

/* =====================================================================
   Accessibility button + panel, and the effects it switches on
   ===================================================================== */
.a11y-btn{ position:fixed; z-index:95; inset-inline-start:0; top:50%; transform:translateY(-50%); width:44px; height:48px; display:grid; place-items:center;
  background:var(--ink); color:var(--white); border-start-end-radius:8px; border-end-end-radius:8px; box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.a11y-btn svg{ width:26px; height:26px; fill:currentColor; }
.a11y-btn:hover{ background:var(--ink-2); }
.a11y-btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.a11y-panel{ position:fixed; z-index:96; inset-inline-start:52px; top:50%; transform:translateY(-50%); width:min(320px, calc(100vw - 68px)); max-height:calc(100svh - 32px); overflow-y:auto;
  background:var(--white); color:var(--text); border:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(47,50,54,.45); padding:16px; }
.a11y-panel[hidden]{ display:none; }
.a11y-panel__h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.a11y-panel__h h2{ font:600 18px/1.2 var(--f-display); color:var(--ink); }
.a11y-x{ width:36px; height:36px; font:300 26px/1 var(--f-display); color:var(--ink); }
.a11y-size{ display:grid; grid-template-columns:44px 1fr 44px; align-items:center; gap:8px; padding:10px; background:var(--paper); margin-bottom:10px; }
.a11y-size button{ height:44px; background:var(--ink); color:var(--white); font:500 20px/1 var(--f-body); }
.a11y-size p{ text-align:center; font:500 14px/1.3 var(--f-body); }
.a11y-size p span{ display:block; font-size:12.5px; color:var(--muted); }
.a11y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.a11y-grid button{ min-height:64px; padding:10px 8px; background:var(--paper); border:1px solid transparent; font:500 14px/1.3 var(--f-body); color:var(--ink); display:grid; place-items:center; gap:4px; text-align:center; }
.a11y-grid button svg{ width:22px; height:22px; fill:none; stroke:var(--gold-d); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.a11y-grid button[aria-pressed="true"]{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.a11y-grid button[aria-pressed="true"] svg{ stroke:var(--gold-l); }
.a11y-panel button:focus-visible, .a11y-panel a:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.a11y-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; font-size:14px; }
.a11y-foot button{ min-height:40px; padding:0 14px; border:1px solid var(--ink); font:500 14px/1 var(--f-body); }
.a11y-foot a{ text-decoration:underline; text-underline-offset:3px; color:var(--ink); }

/* --- effects --- */
html.a11y-t1 :is(main, footer){ zoom:1.15; }
html.a11y-t2 :is(main, footer){ zoom:1.3; }
html.a11y-t3 :is(main, footer){ zoom:1.45; }
html.a11y-contrast{ --paper:#fff; --paper-2:#fff; --sand:#fff; --white:#fff; --text:#000; --muted:#111; --ink-soft:#000; --gold-d:#6B4A00; --line:rgba(0,0,0,.55); }
html.a11y-contrast body{ background:#fff; color:#000; }
html.a11y-contrast :is(.adv, .ftr, .side-card, .pl--biz, .ab-3d, .prj-hero, .mnav){ background:#000 !important; }
html.a11y-contrast :is(.adv, .ftr, .pl--biz, .ab-3d, .prj-hero) :is(p, li, a, h2, h3, span, figcaption){ color:#fff !important; }
html.a11y-contrast .btn--gold{ background:#000; color:#fff; }
html.a11y-contrast .svc__item--dark .svc__card{ background:#000; }
html.a11y-gray :is(main, footer, .hdr){ filter:grayscale(1); }
html.a11y-links a:not(.btn){ text-decoration:underline !important; text-decoration-thickness:2px !important; text-underline-offset:3px; }
html.a11y-links a:focus, html.a11y-links a:hover{ background:#FFF3B0; color:#000 !important; }
html.a11y-font *:not(svg):not(svg *){ font-family:Arial, "Helvetica Neue", sans-serif !important; letter-spacing:normal !important; }
html.a11y-spacing :is(p, li, dd, blockquote, .prose){ line-height:2.1 !important; letter-spacing:.03em !important; word-spacing:.12em; }
html.a11y-spacing p{ margin-bottom:.6em; }
html.a11y-cursor, html.a11y-cursor *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 11-7 1-3 7z' fill='%23000' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media print{ .a11y-btn, .a11y-panel{ display:none; } }

/* ---------- r5: Statuario marble texture on the light bands (relative URL works on Vercel and inside the WP plugin) ---------- */
.lz, .phero, .ab-hero, .ct{ background:#F6F3F0 url(../img/marble-neutral.webp) center / cover no-repeat; } /* 12.10: her pick – neutral white with soft brown veins */
.lz::before, .phero::before{ display:none; }
/* grey buttons: darker grey so white text keeps AA contrast */
.btn--gold{ background:var(--gold-d); }
.btn--gold:hover{ background:var(--ink-2); }
html.a11y-contrast .lz, html.a11y-contrast .phero, html.a11y-contrast .ab-hero, html.a11y-contrast .ct{ background-image:none; }
/* black & white accent: primary = black with white text; hover = white with black outline */
.btn--gold{ background:#141517; color:#fff; border-color:#141517; }
.btn--gold:hover{ background:#fff; color:#141517; }
.adv .btn--gold, .ftr .btn--gold, .side-card .btn--gold{ background:#fff; color:#141517; border-color:#fff; }
.adv .btn--gold:hover, .side-card .btn--gold:hover{ background:transparent; color:#fff; }
/* inside dark sections the accent flips to white (black on black would vanish) */
.adv, .ftr, .mnav, .svc__item--dark, .prj-hero, .side-card, .ab-3d, .pl--biz, .hdr.is-menu{ --gold:#FFFFFF; --gold-d:#FFFFFF; --gold-l:#FFFFFF; }
.adv .adv__it::before{ background:rgba(255,255,255,.35); }
.adv .adv__dot{ background:var(--ink); border-color:#fff; }
.svc__item--dark .svc__note{ opacity:.75; }
.hdr.is-menu .hdr__menu{ background:#fff; color:#141517; }
.hdr.is-menu .hdr__menu-lines i{ background:#141517; }

/* ---------- r6: close the empty areas on desktop ---------- */
@media (min-width:900px){
  :root{ --sec:96px; }
  .pl{ margin-bottom:72px; }
  /* Ashdod: main + overlapping detail, caption right under the photos (no empty side column) */
  .pl--duo .pl__a{ display:block; max-width:var(--max); margin-inline:auto; }
  .pl--duo .pl__duo{ padding-bottom:7%; }
  .pl--duo .pr--main{ width:68%; --ar:16/10 !important; }
  .pl--duo .pr--detail{ width:34%; bottom:0; }
  .pl--duo .pmeta{ margin-top:20px; }
  /* full-width projects: caption column tighter */
  .pl--full{ grid-template-columns:1fr 240px; gap:32px; }
  .pl--alt{ grid-template-columns:240px 1fr; }
  /* process: shorter steps, inactive steps readable */
  .pstep{ min-height:46vh; padding-top:28px; padding-bottom:24px; }
  .pstep:last-child{ min-height:40vh; }
  .proc__stage{ top:calc(var(--hdr) + 4vh); }
  .proc .shead{ margin-bottom:28px; }
}
.pstep{ opacity:.55; }
.pstep.is-on{ opacity:1; }

/* ---------- r7 (Liraz 11.10): calmer proportions + a symmetric projects grid with no holes ---------- */
.hero__name{ font-size:clamp(36px, 9.6vw, 66px); font-weight:600; letter-spacing:-.02em; }
.hero__role{ font-size:clamp(22px, 6vw, 36px); }
.lz__h{ font-size:clamp(36px, 9.6vw, 62px); font-weight:600; }
.lz__h small{ font-size:clamp(20px, 5.4vw, 30px); }
.ab-hero__h{ font-size:clamp(38px, 10vw, 68px); font-weight:600; }
.ab-hero__h small{ font-size:clamp(22px, 6vw, 36px); }
.phero__h, .prj-hero__h{ font-size:clamp(32px, 8.4vw, 60px); font-weight:600; }
.h2{ font-size:clamp(30px, 7.8vw, 54px); }
.ftr__h{ font-size:clamp(28px, 7vw, 46px); }
/* archive: every card the same – 1 / 2 / 3 columns, 12 projects = full rows */
.arch__list{ display:grid; grid-template-columns:1fr; gap:40px; }
.arch__list .ac{ grid-column:auto !important; width:auto !important; margin:0 !important; }
.arch__list .ac .pr{ --ar:4/3 !important; }
.arch__list .ac .pr__frame{ inset:-7px !important; }
.arch__list .ac .pmeta{ padding-inline:0 !important; }
.arch .pmeta__t{ font-size:clamp(20px, 5vw, 24px) !important; }
@media (min-width:600px){ .arch__list{ grid-template-columns:repeat(2, 1fr); gap:48px 24px; } }
@media (min-width:1000px){ .arch__list{ grid-template-columns:repeat(3, 1fr); gap:56px 28px; } }
/* 13 projects: the first one is a wide feature card, the other 12 fill full rows (2 or 3 per row) */
@media (min-width:600px){
  .arch__list .ac:first-child{ grid-column:1 / -1 !important; }
  .arch__list .ac:first-child .pr{ --ar:21/9 !important; }
  .arch__list .ac:first-child .pmeta__t{ font-size:clamp(24px, 3vw, 32px) !important; }
}
/* 12.10 (Amir + Liraz): a smaller white hero card on phones */
@media (max-width:599px){
  .hero__card{ margin:-28px calc(var(--gut) + 14px) 0; padding:16px 16px 18px; gap:8px; }
  .hero__card .eyebrow{ font-size:11.5px; letter-spacing:.14em; }
  .hero__h{ font-size:16px; line-height:1; gap:6px; }
  .hero__h .tl{ display:block; }
  .hero__name{ font-size:clamp(30px, 8.4vw, 40px); }
  .hero__role{ font-size:clamp(19px, 5.2vw, 24px); gap:10px; }
  .hero__sub{ font-size:13.5px; line-height:1.45; }
  .hero__cta .btn{ min-height:44px; padding-block:10px; font-size:15px; }
}