/*
Theme Name: אתגר מדעים
Theme URI: https://etgar-madaim.co.il
Author: Jonny Studio
Author URI: https://jonnystudio.co.il
Description: תבנית ייעודית לדף הנחיתה של אתגר מדעים — חוג אלקטרוניקה לילדים ונוער. כחול כשדה, אור חם כלד. RTL, בלי jQuery, בלי תלות חיצונית.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 7.0.2
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: etgar
Tags: rtl-language-support, custom-colors, one-column, accessibility-ready
*/

/* ==========================================================
   0 · fonts — self-hosted Google Sans, one family for the whole site.
   Variable 400..700, so a single file per subset covers every weight here.
   Two subsets only: hebrew renders the page, latin covers the phone number
   and the handful of Latin strings.
   ========================================================== */
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/google-sans-hebrew.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/google-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ==========================================================
   אתגר מדעים — כחול כשדה, אור חם כלד.
   ========================================================== */
:root{
  --navy:#0D1B2E; --navy-2:#132844;
  --blue:#1C63C4; --blue-deep:#124A9B; --blue-soft:#5B9AE6;
  --sky:#E9F1FB; --paper:#F6F9FD;
  --ink:#10182A; --ink-soft:#33405C; --muted:#5A6478; --line:#D6E2F2;
  --led:#FFB23F; --led-deep:#E08A12;   /* the warm light. small doses only */
  --teal:#1FA6A0;
  --r-red:#D8453A; --r-green:#3E9E63;

  /* one family, two roles. Google Sans is a text face, so headings carry their
     weight at 700 rather than relying on a display cut. */
  --f-display:"Google Sans",system-ui,sans-serif;
  --f-body:"Google Sans",system-ui,sans-serif;
  --s-1:.9375rem; --s0:1.0625rem; --s1:1.25rem; --s2:1.75rem;
  --s3:2.4rem; --s4:clamp(2.5rem,7.2vw,5.6rem);
  --sp-m:1.5rem; --sp-l:clamp(2.5rem,6vw,5rem); --sp-xl:clamp(4rem,10vw,9rem);
  --radius:6px; --pad-x:clamp(1.25rem,5.5vw,6rem); --hdr-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* Content is capped at 1360 and centred. The cap is applied as PADDING on the
     full-bleed sections rather than a max-width on a wrapper, so section
     backgrounds still run edge to edge while their content lines up. */
  --maxw:1360px;
}

/* the one rule that centres the whole site */
.hero,.trust,.sec,.b2b,.ft__in{
  padding-inline:max(var(--pad-x),(100% - var(--maxw)) / 2)
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
  font-size:var(--s0);line-height:1.72}
/* 700, not 400: Secular One was a single-weight display face that read as bold
   at its normal weight. Google Sans needs the weight asked for explicitly. */
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.08;margin:0}
/* Everything that previously used Secular One leaned on its single weight
   reading as bold. Google Sans is a text face, so those elements name the
   weight here rather than in fourteen separate rules. */
.brand,.hero__tag,.trust b,.proj__n,.proj__t,.proj__f,.safe__c,.cmp__note,
.step__c,.faq summary,.ft__stats b,.ft__card b{font-weight:700}
p{margin:0} a{color:inherit} img{display:block;max-inline-size:100%}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:4px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* skip link — first tab stop, so a keyboard user is not walked through the
   whole sticky nav before reaching content.
   Hidden ABOVE the viewport, not beside it: in RTL, inset-inline-start:-9999px
   resolves to the right edge and stretches the document's scroll width. */
.skip{position:absolute;inset-inline-start:0;inset-block-start:-6rem;z-index:200;
  padding:.85rem 1.25rem;background:var(--led);color:#3A2405;font-weight:800;
  border-radius:0 0 var(--radius) 0;text-decoration:none;
  transition:inset-block-start .2s var(--ease)}
.skip:focus{inset-block-start:0}
.vh{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}

