/* ==========================================================================
   Cleaning Services of Montana — Design System
   "Trusted, premium, calm"
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color — Official brand palette by Wilson Silva, Art Director (© 2025) */
  --color-bg:        #F5F9FC;          /* WHITE  · Pantone Cool Gray 1 C */
  --color-bg-alt:    #E3E8ED;          /* GRAY   · Pantone 656 C */
  --color-ink:       #2A2E33;          /* BLACK  · Pantone 432 C */
  --color-ink-soft:  #4A5058;          /* secondary text (derived) */
  --color-ink-mute:  #7A8189;          /* tertiary / meta (derived) */
  --color-line:      #CFD4DC;          /* hairline rules (derived) */
  --color-primary:   #002C69;          /* BLUE   · Pantone 296 C */
  --color-primary-2: #001F4A;          /* hover state (deeper) */
  --color-accent:    #002C69;          /* accent = primary (single-color brand) */
  --color-accent-2:  #001F4A;
  --color-white:     #FFFFFF;

  /* Type */
  --font-display: "Fraunces", "Tiempos", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Scale (fluid, mobile-first) */
  --fs-xs:    0.78rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    clamp(1.05rem, 0.95rem + 0.4vw, 1.18rem);
  --fs-lg:    clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-xl:    clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem);
  --fs-2xl:   clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
  --fs-3xl:   clamp(2.6rem, 1.8rem + 3.8vw, 4.6rem);
  --fs-4xl:   clamp(3rem, 2rem + 5vw, 6rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6.5rem;
  --sp-10: 9rem;

  /* Layout */
  --max-w:        1240px;
  --max-w-narrow: 780px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);

  /* Misc */
  --radius:   2px;
  --radius-lg: 6px;
  --shadow:   0 1px 2px rgba(20, 36, 28, 0.05), 0 8px 24px rgba(20, 36, 28, 0.06);
  --transition: 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 var(--sp-5);
  color: var(--color-ink);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 500; line-height: 1.25; }
p  { margin: 0 0 var(--sp-4); color: var(--color-ink-soft); }
.lede {
  font-size: var(--fs-md);
  color: var(--color-ink-soft);
  max-width: 60ch;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-accent);
  margin: 0 0 var(--sp-4);
  display: inline-block;
}
.display {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
}

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
section { padding: var(--sp-9) 0; }
.section-tight { padding: var(--sp-7) 0; }
.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-primary); color: #E5EBF2; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #FBF8F2; }
.section-dark p { color: #C5CFDA; }
.divider { height: 1px; background: var(--color-line); border: 0; margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: #FBF8F2;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.btn:hover { background: var(--color-primary-2); border-color: var(--color-primary-2); }
.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--ghost:hover { background: var(--color-ink); color: var(--color-bg); }
.btn--accent {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.btn--accent:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn--light {
  background: transparent;
  border-color: rgba(251, 248, 242, 0.6);
  color: #FBF8F2;
}
.btn--light:hover { background: #FBF8F2; color: var(--color-primary); border-color: #FBF8F2; }
.btn--lg { padding: 1.1rem 2rem; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--transition), color var(--transition);
}
.link-arrow:hover { gap: 0.85rem; color: var(--color-accent); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}
.site-header.is-scrolled { border-bottom-color: var(--color-line); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-primary);
  line-height: 1;
}
.brand__logo {
  display: block;
  width: auto;
  height: 40px;
  color: currentColor;
}
@media (min-width: 600px) {
  .brand__logo { height: 46px; }
}
/* Footer logo color override — light on dark */
.site-footer .brand { color: #FBF8F2; }
.site-footer .brand__logo { opacity: 0.95; }
/* Legacy badge mark (kept for fallback) */
.brand__mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FBF8F2;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1rem;
  font-style: italic;
}
.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.nav__list {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  gap: var(--sp-5);
}
.nav__list a {
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
  position: relative;
  padding: 0.25rem 0;
}
.nav__list a:hover, .nav__list a.is-active { color: var(--color-primary); }
.nav__list a.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--color-accent);
}
.nav__cta { display: none; }
.nav__toggle {
  background: transparent;
  border: 0;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--color-ink);
  position: relative;
  transition: transform var(--transition), opacity var(--transition);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: var(--color-ink);
  transition: transform var(--transition), top var(--transition);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top: 7px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--color-bg);
  padding: var(--sp-7) var(--gutter) var(--sp-9);
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition), opacity var(--transition);
  z-index: 40;
  overflow-y: auto;
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.mobile-menu__list a {
  display: block;
  padding: var(--sp-4) 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
}
.mobile-menu__list a:hover { color: var(--color-primary); }
.mobile-menu__cta { margin-top: var(--sp-6); }

