/* 94 Audio & Lighting — one stylesheet, no framework.
   Dark by default: the work happens in dark rooms and the photographs are lit
   for it. Amber is the house colour, kept for actions and one word at a time —
   spread across a page it turns into the old site's highlighter. */

:root {
  --black: #0b0c0e;
  --panel: #131519;
  --panel-2: #1a1d22;
  --line: #262a31;
  --line-2: #363c45;
  --white: #f4f6f8;
  --grey: #a8b0ba;
  --grey-2: #79838f;
  --amber: #f0a92a;
  --amber-deep: #c07d0c;
  --ink-on-amber: #14161a;
  --wrap: 1180px;
  --gut: 24px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .btn, .eyebrow, .brand, .flabel, .more, .tel {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
}

img { max-width: 100%; display: block; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--amber); color: var(--ink-on-amber); padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: 0; }

.inner { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.inner.narrow { max-width: 720px; }

/* ---------- header ---------- */

header.site {
  position: sticky; top: 0; z-index: 40;
  background: rgba(11, 12, 14, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar {
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gut);
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; color: var(--white); font-size: 1.05rem; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand b { font-weight: 800; }
.brand .amp { font-weight: 500; color: var(--grey); }
/* The badge is a black disc with a white 9/A, so on this bar the disc itself
   disappears and only the glyph would float. The amber ring is what makes it
   read as a badge again — the same accent as the quote button, not a new colour. */
.brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%;
  background: #0b0b0d; box-shadow: 0 0 0 1.5px var(--amber); }

/* Eight destinations, a phone number and a button share one line. Below
   1120px the phone number steps aside rather than letting the nav wrap. */
.mainnav { display: flex; gap: 11px; margin-left: auto; }
.mainnav a {
  color: var(--grey); font-size: 0.87rem; font-weight: 500; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.mainnav a:hover { color: var(--white); text-decoration: none; }
.mainnav a.on { color: var(--white); border-bottom-color: var(--amber); }

.barcta { display: flex; align-items: center; gap: 11px; }
/* Crew sign in: a quiet outline beside the amber quote button, because it is
   for the twelve people who work here, not the client the page is written for. */
.signin {
  color: var(--grey); font-weight: 600; font-size: 0.9rem; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: 6px; padding: 8px 11px;
}
.signin:hover { color: var(--white); border-color: var(--grey-2); text-decoration: none; }
/* The same link inside the burger menu, where it is the only way to reach it
   once the bar has gone. Hidden until then so it is not said twice. */
.navsignin { display: none; }
.tel { color: var(--white); font-weight: 600; font-size: 0.95rem; white-space: nowrap; }

.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--white); margin: 4px 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--amber); color: var(--ink-on-amber);
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 13px 22px; border: 2px solid var(--amber); border-radius: 2px;
  cursor: pointer;
}
.btn:hover { background: var(--amber-deep); border-color: var(--amber-deep); color: #fff; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--white); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--white); background: transparent; color: var(--white); }
.btn.small { padding: 9px 15px; font-size: 0.87rem; }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }

.eyebrow {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 12px;
}

/* ---------- hero ---------- */

.hero { position: relative; display: flex; align-items: flex-end; isolation: isolate; }
.hero .herobg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,12,14,.72) 0%, rgba(11,12,14,.55) 45%, rgba(11,12,14,.94) 100%);
}
.hero.home { min-height: min(78vh, 680px); padding: 120px 0 64px; }
.hero.seg { min-height: min(52vh, 420px); padding: 84px 0 48px; }

.hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.03;
  margin: 0 0 18px; max-width: 17ch; text-wrap: balance;
}
.hero.seg h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); max-width: 20ch; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--grey); max-width: 56ch; margin: 0; }

/* ---------- sections ---------- */

.band { padding: 72px 0; border-top: 1px solid var(--line); }
.band.alt { background: var(--panel); }
.section-h {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.12; margin: 0 0 18px; max-width: 22ch; text-wrap: balance;
}
.band p { color: var(--grey); max-width: 62ch; }
.tailnote { margin-top: 26px; }
.textlink { border-bottom: 1px solid var(--amber-deep); }

