/* ============================================================================
   Stonewater Pools - style.css
   Visual system: "Twilight Resort Luxury"
   Deep twilight navy, luminous aqua water, warm travertine gold.
   Mobile-first. No em dashes or en dashes anywhere.
   ========================================================================== */

/* ---- Design tokens ---------------------------------------------------- */
:root {
  --bg:        #0C2230;   /* deep twilight navy */
  --bg-2:      #143245;   /* raised panels */
  --bg-3:      #0a1c28;   /* deepest wells */
  --water:     #2EC6CB;   /* luminous aqua, primary */
  --water-2:   #4fd8dc;   /* aqua highlight */
  --stone:     #CBA877;   /* warm travertine gold */
  --stone-2:   #ddc095;   /* stone highlight */
  --text:      #EEF4F5;
  --text-dim:  #9DB1B8;
  --line:      rgba(157, 177, 184, 0.16);
  --line-soft: rgba(157, 177, 184, 0.10);

  --shadow:    0 24px 60px -24px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.75);
  --glow:      0 0 40px -6px rgba(46, 198, 203, 0.45);

  --container: 1200px;
  --pad-section: clamp(4rem, 8.5vw, 7rem);   /* round 2: one rhythm, top = bottom */
  --gap:       clamp(1.25rem, 4vw, 2.5rem);
  --radius:    16px;
  --radius-sm: 10px;

  --font-display: "Jost", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---- Reset / base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* No CSS scroll-behavior: smooth here. It conflicts with ScrollTrigger pinning.
   Nav and CTA smooth scrolling is handled in JS (scrollToTarget in main.js). */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
select, input, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.1; }

:focus-visible {
  outline: 2px solid var(--water);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--water); color: var(--bg-3);
  padding: 0.6rem 1rem; border-radius: 8px; font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---- Shared section + type primitives --------------------------------- */
.section { padding-block: var(--pad-section); position: relative; }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
  margin-bottom: 1.1rem;
}

.section-head { max-width: 960px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Round 2: every section opener (eyebrow, title, subtext) is center-lined on the
   page. Contact keeps its left-aligned opener beside the form. */
.section-head:not(.section-head--left) { margin-inline: auto; text-align: center; }
.section-head:not(.section-head--left) .section-sub { margin-inline: auto; text-wrap: balance; }
.section-head--left { margin-inline: 0; }
.section-head--light .section-title,
.section-head--light .eyebrow { color: var(--text); }
.section-head--light .eyebrow { color: var(--stone-2); }

.section-title {
  text-wrap: balance;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  letter-spacing: -0.01em;
  color: var(--text);
}
.section-sub {
  margin-top: 1.1rem;
  color: var(--text-dim);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  max-width: 60ch; text-wrap: pretty;
}

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 500; letter-spacing: 0.04em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              box-shadow 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
  white-space: nowrap;
}
.btn--accent {
  background: linear-gradient(180deg, var(--stone-2), var(--stone));
  color: #1c130a;
  box-shadow: 0 14px 34px -16px rgba(203, 168, 119, 0.7);
}
.btn--accent:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #e8cfa3, var(--stone-2));
  box-shadow: 0 18px 44px -14px rgba(203, 168, 119, 0.85);
}
.btn--ghost {
  border: 1px solid rgba(203, 168, 119, 0.45);
  color: var(--text);
  background: rgba(238, 244, 245, 0.02);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--stone-2); color: var(--stone-2); transform: translateY(-2px); }
.btn--lg { padding: 1rem 2rem; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---- Header ----------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
  background: rgba(10, 28, 40, 0.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.7);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 76px; }

.brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; }
.brand-mark {
  width: 34px; height: 34px; flex: none; display: inline-flex;
  border-radius: 9px; box-shadow: 0 0 22px -6px rgba(46, 198, 203, 0.45);
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { white-space: nowrap; font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; letter-spacing: 0.02em; }
.brand-tagline { white-space: nowrap; font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-dim); }

.site-nav { margin-left: auto; }
.nav-list { display: flex; gap: 1.8rem; }
.nav-list a {
  font-family: var(--font-display); font-size: 0.95rem; color: var(--text-dim);
  position: relative; padding: 0.3rem 0; transition: color 0.2s var(--ease);
}
.nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 0;
  background: var(--water); transition: width 0.3s var(--ease);
}
.nav-list a:hover, .nav-list a.is-active { color: var(--text); }
.nav-list a.is-active::after, .nav-list a:hover::after { width: 100%; }