@media (min-width: 880px) {
  .nav__list { display: inline-flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.hero--short { min-height: 60vh; }
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* the copy now lives in the bottom-left, so the scrim is weighted there and
     the rest of the frame is left to show */
  background:
    linear-gradient(90deg, rgba(0,28,52,0.72) 0%, rgba(0,28,52,0.44) 30%, rgba(0,28,52,0.05) 58%, rgba(0,28,52,0) 100%),
    linear-gradient(180deg, rgba(0,28,52,0.16) 0%, rgba(0,28,52,0.12) 32%, rgba(0,28,52,0.48) 68%, rgba(0,28,52,0.86) 100%);
}
.hero__content {
  position: relative; z-index: 1;
  color: #FBF8F2;
  padding: var(--sp-8) 0 var(--sp-8);
  width: 100%;
}
.hero__content .eyebrow { color: #A8C0E0; }
.hero__content h1 { color: #FBF8F2; max-width: 22ch; }
.hero__content p { color: #E2E6E1; max-width: 50ch; }
.hero__content strong { color: #FBF8F2; font-weight: 600; }
.hero__tag {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #FBF8F2 !important;
  margin-bottom: var(--sp-4);
}
/* Homepage hero: the whole copy block sits in the bottom-left corner of the photo.
   Capping the column and easing the headline down is what lets it read as a corner
   block rather than a band running the width of the frame. */
.hero:not(.hero--short) {
  padding: 0;            /* the generic section padding held the copy 104px off the edges */
}
.hero:not(.hero--short) .hero__content {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-7);
}
@media (min-width: 600px) {
  /* break out of the centred container so the copy sits flush to the left edge.
     Phones keep their gutter — text against the bezel has nowhere to breathe. */
  .hero:not(.hero--short) .hero__content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    /* a small indent off the edge — enough to breathe, well short of the page gutter */
    padding-left: clamp(1.25rem, 2.2vw, 2.25rem);
    padding-right: var(--gutter);
  }
}

/* Hero: the long intro tucks behind a small toggle so it doesn't crowd the photo.
   The button ships hidden and JS reveals it, so with no JS the paragraph simply shows. */
.hero__more-btn {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-4);
  padding: 0.5rem 1rem;
  background: rgba(251, 248, 242, 0.10);
  border: 1px solid rgba(251, 248, 242, 0.45);
  border-radius: 999px;
  color: #FBF8F2;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 40px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition: background var(--transition), border-color var(--transition);
}
.hero__more.is-collapsible .hero__more-btn { display: inline-flex; }
.hero__more-btn:hover { background: rgba(251, 248, 242, 0.22); border-color: #FBF8F2; }
.hero__more-btn:focus-visible { outline: 2px solid #FBF8F2; outline-offset: 3px; }
.hero__more-chev { transition: transform var(--transition); flex: none; }
.hero__more.is-open .hero__more-chev { transform: rotate(180deg); }
/* 0fr -> 1fr animates the height without having to measure it */
.hero__more.is-collapsible .hero__more-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 320ms ease, opacity 200ms ease;
}
.hero__more.is-collapsible .hero__more-panel > * { overflow: hidden; min-height: 0; }
.hero__more.is-open .hero__more-panel { grid-template-rows: 1fr; opacity: 1; }
.hero__more-inner p { margin: 0; padding-top: var(--sp-4); }
/* the inner wrapper is what the 0fr row shrinks; padding on the grid item itself would survive */
@media (prefers-reduced-motion: reduce) {
  .hero__more.is-collapsible .hero__more-panel { transition: none; }
  .hero__more-chev { transition: none; }
}

.hero__meta {
  margin-top: var(--sp-6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5);
}
.hero__meta .eyebrow { color: #A8C0E0; }

/* ---------- Page header (subpages) ---------- */
.page-header {
  padding: var(--sp-9) 0 var(--sp-7);
  border-bottom: 1px solid var(--color-line);
}
.page-header h1 { margin-bottom: var(--sp-4); }
.page-header .lede { max-width: 56ch; }

/* ---------- Trust pillars ---------- */
.pillars {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
.pillar h3 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-3);
}
.pillar p { margin-bottom: 0; }
@media (min-width: 760px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}

/* ---------- Editorial split ---------- */
.split {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
.split--text-first .split__media { order: 1; }
.split img { aspect-ratio: 4 / 5; object-fit: cover; }
.split__media { position: relative; }
.split__media-cap {
  position: absolute;
  bottom: var(--sp-4); left: var(--sp-4);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FBF8F2;
  background: rgba(0,28,52,0.7);
  padding: 0.4rem 0.7rem;
}
@media (min-width: 880px) {
  .split { grid-template-columns: 1.05fr 1fr; gap: var(--sp-8); }
  .split--reverse .split__text { order: 2; }
}

/* ---------- Service grid (4 featured) ---------- */
.svc-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}
.svc-card {
  position: relative;
  display: block;
  color: var(--color-ink);
}
.svc-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: var(--sp-4);
  background: var(--color-bg-alt);
}
.svc-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.svc-card:hover .svc-card__media img { transform: scale(1.04); }
.svc-card__num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-accent);
  font-size: 0.9rem;
}
.svc-card h3 {
  font-size: var(--fs-lg);
  margin: var(--sp-2) 0 var(--sp-3);
}
.svc-card p { font-size: var(--fs-sm); margin-bottom: var(--sp-3); }

