/* Sharp Growth Co. luxury CTA button polish
   Production-safe single-layer treatment: clean gold, no overlay rectangles. */
:root {
  --sgc-luxury-gold: #b98a3b;
  --sgc-luxury-gold-light: #d6b06a;
  --sgc-luxury-gold-dark: #8b6428;
  --sgc-luxury-espresso: #23140d;
  --sgc-luxury-cream: #fffaf1;
}

.sgc-luxury-cta,
a.sgc-luxury-cta,
button.sgc-luxury-cta,
.btn-primary,
.btn-gold,
.btn-outline.sgc-luxury-cta,
a.btn-outline.sgc-luxury-cta,
button.btn-outline.sgc-luxury-cta {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  isolation: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  min-height: 3.25rem;
  padding: 0.95rem 1.65rem !important;
  border: 1px solid rgba(214, 176, 106, 0.72) !important;
  border-radius: 0 !important;
  background-color: var(--sgc-luxury-gold) !important;
  background-image: linear-gradient(135deg, var(--sgc-luxury-gold-light) 0%, var(--sgc-luxury-gold) 42%, var(--sgc-luxury-gold-dark) 100%) !important;
  background-clip: padding-box !important;
  color: var(--sgc-luxury-cream) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: 0 1px 1px rgba(35, 20, 13, 0.28) !important;
  box-shadow:
    0 12px 24px rgba(35, 20, 13, 0.15),
    0 6px 14px rgba(185, 138, 59, 0.21) !important;
  filter: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease !important;
  overflow: hidden !important;
}

/* Disable decorative pseudo-elements from both this layer and the compiled bundle.
   These overlays were rendering as a second/oversized rectangle on production buttons. */
.sgc-luxury-cta::before,
.sgc-luxury-cta::after,
.btn-primary::before,
.btn-primary::after,
.btn-gold::before,
.btn-gold::after,
.btn-outline.sgc-luxury-cta::before,
.btn-outline.sgc-luxury-cta::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  transform: none !important;
  pointer-events: none !important;
}

.sgc-luxury-cta:hover,
.sgc-luxury-cta:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-gold:hover,
.btn-gold:focus-visible,
.btn-outline.sgc-luxury-cta:hover,
.btn-outline.sgc-luxury-cta:focus-visible {
  transform: translateY(-2px) !important;
  filter: saturate(1.05) brightness(1.02) !important;
  border-color: rgba(255, 231, 184, 0.9) !important;
  color: var(--sgc-luxury-cream) !important;
  background-color: var(--sgc-luxury-gold) !important;
  background-image: linear-gradient(135deg, var(--sgc-luxury-gold-light) 0%, var(--sgc-luxury-gold) 44%, var(--sgc-luxury-gold-dark) 100%) !important;
  box-shadow:
    0 15px 28px rgba(35, 20, 13, 0.2),
    0 8px 18px rgba(185, 138, 59, 0.28) !important;
}

.sgc-luxury-cta:active,
.btn-primary:active,
.btn-gold:active,
.btn-outline.sgc-luxury-cta:active {
  transform: translateY(-1px) !important;
  box-shadow:
    0 10px 20px rgba(35, 20, 13, 0.17),
    0 5px 12px rgba(185, 138, 59, 0.23) !important;
}

.sgc-luxury-cta:focus-visible,
.btn-primary:focus-visible,
.btn-gold:focus-visible,
.btn-outline.sgc-luxury-cta:focus-visible {
  outline: 2px solid rgba(214, 176, 106, 0.55) !important;
  outline-offset: 3px !important;
}

/* Footer navigation must remain a plain linked list, never gold CTA blocks. */
footer a.sgc-luxury-cta[href$="/services/"],
footer a.sgc-luxury-cta[href$="/services"],
footer a.sgc-luxury-cta[href$="/packages/"],
footer a.sgc-luxury-cta[href$="/packages"],
footer a.sgc-luxury-cta[href$="/work/"],
footer a.sgc-luxury-cta[href$="/work"],
footer a.sgc-luxury-cta[href$="/about/"],
footer a.sgc-luxury-cta[href$="/about"],
footer a.sgc-luxury-cta[href="/"],
footer a.sgc-luxury-cta[href$="../"],
footer nav a.sgc-luxury-cta {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(246, 238, 225, 0.78) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow: visible !important;
}

footer a.sgc-luxury-cta[href$="/services/"]:hover,
footer a.sgc-luxury-cta[href$="/services"]:hover,
footer a.sgc-luxury-cta[href$="/packages/"]:hover,
footer a.sgc-luxury-cta[href$="/packages"]:hover,
footer nav a.sgc-luxury-cta:hover {
  color: rgba(214, 176, 106, 0.95) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 640px) {
  .sgc-luxury-cta,
  a.sgc-luxury-cta,
  button.sgc-luxury-cta,
  .btn-primary,
  .btn-gold,
  .btn-outline.sgc-luxury-cta,
  a.btn-outline.sgc-luxury-cta,
  button.btn-outline.sgc-luxury-cta {
    width: min(100%, 22rem);
    min-height: 3.15rem;
    padding-inline: 1.2rem !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.11em !important;
  }
}

/* About-page CTA correction: all real CTA spans must be one clean gold rectangle. */
main .btn-primary,
main .btn-outline,
main a .btn-primary,
main a .btn-outline,
#root .btn-primary,
#root .btn-outline {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: relative !important;
  isolation: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  min-height: 3.25rem !important;
  padding: 0.95rem 1.65rem !important;
  border: 1px solid rgba(214, 176, 106, 0.72) !important;
  border-radius: 0 !important;
  background-color: var(--sgc-luxury-gold) !important;
  background-image: linear-gradient(135deg, var(--sgc-luxury-gold-light) 0%, var(--sgc-luxury-gold) 42%, var(--sgc-luxury-gold-dark) 100%) !important;
  color: var(--sgc-luxury-cream) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: 0 1px 1px rgba(35, 20, 13, 0.28) !important;
  outline: 0 !important;
  box-shadow:
    0 12px 24px rgba(35, 20, 13, 0.15),
    0 6px 14px rgba(185, 138, 59, 0.21) !important;
  filter: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease !important;
  overflow: hidden !important;
}

main .btn-primary::before,
main .btn-primary::after,
main .btn-outline::before,
main .btn-outline::after,
#root .btn-primary::before,
#root .btn-primary::after,
#root .btn-outline::before,
#root .btn-outline::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

