/* ==========================================================================
   S. MOREY DESIGN & CONSTRUCTION — STYLESHEET
   Design tokens live in :root. Update the palette there once a final
   brand system is locked in — every color on the page reads from these
   variables, nothing is hardcoded elsewhere.
   ========================================================================== */

:root {
  /* Warm architectural neutrals */
  --color-ivory: #f7f6f2;         /* primary light background, clean warm off-white */
  --color-ivory-deep: #eeece5;    /* slightly deeper ivory for section alternation */
  --color-stone: #ddd9d0;         /* soft concrete / stone */
  --color-taupe: #a99c86;         /* muted taupe, used sparingly for rules/labels */
  --color-graphite: #4a463f;      /* warm graphite, secondary text on light */
  --color-charcoal: #211f1c;      /* deep warm charcoal, dark sections + primary text */
  --color-charcoal-soft: #2c2925; /* charcoal, one step lighter — panel-on-panel contrast */

  /* Brand colors — sampled directly from the logo artwork (PMS 300 blue /
     PMS 186 red), so the site's accent system actually matches the mark. */
  --color-blue: #0068b2;       /* logo blue — primary action color: buttons, active states, icon badges */
  --color-blue-deep: #00558e;  /* hover/pressed state for blue */
  --color-red: #c8102e;        /* logo red — secondary accent: eyebrows, thin rules, small highlights */
  --color-red-deep: #a20f26;
  --color-red-light: #e8556a;  /* brightened (not pastel) logo red, for small text on charcoal */

  /* Semantic aliases */
  --color-bg: var(--color-ivory);
  --color-bg-alt: var(--color-ivory-deep);
  --color-bg-dark: var(--color-charcoal);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-graphite);
  --color-text-on-dark: var(--color-ivory);
  --color-text-on-dark-muted: #c9c2b5;
  --color-text-on-blue-muted: #d9e6f0; /* muted body copy on the blue hero background */
  --color-border: rgba(33, 31, 28, 0.12);
  --color-border-on-dark: rgba(246, 243, 238, 0.16);
  --color-error: #d94f4f;

  /* Bold, condensed structural sans — echoes the logo's own extended-caps
     wordmark instead of sitting against it as a quiet editorial serif. */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container-max: 1320px;
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, blockquote, p {
  margin: 0;
  font-weight: 400;
}

/* Keeps the last line of a paragraph from stranding a single short word
   (browsers without support just wrap normally, no downside). */
p { text-wrap: pretty; }

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

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

/* ==========================================================================
   SHARED EDITORIAL UTILITIES
   ========================================================================== */

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

@media (min-width: 768px) {
  .container { padding-inline: 2.5rem; }
}
@media (min-width: 1280px) {
  .container { padding-inline: 3.5rem; }
}

.eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: 1.5rem;
}

.eyebrow--on-dark { color: var(--color-red-light); }
.eyebrow--on-accent { color: var(--color-ivory); }

/* Marks genuinely-missing client info (phone, email, license #) as an
   intentional fill-in-the-blank rather than broken/leftover text. */
.placeholder-note { font-style: italic; opacity: 0.75; }

/* Keeps a hyphenated phrase from breaking at the hyphen when a heading wraps. */
.nobreak { white-space: nowrap; }

/* Shared "one more nudge to act" button, dropped at the end of a content
   section rather than only at the top/bottom of the page. */
.section-cta { margin-top: 3rem; }
#experience .section-cta { text-align: center; }

/* Blueprint grid: a faded technical drawing grid, applied to a section as
   a texture, not a decoration you're meant to notice directly. */
.blueprint-grid { position: relative; }
.blueprint-grid > * { position: relative; z-index: 1; }
.blueprint-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image:
    repeating-linear-gradient(0deg, var(--color-blue) 0, var(--color-blue) 1px, transparent 1px, transparent 48px),
    repeating-linear-gradient(90deg, var(--color-blue) 0, var(--color-blue) 1px, transparent 1px, transparent 48px);
}

