/* =====================================================================
   Beacon Electric, "Warm Light in the Dark"
   Near-black base lit by a warm electric glow, crisp cool-white edge.
   ===================================================================== */

:root {
  --bg: #0D0E10;        /* near-black warm charcoal */
  --bg-2: #17181B;      /* raised panels */
  --bg-3: #1F2125;      /* hover / inset */
  --glow: #F5B544;      /* warm electric amber, the light */
  --glow-soft: #F7C566;
  --cool: #EAF0F4;      /* crisp cool white, the tech edge */
  --text: #F2F1EE;
  --text-dim: #9A9A98;
  --line: rgba(234, 240, 244, 0.10);
  --line-strong: rgba(234, 240, 244, 0.18);
  --glow-glow: rgba(245, 181, 68, 0.45);

  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, never hidden: hidden breaks the sticky service sheets. */
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
figure { margin: 0; }   /* browsers default to figure { margin: 1em 40px } */
button { font: inherit; cursor: pointer; }

/* ----- Layout ----- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 11vw, 140px); }

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

.eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--glow);
  margin: 0 0 18px;
}

.section-head { max-width: 720px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-title { font-size: clamp(28px, 4.6vw, 50px); text-wrap: balance; }
.section-intro { color: var(--text-dim); font-size: clamp(16px, 2vw, 19px); margin: 18px 0 0; }

/* Centered heads: eyebrow, title and intro centered on the page. */
.section-head--center { max-width: none; margin-inline: auto; text-align: center; }
.section-head--center .section-intro { max-width: 60ch; margin-inline: auto; text-wrap: balance; }
@media (min-width: 900px) {
  .section-title--oneline { white-space: nowrap; }
}

/* Depth elements live on edges and corners, never behind copy. */
.section { position: relative; }
.section > .wrap { position: relative; z-index: 1; }
.deco { position: absolute; pointer-events: none; z-index: 0; }

/* Circuit trace: Beacon's section edge, a traced line with two lit nodes. */
.trace { position: absolute; top: 0; left: 0; right: 0; height: 40px; pointer-events: none; z-index: 0; transform: translateY(-50%); }
.trace svg { display: block; width: 100%; height: 40px; }
/* Filled edge: the shape above the trace takes the previous section's
   color, the shape below takes this section's. */
.trace-above { fill: var(--trace-above, var(--bg-2)); }
.trace-below { fill: var(--trace-below, var(--bg)); }
.contact { --trace-above: var(--bg); }
.trace-node {
  position: absolute; top: 8px;
  width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 10px 2px var(--glow-glow);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 15px;
  letter-spacing: 0.01em; padding: 14px 26px; border-radius: 100px;
  border: 1px solid transparent; transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
  will-change: transform;
}
.btn-lg { padding: 17px 34px; font-size: 16px; }
.btn-primary {
  background: var(--glow); color: #1A1206;
  box-shadow: 0 0 0 rgba(245,181,68,0);
}
.btn-primary:hover { background: var(--glow-soft); transform: translateY(-2px); box-shadow: 0 12px 40px -12px var(--glow-glow); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: rgba(234,240,244,0.02); }
.btn-ghost:hover { border-color: var(--glow); color: var(--glow); transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--glow); outline-offset: 3px;
}

/* =====================================================================
   Header
   ===================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(13, 14, 16, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.header-inner { display: flex; align-items: center; gap: 24px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.brand-mark { width: 24px; height: 24px; flex: none; display: inline-flex; }
.brand-mark svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px var(--glow-glow)); }
.site-nav { display: flex; gap: 30px; margin-left: auto; }
.site-nav a { font-size: 15px; color: var(--text-dim); transition: color .3s var(--ease); position: relative; }
.site-nav a:hover, .site-nav a.active { color: var(--text); }
.header-cta { margin-left: 8px; }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; margin-left: auto; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); transition: transform .3s var(--ease), opacity .3s var(--ease); }

/* =====================================================================
   1. Hero
   ===================================================================== */