main .btn-primary:hover,
main .btn-primary:focus-visible,
main .btn-outline:hover,
main .btn-outline:focus-visible,
#root .btn-primary:hover,
#root .btn-primary:focus-visible,
#root .btn-outline:hover,
#root .btn-outline:focus-visible {
  transform: translateY(-2px) !important;
  filter: saturate(1.05) brightness(1.02) !important;
  border-color: rgba(255, 231, 184, 0.9) !important;
  color: var(--sgc-luxury-cream) !important;
  background-color: var(--sgc-luxury-gold) !important;
  background-image: linear-gradient(135deg, var(--sgc-luxury-gold-light) 0%, var(--sgc-luxury-gold) 44%, var(--sgc-luxury-gold-dark) 100%) !important;
  box-shadow:
    0 15px 28px rgba(35, 20, 13, 0.2),
    0 8px 18px rgba(185, 138, 59, 0.28) !important;
}

footer .btn-primary,
footer .btn-outline,
footer a .btn-primary,
footer a .btn-outline {
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(246, 238, 225, 0.78) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  overflow: visible !important;
}

/* 2026-06-01 hard fix: remove the double-rectangle CTA treatment everywhere.
   Cause: many links are the actual CTA and wrap a child span/button with .btn-primary,
   .btn-gold, or .btn-outline. The outer link and inner child were both styled as gold
   blocks, creating the visible inset rectangle. Only the outer clickable CTA may draw
   the rectangle; direct children must render as text/icons only. */
.sgc-luxury-cta > .btn-primary,
.sgc-luxury-cta > .btn-gold,
.sgc-luxury-cta > .btn-outline,
.sgc-luxury-cta > span[class*="btn-"],
.sgc-luxury-cta > button[class*="btn-"],
.sgc-luxury-cta > a[class*="btn-"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  color: inherit !important;
  font: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
  text-decoration: inherit !important;
  text-shadow: inherit !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}

.sgc-luxury-cta > .btn-primary::before,
.sgc-luxury-cta > .btn-primary::after,
.sgc-luxury-cta > .btn-gold::before,
.sgc-luxury-cta > .btn-gold::after,
.sgc-luxury-cta > .btn-outline::before,
.sgc-luxury-cta > .btn-outline::after,
.sgc-luxury-cta > span[class*="btn-"]::before,
.sgc-luxury-cta > span[class*="btn-"]::after,
.sgc-luxury-cta > button[class*="btn-"]::before,
.sgc-luxury-cta > button[class*="btn-"]::after,
.sgc-luxury-cta > a[class*="btn-"]::before,
.sgc-luxury-cta > a[class*="btn-"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  outline: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.sgc-luxury-cta:hover > .btn-primary,
.sgc-luxury-cta:focus-visible > .btn-primary,
.sgc-luxury-cta:hover > .btn-gold,
.sgc-luxury-cta:focus-visible > .btn-gold,
.sgc-luxury-cta:hover > .btn-outline,
.sgc-luxury-cta:focus-visible > .btn-outline,
.sgc-luxury-cta:hover > span[class*="btn-"],
.sgc-luxury-cta:focus-visible > span[class*="btn-"] {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: inherit !important;
  transform: none !important;
}

/* 2026-06-01 refined navigation: understated luxury, no bulky active underline.
   The header page titles should read as premium text links, not buttons or labels. */
header nav a,
header [role="navigation"] a,
header .nav a,
header a[href="/"],
header a[href="/services"],
header a[href="/services/"],
header a[href="/about"],
header a[href="/about/"],
header a[href="/packages"],
header a[href="/packages/"],
header a[href="/contact"],
header a[href="/contact/"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.18rem 0.04rem 0.26rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(253, 250, 244, 0.9) !important;
  font-family: Outfit, sans-serif !important;
  font-size: clamp(0.95rem, 1vw, 1.08rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.075em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: 0 1px 8px rgba(27, 16, 8, 0.28) !important;
  transform: translateY(0) scale(1) !important;
  transition: color 190ms ease, opacity 190ms ease, transform 190ms ease, text-shadow 190ms ease !important;
}

header nav a::before,
header nav a::after,
header [role="navigation"] a::before,
header [role="navigation"] a::after,
header .nav a::before,
header .nav a::after,
header a[href="/"]::before,
header a[href="/"]::after,
header a[href="/services"]::before,
header a[href="/services"]::after,
header a[href="/services/"]::before,
header a[href="/services/"]::after,
header a[href="/about"]::before,
header a[href="/about"]::after,
header a[href="/about/"]::before,
header a[href="/about/"]::after,
header a[href="/packages"]::before,
header a[href="/packages"]::after,
header a[href="/packages/"]::before,
header a[href="/packages/"]::after,
header a[href="/contact"]::before,
header a[href="/contact"]::after,
header a[href="/contact/"]::before,
header a[href="/contact/"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

header nav a:hover,
header nav a:focus-visible,
header [role="navigation"] a:hover,
header [role="navigation"] a:focus-visible,
header .nav a:hover,
header .nav a:focus-visible,
header a[href="/"]:hover,
header a[href="/"]:focus-visible,
header a[href="/services"]:hover,
header a[href="/services"]:focus-visible,
header a[href="/services/"]:hover,
header a[href="/services/"]:focus-visible,
header a[href="/about"]:hover,
header a[href="/about"]:focus-visible,
header a[href="/about/"]:hover,
header a[href="/about/"]:focus-visible,
header a[href="/packages"]:hover,
header a[href="/packages"]:focus-visible,
header a[href="/packages/"]:hover,
header a[href="/packages/"]:focus-visible,
header a[href="/contact"]:hover,
header a[href="/contact"]:focus-visible,
header a[href="/contact/"]:hover,
header a[href="/contact/"]:focus-visible {
  color: #e6c083 !important;
  text-shadow: 0 0 12px rgba(230, 192, 131, 0.24), 0 2px 10px rgba(27, 16, 8, 0.32) !important;
  transform: translateY(-2px) scale(1.018) !important;
}

header nav a:active,
header [role="navigation"] a:active,
header .nav a:active,
header a[href="/"]:active,
header a[href="/services"]:active,
header a[href="/services/"]:active,
header a[href="/about"]:active,
header a[href="/about/"]:active,
header a[href="/packages"]:active,
header a[href="/packages/"]:active,
header a[href="/contact"]:active,
header a[href="/contact/"]:active {
  color: #d3a45f !important;
  transform: translateY(0) scale(0.99) !important;
}

header nav a[aria-current="page"],
header [role="navigation"] a[aria-current="page"],
header .nav a[aria-current="page"] {
  color: #d8af72 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 10px rgba(216, 175, 114, 0.2), 0 1px 8px rgba(27, 16, 8, 0.28) !important;
}

@media (max-width: 767px) {
  header nav a,
  header [role="navigation"] a,
  header .nav a {
    font-size: 1rem !important;
    letter-spacing: 0.045em !important;
    transform: none !important;
  }
}

/* 2026-06-01 definitive cleanup after visual review.
   Exact DOM fix: nav text lives inside header nav a > span, and the underline is a nested absolute span.
   CTA fix: #root .btn-primary was beating the earlier child-span override. */
#root .sgc-luxury-cta > .btn-primary,
#root .sgc-luxury-cta > .btn-gold,
#root .sgc-luxury-cta > .btn-outline,
#root .sgc-luxury-cta > span[class*="btn-"],
#root .sgc-luxury-cta > button[class*="btn-"],
#root .sgc-luxury-cta > a[class*="btn-"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  color: inherit !important;
  font: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-transform: inherit !important;
  text-shadow: inherit !important;
  transform: none !important;
  transition: none !important;
  overflow: visible !important;
}

#root .sgc-luxury-cta > .btn-primary::before,
#root .sgc-luxury-cta > .btn-primary::after,
#root .sgc-luxury-cta > .btn-gold::before,
#root .sgc-luxury-cta > .btn-gold::after,
#root .sgc-luxury-cta > .btn-outline::before,
#root .sgc-luxury-cta > .btn-outline::after,
#root .sgc-luxury-cta > span[class*="btn-"]::before,
#root .sgc-luxury-cta > span[class*="btn-"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#root header nav a,
#root header nav a > span {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.12rem 0.02rem !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(253, 250, 244, 0.9) !important;
  font-family: Outfit, sans-serif !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  text-decoration: none !important;
  text-shadow: 0 1px 8px rgba(27, 16, 8, 0.28) !important;
  transform: translateY(0) scale(1) !important;
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease !important;
}

#root header nav a > span > span,
#root header nav a span.absolute,
#root header nav a span[class*="absolute"],
#root header nav a span[class*="bg-current"] {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  content: none !important;
}

