/* ─────────────────────────────────────────
   HERO TEXT CONTROLS
   ───────────────────────────────────────── */
:root {
  --text-top:      19%;     /* distance from top of hero — increase to push down   */
  --text-left:     13%;     /* distance from left edge   — increase to push right  */
  --line1-size:    clamp(2.5rem, min(8.9vw + 1.78rem, 6.7vw + 2.96rem), 11rem);   /* "Every Shot" font size */
  --line2-size:    clamp(2.5rem, min(8.9vw + 1.78rem, 6.7vw + 2.96rem), 11rem);   /* "Sells." font size     */
  --sells-indent:  10%;     /* how far right "Sells." is offset from "Every Shot"  */
  --glow:          0;       /* glow: 1 = on, 0 = off                               */
}
/* ───────────────────────────────────────── */

/* ─── Camera Iris Loader ─────────────────────────────────────────────── */
body.loader-active {
  overflow: hidden;
}

#iris-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s ease;
  overflow: hidden;
}

#iris-loader > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Portrait / mobile — rotate the 16:9 image to fill a tall viewport */
@media (orientation: portrait) {
  #iris-loader > img {
    width: 100vh;
    height: 100vw;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* Logo + dots overlay */
#iris-loader-ui {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  pointer-events: none;
}

#iris-loader-logo {
  width: clamp(120px, 10.5vw, 165px);
  display: block;
}

#iris-loader-dots {
  display: flex;
  align-items: center;
  gap: 9px;
}

#iris-loader-dots span {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1a1a1a;
  opacity: 0.15;
  animation: iris-dot 1.4s ease-in-out infinite;
}

#iris-loader-dots span:nth-child(2) { animation-delay: 0.22s; }
#iris-loader-dots span:nth-child(3) { animation-delay: 0.44s; }

@keyframes iris-dot {
  0%, 100% { opacity: 0.15; transform: translateY(0);    }
  40%       { opacity: 0.75; transform: translateY(-5px); }
}
/* ──────────────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
}

body {
  font-family: sans-serif;
  background: #fff;
}

/* Navbar */
.navbar {
  position: fixed;
  top: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 1200px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem 1rem 2rem;
  border-radius: 100px;
  /* No backdrop-filter here — it would create an isolated compositing group
     that prevents child elements (the mobile dropdown) from blurring against
     the real page content. The glass effect lives on ::before instead. */
  background: transparent;
  z-index: 100;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar--hidden {
  transform: translateX(-50%) translateY(calc(-100% - 2rem));
}

/* Liquid glass effect via SVG displacement map refraction + layered box-shadow */
.navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.05);
  /* Chrome/Edge: SVG displacement map adds realistic light refraction on the backdrop.
     Safari: falls back to blur only — still looks great. */
  backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  /* Realistic glass highlight + shadow stack */
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.12),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.20),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.20),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.10),
    0px 1px 5px 0px rgba(0, 0, 0, 0.10),
    0px 6px 16px 0px rgba(0, 0, 0, 0.08);
  transition: background-color 400ms cubic-bezier(1, 0.0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0.0, 0.4, 1);
  z-index: -1;
  pointer-events: none;
}

.navbar__logo {
  position: relative;
}

.navbar__logo img {
  height: 2.75rem;
  width: auto;
  display: block;
  transition: opacity 0.6s ease;
}

.logo--light {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.navbar__links {
  list-style: none;
  display: flex;
  gap: 3rem;
}

.navbar__links a {
  position: relative;
  text-decoration: none;
  color: #0f0f0f;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.6s ease;
}

.navbar__links a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #0f0f0f;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.6s ease;
}

.navbar__links a:hover {
  opacity: 1;
}

.navbar__links a:hover::after {
  transform: scaleX(1);
}

.navbar__signin {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 100px;
  color: #0f0f0f;
  border: 1px solid rgba(15, 15, 15, 0.2);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.2s ease, color 0.25s ease, border-color 0.25s ease;
}

