/* Curt's Audio Video - "The Control Room" design system.
   Machined graphite + brass hairlines + one lit McIntosh-blue accent.
   Zodiak (display serif) + General Sans (grotesk). Chamfered brass-frame kit
   is the one repeated motif across every page. Single source of truth.
   Fonts self-hosted (netryse.com CSP blocks the Fontshare CDN). */

@font-face {
  font-family: "Zodiak";
  src: url("fonts/zodiak-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zodiak";
  src: url("fonts/zodiak-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-950: #0c0e11;
  --bg-900: #121518;
  --bg-850: #171b1f;
  --bg-800: #1c2126;
  --bg-700: #23282e;
  --bg-600: #2c323a;
  --line-hi: rgba(201, 206, 211, 0.14);
  --line-lo: rgba(0, 0, 0, 0.55);
  --ink: #eceff1;
  --ink-soft: #c9ced3;
  --ink-dim: #9aa3aa;
  --brass: #8e979d;
  --brass-bright: #4f9ad0;
  --brass-line: rgba(201, 206, 211, 0.22);
  --blue: #4c93c6;
  --blue-bright: #83c4f0;
  --blue-deep: #0d2836;
  --chamfer-lg: 0px;
  --chamfer-md: 0px;
  --chamfer-sm: 0px;
  --container: 1240px;
  --nr-green: #22c55e;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg-950);
  color: var(--ink-soft);
  font-family:
    "General Sans",
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}
/* brushed-metal ambient texture across the whole page */
body::before {
  /* brushed graphite: two grain frequencies at opposing angles, theater vignette,
     one cool bloom. fixed + pointer-events:none so it never repaints on scroll. */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(
      120% 90% at 50% -10%,
      rgba(79, 154, 208, 0.1),
      transparent 55%
    ),
    radial-gradient(
      100% 100% at 50% 50%,
      transparent 38%,
      rgba(0, 0, 0, 0.72) 100%
    ),
    repeating-linear-gradient(
      97deg,
      rgba(255, 255, 255, 0.02) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      3deg,
      rgba(255, 255, 255, 0.013) 0 1px,
      transparent 1px 9px
    ),
    linear-gradient(180deg, #171b1f, #0c0e11 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

header,
main,
footer {
  position: relative;
  z-index: 1;
}

img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}
h1,
h2,
h3,
h4,
p,
dt,
dd,
figure,
blockquote,
address {
  margin: 0;
}
address {
  font-style: normal;
}

.wrap,
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

h1,
h2,
h3,
h4 {
  font-family: "Zodiak", Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--bg-800);
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid var(--brass-line);
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ============ chamfered brass-frame kit (the one repeated motif) ============ */
.frame-brass {
  background: linear-gradient(
    155deg,
    var(--brass-bright),
    var(--brass) 40%,
    #7c5b34 100%
  );
  clip-path: polygon(
    var(--chamfer-lg) 0,
    100% 0,
    100% calc(100% - var(--chamfer-lg)),
    calc(100% - var(--chamfer-lg)) 100%,
    0 100%,
    0 var(--chamfer-lg)
  );
  padding: 1.5px;
}
.frame-brass.md {
  clip-path: polygon(
    var(--chamfer-md) 0,
    100% 0,
    100% calc(100% - var(--chamfer-md)),
    calc(100% - var(--chamfer-md)) 100%,
    0 100%,
    0 var(--chamfer-md)
  );
}
.frame-brass.sm {
  clip-path: polygon(
    var(--chamfer-sm) 0,
    100% 0,
    100% calc(100% - var(--chamfer-sm)),
    calc(100% - var(--chamfer-sm)) 100%,
    0 100%,
    0 var(--chamfer-sm)
  );
}
.frame-brass .inner {
  background: linear-gradient(
    160deg,
    var(--bg-800),
    var(--bg-850) 60%,
    var(--bg-900)
  );
  clip-path: polygon(
    calc(var(--chamfer-lg) - 1.5px) 0,
    100% 0,
    100% calc(100% - (var(--chamfer-lg) - 1.5px)),
    calc(100% - (var(--chamfer-lg) - 1.5px)) 100%,
    0 100%,
    0 calc(var(--chamfer-lg) - 1.5px)
  );
  height: 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 12px rgba(0, 0, 0, 0.4);
}
.frame-brass.md .inner {
  clip-path: polygon(
    calc(var(--chamfer-md) - 1.5px) 0,
    100% 0,
    100% calc(100% - (var(--chamfer-md) - 1.5px)),
    calc(100% - (var(--chamfer-md) - 1.5px)) 100%,
    0 100%,
    0 calc(var(--chamfer-md) - 1.5px)
  );
}
.frame-brass.sm .inner {
  clip-path: polygon(
    calc(var(--chamfer-sm) - 1.5px) 0,
    100% 0,
    100% calc(100% - (var(--chamfer-sm) - 1.5px)),
    calc(100% - (var(--chamfer-sm) - 1.5px)) 100%,
    0 100%,
    0 calc(var(--chamfer-sm) - 1.5px)
  );
}

/* ============ header ============ */
#hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
#hdr.solid {
  background: rgba(10, 11, 13, 0.92);
  border-bottom-color: var(--brass-line);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
}
.nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 17px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mark {
  font-family: "Zodiak", serif;
  font-weight: 500;
  font-size: 21px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.mark i {
  font-style: normal;
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--brass-bright);
  text-transform: uppercase;
  margin-top: 4px;
}
.navlinks {
  display: flex;
  align-items: center;
  gap: 30px;
}
.navlinks > a:not(.callkey),
.hasmenu > a {
  font-size: 14.5px;
  color: var(--ink-dim);
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.navlinks > a:not(.callkey):hover,
.hasmenu > a:hover,
.navlinks > a:not(.callkey):focus-visible,
.hasmenu > a:focus-visible,
.navlinks > a.here,
.hasmenu > a.here {
  color: var(--ink);
  border-color: var(--brass-line);
}
.caret {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
}
.hasmenu {
  position: relative;
}
.hasmenu:hover .caret {
  transform: rotate(180deg);
}

/* services dropdown */
.submenu {
  position: absolute;
  top: 100%;
  left: -14px;
  padding-top: 12px;
  min-width: 250px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 60;
}
.hasmenu:hover .submenu,
.hasmenu:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu::before {
  content: "";
  position: absolute;
  inset: 12px 0 0 0;
  background: linear-gradient(160deg, var(--bg-850), var(--bg-900));
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px var(--brass-line);
}
.submenu a {
  position: relative;
  display: block;
  padding: 11px 20px;
  font-size: 14px;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-hi);
  transition:
    color 0.16s ease,
    background-color 0.16s ease;
}
.submenu a:last-child {
  border-bottom: 0;
}
.submenu a b {
  color: var(--ink);
  font-weight: 600;
}
.submenu a:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.03);
}