.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0.35);
  transform-origin: left;
  opacity: 0.5;
  transition: transform 0.4s var(--ease-editorial), opacity 0.4s var(--ease-editorial);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem 2.25rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9375rem;
  letter-spacing: 0.03em;
  border: 2px solid transparent;
  transition: background-color 0.3s var(--ease-editorial), color 0.3s var(--ease-editorial), border-color 0.3s var(--ease-editorial), transform 0.3s var(--ease-editorial);
}
.btn:hover { transform: translateY(-1px); }

/* Primary action color — the logo's blue, used consistently for every
   main call-to-action across the page (the site's one bold "go" color). */
.btn-primary {
  background: var(--color-blue);
  color: var(--color-ivory);
  border-color: var(--color-blue);
}
.btn-primary:hover { background: var(--color-blue-deep); border-color: var(--color-blue-deep); }

.btn-primary-on-dark {
  background: var(--color-blue);
  color: var(--color-ivory);
  border-color: var(--color-blue);
}
.btn-primary-on-dark:hover { background: var(--color-blue-deep); border-color: var(--color-blue-deep); }

.btn-outline {
  background: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-charcoal);
}
.btn-outline:hover { background: var(--color-charcoal); color: var(--color-ivory); }

.btn-outline-on-dark {
  background: transparent;
  color: var(--color-ivory);
  border-color: var(--color-border-on-dark);
}
.btn-outline-on-dark:hover { border-color: var(--color-ivory); background: rgba(246,243,238,0.06); }

/* Editorial reveal-on-scroll: fade + rise + a touch of scale, so motion
   actually reads while scrolling instead of just quietly appearing.
   No-op under reduced motion. */
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  transition: opacity 0.7s var(--ease-editorial), transform 0.7s var(--ease-editorial);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hero photo: subtle parallax drift as the page scrolls (JS-driven,
   translateY only — skipped entirely under reduced motion). */
.hero__media img { will-change: transform; }

.img-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-stone);
}
.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-editorial);
}
.img-frame:hover img { transform: scale(1.035); }
@media (prefers-reduced-motion: reduce) {
  .img-frame:hover img { transform: none; }
}

/* Abstract architectural placeholder (used only where a real photo is
   still missing — see Steve's portrait). */
.img-placeholder {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-stone) 0%, var(--color-ivory-deep) 100%);
}
.img-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(33,31,28,0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(33,31,28,0.06) 40px);
}
.img-placeholder--dark { background: linear-gradient(135deg, #35322c 0%, #23211d 100%); }
.img-placeholder .corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(33, 31, 28, 0.25);
  border-left: 1px solid rgba(33, 31, 28, 0.25);
}
.img-placeholder--dark .corner { border-color: rgba(246, 243, 238, 0.35); }
.img-placeholder .corner--tl { top: 1rem; left: 1rem; }
.img-placeholder .corner--tr { top: 1rem; right: 1rem; transform: scaleX(-1); }
.img-placeholder .corner--bl { bottom: 1rem; left: 1rem; }
.img-placeholder .corner--br { bottom: 1rem; right: 1rem; transform: scaleX(-1); }
.img-placeholder .label {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 1rem 1.5rem;
  color: var(--color-graphite);
}
.img-placeholder--dark .label { color: var(--color-text-on-dark-muted); }

/* Aspect-ratio helpers */
.aspect-1-1 { aspect-ratio: 1 / 1; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-3-4 { aspect-ratio: 3 / 4; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-16-10 { aspect-ratio: 16 / 10; }
.aspect-21-9 { aspect-ratio: 21 / 9; }

/* ==========================================================================
   HEADER
   ========================================================================== */

/* Always solid and legible — a transparent header crossfading to white
   text only works over a full-bleed photo hero. This hero is split
   (text panel + photo), so a transparent bar would sit on top of the
   light panel too and become unreadable. Simpler and more robust: the
   header never depends on what happens to be behind it. */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  background: rgba(246, 243, 238, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-border);
  border-top: 4px solid var(--color-red);
  transition: box-shadow 0.3s var(--ease-editorial);
}
.site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(33, 31, 28, 0.06);
}

/* The header is fixed (not part of normal flow), so any section jumped to
   by an anchor link needs this clearance or the header covers its top. */
#top, #teaser, #services, #experience, #about, #reviews, #contact {
  scroll-margin-top: 6.5rem;
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}
@media (min-width: 768px) { .site-header__bar { height: 6rem; } }

