/* ==========================================================================
   NesTech Smart Home & Interiors — Design System
   Graphite / Stone / Brass / Ash Steel — precision-engineered aesthetic
   ========================================================================== */

:root {
  --graphite: #14213D;
  --graphite-soft: #37425A;
  --stone: #F2F2F0;
  --stone-soft: #F2F2F0;
  --brass: #C9A227;
  --brass-light: #D9BB55;
  --steel: #6b7280;
  --ink: #3A4750;
  --white: #f7f5f0;

  /* Electric accent duo — layered over the brass identity for a modern,
     tech-forward pop on headlines, primary CTAs, and glow states. */
  --accent: #7c5cff;
  --accent-2: #00d9c0;
  --accent-glow: rgba(124, 92, 255, 0.4);
  --gradient-vibrant: linear-gradient(100deg, var(--brass-light), var(--accent) 65%, var(--accent-2));

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max-w: 1180px;
  --cut: 22px; /* mitred corner size */
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--stone-soft);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Mitred corner utility — the site's signature device ---------- */
.mitred {
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)
  );
}
.mitred-sm {
  --cut: 12px;
}

/* ---------- Type ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--accent));
  display: inline-block;
  animation: growDash 0.7s 0.15s cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes growDash { from { width: 0; } to { width: 22px; } }

h2.section-title {
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  margin-top: 10px;
}

p.lede {
  font-size: 1.05rem;
  color: var(--steel);
  max-width: 60ch;
}

.euro-tagline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  letter-spacing: 0.01em;
  background: var(--gradient-vibrant);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 6s ease-in-out infinite;
}
.euro-tagline::before {
  content: '';
  flex-shrink: 0;
  width: 30px;
  height: 2px;
  background: var(--gradient-vibrant);
}

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: stretch;
  background: rgba(20, 33, 61, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  padding: 18px 24px;
}

/* logo-dark-header.png is a white-on-transparent lockup purpose-built for
   this dark navbar, so it sits directly on it — no panel/background needed. */
.logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 24px;
}
.logo img {
  display: block;
  height: 94px;
  width: auto;
  transition: transform var(--transition);
}
.logo:hover img { transform: scale(1.06); }

.nav-links {
  display: flex;
  gap: 34px;
  list-style: none;
}

.nav-links a {
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 500;
  position: relative;
  padding-bottom: 4px;
  transition: color var(--transition);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--brass);
  transition: width var(--transition);
}
.nav-links a:hover { color: var(--brass-light); }
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  background: linear-gradient(120deg, var(--brass), var(--accent));
  color: var(--graphite) !important;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 10px 18px;
  font-weight: 600;
  transition: filter var(--transition), transform var(--transition);
  animation: ctaPulse 3s ease-in-out infinite;
}
.nav-cta:hover { filter: brightness(1.12); transform: translateY(-1px); animation-play-state: paused; }
.nav-cta::after { display: none; }
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50% { box-shadow: 0 0 0 7px rgba(124, 92, 255, 0); }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px;
  background: var(--white);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Nav dropdown (Services) ---------- */
.nav-item-dropdown { position: relative; }

/* Invisible bridge over the gap between the trigger link and .nav-dropdown
   (top: calc(100% + 20px) below) so :hover doesn't break while the mouse
   travels through that empty space on the way down to the menu. */
.nav-item-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 20px;
}

.nav-item-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-caret {
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform var(--transition);
}
.nav-item-dropdown:hover .nav-caret,
.nav-item-dropdown:focus-within .nav-caret {
  transform: rotate(-135deg);
  margin-top: 3px;
}

.nav-dropdown {
  list-style: none;
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  min-width: 250px;
  background: var(--graphite-soft);
  border: 1px solid rgba(201, 162, 39, 0.25);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px; height: 11px;
  background: var(--graphite-soft);
  border-left: 1px solid rgba(201, 162, 39, 0.25);
  border-top: 1px solid rgba(201, 162, 39, 0.25);
  transform: translateX(-50%) rotate(45deg);
}

.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-dropdown li + li { margin-top: 3px; }

.nav-dropdown a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--stone);
  transition: background var(--transition), color var(--transition), padding-left var(--transition);
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover {
  background: rgba(201, 162, 39, 0.12);
  color: var(--brass-light);
  padding-left: 18px;
}

.nav-dropdown .dropdown-index {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--brass);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 14px 26px;
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left 0.65s ease;
  pointer-events: none;
}
.btn:hover::before { left: 130%; }
.btn-primary {
  background: linear-gradient(120deg, var(--brass-light), var(--accent));
  background-size: 180% 180%;
  background-position: 0% 50%;
  color: var(--graphite);
  box-shadow: 0 6px 20px var(--accent-glow);
  transition: transform var(--transition), background-position 0.6s ease, box-shadow var(--transition);
}
.btn-primary:hover {
  background-position: 100% 50%;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--accent-glow);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(247, 245, 240, 0.4);
}
.btn-outline:hover {
  border-color: var(--brass);
  color: var(--brass-light);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--graphite);
  color: var(--white);
}
.btn-dark:hover { background: var(--graphite-soft); transform: translateY(-2px); }

/* ---------- Hero ---------- */
.hero {
  background: var(--graphite);
  color: var(--white);
  padding: 130px 0 100px;
  position: relative;
  overflow: hidden;
}

