/* ============================================================
rhythm.css, UX and UI pass 1
22 Sep 2026
Loaded last on every page, after nav.css. Rules are prefixed
with html so they win over the inline sheets whatever the load
order. Delete the to revert the whole pass.
1 vertical rhythm:one spacing scale for every page
2 phone hero: headline inside the first screen
3 Services questions: an accordion, first one open
4 type floor: no label under 11px, greys lifted to AA
5 logo wall: stacked marks scaled to the same optical weight
6 three structure moves: outcome row on one line
7 testimonial carousel: wider measure, one size down
============================================================ */
/* 1 vertical rhythm ---------------------------------------
Home used --bay: clamp(104px, 17vh, 250px) (153px at 900 tall);
inner pages used clamp(92px, 9.2vw, 136px) (132px at 1440 wide).
Both tied to the viewport, both stacking into 250 to 390px of
empty paper between sections. One scale now, in vw only. */
html:root{
--bay:clamp(64px, 6.6vw, 100px); /* the default section */
--bay-s:clamp(44px, 4.2vw, 60px); /* evidence and marquee bands */
--bay-m:clamp(56px, 6vw, 88px); /* markets page */
--bay-l:clamp(84px, 8.4vw, 128px); /* the two dark argument bands */
}
html .tslide{padding:var(--bay) 0}
html .sysbuild{padding:var(--sp-s) 0 var(--sp-s)}
html .sysbuild + .moves{padding-top:var(--sp-s)}
html .enq{padding:var(--bay-l) 0}
html .enq .q{margin-top:clamp(32px,3.6vw,48px)}
html .phead{padding-top:var(--sp-m);padding-bottom:var(--sp-s)}
html .footer{padding-top:clamp(32px,4vw,52px)}
html .wk-case, html .wk-out, html .wk-live, html .wk-wall{padding:var(--bay) 0}
html .wk-priv, html .wk-next{padding:var(--bay-l) 0}
/* 2 phone hero ---------------------------------------------
The portrait was a 4:4.5 box, 440px tall on a 390px phone, so
the headline began at 670px and the button at about 1,000px.
Face sits in the top of the frame (center 14%), so a shorter
crop keeps it. */
@media(max-width:900px){
html .arrive .pic{aspect-ratio:auto;height:clamp(300px,42svh,400px)}
html .arrive .txt{padding-top:clamp(28px,4.5vh,40px);padding-bottom:var(--sp-s)}
html .arrive .who{margin-bottom:clamp(18px,3vh,28px)}
html .arrive .line{margin-top:clamp(20px,3vh,30px)}
html .arrive .acts{margin-top:clamp(24px,3.6vh,38px)}
}
/* 3 Services questions accordion ----------------------------
Nine answers were open at once, 3,186px of page. Each row is
now a : question and a plus on the left, answer on the
right when open. Text stays in the DOM for search. */
html .caps details.r{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(20px,4vw,54px);
align-items:start;padding:clamp(22px,2.4vw,30px) 0;border-bottom:1px solid var(--line);transition:padding-left .3s}
html .caps details.r summary.ct{list-style:none;font-size:var(--fs-h4);line-height:1.15;cursor:pointer;display:flex;justify-content:space-between;
align-items:flex-start;gap:20px;margin:0;outline-offset:6px}
html .caps details.r summary.ct::-webkit-details-marker{display:none}
html .caps details.r summary.ct::after{content:"+";flex:none;font-family:var(--sans);font-weight:300;
font-size:var(--fs-h4);line-height:1;margin-top:.2em;color:var(--muted);transition:transform .35s ease}
html .caps details.r[open] summary.ct::after{transform:rotate(45deg)}
html .caps details.r summary.ct:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
html .caps details.r .cd{margin:0;padding-top:.45em}
html .caps details.r:not([open]) .cd{display:none}
@media(max-width:860px){
html .caps details.r{grid-template-columns:1fr;gap:12px}
html .caps details.r .cd{padding-top:0}
}
/* 4 type floor and greys ------------------------------------
Twenty-five labels on Home were 9 to 9.6px; stone grey at 12px
measured 2.4:1 on paper. Floor is 11px; stone becomes muted
where it carries words. */
html .label, html .label.rule, html .head-row .label.rule,
html .mvmenu-group b, html .mvmenu-fine, html footer .fine, html .footer .fine, html .fine span,
html .wk-go, html .ts-count{font-size:var(--fs-label)}
html .mv-c b, html .offer-meta dt, html .pg-seq li b, html .pg-kicker, html .pg-label, html .pg-note,
html .mk-city, html .mk-card .i, html .mkmap-head .code, html figcaption span, html .uni-note,
html .wk-ch, html .wk-meta span, html dl dt{font-size:var(--fs-label)}
html .mark-desc{font-size:var(--fs-label)}
html .band .meta, html .tslide .meta, html .index .meta, html .her .meta, html .ts-count,
html .pg-label, html .pg-note, html .mk-card .i{color:var(--muted)}
html .adv .adv-lede, html .adv p{color:rgba(250,250,249,.76)}
/* 5 logo wall ------------------------------------------------
The marks are cut to one optical system already; the stacked
two-line marks still read small beside the wide wordmarks. */
html .band .track img[src*="california-closets"]{height:calc(clamp(44px,4.4vw,60px)*1.34)}
html .band .track img[src*="fish-media-group"]{height:calc(clamp(44px,4.4vw,60px)*1.2)}
html .band .track img[src*="elekta"]{height:calc(clamp(44px,4.4vw,60px)*1.1)}
html .band .track img[src*="oracle"],
html .band .track img[src*="globe-and-mail"]{height:calc(clamp(44px,4.4vw,60px)*.9)}
/* 6 three structure moves ------------------------------------
Each card has seven parts. Rows are shared across the three
cards, so the outcome line and its rule sit level. */
@supports(grid-template-rows:subgrid){
@media(min-width:961px){
html .mv-grid{grid-template-rows:auto auto auto auto auto auto auto}
html .mv{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:12px;align-content:start}
html .mv .mv-o{align-self:start}
html .mv .mv-go{align-self:end}
}
}
/* 7 testimonial carousel -------------------------------------
The longest quote ran ten lines at 47px in a 25ch column. */
html .ts-q p{max-width:36ch;font-size:var(--fs-h3);line-height:1.3}
/* 8 homepage section rhythm (22 Sep, second pass) -------------
Measured content-to-content gaps ran from 97px to 326px, so the
page read as uneven. Every light section now carries the same
padding, the logo band's inner gaps are tightened, and a hairline
marks each light-to-light change so every section reads as its own
chapter without needing extra paper around it. */
html{--sec-pad:clamp(56px,5.6vw,84px)}
html .ledger-band{padding:var(--sp-s) 0 var(--sec-pad)}
html .sysbuild{padding:var(--sec-pad) 0}
html .sysbuild + .moves, html .moves{padding:var(--sec-pad) 0}
html .band{padding:var(--sec-pad) 0}
html .band .meta{margin-bottom:clamp(20px,2.2vw,30px)}
html .band .go{margin-top:clamp(24px,2.6vw,36px)}
html .tslide{padding:var(--sec-pad) 0}
html .tslide .ts-stage{margin-top:clamp(22px,2.6vw,36px)}
html .ts-nav{margin:clamp(20px,2.4vw,32px) 0 22px}
html .her{padding-bottom:var(--sec-pad)}
html .shell{padding:var(--sec-pad) 0}
html .fitband{padding:var(--sec-pad) 0 var(--sp-m)}
html .adv{padding-bottom:var(--sp-m)}
html .enq{padding-top:var(--sp-m)}
html .moves, html .tslide, html .shell, html .fitband{border-top:1px solid var(--line)}
/* 9 the nautilus hairline on "Ways to work together" (22 Sep) ----
It was sized at 70vw and hung off the top right, so on wide screens
its tail cut through the engagement columns and the body copy.
It now sits beside the heading only, sized to the heading block,
and never reaches the five columns below. */
html .adv .spiral{width:clamp(300px,31vw,520px);height:clamp(300px,31vw,520px);
right:calc(var(--gut) - 2vw);top:clamp(28px,4vw,72px);opacity:.26}
@media(max-width:1100px){html .adv .spiral{width:34vw;height:34vw;top:24px;opacity:.2}}
@media(max-width:760px){html .adv .spiral{width:58vw;height:58vw;right:-10vw;top:-6vw;opacity:.12}}
/* 10 Contact page (22 Sep) -------------------------------------
The horse plate fills the gap between the heading and the form;
the form moves to hairline fields, one label voice, one body tone. */
body[data-page="contact"] .phead{padding-bottom:var(--sp-s)}
.enq-plate{margin:0;height:clamp(260px,40vw,560px);overflow:hidden;background:#121212}
.enq-plate img{width:100%;height:100%;object-fit:cover;object-position:62% 62%;display:block;
filter:grayscale(1) contrast(1.06) brightness(.94)}
body[data-page="contact"] #write{padding-top:var(--sp-s)}
body[data-page="contact"] .enq-g{align-items:start;gap:clamp(40px,7vw,120px)}
body[data-page="contact"] .enq-side .pg-seq li span{color:var(--body);font-size:var(--fs-body);line-height:1.6}
body[data-page="contact"] .enq-side .testiline{font-size:var(--fs-lead);line-height:1.5;margin-top:clamp(8px,1vw,14px)}
body[data-page="contact"] .enq-side .testiline cite{font-size:var(--fs-label);letter-spacing:.16em;line-height:1.8;margin-top:12px}
body[data-page="contact"] .enq-note{font-size:var(--fs-body);line-height:1.7;color:var(--body)}
body[data-page="contact"] .enq-note a.hl{font-family:inherit;font-style:normal;font-size:inherit;
color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:1px}
body[data-page="contact"] .enq-note a.hl:hover{border-bottom-color:var(--ink)}
body[data-page="contact"] .enq-form-h{font-family:'Cormorant','Cormorant Garamond',Georgia,serif;font-weight:400;
font-size:var(--fs-h3);line-height:1.05;margin:0 0 10px}
body[data-page="contact"] .enq-form-s{font-size:var(--fs-body);color:var(--muted);margin:0 0 clamp(20px,2.4vw,30px)}
body[data-page="contact"] .intake-form .fld{margin-bottom:clamp(20px,2.2vw,28px)}
body[data-page="contact"] .intake-form .fld span{font-family:'Archivo Expanded','Instrument Sans',sans-serif;font-weight:400;
font-size:var(--fs-label);letter-spacing:.16em;color:var(--muted);margin-bottom:4px;text-rendering:geometricPrecision}
body[data-page="contact"] .intake-form .fld span em{font-family:'Cormorant','Cormorant Garamond',Georgia,serif;
font-style:italic !important;font-size:var(--fs-body);letter-spacing:0 !important;text-transform:none;color:var(--muted);margin-left:4px}
body[data-page="contact"] .intake-form input,
body[data-page="contact"] .intake-form textarea,
body[data-page="contact"] .intake-form select{background:transparent;border:0;border-bottom:1px solid rgba(18,18,18,.28);
border-radius:0;padding:12px 0 10px;font-family:'Instrument Sans',sans-serif;font-size:var(--fs-body);color:var(--ink);box-shadow:none;
transition:border-color .3s ease}
body[data-page="contact"] .intake-form textarea{min-height:96px;resize:vertical}
body[data-page="contact"] .intake-form input:focus,
body[data-page="contact"] .intake-form textarea:focus,
body[data-page="contact"] .intake-form select:focus{outline:none;border-bottom-color:var(--ink)}
body[data-page="contact"] .intake-form ::placeholder{color:#8a8a88;font-style:normal}
body[data-page="contact"] .intake-form select{-webkit-appearance:none;appearance:none;padding-right:28px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23121212' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 4px center}
body[data-page="contact"] .intake-form button{margin-top:clamp(10px,1.4vw,18px);padding:17px 34px}
@media(max-width:860px){body[data-page="contact"] .enq-form{order:-1}}
/* 11 Services, "Everything this covers": the seventh group spans the
full row so the grid stays even and the new area reads as its own. */
html .build-grid .f.f-wide{grid-column:1/-1;padding-top:clamp(22px,2.4vw,32px);border-top:1px solid var(--line)}
html .build-grid .f.f-wide p{max-width:none}
/* 12 list markers: a thin line instead of an em dash, everywhere */
html .prod ul li:before, html .prod ul li::before{content:"";top:.82em;width:12px;height:1px;background:var(--muted)}
.dark .prod ul li:before, .sec.dark .prod ul li::before{background:rgba(241,241,240,.4)}
/* 13 Home, five engagements on phones: name and one line, tap to open */
@media(max-width:760px){
html .adv .two.four > div{border-top:1px solid rgba(250,250,249,.16);padding-top:18px}
html .adv .two.four{gap:0 !important}
html .adv .two.four > div h3{position:relative;cursor:pointer;padding-right:34px;margin-bottom:8px}
html .adv .two.four > div h3::after{content:"+";position:absolute;right:0;top:-.1em;font-family:'Instrument Sans',sans-serif;font-size:var(--fs-lead);font-weight:300;letter-spacing:0;transition:transform .3s ease}
html .adv .two.four > div.open h3::after{transform:rotate(45deg)}
html .adv .two.four > div .offer-meta, html .adv .two.four > div .go{display:none !important}
html .adv .two.four > div.open .offer-meta{display:grid !important;margin-top:14px}
html .adv .two.four > div.open .go{display:inline-block !important;margin:6px 0 22px}
html .adv .two.four > div > p{margin-bottom:18px}
}
/* 14 tighter rhythm, 23 Sep ----------------------------------
Sections still read as 160px of empty paper between blocks on a
laptop. One step down across the scale; where two paper sections
meet, the second one takes a shorter top. */
html:root{
--sec-pad:clamp(40px, 3.8vw, 58px);
--bay:clamp(48px, 4.4vw, 68px);
--bay-s:clamp(36px, 3.2vw, 48px);
--bay-l:clamp(64px, 5.8vw, 92px);
}
html .ledger-band{padding-top:var(--sp-s)}
html .fitband{padding-bottom:var(--sp-s)}
html .band + .tslide, html .moves + .band, html .sysbuild + .moves{padding-top:calc(var(--sec-pad) * .55)}
html .band .go, html .band .view-go{margin-top:clamp(18px,2vw,26px)}
/* 15 full-width footer wordmark, 23 Sep ----------------------
The name runs edge to edge with a small gutter; the fine line
underneath lines up with it. */
html .footer .wrap, html footer .wrap{max-width:none;width:auto;padding-left:clamp(16px,2.6vw,44px);padding-right:clamp(16px,2.6vw,44px);margin-left:0;margin-right:0}
html .footer .wm-giant, html footer .wm-giant{width:100%;max-width:none}
/* 24 Sep 2026: three homepage additions */
html .hero-note{margin-top:14px;font-size:var(--fs-small);letter-spacing:.02em;color:var(--body,#333)}
html .fits-next{margin-top:28px;max-width:64rem;font-size:var(--fs-body);color:var(--body,#333)}
html .fits-next a{border-bottom:1px solid var(--stone)}
html .adv .two.four > div:has(.offer-tag){position:relative}
html .adv .offer-tag{position:absolute;left:0;top:-34px;display:inline-block;white-space:nowrap;padding:3px 9px;border:1px solid rgba(250,250,249,.35);font-family:'Instrument Sans',sans-serif;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,249,.85)}
@media(max-width:760px){html .adv .two.four > div:has(.offer-tag){padding-top:54px !important}html .adv .offer-tag{top:18px}}
/* Bench: eight disciplines in four columns */
html .deliv.eight{grid-template-columns:repeat(4,1fr) !important}
@media(max-width:1100px){html .deliv.eight{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:600px){html .deliv.eight{grid-template-columns:1fr !important}}