/* ==========================================================================
   Guerrero Construction Inc. — main.css
   Tusk Creative Studios LLC · v1

   Every value in this file resolves to a custom property declared in
   variables.css. If you need a value that isn't there, add it there first.

   CONTENTS
     1.  Fonts (self-hosted, no CDN)
     2.  Reset & base
     3.  Typography primitives
     4.  Layout primitives
     5.  Buttons
     6.  Nav & mobile panel
     7.  Hero & credential shelf
     8.  Services
     9.  Gallery & lightbox
     10. About
     11. Process (the bone band)
     12. Service area
     13. Testimonials
     14. FAQ
     15. Quote form
     16. Footer
     17. Mobile call bar
     18. Utilities (incl. the empty photo slot)
     19. Reveal motion
     20. Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. FONTS — self-hosted woff2, latin + latin-ext subsets.
      Never load these from a CDN; see TECH_STACK.md §2.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-vf-latin.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-vf-latin-ext.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

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

/* Links inside running prose have to be distinguishable from the text around
   them. Gold on ink-900 is 8.14:1. */
.t-lede a,
.faq__a a,
.about__copy a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}
.t-lede a:hover,
.faq__a a:hover,
.about__copy a:hover { color: var(--c-gold-hi); }

button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* One focus treatment, everywhere. Never remove it. */
:focus-visible {
  outline: 2px solid var(--c-gold-hi);
  outline-offset: 2px;
  border-radius: 1px;
}

/* Anchor targets clear the fixed nav. */
[id] { scroll-margin-top: var(--s-9); }

::selection { background: var(--c-gold); color: var(--on-accent); }


/* ==========================================================================
   3. TYPOGRAPHY PRIMITIVES
      Archivo carries a width axis. Display roles set it to Expanded; body
      and UI sit at the default 100%. One family does the whole system.
   ========================================================================== */

.t-display-xl,
.t-display,
.t-heading,
.t-subheading {
  font-family: var(--f-display);
  font-weight: 700;
}

.t-display-xl {
  font-size: var(--t-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--tr-display-xl);
  font-variation-settings: "wdth" var(--wdth-display);
  text-transform: uppercase;
}

.t-display {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  font-variation-settings: "wdth" var(--wdth-display);
  text-transform: uppercase;
}

.t-heading {
  font-size: var(--t-heading);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  font-variation-settings: "wdth" var(--wdth-heading);
  text-transform: uppercase;
}

.t-subheading {
  font-size: var(--t-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--tr-subheading);
  font-weight: 600;
  font-variation-settings: "wdth" var(--wdth-heading);
}

.t-lede {
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  color: var(--fg-muted);
  max-width: var(--measure);
}

.t-body-sm { font-size: var(--t-body-sm); line-height: 1.6; }
.t-caption { font-size: var(--t-caption); line-height: 1.5; letter-spacing: 0.02em; font-weight: 500; }

/* The only uppercase treatment on this site. Buttons, credential shelf,
   form labels. It is NOT an eyebrow and never sits above a headline. */
.t-label {
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
}

.measure { max-width: var(--measure); }


/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--s-section); }

/* A narrow measure that keeps the page's left rail, as opposed to
   .container-narrow, which centres. Used by the FAQ. */
.narrow { max-width: var(--container-narrow); }

.section--bone { background: var(--surface-3); }

.section--ink800 { background: var(--surface-2); }

/* Section head: headline, then a gold rule beneath it. That rule is the
   section marker. It replaces the eyebrow, which does not exist here. */
.section-head { margin-bottom: var(--s-7); }

.section-head__rule {
  width: 56px;
  height: 2px;
  background: var(--c-gold);
  /* <hr> defaults to auto side margins, which centres it. Pin it to the rail. */
  margin: var(--s-5) 0 0;
  border: 0;
}

.section-head .t-lede { margin-top: var(--s-5); }


.band-dark { background: var(--surface); color: var(--fg); }

.rule-hairline { height: 1px; background: var(--line); border: 0; margin: 0; }


/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--s-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.btn--primary { background: var(--c-gold); color: var(--on-accent); }
.btn--primary:hover { background: var(--c-gold-hi); }
.btn--primary:active { background: var(--c-gold-press); }

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--fg);
}
.btn--ghost:hover { border-color: var(--c-gold); }

