/* Skycrest Homes component styles. Depends on tokens.css. */

/* ── Motion layer ─────────────────────────────────────────────────────────
   Two tiers, deliberately split by *kind* of motion so they never drive the
   same property on the same element:

   - One-shot entrance reveals (this block) run on IntersectionObserver and
     CSS transitions. Every browser gets them.
   - Progress-linked motion — parallax, numeral drift, the pinned process
     track — runs on scroll-driven CSS in the @supports block at the end of
     this file, off the main thread, and is simply absent where unsupported.

   Keeping them apart matters because `animation` beats `transition` outright:
   a scroll-driven transform on a card would silently kill its hover.

   The hidden state below is gated on .sk-js, which the script puts on <html>
   and removes again if anything throws, so a broken script leaves a fully
   visible page rather than a blank one. :where() keeps that gate at zero
   specificity so it never outranks a component rule. */
:where(.sk-js) [data-sk-reveal] {
  opacity: 0;
  transform: translateY(var(--sk-distance-md));
  transition:
    opacity var(--sk-duration-slow) var(--sk-ease-entrance),
    transform var(--sk-duration-slow) var(--sk-ease-entrance);
  transition-delay: calc(var(--sk-reveal-index, 0) * var(--sk-stagger));
}

[data-sk-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Wipe variant for media frames. clip-path is paint-bound rather than reliably
   composited, so it stays on the few image frames and off the ~20 text reveals.

   The transition shorthand here resets transition-delay, so the stagger has to
   be restated or every wipe fires on the same frame regardless of its index. */
:where(.sk-js) [data-sk-reveal='wipe'] {
  clip-path: inset(0 var(--sk-wipe-from) 0 0);
  transition:
    opacity var(--sk-duration-slow) var(--sk-ease-entrance),
    transform var(--sk-duration-slow) var(--sk-ease-entrance),
    clip-path var(--sk-duration-cinematic) var(--sk-ease-entrance);
  transition-delay: calc(var(--sk-reveal-index, 0) * var(--sk-stagger));
}
[data-sk-reveal='wipe'].is-revealed {
  clip-path: inset(0 0 0 0);
}

/* Hairline draw. Overrides the opacity/translate of the base rule entirely so
   a 1px rule only ever scales, which stays composited. */
:where(.sk-js) [data-sk-reveal='rule'] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--sk-duration-cinematic) var(--sk-ease-standard);
  transition-delay: calc(var(--sk-reveal-index, 0) * var(--sk-stagger));
}
[data-sk-reveal='rule'].is-revealed {
  transform: scaleX(1);
}

/* Stagger groups: one observer target per group rather than one per child.
   These set a custom property only, so they can never conflict on a real one. */
[data-sk-stagger] > :nth-child(2) {
  --sk-reveal-index: 1;
}
[data-sk-stagger] > :nth-child(3) {
  --sk-reveal-index: 2;
}
[data-sk-stagger] > :nth-child(4) {
  --sk-reveal-index: 3;
}
[data-sk-stagger] > :nth-child(n + 5) {
  --sk-reveal-index: 4;
}

/* Eyebrow */
.sk-eyebrow {
  margin: 0 0 var(--sk-space-2);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 500;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: var(--sk-primary);
}

.sk-eyebrow--onDark {
  color: var(--sk-sky);
}

/* Button.

   The cursor magnet writes the `translate` property rather than `transform`,
   so it can never clobber a transform set elsewhere, and transitioning it
   gives the pull its easing for free with no rAF lerp. */
.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-space-1);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--sk-radius-sm);
  font-family: var(--sk-font-body);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    background-color var(--sk-duration-fast) var(--sk-ease-standard),
    border-color var(--sk-duration-fast) var(--sk-ease-standard),
    color var(--sk-duration-fast) var(--sk-ease-standard),
    translate var(--sk-duration-fast) var(--sk-ease-standard);
}

/* Hover fill rises from the baseline instead of cross-fading the background,
   which is a repaint. The label needs its own stacking position to survive it. */
.sk-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--sk-btn-sweep, transparent);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform var(--sk-duration-base) var(--sk-ease-standard);
}
.sk-btn:hover::before,
.sk-btn:focus-visible::before {
  transform: scaleY(1);
}
.sk-btn__label {
  position: relative;
  z-index: 1;
}

.sk-btn--sm {
  padding: 0.7rem 1.35rem;
  font-size: var(--sk-text-xs);
}
.sk-btn--md {
  padding: 0.95rem 1.85rem;
  font-size: var(--sk-text-sm);
}
.sk-btn--lg {
  padding: 1.15rem 2.4rem;
  font-size: var(--sk-text-sm);
}

.sk-btn--primary {
  --sk-btn-sweep: var(--sk-ink-deep);
  background: var(--sk-primary);
  color: var(--sk-white);
}

