/* ══════════════════════════════════════════════════════════════════════════
   css/book.css — THE BOOKING PAGES  (/book and /book/<slug>, prefix fw-bk)

   THIS PAGE'S LAYOUT. The enquiry form inside it, and the call and
   WhatsApp pair, are shared components in css/common.css § 7, so they look
   the same here and in the overlay that opens on every other page.

   House rules, all kept: bright grounds only, depth from blurred brand
   discs; no max-width on any section or text; colour only from :root;
   28px / 14px gutters. The cover holds an application, so it is exempt
   from the 55vh cap; the other bands size their type on vh.

   ONE ACCENT PER PAGE. Each entry in public_book_purposes() names a colour
   family (pk, bl, mt, pu, go, co); the body class maps it onto --ac-*.
   Pink stays the action colour: the send button and "Write to us".

   MOTION (§ 9). custom/js/book.js adds .fw-bk-anim to the body and .is-in
   to each [data-bk-reveal] as it enters the window: sections rise, house
   glyphs draw their own strokes, the timeline line runs across and its
   stops pop in turn. Nothing is hidden until the script has run, and
   prefers-reduced-motion turns every movement off.

   Phones (≤768px) get an app layer from the same markup: a segmented chip
   switcher, swipe rows, a 2×2 figure grid, the form as a sheet, an upright
   tracker timeline and list rows with chevrons.
   ══════════════════════════════════════════════════════════════════════════ */

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

.fw-bk-page{
	--pad:28px;
	--article-top:116px;
	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);
	--sec:clamp(44px, 8vh, 92px);
	--s3:12px;--s4:16px;--s5:24px;
	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);
	--ease-pop:cubic-bezier(.34,1.56,.64,1);
	background:var(--wh);
	-webkit-text-size-adjust:100%
}

/* The accent families. A new booking page picks one of these by name. */
.fw-bk-page--pk,.fw-bk-switch--pk,.fw-bk-more--pk{--ac:var(--pk);--ac-dd:var(--pk-dd);--ac-ink:var(--pk-ink);--ac-l:var(--pk-l);--ac-l2:var(--pk-l2);--ac-t:var(--pk-t);--ac-ring:var(--pk-ring)}
.fw-bk-page--bl,.fw-bk-switch--bl,.fw-bk-more--bl{--ac:var(--bl);--ac-dd:var(--bl-dd);--ac-ink:var(--bl-ink);--ac-l:var(--bl-l);--ac-l2:var(--bl-l2);--ac-t:var(--bl-t);--ac-ring:var(--bl-ring)}
.fw-bk-page--mt,.fw-bk-switch--mt,.fw-bk-more--mt{--ac:var(--mt);--ac-dd:var(--mt-dd);--ac-ink:var(--mt-ink);--ac-l:var(--mt-l);--ac-l2:var(--mt-l2);--ac-t:var(--mt-t);--ac-ring:var(--mt-ring)}
.fw-bk-page--pu,.fw-bk-switch--pu,.fw-bk-more--pu{--ac:var(--pu);--ac-dd:var(--pu-dd);--ac-ink:var(--pu-ink);--ac-l:var(--pu-l);--ac-l2:var(--pu-l2);--ac-t:var(--pu-t);--ac-ring:var(--pu-ring)}
.fw-bk-page--go,.fw-bk-switch--go,.fw-bk-more--go{--ac:var(--go);--ac-dd:var(--go-dd);--ac-ink:var(--go-ink);--ac-l:var(--go-l);--ac-l2:var(--go-l2);--ac-t:var(--go-t);--ac-ring:var(--go-ring)}
.fw-bk-page--co,.fw-bk-switch--co,.fw-bk-more--co{--ac:var(--co);--ac-dd:var(--co-dd);--ac-ink:var(--co-ink);--ac-l:var(--co-l);--ac-l2:var(--co-l2);--ac-t:var(--co-t);--ac-ring:var(--co-ring)}

.fw-bk{display:block;position:relative}
.fw-bk-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)}
.fw-bk-sec{position:relative;padding:var(--sec) 0}

/* Canvas puts a serif on every bare <em>. One font on this page. */
.fw-bk em{font-family:var(--ff);font-style:normal}
.fw-bk .fw-ico{stroke-width:1.6}

.fw-bk-eyebrow{
	display:flex;align-items:center;gap:9px;margin:0;
	font-size:10px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--g5)
}
.fw-bk-eyebrow::before{content:'';width:14px;height:1.5px;border-radius:2px;background:var(--ac);flex-shrink:0}

.fw-bk-h2{
	margin:var(--s3) 0 0;font-family:var(--ff);
	font-size:clamp(26px, 4.4vh, 44px);font-weight:600;line-height:1.08;letter-spacing:-.034em;
	color:var(--ink);text-wrap:balance
}
.fw-bk-h3{
	margin:var(--s3) 0 0;font-family:var(--ff);
	font-size:clamp(21px, 3.2vh, 30px);font-weight:600;line-height:1.15;letter-spacing:-.028em;
	color:var(--ink);text-wrap:balance
}
.fw-bk-lead{
	margin:0;font-size:clamp(15px, 2.1vh, 18px);font-weight:300;line-height:1.62;letter-spacing:-.006em;
	color:var(--g6);text-wrap:pretty
}
.fw-bk-head{
	display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(28px, 4vw, 88px);align-items:end;
	margin-bottom:clamp(26px, 5vh, 52px)
}
.fw-bk-head--solo{grid-template-columns:minmax(0, 1fr)}

