.immersive-row {
  display: flex;
  align-items: center;
  gap: 48px;
}
@media (max-width: 992px) {
  .immersive-row {
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
  }
}
.immersive-image {
  flex: 0 0 400px;
  max-width: 400px;
  min-width: 240px;
  display: block;
}
.immersive-text {
  flex: 1 1 0;
  min-width: 260px;
  display: block;
}
.immersive-text .service-overview-text,
.immersive-text .pricing-features {
  display: block;
}
.immersive-text .pricing-features {
  list-style: disc inside;
  margin-left: 0;
  padding-left: 1.2em;
}
.immersive-text .pricing-features li {
  /* display property removed to avoid conflict */
  font-size: 0.95rem;
  font-family: inherit;
  color: inherit;
  font-weight: 300;
  margin-bottom: 0.2em;
  padding-left: 0;
  position: relative;
}
/* Pricing cards layout (service pages don't load Bootstrap).
   We build a small responsive flex grid just for the pricing section. */
#pricing > .container > .row{
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* matches .g-4 spacing */
  align-items: stretch;
}

/* 3 columns on desktop, accounting for the 2 gaps between them */
#pricing .col-lg-4{
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  flex: 1 1 calc((100% - 3rem) / 3);
  max-width: calc((100% - 3rem) / 3);
  min-width: 240px;
}

#pricing .pricing-card{
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Ensure pricing cards stretch to equal height within their row so all cards
  on a page share the same height. Also allow internal children to shrink
  correctly (avoid Firefox overflow issues) */
#pricing .col-lg-4 { display: flex; align-items: stretch; }
#pricing .pricing-card { flex: 1 1 auto; min-height: 0; }

/* Fixed spacing between the description and the features list so the gap is
  consistent regardless of description length. This preserves visual rhythm
  while letting the card grow taller when one card has more content. */
.pricing-card .pricing-description { margin-bottom: 20px !important; }
.pricing-card .pricing-features { margin-top: 0 !important; }
.pricing-features { margin-top: 0; }

/* 2 columns on tablets */
@media (max-width: 992px){
  #pricing .col-lg-4{
    flex-basis: calc((100% - 1.5rem) / 2);
    max-width:  calc((100% - 1.5rem) / 2);
  }
}

/* 1 column on mobile */
@media (max-width: 700px){
  #pricing .col-lg-4{
    flex-basis: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* Minimal grid helpers (service pages only) */
.row{display:flex; flex-wrap:wrap;}
.row.justify-content-center{justify-content:center;}
.row.g-4{gap:1.5rem;}

/* Column defaults */
.col-lg-8, .col-lg-6, .col-lg-4{flex:0 0 100%; max-width:100%;}
@media (min-width: 992px){
  .col-lg-8{flex:0 0 66.6667%; max-width:66.6667%;}
  .col-lg-6{flex:0 0 50%; max-width:50%;}
  .col-lg-4{flex:0 0 33.3333%; max-width:33.3333%;}
}

/* Beautiful Contact Us button in pricing cards */
#pricing .pricing-cta {
  background: linear-gradient(90deg, #c8a96a 0%, #f2d38a 100%);
  color: #070812;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 0.9rem 0;
  margin-top: auto;
  box-shadow: 0 4px 16px rgba(200,169,106,0.13);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
  letter-spacing: 0.03em;
  width: 100%;
  display: block;
  text-align: center;
  text-transform: none;
}
#pricing .pricing-cta:hover, #pricing .pricing-cta:focus {
  /* Keep the button at least as bright on hover — use a slightly warmer
     gradient and add an inner warm glow so the button doesn't look dimmer. */
  background: linear-gradient(90deg, #ffe9b8 0%, #ffd98a 50%, #f7d48a 100%);
  color: #070812;
  box-shadow:
    inset 0 8px 24px rgba(242,211,138,0.18), /* inner warm glow */
    0 12px 32px rgba(242,211,138,0.12);      /* outer soft glow */
  transform: translateY(-2px) scale(1.03);
  outline: none;
}
/* Service Pages Styles */

:root {
  --hero-image-opacity: 0.1;
  --hero-overlay-opacity-start: 1;
  --hero-overlay-opacity-end: 1;
  /* Convenience single variable to control gradient strength across pages. */
  --hero-overlay-opacity: var(--hero-overlay-opacity-start);
}

/* Add horizontal padding to content sections to create space from navigation arrows */
section:not(.service-hero) .container {

}

@media (max-width: 992px) {
  section:not(.service-hero) .container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

@media (max-width: 768px) {
  section:not(.service-hero) .container {
    padding-left: 60px;
    padding-right: 60px;
  }
}

.navbar-brand:focus {
  outline: none;
  box-shadow: none;
}

.service-hero {
  min-height: 50vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: var(--nav-height);
  padding-bottom: 2rem;
}

.service-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Use the same soft, multi-colored radial gradient as the homepage for visual consistency. */
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(187,168,255,0.22), transparent 58%),
    radial-gradient(900px 600px at 80% 30%, rgba(123,231,255,0.18), transparent 62%),
    radial-gradient(1000px 700px at 50% 100%, rgba(242,211,138,0.14), transparent 58%);
  /* Use unified overlay opacity if provided, otherwise fall back to the start value. */
  opacity: var(--hero-overlay-opacity, var(--hero-overlay-opacity-start, 1));
  z-index: -1;
}

