/* ===========================================================
   כרמלית טופ — סוכנות לביטוח
   Static multi-page site. Hebrew, RTL. No build step.

   Visual world: a serious document.
   Warm paper stock, navy ink, one deep moss-green accent used
   sparingly. Hairlines instead of shadows. One small radius.
   Editorial type: Frank Ruhl Libre (Hebrew serif, the broadsheet
   face) for display, Assistant for text.
=========================================================== */

:root{
  /* ---- navy: the structural dark plane (unchanged, contrast-tuned) ---- */
  --navy-900:#0E1B3D;
  --navy-800:#152649;
  --navy-700:#1D2F58;
  --navy-600:#2A3D68;
  --navy-950:#0A1430;       /* the deepest plane — hero base */

  /* ---- the accent: the agency's OWN cyan ----------------------
     Round 2 used a warm gold here, invented for the website. The
     agency's real printed identity — its presentation folder and
     its 5.5m banner — is a deep navy ground running to a bright
     cyan, with lime line-art and white type on top. Gold appears
     nowhere in it, so gold went and the real cyan took its place;
     the page now matches the folder the owner hands to clients.

     Lime is NOT a general-purpose token here on purpose. It is the
     colour the family complained about when it was used as flat
     fills and pill shapes all over the old site. It survives where
     the print actually uses it — inside the category icons, as
     line-art on a deep ground — and nowhere else.

     Each token is contrast-checked for the surface it is allowed
     on. Bright cyan is NEVER small text on a light background. */
  --cyan:#28B6D6;          /* fills / rules / navy-text buttons (7.0:1 w/ navy) */
  --cyan-strong:#1F9CBA;   /* hover of the above */
  --cyan-soft:#8FD8EA;     /* accent ON navy (11.5:1) — text-safe on dark */

  /* Kept as the old names so the multi-page templates that still use them do
     not need touching; repointed to a deep teal from the same brand hue that
     passes AA as text or icon on a light surface. */
  --green-900:#062C36;
  --green-800:#0A4655;
  --green-700:#0E5C70;   /* accent text/icon on light — 7.0:1 on paper */
  --green-600:#12758F;
  --sage-300:#8FD8EA;    /* accent on navy (11.5:1) */
  --sage-200:#BCE8F3;
  --green-wash:#DFF0F4;  /* pale cyan wash */

  /* The brand lime, used only inside assets/icons/* — see --cyan above. */
  --brand-lime:#8DC63F;

  /* ---- paper: warmer ivory stock ---- */
  --bg:#F4EEE2;
  --paper:#FBF7EF;
  --sand:#E9E1D2;
  --ink:#141A20;
  --muted:#585349;          /* 6.8:1 on paper */
  --quiet:#6A6559;          /* 5.2:1 — captions and placeholders only */
  --border:#DBD3C3;
  --hairline:#E7E0D2;
  --field-border:#8C8574;   /* 3.5:1 — a control boundary must be seen */

  /* ---- on dark ---- */
  --on-navy:#FFFFFF;
  --on-navy-soft:#AFBBD6;   /* tinted from the navy hue, never grey (8.8:1) */
  --on-navy-line:rgba(255,255,255,.13);
  --on-navy-line-strong:rgba(255,255,255,.24);

  /* ---- geometry: rounded "widget" cards, one family of radii ---- */
  --r:6px;
  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-card:12px; --r-pill:999px;
  --maxw:1180px;
  --gutter:24px;

  /* ---- rhythm: tight inside a group, generous between ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --section-y: clamp(64px, 7vw, 112px);

  /* ---- type: Rubik for display, Assistant for text ------------------
     Frank Ruhl Libre and Heebo were both retired on 2026-08-21.

     Frank Ruhl Libre's HEBREW is good, but its Latin and its FIGURES are a
     dated bookish serif — and it was setting 1977, 04-8396543 and
     PassportCard. With 1977 becoming the largest element on the page that
     was no longer survivable. Heebo is the default free Hebrew webfont on
     half the internet and reads as nothing in particular.

     Nine faces were rendered at display size and compared side by side
     before this line was written (Frank Ruhl Libre, Heebo, Assistant,
     Rubik, Noto Sans Hebrew, Archivo, Libre Franklin, Bodoni Moda,
     Playfair Display). Rubik won both tests: its Hebrew is wide, square and
     commanding at 900, and its figures are the best-drawn of any Hebrew-
     capable family here — an open 9, a 7 with a real finish, a 1 with a
     proper flag. Assistant won body text: its Latin descends from Source
     Sans, so digits and Latin words inside Hebrew paragraphs stay quiet
     and correctly weighted.

     Both are VARIABLE fonts. The link in <head> asks for wght ranges, which
     ships one file per family per script instead of five static weights. */
  --font-display:"Rubik", "Assistant", "Segoe UI", system-ui, sans-serif;
  --font-body:"Assistant", "Rubik", "Segoe UI", system-ui, sans-serif;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16,.84,.34,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);
  --ease-spring: cubic-bezier(.22,1.02,.36,1);   /* settle with a touch of overshoot */

  /* Reserved space at the bottom of the viewport.
     The cookie-consent banner sets this so it never covers the sticky call bar. */
  --consent-height:0px;
}

/* -----------------------------------------------------------
   Base
----------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:92px;       /* sticky header (utility bar removed) */
  scrollbar-color: var(--navy-700) var(--sand);
  -webkit-text-size-adjust:100%;
  /* clip, not hidden: hidden would turn <html> into the scroll container and
     break position:sticky on the header */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.72;
  /* Hebrew needs no extra tracking — Latin defaults make it look loose. */
  letter-spacing:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip, NOT hidden. overflow-x:hidden turns <body> into a scroll container,
     and a sticky element inside a scroll container sticks to THAT container's
     scrollport — which never scrolls, because the real scrolling happens on
     <html>. The result is a sticky header that silently behaves as static and
     scrolls straight off the top of the page. `clip` gives the same overflow
     protection without creating a scroll container. Same reason <html> above
     is set to clip. */
  overflow-x:clip;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
svg{ flex:none; }

/* A real scale: 62 / 42 / 24 / 17 — not five sizes that are nearly the same.
   Hebrew tracks tighter than Latin, so display sizes carry negative tracking. */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  margin:0;
  color:var(--navy-900);
  text-wrap:balance;
}
h1{
  font-size:clamp(38px, 2rem + 3.1vw, 68px);
  line-height:1.02; letter-spacing:-.03em; font-weight:900;
}
h2{
  font-size:clamp(29px, 1.5rem + 2vw, 50px);
  line-height:1.08; letter-spacing:-.028em; font-weight:800;
}
h3{ font-size:clamp(19px,1.05rem + .45vw,24px); line-height:1.28; letter-spacing:-.018em; font-weight:800; }
h4{ font-size:17.5px; line-height:1.36; letter-spacing:-.012em; font-weight:700; }
p{ margin:0 0 var(--s-4); max-width:70ch; }
p:last-child{ margin-bottom:0; }

/* Phone numbers, prices and years read as Latin digits inside Hebrew text. */
[dir="ltr"], .num{ font-variant-numeric:tabular-nums; }

/* The one small-label style in the system. Not an eyebrow above a heading —
   it labels data (office hours, a phone number, a company field). */
.label{
  font-family:var(--font-body);
  font-size:12.5px; font-weight:700; line-height:1.3;
  letter-spacing:.085em; color:var(--muted);
}
.on-dark .label,.band-navy .label{ color:var(--on-navy-soft); }

/* ---- browser surfaces we did not draw, themed anyway ---- */
::selection{ background:var(--green-wash); color:var(--green-900); }
.on-dark ::selection,.band-navy ::selection{ background:var(--sage-300); color:var(--navy-900); }
input,textarea,select{ caret-color:var(--green-700); }

::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:var(--sand); }
::-webkit-scrollbar-thumb{ background:var(--navy-700); border-radius:0; border:3px solid var(--sand); }
::-webkit-scrollbar-thumb:hover{ background:var(--navy-900); }

:focus-visible{
  outline:3px solid var(--navy-700);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
.on-dark :focus-visible,.band-navy :focus-visible,.mobile-nav :focus-visible{ outline-color:var(--sage-200); }

.skip-link{
  position:absolute; inset-inline-start:16px; top:-64px; z-index:200;
  background:var(--navy-900); color:#fff; font-weight:700;
  padding:12px 22px; border-radius:0 0 var(--r) var(--r);
  transition:top .2s var(--ease-out);
}
.skip-link:focus{ top:0; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* -----------------------------------------------------------
   Layout
   One continuous light field between the navy masthead and the
   navy base. Sections are separated by a hairline and by space,
   not by a new background colour every time.
----------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:760px; }

section{ padding-block:var(--section-y); position:relative; }
main > section + section{ border-top:1px solid var(--border); }
.band-paper{ background:transparent; }
.band-sand{ background:var(--sand); }
.band-navy{ background:var(--navy-900); color:var(--on-navy); }
.band-navy h2,.band-navy h3,.band-navy h4{ color:var(--on-navy); }

/* more room above a heading than below it.
   Everything on the page starts from the same edge — a centred island in an
   otherwise right-aligned document reads as a template, not a decision. */
.section-head{ margin-bottom:var(--s-7); }
.section-head.center{ margin-inline:0; text-align:start; }
.section-head h2{ max-width:18ch; }
.section-head p{ color:var(--muted); font-size:17.5px; margin-top:var(--s-4); max-width:56ch; }
.section-head.center p{ margin-inline:0; }
.band-navy .section-head p,.on-dark .section-head p{ color:var(--on-navy-soft); }

/* The heading takes one half, the deck and the onward link the other.
   No rule underneath: the list or grid below carries its own top rule, and
   two rules 40px apart is a mistake, not a system. */
.section-head-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end; gap:var(--s-5) var(--s-8); margin-bottom:var(--s-6);
}
.section-head-row > h2{ max-width:15ch; }
.section-head-row .section-head{ margin-bottom:0; max-width:none; }
.section-head-aside{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3); }
.section-head-aside p{ color:var(--muted); font-size:17px; margin:0; max-width:44ch; }
.band-navy .section-head-aside p,.on-dark .section-head-aside p{ color:var(--on-navy-soft); }

/* The closing call to action on a sub-page: the ask on one side, the two
   ways to answer it on the other. */
.cta-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end; gap:var(--s-6) var(--s-8);
}
.cta-row .section-head{ margin-bottom:0; max-width:none; }
.cta-row .section-head h2{ max-width:14ch; }
.cta-row .section-head p{ max-width:44ch; }
.cta-actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* -----------------------------------------------------------
   Buttons — square-shouldered, flat, one radius
----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:13px 26px;
  border:1px solid transparent; border-radius:var(--r);
  font-weight:700; font-size:16px; line-height:1.2; white-space:nowrap;
  letter-spacing:-.005em;
  transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out),
             color .18s var(--ease-out);
}
.btn svg{ width:18px; height:18px; }
/* the jewel CTA: the brand cyan with navy text (7.0:1) — reads as the one
   thing on the page worth pressing, and it is the agency's own colour. */
.btn-accent{ background:var(--cyan); color:var(--navy-900); border-color:var(--cyan); font-weight:800; }
.btn-accent:hover{ background:var(--cyan-strong); border-color:var(--cyan-strong); }
.btn-accent:active{ background:#1A87A2; border-color:#1A87A2; }
.btn-primary{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.btn-primary:hover{ background:var(--navy-700); border-color:var(--navy-700); }
.btn-outline{ background:transparent; color:var(--navy-900); border-color:var(--navy-900); }
.btn-outline:hover{ background:var(--navy-900); color:#fff; }
.btn-outline-light{ background:transparent; color:#fff; border-color:var(--on-navy-line-strong); }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.09); }
.btn-sm{ min-height:40px; padding:9px 18px; font-size:14.5px; }
.btn[disabled],.btn:disabled{ opacity:.5; cursor:not-allowed; }

.link-more{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; padding-block:8px;
  font-weight:700; font-size:15.5px; color:var(--navy-900);
  border-bottom:1px solid var(--navy-900);
  transition:gap .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.link-more:hover{ gap:15px; color:var(--green-700); border-bottom-color:var(--green-700); }
.link-more svg{ width:15px; height:15px; }
/* Dark sections are marked either .band-navy or .on-dark. Both must flip the
   link to white — without the .on-dark half, navy text landed on a navy
   background at 1.18:1 contrast, which is a WCAG AA failure. */
.band-navy .link-more,
.on-dark .link-more{ color:#fff; border-bottom-color:var(--on-navy-line-strong); }
.band-navy .link-more:hover,
.on-dark .link-more:hover{ color:var(--sage-200); border-bottom-color:var(--sage-200); }

/* -----------------------------------------------------------
   Header
----------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(245,242,236,.94);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  padding-block:13px;
}
.brand{ display:flex; align-items:center; gap:12px; flex:none; min-height:44px; }
.brand img{ height:42px; width:auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.18; }
.brand-text strong{
  font-family:var(--font-display); font-weight:800; font-size:20px;
  letter-spacing:-.02em; color:var(--navy-900);
}
.brand-text span{ font-size:12px; font-weight:600; letter-spacing:.075em; color:var(--muted); }

.main-nav{ display:flex; align-items:center; gap:24px; }
.main-nav a{
  position:relative; padding:9px 0;
  font-weight:600; font-size:15.5px; color:var(--ink);
  transition:color .18s var(--ease-out);
}
.main-nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:2px;
  height:2px; background:var(--green-700);
  transform:scaleX(0);
  /* transform-origin takes no logical keyword, so the growth edge is set per
     direction to keep matching the inline-end anchor. */
  transform-origin:right center;
  transition:transform .25s var(--ease-out);
}
[dir="rtl"] .main-nav a::after{ transform-origin:left center; }
.main-nav a:hover{ color:var(--green-700); }
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }
.main-nav a[aria-current="page"]{ color:var(--navy-900); }
.main-nav a.nav-external{
  color:var(--green-700); font-size:14.5px; font-weight:700;
  padding-inline-start:22px; border-inline-start:1px solid var(--border);
}
.main-nav a.nav-external::after{ inset-inline:0 auto; width:calc(100% - 22px); }

.header-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.phone-pill{
  display:flex; align-items:center; gap:10px; min-height:44px;
  padding-inline-end:16px; border-inline-end:1px solid var(--border);
  transition:color .18s var(--ease-out);
}
.phone-pill svg{ width:17px; height:17px; stroke:var(--green-700); }
.phone-pill-text{ display:flex; flex-direction:column; line-height:1.2; }
.phone-pill-text .lbl{
  font-size:11px; font-weight:700; letter-spacing:.085em; color:var(--muted);
}
.phone-pill-text .num{ font-size:16px; font-weight:700; color:var(--navy-900); }
.phone-pill:hover .num{ color:var(--green-700); }

.nav-toggle{
  display:none; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:44px; padding:8px 14px;
  background:transparent; border:1px solid var(--navy-900); border-radius:var(--r);
  font-weight:700; font-size:14.5px; color:var(--navy-900);
  transition:background-color .18s var(--ease-out), color .18s var(--ease-out);
}
.nav-toggle:hover{ background:var(--navy-900); color:#fff; }
.nav-toggle svg{ width:19px; height:19px; }

/* -----------------------------------------------------------
   Contact bar — the utility strip under the header
----------------------------------------------------------- */
.contact-bar{ background:var(--navy-900); color:#fff; }
.contact-bar-inner{
  display:flex; align-items:center; gap:0; flex-wrap:wrap;
  padding-block:0;
}
.contact-bar-item{
  display:inline-flex; align-items:center; gap:9px;
  padding-block:11px; padding-inline:20px;
  font-size:13.5px; color:var(--on-navy-soft);
  border-inline-start:1px solid var(--on-navy-line);
  transition:color .16s var(--ease-out);
}
.contact-bar-item:first-child{ border-inline-start:none; padding-inline-start:0; }
.contact-bar-item svg{ width:15px; height:15px; stroke:var(--sage-300); }
.contact-bar-item b{ font-weight:700; color:#fff; }
a.contact-bar-item:hover{ color:#fff; }
.contact-bar-cta{ margin-inline-start:auto; }

/* -----------------------------------------------------------
   Mobile drawer
----------------------------------------------------------- */
/* Closed state is clipped rather than translated off-screen: a fixed element
   parked outside the viewport still widens the document on some browsers,
   which shows up as a phantom horizontal scroll. */
.mobile-nav{
  position:fixed; inset:0; z-index:110;
  background:var(--navy-900); color:#fff;
  display:flex; flex-direction:column; padding:20px var(--gutter) 28px;
  clip-path:inset(0 0 0 100%); visibility:hidden;
  transition:clip-path .34s var(--ease-soft), visibility .34s;
  overflow-y:auto;
}
.mobile-nav.open{ clip-path:inset(0 0 0 0); visibility:visible; }
.mobile-nav-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:var(--s-7); padding-bottom:var(--s-4);
  border-bottom:1px solid var(--on-navy-line);
}
.logo-tile{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:var(--r); padding:5px 7px;
}
.logo-tile img{ height:36px; width:auto; }
.mobile-nav-close{
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:8px 14px;
  background:transparent; border:1px solid var(--on-navy-line-strong); border-radius:var(--r);
  color:#fff; font-weight:700; font-size:14.5px;
}
.mobile-nav-close svg{ width:18px; height:18px; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav ul li + li{ border-top:1px solid var(--on-navy-line); }
.mobile-nav ul a{
  display:block; padding:16px 0;
  font-family:var(--font-display); font-weight:700; font-size:23px;
  letter-spacing:-.015em; color:#fff;
}
.mobile-nav ul a[aria-current="page"]{ color:var(--sage-300); }
.mobile-nav .nav-external{ color:var(--sage-300); font-family:var(--font-body); font-weight:700; font-size:17px; }
.mobile-nav-foot{ margin-top:var(--s-7); display:flex; flex-direction:column; gap:12px; }
.mobile-nav-foot .btn{ width:100%; }

/* -----------------------------------------------------------
   Breadcrumbs
----------------------------------------------------------- */
.breadcrumb{ padding-block:16px 0; }
.breadcrumb ol{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); }
.breadcrumb li{ display:inline-flex; align-items:center; gap:8px; }
.breadcrumb li + li::before{ content:"‹"; color:var(--field-border); font-size:15px; }
.breadcrumb a{ color:var(--muted); font-weight:600; }
.breadcrumb a:hover{ color:var(--green-700); text-decoration:underline; text-underline-offset:3px; }
.breadcrumb [aria-current="page"]{ color:var(--ink); font-weight:600; }

/* -----------------------------------------------------------
   Page head (every page except the landing page)
----------------------------------------------------------- */
.page-head{ border-bottom:1px solid var(--border); padding-block:var(--s-6) var(--s-8); }
.page-head h1{ margin-top:var(--s-5); max-width:18ch; }
.page-head p{ color:var(--muted); font-size:18.5px; max-width:58ch; margin-top:var(--s-5); }
.page-head-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s-6); }

/* The old landing hero (.hero / .hero-card / .icon-strip / .domain-list)
   lived here. It was already dead — no page rendered that markup any more —
   and once round 2 reused the .hero class name for the new opening screen its
   leftover `.hero h1{max-width:14ch}` silently broke the new headline across
   three lines. Removed rather than out-specified. */

/* The old multi-page story block (.story .wrap as a two-column grid, plus
   .story-copy / .pull-quote / .fact-grid) lived here. Dead — no page rendered
   that markup — and its `.story .wrap{display:grid; two columns}` silently
   split the new story chapter into two 470px columns. Removed, same reason as
   the old hero above: reusing a section name is only safe once the previous
   owner of that name is actually gone. */

/* -----------------------------------------------------------
   Testimonials — markup is ready, content is not. See the HTML comment.
----------------------------------------------------------- */
.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-7); }
.testimonial{
  border-top:2px solid var(--navy-900); padding-top:var(--s-5);
  display:flex; flex-direction:column; gap:var(--s-4);
}
.testimonial blockquote{
  margin:0; font-family:var(--font-display); font-weight:500;
  font-size:19px; line-height:1.5; color:var(--ink);
}
.testimonial figcaption{ font-size:13.5px; color:var(--muted); font-weight:600; margin-top:auto; }

/* -----------------------------------------------------------
   FAQ — native <details>, so it works with JavaScript switched off
----------------------------------------------------------- */
.faq-list{ display:flex; flex-direction:column; max-width:860px; border-top:2px solid var(--navy-900); }
.faq-list.center{ margin-inline:0; }
.faq-cat{
  font-weight:700; color:var(--muted); font-size:12.5px; letter-spacing:.085em;
  margin:var(--s-7) 0 0; padding-bottom:10px; border-bottom:1px solid var(--navy-900);
}
.faq-cat:first-child{ margin-top:0; }
.faq-item{
  border-bottom:1px solid var(--border);
  transition:background-color .2s var(--ease-out);
}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 2px; min-height:56px;
  font-family:var(--font-display); font-weight:700; font-size:18px;
  letter-spacing:-.01em; color:var(--navy-900);
  transition:color .18s var(--ease-out);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--green-700); }
.faq-plus{
  flex:none; position:relative; width:20px; height:20px;
  transition:transform .26s var(--ease-out);
}
.faq-plus::before,.faq-plus::after{
  content:""; position:absolute; top:50%; left:50%; background:var(--green-700);
  transform:translate(-50%,-50%);
}
.faq-plus::before{ width:14px; height:1.5px; }
.faq-plus::after{ width:1.5px; height:14px; }
.faq-item[open] .faq-plus{ transform:rotate(135deg); }
.faq-answer{ padding:0 2px 22px; color:var(--muted); font-size:16.5px; max-width:66ch; }
.faq-item[open] .faq-answer{ animation:faqIn .3s var(--ease-out) both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }

/* -----------------------------------------------------------
   Catalog
----------------------------------------------------------- */
.catalog-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--s-6); }
.overview-chip{
  display:inline-flex; align-items:center; gap:9px; min-height:46px;
  background:transparent; border:1px solid var(--field-border); border-radius:var(--r);
  padding:10px 18px; font-weight:700; font-size:15px; color:var(--navy-900);
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.overview-chip svg{ width:17px; height:17px; stroke:var(--green-700); transition:stroke .2s var(--ease-out); }
.overview-chip:hover{ background:var(--navy-900); color:#fff; border-color:var(--navy-900); }
.overview-chip:hover svg{ stroke:var(--sage-300); }

/* Tabs are a progressive enhancement: without JS every panel is simply visible. */
.tabs{ display:none; flex-wrap:wrap; gap:0; margin-bottom:var(--s-7); border-bottom:1px solid var(--border); }
.js-tabs .tabs{ display:flex; }
.js-tabs .catalog-chips{ display:none; }
.tab-btn{
  min-height:46px; padding:11px 18px; border-radius:0;
  background:transparent; border:0; border-bottom:2px solid transparent;
  color:var(--muted); font-weight:700; font-size:15px;
  transition:color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.tab-btn:hover{ color:var(--navy-900); border-bottom-color:var(--border); }
.tab-btn[aria-selected="true"]{ color:var(--navy-900); border-bottom-color:var(--green-700); }
/* Without JS the six panels are a plain stack and need separating. With JS
   only one is on screen, so the rule would be a stray line under the tabs. */
.tab-panel + .tab-panel{ margin-top:var(--s-8); padding-top:var(--s-8); border-top:1px solid var(--border); }
.js-tabs .tab-panel{ display:none; }
.js-tabs .tab-panel.active{ display:block; animation:panelIn .32s var(--ease-out) both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.catalog-card{
  background:transparent; border:0; border-radius:0; padding:0;
  display:grid; grid-template-columns:auto 1fr; gap:var(--s-6); align-items:start;
}
.catalog-card-ic{
  width:auto; height:auto; border-radius:0; background:transparent;
  display:flex; align-items:flex-start; padding-top:8px;
}
.catalog-card-ic svg{ width:26px; height:26px; stroke:var(--green-700); stroke-width:1.4; }
.catalog-card h2,.catalog-card h3{ font-size:clamp(23px,1.3rem + .6vw,28px); }
.catalog-card .desc{ color:var(--muted); margin-top:12px; max-width:62ch; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s-5); }
.chip{
  background:transparent; border:1px solid var(--border); border-radius:var(--r);
  padding:7px 13px; font-size:14px; font-weight:600; color:var(--muted);
}

/* -----------------------------------------------------------
   Lead form
----------------------------------------------------------- */
.quote{ background:var(--navy-900); color:#fff; }
.quote .wrap{ display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr); gap:clamp(34px,5vw,72px); align-items:start; }
.quote h2{ color:#fff; max-width:14ch; }
.quote-copy p{ color:var(--on-navy-soft); font-size:17.5px; max-width:48ch; margin-top:var(--s-5); }
.quote-alt{ margin-top:var(--s-7); display:flex; flex-direction:column; border-top:1px solid var(--on-navy-line); }
.quote-alt a,.quote-alt > span{
  display:inline-flex; align-items:flex-start; gap:13px;
  padding-block:16px; border-bottom:1px solid var(--on-navy-line);
}
.quote-alt svg{ width:19px; height:19px; stroke:var(--sage-300); margin-top:4px; }
.quote-alt .lbl{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.085em; color:var(--on-navy-soft); line-height:1.4; }
.quote-alt .val{ font-size:18px; font-weight:700; color:#fff; }
.quote-alt a:hover .val{ color:var(--sage-200); }

.form-card{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px);
}
.form-card h3{ font-size:24px; }
.form-intro{ color:var(--muted); font-size:15.5px; margin-top:8px; }
.form-card form{ margin-top:var(--s-6); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:12.5px; font-weight:700; letter-spacing:.085em; color:var(--muted); }
.field input,.field select,.field textarea{
  min-height:50px; padding:12px 14px;
  border:1px solid var(--field-border); border-radius:var(--r);
  background:#fff; color:var(--ink);
  font-family:inherit; font-size:16px;      /* 16px stops iOS zooming on focus */
  transition:border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.field input::placeholder,.field textarea::placeholder{ color:var(--quiet); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--navy-900); box-shadow:inset 0 0 0 1px var(--navy-900); outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:3px solid var(--navy-700); outline-offset:2px;
}
.field textarea{ resize:vertical; min-height:104px; }
.form-submit{ width:100%; margin-top:4px; }
.form-reply{
  display:flex; align-items:center; gap:9px; justify-content:center;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--hairline);
  font-size:14px; font-weight:600; color:var(--muted); text-align:center;
}
.form-reply svg{ width:16px; height:16px; stroke:var(--green-700); }
/* Marketing-consent opt-in. Deliberately a plain unticked checkbox with the
   full wording beside it: a pre-ticked box is not consent under Israeli
   Communications Law s.30A, and a vague one is not either. The 44px min-height
   keeps it a comfortable tap target on a phone. */
.consent-check{
  display:flex; align-items:flex-start; gap:11px;
  min-height:44px; padding-block:6px; cursor:pointer;
  font-size:13.5px; font-weight:400; letter-spacing:0; line-height:1.55; color:var(--muted);
}
.consent-check input[type="checkbox"]{
  flex:0 0 auto; width:19px; height:19px; margin-top:2px;
  accent-color:var(--green-700); cursor:pointer;
}
.consent-check input[type="checkbox"]:focus-visible{
  outline:3px solid var(--navy-700); outline-offset:2px;
}
.consent-check span{ flex:1 1 auto; }

.form-note{ font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center; }
.form-note a{ color:var(--navy-900); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
#formStatus{
  display:none; margin-top:16px; padding:13px 16px; border-radius:var(--r);
  font-size:15px; font-weight:600;
}
#formStatus.ok{ display:block; background:var(--green-wash); color:var(--green-900); border:1px solid var(--green-600); }
#formStatus.err{ display:block; background:#FBEDE9; color:#8E2A1E; border:1px solid #C97F70; }

/* -----------------------------------------------------------
   Global contact block + footer
----------------------------------------------------------- */
.global-contact{ background:var(--navy-800); color:#fff; padding-block:var(--s-7); }
.global-contact-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  margin-bottom:var(--s-6);
  border-top:1px solid var(--on-navy-line); border-bottom:1px solid var(--on-navy-line);
}
.info-row{
  display:flex; align-items:flex-start; gap:11px;
  padding-block:18px; padding-inline:0 22px;
  border-inline-start:1px solid var(--on-navy-line);
}
.info-row:first-child{ border-inline-start:none; }
.info-row:not(:first-child){ padding-inline-start:22px; }
.info-row .ic{
  width:auto; height:auto; border-radius:0; background:transparent;
  display:flex; align-items:flex-start; padding-top:3px; flex:none;
}
.info-row .ic svg{ width:17px; height:17px; stroke:var(--sage-300); }
.info-row strong{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.085em; color:var(--on-navy-soft); }
.info-row a,.info-row span{ font-size:15px; font-weight:600; color:#fff; }
.info-row a:hover{ color:var(--sage-200); }

.passportcard-btn{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:transparent; border:1px solid var(--on-navy-line-strong);
  border-radius:var(--r); padding:18px 22px;
  transition:border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.passportcard-btn:hover{ border-color:var(--sage-300); background:rgba(255,255,255,.04); }
.passportcard-mark{
  font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.01em;
  color:#fff; background:transparent;
  border:1px solid var(--on-navy-line-strong);
  padding:8px 14px; border-radius:var(--r);
}
.passportcard-text{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:190px; }
.passportcard-text strong{ font-size:14.5px; font-weight:700; color:#fff; }
.passportcard-text span{ font-size:13.5px; color:var(--on-navy-soft); }
.passportcard-call{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--green-700); color:#fff;
  font-weight:700; font-size:14.5px; padding:11px 18px; border-radius:var(--r);
  min-height:44px; transition:background-color .18s var(--ease-out);
}
.passportcard-btn:hover .passportcard-call{ background:var(--green-600); }
.passportcard-call svg{ width:16px; height:16px; }

footer{ background:var(--navy-900); color:var(--on-navy-soft); }
.footer-top{ border-top:1px solid var(--on-navy-line); padding-block:var(--s-7) var(--s-6); }
.footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:var(--s-7); }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:var(--s-4); }
.footer-brand strong{ font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:#fff; }
.footer-about{ font-size:16px; max-width:42ch; line-height:1.7; }
.footer-col h2{
  font-family:var(--font-body); font-weight:700; font-size:14px; letter-spacing:.085em;
  color:var(--on-navy-soft); margin-bottom:var(--s-4);
  padding-bottom:10px; border-bottom:1px solid var(--on-navy-line);
}
.footer-col li{ margin-bottom:10px; font-size:16px; }
.footer-col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer-bottom{
  border-top:1px solid var(--on-navy-line); padding-block:20px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:14.5px;
}
.footer-bottom a{ text-decoration:underline; text-underline-offset:3px; }

/* -----------------------------------------------------------
   Sticky call bar (phones only)
----------------------------------------------------------- */
.sticky-cta{ display:none; }
.sticky-cta a{ min-height:52px; }

/* -----------------------------------------------------------
   Prose (privacy policy, terms, accessibility statement)
----------------------------------------------------------- */
.prose{ max-width:68ch; }
.prose h2{ font-size:clamp(21px,1.2rem + .55vw,27px); margin-top:var(--s-8); margin-bottom:var(--s-3); }
.prose h2:first-child{ margin-top:0; }
.prose p,.prose li{ color:var(--muted); font-size:16.5px; }
.prose ul{ list-style:disc; padding-inline-start:22px; margin:0 0 var(--s-4); }
.prose li{ margin-bottom:8px; }
.prose a{ color:var(--navy-900); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--green-700); }
.prose strong{ color:var(--ink); }
.prose-updated{ font-size:13px; font-weight:700; letter-spacing:.085em; color:var(--muted); margin-bottom:var(--s-7); }
.prose-contact{ list-style:none; padding-inline-start:0; }
.prose-contact li{ margin-bottom:6px; }
.prose-contact strong{ display:inline-block; min-width:7.5em; }

/* -----------------------------------------------------------
   Status pages (404, thank you)
----------------------------------------------------------- */
.status-page{ background:var(--navy-900); color:#fff; padding-block:clamp(56px,9vw,120px); }
.status-page h1{ color:#fff; }
.status-page .status-inner{ max-width:660px; }
.status-code{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(56px,10vw,104px); letter-spacing:-.03em;
  color:var(--sage-300); line-height:1; margin-bottom:var(--s-4);
}
.status-mark{ height:72px; width:auto; }
.status-page p{ color:var(--on-navy-soft); font-size:18px; margin-top:var(--s-5); max-width:52ch; }
.status-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:var(--s-6); }
/* Frizbi comparison widget — a third-party tool on its own white canvas, so it
   gets a light card rather than sitting bare on the page's navy background. */
.frizbi-embed{
  margin-top:var(--s-7); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.frizbi-embed iframe{ display:block; width:100%; height:768px; border:0; }
@media (max-width:640px){ .frizbi-embed iframe{ height:640px; } }
.frizbi-reset{ margin-top:var(--s-5); text-align:center; }
.status-links{ margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--on-navy-line); }
.status-links h2{
  font-family:var(--font-body); font-size:12.5px; font-weight:700; letter-spacing:.085em;
  color:var(--on-navy-soft); margin-bottom:var(--s-4);
}
.status-links ul{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.status-links a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:4px; }
.status-links a:hover{ color:var(--sage-200); }

/* -----------------------------------------------------------
   Cookie consent banner
   js/consent.js injects its own <style> at runtime and is not ours to edit.
   These rules out-specify it so the banner belongs to the same design system
   as the rest of the page instead of shipping a highlighter-green button.
----------------------------------------------------------- */
.cc-banner.cc-banner{ box-shadow:none; border-top:1px solid var(--on-navy-line-strong); }
.cc-banner .cc-btn{ border-radius:var(--r); font-size:15px; }
.cc-banner .cc-btn.cc-accept{ background:var(--sage-300); color:var(--navy-900); border-color:var(--sage-300); }
.cc-banner .cc-btn.cc-accept:hover{ background:var(--sage-200); border-color:var(--sage-200); }
.cc-banner .cc-btn:focus-visible{ outline:3px solid var(--sage-200); outline-offset:2px; }
.cc-banner .cc-text a{ color:var(--sage-200); }

/* -----------------------------------------------------------
   Motion
   One authored moment: the hero settles on load. Everything else
   is a quiet, single-use reveal. Content is never gated behind it —
   the opacity:0 rule only applies once JavaScript has confirmed it runs.
----------------------------------------------------------- */
@keyframes heroIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes heroCardIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

.js [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.js [data-reveal].in-view{ opacity:1; transform:none; }
.js [data-reveal="stagger"] > *{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js [data-reveal="stagger"].in-view > *{ opacity:1; transform:none; }
.js [data-reveal="stagger"].in-view > *:nth-child(1){ transition-delay:.03s; }
.js [data-reveal="stagger"].in-view > *:nth-child(2){ transition-delay:.08s; }
.js [data-reveal="stagger"].in-view > *:nth-child(3){ transition-delay:.13s; }
.js [data-reveal="stagger"].in-view > *:nth-child(4){ transition-delay:.18s; }
.js [data-reveal="stagger"].in-view > *:nth-child(5){ transition-delay:.23s; }
.js [data-reveal="stagger"].in-view > *:nth-child(6){ transition-delay:.28s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-delay:0ms!important;
    animation-iteration-count:1!important; transition-duration:.001ms!important;
  }
  .js .hero-eyebrow,.js .hero-act,.js .hero-plate img,
  .js [data-reveal],.js [data-reveal="stagger"] > *{
    opacity:1!important; transform:none!important;
  }
}

/* -----------------------------------------------------------
   Responsive
----------------------------------------------------------- */
@media (max-width:1120px){
  .main-nav{ gap:18px; }
  .main-nav a{ font-size:14.5px; }
  .main-nav a.nav-external{ padding-inline-start:16px; }
}

@media (max-width:980px){
  .quote .wrap{ grid-template-columns:1fr; }
  .testimonial-grid{ grid-template-columns:repeat(2,1fr); gap:0 var(--s-6); }
  .global-contact-grid{ grid-template-columns:1fr 1fr; }
  .info-row:nth-child(odd){ border-inline-start:none; padding-inline-start:0; }
  .info-row:nth-child(n+3){ border-top:1px solid var(--on-navy-line); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  html{ scroll-padding-top:80px; }
  /* A heading beside its deck needs two real columns. On a phone there is
     room for one, so the deck goes underneath instead of into a 12ch gutter. */
  .section-head-row{ grid-template-columns:1fr; gap:var(--s-4); }
  .section-head-row > h2{ max-width:20ch; }
  .main-nav{ display:none; }
  .header-cta .phone-pill .lbl{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .header-cta .btn-accent{ display:none; }
  .contact-bar-item.optional{ display:none; }
  .contact-bar-cta{ display:none; }

  /* Touch: nothing tappable smaller than 44px. Links that sit inside a
     sentence are left alone — enlarging them would break the paragraph. */
  .breadcrumb a,
  .footer-col li a,
  .status-links a,
  .info-row a,
  .contact-bar-item,
  .quote-alt a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .footer-col li{ margin-bottom:0; }
  .status-links ul{ gap:0 22px; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .catalog-card{ grid-template-columns:1fr; gap:var(--s-4); }
  .catalog-card-ic{ padding-top:0; }
  .cta-row{ grid-template-columns:1fr; gap:var(--s-5); }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; gap:var(--s-6); }
  .footer-bottom{ flex-direction:column; }

  /* body gets clearance for the sticky bar, plus whatever the consent
     banner reserves via --consent-height */
  body{ padding-bottom:calc(72px + var(--consent-height)); }
  .sticky-cta{
    position:fixed; z-index:90;
    inset-inline:0; bottom:var(--consent-height);
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(14,27,61,.97);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--on-navy-line-strong);
    transition:bottom .25s var(--ease-out);
  }
  .sticky-cta .btn{ width:100%; font-size:15.5px; padding-inline:12px; }
}

/* Below this the header runs out of room for brand + phone + menu.
   The phone stays one tap away: it is in the bar directly underneath and in
   the sticky call bar at the bottom of the screen. */
@media (max-width:640px){
  .header-cta .phone-pill{ display:none; }
  .contact-bar-item:first-child{ padding-inline-end:0; }
}

@media (max-width:560px){
  :root{ --gutter:20px; }
  .global-contact-grid{ grid-template-columns:1fr; }
  .info-row{ border-inline-start:none!important; padding-inline-start:0!important; }
  .info-row:not(:first-child){ border-top:1px solid var(--on-navy-line); }
  .passportcard-btn{ gap:14px; }
  .passportcard-call{ width:100%; justify-content:center; }
  .brand-text span{ display:none; }
  .faq-item summary{ padding:17px 0; font-size:17px; }
  .faq-answer{ padding-inline:0; }
  .section-head-row{ gap:var(--s-4); }
}

@media (max-width:380px){
  .brand img{ height:36px; }
  .brand-text strong{ font-size:18px; }
  .nav-toggle span{ display:none; }
  .nav-toggle{ padding:10px; }
}

/* -----------------------------------------------------------
   Print
----------------------------------------------------------- */
@media print{
  .site-header,.contact-bar,.mobile-nav,.sticky-cta,.breadcrumb{ display:none!important; }
  body{ background:#fff; padding-bottom:0; }
  .hero,.quote,.status-page,.global-contact,footer{ background:#fff!important; color:#000!important; }
  .quote h2{ color:#000!important; }
}

/* -----------------------------------------------------------
   Landing page — partner marquee and action tiles
   The page is a board of buttons: every block is something you
   tap, not something you read.
----------------------------------------------------------- */

/* -----------------------------------------------------------
   Contact page — every route to the agency in one place
----------------------------------------------------------- */
.ct-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:var(--s-6); }
.ct-actions .btn{ gap:9px; }
.ct-actions .btn svg{ width:18px; height:18px; }

.ct-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:14px;
}
.ct-card{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:20px 18px;
}
.ct-card h2{ font-size:19px; margin-bottom:12px; }
.ct-note{ font-size:13.5px; color:var(--muted); margin-bottom:12px; line-height:1.5; }

.ct-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.ct-list > li{ display:flex; align-items:flex-start; gap:11px; }
.ct-list svg{ width:17px; height:17px; margin-top:3px; color:var(--green-700); flex:none; }
.ct-list > li > span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ct-list b{
  font-size:12px; font-weight:700; letter-spacing:.05em;
  color:var(--quiet); text-transform:none;
}
.ct-list a{
  color:var(--navy-900); font-weight:700; font-size:15.5px;
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--sage-300);
  /* a phone number or address must be able to break rather than push the
     card wide enough to start a horizontal scroll on a phone */
  overflow-wrap:anywhere;
}
.ct-list a:hover{ text-decoration-color:var(--green-700); }
.ct-list > li > span:not(:has(a)){ font-size:15.5px; color:var(--ink); font-weight:600; }

/* direct-dial list: name, role, number */
.ct-people{ gap:15px; }
.ct-person{ display:flex; flex-direction:column; gap:2px; padding-bottom:13px; border-bottom:1px solid var(--hairline); }
.ct-person:last-child{ border-bottom:0; padding-bottom:0; }
.ct-person-name{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--navy-900); }
.ct-person-role{ font-size:13px; color:var(--muted); line-height:1.45; }
.ct-person-tel{
  margin-top:4px; align-self:flex-start;
  font-weight:700; font-size:15.5px; color:var(--green-700);
  text-decoration:underline; text-underline-offset:3px;
}

.ct-card--urgent{ background:var(--green-wash); border-color:var(--sage-300); }

@media (max-width:560px){
  .ct-actions .btn{ flex:1 1 100%; justify-content:center; }
}

/* ============================================================
   LANDING LAYER — round 2 (owner review: "not enough")

   The brief for this pass was subtraction plus ambition. Round 1
   was a competent board of buttons; it read as a website. This is
   one landing page.

   What the visual world is:
     A near-black vault at the top, lit by a single cyan source
     (the light side of the agency's own navy-to-cyan print
     gradient), with the Carmel ridge as a backing plate. Warm ivory
     paper for everything you actually read. One dark chapter in
     the middle for the agency's story, because that is the part
     that is supposed to feel like something.

     Hairlines, not shadows. One small radius. Cyan appears a
     handful of times on the whole page and never as decoration;
     the brand lime lives only inside the agency's own icons.

   Plane rhythm:
     void hero -> paper logo plinth -> ivory purchase -> four
     alternating paper/ivory category chapters -> DARK story ->
     void footer.

   What was deleted in this pass:
     the header phone + WhatsApp button, both hero buttons, the
     four-cell trust strip, three of the four service card grids,
     two WhatsApp capture bands, the full-width accent band, the
     four-card agency grid, the boxed emergency panel, and the two
     service-charter placeholder blocks.
   ============================================================ */

:root{
  --void:#070C1A;             /* the deepest plane */
  --on-void:#FFFFFF;
  --on-void-soft:#8E93A3;     /* 5.9:1 on the void — quiet, still AA */
  --lp-header-h:78px;
}

/* Anchor jumps only have to clear the floating header pill now — the proof
   band no longer docks (2026-08-21 second round: it lives at the top of the
   page and scrolls away with it). */
html{ scroll-padding-top:calc(var(--lp-header-h) + 24px); }

/* ---- shared controls ---------------------------------------- */
.btn-lg{ min-height:60px; padding:18px 32px; font-size:17px; }
/* The primary CTA carries a 44-character Hebrew sentence, and .btn sets
   white-space:nowrap. This is the one button allowed to wrap. */
.btn-cta{ white-space:normal; text-align:center; line-height:1.34; text-wrap:balance; padding-inline:28px; max-width:30rem; }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.26); }
.btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.09); }
/* Press feedback lives on pointer-down, not on release. */
.btn{ transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out),
                 color .18s var(--ease-out), transform .1s var(--ease-out); }
