/* ============================================================
   HERO — the banner, restored
   A full-width panel: the photograph fills it, the copy sits on
   the right (RTL spine) over a veil that fades to the page colour
   itself (#F2F1EC), so the panel never reads as a grey box.
   Everything here is a token from base.css; the only local value
   is the panel radius, which is this composition's own decision.
   ============================================================ */

:root{
  --r-hero: var(--r);
  /* the Figma band is 1880 x 704 on a 1920 canvas — 20px of paper either side,
     and exactly the natural ratio of hero-dafna.jpg (1880x705), so the
     photograph enters at 1:1 with no crop at all */
  --hero-max: 1920px;
  --hero-gutter: 20px;
  --hdr-h: 72px;        /* measured at >=1025 */
  /* the band already sits 20px from the left and right edges; the same 20px
     above and below makes it one even frame instead of four different gaps */
  --hero-gap: var(--hero-gutter);
}

/* ============================================================
   HEADER — on the band's edge, not on the content grid
   The hero panel is the widest thing on the page, so the logo
   and the CTA line up with its corners rather than with 1240.
   ============================================================ */
/* frosted, not glassy: the paper colour at 72% with a real blur behind it, no
   border, no shadow, no card. The band scrolls under it and stays legible.
   NOTE: backdrop-filter has no native Elementor control — this is a second
   documented code exception when we port. */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:60;
  background:rgba(242,241,236,.72);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
          backdrop-filter:blur(20px) saturate(150%);
}
@supports not (backdrop-filter:blur(1px)){ .hdr{ background:rgba(242,241,236,.94) } }

.hdr__bar{
  max-width:var(--hero-max);
  padding:22px var(--hero-gutter) 16px;
  flex-direction:row-reverse;   /* logo to the left, actions to the right */
  gap:0;                        /* base.css adds one, and it moved the spine */
}
/* space-between was splitting the slack in two and centring the nav on nothing,
   leaving 736px of empty header at the RTL entry point. The nav now ends on the
   same vertical line as the eyebrow, the H1 and the CTA. */
.hdr__nav{ margin-left:auto; margin-right:64px }

/* a two-stroke mark: one full, one short, aligned to the reading edge.
   Three equal bars is the default icon; this one is drawn. */
.hdr__burger{ width:26px; height:11px }
.hdr__burger i{
  position:absolute; inset-inline-end:0; height:1px; background:var(--ink);
  transition:width .3s cubic-bezier(.2,.7,.3,1), transform .3s;
}
.hdr__burger i:nth-child(1){ top:0;  width:26px }
.hdr__burger i:nth-child(2){ top:10px; width:15px }
.hdr__burger:hover i:nth-child(2){ width:26px }

.hero{ padding-block:var(--hero-gap) }

.hero__wrap{ max-width:var(--hero-max); margin-inline:auto; padding-inline:var(--hero-gutter) }

.hero__panel{
  position:relative; overflow:hidden;
  container-type:inline-size;
  border-radius:var(--r-hero);
  width:100%; aspect-ratio:1880/704;
  /* the Figma ratio is the natural size; on a short window the band gives way
     rather than pushing its own bottom edge off the screen */
  max-height:calc(100svh - var(--hero-gap)*2);
  min-height:440px;
  display:flex;
  /* one tonal step off the page: without it the veil's own first stop is
     the page colour and the band simply has no right-hand edge */
  background:var(--panel);
}

/* the photograph is the panel */
.hero__img{ position:absolute; inset:0; margin:0 }
/* TWO LAYERS, not one photograph.
   The file builds the band from a background plate and a separate cut-out
   of her, and supplies both. Placed by its own numbers, as shares of the
   band so they hold at every width:
       background  1880 x 704, fills the band
       figure      x 181.09  y 48.31   397.313 x 656.075
                   = left 9.632%  top 6.863%  w 21.134%  h 93.192%
   Keeping them apart means she can be moved, resized or lit differently
   without touching the room behind her — which one flat JPEG cannot do. */
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.hero__img{
  position:absolute; margin:0; z-index:1;
  /* right/bottom must be cleared explicitly: an earlier rule sets inset:0, and
     with left, right AND width all specified the box is over-constrained — in
     an RTL document the value CSS drops is `left`, so she was landing 1300px
     to the right of where the file puts her. */
  right:auto; bottom:auto;
  left:9.632%; top:6.863%; width:21.134%; height:93.192%;
}
.hero__img img{
  width:100%; height:100%;
  object-fit:contain; object-position:center bottom;
}/* NO VEIL.
   There was a wash over the panel's right half to guarantee the type had a
   ground. Its colour was --panel (#EAE9E5); the wall inside the photograph
   is #DFD9D7 — lighter and cooler than the thing it was covering — so it
   painted a visible vertical seam down the middle of a continuous wall.
   The photograph does not need it: the wall behind the copy is already an
   even, empty surface, and the ink reads on it at better than 9:1. It also
   still gives the band its edge, because that wall is a full tonal step
   darker than the page it sits on. */
