/* ══════════════════════════════════════════════════════════════════════════
   css/internships.css — /internships  (prefix fw-it)

   Clean, with a touch of /tools (owner, 1 Oct 2026, after two busier cuts):
   the shared fw-mast band with a gradient headline beside the teaching
   photograph shown whole; the programmes as one quiet line each under a row
   of field stops; how you learn beside a lab photograph; what you leave
   with around a drawn certificate; which track fits your course as a plain
   two-column list; how to apply beside an interview photograph; questions;
   a closing invitation with a portrait.

   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 (the certificate is a drawn object); photographs whole and
   square-cornered, no shadow; icon discs, pills and buttons round; 28px /
   14px gutters; each band about 55vh, sizes in vh, released at 1024px and
   below; the phone layout designed (a swiping field row), not stacked.
   Each programme is internships-detail.php with its own sheet
   (css/internships-detail.css, prefix fw-ip).
   ══════════════════════════════════════════════════════════════════════════ */

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

.fw-it-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(--pk);--ac-dd:var(--pk-dd);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-t:var(--pk-t);
	background:var(--wh);
	-webkit-text-size-adjust:100%
}
.fw-it-ac--pk{--ac:var(--pk);--ac-dd:var(--pk-dd);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-t:var(--pk-t)}
.fw-it-ac--bl{--ac:var(--bl);--ac-dd:var(--bl-dd);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l);--ac-t:var(--bl-t)}
.fw-it-ac--mt{--ac:var(--mt);--ac-dd:var(--mt-dd);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l);--ac-t:var(--mt-t)}
.fw-it-ac--pu{--ac:var(--pu);--ac-dd:var(--pu-dd);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l);--ac-t:var(--pu-t)}
.fw-it-ac--co{--ac:var(--co);--ac-dd:var(--co-dd);--ac-ink:var(--co-ink);--ac-l:var(--co-l);--ac-t:var(--co-t)}

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

/* Every band after the masthead, divided by a fade rule. */
.fw-it-sec{position:relative;padding:var(--sec) var(--pad)}
.fw-it-sec + .fw-it-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade-x)}

.fw-it-head{display:grid;gap:8px;margin-bottom:clamp(18px, 3vh, 30px)}
.fw-it-head--c{justify-items:center;text-align:center}
.fw-it-head--row{grid-template-columns:auto minmax(0, 1fr);align-items:end;column-gap:clamp(20px, 3vw, 48px)}
.fw-it-head--row .fw-it-sub{justify-self:end;text-align:right}
.fw-it-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-it-sub{margin:0;max-width:600px;font-size:clamp(15px, 2vh, 17px);line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-it-sub a{font-weight:600;color:var(--bl-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--bl-ring)}

.fw-it-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)
}
.fw-it-btn i{font-size:14px}
.fw-it-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)}
.fw-it-btn--ghost{color:var(--ink);background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--line)}
.fw-it-btn--ghost:hover{color:var(--bl-ink);background:var(--bl-wash);box-shadow:inset 0 0 0 1.5px var(--bl-ring)}
.fw-it-act{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:clamp(18px, 3vh, 28px)}

.fw-it-disc{display:grid;place-items:center;flex:0 0 auto;width:48px;height:48px;border-radius:50%;font-size:22px;color:var(--ac-ink);background:var(--ac-l)}

/* Photographs shown whole, at their own shape. */
.fw-it-pic{margin:0;background:var(--g1)}
.fw-it-pic img{display:block;width:100%;height:auto;aspect-ratio:1600 / 1073}
.fw-it img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)}
.fw-it img.lazy-loaded,
.fw-it img.lazy-error{opacity:1}

/* A photograph beside words; --flip puts the words first. */
.fw-it-split{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center}
.fw-it-split .fw-it-pic{max-width:calc(46vh * 1600 / 1073);width:100%;justify-self:center}

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

/* ══════════════════════════════════════════════════════════════
   01 · LEARN HERE
   ══════════════════════════════════════════════════════════════ */

