/* ══════════════════════════════════════════════════════════════════════════
   css/our-vision.css — /our-vision  (prefix fw-vs)

   Looking forward, and reading as medicine first (the owner on the first
   cut: "not feeling like a medical website"). Its own devices (about 80%
   unique per page, compact, an app on a phone): the statement beside a
   specialist consultation with a heartbeat drawn under it and three clinical
   commitments; five clinical shifts as a stepper beside a turning globe
   ringed by the network's flags; rows from a live number
   today to our goal; the clinical standards beside the embryology lab with a
   measuring scale; a patient's treatment day under a daylight bar; the live
   tools as an app grid; open questions; and a heartbeat running into the
   close. No masthead band, jump bar, accordion, panels, ledger or timeline.

   Clinical palette: blue and mint carry the medicine, pink stays the brand
   and the action; gold is gone. The eyebrow mark is a medical cross.

   House rules, all kept: bright grounds only, depth from blurred brand
   light; no max-width (line length is held by grid columns and type size);
   colour only from :root (each shift maps a family onto --ac-*); no boxed
   cards, structure from fade dividers, type and space; photographs are
   square-cornered with no shadow (29 Sep rule); icon discs and pill buttons
   are objects and stay round; 28px / 14px gutters; compact rhythm.

   Motion lives in § 9 and only runs once custom/js/our-vision.js has added
   .fw-vs-anim; prefers-reduced-motion turns all of it off.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   00 · TOKENS & PRIMITIVES
   ══════════════════════════════════════════════════════════════ */

.fw-vs-page{
	--pad:28px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);
	--fade-x:linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent);
	--fade-y:linear-gradient(180deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
	--sec:clamp(28px, 4.8vh, 58px);
	--gap:clamp(22px, 3.2vw, 64px);
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);
	--ease-pop:cubic-bezier(.34,1.56,.64,1);
	/* Page defaults for the accent pair; a shift or tool overrides them. */
	--ac:var(--pk);--ac-d:var(--pk-d);--ac-dd:var(--pk-dd);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-ring:var(--pk-ring);
	background:var(--wh);
	-webkit-text-size-adjust:100%
}

.fw-vs-ac--pk{--ac:var(--pk);--ac-d:var(--pk-d);--ac-dd:var(--pk-dd);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-ring:var(--pk-ring)}
.fw-vs-ac--bl{--ac:var(--bl);--ac-d:var(--bl-d);--ac-dd:var(--bl-dd);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l);--ac-ring:var(--bl-ring)}
.fw-vs-ac--mt{--ac:var(--mt);--ac-d:var(--mt-d);--ac-dd:var(--mt-dd);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l);--ac-ring:var(--mt-ring)}
.fw-vs-ac--pu{--ac:var(--pu);--ac-d:var(--pu-d);--ac-dd:var(--pu-dd);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l);--ac-ring:var(--pu-ring)}
.fw-vs-ac--go{--ac:var(--go);--ac-d:var(--go-d);--ac-dd:var(--go-dd);--ac-ink:var(--go-ink);--ac-l:var(--go-l);--ac-ring:var(--go-ring)}
.fw-vs-ac--co{--ac:var(--co);--ac-d:var(--co-d);--ac-dd:var(--co-dd);--ac-ink:var(--co-ink);--ac-l:var(--co-l);--ac-ring:var(--co-ring)}

.fw-vs{display:block;position:relative}
.fw-vs-page em{font-family:var(--ff)}
.fw-vs .fw-ico{stroke-width:1.6}
.fw-vs-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}
.fw-vs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.fw-vs-eyebrow{
	display:flex;align-items:center;gap:10px;margin:0;
	font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--bl-ink)
}
/* A small medical cross marks every eyebrow. */
.fw-vs-eyebrow::before{
	content:'';width:12px;height:12px;flex-shrink:0;
	background:linear-gradient(var(--pk), var(--pk)) center / 100% 4px no-repeat, linear-gradient(var(--pk), var(--pk)) center / 4px 100% no-repeat
}
.fw-vs-h2{
	margin:clamp(6px, 1.1vh, 12px) 0 0;font-family:var(--ff);
	font-size:clamp(23px, 3.8vh, 40px);font-weight:500;line-height:1.1;letter-spacing:-.034em;color:var(--ink);text-wrap:balance
}
.fw-vs-lead{margin:0;font-size:clamp(14px, 1.9vh, 16.5px);font-weight:300;line-height:1.62;color:var(--g6);text-wrap:pretty}

