/* ==========================================================================
   Valley Boys Window & Gutter Cleaning
   Design system: "Pacific Northwest trade craft"
   Palette sampled from valleyboyswindows.com
   ========================================================================== */

:root {
  /* Color tokens */
  --ink: #032b3a;        /* deep river teal — primary dark */
  --pine: #233d48;       /* secondary dark */
  --slate: #627c9a;      /* muted slate blue */
  --slate-deep: #364454; /* charcoal slate — dark section band */
  --sky: #7a9bc0;        /* soft valley-sky blue — hero + accent surface */
  --sky-pale: #e7eef6;   /* faint sky tint for interior page heroes */
  --butter: #f3e7b1;     /* butter cream — warm accent */
  --paper: #f8fafc;      /* page background */
  --mist: #dadfe2;       /* borders, hairlines */
  --white: #ffffff;
  --ink-70: rgba(3, 43, 58, 0.72);

  /* The signature sky wash — shared by the hero, sky sections, and CTA bands
     so they read as the exact same surface. */
  --hero-wash: linear-gradient(172deg, #8fabca 0%, var(--sky) 58%, #6f92ba 100%);

  /* Type */
  --font-display: "Hepta Slab", "Georgia", serif;
  --font-body: "Archivo", "Segoe UI", system-ui, sans-serif;

  /* Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;

  /* Rhythm */
  --space-section: clamp(4rem, 9vw, 7rem);
  --container: 84rem;                        /* content cap — grows on large screens (see media queries) */
  --edge: clamp(1.25rem, 3.5vw, 3rem);       /* guaranteed side gutter at every width */
  --radius: 12px;
  --radius-sm: 8px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sweep: cubic-bezier(0.77, 0, 0.18, 1);
}

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* The off-canvas mobile nav lives just outside the right edge — never let it
   create horizontal scroll. */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--pine);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.375rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.625rem); }
h3 { font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.3; }

p {
  margin: 0 0 1.25rem;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

ul {
  margin: 0;
  padding: 0;
}

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

::selection {
  background: var(--butter);
  color: var(--ink);
}

.container {
  width: min(100% - 2 * var(--edge), var(--container));
  margin-inline: auto;
}

/* Content cap scales up on larger screens so wide monitors aren't left with
   huge empty margins, while the --edge gutter keeps breathing room at any width. */
@media (min-width: 90rem) {
  :root { --container: 92rem; }
}

@media (min-width: 120rem) {
  :root { --container: 100rem; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  background: var(--ink);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
  transition: top 160ms var(--ease-out);
}

.skip-link:focus {
  top: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out),
    color 180ms var(--ease-out), transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn svg {
  width: 18px;
  height: 18px;
  flex: none;
}

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

.btn--primary:hover {
  background: var(--pine);
  box-shadow: 0 8px 20px -8px rgba(3, 43, 58, 0.45);
}

.btn--butter {
  background: var(--butter);
  color: var(--ink);
}

.btn--butter:hover {
  background: #f8f0c8;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--mist);
}

.btn--ghost:hover {
  border-color: var(--slate);
  background: var(--white);
}

.btn--ghost-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--ghost-light:hover {
  border-color: var(--butter);
  color: var(--butter);
}

/* --------------------------------------------------------------------------
   Top utility bar
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--ink);
  color: rgba(248, 250, 252, 0.85);
  font-size: var(--text-sm);
}

.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 40px;
  padding-block: 0.35rem;
}

.topbar a {
  color: var(--butter);
  font-weight: 600;
  text-decoration: none;
}

.topbar a:hover {
  text-decoration: underline;
}

.topbar__links {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
}

.topbar__note {
  margin: 0;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Header + navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--mist);
  transition: box-shadow 220ms var(--ease-out);
}

/* The frosted bar lives on a pseudo-element: putting backdrop-filter on the
   header itself would make it a containing block for fixed-position children,
   which collapses the full-screen mobile nav into the header's box. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header.is-scrolled {
  box-shadow: 0 6px 24px -12px rgba(3, 43, 58, 0.25);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  flex: none;
}

.brand__logo {
  width: 52px;
  height: 52px;
  flex: none;
  object-fit: contain;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1875rem;
  line-height: 1.05;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}

.brand__sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 0.2rem;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
}

/* The mobile menu carries its own logo + close button (see mobile media query).
   Hidden on desktop where the real header bar is used instead. */
.site-nav__head {
  display: none;
}

.nav-close {
  display: none;
}

.site-nav__link {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--pine);
  text-decoration: none;
  padding: 0.5rem 0.15rem;
  border-bottom: 2px solid transparent;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.site-nav__link:hover {
  color: var(--ink);
  border-bottom-color: var(--sky);
}

.site-nav__link.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--butter);
}

