/* ============================================================
   TK ELECTRIC — Luxury Edition (Burk-inspired standard)
   Full-bleed photography · thin letterspaced serif · restraint
   ============================================================ */
:root {
  --ink: #14171b;          /* near-black graphite */
  --steel: #262b31;
  --steel-deep: #1a1e23;
  --copper: #e31e24;        /* TK Electric brand red — from Torriono's 20-year logo */
  --copper-soft: #ff5a5e;
  --paper: #f8f6f2;         /* warm gallery white */
  --white: #ffffff;
  --line: rgba(20, 23, 27, 0.12);
  --shadow: 0 24px 70px rgba(20, 23, 27, 0.18);
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-size: 17px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
strong { font-weight: 500; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 32px; }

/* ---------- type ---------- */
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--copper);
  display: block;
  margin-bottom: 22px;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
}
h2 {
  font-size: clamp(34px, 4.6vw, 54px);
  letter-spacing: 0.02em;
  font-weight: 300;
}
h2 em { font-style: italic; color: var(--copper); }

/* ---------- top announcement ---------- */
.topbar {
  background: var(--ink);
  color: #cfc7bd;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 16px;
  /* message and language switch travel together as one centred group */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.topbar strong { color: var(--copper); font-weight: 400; }

/* EN / ES switch — lives in the top bar rather than the nav so a Spanish
   speaker doesn't have to open the mobile menu to find it */
.langswitch {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 3px;
  overflow: hidden;
}
.langswitch a {
  display: block;
  padding: 2px 9px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.2s ease, color 0.2s ease;
}
.langswitch a:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.langswitch a.is-active { background: var(--copper); color: var(--white); }
.langswitch a:focus-visible { outline: 2px solid var(--copper-soft); outline-offset: -2px; }

/* ---------- header (transparent over hero, solid once scrolled) ---------- */
header.site {
  position: fixed;
  /* The header used to sit at a hardcoded 37px — the height of a single line
     of top bar. The moment that bar wrapped to two lines (a narrow phone, or
     the longer Spanish copy) the header covered it. script.js measures the
     bar and publishes its real height here; 37px stays as the no-JS guess. */
  top: var(--topbar-h, 37px);
  left: 0; right: 0;
  z-index: 50;
  background: transparent;
  border: none;
  /* `top` is deliberately NOT transitioned. Its value comes from the
     --topbar-h custom property, and a transitioned property whose value
     resolves from a custom property set after first paint never picks the
     new value up — the header stayed at the 37px fallback and sat on top of
     the announcement bar. The snap to 0 happens 80px into a scroll, by which
     point the bar is off screen anyway, so nothing visibly jumps. */
  transition: background 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
header.site.scrolled {
  top: 0;
  background: rgba(20, 23, 27, 0.96);
  box-shadow: 0 4px 30px rgba(20, 23, 27, 0.25);
}
header.site.scrolled .nav { padding: 16px 40px; }
header.site.scrolled .wordmark { font-size: 24px; }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
/* Torriono's actual logo, lifted from his business card — sits on a white
   chip so it stays legible over the dark header and hero photo. */
.logo-badge {
  display: inline-flex;
  align-items: center;
  background: var(--white);
  padding: 8px 16px;
  border-radius: 5px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.28);
  transition: padding 0.3s ease;
}
.logo-badge img { display: block; height: 32px; width: auto; }
header.site.scrolled .logo-badge { padding: 6px 14px; }
header.site.scrolled .logo-badge img { height: 26px; }
.wordmark {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: none;
}
.wordmark em { font-style: italic; text-transform: none; color: var(--copper-soft); letter-spacing: 0.01em; }
.nav-links { display: flex; gap: 34px; align-items: center; list-style: none; }
.nav-links a {
  text-decoration: none;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--copper); }
.nav-links a.active { color: var(--copper); }
.nav-links a.active::after { content: ""; display: block; height: 1px; background: var(--copper); margin-top: 6px; }

/* hamburger (mobile only) */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  height: 1px;
  background: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.phone-cta {
  border: 1px solid rgba(255,255,255,0.5);
  padding: 12px 24px;
  border-radius: 0;
  transition: border-color 0.2s, color 0.2s;
}
.phone-cta:hover { border-color: var(--copper); color: var(--copper) !important; }