.btn:active{ transform:scale(.985); }

/* The landing page draws its own edges. The multi-page rule that puts a
   hairline between every pair of sections would land a light line between
   the void hero and the ivory field below it. */
main > section + section{ border-top:none; }

/* -----------------------------------------------------------
   HEADER — a floating pill.

   Not a bar welded to the top edge: a detached, inset container
   with its own hairline and its own blur, with the page sliding
   underneath it. Two things it has to get right:

   1 · IT MUST WORK OVER BOTH GROUNDS. The previous build flipped
       to translucent ivory once the hero was behind you — and then
       the dark story chapter scrolled under it and composited to a
       muddy grey. So the pill no longer guesses. Every section
       declares data-header-theme, js/motion.js watches which one is
       crossing the pill's own band, and the pill re-tints to match.
       Light plane -> paper pill, navy ink. Dark plane -> smoked
       glass, white ink. It is never wrong, because it is never
       inferring.

   2 · IT MUST STAY LEGIBLE TO A CONTRAST CHECKER. The pill is
       fixed, so its compositing parent is <body> (ivory), not the
       section behind it. A 55%-opaque dark pill would therefore be
       *measured* against ivory and fail even though it looks fine.
       Both grounds are held at >=.82 alpha, which keeps the real
       measured contrast above 11:1 while still reading as glass.

   The container radius is 18px, not 999px. A full pill at this
   size reads as a consumer toy; the one true pill on the page is
   the phone button inside it, which is the thing to press.
----------------------------------------------------------- */
.lp-header{
  position:fixed; z-index:80;
  inset-block-start:0; inset-inline:0;
  pointer-events:none;                 /* the gutter is not a click target */
  padding-block:var(--pill-gap,14px);
}
.lp-header .wrap{ display:block; padding-block:0; }

/* fit-content, not the full 1180px column: two items at opposite ends of a
   1130px bar is a navigation bar with the navigation missing. Hugging its
   own contents is what makes it read as one floating object. */
.pill{
  pointer-events:auto;
  width:fit-content; max-width:100%; margin-inline:auto;
  display:flex; align-items:center; gap:14px;
  padding:8px 10px 8px 14px;
  border-radius:18px;
  border:1px solid var(--pill-line,rgba(255,255,255,.16));
  background:var(--pill-bg,rgba(9,14,26,.86));
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--pill-shadow,0 1px 0 rgba(255,255,255,.05) inset);
  transition:background-color .5s var(--ease-soft), border-color .5s var(--ease-soft),
             box-shadow .5s var(--ease-soft), transform .5s var(--ease-soft);
}
/* Light ground: paper glass, navy ink. */
[data-header="light"] .pill{
  --pill-bg:rgba(252,249,243,.88);
  --pill-line:rgba(20,26,32,.10);
  --pill-shadow:0 10px 30px -18px rgba(20,26,32,.5);
}
/* The pill settles a little tighter into the corner once the page moves.
   Transform only: no padding or height is animated anywhere, so this never
   costs a layout pass on the one element guaranteed to be on screen while
   the visitor is scrolling. */
.is-stuck .pill{ transform:translate3d(0,-4px,0) scale(.985); }

/* 46px, not the tile's 38: the whole brand lockup is a link to the home
   page and a link is a tap target. */
