@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;1,6..72,300;1,6..72,400&display=swap');
/* OMIAH Pursuits — "Correspondence": warm paper stock, navy ink, teal accents.
Leans into the product truth that the relationship lives in an email thread. */
:root {
--ink: #071b3a;
--navy: #092754;
--blue: #0d3ea8;
--teal: #078da3;
--aqua: #31bfd1;
--mist: #edf5fa;
--paper: #f7fbfd;
--bone: #f4f0e9;
--sand: #e3dacd;
--line: rgba(9, 39, 84, .14);
/* Deep water, taken from the Concept B prototype so the page alternates paper stock
against a much darker ground instead of reading as one continuous light wash. */
--deep: #04142f;
--deep-2: #061c3d;
--on-deep: #dfeef3;
--on-deep-bright: #f2fbfd;
--on-deep-soft: rgba(213, 234, 241, .72);
--deep-line: rgba(150, 198, 212, .2);
--deep-eyebrow: #6ed4de;
/* Edge of the water, for vignetting a band inwards without introducing a new hue. */
--deep-edge: #020b1c;
/* Ink weights measured against the paper they sit on rather than chosen by eye. The
accent teal is a 3.8:1 colour on bone: right for a rule, a stroke or a gradient, and
too weak for an 11px capital. These two carry the small type instead. */
--teal-ink: #056f82;
--ink-mute: #54677d;
/* Where the pointer is, as a percentage of the band the pointer is over. site.js writes
these; the fallbacks reproduce the fixed bloom position the page had before it, so with
no scripting the ground looks exactly as it did rather than losing its light. */
--mx: 76%;
--my: 18%;
/* --bloom is declared on [data-bloom], not here. Custom properties inherit their computed
value, so var(--mx) inside a :root token is substituted once against 76%/18% and never
again when site.js writes --mx on a band. That is how the pointer highlight vanished
when the scroll-rotate pass named the two radials. */
--serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
--sans: 'Manrope', system-ui, -apple-system, sans-serif;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-io: cubic-bezier(.76, 0, .24, 1);
--ease-soft: cubic-bezier(.32, .72, 0, 1);
/* Soft bathymetric contours — the aerial read of a shoaling coast, drawn once as hairlines
and reused as a background layer on every dark band. This is what gives the ink its
horizon: a two-stop gradient has no depth cue in it at all, and a photograph on every
band would be louder than this desk should be. Lines crowd together towards the bottom
the way depth contours do as the seabed rises. */
--contours: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='760' fill='none' stroke='%2396c6d4' stroke-linecap='round'%3E%3Cpath d='M-40 118C260 60 520 170 820 108S1240 52 1660 82' stroke-width='1.25' stroke-opacity='0.3'/%3E%3Cpath d='M-40 206C260 264 520 154 820 216S1240 272 1660 242' stroke-width='1.15' stroke-opacity='0.26'/%3E%3Cpath d='M-40 292C260 234 520 344 820 282S1240 226 1660 256' stroke-width='1.05' stroke-opacity='0.23'/%3E%3Cpath d='M-40 374C260 432 520 322 820 384S1240 440 1660 410' stroke-width='1' stroke-opacity='0.2'/%3E%3Cpath d='M-40 450C260 392 520 502 820 440S1240 384 1660 414' stroke-width='0.95' stroke-opacity='0.18'/%3E%3Cpath d='M-40 518C260 576 520 466 820 528S1240 584 1660 554' stroke-width='0.9' stroke-opacity='0.16'/%3E%3Cpath d='M-40 578C260 520 520 630 820 568S1240 512 1660 542' stroke-width='0.85' stroke-opacity='0.14'/%3E%3Cpath d='M-40 630C260 688 520 578 820 640S1240 696 1660 666' stroke-width='0.8' stroke-opacity='0.12'/%3E%3Cpath d='M-40 674C260 616 520 726 820 664S1240 608 1660 638' stroke-width='0.8' stroke-opacity='0.1'/%3E%3C/svg%3E");
/* The correspondence stock itself: writing-paper ruling, light on ink and ink on paper. */
--rule-deep: repeating-linear-gradient(180deg, rgba(150, 198, 212, .07) 0 1px, transparent 1px 34px);
--rule-paper: repeating-linear-gradient(180deg, rgba(9, 39, 84, .05) 0 1px, transparent 1px 34px);
--vignette: radial-gradient(122% 96% at 50% 46%, transparent 38%, rgba(2, 11, 28, .58));
}
/* Declared on the same element site.js writes --mx/--my onto, so the substitution happens
per band and follows the pointer. The two radials are the presentation-pass bloom plus
the tighter core that made the cursor's position legible. */
[data-bloom] {
--bloom:
radial-gradient(300px circle at var(--mx) var(--my), rgba(122, 217, 226, .1), transparent 70%),
radial-gradient(660px circle at var(--mx) var(--my), rgba(49, 191, 209, .15), transparent 66%);
}
* { box-sizing: border-box; }
/* The page now opens and closes on deep water, so the canvas behind it matches. Otherwise an
overscroll bounce shows the bone body colour past the dark footer. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--deep-2); }
body {
margin: 0;
font: 400 16px/1.65 var(--sans);
color: var(--navy);
background: var(--bone);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font-family: var(--sans); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; }
/* Teal is too dim to see against deep water, so bands that put content directly on it
switch to aqua. The contact section is deliberately absent: its controls sit on the
white letterhead, where aqua would be the weaker outline of the two. */
.thread :focus-visible, .about :focus-visible, .foot :focus-visible { outline-color: var(--aqua); }
section[id] { scroll-margin-top: 120px; }
.skip {
position: fixed; left: 20px; top: -80px; z-index: 200;
padding: 12px 18px; background: #fff; color: var(--navy);
font-size: 13px; font-weight: 600;
}
.skip:focus { top: 16px; }
.wrap { width: min(1260px, calc(100% - 9vw)); margin: 0 auto; }
/* --teal reads as a signature at headline size and as a smudge at 11px: measured on the
paper it sits on it comes to 3.5:1, under the 4.5:1 small text has to clear. --teal-ink is
the same signature mixed darker, and every small teal label on the site uses it. */
.eyebrow {
margin: 0 0 22px;
font: 600 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--teal-ink);
}
.lead { font-size: 17.5px; line-height: 1.74; color: #46597a; max-width: 36em; }
h2 {
font: 300 clamp(36px, 4.4vw, 68px)/1.04 var(--serif);
letter-spacing: -.032em; margin: 0 0 22px;
}
h2 em { font-style: italic; color: var(--teal); }
.head { max-width: 40ch; margin: 0 0 clamp(38px, 4.4vw, 62px); }
/* A section opening that uses the width it occupies. The old head was a single 40-character
column with the rest of the row empty, which is most of what "dead space" meant: the
heading and its standfirst now sit side by side across the full measure, on one baseline,
divided by a hairline. */
.head-wide {
max-width: none;
display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
gap: 0 clamp(26px, 4.4vw, 76px); align-items: end;
}
.head-wide .eyebrow { grid-area: 1 / 1; margin-bottom: 16px; }
.head-wide h2 { grid-area: 2 / 1; margin-bottom: 0; max-width: 17ch; }
.head-wide .lead {
grid-area: 2 / 2; max-width: 34em;
padding-top: 20px; border-top: 1px solid var(--line);
}
/* ---------- Texture ---------- */
.grain {
position: fixed; inset: -50%; z-index: 90; pointer-events: none;
opacity: .06; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grainShift 7s steps(6) infinite;
}
@keyframes grainShift {
0% { transform: translate3d(0, 0, 0); }
20% { transform: translate3d(-6%, 3%, 0); }
40% { transform: translate3d(4%, -5%, 0); }
60% { transform: translate3d(-3%, 6%, 0); }
80% { transform: translate3d(5%, 2%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
/* ---------- Scroll progress ---------- */
.progress {
position: fixed; left: 0; top: 0; z-index: 120;
height: 2px; width: 100%;
transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--blue), var(--aqua));
}
/* ---------- Reveal primitives ---------- */
/* Every starting state that hides content is scoped to `html.js`, so with scripting
off the page renders as a complete, static document instead of blank space. */
.js [data-reveal] {
opacity: 0;
transform: translate3d(0, var(--reveal-y, 26px), 0);
transition:
opacity .95s var(--ease-out) var(--d, 0s),
transform 1.15s var(--ease-out) var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.mask { display: block; overflow: hidden; padding-bottom: .04em; }
.mask > i { display: block; font-style: inherit; }
.js .mask > i {
transform: translate3d(0, 118%, 0);
transition: transform 1.25s var(--ease-out) var(--d, 0s);
}
.js .is-in .mask > i, .js .mask.is-in > i { transform: none; }
.word { display: inline-block; overflow: hidden; vertical-align: top; }
.word > i { display: inline-block; font-style: inherit; }
.js .word > i {
transform: translate3d(0, 112%, 0);
transition: transform 1.1s var(--ease-out) var(--d, 0s);
}
.js .is-in .word > i { transform: none; }
/* ---------- Media ---------- */
.media { position: relative; overflow: hidden; }
/* ---------- The water turns ---------- */
/* The coastal photograph rotates with the page. Rotating a picture inside a frame normally
swings its corners into view, and the fix is geometric rather than careful: the rotating
layer is a square, centred on the frame, whose side is at least the frame's diagonal. A
square of side d >= sqrt(w^2 + h^2) centred on a w x h box contains that box at every
angle, because the box's own corners are all within d/2 of the shared centre and the
square's inscribed circle has radius d/2. So "no edge is ever visible" holds by
construction, for any frame, any viewport and any angle, rather than by choosing a
generous overscan and hoping.
`translate` puts the layer's centre on the frame's centre and `rotate` turns it about that
same point, so the two never fight; both are compositor-only properties.
The side comes from `--spin-size`, which site.js measures per frame element. Its fallback
is 100%, which with the centring above is exactly the frame — correct for every state in
which nothing rotates, because `--spin` then holds its own 0deg fallback. A layer can
therefore never be turned and undersized at once: the same script writes both values, and
the loop below declines to write an angle for a frame it has not measured. */
.spin, .contact::before, .briefhero::after {
position: absolute; top: 50%; left: 50%;
width: var(--spin-size, 100%); height: var(--spin-size, 100%);
translate: -50% -50%;
rotate: var(--spin, 0deg);
/* Deliberately not promoted with `will-change: transform`, which the photograph carried
while it was a parallax layer. A square sized off the diagonal is between three and four
times the area of the frame that shows it, so promoting it hands the compositor a
texture several times larger than the pixels anyone sees, and re-compositing that costs
more than repainting the clipped frame does. Priced by scripts/spin-cost-compare.mjs
over a scripted scroll of the whole homepage at 1440, interleaved across three rounds:
adding the hint costs 16.7ms on the median frame, while turning the square at all costs
nothing measurable against the same page with the square removed. */
}
img.spin {
/* The square routinely exceeds its frame, so the global max-width has to be lifted. */
max-width: none; object-fit: cover;
}
/* Two frames paint their own ground instead of carrying a child: the contact band, where the
letterhead is the only thing that should be an element, and the brief's masthead, which is
copied verbatim into the generated /sample page. Both take the identical square as a
pseudo-element, with the picture as a background rather than an ![]()
. */
.contact::before, .briefhero::after {
content: ''; z-index: 0; pointer-events: none;
background: url('tidal-channels.jpg') 50% 50% / cover no-repeat;
}
/* ---------- Line glyphs that draw themselves in ---------- */
.glyph { overflow: visible; }
.glyph circle, .glyph path, .glyph line {
fill: none; stroke: currentColor; stroke-width: 1.15;
stroke-linecap: round; stroke-linejoin: round;
}
.js .glyph circle, .js .glyph path, .js .glyph line {
stroke-dasharray: 100; stroke-dashoffset: 100;
transition: stroke-dashoffset 1.5s var(--ease-io) var(--d, 0s);
}
.js .is-in .glyph circle, .js .is-in .glyph path, .js .is-in .glyph line { stroke-dashoffset: 0; }
/* ---------- Cycling word ---------- */
.cycle { display: inline-block; overflow: hidden; vertical-align: bottom; position: relative; }
.cycle > span {
display: block;
transition: transform .82s var(--ease-io), opacity .6s linear;
}
.cycle.is-out > span { transform: translate3d(0, -110%, 0); opacity: 0; }
.cycle.is-set > span { transform: translate3d(0, 110%, 0); opacity: 0; transition: none; }
/* ---------- Link + button micro-interactions ---------- */
.swipe { position: relative; display: inline-block; }
.swipe::after {
content: ''; position: absolute; left: 0; right: 0; bottom: -.14em;
height: 1px; background: currentColor;
transform: scaleX(var(--sx, 0)); transform-origin: 0 50%;
transition: transform .6s var(--ease-out);
}
.swipe:hover::after, .swipe:focus-visible::after { --sx: 1; }
.cta {
position: relative; display: inline-flex; align-items: center; gap: .85em;
min-height: 44px; padding: 1.05em 1.6em; overflow: hidden; isolation: isolate;
font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
border: 1px solid var(--navy); background: none; color: inherit; cursor: pointer;
}
.cta > span { position: relative; z-index: 2; transition: color .5s var(--ease-out); }
.cta::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: currentColor;
transform: translate3d(0, 101%, 0);
transition: transform .6s var(--ease-io);
}
.cta:hover::before, .cta:focus-visible::before { transform: none; }
.cta:hover > span, .cta:focus-visible > span { color: var(--bone); }
.cta .arrow { transition: transform .5s var(--ease-out); }
.cta:hover .arrow { transform: translate3d(.35em, 0, 0); }
.ghost {
display: inline-flex; align-items: center; min-height: 44px;
font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
color: var(--navy); background: none; border: 0; padding: 1.05em 0; cursor: pointer;
}
.ghost.is-copied { color: var(--teal); }
/* ---------- Header ---------- */
.bar {
position: fixed; inset: 0 0 auto; z-index: 100; border-bottom: 1px solid transparent;
transition: background .7s var(--ease-out), border-color .7s var(--ease-out);
}
/* The header sits over a dark hero and over paper sections further down, so it keeps one
dark identity throughout rather than trying to invert itself per section. */
.bar.is-stuck {
background: rgba(4, 20, 47, .78); backdrop-filter: blur(20px) saturate(140%);
border-bottom-color: rgba(150, 198, 212, .18);
}
.bar .brand span { color: var(--on-deep-bright); }
.bar-nav a { color: rgba(223, 238, 243, .82); }
.bar-nav a:hover { color: var(--on-deep-bright); }
.bar-in {
width: min(1260px, calc(100% - 9vw)); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 32px;
height: 102px; transition: height .7s var(--ease-out);
}
.bar.is-stuck .bar-in { height: 70px; }
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand span { font: 400 25px/1 var(--serif); letter-spacing: .2em; transition: letter-spacing .8s var(--ease-out); }
.bar.is-stuck .brand span { letter-spacing: .13em; }
.brand small { font: 600 9.5px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--aqua); }
.bar-nav { display: flex; gap: clamp(22px, 2.4vw, 38px); }
.bar-nav a, .bar-cta { font: 500 11.5px/1 var(--sans); letter-spacing: .19em; text-transform: uppercase; }
.bar-cta { color: var(--aqua); }
.bar :focus-visible { outline-color: var(--aqua); }
/* ---------- Hero ---------- */
.hero {
position: relative; min-height: 100vh; display: flex; align-items: center;
padding: 170px 0 130px; overflow: hidden;
/* A horizon low in the frame, so the hero has a waterline rather than an even wash. */
background:
radial-gradient(150% 62% at 50% 116%, rgba(20, 118, 140, .34), transparent 62%),
linear-gradient(168deg, var(--deep) 0%, #05193a 44%, var(--deep-2) 82%, #04162f 100%);
color: var(--on-deep);
}
.hero .eyebrow { color: var(--deep-eyebrow); }
.hero-in {
position: relative; z-index: 2; width: min(1260px, calc(100% - 9vw)); margin: 0 auto;
display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr);
gap: clamp(40px, 6vw, 90px); align-items: center;
}
.hero-title {
font: 300 clamp(48px, 6.6vw, 104px)/.94 var(--serif);
letter-spacing: -.045em; margin: 0 0 32px; max-width: 14ch; color: var(--on-deep-bright);
}
.hero-title em { font-style: italic; color: var(--aqua); }
/* The headline catches a slow pass of light, the way ink does when you tilt the page. Behind
@supports on purpose: the technique paints the text with a gradient and makes the glyphs
themselves transparent, so a browser that cannot clip a background to text would render an
invisible headline rather than a plain one. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.hero-title .mask > i {
background-image: linear-gradient(100deg, var(--on-deep-bright) 16%, #b7ecf4 40%, var(--on-deep-bright) 64%);
background-size: 240% 100%;
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: sheen 12s var(--ease-soft) 2.4s infinite;
}
/* The italic keeps its own ink: currentColor here is the aqua set just above. */
.hero-title em { -webkit-text-fill-color: currentColor; }
}
@keyframes sheen {
0%, 100% { background-position: 128% 0; }
50% { background-position: -28% 0; }
}
.hero-lead { font-size: 18.5px; line-height: 1.72; color: rgba(217, 237, 243, .8); max-width: 32em; margin: 0; }
/* Both hero controls sit on deep water, so they invert: a light outline that fills to
light on hover, with the label flipping to the dark ground colour. */
.hero .cta { border-color: rgba(207, 234, 240, .55); color: #eaf8fb; }
.hero .cta:hover > span, .hero .cta:focus-visible > span { color: var(--deep); }
.hero .ghost { color: #cfeaf0; }
.hero .ghost.is-copied { color: var(--aqua); }
.hero-acts { display: flex; align-items: center; gap: 32px; margin-top: 42px; flex-wrap: wrap; }
/* Envelope that assembles itself on load. */
.envelope {
position: relative; margin: 0; aspect-ratio: 1 / 1.14; max-width: 430px; justify-self: end; width: 100%;
perspective: 1400px;
}
.env-back, .env-sheet, .env-flap { position: absolute; }
.env-back {
inset: 44% 0 0; z-index: 4;
background: linear-gradient(168deg, #f7f2e9, #e9e2d5);
border: 1px solid rgba(9, 39, 84, .12);
box-shadow: 0 50px 95px -40px rgba(0, 0, 0, .72);
}
/* The two rear flaps, so the shape still reads as an envelope once it is open. */
.env-back::before, .env-back::after { content: ''; position: absolute; inset: 0; }
.env-back::before { clip-path: polygon(0 0, 47% 54%, 0 100%); background: rgba(9, 39, 84, .035); }
.env-back::after { clip-path: polygon(100% 0, 53% 54%, 100% 100%); background: rgba(9, 39, 84, .06); }
.env-flap {
left: 0; right: 0; top: 44%; height: 25%; z-index: 1;
background: linear-gradient(180deg, #f3ede2, #e6dece);
border: 1px solid rgba(9, 39, 84, .12);
clip-path: polygon(0 0, 100% 0, 50% 100%);
transform-origin: 50% 0; transform: rotateX(0deg);
animation: flapOpen 2.4s var(--ease-io) .5s forwards;
}
@keyframes flapOpen { to { transform: rotateX(-171deg); } }
.env-sheet {
left: 6%; right: 6%; top: 0; bottom: 40%; z-index: 2;
/* Paper island on a dark section: set the ink explicitly so nothing inside inherits
the light body colour the surrounding deep-water band uses. */
background: #fffefb; color: var(--navy); border: 1px solid rgba(9, 39, 84, .1);
padding: clamp(20px, 2.4vw, 32px);
box-shadow: 0 -8px 30px -18px rgba(7, 27, 58, .35);
transform: translate3d(0, 34%, 0);
animation: sheetRise 2.6s var(--ease-out) 1.4s forwards;
}
@keyframes sheetRise { to { transform: translate3d(0, 0, 0); } }
.env-from { margin: 0; font: 600 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--teal-ink); }
.env-sub { margin: 14px 0 22px; font: 300 clamp(19px, 1.8vw, 25px)/1.2 var(--serif); letter-spacing: -.02em; }
.env-lines { display: grid; gap: 11px; }
.env-lines span {
display: block; height: 1px; background: rgba(9, 39, 84, .16);
transform: scaleX(0); transform-origin: 0 50%;
animation: inkLine 1.2s var(--ease-out) forwards;
}
.env-lines span:nth-child(1) { animation-delay: 2.1s; }
.env-lines span:nth-child(2) { animation-delay: 2.22s; }
.env-lines span:nth-child(3) { animation-delay: 2.34s; }
.env-lines span:nth-child(4) { animation-delay: 2.46s; width: 82%; }
.env-lines span:nth-child(5) { animation-delay: 2.58s; }
.env-lines span:nth-child(6) { animation-delay: 2.7s; width: 54%; }
@keyframes inkLine { to { transform: scaleX(1); } }
.env-tag {
position: absolute; right: clamp(20px, 2.4vw, 32px); top: clamp(20px, 2.4vw, 32px); margin: 0;
font: 600 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute);
}
/* Sits astride the envelope mouth rather than on the letter, so it reads as sealing
the envelope. */
.env-seal {
position: absolute; left: 50%; top: 48%; z-index: 5;
width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%;
/* Deepened from #159fb3/#097b8f/#06606f: the old highlight put the monogram at 3.4:1
against its own wax. This keeps the lit-from-upper-left modelling and clears 4.5:1 on
every stop, including the brightest. */
background: radial-gradient(circle at 40% 34%, #0a7285, #076675 58%, #044e5c);
color: #e7fbfd; display: grid; place-items: center;
font: 600 12px/1 var(--sans); letter-spacing: .18em;
box-shadow: 0 14px 30px -16px rgba(5, 76, 92, .75), inset 0 0 0 1px rgba(231, 251, 253, .22);
transform: scale(0) rotate(-24deg);
animation: sealPress 1.1s var(--ease-out) 2.5s forwards;
}
@keyframes sealPress { to { transform: scale(1) rotate(-8deg); } }
.hero-foot { position: absolute; inset: auto 0 0; z-index: 3; border-top: 1px solid var(--deep-line); }
.hero-foot-in {
width: min(1260px, calc(100% - 9vw)); margin: 0 auto;
display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 74px;
}
.looking {
margin: 0; display: flex; align-items: baseline; gap: .45em;
font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: rgba(197, 222, 231, .66);
}
.cycle-host { color: var(--aqua); min-width: 14ch; }
.scroll-cue {
display: flex; align-items: center; gap: 12px;
font: 500 10.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(197, 222, 231, .55);
}
.scroll-cue span { display: block; width: 52px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.scroll-cue span::after {
content: ''; position: absolute; inset: 0; background: var(--aqua);
animation: cueSweep 2.6s var(--ease-io) infinite;
}
@keyframes cueSweep {
0% { transform: translateX(-100%); }
60%, 100% { transform: translateX(100%); }
}
/* ---------- Depth on the dark grounds ---------- */
/* The review came back saying the backgrounds read as flat, and they did: each dark band was
a two-stop linear gradient, one fixed radial and a film grain at 6%. Nothing in that has a
horizon or an edge, so the eye has nothing to place itself against.
Every dark band now carries two layers instead. Structure underneath — the correspondence
ruling plus the soft depth contours, masked so the band has a centre and falls away rather
than tiling evenly. Light on top — the teal bloom, and a vignette that closes the band at
its edges so the ground reads as deep water with a surface rather than as a painted panel.
Both are pseudo-elements on the band itself: no extra markup, nothing a failed script can
hide, and the vignette only ever darkens the ground under light text, so it raises the
measured contrast rather than costing any. */
/* The contact band is deliberately absent from both of these. It is the one dark band that
now carries the photograph, and the contour field is a drawing of the same subject: two
renderings of a shoaling coast, one drifting up against the scroll while the other turns,
competing for the same reading. The picture is the stronger of the two, so it replaces the
contours and the ruling there rather than being stacked on top of them, and `::before` is
free for the rotating square. The bands with no photograph keep the field unchanged. */
.hero::before, .thread::before, .about::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--rule-deep), var(--contours);
background-size: auto, 1600px 760px;
/* site.js drifts the contours against the scroll. Unset, they simply hold still. */
background-position: 0 0, 50% calc(118% + var(--drift, 0px));
background-repeat: repeat, no-repeat;
mask-image: radial-gradient(128% 88% at 58% 34%, #000 16%, transparent 80%);
-webkit-mask-image: radial-gradient(128% 88% at 58% 34%, #000 16%, transparent 80%);
}
/* Concept B lit its dark ground with a soft teal bloom that followed the cursor, and that
pointer response is most of what the page lost when it was ported as a fixed radial. The
position is a custom property now: site.js writes the pointer into it, and its fallback is
the fixed position the page had before, so nothing depends on the script arriving. */
.hero::after, .thread::after, .about::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--bloom), var(--vignette);
}
/* One hairline where paper meets ink, so the bands read as stacked sheets rather than as
two colours butted together. */
.thread, .about, .contact { box-shadow: inset 0 1px 0 rgba(150, 198, 212, .18); }
.method, .handoff, .who { box-shadow: inset 0 1px 0 rgba(9, 39, 84, .1); }
/* The paper bands get the same thinking at paper weight: the ruling of the stock, a light
falling across it from the top left, and the warmth of the sheet gathering in the opposite
corner. Enough that the page has a surface; not enough to compete with the type. */
.method > .wrap, .handoff > .wrap, .who > .wrap { position: relative; z-index: 1; }
.method::before, .handoff::before, .who::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--rule-paper);
mask-image: radial-gradient(112% 82% at 26% 18%, #000 12%, transparent 74%);
-webkit-mask-image: radial-gradient(112% 82% at 26% 18%, #000 12%, transparent 74%);
}
/* ---------- Cinematic strip ---------- */
.strip { position: relative; height: min(46vh, 420px); overflow: hidden; background: var(--deep); }
.strip-art { height: 100%; }
.strip-art > .spin { filter: saturate(106%); }
/* Concept B treats photography as art direction rather than a background wash: the image
is graded down into the navy so the band reads as a dark beat between paper sections.
The grade is lighter than it was. Stacked, the old pair reached 96% navy at the left edge
and 88% across the middle, which was the right weight for a still photograph used as a
suggestion of water and the wrong one for a picture the reader is meant to watch turn.
The band still closes to near-navy at all four edges, so it meets the paper above and
below the same way; it simply opens in the middle now. No text sits on it. */
.strip::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
background:
linear-gradient(92deg, rgba(4, 20, 47, .66) 0%, rgba(4, 20, 47, .26) 38%, rgba(4, 20, 47, .1) 70%, rgba(4, 20, 47, .44) 100%),
linear-gradient(180deg, rgba(4, 20, 47, .7), rgba(4, 20, 47, .06) 46%, rgba(4, 20, 47, .74));
}
/* ---------- Method ledger ---------- */
.method {
position: relative; padding: clamp(74px, 8.4vw, 118px) 0 clamp(64px, 7vw, 100px);
background:
radial-gradient(76% 58% at 12% 4%, rgba(255, 255, 255, .66), transparent 68%),
radial-gradient(70% 54% at 94% 98%, rgba(198, 180, 150, .3), transparent 70%),
linear-gradient(180deg, var(--bone), #efeae1);
}
.method-grid {
display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
gap: clamp(36px, 4.6vw, 78px); align-items: start;
}
.method-head { position: sticky; top: 128px; }
.method-head .lead { padding-top: 22px; border-top: 1px solid var(--line); }
.ledger { list-style: none; margin: 0; padding: 0; }
/* Each step used to stack its heading over its description in a column narrower than the
space it had, so the row was half as wide as it could be and twice as tall as it needed to
be. Heading and description now sit side by side on one row, which fills the measure and
takes roughly a third off the section's height. */
.ledger li {
display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
gap: clamp(14px, 1.8vw, 26px);
padding: clamp(20px, 2.3vw, 30px) 0; border-top: 1px solid rgba(9, 39, 84, .14);
align-items: baseline;
transition: background .6s var(--ease-out);
}
.ledger li > div {
display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
gap: 6px clamp(18px, 2.4vw, 40px); align-items: baseline;
}
.ledger li:last-child { border-bottom: 1px solid rgba(9, 39, 84, .14); }
/* The paper responds to the pointer the way the ink does: the row lifts towards white and
the step number takes the accent, so a row under the cursor is a place rather than a line
of text. */
.ledger li:hover { background: linear-gradient(90deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .34)); }
.ledger .n {
font: 300 13px/1.9 var(--sans); letter-spacing: .26em; color: var(--ink-mute);
transition: color .5s var(--ease-out);
}
.ledger li:hover .n { color: var(--teal-ink); }
.ledger h3 { margin: 0; font: 300 clamp(23px, 2.2vw, 33px)/1.12 var(--serif); letter-spacing: -.026em; }
.ledger p { margin: 0; color: #4c6083; font-size: 16px; max-width: 30em; }
/* ---------- Thread ---------- */
/* The journey section is the page's deep-water beat, so the reader crosses from paper into
ink and back out again rather than scrolling one continuous light page. */
.thread {
position: relative; padding: clamp(78px, 8.6vw, 124px) 0 clamp(70px, 8vw, 110px);
background: linear-gradient(176deg, var(--deep) 0%, #05173a 44%, var(--deep-2) 100%);
color: var(--on-deep);
}
.thread > .wrap { position: relative; z-index: 1; }
/* The four steps were a single 40-character column in a 1260px band, so more than half the
section was empty water. The section intro moves into a sticky left column and the thread
itself takes the width it was wasting, which fills the row and shortens the band. */
.thread-grid {
display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
gap: clamp(36px, 4.6vw, 82px); align-items: start;
}
.thread-grid .head { position: sticky; top: 128px; margin-bottom: 0; max-width: 32ch; }
.thread-grid .head .lead { padding-top: 22px; border-top: 1px solid var(--deep-line); }
.thread .eyebrow { color: var(--deep-eyebrow); }
.thread h2 { color: var(--on-deep-bright); }
.thread h2 em { color: var(--aqua); }
.thread .lead { color: var(--on-deep-soft); }
.thread-body { position: relative; }
.thread-line { position: absolute; left: 5px; top: 0; width: 2px; height: 100%; opacity: .55; }
/* Overriding the stroke here rather than in the markup keeps the palette in one place. */
.thread-line line { stroke: var(--aqua); }
.thread-body ol { list-style: none; margin: 0; padding: 0; }
/* Heading and copy side by side against the drawn line, so each step is a row across the
column rather than a stack down the middle of it. */
.thread-body li {
position: relative;
display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
gap: 6px clamp(18px, 2.4vw, 38px); align-items: baseline;
padding: 0 0 clamp(28px, 3.2vw, 46px) clamp(34px, 3.4vw, 56px);
}
.thread-body li:last-child { padding-bottom: 0; }
.thread-body li::before {
content: ''; position: absolute; left: 0; top: 7px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--deep); border: 1px solid var(--aqua);
transition: background .8s var(--ease-out) var(--d, 0s), box-shadow .8s var(--ease-out) var(--d, 0s);
}
.thread-body li.is-in::before { background: var(--aqua); box-shadow: 0 0 0 5px rgba(49, 191, 209, .18); }
/* A hairline out to the copy, so the dot on the line and the step it marks are one object. */
.thread-body li::after {
content: ''; position: absolute; left: 12px; top: 12px; width: clamp(14px, 1.8vw, 30px);
height: 1px; background: var(--deep-line);
}
.thread-body h3 { margin: 0; font: 300 clamp(22px, 2.1vw, 31px)/1.14 var(--serif); letter-spacing: -.026em; color: var(--on-deep-bright); }
.thread-body p { margin: 0; color: var(--on-deep-soft); font-size: 16px; max-width: 34em; }
/* ---------- Handoff contents ---------- */
.handoff {
position: relative; padding: clamp(74px, 8.4vw, 118px) 0 clamp(70px, 8vw, 110px);
background:
radial-gradient(74% 56% at 88% 6%, rgba(255, 255, 255, .72), transparent 66%),
radial-gradient(66% 52% at 6% 96%, rgba(198, 180, 150, .26), transparent 70%),
linear-gradient(180deg, #fbf9f5, var(--bone));
}
.contents { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); }
.contents article {
position: relative; border-top: 1px solid rgba(9, 39, 84, .14); padding-top: 26px;
}
/* The accent rule draws itself across the top of a column under the pointer, which is the
same gesture the glyph makes when it first scrolls into view. */
.contents article::before {
content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
background: var(--teal); transform: scaleX(var(--sx, 0)); transform-origin: 0 50%;
transition: transform .7s var(--ease-out);
}
.contents article:hover::before { --sx: 1; }
.contents .glyph {
width: 48px; height: 48px; color: var(--teal); margin-bottom: 22px;
transition: transform .8s var(--ease-out);
}
.contents article:hover .glyph { transform: translate3d(0, -4px, 0); }
.contents h3 { margin: 0 0 10px; font: 300 clamp(22px, 2vw, 29px)/1.1 var(--serif); letter-spacing: -.02em; }
.contents p { margin: 0; color: #4c6083; font-size: 15.5px; }
/* ---------- About ---------- */
.about {
position: relative; padding: clamp(78px, 8.6vw, 124px) 0;
background: linear-gradient(184deg, var(--deep-2) 0%, #051a3b 52%, var(--deep) 100%);
color: var(--on-deep);
}
.about > .wrap { position: relative; z-index: 1; }
.about .eyebrow { color: var(--deep-eyebrow); }
.about h2 { color: var(--on-deep-bright); }
.about h2 em { color: var(--aqua); }
.about .lead { color: var(--on-deep-soft); }
.about-grid {
display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
gap: clamp(36px, 5vw, 84px); align-items: end;
}
.about-grid > div:first-child .lead { padding-top: 22px; border-top: 1px solid var(--deep-line); }
.facts { margin: 0; display: grid; }
.facts > div {
position: relative; padding: 20px 0 20px 0; border-top: 1px solid var(--deep-line);
transition: padding-left .6s var(--ease-out);
}
.facts > div::before {
content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
background: var(--aqua); transform: scaleX(var(--sx, 0)); transform-origin: 0 50%;
transition: transform .7s var(--ease-out);
}
.facts > div:hover { padding-left: 14px; }
.facts > div:hover::before { --sx: 1; }
.facts dt { font: 300 23px/1.2 var(--serif); }
.facts dd { margin: 6px 0 0; color: rgba(232, 243, 247, .74); font-size: 15px; }
/* ---------- Who this is for ---------- */
/* This was the emptiest band on the page: a 40-character column of type on the left and
nothing at all for the remaining two thirds, closing with a single ghost button on its own.
The coastal photograph now takes the right of the band and bleeds off the edge of the page,
dissolving into the paper on its inner edge so it reads as a plate laid on the sheet rather
than a panel bolted to it. It is positioned out of flow, so the copy's measure is unchanged
and nothing can be pushed sideways by it. */
.who {
position: relative; overflow: hidden;
padding: clamp(66px, 7.4vw, 108px) 0;
background: radial-gradient(64% 58% at 8% 8%, rgba(255, 255, 255, .6), transparent 66%), var(--bone);
}
.who .head { margin-bottom: clamp(18px, 2vw, 26px); max-width: min(34em, 46%); }
.who .lead { max-width: 32em; }
.who-range {
position: relative; z-index: 1; max-width: min(34em, 46%);
margin: 0; color: #4c6083; font-size: 16px; line-height: 1.7;
}
.who-banner { position: relative; min-height: clamp(300px, 34vw, 460px); }
.who-banner > .wrap { position: relative; z-index: 1; }
.who-rest { position: relative; z-index: 1; }
.who-acts { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.who-plate {
position: absolute; inset: 0 0 0 auto; z-index: 0; margin: 0;
width: min(52%, 700px);
}
.who-plate > .spin { filter: saturate(98%) contrast(112%) brightness(84%); }
.who-plate::after {
content: ''; position: absolute; inset: 0;
background:
linear-gradient(94deg, var(--bone) 0%, rgba(244, 240, 233, .88) 13%, rgba(244, 240, 233, .1) 48%, transparent 100%),
linear-gradient(180deg, rgba(244, 240, 233, .34), transparent 22%, rgba(4, 20, 47, .3));
}
/* Examples of a Pursuit. Typographic, not a set of product cards. */
.method .head { max-width: 40em; }
.method .head h2 { max-width: 15em; }
.kinds {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(26px, 3vw, 44px) clamp(22px, 2.8vw, 48px);
margin: 0;
}
.kinds article {
border-top: 1px solid rgba(9, 39, 84, .14); padding-top: 16px;
transition: background .6s var(--ease-out);
}
.kinds h3 {
margin: 0 0 10px;
font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--teal-ink);
}
.kinds p { margin: 0; color: #4c6083; font-size: 16px; max-width: 36em; }
.kinds-note {
margin: clamp(32px, 4vw, 52px) 0 0; max-width: 18em;
font: 300 clamp(26px, 2.8vw, 40px)/1.25 var(--serif); letter-spacing: -.028em; color: var(--navy);
}
.kinds-aside { margin: 14px 0 0; max-width: 40em; color: #4c6083; font-size: 16px; }
/* The package questions are sentences, so they stack under the line instead of sharing a row. */
.thread-body.questions li { grid-template-columns: 1fr; gap: 8px; }
.thread .ghost { color: #cfeaf0; }
.thread-close { margin: clamp(28px, 3.4vw, 44px) 0 0 clamp(34px, 3.4vw, 56px); }
.thread-close .fine { margin: 14px 0 0; max-width: 34em; color: var(--on-deep-soft); font-size: 15px; }
/* Growth partnerships: three plain conditions, then a four-word sequence. */
.handoff .head { max-width: 40em; }
.handoff .head h2 { max-width: 14em; }
.terms { list-style: none; margin: 0 0 clamp(34px, 4vw, 52px); padding: 0; max-width: 44em; }
.terms li {
padding: 16px 0; border-top: 1px solid rgba(9, 39, 84, .14);
color: #4c6083; font-size: 16.5px;
}
.terms li:last-child { border-bottom: 1px solid rgba(9, 39, 84, .14); }
.terms strong {
display: block; margin-bottom: 4px;
font: 300 clamp(22px, 2vw, 28px)/1.25 var(--serif); letter-spacing: -.02em; color: var(--navy); font-weight: 300;
}
.arc {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2vw, 28px);
}
.arc li { position: relative; border-top: 1px solid rgba(9, 39, 84, .14); padding-top: 16px; }
.arc li:not(:last-child)::after {
content: '→'; position: absolute; right: 8px; top: 18px;
color: var(--teal); font-size: 18px;
}
.arc h3 {
margin: 0 0 8px; padding-right: 1.6em;
font: 300 clamp(26px, 2.4vw, 36px)/1.1 var(--serif); letter-spacing: -.02em;
}
.arc p { margin: 0; padding-right: 1.2em; color: #4c6083; font-size: 15.5px; max-width: 22em; }
.quiet {
margin: clamp(36px, 4.4vw, 56px) 0 0; max-width: 34em;
padding-top: 22px; border-top: 1px solid var(--line);
font-size: 16.5px; color: #4c6083;
}
.situations {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(28px, 4vw, 72px);
margin-top: clamp(36px, 5vw, 64px);
padding-top: clamp(8px, 1vw, 12px);
}
.situations h3 {
margin: 0 0 8px;
font: 300 clamp(26px, 2.4vw, 36px)/1.15 var(--serif); letter-spacing: -.02em;
}
.situations ul { list-style: none; margin: 0; padding: 0; }
.situations li {
padding: 13px 0; border-top: 1px solid rgba(9, 39, 84, .12);
color: #4c6083; font-size: 16.5px;
}
/* ---------- Contact letterhead ---------- */
/* Concept B's strongest device is a light paper object floating on deep water. The contact
block is where it earns the most, so the letter is the one bright thing on the page's
darkest ground at the exact point a reader decides to write. */
/* The water the letterhead floats on. The picture used to be one layer of this band's own
background, under two navy scrims; it is a rotating square on `::before` now, so the
scrims move up into `::after` and keep the same order over it — picture, scrims, vignette,
bloom, then the sheet. Every word in this section sits on the white letterhead, so nothing
is being read against the moving ground.
`overflow: hidden` is what stops the square spilling into the bands around it. The
letterhead's negative top margin is always smaller than this band's top padding and its
shadow reaches less far than the bottom padding, so the sheet and its shadow stay inside
the clip; that is measured rather than assumed. */
.contact {
position: relative; overflow: hidden;
padding: clamp(84px, 9.4vw, 136px) 0 clamp(78px, 8.6vw, 124px);
background: linear-gradient(180deg, var(--deep), var(--deep-2));
color: var(--on-deep);
}
.contact::after {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
/* One grade down the band rather than the old pair. A strong directional wash across a
picture that turns reads as a light source the water is sliding under; a symmetric
grade plus the vignette lets the same picture be the same picture at every angle. The
pair stacked to 86% navy behind the sheet, which left the photograph as a rumour. */
background-image: var(--bloom), var(--vignette),
linear-gradient(180deg, rgba(4, 20, 47, .9) 0%, rgba(4, 20, 47, .4) 34%, rgba(4, 20, 47, .44) 68%, rgba(5, 24, 54, .88) 100%);
}
.contact > .wrap { position: relative; z-index: 1; }
/* The sheet is laid across the boundary between the paper band above and the water below,
rather than sitting politely inside one band. That overlap is what makes it an object on a
surface, and it removes a strip of empty water at the top of the section at the same time.
Inside, the letter is a twelve-column grid: the old single left-aligned stack left the
right half of a 1000px sheet blank. */
.letterhead {
/* Paper island on a dark section; see .env-sheet. */
background: #fffefb; color: var(--navy); padding: clamp(30px, 4vw, 66px) clamp(30px, 4.2vw, 72px) clamp(28px, 3.4vw, 54px);
box-shadow: 0 70px 130px -50px rgba(0, 0, 0, .72);
max-width: 1120px; margin: calc(-1 * clamp(28px, 4vw, 74px)) auto 0; position: relative;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: clamp(20px, 2.6vw, 44px); align-items: end;
}
.letterhead::before {
content: ''; position: absolute; inset: 0 0 auto; height: 3px;
background: linear-gradient(90deg, var(--blue), var(--teal), var(--aqua));
}
.letterhead-top {
grid-column: 1 / -1;
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid rgba(9, 39, 84, .14);
font: 600 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
}
.letterhead-top span:first-child { color: var(--navy); }
.letterhead-top span:last-child { color: var(--teal-ink); }
.letterhead h2 { grid-column: 1 / 8; max-width: 20ch; margin-bottom: 0; }
.letterhead .lead {
grid-column: 8 / -1; max-width: 32em;
padding-top: 20px; border-top: 1px solid var(--line);
}
.address {
grid-column: 1 / -1;
display: inline-block; justify-self: start; margin: clamp(30px, 3.6vw, 52px) 0 0;
font: 300 clamp(34px, 5.6vw, 82px)/1 var(--serif); letter-spacing: -.045em; color: var(--blue);
overflow-wrap: anywhere;
transition: color .55s var(--ease-out);
}
.address:hover, .address:focus-visible { color: var(--teal-ink); }
.contact-acts { display: flex; align-items: center; gap: 32px; margin-top: 40px; flex-wrap: wrap; }
.letterhead .contact-acts { grid-column: 1 / 8; }
.note { margin: 36px 0 0; font-size: 13.5px; color: var(--ink-mute); max-width: 44em; }
.letterhead .note { grid-column: 8 / -1; margin-top: 40px; }
/* ---------- Footer ---------- */
.foot { background: var(--deep-2); color: #a8bdd2; padding: 42px 0; border-top: 1px solid var(--deep-line); }
.foot a { color: inherit; }
.foot a:hover, .foot a:focus-visible { color: var(--aqua); }
.foot-row {
display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
/* ---------- Standalone sample brief (/sample) ---------- */
/* The same brief as the drawer, as a document someone can be sent. Generated by
scripts/render-sample.mjs, so the content here is never edited by hand. */
/* The brief is a white sheet on deep water, so the water gets the same treatment the
homepage bands get. Fixed rather than absolute: the ground stays put while the document
scrolls over it, which is what makes the sheet read as an object on a desk. */
.sampledoc { background: linear-gradient(176deg, var(--deep) 0%, #05193a 48%, var(--deep-2) 100%); }
.sampledoc::before, .sampledoc::after {
content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
}
.sampledoc::before {
background-image: var(--rule-deep), var(--contours);
background-size: auto, 1600px 760px;
background-position: 0 0, 50% calc(112% + var(--drift, 0px));
background-repeat: repeat, no-repeat;
mask-image: radial-gradient(126% 90% at 56% 30%, #000 14%, transparent 80%);
-webkit-mask-image: radial-gradient(126% 90% at 56% 30%, #000 14%, transparent 80%);
}
.sampledoc::after {
background-image:
radial-gradient(280px circle at var(--mx) var(--my), rgba(122, 217, 226, .09), transparent 70%),
radial-gradient(620px circle at var(--mx) var(--my), rgba(49, 191, 209, .13), transparent 66%),
radial-gradient(120% 96% at 50% 46%, transparent 36%, rgba(2, 11, 28, .6));
}
.sampledoc .samplemain, .sampledoc .foot { position: relative; z-index: 1; }
/* This page opens on the light sheet rather than a dark hero, so the header keeps its dark
treatment at every scroll position instead of starting transparent. */
.sampledoc .bar {
background: rgba(4, 20, 47, .92); backdrop-filter: blur(20px) saturate(140%);
border-bottom-color: rgba(150, 198, 212, .18);
}
.samplekind {
margin: 0; font: 600 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase;
color: rgba(197, 222, 231, .72);
}
.samplemain { padding: clamp(118px, 12vw, 148px) 0 clamp(44px, 5vw, 76px); }
.samplesheet {
width: min(1180px, calc(100% - 6vw)); margin: 0 auto;
background: #fffefb; color: var(--navy);
padding: clamp(16px, 2.4vw, 30px);
box-shadow: 0 70px 130px -50px rgba(0, 0, 0, .72);
}
/* Deep links land on a card, and a fixed header would otherwise cover its heading. */
.samplesheet [id] { scroll-margin-top: 118px; }
.samplesheet .card .cta { margin-top: 16px; }
.samplenav { margin: 22px 0; padding: 22px clamp(4px, 1vw, 10px); border-block: 1px solid var(--line); }
.samplenav h2 {
margin: 0 0 16px;
font: 800 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #57718a;
}
.samplenav ol {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 18px;
}
.samplenav a {
display: flex; align-items: baseline; gap: 9px;
font-size: 14.5px; color: #35506f; border-bottom: 1px solid transparent; padding-bottom: 3px;
}
.samplenav a:hover, .samplenav a:focus-visible { color: var(--teal); border-bottom-color: var(--teal); }
.samplenav span { font: 700 10.5px/1.4 var(--sans); letter-spacing: .1em; color: var(--teal-ink); }
/* The closing invitation, as two halves across the sheet. */
.samplecta {
display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
gap: clamp(22px, 3vw, 52px); align-items: center;
padding: clamp(26px, 3.2vw, 44px) clamp(4px, 1vw, 10px) clamp(6px, 1vw, 12px);
}
.samplecta h2 { max-width: 24ch; margin-bottom: 18px; }
.samplecta .lead { max-width: 34em; }
.samplecta .note { margin-top: 22px; }
/* The address and its controls become an object on the sheet, which is also what stops the
document ending on a band of empty paper. */
.samplecta-do {
padding: clamp(20px, 2.6vw, 36px);
border: 1px solid rgba(11, 95, 179, .18);
background: linear-gradient(168deg, rgba(11, 95, 179, .05), rgba(8, 141, 163, .08));
}
.samplecta-do .address { margin: 0; font-size: clamp(30px, 3.8vw, 54px); }
.samplecta-do .contact-acts { margin-top: clamp(18px, 2vw, 28px); gap: clamp(18px, 2.4vw, 30px); }
@media (max-width: 860px) {
.samplecta { grid-template-columns: 1fr; gap: clamp(22px, 4vw, 34px); }
}
@media (max-width: 1040px) {
.samplenav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
.samplenav ol { grid-template-columns: 1fr; }
.samplekind { display: none; }
}
/* ---------- Sample-brief drawer ---------- */
/* A native