.hero { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: flex-end; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--bg);
}
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(13,14,16,0) 35%, rgba(13,14,16,0.55) 100%),
    linear-gradient(to top, rgba(13,14,16,0.92) 0%, rgba(13,14,16,0.35) 38%, rgba(13,14,16,0.15) 70%);
}
.hero-content { position: relative; z-index: 2; padding-bottom: clamp(80px, 13vh, 150px); padding-top: 120px; max-width: 880px; }
.hero-headline { font-size: clamp(40px, 8vw, 88px); font-weight: 600; max-width: 14ch; }
.hero-sub { color: var(--text); opacity: 0.86; font-size: clamp(16px, 2.2vw, 21px); max-width: 56ch; margin: 26px 0 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim);
}
.hero-hint-line { width: 1px; height: 38px; background: linear-gradient(to bottom, var(--glow), transparent); animation: hintPulse 2.4s var(--ease) infinite; }
@keyframes hintPulse { 0%,100% { opacity: .3; transform: scaleY(.7); } 50% { opacity: 1; transform: scaleY(1); } }

/* =====================================================================
   2. Trust strip
   ===================================================================== */
/* A slim credential band: four refined cells, each an icon in a lit ring
   beside its label and detail, split by hairlines that fade at both ends.
   A gold hairline runs along the top edge, brightest at the center. */
.trust {
  position: relative;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(245, 181, 68, 0.07), transparent 70%),
    linear-gradient(180deg, #151619, #111215);
  border-bottom: 1px solid var(--line);
}
.trust::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 181, 68, 0.55) 30%, rgba(247, 197, 102, 0.9) 50%, rgba(245, 181, 68, 0.55) 70%, transparent);
}
/* Four across: each cell grows from its content width by an equal share,
   and centers its content, so every divider has the same air either side. */
.trust-grid { display: flex; list-style: none; margin-block: 0; }
.trust-item {
  position: relative;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 28px 18px;
}
.trust-item + .trust-item::before {
  content: "";
  position: absolute; left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(234, 240, 244, 0.16) 30%, rgba(245, 181, 68, 0.3) 50%, rgba(234, 240, 244, 0.16) 70%, transparent);
}
.trust-icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--glow);
  border: 1px solid rgba(245, 181, 68, 0.38);
  background: radial-gradient(circle at 50% 40%, rgba(245, 181, 68, 0.14), rgba(245, 181, 68, 0.03) 70%);
  box-shadow: 0 0 22px -4px rgba(245, 181, 68, 0.4), inset 0 0 10px rgba(245, 181, 68, 0.08);
  transition: box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.trust-icon svg { width: 20px; height: 20px; }
.trust-item:hover .trust-icon { border-color: rgba(245, 181, 68, 0.7); box-shadow: 0 0 28px -2px rgba(245, 181, 68, 0.55), inset 0 0 12px rgba(245, 181, 68, 0.12); }
.trust-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trust-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text);
}
.trust-detail { color: var(--text-dim); font-size: 13.5px; line-height: 1.4; white-space: nowrap; }
@media (min-width: 1320px) {
  .trust .wrap { max-width: 1400px; }
}
/* Below 1320: two by two, with a hairline between the rows. */
@media (max-width: 1319px) {
  .trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
  .trust-item { justify-content: flex-start; padding-inline: clamp(16px, 4vw, 40px); }
  .trust-item:nth-child(3)::before { display: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* =====================================================================
   3. Services
   ===================================================================== */
.sheets { position: relative; }
/* Dwell: an empty spacer after the last sheet. Sticky boxes are held inside
   the container's content box, so this (not padding) is what lets the last
   sheet reach its resting place and the whole stack sit settled for a beat
   before the section scrolls on. */
.sheets-dwell { height: 18vh; }
.sheet {
  --dim: 0;
  position: sticky;
  /* Clear breathing room under the 74px nav before the stack settles. */
  top: calc(122px + var(--i) * 14px);
  height: min(500px, calc(100vh - 230px));
  min-height: 420px;
  margin-bottom: 44px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #141518;
  border: 1px solid rgba(245, 181, 68, 0.14);
  box-shadow: 0 -24px 50px -10px rgba(0, 0, 0, 0.6);
  transform-origin: 50% 0;
  will-change: transform;
}
.sheet:last-of-type { margin-bottom: 0; }
/* Dimming for covered sheets, driven by --dim from main.js. */
.sheet::after {
  content: "";
  position: absolute; inset: 0;
  background: #07080A;
  opacity: var(--dim);
  pointer-events: none;
  z-index: 3;
}
.sheet-media { position: relative; overflow: hidden; min-height: 0; }
.sheet-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(20, 21, 24, 0.55)); }
.sheet:nth-child(even) { grid-template-columns: 1fr 1.15fr; }
.sheet:nth-child(even) .sheet-media { order: 2; }
.sheet:nth-child(even) .sheet-media::after { background: linear-gradient(270deg, transparent 60%, rgba(20, 21, 24, 0.55)); }
.sheet-text {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: clamp(28px, 4vw, 52px);
  background: radial-gradient(circle at 50% 30%, rgba(245, 181, 68, 0.10), transparent 62%), #141518;
}
.sheet-text::before {
  content: "";
  position: absolute; inset: 18px;
  border: 1px solid rgba(245, 181, 68, 0.12);
  border-radius: 12px;
  pointer-events: none;
}
.sheet-count {
  position: absolute; top: 34px; left: 0; right: 0;
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: 0.24em; color: var(--text-dim);
}
.sheet-icon {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--glow);
  border: 1px solid rgba(245, 181, 68, 0.5);
  background: rgba(245, 181, 68, 0.06);
  box-shadow: 0 0 30px rgba(245, 181, 68, 0.28), inset 0 0 14px rgba(245, 181, 68, 0.12);
  margin-bottom: 22px;
}
.sheet-icon svg { width: 26px; height: 26px; }
/* Service titles hold one line at every width. */
.sheet h3 { font-size: clamp(22px, 1.8vw, 25px); line-height: 1.15; letter-spacing: -0.015em; white-space: nowrap; }
.sheet p { color: var(--text-dim); margin: 14px 0 0; max-width: 36ch; font-size: 16px; text-wrap: balance; }
.sheet-keys {
  margin-top: 22px;
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--glow);
}

