/* ══════════════════════════════════════════════════════════════════════════
   css/emotional-support.css — /emotional-support  (prefix fw-es)

   Emotional support through fertility treatment. Its heart is "How are you
   feeling right now?": five stages as a rail of 3D clay icons; the chosen
   stage shows what is normal to feel (soft chips), what helps (round check
   discs) and the support that may fit. Around it: the ways we support you
   (four up, photo with its kind badge), three small things with 3D icons,
   a band for partners with numbered tips beside a photograph, helplines
   beside a crisis line that is always shown, and the invitation with two
   photographs beside the questions.

   Softer than its Knowledge Base siblings: more lavender and peach, slower
   motion. House rules kept: bright grounds with soft brand light; no
   max-width; colour only from :root; structure from space and fade rules,
   no boxed cards; photographs whole and square-cornered, no shadow; icon
   discs, chips and buttons round; 28px / 14px gutters; type in vh,
   released at 1024px and below.
   ══════════════════════════════════════════════════════════════════════════ */

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

.fw-es-page{
	--pad:28px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--fade-x:linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
	--sec:clamp(34px, 6vh, 72px);
	--gap:clamp(24px, 4vw, 76px);
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);
	--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l);
	background:var(--wh);
	-webkit-text-size-adjust:100%
}
.fw-es-ac--pk{--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l)}
.fw-es-ac--bl{--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l)}
.fw-es-ac--mt{--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l)}
.fw-es-ac--pu{--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)}
.fw-es-ac--co{--ac:var(--co);--ac-ink:var(--co-ink);--ac-l:var(--co-l)}

.fw-es{display:block;position:relative}
.fw-es-page em{font-family:var(--ff);font-style:normal}
.fw-es .fw-ico{stroke-width:1.6}

.fw-es-sec{position:relative;padding:var(--sec) var(--pad)}
.fw-es-sec + .fw-es-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade-x)}

.fw-es-head{display:grid;gap:8px;margin-bottom:clamp(18px, 3vh, 30px)}
.fw-es-head--c{justify-items:center;text-align:center}
.fw-es-head--row{grid-template-columns:auto minmax(0, 1fr);align-items:end;column-gap:clamp(20px, 3vw, 48px)}
.fw-es-head--row .fw-es-sub{justify-self:end;text-align:right}
.fw-es-h2{margin:0;font-family:var(--ff);font-size:clamp(25px, 4vh, 40px);font-weight:700;line-height:1.12;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.fw-es-h3{margin:0;font-family:var(--ff);font-size:clamp(19px, 2.8vh, 24px);font-weight:700;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.fw-es-sub{margin:0;font-size:clamp(15px, 2vh, 17px);line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-es-kicker{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--pu-ink)}
.fw-es-kicker .fw-ico{width:18px;height:18px}

.fw-es-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:clamp(46px, 5.8vh, 54px);padding:0 26px;border:0;border-radius:100px;cursor:pointer;
	font-family:var(--ff);font-size:15px;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), background .25s
}
.fw-es-btn i{font-size:14px}
.fw-es-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)}
.fw-es-btn--ghost{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--line)}
.fw-es-btn--ghost:hover{color:var(--pu-ink);background:var(--pu-wash);box-shadow:inset 0 0 0 1.5px var(--pu)}
.fw-es-act{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(18px, 3vh, 28px)}
.fw-es-disc{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;color:var(--ac-ink);background:var(--ac-l)}
.fw-es-disc .fw-ico{width:22px;height:22px}
.fw-es-tick{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;font-size:13px;color:var(--wh);background:var(--ac);box-shadow:0 4px 10px -6px var(--ac)}

.fw-es-pic{margin:0;justify-self:center;width:fit-content;max-width:100%}
.fw-es-pic img{display:block;height:clamp(230px, 40vh, 420px);width:auto;max-width:100%;aspect-ratio:1600 / 1073}
.fw-es img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)}
.fw-es img.lazy-loaded,
.fw-es img.lazy-error{opacity:1}
.fw-es-split{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center}

.fw-es-anim [data-es-reveal]{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease-soft), transform .9s var(--ease-soft)}
.fw-es-anim [data-es-reveal].is-in{opacity:1;transform:none}