/* Services dropdown */
.nav-drop {
  position: relative;
}

.nav-drop__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--pine);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.15rem;
  cursor: pointer;
  transition: color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.nav-drop__btn:hover {
  color: var(--ink);
  border-bottom-color: var(--sky);
}

.nav-drop__btn.is-active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--butter);
}

.nav-drop__btn svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms var(--ease-out);
}

.nav-drop[data-open] .nav-drop__btn svg {
  transform: rotate(180deg);
}

.nav-drop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  translate: -50% 0;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  box-shadow: 0 20px 40px -16px rgba(3, 43, 58, 0.28);
  padding: 0.5rem;
  display: none;
}

.nav-drop[data-open] .nav-drop__menu {
  display: block;
  animation: drop-in 200ms var(--ease-out);
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.nav-drop__menu a {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--pine);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.nav-drop__menu a:hover {
  background: var(--paper);
  color: var(--ink);
}

.nav-drop__menu a.nav-drop__all {
  margin-top: 0.25rem;
  border-top: 1px solid var(--mist);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--slate);
  font-weight: 600;
  font-size: 0.875rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1.5px solid var(--mist);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
}

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

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

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

/* --------------------------------------------------------------------------
   Eyebrow + section headers
   -------------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--butter);
  flex: none;
}

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

.section--tight {
  padding-block: calc(var(--space-section) * 0.65);
}

.section--white {
  background: var(--white);
  border-block: 1px solid var(--mist);
}

.section--ink {
  background: var(--ink);
  color: rgba(248, 250, 252, 0.88);
  position: relative;
  overflow: hidden;
}

.section--ink h2,
.section--ink h3 {
  color: var(--paper);
}

.section--ink .eyebrow {
  color: var(--sky);
}

.section__head {
  max-width: 42rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center .eyebrow {
  justify-content: center;
}

.section__lede {
  font-size: var(--text-lg);
  color: var(--ink-70);
  margin-bottom: 0;
}

.section--ink .section__lede {
  color: rgba(248, 250, 252, 0.75);
}

/* Sky-blue surface — the brand's signature band (hero + accent sections) */
.section--sky {
  background: var(--hero-wash);
  color: #0b3242;
  position: relative;
  overflow: hidden;
}

.section--sky h2,
.section--sky h3 {
  color: var(--ink);
}

.section--sky .eyebrow {
  color: var(--ink);
}

.section--sky .eyebrow::before {
  background: var(--ink);
}

.section--sky .section__lede {
  color: #0b3242;
}

.section--sky .contours {
  color: var(--white);
  opacity: 0.4;
}

/* Charcoal-slate surface — matches the brand's darker content band */
.section--slate {
  background: var(--slate-deep);
  color: rgba(248, 250, 252, 0.85);
  position: relative;
  overflow: hidden;
}

.section--slate h2,
.section--slate h3 {
  color: var(--paper);
}

.section--slate p {
  color: rgba(248, 250, 252, 0.82);
}

.section--slate .eyebrow {
  color: var(--butter);
}

.section--slate .section__lede {
  color: rgba(248, 250, 252, 0.78);
}

/* --------------------------------------------------------------------------
   Valley contour linework (signature texture)
   -------------------------------------------------------------------------- */

.contours {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  color: var(--sky);
  opacity: 0.16;
  pointer-events: none;
}

