/* ==========================================================================
Dakyworld — site design system
One stylesheet for every page. Edit here, the whole site follows.
========================================================================== */
/* Values are the canonical ones from DAKYWORLD-BRAND-DESIGN-SYSTEM §03/§61.
Nothing here may be edited to suit one page — change the page instead. */
:root{
--ink:#08101f;
--navy:#0b0a16;
--blue:#3157ff;
--blue-light:#6490ff;
--cyan:#6fe4ff;
--lime:#b8ff3d;
--cream:#f4f5f0;
--white:#ffffff;
/* Secondary text. #69758a came to 4.25:1 on the cream this site is mostly
made of — under the 4.5:1 that normal-size text needs — and five more
hand-picked greys sat around it doing the same job a unit or two apart,
none of them passing either. They are all this one value now, which does
pass on every ground here: cream, white, --soft and the field grey. */
--muted:#636f82;
/* The uppercase eyebrow and field label. Bluer than --muted on purpose, and
kept as its own token so the two can be told apart when one has to move. */
--label:#5c6b86;
--line:#dfe4eb;
/* Site-level extra: the one step between --cream and --white, used for
inset panels. No equivalent in the written system. */
--soft:#edf1f7;
--max:1440px;
/* Headline emphasis on dark grounds. The written system reserves lime for
action and positive status (~1-5% of a surface) and makes blue the
emphasis colour everywhere; large lime headline clauses on the dark
sections broke both rules, so dark surfaces now emphasise with blue,
lightened for contrast — the same job the light sections already do. */
--accent-dark:var(--blue-light);
/* The two label sizes — the uppercase, wide-tracked eyebrows, numbers, tags
and field labels. They were written as literal 9/10/11px in thirty-six
places across two files, which is why nothing ever raised them: there was
no one place to raise.
On a phone they are the least legible thing on the site. 11px of uppercase
at .12em tracking is small before you account for a hand, a bus, and
daylight; 9px is smaller than the smallest text most people can read
comfortably at arm's length. The desktop composition depends on the
contrast between these labels and the display type, so the sizes stay as
drawn on a large screen and lift to a 12px floor on a small one, where the
composition has already collapsed to a single column anyway. */
--label-sm:11px;
--label-xs:10px;
/* One radius scale. Card corners had drifted across 20/21/22/24/26/27/28;
everything now lands on one of these three, pills stay 999px. */
--r-sm:12px;
--r-md:18px;
--r-lg:24px;
/* Gap between the header shell and the mobile panel hanging below it. */
--gap:9px;
/* Everything above the mobile panel's top edge, plus a margin below it:
the header's own 16px offset, the shell, --gap, and 24px of air. Used to
bound the panel's height so it can never run off the bottom of a screen. */
--panel-offset:120px;
/* One easing curve everywhere, so the chrome moves like a single object. */
--ease:cubic-bezier(.16,1,.3,1);
/* Fallbacks matter: the header is fixed and paints before webfonts land. */
--font-body:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
--font-display:"Space Grotesk","DM Sans","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{
scroll-behavior:smooth;
/* The header is fixed and 94px tall, so without this every in-page anchor
— the skip link included — parks its target underneath it. */
scroll-padding-top:110px;
}
body{
margin:0;background:var(--cream);color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
/* This is a net, not a layout technique, and the difference matters.
overflow-x:hidden on the body turns it into a scroll container. That is
what hid the contact page's 466px floor from every visual check for as
long as it existed: the page really was too wide for the phone, the bar
was simply not drawn. It also silently disables position:sticky for
everything inside.
overflow-x:clip does the one useful half — a decorative element that
reaches past the edge is not allowed to make the page scroll sideways —
without creating a scroll container and without breaking sticky. The
hidden line before it is the fallback for Safari 15 and older, which does
not know clip; anything newer takes the second line. Neither is allowed to
be the reason a layout looks fine: nothing on this site depends on the
clip any more, and the responsive audit runs with it switched off. */
overflow-x:hidden;
overflow-x:clip;
}
a{text-decoration:none}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:4px}
.wrap{width:min(var(--max),calc(100% - 40px));margin:auto}
.display{font-family:var(--font-display);letter-spacing:-.055em}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--label)}
.eyebrow:before{content:"";width:22px;height:3px;border-radius:99px;background:var(--lime)}
.muted{color:var(--muted)}
.rule{border-top:1px solid var(--line)}
.rule-b{border-bottom:1px solid var(--line)}
/* First tab stop. Slides in on focus rather than hiding off-canvas, so it is
visible where the eye already is. */
.skip-link{
position:fixed;top:12px;left:50%;z-index:1100;
padding:11px 18px;
border-radius:999px;background:var(--lime);color:var(--ink);
font-size:13px;font-weight:700;text-decoration:none;
transform:translate(-50%,-200%);
transition:transform .25s var(--ease);
}
.skip-link:focus-visible{transform:translate(-50%,0)}
/* Locked while the mobile menu is open so the page cannot scroll behind it. */
body.nav-open{overflow:hidden}
/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;gap:12px;padding:14px 16px 14px 22px;
border-radius:999px;font-size:14px;font-weight:700;transition:.25s ease;
}
.btn .pip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;transition:.25s ease}
.btn-primary{background:var(--lime);color:var(--ink);box-shadow:0 6px 16px rgba(184,255,61,.12)}
.btn-primary .pip{background:var(--ink);color:var(--lime)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(184,255,61,.2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark .pip{background:var(--blue);color:#fff}
.btn-dark:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-ghost .pip{background:var(--soft);color:var(--ink)}
.link{font-weight:700;font-size:14px;color:var(--ink);border-bottom:1px solid #808ca1;padding-bottom:3px}
.link:hover{color:var(--blue);border-color:var(--blue)}
/* ==========================================================================
HEADER
One fixed shell, one nav element serving desktop row and mobile panel.
State lives on aria-expanded so the icon can never disagree with what a
screen reader announces.
========================================================================== */
/* Pinned for the whole scroll. The shell used to retract on the way down and
return on the way up; navigation is the one thing that should never have to
be scrolled back for, so it now stays put and only changes weight. */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:1000;
padding:16px 0;
}
/* The shell IS the wrapper. There used to be a .header-wrap rule here holding
the width and the positioning, and no .header-wrap element anywhere in the
markup to carry it — so the bar ran edge to edge at every width, its 18px
corners rounding against nothing, and on a display wider than 1440 it
overhung the page content beneath it. The two are one element now, which is
the only version that cannot drift apart again.
position:relative is not decoration: the mobile panel hangs off this box.
backdrop-filter already made it the containing block for that panel, so the
declaration states what was true implicitly and would break silently if the
blur were ever removed. */
.header-shell{
position:relative;
width:min(var(--max),calc(100% - 40px));
margin:auto;
min-height:62px;
padding:8px 10px 8px 21px;
display:flex;align-items:center;justify-content:space-between;
border:1px solid rgba(255,255,255,.14);
border-radius:18px;
background:rgba(8,16,31,.74);
backdrop-filter:blur(20px) saturate(140%);
-webkit-backdrop-filter:blur(20px) saturate(140%);
box-shadow:0 12px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.05);
transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.site-header.scrolled .header-shell{
background:rgba(8,16,31,.96);
border-color:rgba(255,255,255,.1);
box-shadow:0 18px 50px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);
}
/* Brand
The real lockup artwork, not type imitating it. The on-dark cut is used
because the shell is always dark, at both scroll states. */
.site-header .brand{
display:flex;align-items:center;
text-decoration:none;
}
.brand-logo{
display:block;
height:34px;width:auto;
transition:transform .4s var(--ease);
}
/* The mark is fixed artwork, so the hover lives in the movement, not in a
recolour — nothing here may restyle the logo itself. */
.site-header .brand:hover .brand-logo{transform:translateY(-1px) scale(1.02)}
/* Nav */
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav a{
position:relative;
color:rgba(255,255,255,.62);text-decoration:none;
font-size:13px;font-weight:600;white-space:nowrap;
transition:color .25s ease;
}
.main-nav a:not(.nav-cta)::after{
content:"";position:absolute;left:0;right:0;bottom:-8px;
height:2px;border-radius:99px;background:var(--lime);
transform:scaleX(0);transform-origin:left;
transition:transform .35s var(--ease);
}
/* aria-current, set from the URL, rather than a class nothing assigns. */
.main-nav a:hover,
.main-nav a[aria-current="page"]{color:#fff}
.main-nav a:hover:not(.nav-cta)::after,
.main-nav a[aria-current="page"]:not(.nav-cta)::after{transform:scaleX(1)}
/* Hovering one link dims the rest — the row reads as one group, not six items. */
@media(min-width:901px){
.main-nav:hover a:not(:hover):not(.nav-cta){color:rgba(255,255,255,.46)}
}
/* The row collapses into a panel when the row genuinely stops fitting, and at
no other time. data-nav-overflow, set from a measurement in site.js, is the
single switch for that: there used to be a second one, a max-width:760px
media query carrying a near-identical copy of every rule below, so the two
could disagree and any change had to be made twice. The media query now
only changes sizes.
The panel hangs off .header-shell. Its padding box sits inside the shell's
1px border, so -1px pulls the panel back out to the shell's own edges and
the extra 1px in `top` makes the gap a true var(--gap) below the shell. */
.header-shell[data-nav-overflow="true"] .menu-toggle{
display:grid;place-items:center
}
.header-shell[data-nav-overflow="true"] .main-nav{
position:absolute;top:calc(100% + 1px + var(--gap));left:-1px;right:-1px;
flex-direction:column;align-items:stretch;gap:0;
padding:10px;
/* The panel has to fit the screen it opens on, and on a phone held sideways
it did not. Seven items and a CTA come to 381px; a landscape phone is
360px tall. The panel ran 108px past the bottom edge, and because
body.nav-open locks the page there was no way to scroll to what was cut
off — which was Insights and "Let's Talk", the site's primary call to
action. It was unreachable on any phone in landscape.
Bounding the height and letting the panel scroll itself fixes that at
every viewport, including a short desktop window. dvh first, because a
mobile browser's toolbars are part of vh but not of the visible page;
the vh line before it is the fallback for a browser without dvh.
overscroll-behavior stops a flick at the end of the list from scrolling
the locked page underneath. */
max-height:calc(100vh - var(--panel-offset));
max-height:calc(100dvh - var(--panel-offset));
overflow-y:auto;
overscroll-behavior:contain;
border:1px solid rgba(255,255,255,.12);
border-radius:17px;
background:rgba(8,16,31,.97);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 22px 55px rgba(0,0,0,.25);
opacity:0;visibility:hidden;transform:translateY(-8px);
transition:opacity .25s ease,transform .3s var(--ease),visibility .3s;
}
.header-shell[data-nav-overflow="true"] .main-nav.open{
opacity:1;visibility:visible;transform:none
}
.header-shell[data-nav-overflow="true"] .main-nav a{
padding:14px 13px;border-radius:11px;font-size:15px;
opacity:0;transform:translateY(-6px);
transition:opacity .3s ease,transform .3s var(--ease),background .2s ease;
}
/* Links arrive one after another, once the panel itself has landed. */
.header-shell[data-nav-overflow="true"] .main-nav.open a{
opacity:1;transform:none;
transition-delay:calc(60ms + var(--i,0) * 45ms);
}
.header-shell[data-nav-overflow="true"] .main-nav a:hover{
background:rgba(255,255,255,.06)
}
.header-shell[data-nav-overflow="true"] .main-nav a:not(.nav-cta)::after{
display:none
}
.header-shell[data-nav-overflow="true"] .nav-cta{
justify-content:space-between;
margin-top:6px;
/* 13px vertical = 46px tall, a proper touch target. */
padding:13px 13px 13px 15px!important;
font-size:15px!important;
}
/* Set by site.js for the single line on which it puts the panel back into a
row to measure it. Without this the undo animates, and the panel fades out
across the page every time the window is resized. */
.header-shell.measuring .main-nav,
.header-shell.measuring .main-nav a{transition:none!important}
/* Without JavaScript nothing sets the attribute, so the row never collapses.
Let it wrap rather than run off the side of a phone. */
html:not(.js) .header-shell{flex-wrap:wrap;row-gap:10px}
html:not(.js) .main-nav{flex-wrap:wrap;justify-content:flex-end;gap:10px 18px}
.nav-cta{
display:inline-flex;align-items:center;gap:7px;
padding:9px 11px 9px 16px;
border-radius:999px;
background:var(--lime);color:var(--ink)!important;
font-size:13px!important;font-weight:700!important;
transition:transform .35s var(--ease),box-shadow .3s ease;
}
.nav-cta span{
width:24px;height:24px;flex-shrink:0;
display:grid;place-items:center;
border-radius:50%;background:var(--ink);color:var(--lime);
font-size:12px;line-height:1;
transition:transform .35s var(--ease);
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,255,61,.28)}
.nav-cta:hover span{transform:translate(2px,-2px)}
/* Menu button */
.menu-toggle{
display:none;
width:42px;height:42px;padding:0;
border:1px solid rgba(255,255,255,.14);
border-radius:12px;
background:rgba(255,255,255,.06);color:#fff;
cursor:pointer;
transition:background .25s ease;
}
.menu-toggle:hover{background:rgba(255,255,255,.12)}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{
display:block;width:17px;height:2px;margin:auto;
border-radius:99px;background:#fff;
}
.menu-toggle span{position:relative;transition:background .2s ease}
.menu-toggle span::before,
.menu-toggle span::after{
content:"";position:absolute;left:0;
/* Named properties rather than `transition:.3s`, which animates `all`. */
transition:top .25s var(--ease),transform .25s var(--ease);
}
.menu-toggle span::before{top:-6px}
.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
/* Mobile: sizes only. Which layout the nav is in is decided by the
measurement in site.js, not by a second breakpoint here. */
/* A phone held sideways: wide enough for two columns, too short for one. The
panel becomes a two-up grid so the whole menu is visible without scrolling,
with the CTA across the foot where it reads as the conclusion of the list. */
@media(orientation:landscape) and (max-height:520px){
.header-shell[data-nav-overflow="true"] .main-nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:2px 6px;
align-content:start;
}
.header-shell[data-nav-overflow="true"] .main-nav .nav-cta{
grid-column:1/-1;
margin-top:8px;
}
.header-shell[data-nav-overflow="true"] .main-nav a{padding:11px 13px}
/* The consent banner is fixed to the bottom and deliberately sits above
everything, so that consent is always reachable — see the note on its
z-index in consent.css. On a screen this short the two overlays were
fighting for the same 360px and the banner covered half the menu. Rather
than re-layer somebody's legal design, the panel simply stops above it.
:has() is the whole mechanism; a browser without it falls back to the
scrollable panel set above, which is still correct, just tighter. */
body:has(.dw-consent) .header-shell[data-nav-overflow="true"] .main-nav{
max-height:calc(100vh - var(--panel-offset) - 150px);
max-height:calc(100dvh - var(--panel-offset) - 150px);
}
}
@media(max-width:760px){
.header-shell{width:calc(100% - 28px);padding:8px 9px 8px 14px}
/* Small enough that the lockup and the menu button never contend for the
row on a 360px screen. */
.brand-logo{height:28px}
.brand-footer img{height:38px}
}
/* ── Portal hero ─────────────────────────────────────────────────────── */
.portal-hero{
position:relative;
min-height:780px;
margin:0;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(ellipse at center,rgba(43,43,76,.18),transparent 48%),
linear-gradient(180deg,#0d0c17 0%,#0a0913 100%);
color:#fff;
display:flex;
flex-direction:column;
}
.portal-hero:before{
content:"";
position:absolute;inset:0;z-index:-4;
background:
radial-gradient(circle at 50% 45%,rgba(85,94,165,.08),transparent 35%),
radial-gradient(circle at 50% 100%,rgba(184,255,61,.035),transparent 35%);
}
.portal-arch{
position:absolute;z-index:-2;pointer-events:none;
width:430px;height:1250px;top:-180px;
border-radius:48%;
}
.portal-left{
left:-245px;transform:rotate(-11deg);
background:radial-gradient(ellipse at 72% 52%,
rgba(116,183,255,.98) 0%,rgba(69,116,255,.96) 14%,
rgba(31,65,205,.9) 28%,rgba(20,38,122,.62) 42%,
rgba(11,15,53,.18) 58%,transparent 70%);
box-shadow:55px 0 80px rgba(28,76,255,.30),95px 0 140px rgba(39,102,255,.18);
}
.portal-right{
right:-245px;transform:rotate(11deg);
background:radial-gradient(ellipse at 28% 52%,
rgba(116,183,255,.98) 0%,rgba(69,116,255,.96) 14%,
rgba(31,65,205,.9) 28%,rgba(20,38,122,.62) 42%,
rgba(11,15,53,.18) 58%,transparent 70%);
box-shadow:-55px 0 80px rgba(28,76,255,.30),-95px 0 140px rgba(39,102,255,.18);
}
.portal-arch:after{
content:"";position:absolute;top:50px;width:190px;height:1140px;
border-radius:50%;filter:blur(18px);
background:radial-gradient(ellipse,rgba(130,200,255,.88) 0%,
rgba(61,121,255,.72) 28%,rgba(34,65,180,.22) 52%,transparent 70%);
}
.portal-left:after{right:-30px}
.portal-right:after{left:-30px}
.portal-cut{
position:absolute;z-index:-1;top:-160px;width:210px;height:1200px;
border-radius:50%;background:#0c0b16;
}
.portal-cut-left{left:-82px;transform:rotate(-9deg)}
.portal-cut-right{right:-82px;transform:rotate(9deg)}
.portal-header-space{height:84px}
.portal-content{
position:relative;z-index:4;
width:min(950px,calc(100% - 40px));
margin:auto;text-align:center;
padding:72px 0 0;
}
.portal-eyebrow{
display:inline-flex;align-items:center;gap:9px;
color:rgba(255,255,255,.48);
font-size:var(--label-sm);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
}
.portal-eyebrow i{width:20px;height:2px;border-radius:99px;background:#4b8cff}
.portal-title{
margin:23px auto 0;
max-width:900px;
font-family:"Space Grotesk",sans-serif;
font-size:clamp(52px,6.1vw,90px);
line-height:.96;letter-spacing:-.06em;font-weight:500;
}
.portal-title span{color:#fff}
.portal-title em{font-style:normal;color:var(--accent-dark)}
/* Home hero headline. It carried an inline font-size and a hard
to make it
fit the column; the
orphaned the word "system" on its own line on
phones. One clamp that fits at every width, wrapping on its own. */
.portal-hero:not(.portal-hero--page) .portal-title{
font-size:clamp(38px,5.6vw,68px);
text-wrap:balance;
}
.portal-copy{
max-width:740px;margin:27px auto 0;
color:rgba(255,255,255,.66);
font-size:16px;line-height:1.7;
}
.portal-copy strong{color:#fff}
.portal-actions{
display:flex;justify-content:center;align-items:center;
flex-wrap:wrap;gap:12px;margin-top:28px;
}
.portal-primary,.portal-secondary{
display:inline-flex;align-items:center;gap:9px;
border-radius:999px;text-decoration:none;
font-size:13px;font-weight:700;
}
.portal-primary{padding:11px 15px 11px 20px;background:var(--lime);color:var(--ink)}
.portal-primary b{
display:grid;place-items:center;width:25px;height:25px;
border-radius:50%;background:var(--ink);color:var(--lime);
}
.portal-secondary{
padding:11px 15px;border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.035);color:#fff;
}
.portal-pills{
display:flex;justify-content:center;align-items:center;
flex-wrap:wrap;gap:8px;margin-top:28px;
}
.portal-pills span{
padding:8px 13px;border:1px solid rgba(255,255,255,.11);
border-radius:999px;background:rgba(255,255,255,.035);
color:rgba(255,255,255,.66);font-size:var(--label-sm);
backdrop-filter:blur(8px);
}
.portal-pills .active{border-color:rgba(77,130,255,.45);background:rgba(59,89,178,.18);color:#fff}
.portal-proof{
position:relative;z-index:4;
width:min(900px,calc(100% - 40px));
margin:45px auto 0;text-align:center;
padding-bottom:42px;
}
.portal-proof-label{
color:rgba(255,255,255,.5);font-size:var(--label-xs);
font-weight:700;letter-spacing:.18em;text-transform:uppercase;
margin-bottom:18px;
}
.portal-proof-row{
display:flex;justify-content:center;align-items:center;
flex-wrap:wrap;gap:clamp(35px,6vw,80px);
}
/* Client names, set as one consistent line. They were previously each given a
different face and size (italic, serif, larger) to fake the look of varied
logotypes; that is a costume, not a wordmark, and it reads as one. */
.portal-proof-row span{
color:rgba(255,255,255,.62);
font-family:var(--font-display);font-size:19px;font-weight:600;
letter-spacing:-.02em;
}
.portal-orb{
position:absolute;z-index:4;left:62%;top:54%;
width:20px;height:20px;border-radius:50%;
background:#273e98;border:1px solid #5575e7;
box-shadow:0 0 25px rgba(58,104,255,.35);
}
/* Interior-page variant of the portal hero */
.portal-hero--page{min-height:auto}
.portal-hero--page .portal-content{
width:min(var(--max),calc(100% - 40px));
margin:0 auto;text-align:center;
padding:58px 0 clamp(60px,7vw,96px);
}
.portal-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}
.portal-index{font-size:var(--label-sm);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.portal-hero--page .portal-title{margin:24px auto 0;max-width:17ch;font-size:clamp(44px,5.6vw,82px)}
.portal-hero--page .portal-copy{margin:26px auto 0;max-width:64ch}
.portal-hero--page .portal-actions,
.portal-hero--page .portal-pills{justify-content:center}
.portal-hero--page .portal-orb{left:78%;top:36%}
/* ── Trust / stat strip ──────────────────────────────────────────────── */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust-inner{display:grid;grid-template-columns:1.2fr repeat(4,1fr);align-items:center}
.trust-item{padding:25px 20px;border-left:1px solid var(--line);font-size:12px;color:var(--muted);transition:background .3s ease,transform .3s ease,padding-left .3s ease}
.trust-item strong{display:block;font-family:"Space Grotesk";font-size:28px;color:var(--ink);letter-spacing:-.04em;margin-bottom:4px;transition:transform .3s ease,color .3s ease}
.trust-item:hover{background:#f8fafc;transform:translateY(-2px);padding-left:24px}
.trust-item:hover strong{transform:translateX(2px);color:var(--blue)}
.trust-inner.cols-3{grid-template-columns:1.2fr repeat(3,1fr)}
/* ── Sections ────────────────────────────────────────────────────────── */
.section{padding:clamp(85px,10vw,150px) 0;position:relative;overflow:hidden}
.section-sm{padding:clamp(60px,7vw,100px) 0}
.section-head{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:60px}
.section-head h2,
.head-2 h2,
.no-lock h2,
.expect-head h2,
.band h2,
.contact-intro h2,
.value h2,
.addon-head h2,
.founder h2,
.ownership h2,
.gap-title{
font-size:clamp(42px,4.5vw,68px);
line-height:1;
letter-spacing:-.055em;
margin:18px 0 0;
}
.section-head h2{max-width:780px}
.section-head p{max-width:360px;line-height:1.7;color:var(--muted);font-size:15px}
.section:not(.on-dark)::after{
content:"";position:absolute;z-index:0;width:360px;height:360px;
right:-180px;top:20%;border-radius:50%;
background:radial-gradient(circle,rgba(49,87,255,.055),transparent 70%);
pointer-events:none;
}
.section > .wrap{position:relative;z-index:1}
.section-head .eyebrow:before,.eyebrow:before{transition:width .35s ease}
.section-head:hover .eyebrow:before{width:34px}
.bg-white{background:#fff}
.bg-cream{background:var(--cream)}
.body{font-size:16px;line-height:1.75;color:#4f5a70}
.split{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(30px,5vw,80px)}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px)}
/* ── The gap section (home) ──────────────────────────────────────────── */
.gap-section{background:#fff}
/* The left column is a short label + one sentence; the right is a full block.
The gap was a 100px canyon that left the sentence stranded; closing it and
evening the columns keeps the label tied to the content it introduces. */
.gap-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,5vw,72px);align-items:start}
.gap-title{font-size:clamp(42px,5vw,70px);line-height:1}
.gap-copy{display:grid;grid-template-columns:1fr 1fr;gap:35px;margin-top:34px}
.gap-copy p{font-size:16px;line-height:1.75;color:#4f5a70}
.quote{position:relative;overflow:hidden;margin-top:35px;border-left:4px solid var(--lime);padding:5px 0 5px 24px;font-family:"Space Grotesk";font-size:24px;line-height:1.25}
.quote:after{
content:"";position:absolute;left:0;bottom:0;width:45px;height:1px;
background:var(--blue);transform:translateX(-60px);transition:transform .45s ease;
}
.gap-section:hover .quote:after{transform:translateX(0)}
/* ── Arrangement cards ───────────────────────────────────────────────── */
.arrangement{background:linear-gradient(135deg,#eef3ff 0%,#f8fafc 45%,#f1f6e9 100%)}
.arrange-card{background:#fff;border:1px solid #dce3ef;border-radius:var(--r-lg);padding:30px;box-shadow:0 20px 50px rgba(18,31,59,.06)}
.arrange-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:45px}
.icon-box{
width:45px;height:45px;border-radius:13px;background:var(--ink);color:var(--lime);
display:grid;place-items:center;margin-bottom:20px;
transition:transform .35s cubic-bezier(.16,1,.3,1),border-radius .35s ease,box-shadow .35s ease;
}
/* The icons are inline SVG in the markup now, not an that a script from
unpkg swapped out after the page had already painted. They take .icon-box's
colour through stroke:currentColor, and are sized here, once. */
.icon-box .icon{width:24px;height:24px;display:block}
.arrange-card:hover .icon-box,.gov-card:hover .icon-box{
transform:translateY(-4px) rotate(-4deg);border-radius:17px;box-shadow:0 12px 25px rgba(8,16,31,.14);
}
.arrange-card h3{font-family:"Space Grotesk";font-size:24px;margin:0 0 9px}
/* ── Service cards ───────────────────────────────────────────────────── */
.coverage{background:var(--cream)}
.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.service-card{
position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
border-radius:var(--r-lg);padding:32px;min-height:235px;cursor:pointer;
}
.service-card:after{
content:"";position:absolute;width:150px;height:150px;right:-60px;bottom:-70px;
background:radial-gradient(circle,rgba(49,87,255,.15),transparent 70%);transition:.3s;
}
.service-card:hover:after{transform:scale(1.35)}
.service-number{font-size:var(--label-sm);font-weight:800;letter-spacing:.12em;color:var(--muted);display:inline-block;transition:color .25s ease,transform .35s ease,letter-spacing .3s ease}
.service-card h3{font-family:"Space Grotesk";font-size:29px;letter-spacing:-.04em;margin:26px 0 10px;max-width:20ch;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.service-card p{color:var(--muted);font-size:14px;line-height:1.7;max-width:48ch;transition:color .25s ease}
.service-arrow{
position:absolute;right:27px;top:28px;width:38px;height:38px;
border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease,border-color .25s ease;
}
.service-card:hover .service-number{color:var(--blue);transform:translateX(3px);letter-spacing:.16em}
.service-card:hover .service-arrow{transform:translate(3px,-3px) rotate(45deg);background:var(--ink);color:var(--lime);border-color:var(--ink)}
.service-card:hover h3{transform:translateX(3px)}
.service-card:hover p{color:#3e4a60}
/* ── Dark band / ownership ───────────────────────────────────────────── */
.ownership,.band{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.ownership:before,.band:before{
content:"";position:absolute;inset:0;
background:radial-gradient(circle at 80% 25%,rgba(49,87,255,.3),transparent 35%),
radial-gradient(circle at 20% 90%,rgba(184,255,61,.1),transparent 30%);
}
.ownership-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}
.ownership h2{font-size:clamp(48px,6vw,88px);line-height:.95;max-width:11ch}
.ownership h2 span,.band h2 span{color:var(--accent-dark)}
/* Any dark section that colours a headline clause uses the same blue emphasis. */
.on-dark h2 span,.evidence h2 span{color:var(--accent-dark)}
.ownership-copy{font-size:17px;line-height:1.75;color:rgba(255,255,255,.63)}
.band .wrap{position:relative;z-index:2}
.band .eyebrow{color:rgba(255,255,255,.55)}
.band h2{font-family:"Space Grotesk";letter-spacing:-.05em;font-size:clamp(34px,4.8vw,66px);line-height:1.02;max-width:20ch;margin:22px 0 0}
.band-copy{display:grid;grid-template-columns:1fr 1fr;gap:26px 60px;margin-top:38px;max-width:1040px}
.band-copy p{color:rgba(255,255,255,.7);font-size:16px;line-height:1.75;margin:0}
/* ── Governance cards ────────────────────────────────────────────────── */
.governance{background:#fff}
.governance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.gov-card{position:relative;overflow:hidden;padding:35px;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-lg)}
.gov-card:before{
content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--blue);
transition:height .45s cubic-bezier(.16,1,.3,1);
}
.gov-card:hover:before{height:100%}
.gov-card .num{font-size:12px;font-weight:800;color:var(--blue);display:inline-block;transition:transform .35s ease,letter-spacing .3s ease}
.gov-card:hover .num{transform:translateX(4px);letter-spacing:.16em}
.gov-card h3{font-family:"Space Grotesk";font-size:27px;margin:30px 0 10px}
/* ── Evidence / cases ────────────────────────────────────────────────── */
.evidence{background:var(--ink);color:#fff}
.evidence .eyebrow{color:rgba(255,255,255,.55)}
.evidence .section-head p{color:rgba(255,255,255,.5)}
.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.case{
position:relative;overflow:hidden;cursor:pointer;
background:#121d35;border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg);
padding:30px;min-height:440px;display:flex;flex-direction:column;
}
.case:first-child{background:linear-gradient(145deg,#18284b,#10192c)}
.case:after{
content:"";position:absolute;width:220px;height:220px;right:-100px;top:-100px;border-radius:50%;
background:radial-gradient(circle,rgba(80,112,255,.18),transparent 68%);
opacity:0;transition:opacity .4s ease,transform .5s ease;
}
.case:hover:after{opacity:1;transform:scale(1.25)}
.case-label{font-size:var(--label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--lime);font-weight:700;display:inline-block;transition:letter-spacing .3s ease}
.case:hover .case-label{letter-spacing:.16em}
.case h3{font-family:"Space Grotesk";font-size:31px;margin:22px 0 8px;position:relative;z-index:2;transition:transform .35s ease}
.case:hover h3{transform:translateX(4px)}
.case p{color:rgba(255,255,255,.55);font-size:14px;line-height:1.75;position:relative;z-index:2}
.case-stats{display:flex;gap:24px;flex-wrap:wrap;margin-top:auto;padding-top:30px}
.case-stat{transition:transform .3s ease}
.case:hover .case-stat{transform:translateY(-3px)}
.case-stat strong{font-family:"Space Grotesk";font-size:28px;color:var(--lime);display:block;position:relative;z-index:2;transition:text-shadow .3s ease}
.case:hover .case-stat strong{text-shadow:0 0 20px rgba(184,255,61,.18)}
.case-stat span{font-size:var(--label-sm);color:rgba(255,255,255,.55)}
/* ── Pricing ─────────────────────────────────────────────────────────── */
.engagements{background:#fff}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.price-card{position:relative;overflow:hidden;padding:35px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.price-card:before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--blue),var(--cyan),var(--lime));
transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.price-card:hover:before,.price-card.featured:before{transform:scaleX(1)}
.price-card.featured{border:2px solid var(--ink);box-shadow:0 25px 60px rgba(8,16,31,.1);transform:translateY(-10px)}
.badge{display:inline-block;background:var(--lime);color:var(--ink);padding:7px 10px;border-radius:999px;font-size:var(--label-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.tier-name{font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.price{font-family:"Space Grotesk";font-size:43px;letter-spacing:-.05em;margin:24px 0 10px}
.price small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.price-card ul{padding:0;margin:25px 0 0;list-style:none}
.price-card li{font-size:14px;color:#536078;margin:12px 0;padding-left:18px;position:relative;transition:transform .25s ease,color .25s ease}
.price-card li:before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.price-card:hover li{transform:translateX(2px)}
.price-card li:nth-child(2){transition-delay:.02s}
.price-card li:nth-child(3){transition-delay:.04s}
.price-card li:nth-child(4){transition-delay:.06s}
.price-card li:nth-child(5){transition-delay:.08s}
/* ── Founder ─────────────────────────────────────────────────────────── */
.founder{background:var(--cream)}
.founder-grid{display:grid;grid-template-columns:320px 1fr;gap:90px;align-items:center}
.founder-photo{
position:relative;aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:#dce3ed;
box-shadow:0 25px 60px rgba(8,16,31,.12);
transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease;
}
.founder-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.founder-photo:after{
content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.2);border-radius:inherit;
opacity:0;transform:scale(.96);transition:opacity .35s ease,transform .35s ease;
}
.founder-photo:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 35px 75px rgba(8,16,31,.17)}
.founder-photo:hover:after{opacity:1;transform:scale(1)}
.founder-mono{position:absolute;inset:0;display:grid;place-items:center;font-family:"Space Grotesk";font-size:88px;letter-spacing:-.05em;color:#aab6c8;background:linear-gradient(150deg,#e6ecf5,#d3ddeb)}
.founder h2{font-size:clamp(44px,5vw,70px);line-height:.98;max-width:13ch}
/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq{background:#fff}
.faq-grid{display:grid;grid-template-columns:.6fr 1.4fr;gap:100px}
details{border-top:1px solid var(--line);padding:23px 0;transition:padding .3s ease,background .3s ease}
details:last-child{border-bottom:1px solid var(--line)}
/* Written as `details > summary` rather than bare `summary` because the reset
sets summary's display, and a two-element selector outranks it. That reset
used to be the Tailwind CDN's, injected into after this file; it is
assets/base.css now, which loads before this file and would lose the tie
anyway. The selector stays as it is: it is correct either way, and it is the
version that does not depend on which of the two files loads first. */
details > summary{
cursor:pointer;list-style:none;
display:flex;justify-content:space-between;align-items:center;gap:25px;
font-family:"Space Grotesk",sans-serif;font-size:17px;font-weight:600;
transition:color .25s ease;
}
details > summary::-webkit-details-marker{display:none}
details > summary::marker{content:""}
details > summary > span{
display:inline-grid;place-items:center;flex:0 0 auto;
width:28px;height:28px;border:1px solid var(--line);border-radius:50%;
color:var(--blue);font-size:19px;line-height:1;
transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease,border-color .25s ease;
}
details:hover > summary{color:var(--blue)}
details:hover > summary > span{border-color:var(--blue)}
details[open]{padding-left:10px}
details[open] > summary > span{transform:rotate(45deg);background:var(--ink);color:var(--lime);border-color:var(--ink)}
details p{color:var(--muted);font-size:14px;line-height:1.8;max-width:750px;margin:15px 0 0;overflow:hidden}
details[open] p{animation:faqIn .45s cubic-bezier(.16,1,.3,1)}
/* ── CTA ─────────────────────────────────────────────────────────────── */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;width:650px;height:650px;right:-200px;top:-330px;background:radial-gradient(circle,rgba(49,87,255,.26),transparent 67%)}
.cta:after{content:"";position:absolute;width:450px;height:450px;left:-200px;bottom:-300px;background:radial-gradient(circle,rgba(184,255,61,.1),transparent 67%)}
.cta-inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:clamp(40px,6vw,96px);align-items:end}
.cta h2{font-size:clamp(48px,6vw,88px);line-height:.95;max-width:15ch}
.cta h2 span{color:var(--accent-dark)}
.cta p{font-size:16px;line-height:1.7;color:rgba(255,255,255,.6);max-width:760px}
.cta a{color:inherit}
.cta .btn-primary{color:var(--ink);box-shadow:0 0 0 rgba(184,255,61,0)}
.cta .btn-primary:hover{color:var(--ink);box-shadow:0 16px 45px rgba(184,255,61,.2)}
/* ── Footer ──────────────────────────────────────────────────────────── */
footer{background:#050a14;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1.2fr;gap:40px;padding:68px 0 52px;align-items:start}
.footer-grid h3{font-size:var(--label-sm);text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.46)}
.footer-grid ul{list-style:none;padding:0;margin:18px 0 0}
.footer-grid li{margin:11px 0}
.footer-blurb{margin:20px 0 0;max-width:34ch;font-size:14px;line-height:1.75;color:rgba(255,255,255,.46)}
/* The one action in the footer, so the last column ends on an invitation
rather than trailing off after an address. */
/* Scoped to .footer-grid, and that is the whole point of the selector rather
than a tidy-up.
.footer-cta sits inside .footer-grid, so the two generic rules below it —
`.footer-grid a` and `.footer-grid a:hover` — outrank a bare `.footer-cta`
by one element in the selector. The colour on this button never applied.
Resting, it was the .58 grey of an ordinary footer link instead of white.
Hovered, it took `color:var(--lime)` from the link rule while keeping its own
`background:var(--lime)`, so the one call to action in the footer turned lime
text on a lime pill and disappeared under the pointer, on every page. */
.footer-grid .footer-cta{
display:inline-flex;align-items:center;gap:7px;margin-top:22px;
padding:9px 15px;border:1px solid rgba(255,255,255,.16);border-radius:999px;
font-size:12px;font-weight:600;color:#fff;white-space:nowrap;
transition:border-color .25s ease,background .25s ease,color .25s ease
}
.footer-grid .footer-cta:hover{
border-color:var(--lime);background:var(--lime);color:var(--ink);transform:none
}
.footer-grid a,.footer-grid li{font-size:13px;color:rgba(255,255,255,.58)}
.footer-grid a{display:inline-block;transition:transform .25s ease,color .25s ease}
.footer-grid a:hover{color:var(--lime);transform:translateX(4px)}
.brand-footer{
display:inline-block;
transition:transform .35s ease;
}
.brand-footer img{display:block;height:44px;width:auto}
.brand-footer:hover{transform:translateY(-2px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0 30px;color:rgba(255,255,255,.46);font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-bottom a{color:inherit}
.footer-bottom a:hover{color:var(--lime)}
/* ==========================================================================
INTERIOR PAGE COMPONENTS
========================================================================== */
/* Numbered specification rows — coverage, process, legal, principles */
.spec-list{border-top:1px solid var(--line)}
.spec-row{
display:grid;grid-template-columns:56px minmax(0,.4fr) minmax(0,1fr);
gap:8px 30px;align-items:start;padding:30px 0;
border-bottom:1px solid var(--line);
transition:background .3s ease,padding-left .3s ease;
}
.spec-row:hover{background:rgba(49,87,255,.035);padding-left:14px}
.spec-n{font-size:var(--label-sm);font-weight:800;letter-spacing:.14em;color:var(--muted);padding-top:9px;transition:color .3s ease}
.spec-row:hover .spec-n{color:var(--blue)}
.spec-row h3{font-family:"Space Grotesk",sans-serif;font-size:clamp(20px,2vw,26px);letter-spacing:-.04em;margin:0;line-height:1.15}
.spec-body p{margin:0;color:#4f5a70;font-size:15px;line-height:1.8}
.spec-proof{margin-top:14px;font-size:var(--label-sm);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.spec-proof span{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-size:13px}
.spec-row--step{grid-template-columns:minmax(0,.4fr) minmax(0,1fr);gap:14px 30px}
.step-n{font-family:"Space Grotesk";font-size:clamp(40px,4.4vw,62px);line-height:.9;letter-spacing:-.05em;color:#738db4;transition:color .35s ease}
.spec-row--step:hover .step-n{color:var(--blue)}
.step-head{display:flex;align-items:baseline;gap:22px}
.step-head h3{font-family:"Space Grotesk";font-size:clamp(20px,2vw,26px);letter-spacing:-.04em;margin:0}
/* Insight rows */
.post-row{
display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:10px 30px;align-items:baseline;
padding:28px 0;border-bottom:1px solid var(--line);
transition:background .3s ease,padding-left .3s ease;
}
.post-row:hover{background:rgba(49,87,255,.035);padding-left:14px}
.post-row h3{font-family:"Space Grotesk";font-size:clamp(18px,1.8vw,23px);letter-spacing:-.035em;margin:0;line-height:1.32;max-width:58ch}
.post-tag{font-size:var(--label-sm);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
/* Rate rows — one-time pricing */
.rate-row{
display:grid;grid-template-columns:minmax(0,.3fr) minmax(0,.3fr) minmax(0,1fr);
gap:10px 30px;padding:28px 0;border-bottom:1px solid var(--line);align-items:baseline;
transition:background .3s ease,padding-left .3s ease;
}
.rate-row:hover{background:rgba(49,87,255,.035);padding-left:14px}
.rate-row h3{font-family:"Space Grotesk";font-size:22px;letter-spacing:-.035em;margin:0}
.rate-price{font-family:"Space Grotesk";font-size:21px;letter-spacing:-.03em;color:var(--blue);white-space:nowrap}
.rate-note{font-size:var(--label-sm);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:6px;font-weight:700}
.rate-note.save{color:#457b1b}
.rate-head{font-size:var(--label-sm);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:16px 0}
.rate-head:hover{background:none;padding-left:0}
/* The column headings only head anything while the row is still a row. Once it
stacks they become three orphan labels above the table, so each cell carries
its own name instead — a price with no label is the one thing a pricing table
may never show. */
.rate-label{display:none}
/* Long-form case files */
.case-file{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:clamp(26px,3vw,44px);
display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1fr);
gap:30px clamp(30px,4vw,60px);
transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease;
}
.case-file + .case-file{margin-top:18px}
.case-file:hover{transform:translateY(-5px);box-shadow:0 28px 60px rgba(8,16,31,.09);border-color:#c3cddd}
.case-file h2{font-family:"Space Grotesk";font-size:clamp(28px,3.2vw,42px);letter-spacing:-.045em;margin:14px 0 6px;line-height:1}
.case-file .meta{font-size:13px;color:var(--muted)}
.car-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* h3, not h4: each case study is an h2 and these are its first subheadings,
so an h4 here skipped a level three times on work.html. A screen reader
announces that as a missing section, and the outline is the only structure
a non-visual reader has. */
.car h3{font-size:var(--label-sm);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.car p{margin:0;font-size:14px;line-height:1.8;color:#4f5a70}
.stat-row{display:flex;flex-wrap:wrap;gap:16px 44px;margin-top:32px}
.stat-row .s strong{display:block;font-family:"Space Grotesk";font-size:clamp(26px,2.6vw,34px);letter-spacing:-.04em;color:var(--ink)}
.stat-row .s span{font-size:12px;color:var(--muted)}
.pull{border-left:4px solid var(--lime);padding:6px 0 6px 22px;margin:32px 0 0}
.pull p{font-family:"Space Grotesk";font-size:clamp(17px,1.7vw,21px);line-height:1.35;margin:0;letter-spacing:-.02em}
.pull cite{display:block;margin-top:12px;font-style:normal;font-size:var(--label-sm);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* Service-level / response cards */
.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.level-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.level-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(8,16,31,.09)}
.level-card .k{font-size:var(--label-sm);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.level-card .t{font-family:"Space Grotesk";font-size:clamp(32px,3.4vw,46px);letter-spacing:-.05em;margin:18px 0 14px;line-height:1}
.level-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.75}
/* Contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(34px,5vw,80px)}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.form-grid{display:grid;gap:20px}
.form-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field-label{display:block;font-size:var(--label-sm);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--label);margin-bottom:9px}
.field{
width:100%;background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);
padding:14px 16px;font-family:inherit;font-size:15px;color:var(--ink);
outline:none;transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}
.field::placeholder{color:#616e86}
.field:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(49,87,255,.1)}
textarea.field{resize:vertical;min-height:132px}
select.field{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 21px) 22px,calc(100% - 16px) 22px;
background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.form-note{margin:0;font-size:13px;font-weight:700;color:#3f7c17}
.contact-list{border-top:1px solid var(--line)}
.contact-item{padding:22px 0;border-bottom:1px solid var(--line)}
.contact-item .k{font-size:var(--label-sm);font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.contact-item .v{display:block;font-family:"Space Grotesk";font-size:23px;letter-spacing:-.035em;margin-top:9px;color:var(--ink);transition:color .25s ease}
a.v:hover{color:var(--blue)}
.contact-item p{margin:6px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
.steps{list-style:none;padding:0;margin:18px 0 0}
.steps li{display:flex;gap:16px;margin:14px 0;font-size:14px;line-height:1.7;color:#4f5a70}
.steps b{color:var(--blue);font-family:"Space Grotesk";font-size:13px;letter-spacing:.06em;padding-top:2px}
/* Callout strip */
.callout{
background:#fff;border:1px solid var(--line);border-left:4px solid var(--lime);
border-radius:0 18px 18px 0;padding:24px 28px;
}
.callout p{margin:0;font-size:15px;line-height:1.8;color:#4f5a70}
.callout strong{color:var(--ink)}
/* Legal pages */
.legal-row{
display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);
gap:12px clamp(28px,4vw,56px);
padding:30px 0;border-bottom:1px solid var(--line);
}
.legal-head{display:flex;align-items:baseline;gap:18px}
.legal-head .n{font-size:var(--label-sm);font-weight:800;letter-spacing:.14em;color:var(--muted)}
.legal-head h2{font-family:"Space Grotesk";font-size:22px;letter-spacing:-.035em;margin:0}
.legal-row p{margin:0;font-size:14.5px;line-height:1.9;color:#4f5a70;max-width:78ch}
/* The second column of a legal row, when it holds more than one paragraph.
.legal-row is a two-column grid, so every direct child takes a cell: a
section with a heading and three paragraphs would lay itself out as a
staircase. Everything after the heading goes in here instead. */
.legal-body{min-width:0;display:flex;flex-direction:column;gap:16px}
.legal-body p{margin:0;font-size:14.5px;line-height:1.9;color:#4f5a70;max-width:78ch}
.legal-body h3{
font-family:"Space Grotesk";font-size:15px;letter-spacing:-.01em;
margin:6px 0 -6px;color:var(--ink);
}
.legal-body ul{margin:0;padding-left:20px;max-width:78ch}
.legal-body li{font-size:14.5px;line-height:1.9;color:#4f5a70;margin-bottom:8px}
.legal-body li:last-child{margin-bottom:0}
.legal-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.legal-body a:hover{color:var(--ink)}
.legal-body strong{color:var(--ink);font-weight:600}
/* A definition list, for the short question-and-answer runs (who the
supervisory authority is, what each right means). Cheaper to read than a
table when there are only two columns and no numbers to compare. */
.legal-defs{margin:0;font-size:14.5px;line-height:1.9;max-width:78ch}
.legal-defs dt{color:var(--ink);font-weight:600}
.legal-defs dd{margin:0 0 14px;color:#4f5a70}
.legal-defs dd:last-child{margin-bottom:0}
/* The purposes table. It scrolls inside its own box rather than pushing the
page sideways — a legal page that scrolls horizontally on a phone is one
nobody finishes. */
.legal-table-scroll{
overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0;
/* Four layers: two solid covers pinned to the box (background-attachment
local) and two shadows that scroll with the content. A shadow is only
visible once its cover has scrolled away, so the hint appears exactly when
there is something off-screen and never on a table that fits. Without it a
phone shows a column sliced down the middle with nothing saying it moves. */
background:
linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center,
radial-gradient(farthest-side at 0 50%, rgba(8,16,31,.14), rgba(8,16,31,0)) left center,
radial-gradient(farthest-side at 100% 50%, rgba(8,16,31,.14), rgba(8,16,31,0)) right center;
background-repeat:no-repeat;
background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
background-attachment:local, local, scroll, scroll;
}
.legal-table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px}
.legal-table th,.legal-table td{
text-align:left;vertical-align:top;padding:13px 16px;
border-bottom:1px solid var(--line);line-height:1.75;color:#4f5a70;
}
.legal-table th{
font-size:var(--label-sm);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--muted);border-bottom:1px solid var(--ink);white-space:nowrap;
}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table td:first-child{color:var(--ink);font-weight:600}
/* ── Chrome: reading-progress bar ────────────────────────────────────── */
.page-progress{position:fixed;top:0;left:0;z-index:1000;width:100%;height:2px;pointer-events:none}
.page-progress i{
display:block;width:0;height:100%;
background:linear-gradient(90deg,var(--blue),var(--cyan),var(--lime));
box-shadow:0 0 10px rgba(101,231,255,.45);
}
/* ── Shine on primary actions ────────────────────────────────────────── */
.btn-primary,.portal-primary{position:relative;overflow:hidden}
.btn-primary:before,.portal-primary:before{
content:"";position:absolute;inset:-40% auto -40% -80%;width:45%;
transform:skewX(-18deg);background:rgba(255,255,255,.32);
transition:left .7s cubic-bezier(.16,1,.3,1);pointer-events:none;
}
.btn-primary:hover:before,.portal-primary:hover:before{left:140%}
.btn,.link{transition:transform .25s ease,color .25s ease,background .25s ease}
.btn:hover{transform:translateY(-2px)}
.btn .pip{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.btn:hover .pip{transform:translateX(3px) rotate(-5deg)}
.link{position:relative;text-decoration:none}
.link:after{
content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1px;
background:currentColor;transform:scaleX(.25);transform-origin:left;
transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.link:hover:after{transform:scaleX(1)}
.case-file,.level-card{position:relative;overflow:hidden}
.service-card,.gov-card,.case,.price-card,.arrange-card{
transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease,border-color .35s ease;
}
.service-card:hover,.gov-card:hover,.case:hover,.price-card:hover{
transform:translateY(-7px);box-shadow:0 25px 55px rgba(8,16,31,.12);
}
.service-card:hover{border-color:#b9c4d6}
.price-card.featured:hover{transform:translateY(-14px)}
/* Status dot in the proof label */
.portal-proof-label:before{
content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--lime);box-shadow:0 0 12px rgba(184,255,61,.7);margin-right:8px;
vertical-align:1px;animation:statusPulse 2.2s ease-in-out infinite;
}
/* ── Motion ──────────────────────────────────────────────────────────── */
.portal-hero{animation:heroFade .9s ease both;background-size:120% 120%}
.portal-content > *{opacity:0;transform:translateY(24px);animation:heroIn .85s cubic-bezier(.16,1,.3,1) forwards}
.portal-content .portal-meta{animation-delay:.1s}
.portal-content .portal-eyebrow{animation-delay:.12s}
.portal-content .portal-title{animation-delay:.22s}
.portal-content .portal-copy{animation-delay:.34s}
.portal-content .portal-actions{animation-delay:.46s}
.portal-content .portal-pills{animation-delay:.58s}
.portal-proof{opacity:0;transform:translateY(20px);animation:heroIn .9s cubic-bezier(.16,1,.3,1) .7s forwards}
.portal-left{animation:portalLeft 10s ease-in-out infinite alternate}
.portal-right{animation:portalRight 10s ease-in-out infinite alternate}
.portal-orb{animation:orbFloat 4s ease-in-out infinite}
.portal-pills span{transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease}
.portal-pills span:hover{transform:translateY(-4px);border-color:rgba(111,161,255,.55);background:rgba(67,94,190,.2);color:#fff}
.portal-primary,.portal-secondary{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.portal-primary:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(184,255,61,.22)}
.portal-secondary:hover{transform:translateY(-3px);background:rgba(255,255,255,.08)}
.portal-proof-row span{transition:transform .3s ease,opacity .3s ease}
.portal-proof-row span:hover{transform:translateY(-4px);opacity:1}
/* One quiet entrance: a short rise, no long slide. It marks that a section has
arrived and then gets out of the way. Children are not separately animated —
a per-card stagger on top of this read as theatrical rather than helpful.
Gated on html.reveal-ready, which site.js adds only once it has wired up the
observer. If the script fails before that point the content simply shows,
un-animated, rather than staying invisible. */
.reveal{
transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.reveal-ready .reveal{opacity:0;transform:translateY(14px)}
.reveal-ready .reveal.in{opacity:1;transform:none}
.reveal .service-card,.reveal .gov-card,.reveal .case,.reveal .price-card,
.reveal .case-file,.reveal .level-card,.reveal .spec-row,.reveal .post-row,.reveal .rate-row{
transition:
background .3s ease,padding-left .3s ease,
box-shadow .35s ease,border-color .35s ease,transform .35s cubic-bezier(.16,1,.3,1);
}
.reveal.in .service-card,.reveal.in .gov-card,.reveal.in .case,.reveal.in .price-card,
.reveal.in .case-file,.reveal.in .level-card,.reveal.in .spec-row,.reveal.in .post-row,.reveal.in .rate-row{
opacity:1;transform:none;
}
.reveal.in .service-card:hover,.reveal.in .gov-card:hover,.reveal.in .case:hover,.reveal.in .price-card:hover{transform:translateY(-7px)}
.reveal.in .case-file:hover,.reveal.in .level-card:hover{transform:translateY(-5px)}
.reveal.in .price-card.featured:hover{transform:translateY(-14px)}
@keyframes heroFade{from{opacity:0}to{opacity:1}}
@keyframes heroIn{to{opacity:1;transform:none}}
@keyframes portalLeft{
from{transform:rotate(-11deg) translateX(-8px)}
to{transform:rotate(-11deg) translateX(12px)}
}
@keyframes portalRight{
from{transform:rotate(11deg) translateX(8px)}
to{transform:rotate(11deg) translateX(-12px)}
}
@keyframes orbFloat{
0%,100%{transform:translate(0,0) scale(1);opacity:.72}
50%{transform:translate(7px,-10px) scale(1.15);opacity:1}
}
@keyframes statusPulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
/* ── Responsive ──────────────────────────────────────────────────────── */
@media(max-width:1100px){
.footer-grid{grid-template-columns:1.6fr 1fr 1fr}
.footer-grid>div:first-child{grid-column:1/-1}
}
@media(max-width:950px){
.gap-grid,.ownership-inner,.faq-grid,.cta-inner,.contact-grid,.split,.split-even{grid-template-columns:1fr}
.trust-inner,.trust-inner.cols-3{grid-template-columns:1fr 1fr}
.trust-item:first-child{grid-column:1/-1}
.arrange-grid,.governance-grid,.evidence-grid,.price-grid,.level-grid{grid-template-columns:1fr}
.price-card.featured{transform:none}
.founder-grid{grid-template-columns:250px 1fr;gap:45px}
.service-grid{grid-template-columns:1fr}
.case-file{grid-template-columns:1fr}
.car-grid{grid-template-columns:1fr}
.band-copy{grid-template-columns:1fr}
.legal-row{grid-template-columns:1fr}
.portal-hero--page .portal-title{max-width:20ch}
}
@media(max-width:860px){
.spec-row,.spec-row--step{grid-template-columns:1fr;gap:12px}
.spec-n{padding-top:0}
.post-row{grid-template-columns:1fr;gap:8px}
.post-row .post-tag{order:-1}
.rate-row{grid-template-columns:1fr;gap:8px}
.rate-head{display:none}
.rate-label{
display:block;font-size:var(--label-sm);font-weight:700;letter-spacing:.12em;
text-transform:uppercase;color:var(--muted);margin-bottom:3px;
}
.form-2{grid-template-columns:1fr}
}
@media(max-width:680px){
/* The label floor. See the note beside the two custom properties. */
:root{--label-sm:12px;--label-xs:12px}
.wrap{width:min(var(--max),calc(100% - 28px))}
.trust-item{padding:18px 12px}
.trust-item strong{font-size:23px}
.trust-item:hover{padding-left:12px;transform:none}
/* Stacked, the two halves are no longer separated by the flex gap, and the
heading sets line-height:1 — so its descenders ran straight into the
paragraph, on every section head on the site. */
.section-head{display:block;margin-bottom:40px}
.section-head p{margin-top:22px;max-width:none}
.gap-copy{grid-template-columns:1fr}
.founder-grid{grid-template-columns:1fr}
.founder-photo{max-width:280px}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-grid>div:first-child{grid-column:1/-1}
.service-card:hover,.gov-card:hover,.case:hover,.price-card:hover{transform:translateY(-4px)}
}
/* ── Tablet ───────────────────────────────────────────────────────────────
Everything above collapses from three or two columns straight to one at
950px, and nothing widens it again until 950px on the way back up. So from
950px all the way down to 320px the site was a single column — the same
layout on an iPad in portrait as on the narrowest phone sold. A card that
suits a 340px screen is a 900px-wide band of one sentence on a tablet, and
the homepage came to 14,548px of scrolling at 768px.
This is the missing middle. Card grids — things that are a set of peers —
go two-up. The editorial two-part layouts above (a heading beside its
paragraph, .split, .gap-grid, .cta-inner) are deliberately not in this list:
those are one idea in two parts and they genuinely do want to stack.
620px is where two of these cards stop being comfortable, measured rather
than guessed: below it the pair is narrower than the 45ch the body copy in
them wants. */
@media(min-width:620px) and (max-width:950px){
.arrange-grid,
.governance-grid,
.evidence-grid,
.level-grid,
.service-grid,
.car-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Cards get their measure back once there are two of them. */
.service-card{min-height:0}
/* .arrange-grid--5 and .governance-grid--4 are handled at the foot of this
file, beside the rules that define them. */
}
@media(max-width:900px){
.portal-content{padding-top:50px}
.portal-arch{opacity:.78}
.portal-cut{opacity:.7}
}
@media(max-width:600px){
.portal-hero{min-height:760px}
.portal-hero--page{min-height:auto}
.portal-header-space{height:70px}
.portal-content{width:calc(100% - 28px);padding-top:50px}
.portal-hero--page .portal-content{width:calc(100% - 28px)}
.portal-title{font-size:clamp(43px,12.5vw,66px)}
.portal-hero--page .portal-title{font-size:clamp(36px,10.5vw,56px)}
.portal-copy{font-size:14px}
.portal-pills{margin-top:22px}
.portal-pills span{font-size:var(--label-xs);padding:7px 10px}
.portal-proof{margin-top:34px;padding-bottom:28px}
.portal-proof-row{gap:20px 30px}
.portal-proof-row span{font-size:14px!important}
.portal-left{left:-315px}
.portal-right{right:-315px}
.portal-cut-left{left:-140px}
.portal-cut-right{right:-140px}
.portal-orb{width:15px;height:15px;left:72%;top:51%}
}
/* ── Short viewports ──────────────────────────────────────────────────────
Every hero on the site declared a min-height in the 650-780px range and no
query ever reduced it, because the queries were all about width. A phone
held sideways is 360px tall: the homepage hero was more than twice the
height of the screen, so the first thing a visitor saw was a headline with
no call to action under it and no sign there was one. The same happens in a
short desktop window and on a laptop with a browser bar and a dock.
Height, not width, is the thing that ran out, so height is what this asks
about. The hero keeps its composition and simply stops reserving space it
has not been given. */
@media(max-height:620px){
.portal-hero{min-height:0}
.portal-header-space{height:64px}
.portal-content{padding-top:26px;padding-bottom:clamp(28px,4vh,48px)}
.portal-proof{margin-top:26px;padding-bottom:26px}
.portal-title{font-size:clamp(34px,6.4vh,60px)}
.portal-copy{margin-top:14px}
.portal-actions{margin-top:20px}
.portal-pills{margin-top:16px}
}
/* ── Touch ────────────────────────────────────────────────────────────────
Keyed on the pointer, not on the screen. Width does not tell you what is
doing the pointing: a laptop can have a touchscreen and a tablet can have a
trackpad, and it is the finger, not the viewport, that needs 44px.
Measured before this block: the footer's navigation links were 20px tall,
the contact links 18px, the inline "View all services" links 22-25px, the
FAQ rows 28px, the menu button 42px. A fingertip covers about 9mm, which is
44 CSS pixels; everything here was between a third and a half of that, on
the only pointing device that cannot be aimed precisely.
Nothing here changes a layout. The links that could take real padding got
it, the ones set in running text got an invisible box around them instead,
and the pointer query keeps all of it away from the mouse. */
@media(pointer:coarse){
/* Footer columns. The padding replaces the list spacing rather than adding
to it, so the rhythm of the column is unchanged and each row is 44px. */
.footer-grid li{margin:0}
.footer-grid li > a,
.footer-grid li > button{
display:inline-flex;align-items:center;min-height:44px;
}
/* Scoped like the base rule above it, and for the same reason: a bare
.footer-cta loses to .footer-grid a and this padding would never land. */
.footer-grid .footer-cta{padding-block:13px}
.brand-footer{display:inline-flex;align-items:center;min-height:44px}
/* 43px, one pixel short, on the homepage's second hero action. */
.portal-secondary{min-height:44px}
/* The header lockup. The shell is 62px tall, so this costs nothing. */
.site-header .brand{min-height:44px}
.menu-toggle{width:44px;height:44px}
.skip-link{padding:13px 20px}
/* An inline call to action carries its underline at a fixed offset, so it
cannot be padded without moving the rule away from the text. The hit area
is extended around it instead, which the layout never sees. */
.link{position:relative}
.link::before{
content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px;
}
/* The whole FAQ row, not the 28px of type inside it. */
details > summary{min-height:44px}
/* Email and phone are addresses, not prose, so the target-size exemption
for a link inside a sentence does not apply to them. Both the contact
list and the line under the closing call to action. */
.contact-item .v a,
.cta p a{display:inline-flex;align-items:center;min-height:44px}
/* Breadcrumbs. "Home" was a 33x20 target on every page but the homepage. */
.breadcrumb a,
.breadcrumb [aria-current="page"]{
display:inline-flex;align-items:center;min-height:44px;
}
.breadcrumb{padding-top:14px;padding-bottom:0}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{
animation-duration:.001ms!important;
animation-iteration-count:1!important;
transition-duration:.001ms!important;
}
.portal-hero,.portal-content > *,.portal-proof,
.portal-left,.portal-right,.portal-orb,.reveal,
.reveal .service-card,.reveal .gov-card,.reveal .case,.reveal .price-card,
.reveal .case-file,.reveal .level-card,.reveal .spec-row,.reveal .post-row,.reveal .rate-row{
animation:none!important;opacity:1!important;transform:none!important;
}
.page-progress{display:none}
}
/* ── Breadcrumb ──────────────────────────────────────────────────────────────
Sits on the cream, between the dark hero and the first content section, on
every page except the homepage. It is a real navigation aid on the nested
pricing pages, and everywhere else it is what makes the BreadcrumbList in the
page's JSON-LD an honest description of the page rather than a claim only a
crawler can see. Blue, not lime: this is structure, not an action. */
.breadcrumb{
padding:22px 0 4px;
font-size:13px;line-height:1.6;color:var(--muted);
}
.breadcrumb ol{
display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;
margin:0;padding:0;list-style:none;
}
.breadcrumb li{display:flex;align-items:center;gap:8px}
.breadcrumb li+li:before{
content:"/";color:var(--line);
}
.breadcrumb a{
color:var(--muted);
border-bottom:1px solid transparent;
transition:color .2s var(--ease),border-color .2s var(--ease);
}
.breadcrumb a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.breadcrumb [aria-current="page"]{color:var(--ink);font-weight:500}
@media(max-width:640px){
.breadcrumb{padding:16px 0 2px;font-size:12px}
}
/* ── Honeypot ────────────────────────────────────────────────────────────────
Off-screen rather than display:none or hidden. A bot worth anything skips a
field the CSS has switched off, so a honeypot that announces itself catches
nothing; one that is simply somewhere the eye never goes is still a real,
focusable, fillable input as far as a script is concerned. */
.hp-field{
position:absolute!important;
width:1px;height:1px;
margin:-1px;padding:0;border:0;overflow:hidden;
/* Clipped in place rather than parked at left:-9999px. Off-screen positioning
makes the element part of the document's scrollable width, so it only ever
looked harmless because body{overflow-x:hidden} was hiding it. Clipping
leaves it exactly as fillable and focusable as before — which is the whole
point of a honeypot — while taking it out of the layout entirely. */
clip-path:inset(50%);
white-space:nowrap;
}
/* -- Founding Partner rates -------------------------------------------
A struck-through standard rate above the price, and the line that says
why the number below it is lower. Both sit inside .price-card and
.plan, so the two pricing layouts share one treatment. */
.price-was{
display:block;margin:22px 0 0;font-family:"Space Grotesk",sans-serif;
font-size:20px;letter-spacing:-.03em;color:var(--muted);
text-decoration:line-through;text-decoration-thickness:1px;
}
.price-was + .price{margin-top:4px}
.price-note{
margin:0 0 16px;font-size:12px;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;color:var(--blue);
}
.price-after{margin:18px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
.price-after strong{color:var(--ink);font-weight:600}
/* Five arrangement items: a row of three, then two left-aligned beneath — the
same left edge as the row above. The previous version centred the last two
on a six-column grid, which broke the alignment between the two rows. */
.arrange-grid--5{grid-template-columns:repeat(3,1fr)}
@media(min-width:620px) and (max-width:950px){
.arrange-grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Five items two-up leaves the last one alone on its row. Given the full
width it reads as the closing item rather than as a gap. */
.arrange-grid--5 > :last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:619px){
.arrange-grid--5{grid-template-columns:1fr}
}
/* -- Numbered service rows: a lead line, a list and a "best for" ------- */
.spec-body p + p,
.spec-body ul + p{margin-top:14px}
/* "Typical work includes:" and "Best for:". The class was on eight paragraphs
in services.html and defined nowhere, so each of those lines sat exactly
halfway between the paragraph it follows and the list it introduces, and
read as belonging to neither. Pushed away from the paragraph above and
pulled towards the list below, it reads as the list's opening line. */
.spec-body p.spec-deliverable{margin-top:24px}
.spec-body p.spec-deliverable + ul{margin-top:8px}
.spec-body p.spec-deliverable strong{color:var(--ink);font-weight:700}
.spec-body p.spec-lead{
font-family:"Space Grotesk",sans-serif;font-size:19px;line-height:1.35;
letter-spacing:-.03em;color:var(--ink);
}
.spec-body ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.spec-body li{position:relative;padding-left:16px;font-size:14px;line-height:1.65;color:#4f5a70}
.spec-body li:before{
content:"";position:absolute;left:0;top:8px;width:6px;height:6px;
border-radius:50%;background:var(--blue);
}
/* A bullet list on a dark band. `.features` lives in pages.css, which the
homepage does not load, so a list marked up with it there rendered as
run-together text with no bullets at all.
Two columns so seven short items fill the band rather than running down its
left edge with the right half empty. */
.band-list{list-style:none;padding:0;margin:34px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:11px 48px;max-width:1040px}
.band-list li{position:relative;padding-left:19px;color:rgba(255,255,255,.72);font-size:15px;line-height:1.6}
.band-list li:before{
content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
border-radius:50%;background:var(--accent-dark);
}
@media(max-width:680px){.band-list{grid-template-columns:1fr}}
/* Four monthly-partnership cards read better as two rows of two than as
three and a stray. */
.governance-grid--4{grid-template-columns:repeat(2,1fr)}
@media(min-width:620px) and (max-width:950px){
.governance-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:619px){
.governance-grid--4{grid-template-columns:1fr}
}
/* ==========================================================================
UTILITIES
The twenty-eight Tailwind classes the markup actually used, written out.
They live at the end of the file for the same reason Tailwind's own layer
did: a utility on an element has to beat the component rule above it.
Values are Tailwind v3's defaults at a 16px root, so the markup did not have
to change when the CDN went away. Nothing new may be added here — a spacing
decision belongs to the component, not to a class in the HTML.
========================================================================== */
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.inline-block{display:inline-block}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.mt-0{margin-top:0}
.mt-4{margin-top:1rem}
.mt-5{margin-top:1.25rem}
.mt-6{margin-top:1.5rem}
.mt-7{margin-top:1.75rem}
.mt-8{margin-top:2rem}
.mt-9{margin-top:2.25rem}
.mt-10{margin-top:2.5rem}
.mt-12{margin-top:3rem}
.p-3{padding:.75rem}
.max-w-xs{max-width:20rem}
.max-w-sm{max-width:24rem}
.max-w-3xl{max-width:48rem}
.max-w-4xl{max-width:56rem}
.max-w-5xl{max-width:64rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
@media(min-width:768px){
.md\:text-6xl{font-size:3.75rem;line-height:1}
}
/* Line height after font size, which is the order Tailwind emitted these in.
The other way round, .text-sm carries its own 1.25rem line-height and beats
.leading-7, and every "text-sm leading-7" paragraph loses 8px of leading. */
.leading-none{line-height:1}
.leading-7{line-height:1.75rem}