/* sections.css: hero layout, manifesto pin + drift rows, #between copy positions, the craft sheet (tapes, sticky
   services deck, CSS visuals), the contact sheet and the footer wordmark details. SPEC §3.20 (+ §3.10 for the
   states sections.js toggles). No hex colours except the hero mood fallback (allowed by §3.6) and the old guide
   line's violet (SPEC-OWNER-2 O1 names those colours). Every directional
   value mirrors under [dir=rtl]. Only transform / opacity / clip-path animate. */

/* ================================================================================================ 1 HERO (§3.20) */
#top{min-height:100vh;min-height:100lvh;padding:calc(var(--header-h) + 3vh) var(--gutter) 3vh;
  display:grid;grid-template-rows:auto 1fr auto;gap:2.4vh;align-content:start}
.hero-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:14px;align-items:end}
.h-hero{--exit:var(--exit-far);grid-column:1 / 9;grid-row:1 / 3;font-size:var(--fs-hero);line-height:var(--lh-display);
  letter-spacing:var(--tr-display);font-weight:500}
.hero-intro .eyebrow{grid-column:9 / 13;grid-row:1;justify-self:end;text-align:end;align-self:end}
.hero-statement{grid-column:9 / 13;grid-row:2;justify-self:end;align-self:end;max-width:30ch;text-align:end;
  font-size:var(--fs-lead);line-height:1.35;letter-spacing:-.02em;font-weight:500;text-wrap:pretty}

/* The card is sized so H1 + card fit 100lvh: 100lvh − padding-top − H1 (2 lines) − 2 gaps − baseline − padding-bottom. */
.hero-card{position:relative;isolation:isolate;
  height:clamp(380px, calc(100lvh - var(--header-h) - 10.8vh - 2 * var(--lh-display) * var(--fs-hero) - 18px), 760px);
  border-radius:var(--r-card);overflow:hidden;touch-action:pan-y;transform-origin:50% 0;color:var(--dark-ink);
  background:var(--hero-bg,#03050f);
  background-image:radial-gradient(120% 85% at 50% 0%, rgba(255,255,255,.07), transparent 62%);
  transition:background-color 600ms var(--ease-in-out)}
.hero-card .view{position:absolute;inset:0}
.hero-card.is-gl{background:transparent}
html.no-webgl .hero-card,
html.webgl-paused .hero-card,
.hero-card:has(>[data-gl="failed"]){background:url(/assets/media/hero-poster.jpg) center/cover}
.hero-card[data-light]{color:var(--ink)}
.hero-card>p{position:absolute;z-index:1;margin:0;pointer-events:none;
  font:600 var(--fs-label)/1.3 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap}
:lang(he) .hero-card>p{font-family:var(--font-he);letter-spacing:.04em}
.hc-tag{top:24px;inset-inline-start:24px;display:flex;align-items:center;gap:10px}
.hc-tag .dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--hero-accent,currentColor);
  box-shadow:0 0 0 0 currentColor;animation:hc-live 1.6s var(--ease-out) infinite}
@keyframes hc-live{0%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.45}100%{transform:scale(1);opacity:1}}
.hc-index{bottom:24px;inset-inline-start:24px;display:flex;gap:14px}
.hc-n{opacity:.6;font-variant-numeric:tabular-nums}
/* .hc-coords is dir=ltr: place it with physical insets so it sits bottom-end on both pages */
.hc-coords{bottom:24px;right:24px;opacity:.6;font-variant-numeric:tabular-nums}
[dir=rtl] .hc-coords{right:auto;left:24px}
.mood-btn{position:absolute;z-index:2;bottom:12px;left:0;right:0;margin-inline:auto;width:max-content;
  display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:18px 16px;border-radius:var(--r-pill);
  background:rgba(8,10,22,.38);border:1px solid rgba(255,255,255,.16);color:inherit;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap;
  transition:background-color var(--d-xs) linear,border-color var(--d-xs) linear}