@media (min-width: 720px) { .svc-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7); } }
@media (min-width: 1080px){ .svc-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* Services index — full list */
.svc-list { display: grid; gap: 0; }
.svc-list__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--color-line);
  align-items: start;
}
.svc-list__row:last-child { border-bottom: 1px solid var(--color-line); }
.svc-list__title { font-size: var(--fs-xl); margin: 0; }
.svc-list__desc { color: var(--color-ink-soft); margin: 0; max-width: 60ch; }
.svc-list__action { display: flex; align-items: center; }
@media (min-width: 880px) {
  .svc-list__row {
    grid-template-columns: 1.1fr 1.4fr auto;   /* the 60px index column came out with the numbers */
    gap: var(--sp-6);
    align-items: center;
    padding: var(--sp-7) 0;
  }
}

/* ---------- Team teaser ---------- */
.team-teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: end;
}
.team-teaser img { aspect-ratio: 5 / 6; object-fit: cover; }
@media (min-width: 880px) {
  .team-teaser { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

/* ---------- Testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
.quote { padding: 0; }
.quote__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  line-height: 1;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--sp-3);
}
.quote__body {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--sp-4);
}
.quote__attr { font-size: var(--fs-sm); color: var(--color-ink-mute); }
.quote__attr strong { color: var(--color-ink); font-weight: 500; letter-spacing: 0.02em; }
@media (min-width: 880px) {
  .quotes { grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
  .quotes--two { grid-template-columns: repeat(2, 1fr); }
}

.quote__body { margin: 0 0 var(--sp-4); }
.quote__body p { margin: 0; }
.quote__body p + p { margin-top: var(--sp-4); }   /* multi-paragraph reviews need air between them */
.quote__attr a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.quote__src {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--color-ink-mute);
}
.reviews-link { margin-top: var(--sp-8); }

/* ---------- Contact CTA strip ---------- */
.cta-strip {
  background: var(--color-primary);
  color: #FBF8F2;
  padding: var(--sp-9) 0;
}
.cta-strip h2 { color: #FBF8F2; max-width: 18ch; }
.cta-strip p { color: #C5CFDC; max-width: 50ch; }
.cta-strip .btn { margin-top: var(--sp-5); }

/* ---------- Footer ---------- */
.site-footer {
  background: #001F4A;
  color: #C5CFDC;
  padding: var(--sp-9) 0 var(--sp-6);
  font-size: var(--fs-sm);
}
.site-footer h4 {
  color: #FBF8F2;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.site-footer a { color: #C5CFDC; }
.site-footer a:hover { color: #FBF8F2; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 0.2rem 0; }
.footer-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(251, 248, 242, 0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-4);
  color: #8995AB;
  font-size: var(--fs-xs);
}
.social { display: inline-flex; gap: var(--sp-4); }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(251,248,242,0.2);
  border-radius: 50%;
  transition: border-color var(--transition), background var(--transition);
}
.social a:hover { border-color: #FBF8F2; background: rgba(251,248,242,0.05); }
.social svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-7); }
}

/* ---------- Founder bio card ---------- */
.bio {
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  padding: var(--sp-6) var(--sp-5);
}
.bio__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  align-items: end;
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--color-line);
}
.bio__portrait { margin: 0; }
.bio__portrait img { width: 100%; height: auto; display: block; }
.bio__id .eyebrow { margin-bottom: var(--sp-3); }
.bio__id h2 { margin: 0 0 var(--sp-4); }
.bio__lede {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.45;
  color: var(--color-ink);
  margin: 0;
  max-width: 46ch;
}
.bio__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin: 0;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--color-line);
}
.bio__facts dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  margin-bottom: var(--sp-2);
}
.bio__facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--color-ink);
}
.bio__body { padding-top: var(--sp-6); }
.bio__body p {
  margin: 0 0 var(--sp-5);
  break-inside: avoid-column;      /* no paragraph split across the column break */
  orphans: 3;
  widows: 3;
}
.bio__body p:last-child { margin-bottom: 0; }
@media (min-width: 720px) {
  .bio__facts { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
}
@media (min-width: 880px) {
  .bio { padding: var(--sp-8); }
  .bio__head { grid-template-columns: 340px 1fr; gap: var(--sp-7); }
  .bio__body { columns: 2; column-gap: var(--sp-8); }
}

/* ---------- Contact details ---------- */
.contact-info {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.contact-info > li {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--color-line);
}
.contact-info__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
}
.contact-info__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 300;
  line-height: 1.25;
  color: var(--color-ink);
  text-decoration: none;
  word-break: break-word;
}
a.contact-info__value:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-info__value--sm { font-size: var(--fs-md); }
@media (min-width: 760px) {
  .contact-info { grid-template-columns: repeat(4, 1fr); column-gap: var(--sp-7); border-bottom: 1px solid var(--color-line); }
  .contact-info > li { border-bottom: 0; padding: var(--sp-6) 0; }
}