/* Subpages use a shorter hero than the homepage; kept as a class (not an
   inline style) so the mobile .hero padding override further down this
   file can still win the cascade instead of being blocked by inline
   specificity. */
.hero-page { padding: 90px 0 70px; }

.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass), var(--accent), var(--accent-2));
  width: 0;
  z-index: 2;
  animation: switchOn 1.1s 0.3s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes switchOn { to { width: 100%; } }

/* Ambient glow blob — only on heroes with a plain background (no photo
   carousel behind them), so it never washes out real photography. */
.hero:not(:has(.hero-carousel))::after {
  content: '';
  position: absolute;
  top: -15%;
  right: -8%;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.28), transparent 70%);
  border-radius: 50%;
  filter: blur(50px);
  animation: floatBlob 9s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.12); }
}

.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  max-width: 15ch;
  margin: 22px 0 24px;
  opacity: 0;
  background: linear-gradient(100deg, var(--white) 30%, var(--brass-light) 55%, var(--accent) 85%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: riseIn 0.8s 0.5s ease forwards, shimmerText 6s 1.3s ease-in-out infinite;
}
@keyframes shimmerText {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero .lede {
  color: #c7c4bc;
  max-width: 52ch;
  font-size: 1.1rem;
  opacity: 0;
  animation: riseIn 0.8s 0.7s ease forwards;
}

.hero-actions {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
  opacity: 0;
  animation: riseIn 0.8s 0.9s ease forwards;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes popNum {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.hero-stats {
  display: flex;
  gap: 16px;
  margin-top: 72px;
  flex-wrap: wrap;
  opacity: 0;
  animation: riseIn 0.8s 1.1s ease forwards;
}
.hero-stats div {
  padding: 14px 20px;
  background: rgba(247, 245, 240, 0.06);
  border: 1px solid rgba(247, 245, 240, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.hero-stats div:hover {
  border-color: var(--accent);
  background: rgba(124, 92, 255, 0.08);
  transform: translateY(-3px);
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.9rem;
  background: linear-gradient(100deg, var(--brass-light), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  animation: popNum 0.6s 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.hero-stats div span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ---------- Loxone partner badges ---------- */
/* Pulsing brass glow that hugs the logo's own alpha shape (drop-shadow
   follows transparency, unlike box-shadow) — same "look at me" idiom as
   the WhatsApp float button's waPulse, applied to the partner lockups
   so the transparent logo reads as dominant without ever boxing it in. */
@keyframes partnerGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(201, 162, 39, 0.25)); }
  50% { filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.85)); }
}
@keyframes partnerPop {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

.partner-strip {
  padding: 64px 0;
  text-align: center;
}
.partner-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}
.partner-strip-label {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(100deg, var(--white) 30%, var(--brass-light) 55%, var(--accent) 85%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 6s ease-in-out infinite;
}
.partner-strip-inner img {
  display: block;
  height: clamp(52px, 6vw, 76px);
  width: auto;
  opacity: 0;
  transform: scale(0.82);
  transition: transform var(--transition);
}
.partner-strip.reveal.is-visible .partner-strip-inner img {
  animation: partnerPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
             partnerGlow 3s 0.7s ease-in-out infinite;
}
.partner-strip-inner img:hover { transform: scale(1.05); }

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
  padding: 14px 26px;
  background: rgba(20, 33, 61, 0.35);
  border: 1px solid rgba(247, 245, 240, 0.25);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: riseIn 0.8s 1.1s ease forwards;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.partner-badge:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
}
.partner-badge img {
  display: block;
  height: 38px;
  width: auto;
  animation: partnerGlow 3s 1.9s ease-in-out infinite;
}
.partner-badge span {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---------- Sections ---------- */
section { padding: 96px 0; position: relative; }
/* Whisper-thin seam between sections, so adjacent blocks (especially two
   with the same background) still read as distinct. The hero already has
   its own bolder animated version of this bar, so it's excluded here. */
section:not(.hero)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 15%, var(--accent) 50%, var(--accent-2) 85%, transparent);
  opacity: 0.3;
}
.section-alt { background: var(--stone); }
.section-dark {
  background:
    radial-gradient(ellipse 480px 260px at 88% 15%, rgba(124, 92, 255, 0.22), transparent 70%),
    linear-gradient(120deg, var(--graphite) 0%, var(--graphite-soft) 50%, var(--graphite) 100%);
  background-size: auto, 220% 220%;
  color: var(--white);
  animation: gradientDrift 12s ease infinite;
  position: relative;
  overflow: hidden;
}
.section-dark .lede { color: #b9b6ae; }
@keyframes gradientDrift {
  0%, 100% { background-position: 0 0, 0% 50%; }
  50% { background-position: 0 0, 100% 50%; }
}

.section-head {
  margin-bottom: 56px;
  max-width: 640px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Staggered child cascade inside reveal grids/lists.
   Entrance uses `animation` (not `transition`) so it can't collide with
   each card's own hover `transition` declarations on the same element. */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
.diff-grid.reveal .diff-item,
.serve-grid.reveal .serve-card,
.commit-list.reveal li,
.contact-reassure.reveal .reassure-card {
  opacity: 0;
}
.diff-grid.reveal.is-visible .diff-item,
.serve-grid.reveal.is-visible .serve-card,
.commit-list.reveal.is-visible li,
.contact-reassure.reveal.is-visible .reassure-card {
  animation: fadeUpIn 0.6s ease forwards;
}
.diff-grid.reveal.is-visible .diff-item:nth-child(1),
.serve-grid.reveal.is-visible .serve-card:nth-child(1),
.commit-list.reveal.is-visible li:nth-child(1),
.contact-reassure.reveal.is-visible .reassure-card:nth-child(1) { animation-delay: 0.05s; }
.diff-grid.reveal.is-visible .diff-item:nth-child(2),
.serve-grid.reveal.is-visible .serve-card:nth-child(2),
.commit-list.reveal.is-visible li:nth-child(2),
.contact-reassure.reveal.is-visible .reassure-card:nth-child(2) { animation-delay: 0.15s; }
.diff-grid.reveal.is-visible .diff-item:nth-child(3),
.serve-grid.reveal.is-visible .serve-card:nth-child(3),
.commit-list.reveal.is-visible li:nth-child(3),
.contact-reassure.reveal.is-visible .reassure-card:nth-child(3) { animation-delay: 0.25s; }
.diff-grid.reveal.is-visible .diff-item:nth-child(4),
.serve-grid.reveal.is-visible .serve-card:nth-child(4),
.commit-list.reveal.is-visible li:nth-child(4) { animation-delay: 0.35s; }

/* gallery-strip figure has no hover transition of its own, so a plain
   transition-based stagger is safe here (no risk of colliding with hover). */
.gallery-strip.reveal figure {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.gallery-strip.reveal.is-visible figure { opacity: 1; transform: translateY(0); }
.gallery-strip.reveal.is-visible figure:nth-child(1) { transition-delay: 0.05s; }
.gallery-strip.reveal.is-visible figure:nth-child(2) { transition-delay: 0.15s; }
.gallery-strip.reveal.is-visible figure:nth-child(3) { transition-delay: 0.25s; }
.gallery-strip.reveal.is-visible figure:nth-child(4) { transition-delay: 0.35s; }
.gallery-strip.reveal.is-visible figure:nth-child(5) { transition-delay: 0.45s; }
.gallery-strip.reveal.is-visible figure:nth-child(6) { transition-delay: 0.55s; }

.feature-points li {
  opacity: 0;
  transform: translateX(-10px);
}
.feature-row.reveal.is-visible .feature-points li {
  animation: pointIn 0.5s ease forwards;
}
.feature-row.reveal.is-visible .feature-points li:nth-child(1) { animation-delay: 0.15s; }
.feature-row.reveal.is-visible .feature-points li:nth-child(2) { animation-delay: 0.28s; }
.feature-row.reveal.is-visible .feature-points li:nth-child(3) { animation-delay: 0.41s; }
@keyframes pointIn { to { opacity: 1; transform: translateX(0); } }

/* ---------- What We Do — service tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.tile {
  background: var(--white);
  padding: 0 0 34px;
  border: 1px solid rgba(107, 114, 128, 0.18);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  overflow: hidden;
  cursor: pointer;
}

.tile-body {
  padding: 22px 30px 0;
}

.tile:hover {
  transform: translateY(-6px);
  border-color: var(--brass);
  box-shadow: 0 18px 34px rgba(20, 33, 61, 0.12);
}
.tile .tile-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--brass);
  letter-spacing: 0.1em;
}
.tile h3 {
  font-size: 1.3rem;
  margin: 14px 0 12px;
}
.tile p {
  color: var(--steel);
  font-size: 0.95rem;
  margin-bottom: 20px;
}
.tile a {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 2px;
  transition: color var(--transition);
}
.tile a:hover { color: var(--brass); }

/* ---------- Diagram panels (Loxone brochure figures) ---------- */
.diagram-panel {
  margin-bottom: 56px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 14px 34px rgba(20, 33, 61, 0.1);
  background: var(--white);
}
.diagram-panel img { width: 100%; height: auto; display: block; }
.diagram-caption {
  padding: 18px 26px 22px;
  font-size: 0.88rem;
  color: var(--steel);
  text-align: center;
  max-width: 70ch;
  margin: 0 auto;
}
.diagram-panel-dark { background: var(--graphite); border-color: rgba(201, 162, 39, 0.35); }
.diagram-panel-dark .diagram-caption { color: #b9b6ae; }

/* ---------- Why choose — differentiators ---------- */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgba(107, 114, 128, 0.2);
  border: 1px solid rgba(107, 114, 128, 0.2);
}
.diff-item {
  background: var(--stone-soft);
  padding: 32px;
  position: relative;
  transition: background var(--transition), transform var(--transition), opacity var(--transition);
}
.diff-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brass);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.diff-item:hover {
  background: var(--white);
  transform: translateY(-3px);
}
.diff-item:hover::before { transform: scaleY(1); }
.diff-item h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.diff-item p { color: var(--steel); font-size: 0.92rem; }
.diff-icon {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  color: var(--brass);
}
.diff-icon svg { width: 100%; height: 100%; }

/* ---------- Loxone automation plans (Starter / Elevated / Premium) ----------
   Recreates the brochure's own slide rhythm — a full-width banner photo
   (the actual Loxone brochure photography) followed by a two-column
   intro/body split — rather than the side-by-side .feature-row pattern
   used for the systems above, so this section reads as its own distinct
   "plan spotlight" moment. The category breakdown per plan reuses the
   .feature-benefit accordion already established on this page. */
.loxone-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 10px 20px;
  background: var(--white);
  border: 1px solid rgba(201, 162, 39, 0.35);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.06);
}
.loxone-badge img { height: 18px; width: auto; display: block; }
.loxone-badge span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--gradient-vibrant);
  border-radius: 999px;
  vertical-align: middle;
}