.fw-bk-btn{
	position:relative;overflow:hidden;isolation:isolate;
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	min-height:50px;padding:0 26px;border-radius:100px;
	font-size:14.5px;font-weight:600;white-space:nowrap;
	color:var(--wh);background:linear-gradient(100deg, var(--pk-d), var(--pk-dd));box-shadow:var(--pk-glow);
	transition:box-shadow .3s, transform .25s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-bk-btn i{font-size:13px;transition:transform .3s var(--ease)}
.fw-bk-btn:hover{color:var(--wh);box-shadow:var(--pk-glow-lg);transform:translateY(-1px)}
.fw-bk-btn:hover i{transform:translateY(-3px)}
.fw-bk-btn:active{transform:scale(.975)}

/* Ambient light: blurred brand discs in a clipped sibling layer. */
.fw-bk-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fw-bk-fx i{position:absolute;display:block;aspect-ratio:1;border-radius:50%;width:clamp(260px, 30vw, 520px);filter:blur(100px);opacity:.14}
.fw-bk-fx i:nth-child(1){top:-18%;left:-6%;background:var(--ac)}
.fw-bk-fx i:nth-child(2){top:20%;right:-8%;background:var(--bl)}
.fw-bk-fx i:nth-child(3){bottom:-26%;left:38%;background:var(--pk);opacity:.09}
.fw-bk-fx--tl i:nth-child(1){top:auto;bottom:-24%;left:24%}
.fw-bk-fx--close i:nth-child(1){top:-30%;left:8%;background:var(--pk)}
.fw-bk-fx--close i:nth-child(2){top:auto;bottom:-30%;right:4%;background:var(--ac)}

/* The `img.` prefix out-specifies the theme's img.lazy rule; lazyload
   keeps .lazy when it adds .lazy-loaded. */
.fw-bk img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)}
.fw-bk img.lazy-loaded,
.fw-bk img.lazy-error{opacity:1}

/* ══════════════════════════════════════════════════════════════
   01 · §1 COVER
   ══════════════════════════════════════════════════════════════ */

.fw-bk-cover{
	position:relative;overflow:hidden;
	padding:clamp(14px, 2.2vh, 28px) 0 clamp(40px, 7vh, 80px);
	background:linear-gradient(180deg, var(--paper), var(--wh))
}
/* A fine dot grid, fading out from the headline: paper texture, not pattern. */
.fw-bk-cover::before{
	content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
	background-image:radial-gradient(var(--ink-a12) 1px, transparent 1.3px);
	background-size:24px 24px;
	-webkit-mask-image:radial-gradient(ellipse 60% 70% at 22% 30%, var(--ink), transparent 72%);
	        mask-image:radial-gradient(ellipse 60% 70% at 22% 30%, var(--ink), transparent 72%);
	opacity:.55
}
.fw-bk-crumb{margin-bottom:clamp(10px, 1.6vh, 16px)}

/* ── The switcher: every booking page, one row ── */
.fw-bk-switch{position:relative;margin-bottom:clamp(14px, 2.4vh, 24px)}
.fw-bk-switch ul{
	display:flex;gap:8px;margin:0;padding:2px 0 6px;list-style:none;
	overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none
}
.fw-bk-switch ul::-webkit-scrollbar{display:none}
.fw-bk-switch li{flex:0 0 auto;scroll-snap-align:start}
.fw-bk-switch__a{
	display:inline-flex;align-items:center;gap:8px;
	min-height:42px;padding:0 17px 0 13px;border-radius:100px;
	font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--g7);
	background:color-mix(in srgb, var(--wh) 85%, transparent);
	backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
	box-shadow:inset 0 0 0 1px var(--line), 0 6px 16px -12px var(--ink-a40);
	transition:color .25s, background .25s, box-shadow .25s, transform .3s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-bk-switch__a .fw-ico{font-size:17px;color:var(--ac-ink);transition:transform .35s var(--ease-pop)}
.fw-bk-switch__a:hover{color:var(--ac-ink);background:var(--ac-l);box-shadow:inset 0 0 0 1px var(--ac-ring);transform:translateY(-1px)}
.fw-bk-switch__a:hover .fw-ico{transform:scale(1.15) rotate(-6deg)}
.fw-bk-switch__a.is-on{color:var(--wh);font-weight:600;background:linear-gradient(100deg, var(--ac-dd), var(--ac-ink));box-shadow:0 10px 22px -10px var(--ac-dd)}
.fw-bk-switch__a.is-on .fw-ico{color:var(--wh)}

.fw-bk-cover__grid{
	display:grid;grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr);
	column-gap:clamp(32px, 5vw, 96px);align-items:center
}
/* Centred against the taller form, so neither column ends in a hole. */
.fw-bk-cover__copy{min-width:0}

.fw-bk-kick{
	display:inline-flex;align-items:center;gap:12px;margin:0;
	font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-ink)
}
.fw-bk-kick__ico{
	position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
	background:linear-gradient(140deg, var(--ac-l), var(--wh));
	box-shadow:inset 0 0 0 1px var(--ac-ring);font-size:18px
}
.fw-bk-kick__ico::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--ac-ring);opacity:0}

.fw-bk-title{
	margin:clamp(14px, 2.2vh, 22px) 0 0;font-family:var(--ff);
	font-size:clamp(34px, 3.7vw, 60px);font-weight:600;line-height:1.03;letter-spacing:-.042em;
	color:var(--ink);text-wrap:balance
}
/* Scoped to the block: Canvas colours a bare span inside a heading. The
   second line is inked with a pink to accent gradient. */
.fw-bk-cover .fw-bk-title span{
	display:block;font-weight:500;padding-bottom:.08em;
	background:linear-gradient(95deg, var(--pk-d), var(--ac-dd) 70%);
	-webkit-background-clip:text;background-clip:text;color:transparent
}
.fw-bk-lede{
	margin:clamp(14px, 2.2vh, 22px) 0 0;
	font-size:clamp(15.5px, 1.25vw, 18.5px);line-height:1.62;color:var(--g6);text-wrap:pretty
}