.navbar__signin::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #0f0f0f;
  border-radius: inherit;
  transform: translateY(105%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar__signin svg {
  position: relative;
  z-index: 1;
}

.navbar__signin:hover {
  opacity: 1;
  color: #fff;
  border-color: #0f0f0f;
}

.navbar__signin:hover::before {
  transform: translateY(0);
}

/* ─── Navbar dark-background variant ─── */
.navbar--on-dark::before {
  background: rgba(0, 0, 0, 0.12);
}

.navbar--on-dark .logo--dark  { opacity: 0; }
.navbar--on-dark .logo--light { opacity: 1; }

.navbar--on-dark .navbar__links a {
  color: #fff;
}

.navbar--on-dark .navbar__links a::after {
  background: #fff;
}

.navbar--on-dark .navbar__signin {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.navbar--on-dark .navbar__signin::before {
  background: #fff;
}

.navbar--on-dark .navbar__signin:hover {
  color: #0f0f0f;
}

/* ─── Hero layers (now live inside scroll-video__sticky) ─── */

/* Fallback image: visible while canvas frames are loading */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  z-index: 0;
}

/* Canvas: hidden until ready, then fades in over the fallback */
.scroll-video__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.scroll-video__canvas.ready {
  opacity: 1;
}

/* Hero text — above canvas (z:1) */
.hero__text {
  position: absolute;
  top: var(--text-top);
  left: var(--text-left);
  z-index: 2;
  pointer-events: none;
}

.hero__text h1 {
  line-height: 1;
  color: #2e2c2c;
  text-shadow:
    0 0 12px rgba(255, 255, 255, calc(0.85 * var(--glow))),
    0 0 30px rgba(255, 255, 255, calc(0.45 * var(--glow))),
    0 0 60px rgba(255, 255, 255, calc(0.2  * var(--glow)));
}

/* "Every Shot Crafted" — Cormorant SemiBold Italic */
.hero__line1 {
  display: block;
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--line1-size);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* "Sells." — Playfair Display Bold Italic: heavier contrast against line 1 */
.hero__line2 {
  display: block;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  font-size: var(--line2-size);
  letter-spacing: -0.02em;
  margin-left: var(--sells-indent);
  white-space: nowrap;
}

/* ─── Scroll-scrub video ─── */

/* Tall section: 200vh hero + 167vh expand + 100vh services reveal + 100vh viewport = 567vh */
.scroll-video {
  position: relative;
  height: 567vh;
}

.scroll-video__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  z-index: 1;
}

/* ─── Intro (services) overlay ───
   Absolutely positioned inside scroll-video__sticky so it overlays
   the canvas exactly. Fades in/out via JS as video nears its white end. */
.services {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #fff;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.services.visible {
  opacity: 1;
  pointer-events: auto;
}

/* ─── Intro layout ─── */
.intro {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 3rem;
}

/* ── Video column ── */
.intro__video-col {
  flex: 0 0 54%;
  min-width: 0;
}

.intro__video-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  will-change: filter;
}

.intro__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: url(#video-frame-clip);
}

/* SVG border overlay: same polygon shape, drawn as a stroke */
.intro__video-border {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.25;
}

/* ── Text column ── */
.intro__text-col {
  flex: 1;
  min-width: 0;
}

.intro__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 1.5rem;
}

.intro__heading {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2rem, 2.8vw, 3.2rem);
  line-height: 1.1;
  color: #2e2c2c;
  margin-bottom: 2rem;
}

.intro__body {
  font-size: 0.975rem;
  line-height: 1.8;
  color: #2e2c2c;
  opacity: 0.58;
  margin-bottom: 1.1rem;
}

.intro__body:last-of-type {
  margin-bottom: 2.25rem;
}

.intro__meta {
  display: flex;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(46, 44, 44, 0.12);
}

.intro__meta span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.35;
}

.intro__actions {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-top: 2.25rem;
}

.intro__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2e2c2c;
  position: relative;
  padding-bottom: 3px;
}

/* Underline track */
.intro__cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #2e2c2c;
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Primary: underline always visible, collapses right on hover then re-enters from left */
.intro__cta--primary::after {
  transform: scaleX(1);
}

.intro__cta--primary:hover::after {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.2s cubic-bezier(0.7, 0, 1, 1);
}

/* Secondary: underline hidden, slides in from left on hover */
.intro__cta--secondary::after {
  transform: scaleX(0);
  opacity: 0.35;
}

.intro__cta--secondary:hover::after {
  transform: scaleX(1);
}

.intro__cta svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}

.intro__cta--primary:hover svg {
  transform: translateX(4px);
}

/* ─── Services reveal overlay ─── */
.services-reveal {
  position: fixed;
  inset: 0;
  z-index: 98;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: stretch;
  transition: opacity 0.85s ease;
}

.services-reveal__pillars {
  display: flex;
  width: 100%;
  padding-top: 10vh; /* push pillar content below the section title */
}

/* ── Pillar ── */
.pillar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  cursor: default;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  transition: flex 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.pillar:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.pillar:hover {
  flex: 2.5;
  cursor: default;
}

.pillar__icon {
  color: #fff;
  opacity: 0.6;
  margin-bottom: 2rem;
  flex-shrink: 0;
}

.pillar__name {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1.7rem, 2.72vw, 2.635rem);
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Smooth height reveal using CSS grid trick */
.pillar__detail-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              margin-top 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  margin-top: 0;
}

.pillar:hover .pillar__detail-wrap {
  grid-template-rows: 1fr;
  margin-top: 1.5rem;
}

.pillar__detail {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease 0.2s;
  text-align: center;
}

.pillar:hover .pillar__detail {
  opacity: 1;
}

.pillar__detail p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: #fff;
  opacity: 0.65;
  width: calc(100% - 1.5rem); /* fills expanded pillar with slight inset margin */
  margin: 0 auto;
}

/* ── Section title — overlays all pillars, unaffected by hover ── */
.services-reveal__title {
  position: absolute;
  top: 22vh;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

.services-reveal__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0.4;
  margin-bottom: 0.75rem;
}