.hero__panel::after{ display:none }

/* ============================================================
   THE COPY BLOCK — every value read out of the Figma file (913:6),
   not judged by eye. At a 1880-wide band:
       copy right edge  1650.65  ->  229.35 in from the band's right
       eyebrow  21px   top 147.27
       H1       96px   top 189.34   line-height 0.7567   box 805 wide
       lede     30px   top 431.07   line-height 0.99     box 810 wide
       buttons  18px   top 604.57   height 45.77   gap 44.64   radius 10
       secondary sits to the RIGHT of the primary (reading order in RTL)

   Two things were wrong before, and they were the same mistake:
   the copy was pushed to 44px off the band's right edge instead of 229,
   and every size was roughly half the file's. Nothing was "too big" —
   the block was crushed against the edge, so shrinking the type was the
   fix that kept not working.

   Stated in cqw against the panel, so the whole composition holds its
   ratio at every viewport instead of only at 1920.
   ============================================================ */
.hero__copy{
  position:relative; z-index:2;
  width:100%;
  /* Both axes now come from the file. Horizontally: 229.35 of 1880 in from
     the right. Vertically: the file puts the eyebrow at 147, the H1 at 189,
     the lede at 431 and the buttons at 604 of a 704-tall band — the block
     SPANS the band. Mine was a compact cluster centred in it, which is why
     it kept reading as a different composition even once the sizes matched.
     The gaps below carry those anchors at the type size you chose.
     Each is clamped: below ~1400 the band is too short to hold the file's
     spacing under a fixed header, so it compresses instead of clipping. */
  padding:clamp(calc(var(--hdr-h) + 28px), 7.83cqw, 147px) 12.2cqw 3cqw 0;
  /* start, not end: the document is RTL, so the inline start edge IS the
     right edge. end would place the block against the left of the band. */
  display:grid; align-content:start; justify-items:start;
  gap:0; text-align:right;
}
/* Type is clamped, not pure cqw. The file is drawn at an 1880 band; scaling
   it linearly would put the headline at 26px on a 1025 screen. The RIGHT
   INSET stays in cqw, because position is what has to hold — that inset was
   the actual bug, and shrinking type was the wrong compensation for it. */
.hero__copy .eyebrow{
  font-size:clamp(12px,.691cqw,13px); line-height:1.2; letter-spacing:.08em;
}
.hero__copy h1{
  font-size:clamp(30px,2.66cqw,50px); line-height:1.1;
  max-width:26cqw;
  margin-top:clamp(6px,1.41cqw,27px); font-weight:300; text-wrap:balance;   /* H1 top -> 189 */
}
.hero__copy h1 strong{ font-weight:700 }
@media (min-width:1025px){ .hero__actions{ flex-direction:row-reverse } }

.hero__copy .lede{
  color:#5C564C;
  font-size:clamp(14px,.824cqw,15.5px); line-height:1.6;
  max-width:30cqw;
  margin-top:clamp(18px,7cqw,132px); text-wrap:pretty;                      /* lede top -> 431 */
}
/* The desktop file puts the outlined button to the RIGHT of the filled one;
   the phone mockup puts the filled one on the right. row-reverse belongs to
   the desktop branch only — stated here it leaked onto the phone and swapped
   the pair there too. */
.hero__actions{
  display:flex; align-items:stretch;
  gap:clamp(12px,2.374cqw,45px); margin-top:clamp(16px,6.59cqw,124px); flex-wrap:wrap;  /* buttons top -> 604 */
}