.callkey {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 12px 24px;
  white-space: nowrap;
  background: linear-gradient(160deg, var(--bg-700), var(--bg-800));
  clip-path: polygon(
    9px 0,
    100% 0,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    0 100%,
    0 9px
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 6px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.2s ease;
}
.callkey:hover,
.callkey:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 6px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--brass-line);
}
.callkey .led {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: var(--blue-bright);
  box-shadow: 0 0 8px rgba(131, 196, 240, 0.8);
}
.callkey .t {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.callkey .t small {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
  white-space: nowrap;
}
.callkey .t b {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.navtoggle {
  display: none;
  width: 42px;
  height: 38px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink-soft);
  align-items: center;
  justify-content: center;
  padding: 0;
}
.navtoggle svg {
  width: 24px;
  height: 24px;
}

/* mobile menu */
.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  padding: 76px 28px 40px;
  background: rgba(9, 10, 12, 0.98);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.mobilemenu.open {
  display: flex;
}
.mclose {
  position: absolute;
  top: 20px;
  right: 22px;
  width: 42px;
  height: 42px;
  background: none;
  border: 0;
  color: var(--ink-soft);
  cursor: pointer;
}
.mclose svg {
  width: 26px;
  height: 26px;
}
.mlink {
  font-family: "Zodiak", serif;
  font-size: 26px;
  color: var(--ink);
  padding: 15px 0;
  border-bottom: 1px solid var(--line-hi);
}
.mlabel {
  margin-top: 18px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.msub {
  display: flex;
  flex-direction: column;
}
.msub a {
  padding: 11px 0;
  font-size: 16px;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line-hi);
}
.mcall {
  margin-top: 24px;
  align-self: flex-start;
}

/* ============ buttons ============ */
.keybtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  background: linear-gradient(160deg, var(--bg-600), var(--bg-800));
  clip-path: polygon(
    11px 0,
    100% 0,
    100% calc(100% - 11px),
    calc(100% - 11px) 100%,
    0 100%,
    0 11px
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--brass-line);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  font-family: "General Sans", sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  border: 0;
  transition:
    box-shadow 0.2s ease,
    color 0.2s ease,
    transform 0.12s ease;
}
.keybtn svg {
  width: 17px;
  height: 17px;
  color: var(--brass-bright);
}
.keybtn:hover,
.keybtn:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 8px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--brass-bright),
    0 0 22px rgba(79, 154, 208, 0.18);
}
.keybtn:active {
  transform: translateY(1px);
}
.footcall {
  width: fit-content;
  margin-top: 22px;
  padding: 17px 30px;
  gap: 13px;
  font-size: 16px;
  white-space: nowrap;
}
.footcall svg {
  width: 20px;
  height: 20px;
}
.keybtn-ghost {
  background: none;
  box-shadow: none;
  color: var(--ink-dim);
  padding: 15px 4px;
  clip-path: none;
  border-bottom: 1px solid var(--line-hi);
}
.keybtn-ghost svg {
  color: currentColor;
}
.keybtn-ghost:hover,
.keybtn-ghost:focus-visible {
  box-shadow: none;
  color: var(--blue-bright);
  border-color: var(--blue);
}

/* ============ hero ============ */
.hero {
  padding: 60px 0 92px;
}
.hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.06;
  font-weight: 500;
}
.hero-copy .lede {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-dim);
  max-width: 46ch;
}
.hero-ctas {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.hero-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hero-frame-wrap {
  aspect-ratio: 6/5;
  position: relative;
}
.hero-frame {
  position: relative;
  overflow: hidden;
}
.scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.scene-img.on {
  opacity: 1;
}
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 90px 10px rgba(0, 0, 0, 0.55),
    inset 0 -60px 90px -30px rgba(13, 40, 54, 0.55);
}
.now-readout {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 15px;
  background: rgba(10, 11, 13, 0.72);
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.now-tag {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.now-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue-bright);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px rgba(131, 196, 240, 0.55);
  font-family: "General Sans", sans-serif;
}

