/* ══════════════════════════════════════════════════════════════════════════
   css/core-values.css — /core-values  (prefix fw-cv)

   Five values that spell TRUST, medicine first, and its own devices (about
   80% unique per page, compact, an app on a phone): a giant TRUST whose
   letters are cut from one photograph and tinted each value's colour; a
   letter spine (outlined letters, the chosen one filled) opening each value
   beside its photograph; patient rights on a prescription pad with a margin
   rule and ticks; the TRUST test, a checklist beside a gauge whose needle
   moves with every tick; three signers under seals; the questions as an
   accordion beside a care coordinator; and a close where the five letters
   are ticked off. No masthead band,
   orbit, stepper, globe, 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 value maps a family onto --ac-*); no boxed
   cards, structure from fade dividers, type and space; photographs are
   square-cornered with no shadow; icon discs, seals and pill buttons are
   objects and stay round; 28px / 14px gutters; compact rhythm.

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

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

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

.fw-cv-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 short two-colour rule marks every eyebrow on this page. */
.fw-cv-eyebrow::before{content:'';width:22px;height:3px;flex-shrink:0;border-radius:3px;background:linear-gradient(90deg, var(--pk) 50%, var(--bl) 50%)}
.fw-cv-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-cv-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-cv-head{display:grid;grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);column-gap:var(--gap);align-items:end;margin-bottom:clamp(14px, 2.6vh, 28px)}

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

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

/* ══════════════════════════════════════════════════════════════
   01 · §1 TRUST
   ══════════════════════════════════════════════════════════════ */

.fw-cv-hero{position:relative;overflow:hidden;padding:clamp(14px, 2.4vh, 28px) 0 var(--sec);background:linear-gradient(180deg, var(--wh), var(--paper-b))}
.fw-cv-hero__top{display:grid;grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);column-gap:var(--gap);align-items:end}
.fw-cv-crumb{margin-bottom:clamp(10px, 2vh, 20px)}
.fw-cv-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-cv-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-cv-statement{
	margin:clamp(10px, 1.8vh, 16px) 0 0;font-family:var(--ff);
	font-size:clamp(24px, 4.2vh, 46px);font-weight:500;line-height:1.14;letter-spacing:-.035em;color:var(--ink);text-wrap:balance
}
/* The word: five letters across the full width, each one cut from the
   same photograph (a slice each, so it reads as one picture) and tinted
   its value's colour. */
.fw-cv-word{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));margin:clamp(14px, 2.6vh, 28px) 0 0}
.fw-cv-letter{display:flex;flex-direction:column;align-items:center;gap:clamp(4px, .8vh, 10px);text-align:center}
.fw-cv-letter__l{
	--bx:0%;display:block;font-family:var(--ff);font-size:clamp(110px, 26vh, 300px);font-weight:800;line-height:.86;letter-spacing:-.04em;
	background:
		linear-gradient(150deg, color-mix(in srgb, var(--ac) 82%, transparent), color-mix(in srgb, var(--ac-dd) 70%, transparent)),
		url(../static/core-values/hero-1800.webp) var(--bx) 50% / 520% auto no-repeat;
	background-blend-mode:multiply, normal;
	-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
	transition:transform .5s var(--ease-pop)
}
.fw-cv-letter:nth-child(2) .fw-cv-letter__l{--bx:25%}
.fw-cv-letter:nth-child(3) .fw-cv-letter__l{--bx:50%}
.fw-cv-letter:nth-child(4) .fw-cv-letter__l{--bx:75%}
.fw-cv-letter:nth-child(5) .fw-cv-letter__l{--bx:100%}
.fw-cv-letter__n{position:relative;padding-top:8px;font-size:clamp(11px, 1.5vh, 13px);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ac-ink)}
.fw-cv-letter__n::before{content:'';position:absolute;top:0;left:50%;width:24px;height:3px;margin-left:-12px;border-radius:3px;background:var(--ac);transition:width .4s var(--ease), margin .4s var(--ease)}
.fw-cv-letter:hover .fw-cv-letter__l{transform:translateY(-6px)}
.fw-cv-letter:hover .fw-cv-letter__n::before{width:56px;margin-left:-28px}

