/* ==========================================================================
   MStall Electric Inc. — Base styles (mobile-first)
   Breakpoint overrides live in responsive.css.

    1. Variables
    2. Reset / Base
    3. Typography
    4. Layout
    5. Buttons & Icons
    6. Header
    7. Navigation
    8. Hero
    9. Who We Are
   10. Services
   11. Featured Expertise
   12. Projects
   13. Why MStall
   14. Markets
   15. Service Area
   16. CTA
   17. Footer
   18. Interior Pages
   19. Utilities
   20. Reduced Motion
   ========================================================================== */

/* ==========================================================================
   1. Variables
   ========================================================================== */
:root {
  /* Colors — primary blue sampled from the MStall logo (DESIGN-SYSTEM suggests ~#2F63B8) */
  --color-primary: #0a79b1;
  --color-primary-dark: #08608d;
  --color-primary-light: #9fd3ef;     /* accents on dark backgrounds */
  --color-primary-on-light: #0975ab;  /* primary blue for small text on --color-light (4.6:1; brand blue is 4.35:1 there) */
  --color-charcoal: #20242a;
  --color-charcoal-deep: #171a1f;
  --color-gray: #7a7f87;              /* DESIGN-SYSTEM medium gray (reference; secondary text uses --color-text-muted for contrast) */
  --color-text-muted: #565c65;        /* secondary text on light backgrounds (AA contrast) */
  --color-light: #f2f4f6;
  --color-white: #ffffff;
  --color-border: #e2e5e9;
  --color-divider: #d5d9de;
  --color-on-dark-muted: rgba(255, 255, 255, .88);
  --color-footer-text: #c9cdd2;
  --color-footer-muted: #a9aeb5;
  --color-footer-rule: rgba(255, 255, 255, .12);
  --color-input-border: #7a7f87;      /* form control borders (3:1 non-text contrast on white) */
  --color-error: #b42318;             /* form errors (AA on white and light gray) */
  --color-error-bg: #fdf1f0;
  --color-success: #1d6b3a;
  --color-success-bg: #eef7f1;
  --overlay-rgb: 14 18 24;            /* photo overlays: rgb(var(--overlay-rgb) / alpha) */

  /* Typography */
  --font-family: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-h1: clamp(2.25rem, 1rem + 4.2vw, 5.5rem);
  --font-size-h2: clamp(2rem, 1.1rem + 3vw, 4rem);
  --font-size-h3: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
  --font-size-feature: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --font-size-lead: 1.0625rem;
  --font-size-body: 1rem;
  --font-size-small: .875rem;
  --font-size-label: .8125rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.65;
  --line-height-heading: 1.1;
  --tracking-label: .14em;

  /* Spacing */
  --space-2xs: 6px;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-md: 20px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 40px;
  --space-3xl: 56px;
  --space-4xl: 64px;
  --section-space: clamp(56px, 4rem + 4vw, 128px);

  /* Layout */
  --container: 1320px;
  --gutter: 20px;
  --header-h: 72px;
  --radius: 4px;
  --radius-button: 3px;
  --control-h: 52px;

  /* Effects */
  --shadow-header: 0 4px 18px rgba(20, 26, 34, .06);
  --shadow-menu: 0 16px 30px rgba(20, 26, 34, .12);
  --ease: cubic-bezier(.2, .6, .2, 1);
  --transition-speed: 250ms;
  --transition-speed-slow: 400ms;

  --focus-color: var(--color-primary);
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */

/* Local Arial scaled to Inter's metrics. Shown only until the Inter web font arrives, so the text
   occupies the same space and does not reflow (layout shift) when Inter swaps in. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  ascent-override: 90.49%;
  descent-override: 22.56%;
  line-gap-override: 0%;
  size-adjust: 107.06%;
}

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

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

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-charcoal);
  background: var(--color-white);
}

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

h1, h2, h3, p, ul, figure {
  margin: 0;
}

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

a {
  color: var(--color-primary);
}

address {
  font-style: normal;
}

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

/* Light focus ring on dark backgrounds */
.hero,
.expertise,
.cta,
.site-footer {
  --focus-color: var(--color-white);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */
h1, h2, h3 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}

h1 {
  font-size: var(--font-size-h1);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--font-size-h2);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--font-size-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.eyebrow {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.eyebrow-light {
  color: var(--color-primary-light);
}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section-alt {
  background: var(--color-light);
}

/* Small blue text on the light-gray background meets WCAG AA contrast (hover states below still apply) */
.section-alt :is(.eyebrow, .text-link, .company-detail a, figcaption) {
  color: var(--color-primary-on-light);
}

.section-header {
  max-width: 820px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section-header-split {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: none;
}

.section-intro {
  margin-top: var(--space-md);
  max-width: 720px;
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

.card-grid {
  display: grid;
  gap: var(--space-lg);
}

/* Fixed-ratio photo frame: any photo size/orientation is cropped to fit.
   Set a focal point per image with style="--focal: 30% 60%" when needed. */
.card-media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-charcoal);
}

.card-media > picture {
  display: block;
  height: 100%;
}

.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transition: transform var(--transition-speed-slow) var(--ease);
}

/* ==========================================================================
   5. Buttons & Icons
   ========================================================================== */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: var(--control-h);
  padding: 12px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  font: inherit;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--transition-speed) var(--ease),
    border-color var(--transition-speed) var(--ease),
    color var(--transition-speed) var(--ease);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background: var(--color-primary-dark);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, .85);
  color: var(--color-white);
}