.services-reveal__heading-link {
  text-decoration: none;
  display: inline-block;
  position: relative;
  pointer-events: auto;
}

.services-reveal__heading-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-reveal__heading-link:hover::after {
  transform: scaleX(1);
}

.services-reveal__heading {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.2rem, 3.5vw, 3.8rem);
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease;
}

.services-reveal__heading-link:hover .services-reveal__heading {
  opacity: 0.85;
}

/* ─── Pillar CTA — liquid glass button ─── */
.pillar__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding: 0.55rem 1.1rem;
  border-radius: 100px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Hidden by default — fades in when pillar expands */
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  /* Ensure text stays above the ::before glass lens */
  isolation: isolate;
}

/* Glass lens — same technique as the navbar ::before */
.pillar__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.12),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.20),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.20),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.10),
    0px 1px 5px 0px rgba(0, 0, 0, 0.10),
    0px 6px 16px 0px rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: -1;
  pointer-events: none;
}

.pillar__cta:hover::before {
  background: rgba(255, 255, 255, 0.10);
}

.pillar__cta-text {
  position: relative;
  z-index: 1;
}

.pillar__cta svg {
  position: relative;
  z-index: 1;
  opacity: 0.75;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar__cta:hover svg {
  transform: translateX(3px);
}

/* Reveal when pillar is hovered/expanded — delay matches the text reveal */
.pillar:hover .pillar__cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

/* ─── Hero text: wrap state (JS adds .text-wrapped when line1 clips viewport) ─── */
.hero__text.text-wrapped .hero__crafted {
  display: none;
}

.hero__text.text-wrapped .hero__line2 {
  margin-left: 0;
}

.hero__text.text-wrapped .hero__line2::before {
  content: 'Crafted ';
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
}

/* ─── Intro section: stack at ≤ 1020px ─── */
@media (max-width: 1020px) {
  .services {
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden; /* suppress horizontal scrollbar — overflow-y:auto forces overflow-x:auto */
  }

  .intro {
    flex-direction: column;
    gap: 2rem;
    padding: 5rem 1.5rem 4rem;
  }

  .intro__video-col {
    flex: none;
    width: 100%;
  }

  .intro__meta {
    display: none;
  }
}

/* ─── Hero text: center below 1000px ─── */
@media (max-width: 999px) {
  .hero__text {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Sign In item only exists in the mobile dropdown */
.navbar__signin-mobile {
  display: none;
}

/* ─── Hamburger button (hidden on desktop) ─── */
.navbar__hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: 1px solid rgba(15, 15, 15, 0.2);
  border-radius: 100px;
  cursor: pointer;
  padding: 0;
  color: #0f0f0f;
  flex-shrink: 0;
  transition: border-color 0.25s ease, color 0.25s ease;
}

.navbar__hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.navbar--on-dark .navbar__hamburger {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

/* Animate bars → X when menu is open */
.navbar--open .navbar__hamburger span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.navbar--open .navbar__hamburger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar--open .navbar__hamburger span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ─── Responsive: mobile (≤ 768px) ─── */
/* ─────────────────────────────────────────
   AREA + PROCESS SECTION
   ───────────────────────────────────────── */

.area-process {
  display: flex;
  min-height: 100vh;
  background: #fff;
  position: relative;
  justify-content: center;
  align-items: center;
  padding: 6rem 4rem;
}

/* ── Left: map ── */
.area-process__map {
  flex: 0 1 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 3rem;
}

.area-map__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0;
  transform: translateY(6px);
  margin-bottom: 0.75rem;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.area-map__eyebrow.visible {
  opacity: 0.4;
  transform: translateY(0);
}

.area-map__heading {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.55rem, 2.35vw, 2.7rem);
  line-height: 1.1;
  color: #2e2c2c;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.area-map__video {
  width: 100%;
  max-width: 520px;
  display: block;
  /* white background on video blends with page bg */
}

.area-map__counties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2rem;
}

.area-map__counties span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.5;
  padding: 0.45rem 1.05rem;
  border: 1px solid rgba(46, 44, 44, 0.16);
  border-radius: 100px;
}

/* ── Right: steps ── */
.area-process__steps {
  flex: 0 1 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 3rem;
}

.steps__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 1.25rem;
}

.steps__heading {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.55rem, 2.35vw, 2.7rem);
  line-height: 1.1;
  color: #2e2c2c;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-bottom: 3.5rem;
}

/* ── Timeline container ── */
.steps__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.steps__zigzag-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}

/* ── Individual step ── */
.step {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reversed step — node on right, card on left */
.step--right {
  flex-direction: row-reverse;
  text-align: right;
}

.step--visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 3D sphere node ── */
.step__node-col {
  flex-shrink: 0;
}

.step__node {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  background: radial-gradient(circle at 36% 30%, #f0a8e8, #c2a0f0 55%, #a888e0);
  box-shadow:
    inset 0 2px 5px  rgba(255, 255, 255, 0.35),
    inset 0 -3px 7px rgba(140, 80, 160, 0.30),
    0 10px 30px      rgba(180, 100, 200, 0.20),
    0  2px  8px      rgba(140, 80, 160, 0.12);
}

/* Specular highlight dot — top-left of sphere */
.step__node::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 14px;
  width: 11px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.36) 0%, transparent 100%);
  border-radius: 50%;
}

