/* =================================================================
   HAMILTONS — in Creative Company
   Dark / gold agency site · design system
   Fonts: Neue Haas Grotesk Display (sans, 55 Roman + 65 Medium) + Scaver (script italic)
   ================================================================= */

:root{
  --black:#0a0a0a;        /* page background */
  --ink:#000000;          /* pure-black sections */
  --panel:#111110;        /* raised panels */
  --gold:#f5be42;         /* accent */
  --gold-deep:#eeb02f;
  --white:#ffffff;
  --muted:rgba(255,255,255,.60);
  --muted-2:rgba(255,255,255,.42);
  --line:rgba(255,255,255,.14);
  --maxw:1180px;
  --gutter:clamp(20px,5vw,64px);
  --sans:'Neue Haas Grotesk Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Scaver',Georgia,serif;
}
@font-face{
  font-family:'Scaver';
  src:url(../fonts/scaver-lightitalic.ttf) format('truetype');
  font-style:italic;
  font-weight:100 900;
  font-display:block;
}
/* Neue Haas Grotesk Display — 55 Roman for lighter/body text, 65 Medium for headings */
@font-face{
  font-family:'Neue Haas Grotesk Display';
  src:url(../fonts/neuehaas-disp-roman.otf) format('opentype');
  font-style:normal;
  font-weight:100 450;
  font-display:block;
}
@font-face{
  font-family:'Neue Haas Grotesk Display';
  src:url(../fonts/neuehaas-disp-medium.otf) format('opentype');
  font-style:normal;
  font-weight:451 900;
  font-display:block;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--black)}
body{
  font-family:var(--sans);
  background:transparent;
  color:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* fixed colour layer that fades between section themes on scroll */
.page-bg{position:fixed;inset:0;z-index:-2;background:var(--black);
  transition:background-color .8s cubic-bezier(.33,1,.68,1)}
/* one big faint logo fixed behind everything — revealed as content scrolls over it */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:url(../images/block-logo.png);
  background-repeat:no-repeat;background-position:center;
  background-size:min(calc(82vh/var(--z,1)),calc(82vw/var(--z,1)));opacity:.045}
body.no-bg-logo::before{display:none}   /* pages that opt out of the big backdrop logo */

/* header sits on its own dark translucent bar on every page, so nav stays white throughout */
/* when the page background has faded to light, content text flips to dark;
   the header (its own dark bar) and footer (dark) keep their light text */