.sk-btn--secondary {
  --sk-btn-sweep: var(--sk-primary);
  background: transparent;
  border-color: var(--sk-primary);
  color: var(--sk-primary);
}
.sk-btn--secondary:hover {
  color: var(--sk-white);
}

.sk-btn--ghost {
  --sk-btn-sweep: rgba(255, 255, 255, 0.16);
  background: transparent;
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--sk-white);
}
.sk-btn--ghost:hover {
  border-color: var(--sk-white);
}

.sk-btn:focus-visible {
  outline: 2px solid var(--sk-sky);
  outline-offset: 3px;
}

/* Section header.

   The title measure is in ch so it scales with its own font size: the line
   count stays roughly constant from 36px to 88px, and copy can grow or shrink
   by a third without re-tuning anything. */
.sk-section-header {
  max-width: 54rem;
}
.sk-section-header--center {
  margin-inline: auto;
  text-align: center;
}
.sk-section-header__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-lg);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tightest);
  color: var(--sk-ink-deep);
  text-wrap: balance;
}
/* Only a title that heads a whole section takes the larger tier. The same
   class inside a split column stays at display-lg so it cannot swamp it. */
.sk-section-header > .sk-section-header__title {
  font-size: var(--sk-display-xl);
  max-width: 16ch;
}
.sk-section-header--center .sk-section-header__title,
.sk-section-header--center .sk-section-header__intro {
  margin-inline: auto;
}
.sk-section-header__intro {
  margin: var(--sk-space-4) 0 0;
  max-width: 48ch;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-relaxed);
  color: var(--sk-slate);
}

/* Hero */
.sk-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92vh, 900px);
  padding: var(--sk-space-20) var(--sk-space-4) var(--sk-space-12);
  /* clip, not hidden: hidden would make the hero a scroll container, and the
     parallax on __media resolves its anonymous view() timeline against the
     nearest scroll container. It would silently never advance. */
  overflow: clip;
  isolation: isolate;
  background: var(--sk-ink);
}

.sk-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.sk-hero__image,
.sk-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}
.sk-hero--overlay-soft::after {
  background: linear-gradient(
    to top,
    rgba(22, 35, 43, 0.78) 0%,
    rgba(22, 35, 43, 0.28) 55%,
    rgba(22, 35, 43, 0.1) 100%
  );
}
/* Tuned against the worst case rather than against the photo that happens to be
   in place: a pure white pixel. The hero image is Dan's to swap, and the
   headline sits mid-frame where this house puts bright siding and sky, so a
   scrim that only clears 4.5:1 on the current crop is a trap. At these stops the
   tightest element, the 13px eyebrow highest up the frame, still holds 4.91:1
   over solid white, so any photo Dan drops in here is safe. */
.sk-hero--overlay-strong::after {
  background: linear-gradient(
    to top,
    rgba(22, 35, 43, 0.92) 0%,
    rgba(22, 35, 43, 0.75) 55%,
    rgba(22, 35, 43, 0.55) 100%
  );
}

.sk-hero__inner {
  width: 100%;
  max-width: var(--sk-container);
  margin-inline: auto;
}

.sk-hero__headline {
  margin: 0;
  max-width: 15ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-hero);
  line-height: var(--sk-leading-display);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);
  text-wrap: balance;
}

.sk-hero__subhead {
  margin: 0;
  max-width: 46ch;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-relaxed);
  color: rgba(255, 255, 255, 0.86);
}

.sk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-2);
  margin-top: var(--sk-space-5);
}

.sk-hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: var(--sk-space-4);
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
}
.sk-hero__scroll-line {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--sk-sky);
  animation: sk-scroll-cue 2.4s var(--sk-ease-standard) infinite;
}

@keyframes sk-scroll-cue {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(250%);
  }
}

/* Stats */
.sk-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sk-space-6);
}
.sk-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-1);
  padding-top: var(--sk-space-3);
  border-top: 1px solid var(--sk-line);
}
/* tabular-nums matters here: the counters tick through every digit, and
   proportional figures make the whole number jitter on each frame. */
.sk-stats__value {
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-lg);
  line-height: 0.9;
  letter-spacing: var(--sk-tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--sk-ink-deep);
}
.sk-stats__label {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  color: var(--sk-slate-muted);
}
.sk-stats--dark .sk-stats__item {
  border-color: rgba(255, 255, 255, 0.18);
}
.sk-stats--dark .sk-stats__value {
  color: var(--sk-white);
}
.sk-stats--dark .sk-stats__label {
  color: rgba(255, 255, 255, 0.66);
}

/* Process timeline */
.sk-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sk-space-6);
  margin: 0;
  padding: var(--sk-space-6) 0 0;
  list-style: none;
}
/* The rail is two pseudo-elements rather than a nested span, because <ol> only
   allows <li> children and a stray <span> there is invalid. The fill scales
   instead of animating width, so it composites. */