.step__num {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  z-index: 1;
}

/* ── Step card ── */
.step__card {
  flex: 1;
  min-width: 0;
  padding: 1.2rem 1.5rem;
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(10px) url(#liquid-glass-navbar) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.10),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.14),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.08),
    0px 1px 5px 0px rgba(0, 0, 0, 0.08),
    0px 8px 28px 0px rgba(0, 0, 0, 0.07);
}

.step__title {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.3rem, 1.85vw, 1.7rem);
  color: #2e2c2c;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 0.55rem;
}

.step__body {
  font-size: 0.91rem;
  line-height: 1.75;
  color: #2e2c2c;
  opacity: 0.52;
}

/* ── Responsive: stack columns ── */
@media (max-width: 1100px) {
  .area-process {
    flex-direction: column;
  }

  .area-process__map,
  .area-process__steps {
    flex: none;
    width: 100%;
    padding: 0;
  }

  .area-process__map {
    padding-bottom: 2rem;
    padding-right: 0;
  }

  .area-process__steps {
    padding-left: 0;
  }

  .area-map__video {
    max-width: 100%;
  }
}

/* ─────────────────────────────────────────
   SHARED BLOB ZONE — Our Work + Reviews
   ─────────────────────────────────────────
   A single wrapper holds both sections so one blob element spans the full
   height of both without being clipped at the section boundary. The blob
   uses vh for its vertical positions so the glow stays pinned to the Our
   Work viewport regardless of how tall the Reviews section grows. */

.work-reviews-zone {
  position: relative;
  /* z-index: 0 makes this a stacking context so the blob, our-work, and
     reviews all resolve their z-indexes against each other inside the zone
     rather than against unrelated page elements. */
  z-index: 0;
  /* clip-path replaces overflow: hidden — inset(0) on the three sides clips
     horizontal blur bleed just like overflow: hidden did, but -400px on the
     bottom extends the painted region so the reviews center blob can bleed
     down into the final CTA section instead of stopping at the zone boundary. */
  clip-path: inset(0 0 -400px 0);
}

.work-reviews-zone__blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: blur(80px);
  pointer-events: none;
  background:
    /* Warm gold — right edge, centred vertically inside Our Work */
    radial-gradient(ellipse 41vw 61vh at 100%  50vh, rgba(255, 200, 80,  0.42) 0%, transparent 62%),
    /* Champagne/cream — top-right, bleeds inward */
    radial-gradient(ellipse 36vw 41vh at  96%  14vh, rgba(255, 232, 175, 0.43) 0%, transparent 60%),
    /* Terracotta — bridges top and mid */
    radial-gradient(ellipse 31vw 36vh at  89%  32vh, rgba(210, 108, 65,  0.37) 0%, transparent 60%),
    /* Warm peach — mid-right */
    radial-gradient(ellipse 29vw 37vh at  93%  65vh, rgba(255, 175, 110, 0.34) 0%, transparent 58%),
    /* Deep amber — lower-right of Our Work, naturally bleeds into Reviews */
    radial-gradient(ellipse 36vw 37vh at 100%  88vh, rgba(200, 138, 48,  0.42) 0%, transparent 60%),
    /* Soft honey — inset accent */
    radial-gradient(ellipse 20vw 26vh at  83%  44vh, rgba(255, 245, 190, 0.30) 0%, transparent 56%),
    /* Rust bridge — right edge */
    radial-gradient(ellipse 17vw 27vh at 100%  35vh, rgba(225, 128, 75,  0.30) 0%, transparent 55%);
}

/* ─────────────────────────────────────────
   OUR WORK SECTION
   ───────────────────────────────────────── */