.site-header__logo {
  position: relative;
  display: block;
  height: 2.25rem;
  width: 168px;
}
@media (min-width: 768px) { .site-header__logo { height: 2.75rem; width: 205px; } }
.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

.site-header__nav {
  display: none;
  align-items: center;
  gap: 2.25rem;
}
@media (min-width: 768px) { .site-header__nav { display: flex; } }
.site-header__nav a.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-charcoal);
}

.site-header__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  padding-inline: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-charcoal);
}
@media (min-width: 768px) { .site-header__menu-toggle { display: none; } }
.menu-toggle__label--close { display: none; }
.site-header.is-menu-open .menu-toggle__label--open { display: none; }
.site-header.is-menu-open .menu-toggle__label--close { display: inline; }

.mobile-menu {
  display: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-ivory);
}
.mobile-menu.is-open { display: block; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 0.25rem; padding-block: 1.5rem; }
.mobile-menu a.nav-link-mobile {
  border-bottom: 1px solid var(--color-border);
  padding-block: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--color-charcoal);
}
.mobile-menu .btn { margin-top: 1.5rem; justify-content: center; }

/* ==========================================================================
   HERO — split composition: headline panel + full-height photo panel
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-blue);
}
@media (min-width: 900px) {
  /* Side-by-side split: text panel on the left, photo panel on the
     right — each an ordinary grid cell (no absolute positioning, no
     clip-path), so the section's height is just whatever its content
     needs rather than a rigid 100vh. That also means it can never
     silently clip content on a short browser window. */
  .hero { grid-template-columns: minmax(360px, 42%) 1fr; min-height: 36rem; }
}

.hero__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-blue);
  color: var(--color-ivory);
  padding-top: 8rem;
  padding-bottom: 1.75rem;
}
@media (min-width: 900px) {
  /* flex-start + a fixed, generous top padding (not justify-content:
     center) so the heading always clears the fixed header by a safe
     margin regardless of viewport height. The header is fixed/overlaid
     (not pushed down by any body padding), so on a short browser
     window centering the text block can land its top edge behind the
     header — this guarantees it never does. */
  .hero__text { justify-content: flex-start; padding: 7.5rem 3rem 3rem; }
}
@media (min-width: 1280px) {
  .hero__text { padding-inline: 3.5rem; }
}

.hero__text .inner { max-width: 30rem; margin-inline: 0; }
@media (max-width: 899px) {
  /* Nudges the stacked mobile layout's content right and down a bit,
     away from the very edge/top. */
  .hero__text { padding-top: calc(9.5rem + 5px); }
  .hero__text .inner { padding-left: calc(0.75rem + 20px); }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 3rem;
  line-height: 0.98;
  color: var(--color-ivory);
}
@media (min-width: 480px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 900px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 1200px) { .hero h1 { font-size: 4.25rem; } }

.highlight { color: var(--color-blue); }
.hero .highlight { color: var(--color-red-light); }

.hero p.sub {
  margin-top: 1.75rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-on-blue-muted);
}

.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
}
.hero .btn-primary {
  background: var(--color-ivory);
  color: var(--color-blue);
  border-color: var(--color-ivory);
}
.hero .btn-primary:hover { background: var(--color-text-on-blue-muted); border-color: var(--color-text-on-blue-muted); }

/* Two copies, one per layout: on the stacked mobile layout it lives in
   .hero__media, pinned to the photo's own corner (a stable box there).
   On the side-by-side desktop layout it belongs at the bottom-left of
   the whole section instead, under the text panel — so it lives in
   .hero__text there. Only one is ever shown at a time. */
