/*
 * Light theme — flips the original dark theme to light background / dark text.
 * Loaded after the main stylesheet on every page, so these token values win
 * at all breakpoints. Delete this file (and its <link> tags) to go back dark.
 * Brand accent colors (--colors-brand--*) are intentionally untouched.
 */
:root,
body {
  --colors-interface--dark: #f6f6f3;                /* was #1e1e1e — main background */
  --colors-interface--dark-2: #ebebe6;              /* was #121212 — deeper background */
  --colors-interface--white: #1b1a18;               /* was white — headings / primary text */
  --colors-interface--body-text: #1b1a18b3;         /* was #ffffffb3 — body text */
  --colors-interface--white-border: #00000021;      /* was #ffffff1a — borders / dividers */
  --colors-interface--white-faded: #0000000a;       /* was #ffffff0f — subtle fills */
  --colors-interface--white-faded-hover: #00000017; /* was #ffffff1f — hover fills */
  --colors-interface--faded-heading: #00000078;     /* was #ffffff80 — muted headings */
  --colors-interface--glass-bg-dark: #ffffffa6;     /* was #00000040 — glass panels over media */
  --colors-interface--glass-bg-white: #ffffffe6;    /* was #ffffff26 — glass hover state */
}

/* Scrims that sit under text on photos: black fade -> white fade */
.hero-scrim {
  background-image: linear-gradient(0deg, #fffc 25%, #fff0);
}

.customer-card-scrim {
  background-image: linear-gradient(0deg, #fffc, #fff0);
}

/* Edge fades on the logo marquee: match the new light background */
.marquee-scrim {
  background-image: linear-gradient(90deg, var(--colors-interface--dark), #f6f6f300 25%, #f6f6f300 75%, var(--colors-interface--dark));
}

/* Form fields */
.form-input:focus {
  border-color: #00000040;
}

.form-input::placeholder,
.search-form-input::placeholder {
  color: #1b1a1899;
}

/* White texture overlays (dot grid, film grain) -> dark so they read on light */
.grid-bg,
.noise-bg {
  filter: invert(1);
}

/* Dot overlay -> "Grain vignette" (dot-overlay-demo-2.html option 10, picked 2026-07-17).
   Jittered micro dots (white-on-transparent SVG tile, inverted dark by the rule above)
   replace the stock 48px dot-grid.png site-wide; variants (.non-overlay,
   .service-grid-bg, .dark-cta-grid, .normal) keep their own opacity/blend. */
.grid-bg {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'96'%20height%3D'96'%3E%3Cg%20fill%3D'white'%3E%3Ccircle%20cx%3D'7'%20cy%3D'14'%20r%3D'.6'%2F%3E%3Ccircle%20cx%3D'19'%20cy%3D'6'%20r%3D'.45'%2F%3E%3Ccircle%20cx%3D'31'%20cy%3D'17'%20r%3D'.8'%2F%3E%3Ccircle%20cx%3D'44'%20cy%3D'9'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'58'%20cy%3D'15'%20r%3D'.65'%2F%3E%3Ccircle%20cx%3D'71'%20cy%3D'7'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'85'%20cy%3D'13'%20r%3D'.75'%2F%3E%3Ccircle%20cx%3D'90'%20cy%3D'27'%20r%3D'.45'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'29'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'26'%20cy%3D'33'%20r%3D'.7'%2F%3E%3Ccircle%20cx%3D'40'%20cy%3D'28'%20r%3D'.45'%2F%3E%3Ccircle%20cx%3D'55'%20cy%3D'31'%20r%3D'.85'%2F%3E%3Ccircle%20cx%3D'69'%20cy%3D'26'%20r%3D'.55'%2F%3E%3Ccircle%20cx%3D'80'%20cy%3D'38'%20r%3D'.6'%2F%3E%3Ccircle%20cx%3D'8'%20cy%3D'46'%20r%3D'.75'%2F%3E%3Ccircle%20cx%3D'22'%20cy%3D'49'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'37'%20cy%3D'44'%20r%3D'.6'%2F%3E%3Ccircle%20cx%3D'51'%20cy%3D'52'%20r%3D'.45'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'47'%20r%3D'.9'%2F%3E%3Ccircle%20cx%3D'78'%20cy%3D'53'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'89'%20cy%3D'60'%20r%3D'.65'%2F%3E%3Ccircle%20cx%3D'14'%20cy%3D'62'%20r%3D'.55'%2F%3E%3Ccircle%20cx%3D'29'%20cy%3D'66'%20r%3D'.8'%2F%3E%3Ccircle%20cx%3D'43'%20cy%3D'61'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'57'%20cy%3D'68'%20r%3D'.6'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'64'%20r%3D'.45'%2F%3E%3Ccircle%20cx%3D'84'%20cy%3D'72'%20r%3D'.7'%2F%3E%3Ccircle%20cx%3D'9'%20cy%3D'78'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'24'%20cy%3D'81'%20r%3D'.65'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'76'%20r%3D'.45'%2F%3E%3Ccircle%20cx%3D'52'%20cy%3D'84'%20r%3D'.75'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'79'%20r%3D'.55'%2F%3E%3Ccircle%20cx%3D'79'%20cy%3D'87'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'91'%20cy%3D'90'%20r%3D'.6'%2F%3E%3Ccircle%20cx%3D'17'%20cy%3D'91'%20r%3D'.7'%2F%3E%3Ccircle%20cx%3D'45'%20cy%3D'92'%20r%3D'.5'%2F%3E%3Ccircle%20cx%3D'60'%20cy%3D'90'%20r%3D'.8'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size: 96px 96px;
  opacity: .6;
}

/* Full-viewport heroes only: dissolve the grain behind the centred headline */
.wide-section-content.hero-1 .grid-bg,
.wide-section-content.hero-2 .grid-bg {
  -webkit-mask-image: radial-gradient(ellipse 64% 60% at 50% 42%, transparent 25%, black 75%);
  mask-image: radial-gradient(ellipse 64% 60% at 50% 42%, transparent 25%, black 75%);
}


/* Wide-band width cap (2026-07-17): the rounded full-bleed bands (hero-1,
   mid-page-cta, cta) previously grew with the viewport while their content
   stopped at 1248px, leaving dead color on large monitors. Cap the band at
   1560px, centered — no effect below ~1580px viewport, where the 9px
   .wide-section edge inset still governs. */
.wide-section-content {
  width: 100%;
  max-width: var(--containers--wide-container, 1560px);
  margin-left: auto;
  margin-right: auto;
}

/* CTA bands: use a lighter, cleaner sage base beneath the existing accents. */
.wide-section-content.cta.homepage-cta {
  background-color: #dce8d2;
}

/* Full-height heroes: shorter than the viewport (2026-07-17/18). Template
   default is calc(100svh - 18px) = full first screen; cap all of them at the
   homepage height so the page visibly continues below the fold.
   Covers: home (hero-1), home-2 + about-3 (hero-2). */
.wide-section-content.hero-1,
.wide-section-content.hero-2 {
  height: min(calc(100svh - 18px), 840px);
}

/* Homepage service cards: brighter neutral base while preserving accents. */
.services-scrolling-row .service-icon-box,
.home-services-static-grid .service-icon-box-static {
  background-color: #f4f1e8 !important;
}

.services-scrolling-row .service-grid-bg,
.home-services-static-grid .service-grid-bg {
  opacity: .32 !important;
}

.services-scrolling-row .service-noise,
.home-services-static-grid .service-noise {
  opacity: .25 !important;
}

/* Header contact action: selected Fine-line treatment from the design review. */
.nav-controls > .button,
.nav-button-wrapper > .button {
  height: 42px;
  padding-right: 18px;
  padding-left: 18px;
  border: 1px solid #1b1a1866;
  border-radius: 999px;
  background-color: transparent;
  color: #1b1a18;
  letter-spacing: .08em;
  column-gap: 0;
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s;
}

.nav-controls > .button {
  min-width: 124px;
}

.nav-button-wrapper > .button {
  width: 100%;
}

.nav-controls > .button:hover,
.nav-button-wrapper > .button:hover {
  border-color: #1b1a18;
  background-color: transparent;
  color: #1b1a18;
  box-shadow: inset 0 0 0 1px #1b1a18;
}

.nav-controls > .button:focus-visible,
.nav-button-wrapper > .button:focus-visible {
  outline: 2px solid #1b1a18;
  outline-offset: 3px;
}