/* ---------- hero: full-bleed photography ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  overflow: hidden;
  background:
    linear-gradient(rgba(20, 23, 27, 0.66), rgba(20, 23, 27, 0.48) 45%, rgba(20, 23, 27, 0.76)),
    url("img/hero-exterior-lighting.jpg") center 38% / cover no-repeat;
}
/* slow ambient light drift — deliberately slower than reading speed */
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.10), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(255, 220, 180, 0.08), transparent 50%);
  animation: hero-drift 26s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hero-drift {
  0% { transform: translate(-2%, -1%) scale(1); }
  100% { transform: translate(2%, 2%) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}
.hero-inner {
  max-width: 900px;
  padding: 160px 32px 100px;
}
.hero h1 {
  font-size: clamp(42px, 6.5vw, 84px);
  font-weight: 300;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.hero h1 em { font-style: italic; text-transform: none; color: var(--copper-soft); letter-spacing: 0.02em; }
.hero .sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 46px;
}
.hero-points {
  list-style: none;
  display: flex;
  gap: 34px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
  font-size: 12.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.hero-points li::before { content: "✦ "; color: var(--copper); }

.form-success {
  max-width: 760px;
  margin: 0 auto;
  background: rgba(255,255,255,0.95);
  color: var(--steel);
  padding: 22px 24px;
  font-size: 15px;
  box-shadow: var(--shadow);
}

/* lead-submitted toast — impossible to miss, self-dismisses */
.lead-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--copper);
  padding: 16px 26px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow: 0 20px 50px rgba(20,23,27,0.4), 0 0 0 4px rgba(227,30,36,0.18);
  transform: translate(-50%, -140%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
.lead-toast[hidden] { display: flex; } /* keep animatable, JS controls visibility via class */
.lead-toast.is-shown { transform: translate(-50%, 0); opacity: 1; }
.lead-toast svg { color: var(--copper-soft); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .lead-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}
@media (max-width: 640px) {
  .lead-toast { left: 16px; right: 16px; top: 16px; transform: translateY(-140%); }
  .lead-toast.is-shown { transform: translateY(0); }
}
.form-success a { color: var(--copper); font-weight: 500; }

/* scroll cue */
.scroll-cue {
  display: block;
  width: 26px;
  height: 42px;
  margin: 56px auto 0;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 14px;
  position: relative;
}
.scroll-cue span {
  position: absolute;
  top: 8px; left: 50%;
  width: 4px; height: 4px;
  margin-left: -2px;
  background: var(--copper);
  border-radius: 50%;
  animation: scrollCue 1.8s ease-in-out infinite;
}
@keyframes scrollCue {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(16px); opacity: 0; }
}

/* inline quote bar — the Burk search bar, repurposed as the funnel */
.offer-bar {
  display: flex;
  background: var(--white);
  box-shadow: var(--shadow);
  max-width: 760px;
  margin: 0 auto;
}
.offer-bar input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  padding: 22px 24px;
  font-size: 15.5px;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
}
.offer-bar input + input { border-left: 1px solid var(--line); }
.offer-bar input:focus { outline: 2px solid var(--copper); outline-offset: -2px; }
.offer-bar .btn-gold { flex: 0 0 auto; width: auto; }

/* Honeypot wrapper. Pulled off-screen rather than display:none — bots skip
   fields in hidden containers, and a skipped trap catches nothing. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.btn-gold {
  background: var(--copper);
  color: var(--white);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  padding: 22px 34px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.2s;
}
.btn-gold { transition: background 0.2s, box-shadow 0.25s ease, transform 0.15s ease; }
.btn-gold:hover { background: #a3151a; box-shadow: 0 0 0 4px rgba(227,30,36,0.22); }
.btn-gold:active { transform: scale(0.97); }
.hero .privacy { font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.65); margin-top: 18px; }
.hero .privacy a { color: var(--copper-soft); }

/* trust strip */
.trust {
  background: var(--ink);
  padding: 26px 0;
}
.trust .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 56px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: #cfc7bd;
}
.trust .stars { color: var(--copper); letter-spacing: 3px; }
.trust-badge { display: flex; align-items: center; gap: 12px; }
.trust-badge img { height: 28px; width: auto; }

/* Spanish pages: says plainly that the phone is answered in English. Sits
   directly under the trust bar so nobody reaches a phone number without
   having passed it. Deliberately calm — a warning stripe would read as a
   problem rather than a practical heads-up. */