.fw-it .fw-it-mast{position:relative;padding-bottom:clamp(26px, 4.4vh, 50px)}
.fw-it-mast__grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:var(--gap);align-items:center}
.fw-it .fw-it-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(--bl-d) 70%, var(--pk-d));-webkit-background-clip:text;background-clip:text;color:transparent;text-wrap:balance}
.fw-it-lede{margin:clamp(10px, 1.8vh, 16px) 0 0;max-width:560px;font-size:clamp(16px, 2.2vh, 19px);line-height:1.55;color:var(--g6);text-wrap:pretty}
.fw-it-lede b{font-weight:600;color:var(--pk-dd)}
.fw-it-trust{position:relative;display:flex;flex-wrap:wrap;gap:8px 20px;margin:clamp(20px, 3.4vh, 32px) 0 0;padding:clamp(14px, 2.2vh, 18px) 0 0;list-style:none}
.fw-it-trust::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-it-trust li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--g7)}
.fw-it-trust .bi{font-size:15px;color:var(--bl-d)}
.fw-it-mast__fig{position:relative;justify-self:end;width:100%;max-width:calc(48vh * 1600 / 1073);margin:0;background:var(--g1)}
.fw-it-mast__fig img{display:block;width:100%;height:auto;aspect-ratio:1600 / 1073}
.fw-it-mast__note{position:absolute;left:clamp(-28px, -2vw, -14px);bottom:clamp(14px, 2.4vh, 24px);display:flex;align-items:center;gap:12px;padding:12px 18px 12px 14px;border-radius:100px;background:var(--wh);box-shadow:var(--sh-soft)}
.fw-it-mast__note b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:19px;font-weight:700;color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd))}
.fw-it-mast__note span{font-size:13px;font-weight:600;line-height:1.3;color:var(--g7)}

/* ══════════════════════════════════════════════════════════════
   02 · PROGRAMMES, FILTERED BY FIELD
   ══════════════════════════════════════════════════════════════ */

.fw-it-stops{position:relative;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(14px, 2.4vh, 22px);padding:0;list-style:none}
.fw-it-stop{display:inline-flex;align-items:center;gap:9px;padding:5px 14px 5px 5px;border:0;border-radius:100px;cursor:pointer;font-family:var(--ff);white-space:nowrap;color:inherit;background:var(--wh);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s var(--ease), background .25s}
.fw-it-stop__dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:17px;color:var(--ac-ink);background:var(--wh);box-shadow:inset 0 0 0 1.5px var(--ac-l), 0 10px 22px -16px var(--ac);transition:transform .3s var(--ease), box-shadow .25s var(--ease), background .25s}
.fw-it-stop b{font-size:14px;font-weight:600;color:var(--g7);transition:color .2s}
.fw-it-stop small{min-width:22px;padding:1px 8px;border-radius:100px;font-size:11.5px;font-weight:700;color:var(--g6);background:var(--g1)}
.fw-it-stop:hover{box-shadow:inset 0 0 0 1px var(--ac)}
.fw-it-stop:hover .fw-it-stop__dot{transform:scale(1.06)}
.fw-it-stop.is-on{background:var(--ac-l);box-shadow:inset 0 0 0 1.5px var(--ac)}
.fw-it-stop.is-on .fw-it-stop__dot{color:var(--wh);background:var(--ac);box-shadow:none}
.fw-it-stop.is-on b{color:var(--ink)}
.fw-it-stop.is-on small{color:var(--wh);background:var(--ac)}