#root header nav a:hover,
#root header nav a:focus-visible,
#root header nav a:hover > span,
#root header nav a:focus-visible > span {
  color: #e4bd7e !important;
  text-shadow: 0 0 10px rgba(228, 189, 126, 0.22), 0 2px 10px rgba(27, 16, 8, 0.32) !important;
  transform: translateY(-2px) scale(1.015) !important;
}

#root header nav a:active,
#root header nav a:active > span {
  color: #d2a35f !important;
  transform: translateY(0) scale(0.99) !important;
}

#root header nav a:first-child:not(nav a) {
  display: inline-flex !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
}

/* 2026-06-02 header navigation visibility boost.
   Makes page titles larger and readable over pale hero areas while preserving the premium look. */
#root header nav a,
#root header nav a > span,
header nav a,
header [role="navigation"] a,
header .nav a {
  color: #2b1d13 !important;
  font-size: clamp(1.08rem, 1.16vw, 1.22rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  line-height: 1.12 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.86),
    0 2px 7px rgba(255, 255, 255, 0.74),
    0 6px 18px rgba(35, 24, 15, 0.42) !important;
  filter: drop-shadow(0 5px 9px rgba(35, 24, 15, 0.22)) !important;
  transform: translateY(0) scale(1) !important;
  transition: color 180ms ease, filter 180ms ease, transform 180ms ease, text-shadow 180ms ease !important;
}

#root header nav a[href="/work"],
#root header nav a[href="/work/"],
header nav a[href="/work"],
header nav a[href="/work/"] {
  color: #2b1d13 !important;
}

#root header nav a:hover,
#root header nav a:focus-visible,
#root header nav a:hover > span,
#root header nav a:focus-visible > span,
header nav a:hover,
header nav a:focus-visible,
header [role="navigation"] a:hover,
header [role="navigation"] a:focus-visible,
header .nav a:hover,
header .nav a:focus-visible {
  color: #8a6227 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92),
    0 3px 9px rgba(255, 255, 255, 0.78),
    0 8px 22px rgba(35, 24, 15, 0.48) !important;
  filter: drop-shadow(0 7px 12px rgba(35, 24, 15, 0.28)) !important;
  transform: translateY(-2px) scale(1.035) !important;
}

#root header nav a[aria-current="page"],
#root header nav a[aria-current="page"] > span,
header nav a[aria-current="page"],
header [role="navigation"] a[aria-current="page"],
header .nav a[aria-current="page"] {
  color: #7b5521 !important;
  font-weight: 800 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94),
    0 3px 10px rgba(255, 255, 255, 0.80),
    0 8px 22px rgba(35, 24, 15, 0.46) !important;
}

@media (max-width: 767px) {
  #root header nav a,
  #root header nav a > span,
  header nav a,
  header [role="navigation"] a,
  header .nav a {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.045em !important;
  }
}

/* 2026-06-02 decisive navigation contrast fix.
   The previous white glow was still washing out on pale hero imagery, so the top links now use a darker premium pill treatment. */
#root header nav a,
#root header nav a > span,
header nav a,
header nav a > span,
header [role="navigation"] a,
header [role="navigation"] a > span,
header .nav a,
header .nav a > span {
  color: #2a180d !important;
  -webkit-text-fill-color: #2a180d !important;
  font-family: Outfit, sans-serif !important;
  font-size: clamp(1.14rem, 1.2vw, 1.32rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.055em !important;
  line-height: 1.05 !important;
  text-decoration: none !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96),
    0 2px 4px rgba(255, 255, 255, 0.82),
    0 5px 12px rgba(43, 24, 13, 0.38) !important;
}

#root header nav a,
header nav a,
header [role="navigation"] a,
header .nav a {
  position: relative !important;
  padding: 0.46rem 0.78rem !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 242, 0.78) !important;
  border: 1px solid rgba(185, 133, 57, 0.30) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 10px 26px rgba(38, 24, 14, 0.16),
    0 2px 8px rgba(38, 24, 14, 0.14) !important;
  backdrop-filter: blur(10px) saturate(1.04) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.04) !important;
  transform: translateY(0) scale(1) !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}