.our-work {
  position: relative;
  height: 100vh;
  background: transparent; /* zone/body white shows through; blob is in the zone */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Thin white fade at the very top so the blob doesn't bleed into the section
   above. Sits above the zone blob (z-index: 2 vs blob z-index: 0). */
.our-work::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28%;
  background: linear-gradient(to bottom, #ffffff 10%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ── Content wrapper ── */
.our-work__wrap {
  position: relative;
  z-index: 3;
  width: min(94vw, 1680px);
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Section header ── */
.our-work__header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.our-work__hd-eyebrow {
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.38;
}

.our-work__hd-title {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  color: #2e2c2c;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ── Stage: media box + sidebar side-by-side ── */
.our-work__stage {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* ── Media box — wide aspect ratio, 15% shorter than 16/9 ── */
.our-work__media {
  flex: 1;
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 7.65;
  border-radius: 16px;
  overflow: hidden;
  background: #0f0f0f;
  box-shadow:
    0 24px 72px rgba(0, 0, 0, 0.16),
    0  6px 20px rgba(0, 0, 0, 0.09);
}

/* Overlay — visible by default, hides on hover */
.our-work__hover-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.28) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.our-work__media:hover .our-work__hover-overlay {
  opacity: 0;
}

.our-work__hover-text {
  position: absolute;
  bottom: 1.6rem;
  left: 1.75rem;
  transform: translateY(0);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.our-work__media:hover .our-work__hover-text {
  transform: translateY(8px);
}

.our-work__hover-heading {
  font-family: 'Cormorant', 'Playfair Display', Georgia, serif;
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 600;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 0.3rem;
  opacity: 1;
  transition: opacity 0.35s ease 0.06s;
}

.our-work__hover-sub {
  font-family: 'Cormorant', 'Playfair Display', Georgia, serif;
  font-size: clamp(1.45rem, 1.87vw, 1.7rem);
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  opacity: 1;
  transition: opacity 0.35s ease 0.12s;
}

.our-work__media:hover .our-work__hover-heading,
.our-work__media:hover .our-work__hover-sub {
  opacity: 0;
}

/* ── Liquid glass "View Our Work" buttons ── */
.work-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.6rem 1.2rem;
  font-family: 'Cormorant', 'Playfair Display', Georgia, serif;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 100px;
  box-shadow:
    0 2px 16px rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.22s ease,
    opacity 0.35s ease,
    border-color 0.25s ease;
}

.work-view-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.48);
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

/* Media box variant — absolute bottom-right, fades in on media hover */
.work-view-btn--media {
  position: absolute;
  bottom: 1.4rem;
  right: 1.5rem;
  z-index: 11;
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity 0.35s ease 0.1s,
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
    background 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.our-work__media:hover .work-view-btn--media {
  opacity: 1;
  transform: translateY(0);
}

/* Sidebar variant — solid white pill with black border */
.work-view-btn--sidebar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: #ffffff;
  border: 1.5px solid #1a1a1a;
  border-radius: 100px;
  box-shadow: none;
  color: #1a1a1a;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.work-view-btn--sidebar:hover {
  background: #1a1a1a;
  border-color: #1a1a1a;
  box-shadow: none;
  color: #ffffff;
  transform: none;
}

/* Crossfade layers live inside the media box */
.our-work__layer {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.7s ease;
}

.our-work__layer--hidden {
  opacity: 0;
}

.our-work__layer-img,
.our-work__layer-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.our-work__layer[data-type="image"] .our-work__layer-vid { display: none; }
.our-work__layer[data-type="video"] .our-work__layer-img { display: none; }

/* ── Sidebar column — holds the sidebar card + CTA button as a flex column ── */
.our-work__sidebar-col {
  width: 240px;
  flex-shrink: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Sidebar card ── */
.our-work__sidebar {
  background: #ffffff;
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.09),
    0 2px  6px rgba(0, 0, 0, 0.05);
}

/* ── Category list ── */
.our-work__cats {
  display: flex;
  flex-direction: column;
}

.our-work__cat {
  background: none;
  border: none;
  border-top: 1px solid rgba(46, 44, 44, 0.08);
  padding: 0.9rem 0 0.85rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
}

.our-work__cat:first-child {
  border-top: none;
  padding-top: 0;
}

.our-work__cat:last-child {
  padding-bottom: 0;
}

.our-work__cat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.our-work__cat-label {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.45rem;
  color: #2e2c2c;
  line-height: 1;
  letter-spacing: -0.01em;
  opacity: 0.25;
  transition: opacity 0.35s ease;
}

.our-work__cat-counter {
  font-size: 0.63rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0;
  transition: opacity 0.35s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Active state */
.our-work__cat--active .our-work__cat-label  { opacity: 1; }
.our-work__cat--active .our-work__cat-counter { opacity: 0.45; }

/* ── Progress track ── */
.our-work__track {
  height: 1.5px;
  background: rgba(46, 44, 44, 0.10);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.our-work__cat--active .our-work__track { opacity: 1; }

.our-work__fill {
  height: 100%;
  width: 100%;
  background: #2e2c2c;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
}

@keyframes work-fill-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}


/* Duration is set as a CSS var by JS so photo (6 s) and video (8 s) differ */
.our-work__fill.animating {
  animation: work-fill-bar var(--work-fill-dur, 6s) linear forwards;
}

/* Hover nudge for inactive categories */
.our-work__cat:not(.our-work__cat--active):hover .our-work__cat-label {
  opacity: 0.5;
}

/* ── Mobile caption — text shown below the image on touch devices ── */
.our-work__media-caption {
  display: none;
}

.our-work__caption-heading {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.4rem;
  color: #2e2c2c;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}

.our-work__caption-sub {
  font-family: 'Cormorant', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.05rem;
  color: #2e2c2c;
  opacity: 0.5;
}

/* ── Responsive: stack vertically on narrower viewports ── */
@media (max-width: 900px) {
  .our-work__stage {
    flex-direction: column;
  }

  .our-work__media {
    aspect-ratio: 16 / 9;
    width: 100%;
  }

  .our-work__sidebar-col {
    width: auto;
  }

  .our-work__cats {
    flex-direction: row;
  }

  .our-work__cat {
    flex: 1;
    border-top: none;
    border-left: 1px solid rgba(46, 44, 44, 0.08);
    padding: 0.75rem 0.75rem 0.6rem;
  }

  .our-work__cat:first-child {
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 600px) {
  .our-work {
    height: auto;
    overflow: visible;
  }

  .our-work::before {
    height: 80px;
  }

  .our-work__wrap {
    padding: 2.5rem 1.25rem 3rem;
    gap: 1rem;
  }

  /* Show caption below the image */
  .our-work__media-caption {
    display: block;
    padding: 0.55rem 0 0.15rem;
  }

  /* No hover overlay on touch — caption replaces it */
  .our-work__hover-overlay {
    display: none;
  }

  /* View Our Work button: always visible (no hover state on mobile) */
  .work-view-btn--media {
    opacity: 1;
    transform: translateY(0);
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  /* Strip the white sidebar card — categories sit flush below the caption */
  .our-work__sidebar {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }

  .our-work__sidebar-col {
    gap: 0.5rem;
  }

  /* 2×2 grid — Interior + Exterior on row 1, Drone Shots + Cinematic on row 2 */
  .our-work__cats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid rgba(46, 44, 44, 0.08);
    border-radius: 10px;
    overflow: hidden;
  }

  /* Reset flex overrides from 900px breakpoint */
  .our-work__cat {
    flex: unset;
    border: none;
    border-right: 1px solid rgba(46, 44, 44, 0.08);
    border-bottom: 1px solid rgba(46, 44, 44, 0.08);
    padding: 0.65rem 0.6rem;
  }

  /* Right column: no right border (container provides the edge) */
  .our-work__cat:nth-child(2n) {
    border-right: none;
  }

  /* Bottom row: swap bottom border for top border */
  .our-work__cat:nth-child(n+3) {
    border-bottom: none;
    border-top: 1px solid rgba(46, 44, 44, 0.08);
  }

  /* Reset first-child overrides from 900px block */
  .our-work__cat:first-child {
    border-top: none;
    border-left: none;
    padding: 0.65rem 0.6rem;
  }

  .our-work__cat-label {
    font-size: 1.15rem;
  }
}

/* ─────────────────────────────────────────
   REVIEWS / TESTIMONIALS SECTION
   ───────────────────────────────────────── */

.reviews {
  position: relative;
  /* z-index: 1 creates a local stacking context so the center blob can sit at
     z-index: -1 inside it (behind content) while still rendering above the
     zone blob outside. */
  z-index: 1;
  background: transparent;
  padding: 6rem 0 7rem;
  /* Horizontal containment is handled by the zone's clip-path above.
     No overflow clipping needed here — the blob bleeds downward freely. */
}

/* Blue/pink/purple center blob — underlights the header, cards, and CTA.
   z-index: -1 within reviews' stacking context puts it behind all content
   but in front of the zone's warm-amber blob.
   top: 10% keeps the blob away from the section boundary so overflow: hidden
   never produces a hard-clipped edge visible from the section above. */
.reviews__center-blob {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: -8%;
  z-index: -1;
  filter: blur(80px);
  pointer-events: none;
  background:
    /* Periwinkle blue — heart of the blob */
    radial-gradient(ellipse 38% 42% at 50% 42%, rgba(110, 140, 255, 0.42) 0%, transparent 62%),
    /* Rose pink — left of center */
    radial-gradient(ellipse 28% 34% at 32% 60%, rgba(255,  90, 160, 0.36) 0%, transparent 60%),
    /* Soft violet — right of center */
    radial-gradient(ellipse 26% 32% at 68% 38%, rgba(180, 100, 255, 0.32) 0%, transparent 58%),
    /* Magenta accent — lower-center */
    radial-gradient(ellipse 24% 28% at 46% 70%, rgba(255,  60, 200, 0.26) 0%, transparent 56%),
    /* Sky/cyan — right accent */
    radial-gradient(ellipse 22% 26% at 66% 68%, rgba( 70, 195, 245, 0.22) 0%, transparent 54%);
}


.reviews__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 0 4rem;
  margin-bottom: 3.5rem;
}

.reviews__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
}

.reviews__heading {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem);
  color: #2e2c2c;
  letter-spacing: -0.01em;
  line-height: 1;
}

/* ── Marquee strip ── */
.reviews__strip {
  overflow: hidden;
  /* Soft fade masks on both edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.reviews__track {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: reviews-scroll 55s linear infinite;
}


@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Individual review card ── */
.review-card {
  flex-shrink: 0;
  width: 340px;
  background: #fafafa;
  border: 1px solid rgba(46, 44, 44, 0.07);
  border-radius: 16px;
  padding: 1.75rem 1.6rem 1.5rem;
  box-shadow:
    0 2px 14px rgba(46, 44, 44, 0.05),
    0 1px  3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.review-card__text {
  font-size: 0.925rem;
  line-height: 1.75;
  color: #2e2c2c;
  opacity: 0.62;
  flex: 1;
}

.review-card__name {
  font-family: 'Cormorant', serif;
  font-weight: 600;
  font-style: italic;
  font-size: 1.1rem;
  color: #2e2c2c;
  letter-spacing: -0.01em;
  opacity: 0.85;
}

/* ── Book a Shoot CTA ── */
.reviews__cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

.reviews__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 2.25rem;
  border-radius: 100px;
  text-decoration: none;
  color: #2e2c2c;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Liquid glass lens — same technique as the navbar */
.reviews__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.14),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.07),
    0px 1px 5px 0px rgba(0, 0, 0, 0.08),
    0px 8px 24px 0px rgba(0, 0, 0, 0.08);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: -1;
}

.reviews__cta:hover {
  transform: translateY(-2px);
}

.reviews__cta:hover::before {
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.14),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.07),
    0px 2px 8px 0px rgba(0, 0, 0, 0.10),
    0px 12px 32px 0px rgba(0, 0, 0, 0.10);
}

