/* ═══════════════════════════════════════════════════════════
   Lanua Studio — a home for movement
   Palette drawn from the mark: warm clay on unbleached linen.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Three brand colours, each with a job:
       clay  #a98777 — identity and accent (mark, logotype, hovers)
       sand  #e2d9cf — warm surfaces, used at full strength, not as a tint
       sage  #a3ad99 — the cool counterweight; also the dark surface, deepened
     Paper is kept close to neutral so the three read as colour on it
     rather than dissolving into one beige. */
  --clay:        #a98777;
  --clay-deep:   #7d5a4b;   /* clay at text weight — 5.5:1 on paper */
  --clay-soft:   #cdb5a7;   /* clay → sand, for gradients */
  --sand:        #e2d9cf;
  --sage:        #a3ad99;   /* decorative only — 2.1:1, never small text */
  --sage-deep:   #5c6657;   /* sage at text weight — 5.4:1 on paper */
  --forest:      #2b322b;   /* sage deepened: every dark surface */

  --linen:       #f4f4f0;   /* page */
  --linen-warm:  var(--sand);
  --shell:       #fbfbf8;   /* cards */
  --ink:         #22231f;   /* text */
  --ink-soft:    #4a463f;
  --ink-faint:   #6b675f;
  --line:        rgba(34, 35, 31, .14);

  /* type */
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --gut: clamp(1.25rem, 5vw, 3.5rem);
  --sec: clamp(5rem, 12vw, 10rem);
  --maxw: 1240px;

  --ease: cubic-bezier(.22, 1, .36, 1);

  /* curtain and footer must be the same height for the reveal to line up.
     Three quarters of the viewport, floored so the links never clip on short
     screens and capped so the fixed footer never outgrows the viewport. */
  --footer-h: min(100svh, max(75svh, 28rem));
}

/* Inter carries no Hebrew glyphs, so Hebrew runs on Assistant. Latin inside a
   Hebrew page is drawn by Assistant too, to keep one voice on the page. */
html[lang="he"] {
  --sans: "Assistant", "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* ── reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* our display rules must not out-rank the hidden attribute */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

body {
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .95rem + .2vw, 1.075rem);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--clay); color: var(--shell); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); position: relative; }

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

.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 200; background: var(--forest); color: var(--shell);
  padding: .75rem 1.25rem; border-radius: 0 0 4px 4px;
  text-decoration: none; font-size: .8rem; letter-spacing: .08em;
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

:focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 3px; border-radius: 4px; }

/* ── film grain over everything ────────────────────────── */
.grain {
  position: fixed; inset: -4%;
  z-index: 999; pointer-events: none;
  opacity: .34; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.5'/></svg>");
  animation: grainshift 6s steps(6) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, -1%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ── shared type ───────────────────────────────────────── */
.eyebrow {
  font-size: .72rem; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--clay-deep);
}
.sechead { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.sechead--center { text-align: center; }
.sechead__title {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  font-weight: 200; line-height: 1.06;
  letter-spacing: -.035em; margin-top: 1.1rem;
}
.sechead__title em { font-style: normal; font-weight: 300; color: var(--clay-deep); }

.lede {
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.7; max-width: 46ch; margin-top: 1.5rem;
  color: var(--ink-soft);
}
.lede--muted { color: var(--ink-faint); }

/* ── buttons ───────────────────────────────────────────── */
.btn {
  --pad: .95rem 2.1rem;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem; padding: var(--pad);
  font-size: .78rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--ink); border-radius: 4px;
  background: none; color: var(--ink); cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--forest); border-radius: inherit;
  transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:hover::after { transform: translateY(0); }

.btn--solid { background: var(--forest); color: var(--shell); border-color: var(--forest); }
.btn--solid::after { background: var(--clay); transform: translateY(101%); }
.btn--solid:hover { color: var(--ink); border-color: var(--clay); }

.btn--ghost { border-color: var(--line); color: var(--ink-soft); }
.btn--ghost::after { background: var(--linen-warm); }
.btn--ghost:hover { color: var(--ink); border-color: var(--ink); }

.btn--lg { --pad: 1.15rem 2.9rem; font-size: .82rem; }
.btn--block { width: 100%; margin-top: .5rem; }
.btn[disabled] { pointer-events: none; opacity: .55; }

/* ── topbar ────────────────────────────────────────────── */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.1rem var(--gut);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--linen) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), padding .4s var(--ease);
}
.topbar.is-stuck { padding-block: .7rem; border-bottom-color: var(--line); }