:lang(he) .mood-btn{font-family:var(--font-he);letter-spacing:.04em}
.mood-btn:hover{background:rgba(255,255,255,.16)}
.hero-card[data-light] .mood-btn{background:rgba(20,21,34,.06);border-color:rgba(20,21,34,.16)}
.hero-card[data-light] .mood-btn:hover{background:rgba(20,21,34,.12)}
.mood-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hero-accent,currentColor);transition:background-color var(--d-m) linear}
.hero-baseline{display:flex;align-items:center;justify-content:center;gap:10px;font:600 var(--fs-label)/1.4 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
:lang(he) .hero-baseline{font-family:var(--font-he);letter-spacing:.04em}
.hero-baseline .bob{display:inline-block;animation:bob 900ms var(--ease-in-out) infinite alternate}
@keyframes bob{to{transform:translate3d(0,4px,0)}}

@media (max-width:700px){
  #top{padding-top:calc(var(--header-h) + 2.4svh);gap:2svh}
  .hero-intro{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
  .hero-intro .eyebrow{order:-1;text-align:start;align-self:auto}
  .hero-statement{align-self:auto;max-width:34ch;text-align:start;font-size:16px;line-height:1.4}
  .hero-card{height:min(56svh, calc(100svh - var(--header-h) - 2.4svh - 2 * var(--lh-display) * var(--fs-hero) - 170px));min-height:340px}
  .hc-index{bottom:auto;top:46px}
  .hc-coords{display:none}
  .hc-tag{max-width:calc(100% - 48px);white-space:normal}
  .mood-btn{bottom:14px;-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.1)}
}

/* ================================================================================================ 2 MANIFESTO (§3.10.1) */
/* 160lvh = a 60lvh pin: every phase (scrub-in, highlighter, gate, lift) is a fraction of it, so it keeps its order */
.manifesto-track{position:relative;height:160vh;height:160lvh}
.manifesto-pin{position:sticky;top:0;height:100vh;height:100lvh;overflow:clip;transform-origin:50% 0;
  display:grid;grid-template-rows:auto 1fr auto;align-items:center;
  padding:calc(var(--header-h) + 4vh) var(--gutter) 7vh}
.manifesto-pin>:is(.topline,.manifesto,.about-foot){position:relative;z-index:1}
.manifesto{font-size:var(--fs-manifesto);line-height:var(--lh-display);letter-spacing:var(--tr-display);font-weight:500;max-width:14ch}
:lang(he) .manifesto{max-width:16ch}
/* kinetic.js splits it into .k-l > .k-li > (.m-base + .m-fill). The line box hugs its words so the fill sweeps the text,
   not the empty column after a short line. --f (0..1) per .k-l is written by sections.js. */
.manifesto .k-li{position:relative;width:fit-content}   /* kinetic adds nowrap once lines are measured ([data-kl]) */
.manifesto [data-m]{display:inline-block}
.manifesto .m-base{color:color-mix(in srgb,var(--fg) 21%,var(--bg))}
/* Outlines: Manrope's variable glyphs have overlapping contours, so a plain text-stroke draws their inner seams.
   paint-order:stroke fill + a page-coloured fill hides the inner half: a clean 1.5 px outline (stroke 3px / 2). */
.manifesto .m-base [data-m=seen]{color:var(--bg);-webkit-text-stroke:clamp(2px,.03em,3.2px) color-mix(in srgb,var(--fg) 21%,var(--bg));paint-order:stroke fill}
/* The sweep runs from −.15em to 100% + .15em of the line, so a full fill never crops "felt." while it beats. */
.manifesto .m-fill{position:absolute;inset:0;color:var(--fg);pointer-events:none;
  clip-path:inset(-.2em calc((1 - var(--f,0)) * (100% + .3em) - .15em) -.28em -.15em)}
[dir=rtl] .manifesto .m-fill{clip-path:inset(-.2em -.15em -.28em calc((1 - var(--f,0)) * (100% + .3em) - .15em))}
.manifesto .m-fill [data-m=seen]{color:var(--bg);-webkit-text-stroke:clamp(2px,.03em,3.2px) var(--fg);paint-order:stroke fill}
.manifesto .m-fill [data-m=felt]{color:var(--accent);transform-origin:50% 70%}
/* Before the split (no JS / kinetic missing) the sentence is plain ink with the same accents. */
.manifesto:not(:has(.k-l)) [data-m=felt]{color:var(--accent)}

/* Guide line (SPEC-OWNER-2 O1): the old live site's `world-guide` look (reference/current/motion.css, as it rendered):
   a 48 px non-scaling violet gradient stroke (#d9c8ff → #a679ff → #7c5cff, the old stops; an O1 exception to the
   palette) with a two-step violet glow, behind the text. sections.js builds the loop from the heading's position,
   draws / retracts it with the scroll and adds .is-on while any of it is drawn (a zero-length dash would still paint
   its round cap). It sits inside the clipped pin, so it never crosses into the next screen. */
.guide{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none;opacity:0;
  will-change:transform}                                  /* its own layer: re-dashing it never repaints the heading */
.guide.is-on{opacity:1}
[dir=rtl] .guide{transform:scaleX(-1)}
.guide path{fill:none;stroke-width:48px;stroke-opacity:.96;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;
  filter:drop-shadow(0 0 8px #b48aff) drop-shadow(0 0 24px rgb(156 109 255 / .72))}
.guide-tip{display:none}                                  /* the old line has no tip */
.squiggle{position:absolute;top:0;left:0;z-index:2;width:120px;height:auto;overflow:visible;pointer-events:none}
[dir=rtl] .squiggle path{transform:scaleX(-1);transform-box:fill-box;transform-origin:center}   /* draws right-to-left */
.about-foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px;max-width:42ch;align-self:end}
.about-copy{font-size:var(--fs-body);line-height:var(--lh-body);text-wrap:pretty}
/* The link follows the about copy (sides-soft from the end side) when the `about` gate opens. Uses the individual
   `translate` property so cursor.js's magnetic `transform` composes with it. Keyboard focus shows it at once (it is
   focusable before the gate opens; sections.js also opens the gate so the copy above it reveals). */
.about-foot .text-link{opacity:0;translate:8vw 0;transition:translate 320ms var(--ease-in),opacity 240ms linear}
[dir=rtl] .about-foot .text-link{translate:-8vw 0}
.about-foot.is-open .text-link,.about-foot:focus-within .text-link{opacity:1;translate:0 0;
  transition:translate calc(var(--d-l) * var(--tempo)) var(--ease-out) 260ms,opacity var(--d-fade) linear 260ms}
.about-foot:focus-within .text-link{transition-delay:0ms}

@media (max-width:700px){
  .manifesto-track{height:160vh;height:160lvh}
  .manifesto-pin{padding:calc(var(--header-h) + 3svh) var(--gutter) 6svh}
  .manifesto{font-size:clamp(40px,11vw,64px)}
  /* the old phone line: 25 px, a tighter glow */
  .guide path{stroke-width:25px;filter:drop-shadow(0 0 6px #b48aff) drop-shadow(0 0 16px rgb(156 109 255 / .72))}
  .guide.is-on{opacity:.96}
}

/* ---------------------------------------------------------------- drift rows (§3.7.7: type + motion in kinetic.css/js;
   the rows stay full-width blocks because kinetic.js centres its duplicated track inside each row) */
/* The band hugs its two rows with equal air above and below (no fixed min-height: on phones that left half a screen of
   empty band around 80px rows). Both rows always fit under the header at once (2 × .86 × 16vw < 100vh − header), so
   they pass the middle of the screen fully visible, then the next section (Work since O6) follows without a gap. */
.drift{position:relative;display:flex;flex-direction:column;justify-content:center;gap:1vh;
  padding-block:clamp(32px,6vh,72px);overflow-x:clip;pointer-events:none;user-select:none;-webkit-user-select:none}
.drift>.drift-row{flex:none}
@media (max-width:700px){.drift{padding-block:5svh}}

/* ================================================================================================ 4 #between copy (§3.20) */
#between .between-copy{position:absolute;z-index:1;bottom:12vh;inset-inline-start:var(--gutter);max-width:min(52rem,62vw);pointer-events:none}
#between .h-between{margin-top:16px;font-size:clamp(36px,5vw,88px);line-height:.95}
#between .morph-steps{position:absolute;z-index:1;bottom:max(4.5vh,24px);left:0;right:0;margin-inline:auto;width:max-content;
  display:flex;align-items:center;gap:12px;pointer-events:none;
  font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
:lang(he) #between .morph-steps{font-family:var(--font-he);letter-spacing:.04em}
/* morph.js toggles .is-active and may write --p (0..1) on each li to fill the rule before it */
#between .morph-steps li{position:relative;display:flex;align-items:center;gap:12px;opacity:.35;transition:opacity 300ms linear}
#between .morph-steps li.is-active,#between .morph-steps li[aria-current]{opacity:1}
#between .morph-steps li+li::before{content:"";flex:none;width:clamp(24px,4vw,56px);height:1px;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 0 / calc(var(--p,0) * 100%) 100%,color-mix(in srgb,currentColor 35%,transparent)}
[dir=rtl] #between .morph-steps li+li::before{background-position:100% 0,0 0}
#between .morph-hint{position:absolute;z-index:1;bottom:12vh;inset-inline-end:var(--gutter);max-width:min(34vw,420px);text-align:end;pointer-events:none}
#between .morph-hold{position:absolute;z-index:1;bottom:calc(12vh - 30px);inset-inline-end:var(--gutter);pointer-events:none;opacity:.7;
  font:600 var(--fs-label)/1.4 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
:lang(he) #between .morph-hold{font-family:var(--font-he);letter-spacing:.04em}
@media (max-width:700px),(hover:none){#between .morph-hold{display:none}}
@media (max-width:700px){
  #between .between-copy{bottom:13svh;max-width:none;inset-inline-end:var(--gutter)}
  #between .h-between{font-size:clamp(34px,9.6vw,52px)}
  #between .morph-hint{bottom:auto;top:calc(var(--header-h) + 3svh);inset-inline:var(--gutter) auto;text-align:start;max-width:min(80vw,360px)}
  #between .morph-steps{gap:8px} #between .morph-steps li{gap:8px}
  #between .morph-steps li+li::before{width:16px}
}

/* ================================================================================================ 7 CRAFT SHEET (§3.10.2–3) */
/* SPEC-OWNER-2 O6: the craft sheet now lies under the football stage (u 35); base.css's .sheet-lead spacer takes the
   underlap, so the tapes still sit 8vw below where the shutter leaves the sheet. */
#craft{padding-top:8vw}
/* ---------------------------------------------------------------- tapes (two crossed marquees on the sheet's top edge) */
.tapes{position:relative;z-index:2;pointer-events:none;padding-block:1vw 3vw}
.band{position:relative;width:110vw;margin-inline-start:-5vw;overflow:hidden;white-space:nowrap;font-weight:500;line-height:1;letter-spacing:-.03em}
/* kinetic.js runs the track LTR and gives each item the band's direction, so Hebrew reads correctly inside it */
.band .marquee-item{display:inline-flex;align-items:center;gap:.4em;padding-inline-end:.4em}
.tapes .band{font-size:clamp(28px,4.6vw,72px);padding:.35em 0;text-transform:uppercase}
:lang(he) .tapes .band{font-family:var(--font-he);font-weight:600;letter-spacing:0}
.band--a{background:var(--accent);color:var(--light);transform:rotate(-3deg);box-shadow:0 18px 40px -24px rgba(20,21,34,.5)}
.band--b{background:var(--ink);color:var(--lilac);transform:rotate(2deg);margin-top:-1.2em;z-index:-1}

/* ---------------------------------------------------------------- header (80vh with the tapes) */
.craft-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;row-gap:5vh;align-items:end;
  min-height:calc(80vh - 8vw - 10vw);padding:6vh var(--gutter) 10vh}
.craft-head .topline{grid-column:1 / -1;align-self:start}
.craft-head h2{grid-column:1 / 9;font-size:var(--fs-h3)}
/* muted, but ≥ 4.5:1 on the light sheet (--muted alone is 4.03:1 at body size, QA-1) */
.craft-copy{grid-column:9 / 13;justify-self:end;max-width:38ch;font-size:var(--fs-body);line-height:var(--lh-body);
  color:color-mix(in srgb,var(--ink) 66%,var(--light))}

/* ---------------------------------------------------------------- the deck: four sticky cards that stack with depth */
/* ≈ 55vh of scroll per card: 58vh cards, centred as a stack (offsets −33 … +33 px), each tucked up to 22 px under the
   next one — inside its bottom padding, so no content is ever covered while both are on screen. sections.js reads the
   resulting flow positions (offsetHeight + margins), so the timings follow these numbers. */
.svc-deck{position:relative;padding-inline:var(--gutter)}
.svc-card{--card-bg:var(--white);--card-fg:var(--ink);--card-accent:var(--accent);--card-line:rgba(20,21,34,.14);
  position:sticky;top:calc(21vh - 33px + var(--i,0) * 22px);height:58vh;margin-bottom:max(-3vh,-22px);
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:"num num num num num num num vis vis vis vis vis" "ttl ttl ttl ttl ttl ttl ttl vis vis vis vis vis"
                      "cpy cpy cpy cpy cpy cpy . vis vis vis vis vis" "chp chp chp chp chp chp chp vis vis vis vis vis";
  column-gap:2vw;row-gap:2vh;padding:clamp(24px,min(3vw,4.8vh),48px);border-radius:32px;overflow:hidden;
  background:var(--card-bg);color:var(--card-fg);transform-origin:50% 0;
  box-shadow:0 -1px 0 rgba(20,21,34,.04),0 40px 80px -48px rgba(20,21,34,.45)}
.svc-card:nth-child(2){--card-bg:var(--lilac)}
.svc-card:nth-child(3){--card-bg:var(--ink);--card-fg:var(--dark-ink);--card-accent:var(--accent-soft);--card-line:var(--line-dark)}
/* card 04: a deeper accent (accent 86 % + ink) so white body copy and 11 px chips pass 4.5:1 (4.9:1; plain accent is 3.9:1) */
.svc-card:nth-child(4){--card-bg:color-mix(in srgb,var(--accent) 86%,var(--ink));--card-fg:var(--white);--card-accent:var(--white);--card-line:rgba(255,255,255,.34)}
.svc-card:nth-child(4) .svc-copy{opacity:1}
/* The numeral and title also scale with the viewport height, so a 58vh card holds its content on short laptop screens. */
.svc-n{grid-area:num;align-self:start;display:flex;font-size:min(14vw,16vh);line-height:.8;font-weight:500;letter-spacing:-.04em;direction:ltr;
  color:transparent;-webkit-text-stroke:1px var(--card-accent);justify-self:start}
[dir=rtl] .svc-n{justify-self:start}
/* .is-revealed: sections.js sets it as soon as the card comes on screen (top past 90 % of the viewport) and clears it once
   the card is fully below the viewport again, so it replays. Digits roll, chips pop, the visual wipes up. */
.svc-n .sv-dg{display:block;clip-path:inset(-.1em -.12em -.04em -.12em)}
.svc-n .sv-dg>span{display:block;translate:0 108%}
.svc-card.is-revealed .svc-n .sv-dg>span{translate:0 0;transition:translate calc(var(--d-l) * var(--tempo)) var(--ease-out) calc(var(--j,0) * 70ms + 80ms)}
.svc-card h3{grid-area:ttl;align-self:end;font-size:clamp(32px,min(4.4vw,7.4vh),72px);line-height:.95;max-width:12ch}
.svc-copy{grid-area:cpy;max-width:38ch;font-size:var(--fs-body);line-height:var(--lh-body);opacity:.78}
.svc-card .chips{grid-area:chp;align-self:start;align-content:flex-start}
.svc-card .chips>span{border-color:var(--card-line);scale:.6;opacity:0}
:lang(he) .svc-card .chips>span{font-family:var(--font-he)}   /* Manrope has no Hebrew glyphs (QA-1) */
.svc-card.is-revealed .chips>span{scale:1;opacity:1;transition:scale var(--d-pop) var(--ease-back),opacity 300ms linear}
.svc-card.is-revealed .chips>span:nth-child(2){transition-delay:50ms}
.svc-card.is-revealed .chips>span:nth-child(3){transition-delay:100ms}
.svc-card.is-revealed .chips>span:nth-child(4){transition-delay:150ms}
.svc-card.is-revealed .chips>span:nth-child(5){transition-delay:200ms}
.svc-dim{position:absolute;inset:0;z-index:5;background:var(--dark);opacity:0;pointer-events:none}
/* the last card's hold: the contact sheet rises over the final 100lvh of it, so the fourth card reads for ≈ 20lvh first */
.svc-tail{height:120vh;height:120lvh}

/* ---------------------------------------------------------------- visuals (4:5, end side). Wipe up on reveal. */
.svc-visual{grid-area:vis;position:relative;justify-self:end;align-self:stretch;height:100%;max-width:100%;aspect-ratio:4 / 5;
  border-radius:20px;overflow:hidden;transform-origin:50% 50%;
  clip-path:inset(100% 0 0 0 round 20px)}
.svc-card.is-revealed .svc-visual{clip-path:inset(0 0 0 0 round 20px);transition:clip-path calc(var(--d-xl) * var(--tempo)) var(--ease-out)}
/* off-screen or covered cards pause their loops */
.svc-card:not(.is-live) .svc-visual *{animation-play-state:paused!important}

/* 1 · type specimen */
.svc-visual[data-visual=type]{background:var(--light);color:var(--ink)}
.sv-type{position:absolute;inset:0;padding:8%;display:grid;grid-template-rows:1fr auto auto}
.sv-aa{font:500 clamp(96px,12vw,220px)/.8 var(--font-latin);letter-spacing:-.06em;align-self:start}
.sv-he{font:600 clamp(64px,7.5vw,140px)/.9 var(--font-he);letter-spacing:-.02em;justify-self:end;color:var(--accent)}
.sv-swatches{display:flex;gap:10px;margin-top:6%}
.sv-swatches i{display:block;width:clamp(22px,2.2vw,34px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(20,21,34,.14);
  animation:sv-breathe 2.4s var(--ease-in-out) calc(var(--i) * -.6s) infinite alternate}
.sv-swatches i:nth-child(1){background:var(--light)}
.sv-swatches i:nth-child(2){background:var(--ink)}
.sv-swatches i:nth-child(3){background:var(--accent)}
.sv-swatches i:nth-child(4){background:var(--lilac)}
@keyframes sv-breathe{to{transform:scale(1.08)}}

/* 2 · website in a browser frame (bleeds off the end side) */
.svc-visual[data-visual=site]{background:color-mix(in srgb,var(--white) 55%,var(--lilac))}
.sv-browser{position:absolute;top:9%;bottom:9%;inset-inline-start:9%;inset-inline-end:-18%;display:flex;flex-direction:column;
  border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 30px 60px -30px rgba(20,21,34,.45)}
/* The chrome follows the page direction, so its dots and the start of the URL pill sit on the visible (start) side in
   both languages; only the URL itself is isolated LTR (dir=ltr on .sv-url). The browser bleeds off the end side. */
.sv-chrome{flex:none;display:flex;align-items:center;gap:6px;height:34px;padding-inline:12px;border-bottom:1px solid var(--line)}
.sv-chrome i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line)}
.sv-chrome i:first-child{background:var(--accent)}
.sv-url{margin-inline-start:10px;padding:5px 10px;border-radius:var(--r-pill);background:var(--light);color:var(--muted);
  font:600 11px/1 var(--font-latin);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;unicode-bidi:isolate}
.sv-shot{position:relative;flex:1;min-height:0;overflow:hidden}
.sv-shot img{width:100%;height:100%;object-fit:cover;object-position:0 0;transform-origin:0 0}
[dir=rtl] .sv-browser .sv-shot img{object-position:100% 0;transform-origin:100% 0}
.svc-visual[data-visual=site] .sv-shot img{animation:sv-kb-scale 12s var(--ease-in-out) infinite alternate}
@keyframes sv-kb-scale{from{transform:scale(1)}to{transform:scale(1.08)}}

/* 3 · 3D (the hero sculpture still) */
.svc-visual[data-visual=three]{background:var(--dark)}
.svc-visual[data-visual=three] .sv-shot{position:absolute;inset:0}
/* origin high + scale 1.2 keeps the screenshot's own mood-button label out of frame */
.svc-visual[data-visual=three] .sv-shot img{object-position:50% 50%;transform-origin:50% 30%;animation:sv-kb-pan 10s var(--ease-in-out) infinite alternate}
@keyframes sv-kb-pan{from{transform:scale(1.2) translate3d(-3%,0,0)}to{transform:scale(1.2) translate3d(3%,0,0)}}

/* 4 · motion ribbon on the accent card */
.svc-visual[data-visual=motion]{color:rgba(255,255,255,.9);
  background:radial-gradient(90% 70% at 70% 20%, rgba(255,255,255,.22), transparent 70%),color-mix(in srgb,var(--accent) 82%,var(--ink))}
.sv-ribbon{position:absolute;inset:0;width:100%;height:100%}
.sv-ribbon path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:sv-ribbon 3.2s var(--ease-in-out) infinite}
.sv-ribbon path+path{animation-delay:-.6s}
@keyframes sv-ribbon{0%{stroke-dashoffset:1}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}

@media (max-width:700px){
  #craft{padding-top:14vw}
  .tapes{padding-block:2vw 6vw}
  .craft-head{display:flex;flex-direction:column;align-items:flex-start;gap:3vh;min-height:0;padding:5vh var(--gutter) 7vh}
  .craft-copy{justify-self:auto}
  .svc-deck{padding-inline:12px}
  /* phones: the card hugs its content (≥ 60svh) under the header and tucks 16 px (inside its 22 px bottom padding)
     under the next one, ≈ 58–62vh of scroll per card */
  .svc-card{top:calc(var(--header-h) + 3svh + var(--i,0) * 14px);height:auto;min-height:60svh;margin-bottom:-16px;
    grid-template-columns:minmax(0,1fr) auto;grid-template-rows:26svh auto auto 1fr;
    grid-template-areas:"vis vis" "ttl num" "cpy cpy" "chp chp";row-gap:14px;column-gap:12px;padding:16px 16px 22px;border-radius:24px}
  .svc-visual{justify-self:stretch;align-self:stretch;aspect-ratio:auto;width:100%;height:26svh;border-radius:16px;
    clip-path:inset(100% 0 0 0 round 16px)}
  .svc-card.is-revealed .svc-visual{clip-path:inset(0 0 0 0 round 16px)}
  .svc-n{font-size:22vw;align-self:end;justify-self:end}
  .svc-card h3{font-size:clamp(28px,8.4vw,40px);max-width:none}
  .svc-copy{font-size:15px;line-height:1.45}
  .sv-type{padding:6%;grid-template-rows:1fr auto;grid-template-columns:1fr auto}
  .sv-aa{font-size:26vw}
  .sv-he{font-size:18vw;align-self:end}
  .sv-swatches{grid-column:1 / -1}
  .sv-browser{top:8%;bottom:-6%;inset-inline-start:7%;inset-inline-end:-24%}
}

/* ================================================================================================ 8 CONTACT SHEET (§3.10.4) */
#contact .stage{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"top chip" "head head" "idea links" "cta links" "tape tape";
  column-gap:4vw;row-gap:2vh;padding:calc(var(--header-h) + 3vh) var(--gutter) 0}
#contact .stage>:not(.sun){position:relative;z-index:1}
.sun{position:absolute;z-index:0;top:0;left:50%;width:90vmax;height:90vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--accent),transparent 62%);opacity:.55;
  transform:translate3d(-50%,55%,0);will-change:transform}
