/* ==========================================================================
   Salgado Construction Solutions — site styles
   Palette, type scale and components. One stylesheet, no build step.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Brand */
  --navy:        #142B3D;
  --navy-900:    #0C1B27;
  --navy-800:    #1D3D55;
  --navy-700:    #274D69;
  --blue:        #2E74B5;
  --blue-dark:   #245C91;
  --blue-tint:   #E9F1F9;
  --gray:        #667085;
  --gray-700:    #475467;
  --gray-400:    #98A2B3;
  --gray-300:    #D0D5DD;
  --gray-200:    #E4E7EC;
  --bg:          #F2F4F7;
  --white:       #FFFFFF;

  /* Amber is the call-to-action colour. Buttons pair it with navy text —
     white on #D97706 is only 3.2:1, navy on #D97706 is 4.6:1 (WCAG AA). */
  --amber:       #D97706;
  --amber-dark:  #B45309;
  --amber-tint:  #FEF3E2;

  /* Type */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Space */
  --gutter: 1.25rem;
  --section-y: clamp(3.5rem, 7vw, 6rem);
  --radius: 6px;
  --radius-lg: 10px;

  /* Depth */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .08);

  --header-h: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--gray-700);
  background: var(--white);
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 .6em;
  letter-spacing: -.015em;
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: 1.0625rem; }

p  { margin: 0 0 1.1em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

a { color: var(--blue-dark); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

hr { border: 0; border-top: 1px solid var(--gray-200); margin: 2rem 0; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: 8px; top: -100px;
  background: var(--navy); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius); z-index: 200; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; color: #fff; }

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

/* --- Layout ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }
.container--wide   { max-width: 1340px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--alt   { background: var(--bg); }
.section--navy  { background: var(--navy); color: #C9D6E0; }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

/* Subtle concrete grain, used only on navy panels. */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber-dark);
  margin-bottom: .75rem;
}
.section--navy .eyebrow { color: var(--amber); }

.lede { font-size: clamp(1.0625rem, 1.6vw, 1.1875rem); color: var(--gray); }
.section--navy .lede { color: #B7C7D4; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  padding: .95rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--amber); color: var(--navy); border-color: var(--amber); }
.btn--primary:hover { background: #C26A05; border-color: #C26A05; color: var(--navy); }

.btn--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn--navy:hover { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.btn--white { background: #fff; color: var(--navy); border-color: #fff; }
.btn--white:hover { background: var(--bg); border-color: var(--bg); color: var(--navy); }

.btn--outline { background: transparent; color: var(--navy); border-color: var(--gray-300); }
.btn--outline:hover { border-color: var(--navy); background: var(--white); color: var(--navy); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }

.btn--sm { padding: .6rem 1rem; font-size: .9375rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn[disabled]:active { transform: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.link-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--blue-dark);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem;
}
.link-arrow::after { content: "→"; transition: transform .15s ease; }
.link-arrow:hover { color: var(--navy); }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- Header ------------------------------------------------------------- */
.topbar {
  background: var(--navy-900);
  color: #A9BCC9;
  font-size: .8125rem;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 38px; flex-wrap: wrap;
}
.topbar a { color: #DCE6ED; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-contact { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topbar-area { color: #8FA5B5; }
@media (max-width: 860px) { .topbar { display: none; } }

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--gray-200);
}
.site-header.is-stuck { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand__mark { width: 38px; height: 38px; flex: none; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--navy); letter-spacing: -.02em;
}
.brand__sub {
  font-family: var(--font-display); font-weight: 600; font-size: .5625rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gray);
  margin-top: 3px;
}

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  font-family: var(--font-display);
  font-weight: 600; font-size: .9375rem;
  color: var(--navy); text-decoration: none;
  padding: .5rem .6rem; border-radius: var(--radius);
  white-space: nowrap;
}
.nav a:hover { background: var(--bg); }
.nav a[aria-current="page"] { color: var(--blue-dark); box-shadow: inset 0 -2px 0 var(--amber); }

.header-actions { display: flex; align-items: center; gap: .6rem; flex: none; }
.header-phone {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--navy); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
  white-space: nowrap;
}
.header-phone:hover { color: var(--blue-dark); }

