/* ============================================================ 15 · Work with Agency — the close, with the contact form in it (Fred, 9 Sep 2026, review item DEV 04). Built from Board Specs/ landing-14-get-agency.md for the stamp — scroll-linked position, not animation: the acid type enters shifted and locks into place at the end of travel, dead, no settle — and from the retired contact chapter (16-contact.css, Julian, 2 Sep 2026) for the form: mono uppercase labels, deck type in the inputs, a dashed paper rule under each, the paper chip for Send, acid errors and focus (6.2:1 on ink, §8). Nothing else moves. ============================================================ */ #close-act{height:200vh} /* the chapter: ink ground on every page (the beige landing close and the acid Who We Are inversion are gone with the merge); the body centred above a 72px reserve where the footer bar comes to rest; the top clears the opaque band (§12 #13) */ /* THE CLOSE'S COLOURS are four variables (10 Sep 2026): the stamp, the Send chip's ground and label, and the alert colour (errors, status, focus, caret). The ink recipe below is the default — the landing page, Our POVs and the harness; What We Do and Who We Are override the ground and, where the ground is light, the recipe, keyed on the page hook the assembler stamps on (Maddie's pairings, Julian's picks). The footer bar takes the chapter's ground and type, the way the nav takes each chapter's — see the end of the file. */ #close{--chapter-bg:var(--ink);color:var(--cream); --close-stamp:var(--cream);--close-chip:var(--cream);--close-chip-fg:var(--ink);--close-alert:var(--acid); /* the stamp in cream — the brand book's pairing (was acid until 10 Sep 2026); the alerts stay acid, a UI state the book doesn't cover */ display:grid;grid-template-rows:minmax(0,1fr);overflow:hidden; padding-top:clamp(96px,12svh,160px);padding-bottom:72px} /* the bar rests at the foot; over the lock's last stretch it rises into its reserve as the nav is pushed off the top, both by the js, 1:1 */ #close #site-footer{position:absolute;left:0;right:0;bottom:0;will-change:transform} #close .contact-anchor{height:0} #close .body{align-self:center; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(40px,6vw,120px);align-items:center; padding:0 var(--m) clamp(16px,3.5svh,56px)} /* the stamp: two lines, "Work with" / "Agency.", in the display face and the acid token, sized by the js so the longer line fills the left column (capped by height on short windows). It enters shifted right by the comp's 2.78vw and travels left 1:1 with scroll to the lock. */ /* THE LEAD'S TWO ENDS (Maddie, 10 Sep 2026): the stamp at the top of the form's height, level with its first label, and the subline at the foot, level with Send — the lead stretches to the form's row and its two children sit at its ends (the 26px foot pad is the status slot under the button, so the subline's last line meets the button, not the slot). Phones: one column, the lead is as tall as itself, so the subline simply follows the stamp. */ #close .lead{min-width:0;align-self:stretch;display:flex;flex-direction:column; justify-content:space-between;padding-bottom:26px} #close .stamp{font-family:var(--display);font-weight:900;color:var(--close-stamp); font-size:clamp(56px,8.5vw,130px);line-height:.95;letter-spacing:-.015em; /* the brand book's Aqva tracking (was −2%, 10 Sep 2026) */ white-space:nowrap;will-change:transform;margin:0} #close .stamp .line{display:block} /* phones: the words inside a line are spans of their own, moved one at a time (the js) — inline, so "Work with" stays one line */ #close .stamp .w{display:inline-block} #close .sub{margin-top:clamp(16px,1.8vw,28px); font-size:clamp(18px,1.667vw,24px);line-height:1.25;font-weight:400; max-width:22em} /* body: no tracking, full strength (brand book; was −.02em at .75, 10 Sep 2026) */ /* the form — the retired contact chapter's, unchanged in kind */ #close .form{max-width:600px;width:100%;justify-self:end} #close .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* the error line is ALWAYS in the layout: a slot under every field, so a message appearing shifts nothing (Julian, 2 Sep 2026); the text fades in over 150ms — UI feedback, not scroll motion; off under reduced motion */ #close .field{display:flex;flex-direction:column;margin-bottom:clamp(2px,.8svh,8px)} #close label{font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;opacity:.75;margin-bottom:6px} #close input,#close textarea{ font-family:var(--deck);font-weight:400; font-size:clamp(18px,1.667vw,24px);line-height:1.25; /* body: no tracking (brand book; was −.02em) */ color:inherit;background:transparent;border:0;border-radius:0; /* the chapter's type — ink on the acid close (10 Sep 2026) */ border-bottom:1px dashed currentColor;padding:10px 0;width:100%; caret-color:var(--close-alert)} /* the fields read as body — Regular (brand book, 10 Sep 2026) */ /* the message box grows with its text, not with a drag (Julian, 24 Sep 2026): the resize handle let a visitor stretch the form out of the pinned chapter and shove the footer bar. Now it starts at its old height, grows line by line up to --msg-max, then scrolls inside. Browsers without field-sizing (Firefox) keep the fixed box, scrolling */ #close textarea{--msg-min:clamp(3.6em,13svh,6.5em);--msg-max:clamp(3.6em,26svh,10em); resize:none;overflow-y:auto;height:var(--msg-min);max-height:var(--msg-max)} @supports (field-sizing:content){ #close textarea{field-sizing:content;height:auto;min-height:var(--msg-min)} } #close input:focus-visible,#close textarea:focus-visible{ outline:none;border-bottom:2px solid var(--close-alert);padding-bottom:9px} #close [aria-invalid="true"]{border-bottom-color:var(--close-alert)} #close .err{font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--close-alert);line-height:1.4;min-height:1.4em; margin-top:7px;opacity:1;transition:opacity .15s ease-out} #close .err:empty{opacity:0;transition:none} #close .row{display:flex;flex-direction:column;align-items:flex-start; margin-top:clamp(8px,1vw,16px)} /* Maddie's chip (the comp's Who we are button), rounded — the one button treatment, shared with the two teasers: paper on the ink here, ink type */ #close .send{display:inline-block;cursor:pointer; font-family:var(--mono);font-size:clamp(11px,0.9vw,13px); letter-spacing:.16em;text-transform:uppercase; background:var(--close-chip);color:var(--close-chip-fg);border:0; padding:clamp(11px,1.05vw,15px) clamp(14px,1.4vw,20px); border-radius:clamp(10px,.972vw,16px);line-height:1} #close .send:focus-visible{outline:2px solid var(--close-alert);outline-offset:3px} #close .send[disabled]{opacity:.6;cursor:default} /* high-contrast mode (forced colours, 25 Sep 2026): the chip's shape is its background, which the mode drops — a system border keeps Send reading as a button */ @media(forced-colors:active){ #close .send{border:1px solid ButtonText} } /* the send status has a reserved slot under the button, like the errors */ #close .status{font-family:var(--mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--close-alert);line-height:1.4;min-height:1.4em; margin-top:10px;opacity:1;transition:opacity .15s ease-out} #close .status:empty{opacity:0;transition:none} /* the notice at collection (12 Sep 2026, §9): small body under the status slot, the type at 75% */ #close .notice{margin:clamp(6px,.8vw,12px) 0 0;font-size:13px;line-height:1.45;opacity:.75;max-width:36em} #close .thanks{justify-self:end;max-width:600px;width:100%;align-self:start; font-size:clamp(22px,2.2vw,32px);line-height:1.2;font-weight:400} /* body: no tracking (brand book; was −.02em). align-self:start: the words sit where the first field was; the js gives it the form's height */ #close .thanks:focus-visible{outline:none} /* PHONES (from the contact chapter, Julian, 6 Sep 2026; the stamp from the close's phone treatment): the last chapter is as tall as its content, at least one small screen — not pinned. Pinned, the act (100svh) and the chapter (100lvh) disagreed by the toolbar's height and the bar clipped the Send button as the toolbar moved. In flow, the bar rests at the chapter's foot and the document ends there. The stamp is the desktop's two lines — Work with / Agency. — left-justified, sized by the js so the longer line ends on the right margin at the lock; the three WORDS still arrive one at a time (the js), Work, then with, then Agency. (Julian, 10 Sep 2026: it was one word per line.) The nav's push reads the chapter's top, as before. */ @media(max-width:760px),(pointer:fine) and (max-height:560px){ #close-act{height:auto} /* one screen at 402 × 874 (Fred, 9 Sep 2026): the stamp capped at a fifth of the screen (js), the rhythm tightened and the message box shorter, so the bar is in view when the page ends — a taller chapter left it cut off at the natural stopping point */ #close{position:relative;height:auto;min-height:100svh; padding-top:max(84px,10svh);padding-bottom:calc(72px + 4px)} #close .body{grid-template-columns:1fr;row-gap:clamp(32px,5svh,48px);align-items:start;padding-bottom:8px} #close .stamp .w{will-change:transform} /* the stamp LEFT-JUSTIFIED, then air: the desktop's spacing carried down (Maddie's layout via Julian, 10 Sep 2026) — the subline a clear step below the stamp, the form a clear step below the subline. (The second line stepped .6em right until then.) */ #close .lead{padding-bottom:0} #close .sub{margin-top:clamp(24px,4svh,40px);max-width:30em} #close textarea{--msg-min:clamp(3em,9svh,6.5em);--msg-max:clamp(3em,24svh,10em)} #close .form,#close .thanks{justify-self:stretch;max-width:none} #close .send{min-height:44px;min-width:44px;padding-left:22px;padding-right:22px} /* the §8 tap floor */ } /* reduced motion: the conclusion — the stamp at its lock, the bar in place, the nav left alone, no pin (spec fallback) */ @media(prefers-reduced-motion:reduce),(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){ #close-act{height:auto !important} #close .stamp,#close .stamp span{transform:none !important} #close #site-footer{transform:none !important} #close .err,#close .status{transition:none} } /* a \n in a copy string forces a line break here (Julian, 5 Sep 2026 — copy.js, LINE BREAKS) */ #close .sub,#close .thanks{white-space:pre-line} /* PER PAGE (Julian's picks from Maddie's pairings, 10 Sep 2026), on the assembler's : · What We Do — moss, after the cobalt client partners; the ink recipe holds on it (paper 6.7:1, acid 6.2:1). · Who We Are — acid with black type, after the beige partners: the stamp, fields, chip ground and alerts all ink (14.9:1); the chip's label paper. The nav goes dark over it (15-get-agency.js). THE FOOTER BAR takes the close's ground and type on every page — the nav's twin follows the chapter the way the nav does. */ /* THE BAR'S PRIVACY LINK (Julian, 12 Sep 2026) is set apart from the quote by colour, not an underline: coral on the ink bar (5.3:1); on moss, the Reality's beige — the brand book's named exception (4.7:1); on acid, moss (5.9:1). Coral fails on the last two. */ body[data-page="what-we-do"] #close{--chapter-bg:var(--moss);--foot-link:var(--cream)} /* cream, not beige: beige on moss is 4.13:1, under 4.5 for the 11px link (a11y pass, 25 Sep 2026) */ body[data-page="who-we-are"] #close{--chapter-bg:var(--acid);color:var(--ink); --close-stamp:var(--ink);--close-chip:var(--ink);--close-chip-fg:var(--cream);--close-alert:var(--ink);--foot-link:var(--moss)} #close #site-footer{background:var(--chapter-bg);color:inherit} /* 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){ #close .stamp{font-size:7.5rem!important;line-height:.95!important} #close .sub{font-size:1.5rem!important;line-height:1.3!important} #close label{font-size:.7rem!important;line-height:1.4!important} #close .send{font-size:.8rem!important;line-height:1!important} #close .notice{font-size:.8rem!important;line-height:1.45!important} }