.sk-process::before,
.sk-process::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
}
.sk-process::before {
  background: var(--sk-line);
}
.sk-process::after {
  background: var(--sk-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--sk-duration-cinematic) var(--sk-ease-standard);
}
.sk-process.is-revealed::after {
  transform: scaleX(1);
}
.sk-process__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sk-space-1);
}
.sk-process__number {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-widest);
  color: var(--sk-primary);
}
.sk-process__title {
  margin: 0;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-md);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-ink-deep);
}
.sk-process__body {
  margin: 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-base);
  line-height: var(--sk-leading-relaxed);
  color: var(--sk-slate);
}

/* Project card */
.sk-project {
  display: block;
  text-decoration: none;
  color: inherit;
}
.sk-project__frame {
  display: block;
  overflow: hidden;
  background: var(--sk-limestone);
  aspect-ratio: 4 / 3;
}
.sk-project--feature .sk-project__frame {
  aspect-ratio: 16 / 9;
}
/* One transform declaration, three states driven through a custom property:
   the entrance settle, the resting scale and the hover push. Written as three
   separate transform rules they would need a wrapper element each to avoid
   overwriting one another. */
.sk-project__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--sk-project-scale, 1.001));
  transition: transform var(--sk-duration-cinematic) var(--sk-ease-standard);
}
:where(.sk-js) [data-sk-reveal='wipe'] .sk-project__image {
  --sk-project-scale: var(--sk-scale-from);
}
[data-sk-reveal='wipe'].is-revealed .sk-project__image {
  --sk-project-scale: 1.001;
}
.sk-project:hover .sk-project__image {
  --sk-project-scale: 1.05;
}
.sk-project__meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: var(--sk-space-2);
}
.sk-project__location {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: var(--sk-primary);
}
.sk-project__title {
  margin: 0;
  max-width: 24ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-text-2xl);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-ink-deep);
}
.sk-project--feature .sk-project__title {
  font-size: var(--sk-display-md);
}
.sk-project__detail {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  color: var(--sk-slate-muted);
}

/* Before / after */
.sk-ba {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sk-limestone);
  user-select: none;
}
.sk-ba__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sk-ba__after {
  position: absolute;
  inset: 0;
}
.sk-ba__label {
  position: absolute;
  bottom: var(--sk-space-2);
  padding: 0.35rem 0.75rem;
  background: rgba(22, 35, 43, 0.72);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  color: var(--sk-white);
}
.sk-ba__label--before {
  left: var(--sk-space-2);
}
.sk-ba__label--after {
  right: var(--sk-space-2);
}
.sk-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.sk-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sk-white);
  pointer-events: none;
}
.sk-ba__handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  border: 2px solid var(--sk-white);
  border-radius: var(--sk-radius-pill);
  background: rgba(22, 35, 43, 0.4);
  transform: translate(-50%, -50%);
}

/* Testimonial */
.sk-testimonial {
  margin: 0;
  max-width: 62ch;
}
.sk-testimonial__quote {
  margin: 0;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-md);
  line-height: var(--sk-leading-snug);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-ink-deep);
  text-wrap: pretty;
}
.sk-testimonial__quote p {
  margin: 0;
  /* Hangs the opening quote mark into the margin so the first line of text
     starts on the same vertical as everything else in the column. */
  text-indent: -0.42em;
}
.sk-testimonial__attribution {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-space-1);
  margin-top: var(--sk-space-3);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
}
.sk-testimonial__author {
  font-weight: 500;
  color: var(--sk-ink);
}
.sk-testimonial__detail {
  color: var(--sk-slate-muted);
}
.sk-testimonial--dark .sk-testimonial__quote,
.sk-testimonial--dark .sk-testimonial__author {
  color: var(--sk-white);
}
.sk-testimonial--dark .sk-testimonial__detail {
  color: rgba(255, 255, 255, 0.66);
}
.sk-testimonial__more {
  margin-top: var(--sk-space-6);
}

/* FAQ */
.sk-faq {
  border-top: 1px solid var(--sk-line);
}
.sk-faq__item {
  border-bottom: 1px solid var(--sk-line);
}
.sk-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-3);
  padding: var(--sk-space-3) 0;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-text-xl);
  color: var(--sk-ink);
  cursor: pointer;
  list-style: none;
}
.sk-faq__question::-webkit-details-marker {
  display: none;
}
.sk-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sk-faq__icon::before,
.sk-faq__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--sk-primary);
  transition: transform var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-faq__icon::after {
  transform: rotate(90deg);
}
.sk-faq__item[open] .sk-faq__icon::after {
  transform: rotate(0deg);
}
.sk-faq__answer {
  padding-bottom: var(--sk-space-3);
  max-width: 68ch;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-base);
  line-height: var(--sk-leading-relaxed);
  color: var(--sk-slate);
}
.sk-faq__answer p {
  margin: 0;
}