.nav-toggle {
  display: none;
  background: transparent; border: 1px solid var(--gray-300);
  border-radius: var(--radius); padding: .65rem .8rem; cursor: pointer;
  min-height: 44px; /* comfortable tap target */
  color: var(--navy); align-items: center; gap: .4rem;
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1080px) {
  .nav, .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 420px) {
  .header-phone span { display: none; }
  .brand__name { font-size: 1rem; }
}

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 150;
  visibility: hidden;
}
.drawer[data-open="true"] { visibility: visible; }
.drawer__scrim {
  position: absolute; inset: 0; background: rgba(12,27,39,.55);
  opacity: 0; transition: opacity .2s ease;
}
.drawer[data-open="true"] .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: #fff;
  transform: translateX(100%);
  transition: transform .22s ease;
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.drawer[data-open="true"] .drawer__panel { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--gray-200);
}
.drawer__close {
  background: transparent; border: 0; cursor: pointer; padding: .5rem;
  color: var(--navy); border-radius: var(--radius);
}
.drawer__close svg { width: 24px; height: 24px; }
.drawer__nav { padding: .5rem 0; }
.drawer__nav a {
  display: block; padding: .85rem 1.25rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  color: var(--navy); text-decoration: none;
  border-bottom: 1px solid var(--gray-200);
}
.drawer__nav a[aria-current="page"] { color: var(--blue-dark); border-left: 3px solid var(--amber); }
.drawer__foot { padding: 1.25rem; display: grid; gap: .6rem; margin-top: auto; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,27,39,.72) 0%, rgba(12,27,39,.62) 45%, rgba(12,27,39,.88) 100%),
    linear-gradient(90deg, rgba(12,27,39,.75) 0%, rgba(12,27,39,.25) 70%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 7rem);
  max-width: 780px;
}
.hero h1 { color: #fff; margin-bottom: .5em; }
.hero__sub {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: #C6D5E0;
  max-width: 62ch;
  margin-bottom: 2rem;
}
.hero .btn-row { margin-bottom: 1.75rem; }
.hero__meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .9375rem; color: #A9BCC9;
  padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.18);
}
.hero__meta strong { color: #fff; font-weight: 600; }
.hero__meta a { color: #fff; font-weight: 600; text-decoration: none; }
.hero__meta a:hover { text-decoration: underline; }

/* Compact hero for interior pages */
.pagehero {
  background: var(--navy);
  color: #C6D5E0;
  position: relative;
  overflow: hidden;
}
.pagehero__media { position: absolute; inset: 0; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(12,27,39,.94) 15%, rgba(12,27,39,.72) 100%);
}
.pagehero__inner {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  max-width: 720px;
}
.pagehero h1 { color: #fff; }
.pagehero p { color: #B7C7D4; font-size: clamp(1rem, 1.7vw, 1.125rem); }
.pagehero .btn-row { margin-top: 1.75rem; }

.breadcrumb {
  font-size: .8125rem; margin-bottom: 1rem; color: #8FA5B5;
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: .35rem; color: #5F7A8C; }
.breadcrumb a { color: #C6D5E0; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* --- Entrance animation ---------------------------------------------------
   The hero text rises into place over roughly three seconds: the headline
   word by word, then the supporting copy, buttons and trust bar in sequence.

   It is pure CSS with `animation-fill-mode: both`, so the text always ends
   visible even if JavaScript never runs. Readers who have asked for reduced
   motion get the finished state immediately (see the media query near the top
   of this file). Crawlers see the same markup either way. */

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__inner > *,
.pagehero__inner > * {
  animation: riseIn .8s cubic-bezier(.16, .84, .44, 1) both;
}

/* Home hero — order: eyebrow, headline, subhead, buttons, meta line. */
.hero__inner > .eyebrow    { animation-delay: .15s; }
.hero__inner > h1          { animation-delay: .30s; }
.hero__inner > .hero__sub  { animation-delay: 1.10s; }
.hero__inner > .btn-row    { animation-delay: 1.50s; }
.hero__inner > .hero__meta { animation-delay: 1.85s; }

/* Interior hero — order: breadcrumb, eyebrow, headline, copy, buttons. */
.pagehero__inner > .breadcrumb { animation-delay: .10s; }
.pagehero__inner > .eyebrow    { animation-delay: .25s; }
.pagehero__inner > h1          { animation-delay: .40s; }
.pagehero__inner > p           { animation-delay: 1.10s; }
.pagehero__inner > .btn-row    { animation-delay: 1.50s; }

/* Headline split into words by js/main.js. Until that runs — or if it never
   does — the heading animates as a single block from the rules above. */
.hero__inner h1.is-split,
.pagehero__inner h1.is-split {
  animation: none;
  opacity: 1;
}
.hero__inner h1.is-split .word,
.pagehero__inner h1.is-split .word {
  display: inline-block;
  animation: riseIn .7s cubic-bezier(.16, .84, .44, 1) both;
}

/* Safety net. js/main.js adds this class four seconds in — after the sequence
   has finished — so that a stalled or unsupported animation can never leave the
   headline permanently invisible. In normal use it changes nothing. */
body.reveal-done .hero__inner > *,
body.reveal-done .pagehero__inner > *,
body.reveal-done .hero__inner h1 .word,
body.reveal-done .pagehero__inner h1 .word,
body.reveal-done .trustbar li {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Trust bar closes the sequence just after the three-second mark. */
.trustbar li { animation: riseIn .6s ease-out both; }
.trustbar li:nth-child(1) { animation-delay: 2.10s; }
.trustbar li:nth-child(2) { animation-delay: 2.25s; }
.trustbar li:nth-child(3) { animation-delay: 2.40s; }
.trustbar li:nth-child(4) { animation-delay: 2.55s; }

/* --- Trust bar ---------------------------------------------------------- */
.trustbar { background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.1); }
.trustbar ul {
  list-style: none; margin: 0; padding: 1rem 0;
  display: grid; gap: .75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.trustbar li {
  margin: 0; display: flex; gap: .6rem; align-items: flex-start;
  font-size: .9375rem; color: #C6D5E0; line-height: 1.4;
}
.trustbar svg { width: 20px; height: 20px; flex: none; color: var(--amber); margin-top: 1px; }
.trustbar strong { color: #fff; font-weight: 600; display: block; font-family: var(--font-display); }

/* --- Cards & grids ------------------------------------------------------ */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--gray-300); box-shadow: var(--shadow-md); }
.card__media { aspect-ratio: 4 / 3; background: var(--gray-200); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { color: var(--gray); font-size: .9688rem; }
.card__body .link-arrow { margin-top: auto; padding-top: .9rem; }

/* Service card — full-card link */
.card--link { position: relative; }
.card--link h3 a { color: inherit; text-decoration: none; }
.card--link h3 a::after { content: ""; position: absolute; inset: 0; }
.card--link:hover h3 a { color: var(--blue-dark); }

.card__icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--blue-tint); color: var(--blue-dark);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.card__icon svg { width: 24px; height: 24px; }

/* --- Two audience paths -------------------------------------------------- */
.paths { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.path {
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  border: 1px solid var(--gray-200);
  background: #fff;
}
.path__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--gray-200); }
.path__media img { width: 100%; height: 100%; object-fit: cover; }
.path__body { padding: clamp(1.5rem, 3vw, 2.25rem); display: flex; flex-direction: column; flex: 1; }
.path__tag {
  display: inline-block; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 3px; margin-bottom: 1rem;
}
.path--builders .path__tag { background: var(--navy); color: #fff; }
.path--homeowners .path__tag { background: var(--amber-tint); color: var(--amber-dark); }
.path__list { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.path__list li {
  padding-left: 1.6rem; position: relative; font-size: .9688rem;
  color: var(--gray-700); margin-bottom: .5rem;
}
.path__list li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 8px; height: 8px; border-radius: 2px; background: var(--amber);
}
.path__body .btn-row { margin-top: auto; }

/* --- Feature / split rows ------------------------------------------------ */
.split {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-first .split__media { order: -1; }
}
.split__media img { border-radius: var(--radius-lg); width: 100%; }
.split figure { margin: 0; }
.split figcaption, .figcap {
  font-size: .8125rem; color: var(--gray); margin-top: .6rem; line-height: 1.5;
}
.section--navy .figcap, .section--navy figcaption { color: #92A7B7; }

/* --- Checklist ---------------------------------------------------------- */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.checklist li { position: relative; padding-left: 2rem; margin: 0; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .25em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B45309' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.section--navy .checklist li::before {
  background-color: rgba(217,119,6,.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F0A93C' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.checklist strong { color: var(--navy); font-weight: 600; }
.section--navy .checklist strong { color: #fff; }
.checklist span { color: var(--gray); }
.section--navy .checklist span { color: #A9BCC9; }

/* --- Process ------------------------------------------------------------ */
.process { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.process__step {
  counter-increment: step;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 1.5rem 1.35rem 1.35rem;
  position: relative;
}
.process__step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-weight: 800; font-size: 1.75rem;
  color: var(--amber); display: block; line-height: 1; margin-bottom: .75rem;
}
.process__step h3 { font-size: 1.0625rem; margin-bottom: .4rem; }
.process__step p { font-size: .9375rem; color: var(--gray); margin: 0; }
.section--navy .process__step { background: var(--navy-800); border-color: var(--navy-700); }

/* --- Stats / capability strip -------------------------------------------- */
.capgrid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.cap {
  padding: 1.5rem;
  border-left: 3px solid var(--amber);
  background: var(--navy-800);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.cap h3 { font-size: 1.0625rem; margin-bottom: .45rem; }
.cap p { font-size: .9375rem; color: #A9BCC9; margin: 0; }

/* --- Projects ----------------------------------------------------------- */
.project {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); overflow: hidden;
}
.project__gallery {
  display: grid; gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--gray-200);
}
.project__gallery figure { margin: 0; position: relative; }
.project__gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.project__gallery figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(12,27,39,.9), transparent);
  color: #fff; font-size: .75rem; font-weight: 600;
  padding: 1.75rem .7rem .55rem; margin: 0;
  font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase;
}
.project__body { padding: clamp(1.5rem, 3vw, 2.25rem); }
.project__meta {
  display: grid; gap: 1rem 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 1.25rem 0; margin: 1.5rem 0;
  border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200);
}
.project__meta dt {
  font-family: var(--font-display); font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gray);
  margin-bottom: .25rem;
}
.project__meta dd { margin: 0; font-weight: 600; color: var(--navy); font-size: .9375rem; }

.gallery-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.gallery-grid figure { margin: 0; }
.gallery-grid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); background: var(--gray-200);
}
.gallery-grid figcaption { font-size: .8125rem; color: var(--gray); margin-top: .5rem; }

/* --- Pending / verification marker --------------------------------------- */
.pending {
  display: inline-block;
  font-family: var(--font-display); font-weight: 700;
  font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  background: #FEF0C7; color: #7A2E0E;
  border: 1px dashed #DC6803;
  padding: .2rem .45rem; border-radius: 3px;
  vertical-align: middle;
}
.pending-block {
  background: #FFFAEB;
  border: 1px dashed #DC6803;
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  color: #7A2E0E;
  font-size: .9375rem;
}
.pending-block p:last-child { margin-bottom: 0; }
.pending-block strong { color: #7A2E0E; }

/* --- Photo placeholder ----------------------------------------------------
   Used where no real Salgado photograph exists yet. Deliberately looks like a
   placeholder — never substitute stock photography for a real project. */
.photo-placeholder {
  background:
    repeating-linear-gradient(45deg, #E4E7EC 0 12px, #DDE1E7 12px 24px);
  border: 2px dashed var(--gray-400);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .35rem; text-align: center; padding: 1.25rem;
  aspect-ratio: 4 / 3;
  color: var(--gray-700);
}
.photo-placeholder::before {
  content: "";
  width: 34px; height: 34px; margin-bottom: .3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.photo-placeholder__label {
  font-family: var(--font-display); font-weight: 700; font-size: .875rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy);
}
.photo-placeholder__hint { font-size: .75rem; color: var(--gray); }

/* --- Testimonials -------------------------------------------------------- */
.quote {
  background: #fff; border: 1px solid var(--gray-200);
  border-left: 3px solid var(--amber);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.75rem;
}
.quote blockquote { margin: 0 0 1.25rem; font-size: 1.0625rem; color: var(--navy); }
.quote figcaption { font-size: .875rem; color: var(--gray); }
.quote figcaption strong { display: block; color: var(--navy); font-family: var(--font-display); }

/* --- Areas --------------------------------------------------------------- */
.arealist { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.arealist li { margin: 0; }
.arealist span, .arealist a {
  display: inline-block; padding: .45rem .85rem;
  background: #fff; border: 1px solid var(--gray-300);
  border-radius: 100px; font-size: .9375rem; font-weight: 500;
  color: var(--navy-800); text-decoration: none;
}
.section--navy .arealist span, .section--navy .arealist a {
  background: var(--navy-800); border-color: var(--navy-700); color: #DCE6ED;
}

.area-card {
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg); padding: 1.6rem;
}
.area-card h3 { margin-bottom: .35rem; }
.area-card__county {
  font-size: .75rem; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber-dark);
  display: block; margin-bottom: .9rem;
}
.area-card ul { margin: 1rem 0 0; padding-left: 1.1rem; font-size: .9375rem; color: var(--gray); }

/* --- FAQ ----------------------------------------------------------------- */
.faq { border-top: 1px solid var(--gray-200); }
.faq details {
  border-bottom: 1px solid var(--gray-200);
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
  color: var(--navy); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.4rem;
  width: 14px; height: 14px;
  border-right: 2px solid var(--amber-dark); border-bottom: 2px solid var(--amber-dark);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.6rem; }
.faq .faq__answer { padding: 0 0 1.35rem; color: var(--gray); max-width: 75ch; }
.faq .faq__answer p:last-child { margin-bottom: 0; }

/* --- Forms --------------------------------------------------------------- */
.form-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-family: var(--font-display); font-weight: 600; font-size: .875rem; color: var(--navy);
}
.field .hint { font-size: .8125rem; color: var(--gray); font-weight: 400; }
.field .req { color: var(--amber-dark); }

.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--navy);
  padding: .75rem .85rem;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  background: #fff;
  width: 100%;
  min-width: 0;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue); outline: 3px solid rgba(46,116,181,.2); outline-offset: 0;
}
.field input[type="file"] { padding: .6rem; background: var(--bg); cursor: pointer; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-400); }