.reviews__cta svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0.7;
}

.reviews__cta:hover svg {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .reviews {
    padding: 4rem 0 5rem;
  }

  .reviews__header {
    padding: 0 1.5rem;
    margin-bottom: 2.5rem;
  }

  /* Narrower gap + faster scroll so ~3 cards are visible at once */
  .reviews__track {
    gap: 0.75rem;
    animation-duration: 35s;
  }

  .review-card {
    width: 145px;
    padding: 0.9rem 0.85rem 0.8rem;
    gap: 0.65rem;
    border-radius: 10px;
  }

  /* Clamp text to keep all cards the same height regardless of review length */
  .review-card__text {
    font-size: 0.78rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
  }

  .review-card__name {
    font-size: 0.9rem;
  }
}

/* ─────────────────────────────────────────
   FINAL CTA SECTION
   ───────────────────────────────────────── */

.final-cta {
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* overflow visible so the image can bleed past the section boundary */
  overflow: visible;
}

/* ── Centered copy block ── */
.final-cta__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8rem 2rem 3rem;
  width: 100%;
  position: relative;
  z-index: 2;
}

.final-cta__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #2e2c2c;
  opacity: 0.4;
  margin-bottom: 1.75rem;
}

.final-cta__heading {
  font-family: 'Cormorant', serif;
  font-weight: 700;
  font-style: italic;
  /* Sized to stay one line at typical desktop widths; clamp lets it
     scale down and wrap naturally on narrower screens */
  font-size: clamp(1.8rem, 3.6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #2e2c2c;
  margin-bottom: 2.25rem;
  white-space: nowrap;
}

/* ── Liquid glass CTA button ── */
.final-cta__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 2.5rem;
  border-radius: 100px;
  text-decoration: none;
  color: #2e2c2c;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.final-cta__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.65),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.14),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.07),
    0px 1px 5px 0px rgba(0, 0, 0, 0.08),
    0px 8px 32px 0px rgba(0, 0, 0, 0.09);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: -1;
}

