/* ══════════════════════════════════════════════════════════════
   css/about.css — /about-us  (prefix fw-ab)

   The house rules, all kept: bright grounds only (depth from blurred
   brand discs and tinted whites), no card boxes, no max-width on any
   section or text, colour only from :root, sizes on the 28px / 14px
   gutters. The masthead is the shared .fw-mast band from css/custom.css;
   only its photograph is adjusted here.

   Two layouts, one markup. A desktop reads as a magazine spread; at
   ≤768px the same elements become an app: a pinned segmented bar,
   swipe rows with the next item peeking in, an upright order-tracker
   timeline and settings-style list rows with chevrons.
   ══════════════════════════════════════════════════════════════ */

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

.fw-ab-page{
	--pad:28px;
	--article-top:116px;
	--article-progress:0;

	--ink:var(--dk-d);
	--line:color-mix(in srgb, var(--dk) 9%, transparent);
	--line-soft:color-mix(in srgb, var(--dk) 5.5%, transparent);

	--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;
	--sec:clamp(44px, 8vh, 96px);

	--ease:cubic-bezier(.22,1,.36,1);
	--ease-soft:cubic-bezier(.16,1,.3,1);

	background:var(--wh);
	-webkit-text-size-adjust:100%
}
.fw-ab{display:block;position:relative}

/* Canvas sets a serif on every bare <em>; ours are type, not icons. */
.fw-ab-page em{font-family:var(--ff);font-style:normal}

.fw-ab-jump__inner,
.fw-ab-sec__inner,
.fw-ab-close__inner{
	position:relative;z-index:1;
	width:100%;
	padding-inline:var(--pad)
}

.fw-ab-sec{position:relative;padding:var(--sec) 0}

.fw-ab-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-ab-eyebrow::before{
	content:'';width:14px;height:1.5px;border-radius:2px;background:var(--pk);flex-shrink:0
}

.fw-ab-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-ab-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
}

/* Heading left, the lead right, bottom aligned: the care-area grammar. */
.fw-ab-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, 56px)
}

/* A lead under a heading in a two-column band, where no head grid spaces it. */
.fw-ab-sci__copy .fw-ab-lead,
.fw-ab-where__copy .fw-ab-lead{margin-top:clamp(12px, 2vh, 18px)}

.fw-ab-act{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin-top:clamp(18px, 3vh, 30px)}

.fw-ab-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	min-height:48px;padding:0 24px;
	border-radius:100px;
	font-size:14.5px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
	color:var(--wh);background:var(--pk-d);
	box-shadow:var(--pk-glow);
	transition:background .25s, box-shadow .3s, transform .25s var(--ease);
	-webkit-tap-highlight-color:transparent
}
.fw-ab-btn i{font-size:13px;transition:transform .3s var(--ease)}
.fw-ab-btn:hover{color:var(--wh);background:var(--pk-dd);box-shadow:var(--pk-glow-lg)}
.fw-ab-btn:hover i{transform:translateX(3px)}
.fw-ab-btn:active{transform:scale(.975)}
.fw-ab-btn--ghost{
	color:var(--ink);background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line), 0 8px 20px -14px var(--ink-a40)
}
.fw-ab-btn--ghost:hover{color:var(--pk-ink);background:var(--pk-wash);box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-ab-btn--ghost .bi-telephone{color:var(--pk)}

.fw-ab-txtlink{
	display:inline-flex;align-items:center;gap:7px;
	font-size:14px;font-weight:600;color:var(--bl-d);
	transition:color .25s
}
.fw-ab-txtlink i{font-size:12px;transition:transform .3s var(--ease)}
.fw-ab-txtlink:hover{color:var(--pk-ink)}
.fw-ab-txtlink:hover i{transform:translateX(3px)}

/* Ambient light: solid brand discs under a heavy blur, in a clipped
   layer that is a SIBLING of the content, so nothing can widen the page. */
.fw-ab-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fw-ab-fx i{
	position:absolute;display:block;border-radius:50%;aspect-ratio:1;
	width:clamp(260px, 30vw, 520px);filter:blur(100px);opacity:.11
}
.fw-ab-fx i:first-child{top:-12%;left:-8%;background:var(--pk)}
.fw-ab-fx i:last-child{bottom:-18%;right:-4%;background:var(--bl)}
.fw-ab-fx--tl i:first-child{top:auto;bottom:-20%;left:30%;background:var(--mt)}
.fw-ab-fx--tl i:last-child{bottom:auto;top:-20%;right:6%;background:var(--pk)}
.fw-ab-fx--where i:first-child{background:var(--pu)}
@media(prefers-reduced-motion:no-preference){
	.fw-ab-fx i:first-child{animation:fwAbDrift 28s ease-in-out infinite}
	.fw-ab-fx i:last-child{animation:fwAbDrift 34s ease-in-out infinite reverse}}
@keyframes fwAbDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(34px,-26px,0) scale(1.1)}}