.service-hero .container {
  z-index: 2;
  padding-top: 15px;
}

.hero-icon {
  width: 120px;
  height: 120px;
  margin-bottom: 2rem;
}

.hero-icon i {
  width: 100%;
  height: 100%;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: var(--hero-image-opacity);
}

.service-hero .hero-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap:26px; align-items:start; }
.service-hero .hero-left{ align-self: start; }
.service-hero .hero-aside{ min-width:0; }

/* Breadcrumb link */
.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: opacity 0.3s ease;
}

.breadcrumb-link:hover {
  opacity: 0.8;
}

/* Breadcrumb divider */
.breadcrumb-divider {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, rgba(242,211,138,.95) 0%, rgba(242,211,138,0) 100%);
  flex-shrink: 0;
}

/* Breadcrumb text */
.breadcrumb-text {
  font-family: "Fraunces", ui-serif, Georgia, serif;
  font-size: 14px;
  color: rgba(242,211,138,.95);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Remove decorative line before the kicker on service hero (breadcrumb uses arrow already) */
.service-hero .kicker::before{ display: none !important; }

/* Ensure all hero content is left-aligned and attached to the container left edge */
.service-hero, .service-hero .container, .service-hero .hero-grid {
  text-align: left;
}
.service-hero .hero-actions{ justify-content: flex-start; }
.service-hero .kicker{ display:inline-block; margin-bottom:12px; }
.service-hero h1, .service-hero .display-3{ margin:14px 0 12px; font-size: clamp(38px, 4.5vw, 64px); line-height:1.05; letter-spacing:-.02em; color: var(--gold); }
.service-hero .service-hero-lead{ font-size:18px; color:var(--muted); max-width:60ch; }
.service-hero .hero-actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px; }
.service-hero .hero-card{ background: transparent; box-shadow: none; padding:0; }
.service-hero .gallery-image{ height: 100%; min-height: 320px; border-radius: 12px; overflow:hidden; }
.service-hero .gallery-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Breadcrumb-like kicker on service hero to match homepage style */
.service-hero .breadcrumb-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color: var(--gold);
  font-weight:700;
  text-decoration:none;
  margin-bottom: 12px;
}
.service-hero .breadcrumb-link .kicker-text{ color: var(--gold); }
.service-hero .breadcrumb-link i{ color: var(--gold); }

@media (max-width: 980px){
  .service-hero .hero-grid{ grid-template-columns: 1fr; }
  .service-hero .gallery-image{ height:300px; }
  .service-hero .hero-aside{ display:none; }
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-list i {
  color: #c8a96a !important;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0; /* remove offset so all icons align consistently */
}

.feature-list svg {
  stroke: #c8a96a !important;
  color: #c8a96a !important;
}

.feature-list .lucide {
  stroke: #c8a96a !important;
  color: #c8a96a !important;
}

.feature-list svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex: 0 0 24px;
}