/* proof bar */
.proof { padding: 30px 0; background: var(--panel-2); border-top: 1px solid var(--line); }
.proof .eyebrow { text-align: center; }
.logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 52px;
}
.logos img {
  height: 46px; width: auto; max-width: 168px; object-fit: contain;
  filter: grayscale(1) brightness(1.6); opacity: 0.85;
}
.logos img:hover { filter: none; opacity: 1; }

/* cards */
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 8px; }
.card {
  background: var(--panel); border: 1px solid var(--line); color: var(--white);
  display: flex; flex-direction: column; overflow: hidden;
}
.card:hover { border-color: var(--line-2); text-decoration: none; }
.card img { height: 190px; width: 100%; object-fit: cover; }
.cbody { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { margin: 0; font-size: 1.16rem; font-weight: 700; letter-spacing: -0.01em; }
.card p { color: var(--grey); font-size: 0.95rem; margin: 0; }
.more { margin-top: auto; color: var(--amber); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* split */
.split { display: grid; gap: 44px; grid-template-columns: 1fr 1fr; align-items: center; }
.split.wide { grid-template-columns: 1.35fr 1fr; align-items: start; }
.splitmedia img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; border: 1px solid var(--line); }
.splittext h2 { margin-top: 0; }

/* capability lists */
.caps { list-style: none; margin: 22px 0 0; padding: 0; }
.caps li {
  position: relative; padding: 9px 0 9px 26px; border-top: 1px solid var(--line);
  color: var(--white); font-size: 0.96rem;
}
.caps li::before {
  content: ""; position: absolute; left: 2px; top: 18px;
  width: 8px; height: 8px; background: var(--amber);
}

/* grids of notes and tiles */
.grid2 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.grid3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.grid4 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.note { background: var(--panel); border: 1px solid var(--line); padding: 22px; }
.band.alt .note { background: var(--panel-2); }
.note h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; }
.note p { margin: 0; font-size: 0.95rem; }
.note.big h3 { font-size: 1.2rem; }
.tile img { height: 150px; width: 100%; object-fit: cover; border: 1px solid var(--line); }
.tile h3 { margin: 14px 0 6px; font-size: 1.05rem; font-weight: 700; }
.tile p { margin: 0; font-size: 0.93rem; }

/* galleries — a portfolio shows the whole frame. These photographs arrive in
   every shape a phone and a camera produce, so the grid is a masonry of
   columns rather than a row of identical crops: nothing is cut off, and the
   captions sit under the picture they belong to. */
.gallery {
  columns: 3;
  column-gap: 18px;
}
.shot {
  margin: 0 0 22px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
}
.shot img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--panel);
}
.shot figcaption { margin-top: 9px; font-size: 0.88rem; color: var(--grey-2); }

/* ---------- quote page ---------- */

