/* GoPlus site, in the look of Tariq's studio site (docs/GoPlus_style_brief.md): Snow paper, rounded Hermon-night slabs,
   pill buttons with the arrow in a round badge, one accent used sparingly, a faint giant wordmark, numbered hairline rows.
   The only glass is the hero pin and the map lens. Sizes are rem and the root scales with the viewport.
   Reading text never drops under 18px and every tap target is at least 56px. */
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url(../fonts/PlexArabic-Bold.woff) format("woff"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 500; font-display: swap; src: url(../fonts/PlexArabic-Medium.woff) format("woff"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(../fonts/PlexArabic-Regular.woff) format("woff"); }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-weight: 700; font-display: swap; src: url(../fonts/PlexHebrew-Bold.woff2) format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-weight: 500; font-display: swap; src: url(../fonts/PlexHebrew-Medium.woff2) format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "IBM Plex Sans Hebrew"; font-weight: 400; font-display: swap; src: url(../fonts/PlexHebrew-Regular.woff2) format("woff2"); unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url(../fonts/Poppins-Bold.woff) format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url(../fonts/Poppins-Medium.woff) format("woff"); }

/* ---------- tokens ---------- */
html { --ts: 1; font-size: calc(16px * var(--ts)); }
@media (max-width: 1920px) { html { font-size: calc(max(15px, .833333vw) * var(--ts)); } }
@media (max-width: 1440px) { html { font-size: calc(max(14px, 1.111111vw) * var(--ts)); } }
@media (max-width: 1024px) { html { font-size: calc(clamp(14px, 1.75vw, 16px) * var(--ts)); } }
@media (max-width: 640px) { html { font-size: calc(4.444444vw * var(--ts)); } }
:root {
  --snow: #F5F8F4; --surface: #EAF0EA; --surface-2: #DDE6DE; --card: #FFFFFF; --night: #0B1512; --day: #E9F0EA;
  --go: #22D36F; --deep: #0B7A3E; --amber: #FFB72B; --brick: #8B2C2C;
  --ink: var(--night); --ink-70: rgba(11, 21, 18, .7); --ink-62: rgba(11, 21, 18, .62);
  --on-night: #F5F8F4; --on-night-72: rgba(245, 248, 244, .72); --on-night-60: rgba(245, 248, 244, .6);
  --hair: #D8E0DA; --hair-strong: rgba(11, 21, 18, .24); --hair-night: rgba(245, 248, 244, .12);
  --accent: var(--deep);
  --r-card: 2rem; --r-card-sm: 1.25rem; --r-ctl: .875rem; --r-pill: 9999px;
  --wrap: 88rem; --gutter: 1.25rem; --nav-h: 4.75rem; --tap: max(3.5rem, 56px);
  --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.215, .61, .355, 1);
  --spring-hover: cubic-bezier(.2, .8, .2, 1); --spring-hover-d: 350ms; --spring-card-d: 550ms; --spring-row-d: 600ms;
  --spring-soft: cubic-bezier(.16, 1, .3, 1); --spring-soft-d: 800ms;
  --dir: 1;
  /* The font families live here and nowhere else. One family per script; Latin, numbers and the logo are Poppins. */
  --latin: "Poppins", system-ui, sans-serif;
  --sans: "IBM Plex Sans Arabic", var(--latin); --display: "IBM Plex Sans Arabic", var(--latin);
  --display-weight: 700; --display-lh: 1.22; --display-ls: 0;
  --t-body: max(18px, 1.125rem); --t-small: max(18px, 1rem);
}
@media (min-width: 640px) { :root { --gutter: 2rem; } }
html[dir="rtl"] { --dir: -1; }
html[lang="ar"] { --sans: "IBM Plex Sans Arabic", var(--latin); --display: "IBM Plex Sans Arabic", var(--latin); --display-weight: 700; --display-lh: 1.22; --display-ls: 0; }
html[lang="en"] { --sans: var(--latin); --display: var(--latin); --display-weight: 700; --display-lh: 1.06; --display-ls: -.022em; }
html[lang="he"] { --sans: "IBM Plex Sans Hebrew", var(--latin); --display: "IBM Plex Sans Hebrew", var(--latin); --display-weight: 700; --display-lh: 1.1; --display-ls: -.01em; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body { background: var(--snow); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.55; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
img, svg { display: block; }
h1, h2, h3 { font-weight: var(--display-weight); }
[hidden] { display: none !important; }
bdi, .num { font-family: var(--latin); font-weight: 700; direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-ink { --accent: var(--go); color: var(--on-night); }
.skip { position: fixed; inset-inline-start: .75rem; top: -6rem; z-index: 90; background: var(--night); color: var(--on-night); padding: 1rem 1.5rem; border-radius: var(--r-pill); font-weight: 700; }
.skip:focus { top: .75rem; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: var(--display-weight); line-height: var(--display-lh); letter-spacing: var(--display-ls); }
.d-xl { font-size: clamp(2.625rem, 5.4vw, 4.75rem); }
.d-l { font-size: clamp(2.5rem, 4.4vw, 4rem); }
.d-m { font-size: clamp(2.125rem, 3.4vw, 3.25rem); }
.d-s { font-size: clamp(1.5rem, 2.2vw, 2.25rem); }
.accent { color: var(--accent); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--t-small); font-weight: 500; color: var(--ink-70); margin-bottom: 1.25rem; }
.eyebrow::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: var(--accent); flex: none; }
.on-ink .eyebrow { color: var(--on-night-72); }
.lead { font-size: max(18px, 1.1875rem); line-height: 1.5; color: var(--ink-70); max-width: 36rem; }
.on-ink .lead { color: var(--on-night-72); }
.sec { padding-block: 5rem; }
@media (min-width: 1024px) { .sec { padding-block: 7rem; } }
.head { margin-bottom: 3rem; }
.head .lead { margin-top: 1rem; }

/* headlines rise line by line, blocks fade and rise. Only when html.motion is set (never with reduced motion). */
.ln { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.ln > span { display: block; }
html.motion .ln > span { transform: translateY(112%); opacity: 0; transition: transform .9s var(--ease-out) var(--d, 0ms), opacity .9s var(--ease-out) var(--d, 0ms); }
html.motion .ln + .ln > span { --d: 110ms; }
html.motion .in .ln > span, html.motion .ln.in > span { transform: none; opacity: 1; }
html.motion .r { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-out) var(--d, 0ms), transform var(--spring-soft-d) var(--spring-soft) var(--d, 0ms); }
html.motion .r.in { opacity: 1; transform: none; }

/* ---------- pills ---------- */
.ico { width: 1em; height: 1em; flex: none; }
.flip { transform: scaleX(var(--dir)); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: var(--tap); border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: transform var(--spring-hover-d) var(--spring-hover), background .25s, color .25s, border-color .25s; }
.pill.arrow { padding-block: .375rem; padding-inline: 1.5rem .375rem; }
.pill.plain { padding: .5rem 1.75rem; }
.pill { max-width: 100%; }
.pill.soft { white-space: normal; text-align: center; }
.pill.dark { background: var(--night); color: var(--on-night); }
.pill.light { background: var(--card); color: var(--ink); }
.pill.soft { background: var(--surface); color: var(--ink); }
.pill.outline { border-color: var(--hair-strong); background: rgba(255, 255, 255, .25); color: var(--ink); }
.pill .bdg { width: max(2.75rem, 44px); height: max(2.75rem, 44px); display: grid; place-items: center; border-radius: 50%; font-size: 1.125rem; background: var(--night); color: var(--on-night); flex: none; }
.pill.dark .bdg { background: var(--card); color: var(--ink); }
.pill .bdg svg { transition: transform var(--spring-hover-d) var(--spring-hover); transform: scaleX(var(--dir)); }
.on-ink .pill.dark { background: var(--card); color: var(--ink); }
.on-ink .pill.dark .bdg { background: var(--night); color: var(--on-night); }
.on-ink .pill.outline { border-color: rgba(245, 248, 244, .3); background: rgba(245, 248, 244, .04); color: var(--on-night); }
.pill:active { transform: scale(.98); }
@media (hover: hover) {
  .pill:hover { transform: scale(1.04); }
  .pill:hover .bdg svg { transform: translateX(calc(3px * var(--dir))) scaleX(var(--dir)); }
}
.pill:focus-visible { outline-offset: 3px; }
.alink { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; transition: transform var(--spring-hover-d) var(--spring-hover); }
@media (hover: hover) { .alink:hover { transform: translateX(calc(4px * var(--dir))); } }

/* ---------- nav: clear over the hero, Snow with blur over the page, night over a night slab ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h); color: var(--ink); --lk-accent: var(--deep);
  background: color-mix(in srgb, var(--snow) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair);
  transition: background .35s, color .35s, border-color .35s; }
.nav.is-ink { color: var(--on-night); --lk-accent: var(--go); --accent: var(--go); background: color-mix(in srgb, var(--night) 92%, transparent); border-bottom-color: var(--hair-night); }
.nav.is-over, .nav.is-open { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-hero="night"] .nav.is-over, .nav.is-open { color: var(--on-night); --lk-accent: var(--go); --accent: var(--go); }
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; min-height: var(--tap); }
.brand svg { height: 2rem; width: auto; }
.lk-ring { fill: none; stroke: currentColor; }
.lk-a { fill: currentColor; }
.lk-b { fill: var(--lk-accent, var(--deep)); }
.nav__links { display: none; align-items: center; gap: .25rem; }
.nav__links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 1rem; border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 500; opacity: .85; transition: opacity .25s, background .25s; }
.nav__links a:hover { opacity: 1; background: color-mix(in srgb, currentColor 8%, transparent); }
.nav__end { display: flex; align-items: center; gap: .5rem; }
/* a two-option control is one switch: a tap anywhere on it changes to the other option */
.lang, .mode { cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.lang { display: flex; align-items: center; border-radius: var(--r-pill); background: color-mix(in srgb, currentColor 7%, transparent); padding: 0; }
.lang [data-lang] { display: flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding: 0 .75rem; border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 500; transition: background .25s, color .25s; }
.lang [data-lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--latin); }
.lang [data-lang="he"] { font-family: "IBM Plex Sans Hebrew", var(--latin); }
.lang [data-on="true"] { background: var(--night); color: var(--on-night); font-weight: 700; }
.nav.is-ink .lang [data-on="true"], body[data-hero="night"] .nav.is-over .lang [data-on="true"], .nav.is-open .lang [data-on="true"], .on-ink .lang [data-on="true"] { background: var(--card); color: var(--ink); }
.nav__cta { display: none; }
.nav.is-ink .nav__cta, body[data-hero="night"] .nav.is-over .nav__cta { background: var(--card); color: var(--ink); }
.nav.is-ink .nav__cta .bdg, body[data-hero="night"] .nav.is-over .nav__cta .bdg { background: var(--night); color: var(--on-night); }
.nav__menu { width: var(--tap); height: var(--tap); display: grid; place-content: center; gap: .4375rem; border-radius: 50%; background: color-mix(in srgb, currentColor 7%, transparent); }
.nav__menu i { display: block; width: 1.25rem; height: 2px; background: currentColor; transition: transform .35s var(--ease); }
.nav.is-open .nav__menu i:first-child { transform: translateY(.28rem) rotate(45deg); }
.nav.is-open .nav__menu i:last-child { transform: translateY(-.28rem) rotate(-45deg); }
@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__menu { display: none; }
}
/* the menu on phones: a full-screen night sheet with big numbered links */
.sheet { position: fixed; inset: 0; z-index: 55; background: var(--night); color: var(--on-night); padding-top: var(--nav-h); overflow-y: auto; opacity: 0; visibility: hidden; --accent: var(--go); }
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet__in { min-height: 100%; display: grid; align-content: space-between; gap: 1.5rem; padding-block: 1.5rem 2rem; }
.sheet__main { counter-reset: m; }
.sheet__main a { counter-increment: m; display: flex; align-items: baseline; gap: 1rem; min-height: var(--tap); padding: .25rem 0; font-family: var(--display); font-weight: var(--display-weight); font-size: 2rem; line-height: 1.3; color: rgba(245, 248, 244, .86); transform: translateY(1rem); opacity: 0; transition: transform .5s ease-out, opacity .5s ease-out, color .3s; }
.sheet__main a::before { content: "0" counter(m); font-family: var(--latin); font-size: 1rem; font-weight: 500; color: var(--on-night-60); }
.sheet.is-open .sheet__main a { transform: none; opacity: 1; }
.sheet.is-open .sheet__main a:nth-child(2) { transition-delay: 45ms; } .sheet.is-open .sheet__main a:nth-child(3) { transition-delay: 90ms; }
.sheet.is-open .sheet__main a:nth-child(4) { transition-delay: 135ms; } .sheet.is-open .sheet__main a:nth-child(5) { transition-delay: 180ms; }
.sheet.is-open .sheet__main a:nth-child(6) { transition-delay: 225ms; } .sheet.is-open .sheet__main a:nth-child(7) { transition-delay: 270ms; }
.sheet__ctas { display: flex; flex-wrap: wrap; gap: .5rem; }
.sheet__ctas .pill { flex: 1 1 auto; }