.contours--top {
  bottom: auto;
  top: 0;
  transform: scaleY(-1);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-wash);
  border-bottom: 1px solid rgba(3, 43, 58, 0.14);
}

.hero .contours {
  color: var(--white);
  opacity: 0.4;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pine);
  margin-bottom: 1.4rem;
}

.hero__rating .stars {
  color: #d9a514;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
}

.hero h1 {
  margin-bottom: 1.4rem;
}

.hero__sub {
  font-size: var(--text-lg);
  color: var(--ink);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.hero__meta {
  margin-top: 1.75rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.hero__meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.hero__meta svg {
  width: 15px;
  height: 15px;
  color: var(--ink);
}

/* Squeegee wipe reveal — the signature moment */
.wipe {
  position: relative;
  display: block;
}

.wipe__text {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {
  .wipe .wipe__text {
    clip-path: inset(-5% 100% -5% 0);
    animation: wipe-reveal 950ms var(--ease-sweep) 250ms forwards;
  }

  .wipe::after {
    content: "";
    position: absolute;
    top: -4%;
    left: 0;
    height: 108%;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--butter), #e2cf7e);
    opacity: 0;
    animation: wipe-bar 950ms var(--ease-sweep) 250ms forwards;
  }

  @keyframes wipe-reveal {
    to { clip-path: inset(-5% -2% -5% 0); }
  }

  @keyframes wipe-bar {
    0% { transform: translateX(0); opacity: 1; }
    88% { opacity: 1; }
    100% { transform: translateX(min(58vw, 640px)); opacity: 0; }
  }
}

/* --------------------------------------------------------------------------
   Photo / logo placeholders
   -------------------------------------------------------------------------- */

.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.5rem;
  background:
    repeating-linear-gradient(-45deg, rgba(122, 155, 192, 0.07) 0 14px, transparent 14px 28px),
    linear-gradient(180deg, #eef2f6, #e4eaf0);
  border: 1.5px dashed var(--slate);
  border-radius: var(--radius);
  color: var(--slate);
  overflow: hidden;
}

.ph svg {
  width: 34px;
  height: 34px;
  opacity: 0.7;
}

.ph__label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--pine);
  max-width: 22ch;
  line-height: 1.4;
}

.ph__hint {
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x4 { aspect-ratio: 3 / 4; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1; }

.hero__media {
  position: relative;
}

.hero__media .ph {
  box-shadow: 0 24px 48px -20px rgba(3, 43, 58, 0.35);
}

.hero__img {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px -20px rgba(3, 43, 58, 0.35);
}

.hero__media::before {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border-radius: var(--radius);
  background: var(--butter);
  opacity: 0.55;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Cards + grids
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1.25rem;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  margin-bottom: 0;
  font-size: 0.9688rem;
  color: var(--ink-70);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--butter);
  border-radius: 12px;
  margin-bottom: 1.1rem;
  color: var(--ink);
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

/* Service link cards */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}

.svc-card:hover {
  border-color: var(--sky);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(3, 43, 58, 0.3);
}

.svc-card h3 {
  margin-bottom: 0.5rem;
}

.svc-card p {
  font-size: 0.9688rem;
  color: var(--ink-70);
  margin-bottom: 1.25rem;
}

.svc-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--ink);
}

.svc-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform 200ms var(--ease-out);
}

.svc-card:hover .svc-card__cta svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   How it works (numbered — a true sequence)
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: step;
  list-style: none;
}

.steps li {
  counter-increment: step;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  position: relative;
}

.steps li::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--sky);
  display: block;
  margin-bottom: 0.9rem;
}

.steps h3 {
  margin-bottom: 0.4rem;
}

.steps p {
  margin: 0;
  font-size: 0.9688rem;
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.review {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}

.review__stars {
  color: #d9a514;
  letter-spacing: 0.1em;
  font-size: 0.9375rem;
  margin-bottom: 0.9rem;
}

.review blockquote {
  margin: 0 0 1.25rem;
  font-size: 0.9688rem;
  color: var(--pine);
}

.review footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: var(--text-sm);
}

