/* ==========================================================================
On Ropes · "The Maintenance Programme"
Light, enterprise, trust-first. The visual world of the planned-maintenance
programme a property manager runs: programme-sheet white, ink, hairline-
ruled rows, tabular figures, status chips and timeline bars. Brand green
(from the logo) is the one accent, committed at page scale in the proof
band and the closing CTA. Type: Archivo (variable width) + Fragment Mono
for dates, codes and durations only.
========================================================================== */
:root {
/* Ground */
--paper: #ffffff;
--paper-2: #f3f6f4; /* alternate section, cool */
--paper-3: #e9efec; /* wells, table heads, idle bars */
--rule: #d9e1dc;
--rule-2: #c3cfc8;
/* Ink */
--ink: #101915;
--ink-2: #3b4641;
--ink-3: #66726c; /* 5.0:1 on white */
/* Brand green */
--green: #1fb933; /* fills: buttons, bars, band. Ink text on top. */
--green-2: #19a52c; /* hover fill */
--green-ink: #147a28; /* text/links on white (5.4:1) */
--green-wash: #e7f7ea; /* chips, selected rows, focus ring */
--green-deep: #0f6b22;
/* Dark field (footer, enterprise band) */
--ink-field: #0f1714;
--ink-field-2: #17221d;
--on-ink: #f4f7f5;
--on-ink-2: #b9c4be;
--on-ink-rule: rgba(244, 247, 245, 0.14);
/* Type */
--sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'Fragment Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Layout */
--max: 1320px;
--pad: clamp(20px, 4vw, 56px);
--utility-h: 36px;
--header-h: 72px;
--radius: 6px;
--radius-sm: 4px;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--shadow-1: 0 10px 30px -14px rgba(16, 25, 21, 0.28);
--shadow-2: 0 14px 32px -18px rgba(16, 25, 21, 0.3);
}
* { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scrollbar-color: var(--rule-2) var(--paper);
scrollbar-width: thin;
}
html, body {
margin: 0;
padding: 0;
color: var(--ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-feature-settings: "kern", "liga", "tnum";
}
/* Two separate things were making the bottom of the page look broken on iOS.
1. Safari and Chrome paint the rubber-band overscroll area with the html background,
not the body's. With html on paper, dragging past the dark footer exposed a slab of
white. Both ends of every page are ink (the fixed utility bar above, the footer
below), so ink is the right colour to bounce against.
2. The bounce itself. overscroll-behavior-y stops the document rubber-banding past its
own end, so the footer stays put when you drag at it. This also disables browser
pull-to-refresh, which is the trade being made deliberately. */
html {
background: var(--ink-field);
overscroll-behavior-y: none;
}
body {
background: var(--paper);
overscroll-behavior-y: none;
}
::selection { background: var(--green); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
/* Offset for the fixed chrome on every page except the video-hero home */
main { padding-top: calc(var(--utility-h) + var(--header-h)); }
body[data-screen-label="Home"] main { padding-top: 0; }
/* ========================= Typography ========================= */
h1, h2, h3, h4, h5 {
margin: 0;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--ink);
}
h1 { font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 4vw, 56px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.015em; line-height: 1.15; }
h4 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; }
h5 { font-size: 16px; letter-spacing: 0; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--green-ink); }
p { margin: 0 0 1em; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
.lead {
font-size: clamp(17px, 1.35vw, 20px);
line-height: 1.55;
color: var(--ink-2);
max-width: 58ch;
margin: 20px 0 0;
}
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.hide-sm { }
/* Condensed programme labels: row keys, chips, nav */
.key,
.chip,
.nav-links a,
.nav-links .nav-trigger,
.nav-cta,
.crumbs {
font-family: var(--sans);
font-stretch: 80%;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.key { color: var(--ink-3); }
/* Two-column running text */
.two-col-text { max-width: 56ch; }
.two-col-text p { color: var(--ink-2); font-size: 16px; }
.two-col-text p:last-child { margin-bottom: 0; }
/* ========================= Layout ========================= */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.wrap-tight { max-width: 900px; margin: 0 auto; padding: 0 var(--pad); }
section { padding: clamp(64px, 8vw, 120px) 0; }
section.tight { padding: clamp(40px, 5vw, 72px) 0; }
section.flush-top { padding-top: 0; }
.section-head {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: clamp(24px, 4vw, 64px);
align-items: end;
margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head h2 { max-width: 18ch; }
.section-head .lead { margin-top: 0; }
.section-head .actions { margin-top: 20px; }
.section-head--stack { grid-template-columns: 1fr; gap: 16px; }
.section-head--stack .lead { margin-top: 0; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* Surfaces */
.band-paper { background: var(--paper-2); }
.band-ink { background: var(--ink-field); color: var(--on-ink); }
.band-ink h1, .band-ink h2, .band-ink h3, .band-ink h4 { color: var(--on-ink); }
.band-ink h2 em { color: var(--green); }
.band-ink .lead, .band-ink p { color: var(--on-ink-2); }
.band-ink .key { color: var(--on-ink-2); }
.band-green { background: var(--green); color: var(--ink); }
.band-green h2, .band-green h3 { color: var(--ink); }
.band-green .lead, .band-green p { color: rgba(16, 25, 21, 0.78); }
/* ========================= Chrome: utility bar ========================= */
.skip-link {
position: absolute;
top: -100px; left: 16px;
z-index: 100;
padding: 10px 14px;
background: var(--green);
color: var(--ink);
border-radius: var(--radius-sm);
font-weight: 600;
}
.skip-link:focus { top: 16px; }
.utility {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 51;
height: var(--utility-h);
background: var(--ink-field);
color: var(--on-ink-2);
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.01em;
}
.utility .wrap {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.utility a { color: var(--on-ink); transition: color .2s; }
.utility a:hover { color: var(--green); }
.utility .util-l, .utility .util-r { display: flex; gap: 22px; align-items: center; }
.utility .dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--green);
display: inline-block; margin-right: 8px; vertical-align: 1px;
}
.utility .i { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }
/* ========================= Chrome: header ========================= */
.site-header {
position: fixed;
top: var(--utility-h); left: 0; right: 0;
z-index: 50;
height: var(--header-h);
background: var(--paper);
border-bottom: 1px solid var(--rule);
color: var(--ink);
/* Header state changes are near-instant so the wordmark never sits on the wrong ground. */
transition: background .12s linear, border-color .12s linear, box-shadow .12s linear;
}
.site-header:not(.transparent) { box-shadow: 0 6px 24px -18px rgba(16, 25, 21, 0.25); }
.site-header.transparent {
background: transparent;
border-bottom-color: rgba(255, 255, 255, 0.14);
color: #fff;
}
.nav {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad);
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.brand { position: relative; display: flex; align-items: center; height: 44px; }
.brand img { height: 40px; width: auto; display: block; }
.brand .logo-light { position: absolute; inset: 0; opacity: 0; transition: opacity .12s linear; }
.brand .logo-dark { opacity: 1; transition: opacity .12s linear; }
.site-header.transparent .brand .logo-light { opacity: 1; }
.site-header.transparent .brand .logo-dark { opacity: 0; }
.nav-links {
display: flex;
align-items: center;
gap: 2px;
list-style: none;
margin: 0; padding: 0;
}
.nav-links > li { position: relative; }
.nav-links a, .nav-links .nav-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 12px;
color: var(--ink-2);
cursor: pointer;
border: none;
background: transparent;
border-radius: var(--radius-sm);
/* Keep foreground contrast in lockstep with the solid/transparent header state. */
transition: background .2s;
}
.nav-links a:hover, .nav-links .nav-trigger:hover { color: var(--ink); background: var(--paper-2); }
.nav-links a.active, .nav-links .nav-trigger.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--green); border-radius: 0; }
.nav-links .has-children > .nav-trigger::after {
content: "";
width: 10px; height: 10px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
opacity: 0.6;
transition: transform .2s;
}
.has-children > .nav-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.site-header.transparent .nav-links a,
.site-header.transparent .nav-links .nav-trigger { color: rgba(255, 255, 255, 0.86); }
.site-header.transparent .nav-links a:hover,
.site-header.transparent .nav-links .nav-trigger:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.site-header.transparent .nav-links a.active,
.site-header.transparent .nav-links .nav-trigger.active { color: #fff; }
.nav-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 300px;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-2);
padding: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
/* Visibility flips at the end of the close fade and at the start of the open fade, so a link
inside the panel can take keyboard focus in the same keystroke that opened it. */
transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
.nav-dropdown[aria-hidden="false"] { transition-delay: 0s; }
.nav-dropdown a {
display: block;
min-height: 44px;
padding: 10px 12px;
font-family: var(--sans);
font-stretch: 100%;
font-weight: 500;
font-size: 14.5px;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
border-radius: var(--radius-sm);
}
.nav-dropdown a:hover { background: var(--paper-2); color: var(--green-ink); }
.nav-dropdown[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); }
/* The transparent-over-hero header recolours nav links white; the dropdown panel stays a white sheet with ink links */
.site-header.transparent .nav-links .nav-dropdown a { color: var(--ink); background: transparent; }
.site-header.transparent .nav-links .nav-dropdown a:hover { color: var(--green-ink); background: var(--paper-2); }
/* Optional drawer backdrop. The shared script can add this sibling without requiring a
layout rewrite. It stays inert until the drawer is open, and sits below the drawer and
above the page so keyboard focus and pointer dismissal have a clear visual boundary. */
.nav-backdrop,
[data-nav-backdrop] {
display: none;
}
.nav-cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
background: var(--green);
color: var(--ink);
border-radius: var(--radius-sm);
font-weight: 700;
transition: background .2s, transform .2s;
white-space: nowrap;
}
.nav-cta:hover { background: var(--green-2); transform: translateY(-1px); }
.nav-links .nav-phone { display: none; }
/* Mobile toggle: drawn bars, no glyphs */
/* Desktop keeps the written number in the utility bar; this is the mobile stand-in. */
.nav-call {
display: none;
align-items: center;
justify-content: center;
gap: 7px;
min-width: 44px; height: 44px;
padding: 0 14px 0 12px;
margin-left: auto;
border: 1px solid var(--ink);
border-radius: 999px;
color: var(--ink);
font-family: var(--sans);
font-stretch: 80%;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
flex: 0 0 auto;
transition: background .2s, color .2s, border-color .2s;
}
.nav-call:hover, .nav-call:active { background: var(--ink); color: var(--paper); }
.nav-call .i { width: 18px; height: 18px; }
.site-header.transparent .nav-call { color: #fff; border-color: rgba(255, 255, 255, 0.7); }
.site-header.transparent .nav-call:hover, .site-header.transparent .nav-call:active { background: #fff; color: var(--ink); border-color: #fff; }
.nav-toggle {
display: none;
width: 44px; height: 44px;
border: 1px solid var(--rule-2);
border-radius: var(--radius-sm);
background: transparent;
cursor: pointer;
position: relative;
padding: 0;
}
.nav-toggle span {
position: absolute;
left: 12px; right: 12px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .25s var(--ease), opacity .2s;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-header.transparent .nav-toggle { border-color: rgba(255, 255, 255, 0.4); }
/* The nav collapsed at 1080px when it carried eight long service labels. v3 reduces it to
five short ones, which measure 757px including the brand and the button, so the full nav
now survives down to tablet width instead of collapsing on a small laptop. */
@media (max-width: 900px) {
.nav-links { display: none; }
.nav-toggle { display: block; }
.nav-cta { display: none; }
.nav-links.open {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
position: fixed;
top: calc(var(--utility-h) + var(--header-h));
left: 0; right: 0; bottom: 0;
background: var(--paper);
color: var(--ink);
padding: 16px var(--pad) 40px;
overflow-y: auto;
z-index: 49;
border-top: 1px solid var(--rule);
}
.nav-backdrop,
[data-nav-backdrop] {
display: block;
position: fixed;
inset: calc(var(--utility-h) + var(--header-h)) 0 0;
z-index: 48;
border: 0;
padding: 0;
background: rgba(15, 23, 20, 0.42);
opacity: 0;
pointer-events: none;
transition: opacity .2s linear;
}
body:has(.nav-links.open) .nav-backdrop,
body:has(.nav-links.open) [data-nav-backdrop],
.nav-backdrop[aria-hidden="false"],
[data-nav-backdrop][aria-hidden="false"] {
opacity: 1;
pointer-events: auto;
}
.nav-links.open > li { border-bottom: 1px solid var(--rule); }
.nav-links.open a,
.nav-links.open .nav-trigger {
display: flex;
justify-content: space-between;
width: 100%;
padding: 18px 0;
font-stretch: 100%;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
text-transform: none;
color: var(--ink);
background: transparent;
border-radius: 0;
box-shadow: none;
}
.nav-links.open a.active, .nav-links.open .nav-trigger.active { color: var(--green-ink); }
.nav-links.open .has-children > .nav-trigger::after { width: 14px; height: 14px; opacity: 1; }
.nav-links.open .nav-trigger[aria-expanded="true"]::after { transform: rotate(180deg); }
.nav-links.open .nav-dropdown {
display: none;
position: static;
min-width: 0;
border: none;
box-shadow: none;
padding: 0 0 12px 16px;
opacity: 1; visibility: visible; transform: none;
}
.nav-links.open .nav-dropdown[aria-hidden="false"] { display: block; }
.nav-links.open .nav-dropdown a { font-size: 16px; padding: 10px 0; color: var(--ink-2); }
.nav-links.open .nav-phone { display: block; border-bottom: none; margin-top: 20px; }
.nav-links.open .nav-phone a {
justify-content: center;
background: var(--green);
color: var(--ink);
border-radius: var(--radius-sm);
padding: 16px;
font-size: 17px;
}
}
@media (max-width: 720px) {
:root { --utility-h: 0px; --header-h: 64px; }
/* The utility bar goes, and with it the only tap-to-call on the page above the footer.
A phone is where most of this audience is, and a phone call is the enquiry that
actually converts, so the number comes back as a header affordance of its own. */
.utility { display: none; }
.brand, .brand img { height: 34px; }
.nav { gap: 12px; }
.nav-call { display: inline-flex; }
}
/* ========================= Buttons ========================= */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 22px;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 14.5px;
letter-spacing: -0.005em;
line-height: 1;
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
min-height: 46px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: var(--ink); border-color: var(--green); }
.btn-primary:hover { background: var(--green-2); border-color: var(--green-2); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.btn-ghost-dark { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost-dark:hover { background: var(--ink); color: var(--paper); }
.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }
.band-green .btn-ghost-dark:hover { background: var(--ink); color: var(--green); }
.btn-arrow::after {
content: "";
width: 16px; height: 16px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform .25s var(--ease);
}
.btn-arrow:hover::after { transform: translateX(3px); }
.btn .sub { font-family: var(--mono); font-size: 11px; opacity: 0.7; margin-left: 2px; }
/* Text link with arrow */
.link {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
color: var(--green-ink);
font-size: 14.5px;
}
.link::after {
content: "";
width: 14px; height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform .25s var(--ease);
}
.link:hover::after { transform: translateX(3px); }
.link:hover { color: var(--green-deep); }
.band-ink .link { color: var(--green); }
.link--ext::after {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.link--ext:hover::after { transform: translate(2px, -2px); }
/* Icons: one stroke, one weight */
.i {
width: 20px; height: 20px;
stroke: currentColor;
fill: none;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
}
.i-lg { width: 28px; height: 28px; stroke-width: 1.5; }
/* ========================= Chips / tags ========================= */
.chip, .tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border-radius: 3px;
background: var(--paper-3);
color: var(--ink-2);
font-family: var(--sans);
font-stretch: 80%;
font-weight: 600;
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
white-space: nowrap;
}
.chip-green, .tag-ochre, .tag-forest { background: var(--green-wash); color: var(--green-ink); }
.chip-ink { background: var(--ink); color: var(--on-ink); }
.chip-outline { background: transparent; border: 1px solid var(--rule-2); }
.chip .i { width: 13px; height: 13px; stroke-width: 2.25; }
.chip-dot::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--green);
}
.band-ink .chip { background: var(--ink-field-2); color: var(--on-ink-2); }
.band-ink .chip-green { background: rgba(31, 185, 51, 0.16); color: var(--green); }
.band-green .chip { background: rgba(16, 25, 21, 0.1); color: var(--ink); }
.case-tags, .team-tags, .meta { display: flex; gap: 8px; flex-wrap: wrap; }
/* ========================= Photo plates ========================= */
.plate {
position: relative;
overflow: hidden;
border-radius: var(--radius);
background: var(--paper-3);
isolation: isolate;
}
.plate img, .plate video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 1s var(--ease);
}
.plate--16-10 { aspect-ratio: 16 / 10; }
.plate--16-9 { aspect-ratio: 16 / 9; }
.plate--4-3 { aspect-ratio: 4 / 3; }
.plate--3-4 { aspect-ratio: 3 / 4; }
.plate--4-5 { aspect-ratio: 4 / 5; }
.plate--21-9 { aspect-ratio: 21 / 9; }
.plate--1-1 { aspect-ratio: 1; }
a:hover > .plate img, a.plate:hover img, .plate-hover:hover .plate img { transform: scale(1.03); }
figure.plate-fig { margin: 0; }
figure.plate-fig figcaption {
margin-top: 12px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
/* Placeholder video slot: poster + drawn play + label */
/* Site footage. The clips are phone-shot on the job, so they are held at plate width
rather than run full-bleed, where their resolution would show. The frame owns the
aspect ratio and the video fills it, so a clip never lays out at its intrinsic width
and pushes the page wider than the viewport. */
.video-plate { margin: 0; max-width: 100%; }
.video-plate .frame {
position: relative;
width: 100%;
aspect-ratio: var(--vp-ratio, 16 / 9);
border-radius: var(--radius);
overflow: hidden;
background: var(--ink-field);
}
.video-plate video,
.video-plate img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: cover;
display: block;
}
.video-plate figcaption {
margin-top: 12px;
font-size: 14.5px;
font-weight: 600;
color: var(--ink);
display: flex;
justify-content: space-between;
gap: 8px 16px;
flex-wrap: wrap;
}
.video-plate figcaption .mono { font-weight: 400; font-size: 12px; color: var(--ink-3); }
/* Vertical clip: capped near its native 464px so it is never upscaled into mush. */
.video-plate--portrait { max-width: 400px; }
.award-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
/* ========================= Home hero (full-bleed video) ========================= */
.hero {
position: relative;
min-height: 100svh;
display: grid;
grid-template-rows: 1fr auto;
color: #fff;
background: var(--ink-field);
overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video, .hero-bg img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.hero-bg::after {
content: "";
position: absolute; inset: 0;
background:
linear-gradient(90deg, rgba(10, 16, 13, 0.82) 0%, rgba(10, 16, 13, 0.58) 38%, rgba(10, 16, 13, 0.12) 72%, rgba(10, 16, 13, 0.05) 100%),
linear-gradient(180deg, rgba(10, 16, 13, 0.42) 0%, rgba(10, 16, 13, 0.06) 32%, rgba(10, 16, 13, 0.62) 100%);
}
/* Parallax layer: the photographs sit on a slightly larger plane and drift with the pointer and the scroll. */
.hero-slides { will-change: transform; transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0) scale(1.05); transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .hero-slides { transform: none; transition: none; } }
/* Hero slideshow: five site photographs crossfaded behind the scrim. Each frame is
held six seconds; object-position per image keeps the technician clear of the
headline, which sits bottom-left over the darkest part of the scrim. */
.hero-slides > img {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.15s var(--ease);
}
.hero-slides > img.is-active { opacity: 1; }
/* Programme-sheet index: five bars, the active one filling over its dwell. */
.hero-index {
display: flex;
align-items: center;
gap: 20px;
row-gap: 8px;
flex-wrap: wrap;
margin-top: 26px;
min-height: 44px;
}
.hero-dots { display: flex; gap: 4px; align-items: center; }
.hero-dots button {
position: relative;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
.hero-index button { min-width: 44px; min-height: 44px; }
/* The visible bar is a child of a 44px-tall transparent target, so the hairline reads as a
programme bar while the control still meets the pointer-target minimum. */
.hero-dots button::before {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 3px;
margin-top: -1.5px;
border-radius: 2px;
background: rgba(255, 255, 255, 0.34);
}
.hero-dots button::after {
content: "";
position: absolute;
left: 0; right: 0; top: 50%;
height: 3px;
margin-top: -1.5px;
border-radius: 2px;
background: var(--green);
transform: scaleX(0);
transform-origin: left;
}
.hero-dots button[aria-pressed="true"]::after { transform: scaleX(1); }
.hero-dots button[aria-pressed="true"].is-timing::after {
animation: hero-dwell var(--hero-dwell, 6s) linear forwards;
}
@keyframes hero-dwell { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero-pause {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: var(--radius-sm);
background: rgba(10, 16, 13, 0.4);
color: #fff;
cursor: pointer;
flex: 0 0 auto;
}
.hero-pause:hover { background: rgba(10, 16, 13, 0.7); border-color: rgba(255, 255, 255, 0.6); }
/* Transport glyphs are solid by nature; the rest of the sprite is single-stroke. */
.hero-pause .i { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.hero-pause:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.hero-slides > img { transition: none; }
.hero-dots button::after { animation: none !important; }
}
.hero-content {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: calc(var(--utility-h) + var(--header-h) + 8vh) var(--pad) 56px;
align-self: end;
}
.hero h1 {
color: #fff;
font-size: clamp(38px, 5.2vw, 76px);
max-width: 17ch;
line-height: 1.02;
}
.hero h1 em { color: var(--green); }
.hero .lead {
color: rgba(255, 255, 255, 0.9);
max-width: 44ch;
font-size: clamp(17px, 1.45vw, 21px);
line-height: 1.5;
margin-top: 22px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero-meta {
display: flex;
gap: 18px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 28px;
font-family: var(--mono);
font-size: 12px;
color: rgba(255, 255, 255, 0.78);
}
.hero-meta .live { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .live::before {
content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 0 rgba(31, 185, 51, 0.6);
animation: pulse 2.4s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(31, 185, 51, 0.55); }
70% { box-shadow: 0 0 0 10px rgba(31, 185, 51, 0); }
100% { box-shadow: 0 0 0 0 rgba(31, 185, 51, 0); }
}
/* Proof register pinned to the hero foot */
.hero-proof {
position: relative;
z-index: 1;
background: var(--paper);
color: var(--ink);
border-top: 4px solid var(--green);
}
.proof {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--pad);
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.proof-cell {
display: flex;
gap: 14px;
align-items: center;
padding: 22px 24px 22px 0;
border-right: 1px solid var(--rule);
margin-right: 24px;
}
.proof-cell:last-child { border-right: none; margin-right: 0; }
/* Six-item credential strip: three across, two rows, so each statement gets a full line. */
.proof--six { grid-template-columns: repeat(3, 1fr); }
.proof--six .proof-cell { align-items: flex-start; padding: 18px 24px 18px 0; }
.proof--six .proof-cell:nth-child(3n) { border-right: none; margin-right: 0; }
.proof--six .proof-cell:nth-child(-n+3) { border-bottom: 1px solid var(--rule); }
.proof--six .proof-cell .v { font-size: 15px; font-weight: 600; line-height: 1.3; }
.proof--six .proof-cell .i { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
.proof-cell .i { color: var(--green-ink); width: 28px; height: 28px; stroke-width: 1.5; }
.proof-cell .v { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; line-height: 1.15; }
.proof-cell .k { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
/* Trusted-by row */
.trusted { padding: 28px 0; border-bottom: 1px solid var(--rule); }
.trusted-inner {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 48px);
flex-wrap: wrap;
}
.trusted-inner .k { margin-right: 8px; }
.trusted-inner span:not(.k) {
font-family: var(--sans);
font-stretch: 88%;
font-weight: 700;
font-size: 15px;
letter-spacing: 0.01em;
color: var(--ink-3);
transition: color .2s;
}
.trusted-inner span:not(.k):hover { color: var(--ink); }
/* ========================= Programme chart (signature) ========================= */
.gantt {
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
overflow: hidden;
--label-w: 220px;
}
.gantt-head, .gantt-row {
display: grid;
grid-template-columns: var(--label-w) 1fr;
}
.gantt-head { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.gantt-head .gantt-label { font-family: var(--mono); font-size: 12px; color: var(--ink-3); padding: 12px 16px; }
.gantt-scale { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); min-width: 0; }
.gantt-scale span {
font-family: var(--mono);
font-size: 11.5px;
color: var(--ink-3);
padding: 12px 10px;
border-left: 1px solid var(--rule);
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.gantt-row { border-bottom: 1px solid var(--rule); min-height: 84px; }
.gantt-row:last-of-type { border-bottom: none; }
.gantt-row--rope { background: var(--green-wash); }
.gantt-label { padding: 18px 16px; }
.gantt-label strong { display: block; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.gantt-label small { display: block; font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.gantt-track {
position: relative;
background-image: linear-gradient(90deg, var(--rule) 1px, transparent 1px);
background-size: calc(100% / var(--cols, 4)) 100%;
}
.gantt-bar {
position: absolute;
top: 50%;
left: var(--s);
width: var(--w);
height: 36px;
transform: translateY(-50%);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
padding: 0 10px;
font-family: var(--sans);
font-stretch: 85%;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
clip-path: inset(0 100% 0 0 round 4px);
transition: clip-path 1s var(--ease);
transition-delay: var(--d, 0s);
}
.gantt.in .gantt-bar, .no-js .gantt-bar { clip-path: inset(0 0 0 0 round 4px); }
.gantt-bar .bar-short { display: none; }
.bar-scaffold { background: var(--paper-3); color: var(--ink-2); border: 1px solid var(--rule-2); }
.bar-wait {
background: repeating-linear-gradient(135deg, var(--paper) 0 6px, var(--paper-3) 6px 12px);
color: var(--ink-3);
border: 1px dashed var(--rule-2);
}
.bar-rope { background: var(--green); color: var(--ink); font-weight: 700; }
.bar-rope::before, .bar-rope::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 4px;
background: var(--green-deep);
}
.bar-rope::before { left: 0; }
.bar-rope::after { right: 0; }
.gantt-foot {
display: flex;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 16px;
border-top: 1px solid var(--rule);
background: var(--paper-2);
font-size: 13.5px;
color: var(--ink-2);
}
.gantt-foot .totals { display: flex; gap: 24px; flex-wrap: wrap; font-weight: 600; color: var(--ink); }
.gantt-foot .totals .rope { color: var(--green-ink); }
.gantt-foot .note { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.band-ink .gantt { background: var(--ink-field-2); border-color: var(--on-ink-rule); }
.band-ink .gantt-head { background: rgba(255, 255, 255, 0.04); border-color: var(--on-ink-rule); }
.band-ink .gantt-row { border-color: var(--on-ink-rule); }
.band-ink .gantt-row--rope { background: rgba(31, 185, 51, 0.08); }
.band-ink .gantt-scale span, .band-ink .gantt-head .gantt-label { border-color: var(--on-ink-rule); color: var(--on-ink-2); }
.band-ink .gantt-label strong { color: var(--on-ink); }
.band-ink .gantt-label small { color: var(--on-ink-2); }
.band-ink .gantt-track { background-image: linear-gradient(90deg, var(--on-ink-rule) 1px, transparent 1px); }
.band-ink .bar-scaffold { background: rgba(255, 255, 255, 0.12); color: var(--on-ink); border-color: rgba(255, 255, 255, 0.2); }
.band-ink .gantt-foot { background: rgba(255, 255, 255, 0.04); border-color: var(--on-ink-rule); color: var(--on-ink-2); }
.band-ink .gantt-foot .totals { color: var(--on-ink); }
.band-ink .gantt-foot .totals .rope { color: var(--green); }
.band-ink .gantt-foot .note { color: var(--on-ink-2); }
.gantt-marker {
position: absolute;
top: 50%;
left: var(--s);
width: 12px; height: 12px;
transform: translate(-50%, -50%) rotate(45deg);
background: var(--green);
border-radius: 2px;
}
/* ========================= The drop =========================
A building elevation read the way the crew works it: hairline-ruled level bands, a
twin rope down the middle, and a drawn station wherever the crew stops. On entry the
/* Twin rope: working line in green, backup line hairline, both hung off the anchor plate */
/* The descender rides the leading edge of the rope and is gone once it lands */
/* The wall the rope runs down: a tinted band, storey lines supplied by the row rules */
/* Entrance, then the working loop. The rope pays out from the anchor once and the stations
are set behind it; from then on the crew abseils the elevation on a six-second cycle, and
the band of wall it is on lights as it passes. The written work never moves. */
/* Rested only once the elevation is well clear of the viewport. This fails open on purpose:
without the class the loop runs, so a missing or late observer can never leave it frozen. */
/* Fact row under the programme chart: ruled columns, figure-led */
.fact-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(24px, 3vw, 40px);
margin-top: clamp(40px, 5vw, 64px);
}
.fact-row > div { border-top: 2px solid var(--rule-2); padding-top: 20px; }
.fact-row .figure {
display: block;
font-size: clamp(32px, 3.4vw, 44px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
color: var(--green-ink);
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
}
.fact-row h3 { font-size: 20px; margin-bottom: 8px; }
.fact-row p { font-size: 15px; color: var(--ink-2); }
/* Spec table laid out as columns (enterprise band) */
.spec.spec--row { display: grid; grid-template-columns: repeat(var(--spec-cols, 4), minmax(0, 1fr)); border-top: none; gap: 24px; }
.spec.spec--row > div { flex-direction: column; justify-content: flex-start; gap: 6px; border-top: 1px solid var(--rule-2); border-bottom: none; padding: 16px 0 0; min-width: 0; }
.spec.spec--row > div > span { overflow-wrap: anywhere; }
.band-ink .spec.spec--row > div { border-top-color: var(--on-ink-rule); }
.spec.spec--row > div > span:last-child { text-align: left; }
.fact-row--2 { grid-template-columns: repeat(2, 1fr); }
.fact-row--1 { grid-template-columns: 1fr; }
/* Site footage beside the numbers it illustrates, so neither leaves a dead column.
The clip is held near its native width rather than stretched across the wrap. */
.media-facts {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(28px, 4vw, 56px);
align-items: start;
margin-top: 40px;
}
.fact-row--4 { grid-template-columns: repeat(4, 1fr); }
.fact-row--4 h3 { font-size: 18px; }
/* Secondary text on the green field is tinted from the foreground, never grey */
.band-green .kv span:first-child, .band-green .muted, .band-green .key { color: rgba(16, 25, 21, 0.82); }
.band-green .kv > div { border-color: rgba(16, 25, 21, 0.22); }
.band-green .kv a:hover { color: var(--paper); }
/* ========================= Services schedule ========================= */
/* Default schedule: equal tiles, three across (four with .schedule--4) */
.schedule {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px 24px;
align-items: stretch;
}
.schedule--4 { grid-template-columns: repeat(4, 1fr); }
.service { display: flex; flex-direction: column; color: inherit; min-width: 0; }
.service .plate { flex: 0 0 auto; aspect-ratio: 16 / 10; margin-bottom: 18px; }
/* Home schedule on a 12-column grid: a feature row (plate 8, text 4) then two rows of three (4 each).
Seven services, three full rows, no orphan. */
.schedule--mosaic { grid-template-columns: repeat(12, 1fr); gap: clamp(36px, 4vw, 56px) 24px; align-items: start; }
.schedule--mosaic .service { grid-column: span 4; }
.schedule--mosaic .service .plate { flex: 0 0 auto; aspect-ratio: 16 / 10; min-height: 0; }
.schedule--mosaic .service .plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.schedule--mosaic .service--lead {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 1fr auto auto auto;
gap: 0 24px;
padding-bottom: clamp(36px, 4vw, 56px);
border-bottom: 1px solid var(--rule);
}
.schedule--mosaic .service--lead .plate { grid-column: 1 / span 8; grid-row: 1 / 5; aspect-ratio: 16 / 9; margin-bottom: 0; }
.schedule--mosaic .service--lead h3 { grid-column: 9 / -1; grid-row: 2; }
.schedule--mosaic .service--lead p { grid-column: 9 / -1; grid-row: 3; margin-bottom: 0; }
.schedule--mosaic .service--lead .service-more { grid-column: 9 / -1; grid-row: 4; }
.service-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--green-ink); margin-top: 12px; }
.service-more::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; transition: transform .25s var(--ease); }
.service:hover .service-more::after { transform: translateX(3px); }
.service h3 { font-size: 22px; margin-bottom: 8px; transition: color .2s; }
.service--lead h3 { font-size: clamp(24px, 2.2vw, 30px); }
.service:hover h3 { color: var(--green-ink); }
.service p { color: var(--ink-2); font-size: 15px; max-width: 52ch; }
.service .facts {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 14px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
}
.service .facts b { font-weight: 400; color: var(--ink); }
.service .link { margin-top: 14px; }
.service .num {
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
margin-bottom: 8px;
display: block;
}
/* Services index: ruled schedule rows */
.service-row {
display: grid;
grid-template-columns: 56px 1.3fr 1fr 220px 24px;
gap: clamp(16px, 3vw, 40px);
align-items: center;
padding: 28px 0;
border-top: 1px solid var(--rule);
color: inherit;
transition: background .2s;
}
.service-row:last-child { border-bottom: 1px solid var(--rule); }
.service-row:hover { background: var(--paper-2); box-shadow: 0 0 0 16px var(--paper-2); border-radius: 2px; }
.service-row .num { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.service-row h3 { font-size: clamp(20px, 2vw, 26px); margin-bottom: 4px; }
.service-row .blurb { color: var(--ink-2); font-size: 14.5px; }
.service-row .plate { aspect-ratio: 4 / 3; }
.service-row .arrow {
width: 24px; height: 24px;
background: var(--green-ink);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
transition: transform .25s var(--ease);
}
.service-row:hover .arrow { transform: translateX(4px); }
/* Scope schedule (service pages): ruled grid of items */
.job-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
}
.job-tile {
background: var(--paper);
padding: 20px;
min-height: 124px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
transition: background .2s;
}
.job-tile:hover { background: var(--green-wash); }
.job-tile .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; }
.job-tile .num .arrow, .job-tile .accent { display: none; }
.job-tile .title { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; line-height: 1.25; }
/* ========================= Split / plates with text ========================= */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 80px);
align-items: center;
}
.split-img { aspect-ratio: 4 / 3; }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split.image-left > .split-img { order: -1; }
.split .lead { margin-top: 20px; }
.split .actions { margin-top: 32px; }
/* ========================= Register (stats) ========================= */
.stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--rule);
margin-top: 40px;
}
.stats-3 { grid-template-columns: repeat(3, 1fr); }
.stat {
padding: 22px 24px 22px 0;
border-bottom: 1px solid var(--rule);
border-right: 1px solid var(--rule);
margin-right: 24px;
}
.stat:last-child { border-right: none; margin-right: 0; }
.stat .num {
font-size: var(--stat-num-size, clamp(30px, 3.2vw, 44px));
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.stat .num em { font-style: normal; color: var(--green-ink); }
.stat .lbl { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.band-ink .stats, .band-ink .stat { border-color: var(--on-ink-rule); }
.band-ink .stat .num { color: var(--on-ink); }
.band-ink .stat .num em { color: var(--green); }
.band-ink .stat .lbl { color: var(--on-ink-2); }
/* ========================= Spec table ========================= */
.spec { border-top: 1px solid var(--rule); font-size: 14.5px; }
.spec > div, .spec > .row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--rule);
}
.spec > div > span:first-child, .spec dt { color: var(--ink-3); }
.spec > div > span:last-child, .spec dd { font-weight: 600; color: var(--ink); text-align: right; margin: 0; }
.spec .chip { padding: 3px 7px; }
.band-ink .spec, .band-ink .spec > div { border-color: var(--on-ink-rule); }
.band-ink .spec > div > span:first-child { color: var(--on-ink-2); }
.band-ink .spec > div > span:last-child { color: var(--on-ink); }
/* Key/value list without borders (contact blocks) */
.kv { display: grid; gap: 4px; font-size: 15px; }
.kv > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.kv > div:last-child { border-bottom: 1px solid var(--rule); }
.kv span:first-child { color: var(--ink-3); }
.kv a { font-weight: 600; }
.kv a:hover { color: var(--green-ink); }
/* ========================= Process list ========================= */
.process-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--rule);
}
.process-list li {
display: grid;
grid-template-columns: 72px 1fr;
gap: 24px;
padding: 28px 0;
border-bottom: 1px solid var(--rule);
}
.process-list .step-num {
font-family: var(--mono);
font-size: 13px;
color: var(--green-ink);
padding-top: 6px;
}
.process-list h4, .process-list h3 { margin-bottom: 8px; }
.process-list h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; }
.process-list p { color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.process-list--grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 32px; border-top: none; }
.process-list--grid li { grid-template-columns: 1fr; gap: 12px; padding: 24px 0 0; border-top: 2px solid var(--rule); border-bottom: none; align-content: start; }
.process-list--grid h4, .process-list--grid h3 { min-height: 2.4em; }
.process-list--grid .step-num { padding: 0; }
/* Sector labels: a plain ruled row, no images, per section 6 of the copy brief. */
.sector-row {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
margin-top: 8px;
}
.sector-row span {
border: 1px solid var(--rule-2);
border-radius: 3px;
padding: 10px 14px;
font-size: 14.5px;
font-weight: 600;
color: var(--ink-2);
}
/* Plain-language summary. Section 3.4 of the copy brief: three sentences in everyday
words, between the sub headline and the specification bar, above all technical content.
Larger than body text, lighter weight, generous space beneath. Reads as an introduction,
not a pull quote and not a warning box, so deliberately no panel and no background. */
/* The home hero is a full-bleed photograph with an ink scrim, so the summary there has
to be light. Without this it renders ink-on-photograph and is unreadable. */
/* Verified Google reviews, quoted as posted. Kept compact: seven reviews is a modest
number and a large carousel would draw attention to that. */
.review-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(24px, 3vw, 40px);
margin-top: 8px;
}
.review-row--one { grid-template-columns: minmax(0, 1fr); max-width: 68ch; }
.review { margin: 0; }
.review .quote-mark { color: var(--green); width: 26px; height: 26px; margin-bottom: 10px; }
.review blockquote {
margin: 0;
font-size: clamp(16px, 1.5vw, 19px);
line-height: 1.5;
letter-spacing: -0.01em;
color: var(--ink);
}
.review figcaption {
margin-top: 14px;
font-family: var(--mono);
font-size: 12px;
color: var(--ink-3);
}
.review figcaption strong { font-family: var(--sans); font-weight: 600; color: var(--ink-2); }
@media (max-width: 760px) {
.review-row { grid-template-columns: 1fr; }
}
/* Reactive versus proactive comparison. Two columns, the programme column emphasised. */
.compare { overflow-x: auto; }
.compare table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare th, .compare td {
text-align: left;
vertical-align: top;
padding: 16px 20px 16px 0;
border-bottom: 1px solid var(--rule);
font-size: 15px;
}
.compare thead th {
font-family: var(--sans);
font-stretch: 80%;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11.5px;
color: var(--ink-3);
border-bottom: 2px solid var(--rule-2);
}
.compare tbody th { font-weight: 600; color: var(--ink); width: 22%; }
.compare td { color: var(--ink-2); width: 39%; }
.compare .is-emph { background: var(--green-wash); color: var(--ink); font-weight: 600; padding-left: 20px; }
.compare thead .is-emph { color: var(--green-ink); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Scope boundary published with the survey offer, not hidden in terms. */
.survey-scope { margin-top: 32px; }
.survey-scope > div { align-items: start; }
.band-ink .process-list, .band-ink .process-list li { border-color: var(--on-ink-rule); }
.band-ink .process-list .step-num { color: var(--green); }
.band-ink .process-list h4, .band-ink .process-list h3 { color: var(--on-ink); }
.band-ink .process-list p { color: var(--on-ink-2); }
.band-paper .process-list--grid li { border-top-color: var(--rule-2); }
/* ========================= Case records ========================= */
/* Three equal, bordered site records: the same card, the same boundary, the same rhythm */
.records {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.record {
display: flex;
flex-direction: column;
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
background: var(--paper);
color: inherit;
transition: border-color .2s, box-shadow .2s, transform .25s var(--ease);
}
.record:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.record:hover h3, .record:hover h4 { color: var(--green-ink); }
.record .plate { aspect-ratio: 16 / 10; border-radius: 0; flex: 0 0 auto; }
.record-body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.record h3, .record h4 { font-size: 20px; margin: 14px 0 8px; letter-spacing: -0.015em; transition: color .2s; }
.record p { color: var(--ink-2); font-size: 14.5px; }
.record .link { margin-top: 16px; font-size: 14px; }
.record-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-top: auto;
padding-top: 16px;
border-top: 1px solid var(--rule);
}
.record-facts div { font-size: 12.5px; color: var(--ink-3); line-height: 1.3; }
.record-facts b { display: block; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 3px; }
.record-body .record-facts { margin-top: auto; }
.record-body .record-facts + .link { margin-top: 16px; }
/* Legacy hooks kept for pages that may still use them */
.record-feature { display: block; color: inherit; }
.record-side { display: grid; gap: 20px; }
/* Case study index cards */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 32px; }
.case-card { display: block; color: inherit; }
.case-card .img { aspect-ratio: 16 / 10; }
.case-card .meta { margin-top: 18px; }
.case-card h3 { margin: 12px 0 8px; font-size: clamp(22px, 2.2vw, 28px); }
.case-card p { color: var(--ink-2); font-size: 15px; }
.case-card:hover h3 { color: var(--green-ink); }
.case-card .read { margin-top: 12px; }
.filter-pill {
padding: 10px 16px;
min-height: 44px;
background: var(--paper);
border: 1px solid var(--rule-2);
border-radius: 999px;
font-weight: 600;
font-size: 14px;
color: var(--ink-2);
cursor: pointer;
transition: all .2s;
}
.filter-pill:hover { border-color: var(--ink); color: var(--ink); }
.filter-pill.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; }
.cs-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.cs-strip--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-strip .plate { aspect-ratio: 1; }
img[src*="leak-investigation"] { object-position: 50% 12%; }
/* ========================= Testimonials ========================= */
.quote-block {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: clamp(32px, 5vw, 80px);
align-items: start;
}
.quote-block blockquote {
margin: 0;
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1.3;
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
text-wrap: pretty;
}
.quote-block h2 { font-size: clamp(24px, 2.4vw, 32px); margin-top: 16px; }
.quote-block .who { margin-top: 24px; font-size: 15px; color: var(--ink-2); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.quote-block .who strong { color: var(--ink); }
.quote-mark { width: 44px; height: 44px; color: var(--green); stroke-width: 1.5; }
.quote-index { font-family: var(--mono); font-size: 13px; color: var(--ink-3); margin-top: 16px; }
.quote-record {
display: grid;
grid-template-columns: 120px 1fr;
gap: clamp(24px, 4vw, 64px);
padding: clamp(32px, 4vw, 48px) 0;
border-top: 1px solid var(--rule);
}
.quote-record:last-child { border-bottom: 1px solid var(--rule); }
.quote-record__num { font-family: var(--mono); font-size: 13px; color: var(--ink-3); padding-top: 8px; }
.quote-record blockquote {
margin: 0;
font-size: clamp(20px, 1.9vw, 26px);
line-height: 1.4;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
max-width: 34em;
}
.quote-record blockquote .mark { display: none; }
.quote-record__who { margin-top: 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 14.5px; color: var(--ink-2); }
.quote-record__who .name { font-weight: 700; color: var(--ink); }
.quote-record__who .verified .i { width: 13px; height: 13px; stroke-width: 2.25; }
.quote-record__who .verified {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--sans); font-stretch: 80%; font-weight: 600; font-size: 11.5px;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--green-ink); background: var(--green-wash);
padding: 4px 8px; border-radius: 3px;
}
.clients-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
border-radius: var(--radius);
overflow: hidden;
}
.clients-grid div {
background: var(--paper);
padding: 32px 24px;
min-height: 120px;
display: grid;
place-items: center;
text-align: center;
font-family: var(--sans);
font-stretch: 88%;
font-weight: 700;
font-size: clamp(16px, 1.5vw, 20px);
color: var(--ink-2);
line-height: 1.15;
}
/* ========================= Credentials ========================= */
.creds, .cred-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.cred, .cred-card {
display: block;
color: inherit;
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: 22px;
background: var(--paper);
transition: border-color .2s, box-shadow .2s, transform .25s var(--ease);
}
a.cred:hover, a.cred-card:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.cred-badge {
height: 96px;
display: grid;
place-items: center;
background: var(--paper-2);
border-radius: var(--radius-sm);
padding: 12px;
margin-bottom: 18px;
}
.cred-badge img { max-height: 72px; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.cred h4, .cred-meta h4, .cred h3, .cred-meta h3 { font-size: 17px; margin-bottom: 6px; letter-spacing: -0.01em; line-height: 1.2; }
.cred p, .cred-meta p { font-size: 14px; color: var(--ink-2); }
.cred .chip, .cred-meta .chip { margin-top: 12px; }
.cred-num { display: none; }
.cred-arrow { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--green-ink); }
.cred-arrow::after {
content: "";
width: 14px; height: 14px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Credential register: the badge images live once, in the footer strip and on About.
Here it is the name, what it means and whether it is current. */
.creds--register .cred { padding: 20px; }
.creds--register .cred h4, .creds--register .cred h3 { margin-bottom: 6px; }
.cert-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cert-badge-mini {
display: block;
height: 64px;
padding: 8px 12px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-sm);
transition: border-color .2s, transform .2s var(--ease);
}
.cert-badge-mini img { height: 100%; width: auto; object-fit: contain; }
.cert-badge-mini:hover { border-color: var(--rule-2); transform: translateY(-2px); }
/* Award feature */
.award-feature {
display: grid;
grid-template-columns: 200px 1fr;
gap: clamp(24px, 4vw, 48px);
align-items: center;
padding: clamp(24px, 3vw, 40px);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
}
.award-feature__badge { display: grid; place-items: center; background: var(--paper-2); border-radius: var(--radius-sm); padding: 20px; aspect-ratio: 1; }
.award-feature__badge img { max-height: 140px; width: auto; mix-blend-mode: multiply; }
/* Award block whose proof is a photograph rather than a badge: fill the square. */
.award-feature__badge--photo { padding: 0; overflow: hidden; }
.award-feature__badge--photo img { max-height: none; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.award-feature__kicker { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); }
.award-feature__body h3 { margin: 10px 0 12px; }
.award-feature__body p { color: var(--ink-2); font-size: 15px; }
/* Handbook */
.handbook-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(20px, 3vw, 40px);
align-items: center;
padding: clamp(24px, 3vw, 36px);
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
}
.handbook-card .icon {
width: 64px; height: 80px;
border: 1.5px solid var(--ink);
border-radius: 4px;
display: grid;
place-items: end center;
padding-bottom: 8px;
font-family: var(--mono);
font-size: 12px;
position: relative;
background: var(--paper-2);
}
.handbook-card .icon::before {
content: "";
position: absolute; top: -1.5px; right: -1.5px;
width: 18px; height: 18px;
background: var(--green);
clip-path: polygon(0 0, 100% 100%, 0 100%);
border-bottom-left-radius: 2px;
}
.handbook-card h4, .handbook-card h3 { margin-bottom: 6px; }
.handbook-card h3 { font-size: 20px; letter-spacing: -0.01em; line-height: 1.2; }
.handbook-card p { font-size: 14.5px; color: var(--ink-2); }
/* Capability cards (enterprise) */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap-card {
padding: 28px;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
display: flex;
flex-direction: column;
gap: 12px;
}
.cap-card__k { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.cap-card h3 { font-size: 20px; }
.cap-card p { font-size: 14.5px; color: var(--ink-2); flex: 1; }
.cap-card__cta {
display: inline-flex; align-items: center; gap: 8px;
background: none; border: none; padding: 0; cursor: pointer;
font-weight: 600; font-size: 14.5px; color: var(--green-ink); text-align: left;
}
.cap-card__cta:hover { color: var(--green-deep); }
.cap-card__cta .i { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.cap-card__cta:hover .i { transform: translateX(3px); }
.band-ink .cap-card { background: var(--ink-field-2); border-color: var(--on-ink-rule); }
.band-ink .cap-card h3 { color: var(--on-ink); }
.band-ink .cap-card p { color: var(--on-ink-2); }
.band-ink .cap-card__k { color: var(--on-ink-2); }
.band-ink .cap-card__cta { color: var(--green); }
/* ========================= Team ========================= */
/* Lead card owns the first row; the crew sits in one even row beneath */
/* Three across matches the current roster below the lead card. auto-fit cannot
collapse the spare track here because the lead card spans 1 / -1, so the
count is set explicitly and needs revisiting if the team grows. */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 28px; }
.team-card { display: grid; gap: 16px; align-content: start; }
.team-card.is-lead {
grid-column: 1 / -1;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
gap: clamp(24px, 4vw, 56px);
align-items: center;
padding-bottom: 40px;
border-bottom: 1px solid var(--rule);
}
.team-photo { aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--paper-3); position: relative; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s; filter: grayscale(1); }
.team-card:hover .team-photo img { transform: scale(1.03); filter: grayscale(0); }
.team-card.is-lead .team-photo { aspect-ratio: 4 / 4.2; }
.team-photo::before {
content: attr(data-initials);
position: absolute; inset: 0;
display: grid; place-items: center;
font-weight: 700; font-size: 40px; color: var(--ink-3);
z-index: 0;
}
.team-photo img { position: relative; z-index: 1; }
.team-info .name { font-size: 20px; margin-bottom: 4px; }
.team-card.is-lead .team-info .name { font-size: clamp(24px, 2.2vw, 30px); }
.team-info .role {
font-family: var(--sans);
font-stretch: 80%;
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--green-ink);
margin-bottom: 12px;
}
.team-info .bio { font-size: 15px; color: var(--ink-2); }
.team-tags { margin-top: 14px; }
.team-links { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
/* ========================= Contact tiles ========================= */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-tile {
display: flex;
flex-direction: column;
gap: 8px;
padding: 28px;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--paper);
color: inherit;
min-height: 220px;
transition: border-color .2s, box-shadow .2s, transform .25s var(--ease);
}
.contact-tile:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.contact-tile .i { color: var(--green-ink); width: 28px; height: 28px; stroke-width: 1.5; margin-bottom: 8px; }
.contact-num { display: none; }
.contact-eyebrow {
font-family: var(--sans);
font-stretch: 80%;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-3);
}
.contact-primary { font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.contact-secondary { font-size: 14.5px; color: var(--ink-2); }
.contact-foot { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-3); }
.contact-status { display: inline-flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }
.contact-dot { display: none; }
.contact-arrow {
width: 18px; height: 18px;
background: var(--green-ink);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
font-size: 0;
transition: transform .25s var(--ease);
}
.contact-tile:hover .contact-arrow { transform: translate(2px, -2px); }
/* ========================= Subpage hero ========================= */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); }
.page-hero .crumbs { margin-bottom: 28px; }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 24px; max-width: 60ch; }
.page-hero .actions, .page-hero .hero-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
.page-hero-grid {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: clamp(32px, 5vw, 80px);
align-items: end;
}
/* Hero media beside the text rather than stacked below it, so the page opens
in one screen. Mobile still collapses to one column further down. */
.page-hero-grid--media { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.page-hero-grid--media + .spec--row { margin-top: clamp(32px, 4vw, 56px); }
.page-hero-plate { margin-top: clamp(32px, 4vw, 56px); }
.page-hero-plate .plate { aspect-ratio: 21 / 9; }
.crumbs { color: var(--ink-3); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--ink-3); transition: color .2s; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--rule-2); display: inline-block; }
.crumbs > span:last-child { color: var(--ink); }
.page-hero-meta { display: none; }
/* Anchor targets land below the fixed chrome */
[id] { scroll-margin-top: calc(var(--utility-h) + var(--header-h) + 24px); }
/* Sticky side nav (FAQ, case study) */
.toc { position: sticky; top: calc(var(--utility-h) + var(--header-h) + 24px); display: flex; flex-direction: column; }
.toc a {
padding: 12px 0;
border-top: 1px solid var(--rule);
font-weight: 600;
font-size: 14.5px;
color: var(--ink-2);
display: flex;
justify-content: space-between;
transition: color .2s;
}
.toc a:last-child { border-bottom: 1px solid var(--rule); }
.toc a:hover, .toc a.active { color: var(--green-ink); }
.aside-sticky { position: sticky; top: calc(var(--utility-h) + var(--header-h) + 24px); }
/* FAQ */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 22px 0;
font-weight: 600;
font-size: clamp(17px, 1.5vw, 20px);
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--ink);
transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--green-ink); }
.faq summary::after {
content: "";
flex-shrink: 0;
width: 28px; height: 28px;
border: 1px solid var(--rule-2);
border-radius: 50%;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 16px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 16px no-repeat;
transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--ink-2); font-size: 15.5px; margin: 0 0 24px; max-width: 64ch; }
.faq-group { margin-bottom: clamp(40px, 5vw, 64px); }
.faq-group h2 { font-size: clamp(24px, 2.4vw, 32px); margin-bottom: 20px; }
/* ========================= Forms ========================= */
.form-grid { display: grid; gap: 18px; }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; gap: 16px; }
.form-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: clamp(24px, 3vw, 40px);
}
.band-green .form-card { border-color: transparent; box-shadow: var(--shadow-2); }
.form-section { font-weight: 700; font-size: 15px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; gap: 12px; align-items: baseline; }
.form-section:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.form-section .mono { color: var(--ink-3); font-size: 12px; }
.field label, .field legend {
display: block;
font-weight: 500;
font-size: 13.5px;
color: var(--ink-2);
margin-bottom: 7px;
}
.field legend { padding: 0; }
.field input, .field select, .field textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--rule-2);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font: 400 15px var(--sans);
line-height: 1.4;
transition: border-color .2s, box-shadow .2s;
appearance: none;
-webkit-appearance: none;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--green-ink);
box-shadow: 0 0 0 3px var(--green-wash);
}
.field select {
padding-right: 40px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:user-invalid, .field textarea:user-invalid { border-color: #b3261e; }
.field .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 4px; }
.field label.check, label.check {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
margin: 0;
padding: 12px 14px;
border: 1px solid var(--rule-2);
border-radius: var(--radius-sm);
background: var(--paper);
transition: border-color .2s, background .2s;
}
label.check:hover { border-color: var(--green-ink); }
label.check:has(input:checked) { border-color: var(--green-ink); background: var(--green-wash); }
label.check input {
appearance: auto;
-webkit-appearance: auto;
accent-color: var(--green-ink);
width: 18px;
height: 18px;
padding: 0;
flex-shrink: 0;
margin: 0;
}
.form-note {
min-width: 0;
margin-top: 2px;
padding: 16px 18px;
background: var(--green-wash);
border: 1px solid rgba(20, 122, 40, 0.25);
border-radius: var(--radius-sm);
font-size: 14.5px;
color: var(--ink-2);
line-height: 1.5;
}
.form-note strong { display: block; margin-bottom: 4px; }
.form-note strong { color: var(--green-ink); }
.form-note a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 8px 0;
margin: -8px 0;
vertical-align: middle;
color: var(--green-ink);
font-weight: 600;
text-decoration: underline;
}
.form-note .copy-enquiry {
display: inline-flex; align-items: center;
min-height: 44px;
background: none; border: none; padding: 8px 4px; margin: -8px 0;
color: var(--green-ink); font-weight: 600; text-decoration: underline; cursor: pointer;
}
.form-note .copy-enquiry:focus-visible { outline-offset: 2px; }
.form-note-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 20px;
margin: 4px 0 8px;
}
.form-note-actions > a,
.form-note-actions > button { margin: 0; padding: 8px 0; }
.form-fallback-label {
display: block;
margin: 12px 0 6px;
font-size: 13.5px;
font-weight: 500;
}
.form-fallback {
display: block;
width: 100%;
min-width: 0;
min-height: 180px;
padding: 12px;
border: 1px solid var(--rule-2);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font: 400 15px/1.5 var(--sans);
resize: vertical;
}
[data-form-intro], .form-intro { max-width: 56ch; }
[data-form-status], .form-status { margin-top: 4px; }
[data-form-status][hidden], .form-status[hidden] { display: none; }
.rule { border: none; border-top: 1px solid var(--rule); margin: 0; }
/* ========================= Callback FAB + sheet ========================= */
.callback-fab {
position: fixed;
right: 24px; bottom: 24px;
z-index: 60;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 18px;
background: var(--green);
color: var(--ink);
border: none;
border-radius: var(--radius);
font-weight: 700;
font-size: 13.5px;
letter-spacing: -0.005em;
cursor: pointer;
box-shadow: 0 14px 30px -12px rgba(16, 25, 21, 0.45);
transition: background .2s, transform .25s var(--ease), opacity .25s;
}
.callback-fab:hover { background: var(--green-2); transform: translateY(-2px); }
.callback-fab .i { width: 18px; height: 18px; stroke-width: 2; }
.callback-fab .pulse-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink);
animation: pulse-ink 2.4s infinite;
}
@keyframes pulse-ink {
0% { box-shadow: 0 0 0 0 rgba(16, 25, 21, 0.4); }
70% { box-shadow: 0 0 0 8px rgba(16, 25, 21, 0); }
100% { box-shadow: 0 0 0 0 rgba(16, 25, 21, 0); }
}
body:has(.nav-links.open) .callback-fab { opacity: 0; pointer-events: none; }
.callback-fab.tucked { opacity: 0; pointer-events: none; transform: translateY(12px); }
body[data-screen-label="Quote"] .callback-fab,
body[data-screen-label="Contact"] .callback-fab { display: none; }
.callback-backdrop {
position: fixed;
inset: 0;
z-index: 60;
background: rgba(15, 23, 20, 0.42);
}
.callback-backdrop[hidden] { display: none; }
body.callback-open .callback-fab { visibility: hidden; }
.callback-sheet {
position: fixed;
right: 24px; bottom: 24px;
z-index: 61;
width: 380px;
max-width: calc(100vw - 32px);
background: var(--paper);
color: var(--ink);
border: 1px solid var(--rule);
border-radius: 10px;
box-shadow: var(--shadow-2);
padding: 26px;
transform: translateY(16px);
opacity: 0;
visibility: hidden;
pointer-events: none;
max-height: min(720px, calc(100dvh - 32px));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
transition: transform .35s var(--ease), opacity .25s;
}
.callback-sheet.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
.callback-sheet h4 { margin: 12px 0 8px; font-size: 22px; }
.callback-sheet h2 { padding-right: 54px; }
.callback-sheet p { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.callback-sheet .pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 9px; border-radius: 3px;
background: var(--green-wash); color: var(--green-ink);
font-family: var(--sans); font-stretch: 80%; font-weight: 600; font-size: 11.5px;
letter-spacing: 0.06em; text-transform: uppercase;
}
.callback-sheet .close-x {
position: absolute;
top: 12px; right: 12px;
width: 44px; height: 44px;
border: 1px solid var(--rule);
border-radius: 50%;
background: var(--paper);
cursor: pointer;
font-size: 0;
display: grid; place-items: center;
}
.callback-sheet .close-x::before {
content: "";
width: 14px; height: 14px;
background: var(--ink);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.callback-sheet .close-x:hover { border-color: var(--ink); }
.callback-sheet .form-grid { gap: 16px; }
/* ========================= Footer ========================= */
.site-footer {
background: var(--ink-field);
color: var(--on-ink-2);
padding: clamp(56px, 7vw, 88px) 0 28px;
font-size: 14.5px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
gap: clamp(32px, 4vw, 56px);
}
.footer-grid h5 {
color: var(--on-ink);
font-family: var(--sans);
font-stretch: 80%;
font-weight: 600;
font-size: 12.5px;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 18px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.footer-grid a { color: var(--on-ink-2); transition: color .2s; }
.footer-grid a:hover { color: var(--on-ink); }
.footer-grid ul a,
.footer-contact .phone a,
.footer-contact > p a,
.footer-bottom a {
display: inline-flex;
align-items: center;
min-height: 44px;
line-height: 1.35;
}
.footer-brand-sub { font-family: var(--mono); font-size: 12px; color: var(--on-ink-2); margin-top: 22px; opacity: 0.8; }
.footer-contact .phone a { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--on-ink); }
.footer-contact .btn { margin-top: 4px; }
.footer-certs { margin-top: clamp(40px, 5vw, 56px); padding-top: 32px; border-top: 1px solid var(--on-ink-rule); }
.footer-certs-label {
display: block;
font-family: var(--sans);
font-stretch: 80%;
font-weight: 600;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--on-ink);
margin-bottom: 16px;
}
.footer-certs-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.site-footer .cert-badge-mini { background: #fff; border-color: transparent; }
.footer-bottom {
margin-top: 40px;
padding-top: 22px;
border-top: 1px solid var(--on-ink-rule);
display: flex;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
}
.footer-bottom a:hover { color: var(--on-ink); }
/* ========================= Tool note (Onyx1) ========================= */
.tool-note {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--rule);
font-size: 15px;
color: var(--ink-2);
}
.tool-note img { height: 22px; width: auto; display: block; }
.tool-note .link { margin-left: auto; }
.band-ink .tool-note { border-color: var(--on-ink-rule); color: var(--on-ink-2); }
.onyx1-mark { height: 32px; width: auto; display: block; }
.onyx1-hero-mark { height: 36px; margin-bottom: 28px; }
.product-plate { background: #0b111b; }
.product-plate img { object-fit: contain; }
/* Studio credit in the footer bottom bar. Ciphered at rest, decoded on hover or
focus, with a fixed width so the line does not reflow while it animates. */
.credit {
/* 0.72 against the footer ground clears AA at 5.7:1. At 0.5 it read as 3.4
and failed contrast while still looking recessed, which is the trap. */
opacity: 0.72;
transition: opacity .35s var(--ease), color .35s var(--ease);
white-space: nowrap;
/* Underlined because it sits inside a run of plain text. Without it the link
is identifiable only by colour, which fails at 1.74:1 against the text
around it. Kept thin and offset so it stays quiet. */
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* The label stays in the footer's own face; only the name is set in mono, so the
cipher reads as machine text against it. */
.credit .credit-text {
/* Stays inline so it shares the parent's baseline. An inline-block would carry
its own line box, and Fragment Mono's metrics would set the name below the
label. Width is already constant: the cipher is always the same number of
monospace characters as the name. */
margin-left: 0.45em;
font-family: var(--mono);
font-variant-ligatures: none;
letter-spacing: 0.04em;
}
.credit:hover, .credit:focus-visible { opacity: 1; color: var(--green); }
.credit:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .credit { transition: none; } }
/* Turnstile sits above the submit button. Flexible size fills the form width;
in Managed mode most visitors never see it resolve to anything. */
.turnstile-holder { margin: 20px 0 4px; min-height: 0; }
.turnstile-holder:empty { display: none; }
/* Honeypot. Off-screen rather than display:none, since some bots skip fields
that are not rendered at all. Never announced, never tabbable. */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ========================= Misc / legacy hooks ========================= */
.card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
a.card:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.logo-strip { display: none; }
.rope-guides, .case-marquee, .scroll-progress, .ig-grid, .photo-ph { display: none; }
.ig-tile { display: block; }
/* ========================= Reveal: entries logging onto the sheet =========================
site.js tags section content with .rv (and a --rv sibling index, capped) and adds .in when it
enters the viewport. The arrival is a short opacity/rise cue; important hero and page-hero
copy stays present from the first paint, while below-fold content can still log onto the sheet. */
:root { --ease-arrive: cubic-bezier(0.16, 1, 0.3, 1); }
html.js .rv, html.js .reveal {
opacity: 0;
transform: translateY(12px);
transition: opacity .42s var(--ease-arrive), transform .58s var(--ease-arrive);
transition-delay: calc(var(--rv, 0) * 70ms);
}
html.js .rv.in, html.js .reveal.in { opacity: 1; transform: none; }
html.js .rv--plate { transform: translateY(8px); }
html.js .rv--plate:not(.in) .plate img,
html.js .rv--plate:not(.in) .team-photo img { transform: scale(1.025); }
html.js .rv--plate .plate img, html.js .rv--plate .team-photo img { transition: transform .8s var(--ease-arrive); }
/* Rows are never clipped while they settle. */
html.js .rv--row { transform: translateY(8px); }
html.js .rv--row.in { transform: none; }
/* Hero and page-hero copy is exempt from the reveal and present from first paint. */
html.js .hero-content > .rv,
html.js .page-hero .rv {
opacity: 1;
transform: none;
transition: none;
}
html.js .gantt.rv { transform: none; }
/* ========================= Responsive ========================= */
@media (max-width: 1100px) {
.schedule, .schedule--4 { grid-template-columns: 1fr 1fr; }
.schedule--mosaic .service { grid-column: span 6; }
.schedule--mosaic .service--lead { grid-column: 1 / -1; }
.schedule--mosaic .service--lead .plate { grid-column: 1 / span 7; }
.schedule--mosaic .service--lead h3, .schedule--mosaic .service--lead p, .schedule--mosaic .service--lead .service-more { grid-column: 8 / -1; }
.records { grid-template-columns: 1fr; }
.record .plate { aspect-ratio: 21 / 9; }
.process-list--grid { --cols: 2; }
.creds, .cred-grid { grid-template-columns: repeat(3, 1fr); }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.job-grid { grid-template-columns: repeat(3, 1fr); }
.clients-grid { grid-template-columns: repeat(3, 1fr); }
.process-list--grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
.record-side { grid-template-columns: 1fr 1fr; }
/* Keep the one-line explanation in the directory: it is the comparison aid a
property manager needs after the photography drops out at this width. */
.service-row {
grid-template-columns: 40px minmax(0, 1fr) 24px;
align-items: start;
}
.service-row .num { grid-column: 1; grid-row: 1 / span 2; padding-top: 3px; }
.service-row > div:nth-child(2) { grid-column: 2; grid-row: 1; min-width: 0; }
.service-row .blurb {
display: block;
grid-column: 2;
grid-row: 2;
margin: 8px 0 0;
font-size: 14.5px;
line-height: 1.45;
max-width: 52ch;
}
.service-row .plate { display: none; }
.service-row .arrow { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.quote-block { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr 1fr; }
.cap-grid, .contact-grid { grid-template-columns: 1fr; }
.aside-sticky { position: static; }
.spec.spec--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fact-row { grid-template-columns: 1fr; }
.media-facts { grid-template-columns: 1fr; }
.page-hero-grid { grid-template-columns: 1fr; align-items: start; }
.two-col-text { columns: 1; }
.award-feature { grid-template-columns: 1fr; }
.award-feature__badge { max-width: 200px; }
}
@media (max-width: 760px) {
/* Shorter section rhythm keeps the programme sheet scannable on a phone while
preserving the larger desktop cadence. */
section { padding: clamp(52px, 8vw, 80px) 0; }
section.tight { padding: clamp(36px, 6vw, 56px) 0; }
.plate--21-9 { aspect-ratio: 4 / 3; }
.section-head { grid-template-columns: 1fr; gap: 16px; }
.split { grid-template-columns: 1fr; }
.split.image-left > .split-img { order: 0; }
.proof { grid-template-columns: 1fr 1fr; }
.proof--six { grid-template-columns: 1fr; }
.proof--six .proof-cell { border-right: none; margin-right: 0; border-bottom: 1px solid var(--rule); }
.proof-cell { padding: 16px 16px 16px 0; margin-right: 16px; }
.proof-cell:nth-child(2) { border-right: none; margin-right: 0; }
.proof-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
.gantt { --label-w: 1fr; }
.gantt-head, .gantt-row { grid-template-columns: 1fr; }
.gantt-head .gantt-label { display: none; }
.gantt-row { padding-bottom: 16px; }
.gantt-track { min-height: 56px; margin: 0 16px; }
.gantt-label { padding: 16px 16px 8px; }
.gantt-scale { margin: 0 16px; }
.gantt-scale span { font-size: 10px; padding: 10px 3px; letter-spacing: 0; }
.gantt-track { min-height: 64px; }
.gantt-bar { font-size: 10.5px; padding: 0 5px; letter-spacing: 0.02em; }
.gantt-bar .bar-full { display: none; }
.gantt-bar .bar-short { display: inline; }
.stats { grid-template-columns: 1fr 1fr; }
.stat:nth-child(2n) { border-right: none; margin-right: 0; }
.stats-3 { grid-template-columns: 1fr 1fr; }
.creds, .cred-grid { grid-template-columns: 1fr 1fr; }
.team-grid { grid-template-columns: 1fr 1fr; }
.team-card.is-lead { grid-template-columns: 1fr; }
.team-card.is-lead .team-photo { aspect-ratio: 4 / 5; }
.job-grid { grid-template-columns: 1fr 1fr; }
.case-grid { grid-template-columns: 1fr; }
.cs-strip, .cs-strip--4 { grid-template-columns: repeat(3, 1fr); }
.quote-record { grid-template-columns: 1fr; gap: 12px; }
.clients-grid { grid-template-columns: 1fr 1fr; }
.record-side { grid-template-columns: 1fr; }
.award-videos { grid-template-columns: 1fr; }
.handbook-card { grid-template-columns: auto 1fr; }
.handbook-card .btn { grid-column: 1 / -1; justify-self: start; }
.process-list li { grid-template-columns: 48px 1fr; gap: 16px; }
.service-row { padding: 20px 0; }
.process-list--grid { --cols: 1; grid-template-columns: 1fr; }
.record .plate { aspect-ratio: 16 / 10; }
/* The hero holds the first screen on a phone as it does on a desktop: the
photograph fills the top, the copy sits at the foot of it, and the proof
register closes the screen. Letting it collapse to content height brought
the next section up into the fold. */
.hero { min-height: 100svh; }
.hero-bg::after {
background: linear-gradient(180deg, rgba(10, 16, 13, 0.6) 0%, rgba(10, 16, 13, 0.78) 34%, rgba(10, 16, 13, 0.9) 100%);
}
/* The hero carries an H1, the plain-language summary and the positioning statement.
On a phone that is enough copy to push the call to action off the first screen, so the
top padding and the inter-block gaps tighten here to keep it reachable without
scrolling. No copy is cut. */
.hero-content { padding-top: calc(var(--utility-h) + var(--header-h) + 20px); padding-bottom: 28px; }
.hero .lead { margin-top: 14px; font-size: 16px; }
.hero-actions { margin-top: 22px; }
.hero-index { margin-top: 24px; }
.toc { position: static; margin-bottom: 32px; }
.faq-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
section { padding: 44px 0; }
section.tight { padding: 36px 0; }
.creds--register { grid-template-columns: 1fr; gap: 0; }
.creds--register .cred { border: 0; border-top: 1px solid var(--rule); border-radius: 0; padding: 16px 0; }
.creds--register .cred:last-child { border-bottom: 1px solid var(--rule); }
.creds--register .cred:hover { box-shadow: none; transform: none; border-color: var(--rule); }
.schedule, .schedule--4 { grid-template-columns: 1fr; }
.schedule { row-gap: 28px; }
.service .plate { aspect-ratio: 2 / 1; margin-bottom: 14px; }
.feature-plate { aspect-ratio: 2 / 1; }
.schedule--mosaic .service, .schedule--mosaic .service--lead, .schedule--mosaic .service--wide { grid-column: span 12; }
.form-grid.cols-2 { grid-template-columns: 1fr; }
.check-grid { grid-template-columns: 1fr; }
.creds, .cred-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; }
.record { grid-template-columns: 1fr; }
.record .plate { aspect-ratio: 16 / 10; }
.record-facts { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-strip, .cs-strip--4 { grid-template-columns: 1fr 1fr; gap: 8px; }
.footer-grid { grid-template-columns: 1fr; }
.callback-fab { right: 16px; bottom: 16px; padding: 12px 14px; font-size: 12.5px; }
.callback-sheet { right: 16px; bottom: 16px; left: 16px; width: auto; padding: 22px; }
.hero h1 { font-size: clamp(40px, 11vw, 56px); }
.job-grid { grid-template-columns: 1fr 1fr; }
.job-tile { min-height: 0; gap: 10px; padding: 16px; }
.job-tile .title { font-size: 15px; }
.clients-grid { grid-template-columns: 1fr; }
.stats, .stats-3 { grid-template-columns: 1fr; }
.stat { border-right: none; margin-right: 0; }
.hide-sm { display: none !important; }
}
/* ========================= Reduced motion ========================= */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
html.js .reveal, html.js .rv, html.js .rv--plate, html.js .rv--row {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
filter: none !important;
}
html.js .page-hero h1.rv,
html.js .hero h1.rv,
html.js .section-head.rv h2 { filter: none !important; }
html.js .rv--plate:not(.in) .plate img,
html.js .rv--plate:not(.in) .team-photo img,
.hero-slides,
.hero-slides > img,
.plate img,
.plate video,
.team-photo img,
.footage-plate img,
.footage-plate video { transform: none !important; }
.gantt-bar { clip-path: inset(0 0 0 0 round 4px) !important; }
.hero-slides { will-change: auto; }
.callback-sheet,
.callback-sheet.open,
.callback-fab.tucked { transform: none !important; }
.btn:hover,
.nav-cta:hover,
.callback-fab:hover,
.record:hover,
.cred:hover,
.cred-card:hover,
.card:hover,
.contact-tile:hover,
.job-tile:hover,
.award-feature:hover,
.cert-badge-mini:hover { transform: none !important; }
.btn-arrow:hover::after,
.link:hover::after,
.service:hover .service-more::after,
.service-row:hover .arrow,
.cap-card__cta:hover .i,
.contact-tile:hover .contact-arrow,
a.contact-row:hover .contact-arrow,
.link--ext:hover::after { transform: none !important; }
}
/* ========================= 2026-09 clarity layer ========================= */
/* Four-item proof register under the hero */
.proof--four { grid-template-columns: repeat(4, 1fr); }
.proof--four .proof-cell { align-items: center; padding: 20px 24px 20px 0; }
.proof--four .proof-cell .v { font-size: 15px; font-weight: 600; line-height: 1.3; }
.proof--four .proof-cell .i { width: 22px; height: 22px; flex: 0 0 auto; }
@media (max-width: 900px) {
.proof--four { grid-template-columns: repeat(2, 1fr); }
.proof--four .proof-cell:nth-child(2n) { border-right: none; margin-right: 0; }
.proof--four .proof-cell:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 560px) {
/* Keep the four proof statements in a compact, readable 2 × 2 register. */
.proof--four { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.proof--four .proof-cell {
gap: 10px;
border-right: none;
margin-right: 0;
border-bottom: 1px solid var(--rule);
padding: 14px 0;
}
.proof--four .proof-cell:nth-child(2n) { padding-left: 0; }
.proof--four .proof-cell .v { font-size: 14px; line-height: 1.25; }
.proof--four .proof-cell .i { width: 20px; height: 20px; }
.proof--four .proof-cell:nth-last-child(-n+2) { border-bottom: none; }
}
/* Service cards: the photograph answers the pointer, the text stays put */
.service .plate img { transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.service:hover .plate img, .service:focus-visible .plate img { transform: scale(1.04); }
.service p { font-size: 15px; color: var(--ink-2); }
.record .plate img { transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.record:hover .plate img { transform: scale(1.03); }
/* Scroll-driven drift inside photo plates, where the browser supports it. Images are set
a little taller than their frame and slide as the frame crosses the viewport. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.plate-fig .plate img, .plate-fig > img { animation: plate-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
@keyframes plate-drift { from { transform: translateY(-1.5%) scale(1.035); } to { transform: translateY(1.5%) scale(1.035); } }
}
}
/* Why ropes: fact tiles beside the rope-drop scene */
.why-ropes { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.why-ropes .fact-row--4 { grid-template-columns: repeat(2, 1fr); }
.rope-scene { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-sheet, 10px); background: var(--paper-2); border: 1px solid var(--rule); overflow: hidden; }
.rope-scene canvas, .rope-scene .rope-scene-poster { position: absolute; left: 0; right: 0; top: 0; bottom: 56px; width: 100%; height: calc(100% - 56px); display: block; }
.rope-scene .rope-scene-poster { display: none; object-fit: cover; }
.rope-scene.is-static:not(.is-live) .rope-scene-poster { display: block; }
.rope-scene.is-static:not(.is-live) canvas, .rope-scene.is-static:not(.is-live) [data-scene-pause] { display: none; }
.rope-scene-ui { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; gap: 8px; align-items: center; z-index: 2; }
.rope-scene-ui button {
font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-2);
background: var(--paper); color: var(--ink-2); cursor: pointer; min-height: 36px;
transition: background .2s, color .2s, border-color .2s;
}
.rope-scene-ui button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.rope-scene-ui button:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.rope-scene-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; padding: 0 18px; z-index: 2; background: var(--paper); border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rope-scene-cap strong { font-family: var(--font, inherit); font-weight: 600; color: var(--ink); }
.rope-scene-cap .t { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
.why-ropes { grid-template-columns: 1fr; }
.rope-scene { aspect-ratio: 1 / 1; }
}
@media (max-width: 560px) {
.why-ropes .fact-row--4 { grid-template-columns: 1fr; }
}
/* Small helper under the home form */
.form-card .form-hint { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.form-card .form-hint a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; margin: -8px 0; vertical-align: middle; }
/* Critique fixes, 2026-09-04 */
.site-footer .btn-primary, .site-footer .btn-primary:hover { color: var(--ink); }
.footer-h { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--on-ink); }
.footer-certs-label { text-transform: none; letter-spacing: 0.01em; font-size: 13px; }
.nav-links a, .nav-links .nav-trigger { min-height: 44px; }
.utility a, .utility .util-r a { display: inline-flex; align-items: center; min-height: var(--utility-h); }
.actions .link, .record .link, .record-body .link { min-height: 44px; }
.rope-scene-ui button { min-height: 44px; padding: 10px 16px; }
.callback-sheet h2 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 8px; }
/* Quote form: the short form first, the detail behind one disclosure */
.form-more { border: 1px solid var(--rule); border-radius: var(--radius-md, 6px); background: var(--paper-2); }
.form-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 600; font-size: 15px; color: var(--ink); min-height: 48px; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary .muted { font-weight: 400; color: var(--ink-3); }
.form-more > summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform .2s; flex: 0 0 auto; margin-right: 4px; }
.form-more[open] > summary::after { transform: rotate(-135deg); }
.form-more > summary:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; border-radius: var(--radius-md, 6px); }
.form-more-body { display: grid; gap: 16px; padding: 4px 16px 18px; border-top: 1px solid var(--rule); }
.form-more-body .form-section { margin-top: 10px; }
.aside-title { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.015em; line-height: 1.15; }
/* ========================= Rework, 2026-09-04 =========================
Seven-service schedule, scope card, footage strip, contact layout, and one hover and reveal
language shared by every page. */
:root { --arrow-mask: url("data:image/svg+xml;utf8,"); }
/* Service tiles: every tile carries the same read-on link so the rows end on one line */
.service .service-more { margin-top: 12px; }
.service h3 { margin-bottom: 8px; }
.service p { margin-bottom: 0; }
/* Scope card: the two-sided definition beside the free condition check */
.scope-card { border: 1px solid var(--on-ink-rule); border-radius: var(--radius); background: var(--ink-field-2); overflow: hidden; }
.scope-card > div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; padding: 22px 24px; border-top: 1px solid var(--on-ink-rule); align-items: start; }
.scope-card > div:first-child { border-top: none; }
.scope-card .key { color: var(--on-ink-2); padding-top: 3px; }
.scope-card p { margin: 0; font-size: 15.5px; color: var(--on-ink); max-width: 44ch; }
.scope-card p b { font-weight: 600; }
.split--head .lead + .lead { margin-top: 14px; }
/* Footage strip: three site clips on one row, one shared height */
.footage { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.footage-plate { position: relative; margin: 0; grid-column: span 3; height: clamp(300px, 32vw, 440px); overflow: hidden; border-radius: var(--radius); background: var(--ink-field); }
.footage-plate--wide { grid-column: span 6; }
.footage-plate video, .footage-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.footage-plate:hover video, .footage-plate:hover img { transform: scale(1.03); }
.footage-plate figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 8px; border-radius: 3px; background: rgba(255,255,255,.94); color: var(--ink-2); font-family: var(--mono); font-size: 11px; max-width: calc(100% - 24px); }
.footage-plate .footage-live { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 3px; background: rgba(16,25,21,.72); color: #fff; font-family: var(--sans); font-stretch: 80%; font-weight: 600; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.footage-plate .footage-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.footage-toggle {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
min-height: 44px;
padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.55);
border-radius: var(--radius-sm);
background: rgba(15, 23, 20, 0.85);
color: #fff;
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.footage-toggle:hover { background: var(--ink-field); }
.footage-toggle:focus-visible { outline-color: #fff; }
.footage-toggle:disabled { cursor: default; opacity: 0.65; }
.footage-fallback {
position: absolute;
top: 68px;
left: 12px;
right: 12px;
z-index: 2;
margin: 0;
padding: 10px 12px;
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink-2);
font-size: 14px;
line-height: 1.45;
}
.footage-fallback[hidden] { display: none; }
/* Contact page: one composed sheet. Rows of ways in, the form beside them, what to send below. */
.contact-rows { border-top: 1px solid var(--rule-2); margin-top: 32px; }
.contact-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule); color: inherit; transition: background .2s, box-shadow .2s; }
a.contact-row:hover { background: var(--paper); box-shadow: 0 0 0 14px var(--paper); border-radius: 2px; }
.contact-row .i { width: 24px; height: 24px; stroke-width: 1.6; color: var(--green-ink); }
.contact-row .contact-eyebrow { margin-bottom: 4px; }
.contact-row .contact-primary { font-size: clamp(20px, 1.8vw, 26px); }
.contact-row .contact-secondary { margin-top: 4px; }
.contact-row .contact-arrow { transition: transform .25s var(--ease); }
a.contact-row:hover .contact-arrow { transform: translate(2px, -2px); }
.contact-socials { margin-top: 24px; display: flex; gap: 8px 20px; flex-wrap: wrap; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.contact-layout .form-card { border: 1px solid var(--rule); box-shadow: none; }
.contact-send .process-list--grid { --cols: 4; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .contact-row { grid-template-columns: 24px 1fr auto; gap: 14px; } }
/* Hover language on every page: plates answer the pointer, rows and tiles lift, keys turn green */
.plate-fig { overflow: hidden; }
.split .plate-fig img, .page-hero-plate .plate img, .award-videos .plate img { transition: transform .9s cubic-bezier(.2,.7,.2,1), filter .5s; }
@supports not (animation-timeline: view()) {
.split .plate-fig:hover img, .page-hero-plate .plate:hover img, .award-videos .plate:hover img { transform: scale(1.03); }
}
.job-tile { transition: background .2s, transform .25s var(--ease), box-shadow .25s; }
.job-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); position: relative; z-index: 1; }
.job-tile:hover .title { color: var(--green-ink); }
.process-list li { transition: background .2s, box-shadow .2s; }
.process-list:not(.process-list--grid) li:hover { background: var(--paper-2); box-shadow: 0 0 0 14px var(--paper-2); border-radius: 2px; }
.process-list--grid li { transition: border-color .3s; }
.process-list--grid li:hover { border-top-color: var(--green); }
.band-ink .process-list:not(.process-list--grid) li:hover { background: var(--ink-field-2); box-shadow: 0 0 0 14px var(--ink-field-2); }
.spec > div { transition: background .2s, box-shadow .2s; }
.page-hero .spec > div:hover, .band-paper .spec > div:hover { background: var(--paper-2); box-shadow: 0 0 0 10px var(--paper-2); border-radius: 2px; }
.band-paper .spec > div:hover { background: var(--paper); box-shadow: 0 0 0 10px var(--paper); }
.fact-row > div { transition: border-color .3s; }
.fact-row > div:hover { border-top-color: var(--green); }
.stat { transition: background .2s; }
.cs-strip .plate img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.cs-strip a.plate:hover img { transform: scale(1.04); }
.cred .cred-badge img { transition: transform .5s var(--ease); }
.cred:hover .cred-badge img { transform: scale(1.04); }
.handbook-card { transition: border-color .2s, box-shadow .2s; }
.handbook-card:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); }
.faq summary { transition: color .2s, padding-left .25s var(--ease); }
.faq details[open] summary { color: var(--green-ink); }
.kv > div { transition: background .2s, box-shadow .2s; }
.kv > div:has(a):hover { background: var(--paper-2); box-shadow: 0 0 0 10px var(--paper-2); border-radius: 2px; }
.band-green .kv > div:has(a):hover { background: rgba(16,25,21,.08); box-shadow: 0 0 0 10px rgba(16,25,21,.08); }
.team-card .team-photo img { transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
.award-feature { transition: border-color .2s, box-shadow .2s, transform .25s var(--ease); }
.award-feature:hover { border-color: var(--rule-2); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.award-videos .plate { overflow: hidden; }
/* The rope-drop scene: a taller frame so the figure reads, with a light gradient floor */
.rope-scene { aspect-ratio: 4 / 5; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.why-ropes { align-items: center; }
.why-ropes > div:first-child .lead { margin-top: 20px; max-width: 52ch; }
.why-ropes .fact-row { margin-top: clamp(32px, 4vw, 48px); gap: 28px 32px; }
@media (max-width: 900px) {
.schedule--mosaic .service--lead { display: flex; }
.schedule--mosaic .service--lead .plate { aspect-ratio: 16 / 10; }
.footage-plate, .footage-plate--wide { grid-column: span 12; height: auto; aspect-ratio: 16 / 10; }
.footage-plate:not(.footage-plate--wide) { grid-column: span 6; aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
.schedule--mosaic .service { grid-column: 1 / -1; }
.footage-plate:not(.footage-plate--wide) { grid-column: span 12; aspect-ratio: 4 / 5; }
.scope-card > div { grid-template-columns: 1fr; gap: 6px; }
}
/* Splits that carry a photograph or clip: the media fills the height of the text beside it, so the
text never floats beside a short picture. Text stays centred when the picture is the taller side. */
.split--media { align-items: stretch; }
.split--media > div { align-self: center; }
.split--media > figure.plate { aspect-ratio: auto; min-height: 380px; align-self: stretch; }
.split--media > figure.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split--media > figure.video-plate { display: flex; flex-direction: column; max-width: none; align-self: stretch; }
.split--media > figure.video-plate .frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 380px; }
.split--media > figure.video-plate figcaption { flex: 0 0 auto; }
@media (max-width: 760px) {
.split--media > figure.plate { aspect-ratio: 4 / 3; min-height: 0; }
.split--media > figure.video-plate .frame { aspect-ratio: 4 / 5; min-height: 0; }
}
/* Home schedule opener: the section heading, lead and link share the feature plate's frame with the
featured service, top and bottom of one column, so the row carries one composition instead of two. */
.feature-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 clamp(24px, 3vw, 40px); padding-bottom: clamp(36px, 4vw, 56px); margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--rule); }
.feature-plate { grid-column: 1 / span 8; aspect-ratio: 16 / 9; display: block; }
.feature-plate img { transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.feature-plate:hover img { transform: scale(1.03); }
.feature-side { grid-column: 9 / -1; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-width: 0; }
.feature-head h2 { max-width: 12ch; }
.feature-head .lead { margin-top: 14px; max-width: 26ch; }
.feature-head .actions { margin-top: 20px; }
.feature-text { display: block; color: inherit; padding-top: 24px; border-top: 1px solid var(--rule); }
.feature-text h3 { font-size: clamp(22px, 2vw, 26px); margin-bottom: 8px; transition: color .2s; }
.feature-text p { color: var(--ink-2); font-size: 15px; max-width: 40ch; margin-bottom: 0; }
.feature-text:hover h3 { color: var(--green-ink); }
.schedule--six { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .schedule--six { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
.feature-row { display: flex; flex-direction: column; gap: 24px; }
.feature-side { display: contents; }
.feature-head { order: 0; }
.feature-plate { order: 1; aspect-ratio: 16 / 10; }
.feature-text { order: 2; border-top: none; padding-top: 0; }
.feature-head h2, .feature-head .lead { max-width: none; }
}
@media (max-width: 560px) {
.schedule--six { grid-template-columns: 1fr; }
.feature-plate { aspect-ratio: 2 / 1; }
}
/* Continuous service demonstration with direct mouse, keyboard and touch rotation. */
.rope-scene { background: radial-gradient(ellipse at 45% 25%, #fff 0%, #eef2eb 62%, #e4eae0 100%); }
.rope-scene canvas, .rope-scene .rope-scene-poster { bottom: 82px; height: calc(100% - 82px); }
.rope-scene canvas { touch-action: none; cursor: grab; }
.rope-scene canvas.is-dragging { cursor: grabbing; }
.rope-scene canvas:focus-visible { outline: 2px solid var(--green-ink); outline-offset: -3px; }
.rope-scene-ui { top: 18px; left: 20px; right: 20px; justify-content: space-between; pointer-events: none; }
.rope-scene-eyebrow { color: var(--ink); font-family: var(--mono); font-size: 10px; letter-spacing: .045em; text-transform: uppercase; }
.rope-scene-eyebrow::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--green-ink); }
.rope-scene-eyebrow span { color: var(--ink-3); }
.rope-scene-ui button { min-height: 44px; padding: 6px 12px; font-size: 11px; background: rgba(255,255,255,.7); pointer-events: auto; }
.rope-scene-orbit-hint { display: none; position: absolute; bottom: 94px; left: 20px; z-index: 2; color: var(--ink-2); font: 10px var(--mono); pointer-events: none; background: #f6f9f1e8; padding: 4px 7px; border-radius: 3px; }
.rope-scene.is-live .rope-scene-orbit-hint { display: block; }
.rope-scene-inspection { position: absolute; left: 15px; z-index: 2; color: var(--green-ink); font: 10px var(--mono); padding: 4px 7px; border-radius: 3px; background: #f6f9f1e8; pointer-events: none; }
.rope-scene-cap { height: 82px; padding: 12px 20px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; background: rgba(255,255,255,.7); }
.rope-scene-cap strong { font-family: var(--font, inherit); font-size: 13px; line-height: 1.35; }
.rope-scene-cap .t { font-size: 10px; line-height: 1.4; }
@media (max-width: 560px) {
.rope-scene { aspect-ratio: 4 / 5; }
.rope-scene-ui { left: 14px; right: 14px; top: 12px; }
.rope-scene-eyebrow { font-size: 9px; }
.rope-scene-eyebrow span { display: none; }
.rope-scene-orbit-hint { left: 14px; }
.rope-scene-cap { padding-inline: 14px; }
.rope-scene-cap strong { font-size: 12px; }
.rope-scene-cap .t { font-size: 9px; }
}
/* A nonmodal speech bubble stays inside the animated scene and follows the selected person. */
.rope-scene-eyebrow { margin-right: auto; }
.crew-details { position: absolute; z-index: 4; display: flex; flex-direction: column; width: min(230px, calc(100% - 20px)); max-height: 240px; margin: 0; padding: 0; border: 1px solid #b9cabc; border-radius: 10px; background: #fbfdf8f7; color: var(--ink); box-shadow: 0 6px 22px #10191524; overflow: hidden; }
.crew-details[hidden] { display: none; }
.crew-details-tether { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 82px); z-index: 3; pointer-events: none; overflow: hidden; }
.crew-details-tether path { fill: none; stroke: #61866b; stroke-width: 1.3; }
.crew-details-tether circle { fill: #16772b; stroke: #fff; stroke-width: 1.5; }
.crew-details-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 12px; flex-shrink: 0; }
.crew-details-person { color: var(--green-ink); font: 9px var(--mono); }
.crew-details-close { width: 30px; height: 30px; background: transparent; border: 0; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink); }
.crew-details-close:hover { background: var(--paper-2); }
.crew-details h2 { margin: 0 12px 8px; font-size: 14px; line-height: 1.15; }
.crew-details-tabs { display: flex; gap: 4px; padding: 0 12px 8px; border-bottom: 1px solid var(--rule); flex-shrink: 0; }
.crew-details-tabs button { padding: 3px 7px; min-height: 26px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; color: var(--ink-2); font: 9px var(--mono); cursor: pointer; }
.crew-details-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.crew-details button:focus-visible, .crew-details a:focus-visible { outline: 2px solid var(--green-ink); outline-offset: -2px; }
.crew-details-body { overflow-y: auto; overscroll-behavior: contain; padding: 10px 12px 12px; }
.crew-details dl { margin: 0; }
.crew-details dl > div + div { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.crew-details dt { font-size: 11px; font-weight: 700; margin-bottom: 3px; }
.crew-details dd { margin: 0; color: var(--ink-2); font-size: 11px; line-height: 1.5; }
.crew-details dd a { white-space: nowrap; color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; font-size: 10px; }
@media (pointer: coarse) {
.crew-details-close { width: 32px; height: 32px; }
.crew-details-tabs button { min-height: 30px; }
}
@media (max-width: 520px) {
.crew-details { width: min(216px, calc(100% - 20px)); }
.rope-scene-orbit-hint { right: 14px; width: fit-content; max-width: calc(100% - 28px); font-size: 9px; }
}
/* One aligned camera, two live access methods. The divider leaves the scene free to orbit. */
.rope-compare { --compare-split: 50%; --compare-footer: 145px; }
.rope-compare canvas, .rope-compare .rope-scene-poster, .rope-compare .crew-details-tether { bottom: var(--compare-footer); height: calc(100% - var(--compare-footer)); }
.rope-compare .rope-scene-cap { height: var(--compare-footer); padding: 14px 18px 10px; gap: 10px; background: #f9fbf5; }
.rope-compare .rope-scene-eyebrow { font-size: 9px; letter-spacing: .035em; }
.rope-compare .rope-scene-ui { top: 10px; left: 18px; right: 12px; }
.rope-compare .rope-scene-ui button { min-height: 32px; padding: 4px 10px; border-radius: 5px; }
.compare-labels { position: absolute; top: 58px; left: 18px; right: 18px; z-index: 2; display: flex; justify-content: space-between; pointer-events: none; }
.compare-labels > span { color: #17562c; font-size: 12px; font-weight: 650; padding: 5px 8px; background: #f7faf1e8; border: 1px solid #cddbc9; border-radius: 5px; }
.compare-labels > span:last-child { text-align: right; color: #85512f; background: #fcf7ece8; border-color: #dfd1bb; }
.compare-labels small { display: block; font: 9px var(--mono); margin-top: 2px; }
.compare-divider { display: none; position: absolute; z-index: 3; top: 104px; bottom: calc(var(--compare-footer) + 43px); left: clamp(22px, var(--compare-split), calc(100% - 22px)); width: 44px; transform: translateX(-50%); cursor: ew-resize; touch-action: none; outline: none; }
.rope-compare.is-live .compare-divider { display: block; }
.compare-divider::before { content: ''; position: absolute; width: 2px; left: 21px; top: 0; bottom: 0; background: #fff; box-shadow: 0 0 0 1px #304c3f36; }
.compare-grip { position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin-top: -22px; display: flex; align-items: center; justify-content: center; gap: 11px; background: #fbfdf7; border: 1px solid #abbba7; box-shadow: 0 3px 12px #173d2926; border-radius: 50%; color: #245939; font: 25px/1 sans-serif; }
.compare-divider:focus-visible .compare-grip { outline: 3px solid var(--green-ink); outline-offset: 3px; }
.compare-drag { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; background: #f8fbf3; border: 1px solid #d3ddce; border-radius: 4px; padding: 4px 7px; font: 8px var(--mono); color: #4c6551; pointer-events: none; }
.compare-divider[aria-valuenow="0"] .compare-drag { transform: translateX(-15%); }
.compare-divider[aria-valuenow="100"] .compare-drag { transform: translateX(-85%); }
.rope-compare .rope-scene-orbit-hint { bottom: calc(var(--compare-footer) + 12px); left: 12px; font-size: 8px; }
.compare-view { position: absolute; bottom: calc(var(--compare-footer) + 10px); right: 12px; z-index: 2; min-height: 28px; border: 1px solid #b9c8b4; border-radius: 4px; background: #f8fbf3ed; color: var(--ink); padding: 4px 7px; font: 9px var(--mono); cursor: pointer; }
.compare-view:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; }
.compare-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.compare-status-grid > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.compare-status-grid > div + div { border-left: 1px solid #d5ddcf; padding-left: 18px; }
.compare-method { font: 9px var(--mono); color: #215d32; text-transform: uppercase; display: flex; justify-content: space-between; gap: 4px; }
.compare-status-grid > div:last-child .compare-method { color: #89522f; }
.compare-method b { font-weight: 500; white-space: nowrap; }
.rope-compare .rope-scene-cap strong { font-size: 11px; line-height: 1.4; }
.rope-compare .rope-scene-cap .t { font-size: 8px; }
.compare-progress { height: 3px; background: #e7e1d5; border-radius: 2px; overflow: hidden; margin-top: 2px; }
.compare-progress > span { display: block; height: 100%; width: 0; background: #b78150; transition: width .3s; }
.compare-note { font: 8px/1.4 var(--mono); color: var(--ink-3); }
.rope-compare:not(.is-live) .compare-labels, .rope-compare:not(.is-live) .compare-view, .rope-compare:not(.is-live) .rope-scene-ui button { display: none; }
@media (max-width: 560px) {
.rope-compare { aspect-ratio: 3 / 4; --compare-footer: 158px; }
.rope-compare .rope-scene-cap { padding-inline: 12px; }
.compare-status-grid { gap: 10px; }
.compare-status-grid > div + div { padding-left: 10px; }
.compare-labels { left: 12px; right: 12px; }
.compare-labels > span { font-size: 11px; }
.compare-labels small { font-size: 8px; }
.rope-compare .rope-scene-orbit-hint { max-width: 155px; }
}
@media (prefers-reduced-motion: reduce) { .compare-progress > span { transition: none; } }
.rope-compare[data-comparison="rope"] .compare-labels > span:last-child,
.rope-compare[data-comparison="scaffold"] .compare-labels > span:first-child { visibility: hidden; }
.rope-compare.is-static:not(.is-live) .compare-status-grid { grid-template-columns: 1fr; }
.rope-compare.is-static:not(.is-live) .compare-status-grid > div:last-child { display: none; }
/* Elapsed-time comparison: a clear seam and a clock for each method. */
.rope-compare .rope-scene-ui { z-index: 4; gap: 5px; }
.rope-compare .rope-scene-eyebrow { background: #f6f9f1e8; padding: 3px 4px; border-radius: 3px; }
.rope-compare .rope-scene-ui button { font-size: 9px; padding-inline: 8px; }
.compare-seam { display: none; position: absolute; top: 0; bottom: var(--compare-footer); left: var(--compare-split); z-index: 2; width: 2px; transform: translateX(-1px); background: #fff; box-shadow: 0 0 0 1px #45534145; pointer-events: none; }
.rope-compare.is-live .compare-seam { display: block; }
.compare-divider { top: 0; bottom: var(--compare-footer); }
.compare-divider::before { display: none; }
.compare-drag { bottom: 42px; }
.compare-view { z-index: 4; }
.compare-labels { z-index: 3; top: 56px; }
.compare-labels > div { padding: 8px 10px; border: 1px solid #cddbc9; border-radius: 6px; background: #f7faf1f2; color: #17562c; min-width: 112px; }
.compare-labels > div:last-child { background: #fcf5eaf2; border-color: #d8c2a6; color: #85512f; }
.compare-label-title { font-size: 12px; font-weight: 650; }
.compare-labels > div > small { font: 8px var(--mono); display: block; margin-top: 5px; }
.compare-clock { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.compare-clock svg { flex-shrink: 0; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.compare-clock .clock-hour { stroke-width: 2.4; }
.compare-clock .clock-minute { stroke-width: 1.4; }
.compare-clock .clock-hour, .compare-clock .clock-minute { transform-origin: 20px 20px; stroke-linecap: round; }
.compare-clock .clock-pin { fill: currentColor; stroke: none; }
.compare-clock b { display: block; font: 600 14px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.compare-clock small { margin-top: 2px; font: 8px var(--mono); }
.compare-progress--rope { background: #dbe6d3; }
.compare-progress--rope > span { background: #387b40; }
.rope-compare[data-comparison="rope"] .compare-labels > div:last-child,
.rope-compare[data-comparison="scaffold"] .compare-labels > div:first-child { visibility: hidden; }
@media (max-width: 560px) {
.rope-compare .rope-scene-ui { left: 10px; right: 10px; gap: 4px; }
.rope-compare .rope-scene-eyebrow { font-size: 8px; max-width: 145px; line-height: 1.5; }
.compare-labels { left: 10px; right: 10px; }
.compare-labels > div { min-width: 105px; padding: 7px; }
.compare-label-title { font-size: 11px; }
.compare-clock { gap: 5px; }
.compare-clock svg { width: 29px; height: 29px; }
.compare-clock b { font-size: 12px; }
.compare-labels > div > small { font-size: 7px; }
}
.compare-clock small { font-size: 9px; font-weight: 650; }
.rope-compare .rope-scene-orbit-hint { z-index: 4; }
@media (max-width: 560px) { .compare-clock small { font-size: 8px; } }
/* Shared row tracks keep titles, notes and progress bars aligned as copy wraps. */
.compare-status-grid { grid-template-rows: auto auto auto 3px; gap: 5px 20px; }
.compare-status-grid > div { display: grid; grid-template-rows: subgrid; grid-row: 1 / span 4; gap: 5px; }
.compare-status-grid > div:first-child { grid-column: 1; }
.compare-status-grid > div:last-child { grid-column: 2; }
.compare-status-grid .compare-progress { margin-top: 0; align-self: end; }
.rope-compare[data-rope-complete="true"] .compare-labels > div:first-child { background: #e5f3da; border-color: #589448; }
.rope-compare[data-rope-complete="true"] [data-rope-phase-label],
.rope-compare[data-scaffold-complete="true"] [data-scaffold-phase-label] { display: inline-block; padding: 4px 6px; border-radius: 3px; background: #247136; color: #fff; font-weight: 650; }
.rope-compare[data-rope-complete="true"] [data-scene-title],
.rope-compare[data-scaffold-complete="true"] [data-scaffold-status] { color: #247136; }
.rope-compare[data-scaffold-complete="true"] [data-scaffold-progress] { background: #387b40; }
@media (max-width: 560px) {
.rope-compare { aspect-ratio: 2 / 3; }
.compare-status-grid { column-gap: 10px; }
}