.lp-header .brand{ gap:12px; min-height:46px; }
.brand-tile{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; border-radius:12px;
  background:#fff;
}
.brand-tile img{ height:28px; width:auto; }
.lp-header .brand-text strong{
  font-family:var(--font-display); font-weight:800; font-size:19.5px;
  letter-spacing:-.022em; color:var(--pill-ink,#fff);
  transition:color .5s var(--ease-soft);
}
.lp-header .brand-text span{
  font-size:12.5px; font-weight:700; letter-spacing:.12em;
  color:var(--pill-ink-soft,#AFBBD6);
  transition:color .5s var(--ease-soft);
}
[data-header="light"] .pill{ --pill-ink:var(--navy-900); --pill-ink-soft:var(--muted); }

/* ---- the phone, restored ------------------------------------
   The one thing in the header besides the logo, and the one true
   pill shape on the page. Quiet at rest, warm on hover. */
.pill-tel{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  min-height:46px; padding:0 15px;
  /* a hairline in front of it separates brand from action inside one object */
  margin-inline-start:2px;
  border-radius:var(--r-pill);
  border:1px solid var(--tel-line,rgba(255,255,255,.2));
  background:var(--tel-bg,rgba(255,255,255,.05));
  color:var(--pill-ink,#fff);
  transition:background-color .22s var(--ease-out), border-color .22s var(--ease-out),
             color .22s var(--ease-out);
}
.pill-tel svg{ width:16px; height:16px; stroke:var(--tel-ic,var(--cyan-soft)); }
.pill-tel-lbl{
  font-size:10.5px; font-weight:700; letter-spacing:.14em;
  color:var(--pill-ink-soft,#AFBBD6);
  transition:color .5s var(--ease-soft);
}
.pill-tel-num{ font-size:15.5px; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.005em; }
.pill-tel:hover{
  background:var(--tel-bg-h,rgba(255,255,255,.12));
  border-color:var(--tel-line-h,rgba(255,255,255,.38));
}
[data-header="light"] .pill-tel{
  --tel-line:rgba(20,26,32,.16); --tel-bg:transparent; --tel-ic:var(--green-700);
  --tel-bg-h:var(--navy-900); --tel-line-h:var(--navy-900);
}
[data-header="light"] .pill-tel:hover{ color:#fff; }
[data-header="light"] .pill-tel:hover .pill-tel-lbl{ color:rgba(255,255,255,.78); }
[data-header="light"] .pill-tel:hover svg{ stroke:var(--cyan-soft); }

/* ---- WhatsApp, moved into the header --------------------------
   Same outline treatment as the phone, so the header reads as ONE quiet
   object with two ways out of it rather than as a toolbar. The glyph carries
   WhatsApp's green; the surface does not, because the only filled green on
   the page is the button in the hero and two of them would cancel each other.

   #1FA855 rather than the platform's #25D366: on the dark pill the brand
   green is fine, but on the paper pill it measures 2.1:1 and a control's
   icon has to be seen. This one lands at 3.4:1 on paper and 4.4:1 on the
   dark glass, both above the 3:1 floor for a non-text control. */
.pill-wa{
  flex:none; display:inline-flex; align-items:center; gap:8px;
  min-height:46px; padding:0 15px;
  border-radius:var(--r-pill);
  border:1px solid var(--tel-line,rgba(255,255,255,.2));
  background:var(--tel-bg,rgba(255,255,255,.05));
  color:var(--pill-ink,#fff);
  font-size:14px; font-weight:700; letter-spacing:-.005em;
  transition:background-color .22s var(--ease-out), border-color .22s var(--ease-out),
             color .22s var(--ease-out);
}
.pill-wa svg{ flex:none; width:19px; height:19px; fill:#3DD07E; transition:fill .22s var(--ease-out); }
.pill-wa:hover{
  background:var(--tel-bg-h,rgba(255,255,255,.12));
  border-color:var(--tel-line-h,rgba(255,255,255,.38));
}
[data-header="light"] .pill-wa{ --tel-line:rgba(20,26,32,.16); --tel-bg:transparent; }
[data-header="light"] .pill-wa svg{ fill:#1FA855; }
[data-header="light"] .pill-wa:hover{ color:#fff; }
[data-header="light"] .pill-wa:hover svg{ fill:#3DD07E; }
/* Icon-only below 700px. The control keeps its 46px box; only the word goes,
   and the accessible name is already on the link's aria-label. */
@media (max-width:700px){
  .pill-wa-lbl{ display:none; }
  /* min-width, not padding arithmetic: icon (19) + 2x13 padding measured 43px,
     one pixel under the 44px tap floor. */
  .pill-wa{ padding:0 13px; min-width:46px; justify-content:center; }
}

/* charter.html reuses the pill, with a way back instead of a phone. */
.doc-back{ pointer-events:auto; }

/* -----------------------------------------------------------
   THE OPENING PICTURE — the owner's choice, 2026-08-21 second round.

   ONE PICTURE, FOUR WORDS. The plate (assets/hero-home.jpg) is a pale-stone
   family house at golden hour with a car in the driveway — the agency's own
   logo (a house with a car beneath it) made real. See the markup comment in
   index.html for the provenance and the gibberish-removal note.

   REBUILT FOR A HIGH-KEY PLATE. The previous plate was dark and the type was
   white in shadow; carrying that over would have put white text on a sunset
   sky. So the whole treatment flips: the headline is the site's navy ink, set
   in the pale sky at the top reading edge, held by a soft ivory bloom
   (.hero-scrim) that reads as sky haze. The house and car keep the lower two
   thirds untouched, and the picture dissolves into paper at its foot
   (.hero::after) so it and the purchase section share one surface.

   The band above this is the insurer strip, whose paper the bloom continues —
   the seam between paper and photograph is a dissolve, not a line, which is
   the owner's own standing instruction ("make it blend with each other").
----------------------------------------------------------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--bg); color:var(--navy-900);
  /* The consent banner is position:fixed and reserves its height in
     --consent-height; the proof band above claims --proof-band-h. Subtracting
     both means strip + picture together compose exactly one first screen. */
  min-height:calc(100svh - var(--consent-height) - var(--proof-band-h));
  display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(30px,5.5vh,72px) clamp(38px,7vh,92px);
}

/* THE PLATE, in two nested layers on purpose.

   The WRAPPER owns the scroll parallax. The IMAGE owns the load entrance. If
   both lived on one element the second transform would silently overwrite the
   first the moment the visitor scrolled during the entrance.

   The parallax is a dolly, not a slide — the owner's second-round ask,
   verbatim: "make it a motion, like 3D motion, when you scroll down". As the
   screen leaves, the plate drifts down and grows (a camera pushing in) while
   the words lift away from it at a different rate and the paper dissolve at
   the foot holds still — three planes, three rates, so the picture reads as
   depth instead of scrolling as one flat poster.
   Transform only — never width, height, padding or margin. */
.hero-plate{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  transform:translate3d(0,calc(var(--hp,0) * 8vh),0) scale(calc(1 + var(--hp,0) * .11));
  will-change:transform;
}
/* Both dimensions are set here, so the width/height attributes on the element
   cannot survive into layout and squash the picture.
   object-position 50% 42%: the hero's box is wider than 16:9, so the picture
   is cropped top and bottom — biased upward to keep the sky (where the words
   live) while the crop eats gravel below the car, not the car. */
.hero-plate img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
}

/* THE SCRIM — now a BLOOM, not a veil. Two gradients, no image, no mesh.

   The plate is bright, so the old job (darken behind white type) inverts:
   the ink is navy and the scrim's job is to guarantee a pale ground under it
   without dimming the golden hour. An ivory ELLIPSE anchored at the TOP of
   the reading edge — where the sky already is — lifts the sky toward paper
   behind the words and fades out before the house, so the picture keeps its
   light and the type gets its floor. It reads as haze, not as a panel,
   because it is the same warm ivory the page is printed on.

   NOTE — `at 100% 0%` and the vertical ramp are PHYSICAL positions,
   deliberately. CSS gradients do not mirror under dir="rtl" and there is no
   logical equivalent for a gradient position, so this is set by hand for a
   page whose type sits on the physical right. If this page were ever set LTR
   it has to be flipped by hand.

   The second gradient is the seam with the insurer strip above: a short
   paper-to-clear ramp so the photograph develops out of the band's paper
   instead of starting on a hard line — the owner's standing "make it blend"
   instruction, applied to the new top edge. The bottom edge is owned by the
   paper dissolve (.hero::after), unchanged. */
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(98% 88% at 100% 0%,
      rgba(251,247,239,.95) 0%,
      rgba(251,247,239,.88) 30%,
      rgba(251,247,239,.62) 50%,
      rgba(251,247,239,.32) 66%,
      rgba(251,247,239,0) 82%),
    linear-gradient(to bottom,
      rgba(251,247,239,.78) 0%,
      rgba(251,247,239,0) 13%);
}

/* THE DISSOLVE — the owner's 2026-08-21 note, verbatim: "you can see there is
   clearly a white line between the photo and the [next section]. Make it blend
   with each other." So the photograph no longer ends: over the last fifth of
   the screen it dissolves into the same paper the proof band is printed on,
   and the two sections share one continuous surface.

   The stops are eased on purpose. A linear transparent-to-paper ramp spends
   half its height as a grey fog over the picture (light ivory at 50% alpha
   over a dark plate reads as haze, not as light); front-loading the opacity
   into the last stops keeps the visible mixing zone short while the edge
   itself stays soft at every width. Sits above the scrim (later in paint
   order at the same z), below the words (z-2). The plate's parallax drifts
   the picture DOWN behind this, so scrolling melts the photo into the paper
   earlier, never opens a gap. */
.hero::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  inset-inline:0; bottom:0; height:clamp(120px,22vh,240px);
  background:linear-gradient(to bottom,
    rgba(251,247,239,0)    0%,
    rgba(251,247,239,.14) 32%,
    rgba(251,247,239,.42) 58%,
    rgba(251,247,239,.78) 80%,
    var(--paper)         100%);
}

.hero-inner{
  position:relative; z-index:2; min-width:0;
  /* Wider than the site's 1180px measure, and ONLY here. On a 1920px monitor
     the whole opening screen was stranded in a 1180px island with 370px of
     empty ground down each side; a hero is the one place that should keep
     growing. max() so narrower screens are never made narrower than they
     already were. */
  max-width:max(var(--maxw), min(1440px, 90vw));
  display:grid; grid-template-columns:minmax(0,1fr);
  justify-items:start;
  row-gap:clamp(18px,2.6vh,30px);
  /* The words lift and dim as the screen leaves, AGAINST the plate's downward
     dolly — the two planes pull apart, which is the depth the owner asked
     for. --hp runs 0 to 1 across the exit (js/motion.js). Transform and
     opacity only — never layout. */
  transform:translate3d(0,calc(var(--hp,0) * -15vh),0);
  opacity:calc(1 - var(--hp,0) * 1.35);
  will-change:transform,opacity;
}

.hero-eyebrow{
  margin:0 0 clamp(12px,1.6vh,20px); max-width:none;
  font-family:var(--font-body);
  font-size:12.5px; font-weight:700; line-height:1.3;
  letter-spacing:.185em; color:var(--cyan-soft);
}

/* THE SENTENCE. One size, two weights.

   The whole hierarchy of this screen is inside a single headline: the
   condition is set at 500 and the answer at 900, so the sentence reads with
   its stress in the right place without a second colour, a second size or a
   highlight. Rubik's Hebrew is wide and square at 900 and still has real
   structure at 500, which is why it can carry both ends.

   Tracking is -.038em. Hebrew wants tighter tracking than Latin at display
   size — Latin defaults leave it looking loose — and this face gets loose fast
   above about 70px. */
.hero h1{
  /* Navy ink, not white: the plate is high-key and the words sit in the pale
     sky over the ivory bloom. Same ink family as every heading on the page,
     so the hero finally speaks in the site's own voice. */
  color:var(--navy-900); margin:0; max-width:none;
  font-family:var(--font-display);
  font-size:clamp(42px, 1.55rem + 5.3vw, 104px);
  line-height:1.02; letter-spacing:-.038em;
  /* The base h1 rule sets text-wrap:balance, which re-breaks a headline that
     already declares its own line breaks. The .ln pairs ARE the breaks. */
  text-wrap:wrap;
}
/* The mask for the line reveal. The padding/negative-margin pair is not
   decoration: ך in "ביום שצריך," has a descender that a plain overflow:hidden
   box crops clean off. The box is grown to hold it and pulled back so the
   rhythm above and below is unchanged. */
.hero h1 .ln{
  display:block; overflow:hidden;
  padding-block:.10em .26em;
  margin-block:-.10em -.26em;
}
.hero h1 .ln > span{ display:block; }
.hero h1 .ln:nth-child(1) > span{ font-weight:500; }
.hero h1 .ln:nth-child(2) > span{ font-weight:900; }

/* The sentence block under the headline is held to the same measure as the
   headline so the block has one edge on the left instead of ragged ones.
   The hairline that used to sit between them was removed at the owner's
   instruction (2026-08-21) — "it looks like an article from the lines" — and
   the room it held is held by the margin below, not by a stroke. */
.hero-say,
.hero-act{ width:100%; }

.hero-act{
  margin:0; margin-block-start:clamp(8px,1.4vh,18px);
  display:grid; gap:clamp(18px,2.4vh,26px); justify-items:start;
}
/* NOT --on-navy-soft. That token is calibrated for text on FLAT navy, where it
   measures 8.8:1; over a photograph the same colour lands on the shoulder of
   the light beam and measures 2.0:1, which is a legal failure in Israel, not a
   style preference. This is a hero-only value: a very pale cool light, tinted
   toward the plate rather than pure white so the sentence still sits a step
   below the headline in the hierarchy. Measured at 6.3:1 against the worst
   pixel it touches (scripts/_hero-contrast-tmp.mjs).

   text-wrap:balance because the default break left "מאז 1977." stranded on a
   line of its own, which reads as a mistake rather than as a line break. */
.hero-line{
  margin:0; max-width:38ch;
  color:#E6EEF0;
  font-size:clamp(16.5px,1rem + .45vw,20.5px); line-height:1.6;
  text-wrap:balance;
}

/* The ONLY conversion path in the opening screen, and one of only two on the
   page. Green because WhatsApp is green and nobody has to be told what it is.
   #0F7F44 rather than the platform's #25D366: white on the brand green is
   2.4:1 and fails AA outright, while white on this is 5.1:1. Radius follows
   the house 8px — a pill here would read as a consumer toy. */
.hero-wa{
  display:inline-flex; align-items:center; gap:12px;
  min-height:56px; padding:14px clamp(20px,2.2vw,30px);
  border-radius:var(--r-md);
  background:#0F7F44; color:#fff;
  font-family:var(--font-body); font-weight:700;
  font-size:clamp(15px,.9rem + .25vw,17px); line-height:1.3;
  letter-spacing:-.005em; text-wrap:balance;
  transition:background-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.hero-wa svg{ flex:none; width:23px; height:23px; }
.hero-wa:hover{ background:#0C6B39; }
.hero-wa:active{ transform:scale(.985); }

/* ---- the stacked composition ---------------------------------
   Below 900px the hero's box turns portrait and a centre crop of this
   landscape frame would show mostly house wall. 64% keeps the story: the
   right side of the house, the car in the drive, and sky above for the
   words. The words take the full measure at the top; the house and car get
   the lower half to themselves.

   The scrim is re-mixed to match: the ellipse is meaningless once the text
   spans the whole width, so one vertical paper ramp does all the work —
   strong where the words are (the top of the slice has tree canopy behind
   the sky, and navy ink needs a pale floor over it), gone by mid-screen so
   the picture keeps its warmth. */
@media (max-width:899px){
  .hero-plate img{ object-position:64% 50%; }
  .hero-scrim{
    background:linear-gradient(to bottom,
      rgba(251,247,239,.95) 0%,
      rgba(251,247,239,.9) 20%,
      rgba(251,247,239,.62) 33%,
      rgba(251,247,239,.26) 45%,
      rgba(251,247,239,0) 57%);
  }
  .hero-act{ justify-items:stretch; }
}

/* ---- the desktop composition ---------------------------------
   One column, held to a measure and pinned to the reading edge. In RTL
   justify-items:start is the RIGHT-hand side, so the block sits in the open
   sky and the house keeps the left of the frame entirely to itself.

   62vw rather than a fixed width: the house moves across the frame as the
   viewport aspect changes, and a measure that tracks the viewport keeps the
   type on the sky side of it at every width from 900 to 2560. */
@media (min-width:900px){
  .hero-say,
  .hero-act{ max-width:min(700px, 62vw); }
  .hero-inner{ row-gap:clamp(22px,3vh,38px); }
}

/* ---- the entrance --------------------------------------------
   Four arrivals, in the order a person would read them, and nothing arrives
   twice. Transform, opacity and one short blur — nothing that costs layout.

   The plate MATERIALISES rather than fading: it comes forward out of depth and
   resolves, which is what a real surface arriving looks like. The headline is
   the 3D moment — each line is clipped by its own mask and swings up out of
   the page on its own X axis, so the sentence assembles in space rather than
   sliding in flat. */
.js .hero-plate img{
  animation:plateIn 1.9s var(--ease-soft) both;
  will-change:transform,opacity,filter;
}
@keyframes plateIn{
  from{ opacity:0; transform:scale(1.085); filter:blur(12px); }
  58% { filter:blur(0); }
  to  { opacity:1; transform:scale(1);     filter:blur(0); }
}
/* A full-bleed blur is the one effect here heavy enough to drop frames on a
   mid-range phone, and a phone is where most of this traffic lands. On a small
   screen the plate arrives on scale and opacity alone, which is compositor-only
   and looks near enough identical. */
@media (max-width:700px){
  @keyframes plateIn{
    from{ opacity:0; transform:scale(1.07); }
    to  { opacity:1; transform:scale(1); }
  }
}

.js .hero-eyebrow{ animation:riseIn .95s var(--ease-soft) .30s both; }
/* .84s, not the old 1.02s: that delay waited for the hairline to draw itself
   under the headline, and the hairline is gone. The sentence now follows the
   second headline line directly. */
.js .hero-act    { animation:riseIn 1.0s var(--ease-soft) .84s both; }
@keyframes riseIn{
  from{ opacity:0; transform:translate3d(0,22px,0); }
  to  { opacity:1; transform:none; }
}

.js .hero h1 .ln > span{
  transform-origin:50% 0%;
  animation:lineUp 1.15s var(--ease-soft) both;
}
.js .hero h1 .ln:nth-child(1) > span{ animation-delay:.42s; }
.js .hero h1 .ln:nth-child(2) > span{ animation-delay:.56s; }
/* perspective() is first in the function list because it has to be: applied
   per element, it is the only way to get real depth without turning the whole
   headline into a 3D container. */
@keyframes lineUp{
  from{ opacity:0; transform:perspective(760px) translate3d(0,112%,0) rotateX(-62deg); }
  to  { opacity:1; transform:perspective(760px) translate3d(0,0,0)    rotateX(0deg); }
}

/* -----------------------------------------------------------
   THE PROOF BAND — a warm paper band at the TOP of the page,
   directly beneath the floating header pill and above the
   opening picture (owner's 2026-08-21 second-round instruction:
   "the logos up, under the header, and over the first page").

   NOT PINNED ANY MORE — a deliberate judgement, explained in
   index.html: pinned at the top it would permanently reserve
   header + band (~150px, nearly a fifth of a phone screen) and
   collide with the sticky category headings. At the top it is
   the first thing every visitor sees, which is what pinning was
   buying; it now rests here and scrolls away with the page.

   THE TOP PADDING IS THE PILL'S GROUND. The floating header
   pill is position:fixed and occupies the first --lp-header-h
   pixels of the viewport; the band claims that zone as its own
   top padding, so the pill floats on the band's paper instead
   of on whatever the page happens to put there.

   Light on purpose: most of these eleven marks are dark navy,
   plum, red or green, and on a navy ground they would simply
   disappear. Full colour, always moving.
----------------------------------------------------------- */
:root{
  /* the band's approximate total height — the hero subtracts it so strip +
     picture compose exactly one first screen */
  --proof-band-h:calc(var(--lp-header-h) + clamp(52px,5vw,72px));
}
.proof,
main > section + section.proof{
  position:relative; z-index:1; min-width:0;
  background:var(--paper);
  padding-block:calc(var(--lp-header-h) + 2px) clamp(12px,1.6vw,18px);
  /* the generic `main > section + section` hairline is switched off for the
     landing page; the band draws its own edge below instead */
  border-top:0;
  /* a hairline under the band so the photograph below meets an edge the
     bloom can dissolve from, not a smear */
  border-bottom:1px solid rgba(20,26,32,.08);
}
.hero-partners{ min-width:0; }

/* ---- the loop ------------------------------------------------
   FOUR identical sets, and the track slides by exactly -25% —
   one full set — at which point set 2 sits where set 1 began and
   the restart is invisible.

   Why four and not two: the previous build used two sets and
   -50%, which only stays seamless while ONE set is at least as
   wide as the screen. Eight tightly-spaced marks come to roughly
   1,200px, so on a 1920px monitor the strip ran out mid-cycle and
   opened a visible hole a few seconds in. With N sets the safe
   condition is (N-1) x set-width > viewport; at four that is
   ~3,600px, which clears a 2,560px display with room to spare.
   If the gap below is ever loosened, re-check that arithmetic.

   RTL note — this is the part that was actually broken, and adding
   sets alone would NOT have fixed it. In dir="rtl" an over-wide child
   is anchored by its RIGHT edge, so the whole track hangs off to the
   LEFT and there is nothing at all to the right of set 1. Sliding
   leftwards (negative X, which is what makes the marks travel
   right-to-left) therefore drags the only content off the screen and
   opens a hole on the right that grows every second — measured at
   40px after one second and 948px by the end of the cycle. That is
   exactly the "fine for three seconds, then a huge gap" report.
   direction:ltr on .marquee flips which edge the track is anchored
   by, so it now overflows to the RIGHT and there is always another
   set queued up to slide in. The marks still travel right-to-left,
   because transform is not direction-aware and negative X is still
   leftwards. Do not "tidy" this line away.

   The gap lives INSIDE each set, plus a matching padding on the
   inline end, so the four sets are exactly equal. A gap on the
   track makes them unequal and the seam jumps. These two values
   must always match. */
.marquee{
  background:transparent; border:0; padding-block:0;
  direction:ltr;              /* see the RTL note above — load-bearing */
  /* Clips the track so documentElement.scrollWidth never grows. This is the
     guarantee against sideways scroll that tests/overflow.mjs measures. Do
     not lean on html{overflow-x:clip} instead — that is set to `clip` on
     purpose so position:sticky on the header keeps working. */
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{
  display:flex; width:max-content;
  /* 46s, up from 34s: eleven marks made the loop ~45% longer, and a band
     that is now permanently on screen must drift, not race. */
  animation:marqueeSlide 46s linear infinite;
  will-change:transform;
}
.marquee-set{
  /* The track is ltr so it overflows rightwards (see the RTL note above), but
     the marks inside a set are still ordered for a Hebrew reader: row-reverse
     puts the first mark in the markup — הראל — at the right-hand end, so the
     strip reads הראל, הפניקס, מגדל, Trip Guaranty, כלל, מנורה,
     PassportCard right-to-left, exactly as briefed, while the DOM order a
     screen reader announces stays unchanged. */
  flex:none; display:flex; flex-direction:row-reverse; align-items:center; list-style:none;
  gap:clamp(22px,2.6vw,40px);
  padding-inline-end:clamp(22px,2.6vw,40px);   /* must equal the gap above */
  margin:0; padding-block:0; padding-inline-start:0;
}
.marquee-set li{ flex:none; display:flex; align-items:center; }
/* Cap BOTH axes and let each box keep its own aspect ratio. The eight marks
   come from eight brand systems; capping height alone let the widest (Clal,
   8:1) run three times the width of the narrowest and dominate the row.
   height:auto + width:auto is what keeps nothing squashed — these images
   carry width/height attributes, and without it the height attribute stays
   in force. It only works because every SVG here now carries intrinsic
   dimensions; phoenix-dark.svg once shipped with a viewBox and nothing else
   and collapsed to 0x0. If a logo ever vanishes, check that first. */
.marquee-set img{
  height:auto; width:auto;
  max-height:clamp(30px,3.4vw,44px);
  max-width:clamp(112px,13vw,190px);
  opacity:1;
}
/* Optical corrections, per mark. Eleven marks from eleven brand systems do
   not weigh the same at the same box height: the two small rasters must not
   be upscaled past their own pixels, and the widest wordmark needs more run
   so it does not read as the smallest thing in the row. */
.marquee-set img[src*="clal"]{ max-width:clamp(150px,16vw,215px); }
.marquee-set img[src*="shomera"]{ max-height:30px; }
/* Migdal is a tall narrow tower + wordmark, and Securitas is a circular badge.
   Constrained by the same max-height as the wide wordmarks they read as the two
   smallest things in the row, which makes two real insurers look like an
   afterthought. Both get more height so they match optically, not numerically. */
/* The real Migdal lockup (tower + wordmark, wide) replaced the old narrow
   word-only file on 2026-08-22 — the 42-62px cap tuned for that file made it
   the tallest thing in the row (the owner: "uneven"). Sit it just above the
   base wordmark height; the tower keeps its presence without breaking rank. */
.marquee-set img[src*="migdal"]{ max-height:clamp(32px,3.6vw,46px); }
.marquee-set img[src*="securitas"]{ max-height:clamp(34px,3.8vw,50px); }     /* circular badge — slightly over base, circles read small */
.marquee-set img[src*="hachshara"]{ max-height:38px; }   /* 41px-tall raster */
.marquee-set img[src*="shlomo"]{ max-height:clamp(28px,3.1vw,40px); } /* the solid circle reads heavy */
/* .matte marks the two partner logos that only exist as flat rasters. Their
   surround is now genuinely transparent in the file itself
   (scripts/matte-partner-logos.py), so they need no blend mode and no matching
   background. The stylesheet used to lean on mix-blend-mode:multiply here,
   which never actually worked: .marquee carries a mask-image, a mask isolates
   the group, and an isolated group leaves mix-blend-mode nothing to blend
   against. Do not reintroduce it, and do not add a filter to "help" — a filter
   creates a stacking context and breaks blending too. */
@keyframes marqueeSlide{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-25%,0,0); }
}

/* -----------------------------------------------------------
   PURCHASE — the four insurer routes.
   A gapless hairline grid, not four floating cards: one plate,
   divided. Every href carries the agency's agent code.
----------------------------------------------------------- */
/* Starts on the proof band's paper and eases down to the deeper ivory over the
   first ~240px, so the two light sections share one surface instead of meeting
   on a visible tone step. Part of the 2026-08-21 "make the sections blend"
   round: every light-to-light boundary on this page now continues its colour
   rather than cutting. */
.buy{
  background:linear-gradient(to bottom, var(--paper), var(--bg) 240px);
  padding-block:clamp(72px,9vw,146px) clamp(54px,6vw,100px);
}
.buy-head{ max-width:1000px; margin-bottom:clamp(34px,4.4vw,64px); }
/* The lead chapter carries the same icon plate as the four below it. */
.buy-head .cat-ic{ margin-bottom:clamp(18px,2.2vw,30px); }
.buy-head h2{
  font-family:var(--font-display); font-weight:900; max-width:none;
  font-size:clamp(30px,1.5rem + 3.1vw,70px); line-height:1.03; letter-spacing:-.032em;
}
.buy-head p{ color:var(--muted); font-size:clamp(16px,1rem + .35vw,20px); line-height:1.7; margin-top:18px; max-width:50ch; }

.buy-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--border);
  box-shadow:0 1px 0 rgba(20,26,32,.03);
  border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden;
}
.buy-grid > li{ display:flex; }
/* People choose a travel policy by brand, so the mark is the content here and
   it gets the top half of the card to itself, over a hairline. A 260px strip
   with a 28px logo in the corner read as a caption under the heading rather
   than as the section that actually earns the commission. */
.buy-card{
  position:relative; width:100%; min-height:326px;
  display:flex; flex-direction:column; gap:0;
  padding:clamp(24px,2.4vw,34px);
  background:#fff;
  transition:background-color .4s var(--ease-out);
}
.buy-card::after{
  content:""; position:absolute; inset-inline:0; bottom:0; height:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:right center;
  transition:transform .5s var(--ease-soft);
}
[dir="ltr"] .buy-card::after{ transform-origin:left center; }
.buy-card:hover{ background:#FFFCF3; }
.buy-card:hover::after,
.buy-card:focus-visible::after{ transform:scaleX(1); }
.buy-card-logo{
  display:flex; align-items:center;
  min-height:clamp(72px,7vw,104px);
  margin-bottom:clamp(18px,1.8vw,26px);
  border-bottom:1px solid var(--hairline);
}
.buy-card-logo img{
  height:auto; width:auto; max-height:clamp(30px,3vw,40px); max-width:100%;
  object-fit:contain; object-position:right center;
  transition:transform .5s var(--ease-spring);
}
[dir="ltr"] .buy-card-logo img{ object-position:left center; }
.buy-card:hover .buy-card-logo img{ transform:scale(1.06); }

.buy-card-body{ display:flex; flex-direction:column; gap:8px; }
.buy-card-name{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,1rem + .62vw,26px); letter-spacing:-.022em;
  color:var(--navy-900); line-height:1.2;
}
.buy-card-sub{ font-size:14.5px; line-height:1.6; color:var(--muted); }
.buy-card-go{
  margin-top:auto; padding-top:20px;
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:700; color:var(--green-700);
}
.buy-card-go svg{ width:14px; height:14px; transition:transform .35s var(--ease-out); }
.buy-card:hover .buy-card-go svg{ transform:translateX(6px); }   /* RTL: forward is left */

.quiet-link{
  display:inline-flex; align-items:center; gap:10px; min-height:48px;
  margin-top:clamp(22px,2.6vw,36px);
  font-size:15.5px; font-weight:700; color:var(--green-700);
  border-bottom:1px solid rgba(14,92,112,.32);
  transition:gap .35s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.quiet-link:hover{ gap:16px; color:var(--navy-900); border-bottom-color:var(--navy-900); }
.quiet-link svg{ width:14px; height:14px; }

/* -----------------------------------------------------------
   THE CATEGORY CHAPTERS — one insurance category per section.

   Round 2 compressed all eleven services into a single printed
   index. The owner asked for the earlier arrangement back, where
   every category owns its own row down the page, so this restores
   the per-category sections at round-2's quality rather than
   round-1's fifteen identical tiles.

   Anatomy, repeated four times (נסיעות · אלמנטרי · חיים · פיננסים):
     a short gold rule, the category name at display scale holding
     the reading edge, one line of deck — and beside it a hairline
     register of the services in that category. No boxes, no
     shadows, no icons.

   The planes alternate ivory / paper / ivory / paper so two
   chapters never merge into one flat field.
----------------------------------------------------------- */
/* No border-top and no flat fill: the hairline over a colour change was the
   "article" pattern the owner rejected (2026-08-21), and the planes still
   alternate — each chapter simply eases out of the plane above it over the
   first ~220px instead of cutting against it. The alternation order is strict
   (buy ivory → paper → ivory → paper → ivory), which is what lets each variant
   hard-code which colour it inherits. If a chapter is ever reordered, these
   two gradients must be re-paired. */
.cat{ padding-block:clamp(54px,6vw,100px); }
.cat--paper{ background:linear-gradient(to bottom, var(--bg), var(--paper) 220px); }
.cat--ivory{ background:linear-gradient(to bottom, var(--paper), var(--bg) 220px); }

.cat-wrap{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.7fr);
  gap:clamp(30px,4.5vw,84px); align-items:start;
}
/* The heading holds still while its own register travels past it. Confined to
   its section, so it releases the moment the next chapter arrives. */
/* Below the floating pill, not below the proof band: the band no longer
   docks (2026-08-21 second round). */
.cat-head{ position:sticky; top:calc(var(--lp-header-h) + 28px); }
/* The chapter mark is the agency's OWN category icon, recovered from its 5.5m
   banner (assets/icons/, see scripts note in the commit). It is drawn in the
   agency's brand colours — white line, lime, cyan — which only read on a deep
   ground, which is exactly the ground the banner and the presentation folder
   put them on. So the icon sits on a small void plate, one per chapter. This
   is the client's real artwork on the client's real ground; it is not a
   generic line icon in a circle, and it should not be replaced by one. */
.cat-ic{
  display:grid; place-items:center; flex:none;
  width:clamp(64px,6vw,88px); aspect-ratio:1;
  background:var(--void); border-radius:var(--r);
  margin-bottom:clamp(16px,1.9vw,26px);
}
.cat-ic img{
  width:72%;
  height:auto;              /* load-bearing: the img carries width/height
                               attributes, and without this the height
                               attribute stays in force and squashes it */
}
.cat-head h2{
  font-family:var(--font-display); font-weight:900; max-width:13ch;
  font-size:clamp(27px,1.4rem + 1.9vw,46px); line-height:1.06; letter-spacing:-.03em;
}
.cat-deck{ color:var(--muted); font-size:16px; line-height:1.7; margin-top:16px; max-width:33ch; }

/* The register. A 2px navy rule is its top edge — the same device a printed
   table of contents uses — and hairlines separate the rows underneath. */
.cat-list{ border-top:2px solid var(--navy-900); }
/* A directory row, not a card: name on the reading edge, the qualifier
   beside it, the arrow at the far end. Stacking the qualifier under the name
   left ~400px of empty plane between the words and the arrow, which reads as
   an unfinished table rather than a register. */
.svc-row{
  display:grid; grid-template-columns:auto auto minmax(20px,1fr) auto;
  align-items:baseline; gap:0 18px;
  padding:clamp(15px,1.6vw,21px) 0;
  border-bottom:1px solid var(--border);
}
.cat-list > li:last-child .svc-row{ border-bottom-color:var(--field-border); }
.svc-name{
  grid-column:1;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,1rem + .62vw,26px); letter-spacing:-.022em;
  color:var(--navy-900); line-height:1.2;
  transition:color .25s var(--ease-out);
}
.svc-sub{ grid-column:2; font-size:14px; color:var(--muted); line-height:1.5; }
/* The leader rule. Without it the short qualifier left half the row empty and
   the arrow read as stranded; a hairline running out to the arrow is what a
   printed index does, and it makes the space deliberate. */
.svc-row::after{
  content:""; grid-column:3; align-self:center;
  height:1px; background:var(--hairline);
  transition:background-color .3s var(--ease-out);
}
.svc-go{
  grid-column:4; align-self:center; flex:none;
  width:18px; height:18px; stroke:var(--field-border);
  transition:transform .4s var(--ease-spring), stroke .25s var(--ease-out);
}
/* The hover nudge is carried by the arrow sliding and the colour shift below.
   It used to animate padding-inline as well, which relaid out the row on every
   hover for no visual gain worth a layout pass. */
.svc-row:hover .svc-name{ color:var(--green-700); }
.svc-row:hover::after{ background:var(--cyan); }
.svc-row:hover .svc-go{ transform:translateX(8px); stroke:var(--green-700); }

/* ---- the organisation behind the words ------------------------
   Address, opening hours and the two departments, straight off the
   agency's printed presentation folder. This block used to close the
   service-charter section; when that section was deleted it moved into
   the story, because the opening hours appear nowhere else on the page.
   Renamed from .charter-facts so nobody deletes it as charter leftovers. */
.agency-facts{
  margin:clamp(44px,5.5vw,84px) 0 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  /* Rules top and bottom: a closed register, the way a document prints its
     particulars. Without the lower rule the section trailed off into the dark. */
  border-block:1px solid rgba(255,255,255,.14);
}
.agency-facts > div{
  padding:clamp(20px,2.2vw,30px) clamp(14px,1.6vw,26px) clamp(20px,2.2vw,30px) 0;
  border-inline-start:1px solid rgba(255,255,255,.09);
}
.agency-facts > div:first-child{ border-inline-start:0; }
.agency-facts > div:not(:first-child){ padding-inline-start:clamp(14px,1.6vw,26px); }
.agency-facts dt{
  font-size:10.5px; font-weight:800; letter-spacing:.16em; color:var(--cyan-soft);
  margin-bottom:9px;
}
.agency-facts dd{
  margin:0; font-size:14px; line-height:1.7; color:var(--on-navy-soft);
  font-variant-numeric:tabular-nums;
}
.agency-facts a{
  display:inline-flex; align-items:center; min-height:32px;
  color:#fff; font-weight:700;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(255,255,255,.24);
  transition:color .2s var(--ease-out), text-decoration-color .2s var(--ease-out);
  overflow-wrap:anywhere;
}
.agency-facts a:hover{ color:var(--cyan-soft); text-decoration-color:var(--cyan-soft); }

/* -----------------------------------------------------------
   THE STORY — the one dark chapter, and the one place the
   writing is allowed to breathe.
----------------------------------------------------------- */
.story{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-950); color:#fff;
  padding-block:clamp(76px,10vw,168px);
  /* The white hairline that used to sit on this edge was calibrated for the
     charter section that no longer precedes it; over the ivory chapter above
     it read as exactly the pasted-rectangle line the owner rejected. The edge
     is now the dissolve below. */
}
/* The mirror of the hero's move: the hero melts its dark plate into the paper,
   and here the paper melts back into the dark chapter. Eased stops for the
   same reason as .hero::after — a linear ivory-to-navy ramp spends its middle
   as a muddy grey band, so the mixing zone is kept short while the edge stays
   soft. Height stays under .story's own top padding (min 76px), so it never
   touches the motto. z-index:0 keeps it above the ::before glow (z:-1). */
.story::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset-inline:0; top:0; height:clamp(64px,8vw,150px);
  background:linear-gradient(to bottom,
    var(--bg)               0%,
    rgba(244,238,226,.55)  30%,
    rgba(244,238,226,.18)  62%,
    rgba(244,238,226,0)   100%);
}
/* The agency prints its folder and its banner on a deep navy that runs to a
   bright cyan on one side. This is that gradient, held right down so it reads
   as light on a wall rather than as a decorative gradient: it is the same
   move the hero makes, which ties the two dark chapters together. */
.story::before{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  inset-block:-30% -10%; inset-inline-start:-22%;
  width:min(1100px,90vw); aspect-ratio:1;
  background:radial-gradient(circle at center,
    rgba(40,182,214,.22) 0%, rgba(40,182,214,.07) 42%, rgba(40,182,214,0) 70%);
}
/* Motto on the reading edge, the agency's own account of itself alongside.
   Stacked, the body copy sat in a 58ch column hard against the right and left
   two thirds of the chapter as empty navy — which reads as unfinished, not as
   restraint. Side by side, both halves carry weight. */
@media (min-width:900px){
  .story-head{
    display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    column-gap:clamp(40px,5.5vw,86px); align-items:start;
  }
  .story-head .story-body{ margin-top:0; margin-inline-start:0; max-width:none; }
  .story-head .story-lede p{ max-width:13ch; }
}
.story-lede p{
  margin:0; max-width:21ch;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(23px,1.2rem + 1.85vw,50px); line-height:1.26; letter-spacing:-.024em;
  color:#fff;
}
/* Scrubbed reading: the words come up to full strength as the paragraph
   travels through the middle of the screen. The floor is 0.45, which is
   still 4.6:1 white-on-navy — the reveal never dips below AA, and the
   fallback of 2 means an unscrubbed block is simply fully lit. */
.js .story-lede [data-words] > span{
  opacity:calc((var(--wp,2) - var(--wi,0)) * 3.2 + .45);
  transition:opacity .16s linear;
}
.story-body{
  margin-top:clamp(30px,3.6vw,54px);
  max-width:58ch; margin-inline-start:auto;
}
.story-body p{
  color:var(--on-navy-soft); max-width:none;
  font-size:clamp(16px,1rem + .35vw,19.5px); line-height:1.85;
}
.story-body p + p{ margin-top:0; padding-top:1.1em; }

/* ---- the owner's four points -------------------------------------
   His printed folder text, verbatim (2026-08-21: "צריך להיות בדיוק כך"),
   set as four distinct points on the hairline register the rest of the
   page already speaks. The first point — who the agency is, since 1977 —
   leads in full ink; the other three carry the soft on-navy voice. This
   replaced the three .story-promises cards, which paraphrased the same
   text and therefore said everything twice. */
.story-points{
  list-style:none; margin:0; padding:0;
  border-top:1px solid rgba(255,255,255,.14);
}
.story-points li{
  padding-block:clamp(18px,2.2vw,28px);
  border-bottom:1px solid rgba(255,255,255,.14);
  color:var(--on-navy-soft); max-width:none;
  font-size:clamp(16px,1rem + .35vw,19.5px); line-height:1.85;
}
.story-points li:first-child{ color:#fff; }

/* -----------------------------------------------------------
   THE CHARTER — charter.html.

   A published document, not a web page with legal text dropped on
   it. The whole design is three decisions:

     1 A single reading column at a 62–66 character measure, which
       is what a document is for. No two-column layout, no cards.
     2 A hanging numeral in the display face on the reading edge,
       with the clause text indented past it, so the numbers form
       their own quiet column down the page — the way a printed
       statute or a charter sets its sections.
     3 Hairlines between clauses instead of boxes, and one deep
       teal for the numerals so the document has an ink colour of
       its own without shouting.

   The text is the agency's official wording, verbatim except for
   punctuation. The one deliberate departure is the phone number:
   the source document has a typo. See the note in the markup.
----------------------------------------------------------- */
.doc-back{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; margin-inline-start:auto; padding-inline:2px;
  font-size:14px; font-weight:700; color:var(--on-void-soft);
  transition:color .25s var(--ease-out), gap .25s var(--ease-out);
}
.doc-back svg{ width:14px; height:14px; }
.doc-back:hover{ color:#fff; gap:14px; }
[data-header="light"] .doc-back{ color:var(--muted); }
[data-header="light"] .doc-back:hover{ color:var(--navy-900); }

/* The masthead sets the document's column; the header above it lines up with
   the same edge so the page reads as one object rather than chrome plus text. */
.doc-header .wrap{ max-width:880px; }

.doc-mast{
  background:var(--bg);
  /* the header floats over the page now, so the masthead clears it itself */
  padding-block:calc(var(--lp-header-h) + clamp(34px,4.5vw,74px)) clamp(30px,3.4vw,52px);
  border-bottom:2px solid var(--navy-900);
}
.doc-pub{
  margin:0 0 clamp(14px,1.8vw,22px); max-width:none;
  font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--muted);
}
.doc-mast h1{
  max-width:16ch;
  font-size:clamp(32px,1.6rem + 2.6vw,60px); line-height:1.02; letter-spacing:-.034em;
}
.doc-licence{
  margin:clamp(14px,1.8vw,22px) 0 0; max-width:none;
  font-size:15px; color:var(--muted); font-variant-numeric:tabular-nums;
}

.doc-body{ background:var(--paper); padding-block:clamp(40px,5vw,80px) clamp(56px,7vw,110px); }
/* The title block and the text below it share ONE column edge. A centred body
   under a full-width title reads as two documents stacked. */
.doc-wrap{ max-width:880px; margin-inline:auto; }

.doc-lede p{
  max-width:64ch;
  font-size:clamp(16.5px,1rem + .38vw,19px); line-height:1.85; color:var(--ink);
}
.doc-lede p + p{ margin-top:0; padding-top:1.1em; }

.doc-h2{
  margin:clamp(40px,5vw,72px) 0 clamp(14px,1.6vw,22px);
  padding-bottom:10px; border-bottom:1px solid var(--field-border);
  font-family:var(--font-body);
  font-size:12px; font-weight:800; letter-spacing:.16em; color:var(--muted);
}

/* The numbers are content, not decoration: clause 10 refers back to "סעיף 9
   לעיל", so they have to be visible and countable. A CSS counter keeps the
   markup a plain <ol>, which is also what a screen reader wants. */
.doc-clauses{ counter-reset:clause; margin:0; padding:0; list-style:none; }
.doc-clause{
  counter-increment:clause;
  display:grid; grid-template-columns:clamp(38px,4vw,54px) minmax(0,1fr);
  gap:0 clamp(14px,1.8vw,26px);
  padding-block:clamp(18px,2.2vw,28px);
  border-bottom:1px solid var(--border);
}
.doc-clause::before{
  content:counter(clause);
  grid-column:1; grid-row:1 / -1;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(20px,1.05rem + .7vw,28px); line-height:1.25;
  letter-spacing:-.02em; color:var(--green-700);
  font-variant-numeric:tabular-nums;
}
.doc-clause > *{ grid-column:2; }
.doc-clause p{
  margin:0; max-width:62ch;
  font-size:16.5px; line-height:1.82; color:var(--ink);
}
.doc-clause p + p,
.doc-clause p + dl,
.doc-clause p + ul{ margin-top:1em; }

/* A definition inside a clause — quieter than the clause itself, so the
   reader can tell the difference between an obligation and a gloss on it. */
.doc-note{ color:var(--muted); font-size:15.5px!important; }

.doc-sub{
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--hairline);
}
.doc-sub li{
  padding:9px 0 9px clamp(0px,1vw,10px);
  border-bottom:1px solid var(--hairline);
  font-size:15.5px; line-height:1.65; color:var(--muted);
}
/* A leading rule instead of a bullet: a bullet in the middle of a legal
   document reads as a marketing list. */
.doc-sub li::before{
  content:""; display:inline-block; vertical-align:middle;
  width:14px; height:1px; margin-inline-end:12px; background:var(--field-border);
}

/* Office address, hours and phone — the facts a charter has to publish.
   A label/value pair on hairlines, which is how a document prints them. */
.doc-details{ margin:0; }
.doc-details > div{
  display:grid; grid-template-columns:minmax(0,12rem) minmax(0,1fr);
  gap:2px clamp(14px,2vw,28px);
  padding-block:11px; border-top:1px solid var(--hairline);
}
.doc-details > div:last-child{ border-bottom:1px solid var(--hairline); }
.doc-details dt{
  font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--quiet);
  padding-top:3px;
}
.doc-details dd{ margin:0; font-size:16px; line-height:1.7; color:var(--ink); }
.doc-details a{
  color:var(--green-700); font-weight:700;
  text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(14,92,112,.35);
  transition:text-decoration-color .2s var(--ease-out), color .2s var(--ease-out);
}
.doc-details a:hover{ color:var(--navy-900); text-decoration-color:var(--navy-900); }

.doc-contact .doc-details > div{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); }