/* ---------- the faint giant wordmark ---------- */
.wm { pointer-events: none; user-select: none; font-family: var(--latin); font-weight: 700; line-height: 1; white-space: nowrap; text-align: center; letter-spacing: -.04em; direction: ltr; }

/* ---------- home hero: Snow, the glass pin over the word, then the search ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--nav-h); background: var(--snow); border-radius: 0 0 var(--r-card) var(--r-card); }
.stage { flex: 1 1 0; min-height: clamp(14rem, 40vh, 36rem); position: relative; z-index: 1; }
#hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__low { position: relative; z-index: 2; flex: none; padding-bottom: 0; }
.hero-wm { position: absolute; inset-inline: 0; bottom: -2.2vw; z-index: 0; font-size: 12.6vw; color: rgba(11, 21, 18, .045); display: none; }
@media (min-width: 1024px) { .hero-wm { display: block; } }
.search { display: flex; align-items: center; gap: .5rem; min-height: max(4.5rem, 64px); padding: .375rem; padding-inline-start: 1.5rem; border-radius: var(--r-pill); background: var(--card); box-shadow: 0 0 0 1px var(--hair); transition: box-shadow .25s; }
.search:focus-within { box-shadow: 0 0 0 1px var(--ink), 0 0 0 .3125rem rgba(11, 122, 62, .2); }
.search input { flex: 1; min-width: 0; height: max(3.5rem, 56px); border: 0; background: transparent; font-size: max(20px, 1.5rem); font-weight: 500; outline: none; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--ink-62); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-note { margin-top: .75rem; padding-inline: 1.5rem; font-size: var(--t-small); color: var(--ink-70); }
.search-out:not(:empty) { margin-top: .75rem; padding: 1.5rem; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--hair); }
@media (min-width: 640px) { .search-out:not(:empty) { padding: 2rem; } }
.search-out h2 { font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: var(--display-lh); }
.search-out p { margin-top: .5rem; color: var(--ink-70); max-width: 36rem; }
.search-out .plain { color: var(--ink); font-weight: 700; margin: 0; }
.search-out li a { display: flex; align-items: center; min-height: var(--tap); border-top: 1px solid var(--hair); font-weight: 700; }
.status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-top: 1.25rem; border-top: 1px solid var(--hair-strong); padding-block: .5rem; font-size: var(--t-small); font-weight: 500; color: var(--ink-70); }
.status a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); }

/* phone and WhatsApp */
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.contact .num { font-size: max(18px, 1.125rem); }

