/* sightNsound website mock, round 2. One stylesheet for every page and variant. */

:root{
  --stage:#080808; --case:#141416; --edge:#26262A; --alu:#9A9DA3;
  --white:#F4F2EE; --tape:#ECE7DC; --tile:#EDEDEB; --ink:#111112;
  --red:#E4191F; --red-deep:#B3121A;
  --display:"Archivo",system-ui,sans-serif; --body:"Instrument Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --col:1240px; --gut:32px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stage);color:var(--white);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.col{max-width:var(--col);margin:0 auto;padding:0 var(--gut)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.muted{color:var(--alu)}

/* ---------- navigation (d&b-style: thin utility row + main row) ---------- */
.nav{position:sticky;top:0;z-index:40;background:#000;border-bottom:1px solid #1a1a1d}
.nav.over{position:absolute;left:0;right:0;top:32px;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav .col{display:flex;align-items:center;height:56px;gap:32px}
.nav .logo img{height:22px;width:auto}
.nav .links{display:flex;gap:28px;margin-left:auto;font:500 14px/1 var(--body)}
.nav .links a{color:#d9d6d0}
.nav .links a:hover,.nav .links a.on{color:#fff}
.nav .links a.on{box-shadow:0 1px 0 var(--red)}
.nav .act{display:flex;gap:10px;align-items:center}
.qbtn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid #2c2c31;border-radius:999px;font:500 14px/1 var(--body);color:#e8e5df;background:transparent;cursor:pointer}
.qbtn .c{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#2a2a2e;color:#fff;font:600 12px/20px var(--body);text-align:center}
.qbtn.has .c{background:var(--red)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 18px;border-radius:999px;background:var(--white);color:var(--ink);font:600 14px/1 var(--body);border:0;cursor:pointer}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{background:transparent;color:var(--white);border:1px solid rgba(244,242,238,.4)}
.btn.lg{height:48px;padding:0 24px;font-size:15px}
.burger{display:none;width:38px;height:38px;border-radius:999px;border:1px solid #2c2c31;background:transparent;color:#fff}

/* ---------- WhatsApp pill (always visible, quiet) ---------- */
.wa{position:fixed;right:22px;bottom:22px;z-index:50;display:flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 14px;border-radius:999px;background:#fff;color:var(--ink);font:600 14px/1 var(--body);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.wa i{width:10px;height:10px;border-radius:50%;background:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,.18)}

/* ---------- hero A: immersive, headline bottom-left (Devialet) ---------- */
.hero{position:relative;height:calc(100vh - 56px);min-height:600px;max-height:940px;overflow:hidden;background:#000}
.reel,.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel img{opacity:0;animation:reel 18s infinite;transform-origin:60% 50%}
.reel img:nth-child(2){animation-delay:6s}.reel img:nth-child(3){animation-delay:12s}
@keyframes reel{0%{opacity:0;transform:scale(1.04)}6%{opacity:1}33%{opacity:1}40%{opacity:0;transform:scale(1.14)}100%{opacity:0}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 48%,rgba(0,0,0,.82) 100%)}
.hero .copy{position:absolute;left:0;right:0;bottom:112px;z-index:2}
.hero .copy .col{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.hero h1{margin:0;font:300 64px/1.02 var(--display);font-stretch:112%;letter-spacing:-.015em;max-width:15ch}
.hero h1 b{font-weight:800;display:block}
.hero .side{display:flex;flex-direction:column;align-items:flex-end;gap:14px;padding-bottom:6px}
.hero .tag{font:500 14px/1.4 var(--body);color:#cfccc6;text-align:right}
.reel-label{position:absolute;top:24px;right:var(--gut);z-index:2;font:500 11px/1 var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.55)}

/* hero B: floating card over the stage (Nothing) */
.hero.b h1{font-size:56px;max-width:18ch}
.float{position:absolute;right:var(--gut);bottom:112px;z-index:3;width:330px;padding:18px;border-radius:18px;background:rgba(20,20,22,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.08)}
.float .mono{color:var(--alu)}
.float h3{margin:8px 0 6px;font:700 20px/1.2 var(--display);font-stretch:112%}
.float p{margin:0 0 14px;color:#cfccc6;font-size:14px}
.float .row{display:flex;gap:8px}

/* ---------- statement band (d&b: black then calm white) ---------- */
.band{background:var(--white);color:var(--ink)}
.band .col{padding-top:104px;padding-bottom:104px;display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.band h2{margin:0;font:800 40px/1.08 var(--display);font-stretch:112%;letter-spacing:-.01em}
.band p{margin:0 0 16px;font-size:19px;line-height:1.55;color:#2a2a2c;max-width:56ch}
.band .types{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.chip{display:inline-flex;height:32px;align-items:center;padding:0 14px;border-radius:999px;border:1px solid #d6d2ca;font:500 14px/1 var(--body);color:#2a2a2c;background:transparent}
.dark .chip{border-color:#2c2c31;color:#d9d6d0}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dark .chip.on{background:var(--white);color:var(--ink);border-color:var(--white)}

/* ---------- sections ---------- */
.sec{padding:104px 0}
.sec.light{background:var(--white);color:var(--ink)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px}
.head h2{margin:0;font:800 40px/1.05 var(--display);font-stretch:112%;letter-spacing:-.01em}
.head p{margin:8px 0 0;color:var(--alu);max-width:52ch}
.light .head p{color:#5b5b5f}
.link{font:600 15px/1 var(--body);border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap}

/* services: three plain tiles */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc a{position:relative;display:block;border-radius:4px;overflow:hidden;aspect-ratio:4/5;background:#111}
.svc img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.svc a:hover img{transform:scale(1.04)}
.svc .t{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0))}
.svc h3{margin:0 0 4px;font:700 24px/1.1 var(--display);font-stretch:112%}
.svc p{margin:0;color:#cfccc6;font-size:14px}

/* ---------- gear catalogue (Teenage Engineering store) ---------- */
.cat-top{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:28px 0 22px;border-bottom:1px solid var(--line,#26262A)}
.light .cat-top{--line:#dcd9d2}
.filters{display:flex;flex-wrap:wrap;gap:6px 22px;font:500 15px/1.6 var(--body)}
.filters a{color:#8d8d92}
.light .filters a{color:#9a9894}
.filters a.on{color:inherit}
.count{font:500 14px/1 var(--body);color:var(--alu);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 14px;padding-top:24px}
.tile{grid-column:span 3;display:flex;flex-direction:column;gap:12px}
.tile.third{grid-column:span 2}
.tile .ph{position:relative;aspect-ratio:17/10;background:var(--tile);border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tile .ph img{width:100%;height:100%;object-fit:contain}
.tile .ph.photo img{object-fit:cover}
.tile .ph .pill{position:absolute;left:14px;top:14px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:3px;background:rgba(255,255,255,.85);color:var(--ink)}
.tile .ph.photo .pill{background:rgba(0,0,0,.55);color:#fff}
.tile .meta{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tile .nm{font:500 16px/1.25 var(--body)}
.tile .rl{font:400 14px/1.35 var(--body);color:#8d8d92;margin-top:2px}
.light .tile .rl{color:#7b7a76}
.tile .qty{font:400 13px/1 var(--mono);color:#6c6c71;margin-top:6px}
.plus{flex:none;position:relative;width:32px;height:32px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:transparent;color:inherit;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.plus i,.step i{position:absolute;left:50%;top:50%;width:11px;height:1px;background:currentColor;transform:translate(-50%,-50%)}
.plus i::after,.step i::after{content:"";position:absolute;left:5px;top:-5px;width:1px;height:11px;background:currentColor}
.step i.m::after{display:none}
.plus:hover{background:#fff;color:#111;border-color:#fff;transform:rotate(90deg)}
.light .plus{border-color:#cfcbc3}
.step{flex:none;display:none;align-items:center;height:32px;padding:0 2px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;font:500 13px/1 var(--mono)}
.step button{position:relative;width:28px;height:28px;border:0;border-radius:999px;background:transparent;color:#cfccc6;cursor:pointer;transition:background .15s,color .15s}
.step button:hover{background:rgba(255,255,255,.1);color:#fff}
.step>span{min-width:22px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:5px}
.step>span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.tile.added .plus{display:none}.tile.added .step{display:flex}

/* dark tiles variant */
.dark-tiles .tile .ph{background:#161618}
.dark-tiles .tile .ph:not(.photo){background:#3A3B3F}
.tile.full{grid-column:span 6}
.tile.full .ph{aspect-ratio:34/10}

/* ---------- item page ---------- */
.crumbs{font:500 13px/1 var(--body);color:var(--alu);padding:28px 0 0}
.crumbs a:hover{color:var(--white)}
.item{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;padding:28px 0 96px;align-items:start}
.item .stage{background:var(--tile);border-radius:2px;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.item .stage img{width:100%;height:100%;object-fit:contain}
.item .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.item .thumbs div{aspect-ratio:4/3;background:var(--tile);border-radius:2px;overflow:hidden}
.item .thumbs img{width:100%;height:100%;object-fit:cover}
.item h1{margin:0;font:800 44px/1.05 var(--display);font-stretch:112%;letter-spacing:-.01em}
.item .role{margin:8px 0 22px;color:#cfccc6;font-size:18px}
.item p{color:#cfccc6;margin:0 0 18px}
.specs{border-top:1px solid var(--edge);margin:22px 0}
.specs div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-bottom:1px solid var(--edge);font-size:15px}
.specs dt,.specs .k{color:var(--alu)}
.addrow{display:flex;gap:10px;align-items:center;margin:24px 0}
.includes{margin-top:34px}
.includes h4{margin:0 0 12px;font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--alu)}
.inc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.inc a{background:#121214;border:1px solid var(--edge);border-radius:4px;padding:10px;font-size:13px}
.inc .ph{aspect-ratio:4/3;background:var(--tile);border-radius:2px;overflow:hidden;margin-bottom:8px}
.inc img{width:100%;height:100%;object-fit:cover}

/* ---------- quote list ---------- */
.quote{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;padding:40px 0 104px;align-items:start}
.quote h1{margin:0 0 6px;font:800 44px/1.05 var(--display);font-stretch:112%}
.qlist{border-top:1px solid var(--edge)}
.qrow{display:grid;grid-template-columns:96px 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--edge)}
.qrow .ph{aspect-ratio:4/3;background:var(--tile);border-radius:2px;overflow:hidden}
.qrow .ph img{width:100%;height:100%;object-fit:cover}
.qrow .nm{font:500 16px/1.3 var(--body)}
.qrow .rl{font-size:14px;color:var(--alu)}
.qrow .step{display:flex}
.qrow .rm{font-size:13px;color:var(--alu);margin-top:6px;display:inline-block}
.qempty{padding:26px 0;color:var(--alu)}
.form{background:#101012;border:1px solid var(--edge);border-radius:14px;padding:28px}
.form h3{margin:0 0 4px;font:700 22px/1.2 var(--display);font-stretch:112%}
.form .sub{margin:0 0 22px;color:var(--alu);font-size:14px}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font:500 13px/1 var(--body);color:#cfccc6;margin-bottom:8px}
.fld input,.fld textarea,.fld select{width:100%;height:46px;border-radius:8px;border:1px solid #2c2c31;background:#0a0a0b;color:#fff;padding:0 14px;font:400 15px var(--body)}
.fld textarea{height:96px;padding:12px 14px;resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none;border-color:#6b6b72}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{cursor:pointer}
.sendrow{display:flex;gap:10px;margin-top:20px}
.sendrow .btn{flex:1}
.note{font-size:13px;color:var(--alu);margin-top:14px}
.todo{color:#e7b64a}

/* drawer variant */
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;z-index:60;background:#0e0e10;border-left:1px solid var(--edge);transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--edge)}
.drawer .dh b{font:700 20px/1 var(--display);font-stretch:112%}
.drawer .db{flex:1;overflow:auto;padding:0 24px}
.drawer .df{padding:18px 24px;border-top:1px solid var(--edge);display:flex;flex-direction:column;gap:10px}
.drawer .qrow{grid-template-columns:72px 1fr auto}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}

/* ---------- events ---------- */
.ev-list{display:flex;flex-direction:column}
.ev{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;padding:28px 0;border-top:1px solid var(--edge);align-items:center}
.ev .ph{aspect-ratio:16/9;overflow:hidden;background:#111}
.ev img{width:100%;height:100%;object-fit:cover}
.ev .kind{color:var(--alu)}
.ev h3{margin:10px 0 10px;font:800 32px/1.08 var(--display);font-stretch:112%}
.ev p{margin:0 0 14px;color:#cfccc6}
.kit{font:400 13px/1.6 var(--mono);color:var(--alu)}
.ev3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ev3 .card{display:block}
.ev3 .ph{aspect-ratio:4/5;overflow:hidden;background:#111}
.ev3 img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ev3 a:hover img{transform:scale(1.03)}
.ev3 .cap{padding:14px 0 0}
.ev3 .cap b{display:block;font:700 20px/1.2 var(--display);font-stretch:112%}
.ev3 .cap span{font-size:14px;color:var(--alu)}
.center-head{text-align:center;margin-bottom:40px}
.center-head h2{margin:10px 0 0;font:800 44px/1.05 var(--display);font-stretch:112%}
.center-head p{margin:12px auto 0;color:var(--alu);max-width:52ch}

/* ---------- crew (Rat Sound) ---------- */
.crew{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.crew.five{grid-template-columns:repeat(5,1fr)}
.crew .p{background:#111113}
.crew .ph{aspect-ratio:1/1;overflow:hidden;background:#1a1a1d;display:flex;align-items:center;justify-content:center}
.crew .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.crew .ph .ini{font:800 56px/1 var(--display);font-stretch:112%;color:#3a3a40}
.crew .cap{padding:14px 16px 18px}
.crew b{display:block;font:700 18px/1.2 var(--display);font-stretch:112%}
.crew span{font-size:14px;color:var(--alu)}
.light .crew .p{background:#fff}
.light .crew .ph{background:#e7e4de}

/* ---------- contact strip + footer ---------- */
.cta{padding:96px 0;border-top:1px solid #18181b}
.cta .col{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:end}
.cta h2{margin:0;font:300 52px/1.04 var(--display);font-stretch:112%;letter-spacing:-.015em}
.cta h2 b{font-weight:800;display:block}
.ways{display:grid;gap:0;border-top:1px solid var(--edge)}
.ways a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--edge);font-size:17px}
.ways a span{color:var(--alu);font-size:14px}
footer{padding:40px 0 60px;border-top:1px solid #18181b;color:var(--alu);font-size:14px}
footer .col{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .logo img{height:22px}
.mockbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:rgba(236,231,220,.95);color:#222;font:500 11px/26px var(--mono);letter-spacing:.04em;text-align:center}

/* ---------- phone ---------- */
.mbar{display:none;position:fixed;left:0;right:0;bottom:26px;z-index:45;gap:8px;padding:10px 12px;background:rgba(8,8,8,.92);border-top:1px solid #1d1d20;backdrop-filter:blur(12px)}
.mbar .btn{flex:1;height:44px}

@media (max-width:900px){
  :root{--gut:16px}
  .util{display:none}
  .nav.over{top:0}
  .nav .col{height:60px;gap:12px}
  .nav .links{display:none}
  .nav .act .btn.red{display:none}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav .logo img{height:22px}
  .hero{height:88vh;min-height:560px}
  .hero .copy{bottom:96px}
  .hero .copy .col{flex-direction:column;align-items:flex-start;gap:18px}
  .hero .side{align-items:flex-start}
  .hero .tag{text-align:left}
  .hero h1,.hero.b h1{font-size:40px}
  .reel-label{top:76px}
  .float{left:var(--gut);right:var(--gut);width:auto;bottom:88px}
  .hero.b .copy{bottom:330px}
  .hero.b h1{font-size:34px}
  .float{bottom:96px}
  .wa{display:none}
  .mockbar{font-size:9px;line-height:26px;white-space:nowrap;overflow:hidden}
  .hero .copy{bottom:120px}
  body{padding-bottom:70px}
  .band .col{grid-template-columns:1fr;gap:20px;padding-top:64px;padding-bottom:64px}
  .band h2,.head h2,.center-head h2{font-size:30px}
  .band p{font-size:17px}
  .sec{padding:64px 0}
  .head{flex-direction:column;align-items:flex-start}
  .svc{grid-template-columns:1fr;gap:12px}.svc a{aspect-ratio:16/10}
  .cat-top{flex-direction:column;gap:12px}
  .filters{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;width:100%;padding-bottom:4px}
  .grid{grid-template-columns:1fr 1fr;gap:22px 10px}
  .tile,.tile.third{grid-column:span 1}
  .tile.full{grid-column:span 2}.tile.full .ph{aspect-ratio:17/10}
  .tile.wide-m{grid-column:span 2}
  .tile .nm{font-size:14px}.tile .rl{font-size:12px}
  .item,.quote{grid-template-columns:1fr;gap:28px}
  .item h1,.quote h1{font-size:32px}
  .specs div{grid-template-columns:120px 1fr}
  .ev{grid-template-columns:1fr;gap:16px}
  .ev h3{font-size:24px}
  .ev3{grid-template-columns:1fr}
  .crew,.crew.five{grid-template-columns:1fr 1fr;gap:10px}
  .cta .col{grid-template-columns:1fr;gap:28px}
  .cta h2{font-size:36px}
  .wa{right:12px;bottom:40px;height:42px}
  .mbar{display:flex}
  .two{grid-template-columns:1fr}
}

.light .nav,body.light .nav{background:#080808}

.tile.inline{flex-direction:row;flex-wrap:wrap;gap:10px}
.tile.inline .plus{width:auto}

.mbar .dot{width:8px;height:8px;border-radius:50%;background:#25D366;display:inline-block}

.tile.inline .plus:hover{transform:none;background:var(--red-deep);color:#fff}

.hero .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* hover: equipment tiles fade from graphite to white so the kit reads clearly */
.dark-tiles .tile .ph,.dark-tiles .inc .ph{position:relative}
.dark-tiles .tile .ph img.w,.dark-tiles .inc .ph img.w{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease}
.dark-tiles .tile .ph:not(.photo){transition:background-color .45s ease}
.dark-tiles .tile .ph:hover img.w,.dark-tiles .tile:hover .ph img.w,.dark-tiles .inc a:hover .ph img.w{opacity:1}
.dark-tiles .tile:hover .ph:not(.photo){background:#F1F1EE}
.dark-tiles .tile:hover .ph .pill{background:#111;color:#fff}
.dark-tiles .inc .ph{background:#3A3B3F}
@media (hover:none){.dark-tiles .tile .ph img.w{display:none}}

.hero .float{bottom:120px}
@media (max-width:900px){.hero .float{bottom:96px}.hero .copy{bottom:300px}}

/* ---- WhatsApp: dark pill, red icon disc with a live pulse ---- */
.wa{right:24px;bottom:48px;height:52px;padding:0 20px 0 6px;gap:12px;background:rgba(18,18,20,.92);color:#fff;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.wa i{display:none}
.wa-ic{position:relative;width:40px;height:40px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.wa-ic svg{width:22px;height:22px;position:relative;z-index:1}
.wa-ic::before,.wa-ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:wapulse 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.wa-ic::after{animation-delay:1.2s}
@keyframes wapulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
.wa:hover{background:#1c1c1f}
@media (prefers-reduced-motion:reduce){.wa-ic::before,.wa-ic::after{animation:none}}
@media (max-width:900px){.wa{display:none}}

/* ---- headline variants ---- */
.hero .copy{bottom:120px}
.hl{display:none}
body[data-head="1"] .hl1,body[data-head="2"] .hl2,body[data-head="3"] .hl3{display:block}
.hero h1.old{display:none}
.hl1 .k,.hl3 .k{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d6d3cd;margin:0 0 14px}
.hl1 .big{margin:0;font:800 60px/0.98 var(--display);font-stretch:118%;letter-spacing:-.02em;color:#fff}
.hl1 .big span{color:var(--red)}
.hl1 .sub{margin:10px 0 0;font:300 30px/1 var(--display);font-stretch:112%;color:#fff}
.hl1 .sub b{font-weight:700;color:var(--red)}
.hl2{position:absolute;left:0;right:0;bottom:44px;text-align:center}
.hl2 h1{margin:0;font:300 44px/1.05 var(--display);font-stretch:112%;letter-spacing:-.01em}
.hl2 h1 b{display:block;font-weight:800;font-size:22px;letter-spacing:.24em;text-transform:uppercase;color:var(--red);margin-top:10px}
.hl3{border-left:2px solid var(--red);padding-left:18px}
.hl3 h1{margin:0;font:700 36px/1.1 var(--display);font-stretch:112%;letter-spacing:-.01em;max-width:18ch}
.hl3 h1 em{font-style:normal;color:var(--red)}
body[data-head="2"] .hero .copy{bottom:0}

/* ---- nav variants ---- */
body[data-nav="1"] .nav .col{height:72px}
body[data-nav="1"] .nav .logo img{height:32px}
body[data-nav="2"] .nav .col{display:grid;grid-template-columns:1fr auto 1fr;height:76px}
body[data-nav="2"] .nav .logo{order:2;justify-self:center}
body[data-nav="2"] .nav .logo img{height:34px}
body[data-nav="2"] .nav .links{order:1;margin-left:0;justify-self:start}
body[data-nav="2"] .nav .act{order:3;justify-self:end}
body[data-nav="3"] .nav{position:absolute;left:0;right:0;top:0;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,0));border-bottom:0}
body[data-nav="3"] .nav .col{height:88px}
body[data-nav="3"] .nav .logo img{height:36px}
body[data-nav="3"] .hero{height:100vh}
body[data-nav="4"] .nav .col{height:80px}
body[data-nav="4"] .nav .logo{display:flex;align-items:center;gap:16px;padding-right:22px;border-right:1px solid #2a2a2e;height:40px}
body[data-nav="4"] .nav .logo img{height:30px}
body[data-nav="4"] .nav .links{margin-left:28px}
body[data-nav="4"] .nav .links a.on{box-shadow:0 2px 0 var(--red)}
@media (max-width:900px){body[data-nav] .nav .logo img{height:26px}body[data-nav="2"] .nav .col{grid-template-columns:auto 1fr auto}body[data-nav="2"] .nav .logo{order:1;justify-self:start}}

/* ---- round 4 headline + nav refinements ---- */
.hl1 h1,.hl2 h1,.hl3 h1{margin:0;color:#fff}
.hl1 h1{font:300 40px/1.05 var(--display);font-stretch:112%;letter-spacing:-.01em}
.hl1 h1 b{display:block;margin-top:10px;font:700 15px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--red)}
.hl2 .k{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d6d3cd;margin:0 0 12px}
.hl2 h1{font:800 34px/1.05 var(--display);font-stretch:114%;letter-spacing:-.015em}
.hl2 h1 em{display:block;font-style:normal;font-weight:300;color:var(--red)}
.hl3{border-left:2px solid var(--red);padding:2px 0 2px 16px}
.hl3 h1{font:500 24px/1.2 var(--display);font-stretch:110%}
.hl3 h1 em{font-style:normal;color:var(--red)}
body[data-head] .hero .copy{bottom:128px}
.hero .copy,.hero .float{transition:opacity .8s ease,transform .8s ease}
.hero.outro .copy,.hero.outro .float{opacity:0;transform:translateY(8px);pointer-events:none}
body[data-nav="1"] .nav .logo img{height:40px}
body[data-nav="2"] .nav .col{height:84px}
body[data-nav="2"] .nav .logo img{height:44px}
body[data-nav="3"] .nav .col{height:92px}
body[data-nav="3"] .nav .logo img{height:44px}
body[data-nav="4"] .nav .logo img{height:40px}
.nav .logo .mk{display:none}
body[data-nav="4"] .nav .logo .lk{display:none}
body[data-nav="4"] .nav .logo .mk{display:block;height:44px}
body[data-nav="4"] .nav .logo::after{content:"sightNsound";font:700 18px/1 var(--display);font-stretch:110%;color:#fff}
.hero .hl2{position:static;text-align:left}
.hero .hl2 h1 em{margin-top:2px}
.hl3 h1{white-space:nowrap}
body[data-head="2"] .hero .copy{bottom:128px}
/* edge-aligned home (nav=5): logo/menu 32px from the screen edges; hero copy + card on the same margins */
body[data-nav="5"] .nav .col{max-width:none;padding:0 32px;height:72px}
body[data-nav="5"] .nav .logo img{height:40px}
body[data-nav="5"] .hero .copy .col{max-width:none;padding:0 32px}
body[data-nav="5"] .hero .float{right:32px}
body[data-nav="5"] .wa{right:32px}
@media (max-width:900px){body[data-nav="5"] .nav .col,body[data-nav="5"] .hero .copy .col{padding:0 16px}body[data-nav="5"] .hero .float{right:16px;left:16px}}
.hero .float{bottom:140px}
/* softer hover + smoother add */
.dark-tiles .tile .ph img{transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.dark-tiles .tile .ph img.w{transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
.dark-tiles .tile .ph:not(.photo){transition:background-color .75s cubic-bezier(.22,.61,.36,1)}
.dark-tiles .tile:hover .ph img{transform:scale(1.025)}
.dark-tiles .tile:hover .ph img.w{opacity:.94}
.tile .meta .plus,.tile .meta .step{transition:opacity .35s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
.tile .meta{position:relative}
.tile .step{display:flex;position:absolute;right:0;top:0;opacity:0;transform:scale(.85);pointer-events:none}
.tile.added .plus{display:flex;opacity:0;transform:scale(.7);pointer-events:none}
.tile.added .step{opacity:1;transform:none;pointer-events:auto}
.tile.inline .step{position:static}
.plus:active{transform:scale(.92)}
/* ---- section rhythm: snap into each section + reveal on arrival ---- */
html.snap{scroll-snap-type:y proximity}
html.snap .hero,html.snap .band,html.snap .sec,html.snap .cta{scroll-snap-align:start;scroll-margin-top:72px}
.sec+.sec,.band+.sec,.sec+.cta{border-top:1px solid #1b1b1e}
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* ---- premium event-type tags ---- */
.band .types{gap:10px;margin-top:30px}
.band .chip{height:36px;padding:0 16px 0 14px;gap:9px;border:1px solid rgba(17,17,18,.16);border-radius:999px;background:rgba(255,255,255,.55);
  font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#1c1c1e;transition:background .35s,color .35s,border-color .35s}
.band .chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red)}
.band .chip:hover{background:#111;color:#fff;border-color:#111}
.dark .chip{background:transparent}

/* ---- CTA + footer tidy ---- */
.cta{padding:112px 0}
.cta .col{grid-template-columns:1fr 1fr;align-items:center;gap:80px}
.cta h2{font:300 44px/1.06 var(--display);font-stretch:112%;margin-top:12px}
.cta h2 b{display:inline;font-weight:800}
.ways a{padding:20px 0;font-size:16px}
.ways a b{font-weight:500}
.ways a span{transition:color .3s,transform .3s}
.ways a:hover span{color:#fff;transform:translateX(4px)}
footer{padding:64px 0 0;border-top:1px solid #1b1b1e}
footer .fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:40px;justify-content:initial}
footer .fb p{margin:16px 0 0;max-width:30ch;color:var(--alu);font-size:14px;line-height:1.55}
footer .logo img{height:32px}
footer h5{margin:0 0 14px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#6d6d72}
footer .fgrid a:not(.logo){display:block;color:#cfccc6;font-size:14px;padding:5px 0}
footer .fgrid a:not(.logo):hover{color:#fff}
footer .fbar{display:flex;justify-content:space-between;margin-top:56px;padding:22px 32px 110px;border-top:1px solid #1b1b1e;color:#6d6d72;font-size:13px}
footer .fbar{padding-left:var(--gut);padding-right:var(--gut)}
.wa{transition:opacity .4s,transform .4s}
.wa.away{opacity:0;transform:translateY(12px);pointer-events:none}
.head .link{align-self:flex-end;margin-bottom:6px}
.head p{max-width:46ch}
@media (max-width:900px){.cta .col{grid-template-columns:1fr;gap:32px}.cta h2{font-size:32px}footer .fgrid{grid-template-columns:1fr 1fr;gap:28px}footer .fb{grid-column:1/-1}footer .fbar{padding:18px 16px 120px}}

/* ---- two-way reveal: fade/rise in on arrival, fade out on leaving; direction-aware ---- */
.rv{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1),filter 1s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0s)}
.rv.from-top{transform:translateY(-26px)}
.rv.in{opacity:1;transform:none;filter:none}
.band h2.rv{filter:none;transform:none;opacity:1}
.band h2 .wd{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);transition-delay:var(--w)}
.band h2.in .wd{opacity:1;transform:none}
.svc > a.rv{transform:translateY(34px) scale(.98)}
.svc > a.rv.in{transform:none}
@media (prefers-reduced-motion:reduce){.rv,.band h2 .wd{opacity:1!important;transform:none!important;filter:none!important;transition:none}}

/* ---- leadership bios: red panel slides down on hover ---- */
.crew .p{position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.crew .bio{display:grid;grid-template-rows:0fr;background:var(--red);transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1)}
.crew .bio p{overflow:hidden;margin:0;padding:0 16px;font-size:14px;line-height:1.55;color:#fff;opacity:0;transition:opacity .4s ease .1s,padding .55s cubic-bezier(.22,.61,.36,1)}
.crew .p:hover .bio,.crew .p:focus-within .bio{grid-template-rows:1fr}
.crew .p:hover .bio p,.crew .p:focus-within .bio p{opacity:1;padding:14px 16px 18px}
.crew .p:hover .cap span{color:#fff}
.crew .p:has(.bio){cursor:default}
.crew{align-items:start}
/* ---- red accents at the bottom ---- */
.ways a:first-child b{color:var(--red)}
.ways a b{transition:color .3s}
.ways a:hover b{color:var(--red)}
footer .fgrid a[href^="mailto"]{color:var(--red)}
footer .fgrid a[href^="mailto"]:hover{color:#ff4a4f}
footer h5::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.crew .bio .bem{display:block;margin-top:12px;padding-top:10px;border-top:1px solid rgba(255,255,255,.35);color:#fff;font:500 13px/1.3 var(--body);word-break:break-all}
.crew .bio .bem:hover{text-decoration:underline}

/* bio overlays the lower photo instead of growing the card */
.crew .p{display:flex;flex-direction:column}
.crew .p .ph{position:relative}
.crew .bio{position:absolute;left:0;right:0;bottom:0;display:block;transform:translateY(101%);transition:transform .55s cubic-bezier(.22,.61,.36,1);background:rgba(228,25,31,.96)}
.crew .bio p{opacity:1;padding:16px 16px 16px;font-size:13.5px;line-height:1.5;overflow:visible}
.crew .p:hover .bio,.crew .p:focus-within .bio{transform:none}
.crew .p:hover .bio p,.crew .p:focus-within .bio p{padding:16px}
/* bio: full-photo red panel that fades in (no slide) */
.crew .bio{top:0;bottom:0;transform:none!important;opacity:0;display:flex;align-items:flex-end;background:rgba(228,25,31,.97);transition:opacity .55s cubic-bezier(.22,.61,.36,1)}
.crew .bio p{padding:22px 20px!important;font-size:15px;line-height:1.55}
.crew .p:hover .bio,.crew .p:focus-within .bio{opacity:1}

/* ---- Martin Audio partner variants (?ptr=1..5) ---- */
.ptr{display:none;align-items:center;gap:10px;color:#cfccc6;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.ptr img{height:15px;width:auto;opacity:.92}
body[data-ptr="1"] .ptr1,body[data-ptr="2"] .ptr2,body[data-ptr="3"] .ptr3,body[data-ptr="4"] .ptr4,body[data-ptr="5"] .ptr5{display:flex}
.ptr1{margin-left:22px;padding-left:22px;border-left:1px solid #2c2c31;height:30px}
.ptr2{position:absolute;top:28px;right:32px;z-index:3;padding:10px 14px;border-radius:999px;background:rgba(10,10,12,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}
.ptr3{margin-top:20px;gap:12px}.ptr3 img{height:16px}
.ptr4{position:absolute;left:32px;top:28px;z-index:3;flex-direction:column;align-items:flex-start;gap:8px}.ptr4 img{height:20px}
.ptr5{margin:0 0 14px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.1);justify-content:space-between}.ptr5 img{height:13px}
@media (max-width:900px){.ptr1{display:none!important}.ptr2,.ptr4{top:16px;right:16px;left:auto}}

/* ---- Martin Audio: top-left after our logo + footer ---- */
.ma-top{display:flex;align-items:center;gap:12px;margin-left:20px;padding-left:20px;border-left:1px solid #2c2c31;height:40px;color:#9a9aa0;font:500 10px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.ma-top img{height:34px;width:34px}
.ma-foot{display:flex;align-items:center;gap:12px;margin-top:20px;color:#9a9aa0;font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.ma-foot img{height:40px;width:40px}
@media (max-width:900px){.ma-top span{display:none}.ma-top{margin-left:12px;padding-left:12px}.ma-top img{height:28px;width:28px}}
.ma-top{gap:10px;margin-left:18px;padding-left:18px;height:30px;font-size:9px;letter-spacing:.13em;color:#86868c}
.ma-top img{height:26px;width:26px;opacity:.9}

/* ---- quote form: real controls ---- */
.fld em{font-style:normal;color:var(--red)}
.chipset{border:0;padding:0;margin:0 0 18px}.chipset legend{font:500 13px/1 var(--body);color:#cfccc6;margin-bottom:10px;padding:0}
.chips .chip{position:relative;cursor:pointer}
.chips .chip input{position:absolute;opacity:0;pointer-events:none}
.chips .chip:has(input:checked){background:var(--white);color:var(--ink);border-color:var(--white)}
.chips .chip:has(input:focus-visible){outline:2px solid var(--red);outline-offset:2px}
.fld input[type=date]{color-scheme:dark}
.fld input[aria-invalid=true]{border-color:var(--red)}
.check{display:flex;gap:8px;align-items:center;font-size:14px;color:#cfccc6;margin:-4px 0 16px}
.err{display:none;margin-top:6px;font-size:13px;color:#ff6b6f}.err.show{display:block}
.form.done h3{margin-top:6px}.summary{margin:18px 0 6px;padding:14px 16px;border:1px solid var(--edge);border-radius:10px;font-size:14px;line-height:1.6}
.btn:disabled{opacity:.6;cursor:wait}
body.quote-page .wa{display:none}
/* ---- uniform gear grid: every tile the same size, rows always line up ---- */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 20px}
.grid .tile,.grid .tile.third,.grid .tile.full,.grid .tile.wide-m{grid-column:auto}
.grid .tile .ph,.grid .tile.full .ph{aspect-ratio:4/3}
.dark-tiles .tile .ph img,.dark-tiles .tile .ph img.w{object-fit:cover}
.grid .tile .meta{min-height:78px}
.grid .tile .rl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1100px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:1fr;gap:28px}}

/* ---- quote form, round 2: grouped, even grid, one rhythm ---- */
.quote .form.f2{padding:34px 34px 28px;border-radius:16px}
.f2 .fhead{padding-bottom:22px;border-bottom:1px solid var(--edge);margin-bottom:6px}
.f2 .fhead h3{font-size:26px;margin:8px 0 6px}
.f2 .grp{padding:22px 0 6px;border-bottom:1px solid var(--edge)}
.f2 .grp:last-of-type{border-bottom:0}
.f2 .gt{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:600 15px/1 var(--display);font-stretch:110%;color:#fff}
.f2 .gt span{font:500 11px/1 var(--mono);color:var(--red);letter-spacing:.1em}
.f2 .fld{margin-bottom:16px}
.f2 .fld>span,.f2 legend{display:block;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8d8d92;margin-bottom:9px}
.f2 .fld input,.f2 .fld textarea{height:48px;border-radius:10px;background:#0c0c0e;border:1px solid #26262b;font-size:15px;transition:border-color .25s,background .25s}
.f2 .fld textarea{height:auto;min-height:92px;padding-top:13px}
.f2 .fld input:hover,.f2 .fld textarea:hover{border-color:#34343a}
.f2 .fld input:focus,.f2 .fld textarea:focus{border-color:#E4191F;background:#0f0f11;outline:none}
.f2 .fld input::placeholder,.f2 .fld textarea::placeholder{color:#55555b}
.f2 .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f2 .chipset{margin:0 0 18px}
.f2 .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.f2 .tgrid label{position:relative;cursor:pointer}
.f2 .tgrid input{position:absolute;opacity:0;pointer-events:none}
.f2 .tgrid span{display:flex;align-items:center;justify-content:center;height:44px;border:1px solid #26262b;border-radius:10px;background:#0c0c0e;font:500 14px/1 var(--body);color:#cfccc6;transition:all .25s}
.f2 .tgrid label:hover span{border-color:#3a3a40;color:#fff}
.f2 .tgrid input:checked+span{background:#fff;color:#111;border-color:#fff}
.f2 .tgrid input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.f2 .tog{display:inline-flex;align-items:center;gap:10px;margin:-4px 0 18px;font-size:13.5px;color:#a9a9ae;cursor:pointer}
.f2 .tog input{position:absolute;opacity:0}
.f2 .tog i{position:relative;width:34px;height:20px;border-radius:999px;background:#26262b;transition:background .25s}
.f2 .tog i::after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#cfccc6;transition:transform .25s cubic-bezier(.22,.61,.36,1),background .25s}
.f2 .tog input:checked+i{background:var(--red)}.f2 .tog input:checked+i::after{transform:translateX(14px);background:#fff}
.f2 .tog input:focus-visible+i{outline:2px solid var(--red);outline-offset:2px}
.f2 .hint{margin:-8px 0 14px;font-size:12.5px;color:#6d6d72}
.f2 .err{font-size:12.5px}
.f2 .sendrow{margin-top:22px;display:grid;grid-template-columns:1.3fr 1fr;gap:10px}
.f2 .sendrow .btn{height:50px;border-radius:12px}
.f2 .wab{gap:9px}.f2 .wab svg{width:17px;height:17px;color:#25D366}
.f2 .note{text-align:center;margin-top:14px;font-size:12.5px}
@media (max-width:600px){.quote .form.f2{padding:24px 18px}.f2 .row2{grid-template-columns:1fr;gap:0}.f2 .tgrid{grid-template-columns:repeat(2,1fr)}.f2 .sendrow{grid-template-columns:1fr}}
.f2 .sendrow .btn{white-space:nowrap}
/* ---- footer tidy: brand left, three even link columns grouped right ---- */
footer .fgrid{grid-template-columns:minmax(0,1fr) repeat(3,max-content);column-gap:72px;align-items:start}
footer h5::before{display:none}
footer h5{margin:6px 0 16px;font:500 10.5px/1 var(--mono);letter-spacing:.16em;color:#6d6d72}
footer .fgrid a:not(.logo){font-size:14px;line-height:1.3;padding:0;margin:0 0 12px;color:#bdbac4}
footer .fgrid a:not(.logo):hover{color:#fff}
footer .fgrid a[href^="mailto"]{color:var(--red)}
footer .fb p{font-size:13.5px}
footer .ma-foot{margin-top:22px}
footer .ma-foot img{height:34px;width:34px}
footer .ma-foot span{font-size:9.5px;color:#86868c}
@media (max-width:900px){footer .fgrid{grid-template-columns:1fr 1fr;column-gap:28px}}
.grid.rv{transform:translateY(18px)}.grid.rv.in{transform:none}

.f2 .other{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.22,.61,.36,1),opacity .3s ease,margin .4s}
.f2 .other>*{overflow:hidden}
.f2 .other.open{grid-template-rows:1fr;opacity:1;margin-top:14px}
.f2 .other .fld{margin-bottom:0}

.step button:disabled{opacity:.3;cursor:not-allowed}.step button:disabled:hover{background:transparent}
/* ---- Martin Audio page ---- */
a.ma-top,a.ma-foot{text-decoration:none;transition:color .25s}
a.ma-top:hover,a.ma-foot:hover{color:#fff}
.ma-hero{position:relative;min-height:min(78vh,780px);display:flex;align-items:flex-end;overflow:hidden;background:#000}
.ma-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ma-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 95% at 0% 100%,rgba(0,0,0,.85),rgba(0,0,0,.45) 40%,transparent 68%)}
.ma-hero .col{position:relative;z-index:2;padding-bottom:72px;width:100%}
.ma-k{display:flex;align-items:center;gap:12px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#d6d3cd;margin-bottom:18px}
.ma-k img{width:34px;height:34px}
.ma-hero h1{margin:0;color:#fff;font:300 56px/1.02 var(--display);font-stretch:112%;letter-spacing:-.015em}
.ma-hero h1 b{display:block;font-weight:800}
.ma-hero p{margin:18px 0 0;max-width:46ch;color:#e6e3dd;font-size:19px;line-height:1.5}
.ma-pts{display:grid;gap:28px}
.ma-pts>div{display:grid;grid-template-columns:44px 1fr;column-gap:14px;padding-top:22px;border-top:1px solid rgba(17,17,18,.14)}
.ma-pts em{grid-row:span 2;font:500 13px/1.6 var(--mono);font-style:normal;color:var(--red)}
.ma-pts h3{margin:0 0 6px;font:800 21px/1.2 var(--display);font-stretch:112%}
.ma-pts p{margin:0}
.ma-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ma-two figure{margin:0}
.ma-two img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:4px}
.ma-two figcaption{margin-top:14px;color:var(--alu);font-size:16px;line-height:1.5}
.ma-two figcaption b{display:block;color:#fff;font:800 18px/1.3 var(--display);font-stretch:112%;margin-bottom:4px}
.ma-nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #26262a}
.ma-nums a{padding:28px 18px 28px 0;border-bottom:1px solid #26262a;color:#fff;text-decoration:none;transition:color .25s}
.ma-nums a:hover{color:var(--red)}
.ma-nums b{display:block;font:800 64px/1 var(--display);font-stretch:112%}
.ma-nums span{display:block;margin-top:10px;color:var(--alu);font-size:15px}
.ma-acts{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px}
@media (max-width:900px){.ma-hero{min-height:70vh}.ma-hero h1{font-size:38px}.ma-hero p{font-size:17px}.ma-hero .col{padding-bottom:44px}.ma-two{grid-template-columns:1fr}.ma-nums{grid-template-columns:1fr 1fr}.ma-nums b{font-size:48px}}
/* hero: light shadow + red line on the left of the headline */
.hero .shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.22) 38%,transparent 60%)}
.hero .hl1{padding-left:20px;border-left:3px solid var(--red)}
/* end card: the real logo files over the film, sharp on every screen */
.hero .endcard{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,2vw,28px);pointer-events:none;padding-bottom:4vh}
.hero .endcard img{display:block;opacity:0}
.hero .ec-mark{width:min(29vw,560px);transform:scale(.94)}
.hero .ec-word{width:min(27vw,520px);transform:translateY(6px)}
.hero.ec .ec-mark{opacity:1;transform:none;transition:opacity 1.2s ease 1s,transform 1.4s cubic-bezier(.2,.7,.2,1) 1s}
.hero.ec .ec-word{opacity:1;transform:none;transition:opacity .9s ease 2.4s,transform .9s ease 2.4s}
.hero.ec.ec-out .endcard img{opacity:0;transition:opacity .9s ease}
.hero.ec-reset .endcard img{transition:none!important}
@media (max-width:900px){.hero .ec-mark{width:62vw}.hero .ec-word{width:58vw}}
/* event types: numbered grid with lines */
.band .types.t4{display:grid;grid-template-columns:repeat(3,1fr);gap:0 24px;border-top:2px solid var(--ink);margin-top:30px}
.band .types.t4 span{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-bottom:1px solid rgba(17,17,18,.18);font:800 18px/1 var(--display);font-stretch:112%;text-transform:uppercase;color:var(--ink)}
.band .types.t4 em{font:500 12px/1 var(--mono);font-style:normal;color:var(--red);letter-spacing:.08em}
@media (max-width:600px){.band .types.t4{grid-template-columns:1fr 1fr}.band .types.t4 span{font-size:16px}}
.band .types.t4 span{font-size:17px;white-space:nowrap}
@media (max-width:900px){body[data-head] .hero .copy,body[data-nav="5"] .hero .copy{bottom:var(--copy-b,300px)}}
.nav [data-open-q]{white-space:nowrap}
/* footer: give the partner badge its own row */
footer .fb .logo{display:inline-block}
footer .fb p{margin-top:18px}
footer .fgrid a.ma-foot{display:flex;align-items:center;gap:14px;width:max-content;max-width:100%;margin:28px 0 0;padding:20px 0 0;border-top:1px solid #1f1f23;color:#9a9aa0;font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
footer .fgrid a.ma-foot img{width:40px;height:40px;flex:none}
footer .fgrid a.ma-foot:hover{color:#fff}
/* Martin Audio page: product shot under the heading */
.ma-why .ma-side{position:sticky;top:110px}
.ma-why .ma-side img{display:block;width:100%;max-width:440px;margin-top:36px;mix-blend-mode:multiply}
.ma-why .ma-side .cap{margin-top:10px;font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#77746e}
@media (max-width:900px){.ma-why .ma-side{position:static}.ma-why .ma-side img{max-width:320px;margin-top:24px}}
/* ---- smoother reveals: shorter, no blur (blur is costly to animate on phones) ---- */
.rv{filter:none!important;transform:translateY(16px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.from-top{transform:translateY(-16px)}
.rv.in{opacity:1;transform:none}
.band h2 .wd{transition-duration:.5s}
.svc > a.rv{transform:translateY(20px) scale(.99)}
.svc > a.rv.in,.grid.rv.in{transform:none}
.grid.rv{transform:translateY(12px)}
a,button,label{touch-action:manipulation}
/* home band: kit numbers under the headline */
.band .bstats{display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;margin-top:44px;border-top:2px solid var(--ink)}
.band .bstats a{padding:18px 0 0;color:var(--ink);text-decoration:none}
.band .bstats b{display:block;font:800 52px/1 var(--display);font-stretch:112%;letter-spacing:-.02em;transition:color .25s}
.band .bstats span{display:block;margin-top:8px;font-size:14px;line-height:1.4;color:#55524c;max-width:18ch}
.band .bstats a:hover b{color:var(--red)}
.band .bpartner{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#55524c;text-decoration:none;filter:none}
.band .bpartner img{width:34px;height:34px;filter:invert(1)}
.band .bpartner i{font-style:normal;color:var(--red);transition:transform .25s}
.band .bpartner:hover{color:var(--ink)}.band .bpartner:hover i{transform:translateX(4px)}
@media (max-width:900px){.band .bstats{margin-top:28px}.band .bstats b{font-size:40px}.band .bstats span{font-size:13px}.band .bpartner{margin-top:24px}}
/* computer screens: headline and card share one bottom line, close to the bottom of the film */
@media (min-width:901px){
  body[data-nav] .hero .float,.hero .float{bottom:56px}
  body[data-nav] .hero .copy,body[data-head] .hero .copy,body[data-nav="5"] .hero .copy{bottom:56px}
}
/* ---- gear tiles: round + becomes − n + in place; a quiet "Added to quote list" button shows underneath. No motion. ---- */
.tile .plus,.tile .step,.tile .step *,.tile .inq{transition:none!important;animation:none!important}
.tile .inq{display:block;visibility:hidden;width:100%;height:36px;margin-top:12px;border-radius:999px;border:1px solid rgba(17,17,18,.2);background:transparent;color:var(--ink);font:600 13px/1 var(--body);cursor:pointer}
.dark-tiles .tile .inq,.dark .tile .inq{border-color:#34343a;color:#f4f2ee}
.tile .inq:hover{border-color:var(--red);color:var(--red)}
.tile.added .inq{visibility:visible}
/* ---- loading states ---- */
.imgld{position:relative;background:rgba(128,128,128,.14)}
.imgld img{opacity:0}
.imgld::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--red);animation:plpulse 1.1s ease-in-out infinite}
@keyframes plpulse{0%{transform:scale(.6);opacity:.35}50%{transform:scale(1.4);opacity:1}100%{transform:scale(.6);opacity:.35}}
.imgld,.imgld::before{animation:plbg 1.4s ease-in-out infinite}
@keyframes plbg{0%,100%{background-color:rgba(128,128,128,.10)}50%{background-color:rgba(128,128,128,.20)}}
.tile .ph img,.ev .ph img,.crew .ph img,.svc a img,.ma-two img,.ma-side img{transition:opacity .35s ease}
.imgerr{position:relative;background:rgba(128,128,128,.12)}
.imgerr img{opacity:0}
.imgerr::after{content:"Image unavailable";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#8a8a90}
.vload{position:absolute;right:24px;top:20px;z-index:4;display:none;align-items:center;gap:10px;height:30px;padding:0 12px;border-radius:999px;background:rgba(8,8,8,.6);color:#d6d3cd;font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.vload i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:plpulse 1.1s ease-in-out infinite}
.hero.buffering .vload{display:flex}
.btn.sending{position:relative;color:transparent!important;pointer-events:none}
.btn.sending::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#fff;box-shadow:-16px 0 0 #fff,16px 0 0 #fff;animation:pldots 1s ease-in-out infinite}
@keyframes pldots{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.imgld,.imgld::after,.vload i,.btn.sending::after{animation:none}}
@media (max-width:900px){.vload{top:auto;bottom:16px;right:16px}}
/* ---- services page ---- */
.sv-top{padding-bottom:24px}
.sv-list .col{display:grid;gap:88px;padding-top:32px;padding-bottom:104px}
.sv{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.sv.rev .sv-img{order:2}
.sv-img{border-radius:4px;overflow:hidden;aspect-ratio:4/3;background:#141416}
.sv-img img{width:100%;height:100%;object-fit:cover;display:block}
.sv-t em{display:block;font:500 13px/1 var(--mono);font-style:normal;color:var(--red);margin-bottom:14px}
.sv-t h2{margin:0 0 14px;font:800 34px/1.08 var(--display);font-stretch:112%}
.sv-t p{margin:0 0 18px;color:#c9c6c0;font-size:17px;line-height:1.6;max-width:52ch}
.sv-kit{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid #26262a}
.sv-kit li{padding:11px 0;border-bottom:1px solid #26262a;font-size:15px;color:#e6e3dd}
.sv-kit a{color:inherit;text-decoration:none}.sv-kit a:hover{color:var(--red)}
.sv-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;border-top:2px solid #f4f2ee}
.sv-steps li{padding-top:22px}
.sv-steps b{display:block;font:500 12px/1 var(--mono);color:var(--red);margin-bottom:14px}
.sv-steps h3{margin:0 0 8px;font:800 19px/1.2 var(--display);font-stretch:112%}
.sv-steps p{margin:0;color:var(--alu);font-size:15px;line-height:1.55}
.sv-cta{display:flex;gap:12px;justify-content:center;margin-top:48px;flex-wrap:wrap}
@media (max-width:900px){.sv-list .col{gap:56px;padding-bottom:72px}.sv{grid-template-columns:1fr;gap:22px}.sv.rev .sv-img{order:0}.sv-t h2{font-size:26px}.sv-steps{grid-template-columns:1fr 1fr;gap:28px 20px}}
@media (max-width:520px){.sv-steps{grid-template-columns:1fr}}
.nf{min-height:60vh;display:flex;align-items:center;padding-top:120px}.nf .col{width:100%}
/* phones: headline becomes a small line at the top of the film, the card owns the bottom */
@media (max-width:900px){
  body[data-head] .hero .copy,body[data-nav="5"] .hero .copy,.hero .copy{top:18px;bottom:auto!important}
  .hero .hl1{padding-left:12px;border-left-width:2px}
  .hero .hl1 h1{font-size:22px;line-height:1.1}
  .hero .hl1 h1 b{margin-top:6px;font-size:10.5px;letter-spacing:.28em}
  .hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.12) 22%,transparent 40%)}
}
@media (max-width:600px){.band .types.t4{grid-template-columns:repeat(2,minmax(0,1fr))}.band .types.t4 span{white-space:normal;font-size:15px}}
/* phone menu: a plain list under the bar, no animation */
.mmenu{display:none}
@media (max-width:900px){
  .nav.mopen .mmenu{display:block;position:absolute;left:0;right:0;top:100%;z-index:80;background:#080808;border-bottom:1px solid #1d1d20;padding:6px 16px 14px}
  .mmenu a{display:block;padding:15px 2px;border-bottom:1px solid #1b1b1e;color:#f4f2ee;font:600 17px/1 var(--body);text-decoration:none}
  .mmenu a:last-child{border-bottom:0}.mmenu a.on{color:var(--red)}
  .burger{font-size:18px;cursor:pointer}
}
/* Safari in Low Power Mode refuses autoplay and shows its own play glyph: hide it, the film starts on the first tap instead */
.hero .film::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
/* menu never wraps; on narrower laptops the partner badge drops its words first */
.nav a,.nav .btn,.nav .qbtn{white-space:nowrap}
@media (max-width:1180px) and (min-width:901px){.ma-top span{display:none}.ma-top{margin-left:14px;padding-left:14px}.nav .links{gap:20px}.nav .links a{font-size:14.5px}}
@media (max-width:1020px) and (min-width:901px){.nav .links{gap:14px}.nav .links a{font-size:14px}.nav .act{gap:8px}.nav .qbtn{padding:0 12px}}
/* the still shows behind the film until it is actually playing (the film opens on black) */
.hero{background:#000 url(video/hero-poster.jpg?v=2) center/cover no-repeat}
.hero .film{opacity:0;transition:opacity .4s}
.hero.playing .film,.hero .film.imgfilm{opacity:1}
.hero .film.imgfilm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .hl1 h1 b i{font-style:normal;color:#f4f2ee;opacity:.55;margin:0 .15em}
@media (max-width:900px){.hero .hl1 h1 b{letter-spacing:.16em;font-size:10px}}
.hero .hl1 h1 b{white-space:nowrap}@media (min-width:901px){.hero .hl1 h1 b{letter-spacing:.2em;font-size:14px}}
/* touch screens have no hover: the gear item in the middle of the screen takes the white look instead */
@media (hover:none){.dark-tiles .tile .ph img.w{display:block}.dark-tiles .tile.hov .ph img.w{opacity:.94}}
@media (min-width:901px){body.hero-card-on .wa{opacity:0!important;pointer-events:none!important;transform:translateY(8px)}}
/* phones: the film fills the stable screen height (svh doesn't change when Safari's bar collapses), card sits just above the bottom bar */
@media (max-width:900px){
  .hero{height:calc(100vh - 72px);height:calc(100svh - 72px);min-height:420px;max-height:none}
  .hero[style*="--hero-h"]{height:var(--hero-h)}
  .hero .float,body[data-nav="5"] .hero .float{bottom:calc(81px + env(safe-area-inset-bottom))!important;top:auto!important;transition:none!important}
}
/* phones turned sideways (short screens): film fills the screen, headline small at top, card compact at the bottom */
@media (max-width:1100px) and (max-height:520px) and (orientation:landscape){
  .hero,.hero[style*="--hero-h"]{height:calc(100vh - 60px)!important;min-height:300px}
  .hero .float{left:auto!important;right:16px!important;width:min(380px,48vw);padding:14px 16px!important;bottom:calc(76px + env(safe-area-inset-bottom))!important}
  .hero .float p{display:none}
  .hero .float h3{font-size:17px!important;margin:4px 0 10px!important}
}
@media (max-width:1100px) and (max-height:520px) and (orientation:landscape){
  .hero .copy,body[data-head] .hero .copy,body[data-nav="5"] .hero .copy{top:14px!important;bottom:auto!important}
  .hero .hl1{padding-left:12px;border-left-width:2px}
  .hero .hl1 h1{font-size:22px!important;line-height:1.1}
  .hero .hl1 h1 b{margin-top:6px;font-size:10px!important;letter-spacing:.16em!important}
  .hero .float{bottom:calc(24px + env(safe-area-inset-bottom))!important}
  .hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.1) 30%,transparent 50%)}
}
@media (max-width:900px) and (max-height:520px) and (orientation:landscape){.hero .float{bottom:calc(76px + env(safe-area-inset-bottom))!important}}

/* live site: no mock-up strip, so the phone bar sits on the screen edge (clear of the iPhone home bar) */
.mbar{bottom:0;padding-bottom:calc(10px + env(safe-area-inset-bottom))}