.tier-slide { margin-bottom: 96px; }
.tier-slide:last-of-type { margin-bottom: 0; }

.tier-slide-photo {
  position: relative;
  height: clamp(200px, 30vw, 400px);
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 14px 34px rgba(20, 33, 61, 0.1);
  margin-bottom: 44px;
}
.tier-slide-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.tier-slide:hover .tier-slide-photo img { transform: scale(1.04); }

.tier-slide-body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
}
/* Sticky intro column while the longer accordion content scrolls past —
   same idiom already used for .faq-wrap on the contact page. */
.tier-slide-intro { position: sticky; top: 120px; align-self: start; }
.tier-slide-name {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin: 12px 0 10px;
}
.tier-slide-tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--graphite);
}
.tier-slide-content p { color: var(--steel); font-size: 0.98rem; max-width: 62ch; }

/* Example installation floor plan — full width beneath the intro/content
   split, echoing the brochure's own layout diagrams. */
.tier-floorplan { margin-top: 48px; }
.tier-floorplan-label {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 18px;
}
.tier-floorplan-frame {
  background: var(--white);
  border: 1px solid rgba(107, 114, 128, 0.18);
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 10px 26px rgba(20, 33, 61, 0.06);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tier-floorplan-frame:hover {
  border-color: var(--brass);
  box-shadow: 0 14px 32px rgba(20, 33, 61, 0.1);
}
.tier-floorplan-frame img { width: 100%; height: auto; display: block; }

.tier-slide-cta { text-align: center; margin-top: 40px; }

@media (max-width: 900px) {
  .tier-slide-body { grid-template-columns: 1fr; gap: 20px; }
  .tier-slide-intro { position: static; }
  .tier-slide { margin-bottom: 64px; }
  .tier-floorplan-frame { padding: 14px; }
}

.tier-footnote {
  margin-top: 8px;
  text-align: center;
  color: var(--steel);
  font-size: 0.92rem;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Process — real sequence, numbered ---------- */
.process-list {
  display: flex;
  flex-direction: column;
}
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(247, 245, 240, 0.12);
  transition: padding-left var(--transition), background var(--transition);
}
.process-step:hover { padding-left: 12px; background: rgba(201, 162, 39, 0.06); }
.process-step:first-child { border-top: 1px solid rgba(247, 245, 240, 0.12); }
.process-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--brass);
  display: inline-block;
  transition: transform var(--transition), color var(--transition);
}
.process-step:hover .process-num { transform: scale(1.2); color: var(--brass-light); }
.process-step h3 { font-size: 1.15rem; margin-bottom: 6px; color: var(--white); }
.process-step p { color: #b9b6ae; font-size: 0.92rem; max-width: 60ch; }

/* ---------- Who we serve ---------- */
.serve-visual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}
.serve-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.serve-card {
  padding: 26px 20px;
  background: var(--white);
  border-left: 2px solid var(--brass);
  transition: transform var(--transition), border-left-width var(--transition), box-shadow var(--transition), opacity var(--transition);
}
.serve-card:hover {
  transform: translateY(-5px);
  border-left-width: 5px;
  box-shadow: 0 12px 26px rgba(20, 33, 61, 0.1);
}
.serve-card h3 { font-size: 1rem; margin-bottom: 6px; }
.serve-card p { font-size: 0.85rem; color: var(--steel); }

