/* AQF BUILD VERSION: styles.css clean-core v1 | 2026-06-15 | global shell only; legacy page rules moved to legacy-pages.css; About v4 isolated */
:root {
--aqua: #00AEEF;
/* The lighter aqua, established on the Max Hypertrophy SOW page: Stuart
prefers it over --aqua #00AEEF, which "goes muddy on navy" while this holds
brightness (9.4:1 on the #061426 field there).
NAMED --aqua-light, NOT --aqua-soft: this file already uses --aqua-soft for
the near-white #e8f8fc wash, and the SOW sheet uses that same token name for
THIS colour. Do not merge them. */
/* =========================================================================
COLOUR RULE — a value used on desktop MUST be the same value on mobile.
Breakpoint overrides may change SIZE, SPACING and LAYOUT. They must not
introduce a colour that does not exist at the other width: nobody ever sees
the two side by side, so drift goes unnoticed until it is everywhere.
Caught this way: a third navy (#071d48) living only in the stacked
split-feature, and an undefined --aqua-dark running on a fallback.
========================================================================= */
--aqua-light: #7FD1F0;
/* Deep aqua for LIGHT grounds. --aqua #00AEEF scores only 2.1:1 on white and
--aqua-light is lighter still, so neither is usable on the white cards.
THE RULE: --aqua-light on dark grounds, --aqua-dark on light ones, --aqua for
fills/borders where contrast is not carrying meaning.
This was previously written as `var(--aqua-dark, #007fa9)` with the token
never defined — it ran on the fallback. */
--aqua-dark: #007fa9;
--aqua-soft: #e8f8fc;
--aqua-wash: #f0fbfd;
--orange: #E58A22;
--brand-orange: #F7931F;
--navy: #071E2D;
--royal: #000033;
--white: #ffffff;
--soft: #f7f8fa;
--sand: #f3f0ea;
--sand-light: #faf8f3;
--soft-blue: #edf9fc;
--text: #1f2f3d;
--muted: #5f6f7f;
--line: rgba(7, 30, 45, 0.12);
--shadow: 0 20px 50px rgba(7, 30, 45, 0.12);
--shadow-strong: 0 30px 70px rgba(7, 30, 45, 0.18);
--serif: "Libre Baskerville", Georgia, serif;
--sans: "Montserrat", Arial, sans-serif;
}
/* Self-hosted Dubai (Light/Regular/Medium/Bold) */
@font-face { font-family: "Dubai"; src: url("../fonts/Dubai-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Dubai"; src: url("../fonts/DUBAI-REGULAR.TTF") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Dubai"; src: url("../fonts/DUBAI-MEDIUM.TTF") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Dubai"; src: url("../fonts/DubaiBold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
/* Self-hosted Montserrat + Libre Baskerville — the two global --sans/--serif
fonts, used site-wide. Replaces the Google Fonts every page used to
carry (Stuart: site-wide font localization pass). */
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/LibreBaskerville-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/LibreBaskerville-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("../fonts/LibreBaskerville-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--sans);
color: var(--text);
background: var(--white);
line-height: 1.7;
font-size: 16.5px;
font-weight: 500;
}
/* Long-press on iOS opens a "Save Image" sheet — the touch equivalent of the
right-click guard in main.js (Stuart, 2026-07-26). Same caveat: a speed bump,
not protection; a screenshot still works. */
img { max-width: 100%; display: block; -webkit-touch-callout: none; }
a { color: inherit; }
.container {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}
/* Nav bar height, site-wide. Scales with viewport height: the full 83px wherever there's room
(desktop/27" — identical to what it has always been), compacting toward 62px only on short
windows, where a full-height bar costs more than it's worth. The logo tracks it so the two
never drift. --nav-h is the single source of truth for the bar's height: the Science of Water
cover subtracts it from 100vh to sit exactly one screen tall, so anything that changes the
rendered bar height must go through this variable. */
:root { --nav-h: clamp(62px, 36px + 3.6vh, 83px); }
.site-header {
background: var(--white);
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 50;
}
.header-inner {
/* -1px because .site-header adds a 1px bottom border; min-height + border = --nav-h */
min-height: calc(var(--nav-h) - 1px);
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}
/* Logo art is trimmed flush to its canvas (ratio 4.1:1), so width drives the mark 1:1 and the
bar height is the real limiter. 240px = 58.6px tall, which fits the full bar with air to spare. */
.brand-logo { width: clamp(205px, 162px + 6vh, 240px); height: auto; }
.menu-toggle { display: none; }
.main-nav {
display: flex;
align-items: center;
gap: 16px;
font-family: "Dubai", "Montserrat", sans-serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.main-nav a {
text-decoration: none;
color: var(--navy);
white-space: nowrap;
transition: color 160ms ease;
}
/* Top-level nav: animated aqua underline (echoes the site line-motif) */
.nav-item {
position: relative;
align-self: stretch;
display: inline-flex;
align-items: center;
}
.main-nav > a:not(.nav-cta),
.nav-item > a {
position: relative;
padding-bottom: 4px;
}
.main-nav > a:not(.nav-cta)::after,
.nav-item > a::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--aqua);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.22s ease;
}
.main-nav > a:not(.nav-cta):hover::after,
.nav-item > a:hover::after,
.main-nav > a.active::after,
.nav-item > a.active::after { transform: scaleX(1); }
.main-nav > a.active,
.nav-item > a.active { color: var(--aqua); }
/* Touch targets for the header nav. Measured 26px on iPad landscape (1024),
where the desktop nav is still shown but every tap is a finger. Keyed on
hover:none only — no width component — so a mouse-driven desktop keeps the
compact header it was designed with and nothing shifts there. */
@media (hover: none) {
.main-nav > a:not(.nav-cta),
.nav-item > a { padding-top: 9px; padding-bottom: 13px; }
}
/* ==========================================================================
SCIENCE OF WATER — nav link + research panel
--------------------------------------------------------------------------
Deliberately NOT a second Services dropdown. SOW is its own design system
(premium magazine), so the panel is dark, wider, and type-led: title plus a
one-line dek, no thumbnails. Type-led reads as editorial; a picture menu
reads as e-commerce, and images in a nav are slow and busy.
The link keeps the row's size/weight/tracking so the header rhythm holds —
the distinction is a small aqua diamond, an old editorial section mark, not
a different typeface (which would read as a mistake at this size).
========================================================================== */
.nav-item--sow > a { padding-left: 14px; }
.nav-item--sow > a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 6px;
height: 6px;
margin-top: -6px;
background: var(--aqua);
transform: rotate(45deg);
transition: background 160ms ease, transform 220ms ease;
}
.nav-item--sow:hover > a::before,
.nav-item--sow > a.active::before { transform: rotate(135deg); }
/* the underline is drawn from left:0, so pull it past the diamond */
.nav-item--sow > a::after { left: 14px; width: calc(100% - 14px); }
.nav-panel {
position: absolute;
top: 100%;
left: 0;
z-index: 60;
width: 372px;
padding: 18px 0 8px;
background: #061426; /* the SOW navy — see reference_sow_navy_color */
border: 1px solid rgba(127, 209, 240, 0.16);
box-shadow: 0 26px 60px rgba(3, 12, 24, 0.42);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}
.nav-item--sow:hover .nav-panel,
.nav-item--sow:focus-within .nav-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-panel__head {
margin: 0 22px 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(127, 209, 240, 0.16);
color: var(--aqua-light); /* dark ground — see the colour rule at top */
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.15em;
}
.nav-panel__item {
display: block;
/* `.main-nav a` sets white-space:nowrap so top-level links never break. That
inherits into the panel, where it CLIPPED the long titles and the deks
instead of wrapping them — measured: "What Happens When You Simply Keep
Showing Up?" needed 468px inside a 325px column and was silently cut.
Panel entries are prose, not nav labels, so they must wrap. */
padding: 11px 22px;
border-left: 2px solid transparent;
transition: background 160ms ease, border-color 160ms ease;
}
.nav-panel__item:hover { background: rgba(127, 209, 240, 0.07); border-left-color: var(--aqua); }
.nav-panel__title {
white-space: normal; /* beats nowrap inherited from .main-nav a */
display: block;
color: var(--white) !important;
/* MONTSERRAT, NOT the serif. SOW reserves Libre Baskerville for PULL QUOTES
ONLY ("do not use serif anywhere else") — an earlier build of this panel
broke that. Montserrat is SOW's stated default AND the only variable sans
already @font-face'd in styles.css: Cabin and Anton live in sow.css, which
does not load on the other 11 pages, so either would fall back to a system
font in the nav everywhere except the SOW pages.
Distinction from the nav bar comes from WEIGHT, CASE and SIZE — 600 sentence
case at 15px against the bar's Dubai 700 uppercase at 13px — not from a
different family. */
font-family: var(--sans);
/* ALL CAPS (Stuart, 2026-07-29) for distinction. Caps need tracking to stay
readable, and they read larger than their point size, so this sits at
0.86rem/0.09em against the nav bar's Dubai 700 / 0.82rem / 0.05em — same
case, different family, weight and rhythm, on a dark ground. */
font-size: 0.86rem;
font-weight: 600;
letter-spacing: 0.09em;
text-transform: uppercase;
line-height: 1.32;
}
.nav-panel__dek {
white-space: normal; /* beats nowrap inherited from .main-nav a */
display: block;
margin-top: 3px;
color: rgba(255, 255, 255, 0.62);
font-family: var(--sans);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.01em;
text-transform: none;
line-height: 1.4;
}
.nav-panel__all {
display: block;
margin: 8px 22px 0;
padding: 12px 0 4px;
border-top: 1px solid rgba(127, 209, 240, 0.16);
color: var(--aqua-light) !important;
font-size: 0.66rem;
letter-spacing: 0.12em;
}
.nav-panel__all span { display: inline-block; transition: transform 160ms ease; }
.nav-panel__all:hover span { transform: translateX(4px); }
/* Services dropdown */
.nav-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 224px;
background: var(--white);
border: 1px solid var(--line);
box-shadow: var(--shadow);
padding: 8px 0;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 60;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown a {
padding: 10px 20px;
font-size: 0.78rem;
letter-spacing: 0.04em;
white-space: nowrap;
color: var(--navy);
transition: color 0.16s ease, background 0.16s ease;
}
.nav-dropdown a:hover {
color: var(--aqua);
background: var(--aqua-soft);
}
/* current sub-service highlighted inside the dropdown ("you are here") */
.nav-dropdown a.active {
color: var(--aqua);
font-weight: 700;
}
.nav-cta {
background: var(--royal);
color: var(--white) !important;
padding: 12px 20px;
border-radius: 6px;
font-weight: 600;
transition: background 160ms ease, color 160ms ease;
}
.nav-cta:hover {
background: var(--aqua);
color: var(--navy) !important;
}
.btn {
display: inline-flex;
justify-content: center;
align-items: center;
min-height: 50px;
padding: 14px 22px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--brand-orange); color: var(--navy); }
.btn-primary:hover { background: var(--aqua); color: var(--navy); }
.btn-secondary {
background: transparent;
border: 2px solid rgba(255,255,255,0.7);
color: var(--white);
}
.btn-secondary:hover {
background: transparent;
border-color: var(--orange);
color: var(--orange);
}
.btn-outline {
background: transparent;
border: 2px solid rgba(0,0,51,0.22);
color: var(--royal);
}
.btn-outline:hover {
border-color: var(--aqua);
color: var(--aqua);
}
/* Inline line-accent CTA — matches About / Client Stories.
Use for all non-header/footer CTAs. Add .on-dark over imagery. */
.cta-line {
display: inline-flex;
align-items: center;
gap: 16px;
width: auto;
padding: clamp(15px, 1.05vw, 21px) clamp(24px, 1.7vw, 34px);
border: 1px solid rgba(0, 0, 51, 0.72);
border-radius: 0;
color: var(--navy);
background: rgba(255, 255, 255, 0.38);
font-family: var(--sans);
font-size: clamp(0.74rem, 0.82vw, 1rem);
font-weight: 900;
line-height: 1;
letter-spacing: 0.13em;
text-transform: uppercase;
text-decoration: none;
transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
}
.cta-line span {
display: inline-block;
width: 34px;
height: 1px;
background: var(--aqua);
transition: background 0.22s ease, width 0.22s ease;
}
.cta-line:hover {
border-color: var(--aqua);
color: var(--navy);
background: rgba(0, 174, 239, 0.18);
}
.cta-line:hover span { width: 42px; background: var(--aqua); }
/* On dark backgrounds (hero over imagery) */
.cta-line.on-dark {
color: var(--white);
border-color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.10);
backdrop-filter: blur(4px);
}
.cta-line.on-dark:hover {
border-color: var(--aqua);
color: var(--white);
background: rgba(0, 174, 239, 0.22);
}
.btn-row,
.hero-actions,
.center-actions {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
h1, h2, h3 {
font-family: var(--serif);
line-height: 1.24;
}
/* Bold aqua qualifier mark (e.g., "Your Pool*") — signals a nuance answered in the body */
.qualifier-star {
color: var(--aqua);
font-weight: 900;
}
/* The headline star had nothing to land on, so it read as a broken footnote.
It is actually doing real work: Stuart does not only train in pools. This
twin marks the phrase that ANSWERS it ("or open water"), so the eye connects
headline -> qualifier. Set as a raised, smaller star so it reads as a
reference mark rather than punctuation inside the sentence. (Stuart's own
call, 2026-07-26.) */
.qualifier-star--note {
font-size: 0.7em;
vertical-align: super;
line-height: 0;
margin-left: 1px;
}
.eyebrow,
.pretitle { text-transform: uppercase; }
.hero {
position: relative;
/* Fills the screen on a big display instead of stopping at a fixed 610px —
on a 27" the old value left the hero under half the window (Stuart
2026-07-26). max() keeps 610px as the FLOOR on short laptop windows, and
`100vh - --nav-h` makes it exactly one screen below the sticky header on
anything taller. Source image is 2560x1920 (4:3), so there is ample height
to crop from as the band gets taller — no upscaling. */
min-height: max(610px, calc(100vh - var(--nav-h)));
display: grid;
place-items: center;
text-align: center;
color: var(--white);
overflow: hidden;
background:
linear-gradient(rgba(7, 30, 45, 0.12), rgba(7, 30, 45, 0.22)),
url("../images/index/hero-lagoon-split.jpg") center center / cover no-repeat;
background:
linear-gradient(rgba(7, 30, 45, 0.12), rgba(7, 30, 45, 0.22)),
image-set(
url("../images/index/hero-lagoon-split.webp") type("image/webp"),
url("../images/index/hero-lagoon-split.jpg") type("image/jpeg")
) center center / cover no-repeat;
}
.hero-content {
position: relative;
z-index: 2;
max-width: min(1180px, 64vw);
padding: 80px 0 100px;
}
.pretitle {
margin: 0 0 22px;
font-size: 1rem;
font-weight: 900;
letter-spacing: 0.16em;
color: var(--brand-orange);
text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 16px rgba(0,0,0,0.4);
}
.pretitle-pill {
display: inline-flex;
padding: 10px 20px;
border-radius: 0;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.55);
color: var(--white);
backdrop-filter: blur(6px);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.22em;
}
/* Bespoke hero eyebrow — flanking aqua rules, no chip (lets imagery read through) */
.pretitle-rule {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 16px;
color: var(--white);
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.24em;
}
.pretitle-rule::before,
.pretitle-rule::after {
content: "";
display: inline-block;
width: 42px;
height: 1px;
background: var(--aqua);
flex: 0 0 auto;
}
/* Services hero eyebrow names all 3 services — tighten so it holds one line */
.services-hero .pretitle-rule {
font-size: 0.72rem;
letter-spacing: 0.12em;
white-space: nowrap;
}
.services-hero .pretitle-rule::before,
.services-hero .pretitle-rule::after { width: 30px; }
/* Hero-eyebrow SIZE + WEIGHT uniformity (0.82rem / 800). Colors & accent lines left per page. */
.aqfit-hero .pretitle,
.hydro-v3-kicker,
.sp-kicker,
.science-hero .pretitle,
.aqf4-hero-v2-eyebrow {
font-size: 0.82rem !important;
font-weight: 800 !important;
}
/* Hero photo credit — editorial, bottom-right */
.hero-credit {
position: absolute;
right: 24px;
bottom: 20px;
z-index: 2;
margin: 0;
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 12px;
border-left: 2px solid var(--aqua);
text-align: left;
/* Was a flat 0.66rem (10.56px) on desktop and tablet while the phone override
had already been raised to 0.72rem — so the smallest type on the site sat
BELOW the 11.5px floor everywhere except the phone. Floor now matches the
phone value and the vw term lets it grow on a 27" instead of freezing at a
1440-era size. Nothing below ~1985px changes. */
font-size: clamp(0.72rem, 0.58vw, 0.95rem);
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1.4;
color: rgba(255,255,255,0.88);
text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.hero-credit span:first-child {
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.13em;
}
/* The home hero's bottom-right already carries the client/location caption, so
the photography credit joins that block as a third line rather than floating
a second credit in the opposite corner (2026-07-26). Set lighter and without
the caption's wide tracking so the client + location lines stay primary. */
.hero-credit .hero-credit__photo {
margin-top: 5px;
font-weight: 500;
letter-spacing: 0.035em;
/* Colour matched to .since below (Stuart 2026-07-29): it was rgba(...,0.66)
against the caption's effective 0.79 and read as fading out. Inheriting the
block colour with the same 0.9 opacity as .since puts it on exactly the same
value. Weight (500 vs 600) and the tighter tracking are what keep it
subordinate to the client/location lines — the colour no longer has to. */
opacity: 0.9;
}
.hero-credit .since {
font-weight: 600;
font-style: normal;
text-transform: lowercase;
letter-spacing: 0.06em;
opacity: 0.9;
}
.hero h1 {
margin: 0;
/* Raised with the section headings — once those went to 3.3vw the h1 at 3.2vw
was SMALLER than every h2 beneath it, inverting the hierarchy. The page
title has to outrank its sections. */
font-size: clamp(2.15rem, 4.3vw, 5.4rem);
line-height: 1.18;
letter-spacing: -0.025em;
/* The title sits over sky/cloud, not the waterfall — 38% of that area is
brighter than 180/255, putting white text at a 2.08:1 contrast ratio (WCAG
wants 3:1 even for large text). The old shadow was a single WIDE, soft 30%
glow, which is why the title read worse than the eyebrow above it despite
being bigger. Two layers now: a tight 1px edge that defines the letterform
against cloud, plus a soft halo that lifts it off the sky. Thin, not
embossed. (Stuart's girlfriend spotted this on a phone, 2026-07-26.) */
text-shadow: 0 1px 2px rgba(4, 20, 38, 0.6), 0 3px 18px rgba(4, 20, 38, 0.5);
}
.hero-subtitle {
/* The hero lead has to outrank the section callouts beneath it — those went to
1.14rem, which left this at 1.15rem effectively tied with them. */
max-width: min(1080px, 58vw);
margin: 28px auto 0;
font-size: clamp(1.2rem, 1.47vw, 1.75rem);
font-weight: 600;
color: rgba(255,255,255,0.94);
text-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 2px 16px rgba(0,0,0,0.42);
}
.hero-actions { margin-top: 34px; }
.page-hero {
background:
linear-gradient(rgba(0, 0, 51, 0.68), rgba(0, 0, 51, 0.80)),
url("../images/hero/DSCF1537.JPG") center center / cover no-repeat;
color: var(--white);
text-align: center;
padding: 104px 0 96px;
}
.services-hero {
/* Fits ONE screen — never make the reader scroll just to see the hero
(Stuart 2026-07-26). --nav-h is the sticky header's real height, so the box
tops out at exactly the space below it; the generous padding compresses on
short windows via clamp instead of pushing the CTA below the fold. */
min-height: min(560px, calc(100vh - var(--nav-h)));
display: grid;
align-items: center;
text-align: left;
padding-top: clamp(48px, 8vh, 150px);
padding-bottom: clamp(48px, 8vh, 150px);
/* DESKTOP SCRIM — DELIBERATELY UNCHANGED (Stuart, 2026-07-29).
Item #14 was scoped by Stuart to "phone vert/horz + iPad vert". I briefly
lightened this to .72 as well; he asked to keep desktop as is, so these are
the ORIGINAL values. Do not lighten them again without asking.
WHY lightening this achieves nothing anyway — measured, worth keeping:
the PHOTOGRAPH's own left 30% is essentially black (mean luminance 9-21 of
255) and the copy sits over the left 37.5%. The darkness there is the image,
not the scrim, so dropping .97 -> .72 was visually undetectable. Re-framing
cannot fix it either: 3460x1440 source in a 1280x575 box means `cover`
yields only ~102px of horizontal slack (~8%) — far too little to move a
30%-wide black band off the copy. The real options are a re-crop of the
source, flipping the copy to the bright right side, or a different frame.
Stuart has parked that; small screens dodge it via 72% 42% framing below.
BOTH `background` declarations must stay in sync: first is the plain-url
fallback, second the image-set upgrade. Editing one silently reverts the
other path. */
background:
linear-gradient(to right, rgba(4, 8, 32, 0.97) 0%, rgba(4, 8, 32, 0.95) 22%, rgba(4, 8, 32, 0.68) 33%, rgba(4, 8, 32, 0.26) 42%, rgba(4, 8, 32, 0) 50%),
url("../images/services/hero-services.jpg") center center / cover no-repeat;
background:
linear-gradient(to right, rgba(4, 8, 32, 0.97) 0%, rgba(4, 8, 32, 0.95) 22%, rgba(4, 8, 32, 0.68) 33%, rgba(4, 8, 32, 0.26) 42%, rgba(4, 8, 32, 0) 50%),
image-set(
url("../images/services/hero-services.webp") type("image/webp"),
url("../images/services/hero-services.jpg") type("image/jpeg")
) center center / cover no-repeat;
}
/* Services hero: left-aligned editorial layout so the rule-of-thirds photo reads clean */
.page-hero.services-hero h1 {
margin: 0;
max-width: 480px;
font-size: clamp(2.4rem, 4.6vw, 4.2rem);
line-height: 1.04;
text-align: left;
}
.page-hero.services-hero p {
margin: 24px 0 0;
max-width: 430px;
}
.page-hero.services-hero .hero-actions { justify-content: flex-start; text-align: left; }
.services-hero .pretitle-rule { justify-content: flex-start; }
.services-hero .pretitle-rule::after { display: none; }
.eyebrow {
display: inline-flex;
margin-bottom: 18px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255,255,255,0.14);
border: 1px solid rgba(255,255,255,0.24);
color: var(--brand-orange);
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.15em;
text-transform: uppercase;
backdrop-filter: blur(6px);
}
.page-hero h1 {
max-width: 900px;
margin: 0 auto;
color: var(--white);
font-size: clamp(2rem, 3.2vw, 3.75rem);
letter-spacing: -0.025em;
text-shadow: 0 4px 22px rgba(0,0,0,0.28);
}
.page-hero p {
max-width: 770px;
margin: 28px auto 0;
color: rgba(255,255,255,0.86);
font-size: 1.1rem;
font-weight: 600;
}
.signature,
.intro {
background:
radial-gradient(circle at top left, rgba(0,174,239,0.08), transparent 34%),
var(--white);
padding: 74px 0 46px;
text-align: center;
}
.small-label,
.signature .small-label,
.intro .small-label,
.split-content .small-label {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
color: var(--royal);
/* SITE-WIDE. Was a flat 0.74rem, so every eyebrow on every page stayed 11.8px
on a 2560 monitor — frozen at the size it was drawn for at 1440. The floor
is unchanged, so NOTHING below ~1910px moves at all (0.62vw only overtakes
0.74rem past that width); at 2560 it reaches 15.9px. Verified at 1440: still
11.84px to the decimal. */
font-size: clamp(0.74rem, 0.62vw, 1rem);
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.small-label::before,
.small-label::after {
content: "";
width: 28px;
height: 2px;
background: var(--aqua);
flex-shrink: 0;
}
/* Left-aligned sections: label sits at the margin, line trails after it */
.split-content .small-label::before { display: none; }
/* Color categorization system: default aqua = science/method; add .warm = human/story (orange) */
.small-label.warm::before,
.small-label.warm::after { background: var(--brand-orange); }
.signature h2,
.intro h2,
.why h2,
.services h2,
.method-section h2,
.cta-box h2,
.section-heading h2 {
margin: 0;
}
.signature h2,
.intro h2 {
color: var(--navy);
/* Home section headings ran 34-39px while About's run to ~57px at the same
width — the home page was quietly the smallest-set page on the site
(Stuart 2026-07-26). Raised toward About's scale; the sections already had
the vertical slack, so nothing gets taller. */
font-size: clamp(1.9rem, 3.3vw, 4rem);
}
.signature p,
.intro p {
/* Half a step up from 1.03rem — this paragraph carries the site's single best
differentiator and was reading small next to the other pages (Stuart
2026-07-26). The measure widens with it (850 -> 940) so the copy still
lands on THREE lines instead of spilling to four. */
max-width: min(1180px, 65vw);
margin: 18px auto 0;
color: var(--muted);
font-size: clamp(1.05rem, 1.245vw, 1.5rem);
font-weight: 600;
}
/* ---------------------------------------------------------------------------
IMAGE LIGHTBOX · moved here from about-v4.css 2026-07-26
Was inline to the About page; the home-page triptych now uses it too, so it
lives in the shared sheet with its class names unchanged (about.html markup
did not need touching). Behaviour is in main.js — one copy, not two.
--------------------------------------------------------------------------- */
.aqf4-lightbox-trigger {
display: block;
border: 0;
padding: 0;
color: inherit;
text-decoration: none;
cursor: zoom-in;
}
.aqf4-lightbox-trigger:hover img {
transform: scale(1.025);
}
.aqf4-lightbox-trigger img {
transition: transform .32s ease;
}
/* ENVIRONMENT PREMIUM LIGHTBOX
Section: Real-World Environments
Purpose: Adds a refined full-screen image preview for environment cards. */
.aqf4-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: 28px;
background:
radial-gradient(circle at 50% 45%, rgba(0,174,239,.13), rgba(0,0,51,0) 42%),
rgba(0,0,51,.88);
backdrop-filter: blur(10px);
}
.aqf4-lightbox.is-open {
display: flex;
}
.aqf4-lightbox-panel {
width: min(1120px, 92vw);
max-height: 88vh;
display: grid;
gap: 14px;
}
.aqf4-lightbox-img {
width: 100%;
max-height: 78vh;
object-fit: contain;
border-radius: 18px;
box-shadow: 0 28px 80px rgba(0,0,0,.42);
background: rgba(255,255,255,.06);
}
.aqf4-lightbox-caption {
margin: 0;
color: #fff;
font-family: var(--aqf-sans);
font-size: .78rem;
font-weight: 900;
letter-spacing: .14em;
text-align: center;
text-transform: uppercase;
text-shadow: 0 2px 16px rgba(0,0,51,.9);
}
.aqf4-lightbox-close {
position: fixed;
top: 22px;
right: 24px;
z-index: 10000;
width: 44px;
height: 44px;
border: 1px solid rgba(255,255,255,.44);
border-radius: 999px;
color: #fff;
background: rgba(0,0,51,.42);
font-size: 2rem;
line-height: 1;
cursor: pointer;
}
.aqf4-lightbox-close:hover {
border-color: var(--aqf-blue);
background: rgba(0,174,239,.16);
}
/* ENVIRONMENT LIGHTBOX ARROWS
Section: Real-World Environments
Purpose: Adds premium previous/next controls to the lightbox gallery. */
.aqf4-lightbox-arrow {
position: fixed;
top: 50%;
z-index: 10000;
width: 52px;
height: 52px;
border: 1px solid rgba(255,255,255,.44);
border-radius: 999px;
color: #fff;
background: rgba(0,0,51,.42);
font-family: Georgia, serif;
font-size: 3rem;
line-height: .82;
cursor: pointer;
transform: translateY(-50%);
}
.aqf4-lightbox-prev {
left: 24px;
}
.aqf4-lightbox-next {
right: 24px;
}
.aqf4-lightbox-arrow:hover {
border-color: var(--aqf-blue);
background: rgba(0,174,239,.16);
}
/* ---------------------------------------------------------------------------
SIGNATURE TRIPTYCH · 2026-07-26
"Your Pool* Becomes the Studio" was the thinnest section on the page despite
carrying the single best differentiator. Three images prove the claim the
asterisk makes — it is NOT only pools — faster than the sentence does.
Deliberately NOT a full-bleed photo band: this section sits directly under the
hero, which is already a full-bleed photo, and stacking two would dilute both.
Sized and captioned to MATCH .aqf4-env-grid on the About page (Stuart's call:
"similar to the about page but three vs 5") — 16:9, capped at 260px, centred,
caption overlaid bottom-left over a gradient scrim. 16:9 holds on phones too.
--------------------------------------------------------------------------- */
.signature-triptych {
display: grid;
/* 320px, Stuart's call. Wider than About's 260px cap — that value is sized
for FIVE across and three have more room — but held back from filling the
row, so the trio still reads as a supporting note under the copy rather
than a feature band. At 16:9 that is 320x180 per card. */
grid-template-columns: repeat(3, minmax(240px, 320px));
gap: 14px;
justify-content: center;
width: min(92vw, 1360px);
max-width: 100%;
margin: 34px auto 0;
}
/* NB: these are , not — an earlier
pass styled `figure` here, so after the lightbox conversion nothing was
position:relative and the absolutely-positioned captions escaped the cards
entirely, landing over the hero. Selector must match the anchor. */
.signature-triptych > a {
display: block;
position: relative;
margin: 0;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 22px 54px rgba(0, 0, 51, 0.14);
background: #fff;
}
.signature-triptych img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* scrim so the overlaid caption holds over any image */
.signature-triptych > a::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 44%;
background: linear-gradient(0deg, rgba(0, 0, 51, 0.62), rgba(0, 0, 51, 0));
}
.signature-triptych figcaption {
position: absolute;
left: 15px;
bottom: 13px;
z-index: 2;
max-width: calc(100% - 30px);
color: #fff;
font-family: var(--sans);
/* floor raised 0.68rem -> 0.74rem: 0.68 rendered at 10.88px, under the 11.5px
minimum the rest of the page's small type was lifted to. The 0.76vw term
collapses on a phone, so the FLOOR is the value that ships there. */
font-size: clamp(0.74rem, 0.76vw, 0.88rem);
font-weight: 800;
letter-spacing: 0.14em;
line-height: 1.25;
text-transform: uppercase;
text-shadow: 0 2px 16px rgba(0, 0, 51, 0.92), 0 0 10px rgba(0, 0, 51, 0.45);
}
@media (max-width: 760px) {
.signature-triptych { grid-template-columns: minmax(0, 340px); gap: 16px; }
}
.credibility-band {
background: var(--white);
/* The band used to sit flush against the full-bleed image section below it
(0px gap) — no visual break at all. Padding gives the tiles room to breathe
and leaves a white margin between the band and the image (Stuart
2026-07-26). */
padding: 18px 0 34px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
box-shadow: 0 10px 30px rgba(7, 30, 45, 0.04);
color: var(--text);
}
.credibility-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.credibility-item {
padding: 24px 18px;
text-align: center;
border-right: 1px solid var(--line);
}
.credibility-item:last-child { border-right: 0; }
.credibility-icon {
/* 52px, up from 40px (Stuart 2026-07-26). The wrapper is the single control:
the tags carry an inline width:42px, so without the img rule below
they would cap at 42 and ignore any wrapper larger than that. */
width: 52px;
height: 52px;
margin: 0 auto 12px;
color: var(--aqua);
}
/* beat the inline width/height on the base64 icons so the wrapper governs */
.credibility-icon img {
width: 100% !important;
height: 100% !important;
object-fit: contain;
}
.credibility-icon svg {
width: 100%;
height: 100%;
fill: currentColor;
stroke: none;
}
.credibility-item strong {
display: block;
color: var(--royal);
font-family: var(--serif);
font-size: 1.28rem;
line-height: 1.15;
margin-bottom: 6px;
}
.credibility-item span {
display: block;
color: var(--muted);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
}
/* .page-hero itself is deliberately NOT made relative — it is shared by several
pages and promoting it would repaint it above non-positioned siblings. Only the
two variants that carry a photo credit are promoted, and .contact-layout
already sits at z-index 3 so its hero overlap is unaffected. */
.services-hero,
.contact-hero { position: relative; }
/* Shared photo credit — sits quietly in the bottom-right of a hero image.
Requires its parent to be position:relative (every hero it is used in
already is; verified before use). Small, low-contrast and set in the sans
so it reads as a credit line, never as content. */
.photo-credit {
position: absolute;
right: clamp(14px, 2.2vw, 26px);
/* 18px, not 11px — at 11 the credit read as "right near the edge" against the
next section on a capped hero (Stuart 2026-07-26). */
bottom: 18px;
z-index: 5;
margin: 0;
font-family: var(--sans);
/* 600/0.72rem/.86, not 500/0.66rem/.72 — Stuart: the lighter setting "barely
shows up" over a photo. Still a credit, not a caption: the home page's own
.hero-credit__photo stays deliberately quieter because it sits inside an
existing caption block rather than alone on the image. */
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.035em;
line-height: 1;
color: rgba(255, 255, 255, 0.86);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
/* .page-hero styles its