/* =====================================================================
   MONROY CONCRETE — STYLESHEET
   ---------------------------------------------------------------------
   Design tokens, reset, header (utility bar + main nav), and the home
   hero. Build out remaining sections as the rest of the page is added.
   ===================================================================== */


/* =========================================================
   FONTS — Aspekta (self-hosted, OFL 1.1, github.com/ivodolenc/aspekta)
   License copy: public/fonts/Aspekta-LICENSE.txt
   ========================================================= */
@font-face {
  font-family: "Aspekta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Aspekta-400.woff2") format("woff2");
}
@font-face {
  font-family: "Aspekta";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/Aspekta-500.woff2") format("woff2");
}
@font-face {
  font-family: "Aspekta";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Aspekta-600.woff2") format("woff2");
}
@font-face {
  font-family: "Aspekta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Aspekta-700.woff2") format("woff2");
}
@font-face {
  font-family: "Aspekta";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Aspekta-800.woff2") format("woff2");
}


/* =========================================================
   TOKENS — design system variables
   Colors extracted from client-input/logos/Logo.png.
   ========================================================= */
:root{
  /* Surfaces */
  --bg: #FFFFFF;
  --surface: #F4F5F5;

  /* Brand (from logo: deep teal for AA-safe text/buttons on white,
     vivid teal reserved for accents on dark surfaces) */
  --brand-primary: #075C6B;
  --brand-accent: #00D6E7;
  --brand-ink-dark: #0C0E0F;

  /* Text */
  --ink: #15181A;
  --ink-soft: #5A6063;

  /* Lines */
  --rule: rgba(0,0,0,.10);
  --rule-strong: rgba(0,0,0,.18);

  /* Type stacks */
  --display: "Aspekta", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --sans: "Aspekta", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1440px;
  --gut: clamp(20px, 4vw, 56px);
}


/* =========================================================
   RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Reserves the header's expanded height, because .site-header is fixed and
     occupies no space of its own. Must stay a CONSTANT (never shrink it to
     match the scrolled header) — a changing value would reintroduce exactly
     the document reflow that taking the header out of flow was meant to
     eliminate. Once scrolled, content simply passes under the header, so the
     shorter header reveals more of the page with no layout change at all.
     36px utility bar + 112px nav + 1px border. */
  padding-top: 149px;
}
/* The utility bar is display:none below 900px, so the reserved height drops
   by its 36px. Keep in sync with the .util-bar display rule. */
@media (max-width: 899px) {
  body { padding-top: 113px; }
}
/* Anchor targets must clear the fixed header rather than hide beneath it. */
html { scroll-padding-top: 160px; }
@media (max-width: 899px) {
  html { scroll-padding-top: 124px; }
}
img, picture, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
a { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--brand-accent); }
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 600; margin: 0; }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background-color .2s ease, color .2s ease;
}
.btn-primary { background: var(--brand-primary); color: #fff; }
.btn-primary:hover { background: #05505D; color: #fff; }
.btn-light { background: #fff; color: var(--brand-primary); }
.btn-light:hover { background: var(--brand-primary); color: #fff; }
.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--brand-primary); border-color: #fff; }


/* =========================================================
   HEADER — utility bar + main nav
   ========================================================= */
/* The header is position:fixed, NOT sticky, and this is load-bearing.
   A sticky header stays in normal flow and occupies space, so animating its
   height reflows the whole document every frame and the browser's scroll
   anchoring fights the animation — the page content shimmers and the scroll
   threshold flaps on and off. Taking the header out of flow makes its height
   purely visual: nothing below it reflows, so the resize can be transitioned
   freely. Body reserves the expanded height (see the body padding-top rule),
   which is what keeps content from starting underneath it at scroll 0. */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; }

.util-bar { background: var(--brand-primary); overflow: hidden; }
.util-bar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 36px;
  transition: height .3s ease;
}
/* Collapses instead of scrolling away, now that the header no longer moves
   with the page. Free to animate — it changes nothing in document flow. */
.site-header.is-scrolled .util-bar-inner { height: 0; }
.util-links {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}
.util-links li { position: relative; padding-inline: 14px; }
.util-links li + li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 12px;
  background: rgba(255,255,255,.35);
}