.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-row label {
  display: inline-flex; align-items: center; gap: .45rem;
  border: 1px solid var(--gray-300); border-radius: 100px;
  padding: .5rem .9rem; cursor: pointer; font-weight: 500;
  font-family: var(--font-body); font-size: .9375rem; color: var(--gray-700);
}
.radio-row input { width: auto; }
.radio-row label:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); color: var(--navy); }

.form-foot { margin-top: 1.5rem; display: grid; gap: 1rem; }
.form-note { font-size: .8125rem; color: var(--gray); }

.form-status {
  border-radius: var(--radius); padding: .9rem 1.1rem; font-size: .9375rem;
  display: none;
}
.form-status[data-state="error"]   { display: block; background: #FEF3F2; border: 1px solid #FDA29B; color: #912018; }
.form-status[data-state="success"] { display: block; background: #ECFDF3; border: 1px solid #6CE9A6; color: #05603A; }
.form-status[data-state="sending"] { display: block; background: var(--blue-tint); border: 1px solid #A5C8E5; color: var(--blue-dark); }
.form-status[data-state="setup"]   { display: block; background: #FFFAEB; border: 1px dashed #DC6803; color: #7A2E0E; }

/* Honeypot */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* --- CTA band ------------------------------------------------------------ */
.ctaband { background: var(--navy); color: #C6D5E0; }
.ctaband__inner {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  align-items: center; justify-content: space-between;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
.ctaband h2 { color: #fff; margin-bottom: .35rem; }
.ctaband p { margin: 0; color: #A9BCC9; max-width: 55ch; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #94A9B8; font-size: .9375rem; }
.footer-top { padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.footer-brand { max-width: 340px; }
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__sub { color: #7E97A9; }
.footer-brand p { margin-top: 1.1rem; }
.site-footer h2 {
  color: #fff; font-size: .8125rem; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 1.1rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { color: #B7C7D4; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-nap { font-style: normal; }
.footer-nap a { display: block; margin-bottom: .4rem; }
.footer-nap .footer-phone {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: #fff;
}

.footer-cta { display: grid; gap: .6rem; margin-top: 1.5rem; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-block: 1.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  font-size: .8125rem; color: #7E97A9;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

.social-row { display: flex; gap: .6rem; margin-top: 1.25rem; }
.social-row a {
  width: 38px; height: 38px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.18);
  display: grid; place-items: center; color: #B7C7D4;
}
.social-row a:hover { background: rgba(255,255,255,.08); color: #fff; }
.social-row svg { width: 18px; height: 18px; }

/* --- Mobile sticky CTA bar ----------------------------------------------- */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none;
  background: #fff;
  border-top: 1px solid var(--gray-200);
  box-shadow: 0 -4px 16px rgba(16,24,40,.1);
  padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom));
  gap: .5rem;
}
.mobile-cta .btn { flex: 1; padding: .85rem .5rem; font-size: .9375rem; }
@media (max-width: 860px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 74px; }
}

/* --- Prose (legal pages) -------------------------------------------------- */
.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.35rem, 2.4vw, 1.6rem); }
.prose h3 { margin-top: 1.75rem; }
.prose ul { padding-left: 1.35rem; }
.prose li { margin-bottom: .5rem; }

/* --- Misc ---------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.stack > * + * { margin-top: 1rem; }
.divider { height: 1px; background: var(--gray-200); border: 0; margin: 0; }

/* --- Internal review markers ----------------------------------------------
   The placeholders left in the markup are working notes for the site owner,
   not content for visitors. They stay in the HTML so nothing is silently
   forgotten, but they are hidden on the live site. Append ?review to any URL
   to bring them back while the real details are being filled in.
   -------------------------------------------------------------------------- */
.pending,
.pending-block,
.quote:has(.pending),
.project__meta div:has(.pending) { display: none; }

body.review-mode .pending { display: inline-block; }
body.review-mode .pending-block,
body.review-mode .quote:has(.pending),
body.review-mode .project__meta div:has(.pending) { display: block; }

/* --- Drive-time map -------------------------------------------------------
   The chart is placed by compass bearing and drive time, so it stays truthful
   without pretending to be a road map. The list beside it carries the same
   data as text: on a narrow screen the chart would shrink past legibility,
   so it scrolls in its own track while the list keeps the information.
   -------------------------------------------------------------------------- */
.drivemap-figure {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.drivemap-figure__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr);
  gap: 2rem;
  align-items: start;
}
.drivemap-figure__map { overflow-x: auto; }
.drivemap-figure__map .drivemap { display: block; width: 100%; min-width: 560px; height: auto; }

.drivemap-figure__list h3 {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: .75rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gray-700);
  margin: 1.5rem 0 .6rem;
}
.drivemap-figure__list h3:first-child { margin-top: 0; }
.drivemap-figure__list .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.drivemap-figure__list .dot--core { background: var(--amber); }
.drivemap-figure__list .dot--mid  { background: var(--blue); }
.drivemap-figure__list .dot--far  { background: var(--gray-700); }

.drivemap-figure__list ul { list-style: none; margin: 0; padding: 0; }
.drivemap-figure__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .4rem 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: .9375rem; color: var(--navy);
}
.drivemap-figure__list li:last-child { border-bottom: 0; }
.drivemap-figure__list li span:last-child {
  font-variant-numeric: tabular-nums;
  font-size: .8125rem; color: var(--gray); white-space: nowrap;
}

@media (max-width: 860px) {
  .drivemap-figure { padding: 1.15rem; }
  .drivemap-figure__grid { grid-template-columns: 1fr; gap: 1.5rem; }
}