@media (max-width:1120px){
  /* the inset stays 12.2% — it is the file's value and the thing that makes
     the block read as composed. Only the measure narrows. */
  .hero__copy h1{ max-width:30cqw }
  .hero__copy .lede{ max-width:34cqw }
}
/* ── under 1024 ──────────────────────────────────────────────────────────
   Measured off the Figma group 980:15, not estimated:
     panel      376 x 542, radius 10
     background linear gradient #F2F1EC -> #D7D0CB, top to bottom
                (sampled at both edges — pure vertical, and the top is exactly
                 the site's own paper colour)
     figure     194 wide = 51.6% of the panel, centred to the pixel
                (its centre 195.0 = the panel centre 195.0), starting 44% down
                and flush to the panel's bottom edge
   She is NOT a full-width photograph — she is a narrow centred figure that
   the panel's bottom edge cuts. Copy is centred, as asked; in the file the
   copy rasters sit at an arbitrary right inset while the figure is centred
   to a decimal, so the figure is the placement that was actually designed.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  :root{ --hero-gutter:7px; --hdr-h:62px }

  .hero{ padding-block:var(--hero-gap) }
  .hero__wrap{ max-width:none }

  /* The panel is the measuring stick. Every size inside it is stated in cqw —
     a percentage of the panel's own width — so shrinking the screen shrinks
     the whole composition together and the proportions never change.
     Two things stay physical and are the only deviation: the header clearance
     (the header is a fixed bar) and a small legibility floor on the controls. */
  .hero__panel{
    container-type:inline-size;
    display:flex; flex-direction:column;
    /* 700, not 600: the re-based type stack needs the extra height, and the
       ratio stays a single constant — which was the requirement. */
    /* 735 = the measured stack: copy 463 + figure 271 at a 376px panel.
       Every part is in cqw, so the sum scales and the constant holds. */
    /* Figma 915:7 — the panel is 373.71 x 587.95. A fixed ratio, not a
       content-driven height: measured, the content-driven version drifted
       from 0.559 at 320 to 0.600 at 430, so the composition was a different
       shape on every phone. One constant; everything inside is a share of it. */
    aspect-ratio:373.71/587.95; min-height:0; max-height:none;
    border-radius:var(--r); overflow:hidden;
    background:linear-gradient(to bottom, var(--paper) 0%, #D7D0CB 100%);
  }
  .hero__panel::after{ display:none }
  /* the phone panel is a gradient, not the room */
  .hero__bg{ display:none }

  /* Every number below is measured off the supplied mockup (390x844), read
     in pixels rather than judged by eye, and restated as a share of the
     panel's own width so the whole composition scales as one unit.
        panel        374 x 593
        eyebrow      52 from the panel's top edge
        H1           ~29px, line pitch 32  (two lines)
        H1 -> lede   38      lede ~14.5px, three lines, pitch 22
        lede -> CTA  37      CTA box 33 tall
        CTA -> figure 28     figure 42% wide, flush to the bottom edge
     The eyebrow's 52 is measured with no header in the file; here the header
     is a real 62px bar the panel slides under, so that one value becomes
     clearance instead. It is the only number not taken from the mockup. */
  .hero__copy{
    order:1; flex:0 0 auto; position:static; width:100%; z-index:2;
    padding:calc(var(--hdr-h) + 5cqw) 7cqw 0;
    text-align:center; justify-items:center; align-content:start;
    gap:0;
  }
  /* the desktop measure is 42.8cqw of an 1880 band; on a 376 panel that is
     161px and the headline broke to three lines. The phone stack is centred
     and full-width, so it carries no measure of its own. */
  .hero__copy h1{ font-size:7.7cqw; line-height:1.1; margin-top:5.3cqw; max-width:none }
  .hero__copy .lede{
    font-size:max(14px,3.9cqw); line-height:1.5;
    max-width:30ch; margin:10cqw auto 0;
  }
  .hero__copy .eyebrow{ font-size:max(12px,3.1cqw); letter-spacing:.08em }
  .hero__actions{ justify-content:center; margin-top:9.8cqw; gap:3cqw }


  /* the figure: a fixed share of the panel, so it scales with everything else */
  .hero__img{
    order:2; flex:0 0 auto; position:relative; inset:auto;
    left:auto; top:auto; height:auto;
    width:62%; align-self:center; margin-top:auto;
    aspect-ratio:510/470; max-height:none;   /* phones override this below */
    /* the box is a crop window now, so it must clip — and min-height:0 stops
       the image's own intrinsic height from overruling the ratio */
    border-radius:0; overflow:hidden; min-height:0;
  }
  /* <picture> is display:inline by default, so height:100% on the <img> had
     nothing definite to resolve against and the figure grew to the full
     photograph. display:contents makes the img the figure's real child. */
  .hero__img picture{ display:contents }
  /* cover + top, not contain + bottom: the box is now a crop window and the
     panel's own edge makes the cut, exactly as the desktop transform does */
  .hero__img img{
    width:100%; height:100%;
    object-fit:cover; object-position:center top;
    transform:none;              /* the desktop re-frame stops at 1024 */
  }
}