/* ══════════════════════════════════════════════════════════════
   02 · §2 THE FIVE VALUES — a letter spine
   ══════════════════════════════════════════════════════════════ */

.fw-cv-vals{position:relative;padding:var(--sec) 0}
.fw-cv-vals__grid{display:grid;grid-template-columns:minmax(0, 2.4fr) minmax(0, 9.6fr);column-gap:var(--gap);align-items:stretch}
.fw-cv-spine{position:relative;display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:0 0 0 14px;list-style:none}
.fw-cv-spine::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--fade-y)}
.fw-cv-tab{
	position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:4px 0;border:0;background:none;cursor:pointer;text-align:left;
	font-family:var(--ff);color:var(--g6)
}
/* Unchosen letters are drawn in outline; the chosen one is filled. */
.fw-cv-tab__l{
	width:1.1em;font-size:clamp(36px, 6vh, 58px);font-weight:800;line-height:1;text-align:center;
	color:transparent;-webkit-text-stroke:1.5px var(--ac-ring);transition:color .35s, -webkit-text-stroke-color .35s
}
.fw-cv-tab__n{font-size:clamp(13px, 1.8vh, 15px);font-weight:600;letter-spacing:.02em;transition:color .3s}
.fw-cv-tab::before{content:'';position:absolute;left:-15px;top:18%;bottom:18%;width:3px;border-radius:3px;background:var(--ac);transform:scaleY(0);transition:transform .4s var(--ease)}
.fw-cv-tab:hover .fw-cv-tab__l{-webkit-text-stroke-color:var(--ac)}
.fw-cv-tab.is-on .fw-cv-tab__l{color:var(--ac);-webkit-text-stroke-color:var(--ac)}
.fw-cv-tab.is-on .fw-cv-tab__n{color:var(--ink)}
.fw-cv-tab.is-on::before{transform:none}

.fw-cv-pane[hidden]{display:none}
.fw-cv-pane{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);column-gap:clamp(20px, 2.6vw, 48px);align-items:center}
.fw-cv-pane__fig{position:relative;margin:0;height:clamp(250px, 39vh, 430px);overflow:hidden;background:var(--g1)}
.fw-cv-pane__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.fw-cv-pane__big{
	position:absolute;left:clamp(10px, 1.4vw, 22px);bottom:-.14em;font-family:var(--ff);font-size:clamp(120px, 22vh, 240px);font-weight:800;line-height:1;
	color:transparent;-webkit-text-stroke:2px color-mix(in srgb, var(--wh) 88%, transparent);pointer-events:none
}
.fw-cv-pane__k{display:flex;align-items:center;gap:10px;margin:0;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ac-ink)}
.fw-cv-pane__k > span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:15px;color:var(--ac-ink);background:var(--ac-l)}
.fw-cv-pane__t{margin:clamp(8px, 1.4vh, 12px) 0 0;font-family:var(--ff);font-size:clamp(26px, 4.4vh, 44px);font-weight:600;line-height:1.05;letter-spacing:-.035em;color:var(--ink)}
.fw-cv-pane__line{margin:clamp(6px, 1.2vh, 12px) 0 0;font-size:clamp(15px, 2.1vh, 18px);font-weight:400;line-height:1.5;color:var(--g7);text-wrap:pretty}
.fw-cv-pane__list{margin:clamp(10px, 1.8vh, 18px) 0 0;padding:0;list-style:none}
.fw-cv-pane__list li{position:relative;display:flex;align-items:flex-start;gap:10px;padding:clamp(6px, 1vh, 9px) 0;font-size:14.5px;line-height:1.5;color:var(--g7)}
.fw-cv-pane__list li + li::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-cv-pane__list .fw-ico{flex-shrink:0;width:19px;height:19px;margin-top:1px;color:var(--ac)}
.fw-cv-pane__hold{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:clamp(10px, 1.8vh, 18px) 0 0;font-size:clamp(15px, 2vh, 17px);font-weight:600;color:var(--ink)}
.fw-cv-pane__hold b{padding:4px 11px;border-radius:100px;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-ink);background:var(--ac-l)}

/* ══════════════════════════════════════════════════════════════
   03 · §3 YOUR RIGHTS — a prescription pad
   ══════════════════════════════════════════════════════════════ */