.fw-bk-gets{display:grid;gap:10px;margin:clamp(18px, 3vh, 26px) 0 0;padding:0;list-style:none}
.fw-bk-gets li{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;color:var(--g8)}
.fw-bk-gets__ico{display:grid;place-items:center;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--ac-l);color:var(--ac-ink);font-size:15px}

/* ── The figures: an icon disc, a counting number, a label ── */
.fw-bk-figs{
	display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:0;
	margin:clamp(22px, 3.6vh, 34px) 0 0;padding:clamp(16px, 2.4vh, 22px) 0 0;list-style:none;
	border-top:1px solid var(--line)
}
.fw-bk-figs li{position:relative;display:flex;align-items:center;gap:11px;min-width:0;padding:0 clamp(10px, 1.2vw, 18px)}
.fw-bk-figs li:first-child{padding-left:0}
.fw-bk-figs li + li::before{content:'';position:absolute;left:0;top:8%;bottom:8%;width:1px;background:var(--line)}
.fw-bk-figs__ico{
	position:relative;display:grid;place-items:center;flex-shrink:0;
	width:42px;height:42px;border-radius:50%;font-size:19px;
	color:var(--ac-ink);background:linear-gradient(140deg, var(--ac-l2), var(--wh));
	box-shadow:inset 0 0 0 1px var(--ac-ring)
}
.fw-bk-figs__ico::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--ac-ring);opacity:0}
.fw-bk-figs__free .fw-bk-figs__ico{color:var(--pk-ink);background:linear-gradient(140deg, var(--pk-l2), var(--wh));box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-bk-figs__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.fw-bk-figs__t b{font-size:clamp(20px, 1.8vw, 27px);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.fw-bk-figs__free b{color:var(--pk-d)}
.fw-bk-figs__t small{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--g5);white-space:nowrap}

/* Call and WhatsApp are the shared .fw-contact pair (css/common.css § 7). */
.fw-bk-cover__copy .fw-contact{margin-top:clamp(22px, 3.6vh, 32px)}

/* ══════════════════════════════════════════════════════════════
   01c · THE FORM — a page-only dress for the shared partial
   The overlay on every other page keeps css/common.css § 7.
   ══════════════════════════════════════════════════════════════ */

.fw-bk-formwrap{
	position:relative;min-width:0;
	padding:18px 22px 14px;border-radius:24px;
	border:1px solid transparent;
	background:
		linear-gradient(var(--wh), var(--wh)) padding-box,
		linear-gradient(150deg, var(--pk-ring), var(--line) 40%, var(--ac-ring)) border-box;
	box-shadow:0 40px 80px -46px var(--ink-a45), 0 2px 6px -2px var(--ink-a06);
	transition:box-shadow .5s var(--ease)
}
.fw-bk-formwrap:has(.fw-enq.is-ready){box-shadow:0 40px 80px -46px var(--ink-a45), 0 0 0 4px var(--pk-focus)}

.fw-bk-formwrap__head{
	display:flex;align-items:center;justify-content:space-between;gap:14px;
	margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)
}
.fw-bk-formwrap__h{display:flex;align-items:center;gap:12px;min-width:0}
.fw-bk-formwrap__ico{
	display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:12px;
	font-size:17px;color:var(--wh);background:linear-gradient(140deg, var(--pk), var(--pk-dd));box-shadow:var(--pk-glow-sm)
}
.fw-bk-formwrap__h > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.fw-bk-formwrap__h b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.fw-bk-formwrap__h small{font-size:12px;font-weight:500;color:var(--g5)}

/* The form itself (tiles, meter, fields, send button) is the shared
   enquiry form's own look in css/common.css § 7, the same in the overlay. */

.fw-bk-trust{
	display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px;
	margin:12px 0 0;padding:10px 0 0;list-style:none;border-top:1px solid var(--line-soft)
}
.fw-bk-trust li{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--g6);text-align:center}
.fw-bk-trust .fw-ico{flex-shrink:0;font-size:16px;color:var(--mt-ink)}

/* ══════════════════════════════════════════════════════════════
   01d · §1b WHAT WE HELP WITH — the ribbon
   ══════════════════════════════════════════════════════════════ */

