/* =======================================================================
   יובל הנדסה
   One family, Heebo, nine weights. Paper ground, navy fields, cyan is the
   single action and active ink. Hairlines only: no radius, no shadow, no
   cards. RTL is structural, not a translation layer.
   ======================================================================= */
:root{
  color-scheme:light;
  /* project imagery is softened; everything structural stays square */
  --r-card:10px;
  --paper:#F1F2F0;
  --sheet:#FFFFFF;
  --ink:#11192D;
  --ink-rgb:17,25,45;
  --ink-2:#4A5468;    /* 7.4:1 on paper */
  --ink-3:#646D7C;    /* 4.7:1 on paper */
  --rule:rgba(17,25,45,.17);
  --rule-2:rgba(17,25,45,.10);
  --navy:#233358;   /* lightened 5 Oct; white 12.5:1, .78 white 8.2:1, cyan 4.2:1 on it */
  --cyan:#009FE3;     /* fills and active marks only, never text on paper */
  --on-cyan:#11192D;  /* 5.89:1 on cyan; the lighter navy would be 4.19 */
  --cyan-bright:#1FB0EE;  /* cyan as SMALL text on a dark field; brand cyan is 4.19 there */
  --link:#00719E;     /* 4.85:1 on paper */
  --on-navy-2:rgba(255,255,255,.78);
  --on-navy-3:rgba(255,255,255,.56);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:72px; --s9:104px; --s10:144px;
  --sans:Heebo,"Noto Sans Hebrew",system-ui,sans-serif;
  --pad:clamp(20px,4.5vw,44px);
  --maxw:1440px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms; --t-mid:340ms; --t-slow:620ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0; direction:rtl; text-align:right; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:16.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased; touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(var(--ink-rgb),.12);
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;font-variant-numeric:inherit}

/* browser surfaces, themed rather than inherited */
::selection{background:var(--cyan);color:var(--on-cyan)}
:focus-visible{outline:2.5px solid var(--cyan);outline-offset:2px}
html{scrollbar-color:var(--ink-3) var(--paper);scrollbar-width:thin;caret-color:var(--link)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink-3);border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--navy)}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.n{direction:ltr;unicode-bidi:isolate;text-align:right}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;right:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:100}
.skip:focus{right:var(--pad);top:8px}

h1,h2,h3{font-weight:800;letter-spacing:-.045em;line-height:1.13;text-wrap:balance;margin:0}
h1 em,h2 em,h3 em{font-style:normal;color:var(--link)}
.cta h2 em,.panel h1 em{color:var(--cyan)}
/* ---- legal pages: one column of prose, same voice as the rest ---- */
.legal{max-width:70ch;margin-inline:auto;padding-inline:var(--pad);
  padding-block:clamp(48px,6vw,96px) clamp(56px,7vw,110px)}
.legal h1{font-size:clamp(32px,4vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.06;
  margin:0 0 clamp(20px,2.4vw,30px)}
.legal h2{font-size:clamp(19px,1.7vw,23px);font-weight:800;letter-spacing:-.025em;
  margin:clamp(30px,3.4vw,44px) 0 10px;padding-top:clamp(20px,2.2vw,28px);
  border-top:1px solid var(--rule-2)}
.legal h2:first-of-type{border-top:0;padding-top:0}
.legal p,.legal li{font-size:16.5px;line-height:1.78;color:var(--ink-2);margin:0 0 14px}
.legal strong{color:var(--ink);font-weight:700}
.legal ul,.legal ol{margin:0 0 14px;padding-inline-start:0;padding-inline-end:20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{text-decoration-thickness:2px}
.legal time{font-variant-numeric:tabular-nums}

h1{font-size:clamp(30px,3.6vw,50px)}
h2{font-size:clamp(24px,2.5vw,34px)}
h3{font-size:clamp(19px,1.6vw,22px);letter-spacing:-.03em;line-height:1.25}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(17px,1.35vw,19.5px);line-height:1.6;font-weight:400;color:var(--ink)}
.sub{color:var(--ink-2);max-width:68ch}
.tiny{font-size:11.5px;letter-spacing:.17em;font-weight:700;color:var(--ink-3);margin:0}

/* ---------------- progress + header ---------------- */
.prog{position:fixed;top:0;right:0;left:0;height:2px;background:var(--cyan);z-index:60;
  transform:scaleX(0);transform-origin:right;transition:transform 90ms linear;will-change:transform}
header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule);
  transition:background var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease)}
