/* Shared by the five product pages. The home page keeps its own inline styles;
   these pages are a different composition on purpose — a wide photo band with
   the title on it, then a two-column read, then a spec table. If every page
   used the home page's split, the site would look like one page repeated, and
   that is exactly what the research said was wrong with the category. */
@font-face{font-family:Assistant Fallback;src:local(Arial);size-adjust:87.4%;ascent-override:95%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:Rubik Fallback;src:local(Arial);size-adjust:95.7%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-var-hebrew.woff2)format("woff2");font-weight:300 900;font-display:swap;
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Rubik;src:url(/fonts/Rubik-var-latin.woff2)format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:Assistant;src:url(/fonts/Assistant-var-hebrew.woff2)format("woff2");font-weight:300 700;font-display:swap;
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:Assistant;src:url(/fonts/Assistant-var-latin.woff2)format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/IBMPlexMono-400-latin.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(/fonts/IBMPlexMono-500-latin.woff2)format("woff2");font-weight:500;font-display:swap}

:root{
  --navy:#0f2333; --navy-2:#193a52; --navy-deep:#08151f;
  --azure:#07659a; --azure-lite:#00a0e0; --azure-deep:#075b87;
  /* --azure is 3.69:1 against white: fine behind display-size headings, a
     failure anywhere azure meets white at text size. --azure-ink is the same
     hue at 5.24:1, for links, small labels and any fill under white text. */
  --azure-ink:#0972ab;
  --paper:#f7f5f1; --paper-2:#ece7e0; --white:#fff;
  /* --ink-3 was #8d8a83, which measures 3.16:1 against the paper — under the
     4.5:1 that AA asks of body text, and it carries the crumb, the kick and the
     alternate-answer line. #726e66 is the same warm grey a step down and
     measures 4.66:1. Do not lighten it back. */
  --ink:#0f2333; --ink-2:#54606b; --ink-3:#66635c;
  --line:rgba(15,35,51,.14);
  --display:Rubik,Rubik Fallback,sans-serif; --body:Assistant,Assistant Fallback,sans-serif;
  --e:cubic-bezier(.16,1,.3,1); --wrap:min(92vw,1460px);
  --gut:max(4vw,calc((100vw - 1460px)/2));
  --pad:max(env(safe-area-inset-bottom),0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased}
.mono{font-family:Plex,monospace;direction:ltr;unicode-bidi:isolate;text-align:right}
a{text-decoration:none;color:inherit}
img{display:block;height:auto}
.wrap{width:var(--wrap);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.98}
.kick{display:flex;align-items:center;gap:12px;font-family:Plex,monospace;font-size:10.5px;
  letter-spacing:.22em;color:var(--ink-3)}
.kick i{display:block;width:38px;height:1px;background:currentColor;opacity:.45}
:focus-visible{outline:2px solid var(--azure-lite);outline-offset:3px}

/* Keyboard users landed on the rail and had to tab the whole menu on every
   page before reaching the text. Off-screen until focused, then it lands in
   the corner as a normal button. */
.skip{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:100;
  transform:translateY(-120%);background:var(--azure-ink);color:#fff;font-weight:700;
  font-size:15px;padding:14px 22px;border-radius:0 0 2px 0;transition:transform .18s var(--e)}
.skip:focus{transform:none}
.rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--e),transform 1s var(--e)}
.rv.on{opacity:1;transform:none}

/* rail — identical to the home page so the header never jumps between pages.
   On a phone the header hides on scroll-down and returns on scroll-up: rail
   plus product row is 102px, and half-scrolled the row read as a fault. */
/* the header stays for the whole scroll — the menu has to be reachable from
   anywhere, not only after scrolling back up */
/* body> is load-bearing, not tidiness. `.top` is also the class on the heading
   row of the work strip (.pwork .top) and on the lightbox bar (.lb .top), and a
   bare `.top` selector handed both of them position:sticky and z-index:40 — so
   "שערים שעשינו" detached and floated over the navigation on all five product
   pages. Scope it to the one element that is actually the page header. */
body>.top{position:sticky;inset-block-start:0;z-index:40}
/* ── the rail ──
   Was three clusters with a hole between them: the logo pinned right, the nav
   pushed to mid-left by its own auto margin, the phone pinned left — 566px of
   empty navy in the middle at 1440. The brand and its navigation belong
   together, so only the phone gets the auto margin now; it lands at the far end
   as the one action, and the gap becomes deliberate space between "who this is"
   and "call them" instead of a hole. */
