/* === The Wood Factory page — "ONE BOARD" ===================================
   Loaded by I_factory.html and ar/I_factory.html only. Nothing here is used
   by any other page, so it is a separate file rather than more weight in
   custom.css, which every page pays for. See docs/plans/wood-factory.md.

   Two rooms, in this order:
     1. THE THEATRE  — hero, material, and the four acts. These sections are
        transparent; behind them a single fixed WebGL canvas holds one object
        that never unloads. The object is 56 slats, rearranged.
     2. THE OFFICE   — the line, the proof, the range, the call. Opaque
        surfaces in the drawing language the rest of the site already uses.

   The theatre is an enhancement. With no WebGL, no ES modules, or reduced
   motion, the canvas never appears and each act falls back to a drawn plan.
   Nothing here gates content: every word is in the DOM and visible. */

/* -- 0. tokens -------------------------------------------------------------
   Everything is fluid. The company works on iMacs: 2240x1260 CSS px on the
   24", 2560x1440 on the 27" and the Studio Display. The site's 1320px
   container leaves 620px of dead gutter each side at 2560 -- the exact
   complaint this page exists to answer. So the container tracks the viewport
   up to 1760px, and every type step is clamped against vw rather than fixed.

   Note the other half of that screen: only ~1260-1440px of HEIGHT. No act
   may assume more vertical room than that, which is why the stage is sized
   in svh and the act copy is capped, never centred in a 100vh box it
   overflows. */
.wf{
	--wf-void:#07090c;        /* the theatre: deeper than the site dark, so the  */
	--wf-dark:#0c0e12;        /* lit timber has somewhere to go                  */
	--wf-stone:#f4f1ea;
	--wf-ink:#2a2a2a;
	--wf-ink-2:#6b6b6b;
	--wf-green:#bbd636;
	/* The brand green is a light, high-luminance green. It reads on black and
	   it does not read on white: 3.95:1 for the card links and 3.42:1 for the
	   eyebrow on stone, both under the 4.5 those sizes need. This is the same
	   hue taken down until it passes, and it is used wherever green meets a
	   light surface. */
	--wf-green-ink:#5a7008;
	--wf-line:rgba(255,255,255,.13);
	--wf-line-ink:rgba(42,42,42,.14);
	--wf-on-dark:#c7cacd;

	--wf-gut:clamp(20px, 4vw, 72px);
	--wf-wrap:min(100% - (var(--wf-gut) * 2), 1760px);
	--wf-col:clamp(290px, 25vw, 440px);   /* the act's copy column */

	--wf-t-eyebrow:clamp(11px, 0.18vw + 9px, 14px);
	--wf-t-h1:clamp(40px, 7.2vw, 150px);
	--wf-t-h2:clamp(28px, 2.4vw + 10px, 64px);
	--wf-t-h3:clamp(25px, 1.6vw, 46px);
	--wf-t-body:clamp(15px, 0.42vw + 9px, 20px);
	--wf-t-num:clamp(38px, 4vw, 92px);

	--wf-pad:clamp(72px, 7vw, 160px);
}
.wf .wf-wrap{width:var(--wf-wrap);margin-inline:auto;position:relative}

/* The theme insets .main and paints it white. Both have to go or the theatre
   reads as a white page with dark boxes cut out of it. */
.main.wf{padding:0;margin:0;background:var(--wf-void);overflow-x:clip}

/* -- 1. the stage ----------------------------------------------------------
   One canvas, fixed, behind everything. Fixed rather than pinned on purpose:
   a pin rewrites layout and fights native scroll, and the research is blunt
   that you get one pin per page at most. Fixed costs nothing, never reflows,
   and gives the same "the object stays while the page moves" reading.

   It is decoration. Every fact it shows is also written in the DOM beside
   it, so it is aria-hidden and never focusable. */
.wf-stage{position:fixed;inset:0;z-index:0;pointer-events:none;
	opacity:0;transition:opacity .6s ease}
.wf-stage.is-live{opacity:1}
.wf-stage.is-off{opacity:0}
.wf-stage[hidden]{display:none!important}
.wf-stage canvas{display:block;width:100%;height:100%}

/* The shaft of light the dust hangs in, and a vignette to seat the object in
   the room. Drawn here rather than in GL: a volumetric cone would cost more
   than the whole rest of the scene and look no better behind the grain. */