/* CTA band */
.sk-cta {
  position: relative;
  padding: var(--sk-space-16) var(--sk-space-4);
  overflow: hidden;
  isolation: isolate;
  background: var(--sk-ink);
  text-align: center;
}
.sk-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.sk-cta__inner {
  max-width: var(--sk-container-narrow);
  margin-inline: auto;
}
.sk-cta__headline {
  margin: 0 auto;
  max-width: 18ch;
  font-family: var(--sk-font-display);
  font-weight: 400;
  font-size: var(--sk-display-xl);
  line-height: var(--sk-leading-tight);
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-white);
  text-wrap: balance;
}
.sk-cta__body {
  margin: var(--sk-space-4) auto 0;
  max-width: 50ch;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-lg);
  line-height: var(--sk-leading-relaxed);
  /* Matches the hero subhead, and for the same reason: the band behind this is
     a photo at 32% over ink, so a white pixel lands around rgb(97,105,111). At
     0.8 this text measured 4.25:1 there. 0.86 is the floor that clears 4.5. */
  color: rgba(255, 255, 255, 0.86);
}
.sk-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sk-space-2);
  margin-top: var(--sk-space-5);
}

/* Header.

   The solid state is a pseudo-element fading in, not a background-color and
   box-shadow transition on the band itself. Those repaint a full-width fixed
   element on every frame of the scroll; opacity on a layer does not. */
.sk-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  isolation: isolate;
  background: transparent;
}
/* The transparent state sits at the top of the hero, which is the one place the
   hero's own bottom-up scrim is at its weakest, so the white nav can land on
   bright sky. This band carries its own scrim and feathers out below itself so
   it does not read as a bar. It has to fade on scroll rather than simply being
   covered by the solid state, because the feather is 2rem taller than the header
   and that tail would otherwise smudge below the white bar. */
.sk-header--transparent::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 2rem);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 35, 43, 0.5), transparent);
  transition: opacity var(--sk-duration-base) var(--sk-ease-standard);
}
.sk-header--transparent.is-stuck::before {
  opacity: 0;
}
.sk-header::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sk-white);
  box-shadow: var(--sk-shadow-sm);
  opacity: 0;
  transition: opacity var(--sk-duration-base) var(--sk-ease-standard);
}
/* :is(), not :where(). The reveal gates at the top of this file need zero
   specificity, but this one has to outrank .sk-header::after above it.
   is-open is here because the drawer scrolls under the header: over a
   transparent header its list would collide with the logo. */
:is(.sk-header.is-stuck, .sk-header--solid, .sk-header.is-open)::after {
  opacity: 1;
}
.sk-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-4);
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding: var(--sk-space-2) var(--sk-space-4);
}
.sk-header__brand img {
  display: block;
  height: auto;
}
.sk-header__list {
  display: flex;
  align-items: center;
  gap: var(--sk-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  letter-spacing: var(--sk-tracking-wide);
  text-decoration: none;
  color: var(--sk-white);
  transition: color var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-header.is-stuck .sk-header__link,
.sk-header--solid .sk-header__link,
.sk-header.is-stuck .sk-menu__trigger,
.sk-header--solid .sk-menu__trigger,
.sk-header.is-stuck .sk-header__phone,
.sk-header--solid .sk-header__phone {
  color: var(--sk-ink);
}
.sk-header__link:hover {
  color: var(--sk-primary);
}
.sk-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sk-space-2);
}
.sk-header__phone {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--sk-white);
}
.sk-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* 1200, not a tighter fit: six items, two of them with carets, plus the phone,
   CTA and (for now) the versions pill need the room, and a mega panel opened
   from a cramped bar reads as a mistake. */
@media (max-width: 1200px) {
  .sk-header__nav,
  .sk-header__phone {
    display: none;
  }
  .sk-header__toggle {
    display: inline-flex;
  }
}

/* Temporary review chrome: flips between the two homepage drafts while the
   direction is being chosen. Delete this block and the pill in both HTML
   headers at launch. */
.sk-versions {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--sk-radius-pill);
  overflow: hidden;
}
.sk-versions__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 500;
  letter-spacing: var(--sk-tracking-wide);
  text-decoration: none;
  color: var(--sk-white);
  transition:
    color var(--sk-duration-fast) var(--sk-ease-standard),
    background-color var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-versions__link:not([aria-current]):hover {
  text-decoration: underline;
}
.sk-versions__link[aria-current] {
  color: var(--sk-ink);
  background: var(--sk-white);
}
.sk-header.is-stuck .sk-versions,
.sk-header.is-open .sk-versions {
  border-color: rgba(22, 35, 43, 0.45);
}
.sk-header.is-stuck .sk-versions__link,
.sk-header.is-open .sk-versions__link {
  color: var(--sk-ink);
}
.sk-header.is-stuck .sk-versions__link[aria-current],
.sk-header.is-open .sk-versions__link[aria-current] {
  color: var(--sk-white);
  background: var(--sk-ink);
}