/* 641-1024 — every cqw in the block above was authored against a 376px panel.
   On a 1010px panel each one is 2.7x its intended value: the primary button
   measured 305x106 and the eyebrow 28.3px against a 15px lede. In this band
   the sizes come from the tokens instead, and the panel's height comes from
   the screen so the hero still resolves to one frame. */
/* 641-1024 — the band had no design of its own. The panel height came from
   the viewport and the figure was whatever was left over, so at 1024 she
   rendered 22.7% of the panel, at 900 40.5% and at 768 68.3% — three
   different pictures inside one media query.
   It now runs the phone composition, with the inner column capped so the
   proportions hold instead of stretching: on a tablet the hero is a portrait
   card centred in the band, not a band trying to be a desktop. */
@media (min-width:641px) and (max-width:1024px){
  :root{ --hdr-h:65px }
  .hero__panel{
    aspect-ratio:auto;
    height:auto; min-height:0;   /* content decides; a viewport floor overflowed 1024 and unstuck her feet at 768 */
    display:flex; flex-direction:column; align-items:center;
    container-type:inline-size;
  }
  /* the measuring column: everything inside is a share of THIS, not of the
     band, so 768 and 1024 render the same composition at the same scale */
  .hero__copy{
    width:min(560px,100%); margin-inline:auto;
    padding:calc(var(--hdr-h) + 28px) 24px 0;
    text-align:center; justify-items:center; align-content:start; gap:0;
  }
  .hero__copy h1{ font-size:34px; line-height:1.12; max-width:none; margin-top:16px }
  .hero__copy .lede{ font-size:16px; line-height:1.5; max-width:38ch;
                      margin:22px auto 0 }
  .hero__copy .eyebrow{ font-size:13px; letter-spacing:.08em }
  .hero__actions{ justify-content:center; gap:16px; margin-top:24px }
  .hero__img{
    position:relative; inset:auto; margin:24px auto 0;
    width:min(210px,46.68%); aspect-ratio:398/657;
    flex:0 0 auto; overflow:visible;
  }
  .hero__img img{ object-fit:contain; object-position:center bottom }
}



/* 376 x 542 is a 390-wide spec. It holds at 390 and up; below that the copy
   wraps to more lines while a width-driven panel gets SHORTER, so the panel
   lengthens instead of eating her legs. Measured: at 360 the untouched ratio
   cropped 169px of a 309px figure. */

/* ============================================================
   BUTTONS + ARROW
   The arrow is drawn, not typed. A font glyph sits on the text
   baseline at whatever weight the typeface gives it; a hairline
   path matches the rest of the page and can move on its own.
   Square corners, because everything else on the page is square.
   ============================================================ */
