/* Phase E: light Miami Beach luxury. Loaded last, after arc.css, arc-d.css and arc-cine.css.
   One continuous luminous ground; sections are told apart by light, material and composition,
   not by a new background colour each time. Glass stays where it reads as a physical material. */

:root {
  --stone: #F8F4EE;            /* warm white ground, continuous */
  --stone-2: #F1EADF;          /* pale sand, used sparingly */
  --ivory: #FDFBF7;            /* luminous surface */
  --paper: #FDFBF7;
  --navy: #1D3658;             /* soft navy type (11:1 on the ground) */
  --navy-2: #2B4B74;
  --bronze: #7E5F36;           /* restrained bronze, 5.4:1 on the ground */
  --sea: #DCEBE5;              /* sea-glass, accents only */
  --sea-2: #C9DFD8;
  --daylight: rgba(255, 252, 244, .95);
  --header-tall: 116px;
  --header-short: 84px;
}
.arc { background: var(--stone); }

/* ---------- Header: edge-to-edge glass band with the big logo ---------- */
.arc .site-header { height: var(--header-tall); }
.arc .site-header .bar, .arc .site-header .bar.gd { height: var(--header-tall); align-items: center;
  transition: height .45s var(--ease), background var(--d-med) var(--ease), box-shadow var(--d-med) var(--ease); }
.arc .site-header.is-scrolled:not(.over-hero) .bar { height: var(--header-short); }
.arc .site-header::before { bottom: auto; height: var(--header-tall); transition: height .45s var(--ease); }
.arc .site-header.is-scrolled:not(.over-hero)::before { height: var(--header-short); }
.arc .site-header .brand img { height: auto; width: 214px; transition: width .45s var(--ease); }
.arc .site-header.is-scrolled:not(.over-hero) .brand img { width: 152px; }
/* Over the bright hero: clear glass, navy type, the colour logo */
.arc .site-header.over-hero .bar.gd { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.16));
  border-bottom-color: rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px -22px rgba(30,60,100,.35); }
.arc .site-header.over-hero .brand img { filter: none; }
.arc .site-header.over-hero .nav-top, .arc .site-header.over-hero .login, .arc .site-header.over-hero .sheet > summary { color: var(--navy); }
.arc .site-header.over-hero .nav-top:hover, .arc .site-header.over-hero .nav-top[aria-expanded="true"] { background: rgba(255,255,255,.5); }
.arc .site-header.over-hero .nav-top.is-current { color: var(--navy); box-shadow: inset 0 -2px 0 var(--bronze-lt); }
.arc .site-header.over-hero .sheet > summary { background: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.arc .site-header.over-hero .btn--small { background: var(--navy); color: var(--ivory); }
/* Home only: the header settles in as the page opens */
body:has([data-approach]) .site-header .bar { animation: e-down .8s .15s var(--ease) both; }
@keyframes e-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes e-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Hero: the architectural approach ----------
   --p (0 to 1) comes from arc.js. Camera: whole range (scale to ~1.26 incl. the load push-in, gateway drifts toward centre).
   Headline: eases out by p = .7. Next section: the This Shabbos sheet rises over the last ~quarter. */
.arc .approach { --p: 0; --zoom: .2; --dx: 0px; --dy: 0px; position: relative; height: calc(100svh + 100vh); margin-top: calc(-1 * var(--header-tall)); }
.arc .approach .stage { position: sticky; top: 0; height: 100svh; min-height: 640px; overflow: hidden; background-color: #CFE2F2; background-size: cover; background-position: 50% 100%; background-repeat: no-repeat; }
/* The stage carries the same picture as a static backing (set inline with the image), so the building never vanishes even if the moving layer is momentarily not drawn. */
.arc .approach .cam { position: absolute; inset: 0; }
/* On open the camera is already gliding in, slowly, on its own; scrolling then carries it further (scale on .scene). */
@keyframes e-push { from { scale: 1; } to { scale: 1.12; } }
.arc .approach .scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; transform-origin: 50% 70%;
  transform: translate3d(calc(var(--p) * var(--dx)), calc(var(--p) * var(--dy)), 0) scale(calc(1 + var(--p) * var(--zoom)));
  will-change: transform;
  animation: e-push 16s cubic-bezier(.3,.2,.3,1) both; }
.arc .approach .haze { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 24% 34%, rgba(255,255,255,.34), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 22%); }
.arc .approach .hero-copy { position: absolute; left: 0; right: 0; top: calc(var(--header-tall) + 7vh); z-index: 3;
  opacity: clamp(0, calc((.8 - var(--p)) * 1.6), 1); transform: translate3d(0, calc(var(--p) * -48px), 0); }