/* Mega menu.

   The full-width panels anchor to the fixed .sk-header itself (its nearest
   positioned ancestor), so left/right 0 spans the viewport; the --compact
   variant re-anchors to its own <li> for a narrow dropdown. Hover opening is
   pure CSS and works with no JS at all; site.js only mirrors the state onto
   aria-expanded so touch and keyboard get a click toggle and Escape/outside
   clicks have something to close. :focus-within opening is gated to the no-JS
   page: with JS present it would pin the panel open under the focused trigger
   and make the click-to-close half of the toggle a no-op. */
.sk-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  /* 44px, not the 18px the text alone gives. The bar's own height is set by the
     68px logo, so the taller hit box costs no layout; it only stops a pointer
     from having to find an 18px strip. The --compact panel anchors to this
     <li>, so its drop point moves down with it, which clears the header edge. */
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  letter-spacing: var(--sk-tracking-wide);
  color: var(--sk-white);
  transition: color var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-menu__trigger:hover {
  color: var(--sk-primary);
}
.sk-menu__caret {
  flex: none;
  width: 0.42em;
  height: 0.42em;
  margin-top: -0.2em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--sk-white);
  border-top: 1px solid var(--sk-line);
  box-shadow: var(--sk-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--sk-duration-base) var(--sk-ease-standard),
    transform var(--sk-duration-base) var(--sk-ease-standard),
    visibility var(--sk-duration-base);
}
/* Bridges the header's bottom padding so the pointer can travel from trigger
   to panel without the hover chain breaking mid-crossing. Inert while the
   panel is closed because visibility is inherited. */
.sk-menu__panel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--sk-space-3);
}
.sk-menu:hover > .sk-menu__panel,
html:not(.sk-js) .sk-menu:focus-within > .sk-menu__panel,
.sk-menu > [aria-expanded="true"] + .sk-menu__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.sk-menu:hover .sk-menu__caret,
html:not(.sk-js) .sk-menu:focus-within .sk-menu__caret,
.sk-menu > [aria-expanded="true"] .sk-menu__caret {
  transform: rotate(225deg);
}
.sk-menu__inner {
  display: flex;
  gap: var(--sk-space-10);
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding: var(--sk-space-6) var(--sk-space-4) var(--sk-space-8);
}
.sk-menu__group + .sk-menu__group {
  padding-left: var(--sk-space-10);
  border-left: 1px solid var(--sk-line);
}
.sk-menu__eyebrow {
  margin: 0 0 var(--sk-space-2);
  font-size: var(--sk-text-xs);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: var(--sk-slate);
}
.sk-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-menu__list--cols {
  columns: 2;
  column-gap: var(--sk-space-8);
}
.sk-menu__list--cols li {
  break-inside: avoid;
}
.sk-menu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-lg);
  text-decoration: none;
  color: var(--sk-ink);
  transition: color var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-menu__link:hover {
  color: var(--sk-primary);
}
.sk-menu__link--minor {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  color: var(--sk-slate);
}

/* Photo card filling the right side of the full-width panels. The --alt image
   is stacked on top and fades in while the second link group (--alt) is
   hovered, so the picture follows the column the pointer is in; the sibling
   combinator keeps that working without :has(), and everywhere else it simply
   degrades to a static photo. Hidden below 1400px: the link columns are
   nowrap, so on narrower desktops the card would force the panel past the
   viewport before flexbox could shrink anything. */
