/* ==========================================================================
   The Electriq Company — site styles
   Implemented from the Claude Design handoff (Electriq Comp / index.html).
   ========================================================================== */

@font-face {
  font-family: "Good Times";
  src: url("../assets/fonts/GoodTimesLt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0a0a0c;
  --bg-2: #101012;
  --surface: #16161a;
  --ink: #f5f1ea;
  --ink-2: rgba(245, 241, 234, 0.7);
  --ink-3: rgba(245, 241, 234, 0.5);
  --ink-4: rgba(245, 241, 234, 0.3);
  --line: rgba(245, 241, 234, 0.1);
  --line-2: rgba(245, 241, 234, 0.05);
  --accent: #ffd238;
  --accent-soft: rgba(255, 210, 56, 0.14);
  --accent-glow: rgba(255, 210, 56, 0.25);
  --sans: "Manrope", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* Brand display font — Good Times Light (licensed) */
  --brand: "Good Times", "Audiowide", "Manrope", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
/* Never allow sideways scrolling (iOS ignores overflow-x on body alone) */
html, body { overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }
body {
  font-family: var(--sans);
  font-size: 16px; line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: #0a0a0c; }

/* Film grain (subtle) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
}

.label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 400;
}

/* === BUTTONS === */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  background: var(--ink); color: #0a0a0c;
  border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all 0.3s var(--ease);
  letter-spacing: -0.005em;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(245, 241, 234, 0.15); }
.btn .arrow { transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink-4);
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(245, 241, 234, 0.05); box-shadow: none; }
.btn--hero { font-family: var(--brand); font-size: 11px; }

/* === NAV === */
nav.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px 56px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  background: rgba(10, 10, 12, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0.98;
  /* Hidden until the user scrolls past the hero — slides down into place. */
  transform: translateY(-100%);
  pointer-events: none;
  transition: background 0.4s, backdrop-filter 0.4s, padding 0.4s, border-color 0.4s, transform 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}
nav.nav.scrolled {
  background: rgba(10, 10, 12, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 56px;
  border-bottom-color: var(--line-2);
  transform: none;
  pointer-events: auto;
}
nav.nav > .nav-logo { justify-self: start; }
nav.nav > .nav-links { justify-self: center; }
nav.nav > .btn {
  justify-self: end;
  font-family: var(--brand); font-size: 9px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, background 0.2s ease, color 0.2s ease;
}
nav.nav.past-hero > .btn { opacity: 1; pointer-events: auto; }
nav.nav > .nav-fulllogo { display: none; }

.nav-logo { display: flex; align-items: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
.past-hero .nav-logo { opacity: 1; pointer-events: auto; }
.nav-logo img { height: 72px; width: auto; display: block; transition: height 0.4s ease; }
.scrolled .nav-logo img { height: 52px; }

.nav-links { display: flex; gap: 40px; }
.nav-links a {
  font-family: var(--brand); font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.2s;
  position: relative; padding: 6px 0;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Scroll-progress hairline beneath the bar */
.nav-progress {
  position: absolute; left: 0; bottom: -1px; height: 1px;
  width: 0%;
  background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent));
  box-shadow: 0 0 6px var(--accent-glow);
  transition: width 0.08s linear, opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}
nav.nav.scrolled .nav-progress { opacity: 1; }

/* Hamburger + drawer are mobile-only */
.nav-burger { display: none; }
.mobile-menu { display: none; }

/* === HERO === */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 120px 56px 80px;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: repeating-linear-gradient(118deg, #14151a, #14151a 2px, #0e0f13 2px, #0e0f13 5px);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 80%, rgba(0, 0, 0, 0.85) 100%);
}
/* Warm bloom — driven by a rAF loop (scroll + drift + cursor); fades in with "Powered by". */
.hero-bloom {
  position: absolute; left: 50%; top: 0;
  width: 1100px; height: 1100px;
  margin-left: -550px;
  background: radial-gradient(circle at center, var(--accent-soft), transparent 55%);
  pointer-events: none; z-index: 1;
  transform: translate3d(0, -30%, 0);
  will-change: transform;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero.loaded .hero-bloom { opacity: 1; transition-delay: 1900ms; }

.hero-content { position: relative; z-index: 2; max-width: 1200px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--brand); font-size: 11px; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 44px;
}
.hero-eyebrow .line { width: 32px; height: 1px; background: var(--ink-4); }

h1.hero-title {
  font-family: var(--brand); font-weight: 400;
  /* Design is 95px; scales down on narrower desktops so the line never overflows. */
  font-size: clamp(48px, 7.4vw, 95px);
  line-height: 1.05; letter-spacing: -0.02em;
  margin: 0; text-wrap: balance;
}
h1.hero-title em { font-family: var(--brand); font-style: italic; font-weight: 400; color: var(--accent); }

.hero-powered {
  display: inline-flex; align-items: center; gap: 16px;
  margin: 40px auto 0;
  font-family: var(--brand); font-size: 12px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero-powered img { height: 26px; width: auto; display: block; }
.hero-actions {
  display: flex; gap: 14px; justify-content: center;
  margin-top: 48px;
}
.hero-corners {
  position: absolute; bottom: 32px; left: 0; right: 0;
  padding: 0 56px; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end;
  font-family: var(--brand); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.scroll-cue {
  position: absolute; bottom: 32px; left: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-family: var(--brand); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-3); z-index: 2;
}
.scroll-cue .pipe {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--ink-4), transparent);
  animation: pipeFlow 2.4s ease-in-out infinite;
}
@keyframes pipeFlow {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 0.7; }
  50% { transform: scaleY(0.5); opacity: 1; }
}