.header-cta { font-size: 0.92rem; padding: 0.7rem 1.3rem; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; margin-left: 0.5rem; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  background: rgba(10, 28, 40, 0.96);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-soft);
  padding: 1.2rem clamp(1.1rem, 4vw, 2rem) 1.6rem;
}
.mobile-nav-list { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.mobile-nav-list a { display: block; padding: 0.8rem 0; font-family: var(--font-display); font-size: 1.1rem; border-bottom: 1px solid var(--line-soft); }

/* ====================================================================== *
   HERO (scroll-scrub centerpiece)
   ====================================================================== */
/* No fixed height on the section: ScrollTrigger's pin-spacer extends it so the
   pinned hero reserves real scroll space and following sections stay below it. */
.hero { position: relative; }
.hero-pin { position: relative; height: 100vh; width: 100%; overflow: hidden; }

.hero-video-wrap { position: absolute; inset: 0; z-index: 1; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--bg-3);
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(120% 80% at 30% 20%, transparent 40%, rgba(8,22,32,0.55) 100%),
    linear-gradient(180deg, rgba(8,22,32,0.55) 0%, rgba(8,22,32,0.12) 38%, rgba(8,22,32,0.72) 100%);
}

.hero-content {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding-bottom: clamp(4.5rem, 12vh, 9rem);
}
.hero-eyebrow {
  font-family: var(--font-display); font-size: 0.82rem;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--stone-2);
  margin-bottom: 1.3rem;
}
.hero-headline {
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  font-weight: 400; letter-spacing: -0.02em; max-width: none;
  text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.hero-sub {
  margin-top: 1.5rem; max-width: 54ch;
  color: rgba(238,244,245,0.92); font-size: clamp(1rem, 1.8vw, 1.2rem);
  text-shadow: 0 1px 16px rgba(0,0,0,0.5);
}
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero-scrollhint {
  position: absolute; left: 50%; bottom: 2rem; z-index: 3;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--font-display); font-size: 0.7rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-dim);
}
.hero-scrollhint-line { width: 1px; height: 46px; background: linear-gradient(var(--water), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hero-scrollhint-line { animation: hintPulse 2.4s var(--ease) infinite; }
}
@keyframes hintPulse { 0%, 100% { opacity: 0.4; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1); } }

/* ====================================================================== *
   INTRO / STATEMENT
   ====================================================================== */
.intro {
  position: relative;
  padding-top: var(--pad-section);
  /* bottom = the shared rhythm + the wave separator's height (it sits in this padding) */
  padding-bottom: calc(var(--pad-section) + clamp(54px, 7vw, 110px));
  text-align: center;
  /* a lighter "water surface" band so it reads apart from What We Build */
  background:
    radial-gradient(60% 80% at 50% 110%, rgba(46,198,203,0.10), transparent 70%),
    linear-gradient(180deg, var(--bg) 0%, #0F2E40 100%);
}

/* ---- Water-line separator (Resort Living -> What We Build) ----------- */
.sep-wave {
  position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1;
  height: clamp(54px, 7vw, 110px);
  line-height: 0; pointer-events: none;
}
.sep-wave svg { display: block; width: 100%; height: 100%; }
.wv-back { fill: rgba(46,198,203,0.07); }
.wv-back-line { fill: none; stroke: var(--water); stroke-opacity: 0.28; stroke-width: 1; vector-effect: non-scaling-stroke; }
.wv-front { fill: var(--bg-3); }
.wv-front-line { fill: none; stroke: var(--stone); stroke-opacity: 0.6; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.intro-inner { max-width: 880px; margin-inline: auto; }
.intro-line {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem); line-height: 1.35;
  color: var(--text); letter-spacing: -0.005em;
}
.intro-line::first-line { color: var(--text); }

/* ====================================================================== *
   SERVICES (expanding image band)
   ----------------------------------------------------------------------
   Base (below 1080px): a horizontal snap rail of portrait panels. All copy
   is visible, nothing depends on hover, and the next panel peeks in as the
   swipe affordance. The triggers are hidden here because nothing on the
   rail is interactive.

   Band (1080px and up): the same panels become one full-height row. The
   active panel grows to about three times the width of the collapsed ones
   and reveals its copy; collapsed panels keep the numeral and run their
   title vertically up the image. One row instead of three, and the images
   carry the layout instead of sitting boxed above a text slab.
   ====================================================================== */
.services { background: var(--bg-3); }

.services-band {
  display: flex;
  gap: clamp(0.7rem, 2vw, 1rem);
  /* Bleed past the container padding so the peeking panel reads as a
     designed edge rather than a clipped card. */
  margin-inline: calc(-1 * clamp(1.1rem, 4vw, 2rem));
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1.1rem, 4vw, 2rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.services-band::-webkit-scrollbar { display: none; }

.services-band { height: clamp(430px, 60vh, 540px); }

.service-panel {
  position: relative;
  flex: 0 0 min(78vw, 320px);
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  scroll-snap-align: start;
  isolation: isolate;
}

.service-panel-media { position: absolute; inset: 0; }
.service-panel-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
}
/* Two scrims: a light one at the top so the numeral holds on bright skies,
   and a deep one at the bottom so copy stays legible over pale stone. */
.service-panel-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
      rgba(6,20,28,0.55) 0%, rgba(6,20,28,0) 22%),
    linear-gradient(180deg,
      rgba(12,34,48,0) 26%, rgba(12,34,48,0.72) 58%, rgba(8,24,34,0.96) 100%);
}