.topbar__mark {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink); margin-inline-end: auto;
}
.mark { width: 1.9rem; height: 1.9rem; color: var(--clay); flex: none; }
.mark--lg { width: 3.25rem; height: 3.25rem; }
.topbar__word { width: 5.4rem; height: auto; fill: var(--ink); }

.topbar__status {
  display: none; align-items: center; gap: .5rem;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar__status i {
  width: 6px; height: 6px; border-radius: 4px; background: var(--sage);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 60%, transparent);
  animation: pulse 2.6s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sage) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.topbar__lang {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-faint);
  padding: .35rem .6rem; border: 1px solid var(--line); border-radius: 4px;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.topbar__lang:hover { color: var(--ink); border-color: var(--ink); }

.topbar__cta {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding-bottom: .2rem; border-bottom: 1px solid var(--line);
  transition: border-color .35s var(--ease), color .35s var(--ease);
}
.topbar__cta:hover { color: var(--clay-deep); border-color: var(--clay); }

@media (min-width: 720px) { .topbar__status { display: inline-flex; } }

/* ── hero ──────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: grid; place-items: center;
  padding: 8rem var(--gut) 6rem;
  text-align: center; overflow: hidden;
}

.hero__arch {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center; pointer-events: none;
}
.hero__glow {
  /* larger than the section on every side: a fixed box would show its own
     edge wherever the gradient had not faded out yet, and the drift
     animation would drag that edge into view */
  position: absolute; inset: -25%;
  background:
    radial-gradient(circle at 62% 38%, color-mix(in srgb, var(--clay) 22%, transparent) 0%, transparent 55%),
    radial-gradient(circle at 36% 58%, color-mix(in srgb, var(--sage) 24%, transparent) 0%, transparent 52%);
  filter: blur(18px);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.hero__inner { position: relative; z-index: 1; display: grid; justify-items: center; }

.hero__title { display: grid; justify-items: center; margin-top: 1.75rem; }

/* the brand logotype, drawn letter by letter, left to right */
.hero__logo {
  width: min(82vw, 44rem); height: auto;
  overflow: visible;
}
.hero__logo path {
  fill: var(--clay-deep);
  transform-box: fill-box; transform-origin: 50% 100%;
  opacity: 0; transform: translateY(18%);
  animation: riseIn 1.15s var(--ease) forwards;
}
.hero__logo path:nth-child(1) { animation-delay: 140ms; }
.hero__logo path:nth-child(2) { animation-delay: 235ms; }
.hero__logo path:nth-child(3) { animation-delay: 330ms; }
.hero__logo path:nth-child(4) { animation-delay: 425ms; }
.hero__logo path:nth-child(5) { animation-delay: 520ms; }
@keyframes riseIn {
  to { opacity: 1; transform: translateY(0); }
}

.hero__sub {
  font-style: normal; font-weight: 300;
  font-size: clamp(1.2rem, 3vw, 2rem);
  color: var(--clay-deep); margin-top: 1.1rem; letter-spacing: -.02em;
}

.hero__note {
  max-width: 48ch; margin-top: 2rem;
  color: var(--ink-soft); font-size: 1.02rem;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center;
  margin-top: 2.6rem;
}

.scrollcue {
  position: absolute; bottom: 2.2rem; left: 50%; translate: -50% 0;
  z-index: 1; display: grid; justify-items: center; gap: .7rem;
  text-decoration: none; color: var(--ink-faint);
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
}
.scrollcue__line {
  width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--sage));
  transform-origin: top;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%       { transform: scaleY(0); opacity: 0; }
  35%      { opacity: 1; }
  70%, 100%{ transform: scaleY(1); opacity: 0; }
}
.scrollcue:hover { color: var(--ink); }

/* ── marquee ribbon ────────────────────────────────────── */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--linen-warm);
  padding-block: 1.15rem;
  overflow: hidden; user-select: none;
}
.marquee__track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: slide 46s linear infinite;
}
.marquee__track span {
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); font-weight: 300;
  letter-spacing: -.01em; white-space: nowrap; color: var(--ink);
}
.marquee__track i { color: var(--sage); font-style: normal; font-size: .8rem; }
@keyframes slide { to { transform: translateX(-33.333%); } }

/* ── practice cards ────────────────────────────────────── */
.cards {
  list-style: none; padding: 0;
  display: grid; gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px; overflow: hidden;
}
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(4, 1fr); } }

.card {
  --pad-y: clamp(2rem, 3.5vw, 2.9rem);
  --pad-x: clamp(1.5rem, 2.5vw, 2rem);
  position: relative; isolation: isolate;
  background: var(--shell);
  padding: var(--pad-y) var(--pad-x) clamp(2.4rem, 4vw, 3.2rem);
  transition: background .5s var(--ease);
}