#contact .topline{grid-area:top;align-self:center}
.chip-available{grid-area:chip;justify-self:end;align-self:center;display:inline-flex;align-items:center;gap:10px;height:32px;padding-inline:14px;
  border:1px solid var(--line-dark);border-radius:var(--r-pill);
  font:600 var(--fs-label)/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap}
:lang(he) .chip-available{font-family:var(--font-he);letter-spacing:.04em}
.chip-available .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--accent-soft)}
.chip-available .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:dot-pulse 1.6s var(--ease-out) infinite}
@keyframes dot-pulse{from{transform:scale(1);opacity:.9}to{transform:scale(1.6);opacity:0}}
.contact-headline{grid-area:head;align-self:center;justify-self:start;display:block;width:fit-content;max-width:100%;color:inherit}
#contact-title{--scrub-dist:62vw;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
#contact-title .k-s{display:inline-block;transform-origin:50% 100%}   /* letter swell layer (sections.js) */
#contact .eyebrow{grid-area:idea;align-self:end;color:var(--muted-dark)}
.cta-row{grid-area:cta;display:flex;flex-wrap:wrap;gap:10px;align-self:start}
.cta-row .pill{height:52px;padding-inline:24px}
.cta-row .pill:not(.pill--primary){border-color:var(--line-dark)}
.cta-row .pill:not(.pill--primary):hover{background:var(--dark-ink);border-color:var(--dark-ink);color:var(--dark)}
/* The pop uses the individual scale / translate properties so cursor.js's magnetic transform composes with it. */
.cta-row>*{scale:.7;translate:0 24px;opacity:0;transition:scale 320ms var(--ease-in),translate 320ms var(--ease-in),opacity 240ms linear}
.cta-row.is-in>*,.cta-row:focus-within>*{scale:1;translate:0 0;opacity:1;
  transition:scale calc(var(--d-land) * var(--tempo)) var(--ease-back),translate calc(var(--d-land) * var(--tempo)) var(--ease-back),opacity 300ms linear}