/* House glyphs are stroked outlines; css/custom.css gives the base. */
.fw-ab-page .fw-ico{stroke-width:1.6}

/* The `img.` prefix is load bearing: it out-specifies the theme's
   `img.lazy{max-width:100%}`, and vanilla-lazyload KEEPS .lazy when it
   adds .lazy-loaded. */
.fw-ab img.lazy{opacity:0;transition:opacity .6s var(--ease-soft)}
.fw-ab img.lazy-loaded,
.fw-ab img.lazy-error{opacity:1}

/* ══════════════════════════════════════════════════════════════
   01 · §1 MASTHEAD — the shared band, this page's photograph
   ══════════════════════════════════════════════════════════════ */

/* The photograph loads eagerly (it is the first paint), so it is not
   .lazy and needs the absolute fill the band gives lazy ones. Portrait
   enough to hold the two faces, bound on the band's own height axis. */
.fw-ab-cover{aspect-ratio:4/3.3;max-height:min(64vh, 620px)}
.fw-ab-cover__img{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;object-position:50% 30%
}
.fw-ab-page .fw-mast__cover-ico{color:var(--pk)}
.fw-ab-page .fw-mast__cover-ico .fw-ico{width:46%;height:46%}
.fw-ab-page .fw-mast__stat-ico .fw-ico{width:52%;height:52%}

/* ══════════════════════════════════════════════════════════════
   02 · §2 ON THIS PAGE — pinned rail
   ══════════════════════════════════════════════════════════════ */

.fw-ab-jump{
	position:sticky;top:var(--article-top);z-index:60;
	background:color-mix(in srgb, var(--wh) 90%, transparent);
	backdrop-filter:blur(14px) saturate(180%);
	-webkit-backdrop-filter:blur(14px) saturate(180%);
	border-block:1px solid var(--line-soft)
}
.fw-ab-jump ul{
	display:flex;align-items:stretch;gap:0;
	margin:0;padding:0;list-style:none;
	overflow-x:auto;overflow-y:hidden;
	scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);
	overscroll-behavior-x:contain;
	scrollbar-width:none;-webkit-overflow-scrolling:touch
}
.fw-ab-jump ul::-webkit-scrollbar{display:none}
.fw-ab-jump li{position:relative;flex:0 0 auto;display:flex;scroll-snap-align:start}
.fw-ab-jump li + li::before{
	content:'';position:absolute;left:0;top:24%;bottom:24%;width:1px;
	background:linear-gradient(180deg, transparent, var(--line) 26%, var(--line) 74%, transparent)
}
.fw-ab-jump__link{
	display:flex;align-items:center;gap:9px;white-space:nowrap;
	padding:14px clamp(12px, 1.4vw, 22px);
	border-bottom:2px solid transparent;
	font-size:13px;font-weight:500;letter-spacing:-.005em;color:var(--g6);
	transition:color .25s, border-color .25s, background .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-ab-jump__link .fw-ico{font-size:16px;color:var(--g5);transition:color .25s}
.fw-ab-jump__link:hover{color:var(--bl-d);border-bottom-color:var(--bl);background:var(--bl-bg)}
.fw-ab-jump__link.is-on{color:var(--pk-d);font-weight:600;border-bottom-color:var(--pk)}
.fw-ab-jump__link.is-on .fw-ico,
.fw-ab-jump__link:hover .fw-ico{color:currentColor}

.fw-ab-jump__inner::before,
.fw-ab-jump__inner::after{
	content:'';position:absolute;top:0;bottom:0;z-index:2;
	width:clamp(40px, 5vw, 74px);pointer-events:none;opacity:0;transition:opacity .3s
}
.fw-ab-jump__inner::before{left:var(--pad);background:linear-gradient(90deg, var(--wh) 22%, transparent)}
.fw-ab-jump__inner::after{right:var(--pad);background:linear-gradient(270deg, var(--wh) 22%, transparent)}
.fw-ab-jump.has-rail:not(.at-start) .fw-ab-jump__inner::before{opacity:1}
.fw-ab-jump.has-rail:not(.at-end) .fw-ab-jump__inner::after{opacity:1}

.fw-ab-jump__nav,
.fw-ab-tl__nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:3;
	display:none;align-items:center;justify-content:center;
	width:32px;height:32px;padding:0;border:0;border-radius:50%;
	background:var(--wh);color:var(--g6);cursor:pointer;
	box-shadow:0 4px 14px -5px var(--ink-a40), inset 0 0 0 1px var(--line);
	transition:color .22s, opacity .25s, transform .25s var(--ease)
}
.fw-ab-jump.has-rail .fw-ab-jump__nav{display:flex}
.fw-ab-jump__nav i,
.fw-ab-tl__nav i{font-size:12px;line-height:1}
.fw-ab-jump__nav:hover,
.fw-ab-tl__nav:hover{color:var(--bl-d)}
.fw-ab-jump__nav[disabled],
.fw-ab-tl__nav[disabled]{opacity:0;pointer-events:none}
.fw-ab-jump__nav--prev{left:calc(var(--pad) - 5px)}
.fw-ab-jump__nav--next{right:calc(var(--pad) - 5px)}