body.bg-light{color:#1a1a18}
body.bg-light .site-header,body.bg-light .site-footer{color:#f1f0ea}
body.bg-light .people-hero h1{color:#1a1a18}
body.bg-light .people-hero .serif{color:rgba(26,26,24,.72)!important}
body.bg-light .section-head p.serif{color:#5c5c55!important}
body.bg-light .home-recent .section-head h2,
body.bg-light .home-recent .section-head h2 .serif,
body.bg-light .rcard .rmeta h3{color:#111!important}
/* smooth the flip on the elements that switch most visibly */
body,.clients h2,.section-head h2,.marquee-track span,.people-hero h1,.people-hero .serif{transition:color .8s ease}

/* custom cursor — small gold ball that trails the pointer, grows on hover (à la weareimpero) */
.cursor-ball{position:fixed;top:0;left:0;width:63px;height:63px;border-radius:50%;
  background:var(--gold);opacity:0;pointer-events:none;z-index:9999;
  transition:width .28s cubic-bezier(.16,1,.3,1),height .28s cubic-bezier(.16,1,.3,1),opacity .3s ease;
  will-change:transform}
.cursor-ball.on{opacity:.55}
.cursor-ball.grow{opacity:.35}
@media (prefers-reduced-motion:reduce){.cursor-ball{display:none}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---- type helpers ---- */
.serif{font-family:var(--serif);font-style:italic;font-weight:500}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);
}
.eyebrow.gold{color:var(--gold)}

.display{
  font-weight:800;
  line-height:.92;
  letter-spacing:-.02em;
  font-size:clamp(2.6rem,7vw,5.4rem);
}
.display .serif{font-weight:500;letter-spacing:0}

/* site-wide scroll reveal (applied to content blocks via JS) */
.reveal{opacity:0;transform:translateY(46px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* page headline entrance animation (rise + fade on load) */
.js .home-hero h1,
.js .work-hero h1,
.js .about-hero h1,
.js .proj-hero h1,
.js .form-hero,
.js h1.display,
.js .people-hero h1{opacity:0}
.head-in{animation:headlineIn 1s cubic-bezier(.16,1,.3,1) both}
@keyframes headlineIn{
  0%{opacity:0;transform:translateY(40px)}
  100%{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .js .home-hero h1,.js .work-hero h1,.js .about-hero h1,.js .proj-hero h1,
  .js .form-hero,.js h1.display,.js .people-hero h1{opacity:1}
  .head-in{animation:none}
}

/* =================================================================
   PRELOADER / INTRO SCREEN
   ================================================================= */
.preloader{
  position:fixed;inset:0;z-index:9999;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .8s ease,visibility .8s ease;
}
.preloader.hide{opacity:0;visibility:hidden}
/* loader: the REAL block mark; gold reveals AROUND the frame (top-left -> down -> around).
   A conic sweep over the actual logo PNG keeps the exact shape. */
@property --sweep{syntax:'<angle>';inherits:false;initial-value:0deg}
.loader-logo{position:relative;width:clamp(104px,17vw,160px);aspect-ratio:1}
.loader-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.loader-logo .dim{opacity:.26}
.loader-logo .full{
  -webkit-mask:conic-gradient(from 315deg, transparent 0 calc(360deg - var(--sweep)), #000 calc(360deg - var(--sweep)) 360deg);
  mask:conic-gradient(from 315deg, transparent 0 calc(360deg - var(--sweep)), #000 calc(360deg - var(--sweep)) 360deg);
  animation:ringSweep 1.8s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes ringSweep{from{--sweep:0deg}to{--sweep:360deg}}
@media (prefers-reduced-motion:reduce){
  .loader-logo .full{animation:none;-webkit-mask:none;mask:none}
  .loader-logo .dim{opacity:1}
}
/* =================================================================
   HEADER / NAV
   ================================================================= */
.site-header{
  position:sticky;top:0;z-index:200;
  border-bottom:1px solid transparent;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s;
}
/* frosted bar lives on a pseudo so the header doesn't become a containing
   block for the fixed mobile menu (backdrop-filter would trap it) */
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(10,10,10,.82);backdrop-filter:blur(10px)}
.site-header.solid{border-bottom-color:transparent}
.site-header.nav-hidden{transform:translateY(-100%)}
.nav{
  /* full-bleed bar: logo hugs the left edge, links hug the right */
  max-width:none;margin:0 auto;
  padding:18px clamp(24px,3vw,72px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.logo{display:flex;flex-direction:row;align-items:center}
.logo-img{height:34px;width:auto;display:block}
.nav-links{display:flex;gap:34px;align-items:center}
.nav-links a{
  font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--white);opacity:.85;transition:opacity .2s,color .2s;
}
.nav-links a:hover{opacity:1}
/* quick vibration buzz when a nav item is hovered */
.nav-links a .nl-inner{display:inline-block}
.nav-links a:hover .nl-inner{animation:navBuzz .36s linear}
@keyframes navBuzz{
  0%,100%{transform:translate(0,0) rotate(0)}
  20%{transform:translate(-1.5px,1px) rotate(-.6deg)}
  40%{transform:translate(2px,-1px) rotate(.6deg)}
  60%{transform:translate(-2px,-1px) rotate(-.5deg)}
  80%{transform:translate(1.5px,1px) rotate(.4deg)}
}
@media (prefers-reduced-motion:reduce){.nav-links a:hover .nl-inner{animation:none}}
.nav-links a.active{color:var(--gold);opacity:1}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:2px;background:var(--white);margin:5px 0;transition:.3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* =================================================================
   BUTTONS / ORBS
   ================================================================= */
.btn-gold{
  display:inline-block;background:var(--gold);color:#000;
  font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:15px 26px;border:0;cursor:pointer;transition:background .2s,transform .2s;
}
.btn-gold:hover{background:var(--gold-deep);transform:translateY(-1px)}

/* gold follow-cursor — appears when hovering interactive elements */
.cursor-follow{
  position:fixed;top:0;left:0;z-index:9998;pointer-events:none;
  width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  background:var(--gold);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#000;line-height:1.15;
  transform:scale(0);opacity:0;
  transition:transform .22s ease,opacity .22s ease;
  will-change:left,top,transform;
}
.cursor-follow.active{transform:scale(1);opacity:1}
body.cursor-ready a,
body.cursor-ready button,
body.cursor-ready .card,
body.cursor-ready .work-item,
body.cursor-ready select,
body.cursor-ready label,
body.cursor-ready input[type=submit]{cursor:none}
@media (hover:none){.cursor-follow{display:none!important}}

/* small gold circular CLICK HERE button on case studies */
.click-orb{
  width:84px;height:84px;border-radius:50%;background:var(--gold);color:#000;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:11px;font-weight:700;letter-spacing:.08em;
  transition:transform .25s;
}
.click-orb:hover{transform:scale(1.06)}

.back-link{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);
}
.back-link:hover{color:var(--white)}

/* back to top chevron */
.to-top{display:flex;flex-direction:column;align-items:center;gap:8px;margin:54px 0 0;
  font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.to-top .chev{color:var(--gold);font-size:20px;line-height:1}

/* =================================================================
   SECTIONS / SPACING
   ================================================================= */
section{position:relative}
.pad{padding:clamp(56px,9vw,120px) 0}
.pad-sm{padding:clamp(40px,6vw,72px) 0}

/* =================================================================
   FULL-SCREEN HEROES — every page header fills the viewport
   ================================================================= */
.hero-screen,
.about-hero,.work-hero,.people-hero,.proj-hero{
  min-height:calc((100svh - 72px)/var(--z,1));
  display:flex;flex-direction:column;justify-content:center;
}
@supports not (height:100svh){
  .hero-screen,.about-hero,.work-hero,.people-hero,.proj-hero{
    min-height:calc((100vh - 72px)/var(--z,1))}
}

/* =================================================================
   HOME — HERO
   ================================================================= */
.home-hero{padding:0}
.home-hero h1{font-size:clamp(2.8rem,7.5vw,6rem);font-weight:800;line-height:.95;letter-spacing:-.02em;max-width:18ch}
.home-hero h1 .serif{font-weight:500}
.video-fs{width:100%;margin-top:clamp(28px,5vw,56px)}
.video-block{
  background:var(--gold);color:#000;
  width:100%;height:calc(88vh/var(--z,1));min-height:440px;
  display:flex;flex-direction:column;gap:26px;align-items:center;justify-content:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(2rem,5vw,3.4rem);font-weight:600;
  position:relative;overflow:hidden;
}
.video-block .play{width:78px;height:78px;border-radius:50%;
  border:2px solid rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.video-block .play::after{content:"";border-left:18px solid #000;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}

/* home showreel — self-hosted video cropped to fill the block like a background video */
.video-block.showreel{background:#000}
.video-block.showreel video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.video-block .sound-toggle{
  position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:2;
  background:rgba(10,10,10,.6);color:var(--gold);border:1px solid var(--gold);border-radius:999px;
  padding:10px 20px;font-family:var(--serif);font-style:italic;font-size:1rem;cursor:pointer;
  transition:background .25s,color .25s;
}
.video-block .sound-toggle:hover{background:var(--gold);color:#000}
/* mobile: the reel sizes to its own 16:9 frame so the full picture is visible
   (88vh + cover on a portrait screen crops it to a strip) */
@media(max-width:860px){
  .video-block{height:auto;min-height:0;aspect-ratio:16/9}
  .video-block .sound-toggle{padding:7px 14px;font-size:.85rem}
}

/* infinite marquee (seamless — JS duplicates the sequence to fill any width) */
.marquee{overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:24px 0;margin-top:clamp(40px,6vw,64px)}
.marquee-track{display:inline-flex;align-items:center;will-change:transform;
  animation:mq var(--mq-dur,28s) linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:0 26px}
.marquee-track .dot{color:var(--gold);padding:0 2px}
@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--mq-shift,50%)),0,0)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* larger marquee for client names */
.marquee-lg{padding:clamp(20px,3vw,32px) 0}
.marquee-lg .marquee-track span{font-size:clamp(1rem,2vw,1.45rem);padding:0 clamp(30px,5vw,64px);letter-spacing:.14em;opacity:.9}
/* two-row client marquee — borderless, rows scroll right-to-left */
.client-rows .marquee{margin-top:0;border:0;padding:clamp(8px,1.5vw,15px) 0}

/* =================================================================
   STATS / EDITORIAL SPLIT
   ================================================================= */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:start}
.split h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;line-height:.98;letter-spacing:-.02em;text-align:left}
.split h2 .serif{display:inline-block;margin-left:-.06em}
.lead{color:var(--muted);font-size:1.05rem;max-width:46ch}
.stats{display:flex;gap:clamp(20px,4vw,56px);margin-top:30px;flex-wrap:nowrap;align-items:flex-start}
.stat{flex:1 1 0;min-width:0}
.stat .num{font-size:clamp(2.4rem,5vw,3.4rem);font-weight:800;line-height:1;color:var(--gold)}
.stat .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
/* mobile: all three stats stay on one row, scaled down to fit */
@media (max-width:640px){
  .stats{flex-wrap:nowrap;gap:14px}
  .stat{flex:1 1 0}
  .stat .num{font-size:clamp(1.45rem,6.8vw,2rem)}
  .stat .lbl{font-size:9px;letter-spacing:.12em}
}

/* =================================================================
   PROJECT CARDS (home)
   ================================================================= */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}
.section-head h2{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,28px)}
.card{position:relative;overflow:hidden;border-radius:4px;background:var(--panel);display:block}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .6s ease}
.card:hover img{transform:scale(1.04)}
.card .meta{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.82),transparent);transition:background .35s ease}
.card .eyebrow{color:rgba(255,255,255,.8)}
.card h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;line-height:1;margin-top:6px;letter-spacing:-.01em}
.card .tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:8px;display:block}

/* home 'recent work' sits on the light theme (page-bg fades to cream) — dark text */
.home-recent .section-head h2{color:#f1f0ea}

/* staggered recent-work grid (matches landing PDF — labels below image, masonry offset) */
.recent-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px) clamp(20px,4vw,56px)}
.rcard{display:block}
.rcard.offset{margin-top:clamp(40px,8vw,110px)}
.rcard-img{position:relative;overflow:hidden;border-radius:2px}
.rcard-img img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .6s ease}
.rcard:hover .rcard-img img{transform:scale(1.04)}
.rcard-img::after{content:"";position:absolute;inset:0;background:var(--gold);
  opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:1}