.quotepage { border-top: 0; padding-top: 56px; }
.quoteh { font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; margin: 0 0 14px; }
.quoteform { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; max-width: 42rem; }
.quoteform label { display: flex; flex-direction: column; gap: 6px; font-size: 0.88rem; font-weight: 500; color: var(--grey); }
.quoteform input, .quoteform select, .quoteform textarea {
  background: var(--panel); border: 1px solid var(--line-2); color: var(--white);
  font: inherit; font-size: 0.98rem; padding: 11px 13px; border-radius: 2px; width: 100%;
}
.quoteform input:focus, .quoteform select:focus, .quoteform textarea:focus { border-color: var(--amber); outline: none; }
.f2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
.needs { border: 1px solid var(--line); padding: 16px 18px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.needs legend { font-size: 0.88rem; color: var(--grey); padding: 0 6px; }
.cb { flex-direction: row !important; align-items: center; gap: 8px !important; color: var(--white) !important; font-size: 0.95rem !important; }
.cb input { width: auto; }
.formnote { font-size: 0.9rem; color: var(--grey-2); margin: 0; }
.quoteside { display: flex; flex-direction: column; gap: 20px; }
.quoteside img { max-height: 300px; }
.sidebox { background: var(--panel); border: 1px solid var(--line); padding: 22px; }
.sidebox h3 { margin: 0 0 10px; font-size: 1.05rem; }
.sidebox ol { margin: 0; padding-left: 20px; color: var(--grey); font-size: 0.95rem; }
.sidebox li { margin-bottom: 8px; }

/* ---------- closing CTA + footer ---------- */

.cta-strip { background: var(--panel-2); border-top: 1px solid var(--line); padding: 64px 0; text-align: center; }
.cta-strip h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.cta-strip p { color: var(--grey); margin: 0 auto; max-width: 54ch; }
.cta-strip .row { justify-content: center; }

footer.site { border-top: 1px solid var(--line); padding: 56px 0 0; background: var(--black); }
footer.site .inner { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; }
.fcol p { color: var(--grey); font-size: 0.92rem; margin: 0 0 10px; }
.fcol a { display: block; color: var(--grey); font-size: 0.92rem; margin-bottom: 8px; }
.fcol a:hover { color: var(--white); }
.fname { color: var(--white) !important; font-weight: 700; margin-top: 12px !important; }
.flabel { color: var(--white) !important; font-weight: 600; font-size: 0.74rem !important; letter-spacing: 0.14em; text-transform: uppercase; }
.fbase {
  margin-top: 44px; border-top: 1px solid var(--line); padding: 18px var(--gut);
  max-width: var(--wrap); margin-left: auto; margin-right: auto;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--grey-2);
}
.fbase a { color: var(--grey-2); }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .split, .split.wide { grid-template-columns: 1fr; gap: 28px; }
  footer.site .inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .burger { display: block; margin-left: auto; }
  .barcta { display: none; }
  .mainnav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0; background: var(--panel);
    border-bottom: 1px solid var(--line); padding: 8px 0;
  }
  .mainnav.open { display: flex; }
  .mainnav a { padding: 12px var(--gut); border-bottom: 0; }
  .mainnav a.on { border-left: 3px solid var(--amber); }
  .navsignin { display: block; color: var(--amber); border-top: 1px solid var(--line); }
  .hero.home { min-height: 0; padding: 72px 0 48px; }
  .hero.seg { padding: 56px 0 36px; }
  .band { padding: 52px 0; }
  .f2 { grid-template-columns: 1fr; }
  footer.site .inner { grid-template-columns: 1fr; }
}