/* Hero entrance — order: title → powered → eyebrow → actions → corners → cue */
.hero-eyebrow,
.hero-powered,
.hero-actions,
.hero-corners {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease, transform 1s var(--ease);
  will-change: transform, opacity;
}
.scroll-cue {
  opacity: 0;
  transform: translate(-50%, 18px);
  transition: opacity 0.9s ease, transform 1s var(--ease);
  will-change: transform, opacity;
}
.hero.loaded .hero-eyebrow,
.hero.loaded .hero-powered,
.hero.loaded .hero-actions,
.hero.loaded .hero-corners { opacity: 1; transform: none; }
.hero.loaded .scroll-cue { opacity: 1; transform: translate(-50%, 0); }

.hero.loaded .hero-powered { transition-delay: 1900ms; }
.hero.loaded .hero-eyebrow { transition-delay: 2550ms; }
.hero.loaded .hero-actions { transition-delay: 3050ms; }
.hero.loaded .hero-corners { transition-delay: 3350ms; }
.hero.loaded .scroll-cue   { transition-delay: 3550ms; }

/* H1 word-by-word mask reveal — wrapper masks, inner slides (spans added by main.js) */
h1.hero-title .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Allow descenders + italic overhang without clipping */
  padding: 0.08em 0.04em 0.18em;
  margin: -0.08em -0.04em -0.18em;
  line-height: inherit;
}
h1.hero-title .word-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 1s cubic-bezier(0.22, 0.7, 0.2, 1);
  will-change: transform;
}
.hero.loaded h1.hero-title .word-inner { transform: translateY(0); }

/* === LOGO INTRO (mobile only — desktop nav already shows the logo) === */
.logo-intro { display: none; }
.logo-intro .li-mark { width: min(840px, 78vw); aspect-ratio: 2825 / 738; will-change: transform, opacity; }
.logo-intro .li-mark img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transform-origin: 50% 0; will-change: transform, opacity;
}

/* Scroll-linked logo: fades/rises in from the bottom, then shrinks and fades out
   as it reaches the header (--nav-h). Runs on the compositor where supported
   (Safari 26+, Chrome), so it's smooth on phones; main.js covers other browsers. */