.btn-outline-light:hover {
  background: var(--color-white);
  color: var(--color-charcoal);
}

.btn-arrow {
  transition: transform var(--transition-speed) var(--ease);
}

.btn:hover .btn-arrow,
.text-link:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.text-link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ==========================================================================
   6. Header
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid transparent;
  transition:
    box-shadow var(--transition-speed) var(--ease),
    border-color var(--transition-speed) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-header);
}

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* lets the nav drop to its own row if JS is unavailable */
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  text-decoration: none;
}

.brand-mark {
  width: 44px;
  height: auto;
}

.brand-wordmark {
  width: clamp(150px, 42vw, 250px);
  min-width: 0; /* lets the wordmark shrink to fit a narrow column (footer at ~1024px) instead of overflowing */
  height: auto;
}

/* ==========================================================================
   7. Navigation (mobile / tablet; desktop layout in responsive.css)
   ========================================================================== */

/* Hamburger toggle — only shown once JS is available */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-charcoal);
  cursor: pointer;
}

.js .nav-toggle {
  display: inline-flex;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition:
    transform var(--transition-speed) var(--ease),
    background-color var(--transition-speed) var(--ease);
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before { top: -7px; }
.nav-toggle-bars::after  { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

.primary-nav {
  width: 100%;
}

/* Slide-down panel (JS enabled) */
.js .primary-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: 8px var(--gutter) 28px;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-menu);
}

.js .site-header.nav-open .primary-nav {
  display: block;
}

.nav-list a {
  display: flex;
  align-items: center;
  min-height: var(--control-h);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-charcoal);
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.nav-list a:hover,
.nav-list a[aria-current="page"] {
  color: var(--color-primary);
}

.nav-cta {
  width: 100%;
  margin-top: var(--space-md);
}

/* No-JS fallback: compact, always-visible link row instead of a tall sticky panel */
html:not(.js) .site-header {
  position: relative;
}

html:not(.js) .primary-nav {
  padding-bottom: var(--space-md);
}

html:not(.js) .nav-list {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-md);
}

html:not(.js) .nav-list a {
  min-height: 44px;
  border-bottom: 0;
}

/* ==========================================================================
   8. Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding-block: 72px;
  color: var(--color-white);
  background: var(--color-charcoal);
  isolation: isolate;
}

/* Full-bleed background photos (hero, expertise panels, CTA) */
.hero-media,
.expertise-media,
.cta-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.expertise-media {
  object-position: var(--focal, 50% 50%);
}

/* Keep the field worker (right side of the photo) in frame on narrow screens */
.cta-media {
  object-position: 82% 55%;
}

/* Keep the worker and fixtures (right side of the photo) in frame when cropped */
.hero-media {
  object-position: 80% 40%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(var(--overlay-rgb) / .70) 0%, rgb(var(--overlay-rgb) / .82) 100%);
}