.wf-stage-light{position:absolute;inset:0;pointer-events:none;
	background:
		radial-gradient(62% 48% at 50% 34%, rgba(255,226,180,.09), transparent 70%),
		radial-gradient(120% 90% at 50% 50%, transparent 38%, rgba(0,0,0,.62) 100%)}

.wf-page{position:relative;z-index:1}

/* -- 2. shared section furniture ------------------------------------------ */
.wf .wf-sec{position:relative;padding:var(--wf-pad) 0;border:0;margin:0}
.wf .wf-void-sec{background:transparent}
.wf .wf-dark-sec{background:var(--wf-dark)}
.wf .wf-stone-sec{background:var(--wf-stone)}

.wf .wf-eyebrow{font-family:"Poppins",sans-serif;font-size:var(--wf-t-eyebrow);
	font-weight:600;letter-spacing:.18em;text-transform:uppercase;
	color:var(--wf-green);margin:0 0 14px;line-height:1.6}
.wf .wf-stone-sec .wf-eyebrow{color:var(--wf-green-ink)}
/* Arabic is a connected script: tracking breaks the joins, and the uppercase
   transform is meaningless in it. */
[dir="rtl"] .wf .wf-eyebrow{letter-spacing:0;text-transform:none;font-weight:500;
	font-size:clamp(13px,.2vw+11px,16px)}

