/* Black Box — marketing site
   Tokens */
:root{
  --bg:#0a0a0a; --bg-2:#111113;
  --fg:#f2efe9; --fg-2:rgba(242,239,233,.66); --fg-3:rgba(242,239,233,.42);
  --line:rgba(242,239,233,.13);
  --red:#d23a42; --red-2:#8e1519;
  --light-bg:#f2efe9; --light-fg:#0a0a0a;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,4vw,56px); --max:1440px;
  --ease:cubic-bezier(.22,1,.36,1);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,h4,p,figure{margin:0}
[hidden]{display:none!important}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:6px}
.pill:focus-visible{outline-offset:2px;border-radius:999px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--fg);color:var(--bg);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);font-weight:700;margin-bottom:18px}
.eyebrow a{border-bottom:1px solid var(--line)}
.eyebrow .sep{margin:0 6px;opacity:.6}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.center{justify-content:center}
.lead{color:var(--fg-2);font-size:clamp(16px,1.3vw,19px);max-width:56ch}

/* Light sections swap the tokens so children restyle themselves */
.light{background:var(--light-bg);color:var(--light-fg);
  --bg:var(--light-bg);--fg:var(--light-fg);--fg-2:rgba(10,10,10,.64);--fg-3:rgba(10,10,10,.42);--line:rgba(10,10,10,.14)}

/* Pills */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.005em;white-space:nowrap;
  border:1px solid var(--line);background:color-mix(in srgb,var(--fg) 5%,transparent);color:var(--fg);
  transition:background .35s,border-color .35s,color .35s,transform .5s var(--ease)}
.pill:hover{background:color-mix(in srgb,var(--fg) 12%,transparent);border-color:color-mix(in srgb,var(--fg) 30%,transparent)}
.pill-ghost{background:transparent}
.pill-solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pill-solid:hover{background:var(--fg);color:var(--bg);transform:translateY(-1px)}
.btn-big{height:56px;padding:0 28px;font-size:15px}

/* ─── Nav ──────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:18px var(--gutter);
  color:var(--fg);transition:padding .5s var(--ease),color .4s}
.nav.scrolled{padding-block:10px}
.nav .pill{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.on-light{--bg:var(--light-bg);--fg:var(--light-fg);--line:rgba(10,10,10,.16)}
.nav.open{--bg:#0a0a0a;--fg:#f2efe9;--line:rgba(242,239,233,.13)}
/* logo: "bigger & bolder" (owner's pick L1 from public/lab/brand.html, 2026-09-28) */
.brand{display:inline-flex;align-items:center;font-weight:800;letter-spacing:-.04em;font-size:25px;line-height:1;justify-self:center}
/* the word "Black Box" slides away while scrolling down and comes back on scroll up (main.js toggles .nav.word-off); the mark stays centred */
.brand span{display:inline-block;overflow:hidden;white-space:nowrap;margin-left:12px;max-width:8em;transition:max-width .55s var(--ease),margin-left .55s var(--ease),opacity .35s,transform .55s var(--ease)}
.nav.word-off:not(.open) .brand span{max-width:0;margin-left:0;opacity:0;transform:translateX(-8px)}
.brand svg{width:42px;height:42px;border-radius:11px;flex:none;box-shadow:0 10px 28px -8px rgba(210,58,66,.7)}
.nav-right{justify-self:end;display:flex;gap:8px;align-items:center}
.clock{font-variant-numeric:tabular-nums;color:var(--fg-2);gap:6px}
.clock b{font-weight:600;color:var(--fg)}
.nav-left{justify-self:start;display:flex;align-items:center;gap:16px;min-width:0}
.nav-menu{min-width:84px}
.nav-where{font-size:13px;font-weight:600;color:var(--fg-2);white-space:nowrap;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--ease)}
.nav-where.on{opacity:1;transform:none}
.nav.open .nav-where{opacity:0}
.nav-menu .close-word{display:none}
.nav.open .nav-menu .menu-word{display:none}
.nav.open .nav-menu .close-word{display:inline}