/* ══════════════════════════════════════════════════════════════
   03 · §3 OUR STORY
   ══════════════════════════════════════════════════════════════ */

.fw-ab-story{background:linear-gradient(180deg, var(--wh), var(--paper-p2))}
.fw-ab-story__grid{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(32px, 5.5vw, 110px);
	align-items:center
}
.fw-ab-story__fig{
	position:relative;margin:0;
	aspect-ratio:3/3.6;max-height:min(74vh, 720px);
	border-radius:var(--rx);overflow:hidden;background:var(--pk-wash);
	box-shadow:0 34px 70px -40px var(--ink-a40)
}
.fw-ab-story__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;
	object-fit:cover;object-position:50% 40%
}
/* The promise, set on the photograph's foot like a caption on frosted
   glass. It is a line of type on the picture, not a panel beside it. */
.fw-ab-story__promise{
	position:absolute;left:clamp(12px, 1.6vw, 20px);right:clamp(12px, 1.6vw, 20px);bottom:clamp(12px, 1.6vw, 20px);
	display:flex;flex-direction:column;gap:4px;
	padding:clamp(12px, 1.6vh, 16px) clamp(14px, 1.4vw, 18px);
	border-radius:var(--rl);
	background:color-mix(in srgb, var(--wh) 80%, transparent);
	backdrop-filter:blur(12px) saturate(160%);
	-webkit-backdrop-filter:blur(12px) saturate(160%);
	box-shadow:0 14px 30px -18px var(--ink-a40)
}
.fw-ab-story__promise b{
	font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--pk-ink)
}
.fw-ab-story__promise span{
	font-size:clamp(14px, 1.9vh, 16.5px);font-weight:500;line-height:1.4;letter-spacing:-.012em;color:var(--ink)
}
.fw-ab-story__text{
	display:grid;gap:clamp(12px, 2vh, 18px);
	margin-top:clamp(16px, 2.6vh, 26px)
}
.fw-ab-story__text p{
	margin:0;
	font-size:clamp(14.5px, 1.95vh, 16.5px);line-height:1.72;color:var(--g6);text-wrap:pretty
}
.fw-ab-story__text p.fw-ab-story__lead{
	font-size:clamp(16.5px, 2.4vh, 20px);font-weight:400;line-height:1.55;letter-spacing:-.012em;color:var(--g8)
}

/* ══════════════════════════════════════════════════════════════
   04 · §4 WHAT WE BELIEVE
   ══════════════════════════════════════════════════════════════ */