.review cite {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}

.review__source {
  color: var(--slate);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Single featured testimonial (service pages)
   -------------------------------------------------------------------------- */

.quote {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.quote__stars {
  color: #d9a514;
  letter-spacing: 0.14em;
  font-size: 1.0625rem;
  margin-bottom: 1.1rem;
}

.quote blockquote {
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.section--slate .quote blockquote {
  color: var(--paper);
}

.quote figcaption {
  font-size: var(--text-sm);
  color: var(--slate);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.section--slate .quote figcaption {
  color: rgba(248, 250, 252, 0.7);
}

.quote figcaption strong {
  color: var(--ink);
  font-weight: 700;
}

.section--slate .quote figcaption strong {
  color: var(--paper);
}

.quote figcaption .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   Service areas
   -------------------------------------------------------------------------- */

.areas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  list-style: none;
}

.areas li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(3, 43, 58, 0.16);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

.areas svg {
  width: 14px;
  height: 14px;
  color: var(--ink);
  flex: none;
}

/* --------------------------------------------------------------------------
   Checklist
   -------------------------------------------------------------------------- */

.checklist {
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.checklist li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.checklist svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 0.2rem;
  color: var(--ink);
  background: var(--butter);
  border-radius: 50%;
  padding: 3px;
}

/* --------------------------------------------------------------------------
   FAQ accordion (native details)
   -------------------------------------------------------------------------- */

.faq-list {
  max-width: 46rem;
  margin-inline: auto;
  display: grid;
  gap: 0.75rem;
}

.faq {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 200ms var(--ease-out);
}

.faq[open] {
  border-color: var(--sky);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  font-size: 1.03125rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--slate);
  border-bottom: 2px solid var(--slate);
  transform: rotate(45deg);
  transition: transform 220ms var(--ease-out);
  margin-top: -4px;
}

.faq[open] summary::after {
  transform: rotate(225deg);
  margin-top: 6px;
}

.faq summary:hover {
  background: var(--paper);
}

.faq__body {
  padding: 0 1.4rem 1.25rem;
  color: var(--ink-70);
  font-size: 0.9688rem;
}

.faq__body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Split layouts + CTA band
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Keep prose readable even when the split column gets wide on large screens. */
.split p,
.split .checklist {
  max-width: 40rem;
}

.split__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--pine);
  margin-top: 1.25rem;
}

.split__badge svg {
  width: 16px;
  height: 16px;
  color: var(--slate);
}

.cta-band {
  position: relative;
  overflow: hidden;
  background: var(--hero-wash);
  color: var(--ink);
  text-align: center;
}

.cta-band .contours {
  color: var(--white);
  opacity: 0.4;
}

.cta-band .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  max-width: 46rem;
}

.cta-band h2 {
  color: var(--ink);
  margin-bottom: 1rem;
}

.cta-band p {
  color: var(--ink);
  font-size: var(--text-lg);
  margin-bottom: 2rem;
}

/* Ghost buttons sitting on the sky wash need dark ink, not the light-on-dark
   treatment used over deep-teal sections. */
.cta-band .btn--ghost-light,
.section--sky .btn--ghost-light {
  color: var(--ink);
  border-color: rgba(3, 43, 58, 0.4);
}

.cta-band .btn--ghost-light:hover,
.section--sky .btn--ghost-light:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.4);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* --------------------------------------------------------------------------
   Page hero (interior pages)
   -------------------------------------------------------------------------- */

.page-hero {
  background: linear-gradient(178deg, var(--sky-pale) 0%, #f4f7fb 100%);
  border-bottom: 1px solid var(--mist);
  position: relative;
  overflow: hidden;
}

.page-hero .contours {
  color: var(--sky);
  opacity: 0.5;
}

.page-hero .container {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 7vw, 5rem);
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--slate);
  margin-bottom: 1.5rem;
}

.breadcrumb a {
  color: var(--slate);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  opacity: 0.5;
}

