/* ==========================================================================
   Services pages: /services (overview) and /services/<slug> (division detail).
   Colors from tokens.css only. Division colors are accents (bars, dots, icon tints).
   ========================================================================== */

/* ---- Overview: intro facts ---------------------------------------------- */
.svc-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem;
  background: var(--surface-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.svc-facts .stat-tile { padding: .5rem 0 1.25rem; }
.svc-facts__divisions {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem;
  border-top: 1px solid var(--color-border); padding-top: 1.25rem;
}
.svc-facts__divisions a { text-decoration: none; }
.svc-facts__divisions a:hover { color: var(--color-primary); }

/* ---- Overview: division cards ------------------------------------------- */
.svc-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--surface-card); border-radius: var(--radius); overflow: hidden;
  color: var(--color-text); text-decoration: none; isolation: isolate;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.svc-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gradient-green); }
.svc-card--lg .svc-card__media { aspect-ratio: 16 / 9; }
.svc-card__media img, .svc-card__media .img-fallback {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; min-height: 0;
  transition: transform var(--dur-slow) var(--ease-out);
}
.svc-card__media::after { /* division accent bar along the photo's bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: var(--division-color, var(--color-primary));
  transition: height var(--dur) var(--ease-out);
}
.svc-card__body {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; flex: 1;
  padding: 2.75rem clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
}
.svc-card__icon {
  position: absolute; top: 0; left: clamp(1.5rem, 2.5vw, 2rem); transform: translateY(-50%);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-card); box-shadow: var(--shadow-soft); color: var(--color-heading); font-size: 1.6rem;
}
.svc-card__icon img { width: 36px; height: 36px; object-fit: contain; }
.svc-card__name { font-size: var(--fs-h4); margin: 0; text-transform: uppercase; color: var(--color-heading); }
.svc-card--lg .svc-card__name { font-size: var(--fs-h3); }
.svc-card__summary { margin: 0; color: var(--color-text-muted); font-size: .9688rem; line-height: 1.6; }
.svc-card .link-arrow { margin-top: auto; padding-top: .5rem; color: var(--color-primary); }
a.svc-card:hover, a.svc-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-soft); color: var(--color-text); }
a.svc-card:hover .svc-card__media img { transform: scale(1.05); }
a.svc-card:hover .svc-card__media::after { height: 7px; }
a.svc-card:hover .link-arrow .bi { transform: translateX(4px); }

.svc-chips { margin-top: .25rem; } /* .chips.chips--division (components.css) */

/* ---- Overview: how we work (navy band) ---------------------------------- */
.svc-steps > li { display: flex; }
.svc-step { /* + .tile-on-dark; number is .step-num (components.css) */
  position: relative; width: 100%; padding: 2rem 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.svc-step__title { font-size: var(--fs-h4); text-transform: uppercase; margin: 0; }

/* ---- Overview: property types + regions --------------------------------- */
.svc-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: .75rem; }
.svc-types li {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--surface-card);
  font-weight: var(--fw-medium); color: var(--color-heading); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); font-size: .875rem;
}
.svc-types .bi { font-size: 1.4rem; color: var(--color-primary); }
.svc-region { display: flex; gap: 1.25rem; align-items: flex-start; }
.svc-region__label {
  display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--color-text-muted); font-weight: var(--fw-medium); margin-bottom: .25rem;
}
.svc-region__area { font-size: var(--fs-h4); text-transform: uppercase; margin-bottom: .5rem; }

/* ---- Detail: intro -------------------------------------------------------- */
.svc-intro { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); margin-bottom: 1.75rem; }
.svc-intro__icon {
  width: clamp(72px, 9vw, 96px); height: clamp(72px, 9vw, 96px); flex: none; border-radius: var(--radius-lg);
  display: grid; place-items: center; font-size: 2.25rem; color: var(--color-heading);
  background: color-mix(in srgb, var(--division-color, var(--color-primary)) 22%, transparent);
}
.svc-intro__icon img { width: 52%; height: 52%; object-fit: contain; }
.svc-intro__heading { margin: .5rem 0 0; font-size: clamp(1.75rem, 3.2vw, 2.75rem); text-wrap: balance; }
.svc-intro__copy { max-width: 70ch; }
.svc-intro__copy .lead-text { color: var(--color-heading); }

.svc-subhead {
  font-size: var(--fs-h4); text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem; display: flex; align-items: center; gap: 1rem;
}
.svc-subhead::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

.svc-offerings > ul > li { display: flex; }
.svc-offering {
  position: relative; width: 100%; padding: 1.5rem 1.5rem 1.5rem 1.75rem;
  background: var(--surface-card); border-radius: var(--radius); overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.svc-offering::before { /* division accent bar */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--division-color, var(--color-primary));
}
.svc-offering:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.svc-offering__num {
  display: block; font-size: .75rem; font-weight: var(--fw-semibold); letter-spacing: var(--ls-button);
  color: var(--color-text-muted); margin-bottom: .4rem; font-variant-numeric: tabular-nums;
}
.svc-offering__name { font-size: 1.0625rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .4rem; }
.svc-offering__text { margin: 0; color: var(--color-text-muted); font-size: .9375rem; line-height: 1.6; }