.keypad-inner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  padding: 14px;
}
.keybtn-phys {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 14px 6px;
  font-family: "General Sans", sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-align: center;
  color: #5b5f67;
  background: linear-gradient(
    165deg,
    var(--bg-700),
    var(--bg-800) 55%,
    var(--bg-900)
  );
  clip-path: polygon(
    6px 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%,
    0 6px
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -8px 12px -8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05),
    0 -1px 1px rgba(0, 0, 0, 0.7);
  transition:
    color 0.3s ease,
    box-shadow 0.3s ease,
    text-shadow 0.3s ease,
    transform 0.12s ease;
}
.keybtn-phys:hover {
  color: var(--ink-dim);
}
.keybtn-phys:active {
  transform: translateY(1px);
}
.keybtn-phys:focus-visible {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -8px 12px -8px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--brass-bright);
}
.keybtn-phys.on {
  color: var(--blue-bright);
  text-shadow:
    0 0 6px rgba(131, 196, 240, 0.85),
    0 0 16px rgba(76, 147, 198, 0.5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -8px 12px -8px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(76, 147, 198, 0.5),
    0 0 14px rgba(76, 147, 198, 0.18);
}

/* ============ sections ============ */
section {
  padding: 88px 0;
}
.band {
  border-top: 1px solid var(--line-hi);
}
section h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 500;
  line-height: 1.28;
  max-width: 24ch;
}
.shead,
.section-head {
  margin-bottom: 50px;
}
.shead .lead,
.lead {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 14px;
}
.shead p {
  margin-top: 16px;
  font-size: 16px;
  color: var(--ink-dim);
  max-width: 60ch;
}

/* page heads (interior pages) */
.pagehead {
  padding: 60px 0 44px;
  border-bottom: 1px solid var(--line-hi);
}
.pagehead h1 {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.08;
  margin-top: 6px;
}
.pagehead .lede {
  margin-top: 20px;
  font-size: 17px;
  color: var(--ink-dim);
  max-width: 62ch;
  line-height: 1.62;
}
.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.crumb a:hover {
  color: var(--brass-bright);
}
.crumb .sep {
  color: var(--brass-line);
}

/* interior subhero (service pages) */
.subhero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.subhero .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.subhero .shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10, 11, 13, 0.55) 0%,
    rgba(10, 11, 13, 0.35) 40%,
    rgba(10, 11, 13, 0.94) 100%
  );
}
.subhero .inner {
  position: relative;
  z-index: 2;
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  padding: 0 28px 60px;
}
.subhero h1 {
  font-size: clamp(32px, 5vw, 60px);
  line-height: 1.04;
}
.subhero .lede {
  margin-top: 18px;
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.6;
}

/* ============ home services list (hover-reveal rows) ============ */
.service-list {
  border-top: 1px solid var(--line-hi);
}
.service-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 40px;
  padding: 26px 22px 26px 20px;
  border-bottom: 1px solid var(--line-hi);
  align-items: center;
  transition:
    background-color 0.25s ease,
    padding-left 0.25s ease;
}
.service-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brass-bright);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s ease;
  box-shadow: 0 0 10px rgba(220, 174, 112, 0.4);
}
.service-row:hover,
.service-row:focus-visible {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.022),
    transparent 70%
  );
  padding-left: 28px;
  outline: none;
}
.service-row:hover::before,
.service-row:focus-visible::before {
  transform: scaleY(1);
}
.service-row h3 {
  font-size: 21px;
  font-weight: 500;
  transition: color 0.2s ease;
}
.service-row:hover h3 {
  color: var(--brass-bright);
}
.service-row p {
  font-size: 15px;
  color: var(--ink-dim);
  max-width: 48ch;
  transition: color 0.2s ease;
}
.service-row:hover p {
  color: var(--ink-soft);
}
.service-row .more {
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-bright);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
  text-align: right;
}
.service-row:hover .more,
.service-row:focus-visible .more {
  opacity: 1;
  transform: translateX(0);
}

/* ============ service detail rows (frow) ============ */
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 46px 0;
  border-bottom: 1px solid var(--line-hi);
}
.frow:last-child {
  border-bottom: 0;
}
.frow.flip .fmedia {
  order: 2;
}
.fmedia {
  aspect-ratio: 4/3;
}
.fmedia.tall {
  aspect-ratio: 3/4;
}
.fmedia .inner,
.fmedia > img {
  height: 100%;
}
.fmedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04) brightness(0.97);
  transition: transform 0.6s ease;
}
.frow:hover .fmedia img {
  transform: scale(1.03);
}
.fbody h2 {
  font-size: clamp(23px, 2.4vw, 31px);
  margin-bottom: 16px;
  max-width: none;
}
.fbody p {
  font-size: 15.5px;
  color: var(--ink-soft);
  margin-bottom: 14px;
  line-height: 1.66;
}
.checklist {
  margin-top: 22px;
  display: grid;
  gap: 12px;
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-soft);
}
.pip {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  transform: rotate(45deg);
  background: var(--brass-bright);
  box-shadow: 0 0 8px rgba(220, 174, 112, 0.35);
}
.brandrow {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-hi);
}
.brandrow .k {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 12px;
}
.brandrow .items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
}
.brandrow .items span {
  font-size: 13.5px;
  color: var(--ink-dim);
  padding: 0 16px;
  border-right: 1px solid var(--line-hi);
}
.brandrow .items span:first-child {
  padding-left: 0;
}
.brandrow .items span:last-child {
  border-right: 0;
}