.btn--inverted { background: var(--fg); color: var(--surface); }
.btn--inverted:hover { background: var(--surface-3); }

.btn--block { width: 100%; }


/* ==========================================================================
   6. NAV & MOBILE PANEL
      Transparent over the hero with a top-down scrim for legibility;
      solidifies past 80px of scroll. See PAGE_ARCHITECTURE.md §3.
   ========================================================================== */

/* Utility bar sits above the nav and scrolls away with the page. */
/* The header sticks with a negative offset: the utility bar scrolls out of
   view and the nav pins itself to the top. No JS, no layout compensation. */
.header {
  position: sticky;
  top: calc(var(--util-h) * -1);
  z-index: 100;
}

.utility {
  height: var(--util-h);
  background: var(--c-ink-900);
  color: var(--c-text-muted);
  --fg: var(--c-text);
  --fg-muted: var(--c-text-muted);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 101;
}

.utility__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-6);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.utility__phone { color: var(--c-text); }
.utility__phone:hover { color: var(--c-gold-hi); }

.nav {
  position: relative;
  z-index: 100;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color var(--dur-mid) var(--ease),
              border-color var(--dur-mid) var(--ease);
}

/* The nav sits on its own solid surface now rather than floating over the
   hero photograph, so the old top-down scrim and the scrolled/transparent
   swap are both gone. It only gains a shadow once it pins. */
.nav.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(10, 11, 13, 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: 1;
}

/* --- logo lockup --------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-right: auto;
}

.logo__mark { height: 40px; width: auto; }

.logo__type { display: flex; flex-direction: column; gap: 3px; }

.logo__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fg);
  font-variation-settings: "wdth" var(--wdth-sub);
}

.logo__sub {
  font-size: 0.5625rem;
  line-height: 1;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* --- desktop links ------------------------------------------------------- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.nav__link {
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg);
  padding-block: var(--s-4);
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: var(--s-5); }

.nav__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease);
}
.nav__phone:hover { color: var(--c-gold-hi); }
.nav__phone-short { display: none; }

.nav .btn { min-height: 44px; }

/* --- hamburger ----------------------------------------------------------- */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.nav__toggle-bars { display: block; width: 22px; height: 12px; position: relative; }

.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--fg);
  transition: transform var(--dur-mid) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle-bars::before { top: 0; }
.nav__toggle-bars::after  { bottom: 0; }

.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* --- full-screen mobile panel -------------------------------------------- */
.nav-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  padding: var(--nav-h-mobile) var(--gutter) var(--s-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease);
}

/* Deliberately no visibility transition. visibility is a discrete property, and
   the global reduced-motion rule in variables.css forces every transition to
   0.01ms, which left the panel computed-hidden — and so unfocusable — at the
   moment JS moved focus into it. The `inert` attribute keeps the closed panel
   out of the tab order and the accessibility tree instead. */
.nav-panel.is-open { opacity: 1; pointer-events: auto; }

.nav-panel__close {
  position: absolute;
  top: calc((var(--nav-h-mobile) - 44px) / 2);
  right: calc(var(--gutter) - 11px);
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg);
}
.nav-panel__close::before,
.nav-panel__close::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 21px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
}
.nav-panel__close::before { transform: rotate(45deg); }
.nav-panel__close::after  { transform: rotate(-45deg); }

.nav-panel__links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-8);
}

.nav-panel__link {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--tr-subheading);
  font-variation-settings: "wdth" var(--wdth-sub);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}

.nav-panel__foot { margin-top: auto; display: grid; gap: var(--s-4); }

.nav-panel__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-subheading);
  color: var(--accent-text);
  font-variation-settings: "wdth" var(--wdth-sub);
}

body.is-locked { overflow: hidden; }


/* Pages with no hero (contact, thank-you, 404) must clear the fixed nav. */
.page--plain main { padding-top: var(--s-8); }

/* Contact's only section is a dark band, so the page's bone top padding reads
   as a stray strip under the nav. Let the band meet the nav instead. */
.page--plain main.main--flush { padding-top: 0; }
@media (max-width: 767px) {
  .page--plain main { padding-top: var(--s-7); }
}