/* ---- Detail: aside (division nav + quick contact) ------------------------ */
.svc-aside { display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 992px) {
  .svc-aside { position: sticky; top: calc(var(--header-height-compact) + 1.5rem); }
}
@media (min-width: 1200px) { /* the top info bar stays visible above the compact header */
  .svc-aside { top: calc(var(--topbar-height) + var(--header-height-compact) + 1.5rem); }
}
.svc-nav, .svc-quote { background: var(--surface-card); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-soft); }
.svc-nav__title, .svc-quote__title {
  display: block; font-size: .8125rem; font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--ls-button); color: var(--color-heading); margin-bottom: 1rem;
}
.svc-nav ul { display: flex; flex-direction: column; gap: .25rem; }
.svc-nav__link {
  position: relative; display: flex; align-items: center; gap: .85rem;
  padding: .7rem .85rem; border-radius: var(--radius); text-decoration: none; color: var(--color-text);
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.svc-nav__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--division-color, var(--color-primary)); }
.svc-nav__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.svc-nav__name { font-weight: var(--fw-medium); color: var(--color-heading); }
.svc-nav__division { font-size: .75rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.svc-nav__link .bi { font-size: .8rem; color: var(--color-text-muted); transition: transform var(--dur-fast); }
.svc-nav__link:hover { background: var(--surface-page); color: var(--color-text); }
.svc-nav__link:hover .bi { transform: translateX(3px); }
.svc-nav__link.is-active { background: var(--surface-sage); }
.svc-nav__link.is-active::before {
  content: ""; position: absolute; left: 0; top: .5rem; bottom: .5rem; width: 3px; border-radius: 3px;
  background: var(--division-color, var(--color-primary));
}
.svc-nav__link.is-active .svc-nav__name { color: var(--color-primary); }
.svc-nav__all { margin-top: 1rem; padding-left: .85rem; }

.svc-quote { background: var(--brand-navy); color: var(--color-text-on-dark-muted); }
.svc-quote__title { color: var(--white); }
.svc-quote p { font-size: .9375rem; }
.svc-quote__phones { margin: 0 0 1.25rem; display: grid; gap: .6rem; }
.svc-quote__phones li { display: flex; flex-direction: column; line-height: 1.35; }
.svc-quote__phones span { font-size: .75rem; text-transform: uppercase; letter-spacing: var(--ls-eyebrow); }
.svc-quote__phones a { color: var(--white); text-decoration: none; font-weight: var(--fw-medium); font-size: 1.0625rem; }
.svc-quote__phones a:hover { color: var(--brand-lime); }

/* ---- Detail: why (green band) -------------------------------------------- */
.svc-why { display: flex; flex-direction: column; gap: 1rem; height: 100%; padding-top: 1.5rem; border-top: 1px solid var(--surface-glass-border); }
.svc-why__title { font-size: var(--fs-h4); text-transform: uppercase; margin: 0; }
.section-green .svc-why p { color: var(--color-text-on-dark-muted); }

/* ---- Detail: photo strip ---------------------------------------------------- */
.svc-gallery__heading { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.svc-gallery__item { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--gradient-green); }
.svc-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.svc-gallery__item:hover img { transform: scale(1.04); }

/* ---- Detail: FAQ accordion ------------------------------------------------- */
.svc-faq {
  --bs-accordion-bg: var(--surface-card);
  --bs-accordion-border-color: transparent;
  --bs-accordion-border-radius: var(--radius);
  --bs-accordion-inner-border-radius: var(--radius);
  --bs-accordion-btn-color: var(--color-heading);
  --bs-accordion-btn-padding-x: 1.5rem;
  --bs-accordion-btn-padding-y: 1.25rem;
  --bs-accordion-body-padding-x: 1.5rem;
  --bs-accordion-body-padding-y: 0;
  --bs-accordion-active-bg: var(--surface-card);
  --bs-accordion-active-color: var(--color-primary);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--focus-ring);
  display: flex; flex-direction: column; gap: .75rem;
}
.svc-faq .accordion-item { border-radius: var(--radius); overflow: hidden; }
.svc-faq .accordion-header { margin: 0; }
.svc-faq .accordion-button { font-size: 1.0625rem; font-weight: var(--fw-medium); line-height: 1.4; gap: 1rem; }
.svc-faq .accordion-button:not(.collapsed) { box-shadow: none; }
.svc-faq .accordion-body { padding-bottom: 1.5rem; color: var(--color-text); }

/* ---- Small screens --------------------------------------------------------- */
@media (max-width: 575.98px) {
  .svc-facts { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .svc-intro { align-items: flex-start; }
  .svc-region { flex-direction: column; gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card__media img, .svc-offering, .svc-gallery__item img { transition: none; }
  a.svc-card:hover, .svc-offering:hover { transform: none; }
  a.svc-card:hover .svc-card__media img, .svc-gallery__item:hover img { transform: none; }
}