header .logo img,.main a,.main .tel,.burger{transition:color var(--t-fast) var(--ease),
  filter var(--t-mid) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
body.over header{background:none;border-bottom-color:transparent}
body.over header:before{content:'';position:absolute;top:0;right:0;left:0;height:104px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(var(--ink-rgb),.88) 0,
    rgba(var(--ink-rgb),.84) 62%,rgba(var(--ink-rgb),0) 100%)}
.hd{position:relative;z-index:1}
body.over .logo img{filter:brightness(0) invert(1)}
body.over .main a{color:#fff}
body.over .main .tel{border-color:rgba(255,255,255,.62);color:#fff}
body.over .main .tel:hover{background:#fff;color:var(--navy);border-color:#fff}
body.over .burger{border-color:#fff;color:#fff}
.hd{height:66px;display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.logo img{height:29px;width:auto}
.main{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.main a{font-size:14.5px;font-weight:500;padding:6px 0;position:relative;color:var(--ink)}
.main a:after{content:'';position:absolute;right:0;left:0;bottom:-2px;height:2px;background:var(--cyan);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-fast) var(--ease)}
.main a:hover:after{transform:scaleX(1)}
.main a[aria-current="page"]{font-weight:700}
.main a[aria-current="page"]:after{transform:scaleX(1)}
.main .tel{padding:9px 17px;border:1.5px solid var(--ink);font-weight:700;font-size:13.5px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.main .tel:after{display:none}
.main .tel:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.burger{display:none;background:none;border:1.5px solid var(--ink);padding:8px 15px;font-size:13.5px;font-weight:700;cursor:pointer}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--navy);color:#fff;
  padding:14px 26px;font-size:14.5px;font-weight:700;border:1.5px solid var(--navy);cursor:pointer;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.btn:after{content:'←';color:var(--cyan);transition:transform var(--t-fast) var(--ease)}
.btn:hover{background:#1B2740}
.btn:hover:after{transform:translateX(-4px)}
.btn:active{background:#0A1223}
.btn.ghost{background:none;color:var(--ink);border-color:var(--ink)}
.btn.ghost:after{color:var(--link)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.ghost:hover:after{color:var(--cyan)}
.btn[aria-busy="true"]{opacity:.62;pointer-events:none}
.btn[disabled]{background:none;color:var(--ink-3);border-color:var(--rule);pointer-events:none}
.btn[disabled]:after{color:var(--ink-3)}

/* ---------------- home opening: the approved composition ---------------- */
.opening{position:relative;margin-top:-67px}
.shot{position:relative;height:100vh;min-height:620px;max-height:1000px;overflow:hidden;background:var(--navy)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--t-slow) var(--ease);transform-origin:60% 45%}
.shot img.on{opacity:1}
.shot img.kb-in{animation:kbin 7900ms linear forwards}
.shot img.kb-out{animation:kbout 7900ms linear forwards}
@keyframes kbin{from{transform:scale(1.0) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(1.2%,-1%,0)}}
@keyframes kbout{from{transform:scale(1.11) translate3d(-1.2%,1%,0)}to{transform:scale(1.0) translate3d(0,0,0)}}
.shot-ui{position:absolute;left:var(--pad);bottom:86px;z-index:3;display:flex;align-items:center;gap:14px}
.pausebtn{width:34px;height:34px;border:1.5px solid rgba(255,255,255,.55);background:rgba(var(--ink-rgb),.34);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;font-size:10.5px;line-height:1;
  cursor:pointer;display:grid;place-items:center;padding:0;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.pausebtn:hover{background:#fff;color:var(--navy);border-color:#fff}
.ticks{display:flex;gap:7px}
.ticks i{display:block;width:36px;height:3px;background:rgba(255,255,255,.32);position:relative;overflow:hidden}
.ticks i span{position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:right;display:block}
.ticks i.on span{animation:tick 7000ms linear forwards}
.ticks i.done span{transform:scaleX(1);background:rgba(255,255,255,.62)}
@keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.shot .scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to left,rgba(var(--ink-rgb),.86) 0,rgba(var(--ink-rgb),.66) 30%,
      rgba(var(--ink-rgb),.30) 58%,rgba(var(--ink-rgb),.04) 100%),
    linear-gradient(to bottom,rgba(var(--ink-rgb),.14) 0,rgba(var(--ink-rgb),.02) 18%,
      rgba(var(--ink-rgb),.02) 48%,rgba(var(--ink-rgb),.30) 78%,rgba(var(--ink-rgb),.88) 100%)}
.say{position:absolute;inset:66px 0 0;display:flex;align-items:center;pointer-events:none}
.lede{pointer-events:auto;max-width:min(790px,88%);color:#fff;
  text-shadow:0 2px 26px rgba(0,0,0,.42),0 1px 3px rgba(0,0,0,.28)}
.lede h1{font-size:clamp(33px,5vw,72px);line-height:1.055;letter-spacing:-.05em}
.lede h1 span{display:block;font-weight:300}
.lede h1 em{display:block;font-style:normal;font-weight:800;margin-top:.05em}
.lede p{margin:clamp(20px,2vw,30px) 0 clamp(26px,2.6vw,36px);font-weight:300;
  font-size:clamp(16px,1.28vw,19px);line-height:1.6;color:rgba(255,255,255,.92);max-width:50ch}
.btn.hollow{background:none;border-color:rgba(255,255,255,.72);color:#fff}
.btn.hollow:after{color:var(--cyan)}
.btn.hollow:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn.hollow:hover:after{color:var(--navy)}
.shotcap{position:absolute;right:var(--pad);bottom:88px;margin:0;color:#fff;font-size:12.5px;z-index:2;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.shotcap b{font-weight:700}
.shotcap a:hover{color:var(--cyan)}
.sectors{position:absolute;right:0;left:0;bottom:0;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);
  background:none;border-top:1px solid rgba(255,255,255,.32);
  padding-inline:calc(var(--pad) - 22px)}
.sector{padding:16px 22px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:0;border-left:1px solid rgba(255,255,255,.16);background:none;color:#fff;cursor:pointer;
  text-align:right;transition:background var(--t-fast) var(--ease)}
.sector:last-child{border-left:0}
.sector b{font-size:14.5px;font-weight:700;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.sector b .sm{display:none}
.sector i{font-style:normal;font-size:15px;color:var(--cyan);opacity:.45;
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
.sector:hover i{transform:translateX(-4px);opacity:1}
.sector:hover{background:rgba(255,255,255,.10)}
.sector{position:relative;color:rgba(255,255,255,.62)}
.sector:before{content:'';position:absolute;top:0;right:0;left:0;height:3px;background:var(--cyan);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-mid) var(--ease-out)}
.sector[aria-selected="true"]{color:#fff;background:rgba(255,255,255,.07)}
.sector[aria-selected="true"]:before{transform:scaleX(1)}
.sector[aria-selected="true"] i{opacity:1}
@media (prefers-reduced-motion:reduce){.shot img{transition:none}
  .shot img.kb-in,.shot img.kb-out{animation:none}.ticks i span{animation:none}}

/* ---------------- blocks ---------------- */
.blk{padding-block:clamp(48px,6vw,92px);border-bottom:1px solid var(--rule)}
.blk:last-child{border-bottom:0}
.hdr{margin-bottom:clamp(28px,3.4vw,46px);max-width:none;display:flex;align-items:flex-end;
  justify-content:space-between;gap:clamp(20px,4vw,56px);flex-wrap:wrap}
.hdr h1,.hdr h2{flex:0 1 640px}
.hdr p{flex:0 1 420px;color:var(--ink-2);margin:0;font-size:16px}
.hdr.solo{display:block}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px)}

/* ---------------- service coverage ---------------- */
.cover{border-top:1.5px solid var(--ink);padding-top:clamp(26px,3vw,40px)}
.svcgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
/* the home page's four services: a name, when it runs, and the phase diagram.
   One line each, so the whole offering is legible in a single glance and the
   button under it carries the reader to the full text. */
.svcgrid.lean{grid-template-columns:1fr;gap:0;background:none}
.svcgrid.lean .svctile{display:grid;align-items:center;
  grid-template-columns:minmax(170px,.9fr) 1.5fr auto;gap:clamp(14px,2.2vw,38px);
  padding:clamp(15px,1.6vw,22px) clamp(18px,2vw,30px);
  border-bottom:1px solid var(--rule-2)}
.svcgrid.lean .svctile:last-child{border-bottom:0}
.svcgrid.lean .svctile h3{font-size:clamp(16.5px,1.45vw,20px);margin:0}
.svcgrid.lean .svctile p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3);max-width:none}
.svcgrid.lean .svcfoot{margin:0;padding:0;border-top:0;justify-content:flex-end}
@media (max-width:820px){
  .svcgrid.lean .svctile{grid-template-columns:1fr auto;gap:6px clamp(12px,3vw,20px)}
  .svcgrid.lean .svctile p{grid-column:1;font-size:13.5px}
  .svcgrid.lean .svcfoot{grid-column:2;grid-row:1 / span 2}
}

.svctile{background:var(--sheet);padding:clamp(26px,2.8vw,42px);display:flex;flex-direction:column}
.svctile h2,.svctile h3{font-size:clamp(20px,1.9vw,26px);font-weight:800;letter-spacing:-.03em;
  line-height:1.15;margin:0 0 14px}
.svctile p{margin:0 0 auto;font-size:14.5px;line-height:1.72;color:var(--ink-2);max-width:46ch}
.svcfoot{margin-top:clamp(24px,2.6vw,34px);padding-top:15px;border-top:1px solid var(--rule-2);
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.svcwhen{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.dots{display:inline-flex;gap:3px}
.dots i{display:block;width:22px;height:7px;background:rgba(17,25,45,.13);position:relative}
.dots i.on{background:var(--navy)}
.dots i.par{background:none;box-shadow:inset 0 0 0 1.5px var(--link)}
.dots i span{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;
  clip:rect(0 0 0 0);clip-path:inset(50%)}   /* clip is deprecated; clip-path is the live one */
.cover-note{font-size:13px;color:var(--ink-3);margin:var(--s5) 0 0}

/* ---------------- project plates ---------------- */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:none;padding-inline:var(--pad)}
/* the imagery needs air before the dark band starts; without it the last row
   of tiles and the call to action read as one block */
.plates + .cta,
.gal + .cta{margin-top:clamp(44px,5.5vw,80px)}
/* one row of four, all equal; the mosaic with a lead tile lives on the
   projects page, where there are fifteen to give it rhythm */
#plates-home .plate figure{aspect-ratio:4/3}
.plate{display:block;background:var(--paper);position:relative;overflow:hidden;
  border-radius:var(--r-card)}
.plate figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--navy);position:relative;
  border-radius:var(--r-card)}
.plate img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--t-slow) var(--ease-out),filter var(--t-mid) var(--ease)}
.plate:hover img{transform:scale(1.045)}
.plate .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);font-size:13px;border:1px dashed var(--rule);
  background:repeating-linear-gradient(135deg,rgba(var(--ink-rgb),.04) 0 6px,transparent 6px 14px)}
.plate .bar{position:absolute;right:0;left:0;bottom:0;display:block;padding:56px 20px 18px;color:#fff;
  background:linear-gradient(to top,rgba(var(--ink-rgb),.92) 0,rgba(var(--ink-rgb),.62) 46%,rgba(var(--ink-rgb),0) 100%);
  transition:transform var(--t-mid) var(--ease-out),opacity var(--t-mid) var(--ease)}
.plate .bar b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.plate .bar s{text-decoration:none;display:block;font-size:12.5px;color:var(--on-navy-2);margin-top:3px}
.plate .veil{position:absolute;inset:0;border-radius:var(--r-card);
  background:rgba(var(--ink-rgb),.88);color:#fff;   /* .60 was unreadable over a bright photograph */
  backdrop-filter:blur(14px) saturate(.85);-webkit-backdrop-filter:blur(14px) saturate(.85);
  padding:clamp(16px,1.5vw,24px);display:flex;flex-direction:column;justify-content:flex-start;
  gap:12px;overflow:hidden;opacity:0;transition:opacity var(--t-mid) var(--ease)}
.plate .veil>b{font-size:clamp(14.5px,1.15vw,17px);font-weight:700;line-height:1.3;letter-spacing:-.02em;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.plate .veil dd,.plate .veil dt,.plate .veil .go{text-shadow:0 1px 10px rgba(0,0,0,.5)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .plate .veil{background:rgba(var(--ink-rgb),.94)}}
.plate .veil dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;align-content:start;
  border-top:1px solid rgba(255,255,255,.42);padding-top:12px}
.plate .veil dt{font-size:10px;letter-spacing:.12em;font-weight:700;color:rgba(255,255,255,.78);
  white-space:nowrap;align-self:center}
.plate .veil dd{margin:0;font-size:12.5px;font-weight:500;line-height:1.35}
.plate .veil .go{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;color:var(--cyan-bright);
  display:flex;align-items:center;gap:8px}
.plate .veil .go:after{content:'←';transition:transform var(--t-fast) var(--ease)}
.plate:hover .veil,.plate:focus-visible .veil{opacity:1}
.plate:hover .veil .go:after{transform:translateX(-5px)}
.plate:hover .bar,.plate:focus-visible .bar{opacity:0;transform:translateY(10px)}
.plate .meta{display:none}
.plate:hover .bar,.plate:focus-visible .bar{opacity:0}
.plate .st{padding:2px 9px;border:1px solid rgba(255,255,255,.42);color:#fff;font-weight:700;font-size:11.5px}
.plate .st.live{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan)}
.plate .st.plan{border-style:dashed}
@media (hover:none){.plate .veil{display:none}}
@media (prefers-reduced-motion:reduce){.plate .bar,.plate .veil{transition:none}}
.plate:after{content:'';position:absolute;inset:0;border-radius:var(--r-card);
  border:2px solid transparent;pointer-events:none;
  transition:border-color var(--t-fast) var(--ease)}
.plate:hover:after{border-color:var(--navy)}

.hdr.center{display:block;text-align:center;max-width:60ch;margin-inline:auto}
.hdr.center p{margin-top:var(--s4);color:var(--ink-2)}
.allpj{text-align:center;margin:0;padding-block:clamp(32px,4vw,56px);border-bottom:1px solid var(--rule)}

/* ---------------- about ---------------- */
.abt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,84px);align-items:center}
.abt-txt h2{margin-bottom:clamp(20px,2.4vw,30px)}
.abt-txt .lead{margin-bottom:var(--s5)}
.abt-txt .sub{margin-bottom:var(--s4);max-width:56ch}
.pull{margin:clamp(24px,3vw,36px) 0;padding-top:clamp(20px,2.4vw,28px);border-top:3px solid var(--cyan);
  font-size:clamp(17px,1.6vw,21px);line-height:1.5;font-weight:500;letter-spacing:-.02em;max-width:48ch}