.fw-vs-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	min-height:clamp(44px, 5.6vh, 52px);padding:0 24px;border:0;border-radius:100px;cursor:pointer;
	font-family:var(--ff);font-size:14.5px;font-weight:600;white-space:nowrap;
	color:var(--wh);background:linear-gradient(100deg, var(--pk), var(--pk-d) 45%, var(--pk-dd));box-shadow:var(--pk-glow);
	transition:box-shadow .3s, transform .25s var(--ease)
}
.fw-vs-btn i{font-size:13px;transition:transform .3s var(--ease)}
.fw-vs-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)}
.fw-vs-btn:hover i{transform:translateX(3px)}
.fw-vs-btn--ghost{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)}
.fw-vs-btn--ghost:hover{color:var(--bl-ink);background:var(--bl-wash);box-shadow:inset 0 0 0 1px var(--bl-ring)}

.fw-vs-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fw-vs-fx i{position:absolute;display:block;aspect-ratio:1;border-radius:50%;width:clamp(300px, 34vw, 600px);filter:blur(110px);opacity:.1}
.fw-vs-fx i:first-child{top:-20%;left:-6%;background:var(--bl)}
.fw-vs-fx i:last-child{bottom:-30%;left:30%;background:var(--mt)}

.fw-vs img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)}
.fw-vs img.lazy-loaded,
.fw-vs img.lazy-error{opacity:1}

/* ══════════════════════════════════════════════════════════════
   01 · §1 THE STATEMENT — beside a specialist consultation
   ══════════════════════════════════════════════════════════════ */

.fw-vs-hero{position:relative;overflow:hidden;padding:clamp(14px, 2.4vh, 28px) 0 var(--sec);background:linear-gradient(180deg, var(--wh), var(--paper-b))}
.fw-vs-hero__grid{display:grid;grid-template-columns:minmax(0, 6.6fr) minmax(0, 5.4fr);column-gap:var(--gap);align-items:center}
.fw-vs-crumb{margin-bottom:clamp(10px, 2vh, 20px)}
.fw-vs-h1{
	display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--ff);
	font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--pk-ink)
}
.fw-vs-h1 > span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:17px;color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd))}
.fw-vs-statement{
	margin:clamp(10px, 1.8vh, 18px) 0 0;font-family:var(--ff);
	font-size:clamp(26px, 4.5vh, 50px);font-weight:500;line-height:1.13;letter-spacing:-.035em;color:var(--ink);text-wrap:balance
}
/* A heartbeat drawn under the statement: flat, one beat, flat. */
.fw-vs-pulse{display:block;width:100%;height:clamp(26px, 3.6vh, 38px);margin-top:clamp(8px, 1.4vh, 14px);overflow:visible}
.fw-vs-pulse path{fill:none;stroke:var(--pk);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.fw-vs-marks{display:flex;flex-wrap:wrap;gap:10px 22px;margin:clamp(10px, 1.8vh, 18px) 0 0;padding:0;list-style:none}
.fw-vs-mark{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--ink)}
.fw-vs-mark > span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:17px;color:var(--bl-ink);background:var(--bl-l)}
.fw-vs-mark:nth-child(2) > span{color:var(--mt-ink);background:var(--mt-l)}
.fw-vs-mark:nth-child(3) > span{color:var(--pk-ink);background:var(--pk-l)}
.fw-vs-hero__fig{position:relative;margin:0;height:clamp(260px, 46vh, 520px);overflow:hidden;background:var(--g1)}
.fw-vs-hero__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 30%}

/* ══════════════════════════════════════════════════════════════
   02 · §2 FIVE CLINICAL SHIFTS — a stepper beside the globe
   ══════════════════════════════════════════════════════════════ */

/* overflow-x:clip: the flag ring turns, and a turning square box is up to
   1.41 times its width at 45 degrees. On a 360px phone that box (not the
   circle you see) ran 24px past the screen (13 Oct 2026). */
.fw-vs-shifts{position:relative;padding:var(--sec) 0;overflow-x:clip}
.fw-vs-shifts__grid{display:grid;grid-template-columns:minmax(0, 6.4fr) minmax(0, 5.6fr);column-gap:var(--gap);align-items:center}

/* The stepper: five icon tabs on a dashed line that fills to the chosen one. */
.fw-vs-steps{--p:0;position:relative;display:flex;justify-content:space-between;margin:clamp(16px, 2.8vh, 28px) 0 0;padding:0;list-style:none}
.fw-vs-steps::before,
.fw-vs-steps::after{content:'';position:absolute;left:26px;top:50%;height:2px;margin-top:-1px}
.fw-vs-steps::before{right:26px;background:repeating-linear-gradient(90deg, var(--bl-ring) 0 6px, transparent 6px 12px)}
.fw-vs-steps::after{width:calc((100% - 52px) * var(--p));background:linear-gradient(90deg, var(--pk), var(--bl));transition:width .6s var(--ease)}
.fw-vs-steps[data-on="1"]{--p:.25}
.fw-vs-steps[data-on="2"]{--p:.5}
.fw-vs-steps[data-on="3"]{--p:.75}
.fw-vs-steps[data-on="4"]{--p:1}
.fw-vs-steps li{position:relative;z-index:1}
.fw-vs-node{
	display:grid;place-items:center;width:52px;height:52px;padding:0;border:0;border-radius:50%;cursor:pointer;
	font-size:22px;color:var(--ac-ink);background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--ac-ring);
	transition:transform .4s var(--ease-pop), background .3s, color .3s, box-shadow .3s
}
.fw-vs-node:hover{transform:scale(1.08)}
.fw-vs-node.is-on{color:var(--wh);background:linear-gradient(135deg, var(--ac), var(--ac-dd));box-shadow:0 0 0 6px var(--ac-l);transform:scale(1.1)}