/* one-column service intro once the sidebar checklist came out.
   Doubled class so it outranks the 880px two-column rule further down the file. */
.svc-detail__intro.svc-detail__intro--single {
  grid-template-columns: 1fr;
  max-width: 62ch;
}

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 720px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  font-weight: 500;
}
.field input, .field select, .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  padding: 0.7rem 0;
  font-size: var(--fs-base);
  color: var(--color-ink);
  border-radius: 0;
  transition: border-color var(--transition);
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-bottom-color: var(--color-primary);
}
.field--full { grid-column: 1 / -1; }
.form__note { font-size: var(--fs-xs); color: var(--color-ink-mute); }

/* ---------- Service detail page ---------- */
.svc-detail__intro {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}
.svc-detail__intro h1 { margin-top: 0; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05rem;
  width: 14px; height: 8px;
  border-left: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transform: rotate(-45deg);
}
@media (min-width: 880px) {
  .svc-detail__intro { grid-template-columns: 1.1fr 1fr; gap: var(--sp-8); align-items: start; }
}

/* FAQ */
.faq details {
  border-top: 1px solid var(--color-line);
  padding: var(--sp-5) 0;
}
.faq details:last-child { border-bottom: 1px solid var(--color-line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 1.5rem;
  color: var(--color-accent);
  transition: transform var(--transition);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-top: var(--sp-3); color: var(--color-ink-soft); max-width: 70ch; }

/* ---------- Gallery ---------- */
.gallery {
  column-count: 1;
  column-gap: var(--sp-4);
}
.gallery figure {
  break-inside: avoid;
  margin: 0 0 var(--sp-4);
  position: relative;
}
.gallery figcaption {
  position: absolute;
  bottom: var(--sp-3); left: var(--sp-3);
  background: rgba(0,28,52,0.75);
  color: #FBF8F2;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
}
@media (min-width: 600px)  { .gallery { column-count: 2; } }
@media (min-width: 960px)  { .gallery { column-count: 3; } }

/* ---------- Map placeholder ---------- */
.map-frame {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--color-line);
  background: var(--color-bg-alt) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 500'><rect width='800' height='500' fill='%23E3E8ED'/><path d='M0 380 L150 320 L300 360 L450 280 L600 320 L800 240 L800 500 L0 500 Z' fill='%23CFD4DC'/><path d='M0 280 L120 240 L260 270 L420 220 L580 250 L800 200' stroke='%23002C69' fill='none' stroke-width='2' stroke-dasharray='6 6'/><circle cx='240' cy='268' r='8' fill='%23002C69'/><circle cx='540' cy='258' r='8' fill='%23002C69'/><text x='240' y='250' fill='%232A2E33' font-family='Inter,sans-serif' font-size='12' text-anchor='middle' font-weight='500'>BOZEMAN</text><text x='540' y='240' fill='%232A2E33' font-family='Inter,sans-serif' font-size='12' text-anchor='middle' font-weight='500'>BILLINGS</text></svg>") center/cover no-repeat;
  position: relative;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease-out, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.measure { max-width: 65ch; }
.muted { color: var(--color-ink-mute); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-primary); color: #FBF8F2;
  padding: 0.6rem 1rem; z-index: 100;
}
.skip-link:focus { left: var(--sp-4); top: var(--sp-4); }