.fw-bk-help{
	position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px, 2vw, 26px);
	padding:14px 0 14px var(--pad);border-block:1px solid var(--line-soft);background:var(--wh);overflow:hidden
}
.fw-bk-help__lbl{
	display:flex;align-items:center;gap:8px;flex-shrink:0;margin:0;
	font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-ink)
}
.fw-bk-help__lbl .fw-ico{font-size:17px}
.fw-bk-help__rail{
	display:flex;min-width:0;overflow:hidden;
	-webkit-mask-image:linear-gradient(90deg, transparent, var(--ink) 5%, var(--ink) 92%, transparent);
	        mask-image:linear-gradient(90deg, transparent, var(--ink) 5%, var(--ink) 92%, transparent)
}
.fw-bk-help__track{display:flex;flex-shrink:0;gap:10px;margin:0;padding:2px 10px 2px 0;list-style:none}
.fw-bk-help__track a{
	display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
	padding:6px 15px 6px 6px;border-radius:100px;
	font-size:13px;font-weight:500;color:var(--g7);
	background:var(--g0);box-shadow:inset 0 0 0 1px var(--line);
	transition:color .25s, background .25s, box-shadow .25s
}
.fw-bk-help__track a:hover{color:var(--pk-ink);background:var(--pk-wash);box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-bk-help__track img{
	width:28px!important;height:28px!important;max-width:none!important;flex-shrink:0;
	padding:5px;border-radius:50%;object-fit:contain;background:var(--wh);box-shadow:inset 0 0 0 1px var(--line)
}

/* ══════════════════════════════════════════════════════════════
   02 · §2 WHAT THIS IS
   ══════════════════════════════════════════════════════════════ */

.fw-bk-about__grid{
	display:grid;grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);
	column-gap:clamp(32px, 5.5vw, 110px);align-items:center
}
.fw-bk-about__fig{
	position:relative;margin:0;aspect-ratio:4/3;max-height:min(66vh, 640px);
	border-radius:var(--rx);overflow:hidden;background:var(--ac-l);
	box-shadow:0 34px 70px -40px var(--ink-a40)
}
.fw-bk-about__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;
	transition:transform 1.4s var(--ease-soft)
}
.fw-bk-about__fig:hover img{transform:scale(1.03)}
/* A frosted caption on the photograph's foot, floating gently. */
.fw-bk-about__badge{
	position:absolute;left:clamp(12px, 1.6vw, 20px);bottom:clamp(12px, 1.6vw, 20px);
	display:flex;align-items:center;gap:11px;padding:9px 16px 9px 9px;border-radius:100px;
	background:color-mix(in srgb, var(--wh) 84%, transparent);
	backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);
	box-shadow:0 14px 30px -18px var(--ink-a45)
}
.fw-bk-about__badge span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ac-dd);color:var(--wh);font-size:17px}
.fw-bk-about__badge b{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.fw-bk-about__text{display:grid;gap:clamp(12px, 2vh, 18px);margin-top:clamp(16px, 2.6vh, 26px)}
.fw-bk-about__text p{margin:0;font-size:clamp(14.5px, 1.95vh, 16.5px);line-height:1.72;color:var(--g6);text-wrap:pretty}
.fw-bk-about__text p.fw-bk-about__lead{font-size:clamp(16.5px, 2.4vh, 20px);line-height:1.55;letter-spacing:-.012em;color:var(--g8)}

/* ══════════════════════════════════════════════════════════════
   03 · §3 WHO IT IS FOR · WHAT TO HAVE READY
   ══════════════════════════════════════════════════════════════ */

.fw-bk-fit{background:linear-gradient(180deg, var(--wh), var(--paper-b2))}
.fw-bk-fit__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(32px, 5.5vw, 110px)}
.fw-bk-list{margin:clamp(16px, 2.6vh, 24px) 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.fw-bk-list li{
	display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:14px;align-items:center;
	padding:clamp(12px, 1.8vh, 15px) 0;border-bottom:1px solid var(--line);
	font-size:clamp(14.5px, 1.95vh, 16px);line-height:1.5;color:var(--g7);
	transition:background .25s, padding .3s var(--ease)
}
.fw-bk-list li:hover{padding-left:6px;background:linear-gradient(90deg, var(--ac-t), transparent 60%)}
.fw-bk-list__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ac-l);color:var(--ac-ink);font-size:17px}
.fw-bk-list--bring .fw-bk-list__ico{background:var(--bl-l);color:var(--bl-ink)}
.fw-bk-list--bring li:hover{background:linear-gradient(90deg, var(--bl-t), transparent 60%)}
.fw-bk-fit__note{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--g5)}

/* ══════════════════════════════════════════════════════════════
   04 · §4 HOW IT WORKS — the timeline
   ══════════════════════════════════════════════════════════════ */