.final-cta__btn:hover {
  transform: translateY(-2px);
}

.final-cta__btn:hover::before {
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
    inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
    inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
    inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.09),
    inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.14),
    inset 0px 3px 4px -2px rgba(0, 0, 0, 0.14),
    inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.07),
    0px 2px 10px 0px rgba(0, 0, 0, 0.10),
    0px 14px 40px 0px rgba(0, 0, 0, 0.11);
}

.final-cta__btn svg {
  opacity: 0.7;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.final-cta__btn:hover svg {
  transform: translateX(4px);
}

/* ── Image wrap — positions the image and glass footer together ── */
.final-cta__image-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  margin-top: -6rem;
  margin-bottom: -22vw; /* half-bleed into section below */
}

.final-cta__image {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Solid-white footer ── */
.site-footer {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  padding: 3rem 2.75rem 2.25rem;
  background: #fff;
  border-radius: 20px;
  z-index: 2;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
}

/* ── Top row: logo + nav ── */
.site-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.5rem;
}

.site-footer__logo img {
  height: 3.5rem;
  width: auto;
  display: block;
}

.site-footer__nav {
  display: flex;
  gap: 2.5rem;
}

.site-footer__nav a {
  text-decoration: none;
  color: #2e2c2c;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  opacity: 0.72;
  transition: opacity 0.2s ease;
  position: relative;
}

.site-footer__nav a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: #2e2c2c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-footer__nav a:hover { opacity: 1; }
.site-footer__nav a:hover::after { transform: scaleX(1); }

/* ── Bottom row: copyright + tagline ── */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(46, 44, 44, 0.10);
}

.site-footer__copy,
.site-footer__tagline {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #2e2c2c;
  opacity: 0.42;
}