.fw-it-list{margin:0;padding:0;list-style:none}
.fw-it-list > li{position:relative}
.fw-it-list > li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--fade-x)}
.fw-it-list > li:last-child::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:var(--fade-x)}
.fw-it-list > li[hidden]{display:none}
.fw-it-row{display:grid;grid-template-columns:58px minmax(0, 1fr) minmax(130px, .3fr) minmax(130px, .28fr) 24px;align-items:center;gap:clamp(14px, 2vw, 32px);padding:clamp(10px, 1.6vh, 15px) clamp(8px, 1vw, 16px);color:inherit;text-decoration:none;transition:background .25s var(--ease)}
.fw-it-row:hover{color:inherit;background:linear-gradient(90deg, transparent, var(--g0) 10%, var(--g0) 90%, transparent)}
.fw-it-row__len{display:grid;place-items:center;align-content:center;width:54px;height:54px;border-radius:50%;line-height:1;color:var(--ac-ink);background:var(--ac-l)}
.fw-it-row__len b{font-size:21px;font-weight:600}
.fw-it-row__len small{margin-top:2px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.fw-it-row__main{display:grid;gap:3px;min-width:0}
.fw-it-row__main b{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:clamp(16px, 2.3vh, 19px);font-weight:600;line-height:1.3;color:var(--ink);transition:color .2s}
.fw-it-row__main small{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--g6)}
.fw-it-row__main img{width:18px;height:auto;border-radius:2px}
.fw-it-tag{padding:2px 9px;border-radius:100px;font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--pk-ink);background:var(--pk-l)}
.fw-it-row__pay{display:grid;gap:1px}
.fw-it-row__pay b{font-size:16px;font-weight:600;color:var(--ink)}
.fw-it-row__pay small{font-size:12.5px;color:var(--g5)}
.fw-it-row__when{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--mt-ink)}
.fw-it-row__when > i{width:7px;height:7px;border-radius:50%;background:currentColor}
.fw-it-row__when.is-soon{color:var(--go-ink)}
.fw-it-row__when.is-late{color:var(--co-ink)}
.fw-it-row__go{font-size:17px;color:var(--pk-d);transition:transform .25s var(--ease)}
.fw-it-row:hover .fw-it-row__main b{color:var(--ac-ink)}
.fw-it-row:hover .fw-it-row__go{transform:translateX(4px)}
.fw-it-more{display:flex;justify-content:center;margin-top:clamp(16px, 2.6vh, 24px)}
.fw-it-more [hidden]{display:none}
.fw-it-none{display:flex;justify-content:center}

/* ══════════════════════════════════════════════════════════════
   03 · HOW YOU LEARN
   ══════════════════════════════════════════════════════════════ */

.fw-it-learn{background:linear-gradient(180deg, var(--bl-wash), var(--wh))}
.fw-it-ways{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:clamp(18px, 3vh, 28px) clamp(18px, 2.4vw, 36px);margin:0;padding:0;list-style:none}
.fw-it-ways li{display:grid;grid-template-columns:auto 1fr;gap:3px 14px}
.fw-it-ways .fw-it-disc{grid-row:span 2}
.fw-it-ways b{font-size:16.5px;font-weight:700;color:var(--ink)}
.fw-it-ways span:not(.fw-it-disc){font-size:14.5px;line-height:1.5;color:var(--g6)}

/* ══════════════════════════════════════════════════════════════
   04 · WHAT YOU LEAVE WITH
   ══════════════════════════════════════════════════════════════ */

