/* ==========================================================================
Lincor Holdings: global stylesheet
Plain CSS, no build step. Mobile-first; min-width media queries scale up.
========================================================================== */
/* --------------------------------------------------------------------------
0a. Page transitions
-------------------------------------------------------------------------- */
/* Moving between pages: the page being left is pushed back and dimmed while
the page being opened rises up over it. Client reference, 20 Aug 2026.
This is the browser's own cross-document view transition, not a script. The
whole mechanism is the at-rule below plus two keyframes: on a same-origin
navigation the browser snapshots the outgoing page, loads the incoming one,
and animates between the two itself. No link interception, no overlay
element, no fake page held in the DOM, and - the part a scripted version
always gets wrong - the Back button, the Escape key, opening a link in a new
tab and a mid-transition second click all keep working, because the browser
is doing the navigating rather than being talked out of it.
Both documents have to opt in, which is why this lives in the sitewide
stylesheet rather than on any one page.
Where it is not supported (Firefox, and Safari before 18.2) navigation is
simply instant, exactly as it was before. Nothing is hidden waiting for a
transition that will not happen, which is the property that makes this safe
to ship: the transition is the enhancement, the navigation is the feature.
The whole root is transitioned, header included, so the page moves as one
object. Naming the header separately would hold it still, but its own
styling differs from page to page - translucent navy over the homepage
hero, solid white elsewhere - so holding it still would mean cross-fading a
header in place mid-slide, which reads as a glitch rather than as chrome
staying put. */
@view-transition {
navigation: auto;
}
/* The outgoing page. Pushed back rather than faded out: it keeps most of its
opacity to the end so the eye reads depth - one sheet behind another -
rather than a dissolve. Same curve and a slightly shorter run than the
incoming page, so the two read as one movement with the old sheet settling
first rather than as two animations of different character. */
::view-transition-old(root) {
animation: page-push-back 620ms cubic-bezier(0.45, 0, 0.25, 1) both;
}
/* The incoming page, rising from below over the old one.
Eased at BOTH ends (client, 21 Aug 2026 - "so it slowly eases in when going
up"). It was on a front-loaded "out" curve, which leaves at full speed from
the very first frame: computed, that curve was 67% of the way up within the
first fifth of its run, so the movement was already finishing before the eye
had registered it starting - a snap followed by a long settle, not a rise.
This curve is 8.9% up in that same first fifth, carries the distance through
the middle, and spends its last fifth on the final 2.5% - sampled off the
pseudo-element's own transform through a real navigation, not read off the
curve: 18px of an 800px rise in the first 83ms. Deliberately not the
slowest option tried: at cubic-bezier(0.62, 0, 0.24, 1) the first fifth
covers under 5%, which at this duration is around 150ms where nothing
appears to be happening after a click.
Longer to pay for the two slow ends: keeping 620ms would compress the
middle into a lurch. 780ms is where both ends are unhurried and the whole
thing still reads as an answer to a click rather than a wait. */
::view-transition-new(root) {
animation: page-rise 780ms cubic-bezier(0.45, 0, 0.25, 1) both;
}
@keyframes page-push-back {
from { transform: none; opacity: 1; }
to { transform: scale(0.93) translateY(-1.5%); opacity: 0.6; }
}
@keyframes page-rise {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* The new page has to be the one on top for the rise to cover anything. This
is the default order, stated because the whole effect depends on it. */
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
/* No movement at all - not a faster slide. Navigation goes back to being
instant, which is the correct answer here rather than a shortened version
of a motion someone has asked not to see. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
@view-transition { navigation: none; }
}
/* --------------------------------------------------------------------------
1. Tokens
-------------------------------------------------------------------------- */
:root {
/* Color */
--white: #FFFFFF;
--navy: #012340;
--navy-soft: #0E3A5C;
--slate: #4A535C;
/* Was gold (#B9862B) sitewide - retired 24 Jul 2026 at client request in
favor of a light grey from the site's existing --slate family. Kept
the --gold name (touches ~15 rules across style.css; renaming would
just be churn) but redefined its value. --gold is now solid, for
anything that's actually read as text or is a button/hover background
with text on top of it (needs real contrast); --gold-faint is the
low-opacity version for purely decorative accents (thin underlines,
border-left accents) where the client explicitly wanted the low-
opacity look. (The Import & Export hero globe used to be a deliberate
exception here, holding its own literal navy/gold country-highlight
hexes rather than this token; it was removed 21 Aug 2026 and its CSS
on 4 Sep 2026, so no exception remains.) */
--gold: #9CA3AF;
--gold-faint: rgba(156, 163, 175, 0.3);
/* Sampled 23 Jul 2026 from the dot in MEZZOC_LOGO-01.png (PowerShell +
System.Drawing) - distinct from --gold, used only for Mezzo's own CTA
buttons so they match the wordmark's actual dot color exactly. */
--mezzo-yellow: #FFC80C;
--line: #DDE2E5;
--bg-tint: #F4F6F5;
/* Page ground, 14 Aug 2026 (client: Shoji White SW 7042). Replaces flat
#FFFFFF as the colour the site sits on. --white is deliberately left
alone at pure white - it is still what buttons, cards and text-on-dark
use, and the small step between the two is what makes a white card or a
white button read as sitting ON the page rather than being cut out of
it. Change this token, not --white, to reshade the page. */
--shell: #F5F4EE;
/* Added 22 Jul 2026 - dark stat-panel component, see section 2.5a of build spec.
--line-dark is the hairline-on-dark equivalent of --line; --grain is a
subtle noise texture (inline SVG, no network request) used at low
opacity so it reads as texture, not as a graphic in its own right.
Fixed 23 Jul 2026: the svg had no width/height, so as a background-image
it rasterized the feTurbulence filter at the full size of whatever
section it was on (the tall "Our divisions" panel) - expensive to
compute and, on many browsers, recomputed on scroll/compositing, which
is what was making the homepage stutter over that section. Explicit
128x128 intrinsic size + tiling (background-repeat, see .stat-panel
::before) makes the browser rasterize one small tile once and repeat
it cheaply, instead of one giant noise field per paint. */
--line-dark: rgba(255, 255, 255, 0.22);
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
/* General Sans, sitewide (28 Jul 2026, client reference: benorth.studio,
confirmed via their own @font-face rules to actually be "Aeonik" - a
paid, self-hosted commercial font. General Sans (Fontshare, free/SIL)
is a close, freely-usable visual match, loaded via in every
page's - see index.html's own comment). Supersedes the old
Neue Haas Grotesk TODO below: 'Neue Haas Grotesk Display' was never
actually a loaded webfont anywhere on this site (no @font-face/link
for it ever existed), so every h1-h3 had silently been rendering in
plain Helvetica/Arial Bold via this same fallback stack the whole
time - General Sans is now the real primary font, this stack is
purely the fallback if its CDN fails to load. If a licensed Aeonik
kit is purchased later, swap it in ahead of 'General Sans' here rather
than replacing it outright, so the fallback chain still holds. */
--f-display: 'General Sans', 'Neue Haas Grotesk Display', 'Neue Haas Grotesk Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--f-body: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--f-mono: 'IBM Plex Mono', 'Courier New', monospace;
/* The hero's three-state type (20 Aug 2026). Stands in for Gotham Black /
Gotham Book, which the brief asked for but which cannot be embedded - see
the note on the font link in index.html. Only the homepage loads it. */
--f-hero: 'Montserrat', 'General Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Added 22 Jul 2026 - editorial accent face for dark stat panels only; see section 2.3/2.5a */
--f-editorial: 'Instrument Serif', Georgia, 'Times New Roman', serif;
/* Spacing scale (8px base): use these values only */
--sp-1: 8px;
--sp-2: 16px;
--sp-3: 24px;
--sp-4: 32px;
--sp-5: 48px;
--sp-6: 64px;
--sp-7: 96px;
--sp-8: 128px;
/* Layout */
--gutter: clamp(20px, 5vw, 64px);
/* Updated 22 Jul 2026: was 2px ("near-square, architectural precision").
Client feedback: current site reads outdated; reference imagery calls
for softer, rounded cards. Cascades to every button/card/input/image
that already references this token. */
--radius: 16px;
--section-pad: var(--sp-6);
/* Motion - updated 22 Jul 2026: plain "ease" reads generic/dated on every
hover and reveal transition sitewide (everything already references
these two tokens, so this one change cascades everywhere). Standard
uses a quick material-style ease-out for hovers/borders/small state
changes; reveal uses an ease-out-expo curve (snap-then-settle) for the
slower scroll/load reveals - see the .reveal-on-load system below. */
--ease-standard: 180ms cubic-bezier(0.4, 0, 0.2, 1);
--ease-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);
/* Added 23 Jul 2026: the division-card hover expand (flex-grow + reveal
max-height) was riding --ease-standard's 180ms, quick enough that the
layout reflow it triggers reads as a jerky snap rather than a smooth
grow. Slower duration + gentle ease-out settles it instead. */
--ease-card: 550ms cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 860px) {
:root {
--section-pad: var(--sp-7);
}
}
/* --------------------------------------------------------------------------
2. Reset / base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* scrollbar-gutter:stable (27 Jul 2026): reserves the vertical scrollbar's
space permanently, whether or not a scrollbar is actually showing at any
given moment. Traced a ~500ms "What we do" card layout glitch (cards
transiently collapsing to label-only height, ~1.1s after load, gone under
prefers-reduced-motion) to GSAP ScrollTrigger's own built-in behavior of
auto-refreshing all trigger positions once, shortly after every page
resource finishes loading - this page's pinned "Our Divisions" scroller
(see .division-scroller in main.js) briefly recalculates its total
document height during that refresh, and without a permanently-reserved
gutter, a momentary scrollbar appear/disappear during that recalculation
changes the viewport's available width by the scrollbar's own width for
an instant - just enough, at these cards' narrow widths, to re-wrap their
description text into fewer lines and back. Not exclusive to this one
component: any narrow, text-wrap-sensitive layout elsewhere on the page
is exposed to the same scrollbar-width flicker, so this is fixed at its
root (the viewport itself) rather than by insulating every affected
component individually. */
html {
-webkit-text-size-adjust: 100%;
scrollbar-gutter: stable;
}
body {
margin: 0;
background: var(--shell);
color: var(--navy);
font-family: var(--f-body);
font-weight: 400;
font-size: 1rem;
line-height: 1.6;
overflow-x: hidden;
}
/* height: auto is what makes the width/height attributes safe.
Every on the site now carries its intrinsic pixel size (20 Aug 2026),
so the browser can reserve the right box before the file arrives instead of
reflowing the page when it lands - 72 of the 122 images had no size at all,
and the document height was visibly jumping as they loaded: on
divisions/import-export.html it went 4574 -> 2974 -> 4331 during the first
1.4 seconds.
But an with both attributes and `max-width: 100%` and no height rule
uses the ATTRIBUTE height once max-width shrinks the width, which squashes
the picture. height: auto turns the pair back into an aspect ratio, which is
all they are wanted for here. Any component that genuinely sets its own
height - .dstack__media, .footer-bg, .bcard__logo - is more specific than
this and still wins. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, p, figure { margin: 0; }
button {
font-family: inherit;
cursor: pointer;
background: none;
border: none;
color: inherit;
}
input, textarea, select {
font-family: inherit;
font-size: 1rem;
color: inherit;
}
/* Visible keyboard focus everywhere: do not rely on the browser default */
:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
3. Typography
-------------------------------------------------------------------------- */
h1, h2, h3, .h-display {
font-family: var(--f-display);
font-weight: 600;
color: var(--navy);
line-height: 1.1;
}
h1, .h1 {
font-size: clamp(2.2rem, 6vw, 4.2rem);
line-height: 1.08;
letter-spacing: -0.01em;
font-weight: 700;
max-width: 18ch;
}
h2, .h2 {
font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}
h3, .h3 {
font-size: 1.4rem;
}
p { color: var(--slate); }
p.lede {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
color: var(--slate);
max-width: 60ch;
}
.mono-label {
font-family: var(--f-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--slate);
}
/* Index tag - numbered mono eyebrow ("/ 01 /"), see section 2.5a of build spec */
.index-tag {
display: block;
font-family: var(--f-mono);
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.1em;
color: var(--gold);
margin-bottom: var(--sp-1);
}
/* --------------------------------------------------------------------------
4. Layout helpers
-------------------------------------------------------------------------- */
/* Updated 23 Jul 2026: was centered (max-width: 1280px + margin-inline:
auto), so on any screen wider than that every section's content sat
well in from the true left edge of the window - inconsistent with the
hero,
which had already been pulled flush left, and with everything else once
more sections got the same treatment (see request history). Hugging the
left edge (just the gutter, no max-width/centering) now applies
everywhere - header logo, hero, About Us, etc. - so the whole page reads
as one consistent left edge instead of some sections centered and
others not. Grid-based sections (division cards, footer columns, the
logo marquee) just get more breathing room on very wide screens instead
of stretching all the way - none of them break at that width. */
.container {
padding-inline: var(--gutter);
}
section {
padding-block: var(--section-pad);
}
.section-head {
margin-bottom: var(--sp-5);
max-width: 68ch;
}
.section-head h2 { margin-bottom: var(--sp-2); }
/* --------------------------------------------------------------------------
5. Header
-------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--white);
transition: transform var(--ease-standard);
}
/* Hide-on-scroll-down / reveal-on-scroll-up header (28 Jul 2026, client
request modeled on benorth.studio): visible on load and whenever
scrolled back up toward the top, slides out of view the moment you
scroll down past it, instead of staying pinned in view the whole
time - see the scroll listener in main.js for the direction/threshold
logic. Site-wide, every page - not scoped to the home hero. Plain
translateY rather than touching `position` keeps .site-header's own
sticky behavior (and the pin-spacer math other pinned sections rely on
elsewhere on the page) untouched; this only ever slides the already-
sticky box off-screen and back. */
.site-header.is-hidden {
transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce) {
.site-header {
transition: none;
}
}
/* Home hero video extends up behind the header (27 Jul 2026, client
request: remove the solid white bar above the video, let it reach the
very top of the page, keep every nav item visible). Scoped to the
homepage only (:has(.hero--photo), the video hero) - every other page's
header sits over a plain white section and still needs its normal
background. Transparent for the entire scroll depth of the page, not
just over the hero (client preference, confirmed 28 Jul 2026) - a plain
flat `background: transparent` here made that genuinely broken further
down though: division-slide headings visibly overlapped the logo, and
the white nav text went illegible over Our Brands' light background.
A navy scrim behind the header fixes the legibility without giving up
the see-through look the client wants past the hero - translucent
enough that white nav/logo/text stay readable against literally
anything scrolling underneath. backdrop-filter: blur (client reference,
28 Jul 2026: benorth.studio's frosted-glass nav) rather than a flat
tinted background - blurs whatever's actually behind the header into an
indistinct wash instead of just darkening it, which is what keeps a
heading's own text from reading as a separate, competing layer of
text through the header (the original overlap problem) even at a
lighter, more translucent tint than the flat scrim needed. The
hairline border-bottom is the same reference's thin underline, and
doubles as a legibility floor of its own on the rare backdrop the blur
alone doesn't fully flatten. Text-shadow on the nav/logo is a third,
per-glyph layer of insurance for the same overlap case.
That scrim is a visible dark stripe of its own when it's sitting over
the hero image, though (client feedback, 28 Jul 2026: "not what I
want") - the hero already carries its own dark scrim (see .hero--photo)
that made the ORIGINAL flat `transparent` header blend in seamlessly,
and stacking a second, differently-shaped scrim on top of that broke
the blend. .is-over-hero (added/removed by the IntersectionObserver in
main.js while .hero--photo is on screen) lets the header go back to
plain transparent - pixel-identical to the original - for exactly the
region where the hero's own scrim already has legibility covered, and
only switches on the header's own scrim once scrolled past it, where
nothing else is doing that job. */
body:has(.hero-lock) .site-header {
background: rgba(1, 35, 64, 0.55);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
body:has(.hero-lock) .site-header .logo img {
filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
/* Still over the hero: back to the original plain-transparent look, no
blur, no border, no shadows - the hero's own scrim already handles
legibility here, so adding ours on top only doubled up as a visible
seam. */
body:has(.hero-lock) .site-header.is-over-hero {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: transparent;
}
body:has(.hero-lock) .site-header.is-over-hero .logo img {
filter: brightness(0) invert(1);
}
/* Header Contact button, navy -> white (27 Jul 2026, client request) - was
fine as solid navy (legible regardless of what's behind it), but reads
better matching the white nav text/logo now that the header sits over
the video instead of a white bar. Hover goes to --bg-tint, same pattern
.hero--photo .btn-primary already uses for the same navy-on-white swap.
Kept as a solid opaque button rather than joining the scrim/text-shadow
treatment above - it never had the overlap problem the plain text/logo
did, since its own background already fully covers anything behind it. */
body:has(.hero-lock) .site-header .btn-primary {
background: var(--white);
color: var(--navy);
}
body:has(.hero-lock) .site-header .btn-primary:hover,
body:has(.hero-lock) .site-header .btn-primary:focus-visible {
background: var(--bg-tint);
}
/* Smooths the .is-over-hero on/off switch (scrim fading in/out, shadows
appearing/disappearing) into a brief fade instead of an instant snap
right as it happens mid-scroll. .site-header here needs `transform`
carried over too (not just background) - this selector is more
specific than the plain `.site-header { transition: transform ... }`
base rule, so on the homepage it replaces that rule's `transition`
outright rather than adding to it; leaving transform out here would
silently kill the hide-on-scroll slide animation on the homepage only. */
body:has(.hero-lock) .site-header,
body:has(.hero-lock) .site-header .logo img {
transition: background var(--ease-standard), backdrop-filter var(--ease-standard), border-color var(--ease-standard), text-shadow var(--ease-standard), filter var(--ease-standard), box-shadow var(--ease-standard), transform var(--ease-standard);
}
/* The Menu button gets the same list MINUS transform (20 Aug 2026). transform is
in the list above because .site-header needs it for the hide-on-scroll slide;
the button needs no transform transition at all, and having one meant its
entrance was being animated by two systems at once - GSAP writing a transform
every frame while a 180ms CSS transition chased each value. The result was a
soft, laggy entrance that never quite matched its easing curve. One owner per
property. */
body:has(.hero-lock) .menu-btn {
transition: background var(--ease-standard), backdrop-filter var(--ease-standard), border-color var(--ease-standard), text-shadow var(--ease-standard), filter var(--ease-standard), box-shadow var(--ease-standard);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
height: 88px;
}
.site-header .logo {
display: flex;
align-items: center;
}
.site-header .logo img {
height: 32px;
width: auto;
}
/* --------------------------------------------------------------------------
5a. Menu button + nav page (19 Aug 2026)
Replaces the horizontal .nav-links row, the .nav-toggle hamburger and the
.nav-panel dropdown, all three of which are gone from the markup. The site's
navigation is now one button that opens one full-screen page.
Two custom properties do the light/dark work, so neither the button nor the
expanding wave needs to know which page it is on:
--menu-ink the button's border and label colour
--wave-ink the colour of the ring that expands out of it
They are set once here for the ordinary white header, and overridden in the
.hero-lock block above for the homepage, where the header floats over dark
video and everything has to invert.
-------------------------------------------------------------------------- */
:root {
--menu-ink: var(--navy);
--wave-ink: rgba(1, 35, 64, 0.55);
}
.menu-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 26px;
/* Pinned so the control cannot change size when the webfont arrives. Measured
during the audit (20 Aug 2026): the label is 94px wide in the fallback face
and 95px in General Sans, and because the header is justify-content:
space-between that 1px lands as a half-pixel shift of the button's left
edge as the font swaps. Too small for the layout-shift API to score, but the
brief asks for a bar that is completely stable once it has entered, and a
control that quietly resizes on font load is not that. Comfortably clears
"Menu" at 500 in either face. */
min-width: 96px;
border: 1px solid var(--menu-ink);
border-radius: 999px;
background: transparent;
color: var(--menu-ink);
font-family: var(--f-display);
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
/* Clips the second label out of sight until it rolls up. */
overflow: hidden;
/* Entrance: see .site-header .logo, .menu-btn below - the logo and this
button move together as one navigation system. */
animation: nav-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--nav-enter-delay, 260ms) both;
}
/* The navigation entrance, and it is deliberately ONE rule covering both halves
of the bar (20 Aug 2026, client audit).
It replaces a keyframe that moved the Menu button alone, from
translateY(-180%) - about 72px - while the logo did not move at all and the
header carried its own separate 12px slide. Measured over a page load, the
logo travelled 12px and the button 60-72px, on different curves, at different
times. They read as two unrelated components loading, which is exactly what
the audit was called to fix.
Now both do the same small thing: fade up over 14px, on the same curve, with
the logo 100ms ahead of the button so the bar assembles left-to-right rather
than arriving as one slab. That stagger is the only difference between them.
Only opacity and transform are touched, so nothing here can move the page.
The header is position: fixed on the homepage and sticky elsewhere, and its
box is at its final size and offset from the first frame - the entrance
cannot change layout, and measurably does not: the header, logo and button
account for 0.000 of the page's cumulative layout shift.
A CSS animation rather than something JS adds, for one specific reason: if it
were JS-driven these would have to start hidden, and a failed script would
leave the site with no visible way into its own navigation. Declared this way
the resting state IS visible - the animation only plays if animations run at
all. `both` holds the offset frame through the delay so nothing flashes in
place first. js/home.js takes over the timing on the homepage, where the
entrance has to wait for the intro. */
.site-header .logo {
animation: nav-enter 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--nav-enter-delay, 160ms) both;
}
@keyframes nav-enter {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* The label roll. .menu-btn__roll is one line tall with overflow hidden; the
two identical words are stacked inside it, so only the first is ever in
view. Moving the pair up by exactly one word-height rolls the first out of
the top as the second arrives from below - the label reads as having moved
rather than changed. Both words shift together as one block, which is why
the transform goes on the wrapper and not on the words themselves. */
.menu-btn__roll {
display: block;
height: 1.25em;
overflow: hidden;
}
.menu-btn__roll > .menu-btn__word {
display: block;
height: 1.25em;
line-height: 1.25em;
transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-btn:hover .menu-btn__word,
.menu-btn:focus-visible .menu-btn__word {
transform: translateY(-1.25em);
}
.menu-btn:focus-visible {
outline: 2px solid var(--menu-ink);
outline-offset: 3px;
}
/* Homepage only: the header sits over dark video, so the pill inverts. Kept in
step with the .logo img / nav treatment in section 5 above - same trigger,
same reason. */
body:has(.hero-lock) {
--menu-ink: var(--white);
--wave-ink: rgba(255, 255, 255, 0.85);
}
/* ---- The nav page ---------------------------------------------------------
Hidden by the .navpage-js class, which the inline script in every page's
adds before first paint. The hiding is deliberately conditional on
JS: with no JS the class is never added, so this whole block does not
apply, and the nav page stays what it is in the markup - an ordinary
section at the foot of the document, with all six links usable. That is the
fallback for the site's only navigation, so it cannot depend on a CDN.
-------------------------------------------------------------------------- */
.navpage-js .navpage {
position: fixed;
inset: 0;
z-index: 200; /* over .site-header, which is 100 */
visibility: hidden;
pointer-events: none;
}
/* Open. The linen ground is handed over from the wave to the panel itself the
moment the expansion finishes (see js/nav.js): the wave is a fixed-size
ellipse and would stop covering the screen if the window were resized while
the menu was open, so it is never what holds the background for longer than
the animation. */
.navpage-js .navpage.is-open {
visibility: visible;
pointer-events: auto;
overflow-y: auto;
}
.navpage-js .navpage.is-filled {
background: var(--shell);
}
/* The header is NOT touched while the wave is travelling.
It was, at first: opacity 0 the moment .is-open landed. That was the one
discontinuity in the whole transition, and the worst possible place for one -
the logo and the button the visitor had just clicked blinked out in a single
frame, because .site-header's transition list carries transform and
background but never opacity. What you felt was the page being taken away
and then something else arriving, rather than one layer closing over
another.
Nothing needs to hide it. .navpage is z-index 200 and the header is 100, so
the wave paints straight over it: the page the visitor was on - header, hero,
all of it - genuinely stays on screen underneath the moving edge and is
covered by it. Measured, the far corner of the old page is still visible for
about 540ms after the click.
It is only taken out once the wave has finished covering it, on .is-filled,
and then with visibility rather than opacity - an opacity: 0 header is still
in the tab order, so a keyboard visitor could tab into a logo and a Menu
button sitting invisible behind the panel. visibility: hidden removes it from
both the paint and the tab order.
On the way out the class comes off early in the close timeline, so the header
is back before the wave has finished contracting and is uncovered by it -
the same continuity, in reverse. */
.navpage-js body:has(.navpage.is-filled) .site-header {
visibility: hidden;
}
/* The expansion. A single bordered box grown from the Menu button: 1px border,
border-radius 50%, so at any size it is a true ellipse with a crisp edge -
the button's own outline, opening out. width/height are animated rather than
transform: scale() because scaling would thicken that 1px border into a fat
ring as it grew. It has no children and its parent is fixed, so there is
nothing for the size change to reflow.
left/top are set by JS to the button's centre and translate(-50%, -50%)
keeps it centred there, so it opens from the corner the button sits in. */
.navpage__wave {
position: fixed;
left: 0;
top: 0;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border: 1px solid var(--wave-ink);
border-radius: 50%;
background: transparent;
pointer-events: none;
will-change: width, height;
}
.navpage__inner {
position: relative;
z-index: 1;
min-height: 100%;
display: flex;
flex-direction: column;
/* Proportional to the viewport's HEIGHT, not a fixed step. This column has
to fit a back button, a photograph, six links and a footer inside one
phone screen, and a 48px gap between them is a sixth of that screen on a
small one. */
gap: clamp(16px, 2.6vh, 40px);
padding: var(--gutter);
padding-block: clamp(20px, 4vh, 40px) clamp(24px, 5vh, 48px);
}
/* Back arrow, top left, small (client brief). */
.navpage__back {
display: inline-flex;
align-items: center;
gap: 10px;
align-self: flex-start;
padding: 6px 4px;
border: 0;
background: transparent;
color: var(--navy);
font-family: var(--f-mono);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
}
.navpage__back svg {
width: 18px;
height: 18px;
transition: transform var(--ease-standard);
}
.navpage__back:hover svg,
.navpage__back:focus-visible svg {
transform: translateX(-4px);
}
.navpage__back-label { line-height: 1; }
/* Image above list on a phone, image left of list from 900px up.
Rebuilt 21 Aug 2026: on a phone this opened onto a blank screen. The block
was a grid with align-content: center inside a column stretched to the
panel's full height, so its rows were centred in whatever space was left -
which put a screen's worth of nothing above the first link, dropped the
photograph below the list, and left the email marooned a second screen
further down. Measured on a 360x640 phone: the panel was 856px of scrolling
for 640px of screen, and what you landed on was empty.
It is a flex column here instead, with no centring and the photograph
absorbing whatever room is left over (see .navpage__media below). Nothing
can be centred in slack space, because there is no slack space - the image
takes it. The order is the one the client asked for: image, pages, email. */
.navpage__grid {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: clamp(16px, 2.6vh, 40px);
}
.navpage__media {
order: 0;
/* The slack-absorber. flex-basis 0 with grow means it does not get a say in
how tall the column wants to be - it takes what the list and the footer
leave, between a floor that keeps it a photograph and a ceiling that stops
it crowding them out. */
flex: 1 1 0;
min-height: 120px;
max-height: 38vh;
position: relative;
overflow: hidden;
border-radius: var(--radius);
/* The reveal, same technique as .about-visual on the homepage: a clip-path
inset on the wrapper, so the photograph itself never moves and the grid
cannot reflow while it plays. js/nav.js animates --reveal to 0; declaring
the finished value here means no-GSAP and reduced-motion visitors get the
open state rather than a permanently shrunken image. */
--reveal: 0%;
clip-path: inset(var(--reveal) round var(--radius));
}
/* The wrapper owns the height now, so the photograph simply fills it. The old
max-height on the image was what made the wrapper follow the picture instead
of the space available; object-fit: cover means a 3:4 portrait crops to
whatever shape the wrapper ends up being rather than dictating it. */
.navpage__media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
/* Beats the sitewide `img { height: auto }`, which would otherwise let the
picture's own proportions set the wrapper's height again. */
min-height: 0;
}
.navpage__nav { order: 1; flex: 0 0 auto; }
/* The list. Numbers are --f-mono and small in the grey from the site's own
accent family; names are display type, uppercase, navy. Hairline rules
between rows, and one above the first, so the list reads as a table of
contents rather than a stack of buttons. */
.navlist {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.navlist__item { border-bottom: 1px solid var(--line); }
.navlist__link {
display: flex;
align-items: baseline;
gap: clamp(14px, 2vw, 28px);
padding-block: clamp(12px, 1.8vh, 20px);
text-decoration: none;
color: var(--navy);
}
.navlist__num {
flex: 0 0 auto;
font-family: var(--f-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
color: var(--gold);
transition: color var(--ease-standard);
}
.navlist__name {
font-family: var(--f-display);
font-weight: 600;
font-size: clamp(1.6rem, 4.2vw, 3rem);
line-height: 1.02;
letter-spacing: -0.02em;
text-transform: uppercase;
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hover nudges the name toward its destination and brings the number up to
full strength. No colour change on the name itself: it is already navy on
linen, and darkening it further only makes the row look pressed. */
.navlist__link:hover .navlist__name,
.navlist__link:focus-visible .navlist__name {
transform: translateX(clamp(6px, 1vw, 14px));
}
.navlist__link:hover .navlist__num,
.navlist__link:focus-visible .navlist__num {
color: var(--navy);
}
/* The page you are already on. Marked by the number going solid rather than by
dimming the name - a disabled-looking row in a six-item list reads as
broken. */
.navlist__link[aria-current="page"] .navlist__num { color: var(--navy); }
/* Email at the foot of the page, logo bottom right (client brief; the
reference puts both in the same two places). */
.navpage__foot {
/* Last in the column and never given any of the leftover space - the
photograph above takes all of it, which is what keeps the email sitting
directly under the list rather than a screen below it. */
flex: 0 0 auto;
display: flex;
/* Stacked and left-aligned on a narrow screen (client, 21 Aug 2026): the
email and the lockup are one block in the bottom-left corner, not two
things pushed to opposite edges. The email is monospace and cannot shrink,
so a row would have wrapped here anyway - and wrapping left the lockup
alone on a second line still pinned to the right, which read as a stray
rather than as a pair. Stating the column makes that deliberate. */
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
}
.navpage__email {
font-family: var(--f-mono);
font-size: clamp(0.75rem, 1.4vw, 0.9rem);
/* One step up from the 400 it inherited (20 Aug 2026, client request). 500 is
the heaviest IBM Plex Mono weight the page actually loads - see the Google
Fonts link in every , which requests wght@400;500 - so this is a real
weight rather than a browser-synthesised fake bold. Anything heavier would
need the font request widened first. */
font-weight: 500;
letter-spacing: 0.02em;
color: var(--navy);
text-decoration: none;
border-bottom: 1px solid var(--gold-faint);
padding-bottom: 2px;
transition: border-color var(--ease-standard);
}
.navpage__email:hover,
.navpage__email:focus-visible { border-bottom-color: var(--navy); }
.navpage__logo {
height: 28px;
width: auto;
}
/* Short viewports - a landscape phone, or a small one - lose the photograph.
Six links at a usable tap size plus a footer is already more than 390px of
height, and the picture is decorative: it carries nothing the list beside it
does not already say, which is why its alt is empty. Shrinking the links to
fit it in would take the rows under the ~44px a thumb needs, so the
photograph goes and the navigation keeps its size. Above this height it is
back, and it is the element that absorbs the spare room. */
@media (max-height: 620px) and (max-width: 899px) {
.navpage__media { display: none; }
}
@media (min-width: 900px) {
.navpage__grid {
/* Image gets the smaller share: it is a portrait, and six uppercase
division names need the width more than the photograph does. */
display: grid;
grid-template-columns: minmax(240px, 30%) 1fr;
grid-auto-flow: column;
gap: clamp(var(--sp-5), 6vw, var(--sp-7));
align-items: center;
}
/* There is room for both here, so the photograph goes back to being sized by
its own proportions rather than by what is left over - which is also what
lets the two columns be vertically centred against each other. */
.navpage__media {
flex: none;
min-height: 0;
max-height: none;
}
.navpage__media img {
height: auto;
max-height: min(62vh, 620px);
}
.navpage__inner { padding-inline: clamp(var(--gutter), 6vw, 110px); }
/* Wide enough for both to sit in their own corner on one line, which is the
brief for this size - email bottom left, lockup bottom right. */
.navpage__foot {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-4);
}
.navpage__logo { margin-left: auto; }
}
/* Reduced motion: everything still opens, nothing travels. The wave is not
used at all in this mode (js/nav.js skips it), the image is already at its
finished clip, and the button simply appears. */
@media (prefers-reduced-motion: reduce) {
.site-header .logo,
.menu-btn { animation: none; }
.menu-btn__roll > .menu-btn__word,
.navlist__name,
.navpage__back svg { transition: none; }
}
/* --------------------------------------------------------------------------
6. Buttons: two variants only
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sp-1);
padding: 14px 28px;
border-radius: var(--radius);
font-family: var(--f-body);
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
border: 1px solid transparent;
transition: background-color var(--ease-standard), color var(--ease-standard), border-color var(--ease-standard), transform var(--ease-standard);
}
.btn:hover,
.btn:focus-visible {
transform: translateY(-2px);
}
.btn-primary {
background: var(--navy);
color: var(--white);
}
.btn-primary:hover,
.btn-primary:focus-visible {
background: var(--navy-soft);
}
.btn-outline {
background: transparent;
color: var(--navy);
border-color: var(--navy);
}
.btn-outline:hover,
.btn-outline:focus-visible {
background: var(--navy);
color: var(--white);
}
.cta-group {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
/* Page-load reveal: once, respects reduced motion.
The hidden state is behind @media (scripting: enabled) because something has
to be able to UNDO it, and only script can. Measured 6 Sep 2026 with
JavaScript switched off: divisions/app-development.html, property.html and
manufacture.html each served their
, their lede and their primary CTA at
opacity 0 - "Owlbox", "Property" and "Manufacturing" were invisible, on
pages whose only heading that is. js/main.js adds .is-revealed on every other
path, including no-GSAP and reduced-motion, but with no JS at all nothing
runs and opacity: 0 is simply where the copy stays. The rest of the site
guards this properly - see .navpage-js and html.mz-motion, both set by inline
scripts for exactly this reason.
This note used to claim .reveal-on-load was the SOLE hidden state on the
site with no way back. That was wrong, and why it was wrong is worth
keeping: the search behind it only looked for opacity. The clip-path wipes
on .crew__cell/.crew__bg and .dirs__cell/.darkrun__bg had the same fault,
and were found a day later by eye, on a band that had just been filled with
real portraits. Both are now guarded the same way. If another hidden state
is ever added, the question is not "is it opacity" but "what removes it,
and does that thing run without JavaScript".
scripting: enabled fails in the safe direction too. A browser that does not
know the feature drops this block, so the copy is visible from the first
frame and the reveal is a no-op fade - the animation still runs where it is
supported, and where it is not, the words are simply already there. */
@media (scripting: enabled) {
.reveal-on-load {
opacity: 0;
transform: translateY(12px);
}
}
.reveal-on-load.is-revealed {
opacity: 1;
transform: translateY(0);
transition: opacity var(--ease-reveal), transform var(--ease-reveal);
}
/* No .is-revealed transform counterpart here on purpose - fixed 23 Jul 2026:
this used to set transform: translateY(0) scale(1), and at 3 classes deep
it outranked .division-card:hover's own transform (scale(1.045)), so
hover's spotlight scale silently never won once a card had scrolled into
view. Worse, this rule's 700ms reveal transition and .division-card:hover's
transition were both fighting over the same `transform` property, and a
scroll that moves the grid under a resting cursor re-triggers :hover
constantly - restarting that fight every frame, which is what was
freezing scroll over "Our divisions". main.js now animates this card's
reveal transform via GSAP instead (see .division-card handling in
main.js) and clears its own inline transform when done, so CSS - and
only :hover - ever owns this property again. Fallback if GSAP fails to
load: main.js falls back to the plain .reveal-on-load fade (no scale-in),
which doesn't have this conflict. */
@media (prefers-reduced-motion: reduce) {
.reveal-on-load,
.hero-mark.reveal-on-load,
.division-card.reveal-on-load {
opacity: 1;
transform: none;
transition: none;
}
* {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* --------------------------------------------------------------------------
8. Hero
-------------------------------------------------------------------------- */
.hero {
padding-top: var(--sp-6);
}
/* Division-page heroes (design.html, import-export.html, etc.) lead with an
index-tag + mono-label pair ("/ 01 /" / "DIVISION") - added 23 Jul 2026:
shifted up (less top padding than the default hero) and sized down
slightly, so that eyebrow reads as a smaller, tighter mark rather than
competing with the wordmark below it for attention. Scoped via :has() so
the home hero (no index-tag) is untouched. */
.hero:has(.hero-copy .index-tag) {
padding-top: var(--sp-4);
}
.hero-copy .index-tag,
.hero-copy .mono-label {
font-size: 0.68rem;
}
.hero {
/* Added 22 Jul 2026: default section bottom padding (96px desktop) stacked
with the About section's own default top padding was leaving a ~190px
void between the hero pills and "About Us" - tightened here instead. */
padding-bottom: var(--sp-4);
}
.hero .container {
display: grid;
gap: var(--sp-3);
}
.hero-copy h1 { margin-bottom: var(--sp-3); }
.hero-copy .lede { margin-bottom: var(--sp-4); }
/* The Three.js drag-to-rotate globe that used to sit in the right half of the
Import & Export hero was removed with that hero (21 Aug 2026 - see the
comment above in
divisions/import-export.html). Its CSS went with it on 4 Sep 2026, along
with js/trade-globe.js, js/trade-effects.js and js/data/world-countries.js:
no page had loaded any of the three since August, so 277 KB of JavaScript
and this block of rules were still being deployed for an element that no
longer exists in any markup. `git show 3de90325` has all of it if the globe
is ever wanted back. */
/* Every hero, sitewide - reworked 23 Jul 2026, replacing the home-only
centered logo-forward layout added 22 Jul 2026: client didn't want
content centered on the page, wanted it left-aligned, and wanted the
hero to fill the screen on every division page (not just Home) so the
next section doesn't peek in above the fold on load. min-height
subtracts the sticky header's own fixed 88px height (see .site-header
.container) so the hero exactly fills the rest of the viewport.
flex-direction: column keeps every other hero (a single .hero-copy
child) stacking normally. */
.hero {
min-height: calc(100svh - 88px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* --------------------------------------------------------------------------
9a. Division scroller (pinned full-viewport slides)
-------------------------------------------------------------------------- */
/* Replaces the "Our divisions" card grid below (section 10) on Home, added
24 Jul 2026. Client-requested pinned scroll sequence: slide 01 (Mezzo)
fills the viewport, and scrolling wipes 02, 03, 04, 05 up over it in turn.
This markup/CSS IS the fallback: by default every .division-slide is just
a normal, full-viewport, non-pinned section stacked in document order -
exactly what mobile/touch devices, prefers-reduced-motion, and a failed
GSAP/ScrollTrigger CDN load all get (see js/main.js's gsap.matchMedia()
call - scoped to `(hover: hover) and (pointer: fine) and (min-width:
900px)`, i.e. real desktop mouse users only). JS only *adds* the
absolute-stack-and-pin behavior on top of this for that one case; nothing
here depends on JS to be visible or usable. This is a deliberate exception
to the build spec's "no scroll-jacking" rule (ยง2.6) on desktop only -
see that section for the full note. */
.division-scroller {
position: relative;
/* Overrides the generic `section { padding-block: var(--section-pad) }`
rule (~96px at this width) - found via headless Playwright inspection
(24 Jul 2026) to be the actual root cause of the pin/content offset
bug: that padding pushes .division-scroller-pin down inside this
section's box, and GSAP's pin preserves that same offset once pinned -
so the pinned slide (and its bottom-anchored content/button) rendered
~96px lower than intended, clipped past the viewport's bottom edge.
This component needs to be edge-to-edge in both the pinned and static-
fallback stack, so it gets none of the sitewide section padding. */
padding-block: 0;
}
.division-scroller-pin {
overflow: hidden;
}
.division-slide {
position: relative;
/* svh, not vh (13 Aug 2026): this is the static, non-pinned stack that
mobile/touch actually gets, and on mobile 100vh is the LARGE viewport -
the height the page would have if the browser's address bar were
already collapsed. It isn't on load, so every slide started ~60-100px
taller than the screen, and each one had to be scrolled past its own
bottom edge before the next appeared. Five slides of that reads as the
scroll catching on every section. svh is the small-viewport unit -
the height that's actually visible with the address bar showing - so a
slide fills the screen exactly, address bar or not. The desktop pinned
path already sizes itself from the pin (100svh, set in main.js) and is
unaffected either way. */
min-height: 100svh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--navy);
}
.division-slide-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.division-slide-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(1, 35, 64, 0.88) 0%, rgba(1, 35, 64, 0.4) 45%, rgba(1, 35, 64, 0.05) 75%);
}
.division-slide-content {
position: relative;
z-index: 1;
/* clamp(), not a flat var(--sp-6): the pinned desktop mode forces each
slide to exactly 100vh (inset: 0) with overflow: hidden, unlike the
static fallback where a slide can grow taller than 100vh to fit its
content. A flat 64px top+bottom padding plus the heading/paragraph/
button could clip against that fixed height on a short viewport (e.g.
a laptop with a lot of browser chrome) - scaling padding down on short
viewports instead of holding it constant keeps the button on-screen. */
padding-block: clamp(20px, 6vh, 64px);
}
.division-slide .index-tag {
color: var(--white);
}
.division-slide .mono-label {
color: rgba(255, 255, 255, 0.7);
}
.division-slide h3 {
color: var(--white);
font-size: clamp(2rem, 5vw, 3.5rem);
max-width: 16ch;
margin-block: var(--sp-2);
}
.division-slide p {
color: rgba(255, 255, 255, 0.85);
max-width: 55ch;
margin-bottom: var(--sp-4);
}
.division-slide .btn-outline {
color: var(--white);
border-color: var(--white);
}
.division-slide .btn-outline:hover,
.division-slide .btn-outline:focus-visible {
background: var(--white);
color: var(--navy);
}
/* The slides used to set their headings as the sub-brand's logo (h3 > img
.hero-logo), knocked out to white. As of 25 Aug 2026 the headings are real
text at the client's request, so that rule is gone - .division-slide h3
above styles them, which is what it was written for in the first place.
.hero-logo itself is untouched and still in use in the page heroes. */
.division-slide .bullet-list li {
color: rgba(255, 255, 255, 0.85);
}
@keyframes logo-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes logo-marquee-scroll-reverse {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
/* --------------------------------------------------------------------------
13. Contact CTA banner
-------------------------------------------------------------------------- */
.cta-banner {
background: var(--navy);
color: var(--white);
/* Pinstripe seam - added 22 Jul 2026. Without this, a dark section directly
above another dark section (e.g. the divisions .stat-panel) reads as one
undifferentiated navy block with an awkward empty gap, not two sections. */
border-top: 1px solid var(--line-dark);
/* Tighter than the default section padding (96px desktop) - this is a
compact CTA strip, not a full content section, so it shouldn't stack
a second full section-height of empty space under the divisions panel. */
padding-block: var(--sp-5);
}
.cta-banner .container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: var(--sp-3);
}
.cta-banner h2 {
color: var(--white);
font-size: 1.5rem;
}
.cta-banner .btn-outline {
color: var(--white);
border-color: var(--white);
}
.cta-banner .btn-outline:hover,
.cta-banner .btn-outline:focus-visible {
background: var(--white);
color: var(--navy);
}
.cta-banner .btn-primary {
background: var(--white);
color: var(--navy);
}
.cta-banner .btn-primary:hover,
.cta-banner .btn-primary:focus-visible {
background: var(--gold);
color: var(--white);
}
/* --------------------------------------------------------------------------
17. Feature bullets / services cards
-------------------------------------------------------------------------- */
.bullet-list {
display: grid;
gap: var(--sp-3);
}
.bullet-list li {
padding-left: var(--sp-3);
border-left: 2px solid var(--gold-faint);
color: var(--slate);
}
.service-grid {
display: grid;
gap: var(--sp-3);
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
.service-grid { grid-template-columns: repeat(3, 1fr); }
}
.service-card {
border: 1px solid var(--line);
border-radius: var(--radius);
padding: var(--sp-3);
/* Fixed height (24 Jul 2026) - same reasoning as .division-card (see its
own comment): with no explicit height, the .card-reveal description
growing from
max-height: 0 to 160px on hover grew this card's own natural height,
which grid's default row-stretch then applied to every card in the
row, reflowing the whole grid - and everything below it on the page -
on every hover. A fixed height means the card's box never changes
size; only the description's visibility toggles within it. */
height: 190px;
overflow: hidden;
transition: border-color var(--ease-standard);
}
.service-card:hover {
border-color: var(--navy);
}
.service-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-1); }
/* --------------------------------------------------------------------------
18. Media / photo placeholders + captions + galleries
-------------------------------------------------------------------------- */
.media-photo {
border: 1px solid var(--line);
border-radius: var(--radius);
width: 100%;
height: auto;
}
figure.captioned { display: flex; flex-direction: column; gap: var(--sp-2); }
figure.captioned figcaption {
font-family: var(--f-mono);
font-size: 0.8rem;
letter-spacing: 0.02em;
color: var(--slate);
}
.gallery-grid {
display: grid;
gap: var(--sp-3);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
.gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
.portfolio-grid {
display: grid;
gap: var(--sp-4);
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
/* --------------------------------------------------------------------------
20. Contact and its form
-------------------------------------------------------------------------- */
/* Rebuilt 20 Aug 2026 to a client reference (houseofhoney.com/contact), in
Lincor's palette. Two blocks: a navy field with the lockup oversized and
drifting behind the title, then a two-panel card floating over a
photograph. The old layout - a bordered form in one column and a plain
address list in the other, both on the page ground - is gone, and its
.contact-layout / .form-grid / .field rules with it; nothing else on the
site used them, checked across every page.
20a. The navy field
------------------- */
.contact-hero {
position: relative;
background: var(--navy);
color: var(--white);
/* The mark below is deliberately taller than the space left for it, and
this is what cuts it off. */
overflow: hidden;
/* The title sits at the top of the block (client, 20 Aug 2026), close under
the header rather than centred in a tall field - so this is only the space
the header needs to clear, not a full section's padding. The small
"Contact" label that was above it has gone with the same change; the
heading says it. */
padding-block: clamp(var(--sp-4), 5vh, var(--sp-5)) 0;
}
/* The one centred block on the site - see the note in contact.html. */
.contact-hero__head {
position: relative;
z-index: 1;
text-align: center;
}
.contact-hero__head h1 {
font-size: clamp(2.5rem, 7vw, 5.5rem);
line-height: 1;
letter-spacing: -0.03em;
color: var(--white);
}
/* The oversized lockup.
Height, not width, is what is set: these are fixed-proportion marks, and a
height plus aspect-ratio is what keeps them undistorted at any viewport.
The block is given less room than the mark is tall (margin-top pulls it up
into the title's space, and the section's overflow removes the rest), so it
is clipped top and bottom as well as running off both edges - the reference
puts its own giant type half off the frame and that is what stops it
reading as a heading in its own right. */
.contact-hero__marquee {
margin-top: clamp(-40px, -4vw, -12px);
height: clamp(150px, 20vw, 300px);
overflow: hidden;
}
.contact-hero__belt {
display: flex;
width: max-content;
height: clamp(210px, 28vw, 420px);
/* Two identical groups travelling exactly one group's width, so the frame
after the last is identical to the first and the loop has no seam. A CSS
animation is the whole engine here on purpose: unlike the homepage's
brands belt, nothing about this responds to scroll or to the pointer, so
there is nothing for a script to do that keyframes cannot. */
animation: contact-drift 42s linear infinite;
}
.contact-hero__group {
display: flex;
gap: clamp(40px, 5vw, 90px);
padding-right: clamp(40px, 5vw, 90px);
}
@keyframes contact-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
/* The supplied lockup is navy artwork and this sits on navy, so it cannot be
used as an . Same approach as the brands row on the homepage: the
element is a block of colour, and the PNG's alpha is the mask that cuts the
wordmark out of it. A filter cannot get to a specific colour; a mask makes
the colour the token itself.
The url() is relative to THIS stylesheet, not to the page - hence ../ -
which is why it can be hard-coded here when the homepage's equivalent had
to be handed in from script.
The blue is a step up from the ground rather than an accent: at roughly 2:1
against the navy it reads clearly as a graphic while staying well below the
white title, which is what keeps the title the thing you read first. */
.contact-hero__mark {
flex: 0 0 auto;
height: 100%;
aspect-ratio: 2400 / 594;
background: #0B4C7C;
-webkit-mask: url("../images/logo/lincor-lockup@2x.png") center / contain no-repeat;
mask: url("../images/logo/lincor-lockup@2x.png") center / contain no-repeat;
}
/* 20b. The card, and the photograph under it
----------------------------------------- */
.contact-block {
position: relative;
isolation: isolate;
background: var(--navy);
overflow: hidden;
padding-block: clamp(var(--sp-5), 8vh, 110px);
}
/* The backdrop. The supplied file is 735x490, which is smaller than the box
it fills on any desktop screen, so it is being scaled up - acceptable here
only because the photograph is a long-exposure blur to begin with and has
no fine detail to lose. A larger export would still be better if one
exists; nothing else about this needs to change if one arrives.
Dimmed, because the card has to sit on top of it: the eggshell panel is
nearly the same value as the concourse floor, and without this the two
merge along the panel's bottom edge. */
.contact-block__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.55;
z-index: -1;
}
.contact-card {
display: grid;
/* Square corners and no gap: the two panels are one object butted together,
which is what makes the split read as a seam rather than as two cards.
The statement side is the narrower of the two - the form is what people
came here to use. */
grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
@media (max-width: 860px) {
.contact-card { grid-template-columns: minmax(0, 1fr); }
}
/* The statement panel. */
.contact-card__say {
background: var(--navy);
color: var(--white);
padding: clamp(32px, 4vw, 64px);
display: flex;
flex-direction: column;
/* The statement centred in the panel and the details settled at the foot of
it, which is how the reference uses this side: one line of intent held in
the middle of a mostly empty field. */
justify-content: center;
gap: clamp(40px, 8vh, 96px);
}
.contact-card__statement {
/* Stated, not inherited: the site sets `p { color: var(--slate) }` globally,
which beats the white this panel passes down and left the statement almost
unreadable on the navy. */
color: var(--white);
font-family: var(--f-editorial);
font-size: clamp(1.9rem, 3.4vw, 3.1rem);
line-height: 1.08;
letter-spacing: -0.01em;
text-align: center;
margin-block: auto;
}
/* The form panel.
The panel's own padding and the corner photograph's width are named here
because the top padding is DERIVED from them: the photograph is pinned into
that padding, so the space above the label has to be the inset, plus the
photograph's height, plus a gap. Written as its own clamp it agreed with the
photograph at desktop widths and disagreed at phone widths - 150px of
padding above a picture that finished 178px down - and the label ran across
the middle of the building. Derived, they cannot come apart at any width.
1.25 is the picture's own 4:5, so its height follows from its width. */
.contact-card__form {
--panel-pad: clamp(28px, 3.4vw, 56px);
--thumb-w: clamp(120px, 12vw, 168px);
position: relative;
background: var(--shell);
color: var(--navy);
padding: var(--panel-pad);
padding-top: calc(var(--panel-pad) + var(--thumb-w) * 1.25 + var(--sp-3));
}
/* The corner photograph, flush into the panel's top-right the way the
reference has it - it sits in the padding rather than in the flow, so it
never pushes the form around. */
.contact-card__thumb {
position: absolute;
top: var(--panel-pad);
right: var(--panel-pad);
width: var(--thumb-w);
height: auto;
display: block;
}
.contact-card__label {
font-size: 0.95rem;
color: var(--slate);
margin-bottom: var(--sp-3);
}
.cform {
display: grid;
gap: 2px;
}
/* Each field is a tinted well with no border, the divisions between them made
by the 2px of panel showing through rather than by rules - the reference's
fields are separated the same way. */
.cfield {
position: relative;
background: rgba(1, 35, 64, 0.05);
}
.cfield input,
.cfield select,
.cfield textarea {
width: 100%;
border: 0;
border-radius: 0;
background: none;
font: inherit;
color: var(--navy);
/* Top padding leaves the room the label rises into. */
padding: 26px 18px 10px;
}
.cfield textarea {
min-height: 130px;
resize: vertical;
display: block;
}
.cfield select { appearance: none; cursor: pointer; }
/* The select's own chevron, since appearance: none removes the native one. */
.cfield--select::after {
content: "";
position: absolute;
right: 20px;
bottom: 20px;
width: 8px;
height: 8px;
border-right: 1.5px solid var(--slate);
border-bottom: 1.5px solid var(--slate);
transform: rotate(45deg);
pointer-events: none;
}
/* The label starts where the reference puts its placeholder text - inside the
field - and rises to sit above the value once there is one. :placeholder-
shown is what detects an empty field, which is why every input carries a
single-space placeholder: without one that pseudo-class never matches and
the label would never come back down.
A plain placeholder would have looked identical at rest and then vanished
the moment anyone typed, which is the failure this avoids: the description
of the field is still on screen while the field is being filled in, and
still there when someone comes back to check what they wrote. */
.cfield label {
position: absolute;
left: 18px;
top: 18px;
font-size: 1rem;
color: var(--slate);
pointer-events: none;
transform-origin: left top;
transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), color 220ms ease;
}
.cfield input:focus + label,
.cfield input:not(:placeholder-shown) + label,
.cfield textarea:focus + label,
.cfield textarea:not(:placeholder-shown) + label,
/* A select always has a value showing, so its label has nothing to sit on top
of and is simply raised from the start. */
.cfield--select label {
transform: translateY(-11px) scale(0.72);
color: var(--navy);
}
.cfield input:focus-visible,
.cfield select:focus-visible,
.cfield textarea:focus-visible {
outline: 2px solid var(--navy);
outline-offset: -2px;
}
/* The submit row: one full-width control with the label at one end and the
arrow at the other, over a hairline. The reference draws the text and the
arrow as two separate things; making the whole row the button gives the
same picture with one target the width of the form instead of a 24px
glyph. */
/* The honeypot (5 Sep 2026). Off-screen rather than display: none or hidden -
some bots skip fields that are plainly hidden, and this one only works if it
looks like an ordinary input to something reading the DOM. It is already out
of the tab order and out of the accessibility tree in the markup
(tabindex="-1", aria-hidden), so nothing here needs to hide it from a person
using the page; this just takes it out of the layout without taking it out
of the form. */
.cform__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.cform__submit {
margin-top: var(--sp-3);
padding: var(--sp-3) 0 0;
border: 0;
border-top: 1px solid rgba(1, 35, 64, 0.2);
background: none;
color: var(--navy);
font: inherit;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
/* While the enquiry is in flight. The button is genuinely disabled for the
duration, so this only has to make that visible - and it must not hide the
label, because the status line beside it is what is doing the talking. */
.cform__submit:disabled {
cursor: progress;
opacity: 0.55;
}
.cform__submit:disabled .cform__arrow { transform: none; }
.cform__arrow {
display: grid;
place-items: center;
width: 34px;
height: 34px;
background: var(--navy);
color: var(--white);
transition: transform var(--ease-standard);
}
.cform__submit:hover .cform__arrow,
.cform__submit:focus-visible .cform__arrow { transform: translateX(4px); }
/* Empty until the script fills it, and it takes no space while empty - :empty
rather than a class, so there is one source of truth for whether there is
anything to show. */
.cform__note {
margin-top: var(--sp-2);
font-size: 0.85rem;
line-height: 1.45;
color: var(--slate);
}
.cform__note:empty { display: none; }
/* The "your mail is not working" dialog.
A native