.rcard:hover .rcard-img::after{opacity:.82}
.rcard .rmeta{padding-top:16px}
.home-recent .rcard .rmeta .eyebrow{color:#8a8a82}
.rcard .rmeta h3{color:#f1f0ea;font-size:clamp(1.5rem,2.8vw,2.1rem);font-weight:800;line-height:1.05;letter-spacing:-.01em;transition:color .8s ease}
.rcard .rmeta .eyebrow{display:block;margin-top:8px}
.rcard .rmeta .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:8px;display:block}
@media(max-width:560px){.recent-grid{grid-template-columns:1fr}.rcard.offset{margin-top:0}}
/* keep the forced second hero line ("favourite ad agency") inside small screens */
@media(max-width:560px){.home-hero h1{font-size:clamp(1.6rem,7.8vw,2.8rem)}}

/* gold overlay on project hover (home cards + our-work tiles) */
.card::after,.work-item::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:1;
}
.card:hover::after,.work-item:hover::after{opacity:.82}
.card:hover .meta,.work-item:hover .meta{background:none}
.card:hover .eyebrow,.card:hover h3,.card:hover .tag,
.work-item:hover h3,.work-item:hover .sub,.work-item:hover .tag{color:#000}

/* =================================================================
   CLIENTS
   ================================================================= */
.clients{text-align:center}
.clients h2{font-family:var(--serif);font-style:italic;font-weight:600;font-size:clamp(1.8rem,4vw,2.8rem);margin-bottom:34px}
.client-row{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,5vw,64px)}
.client-row span{font-weight:700;font-size:clamp(.95rem,1.6vw,1.15rem);letter-spacing:.14em;text-transform:uppercase;opacity:.85}

/* =================================================================
   TEAM
   ================================================================= */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.5vw,24px)}