.hero__scroll-tab {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--color-charcoal);
  color: var(--color-ivory);
  font-size: 2.25rem;
  line-height: 1;
  transition: background-color 0.3s var(--ease-editorial);
}
.hero__scroll-tab:hover { background: var(--color-blue); }

.hero__scroll-tab--text { display: none; }
@media (min-width: 900px) {
  .hero__scroll-tab--text { display: flex; }
  .hero__scroll-tab--media { display: none; }
}

.hero__media {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
}
@media (min-width: 900px) {
  /* An ordinary grid cell now (the row height comes from .hero's own
     min-height), stretched to match the text column's height. */
  .hero__media { min-height: 0; }
}
.hero__media img { width: 100%; height: 130%; object-fit: cover; object-position: center; }
@media (min-width: 900px) {
  /* The source photo is mostly open sky with the building + palm tree
     concentrated in the lower-right — bias the crop there instead of
     a dead-center crop that's almost all empty sky. */
  .hero__media img { object-position: 75% 100%; }
}

/* ==========================================================================
   QUICK INQUIRY BAR — low-friction lead capture right below the hero
   ========================================================================== */

.quick-cta { background: var(--color-charcoal); }
.quick-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-block: 1.75rem;
}
@media (min-width: 768px) {
  .quick-cta__inner { flex-direction: row; align-items: center; gap: 2.5rem; }
}
.quick-cta__prompt {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.375rem;
  color: var(--color-ivory);
  flex-shrink: 0;
}

.quick-cta__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
@media (min-width: 560px) {
  .quick-cta__form { flex-direction: row; align-items: flex-start; }
}
@media (min-width: 768px) {
  .quick-cta__form { max-width: 40rem; margin-left: auto; }
}

.quick-cta__select-wrap { position: relative; flex: 1; min-width: 0; }
.quick-cta__select-wrap::after {
  content: "\2193";
  position: absolute;
  right: 0;
  bottom: 0.95rem;
  color: var(--color-text-on-dark-muted);
  font-size: 0.75rem;
  pointer-events: none;
}
.quick-cta__select-wrap select {
  width: 100%;
  padding-block: 0.85rem;
  padding-right: 1.25rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-on-dark);
  color: var(--color-ivory);
  font-family: inherit;
  font-size: 1rem;
  border-radius: 0;
  appearance: none;
}
.quick-cta__select-wrap select:invalid,
.quick-cta__select-wrap select option[value=""] { color: var(--color-text-on-dark-muted); }
.quick-cta__select-wrap select:focus { outline: none; border-bottom-color: var(--color-ivory); }

.quick-cta__field { flex: 1; min-width: 0; }
.quick-cta__field input {
  width: 100%;
  padding-block: 0.85rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border-on-dark);
  color: var(--color-ivory);
  font-family: inherit;
  font-size: 1rem;
  border-radius: 0;
  appearance: none;
}
.quick-cta__field input::placeholder { color: var(--color-text-on-dark-muted); }
.quick-cta__field input:focus { outline: none; border-bottom-color: var(--color-ivory); }
.quick-cta__field.has-error input { border-bottom-color: var(--color-error); }
.quick-cta__field .form-error { color: var(--color-red-light); }
.quick-cta__field.has-error .form-error { display: block; }

.quick-cta__form .btn { flex-shrink: 0; }

.quick-cta__success {
  display: none;
  max-width: 30rem;
  margin-left: auto;
}
.quick-cta__success.is-visible { display: block; }
.quick-cta__success p { font-size: 0.9375rem; color: var(--color-text-on-dark-muted); }
.quick-cta.is-submitted .quick-cta__form { display: none; }

/* ==========================================================================
   SERVICES TEASER — full-bleed blue color block, image + bullets + CTA
   ========================================================================== */