.fw-bk-tl{--node:clamp(52px, 7vh, 62px);overflow:hidden}
.fw-bk-tl__rail{position:relative;z-index:1}
.fw-bk-tl__track{
	display:flex;margin:0;padding:14px var(--pad) 4px;list-style:none;
	overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none
}
.fw-bk-tl__track::-webkit-scrollbar{display:none}
.fw-bk-tl__stop{
	position:relative;flex:1 1 0;min-width:220px;
	display:flex;flex-direction:column;align-items:flex-start;
	padding-right:clamp(18px, 2.4vw, 40px);scroll-snap-align:start
}
.fw-bk-tl__stop::before{
	content:'';position:absolute;z-index:0;
	top:calc(var(--node) / 2 - 1px);left:calc(var(--node) / 2);right:calc(var(--node) / -2);
	height:2px;border-radius:2px;transform-origin:left center;
	background:linear-gradient(90deg, var(--ac), color-mix(in srgb, var(--ac) 25%, transparent))
}
.fw-bk-tl__stop:last-child::before{display:none}
.fw-bk-tl__node{
	position:relative;z-index:1;flex-shrink:0;display:grid;place-items:center;
	width:var(--node);height:var(--node);border-radius:50%;
	background:linear-gradient(140deg, var(--wh), var(--ac-l));color:var(--ac-ink);font-size:calc(var(--node) * .42);
	box-shadow:0 0 0 1px var(--ac-ring), 0 0 0 7px var(--wh), 0 12px 26px -14px var(--ink-a40);
	transition:background .3s, color .3s, transform .4s var(--ease-pop)
}
.fw-bk-tl__stop:hover .fw-bk-tl__node{transform:translateY(-4px) scale(1.06)}
.fw-bk-tl__stop:last-child .fw-bk-tl__node{background:linear-gradient(140deg, var(--pk), var(--pk-dd));color:var(--wh);box-shadow:0 0 0 7px var(--wh), var(--pk-glow)}
.fw-bk-tl__stop:last-child .fw-bk-tl__node::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1.5px solid var(--pk-ring);opacity:0}
.fw-bk-tl__body{display:flex;flex-direction:column;min-width:0}
.fw-bk-tl__num{margin-top:clamp(12px, 1.8vh, 18px);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-ink)}
.fw-bk-tl__name{margin:5px 0 0;font-family:var(--ff);font-size:clamp(16px, 2.3vh, 19px);font-weight:600;line-height:1.25;letter-spacing:-.02em;color:var(--ink)}
.fw-bk-tl__txt{margin:7px 0 0;font-size:clamp(13.5px, 1.8vh, 14.5px);line-height:1.6;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   05 · §5 QUESTIONS
   ══════════════════════════════════════════════════════════════ */

.fw-bk-faq{background:linear-gradient(180deg, var(--paper-p2), var(--wh))}
.fw-bk-faq__cols{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:clamp(28px, 4vw, 88px);align-items:start}
.fw-bk-faq__list{border-top:1px solid var(--line);min-width:0}
.fw-bk-faq__item{position:relative;border-bottom:1px solid var(--line);transition:background .3s}
.fw-bk-faq__item[open]{background:linear-gradient(90deg, var(--ac-t), transparent 70%)}
.fw-bk-faq__item::before{
	content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;border-radius:2px;background:var(--ac);
	transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)
}
.fw-bk-faq__item[open]::before{transform:scaleY(1)}
.fw-bk-faq__q{
	display:grid;grid-template-columns:34px minmax(0, 1fr) 32px;align-items:center;column-gap:var(--s3);
	padding:clamp(16px, 2.2vh, 20px) 0 clamp(16px, 2.2vh, 20px) var(--s4);
	cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent
}
.fw-bk-faq__q::-webkit-details-marker{display:none}
.fw-bk-faq__q::marker{content:''}
.fw-bk-faq__n{font-size:11px;font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--g5);transition:color .25s}
.fw-bk-faq__q-txt{font-size:clamp(15px, 2vh, 17px);font-weight:600;line-height:1.4;letter-spacing:-.016em;color:var(--ink);text-wrap:pretty;transition:color .25s}
.fw-bk-faq__q:hover .fw-bk-faq__q-txt{color:var(--ac-ink)}
.fw-bk-faq__item[open] .fw-bk-faq__n{color:var(--ac-ink)}
.fw-bk-faq__q-ico{position:relative;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);transition:background .3s, box-shadow .3s, transform .4s var(--ease)}
.fw-bk-faq__q-ico::before,
.fw-bk-faq__q-ico::after{content:'';position:absolute;left:50%;top:50%;background:var(--g5);border-radius:2px;transition:transform .4s var(--ease), background .3s}
.fw-bk-faq__q-ico::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.fw-bk-faq__q-ico::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.fw-bk-faq__q:hover .fw-bk-faq__q-ico{box-shadow:inset 0 0 0 1px var(--ac-ring)}
.fw-bk-faq__item[open] .fw-bk-faq__q-ico{background:var(--ac-dd);box-shadow:none;transform:rotate(180deg)}
.fw-bk-faq__item[open] .fw-bk-faq__q-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.fw-bk-faq__item[open] .fw-bk-faq__q-ico::before{background:var(--wh)}
.fw-bk-faq__a{padding:0 calc(32px + var(--s3)) clamp(18px, 2.4vh, 24px) calc(var(--s4) + 34px + var(--s3))}
.fw-bk-faq__a p{margin:0;font-size:clamp(14px, 1.9vh, 15.5px);line-height:1.72;color:var(--g6);text-wrap:pretty}

/* ══════════════════════════════════════════════════════════════
   06 · §6 OTHER WAYS WE CAN HELP
   ══════════════════════════════════════════════════════════════ */