/* ---------- map: a slab in the middle of the page, rounded on all four corners ---------- */
.map { --bg: var(--night); --fg: var(--on-night); --fg-soft: var(--on-night-72); --line: var(--hair-night); --accent: var(--go);
  position: relative; overflow: hidden; border-radius: var(--r-card); background: var(--bg); color: var(--fg); padding-block: 4rem; transition: background-color .45s ease, color .45s ease; }
.map.light { --bg: var(--day); --fg: var(--ink); --fg-soft: var(--ink-70); --line: var(--hair-strong); --accent: var(--deep); }
.map .eyebrow { color: var(--fg-soft); }
.map__in { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
.map .lede { margin-top: 1rem; color: var(--fg-soft); max-width: 30rem; }
.villages { counter-reset: v; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.villages li { counter-increment: v; border-bottom: 1px solid var(--line); }
.villages button { display: grid; grid-template-columns: 2.25rem 1fr auto; align-items: center; width: 100%; min-height: var(--tap); padding-inline: .75rem; border-radius: var(--r-ctl); text-align: start; font-weight: 500; font-size: max(18px, 1.25rem); }
.villages button::before { content: "0" counter(v); font-family: var(--latin); font-size: max(16px, .875rem); font-weight: 500; color: var(--fg-soft); }
.villages .km { font-family: var(--latin); font-weight: 500; font-size: max(18px, 1rem); direction: ltr; color: var(--fg-soft); }
.villages button:hover, .villages li.on button { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.villages li.on button { color: var(--accent); font-weight: 700; }
.mode { display: inline-flex; gap: .25rem; margin-top: 1.5rem; padding: .25rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--fg) 8%, transparent); }
.mode [data-mode] { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 1.75rem; border-radius: var(--r-pill); font-weight: 500; font-size: var(--t-small); transition: background-color .25s, color .25s, transform var(--spring-hover-d) var(--spring-hover); }
.mode [data-on="true"] { background: var(--fg); color: var(--bg); font-weight: 700; }
.map-frame { position: relative; justify-self: center; width: min(100%, calc(74vh * 1000 / 1080)); }
#map-gl { display: block; }
/* above the lens canvas, so the OpenStreetMap credit is never covered */
.credit { position: relative; z-index: 3; margin-top: .75rem; font-family: var(--latin); font-size: max(14px, .8125rem); font-weight: 500; color: var(--fg-soft); text-align: left; }
@media (min-width: 900px) {
  .map { padding-block: 4.5rem; }
  .map__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; align-items: center; }
  .map-frame { width: min(100%, calc((100vh - var(--nav-h) - 9rem) * 1000 / 1080)); }
}