.cta-row.is-in>:nth-child(2){transition-delay:90ms}
.cta-row.is-in>:nth-child(3){transition-delay:180ms}
/* keyboard focus never lands on a hidden button: the whole row shows at once (QA-1) */
.cta-row:focus-within>*{transition-delay:0ms!important}
/* copy-email: the label rolls up and "Copied ✓" rolls in */
[data-copy-email]{position:relative;overflow:hidden}
[data-copy-email] .mag-inner{transition:translate 480ms var(--ease-in-out)}
[data-copy-email] .copied-label{position:absolute;inset:0;display:grid;place-items:center;translate:0 170%;transition:translate 480ms var(--ease-in-out);pointer-events:none}
[data-copy-email].is-copied .mag-inner{translate:0 -170%}
[data-copy-email].is-copied .copied-label{translate:0 0}
.contact-links{grid-area:links;align-self:end;justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font:600 var(--fs-label)/1.2 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
.contact-links a{display:inline-flex;align-items:center;min-height:36px;transition:color var(--d-xs) linear}
/* touch: 44 px tap targets (SPEC §3.19); the type stays the same size */
html.mobile .contact-links a{min-height:44px}
@media (pointer:coarse){.contact-links a{min-height:44px}}
:lang(he) .contact-links a:not([dir=ltr]){font-family:var(--font-he);letter-spacing:.04em}
@media (hover:hover){.contact-links a:hover{color:var(--accent-soft)}}
.contact-links li:first-child a{font-size:var(--fs-lead);letter-spacing:-.02em;text-transform:none;font-weight:500}
.contact-tape{grid-area:tape;display:block;margin-top:2vh;margin-inline:calc(-1 * var(--gutter));color:inherit}
.band--outline{width:auto;margin:0;padding:.08em 0 .14em;font-size:clamp(48px,7vw,124px);text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.2px var(--dark-ink);transition:color 400ms linear}
.band--outline .star{background:var(--accent)}
.contact-tape:hover .band--outline,.contact-tape:focus-visible .band--outline{color:var(--dark-ink)}
:lang(he) .band--outline .marquee-item{font-family:var(--font-he),var(--font-latin)}

@media (max-width:700px){
  /* the headline row never shrinks below its text (minmax(auto,…)): on a short screen the tape at the bottom gives way,
     the copy never overlaps */
  #contact .stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(auto,1fr) auto auto auto auto;
    grid-template-areas:"top" "chip" "head" "idea" "cta" "links" "tape";row-gap:14px;padding-top:calc(var(--header-h) + 2svh)}
  .chip-available{justify-self:start}
  #contact-title{font-size:15vw}
  :lang(he) #contact-title{font-size:12.8vw}            /* widest HE line ≈ 6.97em */
  #contact .eyebrow{margin-top:4px}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .pill{width:100%;height:50px}
  .contact-links{justify-self:start;align-items:flex-start;flex-flow:row wrap;gap:0 18px}
  .contact-links li:first-child{flex-basis:100%}
  .band--outline{font-size:15vw}
}
/* short phones (375 × 667 and toolbars-out iPhones): drop the availability chip, cap the headline by the height and
   tighten the pills, so the headline, its eyebrow and the three CTAs all fit one screen without touching */