.fw-vs-shifts__detail{position:relative;margin-top:clamp(16px, 2.8vh, 28px);min-height:clamp(120px, 16vh, 160px)}
.fw-vs-shift[hidden]{display:none}
.fw-vs-shift{padding-left:18px;border-left:3px solid var(--ac)}
.fw-vs-shift__n{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ac-ink)}
.fw-vs-shift__t{margin:6px 0 0;font-family:var(--ff);font-size:clamp(22px, 3.4vh, 34px);font-weight:600;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.fw-vs-shift__p{margin:8px 0 0;font-size:clamp(14.5px, 2vh, 17px);font-weight:300;line-height:1.6;color:var(--g6);text-wrap:pretty}

/* The globe: a dotted earth turning inside a sphere of light, ringed by
   the network's flags. --g is the whole stage; the earth is 68% of it. */
.fw-vs-globe{--g:clamp(250px, min(32vw, 44vh), 420px);display:grid;grid-template-rows:var(--g) auto;justify-items:center;margin:0 auto}
.fw-vs-globe__earth{
	grid-area:1 / 1;align-self:center;position:relative;width:calc(var(--g) * .68);aspect-ratio:1;border-radius:50%;overflow:hidden;
	background:radial-gradient(circle at 34% 30%, var(--wh), var(--bl-wash) 42%, var(--bl-l) 100%);
	box-shadow:inset 0 0 0 1px var(--bl-ring), inset -16px -20px 46px color-mix(in srgb, var(--bl) 18%, transparent)
}
/* The world-dots map, three map-widths long, slides left to right so the
   land turns eastward; at rest it faces South Asia. */
.fw-vs-globe__land{
	--mh:calc(var(--g) * .68 * .74);--mw:calc(var(--mh) * 2.687);
	position:absolute;left:0;top:10%;width:calc(var(--mw) * 3);height:var(--mh);
	background:linear-gradient(160deg, var(--bl), var(--mt-d));
	-webkit-mask:url(../static/global-presence/world-dots.svg) left top / var(--mw) 100% repeat-x;
	        mask:url(../static/global-presence/world-dots.svg) left top / var(--mw) 100% repeat-x;
	transform:translateX(calc(var(--mw) * -.467))
}
/* The sphere: the edge falls away into light and a highlight sits top left. */
.fw-vs-globe__earth::after{
	content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
	background:radial-gradient(circle at 50% 50%, transparent 52%, color-mix(in srgb, var(--paper-b) 88%, transparent) 100%),
	           radial-gradient(circle at 30% 24%, color-mix(in srgb, var(--wh) 70%, transparent), transparent 34%)
}
.fw-vs-globe__flags{grid-area:1 / 1;position:relative;width:var(--g);height:var(--g);margin:0;padding:0;list-style:none}
.fw-vs-globe__flags::before{content:'';position:absolute;inset:5%;border-radius:50%;border:1.5px dashed var(--bl-ring)}
/* Twelve slots round the ring by default; our-vision.js spaces the real
   count evenly by setting --a on each. */
.fw-vs-globe__flags li{--a:-90deg;position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translate(calc(var(--g) * .45)) rotate(calc(var(--a) * -1))}
.fw-vs-globe__flags li:nth-child(2){--a:-60deg}
.fw-vs-globe__flags li:nth-child(3){--a:-30deg}
.fw-vs-globe__flags li:nth-child(4){--a:0deg}
.fw-vs-globe__flags li:nth-child(5){--a:30deg}
.fw-vs-globe__flags li:nth-child(6){--a:60deg}
.fw-vs-globe__flags li:nth-child(7){--a:90deg}
.fw-vs-globe__flags li:nth-child(8){--a:120deg}
.fw-vs-globe__flags li:nth-child(9){--a:150deg}
.fw-vs-globe__flags li:nth-child(10){--a:180deg}
.fw-vs-globe__flags li:nth-child(11){--a:210deg}
.fw-vs-globe__flags li:nth-child(12){--a:240deg}
.fw-vs-flag{
	position:absolute;left:-19px;top:-19px;display:block;width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--wh);
	box-shadow:0 0 0 3px var(--wh), 0 0 0 4px var(--line);transition:box-shadow .3s
}
.fw-vs-flag img{display:block;width:100%;height:100%;object-fit:cover}
.fw-vs-flag:hover{box-shadow:0 0 0 3px var(--wh), 0 0 0 5px var(--pk)}
.fw-vs-globe__cap{grid-area:2 / 1;display:inline-flex;align-items:center;gap:9px;margin-top:clamp(4px, 1vh, 10px);font-size:13px;font-weight:600;color:var(--g7)}
.fw-vs-globe__cap i{width:8px;height:8px;border-radius:50%;background:var(--mt);box-shadow:0 0 0 4px var(--mt-l)}