@media (max-width:640px){
  .doc-clause{ grid-template-columns:clamp(30px,8vw,40px) minmax(0,1fr); }
  .doc-details > div,
  .doc-contact .doc-details > div{ grid-template-columns:1fr; }
  /* A tel: or mailto: link in a definition list is a tap target, so it needs
     the full 44px even though it sits inside running text. */
  .doc-details a{ display:inline-flex; align-items:center; min-height:44px; }
}

@media print{
  .doc-back{ display:none!important; }
  .doc-mast,.doc-body{ background:#fff!important; }
  .doc-clause{ break-inside:avoid; }
}

/* -----------------------------------------------------------
   FOOTER — the agency details, small.
   The owner asked for "a small, small section with small text
   that has links", so this is one typographic block: name,
   address, four contact links, the emergency numbers, then the
   legal row. The service charter is one of those small links
   now, not two placeholder blocks the size of a section.
----------------------------------------------------------- */
footer{
  /* Continues the story's navy and settles into the deeper void over the first
     200px, so the two dark planes read as one room getting darker rather than
     two rectangles. Same blend round as the hero dissolve (2026-08-21). */
  background:linear-gradient(to bottom, var(--navy-950), var(--void) 200px);
  color:var(--on-void-soft);
  padding-block:clamp(38px,4.6vw,62px) clamp(26px,3vw,38px);
}
.foot{ display:flex; flex-direction:column; }
.foot-name{ margin:0; max-width:none; font-size:14px; font-weight:700; color:#fff; letter-spacing:-.005em; }
/* The agency's own strapline, off its printed folder. */
.foot-strap{ margin:3px 0 0; max-width:none; font-size:13px; font-weight:700;
  letter-spacing:.02em; color:var(--cyan-soft); }
.foot-addr{ margin:7px 0 0; max-width:none; font-size:13.5px; }

/* The two departments. Printing them separately, each with its own extension
   and inbox, is the detail that says "an agency with departments" rather than
   "one phone number" — and the agency's own folder prints them this way. */
.foot-branches{
  display:grid; grid-template-columns:repeat(2,minmax(0,max-content));
  gap:4px clamp(28px,4vw,64px);
  margin-top:clamp(14px,1.6vw,20px); padding-top:12px;
  border-top:1px solid rgba(255,255,255,.09);
}
.foot-branches li{ display:flex; flex-direction:column; align-items:flex-start; }
.foot-branch-name{
  font-size:10.5px; font-weight:800; letter-spacing:.16em; color:var(--cyan-soft);
  padding-bottom:2px;
}
.foot-branches a{
  /* 44px, not the 38px this started at: these are the two numbers a visitor
     actually dials, and a 38px target failed the tap-size check on a phone. */
  display:inline-flex; align-items:center; min-height:44px;
  font-size:13.5px; color:#fff; font-variant-numeric:tabular-nums;
  transition:color .2s var(--ease-out);
}
.foot-branches a + a{ font-weight:400; color:var(--on-void-soft); }
.foot-branches a:hover{ color:var(--cyan-soft); }

/* The heading the owner asked for over the contact details (2026-08-21).
   Wording is a placeholder until he confirms — see the TODO in the markup. */
.foot-contact-h{
  margin:clamp(18px,2.2vw,28px) 0 0; max-width:none;
  font-family:var(--font-display); font-weight:800;
  font-size:15.5px; letter-spacing:-.01em; color:#fff;
}

/* Social icons — the owner asked for the recognisable marks instead of words
   (2026-08-21). Monochrome stroke glyphs on the footer's own hairline
   language: one radius, 44px targets, quiet at rest.
   .foot-social-soon is Facebook / LinkedIn waiting for their real URLs:
   muted and inert until the owner supplies them (see the markup TODO). */
.foot-social{ display:flex; gap:10px; margin-top:10px; padding:0; list-style:none; }
.foot-social a,
.foot-social-soon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  border:1px solid rgba(255,255,255,.18); color:#fff;
  transition:color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.foot-social svg{ width:20px; height:20px; fill:currentColor; }
.foot-social a:hover{ color:var(--cyan-soft); border-color:rgba(255,255,255,.44); }
.foot-social-soon{ opacity:.34; }

/* Google Preferred Sources button, added 2026-08-27 — sits on the same dark
   footer ground as .foot-social above it, so it gets the same muted-label
   treatment the branch phone numbers use (var(--on-void-soft)) rather than
   full white, and enough top margin to read as its own row, not an
   afterthought stuck to the social icons. The button itself is Google's own
   rendered widget (news.google.com/swg/js) — no further styling needed or
   possible from here. */
.foot-pref-label{ margin-top:18px; margin-bottom:8px; font-size:13px; color:var(--on-void-soft); }
[google-add-preferred-source-btn]{ margin-top:2px; }

.foot-legal{
  display:flex; flex-wrap:wrap; gap:0 22px;
  margin-top:clamp(16px,2vw,26px); padding-top:4px;
  border-top:1px solid rgba(255,255,255,.09);
}
.foot-legal a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:12.5px; color:var(--on-void-soft);
  text-decoration:underline; text-underline-offset:4px;
  transition:color .2s var(--ease-out);
}
.foot-legal a:hover{ color:#fff; }
.foot-rights{ margin:2px 0 0; max-width:none; font-size:12px; line-height:1.6; color:var(--on-void-soft); }

/* The footer had every line hugging the reading edge, which left the other
   half of a 1180px column empty and made it read as an offcut. Two columns:
   the agency's details on the reading edge, the legal pages opposite. */
@media (min-width:900px){
  .foot{
    display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
    column-gap:clamp(40px,6vw,96px); align-items:start;
  }
  .foot-details{ grid-column:1; grid-row:1; }
  .foot-legal{
    grid-column:2; grid-row:1;
    flex-direction:column; align-items:flex-start; gap:0;
    margin-top:0; padding-top:0; border-top:0;
  }
  .foot-legal a{ min-height:34px; font-size:13px; }
  .foot-rights{ grid-column:1 / -1; grid-row:2; margin-top:clamp(18px,2.2vw,30px);
    padding-top:14px; border-top:1px solid rgba(255,255,255,.09); }
}

/* -----------------------------------------------------------
   FLOATS AND THE CALL BAR
   The owner's instruction: nothing to press in the opening
   viewport. Conversion is not lost, it moves lower — the bubble
   and the phone bar are revealed the moment the hero is behind
   you. The accessibility button is exempt: it is a legal
   affordance, not a conversion device, and it stays reachable.
   With JavaScript off, all three are simply visible.
----------------------------------------------------------- */
.wa-float{
  position:fixed; z-index:70;
  inset-block-end:calc(24px + var(--consent-height)); inset-inline-start:24px;
  width:58px; height:58px; border-radius:var(--r-pill);
  background:#128C4B; color:#fff; display:none; place-items:center;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease-spring), opacity .4s var(--ease-out),
             visibility .4s, background-color .18s var(--ease-out);
}
.wa-float:hover{ transform:scale(1.07); background:#0F7A41; }
.wa-float svg{ width:30px; height:30px; }
@media (min-width:821px){ .wa-float{ display:grid; } }

.access-float{
  position:fixed; z-index:70;
  inset-block-end:calc(24px + var(--consent-height)); inset-inline-end:24px;
  width:48px; height:48px; border-radius:var(--r-pill);
  background:var(--navy-900); color:#fff; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.24);
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
  transition:transform .25s var(--ease-spring), background-color .18s var(--ease-out);
}
.access-float:hover{ transform:scale(1.07); background:var(--navy-700); }
.access-float svg{ width:24px; height:24px; }

.js:not(.past-hero) .wa-float{
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.86); pointer-events:none;
}
.js:not(.past-hero) .sticky-cta{
  opacity:0; visibility:hidden; transform:translateY(110%); pointer-events:none;
}

/* -----------------------------------------------------------
   MOTION SYSTEM
   Every start-state below is scoped to html.js, which js/motion.js
   adds. With JavaScript off nothing is hidden and nothing moves.
----------------------------------------------------------- */
.js [data-scene]{
  opacity:0; transform:translate3d(0,32px,0);
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-soft);
}
.js [data-scene].in{ opacity:1; transform:none; }

/* A heading split on its own <br>: each line rises out from behind the
   line above it. The padding/negative-margin pair is load-bearing —
   Hebrew descenders (ק ן ך ף ץ) sit below the baseline and a bare
   overflow:hidden shears them off. */
.js [data-split] .ln{ display:block; overflow:hidden; padding-bottom:.16em; margin-bottom:-.16em; }
.js [data-split] .ln > span{
  display:inline-block; transform:translate3d(0,108%,0);
  transition:transform 1s var(--ease-soft);
}
.js [data-scene].in [data-split] .ln > span{ transform:none; }
.js [data-scene].in [data-split] .ln:nth-child(2) > span{ transition-delay:.11s; }
.js [data-scene].in [data-split] .ln:nth-child(3) > span{ transition-delay:.22s; }

.js [data-stagger] > *{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .7s var(--ease-out), transform .85s var(--ease-soft);
  transition-delay:calc(var(--i,0) * 70ms);
}
.js [data-stagger].in > *{ opacity:1; transform:none; }

/* The purchase grid is one plate, so it arrives as one plate — tipped
   away from the reader and settling flat, rather than four cards fanning. */
.js [data-plate]{
  opacity:0; transform:perspective(1500px) rotateX(9deg) translate3d(0,52px,-130px);
  transform-origin:50% 0%;
  transition:opacity .9s var(--ease-out), transform 1.25s var(--ease-soft);
}
.js [data-plate].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .hero-eyebrow,
  .js .hero-rule,
  .js .hero-act,
  .js .hero-plate img,
  .js .hero h1 .ln > span,
  .js [data-scene],
  .js [data-scene].in [data-split] .ln > span,
  .js [data-split] .ln > span,
  .js [data-stagger] > *,
  .js [data-plate]{
    opacity:1!important; transform:none!important; filter:none!important; animation:none!important;
  }
  .js .story-lede [data-words] > span{ opacity:1!important; }
  .hero-inner{ transform:none!important; opacity:1!important; }
  /* the plate's scroll parallax is a plain transform, not an animation, so it
     has to be switched off by name rather than by animation:none */
  .hero-plate{ transform:none!important; }
  /* Stopping the marquee outright would leave three of the four sets parked
     off-screen. Turn it into a static wrapped row instead. The band keeps
     its top padding — the floating header pill still needs its ground — and
     since the band is in normal flow now, a taller wrapped strip simply
     scrolls away like everything else. */
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee-track{ animation:none; width:100%; }
  /* width:100% is load-bearing: the set's natural width is max-content, and
     a flex child that wide never wraps — it just clips at the frame, which
     showed a reduced-motion visitor five insurers out of eleven. Pinning the
     set to the frame's width is what lets flex-wrap actually wrap. */
  .marquee-set{ width:100%; flex-wrap:wrap; justify-content:center; row-gap:16px; }
  .marquee-set[aria-hidden="true"]{ display:none; }
  .wa-float,.access-float,.btn,.buy-card,.svc-row{ transition:none; }
  .pill{ transition:none; }
}

/* -----------------------------------------------------------
   RESPONSIVE
----------------------------------------------------------- */
@media (max-width:1080px){
  .buy-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .agency-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .agency-facts > div:nth-child(odd){ border-inline-start:0; padding-inline-start:0; }
  .agency-facts > div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.09); }
  /* One column: the chapter heading sits above its own register rather than
     beside it, and stops sticking — a sticky heading in a single-column stack
     would ride down over its own list. */
  .cat-wrap{ grid-template-columns:1fr; gap:var(--s-5); }
  .cat-head{ position:static; }
  .cat-head h2{ max-width:20ch; }
  .cat-deck{ max-width:56ch; }
}

@media (max-width:760px){
    /* No room for name and qualifier side by side; the qualifier goes back
     under the name and the arrow spans both rows. */
  .svc-row{ grid-template-columns:minmax(0,1fr) auto; align-items:center; row-gap:2px; }
  .svc-name{ grid-column:1; }
  .svc-sub{ grid-column:1; }
  .svc-row::after{ display:none; }
  .svc-go{ grid-column:2; grid-row:1 / -1; }
}

@media (max-width:900px){
  .story-body{ margin-inline-start:0; }
}

@media (max-width:820px){
  :root{ --lp-header-h:70px; }
  .lp-header{ --pill-gap:10px; }
  /* Below this the pill has no slack left to hug its contents, so it takes
     the full column instead and pushes the two ends apart. Same object, sized
     for the screen rather than shrunk until the phone number is unreadable. */
  .pill{ width:auto; justify-content:space-between; padding:7px 8px 7px 12px; }
  .brand-tile{ width:38px; height:38px; border-radius:10px; }
  .brand-tile img{ height:26px; }
  .lp-header .brand-text strong{ font-size:18px; }
  .pill-tel{ padding:0 13px; gap:7px; }

  body{ padding-bottom:calc(74px + var(--consent-height)); }
  .sticky-cta{
    position:fixed; z-index:90;
    inset-inline:0; bottom:var(--consent-height);
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,12,26,.96);
    backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.18);
    transition:transform .5s var(--ease-spring), opacity .4s var(--ease-out), visibility .4s;
  }
  .sticky-cta .btn{ width:100%; min-height:52px; font-size:15.5px; padding-inline:12px; }
  .access-float{ inset-block-end:calc(82px + var(--consent-height)); width:44px; height:44px; }
  .access-float svg{ width:22px; height:22px; }
}

@media (max-width:640px){
  /* Four cramped squares on a 375px screen is worse than four clear rows.
     Same four links, same order, laid out as a list. */
  .buy-grid{ grid-template-columns:1fr; }
  .buy-card{
    min-height:0; display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center; column-gap:16px; row-gap:0;
    padding:16px;
  }
  .buy-card-logo{
    grid-column:1; min-height:0; width:76px; justify-content:center;
    margin-bottom:0; border-bottom:0;
  }
  .buy-card-logo img{ max-width:76px; max-height:26px; }
  .buy-card-body{ grid-column:2; gap:2px; }
  .buy-card-sub{ font-size:12.5px; line-height:1.4; }
  .buy-card-go{ grid-column:3; margin-top:0; padding-top:0; font-size:0; gap:0; }
  .buy-card-go svg{ width:17px; height:17px; }
  .buy-card::after{ display:none; }

  .foot-legal{ gap:0 16px; }
}

@media (max-width:560px){
  :root{ --gutter:20px; }
  .hero-eyebrow{ font-size:11.5px; letter-spacing:.14em; }
  /* "למשרד" is a courtesy on a wide screen and an obstacle on a narrow one:
     the number itself is the label. */
  .pill-tel-lbl{ display:none; }
  .pill-tel-num{ font-size:15px; }
  .hero-line{ max-width:none; }
  .story-lede p{ max-width:none; }
  .agency-facts{ grid-template-columns:1fr; }
  .agency-facts > div{ border-inline-start:0!important; padding-inline-start:0!important; }
  .agency-facts > div:not(:first-child){ border-top:1px solid rgba(255,255,255,.09); }
  .agency-facts a{ min-height:44px; }
}

/* (the rule that hid the brand qualifier below 380px is gone — the owner's
   instruction is that the full name reads at every width; see the brand-name
   block at the end of this file) */

/* ---- the header pill now carries THREE things, not two -------------
   WhatsApp moved into the header on 2026-08-21. Measured across fourteen
   widths (scripts/_pillfit-tmp.mjs), the wordmark plus a phone number plus a
   WhatsApp control overflowed the pill's own box below about 400px and pushed
   the WhatsApp button clean off the left edge of a 360px screen. Two fixes,
   in order of how much they cost:

   1. Tighten the spacing. Nothing here is a tap target, so 4px off a gap and
      2px off the logo tile buys 26px for free.
   2. Below 375px, drop the wordmark. The mark is still there and the link
      still announces "כרמלית טופ — סוכנות לביטוח" to a screen reader; on a
      screen that small, two working ways to reach a human beat a name the
      visitor can already read off the symbol. */
@media (max-width:540px){
  .pill{ gap:10px; }
  .lp-header .brand{ gap:10px; }
  .brand-tile{ width:36px; height:36px; }
  .brand-tile img{ height:24px; }
  .pill-tel{ padding:0 11px; gap:6px; }
  .pill-wa{ padding:0 11px; }
}