.pull em{font-style:normal;font-weight:800;color:var(--link)}
.abt-pic{margin:0;position:relative}
.abt-pic img{width:100%;aspect-ratio:4/3;object-fit:cover}
.abt-pic figcaption{position:absolute;right:0;bottom:0;background:var(--navy);color:#fff;
  padding:10px 16px;font-size:12px}
.abt-pic figcaption b{font-weight:700}

/* ---------------- the dark break ---------------- */

/* ---------------- statement, zigzag, bleed ---------------- */
.zig{border-bottom:1px solid var(--rule)}
.zig>.shell{max-width:none;padding-inline:0}
.zag{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;gap:0}
.zag:nth-child(even) .pic{order:-1}
.zag .pic{position:relative;overflow:hidden;min-height:clamp(340px,38vw,540px)}
.zag .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease-out)}
.zag:hover .pic img{transform:scale(1.035)}
.zag .txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(38px,5vw,86px) clamp(28px,5.5vw,96px)}
.zag .txt h3{font-size:clamp(24px,2.7vw,36px);margin-bottom:var(--s5);padding-top:var(--s5);
  border-top:3px solid var(--cyan);display:inline-block;align-self:flex-start}
.zag .txt p{color:var(--ink-2);max-width:46ch;margin:0;font-size:clamp(15.5px,1.2vw,17px);line-height:1.7}
.zag:nth-child(even) .txt{background:var(--navy);color:#fff}
.zag:nth-child(even) .txt p{color:var(--on-navy-2)}
.bleed{margin:0;position:relative}
.bleed img{width:100%;aspect-ratio:5/2;object-fit:cover}
.bleed figcaption{position:absolute;right:0;bottom:0;background:var(--navy);color:#fff;
  padding:11px 18px;font-size:12.5px}
.bleed figcaption b{font-weight:700}

/* ---------------- specialities ---------------- */
.spec-band{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink)}
.spec-band>div{padding:22px 20px 26px;border-left:1px solid var(--rule-2);border-bottom:1px solid var(--rule)}
.spec-band>div:last-child{border-left:0}
.spec-band b{display:block;font-size:17px;font-weight:700;letter-spacing:-.02em}
.spec-band span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:8px}
.spec-band i{display:block;width:26px;height:2px;background:var(--cyan);margin-top:16px}
/* the founder, in his own words and nobody's photograph */
.founder-note{max-width:62ch;border-top:3px solid var(--cyan);padding-top:clamp(20px,2.4vw,30px)}
.founder-note h2{font-size:clamp(23px,2.2vw,30px);margin:0 0 6px}
.founder-note .founder-role{font-size:13.5px;color:var(--ink-3);font-weight:500;
  margin:0 0 clamp(16px,1.8vw,22px)}