/* =====================================================================
   4. Feature, smart home + second scrubber
   ===================================================================== */
.feature { position: relative; min-height: 100vh; overflow: hidden; display: flex; align-items: center; }
.feature-media { position: absolute; inset: 0; z-index: 0; }
.feature-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--bg); }
.feature-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(13,14,16,0.94) 0%, rgba(13,14,16,0.72) 42%, rgba(13,14,16,0.18) 75%, rgba(13,14,16,0.05) 100%);
}
.feature-content { position: relative; z-index: 2; width: 100%; padding-block: 100px; }
.feature-card { max-width: 540px; }
.feature-body { color: var(--text); opacity: 0.86; font-size: clamp(16px, 2vw, 19px); margin: 20px 0 24px; }
.feature-points { display: grid; gap: 14px; margin-bottom: 34px; }
.feature-points li { position: relative; padding-left: 30px; color: var(--text); font-size: 16px; }
.feature-points li::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--glow); box-shadow: 0 0 12px 2px var(--glow-glow);
}

/* =====================================================================
   5. Why Beacon
   ===================================================================== */
.why { background: var(--bg-2); overflow: clip; }
/* The beacon mark, oversized and faint: rays around a lit core. */
.deco--beam {
  top: -210px; right: -210px;
  width: 560px; height: 560px;
  opacity: 0.06;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg stroke='%23F5B544' stroke-width='.3' stroke-linecap='round'%3E%3Cline x1='16' y1='2.5' x2='16' y2='7'/%3E%3Cline x1='16' y1='25' x2='16' y2='29.5'/%3E%3Cline x1='2.5' y1='16' x2='7' y2='16'/%3E%3Cline x1='25' y1='16' x2='29.5' y2='16'/%3E%3Cline x1='6.6' y1='6.6' x2='9.8' y2='9.8'/%3E%3Cline x1='22.2' y1='22.2' x2='25.4' y2='25.4'/%3E%3Cline x1='25.4' y1='6.6' x2='22.2' y2='9.8'/%3E%3Cline x1='9.8' y1='22.2' x2='6.6' y2='25.4'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='4.8' fill='none' stroke='%23F5B544' stroke-width='.3'/%3E%3Ccircle cx='16' cy='16' r='11.5' fill='none' stroke='%23F5B544' stroke-width='.35' stroke-dasharray='.6 1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.deco--circuit {
  left: 0; bottom: 0;
  width: min(560px, 72vw); height: 300px;
  opacity: 0.22;
  -webkit-mask: linear-gradient(90deg, #000 40%, transparent);
          mask: linear-gradient(90deg, #000 40%, transparent);
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  /* Narrower than the section title so the grid sits inside it. */
  max-width: 820px;
  margin-inline: auto;
}
.why-item {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(36px, 4vw, 50px) clamp(26px, 3.8vw, 52px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(245, 181, 68, 0.08), transparent 70%),
    linear-gradient(180deg, #121316, var(--bg));
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* A filament line that lights along the bottom edge on hover. */
.why-item::after {
  content: "";
  position: absolute; left: 30%; right: 30%; bottom: 0;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--glow);
  box-shadow: 0 0 14px var(--glow-glow);
  transform: scaleX(0.3); opacity: 0.5;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.why-item:hover { border-color: rgba(245, 181, 68, 0.3); transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(245, 181, 68, 0.35); }
.why-item:hover::after { transform: scaleX(1); opacity: 1; }
.why-icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--glow);
  border: 1px solid rgba(245, 181, 68, 0.45);
  background: rgba(245, 181, 68, 0.06);
  box-shadow: 0 0 28px rgba(245, 181, 68, 0.22);
  margin-bottom: 20px;
}
.why-icon svg { width: 25px; height: 25px; }
.why-item h3 { font-size: 23px; margin-bottom: 12px; white-space: nowrap; }
.why-item p { color: var(--text-dim); margin: 0; font-size: 16px; line-height: 1.65; max-width: 31ch; text-wrap: balance; }

/* =====================================================================
   6. Process
   ===================================================================== */
.process-flow { position: relative; }
/* One track under all four steps. The fill is scaled from the left edge, so
   step 1 lights first and step 4 lights when it reaches the right end. */
.process-track {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
}
.process-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(245, 181, 68, 0.75), var(--glow));
  box-shadow: 0 0 12px var(--glow-glow);
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.process-step { position: relative; padding-top: 38px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.pnode {
  position: absolute; top: 1px; left: 50%;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line-strong);
  transition: border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease);
}
.process-step.is-lit .pnode { background: var(--glow); border-color: var(--glow); box-shadow: 0 0 14px 3px var(--glow-glow); }
.process-step .pnum { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.2em; color: var(--text-dim); transition: color .4s var(--ease); }
.process-step.is-lit .pnum { color: var(--glow); }
.process-step h3 { font-size: 22px; margin: 16px 0 10px; }
.process-step p { color: var(--text-dim); font-size: 15.5px; margin: 0; max-width: 30ch; text-wrap: balance; }

