/* AVELAT Website V1.2 */
/* Service-first AVELAT homepage */

:root {
  --black: #0a0b0c;
  --charcoal: #141617;
  --ivory: #f4f1ea;
  --paper: #f1eee7;
  --gold: #c79a50;
  --gold-soft: #d8b57a;
  --ink: #17191a;
  --muted: #6d7174;
  --glass: rgba(244, 241, 234, .78);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a { color: inherit; }

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(5,6,7,.50), rgba(5,6,7,.13)),
    url("/assets/avelat-clean-background.png")
    center / cover no-repeat;
}

.site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.18), transparent 35%, rgba(0,0,0,.08));
}

.topbar {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 50;
  width: min(1360px, calc(100% - 32px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 34px;
  align-items: center;
  padding: 16px 22px;
  transform: translateX(-50%);
  background: rgba(10,11,12,.80);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

.brand {
  color: var(--gold-soft);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-decoration: none;
}

.brand:hover { color: #f0d3a2; }

.nav-links {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.nav-links a {
  color: rgba(255,255,255,.86);
  font-size: .72rem;
  letter-spacing: .09em;
  text-decoration: none;
}

.nav-links a:hover { color: var(--gold); }

.top-cta {
  padding: 11px 17px;
  border: 1px solid rgba(199,154,80,.85);
  border-radius: 6px;
  font-size: .68rem;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.hero,
.service-hero {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: 140px 5.5vw 80px;
}

.service-hero { min-height: 76vh; }

.hero-glass {
  width: min(780px, 100%);
  padding: 40px;
  background: rgba(11,12,13,.44);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  box-shadow: 0 30px 90px rgba(0,0,0,.26);
}

.eyebrow {
  margin: 0 0 14px;
  color: #e6c58f;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.dark-accent { color: #9b6b29; }

h1,
h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.045em;
}

h1 {
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  line-height: .89;
}

h1 em {
  color: var(--gold-soft);
  font-weight: 400;
}

h2 {
  font-size: clamp(3rem, 5vw, 5.6rem);
  line-height: .94;
}

.hero-copy {
  max-width: 690px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 1.08rem;
  line-height: 1.75;
}

.text-link {
  display: inline-flex;
  gap: 12px;
  margin-top: 24px;
  font-size: .70rem;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link span {
  color: var(--gold);
  font-size: 1rem;
}

.dark-link { color: var(--ink); }

.float-panel {
  width: min(1420px, calc(100% - 7vw));
  margin: 0 auto;
  box-shadow: 0 35px 95px rgba(0,0,0,.30);
}

.light-panel {
  color: var(--ink);
  background: rgba(247,245,240,.96);
  backdrop-filter: blur(4px);
}

.dark-panel {
  color: #fff;
  background: rgba(12,13,14,.96);
}

.glass-panel {
  color: var(--ink);
  background: var(--glass);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,.55);
}

.panel-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 95px 40px;
}

.section-heading {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 55px;
}

.section-heading > p,
.body-copy p {
  color: var(--muted);
  line-height: 1.75;
}

.dark-panel .body-copy p,
.dark-panel .feature-grid > div > p {
  color: rgba(255,255,255,.70);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.service-card {
  position: relative;
  min-height: 255px;
  padding: 30px;
  color: var(--ink);
  text-decoration: none;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(20,22,23,.11);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  background: #fff;
  box-shadow: 0 18px 45px rgba(0,0,0,.09);
}

.number {
  color: #9c6d2e;
  font-size: .65rem;
}

.service-card h3 {
  margin: 48px 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
  font-weight: 400;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.65;
}

.card-arrow {
  position: absolute;
  right: 26px;
  bottom: 24px;
  color: #9c6d2e;
  font-size: 1.2rem;
}

.background-window {
  height: 250px;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
}

.background-window span {
  font-size: .70rem;
  letter-spacing: .24em;
  text-shadow: 0 2px 20px #000;
  text-transform: uppercase;
}

.small-window { height: 130px; }

.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.feature-grid > div > p {
  color: var(--muted);
  line-height: 1.75;
}

/* Lighting day-to-evening slider */

.lighting-demo {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  background: #17191a;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.lighting-image {
  position: absolute;
  inset: 0;
  background-image: url("/assets/avelat-clean-background.png");
  background-position: center;
  background-size: cover;
}

.day-scene {
  filter: brightness(1.17) saturate(.88);
}

.evening-scene {
  clip-path: inset(0 0 0 50%);
  filter: brightness(.64) saturate(1.24) sepia(.24);
  box-shadow: inset 0 0 135px rgba(255,140,35,.24);
}

.evening-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 56% 50%, rgba(255,165,75,.18), transparent 42%),
    linear-gradient(0deg, rgba(20,10,4,.14), transparent);
}

.lighting-demo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), transparent 42%, rgba(255,130,30,.10));
}

.lighting-label {
  position: absolute;
  top: 22px;
  z-index: 6;
  padding: 8px 11px;
  color: #fff;
  background: rgba(10,11,12,.67);
  backdrop-filter: blur(8px);
  font-size: .62rem;
  letter-spacing: .18em;
}

.day-label { left: 22px; }

.evening-label {
  right: 22px;
  color: #e5bc79;
}

.lighting-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 7;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(229,188,121,.92);
  pointer-events: none;
}

.slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #d8b57a;
  background: rgba(10,11,12,.90);
  border: 1px solid #d8b57a;
  border-radius: 50%;
  font-size: 1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,.36);
}

.lighting-slider {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
}

.good-night-card {
  padding: 45px;
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 20px;
  box-shadow: 0 20px 55px rgba(0,0,0,.10);
}

.scene-button {
  width: 100%;
  padding: 20px;
  color: #fff;
  background: #111;
  border: 1px solid rgba(199,154,80,.75);
  border-radius: 10px;
  letter-spacing: .18em;
}

.moon {
  margin-right: 14px;
  color: var(--gold);
}

.scene-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 24px;
}

.scene-steps span {
  padding-top: 14px;
  color: var(--muted);
  border-top: 1px solid rgba(20,22,23,.18);
  font-size: .67rem;
  text-align: center;
}

.project-placeholder-grid {
  display: grid;
  grid-template-columns: 1.3fr .85fr .85fr;
  gap: 14px;
}

.project-placeholder {
  min-height: 300px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.58);
  background: linear-gradient(145deg, #2a2d2f, #111314);
  border: 1px solid rgba(255,255,255,.10);
  font-size: .68rem;
  letter-spacing: .18em;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 35px;
}

.credential-grid > div {
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.credential-grid strong {
  display: block;
  color: var(--gold-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
}

.credential-grid span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,.58);
  font-size: .65rem;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.contact-panel { text-align: center; }

.contact-inner h2 {
  max-width: 980px;
  margin: 0 auto;
}

.contact-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.primary-button,
.secondary-button {
  padding: 15px 20px;
  font-size: .72rem;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-button {
  color: #fff;
  background: #111;
  border: 1px solid #111;
}

.secondary-button {
  color: #111;
  border: 1px solid rgba(20,22,23,.35);
}

.footer-space { height: 150px; }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s ease;
}

.reveal.show {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .topbar {
    top: 10px;
    grid-template-columns: 1fr auto;
  }

  .nav-links { display: none; }

  .hero,
  .service-hero {
    padding: 125px 18px 55px;
  }

  .hero-glass {
    width: 100%;
    padding: 28px;
  }

  h1 {
    font-size: clamp(3.1rem, 15vw, 5rem);
  }

  .float-panel {
    width: calc(100% - 18px);
  }

  .panel-inner {
    padding: 68px 22px;
  }

  .section-heading,
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .service-grid,
  .project-placeholder-grid {
    grid-template-columns: 1fr;
  }

  .background-window {
    height: 130px;
  }

  .lighting-demo {
    min-height: 320px;
  }

  .scene-steps,
  .credential-grid {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    flex-direction: column;
  }
}


/* GOOD NIGHT INTERACTIVE SCENE */

.good-night-demo {
  overflow: hidden;
  padding: 18px;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.68);
  border-radius: 22px;
  box-shadow: 0 24px 65px rgba(0,0,0,.15);
}

.smart-room {
  position: relative;
  height: 340px;
  overflow: hidden;
  background: #111;
  border-radius: 14px;
}

.room-image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.04)),
    url("/assets/avelat-clean-background.png") center / cover no-repeat;
  transform: scale(1.03);
  filter: brightness(1) saturate(1);
  transition: filter .8s ease;
}

.room-image.lights-off {
  filter: brightness(.48) saturate(.82);
}

.room-light-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 20% 38%, rgba(255,190,95,.24), transparent 18%),
    radial-gradient(circle at 42% 35%, rgba(255,185,85,.18), transparent 18%),
    radial-gradient(circle at 66% 32%, rgba(255,176,72,.16), transparent 18%),
    linear-gradient(0deg, rgba(255,150,60,.10), transparent 55%);
  transition: opacity .8s ease;
}

.room-light-glow.off {
  opacity: 0;
}

.room-dim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(8,9,11,0);
  transition: background .8s ease;
  pointer-events: none;
}

.room-dim.night {
  background: rgba(4,7,12,.48);
}

/* Three motorized roller shades positioned only over the glass/window zones */
.shade {
  position: absolute;
  top: 7%;
  z-index: 5;
  height: 0;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(64,66,67,.98),
      rgba(44,46,47,.98)
    );
  border-top: 4px solid rgba(20,20,20,.96);
  border-bottom: 2px solid rgba(199,154,80,.62);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  transition: height .75s cubic-bezier(.22,.75,.18,1);
}

.shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.025) 0 1px,
      transparent 1px 5px
    );
}

.shade-1 {
  left: 4%;
  width: 15%;
}

.shade-2 {
  left: 20%;
  width: 15%;
}

.shade-3 {
  left: 36%;
  width: 15%;
}

.shade.closed {
  height: 67%;
}

.tv-screen {
  position: absolute;
  top: 27%;
  right: 8%;
  z-index: 7;
  width: 25%;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  color: #ddd;
  background: radial-gradient(circle at 50% 50%, #263849, #0b1117 65%);
  border: 3px solid #0b0b0b;
  box-shadow: 0 10px 25px rgba(0,0,0,.38);
  transition: background .45s ease, color .45s ease, box-shadow .45s ease;
}

.tv-screen span {
  font-size: .52rem;
  letter-spacing: .18em;
}

.tv-screen.off {
  color: transparent;
  background: #050505;
  box-shadow: 0 5px 14px rgba(0,0,0,.32);
}

.room-status {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 9;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.lock-status {
  padding: 8px 10px;
  color: #fff;
  background: rgba(8,9,10,.72);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  font-size: .55rem;
  letter-spacing: .14em;
  transition: color .35s ease, border-color .35s ease;
}

.lock-status.locked {
  color: #e3bd7f;
  border-color: rgba(199,154,80,.76);
}

.thermostat {
  width: 70px;
  height: 70px;
  display: grid;
  align-content: center;
  justify-items: center;
  color: #fff;
  background: rgba(8,9,10,.76);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
}

.thermostat-label {
  font-size: .42rem;
  letter-spacing: .12em;
}

.thermostat strong {
  margin-top: 3px;
  color: #e5c28b;
  font-size: 1.15rem;
  font-weight: 500;
}

.scene-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-top: 15px;
}

.scene-step {
  padding: 10px 5px 0;
  color: #777;
  border-top: 1px solid rgba(20,22,23,.18);
  text-align: center;
  transition: color .3s ease, border-color .3s ease;
}

.scene-step span {
  display: block;
  font-size: .47rem;
}

.scene-step strong {
  display: block;
  margin-top: 3px;
  font-size: .58rem;
  font-weight: 500;
}

.scene-step.active {
  color: #9c6d2e;
  border-color: #c79a50;
}

.scene-step.complete {
  color: #232323;
  border-color: rgba(199,154,80,.70);
}

.scene-button {
  width: 100%;
  margin-top: 14px;
  padding: 17px 20px;
  color: #fff;
  background: #111;
  border: 1px solid rgba(199,154,80,.75);
  border-radius: 9px;
  letter-spacing: .18em;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}

.scene-button:hover { background: #191919; }
.scene-button:active { transform: scale(.99); }
.scene-button:disabled { cursor: wait; opacity: .82; }

@media (max-width: 900px) {
  .smart-room { height: 280px; }
}

/* REAL CONTROL4 VIDEO */
.control4-video-card {
  padding: 12px;
  background: rgba(255,255,255,.48);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px;
  box-shadow: 0 24px 65px rgba(0,0,0,.16);
}

.video-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #090a0b;
  border-radius: 14px;
}

.video-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 56%, rgba(5,6,7,.84));
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(8,9,10,.74);
  border: 1px solid rgba(216,181,122,.85);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: transform .25s ease, opacity .25s ease;
}

.video-play:hover { transform: translate(-50%, -50%) scale(1.04); }
.video-play.playing { top: 24px; right: 24px; left: auto; width: 62px; height: 62px; transform: none; opacity: .78; }
.video-play.playing:hover { transform: none; opacity: 1; }

.play-icon {
  margin-top: 19px;
  color: var(--gold-soft);
  font-size: 1.6rem;
}

.play-label {
  align-self: start;
  font-size: .48rem;
  letter-spacing: .14em;
}

.video-play.playing .play-icon { margin: 0; font-size: 1rem; }
.video-play.playing .play-label { display: none; }

