@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Open+Sans:wght@400;500;600&display=swap');

:root {
  --ink: #070709;
  --ink-soft: #111115;
  --paper: #f3f2ee;
  --white: #ffffff;
  --muted: #a7a7ad;
  --line: rgba(255,255,255,.16);
  --red: #f33b2f;
  --blue: #11add8;
  --max: 1500px;
  --pad: clamp(20px, 3vw, 54px);
  --header: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--white);
  font-family: 'Open Sans', Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
.skip-link { position:fixed; left:16px; top:12px; z-index:9999; transform:translateY(-140%); background:#fff; color:#070709; padding:12px 16px; font:600 11px 'Montserrat',sans-serif; letter-spacing:.08em; text-transform:uppercase; transition:transform .2s; }
.skip-link:focus { transform:none; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
button:focus-visible, a:focus-visible { border-radius:2px; }
img, video { display: block; width: 100%; }
.site-arrow { display:inline-block; width:1.2em; height:1.2em; flex:none; vertical-align:-.2em; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.menu-desktop-arrow { margin-left:5px; }
.service-row .site-arrow { display:block; width:26px; height:26px; }
.round-arrow .site-arrow { width:30px; height:30px; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--red); color: #fff; }

.shell { width: min(100%, var(--max)); margin: 0 auto; padding-inline: var(--pad); }
.eyebrow {
  margin: 0 0 18px;
  font: 600 11px/1 'Montserrat', sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .96;
}
.section { padding: clamp(82px, 11vw, 170px) 0; }
.section-rule { border-top: 1px solid var(--line); }

/* Header */
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header);
  display: flex;
  align-items: center;
  background: linear-gradient(to bottom, rgba(7,7,9,.82), rgba(7,7,9,0));
  transition: background .3s ease, backdrop-filter .3s ease;
}
.site-header,.site-header a { color:#fff; }
.site-header.scrolled { background: rgba(7,7,9,.82); backdrop-filter: blur(18px); }
.header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 11px; z-index: 102; }
.brand-mark { width: 21px; height: 37px; object-fit: contain; }
.brand-name {
  font: 800 17px/1 'Montserrat', sans-serif;
  letter-spacing: -.04em;
}
.brand-name span { color: var(--red); }
.nav { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 42px); }
.mobile-menu-heading,.mobile-menu-footer,.menu-link-arrow,.menu-link-light { display:none; }
.nav a {
  position: relative;
  font: 500 11px/1 'Montserrat', sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--blue); transition:right .25s ease; }
.nav a:hover::after, .nav a.active::after { right: 0; }
.nav .project-link { border: 1px solid rgba(255,255,255,.4); padding: 13px 18px; }
.menu-toggle { display:none; border:0; background:none; color:#fff; width:40px; height:40px; padding:8px; z-index:102; }
.menu-toggle span { display:block; height:1px; background:#fff; margin:7px 0; transition:transform .25s, opacity .25s; }
.menu-open .menu-toggle span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-open .menu-toggle span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* Cinematic opening sequence */
.hero-sequence { height:100svh; position:relative; background:#000; }
.showreel-anchor { position:absolute; top:105svh; left:0; width:1px; height:1px; }
.hero-stage { position:sticky; top:0; height:100svh; overflow:hidden; background:#000; }
.intro-layer,.reel-layer { position:absolute; inset:0; }
.intro-layer { z-index:2; opacity:1; }
.intro-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; background:#000 url('assets/images/hero-brand.webp') center center/cover no-repeat; }
.reel-layer { z-index:1; opacity:0; }
.intro-bg { display:none; position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; object-position:center; filter:blur(20px) saturate(1.05); opacity:.72; transform:scale(1.08); }
.intro-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; transform:scale(1.01); }
.intro-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.48) 0%,rgba(0,0,0,.06) 28%,rgba(0,0,0,.08) 55%,rgba(0,0,0,.78) 100%); }
.intro-content { position:relative; z-index:3; height:100%; padding-top:calc(var(--header) + 42px); padding-bottom:clamp(38px,5.5vw,72px); display:flex; flex-direction:column; justify-content:space-between; }
.intro-kicker { color:rgba(255,255,255,.78); text-shadow:0 2px 18px rgba(0,0,0,.65); }
.intro-bottom { display:flex; justify-content:space-between; align-items:end; gap:32px; border-top:1px solid rgba(255,255,255,.42); padding-top:20px; text-shadow:0 2px 18px rgba(0,0,0,.8); }
.hero-copy { max-width:560px; margin:0; font-size:clamp(16px,1.35vw,21px); }
.hero-meta { margin:0; font:600 11px/1.5 'Montserrat'; letter-spacing:.13em; text-transform:uppercase; white-space:nowrap; }
.scroll-cue { display:inline-flex; gap:10px; align-items:center; margin-top:10px; color:#e0e0e3; }
.scroll-cue i { width:42px; height:1px; background:var(--blue); display:block; }
.reel-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.04) 45%,rgba(0,0,0,.56)); }
.reel-ui { position:relative; z-index:2; height:100%; padding-top:calc(var(--header) + 42px); padding-bottom:clamp(38px,5.5vw,72px); display:flex; align-items:flex-end; justify-content:space-between; }
.reel-ui .eyebrow { margin:0; color:rgba(255,255,255,.76); text-shadow:0 2px 16px rgba(0,0,0,.7); }
.sound-toggle { border:1px solid rgba(255,255,255,.55); background:rgba(0,0,0,.28); backdrop-filter:blur(12px); color:#fff; padding:13px 18px; font:600 10px/1 'Montserrat'; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; transition:.25s; }
.sound-toggle:hover { background:#fff; color:#08080a; }
.hero-progress { position:absolute; z-index:5; left:0; right:0; bottom:0; height:2px; background:rgba(255,255,255,.14); }
.hero-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--red),var(--blue)); }

