/* אריס מדיה v3 — concept: night highway. Black, the logo's red, large photography, signage-scale type. Single dark theme by design. */
:root{
  --bg:#0A0A0C;
  --bg2:#121216;
  --bg3:#1A1A20;
  --ink:#F5F5F7;
  --muted:#9A9DA8;
  --line:rgba(255,255,255,.1);
  --red:#E5202B;
  --red2:#FF4D57;
  --on-red:#fff;
  --link:#FF7A82;
  --font:"Heebo","Arial Hebrew","Segoe UI",Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px));
  --gr:max(16px,env(safe-area-inset-right,0px));
  --maxw:1240px;
  --r:18px;
  color-scheme:dark;
}
:root[data-contrast="high"]{--bg:#000;--bg2:#000;--bg3:#111;--ink:#fff;--muted:#e6e6e6;--line:#fff;--link:#FFB3B8}
:root[data-size="large"]{font-size:118%}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;direction:rtl}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
img,svg,video{max-width:100%;display:block}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--red2);outline-offset:3px}
h1,h2,h3,h4{line-height:1.08;margin:0 0 .5em;text-wrap:balance;font-weight:800;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6.2vw,5rem);font-weight:900}
h2{font-size:clamp(1.9rem,3.8vw,3rem)}
h3{font-size:1.35rem}
h4{font-size:1.05rem;font-weight:700}
p{margin:0 0 1em;max-width:62ch}
ul,ol{padding-inline-start:1.3em}
.muted{color:var(--muted)}
.skip{position:absolute;inset-inline-start:-999px;top:8px;background:var(--red);color:#fff;padding:.5em 1em;z-index:100;font-weight:700;border-radius:8px}
.skip:focus{inset-inline-start:16px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-left:var(--gl);padding-right:var(--gr)}
.band{padding-block:clamp(3.5rem,8vw,6.5rem)}
.band.alt{background:var(--bg2)}
.band-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1.5rem 3rem;margin-bottom:2.5rem}
.band-head p{color:var(--muted);margin:0;max-width:46ch;font-size:1.1rem}
@media (max-width:760px){.band-head{grid-template-columns:1fr}}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--muted);font-weight:500;font-size:.95rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:28px;height:3px;background:var(--red);border-radius:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:.9em 1.6em;border-radius:999px;font:inherit;font-weight:700;text-decoration:none;border:1.5px solid rgba(255,255,255,.25);color:var(--ink);background:transparent;cursor:pointer;line-height:1.2;transition:transform .15s,background .15s,border-color .15s}
.btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.6)}
.btn.primary{background:var(--red);border-color:var(--red);color:var(--on-red);box-shadow:0 10px 30px -10px rgba(229,32,43,.7)}
.btn.primary:hover{background:var(--red2);border-color:var(--red2)}
.btn.small{padding:.6em 1.15em;font-size:.95rem}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(10,10,12,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:1.4rem;padding-block:.9rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;text-decoration:none;color:inherit}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:1.5rem;flex-wrap:wrap;margin-inline-start:auto}
.nav a{color:var(--ink);text-decoration:none;font-weight:500;opacity:.8;padding:.3em 0;border-bottom:2px solid transparent}
.nav a[aria-current="page"],.nav a:hover{opacity:1;border-bottom-color:var(--red)}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.3);color:inherit;padding:.5em .9em;border-radius:999px;font:inherit;font-weight:700;margin-inline-start:auto}
.head-cta{display:flex;gap:.6rem;align-items:center}
@media (max-width:860px){.nav-toggle{display:inline-block}.nav{display:none;flex-direction:column;gap:.3rem;width:100%;padding-block:.6rem}.nav.open{display:flex}.head-cta{display:none}}

