/* ILNS site: dark homepage, legal pages and shared header/footer. Built from .claude/home (see README there). */
/* Layout: a dark, cinematic page. The finished work fills the screen; type is set big and light against heavy, like titles over a film still. One moment moves: the hero sequence. Everything after it is still. Deliberately dark-only. */
:root{
  color-scheme:dark;
  --bg:#060e1d; --bg2:#0a1528; --panel:#0e1c35; --ink:#eef2f9; --muted:#a6b3c9; --faint:#8794ad; --line:#1d2d4b;
  --navy:#002b66; --cobalt:#0047ab; --sky:#6ea8ff; --sky2:#8fbeff; --white:#ffffff;
  --field:#0a1528; --error:#ff9c92; --ok:#8fe0ab;
  --font:'Heebo','Arial Hebrew','Noto Sans Hebrew',Arial,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --r:10px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px); scrollbar-color:#2a3d63 var(--bg)}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:18px; line-height:1.7; text-align:start; -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
body::after{content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:var(--sky); color:var(--bg)}
input,textarea{caret-color:var(--sky)}
a{color:var(--sky); text-underline-offset:.22em; text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--sky); outline-offset:3px; border-radius:2px}
img{display:block; max-width:100%; height:auto}
h1,h2,h3{margin:0; line-height:1.05; text-wrap:balance; color:var(--ink)}
p{margin:0}
.ltr{direction:ltr; unicode-bidi:isolate; display:inline-block}
.wrap{width:100%; max-width:1240px; margin-inline:auto; padding-inline:20px}
.sec{padding-block:var(--s10)}
.h2{font-size:clamp(36px,5.4vw,76px); font-weight:800; letter-spacing:-.02em}
.h2 .lt{font-weight:400; color:var(--sky2)}
.lede{font-size:clamp(18px,1.6vw,21px); color:var(--muted); max-width:52ch}
.stack{display:grid; gap:var(--s5)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 28px; border-radius:var(--r); font:700 17px/1 var(--font);
  text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap; color:var(--white);
  transition:transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease}
.btn:active{transform:scale(.97)}
.btn svg{width:20px; height:20px; flex:none}
.btn-primary{background:var(--cobalt)}
.btn-line{background:rgb(6 14 29 / .35); border-color:rgb(255 255 255 / .32); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:#0a56c8}
  .btn-line:hover{border-color:var(--sky)}
  .navlinks a:hover{color:var(--white)}
  .reel figure:hover img{transform:scale(1.035)}
}