/* ---------- Commitment ---------- */
.commit-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.commit-list { list-style: none; }
.commit-list li {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(107, 114, 128, 0.18);
  transition: padding-left var(--transition), border-color var(--transition), opacity var(--transition), transform var(--transition);
}
.commit-list li:hover { padding-left: 8px; border-color: var(--brass); }
.commit-list li:first-child { padding-top: 0; }
.commit-mark {
  font-family: var(--font-mono);
  color: var(--brass);
  flex-shrink: 0;
  display: inline-block;
  transition: transform var(--transition);
}
.commit-list li:hover .commit-mark { transform: scale(1.2) rotate(-6deg); }

/* ---------- FAQ ---------- */
.faq-wrap { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
.faq-wrap > .reveal { position: sticky; top: 110px; }
.faq-link { color: var(--brass); font-weight: 600; border-bottom: 1px solid transparent; transition: border-color var(--transition), color var(--transition); }
.faq-link:hover { color: var(--brass-light); border-color: var(--brass-light); }

.faq-list { list-style: none; }
.faq-item {
  border-bottom: 1px solid rgba(107, 114, 128, 0.18);
  border-left: 2px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.faq-item:first-child { border-top: 1px solid rgba(107, 114, 128, 0.18); }
.faq-item:has(details[open]) { border-left-color: var(--brass); background: rgba(201, 162, 39, 0.05); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 16px;
  cursor: pointer;
  transition: padding-left var(--transition);
}
.faq-item summary:hover { padding-left: 22px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .commit-mark {
  font-size: 0.85rem;
  transition: transform var(--transition), color var(--transition);
}
.faq-item summary:hover .commit-mark { transform: scale(1.15) rotate(-4deg); color: var(--brass-light); }
.faq-q {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--ink);
  transition: color var(--transition);
}
.faq-item summary:hover .faq-q { color: var(--brass); }
.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--brass);
  transition: transform var(--transition);
}
.faq-icon::before { width: 14px; height: 2px; transform: translate(-50%, -50%); }
.faq-icon::after { width: 2px; height: 14px; transform: translate(-50%, -50%); }
.faq-item details[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

/* Height-animated collapse panel — JS drives the exact max-height in
   js/script.js; this rule is only the no-JS fallback so content still
   works (unanimated) if the script fails to load. */
.faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.faq-item details[open] .faq-panel { max-height: 1000px; }
.faq-answer { padding: 0 16px 22px 58px; color: var(--steel); font-size: 0.95rem; line-height: 1.6; max-width: 56ch; }

.faq-list.reveal li { opacity: 0; }
.faq-list.reveal.is-visible li { animation: fadeUpIn 0.6s ease forwards; }
.faq-list.reveal.is-visible li:nth-child(1) { animation-delay: 0.05s; }
.faq-list.reveal.is-visible li:nth-child(2) { animation-delay: 0.12s; }
.faq-list.reveal.is-visible li:nth-child(3) { animation-delay: 0.19s; }
.faq-list.reveal.is-visible li:nth-child(4) { animation-delay: 0.26s; }
.faq-list.reveal.is-visible li:nth-child(5) { animation-delay: 0.33s; }
.faq-list.reveal.is-visible li:nth-child(6) { animation-delay: 0.4s; }

@media (max-width: 900px) {
  .faq-wrap > .reveal { position: static; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--graphite);
  color: #a9a69e;
  padding: 60px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(247, 245, 240, 0.1);
}
.footer-logo {
  margin-bottom: 12px;
}
.footer-logo img {
  display: block;
  height: 94px;
  width: auto;
}
.footer-partner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(247, 245, 240, 0.1);
}
.footer-partner span {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a9a69e;
}
.footer-partner img {
  display: block;
  height: 32px;
  width: auto;
  animation: partnerGlow 3.4s ease-in-out infinite;
}
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; font-size: 0.9rem; }
.footer-col a { display: inline-block; transition: color var(--transition), transform var(--transition); }
.footer-col a:hover { color: var(--brass-light); transform: translateX(4px); }
.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 58px;
  height: 58px;
  background: #25d366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  z-index: 200;
  transition: transform var(--transition);
  animation: waPulse 2.6s ease-in-out infinite;
}
.whatsapp-float:hover { transform: scale(1.1); animation-play-state: paused; }
.whatsapp-float svg { width: 30px; height: 30px; }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  50% { box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .tiles { grid-template-columns: 1fr; }
  .diff-grid { grid-template-columns: 1fr; }
  .serve-visual-grid { grid-template-columns: 1fr; }
  .serve-grid { grid-template-columns: repeat(2, 1fr); }
  .commit-wrap { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .logo { padding: 5px 16px 5px 24px; }
  .logo img { height: 64px; }
  .footer-logo img { height: 64px; }
  .nav-links.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--graphite);
    flex-direction: column;
    padding: 20px 24px;
    gap: 18px;
    border-bottom: 1px solid rgba(201, 162, 39, 0.25);
  }
  /* Mobile hero geometry (photo band vs. text panel) lives in the media
     query right after the base .hero-carousel rules further down this
     file, so it can win the cascade without needing extra specificity —
     see the "Hero photo carousel" section. */
  .hero { padding: 0 0 48px; }
  .hero-inner { padding-top: 32px; }
  .hero h1 { text-shadow: none; }
  .hero .lede { text-shadow: none; }
  .hero-stats { gap: 28px; }
  section { padding: 64px 0; }
  .serve-grid { grid-template-columns: 1fr; }
  .process-step { grid-template-columns: 50px 1fr; }

  .partner-badge {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .nav-item-dropdown { position: static; }
  .nav-item-dropdown::after { display: none; }
  .nav-caret { display: none; }
  .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    clip-path: none;
    padding: 6px 0 0 16px;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a { padding: 8px 0; }
  .nav-dropdown a:hover { background: none; padding-left: 8px; }
}