#root header nav a:hover,
#root header nav a:focus-visible,
header nav a:hover,
header nav a:focus-visible,
header [role="navigation"] a:hover,
header [role="navigation"] a:focus-visible,
header .nav a:hover,
header .nav a:focus-visible {
  color: #7b4d12 !important;
  -webkit-text-fill-color: #7b4d12 !important;
  background: rgba(255, 247, 232, 0.94) !important;
  border-color: rgba(190, 139, 60, 0.58) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 13px 30px rgba(38, 24, 14, 0.22),
    0 0 0 2px rgba(190, 139, 60, 0.10) !important;
  transform: translateY(-2px) scale(1.035) !important;
}

#root header nav a:hover > span,
#root header nav a:focus-visible > span,
header nav a:hover > span,
header nav a:focus-visible > span,
header [role="navigation"] a:hover > span,
header [role="navigation"] a:focus-visible > span,
header .nav a:hover > span,
header .nav a:focus-visible > span {
  color: #7b4d12 !important;
  -webkit-text-fill-color: #7b4d12 !important;
}

#root header nav a[aria-current="page"],
header nav a[aria-current="page"],
header [role="navigation"] a[aria-current="page"],
header .nav a[aria-current="page"] {
  color: #6f430c !important;
  -webkit-text-fill-color: #6f430c !important;
  background: rgba(255, 244, 222, 0.96) !important;
  border-color: rgba(190, 139, 60, 0.66) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 14px 32px rgba(38, 24, 14, 0.24),
    0 0 0 2px rgba(190, 139, 60, 0.13) !important;
}

#root header nav a[aria-current="page"] > span,
header nav a[aria-current="page"] > span,
header [role="navigation"] a[aria-current="page"] > span,
header .nav a[aria-current="page"] > span {
  color: #6f430c !important;
  -webkit-text-fill-color: #6f430c !important;
}

/* 2026-06-02 About/Packages banner and header refinement.
   Keeps the Alberta mountain hero banners visually aligned with the Services page
   and reduces top navigation typography so labels no longer crowd the logo or CTA. */
@media (min-width: 768px) {
  #root .sg-alberta-page-banner {
    max-height: 491px !important;
    overflow: hidden !important;
  }

  #root header nav a,
  #root header nav a > span,
  header nav a,
  header nav a > span,
  header [role="navigation"] a,
  header [role="navigation"] a > span,
  header .nav a,
  header .nav a > span {
    font-size: clamp(0.88rem, 0.88vw, 1rem) !important;
    letter-spacing: 0.045em !important;
    line-height: 1.08 !important;
  }

  #root header nav a,
  header nav a,
  header [role="navigation"] a,
  header .nav a {
    padding: 0.38rem 0.62rem !important;
  }

  #root header button[aria-label*="consult" i],
  header button[aria-label*="consult" i] {
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    padding-left: 1.35rem !important;
    padding-right: 1.35rem !important;
  }
}

/* 2026-06-02 About mission quote refinement.
   The About page mission block was visually too tall; this keeps the quote elegant
   while making the banner slimmer and less dominant. */
#root section:has(blockquote) {
  padding-top: clamp(3.5rem, 5vw, 5rem) !important;
  padding-bottom: clamp(3.5rem, 5vw, 5rem) !important;
}

#root section:has(blockquote) .container,
#root section:has(blockquote) .max-w-3xl {
  max-width: 42rem !important;
}

#root section:has(blockquote) blockquote {
  max-width: 38rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: clamp(1.85rem, 3vw, 2.35rem) !important;
  line-height: 1.26 !important;
}

@media (max-width: 767px) {
  #root section:has(blockquote) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  #root section:has(blockquote) blockquote {
    font-size: clamp(1.55rem, 7vw, 2rem) !important;
    line-height: 1.28 !important;
  }
}

/* 2026-06-02 final About mission slimming pass requested by client. */
#root section:has(blockquote) {
  padding-top: clamp(2.75rem, 4vw, 3.75rem) !important;
  padding-bottom: clamp(2.75rem, 4vw, 3.75rem) !important;
}

#root section:has(blockquote) .container,
#root section:has(blockquote) .max-w-3xl {
  max-width: 56rem !important;
}

#root section:has(blockquote) blockquote {
  max-width: 50rem !important;
  font-size: clamp(1.65rem, 2.35vw, 2rem) !important;
  line-height: 1.22 !important;
}

@media (max-width: 767px) {
  #root section:has(blockquote) {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  #root section:has(blockquote) blockquote {
    max-width: 100% !important;
    font-size: clamp(1.35rem, 5.7vw, 1.7rem) !important;
    line-height: 1.25 !important;
  }
}

/* 2026-06-01 Home ticker banner: match luxury gold button gradient and italicize moving text. */
#root > .min-h-screen > section.sgc-mobile-home-hero + div.py-4.overflow-hidden {
  background-color: var(--sgc-luxury-gold) !important;
  background-image: linear-gradient(135deg, var(--sgc-luxury-gold-light) 0%, var(--sgc-luxury-gold) 42%, var(--sgc-luxury-gold-dark) 100%) !important;
  color: var(--sgc-luxury-espresso) !important;
}

#root > .min-h-screen > section.sgc-mobile-home-hero + div.py-4.overflow-hidden,
#root > .min-h-screen > section.sgc-mobile-home-hero + div.py-4.overflow-hidden * {
  font-style: italic !important;
}

/* Sharp Growth Co. checkpoint 2026-06-02: keep the Home hero ticker directly below the hero image without mobile horizontal bleed. */
[data-sgc-home-hero-ticker="true"],
.sgc-home-hero-ticker-strip {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[data-sgc-home-hero-ticker="true"] *,
.sgc-home-hero-ticker-strip * {
  max-width: none;
}

@media (max-width: 767px) {
  [data-sgc-home-hero-ticker="true"],
  .sgc-home-hero-ticker-strip {
    border-radius: 0 !important;
    transform: none !important;
  }
}


/* 2026-06-02 mobile overflow safety for Home hero ticker placement.
   Keeps the ticker flush under the hero while preventing fixed header/container width
   or marquee transforms from widening the mobile document. */
@media (max-width: 767px) {
  html,
  body,
  #root,
  #root > .min-h-screen {
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  #root header.fixed,
  #root header.fixed > .container {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
  }

  #root header.fixed > .container {
    padding-left: clamp(0.875rem, 4vw, 1rem) !important;
    padding-right: clamp(0.875rem, 4vw, 1rem) !important;
  }

  #root .sgc-home-hero-ticker-strip,
  #root [data-sgc-home-hero-ticker="true"] {
    contain: paint !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #root .sgc-home-hero-ticker-strip > *,
  #root [data-sgc-home-hero-ticker="true"] > * {
    max-width: none !important;
    will-change: transform !important;
  }
}

