.hero__figure-mobile { display: none; }
/* ==========================================================================
   משחק מילים — קליניקה רב-מקצועית
   מימוש HTML/CSS של קובץ הפיגמה "קלינקה משחק מילים"
   ========================================================================== */

:root {
  /* Design tokens (Figma) */
  --cream:      #FAF5F2;
  --orange:     #EA722B;
  --text:       #464442;
  --teal:       #A2CBC7;
  --olive:      #C6B039;
  --peach:      #FCD1B3;
  --pink:       #F9E3D8;
  --pink-mid:   #E5A3A0;
  --pink-deep:  #F7EAE4;
  --gallery-bg: #F7F4EF;
  --stormy:     #323334;
  --field-line: #BFB8AD;
  --field-bg:   #FAF7F5;
  --map-bg:     #F0EBE5;
  --deep-teal:  #2A5055;

  --font-head: "Alef", "Assistant", sans-serif;
  --font-body: "Assistant", "Alef", sans-serif;

  --page: 1440px;
  --gutter: 100px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; font-family: var(--font-head); }
ul { margin: 0; }
button { font: inherit; color: inherit; }

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

/* ---------- shared buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  /* fully rounded rather than a fixed 15px: at 30px tall the two are the same
     shape, but the button is taller now and 15px would read as a rounded box
     instead of the pill the design draws */
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, translate .18s ease, box-shadow .18s ease;
}
/* Hover deepens the fill and lifts the button 2px onto a soft shadow, so it
   comes forward rather than emptying out. The lift uses `translate` rather
   than `transform` on purpose: the reveal animation sets `transform: none`
   on every element it has released, from a more specific selector, and it
   would win. Pressing puts it back down. */
.btn:hover  { translate: 0 -2px; box-shadow: 0 6px 14px rgba(70, 68, 66, .18); }
.btn:active { translate: 0;      box-shadow: 0 1px 3px rgba(70, 68, 66, .16); }
/* a finger has no hover, and a phone would leave the state stuck after a tap */
@media (hover: none) {
  .btn:hover { translate: 0; box-shadow: none; }
  .btn--orange:hover { background: var(--orange); color: var(--cream); }
  .btn--teal:hover, .btn--teal-lg:hover { background: var(--teal); color: var(--text); }
  .btn--cream:hover { background: var(--cream); color: var(--stormy); }
  .contact-band .btn--cream:hover { background: var(--cream); color: var(--stormy); }
}

/* One size for every button on the site, taken from the Figma component
   (725:1595): 140x30, Alef 20/14, 36px either side, radius 15. The larger
   variants were drawn before that component existed. No letter-spacing —
   the component has none, and 1.8px was pushing the box past 140. */
.btn--orange,
.btn--teal,
.btn--teal-lg,
.btn--cream {
  font-size: 20px;
  /* the component's 14px line box is narrower than its own type, which is
     what made the label sit tight against the top and bottom edges. Giving
     the line its full 18px and the box 11px either side takes the button
     from 30 to 40 tall and lets the word breathe. */
  line-height: 18px;
  letter-spacing: 0;
  padding: 11px 36px;
}
.btn--orange   { background: var(--orange); color: var(--cream); }
.btn--teal,
.btn--teal-lg  { background: var(--teal);   color: var(--text); }
.btn--cream    { background: var(--cream);  color: var(--stormy); }

/* One hover colour for the whole site. The label goes dark with it: the cream
   the orange button carries would read at 1.96 against this pink, where the
   text colour reads at 4.4. */
.btn:hover { background: var(--pink-mid); color: var(--text); }
/* except where the invitation is the point — there it goes to the text colour
   itself, reversed out in white */
.contact-band .btn:hover,
.contact-form .btn:hover { background: var(--text); color: #FFFFFF; }

/* ==========================================================================
   Logo
   ========================================================================== */
.logo {
  position: relative;
  display: block;
  width: 144.911px;
  height: 95.775px;
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--text);
  --logo-size: 46.21px;
  --logo-track: -2.3105px;
}
.logo__l1,
.logo__l2 {
  position: absolute;
  font-size: var(--logo-size);
  letter-spacing: var(--logo-track);
  line-height: normal;
  white-space: pre;
  margin: 0;
}
.logo__l1 { top: 0;      bottom: 33.95%; left: 11.73%; right: 0; }
.logo__l2 { top: 33.95%; bottom: 0;      left: 4.25%;  right: 23%; }
.logo__mark {
  position: absolute;
  top: 23.79%; bottom: 51.2%; left: 31.51%; right: 41.2%;
  transform: rotate(-3.8deg);
}
.logo__mark img { width: 100%; height: 100%; }
.logo__dot {
  position: absolute;
  width: 5.34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
}
.logo__dot--a { left: 58.2%; top: 14.7%; }
.logo__dot--b { left: 0;     top: 74.9%; }

/* footer variant */
.logo--lg {
  width: 159px;
  height: 105.086px;
  --logo-size: 50.7px;
  --logo-track: -2.535px;
}

/* ==========================================================================
   Header
   ========================================================================== */
/* the header sits over the page, so anything you jump to by name has to stop
   short of it — 117px of bar on the wide layout, 97 on a phone, plus air */
.service, .band, .bio, .gallery, .team, .contact-band { scroll-margin-top: 136px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid var(--teal);
  padding: 10px 59px;
}
.site-header__inner {
  width: 1262px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* nav sits right next to the logo */
  gap: 56px;
  direction: rtl;
}
.header-cta { margin-inline-start: auto; }   /* pushed to the far edge */
.site-nav {
  display: flex;
  align-items: center;
  gap: 50px;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -1.2px;
  white-space: nowrap;
}
.site-nav a { transition: color .18s ease; }
.site-nav a:hover,
.site-nav .is-active { color: var(--orange); }

/* dropdown */
.nav-item { position: relative; }
.nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 50%;
  transform: translate(50%, -6px);
  min-width: 268px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(70, 68, 66, .16);
  padding: 14px 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(50%, 0);
}
.nav-menu a {
  padding: 7px 26px;
  text-align: right;
}
.nav-menu a:hover { color: var(--orange); background: var(--cream); }

.nav-drawer__head, .nav-home, .nav-menu__icon, .sticky-bar { display: none; }
.site-nav { gap: 38px; }   /* four categories now share the bar */
/* the bar is laid out left-to-right, so reading order in Hebrew runs from the
   last of these to the first. keyed off classes, never hrefs — the host
   rewrites those when it publishes. */
.site-nav > .nav-wide--assess { order: 1; }
.site-nav > .nav-wide--groups { order: 2; }
.site-nav > .nav-item         { order: 3; }
.site-nav > .nav-team         { order: 4; }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Home — hero
   ========================================================================== */
.hero {
  position: relative;
  background: var(--cream);
  /* 467px of artwork plus the same 28px of air underneath as it has above,
     so the shapes at the foot end rather than run into the section edge */
  height: 495px;
  overflow: hidden;
}
.hero__canvas {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--page);
  height: 100%;
}
.hero__text {
  position: absolute;
  top: 78.77px;
  left: calc(50% + 445px);
  transform: translateX(-50%);
  width: 388px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
  text-align: right;
}
.hero__titles {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  line-height: .9;
  white-space: nowrap;
}
.hero__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 79.853px;
  letter-spacing: -3.9927px;
}
.hero__subtitle {
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -1.5px;
}
.hero__lead { font-size: 18px; line-height: normal; }

/* the collage is one exported picture rather than loose pieces, placed where
   the design puts it inside the 1440 canvas */
.hero__figure-wide {
  position: absolute;
  left: 45px;
  top: -14px;
  width: 922px;
  height: auto;
}
.hero__collage, .hero .shape { display: none; }
/* the invitation is flush with the start of the column, where the heading and
   the paragraph begin: x=248 in a 388-wide text frame, 248 + 140 = 388 */
.hero__text .btn--teal { align-self: flex-start; }

.hero__figure   { position: absolute; left: 101px;  top: 27.77px;  width: 393px; }
.hero__square   { position: absolute; left: 472px;  top: 161.77px; width: 274px; }