.fw-ab-val{padding-bottom:calc(var(--sec) * .9)}
.fw-ab-val__rail{position:relative}
.fw-ab-val__list{
	display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));
	margin:0;padding:0 var(--pad);list-style:none;
	border-top:1px solid var(--line)
}
.fw-ab-val__item{
	--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-t:var(--pk-t);--ac-l:var(--pk-l);
	position:relative;
	padding:clamp(22px, 3.6vh, 36px) clamp(18px, 2.2vw, 36px) 0;
	min-width:0
}
.fw-ab-val__item:nth-child(4n+2){--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-t:var(--bl-t);--ac-l:var(--bl-l)}
.fw-ab-val__item:nth-child(4n+3){--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-t:var(--mt-t);--ac-l:var(--mt-l)}
.fw-ab-val__item:nth-child(4n+4){--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-t:var(--pu-t);--ac-l:var(--pu-l)}
.fw-ab-val__item:first-child{padding-left:0}
.fw-ab-val__item + .fw-ab-val__item::before{
	content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
	background:linear-gradient(180deg, var(--line), transparent)
}
/* The accent rule on the top hairline, drawn in on hover. */
.fw-ab-val__item::after{
	content:'';position:absolute;top:-1px;left:0;right:0;height:2px;
	background:var(--ac);transform:scaleX(.18);transform-origin:left;
	transition:transform .5s var(--ease)
}
.fw-ab-val__item:first-child::after{left:0}
.fw-ab-val__item:hover::after{transform:scaleX(1)}
.fw-ab-val__ico{
	display:grid;place-items:center;
	width:clamp(44px, 6vh, 54px);height:clamp(44px, 6vh, 54px);border-radius:50%;
	background:var(--ac-l);color:var(--ac-ink);font-size:clamp(20px, 2.8vh, 24px);
	transition:transform .4s var(--ease)
}
.fw-ab-val__item:hover .fw-ab-val__ico{transform:translateY(-3px) rotate(-4deg)}
.fw-ab-val__n{
	display:block;margin-top:clamp(14px, 2.2vh, 20px);
	font-size:10.5px;font-weight:600;letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--ac-ink)
}
.fw-ab-val__t{
	margin:6px 0 0;
	font-family:var(--ff);
	font-size:clamp(18px, 2.6vh, 22px);font-weight:600;line-height:1.2;letter-spacing:-.022em;color:var(--ink)
}
.fw-ab-val__d{
	margin:10px 0 0;
	font-size:clamp(14px, 1.85vh, 15.5px);line-height:1.66;color:var(--g6);text-wrap:pretty
}

/* ══════════════════════════════════════════════════════════════
   05 · §5 HOW WE CARE — the timeline
   Horizontal on a desktop: one stop per step, a line from each node
   to the next, fading from its accent into a hairline. core.js
   [data-rail] brings arrows only when the line outgrows the window.
   ══════════════════════════════════════════════════════════════ */

.fw-ab-tl{
	--node:clamp(48px, 6.6vh, 60px);
	--stop:clamp(220px, calc((100vw - 56px) / 6), 320px);
	overflow:hidden;
	background:linear-gradient(180deg, var(--paper-b2), var(--wh))
}
.fw-ab-tl__rail{position:relative;z-index:1}
.fw-ab-tl__track{
	display:flex;
	margin:0;padding:12px var(--pad) var(--s2);
	list-style:none;
	overflow-x:auto;overscroll-behavior-x:contain;
	scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
	scrollbar-width:none
}
.fw-ab-tl__track::-webkit-scrollbar{display:none}
.fw-ab-tl__rail.has-rail:not(.at-end) .fw-ab-tl__track{
	-webkit-mask-image:linear-gradient(90deg, var(--ink) 88%, transparent);
	        mask-image:linear-gradient(90deg, var(--ink) 88%, transparent)
}
.fw-ab-tl__rail.has-rail.at-end:not(.at-start) .fw-ab-tl__track{
	-webkit-mask-image:linear-gradient(90deg, transparent, var(--ink) 12%);
	        mask-image:linear-gradient(90deg, transparent, var(--ink) 12%)
}
.fw-ab-tl__stop{
	--ac:var(--pk);--ac-ink:var(--pk-ink);--ac-t:var(--pk-t);--ac-ring:var(--pk-ring);
	position:relative;flex:1 0 var(--stop);
	display:flex;flex-direction:column;align-items:flex-start;
	padding-right:clamp(18px, 2vw, 34px);
	scroll-snap-align:start
}
.fw-ab-tl__stop:nth-child(6n+2){--ac:var(--bl);--ac-ink:var(--bl-ink);--ac-t:var(--bl-t);--ac-ring:var(--bl-ring)}
.fw-ab-tl__stop:nth-child(6n+3){--ac:var(--mt);--ac-ink:var(--mt-ink);--ac-t:var(--mt-t);--ac-ring:var(--mt-ring)}
.fw-ab-tl__stop:nth-child(6n+4){--ac:var(--pu);--ac-ink:var(--pu-ink);--ac-t:var(--pu-t);--ac-ring:var(--pu-ring)}
.fw-ab-tl__stop:nth-child(6n+5){--ac:var(--go);--ac-ink:var(--go-ink);--ac-t:var(--go-t);--ac-ring:var(--go-ring)}
.fw-ab-tl__stop:nth-child(6n+6){--ac:var(--co);--ac-ink:var(--co-ink);--ac-t:var(--co-t);--ac-ring:var(--co-ring)}
.fw-ab-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;
	background:linear-gradient(90deg, color-mix(in srgb, var(--ac) 60%, transparent), var(--line))
}
.fw-ab-tl__stop:last-child::before{display:none}
.fw-ab-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:var(--wh);color:var(--ac-ink);font-size:calc(var(--node) * .44);
	box-shadow:0 0 0 1px var(--ac-ring), 0 0 0 6px var(--wh), 0 10px 24px -14px var(--ink-a40);
	transition:background .3s, color .3s, transform .35s var(--ease)
}
.fw-ab-tl__stop:hover .fw-ab-tl__node{background:var(--ac);color:var(--wh);transform:translateY(-3px)}
/* The last stop is where it leads: filled, in the action colour. */
.fw-ab-tl__stop:last-child .fw-ab-tl__node{background:var(--pk-d);color:var(--wh);box-shadow:0 0 0 6px var(--wh), var(--pk-glow)}
.fw-ab-tl__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.fw-ab-tl__num{
	margin-top:clamp(12px, 1.8vh, 18px);
	font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ac-ink)
}
.fw-ab-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-ab-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
}
.fw-ab-tl__more{
	display:inline-flex;align-items:center;gap:6px;
	margin-top:clamp(8px, 1.4vh, 12px);
	font-size:13px;font-weight:600;color:var(--ac-ink)
}
.fw-ab-tl__more i{font-size:11px;transition:transform .3s var(--ease)}
.fw-ab-tl__more:hover{color:var(--ink)}
.fw-ab-tl__more:hover i{transform:translateX(3px)}
.fw-ab-tl__nav{top:calc(var(--node) / 2 + 12px)}
.fw-ab-tl__rail.has-rail .fw-ab-tl__nav{display:flex}
.fw-ab-tl__nav--prev{left:calc(var(--pad) - 6px)}
.fw-ab-tl__nav--next{right:calc(var(--pad) - 6px)}