@media (max-width: 900px) {
  .site-footer {
    left: 3%;
    right: 3%;
    padding: 2rem 2rem 1.75rem;
  }

  .site-footer__nav { gap: 1.5rem; }
  .site-footer__nav a { font-size: 0.95rem; }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 1.25rem 1.25rem 1rem;
    border-radius: 12px;
  }

  .site-footer__logo img {
    height: 2.5rem;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
  }

  .site-footer__nav {
    gap: 0.85rem;
  }

  .site-footer__nav a {
    font-size: 0.8rem;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding-top: 0.75rem;
  }
}

@media (max-width: 768px) {
  .final-cta__content {
    padding: 3.5rem 1.5rem 0.1rem;
  }

  .final-cta__eyebrow {
    margin-bottom: 1.25rem;
  }

  .final-cta__heading {
    white-space: normal;
    margin-bottom: 1.75rem;
  }

  /* Remove the desktop overlap — button sits cleanly above the image on mobile */
  .final-cta__image-wrap {
    margin-top: 0;
    margin-bottom: 0; /* no bleed; footer must be fully visible */
  }

  /* Fixed height crops the sides instead of shrinking the image */
  .final-cta__image {
    height: 560px;
    object-fit: cover;
    object-position: center;
  }
}

/* ─────────────────────────────────────────
   END FINAL CTA SECTION
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   END REVIEWS SECTION
   ───────────────────────────────────────── */

@media (max-width: 768px) {

  /* ── Navbar ── */
  .navbar {
    padding: 0.875rem 1.25rem;
  }

  .navbar__hamburger {
    display: flex;
  }

  .navbar__signin {
    display: none;
  }

  .navbar__signin-mobile {
    display: block;
  }

  /* Dropdown — liquid glass matching the navbar pill */
  .navbar__links {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px) url(#liquid-glass-navbar) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    border-radius: 20px;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
      inset 1.8px 3px 0px -2px rgba(255, 255, 255, 0.90),
      inset -2px -2px 0px -2px rgba(255, 255, 255, 0.80),
      inset -3px -8px 1px -6px rgba(255, 255, 255, 0.60),
      inset -0.3px -1px 4px 0px rgba(0, 0, 0, 0.12),
      inset -1.5px 2.5px 0px -2px rgba(0, 0, 0, 0.20),
      inset 0px 3px 4px -2px rgba(0, 0, 0, 0.20),
      inset 2px -6.5px 1px -4px rgba(0, 0, 0, 0.10),
      0px 1px 5px 0px rgba(0, 0, 0, 0.10),
      0px 6px 16px 0px rgba(0, 0, 0, 0.08);
    padding: 0.5rem 0;
    z-index: 200;
  }

  .navbar--open .navbar__links {
    display: flex;
  }

  .navbar__links li {
    width: 100%;
  }

  .navbar__links a {
    display: block;
    padding: 0.9rem 1.75rem;
    font-size: 1.1rem;
  }

  /* Suppress underline animation on mobile (tap, not hover) */
  .navbar__links a::after {
    display: none;
  }

  .navbar--on-dark .navbar__links {
    background: rgba(0, 0, 0, 0.10);
  }

  /* ── Mobile Sign In item ── */
  .navbar__signin-mobile {
    border-top: 1px solid rgba(15, 15, 15, 0.1);
    margin-top: 0.25rem;
    padding-top: 0.25rem;
  }

  .navbar__signin-mobile a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .navbar__signin-mobile a span {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .navbar--on-dark .navbar__signin-mobile {
    border-top-color: rgba(255, 255, 255, 0.12);
  }

  /* ── Services reveal: 2-column grid, last item centered ── */
  .services-reveal__title {
    top: 2.5vh;
  }

  /* Switch to grid; container border-top + border-left form two edges of the grid lines */
  .services-reveal__pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    padding-top: 13vh;
    height: 100%;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* Each pillar adds border-right + border-bottom — no doubling anywhere */
  .pillar {
    flex: none;
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1.25rem 1.5rem;
    align-items: flex-start;
    justify-content: center;
  }

  .pillar:first-child {
    border-top: none;
    border-left: none;
  }

  /* Disable tap expansion */
  .pillar:hover {
    flex: none;
  }

  /* 5th pillar: span both columns, centered at half-grid width */
  .pillar:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  .pillar__icon {
    margin-bottom: 0.5rem;
  }

  .pillar__icon svg {
    width: 28px;
    height: 28px;
  }

  .pillar__name {
    font-size: 1.15rem;
  }

  .pillar__detail-wrap {
    grid-template-rows: 1fr;
    margin-top: 0.5rem;
  }

  .pillar__detail {
    opacity: 1;
    transition: none;
  }

  .pillar__detail p {
    font-size: 0.8rem;
    line-height: 1.45;
    text-align: left;
    width: 100%;
  }

  .pillar__cta {
    display: none;
  }

  /* ── Area + Process: prevent horizontal overflow on narrow screens ── */
  /* white-space: nowrap on these headings overflows the content area on phones
     (4rem side padding leaves ~247px on a 375px device; the text is wider). */
  .area-map__heading,
  .steps__heading {
    white-space: normal;
  }

  /* Reduce side padding so heading text and content have room to breathe. */
  .area-process {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}