.member{position:relative}
.member img{aspect-ratio:3/4;object-fit:cover;width:100%;border-radius:3px;filter:grayscale(8%)}
/* roster rotation (main.js): card contents fade out, swap, fade back in */
.member .pic{position:relative;aspect-ratio:3/4;border-radius:3px;overflow:hidden;background:#1a1a18}
.member .pic img{position:absolute;inset:0;height:100%;aspect-ratio:auto;border-radius:0;transition:opacity .7s ease}
.member .pic img.next{opacity:0}
.member .pic img{width:100%;object-fit:cover}
.member .pic img.next.show{opacity:1}
.member .info{transition:opacity .35s ease}
.member.swapping .info{opacity:0}
.member .ph{aspect-ratio:3/4;width:100%;border-radius:3px;background:#cfcdc6;display:flex;align-items:flex-end}
.member .info{padding-top:14px}
.member .info .nm{font-weight:700;font-size:1.05rem}
.member .info .ro{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem}

/* =================================================================
   OUR PEOPLE — light founder + team masonry (matches PDF)
   ================================================================= */
.people-hero{padding:clamp(40px,7vw,84px) 0 clamp(40px,7vw,80px)}

/* founder — text follows the page background (white on black, black on white) */
.people-founder{background:transparent;color:#f1f0ea;padding:clamp(52px,8vw,104px) 0;transition:color .8s ease}
/* centred portrait with the title straddling its top-right edge (per mock) */
.founder-figure{position:relative;width:min(520px,78vw);margin:clamp(30px,5vw,64px) auto 0}
.founder-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.founder-figure .hover-img{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.founder-figure:hover .hover-img{opacity:1}
@media (prefers-reduced-motion:reduce){.founder-figure .hover-img{transition:none}}
.founder-head{position:absolute;top:0;left:20%;transform:translateY(-58%);
  display:flex;flex-direction:column;align-items:flex-end}
.founder-head h2{font-size:clamp(2.3rem,7.4vw,5.4rem);font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap}
/* inherits the section colour, so it's near-black on the cream background and
   cream while the page is still dark — the old fixed grey was low contrast on both */
.founder-credit{font-size:clamp(1.35rem,3.2vw,2.3rem);font-weight:500;
  color:inherit;margin-top:4px}
.founder-row{display:grid;grid-template-columns:.82fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.founder-row img{width:100%;aspect-ratio:4/5;border-radius:2px;object-fit:cover}
.founder-copy{text-align:right}
.founder-copy .pullquote{color:inherit;margin-left:auto;text-align:right;
  font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.12}
.founder-copy .sub-note{color:rgba(241,240,234,.68);text-align:right;margin:18px 0 0 auto;transition:color .8s ease}
/* when the background has faded to light, the founder text goes dark */
body.bg-light .people-founder{color:#1a1a18}
body.bg-light .founder-copy .sub-note{color:#5c5c55}

/* team grid — uniform 3:4 portraits, 4 across, dark gaps */
.team-intro{text-align:center;margin-bottom:clamp(28px,4vw,48px)}
.team-intro h2{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.team-intro h2 .serif{font-weight:500}
.team-intro p{color:var(--muted);font-size:clamp(1rem,1.4vw,1.15rem);max-width:52ch;margin:14px auto 0;transition:color .8s ease}
.team-intro p b{color:var(--gold);font-weight:700}
body.bg-light .team-intro p{color:#5c5c55}
.people-team{padding:0 0 clamp(40px,7vw,80px)}
.team-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tcell{position:relative;overflow:hidden;aspect-ratio:3/4;margin:0}
.tcell.photo img{width:100%;height:100%;object-fit:cover}
/* caption always sits on a dark scrim at the foot of the photo, so it reads on any shot */
.tcell figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-direction:column;line-height:1.3;color:#fff;
  padding:clamp(40px,5vw,70px) clamp(14px,1.4vw,22px) clamp(14px,1.4vw,20px);
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 60%,transparent)}
.tcell figcaption b{font-weight:700;font-size:clamp(.95rem,1.2vw,1.1rem)}
.tcell figcaption span{font-family:var(--serif);font-style:italic;font-size:clamp(.9rem,1.1vw,1.02rem);opacity:.9}
.people-team .to-top{color:#8a8a82;margin-top:clamp(36px,5vw,60px)}

@media(max-width:760px){
  .team-mosaic{grid-template-columns:repeat(2,1fr)}
  .founder-head{flex-wrap:wrap}
  .founder-row{grid-template-columns:1fr}
  .founder-copy,.founder-copy .pullquote,.founder-copy .sub-note{text-align:left;margin-left:0}
}

/* =================================================================
   CTA STRIP — Let's work together
   ================================================================= */
.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-strip .lt{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cta-strip h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.02em;text-align:center;flex:1}
.cta-strip h2 .serif{font-weight:500}

/* =================================================================
   ABOUT — centered hero (matches PDF) + services 01..06
   ================================================================= */
.about-hero{padding:clamp(60px,10vw,128px) 0 clamp(48px,8vw,96px);text-align:center}
.about-hero h1{font-size:clamp(2.6rem,7.4vw,5.8rem);font-weight:800;line-height:.96;letter-spacing:-.03em}
.about-hero h1 .serif{font-size:1.18em;font-weight:500;font-style:italic;letter-spacing:0;line-height:.82}
.does-line{display:inline-flex;align-items:flex-end;justify-content:center;gap:clamp(16px,2.6vw,42px);flex-wrap:wrap}
.about-hero .aside{font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:clamp(1rem,2.1vw,1.55rem);line-height:1.1;letter-spacing:-.01em;
  color:var(--muted);text-align:left;padding-bottom:.45em}

.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px) clamp(40px,8vw,120px);margin-top:18px}
.svc{display:flex;gap:20px;align-items:baseline;border-top:1px solid var(--line);padding-top:22px}
/* scroll reveal: left column slides from left, right column from right */
.js .svc{opacity:0;transform:translateX(-70px);
  transition:opacity 1.15s cubic-bezier(.16,1,.3,1),transform 1.15s cubic-bezier(.16,1,.3,1)}
.js .svc:nth-child(even){transform:translateX(70px)}
.js .svc.in{opacity:1;transform:none}
/* row stagger so they flow in as you scroll */
.js .svc:nth-child(3),.js .svc:nth-child(4){transition-delay:.12s}
.js .svc:nth-child(5),.js .svc:nth-child(6){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.js .svc{opacity:1;transform:none;transition:none}}

/* About — 'What we do' journey: line draws on as you scroll */
.journey{position:relative;width:100%;max-width:1000px;margin:clamp(24px,4vw,52px) auto clamp(-130px,-9vw,-50px);aspect-ratio:1000/1150}
.journey-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.jtrack{display:none}  /* no ghost route — the drawn line is a surprise (desktop + mobile) */
.jpath{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100}                       /* bright fill on scroll */
.jhead{fill:var(--gold);opacity:0;transition:opacity .3s ease;filter:drop-shadow(0 0 6px rgba(245,190,66,.55))}  /* dot that rides the tip of the line */
.jhead.lit{opacity:1}
.jitem{position:absolute;display:flex;align-items:flex-start;gap:clamp(12px,1.6vw,24px);
  opacity:0;transform:translateY(-50%) translateX(0);
  transition:opacity .6s cubic-bezier(.16,1,.3,1) .1s,transform .6s cubic-bezier(.16,1,.3,1) .1s}  /* short beat — on big zoomed screens a longer delay reads as lag */
.jitem.left{right:52%;text-align:right;transform:translateY(-50%) translateX(-16px)}
.jitem.right{left:52%;text-align:left;transform:translateY(-50%) translateX(16px)}
@media(min-width:761px){.jitem.right,.jitem.left{max-width:40%}}
.jitem .jtext{min-width:0}
.jitem.lit{opacity:1;transform:translateY(-50%) translateX(0)}
.jtext{display:flex;flex-direction:column}
.jitem.left .jtext{align-items:flex-end}
.jitem.right .jtext{align-items:flex-start}
.jitem h3{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;line-height:1.05;letter-spacing:-.01em;white-space:nowrap}
.jdesc{font-family:var(--sans);font-weight:400;font-size:clamp(.82rem,1.15vw,.98rem);color:var(--muted);line-height:1.32;max-width:22ch;margin-top:9px;opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease}
.jcta{font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:13px;display:inline-block;opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease}
.jitem:hover .jdesc{opacity:1;transform:none}
a.jitem{text-decoration:none;color:inherit;cursor:pointer}
a.jitem h3{transition:color .3s ease}
a.jitem:hover h3{color:var(--gold)}
a.jitem:hover .jcta{opacity:1;transform:none}
/* subtle gold pulse when the tip dot reaches the word */
@keyframes jpulse{
  0%{transform:scale(1);text-shadow:0 0 0 rgba(245,190,66,0),0 0 0 rgba(245,190,66,0)}
  35%{transform:scale(1.04);text-shadow:0 0 14px rgba(245,190,66,.9),0 0 34px rgba(245,190,66,.55)}
  100%{transform:scale(1);text-shadow:0 0 0 rgba(245,190,66,0),0 0 0 rgba(245,190,66,0)}
}
.jitem.pulse h3{animation:jpulse 1.2s ease-out}
.jnum{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:clamp(1.1rem,2vw,1.7rem);line-height:1}
@media (prefers-reduced-motion:reduce){
  .jpath{stroke-dashoffset:0}.jnode{opacity:1}.jitem{opacity:1;transform:translateY(-50%)}
  .jitem.pulse h3{animation:none}
}
@media(max-width:760px){
  .journey{aspect-ratio:auto;height:auto;max-width:none;display:flex;flex-direction:column;gap:44px;margin-bottom:0;
    position:relative}
  /* same structure as desktop, miniaturised: the line weaves down the middle
     and items alternate left/right of it (geometry rebuilt in main.js) */
  .journey-line{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
  .jitem{position:relative!important;inset:auto!important;z-index:1;transform:none!important;gap:10px;
    max-width:62%;opacity:0;
    transition:opacity .7s ease .28s,translate .7s cubic-bezier(.16,1,.3,1) .28s}  /* beat of delay after the line arrives */
  .jitem.lit{opacity:1;translate:0 0}
  .jitem.left{align-self:flex-start;translate:-26px 0}   /* slides in from the left */
  .jitem.right{align-self:flex-end;translate:26px 0}     /* slides in from the right */
  .jitem.left.lit,.jitem.right.lit{translate:0 0}        /* must out-rank the offsets above, or lit items stay pushed off-screen */
  .jitem h3{font-size:1.05rem;line-height:1.1}
  .jnum{font-size:.95rem}
  .jdesc{font-size:.78rem;max-width:19ch;margin-top:6px}
  .jcta{font-size:.72rem}
  .jdesc,.jcta{opacity:1!important;transform:none!important}
  @media (prefers-reduced-motion:reduce){.jitem{opacity:1;translate:0 0;transition:none}}
}

/* small pulsing "scroll down" cue at the bottom of the home hero */
.hero-screen{position:relative}
.scroll-cue{position:absolute;bottom:26px;left:50%;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--muted);
  animation:cuePulse 2.2s ease-in-out infinite}
.scroll-cue .sc-text{font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.scroll-cue svg{width:13px;height:19px;color:var(--gold)}
@keyframes cuePulse{
  0%,100%{opacity:.4;transform:translateX(-50%) translateY(0)}
  50%{opacity:1;transform:translateX(-50%) translateY(6px)}
}
@media(prefers-reduced-motion:reduce){.scroll-cue{animation:none;opacity:.7;transform:translateX(-50%)}}

/* floating story — centred copy with work images drifting around it (parallax to cursor) */
.float-hero{position:relative;overflow:hidden;padding:clamp(110px,17vw,240px) 0}
.float-field{position:absolute;inset:0;pointer-events:none;z-index:1}
.float-el{position:absolute;will-change:transform}
.float-el img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;display:block}
.float-copy{position:relative;z-index:2;max-width:720px;text-align:center}
.float-copy .story-line{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.float-copy .story-line.in{opacity:1;transform:none}
.float-copy .lead{max-width:none;color:#f1f0ea;font-weight:700;font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6}
@media(max-width:760px){
  .float-hero{padding:clamp(48px,9vw,80px) 0}
  .float-el{display:none}
}

/* transparent cut-out objects: gentle idle float + zoom on hover */
.float-obj{animation:objFloat 6s ease-in-out infinite;transition:scale .5s cubic-bezier(.33,1,.68,1);will-change:translate,scale}
.float-obj:hover{scale:1.05}
@keyframes objFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* temporary placeholder block for images still to come */
.ph-img{background:var(--panel);border:1px dashed rgba(255,255,255,.16);border-radius:4px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}

/* three-image strip (e.g. Christmas page, next to the phone) */
.img-trio{display:grid;grid-template-columns:1fr 1.6fr 1fr;height:clamp(280px,30vw,430px)}
.img-trio img{width:100%;height:100%;object-fit:cover;display:block}

/* image that links out, with gold hover overlay (e.g. About -> Work) */
.img-link{position:relative;display:block;overflow:hidden}
.img-link img{display:block;width:100%;transition:transform .6s ease}
.img-link:hover img{transform:scale(1.04)}
.img-link::after{content:"";position:absolute;inset:0;background:var(--gold);
  opacity:0;transition:opacity .35s ease;pointer-events:none}
.img-link:hover::after{opacity:.82}
.svc .no{font-size:clamp(2rem,4vw,3rem);font-weight:800;color:var(--white);line-height:1}
.svc h3{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;line-height:1.05}
.about-imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,18px)}
.about-imgs img{aspect-ratio:16/10;object-fit:cover;width:100%}
.about-imgs .work-item img{aspect-ratio:16/10}

/* About — interactive 'play' field (push the team around) */
.play-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;letter-spacing:-.01em;line-height:1.05;margin-top:8px}
.play-section{padding-bottom:0}
.play-field{position:relative;width:100%;height:clamp(380px,calc(62vh/var(--z,1)),660px);
  margin-top:clamp(22px,3.5vw,40px);overflow:hidden;
  border-bottom:1px solid var(--gold);cursor:grab;
  touch-action:pan-y}  /* vertical swipes scroll the page; sideways swipes shove the bubbles */
.play-bubble{position:absolute;top:0;left:0;border-radius:50%;box-sizing:border-box;
  overflow:hidden;will-change:transform}
.play-bubble.face{border:0}
.play-bubble.face img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(100%) contrast(1.22) brightness(.96)}
.play-bubble.gold{background:var(--gold)}
.play-bubble.mark{background:#fff;display:flex;align-items:center;justify-content:center}
@media (prefers-reduced-motion:reduce){.play-field{cursor:default}}

/* =================================================================
   OUR WORK — editorial project grid
   ================================================================= */
.work-hero{background:transparent;color:#000;padding:clamp(60px,10vw,128px) 0;text-align:center}
.work-hero h1{font-size:clamp(2.76rem,6.9vw,5.75rem);font-weight:800;line-height:1;letter-spacing:-.03em}
.work-hero h1 .serif{font-size:1.12em;font-weight:500;font-style:italic;letter-spacing:0;line-height:.8}
.ignore-line{display:inline-flex;align-items:center;justify-content:center;gap:clamp(12px,1.8vw,28px);flex-wrap:wrap}
.work-hero .aside{font-family:var(--sans);font-style:normal;font-weight:400;
  font-size:clamp(.98rem,1.73vw,1.55rem);line-height:1.15;letter-spacing:-.01em;text-align:left}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,3vw,30px)}
.work-item{display:block;position:relative;overflow:hidden;border-radius:4px;background:var(--panel)}
.work-item img{width:100%;object-fit:cover;transition:transform .6s}
.work-item:hover img{transform:scale(1.04)}
.work-item .meta{position:absolute;inset:auto 0 0 0;padding:22px;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.8),transparent);transition:background .35s ease}
.work-item h3{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:800;line-height:1}
.work-item .sub{font-size:13px;color:var(--muted);margin-top:5px}
.work-item .tag{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:10px;display:block}
.work-item img{aspect-ratio:1/1}            /* 2-up tiles: square */
.work-item.full{grid-column:1 / -1}         /* full-width banner row */
.work-item.full img{aspect-ratio:7/3}
.work-item.tall img{aspect-ratio:3/4}
@media(max-width:560px){.work-item.full img{aspect-ratio:16/10}}

/* =================================================================
   CASE STUDY
   ================================================================= */
.proj-hero{padding:clamp(40px,7vw,80px) 0 clamp(28px,5vw,52px)}
.proj-hero h1{font-size:clamp(2.6rem,7.4vw,5.6rem);font-weight:800;line-height:1;letter-spacing:-.02em}
.proj-hero h1 .serif{font-weight:500;display:block}
.proj-hero .intro{color:var(--muted);max-width:52ch}
.proj-hero .grid2{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,64px);align-items:end}  /* intro bottom-aligned with the headline */
.bleed{width:100%}
.bleed img{width:100%;object-fit:cover}
.proj-video{width:100%;display:block;border-radius:4px;background:#000;aspect-ratio:16/9}
/* big centred play button over project videos (added by main.js) */
.video-shell{position:relative}
.video-shell .big-play{position:absolute;inset:0;margin:auto;z-index:2;cursor:pointer;border:0;
  width:clamp(76px,9vw,116px);height:clamp(76px,9vw,116px);border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 44px rgba(0,0,0,.5);
  transition:transform .25s ease,opacity .3s ease}
.video-shell .big-play::after{content:"";border-left:clamp(22px,2.4vw,30px) solid #0a0a0a;
  border-top:clamp(13px,1.5vw,18px) solid transparent;border-bottom:clamp(13px,1.5vw,18px) solid transparent;margin-left:7px}
.video-shell .big-play:hover{transform:scale(1.08)}
.video-shell.playing .big-play{opacity:0;pointer-events:none}
/* smaller variant, centred inside phone mockups */
.phone .big-play{position:absolute;inset:0;margin:auto;z-index:3;cursor:pointer;border:0;
  width:64px;height:64px;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 28px rgba(0,0,0,.5);transition:transform .25s ease,opacity .3s ease}
.phone .big-play::after{content:"";border-left:18px solid #0a0a0a;
  border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.phone .big-play:hover{transform:scale(1.1)}
.phone.playing .big-play{opacity:0;pointer-events:none}
.gallery-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4vw,22px)}
.gallery-2 img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gallery-2 .portrait{aspect-ratio:3/4}
.phone{
  position:relative;aspect-ratio:9/19.3;width:min(250px,100%);margin:0 auto;align-self:center;justify-self:center;
  border-radius:44px;padding:10px;isolation:isolate;overflow:hidden;
  background:linear-gradient(135deg,#4a4a4e 0%,#151517 24%,#323236 50%,#0c0c0e 76%,#3c3c40 100%);
  box-shadow:0 34px 70px rgba(0,0,0,.55),0 4px 14px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.22);
}
.phone::before{content:"";position:absolute;inset:11px;border-radius:36px;background:#000;z-index:0}
.phone .play{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center}
.phone .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.phone .notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:38%;height:20px;background:#000;border-radius:0 0 14px 14px;z-index:2}
.phone-video{position:absolute;top:12px;left:12px;width:calc(100% - 24px);height:calc(100% - 24px);border-radius:34px;object-fit:cover;z-index:1;background:#000}
/* phone glides in from a top corner, scrubbed to scroll (see main.js) */
.phone.slide-right,.phone.slide-left{will-change:transform,opacity}
.js .phone.slide-right{opacity:0;transform:translate(200px,-180px) rotate(6deg)}
.js .phone.slide-left{opacity:0;transform:translate(-200px,-180px) rotate(-6deg)}
@media (prefers-reduced-motion:reduce){.js .phone.slide-right,.js .phone.slide-left{opacity:1;transform:none}}
.pullquote{font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(1.8rem,4.4vw,3rem);line-height:1.08;max-width:20ch}
.pullquote.right{margin-left:auto;text-align:left}
.sub-note{color:var(--muted);font-size:1.02rem;max-width:42ch;margin-top:18px}
.proj-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* =================================================================
   FORMS (contact / careers / application)
   ================================================================= */
.form-hero h1{font-size:clamp(3rem,9vw,6rem);font-weight:800;line-height:.9;letter-spacing:-.02em}
.form-hero h1 .serif{font-weight:500}
.form-grid{--fgap:clamp(40px,8vw,120px);display:grid;grid-template-columns:1fr 1fr;gap:34px var(--fgap);margin-top:clamp(40px,7vw,72px)}
.field{display:flex;flex-direction:column;position:relative}
/* bridge the column gap so a side-by-side pair reads as one continuous line */
.form-grid .field:not(.full):first-child::after{content:"";position:absolute;bottom:0;left:100%;width:var(--fgap);height:1px;background:#3a3a36}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.field input,.field select,.field textarea{
  /* opaque line: translucent var(--line) picks up the page-bg stripes and looks segmented */
  background:transparent;border:0;border-bottom:1px solid #3a3a36;
  color:var(--white);font-family:var(--sans);font-size:1rem;padding:8px 0;width:100%;
}
.field textarea{resize:vertical;min-height:48px}
.field select{appearance:none;cursor:pointer}
.field input[type=file]{padding:14px 0;cursor:pointer;color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}

/* careers job list — accordion */
.jobs{margin-top:clamp(30px,5vw,56px);border-bottom:1px solid var(--line)}
.job-item{border-top:1px solid var(--line)}
.job{display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:100%;padding:26px 0;background:none;border:0;color:inherit;
  text-align:left;font-family:inherit;cursor:pointer}
.job .jt{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;letter-spacing:-.01em;transition:color .2s}
.job .dept{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1.1rem;margin-top:2px}
.job-right{display:flex;align-items:center;gap:clamp(16px,3vw,30px)}
.job .type{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.job:hover .jt,.job-item.open .jt{color:var(--gold)}
.job-toggle{position:relative;width:22px;height:22px;flex:none}
.job-toggle::before,.job-toggle::after{content:"";position:absolute;background:var(--gold);transition:transform .3s ease}
.job-toggle::before{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
.job-toggle::after{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.job-item.open .job-toggle::after{transform:translateX(-50%) scaleY(0)}
.job-panel{max-height:0;overflow:hidden;transition:max-height .45s ease}
.job-item.open .job-panel{max-height:2400px}
.job-panel-inner{padding-bottom:34px}
.job-desc{color:var(--muted);max-width:70ch;margin:0 0 18px}
.job-desc b{color:var(--ink,inherit)}
.job-desc a{color:var(--gold)}
.job-sub{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:26px 0 12px}
.job-list{margin:0 0 20px;padding-left:1.1em;color:var(--muted);max-width:70ch}
.job-list li{margin:0 0 8px}

.form-msg{margin-top:22px;color:var(--gold);font-weight:600;font-size:.95rem;display:none}

/* =================================================================
   INTERACTIONS — magnetic nav · marker circle · page wipe
   ================================================================= */
/* magnetic / "sticky" nav links (à la weareimpero) — JS nudges toward cursor */
.nav-links a{display:inline-block;will-change:transform;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .2s,color .2s}
@media (hover:none){.nav-links a{will-change:auto;transition:opacity .2s,color .2s}}

/* hand-drawn marker circle that draws itself when scrolled into view */
.circle-word{position:relative;display:inline-block;white-space:nowrap}
.circle-word > .mark{position:absolute;left:50%;top:52%;
  width:124%;height:142%;transform:translate(-50%,-50%);
  overflow:visible;pointer-events:none;z-index:-1}
.circle-word > .mark path{fill:none;stroke:var(--gold);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len) var(--len);stroke-dashoffset:var(--len)}
.circle-word.in > .mark path{
  transition:stroke-dashoffset 1.05s cubic-bezier(.6,0,.35,1);stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){
  .circle-word > .mark path{stroke-dashoffset:0;transition:none}
}

/* page-transition wipe — gold panel sweeps up across the screen */
.page-wipe{position:fixed;inset:0;z-index:9990;background:var(--gold);
  transform:translateY(100%);pointer-events:none;will-change:transform;
  display:flex;align-items:center;justify-content:center}
.page-wipe.anim{transition:transform .4s cubic-bezier(.45,.05,.55,.95)}
.page-wipe img{width:clamp(60px,9vw,90px);height:auto;opacity:0;transition:opacity .25s ease}
.page-wipe.show-mark img{opacity:1}
@media (prefers-reduced-motion:reduce){.page-wipe{display:none!important}}

/* =================================================================
   FOOTER
   ================================================================= */
.site-footer{border-top:1px solid var(--gold);background:var(--ink);padding:clamp(44px,6vw,72px) 0 clamp(36px,5vw,56px)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,60px)}
.footer-grid h4{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-brand .fn{font-size:clamp(1.15rem,2.1vw,1.6rem);font-weight:800;letter-spacing:-.01em;margin-bottom:12px;white-space:nowrap}  /* sized to keep the full name on one line */
.footer-brand p{color:var(--muted);max-width:34ch;font-size:.95rem}
.footer-grid p,.footer-grid a{color:var(--muted);font-size:.95rem;line-height:1.7}
.tel-num{word-spacing:.45em}
.footer-grid a:hover{color:var(--white)}
.socials{display:flex;gap:16px;margin-top:22px}
.socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:.2s}
.socials a:hover{border-color:var(--gold);color:var(--gold)}
.socials svg{width:17px;height:17px;fill:currentColor}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media(max-width:860px){
  /* mobile: keep any stray animation offsets from widening the page */
  html,body{overflow-x:clip}
  /* inner-page heroes: roomy but not full-screen — 100svh centres a short
     headline in a huge void on a phone, content-tight feels cramped.
     (.hero-screen — the home landing — intentionally stays full-height) */
  .about-hero,.work-hero,.people-hero,.proj-hero{min-height:calc((62svh - 72px)/var(--z,1))}
  html.menu-open,html.menu-open body{overflow:hidden}
  /* full-screen overlay menu — slides down from under the header bar */
  .nav-links{
    position:fixed;inset:0;z-index:150;
    flex-direction:column;align-items:stretch;justify-content:center;gap:0;
    background:var(--ink);
    padding:84px var(--gutter) 44px;
    transform:translateY(-102%);visibility:hidden;
    transition:transform .55s cubic-bezier(.76,0,.24,1),visibility 0s .55s;
  }
  .nav-links.open{transform:none;visibility:visible;transition:transform .55s cubic-bezier(.76,0,.24,1)}
  .nav-links a{
    font-size:clamp(1.7rem,7.5vw,2.4rem);font-weight:800;letter-spacing:-.01em;
    padding:18px 0;width:100%;border-top:1px solid var(--line);
    opacity:0;translate:0 22px;
  }
  .nav-links.open a{
    opacity:1;translate:0 0;
    transition:opacity .5s ease,translate .5s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(.12s + var(--i,0)*.055s);
  }
  .nav-toggle{display:block;position:relative;z-index:160}  /* stays tappable above the overlay */
  .logo{position:relative;z-index:160}                       /* logo stays visible over the ink */
  /* phone mockups: gentler entrance offsets so they stay on-canvas */
  .js .phone.slide-right{transform:translate(84px,-96px) rotate(6deg)}
  .js .phone.slide-left{transform:translate(-84px,-96px) rotate(-6deg)}
  .split,.svc-grid,.form-grid,.about-imgs,.proj-hero .grid2{grid-template-columns:1fr}
  .form-grid .field:not(.full):first-child::after{display:none}
  /* team: keep all 3 across, tighter labels (roster rotates via main.js) */
  .team-grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .member .info .nm{font-size:.9rem}
  .member .info .ro{font-size:.78rem}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .cta-strip h2{flex-basis:100%;order:-1}
}
@media(max-width:560px){
  .cards,.gallery-2{grid-template-columns:1fr}
  /* work grid keeps the desktop 2-up layout — tighter card labels to fit */
  .work-item .meta{padding:12px}
  .work-item h3{font-size:1.02rem}
  .work-item .sub{font-size:10px;margin-top:3px}
  .work-item .tag{font-size:8px;letter-spacing:.16em;margin-top:6px}
  .team-grid{grid-template-columns:repeat(3,1fr)}
  /* footer: Our Office sits under Contact Us, left aligned */
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .tags{gap:8px 24px}
  .tags span::before{margin-left:-16px;margin-right:24px}
}

/* two phone reels side by side (FreshStop) */
.reel-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,3vw,34px)}
@media(max-width:700px){.reel-pair{grid-template-columns:1fr 1fr}}

/* one play button only: hide the browser's own overlay play on videos that carry the gold one */
.proj-video::-webkit-media-controls-overlay-play-button,
.proj-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}