.fw-bk-more__grid{
	display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
	margin:0;padding:0;list-style:none;border-top:1px solid var(--line)
}
.fw-bk-more__grid li{position:relative;border-bottom:1px solid var(--line);min-width:0}
.fw-bk-more__grid li + li::before{content:'';position:absolute;left:0;top:16%;bottom:16%;width:1px;background:var(--line)}
.fw-bk-more__grid a{
	position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:start;column-gap:14px;
	height:100%;padding:clamp(18px, 2.8vh, 26px) clamp(14px, 1.6vw, 24px);color:inherit;
	transition:background .3s;-webkit-tap-highlight-color:transparent
}
.fw-bk-more__grid a::after{
	content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ac);
	transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)
}
.fw-bk-more__grid li:first-child a{padding-left:0}
.fw-bk-more__grid a:hover{background:linear-gradient(180deg, transparent, var(--ac-t))}
.fw-bk-more__grid a:hover::after{transform:scaleX(1)}
.fw-bk-more__ico{
	display:grid;place-items:center;width:48px;height:48px;border-radius:16px;
	background:linear-gradient(140deg, var(--ac-l2), var(--wh));box-shadow:inset 0 0 0 1px var(--ac-ring);
	color:var(--ac-ink);font-size:22px;transition:transform .45s var(--ease-pop), background .3s, color .3s
}
.fw-bk-more__grid a:hover .fw-bk-more__ico{transform:translateY(-3px) rotate(-6deg);background:var(--ac-dd);color:var(--wh)}
.fw-bk-more__t{display:flex;flex-direction:column;gap:4px;min-width:0}
.fw-bk-more__t b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.fw-bk-more__t small{font-size:13.5px;line-height:1.55;color:var(--g6)}
.fw-bk-more__grid a > i{margin-top:4px;font-size:13px;color:var(--g4);transition:transform .3s var(--ease), color .25s}
.fw-bk-more__grid a:hover > i{color:var(--ac-ink);transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════════
   07 · §7 CLOSING — bright, every way in
   ══════════════════════════════════════════════════════════════ */

.fw-bk-close{
	position:relative;overflow:hidden;padding:clamp(48px, 9vh, 100px) 0;
	background:linear-gradient(180deg, var(--paper-p), var(--wh))
}
.fw-bk-close__grid{
	display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(32px, 5.5vw, 110px);align-items:center
}
/* A heart inside a slowly turning brand ring. */
.fw-bk-close__mark{
	position:relative;isolation:isolate;display:grid;place-items:center;
	width:66px;height:66px;margin-bottom:20px;border-radius:50%;
	background:var(--wh);color:var(--pk-d);font-size:28px;box-shadow:0 16px 32px -18px var(--pk-dd)
}
.fw-bk-close__mark::before{
	content:'';position:absolute;inset:-3px;z-index:-1;border-radius:50%;
	background:conic-gradient(from 0deg, var(--pk), var(--ac), var(--bl), var(--pk))
}
.fw-bk-close__mark::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;background:var(--wh)}
.fw-bk-close__title{
	margin:var(--s3) 0 0;font-family:var(--ff);
	font-size:clamp(28px, 5vh, 50px);font-weight:600;line-height:1.06;letter-spacing:-.038em;
	color:var(--ink);text-wrap:balance
}
.fw-bk-close__sub{margin:clamp(12px, 2vh, 18px) 0 clamp(20px, 3.4vh, 30px);font-size:clamp(15px, 2.1vh, 18px);line-height:1.6;color:var(--g6);text-wrap:pretty}
.fw-bk-close__reach{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.fw-bk-close__reach li{position:relative;border-bottom:1px solid var(--line);min-width:0}
.fw-bk-close__reach li:nth-child(2n)::before{content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line)}
.fw-bk-close__reach a{
	display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;column-gap:14px;
	padding:clamp(16px, 2.6vh, 22px) clamp(14px, 1.6vw, 24px);color:inherit;transition:background .25s
}
.fw-bk-close__reach li:nth-child(2n+1) a{padding-left:0}
.fw-bk-close__reach a:hover{background:var(--pk-bg)}
.fw-bk-close__ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--wh);color:var(--pk-ink);font-size:20px;box-shadow:inset 0 0 0 1px var(--pk-ring);transition:transform .45s var(--ease-pop), background .3s, color .3s}
.fw-bk-close__reach a:hover .fw-bk-close__ico{transform:rotate(-8deg) scale(1.06);background:var(--pk-d);color:var(--wh)}
.fw-bk-close__t{display:flex;flex-direction:column;gap:2px;min-width:0}
.fw-bk-close__t small{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--g5)}
.fw-bk-close__t b{font-size:16px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.fw-bk-close__t em{font-size:13px;color:var(--g5)}
.fw-bk-close__reach a > i{font-size:13px;color:var(--g4);transition:transform .3s var(--ease), color .25s}
.fw-bk-close__reach a:hover > i{color:var(--pk);transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════════
   08 · RESPONSIVE — mode switches only
   ══════════════════════════════════════════════════════════════ */

@media(max-width:1280px){
	.fw-bk-figs{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:16px}
	.fw-bk-figs li:nth-child(2n+1){padding-left:0}
	.fw-bk-figs li:nth-child(2n+1)::before{display:none}}

@media(max-width:1180px){
	.fw-bk-more__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
	.fw-bk-more__grid li:nth-child(2n+1)::before{display:none}
	.fw-bk-more__grid li:nth-child(2n+1) a{padding-left:0}
	.fw-bk-more__grid li:nth-child(2n) a{padding-left:clamp(14px, 1.6vw, 24px)}}

@media(max-width:1024px){
	.fw-bk-page{--pad:14px;--sec:clamp(40px, 9vw, 64px)}

	.fw-bk-cover__grid,
	.fw-bk-about__grid,
	.fw-bk-fit__grid,
	.fw-bk-close__grid,
	.fw-bk-head{grid-template-columns:minmax(0, 1fr);row-gap:clamp(20px, 5vw, 32px)}
	.fw-bk-figs{grid-template-columns:repeat(4, minmax(0, 1fr))}
	.fw-bk-figs li:nth-child(2n+1){padding-left:clamp(10px, 1.2vw, 18px)}
	.fw-bk-figs li:first-child{padding-left:0}
	.fw-bk-figs li:nth-child(2n+1):not(:first-child)::before{display:block}
	.fw-bk-title{font-size:clamp(32px, 7.4vw, 50px)}
	.fw-bk-lede{font-size:clamp(15px, 3.6vw, 17.5px)}
	.fw-bk-h2{font-size:clamp(25px, 5.4vw, 36px)}
	.fw-bk-h3{font-size:clamp(21px, 4.6vw, 28px)}
	.fw-bk-lead{font-size:clamp(15px, 3.4vw, 17px)}
	.fw-bk-about__text p{font-size:clamp(15px, 3.5vw, 16.5px)}
	.fw-bk-about__text p.fw-bk-about__lead{font-size:clamp(17px, 4vw, 19.5px)}
	.fw-bk-about__fig{max-height:none;border-radius:20px}
	.fw-bk-fit__col--bring{margin-top:clamp(12px, 4vw, 24px)}
	.fw-bk-faq__cols{grid-template-columns:minmax(0, 1fr)}
	.fw-bk-faq__cols > .fw-bk-faq__list + .fw-bk-faq__list{border-top:0}
	.fw-bk-fx i{filter:blur(56px)}
	.fw-bk-fx i:nth-child(n+2){display:none}}

/* ── THE APP LAYER ──────────────────────────────────────────── */
@media(max-width:768px){
	.fw-crumb.fw-bk-crumb em{display:none}

	/* The switcher bleeds to the screen edge so it swipes like a tab bar. */
	.fw-bk-switch{margin-inline:calc(var(--pad) * -1)}
	.fw-bk-switch ul{padding:2px var(--pad) 6px;scroll-padding-inline:var(--pad)}
	.fw-bk-switch__a{min-height:40px;font-size:13px}

	.fw-bk-gets li{font-size:14.5px}

	/* Figures: 2×2, rules only where they separate something. */
	.fw-bk-figs{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:16px}
	.fw-bk-figs li:nth-child(2n+1){padding-left:0}
	.fw-bk-figs li:nth-child(2n+1)::before{display:none}
	.fw-bk-figs li:nth-child(2n){padding-left:14px}


	/* The form as a sheet: edge to edge, rounded top, a grab handle. */
	.fw-bk-formwrap{
		margin-inline:calc(var(--pad) * -1);padding:26px var(--pad) 20px;
		border-radius:28px 28px 0 0;border-width:1px 0 0;
		box-shadow:0 -26px 48px -32px var(--ink-a45)
	}
	.fw-bk-formwrap::before{content:'';position:absolute;left:50%;top:9px;width:40px;height:4px;border-radius:4px;transform:translateX(-50%);background:var(--g3)}

	.fw-bk-trust{grid-template-columns:minmax(0, 1fr);justify-items:start}
	.fw-bk-trust li{justify-content:flex-start}

	.fw-bk-help{flex-direction:column;align-items:flex-start;gap:10px;padding-right:0}

	/* Timeline: upright, like an order tracker. */
	.fw-bk-tl{--node:48px}
	.fw-bk-tl__track{flex-direction:column;overflow:visible;scroll-snap-type:none;padding:4px var(--pad) 0}
	.fw-bk-tl__stop{flex:0 0 auto;min-width:0;flex-direction:row;align-items:flex-start;gap:16px;padding:0 0 26px}
	.fw-bk-tl__stop:last-child{padding-bottom:0}
	.fw-bk-tl__stop::before{
		top:calc(var(--node) + 8px);bottom:6px;left:calc(var(--node) / 2 - 1px);right:auto;width:2px;height:auto;
		transform-origin:center top;
		background:linear-gradient(180deg, var(--ac), color-mix(in srgb, var(--ac) 25%, transparent))
	}
	.fw-bk-tl__num{margin-top:6px}

	.fw-bk-faq__q{grid-template-columns:26px minmax(0, 1fr) 30px;padding-left:var(--s3);column-gap:10px}
	.fw-bk-faq__q-ico{width:30px;height:30px}
	.fw-bk-faq__a{padding:0 0 16px calc(var(--s3) + 26px + 10px)}

	/* Other ways and every way in: settings-style rows with chevrons. */
	.fw-bk-more__grid,
	.fw-bk-close__reach{grid-template-columns:minmax(0, 1fr)}
	.fw-bk-more__grid li::before,
	.fw-bk-close__reach li::before{display:none}
	.fw-bk-more__grid a,
	.fw-bk-more__grid li:nth-child(2n) a,
	.fw-bk-close__reach a,
	.fw-bk-close__reach li:nth-child(2n+1) a{padding:14px 0;align-items:center}
	.fw-bk-more__grid a > i{margin-top:0}
	.fw-bk-more__t small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
	.fw-bk-close .fw-bk-btn{width:100%;min-height:54px}}

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

@media(prefers-reduced-motion:no-preference){
	/* Ambient: discs drift, rings breathe, the phone rings now and then. */
	.fw-bk-fx i:nth-child(1){animation:fwBkDrift 28s ease-in-out infinite}
	.fw-bk-fx i:nth-child(2){animation:fwBkDrift 34s ease-in-out infinite reverse}
	.fw-bk-kick__ico::after{animation:fwBkPulse 2.8s ease-out infinite}
	.fw-bk-figs__ico::after{animation:fwBkPulse 3.2s ease-out infinite}
	.fw-bk-figs li:nth-child(2) .fw-bk-figs__ico::after{animation-delay:.8s}
	.fw-bk-figs li:nth-child(3) .fw-bk-figs__ico::after{animation-delay:1.6s}
	.fw-bk-figs li:nth-child(4) .fw-bk-figs__ico::after{animation-delay:2.4s}
	.fw-bk-about__badge{animation:fwBkFloat 6s ease-in-out infinite}
	.fw-bk-tl__stop:last-child .fw-bk-tl__node::after{animation:fwBkPulse 2.6s ease-out infinite}
	.fw-bk-close__mark::before{animation:fwBkSpin 9s linear infinite}
	.fw-bk-close__mark .fw-ico{animation:fwBkBeat 2.4s ease-in-out infinite}

	/* The treatments ribbon runs endlessly; a pointer on it pauses it. */
	.fw-bk-help__track{animation:fwBkRibbon 70s linear infinite}
	.fw-bk-help__rail:hover .fw-bk-help__track{animation-play-state:paused}

	/* The cover is the first paint, so it never waits on the script: it
	   rises on load in pure CSS, and its glyphs draw themselves. */
	.fw-bk-cover__copy > *{animation:fwBkRise .9s var(--ease-soft) both}
	.fw-bk-cover__copy > :nth-child(2){animation-delay:.06s}
	.fw-bk-cover__copy > :nth-child(3){animation-delay:.12s}
	.fw-bk-cover__copy > :nth-child(4){animation-delay:.18s}
	.fw-bk-cover__copy > :nth-child(5){animation-delay:.24s}
	.fw-bk-cover__copy > :nth-child(n+6){animation-delay:.3s}
	.fw-bk-formwrap{animation:fwBkRise 1s var(--ease-soft) .15s both}
	.fw-bk-cover .fw-bk-draw > *{stroke-dasharray:130;animation:fwBkDrawIn 1.8s var(--ease-soft) .5s both}

	/* Reveal below the cover: set up only once book.js has run (.fw-bk-anim). */
	.fw-bk-anim [data-bk-reveal]{opacity:0;transform:translate3d(0,30px,0);transition:opacity .9s var(--ease-soft), transform 1s var(--ease-soft)}
	.fw-bk-anim [data-bk-reveal].is-in{opacity:1;transform:none}
	.fw-bk-anim .fw-bk-about__copy[data-bk-reveal],
	.fw-bk-anim .fw-bk-fit__col--bring[data-bk-reveal],
	.fw-bk-anim .fw-bk-close__reach[data-bk-reveal]{transition-delay:.15s}

	/* House glyphs draw their own strokes as their block arrives. */
	.fw-bk-anim [data-bk-reveal] .fw-bk-draw > *{stroke-dasharray:130;stroke-dashoffset:130}
	.fw-bk-anim [data-bk-reveal].is-in .fw-bk-draw > *{animation:fwBkDraw 1.6s var(--ease-soft) .3s forwards}

	/* Lists and tiles arrive one after another. */
	.fw-bk-anim [data-bk-reveal] .fw-bk-list li,
	.fw-bk-anim .fw-bk-more__grid[data-bk-reveal] > li,
	.fw-bk-anim .fw-bk-close__reach[data-bk-reveal] > li{opacity:0;transform:translate3d(0,14px,0);transition:opacity .6s var(--ease-soft), transform .7s var(--ease-soft)}
	.fw-bk-anim [data-bk-reveal].is-in .fw-bk-list li,
	.fw-bk-anim .fw-bk-more__grid.is-in > li,
	.fw-bk-anim .fw-bk-close__reach.is-in > li{opacity:1;transform:none}
	.fw-bk-anim .is-in .fw-bk-list li:nth-child(2),.fw-bk-anim .is-in > li:nth-child(2){transition-delay:.08s}
	.fw-bk-anim .is-in .fw-bk-list li:nth-child(3),.fw-bk-anim .is-in > li:nth-child(3){transition-delay:.16s}
	.fw-bk-anim .is-in .fw-bk-list li:nth-child(4),.fw-bk-anim .is-in > li:nth-child(4){transition-delay:.24s}
	.fw-bk-anim .is-in .fw-bk-list li:nth-child(5),.fw-bk-anim .is-in > li:nth-child(5){transition-delay:.32s}
	.fw-bk-anim .is-in .fw-bk-list li:nth-child(6){transition-delay:.4s}
	.fw-bk-anim .is-in .fw-bk-list li:nth-child(7){transition-delay:.48s}

	/* The timeline: the line runs out from each node, the nodes pop in turn. */
	.fw-bk-anim .fw-bk-tl__rail[data-bk-reveal]{transform:none}
	.fw-bk-anim .fw-bk-tl__rail .fw-bk-tl__stop::before{transform:scaleX(0);transition:transform .9s var(--ease-soft)}
	.fw-bk-anim .fw-bk-tl__rail .fw-bk-tl__node{transform:scale(.4);opacity:0;transition:transform .6s var(--ease-pop), opacity .4s}
	.fw-bk-anim .fw-bk-tl__rail .fw-bk-tl__body{opacity:0;transform:translate3d(0,12px,0);transition:opacity .6s var(--ease-soft), transform .7s var(--ease-soft)}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop::before{transform:none}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__node{transform:none;opacity:1}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__body{opacity:1;transform:none}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(2) > *,
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(1)::before{transition-delay:.35s}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(3) > *,
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(2)::before{transition-delay:.7s}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(4) > *,
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(3)::before{transition-delay:1.05s}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(5) > *,
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:nth-child(4)::before{transition-delay:1.4s}
	.fw-bk-anim .fw-bk-tl__rail.is-in .fw-bk-tl__stop:hover .fw-bk-tl__node{transform:translateY(-4px) scale(1.06);transition-delay:0s}}

/* On a phone the timeline runs downwards, so its line draws downwards. */
@media(prefers-reduced-motion:no-preference) and (max-width:768px){
	.fw-bk-anim .fw-bk-tl__rail .fw-bk-tl__stop::before{transform:scaleY(0)}}

@keyframes fwBkDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(30px,-24px,0) scale(1.1)}}
@keyframes fwBkPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.45);opacity:0}}
@keyframes fwBkFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fwBkSpin{to{transform:rotate(360deg)}}
@keyframes fwBkBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.14)}28%{transform:scale(1)}42%{transform:scale(1.1)}56%{transform:scale(1)}}
@keyframes fwBkDraw{to{stroke-dashoffset:0}}
@keyframes fwBkDrawIn{from{stroke-dashoffset:130}to{stroke-dashoffset:0}}
@keyframes fwBkRise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes fwBkRibbon{to{transform:translateX(-100%)}}