:root { --nav-h: 65px; }
@keyframes li-in {
  from { opacity: 0; transform: translateY(28px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes li-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: scale(0.55); }
}
@supports (animation-timeline: view()) {
  .logo-intro .li-mark {
    animation: li-in linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 35%;
  }
  .logo-intro .li-mark img {
    animation: li-out linear both;
    animation-timeline: view(block var(--nav-h) 0px);
    animation-range: cover 45% exit 100%;
  }
}

/* Solid black strip on the top edge (phones only). Safari 26 on iPhone colors the
   status bar from fixed elements touching the top edge, so this keeps the area
   behind the clock solid black instead of showing the page scrolling underneath. */
.safari-edge { display: none; }
@media (max-width: 760px) {
  .safari-edge {
    display: block;
    position: fixed; left: 0; right: 0; top: 0; height: 2px;
    background-color: #0a0a0c;
    z-index: 60; pointer-events: none;
  }
}

/* === SECTION TEMPLATE === */
.section { padding: 160px 56px; position: relative; }
.section-inner { max-width: 1400px; margin: 0 auto; }
.section-head { text-align: center; margin-bottom: 100px; }
.section-head .label { margin-bottom: 28px; font-family: var(--brand); }
.section-head .label::before { content: "—  "; color: var(--accent); }
.section-head .label::after { content: "  —"; color: var(--accent); }
.section-head h2 {
  font-family: var(--brand); font-weight: 400;
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 auto; max-width: 900px; text-wrap: balance;
}
.section-head h2 em { font-family: var(--brand); font-style: italic; font-weight: 400; color: var(--accent); }
.section-head p {
  margin: 32px auto 0; max-width: 540px;
  font-family: var(--brand);
  font-size: 17px; line-height: 1.55; color: var(--ink-2); font-weight: 300;
}
.section-head p em { font-family: var(--brand); font-style: italic; color: var(--accent); }

/* Per-section heading sizes from the design */
#divisions .section-head h2 { font-size: 50px; }
#divisions .section-head h2 em { font-size: 45px; }
#divisions .section-head p { font-size: 15px; }
#divisions .section-head p em { font-size: 12px; }
#services { padding-top: 80px; }
#services .section-head h2 em { font-size: 58px; }
#services .section-head p { font-size: 14px; }

/* === DIVISIONS === */
.divisions { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.division {
  position: relative; overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color 0.4s, transform 0.4s var(--ease);
}
.division:hover { border-color: var(--accent); }
.division-img {
  aspect-ratio: 4 / 3; position: relative; overflow: hidden;
  background: repeating-linear-gradient(118deg, #1a1b20, #1a1b20 1px, #131318 1px, #131318 3px);
  transition: transform 0.8s var(--ease);
}
.division:hover .division-img { transform: scale(1.02); }
.division-img::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center bottom, var(--accent-soft), transparent 70%);
}
.division-img--residential {
  background: url("../assets/img/residential.jpg") center / cover no-repeat;
}
.division-img--commercial {
  background: url("../assets/img/commercial.webp") center 45% / cover no-repeat;
  filter: contrast(1.18) saturate(1.2) brightness(0.9) sepia(0.08);
}
.division-img .id {
  position: absolute; bottom: 20px; right: 20px; z-index: 1;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: 56px; color: var(--accent); line-height: 1;
}
.division-body { padding: 40px 40px 44px; }
.division-body h3 {
  font-family: var(--brand); font-weight: 300;
  font-size: 40px; letter-spacing: -0.025em; line-height: 1;
  margin: 0 0 20px;
}
.division-body h3 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--accent); }
.division-body p {
  color: var(--ink-2); font-size: 15px; line-height: 1.55; font-weight: 400;
  margin: 0 0 32px; max-width: 480px;
}