.fw-it-gains{display:grid;gap:clamp(12px, 2vh, 18px);margin:0;padding:0;list-style:none}
.fw-it-gains li{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 14px}
.fw-it-gains .fw-it-disc{grid-row:span 2;width:44px;height:44px;font-size:20px}
.fw-it-gains b{font-size:16px;font-weight:700;color:var(--ink)}
.fw-it-gains span:not(.fw-it-disc){font-size:14.5px;line-height:1.45;color:var(--g6)}
.fw-it-cert{
	display:flex;flex-direction:column;align-items:center;justify-self:center;width:min(100%, 520px);padding:clamp(24px, 4.4vh, 44px) clamp(22px, 3vw, 44px);text-align:center;
	background:linear-gradient(160deg, var(--wh), var(--paper));
	box-shadow:inset 0 0 0 1px var(--pk-ring), inset 0 0 0 8px var(--wh), inset 0 0 0 9px var(--bl-ring);
	transform:rotate(1.4deg)
}
.fw-it-cert__logo{display:block;height:clamp(30px, 4.4vh, 42px);width:auto}
.fw-it-cert__kicker{margin:clamp(14px, 2.2vh, 20px) 0 0;font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--bl-ink)}
.fw-it-cert__name{margin:clamp(10px, 1.8vh, 16px) 0 0;padding:0 24px 4px;font-size:clamp(26px, 4vh, 36px);font-weight:300;font-style:italic;color:var(--pk-ink);border-bottom:1px solid var(--pk-ring)}
.fw-it-cert__for{max-width:36ch;margin:clamp(10px, 1.6vh, 14px) 0 0;font-size:13.5px;line-height:1.55;color:var(--g6)}
.fw-it-cert__for b{font-weight:600;color:var(--ink)}
.fw-it-cert__sign{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:18px;width:100%;margin-top:clamp(18px, 3vh, 28px);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)}
.fw-it-cert__sign > span:not(.fw-it-cert__seal){padding-top:8px;border-top:1px solid var(--line)}
.fw-it-cert__seal{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:26px;color:var(--pk-ink);background:var(--pk-l);box-shadow:0 0 0 5px var(--wh), 0 0 0 6px var(--pk-ring)}

/* ══════════════════════════════════════════════════════════════
   05 · WHICH TRACK FITS YOUR COURSE
   ══════════════════════════════════════════════════════════════ */

.fw-it-fit{background:linear-gradient(180deg, var(--wh), var(--pk-wash))}
.fw-it-fits{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(24px, 4vw, 72px);margin:0;padding:0;list-style:none}
.fw-it-fits li{position:relative;display:grid;gap:8px;padding:clamp(12px, 2vh, 18px) 0}
.fw-it-fits li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--fade-x)}
.fw-it-fits b{font-size:15px;font-weight:600;color:var(--ink)}
.fw-it-fits__to{display:flex;flex-wrap:wrap;gap:6px}
.fw-it-fits em{display:inline-flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:100px;font-size:13px;font-weight:500;color:var(--ac-ink);background:var(--ac-l)}
.fw-it-fits em i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:13px;background:var(--wh)}

/* ══════════════════════════════════════════════════════════════
   06 · HOW TO APPLY
   ══════════════════════════════════════════════════════════════ */

.fw-it-how{margin:0;padding:0;list-style:none;counter-reset:fw-it-how}
.fw-it-how li{position:relative;display:flex;flex-direction:column;gap:3px;padding:0 0 clamp(14px, 2.4vh, 22px) 52px;counter-increment:fw-it-how}
.fw-it-how li::before{content:counter(fw-it-how);position:absolute;left:0;top:-3px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:14px;font-weight:700;color:var(--wh);background:linear-gradient(135deg, var(--bl), var(--bl-dd))}
.fw-it-how li:not(:last-child)::after{content:"";position:absolute;left:17.5px;top:36px;bottom:2px;width:1px;background:var(--bl-ring)}
.fw-it-how b{font-size:16px;font-weight:700;color:var(--ink)}
.fw-it-how span{font-size:14.5px;line-height:1.55;color:var(--g6)}
.fw-it-addr{margin:4px 0 0;font-size:14px;color:var(--g6)}
.fw-it-addr span{font-weight:600;color:var(--ink)}

/* ══════════════════════════════════════════════════════════════
   07 · QUESTIONS
   Three quick facts beside the heading; each question led by its
   number; the open one carries a pink rule and a soft wash.
   ══════════════════════════════════════════════════════════════ */

.fw-it-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(--pk-dd)}
.fw-it-kicker .fw-ico{width:18px;height:18px}
.fw-it-faq{background:linear-gradient(180deg, color-mix(in srgb, var(--pk) 4%, var(--wh)), var(--wh) 70%)}
/* The two columns share one height: the heading sits at the top and the
   three facts stretch, in even rows, down to the last question, so the
   side never ends early and leaves a gap. */