/* the cover bleeds to the card edges, so it cancels the card's own padding */
.card__cover {
  display: block; overflow: hidden;
  margin: calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) clamp(1.5rem, 2.5vw, 2rem);
  background: var(--linen-warm);
}
.card__cover img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform .9s var(--ease);
}
.card:hover .card__cover img { transform: scale(1.04); }
.card:hover { background: var(--sand); }

.card__num {
  font-size: .7rem; letter-spacing: .28em; color: var(--clay-deep);
}
.card__title {
  margin-top: .9rem;
  font-weight: 400;
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.25; letter-spacing: -.02em;
}
.card__body { margin-top: .9rem; color: var(--ink-soft); font-size: .96rem; }
.card__body p + p { margin-top: .75rem; }

/* ── waitlist ──────────────────────────────────────────── */
.waitlist { background: var(--sand); border-block: 1px solid var(--line); }
.waitlist::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(65% 60% at 82% 16%,
              color-mix(in srgb, var(--sage) 34%, transparent), transparent 72%);
}
.waitlist__grid { position: relative; display: grid; gap: clamp(3rem, 6vw, 5rem); align-items: start; }
@media (min-width: 940px) { .waitlist__grid { grid-template-columns: 1fr minmax(400px, .82fr); } }


.formcard {
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 30px 70px -50px rgba(34, 29, 24, .55);
}
.formcard__title {
  font-weight: 400; font-size: 1.25rem; letter-spacing: -.02em;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
}

.form { display: grid; gap: 1.4rem; }

.field { position: relative; }
.field input {
  width: 100%; padding: 1.35rem .2rem .55rem;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; font-size: 1rem; font-weight: 300;
  transition: border-color .35s var(--ease);
}
.field label {
  position: absolute; inset-inline-start: .2rem; top: 1.25rem;
  font-size: .95rem; color: var(--ink-faint);
  pointer-events: none; transform-origin: left top;
  transition: transform .3s var(--ease), color .3s var(--ease);
}
.field input:focus { outline: none; border-bottom-color: var(--clay); }
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  transform: translateY(-1.2rem) scale(.72);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--clay-deep);
}
.field.has-error input { border-bottom-color: #b4553f; }
.err {
  display: block; min-height: 1.1rem; margin-top: .35rem;
  font-size: .72rem; letter-spacing: .04em; color: #b4553f;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

#submit-btn .btn__spinner {
  width: 0; height: .9rem; aspect-ratio: 1;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; opacity: 0;
  transition: width .3s var(--ease), opacity .3s var(--ease);
}
#submit-btn.is-busy .btn__spinner {
  width: .9rem; opacity: 1; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.form__fine { font-size: .74rem; color: var(--ink-faint); text-align: center; letter-spacing: .02em; }
.form__status:empty { display: none; }
.form__status {
  font-size: .82rem; text-align: center; color: #b4553f;
  padding: .6rem .8rem; border-radius: 4px;
  background: color-mix(in srgb, #b4553f 8%, transparent);
}

/* thank-you state */
.thanks { display: grid; justify-items: center; text-align: center; padding: 1.5rem 0 1rem; }
.thanks__mark {
  width: 3.6rem; height: 3.6rem; display: grid; place-items: center;
  border: 1px solid var(--sage); border-radius: 4px; color: var(--clay-deep);
  animation: popIn .7s var(--ease) both;
}
.thanks__mark svg { width: 55%; }
.thanks__mark path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: draw .8s var(--ease) .25s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
.thanks__title { font-weight: 300; font-size: 1.6rem; letter-spacing: -.025em; margin-top: 1.4rem; }
.thanks__body { color: var(--ink-soft); max-width: 34ch; margin-top: .75rem; }

/* ── about ─────────────────────────────────────────────── */
.about__grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
@media (min-width: 820px) { .about__grid { grid-template-columns: 1fr 1fr; } }
.about__col { display: grid; gap: 1.3rem; }
.about__col p {
  font-size: clamp(1.02rem, .98rem + .25vw, 1.15rem);
  color: var(--ink-soft); line-height: 1.75;
}
.about__col:first-child p:first-child {
  font-weight: 300; font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.45; letter-spacing: -.02em; color: var(--ink);
}

.pullquote {
  margin: clamp(4rem, 9vw, 7rem) auto 0;
  max-width: 40rem; text-align: center;
  display: grid; justify-items: center; gap: 1.5rem;
}
.pullquote__mark { width: 2.6rem; color: var(--clay); opacity: .85; }
.pullquote blockquote p {
  font-weight: 200; font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  line-height: 1.35; letter-spacing: -.03em;
}
.pullquote figcaption {
  font-size: .72rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--clay-deep);
}

/* ── cinematic footer ──────────────────────────────────────
   The footer is fixed to the viewport and painted behind the
   page; .curtain is a full-height hole that scrolls over it,
   so the footer is uncovered rather than pushed up. main gets
   an opaque background so it hides the footer until then. ── */
main { position: relative; z-index: 1; background: var(--linen); }

.curtain {
  position: relative;
  height: var(--footer-h);
  /* clips the fixed child to this box without becoming its container */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.cfooter {
  position: fixed; bottom: 0; left: 0;
  width: 100%; height: var(--footer-h);
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--forest); color: var(--linen);
  padding: clamp(.75rem, 2vw, 1.5rem) var(--gut) clamp(.9rem, 1.5vw, 1.35rem);
}

.cfooter__glow {
  position: absolute; inset: -20%;
  background:
    radial-gradient(circle at 58% 46%, color-mix(in srgb, var(--clay) 24%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 40% 56%, color-mix(in srgb, var(--sage) 20%, transparent) 0%, transparent 58%);
  pointer-events: none;
}


.cfooter__main {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: center;
  gap: clamp(1.35rem, 3vw, 2.1rem);
  text-align: center;
}
.cfooter__title {
  font-weight: 200;
  font-size: clamp(2.4rem, 7.5vw, 5rem); line-height: 1.04; letter-spacing: -.04em;
}
.cfooter__title em { font-style: normal; font-weight: 300; color: var(--sand); }

.cfooter__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; }

/* glass pills — the magnetic targets */
.pill {
  --pill-face: color-mix(in srgb, var(--linen) 7%, transparent);
  --pill-edge: color-mix(in srgb, var(--linen) 16%, transparent);
  position: relative;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem;
  border: 1px solid var(--pill-edge); border-radius: 4px;
  background: var(--pill-face);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--linen); cursor: pointer;
  font-size: .74rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
  will-change: transform;
}
.pill:hover {
  background: color-mix(in srgb, var(--linen) 14%, transparent);
  border-color: color-mix(in srgb, var(--linen) 34%, transparent);
}
.pill svg { width: 1rem; height: 1rem; transition: transform .35s var(--ease); }
.pill--solid {
  padding: .85rem 2.4rem;
  background: var(--linen); color: var(--ink); border-color: var(--linen);
}
.pill--solid:hover { background: var(--clay); border-color: var(--clay); color: var(--ink); }