/* ---------- numbered rows divided by hairlines ---------- */
.rows { counter-reset: row; border-top: 1px solid var(--hair); }
.rows > li { counter-increment: row; border-bottom: 1px solid var(--hair); }
.row { display: grid; grid-template-columns: 2rem 1fr; column-gap: 1rem; row-gap: .25rem; align-items: start; border-radius: var(--r-card-sm); padding: 1.5rem .75rem; transition: background var(--spring-row-d) var(--ease); }
.row::before { content: "0" counter(row); font-family: var(--latin); font-size: max(16px, .875rem); font-weight: 500; color: var(--ink-62); padding-top: .5rem; }
.row h3 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); line-height: var(--display-lh); }
.row p { grid-column: 2; color: var(--ink-70); max-width: 34rem; }
.row .row__ico { display: none; }
@media (hover: hover) { .row:hover { background: var(--surface); } }
@media (min-width: 900px) {
  .row { grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 5fr) auto; align-items: center; column-gap: 1.5rem; padding-block: 2rem; }
  .row::before { padding-top: 0; }
  .row p { grid-column: auto; }
  .row .row__ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--surface); transition: transform var(--spring-hover-d) var(--spring-hover), background .25s; }
  .row .row__ico img { width: 1.75rem; height: 1.75rem; }
  .row:hover .row__ico { background: var(--card); transform: translateX(calc(5px * var(--dir))); }
}
.notes { margin-top: 2rem; display: grid; gap: .25rem; color: var(--ink-70); }
.notes b { color: var(--ink); font-weight: 700; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; min-height: 15rem; width: 100%; padding: 1.75rem; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--hair); text-align: start; color: var(--ink); transition: transform var(--spring-card-d) var(--spring-hover), background .3s, color .3s; }
.card__top { display: flex; align-items: center; justify-content: space-between; }
.card__ico { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--surface); }
.card__ico img { width: 2rem; height: 2rem; }
.card .bdg { width: max(3rem, 48px); height: max(3rem, 48px); display: grid; place-items: center; border-radius: 50%; background: var(--night); color: var(--on-night); font-size: 1.125rem; transition: transform var(--spring-hover-d) var(--spring-hover); }
.card .bdg svg { transform: scaleX(var(--dir)); }
.card .bdg.down svg { transform: rotate(90deg); }
.card strong { display: block; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: var(--display-lh); }
.card small { display: block; margin-top: .25rem; font-size: var(--t-body); color: var(--ink-70); }
@media (hover: hover) { .card:hover { transform: translateY(-6px); } .card:hover .bdg { transform: translateX(calc(4px * var(--dir))); } }
.card[aria-pressed="true"] { background: var(--night); color: var(--on-night); box-shadow: none; }
.card[aria-pressed="true"] small { color: var(--on-night-72); }
.card[aria-pressed="true"] .card__ico { background: rgba(245, 248, 244, .1); }
.card[aria-pressed="true"] .card__ico img { filter: invert(1); }
.card[aria-pressed="true"] .bdg { background: var(--go); color: var(--ink); }
.card[aria-pressed="true"]:focus-visible { outline-color: var(--deep); }

/* ---------- inner page hero: a night slab rounded at the bottom ---------- */
.phero { position: relative; isolation: isolate; overflow: hidden; background: var(--night); border-radius: 0 0 var(--r-card) var(--r-card); padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 3.5rem; }
.phero h1 { max-width: 18ch; }
.phero .lead { margin-top: 1.25rem; }
.phero .wm { position: absolute; inset-inline: 0; bottom: -2.4vw; z-index: -1; font-size: 12.6vw; color: rgba(245, 248, 244, .05); }
@media (min-width: 1024px) { .phero { padding-top: calc(var(--nav-h) + 5rem); padding-bottom: max(6rem, 10.5vw); } }

/* ---------- join: two columns, the form in a card ---------- */
.split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; } .split__side { position: sticky; top: calc(var(--nav-h) + 1.5rem); } }
.panel { margin-top: 4rem; scroll-margin-top: calc(var(--nav-h) + 1rem); }
.panel h2:focus { outline: none; }
.pitch { counter-reset: row; margin-top: 2rem; border-top: 1px solid var(--hair); }
.pitch li { counter-increment: row; display: grid; grid-template-columns: 2rem 1fr; column-gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hair); }
.pitch li::before { content: "0" counter(row); font-family: var(--latin); font-size: max(16px, .875rem); font-weight: 500; color: var(--ink-62); padding-top: .35rem; }
.pitch h3 { font-size: clamp(1.375rem, 1.9vw, 1.75rem); line-height: var(--display-lh); }
.pitch p { grid-column: 2; margin-top: .125rem; color: var(--ink-70); }
.fcard { border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--hair); padding: 1.5rem 1.25rem; min-width: 0; }
@media (min-width: 640px) { .fcard { padding: 2.5rem; } }