/* The crisis line: always shown, calm but clear. */
.fw-es-crisis{display:flex;align-items:flex-start;gap:10px;margin:clamp(18px, 3vh, 28px) 0 0;padding:clamp(10px, 1.6vh, 14px) 0 0;font-size:13.5px;line-height:1.5;color:var(--g7);position:relative}
.fw-es-crisis::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-es-crisis .bi{margin-top:1px;font-size:15px;color:var(--co-ink)}
.fw-es-crisis--big{margin:0 0 4px;padding:0;font-size:clamp(15px, 2.1vh, 17px);font-weight:600;color:var(--ink)}
.fw-es-crisis--big::before{display:none}
.fw-es-crisis--big .bi{font-size:20px}

/* ══════════════════════════════════════════════════════════════
   01 · NOT ALONE
   ══════════════════════════════════════════════════════════════ */

.fw-es-mast__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center}
.fw-es .fw-es-h1{margin:clamp(8px, 1.6vh, 16px) 0 0;font-size:clamp(34px, 6vh, 60px);line-height:1.04;letter-spacing:-.035em;background:linear-gradient(100deg, var(--dk-d) 30%, var(--pu-d) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
.fw-es-lede{margin:clamp(10px, 1.8vh, 16px) 0 0;font-size:clamp(16px, 2.2vh, 19px);line-height:1.55;color:var(--g6);text-wrap:pretty}
.fw-es-lede b{font-weight:600;color:var(--pk-dd)}
.fw-es-mast__fig{justify-self:end;margin:0;background:var(--g1)}
.fw-es-mast__fig img{display:block;height:clamp(250px, 46vh, 470px);width:auto;max-width:100%;aspect-ratio:1600 / 1073}

/* ══════════════════════════════════════════════════════════════
   02 · HOW ARE YOU FEELING RIGHT NOW?
   A rail of stages, each a 3D icon and a name; the chosen one is
   lifted on its accent wash with a bar at its edge. The panel:
   the stage's icon large, what is normal to feel as soft chips,
   what helps with check discs, and the support that may fit.
   Without the script every panel shows.
   ══════════════════════════════════════════════════════════════ */

.fw-es-feel{background:linear-gradient(180deg, var(--wh), var(--pu-wash) 55%, var(--wh))}
.fw-es-feel__grid{display:grid;grid-template-columns:minmax(0, .58fr) minmax(0, 1.42fr);gap:clamp(24px, 3.4vw, 60px);align-items:start}
.fw-es-rail{display:grid;gap:4px}
.fw-es-stage{position:relative;display:grid;grid-template-columns:clamp(54px, 7.4vh, 66px) minmax(0, 1fr) auto;align-items:center;gap:14px;padding:6px 16px 6px 6px;border:0;border-radius:100px;cursor:pointer;font-family:var(--ff);text-align:left;color:inherit;background:none;transition:background .3s var(--ease)}
.fw-es-stage img{width:100%;aspect-ratio:1;object-fit:contain;filter:saturate(.75) opacity(.85);transition:transform .35s var(--ease), filter .3s}
.fw-es-stage b{font-size:clamp(15px, 2.1vh, 17px);font-weight:600;color:var(--g7);transition:color .25s}
.fw-es-stage .bi{font-size:13px;color:var(--g4);opacity:0;transform:translateX(-4px);transition:opacity .25s, transform .25s var(--ease)}
.fw-es-stage:hover img{transform:translateY(-2px);filter:none}
.fw-es-stage.is-on{background:linear-gradient(90deg, var(--ac-l), transparent 92%)}
.fw-es-stage.is-on::before{content:"";position:absolute;left:-12px;top:22%;bottom:22%;width:4px;border-radius:4px;background:var(--ac)}
.fw-es-stage.is-on img{transform:scale(1.06);filter:none}
.fw-es-stage.is-on b{font-weight:700;color:var(--ink)}
.fw-es-stage.is-on .bi{opacity:1;transform:none;color:var(--ac-ink)}
.fw-es-stage:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.fw-es-feel.is-live .fw-es-panel{display:none}
.fw-es-feel.is-live .fw-es-panel.is-on{display:grid;animation:fw-es-in .6s var(--ease-soft)}
.fw-es-feel.is-live .fw-es-panel.is-on .fw-es-panel__pic img{animation:fw-es-pic .9s var(--ease-soft)}
@keyframes fw-es-pic{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
@keyframes fw-es-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fw-es-panels{display:grid;gap:clamp(30px, 5vh, 50px)}
/* Words on the left, the stage's own photograph on the right. */
.fw-es-panel{display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:clamp(20px, 3vw, 52px)}
.fw-es-panel__say{display:grid;justify-items:start;gap:10px}
.fw-es-panel__pic{position:relative;isolation:isolate;margin:0 0 14px 14px;background:var(--g1)}
.fw-es-panel__pic::after{content:"";position:absolute;left:-14px;bottom:-14px;width:46%;height:46%;z-index:-1;background:var(--ac-l)}
.fw-es-panel__pic img{display:block;height:clamp(340px, 56vh, 520px);width:auto;aspect-ratio:1856 / 2304}
.fw-es-panel__head{display:flex;align-items:center;gap:18px;margin-bottom:4px}
.fw-es-panel__head img{width:clamp(76px, 10vh, 96px);aspect-ratio:1;object-fit:contain}
.fw-es-panel__head .fw-es-kicker{color:var(--ac-ink)}
.fw-es-panel .fw-es-h3{font-size:clamp(24px, 3.6vh, 32px)}
.fw-es-panel__label{margin:clamp(6px, 1vh, 10px) 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g5)}
.fw-es-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fw-es-chips li{padding:7px 16px;border-radius:100px;font-size:14.5px;font-weight:500;color:var(--ac-ink);background:var(--ac-l)}
.fw-es-helps{display:grid;gap:2px;width:100%;margin:0;padding:0;list-style:none}
.fw-es-helps li{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:start;gap:12px;padding:clamp(8px, 1.3vh, 11px) 0;font-size:15.5px;line-height:1.5;color:var(--g7)}
.fw-es-helps li + li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-es-fit{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:10px 20px;border-radius:100px;color:inherit;text-decoration:none;background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--ac-l);transition:box-shadow .25s, background .25s}
.fw-es-fit span{font-size:13px;color:var(--g6)}
.fw-es-fit b{font-size:14.5px;font-weight:700;color:var(--ac-ink)}
.fw-es-fit .bi{font-size:13px;color:var(--ac-ink)}
.fw-es-fit:hover{color:inherit;background:var(--ac-l);box-shadow:inset 0 0 0 1.5px var(--ac)}

/* ══════════════════════════════════════════════════════════════
   03 · WAYS WE SUPPORT YOU — two up, photo whole above words.
   ══════════════════════════════════════════════════════════════ */

.fw-es-options{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(22px, 2.6vw, 44px);margin:0;padding:0;list-style:none}
.fw-es-option{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.fw-es-option__pic{position:relative;width:100%;margin:0 0 14px;background:var(--g1)}
.fw-es-option__pic img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;transition:transform .6s var(--ease-soft)}
.fw-es-option:hover .fw-es-option__pic img{transform:translateY(-3px)}
.fw-es-option__badge{position:absolute;left:14px;bottom:-22px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--wh);background:var(--ac);box-shadow:0 0 0 5px var(--wh), 0 12px 24px -14px var(--ac)}
.fw-es-option__badge .fw-ico{width:22px;height:22px}
.fw-es-option__kind{margin:10px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-ink)}
.fw-es-option .fw-es-h3{font-size:clamp(18px, 2.6vh, 21px)}
.fw-es-option__text{margin:0;font-size:14.5px;line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-es-option__meta{display:grid;gap:0;width:100%;margin:6px 0 0;padding:0;list-style:none}
.fw-es-option__meta li{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:start;gap:10px;padding:8px 0;font-size:13.5px;line-height:1.45;color:var(--g7)}
.fw-es-option__meta li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-es-option__meta .bi{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:13px;color:var(--ac-ink);background:var(--ac-l)}
.fw-es-option__meta small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)}
.fw-es-kinds{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(16px, 2.4vw, 36px);margin:0;padding:0;list-style:none}
.fw-es-kinds li{display:grid;justify-items:start;gap:10px;font-size:14.5px;line-height:1.5;color:var(--g6)}
.fw-es-kinds b{display:block;font-size:16px;color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   04 · SMALL THINGS THAT HELP — three 3D icons, three lines.
   ══════════════════════════════════════════════════════════════ */

.fw-es-small{background:linear-gradient(180deg, var(--wh), var(--co-l) 140%)}
.fw-es-small__list{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(20px, 3vw, 56px);margin:0;padding:0;list-style:none}
.fw-es-small__list li{display:grid;justify-items:center;gap:8px;text-align:center}
.fw-es-small__list img{width:clamp(96px, 13vh, 128px);aspect-ratio:1;object-fit:contain;margin-bottom:4px;transition:transform .5s var(--ease)}
.fw-es-small__list li:hover img{transform:translateY(-4px) rotate(-2deg)}
.fw-es-small__list b{font-size:clamp(17px, 2.4vh, 20px);font-weight:700;color:var(--ink)}
.fw-es-small__list span{font-size:14.5px;line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-es-small__more{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;margin:clamp(22px, 3.6vh, 34px) 0 0;padding:clamp(16px, 2.6vh, 22px) 0 0;list-style:none;position:relative;--ac:var(--co);--ac-ink:var(--co-ink)}
.fw-es-small__more::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:var(--fade-x)}
.fw-es-small__more li{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--g7)}