.feature-list strong {
  font-size: 1.05rem;
  color: var(--gold);
  font-weight: 600;
}

.feature-list p {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0.25rem 0 0 0;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
}

/* Section styling */
.section-dark {
  background: var(--dark-section-bg);
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}

/* Enforce consistent font sizing for the first content section after the hero
   (black background). Using 1.05rem to match Key Features and Our Process sections. */
.section-dark .feature-list,
.section-dark .pricing-features {
  font-size: 1.05rem;
  line-height: 1.8;
}

.section-dark .feature-list p,
.section-dark .feature-list strong,
.section-dark .pricing-features li {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* Make service overview paragraph match Key Features and Our Process sizing */
.section-dark .service-overview-text {
  font-size: 1.05rem;
  line-height: 1.8;
}

/* Global section spacing: default for all sections */
section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.py-8 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}


.immersive-section {
  position: relative;
  z-index: 0;
}
.immersive-section::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -80px;
  /* match the ::before height so the overlap is symmetric */
  height: 100px;
  background: linear-gradient(180deg, var(--dark-section-bg) 20%, transparent 100%);
  pointer-events: none;
  z-index: -2;
}
.immersive-section::before {
      content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -100px;
    height: 100px;
    background: linear-gradient(180deg, transparent, var(--dark-section-bg) 100%);
    pointer-events: none;
    z-index: -2;
}

/* Ensure the Service Formats (#pricing) sits above the immersive-section gradients */
#pricing {
  position: relative;
  z-index: 2;
}

/* Larger overlap for the final CTA so the gradient does not reach the footer */
.ready-cta.immersive-section::after {
  display: none; /* remove bottom gradient for Ready CTA */
}
.ready-cta.immersive-section::before {
  top: -200px;
  height: 200px;
  z-index: -2;
}

.section-heading {
  color: #fff;
}

/* Key Features + Our Process two-column layout
   Important: Target ONLY the Key Features + Process section on service pages.
   We keep Bootstrap markup but override `.row` negative margins and flex behavior
   to prevent horizontal overflow on mobile Safari after orientation changes.
*/
.features-process-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-top: 90px;
  padding-bottom: 90px;
  position: relative;
  z-index: 4;
}

/* Remove Bootstrap column padding inside this grid row to avoid double spacing */
.features-process-row > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
  min-width: 0;
}

@media (max-width: 991px) {
  .features-process-row {
    column-gap: 32px;
  }
}

@media (max-width: 700px) {
  .features-process-row {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 32px;
  }
}

/* Service overview paragraph */
.service-overview-text {
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.05rem;
  text-align: left;
  word-spacing: normal;
  /* Keep paragraph spacing consistent across service pages (requested ~20–30px). */
  margin: 0 0 24px;
}

.service-overview-text.mb-last {
  margin-bottom: 0;
}

/* If a section ends with a service paragraph and no explicit .mb-last is present, avoid extra trailing gap. */
.section .service-overview-text:last-child {
  margin-bottom: 0;
}

/* If a section ends with a normal overview paragraph (without .mb-last), remove the trailing gap. */
.section .service-overview-text:last-child {
  margin-bottom: 0;
}

.service-overview-text strong {
  word-spacing: normal;
}

/* Normalize spacing under section headings on service pages
   Ensures consistent gap between h2 titles and the following content (lists, paragraphs, rows). */
.section h2,
.section .section-heading {
  margin: 0 0 20px;
}

.section .feature-list {
  margin-top: 8px;
}

/* Keep pricing rows slightly separated from their heading */
#pricing > .container > .row,
.section #pricing .row {
  margin-top: 12px;
}

/* Small top spacing for service-overview paragraphs when directly after a heading */
.section .section-heading + .service-overview-text {
  margin-top: 6px;
}