/* 2026-06-02 mobile navigation layout safeguard.
   Keeps all page labels visible on phones by allowing the header navigation to wrap
   below the logo/CTA row instead of clipping or overlapping at narrow widths. */
@media (max-width: 767px) {
  #root header.fixed,
  header.fixed {
    max-width: 100vw !important;
    overflow: visible !important;
  }

  #root header.fixed > .container,
  header.fixed > .container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    row-gap: 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.6rem !important;
  }

  #root header nav,
  header nav,
  header [role="navigation"],
  header .nav {
    order: 3 !important;
    flex: 1 0 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.38rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  #root header nav a,
  #root header nav a > span,
  header nav a,
  header nav a > span,
  header [role="navigation"] a,
  header [role="navigation"] a > span,
  header .nav a,
  header .nav a > span {
    font-size: clamp(0.72rem, 3.25vw, 0.86rem) !important;
    letter-spacing: 0.025em !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: calc(50vw - 1rem) !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  #root header nav a,
  header nav a,
  header [role="navigation"] a,
  header .nav a {
    padding: 0.32rem 0.48rem !important;
    border-radius: 999px !important;
    flex: 0 1 auto !important;
  }

  #root header button[aria-label*="consult" i],
  header button[aria-label*="consult" i],
  #root header a[aria-label*="consult" i],
  header a[aria-label*="consult" i] {
    max-width: calc(100vw - 1.75rem) !important;
    padding-left: 0.78rem !important;
    padding-right: 0.78rem !important;
    font-size: clamp(0.62rem, 2.7vw, 0.76rem) !important;
    letter-spacing: 0.09em !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  #root header nav,
  header nav,
  header [role="navigation"],
  header .nav {
    gap: 0.28rem !important;
  }

  #root header nav a,
  header nav a,
  header [role="navigation"] a,
  header .nav a {
    padding: 0.3rem 0.38rem !important;
  }
}

/* 2026-06-02 responsive audit overflow fixes.
   Targets the React header's inner h-16 row and injected work sections that still
   reported scroll-width overflow after the first mobile navigation pass. */
@media (max-width: 767px) {
  #root header.fixed .container > div[class*="items-center"][class*="justify-between"],
  header.fixed .container > div[class*="items-center"][class*="justify-between"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    row-gap: 0.55rem !important;
    column-gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #root header.fixed .container > div[class*="items-center"][class*="justify-between"] > * {
    min-width: 0 !important;
  }

  #root header.fixed .container > div[class*="items-center"][class*="justify-between"] > nav,
  header.fixed .container > div[class*="items-center"][class*="justify-between"] > nav {
    order: 3 !important;
    flex: 1 0 100% !important;
    max-width: 100% !important;
  }

  #root header.fixed .container > div[class*="items-center"][class*="justify-between"] > a:first-child,
  header.fixed .container > div[class*="items-center"][class*="justify-between"] > a:first-child {
    flex: 1 1 10rem !important;
    max-width: min(56vw, 14rem) !important;
  }

  #root header.fixed .container > div[class*="items-center"][class*="justify-between"] > a:last-child,
  header.fixed .container > div[class*="items-center"][class*="justify-between"] > a:last-child,
  #root header.fixed .container > div[class*="items-center"][class*="justify-between"] > button:last-child,
  header.fixed .container > div[class*="items-center"][class*="justify-between"] > button:last-child {
    flex: 0 1 auto !important;
    max-width: min(40vw, 10.75rem) !important;
  }
}

#root .sgc-work-alberta,
#root .sgc-work-process,
#root .sgc-work-testimonial,
#root .sgc-full-story-section,
#root .sgc-mobile-home-hero {
  max-width: 100vw !important;
  overflow-x: clip !important;
  box-sizing: border-box !important;
}

#root .sgc-work-alberta *,
#root .sgc-work-process *,
#root .sgc-work-testimonial *,
#root .sgc-full-story-section * {
  box-sizing: border-box !important;
}

#root .sgc-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2026-06-02 mobile hero header correction.
   User-confirmed mobile design should show the brand mark and hamburger only;
   the desktop navigation title buttons must not overlay the hero image on phones. */
@media (max-width: 767px) {
  #root header nav[class*="hidden"][class*="md:flex"],
  header nav[class*="hidden"][class*="md:flex"],
  #root header.fixed .container > div[class*="items-center"][class*="justify-between"] > nav[class*="hidden"][class*="md:flex"],
  header.fixed .container > div[class*="items-center"][class*="justify-between"] > nav[class*="hidden"][class*="md:flex"] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  #root header button[class*="md:hidden"],
  header button[class*="md:hidden"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Contact success state: gold check mark and shimmering luxury border */
.sgc-contact-success-card {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(177, 134, 79, 0.46) !important;
  box-shadow:
    0 30px 80px rgba(59, 45, 29, 0.10),
    0 12px 34px rgba(177, 134, 79, 0.10),
    inset 0 0 0 1px rgba(255, 247, 224, 0.56) !important;
}

.sgc-contact-success-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 14px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(115deg,
      rgba(151, 105, 40, 0.34) 0%,
      rgba(255, 246, 202, 0.94) 18%,
      rgba(184, 134, 63, 0.58) 34%,
      rgba(255, 255, 255, 0.86) 48%,
      rgba(177, 134, 79, 0.42) 64%,
      rgba(255, 236, 174, 0.82) 82%,
      rgba(151, 105, 40, 0.34) 100%) border-box !important;
  background-size: 260% 100% !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0) border-box !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  animation: sgcLuxuryBorderShine 5.8s ease-in-out infinite !important;
  filter: drop-shadow(0 0 12px rgba(177, 134, 79, 0.30)) !important;
}

.sgc-contact-success-card::after {
  content: '' !important;
  position: absolute !important;
  inset: -35% auto auto -45% !important;
  width: 42% !important;
  height: 170% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 247, 218, 0.00) 32%,
    rgba(255, 247, 218, 0.38) 48%,
    rgba(177, 134, 79, 0.22) 54%,
    rgba(255, 247, 218, 0.00) 70%,
    transparent 100%) !important;
  transform: rotate(12deg) translateX(-15%) !important;
  animation: sgcLuxuryCardSweep 7.5s ease-in-out infinite !important;
}