.fw-cv-rx{position:relative;padding:var(--sec) 0;background:linear-gradient(180deg, var(--wh), var(--paper-b))}
.fw-cv-rx__grid{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);column-gap:var(--gap);align-items:center}
.fw-cv-rx__mark{
	position:relative;display:block;margin-bottom:clamp(4px, 1vh, 10px);font-family:var(--ff);font-size:clamp(72px, 12vh, 128px);font-weight:300;line-height:.9;color:var(--bl)
}
.fw-cv-rx__mark i{position:relative;left:-.2em;font-family:var(--ff);top:.18em;font-size:.55em;font-style:normal;font-weight:400;color:var(--pk)}
.fw-cv-rx__aside .fw-cv-lead{margin-top:clamp(6px, 1.2vh, 12px)}
/* The pad: ruled lines and a double margin rule on the left. */
.fw-cv-rx__list{position:relative;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(18px, 2.4vw, 40px);margin:0;padding:0 0 0 22px;list-style:none}
.fw-cv-rx__list::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;border-left:1.5px solid var(--pk-ring);border-right:1.5px solid var(--pk-ring)}
.fw-cv-right{position:relative;display:grid;grid-template-columns:24px 34px minmax(0, 1fr) 22px;column-gap:12px;align-items:center;padding:clamp(10px, 1.7vh, 15px) 0}
.fw-cv-right::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fade-x)}
.fw-cv-right__n{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--g5);font-variant-numeric:tabular-nums}
.fw-cv-right__ico{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:16px;color:var(--bl-ink);background:var(--bl-l)}
.fw-cv-right__t{margin:0;font-size:clamp(14px, 1.9vh, 15.5px);font-weight:500;line-height:1.45;color:var(--ink);text-wrap:pretty}
.fw-cv-right__tick{width:22px;height:22px}
.fw-cv-right__tick path{fill:none;stroke:var(--mt-d);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ══════════════════════════════════════════════════════════════
   04 · §4 WHO SIGNS UP
   ══════════════════════════════════════════════════════════════ */

.fw-cv-sign{position:relative;padding:var(--sec) 0}
.fw-cv-sign__list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));margin:0;padding:0;list-style:none}
.fw-cv-signer{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:4px clamp(18px, 2.4vw, 40px)}
.fw-cv-signer:first-child{padding-left:0}
.fw-cv-signer:last-child{padding-right:0}
.fw-cv-signer + .fw-cv-signer::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--fade-y)}
/* A seal: the icon in a tinted disc inside a dashed ring. */
.fw-cv-seal{
	position:relative;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;font-size:26px;color:var(--ac-ink);background:var(--ac-l)
}
.fw-cv-seal::before{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px dashed var(--ac-ring)}
.fw-cv-signer__t{margin:clamp(12px, 2vh, 18px) 0 0;font-family:var(--ff);font-size:clamp(18px, 2.6vh, 22px);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.fw-cv-signer__p{margin:6px 0 0;font-size:14px;font-weight:300;line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-cv-signer__go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:clamp(10px, 1.6vh, 14px);font-size:14px;font-weight:600;color:var(--ac-ink)}
.fw-cv-signer__go i{font-size:12px;transition:transform .3s var(--ease)}
.fw-cv-signer__go:hover{color:var(--ac-dd)}
.fw-cv-signer__go:hover i{transform:translateX(4px)}

/* ══════════════════════════════════════════════════════════════
   04b · THE TRUST TEST — a checklist and a gauge
   ══════════════════════════════════════════════════════════════ */

.fw-cv-test{position:relative;padding:var(--sec) 0}
.fw-cv-test__grid{display:grid;grid-template-columns:minmax(0, 6.6fr) minmax(0, 5.4fr);column-gap:var(--gap);align-items:center}
.fw-cv-test__aside{display:flex;flex-direction:column;align-items:center;text-align:center}
.fw-cv-test__head .fw-cv-eyebrow{justify-content:center}
.fw-cv-test__head .fw-cv-lead{margin-top:clamp(6px, 1.2vh, 12px)}
.fw-cv-test__list{margin:0;padding:0;list-style:none}
.fw-cv-test__list li{position:relative}
.fw-cv-test__list li + li::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-cv-ask{display:grid;grid-template-columns:28px 34px minmax(0, 1fr);column-gap:14px;align-items:center;padding:clamp(7px, 1.2vh, 11px) 0;cursor:pointer}
.fw-cv-ask__in{position:absolute;opacity:0;width:1px;height:1px}
/* The tick box: a ring that fills with the value's colour when ticked. */
.fw-cv-ask__box{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--wh);box-shadow:inset 0 0 0 2px var(--ac);transition:background .3s, box-shadow .3s}
.fw-cv-ask__box svg{width:16px;height:16px}
.fw-cv-ask__box path{fill:none;stroke:var(--wh);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s var(--ease)}
.fw-cv-ask__in:checked + .fw-cv-ask__box{background:var(--ac);box-shadow:0 0 0 5px var(--ac-l)}
.fw-cv-ask__in:checked + .fw-cv-ask__box path{stroke-dashoffset:0}
.fw-cv-ask__in:focus-visible + .fw-cv-ask__box{outline:2px solid var(--bl);outline-offset:3px}
.fw-cv-ask__l{font-family:var(--ff);font-size:30px;font-weight:800;line-height:1;text-align:center;color:transparent;-webkit-text-stroke:1.5px var(--ac);transition:color .3s}
.fw-cv-ask__in:checked ~ .fw-cv-ask__l{color:var(--ac);-webkit-text-stroke-color:var(--ac)}
.fw-cv-ask__q b{display:block;font-size:clamp(14.5px, 2vh, 16.5px);font-weight:600;line-height:1.35;color:var(--ink)}
.fw-cv-ask__q small{display:block;margin-top:2px;font-size:13px;font-weight:300;line-height:1.45;color:var(--g6)}
.fw-cv-ask:hover .fw-cv-ask__box{box-shadow:inset 0 0 0 2px var(--ac)}