.lang-notice {
  /* Carries the same ink as the trust bar directly above it, so it reads as a
     quiet second line of that strip rather than a pink alert wedged between
     two dark bands. The point is a practical heads-up, not a warning. */
  background: var(--ink);
  padding: 0 0 28px;
}
.lang-notice .wrap {
  max-width: 730px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  font-size: 13px;
  line-height: 1.75;
  color: #8b837a;
}
.lang-notice strong { color: #cfc7bd; font-weight: 400; }
.lang-notice a { color: #cfc7bd; text-underline-offset: 2px; }
.lang-notice a:hover { color: var(--copper-soft); }

/* same message, inline on the quote page — a hairline rule rather than a
   tinted callout box */
.lang-note {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.7;
  color: #6b655d;
}
.lang-note strong { color: var(--steel); font-weight: 500; }

/* scroll reveal */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* staggered cascade for grid items — each card trails the last by ~60ms */
.services-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.services-grid .reveal:nth-child(2) { transition-delay: 60ms; }
.services-grid .reveal:nth-child(3) { transition-delay: 120ms; }
.services-grid .reveal:nth-child(4) { transition-delay: 180ms; }
.services-grid .reveal:nth-child(5) { transition-delay: 240ms; }
.services-grid .reveal:nth-child(6) { transition-delay: 300ms; }
.services-grid .reveal:nth-child(7) { transition-delay: 360ms; }
.services-grid .reveal:nth-child(8) { transition-delay: 420ms; }
.services-grid .reveal:nth-child(9) { transition-delay: 480ms; }
.services-grid .reveal:nth-child(10) { transition-delay: 540ms; }
.services-grid .reveal:nth-child(11) { transition-delay: 600ms; }
.services-grid .reveal:nth-child(12) { transition-delay: 660ms; }

.quotes .reveal:nth-child(1) { transition-delay: 0ms; }
.quotes .reveal:nth-child(2) { transition-delay: 80ms; }
.quotes .reveal:nth-child(3) { transition-delay: 160ms; }
.quotes .reveal:nth-child(4) { transition-delay: 240ms; }

.stats-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.stats-grid .reveal:nth-child(2) { transition-delay: 70ms; }
.stats-grid .reveal:nth-child(3) { transition-delay: 140ms; }
.stats-grid .reveal:nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .services-grid .reveal, .quotes .reveal, .stats-grid .reveal { transition-delay: 0ms; }
}

/* stats strip */
.stats { background: var(--steel-deep); padding: 56px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat { color: var(--white); }
.stat-num, .stat-static {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  color: var(--copper-soft);
}
.stat-suffix { font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); color: var(--copper-soft); }
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #a89f92;
}