.teaser {
  background: var(--color-blue);
  color: var(--color-ivory);
}
.teaser .grid {
  display: grid;
}
@media (min-width: 900px) {
  .teaser .grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.teaser__media { position: relative; min-height: 20rem; overflow: hidden; background: var(--color-ivory); }
@media (min-width: 900px) { .teaser__media { min-height: 100%; } }
.teaser__media img { width: 100%; height: 100%; object-fit: cover; }

.teaser__content {
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) { .teaser__content { padding: 3rem 2.5rem; } }
@media (min-width: 900px) { .teaser__content { padding: 3rem 4rem; } }
@media (min-width: 1280px) { .teaser__content { padding: 3rem 4.5rem; } }

.teaser h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 2rem;
  line-height: 0.98;
  color: var(--color-ivory);
  max-width: 28rem;
}
@media (min-width: 640px) { .teaser h2 { font-size: 2.5rem; } }
@media (min-width: 768px) { .teaser h2 { font-size: 2.75rem; } }

.teaser p.body {
  margin-top: 1.25rem;
  max-width: 28rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ivory);
}

.teaser__list {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.5rem;
  max-width: 26rem;
}
.teaser__list li {
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  color: var(--color-ivory);
}
.teaser__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--color-ivory);
}

.teaser .btn { margin-top: 1.75rem; align-self: flex-start; }

/* ==========================================================================
   SECTION HEADINGS (shared)
   ========================================================================== */

.section-header {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}
.section-header .eyebrow { display: inline-block; }
h2.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 2.25rem;
  line-height: 0.98;
  color: var(--color-charcoal);
}
@media (min-width: 640px) { h2.section-title { font-size: 2.75rem; } }
@media (min-width: 768px) { h2.section-title { font-size: 3.5rem; } }
.section-header p.lede {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

.section-intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
}
@media (min-width: 768px) { .section-intro { flex-direction: row; align-items: flex-end; } }
.section-intro p.lede {
  max-width: 24rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}

/* ==========================================================================
   SERVICES (numbered list)
   ========================================================================== */

.services { background: var(--color-bg-alt); padding-block: 5rem; }
@media (min-width: 768px) { .services { padding-block: 7rem; } }

/* Horizontal scroll carousel — used for the Services list and the
   Industries breakdown. Native scroll-snap so it works identically with
   a trackpad, a mouse-drag, or a finger on touch, plus two buttons for
   anyone who'd rather click. */
.scroll-carousel { margin-top: 3rem; }
.scroll-carousel__track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1.5rem;
  padding-bottom: 0.5rem;
  margin: 0 -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroll-carousel__track::-webkit-scrollbar { display: none; }

.scroll-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 78vw;
  max-width: 320px;
  padding: 2rem 1.75rem;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-top: 4px solid var(--color-blue);
}
@media (min-width: 640px) { .scroll-card { width: 300px; } }

.scroll-card__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--color-blue);
}
.scroll-card__name {
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--color-charcoal);
}
.scroll-card__desc { margin-top: 0.9rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); }

.tag-list {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.tag-list li {
  padding: 0.55rem 0.9rem;
  border: 2px solid var(--color-border);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--color-text-muted);
  transition: border-color 0.3s var(--ease-editorial), color 0.3s var(--ease-editorial), background-color 0.3s var(--ease-editorial);
}
.tag-list li:hover {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: var(--color-ivory);
}

.scroll-carousel__controls { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.scroll-carousel__btn {
  width: 3rem;
  height: 3rem;
  border: 2px solid var(--color-border);
  background: transparent;
  font-size: 1.25rem;
  color: var(--color-charcoal);
  transition: background-color 0.25s var(--ease-editorial), color 0.25s var(--ease-editorial), border-color 0.25s var(--ease-editorial);
}
.scroll-carousel__btn:hover { background: var(--color-blue); border-color: var(--color-blue); color: var(--color-ivory); }

/* ==========================================================================
   MODERN APPROACH / VALUE ENGINEERING — dark section, heading+CTA + icon grid
   ========================================================================== */

.approach { position: relative; overflow: hidden; background: var(--color-bg-dark); padding-block: 5rem; }
@media (min-width: 768px) { .approach { padding-block: 7rem; } }

.approach__media { position: absolute; inset: 0; z-index: 0; }
.approach__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.approach__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,19,17,0.92) 0%, rgba(20,19,17,0.75) 45%, rgba(20,19,17,0.94) 100%);
}