/* NOTE: Removed earlier global stacking overrides to avoid conflicts. */

/* Dedicated helper class to raise a section above immersive gradients.
  Apply `stack-above-gradient` to the <section> wrapping Key Features / Our Process. */
.stack-above-gradient { position: relative; z-index: 20; }
.stack-above-gradient > .container { position: relative; z-index: 21; }

/* Show standard bullet points for lists inside immersive sections (left dots).
   This is scoped so pricing card lists elsewhere remain unchanged. */
.immersive-section .pricing-features {
  list-style-type: disc;
  list-style-position: outside;
  margin: 8px 0 16px 1.2rem;
  padding-left: 0;
}
.immersive-section .pricing-features li {
  padding-left: 0.25rem;
  margin-bottom: 0.5rem;
  color: rgba(255,255,255,0.8);
  font-weight: 300;
  /* Ensure a standard list-item display so browser list markers appear (override flex layout used elsewhere) */
  display: list-item;
  list-style-position: outside;
}

.immersive-section .pricing-features li::marker {
  color: rgba(255,255,255,0.8);
  font-size: 1em;
}

/* Hero lead text */
.service-hero-lead {
  font-weight: 300;
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  text-align: left;
  word-spacing: normal;
}

/* Smooth appear-on-load helper for the first section after the hero.
   Elements inside the first section that normally animate via AOS will receive
   an 'appear-item' class on load and then get 'visible' to trigger a gentle
   opacity/translate transition so the section is visible immediately. */
.appear-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(.2,.9,.2,1), transform 560ms cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.appear-item.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* On very large screens, reduce the hero height so the section after the
   hero becomes visible without moving the following section. This keeps the
   next section in its original document position and avoids overlapping hero
   content. */
@media (min-width: 2000px) {
  .service-hero {
    min-height: 55vh;
  }
}

@media (max-width: 768px) {
  /* On mobile screens remove bottom padding from the first section (hero) only so it sits flush.
     This targets the first section on the page and the first .service-hero specifically to avoid
     altering padding for other sections. Also remove the top padding of the section immediately
     following the hero when it uses the common service markup (.py-6.section-dark). */
  main > section:first-of-type,
  .service-hero:first-of-type {
    padding-bottom: 0;
  }

  /* Remove top padding from the section immediately following the hero if it is a .py-6.section-dark */
  .service-hero + section.py-6.section-dark,
  .service-hero + .py-6.section-dark {
    padding-top: 0;
  }
}

/* Pricing features list */
.pricing-features {
  margin: 0 0 1rem 1.1rem;
  padding: 0;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.05rem;
  text-align: left;
  word-spacing: normal;
}

.pricing-features strong {
  word-spacing: normal;
}

.pricing-features li {
  margin-bottom: 0.35rem;
}

.pricing-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(200, 169, 106, 0.5);
  box-shadow: 0 12px 40px rgba(200, 169, 106, 0.15);
}

.pricing-card.featured {
  border-color: #c8a96a;
  /* Match the default pricing card background so the middle card visually aligns */
  background: rgba(255, 255, 255, 0.03);
}

