:root{
/* ---- BRAND — Palette_colori.pdf. That asset supersedes the manual's two
'proposal' routes: it replaces the blue-grey (#607B7D -> #8FA7B3),
nudges the olive (#7E846B -> #7E836C) and keeps both secondaries in one
five-colour system. These five values are exact and must not be edited. */
--lumus-yellow:#F7CA11; --lumus-black:#231F20; --lumus-cream:#F5F1E8;
--lumus-blue-grey:#8FA7B3; --lumus-olive:#7E836C;
/* ---- SEMANTIC ---- */
--accent:var(--lumus-yellow);
--surface-dark:var(--lumus-black); --surface-light:var(--lumus-cream);
--text-on-dark:var(--lumus-cream); --text-on-light:var(--lumus-black);
/* ---- legacy names, kept so existing rules keep working. Retire per page. */
--black:#231F20;
--dark:#1A1718;
--dark-2:#161314;
--gold:#F7CA11;
--gold-bright:#F7CA11;
--gold-pale:#F9D84A;
--white:#FFFFFF;
/* Body copy was 62% white and small labels 55%. On a flat black that is
merely thin; over a lit ground it measured under 4.5:1 in the CTA. */
--text:rgba(255,255,255,0.80);
--text-dim:rgba(255,255,255,0.68);
--border:rgba(247,202,17,0.18);
--border-soft:rgba(255,255,255,0.06);
--gold-glow:rgba(247,202,17,0.7);
--gold-glow-soft:rgba(247,202,17,0.06);
/* atmosphere multipliers (0–1), set by tweaks bridge */
--atmo:0.7;
--atmo-orb:0.65;
--atmo-grid:0.32;
--atmo-grain:0.04;
--atmo-ambient:0.7;
--atmo-orb-blur:22px;
/* pace */
--pace-mult:1;
--orb-float:1;
--shimmer:1;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
background:var(--black);
color:var(--white);
font-family:'Montserrat',sans-serif;
font-weight:300;
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
cursor:none;
}
@media (max-width: 900px){ body{cursor:auto} }
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:none}
@media (max-width:900px){ button{cursor:pointer} }
h1,h2,h3,h4{
font-family:'Cormorant Garamond',serif;
font-weight:500;
letter-spacing:-0.02em;
line-height:1;
}
em{font-style:italic;color:var(--gold)}
/* ── PRELOADER ── */
.preloader{
position:fixed;inset:0;z-index:1000;
background:var(--black);
display:flex;align-items:center;justify-content:center;
transition:opacity .8s ease, visibility .8s ease;
}
.preloader.gone{opacity:0;visibility:hidden;pointer-events:none}
.pre-mark{
font-family:'Cormorant Garamond',serif;
font-size:64px;letter-spacing:-0.04em;font-weight:600;
display:flex;align-items:center;gap:10px;
overflow:hidden;
}
.pre-mark .pre-letter{
display:inline-block;transform:translateY(110%);
animation:preLetter .9s cubic-bezier(.2,.8,.2,1) forwards;
}
.pre-mark .pre-letter:nth-child(1){animation-delay:.05s}
.pre-mark .pre-letter:nth-child(2){animation-delay:.12s}
.pre-mark .pre-letter:nth-child(3){animation-delay:.19s}
.pre-mark .pre-letter:nth-child(4){animation-delay:.26s}
.pre-mark .pre-letter:nth-child(5){animation-delay:.33s}
@keyframes preLetter{to{transform:translateY(0)}}
.pre-dot{
width:10px;height:10px;border-radius:50%;background:var(--gold);
box-shadow:0 0 14px rgba(247,202,17,0.7);
transform:scale(0);
animation:preDot .5s cubic-bezier(.2,.8,.2,1) .55s forwards, logoPulse 2.4s ease-in-out 1.2s infinite;
}
@keyframes preDot{to{transform:scale(1)}}
.pre-bar{
position:absolute;left:0;bottom:0;height:2px;background:var(--gold);
width:0%;
box-shadow:0 0 12px rgba(247,202,17,0.6);
animation:preBar 1.8s cubic-bezier(.7,0,.3,1) forwards;
}
@keyframes preBar{
0%{width:0}
60%{width:60%}
100%{width:100%}
}
/* ── AMBIENT ── */
/* The page ground. Two yellow radial gradients is the default dark-agency
glow and it left the two secondaries — Cool Blue-Grey and Olive-Grey,
40% of the official palette — unused anywhere on the site. This is the
same haze built from all three, so the black is never actually black. */
.ambient{
position:fixed;inset:0;pointer-events:none;z-index:0;
background:
radial-gradient(1050px 820px at 4% 0%, rgba(126,131,108,0.135), transparent 58%),
radial-gradient(1100px 900px at 100% 28%, rgba(143,167,179,0.20), transparent 60%),
radial-gradient(1250px 680px at 46% 104%, rgba(247,202,17,0.055), transparent 64%);
animation:ambientShift calc(26s / var(--pace-mult)) ease-in-out infinite alternate;
}
@keyframes ambientShift{
0%{transform:translate3d(0,0,0) scale(1)}
100%{transform:translate3d(-3%,2%,0) scale(1.08)}
}
/* Grain over the whole frame, type included — which is what every board in
Visual_01..09 does. It was 4% in overlay blend: over a #231F20 ground
that is arithmetically almost nothing, which is why the page read as
flat vector. Normal blend, fixed to the viewport so it behaves like film
on a lens rather than a texture glued to the page. Sits above the
sections and over the nav — the boards put grain over the logo too. */
/* Every board in Visual_01..09 falls to near-black at the frame edge. That
vignette is what lets the middle of the page carry light without the
whole thing turning grey.
It sits at z-index 1: sections are position:relative with z-index auto,
so they do not open a stacking context and their children compete in the
root one — the atmosphere plates at 0, .shell at 2. Landing between them
means the vignette shades the light and leaves the copy and the yellow
button at full strength, which a layer painted over the top would not. */
.vignette{
position:fixed;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(126% 96% at 50% 40%,
transparent 38%, rgba(10,9,9,0.24) 74%, rgba(10,9,9,0.52) 100%);
}
.grain{
position:fixed;inset:0;pointer-events:none;z-index:400;opacity:0.065;
background-image:url("data:image/svg+xml;utf8,");
background-size:170px 170px;
}
@media (max-width:900px){ .grain{opacity:0.055} }
@media (prefers-reduced-motion:reduce){ .ambient{animation:none} }
/* ── CUSTOM CURSOR ── */
.cursor-dot, .cursor-ring{
position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
transform:translate(-50%,-50%);will-change:transform;
mix-blend-mode:difference;
}
.cursor-dot{
width:6px;height:6px;border-radius:50%;background:var(--gold-pale);
transition:width .25s ease, height .25s ease, opacity .25s ease;
box-shadow:0 0 12px rgba(240,200,74,0.6);
}
.cursor-ring{
width:38px;height:38px;border-radius:50%;border:1px solid rgba(240,200,74,0.6);
transition:width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease, border-color .25s ease;
}
.cursor-hover .cursor-ring{width:64px;height:64px;border-color:var(--gold-pale)}
.cursor-hover .cursor-dot{width:3px;height:3px}
@media (max-width:900px){ .cursor-dot,.cursor-ring{display:none} }
/* ── NAV ── */
.nav{
position:fixed;top:0;left:0;right:0;z-index:100;
padding:22px 56px;
display:flex;align-items:center;justify-content:space-between;
transition:padding .4s ease, background .4s ease, border-color .4s ease, backdrop-filter .4s ease;
border-bottom:1px solid transparent;
}
.nav.scrolled{
padding:14px 56px;
background:rgba(10,10,10,0.72);
backdrop-filter:blur(18px) saturate(140%);
-webkit-backdrop-filter:blur(18px) saturate(140%);
border-bottom:1px solid var(--border);
}
.logo{display:flex;align-items:center;gap:8px}
.logo-word{
font-family:'Cormorant Garamond',serif;font-weight:600;
font-size:22px;letter-spacing:-0.02em;
}
.logo-dot{
width:7px;height:7px;border-radius:50%;background:var(--gold);
box-shadow:0 0 10px rgba(247,202,17,0.7);
animation:logoPulse 3.2s ease-in-out infinite;
}
@keyframes logoPulse{
0%,100%{box-shadow:0 0 6px rgba(247,202,17,0.5);transform:scale(1)}
50%{box-shadow:0 0 16px rgba(247,202,17,0.9);transform:scale(1.12)}
}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{
font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
color:rgba(255,255,255,0.7);font-weight:500;
position:relative;padding:6px 0;
}
.nav-links a::after{
content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
background:var(--gold);transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{width:100%}
.nav-cta{
display:inline-flex;align-items:center;gap:10px;
padding:11px 22px;border:1px solid var(--gold);
font-size:10px;letter-spacing:0.25em;text-transform:uppercase;
color:var(--gold);font-weight:500;border-radius:2px;
position:relative;overflow:hidden;
transition:color .4s ease;
}
.nav-cta::before{
content:'';position:absolute;inset:0;background:var(--gold);
transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.3,1);z-index:-1;
}
.nav-cta:hover{color:var(--black)}
.nav-cta:hover::before{transform:translateY(0)}
.nav-cta span{position:relative;z-index:1}
.menu-btn{display:none}
.nav-mobile{
display:none;
position:fixed;inset:0;background:rgba(10,10,10,0.98);z-index:99;
flex-direction:column;align-items:center;justify-content:center;gap:28px;
opacity:0;pointer-events:none;transition:opacity .5s ease;
backdrop-filter:blur(20px);
}
.nav-mobile.open{opacity:1;pointer-events:auto}
.nav-mobile a{font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--white)}
.nav-mobile a em{color:var(--gold)}
@media (max-width:900px){
.nav{padding:18px 24px}
.nav.scrolled{padding:12px 24px}
.nav-links,.nav-cta{display:none}
.menu-btn{
display:flex;flex-direction:column;gap:5px;
width:28px;height:20px;justify-content:center;
}
.menu-btn span{display:block;height:1px;background:var(--white);width:100%;transition:.3s}
.nav-mobile{display:flex}
}
/* ── SHELL ── */
.shell{max-width:1400px;margin:0 auto;padding:0 56px;position:relative;z-index:2}
@media (max-width:900px){ .shell{padding:0 24px} }
/* ── HERO ── */
.hero{overflow:hidden;overflow:clip;
min-height:100vh;
padding:112px 0 64px;
position:relative;
display:flex;flex-direction:column;justify-content:center;
}
.hero-inner{position:relative;z-index:2}
.eyebrow{
display:inline-flex;align-items:center;gap:14px;
font-size:10px;letter-spacing:0.5em;text-transform:uppercase;
color:var(--gold);font-weight:500;margin-bottom:44px;
}
.eyebrow::before{content:'';width:32px;height:1px;background:var(--gold)}
.hero h1{
font-size:clamp(46px, 6.6vw, 100px);
line-height:0.92;
letter-spacing:-0.035em;
margin-bottom:32px;
font-weight:500;
}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.05em}
.hero h1 .line > span{
display:inline-block;transform:translateY(110%);
opacity:0;
}
.hero.in h1 .line > span{
animation:heroLine 1.1s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero.in h1 .line:nth-child(1) > span{animation-delay:.05s}
.hero.in h1 .line:nth-child(2) > span{animation-delay:.25s}
.hero.in h1 .line:nth-child(3) > span{animation-delay:.45s}
@keyframes heroLine{to{transform:translateY(0);opacity:1}}
.hero-sub{
max-width:560px;font-size:19px;color:var(--text);
line-height:1.7;margin-bottom:28px;
border-left:2px solid var(--gold);padding-left:22px;
opacity:0;transform:translateY(24px);
}
.hero.in .hero-sub{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) .85s forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.hero-ctas{
display:flex;gap:18px;flex-wrap:wrap;align-items:center;
opacity:0;transform:translateY(24px);
}
.hero.in .hero-ctas{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) 1.05s forwards}
.hero-trust{
display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;
margin-top:28px;font-size:11px;letter-spacing:0.18em;
text-transform:uppercase;color:var(--text-dim);font-weight:500;
opacity:0;transform:translateY(24px);
}
.hero.in .hero-trust{animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) 1.2s forwards}
.hero-trust-dot{
width:7px;height:7px;border-radius:50%;background:var(--gold);
box-shadow:0 0 10px rgba(247,202,17,0.7);
animation:logoPulse 2.4s ease-in-out infinite;
}
.hero-trust-sep{color:rgba(255,255,255,0.18)}
.btn{
display:inline-flex;align-items:center;gap:14px;
padding:20px 34px;font-size:11px;letter-spacing:0.28em;
text-transform:uppercase;font-weight:500;font-family:'Montserrat',sans-serif;
border-radius:2px;position:relative;overflow:hidden;
transition:color .4s ease, transform .15s ease;
will-change:transform;
}
.btn-primary{background:var(--gold);color:var(--black);border:1px solid var(--gold)}
.btn-primary::before{
content:'';position:absolute;inset:0;background:var(--gold-bright);
transform:translateY(101%);transition:transform .55s cubic-bezier(.7,0,.3,1);
}
.btn-primary:hover::before{transform:translateY(0)}
.btn-primary span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px}
.btn-primary .arrow{transition:transform .45s cubic-bezier(.2,.8,.2,1);display:inline-block}
.btn-primary:hover .arrow{transform:translateX(6px)}
.btn-ghost{
border:1px solid rgba(255,255,255,0.18);color:var(--white);
}
.btn-ghost::before{
content:'';position:absolute;inset:0;background:rgba(247,202,17,0.08);
transform:translateY(101%);transition:transform .55s cubic-bezier(.7,0,.3,1);
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost:hover::before{transform:translateY(0)}
.btn-ghost span{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px}
.hero-meta{
position:absolute;right:0;bottom:0;
display:flex;flex-direction:column;gap:14px;text-align:right;
opacity:0;
}
.hero.in .hero-meta{animation:fadeUp .9s ease 1.35s forwards}
.hero-meta p{font-size:10px;letter-spacing:0.35em;text-transform:uppercase;color:var(--text-dim)}
.hero-meta strong{color:var(--white);font-weight:500}
@media (max-width:900px){ .hero-meta{display:none} }
.hero-orb{
position:absolute;top:8%;right:-8%;width:620px;height:620px;
background:radial-gradient(circle at 40% 40%, rgba(247,202,17,calc(0.18 * var(--atmo-orb))), rgba(247,202,17,calc(0.03 * var(--atmo-orb))) 50%, transparent 70%);
filter:blur(var(--atmo-orb-blur));
opacity:var(--atmo-orb);
animation:orbFloat calc(14s / var(--orb-float)) ease-in-out infinite alternate;
pointer-events:none;z-index:1;
}
@keyframes orbFloat{
0%{transform:translate(0,0) scale(1)}
100%{transform:translate(-6%,4%) scale(1.06)}
}
.scroll-hint{
position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
display:flex;flex-direction:column;align-items:center;gap:10px;
font-size:9px;letter-spacing:0.4em;text-transform:uppercase;color:var(--text-dim);
opacity:0;
}
.hero.in .scroll-hint{animation:fadeUp .8s ease 1.65s forwards}
.scroll-hint .line-v{width:1px;height:44px;background:linear-gradient(to bottom, var(--gold), transparent);position:relative;overflow:hidden}
.scroll-hint .line-v::after{
content:'';position:absolute;top:-44px;left:0;width:1px;height:44px;background:var(--gold-bright);
animation:scrollDrip 2.4s ease-in-out infinite;
}
@keyframes scrollDrip{
0%{top:-44px}100%{top:44px}
}
/* ── ANIMATED FLOATING SHAPES (GitHub-style) ── */
.float-shape{
position:absolute;border:1px solid var(--border);
pointer-events:none;opacity:.4;
}
.float-shape.a{
top:25%;left:5%;width:80px;height:80px;
transform:rotate(45deg);
animation:floatY 8s ease-in-out infinite alternate;
}
.float-shape.b{
top:60%;left:8%;width:14px;height:14px;border-radius:50%;
background:var(--gold);box-shadow:0 0 14px rgba(247,202,17,0.5);border:none;
animation:floatY 6s ease-in-out 1s infinite alternate;
}
.float-shape.c{
top:18%;right:14%;width:120px;height:1px;
background:var(--gold);border:none;
animation:floatX 10s ease-in-out infinite alternate;
}
.float-shape.d{
bottom:18%;right:18%;width:24px;height:24px;
border:1px solid var(--gold);border-radius:50%;
animation:floatY 9s ease-in-out 2s infinite alternate;
}
@keyframes floatY{0%{transform:translateY(0) rotate(45deg)}100%{transform:translateY(-30px) rotate(60deg)}}
@keyframes floatX{0%{transform:translateX(0)}100%{transform:translateX(-40px)}}
/* ── MARQUEE ── */
.marquee{
padding:22px 0;overflow:hidden;white-space:nowrap;
background:rgba(255,255,255,0.015);
}
.marquee-track{display:inline-flex;gap:72px;animation:marquee 42s linear infinite}
.marquee-item{
font-family:'Cormorant Garamond',serif;font-size:22px;font-style:italic;
color:var(--text);letter-spacing:-0.01em;
}
.marquee-item em{color:var(--gold)}
.marquee-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);align-self:center}
@keyframes marquee{to{transform:translateX(-50%)}}
/* ── SECTIONS ── */
section.s{padding:140px 0;position:relative}
@media (max-width:900px){ section.s{padding:90px 0} }
.s-head{margin-bottom:72px;max-width:880px}
.s-title{
font-size:clamp(44px, 5.2vw, 82px);
line-height:1.02;margin-bottom:28px;letter-spacing:-0.03em;
}
.s-sub{font-size:17px;color:var(--text);max-width:600px;line-height:1.8}
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
/* ── METRICS ── */
.metrics{
display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
padding:56px 0;
}
.metric{padding:0 8px;position:relative}
.metric + .metric::before{display:none}
.metric-num{
font-family:'Cormorant Garamond',serif;font-weight:500;
font-size:clamp(56px, 6vw, 88px);line-height:1;letter-spacing:-0.04em;
color:var(--white);margin-bottom:12px;
}
.metric-num em{color:var(--gold);font-style:normal}
.metric-num .suffix{color:var(--gold);font-style:italic;font-weight:400}
.metric-label{
font-size:11px;letter-spacing:0.3em;text-transform:uppercase;
color:var(--text-dim);font-weight:500;
}
.metric-desc{font-size:13px;color:var(--text);margin-top:10px;max-width:260px}
@media (max-width:900px){
.metrics{grid-template-columns:1fr;gap:40px}
.metric + .metric::before{display:none}
}
/* ── SPLIT ── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
@media (max-width:1100px){ .split{grid-template-columns:1fr;gap:48px} }
.split-panel{
padding:56px;border:1px solid var(--border);
background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(247,202,17,0.02));
border-radius:4px;position:relative;overflow:hidden;
transition:transform .6s cubic-bezier(.2,.8,.2,1), border-color .5s ease;
}
.split-panel:hover{transform:translateY(-6px);border-color:rgba(247,202,17,0.4)}
.split-panel .corner{
position:absolute;top:0;right:0;width:80px;height:80px;
background:linear-gradient(225deg, rgba(247,202,17,0.15), transparent 70%);
}
.split-tag{
font-size:10px;letter-spacing:0.4em;text-transform:uppercase;
color:var(--text-dim);font-weight:500;margin-bottom:20px;
}
.split-panel.solution .split-tag{color:var(--gold)}
.split-panel h3{
font-size:40px;font-weight:500;margin-bottom:24px;letter-spacing:-0.02em;
}
.split-panel p{font-size:15px;color:var(--text);margin-bottom:20px;line-height:1.85}
.split-list{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.split-list li{
list-style:none;font-size:15px;color:var(--text);
display:flex;gap:14px;align-items:flex-start;line-height:1.7;
}
.split-list li .mark{
flex-shrink:0;margin-top:8px;width:6px;height:6px;
}
.problem .mark{background:rgba(255,255,255,0.15)}
.solution .mark{background:var(--gold);box-shadow:0 0 8px rgba(247,202,17,0.6)}
/* ── SERVICES ── */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:1100px){.services{grid-template-columns:repeat(2,1fr)}}
.hero-location{font-size:13px;color:rgba(255,255,255,0.4);margin-top:20px;letter-spacing:0.04em}
@media (max-width:900px){ .services{grid-template-columns:1fr} }
.service{
padding:56px 48px;background:var(--black);
position:relative;overflow:visible;
transition:background .6s ease, transform .6s ease;
}
.service::before{
content:'';position:absolute;inset:0;background:linear-gradient(180deg, transparent, rgba(247,202,17,0.06));
opacity:0;transition:opacity .6s ease;pointer-events:none;
}
.service::after{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
transform:scaleX(0);transform-origin:left center;
transition:transform .8s cubic-bezier(.2,.8,.2,1);pointer-events:none;
}
.service:hover{background:var(--dark)}
.service:hover::before{opacity:1}
.service:hover::after{transform:scaleX(1)}
.service-num{
font-family:'Cormorant Garamond',serif;font-size:14px;
color:var(--gold);font-weight:500;margin-bottom:32px;
letter-spacing:0.2em;
}
.service h3{font-size:36px;margin-bottom:16px}
.service p{font-size:15px;color:var(--text);margin-bottom:28px;max-width:440px}
.service-out{
display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;
}
.service-out span{
font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
color:var(--gold);padding:6px 12px;border:1px solid var(--border);
font-weight:500;
}
.service-cta{
display:inline-flex;align-items:center;gap:12px;
font-size:10px;letter-spacing:0.3em;text-transform:uppercase;
color:var(--white);font-weight:500;
transition:color .35s ease, gap .35s ease;
}
.service:hover .service-cta{color:var(--gold);gap:18px}
/* ── PROCESS ── */
.process{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;background:transparent;}
@media (max-width:900px){ .process{grid-template-columns:1fr} }
.step{padding:56px 44px;background:var(--black);position:relative;transition:background .5s ease}
.step:hover{background:var(--dark)}
.step-num{
font-family:'Cormorant Garamond',serif;font-size:72px;font-weight:400;
color:rgba(247,202,17,0.18);line-height:1;position:absolute;top:28px;right:32px;
font-style:italic;
}
.step-dur{
font-size:10px;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);
font-weight:500;margin-bottom:28px;
}
.step h4{font-size:32px;margin-bottom:14px;font-weight:500}
.step p{font-size:14px;color:var(--text);line-height:1.8}
/* ── OBJECTIONS ── */
.obj{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;background:transparent;}
@media (max-width:1100px){ .obj{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .obj{grid-template-columns:1fr} }
.obj-card{padding:40px 32px;background:var(--black);transition:background .5s ease}
.obj-card:hover{background:var(--dark)}
.obj-icon{
width:36px;height:36px;border:1px solid var(--gold);border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:var(--gold);font-size:16px;margin-bottom:24px;
}
.obj-card h5{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;margin-bottom:10px}
.obj-card p{font-size:13px;color:var(--text);line-height:1.8}
/* ── FAQ ── */
.faq{max-width:880px;margin:0 auto}
.faq-item{
border-bottom:1px solid var(--border-soft);padding:28px 0;cursor:pointer;
transition:border-color .4s ease;
}
.faq-item:hover{border-color:var(--border)}
.faq-q{
display:flex;justify-content:space-between;align-items:center;gap:24px;
}
.faq-q h5{
font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;
transition:color .4s ease;letter-spacing:-0.01em;
}
.faq-item.open .faq-q h5{color:var(--gold)}
.faq-plus{
width:24px;height:24px;position:relative;flex-shrink:0;
transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.faq-plus::before, .faq-plus::after{
content:'';position:absolute;background:var(--gold);
}
.faq-plus::before{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.faq-plus::after{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%);transition:transform .5s ease}
.faq-item.open .faq-plus::after{transform:translateX(-50%) scaleY(0)}
.faq-a{
max-height:0;overflow:hidden;
transition:max-height .6s cubic-bezier(.2,.8,.2,1), margin .4s ease;
}
.faq-a p{
font-size:15px;color:var(--text);line-height:1.9;max-width:720px;padding-top:16px;
}
/* ── FOUNDER ── */
.founder{
display:grid;grid-template-columns:1.2fr 1fr;gap:72px;align-items:center;
padding:72px;border:1px solid var(--border);
background:linear-gradient(135deg, rgba(247,202,17,0.03), rgba(255,255,255,0.01));
border-radius:4px;
}
@media (max-width:1100px){ .founder{grid-template-columns:1fr;padding:48px} }
.founder-text p{
font-family:'Cormorant Garamond',serif;font-size:28px;
font-weight:500;line-height:1.35;color:var(--white);
letter-spacing:-0.01em;margin-bottom:24px;
}
.founder-text p em{color:var(--gold)}
.founder-sig{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:36px;color:var(--gold);margin-top:16px;
}
.founder-sig + p{font-size:12px;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-dim);font-family:'Montserrat',sans-serif}
.founder-portrait{
aspect-ratio:3/4;border:1px solid var(--border);border-radius:2px;
background:
repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 14px, transparent 14px 28px),
linear-gradient(160deg, #1a1a1a, #231F20);
position:relative;display:flex;align-items:flex-end;padding:24px;
overflow:hidden;
}
.founder-portrait::before{
content:'';position:absolute;top:0;left:-100%;width:200%;height:100%;
background:linear-gradient(90deg, transparent, rgba(247,202,17,0.08), transparent);
animation:shimmer 5s ease-in-out infinite;
}
@keyframes shimmer{0%,100%{left:-100%}50%{left:100%}}
.founder-portrait .badge{
font-family:'Cormorant Garamond',serif;font-style:italic;
color:var(--gold);font-size:20px;position:relative;z-index:1;
}
/* ── CTA ── */
.cta{
text-align:center;padding:140px 48px;position:relative;overflow:hidden;
}
.cta::before{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 50% 0%, rgba(247,202,17,0.14), transparent 55%);
pointer-events:none;
}
.cta-eyebrow{
font-size:10px;letter-spacing:0.5em;text-transform:uppercase;
color:var(--gold);font-weight:500;margin-bottom:36px;
}
.cta h2{
font-size:clamp(52px, 7vw, 112px);line-height:0.95;margin-bottom:36px;
letter-spacing:-0.035em;max-width:1000px;margin-left:auto;margin-right:auto;
}
.cta p{font-size:18px;color:var(--text);max-width:580px;margin:0 auto 44px;line-height:1.7}
.cta-actions{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
/* ── LEAD FORM ── */
.lead{
max-width:720px;margin:80px auto 0;
padding:48px;border:1px solid var(--border);
background:rgba(17,17,17,0.6);backdrop-filter:blur(12px);
border-radius:4px;text-align:left;
}
.lead-head{
display:flex;justify-content:space-between;align-items:center;
margin-bottom:36px;padding-bottom:24px;border-bottom:1px solid var(--border-soft);
flex-wrap:wrap;gap:12px;
}
.lead-head h5{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500}
.lead-head .head-meta{font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--text-dim)}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;position:relative}
.field label{font-size:10px;letter-spacing:0.35em;text-transform:uppercase;color:var(--text-dim);font-weight:500}
.field input, .field textarea, .field select{
background:transparent;border:none;border-bottom:1px solid var(--border-soft);
padding:12px 0;color:var(--white);font-family:'Montserrat',sans-serif;font-size:16px;
font-weight:300;transition:border-color .4s ease;outline:none;width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--gold)}
.field::after{
content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
transition:width .5s cubic-bezier(.2,.8,.2,1);
box-shadow:0 0 8px rgba(247,202,17,0.5);
}
.field:focus-within::after{width:100%}
.field select option{background:var(--black)}
.field textarea{resize:vertical;min-height:80px}
.lead-actions{display:flex;justify-content:space-between;align-items:center;margin-top:32px;flex-wrap:wrap;gap:16px}
.lead-note{font-size:11px;color:var(--text-dim);letter-spacing:0.05em}
/* ── CONTACT BLOCK ── */
.contact-block{
display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
margin-top:40px;
}
@media (max-width:700px){ .contact-block{grid-template-columns:1fr} }
.contact-card{
padding:36px 32px;border:1px solid var(--border);
background:rgba(255,255,255,0.015);
transition:border-color .4s ease, transform .4s ease;
text-align:left;
}
.contact-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.contact-card .label{font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:14px}
.contact-card .value{
font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:500;
letter-spacing:-0.01em;color:var(--white);
word-break:break-word;
}
.contact-card .hint{font-size:13px;color:var(--text);margin-top:10px}
/* ── FOOTER ── */
footer{
padding:80px 0 40px;border-top:1px solid var(--border);
position:relative;z-index:2;
}
.foot-grid{
display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px;
margin-bottom:72px;
}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;gap:40px 24px} }
.foot-mark{font-family:'Cormorant Garamond',serif;font-size:48px;font-weight:600;letter-spacing:-0.03em;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.foot-tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--gold);margin-bottom:24px}
.foot-copy{font-size:14px;color:var(--text);max-width:360px;line-height:1.8}
.foot-col h6{
font-size:10px;letter-spacing:0.4em;text-transform:uppercase;color:var(--gold);
font-weight:500;margin-bottom:24px;font-family:'Montserrat',sans-serif;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.foot-col a{font-size:14px;color:var(--text);transition:color .3s ease;word-break:break-word}
.foot-col a:hover{color:var(--gold)}
.foot-bottom{
display:flex;justify-content:space-between;align-items:center;
padding-top:32px;border-top:1px solid var(--border-soft);flex-wrap:wrap;gap:16px;
}
.foot-bottom p{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--text-dim)}
/* ── DECO ── */
.deco-divider{
display:flex;align-items:center;gap:16px;margin:0 auto;
max-width:200px;opacity:.7;
}
.deco-divider .line{flex:1;height:1px;background:linear-gradient(90deg, transparent, var(--gold), transparent)}
.deco-divider .diamond{
width:6px;height:6px;background:var(--gold);transform:rotate(45deg);
box-shadow:0 0 8px rgba(247,202,17,0.6);
}
/* ── REVEAL VARIANTS ── */
.word-reveal{display:inline-block}
.word-reveal .w{
display:inline-block;overflow:hidden;
}
.word-reveal .w > span{
display:inline-block;transform:translateY(110%);
transition:transform .9s cubic-bezier(.2,.8,.2,1);
}
.word-reveal.in .w > span{transform:translateY(0)}
/* ── SCROLL-DRIVEN CHAR REVEAL (Obsidian-style) ── */
.scroll-text{
font-family:'Cormorant Garamond',serif;
font-size:clamp(40px, 5.5vw, 88px);
line-height:1.15;letter-spacing:-0.02em;font-weight:500;
max-width:1100px;
}
.scroll-text .ch{
display:inline;
color:rgba(255,255,255,0.12);
transition:color .25s ease;
will-change:color;
}
.scroll-text .ch-word{
display:inline-block;
white-space:nowrap;
}
.scroll-text .ch.lit{color:var(--white)}
.scroll-text .ch.gold{color:var(--gold);font-style:italic}
/* ── HORIZONTAL PINNED SCROLL ── */
.pin-wrap{
position:relative;
height:340vh;
}
.pin-stage{
position:sticky;top:0;height:100vh;
overflow:hidden;display:flex;align-items:center;
}
.pin-track{
display:flex;gap:32px;padding:0 56px;
will-change:transform;
}
.pin-card{
flex:0 0 460px;height:560px;
border:1px solid var(--border);
background:linear-gradient(180deg, rgba(255,255,255,0.015), rgba(247,202,17,0.025));
padding:48px 40px;display:flex;flex-direction:column;justify-content:space-between;
position:relative;overflow:hidden;
transition:border-color .5s ease;
}
.pin-card:hover{border-color:var(--gold)}
.pin-card .num{
font-family:'Cormorant Garamond',serif;font-style:italic;
color:rgba(247,202,17,0.18);font-size:120px;line-height:1;
position:absolute;top:24px;right:32px;
}
.pin-card h3{font-size:44px;margin-bottom:16px;font-weight:500;letter-spacing:-0.02em}
.pin-card p{font-size:15px;color:var(--text);line-height:1.8;margin-bottom:24px}
.pin-card .tag-row{display:flex;gap:8px;flex-wrap:wrap}
.pin-card .tag-row span{
font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
color:var(--gold);padding:6px 12px;border:1px solid var(--border);font-weight:500;
}
.pin-progress{
position:absolute;left:56px;right:56px;bottom:48px;
height:1px;background:rgba(247,202,17,0.12);
}
.pin-progress::after{
content:'';position:absolute;left:0;top:0;height:100%;
background:var(--gold);width:var(--p,0%);
box-shadow:0 0 8px rgba(247,202,17,0.6);
transition:width .15s ease;
}
.pin-label{
position:absolute;top:120px;left:56px;
font-size:10px;letter-spacing:0.5em;text-transform:uppercase;color:var(--gold);font-weight:500;
display:flex;align-items:center;gap:14px;
}
.pin-label::before{content:'';width:32px;height:1px;background:var(--gold)}
@media (max-width:900px){
.pin-wrap{height:auto}
.pin-stage{position:relative;height:auto;padding:60px 0}
.pin-track{flex-direction:column;padding:0 24px}
.pin-card{flex:0 0 auto;width:100%;height:auto;min-height:480px}
.pin-progress,.pin-label{display:none}
}
/* ── BIG TEXT SCROLL ── */
.big-text{
overflow:hidden;padding:80px 0;
white-space:nowrap;
}
.big-text .bt-track{
font-family:'Cormorant Garamond',serif;
font-size:clamp(80px, 14vw, 220px);
line-height:0.9;letter-spacing:-0.04em;font-weight:500;
display:inline-flex;gap:80px;
will-change:transform;
}
.big-text .bt-track em{color:var(--gold);font-style:italic}
.big-text .bt-track .dot{
width:18px;height:18px;border-radius:50%;background:var(--gold);align-self:center;
box-shadow:0 0 18px rgba(247,202,17,0.7);
}
/* ── OFFER ── */
.offer-s{padding:120px 0}
.offer{
position:relative;padding:72px;
border:1px solid var(--border);
background:
radial-gradient(700px 360px at 100% 0%, rgba(247,202,17,0.08), transparent 60%),
linear-gradient(180deg, rgba(255,255,255,0.012), rgba(247,202,17,0.025));
border-radius:4px;overflow:hidden;
}
.offer-corner{
position:absolute;width:22px;height:22px;border:1px solid var(--gold);
}
.offer-corner.tl{top:18px;left:18px;border-right:none;border-bottom:none}
.offer-corner.tr{top:18px;right:18px;border-left:none;border-bottom:none}
.offer-corner.bl{bottom:18px;left:18px;border-right:none;border-top:none}
.offer-corner.br{bottom:18px;right:18px;border-left:none;border-top:none}
.offer-tag{
display:inline-flex;align-items:center;gap:12px;
font-size:10px;letter-spacing:0.32em;text-transform:uppercase;
color:var(--gold);font-weight:500;margin-bottom:32px;
padding:8px 14px;border:1px solid var(--border);border-radius:999px;
background:rgba(247,202,17,0.04);
}
.offer-tag-dot{
width:7px;height:7px;border-radius:50%;background:var(--gold);
box-shadow:0 0 10px rgba(247,202,17,0.7);
animation:logoPulse 2.4s ease-in-out infinite;
}
.offer-grid{
display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;
}
.offer-title{
font-size:clamp(44px, 5.4vw, 80px);line-height:0.98;
letter-spacing:-0.03em;font-weight:500;margin-bottom:28px;
}
.offer-copy{font-size:18px;color:var(--text);line-height:1.7;margin-bottom:36px;max-width:520px}
.offer-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.offer-trust{
font-size:11px;letter-spacing:0.22em;text-transform:uppercase;
color:var(--text-dim);font-weight:500;
}
.offer-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.offer-list li{
display:grid;grid-template-columns:64px 1fr;gap:24px;
padding:24px 0;border-top:1px solid var(--border-soft);
align-items:start;
}
.offer-list li:first-child{border-top:1px solid var(--border)}
.offer-list li:last-child{border-bottom:1px solid var(--border)}
.offer-li-num{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:32px;color:var(--gold);font-weight:500;line-height:1;
}
.offer-list h4{
font-family:'Cormorant Garamond',serif;font-size:24px;
font-weight:500;letter-spacing:-0.01em;margin-bottom:6px;
}
.offer-list p{font-size:14px;color:var(--text);line-height:1.7;max-width:420px}
@media (max-width:1100px){
.offer{padding:48px 32px}
.offer-grid{grid-template-columns:1fr;gap:48px}
}
@media (max-width:600px){
.offer{padding:40px 24px}
.offer-list li{grid-template-columns:48px 1fr;gap:16px;padding:20px 0}
.offer-li-num{font-size:26px}
}
/* ── TRUST STRIP ── */
.trust-strip{
padding:28px 0;
}
.trust-strip-grid{
display:flex;flex-wrap:wrap;gap:32px 56px;align-items:center;justify-content:center;
}
.trust-pill{
display:inline-flex;align-items:center;gap:10px;
font-size:11px;letter-spacing:0.25em;text-transform:uppercase;
color:var(--text);font-weight:500;
}
.trust-pill::before{
content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);
box-shadow:0 0 8px rgba(247,202,17,0.6);
}
@media (max-width:700px){
.trust-strip-grid{gap:18px 28px}
.trust-pill{font-size:10px;letter-spacing:0.2em}
}
/* ── WHY-CHOOSE (replaces founder) ── */
.why4{
display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
background:transparent;
}
@media (max-width:1100px){ .why4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .why4{grid-template-columns:1fr} }
.why-card{
padding:48px 40px;background:var(--black);position:relative;
transition:background .5s ease;overflow:hidden;
}
.why-card:hover{background:var(--dark)}
.why-card::after{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg, transparent, var(--gold), transparent);
transform:translateX(-100%);transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.why-card:hover::after{transform:translateX(0)}
.why-num{
font-family:'Cormorant Garamond',serif;font-style:italic;
font-size:14px;color:var(--gold);font-weight:500;
letter-spacing:0.2em;margin-bottom:32px;display:block;
}
.why-card h4{
font-family:'Cormorant Garamond',serif;font-size:30px;
font-weight:500;letter-spacing:-0.01em;margin-bottom:14px;
line-height:1.1;
}
.why-card p{font-size:14px;color:var(--text);line-height:1.8}
/* pace-controlled cursor visibility */
body.pace-no-cursor{cursor:auto !important}
body.pace-no-cursor .cursor-dot,
body.pace-no-cursor .cursor-ring{display:none}
body.pace-no-cursor a, body.pace-no-cursor button{cursor:pointer !important}
/* ── SUCCESS STATE ── */
.lead-success{
text-align:center;padding:32px;
border:1px solid var(--gold);background:rgba(247,202,17,0.05);
border-radius:4px;display:none;margin-top:24px;
}
.lead-success.show{display:block;animation:fadeUp .6s ease forwards}
.lead-success p{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold);font-style:italic}
/* ── PAGE TRANSITION ── */
body { animation: pageFadeIn 0.4s ease; }
@keyframes pageFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
#lm-popup{display:none;position:fixed;inset:0;z-index:9985}
#lm-popup-overlay{position:absolute;inset:0;background:rgba(0,0,0,0);backdrop-filter:blur(0px);transition:background .4s ease,backdrop-filter .4s ease}
#lm-popup-box{
position:absolute;top:50%;left:50%;
transform:translate(-50%,-58%);opacity:0;
transition:opacity .4s ease,transform .4s ease;
width:min(540px,92vw);background:#1A1718;
border:1px solid rgba(247,202,17,.22);
padding:52px 48px;
}
#lm-popup.lm-on #lm-popup-overlay{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}
#lm-popup.lm-on #lm-popup-box{opacity:1;transform:translate(-50%,-50%)}
#lm-popup-close{
position:absolute;top:18px;right:22px;
background:none;border:none;color:rgba(255,255,255,.4);
font-size:24px;line-height:1;cursor:pointer;transition:color .2s;
}
#lm-popup-close:hover{color:#fff}
.lm-pop-eye{
display:block;font-size:10px;letter-spacing:.35em;text-transform:uppercase;
color:#F7CA11;margin-bottom:18px;
}
#lm-popup-box h3{
font-family:'Cormorant Garamond',serif;font-size:clamp(32px,4vw,44px);
font-weight:500;line-height:1.05;color:#fff;margin-bottom:14px;
}
#lm-popup-box h3 em{color:#F7CA11;font-style:italic}
.lm-pop-sub{font-size:14px;color:rgba(255,255,255,.55);line-height:1.8;margin-bottom:28px}
.lm-pop-row{display:flex}
.lm-pop-row input[type=email]{
flex:1;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.12);border-right:none;
color:#fff;padding:14px 16px;font-size:14px;outline:none;
font-family:inherit;transition:border-color .25s;
}
.lm-pop-row input[type=email]:focus{border-color:rgba(247,202,17,.5)}
.lm-pop-row input[type=email]::placeholder{color:rgba(255,255,255,.28)}
.lm-pop-row button[type=submit]{
background:#F7CA11;color:#231F20;border:none;
padding:14px 20px;font-size:11px;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
cursor:pointer;white-space:nowrap;transition:opacity .2s;font-family:inherit;
}
.lm-pop-row button[type=submit]:hover{opacity:.85}
.lm-pop-row button[type=submit]:disabled{opacity:.5;cursor:default}
.lm-pop-note{font-size:11px;color:rgba(255,255,255,.3);margin-top:10px;letter-spacing:.04em}
#lm-popup-success{
display:none;color:#F7CA11;font-size:14px;line-height:1.7;
text-align:center;padding:12px 0;
}
@media(max-width:600px){
#lm-popup-box{padding:40px 28px}
.lm-pop-row{flex-direction:column}
.lm-pop-row input[type=email]{border-right:1px solid rgba(255,255,255,.12);border-bottom:none}
}
/* ---- OFFICIAL LOGO -------------------------------------------------------
The wordmark used to be typed out in Cormorant with a CSS dot beside it,
which is the logo recreated rather than used. This is the supplied
Logo_Negative.svg, unaltered: its #231F20 backing rect sits on a nav of the
same colour, so the lockup reads as transparent without the file being
edited. 168px clears the manual's 160px minimum for the horizontal version,
and the padding is half a star unit (5.9% of the lockup width), which is the
clear space the manual defines. */
.logo{display:flex;align-items:center;padding:calc(168px * 0.059);margin:calc(168px * -0.059)}
.logo img{width:168px;height:auto;display:block}
@media(max-width:640px){
.logo img{width:160px}
.logo{padding:calc(160px * 0.059);margin:calc(160px * -0.059)}
}
.foot-mark img{width:210px;height:auto;display:block;margin-bottom:20px}
/* ---- PATTERN -------------------------------------------------------------
The official tile, used once, as a cropped transition into the footer.
Not a page-wide texture: the manual asks for it sparingly and never behind
running copy. */
.brand-edge{
height:132px;width:100%;
background:url(assets/brand-pattern.png) repeat-x center/auto 250px;
opacity:.13;pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent);
mask-image:linear-gradient(to bottom,transparent,#000 55%,transparent);
}
/* The four-point star replaces the plain rule before a section label — the
mark doing a job rather than decorating. */
.eyebrow::before{
content:'';width:15px;height:15px;background:var(--gold);
-webkit-mask:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBUaGUgZm91ci1wb2ludCBzdGFyLCBsaWZ0ZWQgdW5jaGFuZ2VkIGZyb20gTG9nb19QcmltYXJ5LnN2Zy4gVXNlZCBhcyBhCiAgICAgZnVuY3Rpb25hbCBjdWUgKHNlY3Rpb24gbWFya2VycywgZGl2aWRlcnMpIHBlciB0aGUgbWFudWFsLCBuZXZlciBhcwogICAgIHNjYXR0ZXJlZCBkZWNvcmF0aW9uLiAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMzcuMTggMjM3LjMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPHBhdGggZmlsbD0iI2Y2YzkxMSIgZD0iTTIzNy4xOCwxMTguNjZsLTc0Ljk3LDE4LjQ4LS45LjEzLTcuMTEsMS44MWMtMS40Mi4zOS0yLjg0LjktNC4xNCwxLjU1LTUuNDMsMi41OC05LjU2LDcuNjMtMTAuOTgsMTMuN2wtMjAuNTUsODIuOTgtMjAuMjktODIuOThjLTEuNTUtNi4wOC01LjY5LTExLjEyLTExLjI0LTEzLjctMS4yOS0uNzgtMi41OS0xLjE2LTQuMDEtMS41NWwtMTAuMzQtMi41OC0uNzctLjEzTDAsMTE4LjY2bDYwLjEtMTQuNzQsMjIuODgtNS41NmMxLjQyLS4zOSwyLjcxLS45LDQuMDEtMS41NS45LS4zOSwxLjY4LS43OCwyLjQ2LTEuNDIsNC4yNy0yLjg0LDcuNS03LjI0LDguNzktMTIuNDF2LS4xM0wxMTguNTMsMGwyMC40Miw4Mi44NS4xMy4xM2MxLjI5LDUuMTcsNC4zOSw5LjU2LDguNjYsMTIuNDEuNzguNTIsMS41NSwxLjAzLDIuMzMsMS40MiwxLjI5LjY1LDIuNzIsMS4xNiw0LjE0LDEuNTVsMjAuNTUsNC45MSw2Mi40MywxNS4zOFoiLz4KPC9zdmc+Cg==) no-repeat center/contain;
mask:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBUaGUgZm91ci1wb2ludCBzdGFyLCBsaWZ0ZWQgdW5jaGFuZ2VkIGZyb20gTG9nb19QcmltYXJ5LnN2Zy4gVXNlZCBhcyBhCiAgICAgZnVuY3Rpb25hbCBjdWUgKHNlY3Rpb24gbWFya2VycywgZGl2aWRlcnMpIHBlciB0aGUgbWFudWFsLCBuZXZlciBhcwogICAgIHNjYXR0ZXJlZCBkZWNvcmF0aW9uLiAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMzcuMTggMjM3LjMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPHBhdGggZmlsbD0iI2Y2YzkxMSIgZD0iTTIzNy4xOCwxMTguNjZsLTc0Ljk3LDE4LjQ4LS45LjEzLTcuMTEsMS44MWMtMS40Mi4zOS0yLjg0LjktNC4xNCwxLjU1LTUuNDMsMi41OC05LjU2LDcuNjMtMTAuOTgsMTMuN2wtMjAuNTUsODIuOTgtMjAuMjktODIuOThjLTEuNTUtNi4wOC01LjY5LTExLjEyLTExLjI0LTEzLjctMS4yOS0uNzgtMi41OS0xLjE2LTQuMDEtMS41NWwtMTAuMzQtMi41OC0uNzctLjEzTDAsMTE4LjY2bDYwLjEtMTQuNzQsMjIuODgtNS41NmMxLjQyLS4zOSwyLjcxLS45LDQuMDEtMS41NS45LS4zOSwxLjY4LS43OCwyLjQ2LTEuNDIsNC4yNy0yLjg0LDcuNS03LjI0LDguNzktMTIuNDF2LS4xM0wxMTguNTMsMGwyMC40Miw4Mi44NS4xMy4xM2MxLjI5LDUuMTcsNC4zOSw5LjU2LDguNjYsMTIuNDEuNzguNTIsMS41NSwxLjAzLDIuMzMsMS40MiwxLjI5LjY1LDIuNzIsMS4xNiw0LjE0LDEuNTVsMjAuNTUsNC45MSw2Mi40MywxNS4zOFoiLz4KPC9zdmc+Cg==) no-repeat center/contain;
}
/* ==========================================================================
ART DIRECTION — the Wrap Paper field
The deck puts Wrap Paper at ~15% of the system and the site used none of it:
every section was black, so the page had one note and no rhythm. Services is
the substantive block, and black on paper is 17.28:1 — the deck's own
preferred pairing for information — so the light field belongs here.
The page now reads black, black, PAPER, black.
========================================================================== */
#services, .sec-paper{background:var(--lumus-cream);color:var(--lumus-black);padding-top:0}
/* The pattern finally works. Its L-into-arrow shapes are black: invisible on
the dark ground, correct on paper. This is the cropped field the manual
describes, faded out so it stays behind the copy rather than under it. */
#services::before, .sec-paper::before{
content:'';display:block;width:100vw;margin-left:calc(50% - 50vw);height:128px;
background:url(assets/brand-pattern.png) repeat-x center/auto 236px;
opacity:.48;
-webkit-mask-image:linear-gradient(to bottom,#000 20%,transparent 94%);
mask-image:linear-gradient(to bottom,#000 20%,transparent 94%);
}
#services .s-head, .sec-paper .s-head{margin-bottom:clamp(32px,5vw,64px)}
#services .eyebrow, .sec-paper .eyebrow{color:rgba(35,31,32,.6)}
#services .eyebrow::before, .sec-paper .eyebrow::before{background:var(--lumus-black)}
#services .s-title, .sec-paper .s-title{
font-family:'Cormorant Garamond',serif;font-weight:600;
font-size:clamp(38px,6vw,88px);line-height:.96;letter-spacing:-.022em;
color:var(--lumus-black);
}
/* Yellow as a point of light, not as text: on paper it would fail contrast,
so it underscores the emphasis instead of colouring it. */
#services .s-title em, .sec-paper .s-title em{font-style:italic;position:relative;color:var(--lumus-black)}
#services .s-title em::after, .sec-paper .s-title em::after{
content:'';position:absolute;left:0;right:0;bottom:.09em;height:.08em;
background:var(--lumus-yellow);z-index:0;
}
#services .s-sub, .sec-paper .s-sub{color:rgba(35,31,32,.68);max-width:48ch}
/* Five rows, not five cards. The number, the name and the detail each hold
their own column, so the eye runs left to right instead of scanning a grid
of identical boxes. */
#services .services, .sec-paper .services{display:grid;grid-template-columns:1fr;gap:0}
#services .service, .sec-paper .service{
display:grid;
grid-template-columns:4.6rem minmax(0,1fr) minmax(0,.92fr);
column-gap:clamp(18px,3vw,44px);row-gap:18px;align-items:start;
padding:clamp(24px,3vw,40px) 0;
border:0;border-top:1px solid rgba(35,31,32,.16);
background:none;border-radius:0;box-shadow:none;
text-align:left;
}
/* Explicit placement: the number spans both rows, the name and the detail sit
side by side, and the outputs and link close the row underneath them. Left
to the grid's own flow the names landed at five different x positions, which
read as an accident rather than as composition. */
#services .service > *, .sec-paper .service > *{text-align:left}
#services .service-num, .sec-paper .service-num{grid-column:1;grid-row:1 / span 2}
#services .service h3, .sec-paper .service h3{grid-column:2;grid-row:1;align-self:start}
#services .service p, .sec-paper .service p{grid-column:3;grid-row:1}
#services .service-out, .sec-paper .service-out{grid-column:2;grid-row:2;margin:0}
#services .service-cta, .sec-paper .service-cta{grid-column:3;grid-row:2;justify-self:start;align-self:start}
#services .service:last-child, .sec-paper .service:last-child{border-bottom:1px solid rgba(35,31,32,.16)}
#services .service-num, .sec-paper .service-num{
font-family:'Cormorant Garamond',serif;font-weight:600;
font-size:clamp(30px,3.4vw,52px);line-height:.9;
color:rgba(35,31,32,.26);font-variant-numeric:tabular-nums;min-width:1.6em;
}
#services .service h3, .sec-paper .service h3{
font-family:'Cormorant Garamond',serif;font-weight:600;
font-size:clamp(24px,2.9vw,40px);line-height:1.02;letter-spacing:-.015em;
color:var(--lumus-black);margin:0 0 10px;
}
#services .service p, .sec-paper .service p{color:rgba(35,31,32,.7);font-size:15.5px;line-height:1.7;margin:0;max-width:44ch}
#services .service-out, .sec-paper .service-out{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
#services .service-out span, .sec-paper .service-out span{
font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:rgba(35,31,32,.62);border:1px solid rgba(35,31,32,.22);
padding:5px 10px;border-radius:0;background:none;
}
#services .service-cta, .sec-paper .service-cta{
display:inline-flex;align-items:center;gap:9px;
font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
color:var(--lumus-black);text-decoration:none;border-bottom:1px solid var(--lumus-yellow);
padding-bottom:3px;transition:gap .25s ease;
}
#services .service-cta::after, .sec-paper .service-cta::after{
content:'';width:11px;height:11px;background:var(--lumus-black);
-webkit-mask:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBUaGUgZm91ci1wb2ludCBzdGFyLCBsaWZ0ZWQgdW5jaGFuZ2VkIGZyb20gTG9nb19QcmltYXJ5LnN2Zy4gVXNlZCBhcyBhCiAgICAgZnVuY3Rpb25hbCBjdWUgKHNlY3Rpb24gbWFya2VycywgZGl2aWRlcnMpIHBlciB0aGUgbWFudWFsLCBuZXZlciBhcwogICAgIHNjYXR0ZXJlZCBkZWNvcmF0aW9uLiAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMzcuMTggMjM3LjMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPHBhdGggZmlsbD0iI2Y2YzkxMSIgZD0iTTIzNy4xOCwxMTguNjZsLTc0Ljk3LDE4LjQ4LS45LjEzLTcuMTEsMS44MWMtMS40Mi4zOS0yLjg0LjktNC4xNCwxLjU1LTUuNDMsMi41OC05LjU2LDcuNjMtMTAuOTgsMTMuN2wtMjAuNTUsODIuOTgtMjAuMjktODIuOThjLTEuNTUtNi4wOC01LjY5LTExLjEyLTExLjI0LTEzLjctMS4yOS0uNzgtMi41OS0xLjE2LTQuMDEtMS41NWwtMTAuMzQtMi41OC0uNzctLjEzTDAsMTE4LjY2bDYwLjEtMTQuNzQsMjIuODgtNS41NmMxLjQyLS4zOSwyLjcxLS45LDQuMDEtMS41NS45LS4zOSwxLjY4LS43OCwyLjQ2LTEuNDIsNC4yNy0yLjg0LDcuNS03LjI0LDguNzktMTIuNDF2LS4xM0wxMTguNTMsMGwyMC40Miw4Mi44NS4xMy4xM2MxLjI5LDUuMTcsNC4zOSw5LjU2LDguNjYsMTIuNDEuNzguNTIsMS41NSwxLjAzLDIuMzMsMS40MiwxLjI5LjY1LDIuNzIsMS4xNiw0LjE0LDEuNTVsMjAuNTUsNC45MSw2Mi40MywxNS4zOFoiLz4KPC9zdmc+Cg==) no-repeat center/contain;
mask:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCEtLSBUaGUgZm91ci1wb2ludCBzdGFyLCBsaWZ0ZWQgdW5jaGFuZ2VkIGZyb20gTG9nb19QcmltYXJ5LnN2Zy4gVXNlZCBhcyBhCiAgICAgZnVuY3Rpb25hbCBjdWUgKHNlY3Rpb24gbWFya2VycywgZGl2aWRlcnMpIHBlciB0aGUgbWFudWFsLCBuZXZlciBhcwogICAgIHNjYXR0ZXJlZCBkZWNvcmF0aW9uLiAtLT4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMzcuMTggMjM3LjMyIiBhcmlhLWhpZGRlbj0idHJ1ZSI+CiAgPHBhdGggZmlsbD0iI2Y2YzkxMSIgZD0iTTIzNy4xOCwxMTguNjZsLTc0Ljk3LDE4LjQ4LS45LjEzLTcuMTEsMS44MWMtMS40Mi4zOS0yLjg0LjktNC4xNCwxLjU1LTUuNDMsMi41OC05LjU2LDcuNjMtMTAuOTgsMTMuN2wtMjAuNTUsODIuOTgtMjAuMjktODIuOThjLTEuNTUtNi4wOC01LjY5LTExLjEyLTExLjI0LTEzLjctMS4yOS0uNzgtMi41OS0xLjE2LTQuMDEtMS41NWwtMTAuMzQtMi41OC0uNzctLjEzTDAsMTE4LjY2bDYwLjEtMTQuNzQsMjIuODgtNS41NmMxLjQyLS4zOSwyLjcxLS45LDQuMDEtMS41NS45LS4zOSwxLjY4LS43OCwyLjQ2LTEuNDIsNC4yNy0yLjg0LDcuNS03LjI0LDguNzktMTIuNDF2LS4xM0wxMTguNTMsMGwyMC40Miw4Mi44NS4xMy4xM2MxLjI5LDUuMTcsNC4zOSw5LjU2LDguNjYsMTIuNDEuNzguNTIsMS41NSwxLjAzLDIuMzMsMS40MiwxLjI5LjY1LDIuNzIsMS4xNiw0LjE0LDEuNTVsMjAuNTUsNC45MSw2Mi40MywxNS4zOFoiLz4KPC9zdmc+Cg==) no-repeat center/contain;
}
#services .service-cta:hover, .sec-paper .service-cta:hover{gap:14px}
/* The section's closing link was coloured for the dark ground: on paper it
disappeared entirely. */
#services .btn-ghost, .sec-paper .btn-ghost{
color:var(--lumus-black);border-color:rgba(35,31,32,.28);background:none;
}
#services .btn-ghost:hover, .sec-paper .btn-ghost:hover{background:var(--lumus-black);color:var(--lumus-cream);border-color:var(--lumus-black)}
@media(max-width:860px){
#services .service, .sec-paper .service{grid-template-columns:3.4rem minmax(0,1fr);row-gap:12px}
#services .service p, .sec-paper .service p{grid-column:2;grid-row:2}
#services .service-out, .sec-paper .service-out{grid-column:2;grid-row:3}
#services .service-cta, .sec-paper .service-cta{grid-column:2;grid-row:4}
#services::before, .sec-paper::before{height:92px;background-size:auto 172px}
}
/* ==========================================================================
HERO — built to the art-direction board, not to a dark-agency template
Visual_01..09 share one construction: an oversized circle used as a portal,
a gradient running from cool blue-grey into warm yellow inside it, heavy
uniform grain over everything, and a great deal of dark negative space with
the type set into it. The site had a blurred yellow blob instead.
The gradient is the supplied mesh/light layer, used as an asset rather than
approximated in CSS.
========================================================================== */
.hero-portal{
position:absolute;z-index:0;pointer-events:none;
/* Anchored from the left so the type column always keeps its clear ground,
whatever the viewport. The circle runs off the right edge — the board
crops it at the frame rather than fitting it inside. */
left:68%;right:auto;top:50%;transform:translateY(-50%);
width:min(74vw,940px);aspect-ratio:1;border-radius:50%;
background:url(assets/atmosphere.jpg) center/cover no-repeat;
/* The board keeps a hard circle edge — that is what makes it read as a
portal rather than a glow — and lets only the lower edge dissolve into
the ground. */
-webkit-mask-image:radial-gradient(circle at 50% 46%,#000 68%,rgba(0,0,0,.92) 76%,transparent 86%);
mask-image:radial-gradient(circle at 50% 46%,#000 68%,rgba(0,0,0,.92) 76%,transparent 86%);
opacity:.92;
}
/* Uniform grain across the whole hero, tying the portal to the dark ground.
The handoff asks for visible grain at 5% minimum; this sits just above it. */
.hero::after{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.07;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:200px;
}
/* Asymmetric: the type holds the left, the portal the right. Full-width
running text across a 980px circle would have collided with it. */
/* .hero is a flex column, so the shell's `margin:0 auto` made the block
shrink-to-fit and centre itself — the hero type started ~350px in while
every other section on the page starts at the 56px gutter. One column line
runs down the whole site now, and the space between the type and the portal
is deliberate rather than left over. */
.hero-inner{width:100%}
.hero h1{font-size:clamp(40px,5.6vw,88px)}
.hero-sub{max-width:44ch}
/* The sub was inheriting --text at 62% white. On a flat black that reads thin;
over the portal it measured 3.1:1 on a phone, under the 4.5:1 body minimum.
Solid enough to hold its own ground, everywhere. */
.hero-sub{color:rgba(255,255,255,.84)}
@media(max-width:1100px){
.hero-portal{left:62%;width:92vw;opacity:.72}
}
@media(max-width:760px){
/* On a phone the portal moves behind and above the type: the board's
composition is a tall frame with the circle high and the subject low.
Held to the right and dimmer than on desktop, because at this width the
copy has nowhere to go but across it and the mesh's bright half would
otherwise take the sub-copy under 4.5:1. */
.hero-portal{left:26%;top:1%;transform:none;width:98vw;opacity:.34}
/* The board never runs type across the bright half of the light — the
figure in Visual_06 and 09 is a dark shape against it. At phone widths
the copy has nowhere else to go, so the value drops under it instead:
the circle stays open at the top, the ground closes beneath it. Without
this the sub-copy measured 3.9:1 at 375px, under the 4.5:1 minimum. */
.hero::before{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(to bottom,
rgba(26,23,24,0) 0%, rgba(26,23,24,.22) 24%,
rgba(26,23,24,.80) 46%, rgba(26,23,24,.94) 72%, rgba(26,23,24,.96) 100%);
}
}
/* Short viewports — a laptop at 800px and an iPhone SE at 667px both pushed
the primary action below the fold. The brief is explicit that the offer and
the way to act on it must be visible immediately, so the hero responds to
height, not only to width. */
@media (max-height:820px){
.hero{padding:88px 0 44px;min-height:100svh}
.hero h1{font-size:clamp(37px,4.9vw,70px);margin-bottom:20px}
.hero-sub{margin-bottom:20px;font-size:16.5px;line-height:1.6}
.hero-location{margin-top:14px}
}
/* ==========================================================================
ATMOSPHERE — texture as a system, not an accent
Reference: Visual_04, 06, 08, 09. Three things are true of every one of
those boards and none of them were true of this page.
1. The ground is never a flat fill. It is a mesh running near-black into
olive into yellow into blue-grey.
2. Light arrives as a shape with an edge — a disc, a shaft — not as a
blurred glow bleeding off into nothing.
3. Grain sits over the entire frame, type included, at a weight you can
see from across the room.
Every plate below is the supplied Layer_Gradient_Noise.jpg, not a CSS
gradient imitating it. Which part of the file shows is chosen with
background-position against an oversized background-size:
top-left near-black .dusk
top-right cool blue-grey .cool
bottom-left Lumus yellow .warm
bottom-right white light .lit
So the colour inside every haze on this site is the brand's own artwork.
The handoff puts the mesh layer at 30% minimum; the dark-section plates
sit at or above that, and the two plates that land on Wrap Paper are
lower because they multiply into the paper instead of sitting on it.
========================================================================== */
.atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos span{
position:absolute;display:block;
background-image:url(assets/atmosphere.jpg);
background-repeat:no-repeat;
background-size:250% 250%;
}
.atmos .dusk{background-position:0 0}
.atmos .cool{background-position:100% 0}
.atmos .warm{background-position:0 100%}
.atmos .lit {background-position:100% 100%}
/* Soft-edged mass — light in the air rather than light with a source. */
.atmos .haze{
border-radius:50%;
-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 4%,rgba(0,0,0,.42) 44%,transparent 72%);
mask-image:radial-gradient(circle at 50% 50%,#000 4%,rgba(0,0,0,.42) 44%,transparent 72%);
}
/* Hard-edged disc — the portal. Only the bottom of the edge dissolves. */
.atmos .disc{
border-radius:50%;
-webkit-mask-image:radial-gradient(circle at 50% 48%,#000 62%,rgba(0,0,0,.88) 74%,transparent 88%);
mask-image:radial-gradient(circle at 50% 48%,#000 62%,rgba(0,0,0,.88) 74%,transparent 88%);
}
/* ---- 1. THE PROBLEM — cold, unlit ---------------------------------------
This section is the "before". It gets the blue-grey corner of the mesh and
nothing warm: the yellow does not arrive until Lumus does. */
#problem{overflow:clip}
#problem .p-cold{
left:-26%;top:-6%;width:min(88vw,940px);aspect-ratio:1;opacity:.32;
}
#problem .p-low{
right:-18%;bottom:-34%;width:min(64vw,700px);aspect-ratio:1;opacity:.22;
}
@media(max-width:900px){
#problem .p-cold{left:-40%;width:130vw;opacity:.30}
#problem .p-low{display:none}
}
/* ---- 2. SERVICES — the paper -------------------------------------------
Wrap Paper is a stock, not a swatch: real paper has tooth and takes ink
unevenly. Both layers here multiply, so they darken the cream the way ink
does instead of laying a film over it. Behind the copy, never under it —
.shell holds z-index 2. */
#services, .sec-paper{position:relative;overflow:clip}
#services .atmos, .sec-paper .atmos{mix-blend-mode:multiply}
#services .p-stain, .sec-paper .p-stain{
right:-22%;top:-24%;width:min(78vw,880px);aspect-ratio:1;opacity:.24;
}
#services .p-edge, .sec-paper .p-edge{
left:-30%;bottom:-40%;width:min(70vw,760px);aspect-ratio:1;opacity:.17;
}
/* The tooth. Finer and stronger than the page grain, because paper grain is
a surface you are looking at, not film you are looking through. */
#services::after, .sec-paper::after{
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
opacity:.28;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,");
background-size:150px 150px;
}
/* ---- 3. THE RESULT — the one warm section ------------------------------
The Masala block is the only proven outcome on the page, so it is the only
place the yellow corner of the mesh is allowed to run at full strength. */
#result .p-warm{
right:-24%;top:-30%;width:min(80vw,900px);aspect-ratio:1;opacity:.34;
}
#result .p-floor{
left:-14%;bottom:-46%;width:min(78vw,860px);aspect-ratio:1;opacity:.20;
}
@media(max-width:900px){ #result .p-floor{display:none} }
/* ---- 4. WHY LUMUS — cool again, high and to the right ------------------- */
#why{overflow:clip}
#why .p-cool{
right:-30%;top:-40%;width:min(84vw,900px);aspect-ratio:1;opacity:.30;
}
#why .p-warm{
left:-24%;bottom:-44%;width:min(60vw,640px);aspect-ratio:1;opacity:.16;
}
@media(max-width:900px){ #why .p-warm{display:none} }
/* ---- 5. SELECTED WORK — the floor --------------------------------------
.lw-section was a flat #231F20 slab with a card grid sitting on it. One
wide, low light gives the cards a floor to stand on. */
.lw-section{position:relative;overflow:clip}
.lw-section > *:not(.atmos){position:relative;z-index:2}
#work .p-floor{
left:50%;bottom:-52%;width:min(120vw,1500px);height:80%;
transform:translateX(-50%);border-radius:50%;
background-size:300% 300%;opacity:.26;
}
/* ---- 6. THE CTA — the doorway ------------------------------------------
Visual_08 is a vertical shaft of light with a figure walking into it and
the line "light leads". That is exactly what a final call to action is,
so the page ends on it: a column of the mesh's white corner, and the pool
of warm light it throws on the floor underneath the button.
The two masks are intersected — vertical falloff AND horizontal falloff —
which is what gives the column soft sides and a fading top rather than a
rectangle with a gradient in it. */
#cta{overflow:clip}
#cta .p-beam{
left:50%;top:-18%;width:min(44vw,400px);height:132%;
transform:translateX(-50%);
background-size:420% 420%;
-webkit-mask-image:
linear-gradient(to bottom,#000 0%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.35) 78%,transparent 96%),
linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 16%,#000 40%,#000 60%,rgba(0,0,0,.5) 84%,transparent 100%);
-webkit-mask-composite:source-in;
mask-image:
linear-gradient(to bottom,#000 0%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.35) 78%,transparent 96%),
linear-gradient(to right,transparent 0%,rgba(0,0,0,.5) 16%,#000 40%,#000 60%,rgba(0,0,0,.5) 84%,transparent 100%);
mask-composite:intersect;
opacity:.34;
}
#cta .p-pool{
left:50%;bottom:-42%;width:min(112vw,1400px);height:62%;
transform:translateX(-50%);border-radius:50%;
background-size:320% 320%;opacity:.20;
/* Softer than .haze: a pool of light has no edge at all, and the hard one
was reading as a yellow hill behind the button. */
-webkit-mask-image:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.34) 38%,transparent 66%);
mask-image:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,.9) 0%,rgba(0,0,0,.34) 38%,transparent 66%);
}
@media(max-width:760px){
#cta .p-beam{width:76vw;opacity:.28}
}
/* ---- 7. Objects, not swatches ------------------------------------------
The panels and cards were flat fills with a border. A single directional
light across each one makes them read as surfaces in the same room as
everything above — cool light on the dark panels, warm on the why cards,
because that is the order the page tells the story in. */
.split-panel{background-image:linear-gradient(158deg,rgba(143,167,179,.075),transparent 48%)}
.split-panel.solution{background-image:linear-gradient(158deg,rgba(247,202,17,.075),transparent 48%)}
.why-card{background-image:linear-gradient(150deg,rgba(247,202,17,.055),transparent 44%)}
.lw-card{background-image:linear-gradient(165deg,rgba(255,255,255,.05),transparent 42%)}
/* ---- 8. Hero ------------------------------------------------------------
The hero already carries the portal. With grain now running page-wide, its
own layer only needs to add the extra density the boards show in the frame
around the light, not carry the whole load. */
.hero::after{opacity:.055}
/* ==========================================================================
PAGE PLATES — the same atmosphere, unhooked from the home page's section ids
Every value below is lifted from the plate it generalises, so an inner page
composes light out of the same artwork, at the same strengths, as the home
page rather than approximating it.
========================================================================== */
.s{position:relative}
.s > .shell{position:relative;z-index:2}
/* cold, unlit — the "before" light: blue-grey corner, high and left */
.atmos .pl-cold{left:-26%;top:-6%;width:min(92vw,1020px);aspect-ratio:1;opacity:.46}
/* the same mass mirrored low and right, at the strength that reads as depth */
.atmos .pl-low{right:-18%;bottom:-34%;width:min(64vw,700px);aspect-ratio:1;opacity:.22}
/* warm — the yellow corner, only where the page has something to be warm about */
.atmos .pl-warm{right:-24%;top:-30%;width:min(80vw,900px);aspect-ratio:1;opacity:.34}
.atmos .pl-warm-low{left:-24%;bottom:-44%;width:min(60vw,640px);aspect-ratio:1;opacity:.16}
/* cool, high and right */
.atmos .pl-cool{right:-30%;top:-40%;width:min(92vw,1060px);aspect-ratio:1;opacity:.58}
/* a floor for cards to stand on */
.atmos .pl-floor{
left:50%;bottom:-52%;width:min(120vw,1500px);height:80%;
transform:translateX(-50%);border-radius:50%;
background-size:300% 300%;opacity:.26;
}
@media(max-width:900px){
.atmos .pl-cold{left:-40%;width:130vw;opacity:.30}
.atmos .pl-low,.atmos .pl-warm-low{display:none}
}
/* ---- PAGE HERO ----------------------------------------------------------
The home page hero is the full viewport because it is the thesis. An inner
page opens on its subject and then gets out of the way, so it takes the
same type, portal and reveal at roughly two thirds the height. */
.hero--page{min-height:auto;padding:190px 0 clamp(70px,9vw,120px)}
.hero--page h1{font-size:clamp(42px,5.6vw,86px)}
.hero--page .hero-sub{margin-bottom:0}
@media(max-width:900px){ .hero--page{padding:150px 0 72px} }
/* ---- PAPER SECTION mid-page --------------------------------------------
#services opens straight onto the pattern band because the dark section
above it ends flush. Used mid-page it needs its own bottom air. */
section.sec-paper{padding-bottom:clamp(72px,9vw,120px)}
/* ---- A quote, set as a quote -------------------------------------------- */
.pull{margin:0;padding:clamp(28px,4vw,44px) 0 0;border-top:1px solid var(--border)}
.pull q{
display:block;quotes:none;
font-family:'Cormorant Garamond',serif;font-weight:500;font-style:italic;
font-size:clamp(24px,3vw,38px);line-height:1.24;letter-spacing:-.015em;
color:var(--white);
}
.pull q::before{content:'\201C';color:var(--gold)}
.pull q::after{content:'\201D';color:var(--gold)}
.pull cite{
display:block;margin-top:18px;font-style:normal;
font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
color:var(--text-dim);
}
/* Inside a work panel the quote is a supporting note, not the headline. */
.split-panel .pull q{font-size:clamp(17px,1.7vw,21px);line-height:1.45}
/* ---- Prose column ------------------------------------------------------- */
.prose p{color:var(--text);font-size:16.5px;line-height:1.85;margin-bottom:22px;max-width:66ch}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--white);font-weight:500}
/* The current page in the nav keeps its rule permanently: the underline is
already the hover state, so the page you are on simply stays hovered. */
.nav-links a.is-active{color:var(--white)}
.nav-links a.is-active::after{width:100%}
/* ---- WORK GRID ----------------------------------------------------------
Cards stretch so a pair shares a baseline instead of one hanging short,
and the case that carries a client's own words takes the full width above
them — it is the strongest proof on the page, so it opens rather than
competes for half a row. */
.work-grid{align-items:stretch}
.work-grid .split-panel{display:flex;flex-direction:column}
.work-grid .work-lead{grid-column:1 / -1}
@media(min-width:1101px){
.work-grid .work-lead{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px);align-items:start}
.work-grid .work-lead .split-tag{grid-column:1;grid-row:1}
.work-grid .work-lead h3{grid-column:1;grid-row:2}
.work-grid .work-lead p{grid-column:1;grid-row:3}
.work-grid .work-lead .pull{grid-column:2;grid-row:1 / span 3;margin-top:0;border-top:0;
border-left:1px solid var(--border);padding:0 0 0 clamp(28px,3vw,44px)}
}
/* ---- CONTACT ------------------------------------------------------------
Three ways to reach the same person, so three columns: at repeat(2,1fr) —
the home page's count — the third card dropped to its own row and read as
an afterthought. */
.contact-block--three{grid-template-columns:repeat(3,1fr)}
@media(max-width:980px){ .contact-block--three{grid-template-columns:1fr 1fr} }
@media(max-width:700px){ .contact-block--three{grid-template-columns:1fr} }
/* Sections that continue the one above rather than starting a new argument.
section.s carries 140px top and bottom, so a run of them opened ~360px of
dead ground between the lines, the form and the steps — three parts of a
single conversation. Written as section.s--tight because the base rule is
section.s: a bare class loses to it and the padding never came off. */
section.s--tight{padding-top:0;padding-bottom:clamp(56px,7vw,88px)}
section.s--tight:last-of-type{padding-bottom:140px}
section.s--tight .lead{margin-top:0}
@media(max-width:900px){
section.s--tight{padding-bottom:56px}
section.s--tight:last-of-type{padding-bottom:90px}
}
/* ==========================================================================
THE PAPER STOCK, FOR THE REST OF THE VOCABULARY
Wrap Paper is a brand element, so any page may print on it — but until now
only the service rows knew how. Everything below is the same component,
re-inked for black-on-cream. This is what lets each page take the stock for
whatever its own content is, instead of every page reaching for the one
component that already worked.
========================================================================== */
.sec-paper .obj-card{background:rgba(35,31,32,.035)}
.sec-paper .obj-card:hover{background:rgba(35,31,32,.07)}
.sec-paper .obj-icon{border-color:rgba(35,31,32,.4);color:var(--lumus-black)}
.sec-paper .obj-card h5{color:var(--lumus-black)}
.sec-paper .obj-card p{color:rgba(35,31,32,.7)}
.sec-paper .metric{border-color:rgba(35,31,32,.16)}
.sec-paper .metric-num,.sec-paper .metric-num em{color:var(--lumus-black)}
.sec-paper .metric-num .suffix{color:rgba(35,31,32,.55)}
.sec-paper .metric-label{color:rgba(35,31,32,.6)}
.sec-paper .metric-desc{color:rgba(35,31,32,.68)}
.sec-paper .offer-list li{border-top-color:rgba(35,31,32,.16)}
.sec-paper .offer-li-num{color:rgba(35,31,32,.32)}
.sec-paper .offer-list h4{color:var(--lumus-black)}
.sec-paper .offer-list p{color:rgba(35,31,32,.7)}
/* ---- A number set into the ground, not printed on it ---------------------
The home page sets "157" behind the Masala block at 6% yellow. Same device,
made reusable: the figure a section is really about, large enough to read as
architecture and faint enough to stay behind the copy. */
.ghost{
position:absolute;right:-4%;top:50%;transform:translateY(-50%);
font-family:'Cormorant Garamond',serif;font-weight:500;
font-size:clamp(160px,20vw,320px);line-height:1;
color:rgba(247,202,17,0.06);
pointer-events:none;user-select:none;z-index:1;
}
@media(max-width:900px){ .ghost{font-size:34vw;right:-8%;opacity:.7} }
/* ---- The payoff, at the size it is meant to be read ---------------------- */
.big-text{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.big-text .bt-track{padding-left:56px}
@media(max-width:900px){ .big-text{padding:48px 0} .big-text .bt-track{padding-left:24px} }
/* The ghost figure is deliberately hung past the right edge, so the section
holding one has to clip — otherwise it widens the document and the whole
page scrolls sideways (58px on About before this rule). The @supports
fallback pulls the figure inside on engines without :has(). */
.s:has(.ghost){overflow:clip}
@supports not selector(:has(*)){
.ghost{right:0}
}
/* ---- A COLD WASH -------------------------------------------------------
The blue-grey corner of the mesh is 40% of the official palette and the
site was rendering almost none of it — measured at 0.1% of pixels, home
page included. This is the plate that puts it back into the air: wide and
low-contrast, so it reads as the temperature of the room rather than as a
blue shape sitting on the page. */
.atmos .pl-chill{
left:-18%;top:-24%;width:min(110vw,1320px);height:150%;
background-size:200% 200%;opacity:.62;
-webkit-mask-image:radial-gradient(ellipse at 40% 45%,#000 0%,rgba(0,0,0,.5) 42%,transparent 74%);
mask-image:radial-gradient(ellipse at 40% 45%,#000 0%,rgba(0,0,0,.5) 42%,transparent 74%);
}
@media(max-width:900px){ .atmos .pl-chill{opacity:.50} }
/* ---- WORK PANEL BADGES ---------------------------------------------------
Portfolio mixes real client work with speculative concept builds. They
were reading as equally real, with invented outcomes attached to the
concepts. Same visual language as index.html's lw-badge system: outlined
gold on dark for a concept, solid gold for real client work — inverted,
not just relabelled, so the difference reads before the copy is read. */
.work-badge{
display:inline-flex;align-items:center;gap:8px;
font-size:9px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
padding:6px 12px;border:1px solid rgba(247,202,17,.3);color:var(--gold);
border-radius:2px;margin-bottom:18px;
}
.work-badge--real{background:var(--gold);color:var(--black);border-color:var(--gold)}