/* ══════════════════════════════════════════════════════════════
   03 · §3 TODAY AND OUR GOAL
   ══════════════════════════════════════════════════════════════ */

.fw-vs-roads{position:relative;padding:var(--sec) 0;background:linear-gradient(180deg, var(--wh), var(--paper-b))}
.fw-vs-roads__head{display:grid;grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);column-gap:var(--gap);align-items:end;margin-bottom:clamp(12px, 2.2vh, 24px)}
.fw-vs-roads__cols,
.fw-vs-road{display:grid;grid-template-columns:44px minmax(0, 3.2fr) minmax(60px, 2.4fr) minmax(0, 4fr);column-gap:clamp(12px, 1.6vw, 24px);align-items:center}
.fw-vs-roads__cols{padding-bottom:6px;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--g5)}
.fw-vs-roads__cols span:first-child{grid-column:2}
.fw-vs-roads__cols span:last-child{grid-column:4;color:var(--bl-ink)}
.fw-vs-roads__list{margin:0;padding:0;list-style:none}
.fw-vs-road{position:relative;padding:clamp(8px, 1.4vh, 13px) 0}
.fw-vs-road::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-vs-road__ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:20px;color:var(--bl-ink);background:var(--bl-l)}
.fw-vs-road__now{display:flex;align-items:baseline;gap:10px;min-width:0}
.fw-vs-road__now b,
.fw-vs-road__now b.counter{
	font-size:clamp(24px, 3.8vh, 36px);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
	background:linear-gradient(120deg, var(--bl-d), var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent
}
.fw-vs-road__now small{font-size:13.5px;font-weight:500;color:var(--g6);line-height:1.3}
.fw-vs-road__way{position:relative;height:2px;background:repeating-linear-gradient(90deg, var(--bl-ring) 0 6px, transparent 6px 12px)}
.fw-vs-road__way i{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--pk);box-shadow:0 0 0 4px var(--pk-l)}
.fw-vs-road__way::after{content:'';position:absolute;right:-2px;top:50%;width:8px;height:8px;margin-top:-4px;border-top:2px solid var(--bl-ring);border-right:2px solid var(--bl-ring);transform:rotate(45deg)}
.fw-vs-road__next{display:flex;align-items:center;gap:12px;font-size:clamp(15px, 2.1vh, 17.5px);font-weight:600;line-height:1.35;color:var(--ink)}
/* The goal: a target, not a sun. */
.fw-vs-road__goal{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle, var(--mt-d) 0 26%, var(--wh) 28% 48%, var(--mt) 50% 64%, var(--mt-l) 66%)}

/* ══════════════════════════════════════════════════════════════
   04 · §4 CLINICAL STANDARDS — beside the lab
   ══════════════════════════════════════════════════════════════ */

.fw-vs-std{position:relative;padding:var(--sec) 0}
.fw-vs-std__grid{display:grid;grid-template-columns:minmax(0, 4.8fr) minmax(0, 7.2fr);column-gap:var(--gap);align-items:stretch}
.fw-vs-std__fig{position:relative;margin:0;min-height:clamp(240px, 40vh, 460px);overflow:hidden;background:var(--g1)}
.fw-vs-std__fig img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* A measuring scale along the foot of the photograph: fine ticks every
   8px, a taller one every 40px. */