/* ══════════════════════════════════════════════════════════════
   06 · §6 BEHIND THE SCENES
   ══════════════════════════════════════════════════════════════ */

.fw-ab-sci__grid{
	display:grid;
	grid-template-columns:minmax(0, 6fr) minmax(0, 6fr);
	column-gap:clamp(32px, 5.5vw, 110px);
	align-items:center
}
.fw-ab-sci__list{
	display:grid;gap:0;
	margin:clamp(18px, 3vh, 28px) 0 0;padding:0;list-style:none;
	border-top:1px solid var(--line)
}
.fw-ab-sci__list li{
	display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:14px;align-items:center;
	padding:clamp(12px, 1.9vh, 16px) 0;border-bottom:1px solid var(--line);
	font-size:clamp(14px, 1.9vh, 15.5px);line-height:1.55;color:var(--g7)
}
.fw-ab-sci__ico{
	display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
	background:var(--bl-l);color:var(--bl-ink);font-size:18px
}
.fw-ab-sci__list li:nth-child(2) .fw-ab-sci__ico{background:var(--mt-l);color:var(--mt-ink)}
.fw-ab-sci__list li:nth-child(3) .fw-ab-sci__ico{background:var(--pk-l);color:var(--pk-ink)}
.fw-ab-sci__fig{
	position:relative;margin:0;
	aspect-ratio:4/3;max-height:min(66vh, 640px);
	border-radius:var(--rx);overflow:hidden;background:var(--bl-wash);
	box-shadow:0 34px 70px -40px var(--ink-a40)
}
.fw-ab-sci__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;
	object-fit:cover
}

/* ══════════════════════════════════════════════════════════════
   07 · §7 WHAT WE CARE FOR
   Columns on vertical hairlines on a desktop; settings-style rows on
   a phone. Every row is one link to its care area.
   ══════════════════════════════════════════════════════════════ */