/* ---------- Service list thumbnails ---------- */
.svc-list__media { overflow: hidden; background: var(--color-section); }
.svc-list__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.svc-list__row:hover .svc-list__media img { transform: scale(1.03); }
@media (min-width: 880px) {
  .svc-list__row { grid-template-columns: 200px 1.05fr 1.3fr auto; }
}

/* ═══════════ Gallery: filters, grid, lightbox ═══════════ */
.gallery-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.gallery-filters button {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  background: transparent;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.gallery-filters button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.gallery-filters button[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FBF8F2;
}
.gallery-filters button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } }

.gallery-item { margin: 0; }
.gallery-item[hidden] { display: none !important; }
.gallery-item__btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--color-section);
  cursor: zoom-in;
  overflow: hidden;
}
.gallery-item__btn img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item__btn:hover img { transform: scale(1.04); }
.gallery-item__btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.gallery-item__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: left;
  background: linear-gradient(180deg, rgba(0,28,52,0) 0%, rgba(0,28,52,0.82) 70%);
  color: #FBF8F2;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--sp-5) 0.7rem 0.6rem;
}
.gallery-empty { padding: var(--sp-7) 0; color: var(--color-ink-mute); }

/* ── Lightbox ── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #0A1017;
  display: none;
  grid-template-rows: minmax(0, 1fr) auto;
  touch-action: pan-y;
}
.lightbox.is-open { display: grid; }
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
  padding: var(--sp-4);
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  display: block;
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.35);
}
.lightbox__cap {
  color: #E8EDF2;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: 1;
  min-width: 0;
}
.lightbox__count { color: #9FB2C6; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.lightbox button {
  width: 52px; height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #FBF8F2;
  font-size: 1.4rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition);
}
.lightbox button:hover { background: rgba(255,255,255,0.2); }
.lightbox button:focus-visible { outline: 2px solid #FBF8F2; outline-offset: 2px; }
.lightbox__close {
  position: absolute;
  top: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
  right: var(--gutter);
  z-index: 2;
}
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.lightbox__nav--prev { left: var(--sp-3); }
.lightbox__nav--next { right: var(--sp-3); }
@media (max-width: 599px) {
  .lightbox .lightbox__nav { display: none; }   /* swipe + bottom bar instead */
}
@media (min-width: 600px) {
  .lightbox__bar .lightbox__step { display: none; }
}
body.lightbox-open { overflow: hidden; }

/* ═══════════ Mobile refinements ═══════════ */
@media (max-width: 599px) {
  .hero { min-height: 76vh; }
  .hero--short { min-height: 44vh; }
  /* keep the container gutter: the shorthand above used to zero it out and text bled off-screen */
  .hero__content { padding: var(--sp-8) var(--gutter) var(--sp-7); }
  .hero h1 { font-size: clamp(1.85rem, 8.2vw, 2.5rem); }
  .hero__content p { font-size: var(--fs-base); }
  .hero__meta { gap: var(--sp-4); }
  .hero__meta .btn { width: 100%; text-align: center; }
  /* full-width copy on a phone: the side scrim can't help, so deepen the vertical one */
  .hero__media::after {
    background: linear-gradient(180deg, rgba(0,28,52,0.46) 0%, rgba(0,28,52,0.42) 22%, rgba(0,28,52,0.74) 58%, rgba(0,28,52,0.92) 100%);
  }
  .svc-list__row { padding: var(--sp-5) 0; }
  .svc-list__action a { display: inline-block; padding: 0.5rem 0; }
  .section-alt, section { padding: var(--sp-7) 0; }
  .quotes { gap: var(--sp-5); }
  .footer-grid { gap: var(--sp-6); }
  .cta-strip .btn { width: 100%; text-align: center; }
}
/* comfortable tap targets everywhere */
.nav__list a, .mobile-menu__list a, .footer-grid a, .link-arrow { padding-top: 0.15rem; padding-bottom: 0.15rem; }
.btn { min-height: 44px; }   /* never re-declare display here: .nav__cta relies on display:none below 880px */
img { max-width: 100%; height: auto; }