/* ============ services hub cards ============ */
.svc-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.scard {
  display: block;
  transition: transform 0.3s ease;
}
.scard .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.scard:hover {
  transform: translateY(-4px);
}
.scard .simg {
  aspect-ratio: 16/11;
  overflow: hidden;
}
.scard .simg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  filter: saturate(0.94) brightness(0.95);
}
.scard:hover .simg img {
  transform: scale(1.05);
}
.scard .sb {
  padding: 22px 22px 26px;
}
.scard .sb h3 {
  font-size: 20px;
}
.scard .sb p {
  font-size: 14px;
  color: var(--ink-dim);
  margin-top: 10px;
  line-height: 1.55;
}
.scard .go {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue-bright);
  border-bottom: 1px solid var(--blue);
  padding-bottom: 2px;
  transition: color 0.2s ease;
}
.scard:hover .go {
  color: var(--ink);
}

/* ============ spec / trust bar + meters + marquee ============ */
.specbar {
  padding: 66px 0;
  border-top: 1px solid var(--line-hi);
}
.specbar .grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.specbar .u {
  text-align: center;
}
.specbar .n {
  font-family: "Zodiak", serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.specbar .n b {
  color: var(--brass-bright);
  font-weight: 700;
}
.specbar .l {
  font-size: 12.5px;
  color: var(--ink-dim);
  margin-top: 8px;
  line-height: 1.5;
  max-width: 22ch;
  margin-inline: auto;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.stat {
  aspect-ratio: 1/1;
}
.stat .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
  height: 100%;
}
.meter {
  width: 84px;
  height: 50px;
  overflow: visible;
}
.meter-needle {
  transform-origin: 42px 46px;
  transform: rotate(-58deg);
  transition: transform 1.1s cubic-bezier(0.2, 0.9, 0.15, 1.1);
}
.meter.is-in .meter-needle {
  transform: rotate(38deg);
}
.stat-figure {
  font-family: "Zodiak", serif;
  font-weight: 700;
  font-size: 30px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.stat-label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-bright);
  max-width: 16ch;
  line-height: 1.4;
}

.marquee {
  margin-top: 56px;
}
.marquee-label {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin-bottom: 20px;
}
.marquee-viewport {
  overflow: hidden;
  border-top: 1px solid var(--line-hi);
  border-bottom: 1px solid var(--line-hi);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 7%,
    #000 93%,
    transparent
  );
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marq 36s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-track span {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 172px;
  padding: 24px 36px;
  border-right: 1px solid var(--line-hi);
}

/* Real manufacturer marks, painted as single-ink CSS masks so nine different
   brand palettes read as one wall. Height + ratio are tuned per mark: these
   range from MartinLogan at 1:1 to Bowers & Wilkins at nearly 10:1, so a
   uniform height would make the wide wordmarks dominate the row. */
.bl {
  display: block;
  height: var(--bh, 18px);
  aspect-ratio: var(--bar, 4);
  background-color: var(--ink-soft);
  opacity: 0.6;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition:
    opacity 0.28s ease,
    background-color 0.28s ease;
}
/* the track pauses on hover, so lighting the mark rewards the stop */
.marquee-track span:hover .bl {
  opacity: 1;
  background-color: var(--brass-bright);
}
.bl-urc {
  --bh: 19px;
  --bar: 4.05;
  -webkit-mask-image: url(brands/urc.png);
  mask-image: url(brands/urc.png);
}
.bl-lutron {
  --bh: 15px;
  --bar: 6.75;
  -webkit-mask-image: url(brands/lutron.svg);
  mask-image: url(brands/lutron.svg);
}
.bl-sonos {
  --bh: 18px;
  --bar: 4.84;
  -webkit-mask-image: url(brands/sonos.svg);
  mask-image: url(brands/sonos.svg);
}
.bl-bowers-wilkins {
  --bh: 13px;
  --bar: 9.84;
  -webkit-mask-image: url(brands/bowers-wilkins.svg);
  mask-image: url(brands/bowers-wilkins.svg);
}
/* stacked mark (badge over wordmark), so it gets more height than the
   single-line wordmarks to hold equal presence in the row */
.bl-martinlogan {
  --bh: 30px;
  --bar: 1.7;
  -webkit-mask-image: url(brands/martinlogan.svg);
  mask-image: url(brands/martinlogan.svg);
}
.bl-sony {
  --bh: 17px;
  --bar: 5.68;
  -webkit-mask-image: url(brands/sony.svg);
  mask-image: url(brands/sony.svg);
}
.bl-denon {
  --bh: 18px;
  --bar: 4.51;
  -webkit-mask-image: url(brands/denon.svg);
  mask-image: url(brands/denon.svg);
}
.bl-eero {
  --bh: 19px;
  --bar: 3.55;
  -webkit-mask-image: url(brands/eero.svg);
  mask-image: url(brands/eero.svg);
}
.bl-pakedge {
  --bh: 18px;
  --bar: 4.47;
  -webkit-mask-image: url(brands/pakedge.svg);
  mask-image: url(brands/pakedge.svg);
}
@keyframes marq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============ work grid (home) ============ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.work-grid figure {
  aspect-ratio: 4/5;
}
.work-grid figure .inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.work-grid .photo-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.work-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04) brightness(0.97);
  transition: transform 0.55s ease;
}
.work-grid figure:hover img {
  transform: scale(1.05);
}
.work-grid figcaption {
  padding: 12px 14px 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-dim);
  border-top: 1px solid var(--line-hi);
}
.work-grid figcaption::before {
  content: "\00b7\00a0";
  color: var(--brass-bright);
  font-weight: 700;
}