/* Print: the page is a document, so let it print as one. */
@media print{
  .wa-float,.access-float,.sticky-cta,.lp-header{ display:none!important; }
  .hero,.story,footer{ background:#fff!important; color:#000!important; }
  .hero h1,.story-lede p,.story-points li:first-child{ color:#000!important; }
  .hero-plate,.hero-scrim,.marquee{ display:none!important; }
  .story-body p,.story-points li,.foot-rights{ color:#333!important; }
}

/* ---- the full agency name in the header pill --------------------
   The owner asked for "כרמלית טופ — סוכנות לביטוח" to be READABLE AT EVERY
   WIDTH — the earlier rule that hid the qualifier below 520px showed half a
   name on every phone, which is exactly what he objected to.

   Wide screens: one line, qualifier set lighter so hierarchy survives
   without a break. Below 520px: the separator drops and the qualifier
   becomes a second, smaller line under the name — the pill grows a few
   pixels taller instead of amputating the name. The phone and WhatsApp
   controls stay present and >=44px at every width; below 520px the phone
   control's icon goes (the digits are their own label), and below 350px the
   digits hand over to a 46px icon target — the number is still announced by
   the link's accessible name, and printed in the sticky call bar and the
   footer. Verified by measurement at 320 / 360 / 390 / 430. */
.brand-text strong .brand-name{
  /* display !important: the multi-page rule at max-width:560px hides every
     `.brand-text span` for the OTHER pages' header; this span is the landing
     page's name itself and may never be hidden. */
  display:inline !important;
  font-size:inherit; font-weight:inherit; letter-spacing:inherit; color:inherit;
}
.brand-text strong .brand-sep,
.brand-text strong .brand-sub{ display:inline !important; }
.brand-text strong .brand-sep{ opacity:.5; font-weight:500; }
.brand-text strong .brand-sub{ font-weight:500; opacity:.82; letter-spacing:0; }
@media (max-width:520px){
  .lp-header .brand-text strong{ display:flex; flex-direction:column; line-height:1.14; }
  .brand-text strong .brand-sep{ display:none !important; }
  .brand-text strong .brand-name{ font-size:15.5px; letter-spacing:-.015em; }
  .brand-text strong .brand-sub{ font-size:11px; letter-spacing:.08em; }
  .lp-header .brand{ gap:8px; }
  .pill{ gap:8px; }
  /* the digits are the label; the icon's 22px buys the name its second line */
  .pill-tel svg{ display:none; }
  .pill-tel{ padding:0 11px; gap:0; }
  .pill-tel-num{ font-size:14.5px; }
  .pill-wa{ padding:0 12px; min-width:46px; }
}
@media (max-width:349px){
  .pill-tel svg{ display:block; }
  .pill-tel-num{ display:none; }
  .pill-tel{ padding:0 12px; min-width:46px; justify-content:center; }
}

/* =====================================================================
   PHONE FIXES — owner report, 2026-08-22 ("something is wrong on the web")

   1 · THE PILL'S GUTTER. On desktop the floating pill works because the
       page is wide and the text slides under it at a distance. On a phone
       the pill nearly fills the width, so headlines and paragraphs surface
       IN the transparent gutter around its corners at full contrast — it
       reads as broken, not as glass. Fix: on phones the header becomes a
       full-width band with a solid theme-matched ground behind the pill,
       so nothing ever shows around it. The pill keeps its radius and its
       theme flip; only the see-through gutter is gone.

   2 · THE DOUBLE BOTTOM BAR. The sticky call bar stacked on top of the
       cookie banner ate almost half the screen. While the consent banner
       is open, the call bar stands down — every number on it is also in
       the header and one decision at a time is enough. It returns the
       moment the banner is answered. :has() is supported by every browser
       this site supports; if it ever isn't, the cost is the old stacking,
       not a breakage.
   ===================================================================== */
@media (max-width:700px){
  .lp-header{
    padding-block:8px;
    background:rgba(245,242,236,.96);
    border-bottom:1px solid var(--border);
    backdrop-filter:blur(12px) saturate(1.2);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    transition:background-color .5s var(--ease-soft), border-color .5s var(--ease-soft);
  }
  [data-header="dark"] .lp-header{
    background:rgba(9,14,26,.94);
    border-bottom-color:rgba(255,255,255,.14);
  }
  .pill{ width:100%; }

  /* display:none, not a transform: the bar is anchored above the banner via
     bottom:var(--consent-height), so a own-height translate cannot clear the
     screen. Gone is gone. */
  :root:has(.cc-banner.cc-in) .sticky-cta{ display:none; }
  :root:has(.cc-banner.cc-in) body{ padding-bottom:var(--consent-height); }
}


/* Phone strip spacing — owner report 2026-08-22: "logos on the upper part,
   uneven". With the solid header band (above) the strip needs to clear the
   band's real bottom edge, and the logos need equal air below them so the
   row reads centered in its own band, not pinned under the header. */
@media (max-width:700px){
  main > section + section.proof,
  .proof{
    padding-block-start:calc(var(--lp-header-h) + 18px);
    padding-block-end:18px;
  }
}


/* =====================================================================
   OWNER ROUND 2026-08-22 (late): "the blue one at the end — bigger, more
   visible, defined to the eye" and "the title, PC only".

   FOOTER: one more step up in size, and — the part that actually answers
   "more visible" — brighter ink and firmer edges. The soft tint stays for
   the small print, but the working text (addresses, phones, emails, link
   columns) moves to near-white, the column headings brighten and their
   underline strengthens, so the block reads as structure, not haze.
   ===================================================================== */
footer{ color:#D9E1F2; }
.footer-about{ font-size:17px; color:#E4EAF6; }
.footer-col li{ font-size:17px; }
.footer-col a{ color:#E4EAF6; }
.footer-col h2{
  font-size:15px; color:#FFFFFF;
  border-bottom:2px solid var(--on-navy-line-strong);
}
.footer-brand strong{ font-size:22px; }
.footer-bottom{ font-size:15px; color:#C7D1E6; }
.footer-bottom a{ color:#E4EAF6; }

/* THE HEADER SUBTITLE — bigger on the computer only, per his ask. The
   phone keeps 12.5px (set above); wide screens get a clearly readable
   line under the name. */
@media (min-width:861px){
  .lp-header .brand-text span{ font-size:14.5px; letter-spacing:.11em; }
  .lp-header .brand-text strong{ font-size:21px; }
}


/* =====================================================================
   OWNER ROUND 2026-08-22 (later): the LANDING footer — this is the "blue
   one at the end" he pointed at; the earlier bump touched the multi-page
   footer, not this one. Bigger, brighter, and defined: working text a
   full step up, near-white ink instead of soft tint, and firmer rules so
   the block has edges the eye can hold.
   ===================================================================== */
.foot-name{ font-size:18px; }
.foot-strap{ font-size:16px; }
.foot-addr{ font-size:16px; color:#DDE4F3; }
.foot-contact-h{ font-size:19px; }
.foot-branch-name{ font-size:13px; letter-spacing:.14em; }
.foot-branches a{ font-size:16px; }
.foot-branches a + a{ color:#C9D3E8; }
.foot-branches{ border-top:1px solid rgba(255,255,255,.22); }
.foot-legal{ border-top:1px solid rgba(255,255,255,.22); }
.foot-legal a{ font-size:14.5px; color:#C9D3E8; }
.foot-rights{ font-size:13.5px; color:#B9C4DC; }
.foot-social a{ border-color:rgba(255,255,255,.34); }

/* PC only, per his ask: the header title lockup one more step. */
@media (min-width:861px){
  .foot-name{ font-size:20px; }
  .foot-contact-h{ font-size:21px; }
}

/* OWNER, 2026-08-22 (third round on the title): "the text isn't bigger."
   He was right — the previous rule moved strong 19.5 -> 21px (invisible) and
   sized a span this header does not have. The landing lockup is the STRONG:
   "כרמלית טופ — סוכנות לביטוח" on one line. On a computer it now steps from
   19.5 to 24px, the qualifier keeps its lighter weight but loses the fade,
   and the logo tile grows with it so the lockup stays one object. */
@media (min-width:861px){
  .lp-header .brand-text strong{ font-size:24px; }
  .brand-text strong .brand-sub{ opacity:.94; }
  .lp-header .brand-tile{ width:48px; height:48px; }
  .lp-header .brand-tile img{ height:32px; }
  /* The phone number is the one action the pill exists for — on a computer
     it now matches the title's presence: 15.5 -> 19px at weight 900, and
     the "למשרד" label steps up with it so the pair keeps its rhythm. */
  .pill-tel-num{ font-size:19px; font-weight:900; }
  .pill-tel-lbl{ font-size:12.5px; }
}


/* OWNER 2026-08-22, evening: "excellent, just a little בלאגן". The footer's
   opening block had four different vertical gaps doing three jobs. One
   rhythm: the strapline sits tight under the name (they are one thought),
   the address stands off by a full step, and each block below opens with
   the same amount of air, so the column reads top-to-bottom as
   name -> address -> contact -> departments -> social -> legal. */
.foot-strap{ margin-top:4px; }
.foot-addr{ margin-top:14px; }
.foot-contact-h{ margin-top:clamp(24px,3vw,36px); }
.foot-branches{ margin-top:14px; padding-top:16px; }
.foot-social{ margin-top:18px; }
.foot-legal{ margin-top:clamp(24px,3vw,36px); }

/* Reserved for שעות פעילות — the owner is sending the real hours; the rule
   waits so adding them is a markup-only change. NEVER invent hours. */
.foot-hours{ margin:14px 0 0; max-width:none; font-size:16px; color:#DDE4F3; }
.foot-hours strong{ color:#fff; font-weight:700; }

/* OWNER 2026-08-22: the new lockup he supplied. In the footer, his layout —
   the logo on the right, the text to its left (first flex child = right edge
   in RTL). The lockup's navy text would vanish on the navy ground, so it
   sits on a white card, same language as the header tile. */
.foot-brandrow{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); }
.foot-logo{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:clamp(96px,10vw,132px); aspect-ratio:1/1;
  background:#fff; border-radius:14px; padding:8px;
}
.foot-logo img{ width:100%; height:auto; }
.foot-brandtext{ min-width:0; }
@media (max-width:520px){
  .foot-brandrow{ align-items:flex-start; }
  .foot-logo{ width:84px; }
}

/* OWNER 2026-08-22: the header lockup stacks at every width — the name on
   top, סוכנות לביטוח under it, and the dash separator is gone ("no need for
   the line"). The phone already stacked below 520px; now it is one layout
   everywhere, with the logo tile holding the right edge (RTL first child). */
.lp-header .brand-text strong{ display:flex; flex-direction:column; line-height:1.12; }
.brand-text strong .brand-sep{ display:none !important; }
.brand-text strong .brand-sub{
  font-size:12.5px; font-weight:600; letter-spacing:.06em; opacity:.94;
}
@media (min-width:861px){
  .brand-text strong .brand-sub{ font-size:14px; }
}

/* OWNER 2026-08-22: "organize the bottom one". The legal links floated as a
   bare list in the left column while the right column had headed, ruled
   blocks. Same grammar on both sides now: a heading with the contact
   heading's voice, the same hairline under it, and an even link rhythm. */
.foot-legal-h{
  margin:0 0 4px; max-width:none; width:100%;
  font-family:var(--font-display); font-weight:800;
  font-size:17px; letter-spacing:-.01em; color:#fff;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.22);
}
.foot-legal{ row-gap:2px; }
.foot-legal a{ min-height:38px; }
@media (min-width:900px){
  /* align the two columns' first baselines: the heading tops the column the
     way the brand row tops the details column, and the whole block stops
     reading as an offcut. */
  .foot-legal{ padding-top:6px; }
  .foot-legal a{ font-size:14.5px; }
}

/* Tighter grouping inside the contact block: each department reads as one
   unit (name, phone, email close together), the two units sit nearer each
   other, and the social row tucks under them instead of drifting. */
.foot-branches{ gap:6px clamp(24px,3.2vw,48px); }
.foot-branches a{ min-height:38px; }
.foot-branches a + a{ min-height:34px; }
.foot-social{ margin-top:16px; }

/* OWNER 2026-08-22 (last round on the lockup): the header logo becomes the
   arc version he sent — CARMELET TOP over the mark — with the words to its
   left AS TEXT, matching his second image: the name line, and the cyan
   strapline under it. Text, not a picture of text: it stays sharp at every
   density and re-inks with the pill's theme flip. */
.lp-header .brand-text strong{ flex-direction:row; gap:6px; align-items:baseline; }
.brand-text strong .brand-sub{ font-size:inherit; font-weight:500; letter-spacing:0; }
.brand-strap{
  display:block; margin-top:2px;
  font-weight:800; letter-spacing:.01em;
  font-size:13px; color:var(--cyan-soft, #35C4EC);
}
@media (min-width:861px){ .brand-strap{ font-size:16px; } }
/* the arc lockup is taller than the old emblem — let the tile breathe */
.lp-header .brand-tile{ width:52px; height:52px; border-radius:12px; }
.lp-header .brand-tile img{ height:44px; width:auto; }
@media (min-width:861px){
  .lp-header .brand-tile{ width:58px; height:58px; }
  .lp-header .brand-tile img{ height:50px; }
}
@media (max-width:520px){
  .lp-header .brand-text strong{ flex-direction:row; flex-wrap:wrap; gap:4px; }
  .brand-strap{ font-size:11.5px; }
}
/* footer card: the arc lockup is 8:7, not square */
.foot-logo{ aspect-ratio:auto; padding:10px; }
.foot-logo img{ width:clamp(96px,10vw,128px); }

/* OWNER 2026-08-22: "uneven and unprofessional" + the strap MUST be turquoise.
   Two faults fixed:
   1 · The qualifier sat at the name's full 24px in a lighter weight, so it
       read BIGGER than the name. Now the name leads (1em/800) and the
       qualifier steps down (.72em/600) on the shared baseline.
   2 · The strap wore --cyan-soft (#8FD8EA — a tint mixed for dark ground),
       which turns grey on the white pill. The logo's own turquoise is
       #00CFE7, but as small TEXT on white that fails contrast at 1.8:1 —
       so the strap wears the darkest member of the same turquoise family
       that passes (4.6:1) on light ground, and the logo's true #00CFE7 on
       the dark pill where it reads at 10:1. The hue stays turquoise at
       every moment; the law stays satisfied. */
.brand-text strong .brand-sub{ font-size:.72em; font-weight:600; }
.brand-strap{ color:#00CFE7; font-size:13.5px; }
[data-header="light"] .pill .brand-strap{ color:#007D91; }
@media (min-width:861px){ .brand-strap{ font-size:16.5px; } }

/* OWNER 2026-08-22: "the title is so big it takes from the logos — make it
   big to the sides instead of length." The pill grows OUT, not DOWN: the
   tile returns to strip-friendly height, the two text lines pack tight, and
   the width comes from air between the items, not from stacking. */
.lp-header .brand-text{ line-height:1.08; }
.brand-strap{ margin-top:1px; line-height:1.1; }
.lp-header .brand-tile{ width:46px; height:46px; }
.lp-header .brand-tile img{ height:40px; }
.pill{ gap:18px; padding:7px 12px 7px 16px; }
@media (min-width:861px){
  .lp-header .brand-text strong{ font-size:22px; }
  .brand-strap{ font-size:15px; }
  .lp-header .brand-tile{ width:52px; height:52px; }
  .lp-header .brand-tile img{ height:46px; }
  .pill{ gap:26px; padding:7px 14px 7px 20px; }
  .lp-header .brand{ gap:14px; }
}

/* The pill is 68px tall now (was ~64 before the lockup); the layout var that
   everything measures from was still 78px, so the strip started 2px under
   the pill's bottom edge. One source of truth, with real clearance. */
:root{ --lp-header-h:96px; }

/* Phone: the pill is shorter there (62px), so the 96px shared height left
   44px of dead air over the strip. The phone band sizes to its own pill. */
@media (max-width:700px){
  :root{ --lp-header-h:84px; }
}

/* OWNER 2026-08-22: the footer logo moves to the BOTTOM LEFT — which also
   fills the dead space under the legal links that made the block read as
   uneven. On the desktop grid it shares the left column and sinks to its
   floor; on one column it closes the footer above the rights line. */
@media (min-width:900px){
  .foot-logo{ grid-column:2; grid-row:1; align-self:end; justify-self:end; }
}
@media (max-width:899px){
  .foot-logo{ margin-top:18px; }
}

/* OWNER 2026-08-22: "מידע ותנאים מבולגן — רק קישורים או משהו". He is right:
   a headed column for four links overweights them. They become a quiet
   one-line legal row above the licence line — the classic footer grammar —
   and the left column belongs to the logo alone. */
.foot-legal-h{ display:none; }
@media (min-width:900px){
  .foot-legal{
    grid-column:1 / -1; grid-row:2;
    flex-direction:row; flex-wrap:wrap; gap:0 26px;
    padding-top:0; margin-top:clamp(20px,2.4vw,30px);
    border-top:0;
  }
  .foot-legal a{ font-size:13.5px; min-height:34px; }
  .foot-rights{ grid-row:3; }
  .foot-logo{ align-self:center; }
}
@media (max-width:899px){
  .foot-legal{
    flex-direction:row; flex-wrap:wrap; gap:0 20px;
    border-top:1px solid rgba(255,255,255,.14);
  }
}

/* OWNER 2026-08-22: the hairline sits ABOVE the legal links — line, then the
   links, then the licence/rights line, as one closing block. */
@media (min-width:900px){
  .foot-legal{
    border-top:1px solid rgba(255,255,255,.14);
    padding-top:12px;
  }
  .foot-rights{ border-top:0; padding-top:2px; margin-top:6px; }
}

/* OWNER 2026-08-22: his dark-ground lockup (cut from the brand PDF) replaces
   the white card — it is MADE for this navy, so it sits directly on it with
   only a soft edge. And the opening hours he sent, verbatim, under the
   address, with the clock heading he asked for. */
.foot-logo--dark{
  background:transparent; padding:0;
  border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
}
.foot-logo--dark img{ width:clamp(120px,12vw,150px); display:block; }
.foot-hours{ margin-top:16px; }
.foot-hours-h{
  display:flex; align-items:center; gap:8px;
  margin:0 0 6px; max-width:none;
  font-family:var(--font-display); font-weight:800;
  font-size:17px; letter-spacing:-.01em; color:#fff;
}
.foot-hours-h svg{ width:18px; height:18px; color:var(--cyan-soft); flex:none; }
.foot-hours p{ margin:2px 0 0; max-width:none; font-size:16px; color:#DDE4F3;
  font-variant-numeric:tabular-nums; }

/* OWNER 2026-08-22 (Hebrew, verbatim intent): all footer type ×1.5, branch
   names sized as real headings, the יצירת קשר divider cut to the width of
   the content it actually separates, and the logo grown to own the empty
   left field. */
.foot-name{ font-size:27px; }
.foot-strap{ font-size:24px; }
.foot-addr{ font-size:24px; line-height:1.5; }
.foot-hours{ margin-top:22px; }
.foot-hours-h{ font-size:25px; }
.foot-hours-h svg{ width:24px; height:24px; }
.foot-hours p{ font-size:24px; }
.foot-contact-h{ font-size:29px; }
.foot-branch-name{ font-size:20px; letter-spacing:.1em; }
.foot-branches a{ font-size:24px; min-height:48px; }
.foot-branches a + a{ min-height:44px; }
.foot-legal a{ font-size:20px; }
.foot-rights{ font-size:20px; line-height:1.6; }
@media (min-width:900px){
  .foot-name{ font-size:30px; }
  .foot-contact-h{ font-size:31px; }
  .foot-legal a{ font-size:20px; }
  /* the divider spans only its content: the branches block hugs its two
     columns (fit-content keeps it on the RTL reading edge), so the hairline
     stops where the content stops instead of crossing the empty field */
  .foot-branches{ width:fit-content; }
  /* the logo takes the field: nothing else lives in that column */
  .foot-logo--dark img{ width:clamp(220px,24vw,320px); }
  .foot-logo--dark{ border-radius:22px; }
}

/* The dark logo's CONTAINER still wore the old white-card width clamp
   (max 132px), which squeezed the enlarged image back down. The container
   now sizes to its content at every width. */
.foot-logo--dark{ width:fit-content; }
.foot-logo--dark img{ width:clamp(180px,20vw,320px); }
@media (min-width:900px){
  .foot-logo--dark img{ width:clamp(240px,26vw,340px); }
}

/* OWNER 2026-08-22: "הכתב גדול מדיי, הלוגו מצוין — blend". Type settles to
   a comfortable middle (~1.2x of the original scale, hierarchy kept), and
   the logo's charcoal ground is keyed out of the file itself, so the marks
   float directly on the navy — no box, no border, nothing to blend BECAUSE
   it simply is the environment now. */
.foot-name{ font-size:22px; }
.foot-strap{ font-size:19px; }
.foot-addr{ font-size:19px; }
.foot-hours-h{ font-size:20px; }
.foot-hours-h svg{ width:20px; height:20px; }
.foot-hours p{ font-size:19px; }
.foot-contact-h{ font-size:24px; }
.foot-branch-name{ font-size:16px; }
.foot-branches a{ font-size:19px; min-height:44px; }
.foot-branches a + a{ min-height:38px; }
.foot-legal a{ font-size:16px; }
.foot-rights{ font-size:15.5px; }
@media (min-width:900px){
  .foot-name{ font-size:24px; }
  .foot-contact-h{ font-size:26px; }
}
.foot-logo--dark{ border:0; border-radius:0; overflow:visible; background:transparent; }

/* OWNER 2026-08-22 (final blend): the words are CROPPED OUT of the image and
   rebuilt as page text on the page's own ground — per his instruction. The
   image is now only the arc + mark, keyed transparent; the name and strap
   under it are the site's own type, so the whole block is literally part of
   the page. */
.foot-logo--dark{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.foot-logo--dark img{ width:clamp(200px,22vw,300px); }
.foot-logo-name{
  margin:14px 0 0; max-width:none;
  font-family:var(--font-display); font-weight:800; line-height:1.16;
  font-size:clamp(22px,2.2vw,28px); letter-spacing:.01em;
  color:#00CFE7;
}
.foot-logo-strap{
  margin:6px 0 0; max-width:none;
  font-weight:600; font-size:clamp(16px,1.6vw,19px); color:#FFFFFF;
}

/* =====================================================================
   HERO SLIDESHOW — owner brief 2026-08-22. Five slides: the family plate
   (unchanged, first), three new golden-hour plates each with its own
   quote, and the brand banner on its own indigo ground. Crossfade every
   5s. Words enter one by one; after the sentence lands, three short
   strokes in the brand colours draw beneath it (his reference: yekev's
   hero). A pause control satisfies WCAG 2.2.2 for auto-advance.
   ===================================================================== */
.hero-slide{
  position:absolute; inset:0;
  opacity:0; transition:opacity 1s var(--ease-soft);
}
.hero-slide.is-active{ opacity:1; }
.hero-slide img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 42%;
}
/* the brand slide: the banner floats complete on its own indigo */
.hero-slide--logo{ background:#212657; }
.hero-slide--logo img{
  /* CONTAIN, not cover. The hero band is wider than 16:9 at most desktop
     sizes, so cover crops top and bottom — fine for a photograph, fatal for
     a logo ("look, it's eaten"). Contain guarantees the whole mark is
     visible; nothing letterboxes because the image is transparent and the
     gradient behind it IS the slide. */
  object-fit:contain; object-position:50% 50%;
  padding:clamp(14px,3.5vh,44px) clamp(16px,4vw,64px);
}
.hero.on-logo .hero-scrim{ opacity:0; }
.hero-scrim{ transition:opacity .9s var(--ease-soft); }
.hero.on-logo .hero-inner{ opacity:0; pointer-events:none; }
.hero-inner{ transition:opacity .7s var(--ease-soft); }

/* quotes: one visible at a time */
.hq{ display:none; }
.hq.is-active{ display:block; }
.js .hq .w{ display:inline-block; opacity:0; transform:translateY(.42em); }
.js .hq.play .w{
  animation:hqWord .55s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * 95ms + 120ms);
}
@keyframes hqWord{ to{ opacity:1; transform:none; } }

/* the brand strokes, drawn after the words settle (--wd = words done) */
.hq-strokes{ display:flex; gap:10px; margin-top:clamp(14px,2.2vh,24px); }
.hq-strokes i{
  display:block; height:6px; border-radius:3px;
  transform:scaleX(0); transform-origin:100% 50%;
}
.hq-strokes i:nth-child(1){ width:74px; background:#7DC242; }
.hq-strokes i:nth-child(2){ width:46px; background:#00CFE7; }
.hq-strokes i:nth-child(3){ width:24px; background:var(--navy-900); }
.js .hq.play .hq-strokes i{ animation:hqStroke .5s var(--ease-out) forwards; }
.js .hq.play .hq-strokes i:nth-child(1){ animation-delay:calc(var(--wd) + .15s); }
.js .hq.play .hq-strokes i:nth-child(2){ animation-delay:calc(var(--wd) + .30s); }
.js .hq.play .hq-strokes i:nth-child(3){ animation-delay:calc(var(--wd) + .45s); }
@keyframes hqStroke{ to{ transform:scaleX(1); } }

/* pause / play — bottom of the hero, out of the reading path */
.hero-pause{
  position:absolute; z-index:3;
  inset-block-end:clamp(16px,3vh,28px); inset-inline-start:clamp(16px,2vw,28px);
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(14,27,61,.55); color:#fff;
  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:background-color .2s var(--ease-out);
}
.hero-pause:hover{ background:rgba(14,27,61,.8); }
.hero-pause svg{ width:20px; height:20px; }
.hero-pause .ic-play{ display:none; }
.hero-pause[aria-pressed="true"] .ic-pause{ display:none; }
.hero-pause[aria-pressed="true"] .ic-play{ display:block; }

@media (prefers-reduced-motion:reduce){
  .hero-slide{ transition:none; }
  .js .hq .w{ opacity:1; transform:none; }
  .hq-strokes i{ transform:scaleX(1); }
}

/* Slide 5's ground, rebuilt from the owner's reference ("איזה רקע יפה"):
   deep navy falling to teal at the lower-left, with two vast translucent
   chevrons drifting across — drawn in CSS/SVG so it is sharp at any size,
   instead of stretching his small screenshot. The banner content itself is
   keyed transparent and floats on it. */
.hero-slide--logo{
  background:
    radial-gradient(120% 130% at 12% 100%, rgba(0,207,231,.34), transparent 55%),
    radial-gradient(90% 90% at 88% 0%, rgba(32,38,89,.9), transparent 60%),
    linear-gradient(215deg, #131A3F 10%, #16405C 78%, #1A6E7E 100%);
}
.logo-slide-chevrons{
  position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='90'%3E%3Cpath d='M330 -60 L90 300 L330 660'/%3E%3Cpath d='M640 -60 L400 300 L640 660'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover; background-position:center;
}

/* OWNER 2026-08-22: the pause control sat in the reading path and covered
   the brand strokes. It moves to the OPPOSITE corner (physical right, away
   from the RTL reading edge), shrinks, and quietens to a hairline glass
   button — present for the law, invisible to the eye until wanted. */
.hero-pause{
  inset-inline-start:auto;
  inset-inline-end:clamp(14px,1.8vw,24px);
  inset-block-end:clamp(14px,2.4vh,24px);
  width:38px; height:38px;
  background:rgba(14,27,61,.28);
  border-color:rgba(255,255,255,.28);
  opacity:.5;
  transition:opacity .2s var(--ease-out), background-color .2s var(--ease-out);
}
.hero-pause:hover,
.hero-pause:focus-visible{ opacity:1; background:rgba(14,27,61,.75); }
.hero-pause svg{ width:16px; height:16px; }

/* =====================================================================
   THE FIVE DOORS — owner brief 2026-08-22. Five tiles on the brand's own
   navy-to-teal ground (the background he chose for slide 5), carrying the
   icons cut from his brand PDF. Right to left in his order: travel, motor/
   home/business, health, life & mortgage, pension & finance.

   They POP as you scroll down from the slideshow, one after another —
   his instruction. The reveal is driven by IntersectionObserver
   (js/script.js already flips .in-view on [data-reveal]); the stagger is
   per-tile so they arrive in sequence rather than as a block.
   ===================================================================== */
.doors{
  position:relative; isolation:isolate;
  padding-block:clamp(56px,8vh,104px);
  background:
    radial-gradient(120% 130% at 12% 100%, rgba(0,207,231,.30), transparent 55%),
    radial-gradient(90% 90% at 88% 0%, rgba(32,38,89,.9), transparent 60%),
    linear-gradient(215deg, #131A3F 10%, #16405C 78%, #1A6E7E 100%);
}
.doors-chevrons{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='90'%3E%3Cpath d='M330 -60 L90 300 L330 660'/%3E%3Cpath d='M640 -60 L400 300 L640 660'/%3E%3C/g%3E%3C/svg%3E");
  background-size:cover; background-position:center;
}
.doors-head{ text-align:center; margin-bottom:clamp(30px,4.4vh,52px); }
.doors-head h2{
  margin:0; max-width:none; color:#fff;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(26px,1.2rem + 2.1vw,44px); letter-spacing:-.02em;
}
.doors-head p{
  margin:12px auto 0; max-width:52ch; color:#CFE0E6;
  font-size:clamp(15.5px,.95rem + .3vw,19px); line-height:1.6;
}

.doors-grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);
  margin:0; padding:0; list-style:none;
}
.door{
  height:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:clamp(20px,2.4vw,30px) clamp(12px,1.4vw,20px);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  color:#fff; text-decoration:none;
  transition:transform .3s var(--ease-spring), background-color .25s var(--ease-out),
             border-color .25s var(--ease-out), box-shadow .3s var(--ease-out);
}
.door:hover,.door:focus-visible{
  transform:translateY(-6px);
  background:rgba(255,255,255,.10);
  border-color:rgba(0,207,231,.55);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.75);
}
.door-ic{ display:block; height:clamp(58px,6.4vw,84px); }
.door-ic img{ height:100%; width:auto; }
.door:hover .door-ic img{ transform:scale(1.06); }
.door-ic img{ transition:transform .3s var(--ease-spring); }
.door-name{
  font-family:var(--font-display); font-weight:800; line-height:1.2;
  font-size:clamp(15.5px,.86rem + .42vw,19px); color:#fff;
}
.door-moto{
  font-size:clamp(13px,.78rem + .16vw,15px); line-height:1.5; color:#BFD6DE;
  flex:1 1 auto;
}
.door-go{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:4px; font-size:13.5px; font-weight:700; color:#00CFE7;
}
.door-go svg{ width:15px; height:15px; }

/* the pop: each tile arrives after the one before it */
.js .doors-grid[data-reveal="stagger"] > li{
  opacity:0; transform:translateY(26px) scale(.965);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-spring);
}
.js .doors-grid[data-reveal="stagger"].in-view > li{ opacity:1; transform:none; }
/* A WAVE, not a block and not a slow domino. 90ms between tiles: the whole
   run finishes in ~0.5s, so it reads as one movement with a direction
   instead of five separate arrivals — and nobody ever waits for it on a
   second visit. The order follows the markup, which is the RTL reading
   order, so the wave runs right to left exactly like the sentence above it. */
.js .doors-grid.in-view > li:nth-child(1){ transition-delay:.00s; }
.js .doors-grid.in-view > li:nth-child(2){ transition-delay:.09s; }
.js .doors-grid.in-view > li:nth-child(3){ transition-delay:.18s; }
.js .doors-grid.in-view > li:nth-child(4){ transition-delay:.27s; }
.js .doors-grid.in-view > li:nth-child(5){ transition-delay:.36s; }

@media (max-width:1080px){
  .doors-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:680px){
  .doors-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .door{ padding:18px 12px; }
  .door-moto{ font-size:12.5px; }
}
@media (prefers-reduced-motion:reduce){
  .js .doors-grid[data-reveal="stagger"] > li{ opacity:1; transform:none; }
}

/* =====================================================================
   THE CATEGORY RAIL — the five doors, condensed and sticky.

   The owner: "cut almost fifty percent, keep only the logos and the title,
   and it goes down with you and changes colours." So: icon + name only, and
   it pins under the header pill the moment the big tiles are behind you.

   It re-inks with the SAME contract the pill uses — js/motion.js writes
   data-header on <html> from each section's data-header-theme — so the rail
   is paper over the light half of the page and smoked glass over the dark
   chapters. It never guesses.
   ===================================================================== */
.rail{
  position:sticky; z-index:55;
  inset-block-start:var(--lp-header-h);
  /* hidden until the doors are behind you; js flips .rail-on */
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-spring),
             visibility .35s, background-color .5s var(--ease-soft),
             border-color .5s var(--ease-soft);
  background:rgba(252,249,243,.92);
  border-block:1px solid var(--border);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
}
.rail-on .rail{ opacity:1; visibility:visible; transform:none; }
[data-header="dark"] .rail{
  background:rgba(9,14,26,.90);
  border-color:rgba(255,255,255,.14);
}
.rail ul{
  display:flex; align-items:stretch; justify-content:center;
  gap:clamp(2px,.6vw,10px);
  margin:0 auto; padding:0 clamp(8px,2vw,20px);
  max-width:var(--maxw); list-style:none;
}
.rail li{ flex:1 1 0; min-width:0; }
.rail a{
  height:100%;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 6px; min-height:52px;
  border-radius:10px;
  color:var(--navy-900); text-decoration:none;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(11.5px,.62rem + .34vw,15px); line-height:1.15;
  text-align:center;
  transition:background-color .2s var(--ease-out), color .2s var(--ease-out);
}
[data-header="dark"] .rail a{ color:#fff; }
.rail a:focus-visible{ background:rgba(0,207,231,.14); color:var(--green-700); }
[data-header="dark"] .rail a:focus-visible{ background:rgba(0,207,231,.18); color:#00CFE7; }
@media (hover:hover){
  .rail a:hover{ background:rgba(0,207,231,.14); color:var(--green-700); }
  [data-header="dark"] .rail a:hover{ background:rgba(0,207,231,.18); color:#00CFE7; }
}
.rail-ic{ flex:none; display:block; height:clamp(22px,2.2vw,30px); }
.rail-ic img{ height:100%; width:auto; }

@media (max-width:780px){
  .rail a{ flex-direction:column; gap:4px; padding:7px 3px; font-size:10.5px; }
  .rail-ic{ height:22px; }
}
@media (prefers-reduced-motion:reduce){
  .rail{ transition:opacity .01ms, visibility .01ms; }
}

/* =====================================================================
   CATEGORY PAGES — one per door. Each opens on the brand ground with its
   own icon and motto, carries the sticky rail so the reader can move
   between categories without going home first, and lists its products as
   headed groups across the page (the owner's brief: "3 כותרות לרוחב הדף,
   מתחת לכל אחת הסלוגן, ומתחת שמות המוצרים").
   ===================================================================== */
.cat-hero{
  position:relative; isolation:isolate; text-align:center;
  /* clear the fixed header pill — it was landing on the back-link */
  padding-block:calc(var(--lp-header-h) + clamp(20px,3vh,40px)) clamp(36px,6vh,68px);
  background:
    radial-gradient(120% 130% at 12% 100%, rgba(0,207,231,.30), transparent 55%),
    radial-gradient(90% 90% at 88% 0%, rgba(32,38,89,.9), transparent 60%),
    linear-gradient(215deg, #131A3F 10%, #16405C 78%, #1A6E7E 100%);
}
.cat-back{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; margin-bottom:8px;
  color:#BFD6DE; font-weight:700; font-size:14.5px; text-decoration:none;
}
.cat-back:hover{ color:#00CFE7; }
.cat-back svg{ width:16px; height:16px; }
.cat-ic{ display:block; height:clamp(64px,8vw,104px); margin:6px auto 14px; }
.cat-ic img{ height:100%; width:auto; }
.cat-hero h1{
  margin:0; max-width:none; color:#fff;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px,1.3rem + 2.4vw,50px); letter-spacing:-.025em;
}
.cat-moto{
  margin:12px auto 0; max-width:46ch; color:#CFE0E6;
  font-size:clamp(16px,.95rem + .35vw,20px); line-height:1.55;
}

.cat-body{ background:var(--paper); padding-block:clamp(40px,6vh,76px); }
/* Column count is the owner's, per page: health runs FOUR sub-categories
   across, motor/home/business THREE. --cols is set on the grid in the
   markup; auto-fit is the fallback for anything narrower. */
.cg-grid{
  display:grid; gap:clamp(16px,1.8vw,28px);
  grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  align-items:start;
}
@media (max-width:1180px){ .cg-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:720px){ .cg-grid{ grid-template-columns:1fr; } }
.cg{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:clamp(20px,2.2vw,30px);
}
.cg h2{
  margin:0; max-width:none; color:var(--navy-900);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,1rem + .6vw,25px); letter-spacing:-.015em;
}
.cg-slogan{
  margin:8px 0 0; max-width:none; color:var(--green-700);
  font-weight:700; font-size:clamp(14.5px,.85rem + .2vw,17px); line-height:1.5;
}
/* The genuine explanatory paragraph under a sub-category's slogan, added
   2026-08-27 (health.html content expansion). Same scale as the list items
   below it — reads as one voice, not a foreign "SEO block" bolted on. */
.cg-desc{
  margin:12px 0 0; max-width:none; color:var(--ink);
  font-size:clamp(14px,.82rem + .18vw,15.5px); line-height:1.65;
}
.cg-list{
  margin:16px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--border);
}
.cg-list li{
  padding:11px 0 11px 0; border-bottom:1px solid var(--border);
  font-size:clamp(14.5px,.85rem + .2vw,16.5px); line-height:1.55; color:var(--ink);
}
.cg-list li:last-child{ border-bottom:0; }

.cat-cta{
  margin-top:clamp(30px,4vh,52px); text-align:center;
  padding:clamp(24px,3vw,40px); border-radius:16px;
  background:var(--sand); border:1px solid var(--border);
}
.cat-cta h2{ margin:0; max-width:none; font-size:clamp(20px,1rem + .9vw,28px); }
.cat-cta p{ margin:10px auto 18px; max-width:46ch; }
.cat-cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.cat-cta-row a{ min-height:52px; display:inline-flex; align-items:center; padding-inline:22px; border-radius:var(--r-md); font-weight:700; text-decoration:none; }
.btn-ghost{ border:1px solid var(--navy-900); color:var(--navy-900); }
.btn-ghost:hover{ background:var(--navy-900); color:#fff; }

/* on a category page the rail is always present — there are no doors above it */
.cat-hero + .rail{ opacity:1; visibility:visible; transform:none; }

/* .cat-ic already existed for the deleted cream chapters, where it was a
   dark rounded plaque behind a small glyph. On a category hero that plaque
   reads as a box around the icon ("the icon has a black square"). The
   category pages want the mark alone on the gradient. */
.cat-hero .cat-ic{
  background:none; border:0; border-radius:0; box-shadow:none; padding:0;
  width:auto;
}

/* =====================================================================
   THE RAIL MOVES TO THE FOOT OF THE SCREEN — owner brief 2026-08-22.

   "Five icons on the bottom of the page that go with you as you scroll,
   clickable, and change colours — same as the title. Make it for iPhone
   too." So the rail is now fixed to the bottom edge, not sticky under the
   header. It still re-inks from the same data-header contract the pill
   uses, so it is paper over the light half and smoked glass over the dark
   chapters — it never guesses.

   On a phone this becomes the ONE bottom bar: the old call/WhatsApp strip
   stands down, because the phone and WhatsApp already live in the header
   pill and the floating button, and two stacked bars was the exact mess
   he flagged earlier. It also clears the cookie banner and the iPhone home
   indicator (env(safe-area-inset-bottom)).
   ===================================================================== */
.rail{
  position:fixed; inset-block-start:auto;
  inset-block-end:var(--consent-height,0px);
  inset-inline:0; z-index:75;
  transform:translateY(10px);
  border-block:0; border-top:1px solid var(--border);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -10px 30px -18px rgba(20,26,32,.5);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-spring),
             visibility .35s, background-color .5s var(--ease-soft),
             border-color .5s var(--ease-soft), bottom .25s var(--ease-out);
}
[data-header="dark"] .rail{ border-top-color:rgba(255,255,255,.16); }

/* the page keeps clearance so the bar never sits on the last line */
.rail-on body,
body:has(.rail){ --rail-h:64px; }
.rail-on footer{ padding-bottom:calc(var(--rail-h) + 8px); }

/* One bar at the bottom, not two. */
@media (max-width:980px){
  .rail-on .sticky-cta{ display:none; }
  .rail-on body{ padding-bottom:calc(var(--rail-h) + var(--consent-height)); }
}
/* the floating WhatsApp bubble lifts above the bar */
.rail-on .wa-float{ inset-block-end:calc(var(--rail-h) + 16px + var(--consent-height)); }
.rail-on .a11y-fab,
.rail-on .access-fab{ inset-block-end:calc(var(--rail-h) + 16px + var(--consent-height)); }

@media (max-width:780px){
  .rail a{ flex-direction:column; gap:3px; padding:6px 2px; font-size:10px; min-height:56px; }
  .rail-ic{ height:20px; }
}
@media (max-width:380px){
  .rail a{ font-size:9px; }
  .rail-ic{ height:18px; }
}
/* a category page shows it immediately */
.cat-hero ~ .rail,
.cat-hero + .rail{ opacity:1; visibility:visible; transform:none; }

/* =====================================================================
   THE RAIL BECOMES FIVE SEPARATE FLOATING BLOCKS — owner, 2026-08-22.

   "It's not a section. It's like the WhatsApp, like the accessibility —
   it's got its own icon, its own name, in a block, and there are gaps
   between them." So the continuous bar is gone: the strip itself is now
   invisible, and each of the five is its own glass chip with its own
   ground, its own edge and real air around it — the same visual family as
   the WhatsApp bubble and the accessibility button that already float
   there. Still re-inks per section, still fixed to the foot, still one
   row on a phone.
   ===================================================================== */
.rail{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  padding-block:0 calc(10px + env(safe-area-inset-bottom));
  pointer-events:none;                 /* the gutter is not a target */
}
.rail ul{
  gap:clamp(6px,.9vw,14px);
  padding-inline:clamp(10px,2vw,22px);
}
.rail li{ pointer-events:auto; }
.rail a{
  border-radius:14px;
  background:rgba(252,249,243,.94);
  border:1px solid rgba(20,26,32,.12);
  box-shadow:0 10px 26px -14px rgba(20,26,32,.55);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out),
             transform .25s var(--ease-spring), border-color .25s var(--ease-out),
             box-shadow .25s var(--ease-out);
}
[data-header="dark"] .rail a{
  background:rgba(11,18,34,.90);
  border-color:rgba(255,255,255,.22);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
}
.rail a:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(0,207,231,.6);
}
@media (hover:hover){
  .rail a:hover{
    transform:translateY(-4px);
    border-color:rgba(0,207,231,.6);
  }
}

/* The accessibility button was colliding with the row. It lifts clear of
   the blocks and keeps its own corner. */
.rail-on .access-float{
  inset-block-end:calc(var(--rail-h) + 22px + var(--consent-height));
}
.rail-on .wa-float{
  inset-block-end:calc(var(--rail-h) + 22px + var(--consent-height));
}
:root{ --rail-h:66px; }
@media (max-width:780px){
  :root{ --rail-h:70px; }
  .rail ul{ gap:5px; padding-inline:6px; }
  .rail a{ border-radius:12px; }
}

/* =====================================================================
   THE BLOCKS GET THEIR OWN WAVE — owner, 2026-08-22.

   "Make it wave like the motion on the starting page." The strip used to
   slide in as one object, which is what made it read as a bar. Now the
   container just appears and EACH BLOCK arrives on its own: up from below
   with a spring and a touch of scale, 75ms apart, right to left — the same
   grammar as the words on the opening screen.

   They also lift off the bottom edge. Flush against it they read as a bar;
   floating above it they read as five objects, the same family as the
   WhatsApp bubble.
   ===================================================================== */
.rail{
  /* the container no longer moves — the blocks do */
  transform:none !important;
  padding-block:0 calc(16px + env(safe-area-inset-bottom));
  inset-block-end:calc(var(--consent-height,0px) + 6px);
}
.rail li{
  opacity:0;
  transform:translateY(26px) scale(.94);
  transition:opacity .42s var(--ease-out),
             transform .58s var(--ease-spring);
}
.rail-on .rail li{ opacity:1; transform:none; }
.rail-on .rail li:nth-child(1){ transition-delay:.00s; }
.rail-on .rail li:nth-child(2){ transition-delay:.075s; }
.rail-on .rail li:nth-child(3){ transition-delay:.15s; }
.rail-on .rail li:nth-child(4){ transition-delay:.225s; }
.rail-on .rail li:nth-child(5){ transition-delay:.30s; }
/* leaving is quick and together — a reversed wave on the way out reads as
   a stutter, not as polish */
.rail li{ transition-delay:0s; }

/* a hair more presence now that they float free */
.rail a{ padding:11px 10px; }
:root{ --rail-h:74px; }
@media (max-width:780px){
  :root{ --rail-h:78px; }
  .rail{ inset-block-end:calc(var(--consent-height,0px) + 4px); }
  .rail a{ padding:8px 3px; }
}
@media (prefers-reduced-motion:reduce){
  .rail li{ opacity:1; transform:none; transition:none; }
}

/* Now that the blocks are separate, page text shows BETWEEN them — which
   looked like a mistake at the foot of the page. Every page end gets real
   clearance so nothing ever sits under or between the blocks. */
/* Measured, not guessed: the blocks stand --rail-h tall, float 6px off the
   edge and carry 16px of their own padding, so the last line needs the lot
   plus breathing room or the licence text sits between them. */
.rail-on footer{ padding-bottom:calc(var(--rail-h) + 20px); }
.rail-on .cat-body{ padding-bottom:calc(var(--rail-h) + 20px); }

/* The footer's own padding was not reaching the last line (the licence text
   sits inside .wrap, whose box ends before the footer's padding begins), so
   the blocks still crossed it. Put the clearance on the last line itself. */
.rail-on .foot-rights{ margin-bottom:calc(var(--rail-h) + 16px); }
.rail-on .cat-cta{ margin-bottom:calc(var(--rail-h) + 20px); }

/* OWNER 2026-08-22: "we don't have white colours for now — keep it black."
   The blocks no longer flip to the paper ground over light sections; they
   stay on the dark glass everywhere, which is also the only ground the
   white/green icons were drawn for. */
.rail a,
[data-header="light"] .rail a,
[data-header="dark"] .rail a{
  background:rgba(11,18,34,.92);
  border-color:rgba(255,255,255,.22);
  color:#fff;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.7);
}
.rail a:focus-visible,
[data-header="light"] .rail a:focus-visible{
  color:#00CFE7;
  border-color:rgba(0,207,231,.6);
}
@media (hover:hover){
  .rail a:hover,
  [data-header="light"] .rail a:hover{
    color:#00CFE7;
    border-color:rgba(0,207,231,.6);
  }
}

/* ── Design review fixes, 2026-08-22 ─────────────────────────────────── */

/* .btn-solid had NO rule anywhere, so "התקשרו" rendered as bare text beside
   a bordered WhatsApp button — the most important action on an insurance
   page looked less clickable than the second one. White on navy is 16.9:1. */
.btn-solid{ background:var(--navy-900); color:#fff; border:1px solid var(--navy-900); }
.btn-solid:hover{ background:var(--navy-700); border-color:var(--navy-700); }

/* The house-rules squash bug, twice: the pill logo was rendering 52x46 from
   a 420x337 file, and .cat-ic inherited aspect-ratio:1 from the old cream
   chapters, forcing three of the five icons into a square. */
.brand-tile img{ object-fit:contain; }
.cat-hero .cat-ic{ aspect-ratio:auto; width:auto; }

/* Cards in a row are a set, not a ragged edge. */
.cg-grid{ align-items:stretch; }
.cg{ display:flex; flex-direction:column; }

/* One radius language: the token scale, not 14/16/12 on one page. */
.cg,.cat-cta{ border-radius:var(--r-card); }

/* A single wide card holding three short lines read as an empty field. */
.cg-grid[style*="--cols:1"]{ max-width:680px; margin-inline:auto; }

/* Reserve two lines on every rail chip so one wrapping label cannot push
   its own icon out of line with the other four. */
.rail a > span:last-child{ min-height:2.3em; display:flex; align-items:center; justify-content:center; }

/* "You are here" on the rail. */
/* "You are here" — but the owner banned white grounds, and a translucent
   cyan fill over nothing renders pale. Keep the dark glass; mark the current
   chip with the brand cyan on its edge, its label and a soft glow. */
.rail a[aria-current="page"]{
  background:rgba(11,18,34,.95);
  color:#00CFE7;
  border-color:#00CFE7;
  box-shadow:0 0 0 1px rgba(0,207,231,.35), 0 10px 26px -12px rgba(0,0,0,.7);
}

/* Phone extensions and time ranges must not break mid-number. */
.foot-branches .foot-ext{ display:inline; font-weight:400; margin-inline-start:.4em; white-space:nowrap; }
.foot-branches a[href^="tel"]{ white-space:nowrap; }
.nw{ white-space:nowrap; }

/* Fiddly footer targets on a phone. */
@media (max-width:780px){
  .foot-branches a,.foot-legal a{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ── The standing "buy travel insurance" card ────────────────────────────
   The owner circled yekev's version and asked for ours. It stands on the
   hero's leading edge (physical left, so it never crosses the RTL headline),
   links to travel.html where all four insurers' purchase links live with his
   agent codes, and steps out of the way on a phone. */
.hero-buy{
  position:absolute; z-index:3;
  inset-block-start:50%; transform:translateY(-50%);
  inset-inline-end:clamp(12px,2vw,32px);
  width:clamp(108px,10vw,140px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 12px;
  border-radius:14px;
  background:rgba(252,249,243,.95);
  border:1px solid rgba(20,26,32,.12);
  box-shadow:0 16px 40px -18px rgba(20,26,32,.6);
  backdrop-filter:blur(12px) saturate(1.2);
  color:var(--navy-900); text-decoration:none; text-align:center;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(12.5px,.7rem + .3vw,15px); line-height:1.25;
  transition:transform .28s var(--ease-spring), box-shadow .28s var(--ease-out),
             border-color .2s var(--ease-out);
}
.hero-buy:hover,.hero-buy:focus-visible{
  transform:translateY(-50%) scale(1.04);
  border-color:rgba(0,207,231,.65);
  box-shadow:0 20px 46px -18px rgba(20,26,32,.7);
}
.hero-buy-ic{ display:block; height:clamp(34px,3.4vw,44px); }
.hero-buy-ic img{ height:100%; width:auto; }
.hero.on-logo .hero-buy{ opacity:0; pointer-events:none; }
.hero-buy{ transition:opacity .5s var(--ease-soft), transform .28s var(--ease-spring),
           box-shadow .28s var(--ease-out), border-color .2s var(--ease-out); }
@media (max-width:700px){
  /* On a phone the hero is short and the headline owns the middle, so the
     card was landing on the words. It sits at the foot of the opening
     screen instead, on the reading edge, as a single line. */
  /* The phone hero is short and the headline owns the top-right, so the
     card sits in the empty sky at the TOP-LEFT — the one corner of the
     photograph that is never type. */
  .hero-buy{
    inset-block-start:14px; inset-block-end:auto; transform:none;
    inset-inline-end:auto; inset-inline-start:12px;
    width:auto; max-width:calc(100% - 24px);
    flex-direction:row; align-items:center; gap:8px; padding:9px 13px;
    font-size:12.5px; border-radius:12px;
  }
  .hero-buy:hover,.hero-buy:focus-visible{ transform:scale(1.03); }
  .hero-buy-ic{ height:24px; }
  .hero-buy-txt{ display:flex; gap:.28em; }
}

/* Slide 5 a further 1.5x — the owner marked it as still too small. */
.hero-slide--logo img{ padding:clamp(6px,1.4vh,18px) clamp(6px,1.6vw,22px); }
@media (min-width:701px){ .hero-buy-txt span{ display:block; } }

/* ── Every product is a route to a conversation ──────────────────────────
   The owner: "I want every button in the category working, not just the
   title." Each product line is now a WhatsApp link that opens with that
   product's own name already typed, so the agent knows what the caller
   wants before saying hello. The row still reads as a list — the mark only
   appears on hover or focus, so 42 links do not become 42 buttons. */
.cg-list li{ padding:0; }
.cg-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 2px; min-height:44px;
  color:var(--ink); text-decoration:none;
  transition:color .18s var(--ease-out), padding-inline .18s var(--ease-out);
}
.cg-link:hover,.cg-link:focus-visible{ color:var(--green-700); padding-inline-end:6px; }
.cg-wa{
  flex:none; width:17px; height:17px; fill:currentColor;
  opacity:0; transform:translateX(4px);
  transition:opacity .18s var(--ease-out), transform .18s var(--ease-out);
}
.cg-link:hover .cg-wa,.cg-link:focus-visible .cg-wa{ opacity:.85; transform:none; }
@media (hover:none){ .cg-wa{ opacity:.5; transform:none; } }

/* =====================================================================
   EMERGENCY NUMBERS — /emergency.html
   Built to the owner's spec: every number visible immediately, no
   accordion, no dropdown, no "show number", no carousel. A person in a
   crisis should read, not navigate.
   ===================================================================== */
.em-hero{
  position:relative; isolation:isolate; text-align:center;
  padding-block:calc(var(--lp-header-h) + clamp(20px,3vh,40px)) clamp(30px,5vh,56px);
  background:
    radial-gradient(120% 130% at 12% 100%, rgba(0,207,231,.28), transparent 55%),
    linear-gradient(215deg, #3A0E12 6%, #6B1620 55%, #8E1D22 100%);
}
.em-hero h1{
  margin:8px 0 0; max-width:none; color:#fff;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(30px,1.4rem + 2.5vw,52px); letter-spacing:-.025em;
}

.em-help{ background:var(--sand); padding-block:clamp(26px,4vh,44px); text-align:center; }
.em-help h2{ margin:0; max-width:34ch; margin-inline:auto; font-size:clamp(19px,1rem + .8vw,26px); }
.em-help p{ margin:10px auto 18px; max-width:52ch; }
.em-help-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.em-help-row a{ min-height:52px; display:inline-flex; align-items:center; padding-inline:22px;
  border-radius:var(--r-md); font-weight:700; text-decoration:none; }

/* the four doors — one row on a desktop, never a carousel */
.em-nav{ background:var(--paper); padding-block:clamp(18px,3vh,30px); border-block:1px solid var(--border); }
.em-nav ul{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1.2vw,16px);
  margin:0; padding:0; list-style:none; }
.em-jump{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; text-align:center; min-height:88px; padding:14px 10px;
  border-radius:var(--r-card); background:#fff; border:1px solid var(--border);
  color:var(--navy-900); text-decoration:none; font-weight:800;
  font-size:clamp(13px,.74rem + .3vw,16px); line-height:1.25;
  transition:transform .22s var(--ease-spring), border-color .2s var(--ease-out);
}
.em-jump:hover,.em-jump:focus-visible{ transform:translateY(-3px); border-color:#8E1D22; }
.em-jump-ic{ font-size:26px; line-height:1; }

.em-sec{ padding-block:clamp(30px,5vh,56px); }
.em-sec:nth-of-type(even){ background:var(--sand); }
.em-sec h2{ margin:0; max-width:none; font-size:clamp(21px,1.05rem + 1vw,32px); }
.em-sub{ margin:8px 0 0; max-width:60ch; color:var(--muted); font-size:clamp(15px,.9rem + .25vw,18px); }
.em-warn{
  margin:16px 0 0; max-width:none; padding:12px 14px;
  background:#FFF4E5; border:1px solid #E8C89A; border-radius:var(--r-md);
  font-size:15px; line-height:1.55; color:#5B3D12;
}
.em-warn--soft{ background:var(--paper); border-color:var(--border); color:var(--muted); }

.em-grid{ display:grid; gap:clamp(12px,1.4vw,20px); margin-top:clamp(18px,2.6vh,28px);
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.em-card{ background:#fff; border:1px solid var(--border); border-radius:var(--r-card);
  padding:clamp(16px,1.8vw,22px); display:flex; flex-direction:column; }
.em-card h3{
  margin:0; max-width:none; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(17px,.95rem + .35vw,21px); color:var(--navy-900);
}
.em-hours{ font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.06em;
  color:#0F7F44; background:#E7F5ED; border-radius:99px; padding:3px 9px; }
.em-desc{ margin:6px 0 0; max-width:none; font-size:14.5px; color:var(--muted); line-height:1.5; }
.em-tels{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.em-tel{
  display:flex; align-items:center; gap:9px; min-height:48px;
  padding:8px 12px; border-radius:var(--r-md);
  background:var(--sand); border:1px solid var(--border);
  color:var(--navy-900); text-decoration:none;
  transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.em-tel:hover,.em-tel:focus-visible{ background:#fff; border-color:var(--navy-900); }
.em-tel svg{ width:17px; height:17px; margin-inline-start:auto; stroke:var(--green-700); fill:none; }
.em-lbl{ font-size:12.5px; color:var(--muted); font-weight:600; }
.em-num{ font-size:clamp(17px,.95rem + .4vw,22px); font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.em-wa,.em-link{
  margin-top:8px; display:inline-flex; align-items:center; gap:8px; min-height:44px;
  font-weight:700; font-size:14.5px; color:#0F7F44; text-decoration:none;
}
.em-wa svg{ width:17px; height:17px; fill:currentColor; }
.em-link{ color:var(--navy-900); text-decoration:underline; text-underline-offset:3px; }
.em-note{ margin:10px 0 0; max-width:none; font-size:13.5px; color:var(--muted); line-height:1.5; }

.em-foot{ background:var(--paper); padding-block:clamp(24px,4vh,40px); }
.em-updated{ margin:0; max-width:none; font-weight:700; }
.em-legal{ margin:10px 0 0; max-width:none; font-size:13.5px; color:var(--muted); line-height:1.6; }

/* the standing bar the spec asks for on phones */
.em-bar{ display:none; }
@media (max-width:900px){
  .em-nav ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:780px){
  .em-grid{ grid-template-columns:1fr; }
  .em-bar{
    position:fixed; z-index:76;
    inset-inline:0; inset-block-end:calc(var(--rail-h) + var(--consent-height,0px));
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
    padding:9px 12px calc(9px + env(safe-area-inset-bottom));
    background:#8E1D22; color:#fff; font-size:13.5px; font-weight:700;
    box-shadow:0 -8px 24px -14px rgba(0,0,0,.6);
  }
  .em-bar a{ color:#fff; font-weight:800; text-decoration:underline; text-underline-offset:3px;
    min-height:32px; display:inline-flex; align-items:center; }
}

/* ── The red emergency button ────────────────────────────────────────────
   The owner's most important requirement: a person in trouble must spot it
   instantly and never hunt through a menu. It sits at the PHYSICAL LEFT of
   the header on every page, in a red that carries white text at 5.9:1 —
   deliberately the only red on the site, so nothing competes with it. */
.pill-sos{
  display:inline-flex; align-items:center; gap:7px;
  min-height:44px; padding:0 14px;
  border-radius:var(--r-md);
  background:#B3121B; color:#fff;
  border:1px solid rgba(255,255,255,.22);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(12.5px,.7rem + .18vw,15px); letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap;
  transition:background-color .18s var(--ease-out), transform .18s var(--ease-spring);
}
.pill-sos:hover,.pill-sos:focus-visible{ background:#8E0E16; transform:translateY(-1px); }
.pill-sos svg{ width:16px; height:16px; stroke:currentColor; fill:none; }
.pill{ position:relative; }
@media (max-width:640px){
  /* On a phone the word is hidden for space — but display:none also strips
     the accessible name, so the link becomes nameless to a screen reader.
     Clipped, not removed: it is still announced. The anchor also carries an
     explicit aria-label as a belt-and-braces. */
  .pill-sos span{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .pill-sos{ padding:0 11px; }
  .pill-sos svg{ width:18px; height:18px; }
}

/* ── The standing purchase button ────────────────────────────────────────
   Vertical panel on the right edge, on every page, per his spec. */
.buy-float{
  position:fixed; z-index:72;
  /* PHYSICAL right, not logical: in RTL inset-inline-end resolves to the
     left, and his spec (and the reference he sent) both put it on the
     right of the screen. */
  right:0; left:auto; inset-block-start:50%; transform:translateY(-50%);
  width:clamp(96px,7.5vw,124px);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 10px;
  border-radius:0 14px 14px 0;
  background:#fff; color:var(--navy-900);
  border:1px solid var(--border); border-right:0;
  box-shadow:0 14px 40px -16px rgba(20,26,32,.55);
  text-decoration:none; text-align:center;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(11px,.6rem + .2vw,13px); line-height:1.3;
  transition:transform .26s var(--ease-spring), box-shadow .26s var(--ease-out);
}
.buy-float:hover,.buy-float:focus-visible{
  transform:translateY(-50%) translateX(4px);
  box-shadow:0 18px 46px -16px rgba(20,26,32,.7);
}
.buy-float-ic{ width:30px; height:30px; color:var(--green-700); flex:none; }
.buy-float b{ color:var(--green-700); }
@media (max-width:780px){
  /* small, out of the reading path, clear of the blocks at the foot */
  .buy-float{
    inset-block-start:auto;
    inset-block-end:calc(var(--rail-h) + 74px + var(--consent-height,0px));
    transform:none; width:auto; max-width:52vw;
    flex-direction:row; gap:7px; padding:9px 12px;
    border-radius:0 12px 12px 0; font-size:11.5px; line-height:1.2;
  }
  .buy-float:hover,.buy-float:focus-visible{ transform:translateX(3px); }
  .buy-float-ic{ width:22px; height:22px; }
  .buy-float br{ display:none; }
  .buy-float-txt{ display:flex; flex-wrap:wrap; gap:.25em; }
}

/* The emergency call-to-action that closes the home page. */
.sos-cta{
  background:linear-gradient(215deg,#3A0E12 6%,#6B1620 60%,#8E1D22 100%);
  padding-block:clamp(34px,5vh,60px); text-align:center; color:#fff;
}
.sos-cta h2{ margin:0; max-width:none; color:#fff; font-size:clamp(22px,1.1rem + 1.2vw,34px); }
.sos-cta p{ margin:12px auto 22px; max-width:52ch; color:#F3DDDE; font-size:clamp(15.5px,.95rem + .3vw,19px); }
.sos-btn{
  display:inline-flex; align-items:center; gap:10px;
  min-height:60px; padding:0 clamp(24px,3vw,38px);
  border-radius:var(--r-md);
  background:#fff; color:#8E0E16;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(17px,.95rem + .5vw,22px);
  text-decoration:none;
  box-shadow:0 16px 40px -18px rgba(0,0,0,.6);
  transition:transform .22s var(--ease-spring), background-color .18s var(--ease-out);
}
.sos-btn:hover,.sos-btn:focus-visible{ transform:translateY(-3px); background:#FFF1F1; }
.sos-btn svg{ width:22px; height:22px; stroke:currentColor; fill:none; }


/* OWNER 2026-08-22: the red button sits beside the phone number, on its
   physical right. On a phone it is the ☎ glyph alone — no words — exactly
   like the other icon-only controls in the pill; on a computer it carries
   its label. The word is clipped rather than removed so a screen reader
   still announces it. */
.pill-sos{ order:0; }
@media (max-width:900px){
  .pill-sos span{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .pill-sos{ padding:0 12px; min-width:46px; justify-content:center; }
  .pill-sos svg{ width:19px; height:19px; }
}

/* =====================================================================
   PHONE HEADER — owner, 2026-08-22: "in the phone it's not in the ratio."
   Right: the pill fits the screen but its CONTENTS overflowed it, so the
   number was sliced by the edge. Four items (brand, SOS, phone, WhatsApp)
   were being asked to hold their natural width inside 350px.

   Now every item may shrink, the brand name truncates rather than pushes,
   and below 560px the phone and WhatsApp become glyphs — the number is
   still one tap away, and it is printed in full further down the page.
   ===================================================================== */
@media (max-width:700px){
  .pill{ gap:6px; padding:6px 8px; min-width:0; }
  .lp-header .brand{ min-width:0; flex:1 1 auto; gap:8px; }
  .brand-text{ min-width:0; }
  .lp-header .brand-text strong{ min-width:0; }
  .brand-text strong .brand-name,
  .brand-text strong .brand-sub{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
  }
  .pill-tel,.pill-wa,.pill-sos{ flex:none; }
  .pill-tel{ padding:0 10px; gap:5px; }
}
@media (max-width:560px){
  /* the number becomes the glyph — it is printed in full in the footer,
     in the contact section and on the emergency page */
  .pill-tel-num{ display:none; }
  .pill-tel svg{ display:block; }
  .pill-tel{ padding:0 11px; min-width:44px; justify-content:center; }
  .pill-wa{ padding:0 11px; min-width:44px; }
  .pill-wa span{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .brand-strap{ display:none; }
}

/* ── The travel-purchase button, rebuilt ─────────────────────────────────
   The owner: "it looks terrible, and put it in the middle of the page."
   It was a narrow strip with three lines of type jammed together and no
   space around them. Now: a proper card with an icon on its own ground, a
   small kicker above the name, real padding, and the brand green doing the
   work. Vertically centred on the page, as he asked.
   ───────────────────────────────────────────────────────────────────── */
.buy-float{
  right:0; left:auto; inset-block-start:50%; transform:translateY(-50%);
  width:auto; max-width:min(210px,42vw);
  flex-direction:row; align-items:center; gap:11px;
  padding:14px 16px 14px 14px;
  border-radius:0 16px 16px 0;
  background:#fff;
  border:1px solid var(--border); border-right:0;
  border-inline-start:3px solid var(--green-700);
  box-shadow:0 18px 44px -18px rgba(20,26,32,.5);
  text-align:start;
}
.buy-float-ic{
  flex:none; display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px;
  background:#EAF6EE; color:var(--green-700);
}
.buy-float-ic svg{ width:22px; height:22px; }
.buy-float-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.buy-float-kicker{
  font-family:var(--font-body); font-weight:800;
  font-size:11px; letter-spacing:.08em; color:var(--green-700);
  text-transform:none;
}
.buy-float-name{
  font-family:var(--font-display); font-weight:800;
  font-size:14.5px; line-height:1.25; color:var(--navy-900);
}
.buy-float:hover,.buy-float:focus-visible{
  transform:translateY(-50%) translateX(5px);
  box-shadow:0 22px 52px -18px rgba(20,26,32,.62);
  border-inline-start-color:#0F7F44;
}
@media (max-width:780px){
  .buy-float{
    inset-block-start:50%; inset-block-end:auto; transform:translateY(-50%);
    max-width:min(178px,50vw);
    padding:11px 12px 11px 11px; gap:9px;
    border-radius:0 14px 14px 0;
  }
  .buy-float:hover,.buy-float:focus-visible{ transform:translateY(-50%) translateX(4px); }
  .buy-float-ic{ width:34px; height:34px; border-radius:10px; }
  .buy-float-ic svg{ width:19px; height:19px; }
  .buy-float-kicker{ font-size:10px; }
  .buy-float-name{ font-size:12.5px; }
}

/* ── "רכישה און-ליין דרכנו" — the tag over the travel block ─────────────
   The uncle's call: the white standing button is gone (two routes to the
   same page on one screen was noise, and on a phone it sat on the family
   in the photograph). Its promise moves to a small tag riding above the
   travel block that already lives on every page — one element, not two.
   Purely decorative for assistive tech: the block's own label says travel,
   and the tag is aria-hidden. Not a hit target; the block beneath is. */
.rail li.rail-has-tag{ position:relative; }
.rail-tag{
  position:absolute; z-index:1;
  inset-block-end:calc(100% + 6px); inset-inline:0;
  margin-inline:auto; width:max-content; max-width:100%;
  padding:4px 10px; border-radius:999px;
  background:var(--green-700); color:#fff;
  font-family:var(--font-body); font-weight:800;
  font-size:11px; letter-spacing:.02em; line-height:1.2;
  white-space:nowrap; pointer-events:none;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--ease-out) .45s, transform .4s var(--ease-spring) .45s;
}
.rail-on .rail-tag{ opacity:1; transform:none; }
/* the tag needs headroom above the row */
.rail{ padding-block-start:20px; }
@media (max-width:780px){
  .rail-tag{ font-size:10px; padding:3px 8px; inset-block-end:calc(100% + 4px); }
  .rail{ padding-block-start:16px; }
}
@media (prefers-reduced-motion:reduce){ .rail-tag{ opacity:1; transform:none; transition:none; } }

/* the tag sat in the rail's top padding, which the element screenshot
   clipped — give the rail genuine headroom and keep the tag inside it */
.rail{ padding-block-start:34px; overflow:visible; }
.rail ul{ overflow:visible; }
.rail-tag{ inset-block-end:calc(100% + 8px); }
@media (max-width:780px){ .rail{ padding-block-start:28px; } }

/* The tag was wider than its block and spilled sideways. It now anchors to
   the block's right edge (the reading edge) and may wrap to two short lines
   on a phone rather than run past the block. */
.rail-tag{
  inset-inline:auto 0; margin-inline:0; width:auto;
  max-width:min(100%, 150px);
  white-space:normal; text-align:center;
}
@media (max-width:780px){
  .rail-tag{ max-width:100%; font-size:9.5px; padding:3px 7px; }
}


/* =====================================================================
   THE FIVE STICKERS OVER THE RAIL BLOCKS.
   Owner, 2026-08-22/23.

   History, so nobody patches this a fifth time: the promise over the
   travel block started life as a floating pill. On a 390px phone a block
   is 72px wide and the pill was ~100px, so it hung over its neighbour and
   ran off the edge of the screen. Three CSS tweaks moved the overhang
   around without removing its cause. The cause was the shape: a pill
   sized by its own text can always outgrow the thing it belongs to.

   Now every one of the five blocks carries one. The owner wants five
   separate stickers, not a bar, so each sticker is sized by its own words
   — but it is CENTRED OVER ITS OWN BLOCK and capped at max-width:100% of
   that block. That one line is the whole fix: the sticker's width is
   bounded by the block it belongs to, so it is arithmetically incapable of
   covering a neighbour or reaching the screen edge, at any viewport, in
   any wording. Wording that does not fit on one line wraps to two and the
   type steps down. All five hang from the same line — 4px above their own
   block — so the row still reads as ordered even though no two stickers are
   the same size.

   They are real links now, not decoration — ≥24px tall (WCAG 2.5.8), an
   accessible name that starts with the visible words, and their own focus
   ring. The block underneath stays a separate link; the 4px gap means the
   two hit targets never overlap.

   --rail-h is raised to cover blocks + tag row, so the footer padding,
   the WhatsApp bubble and the accessibility button all clear the new row
   from the one token instead of five hand-set offsets.
   ===================================================================== */
:root{
  --rail-tag-h:26px;        /* the tallest a sticker gets — used for clearance */
  --rail-tag-gap:4px;       /* the air between a sticker and its block */
}
/* --rail-h is what the footer, the WhatsApp bubble and the accessibility
   button use to stay clear of the rail. It is declared on <body> higher up,
   so a :root value here would never reach them — redeclare it in the same
   place, grown by exactly the height of the new cap row. */
.rail-on body,
body:has(.rail){
  --rail-h:calc(64px + var(--rail-tag-gap) + var(--rail-tag-h) + 24px);
}
@media (max-width:780px){
  :root{ --rail-tag-h:32px; }   /* the two-line sticker on a phone — what the floats must clear */
}

.rail li{ position:relative; }                 /* every block can carry a cap */
.rail{ padding-block-start:calc(var(--rail-tag-h) + var(--rail-tag-gap) + 10px); }

.rail a.rail-tag{
  position:absolute; z-index:2;
  inset-inline:0; margin-inline:auto;          /* centred over its own block */
  width:max-content;
  max-width:100%;                              /* ...and never a pixel wider than it */
  inset-block-end:calc(100% + var(--rail-tag-gap));
  box-sizing:border-box;
  display:flex; flex-direction:row; gap:0 .3em;   /* .rail a is column on a phone; the sticker is not */
  align-items:center; justify-content:center;
  height:auto;                    /* .rail a is height:100% — that stretched the cap to the block's height */
  min-height:24px;                             /* WCAG 2.5.8 target minimum */
  pointer-events:auto;            /* the cap is a link now, not decoration */
  padding:4px 11px;
  border-radius:999px;
  background:var(--green-700); color:#fff;     /* #fff on #0E5C70 = 7.5:1, AA at any size */
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 8px 18px -12px rgba(6,20,26,.9);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  font-family:var(--font-body); font-weight:800;
  font-size:11.5px; line-height:1.16; letter-spacing:-.01em;
  text-align:center; text-decoration:none; text-wrap:balance;
  white-space:normal; overflow-wrap:anywhere;  /* last-resort guard: break rather than spill */
  opacity:0; transform:translateY(8px);
  transition:opacity .38s var(--ease-out), transform .48s var(--ease-spring),
             background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.rail a.rail-tag > span{ min-height:0; }       /* the rail's two-line label rule is not for the cap */

/* A finger is wider than 9.5px type. The sticker LOOKS the size it looks,
   but its tap target grows 10px upward and 4px out to each side — into empty
   air, never down into the block and never across to its neighbour — which
   brings it to 44x70, the size a thumb actually wants. */
.rail a.rail-tag::after{
  content:""; position:absolute; inset:-10px -4px -2px;
}

/* the stickers join the wave — each one lands just after its own block */
.rail-on .rail a.rail-tag{ opacity:1; transform:none; }
.rail-on .rail li:nth-child(1) a.rail-tag{ transition-delay:.30s; }
.rail-on .rail li:nth-child(2) a.rail-tag{ transition-delay:.375s; }
.rail-on .rail li:nth-child(3) a.rail-tag{ transition-delay:.45s; }
.rail-on .rail li:nth-child(4) a.rail-tag{ transition-delay:.525s; }
.rail-on .rail li:nth-child(5) a.rail-tag{ transition-delay:.60s; }

/* a cap and its block are one object: hovering either lifts both.

   Guarded to real-pointer devices, 2026-08-27 (owner: "I need to press the
   buttons twice until they work, on the phone"). A :hover rule that repaints
   a descendant of the tapped element is the textbook cause: iOS Safari sends
   a mouseover first, sees the page change, holds the click, and only the
   SECOND tap follows the link. Behind @media (hover:hover) these rules stop
   existing on touch, so the first tap navigates. :focus-visible stays
   outside the guard — keyboard users still get the lift and the ring. */
.rail a.rail-tag:focus-visible{
  transform:translateY(-4px); transition-delay:0s;
  background:#0B4B5C; border-color:rgba(255,255,255,.34); color:#fff;
}
@media (hover:hover){
  .rail li:hover a.rail-tag,
  .rail a.rail-tag:hover{
    transform:translateY(-4px); transition-delay:0s;
    background:#0B4B5C; border-color:rgba(255,255,255,.34); color:#fff;
  }
  .rail li:hover > a:not(.rail-tag){
    transform:translateY(-4px); border-color:rgba(0,207,231,.6);
  }
}
/* also kills the legacy 300ms double-tap-to-zoom wait on these targets */
.rail a{ touch-action:manipulation; }
/* a ring that survives both a light paper section and a dark photograph */
.rail a.rail-tag:focus-visible{
  outline:2px solid #fff; outline-offset:1px;
  box-shadow:0 0 0 4px rgba(11,18,34,.92), 0 8px 18px -12px rgba(6,20,26,.9);
}

/* "If they don't fit, make them smaller" — owner. On a phone a block is
   72px wide, so the sticker drops to 10px type and 7px of side padding and
   wraps onto a second line; below 360px it drops again to 9.5px, which is
   the floor I will not go under for legibility. Measured, not guessed: the
   longest line of the longest wording is 50.6px inside 57.6px of room. */
@media (max-width:780px){
  .rail a.rail-tag{ font-size:10px; padding:3px 7px; }
}
/* On a phone the sticker breaks where I tell it to, not where the browser
   feels like it — left to itself it split the word און-ליין in half at the
   hyphen. Each half of the wording is its own line, and because the sticker
   is then only as wide as its widest line it lands ~62px inside a 72px
   block: visibly a sticker sitting on the block, not a bar spanning it. */
@media (max-width:340px){
  /* the last stop before the words genuinely cannot fit: tighter, not smaller */
  .rail a.rail-tag{ padding:3px 4px; letter-spacing:-.02em; }
}
@media (max-width:520px){
  .rail a.rail-tag{
    flex-direction:column; gap:0;
    font-size:9.5px; padding:3px 6px; letter-spacing:-.015em;
    min-height:32px;              /* a one-line sticker matches a two-line one */
  }
}
@media (prefers-reduced-motion:reduce){
  .rail a.rail-tag{ opacity:1; transform:none; transition:none; }
  .rail li:hover a.rail-tag,
  .rail a.rail-tag:hover,
  .rail a.rail-tag:focus-visible,
  .rail li:hover > a:not(.rail-tag){ transform:none; }
}

/* The floating buttons clear the whole cluster, caps included — the
   accessibility button sat exactly where the pension cap now goes. */
.rail-on .access-float,
.rail-on .wa-float,
.rail-on .a11y-fab,
.rail-on .access-fab{
  inset-block-end:calc(var(--rail-h) + 22px + var(--consent-height));
}

/* OWNER 2026-08-23 (WhatsApp screenshot): "the logo frame should be a white
   CIRCLE so the logo reads clearly at the sides — on every page." The arc
   lockup is 454x398 (wider than tall); at 40px tall it was ~46px wide inside
   a 46px rounded square, so its sides kissed the edge. The tile is now a
   circle with real margin: the image's corners stay inside the radius on
   phone (52/34) and computer (58/38). Applies to all 16 pages — they share
   the same .lp-header .brand-tile. */
.lp-header .brand-tile{
  width:52px; height:52px; border-radius:50%;
  background:#fff; overflow:hidden;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.55);
}
.lp-header .brand-tile img{ height:34px; width:auto; }
@media (min-width:861px){
  .lp-header .brand-tile{ width:58px; height:58px; }
  .lp-header .brand-tile img{ height:38px; }
}

/* OWNER 2026-08-23: "make the WhatsApp logo green" — the header button is
   now a FILLED green, the twin of the red SOS button: red = emergency,
   green = chat, plain outline = call. #1A9E4F rather than WhatsApp's
   #25D366: white on the brand green measures 2.0:1, white on this one 3.9:1
   (non-text control floor is 3:1), and it still reads as WhatsApp green. The
   same fill sits on the light and dark header, so no theme-flip rule needed. */
.pill-wa,[data-header="light"] .pill-wa{
  --tel-bg:#157F45; --tel-line:rgba(255,255,255,.22);
  --tel-bg-h:#11673A; --tel-line-h:rgba(255,255,255,.4);
  color:#fff;
}
/* OWNER 2026-08-26: darkened from #1A9E4F to #157F45. The note above measured
   this button against the 3:1 NON-TEXT control floor — but the button carries
   the word "וואטסאפ", so it is text and owes 4.5:1. White on #1A9E4F is
   3.47:1 and failed; white on #157F45 is 5.06:1 and passes. It reads as the
   same green. tests/a11y.mjs never caught this because it only ran at 390px,
   where the label collapses to an icon. */
.pill-wa svg,[data-header="light"] .pill-wa svg,
.pill-wa:hover svg,[data-header="light"] .pill-wa:hover svg{ fill:#fff; }

/* =====================================================================
   בדיקת תיק ביטוח בריאות וחיים — portfolio-check.html (owner, 2026-08-23)
   One shared page reached from four entry points. Paper ground like the
   category pages; the form card is the existing .form-card; the service
   explanation sits beside it on a computer and above it on a phone.
   ===================================================================== */
.pc-hero{ background:var(--paper); color:var(--ink); padding-block:clamp(28px,4vh,48px) clamp(8px,2vh,16px); }
.pc-kicker{ font-size:12.5px; font-weight:700; letter-spacing:.085em; color:var(--green-700); margin-bottom:10px; }
.pc-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(26px,2rem + 1.2vw,42px); line-height:1.15; letter-spacing:-.02em; max-width:22ch; }
.pc-lead{ margin-top:14px; max-width:64ch; font-size:clamp(16px,1rem + .2vw,18px); line-height:1.6; color:var(--muted); }
.pc-body{ background:var(--paper); padding-block:clamp(16px,3vh,32px) clamp(48px,7vh,88px); }
.pc-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,3vw,48px); align-items:start; }
.pc-side h2{ font-size:19px; font-weight:800; margin-bottom:10px; }
.pc-side h2 + p{ color:var(--muted); line-height:1.6; }
.pc-side h2:not(:first-child){ margin-top:26px; }
.pc-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.pc-list li{ position:relative; padding-inline-start:26px; line-height:1.5; color:var(--ink); }
.pc-list li::before{
  content:""; position:absolute; inset-inline-start:0; top:.5em; width:16px; height:16px; border-radius:50%;
  background:var(--green-700);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/100% no-repeat, linear-gradient(#000 0 0);
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/100% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.pc-why{ margin-top:22px; padding:14px 16px; border-inline-start:3px solid var(--cyan); background:#fff; border-radius:var(--r); font-size:14px; line-height:1.55; color:var(--muted); }
.pc-form .pc-form-title{ font-size:24px; font-weight:800; }
.field-err{ min-height:0; font-size:13px; font-weight:600; color:#8E2A1E; line-height:1.4; }
.field-err:empty{ display:none; }
.field [aria-invalid="true"]{ border-color:#B3121B; box-shadow:inset 0 0 0 1px #B3121B; }
.consent-required{ color:var(--ink); }
.consent-check a{ color:var(--navy-900); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.pc-hp{ position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.pc-success{ text-align:center; padding:clamp(20px,4vw,40px) 0 8px; }
.pc-success:focus{ outline:none; }
.pc-success-title{ font-family:var(--font-display); font-size:clamp(22px,1.4rem + 1vw,30px); font-weight:800; color:var(--green-900, #0A3F4D); }
.pc-success p + p{ margin-top:10px; color:var(--muted); font-size:17px; line-height:1.55; }
.pc-success .btn{ margin-top:22px; }
@media (max-width:900px){
  .pc-grid{ grid-template-columns:1fr; }
  .pc-form{ order:-1; }          /* phone: the form first, the explanation under it */
}
@media (max-width:560px){
  .pc-form .form-row{ grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
}

/* Service block at the top of the health + life/mortgage pages (owner spec §2–3):
   headline, explanation, the eight checks, the report, the broker step, one button. */
.pc-promo{ background:var(--paper); padding-block:clamp(28px,4vh,44px) 0; }
.pc-promo-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(18px,3vw,40px); align-items:center;
}
.pc-promo-card h2{ font-family:var(--font-display); font-size:clamp(22px,1.3rem + 1vw,30px); font-weight:800; line-height:1.2; letter-spacing:-.015em; }
.pc-promo-card .pc-q{ margin-top:10px; font-size:17px; font-weight:700; color:var(--ink); }
.pc-promo-card p{ line-height:1.6; color:var(--muted); }
.pc-promo-card p + p{ margin-top:8px; }
.pc-promo-cols{ display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; margin:14px 0; }
.pc-promo-cols .pc-list{ gap:6px; }
.pc-promo-cols .pc-list li{ font-size:15px; }
.pc-promo-cta{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.pc-promo-cta .btn{ white-space:normal; max-width:320px; text-align:center; line-height:1.3; }
.pc-promo-cta small{ color:var(--muted); font-size:13px; }
@media (max-width:900px){
  .pc-promo-card{ grid-template-columns:1fr; }
  .pc-promo-cta{ align-items:stretch; }
  .pc-promo-cta .btn{ max-width:none; }
}
@media (max-width:560px){ .pc-promo-cols{ grid-template-columns:1fr; } }

.prose h3{ font-size:clamp(17px,1rem + .35vw,21px); margin-top:var(--s-6); margin-bottom:var(--s-2); font-weight:800; }

/* 2026-08-23, corrected 2026-08-27: the breadcrumb (contact, privacy, terms,
   faq, catalog, accessibility, thank-you, life-mortgage…) sat UNDER the fixed
   header at every viewport — the original "- 26px" formula assumed a
   .contact-bar in normal flow above <main> pushing things down first, but
   only pension-check.html/portfolio-check.html actually have that bar; every
   other page carrying .breadcrumb with no override rendered its text 25–31px
   inside the header pill (measured at 390/700/820/1440px). Three pages fixed
   this independently tonight with their own scoped "+ 10px" override before
   this shared rule was corrected to match — those page-level overrides are
   now redundant but harmless (same or near-same value, safe to leave). */
.breadcrumb{ padding-block-start:calc(var(--lp-header-h, 84px) + 10px); }

/* =====================================================================
   ביטוח נסיעות לחו״ל — owner brief 2026-08-23: "buy online THROUGH us, and
   we are with you abroad". Order: icon → h1 → slogan → explanation →
   heading → purchase cards → service line. The old page had an EMPTY
   .cat-body section (a fixed-height white hole) and the cards waited on a
   scroll-reveal — both gone; every height here follows the content.
   ===================================================================== */
.travel-intro{ background:var(--paper); padding-block:clamp(26px,4vh,44px) 0; }
.travel-lead{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,1.05rem + .7vw,26px); line-height:1.3; letter-spacing:-.015em;
  color:var(--navy-900); max-width:40ch;
}
.travel-text{ margin-top:12px; max-width:62ch; font-size:clamp(15.5px,1rem + .15vw,17.5px); line-height:1.65; color:var(--muted); }
.travel-buy{ padding-block:clamp(22px,3.5vh,40px) clamp(40px,5vw,72px); background:var(--paper); }
.travel-buy-h{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(18px,1rem + .5vw,22px); letter-spacing:-.01em; color:var(--ink);
  margin-bottom:14px;
}
.travel-buy .buy-card{ min-height:0; }
.travel-buy .buy-card-go{ font-size:14px; line-height:1.35; }
.travel-after{
  display:flex; align-items:center; gap:12px;
  margin-top:clamp(18px,2.4vw,28px); padding:14px 16px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  font-weight:700; font-size:15.5px; line-height:1.45; color:var(--navy-900);
}
.travel-after svg{ flex:none; width:22px; height:22px; color:var(--green-700); }
.travel-buy .quiet-link{ margin-top:14px; }
/* Phone: the card stays one tappable unit, but the "through us" line is
   visible text under the name — not a bare arrow with font-size:0. */
@media (max-width:640px){
  .travel-buy .buy-card{ grid-template-columns:auto minmax(0,1fr); row-gap:6px; padding:16px 16px 14px; }
  .travel-buy .buy-card-body{ gap:3px; }
  .travel-buy .buy-card-go{
    grid-column:1 / -1; margin-top:4px; padding-top:10px; border-top:1px solid var(--hairline);
    font-size:14px; gap:8px; min-height:32px;
  }
  .travel-buy .buy-card-go svg{ width:15px; height:15px; }
}

.cat-hero--travel .cat-moto{ max-width:none; text-wrap:balance; font-weight:600; }

/* Landing-page strengthening, owner 2026-08-23: the logo must live INSIDE the
   content ("I know who I gave my details to"), tighter rhythm, free/no-
   commitment proof under the h1, tag chips, tile grid, trust line by the CTA. */
.pc-hero--lp{ padding-block:clamp(18px,3vh,32px) clamp(6px,1.5vh,12px); }
.pc-brand{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; margin-bottom:16px; }
.pc-brand-tile{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; background:#fff;
  border:1px solid var(--border); box-shadow:0 1px 0 rgba(20,26,32,.04); margin-bottom:6px;
}
.pc-brand-tile img{ height:42px; width:auto; object-fit:contain; }
.pc-brand strong{ font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--navy-900); letter-spacing:-.01em; }
.pc-brand small{ font-size:13px; color:var(--muted); }
.pc-tags{ list-style:none; padding:0; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:6px; }
.pc-tags li{
  font-size:12.5px; font-weight:700; letter-spacing:.04em; color:var(--green-700);
  background:#fff; border:1px solid var(--border); border-radius:999px; padding:5px 11px;
}
.pc-free{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:10px; font-weight:800; font-size:15.5px; color:var(--green-700); }
.pc-free-sep{ color:var(--border); font-weight:400; }
.pc-lead--lp{ margin-top:14px; display:grid; gap:8px; }
.pc-lead--lp p{ max-width:62ch; font-size:clamp(15.5px,1rem + .15vw,17.5px); line-height:1.6; color:var(--muted); }
.pc-lead--lp strong{ color:var(--ink); font-weight:700; }
.pc-body{ padding-block:clamp(8px,2vh,20px) clamp(40px,6vh,72px); }
.pc-tiles{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pc-tiles li{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 12px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-md);
  font-size:14px; font-weight:600; line-height:1.35; color:var(--ink);
}
.pc-tiles li::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--cyan); }
.pc-tiles li:last-child{ grid-column:1 / -1; }
.pc-tiles li:nth-last-child(2):nth-child(odd){ grid-column:1 / -1; }
.pc-cta-short{ display:none; }
.pc-trust{ display:flex; align-items:flex-start; gap:9px; margin-top:12px; font-size:13.5px; line-height:1.45; color:var(--muted); }
.pc-trust svg{ flex:none; width:18px; height:18px; color:var(--green-700); margin-top:1px; }
/* Second .pc-trust row, added 2026-08-27 — the real 2-business-day response
   commitment from charter.html, next to the submit button on both check
   forms (pre-launch checklist: "response-time prompt near contact/chat").
   Same shield-row shape as the line above it; the link needs its own
   colour since .pc-trust's text is muted throughout. */
.pc-trust a{ color:var(--green-700); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:560px){
  .pc-cta-long{ display:none; } .pc-cta-short{ display:inline; }
  .pc-brand-tile{ width:58px; height:58px; } .pc-brand-tile img{ height:38px; }
}

.pc-side .pc-tiles + h2{ margin-top:24px; }
.pc-side h2 + p + .pc-list{ margin-top:10px; }

/* OWNER 2026-08-23 (travel screenshot): "tidy the top of every category page —
   the logo in its proper place, the back-to-home button top-LEFT, the three
   elements arranged and branded." Before: the icon box was full-width with the
   image hugging the right edge, and the back link sat centred above it.
   Now: back link pinned to the top-left corner of the band; icon centred on a
   faint glass disc; h1 and slogan centred beneath it. One rule, six pages. */
.cat-hero .wrap{ position:relative; }
.cat-hero .cat-back{
  position:absolute; top:calc(-1 * clamp(8px,1.5vh,18px)); inset-inline-end:0;   /* RTL: inline-end = physical LEFT */
  margin:0; min-height:40px; padding:0 2px;
  font-size:13.5px; color:#BFD6DE;
}
.cat-hero .cat-back svg{ width:14px; height:14px; }
.cat-hero .cat-ic{
  display:flex; align-items:center; justify-content:center;
  width:clamp(96px,12vw,140px); height:clamp(96px,12vw,140px); margin:clamp(10px,2vh,22px) auto 16px;
  border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cat-hero .cat-ic img{ height:66%; width:auto; max-width:72%; object-fit:contain; }
.cat-hero h1{ margin-top:0; }
@media (max-width:700px){
  .cat-hero{ padding-block:calc(var(--lp-header-h) + 30px) clamp(30px,5vh,48px); }
  .cat-hero .cat-back{ top:-18px; }
}

/* Review 2026-08-23: on the emergency page the fixed red .em-bar (phones)
   covered the accessibility and WhatsApp floats — the a11y widget was
   unreachable on the one page that most needs it. Lift both above the bar. */
@media (max-width:780px){
  body:has(.em-bar) .access-float,
  body:has(.em-bar) .wa-float{
    inset-block-end:calc(var(--rail-h) + var(--consent-height,0px) + 64px);
  }
  .em-bar a{ min-height:44px; }
}

/* Trip Guaranty — owner 2026-08-23: "ביטוח ביטול טיסה מכל סיבה" + an (i) that
   opens the explanation, the explainer video, and the exclusivity line. The card
   itself is one big link, so these live in a strip under it inside the same cell. */
.buy-cell{ display:flex; flex-direction:column; width:100%; background:#fff; }
.buy-cell .buy-card{ flex:1 1 auto; }
.buy-extra{ padding:0 clamp(16px,2.4vw,34px) 16px; display:grid; gap:8px; border-top:1px solid var(--hairline); padding-top:12px; }
.buy-info summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:36px;
  font-size:13.5px; font-weight:700; color:var(--navy-900);
}
.buy-info summary::-webkit-details-marker{ display:none; }
.buy-info summary:focus-visible{ outline:3px solid var(--navy-700); outline-offset:2px; border-radius:6px; }
/* The ⓘ badge — ONE class shared by this travel disclosure and every product
   row's .pi-btn, so the whole site has exactly one info icon. */
.info-i{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%;
  background:var(--navy-900); color:#fff; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:13px; font-weight:700;
}
.buy-info[open] .info-i,
.pi-btn[aria-expanded="true"] .info-i{ background:var(--cyan); color:var(--navy-900); }
.buy-info p{ margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--muted); background:var(--paper); border-radius:var(--r-md); padding:10px 12px; }
.buy-video{ display:inline-flex; align-items:center; gap:8px; min-height:36px; font-size:13.5px; font-weight:700; color:var(--green-700); }
.buy-video svg{ width:18px; height:18px; flex:none; }
.buy-exclusive{ font-size:12.5px; line-height:1.45; color:var(--muted); }
.buy-exclusive::before{ content:"★ "; color:var(--cyan); }
@media (max-width:900px){ .buy-extra{ padding-inline:16px; } }

/* In-page video dialog (travel page, Trip Guaranty explainer) */
.buy-video{ background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-align:start; }
.buy-video:focus-visible{ outline:3px solid var(--navy-700); outline-offset:3px; border-radius:6px; }
.video-dialog{ border:0; padding:0; background:transparent; max-width:min(960px,94vw); width:100%; }
.video-dialog::backdrop{ background:rgba(8,12,28,.82); backdrop-filter:blur(2px); }
.video-dialog-box{ background:var(--navy-900); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
.video-dialog-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px 10px 16px; color:#fff; }
.video-dialog-title{ font-family:var(--font-display); font-weight:700; font-size:15px; }
.video-dialog-close{
  flex:none; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; cursor:pointer;
}
.video-dialog-close svg{ width:20px; height:20px; }
.video-dialog-close:hover{ background:rgba(255,255,255,.18); }
.video-dialog-close:focus-visible{ outline:3px solid var(--cyan); outline-offset:2px; }
.video-dialog-frame{ aspect-ratio:16/9; background:#000; }
.video-dialog-frame iframe{ width:100%; height:100%; border:0; display:block; }

/* =====================================================================
   ABOUT PAGE — "מי אנחנו" (2026-08-23)
   Two chapters under the category hero: the agency's own account of
   itself on paper, then the people on navy. The people cards follow the
   owner's reference: a rounded photo panel on the reading edge, a white
   card with a slanted leading edge beside it. Names are navy — the
   reference used gold, but gold on white is ~2:1 and fails AA; the cyan
   rule under the name is the brand accent instead.
   ===================================================================== */
.about-story{ background:var(--paper); padding-block:clamp(44px,6vh,80px); }
.about-story .wrap{ max-width:860px; }
.about-story h2{
  margin:0 0 clamp(18px,2.4vw,28px); max-width:none; color:var(--navy-900);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(24px,1.2rem + 1.2vw,36px); letter-spacing:-.02em;
}
.about-points{
  margin:0; padding:0; list-style:none; counter-reset:pt;
  border-top:2px solid var(--navy-900);
}
.about-points li{
  counter-increment:pt; position:relative;
  padding:clamp(14px,1.6vw,20px) 0 clamp(14px,1.6vw,20px) 0;
  padding-inline-start:56px;
  border-bottom:1px solid var(--border);
  font-size:clamp(16px,.95rem + .3vw,19px); line-height:1.65; color:var(--ink);
}
.about-points li::before{
  content:"0" counter(pt); position:absolute; inset-inline-start:0; top:clamp(16px,1.7vw,22px);
  font-family:var(--font-display); font-weight:700; font-size:14px; letter-spacing:.04em;
  color:var(--green-700);
}
.about-points li:first-child{ font-weight:700; color:var(--navy-900); }

/* ---- the people ---- */
.team{ background:var(--navy-900); color:var(--on-navy); padding-block:clamp(48px,7vh,96px); }
.team h2{
  margin:0 0 clamp(24px,3vw,40px); max-width:none; color:#fff; text-align:center;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(24px,1.2rem + 1.4vw,40px); letter-spacing:-.02em;
}
.team-grid{ display:grid; gap:clamp(18px,2.4vw,28px); grid-template-columns:1fr; }
@media (min-width:860px){
  .team-grid{ grid-template-columns:1fr 1fr; }
  .person-lead{ grid-column:1 / -1; }
}

.person{
  --ph:220px; --skew:28px; --pr:24px;
  display:grid; grid-template-columns:40% minmax(0,1fr);
  min-height:var(--ph); align-items:stretch;
}
.person-photo{
  position:relative; border-radius:var(--pr); overflow:hidden;
  background:var(--navy-700); min-height:var(--ph);
}
.person-photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 20%;
}
/* No photo supplied yet (TODO OWNER): a quiet monogram, never a stock silhouette. */
.person-mono{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:clamp(56px,9vw,96px);
  color:var(--on-navy-soft); background:linear-gradient(160deg,var(--navy-700),var(--navy-800));
}
.person-card{
  position:relative; z-index:1; background:#fff; color:var(--ink);
  border-radius:var(--pr);
  margin-inline-start:calc(var(--skew) * -1);
  padding:clamp(18px,2.6vw,30px) clamp(18px,2.6vw,30px);
  padding-inline-start:calc(var(--skew) + clamp(18px,2.2vw,28px));
  /* the slanted leading edge: html is RTL, so the leading edge is the RIGHT
     side — clip-path has no logical form, the polygon is written for RTL. */
  clip-path:polygon(0 0, calc(100% - var(--skew)) 0, 100% 100%, 0 100%);
  display:flex; flex-direction:column; justify-content:center; min-width:0;
}
.person-name{
  margin:0; max-width:none; color:var(--navy-900);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(20px,1rem + 1vw,26px); letter-spacing:-.02em; line-height:1.2;
}
.person-name::after{
  content:""; display:block; width:36px; height:3px; margin-top:10px;
  background:var(--cyan); border-radius:2px;
}
.person-role{
  margin:10px 0 0; max-width:none; color:var(--muted);
  font-size:clamp(15px,.9rem + .2vw,17px); line-height:1.5; font-weight:600;
}

/* the lead card: the owner, larger, with his bio folded beneath the role */
.person-lead{ --ph:300px; --skew:36px; grid-template-columns:minmax(0,38%) minmax(0,1fr); }
.person-lead .person-photo img{ object-position:50% 15%; }
/* when the bio is open the row grows with the text; the photo must not
   grow with it, or the face balloons to fill a 1200px panel. Cap it. */
.person-lead .person-photo{ max-height:560px; }
@media (max-width:560px){ .person-lead .person-photo{ max-height:320px; } }
.person-lead .person-name{ font-size:clamp(24px,1.2rem + 1.4vw,34px); }
.bio{ margin-top:14px; }
.bio summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 2px; font-weight:700; font-size:15.5px; color:var(--green-700);
  border-radius:var(--r-xs);
}
.bio summary::-webkit-details-marker{ display:none; }
.bio summary::after{
  content:""; width:9px; height:9px; border:solid currentColor; border-width:0 0 2px 2px;
  transform:translateY(-2px) rotate(-45deg); transition:transform .2s var(--ease-out);
}
.bio[open] summary::after{ transform:translateY(2px) rotate(135deg); }
.bio summary:hover{ color:var(--navy-900); }
.bio summary:focus-visible{ outline:3px solid var(--navy-700); outline-offset:3px; }
.bio .bio-close{ display:none; }
.bio[open] .bio-open{ display:none; }
.bio[open] .bio-close{ display:inline; }
.bio-text{ margin-top:10px; border-top:1px solid var(--border); padding-top:14px; }
.bio-text p{ margin:0; max-width:68ch; font-size:clamp(15.5px,.9rem + .25vw,17.5px); line-height:1.65; color:var(--ink); }
.bio-text p + p{ margin-top:.8em; }

@media (max-width:560px){
  .person{ --ph:200px; --skew:22px; --pr:20px; grid-template-columns:42% minmax(0,1fr); }
  .person-lead{ --ph:240px; }
  .person-card{ padding:16px 14px; padding-inline-start:calc(var(--skew) + 14px); }
  .person-name::after{ margin-top:8px; }
}

/* OWNER 2026-08-23: a link under "מי אנחנו" on the home page to the team
   section of about.html. Reads as a quiet outlined pill on the dark story ground. */
.story-team-link{
  display:inline-flex; align-items:center; gap:10px; min-height:48px;
  margin-top:clamp(22px,3vw,34px); padding:0 20px 0 16px;
  border:1px solid rgba(255,255,255,.32); border-radius:999px;
  color:#fff; font-weight:700; font-size:15.5px; text-decoration:none;
  transition:background-color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.story-team-link svg{ width:18px; height:18px; transition:transform .3s var(--ease-out); }
.story-team-link:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.story-team-link:hover svg{ transform:translateX(-4px); }
.story-team-link:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

/* Any card with an open bio: cap the photo so it never stretches with the text (same fix as the lead card). */
.person:has(details[open]) .person-photo{ max-height:560px; align-self:flex-start; }
@media (max-width:560px){ .person:has(details[open]) .person-photo{ max-height:320px; } }

/* Sub-heading between the agency staff and the advisers (owner, 2026-08-23) */
.team-sub{ margin:clamp(40px,6vh,72px) 0 clamp(18px,2.4vw,28px); max-width:62ch; }
.team-sub h3{ font-family:var(--font-display); font-weight:800; color:#fff; font-size:clamp(22px,1.2rem + 1vw,30px); letter-spacing:-.015em; margin:0 0 10px; }
.team-sub p{ color:var(--on-navy-soft); font-size:clamp(15.5px,1rem + .2vw,18px); line-height:1.65; margin:0; }

/* Gender choice on the check forms (needed for the office's Excel template) */
.pc-radio{ border:0; padding:0; margin:0; min-width:0; }
.pc-radio legend{ font-size:12.5px; font-weight:700; letter-spacing:.085em; color:var(--muted); margin-bottom:7px; padding:0; }
.pc-radio-row{ display:flex; gap:10px; }
.pc-radio-row label{
  flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:8px; min-height:50px;
  border:1px solid var(--field-border); border-radius:var(--r); background:#fff; font-size:16px; cursor:pointer;
}
.pc-radio-row input{ width:18px; height:18px; accent-color:var(--green-700); margin:0; }
.pc-radio-row label:has(input:checked){ border-color:var(--navy-900); box-shadow:inset 0 0 0 1px var(--navy-900); }
.pc-radio-row input:focus-visible{ outline:3px solid var(--navy-700); outline-offset:2px; }

/* OWNER 2026-08-23: "on a computer the category buttons and the tags above them are
   very small". The rail was tuned for a phone and never grew. From 1024px up it gets
   real presence: taller row, bigger icons and labels, and a legible tag pill. */
@media (min-width:1024px){
  :root{ --rail-h:96px; --rail-tag-h:30px; --rail-tag-gap:12px; }
  .rail ul{ gap:14px; padding-inline:24px; }
  .rail a{ min-height:80px; padding:14px 16px; gap:12px; border-radius:14px; font-size:18px; }
  .rail-ic{ height:40px; }
  .rail-tag{ font-size:14px; padding:7px 16px; letter-spacing:0; }
}
@media (min-width:1400px){
  :root{ --rail-h:104px; }
  .rail a{ min-height:88px; font-size:19.5px; }
  .rail-ic{ height:44px; }
  .rail-tag{ font-size:15px; padding:8px 18px; }
}
/* the floats measure the rail from a body-level var — grow it with the desktop rail */
@media (min-width:1024px){
  .rail-on body,
  body:has(.rail){ --rail-h:calc(80px + var(--rail-tag-gap) + var(--rail-tag-h) + 24px); }
}
@media (min-width:1400px){
  .rail-on body,
  body:has(.rail){ --rail-h:calc(88px + var(--rail-tag-gap) + var(--rail-tag-h) + 24px); }
}

/* =====================================================================
   ⓘ מידע על המוצר — the product-information button and its inline panel
   (2026-08-23, to the owner's spec; reworked the same day to open INSIDE
   the row like the travel page, not in a separate window). The row reads,
   right to left: ⓘ · product name · WhatsApp. The ⓘ only explains; the
   WhatsApp icon still asks for a quote. Clicking ⓘ expands a quiet paper
   panel under the row — the same box the travel page opens.
   ===================================================================== */

/* Without the script the button can do nothing, so it is not shown at all. */
html:not([data-product-info]) .pi-btn{ display:none; }

/* wrap, so the panel can take the full row width under the name */
.cg-list li{ display:flex; align-items:flex-start; flex-wrap:wrap; }
.cg-list li .cg-link{ flex:1 1 0; min-width:0; }
.cg-invest-head{ flex-wrap:wrap; }
.cg-invest-head h2{ flex:1 1 0; min-width:0; }  /* only the panel wraps, never the heading */

/* A 44px finger target around the shared 22px .info-i badge, aligned with
   the FIRST line of the product name, not the middle of a name that wraps. */
.pi-btn{
  flex:none; width:44px; height:44px; margin-inline-start:-12px; margin-block-start:1px;
  display:grid; place-items:center;
  padding:0; border:0; background:none; cursor:pointer;
}

/* The inline panel — the same quiet paper box as the travel disclosure. */
.pi-panel{
  flex:1 1 100%; width:100%; min-width:0;
  margin:6px 0 8px;
  background:var(--paper); border-radius:var(--r-md);
  padding:14px 16px;
}
.pi-panel-title{
  margin:0 0 .55em; max-width:none;
  color:var(--navy-900); font-weight:800; font-size:15px; line-height:1.4;
}
.pi-body p{
  margin:0 0 .8em; max-width:none;
  font-size:14.5px; line-height:1.7; color:var(--ink);
}
.pi-body p:last-child{ margin-bottom:0; }
.pi-body strong{ color:var(--navy-900); font-weight:800; }
.pi-list{ margin:0 0 .8em; padding:0; list-style:none; }
.pi-list li{
  position:relative; padding-inline-start:18px; margin-bottom:.5em;
  font-size:14.5px; line-height:1.7; color:var(--ink);
  display:block;                          /* not the flex row rule above */
}
.pi-list li::before{
  content:""; position:absolute; inset-inline-start:2px; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--green-700);
}

.pi-cta{
  margin:14px 0 10px; max-width:none;
  padding-top:12px; border-top:1px solid var(--hairline);
  font-weight:700; color:var(--navy-900);
  font-size:14.5px; line-height:1.6;
}
.pi-wa{
  display:inline-flex; align-items:center; gap:9px; min-height:44px;
  padding:10px 20px; border-radius:var(--r-pill);
  background:var(--navy-900); border:1px solid var(--navy-900); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  text-decoration:none;
  transition:background-color .18s var(--ease-out);
}
.pi-wa:hover{ background:var(--navy-700); border-color:var(--navy-700); }
.pi-wa-ic{ width:19px; height:19px; fill:currentColor; flex:none; }

.pi-note{
  margin:14px 0 0; max-width:none;
  color:var(--quiet);                    /* 5.2:1 on paper — quiet, still AA */
  font-size:12.5px; line-height:1.6;
}

@media (max-width:640px){
  .pi-wa{ width:100%; justify-content:center; }
}

/* The "יש לכם כסף פנוי" block on /pension-finance.html — the owner's own
   words, sitting under the product list. Kept visually distinct from the
   sand-coloured .cat-cta below it: white card, cyan rule on the reading
   edge, text ranged right like the rest of the page. */
.cg-invest{
  max-width:680px; margin:clamp(22px,3vh,34px) auto 0;
  background:#fff; border:1px solid var(--border);
  border-inline-start:0; border-inline-end:4px solid var(--cyan);
  border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,30px);
}
.cg-invest-head{ display:flex; align-items:center; gap:6px; }
.cg-invest h2{
  margin:0; max-width:none; color:var(--navy-900);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(19px,1rem + .6vw,25px); letter-spacing:-.015em; line-height:1.3;
}
.cg-invest p{
  margin:12px 0 20px; max-width:60ch; color:var(--ink);
  font-size:clamp(15px,.88rem + .25vw,17px); line-height:1.7;
}
.cg-invest-wa{
  display:inline-flex; align-items:center; gap:9px; min-height:52px;
  padding:12px 22px; border-radius:var(--r-md);
  background:var(--navy-900); border:1px solid var(--navy-900); color:#fff;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(15px,.9rem + .2vw,17px); text-decoration:none;
  transition:background-color .18s var(--ease-out);
}
.cg-invest-wa:hover{ background:var(--navy-700); border-color:var(--navy-700); }
@media (max-width:520px){ .cg-invest-wa{ width:100%; justify-content:center; } }

/* OWNER 2026-08-23: the free-check promo was a tall card; he asked for a compact
   strip right under the category heading — 2–3 lines on a phone, one loud button.
   Replaces .pc-promo everywhere. */
.check-strip{ background:var(--paper); padding-block:clamp(18px,2.6vh,28px) 0; }
.check-strip-card{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(14px,2.4vw,32px);
  background:#fff; border:1px solid var(--border); border-inline-start:4px solid var(--cyan);
  border-radius:var(--r-lg); padding:clamp(14px,1.8vw,22px) clamp(16px,2.2vw,28px);
}
.check-strip-copy{ min-width:0; }
.check-strip-title{
  font-family:var(--font-display); font-weight:800; color:var(--navy-900);
  font-size:clamp(16.5px,1rem + .45vw,21px); line-height:1.3; letter-spacing:-.01em;
}
.check-strip-sub{ margin-top:4px; color:var(--muted); font-size:clamp(13.5px,.85rem + .2vw,15.5px); line-height:1.45; }
.check-strip-btn{ flex:none; white-space:nowrap; }
@media (max-width:720px){
  .check-strip-card{ flex-direction:column; align-items:stretch; gap:12px; text-align:center; }
  .check-strip-btn{ width:100%; }
}

/* OWNER 2026-08-23: phone tap targets under the 44px minimum. Grown WITHOUT moving
   anything: the rail sticker keeps its pill size and gains an invisible hit area
   ABOVE it (empty space — never over the category button below); the hero pause
   control and the footer e-mail links grow to 44px on their own. */
@media (pointer:coarse){
  /* the sticker already carries an invisible hit box (.rail a.rail-tag::after,
     inset:-10px -4px -2px) → ~70x44 effective. Nothing to change here. */
  .hero-pause{ width:44px; height:44px; }
  .foot-contact a[href^="mailto"], .foot-details a[href^="mailto"], footer a[href^="mailto"]{
    display:inline-flex; align-items:center; min-height:44px;
  }
}

/* Optional ID-photo upload on the two check forms (owner, 2026-08-23) */
.field-optional{ font-weight:600; color:var(--green-700); letter-spacing:0; }
.field input[type="file"]{
  min-height:50px; padding:11px 14px; border:1px dashed var(--field-border); border-radius:var(--r);
  background:#fff; color:var(--ink); font-family:inherit; font-size:15px; cursor:pointer;
}
.field input[type="file"]::file-selector-button{
  margin-inline-end:12px; padding:7px 14px; border:0; border-radius:999px;
  background:var(--navy-900); color:#fff; font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
}
.field input[type="file"]:focus-visible{ outline:3px solid var(--navy-700); outline-offset:2px; }
.field-hint{ font-size:12.5px; line-height:1.45; color:var(--muted); }

/* How many documents are attached to a check form (owner, 2026-08-24). */
.field-name{ font-size:13.5px; font-weight:700; color:var(--ink); margin-top:6px; }

/* =====================================================================
   THE CATEGORY BAND IS SIZED FOR A LAPTOP — the uncle, 2026-08-26.

   "On the travel page the blue logo at the start of the page is too big
   and the icons are too far down. Move the links up — everything stays
   proper, but the links have to be seen."

   Measured before touching anything, 1366x768, travel.html: the blue band
   was 430px of a 768px screen and the five blocks float at the foot, so a
   visitor landed on a blue wall with about 106px of the page's own words
   showing between the two. That is the complaint, in numbers.

   Nothing is redesigned and nothing is reordered: same elements, same
   order, same centred lockup, same glass disc, same reading order for a
   screen reader. The band was simply sized for a phone and never resized
   for a laptop — the disc was 140px and the padding was set in vh, which
   grows exactly where there is least room. From 1024px up the disc is
   88px, the air around it is tighter and the padding top and bottom is
   set in pixels. A phone keeps the band it has, which is why every line
   below is inside a min-width query.
   ===================================================================== */
@media (min-width:1024px){
  .cat-hero{
    padding-block:calc(var(--lp-header-h) + 8px) 24px;
  }
  .cat-hero .cat-ic{
    width:88px; height:88px;
    margin:0 auto 10px;
  }
  .cat-hero h1{
    font-size:clamp(32px,1.1rem + 1.6vw,42px);
  }
  .cat-hero .cat-moto{
    margin-top:8px;
    font-size:clamp(15.5px,.9rem + .25vw,17.5px);
  }
  /* the back link keeps its corner and its 40px target, just closer in */
  .cat-hero .cat-back{ top:-8px; }
}

/* =====================================================================
   THE FIVE BLOCKS ARE NO LONGER HIDDEN BEHIND THEIR OWN ANIMATION.

   Found while measuring the band above: with JavaScript switched off — or
   simply if js/script.js fails to load — the five links and their green
   stickers rendered at opacity:0 and the visitor saw nothing but the empty
   gutter. That is the exact thing the uncle is asking for ("the links have
   to be seen"), and js/script.js already states the site's contract in its
   own header: nothing may be hidden from a visitor without JavaScript.

   The rest of the site keeps that contract by putting the start state
   behind the .js class the script adds (`.js [data-reveal]{opacity:0}`).
   The rail was the one reveal written outside it. Same wave, same 75ms
   stagger, same timings — it is now opt-in rather than the default, so
   the links exist even when the animation never runs.
   ===================================================================== */
.rail li,
.rail a.rail-tag{ opacity:1; transform:none; }
html.js .rail li{ opacity:0; transform:translateY(26px) scale(.94); }
html.js .rail a.rail-tag{ opacity:0; transform:translateY(6px); }
html.js.rail-on .rail li,
html.js.rail-on .rail a.rail-tag{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html.js .rail li,
  html.js .rail a.rail-tag{ opacity:1; transform:none; transition:none; }
}

/* =====================================================================
   THE FORM SITS A WHOLE SCREEN DOWN ON A COMPUTER — the uncle, 2026-08-26.

   "רישום המייל יהיה למעלה יותר במחשב ואז מה תקבלו תהיה מקבילה למסגרת —
    זה בבדיקת תיק וקבלת הצעה חיים משכנתא. ואותו דבר לקטע של פנסיה ופיננסים."

   Measured before touching anything, 1366x768, portfolio-check.html:
     .pc-hero--lp  723px tall     ← the whole complaint lives in here
     .pc-form   top = 879px       → the frame starts below the first screen
     #cEmail    top = 1538px

   The two columns were ALREADY level with one another — .pc-grid has
   align-items:start and both children measured top=879 — so "מה תקבלו"
   was beside the frame, not above it. Nothing is reordered here and no
   markup is touched: same elements, same order, same reading order for a
   screen reader. What was actually pushing the frame down is the
   introduction above the grid:

     · the letterhead stacked a 64px disc ABOVE the agency name    130px
     · five short paragraphs stacked in a 567px column inside an
       1132px band — over half the band was empty air              348px

   On a computer both are paid for with width that was already sitting
   there unused: the letterhead goes horizontal and the introduction is
   set in two columns. Not one word is cut. A phone keeps the band it
   has, which is why every line below is inside a min-width query.

   Third line: the frame's own padding meant its title started ~37px
   lower than "במסגרת הבדיקה נבחן" beside it — a frame's-worth out of
   line, which is the one way the two blocks really were not parallel.
   The text column now carries the same top inset, so the two headings
   begin together.
   ===================================================================== */
@media (min-width:1024px){
  /* the letterhead: disc beside the name instead of above it (130px → ~58px) */
  .pc-hero--lp .pc-brand{
    display:grid; grid-template-columns:auto minmax(0,1fr);
    align-items:center; column-gap:14px; row-gap:2px; margin-bottom:14px;
  }
  .pc-hero--lp .pc-brand-tile{
    grid-row:1 / span 2; width:58px; height:58px; margin-bottom:0;
  }
  .pc-hero--lp .pc-brand-tile img{ height:38px; }

  /* the introduction reads across the band in two columns, same order */
  .pc-hero--lp .pc-lead--lp{
    display:block; max-width:none;
    columns:2; column-gap:clamp(28px,3vw,52px);
  }
  .pc-hero--lp .pc-lead--lp p{ max-width:none; margin:0 0 9px; break-inside:avoid; }
  .pc-hero--lp .pc-lead--lp p:last-child{ margin-bottom:0; }

  /* the text column starts on the frame's inside edge, not its outside one,
     so "במסגרת הבדיקה נבחן" and the frame's title begin on the same line.
     The value tracks .form-card's own padding expression + its 1px border. */
  .pc-body .pc-side{ padding-block-start:calc(clamp(24px,3vw,36px) + 1px); }
}

/* OWNER 2026-08-26, on a marked-up screenshot: "תמשיך את השורה הזו כאילו
   שתהיה שורה אחת ואז הלמטה יהיה 2 שורות — לא לקצר בכלום, פשוט תפרוס אותם."
   The intro was set to 40ch/62ch, which wrapped the lead onto two lines and
   the paragraph onto three inside a 1180px band that was half empty. Nothing
   is cut; the measures simply use the width that was already there, which
   lifts "לבחירת ביטוח ורכישה אונליין דרכנו" up the page. Desktop only. */
@media (min-width:1024px){
  .travel-intro .travel-lead{ max-width:none; text-wrap:balance; }
  .travel-intro .travel-text{ max-width:none; }
}