/* ---------- Contact page ---------- */
.contact-reassure {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.reassure-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px;
  background: var(--white);
  border: 1px solid rgba(107, 114, 128, 0.18);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), opacity var(--transition);
}
.reassure-card:hover { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(20, 33, 61, 0.12); border-color: var(--brass); }
.reassure-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
}
.reassure-icon svg { width: 22px; height: 22px; fill: #fff; }
.reassure-icon.icon-brass { background: linear-gradient(135deg, var(--brass), var(--brass-light)); }
.reassure-icon.icon-green { background: linear-gradient(135deg, #25d366, #128c7e); }
.reassure-icon.icon-blue { background: linear-gradient(135deg, #2b6cb0, #4299e1); }
.reassure-card h3 { font-size: 1rem; margin-bottom: 6px; }
.reassure-card p { font-size: 0.88rem; color: var(--steel); }

.contact-wrap {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  gap: 48px;
  align-items: start;
}

.contact-form {
  background: var(--white);
  padding: 36px;
  border: 1px solid rgba(107, 114, 128, 0.18);
  position: relative;
  overflow: hidden;
}
.contact-form::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brass), var(--brass-light), #25d366);
}
.contact-form-head { margin-bottom: 26px; }
.contact-form-head h2 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-top: 8px; }
.contact-form-head p { color: var(--steel); font-size: 0.92rem; margin-top: 8px; }
.btn-icon { width: 16px; height: 16px; fill: currentColor; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--stone-soft);
  border: 1px solid rgba(107, 114, 128, 0.3);
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--brass);
}
.form-group textarea { resize: vertical; min-height: 120px; }