/* ============ gallery (masonry + lightbox) ============ */
.masonry {
  columns: 3;
  column-gap: 16px;
}
.gitem {
  break-inside: avoid;
  margin: 0 0 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
  box-shadow: inset 0 0 0 1px var(--line-hi);
}
.gitem img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.94) contrast(1.03) brightness(0.94);
  transition:
    transform 0.5s ease,
    filter 0.3s ease;
}
.gitem::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--brass-line);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gitem:hover img {
  transform: scale(1.04);
  filter: saturate(1) contrast(1.05) brightness(1);
}
.gitem:hover::after {
  opacity: 1;
}
.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 9, 0.94);
  padding: 40px;
}
.lb.open {
  display: flex;
}
.lb img {
  max-width: min(1100px, 92vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px var(--brass-line);
}
.lb .x,
.lb .nav {
  position: absolute;
  background: rgba(20, 22, 27, 0.8);
  border: 1px solid var(--brass-line);
  color: var(--ink);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lb .x {
  top: 24px;
  right: 24px;
}
.lb .nav {
  top: 50%;
  transform: translateY(-50%);
}
.lb .prev {
  left: 24px;
}
.lb .next {
  right: 24px;
}
.lb .x svg,
.lb .nav svg {
  width: 22px;
  height: 22px;
}
.lb .x:hover,
.lb .nav:hover {
  border-color: var(--brass-bright);
  color: var(--blue-bright);
}

/* ============ reviews ============ */
.rev-grid,
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.rev .inner,
.rev-body {
  padding: 30px 26px;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rev .stars {
  display: flex;
  gap: 3px;
}
.rev .stars svg {
  width: 15px;
  height: 15px;
  color: var(--brass-bright);
}
.rev q {
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-soft);
  quotes: none;
  display: block;
}
.rev q::before {
  content: "\201C";
  color: var(--brass-bright);
  font-family: "Zodiak", serif;
  font-size: 22px;
  margin-right: 2px;
}
.rev q strong {
  color: var(--ink);
  font-weight: 600;
}
.rev .who {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rev .who b {
  font-size: 14px;
  color: var(--brass-bright);
  font-weight: 600;
}
.rev .who span {
  font-size: 12px;
  color: var(--ink-dim);
}
.reviews-cta {
  margin-top: 40px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}
.google-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--blue-bright);
  border-bottom: 1px solid var(--blue);
  padding-bottom: 2px;
}
.google-link:hover {
  color: var(--ink);
}

/* testimonials page */
.rating-lead {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-bottom: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-hi);
}
.rating-lead .big {
  font-family: "Zodiak", serif;
  font-weight: 700;
  font-size: 64px;
  color: var(--ink);
  line-height: 1;
}
.rating-lead .rstars {
  display: flex;
  gap: 4px;
}
.rating-lead .rstars svg {
  width: 20px;
  height: 20px;
  color: var(--brass-bright);
}
.rating-lead .rmeta {
  font-size: 14px;
  color: var(--ink-dim);
  margin-top: 8px;
}
.rating-lead .rmeta a {
  color: var(--blue-bright);
  border-bottom: 1px solid var(--blue);
}
.tst-wall {
  columns: 3;
  column-gap: 18px;
}
.tst-wall .rev {
  break-inside: avoid;
  margin: 0 0 18px;
  background: linear-gradient(160deg, var(--bg-850), var(--bg-900));
  clip-path: polygon(
    12px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%,
    0 12px
  );
  box-shadow: inset 0 0 0 1px var(--line-hi);
}