.arc .approach .hero-copy > * { animation: e-up .9s var(--ease) both; }
.arc .approach .hero-copy > :nth-child(1) { animation-delay: .25s; }
.arc .approach .hero-copy > :nth-child(2) { animation-delay: .38s; }
.arc .approach .hero-copy > :nth-child(3) { animation-delay: .52s; }
.arc .approach .hero-copy > :nth-child(4) { animation-delay: .64s; }
.arc .approach .kicker { color: var(--navy); }
.arc .approach .kicker::before { background: var(--bronze); }
.arc .approach h1 { color: var(--navy); font-size: clamp(50px, 5.7vw, 94px); line-height: .98; letter-spacing: -.015em; margin: 20px 0 22px; max-width: 11em;
  text-shadow: 0 1px 24px rgba(255,255,255,.35); }
.arc .approach h1 .l1 { display: block; }
.arc .approach h1 em { font-style: normal; color: #6B4E2A; }
.arc .approach .lede { color: #23324A; max-width: 30em; font-size: 19px; text-shadow: 0 1px 14px rgba(255,255,255,.5); }
.arc .approach .lede b { color: var(--navy); }
.arc .approach .actions { display: flex; gap: 26px; align-items: center; margin-top: 30px; flex-wrap: wrap; }
.arc .approach .actions .link { color: var(--navy); }
/* Rendering identification: always visible while the building is on screen */
.arc .approach .render-note { position: absolute; z-index: 4; right: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); top: calc(var(--header-tall) + 22px);
  display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 15px; border-radius: 999px;
  font: 500 12.5px/1.2 var(--text); letter-spacing: .02em; color: var(--navy); }
.arc .approach .render-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); box-shadow: 0 0 0 3px rgba(126,95,54,.18); }

/* ---------- This Shabbos: slim glass strip that rises out of the hero ---------- */
.arc .shabbos-strip { position: relative; z-index: 6; margin-top: -24vh; padding: 0 0 26px;
  /* The next section arrives as a luminous sheet sliding over the approach: the glass strip straddles its soft edge,
     so the building stays crisp until it is covered, instead of being washed out. */
  background: linear-gradient(180deg, rgba(248,244,238,0) 0, rgba(248,244,238,0) 64px, rgba(248,244,238,.88) 118px, var(--stone) 168px); }
.arc .strip-glass { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 26px 34px; padding: 22px 26px 22px 34px; border-radius: 28px;
  background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(253,250,244,.64)); }
.arc .strip-glass .s-title { display: grid; gap: 6px; justify-items: start; }
.arc .strip-glass h2 { white-space: nowrap; }
.arc .strip-glass h2 { font: 400 26px/1 var(--display); color: var(--navy); }
.arc .strip-glass .he { font: 400 17px/1 var(--hebrew); color: var(--bronze); }
.arc .strip-glass .s-candles { display: flex; align-items: center; gap: 12px; margin: 0; padding-left: 34px; border-left: 1px solid var(--line); }
.arc .strip-glass .s-candles b { font: 400 46px/1 var(--display); color: var(--navy); font-variant-numeric: tabular-nums; }
.arc .strip-glass .s-candles > span { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; }
.arc .strip-glass .s-times { list-style: none; margin: 0; padding: 0 0 0 34px; border-left: 1px solid var(--line); display: flex; gap: 28px; }
.arc .strip-glass .s-times li { white-space: nowrap; }
.arc .strip-glass .s-times li { display: grid; gap: 4px; font-size: 13px; color: var(--ink-3); }
.arc .strip-glass .s-times b { font: 600 16px/1 var(--text); color: var(--navy); font-variant-numeric: tabular-nums; }
.arc .strip-glass .s-actions { display: flex; gap: 22px; align-items: center; }
.arc .strip-glass .s-actions a { white-space: nowrap; }