.sk-menu__figure {
  position: relative;
  display: block;
  flex: 0 1 400px;
  min-width: 280px;
  margin-left: auto;
  align-self: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.sk-menu__pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity var(--sk-duration-base) var(--sk-ease-standard),
    transform var(--sk-duration-cinematic) var(--sk-ease-standard);
}
.sk-menu__pic--alt {
  opacity: 0;
}
.sk-menu__group--alt:hover ~ .sk-menu__figure .sk-menu__pic--alt {
  opacity: 1;
}
.sk-menu__figure:hover .sk-menu__pic {
  transform: scale(1.05);
}
.sk-menu__figcap {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: var(--sk-space-6) var(--sk-space-3) var(--sk-space-2);
  /* The 45% hold keeps the scrim >= 0.82 alpha behind the whole text line, so
     white type clears 4.5:1 even over a blown-out white pixel. */
  background: linear-gradient(
    to top,
    rgba(22, 35, 43, 0.92),
    rgba(22, 35, 43, 0.82) 45%,
    rgba(22, 35, 43, 0)
  );
  color: var(--sk-white);
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-base);
}
.sk-menu__figcap::after {
  content: '\2192';
  transition: translate var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-menu__figure:hover .sk-menu__figcap::after {
  translate: 4px 0;
}
@media (max-width: 1400px) {
  .sk-menu__figure {
    display: none;
  }
}
.sk-menu--compact {
  position: relative;
}
/* The negative left offset lines the panel's text edge up with the trigger
   label rather than the panel's own border. */
.sk-menu--compact .sk-menu__panel {
  left: calc(-1 * var(--sk-space-4));
  right: auto;
  top: calc(100% + var(--sk-space-2));
  width: max-content;
  min-width: 220px;
  padding: var(--sk-space-2) var(--sk-space-4);
  border: 1px solid var(--sk-line);
}

/* Drawer accordions for the grouped nav items. <details>/<summary> keeps them
   usable with no JS, and the drawer's close-on-link-click handler in site.js
   ignores summary clicks because a summary is not an <a>. Base .sk-drawer
   styles live in site.css and v2.css; these classes are new, so the single
   copy here serves both pages. */
.sk-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-2);
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--sk-font-display);
  font-size: var(--sk-text-3xl);
  letter-spacing: var(--sk-tracking-tight);
  color: var(--sk-ink);
}
.sk-drawer__summary::-webkit-details-marker {
  display: none;
}
.sk-drawer__summary .sk-menu__caret {
  width: 0.32em;
  height: 0.32em;
  color: var(--sk-slate);
}
.sk-drawer__group[open] .sk-menu__caret {
  transform: rotate(225deg);
}
.sk-drawer__sublist {
  margin: var(--sk-space-1) 0 var(--sk-space-3) 2px;
  padding: 0 0 0 var(--sk-space-3);
  list-style: none;
  border-left: 1px solid var(--sk-line);
}
.sk-drawer__subhead {
  display: flex;
  align-items: flex-end;
  min-height: 36px;
  font-size: var(--sk-text-xs);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: var(--sk-slate);
}
.sk-drawer__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-base);
  text-decoration: none;
  color: var(--sk-ink);
}
@media (max-width: 720px) {
  .sk-drawer__summary {
    font-size: var(--sk-text-2xl);
  }
}

/* Footer.

   Four bands: the lockup and link grid, the service-area ribbon, the legal
   bar, and an oversized wordmark bled off the bottom edge. The wordmark is the
   same typographic-texture device as .sk-numeral and is held at the same
   opacity register, so it reads as a watermark in the surface rather than as a
   second logo. Everything else is lifted above it on z-index. */
.sk-footer {
  position: relative;
  overflow: hidden;
  background: var(--sk-paper-dark);
  color: rgba(255, 255, 255, 0.72);
}
.sk-footer > *:not(.sk-footer__mark) {
  position: relative;
  z-index: 1;
}
/* Link defaults come first on purpose. `.sk-footer a` and a rule like
   `.sk-footer__areasList a` carry identical specificity, so whichever is
   written last wins: with the defaults below the components, `color: inherit`
   silently flattened the ribbon's two tiers back into one. */
.sk-footer a {
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  text-decoration: none;
  color: inherit;
  transition: color var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-footer a:hover {
  color: var(--sk-white);
}
/* Every track is minmax(0, …) so a track can shrink past its content instead
   of forcing the grid wider than the viewport. That is what the old auto-fit
   layout got wrong: its 220px and 160px floors added up to more than a phone
   is wide and pushed the second column off screen. */
.sk-footer__inner {
  display: grid;
  grid-template-columns:
    minmax(0, 1.6fr) minmax(0, 1fr)
    minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--sk-space-6) var(--sk-space-5);
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding: var(--sk-space-12) var(--sk-space-4) var(--sk-space-8);
}
/* The lockup takes a band of its own rather than a grid cell. Sharing a row
   with a link column it set that row's height for both, and the shorter column
   was left sitting above a void half its own height.
   1200px is where the four-column grid stops fitting its own content: below it
   the contact track falls under the 238px the CTA needs and the lockup drops
   under ~340px, which folds the blurb into a narrow six-line stack. */
@media (max-width: 1200px) {
  .sk-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    column-gap: var(--sk-space-3);
  }
  .sk-footer__brand {
    grid-column: 1 / -1;
  }
}
/* Phones keep the two link lists side by side and give full rows to the
   lockup and the contact block. Stacking all four would run the footer past
   2,300px.
   The 680px handover is set by the two longest strings in the footer rather
   than a round number: below it the three-column layout leaves the email
   address (168px) and "Bathroom Remodeling" (146px) about a pixel of slack,
   which font rendering alone can swallow. */