.service-panel-num {
  position: absolute; z-index: 2; top: 1.1rem; left: 1.25rem;
  font-family: var(--font-display); font-size: 0.8rem; font-weight: 500;
  letter-spacing: 0.24em; color: var(--stone);
  text-shadow: 0 1px 14px rgba(6, 20, 28, 0.85);
}

.service-panel-body {
  position: absolute; z-index: 2;
  left: 1.25rem; right: 1.25rem; bottom: 1.3rem;
  display: flex; flex-direction: column;
}
.service-panel-rule {
  display: block; width: 32px; height: 2px; margin-bottom: 0.85rem;
  background: linear-gradient(90deg, var(--water), rgba(46, 198, 203, 0));
}
.service-panel-title { font-size: 1.2rem; color: var(--text); margin-bottom: 0.5rem; }
.service-panel-copy { color: var(--text-dim); font-size: 0.94rem; }

/* Affordance for opening the full 16:9 image. Shown wherever the panel is
   already open, so the click target reads before it is tried. */
.service-panel-zoom {
  position: absolute; z-index: 2; top: 1rem; right: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  color: var(--text);
  background: rgba(8, 24, 34, 0.5);
  border: 1px solid rgba(238, 244, 245, 0.22);
  backdrop-filter: blur(6px);
  transition: opacity 0.4s var(--ease), background 0.3s var(--ease),
              border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.service-panel:hover .service-panel-zoom,
.service-panel:has(.service-panel-trigger:focus-visible) .service-panel-zoom {
  background: rgba(46, 198, 203, 0.9); border-color: var(--water); color: #062028;
}

/* Full-panel hit area. */
.service-panel-trigger {
  position: absolute; z-index: 3; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  cursor: zoom-in;
}
.service-panel-trigger:focus-visible { outline: 2px solid var(--water); outline-offset: -5px; }

/* ---- Band: one full-height row, active panel expands ------------------ */
@media (min-width: 1080px) {
  .services-band {
    gap: 10px;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
    scroll-snap-type: none;
    height: clamp(460px, 64vh, 620px);
  }

  /* Two-class selector so this beats .reveal-child's transition shorthand,
     which is declared later in the file. Opacity and transform are repeated
     here so the reveal-in still eases. */
  .services-band .service-panel {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    aspect-ratio: auto;
    scroll-snap-align: none;
    transition: flex-grow 0.7s var(--ease),
                border-color 0.5s var(--ease),
                opacity 0.8s var(--ease),
                transform 0.8s var(--ease);
  }
  .services-band .service-panel.is-active {
    flex-grow: 3.2;
    border-color: rgba(203, 168, 119, 0.42);
  }
  .service-panel.is-active .service-panel-media img { transform: scale(1.04); }
  /* Collapsed panels recede so the active one leads and the vertical titles
     stay legible over pale images like the design rendering. */
  .service-panel:not(.is-active) .service-panel-media img { filter: brightness(0.58) saturate(0.85); }

  /* Only the open panel offers the image. A collapsed panel expands first,
     so its cursor and affordance say so. */
  .service-panel:not(.is-active) .service-panel-zoom { opacity: 0; }
  .service-panel:not(.is-active) .service-panel-trigger { cursor: pointer; }

  .service-panel-body {
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.35rem;
  }

  /* Collapsed: numeral plus a vertical title running up the image. */
  .service-panel:not(.is-active) .service-panel-body { align-items: center; }
  .service-panel:not(.is-active) .service-panel-rule { display: none; }
  .service-panel:not(.is-active) .service-panel-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
    letter-spacing: 0.26em;
    font-size: 0.8rem;
    font-weight: 500;
    white-space: nowrap;
    margin-bottom: 0;
  }

  /* Active: title turns horizontal, aqua rule and copy fade up. */
  .service-panel.is-active .service-panel-title {
    font-size: clamp(1.3rem, 1.9vw, 1.55rem);
    letter-spacing: -0.005em;
    margin-bottom: 0.6rem;
  }
  .service-panel-rule {
    opacity: 0;
    transition: opacity 0.4s var(--ease);
  }
  .service-panel.is-active .service-panel-rule { opacity: 1; transition-delay: 0.25s; }

  /* Collapsed copy is a real closed disclosure: hidden from assistive tech
     to match the trigger's aria-expanded="false". */
  .service-panel-copy {
    max-width: 42ch;
    opacity: 0; visibility: hidden; max-height: 0;
    overflow: hidden; transform: translateY(8px);
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
                max-height 0.4s var(--ease), visibility 0s linear 0.3s;
  }
  .service-panel.is-active .service-panel-copy {
    opacity: 1; visibility: visible; max-height: 14rem; transform: none;
    transition: opacity 0.5s var(--ease) 0.22s, transform 0.5s var(--ease) 0.22s,
                max-height 0.5s var(--ease), visibility 0s linear 0s;
  }
}

