/* =====================================================================
Paraone Residential: one-page site.
The design language is GOLD ON BLACK, LIKE HIS SIGNS: the signwriter's
site sign and business card (Halvo Signs, 24 Sep 2026) scaled up. Black
fields carry gold display type and white contact lines; white paper
bands carry the reading matter and the photographs. Every value here is
measured off the logo files or computed from them; DESIGN-LANGUAGE.md
has the numbers and the reasons.
The words are Karan's, locked (Smoko art-build-sop). This file owns
only how they are set.
Rules everything below obeys:
- TWO GROUNDS AND ONE GOLD. No third value. Cards on black are ruled
cells, not tinted panels (a tint measured 1.18:1, invisible).
- Gold is text ONLY on black (11.30:1). On paper it is a device: the
bar in front of an eyebrow, an icon stroke, a button ground.
- Every edge is square. Zero radius, zero shadow. Measured by check.mjs.
- The devices are a closed registry (DESIGN-LANGUAGE.md 4 and 13): the
gold bar, the rule, the shoulder, the lit edge, and the drawings (the
frame retired, section 14). A new one is argued there first (R17).
(Rewritten 2026-09-28, polish-1: this line said "three devices and no
fourth", which the Eclipse and drawn passes had superseded.)
- Montserrat (the logo's face) for display, Source Sans 3 for reading.
- Mobile first: Buddy reviews this on his phone. Every number on the
page is a tel: link with a 44px hit box.
===================================================================== */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url('assets/fonts/montserrat-latin.woff2?v=1') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Sans 3';
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('assets/fonts/source-sans-3-latin.woff2?v=1') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Measured (DESIGN-LANGUAGE.md 2) */
--black: #111111; /* the gold-on-black logo file's ground */
--paper: #ffffff; /* the black-on-white logo file's ground */
--gold: #fdbd4f; /* the transparent logo PNG, the one the site ships */
--ink: #141414; /* headings on paper, 18.42:1 */
--body: #3a3a38; /* paragraphs on paper, 11.40:1 */
--quiet: #5e5d58; /* small text on paper, 6.60:1 */
--bone: #e8e4da; /* paragraphs on black, 14.87:1 */
--mist: #b8b4aa; /* quiet text on black, 9.12:1 */
/* ONE GOLD ON PAPER (polish-1 round 5, ethan-lens-5-1). gold-deep was the
page's hairline gold on paper, and it put two golds in four of the five
paper surfaces: the plain gold of the eyebrow bars, the sign-off bar, the
stars and the SEND ground beside an ochre link rule, brown badges with a
tan tint, brown pins and brown asterisks (census: about 3 plain / 2 deep,
trust 1 / 2, map card 1 / 9, form card 1 / 5; only the reviews were one
gold). R25 is the fleet's ruling on exactly this ("the darkened
accessible amber just looks bad"). So on paper the gold appears only as
MASS, in the plain gold: a filled mark (the stars, the badges, the
headland), a rule at the bar's 3px (the link rule), a label at weight 700
(the required asterisks). Each is 1.67:1 and ratified BY CLASS here, as
R6 requires, never waived silently: .link-cta border, .drawing--badge,
~~.review stars~~ (band cut 2026-09-28 evening), .req, .places li span::after, and the map's plane
outlines (on the map, not the paper). A LINE GLYPH on paper cannot carry
the plain gold (a 1.75px stroke has no mass) and does not get a darker
one: it takes INK, HG's construction (`.med`, "the glyph alone, in the
ground's accent (ink on paper ...)", apps/hg-electrical styles.css),
R56: the link arrow, the places' pins, the map facade's mark.
gold-deep survives in ONE place: the focus state of a ruled field, a
functional indicator WCAG 1.4.11 holds to 3:1 (4.06 here), shown only
while a keyboard is on it. Reproduce the census:
node static-sites/paraone-residential/measure/gold-census.mjs
My call, from R25, R6 and R56 (DL section 2, amended); reversible by
pointing the listed selectors back at var(--gold-deep). */
--gold-deep: #a8740f; /* the focus state on paper only, 4.06:1; never a word, never at rest */
--error: #a3271c; /* 6.9:1 on paper */
--rule-dark: rgba(255, 255, 255, 0.14); /* the rule on black */
--rule-light: rgba(20, 20, 20, 0.14); /* the rule on paper */
--edge: rgba(20, 20, 20, 0.42); /* form-control borders on the paper card */
--display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
--text: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
--container: 1680px;
--gutter: 48px;
/* THE BAND RHYTHM IS HG'S TOKEN, PORTED (polish-1 round 5,
parity-inventory-5-2). It was four steps, 112 / 96 / 88 / 64px at the
1240, 900 and 640 queries, and measured on the ink the eye takes as a
band's first and last mark (text, media, a button's ground, a card's or
strip's edge) every padded band read 107 to 113 above and 112 below at
1440 and 1920, against HG's 93 to 106 and Eclipse's 75 to 80: even
between siblings, one step looser than both referents. HG's --band is one
fluid value, 52px at 320 to 96 at 1440 (apps/hg-electrical,
src/app/(frontend)/styles.css), so this page takes it whole, range
included (the file's 390-to-1920 default does not apply to this line).
The critic's other half, bottoms 18 to 47px deeper than tops, is a
text-only reading: the button grounds, the card edges and the trust
strip's rule are the last ink, and on those the bottom is the token.
Reproduce, with the site on :8395 (and the referents' URLs in place of
it to measure them the same way):
node static-sites/paraone-residential/measure/rhythm-round5.mjs http://127.0.0.1:8395/ 390,1440,1920
My call, from R56, R11 and R8 (a retune is a design pass); reversible by
writing 112px back here and the three --band-y values back into the
1240, 900 and 640 queries. */
--band-y: clamp(3.25rem, 2.464rem + 3.929vw, 6rem);
--nav-h: 72px;
/* THE HEAD-TO-BODY GAP: one value for every band, from the last line of a
section head to the first thing the section shows (a rule, a strip, a
photograph, the form card). My call, from R11: the four bands set four
literals (40, 48, 32, 56) and the ink gaps measured 41, 44, 33 and 57 at
1440, so contact sat 1.7 times further from its head than Our Work did.
32px at 390 to 48px at 1440, rem-intercept form (the responsive skill).
Reversible by restoring the four margin-top literals. */
--head-gap: clamp(32px, 1.6286rem + 1.524vw, 48px);
}
/* EVERY FLUID VALUE IN THIS FILE IS IN SLOPE-INTERCEPT FORM (the responsive
skill, section 1, RULED): clamp(min, intercept rem + slope vw, max), with the
min reached at 390 and the max at 1920 unless its own comment says
otherwise. Fourteen were written clamp(min, N vw, max), which sits flat on
its min until N vw crosses it: the body was 17px at 390, 768, 1024 and 1440
(flat below 1478) while the H2 moved 26 to 42 to 52, so at 1440 the service
bodies read 17px under a 28px title. Now the body measures 17.0, 17.7, 18.2,
19.1 and 20.0 at 390, 768, 1024, 1440 and 1920. Each token is
slope = (max - min) / 1530, intercept = min - slope * 390; reproduce with
node -e 'const [a,b]=[17,20],s=(b-a)/1530;console.log((a-s*390)/16+"rem + "+s*100+"vw")'
and read getComputedStyle(document.body).fontSize in a Playwright page at
each width. My call, from the responsive skill section 1 (ethan-lens-2-6);
reversible per token from git. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* The canvas is black: both ends of the page are black (the header and hero
above, the closing panel below), so the overscroll rubber-band paints black
rather than flashing a white strip off either end. */
/* No tap-highlight square: the browser's default painted a blue box over the
menu toggle in the first frame of every tap, open and close (it was unset,
grep count 0). Focus stays visible through :focus-visible below.
scrollbar-gutter keeps the width steady when the open drawer stops the
page scrolling on a desktop with classic scrollbars. My call, from R29. */
html {
background: var(--black);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
scrollbar-gutter: stable;
scroll-behavior: smooth;
scroll-padding-top: var(--nav-h);
}
body {
font-family: var(--text);
font-size: clamp(17px, 1.0147rem + 0.1961vw, 20px);
line-height: 1.6;
color: var(--body);
background: var(--paper);
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
h1, h2, h3 {
font-family: var(--display);
font-weight: 700;
letter-spacing: -0.01em;
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
/* On paper a gold ring lands at 1.67:1 and is invisible; the ring inverts with the ground. */
.band--paper :focus-visible,
.enquiry :focus-visible { outline-color: var(--ink); }
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 12px 20px;
background: var(--gold);
color: var(--ink);
font-family: var(--display);
font-weight: 700;
}
.skip-link:focus { left: 0; }
/* ---- layout ---------------------------------------------------------- */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* THE CHROME TRACK (R36, the hourglass): the header and the footer run the
full width with their ends tucked a gutter from the glass, while the
reading bands keep the 1680 container. Same gutter, so below 1776px the
chrome and the content share one edge and the difference is invisible;
above it the logo and the controls stay in the corners instead of floating
in 168px of black (measured at 1920 before this: logo at x=168, last
control ending at 1752; both referents at 40 and 1880). My call, from R36;
reversible by removing the class from the two chrome wrappers. */
.container--wide { max-width: none; }
.band { padding-block: var(--band-y); }
.band--paper { background: var(--paper); color: var(--body); }
.band--black { background: var(--black); color: var(--bone); }
/* PAPER MEETS PAPER at most joins since 2026-09-28 evening, Ethan: "make all sections light except for the statement, nav and footer"; the page used to alternate at
every seam. Each such join takes one quiet full-width rule (R4, a tick not
a fence), so a band still has an edge. My call; reversible by deleting
these two lines. */
.band--paper + .band--paper,
.map-band + .close { border-top: 1px solid var(--rule-light); }
/* The black bands carry no mark on their ground (parity-inventory-3-9 weighed
HG's enlarged brand shape at low opacity): a mark at a few percent white is
a third value, which DL 2 rules out, and a device DL 4 does not list (R17).
Ethan's to open. My call, from DL 2 and R17. */
.band__head { max-width: 100%; }
/* THE CENTRED HEAD, the Trust band's (index.html argues it at the site: five
centred cells claim even pitch about the band's axis, R12, and HG sets its
logo wall's head the same way). The HTML carried the class from round 1 and
this rule never landed, so the head sat flush left over the strip, its ink
centre 461px left of the strip's at 1440 and 532 at 1920 (karan-3-4). The
eyebrow is a flex row, so its bar and words centre by justify-content.
Measured with node static-sites/paraone-residential/measure/structure-round3.mjs
(trustHead). My call, from R12 and R56; reversible by deleting both lines. */
.band__head--centre { text-align: center; }
.band__head--centre .eyebrow { justify-content: center; }
.band__foot { margin-top: 56px; }
/* THE SECTION HEADING, stepped down so the hero is the page's one loud moment.
It was clamp(32px, 3.6vw, 68px), which put the H1:H2 ratio at 1.05 to 1.17
at every width (34/32 at 390, 71.5/68 at 1920); both referents open at 1.36
to 1.59 (Eclipse 72/48, HG 54/34 at 1920). Now 26px flat on a phone, rising
from 640 to 52px at 1920, rem-intercept form. H1:H2 measured 1.42 (320),
1.52 (390), 1.45 (768), 1.42 (1024), 1.65 (1440), 1.58 (1920), read as
getComputedStyle(el).fontSize of .hero__title over #services .band__title
in a Playwright page at each width, 900 tall. My call, from
R29 (referent parity) and R34; reversible by restoring the old clamp.
ROUND 3 (parity-inventory-3-3): SET LIGHTER, AND CAPPED AT 46. Every
display heading on the page was Montserrat 700 or 800 (15 of 15 at 1920),
where both referents set 100 percent of theirs at 400 or 500 (Eclipse's
H2s 400 at 40 to 48px, HG's 500 at 34). The weight came across from the
wordmark, where caps at 700 are a logo's weight; in title case at reading
scale the same weight read as template type. The H2s and the H3s step to
600, the H1 keeps its 800 so the two-tone line stays the one loud moment,
and the H2 tops out at 46px, so H1:H2 lands between the referents: 26px at
640 and under, 46 at 1920, slope 20/1280 (was 52 at 1920). Footer column
heads are 13px labels in the eyebrow's voice and stay 700. Measured with
node static-sites/paraone-residential/measure/structure-round3.mjs (type,
h1h2). My call, from R56 and R34; reversible by restoring the 52px clamp
and deleting the two font-weight lines. */
.band__title {
font-size: clamp(26px, 1rem + 1.5625vw, 46px);
font-weight: 600;
line-height: 1.05;
color: var(--ink);
text-wrap: balance;
}
.band--black .band__title { color: var(--paper); }
/* A head that ENDS on its title (Trust) measured 4 to 5px closer to its body
than a head ending on a paragraph, because a 1.05 line box is shorter than
the display face's glyphs and the ink hangs below it. Measured on ink,
--head-gap is the same gap either way with this made up. */
.band__head > .band__title:last-child { padding-bottom: 0.12em; }
.band__intro {
margin-top: 20px;
font-size: clamp(18px, 1.0453rem + 0.3268vw, 23px);
line-height: 1.5;
text-wrap: pretty; /* see .hero__sub: reading matter wraps pretty */
}
.band--black .band__intro { color: var(--bone); }
/* THE CONTACT INTRO BREAKS BALANCED, so its line never ends on the hard
hyphen of "no-obligation". A greedy break set "Free, no-" / "obligation
quotes." at 320, from 641 to about 790 (centred, a two-word line under a
line ending in a hyphen) and at 1024. Balanced it reads "Send us the
details and we'll be / back in touch to talk it through. / Free,
no-obligation quotes." at 320 and 1024, and two even lines at 768 and
1440. Read as the text of each line box (a Range per character) in
Playwright at 320, 390, 641 to 900 and 1024 to 1920. Balance was tried on
the same break elsewhere and REFUSED: on the service titles it cures
"Interior Fit-" / "Outs" at 320 and makes "Consent-" / "Ready Plans" at
320 and 360, and on the centred step body at 1240 it keeps the hyphen
break. Those need a non-breaking hyphen in the markup, which is index.html's
(reported). The words are locked, so the break is set, not written. My
call, from R34 (stranger-on-a-phone-3-7); reversible by deleting this
rule. */
.contact__lead .band__intro { text-wrap: balance; }
/* ---- the eyebrow: the SOP's own register, set as ONE device ----------
13px tracked caps ~~with the 28x3 gold bar in front~~. THE BAR IS GONE
(Ethan, 2026-09-28 evening: "dont like the eyebrow accent"); the words
stay, since the SOP locks them. The hero's eyebrow keeps its gold ink
(.eyebrow--dark); one line flips it to bone if that was the accent meant. Ink on paper, gold on
black. The bar is the only mark that says "a section starts here" and it
appears nowhere else on the page. Named exception to R33: the SOP locks
the eyebrow copy on every section.
KEPT AS ONE DEVICE on 2026-09-28 (polish-1), against a critic's proposal to
drop the bar on the paper bands and keep it on the hero only: the seven
eyebrows exist whatever the device does (the words are locked), and a bar
on some of them and not others is two eyebrow styles, which is the
unevenness R11 and R61 rule out. Quieting them is Ethan's to call against
R33. My call; reversible by adding .band--paper .eyebrow::before
{ display: none; }.
RE-DECIDED THE SAME WAY in polish-1 round 3 (ethan-lens-1-14): since
round 2 the device sits on six of eight headed bands, not every one (DL
3), and the hero facts are four SOP labels in the label voice, which R7
allows tracked caps. Quieting the eyebrows' words is Karan's (the SOP
sets them in caps); the device stays one. My call, from R33, R11 and R7. */
.eyebrow {
display: block;
margin-bottom: 18px;
font-family: var(--display);
font-weight: 700;
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink);
}
.eyebrow--dark { color: var(--gold); }
/* ---- THE LIT EDGE ------------------------------------------------------
Eclipse Air's signature (its language spec, device 1), translated: one 3px
rule of gold along the LEADING edge of a dark mass, offset from it by a hair
of the light ground, so it reads as light getting past a body rather than as
a border. ~~Three~~ Four placements, one per screen: the top edge of Our
Work, of the statement (round 5, Eclipse's No.8 carries it) and of
the closing panel, and the leading edge of the About photograph (the
service band carries none, the map card and the form card are paper and
carry none; DL 4 has each reason, polish-1 round 2). It draws itself from one end on entry (transform only, nothing moves) and is
simply present under reduced motion or without JS. */
.band--lit { position: relative; }
/* A HAIRLINE ABOVE A LIT EDGE, KEPT (round 4, stranger-on-a-phone-4-9): the
trust strip's bottom rule and the map card's foot rule each stand 55px
above the next band's gold at 390 (79 at 768, 60 to 103 at 1440). The rule
closes its OBJECT (a strip ruled top and bottom, DL 14; a card), the gold
opens the next BAND; at 55px or more they read as two edges of two things,
not as one doubled line, which needs them within a few pixels. My call,
from R4 and DL 14; reversible by dropping those two bottom rules. */
.band--lit::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: -9px; /* in the light ground above the band: 3px of gold, then 6px of paper, then the black */
height: 3px;
background: var(--gold);
transform-origin: left center;
}
.is-armed [data-lit]::before { transform: scaleX(0); }
.is-armed [data-lit].is-in::before { transform: none; transition: transform 640ms cubic-bezier(0.2, 0.6, 0.2, 1); }
/* ---- icons: Lucide 0.469, one sprite, stroke 1.75 ------------------- */
.icon { width: 20px; height: 20px; flex: none; }
/* ---- buttons: three weights for one sentence ------------------------
Painted rectangles, hard on all four corners like every other edge.
The words are the SOP's and the SOP writes them in caps, as the wordmark
is; nothing else on the page is capitalised. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
min-height: 56px;
padding: 12px 30px;
font-family: var(--display);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 0;
transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
/* EVERY HOVER ON THE PAGE sits behind @media (hover: hover), so a tap on a
phone never leaves a hover state drawn (a tapped service row kept its 3px
gold edge; 0 of 17 rules were guarded). R42 asks for exactly this guard.
My call, from R42; reversible by unwrapping the one-line media blocks. */
.btn--solid { background: var(--gold); color: var(--ink); }
@media (hover: hover) { .btn--solid:hover { background: #f0ad35; } }
.btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.72); color: var(--paper); }
@media (hover: hover) { .btn--ghost:hover { border-color: var(--paper); background: rgba(255, 255, 255, 0.08); } }
.btn--ghost .icon { width: 18px; height: 18px; }
.btn--block { width: 100%; }
/* The header's button sits IN the bar rather than filling it. */
.btn--header { min-height: 44px; padding: 8px 18px; font-size: 14px; letter-spacing: 0.06em; white-space: nowrap; }
/* The link weight: display face, the arrow, a gold rule under it. Used inside
prose (About) and directly above the form (Service Area, R57). */
.link-cta {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
margin-top: 32px;
padding-bottom: 1px;
/* the gold bar's own 3px, in the plain gold (round 5: was 2px gold-deep,
with 2px of padding, so the box keeps its height; token comment above) */
border-bottom: 3px solid var(--gold);
font-family: var(--display);
font-weight: 700;
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink);
transition: border-color 140ms ease, gap 140ms ease;
}
@media (hover: hover) { .link-cta:hover { border-color: var(--ink); gap: 16px; } }
.link-cta .icon { width: 18px; height: 18px; color: var(--ink); } /* a line glyph on paper: ink (round 5, token comment) */
/* ---- header: black, sticky, fused onto the hero --------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 20;
height: var(--nav-h);
background: var(--black);
color: var(--paper);
}
.site-header__inner {
height: 100%;
display: flex;
align-items: center;
gap: 24px;
}
.brand { display: flex; align-items: center; min-height: 44px; flex: none; }
/* THE BAR'S LOCKUP is the client's own file cropped to the mark and the name
(assets/img/logo-gold-name.png, rows 0 to 295 of logo-gold.png, nothing
recoloured; README asset notes). The full stacked lockup set at 38px put its
third line, RENOVATIONS & NEW BUILDS, at about 3px tall and the name at
about 8px beside 14px nav links. At 44px the name's caps are about 12px.
My call, from R34 (comparative mass), because the stacked lockup's third
line cannot be read at chrome scale; reversible by pointing the two ![]()
back at logo-gold.png. */
.brand__mark { width: auto; height: 44px; transition: opacity 140ms ease; }
/* The logo is a link (back to the top), and it was the one visible control of
62 probed at 1920 that did not answer the pointer. R42 names its effect: a
quiet opacity dip on the mark. My call, from R42 and R61. */
@media (hover: hover) { .brand:hover .brand__mark { opacity: 0.82; } }
/* The navigation: the section names in the display face, a gold rule drawing
under each on hover (the lit edge at chrome scale). The bar carries the
number and the quote control; at 1240px and below (DL section 15) the list
folds into a drawer under the bar and the number stays. */
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
/* THE LINK GROUP CLAIMS THE BAR'S CENTRE (R2, judged on ink; both referents
centre theirs on the viewport at 1920: Eclipse 632 to 1288, HG 745 to 1175).
It was packed against the right-hand controls by margin-left: auto, which
landed within 4px of centre at 1440 and drifted 244px right of it at 1920
as the chrome track widened (R36). Three tracks, the outer two 1fr with an
AUTO minimum, so where the bar is roomy both sides are equal and the list
sits on the centre, and where it is tight (1241 to about 1400) each side
keeps its content and the list gives way rather than overlapping. Measured
in measure/header.mjs as the list's ink centre against the viewport
centre. My call, from R2, R36 and R56 (parity-inventory-2-4); reversible by
deleting this query. */
/* ~~centred on the viewport~~ AMENDED 2026-09-28, polish-1 round 4
(sibling-evenness-4-7): CENTRED BETWEEN ITS NEIGHBOURS' INK, equal voids.
On the viewport's centre the group sat 245px from the logo and 38 from the
number at 1440 (485 and 278 at 1920), because the right-hand cluster (the
number and the quote control, about 385px) is more than twice the 178px
logo, so at the widths Ethan reviews on the links read as attached to the
controls. The middle track is now the free space between the two ends and
the list centres in it, so the two voids are equal at every width from
1241 (the referents centre on the viewport because their two ends are
near one width, which makes the two the same construction there). Measured
as the list's Range against the logo's box and .site-header__actions' box
at 1440 and 1920 (measure/round4-layout.mjs navVoids). My call, from R2
and R11, superseding DL 16's derived viewport centre; reversible by writing
1fr auto 1fr back and deleting justify-self. */
/* ~~CENTRED BETWEEN ITS NEIGHBOURS' INK~~ BACK ON THE VIEWPORT'S CENTRE (Ethan,
2026-09-28 evening: "nav menu isnt centered visually"). Equal voids put the
list's ink centre 104px left of the bar's centre at 1440 and 104 at 1920
(measured: ink centre 616 against 720, 856 against 960), because the right
cluster is twice the logo's width, and his eye reads the bar's centre, not
the voids. The outer tracks are equal again (1fr, auto minimum), so the
list sits on the viewport centre wherever the bar is roomy and gives way
where it is tight. Reversible by writing auto minmax(0, 1fr) auto back. */
@media (min-width: 1241px) {
.site-header__inner { display: grid; grid-template-columns: minmax(auto, 1fr) auto minmax(auto, 1fr); }
.site-header__inner .brand { grid-column: 1; justify-self: start; }
.site-header__inner .nav { grid-column: 2; margin-left: 0; justify-self: center; }
/* Column 3 by name, so the 404 bar (no nav) still puts its number at the
right end rather than in the empty middle track. */
.site-header__inner .site-header__actions { grid-column: 3; justify-self: end; gap: 18px; }
.nav__cta { display: none; }
}
/* The drawer's number (index.html), a drawer-only row: the bar carries its
own number above 1240. The email and area lines under it likewise. */
.nav__phone,
.nav__reach { display: none; }
.nav__list { display: flex; align-items: center; gap: 4px; }
.nav__link {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
font-family: var(--display);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
white-space: nowrap;
color: var(--bone);
transition: color 140ms ease;
}
.nav__link::after {
content: '';
position: absolute;
left: 12px;
right: 12px;
bottom: 6px;
height: 2px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left center;
transition: transform 260ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (hover: hover) { .nav__link:hover { color: var(--paper); } }
@media (hover: hover) { .nav__link:hover::after { transform: none; } }
.site-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
/* At the desktop tier the number is a TEXT link beside the one gold control:
two boxes in a bar read as two adverts. The ghost box returns on the
phone, where the number is an icon and the box is its tap target. */
.site-header__phone { border: 0; padding: 0 6px; font-size: 16px; letter-spacing: 0.02em; }
@media (hover: hover) { .site-header__phone:hover { background: none; color: var(--gold); } }
.site-header__phone .icon { color: var(--gold); }
/* The 404 page has no navigation, so its actions take the bar's right edge alone. */
.site-header__actions--alone { margin-left: auto; }
.nav-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
color: var(--paper);
transition: color 140ms ease;
}
/* The menu toggle answers the pointer the way the bar's number does (it is a
pointer control on any screen up to 1240px wide, and it had no hover).
My call, from R42 and R61. */
@media (hover: hover) { .nav-toggle:hover { color: var(--gold); } }
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }
/* ---- 1. hero --------------------------------------------------------- */
/* THE COPY SITS ON THE FOOT (R38, the corner tuck; Eclipse's construction).
It was align-items: center inside the 86vh floor, which split the slack
above and below the copy, so the facts' hairline "at the hero's foot" stood
135px above it at 1440x900, 196 at 1920x1080 and 350 at 2560x1440 over
dimmed photograph. Flex-end puts the facts on the 56px bottom padding and
gives all the slack to the photograph above the copy. Measured with
.hero bottom minus .hero__facts bottom in Playwright at each size.
My call, from R38 and R53; reversible by restoring align-items: center.
svh, not vh (the responsive skill, section 6): the floor reaches iPad
portrait and landscape, where vh is the glass with the URL bar retracted,
so the facts' hairline could sit under the browser chrome. On a desktop
the two are equal. My call (fe-2-10); reversible by writing vh back. */
.hero {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
min-height: max(600px, 86svh);
padding-block: 88px 56px;
background: var(--black);
color: var(--paper);
overflow: hidden;
}
.hero__photo,
.hero__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: -2;
}
.hero__photo img { object-fit: cover; object-position: 62% 50%; }
/* No settle-from-scale on the photograph (Eclipse's hero arrival was tried
2026-09-28 and dropped): a scaled image measures wider than the viewport
for the length of its transition and the shared responsive sweep reads that
as an overflow. The lit edges are this page's arrival. */
/* Measured black from the left and the foot, so the copy sits on the palette
rather than on whatever the photograph is doing behind it.
AS LITTLE SCRIM AS PASSES (Ethan, 2026-09-28 evening: "as little scrim as
possible to pass the check"). Every alpha below, in both tiers, is 0.8 of
what it was: measure/hero-scrim.mjs sweeps the scrim's strength at 320,
390, 768, 1024, 1240, 1440 and 1920 and reads the worst decile of each
copy run against the pixels under it (4.5 for the sub, the eyebrow and
the 13px caps facts, 3.0 for the display H1). 0.8 is the smallest step of
0.02 that passes everywhere; at 0.78 the facts at 1440 read 4.47, over
the lit roof timber. Reproduce:
node static-sites/paraone-residential/measure/hero-scrim.mjs 1
Reversible by multiplying the alphas by 1.25. */
/* ~~the side wash plus a top and foot band~~ REPLACED 2026-09-29 (cal-243, Karan 6:55: "maybe
top the bottom could be nicer"; Ethan 8:04: with the buttons moved right "the gradient has to go
up less"). ONE ramp, from the foot up, that stops where the words stop, so the top half of the
photograph is untouched. Its stops are the smallest that pass measure/hero-scrim.mjs's floors
(4.5 for the sub and the caps facts, 3.0 for the display H1 and the years); the sweep's numbers
are in the commit. Ruled by Karan and Ethan on the call; the stops are my call, reversible here. */
.hero__scrim {
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(0deg, rgba(17, 17, 17, var(--scrim-foot)) 0%, rgba(17, 17, 17, var(--scrim-mid)) var(--scrim-mid-at), rgba(17, 17, 17, var(--scrim-top)) var(--scrim-top-at));
--scrim-foot: 0.88;
--scrim-mid: 0.66;
--scrim-mid-at: 44%;
--scrim-top-at: 78%;
--scrim-top: 0;
}
/* WHERE THE COPY REACHES THE BRIGHT HALF, THE SCRIM FOLLOWS IT. The ramp above
was tuned for a copy column of about 60 percent; at 1240 and under the sub
runs to 84 to 100 percent of the width and the facts sit two by two, so the
right-hand fact and the end of the sub landed where the ramp had fallen to
0.32 to 0.12, over the lit roof timber. Worst-decile contrast of bone on the
bare scrimmed photograph, before: sub 3.8 and fact 3.4 at 390, sub 3.6 at
768, fact 4.3 at 1024, fact 3.7 at 1240 (tracked caps at 12 to 13px need
4.5). After, the worst line box at any of 320, 390, 768, 1000, 1024 and 1240
holds 5.5 at its worst decile and 4.7 at its worst twentieth.
Reproduce in a Playwright page at the width, 844 tall: read each Range
client rect of .hero__sub and .hero__facts li span, set .hero__copy and
.hero__facts to visibility: hidden, screenshot, and take the WCAG ratio of
the span's computed colour against every second pixel inside each rect,
sorted, at the 10th and 5th percentile. The photo
keeps its crop. My call, from R38 (the copy sits on measured black) and the
phone-first SOP (stranger-on-a-phone-2-1); reversible by deleting this
query. */
/* Narrower, the words stack taller, so the same ramp climbs further. */
@media (max-width: 1000px) {
.hero__scrim { --scrim-mid: 0.74; --scrim-mid-at: 58%; --scrim-top-at: 100%; }
}
.hero__inner { position: relative; }
/* A CONTAINER: the headline is sized off the column it lives in, so "Bay of
Islands Builders." holds one line wherever the column is wide enough for
display type, and stacks by composition where it is not (a phone). */
.hero__split {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px clamp(32px, 4vw, 72px);
}
.hero__copy {
flex: 1 1 auto;
max-width: 820px;
container-type: inline-size;
container-name: herocopy;
}
/* The right-hand column: the years over the two buttons, both right-aligned, its foot on the
sub's foot so the pair reads as one line of the composition. */
.hero__side {
flex: none;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 28px;
text-align: right;
}
/* ALLEN ROOFING'S YEARS, carried (apps/allen-roofing/src/blocks/Hero/Component.tsx): a big
light numeral over a tracked-caps label, bone on the dark, right-aligned. Its sizes are this
page's (Allen sets 96px over 30px at 1440 on a hero with nothing else on the right; here it
shares the column with the buttons, so it is a step down). */
.hero__years {
display: flex;
flex-direction: column;
align-items: flex-end;
font-family: var(--display);
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--bone);
line-height: 1;
}
.hero__years-figure { font-size: clamp(56px, 2.5rem + 3vw, 96px); letter-spacing: 0.04em; margin-right: -0.04em; }
.hero__years-label { margin-top: 10px; font-size: clamp(14px, 0.7rem + 0.55vw, 20px); margin-right: -0.15em; }
/* 7cqw: "Bay of Islands Builders." measures 12.19em in Montserrat 800, so
the first sentence holds one line in any column at least 12.2em wide, with
a small margin (it was 6.1cqw, leaving 4em of the column unused). Capped at
the language's own 100px (section 3). On a phone the size comes from the
viewport instead (the 640 tier), since there the column is the screen. */
/* 800 KEPT (round 4, parity-inventory-4-8: both referents set their hero at
400, and R38 asks the text to let the photo shine). The H1 is the
wordmark's weight on the page's one loud moment (DL 3 and 18, which took
every H2 and H3 to 600 so this line alone carries it), and R38 is already
answered by the copy tucked to the hero's foot with the photograph taking
the slack above. 700 is the one-step option if Ethan's eye wants it. My
call, from DL 3 and DL 18; reversible by writing 700 here. */
/* SHRUNK (Ethan, 2026-09-28 evening: "can we shrink hero text"). ~~clamp(36px,
7cqw, 100px)~~, which set 69.6px at 1440 and 82 at 1920 (1.65 and 1.58
times the H2). Now the H2's own slope (clamp(26px, 1rem + 1.5625vw, 46px))
times 1.45, the middle of the referents' 1.36 to 1.59: 46.4 at 1024, 55.8
at 1440, 66 at 1920, so the H1:H2 ratio is 1.45 flat instead of drifting
with the column. "Bay of Islands Builders." (12.19em) still holds one line
wherever the column is at least 12.2em wide; the phone break below is
unchanged. Between HG's 54 and Eclipse's 84 at 1440. Reversible by
restoring the cqw clamp. */
/* DOWN A STEP, 2026-09-29 (cal-243, Ethan 8:09: "i can just size that down"): the H2's slope
times 1.3, was 1.45. Reversible by writing the 1.45 line back. */
.hero__title {
font-size: clamp(34px, 1.3rem + 2.0313vw, 60px);
font-weight: 600; /* ~~800~~ 600, 2026-09-28 evening, Ethan: "way too heavy, more like the other one we use": the H2s' weight */
line-height: 1.02;
color: var(--paper);
}
/* THE SIGNATURE: the second line in gold, the site sign's construction
(white contact lines, gold name). Appears once on the page. Balanced, so
a sentence that has to wrap on a phone wraps evenly ("Homes Built / to
Last.") rather than leaving its last word alone.
THE PHONE BUDGET, a named exception to R34's two lines: below about 500px
the H1 is TWO AUTHORED LINES, EACH BROKEN ONCE, balanced, so four lines of
two words or three, never a single-word widow. Measured word by word at
320, 360, 390 and 430: "Bay of Islands / Builders. / Homes Built / to
Last." Two lines on a phone would need about 28px (the first sentence is
12.19em), which puts the H1 on the H2's 26px and spends the page's one loud
moment. The words are locked, so the break is set, not written. My call,
from R34 and R28 (never shrink type to escape the measure); reversible by
dropping the 640 tier's clamp floor to 28px. */
.hero__line { display: block; text-wrap: balance; }
.hero__line--gold { color: var(--gold); }
/* THE PHONE BREAK, composed for BOTH sentences at once. Balance alone left a
band of widths (column 356 to 488px, viewports about 400 to 527) where the
first sentence wrapped and the shorter second did not, so the headline set
as three lines, "Bay of Islands / Builders. / Homes Built to Last."
(measured at 480). Wherever "Bay of Islands Builders." cannot hold one line
(12.19em, 488px at the 40px phone size) each sentence is capped at 7.5em,
which holds "Bay of Islands" (7.30em) and refuses "Homes Built to" (7.79em),
so the phone reads "Bay of Islands / Builders. / Homes Built / to Last." at
every width under 528. Widths measured as em of the rendered H1 in a
Playwright page. My call, from R34 (a wrap is composed, never incidental);
reversible by deleting this query. */
@container herocopy (max-width: 490px) {
.hero__line { max-width: 7.5em; }
}
/* Reading matter wraps PRETTY, not balanced: balance shortens every line to
match the shortest, which set the services intro at 273 of 350px at 390.
Balance stays on the headings. My call, from R13 and R35; reversible by
putting balance back on this rule and on .band__intro. */
.hero__sub {
margin-top: 26px;
font-size: clamp(18px, 1.0294rem + 0.3922vw, 24px);
line-height: 1.5;
color: var(--bone);
text-wrap: pretty;
}
.hero__actions {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
gap: 14px 18px;
}
/* Four facts on one hairline at the hero's foot, a mark each. THE STRIP SPANS
ITS HAIRLINE (R3): the facts are distributed with the slack as equal
gutters, first ink on the hairline's left end and last ink on its right.
With four content-sized facts and a fixed gap the last fact's ink stopped
97px short of the rule's end at 1440 and 316px short at 1920 and 2560. (For
a while in round 1 there were two, and space-between threw them to the
ends with 746px of bare rule between at 1440; the four are back, polish-1
round 2, see the comment in index.html.) Ink ends now
measure equal to the rule's ends at 390, 768, 1024, 1440, 1920 and 2560
(a Range over each li against .hero__facts' box). My call, from R3 and R2;
reversible by removing justify-content here and in the 2x2 query below. */
.hero__facts {
margin-top: clamp(48px, 2.3627rem + 2.6144vw, 88px);
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.28);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px clamp(28px, 1.3039rem + 1.8301vw, 56px);
}
.hero__facts li {
display: flex;
align-items: center;
gap: 10px;
min-height: 32px;
font-family: var(--display);
font-weight: 600;
font-size: 13px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--bone);
}
.hero__facts .icon { color: var(--gold); width: 20px; height: 20px; }
/* The four facts are one line only where one line fits them: about 1236px
of column (the four measure 1100px together, plus three gaps). Narrower
than that they are TWO BY TWO, never three and an orphan: at 1024 the
wrapping row put three facts over one, and at 768 two over two with the
second row out of line with the first. My call, from R11 and R30 (the same
odd-remainder class as the work grid's orphan); reversible by deleting
this query. The phone tier below centres each cell. */
.hero__inner { container-type: inline-size; container-name: heroinner; }
/* The 2x2 spans the hairline too: the second column is pushed to its right
end, so the pair of columns fills the rule rather than stopping 78px short
of it at 768 (ink ended at 658 against a 736 container). */
/* ~~pushed to its right end~~ STRUCK 2026-09-28, polish-1 round 4
(sibling-evenness-4-5): two max-content columns thrown to the rule's ends
left the inner void at whatever the left column's labels measured, 196 on
the first row and 106 on the second at 768, 420 and 330 at 1024, two
columns at the far edges with an empty middle. The 2x2 is now the phone's
construction (below 641): two equal halves of the rule, each fact centred
in its half as one unit (mark and label), so the four marks pitch evenly
about the hero's axis (R12) and both rows match. The mark stays beside the
label here, where every label holds one line in its half (it goes above on
the phone, where they wrap). Measured as each li's Range against
.hero__facts' box at 768 and 1024 (measure/round4-layout.mjs facts).
My call, from R12 and R30; reversible by restoring repeat(2, max-content)
and space-between. */
@container heroinner (max-width: 1236px) {
.hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero__facts li { justify-content: center; }
/* AN ODD LAST FACT IS CENTRED ACROSS BOTH COLUMNS, 2026-10-02: the strip is
three while the licence fact is off (index.html, the hero facts comment),
and two over a left-hand orphan is the R11 remainder the 2x2 exists to
avoid. Keyed on the count, not on today's three: with four facts the
last child is even and this matches nothing. My call, from R11 and R12;
reversible by deleting the rule. */
.hero__facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* THREE FACTS HOLD ONE LINE FURTHER DOWN THAN FOUR DO, 2026-10-02. The 1236px
above is where four stop fitting; the three measure 878px of ink together
(202, 391 and 285 at 1440, measure/facts-work-drawer.mjs), and with their
two gaps they need about 958px of column, so they stay on the hairline,
thrown to its ends like the wide tier, down to a 980px column. Below that
they take the grid above. Matches only a strip with no fourth fact, so the
four are untouched when the licence fact returns. My call, from R3 (the
strip spans its hairline); reversible by deleting this query. */
@container heroinner (min-width: 980px) and (max-width: 1236px) {
.hero__facts:not(:has(li:nth-child(4))) { display: flex; }
}
/* ---- THE CUT GRID ----------------------------------------------------
A band whose BODY (a photograph, the map) runs to the glass at any width
while the copy stays on the container's measure. Two rails take the space
outside the container (at least a gutter; more on a wide screen), the copy
sits on the second track, the body spans from the fourth track to the
right glass. A negative margin cannot do this: it reaches the container's
edge, and on a screen wider than the container that edge is not the
glass (Ethan, 2026-09-28: "this block image isnt touching the right of the
screen"). Percentages here resolve against the band, which is full width. */
.cut {
--cut-copy: 7fr;
--cut-body: 5fr;
display: grid;
grid-template-columns:
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)))
minmax(0, var(--cut-copy))
clamp(40px, 1.6078rem + 3.6601vw, 96px)
minmax(0, var(--cut-body))
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
align-items: center;
}
.cut__copy { grid-column: 2; }
.cut__body { grid-column: 4 / 6; }
/* ---- 2. about -------------------------------------------------------- */
/* THE CUT: copy at the left on the paper, the photograph a BODY at the right
running to the glass and to the band's top and foot, taller than the copy
needs and cut by the band rather than fitted to it, with the lit edge on its
leading (left) side. The copy is centred against the body. */
/* No padding on the copy: an 8px padding-block stacked on the band's own put
About's first ink 8px lower than every sibling band's (eyebrow ink top less
section top: 72, 97 and 121 at 390, 768 and 1440 against 64, 89 and 113 for
Services and Trust), and its last ink 8px higher off the foot. The body
still spans the copy plus both band paddings. My call, from R11
(sibling-evenness-2-7); reversible by restoring padding-block: 8px. */
/* No min-height: the body's height is the copy's plus both band paddings
(R53), which measured 772 to 856px at every width above 1180, so the old
560px floor never bound and only claimed it might. */
.about__photo {
position: relative;
align-self: stretch;
margin-top: calc(-1 * var(--band-y));
margin-bottom: calc(-1 * var(--band-y));
}
.about__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 45%;
}
.about__photo::before {
content: '';
position: absolute;
left: -9px;
top: 0;
bottom: 0;
width: 3px;
background: var(--gold);
transform-origin: center top;
z-index: 1;
}
.is-armed .about__photo[data-lit]::before { transform: scaleY(0); }
.is-armed .about__photo[data-lit].is-in::before { transform: none; transition: transform 640ms cubic-bezier(0.2, 0.6, 0.2, 1); }
/* R41 ON THE SIDE-BY-SIDE TIER: A CONTENT IMAGE NEVER EXCEEDS ONE VIEWPORT
(Ethan, 2026-08-08, of an About image: "thats a no no always"). The cut
body is the copy plus both band paddings, 837 to 846px from 1181 to 1299
and 785 to 795 from 1400 up, whatever the window's height, so on a laptop
it could never be seen whole: 841 against 728px of glass under the bar at
1240 x 800, 846 against 648 at 1280 x 720, 787 against 588 at R41's own
audit floor, 1440 x 660, and against 718 at 1440 x 790. The stacked tier
already capped it at the glass; this side of the breakpoint did not.
WHERE THE CUT WOULD OUTGROW THE GLASS, THE BODY FITS THE COPY instead: no
bleed into the band's paddings, centred on the copy, never taller than the
glass. It still runs to the right glass (the half Ethan ruled, DL 13) and
keeps its lit edge; it stops short of the band's top and foot, which was
the DERIVED half (DL 5b). Two thresholds because the body is two heights:
846 + 72 of bar = 918 below 1400, 795 + 72 = 867 from 1400. A cap that
merely clamped the cut would leave 3 to 7px slivers of paper at the band's
edges wherever the glass fell just short, so the switch is the whole
construction or none. Read as .about__photo's box against innerHeight less
--nav-h in Playwright at 1240 x 800, 1280 x 720, 1440 x 660, 790 and 900,
1512 x 982 and 1920 x 1080. My call, from R41 (ethan-lens-3-4,
ethan-lens-2-12, fe-2-8); DL 5b's line wants the same amendment (another
partition's file). Reversible by deleting both queries. */
@media (min-width: 1181px) and (max-width: 1399px) and (max-height: 917px),
(min-width: 1400px) and (max-height: 866px) {
.about__photo {
align-self: center;
height: min(100%, calc(100svh - var(--nav-h)));
margin-block: 0;
}
}
.prose { display: grid; gap: 20px; }
.prose p { text-wrap: pretty; } /* see .service__body */
.about .prose { margin-top: 28px; }
/* THE ANSWER TO THE FEAR, given weight where it already sits: "No cutting
corners, no being treated as a number." is the SOP's answer to the
homeowner's fear (DL section 1: one job on a big firm's list, the
apprentice, the corners cut), and it was set at the body's weight and
colour mid-paragraph, the same as the UK history before it. The reading
face at 600 in ink; no word moved or repeated (section 11 refused a
pull-quote for that reason). My call; reversible by deleting the strong. */
.prose__answer { font-weight: 600; color: var(--ink); }
/* His signature, in the display face, with the section's device above it:
the one line of his own voice on the page. */
.signoff {
margin-top: 32px;
font-family: var(--display);
font-weight: 700;
font-size: clamp(20px, 1.1544rem + 0.3922vw, 26px);
color: var(--ink);
}
.signoff::before {
content: '';
display: block;
width: 28px;
height: 3px;
margin-bottom: 14px;
background: var(--gold);
}
/* THE LINK WEIGHT LEADS BY ONE GAP ON INK, in both its places. After the
sign-off, a display line with its own half-leading, the 32px margin read
46 to 48px from the sign-off's ink to the link's words, against 34 after
the map card's places at every width (sibling-evenness-4-4). 20 here puts
About at the Area value. Measured as the link text's Range top less the
previous element's Range bottom at 390, 768, 1024, 1440 and 1920
(measure/round4-layout.mjs linkLead). My call, from R11; reversible by
deleting this rule. */
.about .link-cta { margin-top: 20px; }
/* ---- 3. services: seven cuts, the photograph swapping sides ---------- */
/* Ethan, 2026-09-28, the hand pass after the polish line: "i think we get
some of the photos and keep the graphics so we can do a sort of
alternating thing like allen roofing". RULED. Allen Roofing's services
(apps/allen-roofing ServicesGrid, live at allenroofing.nz) are full-bleed
halves: the photograph fills one half to the glass, the words sit centred
in the other half, and the sides swap row by row, no rules between. Here
that is THE CUT, the device About already carries (DL 4 and 11), run seven
times and mirrored on alternate rows, so the band is this site's own
construction rather than a port (R17, R56). The drawings stay: above the
title as the row's mark on the five rows that carry a photograph, and at
body scale in the photograph's slot on the two that have none (Bathrooms,
Consent-Ready Plans), so every row has a body and every row carries its
drawing exactly once. Which photograph stands beside which service is a
MOCK (site-manifest `service-photos`): the pool is not labelled by
service, and Karan's row already asks where the photographed builds were.
The rounds 2 to 5 constructions (the ruled index, the 128px drawing unit
and their measurements) are superseded by this ruling and live in git;
abaf541d3 is the last commit carrying them. The --svc-drawing and
--svc-gap tokens stay on #services because the steps' timeline below
still sets its numeral column on them. */
#services {
--svc-drawing: 128px;
--svc-gap: clamp(32px, 1.5rem + 1.5vw, 56px);
}
.services { margin-top: var(--head-gap); }
.service {
--cut-copy: 6fr;
--cut-body: 6fr;
position: relative;
}
/* THE MIRRORED CUT: the body runs to the LEFT glass and the copy sits on the
fourth track. Odd rows take it, so the band opens against About's cut
(body right) with a body left, and the eye walks Ethan's zigzag (DL 14) at
band scale rather than row scale. */
.cut--left {
grid-template-columns:
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)))
minmax(0, var(--cut-body))
clamp(40px, 1.6078rem + 3.6601vw, 96px)
minmax(0, var(--cut-copy))
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.cut--left .cut__body { grid-column: 1 / 3; }
.cut--left .cut__copy { grid-column: 4; }
/* The photograph is first in source (it is first on a phone), so on the
body-right rows the grid's sparse placement would drop the copy, whose
column is behind the cursor, to a second row: both cells are pinned to row
one. Measured 2026-09-28 before the pin: even rows 641px against 454. */
.service .cut__body, .service .cut__copy { grid-row: 1; }
/* THE PHOTOGRAPH: 3:2, cover, no border and no rule (the frame, DL 4; the next
row's photograph is its own edge, as on Allen). The row's height is the
photograph's, a consequence of the column (R53), about 470px at 1440. */
.service__photo {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--black);
}
.service__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* THE DRAWN BODY: the same box on black with the drawing centred at 46
percent of it (320px at 1440, the largest these hairlines were drawn to
carry, DL 14). */
.service__photo--drawn { display: grid; place-items: center; }
.service__photo--drawn .drawing { width: 46%; max-width: 360px; }
.drawing { width: 100%; height: auto; aspect-ratio: 160 / 110; color: var(--gold); }
.drawing--badge { width: 72px; max-width: 72px; height: 72px; aspect-ratio: 1; color: var(--gold); } /* mass marks: the plain gold (round 5; the tint fill is gone from drawings/marks.mjs) */
.icon--service { width: 34px; height: 34px; color: var(--gold); }
/* THE MARK above the title: the drawing at half its drawn size (80 x 55). */
.service__text { max-width: 36rem; }
.service__mark { width: 80px; margin-bottom: 18px; }
.service__title {
font-size: clamp(26px, 1.25rem + 1vw, 36px);
font-weight: 600;
line-height: 1.12;
color: var(--ink);
}
.service__body { margin-top: 14px; font-size: clamp(17px, 1rem + 0.35vw, 20px); color: var(--body); line-height: 1.55; text-wrap: pretty; }
/* THE HALVES HOLD TO 901. The cut stacks at 1180 for About's sake (its body
in a 5fr track was taller than the glass, the round-3 note at that tier),
but a service row's 3:2 body in a 6fr track is 296px tall at 1024 and the
stacked row would be 821, seven times over; so between 901 and 1180 the
rows re-assert the two-column cut. Measured 2026-09-28 at 1024 and 1180
before this block: rows 821 and 911px, the photograph the full glass. */
@media (min-width: 901px) and (max-width: 1180px) {
.service.cut {
grid-template-columns:
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)))
minmax(0, var(--cut-copy))
clamp(40px, 1.6078rem + 3.6601vw, 96px)
minmax(0, var(--cut-body))
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
gap: 0;
padding-inline: 0;
}
.service.cut--left {
grid-template-columns:
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)))
minmax(0, var(--cut-body))
clamp(40px, 1.6078rem + 3.6601vw, 96px)
minmax(0, var(--cut-copy))
minmax(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
}
.service .cut__copy { grid-column: 2; }
.service .cut__body { grid-column: 4 / 6; margin-inline: 0; }
.service.cut--left .cut__body { grid-column: 1 / 3; }
.service.cut--left .cut__copy { grid-column: 4; }
.service .cut__body, .service .cut__copy { grid-row: 1; }
}
/* STACKED (900 and under): the photograph first, edge to edge, then the
words on the gutter, 40px clear before the next row's photograph. The
mirrored cut's spans come off here because the stacked cut is one column
(a span of two in one column would open a second), and the two cells take
rows one and two. The photograph goes 16:9 stacked so a row is under a
screen on a phone. */
@media (max-width: 900px) {
.cut--left .cut__body, .cut--left .cut__copy { grid-column: 1; }
.service .cut__body { grid-row: 1; }
.service .cut__copy { grid-row: 2; }
.service { gap: 24px; padding-bottom: 40px; }
.service__photo { aspect-ratio: 16 / 9; }
.service__photo--drawn .drawing { width: 40%; max-width: 260px; }
.service__mark { width: 64px; margin-bottom: 12px; }
}
/* ---- 3, foot: how a job runs, HG's ProcessRun ported ------------------
Four numbered steps on ONE RULE (the page's rule device, run as a thread):
below 1024 a left-hand timeline, the numeral in a 48px column and the rule
dropping from it to the next step; from 1024 four across, each step centred
under its numeral and the rule running across through the numerals'
centres, HG's `.run` at the same breakpoint (apps/hg-electrical styles.css,
`.run__step::before`, and Ethan's "centred above" on it, 2026-09-14). HG's
62px disc is not ported: this page has no curve (DL 4). The numeral box is
a square of the same width as the phone column so the rule's ends are
computed, not guessed. Measured with
node static-sites/paraone-residential/measure/structure-round3.mjs (steps).
My call, from R56 and comparative-mass-3-1; reversible by deleting this
block and the list in index.html. */
.steps {
--step-num: 48px;
--steps-gap: clamp(28px, 1.2rem + 1.2vw, 48px);
margin-top: 56px;
padding: 0; /* an ol, which the file's list reset (ul only) does not reach */
list-style: none;
display: grid;
}
/* BELOW 1024 THE NUMERAL TAKES THE SERVICE DRAWING'S TRACK, so the step words
start on the service words' x: a 48px column and a 20px gap put them at 88
under service words at 124 at 390, and at 100 under 196 and 76 at 768, a
third edge in one band (stranger-on-a-phone-4-5). Now the column is
--svc-drawing and the gap --svc-gap (the band's, #services), the numeral
centred in it and the thread dropping from its centre; at 641 to 1023 that
is the odd rows' x, the one the band opens on. Measured as each
.step__title's and .service__title's Range left at 390 and 768 in
Playwright (measure/round4-layout.mjs stepTitleX, svcTitleX).
My call, from R2 and R11; reversible by writing var(--step-num) and 20px
back into these two lines and the thread's left. */
.step {
position: relative;
display: grid;
grid-template-columns: var(--svc-drawing) minmax(0, 1fr);
column-gap: var(--svc-gap);
padding-bottom: 28px;
}
.step__num { justify-self: center; }
.step:last-child { padding-bottom: 0; }
.step::before {
content: '';
position: absolute;
left: calc(var(--svc-drawing) / 2);
top: calc(var(--step-num) + 8px);
bottom: 8px;
width: 1px;
background: var(--rule-light);
}
.step:last-child::before { display: none; }
.step__num {
width: var(--step-num);
height: var(--step-num);
display: grid;
place-items: center;
font-family: var(--display);
font-weight: 600;
font-size: clamp(30px, 1.5rem + 0.6vw, 40px);
line-height: 1;
color: var(--gold);
}
.step__title {
font-size: clamp(19px, 1.0625rem + 0.3vw, 24px);
font-weight: 600;
line-height: 1.2;
color: var(--ink);
padding-top: 11px;
text-wrap: balance;
}
.step__body { margin-top: 8px; color: var(--body); line-height: 1.5; text-wrap: pretty; }
@media (min-width: 1024px) {
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--steps-gap); }
.step {
grid-template-columns: minmax(0, 1fr);
justify-items: center;
align-content: start;
text-align: center;
padding-bottom: 0;
row-gap: 14px;
}
.step__title { padding-top: 0; }
/* THE BAND'S BUTTON CENTRES UNDER THE CENTRED RUN, as HG sets its
ProcessRun's action ("desktop:text-center" on the paragraph holding it,
apps/hg-electrical ProcessRun/Component.tsx). The steps are centred on
the band's axis from here up and the page-wide band__foot left the
button flush left under them, 48..317 at 1440 against the run's axis at
720: three alignments in one band. The head stays flush left: the head
over its rows is the band's own stack. Only the Services foot sits under
a centred group (the Our Work foot sits under a flush grid and a flush
head, and keeps its edge). My call, from R56 and R2 (fe-4-6); reversible
by deleting this line. Button centre on the run's axis within 1px at
1024, 1440 and 1920 after (round4-partition2.mjs steps, in measure/). */
#services .band__foot { text-align: center; }
/* the rule runs from this numeral's right edge, 12px clear, to the next
numeral's left edge, 12px clear: this cell's centre plus half a numeral,
through the gap, to the next cell's centre less half a numeral */
.step::before {
left: calc(50% + var(--step-num) / 2 + 12px);
right: calc(var(--step-num) / 2 + 12px - 50% - var(--steps-gap));
top: calc(var(--step-num) / 2);
bottom: auto;
width: auto;
height: 1px;
}
}
/* STRUCK 2026-09-28, polish-1 round 3 (ethan-lens-3-5), with the query it
argued for: the ruled index below read as small end-marks on a ruled table
(one line of words per 186px row, an empty drawing slot on every row), and
its premise that "no text measure fills that" was the wrong question: the
row does not have to be filled across, it has to be set by its words. The
comment is kept as the record; the rules are deleted.
~~THE WIDE TIER: THE ROW IS A RULED INDEX, THE DRAWING STILL CROSSING SIDES.
Above 1240 the unit above (a 160px drawing, then the title over a one
sentence body) measures 850 to 920px and the row it sits in 1145 to 1584, so
every row was about half empty: 434 to 629px of black per row at 1440, 667
to 772 at 1920, the words jumping between x=380 and x=830 row to row. No
text measure fills that, because the SOP's service bodies are one sentence.
So the row takes four columns shared by all seven rows (a subgrid): a
drawing slot at each end, the title, and the body beside it. The drawing
sits in the left slot on odd rows and the right slot on even rows, which is
the zigzag Ethan ruled (DL 14), and the titles and bodies now start on one
x each, down the whole band, so the words read as one schedule and fill the
row between the two slots. The title and the body share a first baseline.
A head beside the rows (the critic's proposal) was refused: Ethan, on
Eclipse's /process, "i [do not] like the heading in a seperate coloumn from
its body content" (docs/v2/language/eclipse-air/spec.md, "headings stack").
Measured in measure/services.mjs, the ink void per row (the row's
width less the span from its first ink to its last): see DL section 16.
My call, from R13 and R35, alternation kept per DL 14 (ethan-lens-2-3);
reversible by deleting this query.~~ */
/* The round-4 wide tier (the ruled index from 1024 up) was here; superseded
2026-09-28 by the cuts (section 3 above) and kept in git. */
/* ---- 4. trust: one strip of five equal cells -------------------------- */
/* ONE LINE OF FIVE, evenly pitched, ruled top and bottom and nothing between
(Ethan, 2026-09-28: "logos thing could look a lot more polished"). The two
drawn badges sit at the same height, their label under. Pitch is judged on
the marks' centres, so the tracks are equal (R12).
~~The three marks sit in MONOCHROME at one visual weight and take their own
colour under the pointer.~~ STRUCK 2026-09-28, polish-1 partition 1: the
marks are credentials, and grey at 0.72 read as disabled "as seen in"
logos; on a phone, the SOP's primary device, no pointer ever brought the
colour back, and neither referent greys its marks (grep for grayscale in
apps/hg-electrical and apps/eclipse-air: map only). They sit in their own
colour at rest, and without a hover, because they are not links (R42). */
.trust {
margin-top: var(--head-gap);
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border-top: 1px solid var(--rule-light);
border-bottom: 1px solid var(--rule-light);
}
/* WITHOUT THE LBP CELL THE STRIP IS FOUR EQUAL CELLS, 2026-10-02 (index.html,
the trust comment: the cell is off until Buddy's licence is through). Five
columns holding four cells left a bare fifth at the right. Keyed on the
cell's presence, so putting it back restores the five with no edit here.
Above 900 only: this selector outranks the 900 tier's six-column grid.
My call, from R3 and R12; reversible by deleting the rule. */
@media (min-width: 901px) {
.trust:not(:has(.trust__logo--lbp)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ONE MARK LINE (R11, R12). Every cell is the same two rows: a mark slot the
height of the tallest mark (the NZCB chevron, --mark-slot), then the label. The
~~three logos have no label, so all five marks sit in one slot at one height
and their centres share a line, with the two labels hanging under it.~~
Since 2026-09-28 evening (Ethan: "need text under these") every cell
carries its SOP name under the mark, and the two drawings bookend the
three logos; the mark line and the label row are the same two grid rows
for all five. It was
a centred flex column per cell, where a badge's label pushed its drawing up:
the badge centres stood 19px above the logos' at 1440. The cells take their
height from that content (R53); the 176px and 132px floors are gone.
My call, from R11 and R12; reversible by restoring the flex column. */
.trust__logo,
.trust__badge {
/* 92px to 120px: the marks scale up to 1.3 times by 1920 (104 at 1024, 111
at 1440, off the slope-intercept form at :root; it was flat to 1095), where
five of them covered 10.7% of a 1584 x 178 strip at 1920. The logo heights
below are fractions of this slot (the eye-set 58, 92 and 50 of 92), so the
set keeps its balance as it scales. My call, from R53 and the band's one
job; reversible by setting 92px back. */
--mark-slot: clamp(92px, 5.3039rem + 1.8301vw, 120px);
padding: 32px 20px;
display: grid;
grid-template-rows: var(--mark-slot) auto;
align-content: start;
align-items: center;
justify-items: center;
row-gap: 14px;
text-align: center;
}
.trust__logo img {
width: auto;
height: auto;
max-width: 100%;
}
/* Heights set against each other by eye so the three read as one weight: the
LBP lockup wide and low, the NZCB badge tall, the ITM block squat (58, 92
and 50 of the 92px slot, kept as fractions of it).
~~58, 92 and 50 read as one weight~~ MEASURED otherwise 2026-09-28, polish-1
round 5 partition 1 (comparative-mass-4-7): weighted ink (the sum of each
mark pixel's darkness against paper) at 1440 was LBP 2932, NZCB 3653, ITM
4020, so the solid ITM block, the smallest box, was the heaviest mark and
the LBP lockup, whose words are light grey, the lightest (1.37 to 1). The
fractions are now set by weight, not by one height: LBP up to 0.70 of the
slot, ITM down to 0.518, NZCB unchanged as the slot. Read with
node static-sites/paraone-residential/measure/trust-ink.mjs (weighted per member, per width).
My call, from R11 (peers read at one weight); reversible by restoring 0.63
and 0.543. */
.trust__logo--lbp img { max-height: calc(var(--mark-slot) * 0.70); }
.trust__logo--nzcb img { max-height: var(--mark-slot); }
.trust__logo--itm img { max-height: calc(var(--mark-slot) * 0.518); }
/* LBP IS THE ONE MARK THE CELL'S WIDTH CAPS BEFORE ITS HEIGHT. At 1024 its
cell had 146px inside 20px of side padding, so it drew at 146 x 49 and
1407 of weighted ink against NZCB's 3172 (44 percent). The strip has no
hairlines between cells, so a logo cell's side padding guards only the
neighbour's distance, and LBP's neighbour NZCB is 50px wide in a cell of
the same size: at 8px the ink gap between them is still 70px or more.
Scoped to the one-line tier; the 900 and 640 tiers set their own. Read
with measure/trust-ink.mjs at 901 to 1440. My call, from R11; reversible
by deleting this query. */
@media (min-width: 901px) {
.trust__logo--lbp { padding-inline: 8px; }
}
/* THE TWO DRAWN BADGES AT THE MARKS' MASS. At 72px their hairlines were about
1px and their ink 58 x 20 (years) and 65 x 42 (local), beside logos whose
ink is 50 to 92px tall and solid. Their symbols carry a 120 x 120 viewBox
with the ink in a band (years y 36 to 70, local y 34 to 104), so each is
sized for its ink and then moved so the INK's centre, not the box's, sits
on the mark line: years at 1.39 slots (128px on the 92px slot, ink about
102 x 36, the stroke about 1.9px), translated down 7/120 of its box; local
at 1.04 slots (96px, ink about 86 x 56), translated up 9/120. ~~Measured ink
centres of all five on one line to the pixel at 1024, 1181, 1440, 1920 and
2560 (box centre less or plus that fraction of the box, off
getBoundingClientRect).~~ STRUCK 2026-09-28, polish-1 round 5, partition 2
(fe-4-7): that was arithmetic on boxes, not a reading of ink. Read off the
pixels instead (each .trust li screenshotted with .trust__label hidden, the
bounding box of every pixel whose R+G+B is under 705 on the white paper),
the five ink centres span 2.0px at 901, 1024 and 1920 and 1.5 at 1440 and
2560, so they share one line within 2px; the critic's 98 / 80 against
89 were the BOX centres, which this translate moves on purpose. (The
getBBox ink column of measure/trust-badges.mjs disagrees with the pixels,
106 against 86 for the years badge at 1440, and is not the instrument for
this.) Percent translate is of the element's own box, so the
correction holds at every size.
THE WIDE BADGE CENTRES EVEN WHEN IT OVERFLOWS ITS CELL (fe-4-7's adjacent
gap, taken). At 1.39 slots the years drawing is wider than its cell's
content box from 901 to about 1000 (141 against 121 at 901), and the cell's
one auto column grew to the drawing and started at the padding edge, so its
ink stood right
of its cell's centre by 9.5px at 901, 6.5 at 940, 3.0 at 980 and 1.0 at
1000 (the other four within 1px), an uneven pitch on the one row R12
judges by pitch. The badge cell's column is now minmax(0, 1fr), the content
box, and `unsafe center` centres the drawing in it and lets it spill evenly
into the cell's own empty padding. Badges only: on the logo cells the same
column changed the phone line's image sizes (ITM 50 to 40px tall at 390),
because there the cells are content-sized flex items. Same pixel reading
as above, and the phone tiers read identically before and after (320, 390,
640, 768, 900). My call, from R12; reversible by deleting the
justify-self and the .trust__badge column line. My call, from R11 (peer weight) and DL
section 13 (the badges are drawn, which is kept rather than swapped for
HG's icon-and-label); reversible by restoring the 72px badge. The cleaner
fix is a viewBox cropped to the ink in drawings/marks.mjs.
THEIR WEIGHT, DECIDED IN ROUND 3 (sibling-evenness-2-11, fe-3-7): the
badges match the logos' box but not their mass (dark-pixel mass at 1440:
the local badge about a tenth of a logo's), because hairlines beside solid
fills cannot. The course is a heavier stroke on the two badge symbols
only, about 2.5 to 3px at their rendered size, generated in
drawings/marks.mjs. ~~It cannot be done from here: each path in
drawings.svg carries its own stroke-width attribute, which beats anything
a