:root{
  --bg:#0B0B0A; --panel:#171613; --ink:#EDEAE3; --mut:#B9B4A9; --dim:#8E8A80; --faint:#6d6960;
  --brass:#C8A15A; --rule:rgba(237,234,227,.10); --rule2:rgba(237,234,227,.18);
  --serif:'Instrument Serif',Georgia,serif; --sans:Archivo,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --stripe:repeating-linear-gradient(115deg,#171613 0 12px,#1D1C18 12px 24px);
  --pad:56px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;cursor:pointer}
a:hover{opacity:.7}
p{margin:0}
h1,h2,h3{margin:0;font-weight:400}
input,textarea,button,select{font-family:var(--sans)}
::placeholder{color:var(--faint)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.wrap{max-width:1280px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.mono{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase}
.mono-s{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.brass{color:var(--brass)}
.dim{color:var(--dim)}
.faint{color:var(--faint)}
.mut{color:var(--mut)}
h1{font:400 clamp(38px,6.2vw,88px)/1.02 var(--serif);letter-spacing:-.02em;text-wrap:balance}
h1.sm{font-size:clamp(34px,5.4vw,76px)}
h2{font:400 clamp(27px,3.4vw,36px)/1.05 var(--serif)}
.lede{font:400 clamp(16px,1.3vw,17px)/1.7 var(--sans);color:var(--mut);text-wrap:pretty}
.body{font:400 16px/1.75 var(--sans);color:var(--mut);text-wrap:pretty}
.rule-t{border-top:1px solid var(--rule)}
.rule-b{border-bottom:1px solid var(--rule)}
.stack{display:flex;flex-direction:column}

/* header */
.hdr{position:sticky;top:0;z-index:30;background:rgba(11,11,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-top:22px;padding-bottom:22px}
.logo{display:flex;align-items:baseline;gap:14px}
.logo .m{font:400 26px/1 var(--serif);letter-spacing:.16em}
.logo .t{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
/* logo mark: exactly the cap height of MIRA (26px Instrument Serif caps = 19px),
   bottom on the text baseline, so it reads as part of the wordmark */
.logo .mark{width:auto;height:19px;align-self:baseline;flex:none}
.nav{display:flex;gap:32px;justify-content:center;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.nav a{color:var(--mut);padding-bottom:3px;border-bottom:1px solid transparent}
.nav a[aria-current="page"]{color:var(--ink);border-color:var(--brass)}
.btn-ghost{justify-self:end;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(237,234,227,.35);padding:14px 20px;border-radius:2px;white-space:nowrap}
.btn-ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);opacity:1}
.btn{display:inline-block;background:var(--brass);color:var(--bg);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:20px 32px;border-radius:2px;border:none;cursor:pointer;text-align:center}
.btn:hover{opacity:.85}
.link-brass{align-self:flex-start;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);border-bottom:1px solid rgba(200,161,90,.5);padding-bottom:5px}

/* media slots */
.slot{position:relative;background:var(--stripe);overflow:hidden;display:flex;align-items:flex-end}
.slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player{position:relative;display:block;aspect-ratio:21/9;background:var(--stripe);overflow:hidden;cursor:pointer;width:100%;border:none;padding:0;text-align:left;color:inherit}
.player>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,10,.9) 0%,rgba(11,11,10,0) 60%)}
.player .hint{position:absolute;top:40px;left:16px;right:16px;text-align:center;font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.player .meta{position:absolute;left:0;right:0;bottom:0;padding:36px 40px;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;object-fit:cover}
.player.playing .scrim,.player.playing .meta,.player.playing .hint{display:none}
.play{width:54px;height:54px;border-radius:99px;border:1px solid rgba(237,234,227,.45);display:grid;place-items:center;font-size:13px;flex:none}
.pmeta{display:flex;align-items:center;gap:20px;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#C2BDB2;white-space:nowrap}
.ptitle{font:400 clamp(28px,3.4vw,46px)/1.04 var(--serif);letter-spacing:-.015em}

/* grids */
.g{display:grid;gap:24px}
.g-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.g-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px 72px}
.card{border:1px solid var(--rule2);padding:30px;display:flex;flex-direction:column;gap:16px}
.card.hi{border-color:var(--brass);background:rgba(200,161,90,.08);position:relative}
.card .tag{position:absolute;top:-11px;left:30px;background:var(--brass);color:var(--bg);font:600 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:6px 10px}
.card h3{font:400 27px/1.15 var(--serif)}
.card p{font:400 14px/1.7 var(--sans);color:var(--mut)}

.film{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:2px solid var(--rule2)}
.film:hover,.film.active{border-top-color:var(--brass);opacity:1}
.film .slot{aspect-ratio:16/9;cursor:pointer}
.film .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.film .name{font:400 19px/1.2 var(--serif)}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:44px}
.pillar{display:flex;flex-direction:column;gap:14px}
.pillar .w{font:400 clamp(34px,3.4vw,46px)/1 var(--serif);color:var(--brass)}

.srow{display:grid;grid-template-columns:44px minmax(180px,300px) 1fr;gap:24px;align-items:baseline;padding:26px 0;border-top:1px solid rgba(237,234,227,.14)}
.srow .t{font:400 clamp(26px,2.6vw,34px)/1.05 var(--serif)}
.srow .b{font:400 16px/1.7 var(--sans);color:var(--mut);text-wrap:pretty}

.spec{display:flex;flex-direction:column;border-top:1px solid rgba(237,234,227,.12)}
.spec div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid rgba(237,234,227,.12);font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.wlist div{padding:15px 0;border-top:1px solid rgba(237,234,227,.12);font:400 19px/1.4 var(--sans);color:#C2BDB2}
.wlist div:last-child{border-bottom:1px solid rgba(237,234,227,.12)}
blockquote{margin:0;display:flex;flex-direction:column;gap:22px}
blockquote p{font:400 clamp(24px,2.4vw,32px)/1.4 var(--serif);text-wrap:pretty}
blockquote footer{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}

/* strip */
.strip{overflow:hidden;width:100%}
.strip .track{display:flex;width:max-content;gap:14px;animation:miraScroll 96s linear infinite}
.strip:hover .track{animation-play-state:paused}
.strip .half{display:flex;gap:14px;padding-right:14px}
.strip .slot{width:270px;aspect-ratio:3/2;flex:none}
@keyframes miraScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.strip .track{animation:none}.strip{overflow-x:auto}}

/* form */
.form{background:var(--bg);border:1px solid var(--rule2);padding:40px;display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:9px}
.field label{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.field input,.field textarea{background:transparent;color:var(--ink);font:400 17px/1.5 var(--sans);outline:none;border:none;border-bottom:1px solid rgba(237,234,227,.25);padding:11px 0}
.field textarea{border:1px solid rgba(237,234,227,.25);padding:14px;font-size:16px;line-height:1.6;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--brass)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{font:500 11px/1 var(--mono);letter-spacing:.1em;padding:0 16px;min-height:44px;display:flex;align-items:center;border:1px solid rgba(237,234,227,.22);color:var(--mut);cursor:pointer;text-transform:none}
.chips input:checked+label{background:var(--brass);border-color:var(--brass);color:var(--bg)}
.chips input:focus-visible+label{outline:2px solid var(--brass);outline-offset:3px}
.hp{position:absolute;left:-9999px}
.note{font:400 13px/1.6 var(--sans);color:var(--dim)}
.sent{border:1px solid var(--brass);background:rgba(200,161,90,.08);padding:18px 20px;font:400 15px/1.6 var(--sans);color:#C2BDB2}
.contact-rows{display:flex;flex-direction:column;margin-top:12px;max-width:460px}
.contact-rows div{display:flex;gap:20px;padding:16px 0;border-top:1px solid rgba(237,234,227,.14);flex-wrap:wrap}
.contact-rows div:last-child{border-bottom:1px solid rgba(237,234,227,.14)}
.contact-rows dt,.contact-rows .k{font:500 10px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);width:100px;flex:none}
.contact-rows .v{font:400 17px/1.4 var(--sans)}

/* footer */
.ftr .wrap{padding-top:42px;padding-bottom:42px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.ftr .social{display:flex;gap:26px}
.ftr .social a{color:var(--mut)}

@media (max-width:900px){
  :root{--pad:26px}
  .hdr .wrap{grid-template-columns:1fr auto;gap:16px;row-gap:16px}
  .nav{justify-content:flex-start;grid-column:1/-1;gap:22px;flex-wrap:wrap;order:3;font-size:11px}
  .btn-ghost{justify-self:end}
  .player{aspect-ratio:16/9}
  .player .meta{padding:22px}
  .srow{grid-template-columns:32px 1fr;gap:10px 16px}
  .srow .b{grid-column:2}
  .form{padding:26px}
}
@media (max-width:560px){
  .player .hint{top:18px}
  .pmeta{font-size:9px;gap:12px}
  .btn{display:block}
}
/* ──────────────────────────────────────────────────────────────
   Mira — mobile layer.  APPEND THIS TO THE END OF assets/site.css
   Nothing above is modified; every rule here is inside a media
   query so the desktop site is untouched.
   Designed against 375px (iPhone SE / mini). Pairs with mobile-nav.js.
   ────────────────────────────────────────────────────────────── */

/* mobile-nav.js injects these on every page regardless of width; hide them
   by default so an unstyled button/bar never leaks onto desktop, then the
   media query below turns them back on under 760px. */
.mnav-btn, .mbar { display: none; }

@media (max-width: 760px) {
  :root { --pad: 20px; }

  /* type scale */
  h1 { font-size: 36px; line-height: 1.04; }
  h1.sm { font-size: 32px; }
  h2 { font-size: 27px; }
  .lede { font-size: 16px; line-height: 1.7; }

  /* ── header: logo + 44px menu button only ───────────────── */
  .hdr .wrap {
    grid-template-columns: 1fr auto;
    gap: 0;
    padding-top: 13px;
    padding-bottom: 13px;
    align-items: center;
  }
  .hdr .nav,
  .hdr .btn-ghost { display: none; }          /* live in the drawer / bottom bar */
  .logo { flex-direction: column; align-items: flex-start; gap: 3px; }
  .logo .m { font-size: 21px; }
  .logo .t { font-size: 8px; }
  /* logo mark sits left of the two-line wordmark */
  .logo { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 10px; row-gap: 3px; align-items: start; }
  /* spans the two-line lockup: top of the MIRA caps to the baseline of 'video productions' */
  .logo .mark { grid-row: 1 / span 2; height: 29px; margin-top: 2px; }
  .logo .m, .logo .t { grid-column: 2; }

  .mnav-btn {
    width: 44px; height: 44px; margin-right: -10px;
    display: grid; place-items: center; gap: 5px;
    background: none; border: none; padding: 0; cursor: pointer;
  }
  .mnav-btn span {
    display: block; width: 22px; height: 1.5px;
    background: var(--ink); grid-column: 1;
  }
  .mnav-btn span:first-child { align-self: end; margin-bottom: 2.5px; }
  .mnav-btn span:last-child { align-self: start; margin-top: 2.5px; }

  /* ── drawer ─────────────────────────────────────────────── */
  .mdrawer {
    position: fixed; inset: 0; z-index: 90;
    background: var(--bg); color: var(--ink);
    display: flex; flex-direction: column;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mdrawer[hidden] { display: none; }         /* fix: [hidden] alone loses to the display:flex rule above */
  .mdrawer .top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px var(--pad);
    border-bottom: 1px solid var(--rule);
  }
  .mdrawer .top .m { font: 400 21px/1 var(--serif); letter-spacing: .16em; }
  .mdrawer .close {
    width: 44px; height: 44px; margin-right: -10px;
    background: none; border: none; color: var(--ink);
    font: 400 22px/1 var(--sans); cursor: pointer;
  }
  .mdrawer .links {
    display: flex; flex-direction: column;
    padding: 20px var(--pad) 0;
  }
  .mdrawer .links a {
    display: flex; align-items: center; min-height: 58px;
    border-bottom: 1px solid rgba(237,234,227,.12);
    font: 400 32px/1 var(--serif);
    color: var(--mut);
  }
  .mdrawer .links a[aria-current="page"] { color: var(--ink); }
  .mdrawer .cta {
    display: flex; flex-direction: column; gap: 14px;
    padding: 24px var(--pad) 0;
  }
  .mdrawer .cta .note { font-size: 14px; }
  .mdrawer .social {
    margin-top: auto;
    display: flex; gap: 22px;
    padding: 24px var(--pad) 30px;
    border-top: 1px solid var(--rule);
    font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  }
  .mdrawer .social a { color: var(--mut); }
  body.mnav-open { overflow: hidden; }

  /* ── reel / project players: poster + tap, title BELOW ──── */
  .player {
    aspect-ratio: auto;
    display: grid; grid-template-rows: auto auto;
    overflow: visible;
  }
  .player > img {
    position: static;
    grid-row: 1;
    width: calc(100% + var(--pad) * 2);
    margin-left: calc(var(--pad) * -1);
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
  }
  .player::after {                        /* 64px play target over the poster */
    content: "\25B6";
    grid-row: 1; place-self: center; z-index: 2;
    width: 64px; height: 64px; border-radius: 99px;
    border: 1px solid rgba(237,234,227,.55);
    background: rgba(11,11,10,.42);
    backdrop-filter: blur(3px);
    display: grid; place-items: center;
    font-size: 15px; color: var(--ink);
  }
  .player .scrim,
  .player .hint { display: none; }
  .player .meta {
    position: static; grid-row: 2;
    padding: 14px 0 0;
    flex-direction: column; align-items: flex-start; gap: 7px;
  }
  .player .meta .stack { gap: 7px; }
  .player .ptitle { font-size: 28px; }
  .player .pmeta { font-size: 10px; gap: 12px; }
  .player .pmeta .play { display: none; }   /* the ::after badge is the target */
  .player.playing { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
  .player.playing::after { display: none; }

  /* ── grids ──────────────────────────────────────────────── */
  .g-4, .g-3, .g-2 { grid-template-columns: 1fr; gap: 22px; }
  .pillars { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .pillar .w { font-size: 30px; }
  .card { padding: 22px 18px; gap: 14px; }
  .card h3 { font-size: 24px; }
  .film .name { font-size: 20px; }

  /* ── stills strip → swipe row, no auto-motion ───────────── */
  .strip {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .strip::-webkit-scrollbar { display: none; }
  .strip .track { animation: none; width: max-content; }
  .strip .slot { width: 250px; scroll-snap-align: start; }

  /* ── forms: 17px inputs (no iOS zoom), 44px+ targets ────── */
  .form { padding: 22px 18px; gap: 20px; }
  .field input { font-size: 17px; padding: 11px 0; }
  .field textarea { font-size: 16px; min-height: 98px; }
  .chips label { min-height: 44px; padding: 0 14px; }
  .btn { display: block; width: 100%; padding: 19px 0; }
  .contact-rows div { flex-direction: column; gap: 4px; padding: 13px 0; }
  .contact-rows dt, .contact-rows .k { width: auto; line-height: 1.6; }
  .contact-rows .v { font-size: 17px; word-break: break-word; }

  /* ── sticky bottom CTA (injected by mobile-nav.js) ──────── */
  body.has-mbar { padding-bottom: 92px; }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(11,11,10,.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule2);
    padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 12px;
  }
  .mbar .btn { flex: 1; margin: 0; }
  .mbar .alt {
    width: 52px; height: 52px; flex: none;
    border: 1px solid rgba(237,234,227,.35); border-radius: 2px;
    display: grid; place-items: center;
    font: 500 9px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--mut); text-align: center;
  }

  /* ── misc tightening ───────────────────────────────────── */
  .srow { grid-template-columns: 28px 1fr; gap: 8px 14px; padding: 22px 0; }
  .srow .t { font-size: 26px; }
  blockquote p { font-size: 24px; }
  .ftr .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .wlist div { font-size: 17px; }
}

/* Very narrow (360px Android) */
@media (max-width: 380px) {
  h1 { font-size: 33px; }
  .mdrawer .links a { font-size: 29px; }
}