.wf h2.wf-h2{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:var(--wf-t-h2);line-height:1.18;letter-spacing:-.015em;
	color:#fff;margin:0 0 18px;text-transform:none}
.wf .wf-stone-sec h2.wf-h2{color:var(--wf-ink)}
.wf .wf-h3{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:var(--wf-t-h3);line-height:1.3;color:#fff;margin:0 0 10px;
	text-transform:none}
.wf .wf-stone-sec .wf-h3{color:var(--wf-ink)}

.wf .wf-lede{font-size:var(--wf-t-body);line-height:1.75;color:var(--wf-on-dark);
	max-width:62ch;margin:0}
.wf .wf-stone-sec .wf-lede{color:#595959}
.wf .wf-head{margin-bottom:clamp(40px,3.6vw,72px)}

/* -- 3. the hero -----------------------------------------------------------
   svh, not vh: on mobile the URL bar makes vh taller than the screen, and the
   scroll cue ends up under the chrome. max-height keeps the title from
   drifting apart on a short, wide iMac. */
.wf .wf-hero{min-height:100svh;display:flex;align-items:flex-end;
	padding:calc(var(--wf-pad) + 60px) 0 clamp(40px,4vw,80px)}
.wf .wf-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
	gap:clamp(24px,3vw,64px);align-items:end;width:100%}
/* The breadcrumb doubles as the hero's eyebrow: the page needs one for the
   same reason every other page has one, and a second label above it would be
   two lines of small type saying nearly the same thing. */
.wf .wf-crumb{display:flex;align-items:center;gap:10px;margin:0 0 clamp(16px,1.4vw,28px);
	font-family:"Overpass",sans-serif;font-size:var(--wf-t-eyebrow);font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:#7d838b}
[dir="rtl"] .wf .wf-crumb{letter-spacing:0;text-transform:none;
	font-size:clamp(13px,.2vw+11px,16px);font-weight:500}
.wf .wf-crumb a{color:#7d838b;text-decoration:none;transition:color .2s ease}
.wf .wf-crumb a:hover,.wf .wf-crumb a:focus-visible{color:var(--wf-green)}
.wf .wf-crumb [aria-current]{color:#fff}

.wf h1.wf-h1{font-family:"Poppins",sans-serif;font-weight:600;
	font-size:var(--wf-t-h1);line-height:.96;letter-spacing:-.035em;
	color:#fff;margin:0 0 clamp(18px,1.6vw,32px);text-transform:none}
.wf .wf-h1 em{font-style:normal;color:var(--wf-green)}
.wf .wf-hero-sub{font-size:var(--wf-t-body);line-height:1.7;color:var(--wf-on-dark);
	max-width:46ch;margin:0}

/* The cue is the only thing on the page that loops. It stops the moment the
   visitor does the thing it asks for. */
.wf .wf-cue{display:flex;align-items:center;gap:12px;
	font-family:"Overpass",sans-serif;font-size:12px;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;color:#8b9097;
	white-space:nowrap}
.wf .wf-cue-rule{display:block;width:1px;height:52px;background:var(--wf-line);
	position:relative;overflow:hidden}
.wf .wf-cue-rule::after{content:"";position:absolute;inset-inline:0;top:0;height:18px;
	background:var(--wf-green);animation:wf-cue 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes wf-cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(290%)}}
.wf-scrolled .wf-cue{opacity:0;transition:opacity .4s ease}

/* -- 4. the material ------------------------------------------------------
   A spec card floating in the theatre rather than an opaque band, so the
   board stays visible behind it and the room is never interrupted. */
.wf .wf-material{min-height:100svh;display:flex;align-items:center}
.wf .wf-spec{width:min(100%, 560px);
	background:rgba(7,9,12,.74);backdrop-filter:blur(16px);
	-webkit-backdrop-filter:blur(14px);
	border:1px solid var(--wf-line);padding:clamp(28px,2.4vw,48px)}
@supports not (backdrop-filter:blur(4px)){.wf .wf-spec{background:rgba(7,9,12,.9)}}
.wf .wf-spec-list{list-style:none;margin:clamp(22px,2vw,36px) 0 0;padding:0;
	display:grid;gap:0}
.wf .wf-spec-list li{display:flex;justify-content:space-between;align-items:baseline;
	gap:20px;padding:14px 0;border-top:1px solid var(--wf-line)}
.wf .wf-spec-k{font-size:13px;letter-spacing:.1em;text-transform:uppercase;
	color:#a9aeb5}
[dir="rtl"] .wf .wf-spec-k{letter-spacing:0;text-transform:none;font-size:15px}
.wf .wf-spec-v{font-family:"Overpass",sans-serif;font-weight:700;
	font-size:clamp(15px,.3vw+13px,19px);color:#fff;text-align:end}

/* -- 5. the acts -----------------------------------------------------------
   Four full-height blocks. The copy column alternates side so the eye is not
   parked in one place for four screens, and the camera leans the other way to
   meet it. Each act is taller than the viewport so the transformation has
   room to read as a transformation rather than a cut. */
.wf .wf-act{min-height:130svh;display:flex;align-items:center;
	padding-block:clamp(48px,5vw,96px)}
.wf .wf-act-inner{width:var(--wf-wrap);margin-inline:auto;display:flex}
.wf .wf-act-a .wf-act-inner{justify-content:flex-start}
.wf .wf-act-b .wf-act-inner{justify-content:flex-end}
/* The rail lives in the right-hand gutter and its current label reaches into
   the page. On the acts whose copy is also right-aligned, that is the same
   strip of screen -- so the copy steps aside for it. */
@media (min-width:992px){.wf .wf-act-b .wf-act-copy{margin-inline-end:clamp(56px,6vw,132px)}}
/* A scrim down the side the copy sits on. The object behind it is timber --
   mid-tone, warm, and moving -- so white text over it cannot be relied on to
   clear 4.5:1 at every scroll position. This guarantees it without putting the
   copy in a box, which is what a box would cost us here. It is drawn only
   where the theatre is live; with no WebGL there is nothing to scrim. */
.wf-gl .wf-act::before{content:"";position:absolute;inset:0;pointer-events:none;
	z-index:0}
.wf-gl .wf-act-a::before{background:linear-gradient(to right,
	rgba(7,9,12,.92) 0%, rgba(7,9,12,.74) 24%, rgba(7,9,12,.3) 42%, transparent 58%)}
.wf-gl .wf-act-b::before{background:linear-gradient(to left,
	rgba(7,9,12,.92) 0%, rgba(7,9,12,.74) 24%, rgba(7,9,12,.3) 42%, transparent 58%)}
/* A gradient has no logical direction, so RTL needs the pair written out. */
[dir="rtl"] .wf-gl .wf-act-a::before{background:linear-gradient(to left,
	rgba(7,9,12,.92) 0%, rgba(7,9,12,.74) 24%, rgba(7,9,12,.3) 42%, transparent 58%)}
[dir="rtl"] .wf-gl .wf-act-b::before{background:linear-gradient(to right,
	rgba(7,9,12,.92) 0%, rgba(7,9,12,.74) 24%, rgba(7,9,12,.3) 42%, transparent 58%)}
.wf .wf-act-inner{position:relative;z-index:1}

.wf .wf-act-copy{width:var(--wf-col);max-width:100%}
.wf .wf-act-k{display:block;font-family:"Overpass",sans-serif;font-weight:800;
	font-size:clamp(44px,3.4vw,74px);line-height:1;color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,.42);margin:0 0 4px}
.wf .wf-act-copy .wf-lede{max-width:none}
.wf .wf-act-points{list-style:none;margin:clamp(20px,1.8vw,32px) 0 0;padding:0}
.wf .wf-act-points li{position:relative;padding:11px 0 11px 22px;
	border-top:1px solid var(--wf-line);font-size:clamp(14px,.26vw+11px,17px);
	line-height:1.6;color:var(--wf-on-dark)}
[dir="rtl"] .wf .wf-act-points li{padding:11px 22px 11px 0}
.wf .wf-act-points li::before{content:"";position:absolute;inset-inline-start:0;
	top:1.15em;width:9px;height:1px;background:var(--wf-green)}

/* The drawn plan. It is the whole picture when there is no WebGL, and a quiet
   annotation beside the real thing when there is. */
.wf .wf-plan{display:block;width:clamp(150px,13vw,230px);height:auto;margin-bottom:22px;
	fill:none;stroke:rgba(255,255,255,.42);stroke-width:1.1;
	stroke-linecap:round;stroke-linejoin:round}
.wf .wf-plan .wf-plan-hi{stroke:var(--wf-green)}
.wf-gl .wf-plan{width:clamp(96px,7vw,132px);stroke:rgba(255,255,255,.26)}
.wf-gl .wf-plan .wf-plan-hi{stroke:rgba(187,214,54,.6)}

/* -- 6. the act rail -------------------------------------------------------
   Four acts is more than a visitor will hold in their head while scrolling,
   and someone who wants cabinets should not have to scroll past three other
   products to find them. The rail says what the four are before you have seen
   any of them, marks where you are, and jumps. It is a real nav list, so it
   is in the tab order and reads as one to a screen reader. */
.wf-rail{position:fixed;z-index:3;inset-inline-end:clamp(14px,1.6vw,34px);
	top:50%;transform:translateY(-50%);
	opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease}
.wf-rail.is-on{opacity:1;visibility:visible}
.wf-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wf-rail a{display:flex;align-items:center;justify-content:flex-end;gap:12px;
	padding:7px 0;text-decoration:none;
	font-family:"Overpass",sans-serif;font-size:11px;font-weight:700;
	letter-spacing:.14em;text-transform:uppercase;color:#6c727a;
	transition:color .25s ease}
[dir="rtl"] .wf-rail a{justify-content:flex-start;letter-spacing:0;
	text-transform:none;font-size:13px}
.wf-rail a:hover,.wf-rail a:focus-visible{color:#fff}
.wf-rail .wf-rail-t{opacity:0;transform:translateX(6px);
	transition:opacity .25s ease,transform .25s ease}
[dir="rtl"] .wf-rail .wf-rail-t{transform:translateX(-6px)}
.wf-rail a:hover .wf-rail-t,.wf-rail a:focus-visible .wf-rail-t,
.wf-rail li.is-on .wf-rail-t{opacity:1;transform:none}
.wf-rail .wf-rail-b{display:block;width:26px;height:2px;background:#3a3f46;
	flex:none;transition:background .25s ease,width .25s ease}
.wf-rail li.is-on a{color:#fff}
.wf-rail li.is-on .wf-rail-b{background:var(--wf-green);width:44px}
.wf-rail a:focus-visible{outline:2px solid var(--wf-green);outline-offset:4px}

/* -- 7. the line ----------------------------------------------------------
   Leaving the theatre. From here down the page is the drawing office: opaque
   surfaces, line-work, no 3D. Six steps; at 1500px and up they run as one
   rail across the page, which is what finally uses an iMac's width for
   something other than margin. */
.wf .wf-steps{display:grid;gap:1px;background:var(--wf-line);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.wf .wf-step{background:var(--wf-dark);padding:clamp(24px,1.8vw,38px)}
.wf .wf-step-k{display:block;font-family:"Overpass",sans-serif;font-weight:700;
	font-size:12px;letter-spacing:.14em;color:var(--wf-green);margin-bottom:18px}
[dir="rtl"] .wf .wf-step-k{letter-spacing:.04em}
.wf .wf-step p{font-size:clamp(13px,.2vw+11px,16px);line-height:1.7;
	color:#9aa0a7;margin:0}
.wf svg.wf-ico{display:block;width:clamp(38px,2.6vw,52px);height:auto;
	margin-bottom:20px;fill:none;stroke:#fff;stroke-width:1.2;
	stroke-linecap:round;stroke-linejoin:round}
.wf svg.wf-ico path,.wf svg.wf-ico line,.wf svg.wf-ico circle,
.wf svg.wf-ico rect,.wf svg.wf-ico polyline{
	stroke-dasharray:var(--l,200);stroke-dashoffset:0}
.wf-anim .wf-step svg.wf-ico path,.wf-anim .wf-step svg.wf-ico line,
.wf-anim .wf-step svg.wf-ico circle,.wf-anim .wf-step svg.wf-ico rect,
.wf-anim .wf-step svg.wf-ico polyline{
	stroke-dashoffset:var(--l,200);transition:stroke-dashoffset .9s ease}
.wf-anim .wf-step.is-in svg.wf-ico path,.wf-anim .wf-step.is-in svg.wf-ico line,
.wf-anim .wf-step.is-in svg.wf-ico circle,.wf-anim .wf-step.is-in svg.wf-ico rect,
.wf-anim .wf-step.is-in svg.wf-ico polyline{stroke-dashoffset:0}

/* -- 8. the proof ---------------------------------------------------------
   No invented figures. A contractor's site that carries numbers nobody can
   source is worse than one that carries none, and we have no verified plant
   data. These are claims the company can stand behind as written. */
.wf .wf-proof{display:grid;gap:1px;background:var(--wf-line-ink);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.wf .wf-proof-cell{background:var(--wf-stone);padding:clamp(28px,2.2vw,46px)}
.wf .wf-proof-cell:nth-child(2){background:#efeade}
.wf .wf-proof-cell p{font-size:clamp(14px,.24vw+11px,17px);line-height:1.75;
	color:#595959;margin:0}
.wf .wf-proof-n{display:block;font-family:"Overpass",sans-serif;font-weight:900;
	font-size:var(--wf-t-num);line-height:1;letter-spacing:-.025em;
	color:var(--wf-ink);margin:0 0 4px}
.wf .wf-proof-n small{font-size:.42em;font-weight:700;letter-spacing:0;
	margin-inline-start:.15em}

/* -- 9. the range ---------------------------------------------------------
   The four products once more, this time as four ways in. Everything above
   was a story; this is the part a quantity surveyor scrolls to. */
.wf .wf-range{display:grid;gap:1px;background:var(--wf-line-ink);
	grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.wf .wf-card{background:#fff;padding:clamp(28px,2.2vw,48px);
	display:flex;flex-direction:column;text-decoration:none;
	transition:background .3s ease}
.wf .wf-card:hover,.wf .wf-card:focus-visible{background:var(--wf-stone)}
.wf .wf-card:focus-visible{outline:2px solid var(--wf-green-ink);outline-offset:-2px}
.wf .wf-card .wf-plan{stroke:rgba(42,42,42,.4);width:clamp(120px,9vw,164px);
	margin-bottom:clamp(22px,2vw,36px)}
.wf .wf-card .wf-plan .wf-plan-hi{stroke:var(--wf-green-ink)}
.wf .wf-card h3{color:var(--wf-ink);margin-bottom:10px}
.wf .wf-card p{font-size:clamp(14px,.22vw+11px,16px);line-height:1.7;
	color:#6b6b6b;margin:0 0 clamp(20px,1.6vw,30px)}
.wf .wf-card-go{margin-top:auto;display:inline-flex;align-items:center;gap:10px;
	font-family:"Overpass",sans-serif;font-weight:700;font-size:12px;
	letter-spacing:.14em;text-transform:uppercase;color:var(--wf-green-ink)}
[dir="rtl"] .wf .wf-card-go{letter-spacing:0;text-transform:none;font-size:14px}
.wf .wf-card-go svg{width:18px;height:18px;fill:none;stroke:currentColor;
	stroke-width:1.6;transition:transform .25s ease}
[dir="rtl"] .wf .wf-card-go svg{transform:scaleX(-1)}
.wf .wf-card:hover .wf-card-go svg{transform:translateX(5px)}
[dir="rtl"] .wf .wf-card:hover .wf-card-go svg{transform:scaleX(-1) translateX(5px)}

/* -- 10. the call ---------------------------------------------------------- */
.wf .wf-cta{text-align:center}
.wf .wf-cta .wf-h2{margin-inline:auto;max-width:18ch}
.wf .wf-cta .wf-lede{margin-inline:auto;text-align:center}
.wf .wf-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
	margin-top:clamp(28px,2.4vw,48px)}
.wf .wf-btn{display:inline-flex;align-items:center;justify-content:center;
	min-height:52px;padding:0 clamp(26px,2vw,44px);
	font-family:"Poppins",sans-serif;font-weight:600;
	font-size:clamp(13px,.18vw+11px,16px);letter-spacing:.06em;
	text-transform:uppercase;text-decoration:none;border-radius:2px;
	border:1.5px solid var(--wf-green);background:var(--wf-green);
	color:#14180a;transition:background .25s ease,color .25s ease}
[dir="rtl"] .wf .wf-btn{letter-spacing:0;text-transform:none}
.wf .wf-btn:hover,.wf .wf-btn:focus-visible{background:transparent;color:var(--wf-green)}
.wf .wf-btn-ghost{background:transparent;color:#fff;border-color:var(--wf-line)}
.wf .wf-btn-ghost:hover,.wf .wf-btn-ghost:focus-visible{
	background:#fff;color:var(--wf-ink);border-color:#fff}
.wf .wf-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* -- 11. reveals -----------------------------------------------------------
   The class is added by script after first paint, so a visitor whose
   JavaScript never arrives gets the finished page rather than an empty one. */
.wf-anim .wf-rise{opacity:0;transform:translateY(12px);
	transition:opacity .5s ease,transform .5s ease}
.wf-anim .wf-rise.is-in{opacity:1;transform:none}
.wf-anim .wf-stagger > *{opacity:0;transform:translateY(10px);
	/* background is in the list because the cards below carry their own hover
	   transition on it, and a bare transition here would drop it. */
	transition:opacity .45s ease,transform .45s ease,background .3s ease}
.wf-anim .wf-stagger.is-in > *{opacity:1;transform:none}
.wf-anim .wf-stagger.is-in > *:nth-child(2){transition-delay:.06s}
.wf-anim .wf-stagger.is-in > *:nth-child(3){transition-delay:.12s}
.wf-anim .wf-stagger.is-in > *:nth-child(4){transition-delay:.18s}
.wf-anim .wf-stagger.is-in > *:nth-child(5){transition-delay:.24s}
.wf-anim .wf-stagger.is-in > *:nth-child(n+6){transition-delay:.3s}

/* -- 12. narrow screens ---------------------------------------------------
   The theatre survives on a phone, but it stops being the point: the object
   gets the top half of the act and the copy the bottom, so neither is read
   through the other. */
@media (max-width:991px){
	.wf{--wf-col:100%}
	.wf .wf-act{min-height:auto;padding-block:clamp(56px,14vw,110px)}
	.wf .wf-act-inner{display:block}
	.wf .wf-hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}
	.wf .wf-cue{display:none}
	.wf-rail{display:none}
	/* With the acts no longer full-height, the fixed canvas would sit behind
	   a column of text with nothing to look at. The acts get their own window
	   onto it instead. */
	.wf-gl .wf-act-copy{background:rgba(7,9,12,.72);
		backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
		border:1px solid var(--wf-line);padding:26px 22px}
	@supports not (backdrop-filter:blur(4px)){
		.wf-gl .wf-act-copy{background:rgba(7,9,12,.93)}}
	.wf .wf-material{min-height:auto}
	.wf .wf-hero{min-height:92svh}
}

/* -- 13. the very wide screen ---------------------------------------------
   Past 1800px the grids stop adding columns and start adding room, so the
   page grows in cell size rather than in gutter. This is the whole point of
   the exercise: at 2560 nothing here is a 1320px strip in a grey sea. */
@media (min-width:1800px){
	.wf{--wf-pad:clamp(140px,8vw,190px)}
	.wf .wf-steps{grid-template-columns:repeat(6,1fr)}
	.wf .wf-range{grid-template-columns:repeat(4,1fr)}
	.wf .wf-proof{grid-template-columns:repeat(4,1fr)}
}

/* -- 14. reduced motion ---------------------------------------------------
   Everything scroll-linked stops. The scene is still drawn, but only as a
   still per act, set when the act arrives -- see ti-factory.js. Nothing here
   removes content; the page reads identically. */
@media (prefers-reduced-motion:reduce){
	.wf-anim .wf-rise,.wf-anim .wf-stagger > *{opacity:1;transform:none;transition:none}
	.wf-anim .wf-step svg.wf-ico path,.wf-anim .wf-step svg.wf-ico line,
	.wf-anim .wf-step svg.wf-ico circle,.wf-anim .wf-step svg.wf-ico rect,
	.wf-anim .wf-step svg.wf-ico polyline{stroke-dashoffset:0;transition:none}
	.wf .wf-cue-rule::after{animation:none;top:auto;bottom:0}
	.wf .wf-card-go svg,.wf-rail .wf-rail-t,.wf-rail .wf-rail-b{transition:none}
	.wf-stage{transition:none}
}