/* Work */
.work-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:clamp(36px,6vw,82px); }
.work-heading h2 { margin:0; font-size:clamp(44px,7vw,108px); }
.work-heading p { max-width:410px; margin:0; color:#b6b6ba; }
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(18px,2.2vw,34px); }
.project-card { position:relative; overflow:hidden; min-height:360px; background:var(--ink-soft); isolation:isolate; }
.project-card:nth-child(1), .project-card:nth-child(4) { grid-column:span 7; aspect-ratio:16/10; }
.project-card:nth-child(2), .project-card:nth-child(3) { grid-column:span 5; aspect-ratio:4/5; }
.project-card:nth-child(5), .project-card:nth-child(6) { grid-column:span 6; aspect-ratio:16/10; }
.project-card img { height:100%; object-fit:cover; background:#111115; transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .5s; }
.project-card::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.85), transparent 58%); z-index:1; transition:opacity .4s; }
.project-card:hover img { transform:scale(1.045); filter:saturate(1.07); }
.project-info { position:absolute; z-index:2; inset:auto 0 0; padding:clamp(20px,2vw,34px); display:flex; align-items:end; justify-content:space-between; gap:20px; }
.project-title { margin:0; font:600 clamp(25px,3.2vw,48px)/1 'Montserrat'; letter-spacing:-.05em; }
.project-meta { margin:9px 0 0; color:#d0d0d3; font-size:12px; }
.project-index { font:500 10px/1 'Montserrat'; letter-spacing:.15em; }
.view-pill { position:absolute; z-index:3; right:24px; top:24px; width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.94); color:#08080a; display:grid; place-items:center; font:600 10px 'Montserrat'; letter-spacing:.1em; text-transform:uppercase; transform:scale(0); transition:transform .3s ease; }
.project-card:hover .view-pill { transform:scale(1); }

/* Statement */
.statement { background:var(--paper); color:var(--ink); }
.statement-grid { display:grid; grid-template-columns:4fr 8fr; gap:clamp(30px,8vw,150px); align-items:start; }
.statement h2 { font-size:clamp(46px,7vw,112px); margin:0; max-width:1050px; }
.statement h2 strong { color:var(--red); font-weight:600; }
.statement-copy { max-width:700px; margin:45px 0 0 auto; font-size:clamp(17px,1.55vw,23px); }

/* Services preview */
.service-list { border-top:1px solid var(--line); }
.service-row { display:grid; grid-template-columns:80px 1fr auto; gap:25px; align-items:center; padding:clamp(24px,3vw,42px) 0; border-bottom:1px solid var(--line); }
.service-row span:first-child { color:var(--blue); font:500 10px 'Montserrat'; letter-spacing:.14em; }
.service-row h3 { margin:0; font:500 clamp(27px,3.8vw,58px)/1 'Montserrat'; letter-spacing:-.045em; transition:transform .25s, color .25s; }
.service-row .arrow { font-size:25px; color:var(--white); transition:transform .25s, color .25s; }
.service-row:hover h3 { transform:translateX(12px); color:var(--red); }
.service-row:hover .arrow { transform:translate(6px,-4px); color:var(--blue); }
.services-accordion .service-row { cursor:pointer; list-style:none; }
.services-accordion .service-row::-webkit-details-marker { display:none; }
.service-disclosure[open] > .service-row .arrow { transform:rotate(90deg); color:var(--blue); }
.service-disclosure-content { padding:28px 0 42px 105px; border-bottom:1px solid var(--line); }
.service-disclosure-content p { margin:0 0 22px; color:#bdbdc1; max-width:840px; }
.service-disclosure-content ul { list-style:none; padding:0; margin:0; columns:2; column-gap:24px; }
.service-disclosure-content li { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); color:#dfdfe1; font-size:13px; break-inside:avoid; }
@media (max-width:580px) {
  .service-disclosure-content { padding-left:60px; }
  .service-disclosure-content ul { columns:1; }
}

/* Clients */
.client-marquee { overflow:hidden; white-space:nowrap; border-block:1px solid var(--line); padding:24px 0; }
.client-track { display:inline-flex; gap:60px; animation:marquee 28s linear infinite; }
.client-track span { font:600 clamp(18px,2.2vw,34px)/1 'Montserrat'; color:#75757a; letter-spacing:-.04em; }
@keyframes marquee { to { transform:translateX(-50%); } }

/* About preview */
.about-preview { display:grid; grid-template-columns:7fr 5fr; gap:clamp(35px,7vw,110px); align-items:end; }
.about-visual { min-height:580px; display:flex; align-items:center; justify-content:center; background:transparent; }
.about-logo-lockup { display:flex; align-items:center; gap:clamp(18px,2vw,30px); }
.about-logo-lockup img { width:clamp(62px,6vw,94px); height:auto; object-fit:contain; }
.about-logo-lockup > span { font:800 clamp(42px,5.3vw,78px)/.9 'Montserrat',sans-serif; letter-spacing:-.055em; color:#fff; }
.about-logo-lockup .accent-i { color:var(--red); }
.about-copy h2 { font-size:clamp(44px,6vw,88px); margin:0 0 30px; }
.about-copy p { color:#bdbdc1; font-size:clamp(16px,1.35vw,20px); }
.text-link { display:inline-flex; gap:13px; align-items:center; margin-top:28px; font:600 11px 'Montserrat'; letter-spacing:.13em; text-transform:uppercase; }
.text-link::before { content:""; width:35px; height:1px; background:var(--red); transition:width .25s; }
.text-link:hover::before { width:58px; }

/* CTA / Footer */
.final-cta { padding:clamp(90px,14vw,210px) 0; background:var(--red); color:#fff; }
.final-cta h2 { margin:0; font-size:clamp(54px,10vw,155px); max-width:1300px; }
.final-cta .cta-line { display:flex; justify-content:space-between; align-items:center; gap:25px; margin-top:50px; border-top:1px solid rgba(255,255,255,.55); padding-top:20px; }
.round-arrow { width:76px; height:76px; border:1px solid rgba(255,255,255,.6); border-radius:50%; display:grid; place-items:center; font-size:30px; transition:background .25s,color .25s,transform .25s; }
.round-arrow:hover { background:#fff; color:var(--red); transform:rotate(-8deg); }
.footer { padding:42px 0 30px; }
.footer-top { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:35px; }
.footer h4 { margin:0 0 14px; font:600 10px 'Montserrat'; letter-spacing:.14em; text-transform:uppercase; color:#77777c; }
.footer p, .footer a { font-size:13px; color:#c2c2c5; }
.footer a:hover { color:var(--blue); }
.footer-recruitment { display:grid; gap:6px; margin-top:16px; }
.footer-recruitment small { font:600 9px 'Montserrat'; letter-spacing:.14em; color:var(--blue); }
.footer-recruitment a { width:max-content; max-width:100%; color:var(--red); font-size:12px; font-weight:600; line-height:1.45; text-decoration:none; }
.footer-recruitment a span { display:inline-block; margin-left:3px; transition:transform .2s ease; }
.footer-recruitment a:hover { color:#ff6b55; }
.footer-recruitment a:hover span { transform:translate(2px,-2px); }
.footer-recruitment a:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
.footer-bottom { display:flex; justify-content:space-between; gap:25px; margin-top:70px; padding-top:18px; border-top:1px solid var(--line); color:#77777c; font-size:11px; }

/* Inner pages */
.page-hero { padding:calc(var(--header) + 90px) 0 clamp(70px,9vw,130px); }
.page-hero h1 { margin:0; font-size:clamp(64px,12vw,190px); text-wrap:balance; }
.page-hero .lead { max-width:850px; margin:40px 0 0 auto; font-size:clamp(20px,2.1vw,32px); color:#c5c5c9; }
.page-hero .lead strong { color:var(--red); font-weight:500; }
.two-col { display:grid; grid-template-columns:4fr 8fr; gap:clamp(35px,8vw,140px); }
.prose { max-width:840px; }
.prose h2 { font:600 clamp(34px,4vw,60px)/1.05 'Montserrat'; letter-spacing:-.04em; margin:0 0 28px; }
.prose p { color:#bdbdc1; font-size:clamp(16px,1.35vw,20px); margin:0 0 24px; }
.values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:transparent; border:0; }
.value { background:var(--ink); padding:clamp(26px,3vw,42px); min-height:320px; display:flex; flex-direction:column; }
.value-icon { display:block; width:88px; height:88px; object-fit:contain; margin-inline:auto; }
.value h3 { margin:28px 0 14px; font:500 20px 'Montserrat'; }
.value p { margin:0; color:var(--muted); font-size:15px; line-height:1.65; max-width:26ch; }
.values-grid.reveal .value h3,
.values-grid.reveal .value p { opacity:0; transform:translateY(18px); transition:opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
.values-grid.reveal.visible .value h3,
.values-grid.reveal.visible .value p { opacity:1; transform:none; }
.values-grid.reveal.visible .value:nth-child(1) h3 { transition-delay:.18s; }
.values-grid.reveal.visible .value:nth-child(1) p { transition-delay:.28s; }
.values-grid.reveal.visible .value:nth-child(2) h3 { transition-delay:.25s; }
.values-grid.reveal.visible .value:nth-child(2) p { transition-delay:.35s; }
.values-grid.reveal.visible .value:nth-child(3) h3 { transition-delay:.32s; }
.values-grid.reveal.visible .value:nth-child(3) p { transition-delay:.42s; }
.values-grid.reveal.visible .value:nth-child(4) h3 { transition-delay:.39s; }
.values-grid.reveal.visible .value:nth-child(4) p { transition-delay:.49s; }

/* Services page */
.service-detail { display:grid; grid-template-columns:80px 5fr 5fr; gap:clamp(24px,4vw,70px); padding:clamp(45px,6vw,90px) 0; border-top:1px solid var(--line); }
.service-detail:last-child { border-bottom:1px solid var(--line); }
.service-detail .num { color:var(--blue); font:500 10px 'Montserrat'; letter-spacing:.14em; }
.service-detail h2 { margin:0; font:600 clamp(32px,4vw,60px)/1.02 'Montserrat'; letter-spacing:-.045em; }
.service-detail p { margin:0 0 22px; color:#bdbdc1; }
.service-detail ul { list-style:none; padding:0; margin:0; columns:2; column-gap:24px; }
.service-detail li { padding:8px 0; border-bottom:1px solid rgba(255,255,255,.08); color:#dfdfe1; font-size:13px; break-inside:avoid; }


/* Services — alternating two-column positioning */
.services-stagger-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(46px,6vw,110px);
}
.services-stagger-grid .service-detail {
  grid-template-columns:45px minmax(0,1fr);
  gap:clamp(18px,2vw,30px);
  align-content:start;
}
.services-stagger-grid .service-detail > div:last-child {
  grid-column:2;
}
@media (max-width:900px) {
  .services-stagger-grid { grid-template-columns:1fr; }
}

/* Contact */
.contact-grid { display:grid; grid-template-columns:4fr 7fr; gap:clamp(40px,9vw,150px); }
.contact-details h2 { font-size:clamp(35px,4.6vw,68px); margin:0 0 35px; }
.contact-block { padding:20px 0; border-top:1px solid var(--line); }
.contact-block small { display:block; color:#727277; font:600 10px 'Montserrat'; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.contact-block a { font-size:clamp(16px,1.5vw,21px); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field { position:relative; }
.field.full { grid-column:1/-1; }
.field label { display:block; margin-bottom:9px; color:#9a9a9f; font:500 10px 'Montserrat'; letter-spacing:.1em; text-transform:uppercase; }
.field input,.field select,.field textarea { width:100%; border:0; border-bottom:1px solid #404047; background:transparent; color:#fff; padding:10px 0 14px; outline:none; border-radius:0; }
.field select { color-scheme:dark; }
.field textarea { min-height:130px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:var(--blue); }
.submit-btn { margin-top:30px; border:0; background:var(--red); color:#fff; padding:18px 25px; font:600 11px 'Montserrat'; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background .25s, transform .25s; }
.submit-btn:hover { background:var(--blue); transform:translateY(-2px); }
.form-note { color:#77777c; font-size:11px; margin-top:16px; }

/* Project page */
.project-hero { min-height:100svh; position:relative; display:flex; align-items:end; overflow:hidden; }
.project-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.project-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.93),rgba(0,0,0,.06) 70%); }
.project-hero-content { position:relative; z-index:2; padding-bottom:clamp(45px,7vw,95px); }
.project-hero h1 { margin:0; max-width:1250px; font-size:clamp(52px,9vw,140px); overflow-wrap:anywhere; text-wrap:balance; }
.project-hero-meta { display:flex; justify-content:space-between; align-items:end; gap:25px; margin-top:24px; }
.project-hero-meta p { margin:0; color:#d0d0d3; }
.project-intro { display:grid; grid-template-columns:3fr 7fr 2fr; gap:clamp(30px,5vw,80px); }
.project-intro h2 { margin:0; font:600 11px 'Montserrat'; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.project-intro .big-copy { margin:0; font-size:clamp(24px,3vw,44px); line-height:1.25; letter-spacing:-.035em; }
.project-facts { margin:0; }
.project-facts dt { color:#727277; font:600 9px 'Montserrat'; letter-spacing:.13em; text-transform:uppercase; margin-bottom:5px; }
.project-facts dd { margin:0 0 22px; font-size:13px; color:#d0d0d3; }
.project-gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,2vw,28px); }
.gallery-frame { min-height:380px; background:#151519; overflow:hidden; }
.gallery-frame:nth-child(1) { grid-column:span 8; }
.gallery-frame:nth-child(2) { grid-column:span 4; }
.gallery-frame:nth-child(3) { grid-column:span 5; }
.gallery-frame:nth-child(4) { grid-column:span 7; }
.gallery-frame img { height:100%; object-fit:cover; background:#151519; }
.next-project { position:relative; min-height:70vh; display:flex; align-items:end; overflow:hidden; }
.next-project img { position:absolute; inset:0; height:100%; object-fit:cover; opacity:.58; transition:transform .7s; }
.next-project::after { content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.12)); }
.next-project:hover img { transform:scale(1.04); }
.next-project-content { position:relative; z-index:2; padding-bottom:60px; }
.next-project h2 { margin:0; font-size:clamp(50px,8vw,125px); }

/* Reveal */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.hero-entry > .shell > .eyebrow,
.hero-entry > .shell > h1,
.hero-entry > .shell > .lead { animation:hero-text-enter 1.35s cubic-bezier(.2,.7,.2,1) .35s both; }
.hero-entry > .shell > h1 { animation-delay:.5s; }
.hero-entry > .shell > .lead { animation-delay:.7s; }
@keyframes hero-text-enter {
  from { opacity:0; transform:translateY(40px); }
  to { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-entry > .shell > .eyebrow,
  .hero-entry > .shell > h1,
  .hero-entry > .shell > .lead { animation:none; }
}

@media (max-width: 900px) {
  :root { --header:70px; }
  .menu-toggle { display:block; }
  .nav {
    position:fixed; z-index:99; inset:0; width:100%; height:100vh; height:100dvh;
    padding:calc(var(--header) + env(safe-area-inset-top, 0px) + 22px) var(--pad) max(28px, env(safe-area-inset-bottom, 0px));
    background:var(--ink); flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0;
    overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
    opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease;
  }
  .menu-open .site-header { height:calc(var(--header) + env(safe-area-inset-top, 0px)); padding-top:env(safe-area-inset-top, 0px); background:var(--ink); backdrop-filter:none; -webkit-backdrop-filter:none; transition:none; }
  .menu-open .header-inner::after { content:""; position:absolute; left:var(--pad); right:var(--pad); bottom:0; height:1px; background:var(--line); }
  .menu-open .nav { opacity:1; visibility:visible; pointer-events:auto; }
  .mobile-menu-heading { display:block; flex-shrink:0; margin:0 0 18px; color:var(--muted); font:500 10px/1.5 'Montserrat',sans-serif; letter-spacing:.2em; text-transform:uppercase; }
  .nav a { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; min-height:68px; padding:16px 4px; border-bottom:1px solid var(--line); font:500 clamp(28px,8vw,36px)/1.2 'Montserrat',sans-serif; letter-spacing:-.035em; text-transform:none; }
  .nav a { transition:color .2s ease; -webkit-tap-highlight-color:transparent; }
  .nav a::after { content:none; }
  .nav .menu-desktop-arrow { display:none; }
  .menu-link-label { position:relative; z-index:1; }
  .menu-link-arrow { display:block; flex:none; width:24px; height:24px; margin-left:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
  .menu-link-light { display:block; position:absolute; left:0; right:0; bottom:0; height:24px; pointer-events:none; opacity:0; transition:opacity .2s ease; }
  .menu-link-light::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 110%,rgba(17,173,216,.22),transparent 72%); }
  .menu-link-light::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 55%,transparent); transform:scaleX(0); transform-origin:left; transition:transform .2s ease; }
  .nav a:is(:active,:focus-visible,.is-selected) { color:var(--blue); }
  .nav a:is(:active,:focus-visible,.is-selected) .menu-link-arrow { transform:translate(3px,-3px); }
  .nav a:is(:active,:focus-visible,.is-selected) .menu-link-light { opacity:1; }
  .nav a:is(:active,:focus-visible,.is-selected) .menu-link-light::after { transform:scaleX(1); }
  .nav a.active { color:var(--blue); padding-left:18px; }
  .nav a.active::before { content:""; position:absolute; left:0; top:50%; width:9px; height:2px; background:var(--blue); }
  .nav .project-link { justify-content:center; min-height:54px; margin-top:28px; padding:18px 12px; border:0; background:var(--red); color:#fff; font:600 11px/1.4 'Montserrat',sans-serif; letter-spacing:.12em; text-transform:uppercase; }
  .nav .project-link::after { content:none; }
  .nav .project-link .menu-link-arrow { width:20px; height:20px; margin-left:10px; }
  .nav .project-link:is(:active,:focus-visible,.is-selected) { color:#fff; }
  .nav .project-link .menu-link-light { display:none; }
  .mobile-menu-footer { display:block; flex-shrink:0; margin:28px 0 0; color:var(--muted); font:400 12px/1.8 'Open Sans',sans-serif; }
  .intro-bottom,.work-heading,.project-hero-meta { align-items:start; flex-direction:column; }
  .hero-meta { white-space:normal; }
  .work-grid { grid-template-columns:1fr; }
  .project-card:nth-child(n) { grid-column:auto; aspect-ratio:4/5; min-height:0; }
  .statement-grid,.about-preview,.two-col,.contact-grid { grid-template-columns:1fr; }
  .statement-copy { margin-left:0; }
  .about-visual { min-height:320px; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .values-grid { grid-template-columns:1fr 1fr; }
  .service-detail { grid-template-columns:45px 1fr; }
  .service-detail > div:last-child { grid-column:2; }
  .project-intro { grid-template-columns:1fr; }
  .project-gallery { grid-template-columns:1fr; }
  .gallery-frame:nth-child(n) { grid-column:auto; min-height:350px; }
}

@media (max-width:900px) and (hover:hover) and (pointer:fine) {
  .nav a:not(.project-link):hover { color:var(--blue); }
  .nav a:hover .menu-link-arrow { transform:translate(3px,-3px); }
  .nav a:hover .menu-link-light { opacity:1; }
  .nav a:hover .menu-link-light::after { transform:scaleX(1); }
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference) {
  .menu-open .nav > a { animation:mobile-menu-enter .25s cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--menu-order,0) * 20ms); }
  .menu-open .mobile-menu-heading,.menu-open .mobile-menu-footer { animation:mobile-menu-enter .3s ease backwards; }
}
@keyframes mobile-menu-enter {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}

@media (max-width: 580px) {
  .intro-video { background-image:url('assets/images/hero-mobile-poster.jpg'); }
  .intro-content { padding-top:calc(var(--header) + 24px); padding-bottom:28px; }
  .intro-bg { display:block; }
  .intro-art { inset:50% auto auto -8%; width:116%; height:auto; max-height:52svh; object-fit:contain; object-position:center; transform:translateY(-50%); filter:drop-shadow(0 18px 44px rgba(0,0,0,.42)); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 91%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 9%,#000 91%,transparent 100%); }
  .intro-shade { background:linear-gradient(180deg,rgba(0,0,0,.52),rgba(0,0,0,.10) 36%,rgba(0,0,0,.20) 62%,rgba(0,0,0,.88)); }
  .intro-kicker { max-width:285px; line-height:1.35; }
  .intro-bottom { gap:18px; }
  .hero-copy { max-width:330px; font-size:15px; }
  .reel-ui { padding-top:calc(var(--header) + 24px); padding-bottom:28px; }
  .view-pill { display:none; }
  .service-row { grid-template-columns:35px 1fr auto; }
  .footer-top,.values-grid,.form-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; }
  .field.full { grid-column:auto; }
  .service-detail ul { columns:1; }
  .project-hero h1 { font-size:clamp(42px,13vw,66px); line-height:.98; }
  .project-hero-content { padding-bottom:34px; }
  .project-quote { font-size:clamp(40px,13vw,70px); }
  .next-project h2 { font-size:clamp(42px,13vw,72px); }
}


@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
  .hero-sequence { height:100svh; }
  .intro-layer { opacity:1!important; transform:none!important; }
  .reel-layer,.hero-progress { display:none!important; }
  .client-track { animation:none; }
}

/* Enhanced project case study */
.project-role-copy { margin:30px 0 0; max-width:780px; color:#a9a9ae; font-size:clamp(16px,1.3vw,20px); }
.project-film-section { padding:0; background:#000; }
.project-film-wrap { position:relative; width:100%; min-height:70vh; background:#000; overflow:hidden; }
.project-film { width:100%; height:min(86vh,900px); object-fit:cover; background:#000; }
.project-sound-toggle { position:absolute; right:var(--pad); bottom:var(--pad); z-index:2; border:1px solid rgba(255,255,255,.55); background:rgba(7,7,9,.62); backdrop-filter:blur(12px); color:#fff; padding:12px 17px; font:600 10px 'Montserrat'; letter-spacing:.13em; text-transform:uppercase; cursor:pointer; }
.project-quote-section { background:var(--paper); color:var(--ink); }
.project-quote { max-width:1200px; margin:0; font-size:clamp(48px,8vw,125px); }
.project-gallery-expanded .gallery-frame:nth-child(1) { grid-column:span 12; aspect-ratio:16/8; }
.project-gallery-expanded .gallery-frame:nth-child(2) { grid-column:span 5; aspect-ratio:4/5; }
.project-gallery-expanded .gallery-frame:nth-child(3) { grid-column:span 7; aspect-ratio:16/11; }
.project-gallery-expanded .gallery-frame:nth-child(4) { grid-column:span 7; aspect-ratio:16/10; }
.project-gallery-expanded .gallery-frame:nth-child(5) { grid-column:span 5; aspect-ratio:4/5; }
.project-gallery-expanded .gallery-frame { min-height:0; }
.project-credits { display:grid; grid-template-columns:3fr 9fr; gap:clamp(35px,8vw,140px); }
.credits-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid var(--line); }
.credits-grid > div { padding:24px 0; border-bottom:1px solid var(--line); }
.credits-grid > div:nth-child(odd) { padding-right:30px; }
.credits-grid small { display:block; margin-bottom:8px; color:#727277; font:600 9px 'Montserrat'; letter-spacing:.13em; text-transform:uppercase; }
.credits-grid p { margin:0; color:#e2e2e4; }

@media (max-width:900px) {
  .project-film { height:64vh; }
  .project-gallery-expanded .gallery-frame:nth-child(n) { grid-column:auto; aspect-ratio:4/5; }
  .project-gallery-expanded .gallery-frame:first-child { aspect-ratio:16/10; }
  .project-credits { grid-template-columns:1fr; }
}
@media (max-width:580px) {
  .project-film-wrap { min-height:0; }
  .project-film { height:auto; aspect-ratio:16/9; object-fit:contain; }
  .credits-grid { grid-template-columns:1fr; }
}
.project-film-wrap:has(.project-film[style*="contain"]) {
  background:
    radial-gradient(circle at 30% 35%, rgba(17,173,216,.16), transparent 35%),
    radial-gradient(circle at 70% 65%, rgba(243,59,47,.12), transparent 38%),
    #030305;
}

/* Still-led project presentation */
.project-film-image { object-fit:cover; transform:scale(1.01); animation:projectStillDrift 14s ease-in-out infinite alternate; }
.project-still-label { position:absolute; left:var(--pad); bottom:var(--pad); z-index:2; padding:11px 15px; border:1px solid rgba(255,255,255,.42); background:rgba(7,7,9,.58); backdrop-filter:blur(12px); color:#fff; font:600 9px 'Montserrat'; letter-spacing:.15em; text-transform:uppercase; }
@keyframes projectStillDrift { from { transform:scale(1.01); } to { transform:scale(1.055); } }
@media (max-width:580px) {
  .project-film-image { height:72vh; aspect-ratio:auto; object-fit:cover; object-position:center center; }
}
@media (prefers-reduced-motion:reduce) { .project-film-image { animation:none; } }

@media (min-width:581px) and (max-aspect-ratio: 4/5) {
  .intro-bg { display:block; }
  .intro-art { inset:50% auto auto -5%; width:110%; height:auto; max-height:62svh; object-fit:contain; transform:translateY(-50%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%); }
}
@media (hover:none) {
  .view-pill { display:none; }
  .project-card:hover img,.next-project:hover img { transform:none; }
}
@supports (content-visibility:auto) {
  main > .section, .client-marquee, .final-cta, .footer { content-visibility:auto; contain-intrinsic-size:900px; }
  .hero-sequence, .project-hero, .page-hero { content-visibility:visible; }
}
.noscript-note{position:relative;z-index:120;margin-top:var(--header);padding:12px var(--pad);background:#f33b2f;color:#fff;font-size:13px;text-align:center;}

/* Secure CRM form */
.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}
.submit-btn[disabled] { cursor: wait; opacity: .72; transform: none; }
.form-status { min-height: 1.5em; margin-top: 16px; font-size: 13px; line-height: 1.5; }
.form-status.success { color: #76d69b; }
.form-status.error { color: #ff8f88; }

/* ===== Selected Work — cinematic video portfolio / WORKFILM-V1 ===== */
.work-reel { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.2vw,34px); }
.work-film { position:relative; min-height:clamp(460px,58vw,760px); overflow:hidden; background:#101014; color:#fff; isolation:isolate; opacity:0; transform:translateY(54px) scale(.975); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.05s cubic-bezier(.2,.7,.2,1); }
.work-film--wide { grid-column:1 / -1; min-height:clamp(520px,60vw,840px); }
.work-film.is-visible { opacity:1; transform:none; }
.work-film-media { position:absolute; inset:0; overflow:hidden; clip-path:inset(6% 0 6% 0); transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1); }
.work-film.is-visible .work-film-media { clip-path:inset(0); }
.work-film-video { width:100%; height:100%; object-fit:cover; background:#111; transform:scale(1.045); transition:transform 1.5s cubic-bezier(.2,.7,.2,1), filter .55s ease; will-change:transform; }
.work-film.is-visible .work-film-video { transform:scale(1); }
.work-film:hover .work-film-video { transform:scale(1.025); filter:saturate(1.05) contrast(1.03); }
.work-film-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.02) 42%,rgba(0,0,0,.62) 100%); transition:background .4s ease; }
.work-film:hover .work-film-shade { background:linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.01) 42%,rgba(0,0,0,.52) 100%); }
.work-film-top,.work-film-bottom { position:absolute; z-index:2; left:0; right:0; padding:clamp(22px,2.4vw,38px); display:flex; justify-content:space-between; align-items:flex-end; gap:22px; pointer-events:none; }
.work-film-top { top:0; align-items:center; font:600 10px/1.2 'Montserrat'; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.86); transform:translateY(-10px); opacity:0; transition:.8s .18s; }
.work-film-bottom { bottom:0; transform:translateY(18px); opacity:0; transition:.85s .22s; }
.work-film.is-visible .work-film-top,.work-film.is-visible .work-film-bottom { transform:none; opacity:1; }
.work-film-bottom h3 { margin:0; font:600 clamp(34px,5vw,82px)/.95 'Montserrat'; letter-spacing:-.055em; max-width:82%; }
.work-film-arrow { font:600 10px/1 'Montserrat'; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.8); transform:translateX(0); transition:transform .3s ease; }
.work-film:hover .work-film-arrow { transform:translateX(7px); }
@media (max-width:900px) {
  .work-reel { grid-template-columns:1fr; }
  .work-film,.work-film--wide { grid-column:auto; min-height:min(72svh,680px); }
  .work-film-bottom h3 { max-width:100%; font-size:clamp(34px,9vw,58px); }
  .work-film-arrow { display:none; }
}
@media (max-width:580px) {
  .work-film,.work-film--wide { min-height:62svh; }
  .work-film-top,.work-film-bottom { padding:20px; }
  .work-film-top span:last-child { max-width:62%; text-align:right; }
}
@media (prefers-reduced-motion:reduce) {
  .work-film { opacity:1!important; transform:none!important; }
  .work-film-media { clip-path:none!important; }
  .work-film-video { transform:none!important; }
  .work-film-top,.work-film-bottom { opacity:1!important; transform:none!important; }
}