/* ---------- Light glass everywhere (the dark variant becomes daylight glass) ---------- */
.arc .gd--dark { color: var(--navy);
  background: linear-gradient(150deg, rgba(255,255,255,.7) 0%, rgba(252,249,243,.52) 40%, rgba(246,241,233,.46) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(1.6) brightness(1.05); backdrop-filter: blur(22px) saturate(1.6) brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -22px 34px -22px rgba(255,255,255,.55), 0 1px 1px rgba(var(--shadow-warm),.08), 0 12px 24px -10px rgba(var(--shadow-warm),.24), 0 46px 80px -34px rgba(var(--shadow-warm),.42); }
.arc .gd--dark::before { background: linear-gradient(145deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 22%, rgba(255,255,255,.06) 55%, rgba(255,255,255,.4) 100%); }

/* ---------- Continuous luminous sections ---------- */
.arc .wall { margin-top: 0; padding-top: 96px;
  background: radial-gradient(60% 40% at 10% 0%, var(--daylight), rgba(255,252,244,0) 70%), var(--stone); }
.arc .notice .frame { box-shadow: inset 0 0 0 1px rgba(110,84,50,.12), 0 1px 1px rgba(40,28,14,.1), 0 16px 22px -14px rgba(40,28,14,.32), 0 50px 64px -44px rgba(40,28,14,.42); }

.arc .shabbos-room { color: var(--navy);
  background: radial-gradient(50% 60% at 92% 30%, rgba(201,223,216,.55), rgba(201,223,216,0) 70%), radial-gradient(40% 50% at 0% 100%, rgba(255,240,214,.7), rgba(255,240,214,0) 70%), var(--stone); }
.arc .shabbos-room::before, .arc .shabbos-room::after { display: none; }
.arc .shabbos-room .he-mark { color: rgba(126,95,54,.07); }
.arc .shabbos-room h2 { color: var(--navy); }
.arc .shabbos-room .kicker { color: var(--bronze); }
.arc .shabbos-room p { color: var(--ink-2); }
.arc .shabbos-room .ways-d a { color: var(--navy); border-top-color: var(--line); }
.arc .shabbos-room .ways-d a:hover { color: var(--bronze); }
.arc .instrument { padding: 26px 28px 20px; }
.arc .instrument h3 { color: var(--navy); font-size: 24px; }
.arc .instrument .parsha { color: var(--bronze); }
.arc .instrument .candles { border-color: var(--line); }
.arc .instrument .candles b { color: var(--navy); font-size: 46px; }
.arc .instrument .candles span, .arc .instrument dt, .arc .instrument .foot, .arc .instrument .illus { color: var(--ink-2); }
.arc .instrument dd { color: var(--navy); }
.arc .instrument .foot a { color: var(--navy); }

.arc .index-d { background: radial-gradient(45% 40% at 100% 0%, rgba(255,250,240,.9), rgba(255,250,240,0) 70%), var(--paper); }
.arc .index-d .preview .frame-arch { background: linear-gradient(170deg, #F4EDE1, #E9DFCE); }
.arc .index-d .preview img { object-fit: contain; padding: 34px 30px 26px; }
.arc .index-d .preview [hidden] { display: none !important; }
.arc .index-d .preview .frame-arch > * { transition: opacity .17s var(--ease); }
.arc .index-d .preview.is-swapping .frame-arch > * { opacity: 0; }

.arc .welcome-d { background: radial-gradient(55% 70% at 100% 0%, rgba(201,223,216,.45), rgba(201,223,216,0) 65%), radial-gradient(50% 60% at 0% 100%, rgba(239,230,214,.9), rgba(239,230,214,0) 70%), var(--stone); }
.arc .welcome-d .lede { color: var(--ink-2); }
.arc .welcome-d .kicker { color: var(--bronze); }

.arc .moments-d { background: var(--stone); }
.arc .moments-d h2, .arc .moments-d .link { color: var(--navy); }
.arc .moments-d .kicker { color: var(--bronze); }

/* Membership and giving: one editorial band, not two cards */
.arc .belong-d { background: var(--stone); }
.arc .belong-d .grid { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.arc .belong-d .leaf, .arc .belong-d .leaf--paper, .arc .belong-d .leaf--night:not(.camp-leaf) { background: transparent; box-shadow: none; border-radius: 0; padding: 56px 56px 50px; min-height: 0; color: var(--navy); }
.arc .belong-d .leaf + .leaf { border-left: 1px solid var(--line); }
.arc .belong-d .leaf--paper::after, .arc .belong-d .ring { display: none; }
.arc .belong-d .leaf--night h3 { color: var(--navy); }
.arc .belong-d .leaf--night p { color: var(--ink-2); }
.arc .belong-d .leaf--night .kicker { color: var(--bronze) !important; }
.arc .belong-d .leaf--night .btn--light { background: var(--navy); color: var(--ivory); }
.arc .belong-d .leaf--night .link { color: var(--navy) !important; }

/* Future vision: daylight instead of night */
.arc .vision { color: var(--navy); background: radial-gradient(50% 60% at 50% 0%, rgba(201,223,216,.5), rgba(201,223,216,0) 70%), var(--stone); }
.arc .vision h2 { color: var(--navy); }
.arc .vision .muted { color: var(--ink-2); }
.arc .vision .cap { color: var(--ink-3); }
.arc .vision .kicker { color: var(--bronze); }
.arc .vision .btn--light { background: var(--navy); color: var(--ivory); }

/* Footer: pale sand, navy type; the oak band stays as the material accent */
.arc .site-footer { background: linear-gradient(180deg, #F1EADF, #EDE4D6); color: var(--ink-2); }
.arc .site-footer .close { color: var(--navy); }
.arc .site-footer .cols { border-top-color: var(--line); }
.arc .site-footer .fh { color: var(--bronze); }
.arc .site-footer a { color: var(--ink-2); }
.arc .site-footer a:hover { color: var(--navy); }
.arc .site-footer .fine { color: var(--ink-3); }

/* ---------- Families: same light language ---------- */
.arc .opener { margin-top: calc(-1 * var(--header-tall)); padding-top: 176px; }
.arc .board { color: var(--navy); background: radial-gradient(50% 60% at 100% 0%, rgba(201,223,216,.5), rgba(201,223,216,0) 70%), var(--stone); }
.arc .board::before, .arc .board::after { display: none; }
.arc .board h2, .arc .board caption, .arc .board td.t { color: var(--navy); }
.arc .board .muted, .arc .board td { color: var(--ink-2); }
.arc .board th { color: var(--bronze); }
.arc .board th, .arc .board td { border-top-color: var(--line); }
.arc .belong-d .camp-leaf { color: var(--navy); border-radius: 30px;
  background: radial-gradient(60% 90% at 90% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), linear-gradient(160deg, #E5F0EC, #D3E5DE);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 30px 60px -44px rgba(40,60,60,.45); }
.arc .belong-d .camp-leaf h3 { color: var(--navy); }
.arc .belong-d .camp-leaf p { color: var(--ink-2); }
.arc .belong-d .camp-leaf .kicker { color: var(--bronze) !important; }
.arc .belong-d .camp-leaf .link { color: var(--navy) !important; }
.arc .belong-d .camp-leaf .btn--light { background: var(--navy); color: var(--ivory); }
.arc .camp-facts li { border-top-color: var(--line); }
.arc .camp-facts b { color: var(--bronze); }
.arc .camp-facts span { color: var(--navy); }
.arc .spread { background: transparent; }

/* ---------- Refined media placeholders (replace with one <img> or <video> line) ---------- */
.arc .slot--light { background:
    radial-gradient(70% 60% at 28% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
    radial-gradient(80% 70% at 88% 100%, rgba(201,223,216,.55), rgba(201,223,216,0) 62%),
    linear-gradient(160deg, #F7F1E6 0%, #ECE2D0 100%); }
.arc .slot--light .glyph { position: absolute; left: 50%; top: 44%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; z-index: 1;
  background: rgba(255,255,255,.6) center / 24px no-repeat;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(126,95,54,.16), 0 8px 18px -10px rgba(40,28,14,.4); }
.arc .slot--photo .glyph { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E5F36' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M3.5 8h3.3l1.6-2.2h7.2L17.2 8h3.3v10.5h-17z'/%3E%3Ccircle cx='12' cy='13' r='3.3'/%3E%3C/svg%3E"); }
.arc .slot--video .glyph { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237E5F36' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M9.5 7.2v9.6l7.6-4.8z'/%3E%3C/svg%3E"); }
/* Composed, not empty: an arch drawn in a bronze hairline (The Arc's motif), the glyph, then the media name centred */
.arc .slot--light { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; padding: 28px; }
.arc .slot--light::before { opacity: .5; }
.arc .slot--light > .arch-line, .arc .slot--light { background-repeat: no-repeat; }
.arc .slot--light .glyph { position: relative; left: auto; top: auto; margin: 0; }
.arc .slot--light .slot-label { position: relative; z-index: 2; margin: 0; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  display: grid; gap: 6px; font: 600 11.5px/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze); }
.arc .slot--light .slot-label::before, .arc .slot--light .slot-label::after { display: none; }
.arc .slot--light .slot-label strong { font: 400 clamp(18px, 1.6vw, 22px)/1.2 var(--display); letter-spacing: 0; text-transform: none; color: var(--navy); }
.arc .slot--light::after { content: ""; position: absolute; inset: 14px; border-radius: 12px; pointer-events: none;
  border: 1px solid rgba(126,95,54,.22);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260' preserveAspectRatio='xMidYMid meet'%3E%3Cpath d='M30 250V110a70 70 0 0 1 140 0v140' fill='none' stroke='%237E5F36' stroke-opacity='.16' stroke-width='1'/%3E%3Cpath d='M44 250V112a56 56 0 0 1 112 0v138' fill='none' stroke='%237E5F36' stroke-opacity='.09' stroke-width='1'/%3E%3C/svg%3E") center 62% / auto 78% no-repeat; }
.arc .moments-d .rail > * { height: 340px; }
.arc .moments-d .rail > div { box-shadow: 0 26px 44px -30px rgba(var(--shadow-warm),.45); }
.arc .tile > .slot { position: absolute; inset: 0; }

/* ---------- Phone ---------- */
@media (max-width: 760px) {
  .arc .moments-d .rail > * { height: 280px; }
  :root { --header-tall: 76px; --header-short: 70px; }
  .arc .site-header .brand img { width: 138px; }
  .arc .site-header.is-scrolled:not(.over-hero) .brand img { width: 124px; }
  .arc .sheet-panel, .arc .sheet-panel.gd { top: calc(var(--header-tall) + 6px); max-height: calc(100dvh - var(--header-tall) - 16px - env(safe-area-inset-bottom)); }
  .arc .approach { --zoom: .16; --dx: 0px; height: calc(100svh + 80vh); }
  .arc .approach .stage { min-height: 560px; }
  .arc .approach .cam, .arc .approach .scene { transform-origin: 50% 70%; }
  .arc .approach .scene { object-position: 50% 100%; }
  .arc .approach .hero-copy { top: calc(var(--header-tall) + 64px); }
  .arc .approach h1 { font-size: 42px; margin: 14px 0 14px; }
  .arc .approach .lede { font-size: 16.5px; }
  .arc .approach .actions { margin-top: 20px; gap: 18px; }
  .arc .approach .render-note { right: auto; left: 16px; top: calc(var(--header-tall) + 14px); font-size: 11.5px; padding: 7px 12px; }
  .arc .shabbos-strip { margin-top: -20vh; }
  .arc .strip-glass .s-actions a { white-space: normal; }
  .arc .strip-glass { grid-template-columns: 1fr; gap: 16px; padding: 22px 20px 20px; border-radius: 24px; }
  .arc .strip-glass .s-title { grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; }
  .arc .strip-glass .s-candles, .arc .strip-glass .s-times { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .arc .strip-glass .s-actions { flex-wrap: wrap; gap: 14px 20px; }
  .arc .strip-glass .s-actions .btn { flex: 1 1 100%; }
  .arc .strip-glass .s-times { flex-wrap: wrap; gap: 14px 24px; }
  .arc .belong-d .leaf, .arc .belong-d .leaf--paper, .arc .belong-d .leaf--night:not(.camp-leaf) { padding: 40px 4px 36px; }
  .arc .belong-d .leaf + .leaf { border-left: 0; border-top: 1px solid var(--line); }
  .arc .opener { padding-top: 120px; }
}
@media (max-width: 760px) and (max-height: 700px) { .arc .approach .lede { display: none; } }

/* ---------- Reduced motion: a still, complete hero ---------- */
@media (prefers-reduced-motion: reduce) {
  .arc .approach { height: auto; }
  .arc .approach .stage { position: relative; height: min(100svh, 880px); }
  .arc .approach .cam, .arc .approach .hero-copy > *, body:has([data-approach]) .site-header .bar { animation: none; }
  .arc .approach .scene { transform: none; animation: none; scale: 1; }
  .arc .approach .hero-copy { opacity: 1; transform: none; }
  .arc .shabbos-strip { margin-top: -84px; }
}

/* Short laptop screens: keep the copy in the sky, clear of the building */
@media (min-width: 761px) and (max-height: 800px) {
  .arc .approach .hero-copy { top: calc(var(--header-tall) + 3vh); }
  .arc .approach h1 { font-size: clamp(42px, 4.6vw, 72px); margin: 14px 0 16px; }
  .arc .approach .lede { display: none; }
  .arc .approach .actions { margin-top: 4px; }
}

/* Stability: the glass grain uses normal blending, not soft-light. A blend-mode layer over a moving, scaled image
   forces re-compositing every frame and is a known source of flicker in Chrome and Safari. */
.arc .gd::after { mix-blend-mode: normal; opacity: .45; }

/* Smoothness: where the browser supports scroll-driven animations (Chrome, Edge, Safari 26+), the scroll zoom and the
   headline fade run as compositor animations tied to the page's scroll position: nothing is recalculated or redrawn
   per frame, so fast trackpad scrolling stays smooth and the image never drops out. arc.js steps aside in that case;
   older browsers keep the lightweight --p fallback above. The approach starts at the top of the page, so the scroll
   range 0 to 100vh (80vh on phones) is exactly the pinned approach. */
@supports (animation-timeline: scroll()) {
  .arc .approach .scene { transform: none;
    animation: e-push 16s cubic-bezier(.3,.2,.3,1) both, e-zoom linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0 100vh; }
  .arc .approach .hero-copy { opacity: 1; transform: none;
    animation: e-copy linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  @media (max-width: 760px) {
    .arc .approach .scene { animation: e-push 16s cubic-bezier(.3,.2,.3,1) both, e-zoom-m linear both; animation-timeline: auto, scroll(root block); animation-range: normal, 0 80vh; }
    .arc .approach .hero-copy { animation-range: 0 80vh; }
  }
}
@keyframes e-zoom { from { transform: scale(1); } to { transform: scale(1.2); } }
@keyframes e-zoom-m { from { transform: scale(1); } to { transform: scale(1.16); } }
@keyframes e-copy { 0%, 15% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translate3d(0, -48px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .arc .approach .scene, .arc .approach .hero-copy { animation: none !important; transform: none !important; opacity: 1 !important; scale: 1 !important; }
}