/* ============ contact ============ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 44px;
  align-items: start;
}
.ckeypad {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  background: linear-gradient(160deg, var(--bg-800), var(--bg-900));
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );
  box-shadow:
    inset 0 0 0 1px var(--brass-line),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ckeypad .plate {
  font-family: "Zodiak", serif;
  font-size: 15px;
  color: var(--ink-dim);
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line-hi);
  letter-spacing: 0.02em;
}
.ckey {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(
    165deg,
    var(--bg-700),
    var(--bg-800) 55%,
    var(--bg-900)
  );
  clip-path: polygon(
    9px 0,
    100% 0,
    100% calc(100% - 9px),
    calc(100% - 9px) 100%,
    0 100%,
    0 9px
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -8px 12px -8px rgba(0, 0, 0, 0.7);
  transition:
    box-shadow 0.2s ease,
    transform 0.12s ease;
}
.ckey:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -8px 12px -8px rgba(0, 0, 0, 0.7),
    0 0 0 1px var(--brass-line);
}
.ckey:active {
  transform: translateY(1px);
}
.ckey.primary {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -8px 12px -8px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(76, 147, 198, 0.4);
}
.ckey .kico {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--brass-bright);
}
.ckey .kico svg {
  width: 100%;
  height: 100%;
}
.ckey .kt {
  display: flex;
  flex-direction: column;
}
.ckey .kn {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.ckey .kr {
  font-size: 12.5px;
  color: var(--ink-dim);
}
.cdetail {
  display: grid;
  gap: 16px;
}
.cdetail .row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.cdetail .ci {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--brass-bright);
  margin-top: 2px;
}
.cdetail .ci svg {
  width: 100%;
  height: 100%;
}
.cdetail .cx {
  display: flex;
  flex-direction: column;
}
.cdetail .cx b {
  font-size: 14.5px;
  color: var(--ink);
}
.cdetail .cx span {
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.cform {
  padding: 34px 30px;
  background: linear-gradient(160deg, var(--bg-850), var(--bg-900));
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );
  box-shadow: inset 0 0 0 1px var(--line-hi);
}
.cform h3 {
  font-size: 22px;
}
.cform .fsub {
  font-size: 14px;
  color: var(--ink-dim);
  margin: 8px 0 22px;
}
.field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.field label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-bright);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--bg-950);
  border: 1px solid var(--line-hi);
  color: var(--ink);
  font-family: "General Sans", sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  clip-path: polygon(
    6px 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%,
    0 6px
  );
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow:
    0 0 0 1px var(--blue),
    0 0 16px rgba(76, 147, 198, 0.12);
}
.hp {
  position: absolute;
  left: -9999px;
}
.submit {
  margin-top: 8px;
}
.formnote {
  font-size: 13px;
  color: var(--ink-dim);
  margin-top: 16px;
}
.formnote a {
  color: var(--ink);
  border-bottom: 1px solid var(--brass-line);
}
.form-ok {
  display: none;
  padding: 40px 30px;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.6;
  background: linear-gradient(160deg, var(--bg-850), var(--bg-900));
  box-shadow: inset 0 0 0 1px var(--brass-line);
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    0 100%,
    0 16px
  );
}

.steps {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.step {
  padding: 26px 24px;
  border-top: 2px solid var(--brass-line);
}
.step .sn {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 10px;
}
.step h4 {
  font-size: 18px;
  margin-bottom: 8px;
}
.step p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.55;
}

/* ============ close CTA band ============ */
.close {
  padding: 92px 0;
  border-top: 1px solid var(--brass-line);
  background:
    radial-gradient(
      ellipse 70% 100% at 50% 0%,
      rgba(13, 40, 54, 0.4),
      transparent 70%
    ),
    var(--bg-900);
}
.close .wrap {
  text-align: center;
}
.close h2 {
  margin: 0 auto;
  max-width: 20ch;
}
.close p {
  margin: 20px auto 0;
  max-width: 56ch;
  font-size: 16px;
  color: var(--ink-dim);
}
.close .row {
  margin-top: 32px;
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============ footer ============ */
footer {
  border-top: 1px solid var(--brass-line);
  padding: 64px 0 34px;
  background: var(--bg-900);
}
.foot {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-hi);
}
.bcol .bname {
  font-family: "Zodiak", serif;
  font-size: 22px;
  color: var(--ink);
}
.bcol .bsub {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-top: 4px;
}
.bcol p {
  font-size: 13.5px;
  color: var(--ink-dim);
  margin-top: 16px;
  line-height: 1.6;
  max-width: 34ch;
}
.bcol h4 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-bright);
  margin-bottom: 16px;
}
.bcol a {
  display: block;
  font-size: 14px;
  color: var(--ink-dim);
  padding: 5px 0;
  transition: color 0.18s ease;
}
.bcol a:hover {
  color: var(--ink);
}
.bcol address a {
  color: var(--ink-soft);
}
.hrs {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}
.hrs span {
  font-size: 13.5px;
  color: var(--ink-dim);
}
.hrs b {
  color: var(--ink-soft);
  font-weight: 600;
}
.subfoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 28px;
}
.subfoot span {
  font-size: 12.5px;
  color: var(--ink-dim);
}
.pwr {
  font-size: 12.5px;
  color: var(--ink-dim);
}
.pwr b {
  color: #22c55e;
  font-weight: 600;
}

/* ============ reveal on scroll ============ */
/* Scoped to .js so the page is fully legible with no JavaScript. Without this
   guard every section stays at opacity 0 and the site renders as a blank page
   whenever the inline script fails, is blocked, or has not run yet. */
.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
.rv.in {
  opacity: 1;
  transform: none;
}
.rv.d1 {
  transition-delay: 0.08s;
}
.rv.d2 {
  transition-delay: 0.16s;
}
.rv.d3 {
  transition-delay: 0.24s;
}

