*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:#232323;}
a{text-decoration:none;color:inherit;}
button{font:inherit;background:none;border:none;padding:0;cursor:pointer;color:inherit;}
img{max-width:100%;}
::selection{background:#af9f87;color:#232323;}
.page{
/* the live byvp.com palette, read off its stylesheet */
--black:#232323; --mid-black:#393939; --slate:#697278; --sand:#BAAA91;
--light-grey:#e0ddda; --mid-grey:#ddd8d1; --dark-grey:#d0cbc5;
--white:#fffffe; --green:#69786b; --light-brown:#af9f87; --brown:#697278;
--ease:cubic-bezier(.165,.84,.44,1);
--sides:clamp(20px,4vw,50px);
--maxw:1340px;
position:relative;width:100%;
background:var(--black);color:var(--white);
font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
font-weight:400;
-webkit-font-smoothing:antialiased;
overflow-x:clip;
}
/* ── grounds ──────────────────────────────────────────
Sections are told apart by their ground, never by a border. */
.band{position:relative;background:var(--bg);color:var(--fg);}
/* --mark flips logo artwork to the ground it is standing on */
.band-slate {--bg:#697278;--fg:#fffffe;--dim:rgba(255,255,254,.95);--line:rgba(255,255,254,.14);--chip:rgba(35,35,35,.22);--rule:rgba(255,255,254,.055);--mark:brightness(0) invert(1);}
.band-black {--bg:#232323;--fg:#fffffe;--dim:rgba(255,255,254,.62);--line:rgba(255,255,254,.10);--chip:rgba(255,255,254,.07);--rule:rgba(255,255,254,.042);--mark:brightness(0) invert(1);}
.band-light {--bg:#e0ddda;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.13);--chip:rgba(35,35,35,.07);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
/* soft neutral for content sections: the light band's type on #EAE8E6 */
.band-stone {--bg:#eae8e6;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.13);--chip:rgba(35,35,35,.07);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
/* Our roots on slate: the label cell and the region hover keep their contrast */
.band-slate .gt-n,.band-slate .gt-l{opacity:.95;}
.band-slate .gt-in::before{background:var(--light-brown);}
.band-slate .regions li:hover .r-n{color:var(--fg);}
.band-slate .gsec-tag:focus-visible{outline-color:var(--fg);}
.band-mid {--bg:#ddd8d1;--fg:#232323;--dim:rgba(35,35,35,.70);--line:rgba(35,35,35,.13);--chip:rgba(35,35,35,.07);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
.band-deep {--bg:#d0cbc5;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.13);--chip:rgba(35,35,35,.07);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
.band-white {--bg:#fffffe;--fg:#232323;--dim:rgba(35,35,35,.66);--line:rgba(35,35,35,.11);--chip:rgba(35,35,35,.06);--rule:rgba(35,35,35,.05);--mark:brightness(0);}
/* the inner pages' light hero band, used by the homepage hero too */
.band-sand {--bg:#fffffe;--fg:#282725;--dim:#55514e;--line:#b8b1aa;--chip:rgba(40,39,37,.07);--rule:rgba(40,39,37,.05);--mark:brightness(0);
--tick-rule:#b8b1aa;--pf-line:rgba(40,39,37,.05);--pf-tick:rgba(40,39,37,.18);
--hero-vline:rgba(40,39,37,.06);}
/* ── the column rules: byvp's signature 9-column field ── */
.shell{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding-inline:var(--sides);}
.rules{position:absolute;inset:0;z-index:0;pointer-events:none;
max-width:var(--maxw);margin-inline:auto;
display:grid;grid-template-columns:repeat(9,minmax(0,1fr));
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);
mask-image:linear-gradient(to bottom,transparent 0,#000 13%,#000 87%,transparent 100%);}
.rules span{border-left:1px solid var(--rule);}
.rules span:last-child{border-right:1px solid var(--rule);}
.pad{padding-block:clamp(72px,10vw,130px);}
.pad-sm{padding-block:clamp(52px,6vw,80px);}
/* ── type ─────────────────────────────────────────────
Serif carries display AND long-form copy; Inter carries
interface, small copy and the big tight-tracked figures. */
.sf{font-family:'Newsreader',Georgia,'Times New Roman',serif;font-weight:300;}
.it{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;}
h1,h2,h3{margin:0;font-weight:300;}
.display{font-family:'Newsreader',Georgia,serif;font-weight:300;
font-size:clamp(42px,7.4vw,104px);line-height:1.04;letter-spacing:-.05em;}
.h2{font-family:'Newsreader',Georgia,serif;font-weight:300;
font-size:clamp(30px,4.6vw,62px);line-height:1.02;letter-spacing:-.04em;}
.serif-lede{font-family:'Newsreader',Georgia,serif;font-weight:300;
font-size:clamp(23px,3.2vw,54px);line-height:1.13;letter-spacing:-.032em;margin:0;}
.serif-lede .it{color:inherit;}
/* section title: a quiet italic marker in parentheses at the head of each section */
.sec-title{margin:0 0 clamp(16px,1.8vw,26px);font-family:'Newsreader',Georgia,serif;
font-style:italic;font-weight:300;font-size:clamp(12.5px,1.02vw,15px);line-height:1.42;
letter-spacing:-.01em;color:var(--dim);}
.row-label .sec-title,.hero-top .sec-title{margin-bottom:0;}
.body{margin:0;font-size:clamp(14px,1.05vw,15px);line-height:1.62;color:var(--dim);letter-spacing:-.01em;}
.body + .body{margin-top:1.15em;}
/* the three standfirsts under the section headings read as one voice:
one size, one weight, one leading, no emphasised opening clause */
.lede-p{font-size:clamp(15px,1.3vw,18px);line-height:1.6;letter-spacing:-.01em;font-weight:400;}
.body .lead{color:var(--fg);font-weight:500;}
.tag{margin:0;font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);}
/* huge Inter, tracked tight — the figures voice */
.fig{font-weight:400;font-size:clamp(44px,6.6vw,87px);line-height:.92;letter-spacing:-.1em;}
.fig-label{font-weight:500;font-size:clamp(26px,4vw,57px);line-height:1.2;letter-spacing:-.07em;}
/* ── calls to action: text, never a button ─────────────
A rule that draws itself in, and an arrow that steps away. */
.cta{position:relative;display:inline-flex;align-items:baseline;gap:9px;
padding-bottom:5px;color:var(--fg);
font-size:clamp(14px,1.08vw,16px);font-weight:500;letter-spacing:-.02em;line-height:1.3;}
.cta::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:left;transition:transform .65s var(--ease);}
.cta:hover::after,.cta:focus-visible::after{transform:scaleX(1);}
.cta svg{flex:none;width:10px;height:10px;align-self:center;
transition:transform .55s var(--ease);}
.cta:hover svg,.cta:focus-visible svg{transform:translate(3px,-3px);}
.cta:focus-visible{outline:none;}
.cta-lg{font-size:clamp(15px,1.3vw,19px);}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,2.6vw,38px);}
/* the quieter of two adjacent links */
.cta-2{color:var(--dim);}
.cta-2:hover{color:var(--fg);}
/* a plain underlined link inside running copy */
.ul{position:relative;display:inline-block;padding-bottom:3px;color:var(--fg);}
.ul::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);}
.ul:hover::after,.ul:focus-visible::after{transform:scaleX(1);}
/* ── header ───────────────────────────────────────────── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:70;
display:flex;align-items:center;justify-content:space-between;gap:24px;
height:87px;padding-inline:var(--sides);
transition:background-color .6s var(--ease),height .6s var(--ease);}
.site-header.is-scrolled{height:68px;background:rgba(35,35,35,.92);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);}
.logo{display:inline-flex;align-items:center;min-height:44px;}
.logo img{height:27.77px;width:auto;display:block;filter:brightness(0) invert(1);}
.main-nav{display:flex;align-items:center;gap:clamp(16px,2vw,30px);}
/* centred on the page, not in the space the logo and the right-hand
links leave, so it shares the axis of the centred hero below; the bar
is fixed, so this is placed within it and moves with its height */
@media (min-width:1001px){
.main-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
}
/* nav links take the same drawn rule as the text CTAs */
.main-nav a{position:relative;font-size:14px;font-weight:400;letter-spacing:-.02em;
color:rgba(255,255,254,.78);transition:color .5s var(--ease);}
.main-nav a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);}
.main-nav a:hover,.main-nav a:focus-visible{color:var(--white);}
.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1);}
.header-right{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px);}
.header-right .cta{font-size:14px;color:rgba(255,255,254,.78);}
.header-right .cta:hover{color:#fffffe;}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;color:#fffffe;}
/* Over the light hero the bar is clear, the warm-white ground running up
behind it, with the charcoal logo and type. Past 50px of scroll it fills
with warm white in .28s, a hairline under it, and clears again at the top. */
.site-header{background-color:rgba(255,255,254,0);box-shadow:0 1px 0 rgba(35,35,35,0);
transition:background-color .28s var(--ease),box-shadow .28s var(--ease),height .6s var(--ease);}
.site-header.is-scrolled{background-color:#fffffe;box-shadow:0 1px 0 rgba(35,35,35,.08);
backdrop-filter:none;-webkit-backdrop-filter:none;}
.site-header .logo img{filter:brightness(0);}
.site-header .main-nav a,
.site-header .header-right .cta{color:rgba(40,39,37,.78);}
.site-header .main-nav a:hover,
.site-header .main-nav a:focus-visible,
.site-header .main-nav a.is-current,
.site-header .header-right .cta:hover{color:#282725;}
.site-header .nav-toggle{color:#282725;}
.mobile-menu{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--black);color:var(--white);}
.mobile-menu-close{position:absolute;top:12px;right:12px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1;}
.mobile-menu nav{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:90px clamp(24px,7vw,56px) 24px;}
.mobile-menu nav a{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(32px,9vw,52px);letter-spacing:-.04em;}
.mobile-menu-foot{display:flex;flex-wrap:wrap;gap:10px;padding:0 clamp(24px,7vw,56px) 44px;}
/* ── hero ───────────────────────────────────────────────
One screen exactly: the band is the viewport, the header sits
inside it, and the composition centres in what is left. Type
is capped against the viewport HEIGHT as well as its width, so
a short laptop screen scales the headline down instead of
pushing the arrival below the fold. */
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100dvh;
display:flex;flex-direction:column;
padding-top:calc(87px + clamp(16px,3.2vh,40px));
padding-bottom:clamp(20px,3.2vh,40px);}
/* the cover is centred, not divided: the 75/25 rule belongs to the
content below, and the break between the two is the point */
.hero-mid{position:relative;z-index:2;flex:1 1 auto;min-height:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;gap:clamp(14px,2.2vh,26px);}
/* 400 rather than 300: Newsreader's regular has more presence at
display size without reading as a bold. Capped against the
viewport height so the whole hero holds one screen. */
.hero h1{max-width:none;font-weight:400;letter-spacing:-.052em;line-height:.98;
font-size:clamp(46.5px,min(8.7vw,13.15vh),140px);}
.hero h1 .it{color:#BAAA91;font-weight:400;}
/* phones set the headline as three lines; above 640px it is two */
@media (min-width:641px){.hero h1 .br-m{display:none;}}
.hero-lede{max-width:36em;font-size:clamp(15.5px,min(1.2vw,2vh),17px);line-height:1.62;color:rgba(255,255,254,.82);margin:0;}
.hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(20px,3vw,46px);}
/* the scroll mark, closing the cover and pointing at section 01 */
.hero-scroll{position:relative;z-index:2;flex:none;align-self:center;
margin-top:clamp(16px,3vh,32px);
display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.2vh,12px);
text-decoration:none;color:rgba(255,255,254,.95);transition:color .5s var(--ease);}
.hero-scroll::before{content:'';width:1px;height:clamp(22px,4vh,46px);background:rgba(255,255,254,.26);}
.hero-scroll span{font-size:10px;letter-spacing:.24em;text-transform:uppercase;}
.hero-scroll svg{width:9px;height:13px;color:rgba(255,255,254,.72);
animation:scrollNudge 2.8s var(--ease) infinite;}
.hero-scroll:hover svg{color:#fffffe;}
/* Two editorial labels, desktop only (1024px and up): 55px in from each
edge, centred on the baseline of the italic headline line (44.3% of
the hero, where the centred copy puts it), above the background drawing. Positioned on the hero, so they
scroll with it. They fade in with the copy. */
.hero-tag{display:none;}
@media (min-width:1024px){
.hero-tag{display:block;position:absolute;z-index:2;top:44.3%;transform:translateY(-50%);margin:0;
font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;
line-height:1;letter-spacing:2.5px;text-transform:uppercase;white-space:nowrap;color:#99938f;
pointer-events:none;animation:tagIn 1s var(--ease) .7s both;}
.hero-tag-l{left:55px;text-align:left;}
.hero-tag-r{right:55px;text-align:right;}
}
@keyframes tagIn{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion:reduce){.hero-tag{animation:none;}}
/* ── the hero on the light band ───────────────────────────────
The rules above were drawn for slate. On warm white the same
elements take the inner pages' palette: charcoal type, the warm
brown for the italic, their line and tick colours for the grid,
and every mark flattened to charcoal at the opacity it already had.
Prefixed with the band so they outrank the slate rules wherever
those sit, media queries included. */
.band-sand .hero h1 .it{color:var(--sand);}
.band-sand .hero-lede{color:var(--dim);}
.band-sand .hero-scroll{color:var(--fg);}
.band-sand .hero-scroll::before{background:rgba(40,39,37,.22);}
.band-sand .hero-scroll svg{color:rgba(40,39,37,.72);}
.band-sand .hero-scroll:hover svg{color:var(--fg);}
.band-sand .hf-cell{border-right-color:var(--pf-line);border-bottom-color:var(--pf-line);}
.band-sand .hf-cell.mk::after{
background:linear-gradient(var(--pf-tick),var(--pf-tick)) center/9px 1px no-repeat,
linear-gradient(var(--pf-tick),var(--pf-tick)) center/1px 9px no-repeat;}
.band-sand .hf-l img,.band-sand .hs-cell img{filter:brightness(0);}
.band-sand .hf-word{color:var(--fg);}
@keyframes scrollNudge{0%,100%{transform:translateY(0);}50%{transform:translateY(4px);}}
/* ── the field ────────────────────────────────────────
Six columns by five rows behind everything, built as real cells so
the rules ARE the cell edges rather than a texture laid underneath.
The middle two columns carry no marks at all: the quiet zone is
made by leaving space, not by putting a panel over the grid. */
.hero-field{position:absolute;inset:0;z-index:0;pointer-events:none;
display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
grid-template-rows:repeat(5,minmax(0,1fr));}
.hf-cell{position:relative;display:flex;align-items:center;justify-content:center;
min-width:0;min-height:0;padding:clamp(8px,1.3vw,22px);
border-right:1px solid rgba(255,255,254,.064);
border-bottom:1px solid rgba(255,255,254,.064);}
.hf-cell:nth-of-type(6n){border-right:0;}
.hf-cell:nth-of-type(n+25){border-bottom:0;}
/* The twelve cells behind the headline — columns 2 to 5 of rows 2 to 4 —
are left clean. Only the lines BETWEEN them are dropped: the four
lines that bound the block are drawn by the cells outside it, so the
rules stop exactly on its edge with no fragment left over.
Six columns only, so this is desktop; the mobile grid is three wide
and renumbers, which is why it is scoped. */
@media (min-width:1001px){
/* The top row carries the navigation and nothing else: no marks, no
rules, and only as tall as the 87px bar plus a little air. The
hero is a full viewport, so the four rows below share what the
top row gives up — they grow, they do not move. */
.hero-field{grid-template-rows:96px repeat(4,minmax(0,1fr));}
/* One horizontal rule only: row 1's bottom edge, under the navigation.
Every other cell edge, and the crossing ticks, stand down. */
.hf-cell{border-right:0;}
.hf-cell:nth-of-type(n+7){border-bottom:0;}
.hf-cell.mk::after{display:none;}
/* Four verticals at a fifth, two fifths, three fifths and four fifths
of the width, from that rule to the hero's foot, behind everything.
They are the field's own lines, not the copy's: nothing is sized or
aligned to them. */
.hero-field::after{content:'';position:absolute;left:0;right:0;top:96px;bottom:0;
background:
linear-gradient(var(--hero-vline),var(--hero-vline)) 20% 0/1px 100% no-repeat,
linear-gradient(var(--hero-vline),var(--hero-vline)) 40% 0/1px 100% no-repeat,
linear-gradient(var(--hero-vline),var(--hero-vline)) 60% 0/1px 100% no-repeat,
linear-gradient(var(--hero-vline),var(--hero-vline)) 80% 0/1px 100% no-repeat;}
/* ── EXPERIMENT: concentric rings ─────────────────────────────────
To revert, delete this block. Nine 1px rings (inline SVG) centred
near the right edge,
on the hero's own ::before, behind everything and starting at the
rule under the navigation. One elliptical radial mask, centred on
the rings and wider than it is tall, keeps them clearest at their
centre and dissolves them toward the middle of the hero and toward
its top and bottom, with no visible edge.
Tune with the variables: --ring-cx/--ring-cy place the centre, --ring-d
is the drawing's size, --ring-fade-x/-y the reach of the fade. */
.hero::before{
--ring-cx:97vw; --ring-cy:52%; --ring-d:120vw; --ring-fade-x:50vw; --ring-fade-y:56%;
content:'';position:absolute;left:0;right:0;top:96px;bottom:0;z-index:0;pointer-events:none;
/* the drawing is --ring-d square with its centre at its middle; the y
offset converts "52% of the hero" into this box, which starts 96px down */
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='none' stroke='%239a948d' stroke-opacity='.42'%3E%3Ccircle cx='600' cy='600' r='80' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='128' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='176' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='224' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='272' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='320' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='368' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='416' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='464' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
calc(var(--ring-cx) - var(--ring-d) / 2) calc(var(--ring-cy) + var(--ring-d) * .02 - 46px)/var(--ring-d) var(--ring-d) no-repeat;
-webkit-mask:radial-gradient(ellipse var(--ring-fade-x) var(--ring-fade-y) at var(--ring-cx) calc(var(--ring-cy) - 46px),
#000 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,.3) 58%,transparent 100%);
mask:radial-gradient(ellipse var(--ring-fade-x) var(--ring-fade-y) at var(--ring-cx) calc(var(--ring-cy) - 46px),
#000 0%,rgba(0,0,0,.78) 26%,rgba(0,0,0,.3) 58%,transparent 100%);}
/* ── end EXPERIMENT ── */
/* The strip is anchored near the foot of the hero (11.5vh up, where it
sat at 1440 x 900), and the copy fills the space above it, centred
between the rule under the navigation and the strip's caption. */
.hero{padding-top:96px;padding-bottom:clamp(48px,11.5vh,124px);}
/* a little more air between the supporting line and the buttons —
on top of the stack's own gap, so the pair keep their alignment,
their spacing from each other and their size */
.hero-mid .hero-actions{margin-top:clamp(10px,1.6vh,20px);}
.hero-scroll{display:none;}
/* scoped to .hero so these outrank the strip's base rules, which sit
later in the sheet */
/* room above the logos for their caption (27px clear + its 11px line),
so the copy is centred against the caption, not the logos */
.hero .hero-strip{margin-top:38px;top:0;}
}
/* A portrait screen at desktop width (iPad Pro 12.9" upright): the hero
is held to 90vw tall instead of the whole screen, the strip sits the
same 11.5% of it from the foot as on a landscape desktop, and the
headline takes the tablets' 11vw, so it keeps its share of the hero. */
@media (min-width:1001px) and (orientation:portrait){
.hero{min-height:min(100svh,90vw);padding-bottom:calc(90vw * .115);}
.hero h1{font-size:min(11vw,13.15vh,140px);}
}
/* from 1024px: the whole composition (copy, strip with its caption, and
the side labels) sits 24px lower, by offset, so no spacing or the
hero's height changes */
@media (min-width:1024px){
.hero-mid{top:24px;}
.hero .hero-strip{top:24px;}
.hero-tag{top:calc(44.3% + 24px);}
.hero .hs-caption{bottom:calc(100% + 27px);}
.hero .hs-track{animation-duration:calc(var(--strip-n,17) * 60s / 17);}
.hero .hs-cell{width:clamp(170px,13.5vw,230px);height:44px;}
.hero .hs-cell img{max-width:clamp(120px,9.5vw,160px);max-height:40px;opacity:.2;}
}
/* a tick at a few crossings, the size of a surveyor's mark */
.hf-cell.mk::after{content:'';position:absolute;right:-4px;bottom:-4px;width:9px;height:9px;
background:linear-gradient(rgba(255,255,254,.26),rgba(255,255,254,.26)) center/9px 1px no-repeat,
linear-gradient(rgba(255,255,254,.26),rgba(255,255,254,.26)) center/1px 9px no-repeat;}
.hf-mark{position:relative;width:100%;height:100%;pointer-events:auto;}
.hf-mark.rv{transform:none;}
.hf-l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
/* every mark is flattened to one light grey, so artwork and wordmarks
read as a single system: brightness(0) drops all brand colour to
black, invert(.86) lifts that silhouette back to grey. Transparency
survives both, so nothing gains a white box behind it. */
.hf-l img{max-width:87%;max-height:52%;width:auto;height:auto;object-fit:contain;
filter:brightness(0) invert(.86);}
.hf-word{font-size:clamp(15px,1.38vw,21px);letter-spacing:-.02em;white-space:nowrap;
color:#dbdbdb;}
/* at rest the marks sit inside the architecture rather than on it */
/* nothing runs while the tab is in the background */
.page-hidden .hs-track{animation-play-state:paused;}
/* ── the strip: the collection crossing the hero, edge to edge ──
A flex child of .hero, which carries no horizontal padding, so
width:100% reaches both edges without 100vw and without the
scrollbar arithmetic that brings. The mask takes both ends to
nothing. The track holds the collection twice and travels half its
own length, so the loop closes with no seam. Desktop sizes it more
generously in its own block above. */
.hero-strip{display:block;position:relative;z-index:2;flex:none;width:100%;
margin-top:clamp(22px,4vh,40px);text-decoration:none;color:inherit;}
/* the whole strip is one link to the portfolio */
.hero-strip:focus-visible{outline:1px solid var(--line);outline-offset:6px;}
/* the clipping and edge fade live on an inner wrapper, so the caption can
sit above the strip without being cut off */
.hs-clip{overflow:hidden;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
/* the logos arrive with their caption, by which time the page has set
the loop to open on Invisible (componentDidMount) */
animation:tagIn 1s var(--ease) .7s both;}
/* "Backing exceptional companies": a caption 22px above the logos, out of
the flow so nothing around it moves; same voice as the hero's side labels. */
.hs-caption{position:absolute;left:0;right:0;bottom:calc(100% + 22px);margin:0;text-align:center;
font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:400;
line-height:1;letter-spacing:2.5px;text-transform:uppercase;white-space:nowrap;color:#99938f;
animation:tagIn 1s var(--ease) .7s both;}
@media (max-width:640px){.hs-caption{font-size:10px;letter-spacing:2px;}}
/* very short phones have no room between the buttons and the logos */
@media (max-width:640px) and (max-height:620px){.hs-caption{display:none;}}
@media (prefers-reduced-motion:reduce){.hs-caption,.hs-clip{animation:none;}}
.hs-track{display:flex;align-items:center;width:max-content;will-change:transform;
animation:stripRun calc(var(--strip-n,17) * 45s / 17) linear infinite;}
/* the loop travels half the track, so its time scales with the number of
marks: the pace set for the original seventeen holds whatever the count */
.hs-cell{flex:none;display:flex;align-items:center;justify-content:center;
width:clamp(104px,27vw,156px);height:clamp(34px,7vw,46px);}
.hs-cell img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
filter:brightness(0) invert(.86);opacity:.26;}
@keyframes stripRun{from{transform:translate3d(-50%,0,0);}to{transform:translate3d(0,0,0);}}
.hf-in{opacity:.2;transition:opacity .45s var(--ease);}
.hf-out{opacity:0;}
.hf-mark:hover .hf-in{opacity:.55;}
/* backwards, not both: the fill must not outrank the hover transition */
@keyframes hfInA{from{opacity:0;}to{opacity:.2;}}
@keyframes hfInB{from{opacity:0;}to{opacity:.2;}}
@keyframes hfOutA{from{opacity:.2;}to{opacity:0;}}
@keyframes hfOutB{from{opacity:.2;}to{opacity:0;}}
.hf-in.sw-a{animation:hfInA .42s var(--ease) backwards;}
.hf-in.sw-b{animation:hfInB .42s var(--ease) backwards;}
.hf-out.sw-a{animation:hfOutA .42s var(--ease) backwards;}
.hf-out.sw-b{animation:hfOutB .42s var(--ease) backwards;}
/* the wordmark line under the About Us figures, and the link
that closes it — the marks sit on the band's full width,
the type on the brand's own measure */
.rail-marks{position:relative;z-index:2;}
.rail-marks .sc-track{gap:clamp(52px,6.7vw,124px);}
/* a quarter larger than the shared marquee sizes, marks and
wordmarks together so the line keeps its proportions */
.rail-marks .tm-lg span{font-size:clamp(26px,3.1vw,43px);}
.rail-marks .tm-lg img{height:clamp(53px,5.8vw,83px);}
.rail-marks .tm-md span{font-size:clamp(20px,2.3vw,31px);}
.rail-marks .tm-md img{height:clamp(43px,4.6vw,65px);}
.rail-marks .tm-sm span{font-size:clamp(17px,1.8vw,24px);}
.rail-marks .tm-sm img{height:clamp(35px,3.75vw,53px);}
.rail-marks:hover .sc-track,.rail-marks:focus-within .sc-track{animation-play-state:paused;}
.marks-lead{position:relative;z-index:2;display:flex;justify-content:center;
margin:clamp(22px,2.6vw,38px) 0 0;padding-bottom:clamp(56px,7vw,106px);}
.marks-lead .cta{font-size:clamp(13px,1.02vw,15px);}
/* the wordmarks closing the hero: artwork straight on the ground,
no cards, no rules — one quiet line of companies running past */
.hero-marks{position:relative;z-index:2;flex:none;margin-top:clamp(16px,2.6vh,40px);overflow:hidden;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);}
.hm-track{display:flex;align-items:center;gap:clamp(64px,8.4vw,150px);width:max-content;
animation:run 72s linear infinite;will-change:transform;}
.hero-marks:hover .hm-track,.hero-marks:focus-within .hm-track{animation-play-state:paused;}
.hm{flex:none;display:inline-flex;align-items:center;opacity:.52;
transition:opacity .6s var(--ease),transform .6s var(--ease);}
/* 1.75× the previous height, still governed by the viewport so the
hero cannot outgrow one screen */
.hm img{display:block;width:auto;height:clamp(73px,11.5vh,140px);
filter:brightness(0) invert(1);}
.hm:hover,.hm:focus-visible{opacity:1;transform:scale(1.05);}
.hm:focus-visible{outline:1px solid var(--light-brown);outline-offset:8px;}
/* the hero marquee: names and wordmarks set straight on the ground,
no cards — sizes and weights vary so the line reads as a composition */
.scroller{position:relative;z-index:2;margin-top:clamp(44px,5.2vw,82px);
display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px);}
.sc-row{overflow:hidden;padding-block:8px;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%);}
.sc-track{display:flex;align-items:center;gap:clamp(24px,3vw,52px);width:max-content;
animation:run 78s linear infinite;will-change:transform;}
.scroller:hover .sc-track,.scroller:focus-within .sc-track{animation-play-state:paused;}
.tm{display:inline-flex;align-items:center;flex:none;color:var(--fg);
transition:opacity .6s var(--ease),transform .6s var(--ease);}
.tm span{white-space:nowrap;letter-spacing:-.028em;line-height:1;}
.tm img{display:block;width:auto;filter:var(--mark);}
.tm:hover,.tm:focus-visible{opacity:1;transform:scale(1.045);}
.tm:focus-visible{outline:1px solid var(--light-brown);outline-offset:6px;}
/* three typographic weights down the line */
.tm-lg span{font-size:clamp(21px,2.5vw,34px);font-weight:400;}
/* the logo artwork is a square canvas with the mark inset, so these run
much taller than the type they sit beside in order to match it optically */
.tm-lg img{height:clamp(42px,4.6vw,66px);}
.tm-md span{font-size:clamp(16px,1.85vw,25px);font-weight:500;}
.tm-md img{height:clamp(34px,3.7vw,52px);}
.tm-sm span{font-size:clamp(13.5px,1.45vw,19px);font-weight:500;}
.tm-sm img{height:clamp(28px,3vw,42px);}
/* and three resting opacities, so names surface and recede */
.tm-o1{opacity:.92;} .tm-o2{opacity:.68;} .tm-o3{opacity:.46;}
.tm-dot{flex:none;width:3px;height:3px;border-radius:50%;background:var(--light-brown);opacity:.55;}
/* ── the kinetic band: huge serif, running horizontally ── */
.ticker{position:relative;overflow:hidden;padding-block:clamp(26px,3.4vw,46px);}
.ticker-track{display:flex;width:max-content;gap:0;animation:run 46s linear infinite;will-change:transform;}
.ticker:hover .ticker-track{animation-play-state:paused;}
@keyframes run{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker-track span{display:inline-flex;align-items:center;gap:clamp(20px,2.6vw,40px);padding-right:clamp(20px,2.6vw,40px);
font-family:'Newsreader',Georgia,serif;font-weight:300;
font-size:clamp(44px,7vw,104px);line-height:1.1;letter-spacing:-.045em;white-space:nowrap;color:var(--fg);}
.ticker-track em{font-style:italic;color:var(--brown);}
.tk-mark{flex:none;width:clamp(30px,3.4vw,52px);height:clamp(30px,3.4vw,52px);opacity:.55;}
/* ── the statement: the focal point of the section that
carries the numbers. Each line lifts a beat after the one
above it; the breaks are authored, not left to the wrap. */
/* the copy and the figures run side by side, each centred
against the other rather than hanging from a shared top edge */
/* the statement runs the full content field, so the display size
is set against that measure rather than a column of it */
/* the statement carries .h2 in the markup, so family, weight, colour and
tracking come from that one scale. It takes its own size: 58px against
the other headings' 62px, with a touch more leading to carry four
authored lines. */
.statement p{margin:0;color:var(--fg);}
/* 50px on desktop. The three breaks are authored, so a fourth line can
only appear if one of them wraps: the longest, "problems big enough
to justify it.", runs about 730px at this size inside an 866px field,
so it holds with room to spare at every width the clamp covers. */
.statement .h2{font-size:clamp(26px,3.7vw,50px);line-height:1.08;}
.statement .it{color:var(--sand);}
.statement-cta{margin:clamp(26px,3vw,42px) 0 0;}
/* ── the figure rows and the regional tally answer the pointer
the way every other ruled row on the site does: the rule draws
itself, the label steps in, the number comes forward. */
.figs li,.regions li{position:relative;}
.figs li::after,.regions li::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
background:currentColor;transform:scaleX(0);transform-origin:left;
transition:transform .9s var(--ease);}
.regions li:hover::after{transform:scaleX(1);}
.fig-label,.regions .r-name{transition:transform .7s var(--ease),opacity .8s var(--ease);}
.regions li:hover .r-name{transform:translateX(9px);}
.regions li:hover .r-name{opacity:1;}
.cap{transition:background-color .6s var(--ease),color .6s var(--ease),transform .7s var(--ease);}
/* A figure row answers a real pointer on hover. Touch screens have none
(and would leave a tapped row lit), so there a tap or press lights it
the same way for a moment: is-pressed, set in componentDidMount. */
@media (hover:hover){
.figs li:hover::after{transform:scaleX(1);}
.figs li:hover .fig-label{transform:translateX(9px);}
.figs li:hover .cap{background:var(--sand);color:var(--black);transform:translateY(-3px);}
}
.figs li.is-pressed::after{transform:scaleX(1);}
.figs li.is-pressed .fig-label{transform:translateX(9px);}
.figs li.is-pressed .cap{background:var(--sand);color:var(--black);transform:translateY(-3px);}
.regions .r-n{transition:color .6s var(--ease);}
.regions li:hover .r-n{color:var(--sand);}
.st-line{display:block;opacity:0;transform:translateY(26px);
transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s);}
/* narrow screens set it as one paragraph: forced breaks would wrap twice */
@media (max-width:900px){
/* the statement takes the whole measure on a phone: the authored
breaks give way and the sentence wraps edge to edge */
.statement{max-width:none;}
.st-line{display:inline;opacity:0;transform:none;transition:opacity .9s var(--ease);transition-delay:0s;}
.statement.in .st-line{opacity:1;}
}
.statement.in .st-line{opacity:1;transform:none;}
/* the block itself does not fade — only its lines move */
.statement.rv{opacity:1;transform:none;transition:none;}
/* ── the figures rows, in the half beside the statement:
the same label-and-capsule treatment, stepped down to the
narrower measure ─────────────────────────────────────── */
.metrics{margin-top:0;}
.metrics .fig-label{font-size:clamp(19px,2.1vw,30px);letter-spacing:-.05em;}
.metrics .fig{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.08em;}
.metrics .cap{min-width:clamp(62px,6vw,88px);padding:clamp(5px,.6vw,10px) clamp(11px,1.2vw,18px);}
.metrics li{padding-block:clamp(13px,1.5vw,21px);}
/* the Why Us pair runs quieter than the headline figures above */
.figs-sm .fig-label{font-size:clamp(17px,1.8vw,26px);letter-spacing:-.045em;}
.figs-sm .fig{font-size:clamp(24px,2.6vw,36px);letter-spacing:-.07em;}
.figs-sm .cap{min-width:clamp(56px,5.4vw,80px);padding:clamp(4px,.5vw,8px) clamp(10px,1.1vw,16px);}
.figs-sm li{padding-block:clamp(12px,1.3vw,19px);}
/* ── editorial rows: label introduces the content below ────── */
.row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:0;}
.row-label{grid-column:1 / span 7;margin-bottom:clamp(14px,1.6vw,22px);}
.row-main{grid-column:1 / span 5;}
.row-wide{grid-column:1 / span 7;}
.row-full{grid-column:1 / span 9;}
/* the tally runs the full content field, under the statement */
.nums-list{margin-top:clamp(44px,5.4vw,84px);}
/* the four headline figures in a softer charcoal; the hover and tap still
set the number in black on sand (those rules outrank this one) */
.figs.nums-list .fig-label,.figs.nums-list .cap{color:#333333;}
/* 01: the copy reads at the left, the regional tally runs beside it,
and the firm's numbers take the full measure underneath */
/* copy then tally, each running the full content field; the headline
scales with the width it has, the regions keep the page's
full-width tally treatment */
.gm-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;}
.gm-copy .body{max-width:74ch;}
.gm-side{display:flex;flex-direction:column;}
.regions-cta{margin:clamp(22px,2.4vw,34px) 0 0;}
.gm-below .figs{margin-top:clamp(40px,4.6vw,70px);}
/* figures list: label left, number in a capsule right */
.figs{list-style:none;margin:clamp(36px,4vw,60px) 0 0;padding:0;}
.figs li{display:flex;align-items:center;justify-content:space-between;gap:24px;
padding-block:clamp(16px,1.8vw,26px);border-top:1px solid var(--line);}
.figs li:last-child{border-bottom:1px solid var(--line);}
.figs .fig-label{color:var(--fg);}
.cap{display:inline-flex;align-items:center;justify-content:center;min-width:clamp(82px,9vw,128px);
padding:clamp(6px,.8vw,14px) clamp(14px,1.6vw,26px);border-radius:999px;background:var(--chip);color:var(--fg);}
/* region tally, as on byvp: huge sans + small italic count */
.regions{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;}
.regions li{display:flex;align-items:baseline;gap:clamp(10px,1.4vw,22px);}
.regions .r-name{font-weight:400;font-size:clamp(38px,6.4vw,84px);line-height:1.12;letter-spacing:-.075em;color:var(--fg);opacity:.5;transition:opacity .8s var(--ease);}
.regions li.on .r-name{opacity:1;}
.regions .r-n{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(14px,1.4vw,20px);color:var(--dim);}
/* ── decisions list ───────────────────────────────────── */
/* ── 02: headline, copy and portrait hold the left measure;
the tally sets against them across the gutter ────────────── */
.ops-copy .body{max-width:68ch;}
.ops-figure{position:relative;margin:clamp(30px,3.4vw,46px) 0 0;aspect-ratio:5 / 2.9;
overflow:hidden;border-radius:6px;background:var(--chip);}
/* the photograph drifts against the scroll; the frame crops the travel.
Hover warms it rather than zooming, so the two never fight. */
.ops-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
filter:saturate(.72) contrast(.98);
transform:translate3d(0,var(--py,0px),0) scale(1.09);will-change:transform;
transition:filter 1.1s var(--ease);}
.ops-figure:hover img{filter:saturate(1) contrast(1);}
.figure{margin:0;}
.figure img{display:block;width:100%;height:auto;border-radius:6px;}
.figure figcaption{margin-top:12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
/* ── testimonials ─────────────────────────────────────
The quote sits on the page's own left margin at full measure;
attribution and controls share one ruled line beneath it. */
/* the evidence line: the house figure rows, set two across so the
numbers read as one horizontal line of proof under the claim
rather than a stacked list competing with the quote below */
.ev-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:clamp(28px,3.6vw,60px);margin-top:clamp(42px,5vw,76px);}
.ev-figs li{border-bottom:1px solid var(--line);}
.ev-figs .fig-label{font-size:clamp(18px,1.9vw,29px);letter-spacing:-.045em;}
.ev-figs .fig{font-size:clamp(26px,2.8vw,41px);letter-spacing:-.075em;}
.ev-figs .cap{min-width:clamp(60px,5.8vw,88px);padding:clamp(5px,.6vw,10px) clamp(11px,1.2vw,18px);}
.ev-figs li{padding-block:clamp(13px,1.5vw,21px);}
.quote-wrap{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:clamp(24px,2.8vw,40px);align-items:center;}
.quote-body{grid-column:1 / span 7;}
.quote-text{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:300;
font-size:clamp(19px,2.1vw,29px);line-height:1.24;letter-spacing:-.03em;color:var(--fg);}
.quote-meta{grid-column:1 / span 5;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--line);}
.quote-name{margin:0;font-size:15px;font-weight:500;letter-spacing:-.02em;color:var(--fg);}
.quote-co{margin:0;font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:300;font-size:16px;color:var(--dim);}
.quote-loc{font-style:normal;font-family:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
font-size:11px;letter-spacing:.09em;text-transform:uppercase;}
/* One size for every quote, whatever its length. The block used to
shrink the long ones to hold a steady footprint; without that, the
reserved height does the same job, so the attribution and the
controls beneath it stay put as you page through. The longest quote
runs a line or two past it and the block simply grows. */
.quote-body{min-height:10.5em;}
.quote-nav{grid-column:7 / span 3;display:flex;align-items:center;justify-content:flex-end;gap:10px;
padding-top:clamp(16px,1.8vw,24px);border-top:1px solid var(--line);}
.qbtn{width:44px;height:44px;border-radius:999px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
transition:background-color .5s var(--ease),border-color .5s var(--ease);}
.qbtn:hover{background:var(--chip);border-color:currentColor;}
.qbtn svg{width:16px;height:16px;}
.qcount{font-size:12px;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums;}
.fade-a{animation:fadein .75s var(--ease) both;}
.fade-b{animation:fadein .75s var(--ease) both;}
@keyframes fadein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* ── pillars: three editorial rows, never cards ─────────
Each row steps one column further in than the one above, so the
three read as a sequence rather than a repeated component. The
descriptions are always visible; hover only adds emphasis. */
.pillars{list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;}
.pillars li{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:10px;
padding-block:clamp(26px,3.2vw,50px);border-top:1px solid var(--line);align-items:baseline;}
.pillars li:last-child{border-bottom:1px solid var(--line);}
/* the divider draws itself across the row under the pointer */
.pillars li::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;background:currentColor;
transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);}
.pillars li:hover::after{transform:scaleX(1);}
.p-i{font-family:'Newsreader',Georgia,serif;font-weight:300;font-style:italic;
font-size:clamp(19px,2.2vw,32px);letter-spacing:-.02em;color:var(--dim);opacity:.6;
transition:opacity .6s var(--ease),color .6s var(--ease);}
.pillars li:hover .p-i{opacity:1;color:var(--sand);}
.p-t{margin:0;font-family:'Newsreader',Georgia,serif;font-weight:300;
font-size:clamp(26px,3.5vw,52px);line-height:1.02;letter-spacing:-.035em;color:var(--fg);
transition:transform .7s var(--ease);}
.pillars li:hover .p-t{transform:translateX(10px);}
.p-d{grid-column:6 / span 4;margin:0;max-width:46ch;font-size:clamp(14px,1.05vw,15px);line-height:1.62;color:var(--dim);
transition:color .6s var(--ease);}
.pillars li:hover .p-d{color:var(--fg);}
/* the step only exists where there are columns to step through */
@media (min-width:1001px){
.pillars li:nth-child(1) .p-i{grid-column:1 / span 1;}
.pillars li:nth-child(1) .p-t{grid-column:2 / span 3;}
.pillars li:nth-child(2) .p-i{grid-column:2 / span 1;}
.pillars li:nth-child(2) .p-t{grid-column:3 / span 3;}
.pillars li:nth-child(3) .p-i{grid-column:3 / span 1;}
.pillars li:nth-child(3) .p-t{grid-column:4 / span 2;}
}
/* ── portfolio logo rail ──────────────────────────────── */
.marquee{margin-top:clamp(34px,4vw,56px);display:flex;flex-direction:column;gap:14px;
-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);}
.mq-row{overflow:hidden;}
.mq-track{display:flex;gap:14px;width:max-content;animation:run 64s linear infinite;will-change:transform;}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:76s;}
.marquee:hover .mq-track{animation-play-state:paused;}
.mq-card{flex:none;width:clamp(170px,17vw,232px);aspect-ratio:240/104;position:relative;
border:1px solid var(--line);border-radius:6px;background:var(--chip);
transition:border-color .55s var(--ease),transform .55s var(--ease);}
.mq-card:hover{transform:translateY(-4px);border-color:currentColor;}
.mq-card img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58%;height:auto;
filter:grayscale(1) contrast(.9) brightness(.35);opacity:.8;transition:filter .55s var(--ease),opacity .55s var(--ease);}
.mq-card:hover img{filter:grayscale(.1) contrast(1) brightness(.4);opacity:1;}
/* ── footer ───────────────────────────────────────────── */
.foot-top{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:clamp(30px,3.4vw,48px);}
.foot-city{grid-column:span 3;}
.foot-city h3{font-weight:400;font-size:clamp(26px,3.2vw,44px);letter-spacing:-.05em;color:var(--fg);}
.foot-city p{margin:6px 0 0;font-size:13px;color:var(--dim);}
.foot-contact{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:20px;row-gap:28px;
padding-top:clamp(40px,4.4vw,64px);margin-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--line);}
.foot-contact .fc-main{grid-column:1 / span 4;}
.fc-main .it{display:block;font-size:clamp(20px,2.2vw,30px);color:var(--dim);}
.fc-main a{font-family:'Newsreader',Georgia,serif;font-weight:300;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.035em;color:var(--fg);}
.foot-links{grid-column:6 / span 2;}
.foot-links2{grid-column:8 / span 2;}
.foot-links h4,.foot-links2 h4{margin:0 0 14px;font-size:11px;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--dim);}
.foot-links a,.foot-links2 a{display:block;padding:7px 0;font-size:14px;color:var(--dim);transition:color .5s var(--ease);}
.foot-links a:hover,.foot-links2 a:hover{color:var(--fg);}
.foot-base{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
padding-top:26px;margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line);}
.foot-base p{margin:0;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);}
/* ── scroll reveals, on the brand's easing ────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s);}
.rv.in{opacity:1;transform:none;}
/* the cover copy starts its rise on first paint instead of waiting for the
script: the same 1s fade-and-rise and stagger, run as a CSS animation */
.hero-mid > .rv,.hero > .hero-scroll.rv,.phero .rv{animation:rvIn 1s var(--ease) var(--d,0s) both;}
@keyframes rvIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
/* ── the editorial grid ───────────────────────────────────────
Every section below the hero divides into a content field and a
label cell at the right. The lines are the layout, not a backdrop:
the cell's left edge IS the column, the section's top edge IS the
join, and each draws itself in as the section arrives. Sections
keep their own heights; only the division stays constant. */
.gsec{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);}
.gsec-main{grid-column:1;grid-row:1;min-width:0;
padding-block:clamp(62px,7.6vw,112px);padding-right:clamp(26px,3.6vw,64px);}
/* the label cell IS the link: the whole rectangle answers the pointer,
so the right-hand column doubles as the way through the site */
.gsec-tag{grid-column:2;grid-row:1;position:relative;min-width:0;display:block;
text-decoration:none;color:inherit;
padding:clamp(62px,7.6vw,112px) clamp(10px,1.2vw,18px) clamp(62px,7.6vw,112px) clamp(18px,2.2vw,36px);
transition:background-color .8s var(--ease);}
.gsec-tag:hover{background:var(--chip);}
.gsec-tag:focus-visible{outline:1px solid var(--brown);outline-offset:-4px;}
/* the label rides down its own cell, so the strip reads continuously */
.gt-in{position:sticky;top:clamp(104px,13vh,148px);
display:flex;flex-direction:column;align-items:flex-start;gap:clamp(7px,.9vw,12px);}
/* a short warm tick is the only colour that moves; the type itself
goes from muted to full ink, which small labels can afford */
.gt-in::before{content:'';width:clamp(16px,1.8vw,26px);height:1px;background:var(--sand);
transform:scaleX(0);transform-origin:left center;
transition:transform 1s var(--ease) .15s,width .7s var(--ease);}
.gt-in.in::before{transform:none;}
.gsec-tag:hover .gt-in::before{width:clamp(34px,4.2vw,58px);}
/* ink held back rather than greyed off: at 11px a true grey would not
clear 4.5:1 on the sand and stone grounds these sections sit on */
.gt-n,.gt-l{color:var(--fg);opacity:.74;transition:opacity .9s var(--ease);}
.gt-n{font-size:11px;letter-spacing:.14em;font-variant-numeric:tabular-nums;}
.gt-head{display:flex;align-items:center;gap:12px;width:100%;}
.gt-l{font-size:clamp(11px,.88vw,13px);letter-spacing:.17em;line-height:1.5;
text-transform:uppercase;}
.gt-in.in .gt-l{opacity:1;}
.gsec-tag:hover .gt-n,.gsec-tag:hover .gt-l{opacity:1;}
.gt-ar{flex:none;width:clamp(9px,.95vw,12px);height:auto;margin-left:auto;color:var(--fg);
transition:transform .7s var(--ease);}
.gsec-tag:hover .gt-ar{transform:translate3d(3px,-3px,0);}
/* the fine line runs out across the cell as the pointer arrives */
.gt-rule{display:block;width:100%;height:1px;background:var(--line);
transform:scaleX(0);transform-origin:left center;
transition:transform .9s var(--ease);}
.gsec-tag:hover .gt-rule{transform:none;}
/* the portfolio line, under the regional tally: the same marquee the
hero runs, masked at both edges so it fades rather than stops */
/* it runs the full band now, outside any content container, so it takes
its own breathing room the way the kinetic band beneath does */
.gm-marks{position:relative;z-index:2;margin:0;padding-block:clamp(30px,3.8vw,52px);}
.gm-marks:hover .sc-track,.gm-marks:focus-within .sc-track{animation-play-state:paused;}
/* These files are cropped to their ink, so the stepped heights the
older square-canvas artwork needed would blow them up. One ceiling
on both axes instead: each mark fits inside the same box and keeps
its own proportions, whether it is a tall roundel or a long wordmark. */
.gm-marks .tm img{height:auto;width:auto;
max-height:clamp(21px,2.3vw,32px);max-width:clamp(104px,11.5vw,172px);}
.gm-marks .sc-track{gap:clamp(30px,3.6vw,64px);}
.gl{position:absolute;background:var(--line);pointer-events:none;}
.gl-h{top:0;left:0;right:0;height:1px;transform-origin:left center;}
.gl-v{top:0;bottom:0;left:0;width:1px;transform-origin:top center;}
/* a line draws itself rather than fading up, so .rv's rise is overridden */
.gl.rv{opacity:1;transform:scaleX(0);transition:transform 1.25s var(--ease);
transition-delay:var(--d,0s);}
.gl-v.rv{transform:scaleY(0);}
.gl.rv.in{transform:none;}
/* a headline and its standfirst, inside the content field */
.sec-head .body{max-width:68ch;}
/* ── responsive: the whole page steps down together ───── */
@media (max-width:1000px){
/* the hero's architecture comes off entirely at this width */
.hero-field{display:none;}
/* the scroll mark sits between the buttons and the strip here, so the
collection closes the cover rather than the mark */
.hero-scroll{order:1;}
.hero-strip{order:2;}
.main-nav{display:none;}
.nav-toggle{display:flex;}
/* the mobile menu carries these, so the bar keeps logo + toggle only */
.header-right .cta{display:none;}
.rules span:nth-child(n+4){display:none;}
.rules{grid-template-columns:repeat(3,minmax(0,1fr));}
/* the field drops to three columns and keeps only its first five
rows; the middle column's marks go, so what is left sits down
the two edges, clear of the centred copy */
.hero-field{grid-template-columns:repeat(3,minmax(0,1fr));}
.hf-cell:nth-of-type(3n){border-right:0;}
.hf-cell:nth-of-type(6n){border-right:1px solid rgba(255,255,254,.064);}
.hf-cell:nth-of-type(n+16){display:none;}
.hf-cell:nth-of-type(n+13){border-bottom:0;}
.hf-cell:nth-of-type(3n+2) .hf-mark{display:none;}
.hf-cell.mk::after{display:none;}
.gm-side{margin-top:clamp(36px,4.6vw,58px);}
.row-label,.row-main,.row-wide,.row-full,
.quote-body,.quote-meta,.foot-contact .fc-main{grid-column:1 / span 9;}
/* the two figures stack rather than squeeze into half a phone */
.ev-figs{grid-template-columns:1fr;}
.ev-figs li:first-child{border-bottom:0;}
/* stacked, the portrait turns upright under the copy */
.ops-figure{margin-top:clamp(28px,3.8vw,44px);aspect-ratio:5 / 5.2;}
.row-label{text-align:left;}
/* the label leaves the right-hand cell and becomes a slim strip
over its section: same line, same type, turned on its side */
/* the cell leaves the right-hand column and becomes a full-width
strip closing its section: label left, arrow right, still the
whole rectangle as the target */
.gsec{grid-template-columns:1fr;}
.gsec-main,.gsec-tag{grid-column:1;grid-row:auto;}
.gsec-main{order:1;padding-right:0;padding-block:clamp(50px,8vw,78px) clamp(28px,4.4vw,40px);}
.gsec-tag{order:2;padding:clamp(17px,3vw,24px) 0;}
/* Our roots: the portfolio line moves up between the copy and the
Explore Portfolio link. The section box steps aside so its two cells
and the line become siblings of one column; the cells take the
shell's side inset as margins, so their rules and hover area keep
the content width. */
.gm-band{display:flex;flex-direction:column;}
.gm-band > .gsec{display:contents;}
.gm-band .gsec-main,.gm-band .gsec-tag{margin-inline:var(--sides);}
.gm-band .gsec-main{order:1;}
.gm-band .gm-marks{order:2;}
.gm-band .gsec-tag{order:3;}
.gt-in{position:static;flex-direction:row;align-items:center;gap:clamp(12px,2.6vw,18px);}
.gt-in::before{width:clamp(14px,3vw,22px);flex:none;}
.gsec-tag:hover .gt-in::before{width:clamp(14px,3vw,22px);}
.gt-head{width:auto;}
.gt-l{flex:1 1 auto;}
.gt-ar{width:12px;}
/* the running line has no room to extend sideways here */
.gt-rule{display:none;}
/* the column rule lies down and becomes the strip's upper edge */
.gl-v{top:0;bottom:auto;left:0;right:0;width:auto;height:1px;transform-origin:left center;}
.gl-v.rv{transform:scaleX(0);}
.gl-v.rv.in{transform:none;}
.nums-list{margin-top:clamp(34px,4.6vw,52px);}
.quote-nav{grid-column:1 / span 9;justify-content:flex-start;}
.pillars li{row-gap:8px;}
.p-i,.p-t,.p-d{grid-column:1 / span 9;}
.foot-city{grid-column:span 4;}
.foot-links{grid-column:1 / span 4;}
.foot-links2{grid-column:5 / span 4;}
}
/* ── phones: the closing cell pulls to the right ──────────────
Below 768 the cell keeps the position tablets give it — last in the
section, so in sections 02 and 03 it still falls before the
full-width scroller that follows — but its contents gather at the
right edge instead of spanning the measure. Order, rule and spacing
are inherited, so the only change is the alignment. */
@media (max-width:767.98px){
.gt-in{justify-content:flex-end;gap:clamp(9px,2.4vw,14px);}
.gt-l{flex:none;}
.gt-ar{margin-left:0;}
/* The cell's own column rule, which lies down into a horizontal line
above the strip at tablet width. It read as the top edge of a
full-width strip; with the contents pulled to one corner it reads
as a stray divider instead, so it goes. Scoped to the cell: the
section rules and the hero's own column stay as they are. */
.gsec-tag .gl-v{display:none;}
/* close the gap above the cell by about a dozen pixels. The cell's
own padding is left alone, so the space BELOW it — and therefore
the distance to the next section or scroller — is unchanged. */
.gsec-main{padding-bottom:clamp(18px,3.1vw,27px);}
}
/* Tablet portrait: the hero is held to a sensible height instead of the
whole tall screen, the scroll mark stands down (as on desktop and
phones, so the caption returns above the logos), the rule under the
navigation is drawn as on phones, and the logos keep desktop's 40px cap. */
@media (min-width:641px) and (max-width:1000px){
/* copy centred between the rule and the caption, as on desktop (here
the caption is 22px clear of the logos, so 33px with its line) */
.hero{min-height:min(100svh,740px);padding-top:96px;}
.hero .hero-strip{margin-top:33px;}
/* the two-line headline at about 11% of the width, so it holds the
same share of the hero as on phones and desktop (it was set at phone
size); the height term keeps it in proportion on a landscape phone */
.hero h1{font-size:min(11vw,13.15vh);}
.hero-scroll{display:none;}
.hero::after{content:'';position:absolute;left:0;right:0;top:95px;height:1px;
background:var(--pf-line);pointer-events:none;}
.hero .hs-cell img{max-height:40px;}
}
@media (max-width:640px){
/* a half-step over the old 14.5px: at 15.5 the line wraps to a fifth
line on a 375px phone and crowds the buttons onto the logos */
.hero-lede{font-size:15px;}
/* phones only. The strip drops away from the buttons, the scroll mark
stands down (display:none, so it leaves no gap behind), and each
cell grows 22% while the artwork is held to its former box — the
extra width becomes space between logos, and no logo is resized.
Uniform cells, so the track's halves stay equal and the loop is
still seamless. The strip is lifted 12px off the foot of the cover;
relative offset, so nothing else in the hero moves. */
.hero-strip{margin-top:clamp(46px,7vh,70px);top:-12px;}
.hero-scroll{display:none;}
.hs-cell{width:clamp(127px,33vw,190px);}
.hs-cell img{max-width:clamp(104px,27vw,156px);}
/* svh is the screen height with the browser bars showing, so the
hero fills what the phone actually displays and may grow past it
rather than clipping on a short device */
.hero{min-height:100svh;padding-top:calc(87px + 12px);padding-bottom:24px;}
.hero-top{gap:clamp(13px,2.2vh,22px);}
/* Founders / backing / founders. — one word a line, sized to fill about
two-thirds of the width, set tighter so the three lines read as one block */
.hero h1{letter-spacing:-.046em;font-size:clamp(53px,18.35vw,93px);line-height:.93;}
/* The copy is centred between the rule under the navigation and the
strip's caption: the hero starts its copy area at the rule, and the
strip keeps 44px above it for the caption (its 32px less the strip's
12px lift, plus 24px clear). */
.hero{padding-top:96px;}
.hero-strip{margin-top:44px;}
/* the rings' fade reaches only into the empty band above the eyebrow,
which grows with the phone's height (shared rule in field.css) */
.rings-m::before{--rm-fy:clamp(60px,calc((100svh - 600px) * .75),200px);--rm-cx:120vw;--rm-cy:12vw;}
/* the rule under the navigation, as on the inner pages' phone heroes:
1px at 95px, full width, in their line colour; decorative, no space */
.hero::after{content:'';position:absolute;left:0;right:0;top:95px;height:1px;
background:var(--pf-line);pointer-events:none;}
.hero-actions{gap:20px;}
/* tight leading is a display effect: give it back a little once lines wrap often */
.serif-lede{line-height:1.2;}
.quote-text{line-height:1.18;}
.h2{line-height:1.08;}
.figs li{flex-direction:row;align-items:center;}
/* phones carry the architecture but none of the marks: at this width
a logo is either behind the copy or too small to read. The cells
stay, so the grid and the spacing are untouched. */
.hf-mark{display:none;}
.foot-city{grid-column:1 / span 9;}
.rail{padding-inline:20px;}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto;}
.pillars li::after{transition:none;}
.pillars li:hover .p-t{transform:none;}
.rv{opacity:1;transform:none;transition:none;}
.hero-mid > .rv,.hero > .hero-scroll.rv,.phero .rv{animation:none;}
/* the gridlines are structure, so they stand rather than draw */
.gl.rv,.gl-v.rv,.gt-in::before{transform:none;transition:none;}
.ticker-track,.mq-track,.sc-track,.hm-track{animation:none;}
.st-line{opacity:1;transform:none;transition:none;}
/* the field holds still: marks are placed, never swapped in */
.hf-in,.hf-out{animation:none;}
.hs-track{animation:none;}
.hf-out{display:none;}
.hero-scroll svg{animation:none;}
.figs li::after,.regions li::after{display:none;}
.fig-label,.regions .r-name,.cap{transition:none;}
.figs li:hover .fig-label,.regions li:hover .r-name,.figs li:hover .cap,
.figs li.is-pressed .fig-label,.figs li.is-pressed .cap{transform:none;}
.hf-mark.rv{transform:none;}
.fade-a,.fade-b{animation:none;}
.regions .r-name{opacity:1;}
}
/* ── the light hero ─────────────────────────────────────────
The warm-white ground, the faint lines and the sand rings are the
shared treatment in field.css (class hero-light on the band); what is
here sets the homepage hero's own type and marks for it. Only colours:
no size, position or spacing. Last in the sheet, and prefixed with the
band, so it outranks the light-band rules. */
/* this hero only: the verticals ~12% fainter, the rings ~12% stronger
than the shared values (same sheet order, so these win) */
.band.hero-light{--hero-vline:rgba(35,35,35,.075);}
.hero-light .hero::before,.hero-light.rings-m::before{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1200' fill='none' stroke='%23BAAA91' stroke-opacity='.222'%3E%3Ccircle cx='600' cy='600' r='80' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='128' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='176' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='224' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='272' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='320' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='368' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='416' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='600' cy='600' r='464' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");}
.hero-light .hero h1{color:#232323;}
.hero-light .hero h1 .it{color:#BAAA91;}
.hero-light .hero-lede{color:#555555;}
/* small text held to 4.5:1 on the warm white: the side labels and the
strip caption in a deeper grey; the headline keeps #BAAA91 */
.hero-light .hero-tag,.hero-light .hs-caption{color:#77716C;}
.hero-light .hero-actions .cta,
.hero-light .hero-actions .cta:hover{color:#232323;}
/* Investor Portal is for existing investors, and sits in the bar too:
here it steps back to the secondary charcoal so Pitch Us leads, and
comes up to full charcoal under the pointer */
.hero-light .hero-actions .cta-2{color:#55514E;}
.hero-light .hero-actions .cta-2:hover,
.hero-light .hero-actions .cta-2:focus-visible{color:#232323;}
/* the strip's logos in charcoal #232323 (flattened to black, then lifted
to 35/255, so every mark takes the one colour whatever its artwork), at
about a third strength, brought up under a real pointer */
.hero-light .hero .hs-cell img{
filter:brightness(0) invert(13.75%);
opacity:.35;transition:opacity .25s var(--ease);}
@media (hover:hover){.hero-light .hero .hs-cell img:hover{opacity:.75;}}