@media (max-width: 680px) {
  .sk-footer__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--sk-space-3);
  }
  .sk-footer__brand,
  .sk-footer__talk {
    grid-column: 1 / -1;
  }
  /* Matches the gutter .sk-container already drops to on small screens, and
     buys each link column the ~8px that keeps the longest label on one line. */
  .sk-footer__inner,
  .sk-footer__areas,
  .sk-footer__base {
    padding-inline: var(--sk-space-3);
  }
}

/* The maker's mark that used to sit on the nameplate row, moved onto the
   lockup it was always referring to. */
.sk-footer__brand::before {
  content: '';
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: var(--sk-space-3);
  background: var(--sk-sky);
  opacity: 0.85;
}
.sk-footer__blurb {
  max-width: 42ch;
  margin: var(--sk-space-3) 0 0;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  line-height: var(--sk-leading-relaxed);
}
.sk-footer__badge {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: fit-content;
  margin: var(--sk-space-3) 0 0;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-left: 2px solid var(--sk-sky);
  border-radius: var(--sk-radius-sm);
  background: rgba(255, 255, 255, 0.03);
}
.sk-footer__badge svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--sk-sky);
}
.sk-footer__badge span {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  line-height: var(--sk-leading-snug);
  color: rgba(255, 255, 255, 0.62);
}
.sk-footer__badge strong {
  font-weight: 600;
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.sk-footer__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: var(--sk-space-3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--sk-radius-pill);
  color: rgba(255, 255, 255, 0.7);
  transition:
    background-color var(--sk-duration-fast) var(--sk-ease-standard),
    border-color var(--sk-duration-fast) var(--sk-ease-standard),
    color var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-footer__social:hover,
.sk-footer__social:focus-visible {
  border-color: var(--sk-primary);
  background: var(--sk-primary);
  color: var(--sk-white);
}
.sk-footer__social svg {
  width: 18px;
  height: 18px;
}

.sk-footer__address {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: var(--sk-space-2);
  font-style: normal;
}
/* Icon rows carry their own 44px height, so they need no help from the
   small-screen touch-target block below. */
.sk-footer__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
}
.sk-footer__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--sk-radius-sm);
  color: var(--sk-sky);
  transition:
    background-color var(--sk-duration-fast) var(--sk-ease-standard),
    border-color var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-footer__icon svg {
  width: 17px;
  height: 17px;
}
a.sk-footer__row:hover .sk-footer__icon,
a.sk-footer__row:focus-visible .sk-footer__icon {
  border-color: rgba(136, 211, 242, 0.5);
  background: rgba(136, 211, 242, 0.12);
}
.sk-footer__rowText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sk-footer__rowLabel {
  font-family: var(--sk-font-body);
  font-size: 0.75rem;
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sk-footer__rowValue {
  overflow-wrap: anywhere;
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-sm);
  color: rgba(255, 255, 255, 0.92);
}
.sk-footer__cta {
  margin-top: var(--sk-space-3);
}

/* Service-area ribbon. Twenty-three communities as two tiers of one running
   line rather than two stacked columns: the brief is that Skycrest covers far
   more ground than a ten-item list suggests, and a ribbon shows the spread at
   a glance where a column just looks long. */
.sk-footer__areas {
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding: var(--sk-space-5) var(--sk-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.sk-footer__areasHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  column-gap: var(--sk-space-4);
  row-gap: var(--sk-space-1);
}
.sk-footer__areasHead .sk-footer__heading {
  margin: 0;
}
/* Written as a descendant so it outranks `.sk-footer a`'s own font-size,
   which a bare `.sk-footer__areasAll` class would lose to. */
.sk-footer__areasHead a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-block: -0.85rem;
  padding-block: 0.85rem;
  font-size: var(--sk-text-xs);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.sk-footer__areasAll::after {
  content: '\2192';
  transition: translate var(--sk-duration-fast) var(--sk-ease-standard);
}
.sk-footer__areasAll:hover::after,
.sk-footer__areasAll:focus-visible::after {
  translate: 4px 0;
}
/* The separator lives on the list item, not between items, so a dot can never
   orphan itself at the start of a wrapped line. Each link carries a real 44px
   height rather than the negative-margin trick used on single links: padded
   boxes pulled back by margin would overlap each other row to row, and an
   overlapping touch target is worse than a loose one. */
.sk-footer__areasList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.95rem;
  row-gap: 0;
  margin: var(--sk-space-1) 0 0;
  padding: 0;
  list-style: none;
}
.sk-footer__areasList li {
  display: flex;
  align-items: center;
  gap: 0.95rem;
}
.sk-footer__areasList li:not(:last-child)::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.32;
}
.sk-footer__areasList a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: rgba(255, 255, 255, 0.92);
}
.sk-footer__areasList .is-minor a {
  color: rgba(255, 255, 255, 0.56);
}
.sk-footer__heading {
  margin: 0 0 var(--sk-space-2);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
  font-weight: 500;
  letter-spacing: var(--sk-tracking-widest);
  text-transform: uppercase;
  color: var(--sk-sky);
}
.sk-footer__column ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The footer is the one place links are set as dense inline text, and at 18px
   tall they sit well under the 44px minimum touch target. Padding the anchor
   is what enlarges the target: growing the list item instead would leave the
   hit area the size of the text. The row gap goes to zero at the same time so
   the taller anchors produce an even 44px rhythm rather than 44 plus a gap.
   The width matches the breakpoint where the footer drops to its tablet grid,
   so touch sizing starts exactly where the touch layout does: at 860px an iPad
   in landscape got the three-column footer with 18px targets. */