/* ============ responsive ============ */
@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .hero-panel {
    order: -1;
  }
  .frow,
  .frow.flip {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .frow.flip .fmedia {
    order: 0;
  }
  .svc-index {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rev-grid,
  .review-grid {
    grid-template-columns: 1fr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .foot {
    grid-template-columns: 1fr 1fr;
  }
  .specbar .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
  .masonry,
  .tst-wall {
    columns: 2;
  }
}
@media (max-width: 720px) {
  .navlinks > a:not(.callkey),
  .hasmenu,
  .callkey {
    display: none;
  }
  .navtoggle {
    display: flex;
  }
  section {
    padding: 62px 0;
  }
  .keypad-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .service-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px 0;
  }
  .service-row .more {
    display: none;
  }
  .work-grid {
    grid-template-columns: 1fr 1fr;
  }
  .marquee-track span {
    padding: 14px 22px;
    font-size: 13px;
  }
  .subhero {
    min-height: 54vh;
  }
}
@media (max-width: 520px) {
  .work-grid {
    grid-template-columns: 1fr;
  }
  .work-grid figure {
    aspect-ratio: 5/4;
  }
  .svc-index {
    grid-template-columns: 1fr;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .masonry,
  .tst-wall {
    columns: 1;
  }
  .foot {
    grid-template-columns: 1fr;
  }
  .rating-lead {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .rv {
    opacity: 1;
    transform: none;
  }
  .marquee-track {
    flex-wrap: wrap;
    width: auto;
    transform: none;
  }
  .marquee-track span {
    border-bottom: 1px solid var(--line-hi);
  }
}

/* ============================================================
   LIGHT THEME — "showroom daylight"
   Same Control Room system, mapped into warm daylight. Dark is the
   default and brand-correct; light is the opt-in via the header switch.
   The token ramp keeps its dark-mode ORDER (950 = base canvas, higher
   numbers = raised/lighter), just shifted into light values, so every
   intended contrast relationship survives untouched. Only the handful of
   elements that hardcode dark literals get an explicit override.
   ============================================================ */
:root[data-theme="light"] {
  --bg-950: #eceef0; /* page canvas — warm bone */
  --bg-900: #f2f4f6; /* footer / close band / panel-dark-end */
  --bg-850: #f5f7f9;
  --bg-800: #f9fbfc; /* card + panel light */
  --bg-700: #fcfdfe; /* raised keycaps / buttons */
  --bg-600: #ffffff; /* brightest raise */
  --line-hi: rgba(18, 30, 42, 0.14);
  --line-lo: rgba(0, 0, 0, 0.1);
  --ink: #14181c; /* near-black warm graphite */
  --ink-soft: #333b42;
  --ink-dim: #68727a;
  --brass: #2f6d9e; /* darkened so brass text passes on cream */
  --brass-bright: #2b6592;
  --brass-line: rgba(47, 109, 158, 0.4);
  --blue: #2c6c99; /* darkened so link/accent text reads on light */
  --blue-bright: #2c6c99;
}
/* flat warm canvas — the dark brushed-metal screen texture is dark-only */
:root[data-theme="light"] body::before {
  display: none;
}
/* elements that hardcode dark literals against the page canvas */
:root[data-theme="light"] #hdr.solid {
  background: rgba(240, 236, 228, 0.9);
  box-shadow: 0 8px 24px rgba(60, 50, 30, 0.12);
}
:root[data-theme="light"] .mobilemenu {
  background: rgba(240, 236, 228, 0.98);
}
:root[data-theme="light"] .close {
  background:
    radial-gradient(
      ellipse 70% 100% at 50% 0%,
      rgba(44, 108, 153, 0.1),
      transparent 70%
    ),
    var(--bg-900);
}
/* readouts / lit keys sit on the always-dark hero photo + keypad — keep bright */
:root[data-theme="light"] .now-readout .now-tag {
  color: rgba(255, 255, 255, 0.6);
}
:root[data-theme="light"] .now-label {
  color: #83c4f0;
}
:root[data-theme="light"] .keybtn-phys.on {
  color: #83c4f0;
}

/* ============ theme switch (an on-brand lighting-control toggle) ============ */
.themeswitch {
  position: relative;
  flex: 0 0 auto;
  width: 58px;
  height: 30px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: linear-gradient(160deg, var(--bg-900), var(--bg-950));
  clip-path: polygon(
    8px 0,
    100% 0,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%,
    0 8px
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px var(--brass-line),
    inset 0 -6px 10px -6px rgba(0, 0, 0, 0.7);
  display: inline-flex;
  align-items: center;
  transition: box-shadow 0.25s ease;
}
.themeswitch:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--brass-bright),
    0 0 0 2px var(--brass-line);
}
.themeswitch .ts-ic {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  z-index: 1;
  pointer-events: none;
  transition: color 0.3s ease;
}
.themeswitch .ts-ic svg {
  width: 13px;
  height: 13px;
}
.themeswitch .ts-sun {
  left: 9px;
}
.themeswitch .ts-moon {
  right: 9px;
}
.themeswitch .ts-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 25px;
  height: 24px;
  z-index: 0;
  background: linear-gradient(
    160deg,
    var(--brass-bright),
    var(--brass) 55%,
    #7c5b34
  );
  clip-path: polygon(
    6px 0,
    100% 0,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    0 100%,
    0 6px
  );
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.28s cubic-bezier(0.4, 0.9, 0.3, 1.3);
}
/* default (dark, or no attr yet): knob right over the moon */
.themeswitch .ts-sun {
  color: var(--ink-dim);
}
.themeswitch .ts-moon {
  color: #1c1710;
}
.themeswitch .ts-knob {
  transform: translateX(27px);
}
/* light: knob slides left over the sun */
:root[data-theme="light"] .themeswitch .ts-knob {
  transform: translateX(0);
}
:root[data-theme="light"] .themeswitch .ts-sun {
  color: #3a2c12;
}
:root[data-theme="light"] .themeswitch .ts-moon {
  color: var(--ink-dim);
}

/* smooth cross-fade, only while a switch is in progress (no load flash) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition:
    background-color 0.45s ease,
    background-image 0.45s ease,
    border-color 0.45s ease,
    color 0.35s ease,
    box-shadow 0.45s ease,
    fill 0.35s ease,
    transform 0.3s ease !important;
}
/* keep the reduced-motion contract: no forced transition on theme switch */
@media (prefers-reduced-motion: reduce) {
  html.theme-anim,
  html.theme-anim *,
  html.theme-anim *::before,
  html.theme-anim *::after {
    transition-duration: 0.001ms !important;
  }
}

/* ============ V1 refinements (append-only) ============ */

/* engraved spec plate: replaces the four gauge-and-needle stat cards */
.specplate {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line-hi);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 60%),
    var(--bg-850);
}
.specplate .spcell {
  padding: 40px 30px;
  border-right: 1px solid var(--line-hi);
}
.specplate .spcell:last-child {
  border-right: 0;
}
.specplate .stat-figure {
  font-family: "Zodiak", Georgia, serif;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
}
.specplate .stat-label {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-dim);
}
@media (max-width: 900px) {
  .specplate {
    grid-template-columns: 1fr 1fr;
  }
  .specplate .spcell:nth-child(2n) {
    border-right: 0;
  }
  .specplate .spcell:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-hi);
  }
}
@media (max-width: 520px) {
  .specplate {
    grid-template-columns: 1fr;
  }
  .specplate .spcell {
    border-right: 0;
    border-bottom: 1px solid var(--line-hi);
  }
  .specplate .spcell:last-child {
    border-bottom: 0;
  }
}