.founder-note .sub{margin:0}


/* ---------------- process tabs ---------------- */
#proc-tabs{display:grid;grid-template-columns:repeat(5,1fr);border-top:1.5px solid var(--ink);
  border-bottom:1px solid var(--rule);margin-bottom:clamp(28px,3.5vw,44px)}
#proc-tabs button{background:none;border:0;border-left:1px solid var(--rule-2);padding:16px 14px;
  text-align:right;font-size:14.5px;font-weight:700;cursor:pointer;position:relative;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
#proc-tabs button:last-child{border-left:0}
#proc-tabs button:hover{background:rgba(var(--ink-rgb),.055)}
#proc-tabs .tnum{display:block;font-size:11px;letter-spacing:.14em;color:var(--ink-3);margin-bottom:5px;
  font-weight:700;transition:color var(--t-fast) var(--ease)}
#proc-tabs button[aria-selected="true"]{background:var(--navy);color:#fff}
#proc-tabs button[aria-selected="true"] .tnum{color:var(--cyan-bright)}
.stage{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(28px,5vw,64px);align-items:start}
.stage h3{margin-bottom:var(--s5)}
.steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.steps li{padding:13px 0 13px 0;border-bottom:1px solid var(--rule-2);font-size:15.5px;
  display:flex;align-items:baseline;gap:12px}