/* ==========================================================================
   7. HERO & CREDENTIAL SHELF
      Full-bleed photograph with the credential shelf slammed flush underneath.
      The scrim is weighted to the LEFT, not the bottom: the copy column sits on
      real darkness while the right of the frame stays legible photograph. A
      bottom-weighted scrim would have to darken the whole picture to carry the
      headline, which is what made earlier passes read as murky.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 640px;
  height: 82vh;
  max-height: 860px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--c-ink-900);
}

.hero__bg { position: absolute; inset: 0; }
.hero__bg picture { display: block; height: 100%; }

.hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* the copy column */
    linear-gradient(
      to right,
      rgba(10, 11, 13, 0.92) 0%,
      rgba(10, 11, 13, 0.90) 28%,
      rgba(10, 11, 13, 0.78) 46%,
      rgba(10, 11, 13, 0.34) 62%,
      rgba(10, 11, 13, 0.06) 76%,
      transparent 88%
    ),
    /* just enough at the base to meet the shelf without a seam */
    linear-gradient(
      to top,
      rgba(10, 11, 13, 0.72) 0%,
      rgba(10, 11, 13, 0.18) 14%,
      transparent 30%
    );
}

.hero__inner { position: relative; z-index: 2; width: 100%; }

/* `ch` is measured on the lowercase "0" and badly understates condensed caps,
   so this is capped in px as well to keep the column inside the dark zone. */
.hero__copy { max-width: min(64ch, 600px); }

.hero__headline {
  color: var(--c-text);
  margin-bottom: var(--s-6);
  text-wrap: balance;
}

/* The two counties are the whole proposition, so they carry the accent. */
.hero__headline em { font-style: normal; color: var(--c-gold); }

.hero__sub {
  color: var(--c-text-muted);
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  margin-bottom: var(--s-7);
  max-width: 42ch;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* --- floating credential chips (used on interior pages) ------------------ */

.chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.chip__label {
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.chip__value {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-subheading);
  line-height: 1.1;
  font-variation-settings: "wdth" var(--wdth-sub);
  color: var(--fg);
}

.shelf {
  background: var(--surface-2);
  border-radius: var(--r-none);
  padding-block: var(--s-7);
  /* Flush against the hero. Do not add margin here. */
  margin: 0;
}

.shelf__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.shelf__item {
  padding-inline: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
}
.shelf__item:first-child { padding-left: 0; }
.shelf__item:last-child  { padding-right: 0; }

.shelf__item + .shelf__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 32px;
  background: var(--c-gold);
  opacity: 0.5;
}

.shelf__value {
  color: var(--accent-text);
  font-size: var(--t-label);
  line-height: 1.2;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
}

.shelf__label {
  color: var(--fg);
  font-size: var(--t-label);
  line-height: 1.4;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
}


/* ==========================================================================
   8. SERVICES
      A single feature row: photograph against a dark panel carrying the whole
      service list. Replaces five photo cards, three of which were illustrated
      with stand-in photographs that did not show the service they sold.
   ========================================================================== */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: stretch;
}

.feature__media { position: relative; min-height: 100%; }

.feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature__panel {
  padding: var(--s-8) var(--s-8) var(--s-8);
  background: var(--surface);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature__rule {
  width: 56px;
  height: 2px;
  background: var(--accent-graphic);
  border: 0;
  margin: 0 0 var(--s-5);
}

.feature__lede {
  color: var(--fg-muted);
  font-size: var(--t-lede);
  line-height: var(--lh-lede);
  margin: var(--s-5) 0 var(--s-7);
  max-width: 50ch;
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--s-7);
}

.svc { border-top: 1px solid var(--line); padding-top: var(--s-4); }

.svc__term {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-subheading);
  line-height: 1.2;
  letter-spacing: var(--tr-subheading);
  font-variation-settings: "wdth" var(--wdth-sub);
  color: var(--fg);
  margin: 0 0 var(--s-2);
}

.svc__desc { color: var(--fg-muted); font-size: var(--t-body-sm); margin: 0; }

/* ==========================================================================
   9. WORK SLIDER
      Native scroll-snap, so it works with no JS at all: the viewport is
      keyboard-scrollable and touch-swipeable on its own. The arrow buttons are
      an enhancement that page it by one viewport width.
   ========================================================================== */