/* === SERVICES === */
.svc-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 60px; }
.svc-tab {
  padding: 12px 24px;
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-3);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; cursor: pointer;
  transition: all 0.3s;
  border-right: 0;
}
.svc-tab:last-child { border-right: 1px solid var(--line); }
.svc-tab.active { background: var(--ink); color: #0a0a0c; border-color: var(--ink); }
.svc-tab:hover:not(.active) { color: var(--ink); }

.services {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.service {
  background: var(--bg);
  padding: 40px 32px;
  min-height: 360px;
  display: flex; flex-direction: column;
  position: relative;
  transition: background 0.3s;
  cursor: pointer;
}
.service:hover { background: var(--bg-2); }
.service.hidden { display: none; }
.svc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 36px;
}
.svc-tag {
  font-family: var(--brand); font-size: 9px; letter-spacing: 0.2em;
  color: var(--ink-3); text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--line);
}
.svc-tag--both { font-size: 8px; }
.svc-icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  color: var(--ink-3);
  margin-bottom: 28px;
  transition: color 0.3s, transform 0.4s var(--ease);
}
.service:hover .svc-icon { color: var(--accent); transform: translateY(-2px); }
.svc-title {
  font-family: var(--brand); font-weight: 400;
  font-size: 22px; letter-spacing: -0.01em; line-height: 1.1;
  margin: 0 0 12px;
}
.svc-title--md { font-size: 20px; }
.svc-title--sm { font-size: 18px; }
.svc-title em { font-family: var(--brand); font-style: normal; font-weight: 400; color: var(--accent); }
.svc-desc {
  color: var(--ink-2); font-size: 13px; line-height: 1.55; font-weight: 400;
  margin: 0 0 auto;
}