@media (max-width: 1200px) {
  .sk-footer__column ul {
    gap: 0;
  }
  .sk-footer__column a,
  .sk-footer__legal a,
  .sk-footer__address a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .sk-footer__legal {
    gap: var(--sk-space-3);
  }
  /* The column and address links fill their line, so height alone gets them to
     44px. The legal row is horizontal, so a short word like "Terms" stays
     narrow no matter how tall it is, and needs the width set too. */
  .sk-footer__legal a {
    justify-content: center;
    min-width: 44px;
  }
}
.sk-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-space-2);
  max-width: var(--sk-container-wide);
  margin-inline: auto;
  padding: var(--sk-space-3) var(--sk-space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--sk-font-body);
  font-size: var(--sk-text-xs);
}
.sk-footer__base p {
  margin: 0;
}
.sk-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The bar sets 13px on itself, but each anchor re-establishes 15px from the
   footer's link defaults, so the size has to be restated on the anchor. */
.sk-footer__legal a {
  font-size: var(--sk-text-xs);
}
.sk-footer__top {
  font-weight: 600;
  letter-spacing: var(--sk-tracking-wide);
  text-transform: uppercase;
}
/* Left in normal flow rather than absolutely placed: the glyph box reserves
   its own band, and the negative bottom margin is the only thing deciding how
   much of it the footer's overflow clips. Both values are in em, so the bleed
   stays proportional at every viewport instead of needing a second length kept
   in sync with the bar above it. */
.sk-footer__mark {
  margin: var(--sk-space-2) 0 -0.27em;
  font-family: var(--sk-font-display);
  font-size: clamp(4.5rem, 16vw, 15rem);
  font-weight: 300;
  line-height: 0.78;
  letter-spacing: var(--sk-tracking-display);
  text-align: center;
  white-space: nowrap;
  color: var(--sk-white);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}

/* Oversized section numeral. Purely typographic texture: it carries no meaning
   the heading does not already carry, so the markup keeps it out of the
   accessibility tree and it never takes a pointer event. */
.sk-numeral {
  position: absolute;
  top: -0.12em;
  left: -0.06em;
  z-index: 0;
  font-family: var(--sk-font-display);
  font-size: var(--sk-numeral);
  font-weight: 300;
  line-height: 0.75;
  letter-spacing: var(--sk-tracking-display);
  color: var(--sk-ink);
  opacity: 0.05;
  pointer-events: none;
  user-select: none;
}
.sk-numeral--onDark {
  color: var(--sk-white);
  opacity: 0.07;
}

/* Second social icon (Instagram) sits beside Facebook */
.sk-footer__social + .sk-footer__social {
  margin-left: var(--sk-space-1);
}

/* Keeps the phone number from splitting across lines inside running text */
.sk-nowrap {
  white-space: nowrap;
}

/* NAHB member badge: the official reversed (white) NAHB logo */
.sk-footer__badge .sk-footer__badgeLogo {
  flex-shrink: 0;
  width: auto;
  height: 44px;
}

/* "All service areas" link at the foot of the Where We Build menu */
.sk-menu__all {
  display: inline-block;
  margin-top: var(--sk-space-3);
  font-size: var(--sk-text-sm);
  font-weight: 600;
  letter-spacing: var(--sk-tracking-wide);
  color: var(--sk-primary);
  text-decoration: underline;
  text-decoration-color: rgba(56, 115, 151, 0.35);
  text-underline-offset: 0.3em;
}
.sk-menu__all:hover,
.sk-menu__all:focus-visible {
  color: var(--sk-deep);
  text-decoration-color: currentColor;
}
.sk-drawer__sublink--all {
  font-weight: 600;
  color: var(--sk-primary);
}

/* "Where We Build" is a link to /areas-we-cover/ that also opens its menu on hover */
a.sk-menu__trigger {
  text-decoration: none;
}