.fw-ab-care{background:linear-gradient(180deg, var(--wh), var(--paper-b2))}
.fw-ab-care__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-ab-care__grid li{position:relative;border-bottom:1px solid var(--line);min-width:0}
.fw-ab-care__grid li:not(:nth-child(4n+1))::before{
	content:'';position:absolute;left:0;top:18%;bottom:18%;width:1px;background:var(--line)
}
.fw-ab-care__grid a{
	display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;column-gap:14px;
	height:100%;padding:clamp(16px, 2.4vh, 22px) clamp(14px, 1.6vw, 24px);
	color:inherit;transition:background .25s;
	-webkit-tap-highlight-color:transparent
}
.fw-ab-care__grid li:nth-child(4n+1) a{padding-left:0}
.fw-ab-care__grid a:hover{background:var(--pk-bg)}
.fw-ab-care__ico{
	display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
	background:var(--wh);color:var(--pk-ink);font-size:20px;
	box-shadow:inset 0 0 0 1px var(--pk-ring), 0 8px 18px -12px var(--ink-a40);
	transition:transform .35s var(--ease)
}
.fw-ab-care__ico img{width:56%!important;height:56%!important;object-fit:contain}
.fw-ab-care__grid a:hover .fw-ab-care__ico{transform:scale(1.06)}
.fw-ab-care__t{display:flex;flex-direction:column;gap:3px;min-width:0}
.fw-ab-care__t b{font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em;color:var(--ink);transition:color .25s}
.fw-ab-care__t small{
	display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
	font-size:13px;line-height:1.5;color:var(--g5)
}
.fw-ab-care__grid a > i{font-size:13px;color:var(--g4);transition:transform .3s var(--ease), color .25s}
.fw-ab-care__grid a:hover b{color:var(--pk-ink)}
.fw-ab-care__grid a:hover > i{color:var(--pk);transform:translateX(3px)}

/* ══════════════════════════════════════════════════════════════
   08 · §8 WHERE WE WORK
   ══════════════════════════════════════════════════════════════ */

.fw-ab-where{overflow:hidden}
.fw-ab-where__grid{
	display:grid;
	grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
	column-gap:clamp(32px, 5.5vw, 110px);
	align-items:center
}
.fw-ab-where__list{
	display:flex;flex-wrap:wrap;gap:10px;
	margin:0;padding:0;list-style:none
}
.fw-ab-where__list li{
	display:inline-flex;align-items:center;gap:10px;
	min-height:46px;padding:6px 16px 6px 7px;border-radius:100px;
	background:var(--wh);
	box-shadow:inset 0 0 0 1px var(--line), 0 8px 18px -14px var(--ink-a40);
	transition:transform .3s var(--ease), box-shadow .3s
}
.fw-ab-where__list li:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--pk-ring), 0 12px 22px -14px var(--ink-a40)}
.fw-ab-where__flag{
	width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0;
	box-shadow:0 0 0 1px var(--ink-a06)
}
.fw-ab-where__flag--none{display:grid;place-items:center;background:var(--bl-l);color:var(--bl-ink);font-size:16px}
.fw-ab-where__list b{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.fw-ab-where__list small{font-size:12px;font-weight:500;color:var(--g5)}

/* ══════════════════════════════════════════════════════════════
   09 · §9 QUESTIONS
   ══════════════════════════════════════════════════════════════ */

.fw-ab-faq{background:linear-gradient(180deg, var(--paper-p2), var(--wh))}
.fw-ab-faq .fw-ab-act{margin-top:clamp(12px, 2vh, 18px)}
.fw-ab-faq__cols{
	display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));
	column-gap:clamp(28px, 4vw, 88px);align-items:start
}
.fw-ab-faq__list{border-top:1px solid var(--line);min-width:0}
.fw-ab-faq__item{position:relative;border-bottom:1px solid var(--line)}
.fw-ab-faq__item::before{
	content:'';position:absolute;left:0;top:-1px;bottom:-1px;width:2px;
	background:var(--pk);border-radius:2px;
	transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)
}
.fw-ab-faq__item[open]::before{transform:scaleY(1)}
.fw-ab-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-ab-faq__q::-webkit-details-marker{display:none}
.fw-ab-faq__q::marker{content:''}
.fw-ab-faq__n{font-size:11px;font-weight:600;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--g5);transition:color .25s}
.fw-ab-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-ab-faq__q:hover .fw-ab-faq__q-txt{color:var(--pk-ink)}
.fw-ab-faq__item[open] .fw-ab-faq__n{color:var(--pk-ink)}
.fw-ab-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}
.fw-ab-faq__q-ico::before,
.fw-ab-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-ab-faq__q-ico::before{width:12px;height:1.5px;transform:translate(-50%,-50%)}
.fw-ab-faq__q-ico::after{width:1.5px;height:12px;transform:translate(-50%,-50%)}
.fw-ab-faq__q:hover .fw-ab-faq__q-ico{box-shadow:inset 0 0 0 1px var(--pk-ring)}
.fw-ab-faq__item[open] .fw-ab-faq__q-ico{background:var(--pk-d);box-shadow:none}
.fw-ab-faq__item[open] .fw-ab-faq__q-ico::after{transform:translate(-50%,-50%) scaleY(0)}
.fw-ab-faq__item[open] .fw-ab-faq__q-ico::before{background:var(--wh)}
.fw-ab-faq__a{padding:0 calc(32px + var(--s3)) clamp(18px, 2.4vh, 24px) calc(var(--s4) + 34px + var(--s3))}
.fw-ab-faq__a p{margin:0;font-size:clamp(14px, 1.9vh, 15.5px);line-height:1.72;color:var(--g6);text-wrap:pretty}
@media(prefers-reduced-motion:no-preference){
	.fw-ab-faq__item[open] .fw-ab-faq__a{animation:fwAbRise .4s var(--ease) both}}