.arw{
  width:17px; height:10px; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.arw__shaft{ transition:d .45s cubic-bezier(.2,.7,.3,1) }

.btn{
  border-radius:var(--r);                    /* the file's 10px */
  padding:clamp(8px,.57cqw,10px) clamp(26px,2.1cqw,40px);
  font-size:clamp(13px,.745cqw,14px); font-weight:700; letter-spacing:.01em;
  gap:var(--s2);
  transition:background .35s, color .35s, border-color .35s;
}
/* the arrow travels; the box does not move. Restraint is the point. */
.btn:hover .arw{ transform:translateX(-4px) }

/* the secondary is a button, not a hint. Same box, same height, same radius —
   it steps back through weight and fill, not by disappearing. */
/* the secondary keeps its box (a bare rule vanished on this background) but
   stops tying with the primary: lighter ink, hairline border, less weight */
/* The secondary was transparent with a hairline on a light band, so it had no
   body — it read as a link someone had drawn a box around. It gets a real
   fill now. It still steps back from the primary, but through TONE (paper on
   the darker band, dark ink on it) instead of through absence. */
/* the file draws it as a 2px outline in the same ink as the filled one, on
   the band itself — not a tinted hairline and not a second fill */
.btn--ghost{
  background:transparent; color:var(--ink);
  border:2px solid #2C2C2C; border-radius:var(--r);
  padding:clamp(8px,.57cqw,10px) clamp(12px,1cqw,18px);
  font-size:clamp(13px,.745cqw,14px); font-weight:700;
}
.btn--ghost:hover{ background:#2C2C2C; color:var(--paper); border-color:#2C2C2C }

.hdr__link{
  gap:var(--s2); border:0; border-radius:var(--r);
  padding:12px 26px;
  background:var(--ink); color:var(--paper);
  font-size:var(--small); font-weight:600; letter-spacing:.02em;
  white-space:nowrap; transition:background .35s;
}
.hdr__link:hover{ opacity:1; background:var(--ink-2) }
.hdr__link:hover .arw{ transform:translateX(-4px) }




/* ============================================================
   SOCIAL RAIL — on the side, following the screen
   Her instruction. It is fixed to the viewport's left edge, which in RTL is
   the quiet side: the reading spine, the headline and the CTA all end on the
   right, so the icons never cross the line the eye travels down.
   Vertical, because a side rail that stays horizontal is just a corner badge
   that moved. On phones it cannot be fixed — it would sit on the copy — so it
   becomes an absolute column in the panel's own left margin, beside the figure.
   ============================================================ */
.rail{
  position:fixed; z-index:40;
  left:clamp(14px,1.5vw,30px);
  top:50%; transform:translateY(-50%);
  display:grid; grid-auto-flow:row; gap:var(--s3); align-items:center;
}
.rail__i{
  display:grid; place-items:center;
  width:20px; height:20px;
  color:var(--ink); opacity:.62;
  transition:opacity .3s, transform .3s;
}
.rail__i svg{ width:20px; height:20px; display:block; fill:currentColor; stroke:none }
.rail__i:hover{ opacity:1; transform:translateX(2px) }

/* Above 1025 the panel is the wide band, so its centre is NOT the window's:
   at 1280x1024 a viewport-centred rail hangs off the band onto bare paper.
   0.187235 = 704/1880/2 — half the band's own ratio, because we want its
   midline. Below 1025 the panel is nearly full-height and 50% is correct. */
@media (min-width:1025px){
  .rail{ top:clamp(200px, calc(20px + (100vw - 40px) * 0.187235), 50vh) }
}

@media (max-width:1024px){
  .rail{ left:14px; gap:var(--s2) }
  .rail__i, .rail__i svg{ width:19px; height:19px }
}
@media (max-width:640px){
  /* the panel's left margin is 4cqw wide and empty from the CTA row down —
     the figure is centred and 46% wide, so this column can never touch it */
  .rail{
    position:absolute; left:4.2cqw; top:auto; bottom:7cqw; transform:none;
    gap:4.4cqw;
  }
  .rail__i{ opacity:.78 }   /* the gradient is at its darkest here */
  .rail__i, .rail__i svg{ width:max(16px,4.4cqw); height:max(16px,4.4cqw) }

  /* The crop above exists to cut off the crossed forearms the brief bans.
     On a phone it cannot: at this size it makes a bust severed mid-chest,
     which reads worse than the pose it avoids, and the full figure is what
     the client approved from her own file. She stays whole here. */
  /* 42% and flush to the bottom edge, both measured off the mockup */
  /* 46.68% = 174.43 of the file's 373.71 panel; centred; flush to the
     bottom edge. Absolute, because in the file she is a layer over the
     panel rather than a block in the stack under the copy. */
  .hero__img{
    position:absolute; inset-block-end:0; inset-inline:0;
    margin-inline:auto;
    width:46.68%; aspect-ratio:398/657;
    overflow:visible; z-index:1;   /* no margin:0 here - it resets the auto centring */
  }
  .hero__copy{ position:relative; z-index:2 }
  .hero__img img{ object-fit:contain; object-position:center bottom }
}

/* The arrow was computing to 24.25px inside the button and wrapping the label
   onto a second line — an 84px-tall primary against a 58px secondary. Size and
   no-wrap are stated here, last and at button specificity, so nothing upstream
   can reach them. */
.btn, .hdr__link{ white-space:nowrap; flex-wrap:nowrap }
.btn .arw, .hdr__link .arw{ width:17px; height:10px; flex:0 0 auto }
@media (max-width:640px){
  .btn .arw, .hdr__link .arw{ width:max(13px, 4.2cqw); height:max(8px, 2.5cqw) }
}

/* Control sizes per band, stated LAST so source order cannot beat them.
   Phones: sized in cqw so they scale with the panel, with a legibility and
   touch-target floor. 641-1024: tokens, because a cqw authored for a 376px
   panel is 2.7x oversized on a 1010px one. */
@media (max-width:640px){
  .btn,
  .hero__actions .btn--ghost{
    /* the mockup's button box is 33px tall: 13px label + 8px above and below */
    font-size:max(13px, 3.5cqw);
    padding:max(8px, 2.1cqw) max(12px, 3.2cqw);
    gap:max(6px, 1.7cqw);
    border-radius:var(--r);
    /* the secondary's Hebrew is the longer label; once it gained a fill it
       broke to two lines and stopped matching the primary's height */
    white-space:nowrap;
  }
  .btn{ padding-inline:max(24px, 6.4cqw) }
}
@media (min-width:641px) and (max-width:1024px){
  .btn,
  .hero__actions .btn--ghost{
    font-size:var(--small); padding:14px 28px; gap:var(--s2); border-radius:var(--r);
  }
  .btn .arw, .hdr__link .arw{ width:17px; height:10px }
}

/* The primary must be the widest object in the pair. Label length was deciding
   it instead: the secondary's Hebrew is longer, so at 1024 and at 390 the
   secondary was measuring wider than the primary. Its padding is cut back so
   rank comes from the design, not from word count. */
@media (min-width:641px) and (max-width:1024px){
  .hero__actions .btn--ghost{ padding-inline:18px }
}
@media (max-width:640px){
  .hero__actions .btn--ghost{
    padding-inline:max(10px, 2.4cqw);
    font-size:max(13px, 3.3cqw);
  }
  /* on a phone she is centred, so the clean corner is the other one */
}


/* ============================================================
   ENTRANCE — the rhythm from thedekel.co.il, measured not guessed
   That site is Elementor, so its hero is the native Entrance Animation
   control. Read off the live page:
     heading  fadeInUp, delay 0
     text     fadeInUp, delay 400
     button   fadeInUp, delay 800
     button   fadeInUp, delay 1000
     duration 1.25s, travel translate3d(0, 100%, 0)
   The character is generosity: long gaps, a long duration, a real lift.
   My first pass was 80ms apart over 550ms, which next to it reads hurried.

   Two deliberate departures:
   - Travel is a fixed 48px, not 100% of the element's own height. At 100%
     the H1 would lift 160px and the eyebrow 18px — the same rule producing
     two unrelated gestures. One distance keeps the stack moving as a unit.
   - The curve stays the strong ease-out. animate.css runs fadeInUp on the
     browser's default, which drifts in; this arrives and settles.

   The photograph does not lift — a full-bleed image that travels exposes
   the panel's edge. It breathes instead: 1.06 -> 1 over 1.6s, running
   underneath the whole text sequence, and it starts LARGER than the frame
   so the panel is covered on the first frame.
   ============================================================ */
@keyframes hero-rise{
  from{ opacity:0; transform:translateY(48px) }
  to  { opacity:1; transform:none }
}
@keyframes hero-settle{
  from{ opacity:0; transform:scale(1.06) }
  to  { opacity:1; transform:none }
}
@keyframes hero-slide-in{
  from{ opacity:0; transform:translateY(48px) }
  to  { opacity:.62; transform:none }
}
@keyframes hero-fade{ from{ opacity:0 } to{ opacity:1 } }

.hero__img{ animation:hero-settle 1.6s var(--ease-out) both }
.hero__copy .eyebrow      { animation:hero-rise 1.25s var(--ease-out)    0s both }
.hero__copy h1            { animation:hero-rise 1.25s var(--ease-out) .15s both }
.hero__copy .lede         { animation:hero-rise 1.25s var(--ease-out) .55s both }
.hero__actions .btn       { animation:hero-rise 1.25s var(--ease-out) .95s both }
.hero__actions .btn--ghost{ animation:hero-rise 1.25s var(--ease-out) 1.1s both }
.rail__i                  { animation:hero-slide-in 1.1s var(--ease-out) both }
.rail__i:nth-child(1){ animation-delay:1.25s }
.rail__i:nth-child(2){ animation-delay:1.35s }
.rail__i:nth-child(3){ animation-delay:1.45s }
/* the header is the frame, not a participant: it appears, it does not travel */
.hdr{ animation:hero-fade .6s var(--ease-out) both }

/* Fewer and gentler, not none: the fades stay because they still carry the
   reading order; every position change is removed and the waits collapse. */
@media (prefers-reduced-motion: reduce){
  .hero__img, .hero__copy .eyebrow, .hero__copy h1, .hero__copy .lede,
  .hero__actions .btn, .hero__actions .btn--ghost, .hdr{
    animation:hero-fade .3s ease both;
  }
  .rail__i{ animation:hero-fade .3s ease both; opacity:.62 }
  .rail__i:nth-child(1),.rail__i:nth-child(2),.rail__i:nth-child(3){ animation-delay:0s }
}