.nav-main { position: relative; background: #fff; border-bottom: 1px solid var(--rule); }

/* Safe to transition only because .site-header is out of flow — see the note
   there. If the header is ever put back into flow, these transitions must go
   with it or the scroll-shimmer returns. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 112px;
  transition: min-height .3s ease;
}
.site-header.is-scrolled .nav-inner { min-height: 78px; }

.brand { display: inline-flex; align-items: center; }
.brand-mark { height: 78px; width: auto; transition: height .3s ease; }
.site-header.is-scrolled .brand-mark { height: 54px; }

@media (prefers-reduced-motion: reduce) {
  .nav-inner, .brand-mark, .util-bar-inner { transition: none; }
}

.menu-btn { display: none; background: none; border: 0; padding: 8px; }
.menu-icon { position: relative; display: block; width: 22px; height: 2px; background: var(--ink); }
.menu-icon::before, .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px; height: 2px;
  background: var(--ink);
  transition: transform .2s ease, top .2s ease;
}
.menu-icon::before { top: -7px; }
.menu-icon::after { top: 7px; }
.menu-btn[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }

.nav { display: flex; align-items: center; gap: 32px; }
.nav-links { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
.nav-links a {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--brand-primary); }

@media (max-width: 899px) {
  .site-header { top: 0; }
  .util-bar { display: none; }
  .menu-btn { display: inline-flex; }

  .nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-top: 1px solid var(--rule);
    box-shadow: 0 16px 28px rgba(0,0,0,.10);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s ease, opacity .2s ease;
  }
  .nav[data-open="true"] { max-height: 480px; opacity: 1; pointer-events: auto; }
  .nav-links { flex-direction: column; gap: 0; width: 100%; padding: 8px 0; }
  .nav-links li { border-bottom: 1px solid var(--rule); }
  .nav-links a { display: block; padding: 14px var(--gut); }
  .nav-cta { margin: 16px var(--gut) 20px; }
}


/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  min-height: max(560px, 86vh);
  overflow: hidden;
  color: #fff;
  background: var(--brand-ink-dark);
}

.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; max-width: none; height: 100%; width: 100%; opacity: 0; will-change: opacity, transform; }
.hero-slide img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }

.hero-slide:nth-of-type(1) { animation: heroSlide1 24s ease-in-out infinite; }
.hero-slide:nth-of-type(2) { animation: heroSlide2 24s ease-in-out infinite; animation-delay: 6s; }
.hero-slide:nth-of-type(3) { animation: heroSlide3 24s ease-in-out infinite; animation-delay: 12s; }
.hero-slide:nth-of-type(4) { animation: heroSlide4 24s ease-in-out infinite; animation-delay: 18s; }

@keyframes heroSlide1 {
  0%   { opacity: 1; transform: scale(1) translate3d(0,0,0); }
  30%  { opacity: 1; transform: scale(1.07) translate3d(-1%, -0.75%, 0); }
  36%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1) translate3d(0,0,0); }
}
@keyframes heroSlide2 {
  0%   { opacity: 0; transform: scale(1) translate3d(0,0,0); }
  4%   { opacity: 1; }
  30%  { opacity: 1; transform: scale(1.07) translate3d(1%, 0.5%, 0); }
  36%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1) translate3d(0,0,0); }
}
@keyframes heroSlide3 {
  0%   { opacity: 0; transform: scale(1) translate3d(0,0,0); }
  4%   { opacity: 1; }
  30%  { opacity: 1; transform: scale(1.07) translate3d(-0.5%, 0.75%, 0); }
  36%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1) translate3d(0,0,0); }
}
@keyframes heroSlide4 {
  0%   { opacity: 0; transform: scale(1) translate3d(0,0,0); }
  4%   { opacity: 1; }
  30%  { opacity: 1; transform: scale(1.07) translate3d(1%, -0.5%, 0); }
  36%  { opacity: 0; }
  100% { opacity: 0; transform: scale(1) translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:nth-of-type(1) { opacity: 1; }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,.80) 62%,
    rgba(0,0,0,1) 100%);
}

.hero > .wrap { position: relative; z-index: 1; width: 100%; }
.hero-inner {
  max-width: 720px;
  padding-block: clamp(32px, 7vw, 72px);
}
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(17px, 1.8vw, 22px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  margin: 0 0 8px;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 6.5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  margin: 0 0 18px;
}
.hero-lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 16px);
  line-height: 1.55;
  color: rgba(255,255,255,.82);
  margin: 0 0 28px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-ctas .btn { width: 190px; }

@media (min-width: 900px) {
  .hero-inner { max-width: 880px; }
}

@media (max-width: 640px) {
  .hero { min-height: max(520px, 72vh); }
  .hero h1 { white-space: normal; font-size: clamp(34px, 11.5vw, 60px); }
  .hero-title-word { display: block; }
  .hero-ctas { flex-wrap: nowrap; }
  .hero-ctas .btn { width: auto; flex: 1 1 0; padding-inline: 12px; }
}


/* =========================================================
   TRACK RECORD — trust stats band
   ========================================================= */
.track-record {
  position: relative;
  background: #000000;
  color: #fff;
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(48px, 7vw, 72px);
}
.track-record::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleY(.5);
  transform-origin: top;
  width: 90%;
  height: 1px;
  background: rgba(0, 214, 231, .35);
}

.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: clamp(32px, 6vw, 64px);
  text-align: center;
  max-width: 1040px;
  margin-inline: auto;
}
.stat { flex: 1 1 200px; max-width: 280px; }
.stat-icon { color: var(--brand-accent); margin: 0 auto 14px; }

@media (max-width: 640px) {
  .stats-row { flex-direction: column; align-items: center; gap: 32px; }
}
.stat-label {
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 600;
  font-size: 34px;
  line-height: 37px;
  color: rgb(255, 255, 255);
  margin: 0 0 8px;
}
.stat-caption {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0;
}

/* Optional heading above the stats row (used when the band showcases
   core values rather than plain trust badges). Reuses .services-head /
   .eyebrow-alt / .head-rule, recolored for the black background. */