/* ---------- equipment list ---------- */

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.invtools { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.invsearch { flex: 1; min-width: 260px; }
.invsearch input {
  width: 100%; background: var(--panel); border: 1px solid var(--line-2); color: var(--white);
  font: inherit; font-size: 1rem; padding: 12px 15px; border-radius: 2px;
}
.invsearch input:focus { border-color: var(--amber); outline: none; }
.invcount { color: var(--grey-2); font-size: 0.9rem; margin: 0; white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip {
  background: transparent; border: 1px solid var(--line-2); color: var(--grey);
  font: 500 0.85rem/1 Inter, Arial, sans-serif; padding: 8px 14px; border-radius: 999px; cursor: pointer;
}
.chip:hover { color: var(--white); border-color: var(--grey-2); }
.chip.on { background: var(--amber); border-color: var(--amber); color: var(--ink-on-amber); font-weight: 600; }

.invgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.invcard { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.invpic { background: var(--panel-2); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.invpic img { width: 100%; height: 100%; object-fit: cover; }
.noimg { font: 700 1.5rem Archivo, sans-serif; color: var(--line-2); letter-spacing: 0.02em; }
.invbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.invbody h3 { margin: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.3; }
.invmeta { color: var(--grey-2); font-size: 0.82rem; margin: 0; }
.addbtn { margin-top: auto; align-self: flex-start; }
.addbtn.on { background: transparent; color: var(--amber); border-color: var(--amber); }
.invnone { color: var(--grey); grid-column: 1 / -1; }
.invfoot { color: var(--grey-2); font-size: 0.9rem; max-width: 62ch; }

/* your list */
.listempty { color: var(--grey-2); }
.listlines { list-style: none; margin: 20px 0 0; padding: 0; }
.listline {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 0; border-top: 1px solid var(--line);
}
.ll-name { flex: 1; font-size: 0.96rem; }
.ll-size { color: var(--grey-2); font-size: 0.85rem; }
.ll-qty { display: flex; align-items: center; gap: 10px; }
.ll-qty button {
  width: 28px; height: 28px; background: var(--panel-2); border: 1px solid var(--line-2);
  color: var(--white); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 2px;
}
.ll-qty button:hover { border-color: var(--amber); color: var(--amber); }
.ll-qty b { min-width: 1.6ch; text-align: center; font-variant-numeric: tabular-nums; }
.ll-x { background: none; border: 0; color: var(--grey-2); font-size: 1.2rem; cursor: pointer; padding: 4px; }
.ll-x:hover { color: var(--amber); }

.listbar { position: sticky; bottom: 18px; display: flex; justify-content: center; z-index: 30; margin-top: -60px; }
.listbar .btn { box-shadow: 0 8px 26px rgba(0,0,0,.5); }
.listbar b { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .invgrid { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 12px; }
  .invbody { padding: 12px; }
}

/* Brand marks that arrive dark are shown as the same white silhouette the rest
   of the wall is in, so one row reads as one set rather than six liveries. */
.logos img.inv { filter: brightness(0) invert(1); opacity: 0.82; }
.logos img.inv:hover { filter: brightness(0) invert(1); opacity: 1; }

/* The featured trio on the home page: three jobs, captioned, on the way to the
   full gallery. Wider frames than the Work grid so they carry from a scroll. */
/* the home-page trio stays a row of three */
.gallery.sq.feat { columns: 3; }
.gallery.sq.feat a { display: block; }
.gallery.sq.feat .shot img { border-color: var(--line-2); }
.gallery.sq.feat .shot img:hover { border-color: var(--amber); }


/* Two columns on a tablet, one on a phone. */
@media (max-width: 900px) { .gallery, .gallery.sq.feat { columns: 2; } }
@media (max-width: 600px) { .gallery, .gallery.sq.feat { columns: 1; } }

/* One line, five things on it: the badge, eight destinations, the crew link,
   the phone number and the quote button. It gives way in that order as the
   window narrows — the number goes first, because it is on every page twice
   more, and the crew link stays because the people who need it are the ones
   least likely to go hunting. */
@media (max-width: 1500px) { .barcta .tel { display: none; } }
/* "& Lighting" does not appear in the bar at all now.

   The bar is capped at 1180px, so whether it fits has nothing to do with the
   window: it is the same eleven things on the same line at every width, and
   with the crew link spelled out they no longer fit. The badge and "94 Audio"
   name the company perfectly well — the full name is in the logo itself, in
   the footer, in the page titles and in the schema. A destination people need
   is worth more than a decoration they have already read. */
.brand .amp { display: none; }
@media (max-width: 1240px) { .mainnav { gap: 11px; } .mainnav a { font-size: 0.85rem; } }
@media (max-width: 1100px) { .signin { padding: 7px 10px; font-size: 0.85rem; } }
.btn.small { white-space: nowrap; }

/* Questions and answers. Open by default would be a wall of text; closed by
   default lets someone scan the questions and open the one they came for. */
.faq { border-bottom: 1px solid var(--line); padding: 2px 0; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0;
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 1.05rem;
  color: var(--white); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px;
  font-size: 1.5rem; font-weight: 400; color: var(--amber); line-height: 1; }
.faq[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--amber); }
.faq p { margin: 0 0 18px; color: var(--grey); max-width: 68ch; }

/* Honeypot. Off-screen rather than display:none, which bots look for. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The app, presented the way a store presents one: the icon it will wear on
   the home screen, what it weighs, and one button. A bare link to a .apk
   reads like something that will break your phone. */
.appcard {
  display: flex; align-items: center; gap: 16px; margin: 22px 0 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; max-width: 480px;
}
.appcard img { border-radius: 14px; flex: none; }
.appmeta { flex: 1; min-width: 0; }
.appname { margin: 0; font-weight: 700; color: var(--white); }
.appfine { margin: 2px 0 0; font-size: 0.86rem; color: var(--grey-2); }
@media (max-width: 480px) {
  .appcard { flex-wrap: wrap; }
  .appcard .btn { width: 100%; text-align: center; }
}

/* A dated list where each line is a sentence, not a fragment: more air than a
   plain list, and the date at the head of each one in the body colour. */
.steps { margin: 22px 0 0; padding-left: 20px; }
.steps li { margin: 0 0 12px; color: var(--grey); }
.steps li b { color: var(--white); }