/* Reduced motion: the band still works, it just swaps instantly. */
@media (prefers-reduced-motion: reduce) {
  .services-band .service-panel,
  .service-panel-media img,
  .service-panel-rule,
  .service-panel-zoom,
  .service-panel-copy,
  .service-panel.is-active .service-panel-copy { transition: none !important; }
  .service-panel.is-active .service-panel-media img { transform: none; }
  .services-band { scroll-behavior: auto; }
}

/* ====================================================================== *
   THE STONEWATER EXPERIENCE (editorial split)
   ====================================================================== */
.experience { background: linear-gradient(180deg, var(--bg-3), var(--bg)); }
.experience-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
.experience-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
.experience-media::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 80px -20px rgba(46,198,203,0.35);
  pointer-events: none;
}
.experience-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.experience-lead { margin-top: 1.4rem; color: var(--text-dim); font-size: clamp(1rem, 1.6vw, 1.12rem); max-width: 56ch; }
.experience-points {
  margin-top: 2rem; display: grid; gap: 1.4rem 2rem; grid-template-columns: 1fr 1fr;
}
.experience-point h4 {
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 0.45rem; font-weight: 500;
}
.experience-point p { color: var(--text-dim); font-size: 0.95rem; }
@media (max-width: 559px) { .experience-points { grid-template-columns: 1fr; } }

/* ====================================================================== *
   WHY STONEWATER (over background image)
   ====================================================================== */
.why { position: relative; background-size: cover; background-position: center; isolation: isolate; }
.why-overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,28,40,0.86), rgba(10,28,40,0.93)),
              radial-gradient(80% 60% at 70% 30%, rgba(46,198,203,0.16), transparent 70%);
}
.why-grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
.why-card {
  text-align: center;
  padding: 1.8rem 1.25rem; border-radius: var(--radius);
  background: rgba(20, 50, 69, 0.55); border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}
.why-card:hover { transform: translateY(-4px); border-color: rgba(46,198,203,0.45); }
.why-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text); }
.why-card h3::before {
  content: ""; display: block; width: 40px; height: 2px; margin: 0 auto 0.9rem;
  background: linear-gradient(90deg, transparent, var(--water), transparent);
}
.why-card p { color: var(--text-dim); font-size: 0.97rem; }

/* ====================================================================== *
   PROCESS
   ====================================================================== */
/* Its own deep-water surface (distinct from the gallery below), with a
   caustic light net in the top-right corner and a low aqua glow bottom-left. */