/* ---- icons ---- */
.ic{inline-size:1em;block-size:1em;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic--led{color:var(--led-deep)}

/* ---- image slots ---- */
.slot{position:relative;overflow:hidden;border-radius:var(--radius);
  background:radial-gradient(120% 95% at 60% 36%,#1E3D66 0%,#132844 48%,#0B1626 100%);isolation:isolate}
.slot::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;
  background:radial-gradient(34% 28% at 58% 40%,rgba(255,192,105,.72),rgba(255,178,63,.18) 54%,transparent 76%)}
/* once real media is in the slot the gradient has done its job as the poster */
.slot:has(img,video)::after{content:none}
.slot--sq{aspect-ratio:1} .slot--tall{aspect-ratio:4/5} .slot--wide{aspect-ratio:16/10}
.halo{position:relative}
.halo::before{content:"";position:absolute;inset:-13% -9%;z-index:0;
  background:radial-gradient(circle at 52% 44%,rgba(255,178,63,.34),transparent 66%);
  filter:blur(46px);pointer-events:none}
.halo>*{position:relative;z-index:1}

/* ---- perf ---- */
/* project cards are self-contained: let the engine skip their layout/paint work
   without touching document height (unlike content-visibility). */
.proj__i,.syl__y,.cmp{contain:layout style paint}
/* real media drops straight into .slot — the gradient stays as the poster behind it */
.slot img,.slot video{position:absolute;inset:0;z-index:2;
  inline-size:100%;block-size:100%;object-fit:cover;display:block}

/* anchors must clear the sticky topbar */
/* Clear the sticky header when an anchor is jumped to. --nav-h is gone now that
   the nav lives on the header row; leaving it in the calc() made the whole
   expression invalid, which silently dropped the offset to zero and hid each
   section's heading under the bar. */
section[id]{scroll-margin-block-start:calc(var(--hdr-h) + 18px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- sticky header, with the section nav ON the same row ----
   A second bar under the header read as an unrelated strip and only appeared
   after scrolling. The jump links now sit inside the header itself, visible from
   the start. Below 1080px there is no room for eight links, so they are dropped
   entirely rather than pushed into their own bar — the page is linear and the
   mobile action bar already carries the two things that matter. */
.topbar{position:sticky;inset-block-start:0;z-index:70;
  background:rgba(246,249,253,.88);backdrop-filter:blur(14px) saturate(1.4);
  border-block-end:1px solid var(--line);
  transition:box-shadow .35s var(--ease),background .35s var(--ease)}
body.scrolled .topbar{box-shadow:0 6px 28px -18px rgba(13,27,46,.55)}

/* Three tracks: brand on the right, nav dead-centre, phone on the left.
   1fr auto 1fr — NOT auto 1fr auto. With auto side columns the middle track is
   centred in the leftover space, which is off-centre by however much the brand
   and the phone differ in width (10px here). Equal 1fr flanks put the nav on the
   header's true centre line. */
.hdr{display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(.6rem,1.4vw,1.4rem);
  min-block-size:var(--hdr-h);
  padding-block:.5rem;
  padding-inline:max(var(--pad-x),(100% - var(--maxw)) / 2)}
.brand{font-family:var(--f-display);font-size:1.24rem;letter-spacing:-.02em;
  display:flex;align-items:center;gap:.55rem;flex:none;color:var(--navy);
  justify-self:start;min-block-size:44px}
/* the mark needs more room than a line-height-sized icon: it is a logo, not a
   glyph. stroke-width is baked into the symbol, so scaling is safe. */
.brand__mark{inline-size:2.05em;block-size:2.05em;font-size:1em}
.brand b{font-weight:700;color:var(--blue)}
a.brand{text-decoration:none}
.sp{margin-inline-start:auto}

/* ---- header phone ----
   The header's only CTA now, so it is sized like one: a pill with a live-looking
   icon, the number at 1.12rem, and a warm underline that sweeps in from the
   inline edge on hover. The sweep animates transform on a pseudo-element, so it
   costs nothing per frame. */
.tel{position:relative;justify-self:end;display:inline-flex;align-items:center;gap:.55rem;
  font-weight:700;font-size:1.12rem;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;color:var(--navy);
  min-block-size:46px;padding:.4rem .95rem .4rem .7rem;border-radius:100px;
  background:rgba(28,99,196,.06);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.tel:hover{background:rgba(28,99,196,.11);transform:translateY(-1px)}
.tel__n{font-variant-numeric:tabular-nums}

/* the icon sits in its own disc and gets a slow ring, so the number reads as
   "callable" rather than as decoration */
.tel__ic{position:relative;display:grid;place-items:center;
  inline-size:30px;block-size:30px;border-radius:50%;flex:none;
  background:var(--blue);color:#fff}
.tel__ic .ic{font-size:.95rem}
.tel__ic::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  animation:tel-ring 3.4s var(--ease) infinite}
@keyframes tel-ring{
  0%{box-shadow:0 0 0 0 rgba(28,99,196,.5)}
  70%{box-shadow:0 0 0 11px rgba(28,99,196,0)}
  100%{box-shadow:0 0 0 0 rgba(28,99,196,0)}}

/* the underline sweep */
.tel::after{content:"";position:absolute;inset-block-end:.28rem;
  inset-inline:.95rem .7rem;block-size:2px;border-radius:2px;background:var(--led);
  transform:scaleX(0);transform-origin:var(--sweep-from,right);
  transition:transform .38s var(--ease)}
.tel:hover::after,.tel:focus-visible::after{transform:scaleX(1)}
@media(max-width:760px){
  .tel{font-size:1rem;padding-inline:.7rem .55rem}
  .tel__n{display:none}
  .tel::after{display:none}
}

.hdr__end{display:flex;align-items:center;gap:.5rem;justify-self:end}

.navlinks{display:none;align-items:center;justify-content:center;gap:.1rem;min-inline-size:0}
@media(min-width:1080px){.navlinks{display:flex}}

/* ==========================================================
   mobile navigation

   Below 1080px the inline links do not fit. They move behind a toggle instead of
   vanishing — a phone with no way to reach any section is worse than a slightly
   busier bar.

   The panel collapses with grid-template-rows: 0fr -> 1fr, so it animates to and
   from nothing without a hardcoded max-height that would clip a longer list.
   ========================================================== */
.burger{display:none;position:relative;
  inline-size:44px;block-size:44px;flex:none;
  border:0;border-radius:12px;cursor:pointer;padding:0;
  background:rgba(28,99,196,.08);
  transition:background .25s var(--ease)}
.burger:hover{background:rgba(28,99,196,.14)}
.burger__b{position:absolute;inset-inline:12px;block-size:2px;border-radius:2px;
  background:var(--navy);
  transition:transform .3s var(--ease),opacity .2s var(--ease)}
.burger__b:nth-child(1){inset-block-start:15px}
.burger__b:nth-child(2){inset-block-start:21px}
.burger__b:nth-child(3){inset-block-start:27px}
/* into an X */
.burger[aria-expanded="true"]{background:var(--navy)}
.burger[aria-expanded="true"] .burger__b{background:#fff}
.burger[aria-expanded="true"] .burger__b:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__b:nth-child(2){opacity:0}
.burger[aria-expanded="true"] .burger__b:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1079px){.burger{display:block}}

.navm{display:grid;grid-template-rows:0fr;
  overflow:hidden;background:var(--paper);
  transition:grid-template-rows .34s var(--ease)}
.navm[data-open="true"]{grid-template-rows:1fr;
  border-block-start:1px solid var(--line)}
.navm__in{min-block-size:0;overflow:hidden;
  display:grid;gap:.2rem;
  padding-inline:max(var(--pad-x),(100% - var(--maxw)) / 2)}
.navm[data-open="true"] .navm__in{padding-block:.85rem 1.1rem}
.navm a{display:flex;align-items:center;min-block-size:50px;
  padding-inline:.9rem;border-radius:12px;
  text-decoration:none;font-size:1.05rem;font-weight:700;color:var(--ink);
  transition:background .2s var(--ease),color .2s var(--ease)}
.navm a:hover,.navm a:focus-visible{background:rgba(28,99,196,.07);color:var(--blue)}
.navm a[aria-current="true"]{background:rgba(255,178,63,.2);color:var(--navy)}
.navm__cta{margin-block-start:.5rem;justify-content:center;
  background:linear-gradient(180deg,#FFCE7E,var(--led));color:#3A2405!important;
  box-shadow:0 8px 20px -10px rgba(255,178,63,.9)}
.navm__cta:hover{background:linear-gradient(180deg,#FFCE7E,var(--led-deep))}
@media(min-width:1080px){.navm{display:none}}
.navlinks a{position:relative;display:inline-flex;align-items:center;min-block-size:38px;
  text-decoration:none;font-size:.875rem;font-weight:600;color:var(--ink-soft);
  padding-inline:.62rem;border-radius:100px;white-space:nowrap;
  transition:color .25s var(--ease),background .25s var(--ease)}
.navlinks a:hover{color:var(--blue);background:rgba(28,99,196,.07)}
.navlinks a[aria-current="true"]{color:var(--navy);background:rgba(255,178,63,.24)}
.navlinks a[aria-current="true"]::after{content:"";position:absolute;
  inset-block-end:-2px;inset-inline:.62rem;block-size:2px;border-radius:2px;background:var(--led)}

/* ==========================================================
   buttons

   The CTA is the whole point of the page, so it earns real treatment:

   · pill radius — friendlier than a boxy corner, and it reads as current
   · a soft vertical gradient plus a lit top edge, so the surface has dimension
   · a shadow tinted with the button's own hue rather than grey
   · a light sweep that crosses the face on hover
   · a gradient ring that travels around the edge — slow and low-contrast at
     rest, faster and brighter on hover

   The ring is the interesting part. It is a conic-gradient rotated by a
   registered custom property (@property makes an angle animatable), masked to
   the 1.5px border box so only the outline shows. GPU-composited: no layout,
   no paint of the button's own content.
   ========================================================== */
@property --ring{syntax:'<angle>';inherits:false;initial-value:0deg}

.btn{position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-block-size:48px;
  font-family:var(--f-body);font-weight:700;font-size:var(--s-1);padding:.85rem 1.6rem;
  border:0;border-radius:999px;text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,#3A80E2 0%,var(--blue) 50%,var(--blue-deep) 100%);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,
             0 10px 24px -12px rgba(28,99,196,.75),
             0 2px 6px -2px rgba(13,27,46,.35);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),filter .32s var(--ease)}

/* the light sweep */
.btn::before{content:"";position:absolute;z-index:0;inset-block:0;inline-size:42%;
  inset-inline-start:-55%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);transition:inset-inline-start .65s var(--ease)}
.btn:hover::before{inset-inline-start:120%}

/* the travelling ring */
.btn::after{content:"";position:absolute;z-index:1;inset:0;border-radius:inherit;
  padding:1.5px;pointer-events:none;opacity:.5;
  background:conic-gradient(from var(--ring),
    transparent 0deg,rgba(255,255,255,.9) 42deg,rgba(255,255,255,.15) 86deg,transparent 150deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:ring-travel 5s linear infinite;
  transition:opacity .32s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{opacity:1;animation-duration:1.9s}
@keyframes ring-travel{to{--ring:360deg}}

/* the label has to sit above both effects */
.btn>*{position:relative;z-index:2}

.btn:hover{transform:translateY(-2px);filter:saturate(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.34) inset,
             0 18px 38px -14px rgba(28,99,196,.9),
             0 3px 9px -3px rgba(13,27,46,.4)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .ic{font-size:1.2rem;position:relative;z-index:2}

.btn--led{background:linear-gradient(180deg,#FFCE7E 0%,var(--led) 48%,var(--led-deep) 100%);
  color:#3A2405;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 10px 26px -12px rgba(255,178,63,.9),
             0 2px 6px -2px rgba(13,27,46,.3)}
.btn--led:hover{color:#2A1A03;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,
             0 20px 42px -14px rgba(255,178,63,1),
             0 3px 9px -3px rgba(13,27,46,.35)}
/* warm ring on the warm button, or the white reads as a grey smear */
.btn--led::after{background:conic-gradient(from var(--ring),
  transparent 0deg,rgba(255,255,255,.95) 42deg,rgba(255,232,190,.3) 86deg,transparent 150deg,
  transparent 360deg)}

.btn--ghost{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--line)}
.btn--ghost:hover{background:rgba(28,99,196,.05);color:var(--blue);
  box-shadow:inset 0 0 0 1.5px transparent}
.btn--ghost::before{display:none}
/* the ghost button's ring IS its border: invisible at rest, travelling on hover */
.btn--ghost::after{opacity:0;
  background:conic-gradient(from var(--ring),
    transparent 0deg,var(--blue) 40deg,var(--blue-soft) 90deg,transparent 160deg,
    transparent 360deg)}
.btn--ghost:hover::after,.btn--ghost:focus-visible::after{opacity:1}

/* On DARK sections the ghost outline has to be light.
   :not(.hero--light) matters — the light hero variant is still a .hero, and
   without the exclusion its ghost button renders pale text on a pale background
   and disappears. */
.hero:not(.hero--light) .btn--ghost,.lead .btn--ghost,.inv .btn--ghost{color:#EAF1FA;
  box-shadow:inset 0 0 0 1.5px rgba(234,241,250,.3)}
.hero:not(.hero--light) .btn--ghost:hover,.lead .btn--ghost:hover,.inv .btn--ghost:hover{
  color:#fff;background:rgba(234,241,250,.08);box-shadow:inset 0 0 0 1.5px transparent}
.hero:not(.hero--light) .btn--ghost::after,.lead .btn--ghost::after,.inv .btn--ghost::after{
  background:conic-gradient(from var(--ring),
    transparent 0deg,#fff 40deg,rgba(255,178,63,.8) 92deg,transparent 165deg,
    transparent 360deg)}

.btn--lg{font-size:var(--s0);padding:1.1rem 2rem;min-block-size:56px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.62;cursor:progress;transform:none}
.btn[aria-disabled="true"]::before,.btn[aria-disabled="true"]::after{display:none}

/* Reduced motion: keep the ring as a static edge highlight rather than removing
   it — the affordance stays, the movement goes. */
@media (prefers-reduced-motion:reduce){
  .btn::after{animation:none;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent)}
  .btn::before{display:none}
}
html[data-a11y-stop="1"] .btn::after{animation:none}

/* arrow that nudges on hover — the direction is inline-aware, so it points the
   correct way in RTL without a second rule */
.btn__arrow{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(.22em)}
[dir="rtl"] .btn:hover .btn__arrow{transform:translateX(-.22em)}

/* ---- "scroll down" affordance ----
   Replaces a literal ↓ character, which fell back to a system font and sat on the
   baseline like a stray glyph. A real chevron drifts gently at rest and settles
   lower on hover. */
.btn__down{font-size:1.15em;transition:transform .35s var(--ease)}
.btn--down .btn__down{animation:nudge-down 2.4s var(--ease) infinite}
.btn--down:hover .btn__down{animation:none;transform:translateY(3px)}
@keyframes nudge-down{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}}

.inline-down{display:inline-flex;align-items:center;gap:.18rem;
  text-decoration:none;border-block-end:1.5px solid transparent;
  transition:border-color .3s var(--ease)}
.inline-down:hover{border-block-end-color:currentColor}
.inline-down .btn__down{font-size:1.05em;animation:nudge-down 2.4s var(--ease) infinite}
.inline-down:hover .btn__down{animation:none;transform:translateY(2px)}
html[data-a11y-stop="1"] .btn__down{animation:none}

.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.16em;color:var(--blue);
  display:flex;align-items:center;gap:.55rem;margin-block-end:1.05rem}
.eyebrow .ic{font-size:1.05rem}

/* ---- hero ----
   The hero is dark on purpose. Every photograph in the media set is a warm LED
   on a deep navy field; a pale hero turned each image into a bright rectangle
   floating on white, which is what made the section read as bare and unfinished.
   On navy the images stop being cut-outs and become part of the page, and the
   amber CTA is the brightest thing on the screen — which is where the click is. */
.hero{position:relative;overflow:clip;isolation:isolate;
  padding-block:calc(var(--sp-xl)*.92) var(--sp-xl);
  display:grid;grid-template-columns:minmax(0,6.6fr) minmax(0,5fr);
  gap:clamp(2rem,4.5vw,4.5rem);align-items:center;
  background:var(--navy);color:#EAF1FA}

/* depth, in three cheap layers: a cool wash, a warm pool behind the media, and a
   faint circuit grid. All CSS — no image requests, nothing to lazy-load. */
.hero::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:
    radial-gradient(90% 120% at 78% 18%,rgba(28,99,196,.42),transparent 58%),
    radial-gradient(65% 85% at 12% 92%,rgba(255,178,63,.13),transparent 62%),
    linear-gradient(180deg,#0E1E33 0%,#0D1B2E 62%,#0B1728 100%)}
.hero::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(91,154,230,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,154,230,.075) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,transparent 72%);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%,#000 0%,transparent 72%)}

.hero__t{position:relative;z-index:2}

.hero h1{font-size:clamp(2.4rem,6vw,4.9rem);color:#fff;text-wrap:balance}
/* Gradient on the second line only — across both lines it washes out the first.
   inline-block + a little block padding stops background-clip:text from shaving
   the glyph edges at this line-height. */
.hero h1 span{display:inline-block;padding-block-end:.08em;
  background:linear-gradient(100deg,#fff 0%,#E2EDFA 55%,#BBD6F5 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.hero__meta{margin-block-start:1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  font-size:.9rem;font-weight:700;color:#9EC0EC}
.hero__meta .ic{font-size:1.1rem;color:var(--blue-soft)}
.hero__meta i{inline-size:4px;block-size:4px;border-radius:50%;
  background:rgba(158,192,236,.5);margin-inline:.35rem}
/* 15% down from clamp(1.4rem, 2.6vw, 2.1rem) — the H1 now carries the section on
   its own, so the tagline steps back rather than competing with it */
.hero__tag{margin-block-start:1.6rem;font-family:var(--f-display);letter-spacing:-.022em;
  font-size:clamp(1.19rem,2.21vw,1.79rem);line-height:1.24;max-inline-size:28ch;color:#EAF1FA}
.hero__tag em{font-style:normal;color:var(--led)}
.hero__sub{margin-block-start:1.05rem;max-inline-size:38ch;font-size:var(--s1);
  color:#B9C9DE;line-height:1.62}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:2.1rem}
.hero__note{margin-block-start:1.6rem;font-size:var(--s-1);color:#9FB3CC;
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.hero__note a{color:var(--led);font-weight:700}
/* the blinking .dot indicator was removed from the markup — a pulsing light with
   nothing behind it is decoration pretending to be status */

.hero__m{position:relative;z-index:1}
.hero__m .slot{border-radius:14px;box-shadow:0 40px 90px -40px rgba(0,0,0,.75)}
/* a hairline highlight so the panel has an edge against the navy */
.hero__m .slot::before{content:"";position:absolute;z-index:3;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(234,241,250,.16);pointer-events:none}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;padding-block:calc(var(--sp-l)+.5rem) var(--sp-l)}
  .hero__m{order:-1}
  .hero__m .slot{aspect-ratio:16/11}
  .hero h1{font-size:clamp(2.1rem,8.4vw,3.2rem)}
}

/* ==========================================================
   HERO VARIANT B — light

   On a pale field the dark video panel is the only dark object on screen, so it
   stops reading as "a picture beside some text" and becomes the thing the eye
   lands on. The colour has to move from the background into the type, and the
   panel has to be given real weight or the section goes flat.
   ========================================================== */
.hero--light{background:var(--paper);color:var(--ink)}
/* the dark variant's three background layers do not apply here */
.hero--light::before{
  background:
    radial-gradient(74% 105% at 82% 6%,rgba(28,99,196,.09),transparent 60%),
    radial-gradient(56% 82% at 6% 96%,rgba(255,178,63,.1),transparent 62%),
    linear-gradient(180deg,#FBFCFE 0%,var(--paper) 55%,#EFF4FB 100%)}
.hero--light::after{
  background-image:
    linear-gradient(rgba(28,99,196,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,99,196,.06) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(115% 85% at 72% 8%,#000 0%,transparent 70%);
  -webkit-mask-image:radial-gradient(115% 85% at 72% 8%,#000 0%,transparent 70%);
  animation:grid-drift 26s linear infinite}

.hero--light h1{color:var(--navy)}
/* the gradient carries the colour the dark background used to */
.hero--light h1 span{
  background:linear-gradient(100deg,var(--blue) 0%,#2E76DA 48%,var(--blue-soft) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.hero--light .hero__meta{color:var(--blue)}
.hero--light .hero__meta .ic{color:var(--blue)}
.hero--light .hero__meta i{background:var(--line)}
.hero--light .hero__tag{color:var(--ink)}
.hero--light .hero__tag em{color:var(--led-deep)}
.hero--light .hero__sub{color:var(--ink-soft)}
.hero--light .hero__note{color:var(--muted)}
.hero--light .hero__note a{color:var(--blue)}

/* the panel earns its place: deeper shadow, warm halo behind it */
.hero--light .hero__m .slot{
  box-shadow:0 48px 90px -44px rgba(13,27,46,.55),0 8px 24px -14px rgba(13,27,46,.24)}
.hero--light .hero__m .slot::before{box-shadow:inset 0 0 0 1px rgba(13,27,46,.1)}
.hero--light .halo::before{
  background:radial-gradient(circle at 52% 46%,rgba(255,178,63,.42),transparent 62%);
  filter:blur(52px)}

/* ==========================================================
   hero media shapes

   Four cuts of the same slot. The shape is a setting; ?shape= previews the
   others. Each one keeps the 4:5 proportion except the circle, which has to be
   square for the ring to sit true around it.
   ========================================================== */

/* panel — a plain rounded rectangle */
.hero__m--panel .slot{border-radius:20px}

/* arch — fully rounded at the top, square-ish at the base. Reads as editorial
   rather than as a cropped photo, and the round top echoes the orbit. */
.hero__m--arch .slot{border-radius:min(50%,230px) min(50%,230px) 26px 26px}

/* hexagon — the chip/PCB silhouette. clip-path rather than border-radius, so
   there is no border to draw; the hairline inset is dropped because a stroke
   cannot follow a clip.
   Shoulders at 18%/82%, not 25%/75%: on a 4:5 box the steeper cut turns the
   hexagon into a diamond. */
.hero__m--hex .slot{border-radius:0;box-shadow:none;
  clip-path:polygon(50% 0%,100% 18%,100% 82%,50% 100%,0% 82%,0% 18%)}
.hero__m--hex .slot::before{content:none}
/* a clipped box casts no box-shadow, so the depth has to come from a filter */
.hero__m--hex{filter:drop-shadow(0 30px 50px rgba(13,27,46,.4))}

/* circle + orbit — the media becomes the brand mark, video where the nucleus is */
.hero__m--circle{padding-block:8%}
.hero__m--circle .slot{aspect-ratio:1;border-radius:50%;z-index:2}
/* z-index 0 puts the ring BEHIND the circle, so the media occludes the middle of
   the ellipse and only the side arcs show. Drawn on top it was a blue line ruled
   straight across the picture. */
.hero__m--circle .orbit{position:absolute;z-index:0;
  inset:-30%;inline-size:160%;block-size:160%;
  overflow:visible;pointer-events:none}
/* a very slow tilt drift, so the ring feels like an orbit rather than a frame */
@media (prefers-reduced-motion:no-preference){
  .hero__m--circle .orbit{animation:orbit-tilt 22s var(--ease) infinite}
}
@keyframes orbit-tilt{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(6deg)}}
html[data-a11y-stop="1"] .hero__m--circle .orbit{animation:none}
/* the circle wants a tighter halo or the glow spills past the ring */
.hero--light .hero__m--circle.halo::before{inset:-6% -4%;filter:blur(44px)}

@media(max-width:900px){
  .hero__m--arch .slot{border-radius:min(50%,150px) min(50%,150px) 20px 20px}
  .hero__m--circle{padding-block:2%}
  .hero__m--circle .slot{aspect-ratio:1}
  /* The orbit is sized relative to the media, and on one column the media is the
     full width — so 160% became 1.6x the viewport and all that showed was a
     sliver. 128% keeps the arcs visible beside the circle instead of off-screen. */
  .hero__m--circle .orbit{inset:-14%;inline-size:128%;block-size:128%}
}
@media (prefers-reduced-motion:reduce){.hero--light::after{animation:none}}
html[data-a11y-stop="1"] .hero--light::after{animation:none}

/* ==========================================================
   HERO VARIANT C — cinematic

   Footage as the section background, type centred over it.

   Two non-negotiables: the video must be a WIDE cut (the portrait original loses
   ~70% of its height to cover at this aspect), and the scrim has to be weighted
   toward the centre where the words are — a flat dark overlay would mute the
   footage everywhere and still leave the edges of the text fighting it.
   ========================================================== */
.hero--cinema{position:relative;isolation:isolate;overflow:clip;
  min-block-size:min(92vh,860px);
  /* ONE column. .hero sets a 6.6fr/5fr two-column grid for the side-panel
     layouts; inheriting it here dropped the text into the first column, which
     looks centred-ish but is 295px off the section's centre line. */
  display:grid;grid-template-columns:1fr;place-items:center;
  padding-block:calc(var(--sp-xl)*.9);
  background:var(--navy);color:#fff;text-align:center}
.hero--cinema::before,.hero--cinema::after{content:none}

/* The poster also rides on the container as a background image, so when the video
   is suppressed (reduced motion, or autoplay refused) the frame is still there
   instead of a flat navy rectangle. */
.cine__bg{position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:var(--navy) center 42%/cover no-repeat}
.cine__bg video,.cine__bg img{
  inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 42%;
  display:block}

/* Centre-weighted scrim: strongest behind the text block, easing out toward the
   frame edges so the footage is still legible as footage. */
.cine__scrim{position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    /* the pool the text sits in */
    radial-gradient(64% 58% at 50% 50%,rgba(11,23,40,.92),rgba(11,23,40,.7) 52%,rgba(11,23,40,.38) 76%,rgba(11,23,40,.2) 100%),
    /* the bench props are the brightest things in the wide cut and sit low in the
       frame, so the bottom carries more weight than the top */
    linear-gradient(180deg,rgba(11,23,40,.7) 0%,rgba(11,23,40,.3) 28%,rgba(11,23,40,.52) 66%,rgba(11,23,40,.92) 100%),
    /* a flat floor so no single highlight can punch through the type */
    linear-gradient(rgba(11,23,40,.22),rgba(11,23,40,.22))}

.cine__t{position:relative;z-index:1;
  max-inline-size:60ch;margin-inline:auto;
  padding-inline:max(var(--pad-x),(100% - var(--maxw)) / 2)}
/* stepped down from the other variants — over moving footage a 4.9rem headline
   competes with the picture instead of sitting inside it */
.hero--cinema h1{font-size:clamp(2.1rem,4.7vw,3.7rem);color:#fff;text-wrap:balance;
  text-shadow:0 2px 28px rgba(0,0,0,.55)}
.hero--cinema h1 span{display:inline-block;padding-block-end:.08em;
  background:linear-gradient(100deg,#fff 0%,#E2EDFA 55%,#BBD6F5 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.hero--cinema .hero__tag{margin-block-start:1.2rem;margin-inline:auto;
  font-size:clamp(1.05rem,1.85vw,1.5rem);max-inline-size:30ch;color:#EAF1FA;
  text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero--cinema .hero__sub{margin-block-start:.9rem;margin-inline:auto;
  max-inline-size:44ch;font-size:var(--s0);color:#C7D6E8;
  text-shadow:0 1px 16px rgba(0,0,0,.5)}
.hero--cinema .hero__meta{margin-block-start:1.35rem;justify-content:center;color:#BBD6F5}
.hero--cinema .hero__meta .ic{color:var(--led)}
.hero--cinema .hero__meta i{background:rgba(187,214,245,.5)}
.hero--cinema .hero__cta{margin-block-start:1.9rem;justify-content:center}
.hero--cinema .hero__note{margin-block-start:1.4rem;justify-content:center;color:#C7D6E8}
.hero--cinema .hero__note a{color:var(--led)}

@media(max-width:760px){
  .hero--cinema{min-block-size:auto;padding-block:calc(var(--sp-xl)*.75)}
  /* on a phone the wide cut has nothing left to crop, so bias toward the subject */
  .cine__bg video,.cine__bg img{object-position:50% 38%}
}
/* Reduced motion: hold the poster instead of playing the footage. */
@media (prefers-reduced-motion:reduce){.cine__bg video{display:none}}

/* ==========================================================
   trust strip

   Four centred cards. Each one lifts on hover, its icon disc fills, and an amber
   line grows under the figure. The two numeric values count up once when the
   strip first enters the viewport — the movement points at the number instead of
   decorating around it.

   The whole strip sits on navy so the figures read as a statement rather than as
   a caption under the hero.
   ========================================================== */
.trust{position:relative;overflow:clip;isolation:isolate;
  padding-block:calc(var(--sp-l)*1.05);
  background:var(--navy);color:#EAF1FA;border-block-end:1px solid rgba(234,241,250,.1)}
.trust::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 130% at 50% -10%,rgba(28,99,196,.34),transparent 62%),
    radial-gradient(45% 90% at 88% 110%,rgba(255,178,63,.1),transparent 65%)}
/* the same circuit grid as the hero, drifting slowly sideways */
.trust::after{content:"";position:absolute;z-index:-1;inset:-2px;pointer-events:none;
  background-image:
    linear-gradient(rgba(91,154,230,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,154,230,.07) 1px,transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(90% 130% at 50% 0%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 130% at 50% 0%,#000,transparent 78%);
  animation:grid-drift 26s linear infinite}
@keyframes grid-drift{to{background-position:40px 40px}}

.trust__g{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.75rem,1.8vw,1.75rem)}

.trust__i{position:relative;display:grid;justify-items:center;text-align:center;
  gap:.3rem;padding:1.6rem .9rem 1.5rem;border-radius:16px;
  background:rgba(234,241,250,.045);
  border:1px solid rgba(234,241,250,.1);
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  /* stagger the reveal so the four land in sequence */
  transition-delay:calc(var(--i,0) * 60ms)}
.trust__i:hover{transform:translateY(-6px);background:rgba(234,241,250,.075);
  border-color:rgba(255,178,63,.4)}

.trust__ic{display:grid;place-items:center;
  inline-size:52px;block-size:52px;border-radius:14px;margin-block-end:.45rem;
  background:rgba(28,99,196,.3);color:var(--blue-soft);
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.trust__ic .ic{font-size:1.6rem}
.trust__i:hover .trust__ic{background:var(--led);color:#3A2405;transform:scale(1.08) rotate(-4deg)}

.trust__v{position:relative;display:block;font-family:var(--f-display);font-weight:700;
  font-size:clamp(2.2rem,3.6vw,3.4rem);letter-spacing:-.04em;line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;padding-block-end:.34rem}
/* the amber rule under the figure grows on hover */
/* Centred with auto margins, NOT inset-inline-start:50% + translate:-50%.
   That combination mixed a logical offset with a physical translate: in RTL,
   inset-inline-start resolves to `right`, so the translate pushed the rule a full
   width further off-centre instead of back onto it. inset-inline:0 + margin auto
   centres correctly in either direction. */
.trust__v::after{content:"";position:absolute;inset-block-end:0;inset-inline:0;
  margin-inline:auto;inline-size:26px;block-size:3px;border-radius:3px;background:var(--led);
  transition:inline-size .4s var(--ease)}
.trust__i:hover .trust__v::after{inline-size:56px}

.trust__l{font-size:1rem;font-weight:700;color:#D3E0F0}
.trust__n{font-size:.8rem;color:#8FA6C2}

@media(max-width:860px){
  .trust__g{grid-template-columns:1fr 1fr;gap:.75rem}
  .trust__i{padding:1.25rem .7rem 1.15rem}
  .trust__ic{inline-size:44px;block-size:44px;border-radius:12px}
  .trust__ic .ic{font-size:1.35rem}
}
@media (prefers-reduced-motion:reduce){.trust::after{animation:none}}
html[data-a11y-stop="1"] .trust::after{animation:none}

/* ==========================================================
   ambient background — the "current in the walls" layer

   Three ingredients, all cheap:
     · a faint circuit grid that drifts one cell over ~26s
     · two soft colour pools that breathe on a long, offset cycle
     · on dark sections, a thin highlight travelling along the top edge like a
       charge moving through a trace

   Everything animates background-position, transform or opacity only — no
   layout, no repaint of content, no JS. All of it stops under
   prefers-reduced-motion and under the accessibility panel's motion switch, and
   all of it is pointer-events:none so nothing here can intercept a click.
   ========================================================== */
@keyframes fx-breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  50%{transform:translate3d(2.5%,-2%,0) scale(1.12);opacity:1}}
@keyframes fx-trace{
  0%{transform:translateX(-40%);opacity:0}
  12%,72%{opacity:1}
  100%{transform:translateX(240%);opacity:0}}

/* light sections: a barely-there grid plus one drifting blue pool */
.fx{position:relative;overflow-x:clip;isolation:isolate}
.fx::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(28,99,196,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(28,99,196,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 75%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000,transparent 75%);
  animation:grid-drift 26s linear infinite}
.fx::after{content:"";position:absolute;z-index:-3;pointer-events:none;
  inline-size:52vw;block-size:52vw;max-inline-size:640px;max-block-size:640px;
  inset-block-start:-14%;inset-inline-end:-10%;border-radius:50%;
  background:radial-gradient(circle,rgba(28,99,196,.1),transparent 66%);
  animation:fx-breathe 19s var(--ease) infinite}

/* dark sections: warmer pool instead of the cool one */
.fx--dark::after{background:radial-gradient(circle,rgba(255,178,63,.11),transparent 66%);
  animation-duration:23s}

/* The travelling highlight is its own element rather than a pseudo-element:
   sections like .safe and .lead already spend both of theirs on their glows. */
.trace{position:absolute;z-index:1;inset-block-start:0;inset-inline-start:0;
  inline-size:34%;block-size:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--led),transparent);
  animation:fx-trace 7.5s var(--ease) infinite}
.trace--slow{animation-duration:11s;animation-delay:2.5s;
  background:linear-gradient(90deg,transparent,var(--blue-soft),transparent)}

@media (prefers-reduced-motion:reduce){
  .fx::before,.fx::after,.trace{animation:none}
  .trace{display:none}
}
html[data-a11y-stop="1"] .fx::before,
html[data-a11y-stop="1"] .fx::after{animation:none}
html[data-a11y-stop="1"] .trace{display:none}

/* ---- section frame ----
   overflow-x:clip contains the .halo glow, which is inset by -9% and would
   otherwise push past the gutter and give the document a few pixels of sideways
   scroll on narrow screens. The hero and safety sections already clip; this
   covers the rest. */
.sec{padding-block:var(--sp-xl);overflow-x:clip}
.sec--sky{background:var(--sky);border-block:1px solid var(--line)}

/* Section headers are centred: the eyebrow labels are gone, so the heading now
   opens the section on its own and centring gives it the room to do that.
   The measure is capped in ch so the line length stays readable however wide the
   viewport gets. */
/* The cap is in rem, NOT ch.
   `ch` resolves against the element's own font-size, and .sec__h inherits the
   body's 1.06rem — so 58ch was about 540px and forced every 3.9rem heading onto
   two lines regardless of how short it was. The heading needs a cap measured in
   the heading's own terms; the lede keeps a narrow measure for readability. */
.sec__h{max-inline-size:min(100%,66rem);margin-inline:auto;
  margin-block-end:var(--sp-l);text-align:center}
.sec h2{font-size:clamp(2.05rem,4.9vw,3.9rem);text-wrap:balance}
/* 1.125rem, down 10% from --s1 (1.25rem): at the old size the intro paragraph
   competed with the heading on a phone instead of supporting it */
.lede{margin-block-start:1.15rem;margin-inline:auto;max-inline-size:54ch;
  color:var(--ink-soft);font-size:1.125rem;line-height:1.62;text-wrap:pretty}

/* the accent that used to be a full-width rule is now a short centred bar */
.mark{padding-block-start:0}
.mark::before{content:"";display:block;inline-size:60px;block-size:4px;border-radius:99px;
  background:var(--blue);margin:0 auto var(--sp-m)}
.mark--led::before{background:var(--led)} .mark--teal::before{background:var(--teal)}
.mark--red::before{background:var(--r-red)} .mark--green::before{background:var(--r-green)}

/* closing lines read as statements, so they sit centred under their section too */
.sec .proj__f,.sec .cmp__note{text-align:center;margin-inline:auto}
.inv{background:var(--navy);color:#EAF1FA}
.inv h2{color:#fff} .inv .lede{color:#B9C9DE}

/* ---- projects ----
   Ten cards, five per row: two clean rows with no ragged remainder. The ladder
   goes 5 -> 2 because both divide 10 evenly; a 4- or 3-column step would leave a
   half-empty final row. */
.proj{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1rem,1.8vw,1.6rem)}
.proj__i{position:relative;display:flex;flex-direction:column;gap:.7rem;text-decoration:none}
.proj__i .slot{aspect-ratio:4/3;transition:transform .5s var(--ease)}
.proj__i:hover .slot{transform:translateY(-5px)}
.proj__n{position:absolute;z-index:4;inset-block-start:.55rem;inset-inline-end:.55rem;
  font-family:var(--f-display);font-size:.88rem;color:#FFD79B;font-variant-numeric:tabular-nums;
  text-shadow:0 1px 8px rgba(0,0,0,.7)}
/* the card title carries the section: sized up, and allowed to wrap to two
   lines rather than being shrunk to fit a narrow column */
.proj__t{font-family:var(--f-display);font-size:clamp(1.3rem,1.55vw,1.7rem);
  letter-spacing:-.025em;line-height:1.14;text-wrap:balance}
.proj__d{font-size:.9rem;color:var(--muted);line-height:1.45}
@media(max-width:1079px){
  .proj{grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2.4vw,2rem)}
  .proj__t{font-size:clamp(1.35rem,2.6vw,2rem)}
  .proj__d{font-size:var(--s-1);line-height:1.5}
}
@media(max-width:520px){.proj{gap:.85rem}.proj__t{font-size:1.2rem}.proj__d{font-size:.85rem}}
.proj__f{margin-block-start:var(--sp-l);padding-block-start:var(--sp-m);border-block-start:1px solid var(--line);
  font-family:var(--f-display);font-size:var(--s2);letter-spacing:-.025em}
.proj__f em{font-style:normal;color:var(--blue)}

/* ---- safety ---- */
.safe{position:relative;overflow:hidden;padding-block:calc(var(--sp-xl)*.86)}
.safe::before{content:"";position:absolute;inset-block-start:-12%;inset-inline-start:-8%;
  inline-size:58vw;block-size:58vw;max-inline-size:700px;max-block-size:700px;
  background:radial-gradient(circle,rgba(255,178,63,.16),transparent 60%);pointer-events:none;
  animation:fx-breathe 21s var(--ease) infinite}
.safe__g{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}

/* Desktop: the photo fills the row rather than holding a fixed 4:5 box.
   The text column is the taller of the two and its height depends on the copy, so
   pinning the image to an aspect ratio left a 154px gap under it. Dropping the
   ratio and stretching means the two columns end level whatever the copy does —
   object-fit:cover handles the crop. */
@media(min-width:901px){
  .safe__g{align-items:stretch}
  .safe__g > .halo{display:grid}
  .safe__g .slot--tall{aspect-ratio:auto;block-size:100%;min-block-size:26rem}
}
/* ---- safety heading ----
   The section that wins the category gets a warm gradient through the type and a
   soft glow behind it.
   On DESKTOP the heading and intro stay flush with the four points beneath them,
   so the whole right column reads as one block against the photo — centring them
   there left the column looking like two unrelated pieces. Centring is kept for
   the single-column layout, where there is nothing to align to. */
@media(max-width:900px){
  .safe__g > .rv > h2,
  .safe__g > .rv > .lede{text-align:center;margin-inline:auto}
}
.safe h2{position:relative;font-size:clamp(2.15rem,3.9vw,3.15rem);letter-spacing:-.035em;
  background:linear-gradient(105deg,#fff 0%,#FFE3B4 46%,var(--led) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  padding-block-end:.08em}
.safe h2::after{content:"";position:absolute;z-index:-1;
  inset-block-start:8%;inset-inline:12% ;block-size:78%;
  background:radial-gradient(60% 70% at 50% 50%,rgba(255,178,63,.28),transparent 70%);
  filter:blur(34px);pointer-events:none}
/* margin-inline:0, not just text-align.
   .lede carries margin-inline:auto from the base rule, so with a max-width
   narrower than the column the BLOCK stayed centred even though its text was
   flush — the paragraph sat visibly indented from the heading above it. */
.safe .lede{max-inline-size:46ch;margin-inline:0}
@media(max-width:900px){.safe .lede{margin-inline:auto}}
.safe h2 em{font-style:normal;color:var(--led)}
.pts{margin-block-start:var(--sp-l)}
.pts div{padding-block:1.1rem;border-block-start:1px solid rgba(234,241,250,.15);
  display:grid;grid-template-columns:1.9rem 1fr;gap:.95rem;align-items:start}
.pts div:last-child{border-block-end:1px solid rgba(234,241,250,.15)}
.pts .ic{font-size:1.45rem;color:var(--led);margin-block-start:.3rem}
.pts b{display:block;font-weight:700;font-size:var(--s0);margin-block-end:.1rem}
.pts p{color:#AEBFD6;font-size:var(--s-1);line-height:1.58}
.safe__c{margin-block-start:var(--sp-l);font-family:var(--f-display);font-size:var(--s2);
  letter-spacing:-.025em;line-height:1.2;max-inline-size:30ch}
/* amber, not faux-italic: Google Sans has no italic cut, and the synthesized
   slant leans INTO the previous word in RTL — the same treatment as the h2 em */
.safe__c em{font-style:normal;color:var(--led)}
@media(max-width:900px){.safe__g{grid-template-columns:1fr}}

/* ==========================================================
   comparison

   Two panels rather than one flat table. The "us" side is raised — white card,
   real shadow, blue header, a lit top edge — while the "them" side sits back,
   flatter and cooler. The visual hierarchy makes the argument before the text
   does.

   Rows are paired across both panels via a shared grid so the two columns stay
   aligned even when one line wraps and the other does not.
   ========================================================== */
.cmp{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(.75rem,1.6vw,1.4rem);align-items:start}

.cmp__c{border-radius:18px;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
/* them */
.cmp__c:first-child{background:#EEF2F8;border:1px solid var(--line)}
/* us */
.cmp__c:last-child{position:relative;background:#fff;
  border:1px solid rgba(28,99,196,.28);
  box-shadow:0 26px 60px -34px rgba(13,27,46,.4),0 3px 10px -6px rgba(13,27,46,.16)}
.cmp__c:last-child::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;
  block-size:3px;background:linear-gradient(90deg,var(--blue),var(--led))}
@media(min-width:761px){.cmp__c:last-child{transform:translateY(-8px)}}

.cmp__hd{display:flex;align-items:center;gap:.55rem;
  padding:1.15rem clamp(1rem,1.6vw,1.5rem);
  font-weight:800;font-size:var(--s-1);letter-spacing:.01em}
.cmp__hd .ic{font-size:1.15rem}
.cmp__c:first-child .cmp__hd{color:var(--muted);border-block-end:1px solid var(--line)}
.cmp__c:last-child .cmp__hd{
  background:linear-gradient(180deg,#2E76DA,var(--blue));color:#fff}

.cmp ul{margin:0;padding:0}
.cmp li{list-style:none;display:flex;gap:.7rem;align-items:flex-start;
  padding:1rem clamp(1rem,1.6vw,1.5rem);
  font-size:var(--s-1);line-height:1.5;min-block-size:4.6rem;
  border-block-start:1px solid var(--line);
  transition:background .3s var(--ease)}
.cmp li:first-child{border-block-start:0}
.cmp__c:first-child li{color:var(--muted)}
.cmp__c:last-child li{color:var(--ink);font-weight:600;border-block-start-color:rgba(28,99,196,.12)}
.cmp__c:last-child li:hover{background:rgba(28,99,196,.045)}

/* the row markers: a hollow dash on their side, a filled tick on ours */
.cmp li .ic{flex:none;font-size:1.05rem;margin-block-start:.12rem}
.cmp__c:first-child li .ic{color:#AEB8C6}
.cmp__c:last-child li .ic{
  inline-size:1.35rem;block-size:1.35rem;padding:.22rem;border-radius:50%;
  background:rgba(28,99,196,.11);color:var(--blue);stroke-width:2.6}
.cmp__c:last-child li:hover .ic{background:var(--led);color:#3A2405}

.cmp__note{margin-block-start:var(--sp-l);font-family:var(--f-display);font-size:var(--s1);
  letter-spacing:-.02em;max-inline-size:60ch;line-height:1.4}

@media(max-width:640px){
  .cmp{grid-template-columns:1fr}
  .cmp li{min-block-size:0;font-size:.9rem}
  .cmp__hd{font-size:.82rem}
}

/* ---- syllabus ---- */
.syl{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.25rem,3vw,2.5rem)}
.syl__y{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:clamp(1.35rem,2.6vw,2.2rem)}
.syl__y:last-child{background:var(--navy);border-color:var(--navy);color:#EAF1FA}
.syl__tag{display:inline-flex;align-items:center;gap:.45rem;font-size:.74rem;font-weight:800;
  letter-spacing:.14em;color:var(--blue);margin-block-end:.7rem}
.syl__y:last-child .syl__tag{color:var(--led)}
.syl__y h3{font-size:var(--s2)}
.syl__sub{font-size:.82rem;color:var(--muted);margin-block-start:.35rem}
.syl__y:last-child .syl__sub{color:#9FB3CC}
.syl__grp{margin-block-start:1.35rem}
.syl__grp h4{margin:0 0 .55rem;font-size:.78rem;font-weight:800;letter-spacing:.1em;color:var(--muted)}
.syl__y:last-child .syl__grp h4{color:#8FA6C2}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chips span{font-size:.84rem;padding:.3rem .62rem;border-radius:100px;background:var(--sky);color:var(--ink-soft)}
.syl__y:last-child .chips span{background:rgba(234,241,250,.11);color:#D3E0F0}
@media(max-width:760px){.syl{grid-template-columns:1fr}}

/* ---- lesson steps ---- */
.step{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.step__i{position:relative;padding:0 clamp(.8rem,1.8vw,1.5rem)}
.step__i:not(:last-child){border-inline-end:1px solid var(--line)}
.step__d{inline-size:2.6rem;block-size:2.6rem;border-radius:50%;background:#fff;
  border:1.5px solid var(--line);display:grid;place-items:center;margin-block-end:.95rem;position:relative;z-index:1}
.step__d .ic{font-size:1.25rem;color:var(--blue)}
.step__i:last-child .step__d{border-color:var(--led);background:#FFF7EA}
.step__i:last-child .step__d .ic{color:var(--led-deep)}
.step h3{font-size:var(--s1)}
.step p{margin-block-start:.5rem;font-size:var(--s-1);color:var(--muted);line-height:1.55}
@media(max-width:860px){.step{grid-template-columns:1fr 1fr;gap:1.8rem 0}
  .step__i:nth-child(2n){border-inline-end:0}}
/* On one column the steps are centred — icon disc, heading and body all on the
   centre line. Left flush-right they read as an indented list rather than as four
   equal stages, and the icon floating alone at the edge looked like a bullet. */
@media(max-width:520px){
  .step{grid-template-columns:1fr;gap:0}
  .step__i{border-inline-end:0!important;
    border-block-start:1px solid var(--line);
    padding-block:1.6rem;padding-inline:0;
    display:grid;justify-items:center;text-align:center}
  .step__i:first-child{border-block-start:0;padding-block-start:0}
  .step__d{margin-inline:auto;inline-size:3rem;block-size:3rem}
  .step__d .ic{font-size:1.45rem}
  .step h3{font-size:1.2rem}
  .step p{max-inline-size:34ch;margin-inline:auto}
  .step__c{text-align:center;padding:1.4rem 1.25rem}
}
/* centred with the rest of the section, so the accent moves from the inline edge
   to the top where it still reads as an accent */
.step__c{margin:var(--sp-l) auto 0;padding:1.5rem 1.7rem;background:var(--sky);
  border-radius:14px;border-block-start:3px solid var(--blue);
  font-family:var(--f-display);font-size:var(--s1);letter-spacing:-.02em;line-height:1.45;
  max-inline-size:62ch;text-align:center}

/* ---- about ---- */
.abt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.abt__b p+p{margin-block-start:1rem}
.abt__b p{color:var(--ink-soft)}
.logos{margin-block-start:var(--sp-l);padding-block-start:var(--sp-m);border-block-start:1px solid var(--line)}
.logos__t{font-size:.76rem;font-weight:800;letter-spacing:.13em;color:var(--muted);margin-block-end:.9rem}
.logos__r{display:flex;flex-wrap:wrap;gap:.55rem}
.logos__r span{font-size:.86rem;font-weight:600;color:var(--ink-soft);
  padding:.42rem .85rem;border:1px solid var(--line);border-radius:100px;background:#fff}
@media(max-width:860px){.abt{grid-template-columns:1fr}.abt__m{order:-1}}

/* ==========================================================
   client logos — continuous marquee

   Two identical rows in one track, translated by exactly -50%: at the end of the
   cycle the second row sits precisely where the first started, so the loop has no
   seam. Animating a transform means no layout or paint per frame.

   The logo set is a decade old and visually ragged — different colours, weights
   and crops. Greyscale at rest pulls them into one row; colour returns on hover,
   which also rewards the mouse.
   ========================================================== */
/* White, not the page tint: four of the source logos are opaque JPGs/PNGs with a
   baked-in white background, which shows as a visible box on any tinted surface.
   A white strip makes them blend instead of asking the client to re-cut them. */
.clients{padding-block:calc(var(--sp-xl)*.62);background:#fff;
  border-block:1px solid var(--line)}
.mq{position:relative;overflow:hidden;
  /* fade the ends instead of cutting them, so logos enter and leave the strip */
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq__track{display:flex;inline-size:max-content;
  animation:mq-scroll var(--mq-dur,45s) linear infinite}

/* NO flex gap and NO row padding.
   The loop works by translating the track exactly -50%, which lands the second
   row precisely where the first began. That is only exact if both rows are the
   same width AND the spacing repeats uniformly across the seam. flex `gap` gives
   n items only n-1 gaps, and row padding added a double-width space at the join —
   both produced a visible hole once per cycle. Each item now carries its own
   trailing margin, so every row is n*(item+gap) wide and the seam is invisible. */
.mq__row{display:flex;align-items:center;margin:0;padding:0;list-style:none}
.mq__i{flex:none;display:grid;place-items:center;
  inline-size:clamp(136px,12.5vw,186px);block-size:96px;
  margin-inline-end:clamp(1.6rem,3.4vw,3.4rem)}
/* Full colour, as asked. The logo set is visually ragged, so the row is unified
   by rendering every logo in an IDENTICAL letterbox: explicit 72px height +
   object-fit:contain. Explicit pixels, not max-block-size:100% — a percentage
   max against the item's auto grid row never resolved, so portrait logos (e.g.
   באר יעקב) rendered at full 218px height, burst the 96px box and read as cut. */
.mq__i img{inline-size:100%;block-size:72px;object-fit:contain;opacity:.92;
  transition:opacity .35s var(--ease),transform .35s var(--ease)}
.mq__i img:hover{opacity:1;transform:scale(1.07)}
/* POSITIVE 50%, not negative — this is the direction bug that caused the gap.
   `transform` is physical, but the flex track is laid out RTL: its inline-start is
   the right edge, so the track hangs off to the LEFT of the viewport. Translating
   negatively drags it further left and nothing follows it in, leaving a widening
   empty band on the right once per cycle. Translating positively pulls the
   duplicated row in from the left, and at +50% row 2 lands exactly where row 1
   began — a seam that never opens. */
@keyframes mq-scroll{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* pause when someone is looking at a specific logo */
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}

/* Reduced motion: no scrolling. The track becomes a centred wrap and the clone
   row is dropped, so nothing is announced or shown twice. */
@media (prefers-reduced-motion:reduce){
  .mq{mask-image:none;-webkit-mask-image:none}
  .mq__track{animation:none;inline-size:100%}
  .mq__row[aria-hidden="true"]{display:none}
  .mq__row{flex-wrap:wrap;justify-content:center;row-gap:1.75rem}
  .mq__i{margin-inline-end:0;padding-inline:1.2rem}
  .mq__i img{opacity:1}
}
html[data-a11y-stop="1"] .mq__track{animation:none}
html[data-a11y-contrast="1"] .mq__i img{opacity:1}

/* ==========================================================
   quick registration — search over the real מתנ"ס links

   A city can hold several locations and every location several groups, so the
   component is a filterable stack of city blocks rather than a button grid.
   Everything is server-rendered and visible; the search only narrows it, so
   crawlers and no-JS visitors get the full list (.no-js hides the search box
   itself, which without JS is just furniture).
   ========================================================== */
.csearch{max-inline-size:760px;margin-inline:auto}
.csearch__row{position:relative;display:flex;align-items:stretch;gap:.55rem;
  padding:.45rem;border-radius:16px;
  background:rgba(234,241,250,.07);border:1px solid rgba(234,241,250,.18);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.75);
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.csearch__row:focus-within{border-color:rgba(255,178,63,.65);
  box-shadow:0 0 0 3px rgba(255,178,63,.22),0 24px 60px -34px rgba(0,0,0,.75)}
.csearch__ic{display:grid;place-items:center;flex:none;
  margin-inline-start:.7rem;font-size:1.3rem;color:var(--blue-soft)}
.csearch input{flex:1;min-inline-size:0;border:0;background:none;color:#fff;
  font-family:var(--f-body);font-size:var(--s1);padding:.6rem .3rem}
.csearch input::placeholder{color:#7C90A8}
/* the wrapper carries the focus ring (:focus-within above); the input's own
   outline would draw a second box inside it */
.csearch input:focus-visible{outline:none}
.csearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.csearch .btn{border-radius:12px}

/* the suggestions dropdown — a solid surface, because it floats over content */
.csearch{position:relative}
.csearch__list{position:absolute;inset-inline:0;inset-block-start:calc(100% + .55rem);z-index:30;
  margin:0;padding:.4rem;list-style:none;
  background:var(--navy-2);border:1px solid rgba(234,241,250,.2);border-radius:14px;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.8)}
.csearch__list[hidden],.csearch__opt[hidden]{display:none}
.csearch__opt{display:flex;align-items:center;gap:.6rem;cursor:pointer;
  padding:.7rem .85rem;border-radius:10px;
  font-weight:700;font-size:var(--s0);color:#EAF1FA}
.csearch__opt .ic{color:var(--led);font-size:1.05rem}
.csearch__opt-n{color:#9FB3CC;font-weight:400;font-size:var(--s-1)}
/* one visual state for both mouse hover and keyboard focus (aria-selected) */
.csearch__opt:hover,.csearch__opt[aria-selected="true"]{background:rgba(255,178,63,.14)}

.csearch__stat{margin-block-start:1.4rem;text-align:center;
  font-size:var(--s-1);font-weight:700;color:var(--led)}
.csearch__stat:empty{display:none}

/* ---- the city blocks ---- */
.centers{margin-block-start:var(--sp-m);display:grid;gap:1.1rem}
.cityblk{border:1px solid rgba(234,241,250,.14);border-radius:18px;overflow:hidden;
  background:rgba(19,40,68,.55)}
.cityblk[hidden]{display:none}
.cityblk__h{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;
  padding:1.05rem 1.3rem;background:rgba(234,241,250,.05);
  border-block-end:1px solid rgba(234,241,250,.1)}
.cityblk__h h3{font-size:var(--s1);letter-spacing:-.02em}
/* the heading is a disclosure button: closed = a one-line index of the city */
.cityblk__tgl{display:flex;align-items:center;gap:.55rem;cursor:pointer;
  background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;
  letter-spacing:inherit;text-align:start;min-block-size:44px}
.cityblk__tgl .ic{color:var(--led);font-size:1.05em}
.cityblk__tgl .cityblk__chev{color:var(--blue-soft);font-size:.9em;
  transition:transform .3s var(--ease)}
.cityblk[data-open="true"] .cityblk__chev{transform:rotate(180deg)}
.cityblk:not([data-open="true"]) .locs{display:none}
.cityblk:not([data-open="true"]) .cityblk__h{border-block-end:0}
/* without JS nothing can reveal or reopen a block, so everything shows */
.no-js .cityblk[hidden]{display:block}
.no-js .cityblk .locs{display:grid}
.no-js .cityblk__chev{display:none}
.cityblk__n{font-size:var(--s-1);color:#9FB3CC}
.cityblk__all{margin-inline-start:auto;font-size:var(--s-1);font-weight:700;
  color:var(--blue-soft);text-decoration:none}
.cityblk__all:hover,.cityblk__all:focus-visible{color:#fff}

.locs{list-style:none;margin:0;padding:1.05rem;display:grid;gap:.85rem;
  grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.loc{display:grid;gap:.7rem;align-content:start;
  padding:1rem 1.1rem;border-radius:14px;
  background:rgba(234,241,250,.045);border:1px solid rgba(234,241,250,.12)}
.loc__t b{font-size:var(--s0);font-weight:700}
.loc__meta{display:block;margin-block-start:.15rem;font-size:var(--s-1);color:#9FB3CC}
.loc__day{color:var(--led);font-weight:700}

/* a group = one tappable row straight into the מתנ"ס registration */
.grps{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.grp{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .7rem;
  min-block-size:46px;padding:.55rem .8rem;border-radius:10px;text-decoration:none;
  background:rgba(28,99,196,.16);border:1px solid rgba(91,154,230,.28);
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.grp:hover{background:rgba(28,99,196,.32);border-color:rgba(255,178,63,.6);transform:translateY(-1px)}
.grp__who{flex:1;min-inline-size:0;font-weight:700;font-size:var(--s-1);color:#EAF1FA}
.grp__time{font-size:var(--s-1);color:#B9C9DE;font-variant-numeric:tabular-nums}
.grp__go{font-size:var(--s-1);font-weight:700;color:var(--led);white-space:nowrap;
  opacity:.85;transition:opacity .25s var(--ease)}
.grp:hover .grp__go,.grp:focus-visible .grp__go{opacity:1}

/* the city we have not reached yet — shown by main.js when nothing matches */
.signup__nf{margin-block-start:var(--sp-m);text-align:center;
  padding:2.3rem 1.5rem;border-radius:18px;
  border:1px dashed rgba(234,241,250,.3);background:rgba(234,241,250,.045)}
.signup__nf b{font-family:var(--f-display);font-size:var(--s1);font-weight:700}
.signup__nf p{margin-block-start:.55rem;margin-inline:auto;max-inline-size:52ch;
  color:#B9C9DE;font-size:var(--s-1);line-height:1.6}
.signup__nf .signup__acts{margin-block-start:1.2rem}

.no-js .csearch{display:none}

.signup__foot{margin-block-start:var(--sp-l);display:grid;justify-items:center;gap:1.1rem}
.signup__note{display:flex;gap:.7rem;align-items:flex-start;justify-content:center;
  text-align:center;max-inline-size:58ch;
  font-size:var(--s-1);color:var(--ink-soft);line-height:1.55}
.signup__note .ic{font-size:1.25rem;color:var(--led-deep);flex:none;margin-block-start:.2rem}
.signup__acts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* ---- signup on navy ----
   Same treatment as the safety section: the two places a visitor acts share one
   visual language, so "dark" reads as "do something here". */
.signup{position:relative;overflow:clip;isolation:isolate;
  background:var(--navy);color:#EAF1FA}
.signup::before{background:
  radial-gradient(62% 90% at 84% -8%,rgba(28,99,196,.4),transparent 62%),
  radial-gradient(52% 78% at 8% 106%,rgba(255,178,63,.15),transparent 64%)}
.signup::after{background-image:
    linear-gradient(rgba(91,154,230,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,154,230,.07) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(95% 100% at 70% 0%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(95% 100% at 70% 0%,#000,transparent 76%)}
/* the same warm gradient the safety heading wears */
.signup h2{background:linear-gradient(105deg,#fff 0%,#FFE3B4 48%,var(--led) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;padding-block-end:.06em}
.signup .lede{color:#B9C9DE}

.signup .signup__note{color:#B9C9DE}
.signup .signup__note .ic{color:var(--led)}

@media(max-width:600px){
  .csearch__row{padding:.4rem;gap:.4rem}
  .csearch__ic{margin-inline-start:.5rem;font-size:1.15rem}
  .csearch input{font-size:var(--s0)}
  .csearch .btn{padding-inline:1rem}
  .cityblk__h{padding:.75rem 1rem}
  /* the catalog link drops under the title once the row gets tight */
  .cityblk__all{margin-inline-start:0;flex-basis:100%}
  .locs{padding:.8rem;gap:.7rem}
  /* a group row becomes two tidy lines: the classes, then time + action —
     three flex items squeezed onto 350px broke mid-label */
  .grp{display:grid;grid-template-columns:1fr auto;row-gap:.1rem;align-items:center;
    padding-block:.65rem}
  .grp__who{grid-column:1 / -1}
  .signup__acts{inline-size:100%}
  .signup__acts .btn{flex:1}
}

/* ---- faq ----
   Two columns so the section is not a lone list against empty space. The image
   is sticky on desktop: the questions are the tall column, and letting the shelf
   ride alongside keeps the payoff on screen while the parent reads. */
.faq__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(2rem,4.5vw,4rem);align-items:start}
.faq__aside{position:sticky;inset-block-start:calc(var(--hdr-h) + 2rem)}
.faq__aside .slot{aspect-ratio:4/5}
.faq__cap{margin-block-start:1.1rem;display:flex;gap:.6rem;align-items:flex-start;
  font-size:var(--s-1);line-height:1.55;color:var(--ink-soft)}
.faq__cap .ic{font-size:1.2rem;color:var(--blue);flex:none;margin-block-start:.2rem}
@media(max-width:900px){
  .faq__g{grid-template-columns:1fr}
  .faq__aside{position:static;order:-1;max-inline-size:26rem;margin-inline:auto}
}

.faq{max-inline-size:100%}
.faq details{border-block-end:1px solid var(--line)}
.faq details:first-child{border-block-start:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 0;display:flex;gap:.9rem;align-items:flex-start;
  font-family:var(--f-display);font-size:var(--s1);letter-spacing:-.02em;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{font-size:1.15rem;color:var(--blue);margin-block-start:.32rem;transition:transform .35s var(--ease)}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq__a{padding:0 0 1.25rem 0;padding-inline-start:2.05rem;color:var(--ink-soft);font-size:var(--s-1);line-height:1.68}
.faq__a p+p{margin-block-start:.8rem}

/* ---- lead ---- */
.lead{background:var(--navy);color:#EAF1FA;position:relative;overflow:hidden}
/* The lead section is the conversion point, so it gets the richest background on
   the page: a breathing amber pool, a cool counter-pool, and a drifting circuit
   grid — layered on the ::before so the section's own ::after stays free. */
.lead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 80% at 88% 118%,rgba(255,178,63,.19),transparent 62%),
    radial-gradient(52% 72% at 6% -12%,rgba(28,99,196,.4),transparent 62%);
  animation:fx-breathe 24s var(--ease) infinite}
.lead::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(91,154,230,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,154,230,.07) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(95% 105% at 20% 0%,#000,transparent 76%);
  -webkit-mask-image:radial-gradient(95% 105% at 20% 0%,#000,transparent 76%);
  animation:grid-drift 30s linear infinite}
@media (prefers-reduced-motion:reduce){.lead::before,.lead::after{animation:none}}
html[data-a11y-stop="1"] .lead::before,
html[data-a11y-stop="1"] .lead::after{animation:none}
.lead__g{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.lead h2{color:#fff}
.lead__s{margin-block-start:1.1rem;color:#B9C9DE;font-size:var(--s1);line-height:1.6;max-inline-size:40ch}
.lead__alt{margin-block-start:1.5rem;font-size:var(--s-1);color:#9FB3CC}
/* inline-flex with real height: a phone number is a tap target, and at its natural
   18px line box it was the smallest one on the page */
.lead__alt a{display:inline-flex;align-items:center;min-block-size:44px;
  padding-inline:.4rem;color:var(--led);font-weight:700;text-decoration:none}
.form{background:rgba(255,255,255,.06);border:1px solid rgba(234,241,250,.16);
  border-radius:var(--radius);padding:clamp(1.3rem,2.6vw,2rem);display:grid;gap:.85rem}
.form label{display:grid;gap:.35rem;font-size:.82rem;font-weight:700;color:#C7D6E8}
.form input{font-family:var(--f-body);font-size:var(--s0);padding:.8rem .9rem;border-radius:var(--radius);
  border:1px solid rgba(234,241,250,.24);background:rgba(13,27,46,.55);color:#fff;inline-size:100%}
.form input::placeholder{color:#7C90A8}
.form input:focus-visible{outline:2.5px solid var(--led);outline-offset:2px}
.form input[aria-invalid="true"]{border-color:#FF9C93;background:rgba(216,69,58,.14)}
.form .btn{margin-block-start:.35rem}
.form small{font-size:.78rem;color:#9FB3CC;line-height:1.5}
/* Honeypot. Clipped to a 1px box rather than moved off-screen: display:none is
   detectable by bots, and a -9999px offset would extend the document's scroll
   width in RTL exactly like the skip link did. */
.form__hp{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:-1px;padding:0;border:0}
.form__err{font-size:.82rem;font-weight:700;color:#FFB4AC;min-block-size:1px}
.form__ok{display:grid;gap:.5rem;place-items:start;padding:.5rem 0}
.form__ok b{font-family:var(--f-display);font-size:var(--s2);letter-spacing:-.025em;color:#fff;font-weight:700}
.form__ok p{color:#B9C9DE;font-size:var(--s-1)}
.form__ok .ic{font-size:2rem;color:var(--led)}
/* On one column the conversion block is centred and stepped up: this is the last
   thing a phone visitor sees before the action bar, so the heading gets real size
   and the button spans the column instead of sitting flush to one edge. */
@media(max-width:860px){
  .lead__g{grid-template-columns:1fr;gap:2rem}
  /* .lead__c only — a bare `> .rv` also matched the form and centred its labels */
  .lead__c{display:grid;justify-items:center;text-align:center}
  .lead h2{font-size:clamp(2.1rem,8.6vw,3rem)}
  .lead__s{margin-inline:auto;max-inline-size:34ch;font-size:var(--s1)}
  .lead .hero__cta{inline-size:100%;justify-content:center}
  .lead .hero__cta .btn{inline-size:100%}
  .lead__alt{text-align:center}
}

/* ---- b2b ---- */
.b2b{background:var(--sky);border-block-start:1px solid var(--line);padding:var(--sp-l) var(--pad-x);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-m) clamp(1.5rem,4vw,3rem);align-items:center}
.b2b h3{font-size:var(--s2)}
.b2b p{margin-block-start:.6rem;color:var(--ink-soft);font-size:var(--s-1);max-inline-size:66ch;line-height:1.6}
@media(max-width:760px){.b2b{grid-template-columns:1fr}}

/* ---- footer ----
   Four columns on desktop: brand, jump links, contact, and a small CTA card.
   The amber wash and the circuit grid echo the hero, so the page closes the way
   it opened instead of trailing off into a dark strip. */
.ft{position:relative;overflow:clip;isolation:isolate;
  background:var(--navy);color:#8FA6C2;font-size:var(--s-1)}
.ft::before{content:"";position:absolute;z-index:-2;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 100% at 88% 0%,rgba(28,99,196,.34),transparent 60%),
    radial-gradient(55% 80% at 6% 100%,rgba(255,178,63,.11),transparent 62%)}
.ft::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(91,154,230,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,154,230,.06) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(100% 80% at 80% 0%,#000,transparent 70%);
  -webkit-mask-image:radial-gradient(100% 80% at 80% 0%,#000,transparent 70%)}
/* a lit hairline along the very top edge */
.ft__glow{block-size:1px;
  background:linear-gradient(90deg,transparent,rgba(255,178,63,.65) 35%,rgba(91,154,230,.5) 70%,transparent)}

.ft__in{padding-block:var(--sp-l)}
.ft a{text-decoration:none;transition:color .22s var(--ease)}
.ft a:hover{color:#fff}

.ft__cols{display:grid;grid-template-columns:1.5fr 1fr 1.1fr 1.3fr;
  gap:clamp(1.6rem,3.5vw,3.5rem)}
@media(max-width:1000px){.ft__cols{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft__cols{grid-template-columns:1fr;gap:2rem}}

.ft h3{font-size:.78rem;font-weight:800;letter-spacing:.14em;color:#7C93B0;
  font-family:var(--f-body);margin-block-end:1rem}
.ft .brand{color:#fff;font-size:1.35rem}
.ft .brand b{color:var(--led)}
/* The mark must NOT be recoloured here. It draws its orbits in currentColor so
   they follow the white brand text, and its lit electron is amber from inside
   the symbol. The old rule set color:var(--led) for the icon — harmless when the
   icon was a single-colour glyph, but it turned the whole logo amber. */
.ft__blurb{margin-block-start:.9rem;max-inline-size:30ch;line-height:1.6;color:#93A9C6}
.ft__stats{display:flex;gap:1.4rem;margin-block-start:1.2rem}
.ft__stats b{display:block;font-family:var(--f-display);font-size:1.5rem;color:#fff;
  letter-spacing:-.03em;line-height:1}
.ft__stats span{font-size:.76rem;color:#7C93B0}

.ft__list{display:grid;gap:.1rem}
.ft__list a{display:inline-flex;align-items:center;gap:.5rem;min-block-size:34px;color:#A6BAD4}
.ft__list a::before{content:"";inline-size:5px;block-size:5px;border-radius:50%;
  background:rgba(255,178,63,.45);flex:none;transition:transform .22s var(--ease),background .22s var(--ease)}
.ft__list a:hover::before{background:var(--led);transform:scale(1.5)}

.ft__contact{display:grid;gap:.55rem}
.ft__contact a,.ft__contact span{display:flex;align-items:center;gap:.6rem;
  min-block-size:34px;color:#A6BAD4;line-height:1.4}
.ft__contact .ic{font-size:1.15rem;color:var(--blue-soft);flex:none}
.ft__contact a:hover .ic{color:var(--led)}

/* the closing CTA card */
.ft__card{padding:1.25rem;border-radius:14px;
  background:linear-gradient(160deg,rgba(234,241,250,.09),rgba(234,241,250,.03));
  border:1px solid rgba(234,241,250,.14)}
.ft__card b{display:block;font-family:var(--f-display);font-size:1.35rem;color:#fff;
  letter-spacing:-.025em;line-height:1.2}
.ft__card p{margin-block-start:.5rem;font-size:.86rem;color:#93A9C6;line-height:1.5}
.ft__card .btn{margin-block-start:1rem;inline-size:100%}

.ft__legal{margin-block-start:var(--sp-l);padding-block-start:1.15rem;
  border-block-start:1px solid rgba(234,241,250,.12);display:flex;flex-wrap:wrap;
  gap:.35rem 1.2rem;align-items:center;font-size:.83rem;color:#7C93B0}
.ft__legal a{min-block-size:34px;display:inline-flex;align-items:center;color:#93A9C6}
.ft__legal .sep{opacity:.35}
.ft__legal .ft__by{margin-inline-start:auto}

@media(max-width:760px){
  .ft__legal{gap:.15rem 1rem}
  .ft__legal .ft__by{margin-inline-start:0;margin-block-start:.5rem}
}
@media(max-width:600px){.ft__legal .ft__by{margin-inline-start:0}}

/* ==========================================================
   floating controls — WhatsApp bottom-RIGHT, accessibility bottom-LEFT
   Positioned with physical left/right, not inset-inline-*: the brief asks for
   specific screen corners, and logical properties would swap them in RTL.
   ========================================================== */
.dock{position:fixed;bottom:1.6rem;z-index:78}
.dock--wa{right:1.6rem}
.dock--a11y{left:1.6rem}

.dock__btn{position:relative;display:grid;place-items:center;
  inline-size:58px;block-size:58px;border-radius:50%;border:0;cursor:pointer;
  text-decoration:none;padding:0;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),filter .32s var(--ease)}
.dock__btn .ic{font-size:1.7rem;stroke-width:1.6}
.dock__btn:hover{transform:translateY(-3px) scale(1.04)}
.dock__btn:active{transform:translateY(0) scale(.98)}

/* WhatsApp: the platform's own green, because that is the recognition cue —
   an amber circle with a chat glyph does not read as "WhatsApp" at 58px. */
.dock--wa .dock__btn{background:linear-gradient(160deg,#3AE07C 0%,#25D366 46%,#12A44C 100%);
  color:#05340F;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,
             0 14px 34px -12px rgba(18,164,76,.75),
             0 3px 10px -4px rgba(13,27,46,.4)}
.dock--wa .dock__btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,
             0 20px 44px -12px rgba(18,164,76,.9),
             0 4px 12px -4px rgba(13,27,46,.45)}
/* a slow halo so the eye finds it without it flashing */
.dock--wa .dock__btn::after{content:"";position:absolute;inset:0;border-radius:50%;
  pointer-events:none;animation:ring 3.2s var(--ease) infinite}
@keyframes ring{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}
  70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

.dock--a11y .dock__btn{background:linear-gradient(160deg,#2E76DA 0%,var(--blue) 48%,var(--blue-deep) 100%);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,
             0 14px 34px -12px rgba(28,99,196,.7),
             0 3px 10px -4px rgba(13,27,46,.4)}
.dock--a11y .dock__btn[aria-expanded="true"]{background:var(--navy)}

/* ---- tooltip ---- */
.tip{position:absolute;bottom:50%;transform:translateY(50%) scale(.94);
  padding:.6rem .9rem;border-radius:10px;
  background:var(--navy);color:#EAF1FA;
  font-size:.86rem;font-weight:700;line-height:1.35;white-space:nowrap;
  box-shadow:0 14px 34px -14px rgba(13,27,46,.8),0 0 0 1px rgba(234,241,250,.12) inset;
  opacity:0;pointer-events:none;
  transition:opacity .28s var(--ease),transform .28s var(--ease)}
.tip small{display:block;font-weight:400;font-size:.76rem;color:#9FB3CC;margin-block-start:.1rem}
/* the little arrow, rotated square */
.tip::after{content:"";position:absolute;inline-size:10px;block-size:10px;
  background:var(--navy);transform:rotate(45deg);top:50%;margin-top:-5px}
.dock--wa .tip{right:calc(100% + 14px)}
.dock--wa .tip::after{right:-4px}
.dock--a11y .tip{left:calc(100% + 14px)}
.dock--a11y .tip::after{left:-4px}
.dock__btn:hover + .tip,.dock__btn:focus-visible + .tip{
  opacity:1;transform:translateY(50%) scale(1)}
@media(max-width:760px){.tip{display:none}}

/* ---- accessibility panel ---- */
.a11y{position:absolute;bottom:calc(100% + 14px);left:0;
  inline-size:min(19rem,calc(100vw - 3rem));
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 70px -30px rgba(13,27,46,.55);
  padding:1rem;
  opacity:0;transform:translateY(10px) scale(.97);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  max-block-size:min(30rem,calc(100vh - 8rem));overflow-y:auto}
.a11y[data-open="true"]{opacity:1;transform:none;pointer-events:auto}
.a11y h2{font-size:1.15rem;margin-block-end:.15rem}
.a11y__sub{font-size:.78rem;color:var(--muted);margin-block-end:.85rem}
.a11y__grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.a11y__b{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  min-block-size:64px;padding:.5rem .35rem;text-align:center;
  font-family:var(--f-body);font-size:.76rem;font-weight:700;color:var(--ink-soft);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.a11y__b .ic{font-size:1.2rem;color:var(--blue)}
.a11y__b:hover{background:var(--sky);border-color:var(--blue-soft)}
.a11y__b[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.a11y__b[aria-pressed="true"] .ic{color:#fff}
.a11y__reset{grid-column:span 2;min-block-size:44px;flex-direction:row}
.a11y__foot{margin-block-start:.85rem;padding-block-start:.75rem;
  border-block-start:1px solid var(--line);font-size:.78rem}
.a11y__foot a{color:var(--blue);font-weight:700}

/* ---- accessibility modes, applied to <html> ---- */
html[data-a11y-contrast="1"]{filter:contrast(1.32)}
html[data-a11y-gray="1"]{filter:grayscale(1)}
html[data-a11y-contrast="1"][data-a11y-gray="1"]{filter:grayscale(1) contrast(1.32)}
html[data-a11y-links="1"] a:not(.btn):not(.dock__btn){
  text-decoration:underline!important;text-underline-offset:3px;
  outline:1px dashed currentColor;outline-offset:2px}
html[data-a11y-font="1"] body,
html[data-a11y-font="1"] h1,html[data-a11y-font="1"] h2,html[data-a11y-font="1"] h3,
html[data-a11y-font="1"] .brand,html[data-a11y-font="1"] .proj__t,
html[data-a11y-font="1"] .hero__tag,html[data-a11y-font="1"] .faq summary{
  font-family:Arial,"Google Sans",sans-serif!important;letter-spacing:normal!important}
html[data-a11y-stop="1"] *{animation:none!important;transition:none!important}
html[data-a11y-stop="1"] video{display:none!important}
/* Text scaling works by moving the root font size, which every size on the page
   is derived from — so headings, chips, buttons and gaps all scale together
   instead of text overflowing containers that stayed put. */
html[data-a11y-size="1"]{font-size:112.5%}
html[data-a11y-size="2"]{font-size:125%}
html[data-a11y-size="3"]{font-size:140%}
html[data-a11y-size="-1"]{font-size:92%}

/* ---- mobile bar ---- */
.mbar{position:fixed;inset-inline:0;inset-block-end:0;z-index:80;display:none;gap:.55rem;
  padding:.6rem .75rem;background:rgba(246,249,253,.96);backdrop-filter:blur(10px);
  border-block-start:1px solid var(--line)}
.mbar .btn{flex:1}
@media(max-width:760px){
  .mbar{display:flex}
  body{padding-block-end:5rem}
  /* lift the floating button clear of the action bar */
  .dock{bottom:5.6rem}
  .dock--a11y{left:1rem}
  .dock__btn{inline-size:52px;block-size:52px}
  .dock__btn .ic{font-size:1.5rem}
  /* The action bar already carries WhatsApp full-width on mobile. Keeping the
     floating one too would put three WhatsApp buttons in one screen alongside
     the hero CTA — so on phones the bar IS the quick button. */
  .dock--wa{display:none}
}

/* ---- reveal ---- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* if JS never runs, content must still be visible */
.no-js .rv{opacity:1;transform:none}

/* ==========================================================
   plain content pages (privacy, terms, accessibility)

   Named .etgar-doc, NOT .page — WordPress puts a `page` class on <body> for
   every page, so a bare `.page` rule silently applies to the body element and
   its max-inline-size collapses the entire layout.
   ========================================================== */
.etgar-doc{padding:var(--sp-xl) var(--pad-x);max-inline-size:74ch;margin-inline:auto}
.etgar-doc h1{font-size:clamp(2rem,5vw,3.2rem)}
.etgar-doc__body{margin-block-start:var(--sp-l)}
.etgar-doc__body h2{font-size:var(--s2);margin-block-start:var(--sp-l)}
.etgar-doc__body h3{font-size:var(--s1);margin-block-start:var(--sp-m)}
.etgar-doc__body p,.etgar-doc__body ul,.etgar-doc__body ol{margin-block-start:1rem;color:var(--ink-soft)}
.etgar-doc__body ul,.etgar-doc__body ol{padding-inline-start:1.4rem}
.etgar-doc__body li{margin-block-start:.4rem}
.etgar-doc__body a{color:var(--blue);font-weight:600}
.etgar-doc__body strong{color:var(--ink)}

/* ---- 404 ----
   The brand mark plays the zero: an electron that left its orbit is the one
   404 metaphor this site has actually earned. The slow spin stops under
   reduced-motion (the global rule) and under the a11y motion switch. */
.err{position:relative;overflow:clip;display:grid;place-content:center;justify-items:center;
  text-align:center;min-block-size:calc(100svh - var(--hdr-h));
  padding:var(--sp-xl) var(--pad-x)}
.err::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 34% at 50% 34%,rgba(255,178,63,.16),transparent 70%),
             radial-gradient(56% 46% at 50% 40%,rgba(28,99,196,.1),transparent 74%)}
.err__code{display:flex;align-items:center;gap:.04em;
  font-family:var(--f-display);font-weight:700;letter-spacing:-.04em;line-height:1;
  font-size:clamp(6rem,17vw,10.5rem);color:var(--navy)}
.err__atom{inline-size:.84em;block-size:.84em;color:var(--blue);
  animation:err-spin 26s linear infinite}
@keyframes err-spin{to{transform:rotate(360deg)}}
html[data-a11y-stop="1"] .err__atom{animation:none}
.err h1{margin-block-start:.5rem;font-size:clamp(1.7rem,4.2vw,2.5rem)}
.err__s{margin-block-start:.9rem;max-inline-size:46ch;color:var(--ink-soft)}
.err .hero__cta{justify-content:center}
.err__tel{margin-block-start:1.3rem;font-size:var(--s-1);color:var(--muted)}
.err__tel a{display:inline-flex;align-items:center;min-block-size:44px;
  padding-inline:.4rem;font-weight:700;color:var(--blue);text-decoration:none}

/* ---- the film — renders only once a promo video is set ---- */
.film__m{max-inline-size:960px;margin-inline:auto}
.film__v{display:block;inline-size:100%;aspect-ratio:16/9;border-radius:var(--radius);
  background:#000;box-shadow:0 30px 80px -34px rgba(13,27,46,.6)}

/* ==========================================================
   TOUCH TARGETS — must stay LAST in the file

   Keyed on pointer:coarse rather than a viewport width: a 768px tablet is a touch
   device and so is a 1100px touchscreen laptop. Sizing by width left the tablet
   with 34px footer links while the phone got 44px.

   Position matters as much as the query. These selectors have the same specificity
   as the component rules they raise (.ft__list a is 0,1,1 either way), so an
   earlier block loses to the footer's own min-block-size:34px. Keeping this at the
   end of the stylesheet is what makes it an override layer instead of a
   suggestion — do not move it up.

   The footer cluster matters most: it is the densest group of links on the page
   and it sits directly above the fixed action bar, where a mis-tap costs the most.
   ========================================================== */
/* ==========================================================
   MOBILE — header, hero, buttons
   Kept with the touch layer at the end of the file for the same reason: these
   override component rules of equal specificity.
   ========================================================== */
@media(max-width:1079px){
  /* Header: menu on the right, logo dead centre, phone on the left.
     display:contents on .hdr__end promotes .tel and .burger to grid items so all
     three can be placed on the header's own three tracks — otherwise the phone
     and the toggle share one cell and the logo cannot be centred. */
  .hdr{grid-template-columns:1fr auto 1fr;gap:.5rem}
  .hdr__end{display:contents}
  /* grid-row:1 on all three is required, not cosmetic. The burger is LAST in the
     DOM but belongs in the FIRST column; without an explicit row, sparse
     auto-placement refuses to move the cursor backwards and drops it onto a
     second row under the logo. */
  .burger{grid-column:1;grid-row:1;justify-self:start}
  .brand{grid-column:2;grid-row:1;justify-self:center;font-size:1.15rem}
  .tel{grid-column:3;grid-row:1;justify-self:end}
  .navlinks{display:none}
}

@media(max-width:900px){
  /* the whole hero centres on one column — a left-flush block under a centred
     circle reads as two unrelated things */
  .hero--light{text-align:center;padding-block:calc(var(--sp-l)+.75rem) var(--sp-l)}
  .hero--light .hero__t{display:grid;justify-items:center}
  .hero--light h1{font-size:clamp(2.05rem,8.2vw,3.1rem)}
  .hero--light .hero__tag,.hero--light .hero__sub{margin-inline:auto}
  .hero--light .hero__sub{max-inline-size:38ch;font-size:1.0625rem}
  .hero--light .hero__cta{justify-content:center;inline-size:100%}
  .hero--light .hero__note{justify-content:center;text-align:center}

  /* the circle sits at a size that leaves the orbit room to read, instead of
     filling the column edge to edge */
  .hero__m--circle{inline-size:min(78%,320px);margin-inline:auto;padding-block:4%}
  .hero__m--circle .orbit{inset:-24%;inline-size:148%;block-size:148%}
}

/* The short label is hidden by default and swapped in below 560px.
   This base rule MUST come before the media query — declared after it, it won
   on source order and hid both labels, leaving the hero buttons blank. */
.cta-short{display:none}
@media(max-width:560px){
  /* both hero CTAs on one row: the short labels replace the long ones and the
     buttons share the width evenly */
  .hero .cta-long{display:none}
  .hero .cta-short{display:inline}
  .hero .hero__cta{flex-wrap:nowrap;gap:.5rem}
  .hero .hero__cta .btn{flex:1;min-inline-size:0;padding-inline:.85rem;
    font-size:.95rem;white-space:nowrap;min-block-size:50px}
  .hero .hero__cta .btn .ic{font-size:1.05rem}
}

@media(max-width:600px){
  /* no button label may wrap to a second line on a phone */
  .btn{white-space:nowrap}
  .btn--lg{font-size:.98rem;padding:.85rem 1.15rem;min-block-size:50px}
  .signup__acts .btn,.mbar .btn{font-size:.95rem}
}

@media (pointer:coarse){
  .ft__list a,.ft__contact a,.ft__contact span,.ft__legal a{min-block-size:44px}
  /* .hero__note is display:flex, so this link is a flex ITEM, not inline text —
     its display computes to `flex` and it takes the standalone-control threshold */
  .inline-down{min-block-size:44px;padding-block:.5rem}
  .faq summary{padding-block:1.3rem}
  .navm a{min-block-size:48px}
  .brand{min-block-size:46px}
  /* the registration search: suggestion rows and the per-city catalog link are
     the controls that sit under 44px on a desktop layout */
  .csearch__opt{min-block-size:48px}
  .cityblk__all{display:inline-flex;align-items:center;min-block-size:44px}
}