/* filter chips: one scrolling row on phones */
@media (max-width: 599px) {
  .gallery-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 0.4rem;
    scroll-snap-type: x proximity;
  }
  .gallery-filters::-webkit-scrollbar { display: none; }
  .gallery-filters button {
    flex: 0 0 auto;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    padding: 0.6rem 0.9rem;
    scroll-snap-align: start;
  }
  .page-header { padding: var(--sp-7) 0 var(--sp-5); }
  .gallery-item__cap { font-size: 0.62rem; letter-spacing: 0.06em; padding: var(--sp-4) 0.5rem 0.45rem; }
}

/* ═══════════ Trusted by ═══════════ */
/* ═══════════ Video ═══════════ */
.video-wrap { position: relative; }
.video-player {
  width: 100%;
  max-width: 420px;          /* vertical clip: keep it phone-sized on desktop */
  aspect-ratio: 9 / 16;
  height: auto;
  display: block;
  margin: 0 auto;
  background: #0A1017;
  border: 0;
}
.embed-slot__note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0,0,0,0.06);
  padding: 0.1em 0.35em;
}

/* ═══════════ Success in Numbers (counter bar) ═══════════ */
.stats__head { text-align: center; margin-bottom: var(--sp-7); }
.stats__head h2 { margin-bottom: 0; }
.stats__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  margin: 0;
}
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem);
  font-weight: 300;
  line-height: 1;
  color: #FBF8F2;
  font-variant-numeric: tabular-nums;   /* digits keep their width while counting up */
  letter-spacing: -0.01em;
}
.stat__label {
  margin: var(--sp-4) auto 0;
  max-width: 26ch;
  font-size: var(--fs-sm);
  line-height: 1.5;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A8C0E0;
}
@media (min-width: 700px) {
  .stats__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
  .stat + .stat { border-left: 1px solid rgba(251, 248, 242, 0.18); }
}

/* ═══════════ Embed slots (Google widgets) ═══════════ */
.embed-slot { min-height: 80px; }
.embed-slot__note {
  padding: var(--sp-5);
  background: var(--color-section);
  border: 1px dashed var(--color-line);
  color: var(--color-ink-soft);
  font-size: var(--fs-sm);
  margin: 0;
}