.breadcrumb [aria-current] {
  color: var(--pine);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-card {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
}

.contact-card h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.contact-card h3 svg {
  width: 20px;
  height: 20px;
  color: var(--slate);
  flex: none;
}

.contact-card a {
  font-weight: 600;
}

.hours-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.hours-table th,
.hours-table td {
  text-align: left;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--mist);
  font-weight: 400;
}

.hours-table tr:last-child th,
.hours-table tr:last-child td {
  border-bottom: none;
}

.hours-table td {
  text-align: right;
  color: var(--ink-70);
}

.hours-table .is-closed td {
  color: var(--slate);
}

.notice {
  background: var(--white);
  border: 1px solid var(--mist);
  border-left: 4px solid var(--butter);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.4rem;
  font-size: 0.9375rem;
  color: var(--ink-70);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--slate-deep);
  color: rgba(248, 250, 252, 0.78);
  position: relative;
  overflow: hidden;
  font-size: 0.9375rem;
}

.site-footer .container {
  position: relative;
  z-index: 1;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
}

.site-footer h4 {
  color: var(--butter);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.site-footer a {
  color: rgba(248, 250, 252, 0.85);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--butter);
  text-decoration: underline;
}

.site-footer ul {
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.footer-brand .brand__logo {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  padding: 4px;
}

.footer-brand .brand__name {
  color: var(--paper);
}

.footer-brand .brand__sub {
  color: var(--sky);
}

.footer-brand p {
  margin-top: 1.1rem;
  max-width: 30ch;
  font-size: 0.9063rem;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(122, 155, 192, 0.4);
  border-radius: 50%;
  transition: border-color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.footer-social a:hover {
  border-color: var(--butter);
  background: rgba(243, 231, 177, 0.08);
}

.footer-social svg {
  width: 17px;
  height: 17px;
}

.site-footer__hours {
  display: grid;
  gap: 0.35rem;
  font-size: 0.9063rem;
}

.site-footer__hours div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__hours dt {
  margin: 0;
}

.site-footer__hours dd {
  margin: 0;
  color: rgba(248, 250, 252, 0.6);
}

.site-footer__bottom {
  border-top: 1px solid rgba(122, 155, 192, 0.25);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.8438rem;
  color: rgba(248, 250, 252, 0.55);
}

.site-footer__bottom a {
  color: rgba(248, 250, 252, 0.7);
}

.site-footer__credit {
  margin: 0;
  padding-bottom: 1.5rem;
  text-align: center;
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgba(248, 250, 252, 0.4);
}

.site-footer__credit a {
  color: rgba(248, 250, 252, 0.55);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer__credit a:hover {
  color: var(--butter);
}

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

/* Reveal-on-scroll: only hides content when JS has confirmed it's running
   (main.js adds .js to <html>), so content is never lost without JS. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive — tablet
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Full-screen overlay. z-index sits above the header so it reliably covers
     the real header bar (a fixed child of the sticky header can otherwise
     escape into an unpredictable stacking layer), and the menu supplies its
     own logo + close button so those controls are always part of the panel. */
  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.25rem;
    background: var(--paper);
    padding: 0 1.5rem 2rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 280ms var(--ease-out), visibility 0s 280ms;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 280ms var(--ease-out);
    box-shadow: -20px 0 60px rgba(3, 43, 58, 0.25);
  }

  .site-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 -1.5rem 0.75rem;
    padding: 0 1.25rem;
    min-height: 76px;
    border-bottom: 1px solid var(--mist);
    position: sticky;
    top: 0;
    background: var(--paper);
    z-index: 1;
  }

  .site-nav__head .brand__logo {
    width: 46px;
    height: 46px;
  }

  .nav-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    padding: 0;
    background: none;
    border: 1.5px solid var(--mist);
    border-radius: var(--radius-sm);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
  }

  .nav-close:hover {
    border-color: var(--slate);
    background: var(--white);
  }

  .nav-close svg {
    width: 22px;
    height: 22px;
  }

  .site-nav__link,
  .nav-drop__btn {
    font-size: 1.125rem;
    padding: 0.85rem 0.25rem;
    border-bottom: 1px solid var(--mist);
    width: 100%;
    justify-content: space-between;
    display: flex;
    align-items: center;
  }

  .site-nav__link.is-active,
  .nav-drop__btn.is-active {
    border-bottom-color: var(--butter);
  }

  .nav-drop {
    width: 100%;
  }

  .nav-drop__menu {
    position: static;
    translate: none;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0.25rem 0 0.25rem 1rem;
  }

  .nav-drop__menu a {
    font-size: 1rem;
    padding: 0.65rem 0.5rem;
  }

  .site-nav .btn {
    margin-top: 1.25rem;
    width: 100%;
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 95;
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Responsive — phone (designed, not shrunk)
   -------------------------------------------------------------------------- */

@media (max-width: 47.9rem) {
  body {
    font-size: 1rem;
  }

  .topbar__note {
    display: none;
  }

  .topbar__inner {
    justify-content: center;
  }

  .hero__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-block: 2.75rem 3.5rem;
  }

  .hero__sub {
    font-size: 1.0625rem;
  }

  .hero__actions .btn {
    flex: 1 1 100%;
  }

  .hero__media::before {
    inset: 0.9rem -0.6rem -0.9rem 0.9rem;
  }

  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }

  .steps {
    grid-template-columns: 1fr;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split--media-last-mobile > .split__media {
    order: 2;
  }

  .section__head {
    margin-bottom: 1.75rem;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .cta-band__actions .btn {
    flex: 1 1 100%;
  }

  .brand__name {
    font-size: 1.0625rem;
  }
}

/* Horizontal scroll of review cards on phone: designed for thumb, not stacked walls */
@media (max-width: 47.9rem) {
  .grid--reviews {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.75rem;
    margin-inline: calc(-1 * var(--edge));
    padding-inline: var(--edge);
    -webkit-overflow-scrolling: touch;
  }

  .grid--reviews .review {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

@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;
  }
}

/* --------------------------------------------------------------------------
   Real photos in image slots
   -------------------------------------------------------------------------- */

.shot {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -20px rgba(3, 43, 58, 0.32);
}

.shot--4x3 { aspect-ratio: 4 / 3; }
.shot--3x4 { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   Before / after gallery (portfolio)
   -------------------------------------------------------------------------- */

.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.ba {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 200ms var(--ease-out), transform 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}

.ba:hover {
  border-color: var(--sky);
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -18px rgba(3, 43, 58, 0.3);
}

.ba__imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.ba__cell {
  position: relative;
  margin: 0;
}

.ba__cell img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.ba__label {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: rgba(3, 43, 58, 0.85);
  color: var(--paper);
}

.ba__label--after {
  background: var(--butter);
  color: var(--ink);
}

.ba__cap {
  margin: 0;
  padding: 0.9rem 1.1rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Before / after comparison slider
   -------------------------------------------------------------------------- */

.ba-slider {
  --pos: 50%;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgba(3, 43, 58, 0.32);
  touch-action: pan-y;
  isolation: isolate;
}

.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* The "before" image sits on top, clipped to the left of the divider. */
.ba-slider__img--before {
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  z-index: 1;
}

.ba-slider__tag {
  position: absolute;
  top: 0.6rem;
  z-index: 3;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  pointer-events: none;
}

.ba-slider__tag--before { left: 0.6rem; background: rgba(3, 43, 58, 0.85); color: var(--paper); }
.ba-slider__tag--after { right: 0.6rem; background: var(--butter); color: var(--ink); }

/* Full-cover range input drives --pos and stays keyboard-accessible. */
.ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 4;
  cursor: ew-resize;
  opacity: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.ba-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 100%;
}

.ba-slider__range::-moz-range-thumb {
  width: 44px;
  height: 100%;
  border: 0;
  background: transparent;
}

.ba-slider__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  z-index: 2;
  background: var(--paper);
  pointer-events: none;
}

.ba-slider__knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 2px 12px rgba(3, 43, 58, 0.45);
}

.ba-slider__knob svg { width: 20px; height: 20px; }

.ba-slider__range:focus-visible ~ .ba-slider__divider .ba-slider__knob {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}