.fw-it-faq__grid{display:grid;grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr);gap:var(--gap);align-items:stretch}
.fw-it-faq__side{display:flex;flex-direction:column}
.fw-it-faq__side .fw-it-head{margin-bottom:clamp(14px, 2.4vh, 22px)}
.fw-it-facts{flex:1 1 auto;display:grid;grid-auto-rows:1fr;margin:0;padding:0;list-style:none}
.fw-it-facts li{position:relative;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:clamp(10px, 1.6vh, 14px) 0}
.fw-it-facts li::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-it-facts li:last-child::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg, var(--line), transparent)}
.fw-it-facts .fw-it-disc{width:54px;height:54px;font-size:24px}
.fw-it-facts li > span:last-child{display:grid;gap:2px;font-size:14px;line-height:1.45;color:var(--g6)}
.fw-it-facts b{font-size:clamp(17px, 2.4vh, 20px);font-weight:700;color:var(--ink)}
.fw-it-qs{align-self:start}

.fw-it-q{position:relative;transition:background .3s var(--ease)}
.fw-it-q + .fw-it-q::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:var(--fade-x)}
.fw-it-q summary{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:16px;padding:clamp(13px, 2.1vh, 18px) clamp(10px, 1.2vw, 18px);cursor:pointer;list-style:none}
.fw-it-q summary::-webkit-details-marker{display:none}
.fw-it-q__n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font-size:13px;font-weight:700;color:var(--bl-ink);background:var(--bl-l);transition:background .25s, color .25s}
.fw-it-q__t{font-size:16.5px;font-weight:600;line-height:1.35;color:var(--ink)}
.fw-it-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-it-q summary:hover .fw-it-q__t{color:var(--pk-dd)}
.fw-it-q p{margin:0;padding:0 clamp(10px, 1.2vw, 18px) clamp(14px, 2.2vh, 20px) calc(38px + 16px + clamp(10px, 1.2vw, 18px));max-width:78ch;font-size:15px;line-height:1.65;color:var(--g6)}
.fw-it-q[open]{background:linear-gradient(90deg, var(--pk-wash), transparent 85%)}
.fw-it-q[open]::after{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;background:var(--pk)}
.fw-it-q[open] .fw-it-q__n{color:var(--wh);background:var(--pk)}
.fw-it-q[open] summary > i{transform:rotate(45deg);color:var(--wh);background:var(--pk);box-shadow:none}

/* ══════════════════════════════════════════════════════════════
   08 · A CLOSING INVITATION
   A portrait with a smaller team photograph laid over its corner,
   beside the invitation, a three-line "what to write" list and the
   reply promise.
   ══════════════════════════════════════════════════════════════ */

.fw-it-close{
	position:relative;padding:var(--sec) var(--pad);overflow:hidden;
	background:
		radial-gradient(45% 80% at 100% 100%, color-mix(in srgb, var(--pk) 11%, transparent), transparent 70%),
		radial-gradient(40% 70% at 0% 0%, color-mix(in srgb, var(--bl) 10%, transparent), transparent 70%),
		var(--g0)
}
.fw-it-close::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--fade-x)}
.fw-it-close__grid{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:clamp(36px, 6vw, 110px)}
.fw-it-close__art{position:relative;padding:0 clamp(70px, 7vw, 120px) clamp(30px, 5vh, 50px) 0}
.fw-it-close__main{height:clamp(260px, 42vh, 400px);aspect-ratio:2 / 3;margin:0;background:var(--g1)}
.fw-it-close__main img,.fw-it-close__aside img{display:block;width:100%;height:100%;object-fit:cover}
.fw-it-close__aside{position:absolute;right:0;bottom:0;width:clamp(170px, 16vw, 250px);aspect-ratio:1600 / 1073;margin:0;background:var(--g1);box-shadow:0 0 0 6px var(--wh)}
.fw-it-close__badge{position:absolute;left:clamp(-18px, -1.4vw, -12px);top:clamp(24px, 4vh, 40px);display:grid;place-items:center;width:54px;height:54px;border-radius:50%;font-size:24px;color:var(--wh);background:linear-gradient(135deg, var(--pk), var(--pk-dd));box-shadow:0 0 0 5px var(--wh), var(--pk-glow)}
.fw-it-close__say{display:grid;justify-items:start;gap:10px}
.fw-it-close .fw-it-h2{font-size:clamp(28px, 4.6vh, 46px)}
.fw-it-close__list{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 0;padding:0;list-style:none}
.fw-it-close__list li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:100px;font-size:13.5px;font-weight:500;color:var(--g7);background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)}
.fw-it-close__list .bi{font-size:14px;color:var(--pk-d)}
.fw-it-close .fw-it-act{margin-top:clamp(10px, 1.8vh, 16px)}
.fw-it-close__promise{display:inline-flex;align-items:center;gap:8px;margin:4px 0 0;font-size:13.5px;color:var(--g6)}
.fw-it-close__promise .bi{color:var(--mt-d)}