.pricing-icon {
  width: 60px;
  height: 60px;
  background: rgba(200, 169, 106, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

/* Ensure both legacy <i> placeholders and replacement SVGs inherit the brand color */
.pricing-icon { color: #c8a96a; }
.pricing-icon i,
.pricing-icon svg {
  width: 32px;
  height: 32px;
}

/* Ensure lucide-generated SVGs draw with the current color and visible stroke */
.pricing-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Ensure lucide replacement SVGs are visible and aligned */
.pricing-icon svg, .pricing-icon .lucide {
  display: inline-block;
  vertical-align: middle;
}

.pricing-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: #fff;
}

/* Reserve space for up to 2 lines of title to keep prices aligned */
.pricing-title {
  line-height: 1.15;
  min-height: 3.6rem; /* approx. 2 lines at 1.5rem */
  display: block;
}

.pricing-price {
  font-size: 2.5rem;
  font-weight: 700;
  color: #c8a96a;
  margin-bottom: 0.25rem;
}

.pricing-period {
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.5rem;
}

.pricing-description {
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 0;
  /* Reserve a minimum height (~5 lines) but allow expansion if content requires it */
  flex: 0 0 auto;
  min-height: 7.6rem; /* ~5 lines */
  /* allow the description to grow instead of cropping text */
}

.pricing-features {
  list-style: none; /* default for service lists */
  padding: 0;
  margin: 0 0 1rem 0;
}

.pricing-features li {
  padding: 0.75rem 0;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: 300;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.45rem 0;
}

.pricing-features i {
  color: #c8a96a !important;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0; /* remove vertical offset so icons align with multi-line text */
}

.pricing-features li i { display: inline-flex; align-items: center; }

.pricing-features svg,
.pricing-features .lucide {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  flex: 0 0 24px;
  stroke: #c8a96a !important;
  color: #c8a96a !important;
}

.pricing-features {
  margin: 0 0 1rem 1.1rem;
  padding: 0px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  list-style: disc inside;
}
.pricing-features li {
  margin-bottom: 0.2em;
  padding-left: 0;
  position: relative;
  font-size: 0.95rem;
  font-family: inherit;
  color: inherit;
  font-weight: 300;
  /* display property removed to avoid conflict */
}

/* Responsive container fix: ensure main content uses full width on tablets */
@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
  }
}
@media (max-width: 992px) {
  .container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (max-width: 768px) {
  .container {
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

.gallery-image {
  width: 100%;
  height: 400px;
  border-radius: 0;
  overflow: hidden;
  border: none;
  margin-bottom: 2rem;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Post-hero image+text section on all service pages: fit full image, no crop */
.service-page .service-hero + .py-6 .gallery-image {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.service-page .service-hero + .py-6 .gallery-image picture,
.service-page .service-hero + .py-6 .gallery-image source,
.service-page .service-hero + .py-6 .gallery-image img {
  display: block;
  width: 100%;
}

.service-page .service-hero + .py-6 .gallery-image img {
  height: auto !important;
  max-height: min(70vh, 560px);
  object-fit: contain !important;
  object-position: center;
  position: relative;
  z-index: 1;
  transition: filter 320ms ease;
}

.service-page .service-hero + .py-6 .gallery-image::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.service-page .service-hero + .py-6 .gallery-image::after {
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,248,230,0) 36%,
    rgba(255,244,218,.34) 50%,
    rgba(255,248,230,0) 64%,
    rgba(255,255,255,0) 100%
  );
  background-repeat: no-repeat;
  background-size: 70% 100%;
  background-position: -140% 0;
  filter: blur(2px);
  opacity: .22;
  transition: background-position 680ms cubic-bezier(.22,.61,.36,1), opacity 320ms ease;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 28%, rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 52%);
  mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 0%, rgba(0,0,0,.95) 28%, rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 52%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@supports not ((-webkit-mask-image: radial-gradient(circle, #000 0%, transparent 100%)) or (mask-image: radial-gradient(circle, #000 0%, transparent 100%))) {
  .service-page .service-hero + .py-6 .gallery-image::after {
    filter: blur(1px);
    opacity: .16;
    background-size: 100% 100%;
    background-position: 50% 0;
  }

  @media (hover: hover) {
    .service-page .service-hero + .py-6 .gallery-image:hover::after,
    .service-page .service-hero + .py-6 .gallery-image:focus-within::after {
      opacity: .28;
      background-position: 60% 0;
    }
  }
}

@media (hover: hover) {
  .service-page .service-hero + .py-6 .gallery-image:hover::after,
  .service-page .service-hero + .py-6 .gallery-image:focus-within::after {
    opacity: .42;
    background-position: 85% 0;
  }

  .service-page .service-hero + .py-6 .gallery-image:hover img,
  .service-page .service-hero + .py-6 .gallery-image:focus-within img {
    filter: saturate(1.07) contrast(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .service-page .service-hero + .py-6 .gallery-image::after,
  .service-page .service-hero + .py-6 .gallery-image img {
    transition: none !important;
  }
}

/* Service Navigation Arrows */
.service-navigation {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 30%;
  max-width: 100%;
  overflow: hidden; /* prevent accidental horizontal overflow on iOS after rotate */
}


.service-nav-arrow {
  position: relative;
  top: auto;
  transform: none;
  pointer-events: all;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  border: 2px solid rgba(200, 169, 106, 0.5);
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #c8a96a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(200, 169, 106, 0.2);
  overflow: visible;
  white-space: nowrap;
  outline: none;
  padding: 0;
  margin: 0;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .service-nav-arrow {
    background: rgba(0, 0, 0, 0.9);
  }
}


.service-nav-arrow:hover {
  background: rgba(200, 169, 106, 0.3);
  border-color: #c8a96a;
  box-shadow: 0 0 25px rgba(200, 169, 106, 0.5);
  width: 180px;
}

.service-nav-prev:hover {
  justify-content: flex-start;
  padding-left: 13px;
}

.service-nav-next:hover {
  justify-content: flex-end;
  padding-right: 13px;
}

.service-nav-arrow:active {
  /* Remove large upward translate which moves the button when clicked.
     Keep a subtle scale for click feedback only. */
  transform: scale(0.97);
}

/* Keep keyboard focus consistent with click feedback */
.service-nav-arrow:focus {
  transform: scale(0.97);
  outline: none;
}

.service-nav-arrow i {
  width: 24px;
  height: 24px;
  stroke-width: 2.5px;
  flex-shrink: 0;
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* Ensure Lucide-generated SVG icons inside the nav buttons are visible
   (Lucide replaces <i data-lucide=".."> with <svg> elements). */
.service-nav-arrow svg,
.service-nav-arrow .lucide {
  width: 24px;
  height: 24px;
  stroke-width: 2.5px;
  flex-shrink: 0;
  opacity: 1;
  position: relative;
  z-index: 2;
  stroke: currentColor;
  fill: none;
}

.service-nav-text {
  opacity: 0;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: opacity 0.3s ease;
  position: absolute;
  white-space: nowrap;
}

.service-nav-prev .service-nav-text {
  left: 45px;
}

.service-nav-next .service-nav-text {
  right: 45px;
}

.service-nav-arrow:hover .service-nav-text {
  opacity: 1;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .service-hero {
    min-height: 70vh;
    padding-top: calc(var(--nav-height) + 30px) !important;
  }

  .hero-icon {
    width: 80px;
    height: 80px;
  }

  .pricing-price {
    font-size: 2rem;
  }

  .gallery-image {
    height: 300px;
    background: transparent;
  }

  .service-page .service-hero + .py-6 .gallery-image {
    height: auto !important;
  }

  .service-page .service-hero + .py-6 .gallery-image img {
    max-height: min(62vh, 420px);
  }

  .service-nav-arrow {
    width: 40px;
    height: 40px;
  }

  .service-navigation {
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: 50px;
  }

  .service-nav-arrow i {
    width: 20px;
    height: 20px;
  }

  .service-nav-prev {
    left: 10px;
  }

  .service-nav-next {
    right: 10px;
  }
}

/* Keep prev/next arrows pinned to the bottom on phones (including wider/landscape iPhones)
   so they never jump back to the vertical center. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .service-navigation {
    inset: auto 0 0 0;
    height: auto;
    align-items: flex-end !important;
    padding-top: 0 !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Service-page responsive helpers: ensure columns behave like the original layout
   - `.col-lg-6` becomes two columns on >=992px, single column on mobile
   - `.col-lg-4` becomes three columns on >=992px, single column on mobile
   These rules only affect sections using the `.py-6` and `#pricing` layout so
   they don't interfere with global grid elsewhere. */
/* Desktop-first flex grid for service sections (doesn't rely on Bootstrap) */
.py-6 > .container > .row,
#pricing > .container > .row {
  align-items: stretch;
}

/* Two-column layout for content blocks inside .py-6 (desktop >=992px) */
.py-6 .col-lg-6{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
@media (min-width: 992px){
  .py-6 .col-lg-6{
    flex: 0 0 50% !important;
    max-width: 100% !important;
  }
}

/* Strong desktop override for the Immersive section: ensure image (left) and text (right)
   are side-by-side on desktop widths. Targets the exact structure used in the page. */
@media (min-width: 992px){
  /* New custom immersive-row layout */
  .immersive-row{ display:flex !important; flex-direction:row !important; gap:24px; align-items:center !important; }
  .immersive-row .immersive-image, .immersive-row .immersive-text{ flex: 0 0 50% !important; max-width:50% !important; }
  .immersive-row .gallery-image{ height: 100% !important; min-height: 360px; }
  .immersive-row .gallery-image img{ height:100%; width:100%; object-fit:contain; }
}

/* Ensure feature lists line up vertically within columns */
.feature-list{ margin:0; padding:0; }

.immersive-section{ position: relative; z-index: 0; }
/* Create an overlapping top fade (transparent at top -> opaque at bottom)
   and a bottom fade (transparent at bottom -> opaque at top) using
   ::before and ::after so the fades don't affect layout. */
.immersive-section::before,
.immersive-section::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 100px; /* increased size (double) */
  pointer-events: none;
  z-index: -1; /* sit behind section content */
}
.immersive-section::before{
  top: -100px; /* overlap previous section */
  background: linear-gradient(to bottom, transparent 0%, var(--dark-section-bg) 100%);
}
.immersive-section::after{
  bottom: -100px; /* overlap next section */
  background: linear-gradient(to top, transparent 0%, var(--dark-section-bg) 100%);
}
@media (max-width:700px){ .immersive-section::before, .immersive-section::after{ height:100px; } }

/* Utility: top-only immersive fade for sections that only need an overlapping top gradient */
.immersive-top{ position: relative; z-index: 0; }
.immersive-top::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -100px;
  height: 100px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, var(--dark-section-bg) 100%);
  z-index: -1;
}
@media (max-width:700px){ .immersive-top::before{ height:80px; top:-80px; } }
.feature-list li{ display:flex; gap:1rem; align-items:flex-start; }

/* Use the site's gold accent for feature headings and icons to match the homepage hero */
.feature-list strong{ color: var(--gold); }
.feature-list i,
.feature-list svg,
.feature-list .lucide{ color: var(--gold) !important; stroke: var(--gold) !important; }


/* Mobile stacking for immersive-row */
@media (max-width: 991.98px){
  .immersive-row{ display:block !important; }
  .immersive-row .immersive-image, .immersive-row .immersive-text{ flex: 0 0 100% !important; max-width:100% !important; }
  .immersive-row .gallery-image{ height: 300px; }
}


/* --- Rhythm & typography polish (additive, non-breaking) --- */
:root{
  --section-pad: clamp(72px, 8vw, 104px);
  --section-pad-tight: clamp(56px, 6vw, 84px);
  --measure: 68ch;
}

/* Keep section transitions (::before/::after) intact: do NOT clip/hidden here */
section{
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

.section-dark{
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}

/* Improve long-form readability inside service sections */
.service-overview-text,
.services-content p,
.services-content li,
.immersive-section p,
.immersive-section li{
  max-width: var(--measure);
}


/* --- Keep max-width from affecting cards/grids --- */
.pricing-card p,
.pricing-card li,
.services-grid p,
.services-grid li,
.card p,
.card li{
  max-width: none;
}


/* Don't add global section padding to the service hero */
.service-hero{
  padding-top: 0;
  padding-bottom: 0;
}

/* Very large displays: match homepage container width */
@media (min-width: 3000px) {
  .container {
    max-width: 1600px !important;
  }
  
  /* Ensure hero section uses the same wider container */
  .service-hero .container {
    max-width: 1600px !important;
  }
  
  /* Ensure immersive section (image + text) uses the wider container */
  .immersive-section .container,
  section:not(.service-hero) .container {
    max-width: 1600px !important;
  }
}