/* fields: softly filled, no border until focus */
.field, fieldset { margin-top: 1.75rem; border: 0; min-width: 0; }
form > :first-child, form > .summary[hidden] + * { margin-top: 0; }
.field label, legend { display: block; font-size: var(--t-body); font-weight: 700; padding: 0; margin-bottom: .625rem; }
.field input, .field select { display: block; width: 100%; min-height: var(--tap); padding: .75rem 1rem; border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--surface); font-size: max(18px, 1.125rem); line-height: 1.4; outline: none; -webkit-appearance: none; appearance: none; transition: background .25s, border-color .25s, box-shadow .25s; scroll-margin-block: 7rem; }
@media (hover: hover) { .field input:hover, .field select:hover { background: var(--surface-2); } }
.field input:focus, .field select:focus { background: var(--card); border-color: var(--ink); box-shadow: 0 0 0 .1875rem rgba(11, 122, 62, .24); }
.field input[type="tel"] { direction: ltr; text-align: right; font-family: var(--latin); font-weight: 500; }
html[dir="ltr"] .field input[type="tel"] { text-align: left; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-size: .45rem .45rem, .45rem .45rem; background-repeat: no-repeat; background-position: 1.25rem 55%, 1.7rem 55%; padding-inline-end: 3rem; }
html[dir="ltr"] .field select { background-position: calc(100% - 1.7rem) 55%, calc(100% - 1.25rem) 55%; }
.field [aria-invalid="true"] { border-color: var(--brick); background: rgba(139, 44, 44, .06); }
/* choices are chips; the chosen one turns ink */
.opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.opts label { position: relative; display: block; }
.opts input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.opt { display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: var(--tap); padding: .25rem 1.5rem; border-radius: var(--r-pill); background: var(--surface); font-size: var(--t-body); font-weight: 500; transition: background .25s, color .25s, transform var(--spring-hover-d) var(--spring-hover); }
@media (hover: hover) { .opts label:hover .opt { background: var(--surface-2); } }
.opts input:active + .opt { transform: scale(.97); }
.opts input:checked + .opt { background: var(--night); color: var(--on-night); }
.opts input:focus-visible + .opt { outline: 2px solid var(--accent); outline-offset: 3px; }
fieldset[aria-invalid="true"] .opt { box-shadow: 0 0 0 1px var(--brick); }
/* plans: small night cards, the price in amber (amber is for prices only) */
.opts.plans { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 640px) { .opts.plans { grid-template-columns: repeat(3, 1fr); } }
.opts.plans .opt { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; min-height: 4.5rem; padding: 1rem 1.25rem; border-radius: var(--r-card-sm); background: var(--night); color: var(--on-night); box-shadow: 0 0 0 0 var(--go); transition: box-shadow .3s, transform var(--spring-hover-d) var(--spring-hover); }
@media (min-width: 640px) { .opts.plans .opt { flex-direction: column; align-items: flex-start; gap: 1.25rem; min-height: 8.5rem; } }
.opts.plans label:hover .opt { background: var(--night); }
.opt b { font-family: var(--latin); font-size: max(18px, 1.25rem); }
.opt .price { font-family: var(--latin); font-weight: 700; font-size: max(22px, 1.75rem); color: var(--amber); direction: ltr; unicode-bidi: isolate; }
.opt .per { font-size: var(--t-small); color: var(--on-night-72); }
.opts.plans input:checked + .opt { background: var(--night); box-shadow: inset 0 0 0 3px var(--go); }
.opts.plans input:checked + .opt b::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-inline-start: .5rem; border-radius: 50%; background: var(--go); vertical-align: middle; }
.hintline { margin-top: .75rem; color: var(--ink-70); }
.err { margin-top: .5rem; color: var(--brick); font-size: var(--t-small); font-weight: 700; }
.summary { margin-bottom: 1.75rem; padding: 1rem 1.25rem; border-radius: var(--r-ctl); border: 1px solid var(--brick); background: rgba(139, 44, 44, .06); color: var(--brick); font-weight: 700; }
/* privacy notice beside the contact fields, and the separate, optional marketing consent */
.notice { margin-top: 2rem; padding: 1.25rem; border-radius: var(--r-card-sm); background: var(--surface); font-size: var(--t-small); color: var(--ink-70); }
.notice a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.opts.consent { margin-top: 1rem; display: block; }
.opts.consent .opt { display: flex; justify-content: flex-start; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--r-card-sm); background: transparent; box-shadow: 0 0 0 1px var(--hair); font-size: var(--t-small); font-weight: 500; white-space: normal; text-align: start; }
.opts.consent .opt::before { content: ""; flex: none; width: 1.5rem; height: 1.5rem; margin-top: .15rem; border-radius: .375rem; border: 2px solid var(--ink); background: var(--card); transition: background .2s, box-shadow .2s; }
.opts.consent input:checked + .opt { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.opts.consent input:checked + .opt::before { background: var(--night); box-shadow: inset 0 0 0 .25rem var(--go); }
.form-actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }
/* something not known yet, left visibly blank rather than invented */
.blank { border: 1px dashed var(--ink); border-radius: .5rem; padding: .05em .5em; font-weight: 700; color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.on-ink .blank { border-color: var(--on-night); color: var(--on-night); }
.done { padding: .5rem 0; }
.done:focus { outline: none; }
.done h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: var(--display-lh); }
.done p { margin-top: .75rem; color: var(--ink-70); max-width: 34rem; }