.steps li:before{content:'';flex:0 0 6px;height:6px;background:var(--cyan);transform:translateY(-2px)}
.stage-pic{margin:0}
.stage-pic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.fade-in{animation:fade var(--t-mid) var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fade-in{animation:none}}

/* ---------------- filters ---------------- */
.led-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
#filters{display:flex;flex-wrap:wrap;gap:8px}
#filters button{background:none;border:1px solid var(--rule);padding:8px 16px;font-size:13.5px;
  font-weight:500;cursor:pointer;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
#filters button:hover{border-color:var(--ink);color:var(--ink)}
#filters button[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}

/* ---------------- project page ---------------- */
.back{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;
  color:var(--link);margin-bottom:var(--s5)}
.back:before{content:'→'}
.back:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.proj-hero img{width:100%;aspect-ratio:2/1;object-fit:cover}
.titleblock{display:grid;grid-template-columns:repeat(4,1fr);margin:0 auto clamp(28px,3.4vw,52px);
  border-bottom:1px solid var(--rule);max-width:var(--maxw);padding-inline:var(--pad)}
.titleblock>div{padding:16px 18px 20px;border-left:1px solid var(--rule-2);border-top:1px solid var(--rule)}
.titleblock>div:nth-child(4n){border-left:0}
.titleblock dt{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--ink-3)}
.titleblock dd{margin:5px 0 0;font-size:16px;font-weight:700;letter-spacing:-.02em}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:none;
  padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto}