.approach > .container { position: relative; z-index: 1; }

.approach__top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: space-between;
}
@media (min-width: 900px) { .approach__top { flex-direction: row; align-items: flex-end; } }

.approach h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 2.25rem;
  line-height: 0.98;
  color: var(--color-ivory);
  max-width: 36rem;
}
@media (min-width: 640px) { .approach h2 { font-size: 2.75rem; } }
@media (min-width: 768px) { .approach h2 { font-size: 3.25rem; } }

.approach p.body {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-on-dark-muted);
}

.approach__top .btn { flex-shrink: 0; padding: 1.5rem 3rem; font-size: 1.0625rem; }

.approach__grid {
  margin-top: 4rem;
  display: grid;
  gap: 3rem 2.5rem;
  border-top: 1px solid var(--color-border-on-dark);
  padding-top: 3rem;
}
@media (min-width: 640px) { .approach__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .approach__grid { grid-template-columns: repeat(4, 1fr); } }

.approach-step { display: flex; flex-direction: column; }

/* A small measurement mark instead of a numeral, one blueprint accent
   repeated at a scale that reads as a system, not a decoration. */
.dim-divider {
  display: block;
  width: 2.5rem;
  height: 0.5rem;
  border-left: 2px solid var(--color-blue);
  border-right: 2px solid var(--color-blue);
  border-bottom: 2px solid var(--color-blue);
}
.approach-step h3 { margin-top: 1rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.375rem; color: var(--color-ivory); }
.approach-step p { margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.65; color: var(--color-text-on-dark-muted); }

/* ==========================================================================
   EXPERIENCE
   ========================================================================== */

.experience { background: var(--color-bg); padding-block: 5rem; }
@media (min-width: 768px) { .experience { padding-block: 7rem; } }

/* Two cards per row, so each one has room for its full tag list to wrap
   comfortably instead of squeezing into a narrow scroll-card. */
.industry-grid {
  margin-top: 3rem;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 640px) { .industry-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }

.industry-card {
  padding: 2rem 1.75rem;
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-top: 4px solid var(--color-blue);
}
.industry-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--color-charcoal);
}
.industry-card .tag-list { margin-top: 1.25rem; }

/* ==========================================================================
   REPEAT CTA BAND
   ========================================================================== */

.repeat-cta { background: var(--color-blue); }
.repeat-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
  padding-block: 2rem;
}
@media (min-width: 640px) {
  .repeat-cta__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.repeat-cta__prompt {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  color: var(--color-ivory);
}
.repeat-cta .btn-primary {
  background: var(--color-ivory);
  color: var(--color-charcoal);
  border-color: var(--color-ivory);
}
.repeat-cta .btn-primary:hover { background: transparent; color: var(--color-ivory); }

/* ==========================================================================
   ABOUT STEVE
   ========================================================================== */

.about { background: var(--color-bg-alt); padding-block: 5rem; }
@media (min-width: 768px) { .about { padding-block: 7rem; } }
.about .grid { display: grid; gap: 3.5rem; }
@media (min-width: 768px) { .about .grid { grid-template-columns: 0.85fr 1.15fr; gap: 5rem; } }

/* Offset backdrop card behind Steve's photo, in the page's base ivory
   (a shade lighter than this section's alt background) so the portrait
   reads as layered rather than flat against the section. */
/* align-self: start keeps this sized to the photo itself rather than
   stretching to match the text column's height (a grid row stretches
   to its tallest item by default) — otherwise the backdrop card, which
   is offset from this box's own edges, stretches into blank space
   whenever the bio copy runs long. */
.about__portrait { position: relative; align-self: start; }
.about__portrait::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: -2rem;
  right: 3.25rem;
  bottom: 3.25rem;
  background: #fff;
  box-shadow: 0 1.5rem 3rem rgba(33, 31, 28, 0.14);
  z-index: 0;
}
.about__portrait .img-frame { position: relative; z-index: 1; }
.about h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 2.25rem;
  line-height: 0.98;
  color: var(--color-charcoal);
}
@media (min-width: 640px) { .about h2 { font-size: 2.75rem; } }
@media (min-width: 768px) { .about h2 { font-size: 3.25rem; } }
.about__body {
  margin-top: 2rem;
  max-width: 36rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.about__body p.muted { color: var(--color-graphite); }
.about__quote { margin-top: 2.5rem; border-left: 4px solid var(--color-red); padding-left: 1.5rem; }
.about__quote p {
  font-family: var(--font-sans);
  font-style: italic;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--color-charcoal);
}
@media (min-width: 768px) { .about__quote p { font-size: 1.5rem; } }