/* ══════════════════════════════════════════════════════════════
   09 · RELEASED HEIGHTS, AND THE PHONE AS AN APP
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px){
	.fw-it-mast__grid,.fw-it-split,.fw-it-faq__grid{grid-template-columns:minmax(0, 1fr)}
	.fw-it-facts{grid-template-columns:repeat(3, minmax(0, 1fr));grid-auto-rows:auto;gap:12px}
	.fw-it-facts li::before,.fw-it-facts li:last-child::after{display:none}
	.fw-it-close__grid{gap:clamp(28px, 5vw, 60px)}
	.fw-it-mast__fig,.fw-it-split .fw-it-pic{justify-self:stretch;max-width:none}
	.fw-it-mast__note{left:14px}
	.fw-it-split--flip > :first-child{order:2}
	.fw-it-row{grid-template-columns:58px minmax(0, 1fr) auto;grid-template-areas:"len main go" "len pay go" "len when go";row-gap:4px}
	.fw-it-row__len{grid-area:len}
	.fw-it-row__main{grid-area:main}
	.fw-it-row__pay{grid-area:pay;display:flex;align-items:baseline;gap:6px}
	.fw-it-row__when{grid-area:when}
	.fw-it-row__go{grid-area:go}
	.fw-it-fits{grid-template-columns:minmax(0, 1fr)}
	.fw-it-head--row{grid-template-columns:minmax(0, 1fr)}
	.fw-it-head--row .fw-it-sub{justify-self:start;text-align:left}
}

@media (max-width: 768px){
	.fw-it-page{--pad:14px}
	.fw-it .fw-it-h1{font-size:clamp(32px, 9vw, 42px)}
	/* The field stops become a swipe row. */
	.fw-it-stops{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 8px;scroll-snap-type:x mandatory;scrollbar-width:none}
	.fw-it-stops::-webkit-scrollbar{display:none}
	.fw-it-stops li{flex:0 0 auto;scroll-snap-align:start}
	.fw-it-ways{grid-template-columns:minmax(0, 1fr)}
	.fw-it-facts{grid-template-columns:minmax(0, 1fr);gap:0}
	.fw-it-cert{transform:none}
	.fw-it-close__grid{grid-template-columns:minmax(0, 1fr);gap:28px}
	.fw-it-close__art{justify-self:center;padding:0 64px 26px 0}
	.fw-it-close__main{height:auto;width:min(58vw, 240px)}
	.fw-it-close__aside{width:min(44vw, 170px)}
	.fw-it-close__badge{left:-12px;width:46px;height:46px;font-size:20px}
	.fw-it-close .fw-it-act{width:100%}
	.fw-it-close .fw-it-act .fw-it-btn{width:100%}
	.fw-it-q p{padding-left:clamp(10px, 1.2vw, 18px)}
}

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