/* =====================================================================
   7. Gallery
   ===================================================================== */
.gallery { background: var(--bg-2); }
.gallery-grid { display: grid; gap: 8px; }

/* Bento rows: a big tile next to a vertical stack of two. The big tile's 16:9
   aspect-ratio defines the row height; the stack is a flex column whose two tiles are
   flex:1, so they split the big's height into two equal halves with one 8px gap. This
   is the reliable combination (grid 1fr rows would not stretch the tiles). Images are
   absolutely positioned so their pixel dimensions never affect sizing. */
.bento-row { display: grid; grid-template-columns: 2fr 1fr; grid-template-areas: "big stack"; gap: 8px; }
.bento-row.reverse { grid-template-columns: 1fr 2fr; grid-template-areas: "stack big"; }

.gallery-item { overflow: hidden; border-radius: var(--radius); position: relative; border: 1px solid var(--line); min-width: 0; min-height: 0; }
.g-big { grid-area: big; aspect-ratio: 16 / 9; }                 /* big drives the row height */
.g-stack { grid-area: stack; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.g-stack .gallery-item { flex: 1; min-height: 0; }              /* two equal halves of the big */
/* Images are absolutely positioned so their intrinsic height never inflates the grid
   rows. Only the small tiles' aspect-ratio sizes the rows; the big simply spans them. */
.gallery-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,14,16,0.5), transparent 60%); opacity: .7; transition: opacity .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover::after { opacity: .35; }

/* =====================================================================
   8. Testimonials
   ===================================================================== */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Review cards: lit gold stars and the Google mark on top, the quote, the
   reviewer under a hairline. An inset hairline frame echoes the sheets. */