/* The gauge: five arcs, one per letter, lit when its question is ticked;
   the needle turns 36 degrees for every tick. */
.fw-cv-gauge{display:flex;flex-direction:column;align-items:center;margin:clamp(12px, 2.2vh, 22px) 0 0;text-align:center}
.fw-cv-gauge__dial{width:clamp(210px, min(24vw, 36vh), 330px);height:auto;overflow:visible}
.fw-cv-gauge__track{fill:none;stroke:var(--g2);stroke-width:18;stroke-linecap:round}
.fw-cv-gauge__seg{fill:none;stroke:var(--ac);stroke-width:18;stroke-linecap:butt;opacity:.16;transition:opacity .4s}
.fw-cv-gauge__seg.is-on{opacity:1}
.fw-cv-gauge__needle{transform-box:view-box;transform-origin:120px 120px;transform:rotate(-90deg);transition:transform .8s var(--ease-pop)}
.fw-cv-gauge__needle path{stroke:var(--ink);stroke-width:4;stroke-linecap:round}
.fw-cv-gauge__needle circle{fill:var(--ink);stroke:var(--wh);stroke-width:4}
.fw-cv-gauge[data-score="1"] .fw-cv-gauge__needle{transform:rotate(-54deg)}
.fw-cv-gauge[data-score="2"] .fw-cv-gauge__needle{transform:rotate(-18deg)}
.fw-cv-gauge[data-score="3"] .fw-cv-gauge__needle{transform:rotate(18deg)}
.fw-cv-gauge[data-score="4"] .fw-cv-gauge__needle{transform:rotate(54deg)}
.fw-cv-gauge[data-score="5"] .fw-cv-gauge__needle{transform:rotate(90deg)}
.fw-cv-gauge__cap{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:clamp(4px, 1vh, 10px)}
.fw-cv-gauge__n{font-family:var(--ff);font-size:clamp(26px, 4vh, 38px);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.fw-cv-gauge[data-score="5"] .fw-cv-gauge__n{color:var(--mt-ink)}
.fw-cv-gauge__v{min-height:1.5em;font-size:14.5px;line-height:1.45;color:var(--g6);text-wrap:balance}

/* ══════════════════════════════════════════════════════════════
   05 · §6 QUESTIONS — an accordion beside the coordinator
   ══════════════════════════════════════════════════════════════ */

.fw-cv-faq{position:relative;padding:var(--sec) 0;background:linear-gradient(180deg, var(--wh), var(--paper-b))}
.fw-cv-faq__grid{display:grid;grid-template-columns:minmax(0, 4.4fr) minmax(0, 7.6fr);column-gap:var(--gap);align-items:start}
/* The way to ask anything else: a coordinator's photograph and a button. */
.fw-cv-ask-us{display:grid;grid-template-columns:clamp(130px, 12vw, 200px) minmax(0, 1fr);column-gap:clamp(14px, 1.6vw, 24px);align-items:end;margin-top:clamp(16px, 3vh, 30px)}
.fw-cv-ask-us__fig{position:relative;margin:0;aspect-ratio:4 / 5;overflow:hidden;background:var(--g1)}
.fw-cv-ask-us__fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.fw-cv-ask-us__live{position:absolute;left:10px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--mt);box-shadow:0 0 0 3px var(--wh)}
.fw-cv-ask-us__t{margin:0;font-family:var(--ff);font-size:clamp(17px, 2.4vh, 21px);font-weight:600;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.fw-cv-ask-us__p{margin:6px 0 clamp(10px, 1.8vh, 16px);font-size:14px;font-weight:300;line-height:1.55;color:var(--g6)}
.fw-cv-q{position:relative;padding-left:18px}
.fw-cv-q::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:var(--fade-x)}
.fw-cv-q:last-child::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--fade-x)}
/* Each question takes a TRUST colour in turn; the open one is ruled in it. */
.fw-cv-q:nth-child(5n+1){--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l)}
.fw-cv-q:nth-child(5n+2){--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)}
.fw-cv-q:nth-child(5n+3){--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)}
.fw-cv-q:nth-child(5n+4){--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l)}
.fw-cv-q:nth-child(5n+5){--ac:var(--co);--ac-ink:var(--co-ink);--ac-l:var(--co-l)}
.fw-cv-q > summary::after{content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--ac);transform:scaleY(0);transition:transform .4s var(--ease)}
.fw-cv-q[open] > summary::after{transform:none}
.fw-cv-q summary{
	display:grid;grid-template-columns:34px minmax(0, 1fr) 30px;column-gap:12px;align-items:center;padding:clamp(9px, 1.5vh, 13px) 0;cursor:pointer;list-style:none;
	font-size:clamp(15px, 2.1vh, 17px);font-weight:600;line-height:1.35;letter-spacing:-.015em;color:var(--ink)
}
.fw-cv-q summary::-webkit-details-marker{display:none}
.fw-cv-q__n{font-family:var(--ff);font-size:20px;font-weight:800;color:transparent;-webkit-text-stroke:1.2px var(--ac);transition:color .3s}
.fw-cv-q[open] .fw-cv-q__n{color:var(--ac)}
.fw-cv-q summary:hover .fw-cv-q__t,
.fw-cv-q[open] .fw-cv-q__t{color:var(--ac-ink)}
.fw-cv-q__pm{position:relative;width:30px;height:30px;border-radius:50%;background:var(--ac-l);transition:background .3s, transform .4s var(--ease)}
.fw-cv-q__pm::before,
.fw-cv-q__pm::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ac-ink);transition:transform .35s var(--ease), background .3s}
.fw-cv-q__pm::after{transform:rotate(90deg)}
.fw-cv-q[open] .fw-cv-q__pm{background:var(--ac)}
.fw-cv-q[open] .fw-cv-q__pm::before,
.fw-cv-q[open] .fw-cv-q__pm::after{background:var(--wh)}
.fw-cv-q[open] .fw-cv-q__pm::after{transform:rotate(0)}
.fw-cv-q p{margin:0;padding:0 44px clamp(12px, 2vh, 17px) 46px;font-size:14.5px;line-height:1.65;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   06 · §6 THE CLOSE — five letters ticked off
   ══════════════════════════════════════════════════════════════ */

.fw-cv-close{position:relative;overflow:hidden;padding:clamp(30px, 5.4vh, 64px) 0;text-align:center;background:linear-gradient(180deg, var(--paper-b), var(--wh) 45%, var(--pk-wash))}
.fw-cv-close__in{display:flex;flex-direction:column;align-items:center}
.fw-cv-checks{display:flex;gap:clamp(12px, 2vw, 28px);margin:0;padding:0;list-style:none}
.fw-cv-checks li{position:relative;display:grid;place-items:center;width:clamp(48px, 7vh, 62px);height:clamp(48px, 7vh, 62px);border-radius:50%;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--ac-ring)}
.fw-cv-checks b{font-family:var(--ff);font-size:clamp(22px, 3.4vh, 30px);font-weight:800;line-height:1;color:var(--ac)}
.fw-cv-checks svg{position:absolute;right:-4px;bottom:-4px;width:22px;height:22px;padding:3px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 2px var(--wh)}
.fw-cv-checks path{fill:none;stroke:var(--wh);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fw-cv-close__h{margin:clamp(14px, 2.6vh, 26px) 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-cv-close__p{margin:8px 0 0;font-size:clamp(14.5px, 2vh, 17px);font-weight:300;color:var(--g6)}
.fw-cv-close__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-cv-page{--pad:14px;--sec:clamp(30px, 7vw, 48px)}
	.fw-cv-hero__top,
	.fw-cv-head,
	.fw-cv-rx__grid,
	.fw-cv-test__grid,
	.fw-cv-faq__grid{grid-template-columns:minmax(0, 1fr);row-gap:clamp(12px, 3vw, 20px)}
	.fw-cv-statement{font-size:clamp(24px, 5vw, 38px)}
	.fw-cv-h2{font-size:clamp(23px, 5vw, 32px)}
	.fw-cv-letter__l{font-size:clamp(90px, 18vw, 200px)}
	.fw-cv-close__h{font-size:clamp(26px, 6vw, 40px)}}

/* ── THE APP LAYER ──────────────────────────────────────────── */
@media(max-width:768px){
	.fw-cv-hero{padding-top:12px}
	/* TRUST fills the screen width; the value names stay for screen
	   readers and are drawn below as the tab bar instead. */
	.fw-cv-letter__l{font-size:25vw;background-image:linear-gradient(150deg, color-mix(in srgb, var(--ac) 82%, transparent), color-mix(in srgb, var(--ac-dd) 70%, transparent)), url(../static/core-values/hero-900.webp)}
	.fw-cv-letter__n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

	/* The spine becomes a tab bar: five letters with their names. */
	.fw-cv-vals__grid{grid-template-columns:minmax(0, 1fr);row-gap:14px}
	.fw-cv-spine{flex-direction:row;padding:0}
	.fw-cv-spine::before{top:auto;bottom:0;left:0;right:0;width:auto;height:1px;background:var(--fade-x)}
	.fw-cv-spine li{flex:1 1 0}
	.fw-cv-tab{flex-direction:column;gap:4px;padding:4px 0 10px;text-align:center}
	.fw-cv-tab__l{font-size:34px}
	.fw-cv-tab__n{font-size:10.5px;letter-spacing:0}
	.fw-cv-tab::before{left:20%;right:20%;top:auto;bottom:0;width:auto;height:3px;transform:scaleX(0)}
	.fw-cv-tab.is-on::before{transform:none}
	.fw-cv-pane{grid-template-columns:minmax(0, 1fr);row-gap:16px}
	.fw-cv-pane__fig{height:62vw;margin-inline:calc(var(--pad) * -1)}

	.fw-cv-rx__list{grid-template-columns:minmax(0, 1fr);padding-left:16px}
	.fw-cv-right{grid-template-columns:34px minmax(0, 1fr) 22px}
	.fw-cv-right__n{display:none}

	/* Signers: seal on the left, words on the right, one per row. */
	.fw-cv-sign__list{grid-template-columns:minmax(0, 1fr)}
	.fw-cv-signer,
	.fw-cv-signer:first-child,
	.fw-cv-signer:last-child{display:grid;grid-template-columns:62px minmax(0, 1fr);column-gap:16px;padding:16px 0 16px 7px}
	.fw-cv-signer + .fw-cv-signer::before{top:0;bottom:auto;right:0;width:auto;height:1px;background:var(--fade-x)}
	.fw-cv-seal{grid-row:1 / 4;margin-top:4px}
	.fw-cv-signer__t{margin-top:0}

	/* The TRUST test: heading and meter first like an app, then the list. */
	.fw-cv-test__aside{order:-1}
	.fw-cv-gauge__dial{width:64vw}
	.fw-cv-ask{grid-template-columns:28px 26px minmax(0, 1fr);column-gap:10px}
	.fw-cv-ask__l{font-size:24px}

	.fw-cv-faq__grid{row-gap:18px}
	.fw-cv-ask-us{grid-template-columns:34vw minmax(0, 1fr)}
	.fw-cv-q{padding-left:12px}
	.fw-cv-q summary{grid-template-columns:28px minmax(0, 1fr) 30px;column-gap:10px}
	.fw-cv-q p{padding:0 0 14px 38px}
	.fw-cv-checks{gap:10px}
	.fw-cv-close__act .fw-cv-btn{flex:1 1 100%}}

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

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

	.fw-cv-anim [data-cv-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .9s var(--ease-soft), transform 1s var(--ease-soft)}
	.fw-cv-anim [data-cv-reveal].is-in{opacity:1;transform:none}
	/* TRUST rises letter by letter. */
	.fw-cv-anim .fw-cv-letter{animation:fwCvRise 1s var(--ease-soft) both}
	.fw-cv-anim .fw-cv-letter:nth-child(2){animation-delay:.1s}
	.fw-cv-anim .fw-cv-letter:nth-child(3){animation-delay:.2s}
	.fw-cv-anim .fw-cv-letter:nth-child(4){animation-delay:.3s}
	.fw-cv-anim .fw-cv-letter:nth-child(5){animation-delay:.4s}
	.fw-cv-pane:not([hidden]){animation:fwCvIn .55s var(--ease-soft)}
	.fw-cv-pane:not([hidden]) .fw-cv-pane__big{animation:fwCvBig .9s var(--ease-soft)}
	/* Each right is ticked as the pad comes into view. */
	.fw-cv-anim .fw-cv-rx__list .fw-cv-right__tick path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s var(--ease)}
	.fw-cv-anim .fw-cv-rx__list.is-in .fw-cv-right__tick path{stroke-dashoffset:0}
	.fw-cv-right:nth-child(2) .fw-cv-right__tick path{transition-delay:.12s}
	.fw-cv-right:nth-child(3) .fw-cv-right__tick path{transition-delay:.24s}
	.fw-cv-right:nth-child(4) .fw-cv-right__tick path{transition-delay:.36s}
	.fw-cv-right:nth-child(5) .fw-cv-right__tick path{transition-delay:.48s}
	.fw-cv-right:nth-child(6) .fw-cv-right__tick path{transition-delay:.6s}
	.fw-cv-right:nth-child(7) .fw-cv-right__tick path{transition-delay:.72s}
	.fw-cv-right:nth-child(8) .fw-cv-right__tick path{transition-delay:.84s}
	.fw-cv-seal::before{animation:fwCvTurn 40s linear infinite}
	.fw-cv-q[open] p{animation:fwCvIn .45s var(--ease-soft)}
	.fw-cv-ask-us__live{animation:fwCvLive 2.4s ease-out infinite}
	/* The close: each letter's tick pops in turn. */
	.fw-cv-anim .fw-cv-close__in svg{transform:scale(0);transition:transform .5s var(--ease-pop)}
	.fw-cv-anim .fw-cv-close__in.is-in svg{transform:none}
	.fw-cv-checks li:nth-child(2) svg{transition-delay:.15s}
	.fw-cv-checks li:nth-child(3) svg{transition-delay:.3s}
	.fw-cv-checks li:nth-child(4) svg{transition-delay:.45s}
	.fw-cv-checks li:nth-child(5) svg{transition-delay:.6s}}

@keyframes fwCvDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-22px,0) scale(1.1)}}
@keyframes fwCvRise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes fwCvIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fwCvBig{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes fwCvTurn{to{transform:rotate(360deg)}}
@keyframes fwCvLive{0%{box-shadow:0 0 0 3px var(--wh), 0 0 0 3px var(--mt-ring)}70%,100%{box-shadow:0 0 0 3px var(--wh), 0 0 0 11px transparent}}

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

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

@media(hover:none){
	.fw-cv-btn:hover,
	.fw-cv-btn:hover i,
	.fw-cv-letter:hover .fw-cv-letter__l{transform:none}}

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