/* ---------- sections ---------- */
section.block { padding: 130px 0; }
section.block.alt { background: var(--white); }
.section-head { max-width: 720px; margin: 0 auto 72px; text-align: center; }
.section-head p { color: #5c5650; margin-top: 18px; font-size: 17px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.step { background: transparent; border: none; border-left: 1px solid var(--line); padding: 56px 40px; text-align: center; }
.step:last-child { border-right: 1px solid var(--line); }
.step .roman { display: block; font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--copper); letter-spacing: 0.2em; margin-bottom: 18px; }
.step h3 { font-size: 26px; margin-bottom: 14px; font-weight: 400; }
.step p { font-size: 15px; color: #5c5650; }

/* services — refined list */
.services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.service-card {
  background: var(--paper);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 30px;
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.block.alt .service-card { background: var(--white); }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(20,23,27,0.1); position: relative; z-index: 1; }
.service-card h3 { font-size: 21px; font-weight: 400; margin-bottom: 10px; }
.service-card h3::after { content: ""; display: block; width: 22px; height: 1px; background: var(--copper); margin-top: 12px; opacity: 0; transition: opacity 0.25s ease, width 0.25s ease; }
.service-card:hover h3::after { opacity: 1; width: 36px; }
.service-card p { font-size: 14.5px; color: #7a7369; }

/* about / meet the owner */
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; }
.about-photo {
  background: linear-gradient(rgba(20, 23, 27, 0.15), rgba(20, 23, 27, 0.35)), url("img/about-torriono-panel.jpg") center / cover no-repeat;
  border-radius: 0;
  border: none;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow);
}
.about-copy { color: #4a453f; margin-bottom: 18px; font-size: 16.5px; }
.about-copy strong { color: var(--steel); font-weight: 500; }
#team .cta-row { margin-top: 30px; justify-content: flex-start; }

/* gallery — draggable photo strip with a gentle auto-advance
   ------------------------------------------------------------------
   This used to be a CSS marquee: one 8,800px-wide flex track animated with
   translateX, sitting inside an overflow:hidden box with a mask-image. That
   is a layer far larger than mobile Safari will rasterise, and when the
   compositor gave up on it the whole strip vanished — leaving a blank white
   band exactly where the photos belong. A plain overflow-x scroller has no
   such limit (the browser tiles it), and it hands us drag, swipe, momentum
   and keyboard browsing for free. Auto-advance is driven from script.js. */
.work-gallery { --gap: 16px; position: relative; }
/* edge feathering as overlays rather than mask-image — mask on a scrolling
   container is the other half of what broke rendering on iOS */
.work-gallery::before,
.work-gallery::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 70px;
  z-index: 2; pointer-events: none;
}
.work-gallery::before { left: 0; background: linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0)); }
.work-gallery::after { right: 0; background: linear-gradient(270deg, var(--white), rgba(255, 255, 255, 0)); }
.work-viewport {
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
}
.work-viewport::-webkit-scrollbar { display: none; }
.work-viewport:focus-visible { outline: 2px solid var(--copper); outline-offset: 5px; }
.work-viewport.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.work-strip { display: flex; gap: var(--gap); width: max-content; padding-inline: calc(var(--gap) / 2); user-select: none; }
.work-arrow {
  position: absolute; top: 50%; z-index: 3;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 3px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font-family: inherit; font-size: 24px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(20, 23, 27, 0.14);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.work-arrow:hover { background: var(--copper); border-color: var(--copper); color: var(--white); transform: translateY(-50%) scale(1.08); }
.work-arrow:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.work-arrow-prev { left: -12px; }
.work-arrow-next { right: -12px; }
.gallery-item {
  position: relative;
  display: block;
  flex: 0 0 300px;
  padding: 0;
  border: none;
  cursor: pointer;
  overflow: hidden;
  background: var(--ink);
  border-radius: 2px;
}
.gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.5s ease, opacity 0.3s ease; }
/* the loop clones script.js appends — decorative only, never clickable */
.gallery-item[aria-hidden="true"], [aria-hidden="true"] .gallery-item { cursor: default; pointer-events: none; }
.gallery-item::after {
  content: "＋";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 22px;
  background: rgba(20, 23, 27, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery-item:hover img, .gallery-item:focus-visible img { transform: scale(1.06); }
.gallery-item:hover::after, .gallery-item:focus-visible::after { opacity: 1; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(20, 23, 27, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
}
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: min(1000px, 92vw); max-height: 86vh; object-fit: contain; box-shadow: var(--shadow); }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: var(--white);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover { border-color: var(--copper); color: var(--copper); }
.lightbox-close { top: 24px; right: 24px; width: 44px; height: 44px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.quote { background: transparent; border: none; border-top: 1px solid var(--copper); padding: 36px 8px 0; text-align: center; }
.quote .stars { color: var(--copper); margin-bottom: 18px; letter-spacing: 4px; font-size: 13px; }
.quote blockquote { font-family: var(--font-display); font-size: 21px; font-style: italic; font-weight: 400; margin-bottom: 24px; color: #2c2822; line-height: 1.5; }
.quote cite { font-style: normal; font-weight: 400; font-size: 12.5px; letter-spacing: 0.18em; text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.quote cite span { font-weight: 300; color: #8a8378; font-size: 11.5px; letter-spacing: 0.12em; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { background: transparent; border: none; border-bottom: 1px solid var(--line); margin: 0; }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 400; font-size: 22px; padding: 26px 8px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--copper); font-family: var(--font-body); font-weight: 300; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 8px 28px; color: #5c5650; font-size: 15.5px; max-width: 64ch; }

/* service area */
.areas { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; margin-top: 36px; }
.areas span { font-family: var(--font-display); font-style: italic; font-size: 19px; color: var(--steel); }
.areas span::before { content: "— "; color: var(--copper); }

/* final CTA — full-bleed photography band */
.final-cta {
  background: linear-gradient(rgba(20, 23, 27, 0.82), rgba(20, 23, 27, 0.82)), url("img/cta-panel-backdrop.jpg") center 40% / cover no-repeat;
  background-attachment: fixed;
  color: var(--white);
  text-align: center;
  padding: 150px 24px;
}
.final-cta h2 { color: var(--white); margin-bottom: 20px; }
.final-cta p { font-family: var(--font-display); font-style: italic; font-size: 20px; color: rgba(255,255,255,0.8); max-width: 54ch; margin: 0 auto 44px; }
.cta-row { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.btn-outline { border: 1px solid rgba(255,255,255,0.55); color: var(--white); text-decoration: none; padding: 18px 38px; border-radius: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; transition: border-color 0.2s, color 0.2s, box-shadow 0.25s ease; }
.btn-outline:hover { border-color: var(--copper); color: var(--copper); box-shadow: 0 0 0 4px rgba(227,30,36,0.14); }
/* same shape as .btn-outline, but dark-ink border/text for use on light (--white/--paper) backgrounds —
   the white version above is unreadable there. */
.btn-outline-dark { border: 1px solid rgba(20,23,27,0.35); color: var(--ink); text-decoration: none; padding: 18px 38px; border-radius: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 400; transition: border-color 0.2s, color 0.2s, box-shadow 0.25s ease; }
.btn-outline-dark:hover { border-color: var(--copper); color: var(--copper); box-shadow: 0 0 0 4px rgba(227,30,36,0.14); }
.btn-solid { background: var(--copper); color: var(--white); text-decoration: none; padding: 18px 40px; border-radius: 0; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; transition: background 0.2s, box-shadow 0.25s ease, transform 0.15s ease; }
.btn-solid:hover { background: #a3151a; box-shadow: 0 0 0 4px rgba(227,30,36,0.22); }
.btn-solid:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .btn-gold, .btn-solid { transition: background 0.2s; }
  .btn-gold:active, .btn-solid:active { transform: none; }
}

/* footer */
footer.site { background: var(--ink); color: #a89f92; padding: 70px 0 100px; font-size: 13.5px; letter-spacing: 0.04em; }
footer.site .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
footer.site a { color: #d9d2c6; }
.footer-logo { margin-bottom: 14px; }
.footer-logo img { height: 26px; }

/* License number reads as a credential, not body copy — slightly dimmed and
   tracked out so it scans as an official identifier. */
.footer-license { display: inline-block; margin-top: 6px; font-size: 12px; letter-spacing: 0.1em; color: #8c8378; }

/* Reconciles the 24/7 emergency claim with the listed office hours */
.footer-emergency { display: inline-block; margin-top: 8px; color: var(--copper-soft); }

/* Torriono's trademark — his actual logo, signed at the bottom of every page */
.footer-trademark {
  display: flex;
  justify-content: center;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-trademark-badge { padding: 14px 26px; }
.footer-trademark-badge img { height: 64px; width: auto; }

.footer-legal {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 22px;
  font-size: 11.5px;
  letter-spacing: 0.03em;
  color: #6e6558;
  text-align: center;
}
.footer-legal a { color: #8c8378; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: #d9d2c6; }

/* sticky mobile call bar */
.callbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: none;
  z-index: 60;
  background: var(--copper);
  color: var(--white);
  text-align: center;
  padding: 16px;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 -6px 24px rgba(20,23,27,0.35);
}

/* responsive */
@media (max-width: 900px) {
  body.nav-open { overflow: hidden; }
  /* Was pinned to 0, which parked the opaque header directly on top of the
     announcement bar — on a phone that bar, its phone number and the EN/ES
     switch were never visible at all. Sit below it instead; the .scrolled
     rule still pulls the header up to 0 as soon as you start scrolling. */
  header.site { position: fixed; top: var(--topbar-h, 37px); background: var(--ink); }
  .nav { padding: 14px 24px; }
  .wordmark { font-size: 22px; }
  .menu-toggle { display: flex; }
  .nav-links {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    width: min(78vw, 320px);
    background: var(--steel-deep);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    padding: 40px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    box-shadow: -20px 0 50px rgba(20,23,27,0.4);
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a { font-size: 14px; }
  .phone-cta { width: 100%; text-align: center; }
  .hero { min-height: 100vh; }
  .hero-inner { padding: 130px 24px 80px; }
  .scroll-cue { display: none; }
  .offer-bar { flex-direction: column; }
  .offer-bar input + input { border-left: none; border-top: 1px solid var(--line); }
  .offer-bar .btn-gold { width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  section.block { padding: 80px 0; }
  .steps { grid-template-columns: 1fr; border: none; }
  .step { border: none; border-top: 1px solid var(--line); }
  .step:last-child { border-right: none; border-bottom: 1px solid var(--line); }
  .quotes { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .gallery-item { flex-basis: 220px; }
  .gallery-item img { height: 160px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 18px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .final-cta { background-attachment: scroll; }
  .callbar { display: block; }
  footer.site { padding-bottom: 120px; }

  /* Once the columns stack, space-between has nothing to space and the three
     blocks just sit left-adrift under a page whose every other section is
     centred. Same for the About button once its two-column row collapses. */
  footer.site .wrap { justify-content: center; text-align: center; gap: 34px; }
  footer.site .wrap > div { width: 100%; }
  /* inline-flex ignores auto margins, so the badge shared a ragged line with
     the text underneath it — give it its own centred row */
  .footer-logo { display: flex; width: fit-content; margin: 0 auto 14px; }
  #team .cta-row { justify-content: center; }
  .about-grid .eyebrow, #team h2 { text-align: center; }
}

@media (max-width: 640px) {
  /* Now that the bar is actually visible on phones, its message runs to three
     lines and costs ~100px of the fold — and it only repeats what the hero
     already says (free estimates, family owned, the phone number, which also
     sits in the fixed call bar). Keep the strip for the language switch and
     drop the sentence. */
  .topbar { font-size: 10.5px; letter-spacing: 0.1em; padding: 7px 14px; gap: 5px 12px; }
  .topbar-msg { display: none; }

  /* let the photo strip run edge to edge — inside .wrap's 32px gutter a phone
     only fits one and a bit thumbnails, which reads as a cropped mistake.
     The strip's own padding keeps the first and last photo off the bezel. */
  .work-gallery { margin-inline: -32px; }
  .work-strip { padding-inline: 32px; }
  .work-gallery::before, .work-gallery::after { width: 40px; }
  /* swiping is the natural gesture here, and the arrows would sit on top of
     the photos at this width */
  .work-arrow { display: none; }
  .gallery-item { flex-basis: 240px; }
  .gallery-item img { height: 172px; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue span { animation: none; }
  .gallery-item img { transition: none; }
  /* auto-advance is skipped in script.js; the strip stays manually scrollable */
  .work-arrow { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
   QUOTE PAGE — dedicated estimate request (quote.html)
   ============================================================ */

/* The header is normally transparent over the hero photo and only turns solid
   on scroll. quote.html has no hero, so it needs to start solid or the nav
   would sit invisible on a pale background. */
header.site.is-static {
  position: sticky;
  top: 0;
  background: rgba(20, 23, 27, 0.97);
  box-shadow: 0 4px 30px rgba(20, 23, 27, 0.22);
}
header.site.is-static .nav { padding: 16px 40px; }
header.site.is-static .wordmark { font-size: 24px; }

/* ---------- full gallery page (gallery.html) ---------- */
.gallery-page { background: var(--paper); padding: 82px 0 60px; }
.gallery-hero { max-width: 720px; }
.gallery-hero h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 400; margin-bottom: 10px; }
.gallery-hero p { color: #3a3a3a; font-size: 17px; margin-bottom: 0; }
.gallery-category { padding: 46px 0 6px; }
.gallery-category h2 { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin-bottom: 4px; }
.gallery-category p { color: #8a8378; font-size: 14px; margin-bottom: 22px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.gallery-grid .gallery-item { flex: none; }
.gallery-grid .gallery-item img { height: 260px; }
.gallery-cta { text-align: center; padding: 50px 0 20px; }
.gallery-cta p { color: #3a3a3a; margin-bottom: 18px; font-size: 17px; }
@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid .gallery-item img { height: 200px; }
}
@media (max-width: 540px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gallery-grid .gallery-item img { height: 160px; }
}

/* ---------- legal pages (privacy-policy.html, terms.html) ---------- */
.legal-page { background: var(--paper); padding: 82px 0 110px; }
.legal-wrap { max-width: 760px; }
.legal-page h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 400; margin-bottom: 6px; }
.legal-updated { color: #8a8378; font-size: 13px; letter-spacing: 0.04em; margin-bottom: 40px; }
.legal-page h2 { font-family: var(--font-display); font-size: 24px; font-weight: 500; margin: 40px 0 14px; }
.legal-page p { margin-bottom: 16px; color: #3a3a3a; }
.legal-page ul { margin: 0 0 16px 20px; color: #3a3a3a; }
.legal-page li { margin-bottom: 8px; }
.legal-page a { color: var(--copper); text-decoration: underline; text-underline-offset: 2px; }

.quote-page {
  background: var(--paper);
  padding: 82px 32px 110px;
}
.quote-shell {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 68px;
  align-items: start;
}

/* ---------- left column: reassurance ---------- */
.quote-intro h1 {
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 300;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}
.quote-intro h1 em { font-style: italic; color: var(--copper); }
.quote-lede {
  font-family: var(--font-display);
  font-size: 20px;
  font-style: italic;
  line-height: 1.6;
  color: rgba(20, 23, 27, 0.72);
  max-width: 42ch;
  margin-bottom: 30px;
}
.quote-call {
  display: inline-block;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--copper);
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
.quote-call:hover { color: var(--copper); }
.quote-assure {
  list-style: none;
  margin-top: 44px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.quote-assure li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 13px;
  font-size: 15px;
  color: rgba(20, 23, 27, 0.76);
}
.quote-assure li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 1px;
  background: var(--copper);
}

/* ---------- right column: the form card ---------- */
.quote-card {
  background: var(--white);
  box-shadow: var(--shadow);
  padding: 46px 44px 40px;
}
.field { margin-bottom: 22px; }
.field label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(20, 23, 27, 0.62);
  margin-bottom: 9px;
}
.field .req { color: var(--copper); }
.field input,
.field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 11px 2px;
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 300;
  color: var(--ink);
  transition: border-color 0.2s ease;
}
.field textarea { resize: vertical; line-height: 1.6; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--copper);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(20, 23, 27, 0.34); }
.field .hint {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: rgba(20, 23, 27, 0.48);
  letter-spacing: 0.02em;
}
.field.has-error input,
.field.has-error textarea { border-bottom-color: #b3402e; }
.field .field-error {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  color: #b3402e;
}

.quote-submit {
  width: 100%;
  border: none;
  cursor: pointer;
  margin-top: 10px;
  font-family: var(--font-body);
}
.quote-privacy {
  margin-top: 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(20, 23, 27, 0.5);
  text-align: center;
}

/* ---------- success state ---------- */
.quote-success { text-align: center; padding: 12px 0 6px; }
.quote-check { color: var(--copper); display: flex; justify-content: center; margin-bottom: 18px; }
.quote-success h2 { font-size: 40px; margin-bottom: 10px; }
.quote-success > p { color: rgba(20, 23, 27, 0.7); margin-bottom: 26px; }
.quote-photo-nudge {
  background: var(--paper);
  border-left: 2px solid var(--copper);
  padding: 20px 22px;
  text-align: left;
  margin-bottom: 22px;
}
.quote-photo-nudge strong {
  display: block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 7px;
}
.quote-photo-nudge p { font-size: 15px; line-height: 1.6; color: rgba(20, 23, 27, 0.72); }
.quote-photo-nudge a { color: var(--ink); border-bottom: 1px solid var(--copper); text-decoration: none; }
.quote-urgent { font-size: 14.5px; color: rgba(20, 23, 27, 0.6); }
.quote-urgent a { color: var(--ink); border-bottom: 1px solid var(--copper); text-decoration: none; }

.quote-error {
  margin-top: 18px;
  padding: 16px 18px;
  background: #fbf0ee;
  border-left: 2px solid #b3402e;
  font-size: 14.5px;
  line-height: 1.6;
  color: #7d2c1f;
}
.quote-error a { color: #7d2c1f; font-weight: 500; }

/* ---------- hero CTA pair (index.html, replaces the inline form) ---------- */
.hero-cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 6px;
}
.hero-cta .btn-outline { border-color: rgba(255, 255, 255, 0.6); }

@media (max-width: 900px) {
  .quote-shell { grid-template-columns: 1fr; gap: 44px; }
  .quote-page { padding: 54px 22px 92px; }
  .quote-card { padding: 34px 26px 30px; }
  .quote-assure { margin-top: 32px; }
}