/* ==========================================================================
   REVIEWS — real reviews pulled from S. Morey's Google Business Profile,
   styled to read as Google reviews (gold stars, "G" mark, the actual
   aggregate rating/count). This is a static snapshot of real content, not
   placeholder copy — swap the cards below for the live Google Reviews
   plugin feed once GBP API access is set up; no rush, the content here
   is already genuine.
   ========================================================================== */

.reviews { background: var(--color-bg); padding-block: 5rem; }
@media (min-width: 768px) { .reviews { padding-block: 7rem; } }

.reviews__layout {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 900px) {
  .reviews__layout { flex-direction: row; align-items: flex-start; gap: 3.5rem; }
}

.reviews__summary {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .reviews__summary { flex-direction: column; align-items: flex-start; width: 11rem; gap: 0.4rem; }
}
.reviews__summary-rating {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-charcoal);
}
.reviews__summary-stars { color: #fbbc04; font-size: 1.25rem; letter-spacing: 0.08em; }
.reviews__summary-count { font-size: 0.9375rem; color: var(--color-text-muted); }
.reviews__summary-count strong { color: var(--color-charcoal); }
.reviews__summary-google {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}
.reviews__summary-google svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }

.reviews__carousel { margin-top: 0; flex: 1 1 auto; min-width: 0; }

.review-card { display: flex; flex-direction: column; }
.review-card__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.review-card__avatar {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: #fff;
}
.review-card__who { flex: 1 1 auto; min-width: 0; }
.review-card__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.25;
  color: var(--color-charcoal);
}
.review-card__meta { font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.review-card__google-mark { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: 0.15rem; }
.review-card__stars { margin-top: 0.9rem; color: #fbbc04; font-size: 0.9375rem; letter-spacing: 0.08em; }
.review-card__text { margin-top: 0.75rem; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text-muted); }

/* ==========================================================================
   SERVICE AREA
   ========================================================================== */

.service-area {
  position: relative;
  overflow: hidden;
  background: var(--color-charcoal);
  padding-block: 6rem;
}
@media (min-width: 768px) { .service-area { padding-block: 9rem; } }

.service-area__media { position: absolute; inset: 0; }
.service-area__media img { width: 100%; height: 100%; object-fit: cover; }
.service-area__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,19,17,0.72) 0%, rgba(20,19,17,0.55) 50%, rgba(20,19,17,0.8) 100%);
}

.service-area__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.service-area h2 {
  max-width: 44rem;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 2.5rem;
  line-height: 0.98;
  color: var(--color-ivory);
}
@media (min-width: 640px) { .service-area h2 { font-size: 3.25rem; } }
@media (min-width: 768px) { .service-area h2 { font-size: 4rem; } }
.service-area p.body { margin-top: 1.5rem; max-width: 34rem; font-size: 1.1875rem; line-height: 1.65; color: var(--color-text-on-dark-muted); }
.service-area p.cities { margin-top: 2rem; max-width: 62rem; font-size: 1.0625rem; line-height: 1.75; color: var(--color-taupe); }
@media (min-width: 1024px) { .service-area p.cities { font-size: 1.125rem; } }

/* ==========================================================================
   CONTACT — heading/info + in-section nav strip + image, then form
   ========================================================================== */

.contact-intro { background: var(--color-bg-alt); }
.contact-intro .grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact-intro .grid { grid-template-columns: 1fr 1fr; } }