/* one centred line: copyright — mark — tagline */
.cfooter__bar {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: .7rem clamp(1rem, 2.5vw, 1.75rem);
  padding-top: clamp(.75rem, 2vw, 1.25rem);
  text-align: center;
}
.cfooter__legal,
.cfooter__tag {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--linen) 55%, transparent);
}
.cfooter__mark { width: 2.7rem; height: 2.7rem; color: var(--clay); flex: none; }

/* ── right-to-left ─────────────────────────────────────────
   Only the handful of things that do not mirror on their own. ── */
[dir="rtl"] .field label { transform-origin: right top; }
[dir="rtl"] .marquee__track { animation-name: slide-rtl; }
@keyframes slide-rtl { to { transform: translateX(33.333%); } }

/* Hebrew has no uppercase and no tolerance for wide tracking: the Latin
   small-caps treatment turns into scattered letters. Tighten it, and drop
   the negative display tracking that would collide the glyphs. */
html[lang="he"] .eyebrow,
html[lang="he"] .btn,
html[lang="he"] .pill,
html[lang="he"] .topbar__cta,
html[lang="he"] .topbar__status,
html[lang="he"] .topbar__lang,
html[lang="he"] .scrollcue,
html[lang="he"] .cfooter__legal,
html[lang="he"] .cfooter__tag,
html[lang="he"] .form__fine { letter-spacing: .06em; }
html[lang="he"] .sechead__title,
html[lang="he"] .cfooter__title,
html[lang="he"] .hero__sub,
html[lang="he"] .card__title,
html[lang="he"] .formcard__title,
html[lang="he"] .thanks__title,
html[lang="he"] .pullquote blockquote p,
html[lang="he"] .about__col:first-child p:first-child { letter-spacing: 0; }
html[lang="he"] .marquee__track span { letter-spacing: 0; }

/* ── scroll reveal ─────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(1.4rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── motion & print courtesies ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__logo path { opacity: 1; transform: none; }
  .pill { transform: none !important; }
  .grain { animation: none; }
}

@media print {
  .grain, .topbar, .scrollcue, .marquee { display: none; }
  body { background: #fff; }
}