.contact-info { display: flex; flex-direction: column; gap: 28px; }
.info-block h3 {
  font-size: 1rem;
  margin-bottom: 8px;
}
.info-block p, .info-block a { color: var(--steel); font-size: 0.94rem; }
.info-block a:hover { color: var(--brass); }

.contact-card {
  border: 1px solid rgba(201, 162, 39, 0.3);
  background: var(--white);
  padding: 20px 22px;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20, 33, 61, 0.12); border-color: var(--brass); }
.contact-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.contact-card-head h3 { margin-bottom: 0; }
.contact-card-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.contact-card-icon svg { width: 18px; height: 18px; fill: #fff; }
.contact-card-icon.icon-phone { background: linear-gradient(135deg, var(--brass), var(--brass-light)); }
.contact-card-icon.icon-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); }
.contact-card-icon.icon-email { background: linear-gradient(135deg, var(--brass), var(--steel)); }
.contact-card-icon.icon-address { background: linear-gradient(135deg, var(--steel), var(--graphite)); }
.contact-card-icon.icon-social { background: linear-gradient(135deg, #d6249f, #1877f2); }

.email-entry { margin-bottom: 16px; }
.email-entry:last-child { margin-bottom: 0; }
.email-desc { margin-bottom: 4px; font-size: 0.88rem; line-height: 1.5; }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.email-address {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brass);
  padding-bottom: 2px;
  max-width: 100%;
}
.email-address-text { word-break: break-word; }
.email-address-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: var(--brass);
  transition: transform var(--transition);
}
.email-address::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--brass), var(--brass-light));
  transform: scaleX(0.3);
  transform-origin: left;
  opacity: 0.5;
  transition: transform var(--transition), opacity var(--transition);
}
.email-address:hover { color: var(--brass-light); }
.email-address:hover::after { transform: scaleX(1); opacity: 1; }
.email-address:hover .email-address-icon { transform: translateY(-1px) rotate(-6deg); }
.email-providers { display: inline-flex; gap: 8px; }
.email-provider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.email-provider:hover { transform: translateY(-2px) scale(1.08); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3); filter: brightness(1.08); }
.email-provider .provider-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.email-provider .provider-icon svg { width: 14px; height: 14px; fill: #fff; }
.provider-gmail { background: linear-gradient(135deg, #ea4335, #fbbc05); }
.provider-outlook { background: linear-gradient(135deg, #0078d4, #28a8ea); }

.social-links { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--steel);
  font-size: 0.94rem;
  font-weight: 500;
  transition: color var(--transition), transform var(--transition);
}
.social-link:hover { color: var(--ink); transform: translateX(4px); }
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition: transform var(--transition), box-shadow var(--transition);
}
.social-icon svg { width: 19px; height: 19px; fill: var(--white); }
.social-link:hover .social-icon { transform: scale(1.12) rotate(-4deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28); }
.social-facebook .social-icon { background: #1877f2; }
.social-instagram .social-icon {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

.map-frame {
  width: 100%;
  height: 260px;
  border: 1px solid rgba(107, 114, 128, 0.25);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 900px) {
  .contact-wrap { grid-template-columns: 1fr; }
}

/* ---------- Contact form message box ---------- */
.form-message {
  display: none;
  position: relative;
  align-items: center;
  gap: 14px;
  padding: 16px 44px 16px 18px;
  margin-bottom: 22px;
  border-left: 3px solid var(--brass);
  background: var(--stone-soft);
  font-size: 0.92rem;
  color: var(--ink);
  animation: msgIn 0.3s ease;
}
.form-message.is-visible { display: flex; }
.form-message.is-error { border-left-color: #b3432f; }
.form-message p { margin: 0; }
.form-message-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--steel);
  cursor: pointer;
  padding: 4px;
  transition: color var(--transition);
}
.form-message-close:hover { color: var(--brass); }

@keyframes msgIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.contact-form button[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---------- Spinner + centered message overlay ---------- */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(20, 33, 61, 0.25);
  border-top-color: var(--graphite);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-message-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 33, 61, 0.55);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.form-message-overlay.is-visible { display: flex; }

.form-message-overlay .form-message {
  display: flex;
  max-width: 420px;
  width: 100%;
  margin-bottom: 0;
  background: var(--white);
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  animation: msgPop 0.25s ease;
}
@keyframes msgPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Hero photo carousel ---------- */
.hero { position: relative; }

.hero-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.8s ease;
  filter: contrast(1.4) saturate(1.6) brightness(1.07);
}
.hero-slide.is-active { opacity: 1; }

.hero-carousel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20, 33, 61, 0.94) 0%,
    rgba(20, 33, 61, 0.8) 38%,
    rgba(20, 33, 61, 0.18) 100%
  );
}