.contact-intro__text {
  padding: 4rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 768px) { .contact-intro__text { padding: 5rem 2.5rem 3.5rem; } }
@media (min-width: 900px) { .contact-intro__text { padding: 5rem 4rem 3.5rem; } }

.contact-intro h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  font-size: 2.5rem;
  line-height: 0.98;
  color: var(--color-charcoal);
}
@media (min-width: 640px) { .contact-intro h2 { font-size: 3rem; } }
@media (min-width: 768px) { .contact-intro h2 { font-size: 3.5rem; } }
.contact-intro p.body { margin-top: 1.5rem; max-width: 26rem; font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-muted); }
.contact-intro .btn { margin-top: 2rem; align-self: flex-start; }

.contact-intro__media { position: relative; min-height: 18rem; }
@media (min-width: 900px) { .contact-intro__media { min-height: 100%; } }
.contact-intro__media img { width: 100%; height: 100%; object-fit: cover; }

.contact-form-section { background: var(--color-bg); padding-block: 5rem; }
@media (min-width: 768px) { .contact-form-section { padding-block: 6.5rem; } }
.contact-form-section .inner { max-width: 42rem; margin-inline: auto; }
.contact-form-section .section-header { margin-bottom: 3.5rem; }

.contact-form { display: grid; gap: 1.75rem 2rem; }
@media (min-width: 640px) { .contact-form { grid-template-columns: repeat(2, 1fr); } }
.form-field { display: flex; flex-direction: column; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-graphite); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding-block: 0.75rem;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-charcoal);
  font-family: inherit;
  font-size: 1rem;
  border-radius: 0;
  appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-taupe); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-bottom-color: var(--color-charcoal); }
.form-field.has-error input,
.form-field.has-error textarea { border-bottom-color: var(--color-error); }
.form-error { margin-top: 0.5rem; font-size: 0.875rem; color: var(--color-error); display: none; }
.form-field.has-error .form-error { display: block; }
.contact-form .submit-row { grid-column: 1 / -1; }
.contact-form button.btn { margin-top: 0.5rem; }

.form-success { display: none; border-top: 1px solid var(--color-border); padding-block: 4rem; text-align: center; }
.form-success.is-visible { display: block; }
.form-success h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; color: var(--color-charcoal); }
@media (min-width: 768px) { .form-success h3 { font-size: 1.875rem; } }
.form-success p { margin: 1rem auto 0; max-width: 26rem; font-size: 1.0625rem; line-height: 1.65; color: var(--color-text-muted); }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer { background: var(--color-charcoal); padding-block: 4rem; }
.site-footer__top {
  display: grid;
  gap: 2.5rem;
  border-bottom: 1px solid var(--color-border-on-dark);
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .site-footer__top { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 1.1fr 0.8fr 0.9fr 0.9fr; }
}
.site-footer__logo { display: block; height: 2.5rem; width: 190px; }
.site-footer__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.site-footer__desc { margin-top: 1rem; max-width: 20rem; font-size: 0.875rem; line-height: 1.6; color: var(--color-text-on-dark-muted); }

.site-footer__social { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-border-on-dark);
  color: var(--color-text-on-dark-muted);
  transition: border-color 0.25s var(--ease-editorial), color 0.25s var(--ease-editorial), background-color 0.25s var(--ease-editorial);
}
.site-footer__social-link svg { width: 1.125rem; height: 1.125rem; }
.site-footer__social-link:hover { border-color: var(--color-blue); background: var(--color-blue); color: var(--color-ivory); }

.site-footer__col h4 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-red-light);
  margin-bottom: 1rem;
}
.site-footer__col nav { display: flex; flex-direction: column; gap: 0.65rem; }
.site-footer__col nav a { font-size: 0.9375rem; color: var(--color-text-on-dark-muted); }
.site-footer__col p { font-size: 0.9375rem; color: var(--color-text-on-dark-muted); overflow-wrap: anywhere; }
.site-footer__col p + p { margin-top: 0.4rem; }
.site-footer__col .license { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--color-taupe); }

.site-footer__bottom {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--color-taupe);
}
@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}