.rail{background:var(--navy-deep);box-shadow:0 1px 0 rgba(0,160,224,.22)}
.rail .bar{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;gap:26px;
  height:64px;color:#fff}
/* 12px, not 10: the mark and the wordmark are separate files and at this size a
   tighter gap makes them read as one lockup rather than two objects */
.rail .lg{display:flex;align-items:center;gap:12px;flex:none}
.rail .lg img{display:block;height:19px;width:auto}
.rail .lg img.mk{height:34px}
.rail .lg:hover{opacity:.85}
.rail .nv{display:flex;gap:24px;font-size:14.5px;font-weight:500;
  color:rgba(255,255,255,.72)}
.rail .nv a:hover,.rail .nv a[aria-current]{color:#fff}
.rail .nv a[aria-current]{border-bottom:2px solid var(--azure-lite);padding-bottom:2px}
/* solid, not an outline. It was the only element in the rail that looked like an
   empty input, and it is the one thing on the page we want pressed — this is
   also the only azure in a bar that was otherwise flat navy. */
/* margin-RIGHT, physically, and not margin-inline-start. This element carries
   .mono, which sets direction:ltr so the phone number reads correctly — and a
   logical margin resolves against the ELEMENT's direction, not the bar's. So
   margin-inline-start became margin-left here and shoved the button the wrong
   way, parking it beside the nav with 521px of dead navy to its left. */
.rail .tel{flex:none;margin-right:auto;font-family:Plex,monospace;font-size:13.5px;
  background:var(--azure-ink);padding:10px 17px;border-radius:2px;color:#fff;transition:.25s;
  border:1px solid var(--azure)}
.rail .tel:hover{background:var(--azure-lite);border-color:var(--azure-lite)}


/* ── phone navigation ──
   Below 820px the rail nav was hidden and nothing replaced it, so on a phone
   the five product pages were unreachable from anywhere except the tiles
   halfway down the home page. This is a scrolling row rather than a hamburger
   because there are only six destinations and a business should not hide its
   product range behind an icon. */
.pbar{display:none}
@media(max-width:820px){
  .pbar{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;background:var(--navy)}
  .pbar::-webkit-scrollbar{display:none}
  .pbar a{flex:none;padding:14px 15px;font-size:14.5px;font-weight:600;
    color:rgba(255,255,255,.72);white-space:nowrap;min-height:46px;
    display:flex;align-items:center;border-bottom:2px solid transparent}
  .pbar a:first-child{padding-inline-start:var(--gut)}
  .pbar a:last-child{padding-inline-end:var(--gut)}
  .pbar a[aria-current]{color:#fff;border-bottom-color:var(--azure-lite)}
}

/* ── product head: a wide band, the title sitting on it ── */
.phead{position:relative;height:clamp(320px,52svh,560px);overflow:hidden;background:var(--navy-deep)}
.phead img{width:100%;height:100%;object-fit:cover;object-position:var(--o,50% 50%);
  filter:contrast(1.05) saturate(.94)}
.phead .g{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,21,31,.92) 0%,rgba(8,21,31,.45) 42%,rgba(8,21,31,.12) 100%)}
.phead .in{position:absolute;inset-block-end:0;inset-inline:0;padding-block:0 clamp(24px,4vh,44px)}
.phead .box{width:var(--wrap);margin-inline:auto;color:#fff}
.phead h1{font-size:clamp(36px,5.6vw,88px);color:#fff;max-width:15ch;
  text-shadow:0 2px 40px rgba(8,21,31,.5)}
.crumb{font-size:13px;color:rgba(255,255,255,.66);margin-bottom:16px}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb span{opacity:.5;margin-inline:7px}

/* ── the read: prose on the right, the facts pinned left ── */
.read{padding-block:clamp(44px,8vh,92px);display:grid;
  grid-template-columns:1.35fr .85fr;gap:clamp(28px,5vw,80px);align-items:start}
.read .prose p{font-size:17.5px;line-height:1.85;color:var(--ink-2);margin-bottom:18px}
.read .prose p:first-child{font-size:clamp(19px,1.6vw,23px);line-height:1.65;color:var(--ink);font-weight:600}
.read .prose strong{font-weight:700;color:var(--ink)}
.facts{border-top:2px solid var(--navy)}
.facts div{padding:15px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.facts dt,.facts b{font-weight:700;font-size:14px;flex:0 0 32%;color:var(--ink)}
.facts s{text-decoration:none;font-size:14.5px;line-height:1.6;color:var(--ink-2)}

/* ── variants ── */
.vars{background:var(--navy);color:#fff;padding-block:clamp(46px,8vh,96px)}
.vars h2{font-size:clamp(26px,3.6vw,54px);color:#fff;max-width:18ch}
.vars h2 em{font-style:normal;color:var(--azure-lite)}
.vars .lede{margin-top:16px;max-width:56ch;font-size:17px;line-height:1.8;color:#9db4c6}
/* Was a list of paragraphs. On a page for a business whose value is entirely
   visual, describing four gate mechanisms in prose is the reason it read as
   boring — so each variant now leads with the thing itself, and the sides
   alternate so the eye has somewhere to go. */
.vlist{margin-top:clamp(28px,5vh,52px);display:grid;gap:clamp(20px,3.5vh,44px)}
.vlist article{display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(20px,4vw,58px);align-items:center}
.vlist article:nth-child(even){direction:ltr}
.vlist article:nth-child(even)>*{direction:rtl}
.vlist figure{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-deep)}
.vlist figure img,.vlist figure video{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.3s var(--e)}
.vlist article:hover figure img{transform:scale(1.04)}
.vlist .live{position:absolute;inset-block-start:12px;inset-inline-start:12px;
  font-family:Plex,monospace;font-size:9.5px;letter-spacing:.14em;color:#fff;
  background:rgba(8,21,31,.6);padding:5px 9px;backdrop-filter:blur(4px)}
.vlist b{display:block;font-family:Plex,monospace;font-size:12px;letter-spacing:.18em;
  color:var(--azure-lite);direction:ltr;unicode-bidi:isolate;text-align:right}
.vlist h3{margin-top:10px;font-size:clamp(22px,2.6vw,36px);color:#fff}
.vlist h3::after{content:"";display:block;width:34px;height:2px;background:var(--azure-lite);
  margin-top:14px}
.vlist p{margin-top:14px;font-size:16px;line-height:1.75;color:#9db4c6;max-width:44ch}

/* ── the shop note ── */
.shopnote{padding-block:clamp(44px,8vh,92px);display:grid;
  grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.shopnote .pic{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.shopnote .pic img{width:100%;height:100%;object-fit:cover}
.shopnote h2{font-size:clamp(24px,3.2vw,46px);max-width:16ch}
.shopnote p{margin-top:18px;font-size:17px;line-height:1.85;color:var(--ink-2);max-width:46ch}
.shopnote .more{margin-top:24px;display:inline-block;font-weight:700;font-size:15.5px;
  border-bottom:2px solid var(--azure);padding-bottom:3px}
.shopnote .more:hover{color:var(--azure-ink)}

/* ── work strip ── */
.pwork{padding-block:clamp(40px,7vh,84px) clamp(46px,8vh,92px);background:var(--paper-2)}
.pwork .top{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.pwork h2{font-size:clamp(24px,3.2vw,46px)}
.pwork .all{margin-inline-start:auto;font-weight:700;font-size:15px;
  border-bottom:2px solid var(--azure);padding-bottom:3px}
.pwork .all:hover{color:var(--azure-ink)}
.pgrid{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.pgrid a{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--navy);display:block}
.pgrid img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.pgrid a:hover img{transform:scale(1.05)}

/* ── band + footer, same as home ── */
.band{background:var(--azure-ink);color:#fff;padding-block:clamp(46px,8vh,92px);position:relative;overflow:hidden}
.band h2{font-size:clamp(26px,4vw,60px);color:#fff;max-width:14ch}
.band p{margin-top:18px;max-width:46ch;font-size:17.5px;line-height:1.7;color:rgba(255,255,255,.92)}
.band .acts{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.band .acts a{padding:16px 30px;font-weight:700;font-size:15.5px;border-radius:2px;transition:.25s}
.band .acts .p{background:#fff;color:var(--azure-deep)}
.band .acts .p:hover{background:var(--navy);color:#fff}
.band .acts .s{border:1px solid rgba(255,255,255,.6);color:#fff;font-family:Plex,monospace}
.band .acts .s:hover{background:rgba(255,255,255,.16)}
.band>svg{position:absolute;inset-block:0;inset-inline-start:-4%;height:100%;width:48%;opacity:.26}
.band>svg line{stroke:#fff;stroke-width:1.2}

footer{background:var(--navy-deep);color:#8fa6b8;padding-block:48px 26px;font-size:14.5px;line-height:1.75}
/* four columns since the החברה group was added — at three the fourth wrapped
   onto a second row and sat under the logo */
footer .cols{display:grid;gap:30px;grid-template-columns:1.5fr .85fr .85fr 1.15fr}
footer b{display:block;font-family:var(--display);color:#fff;font-size:18px;font-weight:800;
  letter-spacing:-.03em;margin-bottom:13px}
footer .flogo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
footer .flogo>img{height:46px;width:auto}
footer .flogo>span{display:grid;gap:5px}
footer .flogo>span img{height:19px;width:auto}
footer .flogo s{text-decoration:none;font-size:11px;letter-spacing:.06em;color:#6b8398}
footer a:hover{color:#fff}
footer .fine{margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#6b8398}

.mbar{position:fixed;inset-block-end:0;inset-inline:0;z-index:60;display:none;gap:8px;
  padding:10px 12px calc(10px + var(--pad));background:rgba(247,245,241,.97);backdrop-filter:blur(14px);
  border-top:1px solid var(--line)}
.mbar a{flex:1;text-align:center;padding:14px 10px;font-size:15px;font-weight:600;border-radius:2px}
.mbar .p{background:var(--azure-ink);color:#fff}
.mbar .s{border:1px solid var(--line)}

@media(max-width:1000px){
  .read,.shopnote{grid-template-columns:1fr;gap:30px}
  .shopnote .pic{order:-1}
  .vlist article{grid-template-columns:1fr;gap:16px}
  .vlist article:nth-child(even){direction:rtl}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr}
}
@media(max-width:820px){
  .rail .nv{display:none}
  .rail .tel{margin-inline-start:auto}
  .mbar{display:flex}
  body{padding-bottom:74px}
  .phead{height:clamp(260px,44svh,400px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rv{opacity:1;transform:none}}

/* ── 320px ──
   Still a live screen size, and the rail is the one row that cannot wrap. At
   320 the wrap is 294px while logo (191) + gap (26) + menu button (93) came to
   310, so the button was pushed to x=-1 and lost its left edge. html has
   overflow-x:clip, so this never showed up as a scrollbar — it just quietly cut
   the control. Tightening the lockup buys back the 16px. */
@media(max-width:360px){
  .rail .bar{gap:14px}
  .rail .lg{gap:9px}
  .rail .lg img{height:16px}
  .rail .lg img.mk{height:29px}
}

/* ── phone: nothing tappable under 44px, nothing readable under 12px ── */
@media(max-width:820px){
  .rail .lg{min-height:44px}
  .pbar a{min-width:46px;justify-content:center}
  /* mono at wide letter-spacing reads a size smaller than it measures, so the
     eyebrow needs the extra half-pixel more than body copy would */
  .kick{font-size:12.5px;letter-spacing:.16em}
  footer .cols a{display:inline-block;padding:9px 0;min-height:44px}
  footer{font-size:15px}
  footer .flogo s{font-size:12px}
  /* same as the home page: four stacked link groups at 44px a row is most of a
     screen of footer, so the three link groups pair up into two columns */
  footer .cols{gap:22px}
  footer .cols>div:nth-child(2),footer .cols>div:nth-child(3),
  footer .cols>div:nth-child(4){display:grid;grid-template-columns:1fr 1fr;column-gap:14px}
  footer .cols>div>b{grid-column:1/-1;margin-bottom:6px}
  footer .cols br{display:none}
  /* the badge that marks a clip as the client's own footage — 9.5px over video */
  .vlist .live{font-size:12px;padding:6px 10px}
}

@media(max-width:820px){
  .crumb{font-size:14px}
  .crumb a{display:inline-block;padding:8px 0;min-height:40px}
  /* Same trap as the policy links: these two are underlined with border-bottom,
     and the padding that buys them a 44px hit area pushes that border 10px
     clear of the text, leaving a bar floating under the words. A text
     decoration hangs off the baseline and ignores the padding. */
  .shopnote .more,.pwork .all{display:inline-block;padding:10px 0;min-height:44px;
    border-bottom:0;text-decoration:underline;text-decoration-color:var(--azure-ink);
    text-decoration-thickness:2px;text-underline-offset:5px}
  .pwork .top{gap:10px}
  .pwork .all{margin-inline-start:0}
  .facts dt,.facts b{flex:0 0 38%;font-size:14.5px}
  .facts s{font-size:15px}
  .read .prose p{font-size:16.5px}
  .vlist p{font-size:15.5px}
}

/* Same correction as the home page: the desktop rhythm, folded into one column,
   turned every section into most of a screen. */
@media(max-width:820px){
  .rail .bar{height:56px}
  .read{padding-block:32px 30px;gap:26px}
  .read .prose p:first-child{font-size:19px}
  .read .prose p{margin-bottom:15px}
  .vars{padding-block:36px 34px}
  .vars h2{font-size:clamp(26px,8vw,38px)}
  .vars .lede{margin-top:13px;font-size:16px}
  .vlist{margin-top:22px}
  .vlist figure{aspect-ratio:16/11}
  .vlist h3{font-size:21px}
  .shopnote{padding-block:34px;gap:22px}
  .shopnote h2{font-size:clamp(24px,7.5vw,34px)}
  .shopnote p{margin-top:14px;font-size:16.5px}
  .shopnote .pic{aspect-ratio:16/10}
  .pwork{padding-block:32px 38px}
  .pwork h2{font-size:clamp(24px,7.5vw,34px)}
  .pgrid{margin-top:18px;gap:2px}
  .band{padding-block:38px}
  .band h2{font-size:clamp(26px,8vw,40px)}
  footer{padding-block:34px 22px}
  .phead h1{font-size:clamp(30px,9vw,44px)}
}
@media(max-width:820px){
  /* the product-page strip runs to both edges too */
  .pwork .wrap{width:100%}
  .pwork .top{padding-inline:var(--gut)}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:2px}
  .phead h1{font-size:clamp(34px,11vw,52px);line-height:.94}
  .phead{height:clamp(340px,56svh,470px)}
  .crumb{font-size:13.5px}
}

/* ── colour strip ──
   Colour is the most-discussed attribute in the client's own archived copy —
   צבע 181 times, גוון 93 — and neither their old site nor this one showed a
   single swatch until now. Every product page carries the four documented
   finishes and a way into the catalogue. */
.cstrip{padding-block:clamp(22px,4vh,44px) 0}
.cstrip a{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 20px;
  border:1px solid var(--line);background:var(--white);border-radius:2px;transition:.22s}
.cstrip a:hover{border-color:var(--azure-ink);box-shadow:0 14px 34px -24px rgba(15,35,51,.5)}
.cstrip .sw{width:30px;height:30px;border-radius:2px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(15,35,51,.14)}
.cstrip .sw+.sw{margin-inline-start:-8px}
.cstrip b{font-size:15.5px;font-weight:700;margin-inline-start:6px}
.cstrip s{text-decoration:none;margin-inline-start:auto;font-weight:700;font-size:15px;
  color:var(--azure-ink);border-bottom:2px solid var(--azure);padding-bottom:2px}
@media(max-width:820px){
  .cstrip a{padding:14px 15px;gap:10px}
  .cstrip b{width:100%;margin-inline-start:0;font-size:14.5px;order:3}
  .cstrip s{font-size:14.5px}
}

/* ══ the four text pages ══
   אודות · צור קשר · הצהרת נגישות · מדיניות פרטיות. They share product.css
   because they share the rail, the band and the footer, and a fifth stylesheet
   for forty lines would be a fifth request. No photo band on these: a legal
   page opening with a hero photograph of a gate is a page that does not know
   what it is for. */
.pintro{padding-block:clamp(34px,6vh,74px) clamp(20px,3.5vh,40px)}
.pintro h1{margin-top:14px;font-size:clamp(32px,5vw,72px);max-width:15ch}
.pintro h1 em{font-style:normal;color:var(--azure)}
.pintro .lede{margin-top:20px;max-width:58ch;font-size:17.5px;line-height:1.8;color:var(--ink-2)}
.pintro .crumb{color:var(--ink-3);margin-bottom:0}
.pintro .crumb a:hover{color:var(--ink);text-decoration:underline}

/* the document column — measure capped so a policy stays readable on a wide
   screen instead of running the full 1460px */
.doc{padding-bottom:clamp(44px,8vh,92px);max-width:74ch}
.doc h2{margin-top:clamp(28px,4.5vh,46px);font-size:clamp(21px,2.3vw,30px)}
.doc h2:first-child{margin-top:0}
.doc h3{margin-top:26px;font-size:17.5px;letter-spacing:-.02em}
.doc p{margin-top:13px;font-size:16.5px;line-height:1.85;color:var(--ink-2)}
.doc ul{margin-top:13px;padding-inline-start:20px}
.doc li{margin-top:9px;font-size:16.5px;line-height:1.8;color:var(--ink-2)}
/* text-decoration and not border-bottom: the phone rule below pads these links
   to reach a 44px hit area, and padding moves a border away from the text —
   the underline ended up floating ten pixels under the number. A decoration
   hangs off the baseline and ignores the padding. */
.doc a:not(.btn){color:var(--azure-ink);text-decoration:underline;
  text-decoration-color:rgba(10,140,209,.45);text-underline-offset:4px;
  text-decoration-thickness:1px}
.doc a:not(.btn):hover{text-decoration-color:var(--azure-ink)}
.doc strong{color:var(--ink);font-weight:700}
/* the "what this page does not claim" block — the honest half of a statement
   is the half that says what is still missing, so it is set apart, not buried */
.doc .note{margin-top:26px;padding:18px 20px;background:var(--paper-2);
  border-inline-start:3px solid var(--azure)}
.doc .note p{margin-top:8px;font-size:15.5px}
.doc .note p:first-child{margin-top:0}
.doc .upd{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);
  font-family:Plex,monospace;font-size:12px;letter-spacing:.12em;color:var(--ink-3)}

/* ── contact: the methods are the page ──
   There is no form on this site by design — it is static, there is no server to
   receive one, and a form that silently drops a lead is worse than no form.
   So the four ways to actually reach them are the content, at tap size. */
.ccards{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;
  padding-bottom:clamp(30px,5vh,56px)}
.ccards a,.ccards div{display:block;padding:26px 24px;background:var(--white);
  border:1px solid var(--line);transition:.22s}
.ccards a{cursor:pointer}
.ccards a:hover{border-color:var(--azure-ink);box-shadow:0 18px 44px -30px rgba(15,35,51,.5)}
.ccards s{display:block;text-decoration:none;font-family:Plex,monospace;font-size:10.5px;
  letter-spacing:.2em;color:var(--azure-ink);margin-bottom:12px}
.ccards b{display:block;font-family:var(--display);font-size:clamp(20px,2.2vw,27px);
  font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.ccards b.mono{font-family:Plex,monospace;font-weight:500;letter-spacing:-.01em;
  font-size:clamp(18px,2vw,24px)}
.ccards p{margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
/* These overrides have to live here, after the .ccards/.doc base rules above —
   a media query adds no specificity, so the same declaration sitting in the
   earlier phone block lost to the base rule and the label stayed at 10.5px. */
@media(max-width:820px){
  .pintro{padding-block:26px 18px}
  .pintro h1{font-size:clamp(30px,9.5vw,44px)}
  .pintro .lede{margin-top:16px;font-size:16.5px}
  .doc{padding-bottom:36px}
  .doc p,.doc li{font-size:16px}
  .ccards{grid-template-columns:1fr;gap:2px}
  .ccards a,.ccards div{padding:20px 18px}
  .ccards s{font-size:12px}
  /* An inline link inside a sentence is explicitly exempt from the 44px target
     rule, so the links inside policy paragraphs are left alone. These sit alone
     on their own list row and are not really inline — the padding grows the hit
     area without moving the line. */
  .doc li a{padding-block:10px}
}

/* ── touch: a tap is not a hover ──
   A finger has no hover to leave. Chrome and Safari apply :hover on tap and
   hold it until you tap something else, so on a phone the last thing you
   touched stayed inverted, or stayed zoomed, until you touched elsewhere —
   which reads as a stuck selection rather than as feedback. These are the
   effects that persist visibly; the rest are a few percent of opacity and are
   left alone. Must come last in the file to win, and must exempt the pressed
   and current states or the reset would out-cascade them. */
@media(hover:none){
  .rail .lg:hover{opacity:1}
  .rail .tel:hover{background:none;color:#fff;border-color:rgba(255,255,255,.3)}
  .vlist article:hover figure img,.pgrid a:hover img{transform:none}
  .cstrip a:hover{border-color:var(--line);box-shadow:none}
  .band .acts .p:hover{background:#fff;color:var(--azure-deep)}
  .band .acts .s:hover{background:none}
  .crumb a:hover{color:inherit;text-decoration:none}
  .shopnote .more:hover,.pwork .all:hover,footer a:hover{color:inherit}
  .ccards a:hover{border-color:var(--line);box-shadow:none}
}

/* ══ the unlabelled mosaic ══
   Nothing here is captioned, because I mislabelled seven photographs when they
   were — "אטום" over a panelled gate, "שילוב זכוכית" over a gate with no glass.
   With no names to be wrong about, the composition has to carry it.

   Laid on fixed row heights rather than per-item aspect ratios: with aspect
   ratios, a four-column frame and a two-column frame in the same row resolve to
   different heights and the grid leaves a hole. Row spans always tile. */
.mosaic-note{max-width:58ch;font-size:17px;line-height:1.8;color:var(--ink-2);
  margin-block:clamp(18px,3vh,30px) clamp(16px,2.5vh,26px)}
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-auto-rows:clamp(118px,12.6vw,205px);gap:3px;
  width:100vw;margin-inline:calc(50% - 50vw)}
.mosaic a{position:relative;display:block;overflow:hidden;background:var(--navy);min-width:0}
.mosaic a::after{content:"";position:absolute;inset:0;background:rgba(8,21,31,.16);
  opacity:0;transition:opacity .3s}
.mosaic a:hover::after{opacity:1}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.mosaic a:hover img{transform:scale(1.05)}
/* one dominant opening frame, then rows that never repeat the same rhythm */
.mosaic a:nth-child(1){grid-column:span 4;grid-row:span 2}
.mosaic a:nth-child(2),.mosaic a:nth-child(3){grid-column:span 2}
.mosaic a:nth-child(4),.mosaic a:nth-child(5),.mosaic a:nth-child(6){grid-column:span 2}
.mosaic a:nth-child(7),.mosaic a:nth-child(8){grid-column:span 3}
.mosaic a:nth-child(9){grid-column:span 6}
.mosaic a:nth-child(n+10){display:none}
@media(max-width:820px){
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:clamp(112px,30vw,170px);gap:2px}
  .mosaic a{grid-column:span 1;grid-row:span 1}
  .mosaic a:nth-child(1){grid-column:span 2;grid-row:span 2}
  .mosaic a:nth-child(9){grid-column:span 2}
  .mosaic-note{padding-inline:var(--gut);font-size:16.5px}
}

/* footer social — the old site carried these on every page */
footer .soc{display:block;margin-top:9px}
footer .soc a{display:inline-block;margin-inline-end:14px}

/* the 2017 company film on the about page */
.film{padding-block:clamp(34px,6vh,64px)}
.film video{display:block;width:100%;height:auto;margin-top:clamp(18px,2.6vh,28px);
  background:var(--navy);border-radius:3px;
  /* the source is 960 wide — stretching past it only blurs the picture */
  max-width:960px;margin-inline:auto}

/* ── the wordmark, set rather than scaled ──
   The image it replaces averaged 24% brightness across its visible pixels and
   used 28% of its own resolution at header size: soft grey edges, not white.
   Rubik 800 is already loaded for the headings, so this costs nothing, stays
   sharp at any density, and a screen reader reads the company name. */
.rail .lg .lgw{font-family:var(--display);font-weight:800;font-size:19px;
  letter-spacing:-.03em;color:#fff;line-height:1;white-space:nowrap;
  display:block;padding-block-start:1px}
@media(max-width:820px){ .rail .lg .lgw{font-size:16.5px} }
@media(max-width:360px){ .rail .lg .lgw{font-size:15.5px} }
.menu .lg .lgw{font-family:var(--display);font-weight:800;font-size:21px;
  letter-spacing:-.03em;color:#fff;line-height:1;white-space:nowrap}

/* the footer lockup sets the name at its own size */
.flogo .lgw{font-family:var(--display);font-weight:800;font-size:23px;
  letter-spacing:-.03em;color:#fff;line-height:1;white-space:nowrap;display:block}