.hero-carousel-overlay.is-light {
  background: linear-gradient(
    100deg,
    rgba(20, 33, 61, 0.75) 0%,
    rgba(20, 33, 61, 0.52) 43%,
    rgba(20, 33, 61, 0.06) 100%
  );
}

.hero-inner { position: relative; z-index: 1; }

/* On mobile the hero stacks tall and text runs full-width, so the desktop
   left-to-right overlay (built for a text-on-left / photo-on-right split)
   was washing a heavy dark scrim over the *entire* photo to keep text
   legible wherever it landed — which read as dim/dull no matter how much
   brightness/contrast got thrown at it. Instead, split the hero into a
   true photo band up top (near-true colour, almost no scrim) and a solid
   graphite panel below it for the text — the same dark background the
   text gradient is designed to sit on elsewhere. */
@media (max-width: 720px) {
  .hero-carousel {
    position: relative;
    inset: auto;
    height: 260px;
  }
  .hero-slide {
    filter: contrast(1.15) saturate(1.3);
  }
  .hero-carousel-overlay,
  .hero-carousel-overlay.is-light {
    background: linear-gradient(
      180deg,
      rgba(15, 15, 14, 0) 60%,
      var(--graphite) 100%
    );
  }
}

.tile-visual {
  height: 132px;
  position: relative;
  overflow: hidden;
}

/* ---------- Tile photo carousel (service cards) ---------- */
.tile-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
  filter: contrast(1.2) saturate(1.35) brightness(1.04);
}
.tile-slide.is-active { opacity: 1; }

/* ---------- Photo overlay card (Smart Lighting tile) ---------- */
.tile-photo-card {
  position: relative;
  height: 450px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 14px 34px rgba(20, 33, 61, 0.12);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.tile-photo-card:hover {
  border-color: var(--accent);
  box-shadow: 0 18px 44px var(--accent-glow);
}

.tile-photo-card .tile-visual {
  position: absolute;
  inset: 0;
  height: 100%;
}

.tile-photo-card .tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 26px 26px;
  background: linear-gradient(
    to top,
    rgba(15, 15, 14, 0.95) 0%,
    rgba(15, 15, 14, 0.78) 45%,
    rgba(15, 15, 14, 0) 100%
  );
  z-index: 2;
}

.tile-photo-card .tile-index { color: var(--brass-light); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }
.tile-photo-card h3 { color: var(--white); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.tile-photo-card p { color: #d8d5cd; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.tile-photo-card a {
  color: var(--brass-light);
  border-bottom-color: var(--brass-light);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.tile-photo-card a:hover { color: var(--white); }

.tile-photo-card:hover .tile-slide.is-active {
  transform: scale(1.05);
}
.tile-photo-card .tile-slide {
  transition: opacity 1.4s ease, transform 0.6s ease;
}

/* ---------- Gallery strip (3-up photo band) ---------- */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-strip figure {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 39, 0.3);
}
.gallery-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-strip figure:hover img { transform: scale(1.06); }
.gallery-strip figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(to top, rgba(15,15,14,0.85), rgba(15,15,14,0));
}

/* ---------- Feature rows (alternating photo / copy) ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 64px 0;
  border-bottom: 1px solid rgba(107, 114, 128, 0.15);
}
.feature-row:last-child { border-bottom: none; padding-bottom: 0; }
.feature-row:first-child { padding-top: 0; }
.feature-row.is-reverse .feature-visual { order: 2; }
.feature-visual {
  position: relative;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 14px 34px rgba(20, 33, 61, 0.1);
}
.feature-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.feature-visual:hover img { transform: scale(1.05); }
.lede-mobile { display: none; }
.feature-copy .tile-index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--brass);
  letter-spacing: 0.1em;
}
.feature-copy h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  margin: 12px 0 16px;
}
.feature-copy p { color: var(--steel); font-size: 0.98rem; }
.feature-copy p strong { color: var(--graphite); }
.loxone-highlight {
  color: var(--brass);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.feature-points {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feature-points li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--ink);
}
.feature-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--brass);
  transition: transform var(--transition), background var(--transition);
}
.feature-points li:hover::before { transform: scale(1.6); background: var(--brass-light); }

/* ---------- Feature benefits — modern card accordion under feature copy ----------
   Each item is its own rounded card (same treatment at every breakpoint).
   The open/close motion is height-animated by JS (see "Feature benefit
   accordions" in js/script.js), which sets an exact max-height on
   .benefit-panel; the max-height rule below is only the no-JS fallback. */
.feature-benefits-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 30px 0 12px;
}
.feature-benefits {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feature-benefit {
  position: relative;
  background: var(--white);
  border: 1px solid rgba(107, 114, 128, 0.16);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 33, 61, 0.04);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
}
.feature-benefit::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--gradient-vibrant);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s ease;
}
.feature-benefit:hover {
  border-color: rgba(201, 162, 39, 0.4);
  box-shadow: 0 10px 22px rgba(20, 33, 61, 0.08);
  transform: translateY(-1px);
}
.feature-benefit[open] {
  border-color: rgba(201, 162, 39, 0.5);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.06), rgba(201, 162, 39, 0.015));
  box-shadow: 0 12px 26px rgba(20, 33, 61, 0.09);
}
.feature-benefit[open]::before { transform: scaleY(1); }