/* header: one row, established date left, pinned location right. sentence case,
   so it is not an eyebrow. overrides the original .mark i by cascade order. */
.mark {
  width: fit-content;
}
.mark i {
  font-style: normal;
  font-family: "General Sans", sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-dim);
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  line-height: 1.2;
  white-space: nowrap;
}
.mark i .loc {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-soft);
}
.mark i .loc svg {
  width: 12px;
  height: 12px;
  opacity: 0.9;
  color: var(--blue-bright);
  flex: 0 0 auto;
}

/* shape lock: .keybtn hardcodes an 11px chamfer polygon that bypasses the
   zeroed --chamfer tokens. square it. */
.keybtn,
.footcall {
  clip-path: none;
}

/* footer call card expanded. scoped to beat .bcol a (0,1,1). */
.bcol a.footcall {
  margin-top: 26px;
  padding: 21px 40px;
  gap: 15px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--brass-line);
  background: linear-gradient(160deg, var(--bg-600), var(--bg-850));
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.bcol a.footcall:hover {
  border-color: var(--blue);
  background: linear-gradient(160deg, var(--bg-700), var(--bg-800));
}
.bcol a.footcall svg {
  width: 22px;
  height: 22px;
  color: var(--blue-bright);
}

/* reviews: scroll-snap carousel fed by the real 8-review set */
.review-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 94%, transparent);
  scrollbar-width: thin;
}
.review-grid::-webkit-scrollbar {
  height: 3px;
}
.review-grid::-webkit-scrollbar-track {
  background: var(--line-hi);
}
.review-grid::-webkit-scrollbar-thumb {
  background: var(--blue);
}
.review-grid > * {
  flex: 0 0 clamp(290px, 30vw, 380px);
  scroll-snap-align: start;
}
@media (max-width: 620px) {
  .review-grid > * {
    flex: 0 0 86vw;
  }
}

/* NetRyse mark is always brand green, never the site accent */
.pwr {
  color: var(--ink-dim);
  font-weight: 500;
}
.pwr b {
  color: var(--nr-green);
  font-weight: 700;
}

/* ============ reviews: auto-spinning carousel ============
   Seamless loop: the 8 real reviews are rendered twice and the track slides
   exactly one set, so it reads as endless. Pauses on hover so a visitor can
   actually read one. Gap lives as padding on the cards, not grid gap, or the
   -50% wrap would drift by half a gap each cycle. */
.revmarq {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 5%,
    #000 95%,
    transparent
  );
}
.revtrack {
  display: flex;
  width: max-content;
  animation: revspin 78s linear infinite;
}
.revtrack:hover,
.revtrack:focus-within {
  animation-play-state: paused;
}
.revtrack > * {
  flex: 0 0 clamp(300px, 26vw, 384px);
  padding-right: 18px;
  box-sizing: border-box;
}
@keyframes revspin {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  /* no auto-motion: hand control back as a normal scroller */
  .revtrack {
    animation: none;
  }
  .revmarq {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .revtrack > * {
    scroll-snap-align: start;
  }
}

/* Carousel goes full-bleed: breaks out of the 1240px container to the full
   viewport so more cards are visible and both edge fades land at the screen
   edges. body already has overflow-x:hidden, so no horizontal scrollbar. */
.revmarq {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 4%,
    #000 96%,
    transparent
  );
}
.revtrack > * {
  padding-right: 22px;
}

/* Curt's real logo, integrated 2026-07-27 (he sent it, gunmetal + blue play-
   mark, background removed). Appended per the append-only CSS rule -- this
   overrides .mark's column direction by cascade order, same pattern as the
   header-row override above. */
.mark {
  flex-direction: row;
  align-items: center;
  gap: 11px;
}
.mark-icon {
  height: 34px;
  width: auto;
  flex: 0 0 auto;
  display: block;
}
.mark-text {
  display: flex;
  flex-direction: column;
}

/* footer brand mark: fixed-height box, image anchored to the bottom so the
   logo's mixed icon+wordmark art lines up with the address text beside it
   instead of floating high in extra transparent canvas. */
.bmark {
  height: 108px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 4px;
}
.bmark img {
  max-height: 100%;
  width: auto;
  display: block;
}

/* TCPA consent checkbox + form error state, added 2026-07-27 when the contact
   form was wired to a real backend. Consent is opt-in and not required to
   submit -- unchecked by default, per TCPA guidance (never pre-check). */
.consent {
  margin-top: 4px;
}
.checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.checkline input[type="checkbox"] {
  width: auto;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--blue);
}
.checkline span {
  font-size: 12px;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.5;
  color: var(--ink-dim);
}
.form-err {
  display: none;
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-dim);
}
.form-err a {
  color: var(--ink);
  border-bottom: 1px solid var(--brass-line);
}

/* Header logo doubled 34px -> 68px at Anand's request 2026-07-28, and pulled
   flush to the container edge so the bigger mark reads as anchored left rather
   than floating. Vertical nav padding comes down so the bar does not balloon
   with it. Appended per the append-only CSS rule. */
.nav {
  padding: 11px 22px;
}
.mark-icon {
  height: 68px;
  margin-left: -4px;
}