.fw-vs-std__scale{
	position:absolute;left:0;right:0;bottom:0;height:18px;pointer-events:none;
	background:
		repeating-linear-gradient(90deg, var(--wh) 0 1px, transparent 1px 40px) left bottom / 100% 14px no-repeat,
		repeating-linear-gradient(90deg, var(--wh) 0 1px, transparent 1px 8px) left bottom / 100% 7px no-repeat;
	opacity:.85
}
.fw-vs-std__say{display:flex;flex-direction:column;justify-content:center}
.fw-vs-std__say .fw-vs-lead{margin-top:clamp(6px, 1.2vh, 12px)}
.fw-vs-std__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(18px, 2.4vw, 40px);margin:clamp(12px, 2.2vh, 24px) 0 0;padding:0;list-style:none}
.fw-vs-std__item{position:relative;display:grid;grid-template-columns:40px minmax(0, 1fr);column-gap:14px;padding:clamp(12px, 2vh, 18px) 0}
.fw-vs-std__item::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-vs-std__ico{grid-row:1 / 3;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:19px;color:var(--mt-ink);background:var(--mt-l)}
.fw-vs-std__item:nth-child(2) .fw-vs-std__ico{color:var(--bl-ink);background:var(--bl-l)}
.fw-vs-std__item:nth-child(3) .fw-vs-std__ico{color:var(--pu-ink);background:var(--pu-l)}
.fw-vs-std__item:nth-child(4) .fw-vs-std__ico{color:var(--pk-ink);background:var(--pk-l)}
.fw-vs-std__t{margin:0;font-family:var(--ff);font-size:clamp(15.5px, 2.1vh, 18px);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.fw-vs-std__p{margin:4px 0 0;font-size:13.5px;font-weight:300;line-height:1.55;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   05 · §5 A PATIENT'S DAY — four frames under a daylight bar
   ══════════════════════════════════════════════════════════════ */

.fw-vs-day{position:relative;padding:var(--sec) 0;background:linear-gradient(180deg, var(--wh), var(--paper-b) 60%, var(--wh))}
.fw-vs-day__head{display:grid;grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);column-gap:var(--gap);align-items:end;margin-bottom:clamp(12px, 2.2vh, 24px)}
.fw-vs-film{position:relative}
/* Morning to night, left to right. */
.fw-vs-film__light{
	position:absolute;left:0;right:0;top:8px;height:5px;border-radius:5px;
	background:linear-gradient(90deg, var(--mt-l2), var(--mt) 18%, var(--bl-l2) 42%, var(--bl) 58%, var(--pk) 78%, var(--pu-d))
}
.fw-vs-film__track{position:relative;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));column-gap:clamp(12px, 1.4vw, 22px);margin:0;padding:0;list-style:none}
.fw-vs-frame{display:flex;flex-direction:column;min-width:0}
.fw-vs-frame__time{display:flex;align-items:center;gap:8px;width:max-content;margin:0 0 clamp(8px, 1.4vh, 14px);padding-right:10px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink);background:var(--wh)}
.fw-vs-frame__dot{width:21px;height:21px;border-radius:50%;background:var(--wh);box-shadow:inset 0 0 0 5px var(--mt)}
.fw-vs-frame:nth-child(2) .fw-vs-frame__dot{box-shadow:inset 0 0 0 5px var(--bl)}
.fw-vs-frame:nth-child(3) .fw-vs-frame__dot{box-shadow:inset 0 0 0 5px var(--pk)}
.fw-vs-frame:nth-child(4) .fw-vs-frame__dot{box-shadow:inset 0 0 0 5px var(--pu-d)}
.fw-vs-frame__fig{position:relative;margin:0;aspect-ratio:16 / 9.4;overflow:hidden;background:var(--g1)}
.fw-vs-frame__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%;transition:transform 1.2s var(--ease-soft)}
.fw-vs-frame:hover .fw-vs-frame__fig img{transform:scale(1.05)}
.fw-vs-frame__ico{
	position:absolute;left:10px;bottom:10px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:17px;color:var(--bl-ink);
	background:color-mix(in srgb, var(--wh) 88%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.fw-vs-frame__t{margin:clamp(10px, 1.6vh, 14px) 0 0;font-family:var(--ff);font-size:clamp(16px, 2.3vh, 19px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fw-vs-frame__p{margin:5px 0 0;font-size:13.5px;font-weight:300;line-height:1.55;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   06 · §6 ALREADY HERE — an app grid
   ══════════════════════════════════════════════════════════════ */

.fw-vs-apps{position:relative;padding:var(--sec) 0}
.fw-vs-apps__grid{display:grid;grid-template-columns:minmax(0, 4.6fr) minmax(0, 7.4fr);column-gap:var(--gap);align-items:center}
.fw-vs-apps__say .fw-vs-lead{margin-top:clamp(8px, 1.4vh, 14px)}
.fw-vs-home{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(14px, 2.4vh, 24px) clamp(10px, 1.4vw, 22px);margin:0;padding:0;list-style:none}
.fw-vs-app{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;color:var(--ink)}
/* Calm clinical icons: a tinted disc with a coloured ring, never a glossy tile. */
.fw-vs-app__ico{
	display:grid;place-items:center;width:clamp(56px, 7.4vh, 68px);height:clamp(56px, 7.4vh, 68px);border-radius:50%;
	font-size:clamp(24px, 3.1vh, 29px);color:var(--ac-ink);background:var(--ac-l);box-shadow:inset 0 0 0 1.5px var(--ac-ring);
	transition:transform .4s var(--ease-pop), background .3s, color .3s
}
.fw-vs-app__t{font-size:13px;font-weight:600;line-height:1.3}
.fw-vs-app:hover{color:var(--ac-ink)}
.fw-vs-app:hover .fw-vs-app__ico{transform:translateY(-3px);color:var(--wh);background:linear-gradient(145deg, var(--ac), var(--ac-dd))}

/* ══════════════════════════════════════════════════════════════
   07 · §7 QUESTIONS — open
   ══════════════════════════════════════════════════════════════ */

.fw-vs-qa{position:relative;padding:var(--sec) 0;background:linear-gradient(180deg, var(--wh), var(--paper-b))}
.fw-vs-qa__head{margin-bottom:clamp(10px, 2vh, 22px)}
.fw-vs-qa__list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:var(--gap);margin:0}
.fw-vs-qa__item{position:relative;padding:clamp(12px, 2vh, 18px) 0}
.fw-vs-qa__item::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-vs-qa__item dt{display:flex;align-items:flex-start;gap:12px;font-size:clamp(15px, 2.1vh, 17.5px);font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--ink)}
.fw-vs-qa__q{display:grid;place-items:center;flex-shrink:0;width:26px;height:26px;margin-top:-1px;border-radius:50%;font-size:12px;font-weight:700;color:var(--bl-ink);background:var(--bl-l)}
.fw-vs-qa__item dd{margin:6px 0 0 38px;font-size:14px;line-height:1.62;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   08 · §8 THE CLOSE — a heartbeat into the invitation
   ══════════════════════════════════════════════════════════════ */

.fw-vs-rise{position:relative;overflow:hidden;padding:clamp(22px, 4vh, 48px) 0 clamp(30px, 5.4vh, 64px);text-align:center;background:linear-gradient(180deg, var(--paper-b), var(--wh) 45%, var(--pk-wash))}
.fw-vs-rise__beat{position:relative;height:clamp(44px, 7vh, 64px)}
.fw-vs-beat{display:block;width:100%;height:100%;overflow:visible}
.fw-vs-beat path{fill:none;stroke:var(--pk);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* The heart sits on the line just after the beat. */
.fw-vs-beat__heart{
	position:absolute;left:50%;top:56.6%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;
	font-size:20px;color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd));box-shadow:0 0 0 6px var(--pk-l)
}
.fw-vs-rise__in{display:flex;flex-direction:column;align-items:center}
.fw-vs-rise__h{margin:clamp(12px, 2.2vh, 22px) 0 0;font-family:var(--ff);font-size:clamp(27px, 4.6vh, 52px);font-weight:500;line-height:1.08;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.fw-vs-rise__p{margin:8px 0 0;font-size:clamp(14.5px, 2vh, 17px);font-weight:300;color:var(--g6)}
.fw-vs-rise__act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:clamp(14px, 2.6vh, 26px)}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1024px){
	.fw-vs-page{--pad:14px;--sec:clamp(30px, 7vw, 48px)}
	.fw-vs-statement{font-size:clamp(24px, 5vw, 38px)}
	.fw-vs-h2{font-size:clamp(23px, 5vw, 32px)}
	.fw-vs-shifts__grid,
	.fw-vs-roads__head,
	.fw-vs-day__head,
	.fw-vs-apps__grid,
	.fw-vs-std__grid{grid-template-columns:minmax(0, 1fr);row-gap:clamp(14px, 3vw, 22px)}
	.fw-vs-hero__grid{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
	.fw-vs-std__fig{min-height:0;aspect-ratio:16 / 8}
	.fw-vs-globe{--g:clamp(260px, 56vw, 400px)}
	.fw-vs-qa__list{grid-template-columns:minmax(0, 1fr)}
	.fw-vs-rise__h{font-size:clamp(26px, 6vw, 40px)}}

/* ── THE APP LAYER ──────────────────────────────────────────── */
@media(max-width:768px){
	/* The consultation photograph runs edge to edge under the statement. */
	.fw-vs-hero{padding-top:12px}
	.fw-vs-hero__grid{grid-template-columns:minmax(0, 1fr);row-gap:18px}
	.fw-vs-hero__fig{height:62vw;margin-inline:calc(var(--pad) * -1)}
	.fw-vs-marks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
	.fw-vs-marks::-webkit-scrollbar{display:none}
	.fw-vs-mark{flex-shrink:0;padding:5px 12px 5px 5px;border-radius:100px;font-size:12.5px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line)}
	.fw-vs-mark > span{width:26px;height:26px;font-size:13px}

	/* Shifts: the stepper as an app's tab bar, the words, then the globe. */
	.fw-vs-node{width:46px;height:46px;font-size:20px}
	.fw-vs-steps::before,
	.fw-vs-steps::after{left:23px}
	.fw-vs-steps::before{right:23px}
	.fw-vs-steps::after{width:calc((100% - 46px) * var(--p))}
	.fw-vs-shifts__detail{min-height:0}
	.fw-vs-globe{--g:80vw;margin-top:8px}
	.fw-vs-flag{left:-16px;top:-16px;width:32px;height:32px}

	/* Rows: today on one line, our goal under it with its target. */
	.fw-vs-roads__cols{display:none}
	.fw-vs-road{grid-template-columns:40px minmax(0, 1fr);grid-template-areas:'ico now' 'ico next';row-gap:6px;padding:12px 0}
	.fw-vs-road__ico{grid-area:ico;width:40px;height:40px;align-self:start}
	.fw-vs-road__now{grid-area:now}
	.fw-vs-road__way{display:none}
	.fw-vs-road__next{grid-area:next;font-size:14.5px;font-weight:500;color:var(--g7)}
	.fw-vs-road__goal{width:18px;height:18px}

	/* Standards: the lab edge to edge, then the four as a list. */
	.fw-vs-std__fig{order:2;aspect-ratio:16 / 10;margin-inline:calc(var(--pad) * -1)}
	.fw-vs-std__say{display:contents}
	.fw-vs-std__grid{row-gap:0}
	.fw-vs-std__say header{order:1;margin-bottom:16px}
	.fw-vs-std__list{order:3;grid-template-columns:minmax(0, 1fr);margin-top:4px}

	/* A day: a swipe strip, one moment per screen and a peek of the next. */
	.fw-vs-film__light{display:none}
	.fw-vs-film__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 4px;scroll-padding-inline:var(--pad)}
	.fw-vs-film__track::-webkit-scrollbar{display:none}
	.fw-vs-frame{flex:0 0 76vw;scroll-snap-align:start}
	.fw-vs-frame__fig{aspect-ratio:4 / 3.2}

	/* Already here: a phone's home screen. */
	.fw-vs-home{grid-template-columns:repeat(4, minmax(0, 1fr));gap:18px 8px}
	.fw-vs-app__ico{width:58px;height:58px;font-size:25px}
	.fw-vs-app__t{font-size:11.5px}

	.fw-vs-qa__item dd{margin-left:0}
	.fw-vs-beat__heart{width:38px;height:38px;margin:-19px 0 0 -19px;font-size:17px}
	.fw-vs-rise__act .fw-vs-btn{flex:1 1 100%}}

/* ══════════════════════════════════════════════════════════════
   09 · MOTION — only when it is welcome
   ══════════════════════════════════════════════════════════════ */

@media(prefers-reduced-motion:no-preference){
	.fw-vs-fx i:first-child{animation:fwVsDrift 32s ease-in-out infinite}
	.fw-vs-fx i:last-child{animation:fwVsDrift 38s ease-in-out infinite reverse}

	.fw-vs-anim [data-vs-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease-soft), transform 1s var(--ease-soft)}
	.fw-vs-anim [data-vs-reveal].is-in{opacity:1;transform:none}
	/* The heartbeat is traced under the statement, then pulses gently. */
	.fw-vs-anim .fw-vs-pulse path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:fwVsDraw 2s var(--ease-soft) .4s forwards}
	/* The earth turns eastward; the flag ring turns slowly the other way,
	   each flag counter-turned so it stays upright; a hover holds both. */
	.fw-vs-globe__land{animation:fwVsSpin 60s linear infinite}
	.fw-vs-globe__flags{animation:fwVsTurn 120s linear infinite}
	.fw-vs-flag{animation:fwVsTurn 120s linear infinite reverse}
	.fw-vs-globe:hover .fw-vs-globe__land,
	.fw-vs-globe:hover .fw-vs-globe__flags,
	.fw-vs-globe:hover .fw-vs-flag{animation-play-state:paused}
	.fw-vs-globe__cap i{animation:fwVsLive 2.4s ease-out infinite}
	/* A traveller walks every row, over and over. */
	.fw-vs-road__way i{animation:fwVsWalk 4.2s var(--ease) infinite}
	.fw-vs-road:nth-child(2) .fw-vs-road__way i{animation-delay:-1s}
	.fw-vs-road:nth-child(3) .fw-vs-road__way i{animation-delay:-2s}
	.fw-vs-road:nth-child(4) .fw-vs-road__way i{animation-delay:-3s}
	.fw-vs-anim .fw-vs-std__list[data-vs-reveal] .fw-vs-std__item{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-soft), transform .7s var(--ease-soft)}
	.fw-vs-anim .fw-vs-std__list[data-vs-reveal].is-in .fw-vs-std__item{opacity:1;transform:none}
	.fw-vs-std__item:nth-child(2){transition-delay:.12s}
	.fw-vs-std__item:nth-child(3){transition-delay:.24s}
	.fw-vs-std__item:nth-child(4){transition-delay:.36s}
	.fw-vs-anim .fw-vs-film[data-vs-reveal] .fw-vs-film__light{transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease-soft) .2s}
	.fw-vs-anim .fw-vs-film[data-vs-reveal].is-in .fw-vs-film__light{transform:none}
	.fw-vs-anim .fw-vs-film[data-vs-reveal] .fw-vs-frame{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-soft), transform .8s var(--ease-soft)}
	.fw-vs-anim .fw-vs-film[data-vs-reveal].is-in .fw-vs-frame{opacity:1;transform:none}
	.fw-vs-anim .fw-vs-film .fw-vs-frame:nth-child(2){transition-delay:.25s}
	.fw-vs-anim .fw-vs-film .fw-vs-frame:nth-child(3){transition-delay:.5s}
	.fw-vs-anim .fw-vs-film .fw-vs-frame:nth-child(4){transition-delay:.75s}
	.fw-vs-anim .fw-vs-home[data-vs-reveal] .fw-vs-app__ico{transform:scale(.4);opacity:0;transition:transform .6s var(--ease-pop), opacity .4s, background .3s, color .3s}
	.fw-vs-anim .fw-vs-home[data-vs-reveal].is-in .fw-vs-app__ico{transform:none;opacity:1}
	.fw-vs-home li:nth-child(2) .fw-vs-app__ico{transition-delay:.06s}
	.fw-vs-home li:nth-child(3) .fw-vs-app__ico{transition-delay:.12s}
	.fw-vs-home li:nth-child(4) .fw-vs-app__ico{transition-delay:.18s}
	.fw-vs-home li:nth-child(5) .fw-vs-app__ico{transition-delay:.24s}
	.fw-vs-home li:nth-child(6) .fw-vs-app__ico{transition-delay:.3s}
	.fw-vs-home li:nth-child(7) .fw-vs-app__ico{transition-delay:.36s}
	.fw-vs-home li:nth-child(8) .fw-vs-app__ico{transition-delay:.42s}
	/* The closing heartbeat runs across, and the heart beats. */
	.fw-vs-anim .fw-vs-rise__beat[data-vs-reveal]{transform:none}
	.fw-vs-anim .fw-vs-rise__beat path{stroke-dasharray:3000;stroke-dashoffset:3000}
	.fw-vs-anim .fw-vs-rise__beat.is-in path{animation:fwVsDraw 2.6s var(--ease-soft) .2s forwards}
	.fw-vs-rise__beat.is-in .fw-vs-beat__heart{animation:fwVsBeat 1.6s ease-in-out 1.6s infinite}
	.fw-vs-shift:not([hidden]){animation:fwVsIn .5s var(--ease-soft)}}

@keyframes fwVsDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-22px,0) scale(1.1)}}
@keyframes fwVsDraw{to{stroke-dashoffset:0}}
@keyframes fwVsTurn{to{transform:rotate(360deg)}}
@keyframes fwVsSpin{from{transform:translateX(calc(var(--mw) * -1.467))}to{transform:translateX(calc(var(--mw) * -.467))}}
@keyframes fwVsLive{0%{box-shadow:0 0 0 0 var(--mt-ring)}70%,100%{box-shadow:0 0 0 9px transparent}}
@keyframes fwVsWalk{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
@keyframes fwVsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fwVsBeat{0%,40%,100%{transform:scale(1)}15%{transform:scale(1.14)}28%{transform:scale(1.04)}}

@media(prefers-reduced-motion:reduce){
	.fw-vs-page *,
	.fw-vs-page *::before,
	.fw-vs-page *::after{
		animation-duration:.01ms!important;animation-iteration-count:1!important;
		transition-duration:.01ms!important;scroll-behavior:auto!important
	}
	.fw-vs img.lazy{opacity:1}
	.fw-vs-road__way i{left:0}}

/* ══════════════════════════════════════════════════════════════
   TOUCH · FOCUS
   ══════════════════════════════════════════════════════════════ */

@media(hover:none){
	.fw-vs-btn:hover,
	.fw-vs-btn:hover i,
	.fw-vs-app:hover .fw-vs-app__ico,
	.fw-vs-frame:hover .fw-vs-frame__fig img{transform:none}}

.fw-vs-page a:focus-visible,
.fw-vs-page button:focus-visible{outline:2px solid var(--bl);outline-offset:3px;border-radius:8px}
.fw-vs-node:focus-visible,
.fw-vs-flag:focus-visible{border-radius:50%}