/* With reduced motion the ribbon becomes a plain swipe row. */
@media(prefers-reduced-motion:reduce){
	.fw-bk-page *,
	.fw-bk-page *::before,
	.fw-bk-page *::after{
		animation-duration:.01ms!important;animation-iteration-count:1!important;
		transition-duration:.01ms!important;scroll-behavior:auto!important
	}
	.fw-bk-help__rail{overflow-x:auto;scrollbar-width:none}
	.fw-bk-help__track[aria-hidden="true"]{display:none}
	.fw-bk img.lazy{opacity:1}}

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

@media(hover:none){
	.fw-bk-btn:hover,
	.fw-bk-btn:hover i,
	.fw-bk-switch__a:hover,
	.fw-bk-switch__a:hover .fw-ico,
	.fw-bk-tl__stop:hover .fw-bk-tl__node,
	.fw-bk-about__fig:hover img,
	.fw-bk-more__grid a:hover .fw-bk-more__ico,
	.fw-bk-more__grid a:hover > i,
	.fw-bk-close__reach a:hover .fw-bk-close__ico,
	.fw-bk-close__reach a:hover > i{transform:none}
	.fw-bk-list li:hover{padding-left:0}}

/* core.js scrolls in-page links with scrollIntoView, which honours this. */
.fw-bk [id]{scroll-margin-top:calc(var(--article-top) + 24px)}

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