.sgc-contact-success-card > * {
  position: relative !important;
  z-index: 1 !important;
}

.sgc-contact-success-card svg {
  width: 58px !important;
  height: 58px !important;
  padding: 12px !important;
  color: rgb(177, 134, 79) !important;
  stroke: rgb(177, 134, 79) !important;
  stroke-width: 2.75 !important;
  border: 1px solid rgba(177, 134, 79, 0.44) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 249, 224, 0.98), rgba(239, 224, 193, 0.72) 58%, rgba(177, 134, 79, 0.12) 100%) !important;
  box-shadow:
    0 12px 28px rgba(177, 134, 79, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.64) !important;
}

@keyframes sgcLuxuryBorderShine {
  0%, 100% { background-position: 0% 50%; opacity: 0.76; }
  45% { background-position: 100% 50%; opacity: 1; }
  60% { background-position: 100% 50%; opacity: 0.92; }
}

@keyframes sgcLuxuryCardSweep {
  0%, 42% { transform: rotate(12deg) translateX(-18%); opacity: 0; }
  54% { opacity: 0.86; }
  72% { transform: rotate(12deg) translateX(355%); opacity: 0; }
  100% { transform: rotate(12deg) translateX(355%); opacity: 0; }
}

@media (max-width: 640px) {
  .sgc-contact-success-card::before {
    inset: 10px !important;
  }

  .sgc-contact-success-card svg {
    width: 52px !important;
    height: 52px !important;
    padding: 10px !important;
  }
}

/* === 2026-06-03 header CTA single-rectangle correction ===
   Prevents Book a Consultation from rendering as a nested/double rectangle. */