/* === CONTACT === */
.contact-section { background: var(--bg-2); }
/* The design sets the whole contact block in Good Times; !important beats component font rules. */
.contact-section, .contact-section * { font-family: "Good Times", "Manrope", sans-serif !important; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.field select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.contact-info { display: flex; flex-direction: column; gap: 40px; padding: 8px 0; }
.contact-info > .label { color: var(--accent); }
.contact-info h3 {
  font-weight: 200;
  font-size: 64px; line-height: 0.95; letter-spacing: -0.035em;
  margin: 0 0 12px;
}
/* Slanted "help" leans into the "?" — give it breathing room */
.contact-info h3 em { font-style: italic; font-weight: 400; color: var(--accent); margin-right: 0.14em; }
.contact-info > p { color: var(--ink-2); font-size: 16px; line-height: 1.55; font-weight: 300; margin: 0; max-width: 440px; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 16px; }
.info-block { display: flex; flex-direction: column; gap: 6px; }
.info-block .v { font-size: 18px; font-weight: 400; letter-spacing: -0.01em; }
.info-block .v.accent { color: var(--accent); }
.info-block .v.small { font-size: 15px; line-height: 1.4; font-weight: 300; }

.contact-form { border: 1px solid var(--line); background: var(--bg); padding: 40px; }
.req-type {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); margin-bottom: 28px;
}
.req-type button {
  background: transparent; border: 0; border-right: 1px solid var(--line);
  padding: 14px 6px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.req-type button:last-child { border-right: 0; }
.req-type button:hover { color: var(--ink); }
.req-type button.on { background: var(--accent); color: #0a0a0c; }
.contact-form .form-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 20px; margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.form-head .t { font-style: italic; font-size: 22px; color: var(--ink); }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.field label {
  font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.field input, .field select, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font-size: 15px; font-weight: 400;
  padding: 10px 0; outline: none;
  transition: border-color 0.3s;
}
.field select option { background: var(--bg); color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input[type="date"] { color-scheme: dark; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.field input, .field textarea { width: 100%; min-width: 0; }
.field-row[hidden], .field[hidden] { display: none; }
.contact-form button.btn { width: 100%; justify-content: center; padding: 16px; background: var(--accent); color: #0a0a0c; }
.contact-form button.btn:hover { background: var(--accent); }
.contact-form button.btn:disabled { cursor: default; opacity: 0.85; }
.form-status { margin: 14px 0 0; font-size: 11px; letter-spacing: 0.08em; color: var(--ink-3); text-align: center; min-height: 1em; }
.form-status.error { color: #e8866a; }

/* === FOOTER === */
footer {
  padding: 100px 56px 40px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}
.footer-inner { max-width: 1400px; margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 80px; padding-bottom: 60px; border-bottom: 1px solid var(--line);
}
.footer-col h4 {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  margin: 0 0 20px;
}
.footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.footer-col a { font-size: 14px; color: var(--ink-2); transition: color 0.3s; }
.footer-col h4 a { font-size: inherit; color: inherit; }
.footer-col a:hover { color: var(--accent); }
.footer-brand img { width: 191px; height: auto; display: block; margin-bottom: 20px; }
.footer-brand p {
  font-size: 14px; color: var(--ink-2); font-weight: 300;
  line-height: 1.55; margin: 0; max-width: 360px;
}
/* Empty spacer kept from the design (slogan row was removed) */
.footer-spacer { display: flex; margin: 80px 0 40px; }
.footer-bottom {
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}

/* === SCROLL FADE-IN === */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .services { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .contact { gap: 48px; }
  /* Keep the logo clear of the centered links on narrow desktops */
  .nav-links { gap: 22px; }
  .nav-links a { font-size: 10px; }
  .nav-logo img, .scrolled .nav-logo img { height: 40px; }
}

/* ===== MOBILE (≤760px) ===== */
@media (max-width: 760px) {
  nav.nav, footer { padding-left: 20px; padding-right: 20px; }
  .section { padding: 96px 20px; }

  /* --- Nav: centered full logo + hamburger, revealed after the intro logo --- */
  nav.nav {
    grid-template-columns: 40px 1fr 40px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
    border-bottom-color: rgba(245, 241, 234, 0);
  }
  /* On phones the header fades in place (no slide) and keeps a fixed height so the
     logo handoff lines up. Its backing lives on ::after: Safari 26 ignores
     absolutely-positioned children when tinting, so only .safari-edge sets the
     status-bar color (solid black). */
  nav.nav,
  nav.nav.scrolled {
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px 12px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    opacity: 0;
    transition: opacity 0.35s ease, border-color 0.35s ease;
  }
  nav.nav.scrolled { opacity: 1; border-bottom-color: rgba(245, 241, 234, 0.06); }
  nav.nav::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: rgba(10, 10, 12, 0.97);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    pointer-events: none;
  }

  nav.nav > .nav-logo,
  nav.nav > .nav-links,
  nav.nav > .btn { display: none; }

  nav.nav > .nav-fulllogo {
    display: flex; align-items: center; justify-content: center;
    grid-column: 2; justify-self: center;
    height: 24px; max-width: 200px;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
  nav.nav.scrolled > .nav-fulllogo { opacity: 1; pointer-events: auto; }
  nav.nav > .nav-fulllogo img { height: 100%; width: auto; display: block; }

  .nav-burger {
    display: flex;
    grid-column: 3;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px;
    width: 40px; height: 40px;
    justify-self: end;
    background: transparent; border: 1px solid rgba(245, 241, 234, 0.14);
    border-radius: 8px;
    cursor: pointer; padding: 0;
    transition: transform 0.18s ease, border-color 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-burger:active { transform: scale(0.92); }
  .nav-burger span {
    display: block; width: 16px; height: 1.2px; background: var(--ink);
    transition: transform 0.3s, opacity 0.3s, background 0.3s;
  }
  body.menu-open .nav-burger { border-color: var(--accent); }
  body.menu-open .nav-burger span { background: var(--accent); }
  body.menu-open .nav-burger span:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
  body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }

  .nav-progress { opacity: 1; height: 1.5px; }

  /* --- Drawer: slides in from the right --- */
  .mobile-menu {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(86vw, 360px);
    background: rgba(10, 10, 12, 0.97);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(245, 241, 234, 0.08);
    z-index: 49;
    padding: calc(env(safe-area-inset-top, 0px) + 88px) 28px
             calc(env(safe-area-inset-bottom, 0px) + 28px);
    display: flex; flex-direction: column; gap: 0;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease);
    pointer-events: none;
    overflow-y: auto;
  }
  body.menu-open .mobile-menu { transform: none; pointer-events: auto; }
  .mobile-menu::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0; pointer-events: none;
    transition: opacity 0.4s ease;
  }
  body.menu-open .mobile-menu::before { opacity: 1; }

  .mm-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-bottom: 24px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
  .mm-label, .mm-ix {
    font-family: "Good Times", var(--mono); font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .mm-label { color: var(--accent); }

  .mm-list { display: flex; flex-direction: column; }
  .mobile-menu .mm-list a {
    display: grid; grid-template-columns: 36px 1fr 20px;
    align-items: baseline; gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--brand); font-size: 22px; font-weight: 400;
    letter-spacing: -0.005em;
    transition: padding-left 0.3s var(--ease), color 0.3s;
    opacity: 0; transform: translateX(20px);
  }
  .mobile-menu .mm-list a .mm-n {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
    color: var(--ink-4);
  }
  .mobile-menu .mm-list a .mm-ar {
    font-family: var(--mono); font-size: 14px; color: var(--ink-4);
    text-align: right;
    transition: transform 0.3s, color 0.3s;
  }
  .mobile-menu .mm-list a:active,
  .mobile-menu .mm-list a:hover { color: var(--accent); padding-left: 6px; }
  .mobile-menu .mm-list a:active .mm-ar,
  .mobile-menu .mm-list a:hover .mm-ar { color: var(--accent); transform: translateX(3px); }

  body.menu-open .mobile-menu .mm-list a {
    opacity: 1; transform: none;
    transition: opacity 0.5s ease, transform 0.5s var(--ease),
                padding-left 0.3s var(--ease), color 0.3s;
  }
  body.menu-open .mobile-menu .mm-list a:nth-child(1) { transition-delay: 0.18s; }
  body.menu-open .mobile-menu .mm-list a:nth-child(2) { transition-delay: 0.24s; }
  body.menu-open .mobile-menu .mm-list a:nth-child(3) { transition-delay: 0.30s; }
  body.menu-open .mobile-menu .mm-list a:nth-child(4) { transition-delay: 0.36s; }

  .mm-cta {
    margin-top: 28px; align-self: stretch; justify-content: center;
    width: 100%; padding: 16px; background: var(--accent); color: #0a0a0c;
    font-family: "Good Times", var(--mono); font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    opacity: 0; transform: translateY(12px);
  }
  body.menu-open .mm-cta {
    opacity: 1; transform: none;
    transition: opacity 0.5s ease 0.5s, transform 0.5s var(--ease) 0.5s, background 0.2s ease;
  }

  .mm-contact {
    margin-top: auto; padding-top: 28px;
    display: flex; flex-direction: column; gap: 8px;
    border-top: 1px solid var(--line);
    opacity: 0; transform: translateY(12px);
  }
  body.menu-open .mm-contact {
    opacity: 1; transform: none;
    transition: opacity 0.5s ease 0.58s, transform 0.5s var(--ease) 0.58s;
  }
  .mm-contact-label {
    font-family: "Good Times", var(--mono); font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; color: var(--ink-3);
    margin-bottom: 6px;
  }
  .mm-contact-line { font-family: var(--sans); font-size: 14px; color: var(--ink-2); letter-spacing: -0.005em; }
  .mm-contact-line.dim { color: var(--ink-4); font-size: 12px; }

  /* --- Hero --- */
  /* 100lvh = tallest visible area; JS tops it up on phones where that's still short */
  .hero { min-height: 100vh; min-height: max(100lvh, var(--hero-min, 0px)); padding: 0 20px; }
  h1.hero-title { font-size: clamp(40px, 11vw, 64px); line-height: 1.04; }
  .hero-eyebrow { font-size: 9px; gap: 10px; margin-bottom: 28px; }
  .hero-eyebrow .line { width: 18px; }
  .hero-powered { margin-top: 28px; font-size: 10px; gap: 12px; }
  .hero-powered img { height: 20px; }
  .hero-actions { flex-direction: column; gap: 10px; margin-top: 32px; align-items: stretch; }
  .hero-actions .btn { justify-content: center; width: 100%; }
  .hero-corners { padding: 0 20px; bottom: 20px; font-size: 9px; letter-spacing: 0.14em; }
  .hero-corners > :nth-child(2) { display: none; }
  .scroll-cue { bottom: 18px; font-size: 9px; gap: 8px; }
  .scroll-cue .pipe { height: 26px; }

  /* --- Logo intro band --- */
  /* The intro logo stays hidden on the opening screen and fades in once the
     visitor starts scrolling (main.js toggles .has-scrolled on <html>). */
  .logo-intro {
    background: var(--bg);
    display: flex; align-items: center; justify-content: center;
    padding: 96px 24px 0;
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .has-scrolled .logo-intro { opacity: 1; }
  .logo-intro + .section { padding-top: 36px; }

  /* --- Section heads --- */
  .section-head { margin-bottom: 56px; }
  .section-head h2,
  #divisions .section-head h2 { font-size: clamp(28px, 8vw, 40px); }
  .section-head h2 em,
  #divisions .section-head h2 em,
  #services .section-head h2 em { font-size: 1em; }
  .section-head p,
  #divisions .section-head p { font-size: 14px; margin-top: 20px; }

  /* --- Divisions --- */
  .divisions { grid-template-columns: 1fr; gap: 16px; }
  .division-body { padding: 28px 24px 32px; }
  .division-body h3 { font-size: 32px; margin-bottom: 16px; }
  .division-body p { font-size: 14px; margin-bottom: 24px; }
  .division-img .id { font-size: 40px; bottom: 16px; right: 16px; }

  /* --- Services --- */
  .services { grid-template-columns: 1fr; gap: 1px; }
  .service { padding: 32px 24px; min-height: auto; }
  .svc-head { margin-bottom: 24px; }
  .svc-icon { width: 44px; height: 44px; margin-bottom: 20px; }
  .svc-icon svg { width: 28px; height: 28px; }
  .svc-title, .svc-title--md, .svc-title--sm { font-size: 19px; }
  .svc-desc { font-size: 13px; }
  .svc-tabs { flex-wrap: wrap; gap: 0; margin-bottom: 40px; justify-content: center; }
  .svc-tab { padding: 10px 14px; font-size: 9px; letter-spacing: 0.12em; flex: 1 1 auto; min-width: 0; }

  /* --- Contact --- */
  .contact { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .contact-info { gap: 28px; min-width: 0; }
  .contact-info h3 { font-size: 40px; }
  .contact-info > p { font-size: 14px; }
  /* Details as one top-down list: Email, Coverage, Credentials, Bid window */
  .info-grid { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0; border-top: 1px solid var(--line); }
  .info-block { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .info-block--credentials { order: 3; }
  .info-block--bid { order: 4; }
  .info-block .v { font-size: 14px; overflow-wrap: anywhere; }
  .info-block .v.accent { font-size: clamp(11px, 3.6vw, 14px); letter-spacing: 0; }
  .info-block .v.small { font-size: 13px; }
  .contact-form { padding: 24px 20px; }
  .form-head .t { font-size: 18px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }

  /* --- Footer --- */
  /* Footer on phones: brand + a single row of Residential / Commercial / Contact */
  .footer-top { grid-template-columns: repeat(3, auto); justify-content: start; gap: 28px clamp(14px, 5vw, 32px); padding-bottom: 40px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col ul { display: none; }
  .footer-col h4 { margin: 0; }
  .footer-col h4 a { font-size: 11px; color: var(--ink-2); }
  .footer-brand p { font-size: 13px; }
  .footer-spacer { margin: 56px 0 32px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-eyebrow, .hero-powered, .hero-actions, .hero-corners,
  h1.hero-title .word-inner {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .scroll-cue {
    transition: none !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
  }
  .hero-bloom { opacity: 1; transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .logo-intro .li-mark, .logo-intro .li-mark img { animation: none !important; opacity: 1 !important; transform: none !important; }
  .logo-intro { transition: none; }
}