.hero-content > * {
  max-width: 780px;
}

/* Soft shadow keeps text legible where it crosses bright areas of the photo (sky glow, floodlights) */
.hero-content h1,
.hero-services,
.hero-copy {
  text-shadow: 0 1px 2px rgb(var(--overlay-rgb) / .55), 0 0 18px rgb(var(--overlay-rgb) / .65);
}

.hero-content h1 {
  max-width: 940px;
}

.hero-services {
  margin-top: 22px;
  font-size: clamp(1rem, .9rem + .5vw, 1.25rem);
  font-weight: var(--font-weight-medium);
  line-height: 1.5;
}

.hero-services span {
  margin-inline: 4px;
  color: var(--color-primary-light);
}

.hero-copy {
  max-width: 640px;
  margin-top: 18px;
  font-size: var(--font-size-lead);
  color: var(--color-on-dark-muted);
}

.hero .btn-group {
  margin-top: var(--space-xl);
}

/* ==========================================================================
   9. Who We Are
   ========================================================================== */
/* Tighter top spacing directly below the hero */
.intro {
  padding-top: clamp(44px, 1.5rem + 3vw, 84px);
}

.intro-grid {
  display: grid;
  gap: 28px;
}

.intro-body {
  display: grid;
  gap: 18px;
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

/* ==========================================================================
   10. Services
   ========================================================================== */
.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.card-link:focus-visible {
  outline-offset: -3px;
}

.service-card .card-media {
  border-bottom: 1px solid var(--color-border); /* keeps bright photos from bleeding into the white card body */
}

.card-body {
  position: relative;
  flex: 1;
  padding: var(--space-lg) var(--space-lg) var(--space-4xl);
}

.card-icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
}

.card-body h3 {
  margin-bottom: var(--space-xs);
}

.card-body p {
  color: var(--color-text-muted);
}

.card-arrow {
  position: absolute;
  right: var(--space-lg);
  bottom: 22px;
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  transition: transform var(--transition-speed) var(--ease);
}

.card-link:hover h3 {
  color: var(--color-primary);
}

.card-link:hover .card-media img,
.project-card:hover .card-media img {
  transform: scale(1.04);
}

.card-link:hover .card-arrow {
  transform: translateX(5px);
}

/* ==========================================================================
   11. Featured Expertise
   ========================================================================== */
.expertise {
  display: grid;
  background: var(--color-charcoal-deep);
}

.expertise-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: var(--expertise-h, 560px);
  color: var(--color-white);
  isolation: isolate;
  overflow: hidden;
}

.expertise-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(var(--overlay-rgb) / .45) 0%, rgb(var(--overlay-rgb) / .92) 70%);
}

.expertise-content {
  width: 100%;
  max-width: 620px;
  padding: var(--space-4xl) var(--gutter);
}

.expertise-content h3 {
  font-size: var(--font-size-feature);
  line-height: 1.08;
}

.expertise-sub {
  margin: var(--space-xs) 0 18px;
  font-size: 1.125rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-light);
}

.expertise-content p:not(.eyebrow):not(.expertise-sub) {
  margin-bottom: var(--space-sm);
  color: var(--color-on-dark-muted);
}

.expertise-content .btn {
  margin-top: var(--space-sm);
}

/* ==========================================================================
   12. Projects
   ========================================================================== */
.project-card .card-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}

/* Temporary representative examples: subtle label over the image */
.project-card--representative .card-media {
  position: relative;
}

.project-badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: 4px 10px;
  border-radius: var(--radius-button);
  background: rgb(var(--overlay-rgb) / .78);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-white);
}

.project-body {
  padding-top: var(--space-md);
}