/* ══════════════════════════════════════════════════════════════
   05 · FOR PARTNERS
   ══════════════════════════════════════════════════════════════ */

.fw-es-tips{margin:0;padding:0;list-style:none}
.fw-es-tips li{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:start;gap:16px;padding:clamp(9px, 1.5vh, 13px) 0}
.fw-es-tips li + li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-es-tips__n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:14px;font-weight:700;color:var(--wh);background:linear-gradient(135deg, var(--pu), var(--pk))}
.fw-es-tips li > span:last-child{font-size:14.5px;line-height:1.55;color:var(--g6)}
.fw-es-tips b{display:block;font-size:16.5px;font-weight:700;color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   06 · TALK TO SOMEONE NOW — the crisis line beside the helplines.
   ══════════════════════════════════════════════════════════════ */

.fw-es-help{background:linear-gradient(180deg, var(--co-l) -40%, var(--wh) 70%)}
.fw-es-help__grid{display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:var(--gap);align-items:start}
.fw-es-help__side{display:grid;justify-items:start;gap:14px}
.fw-es-help__side .fw-es-head{margin-bottom:0}
.fw-es-lines{margin:0;padding:0;list-style:none;--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l)}
.fw-es-lines > li{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:start;gap:16px;padding:clamp(14px, 2.2vh, 20px) 0}
.fw-es-lines > li + li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--fade-x)}
.fw-es-lines b{font-size:17px;font-weight:700;color:var(--ink)}
.fw-es-lines__meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;font-size:13.5px;color:var(--g6)}
.fw-es-lines__meta span{display:inline-flex;align-items:center;gap:6px}
.fw-es-lines__note{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--g6)}
.fw-es-lines__go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:8px 0 0}
.fw-es-lines__go a{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--pu-ink);text-decoration:none}
.fw-es-lines__go a:hover{color:var(--pk-dd)}
.fw-es-lines__go small{font-size:12px;color:var(--g5)}