.process {
  background:
    radial-gradient(60% 55% at 0% 100%, rgba(46,198,203,0.10), transparent 70%),
    linear-gradient(180deg, #0B2230 0%, #0E2B3B 100%);
  overflow: clip;
  isolation: isolate;
}
.process::after {
  /* waterline at the bottom edge: a hairline that glows gold at the centre */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(203,168,119,0.55) 50%, transparent);
}
.process-caustics {
  position: absolute; top: 0; right: 0; z-index: -1;
  width: min(560px, 70vw); height: auto;
  color: var(--water); opacity: 0.16;
  -webkit-mask: radial-gradient(ellipse 90% 90% at 100% 0%, #000 20%, transparent 75%);
          mask: radial-gradient(ellipse 90% 90% at 100% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
.process-steps { display: grid; gap: clamp(1.1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
.process-step {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2.4rem 1.6rem 1.9rem;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(24, 58, 79, 0.62) 0%, rgba(12, 34, 48, 0.55) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 30px 60px -36px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* gradient hairline border: aqua at the top-left, travertine at the bottom-right */
.process-step::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 1;
  background: linear-gradient(145deg, rgba(46,198,203,0.55), rgba(157,177,184,0.12) 45%, rgba(203,168,119,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0.7; transition: opacity 0.5s var(--ease);
}
/* caustic light playing across the top of each card */
.process-caustic {
  position: absolute; inset: 0 0 auto 0; height: 58%; z-index: -1;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(46,198,203,0.16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120' viewBox='0 0 180 120'%3E%3Cg fill='none' stroke='%234fd8dc' stroke-opacity='.22' stroke-width='1'%3E%3Cpath d='M0 20c20 10 40-6 62 6s34 22 58 12 40-14 60-4'/%3E%3Cpath d='M0 58c24-8 40 14 64 8s36-24 60-16 38 18 56 10'/%3E%3Cpath d='M0 96c18 8 44-8 66 2s32 18 58 10 38-16 56-8'/%3E%3Cpath d='M30 0c-8 22 12 38 2 60s-10 40 4 60'/%3E%3Cpath d='M96 0c10 20-8 40 4 62s8 38-2 58'/%3E%3Cpath d='M150 0c-8 24 10 40 0 62s-6 38 6 58'/%3E%3C/g%3E%3C/svg%3E") center top / 180px 120px;
  -webkit-mask: linear-gradient(180deg, #000, transparent);
          mask: linear-gradient(180deg, #000, transparent);
  opacity: 0.9;
}
.process-step:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(0,0,0,0.9), 0 0 40px -18px rgba(46,198,203,0.45), inset 0 1px 0 rgba(255,255,255,0.08); }
.process-step:hover::before { opacity: 1; }

/* icon inside concentric ripple rings */
.process-ripple {
  position: relative; width: 112px; height: 112px; margin-bottom: 1.3rem;
  display: grid; place-items: center;
}
.process-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(46,198,203,0.18);
  transition: transform 0.9s var(--ease), border-color 0.9s var(--ease);
}
.process-ring--2 { inset: 16px; border-color: rgba(46,198,203,0.32); }
.process-ic {
  position: relative; width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--water-2);
  background: radial-gradient(circle at 50% 30%, rgba(46,198,203,0.28), rgba(10,28,40,0.9) 72%);
  border: 1px solid rgba(46,198,203,0.5);
  box-shadow: 0 0 26px -6px rgba(46,198,203,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}
.process-ic svg { width: 30px; height: 30px; }
.process-step:hover .process-ring { transform: scale(1.08); border-color: rgba(46,198,203,0.3); }
.process-step:hover .process-ring--2 { transform: scale(1.12); }

.process-num {
  font-family: var(--font-display); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 0.55rem;
}
.process-step h3 { font-size: 1.5rem; font-weight: 400; margin-bottom: 0.6rem; color: var(--text); letter-spacing: 0.01em; }
.process-step p { color: var(--text-dim); font-size: 0.97rem; }
.process-wave { width: 64px; height: 10px; margin-top: auto; padding-top: 0; }
.process-step p + .process-wave { margin-top: 1.5rem; }
.process-wave path { stroke: var(--stone); stroke-width: 1.2; stroke-linecap: round; opacity: 0.75; }
@media (prefers-reduced-motion: reduce) {
  .process-step, .process-ring { transition: none; }
  .process-step:hover { transform: none; }
  .process-step:hover .process-ring, .process-step:hover .process-ring--2 { transform: none; }
}

/* ====================================================================== *
   GALLERY (showpiece)
   ====================================================================== */
.gallery { background: linear-gradient(180deg, var(--bg-3), var(--bg)); }
.gallery-grid {
  display: grid; gap: clamp(0.8rem, 1.8vw, 1.2rem);
  grid-template-columns: 1fr;
  grid-auto-flow: dense;
}
.gallery-item {
  position: relative; overflow: hidden; border-radius: var(--radius-sm);
  aspect-ratio: 4 / 3;
  /* Round 2: the tile is a <button>; strip its UA padding and border so the
     photo fills the card edge to edge (the hairline now lives on the overlay). */
  display: block; padding: 0; margin: 0; border: 0; background: var(--bg-3);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.gallery-item img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.gallery-item-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(12,34,48,0.4) 100%);
  box-shadow: inset 0 0 0 1px rgba(157,177,184,0.10), inset 0 0 0 0 rgba(46,198,203,0);
  transition: box-shadow 0.45s var(--ease), background 0.45s var(--ease);
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover .gallery-item-glow { box-shadow: inset 0 0 0 1px rgba(46,198,203,0.35), inset 0 0 60px -10px rgba(46,198,203,0.55); }

/* ====================================================================== *
   TESTIMONIALS
   ====================================================================== */
/* Round 2: glass review cards over a soft twilight wash (aqua pool glow at the
   top-left, warm travertine light at the bottom-right) so the glass has depth. */
.testimonials {
  background:
    radial-gradient(760px 420px at 12% 18%, rgba(46,198,203,0.10), transparent 62%),
    radial-gradient(680px 380px at 88% 92%, rgba(203,168,119,0.08), transparent 62%),
    var(--bg);
  overflow: clip;
}
.testimonials-grid { display: grid; gap: clamp(1.1rem, 2.4vw, 1.6rem); grid-template-columns: 1fr; }
.testimonial {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%;
  padding: 2.2rem clamp(1.4rem, 2.4vw, 2rem) 1.8rem;
  border-radius: 20px;
  background: linear-gradient(165deg, rgba(28,66,88,0.62) 0%, rgba(12,34,48,0.55) 100%);
  backdrop-filter: blur(10px) saturate(1.15); -webkit-backdrop-filter: blur(10px) saturate(1.15);
  border: 1px solid rgba(238,244,245,0.10);
  box-shadow: 0 34px 64px -40px rgba(0,0,0,0.95), 0 0 50px -30px rgba(46,198,203,0.35), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
/* aqua caustic glow along the top edge */
.testimonial::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(79,216,220,0.55), transparent);
}
/* oversized quote glyph sitting behind the copy */
.testimonial::before {
  content: ""; position: absolute; top: 1.1rem; left: 1.2rem; pointer-events: none;
  width: clamp(40px, 4.2vw, 56px); aspect-ratio: 62 / 50; height: auto;
  background: var(--water); opacity: 0.16;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 50'%3E%3Cpath d='M0 50V30C0 14 8 4 24 0l3 6C17 10 13 16 13 24h11v26Zm35 0V30c0-16 8-26 24-30l3 6c-10 4-14 10-14 18h11v26Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 50'%3E%3Cpath d='M0 50V30C0 14 8 4 24 0l3 6C17 10 13 16 13 24h11v26Zm35 0V30c0-16 8-26 24-30l3 6c-10 4-14 10-14 18h11v26Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.testimonial:hover { transform: translateY(-4px); border-color: rgba(46,198,203,0.28); box-shadow: 0 40px 70px -40px rgba(0,0,0,0.95), 0 0 60px -26px rgba(46,198,203,0.5), inset 0 1px 0 rgba(255,255,255,0.08); }
.testimonial-top { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.testimonial-stars { display: inline-flex; gap: 3px; color: var(--stone); }
.testimonial-stars svg { width: 16px; height: 16px; fill: currentColor; }
.testimonial-job {
  font-family: var(--font-display); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--water-2);
}
.testimonial-quote { position: relative; color: var(--text); font-size: 1.02rem; line-height: 1.7; text-wrap: pretty; margin-bottom: 1.5rem; }
.testimonial-meta {
  position: relative; margin-top: auto; width: 100%;
  padding-top: 1.2rem; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: center; gap: 0.8rem; text-align: left;
}
.testimonial-avatar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.06em; color: var(--text);
  background: radial-gradient(circle at 30% 25%, rgba(79,216,220,0.35), rgba(20,50,69,0.9) 70%);
  border: 1px solid rgba(203,168,119,0.45);
  box-shadow: 0 0 18px -6px rgba(46,198,203,0.5);
}
.testimonial-name { display: block; font-family: var(--font-display); font-weight: 500; color: var(--stone-2); line-height: 1.3; }
.testimonial-loc { display: block; font-size: 0.85rem; color: var(--text-dim); line-height: 1.35; }
@media (prefers-reduced-motion: reduce) { .testimonial, .testimonial:hover { transition: none; transform: none; } }

/* ====================================================================== *
   CONTACT
   ====================================================================== */
/* Full-bleed closing band. The image sits behind the whole section for depth;
   the overlay stays opaque at the very top and bottom so the band still reads
   continuous with the testimonials above and the footer below. A background
   image does not affect layout, so the section height is unchanged. */
.contact {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.contact-overlay {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg,
      var(--bg) 0%,
      rgba(12, 34, 48, 0.91) 16%,
      rgba(10, 28, 40, 0.80) 52%,
      rgba(10, 28, 40, 0.91) 86%,
      var(--bg-3) 100%),
    radial-gradient(72% 62% at 24% 42%, rgba(46, 198, 203, 0.13), transparent 70%);
}
.contact-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }

.contact-details { margin-top: 2rem; display: grid; gap: 1rem; }
.contact-details li { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: 1rem; }
/* Grid tracks default to min-width:auto, so a long unbreakable value (the
   email) would force the row wider than the container and drag the whole
   section head with it. Let the value column shrink and wrap instead. */
.contact-details li > :last-child { min-width: 0; overflow-wrap: anywhere; }
.cd-label { font-family: var(--font-display); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.contact-details a:hover { color: var(--water-2); }

/* Glass card over the twilight photo. */
.contact-form {
  background: linear-gradient(160deg, rgba(24, 58, 79, 0.55), rgba(10, 28, 40, 0.45));
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15);
  border: 1px solid rgba(238, 244, 245, 0.14);
  border-radius: 20px; padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.08);
}
.contact .section-title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.form-row { margin-top: 1.1rem; }
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field--full { width: 100%; }
.field label { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--text-dim); }
.req { color: var(--water); }
.field input, .field select, .field textarea {
  background: rgba(10, 28, 40, 0.55); border: 1px solid rgba(157, 177, 184, 0.22);
  border-radius: var(--radius-sm); padding: 0.85rem 1rem;
  color: var(--text); transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(157,177,184,0.55); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--water); box-shadow: 0 0 0 3px rgba(46,198,203,0.18);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--stone) 50%),
  linear-gradient(135deg, var(--stone) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.contact-form .btn { margin-top: 1.5rem; }
.form-note { margin-top: 1.1rem; font-size: 0.9rem; color: var(--text-dim); min-height: 1.2em; }
.form-note.is-success { color: var(--water-2); }

/* ====================================================================== *
   FOOTER
   ====================================================================== */
.site-footer { background: var(--bg-3); border-top: 1px solid var(--line-soft); }
.footer-inner {
  display: grid; gap: 1.75rem; grid-template-columns: 1fr; align-items: center;
  padding-block: clamp(2.25rem, 4vw, 3rem);
}
.footer-brand-lockup { display: inline-flex; align-items: center; gap: 0.65rem; margin-bottom: 0.8rem; }
.brand-mark--footer { width: 38px; height: 38px; box-shadow: 0 0 22px -8px rgba(46, 198, 203, 0.4); }
.brand-name--footer { font-size: 1.5rem; display: inline-block; }
.footer-blurb { color: var(--text-dim); max-width: 48ch; font-size: 0.94rem; text-wrap: balance; }
.footer-nap { display: grid; gap: 0.35rem; color: var(--text-dim); font-size: 0.92rem; }
.footer-nap a:hover { color: var(--water-2); }
.footer-contact-heading { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 1rem; font-family: var(--font-display); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0.6rem 1.3rem; }
.footer-nav a { color: var(--text-dim); font-family: var(--font-display); transition: color 0.2s var(--ease); }
.footer-nav a:hover { color: var(--text); }
.footer-bottom { border-top: 1px solid var(--line-soft); }
.footer-bottom .container { padding-block: 1.1rem; }
/* Bottom row (round 2, shared structure across concept builds): fictional-company
   line on the left, "Built by Summit Oak AI" + recolored mark on the right.
   Phones: stacked, left line first, both centered. */
.footer-bottom-row { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.footer-disclaimer { margin: 0; color: var(--text-dim); font-size: 0.82rem; font-family: var(--font-display); letter-spacing: 0.04em; line-height: 1.4; }
@media (max-width: 719px) { .footer-disclaimer { font-size: clamp(.68rem, 2.95vw, .8rem); letter-spacing: 0; text-wrap: balance; } }
@media (min-width: 720px) {
  .footer-bottom-row { flex-direction: row; justify-content: space-between; text-align: left; gap: 1.5rem; }
  .footer-disclaimer { white-space: nowrap; }
}
.footer-credit { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text-dim); font-size: 0.82rem; font-family: var(--font-display); letter-spacing: 0.04em; white-space: nowrap; transition: color 0.2s var(--ease); }
.footer-credit:hover { color: var(--stone-2); }
.footer-credit .soak-mark { display: inline-block; width: 20px; height: 20px; flex: none; background-color: var(--water); -webkit-mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat; mask: url(../assets/images/summitoak-mark.png) center / contain no-repeat; opacity: 0.9; transition: opacity 0.2s ease; }
.footer-credit:hover .soak-mark { opacity: 1; }
.footer-credit:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; border-radius: 4px; }

/* ====================================================================== *
   LIGHTBOX
   ====================================================================== */
/* Keep the [hidden] attribute authoritative: without this the base display:flex
   overrides it and the invisible overlay swallows every click and keystroke. */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 16, 23, 0.92); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.25s var(--ease); padding: 1.5rem;
}
.lightbox.is-open { opacity: 1; }
.lightbox-figure { max-width: min(1100px, 92vw); max-height: 86vh; text-align: center; }
.lightbox-img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
}
.lightbox-caption { margin-top: 1rem; color: var(--text-dim); font-size: 0.9rem; }
.lightbox-close, .lightbox-nav {
  position: absolute; display: flex; align-items: center; justify-content: center;
  color: var(--text); background: rgba(20,50,69,0.6); border: 1px solid var(--line);
  border-radius: 999px; transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lightbox-close { top: 1.2rem; right: 1.2rem; width: 46px; height: 46px; font-size: 1.7rem; line-height: 1; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2rem; line-height: 1; }
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--water); color: #062028; border-color: var(--water); }