.feature__media picture { display: block; height: 100%; }

.section-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
}

.section-head__row .t-lede { margin: 0; }

.slider__nav { display: flex; gap: var(--s-3); flex: none; }

.slider__btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.slider__btn:hover { border-color: var(--accent-graphic); }
.slider__btn[disabled] { opacity: 0.35; cursor: default; }
.slider__btn[disabled]:hover { border-color: var(--line); }

.slider { margin-top: var(--s-7); }

.slider__viewport {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}

.slider__viewport::-webkit-scrollbar { display: none; }

.slide {
  flex: 0 0 calc((100% - var(--s-5) * 2) / 3);
  margin: 0;
  scroll-snap-align: start;
}

.slide__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--r-md);
  overflow: hidden;
}

.slide__btn img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-mid) var(--ease);
}

.slide__btn:hover img { transform: scale(1.03); }

/* ==========================================================================
   9b. LIGHTBOX
       Always a dark overlay, whatever the page theme, so it declares the ink
       token set for itself. Restored after the v5 slider rewrite overwrote the
       old "GALLERY & LIGHTBOX" block and left these buttons rendering loose in
       the document flow at the foot of the page.
   ========================================================================== */

.lightbox {
  /* always a dark overlay, so it pins the ink token set for its children */
  --fg: var(--c-text);
  --fg-muted: var(--c-text-muted);
  --line: var(--c-line-dark);
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(10, 11, 13, 0.96);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: center;
  padding: var(--s-8) calc(var(--gutter) + 64px) var(--s-6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease);
}

.lightbox:not(.is-open) { visibility: hidden; }
.lightbox.is-open { opacity: 1; pointer-events: auto; visibility: visible; }

.lightbox__figure {
  margin: 0;
  /* Stretching to the row gives the figure a definite height, which is what
     max-height: 100% on the image needs to resolve against. */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox__caption {
  margin-top: var(--s-5);
  color: var(--fg-muted);
  font-size: var(--t-caption);
  letter-spacing: 0.02em;
  text-align: center;
  min-height: 1.2em;
}

.lightbox__btn {
  position: absolute;
  width: 48px;
  height: 48px;
  background: rgba(245, 242, 236, 0.06);
  border: 1px solid rgba(245, 242, 236, 0.28);
  border-radius: var(--r-md);
  color: var(--fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { border-color: var(--c-gold); }

.lightbox__close { top: var(--s-5); right: var(--gutter); }
.lightbox__prev  { left: var(--gutter);  top: 50%; transform: translateY(-50%); }
.lightbox__next  { right: var(--gutter); top: 50%; transform: translateY(-50%); }

/* Chevrons and the close cross are drawn in CSS — this site ships no icon set. */
.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 1.5px;
  background: currentColor;
}
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after  { transform: rotate(-45deg); }

.lightbox__prev::before,
.lightbox__next::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}
.lightbox__prev::before { transform: rotate(45deg)  translate(2px, -2px); }
.lightbox__next::before { transform: rotate(-135deg) translate(2px, -2px); }


/* ==========================================================================
   10. ABOUT
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-9);
  align-items: start;
}

.about__copy p + p { margin-top: var(--s-5); }
.about__copy p { color: var(--fg-muted); max-width: var(--measure); }


/* Proof points: a bordered list, not cards. */
.proof {
  padding: var(--s-6) var(--s-7);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.proof li + li {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}

.proof__term {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-subheading);
  line-height: 1.2;
  letter-spacing: var(--tr-subheading);
  font-variation-settings: "wdth" var(--wdth-sub);
  color: var(--fg);
  margin-bottom: var(--s-2);
}

.proof__desc {
  display: block;
  color: var(--fg-muted);
  font-size: var(--t-body-sm);
}

.proof__link {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--accent-text);
  border-bottom: 1px solid transparent;
}

.proof__link:hover { color: var(--c-gold-hi); border-bottom-color: currentColor; }


/* ==========================================================================
   11. PROCESS — the one bone-light band on the site.
       Gold is permitted here for graphic elements only; gold TEXT uses
       --accent-text, which resolves per band. DESIGN_SYSTEM.md §1.
   ========================================================================== */

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-6);
}

.step__num {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-display);
  line-height: 1;
  letter-spacing: var(--tr-display);
  font-variation-settings: "wdth" var(--wdth-display);
  color: var(--accent-text);
  display: block;
}

.step__rule {
  width: 40px;
  height: 2px;
  background: var(--c-gold);
  border: 0;
  margin: var(--s-4) 0 var(--s-5);
}

.step__name { color: var(--fg); }

.step__text {
  margin-top: var(--s-3);
  color: var(--fg-muted);
  font-size: var(--t-body);
  line-height: var(--lh-body);
}


/* ==========================================================================
   13. TESTIMONIALS — built and styled, hidden until real quotes exist.
       Do not un-hide with example content. COPY_GUIDE.md §3 Section 8.
   ========================================================================== */

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}

.quote {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.quote__text { color: var(--fg); }

.quote__attrib {
  color: var(--fg-muted);
  font-size: var(--t-caption);
  letter-spacing: 0.02em;
  font-weight: 500;
  margin-top: auto;
}


/* ==========================================================================
   14. FAQ — native <details>. No JavaScript.
   ========================================================================== */

.faq__list { border-top: 1px solid var(--line); }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__q {
  list-style: none;
  cursor: pointer;
  padding-block: var(--s-5);
  padding-right: var(--s-7);
  position: relative;
  color: var(--fg);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-subheading);
  line-height: var(--lh-subheading);
  letter-spacing: var(--tr-subheading);
  font-variation-settings: "wdth" var(--wdth-sub);
  transition: color var(--dur-fast) var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--c-gold-hi); }

/* A gold plus that rotates 45° into a cross when the item opens. */
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 50%;
  background: var(--c-gold);
  transition: transform 200ms var(--ease);
}
.faq__q::before { width: 16px; height: 2px; margin-top: -1px; }
.faq__q::after  { width: 2px; height: 16px; margin-top: -8px; margin-right: 7px; }

.faq__item[open] .faq__q::before { transform: rotate(45deg); }
.faq__item[open] .faq__q::after  { transform: rotate(45deg); }

.faq__a {
  padding-bottom: var(--s-5);
  color: var(--fg-muted);
  max-width: var(--measure);
}


/* ==========================================================================
   15. QUOTE FORM
   ========================================================================== */

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

.field { display: grid; gap: var(--s-2); }
.field--full { grid-column: 1 / -1; }

.field__label {
  color: var(--fg-muted);
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
}

.field__input,
.field__textarea {
  width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--t-body);
  padding: 0 var(--s-4);
  height: 52px;
  transition: border-color var(--dur-fast) var(--ease);
}

.field__textarea {
  height: 160px;
  padding: var(--s-4);
  line-height: var(--lh-body);
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder { color: var(--fg-muted); opacity: 0.7; }

.field__input:focus,
.field__textarea:focus { border-color: var(--c-gold); }

/* Errors carry no second hue — a gold rule and plain text. DESIGN_SYSTEM.md §1. */
.field.has-error .field__input,
.field.has-error .field__textarea { border-color: var(--c-gold); }

.field__error {
  color: var(--fg);
  font-size: var(--t-caption);
  letter-spacing: 0.02em;
  border-left: 2px solid var(--c-gold);
  padding-left: var(--s-3);
}
.field:not(.has-error) .field__error { display: none; }

.form__foot {
  margin-top: var(--s-6);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
}

.form__micro { color: var(--fg-muted); font-size: var(--t-body-sm); }

.form__status {
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-2);
  border-left: 2px solid var(--c-gold);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--t-body-sm);
}
.form__status[hidden] { display: none; }

/* Honeypot. Off-screen rather than display:none so bots still fill it. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


/* ==========================================================================
   16. FOOTER
   ========================================================================== */

.footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: var(--s-9) var(--s-7);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--s-8);
}

.footer__logo { margin-bottom: var(--s-5); }
.footer__logo .logo__mark { height: 56px; }
.footer__logo .logo__name { font-size: var(--t-subheading); }

.footer__lines { color: var(--fg-muted); font-size: var(--t-body-sm); }
.footer__lines li + li { margin-top: var(--s-2); }
.footer__lines li:has(a) + li:has(a) { margin-top: 0; }
.footer__lines strong { color: var(--fg); font-weight: 600; }

.footer__head {
  color: var(--fg);
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}

/* Footer links are a primary place people go looking for the phone number, so
   they get a real hit area rather than a 16px line box. */
.footer__links a,
.footer__lines a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: color var(--dur-fast) var(--ease);
}
.footer__links a:hover,
.footer__lines a:hover { color: var(--c-gold-hi); }

.footer__links li + li { margin-top: 0; }
.footer__links { color: var(--fg-muted); font-size: var(--t-body-sm); }

.footer__phone {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-subheading);
  font-variation-settings: "wdth" var(--wdth-sub);
  color: var(--accent-text);
}

.footer__bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--fg-muted);
  font-size: var(--t-caption);
  letter-spacing: 0.02em;
}


/* ==========================================================================
   17. MOBILE CALL BAR — fixed under 768px. Contractual. It ships.
   ========================================================================== */

.callbar {
  display: none;
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: var(--s-4);
  z-index: 150;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  background: var(--c-gold);
  color: var(--on-accent);
  border-radius: var(--r-pill);
  font-size: var(--t-label);
  line-height: 1;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: none;
}
.callbar:active { background: var(--c-gold-press); }


/* ==========================================================================
   18. UTILITIES
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 400;
  transform: translateY(-200%);
  background: var(--c-gold);
  color: var(--on-accent);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* --- the labelled empty photo slot ---------------------------------------
   Used wherever a required client photograph has not been supplied.
   Never substitute stock, a gradient, an icon, or a generated image.
   PAGE_ARCHITECTURE.md §4.
   -------------------------------------------------------------------------- */
.empty-slot {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-none);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-5);
  color: var(--fg-muted);
  font-size: var(--t-label);
  line-height: 1.6;
  letter-spacing: var(--tr-label);
  font-weight: 600;
  text-transform: uppercase;
}

.card__media .empty-slot { width: 100%; height: 100%; border: 0; }


/* ==========================================================================
   19. REVEAL MOTION
       One 16px translate plus fade, fired once. No stagger, no chain.
       Never applied to hero copy — that must be readable at first paint.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* Without the .js class — scripting off, or reveal.js failed to load — the
   .reveal rule above never applies and every section renders normally. */


/* ==========================================================================
   20. RESPONSIVE
       Breakpoints: 390 · 768 · 1024 · 1280 · 1920
   ========================================================================== */

/* --- 1024 and below ------------------------------------------------------ */
@media (max-width: 1023px) {
  .shelf { padding-block: var(--s-6); }
  .shelf__grid { grid-template-columns: repeat(2, 1fr); }

  /* The vertical gold rules become a hairline cross. */
  .shelf__item {
    padding: var(--s-5) var(--s-4);
  }
  .shelf__item:first-child,
  .shelf__item:last-child { padding-inline: var(--s-4); }
  .shelf__item + .shelf__item::before { display: none; }
  .shelf__item:nth-child(odd)  { border-right: 1px solid var(--line); }
  .shelf__item:nth-child(1),
  .shelf__item:nth-child(2)    { border-bottom: 1px solid var(--line); }

  .nav__links,
  .nav__actions .btn { display: none; }
  .nav__toggle       { display: flex; }
  .nav__actions      { gap: var(--s-4); }

  .slide             { flex-basis: calc((100% - var(--s-5)) / 2); }
  .feature           { grid-template-columns: 1fr; }
  .feature__media img { aspect-ratio: 4 / 3; }
  .process__grid     { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-8); }
  .about__grid       { grid-template-columns: 1fr; gap: var(--s-8); }
  .testimonials__grid{ grid-template-columns: 1fr; }
  .tile              { grid-column: span 4; }
  .footer__grid      { grid-template-columns: 1fr 1fr; }
}