.track-record .services-head { margin: 0 auto clamp(28px, 4vw, 40px); }
.track-record .eyebrow-alt { color: var(--brand-accent); }
.track-record h2 { color: #fff; }
.track-record .head-rule { background: var(--brand-accent); }


/* =========================================================
   SERVICES — concrete services grid
   ========================================================= */
.services {
  background: var(--bg);
  padding-block: clamp(64px, 9vw, 120px);
}
.services-head {
  text-align: center;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.eyebrow-alt {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  color: var(--brand-primary);
  margin: 0 0 8px;
}
.services-head h2 {
  display: inline-block;
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  color: var(--ink);
  padding-bottom: 20px;
  margin: 0;
}
.head-rule {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 64px; height: 3px;
  background: var(--brand-primary);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .services-grid { grid-template-columns: 1fr; }
}

.svc-card {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.svc-card img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.svc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.75) 100%);
}
.svc-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,38,44,.45) 0%, rgba(2,20,23,.95) 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.svc-card:hover .svc-hover,
.svc-card:focus-within .svc-hover {
  transform: scaleY(1);
}
.svc-content {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 3vw, 32px);
}
.svc-content h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  color: #fff;
  margin: 0 0 10px;
}
.svc-content p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  margin: 0 0 16px;
}
.svc-link {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.svc-link:hover { color: var(--brand-accent); }

.services-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: clamp(32px, 5vw, 48px); }
.btn-outline {
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }


/* =========================================================
   PAGE HEADER — inner-page hero banner (Services, Gallery,
   and future inner pages). Full-bleed photo with a dark
   overlay and left-aligned bold caps heading.
   ========================================================= */
.page-header {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 38vw, 440px);
  overflow: hidden;
  color: #fff;
  background: var(--brand-ink-dark);
}
.page-header-media { position: absolute; inset: 0; }
.page-header-media img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.page-header-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8,18,17,.88) 0%, rgba(8,18,17,.68) 45%, rgba(8,18,17,.4) 100%);
}
.page-header > .wrap { position: relative; z-index: 1; width: 100%; padding-block: clamp(40px, 6vw, 64px); }
.page-header h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5.8vw, 60px);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 12px;
}
.page-header-text {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255,255,255,.86);
  max-width: 80ch;
  white-space: nowrap;
  margin: 0;
}
/* Kicker variant: when the text precedes the h1 (used as a small label
   above the heading rather than a subtitle below it), give it a gap. */
.page-header-text + h1 { margin-top: 10px; }

@media (max-width: 640px) {
  .page-header-text { white-space: normal; }
}

/* =========================================================
   SERVICES INDEX — full listing on /services. Deliberately not
   the home page's photo-card grid: a numbered, two-column list
   that reads fast when every service (not just a 4-item teaser)
   is on the page at once. One photo banner below anchors it
   visually instead of repeating photos across 12 cards.
   ========================================================= */
.svc-index { background: var(--surface); padding-block: clamp(56px, 8vw, 96px); }

/* Real grid (not column-count) so each row track's height is shared by
   both columns: row N on the left and row N on the right always match,
   instead of the two columns drifting independently. */
.svc-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: clamp(40px, 5vw, 84px);
  margin-top: clamp(8px, 2vw, 16px);
}
.svc-row {
  height: 100%;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 2px 18px;
  padding-block: clamp(20px, 2.6vw, 26px);
  border-bottom: 1px solid var(--rule);
}
.svc-row-icon {
  display: flex;
  color: var(--ink-soft);
  transition: color .25s ease;
}
.svc-row-icon svg { width: 38px; height: 38px; display: block; }
.svc-row:hover .svc-row-icon { color: var(--brand-accent); }
.svc-row h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(17px, 1.7vw, 20px);
  color: var(--ink);
  margin: 0 0 6px;
}
.svc-row p {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0;
}
.svc-row-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: none;
  transition: border-color .25s ease, color .25s ease;
}
.svc-row-btn svg { width: 11px; height: 11px; flex: none; transition: transform .25s ease; }
.svc-row-btn:hover { border-color: var(--brand-accent); color: var(--brand-primary); }
.svc-row-btn:hover svg { transform: translateX(2px); }

@media (max-width: 860px) {
  .svc-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 560px) {
  .svc-row { grid-template-columns: 54px 1fr; }
  .svc-row-btn { grid-column: 2; margin-top: 12px; }
}

/* Photo banner closing the list — reuses .about-banner's photo +
   gradient + tagline treatment for one strong visual beat. */
.svc-banner-wrap { margin-top: clamp(48px, 6vw, 72px); }


/* =========================================================
   GALLERY PAGE — full photo index, click-to-enlarge via the
   shared .lightbox (see site.js). sizes="100vw" on every <img>
   is deliberate: it biases srcset selection toward the largest
   tier so the lightbox doesn't blow up a small thumbnail file.
   ========================================================= */
.gal-section { background: var(--surface); padding-block: clamp(56px, 8vw, 96px); }

.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gal-grid { grid-template-columns: 1fr; }
}

.gal-grid .ph {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  margin: 0;
  cursor: pointer;
}
.gal-grid .ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .5s ease;
}
.gal-grid .ph:hover img,
.gal-grid .ph:focus-visible img { transform: scale(1.06); }
.gal-grid .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}
.gal-grid .ph:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
}