/* ====================================================================== *
   REVEAL ANIMATIONS
   ====================================================================== */
[data-reveal], .reveal-child {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-reveal].is-visible, .reveal-child.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .reveal-child { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ====================================================================== *
   RESPONSIVE
   ====================================================================== */
@media (min-width: 600px) {
  /* Tablet: 2-up. First tile spans full width so 9 tiles leave no stray row. */
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item:nth-child(1) { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
  .why-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1200px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: clamp(2rem, 4vw, 3.5rem); }
  .footer-nav ul { display: grid; grid-template-columns: repeat(3, auto); gap: 0.6rem 1.6rem; }
}

@media (min-width: 880px) {
  .experience-inner { grid-template-columns: 0.9fr 1.1fr; }
  .contact-inner { grid-template-columns: 1fr 1.15fr; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field:nth-child(3) { grid-column: 1 / -1; }
  /* Testimonials side by side as horizontal cards */
  .testimonials-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

@media (min-width: 1000px) {
}
@media (min-width: 1200px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); }

  /* Gallery showpiece: 9 tiles, alternating big + two small blocks.
     A 16:9 tile spanning 2 columns is naturally about twice the height of a
     16:9 tile spanning 1 column, so the two small tiles stack to match the big
     one with no orphan rows. */
  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
  .gallery-item { aspect-ratio: 16 / 9; }
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(6),
  .gallery-item:nth-child(7) { aspect-ratio: auto; height: 100%; }

  /* Block 1: big left */
  .gallery-item:nth-child(1) { grid-column: 1 / 3; grid-row: 1 / 3; }
  .gallery-item:nth-child(2) { grid-column: 3; grid-row: 1; }
  .gallery-item:nth-child(3) { grid-column: 3; grid-row: 2; }
  /* Block 2: big right */
  .gallery-item:nth-child(4) { grid-column: 1; grid-row: 3; }
  .gallery-item:nth-child(5) { grid-column: 1; grid-row: 4; }
  .gallery-item:nth-child(6) { grid-column: 2 / 4; grid-row: 3 / 5; }
  /* Block 3: big left */
  .gallery-item:nth-child(7) { grid-column: 1 / 3; grid-row: 5 / 7; }
  .gallery-item:nth-child(8) { grid-column: 3; grid-row: 5; }
  .gallery-item:nth-child(9) { grid-column: 3; grid-row: 6; }
}

/* Mobile nav switch */
@media (max-width: 860px) {
  .site-nav, .header-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (min-width: 861px) {
  .mobile-nav { display: none; }
}

/* Larger hero breathing room on tall screens */
@media (min-width: 1100px) {
  .hero-content { padding-bottom: clamp(6rem, 14vh, 11rem); }
}


/* Brand-colored magnifier cursor on click-to-zoom photos (replaces removed on-card badges). */
.service-panel-trigger { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='13' cy='13' r='8' stroke='%23ffffff' stroke-width='4'/%3E%3Cline x1='19' y1='19' x2='29' y2='29' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='13' cy='13' r='8' stroke='%232EC6CB' stroke-width='2.4'/%3E%3Cline x1='19' y1='19' x2='29' y2='29' stroke='%232EC6CB' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") 13 13, zoom-in !important; }



/* How It Works: 2-up on tablets, 4-up on desktop */
@media (min-width: 640px) { .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }