/* ══════════════════════════════════════════════════════════════════════════
   css/our-approach.css — /our-approach  (prefix fw-oa)

   How care works across the network, medicine first, with its own devices
   (about 80% unique per page, compact, an app on a phone): the statement
   over a consultation photograph with a contents list beside it; the tests
   as a rack of capped vials that fill; the treatments as a staircase,
   gentlest first; the price as an equation of named parts; the record as a
   hub with data flowing in and out; support as a photo mosaic; the
   questions in newspaper columns; and a compass for the close. No masthead
   band, orbit, stepper, globe, spine, story deck, ledger or timeline here.

   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 item maps a family onto --ac-*); no boxed
   cards, structure from fade dividers, type and space; photographs are
   square-cornered with no shadow; icon discs, chips, vials and pill buttons
   are objects and stay round; 28px / 14px gutters; compact rhythm.

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

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

.fw-oa-page{
	--pad:28px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--fade-x:linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent);
	--fade-y:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, 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);
	--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);
	background:var(--wh);
	-webkit-text-size-adjust:100%
}

.fw-oa-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-oa-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-oa-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-oa-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-oa-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-oa{display:block;position:relative}
.fw-oa-page em{font-family:var(--ff)}
.fw-oa .fw-ico{stroke-width:1.6}
.fw-oa-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}

/* Eyebrows carry the part number: "02  The gentlest step first". */
.fw-oa-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)
}
.fw-oa-eyebrow b{display:grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--wh);background:linear-gradient(135deg, var(--bl), var(--bl-dd))}
.fw-oa-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-oa-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-oa-head{display:grid;grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);column-gap:var(--gap);align-items:end;margin-bottom:clamp(16px, 3vh, 32px)}
.fw-oa-more{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--ac-ink)}
.fw-oa-more i{font-size:11px;transition:transform .3s var(--ease)}
.fw-oa-more:hover{color:var(--ac-dd)}
.fw-oa-more:hover i{transform:translateX(3px)}

.fw-oa-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-oa-btn i{font-size:13px;transition:transform .3s var(--ease)}
.fw-oa-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)}
.fw-oa-btn:hover i{transform:translateX(3px)}
.fw-oa-btn--ghost{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)}
.fw-oa-btn--ghost:hover{color:var(--bl-ink);background:var(--bl-wash);box-shadow:inset 0 0 0 1px var(--bl-ring)}

.fw-oa-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fw-oa-fx i{position:absolute;display:block;aspect-ratio:1;border-radius:50%;width:clamp(300px, 34vw, 600px);filter:blur(110px);opacity:.1}
.fw-oa-fx i:first-child{top:-24%;right:-6%;background:var(--bl);opacity:.16}
.fw-oa-fx i:last-child{bottom:-40%;left:-6%;background:var(--pk)}
/* Each section carries its own light: a family for the first disc, pink
   or blue for the second. The record's blue sits behind the hub (right). */
.fw-oa-fx--mt i:first-child{top:-30%;left:-8%;right:auto;background:var(--mt);opacity:.16}
.fw-oa-fx--mt i:last-child{bottom:-50%;right:-6%;left:auto;background:var(--bl)}
.fw-oa-fx--pk i:first-child{top:-20%;right:-8%;background:var(--pk);opacity:.12}
.fw-oa-fx--pk i:last-child{bottom:-40%;left:10%;background:var(--pu)}
.fw-oa-fx--pu i:first-child{top:-30%;left:20%;right:auto;background:var(--pu);opacity:.12}
.fw-oa-fx--pu i:last-child{bottom:-50%;right:10%;left:auto;background:var(--pk)}
.fw-oa-fx--bl i:first-child{top:10%;right:6%;width:clamp(320px, 40vw, 700px);background:var(--bl);opacity:.2}
.fw-oa-fx--bl i:last-child{bottom:-40%;left:-8%;background:var(--mt)}

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

/* ══════════════════════════════════════════════════════════════
   01 · §1 THE APPROACH
   ══════════════════════════════════════════════════════════════ */

/* The hero: the statement, live figures, actions and the parts as chips
   on the left; the photograph whole on the right, with brand light behind
   it and a glass badge on it. Held to about 55vh. */
.fw-oa-hero{
	position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0, 6.3fr) minmax(0, 5.7fr);align-items:center;
	padding:clamp(12px, 2vh, 24px) 0 clamp(24px, 4vh, 48px);
	background:linear-gradient(120deg, var(--wh), color-mix(in srgb, var(--bl) 8%, var(--wh)) 55%, color-mix(in srgb, var(--pk) 7%, var(--wh)))
}
.fw-oa-hero__pic{padding-left:0}
.fw-oa-crumb{margin-bottom:clamp(8px, 1.6vh, 16px)}
.fw-oa-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(--bl-ink)
}
.fw-oa-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(--bl), var(--bl-dd))}
.fw-oa-statement{
	margin:clamp(8px, 1.4vh, 14px) 0 0;font-family:var(--ff);
	font-size:clamp(24px, 4.1vh, 46px);font-weight:500;line-height:1.12;letter-spacing:-.035em;color:var(--ink);text-wrap:balance
}
/* The promise half of the line carries the brand gradient. */
.fw-oa-statement em{font-style:normal;background:linear-gradient(100deg, var(--pk-d), var(--pu) 55%, var(--bl));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* Live figures, divided by fade rules. */
.fw-oa-stats{display:flex;gap:clamp(18px, 2.4vw, 40px);margin:clamp(12px, 2vh, 20px) 0 0;padding:0;list-style:none}
.fw-oa-stats li{position:relative;display:flex;flex-direction:column}
.fw-oa-stats li + li::before{content:'';position:absolute;left:calc(clamp(18px, 2.4vw, 40px) / -2);top:4px;bottom:4px;width:1px;background:var(--fade-y)}
.fw-oa-stats b{font-family:var(--ff);font-size:clamp(24px, 3.8vh, 36px);font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--bl-ink)}
.fw-oa-stats li:nth-child(2) b{color:var(--pk-ink)}
.fw-oa-stats li:nth-child(3) b{color:var(--mt-ink)}
.fw-oa-stats span{margin-top:3px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g6)}
.fw-oa-hero__act{display:flex;flex-wrap:wrap;gap:10px 14px;margin-top:clamp(14px, 2.4vh, 24px)}
/* The parts as chips: each scrolls to its section. */
.fw-oa-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(12px, 2.2vh, 22px)}
.fw-oa-chips a{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 5px;border-radius:100px;font-size:12.5px;font-weight:600;color:var(--ink);background:color-mix(in srgb, var(--wh) 80%, transparent);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s, color .3s}
.fw-oa-chips a span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:13px;color:var(--bl-ink);background:var(--bl-l)}
.fw-oa-chips a:hover{color:var(--pk-ink);box-shadow:inset 0 0 0 1.5px var(--pk)}
.fw-oa-hero__fig{position:relative;margin:0;aspect-ratio:7 / 4;background:var(--g1)}
.fw-oa-hero__fig img{display:block;width:100%;height:100%;object-fit:contain}
/* Brand light behind the photograph, a glass badge on it. */
.fw-oa-hero__pic{position:relative}
.fw-oa-hero__pic::before{content:'';position:absolute;right:-6%;top:-18%;width:60%;aspect-ratio:1;border-radius:50%;background:var(--bl);filter:blur(90px);opacity:.28;pointer-events:none}
.fw-oa-badge{
	position:absolute;left:clamp(10px, 1.2vw, 18px);bottom:clamp(10px, 1.6vh, 18px);display:grid;grid-template-columns:34px auto;column-gap:10px;align-items:center;
	padding:8px 16px 8px 8px;border-radius:100px;background:color-mix(in srgb, var(--wh) 86%, transparent);backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%)
}
.fw-oa-badge span{grid-row:1 / 3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:17px;color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd))}
.fw-oa-badge b{font-size:13.5px;font-weight:700;color:var(--ink)}
.fw-oa-badge small{font-size:11.5px;color:var(--g6)}

/* ══════════════════════════════════════════════════════════════
   02 · §2 TESTS BEFORE TREATMENT — a rack of vials
   ══════════════════════════════════════════════════════════════ */

.fw-oa-tests{position:relative;overflow:hidden;padding:var(--sec) 0;background:linear-gradient(180deg, color-mix(in srgb, var(--mt) 7%, var(--wh)), var(--wh))}
.fw-oa-rack{--vh:clamp(84px, 13vh, 124px);position:relative;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));column-gap:clamp(14px, 2vw, 32px);margin:0;padding:0;list-style:none}
/* The rack: one rail across every vial, a little below their necks. */
.fw-oa-rack::before{content:'';position:absolute;left:0;right:0;top:calc(var(--vh) * .34);height:8px;border-radius:8px;background:linear-gradient(90deg, transparent, var(--g2) 6%, var(--g2) 94%, transparent)}
.fw-oa-vial{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.fw-oa-vial__glass{
	--fill:60%;position:relative;z-index:1;display:block;width:clamp(34px, 3vw, 44px);height:var(--vh);margin-top:12px;
	border:2px solid var(--g3);border-top:0;border-radius:0 0 22px 22px;background:color-mix(in srgb, var(--wh) 80%, transparent)
}
/* The cap, in the test's colour. */
.fw-oa-vial__glass::before{content:'';position:absolute;left:-6px;right:-6px;top:-12px;height:13px;border-radius:4px;background:linear-gradient(180deg, var(--ac), var(--ac-dd))}
.fw-oa-vial__glass i{position:absolute;left:2px;right:2px;bottom:2px;height:var(--fill);border-radius:0 0 18px 18px;background:linear-gradient(180deg, var(--ac-l), var(--ac))}
.fw-oa-vial:nth-child(2) .fw-oa-vial__glass{--fill:46%}
.fw-oa-vial:nth-child(3) .fw-oa-vial__glass{--fill:70%}
.fw-oa-vial:nth-child(4) .fw-oa-vial__glass{--fill:38%}
.fw-oa-vial:nth-child(5) .fw-oa-vial__glass{--fill:56%}
.fw-oa-vial__t{margin:clamp(12px, 2vh, 18px) 0 0;font-family:var(--ff);font-size:clamp(15.5px, 2.2vh, 18px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fw-oa-vial__p{margin:5px 0 0;font-size:13.5px;font-weight:300;line-height:1.55;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   03 · §3 THE GENTLEST STEP FIRST — a staircase
   ══════════════════════════════════════════════════════════════ */

.fw-oa-ladder{position:relative;overflow:hidden;padding:var(--sec) 0;background:linear-gradient(180deg, var(--wh), color-mix(in srgb, var(--pk) 6%, var(--wh)))}
.fw-oa-stairs{--rise:clamp(14px, 2.6vh, 28px);display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));align-items:end;margin:0;padding:0;list-style:none}
.fw-oa-step{--k:1;display:flex;flex-direction:column;min-width:0}
.fw-oa-step:nth-child(1){--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l)}
.fw-oa-step:nth-child(2){--k:2;--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)}
.fw-oa-step:nth-child(3){--k:3;--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)}
.fw-oa-step:nth-child(4){--k:4;--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l)}
.fw-oa-step:nth-child(5){--k:5;--ac:var(--co);--ac-ink:var(--co-ink);--ac-l:var(--co-l)}
.fw-oa-step__say{padding:0 clamp(10px, 1.2vw, 18px) clamp(10px, 1.6vh, 14px) 0}
.fw-oa-step__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font-size:19px;color:var(--ac-ink);background:var(--ac-l)}
.fw-oa-step__n{margin:10px 0 0;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ac-ink)}
.fw-oa-step__t{margin:3px 0 0;font-family:var(--ff);font-size:clamp(17px, 2.5vh, 21px);font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.fw-oa-step__p{margin:5px 0 0;font-size:13.5px;font-weight:300;line-height:1.5;color:var(--g6);text-wrap:pretty}
/* The tread: each step one rise higher, ruled in its colour. */
.fw-oa-step__block{display:block;height:calc(var(--rise) * var(--k));border-top:3px solid var(--ac);background:linear-gradient(180deg, color-mix(in srgb, var(--ac) 16%, transparent), transparent)}

/* ══════════════════════════════════════════════════════════════
   04 · §4 ONE WRITTEN PRICE — an equation
   ══════════════════════════════════════════════════════════════ */

.fw-oa-price{position:relative;overflow:hidden;padding:var(--sec) 0;background:linear-gradient(120deg, color-mix(in srgb, var(--pu) 7%, var(--wh)), var(--wh) 50%, color-mix(in srgb, var(--pk) 6%, var(--wh)))}
.fw-oa-sum{display:flex;align-items:flex-start;justify-content:space-between;margin:0;padding:0;list-style:none}
.fw-oa-sum li{display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-areas:'op ico' 'op t';column-gap:clamp(12px, 1.8vw, 28px);align-items:center}
/* The operators: + between the parts, = before the total. */
.fw-oa-sum li + li::before{content:'+';grid-area:op;align-self:start;margin-top:10px;font-family:var(--ff);font-size:clamp(26px, 3.6vh, 36px);font-weight:300;line-height:1;color:var(--g4)}
.fw-oa-sum .fw-oa-sum__total::before{content:'='}
.fw-oa-sum__ico{grid-area:ico;justify-self:center;display:grid;place-items:center;width:clamp(50px, 7vh, 62px);height:clamp(50px, 7vh, 62px);border-radius:50%;font-size:clamp(22px, 3vh, 27px);color:var(--ac-ink);background:var(--ac-l)}
.fw-oa-sum__part:nth-child(1){--ac-ink:var(--mt-ink);--ac-l:var(--mt-l)}
.fw-oa-sum__part:nth-child(2){--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)}
.fw-oa-sum__part:nth-child(3){--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)}
.fw-oa-sum__part:nth-child(4){--ac-ink:var(--co-ink);--ac-l:var(--co-l)}
.fw-oa-sum__part:nth-child(5){--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)}
.fw-oa-sum__t{grid-area:t;margin-top:10px;font-size:clamp(13.5px, 1.9vh, 15.5px);font-weight:600;line-height:1.3;text-align:center;color:var(--ink)}
.fw-oa-sum__total .fw-oa-sum__ico{width:clamp(62px, 8.6vh, 78px);height:clamp(62px, 8.6vh, 78px);margin-top:-8px;font-size:clamp(26px, 3.6vh, 32px);color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd));box-shadow:0 0 0 7px var(--pk-l)}
.fw-oa-sum__total .fw-oa-sum__t{font-family:var(--ff);font-size:clamp(16px, 2.3vh, 19px);font-weight:700;color:var(--pk-ink)}
.fw-oa-price__live{
	position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 16px;margin:clamp(20px, 3.6vh, 38px) 0 0;padding-top:clamp(14px, 2.4vh, 22px);
	font-size:clamp(14px, 1.9vh, 16px);color:var(--g7);text-align:center
}
.fw-oa-price__live::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-oa-price__live > i{width:9px;height:9px;border-radius:50%;background:var(--mt);box-shadow:0 0 0 4px var(--mt-l)}
.fw-oa-price__live b{font-weight:700;color:var(--ink)}
.fw-oa-price__live .fw-oa-more{--ac-ink:var(--pk-ink);--ac-dd:var(--pk-dd)}

/* ══════════════════════════════════════════════════════════════
   05 · §5 ONE RECORD — a hub
   ══════════════════════════════════════════════════════════════ */

.fw-oa-record{position:relative;overflow:hidden;padding:var(--sec) 0;background:linear-gradient(180deg, color-mix(in srgb, var(--bl) 8%, var(--wh)), color-mix(in srgb, var(--bl) 4%, var(--wh)))}
/* The photograph and the hub share one height; the photograph keeps its
   3:2 shape at that height, so it is never cropped. */
.fw-oa-record__grid{--rh:clamp(210px, 31vh, 330px);display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:var(--gap);align-items:center}
.fw-oa-record__fig{position:relative;margin:0;height:var(--rh);aspect-ratio:3 / 2;overflow:hidden;background:var(--g1)}
.fw-oa-record__fig img{display:block;width:100%;height:100%;object-fit:contain}
/* The hub: inputs on the left (31%), the record in the middle (its disc
   spans 44% to 56%, where the lines meet it), readers on the right. */
.fw-oa-hub{position:relative;display:grid;grid-template-columns:31fr 38fr 31fr;height:var(--rh)}
.fw-oa-hub__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fw-oa-hub__lines path{fill:none;stroke:var(--bl-ring);stroke-width:1.6;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.fw-oa-hub__lines .fw-oa-hub__out{stroke:var(--mt-ring)}
.fw-oa-hub__in,
.fw-oa-hub__to{position:relative;display:flex;flex-direction:column;justify-content:space-around;margin:0;padding:0;list-style:none}
.fw-oa-hub__in{align-items:flex-end}
.fw-oa-hub__to{grid-column:3;align-items:flex-start}
.fw-oa-hub__in li,
.fw-oa-hub__to li{display:inline-flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;border-radius:100px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)}
.fw-oa-hub__in li span,
.fw-oa-hub__to li span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:14px;color:var(--bl-ink);background:var(--bl-l)}
.fw-oa-hub__to li span{color:var(--mt-ink);background:var(--mt-l)}
.fw-oa-hub__core{grid-column:2;grid-row:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin:0}
/* The record's centre is the Fertility World mark on a white disc. */
.fw-oa-hub__core span{
	display:grid;place-items:center;width:31.6%;aspect-ratio:1;border-radius:50%;
	background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--bl-ring), 0 0 0 8px color-mix(in srgb, var(--bl) 14%, transparent)
}
.fw-oa-hub__core img{display:block;width:74%;height:auto}
.fw-oa-hub__core b{font-family:var(--ff);font-size:clamp(14px, 1.9vh, 16px);font-weight:700;color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   06 · §6 SUPPORT BEYOND THE CLINIC
   ══════════════════════════════════════════════════════════════ */

.fw-oa-support{position:relative;overflow:hidden;padding:var(--sec) 0}
/* The heading holds the first column; three whole photographs follow. */
.fw-oa-support__grid,
.fw-oa-net__grid{display:grid;grid-template-columns:minmax(0, 3.1fr) minmax(0, 8.9fr);column-gap:var(--gap);align-items:center}
.fw-oa-side .fw-oa-lead{margin-top:clamp(8px, 1.4vh, 14px)}
.fw-oa-mosaic{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));column-gap:clamp(14px, 1.8vw, 28px);align-items:start;margin:0;padding:0;list-style:none}
.fw-oa-tile__fig{position:relative;margin:0;aspect-ratio:3 / 2;overflow:hidden;background:var(--g1)}
.fw-oa-tile__fig img{display:block;width:100%;height:100%;object-fit:contain}
.fw-oa-tile__say{position:relative;display:grid;grid-template-columns:36px minmax(0, 1fr);column-gap:12px;margin-top:clamp(8px, 1.4vh, 14px)}
.fw-oa-tile__ico{grid-row:1 / 3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:17px;color:var(--pk-ink);background:var(--pk-l)}
.fw-oa-tile:nth-child(2) .fw-oa-tile__ico{color:var(--mt-ink);background:var(--mt-l)}
.fw-oa-tile:nth-child(3) .fw-oa-tile__ico{color:var(--bl-ink);background:var(--bl-l)}
.fw-oa-tile__t{margin:0;font-family:var(--ff);font-size:clamp(15.5px, 2.2vh, 18px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fw-oa-tile__p{margin:4px 0 0;font-size:13.5px;font-weight:300;line-height:1.5;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   06b · IN THE NETWORK — a live glimpse
   ══════════════════════════════════════════════════════════════ */

.fw-oa-net{position:relative;overflow:hidden;padding:var(--sec) 0;background:linear-gradient(180deg, color-mix(in srgb, var(--mt) 6%, var(--wh)), color-mix(in srgb, var(--bl) 6%, var(--wh)))}
.fw-oa-net__cols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);column-gap:clamp(18px, 2.4vw, 40px)}
.fw-oa-net__col{position:relative;display:flex;flex-direction:column;gap:clamp(10px, 1.6vh, 14px);min-width:0}
.fw-oa-net__col + .fw-oa-net__col::before{content:'';position:absolute;left:calc(clamp(18px, 2.4vw, 40px) / -2);top:0;bottom:0;width:1px;background:var(--fade-y)}
.fw-oa-net__k{display:flex;align-items:center;gap:9px;margin:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--bl-ink)}
.fw-oa-net__k span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;color:var(--wh);background:linear-gradient(135deg, var(--bl), var(--bl-dd))}
.fw-oa-net__col:nth-child(2) .fw-oa-net__k span{background:linear-gradient(135deg, var(--pk), var(--pk-dd))}
.fw-oa-net__col:nth-child(3) .fw-oa-net__k span{background:linear-gradient(135deg, var(--mt), var(--mt-dd))}
.fw-oa-net__col:nth-child(4) .fw-oa-net__k span{background:linear-gradient(135deg, var(--pu), var(--pu-dd))}
.fw-oa-net .fw-oa-more{--ac-ink:var(--pk-ink);--ac-dd:var(--pk-dd);margin-top:auto}
/* Specialists: portraits two by two. */
.fw-oa-docs{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px 10px;margin:0;padding:0;list-style:none}
.fw-oa-docs a{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;color:var(--ink)}
.fw-oa-docs img{width:clamp(54px, 7.6vh, 70px);height:clamp(54px, 7.6vh, 70px);border-radius:50%;object-fit:cover;background:var(--g1);box-shadow:0 0 0 3px var(--wh), 0 0 0 4.5px var(--bl-ring);transition:box-shadow .3s}
.fw-oa-docs b{font-size:13px;font-weight:600;line-height:1.25}
.fw-oa-docs small{width:100%;overflow:hidden;font-size:11.5px;color:var(--g6);white-space:nowrap;text-overflow:ellipsis}
.fw-oa-docs a:hover img{box-shadow:0 0 0 3px var(--wh), 0 0 0 5px var(--pk)}
.fw-oa-docs a:hover b{color:var(--pk-ink)}
/* Clinics and reading: a small picture beside two lines. */
.fw-oa-rows{margin:0;padding:0;list-style:none}
.fw-oa-rows li{position:relative}
.fw-oa-rows li + li::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-oa-rows a{display:grid;grid-template-columns:clamp(64px, 5.6vw, 84px) minmax(0, 1fr);column-gap:12px;align-items:center;padding:8px 0;color:var(--ink)}
.fw-oa-rows img{width:100%;aspect-ratio:4 / 3;object-fit:cover;background:var(--g1)}
.fw-oa-rows b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:600;line-height:1.35}
.fw-oa-rows small{display:block;margin-top:2px;font-size:12px;color:var(--g6)}
.fw-oa-rows a:hover b{color:var(--pk-ink)}
/* Countries: the count and the flags. */
.fw-oa-net__big{margin:0;font-size:14px;font-weight:500;color:var(--g7)}
.fw-oa-net__big b{display:block;font-family:var(--ff);font-size:clamp(34px, 5.4vh, 52px);font-weight:700;line-height:1;letter-spacing:-.04em;background:linear-gradient(120deg, var(--mt-d), var(--bl));-webkit-background-clip:text;background-clip:text;color:transparent}
.fw-oa-flags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fw-oa-flags img{display:block;width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--wh), 0 0 0 3px var(--line);transition:transform .3s var(--ease-pop)}
.fw-oa-flags a:hover img{transform:scale(1.12)}

/* ══════════════════════════════════════════════════════════════
   07 · §8 QUESTIONS AND YOUR FIRST STEP
   ══════════════════════════════════════════════════════════════ */

.fw-oa-end{position:relative;overflow:hidden;padding:var(--sec) 0;background:linear-gradient(160deg, color-mix(in srgb, var(--bl) 6%, var(--wh)), var(--wh) 45%, color-mix(in srgb, var(--pk) 8%, var(--wh)))}
/* Three columns: the photograph whole at the section's height, the first
   step with its actions, then the questions. */
.fw-oa-end__grid{
	--eh:clamp(220px, 40vh, 400px);display:grid;grid-template-columns:auto minmax(0, 3.2fr) minmax(0, 5.8fr);
	grid-template-areas:'fig cta qa' 'fig act qa';column-gap:clamp(20px, 2.6vw, 44px);align-items:center
}
.fw-oa-end__step{display:contents}
.fw-oa-end__fig{grid-area:fig}
.fw-oa-end__cta{grid-area:cta;align-self:end}
.fw-oa-end__act{grid-area:act;align-self:start}
.fw-oa-end__qa{grid-area:qa}
/* The first step: the photograph whole, the compass and words beside each
   other under it, then the actions. */
.fw-oa-end__fig{position:relative;margin:0;height:var(--eh);aspect-ratio:3 / 2;overflow:hidden;background:var(--g1)}
.fw-oa-end__fig img{display:block;width:100%;height:100%;object-fit:contain}
.fw-oa-end__cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.fw-oa-compass{width:clamp(52px, 7vh, 66px);height:auto}
.fw-oa-compass__ring{fill:var(--wh);stroke:var(--bl-ring);stroke-width:2}
.fw-oa-compass__ticks{stroke:var(--bl);stroke-width:2.5;stroke-linecap:round}
.fw-oa-compass__needle{transform-box:view-box;transform-origin:60px 60px;transform:rotate(28deg)}
.fw-oa-compass__n{fill:var(--pk)}
.fw-oa-compass__s{fill:var(--g3)}
.fw-oa-compass__needle circle{fill:var(--ink)}
.fw-oa-end__h{margin:0;font-family:var(--ff);font-size:clamp(21px, 3.2vh, 30px);font-weight:600;line-height:1.15;letter-spacing:-.03em;color:var(--ink)}
.fw-oa-end__p{margin:3px 0 0;font-size:13.5px;font-weight:300;line-height:1.5;color:var(--g6)}
.fw-oa-end__act{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:clamp(12px, 2vh, 18px)}
/* The questions: one open at a time, the open one ruled in pink. */
.fw-oa-qs{margin-top:clamp(10px, 1.8vh, 18px)}
.fw-oa-q{position:relative;padding-left:16px}
.fw-oa-q::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-oa-q summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:clamp(8px, 1.4vh, 12px) 0;cursor:pointer;list-style:none;font-size:clamp(14.5px, 2vh, 16.5px);font-weight:600;line-height:1.35;color:var(--ink)}
.fw-oa-q summary::-webkit-details-marker{display:none}
.fw-oa-q summary::after{content:'';position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--pk);transform:scaleY(0);transition:transform .35s var(--ease)}
.fw-oa-q[open] summary::after{transform:none}
.fw-oa-q summary i{flex-shrink:0;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-size:12px;color:var(--bl-ink);background:var(--bl-l);transition:transform .35s var(--ease), background .3s, color .3s}
.fw-oa-q[open] summary i{transform:rotate(180deg);color:var(--wh);background:var(--pk)}
.fw-oa-q summary:hover .fw-oa-q__t,
.fw-oa-q[open] .fw-oa-q__t{color:var(--pk-ink)}
.fw-oa-q p{margin:0;padding:0 40px clamp(10px, 1.8vh, 14px) 0;font-size:14px;line-height:1.6;color:var(--g6);text-wrap:pretty}

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

@media(max-width:1024px){
	.fw-oa-page{--pad:14px;--sec:clamp(30px, 7vw, 48px)}
	.fw-oa-hero{grid-template-columns:minmax(0, 1fr)}
	.fw-oa-hero__pic{padding-left:var(--pad);margin-top:16px}
	.fw-oa-head,
	.fw-oa-support__grid,
	.fw-oa-net__grid,
	.fw-oa-end__grid,
	.fw-oa-record__grid{grid-template-columns:minmax(0, 1fr);row-gap:clamp(14px, 3vw, 22px)}
	.fw-oa-record__fig{height:auto;width:100%}
	.fw-oa-end__grid{grid-template-areas:'fig' 'cta' 'act' 'qa';align-items:start}
	.fw-oa-end__fig{height:auto;width:100%}
	.fw-oa-end__act{flex-direction:row;flex-wrap:wrap}
	.fw-oa-hub{height:clamp(250px, 44vw, 360px)}
	.fw-oa-net__cols{grid-auto-flow:row;grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:28px}
	.fw-oa-net__col:nth-child(odd)::before{display:none}
	.fw-oa-statement{font-size:clamp(24px, 5vw, 38px)}
	.fw-oa-h2{font-size:clamp(23px, 5vw, 32px)}
}

/* ── THE APP LAYER ──────────────────────────────────────────── */
@media(max-width:768px){
	.fw-oa-hero{padding-top:12px}
	.fw-oa-hero__pic{order:-1;margin:0 0 14px;padding:0}
	.fw-oa-hero__top{order:0}

	/* The rack scrolls sideways, a vial and a half per screen. */
	.fw-oa-rack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 6px;scroll-padding-inline:var(--pad)}
	.fw-oa-rack::-webkit-scrollbar{display:none}
	.fw-oa-rack::before{left:var(--pad);right:auto;width:calc(58vw * 5)}
	.fw-oa-vial{flex:0 0 58vw;scroll-snap-align:start}

	/* The stair turns upright: each step a row, its tread a bar that
	   lengthens as the steps climb. */
	.fw-oa-stairs{grid-template-columns:minmax(0, 1fr);row-gap:0}
	.fw-oa-step{display:grid;grid-template-columns:40px minmax(0, 1fr);column-gap:14px;padding:12px 0;border-top:1px solid var(--line)}
	.fw-oa-step__say{display:contents}
	.fw-oa-step__ico{grid-row:1 / 6}
	.fw-oa-step__n{margin-top:0}
	.fw-oa-step__block{grid-column:2;width:calc(var(--k) * 18%);height:5px;margin-top:10px;border:0;border-radius:5px;background:var(--ac)}

	/* The equation runs down like a bill. */
	.fw-oa-sum{flex-direction:column;align-items:stretch}
	.fw-oa-sum li{grid-template-columns:22px 48px minmax(0, 1fr);grid-template-areas:'op ico t';column-gap:10px;padding:6px 0}
	.fw-oa-sum li + li::before{align-self:center;margin-top:0;font-size:24px;text-align:center}
	.fw-oa-sum__ico,
	.fw-oa-sum__total .fw-oa-sum__ico{width:44px;height:44px;margin-top:0;font-size:20px;box-shadow:none}
	.fw-oa-sum__t{margin-top:0;text-align:left}
	.fw-oa-sum .fw-oa-sum__total{margin-top:6px;padding-top:12px;border-top:2px solid var(--ink)}

	/* The hub runs top to bottom: inputs, the record, the readers. */
	.fw-oa-hub{grid-template-columns:minmax(0, 1fr);height:auto;row-gap:14px}
	.fw-oa-hub__lines{display:none}
	.fw-oa-hub__in,
	.fw-oa-hub__to{grid-column:1;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px}
	.fw-oa-hub__core{grid-column:1;grid-row:auto;flex-direction:row}
	.fw-oa-hub__core span{width:56px;font-size:24px}
	.fw-oa-hub__core::before,
	.fw-oa-hub__core::after{content:'';position:absolute;left:50%;width:2px;height:12px;margin-left:-1px;background:var(--bl-ring)}
	.fw-oa-hub__core::before{top:-14px}
	.fw-oa-hub__core::after{bottom:-14px}

	/* Support: a swipe strip of whole photographs. */
	.fw-oa-mosaic{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-oa-mosaic::-webkit-scrollbar{display:none}
	.fw-oa-tile{flex:0 0 82vw;scroll-snap-align:start}
	.fw-oa-tile:nth-child(2){margin-top:0}
	.fw-oa-record__fig{margin-inline:calc(var(--pad) * -1)}

	/* The network: one column at a time, doctors in a row of four. */
	.fw-oa-net__cols{grid-template-columns:minmax(0, 1fr)}
	.fw-oa-net__col::before{display:none}
	.fw-oa-docs{grid-template-columns:repeat(4, minmax(0, 1fr))}
	.fw-oa-docs small{display:none}

	.fw-oa-hero__act .fw-oa-btn,
	.fw-oa-end__act .fw-oa-btn{flex:1 1 100%}
	.fw-oa-stats{justify-content:space-between}
	.fw-oa-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
	.fw-oa-chips::-webkit-scrollbar{display:none}
	.fw-oa-chips a{flex-shrink:0}
	.fw-oa-badge small{display:none}
	.fw-oa-end__fig{margin-inline:calc(var(--pad) * -1)}
	.fw-oa-q p{padding-right:0}}

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

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

	.fw-oa-anim [data-oa-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease-soft), transform 1s var(--ease-soft)}
	.fw-oa-anim [data-oa-reveal].is-in{opacity:1;transform:none}
	/* The vials fill, one after another. */
	.fw-oa-anim .fw-oa-rack .fw-oa-vial__glass i{height:0;transition:height 1.3s var(--ease-soft)}
	.fw-oa-anim .fw-oa-rack.is-in .fw-oa-vial__glass i{height:var(--fill)}
	.fw-oa-vial:nth-child(2) .fw-oa-vial__glass i{transition-delay:.15s}
	.fw-oa-vial:nth-child(3) .fw-oa-vial__glass i{transition-delay:.3s}
	.fw-oa-vial:nth-child(4) .fw-oa-vial__glass i{transition-delay:.45s}
	.fw-oa-vial:nth-child(5) .fw-oa-vial__glass i{transition-delay:.6s}
	/* The stair builds from the ground, step by step. */
	.fw-oa-anim .fw-oa-stairs .fw-oa-step__block{transform:scaleY(0);transform-origin:bottom;transition:transform .9s var(--ease-soft)}
	.fw-oa-anim .fw-oa-stairs.is-in .fw-oa-step__block{transform:none}
	.fw-oa-step:nth-child(2) .fw-oa-step__block{transition-delay:.12s}
	.fw-oa-step:nth-child(3) .fw-oa-step__block{transition-delay:.24s}
	.fw-oa-step:nth-child(4) .fw-oa-step__block{transition-delay:.36s}
	.fw-oa-step:nth-child(5) .fw-oa-step__block{transition-delay:.48s}
	/* Data flows along the hub's lines, in and then out. */
	.fw-oa-hub__lines path{animation:fwOaFlow 1.6s linear infinite}
	.fw-oa-hub__core span{animation:fwOaPulse 2.8s ease-out infinite}
	.fw-oa-price__live > i{animation:fwOaLive 2.4s ease-out infinite}
	/* The compass needle swings and settles. */
	.fw-oa-anim .fw-oa-end__step .fw-oa-compass__needle{transform:rotate(-70deg);transition:transform 2.2s var(--ease-pop) .4s}
	.fw-oa-anim .fw-oa-end__step.is-in .fw-oa-compass__needle{transform:rotate(28deg)}
	.fw-oa-q[open] p{animation:fwOaIn .45s var(--ease-soft)}}

@keyframes fwOaDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-22px,0) scale(1.1)}}
@keyframes fwOaFlow{to{stroke-dashoffset:-22}}
@keyframes fwOaIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fwOaPulse{0%{box-shadow:inset 0 0 0 1.5px var(--bl-ring), 0 0 0 8px color-mix(in srgb, var(--bl) 14%, transparent)}70%,100%{box-shadow:inset 0 0 0 1.5px var(--bl-ring), 0 0 0 20px transparent}}
@keyframes fwOaLive{0%{box-shadow:0 0 0 0 var(--mt-ring)}70%,100%{box-shadow:0 0 0 9px transparent}}

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

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

@media(hover:none){
	.fw-oa-btn:hover,
	.fw-oa-btn:hover i,
	.fw-oa-more:hover i{transform:none}}

.fw-oa-page a:focus-visible{outline:2px solid var(--bl);outline-offset:3px;border-radius:8px}