/* ---------- legal pages: heading on one side, text on the other, hairlines between ---------- */
.legal { padding-block: 3rem 5rem; }
@media (min-width: 1024px) { .legal { padding-block: 4.5rem 7rem; } }
.draft { display: flex; gap: .75rem; align-items: baseline; padding: 1.25rem 1.5rem; margin-bottom: 2.5rem; border-radius: var(--r-card-sm); background: var(--surface); font-weight: 700; }
.draft::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--brick); flex: none; transform: translateY(-.1em); }
.legal section { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-block: 2.25rem; border-top: 1px solid var(--hair); scroll-margin-top: var(--nav-h); }
@media (min-width: 900px) { .legal section { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; padding-block: 3rem; } }
.legal h2 { font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: var(--display-lh); }
.legal section > div > * + * { margin-top: .875rem; }
.legal p, .legal li { color: var(--ink-70); max-width: 40rem; }
.legal .fcard label, .legal .fcard h3 { color: var(--ink); }
.legal .fcard { max-width: 40rem; }
.plainlist li { position: relative; padding-inline-start: 1.25rem; }
.plainlist li::before { content: ""; position: absolute; inset-inline-start: 0; top: .78em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--accent); }
.legal .after { border-top: 1px solid var(--hair); padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* ---------- search: suggestions, results, "did you mean", the honest empty state ---------- */
.status h1 { font: inherit; }
.suggest { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.suggest:empty { display: none; }
.spage { padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 5rem; min-height: 80vh; }
.spage h1 { margin-bottom: 1.5rem; }
.results-wrap { margin-top: 2rem; }
.results-wrap > * + * { margin-top: 1.5rem; }
.results-wrap .eyebrow { margin-bottom: 0; }
.dym { font-weight: 700; }
.empty { padding: 1.75rem; border-radius: var(--r-card); background: var(--card); box-shadow: 0 0 0 1px var(--hair); }
@media (min-width: 640px) { .empty { padding: 2.5rem; } }
.empty p { margin-top: .75rem; color: var(--ink-70); max-width: 36rem; }
.browse .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.price-tag { font-size: max(20px, 1.5rem); }
a.row { color: inherit; }
/* questions and answers: hairline rows that open */
.faq { border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: max(4.5rem, 64px); padding: .75rem; border-radius: var(--r-card-sm); cursor: pointer; list-style: none; font-family: var(--display); font-weight: var(--display-weight); font-size: clamp(1.375rem, 2vw, 1.875rem); line-height: var(--display-lh); transition: background .3s; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .75rem; height: .75rem; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform 420ms var(--spring-press); }
.faq details[open] summary::after { transform: translateY(15%) rotate(225deg); }
@media (hover: hover) { .faq summary:hover { background: var(--surface); } }
.faq details p { padding: 0 .75rem 1.5rem; color: var(--ink-70); max-width: 44rem; }
.langs { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: 2rem; }
.langs a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); font-weight: 500; color: var(--on-night-72); }
.langs a[aria-current="true"] { color: var(--on-night); font-weight: 700; text-decoration: underline; text-underline-offset: .35em; }
.langs a[lang="ar"] { font-family: "IBM Plex Sans Arabic", var(--latin); } .langs a[lang="he"] { font-family: "IBM Plex Sans Hebrew", var(--latin); } .langs a[lang="en"] { font-family: var(--latin); }

/* ---------- footer: a night slab rounded at the top ---------- */
.foot { position: relative; overflow: hidden; border-radius: var(--r-card) var(--r-card) 0 0; background: var(--night); padding-block: 5rem 9rem; }
@media (min-width: 1024px) { .foot { padding-top: 6rem; padding-bottom: 12vw; } }
.foot > .wrap { position: relative; z-index: 1; }
.foot__line { max-width: 20ch; }
.foot__cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.foot__cta .num { font-size: max(18px, 1.125rem); }
.foot__cols { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--hair-night); }
@media (min-width: 720px) { .foot__cols { grid-template-columns: repeat(3, 1fr); } }
.foot__cols .eyebrow { margin-bottom: .5rem; }
.foot__cols li a, .foot__cols li button { display: inline-flex; align-items: center; gap: .625rem; min-height: var(--tap); min-width: var(--tap); font-size: var(--t-body); font-weight: 500; color: var(--on-night); transition: transform var(--spring-hover-d) var(--spring-hover), color .25s; }
@media (hover: hover) { .foot__cols li a:hover, .foot__cols li button:hover { transform: translateX(calc(4px * var(--dir))); color: var(--go); } }
/* social links: Instagram now; TikTok and Facebook get their own <li> here when the accounts exist */
.social { margin-top: .25rem; }
.foot__base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--hair-night); color: var(--on-night-72); font-size: var(--t-small); }
.foot .wm { position: absolute; inset-inline: 0; bottom: -1.5vw; z-index: 0; font-size: 12.6vw; color: rgba(245, 248, 244, .05); }
.copied { color: var(--go); font-weight: 700; }

/* ---------- dock: one bottom element after about a screen of scrolling ---------- */
.dock { position: fixed; z-index: 50; inset-inline: .75rem; bottom: max(.75rem, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .375rem; padding: .375rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--night) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--on-night); --accent: var(--go); box-shadow: 0 0 0 1px rgba(245, 248, 244, .14);
  transform: translateY(calc(100% + 1.5rem)); opacity: 0; visibility: hidden; }
.dock.is-on { transform: none; opacity: 1; visibility: visible; }
.dock__top { width: var(--tap); height: var(--tap); flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(245, 248, 244, .1); font-size: 1.125rem; }
.dock__top svg { transform: rotate(-90deg); }
.dock .pill { flex: 1 1 0; min-width: 0; }
.dock .pill.outline { flex: 0 1 auto; padding-inline: 1.25rem; }
@media (min-width: 720px) { .dock { inset-inline: auto; left: 50%; margin-left: -12rem; width: 24rem; } }

/* ---------- accessibility panel ---------- */
.a11y-fab { position: fixed; z-index: 70; left: 0; top: 55%; width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; background: var(--night); color: var(--on-night); box-shadow: 0 0 0 2px var(--snow); transform: translateX(-38%); transition: transform var(--spring-hover-d) var(--spring-hover); font-size: 1.5rem; }
.a11y-fab:hover, .a11y-fab:focus-visible, .a11y-fab[aria-expanded="true"] { transform: translateX(.5rem); }
.a11y-fab:focus-visible { outline: 2px solid var(--deep); outline-offset: 4px; }
.a11y-panel { position: fixed; z-index: 80; left: .75rem; right: .75rem; bottom: .75rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; padding: 1.25rem; border-radius: var(--r-card); background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--hair-strong), 0 1.5rem 3rem rgba(11, 21, 18, .18); }
@media (min-width: 720px) { .a11y-panel { right: auto; bottom: auto; left: 4.75rem; width: 26rem; } }
.a11y-panel:focus { outline: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a11y-head h2 { font-size: max(20px, 1.5rem); }
.a11y-close { width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: 50%; background: var(--surface); font-size: 1.25rem; }
.a11y-step { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding: .5rem .5rem .5rem 1rem; border-radius: var(--r-card-sm); background: var(--surface); font-weight: 700; }
html[dir="rtl"] .a11y-step { padding: .5rem 1rem .5rem .5rem; }
.a11y-step span:last-child { display: flex; align-items: center; gap: .5rem; }
.a11y-step button { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--card); font-size: 1.5rem; font-weight: 700; font-family: var(--latin); }
.a11y-step button:disabled { opacity: .4; cursor: default; }
.a11y-step output { min-width: 3.5rem; text-align: center; font-family: var(--latin); direction: ltr; }
.a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .5rem; }
.a11y-grid button { display: flex; align-items: center; gap: .625rem; min-height: var(--tap); padding: .5rem 1rem; border-radius: var(--r-card-sm); background: var(--surface); font-size: var(--t-small); font-weight: 500; text-align: start; transition: background .25s, color .25s; }
.a11y-grid button::before { content: ""; width: .625rem; height: .625rem; border-radius: 50%; border: 2px solid currentColor; flex: none; }
.a11y-grid button[aria-pressed="true"] { background: var(--night); color: var(--on-night); font-weight: 700; }
.a11y-grid button[aria-pressed="true"]::before { background: var(--go); border-color: var(--go); }
.a11y-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-top: .75rem; font-size: var(--t-small); color: var(--ink-70); }
.a11y-foot a, .a11y-foot button { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: .3em; }
.a11y-foot p { flex-basis: 100%; }