.testimonial {
  position: relative;
  margin: 0;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(245, 181, 68, 0.07), transparent 70%),
    linear-gradient(180deg, #16171A, #111215);
  border: 1px solid rgba(245, 181, 68, 0.16);
  border-radius: var(--radius-lg);
  padding: 34px 32px 28px; display: flex; flex-direction: column; gap: 22px;
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
  transition: border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.testimonial::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(234, 240, 244, 0.05);
  border-radius: 13px;
  pointer-events: none;
}
.testimonial:hover { border-color: rgba(245, 181, 68, 0.34); transform: translateY(-4px); box-shadow: 0 30px 60px -34px rgba(245, 181, 68, 0.3); }
.t-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.t-stars { display: inline-flex; gap: 4px; color: var(--glow); filter: drop-shadow(0 0 6px rgba(245, 181, 68, 0.45)); }
.t-stars svg { width: 17px; height: 17px; display: block; }
.t-g {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #F2F1EE;
  box-shadow: 0 0 0 4px rgba(242, 241, 238, 0.05), 0 6px 18px -6px rgba(0, 0, 0, 0.7);
}
.t-g svg { width: 19px; height: 19px; display: block; }
.testimonial blockquote { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); flex: 1; text-wrap: balance; }
.testimonial .who { display: flex; flex-direction: column; padding-top: 18px; border-top: 1px solid var(--line); }
.testimonial .who .name { font-family: var(--font-display); font-weight: 600; }
.testimonial .who .loc { color: var(--text-dim); font-size: 14px; }

/* =====================================================================
   9. Contact
   ===================================================================== */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact { overflow-x: clip; overflow-y: visible; background: var(--bg); }
/* Full-bleed dusk photo: the house sits on the right behind the glass form,
   the quiet left side carries the copy. The scrim darkens the left for the
   copy, keeps the form legible, and fades both edges into the page. */
.contact-bg { position: absolute; inset: 0; z-index: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.contact-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 14, 16, 0.85) 0%, rgba(13, 14, 16, 0) 12%, rgba(13, 14, 16, 0) 82%, var(--bg-2) 100%),
    linear-gradient(100deg, rgba(13, 14, 16, 0.95) 0%, rgba(13, 14, 16, 0.84) 40%, rgba(13, 14, 16, 0.55) 70%, rgba(13, 14, 16, 0.45) 100%);
}
.contact .trace { z-index: 1; }
.contact .section-title { font-size: clamp(28px, 3vw, 42px); text-wrap: wrap; }
.contact-details { margin-top: 34px; display: grid; gap: 18px; }
.contact-details li { display: flex; align-items: center; gap: 16px; }
.cd-icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--glow);
  border: 1px solid rgba(245, 181, 68, 0.4);
  background: rgba(245, 181, 68, 0.06);
  box-shadow: 0 0 20px rgba(245, 181, 68, 0.16);
}
.cd-icon svg { width: 19px; height: 19px; }
.cd-text { display: flex; flex-direction: column; gap: 3px; }
.contact-details .cd-label { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--glow); }
.contact-details .cd-value { font-size: 17px; }
.contact-details a.cd-value:hover { color: var(--glow); }

/* Glass card: translucent, blurred backdrop over the warm glow, hairline
   border and a lit top edge. */
.contact-form-wrap {
  position: relative;
  background:
    linear-gradient(160deg, rgba(242, 241, 238, 0.07), rgba(242, 241, 238, 0.015) 50%, rgba(245, 181, 68, 0.05)),
    rgba(23, 24, 27, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
          backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(242, 241, 238, 0.12);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 42px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 8px; }
.field.row-2 { grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em; color: var(--text-dim); }
.field input, .field select, .field textarea {
  width: 100%; background: rgba(13, 14, 16, 0.55); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: 10px; padding: 13px 15px; font-family: var(--font-body); font-size: 15.5px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--glow); box-shadow: 0 0 0 3px rgba(245,181,68,0.14); outline: none; }
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.contact-form .btn-primary { margin-top: 6px; justify-self: start; }
.form-note { color: var(--text-dim); font-size: 13px; margin: 2px 0 0; }