header .sgc-luxury-cta,
.site-header .sgc-luxury-cta,
.sgc-header .sgc-luxury-cta,
nav .sgc-luxury-cta,
header a[href*="contact"].sgc-luxury-cta,
header a[href*="book"].sgc-luxury-cta,
header a[href*="consultation"].sgc-luxury-cta,
header a[href*="calendly"].sgc-luxury-cta {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 64px !important;
  padding: 0 2.45rem !important;
  border: 1px solid rgba(211, 162, 72, 0.64) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: linear-gradient(135deg, #d7aa4c 0%, #c7963f 52%, #a8752a 100%) !important;
  box-shadow: 0 14px 28px rgba(62, 36, 14, 0.18) !important;
  overflow: hidden !important;
  color: #fff8ee !important;
  text-decoration: none !important;
  isolation: isolate !important;
}

header .sgc-luxury-cta::before,
header .sgc-luxury-cta::after,
.site-header .sgc-luxury-cta::before,
.site-header .sgc-luxury-cta::after,
.sgc-header .sgc-luxury-cta::before,
.sgc-header .sgc-luxury-cta::after,
nav .sgc-luxury-cta::before,
nav .sgc-luxury-cta::after {
  content: none !important;
  display: none !important;
}

header .sgc-luxury-cta > *,
.site-header .sgc-luxury-cta > *,
.sgc-header .sgc-luxury-cta > *,
nav .sgc-luxury-cta > * {
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  transform: none !important;
}

header .sgc-luxury-cta > *::before,
header .sgc-luxury-cta > *::after,
.site-header .sgc-luxury-cta > *::before,
.site-header .sgc-luxury-cta > *::after,
.sgc-header .sgc-luxury-cta > *::before,
.sgc-header .sgc-luxury-cta > *::after,
nav .sgc-luxury-cta > *::before,
nav .sgc-luxury-cta > *::after {
  content: none !important;
  display: none !important;
}

header .sgc-luxury-cta:focus-visible,
.site-header .sgc-luxury-cta:focus-visible,
.sgc-header .sgc-luxury-cta:focus-visible,
nav .sgc-luxury-cta:focus-visible {
  outline: 0 !important;
  box-shadow: 0 14px 28px rgba(62, 36, 14, 0.18), 0 0 0 2px rgba(255, 248, 238, 0.72) !important;
}

/* Keep non-CTA header navigation links plain after the CTA-specific correction above. */
header nav a:not(.sgc-luxury-cta),
header [role="navigation"] a:not(.sgc-luxury-cta) {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}


/* 2026-06-03 — Header logo, My Work nowrap, and single-rectangle CTA correction */
header a[href="/"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 13rem !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0.12rem !important;
  white-space: normal !important;
  line-height: 1 !important;
  transform: none !important;
}

header a[href="/"] span:first-child {
  font-size: clamp(1.05rem, 1.28vw, 1.32rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.035em !important;
  max-width: 10.8rem !important;
}

header a[href="/"] span:last-child {
  font-size: clamp(0.42rem, 0.55vw, 0.54rem) !important;
  line-height: 1.05 !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
}

header nav a,
header [role="navigation"] a {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
  line-height: 1 !important;
}

header nav a[href="/work/"],
header nav a[href="/work"],
header [role="navigation"] a[href="/work/"],
header [role="navigation"] a[href="/work"] {
  white-space: nowrap !important;
  min-width: 4.5rem !important;
}

header button.hidden.md\:block,
header button[aria-label*="consultation"],
header button:has(.btn-primary) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

header button.hidden.md\:block > .btn-primary,
header button[aria-label*="consultation"] > .btn-primary,
header button:has(.btn-primary) > .btn-primary {
  width: auto !important;
  min-width: 16.2rem !important;
  height: 4.25rem !important;
  min-height: 4.25rem !important;
  padding: 0 2.9rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  border: 1px solid rgba(222,177,91,0.46) !important;
  background: linear-gradient(135deg, #dfb556 0%, #c9953a 46%, #a87524 100%) !important;
  box-shadow: 0 16px 30px rgba(92, 54, 20, 0.18), inset 0 1px 0 rgba(255, 239, 196, 0.24) !important;
  color: #fffaf2 !important;
  font-family: 'Outfit', 'Raleway', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.17em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: none !important;
}

header button.hidden.md\:block > .btn-primary::before,
header button.hidden.md\:block > .btn-primary::after,
header button[aria-label*="consultation"] > .btn-primary::before,
header button[aria-label*="consultation"] > .btn-primary::after,
header button:has(.btn-primary) > .btn-primary::before,
header button:has(.btn-primary) > .btn-primary::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1024px) {
  header a[href="/"] span:first-child {
    font-size: clamp(0.98rem, 2.2vw, 1.18rem) !important;
  }

  header nav,
  header [role="navigation"] {
    gap: clamp(1rem, 2.4vw, 2rem) !important;
  }
}

/* 2026-06-03 — Final header logo scale and true single-rectangle consultation CTA */
header a[href="/"] {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 14rem !important;
  min-width: 10.5rem !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transform: none !important;
}

header a[href="/"] > div,
header a[href="/"] .flex.flex-col {
  gap: 0.22rem !important;
  align-items: flex-start !important;
}

header a[href="/"] span:first-child {
  display: block !important;
  white-space: nowrap !important;
  max-width: none !important;
  font-size: clamp(1.38rem, 1.72vw, 1.62rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;
  color: #21140e !important;
}

header a[href="/"] span:last-child {
  display: block !important;
  white-space: nowrap !important;
  max-width: none !important;
  font-size: clamp(0.48rem, 0.64vw, 0.62rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  color: rgba(104, 73, 50, 0.7) !important;
}

header nav a,
header [role="navigation"] a,
header nav a[href="/work/"],
header nav a[href="/work"],
header [role="navigation"] a[href="/work/"],
header [role="navigation"] a[href="/work"] {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  min-width: max-content !important;
}

header button[aria-label*="consultation"],
header button.hidden.md\:block:has(.btn-primary),
header button:has(> .btn-primary) {
  width: auto !important;
  min-width: 17.25rem !important;
  height: 4.25rem !important;
  min-height: 4.25rem !important;
  padding: 0 3rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  border: 1px solid rgba(218, 171, 76, 0.38) !important;
  background: linear-gradient(135deg, #ddb24f 0%, #c89539 48%, #a87524 100%) !important;
  background-image: linear-gradient(135deg, #ddb24f 0%, #c89539 48%, #a87524 100%) !important;
  box-shadow: 0 14px 26px rgba(86, 52, 21, 0.18) !important;
  color: #fffaf2 !important;
  cursor: pointer !important;
}

header button[aria-label*="consultation"] > .btn-primary,
header button.hidden.md\:block > .btn-primary,
header button:has(> .btn-primary) > .btn-primary {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #fffaf2 !important;
  font-family: 'Outfit', 'Raleway', sans-serif !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  transform: none !important;
}

header button[aria-label*="consultation"]::before,
header button[aria-label*="consultation"]::after,
header button[aria-label*="consultation"] > .btn-primary::before,
header button[aria-label*="consultation"] > .btn-primary::after,
header button.hidden.md\:block > .btn-primary::before,
header button.hidden.md\:block > .btn-primary::after,
header button:has(> .btn-primary)::before,
header button:has(> .btn-primary)::after,
header button:has(> .btn-primary) > .btn-primary::before,
header button:has(> .btn-primary) > .btn-primary::after {
  content: none !important;
  display: none !important;
}

@media (max-width: 1100px) {
  header a[href="/"] {
    min-width: 9.2rem !important;
    max-width: 11rem !important;
  }

  header a[href="/"] span:first-child {
    font-size: clamp(1.08rem, 2vw, 1.32rem) !important;
  }

  header a[href="/"] span:last-child {
    font-size: clamp(0.42rem, 0.78vw, 0.52rem) !important;
  }

  header button[aria-label*="consultation"],
  header button.hidden.md\:block:has(.btn-primary),
  header button:has(> .btn-primary) {
    min-width: 14.6rem !important;
    height: 3.75rem !important;
    min-height: 3.75rem !important;
    padding: 0 2rem !important;
  }
}

/* 2026-06-03 — consistent white top banner and gold nav title interaction polish.
   Shared across Services, Work, About, Packages, and Contact; the exact-reference Home hero still hides the React header. */
#root header.fixed,
header.fixed,
#root header[class*="fixed"],
header[class*="fixed"] {
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.98) 0%, rgba(255, 249, 239, 0.94) 100%) !important;
  border-bottom: 1px solid rgba(185, 138, 59, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 14px 32px rgba(41, 27, 15, 0.08) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

#root header.fixed > .container,
header.fixed > .container,
#root header[class*="fixed"] > .container,
header[class*="fixed"] > .container {
  background: transparent !important;
  box-shadow: none !important;
}

#root header nav,
header nav,
header [role="navigation"],
header .nav {
  align-items: center !important;
  gap: clamp(0.82rem, 1.45vw, 1.28rem) !important;
}

#root header nav a:not(.sgc-luxury-cta),
header nav a:not(.sgc-luxury-cta),
header [role="navigation"] a:not(.sgc-luxury-cta),
header .nav a:not(.sgc-luxury-cta) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: max-content !important;
  padding: 0.28rem 0.08rem 0.42rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: inset 0 -2px 0 rgba(185, 138, 59, 0) !important;
  color: #2a180d !important;
  -webkit-text-fill-color: #2a180d !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-size: clamp(0.9rem, 0.88vw, 1rem) !important;
  font-weight: 750 !important;
  letter-spacing: 0.045em !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 13px rgba(43, 24, 13, 0.18) !important;
  transform: translateY(0) scale(1) !important;
  transition: color 180ms ease, box-shadow 180ms ease, transform 180ms ease, text-shadow 180ms ease !important;
}

#root header nav a:not(.sgc-luxury-cta) > span,
header nav a:not(.sgc-luxury-cta) > span,
header [role="navigation"] a:not(.sgc-luxury-cta) > span,
header .nav a:not(.sgc-luxury-cta) > span {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  white-space: nowrap !important;
  transform: none !important;
}

#root header nav a:not(.sgc-luxury-cta):hover,
#root header nav a:not(.sgc-luxury-cta):focus-visible,
header nav a:not(.sgc-luxury-cta):hover,
header nav a:not(.sgc-luxury-cta):focus-visible,
header [role="navigation"] a:not(.sgc-luxury-cta):hover,
header [role="navigation"] a:not(.sgc-luxury-cta):focus-visible,
header .nav a:not(.sgc-luxury-cta):hover,
header .nav a:not(.sgc-luxury-cta):focus-visible {
  color: #7b4d12 !important;
  -webkit-text-fill-color: #7b4d12 !important;
  box-shadow: inset 0 -3px 0 var(--sgc-luxury-gold) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.96), 0 8px 18px rgba(123, 77, 18, 0.22) !important;
  transform: translateY(-3px) scale(1.045) !important;
}

#root header nav a:not(.sgc-luxury-cta):active,
header nav a:not(.sgc-luxury-cta):active,
header [role="navigation"] a:not(.sgc-luxury-cta):active,
header .nav a:not(.sgc-luxury-cta):active {
  color: #8b6428 !important;
  -webkit-text-fill-color: #8b6428 !important;
  box-shadow: inset 0 -3px 0 var(--sgc-luxury-gold-dark) !important;
  transform: translateY(-1px) scale(1.018) !important;
}

#root header nav a:not(.sgc-luxury-cta)[aria-current="page"],
header nav a:not(.sgc-luxury-cta)[aria-current="page"],
header [role="navigation"] a:not(.sgc-luxury-cta)[aria-current="page"],
header .nav a:not(.sgc-luxury-cta)[aria-current="page"] {
  color: #6f430c !important;
  -webkit-text-fill-color: #6f430c !important;
  box-shadow: inset 0 -3px 0 var(--sgc-luxury-gold) !important;
}

#root header nav a[href="/work/"],
#root header nav a[href="/work"],
header nav a[href="/work/"],
header nav a[href="/work"],
header [role="navigation"] a[href="/work/"],
header [role="navigation"] a[href="/work"] {
  white-space: nowrap !important;
  min-width: max-content !important;
}

@media (max-width: 767px) {
  #root header.fixed,
  header.fixed,
  #root header[class*="fixed"],
  header[class*="fixed"] {
    background: rgba(255, 252, 246, 0.98) !important;
  }

  #root header nav a:not(.sgc-luxury-cta),
  header nav a:not(.sgc-luxury-cta),
  header [role="navigation"] a:not(.sgc-luxury-cta),
  header .nav a:not(.sgc-luxury-cta) {
    font-size: clamp(0.72rem, 3.2vw, 0.86rem) !important;
    letter-spacing: 0.025em !important;
    padding: 0.25rem 0.05rem 0.34rem !important;
    max-width: none !important;
  }
}

/* 2026-06-03 — requested no-underline nav title interaction.
   Titles now turn gold, pop up slightly, and gain a soft drop shadow on hover/focus/click instead of drawing a gold line. */
#root header nav a:not(.sgc-luxury-cta),
header nav a:not(.sgc-luxury-cta),
header [role="navigation"] a:not(.sgc-luxury-cta),
header .nav a:not(.sgc-luxury-cta) {
  box-shadow: none !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) !important;
}

#root header nav a:not(.sgc-luxury-cta):hover,
#root header nav a:not(.sgc-luxury-cta):focus-visible,
header nav a:not(.sgc-luxury-cta):hover,
header nav a:not(.sgc-luxury-cta):focus-visible,
header [role="navigation"] a:not(.sgc-luxury-cta):hover,
header [role="navigation"] a:not(.sgc-luxury-cta):focus-visible,
header .nav a:not(.sgc-luxury-cta):hover,
header .nav a:not(.sgc-luxury-cta):focus-visible {
  color: var(--sgc-luxury-gold) !important;
  -webkit-text-fill-color: var(--sgc-luxury-gold) !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.96), 0 8px 18px rgba(123, 77, 18, 0.28) !important;
  filter: drop-shadow(0 8px 10px rgba(70, 39, 15, 0.18)) !important;
  transform: translateY(-3px) scale(1.045) !important;
}

#root header nav a:not(.sgc-luxury-cta):active,
header nav a:not(.sgc-luxury-cta):active,
header [role="navigation"] a:not(.sgc-luxury-cta):active,
header .nav a:not(.sgc-luxury-cta):active {
  color: var(--sgc-luxury-gold-dark) !important;
  -webkit-text-fill-color: var(--sgc-luxury-gold-dark) !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 7px 16px rgba(123, 77, 18, 0.24) !important;
  filter: drop-shadow(0 6px 8px rgba(70, 39, 15, 0.16)) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

#root header nav a:not(.sgc-luxury-cta)[aria-current="page"],
header nav a:not(.sgc-luxury-cta)[aria-current="page"],
header [role="navigation"] a:not(.sgc-luxury-cta)[aria-current="page"],
header .nav a:not(.sgc-luxury-cta)[aria-current="page"] {
  box-shadow: none !important;
  border-bottom: 0 !important;
  text-decoration: none !important;
}

/* 2026-06-03 — final desktop/mobile title interaction: no underline, gold pop, soft shadow. */
.nav a,
header a,
footer a,
.sgc-site-header a,
.sgc-header-nav a,
.sgc-footer-nav a {
  text-decoration: none !important;
}
.nav a::before,
.nav a::after,
header nav a::before,
header nav a::after,
.sgc-site-header a::before,
.sgc-site-header a::after,
.sgc-header-nav a::before,
.sgc-header-nav a::after {
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
}
header nav a,
.sgc-site-header a,
.sgc-header-nav a,
footer nav a,
.sgc-footer-nav a {
  border-bottom: 0 !important;
  box-shadow: none !important;
  transition: color 180ms ease, transform 180ms ease, text-shadow 180ms ease, filter 180ms ease !important;
}
header nav a:hover,
header nav a:focus-visible,
header nav a:active,
.sgc-site-header a:hover,
.sgc-site-header a:focus-visible,
.sgc-site-header a:active,
.sgc-header-nav a:hover,
.sgc-header-nav a:focus-visible,
.sgc-header-nav a:active,
footer nav a:hover,
footer nav a:focus-visible,
footer nav a:active,
.sgc-footer-nav a:hover,
.sgc-footer-nav a:focus-visible,
.sgc-footer-nav a:active {
  color: #b98a3b !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.98), 0 10px 20px rgba(146, 107, 50, 0.26) !important;
  filter: drop-shadow(0 8px 10px rgba(73, 42, 16, 0.18)) !important;
  transform: translate3d(0, -3px, 0) scale(1.035) !important;
}
@media (max-width: 767px) {
  header nav a:hover,
  header nav a:focus-visible,
  header nav a:active,
  .sgc-site-header a:hover,
  .sgc-site-header a:focus-visible,
  .sgc-site-header a:active,
  .sgc-header-nav a:hover,
  .sgc-header-nav a:focus-visible,
  .sgc-header-nav a:active,
  footer nav a:hover,
  footer nav a:focus-visible,
  footer nav a:active,
  .sgc-footer-nav a:hover,
  .sgc-footer-nav a:focus-visible,
  .sgc-footer-nav a:active {
    color: #b98a3b !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.98), 0 8px 16px rgba(146, 107, 50, 0.24) !important;
    filter: drop-shadow(0 6px 8px rgba(73, 42, 16, 0.16)) !important;
    transform: translate3d(0, -2px, 0) scale(1.025) !important;
  }
}