/* ==========================================================================
AERA — shared stylesheet
Modern-luxury media studio. Obsidian / Ivory / Champagne.
Used by every page in /site — edit once, applies everywhere.
========================================================================== */
/* Makcasa — display face for headlines, self-hosted (woff2 + ttf fallback) */
@font-face{
font-family:'Makcasa';
src:url('../fonts/Makcasa-Regular.woff2') format('woff2'),
url('../fonts/Makcasa-Regular.ttf') format('truetype');
font-weight:400;font-style:normal;font-display:swap;
}
:root{
--obsidian:#060607; /* near-pure black, like Valeran's #050505 */
--cream:#EADFCD; /* warm parchment — the dominant text tone */
--cream-dim:#B7AE9C; /* muted cream for secondary text / captions */
--ivory:#F5F1E9;
--champagne:#C2A878; /* rare accent only */
--stone:#8C887F;
--smoke:#1C1C1F; /* hairline dividers on near-black */
--serif:'Cormorant Garamond',Georgia,serif;
--display:'Makcasa','Playfair Display',Georgia,serif;
--display-wght:400; /* Makcasa ships a single weight */
--sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
/* Lenis — required base styles. It eases window.scrollTo each frame rather
than transforming a wrapper, so window.scrollY and getBoundingClientRect
keep their normal meaning and every existing scroll-driven section on the
site goes on working untouched. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html{scroll-behavior:auto} /* Lenis handles easing; native smooth fights it */
body{
background:var(--obsidian);
color:var(--cream);
font-family:var(--sans);
font-weight:300;
line-height:1.7;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.eyebrow{
font-size:11px;letter-spacing:.28em;text-transform:uppercase;
color:var(--cream-dim);font-weight:400;
}
h2.section-title{
font-family:var(--display);font-weight:var(--display-wght);
font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;
margin:18px 0 0;letter-spacing:-.01em;
}
/* NAV — an edge-to-edge bar divided into cells by hairlines, wordmark centred */
nav{
position:fixed;top:0;left:0;right:0;z-index:100;height:72px;
display:flex;align-items:stretch;
background:transparent;border-bottom:1px solid transparent;
transition:background .45s ease,border-color .45s ease,backdrop-filter .45s ease;
}
/* only once you scroll does it pick up a light frosted wash — never solid black */
nav.scrolled{
background:rgba(10,9,11,.34);backdrop-filter:blur(16px);
border-bottom-color:rgba(234,223,205,.12);
}
.nav-left,.nav-right{display:flex;align-items:stretch;flex:0 0 auto}
.nav-right{margin-left:auto}
/* each cell is separated by a hairline, like the reference bar */
.nav-cell{
display:flex;align-items:center;justify-content:center;
padding:0 clamp(18px,2.4vw,30px);
font-family:var(--sans);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
color:var(--cream);background:none;border:none;cursor:pointer;
transition:color .3s ease,background .3s ease;
}
.nav-left .nav-cell{border-right:1px solid rgba(234,223,205,.14)}
.nav-right .nav-cell{border-left:1px solid rgba(234,223,205,.14)}
.nav-cell:hover{color:var(--champagne)}
.nav-cta{color:var(--champagne)}
.nav-cta:hover{background:var(--champagne);color:var(--obsidian)}
/* centred wordmark */
.brand{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
font-family:var(--serif);font-size:1.5rem;letter-spacing:.4em;padding-left:.4em;
font-weight:400;display:flex;align-items:center;gap:.42em;color:var(--cream);
}
.brand .mark{height:22px;width:auto;flex:none}
/* burger */
.burger{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:1.5px;background:var(--cream);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* small dropdown panel the menu icon opens, anchored under it */
.nav-links{
position:absolute;top:100%;left:0;z-index:99;
width:min(300px,86vw);
background:rgba(9,9,11,.86);backdrop-filter:blur(20px);
border:1px solid rgba(234,223,205,.12);border-top:none;
display:flex;flex-direction:column;padding:8px 0;
opacity:0;visibility:hidden;transform:translateY(-10px);
transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1),visibility .38s;
}
.nav-links.open{opacity:1;visibility:visible;transform:none}
.nav-links a{
font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--cream-dim);padding:15px 24px;
transition:color .3s ease,background .3s ease,padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.nav-links a:hover{color:var(--cream);background:rgba(234,223,205,.05);padding-left:30px}
.nav-links a.active{color:var(--champagne)}
.nav-links a + a{border-top:1px solid rgba(234,223,205,.07)}
/* on narrow phones the left (burger+Enquire) and right (Instagram) nav cells
are wide enough to collide with the absolutely-centred wordmark. "Enquire"
is already duplicated inside the hamburger dropdown, so it's safe to drop
from the bar itself; Instagram and the wordmark just need to shrink. */
@media(max-width:600px){
.brand{font-size:1.05rem}
.nav-left .nav-cta{display:none}
.nav-right .nav-cell{padding:0 14px;font-size:9.5px}
}
/* HERO — home: one centred statement, lots of air */
header.hero{
min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
text-align:center;position:relative;padding:120px clamp(24px,5vw,60px) 110px;background:transparent;
}
.hero-inner{max-width:none;margin:0;display:flex;flex-direction:column;align-items:center}
.hero-kicker{display:block;margin-bottom:clamp(18px,3.2vh,32px)}
.hero-statement{
font-family:var(--display);font-weight:var(--display-wght);font-style:normal;
font-size:clamp(2.1rem,5.6vw,4.4rem);line-height:1.1;letter-spacing:-.015em;
margin:0 0 clamp(26px,3.6vh,40px);
}
.hero-statement em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--champagne)}
/* the hero resolves word by word out of a blur (see .split) */
.hero-statement .ln{display:block}
.hero-statement .ln > span{display:block}
/* text-link with underline wipe */
.hero-link{
display:inline-block;font-family:var(--sans);font-size:12px;letter-spacing:.22em;
text-transform:uppercase;color:var(--cream);position:relative;padding-bottom:6px;
}
.hero-link > span{position:relative}
.hero-link::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
background:var(--champagne);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.19,1,.22,1)}
.hero-link:hover::after{transform:scaleX(1)}
.hero p.lead{
max-width:540px;font-size:clamp(1rem,2.2vw,1.18rem);color:var(--cream-dim);font-weight:300;
}
.hero-actions{margin-top:44px;display:flex;gap:18px;flex-wrap:wrap}
.btn{
display:inline-block;padding:15px 34px;border-radius:2px;font-size:13px;
letter-spacing:.16em;text-transform:uppercase;transition:.3s;cursor:pointer;border:1px solid var(--champagne);
}
.btn-solid{background:var(--champagne);color:var(--obsidian)}
.btn-solid:hover{background:transparent;color:var(--champagne)}
.btn-ghost{color:var(--cream);border-color:rgba(245,241,233,.35)}
.btn-ghost:hover{border-color:var(--champagne);color:var(--champagne)}
.scroll-hint{
position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--stone);
}
/* PAGE HERO — shorter, for service pages */
header.page-hero{
min-height:56vh;display:flex;flex-direction:column;justify-content:flex-end;
position:relative;padding:140px 32px 70px;background:transparent;
}
header.page-hero .hero-inner{max-width:1240px;margin:0 auto;width:100%}
header.page-hero h1{
font-family:var(--display);font-weight:var(--display-wght);font-style:normal;
font-size:clamp(2.6rem,7vw,5.4rem);line-height:1;letter-spacing:-.01em;
margin:20px 0 20px;
}
header.page-hero h1 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--champagne)}
header.page-hero p.lead{max-width:600px;font-size:clamp(1rem,2vw,1.12rem);color:var(--cream-dim)}
/* BREADCRUMB */
.breadcrumb{font-size:12px;letter-spacing:.08em;color:var(--stone);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--stone);transition:color .25s}
.breadcrumb a:hover{color:var(--champagne)}
.breadcrumb .sep{opacity:.5}
.breadcrumb .current{color:var(--cream)}
/* SECTION SHELL */
section{padding:120px 0}
section.tight{padding:80px 0}
.section-head{max-width:640px;margin-bottom:60px}
.section-head p{margin-top:18px;color:var(--stone)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* SERVICES (home overview) — an editorial list, not a card grid */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px;border-bottom:1px solid var(--smoke)}
.service{
padding:32px 0;display:block;border-top:1px solid var(--smoke);
}
.service .num{font-family:var(--serif);font-size:1rem;color:var(--champagne);font-weight:300}
.service h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:10px 0 10px;transition:color .3s}
.service:hover h3{color:var(--champagne)}
.service p{color:var(--stone);font-size:.96rem}
.service .go{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--champagne);opacity:0;transform:translateX(-6px);transition:.3s}
.service:hover .go{opacity:1;transform:none}
/* ---- SERVICE WHEEL (home) — scroll-driven arc of what Aera offers ---- */
.wheel{position:relative;padding:0;border-top:1px solid var(--smoke);border-bottom:1px solid var(--smoke)}
.wheel-track{height:340vh}
.wheel-vp{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center}
.wheel-inner{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:0 32px;height:100%}
.wheel-head{position:absolute;top:12%;left:32px;z-index:3;max-width:22ch}
.wheel-head .eyebrow{display:block}
.wheel-head h2{font-family:var(--display);font-weight:var(--display-wght);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.05;letter-spacing:-.01em;margin-top:14px}
.wheel-names{position:absolute;left:32px;top:0;bottom:0;width:60%;z-index:2}
.wheel-item{
position:absolute;left:0;top:50%;white-space:nowrap;
font-family:var(--display);font-weight:var(--display-wght);letter-spacing:-.01em;
font-size:clamp(1.7rem,4.6vw,3.4rem);line-height:1;color:var(--stone);
will-change:transform,opacity;transition:color .4s ease;
display:flex;align-items:center;gap:.5em;
}
.wheel-item .wnum{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--smoke);font-weight:400;transition:color .4s}
.wheel-item.active{color:var(--cream)}
.wheel-item.active .wnum{color:var(--champagne)}
/* the photo side is its OWN wheel — a vertical strip that scrolls the
opposite way to the names, each frame scaling up as it passes centre */
/* One fixed, vertically-centred frame that crossfades between service photos.
It used to be a full-height window with the photos travelling through it on
their own counter-rotating track. That looked clever in theory and wrong in
practice: the photos were only ever near the top or bottom edge (so the
window sliced them), they were faint by the time they got there, and the one
on screen belonged to a DIFFERENT service than the highlighted name. A frame
that doesn't move can't crop what's inside it, and pinning it to the active
index means the picture always matches the word. */
/* Fallback shape: a bordered 4:5 window the flat photos crossfade inside.
This is what you get with no WebGL — see the body.wheel-live override below
for what happens when the cylinder takes over. */
.wheel-media{
display:block;
position:absolute;right:clamp(24px,4vw,64px);top:50%;
width:min(26vw,300px);aspect-ratio:4/5;transform:translateY(-50%);
z-index:1;overflow:hidden;
border:1px solid var(--smoke);background:#141317;
}
.wheel-media img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;will-change:opacity,transform;
transition:opacity .5s ease;
}
/* Mini 3D cylinder (wheel-cylinder.js). The canvas sits over the same flat
stack used as its fallback; only body.wheel-live (added once WebGL has
actually initialised) switches which one is visible. If the script bails for
any reason the images it left behind keep crossfading exactly as before —
nothing here depends on the canvas succeeding. */
.wheel-media canvas{
position:absolute;inset:0;width:100%;height:100%;display:block;
opacity:0;transition:opacity .5s ease;
}
/* Once the cylinder is running the frame stops being a frame. The border,
background and overflow clip all have to go: a cylinder inside a hard-edged
window reads as a slideshow, because the panels turning away get cut off
exactly where they'd otherwise show their depth. It also needs far more room
than the 4:5 window — the neighbouring panels are the whole point, and they
live to the sides of and above/below the front one. */
body.wheel-live .wheel-media{
/* Wider than tall: the ring spreads sideways, so the panels turning away need
width far more than they need height. */
width:min(52vw,660px);
aspect-ratio:4/3;
right:clamp(4px,1vw,28px);
border:0;background:none;overflow:visible;
}
body.wheel-live .wheel-media canvas{opacity:1}
body.wheel-live .wheel-media img{opacity:0!important}
.wheel-progress{position:absolute;right:32px;bottom:8%;z-index:3;font-family:var(--sans);font-size:12px;letter-spacing:.14em;color:var(--stone)}
.wheel-progress b{color:var(--champagne);font-weight:400}
@media(max-width:880px){
.wheel-track{height:300vh}
.wheel-names{width:100%}
.wheel-media{display:none}
.wheel-item{font-size:clamp(1.6rem,8vw,2.6rem)}
.wheel-head{top:9%}
}
/* ---- STORY TIMELINE (about) — a flowing line that advances as you scroll ----
The section pins; scrolling drives the timeline horizontally so one milestone
sits at the focal point at a time, with its photo travelling alongside. */
.story{position:relative;padding:0;border-top:1px solid var(--smoke);border-bottom:1px solid var(--smoke)}
.story-track{height:520vh}
.story-vp{position:sticky;top:0;height:100vh;overflow:hidden}
.story-head{
position:absolute;top:11%;left:clamp(24px,5vw,72px);z-index:4;max-width:22ch;pointer-events:none;
}
.story-title{
font-family:var(--display);font-weight:var(--display-wght);
font-size:clamp(1.8rem,4vw,3rem);line-height:1.05;letter-spacing:-.01em;margin-top:14px;
}
.story-title em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--champagne)}
.story-world{position:absolute;top:0;left:0;height:100%;will-change:transform}
.story-wave{position:absolute;top:0;left:0;height:100%;overflow:visible}
.story-wave .wave-base{stroke:var(--smoke);stroke-width:1;vector-effect:non-scaling-stroke}
/* progress line is painted with a gradient that fades out into the dark base
line, rather than stopping abruptly */
.story-wave .wave-prog{stroke:url(#progGrad);stroke-width:1.4;vector-effect:non-scaling-stroke}
.story-item{position:absolute;top:0;left:0;width:1px;height:100%}
/* content is hidden until the milestone reaches the marker, then pops in
(.si-when keeps its own -50% centring inside the transform) */
.si-when,.si-card,.si-img{
opacity:0;
transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .68s cubic-bezier(.2,.8,.2,1);
}
.si-card,.si-img{transform:translateY(22px)}
.si-when{transform:translate(-50%,22px)}
.story-item.is-active .si-when{opacity:1;transform:translate(-50%,0);transition-delay:.04s}
.story-item.is-active .si-card{opacity:1;transform:none;transition-delay:.12s}
.story-item.is-active .si-img{opacity:1;transform:none;transition-delay:.2s}
/* card headings resolve word-by-word once the marker lands */
.story-item.is-active .si-card h3.split .w{opacity:1;filter:blur(0)}
.si-when{
position:absolute;left:50%;top:calc(var(--ny) - 76px);
text-align:center;white-space:nowrap;
}
.si-year{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne)}
.si-lead{display:block;margin-top:6px;font-size:12px;color:var(--stone)}
/* markers fade in as you scroll onto them, then scale up on arrival */
.si-node{
position:absolute;left:50%;top:var(--ny);
transform:translate(-50%,-50%) scale(.3);opacity:0;
width:10px;height:10px;border-radius:50%;background:var(--champagne);
box-shadow:0 0 0 6px rgba(194,168,120,0);
transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease,box-shadow .6s ease;
}
.story-item.is-near .si-node{transform:translate(-50%,-50%) scale(.5);opacity:.45}
.story-item.is-active .si-node{
transform:translate(-50%,-50%) scale(1);opacity:1;
box-shadow:0 0 0 6px rgba(194,168,120,.12);
}
.si-drop{
position:absolute;left:50%;top:var(--ny);width:1px;
height:calc(var(--cardY) - var(--ny));
background:linear-gradient(180deg,rgba(194,168,120,.5),rgba(194,168,120,.08));
transform-origin:top;transform:scaleY(0);
transition:transform .6s cubic-bezier(.2,.8,.2,1) .06s;
}
.story-item.is-active .si-drop{transform:scaleY(1)}
.si-card{position:absolute;top:var(--cardY);left:-24px;width:min(30vw,360px)}
.si-card h3{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:clamp(1.3rem,2.4vw,1.9rem);color:var(--cream);margin-bottom:14px;line-height:1.15;
}
.si-card p{color:var(--stone);font-size:.92rem;line-height:1.7}
.si-img{
position:absolute;left:min(24vw,290px);top:calc(var(--ny) - 250px);
width:min(22vw,260px);aspect-ratio:4/5;object-fit:cover;
border:1px solid var(--smoke);background:#141317;
}
.story-progress{
position:absolute;right:clamp(24px,5vw,72px);bottom:9%;z-index:4;
font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:var(--stone);
}
.story-progress b{color:var(--champagne);font-weight:400}
/* stacked, static version on small screens */
@media(max-width:880px){
.story-track{height:auto}
.story-vp{position:relative;height:auto;padding:90px 0 70px}
.story-head{position:static;max-width:none;padding:0 22px;margin-bottom:44px}
.story-world{position:static;transform:none!important;height:auto;padding:0 22px}
.story-wave,.si-node,.si-drop{display:none}
.story-item{
position:relative;width:auto;height:auto;opacity:1;
padding:0 0 40px 26px;border-left:1px solid var(--smoke);
}
.story-item::before{
content:'';position:absolute;left:-5px;top:8px;width:10px;height:10px;
border-radius:50%;background:var(--champagne);
}
.si-when{position:static;transform:none;text-align:left;margin-bottom:14px}
.si-card{position:static;width:auto;left:auto}
.si-img{position:static;width:100%;max-width:320px;margin-top:20px}
.story-progress{display:none}
/* the reveal-on-scroll JS bails out early on the stacked mobile layout
(there's no pinned track to measure progress against), so these never
otherwise pick up their .is-active state — force them visible instead,
the same way .mt-copy/.mt-end are forced visible in the METHOD section
below for the same reason. */
.si-when,.si-card,.si-img{opacity:1!important;transform:none!important}
.si-card h3.split .w{opacity:1!important;filter:blur(0)!important}
}
/* shared pill badge (used by the story cards) */
.tl-badge{
display:inline-block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
color:var(--champagne);border:1px solid rgba(194,168,120,.35);
padding:5px 12px;border-radius:20px;margin-bottom:16px;
}
/* ---- METHOD — pinned: photo large w/ copy right, then shrinks to reveal
a closing quote + signature ---- */
.method{position:relative;padding:0;border-top:1px solid var(--smoke);border-bottom:1px solid var(--smoke)}
.method-track{height:340vh}
.method-vp{position:sticky;top:0;height:100vh;overflow:hidden}
.mt-eyebrow{position:absolute;left:clamp(24px,5vw,72px);top:12%;z-index:4}
.mt-title{
position:absolute;left:clamp(24px,5vw,72px);bottom:9vh;z-index:3;max-width:11ch;
font-family:var(--display);font-weight:var(--display-wght);
font-size:clamp(2.1rem,5.6vw,4.2rem);line-height:1;letter-spacing:-.015em;color:var(--cream);
will-change:opacity,filter;
}
/* photo sits LEFT of centre so the copy column stays readable, and is graded
into the palette + feathered at the edges so it melts into the background
instead of sitting on it as a hard rectangle */
.mt-media{
position:absolute;left:31%;top:50%;width:min(44vw,560px);aspect-ratio:4/5;
overflow:hidden;background:none;border:none;
transform:translate(-50%,-50%);will-change:transform,border-radius;z-index:2;
}
/* graded for a dark, tungsten-lit frame: keep its own warmth and the rim light,
just unify it slightly toward the palette — no heavy darkening (the shot is
already low-key, crushing it would lose him entirely) */
.mt-media img{
width:100%;height:100%;object-fit:cover;object-position:45% 55%;display:block;
filter:sepia(.18) saturate(.9) contrast(1.04) brightness(1.06);
opacity:.96;
}
/* placeholder shown until a real photo is dropped in */
.mt-placeholder,.m-placeholder{
width:100%;height:100%;display:grid;place-items:center;
background:linear-gradient(160deg,#181619,#0d0c0e);
border:1px dashed rgba(234,223,205,.18);
}
.mt-placeholder span,.m-placeholder span{
font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;
color:rgba(234,223,205,.34);
}
.m-placeholder{aspect-ratio:4/5}
/* soft radial feather — no visible edge against the near-black */
.mt-media{
-webkit-mask-image:radial-gradient(ellipse closest-side at 50% 48%,#000 34%,rgba(0,0,0,.6) 68%,transparent 100%);
mask-image:radial-gradient(ellipse closest-side at 50% 48%,#000 34%,rgba(0,0,0,.6) 68%,transparent 100%);
-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.mt-copy{
position:absolute;right:clamp(24px,5vw,72px);top:50%;width:min(36vw,440px);z-index:3;
will-change:transform,opacity;
}
.mt-copy p{color:var(--cream-dim);font-size:.97rem;line-height:1.78;margin-bottom:18px}
.mt-copy .pull{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--cream);margin:24px 0;line-height:1.45;
}
.mt-end{
position:absolute;left:50%;top:56%;transform:translateX(-50%);
width:min(74vw,780px);text-align:center;z-index:3;opacity:0;pointer-events:none;
will-change:opacity,transform;
}
.mt-quote{
font-family:var(--serif);font-style:italic;font-weight:500;
font-size:clamp(1.15rem,2.5vw,1.85rem);line-height:1.55;color:var(--cream);
}
.mt-sign{margin-top:36px;display:flex;justify-content:center;color:var(--champagne)}
.mt-sign svg{width:clamp(190px,22vw,280px);height:auto;display:block}
.mt-role{
margin-top:12px;font-family:var(--sans);font-size:10px;letter-spacing:.3em;
text-transform:uppercase;color:var(--stone);
}
@media(max-width:880px){
.method-track{height:auto}
.method-vp{position:relative;height:auto;padding:90px 0 80px}
.mt-eyebrow,.mt-title{position:static;max-width:none;padding:0 22px}
.mt-title{margin:14px 0 30px;font-size:clamp(1.9rem,8vw,2.6rem)}
.mt-media{position:relative;left:auto;top:auto;transform:none!important;
width:calc(100% - 44px);margin:0 22px 34px;border-radius:0!important}
.mt-copy{position:static;width:auto;padding:0 22px;transform:none!important;opacity:1!important}
.mt-end{position:static;width:auto;transform:none!important;opacity:1!important;
padding:44px 22px 0;text-align:left}
}
/* ---- TEAM — a row per person: portrait, skills, portfolio strip ---- */
.team-list{margin-top:clamp(36px,6vh,64px);border-top:1px solid var(--smoke)}
.member{
display:grid;grid-template-columns:132px 1fr minmax(210px,300px);
gap:clamp(22px,3vw,48px);align-items:center;
padding:clamp(26px,3.4vh,40px) 0;border-bottom:1px solid var(--smoke);
}
.m-portrait{width:132px;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--smoke);background:#141317}
.m-name{font-family:var(--display);font-weight:var(--display-wght);font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05;color:var(--cream)}
.m-role{margin-top:8px;font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--champagne)}
.m-bio{margin-top:14px;color:var(--stone);font-size:.92rem;line-height:1.7;max-width:52ch}
.m-skills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.m-skills span{
font-family:var(--sans);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
color:var(--cream-dim);border:1px solid rgba(234,223,205,.16);padding:6px 11px;border-radius:20px;
}
.m-folio{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.m-folio img{
width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--smoke);background:#141317;
transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .4s ease;opacity:.72;
}
.m-folio a:hover img{transform:scale(1.06);opacity:1}
.team-note{margin-top:30px;color:var(--stone);font-size:.9rem}
@media(max-width:880px){
.member{grid-template-columns:100px 1fr;gap:20px}
.m-portrait{width:100px}
.m-folio{grid-column:1 / -1;margin-top:4px}
}
/* ---- TEAM PAGE — pick a face, it fills the screen and flips to a portfolio ---- */
.team-page{padding-top:clamp(30px,5vh,60px)}
.tm-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:2px;
border-top:1px solid var(--smoke);border-bottom:1px solid var(--smoke);
}
.tm-card{
position:relative;display:block;width:100%;padding:0;border:none;cursor:pointer;
background:none;color:inherit;text-align:left;overflow:hidden;
height:min(68vh,660px);
}
.tm-photo{position:absolute;inset:0;display:block;overflow:hidden}
.tm-photo img{
width:100%;height:100%;object-fit:cover;object-position:45% 55%;display:block;
filter:sepia(.2) saturate(.8) contrast(1.05) brightness(.92);
transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .7s ease;
}
.tm-card:hover .tm-photo img{transform:scale(1.07);filter:sepia(.08) saturate(1) contrast(1.02) brightness(1.08)}
.tm-card::after{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg,rgba(6,6,7,.25),rgba(6,6,7,.15) 45%,rgba(6,6,7,.88));
transition:background .6s ease;
}
.tm-card:hover::after{background:linear-gradient(180deg,rgba(6,6,7,.18),rgba(6,6,7,.08) 45%,rgba(6,6,7,.8))}
.tm-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(18px,2vw,26px);display:block}
.tm-role{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--champagne)}
.tm-name{display:block;margin-top:8px;font-family:var(--display);font-weight:var(--display-wght);font-size:clamp(1.25rem,1.9vw,1.75rem);line-height:1.1;color:var(--cream)}
.tm-tbc{
display:inline-block;margin-top:9px;font-family:var(--sans);font-size:9px;letter-spacing:.2em;
text-transform:uppercase;color:var(--stone);border:1px solid rgba(234,223,205,.2);padding:4px 9px;border-radius:20px;
}
.tm-open{
position:absolute;left:clamp(18px,2vw,26px);top:clamp(18px,2vw,26px);z-index:2;
font-family:var(--sans);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--cream);opacity:0;transform:translateY(-6px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);
}
.tm-card:hover .tm-open{opacity:1;transform:none}
.tm-placeholder{
position:absolute;inset:0;display:grid;place-items:center;
background:linear-gradient(160deg,#181619,#0c0b0d);
}
.tm-placeholder span{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(234,223,205,.3)}
/* fullscreen flip viewer */
/* NOTE: no backdrop-filter/filter here — a filter on the perspective ancestor
flattens the 3D context and the flip renders as a blank dark screen. */
/* A native