/* --- below 768: single column, overlay nav, call bar --------------------- */
@media (max-width: 767px) {
  .utility { display: none; }
  .header { top: 0; }
  .nav { height: var(--nav-h-mobile); }

  .nav__links,
  .nav__actions .btn { display: none; }

  .nav__toggle { display: flex; }
  .nav__actions { gap: var(--s-4); }

  .logo__mark { height: 32px; }
  .logo__name { font-size: 0.9375rem; }

  .nav__phone-full  { display: none; }
  .nav__phone-short { display: inline; }

  /* Height grows with the copy so a long headline can never slide under the
     nav on a short device. 78svh is the floor, not a ceiling. */
  .hero       { height: auto; min-height: 78svh; padding: var(--s-8) 0 var(--s-8); }

  /* One column: two columns here breaks each service onto one or two words. */
  .svc-grid       { grid-template-columns: 1fr; gap: var(--s-5); }
  .feature__panel { padding: var(--s-7) var(--s-6); }
  .hero__copy { max-width: none; }
  /* the copy fills a phone frame, so the scrim has to work top-to-bottom */
  .hero__scrim {
    background: linear-gradient(
      to top,
      rgba(10, 11, 13, 0.94) 0%,
      rgba(10, 11, 13, 0.88) 45%,
      rgba(10, 11, 13, 0.72) 72%,
      rgba(10, 11, 13, 0.46) 100%
    );
  }
  .hero__headline { max-width: 16ch; }
  .hero__actions { margin-top: var(--s-6); }
  .hero__actions .btn { flex: 1 1 100%; }

  .services__grid { grid-template-columns: 1fr; gap: var(--s-5); }

  /* one slide at a time on a phone, with a peek of the next */
  .slide             { flex-basis: 86%; }
  .section-head__row { flex-direction: column; align-items: flex-start; gap: var(--s-5); }

  .process__grid { grid-template-columns: 1fr; gap: 0; }
  .step { padding-block: var(--s-6); border-bottom: 1px solid var(--c-line-light); }
  .step:last-child { border-bottom: 0; padding-bottom: 0; }
  .step:first-child { padding-top: 0; }

  .form__grid { grid-template-columns: 1fr; }
  .form__foot .btn { width: 100%; }

  .footer { padding-bottom: var(--s-8); }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-7); }

  .btn { min-height: 48px; }

  /* The call bar and the body padding that keeps it off the footer. */
  .callbar { display: flex; }
  body { padding-bottom: calc(48px + var(--s-4) + var(--s-4)); }

  /* The lightbox puts its prev/next in the bottom corners for thumb reach,
     which is exactly where the fixed call bar sits. Both the lightbox and the
     nav panel set body.is-locked, so this covers both. */
  /* These two are real tap targets — a CSLB lookup and a phone number — so
     they get a 44px touch area without changing how they look. */
  .proof__link {
    padding-block: var(--s-3);
    margin-block: calc(var(--s-3) * -1);
  }
  .logo { padding-block: var(--s-2); }

  body.is-locked .callbar { display: none; }

  .lightbox { padding: var(--s-8) var(--s-4) calc(var(--s-7) + var(--s-6)); }
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--s-4); transform: none; }
  .lightbox__prev { left: var(--s-4); }
  .lightbox__next { right: var(--s-4); }
}

/* --- narrow phones ------------------------------------------------------- */
@media (max-width: 419px) {
  /* Two columns at this width forces "Licensed general contractor" onto three
     lines. One column fits every item on two lines and reads shorter overall. */
  .shelf__grid { grid-template-columns: 1fr; }
  .shelf__item { padding: var(--s-4) 0; border-right: 0 !important; }
  /* the tablet rule targets :first-child/:last-child, which outranks the line
     above on specificity — reset it at the same weight */
  .shelf__item:first-child,
  .shelf__item:last-child { padding-inline: 0; }
  .shelf__item + .shelf__item { border-top: 1px solid var(--line); }
  .shelf__item:nth-child(1),
  .shelf__item:nth-child(2) { border-bottom: 0; }
}

/* --- very wide ----------------------------------------------------------- */
@media (min-width: 1920px) {
  .hero { max-height: 900px; }
}


/* ==========================================================================
   21. REDUCED MOTION
       variables.css already zeroes the duration tokens and forces
       scroll-behavior: auto. These rules remove the transforms themselves
       so nothing is left mid-animation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .hero__img { transform: none !important; }
  .slide__btn:hover img,
  .feature__media img { transform: none !important; }
  /* the slider still pages, it just jumps instead of gliding */
  .slider__viewport { scroll-behavior: auto !important; }
}