@media (max-width:700px) and (max-height:720px){
  #contact .stage{grid-template-rows:auto minmax(auto,1fr) auto auto auto auto;grid-template-areas:"top" "head" "idea" "cta" "links" "tape";
    row-gap:12px;padding-top:calc(var(--header-h) + 1.5svh)}
  .chip-available{display:none}
  #contact-title{font-size:min(15vw,7.6svh)}
  :lang(he) #contact-title{font-size:min(12.8vw,7svh)}
  .cta-row{gap:8px}
  .cta-row .pill{height:46px}
  .band--outline{font-size:12vw}
}

/* ================================================================================================ 9 FOOTER details (§3.10.5) */
/* base.css lays out .footer-top and the mark; sections.js measures the word and drops / kicks the letters. */
.footer-mark{position:relative}
.fm-l{flex:none;will-change:transform;-webkit-tap-highlight-color:transparent}
.fm-l:focus-visible{outline-offset:-.06em}
.footer-mark.is-pre .fm-l{opacity:0}
.clock time{display:inline-block;min-width:5ch}
@media (max-width:700px){.footer-top>.text-link{justify-self:start}}

/* ================================================================================================ reduced motion (§2.10) + no JS */
/* Without JS nothing toggles the reveal states, so everything rests in its final, readable state (QA-1 no-JS). */
:is(html.reduced,html.no-js) .manifesto-track{height:auto}
:is(html.reduced,html.no-js) .manifesto-pin{position:relative;height:auto;min-height:100vh;min-height:100lvh}
html.reduced .manifesto .m-fill{clip-path:none}
:is(html.reduced,html.no-js) .about-foot .text-link{opacity:1;translate:none}
/* reduced: the old line fully drawn and quiet (the old site's reduced opacity); no JS: no line */
html.reduced .guide{opacity:.32!important}
html.reduced .guide path{stroke-dashoffset:0!important}
html.no-js .guide{display:none}
html.reduced .svc-card{transform:none!important}
html.reduced .svc-dim{display:none}
:is(html.reduced,html.no-js) .svc-visual,:is(html.reduced,html.no-js) .svc-card .svc-visual{clip-path:none!important;transform:none!important}
html.reduced .svc-visual *{animation:none!important}
:is(html.reduced,html.no-js) .svc-n .sv-dg>span,:is(html.reduced,html.no-js) .svc-card .chips>span{translate:none;scale:none;opacity:1}
:is(html.reduced,html.no-js) .cta-row>*{scale:none;translate:none;opacity:1}
html.reduced .sun{transform:translate3d(-50%,8%,0)}
html.reduced :is(.hero-baseline .bob,.hc-tag .dot,.chip-available .dot::after){animation:none}
html.reduced .footer-mark.is-pre .fm-l{opacity:1}
/* reduced / no JS: contact is static (not pinned) — give the stage a viewport of room so the sun and headline breathe */
:is(html.reduced,html.no-js) #contact .stage{min-height:100vh;min-height:100lvh;padding-bottom:4vh}

/* integration: the static morph stage keeps a full screen (its children are absolute, so it would collapse to 0 px);
   mood pill hover readable over white objects */
:is(html.reduced,html.no-js) #between .stage{min-height:100vh;min-height:100lvh}
@media (hover:hover){.hero-card:not([data-light]) .mood-btn:hover{background:rgba(8,10,22,.5)}}