.project-market {
  margin-bottom: 8px;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.project-location {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 8px 0 var(--space-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

.project-location .icon {
  color: var(--color-primary);
}

.project-description {
  color: var(--color-text-muted);
}

/* ==========================================================================
   13. Why MStall
   ========================================================================== */
.feature-grid {
  display: grid;
  gap: 36px;
}

.feature-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  color: var(--color-primary);
  stroke-width: 1.5;
}

.feature h3 {
  margin-bottom: var(--space-xs);
}

.feature p {
  color: var(--color-text-muted);
}

/* ==========================================================================
   14. Markets
   ========================================================================== */
.markets .section-header {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.market-grid {
  display: grid;
  border-top: 1px solid var(--color-border);
}

.market {
  display: flex;
  gap: 18px;
  padding-block: 26px;
  border-bottom: 1px solid var(--color-border);
}

.market-icon {
  width: 34px;
  height: 34px;
  color: var(--color-primary);
  stroke-width: 1.5;
}

.market h3 {
  margin-bottom: var(--space-2xs);
  font-size: 1.1875rem;
}

.market p {
  color: var(--color-text-muted);
}

/* ==========================================================================
   15. Service Area
   ========================================================================== */
.area-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

.area-text > p:not(.eyebrow) {
  max-width: 620px;
  margin-top: var(--space-md);
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

.area-map {
  justify-self: center;
  width: min(100%, 340px);
}

.ca-state {
  fill: var(--color-primary);
  stroke: var(--color-white);
  stroke-width: 3;
  stroke-linejoin: round;
}

.area-map figcaption {
  margin-top: 16px;
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* ==========================================================================
   16. CTA
   ========================================================================== */
.cta {
  position: relative;
  padding-block: var(--section-space);
  color: var(--color-white);
  background: var(--color-charcoal);
  isolation: isolate;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 26, 34, .94) 0%, rgba(20, 26, 34, .85) 45%, rgba(8, 72, 110, .78) 100%);
}

.cta-inner {
  display: grid;
  gap: var(--space-xl);
}

.cta-text {
  max-width: 720px;
}

.cta-text > p:not(.eyebrow) {
  margin-top: 18px;
  font-size: var(--font-size-lead);
  color: var(--color-on-dark-muted);
}

/* ==========================================================================
   17. Footer
   ========================================================================== */
.site-footer {
  padding-top: var(--space-4xl);
  background: var(--color-charcoal);
  color: var(--color-footer-text);
  font-size: var(--font-size-body);
}

.footer-grid {
  display: grid;
  gap: var(--space-2xl);
  padding-bottom: 48px;
}

.footer-brand .brand-mark {
  width: 56px;
}

.footer-brand .brand-wordmark {
  width: 220px;
}

.footer-heading {
  margin-bottom: var(--space-sm);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-white);
}

.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-lg);
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--color-footer-text);
  text-decoration: none;
}

.footer-nav a:hover {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-contact li,
.footer-meta li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  padding-block: var(--space-2xs);
}

.footer-contact a {
  color: var(--color-footer-text);
  text-decoration: none;
}

.footer-contact a:hover {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-contact .icon,
.footer-meta .icon {
  margin-top: 3px;
  color: var(--color-primary-light);
}

.footer-bottom {
  padding-block: 22px;
  border-top: 1px solid var(--color-footer-rule);
  font-size: .9375rem;
  color: var(--color-footer-muted);
}

/* ==========================================================================
   18. Interior Pages
   ========================================================================== */

/* Interior hero: same photo + overlay treatment as the homepage hero, shorter */
.hero.page-hero {
  min-height: clamp(460px, 66svh, 560px);
}

.page-hero .hero-content h1 {
  max-width: 860px;
  font-size: clamp(2.25rem, 1rem + 3.6vw, 4.5rem);
}

/* Service detail: alternating image/text sections (column order set in responsive.css) */
.service-detail-grid {
  display: grid;
  gap: var(--space-xl);
}

.service-detail-media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
}

.service-detail-content h2 {
  font-size: var(--font-size-feature);
  line-height: 1.08;
}

.service-detail-lead {
  max-width: 680px;
  margin-top: var(--space-md);
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

.service-detail-lists {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
}

.service-detail-lists h3,
.featured-project-highlights h3,
.market-links h3 {
  margin-bottom: var(--space-2xs);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.detail-list li {
  position: relative;
  padding: var(--space-2xs) 0 var(--space-2xs) 22px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Short blue dash marker, centered on the first line of text */
.detail-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-2xs) + .75em - 1px);
  width: 10px;
  height: 2px;
  background: var(--color-primary);
}