/* ============ iOS feel ============
   Springs are the ELT app's: "card" {damping 18, stiffness 220, mass .9} for thumbs and sheets (about 7% overshoot, 520 ms),
   "press" {damping 16, stiffness 420, mass .6} for presses (420 ms). They are written as linear() easings; browsers without
   linear() fall back to a cubic-bezier with a little overshoot. Only transform and opacity move (label colour cross-fades). */
:root { --spring-card: cubic-bezier(.3, 1.3, .5, 1); --spring-press: cubic-bezier(.3, 1.5, .5, 1); --press: .965; }
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring-card: linear(0, 0.043 3.8%, 0.148 7.7%, 0.286 11.5%, 0.436 15.4%, 0.582 19.2%, 0.713 23.1%, 0.824 26.9%, 0.912 30.8%, 0.978 34.6%, 1.024 38.5%, 1.053 42.3%, 1.069 46.2%, 1.073 50%, 1.071 53.8%, 1.063 57.7%, 1.053 61.5%, 1.042 65.4%, 1.031 69.2%, 1.022 73.1%, 1.013 76.9%, 1.007 80.8%, 1.002 84.6%, 0.998 88.5%, 0.996 92.3%, 0.995 96.2%, 1); --spring-press: linear(0, 0.078 3.8%, 0.264 7.7%, 0.492 11.5%, 0.715 15.4%, 0.901 19.2%, 1.037 23.1%, 1.12 26.9%, 1.156 30.8%, 1.157 34.6%, 1.134 38.5%, 1.1 42.3%, 1.063 46.2%, 1.03 50%, 1.004 53.8%, 0.987 57.7%, 0.977 61.5%, 0.974 65.4%, 0.976 69.2%, 0.981 73.1%, 0.987 76.9%, 0.993 80.8%, 0.997 84.6%, 1.001 88.5%, 1.003 92.3%, 1.004 96.2%, 1); }
}
/* presses: shrink fast, spring back on release */
.pill, .card, .opt, .nav__menu, .dock__top, .a11y-close, .a11y-step button, .a11y-grid button, .villages button, .nav__links a, .alink, .foot__cols li a, .foot__cols li button, .brand {
  transition: transform 420ms var(--spring-press), background .25s, color .25s, border-color .25s, box-shadow .3s, opacity .2s; }
.pill:active, .card:active, .nav__menu:active, .dock__top:active, .a11y-close:active, .a11y-step button:active, .a11y-grid button:active, .villages button:active, .nav__links a:active, .alink:active, .foot__cols li a:active, .foot__cols li button:active, .brand:active,
.opts label:active .opt {
  transform: scale(var(--press)); transition-duration: 110ms, .25s, .25s, .25s, .3s, .2s; transition-timing-function: cubic-bezier(.3, 0, .5, 1), ease, ease, ease, ease, ease; }
.pill .bdg svg { transition: transform 420ms var(--spring-press); }
.pill:active .bdg svg { transform: translateX(calc(7px * var(--dir))) scaleX(var(--dir)); transition-duration: 110ms; }
.a11y-fab { transition: transform 520ms var(--spring-card); }
.a11y-fab:active { transform: translateX(.5rem) scale(var(--press)); transition-duration: 110ms; }

