/* ========================================================================== FOLD DENSITY — the 15-inch reference composition on shorter laptop screens Added 2026-10-08. Linked LAST in the of every live page. UNDO: delete the one line that loads this file. WHY The site was composed on the owner's 15" MacBook Pro (1680×1050 screen, Chrome window 1680×956 with the bookmarks bar → a 1680×840 viewport). There the hero, its client rail and the first sliver of the next section fill the screen exactly as approved. Almost every size on the site follows the window's WIDTH, so a 14" or 13" laptop — about as wide but 15–30% shorter (1536×730, 1366×657, 1280×600 once the taskbar and browser bars are taken off) — drew the same tall stack and pushed the client rail, the work doors and the next section under the fold: the page looked zoomed in. HOW One factor, --fq, says where the window's height sits between two anchors: 600px tall → 0px (the compact anchor, set by hand below) 840px tall → 1px (the owner's reference — the approved values) Every value here is calc( + * var(--fq)), so a block moves on a straight line between the two compositions, and at 840px tall it is exactly the approved value. The whole file is inside (min-width:761px) and (max-height:839.98px): the reference screen, every taller screen and every phone are untouched by construction. Below 600px tall everything holds at the compact anchor. Whitespace gives way first. The hero headlines keep their live size (the owner's rule); section titles and the Thank You headline keep their share of the screen height; body text, labels, buttons' text and every control keep their size. Nothing is hidden, re-ordered or recoloured. No zoom, no transform, no script. OPT-OUT: a component with its own height rules sets --fq: 1px on its root; every rule here then computes to the approved base value inside it (the hero-drawer files do this for #overview; this file sets nothing inside #overview). Moving the window's height re-measures the rail's frame line on its own: assets/shared/hero-rail/hero-rail.js and inner-hero/inner-hero-rail.js re-run cut() through their class observer (tested: every height-only resize matches a fresh load). Custom properties that scripts read as numbers (--barh, --cut, --gap, --pad, --peek, --rows, --cw, --tw) are never set here — calc() would read as NaN. ========================================================================== */ /* Browsers without clamp()/min() skip the whole file and keep the approved layout. */ @supports (top: clamp(0px, 1vh, 1px)){ @media (min-width: 761px) and (max-height: 839.98px){ :root{ --fq: clamp(0px, (100vh - 600px) / 240, 1px); } /* ------------------------------------------------------------------------ 1 · SECTION RHYTHM — the four site-wide numbers of rhythm.css (every section of every page reads them). The reference's section edge is ~13% of its screen; it stays ~13% on a shorter one. ------------------------------------------------------------------------ */ :root{ --r9-open: min(clamp(34px, 4.1vw, 58px), calc(40px + 18 * var(--fq))); --r9-close: min(clamp(34px, 3.5vw, 50px), calc(36px + 14 * var(--fq))); --r9-lede: min(clamp(26px, 2.8vw, 38px), calc(28px + 10 * var(--fq))); --r9-ctrl: min(clamp(18px, 1.9vw, 26px), calc(19px + 7 * var(--fq))); } /* the document pages (Careers, Privacy, Terms) set their own 92px */ html body .pg > section{ padding-block: min(clamp(46px, 5.6vw, 92px), calc(56px + 36 * var(--fq))); } /* ------------------------------------------------------------------------ 2 · THE SHARED HERO (#overview on the service, inner and text pages) is NOT set here. Since 2026-10-08 it is the owner-approved Drawer hero (assets/shared/hero-drawer/{services,inner,text}.css, linked just before this file), which carries its own short-screen geometry and sets --fq: 1px on #overview. The rhythm tokens above resolve on :root and reach only the sections below the hero. ------------------------------------------------------------------------ */ } @media (min-width: 761px) and (max-height: 839.98px){ /* ------------------------------------------------------------------------ 3 · THE HOMEPAGE HERO — Device Display (#hx). Its own short-screen rules (hero.css, first-screen.css, design.css "max-height:800/780px") style the retired .screen hero, so #hx had none. Reference values from assets/home/hero/keyline.css + device.css. ------------------------------------------------------------------------ */ /* the headline (--h1, its margins) and the 58px audit field stay exactly as live: the owner's rule for this hero; at 1366×657 the headline is 9.4% of the screen against 9.0% on the reference, so the air around them does the adapting */ html body #hx.hx.hx.hx .s4{ --pad-t: calc(12px + 47.2 * var(--fq)); } /* 8vh − 8px at 840 */ html body #hx.hx.hx.hx .s4-field{ padding-bottom: calc(12px + 18 * var(--fq)); } /* 30 */ html body #hx.hx.hx.hx .hx-micro{ margin-top: calc(9px + 9 * var(--fq)); } /* 18 */ html body #hx.hx.hx.hx .s4{ padding-bottom: calc(30px + 28 * var(--fq)); --dd-floor: calc(23px + 21 * var(--fq)); } /* 58 / 44 */ /* the device: the bezel and the screen's side padding stay; the vertical air inside goes first */ html body #hx.hx.hx.hx .s4-card > .mw-head{ padding-top: calc(5px + 8 * var(--fq)); } /* 13 */ html body #hx.hx.hx.hx .s4-tabs{ padding-top: calc(3px + 5 * var(--fq)); padding-bottom: calc(4px + 6 * var(--fq)); } /* 8 / 10 */ html body #hx.hx.hx.hx .s4-tabs .hx-tab{ padding-top: calc(5px + 7 * var(--fq)); padding-bottom: calc(5px + 8 * var(--fq)); } /* 12 / 13 */ html body #hx.hx.hx.hx .s4-tabs .hx-ti{ width: calc(23px + 5 * var(--fq)); height: calc(23px + 5 * var(--fq)); margin-bottom: calc(3px + 5 * var(--fq)); } /* 28 / 8 */ html body #hx.hx.hx.hx .s4-tabs .hx-ti svg{ width: calc(21px + 5 * var(--fq)); height: calc(21px + 5 * var(--fq)); } /* 26 */ html body #hx.hx.hx.hx #hxPanel, html body #hx.hx.hx.hx #hxPanel.hw-on{ padding-top: calc(9px + 5 * var(--fq)); } /* 14 */ /* the work doors: the photo keeps its 10:7 shape until the screen is too short for it */ html body #hx.hx.hx.hx .hx-door .hx-ph{ max-height: calc(64px + 70 * var(--fq)); } /* 134 = its height at 1680 */ /* ------------------------------------------------------------------------ 4 · THE THANK YOU PAGE — the same corridor frame, its own file (assets/thank-you/thank-you.css). The frame's lower edge is drawn --cut px above the section's foot, so --cut gives back exactly what the band and the foot give up, and the edge stays on the cards' line. ------------------------------------------------------------------------ */ /* the seal never comes closer to the frame's inner edge (16 + 27 = 43px) than ~10px */ html body main.n .o1-say{ padding-top: min(clamp(50px, 4.6vw, 66px), calc(54px + 12 * var(--fq))); padding-bottom: min(clamp(34px, 3vw, 44px), calc(18px + 26 * var(--fq))); } html body main.n .f-seal{ width: calc(62px + 34 * var(--fq)); height: calc(62px + 34 * var(--fq)); } /* 96 */ html body main.n .f-seal .f-seal-c{ width: calc(44px + 21 * var(--fq)); height: calc(44px + 21 * var(--fq)); } /* 65 */ html body main.n .f-seal .f-seal-c svg{ width: calc(24px + 8 * var(--fq)); height: calc(24px + 8 * var(--fq)); } /* 32 */ html body main.n .o1-pill{ margin-top: calc(6px + 8 * var(--fq)); } /* 14 */ html body main.n .o1-t{ margin-top: calc(8px + 8 * var(--fq)); /* 16 */ font-size: min(clamp(30px, 3.7vw, 58px), calc(36px + 22 * var(--fq))); } /* two lines: 15% of the reference screen */ html body main.n .o1-sub{ margin-top: calc(7px + 5 * var(--fq)); } /* 12 */ html body main.n .o1-early{ margin-top: calc(12px + 16 * var(--fq)); } /* 28 */ html body main.n .o1-cta{ margin-top: calc(8px + 6 * var(--fq)); } /* 14 */ html body main.n .f-btn{ height: calc(48px + 10 * var(--fq)); } /* 58 */ html body main.n .o1-live{ margin-top: calc(8px + 10 * var(--fq)); } /* 18 */ html body main.n .n-frame.o1{ padding-bottom: calc(34px + 24 * var(--fq)); /* 58 */ --cut: calc(138px - 34 * (1px - var(--fq))); /* 24 + 10 given back */ } html body main.n .o1-band{ padding-top: calc(9px + 3 * var(--fq)); } /* 12 */ html body main.n .o1-band .n-band-h{ padding-top: calc(7px + 3 * var(--fq)); padding-bottom: calc(8px + 4 * var(--fq)); } /* 10 / 12 */ html body main.n .o1-band .f-cd-top{ min-height: calc(52px + 10 * var(--fq)); /* 62 */ padding-top: calc(9px + 4 * var(--fq)); padding-bottom: calc(9px + 4 * var(--fq)); } /* 13 */ html body main.n .o1-band{ padding-bottom: calc(16px + 10 * var(--fq)); } /* 26 */ } @media (min-width: 761px) and (max-height: 839.98px){ /* ------------------------------------------------------------------------ 5 · BELOW THE FOLD — section titles and the fixed-height windows A section title is 5.4% of the reference screen's height; it keeps that share (never below 33px) as the screen gets shorter. Body text, cards, buttons and fields keep their size: they are read, not composed. ------------------------------------------------------------------------ */ :root{ --hd-title: min(clamp(26px, calc(19.6px + 1.55vw), 46px), calc(33px + 12.64 * var(--fq))); } /* heads.css */ /* the homepage's own section titles (design.css: clamp(32px, 2.9vw, 44px) !important) */ html body :is(#svc3, #ss1, #hp1, #indwork, #wcu8, #about5, #faq10) .hd-intro .hd-title.hd-title{ font-size: min(clamp(32px, 2.9vw, 44px), calc(32px + 12 * var(--fq))) !important; } /* Success Stories' own title (success-stories.css: 42px) */ html body #success-stories .ow5-h2{ font-size: min(42px, calc(32px + 10 * var(--fq))); } /* the FAQ (all seven FAQ pages): its title tokens and its question window. The window already scrolls inside itself; on a shorter screen it shows a question less instead of pushing the section past the screen (assets/shared/faq/gads-faq.css: --fx-scroll-h 400px). */ #gfaq#gfaq#gfaq#gfaq#gfaq#gfaq#gfaq#gfaq{ --hd-title: min(clamp(26px, calc(19.6px + 1.55vw), 46px), calc(33px + 12.64 * var(--fq))) !important; --ds-h2: min(clamp(27px, 3.05vw, 44px), calc(32px + 12 * var(--fq))) !important; --fx-scroll-h: calc(290px + 110 * var(--fq)) !important; } } } /* @supports */