/* hero */
.hero{position:relative;overflow:hidden;min-height:min(86vh,820px);display:grid;align-items:center;isolation:isolate}
.hero .photo{position:absolute;inset:0;z-index:-2;background:url("../assets/img/hero.jpg") 0% 32%/cover no-repeat}
.hero .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,10,12,.15) 0%,rgba(10,10,12,.6) 42%,rgba(10,10,12,.95) 66%,var(--bg) 100%),linear-gradient(180deg,rgba(10,10,12,.5) 0%,transparent 30%,transparent 70%,var(--bg) 100%)}
.hero .wrap{padding-block:clamp(4rem,10vw,7rem) clamp(3rem,6vw,5rem);display:grid;grid-template-columns:minmax(0,640px) 1fr;gap:2rem}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr}.hero .photo{background-position:35% 20%}.hero .shade{background:linear-gradient(180deg,rgba(10,10,12,.55),rgba(10,10,12,.85) 55%,var(--bg) 100%)}}
.hero h1{margin-bottom:1.2rem}
.hero h1 em{font-style:normal;color:var(--red2)}
.hero .lede{font-size:clamp(1.1rem,1.6vw,1.35rem);color:#D7D9E0;max-width:48ch;font-weight:300}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.8rem;align-items:center}
.cta-row .phone{font-weight:700;color:var(--ink);text-decoration:none;font-variant-numeric:tabular-nums;font-size:1.1rem;opacity:.9}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (max-width:760px){.hero-stats{grid-template-columns:1fr 1fr}}
.hero-stats div{background:var(--bg);padding:1.4rem 1.2rem}
.hero-stats b{display:block;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:900;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hero-stats b small{font-size:.5em;color:var(--red2);font-weight:800;margin-inline-start:.1em}
.hero-stats span{color:var(--muted);font-size:.92rem}

/* answer block */
.answer{border-inline-start:3px solid var(--red);padding:1rem 1.4rem;background:var(--bg2);border-radius:0 12px 12px 0;margin:0 0 2.2rem;font-size:1.12rem;max-width:74ch;color:#E3E5EA}
[dir=rtl] .answer{border-radius:12px 0 0 12px}
.answer p{margin:0;max-width:none}

/* facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;margin:0 0 2.5rem;padding:0;list-style:none;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.facts li{padding:1.3rem 1.3rem;background:var(--bg2)}
.facts b{display:block;font-size:1.7rem;font-weight:900;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:.3rem}
.facts b.num{font-size:clamp(2rem,3.4vw,2.8rem)}
.facts span{color:var(--muted);font-size:.93rem}

/* photo cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.3rem}
.card{position:relative;border-radius:var(--r);overflow:hidden;background:var(--bg3);min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);transition:transform .25s,border-color .25s}
.card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.25)}
.card .thumb{aspect-ratio:16/10;background:var(--bg3) center/cover no-repeat;position:relative;max-width:100%}
.card .thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(10,10,12,.85))}
.card .thumb.bb{background-image:url("../assets/img/fmt-billboard.jpg")}
.card .thumb.wall{background-image:url("../assets/img/fmt-wall.jpg")}
.card .thumb.led{background-image:url("../assets/img/fmt-digital.jpg")}
.card .thumb.str{background-image:url("../assets/img/photo-ta.jpg");background-position:center 20%}
.card .thumb.bus{background-image:url("../assets/img/fmt-transit.jpg")}
.card .body{padding:1.2rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.card h2,.card h3{margin:0;font-size:1.3rem}
.card h2 a,.card h3 a{color:inherit;text-decoration:none}
.card h2 a::after,.card h3 a::after{content:"";position:absolute;inset:0}
.card p{margin:0;color:var(--muted);max-width:none;font-size:.98rem}
.card a.more{margin-top:auto;font-weight:700;text-decoration:none;padding-top:.5rem;color:var(--red2)}
.card .tags{display:flex;flex-wrap:wrap;gap:.4rem}
.card .tags span{font-size:.8rem;border:1px solid var(--line);border-radius:999px;padding:.15em .75em;color:var(--muted)}
.grid.feature{grid-template-columns:repeat(6,1fr)}
.grid.feature .card:nth-child(1),.grid.feature .card:nth-child(2){grid-column:span 3}
.grid.feature .card:nth-child(n+3){grid-column:span 2}
.grid.feature .card:nth-child(-n+2) .thumb{aspect-ratio:16/8}
@media (max-width:900px){.grid.feature{grid-template-columns:1fr 1fr}.grid.feature .card{grid-column:span 1!important}}
@media (max-width:560px){.grid.feature{grid-template-columns:1fr}}

/* process */
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2.5rem 3rem}
.steps li{counter-increment:s;border-top:1px solid var(--line);padding-top:1.4rem}
.steps li::before{content:"0" counter(s);display:block;font-size:3rem;font-weight:900;line-height:1;color:var(--red);letter-spacing:-.04em;margin-bottom:.8rem;font-variant-numeric:tabular-nums}
.steps h3{margin:0 0 .5rem;font-size:1.3rem}
.steps p{color:var(--muted);max-width:none}
.steps .time{color:var(--ink);font-weight:700;margin:0;font-variant-numeric:tabular-nums}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.4rem}
blockquote{margin:0;padding:2rem 2rem 1.6rem;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);font-size:1.3rem;line-height:1.45;font-weight:400;position:relative}
blockquote::before{content:"“";display:block;font-size:4rem;line-height:.6;color:var(--red);margin-bottom:.8rem;font-weight:900}
blockquote footer{font-size:.95rem;color:var(--muted);margin-top:1.2rem}