body { isolation:isolate; }
section[id] { scroll-margin-top:110px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,320px); gap:40px; align-items:center; min-height:90vh; }
.hero h1 { font-size:clamp(2.7rem,4.8vw,5rem); line-height:1.04; }
.hero-tagline { font:italic 1.5rem Georgia,serif; color:var(--gold-soft); }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.hero-actions .primary-button { background:var(--gold-soft); color:#111; border-color:var(--gold-soft); }
.hero-actions .secondary-button { color:#fff; border-color:#ccc; }
.intro-film { margin:0; padding:9px; border:1px solid #ffffff40; border-radius:20px; background:#0a0b0cdd; box-shadow:0 20px 60px #0006; }
.intro-film video { width:100%; display:block; aspect-ratio:4/5; border-radius:12px; object-fit:contain; }
.intro-film figcaption { font-size:.875rem; padding:14px 5px 8px; color:#ddd; }
button.service-card { font-family:inherit; text-align:left; cursor:pointer; }
.service-card .number { font:2rem Georgia,serif; }
.service-card h3 { margin-top:22px; }
.service-card p { font-size:1rem; padding-right:12px; }
.eyebrow,.nav-links a,.text-link,.top-cta,.primary-button,.secondary-button { font-size:.875rem; }
.credential-grid span { font-size:.875rem; letter-spacing:0; }
.background-window { height:150px; }
.background-window span { font-size:.875rem; }
dialog { width:min(580px,calc(100% - 40px)); padding:40px; color:#17191a; background:var(--ivory); border:1px solid var(--gold); border-radius:15px; }
dialog::backdrop { background:#000b; backdrop-filter:blur(6px); }
dialog h2 { font-size:3rem; }
dialog p:not(.eyebrow) { line-height:1.75; margin-bottom:30px; }
dialog a { display:inline-block; }
#closeDialog { position:absolute; right:14px; top:8px; font-size:2rem; background:none; border:0; cursor:pointer; }
:focus-visible { outline:3px solid #ad7528; outline-offset:4px; }
@media(max-width:1000px) { .hero { grid-template-columns:1fr; gap:24px; } .intro-film { width:100%; max-width:300px; justify-self:center; } }
@media(max-width:600px) { .topbar { gap:10px; padding:14px; } .top-cta { font-size:.75rem; letter-spacing:0; } h2 { font-size:2.8rem; line-height:1.04; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .reveal { opacity:1; transform:none; } * { transition:none!important; } }

.video-caption {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  color: #fff;
}

.video-caption span {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-soft);
  font-size: .52rem;
  letter-spacing: .16em;
}

.video-caption strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  font-weight: 400;
}

@media (max-width: 900px) {
  .video-play { width: 96px; height: 96px; }
  .play-icon { margin-top: 13px; }
}

/* Single hero, section-width film and understated service cards */
.hero { display:flex; align-items:center; min-height:86vh; }
.hero-glass { max-width:780px; }
.film-banner { position:relative; margin:0 auto 70px; height:460px; overflow:hidden; background:#101112; display:grid; place-items:center; isolation:isolate; }
.film-ambient { position:absolute; inset:-40px; z-index:-1; background:linear-gradient(90deg,#0a0b0ce6,#0a0b0c99),url("/assets/showcase-poster.jpg") center/cover; filter:blur(28px); opacity:.6; }
.film-banner video { display:block; width:100%; height:100%; min-height:0; object-fit:contain; }
.film-banner figcaption { position:absolute; top:40px; left:40px; max-width:22%; font:1.8rem Georgia,serif; color:var(--ivory); }
.film-banner figcaption span { display:block; margin-bottom:12px; color:var(--gold-soft); font: .875rem system-ui,sans-serif; letter-spacing:.16em; }
.banner-toggle { position:absolute; bottom:22px; right:24px; min-width:80px; min-height:44px; padding:10px 18px; color:#fff; background:#0a0b0ccc; border:1px solid #d8b57a88; border-radius:3px; cursor:pointer; font: .875rem system-ui,sans-serif; }
.service-card { min-height:220px; padding:36px 30px; border:0; border-top:1px solid #c79a5066; background:rgba(255,255,255,.32); }
.service-card h3 { margin:0 0 18px; font-size:2rem; }
.service-card p { padding-right:16px; }
.service-card:hover { transform:translateY(-3px); }
@media(max-width:900px) {
  .film-banner { height:420px; margin-bottom:45px; }
  .film-banner figcaption { top:20px; left:20px; font-size:1.3rem; max-width:19%; }
}
@media(max-width:600px) {
  .hero { min-height:80vh; }
  .film-banner { height:auto; aspect-ratio:4/5; }
  .film-banner figcaption { display:none; }
  .banner-toggle { bottom:12px; right:12px; }
  .service-card { min-height:180px; padding:28px; }
}

/* V1.3 — cinematic Control4 story */
.film-banner {
  height: auto;
  min-height: 540px;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr);
  place-items: stretch;
  margin-bottom: 70px;
  background: #0d0f10;
}
.film-copy {
  z-index: 2;
  align-self: center;
  max-width: 680px;
  padding: 64px 44px 64px 64px;
}
.film-copy h2 { font-size: clamp(3rem, 4.6vw, 5.5rem); }
.film-copy > p:not(.eyebrow) { max-width: 610px; color: rgba(255,255,255,.72); font-size: 1.02rem; line-height: 1.75; }
.film-frame { position: relative; z-index: 2; min-height: 540px; overflow: hidden; background: rgba(0,0,0,.36); }
.film-frame::before { content:""; position:absolute; inset:0; z-index:-1; background:url("/assets/showcase-poster.jpg") center/cover; filter:blur(22px); opacity:.32; transform:scale(1.12); }
.film-banner .film-frame video { width:100%; height:100%; object-fit:contain; }
.scene-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.scene-list span { padding:9px 11px; color:#ddd; border:1px solid rgba(216,181,122,.30); font-size:.65rem; letter-spacing:.10em; text-transform:uppercase; }
.section-heading h2 em { color:#9b6b29; font-weight:400; }

/* Audio page */
.audio-bg { background:linear-gradient(90deg,rgba(5,6,7,.62),rgba(5,6,7,.20)),url("/assets/audio-outdoor-installed.jpg") center/cover no-repeat; }
.audio-hero { position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; padding:150px 6vw 78px; }
.audio-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.audio-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.82) 0%,rgba(5,6,7,.40) 43%,rgba(5,6,7,.06) 74%),linear-gradient(0deg,rgba(5,6,7,.54),transparent 55%); }
.audio-hero-copy { position:relative; z-index:2; width:min(760px,100%); }
.audio-hero h1 { font-size:clamp(3.8rem,7vw,7.2rem); }
.audio-hero-copy > p:not(.eyebrow) { max-width:650px; margin:24px 0 32px; color:rgba(255,255,255,.84); font-size:1.08rem; line-height:1.75; }
.gold-button { display:inline-block; color:#111; background:var(--gold-soft); border-color:var(--gold-soft); }
.audio-intro { margin-top:0; }
.audio-options { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.audio-options article { min-height:270px; padding:30px; background:rgba(255,255,255,.54); border-top:1px solid rgba(199,154,80,.65); }
.audio-options span,.process-grid span { color:#9b6b29; font-size:.7rem; letter-spacing:.16em; }
.audio-options h3,.process-grid h3 { margin:42px 0 14px; font:400 1.8rem Georgia,serif; }
.audio-options p,.process-grid p { color:var(--muted); line-height:1.7; }
.image-story { display:grid; grid-template-columns:1.15fr .85fr; min-height:610px; }
.image-story > img { width:100%; height:100%; min-height:610px; object-fit:cover; }
.image-story-copy { align-self:center; padding:70px; }
.image-story-copy > p:not(.eyebrow) { color:rgba(255,255,255,.70); line-height:1.75; }
.clean-list { margin:28px 0 0; padding:0; list-style:none; }
.clean-list li { padding:13px 0; border-top:1px solid rgba(255,255,255,.14); color:#ddd; }
.outdoor-image { height:min(66vw,650px); overflow:hidden; }
.outdoor-image img { width:100%; height:100%; object-fit:cover; }
.outdoor-copy-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.outdoor-copy-grid .body-copy p:first-child { margin-top:0; }
.audio-control { margin-top:70px; }
.zone-card { padding:34px; background:rgba(255,255,255,.50); border:1px solid rgba(255,255,255,.70); }
.zone-row { display:grid; grid-template-columns:.75fr 1.25fr; gap:18px; padding:17px 0; border-top:1px solid rgba(20,22,23,.13); }
.zone-row span { color:var(--muted); font-size:.78rem; }
.zone-row strong { font-weight:500; }
.audio-process { margin-top:70px; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:55px; }
.process-grid article { padding:28px 24px; border-top:1px solid rgba(216,181,122,.54); }
.process-grid h3 { color:#fff; }
.process-grid p { color:rgba(255,255,255,.62); }
.back-home { display:inline-block; margin-top:32px; color:#6b6f71; font-size:.72rem; letter-spacing:.1em; text-decoration:none; text-transform:uppercase; }
.music-platform { margin-top:70px; }
.music-platform-image { height:min(62vw,660px); overflow:hidden; background:#eae9e5; }
.music-platform-image img { width:100%; height:100%; object-fit:cover; }
.music-copy-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.music-copy-grid .body-copy > p:first-child { margin-top:0; }
.tidal-highlight { margin:28px 0 18px; padding:28px; color:#fff; background:#0d0f10; border-left:3px solid var(--gold); }
.tidal-highlight > span { display:block; margin-bottom:15px; color:var(--gold-soft); font-size:.72rem; font-weight:700; letter-spacing:.24em; }
.tidal-highlight > strong { display:block; font:400 1.65rem Georgia,serif; }
.tidal-highlight p { margin-bottom:0; color:rgba(255,255,255,.68); line-height:1.7; }
.music-note { color:#666; font-size:.88rem; line-height:1.65; }
.outdoor-entertainment { display:grid; grid-template-columns:1.18fr .82fr; min-height:620px; margin-top:70px; }
.outdoor-entertainment > img { width:100%; height:100%; min-height:620px; object-fit:cover; }
.outdoor-entertainment-copy { align-self:center; padding:65px; }
.outdoor-entertainment-copy > p:not(.eyebrow) { color:rgba(255,255,255,.70); line-height:1.75; }
.retrofit-story { margin-top:70px; }
.retrofit-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center; }
.retrofit-grid > div > p { color:var(--muted); line-height:1.75; }
.retrofit-grid > img { width:100%; min-height:430px; object-fit:cover; box-shadow:0 22px 60px rgba(0,0,0,.16); }

@media(max-width:1000px) {
  .film-banner { grid-template-columns:1fr minmax(320px,.75fr); }
  .film-copy { padding:45px 32px; }
  .film-frame { min-height:500px; }
  .image-story-copy { padding:45px; }
}
@media(max-width:800px) {
  .film-banner { min-height:0; grid-template-columns:1fr; aspect-ratio:auto; }
  .film-frame { min-height:0; height:auto; aspect-ratio:4/5; }
  .film-copy { max-width:none; padding:48px 28px; }
  .audio-options,.process-grid,.outdoor-copy-grid,.music-copy-grid,.retrofit-grid { grid-template-columns:1fr; }
  .image-story { grid-template-columns:1fr; }
  .image-story > img { min-height:380px; }
  .image-story-copy { padding:48px 28px; }
  .outdoor-image { height:60vh; }
  .music-platform-image { height:55vh; }
  .outdoor-entertainment { grid-template-columns:1fr; }
  .outdoor-entertainment > img { min-height:380px; }
  .outdoor-entertainment-copy { padding:48px 28px; }
  .retrofit-grid > img { min-height:300px; }
}

/* Video service page */
.video-bg { background:linear-gradient(90deg,rgba(5,6,7,.68),rgba(5,6,7,.18)),url("/assets/video-theater.jpg") center/cover no-repeat; }
.video-service-hero { position:relative; min-height:90vh; display:flex; align-items:flex-end; overflow:hidden; padding:150px 6vw 80px; }
.video-service-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.88) 0%,rgba(5,6,7,.50) 43%,rgba(5,6,7,.06) 78%),linear-gradient(0deg,rgba(5,6,7,.46),transparent 56%); }
.video-service-copy { position:relative; z-index:2; width:min(760px,100%); }
.video-service-copy h1 { font-size:clamp(3.7rem,6.7vw,7.1rem); }
.video-service-copy > p:not(.eyebrow) { max-width:650px; margin:24px 0 32px; color:rgba(255,255,255,.84); font-size:1.08rem; line-height:1.75; }
.video-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.video-service-grid article { min-height:260px; padding:30px; background:rgba(255,255,255,.54); border-top:1px solid rgba(199,154,80,.65); }
.video-service-grid span { color:#9b6b29; font-size:.7rem; letter-spacing:.16em; }
.video-service-grid h3 { margin:42px 0 14px; font:400 1.8rem Georgia,serif; }
.video-service-grid p { color:var(--muted); line-height:1.7; }
.brand-line { display:flex; flex-wrap:wrap; justify-content:center; gap:28px; margin-top:45px; padding-top:28px; border-top:1px solid rgba(20,22,23,.12); color:#555; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.video-flush-story { margin-top:70px; }
.outdoor-video-story { margin-top:0; }
.outdoor-video-image { height:min(62vw,660px); overflow:hidden; }
.outdoor-video-image img { width:100%; height:100%; object-fit:cover; }
.halo-story { margin-top:70px; }
.halo-grid { display:grid; grid-template-columns:1fr .88fr; gap:70px; align-items:center; }
.halo-grid > div > p:not(.eyebrow) { color:rgba(255,255,255,.70); line-height:1.75; }
.watch-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.watch-tags span { padding:9px 11px; color:#ddd; border:1px solid rgba(216,181,122,.30); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; }
.halo-film { margin:0; padding:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.13); box-shadow:0 28px 70px rgba(0,0,0,.32); }
.halo-film video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.halo-film img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.halo-film figcaption { padding:14px 4px 3px; color:rgba(255,255,255,.62); font-size:.68rem; letter-spacing:.14em; }
.video-experience { margin-top:70px; }
.experience-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:70px; align-items:center; }
.experience-grid > img { width:100%; min-height:470px; object-fit:cover; box-shadow:0 22px 60px rgba(0,0,0,.14); }
.watch-interface-card { overflow:hidden; background:#111; box-shadow:0 22px 60px rgba(0,0,0,.18); }
.watch-interface-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; image-rendering:auto; }
.watch-interface-card p { margin:0; padding:24px 26px 28px; color:rgba(255,255,255,.72); line-height:1.65; }
.watch-interface-card p span { display:block; margin-bottom:9px; color:var(--gold-soft); font-size:.68rem; letter-spacing:.16em; }
.experience-grid > div > p:not(.eyebrow) { color:var(--muted); line-height:1.75; }
.experience-steps { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; margin-top:28px; }
.experience-steps span { padding:14px 0; color:#4c5052; border-top:1px solid rgba(20,22,23,.14); font-size:.82rem; }
.experience-steps b { margin-right:10px; color:#9b6b29; font-size:.68rem; }

@media(max-width:800px) {
  .video-service-grid,.halo-grid,.experience-grid { grid-template-columns:1fr; }
  .video-service-hero { min-height:82vh; padding:135px 22px 58px; }
  .video-service-copy h1 { font-size:clamp(3.2rem,14vw,5rem); }
  .outdoor-video-image { height:55vh; }
  .experience-grid > img { min-height:320px; }
  .experience-steps { grid-template-columns:1fr; }
}

/* Electrical + lighting service page */
.electrical-bg { background:linear-gradient(90deg,rgba(5,6,7,.62),rgba(5,6,7,.18)),url("/assets/electrical-outdoor-lighting.jpg") center/cover no-repeat; }
.electrical-hero { position:relative; min-height:91vh; display:flex; align-items:flex-end; overflow:hidden; padding:150px 6vw 82px; }
.electrical-hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.electrical-hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.88) 0%,rgba(5,6,7,.55) 42%,rgba(5,6,7,.08) 78%),linear-gradient(0deg,rgba(5,6,7,.48),transparent 58%); }
.electrical-hero-copy { position:relative; z-index:2; width:min(820px,100%); }
.electrical-hero-copy h1 { font-size:clamp(3.7rem,6.6vw,7rem); }
.electrical-hero-copy > p:not(.eyebrow) { max-width:690px; margin:24px 0 32px; color:rgba(255,255,255,.86); font-size:1.08rem; line-height:1.75; }
.electrical-intro { margin-top:0; }
.electrical-service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.electrical-service-grid article { min-height:270px; padding:30px; background:rgba(255,255,255,.54); border-top:1px solid rgba(199,154,80,.65); }
.electrical-service-grid span,.lighting-detail-grid article > span { color:#9b6b29; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
.electrical-service-grid h3 { margin:42px 0 14px; font:400 1.8rem Georgia,serif; }
.electrical-service-grid p { color:var(--muted); line-height:1.7; }
.plan-story { display:grid; grid-template-columns:.78fr 1.22fr; gap:58px; align-items:center; min-height:650px; padding:70px; }
.plan-copy > p:not(.eyebrow) { color:rgba(255,255,255,.70); line-height:1.75; }
.plan-figure { margin:0; overflow:hidden; background:#eef2f4; border:1px solid rgba(255,255,255,.16); box-shadow:0 28px 70px rgba(0,0,0,.35); }
.plan-figure img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.plan-figure figcaption { padding:16px 18px; color:rgba(255,255,255,.62); background:#0c0f11; font-size:.66rem; letter-spacing:.14em; }
.lighting-story { margin-top:70px; }
.lighting-detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0 24px; margin-top:10px; }
.lighting-detail-grid article { min-height:240px; padding:28px 8px 28px 0; border-top:1px solid rgba(20,22,23,.14); }
.lighting-detail-grid h3 { margin:24px 0 12px; font:400 1.65rem Georgia,serif; }
.lighting-detail-grid p { color:var(--muted); line-height:1.7; }
.outdoor-light-story { position:relative; min-height:690px; overflow:hidden; }
.outdoor-light-story > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.outdoor-light-story::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.78),rgba(5,6,7,.05) 70%); }
.outdoor-light-overlay { position:relative; z-index:2; width:min(610px,90%); padding:110px 70px; color:#fff; }
.outdoor-light-overlay > p:not(.eyebrow) { color:rgba(255,255,255,.76); line-height:1.75; }
.controls-story { margin-top:70px; }
.controls-grid { display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:start; }
.controls-grid > div:first-child > p:not(.eyebrow) { color:var(--muted); line-height:1.75; }
.control-options { border-top:1px solid rgba(20,22,23,.14); }
.control-options div { display:grid; grid-template-columns:110px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid rgba(20,22,23,.14); }
.control-options span { color:#9b6b29; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; }
.control-options strong { color:#303335; font-weight:500; }
.electrical-capabilities { margin-top:70px; }
.light-heading > p { color:rgba(255,255,255,.68); }
.capability-list { display:grid; grid-template-columns:repeat(4,1fr); margin-top:10px; border-top:1px solid rgba(216,181,122,.36); border-left:1px solid rgba(216,181,122,.20); }
.capability-list span { min-height:92px; display:flex; align-items:center; padding:20px; color:#e2e2df; border-right:1px solid rgba(216,181,122,.20); border-bottom:1px solid rgba(216,181,122,.20); font-size:.86rem; line-height:1.45; }

@media(max-width:1000px) {
  .plan-story { grid-template-columns:1fr; padding:55px 40px; }
  .controls-grid { gap:45px; }
  .capability-list { grid-template-columns:repeat(2,1fr); }
}

@media(max-width:800px) {
  .electrical-service-grid,.lighting-detail-grid,.controls-grid { grid-template-columns:1fr; }
  .electrical-hero { min-height:84vh; padding:135px 22px 58px; }
  .electrical-hero-copy h1 { font-size:clamp(3rem,13vw,5rem); }
  .plan-story { padding:48px 24px; }
  .lighting-detail-grid article { min-height:0; }
  .outdoor-light-story { min-height:620px; }
  .outdoor-light-overlay { padding:80px 28px; }
}

@media(max-width:520px) {
  .capability-list { grid-template-columns:1fr; }
  .control-options div { grid-template-columns:1fr; gap:8px; }
}

/* Electrical page - lighting design expansion */
.plan-download { display:inline-flex; margin-top:26px; color:var(--gold-soft); }
.can-light-story { margin-top:70px; }
.temperature-story { margin-top:70px; }
.temperature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.temperature-grid article { position:relative; min-height:230px; overflow:hidden; padding:32px; background:rgba(255,255,255,.52); border-top:4px solid #d1a271; }
.temperature-grid article::before { content:""; position:absolute; top:0; right:0; width:120px; height:120px; border-radius:0 0 0 100%; opacity:.48; filter:blur(12px); }
.temperature-grid .temp-2700::before { background:#f4a94e; }
.temperature-grid .temp-3000::before { background:#ffd49a; }
.temperature-grid .temp-3500::before { background:#fff2d6; }
.temperature-grid strong { position:relative; display:block; color:#282a2b; font:400 2.6rem Georgia,serif; }
.temperature-grid span { position:relative; display:block; margin-top:18px; color:#9b6b29; font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.temperature-grid p { position:relative; margin-bottom:0; color:var(--muted); line-height:1.65; }
.temperature-note { margin:24px 0 0; color:#666; font-size:.9rem; line-height:1.65; }
.material-story { margin-top:70px; padding-top:0; overflow:hidden; }
.material-image-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; height:min(72vw,760px); min-height:620px; gap:4px; background:#111; }
.material-image-grid img { width:100%; height:100%; object-fit:cover; }
.material-image-grid .material-main { grid-row:1 / 3; }
.material-copy-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:start; }
.material-copy-grid .body-copy p:first-child { margin-top:0; }
.entertainment-light-story { display:grid; grid-template-columns:1.18fr .82fr; min-height:650px; margin-top:70px; overflow:hidden; }
.entertainment-light-story > img { width:100%; height:100%; min-height:650px; object-fit:cover; }
.scene-gallery { min-width:0; min-height:650px; display:flex; flex-direction:column; background:#090b0c; }
.scene-tabs { display:flex; flex:0 0 auto; padding:0 20px; background:#0b0d0e; border-bottom:1px solid rgba(216,181,122,.24); }
.scene-tab { position:relative; min-height:58px; padding:0 20px; color:rgba(255,255,255,.58); background:transparent; border:0; cursor:pointer; font:600 .82rem/1 Arial,sans-serif; letter-spacing:.11em; text-transform:uppercase; transition:color .2s ease,background .2s ease; }
.scene-tab::after { content:""; position:absolute; right:20px; bottom:-1px; left:20px; height:2px; background:var(--gold); transform:scaleX(0); transition:transform .2s ease; }
.scene-tab:hover { color:#fff; background:rgba(255,255,255,.035); }
.scene-tab.is-active { color:var(--gold-soft); }
.scene-tab.is-active::after { transform:scaleX(1); }
.scene-tab:focus-visible { outline:2px solid var(--gold-soft); outline-offset:-4px; }
.scene-panels { flex:1; min-height:0; }
.scene-panel { position:relative; height:100%; min-height:592px; margin:0; overflow:hidden; background:#111; }
.scene-panel[hidden] { display:none; }
.scene-panel img { display:block; width:100%; height:100%; min-height:592px; object-fit:cover; }
.scene-panel-plan img { padding:26px; object-fit:contain; background:#eef2f4; }
.scene-panel figcaption { position:absolute; right:0; bottom:0; left:0; padding:54px 30px 24px; color:rgba(255,255,255,.72); background:linear-gradient(transparent,rgba(5,6,7,.88)); font-size:.86rem; line-height:1.55; }
.scene-panel figcaption span { display:block; margin-bottom:7px; color:var(--gold-soft); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.entertainment-light-copy { align-self:center; padding:70px 64px; }
.entertainment-light-copy > p:not(.eyebrow) { color:rgba(255,255,255,.70); line-height:1.75; }
.outdoor-scene-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.outdoor-scene-tags span { padding:9px 11px; color:#eee; border:1px solid rgba(216,181,122,.4); font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; }
.heater-callout { margin-top:32px; padding:28px; color:#fff; background:#101214; border-left:3px solid var(--gold); }
.heater-callout > span { display:block; margin-bottom:13px; color:var(--gold-soft); font-size:.68rem; font-weight:700; letter-spacing:.18em; }
.heater-callout > strong { display:block; font:400 1.45rem Georgia,serif; line-height:1.35; }
.heater-callout p { margin-bottom:0; color:rgba(255,255,255,.66); font-size:.9rem; line-height:1.65; }

@media(max-width:900px) {
  .material-image-grid { height:auto; min-height:0; grid-template-columns:1fr 1fr; grid-template-rows:440px 260px; }
  .material-image-grid .material-main { grid-column:1 / 3; grid-row:auto; }
  .material-copy-grid { grid-template-columns:1fr; gap:20px; }
  .entertainment-light-story { grid-template-columns:1fr; }
  .entertainment-light-story > img { min-height:420px; }
  .scene-gallery { min-height:0; }
  .scene-tabs { padding:0 8px; }
  .scene-tab { flex:1; min-height:54px; padding:0 8px; font-size:.74rem; letter-spacing:.07em; }
  .scene-tab::after { right:8px; left:8px; }
  .scene-panel,.scene-panel img { min-height:420px; }
  .scene-panel-plan img { padding:12px; }
  .scene-panel figcaption { padding:48px 20px 18px; }
  .entertainment-light-copy { padding:48px 28px; }
}

@media(max-width:700px) {
  .temperature-grid { grid-template-columns:1fr; }
  .temperature-grid article { min-height:190px; }
  .material-image-grid { grid-template-columns:1fr; grid-template-rows:390px 230px 230px; }
  .material-image-grid .material-main { grid-column:auto; }
}

/* Dedicated Lighting page */
.lighting-page .electrical-bg { background-image:linear-gradient(90deg,rgba(5,6,7,.62),rgba(5,6,7,.18)),url("/assets/electrical-interior-lighting.jpg"); }
.lighting-page .plan-figure img { aspect-ratio:3/2; object-position:center; }
.scene-tags { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0; }
.scene-tags span { padding:9px 11px; color:#eee; border:1px solid rgba(216,181,122,.4); font-size:.67rem; letter-spacing:.1em; text-transform:uppercase; }
.lighting-gallery { margin-top:70px; padding:72px; }
.gallery-heading { display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:end; margin-bottom:42px; }
.gallery-heading h2 { margin-bottom:0; }
.gallery-heading > p { margin:0; color:rgba(255,255,255,.68); line-height:1.75; }
.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:230px; grid-auto-flow:dense; gap:10px; }
.gallery-card { position:relative; grid-column:span 4; margin:0; overflow:hidden; background:#151718; }
.gallery-card.gallery-feature { grid-column:span 8; grid-row:span 2; }
.gallery-card.gallery-wide { grid-column:span 8; }
.gallery-card.gallery-tall { grid-row:span 2; }
.gallery-open { width:100%; height:100%; display:block; padding:0; overflow:hidden; background:none; border:0; cursor:zoom-in; }
.gallery-open::after { content:""; position:absolute; inset:42% 0 0; background:linear-gradient(transparent,rgba(5,6,7,.82)); pointer-events:none; }
.gallery-open img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease,filter .5s ease; }
.gallery-open:hover img { transform:scale(1.025); filter:brightness(1.04); }
.gallery-open:focus-visible { outline:2px solid var(--gold-soft); outline-offset:-4px; }
.gallery-card figcaption { position:absolute; z-index:2; right:0; bottom:0; left:0; padding:20px 22px; color:#fff; pointer-events:none; font:400 1.08rem Georgia,serif; }
.gallery-card figcaption span { display:block; margin-bottom:7px; color:var(--gold-soft); font:700 .68rem Arial,sans-serif; letter-spacing:.15em; text-transform:uppercase; }
.gallery-note { margin:28px 0 0; color:rgba(255,255,255,.48); font-size:.84rem; letter-spacing:.04em; }
.gallery-dialog { width:min(1240px,calc(100vw - 40px)); max-width:none; padding:0; overflow:visible; color:#fff; background:#08090a; border:1px solid rgba(216,181,122,.34); box-shadow:0 30px 100px rgba(0,0,0,.72); }
.gallery-dialog::backdrop { background:rgba(2,3,4,.9); backdrop-filter:blur(8px); }
.gallery-dialog figure { margin:0; }
.gallery-dialog figure img { display:block; width:100%; max-height:82vh; object-fit:contain; background:#050607; }
.gallery-dialog figure figcaption { min-height:58px; display:flex; align-items:center; padding:16px 62px; color:rgba(255,255,255,.72); font-size:.9rem; letter-spacing:.04em; }
.gallery-dialog-close,.gallery-dialog-arrow { position:absolute; z-index:3; display:grid; place-items:center; padding:0; color:#fff; background:rgba(8,10,11,.76); border:1px solid rgba(255,255,255,.2); cursor:pointer; backdrop-filter:blur(8px); }
.gallery-dialog-close { top:14px; right:14px; width:44px; height:44px; font-size:1.8rem; line-height:1; }
.gallery-dialog-arrow { top:50%; width:48px; height:64px; transform:translateY(-50%); font-size:2.3rem; }
.gallery-dialog-prev { left:14px; }
.gallery-dialog-next { right:14px; }
.gallery-dialog-close:hover,.gallery-dialog-arrow:hover { color:var(--gold-soft); border-color:rgba(216,181,122,.65); }
.gallery-dialog-close:focus-visible,.gallery-dialog-arrow:focus-visible { outline:2px solid var(--gold-soft); outline-offset:2px; }

@media(max-width:900px) {
  .lighting-gallery { padding:54px 34px; }
  .gallery-heading { grid-template-columns:1fr; gap:18px; }
  .gallery-grid { grid-template-columns:repeat(2,1fr); grid-auto-rows:250px; }
  .gallery-card { grid-column:span 1; }
  .gallery-card.gallery-feature,.gallery-card.gallery-wide { grid-column:span 2; }
}

@media(max-width:620px) {
  .lighting-gallery { padding:46px 18px; }
  .gallery-grid { grid-template-columns:1fr; grid-auto-rows:270px; }
  .gallery-card,.gallery-card.gallery-feature,.gallery-card.gallery-wide,.gallery-card.gallery-tall { grid-column:span 1; grid-row:span 1; }
  .gallery-dialog { width:calc(100vw - 20px); }
  .gallery-dialog-arrow { width:40px; height:54px; }
  .gallery-dialog-prev { left:8px; }
  .gallery-dialog-next { right:8px; }
  .gallery-dialog figure figcaption { padding:14px 52px; }
}

/* Dedicated Electrical page */
.electrical-service-page .electrical-bg { background-image:linear-gradient(90deg,rgba(5,6,7,.68),rgba(5,6,7,.18)),url("/assets/electrical-outdoor-lighting.jpg"); }
.electrical-service-hero > img { object-position:center 58%; }
.craftsmanship-story { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; min-height:660px; padding:74px; }
.craft-copy > p:not(.eyebrow) { color:rgba(255,255,255,.7); line-height:1.75; }
.craft-standard { position:relative; min-height:500px; display:grid; grid-template-columns:1fr 1fr; align-content:end; gap:0; overflow:hidden; padding:42px; background:linear-gradient(145deg,#24282b,#0c0e0f 72%); border:1px solid rgba(216,181,122,.22); }
.craft-standard::after { content:"AVELAT"; position:absolute; top:34px; right:34px; color:rgba(216,181,122,.38); font-size:.72rem; font-weight:700; letter-spacing:.34em; }
.craft-lines { position:absolute; inset:70px 42px 155px; display:flex; flex-direction:column; justify-content:space-evenly; }
.craft-lines span { display:block; height:4px; background:linear-gradient(90deg,#d7b06f 0 23%,#8b5d2f 23% 25%,#d7b06f 25% 61%,#8b5d2f 61% 63%,#d7b06f 63%); border-radius:4px; box-shadow:0 0 16px rgba(216,181,122,.17); }
.craft-standard > p { grid-column:1 / 3; margin:0 0 20px; color:var(--gold-soft); font-size:.66rem; letter-spacing:.18em; }
.craft-standard > strong { padding:15px 16px; color:#eee; border-top:1px solid rgba(255,255,255,.12); font-size:.7rem; font-weight:500; letter-spacing:.14em; }
.craft-standard > small { grid-column:1 / 3; margin-top:22px; color:rgba(255,255,255,.45); letter-spacing:.08em; }
.craft-photo { position:relative; min-height:530px; margin:0; overflow:hidden; background:#0c0e0f; border:1px solid rgba(216,181,122,.22); box-shadow:0 28px 70px rgba(0,0,0,.32); }
.craft-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.craft-photo::after { content:""; position:absolute; inset:50% 0 0; background:linear-gradient(transparent,rgba(4,5,6,.92)); }
.craft-photo figcaption { position:absolute; z-index:2; right:32px; bottom:28px; left:32px; color:rgba(255,255,255,.76); font-size:.88rem; line-height:1.55; }
.craft-photo figcaption span { display:block; margin-bottom:9px; color:var(--gold-soft); font-size:.65rem; font-weight:700; letter-spacing:.17em; }
.panel-story { margin-top:70px; }
.panel-showcase { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:15px; }
.panel-showcase figure { margin:0; overflow:hidden; background:rgba(255,255,255,.58); border:1px solid rgba(20,22,23,.10); }
.panel-image-wrap { height:520px; display:flex; align-items:center; justify-content:center; padding:30px; background:#fff; }
.panel-image-wrap.dark-wrap { background:linear-gradient(145deg,#ecece9,#d4d5d2); }
.panel-image-wrap img { max-width:100%; max-height:100%; object-fit:contain; }
.control-panel .panel-image-wrap img { filter:drop-shadow(0 18px 22px rgba(0,0,0,.18)); }
.panel-showcase figcaption { padding:28px 30px 32px; }
.panel-showcase figcaption span { display:block; margin-bottom:13px; color:#9b6b29; font-size:.66rem; letter-spacing:.16em; }
.panel-showcase figcaption strong { display:block; color:#25282a; font:400 1.7rem Georgia,serif; }
.panel-showcase figcaption p { margin-bottom:0; color:var(--muted); line-height:1.65; }
.panel-principles { display:grid; grid-template-columns:repeat(5,1fr); margin-top:24px; border-top:1px solid rgba(20,22,23,.14); border-left:1px solid rgba(20,22,23,.10); }
.panel-principles span { min-height:76px; display:flex; align-items:center; padding:16px; color:#4b4f51; border-right:1px solid rgba(20,22,23,.10); border-bottom:1px solid rgba(20,22,23,.10); font-size:.76rem; letter-spacing:.04em; }
.floor-heat-story { display:grid; grid-template-columns:1.08fr .92fr; min-height:650px; margin-top:70px; overflow:hidden; }
.floor-heat-story > img { width:100%; height:100%; min-height:650px; object-fit:cover; }
.floor-heat-copy { align-self:center; padding:70px 64px; }
.floor-heat-copy > p:not(.eyebrow) { color:rgba(255,255,255,.7); line-height:1.75; }
.infratech-story { position:relative; min-height:760px; margin-top:70px; overflow:hidden; color:#fff; }
.infratech-story > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.infratech-story::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,6,7,.88),rgba(5,6,7,.48) 48%,rgba(5,6,7,.08) 78%); }
.infratech-overlay { position:relative; z-index:2; width:min(660px,90%); padding:95px 70px; }
.infratech-overlay > p:not(.eyebrow) { color:rgba(255,255,255,.77); line-height:1.75; }
.infratech-overlay > small { display:block; margin-top:18px; color:rgba(255,255,255,.52); }
.outdoor-evening { margin:28px 0; padding:25px 27px; background:rgba(8,10,11,.75); border-left:3px solid var(--gold); backdrop-filter:blur(10px); }
.outdoor-evening > span { display:block; color:var(--gold-soft); font-size:.66rem; letter-spacing:.17em; }
.outdoor-evening > strong { display:block; margin-top:10px; font:400 1.6rem Georgia,serif; }
.outdoor-evening p { margin-bottom:0; color:rgba(255,255,255,.68); line-height:1.6; }
.integration-story { margin-top:70px; }
.ev-story { display:grid; grid-template-columns:.82fr 1.18fr; min-height:650px; margin-top:70px; overflow:hidden; }
.ev-copy { align-self:center; padding:72px 64px; }
.ev-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.ev-service-list { margin-top:30px; border-top:1px solid rgba(255,255,255,.14); }
.ev-service-list > div { display:grid; grid-template-columns:36px 170px 1fr; gap:14px; align-items:start; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.ev-service-list span { color:var(--gold-soft); font-size:.66rem; letter-spacing:.12em; }
.ev-service-list strong { color:#f1f1ee; font-weight:500; }
.ev-service-list p { margin:0; color:rgba(255,255,255,.58); font-size:.9rem; line-height:1.55; }
.ev-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.ev-tags span { padding:9px 11px; color:#ddd; border:1px solid rgba(216,181,122,.34); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.ev-photo { position:relative; min-height:650px; margin:0; overflow:hidden; background:#111; }
.ev-photo img { width:100%; height:100%; min-height:650px; object-fit:cover; object-position:center; }
.ev-photo::after { content:""; position:absolute; inset:70% 0 0; background:linear-gradient(transparent,rgba(5,6,7,.84)); }
.ev-photo figcaption { position:absolute; z-index:2; right:28px; bottom:24px; left:28px; color:var(--gold-soft); font-size:.65rem; letter-spacing:.16em; }

@media(max-width:1000px) {
  .craftsmanship-story { grid-template-columns:1fr; padding:55px 40px; }
  .panel-principles { grid-template-columns:repeat(3,1fr); }
  .ev-service-list > div { grid-template-columns:32px 145px 1fr; }
}

@media(max-width:800px) {
  .craftsmanship-story { padding:48px 24px; }
  .craft-photo { min-height:450px; }
  .craft-standard { min-height:420px; padding:28px; }
  .craft-lines { inset:60px 28px 150px; }
  .panel-showcase { grid-template-columns:1fr; }
  .panel-image-wrap { height:430px; }
  .panel-principles { grid-template-columns:repeat(2,1fr); }
  .floor-heat-story { grid-template-columns:1fr; }
  .floor-heat-story > img { min-height:430px; }
  .floor-heat-copy { padding:48px 28px; }
  .infratech-story { min-height:850px; }
  .infratech-overlay { padding:70px 28px; }
  .ev-story { grid-template-columns:1fr; }
  .ev-copy { padding:52px 28px; }
  .ev-photo,.ev-photo img { min-height:580px; }
}

@media(max-width:520px) {
  .craft-standard > strong { padding:13px 8px; font-size:.6rem; }
  .panel-principles { grid-template-columns:1fr; }
  .ev-service-list > div { grid-template-columns:30px 1fr; }
  .ev-service-list p { grid-column:2; }
}

/* Dedicated Technology page */
.technology-page .technology-bg { background-image:linear-gradient(90deg,rgba(5,6,7,.78),rgba(5,6,7,.3)),url("/assets/technology-araknis-rack.jpg"); }
.technology-hero > img { object-position:center 48%; filter:saturate(.82) brightness(.76); }
.technology-hero .electrical-hero-shade { background:linear-gradient(90deg,rgba(4,5,6,.94) 0%,rgba(4,5,6,.72) 40%,rgba(4,5,6,.18) 74%); }
.technology-service-grid article { min-height:235px; }
.technology-network-story { display:grid; grid-template-columns:1.13fr .87fr; min-height:690px; overflow:hidden; }
.technology-network-image { position:relative; min-height:690px; overflow:hidden; background:#070809; }
.technology-network-image > img { width:100%; height:100%; min-height:690px; object-fit:cover; object-position:center; filter:saturate(.82); }
.technology-network-image::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 62%,rgba(7,8,9,.62)); }
.technology-ap-detail { position:absolute; z-index:2; right:24px; bottom:24px; width:min(310px,48%); margin:0; overflow:hidden; background:rgba(8,10,11,.94); border:1px solid rgba(216,181,122,.28); box-shadow:0 18px 45px rgba(0,0,0,.38); }
.technology-ap-detail img { display:block; width:100%; aspect-ratio:5/3; object-fit:cover; }
.technology-ap-detail figcaption { padding:13px 16px; color:var(--gold-soft); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; }
.technology-copy { align-self:center; padding:70px 64px; }
.technology-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.technology-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.technology-tags span { padding:9px 11px; color:#ddd; border:1px solid rgba(216,181,122,.34); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.cabling-story { margin-top:70px; }
.cabling-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.cabling-grid h2 { margin-bottom:24px; }
.cabling-grid > div:first-child > p:not(.eyebrow) { color:var(--muted); line-height:1.75; }
.cabling-schedule { border-top:1px solid rgba(20,22,23,.16); }
.cabling-schedule > div { display:grid; grid-template-columns:68px 210px 1fr; gap:18px; align-items:start; padding:22px 0; border-bottom:1px solid rgba(20,22,23,.13); }
.cabling-schedule span { color:#9b6b29; font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.cabling-schedule strong { color:#26292b; font-weight:600; }
.cabling-schedule p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.55; }
.rack-story { display:grid; grid-template-columns:1.15fr .85fr; min-height:700px; margin-top:70px; overflow:hidden; }
.rack-image { min-height:700px; overflow:hidden; background:#151617; }
.rack-image img { width:100%; height:100%; min-height:700px; object-fit:cover; object-position:center; }
.rack-copy { align-self:center; padding:70px 62px; }
.rack-copy > p:not(.eyebrow) { color:var(--muted); line-height:1.75; }
.rack-principles { display:grid; grid-template-columns:1fr 1fr; margin-top:32px; border-top:1px solid rgba(20,22,23,.14); border-left:1px solid rgba(20,22,23,.12); }
.rack-principles span { min-height:72px; display:flex; align-items:center; padding:15px; color:#4b4f51; border-right:1px solid rgba(20,22,23,.12); border-bottom:1px solid rgba(20,22,23,.12); font-size:.76rem; letter-spacing:.04em; }
.power-management-story { display:grid; grid-template-columns:.85fr 1.15fr; min-height:650px; margin-top:70px; overflow:hidden; }
.power-management-copy { align-self:center; padding:70px 64px; }
.power-management-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.power-management-image { position:relative; min-height:650px; margin:0; overflow:hidden; background:#090a0b; }
.power-management-image img { width:100%; height:100%; min-height:650px; object-fit:cover; }
.power-management-image::after { content:""; position:absolute; inset:68% 0 0; background:linear-gradient(transparent,rgba(5,6,7,.9)); }
.power-management-image figcaption { position:absolute; z-index:2; right:28px; bottom:24px; left:28px; color:var(--gold-soft); font-size:.65rem; letter-spacing:.16em; }
.security-story { position:relative; display:grid; grid-template-columns:.95fr 1.05fr; min-height:670px; margin-top:70px; overflow:hidden; color:#fff; background:radial-gradient(circle at 78% 45%,#2b3033 0,#101314 34%,#060708 72%); }
.security-story::before { content:""; position:absolute; inset:0; opacity:.18; background:linear-gradient(120deg,transparent 0 49%,rgba(216,181,122,.8) 49.2% 49.4%,transparent 49.6%); }
.security-copy { position:relative; z-index:2; align-self:center; padding:75px 68px; }
.security-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.security-copy small { display:block; margin-top:20px; color:rgba(255,255,255,.46); }
.security-features { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.security-features span { padding:9px 11px; color:#ddd; border:1px solid rgba(216,181,122,.34); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.security-visual { position:relative; min-height:670px; display:grid; place-items:center; overflow:hidden; }
.security-visual img { position:relative; z-index:2; width:min(620px,88%); filter:drop-shadow(0 34px 45px rgba(0,0,0,.58)); }
.security-camera-halo { position:absolute; width:430px; height:430px; border:1px solid rgba(216,181,122,.32); border-radius:50%; box-shadow:0 0 100px rgba(88,123,143,.22),inset 0 0 70px rgba(216,181,122,.07); }
.technology-integration { margin-top:70px; }

@media(max-width:1000px) {
  .technology-network-story,.rack-story,.power-management-story,.security-story { grid-template-columns:1fr; }
  .technology-network-image,.technology-network-image > img,.rack-image,.rack-image img,.power-management-image,.power-management-image img,.security-visual { min-height:560px; }
  .cabling-grid { grid-template-columns:1fr; gap:38px; }
}

@media(max-width:700px) {
  .technology-copy,.rack-copy,.power-management-copy,.security-copy { padding:50px 28px; }
  .technology-network-image,.technology-network-image > img,.rack-image,.rack-image img,.power-management-image,.power-management-image img,.security-visual { min-height:430px; }
  .technology-ap-detail { right:14px; bottom:14px; width:52%; }
  .cabling-schedule > div { grid-template-columns:58px 1fr; }
  .cabling-schedule p { grid-column:2; }
  .security-camera-halo { width:300px; height:300px; }
}

/* Dedicated Automation page */
.automation-page .automation-bg { background-image:linear-gradient(90deg,rgba(5,6,7,.72),rgba(5,6,7,.18)),url("/assets/automation-x4-touchscreen.jpg"); }
.automation-hero > img { object-position:center 48%; }
.automation-hero .electrical-hero-shade { background:linear-gradient(90deg,rgba(4,5,6,.94) 0%,rgba(4,5,6,.72) 39%,rgba(4,5,6,.12) 76%); }
.automation-service-grid article { min-height:240px; }
.x4-story { display:grid; grid-template-columns:.72fr 1.28fr; min-height:690px; overflow:hidden; }
.x4-copy { align-self:center; padding:72px 62px; }
.x4-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.x4-film { position:relative; min-height:690px; overflow:hidden; background:#070809; }
.x4-film video { width:100%; height:100%; min-height:690px; display:block; object-fit:cover; }
.x4-film::after { content:""; position:absolute; inset:62% 0 0; background:linear-gradient(transparent,rgba(4,5,6,.88)); pointer-events:none; }
.x4-film-caption { position:absolute; z-index:2; right:32px; bottom:28px; left:32px; color:rgba(255,255,255,.74); font-size:.9rem; }
.x4-film-caption span { display:block; margin-bottom:8px; color:var(--gold-soft); font-size:.66rem; font-weight:700; letter-spacing:.17em; }
.integration-map { margin-top:70px; }
.integration-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:18px; border-top:1px solid rgba(20,22,23,.15); border-left:1px solid rgba(20,22,23,.12); }
.integration-grid article { min-height:225px; padding:28px 24px; border-right:1px solid rgba(20,22,23,.12); border-bottom:1px solid rgba(20,22,23,.12); }
.integration-grid article > span { color:#9b6b29; font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.integration-grid h3 { margin:20px 0 13px; color:#26292b; font:400 1.45rem Georgia,serif; }
.integration-grid p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.6; }
.integration-note { margin:24px 0 0; color:#777; font-size:.78rem; }
.doorbell-story { display:grid; grid-template-columns:1.1fr .9fr; min-height:680px; margin-top:70px; overflow:hidden; }
.doorbell-image { position:relative; min-height:680px; margin:0; overflow:hidden; background:#08090a; }
.doorbell-image img { width:100%; height:100%; min-height:680px; display:block; object-fit:cover; }
.doorbell-image::after { content:""; position:absolute; inset:68% 0 0; background:linear-gradient(transparent,rgba(4,5,6,.88)); }
.doorbell-image figcaption { position:absolute; z-index:2; right:28px; bottom:24px; left:28px; color:var(--gold-soft); font-size:.65rem; letter-spacing:.16em; }
.doorbell-copy { align-self:center; padding:70px 62px; }
.doorbell-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.doorbell-zones { display:grid; grid-template-columns:1fr 1fr; margin-top:28px; border-top:1px solid rgba(255,255,255,.14); border-left:1px solid rgba(255,255,255,.11); }
.doorbell-zones span { min-height:64px; display:flex; align-items:center; padding:14px; color:rgba(255,255,255,.78); border-right:1px solid rgba(255,255,255,.11); border-bottom:1px solid rgba(255,255,255,.11); font-size:.74rem; letter-spacing:.05em; }
.scene-routines-story { position:relative; min-height:780px; margin-top:70px; overflow:hidden; color:#fff; }
.scene-routines-story > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.scene-routines-story::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,5,6,.94) 0%,rgba(4,5,6,.74) 48%,rgba(4,5,6,.14) 78%); }
.scene-routines-overlay { position:relative; z-index:2; width:min(740px,92%); padding:82px 70px; }
.automation-scenes { margin-top:32px; border-top:1px solid rgba(255,255,255,.15); }
.automation-scenes article { display:grid; grid-template-columns:120px 1fr; gap:20px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.15); }
.automation-scenes span { color:var(--gold-soft); font:400 1.25rem Georgia,serif; }
.automation-scenes p { margin:0; color:rgba(255,255,255,.7); line-height:1.65; }
.x4-mobile-story { display:grid; grid-template-columns:.82fr 1.18fr; min-height:650px; margin-top:70px; overflow:hidden; }
.x4-mobile-copy { align-self:center; padding:70px 64px; }
.x4-mobile-copy > p:not(.eyebrow) { color:var(--muted); line-height:1.75; }
.dark-list li { color:#565b5d; border-color:rgba(20,22,23,.14); }
.x4-mobile-image { position:relative; min-height:650px; margin:0; overflow:hidden; background:#e8e9e8; }
.x4-mobile-image img { width:100%; height:100%; min-height:650px; object-fit:cover; }
.x4-mobile-image::after { content:""; position:absolute; inset:72% 0 0; background:linear-gradient(transparent,rgba(8,9,10,.8)); }
.x4-mobile-image figcaption { position:absolute; z-index:2; right:28px; bottom:24px; left:28px; color:var(--gold-soft); font-size:.65rem; letter-spacing:.16em; }
.centralized-story { display:grid; grid-template-columns:1.15fr .85fr; min-height:700px; margin-top:70px; overflow:hidden; }
.centralized-media { position:relative; min-height:700px; overflow:hidden; background:#0a0b0c; }
.centralized-media > video { width:100%; height:100%; min-height:700px; object-fit:cover; }
.centralized-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,rgba(5,6,7,.5)); pointer-events:none; }
.centralized-panel-inset { position:absolute; z-index:2; right:22px; bottom:22px; width:min(240px,38%); padding:18px; background:rgba(238,239,236,.95); border:1px solid rgba(216,181,122,.4); box-shadow:0 20px 54px rgba(0,0,0,.38); }
.centralized-panel-inset img { display:block; width:100%; max-height:265px; object-fit:contain; }
.centralized-panel-inset span { display:block; padding-top:12px; color:#585b5c; font-size:.63rem; letter-spacing:.1em; text-transform:uppercase; }
.centralized-copy { align-self:center; padding:72px 62px; }
.centralized-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.imagination-story { margin-top:70px; }

@media(max-width:1050px) {
  .integration-grid { grid-template-columns:repeat(2,1fr); }
  .x4-story,.doorbell-story,.x4-mobile-story,.centralized-story { grid-template-columns:1fr; }
  .x4-film,.x4-film video,.doorbell-image,.doorbell-image img,.x4-mobile-image,.x4-mobile-image img,.centralized-media,.centralized-media > video { min-height:560px; }
}

@media(max-width:700px) {
  .x4-copy,.doorbell-copy,.x4-mobile-copy,.centralized-copy { padding:50px 28px; }
  .x4-film,.x4-film video,.doorbell-image,.doorbell-image img,.x4-mobile-image,.x4-mobile-image img,.centralized-media,.centralized-media > video { min-height:420px; }
  .integration-grid { grid-template-columns:1fr; }
  .integration-grid article { min-height:0; }
  .scene-routines-story { min-height:920px; }
  .scene-routines-story > img { object-position:64% center; }
  .scene-routines-story::after { background:rgba(4,5,6,.79); }
  .scene-routines-overlay { width:100%; padding:62px 28px; }
  .automation-scenes article { grid-template-columns:92px 1fr; gap:14px; }
  .doorbell-zones { grid-template-columns:1fr; }
  .centralized-panel-inset { width:43%; padding:12px; }
}

/* Annual Service Plans page */
.service-plans-page .service-plans-bg { background-image:linear-gradient(90deg,rgba(5,6,7,.74),rgba(5,6,7,.2)),url("/assets/automation-x4-touchscreen.jpg"); }
.service-plans-hero > img { object-position:center 48%; }
.service-plans-hero .electrical-hero-shade { background:linear-gradient(90deg,rgba(4,5,6,.95) 0%,rgba(4,5,6,.75) 42%,rgba(4,5,6,.14) 78%); }
.service-plan-hero-price { display:flex; align-items:baseline; gap:18px; margin:24px 0 30px; padding-left:18px; border-left:2px solid var(--gold); }
.service-plan-hero-price span { color:rgba(255,255,255,.6); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; }
.service-plan-hero-price strong { color:var(--gold-soft); font:400 1.65rem Georgia,serif; }
.care-principles article { min-height:230px; }
.plan-pricing { margin-top:70px; padding:74px; }
.plan-pricing-heading { display:grid; grid-template-columns:1fr .9fr; gap:70px; align-items:end; margin-bottom:40px; }
.plan-pricing-heading h2 { margin-bottom:0; }
.plan-pricing-heading > p:last-child { margin:0; color:rgba(255,255,255,.67); line-height:1.7; }
.plan-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.plan-card { position:relative; padding:38px; overflow:hidden; background:#f0eee9; border:1px solid rgba(216,181,122,.24); }
.plan-card-featured { background:linear-gradient(145deg,#202326,#0c0e0f); border-color:rgba(216,181,122,.56); box-shadow:0 22px 65px rgba(0,0,0,.34); }
.plan-ribbon { position:absolute; top:22px; right:-40px; width:180px; padding:8px 0; color:#17191a; background:var(--gold-soft); transform:rotate(36deg); text-align:center; font-size:.58rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.plan-card-top { padding-bottom:28px; border-bottom:1px solid rgba(20,22,23,.14); }
.plan-card-featured .plan-card-top { border-color:rgba(255,255,255,.15); }
.plan-card-top > p { margin:0 0 18px; color:#936528; font-size:.69rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.plan-card-featured .plan-card-top > p { color:var(--gold-soft); }
.plan-card-top strong { display:block; color:#222527; font:400 3.25rem Georgia,serif; line-height:1; }
.plan-card-featured .plan-card-top strong { color:#f5f3ee; }
.plan-card-top sup { margin-right:3px; font-size:1.25rem; vertical-align:top; }
.plan-card-top strong span { margin-left:8px; color:#777; font:500 .75rem Arial,sans-serif; letter-spacing:.07em; text-transform:uppercase; }
.plan-card-featured .plan-card-top strong span { color:rgba(255,255,255,.54); }
.plan-card-top small { display:block; margin-top:16px; color:#6b7072; font-size:.83rem; }
.plan-card-featured .plan-card-top small { color:rgba(255,255,255,.6); }
.plan-card > ul { margin:28px 0 32px; padding:0; list-style:none; }
.plan-card > ul li { position:relative; padding:13px 0 13px 24px; color:#515658; border-bottom:1px solid rgba(20,22,23,.11); font-size:.9rem; }
.plan-card-featured > ul li { color:rgba(255,255,255,.75); border-color:rgba(255,255,255,.1); }
.plan-card > ul li::before { content:"✓"; position:absolute; left:0; color:#a4722c; }
.plan-card .secondary-button,.plan-card .primary-button { display:inline-block; }
.plan-card-featured .gold-button { color:#17191a; }
.plan-price-note { margin:26px 0 0; color:rgba(255,255,255,.5); font-size:.8rem; line-height:1.6; }
.care-coverage { margin-top:70px; }
.care-coverage-grid { display:grid; grid-template-columns:repeat(4,1fr); margin-top:16px; border-top:1px solid rgba(20,22,23,.15); border-left:1px solid rgba(20,22,23,.12); }
.care-coverage-grid article { min-height:225px; padding:28px 24px; border-right:1px solid rgba(20,22,23,.12); border-bottom:1px solid rgba(20,22,23,.12); }
.care-coverage-grid span { color:#9b6b29; font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.care-coverage-grid h3 { margin:20px 0 13px; color:#26292b; font:400 1.4rem Georgia,serif; }
.care-coverage-grid p { margin:0; color:var(--muted); font-size:.92rem; line-height:1.6; }
.service-support-story { display:grid; grid-template-columns:1.12fr .88fr; min-height:690px; margin-top:70px; overflow:hidden; }
.service-support-image { position:relative; min-height:690px; margin:0; overflow:hidden; background:#08090a; }
.service-support-image img { width:100%; height:100%; min-height:690px; object-fit:cover; }
.service-support-image::after { content:""; position:absolute; inset:68% 0 0; background:linear-gradient(transparent,rgba(4,5,6,.9)); }
.service-support-image figcaption { position:absolute; z-index:2; right:28px; bottom:24px; left:28px; color:var(--gold-soft); font-size:.65rem; letter-spacing:.16em; }
.service-support-copy { align-self:center; padding:68px 60px; }
.service-support-copy > p:not(.eyebrow) { color:rgba(255,255,255,.72); line-height:1.75; }
.service-support-copy > small { display:block; margin-top:20px; color:rgba(255,255,255,.48); line-height:1.55; }
.response-targets { margin-top:28px; border-top:1px solid rgba(255,255,255,.14); }
.response-targets > div { padding:18px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.response-targets span { display:block; margin-bottom:8px; color:var(--gold-soft); font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; }
.response-targets strong { color:#f0efeb; font-size:.92rem; font-weight:500; }
.clear-terms { margin-top:70px; }
.clear-terms-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:74px; align-items:start; }
.clear-terms-grid > div:first-child > p:not(.eyebrow) { color:var(--muted); line-height:1.75; }
.terms-columns { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.terms-columns > div { padding:28px; background:rgba(255,255,255,.5); border:1px solid rgba(20,22,23,.11); }
.terms-columns h3 { margin:0 0 20px; color:#292c2e; font:400 1.35rem Georgia,serif; }
.terms-columns ul { margin:0; padding:0; list-style:none; }
.terms-columns li { padding:11px 0; color:#5a5f61; border-bottom:1px solid rgba(20,22,23,.1); font-size:.88rem; line-height:1.45; }
.eligibility-story { margin-top:70px; }
.eligibility-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:80px; align-items:center; }
.eligibility-grid > div:last-child p { color:var(--muted); line-height:1.75; }

@media(max-width:1000px) {
  .plan-pricing-heading,.clear-terms-grid,.eligibility-grid { grid-template-columns:1fr; gap:28px; }
  .care-coverage-grid { grid-template-columns:repeat(2,1fr); }
  .service-support-story { grid-template-columns:1fr; }
  .service-support-image,.service-support-image img { min-height:560px; }
}

@media(max-width:720px) {
  .plan-pricing { padding:50px 22px; }
  .plan-card-grid,.terms-columns { grid-template-columns:1fr; }
  .plan-card { padding:32px 24px; }
  .plan-card-top strong { font-size:2.7rem; }
  .care-coverage-grid { grid-template-columns:1fr; }
  .care-coverage-grid article { min-height:0; }
  .service-support-image,.service-support-image img { min-height:430px; }
  .service-support-copy { padding:50px 28px; }
  .service-plan-hero-price { flex-direction:column; gap:8px; }
}

/* About AVELAT */
.about-story-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(48px,8vw,120px); align-items:start; }
.about-principles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; margin-top:58px; background:rgba(216,181,122,.24); }
.about-principles article { min-height:250px; padding:34px 28px; background:#111314; }
.about-principles span { color:var(--gold-soft); font-size:.72rem; letter-spacing:.18em; }
.about-principles h3 { margin:42px 0 14px; font-family:Georgia,serif; font-size:1.55rem; font-weight:400; }
.about-principles p { margin:0; color:rgba(255,255,255,.68); line-height:1.7; }
.owner-highlight { margin:26px 0 8px; padding:24px 26px; border-left:2px solid var(--gold-soft); background:rgba(216,181,122,.08); }
.owner-highlight > span,.owner-promise > span { display:block; margin-bottom:12px; color:var(--gold-soft); font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.owner-highlight > strong { display:block; color:#fff; font:400 1.55rem/1.25 Georgia,serif; }
.owner-highlight > p { margin:12px 0 0; color:rgba(255,255,255,.7); line-height:1.65; }
.owner-promise { margin:0 0 44px; padding:clamp(32px,5vw,58px); border:1px solid rgba(216,181,122,.48); background:linear-gradient(135deg,rgba(216,181,122,.14),rgba(255,255,255,.025)); box-shadow:0 24px 70px rgba(0,0,0,.24); }
.owner-promise > strong { display:block; max-width:980px; color:#fff; font:400 clamp(2.1rem,4.2vw,4.5rem)/1.02 Georgia,serif; letter-spacing:-.035em; }
.owner-promise > p { max-width:820px; margin:24px 0 0; color:rgba(255,255,255,.72); font-size:1.05rem; line-height:1.75; }
.not-found { min-height:100vh; display:grid; place-items:center; padding:32px; }
.not-found .hero-glass { width:min(760px,100%); }
.not-found .primary-button { display:inline-flex; margin-top:28px; }
@media(max-width:900px) { .about-story-grid { grid-template-columns:1fr; } .about-principles { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) { .about-principles { grid-template-columns:1fr; } }