/* nav */
.nav{position:fixed; top:0; inset-inline:0; z-index:30; padding-top:env(safe-area-inset-top,0px); transition:background-color 300ms ease, border-color 300ms ease; border-bottom:1px solid transparent}
.nav.solid{background:rgb(6 14 29 / .9); backdrop-filter:blur(12px) saturate(1.3); -webkit-backdrop-filter:blur(12px) saturate(1.3); border-bottom-color:var(--line)}
.nav .wrap{display:flex; align-items:center; gap:var(--s5); height:72px; max-width:none; padding-inline:clamp(20px,3vw,48px)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; min-width:0}
.brand img{height:48px; width:auto; flex:none}
.brand .tag{direction:ltr; font-family:'GFS Didot',Didot,'Bodoni 72',Georgia,serif; letter-spacing:.07em; text-transform:uppercase; color:#fff; font-size:1.15rem; white-space:nowrap}
.navlinks{display:flex; gap:var(--s5); margin-inline-start:auto; font-size:16px; font-weight:500}
.navlinks a{color:var(--muted); text-decoration:none; transition:color 160ms ease}
.nav .btn{min-height:44px; padding:0 18px; font-size:15px}
/* nav legibility: always a dark glass bar, brighter links */
.nav{background:rgb(6 14 29 / .74); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid rgb(255 255 255 / .08)}
.nav.solid{background:rgb(6 14 29 / .94); border-bottom-color:var(--line)}
.navlinks a{position:relative; color:#e8eef8; padding-block:6px; text-shadow:0 1px 2px rgb(0 0 0 / .35)}
.navlinks a::after{content:""; position:absolute; inset-inline:0; bottom:0; height:2px; background:var(--sky2); transform:scaleX(0); transform-origin:right; transition:transform 220ms var(--ease-out)}
.navlinks a:hover,.navlinks a:focus-visible{color:#fff}
.navlinks a:hover::after,.navlinks a:focus-visible::after{transform:scaleX(1)}
.menu summary{background:rgb(255 255 255 / .08); border-color:rgb(255 255 255 / .38); color:#fff}
.menu nav a{color:var(--ink); border-radius:8px}
.menu nav a:hover{background:rgb(255 255 255 / .06)}
.menu .langs{border-top:1px solid var(--line); margin-top:var(--s2); padding-top:var(--s2); display:grid; grid-template-columns:1fr 1fr; gap:2px}
.menu .langs a{display:flex; align-items:center; gap:10px; font-size:15px; padding:10px 12px}
.flag{width:22px; height:15px; flex:none; border-radius:2px; box-shadow:0 0 0 1px rgb(255 255 255 / .25)}
.lang{position:relative}
.lang summary{list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid rgb(255 255 255 / .38); border-radius:var(--r); background:rgb(255 255 255 / .08); color:#fff; font-size:15px; font-weight:500}
.lang summary::-webkit-details-marker{display:none}
.lang summary .car{width:14px; height:14px; transition:transform 200ms var(--ease-out)}
.lang[open] summary .car{transform:rotate(180deg)}
.lang nav{position:absolute; inset-inline-end:0; top:52px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:var(--s2); display:grid; min-width:190px; box-shadow:0 20px 40px rgb(0 0 0 / .5)}
.lang nav a{display:flex; align-items:center; gap:12px; padding:11px 12px; color:var(--ink); text-decoration:none; border-radius:8px; font-size:15px}
.lang nav a:hover{background:rgb(255 255 255 / .06)}
.lang nav a[aria-current]{background:rgb(110 168 255 / .12); font-weight:700}
/* desktop nav: always one line, scales down before it can wrap */
.navlinks{white-space:nowrap; gap:clamp(12px,1.55vw,24px); font-size:clamp(14px,1.12vw,16px)}
.navlinks a{white-space:nowrap}
.nav .wrap{gap:clamp(12px,1.4vw,24px)}
.lang summary,.nav .btn{white-space:nowrap}
@media (max-width:1279px) and (min-width:1061px){
  .brand img{height:40px}
  .brand .tag{font-size:.95rem}
  .lang summary span{display:none}
  .nav .btn{padding:0 14px}
}
@media (max-width:1060px){ .lang{display:none}
  .nav .menu{position:static}
  .nav .menu nav{position:fixed; inset-inline:auto; top:calc(env(safe-area-inset-top,0px) + 80px); left:12px; right:12px; min-width:0; max-height:calc(100svh - 100px); overflow-y:auto}
  .nav .menu nav > a{font-size:17px; padding:13px 14px} }

.menu{display:none; position:relative; margin-inline-start:auto}
.menu summary{list-style:none; cursor:pointer; min-height:44px; display:flex; align-items:center; padding:0 14px; border:1px solid rgb(255 255 255 / .25); border-radius:var(--r); font-weight:500; font-size:15px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute; inset-inline-start:0; top:52px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:var(--s2); display:grid; min-width:200px; box-shadow:0 20px 40px rgb(0 0 0 / .45)}
.menu nav a{padding:12px; color:var(--ink); text-decoration:none}

/* hero */
.hero{position:relative; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); min-height:min(100svh,980px); background:var(--bg)}
.hero .copy{position:relative; z-index:2; display:grid; align-content:end; gap:var(--s6); padding:calc(env(safe-area-inset-top,0px) + 140px) clamp(20px,4vw,72px) var(--s8)}
.hero h1{font-size:clamp(40px,4.8vw,76px); letter-spacing:-.025em; line-height:1}
.hero h1 .a{display:block; font-weight:900}
.hero h1 .b{display:block; font-weight:400; color:var(--sky2)}
.hero .sub{font-size:clamp(18px,1.6vw,21px); color:var(--muted); max-width:40ch}
.hero .ctas{display:flex; flex-wrap:wrap; gap:var(--s3)}
.screen{position:relative; overflow:hidden; background:#02060d}
.slide{position:absolute; inset:0; margin:0; opacity:0; transition:opacity 1200ms ease}
.slide.on{opacity:1}
.slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.0); transform-origin:50% 40%}
.slide.on img{animation:drift 9s linear forwards}
.slide.fit img{position:absolute; inset:0}
.slide.fit img:not(.bg){object-fit:contain; z-index:1}
.slide.fit .bg{filter:blur(28px) brightness(.5) saturate(1.1); transform:scale(1.25); animation:none!important}
@keyframes drift{from{transform:scale(1)} to{transform:scale(1.07)}}
.screen::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to left, var(--bg) 0%, rgb(6 14 29 / 0) 26%), linear-gradient(to top, rgb(6 14 29 / .85) 0%, rgb(6 14 29 / 0) 34%), linear-gradient(to bottom, rgb(6 14 29 / .78) 0%, rgb(6 14 29 / 0) 20%)}
.reelbar{position:absolute; z-index:3; inset-inline:clamp(20px,3vw,40px); bottom:var(--s6); display:flex; align-items:center; gap:var(--s4)}
.reelbar .cap{font-size:15px; color:var(--ink); min-width:9em}
.ticks{display:flex; gap:6px; flex:1}
.ticks button{flex:1; height:28px; background:none; border:0; padding:0; cursor:pointer; display:grid; align-items:center}
.ticks button span{display:block; height:2px; background:rgb(255 255 255 / .28); position:relative; overflow:hidden}
.ticks button span i{position:absolute; inset:0; background:var(--white); transform:scaleX(0); transform-origin:right}
.ticks button.on span i{animation:fill var(--dur,6000ms) linear forwards}
.ticks button.done span i{transform:scaleX(1)}
.paused .ticks button.on span i{animation-play-state:paused}
@keyframes fill{to{transform:scaleX(1)}}
.pp{width:44px; height:44px; border-radius:50%; border:1px solid rgb(255 255 255 / .35); background:rgb(6 14 29 / .4); color:var(--white); display:grid; place-items:center; cursor:pointer; flex:none}
.pp svg{width:18px; height:18px}

/* facts */
.facts{border-block:1px solid var(--line); background:var(--bg)}
.facts .wrap{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
.fact{padding-block:var(--s7); padding-inline:var(--s5); display:grid; gap:var(--s1)}
.fact + .fact{border-inline-start:1px solid var(--line)}
.fact b{font-size:clamp(44px,5vw,72px); font-weight:300; line-height:1; letter-spacing:-.02em; color:var(--white)}
.fact > span{font-size:16px; color:var(--muted)}

/* netanel */
.person{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--s9); align-items:end}
.person .say{font-size:clamp(38px,5vw,76px); font-weight:900; letter-spacing:-.025em; line-height:1.02}
.person .say span{display:block}
.person .say .k{color:var(--sky2); font-weight:400}
.person .body{color:var(--muted); max-width:46ch; font-size:19px}
.meet{padding-block-end:0; overflow:hidden}
.meet .person{align-items:end}
.meet .copy{padding-block-end:var(--s10)}
.portrait{position:relative; margin:0; display:grid; justify-items:center; align-self:end}
.portrait::before{content:""; position:absolute; inset:4% -6% 0; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, rgb(0 71 171 / .62), rgb(0 71 171 / .18) 60%, rgb(0 71 171 / 0))}
.portrait img{position:relative; z-index:1; width:min(100%,600px); height:auto;
  -webkit-mask-image:linear-gradient(to top, transparent 0, #000 26%); mask-image:linear-gradient(to top, transparent 0, #000 26%);
  transform:translateY(28px); transition:transform 900ms var(--ease-out)}
.portrait.in img{transform:none}
.portrait figcaption{position:absolute; z-index:2; bottom:var(--s5); inset-inline-start:0; font-size:15px; color:var(--muted)}
.portrait figcaption b{color:var(--ink); font-weight:700}

/* reel gallery */
.reel-head{display:flex; align-items:end; justify-content:space-between; gap:var(--s5); flex-wrap:wrap}
.arrows{display:flex; gap:var(--s2)}
.arrows button{width:52px; height:52px; border-radius:50%; border:1px solid var(--line); background:var(--bg2); color:var(--ink); cursor:pointer; display:grid; place-items:center; transition:border-color 200ms ease, transform 160ms var(--ease-out)}
.arrows button:active{transform:scale(.95)}
.arrows button:hover{border-color:var(--sky)}
.arrows svg{width:20px; height:20px}
.reel{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(260px,30vw,400px); gap:var(--s4); overflow-x:auto; scroll-snap-type:x mandatory; padding-block:var(--s7) var(--s4);
  padding-inline:max(20px, calc((100vw - 1240px)/2 + 20px)); scrollbar-width:none; overscroll-behavior-x:contain}
.reel::-webkit-scrollbar{display:none}
.reel figure{margin:0; scroll-snap-align:start; display:grid; gap:var(--s3)}
.reel .ph{overflow:hidden; aspect-ratio:3/4; background:var(--bg2)}
.reel .ph.wide{aspect-ratio:3/4}
.reel img{width:100%; height:100%; object-fit:cover; transition:transform 600ms var(--ease-out)}
.reel figcaption{font-size:16px; color:var(--muted)}
.reel figcaption b{color:var(--ink); font-weight:700}

/* written */
.written{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:var(--s9); align-items:start}
.chapters{list-style:none; margin:0; padding:0; columns:2; column-gap:var(--s7)}
.chapters li{break-inside:avoid; display:grid; grid-template-columns:2em minmax(0,1fr); gap:var(--s2); padding-block:14px; border-block-end:1px solid var(--line); font-size:19px}
.chapters li .n{color:var(--faint); font-weight:300}
.chapters li b{font-weight:500}
.written .note{display:grid; gap:var(--s4); color:var(--muted); max-width:46ch}
.written .note b{color:var(--ink)}

/* voices */
.voices{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--s9); align-items:start; margin-block-start:var(--s8)}
.v-head{display:flex; flex-wrap:wrap; align-items:end; justify-content:space-between; gap:var(--s6)}
.g-rate{display:grid; grid-template-columns:auto auto; gap:2px var(--s4); align-items:center; padding:var(--s4) var(--s5); border:1px solid var(--line); border-radius:var(--r); background:var(--bg2); text-decoration:none; color:var(--ink); transition:border-color 200ms ease}
.g-rate:hover{border-color:var(--sky)}
.g-rate .num{grid-row:span 2; font-size:48px; font-weight:300; line-height:1; color:var(--white)}
.g-rate .stars{display:flex; gap:2px; color:var(--sky2)} .g-rate .stars svg{width:20px; height:20px}
.g-rate small{font-size:15px; color:var(--muted)}
.wall{columns:2; column-gap:var(--s4)}
.wall figure{break-inside:avoid; margin:0 0 var(--s5); display:grid; gap:var(--s2)}
.wall img{width:100%; border-radius:14px; box-shadow:0 18px 40px -20px rgb(0 0 0 / .75)}
.wall figcaption{font-size:14px; color:var(--muted)}
.wall figcaption b{color:var(--ink); font-weight:700}
.v-note{font-size:15px; color:var(--muted); margin-block-start:var(--s4)}
.chat{display:grid; gap:var(--s3)}
.shot{margin:0 0 var(--s3); display:grid; gap:var(--s2); justify-self:stretch}
.shot img{width:100%; max-width:520px; border-radius:12px; box-shadow:0 18px 40px -18px rgb(0 0 0 / .7); justify-self:start}
.shot figcaption{font-size:13px; color:var(--muted)}
.bub{justify-self:start; max-width:86%; background:#132748; border-radius:16px 16px 16px 4px; padding:12px 16px 9px}
.bub:nth-child(even){justify-self:end; border-radius:16px 16px 4px 16px; background:var(--panel)}
.bub p{font-size:clamp(18px,1.7vw,22px); line-height:1.45; color:var(--ink)}
.bub small{display:flex; justify-content:space-between; gap:var(--s5); font-size:13px; color:var(--muted); margin-block-start:6px}
.quotes{display:grid; gap:var(--s7)}
.quotes blockquote{margin:0; display:grid; gap:var(--s3)}
.quotes blockquote p{font-size:clamp(20px,2vw,26px); font-weight:300; line-height:1.45; color:var(--ink)}
.quotes cite{font-style:normal; font-size:15px; color:var(--muted)}
.quotes cite b{color:var(--ink); font-weight:700}

/* contact */
.contact{position:relative; background:var(--navy); overflow:hidden}
.contact .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--s8); align-items:start}
.contact .h2{font-size:clamp(40px,6vw,96px)}
.contact .lede{color:#c9d6ee}
.phone{font-size:clamp(34px,4.4vw,60px); font-weight:200; color:var(--white); letter-spacing:-.01em}
.contact .ctas{display:flex; flex-wrap:wrap; gap:var(--s3)}
.contact .btn-primary{background:var(--white); color:var(--navy)}
@media (hover:hover) and (pointer:fine){ .contact .btn-primary:hover{background:#dce8ff} }
.contact .btn-line{background:transparent}
.contact .mail{color:#c9d6ee; font-size:17px}
form{background:var(--bg); padding:var(--s6); border-radius:4px; display:grid; gap:var(--s4); border:1px solid #1f3f78}
form h3{font-size:22px; font-weight:700}
.field{display:grid; gap:var(--s2)}
.field label{font-size:15px; font-weight:500; color:var(--ink)}
.field input,.field textarea{font:400 17px/1.5 var(--font); color:var(--ink); background:var(--field); border:1px solid #2a3d63; border-radius:var(--r); padding:12px 14px; width:100%}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--sky); outline-offset:1px; border-color:var(--sky)}
.err{font-size:14px; color:var(--error)}
.field.bad input{border-color:var(--error)}
.check{display:flex; gap:var(--s2); align-items:flex-start; font-size:15px; color:var(--muted)}
.check input{width:20px; height:20px; margin-top:4px; accent-color:var(--sky); flex:none}
.formmsg{font-size:16px; padding:var(--s3) var(--s4); border-radius:var(--r); color:var(--ok); border:1px solid var(--ok)}
form .btn{justify-self:start}



/* responsive */
@media (max-width:1060px){ .navlinks{display:none} .menu{display:block} }
@media (max-width:1024px){ .brand{flex-direction:column; gap:3px; text-align:center} .brand img{height:40px} .brand .tag{font-size:.88rem} }
@media (max-width:900px){
  .sec{padding-block:var(--s9)}
  .hero{grid-template-columns:minmax(0,1fr); min-height:0}
  .screen{grid-row:1; grid-column:1; height:min(60svh,540px)}
  .hero .copy{grid-row:2; grid-column:1; padding:var(--s5) 20px var(--s8); gap:var(--s5)}
  .screen::before{background:linear-gradient(to top, var(--bg) 0%, rgb(6 14 29 / 0) 28%), linear-gradient(to bottom, rgb(6 14 29 / .75) 0%, rgb(6 14 29 / 0) 30%)}
  .reelbar{bottom:var(--s3)}
  .reelbar .cap{display:none}
  .hero h1{font-size:clamp(32px,8.6vw,42px); line-height:1.1}
  .hero .sub{font-size:17px; max-width:34ch}
  .hero .ctas .btn-line{display:none}
  .hero .ctas .btn-primary{flex:1; justify-content:center}
  .facts .wrap{grid-template-columns:minmax(0,1fr)}
  .fact{padding-inline:0; padding-block:var(--s5); grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:var(--s4)}
  .fact + .fact{border-inline-start:0; border-block-start:1px solid var(--line)}
  .person,.written,.voices,.contact .wrap{grid-template-columns:minmax(0,1fr); gap:var(--s7)}
  .meet .copy{padding-block-end:var(--s4)}
  .portrait{order:-1; max-width:380px; justify-self:center}
  .portrait figcaption{display:none}
  .chapters{columns:1}
  .wall{columns:1} .wall figure{max-width:420px}
  .reel{grid-auto-columns:76vw}
}
@media (max-width:440px){
  .nav .btn .wl{display:none} .nav .btn{padding:0 13px}
  .btn{padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important; animation:none!important}
}

/* ===== skip link ===== */
.skip{position:fixed; top:10px; inset-inline-start:10px; z-index:9999; background:var(--white); color:var(--navy); font-weight:700; padding:12px 18px; border-radius:var(--r); text-decoration:none; transform:translateY(-200%); transition:transform 160ms var(--ease-out)}
.skip:focus{transform:none}
main:focus{outline:none}

/* ===== header additions: about dropdown, "soon" badge, mobile groups ===== */
.soon{display:inline-block; margin-inline-start:6px; padding:1px 7px; border-radius:20px; background:rgb(143 190 255 / .16); color:var(--sky2); font-size:11px; font-weight:700; letter-spacing:.02em; vertical-align:2px; line-height:1.6}
.ndrop{position:relative}
.ndrop summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px; color:#e8eef8; padding-block:6px; text-shadow:0 1px 2px rgb(0 0 0 / .35)}
.ndrop summary::-webkit-details-marker{display:none}
.ndrop summary .car{width:13px; height:13px; transition:transform 200ms var(--ease-out)}
.ndrop[open] summary .car{transform:rotate(180deg)}
.ndrop summary:hover{color:#fff}
.ndrop-menu{position:absolute; inset-inline-start:-12px; top:42px; min-width:180px; display:grid; padding:var(--s2); background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:0 20px 40px rgb(0 0 0 / .5); z-index:5}
.navlinks .ndrop-menu a{padding:10px 12px; border-radius:8px; text-shadow:none}
.navlinks .ndrop-menu a::after{display:none}
.navlinks .ndrop-menu a:hover{background:rgb(255 255 255 / .06)}
.menu .mgroup{display:grid; margin-block:2px}
.menu .mlabel{display:block; padding:10px 12px 2px; font-size:13px; color:var(--muted); font-weight:500}
.menu .mgroup a{padding-inline-start:26px}
.menu .langs .mlabel{grid-column:1 / -1}
@media (max-width:1239px){ .navlinks{display:none} .menu{display:block} .lang{display:none}
  .nav .menu{position:static}
  .nav .menu nav{position:fixed; inset-inline:auto; top:calc(env(safe-area-inset-top,0px) + 80px); left:12px; right:12px; min-width:0; max-height:calc(100svh - 100px); overflow-y:auto}
  .nav .menu nav a{font-size:17px; padding:12px 14px} }
@media (min-width:1240px) and (max-width:1519px){
  .brand img{height:40px}
  .brand .tag{font-size:.95rem}
  .lang summary span{display:none}
  .nav .btn{padding:0 14px}
}

/* ===== footer ===== */
.foot{padding-block:var(--s8) var(--s6); font-size:15px; color:var(--muted); background:var(--bg); border-top:1px solid var(--line); position:relative}
.foot .ftop{display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:var(--s7)}
.foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.foot a{color:var(--muted); text-decoration:none}
.foot a:hover,.foot a:focus-visible{color:var(--ink); text-decoration:underline}
.foot .fh{font-size:15px; font-weight:700; color:var(--ink); margin:0 0 var(--s3); line-height:1.4; letter-spacing:0}
.fbrand{display:grid; gap:var(--s4); align-content:start}
.fbrand-logo{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.fbrand-logo img{height:40px; width:auto}
.fbrand-logo span{font-family:'GFS Didot',Didot,'Bodoni 72',Georgia,serif; letter-spacing:.06em; font-size:1rem; color:#fff}
.fsocial{display:grid; gap:var(--s2)}
.fsocial > span{font-size:14px; color:var(--muted)}
.fsocial-links{display:flex; gap:var(--s2)}
.fsocial-links a{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); transition:border-color 200ms ease, background-color 200ms ease}
.fsocial-links a:hover{border-color:var(--sky); background:rgb(255 255 255 / .04)}
.fsocial-links svg{width:18px; height:18px; fill:currentColor}
.fbottom{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s4); margin-block-start:var(--s7); padding-block-start:var(--s5); border-top:1px solid var(--line)}
.ftrust{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6)}
.ftrust li{display:flex; align-items:center; gap:8px; color:var(--ink); font-size:14px}
.ftrust svg{width:18px; height:18px; color:var(--sky2); flex:none}
.fcopy{font-size:14px}
@media (max-width:900px){
  .foot .ftop{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s6)}
  .fbrand{grid-column:1 / -1}
  .fbottom{flex-direction:column; align-items:flex-start}
  .foot{padding-block-end:120px}
}

/* ===== floating WhatsApp ===== */
.wa-fab{position:fixed; bottom:28px; left:28px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 28px rgb(37 211 102 / .45); z-index:200; transition:transform .25s; text-decoration:none}
.wa-fab:hover{transform:scale(1.08)}
.wa-fab svg{width:32px; height:32px; fill:#fff}
.wa-fab-label{position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); background:#075e54; color:#fff; font-size:14px; font-weight:700; white-space:nowrap; padding:8px 14px; border-radius:9px; box-shadow:0 4px 14px rgb(0 0 0 / .3); pointer-events:none}
@media (max-width:900px){ .wa-fab-label{display:none} .wa-fab{bottom:20px; left:16px; width:54px; height:54px} }

/* ===== accessibility menu ===== */
#acc-fab{position:fixed; bottom:28px; right:28px; z-index:9500; display:flex; flex-direction:column; align-items:center; gap:6px}
#acc-toggle{width:54px; height:54px; border-radius:50%; background:var(--cobalt); border:2px solid #fff; box-shadow:0 6px 22px rgb(0 0 0 / .45); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:transform .2s}
#acc-toggle:hover{transform:scale(1.06)}
#acc-toggle:focus-visible{outline:3px solid #ffbf00; outline-offset:3px}
#acc-toggle svg{width:32px; height:32px}
.acc-fab-word{background:#fff; color:var(--navy); font-size:12.5px; font-weight:800; padding:2px 12px; border-radius:20px; box-shadow:0 3px 11px rgb(0 0 0 / .35); white-space:nowrap; pointer-events:none; line-height:1.6}
#acc-panel{position:fixed; bottom:28px; right:96px; width:310px; max-width:calc(100vw - 32px); max-height:calc(100svh - 56px); overflow-y:auto; background:var(--panel); border:1px solid #2a3d63; border-radius:16px; box-shadow:0 20px 50px rgb(0 0 0 / .6); z-index:9600; padding:16px; display:none; color:var(--ink); font-size:15px; line-height:1.5}
#acc-panel.open{display:block}
.acc-head{display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px}
.acc-head h2{font-size:18px; font-weight:800; margin:0; line-height:1.3}
.acc-close{background:var(--bg2); border:1px solid var(--line); border-radius:8px; width:44px; height:44px; cursor:pointer; font-size:18px; color:var(--ink); display:grid; place-items:center; padding:0}
.acc-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.acc-opt{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; background:var(--bg2); border:1px solid var(--line); border-radius:11px; padding:12px 8px; cursor:pointer; font:700 13px/1.25 var(--font); color:var(--ink); text-align:center; min-height:78px; transition:border-color .15s, background-color .15s}
.acc-opt:hover{border-color:var(--sky)}
.acc-opt:focus-visible,.acc-close:focus-visible,.acc-reset:focus-visible{outline:3px solid #ffbf00; outline-offset:1px}
.acc-opt[aria-pressed="true"]{background:var(--cobalt); border-color:var(--sky2); color:#fff}
.acc-ico{width:26px; height:26px; display:flex; align-items:center; justify-content:center}
.acc-ico svg{width:24px; height:24px; stroke:var(--sky2); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.acc-opt[aria-pressed="true"] .acc-ico svg{stroke:#fff}
.acc-reset{width:100%; margin-top:12px; background:transparent; border:1.5px solid var(--sky2); color:var(--ink); border-radius:10px; padding:10px; cursor:pointer; font:800 14px var(--font); min-height:44px}
.acc-statement{display:block; text-align:center; padding:11px 0 2px; font-size:14px; font-weight:700}
.acc-note{font-size:13px; color:var(--muted); text-align:center; margin-top:6px}
@media (max-width:600px){
  #acc-panel{right:12px; left:12px; width:auto; bottom:12px; max-height:calc(100svh - 24px)}
  #acc-fab{bottom:20px; right:16px}
  #acc-toggle{width:50px; height:50px}
  #acc-toggle svg{width:30px; height:30px}
}

/* accessibility modes */
html.acc-fs1 :is(main,.foot){zoom:1.1}
html.acc-fs2 :is(main,.foot){zoom:1.2}
html.acc-fs3 :is(main,.foot){zoom:1.32}
html.acc-fs1 .navlinks{font-size:17px} html.acc-fs2 .navlinks,html.acc-fs3 .navlinks{font-size:18px}
html.acc-grayscale{filter:grayscale(1)}
html.acc-invert{filter:invert(1) hue-rotate(180deg)}
html.acc-invert :is(img,.flag,#acc-toggle,.wa-fab){filter:invert(1) hue-rotate(180deg)}
html.acc-contrast{--bg:#000; --bg2:#000; --panel:#000; --field:#000; --ink:#fff; --muted:#fff; --faint:#fff; --line:#fff; --sky:#ffe100; --sky2:#ffe100; --navy:#000}
html.acc-contrast body::after{display:none}
html.acc-contrast :is(.nav,.nav.solid,.contact,.legal-main){background:#000}
html.acc-contrast a:not(.btn):not(.skip){color:#ffe100}
html.acc-contrast .navlinks a,html.acc-contrast .ndrop summary{color:#ffe100; text-shadow:none}
html.acc-contrast .screen::before{opacity:.9}
html.acc-links a{text-decoration:underline!important; text-underline-offset:3px; outline:1px solid rgb(255 191 0 / .7); outline-offset:2px}
html.acc-readable,html.acc-readable *{font-family:Arial,Helvetica,sans-serif!important; letter-spacing:.02em!important; word-spacing:.06em!important}
html.acc-cursor,html.acc-cursor *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><path d='M6 3 L6 35 L14 27 L19 39 L25 36 L20 25 L32 25 Z' fill='%23000' stroke='%23fff' stroke-width='2'/></svg>") 6 3,auto!important}
html.acc-noanim *,html.acc-noanim *::before,html.acc-noanim *::after{animation:none!important; transition:none!important; scroll-behavior:auto!important}
html.acc-noanim .portrait img{transform:none}

/* ===== privacy notice ===== */
#cc-bar{position:fixed; bottom:0; right:0; left:0; z-index:9400; background:#0b1a33; color:var(--ink); padding:14px 18px; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; box-shadow:0 -6px 24px rgb(0 0 0 / .45); border-top:1px solid #2a3d63}
#cc-bar[hidden]{display:none}
#cc-bar p{margin:0; font-size:15px; line-height:1.6; max-width:720px}
.cc-actions{display:flex; align-items:center; gap:14px}
#cc-ok{background:#fff; color:var(--navy); border:0; border-radius:8px; padding:10px 26px; font:800 15px var(--font); cursor:pointer; min-height:44px}
#cc-ok:focus-visible{outline:3px solid #ffbf00; outline-offset:2px}
#cc-bar a{font-size:14px; font-weight:700; display:inline-flex; align-items:center; min-height:44px}
@media (max-width:600px){ #cc-bar{padding:12px 14px 14px; gap:8px} #cc-bar p{font-size:14px} }

/* ===== legal pages ===== */
.legal-main{padding-block:calc(env(safe-area-inset-top,0px) + 120px) var(--s9)}
.legal{max-width:820px}
.legal h1{font-size:clamp(40px,6vw,72px); font-weight:800; letter-spacing:-.02em; margin-block:var(--s3) var(--s3)}
.legal .upd{color:var(--muted); font-size:16px; margin-block-end:var(--s7)}
.legal h2{font-size:clamp(24px,2.6vw,32px); font-weight:700; margin-block:var(--s8) var(--s4); line-height:1.2}
.legal p{margin-block:0 var(--s4); color:#d5deeb}
.legal ul{margin:0 0 var(--s4); padding-inline-start:1.2em; display:grid; gap:10px; color:#d5deeb}
.legal li::marker{color:var(--sky2)}
.legal b{color:var(--ink)}
.legal .contact-line a{white-space:nowrap}
.tbl{overflow-x:auto; margin-block:0 var(--s5); border:1px solid var(--line); border-radius:var(--r)}
.tbl table{width:100%; border-collapse:collapse; font-size:16px; min-width:520px}
.tbl th,.tbl td{padding:12px 14px; text-align:start; border-bottom:1px solid var(--line); vertical-align:top}
.tbl th{background:var(--bg2); color:var(--ink); font-weight:700}
.tbl td{color:#d5deeb}
.tbl tr:last-child td{border-bottom:0}
.nav .brand{flex:none}
.foot li{overflow-wrap:anywhere}
.foot ul .ltr{display:inline}
@media (max-width:900px){ html:is(.acc-fs2,.acc-fs3) .foot .ftop{grid-template-columns:minmax(0,1fr)} }
/* floating buttons: keep the WhatsApp label off the hero slideshow, lift both buttons above the privacy notice, hide them under an open mobile menu */
.wa-fab-label{transition:opacity 200ms ease}
.nav:not(.solid) ~ .wa-fab-wrap .wa-fab-label{opacity:0}
body.cc-on .wa-fab,body.cc-on #acc-fab{bottom:calc(var(--ccH,90px) + 14px)}
.nav:has(.menu[open]) ~ :is(.wa-fab-wrap,#acc-fab){display:none}
/* ===== service-area map ===== */
.areas{background:var(--bg2); border-block:1px solid var(--line)}
.areas-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--s8); align-items:center}
.towns{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:16px; color:var(--muted)}
.towns li.home{color:var(--ink); font-weight:700}
.map{margin:0; min-width:0}
.map svg{display:block; width:100%; height:auto; max-height:720px}
.map .sea{fill:#030812}
.map .land{fill:var(--panel)}
.map .coast{fill:none; stroke:#2a3d63; stroke-width:1.2}
.map .seaname{fill:#4c5d7c; font:400 13px var(--font); text-anchor:middle}
.map .ring{fill:none; stroke:var(--sky2); stroke-width:1; opacity:.55}
.map .glow{fill:var(--sky2); opacity:.18}
.map .hdot{fill:var(--sky2)}
.map .lead{stroke:var(--sky2); stroke-width:.8}
.map .hname{fill:var(--ink); font:700 14px var(--font); text-anchor:middle}
.map .hsub{fill:var(--sky2); font:400 12px var(--font); text-anchor:middle}
.map .dots circle{fill:var(--ink); opacity:.85}
.map .names text{fill:var(--muted); font:400 12.5px var(--font); text-anchor:middle}
html.acc-contrast .map .sea{fill:#000} html.acc-contrast .map .coast{stroke:#fff}
@media (max-width:900px){
  .areas-grid{grid-template-columns:minmax(0,1fr); gap:var(--s6)}
}
@media (max-width:600px){
  .map .names,.map .hname{display:none}
  .map .hsub{font-size:22px; font-weight:700; transform:translateY(-6px)}
  .map svg{max-height:60svh; margin-inline:auto}
}

/* ===== left-to-right languages (English, French, Russian, Spanish) ===== */
html[dir="ltr"] .screen::before{background:linear-gradient(to right, var(--bg) 0%, rgb(6 14 29 / 0) 26%), linear-gradient(to top, rgb(6 14 29 / .85) 0%, rgb(6 14 29 / 0) 34%), linear-gradient(to bottom, rgb(6 14 29 / .78) 0%, rgb(6 14 29 / 0) 20%)}
html[dir="ltr"] .arrows svg{transform:scaleX(-1)}
html[dir="ltr"] .navlinks a::after{transform-origin:left}
html[dir="rtl"] input[type="tel"]{text-align:right}
html[dir="ltr"] input[type="tel"]{text-align:left}
html[lang="ru"]{--font:'Rubik','Segoe UI',Arial,sans-serif}
.phone a{color:inherit; text-decoration:none}
.phone a:hover{text-decoration:underline}
.contact .mail a{color:inherit}
/* when the full menu does not fit in one line (longer languages), fall back to the compact menu button */
html.nav-collapsed .navlinks{display:none}
html.nav-collapsed .menu{display:block}
html.nav-collapsed .lang{display:none}
html.nav-collapsed .nav .menu{position:static}
html.nav-collapsed .nav .menu nav{position:fixed; inset-inline:auto; top:calc(env(safe-area-inset-top,0px) + 80px); left:12px; right:12px; min-width:0; max-height:calc(100svh - 100px); overflow-y:auto}
html.nav-collapsed .nav .menu nav a{font-size:17px; padding:12px 14px}
/* keep the slideshow controls and the last footer row clear of the floating buttons */
@media (min-width:901px){ .reelbar{inset-inline-end:110px} .foot{padding-block-end:110px} }
/* longer words in the other languages: a slightly smaller scale for the big statements */
html:not([lang="he"]) .person .say{font-size:clamp(32px,3.9vw,60px); hyphens:manual}
html:not([lang="he"]) .h2{font-size:clamp(34px,4.6vw,68px)}
html[lang="ru"] .person .say,html[lang="ru"] .h2{overflow-wrap:break-word}
html:not([lang="he"]) .map .names text{font-size:11.5px}
@media (max-width:600px){ .foot .ftop{grid-template-columns:minmax(0,1fr)} }
details.menu:not([open]) > nav, details.lang:not([open]) > nav, details.ndrop:not([open]) > .ndrop-menu{display:none}
.legal h1{overflow-wrap:break-word; hyphens:auto}
html:not([lang="he"]) .legal h1{font-size:clamp(28px,6vw,64px)}

/* ===== inner pages: about, gallery, questions, guides, calculator, thank-you, 404 ===== */
/* Same language as the homepage: a big two-weight title over the dark ground, quiet hairlines between parts, photos without frames, navy for the one call to action on a page. */
.sub-main{padding-block-start:calc(env(safe-area-inset-top,0px) + 72px)}
.container{width:100%; max-width:1240px; margin-inline:auto; padding-inline:20px}
.page-hero{display:grid; gap:var(--s5); justify-items:start; padding-block:var(--s9) var(--s8); padding-inline:max(20px, calc((100% - 1200px) / 2));
  background:radial-gradient(ellipse 60% 90% at 10% 0%, rgb(0 71 171 / .22), rgb(0 71 171 / 0) 70%)}
html[dir="rtl"] .page-hero{background:radial-gradient(ellipse 60% 90% at 90% 0%, rgb(0 71 171 / .22), rgb(0 71 171 / 0) 70%)}
.page-hero h1{font-size:clamp(44px,6.2vw,96px); font-weight:900; letter-spacing:-.025em; line-height:1.02; max-width:18ch}
.page-hero h1 span{display:block; font-weight:400; color:var(--sky2)}
.page-hero p{font-size:clamp(18px,1.6vw,21px); color:var(--muted); max-width:52ch}
html:not([lang="he"]) .page-hero h1{font-size:clamp(36px,5.2vw,80px); overflow-wrap:break-word; hyphens:auto}
.sec-chip{display:inline-flex; align-items:center; gap:12px; font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--sky2); line-height:1.4}
.sec-chip::before{content:""; width:28px; height:1px; background:currentColor; flex:none}
.lead{font-size:clamp(18px,1.6vw,21px); color:var(--muted); max-width:52ch}

/* about */
.intro-sec{padding-block:var(--s9); background:var(--bg2); border-block:1px solid var(--line)}
.intro-sec .container{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:start}
.intro-text{font-size:clamp(24px,2.5vw,36px); font-weight:300; line-height:1.4; color:var(--ink)}
.content-card{display:grid; gap:var(--s4); color:var(--muted)}
.ceo-sec{padding-block-start:var(--s10); overflow:hidden}
.ceo-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:var(--s9); align-items:end}
.ceo-text-card{display:grid; gap:var(--s4); padding-block-end:var(--s9)}
.ceo-text-card h2{font-size:clamp(36px,4.6vw,68px); font-weight:800; letter-spacing:-.02em; margin-block-end:var(--s3)}
.ceo-text-card p{color:#d5deeb; max-width:58ch}
.ceo-img-wrap{position:relative; display:grid; justify-items:center; align-self:end}
.ceo-img-wrap::before{content:""; position:absolute; inset:4% -6% 0; border-radius:50%; background:radial-gradient(closest-side, rgb(0 71 171 / .62), rgb(0 71 171 / .18) 60%, rgb(0 71 171 / 0))}
.ceo-img-wrap img{position:relative; width:min(100%,560px); -webkit-mask-image:linear-gradient(to top, transparent 0, #000 26%); mask-image:linear-gradient(to top, transparent 0, #000 26%)}
.values-sec{padding-block:var(--s10); border-top:1px solid var(--line)}
.values-sec .container > div:first-child{display:grid; gap:var(--s4); justify-items:start; margin-block-end:var(--s8)}
.values-sec h2{font-size:clamp(36px,5vw,72px); font-weight:800; letter-spacing:-.02em}
.values-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s6)}
.vcard{display:grid; gap:var(--s3); align-content:start; padding-block-start:var(--s5); border-top:1px solid var(--line)}
.vcard-icon{width:40px; height:40px; color:var(--sky2)}
.vcard-icon svg{width:32px; height:32px}
.vcard h3{font-size:22px; font-weight:700; line-height:1.25}
.vcard p{color:var(--muted); font-size:17px}

/* gallery */
.gallery-sec{padding-block:var(--s6) var(--s9)}
.gallery-grid{columns:3; column-gap:var(--s4)}
.gitem{break-inside:avoid; margin:0 0 var(--s6); display:grid; gap:var(--s3)}
.gitem.gfeat{column-span:all; margin-block-end:var(--s7)}
.gitem img{width:100%; background:var(--bg2)}
.gitem.gfeat img{max-height:78svh; object-fit:cover}
.gitem-label{display:grid; gap:2px; font-size:16px; font-weight:700; color:var(--ink); line-height:1.4}
.gitem-label span{font-size:15px; font-weight:400; color:var(--muted)}
.g-note{text-align:center; color:var(--muted); font-size:15px; margin-block-start:var(--s5)}
.showcase-strip{background:var(--navy)}
.showcase-inner{max-width:1240px; margin-inline:auto; padding:var(--s9) 20px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s8); align-items:center}
.showcase-img img{width:100%; aspect-ratio:4/3; object-fit:cover}
.showcase-text{display:grid; gap:var(--s4); justify-items:start}
.showcase-text .sec-chip{color:#c9d6ee}
.showcase-text h2{font-size:clamp(32px,4vw,56px); font-weight:800; letter-spacing:-.02em}
.showcase-text p{color:#c9d6ee; max-width:48ch}

/* light buttons on navy panels */
:is(.showcase-cta,.wa-btn){display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 28px; border-radius:var(--r); background:var(--white); color:var(--navy); font:700 17px/1 var(--font); text-decoration:none; margin-block-start:var(--s2); transition:background-color 200ms ease, transform 160ms var(--ease-out)}
:is(.showcase-cta,.wa-btn):active{transform:scale(.97)}
:is(.showcase-cta,.wa-btn) svg{width:20px; height:20px; flex:none}
.wa-btn svg{fill:currentColor}
@media (hover:hover) and (pointer:fine){ :is(.showcase-cta,.wa-btn):hover{background:#dce8ff} }

/* questions */
.faq-area{max-width:900px; padding-block:var(--s5) var(--s9); display:grid; gap:var(--s8)}
.faq-group-title{font-size:14px; font-weight:700; letter-spacing:.06em; color:var(--sky2); padding-block-end:var(--s3); border-bottom:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding-block:22px; font-size:clamp(18px,1.7vw,22px); font-weight:500; line-height:1.4; color:var(--ink); cursor:pointer}
.faq-q:hover{color:var(--white)}
.faq-arrow{width:22px; height:22px; flex:none; color:var(--sky2); transition:transform 220ms var(--ease-out)}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-a{display:none; padding-block-end:var(--s5)}
.faq-item.open .faq-a{display:block}
.faq-a p{color:#d5deeb; max-width:68ch}
.still-q{background:var(--navy); padding:var(--s7) var(--s6); display:grid; gap:var(--s4); justify-items:start; border-radius:4px}
.still-q h2{font-size:clamp(28px,3vw,40px); font-weight:800; letter-spacing:-.01em}
.still-q p{color:#c9d6ee; max-width:56ch}

/* guides, articles, calculator */
.content-area{max-width:820px; padding-block:var(--s5) var(--s9)}
.content-area > h2,.content-area > section > h2{font-size:clamp(26px,2.8vw,36px); font-weight:700; margin-block:var(--s8) var(--s4); line-height:1.2}
.content-area > h3{font-size:22px; font-weight:700; margin-block:var(--s6) var(--s3); line-height:1.3}
.content-area > p{margin-block:0 var(--s4); color:#d5deeb}
.content-area > ul{margin:0 0 var(--s4); padding-inline-start:1.2em; display:grid; gap:10px; color:#d5deeb}
.content-area li::marker{color:var(--sky2)}
.content-area b,.content-area strong{color:var(--ink)}
.article-fig{margin:0 0 var(--s7)}
.article-fig img{width:100%; max-height:560px; object-fit:cover}
.article-fig.tall img{max-width:520px; max-height:none}
.back-link{margin-block:var(--s7) 0}
.back-link a{font-weight:700}
.art-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4)}
.art-card{display:grid; gap:var(--s3); align-content:start; padding:var(--s6); background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); text-decoration:none; transition:border-color 200ms ease}
.art-card:hover,.art-card:focus-visible{border-color:var(--sky)}
.art-card h2{font-size:24px; font-weight:700; line-height:1.3}
.art-card p{color:var(--muted)}
.art-more{color:var(--sky2); font-weight:700; font-size:16px; text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px}
.contact-block{background:var(--navy); padding:var(--s6); border-radius:4px; display:grid; gap:var(--s3); margin-block-start:var(--s8)}
.contact-block :is(h2,h3){font-size:clamp(24px,2.4vw,30px); font-weight:800; line-height:1.25; margin:0}
.contact-block p{color:#c9d6ee; margin:0}
.contact-block a{color:var(--white); font-weight:700}
.update-bar{display:flex; gap:var(--s3); align-items:flex-start; padding:var(--s4) var(--s5); background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); margin-block-end:var(--s4)}
.update-bar svg{width:22px; height:22px; flex:none; color:var(--sky2); margin-block-start:4px}
.highlight-box{border-inline-start:3px solid var(--sky2); background:var(--bg2); padding:var(--s4) var(--s5); margin-block:var(--s6)}
.highlight-box p{color:var(--ink)}

/* thank-you */
.p-thank-you{display:grid; place-items:center; min-height:calc(100svh - 120px)}
.ty-card{display:grid; gap:var(--s5); justify-items:center; text-align:center; max-width:680px; padding:var(--s9) 20px}
.ty-logo{height:56px; width:auto}
.ty-card h1{font-size:clamp(40px,6vw,80px); font-weight:900; letter-spacing:-.025em}
.ty-lead{font-size:clamp(18px,1.6vw,21px); color:var(--muted)}
.ty-actions{display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s3); margin-block-start:var(--s3)}
.ty-btn{display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 28px; border-radius:var(--r); font:700 17px/1 var(--font); text-decoration:none; color:var(--white); border:1px solid transparent; transition:background-color 200ms ease, border-color 200ms ease}
.ty-btn svg{width:20px; height:20px; fill:currentColor; flex:none}
.ty-home{border-color:rgb(255 255 255 / .32)}
.ty-wa{background:var(--cobalt)}
@media (hover:hover) and (pointer:fine){ .ty-home:hover{border-color:var(--sky)} .ty-wa:hover{background:#0a56c8} }

/* 404 */
.error-inner{max-width:900px; margin-inline:auto; padding:var(--s8) 20px var(--s9); display:grid; gap:var(--s5); justify-items:center; text-align:center}
.error-num{font-size:clamp(120px,22vw,260px); font-weight:200; line-height:.9; letter-spacing:-.04em; color:#5682c4}
.error-icon{display:none}
.error-inner h1{font-size:clamp(36px,5vw,64px); font-weight:800; letter-spacing:-.02em}
.error-inner > p{color:var(--muted); max-width:56ch}
.error-links{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3); width:100%; margin-block:var(--s4)}
.error-link{display:grid; justify-items:center; gap:10px; padding:var(--s5) var(--s3); background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); color:var(--ink); text-decoration:none; font-weight:500; transition:border-color 200ms ease}
.error-link:hover{border-color:var(--sky)}
.error-link svg{width:24px; height:24px; color:var(--sky2)}
.error-cta{display:inline-flex; align-items:center; gap:10px; min-height:54px; padding:0 28px; border-radius:var(--r); background:var(--cobalt); color:var(--white); font:700 17px/1 var(--font); text-decoration:none}
.error-cta svg{width:20px; height:20px; fill:currentColor}

/* current page in the menus */
.navlinks a[aria-current="page"],.menu nav a[aria-current="page"]{color:var(--white)}
.navlinks > a[aria-current="page"]::after{transform:scaleX(1)}
.ndrop-menu a[aria-current="page"],.menu nav a[aria-current="page"]{background:rgb(110 168 255 / .12)}
.ndrop:has(a[aria-current="page"]) summary{color:var(--white)}

/* high contrast mode on the inner pages */
html.acc-contrast :is(.page-hero,.showcase-strip,.still-q,.contact-block,.intro-sec){background:#000}
html.acc-contrast :is(.showcase-strip,.still-q,.contact-block,.highlight-box,.update-bar,.art-card,.error-link){outline:1px solid #fff}
html.acc-contrast :is(.ceo-text-card p,.faq-a p,.content-area > p,.content-area > ul,.still-q p,.showcase-text p,.showcase-text .sec-chip,.contact-block p){color:#fff}
html.acc-contrast .ceo-img-wrap::before{display:none}
html.acc-contrast :is(.showcase-cta,.wa-btn){background:#ffe100; color:#000}

@media (max-width:900px){
  .page-hero{padding-block:var(--s8) var(--s6)}
  .intro-sec .container,.ceo-grid,.showcase-inner{grid-template-columns:minmax(0,1fr); gap:var(--s6)}
  .intro-sec{padding-block:var(--s7)}
  .ceo-sec{padding-block-start:var(--s8)}
  .ceo-img-wrap{order:-1; max-width:380px; justify-self:center}
  .ceo-text-card{padding-block-end:var(--s8)}
  .values-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values-sec,.showcase-inner{padding-block:var(--s8)}
  .gallery-grid{columns:2}
  .art-cards{grid-template-columns:minmax(0,1fr)}
  .still-q,.contact-block{padding:var(--s6) var(--s5)}
}
@media (max-width:560px){
  .values-grid{grid-template-columns:minmax(0,1fr)}
  .gallery-grid{columns:1}
  .gitem.gfeat img{max-height:none}
  .error-links{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* Google rating: the stars fill to the exact figure (set from rating.json at build time) */
.g-rate .stars{--p:100%; -webkit-mask-image:linear-gradient(to right, #000 var(--p), rgb(0 0 0 / .3) var(--p)); mask-image:linear-gradient(to right, #000 var(--p), rgb(0 0 0 / .3) var(--p))}
html[dir="rtl"] .g-rate .stars{-webkit-mask-image:linear-gradient(to left, #000 var(--p), rgb(0 0 0 / .3) var(--p)); mask-image:linear-gradient(to left, #000 var(--p), rgb(0 0 0 / .3) var(--p))}
/* author line under an article title */
.page-hero .byline{font-size:16px; margin-block-start:calc(var(--s3) * -1)}
.page-hero .byline a{color:inherit; text-decoration:underline; text-underline-offset:.22em}

/* mobile menu button: three lines instead of the word (Netanel, 12.10.2026). The lines turn into an X while the menu is open. */
.menu summary{width:44px; min-width:44px; height:44px; padding:0; justify-content:center}
.menu .burger{position:relative; display:block; width:20px; height:14px}
.menu .burger i{position:absolute; inset-inline:0; height:2px; border-radius:2px; background:currentColor; transition:transform 220ms var(--ease-out), opacity 150ms ease}
.menu .burger i:nth-child(1){top:0}
.menu .burger i:nth-child(2){top:6px}
.menu .burger i:nth-child(3){top:12px}
.menu[open] .burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[open] .burger i:nth-child(2){opacity:0}
.menu[open] .burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){ .menu .burger i{transition:none} }
/* very narrow phones (320px): the header row fits without the WhatsApp button running off the edge */
@media (max-width:359px){ .nav .wrap{gap:8px; padding-inline:12px} .brand img{height:36px} .brand .tag{font-size:.78rem; letter-spacing:.05em} }