/* ═══════════ Featured carousel ═══════════ */
.carousel-section { padding: 0; }
.carousel { position: relative; overflow: hidden; background: var(--color-section); }
.carousel__track { list-style: none; margin: 0; padding: 0; position: relative; height: 62vh; min-height: 340px; max-height: 720px; }
.carousel__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms ease;
  pointer-events: none;
}
.carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(10,16,23,0.4);
  color: #FBF8F2; font-size: 1.5rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2;
  transition: background var(--transition);
}
.carousel__nav:hover { background: rgba(10,16,23,0.72); }
.carousel__nav:focus-visible { outline: 2px solid #FBF8F2; outline-offset: 2px; }
.carousel__nav--prev { left: var(--sp-4); }
.carousel__nav--next { right: var(--sp-4); }
.carousel__dots {
  position: absolute; left: 0; right: 0; bottom: var(--sp-4);
  display: flex; justify-content: center; gap: 0.55rem; z-index: 2;
}
.carousel__dot {
  width: 30px; height: 30px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.carousel__dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(251,248,242,0.5);
  transition: background var(--transition), transform var(--transition);
}
.carousel__dot.is-active::after { background: #FBF8F2; transform: scale(1.5); }
.carousel__dot:focus-visible { outline: 2px solid #FBF8F2; outline-offset: -4px; }
.page-header--tight { padding-top: var(--sp-7); }
@media (prefers-reduced-motion: reduce) {
  .carousel__slide { transition: none; }
}
@media (max-width: 599px) {
  .carousel__track { height: 46vh; min-height: 260px; }
  .carousel__nav { width: 44px; height: 44px; }
  .carousel__nav--prev { left: 0.5rem; }
  .carousel__nav--next { right: 0.5rem; }
}

/* ═══════════ Form validation ═══════════ */
abbr.req {
  color: #B4341C;
  text-decoration: none;
  border: 0;
  font-size: 1.05em;
  margin-left: 0.1em;
}
.opt { color: var(--color-ink-mute); text-transform: none; letter-spacing: 0; font-size: 0.95em; }
.field__error {
  margin: 0.3rem 0 0;
  font-size: var(--fs-xs);
  color: #B4341C;
  min-height: 0;
  display: none;
}
.field.has-error .field__error { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-bottom-color: #B4341C; }
.field.has-error label { color: #B4341C; }
.form__summary {
  margin-top: var(--sp-4);
  padding: 0.85rem 1rem;
  background: rgba(180,52,28,0.08);
  border-left: 3px solid #B4341C;
  color: #B4341C;
  font-size: var(--fs-sm);
}

/* ═══════════ Quote form: scope checklist ═══════════ */
.field__hint { font-size: var(--fs-xs); color: var(--color-ink-mute); margin-top: 0.3rem; display: block; }
.scope {
  margin: var(--sp-7) 0 var(--sp-6);
  padding: var(--sp-6) 0 var(--sp-4);
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.scope__intro { margin-bottom: var(--sp-5); }
.scope__title { font-size: var(--fs-xl); margin: 0 0 0.4rem; }
.scope__lede { color: var(--color-ink-soft); margin: 0; max-width: 60ch; font-size: var(--fs-sm); }
.scope-group { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
.scope-group legend {
  padding: 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-mute);
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.checks { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1.5rem; }
@media (min-width: 600px) { .checks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .checks { grid-template-columns: 1fr 1fr 1fr; } }
.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  min-height: 44px;
  cursor: pointer;
  font-size: var(--fs-sm);
  color: var(--color-ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.35;
}
.check input[type="checkbox"] {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  margin-top: 0.12rem;
  accent-color: var(--color-primary);
  border-radius: 0;
}
.check:hover span { color: var(--color-primary); }
.check input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ═══════════ Gallery: uncropped tiles ═══════════
   The grid used to force every photo into a 4:5 tile, which sliced up to 40% off
   the sides of square and landscape shots. Columns let each tile take the height of
   its own photo, so nothing is cropped and the wall still reads as a tidy grid. */
.gallery-grid {
  display: block;
  column-count: 2;
  column-gap: var(--sp-3);
}
@media (min-width: 600px) { .gallery-grid { column-count: 3; } }
@media (min-width: 960px) { .gallery-grid { column-count: 4; column-gap: var(--sp-4); } }

.gallery-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--sp-3);
}
@media (min-width: 960px) { .gallery-item { margin-bottom: var(--sp-4); } }

.gallery-item__btn img {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
}

/* ═══════════ Content photos: no cropping ═══════════
   Service cards, the services list, the editorial splits and the team photo were
   each locked to a fixed ratio, so portrait shots lost up to 44% of the frame.
   They now take the height of the photo itself. */
.svc-card__media img,
.svc-list__media img,
.split img,
.split__media img,
.team-teaser img {
  aspect-ratio: auto;
  height: auto;
  object-fit: fill;
}

/* ═══════════ Photo badge ═══════════
   The logo is overlaid at display time rather than burned into the JPEGs, so the
   photos keep their original framing and their original file quality, and the badge
   can never be sliced off by `object-fit: cover`. Heroes are excluded: a badge there
   would collide with the site header. */
/* .carousel__slide is already `position: absolute; inset: 0` - re-declaring it
   here would break the slide's height and let the photo overflow. */
.gallery-item__btn,
.svc-card__media,
.svc-list__media,
.split__media,
.team-teaser > div:last-child { position: relative; }

.carousel__slide::after,
.gallery-item__btn::after,
.svc-card__media::after,
.svc-list__media::after,
.split__media::after,
.team-teaser > div:last-child::after,
.lightbox__badge {
  content: "";
  position: absolute;
  top: 0;
  width: min(33%, 260px);
  aspect-ratio: 1 / 0.432;
  background: url(../images/wm-badge.png) center / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 2;
}
.carousel__slide::after,
.gallery-item__btn::after,
.svc-card__media::after,
.svc-list__media::after,
.split__media::after,
.team-teaser > div:last-child::after { left: 50%; transform: translateX(-50%); }

.lightbox__stage { position: relative; }
.lightbox__badge { width: auto; aspect-ratio: auto; display: none; }