/* Menu overlay */
.menu{position:fixed;inset:0;z-index:50;background:#0a0a0a;color:#f2efe9;display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-content:end;
  padding:120px var(--gutter) 56px;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.menu.open{opacity:1;visibility:visible}
.menu .big{font-family:var(--serif);font-size:clamp(44px,7.5vw,96px);line-height:1.02;letter-spacing:-.025em;display:block;
  transform:translateY(24px);opacity:0;transition:transform .7s var(--ease),opacity .7s,color .3s}
.menu.open .big{transform:none;opacity:1;transition-delay:calc(var(--i)*60ms + 80ms)}
.menu .big:hover{color:var(--red)}
.menu-side{display:grid;gap:28px;align-self:end;color:rgba(242,239,233,.7)}
.menu-side .eyebrow{color:rgba(242,239,233,.42);margin-bottom:6px}
/* small way in for the team: Menu → Team → Admin panel (/admin needs an admin login) */
.menu-admin{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(242,239,233,.22);color:#f2efe9;font-size:13px;font-weight:700;transition:background .3s,color .3s,border-color .3s}
.menu-admin svg{width:16px;height:16px}
.menu-admin:hover{background:#f2efe9;color:#0a0a0a;border-color:#f2efe9}
.menu-mail{font-size:18px;color:#f2efe9}
.menu-social{display:flex;gap:16px;flex-wrap:wrap}
.menu-social a{border-bottom:1px solid rgba(242,239,233,.25)}
body.menu-open{overflow:hidden}

/* ─── Hero: headline + services board ──────────────────── */
.hero{position:relative;min-height:100svh;padding:120px var(--gutter) 56px;display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,64px);align-items:center;overflow:hidden;isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 55% at 18% 92%,rgba(210,58,66,.17),transparent 70%),radial-gradient(40% 40% at 82% 0%,rgba(242,239,233,.04),transparent 70%)}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--grain);opacity:.06;mix-blend-mode:screen;pointer-events:none}
.hero::before,.hero::after{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.hero-copy{transform:translateY(calc(var(--hy,0) * -40px));opacity:calc(1 - var(--hy,0) * .6)}
.hero-copy>*:not(.hero-title){opacity:0;animation:heroIn .9s var(--ease) .35s forwards}
.hero-copy .lead{margin-bottom:30px;max-width:44ch}
.hero-title{font-family:var(--serif);font-weight:400;font-size:clamp(52px,7vw,118px);line-height:.94;letter-spacing:-.035em;margin:0 0 26px}
.hero-title .ln{display:block;overflow:hidden;padding-bottom:.08em}
.hero-title .ln>*{display:inline-block;transform:translateY(105%);animation:rise 1.1s var(--ease) forwards}
.hero-title .ln:nth-child(2)>*{animation-delay:.12s}
.hero-title em{font-style:italic;color:var(--red);padding-right:.05em}
/* the hero waits (max 1.5 s) for text changed in the admin, so it never shows the old words first (html.cms-wait, main.js ready()) */
.cms-wait .hero-title .ln>*,.cms-wait .hero-copy>*,.cms-wait .st{animation-play-state:paused}
@keyframes rise{to{transform:none}}
@keyframes heroIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(clamp(160px,22vh,210px),auto);gap:12px}
.st{position:relative;isolation:isolate;border-radius:20px;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#f2efe9;border:1px solid rgba(242,239,233,.08);
  background:radial-gradient(120% 90% at 85% 5%,var(--h) 0%,transparent 62%),linear-gradient(160deg,#18181b,#0c0c0d);
  transition:transform .6s var(--ease),border-color .4s;opacity:0;animation:stIn .9s var(--ease) forwards;animation-delay:calc(.2s + var(--i) * .07s)}
@keyframes stIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.st:hover{transform:translateY(-4px);border-color:rgba(242,239,233,.25)}
.st.big{grid-column:span 2;grid-row:span 2;padding:28px}
.st .ph{position:absolute;inset:0;z-index:-1;background:var(--ph,none) center/cover no-repeat;opacity:0;transition:opacity .6s,transform 1.2s var(--ease)}
.st.has-photo .ph{opacity:1}
.st.has-photo::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.1) 30%,rgba(0,0,0,.78))}
.st:hover .ph{transform:scale(1.05)}
.st svg{position:absolute;right:18px;top:18px;width:34px;height:auto;color:rgba(242,239,233,.9)}
.st.big svg{width:64px;right:26px;top:26px}
.st h3{font-size:clamp(15px,1.2vw,17px);font-weight:700;letter-spacing:-.01em;line-height:1.25;margin:52px 0 4px}
.st.big h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.4vw,52px);letter-spacing:-.02em;line-height:1;margin:0 0 10px}
.st p{font-size:13px;color:rgba(242,239,233,.66);line-height:1.45;padding-right:44px}
.st.big p{font-size:15px;max-width:34ch}
.st .go{position:absolute;right:18px;bottom:18px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(242,239,233,.25);display:grid;place-items:center;font-size:15px;transition:background .3s,color .3s,transform .5s var(--ease)}
.st:hover .go{background:#f2efe9;color:#0a0a0a;transform:rotate(-45deg)}
.st-wave{position:absolute;left:28px;right:28px;top:42%;height:60px;display:flex;align-items:center;gap:3px;opacity:.5}
.st.has-photo .st-wave{display:none}
.st-wave i{flex:1;background:rgba(242,239,233,.85);border-radius:99px;height:var(--h2);animation:wave 2.4s ease-in-out infinite;animation-delay:var(--dl)}
@media (max-width:980px){.hero{grid-template-columns:1fr;padding-top:104px}}
@media (max-width:560px){
  .hero-grid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .st{min-height:170px;padding:16px}.st p{padding-right:0;margin-bottom:34px}.st .go{right:14px;bottom:14px;width:30px;height:30px}
  .st.big{grid-column:span 2;grid-row:span 1;min-height:250px}.st.big .st-wave{top:30%;height:44px}.st.big p{margin-bottom:0;padding-right:44px}
  .st h3{font-size:15px;margin-top:44px}
  .st:last-child{grid-column:span 2;min-height:140px}
  .hero-title{font-size:clamp(48px,14vw,80px)}
}

/* ─── Marquee ──────────────────────────────────────────── */
.marquee{border-block:1px solid var(--line);padding:16px 0;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:inline-flex;animation:marq 42s linear infinite;width:max-content}
.marquee span{font-family:var(--serif);font-size:clamp(22px,2.6vw,32px);letter-spacing:-.01em;padding:0 22px 0 0;display:inline-flex;align-items:center;gap:22px;color:var(--fg-2)}
.marquee span::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--red);margin-right:0}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}