/* photo strip */
.strip{position:relative;min-height:380px;display:grid;align-items:end;overflow:hidden;background:url("../assets/img/photo-ta.jpg") center 30%/cover no-repeat}
.strip::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg2) 0%,rgba(10,10,12,.2) 35%,rgba(10,10,12,.9) 100%)}
.strip .wrap{position:relative;padding-block:3rem}
.strip h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:0 0 .4rem}
.strip p{margin:0;color:#D7D9E0}

/* article */
.article{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:4rem}
@media (max-width:900px){.article{grid-template-columns:1fr}.toc{display:none}}
.article .body{min-width:0}
.article section{margin-bottom:2.6rem}
.article .body p{color:#D7D9E0}
.toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 92px);align-self:start;border-radius:var(--r);padding:1.3rem 1.4rem;background:var(--bg2);border:1px solid var(--line)}
.toc h2{font-size:1rem;font-weight:700;margin-bottom:.7rem}
.toc ol{margin:0;padding-inline-start:1.2em;display:grid;gap:.35rem}
.toc a{text-decoration:none;color:var(--ink);opacity:.85}
.meta{color:var(--muted);font-size:.95rem;margin-bottom:1.5rem}
.page-head{position:relative;padding-block:3rem 2.5rem;overflow:hidden;background:var(--bg2)}
.page-head::before{content:"";position:absolute;inset:0;background:url("../assets/img/road.jpg") center/cover no-repeat;opacity:.28}
.page-head::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,22,.3),var(--bg2))}
.page-head .wrap{position:relative}
.page-head h1{margin-bottom:.2rem}
.breadcrumb{font-size:.92rem;color:var(--muted);margin:0 0 1.2rem}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumb li+li::before{content:"‹";margin-inline-end:.4rem}
.breadcrumb a{color:var(--muted);text-decoration:none}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;margin:1rem 0 1.5rem;border-radius:12px;border:1px solid var(--line)}
th,td{text-align:start;padding:.85em 1em;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-weight:700;background:var(--bg3)}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:.5rem 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.12rem;padding:.7rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;font-weight:400;color:var(--muted)}
.faq details[open] summary::after{content:"–";border-color:var(--red);color:var(--red2)}
.faq p{max-width:72ch;color:#D7D9E0}

/* form */
.form{display:grid;gap:1rem;max-width:600px;border-radius:var(--r);padding:2rem;background:var(--bg3);border:1px solid var(--line)}
.form label{display:grid;gap:.35rem;font-weight:600}
.form label:not(.check){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3rem}
.form label:not(.check)>input,.form label:not(.check)>select,.form label:not(.check)>textarea{flex-basis:100%}
.form input,.form select,.form textarea{font:inherit;padding:.8em .95em;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--red)}
.form .check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:.95rem;color:#D7D9E0}
.form .check input{width:auto;margin-top:.35em;accent-color:var(--red)}
.form .req{color:var(--red2)}
.form .note{font-size:.9rem;color:var(--muted);max-width:none}
.form .ok{background:var(--bg);padding:1rem;border-radius:10px;font-weight:600}
.form .err{color:var(--red2);font-weight:600;font-size:.95rem}
.form legend h2{font-size:1.6rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* cta band */
.cta-band{position:relative;overflow:hidden;background:#0A0A0C url("../assets/img/hero.jpg") center 30%/cover no-repeat;color:#fff}
.cta-band::before{content:"";position:absolute;inset:0;background:linear-gradient(270deg,rgba(10,10,12,.88) 0%,rgba(10,10,12,.55) 50%,rgba(10,10,12,.35) 100%)}
.cta-band .wrap{position:relative;padding-block:clamp(4rem,9vw,7rem)}
.cta-band h2{font-size:clamp(2rem,4.5vw,3.4rem);max-width:16ch}
.cta-band p{opacity:.85;max-width:46ch;font-size:1.1rem}

/* footer */
.site-foot{padding-block:3.5rem 2rem;font-size:.95rem;background:var(--bg2);border-top:1px solid var(--line)}
.site-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
@media (max-width:820px){.site-foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.site-foot .cols{grid-template-columns:1fr}}
.site-foot .fh{margin-bottom:.7rem;font-size:1.05rem;font-weight:700}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.site-foot a{color:var(--ink);text-decoration:none;opacity:.8}
.site-foot a:hover{opacity:1;text-decoration:underline}
.site-foot p{color:var(--muted)}
.site-foot .legal{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);color:var(--muted);display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center}

/* consent + accessibility */
.consent{position:fixed;bottom:0;left:0;right:0;z-index:30;padding:0 var(--gr) calc(14px + env(safe-area-inset-bottom,0px)) var(--gl)}
.consent .wrap{background:var(--bg3);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:1rem 1.3rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;box-shadow:0 20px 50px -10px rgba(0,0,0,.7)}
.consent p{margin:0;max-width:none;flex:1 1 300px;font-size:.93rem;color:#D7D9E0}
.consent .acts{display:flex;gap:.5rem;flex-wrap:wrap}
.consent:not([hidden]) ~ .a11y-btn,.consent:not([hidden]) ~ .a11y-panel{display:none}
.a11y-btn{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(16px + env(safe-area-inset-left,0px));z-index:31;width:46px;height:46px;border-radius:50%;background:#fff;color:#000;border:0;font-size:1.25rem;cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.a11y-panel{position:fixed;bottom:calc(72px + env(safe-area-inset-bottom,0px));inset-inline-start:calc(16px + env(safe-area-inset-left,0px));z-index:31;background:var(--bg3);border:1px solid rgba(255,255,255,.15);border-radius:var(--r);padding:1rem;display:grid;gap:.5rem;width:min(260px,calc(100vw - 32px));box-shadow:0 20px 50px rgba(0,0,0,.6)}
.a11y-panel h2{font-size:1rem;margin:0 0 .2rem}
.a11y-panel button{font:inherit;padding:.55em .9em;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px;cursor:pointer;text-align:start}

.lead-list{columns:2;gap:2rem;padding-inline-start:1.2em}
@media (max-width:600px){.lead-list{columns:1}}
.lead-list li{margin-bottom:.4rem}
.roads{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.5rem 0 1.8rem}
.roads li{border:1px solid rgba(255,255,255,.2);font-weight:600;padding:.35em 1em;border-radius:999px;font-size:.93rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.city-photo{margin:0;position:relative;max-height:520px;overflow:hidden;background:var(--bg2)}
.city-photo img{width:100%;height:clamp(260px,42vw,520px);object-fit:cover;display:block}
.city-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,12,.35),transparent 30%,transparent 70%,var(--bg))}
.city-photo figcaption{position:absolute;bottom:.6rem;inset-inline-end:var(--gr);font-size:.75rem;color:rgba(255,255,255,.7);z-index:1;background:rgba(0,0,0,.35);padding:.2em .6em;border-radius:6px}
.page-head + .city-photo{margin-top:-1px}

.share{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:-1.2rem 0 2rem;font-size:.92rem}
.share span{color:var(--muted)}
.share a,.share button{font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.3em .9em;background:transparent;cursor:pointer}
.share a:hover,.share button:hover{border-color:var(--red)}

.float-contact{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));inset-inline-end:calc(16px + env(safe-area-inset-right,0px));z-index:31;display:flex;flex-direction:column;gap:.6rem}
.fc{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.45);transition:transform .15s}
.fc:hover{transform:translateY(-2px)}
.fc.wa{background:#25D366}
.fc.tel{background:var(--red)}
.consent:not([hidden]) ~ .float-contact{display:none}

/* sample signs from the inventory */
.signs{margin:2rem 0}
.sign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.sign-grid:has(>figure:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.sign-grid:has(>figure:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.sign-grid,.sign-grid:has(>figure:nth-child(3):last-child){grid-template-columns:1fr 1fr}.sign-grid:has(>figure:nth-child(3):last-child)>figure:first-child{grid-column:1/-1}}
@media (max-width:560px){.sign-grid,.sign-grid:has(>figure:nth-child(3):last-child){grid-template-columns:1fr}}
.sign-grid figure{margin:0;border-radius:12px;overflow:hidden;background:var(--bg2);border:1px solid var(--line)}
.sign-grid img{display:block;width:100%;height:200px;object-fit:cover}
.sign-grid figcaption{padding:.6rem .8rem;font-size:.92rem;line-height:1.45}

/* balanced card rows: no card left alone on the last row.
   Desktop: 5, 8, 11 or 14 cards -> two wide cards, then full rows of three. Tablet: two columns, an odd count opens with one full-width card. */
@media (min-width:901px){
.grid:has(>.card:nth-child(5):last-child),.grid:has(>.card:nth-child(8):last-child),.grid:has(>.card:nth-child(11):last-child),.grid:has(>.card:nth-child(14):last-child){grid-template-columns:repeat(6,1fr)}
.grid:has(>.card:nth-child(5):last-child)>.card,.grid:has(>.card:nth-child(8):last-child)>.card,.grid:has(>.card:nth-child(11):last-child)>.card,.grid:has(>.card:nth-child(14):last-child)>.card{grid-column:span 2}
.grid:has(>.card:nth-child(5):last-child)>.card:nth-child(-n+2),.grid:has(>.card:nth-child(8):last-child)>.card:nth-child(-n+2),.grid:has(>.card:nth-child(11):last-child)>.card:nth-child(-n+2),.grid:has(>.card:nth-child(14):last-child)>.card:nth-child(-n+2){grid-column:span 3}
}
@media (min-width:561px) and (max-width:900px){
.grid{grid-template-columns:1fr 1fr}
.grid:has(>.card:last-child:nth-child(odd))>.card:first-child{grid-column:1/-1!important}
}

/* touch targets: at least 44px tall on phones and tablets (breadcrumb links, share buttons) */
@media (max-width:900px){
.breadcrumb li{display:flex;align-items:center}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px;padding-inline:4px}
.share a,.share button{display:inline-flex;align-items:center;min-height:44px}
}

/* tables become one card per row on phones */
@media (max-width:560px){
.tablewrap table,.tablewrap tbody,.tablewrap tr,.tablewrap td{display:block;width:auto}
.tablewrap tr:first-child{display:none}
.tablewrap tr{padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.tablewrap tr:last-child{border-bottom:0}
.tablewrap td{padding:.15rem 0;border:0;text-align:start}
.tablewrap td[data-label]::before{content:attr(data-label) ": ";color:var(--muted);font-weight:600}
}
/* very narrow phones: logo and menu button stay on one line */
@media (max-width:380px){
.brand img{height:24px}
.site-head .wrap{gap:.8rem}
.nav-toggle{padding:.45em .8em}
}

/* area pages: the area's own sign photo behind the title */
.page-head.has-photo::before{background-image:var(--head-img);background-position:center 35%;opacity:.42}

/* lead form inside the bottom CTA band */
.cta-band .split{align-items:center}
.cta-band .form{background:rgba(10,10,12,.88);border:1px solid var(--line);border-radius:16px;padding:1.4rem;color:var(--ink)}
.cta-band .form legend h2{font-size:1.3rem;max-width:none}
.hero-price{margin-top:1rem;font-size:.98rem;color:rgba(255,255,255,.85)}
.hero-price a{color:inherit}



/* short lead form (all pages): fits in one screen */
.form-short{padding:1.1rem 1.2rem!important;max-width:520px}
.form-short fieldset{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem .7rem}
.form-short legend{grid-column:1/-1;padding:0;margin-bottom:.2rem}
.form-short legend h2{font-family:inherit!important;font-size:1.15rem!important;line-height:1.3!important;margin:0!important;max-width:none}
.form-short .wide{grid-column:1/-1}
.form-short label{gap:.25rem;font-size:.92rem}
.form-short input:not([type=checkbox]),.form-short select{padding:.5em .75em;min-height:44px;border-radius:9px}
.form-short .check{font-size:.8rem;line-height:1.4;gap:.45rem}
.form-short .check input{margin-top:.15em}
.form-short button{min-height:48px}
@media (max-width:340px){.form-short fieldset{grid-template-columns:1fr}}

/* buttons: centred, one line */
.btn{text-align:center;justify-content:center}
.btn.small,.head-cta .btn,.phone{white-space:nowrap}

/* no text on top of a photo or of other text (ערן, 25.10.2026): every photo is its own block, text sits beside or below it */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;min-height:0}
.hero .photo{position:relative;inset:auto;z-index:0;order:2;align-self:stretch;min-height:clamp(420px,46vw,680px);background-color:#0A0A0C;background-size:cover;background-position:59% 26%}
.hero .shade{display:none}
.hero .wrap{order:1;width:100%;grid-template-columns:1fr;padding-block:clamp(3rem,6vw,5rem)}
@media (max-width:860px),(max-aspect-ratio:1/1){
.hero{grid-template-columns:1fr}
.hero .photo{order:0;min-height:0;height:min(64vw,420px);background-size:142% auto!important;background-position:58% 14%!important}
.hero .wrap{padding-top:1.5rem}
}
.cta-band{background:var(--bg2)}
.cta-band::before{content:none}
.cta-band .form{background:var(--bg3)}
.strip{display:block;min-height:0;background:var(--bg2)}
.strip::before{content:"";position:static;display:block;height:clamp(240px,34vw,440px);background:url("../assets/img/photo-ta.jpg") center 30%/cover no-repeat}
.strip .wrap{padding-block:1.6rem 2.4rem}
.page-head::before,.page-head::after{content:none}
.page-head.has-photo{padding-top:0}
.page-head.has-photo::before{content:"";position:static;display:block;height:clamp(220px,34vw,440px);margin-bottom:2rem;background:var(--head-img) center 35%/cover no-repeat;opacity:1}
.city-photo figcaption{position:static;background:none;padding:.5rem var(--gr) 0;color:var(--muted)}
.city-photo{max-height:none}
.site-head{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
/* the cookie banner sits at the top of the page, in the flow, never over content */
.consent{position:static;padding:10px var(--gr) 10px var(--gl);background:var(--bg)}
.consent .wrap{box-shadow:none}
/* whole logo billboard */

/* ===== Site design B (Eran chose proposal B, 26.10.2026): light, tool-like; the map and the price calculator lead. ===== */
:root{
  --bg:#F6F7F9;--bg2:#FFFFFF;--bg3:#FFFFFF;--ink:#14161B;--muted:#5C6270;--line:#E2E5EB;
  --red:#D9161F;--red2:#B8121A;--red-soft:#FDECEC;--on-red:#fff;--link:#C0141C;
  --font:"IBM Plex Sans Hebrew","Arial Hebrew","Segoe UI",Arial,sans-serif;--r:14px;color-scheme:light;
}
body{font-size:1.03rem}
h1,h2,h3,h4{font-weight:700;letter-spacing:-.01em;line-height:1.18}
h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:700}
h2{font-size:clamp(1.55rem,2.8vw,2.1rem)}
.btn{border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);padding:.75em 1.3em;min-height:44px;font-weight:600}
.btn:hover{border-color:#B9BFCA;transform:none}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:none}
.btn.primary:hover{background:var(--red2);border-color:var(--red2)}
.site-head{background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
.site-head .wrap{padding-block:.7rem}
.brand img{height:26px}
.nav a{color:var(--muted);opacity:1;font-weight:500}
.nav a[aria-current="page"],.nav a:hover{color:var(--ink)}
.nav-toggle{border-color:var(--line);color:var(--ink);background:#fff;border-radius:10px}
.head-cta .tel{font-variant-numeric:tabular-nums}
@media (max-width:860px){.head-cta{display:flex;margin-inline-start:auto}.head-cta .btn.primary{display:none}.nav-toggle{margin-inline-start:0}}
.answer{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-inline-start:4px solid var(--red)}
.article .body p,.faq p,.form .check,.consent p,.strip p,.hero .lede{color:var(--ink)}
.page-head{background:var(--bg2);border-bottom:1px solid var(--line);padding-block:2rem 1.6rem}
.card{background:var(--bg2);border-color:var(--line)}
.card:hover{transform:none;border-color:#B9BFCA}
.card .thumb::after{content:none}
.card a.more{color:var(--link)}
.roads li{border-color:var(--line);background:var(--bg2)}
.facts li{background:var(--bg2)}
blockquote{background:var(--bg2)}
th{background:#FAFBFC;color:var(--muted);font-weight:600}
.tablewrap{background:var(--bg2)}
.faq details{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:.2rem 1rem;margin-bottom:.6rem}
.form{background:var(--bg2);border-color:var(--line)}
.form input,.form select,.form textarea{background:#fff;border:1px solid #CDD2DA;color:var(--ink)}
.form .ok{background:var(--red-soft)}
.cta-band{background:var(--bg);border-top:1px solid var(--line)}
.cta-band .form{background:var(--bg2)}
.site-foot{background:var(--bg2)}
.consent{background:var(--bg)}
.consent .wrap{background:var(--bg2);border-color:var(--line)}
.a11y-btn{box-shadow:0 4px 14px rgba(20,22,27,.18);border:1px solid var(--line)}
.a11y-panel{background:var(--bg2);border-color:var(--line);box-shadow:0 12px 30px rgba(20,22,27,.15)}
.fc{box-shadow:0 6px 16px rgba(20,22,27,.22)}
.city-photo{background:var(--bg)}
.city-photo figcaption a{color:inherit}
.sign-grid figure{background:var(--bg2)}
.share a,.share button{background:var(--bg2)}
.eyebrow{color:var(--muted)}

/* homepage hero: price calculator + map */
.b-hero{display:grid;grid-template-columns:400px minmax(0,1fr);gap:20px;padding-block:24px 8px}
.b-panel{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px;align-self:start}
.b-panel h1{font-size:clamp(1.8rem,3vw,2.4rem);margin:0 0 .5rem}
.b-panel .lede{color:var(--muted);margin:0 0 1rem}
.b-field{display:grid;gap:6px;margin-bottom:12px;font-weight:600;font-size:.95rem}
.b-field select{min-height:46px;border:1px solid #CDD2DA;border-radius:10px;padding:0 12px;font:inherit;background:#fff;color:var(--ink)}
.b-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.b-seg button{min-height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.b-seg button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.b-result{margin-top:14px;border-radius:12px;background:var(--red-soft);padding:14px 16px}
.b-result .num{font-size:1.5rem;font-weight:700;color:var(--red)}
.b-result small{display:block;color:var(--muted);margin-top:4px}
.b-acts{display:flex;gap:8px;margin-top:14px}.b-acts .btn{flex:1}
.b-mapbox{display:flex;flex-direction:column;gap:10px;min-width:0}
.b-mapbox h2{margin:0;font-size:clamp(1.35rem,2.3vw,1.8rem)}
.b-mapbox .sub{margin:0;color:var(--muted);max-width:none}
.b-mapbar{display:flex;gap:8px;flex-wrap:wrap}
.b-mapbar select{flex:1 1 200px;min-height:46px;border:1px solid #CDD2DA;border-radius:10px;padding:0 12px;font:inherit;font-weight:600;background:#fff;color:var(--ink)}
.am-map{position:relative;z-index:0;isolation:isolate;height:640px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#CFE2F2,#E6EFF8)}
.am-map.town{height:480px}
.leaflet-pane svg,.leaflet-pane canvas{max-width:none!important;max-height:none!important}
.am-land{filter:drop-shadow(0 3px 8px rgba(30,60,90,.2))}
.am-map .leaflet-tile-pane{filter:saturate(.7)}
.am-pin{background:rgba(217,22,31,.78);border:1.5px solid #fff;border-radius:999px}
.am-lbl{background:none;border:0;box-shadow:none;font:600 13px var(--font);color:#14161B;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;padding:0}
.am-lbl::before{display:none}
.am-map .leaflet-popup-content{font-family:var(--font);direction:rtl;text-align:right;margin:10px 12px}
.am-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.9rem;color:var(--muted);margin:0;padding:0;list-style:none}
.am-legend img{display:inline-block;vertical-align:middle;margin-inline-end:5px;max-height:20px;width:auto}
.am-townlink{margin:0;font-weight:600}
@media (max-width:980px){.b-hero{grid-template-columns:1fr}.am-map{height:560px}}
@media (max-width:560px){.am-map.town{height:420px}}

/* price table */
.b-table{width:100%;background:var(--bg2);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.b-table td b{font-weight:700}
@media (max-width:560px){.b-table th:nth-child(3),.b-table td:nth-child(3){display:none}}

/* towns: tiles with a city photo for the large towns, plain links for the rest */
.town-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.town-tile{background:var(--bg2);border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column}
.town-tile:hover{border-color:#B9BFCA}
.town-tile img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bg)}
.town-tile span{padding:10px 12px;display:block;font-weight:600}
.town-tile small{display:block;color:var(--muted);font-weight:400;font-size:.88rem}
@media (max-width:560px){.town-grid{grid-template-columns:1fr 1fr;gap:10px}.town-tile span{padding:8px 10px;font-size:.95rem}}
.town-links{columns:4 160px;gap:1.5rem;padding:0;margin:0;list-style:none}
.town-links li{break-inside:avoid;padding:.25rem 0}
.town-links a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.town-links a:hover{color:var(--link);border-bottom-color:var(--link)}
.town-links small{color:var(--muted);margin-inline-start:.3rem}
.inv-table td:last-child,.inv-table th:last-child{text-align:end;font-variant-numeric:tabular-nums}
@media (max-width:860px){.head-cta{order:2}.nav-toggle{order:3}.nav{order:4}}
@media (max-width:560px){.site-head .wrap{gap:.5rem;flex-wrap:nowrap}.site-head .nav{position:absolute;top:100%;inset-inline:0;background:#fff;border-bottom:1px solid var(--line);padding:.6rem var(--gr) 1rem var(--gl)}.site-head .wrap{position:relative}.brand img{height:22px}.head-cta .tel{padding:.45em .7em;font-size:.92rem;min-height:40px}.nav-toggle{padding:.45em .7em;min-height:40px}}
.b-acts .btn{white-space:nowrap;padding-inline:.8em}
.city-photo::after{content:none}.city-photo figcaption{font-size:.8rem;padding-top:.4rem}
@media (max-width:560px){.tablewrap table.inv-table{display:table;width:100%}.tablewrap .inv-table tbody{display:table-row-group}.tablewrap .inv-table tr,.tablewrap .inv-table tr:first-child{display:table-row;padding:0}.tablewrap .inv-table td,.tablewrap .inv-table th{display:table-cell;padding:.6em .9em;border-bottom:1px solid var(--line)}}
.b-badge{display:inline-block;margin:0 0 .6rem;background:var(--red-soft);color:var(--red);font-weight:700;border-radius:999px;padding:.25em .8em;font-size:.92rem}
/* light theme: text left white from the old dark design (Eran 28.10: white on white in the quote band) */
.cta-band{color:var(--ink)}
.cta-band p{opacity:1;color:var(--ink)}
.cta-band .phone{color:var(--ink)!important}
.site-head{background:#fff}
.hero-price{color:var(--muted)}
.btn:hover{border-color:#B9BFCA}

/* UX review 28.10.2026 */
/* the quote form lives in the homepage panel: choose, leave details, done in one step */
.b-panel .form{border:0;padding:0!important;background:none;max-width:none;margin-top:.4rem}
.b-panel .form legend h2{font-size:1.15rem!important}
.b-row{display:grid;gap:0}
.b-alt{margin:.8rem 0 0;color:var(--muted);font-size:.95rem}
.b-alt a{font-weight:600}
@media (max-width:560px){.b-panel{padding:16px}.b-panel h1{font-size:1.65rem}.b-panel .lede{font-size:.98rem;margin-bottom:.7rem}}
/* touch targets of at least 44px on phones */
.brand{min-height:44px}
.site-foot .legal a,.site-foot ul a{display:inline-flex;align-items:center;min-height:44px}
.card a.more{min-height:44px;display:inline-flex;align-items:center}
.form .check input{width:20px;height:20px;flex:none}
.form .check{min-height:44px}
.cta-row .btn{min-height:44px}
/* text links inside running text keep a visible underline */
.answer a,.article .body p a,.faq p a,.b-alt a{text-decoration:underline;text-underline-offset:3px}
/* phones: the map does not trap the page scroll; a tap unlocks dragging */
.am-hint{margin:.4rem 0 0;font-size:.88rem;color:var(--muted)}
@media (min-width:861px){.am-hint{display:none}}
/* phones: call / WhatsApp / chat / accessibility as one solid bar at the bottom, never on top of the page text (UX review 28.10) */
.fcl{display:none}
@media (max-width:860px){
body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
/* all four buttons share one box: 56px + the phone's safe area, painted to the screen edge (Eran 28.10.2026: chat looked taller) */
.float-contact{left:auto;right:0;bottom:0;inset-inline-end:auto;width:88%;flex-direction:row;gap:0;padding:0;background:transparent;border:0;align-items:stretch}
.has-asst .float-contact{width:60%}
.fc,.a11y-btn,.has-asst .a11y-btn,.asst-btn{box-sizing:border-box!important;height:calc(56px + env(safe-area-inset-bottom,0px))!important;min-height:0!important;padding:0 0 env(safe-area-inset-bottom,0px)!important;margin:0!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;box-shadow:none!important;line-height:1!important;display:flex!important;align-items:center!important;justify-content:center!important}
.fc{flex:1;width:auto;gap:6px;font-weight:700;font-size:.98rem}
.fc:hover{transform:none}
.fcl{display:inline}
.a11y-btn,.has-asst .a11y-btn{bottom:0;left:0;inset-inline-start:auto;width:12%;background:#fff}
.asst-btn{bottom:0!important;left:12%!important;inset-inline-start:auto!important;width:28%!important;font-size:.98rem!important}
.a11y-panel,.has-asst .a11y-panel{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
.asst{bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
}
/* sign slideshow: fixed frame so changing photos never move the page */
.city-photo.slides img{aspect-ratio:16/10;height:auto;max-height:520px;object-fit:cover;background:var(--bg)}
.town-tile img.rot,.city-photo.slides img{transition:opacity .2s}
/* city pages: the whole sign photo, never cropped (Eran 28.10.2026); fixed frame so the page does not jump */
.city-photo.slides{background:#EEF0F3;text-align:center}
.city-photo.slides img{width:100%;height:auto;aspect-ratio:16/10;max-height:520px;object-fit:contain;background:#EEF0F3}
/* city tiles: the whole sign photo, centred, never cropped (Eran 28.10.2026: on phones the sign was not always in the middle) */
.town-tile img{object-fit:contain;object-position:center;background:#EEF0F3}
.city-photo.slides img{object-position:center}
.town-tile img{height:auto!important;aspect-ratio:3/2}
/* homepage: moving strip of the best signs, under the header (Eran 28.10.2026). Whole photos (no cropping), caption under each photo. */
.b-strip{overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--line);padding:12px 0 10px;direction:ltr}
.b-track{display:flex;width:max-content;animation:b-scroll 70s linear infinite}
.b-strip:hover .b-track,.b-strip:focus-within .b-track{animation-play-state:paused}
.b-set{display:flex;gap:12px;padding-inline-end:12px}
.b-item{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);direction:rtl;flex:none}
.b-item img{height:150px;width:auto;border-radius:10px;background:var(--bg);display:block}
.b-item span{font-size:.88rem;font-weight:600;color:var(--muted);text-align:center}
@keyframes b-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:560px){.b-item img{height:110px}.b-strip{padding:10px 0 8px}}
@media (prefers-reduced-motion:reduce){.b-track{animation:none}.b-strip{overflow-x:auto}}
/* the strip starts on the right (Hebrew reading start), so the first photo is the first thing seen; it moves rightwards */
.b-strip{direction:rtl}
.b-track{animation-name:b-scroll-rtl}
@keyframes b-scroll-rtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* sign photo in the map popup */
.leaflet-popup-content img.am-ph{display:block;width:240px;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;background:#EEF0F3;border-radius:6px;margin:0 0 .5rem}

/* the strip and the city photos move also where the computer asks for less motion (Windows "animation effects" off:
   Yoram's computer, Eran 29.10.2026), only slower; the pause button stops the strip for anyone (accessibility) */
.b-pause{display:block;margin:6px 12px 0 auto;min-height:32px;padding:4px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg,#fff);color:var(--ink);font:inherit;font-size:.85rem;cursor:pointer}
.b-strip.paused .b-track{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.b-track{animation:b-scroll-rtl 140s linear infinite!important}.b-strip{overflow:hidden}}

/* the strip moves by scrolling (site.js), not by one huge moving layer: on iPhone a layer over 10,000px wide was sometimes
   not drawn at all and the strip stayed white (Eran 29.10.2026). The first photo starts on the right and the photos move rightwards. */
.b-strip{direction:ltr;overflow:hidden}
.b-track,.b-set{flex-direction:row-reverse}
.b-track{animation:none!important;transform:none!important}
.b-item img{max-width:none}
@media (max-width:560px){.b-item img{width:auto}}
