/* ============================================================ 12 · What We Do — the offer. Paper overview chapter (eyebrow, headline, body; a three-service accordion; the scroll hint — the board's design, back 5 Sep 2026) + an 860vh pinned act: one 5760px strip of four chapters translating -4320. Ported from 08_What We Do/agency-whatwedo-offerings_1.html. Spec: Board Specs/landing-11-offerings.md --wwdo-scale is the mobile fit factor (renamed from the prototype's --m, which collides with the margin token). DIVERGENCE (Fred, 10 Sep 2026) — the four chapters' headline and card headline are set at the Problems' weight and leading (600, .9444em) rather than the 500 / 52px the board draws here, so the chapters read in the same voice as Problem 01–03. The size stays at the board's 48/32. Chapter 01's 460px measure went with it; see the notes on those two rules. ============================================================ */ :root{--wwdo-scale:1} /* THE OVERVIEW (Fred, 9 Sep 2026, review item DEV 03 — a scene, not a slide). The board's ink ground back (Julian's 5 Sep colour pass had put it on paper), paper type. LEFT, a 600 column from the site's y150 line: the coral eyebrow, the headline in the deck face at the Problem sections' title treatment (Semibold 72/68 — Forma for titles, the display face only for the big display moments: Fred, 9 Sep 2026), a text slot (the two body paragraphs; or the open service's line), and the three services as compact ruled rows — coral deck numerals, deck titles. RIGHT, a 710 × 720 collage from x730 / y120: three of Maddie's agency cut-outs at 420 tall, overlapping the way the landing's agency scenes do — Wonder (cobalt) back, Movement (coral) beside it, Judgment (gum) in front — each the figure for one service (see the html). A chosen service keeps its figure in colour and CUTS the other two to their paper versions (§4.2 — visibility, no fade). No scroll hint (Fred, 9 Sep 2026). The stage is the 1440×900 board (padding 150/100), scaled and centred by fit(); nothing here moves on scroll. */ #wwdo-intro{--chapter-bg:var(--ink);color:var(--cream)} /* ZOOM (WCAG 1.4.4 Resize Text — the pilot, Julian, 25 Sep 2026). The board is scaled to the window by fit(), which cancels browser zoom: zooming narrows the window in CSS px, the board shrinks by the same factor, and the type never got bigger. So each text size here is max(its board size, a FLOOR in rem ÷ the board scale --s): the floor is 75% of the drawn size in real CSS px, which zoom enlarges. At 100% zoom on any window whose board scale is 0.75 or more (1440 × 800, 1280 × 800, 1920 × 1080, most laptops) the board size wins and nothing changes; zoomed, the floor wins and the text grows. The stage is min-height 900 so grown text lengthens the chapter (fit() sizes the wrap) instead of being cut off. Below 760 the fitMobile() floors take over — see the js. */ #wwdo-intro .stage{width:1440px;min-height:900px;padding:150px 100px 0;box-sizing:border-box} /* the floors are for computers only (--zf, 25 Sep 2026): a phone held sideways or an iPad has no browser zoom to answer, and its short board scale would otherwise trip them */ @media(pointer:fine){#wwdo-intro{--zf:1}} #wwdo-intro .col{width:600px} #wwdo-intro .lede .eyebrow{color:inherit;white-space:nowrap} /* cream on the ink — the brand book's pairing (coral until 10 Sep 2026) */ /* the headline: the landing page's title — the Problem sections' treatment (07-problem-1.css): deck, Semibold, 72/68, -.02em. Forma for titles, the display face only for the big display moments (Fred, 9 Sep 2026; it was display 900 at 60/1.12 for a few hours that day). Three lines on the 600 measure with the 9 Sep line; re-measure if the copy changes. */ #wwdo-intro .lede h1{margin-top:32px; font-family:var(--deck-display);font-weight:500; font-size:max(72px, calc(3.375rem * var(--zf,0) / var(--s,1)));line-height:.9444;letter-spacing:-.02em} /* 72/68; floor 54px (75%) — see ZOOM above */ /* 72px is Forma's Display optical size, not Deck (19 Sep 2026) */ /* no word in the headline or the body is weighted, coloured or paired (Fred, 9 Sep 2026): a coral/acid thread and then a display-face thread between "your business" / "your teams" above and the two body lines below were tried that day and taken out — the chapter's colour is spent on the numerals and the cut-outs. */ /* the text slot: a fixed-height box so the rows beneath never move — the body's two paragraphs (a blank line in the copy — \n\n — starts a new one; a single \n breaks a line, pre-line) at rest, the open service's line when a row is open */ #wwdo-intro .slot{margin-top:36px;min-height:152px} /* the body at the landing page's body-large — the Problems' 28/34 in Deck Medium with their +.015em (Display is cut tighter than Deck at text sizes; Fred, 9 Sep 2026) */ #wwdo-intro .body p,#wwdo-intro .svc-text{max-width:560px;font-size:max(28px, calc(1.3125rem * var(--zf,0) / var(--s,1)));line-height:1.2143; /* 28/34; floor 21px (75%) */ letter-spacing:.015em;font-weight:400;white-space:pre-line;margin:0} /* body Regular (brand book, 10 Sep 2026); the board read as Medium */ #wwdo-intro .body p + p{margin-top:12px} #wwdo-intro .slot.is-svc .body{display:none} #wwdo-intro .slot:not(.is-svc) .svc-text{display:none} /* the rows: a 1px rule in the type colour at 28% above each and below the last, 52px tall, the numeral left and the title beside it. Hover or focus OPENS a row, click PINS it (touch); leaving the list returns to the pinned row, or closes all. Open: the title goes coral. On the desktop the row's own text is not shown (it goes to the slot). */ #wwdo-intro .services{margin-top:28px;width:600px} #wwdo-intro .svc{position:relative;border-top:1px solid color-mix(in srgb, currentColor 28%, transparent)} #wwdo-intro .svc:last-child{border-bottom:1px solid color-mix(in srgb, currentColor 28%, transparent)} #wwdo-intro .svc .hd{display:flex;align-items:baseline;gap:22px; width:100%;min-height:52px;padding:14px 0 8px;background:none;border:0;color:inherit; font:inherit;text-align:left;cursor:pointer} #wwdo-intro .svc .hd:focus-visible{outline:2px solid currentColor;outline-offset:4px} #wwdo-intro .svc .num{font-family:var(--deck);font-weight:500;font-size:max(24px, calc(1.125rem * var(--zf,0) / var(--s,1)));line-height:1; letter-spacing:-.02em;color:inherit;flex:0 0 44px} /* the numeral in the type colour (coral until 10 Sep 2026 — not a brand pairing) */ /* deck, not display — the display face is for the big moments only (Fred, 9 Sep 2026) */ #wwdo-intro .svc .ttl{font-size:max(22px, calc(1.03125rem * var(--zf,0) / var(--s,1)));line-height:1;letter-spacing:-.02em;font-weight:500} /* floor 16.5px (75%) */ #wwdo-intro .svc.is-open .ttl{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:2px} /* the open row: an underline, not a coral cut (10 Sep 2026) */ #wwdo-intro .svc .more{display:none} #wwdo-intro .svc .txt{margin:0 0 20px;max-width:34em;font-size:16px;line-height:1.4;white-space:pre-line;font-weight:400} /* body Regular (brand book) */ /* the collage: a 710 × 720 box; the cut-outs sized by height and placed in % of it so the phone's box scales the same picture */ #wwdo-intro .scene{position:absolute;left:730px;top:120px;width:710px;height:720px;pointer-events:none} #wwdo-intro .cut{position:absolute} #wwdo-intro .cut img{display:block;height:100%;width:auto} #wwdo-intro .cut .off{position:absolute;left:0;top:0;visibility:hidden} #wwdo-intro .c1{left:0;top:4.2%;height:58.3%} /* Wonder — 730 / 150, 420 tall */ #wwdo-intro .c2{left:44.2%;top:0;height:58.3%} /* Movement — 1044 / 120, 420 tall */ #wwdo-intro .c3{left:33.8%;top:44.4%;height:52.8%} /* Judgment — 970 / 440, 380 tall, in front */ /* a chosen service keeps its figure in colour; the other two cut to paper */ #wwdo-intro[data-svc] .cut .on{visibility:hidden} #wwdo-intro[data-svc] .cut .off{visibility:visible} #wwdo-intro[data-svc="1"] .c1 .on,#wwdo-intro[data-svc="2"] .c2 .on,#wwdo-intro[data-svc="3"] .c3 .on{visibility:visible} #wwdo-intro[data-svc="1"] .c1 .off,#wwdo-intro[data-svc="2"] .c2 .off,#wwdo-intro[data-svc="3"] .c3 .off{visibility:hidden} @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #wwdo-intro .svc .more,#wwdo-intro .svc .txt{transition:none} } #wwdo .k,#wwdo-intro .k{font-family:var(--mono);font-size:16px;line-height:14px; letter-spacing:.08em;text-transform:uppercase} #wwdo-intro .k{font-size:max(16px, calc(.75rem * var(--zf,0) / var(--s,1)));line-height:.875} /* floor 12px (75%) — see ZOOM */ #wwdo-act{height:860vh} #wwdo{--chapter-bg:var(--beige)} #wwdo .track{position:absolute;left:0;top:0;will-change:transform} #wwdo .chap{position:absolute;top:0;width:1440px;height:900px;overflow:hidden} #wwdo .chap > *{position:absolute} #wwdo .art{display:block;pointer-events:none} #wwdo .art.cover{object-fit:cover} #wwdo .circle{width:744.5px;height:744.5px;border-radius:50%} /* .num ('01 / 04') removed — it overlapped the eyebrow at y150 (Neena, 27 Aug 2026); see git history to restore */ #wwdo .chap .copy{left:100px;width:499px} /* 600 + .9444em leading: the Problems' headline setting exactly (#p1/#p2/#p3 .copy h2) — the chapters read as the same voice as Problem 01–03, which the 500 weight at 52px leading did not (Fred, 10 Sep 2026). Size stays at the board's 48: the Problems' 72px runs a 738–764px measure, and this column is 499 (art starts at x599), so 72 cannot fit here — see §12. */ #wwdo .chap .copy h2{margin-top:24px;font-size:48px;line-height:.9444em;letter-spacing:-.02em;font-weight:500} /* chapter 01's max-width 460 removed with that change: the window was measured for 48/52 at weight 500 to hold the board's "…and transform / your team…" break, and 600 voids it. The full 499 column buys back the line the heavier weight costs — 01 is the only headline long enough to reach the card, and at 499 it ends y505, 36px clear of the card's y541 (measured in the Archivo fallback, the widest of the three faces; the real Deck cut is narrower) */ /* .copy p (the subline) removed with the sublines (Neena, 27 Aug 2026) */ /* the card is clipped to its own final box and rises into it. Nothing fades, nothing crosses the artwork, and it is invisible until its beat starts. */ #wwdo .chap .cardclip{left:101px;top:541px;width:504px;height:277px; will-change:clip-path;clip-path:inset(100% 0 0 0)} #wwdo .chap .card{position:absolute;left:0;top:0;width:504px;height:277px;background:var(--cream); color:var(--ink);border-radius:20px;overflow:hidden;will-change:transform} #wwdo .chap .card .in{position:absolute;left:46px;top:50%;transform:translateY(-50%);width:453px} /* 600, as the Problems' solution card (#p1/#p2/#p3 .sol h3, which is already this 32/38) — the card was the other half of the weight mismatch (Fred, 10 Sep 2026). The tallest card (01) grows to 258 of the box's 277 in the Archivo fallback, so it still fits */ #wwdo .chap .card h3{margin-top:16px;font-size:32px;line-height:38px;letter-spacing:-.02em;font-weight:500} /* reduced motion on the desktop: no pin, four stacked offerings as scaled boards, cards in place (below 760 the stacked-flow block further down supersedes this — it stacks for both reasons) */ @media(prefers-reduced-motion:reduce) and (min-width:761px) and (not ((pointer:fine) and (max-height:560px))){ #wwdo-intro{height:auto;padding:0;min-height:0} #wwdo-intro .stage{position:relative; transform:scale(var(--wwdo-scale));transform-origin:0 0} #wwdo-intro .introWrap{width:100vw;height:calc(100vw * 900 / 1440);overflow:hidden} #wwdo-act{height:auto !important} #wwdo{position:relative;height:auto;min-height:0;overflow:visible;background:none} #wwdo .stage{position:static;transform:none!important} #wwdo .track{position:static;transform:none!important;display:block} #wwdo .chap{position:relative!important;left:auto!important;width:100vw; height:calc(100vw * 900 / 1440)} #wwdo .chap > .inner,#wwdo .chap > .textlayer{position:absolute;left:0!important;top:0;width:1440px;height:900px; transform:scale(var(--wwdo-scale));transform-origin:0 0} #wwdo .chap .cardclip{clip-path:none!important} #wwdo .chap .card{transform:none!important} } /* the inner is a fixed 1440×900 layer inside each chapter — it makes the mobile scale possible (the prototype referenced it but never had it) */ #wwdo .chap > .inner{position:absolute;left:0;top:0;width:1440px;height:900px} #wwdo .chap > .inner > *{position:absolute} /* the words' layer twins it (Julian, 6 Sep 2026); the JS insets both */ #wwdo .chap > .textlayer{position:absolute;left:0;top:0;width:1440px;height:900px;pointer-events:none} #wwdo .chap > .textlayer > *{position:absolute} /* the chapter is one viewport tall and the frame fits inside it: full-width down to a 16:10 window, height-fit on shorter, wider ones (laptops) — the JS contain fit centres the composition and the chapter grounds fill the gutters (Fred, 28 Aug 2026; supersedes the 62.5vw frame, Julian, 25 Aug 2026) */ /* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */ #wwdo .chap .copy h2,#wwdo .chap .card h3,#wwdo-intro .lede h1{white-space:pre-line} /* ---- mobile (§3 stacked flow; Julian, 6 Sep 2026) ---- THE OVERVIEW is a plain page in flow, left-aligned inside --m: eyebrow, headline, body, then the three-service accordion, then the scroll hint. THE FOUR OFFERINGS are four vertical chapters (the site's own chapter system — the horizontal strip and its pin go, as the card rise does; each card sits in place at its foot): each is a three-row grid — copy at the top, the art centred in what is left, the card at the foot. The art is the chapter's own 1440×900 board, scaled to 130vw and slid so its subject (the circle's centre; the boat for 01) sits mid-band; nothing inside it moved. Type carries the board's height ratios (the mobile type rule), set by fitMobile() in the JS from measured text: the overview headline ≤ 23% of the screen (4 × 52 of 900), the offering headlines ≤ 20% (one size for all four), everything else at its ratio to them with floors. The headlines' forced breaks are hidden here; they wrap in the column. */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ /* -- the overview -- */ /* ONE SCREEN, the same interaction as the desktop (Fred, 9 Sep 2026): eyebrow and headline, the collage (three quarters of the width, centred), the text slot, the three rows — all in view together, so a tap on a row swaps the slot and the figures without leaving the screen. The row's own unfold is gone. Sized to fit 402 × 874 with the type floors; shorter phones scroll. */ #wwdo-intro{height:auto;min-height:0;padding:0} #wwdo-intro .introWrap{width:auto;height:auto;overflow:visible} #wwdo-intro .stage{position:relative;width:auto;height:auto;transform:none!important; min-height:100lvh;display:flex;flex-direction:column; padding:max(96px,11svh) var(--m) max(16px,2svh)} #wwdo-intro .stage > *{position:static} #wwdo-intro .col{display:contents} #wwdo-intro .lede{order:1} #wwdo-intro .scene{order:2;position:relative;left:auto;top:auto;width:66%;height:auto;aspect-ratio:710/720;margin:14px auto 0;pointer-events:none} #wwdo-intro .slot{order:3;min-height:124px;margin-top:12px} #wwdo-intro .services{order:4;width:auto;margin:8px 0 0} #wwdo-intro .lede .eyebrow{font-size:12px;line-height:1} #wwdo-intro .lede h1{margin-top:10px;max-width:none;font-family:var(--deck);font-size:clamp(30px,8.7vw,44px);line-height:1;white-space:normal} /* size: the JS's; the §3 phone headline on the Problems' line-height. font-family: phone size drops under Display's 48px floor — back to Deck (19 Sep 2026) */ #wwdo-intro .lede h1 br{display:none} #wwdo-intro .body p,#wwdo-intro .svc-text{max-width:30em;font-size:17px;line-height:1.35} /* size: the JS's; the §3 phone body, as the Problems' */ #wwdo-intro .body p + p{margin-top:.5em} #wwdo-intro .svc .hd{min-height:44px;padding:12px 0 0;gap:16px} /* min-height: the desktop's row is min-height 52 since the zoom pilot */ #wwdo-intro .svc .num{font-size:clamp(20px,5.5vw,24px);flex-basis:36px} /* size: the JS's */ #wwdo-intro .svc .ttl{font-size:clamp(17px,4.6vw,20px)} /* -- the four offerings -- */ #wwdo-act{height:auto!important} #wwdo{position:relative;height:auto;min-height:0;overflow:visible;background:none} #wwdo .stage{position:static;transform:none!important} #wwdo .track{position:static;transform:none!important;display:block} #wwdo .chap{position:relative!important;left:auto!important;width:100vw;height:100lvh;overflow:hidden; display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:100%; padding:max(96px,11svh) 0 max(20px,3svh)} #wwdo .chap > .textlayer{display:contents} #wwdo .chap .copy{position:relative;grid-area:1/1;left:auto;top:auto!important;width:auto; margin:0 var(--m);z-index:2} #wwdo .chap .copy .k{font-size:12px;line-height:1} #wwdo .chap .copy h2{margin-top:12px;max-width:none;font-size:clamp(26px,7.5vw,34px);line-height:1.1;white-space:normal} /* size: the JS's */ #wwdo .chap > .inner{position:relative;grid-area:2/1;left:auto!important;top:auto; width:1440px;height:900px;justify-self:center;align-self:center; transform:scale(calc(var(--wwdo-scale) * 1.69)) translate(var(--sx),var(--sy))} /* each chapter's pan point centres its own subject on the mobile canvas — not a shared "circle's centre" (that left the bust and the dancer noticeably off-screen-left, since neither sits on the circle's own centre; the log jam only read as centred by luck, being nearly board-width). Circle and art keep their board-fit registration to each other; only where .inner's window sits shifts. 1.3 (giving 1.3*1.3=1.69) is one number for all four (16 Sep 2026): chapter 04 got it first, for its own crop margin (below); giving the other three the same zoom keeps the four chapters — and the 01–03 circle, one size everywhere — reading as one family instead of 04 suddenly looking closer than the rest. --sy is retuned per chapter since it isn't scale-independent the way --sx is (below). */ #wwdo .chap[data-i="0"] > .inner{--sx:-280px;--sy:-125px} /* the boat + blueprints */ #wwdo .chap[data-i="1"] > .inner{--sx:-269px;--sy:-130px} /* the bust */ #wwdo .chap[data-i="2"] > .inner{--sx:-345px;--sy:-130px} /* the dancer */ #wwdo .chap[data-i="3"] > .inner{--sx:-273px;--sy:-140px} /* the hand + log */ #wwdo .chap .cardclip{position:relative;grid-area:3/1;left:auto;top:auto;width:auto;height:auto; margin:16px var(--m) 0;clip-path:none!important;z-index:2} #wwdo .chap .card{position:relative;width:auto;height:auto;border-radius:14px;transform:none!important} #wwdo .chap .card .in{position:static;transform:none;width:auto;padding:16px 18px} #wwdo .chap .card .k{font-size:11px;line-height:1} #wwdo .chap .card h3{width:auto!important;margin-top:8px;font-size:17px;line-height:1.3;white-space:normal} /* size: the JS's */ } /* short phones: a smaller scene */ @media(max-width:760px) and (max-height:760px),(pointer:fine) and (max-height:560px){ #wwdo .chap{padding-top:max(84px,10svh)} #wwdo .chap > .inner{transform:scale(calc(var(--wwdo-scale) * 1.43)) translate(var(--sx),var(--sy))} /* --sy isn't scale-independent the way --sx is: .inner's row is the flexible middle of a 3-row grid (copy / art / card), so its own resolved height — and so its vertical centre in viewport px — moves with the viewport height, not just its width. The short-phone scale (1.43) sits under a shorter row than the tall one (1.69), so every chapter's tall-tuned --sy overshoots here; retuned per chapter for this row (Julian, 16 Sep 2026) */ #wwdo .chap[data-i="0"] > .inner{--sy:-90px} #wwdo .chap[data-i="1"] > .inner{--sy:-95px} #wwdo .chap[data-i="2"] > .inner{--sy:-95px} #wwdo .chap[data-i="3"] > .inner{--sy:-103px} } /* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer at a narrow or short window — where 200% browser zoom lands — this section is in its stacked, still layout, and its type is set at the size the board draws it, in rem, so zoom enlarges it (the phone sizes above are fitted to the screen and would cancel the zoom). !important beats the sizes the js writes inline; utils.js zoomFit() then eases back any line whose longest word would run past the edge. */ @media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #wwdo-intro .lede .eyebrow{font-size:1rem!important;line-height:1.2!important} #wwdo .copy .k, #wwdo .card .k{font-size:1rem!important;line-height:1.3!important} #wwdo .copy h2{font-size:3rem!important;line-height:1.05!important} #wwdo .card h3{font-size:2rem!important;line-height:1.2!important} /* each chapter sizes to its words: the phone layout's one-screen grid cut the card off under enlarged type. The art keeps a row of its own (its board overflows the row, clipped by the chapter, as on a phone) */ #wwdo .chap{height:auto!important;min-height:100lvh;grid-template-rows:auto max(45lvh,62vw) auto!important; padding-bottom:6svh!important} #wwdo-intro .body p,#wwdo-intro .svc-text{font-size:1.75rem!important;line-height:1.3!important} /* the open row's line at the body's size (Julian, 25 Sep 2026) */ }