/* ─── Crossed bands under the hero ─────────────────────── */
.xb{position:relative;height:210px;overflow:hidden;margin-top:-20px}
.xb-band{position:absolute;left:-6%;right:-6%;top:50%;height:62px;display:flex;align-items:center;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.xb-band.a{background:var(--red);color:#fff;transform:translateY(-50%) rotate(-3.2deg);z-index:2}
.xb-band.b{background:#f2efe9;color:#0a0a0a;transform:translateY(-50%) rotate(2.6deg)}
.xb-track{display:inline-flex;white-space:nowrap;width:max-content;animation:marq 60s linear infinite}
.xb-track.rev{animation:marqR 68s linear infinite}
.xb-track span{font:800 20px/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;display:inline-flex;align-items:center;gap:26px;padding-right:26px}
.xb-track span::after{content:'✦';font-size:15px;opacity:.85}
@keyframes marqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (max-width:820px){.xb{height:180px;margin-top:0}.xb-band{height:46px}.xb-band.a{transform:translateY(-50%) rotate(-9deg)}.xb-band.b{transform:translateY(-50%) rotate(7deg)}.xb-track span{font-size:14px;gap:18px;padding-right:18px}.xb-track span::after{font-size:11px}}
@media (prefers-reduced-motion:reduce){.xb-track,.xb-track.rev{animation:none}}

/* ─── Sections ─────────────────────────────────────────── */
.sec{padding:clamp(88px,12vw,168px) 0}
.sec-head{display:grid;grid-template-columns:1.2fr .8fr;gap:32px 64px;align-items:end;margin-bottom:clamp(40px,6vw,72px)}
.sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.2vw,92px);line-height:.98;letter-spacing:-.03em;max-width:12ch}
.sec-head h2 em{font-style:italic;color:var(--red);padding-right:.05em}
.sec-head>p{color:var(--fg-2);max-width:42ch;font-size:clamp(15px,1.15vw,17px);padding-bottom:.6em}

/* Statement */
.statement{padding:clamp(96px,13vw,180px) 0 clamp(72px,9vw,120px)}
.statement h2{font-family:var(--serif);font-weight:400;font-size:clamp(34px,5.2vw,76px);line-height:1.06;letter-spacing:-.025em;max-width:20ch}
.statement em{font-style:italic;color:var(--red)}
.statement .lead{margin-top:28px}
.props{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(48px,7vw,88px);border-radius:16px;overflow:hidden}
.prop{background:var(--bg);padding:clamp(24px,3vw,36px)}
.prop-no{display:block;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--red);margin-bottom:18px}
.prop h3{font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.prop p{color:var(--fg-2);font-size:15px}

/* Services — sticky showcase (owner's pick S3 from public/lab/services.html, 2026-09-28): a big colour card on the left
   follows the service being read on the right (IntersectionObserver in main.js); admin svc_* photos fill the card when set */
.s3{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,5vw,80px);align-items:start}
.s3-stick{position:sticky;top:100px}
.s3-card{position:relative;aspect-ratio:4/4.7;max-height:calc(100vh - 140px);margin-inline:auto;border-radius:26px;overflow:hidden;color:#f2efe9;background:#111;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.s3-layer{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);background:radial-gradient(90% 70% at 85% 10%,color-mix(in srgb,var(--h) 70%,#fff 16%),transparent 60%),linear-gradient(160deg,var(--h),color-mix(in srgb,var(--h) 30%,#0a0a0a) 85%)}
.s3-layer::after{content:"";position:absolute;inset:0;background:var(--grain);opacity:.08;mix-blend-mode:overlay;pointer-events:none}
.s3-layer.on{opacity:1}
.s3-ph{position:absolute;inset:0;background:var(--ph,none) center/cover no-repeat;opacity:0}
.s3-layer.has-photo .s3-ph{opacity:1}
.s3-layer.has-photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 30%,rgba(0,0,0,.7))}
.s3-layer.has-photo .s3-big{display:none}
.s3-big{position:absolute;right:-6%;top:6%;width:62%;height:auto;color:rgba(242,239,233,.16);stroke-width:.7;transform:translateY(12px) scale(.96);transition:transform 1s var(--ease)}
.s3-layer.on .s3-big{transform:none}
.s3-cap{position:absolute;z-index:2;left:clamp(22px,2.6vw,34px);right:clamp(22px,2.6vw,34px);bottom:clamp(22px,2.6vw,34px)}
.s3-cap small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;opacity:.7;margin-bottom:12px}
.s3-cap b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.6vw,56px);line-height:.98;letter-spacing:-.025em;max-width:11ch}
.s3-dots{position:absolute;z-index:2;top:22px;left:clamp(22px,2.6vw,34px);display:flex;gap:6px}
.s3-dots i{width:18px;height:3px;border-radius:2px;background:rgba(242,239,233,.28);transition:background .4s,width .4s var(--ease)}
.s3-dots i.on{background:#f2efe9;width:34px}
.s3-list{border-top:1px solid var(--line)}
.s3-item{display:grid;grid-template-columns:1fr;gap:12px;padding:clamp(30px,4vw,52px) 0;border-bottom:1px solid var(--line);min-height:clamp(220px,34vh,320px);align-content:center;opacity:.38;transition:opacity .5s}
.s3-item.on{opacity:1}
.s3-badge{display:none}
.s3-item h3{font-family:var(--serif);font-weight:400;font-size:clamp(34px,3.6vw,54px);line-height:1;letter-spacing:-.03em}
.s3-item p{color:var(--fg-2);font-size:15.5px;max-width:48ch}
.s3-more{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-top:4px}
.s3-more svg{width:16px;height:16px;transition:transform .4s var(--ease)}
.s3-item:hover .s3-more svg{transform:translateX(4px)}
@media (max-width:820px){
  .s3{grid-template-columns:1fr}.s3-stick{display:none}
  .s3-item{opacity:1;min-height:0;grid-template-columns:52px 1fr;column-gap:16px}
  .s3-item>*:not(.s3-badge){grid-column:2}
  .s3-badge{display:grid;place-items:center;grid-row:1/span 3;width:52px;height:52px;border-radius:16px;color:#f2efe9;background:linear-gradient(150deg,color-mix(in srgb,var(--h) 80%,#fff 12%),var(--h))}
  .s3-badge svg{width:26px;height:26px}
  .s3-item h3{font-size:32px}
}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{font-size:12px;font-weight:600;padding:5px 10px;border:1px solid var(--line);border-radius:999px;color:var(--fg-2)}

/* Studio */
.studio-media{position:relative;aspect-ratio:16/8;border-radius:22px;overflow:hidden;background:#111}
.studio-media .art{position:absolute;inset:0;
  background:var(--img,none) center/cover no-repeat,
    radial-gradient(38% 55% at 62% 40%,rgba(255,196,160,.22),transparent 70%),
    radial-gradient(60% 80% at 20% 100%,rgba(210,58,66,.35),transparent 70%),
    radial-gradient(40% 40% at 85% 90%,rgba(242,239,233,.06),transparent 70%),
    linear-gradient(180deg,#151416,#0a0a0a)}
.studio-media::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.18;mix-blend-mode:overlay;pointer-events:none}
.studio-media::after{content:'';position:absolute;inset:auto 0 0 0;height:50%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}
.studio-media .wave{position:absolute;left:8%;right:8%;bottom:26%;height:22%;display:flex;align-items:center;gap:.6%;z-index:1;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.studio-media .wave i{flex:1;height:var(--h);border-radius:99px;background:linear-gradient(180deg,rgba(242,239,233,.85),rgba(242,239,233,.25));animation:wave 2.6s ease-in-out infinite;animation-delay:var(--dl)}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.45)}}
.studio-media .mic{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:clamp(60px,9%,110px);z-index:1;opacity:.9}
.studio-media .rec{position:absolute;left:22px;top:20px;z-index:2;display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;font-weight:700;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.4);border:1px solid rgba(242,239,233,.15);backdrop-filter:blur(8px)}
.studio-media .rec i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
/* studio picture: glowing ON AIR sign (owner's pick T3 from public/lab/studio.html, 2026-09-28); an admin studio photo replaces it */
.studio-media.onair .art{background:var(--img,none) center/cover no-repeat,radial-gradient(80% 90% at 50% 30%,#1a1113,#0a0a0b)}
.oa-glow{position:absolute;left:50%;top:34%;width:70%;height:70%;transform:translate(-50%,-50%);z-index:1;background:radial-gradient(closest-side,rgba(210,58,66,.35),transparent);filter:blur(20px);animation:oaGlow 6s ease-in-out infinite;pointer-events:none}
@keyframes oaGlow{50%{opacity:.7}}
.oa-sign{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:2;padding:clamp(14px,2vw,26px) clamp(26px,4vw,54px);border-radius:16px;border:2px solid rgba(255,120,125,.7);background:linear-gradient(180deg,rgba(60,8,12,.9),rgba(30,4,6,.9));box-shadow:0 0 40px rgba(210,58,66,.5),inset 0 0 30px rgba(210,58,66,.35)}
.oa-sign span{display:block;white-space:nowrap;font:800 clamp(34px,5.4vw,78px)/1 var(--sans);letter-spacing:.12em;margin-right:-.12em;color:#ffd9d9;text-shadow:0 0 8px #ff4d56,0 0 22px #ff4d56,0 0 46px #d23a42;animation:oaFlick 5s infinite}
@keyframes oaFlick{0%,18%,22%,24%,100%{opacity:1}20%,23%{opacity:.35}}
.studio-media.onair .wave{bottom:22%;opacity:.35}
.studio-media.has-photo .oa-glow,.studio-media.has-photo .oa-sign{display:none}
.studio-media figcaption span:last-child{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:rgba(242,239,233,.6);align-self:end}
@media (prefers-reduced-motion:reduce){.oa-glow,.oa-sign span{animation:none}}
@media (max-width:560px){.studio-media.onair .wave{bottom:34%}.oa-sign{top:30%}.studio-media figcaption span:first-child{white-space:nowrap}.studio-media figcaption span:last-child{display:none}}
.studio-media figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:2;display:flex;justify-content:space-between;font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em}
/* Studio: signature feature + list */
.sig{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:clamp(36px,5vw,56px)}
.sig-card{position:relative;border-radius:22px;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;overflow:hidden;border:1px solid rgba(242,239,233,.1);background:radial-gradient(100% 80% at 85% 10%,rgba(210,58,66,.45),transparent 60%),linear-gradient(160deg,#1a1a1d,#0b0b0c)}
.sig-card svg{position:absolute;right:30px;top:30px;width:64px;height:64px;color:#f2efe9}
.sig-card .badge{align-self:flex-start;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#fff;background:var(--red);padding:6px 10px;border-radius:999px;margin-bottom:18px}
.sig-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(38px,4vw,60px);line-height:1;letter-spacing:-.025em;margin-bottom:14px}
.sig-card p{color:rgba(242,239,233,.72);max-width:42ch;margin-bottom:20px}
.angles{display:flex;gap:8px;flex-wrap:wrap}
.angles span{font-size:12px;font-weight:700;letter-spacing:.08em;padding:7px 12px;border-radius:999px;border:1px solid rgba(242,239,233,.25);background:rgba(0,0,0,.25)}
.sig-list{display:grid;border-top:1px solid var(--line)}
.sig-list li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)}
.sig-list svg{width:30px;height:30px;color:var(--red);margin-top:2px}
.sig-list b{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.sig-list span{color:var(--fg-2);font-size:14.5px}

/* Studio: everything included (tabs) */
.fac{margin-top:clamp(28px,4vw,44px);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2.6vw,30px);background:linear-gradient(160deg,#121214,#0c0c0d)}
.fac-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.fac-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);letter-spacing:-.02em;line-height:1}
.fac-tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(242,239,233,.03)}
.fac-tabs button{height:38px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:700;color:var(--fg-2);white-space:nowrap;transition:background .3s,color .3s}
.fac-tabs button:hover{color:var(--fg)}
.fac-tabs button[aria-selected=true]{background:var(--fg);color:var(--bg)}
.fac-tabs small{font-size:11px;font-weight:700;opacity:.5;margin-left:7px}
.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.fac-grid li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:16px;border-radius:14px;background:rgba(242,239,233,.025);border:1px solid rgba(242,239,233,.06);animation:facIn .5s var(--ease) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes facIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fac-grid svg{width:26px;height:26px;color:var(--red);margin-top:1px}
.fac-grid b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em;margin-bottom:2px}
.fac-grid span{display:block;font-size:13px;color:var(--fg-2);line-height:1.45}
/* the white backdrop tile (owner's pick, lab N3, 2026-09-28): the empty white set on a camera screen, gaffer-tape floor
   marks for a product and a model, a searching focus box, and a flash + frame counter when it comes into view or is clicked */
.fac-grid li.fw{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(12px,2vw,30px);align-items:center;padding:clamp(6px,1vw,14px) clamp(20px,2.6vw,32px) clamp(6px,1vw,14px) 0;border-radius:16px;overflow:hidden;border:1px solid rgba(242,239,233,.07);background:radial-gradient(70% 120% at 100% 0%,rgba(210,58,66,.13),transparent 60%),rgba(242,239,233,.025)}
.fw-copy{padding:clamp(24px,3vw,44px)}
.fw-eyebrow{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--red);margin-bottom:14px}
.fw-title{font-family:var(--serif);font-weight:400;font-size:clamp(36px,3.8vw,56px);line-height:.95;letter-spacing:-.025em;margin:0}
.fw-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px;max-width:560px}
.fw-opt{display:flex;flex-direction:column;gap:14px;padding:16px;border-radius:14px;border:1px solid var(--line);background:rgba(242,239,233,.03)}
.fw-opt strong{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.fw-opt em{display:block;font-style:normal;font-weight:400;font-size:13.5px;line-height:1.45;letter-spacing:0;color:var(--fg-2);margin-top:5px}
.fw-sw{position:relative;display:block;width:30px;height:30px;border-radius:50%}
.fw-sw-white{background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.35),0 6px 18px -6px rgba(255,255,255,.45)}
.fw-sw-many{width:66px}
.fw-sw-many i{position:absolute;top:0;width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #141416,0 0 0 3px rgba(242,239,233,.16)}
.fw-sw-many i:nth-child(1){left:0;background:#cfd0d3}.fw-sw-many i:nth-child(2){left:18px;background:#dcc6a6}.fw-sw-many i:nth-child(3){left:36px;background:#2b2b2f}
.fw-vf{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;cursor:pointer;margin:20px 0;box-shadow:0 0 0 6px #1b1b1d,0 0 0 7px rgba(255,255,255,.09),0 40px 70px -35px rgba(0,0,0,.9);
  background:radial-gradient(60% 45% at 62% 92%,#fff 0%,rgba(255,255,255,0) 70%),radial-gradient(45% 70% at 6% -10%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),linear-gradient(180deg,#dad7d0 0%,#e8e6e1 28%,#f4f3f0 50%,#fbfbf9 64%,#fff 78%,#f3f1ed 100%)}
.fw-bd{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.fw-bd::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 45% at 62% 92%,rgba(255,255,255,.3),transparent 70%)}
.fw-bd.on{opacity:1}
.fw-bd.b1{background:linear-gradient(180deg,#b7b8bc 0%,#cdced1 45%,#dadbde 70%,#d0d1d4 100%)}
.fw-bd.b2{background:linear-gradient(180deg,#c4ac89 0%,#d9c3a2 45%,#e5d2b4 70%,#d9c4a4 100%)}
.fw-bd.b3{background:linear-gradient(180deg,#19191c 0%,#242428 45%,#2e2e33 70%,#232327 100%)}
.fw-bd.b3::after{background:radial-gradient(60% 45% at 62% 92%,rgba(255,255,255,.08),transparent 70%)}
.fw-pool{transition:opacity .9s}.fw-vf[data-bd="1"] .fw-pool,.fw-vf[data-bd="2"] .fw-pool{opacity:.45}.fw-vf[data-bd="3"] .fw-pool{opacity:.12}
.fw-vf.dark .fw-grid{--g:rgba(255,255,255,.07)}.fw-vf.dark .fw-corners{--c:rgba(255,255,255,.35)}
.fw-dots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:rgba(10,10,10,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2}
.fw-dots em{font:600 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:rgba(255,255,255,.8);margin-right:3px}
.fw-dots i{width:13px;height:13px;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.5);transition:box-shadow .3s,transform .3s var(--ease)}
.fw-dots i:nth-of-type(1){background:#fff}.fw-dots i:nth-of-type(2){background:#cfd0d3}.fw-dots i:nth-of-type(3){background:#dcc6a6}.fw-dots i:nth-of-type(4){background:#2b2b2f}
.fw-dots i.on{box-shadow:0 0 0 2px var(--red);transform:scale(1.15)}
.fac-grid .fw-vf svg{position:absolute;left:0;right:0;bottom:4%;width:100%;max-width:none;height:auto;margin:0;color:inherit}
.fw-grid{position:absolute;inset:0;--g:rgba(0,0,0,.07);background:linear-gradient(90deg,transparent calc(33.33% - .5px),var(--g) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),var(--g) 0 calc(66.66% + .5px),transparent 0),linear-gradient(180deg,transparent calc(33.33% - .5px),var(--g) 0 calc(33.33% + .5px),transparent 0 calc(66.66% - .5px),var(--g) 0 calc(66.66% + .5px),transparent 0)}
.fw-corners,.fw-focus{background-repeat:no-repeat;background-image:linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c)),linear-gradient(var(--c),var(--c));background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
.fw-corners{position:absolute;inset:40px 14px 14px;--c:rgba(0,0,0,.35);background-size:18px 1.5px,1.5px 18px,18px 1.5px,1.5px 18px,18px 1.5px,1.5px 18px,18px 1.5px,1.5px 18px}
.fw-focus{position:absolute;left:50%;top:50%;width:13%;height:20%;--c:var(--red);background-size:12px 2px,2px 12px,12px 2px,2px 12px,12px 2px,2px 12px,12px 2px,2px 12px;transform:translate(-50%,-50%);animation:fwSeek 2.4s var(--ease) infinite}
@keyframes fwSeek{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.18)}}
.fw-top{position:absolute;left:0;right:0;top:0;display:flex;gap:14px;align-items:center;padding:12px 16px 22px;background:linear-gradient(rgba(0,0,0,.5),transparent);font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:#fff}
.fw-top em{font-style:normal}.fw-top .sp{flex:1}
.fw-ready{position:absolute;left:0;right:0;top:31%;text-align:center;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.24em;text-transform:uppercase;color:#8d887f}
.fw-flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
.fw-vf.shot .fw-flash{animation:fwFlash .5s ease-out}
@keyframes fwFlash{0%{opacity:0}8%{opacity:.95}100%{opacity:0}}
@media (max-width:1100px){.fac-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.sig{grid-template-columns:1fr}.sig-card{min-height:320px}}
@media (max-width:820px){.fac-grid li.fw{grid-template-columns:1fr;padding:0 16px 16px}.fw-copy{padding:22px 4px 18px}.fw-vf{margin:4px 0 0;aspect-ratio:4/3}.fac-grid .fw-vf svg{bottom:15%}.fw-dots{bottom:10px;padding:5px 9px;gap:6px}.fw-dots i{width:12px;height:12px}}
@media (max-width:560px){.fac-grid{grid-template-columns:1fr 1fr;gap:8px}.fac-grid li{grid-template-columns:1fr;gap:10px;padding:14px 12px}.fac-grid svg{width:24px;height:24px}.fac-grid b{font-size:14px;line-height:1.25}.fac-grid span{font-size:12.5px;line-height:1.4;margin-top:3px}.fac-tabs{width:100%}.fac-tabs button{flex:1;padding:0 8px;font-size:12px}.fac-tabs small{display:none}}
@media (max-width:560px){.fw-pair{grid-template-columns:1fr}.fw-opt{flex-direction:row;align-items:flex-start;gap:14px}.fw-sw{flex:none}.fac-grid li.fw{grid-template-columns:1fr;gap:0;padding:0 14px 14px}.fw-title{font-size:34px}.fw-top{gap:9px;font-size:9.5px;padding:10px 11px 18px}}
@media (prefers-reduced-motion:reduce){.fw-focus,.fw-vf.shot .fw-flash{animation:none}}

.studio-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:40px;flex-wrap:wrap}
.studio-cta p{color:var(--fg-2);max-width:50ch}

/* Work */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/4.6;background:#141416;color:#f2efe9}
.tile.w7{grid-column:span 7;aspect-ratio:7/5.6}
.tile.w5{grid-column:span 5;aspect-ratio:auto;align-self:stretch;min-height:320px}
.tile.w12{grid-column:span 12;aspect-ratio:21/8}
.tile .art{position:absolute;inset:0;background:var(--img,none) center/cover no-repeat,var(--t,#161616);transition:transform 1.4s var(--ease)}
.tile .art::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.16;mix-blend-mode:overlay}
.tile::after{content:'';position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));pointer-events:none}
.tile:hover .art{transform:scale(1.045)}
.tile .idx{position:absolute;right:22px;top:16px;font-family:var(--serif);font-size:clamp(40px,5vw,72px);line-height:1;color:rgba(242,239,233,.16);z-index:1}
.tile figcaption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;display:flex;justify-content:space-between;align-items:end;gap:16px}
.tile small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,233,.7);font-weight:700;margin-bottom:8px}
.tile h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.02;letter-spacing:-.02em}
.tile .pill{--fg:#f2efe9;--line:rgba(242,239,233,.25);backdrop-filter:blur(8px)}

/* Live tiles (photos managed in /admin) + lightbox */
.tile .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile.live{cursor:pointer}
.tile.live .art::after{display:none}
.studio-media.has-photo .mic,.studio-media.has-photo .wave{display:none}
.lb{border:0;padding:0;background:transparent;max-width:min(96vw,1200px);max-height:96vh;margin:auto}
.lb::backdrop{background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
.lb figure{margin:0;display:grid;gap:12px}
.lb img{max-width:min(96vw,1200px);max-height:84vh;width:auto;object-fit:contain;border-radius:12px;display:block;margin:0 auto}
.lb figcaption{color:rgba(242,239,233,.66);text-align:center;font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.lb figcaption b{color:#f2efe9;font-family:var(--serif);font-weight:400;font-size:26px;display:block;letter-spacing:-.01em;text-transform:none;margin-bottom:4px}
.lb-x{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:50%;background:rgba(242,239,233,.12);color:#f2efe9;font-size:26px;line-height:1;border:1px solid rgba(242,239,233,.2);cursor:pointer;z-index:2}

/* Process */
/* How we work — connected cards (owner's pick P2 from public/lab/process.html, 2026-09-28); a card turns dark on hover */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.flow-step{position:relative;display:flex}
.flow-card{flex:1;display:flex;flex-direction:column;padding:clamp(22px,2vw,28px);border-radius:22px;background:#f8f6f1;border:1px solid var(--line);transition:background .45s,color .45s,transform .6s var(--ease),box-shadow .45s}
.flow-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.flow-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(150deg,#e0484f,#8e1519);color:#fff;box-shadow:0 12px 26px -12px rgba(210,58,66,.8)}
.flow-ic svg{width:26px;height:26px}
.flow-top small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--fg-3);transition:color .45s}
.flow-card h3{font-family:var(--serif);font-weight:400;font-size:clamp(32px,2.8vw,42px);line-height:1;letter-spacing:-.02em;margin-bottom:12px}
.flow-card p{color:var(--fg-2);font-size:15px;flex:1;transition:color .45s}
.flow-get{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);transition:border-color .45s}
.flow-get small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--red);margin-bottom:5px}
.flow-get b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.flow-arrow{position:absolute;right:calc(-1 * clamp(14px,1.6vw,22px) / 2 - 17px);top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);color:var(--fg)}
.flow-arrow svg{width:15px;height:15px}
@media (hover:hover){.flow-card:hover{background:#111;color:#f2efe9;transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}.flow-card:hover p{color:rgba(242,239,233,.7)}.flow-card:hover .flow-top small{color:rgba(242,239,233,.5)}.flow-card:hover .flow-get{border-color:rgba(242,239,233,.15)}}
/* How we work on burgundy (owner's pick C3 from public/lab/process-colors.html, 2026-09-28): dark wine red with a soft red glow;
   cards are glassy and light up red on hover */
.sec.wine{--bg:#1d0b0e;--fg:#f5ece8;--fg-2:rgba(245,236,232,.68);--fg-3:rgba(245,236,232,.45);--line:rgba(245,236,232,.13);color:var(--fg);
  background:radial-gradient(70% 60% at 85% 0%,rgba(210,58,66,.35),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(142,21,25,.35),transparent 70%),#1d0b0e}
.wine .s3-card{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -40px rgba(0,0,0,.7)}
.wine .flow-card{background:rgba(255,255,255,.045);border-color:rgba(245,236,232,.1)}
@media (hover:hover){.wine .flow-card:hover{background:linear-gradient(150deg,#c23a42,#6e1016);color:#fff;box-shadow:0 30px 60px -30px rgba(210,58,66,.6)}.wine .flow-card:hover p{color:rgba(255,255,255,.78)}.wine .flow-card:hover .flow-top small{color:rgba(255,255,255,.6)}.wine .flow-card:hover .flow-get{border-color:rgba(255,255,255,.2)}.wine .flow-card:hover .flow-ic{background:#fff;color:#a3202a}.wine .flow-card:hover .flow-get small{color:#ffd9da}}
.inds-wrap{margin-top:clamp(72px,9vw,120px)}
.inds{display:flex;flex-wrap:wrap;gap:10px}
.ind{font-family:var(--serif);font-size:clamp(22px,3vw,42px);line-height:1;padding:14px 26px;border:1px solid var(--line);border-radius:999px;letter-spacing:-.015em;transition:background .35s,color .35s,transform .5s var(--ease);cursor:default}
.ind:hover{background:var(--fg);color:var(--bg);transform:translateY(-2px)}

/* Contact */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.contact{padding:clamp(96px,14vw,190px) 0 clamp(72px,9vw,120px);position:relative;overflow:hidden}
.contact::before{content:'';position:absolute;left:-10%;bottom:-30%;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(closest-side,rgba(210,58,66,.22),transparent);filter:blur(40px);pointer-events:none}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;position:relative}
.contact h2{font-family:var(--serif);font-weight:400;font-size:clamp(50px,7.6vw,118px);line-height:.96;letter-spacing:-.035em;max-width:9ch}
.contact h2 em{font-style:italic;color:var(--red)}
.contact .lead{margin-top:28px}
.contact-list{margin-top:44px;display:grid;gap:18px}
.contact-list li{display:grid;grid-template-columns:110px 1fr;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:14px}
.contact-list .eyebrow{margin:0}
.contact-list a{border-bottom:1px solid var(--line);transition:border-color .3s}
.contact-list a:hover{border-color:var(--fg)}
.form{padding-top:8px}
.field{display:grid;gap:8px;margin-bottom:26px}
.field label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);font-weight:700}
.field:has([required]) label::after{content:" *";color:var(--red)} /* must be filled: name, phone */
.field [aria-invalid="true"]{border-color:var(--red)}
.field input,.field select,.field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);color:var(--fg);font:inherit;font-size:18px;padding:10px 0;border-radius:0;outline:none;transition:border-color .3s;-webkit-appearance:none;appearance:none}
.field :is(input,select,textarea):focus{border-color:var(--fg)}
.field :is(input,textarea)::placeholder{color:var(--fg-3)}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),linear-gradient(-45deg,transparent 50%,var(--fg-2) 50%);background-position:right 8px top 55%,right 2px top 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:24px}
.field select option{color:#000;background:#fff}
.field textarea{resize:vertical;min-height:96px}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.form-note{margin-top:14px;font-size:13px;color:var(--fg-2);min-height:1.3em}
.form-note.err{color:#ff8a8f}

/* Footer */
footer{border-top:1px solid var(--line);padding:56px 0 32px}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot .brand{justify-self:start;margin-bottom:14px}
.foot-tag{color:var(--fg-2);font-size:14px;max-width:30ch}
.foot h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px;font-weight:700}
.foot a:not(.brand){display:block;padding:4px 0;color:var(--fg-2);font-size:15px;transition:color .3s}
.foot a:not(.brand):hover{color:var(--fg)}
.foot [data-social]:empty::before{content:'Coming soon';color:var(--fg-3);font-size:14px}
.foot-mark{font-family:var(--serif);font-size:clamp(72px,15.5vw,236px);line-height:.85;letter-spacing:-.045em;color:var(--fg);opacity:.07;margin-top:64px;white-space:nowrap;overflow:hidden;user-select:none}
.foot-bottom{display:flex;justify-content:space-between;margin-top:20px;padding-top:22px;border-top:1px solid var(--line);color:var(--fg-3);font-size:13px;flex-wrap:wrap;gap:12px}

/* Reveal on scroll */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ─── Responsive ───────────────────────────────────────── */
@media (max-width:1100px){
  .nav-where{display:none}
  .flow{grid-template-columns:1fr 1fr}.flow-step:nth-child(2) .flow-arrow{display:none}
}
@media (max-width:820px){
  .nav{padding:14px var(--gutter)}
  .brand{font-size:22px}.brand span{margin-left:10px}.brand svg{width:38px;height:38px;border-radius:10px}
  .clock{display:none}
  .nav .pill{height:36px;padding:0 14px}
  .menu{grid-template-columns:1fr;gap:40px;padding-top:100px}
  .sec-head{grid-template-columns:1fr;gap:20px}
  .sec-head>p{padding-bottom:0}
  .props{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.flow-arrow{display:none}
  .studio-media{aspect-ratio:4/3}
  .tile.w7,.tile.w5{grid-column:span 12}
  .tile,.tile.w7,.tile.w5{aspect-ratio:4/4.2;align-self:auto}
  .tile.w12{aspect-ratio:4/4.2}
  .grid{gap:12px}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .contact-list li{grid-template-columns:90px 1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
}
@media (max-width:520px){
  .brand span{display:none}.brand svg{width:40px;height:40px}
  .nav-right .pill-solid{padding:0 12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal,.js .reveal-title{opacity:1;transform:none;clip-path:none}
  .hero-title .ln>*,.hero-copy>*,.st{transform:none!important;opacity:1!important;translate:none!important}
  .cursor,.peek{display:none}
  html{scroll-behavior:auto}
}

/* ═══ Design round 2 ═══════════════════════════════════════ */

/* Scroll progress */
.progress{position:fixed;left:0;top:0;width:100%;height:2px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;z-index:80;pointer-events:none}

/* Stacked "card" sections: each one slides over the previous with rounded top corners */
.stack{--r:clamp(22px,3vw,44px);position:relative;background:var(--bg);border-radius:var(--r) var(--r) 0 0;margin-top:calc(-1 * var(--r))}
.stack:not(.light){box-shadow:0 -24px 60px rgba(0,0,0,.28)}

/* Headings reveal through a mask */
.js .reveal-title{clip-path:inset(0 0 100% 0);transform:translateY(28px);transition:clip-path 1.15s var(--ease),transform 1.15s var(--ease);transition-delay:var(--d,0s)}
.js .reveal-title.in{clip-path:inset(-20% -6% -30% -6%);transform:none}


/* Work filters */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.chip{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--fg-2);transition:background .3s,color .3s,border-color .3s}
.chip:hover{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 35%,transparent)}
.chip.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.work-more{display:flex;justify-content:center;margin-top:40px}
.grid.fading{opacity:0;transform:translateY(8px)}
.grid{transition:opacity .25s,transform .25s}
.tile.live:focus-visible{outline-offset:4px;border-radius:20px}

/* Lightbox arrows + counter */
.lb-nav{position:fixed;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:rgba(242,239,233,.12);border:1px solid rgba(242,239,233,.2);color:#f2efe9;font-size:22px;z-index:2;transition:background .3s}
.lb-nav:hover,.lb-x:hover{background:rgba(242,239,233,.24)}
.lb-nav.prev{left:16px}.lb-nav.next{right:16px}
.lb-count{display:block;font-family:var(--serif);font-style:italic;font-size:15px;letter-spacing:0;text-transform:none;color:rgba(242,239,233,.5);margin-top:6px}
.lb-link{display:inline-flex;margin-top:12px;height:36px;align-items:center;padding:0 14px;border-radius:999px;border:1px solid rgba(242,239,233,.25);color:#f2efe9;font-size:13px;letter-spacing:0;text-transform:none}
.lb img{touch-action:pan-y}

/* Service detail drawer */
.drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(640px,100vw);height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:#0f0f11;color:#f2efe9;overflow:hidden;
  transform:translateX(100%);transition:transform .6s var(--ease);box-shadow:-40px 0 80px rgba(0,0,0,.45)}
.drawer.show{transform:none}
.drawer::backdrop{background:rgba(0,0,0,0);transition:background .45s}
.drawer.show::backdrop{background:rgba(0,0,0,.6)}
.drawer-in{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:22px clamp(20px,3vw,36px) 36px;display:flex;flex-direction:column}
.drawer-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer-no{font-family:var(--serif);font-style:italic;font-size:19px;color:rgba(242,239,233,.55)}
.drawer-no b{color:var(--red);font-weight:400}
.drawer-x{width:44px;height:44px;border-radius:50%;border:1px solid rgba(242,239,233,.18);font-size:24px;line-height:1;transition:background .3s}
.drawer-x:hover{background:rgba(242,239,233,.1)}
.drawer-art{position:relative;flex:none;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--t,#161616);margin-bottom:28px}
.drawer-art::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.14;mix-blend-mode:overlay}
.drawer-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drawer-art svg{position:absolute;right:24px;bottom:22px;width:clamp(56px,9vw,84px);height:auto;color:rgba(242,239,233,.92)}
.drawer-art.has-photo svg{display:none}
.drawer h2{font-family:var(--serif);font-weight:400;font-size:clamp(36px,4.4vw,54px);line-height:1;letter-spacing:-.025em;margin-bottom:16px}
.drawer-intro{color:rgba(242,239,233,.72);font-size:16px;margin-bottom:30px;max-width:52ch}
.drawer h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,233,.42);font-weight:700;margin:0 0 14px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;margin-bottom:30px}
.checks li{position:relative;padding-left:28px;font-size:15px;line-height:1.45}
.checks li::before{content:'';position:absolute;left:0;top:.15em;width:17px;height:17px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat}
.drawer .tags{margin:0 0 34px}
.drawer-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.drawer-nav{display:flex;justify-content:space-between;gap:16px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(242,239,233,.12)}
.drawer-nav button{font-size:15px;font-weight:600;color:rgba(242,239,233,.8);text-align:left;transition:color .3s}
.drawer-nav button:last-child{text-align:right}
.drawer-nav button:hover{color:#fff}
.drawer-nav small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(242,239,233,.4);font-weight:700;margin-bottom:2px}

/* Pointer followers (desktop only): "View" bubble + service preview card */
.cursor,.peek{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform}
.cursor{z-index:90}
.cursor span{position:absolute;left:-44px;top:-44px;width:88px;height:88px;border-radius:50%;background:#f2efe9;color:#0a0a0a;display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:.02em;transform:scale(0);transition:transform .35s var(--ease)}
.cursor.on span{transform:scale(1)}
.peek{z-index:40}
.peek .card{position:absolute;left:36px;top:-210px;width:280px;height:190px;border-radius:18px;overflow:hidden;background:var(--t,#161616);box-shadow:0 30px 70px rgba(0,0,0,.35);opacity:0;transform:scale(.7) rotate(var(--rot,0deg));transform-origin:0 100%;transition:opacity .3s,transform .5s var(--ease)}
.peek.on .card{opacity:1;transform:scale(1) rotate(var(--rot,0deg))}
.peek .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.peek .card svg{position:absolute;right:18px;bottom:16px;width:58px;height:auto;color:rgba(242,239,233,.92)}
.peek .card b{position:absolute;left:18px;top:12px;font-family:var(--serif);font-weight:400;font-style:italic;font-size:30px;color:rgba(242,239,233,.9)}
.peek .card.has-photo svg{display:none}
@media (hover:none),(max-width:1100px){.cursor,.peek{display:none}}

/* /work page */
.page-hero{padding:clamp(140px,17vw,220px) 0 clamp(36px,5vw,64px)}
.page-title{font-family:var(--serif);font-weight:400;font-size:clamp(56px,9.5vw,148px);line-height:.94;letter-spacing:-.035em;max-width:12ch;margin-bottom:28px}
.page-title em{font-style:italic;color:var(--red)}
.work-page{padding-top:0}
.cta-band{padding:clamp(88px,11vw,150px) 0;text-align:center}
.cta-band .eyebrow{margin-bottom:22px}
.cta-band h2{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.5vw,96px);line-height:.98;letter-spacing:-.03em;max-width:13ch;margin:0 auto 36px}
.cta-band h2 em{font-style:italic;color:var(--red)}

@media (max-width:820px){
  .drawer{inset:auto 0 0 0;width:100%;height:auto;max-height:92dvh;border-radius:24px 24px 0 0;transform:translateY(100%);box-shadow:0 -30px 60px rgba(0,0,0,.45)}
  .drawer-in{height:auto;max-height:92dvh;padding:16px 18px 28px}
  .checks{grid-template-columns:1fr}
  .drawer-cta .btn-big{flex:1}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .lb-nav{top:auto;bottom:18px;margin-top:0;width:48px;height:48px}
  .lb-nav.prev{left:calc(50% - 60px)}.lb-nav.next{right:calc(50% - 60px)}
  .lb figure{padding-bottom:76px}
}