/* segmented controls: one thumb slides between equal cells (js/ios.js moves it) */
.seg--on { position: relative; }
.seg__thumb { position: absolute; left: 0; top: 0; z-index: 0; border-radius: var(--r-pill); background: var(--night); pointer-events: none; opacity: 0; will-change: transform; transform-origin: 50% 50%; }
.seg--on > button, .seg--on > .card, .seg--on > [data-lang], .seg--on > [data-mode] { position: relative; z-index: 1; }
.lang.seg--on, .mode.seg--on { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
/* the weight stays the same when chosen, so nothing reflows while the thumb travels */
.lang.seg--on [data-lang], .mode.seg--on [data-mode] { font-weight: 500 !important; background: transparent !important; transition: color .24s, transform 420ms var(--spring-press); touch-action: pan-y; }
.lang.seg--on [data-lang] { padding: 0 1rem; }
.nav.is-ink .lang .seg__thumb, body[data-hero="night"] .nav.is-over .lang .seg__thumb, .nav.is-open .lang .seg__thumb { background: var(--card); }
.lang .seg__thumb { transition: background .35s; }
.mode { padding: 0; gap: 0; }
.mode .seg__thumb { background: var(--fg); transition: background .45s; }
/* chip groups with one answer: the chip backgrounds stay put, the ink thumb travels over them, the labels sit on top */
.opts.seg--on { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 640px) { .opts.seg--on { grid-template-columns: repeat(var(--n, 3), 1fr); } }
.opts.seg--on label { border-radius: var(--r-pill); background: var(--surface); touch-action: pan-y; }
.opts.seg--on .seg__thumb { z-index: 1; }
.opts.seg--on .opt { position: relative; z-index: 2; width: 100%; background: transparent !important; padding-inline: .75rem; transition: color .24s, transform 420ms var(--spring-press); }
.opts.seg--on input { z-index: 3; }
.opts.seg--on input:checked + .opt { color: var(--on-night); }
/* plans: the cells are night cards, the thumb is the green ring */
.opts.plans.seg--on { grid-template-columns: 1fr; }
@media (min-width: 640px) { .opts.plans.seg--on { grid-template-columns: repeat(3, 1fr); } }
.opts.plans.seg--on label { border-radius: var(--r-card-sm); background: var(--night); }
.opts.plans.seg--on input:checked + .opt { box-shadow: none; }
.seg__thumb--ring { z-index: 2 !important; background: transparent; border-radius: var(--r-card-sm); box-shadow: inset 0 0 0 3px var(--go); }
/* business or driver: the ink card slides between the two */
.cards.seg--on .seg__thumb--card { z-index: 1; border-radius: var(--r-card); }
/* the cards never transform themselves here (that would trap their content under the thumb); their content does */
.cards.seg--on > .card { z-index: auto; transform: none !important; }
.cards.seg--on > .card > * { position: relative; z-index: 2; transition: transform 420ms var(--spring-press); }
.cards.seg--on > .card:active > * { transform: scale(var(--press)); transition-duration: 110ms; }
.cards.seg--on > .card[aria-pressed="true"] { background: var(--card); box-shadow: 0 0 0 1px var(--hair); transition: transform 420ms var(--spring-press), color .28s; }
.cards.seg--on > .card { transition: transform 420ms var(--spring-press), color .28s; }
.cards.seg--on > .card .card__ico, .cards.seg--on > .card .bdg, .cards.seg--on > .card small, .cards.seg--on > .card .card__ico img { transition: background .28s, color .28s, filter .28s, transform 420ms var(--spring-press); }
@media (hover: hover) { .cards.seg--on > .card[aria-pressed="true"]:hover { transform: none; } }
.seg--drag { cursor: grabbing; }

/* language change: text fades out (180 ms), swaps, fades in (240 ms); the page keeps its place */
html.lang-out [data-i18n], html.lang-out [data-i18n-placeholder] { opacity: 0 !important; transition: opacity 180ms linear !important; }
html.lang-in [data-i18n], html.lang-in [data-i18n-placeholder] { transition: opacity 240ms linear !important; }

/* sheets and panels: spring open from where they were triggered, close faster than they open */
.sheet { transform: scale(.86); transform-origin: var(--ox, 90%) var(--oy, 2.4rem); transition: transform 230ms cubic-bezier(.4, 0, 1, 1), opacity 200ms, visibility 230ms; will-change: transform; }
.sheet.is-open { transform: none; transition: transform 520ms var(--spring-card), opacity 240ms, visibility 0s; }
.sheet.is-pulled, .a11y-panel.is-pulled { transition: none !important; }
.a11y-panel { display: block; opacity: 0; transform: translateY(105%); transition: transform 230ms cubic-bezier(.4, 0, 1, 1), opacity 200ms; will-change: transform; }
.a11y-panel.is-open { opacity: 1; transform: none; transition: transform 520ms var(--spring-card), opacity 220ms; }
@media (min-width: 720px) {
  .a11y-panel { top: 50%; translate: 0 -50%; transform: scale(.82); transform-origin: -3rem 55%; }
  .a11y-panel.is-open { transform: none; }
}
.dock { transition: transform 520ms var(--spring-card), opacity .3s, visibility .5s; }
.dock:not(.is-on) { transition: transform 230ms cubic-bezier(.4, 0, 1, 1), opacity .2s, visibility .23s; }

/* reduced motion (the device setting or "stop motion"): no overshoot and no travel, a 120 ms fade instead */
@media (prefers-reduced-motion: reduce) {
  .pill:active, .card:active, .nav__menu:active, .dock__top:active, .a11y-close:active, .a11y-step button:active, .a11y-grid button:active, .villages button:active, .nav__links a:active, .alink:active, .foot__cols li a:active, .foot__cols li button:active, .brand:active, .opts label:active .opt, .a11y-fab:active { transform: none; opacity: .6; transition: opacity 120ms linear !important; }
  .pill:hover { transform: none; }
  .sheet, .sheet.is-open, .a11y-panel, .a11y-panel.is-open, .dock { transform: none; transition: opacity 120ms linear, visibility 120ms !important; }
}
html.a11y-motion .pill:active, html.a11y-motion .card:active, html.a11y-motion .opts label:active .opt, html.a11y-motion .villages button:active, html.a11y-motion .a11y-grid button:active { transform: none; opacity: .6; transition: opacity 120ms linear !important; }
html.a11y-motion .pill:hover { transform: none; }
html.a11y-motion .sheet, html.a11y-motion .sheet.is-open, html.a11y-motion .a11y-panel, html.a11y-motion .a11y-panel.is-open, html.a11y-motion .dock { transform: none; transition: opacity 120ms linear, visibility 120ms !important; }

/* the adjustments are classes on <html>, remembered on the device */
html.a11y-gray { filter: grayscale(1); }
html.a11y-invert { filter: invert(1) hue-rotate(180deg); }
html.a11y-gray.a11y-invert { filter: grayscale(1) invert(1); }
html.a11y-contrast { --ink-70: var(--night); --ink-62: var(--night); --on-night-72: #fff; --on-night-60: #fff; --hair: rgba(11, 21, 18, .6); --hair-night: rgba(255, 255, 255, .6); --deep: #064A25; --surface: #E2EAE3; }
html.a11y-contrast .hero-wm, html.a11y-contrast .wm { display: none; }
html.a11y-links a:not(.pill):not(.brand):not(.card) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .25em; outline: 1px dashed currentColor; outline-offset: 2px; }
html.a11y-readable { --sans: Arial, "Helvetica Neue", sans-serif; --display: Arial, "Helvetica Neue", sans-serif; --latin: Arial, "Helvetica Neue", sans-serif; }
html.a11y-readable body { letter-spacing: .01em; line-height: 1.7; }
html.a11y-images img { visibility: hidden; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.6L16 20l-3 1.4-3.5-7.4L5 18z' fill='%230B1512' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { transition-duration: .01s !important; animation-duration: .01s !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01s !important; animation-duration: .01s !important; }
}