/* ══════════════════════════════════════════════════════════════
   07 · WHENEVER YOU ARE READY, AND QUESTIONS
   The invitation beside the questions in one band: a portrait of a
   counsellor at her door with a smaller photograph of held hands
   laid over its corner and the sprout icon on the other; then the
   words and buttons. The questions on the right, numbered.
   ══════════════════════════════════════════════════════════════ */

.fw-es-end{
	position:relative;padding:clamp(40px, 7vh, 84px) var(--pad);overflow:hidden;
	background:
		radial-gradient(40% 80% at 0% 100%, color-mix(in srgb, var(--pu) 10%, transparent), transparent 70%),
		radial-gradient(40% 80% at 100% 0%, color-mix(in srgb, var(--pk) 8%, transparent), transparent 70%),
		var(--g0)
}
.fw-es-end::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade-x)}
.fw-es-end__grid{display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);gap:var(--gap);align-items:center}
.fw-es-end__say{display:grid;justify-items:start;gap:10px}
.fw-es-end__art{position:relative;margin-bottom:clamp(14px, 2.4vh, 22px);padding:0 clamp(80px, 8vw, 130px) clamp(30px, 5vh, 50px) clamp(18px, 1.6vw, 26px)}
.fw-es-end__main{height:clamp(260px, 40vh, 390px);aspect-ratio:1856 / 2304;margin:0;background:var(--g1)}
.fw-es-end__main img,.fw-es-end__aside img{display:block;width:100%;height:100%;object-fit:cover}
.fw-es-end__aside{position:absolute;right:0;bottom:0;width:clamp(170px, 15vw, 240px);aspect-ratio:3 / 2;margin:0;background:var(--g1);box-shadow:0 0 0 6px var(--wh)}
.fw-es-end__badge{position:absolute;left:0;bottom:clamp(44px, 7vh, 70px);width:clamp(62px, 8vh, 78px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.08))}
.fw-es-end .fw-es-h2{font-size:clamp(26px, 4.2vh, 42px)}
.fw-es-end .fw-es-act{margin-top:clamp(6px, 1.2vh, 12px)}
.fw-es-end__faq .fw-es-head{margin-bottom:clamp(10px, 1.8vh, 16px)}