.gal button{background:var(--paper);border:0;padding:0;cursor:zoom-in;display:block;position:relative;
  border-radius:var(--r-card);overflow:hidden}
.gal figure{margin:0;overflow:hidden;border-radius:var(--r-card)}
.gal img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.gal button:hover img{transform:scale(1.04)}

/* ---------------- client rail ---------------- */
.rail{overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 60px,#000 calc(100% - 60px),transparent);
  mask-image:linear-gradient(to left,transparent,#000 60px,#000 calc(100% - 60px),transparent)}
.rail-track{display:flex;align-items:center;gap:26px;width:max-content;animation:rail 62s linear infinite}
.rail-track img{width:168px;height:66px;object-fit:contain;object-position:center;flex:none}
.rail:hover .rail-track{animation-play-state:paused}
@keyframes rail{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.rail-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}

/* ---------------- closing call ---------------- */
.cta{background:var(--navy);color:#fff}
.cta .in{padding-block:clamp(44px,5vw,72px);display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);flex-wrap:wrap}
.cta h2{flex:0 1 620px}
.cta .btn{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan)}
.cta .btn:after{color:var(--on-cyan)}
.cta .btn:hover{background:#33B4E9;border-color:#33B4E9}
.cta .btn.ghost{background:none;border-color:rgba(255,255,255,.6);color:#fff}
.cta .btn.ghost:after{color:var(--cyan)}
.cta .btn.ghost:hover{background:#fff;color:var(--navy)}
.cta .btn.ghost:hover:after{color:var(--navy)}

/* ---------------- form ---------------- */
.dl{margin:0}
.dl dt{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--ink-3);margin-top:var(--s5)}
.dl dd{margin:4px 0 0;font-size:17px;font-weight:700}
.dl a:hover{color:var(--link)}
.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.04em;margin-bottom:7px}
.req{color:var(--link)}
input,textarea{width:100%;font:inherit;font-size:16px;background:var(--sheet);color:var(--ink);
  border:1px solid var(--rule);padding:13px 15px;border-radius:0;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
input[type="date"],input[type="tel"],input[type="email"]{-webkit-appearance:none;appearance:none;min-height:48px}
textarea{min-height:132px;resize:vertical;line-height:1.6}
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
input:hover,textarea:hover{border-color:var(--ink-3)}
input:focus,textarea:focus{outline:0;border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan)}
input[aria-invalid="true"]{border-color:#B3261E;box-shadow:inset 0 0 0 1px #B3261E}
.err{color:#B3261E;font-size:13.5px;margin:7px 0 0;min-height:1px}
.file{border:1px dashed var(--rule);padding:15px;background:var(--sheet)}
.file p{color:var(--ink-3)}

.asklist{margin-top:var(--s8)}
.asklist .tiny{margin-bottom:var(--s3)}
.asklist ul{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.asklist li{padding:13px 0;border-bottom:1px solid var(--rule-2);display:flex;align-items:baseline;
  justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
.asklist b{font-size:16px;font-weight:700}
.asklist span{font-size:13px;color:var(--ink-3)}

/* ---------------- lightbox ---------------- */
.lb{position:fixed;inset:0;z-index:80;background:rgba(6,10,20,.96);display:flex;align-items:center;
  justify-content:center;padding:clamp(44px,7vw,84px)}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb-bar{position:absolute;top:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;
  padding:16px var(--pad);color:#fff;font-size:13px}
.lb-bar button{background:none;border:1.5px solid rgba(255,255,255,.55);color:#fff;padding:7px 16px;
  font-size:13px;font-weight:700;cursor:pointer;transition:background var(--t-fast) var(--ease)}
.lb-bar button:hover{background:#fff;color:var(--navy)}
.lb-count{direction:ltr;unicode-bidi:isolate}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;
  font-size:44px;line-height:1;padding:12px 18px;cursor:pointer;opacity:.72;transition:opacity var(--t-fast) var(--ease)}
.lb-nav:hover{opacity:1}
.lb-prev{right:8px}.lb-next{left:8px}

/* ---------------- peek ---------------- */
.peek{position:fixed;width:260px;height:195px;z-index:70;pointer-events:none;opacity:0;
  transform:scale(.97);transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.peek.on{opacity:1;transform:none}
.peek img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-card)}

/* ---------------- footer ---------------- */
footer{background:var(--navy);color:#fff;padding-block:clamp(44px,5vw,72px) 0}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s7)}
.ft img{filter:brightness(0) invert(1)}
.ft .sub{color:var(--on-navy-2)}
.ft .lbl{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--on-navy-3);margin-bottom:var(--s4)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{padding:5px 0;font-size:15px}
.ft a:hover{color:var(--cyan)}
.ftbase{display:flex;justify-content:space-between;font-size:12.5px;color:var(--on-navy-3);
  border-top:1px solid rgba(255,255,255,.16);margin-top:var(--s7);padding-block:18px}

/* ---------------- pages + reveal ---------------- */
/* scoped to the main element: WordPress puts a class named `page` on the
   body of every page, and an unscoped rule hid the whole document */
#main > .page{display:none}
#main > .page.on{display:block}
.rev{opacity:0;transform:translateY(18px);
  transition:opacity var(--t-mid) var(--ease-out) var(--d,0ms),transform var(--t-mid) var(--ease-out) var(--d,0ms)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  .plates{grid-template-columns:repeat(3,1fr)}
  .svcgrid{grid-template-columns:1fr}
  .spec-band{grid-template-columns:repeat(2,1fr)}
  .spec-band>div:nth-child(2n){border-left:0}
  .titleblock{grid-template-columns:repeat(3,1fr)}
  .titleblock>div:nth-child(4n){border-left:1px solid var(--rule-2)}
  .titleblock>div:nth-child(3n){border-left:0}
}
@media (max-width:860px){
  .burger{display:block}
  .main{position:absolute;top:66px;right:0;left:0;background:var(--paper);flex-direction:column;
    align-items:stretch;gap:0;border-bottom:1px solid var(--rule);display:none;padding:var(--s3) var(--pad) var(--s5)}
  .main.open{display:flex}
  /* the drawer is a solid sheet even while the bar floats over the photograph */
  body.over .main.open{background:var(--paper)}
  body.over .main.open a{color:var(--ink)}
  body.over .main.open .tel{border-color:var(--ink)}
  .main a{padding:13px 0;border-bottom:1px solid var(--rule-2);font-size:16px}
  .main .tel{border:0;padding:13px 0;font-size:16px;border-bottom:0}
  .main a:after{display:none}
  .shot{height:100svh;max-height:none}
  .say{flex-direction:column;align-items:stretch;gap:var(--s5);padding-block:26px 22px}
  /* in a column flex, flex-basis is the HEIGHT: the row bases must be released */
  .say h1,.say-rt{flex:0 0 auto}
  .say-rt p{max-width:none}
  .say-rt{padding-bottom:0}
  .sectors{grid-template-columns:repeat(2,1fr)}
  .sector{padding:13px 16px}
  .sector:nth-child(2n){border-left:0}
  .sector:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
  .sector:before{height:2px}
  .sector b .lg{display:none}
  .sector b .sm{display:inline}
  /* the opening frame is tall and narrow here, so hold the subject in view */
  .shot img{object-position:62% center}
  .shotcap{bottom:126px;font-size:11.5px}
  /* the band is two rows here, so the control clears it */
  .shot-ui{bottom:112px}
  .shot-caps{grid-template-columns:1fr 1fr;gap:10px 16px;bottom:18px}
  .shot-caps a:nth-child(2),.shot-caps a:nth-child(3){display:none}
  .shot{min-height:300px}
  .cols,.zag,.stage,.ft,.abt{grid-template-columns:1fr}
  .zag:nth-child(even) .pic{order:0}
  .zag .pic{min-height:260px}
  .zag .txt{padding:clamp(30px,7vw,44px) var(--pad)}
  .plates{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  #proc-tabs{grid-template-columns:repeat(2,1fr)}
  #proc-tabs button{border-bottom:1px solid var(--rule-2)}
  .titleblock{grid-template-columns:repeat(2,1fr)}
  .titleblock>div:nth-child(3n){border-left:1px solid var(--rule-2)}
  .titleblock>div:nth-child(2n){border-left:0}
  .rail-track img{width:126px;height:52px}
}
@media (max-width:560px){
  .say h1 br{display:none}
  .gal{grid-template-columns:1fr}
  .plates,.spec-band{grid-template-columns:1fr}
  .spec-band>div{border-left:0}
  .titleblock{grid-template-columns:1fr}
  .titleblock>div{border-left:0}
  .shotcap{display:none}
}