.contact-success { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 40px; border-radius: var(--radius-lg); }
.contact-success[hidden] { display: none; }   /* keep the form usable until submit */
.contact-success h3 { font-size: 26px; }
.contact-success p { color: var(--text-dim); max-width: 42ch; margin: 0; }
.success-icon { width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, var(--glow-soft), var(--glow) 60%, #8a5e12); box-shadow: 0 0 28px 4px var(--glow-glow); position: relative; }
.success-icon::after { content: ""; position: absolute; left: 19px; top: 27px; width: 10px; height: 18px; border: solid #1A1206; border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: 64px 36px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer-tag { color: var(--text-dim); margin: 16px 0 0; font-size: 15px; }
.footer-nav { display: flex; flex-direction: column; gap: 12px; }
.footer-nav a { color: var(--text-dim); font-size: 15px; transition: color .3s var(--ease); }
.footer-nav a:hover { color: var(--glow); }
.footer-nap { color: var(--text-dim); font-size: 15px; line-height: 1.8; }
.footer-nap .nap-name { color: var(--text); font-family: var(--font-display); font-weight: 600; }
.footer-nap a:hover { color: var(--glow); }
.footer-nap .nap-note { font-size: 12.5px; opacity: 0.7; margin-top: 8px; }
.footer-nap .nap-note--tight { margin-top: 0; }
/* Bottom row: fiction line left, "Built by Summit Oak AI" plus the mark right. */
.footer-bottom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 28px; }
.footer-fiction { color: var(--text-dim); font-size: 13px; margin: 0; white-space: nowrap; }
.footer-credit { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: auto; text-decoration: none; color: var(--text-dim); font-size: 13px; white-space: nowrap; transition: color .3s var(--ease); }
.footer-credit:hover { color: var(--text); }
.footer-credit .soak-mark { display: inline-block; width: 20px; height: 20px; flex: none; background-color: var(--glow); -webkit-mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat; mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat; opacity: 0.9; transition: opacity 0.2s ease; }
.footer-credit:hover .soak-mark { opacity: 1; }
.footer-credit:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 4px; }

/* =====================================================================
   Reveal animation hooks (driven by main.js / GSAP)
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(28px); }
.is-revealed .reveal, .reveal.is-revealed { opacity: 1; transform: none; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 960px) {
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 44px; }
  .process-track { display: none; }
  .pnode { top: 0; }
  .process-step { border-top: 1px solid var(--line-strong); }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .site-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.open {
    display: flex; flex-direction: column; position: absolute; top: 74px; left: 0; right: 0;
    background: rgba(13,14,16,0.97); backdrop-filter: blur(14px); padding: 22px var(--gutter) 30px; gap: 18px;
    border-bottom: 1px solid var(--line);
  }
  .site-nav.open a { font-size: 18px; }
  /* Phones: one column of rows, icon beside text, hairlines between. */
  .trust-grid { grid-template-columns: 1fr; padding-block: 6px; }
  .trust-item, .trust-item:nth-child(n+3) { justify-content: flex-start; padding: 16px 8px; border-top: 0; }
  .trust-item + .trust-item { border-top: 1px solid var(--line); }
  .trust-item + .trust-item::before { display: none; }
  .trust-icon { width: 42px; height: 42px; }
  .testimonials-grid, .process-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .why-item h3 { white-space: normal; }
  .sheet, .sheet:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-rows: 190px 1fr;
    height: auto; min-height: 0;
    top: calc(100px + var(--i) * 10px);
    margin-bottom: 28px;
  }
  .sheet:nth-child(even) .sheet-media { order: 0; }
  .sheet-media::after, .sheet:nth-child(even) .sheet-media::after { background: linear-gradient(0deg, rgba(20, 21, 24, 0.6), transparent 50%); }
  .sheet-text { padding: 30px 16px 34px; }
  .sheet-text::before { inset: 10px; }
  .sheet-count { top: 22px; }
  .sheet-icon { width: 52px; height: 52px; margin: 18px 0 16px; }
  .sheet h3 { font-size: 19px; letter-spacing: -0.02em; }
  /* Phone heads: four and five word titles hold one line; longer ones
     split into lines of three words or more. */
  .section-title, .contact .section-title { font-size: 23px; letter-spacing: -0.03em; text-wrap: wrap; }
  .sheet p { font-size: 15px; }
  .sheets-dwell { height: 12vh; }
  .deco--beam { width: 300px; height: 300px; top: -140px; right: -140px; }
  /* Gallery collapses to a single column of 16:9 tiles, big first then the stack. */
  .bento-row, .bento-row.reverse { grid-template-columns: 1fr; grid-template-areas: "big" "stack"; }
  .g-big { aspect-ratio: 16 / 9; }
  .g-stack .gallery-item { flex: none; aspect-ratio: 16 / 9; }
  .field.row-2 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .hero-actions .btn { flex: 1; }
}