.fw-es-qs{display:grid}
.fw-es-q{position:relative}
.fw-es-q + .fw-es-q::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--fade-x)}
.fw-es-q summary{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:14px;padding:clamp(12px, 2vh, 17px) 6px;cursor:pointer;list-style:none}
.fw-es-q summary::-webkit-details-marker{display:none}
.fw-es-q__n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:12.5px;font-weight:700;color:var(--pu-ink);background:var(--pu-l);transition:background .25s, color .25s}
.fw-es-q__t{font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink);transition:color .2s}
.fw-es-q summary > i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-size:13px;color:var(--g6);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);transition:transform .3s var(--ease), color .25s, background .25s}
.fw-es-q summary:hover .fw-es-q__t,.fw-es-q[open] .fw-es-q__t{color:var(--pu-ink)}
.fw-es-q p{margin:0;padding:0 48px clamp(14px, 2.2vh, 20px) calc(36px + 14px + 6px);font-size:15px;line-height:1.7;color:var(--g6)}
.fw-es-q[open] .fw-es-q__n{color:var(--wh);background:var(--pu)}
.fw-es-q[open] summary > i{transform:rotate(45deg);color:var(--wh);background:var(--pu);box-shadow:none}

/* ══════════════════════════════════════════════════════════════
   09 · RELEASED HEIGHTS, AND THE PHONE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px){
	.fw-es-mast__grid,.fw-es-split,.fw-es-feel__grid,.fw-es-help__grid,.fw-es-end__grid{grid-template-columns:minmax(0, 1fr)}
	.fw-es-options{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-es-panel__pic img{height:clamp(300px, 46vw, 440px)}
	.fw-es-mast__fig{justify-self:stretch}
	.fw-es-mast__fig img,.fw-es-pic img{width:100%;height:auto}
	.fw-es-pic{width:100%}
	.fw-es-kinds{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-es-head--row{grid-template-columns:minmax(0, 1fr)}
	.fw-es-head--row .fw-es-sub{justify-self:start;text-align:left}
	/* The stage rail becomes a swipe row of icons. */
	.fw-es-rail{display:flex;overflow-x:auto;gap:6px;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
	.fw-es-rail::-webkit-scrollbar{display:none}
	.fw-es-stage{flex:0 0 auto;grid-template-columns:44px auto;padding:6px 16px 6px 6px;scroll-snap-align:start}
	.fw-es-stage .bi{display:none}
	.fw-es-stage.is-on::before{display:none}
	.fw-es-stage.is-on{background:var(--ac-l)}
}

@media (max-width: 768px){
	.fw-es-page{--pad:14px}
	.fw-es .fw-es-h1{font-size:clamp(32px, 9vw, 42px)}
	/* The support options become a swipe row. */
	.fw-es-options{display:flex;overflow-x:auto;gap:18px;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
	.fw-es-options::-webkit-scrollbar{display:none}
	.fw-es-option{flex:0 0 82%;scroll-snap-align:start}
	.fw-es-panel{grid-template-columns:minmax(0, 1fr)}
	.fw-es-panel__pic{order:-1;justify-self:start;margin-left:14px}
	.fw-es-panel__pic img{height:auto;width:min(78vw, 320px)}
	.fw-es-end__art{justify-self:center;padding:0 60px 26px 14px}
	.fw-es-end__main{height:auto;width:min(56vw, 230px)}
	.fw-es-end__aside{width:min(42vw, 160px)}
	.fw-es-end__badge{width:56px}
	.fw-es-small__list{grid-template-columns:minmax(0, 1fr)}
	.fw-es-small__more{justify-content:flex-start;flex-direction:column}
	.fw-es-kinds{grid-template-columns:minmax(0, 1fr)}
	.fw-es-q p{padding:0 6px clamp(14px, 2.2vh, 20px)}
	.fw-es-end .fw-es-act{width:100%}
	.fw-es-end .fw-es-act .fw-es-btn{width:100%}
}

@media (prefers-reduced-motion: reduce){
	.fw-es *,.fw-es *::before,.fw-es *::after{transition:none !important;animation:none !important}
	.fw-es-anim [data-es-reveal]{opacity:1;transform:none}
}