@keyframes fwAbRise{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════════════
   10 · §10 CLOSING — bright, on the photograph's soft side
   The picture fills the band; its left third is soft white blanket,
   and a white wash from that side makes it paper for the words.
   ══════════════════════════════════════════════════════════════ */

.fw-ab-close{
	position:relative;overflow:hidden;
	display:flex;align-items:center;
	min-height:min(55vh, 620px);
	background:var(--paper-p)
}
.fw-ab-close__fig{position:absolute;inset:0;margin:0}
.fw-ab-close__fig img{
	position:absolute;inset:0;
	width:100%!important;height:100%!important;max-width:none!important;
	object-fit:cover;object-position:70% 50%
}
.fw-ab-close__fig::after{
	content:'';position:absolute;inset:0;
	background:linear-gradient(90deg, var(--wh) 8%, color-mix(in srgb, var(--wh) 78%, transparent) 38%, transparent 66%)
}
.fw-ab-close__inner{padding-block:clamp(40px, 8vh, 88px)}
.fw-ab-close__say{width:46%}
.fw-ab-close__title{
	margin:var(--s3) 0 0;
	font-family:var(--ff);
	font-size:clamp(28px, 5.2vh, 52px);font-weight:600;
	line-height:1.06;letter-spacing:-.038em;
	color:var(--ink);text-wrap:balance
}
.fw-ab-close__sub{
	margin:clamp(12px, 2vh, 18px) 0 0;
	font-size:clamp(15px, 2.1vh, 18px);line-height:1.6;color:var(--g7);text-wrap:pretty
}
.fw-ab-close__btns{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:clamp(20px, 3.4vh, 32px)}

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

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

	.fw-ab-val__list{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:clamp(22px, 3vh, 32px)}
	.fw-ab-val__item:nth-child(3){padding-left:0}
	.fw-ab-val__item:nth-child(3)::before{display:none}}

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

	/* One column: heads stack, type returns to the width axis. */
	.fw-ab-head,
	.fw-ab-story__grid,
	.fw-ab-sci__grid,
	.fw-ab-where__grid{grid-template-columns:minmax(0, 1fr);row-gap:clamp(18px, 4vw, 28px)}
	.fw-ab-h2{font-size:clamp(25px, 5.4vw, 36px)}
	.fw-ab-lead{font-size:clamp(15px, 3.4vw, 17px)}
	.fw-ab-story__text p{font-size:clamp(15px, 3.5vw, 16.5px)}
	.fw-ab-story__text p.fw-ab-story__lead{font-size:clamp(17px, 4vw, 19.5px)}

	/* The masthead photograph leads on a phone, as an app's hero does. */
	.fw-ab-mast .fw-mast__side--cover{order:-1}
	.fw-ab-cover{aspect-ratio:4/3;max-height:none;border-radius:20px}

	.fw-ab-story__fig{aspect-ratio:4/4.4;max-height:none;border-radius:20px}
	.fw-ab-sci__fig{order:-1;max-height:none;border-radius:20px}

	.fw-ab-faq__cols{grid-template-columns:minmax(0, 1fr)}
	.fw-ab-faq__cols > .fw-ab-faq__list + .fw-ab-faq__list{border-top:0}

	/* The closing picture sits above the words once there is no side
	   for them to share. */
	.fw-ab-close{display:block;min-height:0;background:var(--wh)}
	.fw-ab-close__fig{position:relative;inset:auto;aspect-ratio:16/10}
	.fw-ab-close__fig::after{background:linear-gradient(180deg, transparent 55%, var(--wh))}
	.fw-ab-close__say{width:100%}
	.fw-ab-close__inner{padding-block:0 clamp(40px, 10vw, 64px);margin-top:-6vw}
	.fw-ab-close__title{font-size:clamp(28px, 7vw, 42px)}
	.fw-ab-close__sub{font-size:clamp(15px, 3.6vw, 17px)}

	.fw-ab-fx i{filter:blur(56px)}
	.fw-ab-fx i:last-child{display:none}}