/* Interior hero photo focal point (defaults to the homepage hero crop) */
.page-hero .hero-media {
  object-position: var(--focal, 80% 40%);
}

/* Projects: category filter (revealed by main.js; all cards show without JS) */
.project-filter {
  margin-bottom: clamp(32px, 4vw, 48px);
}

.filter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.filter-btn {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-button);
  background: var(--color-white);
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    background-color var(--transition-speed) var(--ease),
    border-color var(--transition-speed) var(--ease),
    color var(--transition-speed) var(--ease);
}

.filter-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.filter-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}

.filter-status {
  margin-top: var(--space-sm);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.project-empty {
  padding: var(--space-xl);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius);
  background: var(--color-light);
  color: var(--color-text-muted);
}

/* Projects: featured project (reuses the service-detail layout) */
.service-detail-content .project-location {
  margin-top: var(--space-sm);
}

.featured-project-highlights {
  max-width: 680px;
  margin-top: var(--space-2xl);
}

/* Projects: TEMPORARY under-construction message (remove when the portfolio is rebuilt) */
.puc-panel {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

/* Outlined line icon with a short blue accent bar, matching the site's divider accents */
.puc-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius);
  color: var(--color-primary);
}

.puc-icon::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 32px;
  height: 3px;
  background: var(--color-primary);
  transform: translateX(-50%);
}

.puc-icon .icon {
  width: 38px;
  height: 38px;
  stroke-width: 1.5;
}

.puc-panel h2 {
  font-size: var(--font-size-feature);
  line-height: 1.08;
  text-wrap: balance;
}

.puc-copy {
  max-width: 640px;
  margin: var(--space-md) auto 0;
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

/* Buttons stack full-width on phones; side by side from 640px (responsive.css) */
.puc-actions {
  flex-direction: column;
  margin-top: var(--space-2xl);
}

.projects-under-construction .btn-outline-dark {
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}

.projects-under-construction .btn-outline-dark:hover {
  background: var(--color-charcoal);
  color: var(--color-white);
}

.puc-status {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Inline dash stays beside the first word if the label wraps on narrow screens */
.puc-status::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 2px;
  margin-right: var(--space-xs);
  vertical-align: middle;
  background: var(--color-primary);
}

/* Inline row of text links that wraps (Markets: on-page index, related links) */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-xl);
}

/* Markets / About: image-and-text sections (reuse the service-detail layout) */
.market-detail-media,
.about-media {
  position: relative; /* anchors .project-badge; sticky on desktop also anchors it */
}

.market-links {
  margin-top: var(--space-2xl);
}

.market-links h3 {
  margin-bottom: var(--space-xs);
}

/* About: capability blocks (reuse .feature) with the link pinned to the bottom */
.capability {
  display: flex;
  flex-direction: column;
}

.capability p {
  margin-bottom: var(--space-md);
}

/* Block flow (not inline-flex) so the arrow stays beside the last word when the label wraps */
.capability .text-link {
  display: block;
  align-self: flex-start;
  min-height: 0;
  margin-top: auto;
}

.capability .text-link .btn-arrow {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -0.3em;
}

/* About: project execution stages */
.process-list {
  display: grid;
  gap: var(--space-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.process-step {
  position: relative;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-divider);
}

/* Short blue accent on the stage divider */
.process-step::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--color-primary);
}

.process-step-number {
  margin-bottom: var(--space-xs);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-primary);
}

.process-step h3 {
  margin-bottom: var(--space-xs);
}

.process-step p:not(.process-step-number) {
  color: var(--color-text-muted);
}

/* About: safety and coordination emphasis areas */
.approach-list {
  margin-top: var(--space-2xl);
  border-top: 1px solid var(--color-divider);
}

.approach-item {
  display: flex;
  gap: 18px;
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-divider);
}

.approach-icon {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
  stroke-width: 1.5;
}

.approach-item h3 {
  margin-bottom: var(--space-2xs);
  font-size: 1.1875rem;
}

.approach-item p {
  color: var(--color-text-muted);
}

