:root{
--midnight:#1C2B3A; --ink-deep:#0E1822; --ocean:#5F8190;
--ocean-lt:#8AADB8; --ocean-dk:#2E4A5A;
--mist:#E2F0F0; --white:#FFFFFF; --off:#F7F7F5; --stone:#EDECEA;
--grid:rgba(28,43,58,.045); --grid-dk:rgba(95,129,144,.07);
--rule:rgba(28,43,58,.09); --rule-dk:rgba(95,129,144,.12);
--charcoal:#141414; --ink:rgba(20,20,20,.94); --ink-mut:rgba(20,20,20,.82);
--f-disp:'Source Sans 3','Nimbus Sans','Helvetica Neue',sans-serif;
--f-nav:'Inter','Nimbus Sans','Helvetica Neue',sans-serif;
--f-mono:'JetBrains Mono','Roboto Mono',monospace;
--f-body:'Roboto','Source Sans 3',sans-serif;
--ease:cubic-bezier(.16,1,.3,1);
--ease-in:cubic-bezier(.7,0,.84,0);
--gx:64px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;overflow-x:hidden;scroll-behavior:smooth;}
body{background:var(--off);color:var(--charcoal);font-family:var(--f-body);font-weight:300;overflow-x:hidden;cursor:none;}
img{display:block;max-width:100%;}
/* Visually-hidden helper — used to attach screen-reader-only
announce regions (aria-live) to interactive diagrams. Preserves
reader access while keeping the element out of the visual flow. */
.a11y-only{
position:absolute !important;
width:1px !important;height:1px !important;
padding:0 !important;margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
/* CURSOR — z-indexes raised above any modal (99999) so the
follower remains visible over the booking and principal modals
instead of stacking under their backdrops. pointer-events:none
means they never block clicks even when on top. */
#cd{position:fixed;top:0;left:0;width:6px;height:6px;background:var(--ocean);border-radius:50%;pointer-events:none;z-index:2147483647;transition:width .2s,height .2s,background .2s;will-change:transform;}
#cr{position:fixed;top:0;left:0;width:32px;height:32px;border:1px solid rgba(95,129,144,.45);border-radius:50%;pointer-events:none;z-index:2147483646;transition:width .35s var(--ease),height .35s var(--ease);will-change:transform;}
body.ch #cd{width:11px;height:11px;background:var(--ocean-lt);}
body.ch #cr{width:48px;height:48px;}
/* CANVAS */
#cvs{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.32;}
/* FIXED HIMARK WORDMARK (top center) */
/* Plain text wordmark — replaces the image logo.
Cream-on-dark by default; flips to midnight when `body.light-nav`
activates as the page scrolls past the hero. The wordmark sits
centered at the top, sized for restrained editorial presence. */
#brand-mark{
position:fixed;top:8px;left:50%;transform:translateX(-50%);
z-index:1000;
font-family:var(--f-disp);
font-size:15px;
font-weight:700;
letter-spacing:.32em;
text-transform:uppercase;
color:var(--off);
text-decoration:none;cursor:none;
display:inline-block;
line-height:1;
padding:6px 14px 4px;
transition:color .55s var(--ease), opacity .4s var(--ease);
}
.brand-svg{display:none;}
.brand-wm{
/* now visible — the wordmark IS the brand mark */
display:inline-block;
}
/* Inverted V — a real "V" character rotated 180° inside a nested
span, so the upside-down V has identical stroke weight, height,
and width to the surrounding HIM_RK letters (which the bare Λ
glyph does not — its cap-height and stroke are off in many fonts).
transform-origin math for Source Sans 3 with line-height:1:
baseline at 0.75em from box top
cap-line at 0.09em from box top
V optical centre = (0.09 + 0.75) / 2 ≈ 0.42em → 42%
Putting the pivot at the V's optical centre means after 180°
rotation the V's wings land exactly on the baseline with the
rest of HIM_RK.
Horizontal spacing fix:
Browsers stop applying the parent's letter-spacing at inline-block
boundaries, so the rotated V loses tracking on both sides — visibly
pinching it against R. Setting letter-spacing:0 inside removes any
internal trailing space, and margin-inline:0.32em restores symmetric
tracking that matches the .32em letter-spacing on the rest of HIM_RK. */
.brand-v{
display:inline-block;
transform:rotate(180deg);
transform-origin:50% 42%;
letter-spacing:0;
margin-left:.18em;
margin-right:.4em; /* push it away from R */
}
body.light-nav #brand-mark{
/* cream-on-dark → midnight-on-light when the page scrolls past the hero */
color:var(--midnight);
}
/* Image-based brand mark — replaces the text wordmark.
The PNG is a white-on-transparent logo, so filter:invert(1) flips
it to dark when the page scrolls past the hero (body.light-nav). */
#brand-mark img{
display:block;
height:28px;
width:auto;
user-select:none;
-webkit-user-drag:none;
transition:filter .55s var(--ease), opacity .4s var(--ease);
}
body.light-nav #brand-mark img{
filter:invert(1);
}
/* ============================================================
FLOATING GLASS MENU
Trigger is a small fixed pill in the top-right; clicking it opens
a frosted-glass panel that floats below the trigger with all index
links. HIMARK keeps its mono-coord, italic-em, ocean-accent details
inside an Apple-style Liquid Glass surface.
Backwards-compatible with the existing markup (same IDs / class
names) so no per-page HTML changes were needed.
============================================================ */
/* ---------- TRIGGER: small floating glass pill (bottom-centre) ----------
Vertical centre is aligned with the #mute-btn (50px circle at bottom:36px
→ centre at 61px from viewport bottom). Trigger pill is ~35px tall, so
bottom:43px puts its centre at 60.5px — visually flush with the music
button. Mobile uses the same alignment math against the 42px circle
at bottom:18px → bottom:23px on the trigger. */
#menu-trigger{
position:fixed;
bottom:43px;
left:50%;
top:auto; right:auto;
transform:translateX(-50%);
z-index:9998;
height:auto; width:auto; /* override the old full-height layout */
display:inline-flex;
flex-direction:row;
align-items:center;
justify-content:center;
gap:10px;
padding:10px 18px 11px;
/* Glass */
background:rgba(28,43,58,.42);
-webkit-backdrop-filter:blur(20px) saturate(140%);
backdrop-filter:blur(20px) saturate(140%);
border:1px solid rgba(255,255,255,.14);
border-radius:999px;
box-shadow:
0 8px 24px rgba(0,0,0,.22),
0 1px 0 rgba(255,255,255,.06) inset;
cursor:none;
transition:
background .35s var(--ease),
border-color .35s var(--ease),
transform .35s var(--ease),
bottom .4s var(--ease),
box-shadow .35s var(--ease);
}
#menu-trigger::before{ content:none; } /* kill the old big-pill background */
/* When the cookies banner is visible, lift the trigger above it.
:has() is supported in all current evergreen browsers. */
body:has(#cookies-banner.on) #menu-trigger{ bottom:200px; }
body:has(#cookies-banner.on) #menu-panel { bottom:252px; }
@media (max-width:880px){
body:has(#cookies-banner.on) #menu-trigger{ bottom:280px; }
body:has(#cookies-banner.on) #menu-panel { bottom:332px; }
}
/* Subtle attention pulse — a hairline ring grows outward from the
pill boundary and fades, then repeats. Uses ::after with a
transparent fill (only the border is visible) so the trigger's
own text isn't covered. */
#menu-trigger::after{
content:'';
position:absolute;
inset:-1px;
border-radius:999px;
border:1px solid transparent;
pointer-events:none;
animation:menuPulse 2.8s var(--ease-out) infinite;
}
@keyframes menuPulse{
0%{
transform:scale(1);
border-color:rgba(138,173,184,.55);
opacity:.9;
}
85%, 100%{
transform:scale(1.32);
border-color:rgba(138,173,184,0);
opacity:0;
}
}
body.light-nav #menu-trigger::after{
/* switch to the darker-tint ring on light backgrounds */
animation-name:menuPulseLight;
}
@keyframes menuPulseLight{
0%{
transform:scale(1);
border-color:rgba(28,43,58,.42);
opacity:.85;
}
85%, 100%{
transform:scale(1.32);
border-color:rgba(28,43,58,0);
opacity:0;
}
}
/* Pause the pulse while the user is interacting with the trigger */
#menu-trigger:hover::after{
animation:none;
opacity:0;
}
#menu-trigger:hover{
background:rgba(28,43,58,.62);
border-color:rgba(255,255,255,.22);
/* Lift slightly while keeping the horizontal centring */
transform:translateX(-50%) translateY(-2px);
box-shadow:
0 14px 32px rgba(0,0,0,.30),
0 1px 0 rgba(255,255,255,.10) inset;
}
body.light-nav #menu-trigger{
background:rgba(247,247,245,.55);
border-color:rgba(28,43,58,.10);
box-shadow:
0 8px 24px rgba(28,43,58,.10),
0 1px 0 rgba(255,255,255,.45) inset;
}
body.light-nav #menu-trigger:hover{
background:rgba(247,247,245,.78);
border-color:rgba(28,43,58,.16);
box-shadow:
0 14px 32px rgba(28,43,58,.14),
0 1px 0 rgba(255,255,255,.55) inset;
}
/* Pieces inside the trigger pill — flip orientation back to horizontal,
restyle for a compact mono+sans pairing. */
.mt-num,
.mt-line,
.mt-label{ position:relative; z-index:1; }
.mt-num{
font-family:var(--f-mono);
font-size:9px; font-weight:500;
letter-spacing:.12em;
color:rgba(247,247,245,.62);
writing-mode:horizontal-tb;
transform:none;
transition:color .3s;
}
.mt-line{
width:1px; height:11px;
background:rgba(247,247,245,.32);
transition:background .3s, height .3s;
}
.mt-label{
font-family:var(--f-nav);
font-size:11px; font-weight:600;
letter-spacing:.22em;
text-transform:uppercase;
color:rgba(247,247,245,.92);
writing-mode:horizontal-tb;
transform:none;
transition:color .3s;
}
body.light-nav .mt-num { color:rgba(28,43,58,.55); }
body.light-nav .mt-line { background:rgba(28,43,58,.30); }
body.light-nav .mt-label { color:var(--midnight); }
#menu-trigger:hover .mt-label{ color:var(--off); }
#menu-trigger:hover .mt-line { background:rgba(247,247,245,.55); }
body.light-nav #menu-trigger:hover .mt-label{ color:var(--midnight); }
body.light-nav #menu-trigger:hover .mt-line { background:rgba(28,43,58,.45); }
/* ---------- OVERLAY: very subtle — just enough to dim, not blackout ---------- */
.menu-overlay{
position:fixed; inset:0;
background:rgba(8,15,22,0);
z-index:9989;
pointer-events:none;
transition:background .45s var(--ease);
}
.menu-overlay.on{
background:rgba(8,15,22,.22);
pointer-events:all;
}
/* ---------- PANEL: floating glass card (pops up from the trigger) ---------- */
#menu-panel{
position:fixed;
/* Sits just above the trigger pill at bottom-centre.
trigger bottom 43px + trigger height ~35px + 15px gap = 93px */
bottom:93px;
left:50%;
top:auto; right:auto;
width:340px;
max-width:calc(100vw - 44px);
height:auto;
max-height:calc(100vh - 120px);
overflow:hidden;
z-index:9990;
/* Glass surface */
background:rgba(20,32,46,.55);
-webkit-backdrop-filter:blur(28px) saturate(150%);
backdrop-filter:blur(28px) saturate(150%);
border:1px solid rgba(255,255,255,.12);
border-radius:22px;
box-shadow:
0 28px 64px rgba(0,0,0,.36),
0 1px 0 rgba(255,255,255,.08) inset;
/* Hidden state: nudged DOWN + slightly smaller so it grows up
from the trigger when .open. translateX(-50%) handles
horizontal centring at all times. */
transform:translateX(-50%) translateY(10px) scale(.96);
transform-origin:bottom center;
opacity:0;
pointer-events:none;
padding:0;
display:flex;
flex-direction:column;
transition:
opacity .35s var(--ease),
transform .4s var(--ease),
bottom .4s var(--ease);
}
#menu-panel.open{
opacity:1;
transform:translateX(-50%) translateY(0) scale(1);
pointer-events:auto;
}
body.light-nav #menu-panel{
background:rgba(247,247,245,.68);
border-color:rgba(28,43,58,.10);
box-shadow:
0 28px 64px rgba(28,43,58,.18),
0 1px 0 rgba(255,255,255,.65) inset;
}
/* Decorative grid lines from the old fullscreen layout — not needed
on a small floating panel. */
.menu-bg-grid{ display:none; }
/* Panel header: coord on the left, close on the right. */
.menu-coord-tl{
position:static;
display:block;
padding:14px 18px 4px;
font-family:var(--f-mono);
font-size:9px; font-weight:500;
letter-spacing:.16em;
color:rgba(138,173,184,.78);
text-transform:uppercase;
}
.menu-coord-tr{
position:absolute;
top:10px; right:10px;
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px;
padding:0;
font-family:var(--f-mono);
font-size:0; /* hide the "CLOSE" text */
letter-spacing:0;
color:rgba(247,247,245,.7);
background:transparent;
border:1px solid rgba(255,255,255,.16);
border-radius:999px;
cursor:none;
transition:background .25s, color .25s, border-color .25s;
}
.menu-coord-tr::before{
content:'\00d7'; /* clean × glyph */
font-family:var(--f-disp);
font-size:18px; font-weight:300;
line-height:1;
}
.menu-coord-tr:hover{
background:rgba(255,255,255,.10);
color:var(--off);
border-color:rgba(255,255,255,.30);
}
body.light-nav .menu-coord-tl{ color:rgba(46,74,90,.78); }
body.light-nav .menu-coord-tr{
color:rgba(28,43,58,.62);
border-color:rgba(28,43,58,.16);
}
body.light-nav .menu-coord-tr:hover{
background:rgba(28,43,58,.08);
color:var(--midnight);
border-color:rgba(28,43,58,.30);
}
/* Index list — compact rows inside the glass card. */
.menu-list{
list-style:none;
margin:6px 0 0;
padding:6px 8px 8px;
position:relative; z-index:1;
display:flex; flex-direction:column;
gap:2px;
}
.menu-list li{ margin:0; }
.menu-item{
display:grid;
grid-template-columns:34px 1fr 18px;
gap:12px;
align-items:center;
padding:10px 12px;
border:none;
border-radius:12px;
cursor:none;
text-decoration:none;
position:relative;
overflow:hidden;
background:transparent;
transition:
background .25s ease,
transform .35s var(--ease),
padding-left .35s var(--ease);
}
.menu-item:first-child{ border-top:none; }
.menu-item::before{
content:none; /* drop the swipe background — using BG only now */
}
.menu-item:hover{
background:rgba(255,255,255,.08);
padding-left:16px;
}
body.light-nav .menu-item:hover{
background:rgba(28,43,58,.06);
}
.menu-item > *{ position:relative; z-index:1; }
.mi-num{
font-family:var(--f-mono);
font-size:10px; font-weight:500;
letter-spacing:.10em;
color:rgba(138,173,184,.65);
transition:color .3s;
}
.mi-name{
display:inline-flex;
align-items:baseline;
gap:8px;
font-family:var(--f-disp);
font-size:17px;
font-weight:600;
letter-spacing:-.002em;
color:rgba(247,247,245,.95);
line-height:1.15;
transition:color .3s, transform .35s var(--ease);
}
.mi-name em{
font-style:italic;
font-weight:300;
font-size:11px;
letter-spacing:.06em;
color:rgba(138,173,184,.7);
}
.mi-arrow{
font-family:var(--f-mono);
font-size:13px;
color:rgba(138,173,184,.55);
opacity:0;
transform:translateX(-6px);
transition:opacity .25s, transform .35s var(--ease), color .25s;
}
.menu-item:hover .mi-name{ color:var(--off); }
.menu-item:hover .mi-num { color:rgba(226,240,240,.85); }
.menu-item:hover .mi-arrow{
opacity:1;
transform:translateX(0);
color:var(--off);
}
body.light-nav .mi-num { color:rgba(46,74,90,.7); }
body.light-nav .mi-name { color:var(--midnight); }
body.light-nav .mi-name em{ color:rgba(46,74,90,.55); }
body.light-nav .mi-arrow { color:rgba(46,74,90,.55); }
body.light-nav .menu-item:hover .mi-name { color:var(--midnight); }
body.light-nav .menu-item:hover .mi-num { color:var(--ocean-dk); }
body.light-nav .menu-item:hover .mi-arrow{ color:var(--midnight); }
/* SUB-ITEMS — indented under a parent menu item. Used for Counsel
sitting under Intake. Hidden by default; revealed when the user
hovers the parent (Intake)
or the sub
itself. On touch
devices (no :hover capability) the sub stays visible permanently.
When the user is ON the sessions page (body[data-page="sessions"])
Counsel stays visible so the menu reflects current location. */
/* Hidden state */
.menu-item-sub{
padding-left:48px;
grid-template-columns:48px 1fr 18px;
opacity:0;
max-height:0;
padding-top:0;
padding-bottom:0;
margin:0;
pointer-events:none;
transform:translateX(-10px);
overflow:hidden;
transition:
opacity .35s var(--ease),
max-height .4s var(--ease),
transform .4s var(--ease),
padding .3s var(--ease);
}
/* Reveal — when the previous
(containing Intake) is hovered,
or when the user is hovering the Counsel
itself. Uses :has()
to walk up to the parent
from the .menu-item child. */
li:has(> .menu-item[data-page="intake"]):hover + li > .menu-item-sub,
li:has(> .menu-item-sub):hover > .menu-item-sub,
li:has(> .menu-item-sub):focus-within > .menu-item-sub{
opacity:1;
max-height:64px;
padding-top:10px;
padding-bottom:10px;
pointer-events:auto;
transform:translateX(0);
}
/* Touch / no-hover devices — keep Counsel visible permanently */
@media (hover:none){
.menu-item-sub{
opacity:1;
max-height:64px;
padding-top:10px;
padding-bottom:10px;
pointer-events:auto;
transform:translateX(0);
}
}
/* On the sessions page itself, Counsel always shows */
body[data-page="sessions"] .menu-item-sub{
opacity:1;
max-height:64px;
padding-top:10px;
padding-bottom:10px;
pointer-events:auto;
transform:translateX(0);
}
/* The hairline tie-line connecting Counsel to Intake */
.menu-item-sub::after{
content:'';
position:absolute;
left:24px; top:50%;
width:16px; height:1px;
background:rgba(138,173,184,.3);
z-index:0;
}
.menu-item-sub .mi-num{
font-size:9px;
color:rgba(138,173,184,.5);
}
.menu-item-sub .mi-name{
font-size:14px;
color:rgba(247,247,245,.78);
}
.menu-item-sub .mi-name em{
font-size:10px;
color:rgba(138,173,184,.55);
}
.menu-item-sub:hover{padding-left:54px;}
body.light-nav .menu-item-sub::after{background:rgba(46,74,90,.28);}
body.light-nav .menu-item-sub .mi-name{color:rgba(28,43,58,.72);}
body.light-nav .menu-item-sub .mi-name em{color:rgba(46,74,90,.5);}
/* Panel footer — compact single row inside the glass card. */
.menu-footer{
position:relative; z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:14px 22px;
padding:12px 18px 14px;
margin-top:4px;
border-top:1px solid rgba(255,255,255,.08);
}
body.light-nav .menu-footer{ border-top-color:rgba(28,43,58,.08); }
.mf-block{ min-width:0; }
.mf-label{
font-family:var(--f-mono);
font-size:8px; font-weight:600;
letter-spacing:.16em;
text-transform:uppercase;
color:rgba(138,173,184,.75);
margin-bottom:4px;
}
.mf-text{
font-family:var(--f-body);
font-size:11px; line-height:1.45;
color:rgba(247,247,245,.78);
font-weight:400;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.mf-link{
color:var(--off);
text-decoration:none;
cursor:none;
border-bottom:1px solid rgba(138,173,184,.5);
transition:color .3s, border-color .3s;
}
.mf-link:hover{
color:var(--ocean-lt);
border-bottom-color:var(--ocean-lt);
}
body.light-nav .mf-label{ color:rgba(46,74,90,.78); }
body.light-nav .mf-text { color:rgba(28,43,58,.72); }
body.light-nav .mf-link {
color:var(--midnight);
border-bottom-color:var(--ocean);
}
body.light-nav .mf-link:hover{
color:var(--ocean);
border-bottom-color:var(--ocean);
}
/* PAGE SYSTEM */
.page{
position:fixed;inset:0;
overflow-y:auto;overflow-x:hidden;
z-index:10;opacity:0;
transform:translateY(14px);
pointer-events:none;
transition:opacity .55s var(--ease),transform .55s var(--ease);
will-change:transform,opacity;
}
.page.active{opacity:1;transform:none;pointer-events:all;z-index:11;}
.page.exit{opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .35s var(--ease-in),transform .35s var(--ease-in);}
/* SNAP-SCROLL on home */
#page-home.snap-on{scroll-snap-type:y mandatory;}
#page-home.snap-on .snap-section{scroll-snap-align:start;scroll-snap-stop:always;}
/* COORD MARKS */
.coord{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.06em;color:var(--ocean);}
/* SECTION NUMBER BAR */
.s-num-bar{
display:flex;justify-content:space-between;align-items:center;
padding:18px var(--gx);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;
color:var(--ocean);text-transform:uppercase;background:var(--off);
}
.s-num-bar.dk{border-top-color:var(--rule-dk);border-bottom-color:var(--rule-dk);background:var(--ink-deep);color:rgba(95,129,144,.7);}
.s-num-bar > span:nth-child(2){color:var(--charcoal);font-weight:700;}
.s-num-bar.dk > span:nth-child(2){color:var(--off);}
/* EYEBROW */
.eyebrow{font-family:var(--f-nav);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ocean);display:flex;align-items:center;gap:14px;margin-bottom:28px;}
.eyebrow::before{content:'';display:block;width:24px;height:1px;background:var(--ocean);}
.eyebrow.light{color:rgba(226,240,240,.7);}
.eyebrow.light::before{background:rgba(95,129,144,.6);}
/* REVEALS */
.r3d{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.r3d.in{opacity:1;transform:none;}
.r3d.d1{transition-delay:.08s}.r3d.d2{transition-delay:.16s}.r3d.d3{transition-delay:.24s}.r3d.d4{transition-delay:.32s}.r3d.d5{transition-delay:.40s}.r3d.d6{transition-delay:.48s}
.r3d-l{opacity:0;transform:translateX(-28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.r3d-l.in{opacity:1;transform:none;}
.r3d-r{opacity:0;transform:translateX(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.r3d-r.in{opacity:1;transform:none;}
.r3d-l.d1,.r3d-r.d1{transition-delay:.12s}
.r3d-l.d2,.r3d-r.d2{transition-delay:.24s}
/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:14px;font-family:var(--f-nav);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:16px 36px;text-decoration:none;cursor:none;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s,transform .35s var(--ease);position:relative;}
.btn-dk{color:var(--off);background:var(--midnight);}
.btn-dk:hover{background:var(--ocean);transform:translateY(-2px);}
.btn-lt{color:var(--midnight);background:transparent;border-color:rgba(28,43,58,.3);}
.btn-lt:hover{background:var(--midnight);color:var(--off);border-color:var(--midnight);transform:translateY(-2px);}
.btn-ghost{font-family:var(--f-nav);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,247,245,.82);text-decoration:none;cursor:none;display:inline-flex;align-items:center;gap:12px;transition:color .3s,gap .35s var(--ease);}
.btn-ghost:hover{color:var(--off);gap:22px;}
.btn-ghost::after{content:'→';}
.btn::before{content:attr(data-num);font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.05em;opacity:.6;}
/* HOME — HERO with VIDEO */
#page-home{background:var(--off);}
.hero{position:relative;height:100vh;min-height:680px;background:var(--ink-deep);overflow:hidden;}
.hero-video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;object-position:center;
z-index:0;
/* zoom is driven from JS via this CSS variable; defaults to 1 if JS off */
transform:scale(var(--hero-zoom,1));
transform-origin:center;
will-change:transform;
transition:transform .12s linear;
}
/* HOME PAGE — cinematic sticky hero. The hero video stays as a backdrop
while subsequent sections layer over it on scroll. Mirrors the pattern
used on doctrine, mandates, method, airass, principals, and intake. */
#page-home > .hero{
position:sticky;
top:0;
height:100vh;
min-height:100vh;
z-index:0;
}
#page-home > .s-num-bar,
#page-home > .monolith,
#page-home > .metrics,
#page-home > .home-svc-section,
#page-home > .quote-mono,
#page-home > .img-marquee,
#page-home > .footer{
position:relative;
z-index:1;
}
#page-home > .s-num-bar:nth-of-type(1){
/* the first section to arrive over the hero — soft top edge for "lift" */
box-shadow:0 -24px 60px rgba(28,43,58,.10), 0 -1px 0 rgba(28,43,58,.06);
}
@media (prefers-reduced-motion:reduce){
#page-home > .hero{position:relative;height:100vh;}
.hero-video{transform:none;transition:none;}
/* Disable the menu trigger's attention pulse for users who've
requested reduced motion. */
#menu-trigger::after{animation:none !important; opacity:0 !important;}
}
.hero::before{content:'';position:absolute;inset:0;background:rgba(8,15,22,.62);z-index:1;}
.hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:75%;background:linear-gradient(to top,rgba(6,12,18,.97) 0%,rgba(6,12,18,.55) 50%,transparent 100%);z-index:1;}
.hero-grid{position:absolute;inset:0;z-index:2;pointer-events:none;display:grid;grid-template-columns:var(--gx) repeat(6,1fr) var(--gx);}
.hero-grid > div{border-right:1px solid rgba(95,129,144,.08);}
.hero-grid > div:first-child,.hero-grid > div:last-child{border-right:none;}
.hero-coords-top{position:absolute;top:108px;left:0;right:0;display:flex;justify-content:space-between;padding:0 var(--gx);z-index:3;}
.hero-coords-bottom{position:absolute;bottom:32px;left:0;right:0;display:flex;justify-content:space-between;padding:0 var(--gx);z-index:3;}
.hero-coord{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.5);text-transform:uppercase;}
.hero-coord-line{flex:1;height:1px;margin:8px 24px 0;background:linear-gradient(to right,rgba(95,129,144,.2),transparent);align-self:flex-start;}
.hero-c{position:absolute;left:var(--gx);right:var(--gx);bottom:90px;z-index:3;}
.hero-eyebrow{font-family:var(--f-nav);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ocean-lt);margin-bottom:24px;display:flex;align-items:center;gap:14px;opacity:0;animation:fuA .8s var(--ease) .4s forwards;}
.hero-eyebrow::before{content:'';display:block;width:32px;height:1px;background:var(--ocean);}
.hero-hl{font-family:var(--f-disp);font-size:clamp(54px,8vw,128px);font-weight:800;line-height:.92;color:var(--off);letter-spacing:-.015em;opacity:0;animation:fuA .9s var(--ease) .55s forwards;}
.hero-hl span{display:block;font-style:italic;color:rgba(247,247,245,.7);font-weight:300;}
.hero-meta-row{display:grid;grid-template-columns:1fr 1fr;margin-top:48px;padding-top:32px;border-top:1px solid rgba(95,129,144,.18);opacity:0;animation:fuA .9s var(--ease) .85s forwards;}
.hero-meta-l{font-family:var(--f-body);font-weight:300;font-size:14px;line-height:1.7;color:rgba(247,247,245,.82);max-width:360px;}
.hero-meta-r{display:flex;align-items:flex-end;justify-content:flex-end;gap:32px;}
@keyframes fuA{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* MONOLITH STATEMENT */
.monolith{background:var(--midnight);padding:160px var(--gx);position:relative;overflow:hidden;border-bottom:1px solid var(--rule-dk);}
.monolith::before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-dk) 1px,transparent 1px);background-size:calc((100vw - 128px) / 6) 100%;background-position:64px 0;pointer-events:none;opacity:.55;}
.mono-coord-tl,.mono-coord-tr,.mono-coord-bl,.mono-coord-br{position:absolute;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.55);text-transform:uppercase;}
.mono-coord-tl{top:32px;left:var(--gx);} .mono-coord-tr{top:32px;right:var(--gx);}
.mono-coord-bl{bottom:32px;left:var(--gx);} .mono-coord-br{bottom:32px;right:var(--gx);}
.mono-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;position:relative;z-index:1;}
.mono-word{font-family:var(--f-disp);font-size:clamp(80px,12vw,200px);font-weight:800;line-height:.92;color:var(--off);letter-spacing:-.02em;display:block;}
.mono-word em{font-style:italic;font-weight:300;color:var(--ocean);display:block;}
/* PRECISION · NOT · VOLUME — scroll-driven word reveal */
.mono-line{
display:block;
opacity:0;
transform:translateY(0.42em);
/* clip mask creates a "lifted from below the line" effect */
clip-path:inset(0 0 100% 0);
-webkit-clip-path:inset(0 0 100% 0);
transition:
opacity 1.15s cubic-bezier(.16,1,.3,1),
transform 1.25s cubic-bezier(.16,1,.3,1),
clip-path 1.25s cubic-bezier(.16,1,.3,1),
-webkit-clip-path 1.25s cubic-bezier(.16,1,.3,1);
will-change:opacity,transform,clip-path;
/* tighter vertical rhythm between lines */
margin-top:.04em;
}
.mono-line:first-child{margin-top:0;}
.mono-line.is-revealed{
opacity:1;
transform:translateY(0);
clip-path:inset(-10% 0 -10% 0);
-webkit-clip-path:inset(-10% 0 -10% 0);
}
.mono-line-em{
font-style:italic;
font-weight:300;
color:var(--ocean);
}
.mono-text{font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.9;color:rgba(247,247,245,.84);margin-bottom:16px;}
.mono-rule{width:48px;height:1px;background:var(--ocean);margin:36px 0;}
.mono-mini{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ocean-lt);}
/* METRICS */
.metrics{background:var(--off);padding:0;border-bottom:1px solid var(--rule);}
.metrics-inner{display:grid;grid-template-columns:repeat(5,1fr);}
.metric-cell{padding:64px 36px;border-right:1px solid var(--rule);text-align:left;position:relative;transition:background .3s;}
.metric-cell:hover{background:var(--white);}
.metric-cell:last-child{border-right:none;}
.metric-cell::before{content:attr(data-idx);position:absolute;top:18px;right:18px;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.5);}
.metric-n{font-family:var(--f-disp);font-size:64px;font-weight:800;color:var(--midnight);line-height:.95;margin-bottom:18px;letter-spacing:-.01em;}
.metric-l{font-family:var(--f-nav);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ocean);}
/* IMAGE MARQUEE */
.img-marquee{
background:var(--off);padding:80px 0;
border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
overflow:hidden;position:relative;
}
.img-marquee-coord{position:absolute;top:32px;left:var(--gx);font-family:var(--f-mono);font-size:9px;color:var(--ocean);letter-spacing:.1em;z-index:2;}
.img-marquee-coord-r{position:absolute;top:32px;right:var(--gx);font-family:var(--f-mono);font-size:9px;color:rgba(95,129,144,.5);letter-spacing:.1em;z-index:2;}
.imgm-track{
display:flex;gap:24px;
width:max-content;
animation:imgmScroll 38s linear infinite;
will-change:transform;
}
.imgm-track:hover{animation-play-state:paused;}
.imgm-card{
flex-shrink:0;width:380px;height:240px;
position:relative;overflow:hidden;
perspective:1000px;
transition:transform .5s var(--ease);
}
.imgm-card-inner{
position:absolute;inset:0;
background-size:cover;background-position:center;
transition:transform .8s var(--ease),filter .5s;
filter:grayscale(.2) brightness(.95);
}
.imgm-card:hover .imgm-card-inner{
transform:scale(1.08) translateZ(20px);
filter:grayscale(0) brightness(1);
}
.imgm-card::after{
content:attr(data-label);position:absolute;bottom:14px;left:18px;
font-family:var(--f-mono);font-size:10px;color:var(--off);
letter-spacing:.14em;text-transform:uppercase;
background:rgba(28,43,58,.7);padding:6px 12px;
z-index:1;
}
@keyframes imgmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* HOME SERVICES PREVIEW */
.home-svc-section{background:var(--white);padding:140px var(--gx);border-bottom:1px solid var(--rule);position:relative;}
.home-svc-header{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:80px;}
.svc-hl{font-family:var(--f-disp);font-size:clamp(44px,5vw,76px);font-weight:800;line-height:1.0;color:var(--midnight);letter-spacing:-.01em;}
.svc-hl em{font-style:italic;font-weight:300;color:var(--ocean);}
/* TYPEWRITER — shared cursor styling (used by both the looping headline
and the one-time quote reveal) */
.tw-cursor{
display:inline-block;
width:.06em;
height:.86em;
margin-left:.05em;
background:currentColor;
vertical-align:-0.08em;
/* steps(1) gives a clean, deliberate blink (no fade smear) */
animation:twBlink 1.05s steps(1) infinite;
transform:translateZ(0);
}
.tw-cursor.tw-cursor-done{
/* permanent removal — fade then hide */
animation:none;
opacity:0;
transition:opacity .6s var(--ease);
width:0;margin:0;
}
@keyframes twBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.tw-cursor{animation:none;opacity:.55;}
}
/* "Three levels of engagement." — looping headline */
.typewriter-h2{
/* lock the line space so the page doesn't re-flow as text types */
min-height:2.05em;
white-space:normal;
}
.typewriter-h2 .tw-out{
/* preserve + spaces inside the typed output */
white-space:pre-wrap;
}
.typewriter-h2 .tw-out em{font-style:italic;font-weight:300;color:var(--ocean);}
.typewriter-h2 .tw-cursor{
/* override colour for the headline — ocean accent on the light section */
background:var(--ocean);
}
.typewriter-h2.tw-paused .tw-cursor{animation-duration:1.4s;}
/* Quote-body one-time reveal. The cursor inherits the cream text colour
via currentColor so it sits naturally on the dark blue background. */
.quote-body[data-typewriter-once] .tw-out{
white-space:pre-wrap;
}
.quote-body[data-typewriter-once] .tw-cursor{
/* slightly thinner so it doesn't distract at large display sizes */
width:.04em;
height:.78em;
vertical-align:-0.05em;
}
/* CURSOR GHOST TRAIL — grid-tile illumination that sits ON the dark section
backgrounds. Screen blend means the trail brightens dark pixels (the
monolith / hero / quote backgrounds) but barely touches light text — so
readability is preserved while the tiles read as "lit ground" not overlay. */
#ghost-trail{
position:fixed;
inset:0;
pointer-events:none;
z-index:12; /* just above .page (z-index 11), below all floating UI */
mix-blend-mode:screen;
-webkit-mix-blend-mode:screen;
display:none;
}
@media (hover:hover) and (pointer:fine){
#ghost-trail{display:block;}
}
body.auth-mode #ghost-trail{display:none;}
.svc-note{font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.8;color:var(--ink-mut);max-width:420px;}
/* TIER FLIP CARDS — same .svc-card class on Home and Mandates */
.svc-grid-3{
display:grid;grid-template-columns:repeat(3,1fr);
/* Each card now stands on its own with a gap between them so the
trio reads as three engineered modules instead of one welded slab. */
gap:24px;
/* deeper perspective + isolation prevents stacking-context bleed during flip */
perspective:2400px;
perspective-origin:50% 30%;
isolation:isolate;
}
.svc-card{
position:relative;
border:1px solid var(--rule);
cursor:none;
background:transparent;
min-height:560px;
/* GPU-promote + 3D context. translateZ(0) forces compositing layer
which removes mid-rotation tearing/aliasing on most renderers. */
transform:translateZ(0);
transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
will-change:transform,box-shadow;
transition:transform 1s cubic-bezier(.2,.7,.15,1), box-shadow .6s var(--ease);
/* premium ambient depth at rest — soft, layered, never harsh */
box-shadow:
0 1px 2px rgba(28,43,58,.035),
0 6px 14px rgba(28,43,58,.05),
0 22px 48px rgba(28,43,58,.07);
}
.svc-card:hover,
.svc-card.flipped{
transform:rotateY(180deg) translateZ(0);
/* lift + glow on flip */
box-shadow:
0 2px 4px rgba(28,43,58,.05),
0 12px 28px rgba(28,43,58,.08),
0 40px 72px rgba(28,43,58,.13),
0 0 0 1px rgba(95,129,144,.08);
z-index:3; /* keep flipping card above its neighbours during rotation */
}
/* TIER FLIP CARDS — puzzle detachment. Each card pulls outward
while flipping, so the trio reads as three engineered pieces
separating from a single system. Translate-before-rotateY
moves the card in local space, then the flip rotates around it. */
.svc-grid-3 > .svc-card:nth-child(1):hover,
.svc-grid-3 > .svc-card:nth-child(1).flipped{
transform:translate3d(-12px,-7px,0) rotateY(180deg) translateZ(0);
}
.svc-grid-3 > .svc-card:nth-child(2):hover,
.svc-grid-3 > .svc-card:nth-child(2).flipped{
transform:translate3d(0,-10px,0) rotateY(180deg) translateZ(0);
}
.svc-grid-3 > .svc-card:nth-child(3):hover,
.svc-grid-3 > .svc-card:nth-child(3).flipped{
transform:translate3d(12px,-7px,0) rotateY(180deg) translateZ(0);
}
.svc-card-face{
position:absolute;inset:0;
padding:56px 44px 48px;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
display:flex;flex-direction:column;
transition:background .4s;
/* nudge faces onto their own compositing layer to remove flicker
and the brief "both faces visible" flash some browsers show */
transform:translateZ(0);
-webkit-transform:translateZ(0);
/* fixes 1px shimmer on rotated edges on Chromium */
outline:1px solid transparent;
}
.svc-card-face.front{
background:var(--white);
/* sit slightly forward so it never z-fights with the back face mid-rotation */
transform:translateZ(.1px);
-webkit-transform:translateZ(.1px);
}
.svc-card-face.back{
background:var(--midnight);color:var(--off);
transform:rotateY(180deg) translateZ(.1px);
-webkit-transform:rotateY(180deg) translateZ(.1px);
overflow:hidden;
}
.svc-card-face.back::before{
/* gridded backdrop on the dark side */
content:'';position:absolute;inset:0;
background-image:linear-gradient(to right,var(--grid-dk) 1px,transparent 1px);
background-size:33.333% 100%;
pointer-events:none;opacity:.6;
}
.svc-card-face.front::before{
/* idx label */
content:attr(data-idx);position:absolute;top:24px;right:24px;
font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.5);
}
.svc-card-face.front::after{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:var(--ocean);transform:scaleX(0);transform-origin:left;
transition:transform .5s var(--ease);
}
.svc-card:hover .svc-card-face.front::after{transform:scaleX(1);}
/* Hover hint */
.svc-flip-hint{
position:absolute;bottom:18px;left:44px;
font-family:var(--f-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
color:rgba(95,129,144,.5);
display:flex;align-items:center;gap:8px;
opacity:0;transition:opacity .35s .1s;
pointer-events:none;
}
.svc-flip-hint::before{content:'⤴';font-size:12px;}
.svc-card:not(:hover):not(.flipped) .svc-flip-hint{opacity:.85;animation:flipHint 3.5s ease-in-out infinite;}
@keyframes flipHint{0%,100%{transform:translateX(0);opacity:.5}50%{transform:translateX(4px);opacity:.85}}
/* Front-side typography (existing classes preserved) */
.svc-tag{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean);margin-bottom:24px;}
.svc-title{font-family:var(--f-disp);font-size:34px;font-weight:800;color:var(--midnight);line-height:1;margin-bottom:32px;letter-spacing:-.01em;}
.svc-rule{width:100%;height:1px;background:var(--rule);margin-bottom:28px;}
.svc-desc{font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.8;color:var(--ink-mut);margin-bottom:32px;}
.svc-feats{list-style:none;display:flex;flex-direction:column;gap:11px;}
.svc-feats li{font-family:var(--f-body);font-weight:400;font-size:13px;line-height:1.7;color:var(--ink-mut);display:flex;gap:14px;align-items:flex-start;}
.svc-feats li::before{content:'';display:block;width:16px;height:1px;background:var(--ocean);margin-top:9px;flex-shrink:0;}
.svc-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-nav);font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ocean);text-decoration:none;cursor:none;margin-top:auto;transition:color .3s,gap .35s var(--ease);}
.svc-cta:hover{color:var(--midnight);gap:18px;}
.svc-cta::after{content:'→';}
/* Back-side typography */
.svc-back-coord{
position:absolute;top:24px;right:24px;
font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;color:rgba(95,129,144,.6);
z-index:1;
}
.svc-back-tag{
font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:var(--ocean-lt);margin-bottom:18px;
display:flex;align-items:center;gap:14px;position:relative;z-index:1;
}
.svc-back-tag::before{content:'';display:block;width:24px;height:1px;background:var(--ocean);}
.svc-back-h{
font-family:var(--f-disp);font-size:24px;font-weight:800;
color:var(--off);line-height:1.1;margin-bottom:24px;letter-spacing:-.005em;position:relative;z-index:1;
}
.svc-back-h em{font-style:italic;font-weight:300;color:var(--ocean-lt);}
.svc-back-block{
position:relative;z-index:1;
padding:14px 0;border-top:1px solid rgba(95,129,144,.15);
display:grid;grid-template-columns:90px 1fr;gap:16px;
}
.svc-back-block:last-of-type{border-bottom:1px solid rgba(95,129,144,.15);}
.svc-back-l{
font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:rgba(95,129,144,.7);
}
.svc-back-v{
font-family:var(--f-body);font-size:12px;line-height:1.55;
color:rgba(247,247,245,.78);font-weight:300;
}
.svc-back-v strong{color:var(--off);font-weight:600;}
.svc-back-cta{
margin-top:auto;position:relative;z-index:1;
display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
font-family:var(--f-nav);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
color:var(--ink-deep);background:var(--off);
padding:14px 22px;text-decoration:none;cursor:none;
border:none;
transition:background .3s,color .3s;
}
.svc-back-cta:hover{background:var(--ocean);color:var(--off);}
.svc-back-cta::after{content:'→';font-family:var(--f-mono);}
/* QUOTE MONOLITH */
.quote-mono{background:var(--ink-deep);padding:140px var(--gx);position:relative;overflow:hidden;}
.quote-mono::before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-dk) 1px,transparent 1px);background-size:calc((100vw - 128px) / 6) 100%;background-position:64px 0;pointer-events:none;opacity:.4;}
.quote-mono-coord-tl{position:absolute;top:32px;left:var(--gx);font-family:var(--f-mono);font-size:9px;color:rgba(95,129,144,.5);letter-spacing:.08em;}
.quote-mono-coord-tr{position:absolute;top:32px;right:var(--gx);font-family:var(--f-mono);font-size:9px;color:rgba(95,129,144,.5);letter-spacing:.08em;}
.quote-grid{display:grid;grid-template-columns:80px 1fr;gap:56px;align-items:start;position:relative;z-index:1;}
.quote-mark{font-family:var(--f-disp);font-size:140px;line-height:.55;color:rgba(95,129,144,.18);font-weight:800;user-select:none;}
.quote-body{font-family:var(--f-disp);font-size:clamp(24px,2.6vw,40px);font-weight:300;font-style:italic;line-height:1.4;color:var(--off);max-width:880px;margin-bottom:44px;}
.quote-attr{display:flex;align-items:center;gap:18px;}
.qa-line{width:32px;height:1px;background:var(--ocean);}
.qa-name{font-family:var(--f-nav);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--off);}
.qa-role{font-family:var(--f-body);font-size:12px;color:var(--ocean);}
/* DOCTRINE PAGE (was About) */
#page-doctrine{background:var(--off);}
.doc-split{display:grid;grid-template-columns:5fr 4fr;min-height:calc(100vh - 0px);border-bottom:1px solid var(--rule);}
.doc-left{background:#5F8190;padding:160px var(--gx) 100px;position:relative;overflow:hidden;}
.doc-left::before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-dk) 1px,transparent 1px);background-size:calc((100% - 0px)/4) 100%;pointer-events:none;}
.doc-left-coord{position:absolute;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.55);text-transform:uppercase;}
.doc-left .tl{top:32px;left:var(--gx);}.doc-left .tr{top:32px;right:32px;}
.doc-left-content{position:relative;z-index:1;}
.doc-hl{font-family:var(--f-disp);font-size:clamp(64px,8vw,128px);font-weight:800;line-height:.88;color:var(--off);letter-spacing:-.02em;}
.doc-hl span{display:block;font-style:italic;font-weight:300;color:var(--ocean-lt);}
.doc-sub{font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.85;color:rgba(247,247,245,.85);max-width:400px;margin-top:36px;}
.doc-meta{margin-top:80px;padding-top:32px;border-top:1px solid rgba(95,129,144,.2);display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.doc-meta-l{font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ocean);margin-bottom:8px;}
.doc-meta-v{font-family:var(--f-disp);font-size:18px;font-weight:600;color:var(--off);}
.doc-right{position:relative;min-height:560px;overflow:hidden;background:var(--midnight);}
.doc-right-bg{
position:absolute;inset:0;
background-image:url('../images/about-hero.jpg');
background-size:cover;
background-position:center;
/* zoom is driven from JS via CSS variable; defaults to 1 if JS off */
transform:scale(var(--hero-zoom,1));
transform-origin:center;
will-change:transform;
transition:transform .12s linear;
}
/* DOCTRINE PAGE — cinematic sticky hero. The hero stays as a backdrop while
subsequent sections layer over it. Subsequent sections need z-index >= 1
so their solid backgrounds occlude the sticky hero as they pass over. */
#page-doctrine .doc-split{
position:sticky;
top:0;
height:100vh;
min-height:100vh;
z-index:0;
overflow:hidden;
}
#page-doctrine .s-num-bar,
#page-doctrine .doc-decl,
#page-doctrine .doc-pillars,
#page-doctrine .quote-mono,
#page-doctrine .footer{
position:relative;
z-index:1;
}
#page-doctrine .doc-decl{
/* the first section that arrives "over" the hero — soft top shadow lifts it */
box-shadow:0 -24px 60px rgba(28,43,58,.10), 0 -1px 0 rgba(28,43,58,.06);
}
@media (prefers-reduced-motion:reduce){
#page-doctrine .doc-split{position:relative;height:auto;min-height:100vh;}
.doc-right-bg{transform:none;transition:none;}
}
.doc-right::before{content:'';position:absolute;inset:0;background:rgba(28,43,58,.06);}
.doc-decl{background:var(--white);padding:140px var(--gx);border-bottom:1px solid var(--rule);position:relative;}
.doc-decl-coord{position:absolute;top:48px;left:var(--gx);font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--ocean);}
.doc-decl-coord-r{position:absolute;top:48px;right:var(--gx);font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:rgba(95,129,144,.5);}
.docl-inner{max-width:1100px;margin:60px auto 0;}
.docl-text{font-family:var(--f-disp);font-size:clamp(28px,3.4vw,52px);font-weight:300;line-height:1.32;color:var(--midnight);letter-spacing:-.005em;}
.docl-text strong{font-weight:800;}
.docl-text em{font-style:italic;color:var(--ocean);}
.doc-pillars{background:var(--off);padding:120px var(--gx);border-bottom:1px solid var(--rule);}
.dpl-grid{
display:grid;grid-template-columns:1fr 1fr;
border-top:1px solid var(--rule);border-left:1px solid var(--rule);
margin-top:60px;
/* containing block for the detaching cells; prevents shadow clipping */
position:relative;
isolation:isolate;
}
.dpl-cell{
padding:64px 56px;
border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
position:relative;
background:transparent;
/* GPU-promote so the lift stays sub-pixel sharp */
transform:translate3d(0,0,0);
will-change:transform,box-shadow;
transition:
transform .55s cubic-bezier(.2,.7,.15,1),
box-shadow .55s cubic-bezier(.2,.7,.15,1),
background .35s ease,
border-color .35s ease;
}
.dpl-cell::before{content:attr(data-idx);position:absolute;top:24px;right:28px;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.5);}
/* PUZZLE DETACHMENT — the hovered piece lifts away from the cluster, in the
direction of the corner it occupies. Neighbours stay perfectly still, so
the whole cluster reads as a precision-machined system from which one
piece has been pulled. Translation is small (~10px), rotation is tiny
(≤0.5deg) and a layered shadow does the heavy lifting on depth. */
.dpl-cell:hover{
background:var(--white);
z-index:5;
/* subtle ocean-tinted ring + layered ambient — never harsh */
box-shadow:
0 1px 2px rgba(28,43,58,.04),
0 12px 28px rgba(28,43,58,.08),
0 36px 64px rgba(28,43,58,.12),
0 0 0 1px rgba(95,129,144,.10);
border-right-color:transparent;
border-bottom-color:transparent;
}
/* corner-aware translation — each cell pulls toward its outer corner */
.dpl-cell:nth-child(1):hover{transform:translate3d(-10px,-10px,0) rotate(-0.4deg);}
.dpl-cell:nth-child(2):hover{transform:translate3d(10px,-10px,0) rotate(0.4deg);}
.dpl-cell:nth-child(3):hover{transform:translate3d(-10px,10px,0) rotate(0.4deg);}
.dpl-cell:nth-child(4):hover{transform:translate3d(10px,10px,0) rotate(-0.4deg);}
.dpl-num{font-family:var(--f-disp);font-size:68px;font-weight:800;color:rgba(95,129,144,.14);line-height:1;margin-bottom:20px;letter-spacing:-.01em;transition:color .35s ease;}
.dpl-cell:hover .dpl-num{color:rgba(95,129,144,.32);}
.dpl-title{font-family:var(--f-nav);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--midnight);margin-bottom:14px;}
.dpl-desc{font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.8;color:var(--ink-mut);max-width:440px;}
/* MANDATES PAGE (was Services) */
#page-mandates{background:var(--off);}
.mnd-cards{background:var(--white);padding:120px var(--gx);border-bottom:1px solid var(--rule);}
.cap-section{background:var(--off);padding:100px var(--gx);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.cap-grid{
display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--rule);border-left:1px solid var(--rule);
margin-top:60px;
position:relative;
isolation:isolate;
}
.cap-cell{
padding:48px 36px;
border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
background:var(--off);
position:relative;
transform:translate3d(0,0,0);
will-change:transform,box-shadow;
transition:
transform .55s cubic-bezier(.2,.7,.15,1),
box-shadow .55s cubic-bezier(.2,.7,.15,1),
background .35s ease,
border-color .35s ease;
}
.cap-cell::before{content:attr(data-idx);position:absolute;top:18px;right:20px;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.5);}
/* CAPABILITY MATRIX — puzzle detachment. Four cells in a single row;
the hovered cell pulls outward toward its position relative to centre.
End cells get the strongest pull, middle cells lift slightly so the
whole cluster reads as engineered, separating from a system. */
.cap-cell:hover{
background:var(--white);
z-index:5;
box-shadow:
0 1px 2px rgba(28,43,58,.04),
0 12px 28px rgba(28,43,58,.08),
0 36px 64px rgba(28,43,58,.12),
0 0 0 1px rgba(95,129,144,.10);
border-right-color:transparent;
border-bottom-color:transparent;
}
.cap-cell:nth-child(1):hover{transform:translate3d(-10px,-6px,0) rotate(-0.4deg);}
.cap-cell:nth-child(2):hover{transform:translate3d(-3px,-8px,0) rotate(-0.18deg);}
.cap-cell:nth-child(3):hover{transform:translate3d(3px,-8px,0) rotate(0.18deg);}
.cap-cell:nth-child(4):hover{transform:translate3d(10px,-6px,0) rotate(0.4deg);}
.cap-t{font-family:var(--f-nav);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--midnight);margin-bottom:14px;}
.cap-d{font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.8;color:var(--ink-mut);}
/* MANDATES PAGE — section layering for sections following the
.np-hero so their solid backgrounds occlude the sticky hero. */
#page-mandates .s-num-bar,
#page-mandates .mnd-cards,
#page-mandates .cap-section,
#page-mandates .footer{
position:relative;
z-index:1;
}
#page-mandates .mnd-cards{
/* first section to arrive over the hero — soft top edge for "lift" */
box-shadow:0 -24px 60px rgba(28,43,58,.10), 0 -1px 0 rgba(28,43,58,.06);
}
/* ===== TIER DEEP DIVE — detailed tier architecture, services.html ===== */
.tier-deep-dive{
background:var(--white);
padding:110px var(--gx) 130px;
border-bottom:1px solid var(--rule);
position:relative;
}
.tier-deep-dive::before{
content:'';
position:absolute;inset:0;
background-image:
linear-gradient(rgba(28,43,58,.022) 1px,transparent 1px),
linear-gradient(90deg,rgba(28,43,58,.022) 1px,transparent 1px);
background-size:80px 80px;
pointer-events:none;
z-index:0;
}
.tier-deep-dive > *{position:relative;z-index:1;}
.tier-block{
margin-top:96px;
padding:64px 56px 56px;
background:var(--off);
border:1px solid var(--rule);
position:relative;
isolation:isolate;
transform:translate3d(0,0,0);
will-change:transform,box-shadow;
transition:
transform .6s cubic-bezier(.2,.7,.15,1),
box-shadow .6s var(--ease),
border-color .35s ease;
}
.tier-block:first-of-type{margin-top:72px;}
.tier-block::before{
content:'';
position:absolute;left:0;top:0;bottom:0;width:3px;
background:var(--midnight);
transition:background .4s ease;
}
.tier-block.d2::before{background:var(--ocean-dk);}
.tier-block.d3::before{
background:linear-gradient(180deg,var(--ocean) 0%,var(--midnight) 100%);
width:4px;
}
.tier-block.d3{
background:linear-gradient(180deg,#FAFAF8 0%,var(--off) 60%);
border-color:rgba(95,129,144,.22);
}
/* Hover effects on the large .tier-block panels were removed — the
pop-up lift now lives only on the smaller .tier-cat cells inside
each panel. The base .tier-block style is the resting state. */
.tier-block-head{
display:grid;
grid-template-columns:auto 1fr;
gap:40px;
align-items:start;
padding-bottom:36px;
border-bottom:1px solid var(--rule);
margin-bottom:40px;
}
.tier-coord{
position:absolute;top:18px;right:22px;
font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.10em;
color:rgba(95,129,144,.55);
}
.tier-num{
font-family:var(--f-disp);
font-size:clamp(72px,9vw,128px);
font-weight:200;
line-height:.85;
color:var(--midnight);
letter-spacing:-.04em;
font-feature-settings:'tnum' 1;
padding-right:24px;
border-right:1px solid var(--rule);
}
.tier-block.d3 .tier-num{
background:linear-gradient(135deg,var(--midnight) 0%,var(--ocean) 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.tier-block-titles{display:flex;flex-direction:column;gap:6px;padding-top:6px;}
.tier-psy{
font-family:var(--f-nav);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
color:var(--ocean);
}
.tier-name{
font-family:var(--f-disp);
font-size:clamp(38px,4.6vw,60px);
font-weight:700;
line-height:.98;
color:var(--charcoal);
letter-spacing:-.018em;
margin:2px 0 4px;
}
.tier-sub{
font-family:var(--f-body);font-weight:300;font-style:italic;
font-size:clamp(15px,1.4vw,18px);
color:var(--ink-mut);
letter-spacing:.005em;
}
.tier-objective{
margin-bottom:44px;
max-width:780px;
}
.tier-objective p{
font-family:var(--f-body);font-weight:300;
font-size:16px;line-height:1.78;color:var(--ink);
}
.tier-meta-grid{
display:grid;
grid-template-columns:280px 1fr;
gap:48px;
padding:32px 0;
border-top:1px solid var(--rule);
border-bottom:1px solid var(--rule);
margin-bottom:48px;
}
.tier-meta-l{
font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.10em;
color:rgba(95,129,144,.65);margin-bottom:14px;
}
.tier-meta-ul{list-style:none;padding:0;}
.tier-meta-ul li{
font-family:var(--f-body);font-weight:400;
font-size:14px;line-height:1.85;color:var(--ink);
padding-left:18px;position:relative;
}
.tier-meta-ul li::before{
content:'';position:absolute;left:0;top:.9em;
width:8px;height:1px;background:var(--ocean);
}
.tier-tags{display:flex;flex-wrap:wrap;gap:8px;}
.tier-tag{
display:inline-block;
padding:7px 14px;
font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.04em;
color:var(--midnight);
background:var(--white);
border:1px solid var(--rule);
transition:background .3s ease,color .3s ease,border-color .3s ease;
}
.tier-tag:hover{
background:var(--midnight);color:var(--off);border-color:var(--midnight);
}
.tier-block.d3 .tier-tag{
background:transparent;border-color:rgba(95,129,144,.30);
}
.tier-services{margin-bottom:48px;}
.tier-services-h{
font-family:var(--f-nav);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
color:var(--midnight);margin-bottom:32px;
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.tier-incl{
font-family:var(--f-body);font-weight:300;font-style:italic;
font-size:12px;letter-spacing:.02em;text-transform:none;
color:var(--ink-mut);
}
.tier-cat-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
border-top:1px solid var(--rule);
border-left:1px solid var(--rule);
}
.tier-cat{
padding:32px 28px;
border-right:1px solid var(--rule);
border-bottom:1px solid var(--rule);
background:var(--white);
position:relative;
transform:translate3d(0,0,0);
will-change:transform,box-shadow;
transition:
transform .55s cubic-bezier(.2,.7,.15,1),
box-shadow .55s cubic-bezier(.2,.7,.15,1),
background .35s ease,
border-color .35s ease;
}
/* TIER CAT — puzzle detachment. Five cells per grid in a 3-col / 2-row
layout (one cell sits alone in the bottom-left). Each cell pulls
in the direction of its position so the grid reads as five
interlocking pieces engineered to detach independently. */
.tier-cat:hover{
background:var(--off);
z-index:5;
box-shadow:
0 1px 2px rgba(28,43,58,.04),
0 12px 28px rgba(28,43,58,.08),
0 36px 64px rgba(28,43,58,.12),
0 0 0 1px rgba(95,129,144,.10);
border-right-color:transparent;
border-bottom-color:transparent;
}
.tier-cat-grid > .tier-cat:nth-child(1):hover{transform:translate3d(-10px,-6px,0) rotate(-0.4deg);}
.tier-cat-grid > .tier-cat:nth-child(2):hover{transform:translate3d(0,-9px,0) rotate(0);}
.tier-cat-grid > .tier-cat:nth-child(3):hover{transform:translate3d(10px,-6px,0) rotate(0.4deg);}
.tier-cat-grid > .tier-cat:nth-child(4):hover{transform:translate3d(-10px,6px,0) rotate(-0.28deg);}
.tier-cat-grid > .tier-cat:nth-child(5):hover{transform:translate3d(0,8px,0) rotate(0.18deg);}
.tier-cat-h{
font-family:var(--f-nav);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--ocean-dk);margin-bottom:18px;
display:flex;align-items:center;gap:10px;
}
.tier-cat-h::before{
content:'';display:block;width:14px;height:1px;background:var(--ocean);
}
.tier-cat ul{list-style:none;padding:0;}
.tier-cat li{
font-family:var(--f-body);font-weight:400;
font-size:14px;line-height:1.7;color:var(--ink);
padding:5px 0 5px 16px;position:relative;
}
.tier-cat li::before{
content:'·';position:absolute;left:4px;top:5px;
color:var(--ocean);font-weight:700;
}
.tier-clients{
padding:28px 0 36px;
border-top:1px solid var(--rule);
margin-bottom:44px;
}
.tier-clients-ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 32px;}
.tier-clients-ul li{
font-family:var(--f-body);font-weight:400;
font-size:14px;line-height:1.8;color:var(--ink);
padding-left:18px;position:relative;
}
.tier-clients-ul li::before{
content:'→';position:absolute;left:0;top:0;
color:var(--ocean);font-size:11px;
}
.tier-pull{
margin:0;
padding:40px 44px;
background:var(--midnight);
color:var(--off);
position:relative;
display:grid;
grid-template-columns:auto 1fr;
gap:28px;
align-items:center;
}
.tier-block.d3 .tier-pull{
background:linear-gradient(135deg,var(--ink-deep) 0%,var(--midnight) 50%,var(--ocean-dk) 100%);
}
.tier-pull-mark{
font-family:var(--f-disp);font-size:90px;font-weight:700;line-height:.6;
color:rgba(226,240,240,.22);
align-self:start;
}
.tier-pull p{
font-family:var(--f-disp);
font-size:clamp(20px,2.2vw,28px);
font-weight:400;
line-height:1.32;
color:var(--off);
letter-spacing:-.005em;
}
.tier-pull p em{font-style:italic;font-weight:300;color:var(--ocean-lt);}
.tier-pull-attr{
display:block;margin-top:14px;
font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.18em;
color:rgba(226,240,240,.55);
}
/* Tier deep dive — responsive */
@media (max-width: 1024px){
.tier-cat-grid{grid-template-columns:repeat(2,1fr);}
.tier-meta-grid{grid-template-columns:1fr;gap:32px;}
}
@media (max-width: 720px){
.tier-deep-dive{padding:72px 24px 88px;}
.tier-block{padding:40px 24px 32px;margin-top:64px;}
.tier-block-head{grid-template-columns:1fr;gap:18px;}
.tier-num{font-size:88px;padding-right:0;border-right:none;border-bottom:1px solid var(--rule);padding-bottom:12px;}
.tier-cat-grid{grid-template-columns:1fr;}
.tier-clients-ul{grid-template-columns:1fr;}
.tier-pull{padding:28px 24px;grid-template-columns:1fr;gap:14px;}
.tier-pull-mark{font-size:60px;}
/* Disable puzzle pulls in single-column mobile — keep just the lift on .tier-cat cells */
.tier-cat-grid > .tier-cat:nth-child(1):hover,
.tier-cat-grid > .tier-cat:nth-child(2):hover,
.tier-cat-grid > .tier-cat:nth-child(3):hover,
.tier-cat-grid > .tier-cat:nth-child(4):hover,
.tier-cat-grid > .tier-cat:nth-child(5):hover{
transform:translate3d(0,-2px,0);
}
}
/* Respect motion preferences — disable puzzle pulls but keep visual changes */
@media (prefers-reduced-motion:reduce){
.svc-grid-3 > .svc-card:nth-child(1):hover,
.svc-grid-3 > .svc-card:nth-child(2):hover,
.svc-grid-3 > .svc-card:nth-child(3):hover,
.svc-grid-3 > .svc-card:nth-child(1).flipped,
.svc-grid-3 > .svc-card:nth-child(2).flipped,
.svc-grid-3 > .svc-card:nth-child(3).flipped{
transform:rotateY(180deg) translateZ(0);
}
.tier-cat-grid > .tier-cat:nth-child(1):hover,
.tier-cat-grid > .tier-cat:nth-child(2):hover,
.tier-cat-grid > .tier-cat:nth-child(3):hover,
.tier-cat-grid > .tier-cat:nth-child(4):hover,
.tier-cat-grid > .tier-cat:nth-child(5):hover{transform:none;}
}
/* ============================================================
NEW-PAGE HERO — used across every content page except home.
Full-bleed dark background image + tint overlay + bottom gradient
for readability. The .np-hero-bg div takes the image via inline style.
============================================================ */
.np-hero{
/* Compact page-header hero — sits at the top of the page at
~65vh so the content below is visible without scrolling, then
pins as a sticky cover while subsequent sections scroll up
over it. Deliberately not full-screen: the home page owns
the only full-viewport hero on the site. */
position:sticky;
top:0;
height:65vh;
min-height:65vh;
background:var(--midnight);
overflow:hidden;
display:flex;
align-items:center;
padding:0 var(--gx);
border-bottom:1px solid var(--rule-dk);
z-index:0;
}
/* Sections that follow .np-hero need to layer above it so the
scroll-cover effect reads cleanly. */
#page-journal .s-num-bar,
#page-journal .cap-section,
#page-journal .footer,
#page-engagements .s-num-bar,
#page-engagements .cap-section,
#page-engagements .footer,
#page-direct .s-num-bar,
#page-direct .cap-section,
#page-direct .footer{
position:relative;
z-index:1;
}
#page-journal .s-num-bar:nth-of-type(1),
#page-engagements .s-num-bar:nth-of-type(1),
#page-direct .s-num-bar:nth-of-type(1){
/* Soft top edge on the first section that arrives over the hero */
box-shadow:0 -24px 60px rgba(28,43,58,.10), 0 -1px 0 rgba(28,43,58,.06);
}
/* Reduced-motion fallback: drop the sticky-cover so the hero
sits as a plain block at the top of the page. */
@media (prefers-reduced-motion:reduce){
.np-hero{position:relative;height:auto;min-height:65vh;}
}
.np-hero-bg{
position:absolute; inset:0;
background-size:cover;
background-position:center;
z-index:0;
/* Zoom is driven from JS via this CSS variable as the user scrolls
past the hero — see the sticky-hero registry in main.js. Defaults
to 1 when JS is off so the image still renders correctly. */
transform:scale(var(--hero-zoom,1));
transform-origin:center;
will-change:transform;
transition:transform .12s linear;
}
.np-hero::before{
content:'';
position:absolute; inset:0;
background:rgba(8,15,22,.55);
z-index:0;
}
.np-hero::after{
content:'';
position:absolute; bottom:0; left:0; right:0;
height:60%;
background:linear-gradient(to top, rgba(4,9,14,.95) 0%, rgba(4,9,14,.4) 60%, transparent 100%);
z-index:0;
}
.np-hero-coord-tl{
position:absolute; top:108px; left:var(--gx);
font-family:var(--f-mono); font-size:9px;
letter-spacing:.08em; color:var(--ocean-lt);
z-index:2;
}
.np-hero-coord-tr{
position:absolute; top:108px; right:var(--gx);
font-family:var(--f-mono); font-size:9px;
letter-spacing:.08em; color:rgba(138,173,184,.5);
z-index:2;
}
.np-hero-content{
position:relative; z-index:2;
max-width:900px;
width:100%;
}
.np-hero-eyebrow{
font-family:var(--f-mono);
font-size:10px; font-weight:600;
letter-spacing:.22em;
text-transform:uppercase;
color:var(--ocean-lt);
margin-bottom:28px;
display:flex; align-items:center; gap:14px;
}
.np-hero-eyebrow::before{
content:''; display:block;
width:32px; height:1px; background:var(--ocean-lt);
}
.np-hl{
font-family:var(--f-disp);
font-size:clamp(46px, 6vw, 88px);
font-weight:800; line-height:.92;
letter-spacing:-.015em;
color:var(--off);
margin-bottom:32px;
}
.np-hl span{
display:block;
font-style:italic; font-weight:300;
color:rgba(226,240,240,.7);
}
.np-meta{
display:grid;
grid-template-columns:repeat(3, auto);
column-gap:64px; row-gap:18px;
margin-top:36px;
}
.np-meta-l{
font-family:var(--f-mono);
font-size:9px; font-weight:500;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--ocean-lt);
margin-bottom:8px;
}
.np-meta-v{
font-family:var(--f-disp);
font-size:15px; font-weight:600;
color:var(--off);
}
@media (max-width:768px){
.np-hero{
min-height:70vh;
padding:0 22px;
}
.np-hero-coord-tl,
.np-hero-coord-tr{ top:88px; }
.np-hero-coord-tl{ left:22px; }
.np-hero-coord-tr{ right:22px; }
.np-meta{
grid-template-columns:1fr;
column-gap:0; row-gap:16px;
}
}
/* METHOD PAGE */
#page-method{background:var(--white);}
.mth-intro{background:var(--white);padding:140px var(--gx);display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start;border-bottom:1px solid var(--rule);position:relative;}
.mth-intro-coord-l{position:absolute;top:48px;left:var(--gx);font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--ocean);}
.mth-intro-hl{font-family:var(--f-disp);font-size:clamp(40px,4.5vw,68px);font-weight:800;line-height:1.0;color:var(--midnight);letter-spacing:-.01em;}
.mth-intro-hl em{font-style:italic;font-weight:300;color:var(--ocean);}
.mth-intro-body{font-family:var(--f-body);font-weight:400;font-size:16px;line-height:1.85;color:var(--ink);max-width:480px;}
.mth-steps{background:var(--off);padding:0 var(--gx);border-bottom:1px solid var(--rule);}
.mth-step{display:grid;grid-template-columns:140px 1fr 1fr;gap:64px;align-items:start;padding:72px 0;border-bottom:1px solid var(--rule);position:relative;transition:background .3s;}
.mth-step:first-child{border-top:1px solid var(--rule);}
.mth-step::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(95,129,144,.04);transition:width .5s var(--ease);}
.mth-step:hover::after{width:100%;}
.mth-step-coord{position:relative;z-index:1;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:var(--ocean);text-transform:uppercase;padding-top:8px;}
.mth-step-n{font-family:var(--f-disp);font-size:96px;font-weight:800;color:rgba(95,129,144,.1);line-height:1;transition:color .4s;position:relative;z-index:1;margin-top:28px;letter-spacing:-.01em;}
.mth-step:hover .mth-step-n{color:rgba(95,129,144,.22);}
.mth-step-main{position:relative;z-index:1;}
.mth-step-title{font-family:var(--f-nav);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--midnight);margin-bottom:14px;}
.mth-step-desc{font-family:var(--f-body);font-weight:400;font-size:15px;line-height:1.8;color:var(--ink);}
.mth-step-aside{position:relative;z-index:1;border-left:1px solid var(--rule);padding-left:28px;}
.mth-step-aside-l{font-family:var(--f-mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ocean);margin-bottom:12px;}
.mth-step-aside-t{font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.8;color:var(--ink-mut);}
.mth-cta-mono{background:var(--midnight);padding:120px var(--gx);display:flex;align-items:center;justify-content:space-between;gap:60px;position:relative;overflow:hidden;}
.mth-cta-mono::before{content:'';position:absolute;inset:0;background-image:linear-gradient(to right,var(--grid-dk) 1px,transparent 1px);background-size:calc((100vw - 128px)/6) 100%;background-position:64px 0;pointer-events:none;opacity:.5;}
.mth-cta-mono > *{position:relative;z-index:1;}
.mth-cta-hl{font-family:var(--f-disp);font-size:clamp(36px,3.5vw,60px);font-weight:800;line-height:.95;color:var(--off);letter-spacing:-.01em;}
.mth-cta-hl em{font-style:italic;font-weight:300;color:var(--ocean-lt);}
/* METHOD PAGE — section layering for sections following the
.np-hero so their solid backgrounds occlude the sticky hero. */
#page-method .s-num-bar,
#page-method .mth-intro,
#page-method .mth-steps,
#page-method .mth-cta-mono,
#page-method .footer{
position:relative;
z-index:1;
}
#page-method .mth-intro{
/* first section to arrive over the hero — soft top edge for "lift" */
box-shadow:0 -24px 60px rgba(28,43,58,.10), 0 -1px 0 rgba(28,43,58,.06);
}
/* THE FOUR-STEP SEQUENCE — alternating directional reveal.
Odd rows enter from the left, even rows enter from the right. Staggered
timing creates an architectural rhythm; rows hold position with no
overshoot. Implemented as transform+opacity only for GPU stability. */
.mth-step{
/* baseline state: hidden + offset. When `.is-in` is added, slides to home. */
opacity:0;
transform:translate3d(-72px,0,0);
will-change:transform,opacity;
transition:
opacity .9s cubic-bezier(.16,1,.3,1),
transform 1.05s cubic-bezier(.16,1,.3,1);
}
.mth-step:nth-child(even){
transform:translate3d(72px,0,0);
}
.mth-step.is-in{
opacity:1;
transform:translate3d(0,0,0);
}
@media (prefers-reduced-motion:reduce){
.mth-step{opacity:1;transform:none;transition:none;}
}
/* AIRASS */
#page-airass{background:var(--white);}
.air-body{background:var(--white);padding:140px var(--gx);display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start;border-bottom:1px solid var(--rule);position:relative;}
.air-body-coord{position:absolute;top:48px;left:var(--gx);font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:var(--ocean);}
.air-hl{font-family:var(--f-disp);font-size:clamp(40px,4.5vw,64px);font-weight:800;line-height:1.0;color:var(--midnight);margin-bottom:28px;letter-spacing:-.01em;}
.air-hl em{font-style:italic;font-weight:300;color:var(--ocean);}
.air-desc{font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.9;color:var(--ink);margin-bottom:18px;max-width:480px;}
.air-channels{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--rule);position:relative;}
.air-ch{display:grid;grid-template-columns:50px 1fr auto;gap:20px;align-items:center;padding:24px 24px 24px 0;border-bottom:1px solid var(--rule);background:var(--off);transition:background .3s,padding-left .3s;position:relative;}
.air-ch::before{content:attr(data-idx);position:absolute;left:14px;font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;color:rgba(95,129,144,.5);top:22px;}
.air-ch:hover{background:var(--white);padding-left:30px;}
.air-ch-icon{width:32px;height:32px;border:1px solid rgba(95,129,144,.3);display:flex;align-items:center;justify-content:center;margin-left:30px;}
.air-ch-title{font-family:var(--f-nav);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--midnight);margin-bottom:4px;}
.air-ch-desc{font-family:var(--f-body);font-weight:400;font-size:13px;line-height:1.7;color:var(--ink-mut);}
.air-ch-arrow{font-family:var(--f-mono);font-size:14px;color:var(--ocean);}
/* Image popup that appears on channel hover — anchored above the channel list */
.air-ch-popup{
position:absolute;
top:50%;left:50%;
width:340px;height:220px;
transform:translate(-50%,-50%) scale(.88);
pointer-events:none;
opacity:0;
z-index:5;
transition:opacity .45s var(--ease),transform .55s var(--ease);
overflow:hidden;
border:1px solid var(--rule);
box-shadow:0 30px 60px rgba(8,15,22,.25);
background-size:cover;background-position:center;
background-color:var(--midnight);
}
.air-ch-popup::after{
content:attr(data-popup-label);
position:absolute;bottom:12px;left:14px;
font-family:var(--f-mono);font-size:9px;
color:var(--off);background:rgba(28,43,58,.78);
padding:5px 10px;letter-spacing:.12em;text-transform:uppercase;
}
.air-ch-popup.on{
opacity:1;
transform:translate(-50%,-50%) scale(1) rotate(-1.5deg);
}
.air-features{background:var(--off);padding:120px var(--gx);border-bottom:1px solid var(--rule);}
.air-feat-grid{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--rule);border-left:1px solid var(--rule);
margin-top:60px;
position:relative;
isolation:isolate;
}
.af-cell{
padding:48px 40px;
border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
background:var(--off);
cursor:none;
position:relative;
transform:translate3d(0,0,0);
will-change:transform,box-shadow;
transition:
transform .55s cubic-bezier(.2,.7,.15,1),
box-shadow .55s cubic-bezier(.2,.7,.15,1),
background .35s ease,
border-color .35s ease;
}
.af-cell::before{content:attr(data-idx);position:absolute;top:18px;right:20px;font-family:var(--f-mono);font-size:9px;font-weight:500;letter-spacing:.08em;color:rgba(95,129,144,.5);}
/* AIRaaS / "Powered by LeadSense" — puzzle detachment for the 3×2 cluster.
Each cell pulls toward its position relative to the cluster centre.
Top row pulls up + corner-out; bottom row pulls down + corner-out;
middle column gets a subtle vertical lift only. Neighbours stay still. */
.af-cell:hover{
background:var(--white);
z-index:5;
box-shadow:
0 1px 2px rgba(28,43,58,.04),
0 12px 28px rgba(28,43,58,.08),
0 36px 64px rgba(28,43,58,.12),
0 0 0 1px rgba(95,129,144,.10);
border-right-color:transparent;
border-bottom-color:transparent;
}
.af-cell:nth-child(1):hover{transform:translate3d(-10px,-8px,0) rotate(-0.4deg);} /* top-left */
.af-cell:nth-child(2):hover{transform:translate3d(0,-10px,0) rotate(0deg);} /* top-mid */
.af-cell:nth-child(3):hover{transform:translate3d(10px,-8px,0) rotate(0.4deg);} /* top-right */
.af-cell:nth-child(4):hover{transform:translate3d(-10px,8px,0) rotate(0.4deg);} /* bot-left */
.af-cell:nth-child(5):hover{transform:translate3d(0,10px,0) rotate(0deg);} /* bot-mid */
.af-cell:nth-child(6):hover{transform:translate3d(10px,8px,0) rotate(-0.4deg);} /* bot-right */
.af-num{font-family:var(--f-disp);font-size:56px;font-weight:800;color:rgba(95,129,144,.16);line-height:1;margin-bottom:18px;transition:color .3s;letter-spacing:-.01em;}
.af-cell:hover .af-num{color:rgba(95,129,144,.32);}
.af-title{font-family:var(--f-nav);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--midnight);margin-bottom:14px;}
.af-desc{font-family:var(--f-body);font-weight:400;font-size:14px;line-height:1.8;color:var(--ink-mut);}
/* PRODUCT (AIRaaS) PAGE — section layering for sections following the
.np-hero so their solid backgrounds occlude the sticky hero. */
#page-airass .s-num-bar,
#page-airass .air-body,
#page-airass .air-features,
#page-airass .footer{
position:relative;
z-index:1;
}
#page-airass .air-body{
/* first section to arrive over the hero — soft top edge for "lift" */
box-shadow:0 -24px 60px rgba(28,43,58,.10), 0 -1px 0 rgba(28,43,58,.06);
}
/* HOME PAGE — cinematic sticky hero with scroll-scrubbed canvas frame-
sequence playback. The hero pins via sticky (defined separately above);
an invisible .hero-spacer below it (300vh) gives the user enough scroll
distance for the JS to scrub through 150 sequential frames on a