/* ── THE APP LAYER ──────────────────────────────────────────── */
@media(max-width:768px){
	/* Segmented bar: pill chips on a frosted strip, the current one filled. */
	.fw-ab-jump.has-rail .fw-ab-jump__nav{display:none}
	.fw-ab-jump ul{gap:8px;padding:10px 0}
	.fw-ab-jump li + li::before{display:none}
	.fw-ab-jump__link{
		padding:9px 14px;border:0;border-radius:100px;
		font-size:13px;background:var(--g1)
	}
	.fw-ab-jump__link:hover{background:var(--bl-l);border:0}
	.fw-ab-jump__link.is-on{color:var(--wh);background:var(--pk-d);box-shadow:var(--pk-glow-sm)}
	.fw-ab-jump__link.is-on .fw-ico{color:var(--wh)}

	/* Values: a swipe row, the next promise peeking in from the edge. */
	.fw-ab-val{padding-bottom:calc(var(--sec) * .5)}
	.fw-ab-val__list{
		display:flex;gap:0;
		padding:0 var(--pad);border-top:0;
		overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
		overscroll-behavior-x:contain;scrollbar-width:none
	}
	.fw-ab-val__list::-webkit-scrollbar{display:none}
	.fw-ab-val__item,
	.fw-ab-val__item:first-child,
	.fw-ab-val__item:nth-child(3){
		flex:0 0 78%;scroll-snap-align:start;
		padding:20px 18px 4px;border-top:1px solid var(--line)
	}
	.fw-ab-val__item:first-child{padding-left:0}
	.fw-ab-val__item:nth-child(3)::before{display:block}
	.fw-ab-val__item::after{transform:scaleX(.3)}

	/* Timeline: upright, like an order tracker. A line down the node
	   column, each step's words beside its node. */
	.fw-ab-tl{--node:46px}
	.fw-ab-tl__rail.has-rail .fw-ab-tl__nav{display:none}
	.fw-ab-tl__track{
		flex-direction:column;overflow:visible;scroll-snap-type:none;
		padding:4px var(--pad) 0;
		-webkit-mask-image:none!important;mask-image:none!important
	}
	.fw-ab-tl__stop{
		flex:0 0 auto;flex-direction:row;align-items:flex-start;gap:16px;
		padding:0 0 26px
	}
	.fw-ab-tl__stop::before{
		top:calc(var(--node) + 6px);bottom:4px;left:calc(var(--node) / 2 - 1px);right:auto;
		width:2px;height:auto;
		background:linear-gradient(180deg, color-mix(in srgb, var(--ac) 60%, transparent), var(--line))
	}
	.fw-ab-tl__num{margin-top:4px}

	/* Care areas: settings-style rows, icon well, name, chevron. */
	.fw-ab-care__grid{grid-template-columns:minmax(0, 1fr);border-top:0}
	.fw-ab-care__grid li::before,
	.fw-ab-care__grid li:not(:nth-child(4n+1))::before{display:none}
	.fw-ab-care__grid li:first-child{border-top:1px solid var(--line)}
	.fw-ab-care__grid a,
	.fw-ab-care__grid li:nth-child(4n+1) a,
	.fw-ab-care__grid li:nth-child(2n+1) a{padding:14px 0}
	.fw-ab-care__grid a:active{background:var(--pk-bg)}

	/* Countries: one swipe row of chips rather than a tall wrap. */
	.fw-ab-where__list{
		flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
		margin-inline:calc(var(--pad) * -1);padding:4px var(--pad) 10px;
		scroll-snap-type:x proximity;scroll-padding-inline:var(--pad)
	}
	.fw-ab-where__list::-webkit-scrollbar{display:none}
	.fw-ab-where__list li{flex:0 0 auto;scroll-snap-align:start}

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

	/* Full-width actions, thumb height. */
	.fw-ab-act .fw-ab-btn,
	.fw-ab-close__btns .fw-ab-btn{flex:1 1 100%;min-height:52px}}

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

@media(hover:none){
	.fw-ab-btn:hover i,
	.fw-ab-txtlink:hover i,
	.fw-ab-val__item:hover .fw-ab-val__ico,
	.fw-ab-tl__stop:hover .fw-ab-tl__node,
	.fw-ab-care__grid a:hover .fw-ab-care__ico,
	.fw-ab-care__grid a:hover > i,
	.fw-ab-where__list li:hover{transform:none}}

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

/* core.js scrolls in-page links with scrollIntoView, which honours
   scroll-margin-top: the pinned chrome plus the jump rail. */
.fw-ab [id]{scroll-margin-top:calc(var(--article-top) + 70px)}

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