/* About: company information */
.company-grid {
  display: grid;
  gap: var(--space-2xl);
}

.company-intro > p:not(.eyebrow) {
  max-width: 520px;
  margin-top: var(--space-md);
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

.company-details {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--color-divider);
}

.company-detail {
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--color-divider);
}

.company-detail dt {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xs);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.company-detail dt .icon {
  color: var(--color-primary);
}

.company-detail dd {
  margin: 0;
  font-size: var(--font-size-lead);
  font-weight: var(--font-weight-medium);
  overflow-wrap: anywhere;
}

.company-detail a {
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.company-detail a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Contact: contact details (left) + inquiry form (right) — columns set in responsive.css */
.contact-grid {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}

.contact-info h2 {
  font-size: var(--font-size-feature);
  line-height: 1.08;
}

.contact-intro {
  max-width: 520px;
  margin: var(--space-md) 0 var(--space-xl);
  font-size: var(--font-size-lead);
  color: var(--color-text-muted);
}

.inquiry-panel {
  padding: clamp(24px, 1rem + 2.5vw, 48px);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius);
  background: var(--color-light);
}

.inquiry-panel h2 {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.15;
}

.inquiry-intro {
  margin-top: var(--space-xs);
  color: var(--color-text-muted);
}

.form-note {
  margin-bottom: var(--space-md);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

.form-grid {
  display: grid;
  gap: var(--space-md);
}

.form-field label {
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
}

.form-required {
  color: var(--color-error);
}

.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 12px 14px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius-button);
  background: var(--color-white);
  color: var(--color-charcoal);
  font: inherit;
  font-size: var(--font-size-body); /* 16px keeps iOS from zooming on focus */
  line-height: 1.4;
  transition: border-color var(--transition-speed) var(--ease);
}

.form-field textarea {
  min-height: 180px;
  resize: vertical;
}

.form-field select {
  padding-right: 44px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320242a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--color-charcoal);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  border-color: var(--color-primary);
  outline-offset: 0;
}

.form-field [aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: inset 0 0 0 1px var(--color-error);
}

.form-hint,
.form-error {
  margin-top: var(--space-2xs);
  font-size: var(--font-size-small);
  line-height: 1.45;
}

.form-hint {
  color: var(--color-text-muted);
}

.form-error {
  font-weight: var(--font-weight-semibold);
  color: var(--color-error);
}

/* Honeypot: moved off-screen rather than display:none */
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry-submit {
  width: 100%;
  margin-top: var(--space-xl);
}

.inquiry-submit:disabled {
  opacity: .7;
  cursor: progress;
}

.inquiry-submit:disabled:hover {
  background: var(--color-primary);
}

.inquiry-submit:disabled .btn-arrow {
  transform: none;
}

.form-privacy {
  margin-top: var(--space-md);
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
}

/* Submission result messages */
.form-status {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid currentColor;
  border-radius: var(--radius-button);
  font-weight: var(--font-weight-medium);
}

.form-status:focus {
  outline: none;
}

.form-status--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.form-status--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.form-status a {
  color: inherit;
  font-weight: var(--font-weight-semibold);
}

/* No-JS results: shown only when contact-submit.php redirects to #inquiry-sent / #inquiry-error */
.form-status--target {
  display: none;
}

.form-status--target:target {
  display: block;
}

.inquiry-form {
  margin-top: var(--space-lg);
}

/* contact-submit.php fallback page (no JavaScript) */
.form-result h1 {
  font-size: var(--font-size-feature);
}

.form-result-list {
  max-width: 720px;
  margin-top: var(--space-lg);
}

.form-result-link {
  margin-top: var(--space-lg);
}

/* ==========================================================================
   19. Utilities
   ========================================================================== */
.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;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--color-charcoal);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

/* Marks content that still needs real, approved information */
.placeholder {
  font-style: italic;
  opacity: .85;
  border-bottom: 1px dashed currentColor;
}

/* ==========================================================================
   20. Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  .card-link:hover .card-media img,
  .project-card:hover .card-media img,
  .card-link:hover .card-arrow,
  .btn:hover .btn-arrow,
  .text-link:hover .btn-arrow {
    transform: none;
  }
}