/* =====================================================================
   Reduced motion: static, posters shown, no pin jank
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .why-item, .why-item::after, .pnode, .process-step .pnum, .testimonial, .trust-icon { transition: none; }
  .why-item:hover, .testimonial:hover { transform: none; }
  .hero-hint-line { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* Phones: the two footer lines stack, fiction first, both centered. */
@media (max-width: 640px){
  .footer-bottom{flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;}
  .footer-credit{margin-left:0;}
  .footer-fiction,.footer-credit{font-size:12px;}
  .footer-fiction{white-space:normal;}
  .footer-fiction > span{white-space:nowrap;}
  /* Compact hero CTAs so they don't crowd the "Scroll to power on" hint */
  .hero-actions{ gap: 10px; }
  .hero-actions .btn-lg{ padding: 12px 18px; font-size: 13.5px; }
  .hero-content{ padding-bottom: 118px; }
}
/* Second scroll animation: keep the light bulb (right side) in frame on mobile */
@media (max-width: 768px){
  .feature-video{ object-position: 92% center; }
}

/* ------------------------------------------------------------------ *
 * Gallery lightbox
 * ------------------------------------------------------------------ */
.gallery-item { cursor: pointer; }
.gallery-item:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }

html.is-lightbox-open, html.is-lightbox-open body { overflow: hidden; }

.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(8, 9, 11, 0.9);
  opacity: 0;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__backdrop { position: absolute; inset: 0; cursor: zoom-out; }

.lightbox__figure {
  position: relative; z-index: 1; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: min(1100px, 100%); max-height: 100%;
}
.lightbox__img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 72vh; object-fit: contain;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--bg-2);
}
.lightbox__caption {
  margin: 0 auto; max-width: 62ch;
  color: var(--text); font-size: 15px; line-height: 1.5;
  text-align: center; text-wrap: balance;
}

.lightbox__btn {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); background: rgba(23, 24, 27, 0.72);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; line-height: 1;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.lightbox__btn:hover { background: var(--bg-3); border-color: var(--glow); }
.lightbox__btn:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }
.lightbox__close {
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 46px; height: 46px; font-size: 30px;
}
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; }
.lightbox__prev { left: clamp(10px, 3vw, 28px); }
.lightbox__next { right: clamp(10px, 3vw, 28px); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }

@media (prefers-reduced-motion: no-preference) {
  .lightbox { transition: opacity .28s var(--ease); }
  .lightbox__figure { opacity: 0; transform: scale(.98); transition: opacity .28s var(--ease), transform .28s var(--ease); }
  .lightbox.is-open .lightbox__figure { opacity: 1; transform: scale(1); }
}

@media (max-width: 560px) {
  .lightbox { padding: 12px; }
  .lightbox__img { max-height: 62vh; }
  .lightbox__prev, .lightbox__next { width: 42px; height: 42px; font-size: 28px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__close { width: 42px; height: 42px; font-size: 26px; }
  .lightbox__caption { font-size: 14px; }
}


/* Brand-colored magnifier cursor on click-to-zoom photos (replaces removed on-card badges). */
.gallery-item { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='8' stroke='%23ffffff' stroke-width='4'/%3E%3Cline x1='19' y1='19' x2='29' y2='29' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='13' cy='13' r='8' stroke='%23F5B544' stroke-width='2.4'/%3E%3Cline x1='19' y1='19' x2='29' y2='29' stroke='%23F5B544' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in !important; }

/* Mobile: fill the page (cover, no letterbox) but shorten the hero so more of the bulb
   shows without a tight crop; the fixed nav sits above. Framing tuned by screenshot. */
@media (max-width: 768px) {
  .hero { min-height: 78vh; }
  .hero-video { object-fit: cover; object-position: 50% 42%; }
}

/* Mobile: two-column footer (list beside contact) to cut height; brand spans full width. */
@media (max-width: 719px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}