.feature-benefit summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--transition);
}
.feature-benefit summary::-webkit-details-marker { display: none; }
.feature-benefit summary::marker { content: ''; }
.feature-benefit:hover summary { color: var(--brass); }
.feature-benefit[open] summary { color: var(--graphite); }

.benefit-toggle {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(201, 162, 39, 0.45);
  color: var(--brass);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  background: var(--white);
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.feature-benefit:hover .benefit-toggle { border-color: var(--brass); box-shadow: 0 0 0 5px var(--accent-glow); }
.feature-benefit[open] .benefit-toggle {
  transform: rotate(45deg);
  background: var(--gradient-vibrant);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 4px 12px rgba(124, 92, 255, 0.35);
}

.benefit-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.feature-benefit[open] .benefit-panel { max-height: 400px; }
.feature-benefit p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--steel);
  font-size: 0.87rem;
  line-height: 1.6;
}

/* ---------- Overview + In Motion (with right-side visual) ---------- */
.overview-motion-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: stretch;
}
.overview-motion-main .section-head { margin-bottom: 14px; }
.overview-motion-main .section-head:not(:first-child) { margin-top: 56px; }
.overview-motion-main .lede { max-width: 62ch; }
.overview-motion-main .video-grid { margin-top: 32px; }

.overview-motion-visual {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 39, 0.4);
  box-shadow: 0 14px 34px rgba(20, 33, 61, 0.1);
}
.overview-motion-visual-media {
  position: relative;
  flex: 1;
  min-height: 0;
}
.overview-motion-visual-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overview-motion-visual figcaption {
  padding: 14px 18px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
}

/* ---------- Video showcase (portrait on-site / workshop clips) ---------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  max-width: 620px;
  margin: 0 auto;
}

.video-card {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 18px;
  background: var(--graphite);
  border: 1px solid rgba(201, 162, 39, 0.45);
  box-shadow: 0 14px 34px rgba(20, 33, 61, 0.15), inset 0 0 0 1px rgba(247, 245, 240, 0.06);
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.video-card:hover {
  border-color: var(--brass);
  box-shadow: 0 18px 44px rgba(20, 33, 61, 0.22), inset 0 0 0 1px rgba(247, 245, 240, 0.08);
}

.video-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-card-label {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass-light);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.video-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 15, 14, 0.75) 0%, rgba(15, 15, 14, 0) 32%, rgba(15, 15, 14, 0) 72%, rgba(15, 15, 14, 0.35) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--transition);
}
.video-card.is-playing::after { opacity: 0.6; }

.video-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 16px 18px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--white);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}

.video-play-btn {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.video-play-btn::before {
  content: '';
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brass-light), var(--brass));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  position: absolute;
  transition: transform var(--transition), opacity var(--transition);
}
.video-play-btn svg {
  position: relative;
  width: 24px;
  height: 24px;
  color: var(--graphite);
  transition: opacity var(--transition), transform var(--transition);
}
.video-play-btn .icon-pause { position: absolute; opacity: 0; }
.video-card:hover .video-play-btn::before { transform: scale(1.08); }

.video-card.is-playing .video-play-btn::before,
.video-card.is-playing .video-play-btn svg { opacity: 0; }
.video-card.is-playing:hover .video-play-btn::before,
.video-card.is-playing:hover .video-play-btn .icon-pause { opacity: 1; }
.video-card.is-playing .icon-play { opacity: 0; }
.video-card.is-playing:hover .icon-play { opacity: 0; }

.video-mute-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 14, 0.55);
  border: 1px solid rgba(247, 245, 240, 0.3);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), background var(--transition);
}
.video-card.is-playing .video-mute-btn { opacity: 1; transform: translateY(0); }
.video-mute-btn:hover { background: rgba(15, 15, 14, 0.8); }
.video-mute-btn svg { width: 16px; height: 16px; }
.video-mute-btn .icon-muted { display: none; }
.video-mute-btn.is-muted .icon-unmuted { display: none; }
.video-mute-btn.is-muted .icon-muted { display: block; }

@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; max-width: 320px; }
}

@media (max-width: 900px) {
  .gallery-strip { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 26px; padding: 44px 0; }
  .feature-row.is-reverse .feature-visual { order: 0; }
  .feature-visual { height: 300px; }
  .lede-desktop { display: none; }
  .lede-mobile { display: block; }
  .overview-motion-grid { grid-template-columns: 1fr; gap: 32px; }
  .overview-motion-visual { width: 100%; max-width: 480px; min-height: 420px; justify-self: center; }
}

/* ---------- Feature benefits — mobile sizing tweaks ----------
   Card treatment itself is shared with desktop above; only spacing and
   type scale down here. */
@media (max-width: 720px) {
  .feature-benefits-label {
    margin: 24px 0 8px;
    font-size: 0.66rem;
  }
  .feature-benefits { gap: 8px; }
  .feature-benefit summary {
    padding: 15px 16px;
    font-size: 0.86rem;
  }
  .benefit-toggle { width: 24px; height: 24px; }
  .feature-benefit p {
    padding: 0 16px 16px;
    font-size: 0.85rem;
  }
}