/* AgentInsurance — v0 identity page
Original implementation. Idiom: warm paper, hairline rules, segmented
chrome, specimen-scale type. Fonts: General Sans + Sentient (Fontshare,
ITF Free Font License — free for commercial use), local woff2. */
:root{
--paper:#faf7ef;
--paper-deep:#f3efe2;
--ink:#141413;
--ink-soft:#3d3d3a;
--muted:#6f6b60;
--hairline:#e3ddcc;
--gold:#efdfa7;
--ease:cubic-bezier(.16,1,.3,1);
--gutter:clamp(20px,4vw,48px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:var(--paper);
color:var(--ink);
font:400 17px/1.6 'General Sans',system-ui,sans-serif;
-webkit-font-smoothing:antialiased;
min-height:100svh;
display:flex;
flex-direction:column;
}
::selection{background:var(--gold);color:var(--ink)}
.mono{
font-family:ui-monospace,'SF Mono',Menlo,monospace;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--muted);
}
/* ---------- chrome ---------- */
header{
display:flex;
align-items:stretch;
border-bottom:1px solid var(--hairline);
}
.wordmark{
padding:22px var(--gutter);
font-weight:600;
font-size:19px;
letter-spacing:-.02em;
flex:1;
white-space:nowrap;
}
.wordmark sup{font-size:9px;letter-spacing:0;vertical-align:super}
nav{display:flex}
nav a{
display:flex;
align-items:center;
gap:10px;
/* six items now. Without this the two-word labels broke over two lines at
~900px and the mono numeral collided with them; single-word labels plus
nowrap keep the segmented chrome legible down to where nav hides. */
white-space:nowrap;
padding:0 clamp(16px,2.6vw,34px);
border-left:1px solid var(--hairline);
color:var(--ink);
text-decoration:none;
font-size:14px;
font-weight:500;
transition:background .18s var(--ease),color .18s var(--ease);
}
nav a .n{
font-family:ui-monospace,'SF Mono',Menlo,monospace;
font-size:10px;
color:var(--muted);
transform:translateY(-5px);
transition:color .18s var(--ease);
}
nav a:hover{background:var(--ink);color:var(--paper);--on-ink:1}
nav a:hover .n{color:var(--gold)}
/* ---------- hero ----------
THE FIRST SCREEN IS A BOX, NOT A CALCULATION. `.screen` wraps the header and
the hero and is exactly 100svh; main takes the remainder with flex:1. The
previous version subtracted a hardcoded 66px header from 100svh — the header
is really ~74px, so every page was 8px taller than the viewport and the CTAs
were pushed under the fold by a number nobody could see. Measure by layout,
never by a constant that has to be kept in sync with padding. */
.screen{min-height:100svh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;min-height:0}
.labels{
display:flex;
flex-wrap:wrap;
gap:12px 0;
justify-content:space-between;
padding:clamp(10px,1.7vh,16px) var(--gutter);
border-bottom:1px solid var(--hairline);
}
.hero{
/* Top padding does the vertical placement. Raised with the type size so the
bigger headline sits lower in the fold rather than climbing toward the nav. */
padding:clamp(40px,9vh,150px) var(--gutter) clamp(10px,1.5vh,24px);
}
h1{
font-weight:500;
/* SIZED BY WIDTH *AND* HEIGHT. 11vw alone is 158px at a 1440-wide window
whatever its height, so on a 740px-tall laptop the headline plus standfirst
came to 443px of type and shoved the CTAs off-screen. min() caps the display
type at a fraction of the viewport height, so a short window gets smaller
type instead of a lost call to action — continuous, with no breakpoint cliff.
Raised from 8.4vw/12.3svh when the headline went from seven words to three:
a short line can carry much more size before it wraps or crowds the globe. */
font-size:clamp(52px,min(11vw,16svh),176px);
line-height:.98;
letter-spacing:-.038em;
max-width:12.5em;
}
/* Scoped to h1 until now, which meant every .serif accent written into an h2 —
"by name.", "in development." — silently rendered as plain sans. */
h1 .serif,h2 .serif{
font-family:'Sentient',Georgia,serif;
font-style:italic;
font-weight:400;
letter-spacing:-.015em;
}
h1 .w{
display:inline-block;
opacity:0;
filter:blur(8px);
transform:translateY(.12em);
animation:focus .7s var(--ease) forwards;
animation-delay:var(--d,0s);
}
@keyframes focus{to{opacity:1;filter:blur(0);transform:none}}
.standfirst{
padding:clamp(10px,1.8vh,26px) var(--gutter) clamp(16px,3vh,44px);
display:grid;
grid-template-columns:minmax(0,880px) 1fr;
gap:32px;
}
.cases{
overflow:hidden;
padding:10px 0 22px;
opacity:0;
filter:blur(6px);
animation:focus .8s var(--ease) forwards;
animation-delay:2.6s;
mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent);
}
.cases-track{
display:flex;
width:max-content;
animation:marquee 96s linear infinite;
}
.cases:hover .cases-track{animation-play-state:paused}
.cases-set{
display:flex;
gap:10px;
padding-right:10px;
}
.cases span{
padding:9px 16px;
border:1px solid #d8d1bd;
border-radius:3px;
background:var(--paper);
font-family:ui-monospace,'SF Mono',Menlo,monospace;
font-size:10.5px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
white-space:nowrap;
}
@keyframes marquee{to{transform:translateX(-50%)}}
.standfirst p{
/* same width-and-height rule as h1 — at 34.6px this paragraph ran to four
lines and cost 196px on its own */
font-size:clamp(19px,min(2.4vw,3.8svh),36px);
line-height:1.42;
letter-spacing:-.014em;
color:var(--ink-soft);
opacity:0;
filter:blur(6px);
transform:translateY(10px);
animation:focus .8s var(--ease) forwards;
animation-delay:1.05s;
}
/* Two paragraphs now: the problem, then what we do about it. The lede carries
the weight in --ink; the second drops to --ink-soft so the pair reads as a
statement and its consequence rather than two competing sentences. The
staggered animation delay keeps the original focus-in feel. */
/* The section is a 2-col grid (copy | space the globe sits in). Two paragraphs
therefore land side by side by default, and the second one runs under the
globe. Pin both to column one so they stack. */
.standfirst p{
grid-column:1;
}
.standfirst p + p{
margin-top:.5em;
}
.standfirst .sf-lede{
color:var(--ink);
animation-delay:1.05s;
}
.standfirst .sf-lede + p{
animation-delay:1.22s;
}
.standfirst p em{
font-family:'Sentient',Georgia,serif;
font-style:italic;
}
/* ---------- schedule (the policy-schedule strip) ---------- */
.schedule{border-bottom:1px solid var(--hairline)}
.row{
display:grid;
grid-template-columns:minmax(120px,220px) 1fr;
gap:24px;
padding:18px var(--gutter);
border-top:1px solid var(--hairline);
align-items:baseline;
}
.row:first-child{border-top:none}
.row .v{font-size:15.5px;font-weight:500;letter-spacing:-.005em}
.row .v span{color:var(--muted);font-weight:400}
/* ---------- actions ---------- */
.actions{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:20px 28px;
padding:clamp(30px,5vh,54px) var(--gutter);
border-bottom:1px solid var(--hairline);
}
.btn{
display:inline-flex;
align-items:center;
gap:10px;
height:46px;
padding:0 26px;
border-radius:999px;
background:var(--ink);
color:var(--paper);
font:500 15px/1 'General Sans',sans-serif;
letter-spacing:-.005em;
text-decoration:none;
border:1px solid var(--ink);
transition:background .16s var(--ease),transform .16s var(--ease);
}
.btn:hover{background:var(--ink-soft)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{
outline:none;
box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink);
}
.link{
color:var(--ink);
text-decoration:none;
font-weight:500;
font-size:15px;
background-image:linear-gradient(currentColor,currentColor);
background-repeat:no-repeat;
background-position:0 100%;
background-size:0% 1.5px;
transition:background-size .35s var(--ease);
padding-bottom:3px;
}
.link:hover{background-size:100% 1.5px}
.link .soon{color:var(--muted);font-weight:400}
/* ---------- bottom CTAs ---------- */
.cta{
margin-top:auto;
display:flex;
justify-content:center;
gap:16px;
padding:clamp(12px,2.2vh,24px) var(--gutter) clamp(20px,4vh,52px);
opacity:0;
filter:blur(6px);
animation:focus .8s var(--ease) forwards 2.2s;
}
.cta a{
display:flex;
align-items:center;
justify-content:center;
padding:24px 48px;
border:1px solid var(--ink);
background:var(--paper);
color:var(--ink);
text-decoration:none;
font:500 14px/1 'General Sans',sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
transition:background .18s var(--ease),color .18s var(--ease);
}
.cta a:hover{background:var(--ink);color:var(--paper);--on-ink:1}
.cta a.primary{background:var(--ink);color:var(--paper);--on-ink:1}
.cta a.primary:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.cta a:active{transform:scale(.98)}
.cta a:focus-visible{
outline:none;
box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink);
position:relative;
z-index:1;
}
/* ---------- footer ---------- */
footer{
padding:18px var(--gutter) 26px;
display:flex;
flex-direction:column;
gap:10px;
}
footer .legal{
font-size:12.5px;
color:var(--muted);
max-width:72ch;
line-height:1.55;
}
/* ---------- policies ----------
Discrete tiles inset to the gutter and separated by a gap, square-cornered
like the header nav and the CTA buttons, with a whole-tile invert on hover
and the mono numeral turning gold. The plate goes NEGATIVE on that invert —
multiply on paper would render the engraving as a black rectangle against
ink, so hover swaps to screen + invert and the etching reads light-on-dark. */
.policies{border-top:1px solid var(--hairline)}
/* ONE LINE, FULL WIDTH. The head was a two-column grid with the headline in the
left half and a lede in the right, so every h2 wrapped to two or three lines
inside a 678px column. Both ledes are gone, so the head is one column and each
headline is sized to fill the measure on a single line — which is what a
specimen page is for. The size is per-section because the strings differ in
length: one size cannot fill the same width with 24 characters and with 38. */
.policies-head{
padding:clamp(44px,8vh,96px) var(--gutter) clamp(22px,3.4vh,38px);
}
.policies-head h2{
font-weight:500;
/* one word now, so it is set as a specimen rather than stretched to a measure */
font-size:clamp(46px,12vw,186px);
line-height:1.02;
letter-spacing:-.034em;
margin-top:12px;
}
#how .policies-head h2{
font-size:clamp(30px,4.6vw,70px);
letter-spacing:-.03em;
}
#gap .policies-head h2{
font-size:clamp(30px,4.85vw,74px); /* the longer headline — 38 ch */
letter-spacing:-.03em;
}
.policies-head .lede{
font-size:clamp(16px,1.35vw,19px);
line-height:1.55;
color:var(--ink-soft);
/* NO max-width. The grid column already limits this to half the page, and a
52ch cap on top of it computed to 575px inside a 678px column — so the
paragraph stopped 103px short of the gutter while the cards below it landed
exactly on it, and the right edge of the section looked broken. One
mechanism governs the measure: the column. */
}
/* Discrete tiles, inset to the page gutter and separated by a gap — which is
literally the `.cta` rule (gap:16px, each button its own 1px box) at card
scale. The first version shared hairlines edge-to-edge like the header nav;
that reads as chrome, and these are objects on the page, not chrome. */
.policy-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
/* RESTORED. These two lines were lost when the two-card variant was removed:
adding `.policy-grid.two` had closed this rule early, so the gap and the
gutter inset ended up inside the variant and went out with it. The tiles ran
edge to edge with shared hairlines again — back to reading as chrome rather
than as objects on the page, which is the thing this rule exists to fix. */
gap:clamp(14px,1.5vw,22px);
padding:0 var(--gutter) clamp(18px,2.4vh,32px);
}
/* TWO-UP VARIANT, AS ITS OWN RULE. The last time a two-column variant was added
it was done by closing `.policy-grid` early, which left the gap and the gutter
inset inside the variant — and they went out with it when three cards came
back, so the tiles ran edge to edge for several commits. A variant overrides
one property; it does not take custody of the base rule's. */
.policy-grid.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.policy{
display:flex;
flex-direction:column;
border:1px solid var(--hairline);
transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.policy:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);--on-ink:1}
/* the live plate canvas sits exactly where the still did, so swapping one for
the other cannot shift the card's height */
.policy-plate{position:relative}
/* the live sheet is absolutely placed over the still, which keeps its own box —
so the card height is set by the ![]()
and cannot shift when WebGL comes up
or fails */
.plate-3d{
position:absolute;
inset:0 clamp(14px,2vw,26px) auto;
display:block;
width:calc(100% - 2*clamp(14px,2vw,26px));
height:auto;
/* the canvas renders white paper opaquely; the browser multiplies it onto the
page, exactly as it did for the still it replaced */
}
/* HOVER GOES NEGATIVE, EXACTLY AS THE STILL DOES. This was `opacity:.28` on the
claim that a canvas cannot be inverted by CSS. It can — the canvas renders the
same white-paper-and-dark-ink image the JPEG held, so the same treatment
applies: screen + invert turns the engraving light-on-dark. Multiply against an
ink-filled tile is black times anything, which erased the plate completely;
fading it only made the erasure deliberate. */
.policy:hover .plate-3d{
filter:invert(1);
}
/* THE TITLE READS FIRST. The kicker and heading were under the plate, so a
reader met a picture before they knew what it was about. They now sit in their
own block at the top of the tile and the plate follows, which also gives the
engraving something to be an illustration OF. */
.policy-head{
padding:clamp(18px,2vw,26px) clamp(18px,2vw,28px) clamp(11px,1.3vw,16px);
display:flex;
flex-direction:column;
gap:7px;
}
.policy-plate{
padding:0 clamp(14px,2vw,26px);
overflow:hidden;
}
.policy-plate img{
display:block;
width:100%;
height:auto;
aspect-ratio:3/2;
object-fit:cover;
transition:filter .18s var(--ease);
}
/* the ink inverts on an ink tile. With real alpha this is all it takes: invert
flips the ink to light and leaves transparency untouched, so no blend mode is
involved and no stacking context can break it. */
.policy:hover .policy-plate img{filter:invert(1)}
.policy-body{
padding:clamp(13px,1.5vw,19px) clamp(18px,2vw,28px) clamp(22px,2.6vw,32px);
display:flex;
flex-direction:column;
gap:10px;
flex:1;
}
.policy-n{
font-size:10px;
color:var(--muted);
transition:color .18s var(--ease);
}
.policy:hover .policy-n{color:var(--gold)}
.policy h3{
font-weight:500;
font-size:clamp(20px,1.7vw,25px);
line-height:1.15;
letter-spacing:-.02em;
}
.policy p{
font-size:15px;
line-height:1.6;
color:var(--ink-soft);
transition:color .18s var(--ease);
}
.policy:hover p{color:var(--paper-deep)}
.policy-tag{
margin-top:auto;
padding-top:14px;
font-size:10px;
color:var(--muted);
transition:color .18s var(--ease);
}
.policy:hover .policy-tag{color:var(--gold)}
.policies-status{
padding:clamp(14px,1.9vh,24px) var(--gutter) clamp(24px,3.4vh,40px);
font-size:13.5px;
line-height:1.6;
color:var(--muted);
max-width:78ch;
}
/* ═══════════════════════════════════════════════════════════════════════════
UNUSED BUT KEPT — the section vocabulary, waiting for markup.
---------------------------------------------------------------------------
The page is deliberately back to the hero plus the policy tiles, to be
rebuilt a section at a time. Everything below this line up to the globe has
no markup on the page right now:
.harms .harm — REMOVED two-up, deleted with its section
.plate .plate-note a wide engraved figure + note (the evidence)
.pull .pull-src .verbatim the one ink-filled quote block (the evidence)
.filing .frow .filing-cap the dated document ledger (the evidence)
.sched .srow .deliver schedule-of-cover rows (the programme)
.scope the what-we-will-not-touch note (the programme)
.policies-status the not-available-today notice (the programme)
.policy-grid.duo two-up cards (who it's for)
.lede the head's right-hand column (both sections)
.band, .trio and .tcard came BACK into use when the gap section returned,
which is the argument for keeping this range rather than deleting it.
Kept rather than deleted on purpose: these are the design language the next
sections will be built from, and regenerating them costs more than the ~200
lines cost to carry. `.filing-cap` in particular is the caption style every
band used. The markup that exercised each one is in d07b89d; the filing rows
are in a43482d.
If a rule here is still unused when the site is finished, delete it then.
═══════════════════════════════════════════════════════════════════════════ */
/* ---------- explanatory bands (02 the gap · 04 what goes wrong) ------------
Two rules govern weight below the fold, and the distinction is deliberate:
AN INK FILL MEANS WE SELL IT. The policy tiles invert on hover because they
are the offer; these cards are prose the reader has to get through first, so
they take the same square hairline box and the `.frow` paper-deep hover
instead. Inverting everything that moves would make the page shout and would
stop the tiles below from meaning anything. */
.band{border-top:1px solid var(--hairline)}
.trio{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(14px,1.5vw,22px);
padding:0 var(--gutter) clamp(22px,3vh,36px);
}
.tcard{
border:1px solid var(--hairline);
padding:clamp(20px,2vw,30px) clamp(18px,1.9vw,28px) clamp(22px,2.2vw,32px);
display:flex;
flex-direction:column;
gap:9px;
transition:background .18s var(--ease);
}
.tcard:hover{background:var(--paper-deep)}
.tcard-k{color:var(--muted);font-size:10px}
.tcard h3{
font-weight:500;
font-size:clamp(19px,1.6vw,24px);
line-height:1.16;
letter-spacing:-.02em;
}
.tcard p{font-size:15px;line-height:1.6;color:var(--ink-soft)}
/* The empty slot in 02 — named, not branded. Same inset rule the contested
evidence row uses, so "nothing answers this" reads as a finding.
SCOPED TO #gap. It was written unscoped first and immediately marked the third
card of the scenarios trio as well, where a flag means nothing — a decoration
that reads as a signal is worse than no signal. */
/* MARKED BY ITS BORDER, NOT FILLED. "Neither" is the answer this section exists
to deliver, so it needs emphasis — but filling it with ink made it the loudest
thing on a page whose whole manner is hairlines, and it stopped reading as one
of three comparable things. A doubled ink rule says "this one" without shouting:
the border colour plus a 1px inset, which is two hairlines rather than a slab. */
.tcard-mark{
border-color:var(--ink);
box-shadow:inset 0 0 0 1px var(--ink);
}
/* ---------- specimen of cover (inside 05) ----------
Same four-column grid as the evidence ledger, on purpose: a reader who has
just read the filings recognises the shape and knows to read it as a
document. Nothing collapses here — a schedule of cover exists to be read in
full, and the right-hand column IS the argument, so it is set in ink rather
than muted. */
.sched{
margin:0 var(--gutter) clamp(22px,3vh,34px);
border:1px solid var(--hairline);
}
.srow{
display:grid;
grid-template-columns:minmax(78px,96px) minmax(126px,190px) minmax(0,1fr) minmax(120px,196px);
gap:clamp(14px,2vw,32px);
padding:clamp(12px,1.3vw,16px) clamp(14px,1.6vw,24px);
border-top:1px solid var(--hairline);
align-items:baseline;
}
.srow:first-child{border-top:none}
.srow-t{color:var(--muted);white-space:nowrap}
.srow-h{font-size:16px;font-weight:500;letter-spacing:-.014em;line-height:1.3}
.srow-v{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.srow-s{color:var(--ink);line-height:1.6;font-size:10px;text-transform:none;letter-spacing:.05em}
/* the deliverables table shares the schedule's grid but its left column names an
artifact rather than a side of the loss, so it carries ink weight and the
status column drops back to muted — the argument in that table is the list
itself, not the right-hand column */
.deliver .srow-t{color:var(--ink)}
.deliver .srow-s{color:var(--muted)}
/* The refusal, stated in the same voice as the offer. A page that lists what it
will not touch is making a checkable claim; one that lists only appetite is
making none. */
.scope{
margin:0 var(--gutter) clamp(10px,1.4vh,18px);
padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,28px);
border-left:3px solid var(--hairline);
background:var(--paper-deep);
font-size:15px;
line-height:1.6;
color:var(--ink-soft);
max-width:96ch;
}
.scope b{color:var(--ink);font-weight:500}
/* ---------- section plate (02) ----------
The one figure below the fold. Two columns like `.pull` so the engraving has
an argument beside it rather than a caption under it, and the note names the
five families the windows correspond to — which is the product thesis stated
as a description of a picture. Multiply lays the ink on the paper; the plate
is white-pointed to a true 255 so no rectangle shows. */
.plate{
margin:0 var(--gutter) clamp(26px,3.6vh,44px);
display:grid;
/* The plate carries this section, so it gets the width. An earlier 1.15/.85
split with align-items:center rendered the engraving small AND floated the
note in mid-air beside it, leaving a dead field between the two. Anchoring
the note to the plate's baseline pairs them. */
grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
gap:clamp(20px,3vw,48px);
align-items:end;
}
.plate img{
display:block;
width:100%;
height:auto;
}
.plate-note p{
font-size:clamp(16px,1.35vw,19px);
line-height:1.55;
color:var(--ink-soft);
}
.plate-note .mono{
display:block;
margin-top:clamp(14px,1.6vw,22px);
text-transform:none;
letter-spacing:.05em;
line-height:1.6;
}
/* the emblem sits above the kicker, sized so a contour drawing still resolves —
below about 48px this idiom turns to mush, which is why the peril list uses a
smaller crop of a simpler subject rather than these */
.tcard-i{
display:block;
width:clamp(52px,4.4vw,68px);
height:auto;
margin-bottom:4px;
}
.policy:hover .tcard-i,.tcard:hover .tcard-i{filter:none}
/* ---------- how it works (02) ----------
The same three-up as the comparison, with two differences that matter: the
steps are NUMBERED BY AVAILABILITY rather than by preference, and each carries
its capabilities as chips so the row can be skimmed without reading the prose.
Step one is marked available and the other two in development, in the label —
which is a stronger honesty signal than a disclaimer underneath, because a
reader takes it in at the same moment as the claim. */
.steps{align-items:stretch}
.step{display:flex;flex-direction:column}
.step p{flex:1}
.chips{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:clamp(12px,1.4vw,18px);
}
.chips li{
padding:6px 11px;
border:1px solid var(--hairline);
color:var(--muted);
font-size:9.5px;
letter-spacing:.1em;
white-space:nowrap;
}
/* step one is the one you can actually buy, so its label is ink not muted */
.step:first-child .tcard-k{color:var(--ink)}
/* ---------- who we are (04) ----------
THE FACE AND THE NAME TOGETHER. A portrait stacked above a name reads as a
caption; side by side it reads as a person. So the head is a two-column grid —
portrait, then name and link — and the bio runs the full column width beneath
it, where a long measure is an advantage rather than a problem. */
/* the head carries a shared paragraph: the two of us together before either of us
separately, because a founder section that opens with two CVs never says what
the pair adds up to */
.about-head{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:clamp(20px,4vw,64px);
align-items:end;
padding:clamp(44px,8vh,96px) var(--gutter) clamp(22px,3.4vh,38px);
}
.about-lede{
font-size:clamp(16px,1.35vw,19px);
line-height:1.55;
color:var(--ink-soft);
}
.about-head h2{
font-weight:500;
font-size:clamp(34px,7.6vw,116px);
line-height:1.02;
letter-spacing:-.034em;
margin-top:12px;
}
.people{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(20px,3vw,52px);
padding:0 var(--gutter) clamp(34px,5vh,64px);
}
.person{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.person-head{
display:grid;
grid-template-columns:clamp(88px,10.5vw,142px) minmax(0,1fr);
gap:clamp(16px,2vw,28px);
align-items:center;
}
.person-face img{
display:block;
width:100%;
height:auto;
/* multiply, like every other plate: the portrait's paper is a true 255 so the
page shows through and no square appears behind the head */
}
.person h3{
font-weight:500;
font-size:clamp(21px,1.9vw,27px);
line-height:1.14;
letter-spacing:-.022em;
margin:5px 0 6px;
}
.person p{font-size:15.5px;line-height:1.6;color:var(--ink-soft)}
.person-links{display:block;font-size:10px}
.person-links a{
color:var(--muted);
text-decoration:none;
border-bottom:1px solid var(--hairline);
padding-bottom:2px;
transition:color .18s var(--ease),border-color .18s var(--ease);
}
.person-links a:hover{color:var(--ink);border-color:var(--ink)}
/* ---------- the intake form ----------
Rewritten after looking at it: the first version was a specimen page with
inputs bolted on. Three things were wrong and all three cost legibility.
1. A BARE HAIRLINE IS NOT A FIELD. An underline with a gap above it reads as
empty page — there was nothing to tell a reader where to click, and the
input area was invisible until they found the rule. The fields carry a
paper-deep surface now, so a field looks like somewhere you write.
2. THE LABEL WAS MILES FROM ITS INPUT. A 10px label with 7px of gap and then
44px of empty field belongs to nothing. Tightened, and the label sits on
the field it names.
3. "REQUIRED" TWELVE TIMES, IN A COLOUR CLOSE TO THE PAPER. Marking the rule
rather than the exception, illegibly. It is said once at the top and only
the optional field is marked. */
.form-band{border-top:1px solid var(--hairline)}
/* a form page is not a specimen: the headline gets you to the first field, it
does not perform */
/* the head holds two stacked children here and .policies-head has no gap of its
own, so the lede was sitting on the headline's baseline */
.form-band .policies-head{display:grid;gap:clamp(12px,1.5vh,20px)}
.form-band .policies-head h2{font-size:clamp(30px,3.6vw,52px);letter-spacing:-.028em}
.form-band .about-lede{font-size:clamp(15px,1.2vw,17px)}
.fhint{
display:block;
padding:0 var(--gutter) clamp(18px,2.2vh,26px);
color:var(--muted);
text-transform:none;
letter-spacing:.06em;
}
.form{padding:0 var(--gutter) clamp(40px,6vh,72px)}
.fset{border:none;margin:0 0 clamp(22px,3vh,36px)}
.fset legend{
padding:0 0 clamp(10px,1.2vh,14px);
color:var(--ink);
font-size:10px;
}
.fgrid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(14px,1.6vw,20px) clamp(14px,1.6vw,20px);
}
.f{display:flex;flex-direction:column;gap:5px}
.f-wide{grid-column:1/-1}
.f > .mono{color:var(--muted);font-size:10px}
.f > .mono i{font-style:normal;color:var(--hairline);letter-spacing:.1em}
.f input,.f select,.f textarea{
font:400 16px/1.45 'General Sans',system-ui,sans-serif;
color:var(--ink);
background:var(--paper-deep);
border:1px solid transparent;
border-bottom-color:var(--hairline);
border-radius:0;
padding:12px 14px;
width:100%;
transition:background .18s var(--ease),border-color .18s var(--ease);
-webkit-appearance:none;
appearance:none;
}
.f textarea{resize:vertical;line-height:1.55}
.f select{
background-image:
linear-gradient(45deg,transparent 50%,var(--muted) 50%,var(--muted) calc(50% + 1px),transparent calc(50% + 1px)),
linear-gradient(-45deg,transparent 50%,var(--muted) 50%,var(--muted) calc(50% + 1px),transparent calc(50% + 1px));
background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;
background-size:5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}
/* readable, rather than a whisper the colour of the page */
.f input::placeholder,.f textarea::placeholder{color:var(--muted);opacity:.7}
.f input:hover,.f select:hover,.f textarea:hover{border-bottom-color:var(--muted)}
.f input:focus,.f select:focus,.f textarea:focus{
outline:none;
background:var(--paper);
border-color:var(--ink);
}
.f-bad input,.f-bad select,.f-bad textarea{border-color:var(--ink-soft)}
.fradios{display:flex;flex-wrap:wrap;gap:8px}
.fradio{
display:inline-flex;align-items:center;gap:9px;cursor:pointer;
font-size:15px;
padding:11px 16px;
background:var(--paper-deep);
border:1px solid transparent;
border-bottom-color:var(--hairline);
transition:background .18s var(--ease),border-color .18s var(--ease);
}
.fradio:hover{border-bottom-color:var(--muted)}
.fradio input{
appearance:none;-webkit-appearance:none;
width:12px;height:12px;flex:none;
border:1px solid var(--muted);
border-radius:50%;
transition:box-shadow .18s var(--ease),border-color .18s var(--ease);
}
.fradio input:checked{border-color:var(--ink);box-shadow:inset 0 0 0 3px var(--paper-deep),inset 0 0 0 9px var(--ink)}
.fradio:has(input:checked){background:var(--paper);border-color:var(--ink)}
.fradio input:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.fnote{
margin-top:clamp(12px,1.4vh,18px);
font-size:14px;line-height:1.6;color:var(--muted);max-width:82ch;
}
.fsubmit{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(8px,1vh,14px)}
.fbtn{
padding:19px 44px;
border:1px solid var(--ink);
background:var(--ink);
color:var(--paper);
font:500 14px/1 'General Sans',sans-serif;
text-transform:uppercase;
letter-spacing:.1em;
cursor:pointer;
transition:background .18s var(--ease);
}
.fbtn:hover{background:var(--ink-soft);border-color:var(--ink-soft)}
.fbtn:active{transform:scale(.98)}
.fbtn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.fsmall{font-size:13px;line-height:1.6;color:var(--muted);max-width:48ch}
.fsmall a{color:var(--ink)}
.wordmark a{color:inherit;text-decoration:none}
@media (max-width:760px){
.fgrid{grid-template-columns:1fr}
.fradios{flex-direction:column;align-items:stretch}
}
/* ---------- scroll reveal ----------
The hero's entrance, dialled down. It blurs 8px over .7s because it is the
first thing anyone sees; a section arriving mid-scroll gets 5px over .62s,
since the reader is already moving and a heavy entrance halfway down a page
reads as the page being slow rather than as the page being considered.
The class is added by JS, so no-JS gets the finished page and never a blank
one — the same contract the plates keep with their ![]()
. */
.rv{
opacity:0;
filter:blur(5px);
transform:translateY(14px);
transition:opacity .62s var(--ease) var(--rv-d,0s),
filter .62s var(--ease) var(--rv-d,0s),
transform .62s var(--ease) var(--rv-d,0s);
/* the transform is animated, so give the compositor warning and take it back
the moment it lands — a page-long will-change is a memory leak by another name */
will-change:opacity,transform,filter;
}
.rv-in{
opacity:1;
filter:blur(0);
transform:none;
will-change:auto;
}
@media (prefers-reduced-motion:reduce){
.rv,.rv-in{opacity:1;filter:none;transform:none;transition:none}
}
/* a real subheading, not a caption. These were 10px mono lines doing the work of
a heading — too quiet to organise a section that now runs to three blocks. The
kicker keeps the mono voice and the heading carries the weight. */
.subhead{
padding:clamp(10px,1.4vh,18px) var(--gutter) clamp(14px,1.8vh,22px);
display:flex;
flex-direction:column;
gap:7px;
}
.subhead h3{
font-weight:500;
font-size:clamp(21px,2.1vw,31px);
line-height:1.16;
letter-spacing:-.022em;
max-width:34ch;
}
/* ---------- the peril list (03) ----------
Two columns rather than one: eight single-line items stacked would be a very
tall block for very little text, and the pair of columns lets the whole list
be taken in at once. Hairlines only — the box and the row rules are the same
furniture the evidence ledger used, so it reads as a schedule and not as
marketing bullets. */
.perils{
margin:0 var(--gutter) clamp(30px,4.5vh,58px);
border:1px solid var(--hairline);
list-style:none;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
}
.peril{
display:flex;
gap:14px;
align-items:center;
padding:clamp(13px,1.5vw,18px) clamp(16px,1.9vw,26px);
border-top:1px solid var(--hairline);
font-size:15.5px;
line-height:1.5;
color:var(--ink-soft);
transition:background .18s var(--ease);
}
/* the first row of EACH column already has the box's own edge above it */
.peril:nth-child(-n+2){border-top:none}
.peril:nth-child(even){border-left:1px solid var(--hairline)}
.peril:hover{background:var(--paper-deep)}
/* THE TYPE COLUMN, WHICH IS THE USEFUL HALF OF A COVERAGE SCHEDULE. The rows
used to carry a numeral, which told a reader nothing they could act on. Which
side of the loss it falls on ties every row back to one of the three policies
above it, and it is the distinction every wording on the market turns on. */
.peril-t{flex:1;min-width:0}
.peril-p{
flex:none;
color:var(--muted);
font-size:10px;
text-transform:none;
letter-spacing:.06em;
white-space:nowrap;
}
/* the smallest emblem on the page. A contour drawing does not survive below
~40px, so these were generated as ONE simple object each rather than as a
scene, and processed at a higher density gain than anything else here. */
.peril-i{
flex:none;
width:clamp(34px,2.9vw,44px);
height:auto;
}
/* ---------- the evidence ----------
Cards above, DOCUMENT here. The policies section argues in pictures; this one
argues in paperwork, so it is set as a filing: dated rows in one bordered
block, inset to the same gutter as the tiles. The quote runs FIRST — it is
the hardest thing on the page and nothing preceding it earns a reader's
patience — then the rows produce the receipts, ordered by date and nothing
else, so the reader sees 2023 → this month without being told to.
An earlier pass opened with an engraved plate, two paragraphs about the
silence in the base forms, and a four-up band of summary statistics. All of
it was true and all of it delayed the evidence, so it is gone; .plate and
.filing-sum live in 0ded0aa if a later section wants a figure or a stat band. */
.wave{border-top:1px solid var(--hairline)}
.filing-cap{
display:block;
padding:0 var(--gutter) 12px;
text-transform:none;
letter-spacing:.05em;
}
.filing{
margin:0 var(--gutter) clamp(48px,7vh,88px);
border:1px solid var(--hairline);
}
.frow{
display:grid;
grid-template-columns:minmax(74px,86px) minmax(116px,178px) minmax(0,1fr) minmax(96px,158px);
gap:clamp(14px,2vw,32px);
padding:clamp(13px,1.5vw,19px) clamp(14px,1.6vw,24px);
border-top:1px solid var(--hairline);
align-items:start;
transition:background .18s var(--ease);
}
/* .filing already draws the box; without this the first row doubles that line */
.frow:first-child{border-top:none}
.frow-d{color:var(--ink);white-space:nowrap}
.frow-f{color:var(--ink);text-transform:none;letter-spacing:.04em;line-height:1.5}
/* THE ROW'S CLAIM, ABOVE ITS EVIDENCE. Read the bold lines alone and you get the
mechanism as a sentence — define it broadly, name what agents do, make it
standard, charge the same, and it lands on a golf club. The rows used to state
only what each document said, which left the reader to infer why any of it
was an exclusion, or how one becomes the default. */
.frow-h{
font-size:16.5px;
font-weight:500;
line-height:1.35;
letter-spacing:-.014em;
color:var(--ink);
}
.frow-h::after{
content:'+';
margin-left:.55em;
font-family:ui-monospace,'SF Mono',Menlo,monospace;
font-size:12px;
color:var(--muted);
transition:color .18s var(--ease);
}
.frow:hover .frow-h::after,
.frow:focus-within .frow-h::after{content:'\2013';color:var(--ink)}
/* COLLAPSED BY DEFAULT, OPENS ON HOVER. Seven rows of evidence is a lot of
page; the claim line and the form number carry the argument on their own, so
the proof waits until it is asked for. grid-template-rows 0fr → 1fr animates
to the content's real height, which max-height cannot do without a guess.
The text stays in the DOM and in the accessibility tree throughout — it is
visually collapsed, not removed — and the row takes tabindex so a keyboard
reaches it through :focus-within. Pointers without hover get it open. */
.frow-x{
display:grid;
grid-template-rows:0fr;
margin-top:0;
opacity:0;
transition:grid-template-rows .34s var(--ease),
opacity .22s var(--ease),
margin-top .34s var(--ease);
}
.frow-x > *{overflow:hidden}
.frow:hover .frow-x,
.frow:focus-within .frow-x{grid-template-rows:1fr;opacity:1;margin-top:7px}
.frow:hover{background:var(--paper-deep)}
.frow:focus-visible{outline:none;background:var(--paper-deep);box-shadow:inset 0 0 0 1px var(--ink)}
.frow-v{font-size:15.5px;line-height:1.58;color:var(--ink-soft)}
.frow-c{line-height:1.6;font-size:10px}
/* The row that argues against us — same weight, marked, never hidden. It used
to be marked with a paper-deep tint, which hover now owns, so the mark moved
to an inset rule: it reads as flagged at rest AND still shows the hover. */
.frow.contested{box-shadow:inset 3px 0 0 var(--muted)}
.frow.contested .frow-c{color:var(--ink)}
.verbatim{
font-family:'Sentient',Georgia,serif;
font-style:italic;
font-size:1.05em;
color:var(--ink);
/* the italic's closing quote leans right far enough to swallow the word
space after it — "platform."The quiet. Pay it back. */
margin-right:.14em;
}
/* the one ink-filled block below the fold. --on-ink so the custom cursor
inverts over it, same contract as the nav, the CTAs and the policy tiles. */
.pull{
/* the quote now OPENS the section, so this margin separates it from the
ledger below rather than from the footer — much tighter than it was */
margin:0 var(--gutter) clamp(26px,3.6vh,46px);
padding:clamp(30px,4.2vw,60px) clamp(24px,4vw,60px);
background:var(--ink);
color:var(--paper);
--on-ink:1;
/* the source goes top-right rather than leaving half a field of empty ink,
and a quote this damning should say which form it came out of */
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,auto);
gap:clamp(20px,4vw,64px);
align-items:start;
}
.pull-src{
text-align:right;
line-height:1.9;
color:rgba(250,247,239,.5);
}
.pull blockquote{
font-family:'Sentient',Georgia,serif;
font-style:italic;
font-size:clamp(21px,2.5vw,38px);
line-height:1.28;
letter-spacing:-.02em;
max-width:26ch;
}
.pull .attr{
display:block;
margin-top:clamp(18px,2vw,28px);
color:var(--gold);
max-width:62ch;
line-height:1.7;
}
@media (hover:none){
.frow-x{grid-template-rows:1fr;opacity:1;margin-top:7px}
.frow-h::after{display:none}
}
@media (max-width:1080px){
.frow{grid-template-columns:minmax(70px,84px) minmax(0,1fr);gap:8px 20px}
.frow-t{grid-column:1/-1}
.frow-c{grid-column:1/-1}
/* the schedule collapses the same way the ledger does: type and head on one
line, the description and the status beneath, so no column gets squeezed to
two words per line */
.srow{grid-template-columns:minmax(74px,90px) minmax(0,1fr);gap:6px 20px}
.srow-v{grid-column:1/-1}
.srow-s{grid-column:1/-1}
}
@media (max-width:900px){
.policy-grid{grid-template-columns:1fr}
.policies-head{grid-template-columns:1fr;align-items:start}
.pull{grid-template-columns:1fr}
.plate{grid-template-columns:1fr;gap:18px}
.pull-src{text-align:left}
.trio{grid-template-columns:1fr}
.people{grid-template-columns:1fr}
.about-head{grid-template-columns:1fr;align-items:start}
.perils{grid-template-columns:1fr}
.peril:nth-child(2){border-top:1px solid var(--hairline)}
.peril:nth-child(even){border-left:none}
/* the inset rule marking the empty slot is a left edge; stacked, it would read
as marking the last card in a list instead of the third of three columns */
.tcard:last-child,#gap .tcard:last-child{box-shadow:none}
}
@media (max-width:760px){
/* the hero stays one viewport on phones; the policies section is below it */
.labels{display:none}
nav{display:none}
main{overflow:hidden}
.hero h1 br{display:none}
.wordmark{padding:20px var(--gutter)}
.cta{flex-direction:column;align-items:stretch;gap:12px;padding:16px var(--gutter) 18px}
.cta a{justify-content:center;padding:20px 32px}
.standfirst{grid-template-columns:1fr}
.row{grid-template-columns:1fr;gap:6px}
}
@media (prefers-reduced-motion:reduce){
h1 .w,.standfirst p,.cases,.yc-badge,.cta{animation:none;opacity:1;filter:none;transform:none}
.cases-track{animation:none}
*{transition-duration:0s!important;transition-delay:0s!important}
.globe-wrap{opacity:1}
}
/* ---------- globe (background plate) ----------
A full engraved plate, contained (never cropped — the hairline circle and
ticks are part of the drawing), anchored to the right whitespace and
vertically centered in the content band. Content stacks above it; pointer
events fall through empty regions so the globe stays draggable. */
main{position:relative}
.globe-wrap{
position:absolute;
z-index:0;
/* THE PLATE'S EDGE IS A CONTENT EDGE. This was max(2.5vw,20px) — 37.8px at a
1512-wide window, against a 48px gutter — so the globe hung ~10px past the
right edge every other element lines up on, and the page read as very
slightly out of true without an obvious cause. Anchored to the gutter now,
so the plate, the cards and the nav all stop on the same line. */
right:var(--gutter);
top:50%;
width:min(88vh,58vw);
aspect-ratio:1;
transform:translateY(-50%) scale(.97);
opacity:0;
transition:opacity 1.4s var(--ease) 1.55s,transform 1.4s var(--ease) 1.55s;
}
.globe-wrap.on{opacity:1;transform:translateY(-50%)}
.globe-wrap canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.labels,.hero,.standfirst,.cta,.cases{position:relative;z-index:1}
.labels,.hero,.standfirst,.cta{pointer-events:none}
.labels span,.hero h1,.standfirst p,.cta a{pointer-events:auto}
@media (max-width:1080px){
.globe-wrap{
right:auto;
left:50%;
top:auto;
bottom:10px;
width:min(94vw,62vh);
transform:translateX(-50%) scale(.97);
}
.globe-wrap.on{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce) and (min-width:1081px){
.globe-wrap{transform:translateY(-50%)}
}
@media (prefers-reduced-motion:reduce) and (max-width:1080px){
.globe-wrap{transform:translateX(-50%)}
}
/* ---------- YC badge ---------- */
.yc-badge{
display:inline-flex;
align-items:center;
gap:12px;
padding:14px 22px;
border:1px solid var(--ink);
background:var(--paper);
color:var(--ink);
text-decoration:none;
font:500 13.5px/1 'General Sans',sans-serif;
text-transform:uppercase;
letter-spacing:.12em;
margin-bottom:clamp(10px,1.8vh,18px);
pointer-events:auto;
opacity:0;
filter:blur(6px);
animation:focus .6s var(--ease) forwards;
transition:background .18s var(--ease),color .18s var(--ease);
}
.yc-badge:hover{background:var(--ink);color:var(--paper)}
.yc-badge:active{transform:scale(.98)}
.yc-mark{
display:flex;
align-items:center;
justify-content:center;
width:23px;
height:23px;
background:#fb651e;
color:#fff;
font:600 15px/1 'General Sans',sans-serif;
letter-spacing:0;
}
.yc-badge:hover .yc-mark{background:#fb651e;color:#fff}
/* ---------- site cursor (fine pointers; reduced-motion keeps native) ------ */
@media (pointer:fine){
html.has-cursor, html.has-cursor *{cursor:none!important}
.cur{
position:fixed;
top:0;left:0;
z-index:9999;
pointer-events:none;
opacity:0;
transition:opacity .3s var(--ease);
}
.cur.on{opacity:1}
#cur-dot{
width:6px;height:6px;
margin:-3px 0 0 -3px;
border-radius:50%;
background:var(--ink);
transition:opacity .3s var(--ease),background-color .18s var(--ease);
}
#cur-ring{
width:34px;height:34px;
margin:-17px 0 0 -17px;
border-radius:50%;
border:1px solid rgba(20,20,19,.55);
transition:opacity .3s var(--ease),
width .28s var(--ease),height .28s var(--ease),
margin .28s var(--ease),background-color .28s var(--ease),
border-color .18s var(--ease);
}
#cur-ring.link{
width:52px;height:52px;
margin:-26px 0 0 -26px;
background:rgba(239,223,167,.34);
}
/* ── THE CURSOR OVER AN INK SURFACE ────────────────────────────────────────
`cursor:none` above hides the native pointer, so an ink dot on an ink tile
is not a faint cursor — it is NO cursor. The policy cards invert to ink on
hover, and so do the nav items, both CTAs, and the YC badge; the ink-filled
"Get a quote" button has had an invisible cursor since it shipped.
Rather than list those selectors in JS, each ink rule sets `--on-ink:1`.
Custom properties inherit, so children of a dark tile report it too, and a
dark surface added later is covered by the rule that makes it dark. */
#cur-dot.on-ink{background:var(--paper)}
#cur-ring.on-ink{border-color:rgba(250,247,239,.6)}
#cur-ring.link.on-ink{background:rgba(239,223,167,.22)}
#cur-ring.down{
width:24px;height:24px;
margin:-12px 0 0 -12px;
}
}
/* phones: horizon composition — plate rises from the bottom edge,
dense land mass in the clear band below the text */
@media (max-width:760px){
.globe-wrap{
width:min(100vw,60vh);
bottom:-14vh;
}
}