.ph-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .25s ease, transform .25s ease;
}
.gal-grid .ph:hover .ph-zoom,
.gal-grid .ph:focus-visible .ph-zoom { opacity: 1; transform: none; }

.ph-cap {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
}
.ph-cap-title {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.ph-cap-loc {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gal-grid .ph img, .ph-zoom { transition: none; }
}


/* =========================================================
   OUR PROCESS — vertical scroll-progress timeline
   A thin rail runs behind the step markers; both the rail's fill and
   each step's "lit" state track scroll position (see site.js), so the
   line visibly catches up to you as you read down the page.
   ========================================================= */
.process {
  position: relative;
  background: var(--bg);
  padding-block: clamp(72px, 10vw, 128px);
  overflow: hidden;
}
.process > .wrap { position: relative; z-index: 1; }

.process-head {
  text-align: left;
  margin-inline: 0;
  max-width: none;
}
.process-head .head-rule { left: 0; transform: none; }

.process-watermark {
  position: absolute;
  top: calc(50% + clamp(65px, 8vw, 105px));
  right: -4%;
  transform: translateY(-50%);
  width: clamp(420px, 46vw, 760px);
  z-index: 0;
  opacity: .12;
  pointer-events: none;
}
.process-watermark img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  .process-watermark { width: clamp(320px, 60vw, 520px); right: -10%; }
}
@media (max-width: 640px) {
  .process-watermark { display: none; }
}

.process-rail {
  position: relative;
  max-width: 720px;
  margin-left: 0;
  margin-right: auto;
}

.process-rail-track {
  position: absolute;
  left: 19px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--rule);
}
.process-rail-fill {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 0;
  background: var(--brand-primary);
}

.process-steps {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 64px);
}

.process-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px clamp(20px, 3.5vw, 40px);
}

.process-marker {
  position: relative;
  width: 40px;
  height: 40px;
}
.process-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--rule-strong);
  transition: border-color .4s ease, background-color .4s ease;
}
.process-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  transition: color .4s ease;
}
.process-step.is-active .process-dot { border-color: var(--brand-primary); background: var(--brand-primary); }
.process-step.is-active .process-num { color: #fff; }

.process-content { padding-top: 2px; }
.process-content h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 25px);
  color: var(--ink);
  margin: 0 0 8px;
}
.process-content p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .process-dot, .process-num { transition: none; }
}


/* =========================================================
   ABOUT US — two-column intro over a light surface, closing with
   a full-width photo banner and a bold tagline fading into it.
   ========================================================= */
.about { background: var(--surface); padding-block: clamp(56px, 8vw, 96px) clamp(64px, 9vw, 120px); }

.about-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.about-eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.about-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.16;
  color: var(--ink);
  margin: 0;
}
.about-title strong { display: block; font-weight: 800; }

.about-text {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 900px;
  margin: 18px auto 0;
}

.about-banner {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  min-height: clamp(300px, 40vw, 500px);
}
.about-banner img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 48%);
}
.about-banner-foot {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 4vw, 48px);
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(18px, 3vw, 34px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.about-banner-text {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 6.4vw, 66px);
  line-height: .98;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, #fff 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.55);
  transition: color .25s ease, border-color .25s ease;
}
.about-banner-link svg { flex: none; transition: transform .25s ease; }
.about-banner-link:hover,
.about-banner-link:focus-visible {
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.about-banner-link:hover svg { transform: translateX(4px); }

@media (max-width: 640px) {
  .about-banner-text { font-size: clamp(24px, 8.5vw, 38px); }
}


/* =========================================================
   OUR WORK — cinematic drag-to-scroll project slider
   Full-bleed dark section, oversized serif index numerals (ties into
   the Cormorant Garamond used in Testimonials), scroll-linked progress
   bar, and a custom "Drag" cursor pill on desktop pointers.
   ========================================================= */
.work {
  position: relative;
  background: var(--brand-ink-dark);
  padding-block: clamp(72px, 10vw, 128px);
  overflow: hidden;
}
.work-grain {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .6;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.work-glow {
  position: absolute;
  top: -10%;
  left: 55%;
  width: 900px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(0,214,231,.20) 0%, rgba(0,214,231,0) 70%);
  z-index: 0;
  pointer-events: none;
}
.work-head-wrap { position: relative; z-index: 1; }

.work-head {
  text-align: left;
  margin: 0 0 clamp(28px, 4vw, 40px);
  max-width: none;
}
.work-head .eyebrow-alt { color: var(--brand-accent); }
.work-head h2 { color: #fff; }
.work-head .head-rule { left: 0; transform: none; background: var(--brand-accent); }

.work-controls {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 24px);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.work-counter {
  flex: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
  min-width: 60px;
}
.work-progress {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  overflow: hidden;
}
.work-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand-accent);
}
.work-arrows { display: flex; gap: 10px; flex: none; }
.work-arrow {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.work-arrow:hover { background: var(--brand-accent); color: var(--brand-ink-dark); border-color: var(--brand-accent); }

.work-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gut);
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--gut);
  padding-bottom: 4px;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.work-track::-webkit-scrollbar { display: none; }
.work-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }

.work-slide {
  position: relative;
  flex: none;
  width: clamp(260px, 36vw, 520px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  scroll-snap-align: start;
  opacity: .45;
  transform: scale(.95);
  transition: opacity .5s ease, transform .5s ease;
}
.work-slide.is-active { opacity: 1; transform: scale(1); }

.work-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
}
.work-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.8) 100%);
  pointer-events: none;
}

.work-num {
  position: absolute;
  top: 16px; left: 20px;
  z-index: 2;
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(32px, 4vw, 48px);
  color: rgba(255,255,255,.85);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.work-cap {
  position: absolute;
  left: 22px; right: 22px; bottom: 18px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.work-cap-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.8vw, 19px);
  letter-spacing: .01em;
  color: #fff;
}
.work-cap-loc {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}

.work .services-cta { position: relative; z-index: 1; margin-top: clamp(40px, 5vw, 56px); }
.work .btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.work .btn-outline:hover { background: #fff; color: var(--ink); }

@media (max-width: 640px) {
  .work-slide { width: 84vw; }
}
@media (prefers-reduced-motion: reduce) {
  .work-slide { transition: none; }
}


/* =========================================================
   LIGHTBOX — click-to-enlarge overlay for .gal-grid images
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 56px);
  background: rgba(6,7,8,.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
}
.lb-close {
  position: absolute;
  top: clamp(16px, 3vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lb-close:hover { background: #fff; color: var(--ink); border-color: #fff; }
body.lb-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}


/* =========================================================
   TESTIMONIALS — dark gradient banner, crossfading quotes
   Ported from sarabigleyrealtor.com's testimonials section (same layout,
   carousel behavior, and floating-dot decoration), recolored to brand teal.
   ========================================================= */
.tst{
  background: linear-gradient(115deg, #12211f 0%, #0a3038 52%, var(--brand-primary) 100%);
  color: #fff;
  padding-block: clamp(40px, 5.5vw, 76px) clamp(20px, 2.6vw, 34px);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* --- Floating dot field -------------------------------------------------
   Each dot is its own element carrying its own position, size, opacity,
   blur, three drift waypoints, duration and phase as custom properties.
   Purely decorative: aria-hidden, pointer-events:none, behind the content. */
.tst-dots{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  --slow: 1.4;
}
.tst-dots i{
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(255,255,255,var(--o));
  filter: blur(var(--b));
  animation:
    tstFloat calc(var(--dur) * var(--slow)) ease-in-out infinite var(--delay),
    tstTwinkle var(--tw) ease-in-out infinite var(--twd);
}
@keyframes tstFloat{
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(var(--x1), var(--y1), 0); }
  50%  { transform: translate3d(var(--x2), var(--y2), 0); }
  75%  { transform: translate3d(var(--x3), var(--y3), 0); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes tstTwinkle{
  0%, 100% { opacity: .25; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .tst-dots i{ animation: none; }
}

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

.tst-title{
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 clamp(22px, 2.8vw, 38px);
  text-shadow: 0 2px 18px rgba(0,0,0,.22);
}

.tst-viewport{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 40px);
}

.tst-arrow{
  flex: none;
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.tst-arrow:hover{ background: #fff; color: var(--brand-primary); border-color: #fff; }

.tst-track{ display: grid; flex: 0 1 80%; }
.tst-item{
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
}
.tst-item.is-active{ opacity: 1; visibility: visible; }

.tst-quote{
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: rgba(255,255,255,.94);
  margin: 0 auto;
  max-width: 100%;
}
.tst-author{
  display: block;
  margin-top: clamp(16px, 1.8vw, 24px);
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(15px, 1.3vw, 19px);
  color: rgba(255,255,255,.82);
}

.tst-timeline{
  display: flex;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(20px, 2.6vw, 34px);
}
.tst-step{
  flex: 1;
  display: flex;
  align-items: center;
  padding: 11px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.tst-step::before{
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  transition: background-color .3s ease;
}
.tst-step:hover::before{ background: rgba(255,255,255,.5); }
.tst-step.is-active::before{ background: #fff; }

.tst-cta{ margin-top: clamp(30px, 3.4vw, 46px); }
.tst-cta{ background: transparent; border: 1px solid rgba(255,255,255,.75); color: #fff; }
.tst-cta:hover,
.tst-cta:focus-visible{ background: #fff; color: var(--ink); border-color: #fff; }

@media (prefers-reduced-motion: reduce){
  .tst-item{ transition: none; }
}

@media (max-width: 640px){
  .tst-viewport{ gap: 8px; }
  .tst-arrow{ width: 40px; height: 40px; }
  .tst-track{ flex-basis: 100%; }
}


/* =========================================================
   SCROLL REVEAL — whisper-subtle fade + rise as content enters view.
   JS adds .reveal-armed to [data-reveal] elements, then .is-revealed once
   the element intersects. No-JS / reduced-motion visitors see it immediately.
   ========================================================= */
.reveal-armed{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.65,.25,1);
}
.reveal-armed.is-revealed{ opacity: 1; transform: none; }
.btn.reveal-armed{
  transform: none;
  transition: opacity 1s ease .5s, background-color .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce){
  .reveal-armed{ opacity: 1; transform: none; transition: none; }
}


/* =========================================================
   CTA BAND — "Let's Talk About Your Project" closing pitch
   Minimal centered statement on a dark teal gradient, echoing the
   Testimonials section's serif treatment. No photo, nothing to
   compete with the message.
   ========================================================= */
.cta-band {
  position: relative;
  background: linear-gradient(115deg, #12211f 0%, #0a3038 52%, var(--brand-primary) 100%);
  color: #fff;
  text-align: center;
  padding-block: clamp(64px, 9vw, 120px);
  overflow: hidden;
}

.cta-inner { max-width: 900px; margin-inline: auto; }

.cta-inner .eyebrow-alt { color: rgba(255,255,255,.78); margin: 0 0 12px; }

.cta-inner h2 {
  display: inline-block;
  position: relative;
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.12;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 22px;
  margin: 0 0 24px;
}
.cta-inner .head-rule { background: var(--brand-accent); }

.cta-text {
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: rgba(255,255,255,.85);
  max-width: 74ch;
  margin: 0 auto 34px;
}
.cta-actions { margin-bottom: 34px; }

.cta-trust {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 0;
  /* padding-inline must stay 0: this is a <ul>, and the UA default
     padding-inline-start: 40px is not removed by list-style: none. Setting
     only padding-top leaves that 40px in place, which insets the content box
     on one side and pushes the centred content 20px right of true centre. */
  padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.18);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
.cta-trust li { display: flex; align-items: center; gap: 8px; }
.cta-trust svg { flex: none; color: var(--brand-accent); }

/* Below 600px the three items no longer fit on one line. Left as a wrapping
   flex row they each centre themselves independently, so the check marks land
   at different x positions and the group reads as ragged (measured at 390px:
   item left edges at 136, 67 and 227).
   Grid fixes it without touching the markup: a single auto-width column,
   centred as a block via justify-content, with justify-items:start pinning
   every item to that column's left edge — so the check marks line up under
   each other while the group stays centred. The <ul> itself keeps its full
   width, which matters because it carries the section's top border rule. */
@media (max-width: 599px) {
  .cta-trust {
    display: grid;
    justify-content: center;
    justify-items: start;
    gap: 12px;
  }
}


/* =========================================================
   MAP — full-bleed embed, fixed-height section
   ========================================================= */
.map-section {
  width: 100%;
  height: clamp(360px, 45vw, 520px);
}
.map-section iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   SERVICE AREA — opening statement (reuses .about-eyebrow /
   .about-title / .about-text typography, centered) plus an
   interactive city map + card grid. /service-area only.
   ========================================================= */
.sa-intro { background: var(--bg); padding-block: clamp(56px, 8vw, 96px) clamp(48px, 6vw, 72px); }
.sa-intro-inner { max-width: 1100px; margin-inline: auto; text-align: center; }
.sa-intro-inner .about-text { max-width: 1100px; }

.sa-cities { padding-block: clamp(24px, 3vw, 40px) clamp(64px, 8vw, 120px); background: var(--bg); }

/* Interactive city map (Leaflet + OpenStreetMap tiles, no API key). Full
   width of .wrap so it lines up with the card grid below it. */
.sa-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0 auto clamp(32px, 4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: 0 12px 32px rgba(12, 14, 15, .14);
  overflow: hidden;
  z-index: 0;
}
@media (min-width: 901px) {
  .sa-map { aspect-ratio: 21 / 8; }
}
.sa-map.leaflet-container { font-family: var(--sans); }

.sa-map .sa-area-label {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .65;
  white-space: nowrap;
}
.sa-map .sa-area-label::before { display: none; }

.sa-map .sa-marker-label {
  background: var(--ink);
  border: 0;
  box-shadow: 0 2px 6px rgba(12, 14, 15, .35);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.sa-map .sa-marker-label::before { border-top-color: var(--ink); }

.sa-marker { background: none; border: 0; }
.sa-marker-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(12, 14, 15, .35);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.sa-marker.is-linked .sa-marker-badge { transform: scale(1.15); background: #fff; color: var(--brand-primary); }
.sa-marker--home .sa-marker-badge { background: var(--brand-ink-dark); color: #fff; }
.sa-marker--home.is-linked .sa-marker-badge { background: #fff; color: var(--brand-ink-dark); }

.sa-map .leaflet-popup-content-wrapper { border-radius: 6px; }
.sa-map .leaflet-popup-content {
  margin: 8px 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.sa-map .leaflet-control-attribution {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--ink-soft);
  background: rgba(255,255,255,.75);
}

.sa-card { transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.sa-card.is-linked { border-color: var(--brand-accent); transform: translateY(-2px); background: var(--surface); }
.sa-card.is-pinged { animation: saCardPulse .9s ease; }
@keyframes saCardPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,214,231,.4); }
  70%  { box-shadow: 0 0 0 10px rgba(0,214,231,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,214,231,0); }
}
@media (prefers-reduced-motion: reduce) {
  .sa-card.is-pinged { animation: none; }
}

.sa-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(10px, 1.2vw, 16px);
}
.sa-card {
  display: flex;
  flex-direction: column;
  min-height: 108px;
  padding: clamp(14px, 1.6vw, 18px) clamp(12px, 1.4vw, 16px);
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
  transition: border-color .25s ease, transform .25s ease;
}
.sa-card:hover { border-color: var(--brand-accent); transform: translateY(-2px); }
.sa-card-icon { color: var(--brand-primary); margin: 0 0 8px; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; }
.sa-card-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.sa-card-note {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 6px 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.sa-card-link {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 8px 0 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.sa-card-link:hover { color: var(--brand-accent); }
.sa-card:hover .sa-card-note,
.sa-card:focus-within .sa-card-note,
.sa-card.is-linked .sa-card-note,
.sa-card:hover .sa-card-link,
.sa-card:focus-within .sa-card-link,
.sa-card.is-linked .sa-card-link { opacity: 1; }
.sa-card--more {
  grid-column: 1 / -1;
  background: var(--brand-ink-dark);
  border-color: var(--brand-ink-dark);
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(20px, 2.6vw, 30px) clamp(24px, 3vw, 40px);
}
.sa-card--more .sa-card-icon,
.sa-card--more .sa-card-name { color: #fff; }
.sa-card--more .sa-card-icon { margin: 0; flex-shrink: 0; }
.sa-card--more .sa-card-name { font-size: clamp(16px, 1.6vw, 19px); white-space: nowrap; }
.sa-card--more .sa-card-note {
  color: rgba(255,255,255,.75);
  opacity: 1;
  margin: 0 0 0 auto;
  text-align: right;
}
.sa-card--more .sa-card-note-phone {
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sa-card--more .sa-card-note-phone:hover { color: var(--brand-accent); }

@media (max-width: 1100px) {
  .sa-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .sa-grid { grid-template-columns: repeat(2, 1fr); }
  .sa-card--more { flex-direction: column; align-items: flex-start; }
  .sa-card--more .sa-card-note { margin: 6px 0 0; text-align: left; }
}


/* =========================================================
   FOOTER — dark, organized columns: brand, service area,
   quick links, closing bar with copyright and social.
   ========================================================= */
.site-footer { background: var(--brand-ink-dark); color: #fff; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  padding-block: clamp(48px, 6vw, 80px) clamp(36px, 4vw, 52px);
}
.footer-logo { height: clamp(56px, 6vw, 72px); width: auto; display: block; margin-bottom: 16px; }
.footer-tagline {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.6);
  max-width: 34ch;
  margin: 0;
}
.footer-h {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-accent);
  margin: 0 0 14px;
}
.footer-col .footer-h:not(:first-child) { margin-top: clamp(20px, 2.4vw, 28px); }
.footer-link,
.footer-text {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,.8);
  margin: 0;
}
.footer-link { text-decoration: none; transition: color .25s ease; }
.footer-link:hover { color: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  font-family: var(--sans);
  font-size: 14px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  transition: color .25s ease;
}
.footer-links a:hover { color: var(--brand-accent); }

.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid rgba(255,255,255,.12);
}
.footer-bottom .footer-copy { justify-self: start; }
.footer-bottom .footer-social { justify-self: center; }
.footer-bottom .footer-credit { justify-self: end; }

.footer-copy {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.55);
  margin: 0;
}
.footer-copy a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .25s ease; }
.footer-copy a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-copy-sep { display: inline-block; margin: 0 10px; color: rgba(255,255,255,.28); }

.footer-social { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  color: rgba(255,255,255,.75);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-social a:hover { background: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-ink-dark); }

.footer-credit { display: inline-flex; align-items: center; }
.footer-credit a { display: inline-flex; align-items: center; opacity: .7; transition: opacity .2s ease; }
.footer-credit a:hover { opacity: 1; }
.footer-credit img { height: 20px; width: auto; }

@media (max-width: 980px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .footer-bottom {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
    text-align: center;
  }
  .footer-bottom .footer-copy,
  .footer-bottom .footer-social,
  .footer-bottom .footer-credit { justify-self: center; }
  .footer-bottom .footer-social { order: -1; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; }
}


/* =========================================================
   LEGAL PAGES — Privacy Policy. Deliberately plain: one column
   of readable prose, no imagery, no reveal animations.
   ========================================================= */
.legal-main {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 84px) var(--gut) clamp(72px, 8vw, 112px);
}
.legal-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.legal-updated {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
.legal-rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--brand-accent);
  margin: clamp(24px, 3vw, 32px) 0 0;
}
.legal-lede {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: clamp(24px, 3vw, 32px) 0 0;
}
.legal-main h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 26px);
  line-height: 1.25;
  color: var(--ink);
  margin: clamp(40px, 4.4vw, 56px) 0 0;
}
.legal-main p,
.legal-main li {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.legal-main p { margin: 14px 0 0; }
.legal-main ul { margin: 14px 0 0; padding-left: 20px; }
.legal-main li { margin: 8px 0 0; }
.legal-main li::marker { color: var(--brand-accent); }
.legal-main a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-main a:hover { color: var(--brand-accent); }


/* =========================================================
   CONTACT PAGE — info card + form mockup, side by side.
   Form is a visual mockup only (no provider wired up yet, per
   conventions/reference-patterns.md's form mockup convention).
   ========================================================= */
.contact-section { background: var(--surface); padding-block: clamp(56px, 8vw, 96px); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-info-card,
.contact-form-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(28px, 3.5vw, 40px);
}

.contact-card-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(19px, 2vw, 23px);
  color: var(--ink);
  margin: 0 0 22px;
}

.contact-info-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-info-item { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-icon { flex: none; width: 20px; height: 20px; color: var(--brand-primary); margin-top: 2px; }
.contact-info-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 4px;
}
.contact-info-value {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.contact-info-value a { color: var(--ink); text-decoration: none; transition: color .2s ease; }
.contact-info-value a:hover { color: var(--brand-primary); }

.contact-info-trust {
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-info-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-soft);
}
.contact-info-trust svg { flex: none; color: var(--brand-primary); }

/* GHL form embed — see conventions/performance.md#gohighlevel-ghl-forms.
   Pre-load height floor only; form_embed.js sets the real height after
   init. Don't raise it to "match" the form. */
.qf-embed iframe { display: block; width: 100%; min-height: 320px; border: 0; background: transparent; }


/* =========================================================
   LOCATION LANDING PAGES — reusable pattern for individual
   service-area/city pages (first built for /mineral-wells-tx).
   Breadcrumb, two-column "why us" checklist, pull-quote, and
   a native <details> FAQ accordion (zero JS).
   ========================================================= */
.breadcrumb { background: var(--surface); border-bottom: 1px solid var(--rule); }
.breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  /* padding-block alone leaves the UA default padding-inline-start: 40px on
     the <ul>, which indented the trail 40px past the h1 and every other
     block on the page. Set both axes explicitly. */
  padding: 14px 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.breadcrumb-list a { color: var(--ink-soft); text-decoration: none; transition: color .2s ease; }
.breadcrumb-list a:hover { color: var(--brand-primary); }
.breadcrumb-list li:last-child { color: var(--ink); font-weight: 600; }
.breadcrumb-sep { color: var(--rule-strong); }

/* Photos/Videos tab switcher on /gallery/photos and /gallery/videos */
.gal-tabs { background: var(--surface); border-bottom: 1px solid var(--rule); }
.gal-tabs-inner { display: flex; gap: 10px; padding-block: 14px; }
.gal-tab {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.gal-tab:hover { border-color: var(--brand-accent); color: var(--ink); }
.gal-tab.is-active { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }

/* /gallery/videos — live TikTok creator embed (up to 10 most recent posts,
   updates automatically; no API key/OAuth required). */
.vid-feed { background: var(--bg); padding-block: clamp(56px, 8vw, 96px); text-align: center; }
.vid-feed-inner { max-width: 1120px; margin-inline: auto; }
/* Pre-load height floor only, to soften layout jump; the embed script sets
   the real height after init. Don't raise it to "match" the widget. */
.vid-embed-card { margin: 32px auto 0; display: flex; justify-content: center; min-height: 400px; }

.mw-why { background: var(--bg); padding-block: clamp(56px, 8vw, 96px); }
.mw-why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .mw-why-grid { grid-template-columns: 1fr; }
}
.mw-checklist { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mw-checklist li { display: flex; gap: 12px; align-items: flex-start; }
.mw-check-badge {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.mw-check-badge svg { width: 12px; height: 12px; }
.mw-checklist span:last-child {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.mw-why-photo {
  position: relative;
  border-radius: 2px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .18);
}
.mw-why-photo img, .mw-why-photo iframe { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (max-width: 640px) {
  .mw-why-photo { aspect-ratio: 3 / 2; }
}

.mw-quote { background: var(--surface); padding-block: clamp(56px, 8vw, 96px); text-align: center; }
.mw-quote-inner { max-width: 760px; margin-inline: auto; }
.mw-quote blockquote {
  font-family: "Cormorant Garamond", "Cormorant Fallback", ui-serif, Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 20px;
}
.mw-quote cite {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brand-primary);
}

.mw-svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 900px) { .mw-svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mw-svc-grid { grid-template-columns: 1fr; } }

.mw-svc-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: clamp(26px, 3vw, 32px);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.mw-svc-card:hover {
  border-color: var(--brand-accent);
  transform: translateY(-4px);
  box-shadow: 0 28px 52px rgba(7, 92, 107, .28);
}
.mw-svc-icon {
  flex: none;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 20px;
  transition: background .25s ease, color .25s ease;
}
.mw-svc-card:hover .mw-svc-icon { background: var(--brand-primary); color: #fff; }
.mw-svc-icon svg { width: 23px; height: 23px; }
.mw-svc-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 10px;
}
.mw-svc-card p {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
  flex: 1;
}
.mw-svc-link {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--brand-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mw-svc-link svg { width: 11px; height: 11px; transition: transform .25s ease; }
.mw-svc-link:hover { color: var(--brand-accent); }
.mw-svc-link:hover svg { transform: translateX(3px); }

.faq-section { background: var(--bg); padding-block: clamp(56px, 8vw, 96px); }
.faq-list {
  max-width: 820px;
  margin: clamp(32px, 4vw, 48px) auto 0;
  border-top: 1px solid var(--rule);
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 2px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 18px);
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-icon { flex: none; width: 20px; height: 20px; color: var(--brand-primary); transition: transform .25s ease; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 68ch;
  margin: 0 2px clamp(20px, 3vw, 28px);
}