/* rotated decorative boxes: outer = axis-aligned box, inner = rotated shape */
.shape { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.shape > * { flex: none; }

.hero__tri  { left: 635px;   top: 80.77px;  width: 212.186px; height: 162.197px; }
.hero__tri  .shape__i { width: 187.627px; height: 113.234px; transform: rotate(16.63deg); position: relative; }
.hero__tri  img { position: absolute; inset: 0 0 25% 0; width: 100%; height: 75%; }

.hero__rect { left: 38.52px;  top: 311.44px; width: 210.926px; height: 129.297px; }
.hero__rect .shape__i { width: 205.973px; height: 120.629px; transform: rotate(-2.44deg); background: var(--teal); }

.hero__arch { left: 663px;   top: 338.23px; width: 210.393px; height: 129.181px; }
.hero__arch .shape__i { width: 200.061px; height: 108.729px; transform: rotate(-6.04deg); }
.hero__arch img { width: 100%; height: 100%; }

/* ==========================================================================
   Home — icons band
   ========================================================================== */
.values {
  background: #fff;
  padding: 50px 100px;
  display: flex;
  justify-content: center;
}
.values__row {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: 124px;
}
.value {
  width: 127px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
/* --- animated shape pairs -------------------------------------------------
   Every one of these little icons is the same idea: a loose accent shape
   playing against the shape it rests on. The accent springs, the anchor is
   knocked by the landing and rights itself. They run by themselves rather
   than on hover, so they work the same on a phone as on a desktop. */
.value .vs { width: 93px; height: 88px; }
.vs { overflow: visible; }
.service__deco, .bio__deco { height: auto; }   /* inline svg needs telling */
.vs__accent,
.vs__anchor {
  transform-box: fill-box;
  transform-origin: center;
}

/* how far each anchor is thrown when its partner lands */
.vs--bowl     .vs__anchor { --rot: -5deg; }
.vs--triangle .vs__anchor { --rot: 7deg; }
.vs--slab     .vs__anchor { --rot: -6deg; }
.vs--auto     .vs__anchor { --rot: 6deg; }
.vs--auto.vs--roll .vs__anchor { --rot: -6deg; }

/* The three in the values row play as a chain — right, then middle, then
   left, following the reading order. One shared timeline with a delay per
   icon is what puts them in sequence rather than in unison. The row waits
   until it has been revealed so the chain begins when it is reached; the
   scattered decorations on the other pages have no such row to belong to and
   simply keep their own beat. */
.value.is-revealed .vs__accent,
.vs--auto .vs__accent { animation: vs-hop-seq 2.4s var(--vd, 0s) infinite; }
.value.is-revealed .vs__anchor,
.vs--auto .vs__anchor { animation: vs-knock-seq 2.4s var(--vd, 0s) infinite; }
/* A slab lying diagonally over its ball hides it if the ball jumps upward —
   the movement simply disappears behind it. Those roll out sideways into the
   clear instead, and come back to knock the slab on the return. */
.value.is-revealed .vs--slab .vs__accent,
.vs--auto.vs--roll .vs__accent { animation-name: vs-roll-seq; }
/* half a second apart — each ball is in the air by the time the one before
   it touches down, so the three read as one knocking the next along. The
   whole chain is over inside 1.7s and the loop is 2.4s, so the wait between
   rounds is short enough that nobody scrolling past lands on a still. */
.values__row .value:nth-child(3) { --vd: 0s; }      /* rightmost, first */
.values__row .value:nth-child(2) { --vd: .5s; }
.values__row .value:nth-child(1) { --vd: 1s; }      /* leftmost, last */
/* the section decorations are far apart down the page, but two can share a
   screen — offset them so they never land on the same beat */
.service:nth-of-type(3n+2) .vs--auto { --vd: .35s; }
.service:nth-of-type(3n)   .vs--auto { --vd: .7s; }
.bio:nth-of-type(even)     .vs--auto { --vd: .5s; }
/* The ball springs up, drops back under gravity and gives one small second
   bounce on landing — quick, about two thirds of a second, then it waits out
   the rest of the loop for its next turn. */
@keyframes vs-hop-seq {
  0%        { transform: translate(0, 0);
              animation-timing-function: cubic-bezier(.15, .7, .35, 1); }
  9%        { transform: translate(0, var(--hop, -16px));
              animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  16%       { transform: translate(0, 0);
              animation-timing-function: cubic-bezier(.15, .7, .35, 1); }
  18.5%     { transform: translate(0, calc(var(--hop, -16px) * .3));
              animation-timing-function: cubic-bezier(.6, 0, .9, .4); }
  21%, 100% { transform: translate(0, 0); }
}
/* same beats as the hop, laid on the horizontal — the ball rolls out from
   under the slab, rolls back, and rocks once before settling */
@keyframes vs-roll-seq {
  0%        { transform: translate(0, 0);
              animation-timing-function: cubic-bezier(.15, .7, .35, 1); }
  9%        { transform: translate(var(--roll, -13px), 0);
              animation-timing-function: cubic-bezier(.55, 0, .85, .45); }
  16%       { transform: translate(0, 0);
              animation-timing-function: cubic-bezier(.15, .7, .35, 1); }
  18.5%     { transform: translate(calc(var(--roll, -13px) * .28), 0);
              animation-timing-function: cubic-bezier(.55, 0, .85, .45); }
  21%, 100% { transform: translate(0, 0); }
}
/* the shape underneath is knocked as the ball lands, and rights itself.
   --rot carries each shape's own tilt from the hover version; the multiplier
   keeps that character while giving it enough throw to be caught in passing */
@keyframes vs-knock-seq {
  0%, 14%   { transform: rotate(0deg);
              animation-timing-function: cubic-bezier(.2, .9, .4, 1); }
  18%       { transform: rotate(calc(var(--rot, 0deg) * 1.7));
              animation-timing-function: cubic-bezier(.3, 1.2, .5, 1); }
  23%       { transform: rotate(calc(var(--rot, 0deg) * -.7));
              animation-timing-function: cubic-bezier(.25, 1, .4, 1); }
  28%, 100% { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vs__accent,
  .vs__anchor { animation: none; transform: none; }
}
.value span {
  font-family: var(--font-head);
  font-size: 24px;
  line-height: 32.261px;
  letter-spacing: -.48px;
  color: #000;
  text-align: center;
}

/* ==========================================================================
   Home — service bands
   ========================================================================== */
.band {
  position: relative;
  background: var(--cream);
  height: 500px;
  display: flex;
  align-items: flex-start;
  direction: ltr;
  /* Down the page it stays open, so the loose shapes hang over the section
     below instead of being sliced off at the join. Sideways it is clipped:
     the vertical titles are set far larger than their line box, and the ink
     that spills past it was adding ~10px of sideways scroll to the whole
     page. `clip` rather than `hidden` — hidden on one axis would force the
     other to scroll and take the overhang away with it. */
  overflow-x: clip;
  overflow-y: visible;
  /* The vertical titles are set far larger than their line box, so their ink
     reaches ~20px past it — 4px of slack was shaving the first letter off on
     a phone. A wide margin costs nothing: it only widens what gets painted,
     and `clip` still refuses to hand any of it to the page as scroll. */
  overflow-clip-margin: 60px;
}
/* each band paints over the one after it, so a shape that hangs past the
   bottom edge stays on top of whatever it is hanging over */
.band--a { z-index: 3; }
.band--b { z-index: 2; }
.band--c { z-index: 1; }
.band__media {
  flex: 0 0 50%;
  width: 50%;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the photograph always runs to the middle of the screen; the copy keeps its
   Figma distance from the outer edge through its own padding */
.band--a, .band--b, .band--c { padding-inline: 0; }

/* one corner is rounded on each photograph, and it is not the same one:
   top-right in a and b, bottom-right in c */
.band--a .band__media { border-top-right-radius: 50px; }
.band--b .band__media { border-top-right-radius: 50px; }
.band--c .band__media { border-bottom-right-radius: 50px; }

.band__body {
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 39px;
  padding-top: 50px;
  text-align: right;
  flex: none;
}
.band__body { flex: 1 1 50%; min-width: 0; }
/* Column positions come straight off the 1440 canvas: the copy runs
   836→1340 in a, 176→680 in b, 792→1340 in c. In b that leaves 40px between
   the last word and the photograph, which is the gap the design draws. */
.band--a .band__body { padding: 50px 100px 0 116px; }
.band--b .band__body { padding: 50px 40px 0 176px; }
.band--c .band__body { padding: 50px 100px 0 44px; }
@media (min-width: 1280px) {
  .band--a .band__title, .band--a .band__text { width: 504px; }
  .band--c .band__title, .band--c .band__text { width: 548px; }
}

.band__title {
  font-size: 40px;
  line-height: 32.261px;
  letter-spacing: -.8px;
  width: 504px;
  max-width: 100%;
}
.band__text {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -.36px;
  width: 504px;
  max-width: 100%;
}
.band--c .band__text { width: 548px; }
.band__text p + p { margin-top: 24px; }

/* rotated watermark headings on the outer edges */
.watermark {
  position: absolute;
  font-family: var(--font-head);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  /* main.js fits the word to the gap, so it no longer needs trimming — and
     trimming is exactly what was slicing the first and last letters: glyph
     ink reaches a little past the line box, and any clip here cuts it. */
  top: 0;
  bottom: 0;
}
.watermark--a {
  right: 21px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 71.857px;
  line-height: 23.182px;
  letter-spacing: -1.4371px;
  color: rgba(234, 114, 43, .3);
}
.watermark--b {
  left: 0;
  writing-mode: vertical-rl;
  font-size: 95.467px;
  line-height: 93px;
  letter-spacing: -1.9093px;
  color: rgba(162, 203, 199, .3);
}
.watermark--c {
  right: -4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 65.011px;
  line-height: 63.331px;
  letter-spacing: -1.3002px;
  color: rgba(198, 176, 57, .3);
}

/* Each outer box is the shape's bounding box on the canvas; the inner size is
   what a rectangle rotated by that much needs to be to fill it. */
.band__pink { right: 560px; top: 362.225px; width: 142.594px; height: 137.288px; }
.band__pink .shape__i { width: 116.82px; height: 109.02px; transform: rotate(16.2deg); background: var(--pink-mid); }

.band__half { right: 836.7px; top: 377.225px; width: 199.36px; height: 199.36px; }
.band__half .shape__i { width: 165.075px; height: 165.075px; transform: rotate(13.65deg); position: relative; }
.band__half img { position: absolute; inset: 0 0 50% 0; width: 100%; height: 50%; }

.band__tri { right: 493.45px; top: 391.966px; width: 249.554px; height: 169.024px; }
.band__tri .shape__i { width: 233.873px; height: 141.145px; transform: rotate(-7.11deg); position: relative; }
.band__tri img { position: absolute; inset: 0 0 25% 0; width: 100%; height: 75%; }

/* ==========================================================================
   Home — "מי אנחנו?"
   ========================================================================== */
.team {
  background: var(--pink-deep);
  padding: 50px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.team__lead { max-width: 900px; }
.team__title { font-size: 40px; line-height: 32.261px; letter-spacing: -.8px; width: 1089px; max-width: 100%; }
.team__lead  { font-size: 18px; line-height: 24px; letter-spacing: -.36px; width: 1202px; max-width: 100%; }
.team__row {
  width: 1209px;
  max-width: 100%;
  margin-top: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  direction: ltr;
  gap: 40px;
}
.team-card { display: flex; align-items: flex-start; gap: 12px; }
.team-card__text {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 25px;
  padding-top: 30px;
  width: 300px;
}
.team-card--adi .team-card__text { width: 292px; }
.team-card__name { font-family: var(--font-body); font-weight: 700; font-size: 24px; line-height: 32.261px; letter-spacing: -.64px; }
.team-card__role { font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 32.261px; letter-spacing: -.4px; }
.team-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.team-card__bio  { font-size: 18px; line-height: 24px; letter-spacing: -.36px; }
.team-card__link { font-weight: 700; font-size: 18px; line-height: 24px; letter-spacing: -.36px; text-decoration: underline; transition: color .18s ease; }
/* a text link cannot lift, so it takes the orange the nav links take */
.team-card__link:hover { color: var(--orange); }
.team-card__photo { flex: none; width: 257px; height: 257px; border-radius: 50%; overflow: hidden; }
/* the <picture> only swaps sources between layouts — it should not become a
   box of its own, or the image loses the height it is sizing against */
.team-card__photo picture { display: contents; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Home — gallery strip
   ========================================================================== */
.gallery {
  background: var(--gallery-bg);
  /* the strip runs edge to edge — any side padding here shows up as a pale
     sliver at the end of the loop, which reads as a seam rather than a margin */
  padding: 50px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  overflow: hidden;
}
.gallery__title {
  font-size: 40px;
  line-height: 32.261px;
  letter-spacing: -.8px;
  color: var(--deep-teal);
}
/* the track is laid out left-to-right so the negative slide scrolls into the
   strip instead of away from it — the artwork carries no text, so this is safe */
.gallery__viewport {
  width: 100%;
  direction: ltr;
  /* draggable and wheel-scrollable as well as self-running; the scrollbar
     itself is hidden so the strip still reads as artwork, not a list */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__viewport.is-dragging { cursor: grabbing; }
/* while a hand is on it the strip stops travelling, so the two never fight */
.gallery:hover .gallery__track,
.gallery__viewport.is-dragging .gallery__track { animation-play-state: paused; }
.gallery__track {
  --strip: 4312px;            /* one full pass of the artwork */
  /* the artwork leaves ~30px between tiles at its native 4096px; the join
     between the two copies has to carry the same gap or the loop restarts
     with two tiles touching. the strip's gutters are transparent, so the seam
     shows the same section colour they do. */
  --seam: calc(var(--strip) * 30 / 4096);
  display: flex;
  gap: var(--seam);
  width: max-content;
  animation: gallery-slide 108s linear infinite;
}
.gallery__strip { width: var(--strip); height: auto; aspect-ratio: 4096 / 229; max-width: none; flex: none; }
/* two identical copies ride the track, so one strip plus one gap closes the loop */
@keyframes gallery-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc((var(--strip) + var(--seam)) * -1)); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__track { animation: none; }
}

/* ==========================================================================
   Contact band (shared)
   ========================================================================== */
.contact-band {
  background: var(--teal);
  /* the side gutters give the row exactly the width it needs for both fields
     and the button; at the drawn 355 the button was forced onto its own line */
  padding: 50px 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  overflow: hidden;
}
.contact-band__title { font-size: 40px; line-height: 32px; letter-spacing: -.8px; }
.contact-band__form {
  /* wide enough for both fields and the button to share one row: 277 + 277
     + the button, plus the gaps. At 729 with the old 53px gaps the button
     was pushed onto a line of its own. */
  width: 800px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  /* the two fields sit to the right, the button closes the row on the left */
  justify-content: flex-end;
  align-items: flex-end;
  direction: ltr;
}
/* the button closes the row on the left — see the 1024px block, where the
   row exists. Below that the fields stack and it belongs at the foot. */
.field-line {
  width: 277px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  direction: rtl;
}
.field-line label {
  width: 100%;
  font-family: var(--font-head);
  font-size: 19.2px;
  line-height: 16.8px;
  letter-spacing: 1.92px;
  text-align: right;
}
.field-line input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--text);
  background: transparent;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 20px;
  color: var(--text);
  /* the rule sits close under the label — the label carries `for`, so it is
     part of the tap target and the input itself need not be tall */
  padding: 2px 0;
  text-align: right;
}
.field-line input:focus { outline: none; border-bottom-color: var(--orange); }

/* ==========================================================================
   Footer (shared)
   ========================================================================== */
.site-footer {
  position: relative;
  background: var(--cream);
  padding: 40px 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  overflow: hidden;
}
.site-footer__blocks--mobile { display: none; }
.site-footer__blocks {
  position: absolute;
  left: 48px;
  top: 83.8px;
  width: 810.761px;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

/* --- footer illustrations -------------------------------------------------
   Shared setup. Two choreographies live here: the three houses loop from a
   stacked tower into the house and back (.fb--house), while the contact page
   tower builds itself once (.fb--stack). */
.fb__i { transform-box: fill-box; transform-origin: center; }

/* ---- footer house: the nine pieces trade places, then settle -------------
   Every piece waits on someone else's spot. When the footer scrolls into
   view they all set off at once along curved paths and swap into position,
   so the house assembles out of the exchange rather than dropping into it.
   Nothing scales — a piece is the same size the whole way across — and the
   two orbits below are closed cycles, so no seat is ever left empty.

     left  : base-l -> dot-l -> roof-l -> roof-m -> back to base-l
     right : arch -> chimney -> dome -> base-r -> dot-r -> back to arch

   --start is the offset from a piece's own centre to the centre it begins
   on, in viewBox units, so the whole choreography scales with the drawing.
   --mid bows that straight line sideways into an arc. */
.fb--house.fb--armed .fb__i,
.fb--tower.fb--armed .fb__i,
.fb--stack.fb--armed .fb__i { transform: none; }
.fb--house.fb--armed.is-built .fb__i { animation: fb-orbit 5.2s var(--d, 0s) infinite both; }

/* ---- the whole drawing rocks on its base ----
   A stack of blocks does not fly apart, it balances — so the drawing itself
   leans one way and then the other about the point it stands on, slowly, and
   the pieces keep their positions inside it. On the tower that is the whole
   idea: it is a tower, and swaying is what a tower does. The house keeps its
   pieces trading places and only borrows the lean, small enough to read as
   the building breathing rather than tipping over.

   The lean is on the <svg> and the piece movement on the shapes inside, so
   the two compose through the element tree instead of fighting over the same
   transform. */
.fb--tower.fb--armed.is-built,
.fb--stack.fb--armed.is-built,
.fb--house.fb--armed.is-built {
  transform-origin: 50% 100%;              /* the foot it stands on */
  animation: fb-sway var(--sway-time) infinite;
}
.fb--tower, .fb--stack { --sway: 3.4deg;  --sway-time: 4.4s; }
.fb--house { --sway: 1.4deg;  --sway-time: 5.6s; }

@keyframes fb-sway {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(var(--sway)); }
  75%      { transform: rotate(calc(var(--sway) * -1)); }
}

/* Inside the tower the blocks keep trading places while it rocks. The two
   run on different clocks — 4.6s for the blocks against 4.4s for the lean —
   so the pair never lines up the same way twice and the loop does not settle
   into an obvious repeat. */
.fb--tower.fb--armed.is-built .fb__i,
.fb--stack.fb--armed.is-built .fb__i { animation: fb-orbit 4.4s var(--d, 0s) infinite both; }
/* Every piece leaves for the seat in front of it along one arc and comes home
   along another, so the return reads as carrying on round rather than
   rewinding. It ends exactly where it began, which is what lets it repeat
   without a seam, and the pieces are spread apart in time, so at any moment
   some are leaving while others are landing.

   The last quarter is a rest: the drawing stands finished for a beat before
   setting off again. The rest is at the END of the cycle rather than the
   start, so arriving at the footer still catches it already in motion — the
   pause belongs between laps, not before the first one.

   The class that starts it is only on while the drawing is on screen, so
   nothing runs in a footer nobody is looking at. */
@keyframes fb-orbit {
  /* Each piece leaves for another piece's seat and comes straight back,
     turning over as it goes — out along one arc, home along the other, so
     the return reads as carrying on round rather than rewinding. It does not
     stop on the far seat; the only stillness in the bar is at the end, with
     the drawing whole. Pieces run a beat apart, so the movement travels
     through the shape from the bottom up instead of everything leaving at
     once. */
  0%, 8%    { transform: none;
              animation-timing-function: cubic-bezier(.5, 0, .8, .25); }
  /* over, turning */
  28%       { transform: var(--mid) rotate(var(--spin, 30deg));
              animation-timing-function: cubic-bezier(.35, .4, .3, 1); }
  /* touches the far seat and is already on its way back */
  48%       { transform: var(--start) rotate(calc(var(--spin, 30deg) * 1.5));
              animation-timing-function: cubic-bezier(.4, 0, .55, 1); }
  /* home the other way round */
  72%       { transform: var(--mid2, var(--mid)) rotate(calc(var(--spin, 30deg) * .4));
              animation-timing-function: cubic-bezier(.3, .55, .25, 1); }
  /* arrives, overshoots, settles into the shape and holds */
  90%       { transform: rotate(calc(var(--spin, 30deg) * -.22));
              animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  96%, 100% { transform: none; }
}

.fb__i--base-l {
  --start: translate(32px, 36px) rotate(-12deg);
  --mid:   translate(-21.4px, 52px) rotate(-10deg);
  --mid2:  translate(53.4px, -16px) rotate(-10deg);
  --spin:  -34deg;
  --d: 0.33s;
}
.fb__i--dot-l {
  --start: translate(-62px, -136px) rotate(20deg);
  --mid:   translate(21.7px, -91.8px) rotate(18deg);
  --mid2:  translate(-83.7px, -44.2px) rotate(18deg);
  --spin:  46deg;
  --d: 0s;
}
.fb__i--roof-l {
  --start: translate(298px, -72px) rotate(-16deg);
  --mid:   translate(164.3px, 26.9px) rotate(-14deg);
  --mid2:  translate(133.7px, -98.9px) rotate(-14deg);
  --spin:  -40deg;
  --d: 0.66s;
}
.fb__i--roof-m {
  --start: translate(-268px, 172px) rotate(14deg);
  --mid:   translate(-169.7px, 31.6px) rotate(12deg);
  --mid2:  translate(-98.3px, 140.4px) rotate(12deg);
  --spin:  38deg;
  --d: 0.88s;
}
.fb__i--arch {
  --start: translate(0px, -109px) rotate(-8deg);
  --mid:   translate(54.4px, -55.4px) rotate(-6deg);
  --mid2:  translate(-54.4px, -53.6px) rotate(-6deg);
  --spin:  30deg;
  --d: 0.22s;
}
.fb__i--chimney {
  --start: translate(241px, -16px) rotate(18deg);
  --mid:   translate(124.8px, 49.8px) rotate(16deg);
  --mid2:  translate(116.2px, -65.8px) rotate(16deg);
  --spin:  -44deg;
  --d: 0.55s;
}
.fb__i--dome {
  --start: translate(-29px, 101px) rotate(-15deg);
  --mid:   translate(-62.9px, 36px) rotate(-12deg);
  --mid2:  translate(33.9px, 65px) rotate(-12deg);
  --spin:  36deg;
  --d: 0.77s;
}
.fb__i--base-r {
  --start: translate(-8px, 46px) rotate(10deg);
  --mid:   translate(-51.6px, 14.5px) rotate(8deg);
  --mid2:  translate(43.6px, 31.5px) rotate(8deg);
  --spin:  -30deg;
  --d: 0.44s;
}
.fb__i--dot-r {
  --start: translate(-204px, -22px) rotate(-20deg);
  --mid:   translate(-96.9px, -68.8px) rotate(-18deg);
  --mid2:  translate(-107.1px, 46.8px) rotate(-18deg);
  --spin:  48deg;
  --d: 0.11s;
}

/* the mobile footer carries the five-piece tower instead of the house, and
   trades places the same way — one closed cycle through all five:
   circle -> arch -> square -> dome -> chimney -> back to the circle */
.fb__i--m1 {
  --start: translate(-33px, 61px) rotate(16deg);
  --mid:   translate(-42.8px, 16.1px) rotate(14deg);
  --mid2:  translate(9.8px, 45px) rotate(14deg);
  --spin:  42deg;
  --d: 0.13s;
}
.fb__i--m2 {
  --start: translate(22px, -135px) rotate(-13deg);
  --mid:   translate(45px, -61.5px) rotate(-12deg);
  --mid2:  translate(-23px, -73.5px) rotate(-12deg);
  --spin:  -30deg;
  --d: 0s;
}
.fb__i--m3 {
  --start: translate(12px, -69px) rotate(14deg);
  --mid:   translate(36.6px, -30.2px) rotate(12deg);
  --mid2:  translate(-24.6px, -38.8px) rotate(12deg);
  --spin:  38deg;
  --d: 0.26s;
}
.fb__i--m4 {
  --start: translate(28px, -47px) rotate(-18deg);
  --mid:   translate(41.2px, -7.4px) rotate(-16deg);
  --mid2:  translate(-13.2px, -39.6px) rotate(-16deg);
  --spin:  -44deg;
  --d: 0.39s;
}
.fb__i--m5 {
  --start: translate(-29px, 190px) rotate(20deg);
  --mid:   translate(-47.6px, 89.9px) rotate(18deg);
  --mid2:  translate(18.6px, 100.1px) rotate(18deg);
  --spin:  46deg;
  --d: 0.52s;
}

/* the contact page carries a tower rather than the house. two short closed
   cycles — the two lower pieces trade, the three upper ones go round —
   so nothing has to cross the whole drawing and fall out of the frame */
.fb__i--c1 {
  --start: translate(53.5px, -97.5px) rotate(-12deg);
  --mid:   translate(44.6px, -38.9px) rotate(-18deg);
  --mid2:  translate(8.9px, -58.6px) rotate(-18deg);
  --spin:  -28deg;
  --d: 0s;
}
.fb__i--c3 {
  --start: translate(-53.5px, 97.5px) rotate(16deg);
  --mid:   translate(-44.6px, 38.9px) rotate(24deg);
  --mid2:  translate(-8.9px, 58.6px) rotate(24deg);
  --spin:  34deg;
  --d: 0.13s;
}
.fb__i--c2 {
  --start: translate(18.5px, -111px) rotate(-14deg);
  --mid:   translate(29.4px, -52.1px) rotate(-21deg);
  --mid2:  translate(-10.9px, -58.9px) rotate(-21deg);
  --spin:  -32deg;
  --d: 0.26s;
}
.fb__i--c4 {
  --start: translate(45.5px, -75.5px) rotate(18deg);
  --mid:   translate(40.2px, -27.2px) rotate(27deg);
  --mid2:  translate(5.3px, -48.3px) rotate(27deg);
  --spin:  38deg;
  --d: 0.39s;
}
.fb__i--c5 {
  --start: translate(-64px, 186.5px) rotate(-20deg);
  --mid:   translate(-51.3px, 86.6px) rotate(-30deg);
  --mid2:  translate(-12.7px, 99.9px) rotate(-30deg);
  --spin:  -40deg;
  --d: 0.52s;
}
/* ---- contact page tower: builds itself once, bottom-up ---- */

@media (prefers-reduced-motion: reduce) {
  .fb--stack.fb--armed .fb__i { opacity: 1; transform: none; transition: none; }
  .fb--house.fb--armed .fb__i,
  .fb--tower.fb--armed .fb__i,
  .fb--house.fb--armed.is-built,
  .fb--tower.fb--armed.is-built { animation: none; transform: none; }
}
.site-footer--contact .site-footer__blocks--mobile { display: none; }
/* the contact page carries the narrow tower, not the house — scoped, or it
   would shrink the 810px house on every other page down to 302px */
.site-footer--contact .site-footer__blocks {
  left: 96px;
  /* sized to finish clear of the rule above the copyright, with enough room
     left over that a piece can swing past its seat without crossing it */
  top: 30px;
  width: 230px;
}
.site-footer__cols {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 30px;
  align-items: flex-start;
  direction: ltr;
}
.footer-nav, .footer-brand { direction: rtl; text-align: right; }
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 17px;
  width: 200px;
}
.footer-nav__title,
.footer-brand__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
}
.footer-nav a { font-size: 18px; opacity: .85; line-height: normal; }
.footer-nav a:hover { opacity: 1; color: var(--orange); }
.footer-brand {
  width: 287px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.footer-brand__tagline {
  font-family: var(--font-head);
  font-size: 22px;
  line-height: normal;
  width: 198px;
}
.footer-brand__contact {
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-top: 8px;
}
.footer-brand__contact p,
.footer-brand__contact a { font-size: 18px; opacity: .85; line-height: normal; white-space: nowrap; }
.site-footer__bottom {
  position: relative;
  z-index: 1;
  width: 100%;
  border-top: 1px solid rgba(70, 68, 66, .35);
  padding-top: 19px;
}
.site-footer__bottom p {
  font-family: var(--font-head);
  font-size: 13px;
  opacity: .6;
  text-align: center;
}

/* ==========================================================================
   Inner pages — hero heading
   ========================================================================== */
.page-hero {
  background: var(--cream);
  padding: 50px 100px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  text-align: right;
}
.page-hero__title {
  color: var(--orange);
  font-size: 46px;
  line-height: normal;
  width: 1164px;
  max-width: 100%;
}
.page-hero__sub {
  font-family: var(--font-head);
  font-size: 24px;
  line-height: normal;
  width: 1164px;
  max-width: 100%;
}
.page-hero__lead {
  font-size: 18px;
  line-height: 1.5;
  width: 1164px;
  max-width: 100%;
}

/* ==========================================================================
   About — team rows
   ========================================================================== */
.bio {
  background: var(--cream);
  padding: 30px 100px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  direction: ltr;
}
.bio--last { padding-bottom: 60px; }
.bio__media { position: relative; display: flex; align-items: flex-end; gap: 15px; flex: none; }
.bio__main { width: 450px; height: 600px; overflow: hidden; flex: none; }
.bio__main img { width: 100%; height: 100%; object-fit: cover; }
.bio--bar  .bio__main { border-radius: 24px 24px 24px 0; }
.bio--adi  .bio__main { border-radius: 24px 24px 0 24px; }
.bio__side { width: 214px; height: 285.333px; overflow: hidden; border-radius: 11.413px; flex: none; }
.bio__side img { width: 100%; height: 100%; object-fit: cover; }
.bio__deco { position: absolute; pointer-events: none; }
.bio__deco--bar { left: 465px; top: 224.23px; width: 107.366px; }
.bio__deco--adi { left: 136px; top: 226.23px; width: 93px; }

.bio__text {
  direction: rtl;
  text-align: right;
  width: 410px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0 24px 11px;
}
.bio__name { font-size: 26px; line-height: 1.35; }
.bio__role { font-family: var(--font-body); font-weight: 700; font-size: 18px; line-height: 1.45; }
.bio__body { font-size: 18px; line-height: 1.45; }
.bio__body p + p { margin-top: 1.45em; }

/* ==========================================================================
   Services
   ========================================================================== */
.service {
  position: relative;
  background: var(--cream);
  border-bottom: 1px solid var(--peach);
  padding: 40px 100px;
  display: flex;
  gap: 44px;
  align-items: flex-start;
  justify-content: flex-end;
  direction: ltr;
  overflow: hidden;
}
.service:last-of-type { border-bottom: 0; }
.service__media { width: 530px; height: 642px; overflow: hidden; flex: none; }
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.service--r1 .service__media { border-radius: 24px 24px 24px 0; }
.service--r2 .service__media { border-radius: 24px 0 24px 24px; }
.service--r3 .service__media { border-radius: 24px 24px 0 24px; }
.service--r4 .service__media { border-radius: 0 24px 24px 24px; }

.service__body {
  direction: rtl;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  flex: none;
  width: 671px;
}
.service--wide .service__body { width: 1253px; max-width: 100%; }
.service__head { width: 644px; max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.service--wide .service__head { width: 100%; }
.service__title { font-size: 36px; line-height: 1.5; width: 100%; }
.service__intro { font-size: 18px; line-height: 1.5; width: 100%; }

.accordion { width: 662px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.service--wide .accordion { width: 1217px; max-width: 100%; }
.acc { display: flex; flex-direction: column; gap: 10px; }
.acc__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  direction: ltr;
}
.acc__sign {
  width: 15px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 30px;
  line-height: 30px;
  flex: none;
}
.acc__sign::before { content: "+"; }
.acc[data-open="true"] .acc__sign::before { content: "–"; }
.acc__q {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .4px;
  text-align: center;
  padding: 7px 0;
  direction: rtl;
}
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.acc[data-open="true"] .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__body { font-size: 18px; line-height: 1.5; padding-bottom: 4px; }
.acc__body p + p { margin-top: .6em; }
.acc__body ul { padding-inline-start: 27px; }
.acc__body li { line-height: 1.5; }
.acc__body b { font-weight: 600; }
.acc__rule { border: 0; border-top: 1px solid var(--peach); margin: 0; width: 100%; }

.service__deco {
  position: absolute;
  bottom: 10px;
  width: 93px;
  pointer-events: none;
}
.service__deco--r { left: calc(50% - 720px + 628px); }
.service__deco--l { left: calc(50% - 720px + 2px); }

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-main {
  background: var(--cream);
  padding: 20px 100px 100px 138px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contact-row {
  width: 1164px;
  max-width: 100%;
  display: flex;
  gap: 80px;
  align-items: flex-start;
  direction: ltr;
}
.contact-form {
  direction: rtl;
  width: 604px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  text-align: right;
}
.contact-form__title { font-size: 28px; line-height: normal; width: 100%; }
.field { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.field label {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: normal;
  text-align: right;
}
.field input {
  width: 100%;
  border: 0;
  border-bottom: 1.5px solid var(--field-line);
  background: transparent;
  padding: 4px 0;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text);
  text-align: right;
}
.field textarea {
  width: 100%;
  height: 130px;
  border: 1.5px solid var(--field-line);
  border-radius: 8px;
  background: var(--field-bg);
  padding: 12px;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--text);
  resize: vertical;
  text-align: right;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--orange); }

.contact-aside {
  direction: rtl;
  width: 480px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  text-align: right;
}
.contact-aside p {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}
.contact-map {
  width: 480px;
  max-width: 100%;
  height: 260px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--map-bg);
  display: block;
}
.contact-map img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* ---- wider than the 1440 artboard: the photograph takes the extra room,
   the column of copy keeps its distance from the outer edge ---- */
@media (min-width: 1441px) {
  .service__media { flex: 0 0 530px; }
  /* These two hold a picture at one end and the words at the other, so on a
     wide monitor every extra pixel goes into the space between them and the
     two halves stop reading as one thing. Cap the content at the same 1240
     the rest of the page uses — as padding rather than a max-width, so the
     background still runs to the edges. */
  .bio, .service { padding-inline: max(100px, (100% - 1240px) / 2); }
  /* The footer holds its columns against the far margin and its drawing
     against the near one, so it is capped the same way. Centring the columns
     instead — which is what max-width + auto margins does to a block narrower
     than the cap — walked them into the middle of the screen and straight
     over the drawing. */
  .site-footer { padding-inline: max(100px, (100% - 1240px) / 2); }
  /* both drawings keep their offset from the content edge rather than from
     the screen edge — the house 52px before it, the contact tower 4px */
  .site-footer__blocks { left: calc(max(100px, (100% - 1240px) / 2) - 52px); }
  .site-footer--contact .site-footer__blocks { left: calc(max(100px, (100% - 1240px) / 2) - 4px); }
  .values__row,
  .team__row,
  .contact-row,
  .page-hero > * { max-width: 1240px; margin-inline: auto; }
  .page-hero { align-items: center; }
  .page-hero > * { width: 1240px; }
}

/* The hero is one fixed 1440px composition with everything placed inside it,
   so on any screen narrower than that the ends were simply cut off by the
   section's own clipping — which is exactly what a 1366px laptop at 125%
   display scaling shows, and why the title looked chopped there. Scaling the
   whole canvas keeps the arrangement and fits it to the glass.

   The factor cannot be worked out in CSS — a viewport width cannot be turned
   into a plain number here — so main.js measures it and sets --hero-scale.
   If that never runs the value stays 1 and nothing is worse than before. */
@media (min-width: 1024px) {
  .hero { height: calc(495px * var(--hero-scale, 1)); }
  .hero__canvas {
    transform: translateX(-50%) scale(var(--hero-scale, 1));
    transform-origin: top center;
  }
  /* only here do the two fields and the button fit on one row, so only here
     does the button jump to the head of the source order to close it */
  .contact-band__form .btn { order: -1; margin-inline-end: auto; }
}

@media (max-width: 1279px) {
  .site-header { padding: 10px 32px; }
  .values { padding: 50px 40px; }
  .values__row { gap: 80px; }
  .band__media { width: 52%; }
  .band__media img { width: 100%; }
  .band--a .band__body,
  .band--b .band__body,
  .band--c .band__body { width: auto; flex: 1; margin-left: 0; padding-inline: 40px 28px; }
  .band__title, .band__text, .band--c .band__text { width: 100%; }
  .team, .site-footer, .page-hero { padding-inline: 48px; }

  /* the two profiles were a fixed 1178px wide between them and overflowed
     the viewport on a narrower screen — they now share whatever room there is */
  .team__row { flex-wrap: wrap; }
  .team-card { flex: 1 1 420px; min-width: 0; }
  .team-card__text { width: auto; flex: 1; min-width: 0; }
  .gallery__title { padding-inline: 48px; }
  .team__row { gap: 24px; }
  .contact-band { padding-inline: 48px; }
  .service { padding-inline: 48px; gap: 32px; }
  .service__media { width: 42%; height: auto; align-self: stretch; min-height: 520px; }
  .service__body { width: auto; flex: 1; }
  .accordion, .service__head { width: 100%; }
  .bio { padding-inline: 48px; gap: 24px; }
  .bio__main { width: 380px; height: 520px; }
  .bio__side { width: 180px; height: 240px; }
  .bio__deco { display: none; }
  .contact-main { padding-inline: 48px; }
  .contact-row { gap: 40px; }
  .contact-form { flex: 1; width: auto; }
  .contact-aside { width: 400px; }
  .contact-map { width: 100%; }
}

@media (max-width: 1023px) {
  .nav-toggle { display: block; }
  .site-header__inner { position: relative; }
  /* ---- the menu is a drawer that slides in from the right ---- */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 334px;
    max-width: 86vw;
    background: #fff;
    filter: drop-shadow(-34px 0 30px rgba(0, 0, 0, .08));
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* right, in RTL */
    gap: 22px;
    padding: 30px 16px 40px 0;
    overflow-y: auto;
    direction: rtl;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .32s cubic-bezier(.32, .72, 0, 1), visibility .32s;
    z-index: 70;
  }
  .site-nav.is-open { transform: none; visibility: visible; }
  .nav-scrim {
    position: fixed;
    inset: 0;
    background: rgba(70, 68, 66, .28);
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease, visibility .32s;
    z-index: 55;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }

  .nav-drawer__head { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; width: 100%; }
  .nav-drawer__avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nav-drawer__avatar { position: relative; }
  .nav-drawer__avatar img { width: 39px; transform: rotate(-3.8deg); }
  /* The dot sits low and to the left of the shape, just clear of its edge —
     it was overlapping it. The 68px circle centres the 39px mark at 14.5,23,
     and the crest puts the dot's centre a little before the mark's left edge
     and 86% of the way down it. */
  .nav-drawer__avatar::after {
    content: "";
    position: absolute;
    left: 7.5px;
    top: 38px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
  }
  .nav-drawer__word {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 36px;
    line-height: .9;
    letter-spacing: -1.8px;
    color: var(--text);
  }
  .nav-drawer__head::after {
    content: "";
    display: block;
    width: 334px;
    max-width: 100%;
    border-top: 1px solid rgba(70, 68, 66, .18);
  }

  .site-nav > a,
  .site-nav .nav-item > a {
    font-family: var(--font-head);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: normal;
    color: #0F0F0F;
    padding: 5px 0;
    width: 100%;
  }
  /* keyed off classes, not hrefs — the host rewrites .html out of the links
     when it publishes, and an href selector silently stops matching */
  .nav-wide { display: none; }   /* the drawer lists these under תחומי טיפול */
  /* the drawer reads home, team, treatments — the desktop order set further
     up would otherwise push the team to the bottom */
  .site-nav > a { order: 2; }
  .site-nav > a.nav-team { order: 2; }
  .site-nav > .nav-item  { order: 3; }
  .site-nav > a.nav-drawer__head { order: 0; }
  .site-nav > a.nav-home { display: block; order: 1; }
  .site-nav .nav-item { order: 3; width: 100%; }

  .nav-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    background: transparent;
    align-items: stretch;
    gap: 14px;
    margin-top: 14px;
  }
  .nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu { transform: none; }
  .nav-menu a {
    display: flex;
    flex-direction: row;           /* RTL: the shape sits on the right, label follows */
    align-items: center;
    justify-content: flex-start;   /* every row starts from the same right edge */
    gap: 10px;
    width: 100%;
    padding: 4px 0;
    font-family: var(--font-head);
    font-size: 16px;
    color: #0F0F0F;
  }
  .nav-menu a:hover { background: transparent; color: var(--orange); }
  .nav-menu__icon { display: block; width: 23.2px; height: 22px; flex: none; }

  /* ---- the call to action follows the reader down the page ----
     and because it is already on screen the moment the page opens, the hero
     drops its own copy of the same button rather than showing two. */
  .hero .btn--teal { display: none; }
  .sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    justify-content: center;
    background: var(--cream);
    border-top: 1px solid rgba(70, 68, 66, .1);
    padding: 12px 24px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .sticky-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--orange);
    color: var(--cream);
    font-family: var(--font-head);
    /* same component as every other button on the site */
    font-size: 20px;
    line-height: 18px;
    letter-spacing: 0;
    padding: 11px 36px;
    border-radius: 999px;
  }
  .site-footer { padding-bottom: 96px; }   /* room for the sticky button */
  .nav-toggle { order: 3; }
  .header-cta { order: 2; }

  /* hero → stacked */
  .hero { height: auto; padding: 40px 32px 60px; }
  .hero__figure-wide { display: none; }
  .hero__canvas { position: static; transform: none; width: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .hero__text { position: static; transform: none; width: 100%; max-width: 520px; align-items: flex-start; }
  .hero__title { font-size: 56px; letter-spacing: -2.5px; }
  .hero__subtitle { font-size: 24px; letter-spacing: -1px; }
  .hero__figure, .hero__square { position: static; }
  .hero__figure { width: 300px; }
  .hero__square { width: 210px; }
  .hero__collage { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
  .shape { display: none; }

  .values__row { gap: 40px; flex-wrap: wrap; justify-content: center; }

  .band { height: auto; flex-direction: column; }
  /* stacked: the photograph is full-bleed, so the band drops its own gutters */
  .band--a, .band--b, .band--c { padding-inline: 0; }
  .band__media { flex: none; width: 100%; height: 300px; border-radius: 0 !important; }
  .band__body { flex: none; width: 100%; }
  .band__media img { width: 100%; height: 100%; object-fit: cover; }
  .band--b { flex-direction: column-reverse; }
  .band--a .band__body,
  .band--b .band__body,
  .band--c .band__body { padding: 32px 32px 48px; gap: 24px; }
  .watermark { display: none; }

  .team__row { flex-direction: column; align-items: stretch; gap: 40px; }
  .team-card { justify-content: flex-end; }
  .team-card__text, .team-card--adi .team-card__text { width: auto; flex: 1; }

  .contact-band { padding-inline: 32px; }
  .contact-band__form { gap: 28px; }
  .field-line { width: 100%; max-width: 340px; }

  .service { flex-direction: column; align-items: stretch; padding-inline: 32px; }
  .service--r2, .service--r4 { flex-direction: column-reverse; }
  .service__media { width: 100%; min-height: 0; height: 360px; border-radius: 24px !important; }
  .service__body { width: auto; }
  /* both sides move left on mobile — the CTA sits on the right edge */
  .service__deco,
  .service__deco--r,
  .service__deco--l { width: 74px; bottom: 8px; left: 16px; right: auto; }

  .bio, .bio--adi { flex-direction: column; align-items: stretch; padding-inline: 32px; }
  .bio__media { justify-content: flex-start; }
  .bio__text { width: auto; padding-inline: 0; }

  .contact-row { flex-direction: column; }
  .contact-form, .contact-aside { width: 100%; }
  .contact-main { padding: 20px 32px 60px; }

  .site-footer__cols { flex-direction: row-reverse; flex-wrap: wrap; justify-content: flex-start; gap: 40px; }
  .site-footer__blocks--mobile { display: none; }
  .site-footer__blocks { display: none; }
}

@media (max-width: 767px) {
  /* ----------------------------------------------------------------------
     Mobile follows its own Figma frames (390px): "עמוד הבית - מובייל" and
     "הצוות - מובייל". Header is hamburger + logo only, the footer swaps to
     the stacked artwork and drops the contact block.
     ---------------------------------------------------------------------- */

  /* ---- header ---- */
  .site-header { padding: 10px 20px; }
  .site-header__inner { gap: 0; }
  .logo { width: 115.089px; height: 76.064px; --logo-size: 36.7px; --logo-track: -1.835px; }
  .header-cta { display: none; }
  .nav-toggle {
    order: 3;
    margin-inline-start: auto;
    width: 28px;
    height: 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .nav-toggle span { height: 3px; margin: 0; border-radius: 2px; background: var(--deep-teal); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

  /* ---- home hero: centred, stacked ---- */
  .hero { padding: 32px 24px; height: auto; }
  .hero__canvas { gap: 24px; }
  /* the box disappears but its text-align still inherits, and the desktop
     value was leaving the paragraph ragged against the right edge */
  .hero__text { display: contents; text-align: center; }
  .hero__canvas { align-items: center; text-align: center; }
  .hero__titles { order: 1; }
  .hero__lead { order: 1; margin-top: -4px; }
  .hero__collage { display: none; }
  .hero__figure-wide { display: none; }
  .hero__figure-mobile { display: block; order: 2; width: 100%; height: auto; }
  .hero__titles { align-items: center; gap: 10px; white-space: normal; }
  .hero__title { font-size: 36px; letter-spacing: -1.8px; line-height: .9; }
  .hero__subtitle { font-size: 22px; letter-spacing: -1.1px; line-height: .9; }
  .hero__lead { font-size: 16px; max-width: 292px; }
  .hero__collage { gap: 12px; }
  .hero__figure { width: 202px; }
  .hero__square { width: 148px; }

  /* ---- values ---- */
  .values { padding: 40px 24px; background: #fff; }
  .values__row { gap: 30px; width: 342px; max-width: 100%; flex-wrap: nowrap; }
  .value { width: auto; flex: 1 0 0; gap: 4px; }
  .value img, .value .vs { width: 100%; height: auto; max-width: 74.4px; }
  .value span { font-size: 20px; line-height: 25.809px; letter-spacing: -.4px; }

  /* ---- service bands ---- */
  .band { gap: 24px; padding-bottom: 32px; }
  .band__media {
    width: 100%;
    height: auto;
    aspect-ratio: 390 / 237.025;   /* the Figma proportion, at any width */
    border-radius: 16px 16px 16px 0 !important;
  }
  /* the copy always leaves 64px on whichever side carries the watermark and
     16px on the other, so the three columns are the same width — they just
     mirror, following the watermarks: left, right, left */
  .band--a .band__body,
  .band--b .band__body,
  .band--c .band__body { gap: 20px; }
  /* 72 rather than 64: the rotated title's letters reach past their own box,
     and at that size the widest of them needed the extra to stay clear of the
     copy. All three keep the same gutter so the columns stay equal. */
  .band--a .band__body { padding: 0 16px 0 72px; }
  .band--b .band__body { padding: 0 72px 0 16px; }
  .band--c .band__body { padding: 0 16px 0 72px; }
  /* line-height == font-size, so the 20px below the heading is 20px of air
     rather than 20 plus 6 of leading — the gap down to the button reads the
     same as the gap down to the paragraph only once the box hugs the type */
  .band__title { font-size: 26px; line-height: 26px; letter-spacing: -.52px; }
  .band__text { font-size: 16px; line-height: 20px; letter-spacing: -.32px; }
  .band__text p + p { margin-top: 20px; }

  /* The watermark fills the gap between one photo and the next exactly: it
     begins at the foot of its own photo and ends where the next section's
     photo starts. The photo is full-bleed at a fixed proportion, so its foot
     sits at 100vw / 1.6453 — that is the starting point here, and main.js
     then measures the real gap and sets the type size to fill it. The sizes
     below are the Figma values at 390px, which the fitting starts from;
     thickness and tracking are in em so the whole word scales as one.
     Sides alternate the way the design has them: left, right, left. */
  .watermark {
    display: block;
    top: calc(100vw / 1.6453 + 1px);
    bottom: auto;
    height: auto;
    writing-mode: vertical-rl;
    transform: none;
    letter-spacing: -.02em;
  }
  .watermark--a { left: 1px;  right: auto; font-size: 55px;   line-height: .4364em; color: rgba(234,114,43,.2); }
  .watermark--b { left: auto; right: 0;    font-size: 76.5px; line-height: .4314em; }
  .watermark--c { left: 0;    right: auto; font-size: 57.6px; line-height: .9896em; }

  /* ---- מי אנחנו ----
     Not the desktop section stacked: the phone layout keeps each pair side by
     side, text against the right edge and a tall photograph on the left. */
  .team { padding: 20px 16px; gap: 5px; align-items: stretch; text-align: right; }
  .team__title { font-size: 26px; line-height: 32.261px; letter-spacing: -.52px; }
  .team__lead { font-size: 16px; line-height: 20px; letter-spacing: -.32px; width: auto; }
  /* the break is placed for the wide measure; here it would leave a short line */
  .br-wide { display: none; }
  .team__row { flex-direction: column; gap: 30px; align-items: stretch; margin-top: 25px; }
  /* the tablet rule gives each card a 420px flex-basis; once the row is a
     column that basis is a height, and the card grows to it */
  .team-card { flex: none; flex-direction: row; align-items: flex-start; justify-content: flex-end; gap: 20px; }
  /* the two alternate: bar's photograph on the right, adi's on the left */
  .team-card--adi { flex-direction: row-reverse; }
  .team-card__photo { order: 0; width: 158px; height: 270px; border-radius: 10px; }
  .team-card__text,
  .team-card--adi .team-card__text { width: auto; flex: 1; min-width: 0; padding-top: 0; gap: 10px; }
  .team-card__head { gap: 0; }
  .team-card__name { font-size: 26px; line-height: 32.261px; letter-spacing: -.52px; }
  .team-card__role { font-size: 18px; line-height: 20px; letter-spacing: -.36px; }
  .team-card__bio  { font-size: 16px; line-height: 20px; letter-spacing: -.32px; }
  .team-card__link { font-size: 18px; line-height: 24px; letter-spacing: -.36px; }

  /* ---- gallery ---- */
  .gallery { padding: 32px 0; gap: 20px; align-items: center; }
  .gallery__title { font-size: 26px; line-height: 32.261px; letter-spacing: -.52px; }
  .gallery__track { --strip: 2587px; animation-duration: 65s; }

  /* ---- contact band ---- */
  .contact-band { padding: 32px 24px; gap: 20px; }
  .contact-band__title { font-size: 26px; line-height: 32px; letter-spacing: -.52px; text-align: center; }
  .contact-band__form { flex-direction: column; align-items: center; gap: 25px; width: 302px; }
  .contact-band__form .btn { align-self: center; }
  .field-line { width: 302px; max-width: 100%; }
  /* the size is set once, for every screen — the 190px the submit button used
     to get here was the last thing making a button bigger than the component */
  .btn--cream { justify-content: center; }

  /* ---- inner page heroes ---- */
  .page-hero { padding: 32px 24px 0; gap: 20px; }
  .page-hero__title { font-size: 36px; letter-spacing: -1.8px; line-height: .9; }
  .page-hero__sub { font-size: 22px; letter-spacing: -1.1px; line-height: .9; }
  .page-hero__lead { font-size: 16px; line-height: normal; }

  /* ---- about: bio cards ---- */
  .bio, .bio--adi { flex-direction: column; align-items: flex-end; padding: 18.306px 16px; gap: 15px; }
  .bio--adi { flex-direction: column; }
  .bio__media { order: -1; gap: 6.715px; align-items: flex-end; justify-content: flex-end; width: 100%; }
  /* The two cards mirror each other, exactly as they do on the wide layout:
     bar's pair stands against the left margin, adi's against the right, and
     the strip left over on the far side is where the little shapes go. Both
     pairs are already written in the right order, so nothing is reversed —
     bar only needs telling which margin to stand against. */
  .bio--bar .bio__media { justify-content: flex-start; }
  .bio__main { width: 201.459px; height: 268.612px; }
  /* the squared corner is the outer bottom one, so it follows the pair.
     Written per-modifier because the desktop rules are, and would win on
     specificity otherwise — which is how bar kept its 24px corner here. */
  .bio--bar .bio__main { border-radius: 10.744px 10.744px 10.744px 0; }
  .bio--adi .bio__main { border-radius: 10.744px 10.744px 0 10.744px; }
  .bio__side { display: block; width: 95.805px; height: 127.74px; border-radius: 5.11px; }
  .bio__text { width: 100%; padding: 0; gap: 5px; }
  .bio__name { font-size: 26px; line-height: 1.1; }
  .bio__role { font-size: 18px; line-height: 1.45; }
  .bio__body { font-size: 16px; line-height: 20px; }
  .bio__body p + p { margin-top: 20px; }
  /* the little pair stands on the photographs' baseline, in the strip left
     over on the far side of each — right of bar's pair, left of adi's */
  .bio__deco { display: block; width: 48px; top: auto; bottom: 0; }
  /* they lean a little past the photographs' box, as drawn — which also keeps
     bar's clear of the small photograph on a 375px screen */
  .bio--bar .bio__deco { right: -12px; left: auto; }
  .bio--adi .bio__deco { left: -1px; right: auto; bottom: 10px; }

  /* ---- services ---- */
  .service { flex-direction: column; align-items: stretch; padding: 28px 20px; gap: 24px; }
  .service--r2, .service--r4 { flex-direction: column-reverse; }
  /* These photographs are portrait — 530x642 — and a letterbox that shallow
     threw away 44% of every one of them, which is how heads and hands ended
     up outside the frame. A square keeps 83% of the picture. Each one is
     then aimed at its own subject rather than at the middle of the file,
     because the middle of a photograph is rarely where the person is. */
  .service__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    min-height: 0;
    border-radius: 16px !important;
  }
  #tikshoret .service__media img { object-position: 50% 40%; }  /* her face sits high */
  #ripui     .service__media img { object-position: 50% 62%; }  /* hanging upside down, low */
  #kvutzot   .service__media img { object-position: 50% 48%; }
  #kita-alef .service__media img { object-position: 50% 45%; }
  #ivchun    .service__media img { object-position: 50% 52%; }
  .service__body { width: auto; gap: 24px; }
  .service__title { font-size: 26px; line-height: 32.261px; letter-spacing: -.52px; }
  .service__intro, .acc__body { font-size: 16px; line-height: 20px; }
  .acc__q { font-size: 17px; }
  /* both sides move left on mobile — the CTA sits on the right edge */
  .service__deco,
  .service__deco--r,
  .service__deco--l { width: 74px; bottom: 8px; left: 16px; right: auto; }

  /* ---- contact page ---- */
  .contact-main { padding: 16px 24px 44px; }
  .contact-row { flex-direction: column; gap: 28px; }
  .contact-form, .contact-aside { width: 100%; }
  .contact-form__title { font-size: 22px; }
  .contact-map { width: 100%; }

  /* ---- footer: stacked artwork, no contact block ---- */
  .site-footer { padding: 40px 24px 96px; gap: 32px; align-items: flex-start; }  /* room for the sticky button */
  .site-footer__blocks { display: none; }
  .site-footer__blocks--mobile {
    display: block;
    position: absolute;
    left: -10px;
    top: 48.75px;
    width: 188px;
  }
  .site-footer__cols { flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; }
  .footer-nav__title, .footer-brand__contact { display: none; }
  .footer-nav { order: 2; width: 100%; align-items: flex-start; gap: 17px; text-align: right; }
  .footer-nav a { font-size: 18px; width: auto; }
  .footer-brand__tagline { text-align: right; }
  .footer-brand { order: 1; width: 100%; gap: 5px; }
  .footer-brand .logo--lg { width: 159px; height: 105.086px; --logo-size: 50.7px; --logo-track: -2.535px; }
  .footer-brand__tagline { font-size: 20px; width: 100%; }
  .site-footer__bottom { width: 100%; padding-top: 20px; }
}


/* ==========================================================================
   Scroll reveal
   Each section brings its own parts in: they rise and fade up as the section
   reaches the fold, a beat apart from each other so the eye is led through
   the block rather than hit with all of it at once. The hidden state is
   gated behind .js-reveal, which an inline script in <head> sets before
   first paint — so it is applied early enough not to flash, and never
   applied at all when scripting is off.
   ========================================================================== */
.js-reveal [data-reveal] {
  --rise: 30px;
  opacity: 0;
  transform: translateY(var(--rise));
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  /* the delay is per element, set from its position in the group */
  transition: opacity .5s cubic-bezier(.22, .61, .36, 1) var(--rd, 0ms),
              transform .5s cubic-bezier(.22, .61, .36, 1) var(--rd, 0ms);
}
/* a shorter screen wants a shorter climb — the same 44px reads as a lurch
   when the whole section is only a few hundred pixels tall */
@media (max-width: 767px) {
  .js-reveal [data-reveal] { --rise: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}