/* ============================================================
   LECREATI DIGITAL — Brand as a System
   Deep midnight navy · warm gold accents · coral transformation
   Bodoni FLF (display) · Raleway (body)
   ============================================================ */

/* Bodoni FLF is served locally; Raleway loads from Google Fonts. */
@font-face {
  font-family: "Bodoni FLF";
  src: url("../assets/fonts/BodoniFLF-Roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni FLF";
  src: url("../assets/fonts/BodoniFLF-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni FLF";
  src: url("../assets/fonts/BodoniFLF-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Bodoni FLF";
  src: url("../assets/fonts/BodoniFLF-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  --navy-0: #07111D;
  --navy-1: #0B1523;
  --navy-2: #101B2D;
  --gold: #C8A45D;
  --gold-deep: #B98A35;
  --coral: #D36A58;
  --blue-soft: #7FA3D9;
  --ivory: #F4EFE6;
  --mist: #B9C0CC;
  --hairline: rgba(200, 164, 93, 0.16);
  --glass: rgba(16, 27, 45, 0.52);
  --glass-edge: rgba(244, 239, 230, 0.10);
  --font-display: "Bodoni FLF", Georgia, serif;
  --font-serif: "Bodoni FLF", Georgia, serif;
  --font-sans: "Raleway", "Helvetica Neue", sans-serif;
  --pad-x: clamp(1.5rem, 6vw, 7.5rem);
  --max-w: 1440px;
  --grid-main: 1360px;
  --grid-wide: 1980px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--navy-0);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.75;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(200, 164, 93, 0.35); color: var(--ivory); }

h1, h2 { font-family: var(--font-display); font-weight: 400; line-height: 1; letter-spacing: -0.02em; }
/* one h2 scale across this page and every future page */
h2 { font-size: clamp(2.8rem, 5.2vw, 5rem); max-width: 20ch; }
h3 {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 1.25;
}

img, video { display: block; }
a { color: inherit; }

/* ---------- shared atoms ---------- */
.eyebrow {
  font-size: 0.7rem; letter-spacing: 0.38em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 1.6rem;
}
.section-body { color: var(--mist); max-width: 56ch; margin-top: 1.8rem; }

.btn {
  display: inline-block; text-decoration: none; font-size: 0.72rem;
  letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500;
  padding: 1.05rem 2.4rem; border: 1px solid transparent;
  border-radius: 9999px;
  transition: background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, transform 0.45s ease;
}
.btn-solid { background: var(--gold); color: var(--navy-0); }
.btn-solid:hover { background: var(--ivory); transform: translateY(-2px); }
.btn-ghost { border-color: var(--hairline); color: var(--ivory); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.text-link {
  display: inline-block; margin-top: 1.4rem; text-decoration: none;
  font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--hairline); transition: border-color 0.4s, color 0.4s;
}
.text-link:hover { border-color: var(--gold); color: var(--ivory); }

/* ---------- liquid glass ---------- */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.reveal {
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.motion-ready .reveal:not(.revealed) { opacity: 0; transform: translateY(36px); }
.revealed { opacity: 1; transform: none; }

/* round arrow buttons (carousels + slider) */
.car-btn {
  width: 52px; height: 52px; border-radius: 50%; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--hairline); color: var(--ivory);
  font-size: 1rem; cursor: pointer;
  transition: border-color 0.4s, background-color 0.4s, color 0.4s;
}
.car-btn:hover:not([disabled]) { border-color: var(--gold); color: var(--gold); }
.car-btn[disabled] { opacity: 0.3; cursor: default; }

/* ============================================================
   THE DESERT — one continuous environment behind chapters 2–4
   ============================================================ */
.desert { position: fixed; inset: 0; z-index: 0; opacity: 0; pointer-events: none; }
.desert video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
}
#desert-dry { opacity: 1; }

/* ============================================================
   NAVIGATION
   ============================================================ */
/* floating pill navigation — glass chrome over the scene */
.nav {
  position: fixed; top: 1rem; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-orb { display: grid; place-items: center; text-decoration: none; }
.nav-mark { height: 84px; width: auto; }
.nav-center {
  display: flex; align-items: center; gap: 0.2rem;
  padding: 0.4rem; border-radius: 9999px;
}
.nav-links { display: flex; align-items: center; }
.nav-links a {
  text-decoration: none; font-size: 0.68rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(244, 239, 230, 0.9); font-weight: 500;
  padding: 0.65rem 0.95rem; transition: color 0.35s;
}
.nav-links a:hover { color: var(--gold); }
.nav-cta {
  text-decoration: none; font-size: 0.68rem; letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500;
  background: var(--ivory); color: var(--navy-0);
  border-radius: 9999px; padding: 0.75rem 1.5rem; margin-left: 0.4rem;
  transition: background-color 0.4s, color 0.4s, transform 0.4s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--gold); color: var(--navy-0); transform: translateY(-1px); }

/* mobile menu trigger — hidden on desktop, replaces the pill nav */
.nav-burger {
  display: none; width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  background: transparent; border: 1px solid var(--hairline); position: relative; cursor: pointer;
}
.nav-burger span {
  position: absolute; left: 12px; right: 12px; height: 1px; background: var(--ivory);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
.nav-burger span:nth-child(1) { top: 16px; }
.nav-burger span:nth-child(2) { top: 21px; }
.nav-burger span:nth-child(3) { top: 26px; }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* full-screen mobile menu panel */
.mobile-menu {
  position: fixed; inset: 0; z-index: 39;
  background: rgba(7, 13, 23, 0.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.4rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.4s ease, visibility 0s;
}
.mobile-menu-links { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.mobile-menu-links a {
  font-family: var(--font-display); font-size: 2rem; text-decoration: none;
  color: var(--ivory); transition: color 0.3s;
}
.mobile-menu-links a:hover { color: var(--gold); }

@media (min-width: 1001px) { .mobile-menu { display: none; } }

@media (max-width: 1000px) {
  .nav-links { display: none; }
  .nav-center { display: none; }
  .nav-cta { display: none; }
  .nav-mark { height: 56px; }
  .nav-burger { display: block; }
}

/* ============================================================
   CHAPTER ONE · ARRIVAL
   ============================================================ */
/* height comes from the GSAP pin (+160%); CSS sticky confuses
   ScrollTrigger's position math, so we pin with GSAP instead. */
.arrival { position: relative; z-index: 1; }
.arrival-pin { height: 100vh; overflow: hidden; background: var(--navy-0); }
.arrival-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arrival-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(11, 21, 35, 0.8) 0%,
    rgba(11, 21, 35, 0) 34%,
    rgba(3, 7, 13, 0) 46%,
    rgba(3, 7, 13, 0.88) 74%,
    #030710 100%);
}
/* the sunset dissolves into the next chapter — no visible break */
.arrival-fade {
  position: absolute; inset: auto 0 0 0; height: 56vh;
  background: linear-gradient(to bottom, transparent, rgba(3, 7, 13, 0.65) 55%, #030710 100%);
}
.arrival-night {
  position: absolute; inset: 0; background: var(--navy-0); opacity: 0; pointer-events: none;
}
.arrival-content {
  position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: 11vh;
  max-width: var(--max-w); margin: 0 auto;
}
/* the opening line arrives as a badge so it reads over the bright sky */
.arrival-content .eyebrow {
  display: inline-block; color: var(--gold); font-weight: 800;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}
.arrival-headline { font-size: clamp(2.6rem, 5.8vw, 5.4rem); letter-spacing: 0.02em; line-height: 1.05; }
.arrival-headline .line { display: block; overflow: hidden; }
.arrival-headline .line span { display: block; }
.motion-ready .arrival-headline .line span { transform: translateY(110%); }
.arrival-sub { color: var(--mist); max-width: 76ch; margin-top: 1.6rem; }
.arrival-ctas { display: flex; gap: 1.2rem; margin-top: 2.8rem; flex-wrap: wrap; }

/* trust line as a slow marquee */
.marquee {
  position: absolute; left: 0; right: 0; bottom: 0;
  overflow: hidden; padding: 1.3rem 0;
  border-top: 1px solid rgba(244, 239, 230, 0.08);
}
.marquee-inner {
  display: flex; width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee-inner span {
  white-space: nowrap; flex: 0 0 auto;
  font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(185, 192, 204, 0.65); font-weight: 400;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============================================================
   CHAPTER TWO · THE VISIBILITY GAP — over the living desert
   ============================================================ */
/* the chapter slides up OVER the pinned hero during the last 100vh of
   the arrival pin (margin overlaps the pin spacer; hero dissolves to
   the desert beneath it — see the arrival onUpdate in main.js) */
.gap { position: relative; z-index: 2; margin-top: -100vh; padding: 9vh 0 12vh; }
.gap-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(7, 17, 29, 0.94) 26%, rgba(7, 17, 29, 0.6) 55%, rgba(7, 17, 29, 0.08) 100%);
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}
.gap-inner { position: relative; max-width: var(--grid-main); margin: 0 auto; padding: 0 var(--pad-x); }
.gap-head { max-width: 70ch; }
.gap-closing {
  margin-top: 9vh; font-family: var(--font-sans); font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 2rem); color: var(--mist); max-width: 44ch;
}

/* ---------- frosted glass carousel ----------
   Full-bleed: carousels break out of the centered column so the
   problems start at the logo line and the case studies end at the
   nav button line. */
.carousel {
  position: relative; margin-top: 8vh;
  width: 100vw; margin-left: calc((100% - 100vw) / 2);
}
.gap-carousel {
  width: min(calc(100vw - var(--pad-x)), calc((100vw + var(--grid-main)) / 2 - var(--pad-x)));
  margin-left: 0; padding-left: 0; padding-right: 0;
}
/* mirrored: the case carousel starts at the right edge and flows left */
.proof-carousel { padding-right: var(--pad-x); align-self: flex-start; }
.proof-carousel .carousel-track { flex-direction: row-reverse; }
.carousel-nav { display: flex; gap: 0.7rem; margin-bottom: 2rem; }
/* NO mask and NO will-change here: either one turns the window/track
   into the cards' backdrop root, and their backdrop-filter can no
   longer blur the fixed desert behind the page. The proof carousel
   (image cards, no backdrop blur) re-adds its own mask below. */
.carousel-window { overflow: hidden; }
.gap-carousel .carousel-window { padding-top: 8px; }
.carousel-track { display: flex; gap: 1.4rem; }

.glass-card {
  flex: 0 0 clamp(280px, 28vw, 380px);
  min-height: 350px;
  display: flex; flex-direction: column;
  padding: 1.6rem;
  border-radius: 1.25rem;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.glass-card:hover { transform: translateY(-6px); }
.glass-card h3 { margin-top: auto; padding-top: 1.6rem; max-width: 26ch; }
.glass-card p { color: rgba(244, 239, 230, 0.9); font-size: 0.92rem; margin-top: 0.8rem; max-width: 34ch; line-height: 1.5; }

.pcard-top { display: flex; align-items: flex-start; justify-content: flex-end; gap: 1rem; }
.pcard-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
.pcard-tags i {
  font-style: normal; border-radius: 9999px;
  padding: 0.28rem 0.8rem; font-size: 11px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.9); white-space: nowrap;
  background: rgba(11, 24, 43, 0.88);
}

/* each slide frosts the desert behind it a little more than the last */
.gap-carousel .glass-card:nth-child(1) { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.gap-carousel .glass-card:nth-child(2) { backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.gap-carousel .glass-card:nth-child(3) { backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.gap-carousel .glass-card:nth-child(4) { backdrop-filter: blur(34px); -webkit-backdrop-filter: blur(34px); }
.gap-carousel .glass-card:nth-child(5) { backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }

/* ============================================================
   CHAPTER THREE · TRANSFORMATION — pure witnessed change
   ============================================================ */
.metamorphosis { height: 280vh; position: relative; z-index: 1; }

/* ============================================================
   CHAPTER FOUR · PROOF — mirrored composition
   ============================================================ */
/* the case studies freeze in place — carousels and all — while the
   services chapter slides over them. Taller than the viewport, so the
   sticky top is set negative from JS (setFreezeTops) to freeze on the
   bottom edge instead of the top. */
.proof { position: sticky; top: 0; z-index: 1; padding: 18vh 0 16vh; }
.proof-shade {
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(7, 17, 29, 0.94) 26%, rgba(7, 17, 29, 0.6) 55%, rgba(7, 17, 29, 0.08) 100%);
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}
.proof-inner {
  position: relative; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x);
  display: flex; flex-direction: column; align-items: flex-end;
}
.proof-head { max-width: 60ch; }
.proof-carousel .carousel-nav { justify-content: flex-end; }
.proof-carousel .carousel-window { mask-image: linear-gradient(to left, black 88%, transparent); -webkit-mask-image: linear-gradient(to left, black 88%, transparent); }
/* image-based case slides: meta rides the top of the photo, the story
   surfaces on hover while a bottom gradient climbs to meet it */
.case-card {
  flex-basis: clamp(280px, 28vw, 400px);
  position: relative; overflow: hidden; padding: 0;
  min-height: 430px; border-radius: 1.25rem;
}
.case-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-card:hover .case-img { transform: scale(1.05); }
.case-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 9, 16, 0.95) 0%, rgba(4, 9, 16, 0.55) 30%, rgba(4, 9, 16, 0) 60%);
}
.case-grad::after {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(to top, rgba(4, 9, 16, 0.97) 0%, rgba(4, 9, 16, 0.72) 45%, rgba(4, 9, 16, 0.3) 100%);
  transition: opacity 0.65s ease;
}
.case-card:hover .case-grad::after { opacity: 1; }
.case-content {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; padding: 1.6rem;
}
.case-card .case-meta { margin-bottom: auto; font-size: 0.55rem; }
.case-card h3 { margin-top: 0; padding-top: 0; }
.case-reveal {
  display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(10px);
  transition: grid-template-rows 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.case-reveal > div { overflow: hidden; }
.case-reveal .text-link { margin-top: 1.1rem; margin-bottom: 0.2rem; }
.case-card:hover .case-reveal { grid-template-rows: 1fr; opacity: 1; transform: none; }
/* no hover on touch — keep the story visible */
@media (hover: none) {
  .case-reveal { grid-template-rows: 1fr; opacity: 1; transform: none; }
  .case-grad::after { opacity: 1; }
}
.case-meta {
  font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.4rem; font-weight: 500;
}
.proof-foot { margin-top: 7vh; }

/* ============================================================
   CHAPTER FIVE · THE SYSTEM
   ============================================================ */
/* the system arrives over the frozen proof and casts a shadow onto it */
.system {
  /* freezes whole (title + finished stack) on its bottom edge — negative
     top from setFreezeTops — while the philosophy chapter slides over */
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(to bottom, var(--navy-0), var(--navy-1) 30%, var(--navy-0));
  border-radius: 1.6rem 1.6rem 0 0;
  box-shadow: 0 -70px 140px rgba(3, 8, 15, 0.75);
}
.system-inner { position: relative; }

/* services stack as dark cards that slide over one another with scroll —
   pure CSS sticky, no outline, only inner shadows: a golden light along
   the top edge, as if each card catches the sun above the one before it */
.system-inner { max-width: var(--max-w); margin: 0 auto; padding: 12vh var(--pad-x) 14vh; }
/* the section title stays pinned and visible while the cards stack —
   top clears the fixed nav (logo 84px + 1rem offset) instead of
   sliding under it */
.svc-head { position: sticky; top: 7.5rem; margin-bottom: 8vh; }

.svc-cards { display: flex; flex-direction: column; gap: 3rem; }
.svc-card {
  position: sticky; top: var(--svc-top, 34vh);
  display: flex; flex-direction: column; text-decoration: none;
  padding: clamp(1.8rem, 3.2vw, 3rem);
  border-radius: 1.6rem;
  background: linear-gradient(to bottom, #0B1424 0%, #060C16 70%);
  box-shadow:
    inset 0 1px 0 rgba(200, 164, 93, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.9);
}
.svc-card:nth-child(2) { top: calc(var(--svc-top, 34vh) + 0.75rem); }
.svc-card:nth-child(3) { top: calc(var(--svc-top, 34vh) + 1.5rem); }
.svc-card:nth-child(4) { top: calc(var(--svc-top, 34vh) + 2.25rem); }
.svc-card:nth-child(5) { top: calc(var(--svc-top, 34vh) + 3rem); }
.svc-card:nth-child(6) { top: calc(var(--svc-top, 34vh) + 3.75rem); }

.svc-card .node-label {
  font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.svc-title {
  font-family: var(--font-display); font-size: clamp(2rem, 3.8vw, 3.8rem);
  line-height: 1.05; letter-spacing: -0.02em; max-width: 18ch; color: var(--ivory);
  margin-top: 1rem;
}
.svc-desc { color: var(--mist); max-width: 46ch; font-size: 0.98rem; margin-top: 1.4rem; }
.svc-card .text-link.svc-link {
  border-color: var(--hairline); margin-top: 2.4rem; align-self: flex-end;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.svc-card:hover .text-link { border-color: var(--gold); color: var(--ivory); }
.link-arrow { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.svc-card:hover .link-arrow { transform: translateX(4px); }

@media (max-width: 899px) {
  .system { box-shadow: none; }
  .svc-head { position: static; }
  .svc-cards::after { height: 8vh; }
  .svc-card { min-height: 0; }
  .svc-card:nth-child(n) { top: 8vh; }
  .svc-title { margin-top: 0.8rem; }
}

/* ============================================================
   CHAPTER SIX · PHILOSOPHY — one thought at a time
   ============================================================ */
/* darker band separates the studio chapter from the services above */
/* every section from the frozen services onward must stack HIGHER than
   the one before it — frozen sticky sections never un-stick, so anything
   with a lower z-index slides underneath them, invisible.
   Chain: system 2 → philosophy 3 → process 4 → trust 5 → cta 6 →
   insights 7 → footer 8. */
.philosophy {
  position: relative; z-index: 3; background: #04080F;
  border-radius: 1.6rem 1.6rem 0 0;
  box-shadow: 0 -60px 120px rgba(3, 8, 15, 0.8);
}

/* the studio's beliefs float around the idea at its centre */
.phil-stage { height: 300vh; position: relative; z-index: 1; }
.phil-pin { height: 100vh; overflow: hidden; } /* GSAP-pinned, not CSS sticky */
.phil-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 var(--pad-x);
}
.phil-center .eyebrow { margin-bottom: 1.4rem; }
.phil-center h2 { max-width: none; margin: 0 auto; }
.phil-center .section-body { max-width: 44ch; margin: 1.6rem auto 0; }

.phil-float {
  position: absolute; z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.7vw, 1.7rem); line-height: 1.15;
  color: var(--ivory); max-width: 13ch; will-change: transform, filter;
}
.phil-float::before {
  content: ""; display: block; width: 36px; height: 1px;
  background: var(--gold); margin-bottom: 0.9rem; opacity: 0.7;
}
.phil-float[data-pos="tl"] { top: 20%; left: 11%; }
.phil-float[data-pos="tr"] { top: 22%; right: 11%; text-align: right; }
.phil-float[data-pos="tr"]::before { margin-left: auto; }
.phil-float[data-pos="bl"] { bottom: 20%; left: 11%; }
.phil-float[data-pos="br"] { bottom: 22%; right: 11%; text-align: right; }
.phil-float[data-pos="br"]::before { margin-left: auto; }

@media (max-width: 899px) {
  .phil-stage { height: auto; }
  .phil-pin { position: static; height: auto; overflow: visible; padding: 16vh var(--pad-x); }
  .phil-center { position: static; padding: 0 0 8vh; }
  .phil-float { position: static; max-width: none; margin-bottom: 4vh; text-align: left !important; }
  .phil-float::before { margin-left: 0 !important; }
}

/* the founder's voice — same chapter, same background: a centered
   passage whose words earn their light from the scroll, like the
   testimonials */
.philosophy-outro {
  position: relative; z-index: 3;
  background: #04080F;
  padding: 4vh var(--pad-x) 18vh;
}
.phil-prose { max-width: 850px; margin: 0 auto; text-align: center; }
.phil-prose p {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.45;
  color: var(--ivory);
}
.phil-prose p + p { margin-top: 2.6rem; }
.phil-prose .tw { opacity: 0.14; display: inline; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
/* the process freezes at the top of the viewport so the testimonials
   chapter can slide up and settle over it. Same shape as TRUST: a tall
   stage gives the scroll room, .process-inner is GSAP-pinned within it,
   and the 4 steps rise one at a time as you scroll (main.js). */
.process { position: sticky; top: 0; z-index: 4; background: linear-gradient(to bottom, var(--navy-0), var(--navy-1)); }
.process-stage { height: 200vh; position: relative; }
.process-inner {
  height: 100vh; display: flex; flex-direction: column; justify-content: center;
  max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x);
} /* GSAP-pinned, not CSS sticky */
.process-head { margin-bottom: 7vh; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.step { border-top: 1px solid rgba(200, 164, 93, 0.4); padding-top: 2rem; }
.step-num { font-family: var(--font-serif); font-size: 2.6rem; color: rgba(200, 164, 93, 0.85); display: block; margin-bottom: 1.4rem; }
.step h3 { margin-bottom: 0.9rem; }
.step p { color: var(--mist); font-size: 0.94rem; }
/* below the pin breakpoint: no stage, steps just stack and reveal via IO */
@media (max-width: 899px) {
  .process { padding: 14vh 0; }
  .process-stage { height: auto; }
  .process-inner { height: auto; display: block; }
  .step { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}
@media (max-width: 1000px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .steps { grid-template-columns: 1fr; } }

/* ============================================================
   CHAPTER SEVEN · TRUST — one voice at a time
   ============================================================ */
.trust {
  /* freezes on its bottom edge (negative top from setFreezeTops) so the
     CTA chapter can slide up over it */
  position: sticky; top: 0; z-index: 5; background: var(--navy-1);
  border-radius: 1.6rem 1.6rem 0 0;
  box-shadow: 0 -60px 120px rgba(3, 8, 15, 0.8);
  overflow: clip; /* clips the sticky photo to the rounded corners; the
                     GSAP-pinned slider is position:fixed and unaffected */
}
.trust-stage { height: 240vh; position: relative; }
/* the blooming cactus close-up holds the whole chapter — a sticky
   100vh layer so it stays composed while the stage scrolls */
.trust-bg { position: absolute; inset: 0; z-index: 0; }
.trust-bg > div {
  position: sticky; top: 0; height: 100vh;
  background:
    linear-gradient(to bottom, rgba(7, 13, 23, 0.66), rgba(7, 13, 23, 0.82)),
    url("../assets/img/trust-cactus.png") center / cover no-repeat,
    var(--navy-1);
}
.trust-inner { position: relative; z-index: 1; }
.trust-inner {
  height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1240px; margin: 0 auto; padding: 0 var(--pad-x);
} /* GSAP-pinned, not CSS sticky */
.trust-head { margin-bottom: 6vh; text-align: center; }
.trust-head h2 { margin: 0 auto; }

.t-slider { width: 100%; text-align: center; }
.t-slides { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; width: 100%; }
.t-slide .tw { opacity: 0.14; display: inline; }
.t-slide {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.9s;
  min-width: 0; width: 100%;
}
.t-slide.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 0.9s ease 0.25s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, visibility 0s;
}
.t-slide p {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.3; letter-spacing: -0.01em;
  text-align: center; margin: 0 auto; max-width: 90vw;
}
.t-slide cite {
  position: relative; display: block; height: 1.4em; margin-top: 2.8rem;
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
  font-style: normal; font-size: 0.7rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); text-align: center;
}
.t-slide cite::before {
  content: ""; position: absolute; left: 0; top: 50%; height: 1px;
  width: var(--line-w, 0); background: rgba(200, 164, 93, 0.4);
}
.t-name {
  display: inline-block; text-align: center; white-space: nowrap; padding: 0;
  margin: 0 auto; opacity: var(--name-op, 0.2);
}
.t-controls { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: 4.5rem; }
.t-count { font-size: 0.74rem; letter-spacing: 0.3em; color: rgba(200, 164, 93, 0.85); }
.t-count em { font-style: normal; color: var(--gold); }

/* ============================================================
   CHAPTER EIGHT · THE NEXT STEP
   ============================================================ */
.cta {
  /* normal flow (does NOT freeze) — it slides over the frozen trust
     chapter same as any covering section, then scrolls on naturally
     into insights right after it: CTA + insights read as one
     continuous scrollable section, only the blog (after both) freezes
     for the footer box. Same flat navy as insights — the blob supplies
     the color, not a background gradient. */
  position: relative; z-index: 6; padding: 22vh 0;
  background: var(--navy-0);
  text-align: center;
  border-radius: 1.6rem 1.6rem 0 0;
  box-shadow: 0 -60px 120px rgba(3, 8, 15, 0.8);
  overflow: hidden;
}
/* a slow amorphic wash drifting behind the CTA, crossfading blue to
   coral via two blurred, independently-drifting blobs blended together */
.cta-blob { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cta-blob .blob {
  position: absolute; left: 50%; top: 50%;
  width: min(60vw, 720px); height: min(60vw, 720px);
  margin-left: min(-30vw, -360px); margin-top: min(-30vw, -360px);
  border-radius: 50%; filter: blur(110px); mix-blend-mode: screen;
}
.blob-a {
  background: radial-gradient(circle, rgba(127, 163, 217, 0.55), transparent 70%);
  opacity: 0.85; animation: blob-drift-a 22s ease-in-out infinite;
}
.blob-b {
  background: radial-gradient(circle, rgba(211, 106, 88, 0.55), transparent 70%);
  opacity: 0.75; animation: blob-drift-b 26s ease-in-out infinite;
  animation-delay: -9s;
}
@keyframes blob-drift-a {
  0%, 100% { transform: translate(-18%, -8%) scale(1); }
  50% { transform: translate(16%, 12%) scale(1.25); }
}
@keyframes blob-drift-b {
  0%, 100% { transform: translate(14%, 14%) scale(1.1); }
  50% { transform: translate(-14%, -12%) scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-blob .blob { animation: none; }
}
.cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 var(--pad-x); display: flex; flex-direction: column; align-items: center; }
.cta h2 { max-width: none; }
.cta .section-body { margin-top: 2rem; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; margin-top: 3.4rem; }

/* ============================================================
   CHAPTER NINE · INSIGHTS — an editorial publication
   ============================================================ */
/* CTA scrolls normally right into insights (no freeze between them —
   they read as one continuous section); insights THEN freezes on its
   own bottom edge so the footer box can slide up over it. No rounded
   top / shadow here: insights isn't covering a frozen section, it's
   just the next beat in the same scroll. z-index still ascends past
   the frozen chapters before it (trust 5, cta 6) so it paints over
   them without needing to look like a "cover". */
.insights {
  position: sticky; top: 0; z-index: 7; padding: 16vh 0; background: var(--navy-0);
}
.insights-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }
.insights-head {
  margin-bottom: 8vh;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.insights-all { flex: 0 0 auto; margin-top: 0.4rem; }

.insights-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.4rem 2rem; }
.insight-media { display: block; overflow: hidden; }
.insight-media img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
}
.insight:hover .insight-media img { transform: scale(1.045); }

.insight { grid-column: span 3; }
.insight h3 { margin-top: 1.1rem; font-size: 1.2rem; }
.insight h3 a { text-decoration: none; transition: color 0.4s; }
.insight h3 a:hover { color: var(--gold); }
/* needs the extra ancestor: `.insight p` outweighs a lone class */
.insights-grid .insight-cat, .archive-grid .insight-cat {
  font-size: 0.57rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-top: 1.4rem;
  transition: color 0.35s;
}
.insights-grid .insight:hover .insight-cat, .archive-grid .insight:hover .insight-cat { color: var(--ivory); }
.insight p { color: var(--mist); font-size: 0.95rem; max-width: 52ch; }

.insight-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 7fr 5fr; gap: 2.6rem; align-items: center; margin-bottom: 1.6rem; }
.insight-featured .insight-media img { aspect-ratio: 16 / 9; }
.insight-featured h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); max-width: 30ch; margin: 0.9rem 0 1.2rem; }
.insight-featured .insight-cat { margin-top: 0; }
.insight-featured .insight-body { padding-right: 1rem; }

@media (max-width: 1100px) {
  .insight { grid-column: span 6; }
  .insight-featured { grid-column: 1 / -1; }
}
@media (max-width: 900px)  { .insight-featured { grid-template-columns: 1fr; } }
@media (max-width: 620px)  { .insight { grid-column: 1 / -1; } }

/* ============================================================
   CHAPTER TEN · COMPLETION
   ============================================================ */
/* transparent wrapper: ONLY the rounded shell box slides over the frozen
   blog — the blog stays visible in the margins around the box */
.footer {
  position: relative; z-index: 8; background: transparent; padding: 1.6rem;
}
/* matte dark blue box — no border, no frosted glass */
.footer-shell {
  position: relative; border-radius: 1.6rem; overflow: hidden;
  background: var(--navy-1);
  box-shadow: 0 -40px 90px rgba(3, 8, 15, 0.8);
}
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 9vh var(--pad-x) 4vh; position: relative; z-index: 1; }

/* the name, revealed by the visitor's own cursor */
.footer-giant { position: relative; margin: -1rem 0 0; }
.footer-giant svg { display: block; width: 100%; height: auto; }
.gt-base, .gt-gold {
  font-family: var(--font-display);
  font-size: 128px; letter-spacing: 0.04em;
  fill: transparent; stroke-width: 1;
}
.gt-base { stroke: rgba(244, 239, 230, 0.13); }
.gt-gold { stroke-width: 1.3; }
.footer-brand { margin-bottom: 7vh; text-align: center; }
.footer-mark { height: 128px; width: auto; margin: 0 auto 2.4rem; }
.footer-tagline {
  font-family: var(--font-display); font-size: clamp(1.9rem, 3vw, 3rem);
  max-width: none; width: 100%; letter-spacing: 0.02em; text-align: center;
}
.footer-cols {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem; margin-bottom: 8vh; text-align: center;
}
.footer-col h4 {
  font-family: var(--font-sans); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.6rem;
}
.footer-col a {
  display: block; text-decoration: none; color: var(--mist);
  font-size: 0.92rem; padding: 0.34rem 0; transition: color 0.35s;
}
.footer-col a:hover { color: var(--ivory); }
.footer-base {
  display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
  border-top: 1px solid rgba(244, 239, 230, 0.07); padding-top: 2.2rem;
  font-size: 0.78rem; color: rgba(185, 192, 204, 0.55); text-align: center;
}
@media (max-width: 1000px) and (min-width: 761px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr; gap: 3rem; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .phil-slide, .t-slide { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .phil-prose .tw { opacity: 1 !important; }
  .arrival-headline .line span { transform: none !important; }
  .marquee-inner { animation: none; }
}

/* ---------- interior pages: all reveals visible immediately on first paint, no fade-in ---------- */
.interior-page .reveal { opacity: 1; visibility: visible; transform: none; transition: none; }

/* ============================================================
   INTERIOR PAGES — About, Contact, Insights, Case Studies
   Same design system as the homepage (nav, footer, atoms, type
   scale) but a plain static layout: no GSAP pin/scrub, content
   pages load js/site.js instead of the homepage's js/main.js.
   ============================================================ */
.page-hero {
  position: relative; z-index: 1;
  padding: 12rem var(--pad-x) 6vh; max-width: var(--max-w); margin: 0 auto;
}
.page-hero h1 {
  font-family: var(--font-display); font-weight: 400; line-height: 1.04;
  letter-spacing: -0.02em; font-size: clamp(2.6rem, 5.2vw, 4.6rem); max-width: 22ch;
}
.page-hero .section-body { max-width: 62ch; }

.page-section { position: relative; z-index: 1; padding: 5vh var(--pad-x) 8vh; max-width: var(--max-w); margin: 0 auto; }

.breadcrumb {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mist); margin-bottom: 1.8rem;
}
.breadcrumb a { color: var(--mist); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { color: rgba(185, 192, 204, 0.4); }
.breadcrumb em { font-style: normal; color: var(--ivory); }

/* shared stat row — About page facts, Case Study results */
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem;
  padding: 2.8rem 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin: 3rem 0;
}
.stat b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--gold); }
.stat span { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); margin-top: 0.6rem; }

/* values / beliefs grid — About page */
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 2rem; }
.value-card { padding: 2rem; border: 1px solid var(--hairline); border-radius: 1rem; }
.value-card::before { content: ''; display: block; width: 36px; height: 1px; background: var(--gold); margin-bottom: 1.2rem; opacity: 0.7; }
.value-card p { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ivory); line-height: 1.4; }
@media (max-width: 700px) { .values-grid { grid-template-columns: 1fr; } }

/* ---------- archive grid: shared 12-col layout for Insights + Case Studies ---------- */
.archive-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2.6rem 2rem; }
.archive-grid .insight { grid-column: span 4; }
.archive-grid .case-card { grid-column: span 4; flex-basis: auto; min-height: 380px; }
@media (max-width: 1100px) { .archive-grid .insight, .archive-grid .case-card { grid-column: span 6; } }
@media (max-width: 640px)  { .archive-grid .insight, .archive-grid .case-card { grid-column: 1 / -1; } }

/* ---------- article prose — blog post + case study body copy ---------- */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 1.6rem; }
.prose h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin-top: 3rem; line-height: 1.25; max-width: none; }
.prose h3 {
  text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.15rem, 1.7vw, 1.4rem); color: var(--ivory); margin-top: 2.4rem;
}
.prose h4 { color: var(--ivory); font-size: 1rem; margin-top: 1.8rem; }
.prose p { color: var(--mist); font-size: 1.02rem; line-height: 1.8; }
.prose strong { color: var(--ivory); font-weight: 600; }
.prose ul, .prose ol { color: var(--mist); padding-left: 1.3rem; line-height: 1.8; }
.prose li + li { margin-top: 0.5rem; }
.prose blockquote {
  border-left: 2px solid var(--gold); padding-left: 1.6rem; margin: 2rem 0;
  font-family: var(--font-display); font-size: 1.25rem; color: var(--ivory); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.prose th, .prose td { border: 1px solid var(--hairline); padding: 0.7rem 1rem; text-align: left; color: var(--mist); }
.prose th { color: var(--gold); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 500; }
.prose a { color: var(--gold); text-decoration-color: rgba(200, 164, 93, 0.4); }
.post-header { max-width: 720px; margin: 0 auto 4vh; }
.post-meta { color: var(--mist); font-size: 0.86rem; margin-top: 1.2rem; }
.post-meta span + span::before { content: '\2022'; margin: 0 0.6rem; color: rgba(185, 192, 204, 0.4); }
.post-media { max-width: 960px; margin: 0 auto 6vh; border-radius: 1.2rem; overflow: hidden; }
.post-media img { width: 100%; display: block; }
.post-body { max-width: 720px; margin: 0 auto; }
.post-foot { max-width: 720px; margin: 6vh auto 0; padding-top: 2.4rem; border-top: 1px solid var(--hairline); }

/* ---------- FAQ accordion ---------- */
.faq-list { border-top: 1px solid var(--hairline); max-width: 800px; }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem 0; cursor: pointer; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--ivory);
}
.faq-q::after {
  content: '+'; font-family: var(--font-sans); font-size: 1.4rem; color: var(--gold); line-height: 1;
  flex: 0 0 auto; transition: transform 0.35s ease;
}
.faq-item.is-open .faq-q::after { transform: rotate(45deg); }
.faq-a {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--mist); padding-bottom: 1.6rem; max-width: 62ch; line-height: 1.7; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; opacity: 1; }

/* ---------- contact ---------- */
.contact-follow { display: flex; align-items: baseline; gap: 1.6rem; margin-bottom: 2rem; }
.contact-follow h3 { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; color: var(--ivory); }
.contact-follow .text-link { display: inline-block; }
.contact-calendly {
  width: 100%; background: rgba(244, 239, 230, 0.03); border: 1px solid var(--hairline); border-radius: 1rem;
  overflow: hidden; padding: 0.5rem;
}
/* the blooming cactus backs the hero AND the booking beat as one section;
   pinned to the right edge so the bloom stays in frame at every width, while
   the FAQ below stays plain navy */
.contact-book { position: relative; padding-bottom: 9vh; overflow: hidden; background: var(--navy-0); }
/* the bloom grows in from the right and holds the top of the section, then
   dissolves down into the navy before the calendar. Sized by its own aspect
   ratio rather than `cover`, so a landscape frame is never blown up by this
   section's full height. */
.contact-book::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; z-index: 0;
  aspect-ratio: 2752 / 1536;
  background:
    linear-gradient(to right, rgba(4, 8, 16, 0.86) 0%, rgba(4, 8, 16, 0.4) 42%, rgba(4, 8, 16, 0) 62%),
    url("../assets/img/contact-flower.png") right top / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}
.contact-book > * { position: relative; z-index: 1; }
/* headline holds the dark left column instead of running under the petals */
.contact-book .page-hero h1 { max-width: 15ch; }
.contact-book .page-hero .section-body { max-width: 40ch; }
.contact-booking { padding-top: 0; }
/* portrait crop carries the same bloom on narrow screens */
@media (max-width: 760px) {
  .contact-book::before {
    aspect-ratio: 1536 / 2752;
    background-image: url("../assets/img/contact-flower-mobile.png");
  }
}
@media (max-width: 640px) { .contact-follow { flex-wrap: wrap; gap: 0.8rem 1.4rem; } }

/* ---------- case study meta line (Client / Services / Year) ---------- */
.case-meta-line {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.4rem; margin-bottom: 3rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--hairline);
}
.case-meta-line span { font-size: 0.9rem; color: var(--mist); }
.case-meta-line strong { color: var(--ivory); font-weight: 500; }

/* ---------- before / after pair ---------- */
.case-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 2.6rem 0; }
.case-before-after figure { margin: 0; }
.case-before-after img { width: 100%; border-radius: 1rem; display: block; }
.case-before-after figcaption {
  margin-top: 0.8rem; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold);
}
@media (max-width: 700px) { .case-before-after { grid-template-columns: 1fr; } }

/* ---------- related case studies list ---------- */
.related-cases { margin-top: 4rem; padding-top: 2.6rem; border-top: 1px solid var(--hairline); }
.related-cases h3 { text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; color: var(--ivory); margin-bottom: 1.4rem; }
.related-cases ul { list-style: none; display: grid; gap: 0.9rem; }
.related-cases a { color: var(--mist); text-decoration: none; font-size: 0.96rem; transition: color 0.3s; }
.related-cases a:hover { color: var(--gold); }

/* ---------- CTA "or" divider between the button and the WhatsApp link ---------- */
.cta-or { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mist); }

/* ---------- interior pages: ordinary in-flow footer, no overlap ---------- */
.pre-footer { position: static; }

/* ---------- case detail pages: nested .page-hero reduced spacing, metadata two-column ---------- */
.page-section .page-hero { padding: 0; margin: 2rem 0 3rem 0; }
.case-meta-line { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin-bottom: 2rem; }

/* ---------- case studies archive listing: centered header, image-first cards ---------- */
.case-archive .page-hero { text-align: center; max-width: var(--grid-main); margin: 0 auto 3rem; }
.case-archive .archive-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.6rem 2rem; }
.case-archive .archive-card {
  display: flex; flex-direction: column; min-height: auto; padding: 0; flex: 1;
  grid-column: auto; text-decoration: none; color: inherit;
}
.case-archive .archive-card .case-img {
  position: static; height: auto; aspect-ratio: 3/2; object-fit: cover;
  margin-bottom: 0; width: 100%; display: block;
}
.case-archive .case-caption { padding: 1.4rem 0; display: flex; flex-direction: column; flex: 1; }
.case-archive .case-caption .case-meta { font-size: 0.75rem; margin-bottom: 0.6rem; }
.case-archive .case-caption h3 { margin-top: 0; margin-bottom: 0.8rem; font-size: 1.1rem; }
.case-archive .case-caption p { margin: 0.6rem 0; font-size: 0.9rem; flex: 1; }
.case-archive .case-caption .text-link { display: block; margin-top: 1rem; }
@media (max-width: 1100px) { .case-archive .archive-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .case-archive .archive-grid { grid-template-columns: 1fr; } }

/* ---------- mobile readability: responsive tables and code ---------- */
@media (max-width: 500px) {
  table { font-size: 0.9rem; }
  code { word-break: break-all; overflow-wrap: break-word; }
}

/* ---------- permanent WhatsApp bubble — every page ---------- */
.whatsapp-bubble {
  position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 30;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--navy-1); color: var(--gold);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 24px rgba(3, 8, 15, 0.55);
  transition: transform 0.35s ease, background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.whatsapp-bubble:hover { transform: translateY(-3px); border-color: var(--gold); background: var(--navy-2); color: var(--ivory); }
@media (max-width: 640px) {
  .whatsapp-bubble { right: 1.1rem; bottom: 1.1rem; width: 50px; height: 50px; }
}

/* ---------- "you may also like" — 2-post grid on blog posts ---------- */
.you-may-like-grid { grid-template-columns: repeat(2, 1fr); }
.you-may-like-grid .insight { grid-column: span 1; }
@media (max-width: 640px) { .you-may-like-grid { grid-template-columns: 1fr; } }

/* ---------- related case studies — visual 2-card grid ---------- */
.related-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.related-grid .case-card { min-height: 320px; }
@media (max-width: 700px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- case study image gallery ---------- */
.case-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin: 2.6rem 0; }
.case-gallery img {
  width: 100%; border-radius: 1rem; display: block; cursor: zoom-in;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.case-gallery img:hover { transform: scale(1.015); opacity: 0.94; }
.case-gallery .case-gallery-wide { grid-column: 1 / -1; }
@media (max-width: 700px) { .case-gallery { grid-template-columns: 1fr; } }
.post-media img, .case-before-after img { cursor: zoom-in; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(3, 8, 15, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 4vh 4vw; overflow-y: auto;
}
.lightbox.is-open { display: block; }
.lightbox-inner { max-width: 1100px; margin: 0 auto; }
.lightbox-inner img { width: 100%; display: block; border-radius: 0.8rem; }
.lightbox-close {
  position: fixed; top: 1.4rem; right: 1.6rem; z-index: 61;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(244, 239, 230, 0.3);
  background: rgba(7, 17, 29, 0.7); color: var(--ivory); font-size: 1.3rem; line-height: 1; cursor: pointer;
  transition: border-color 0.3s, color 0.3s;
}
.lightbox-close:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- case detail content layout: 1360px / 1980px grids with heading/body split ---------- */

/* ========== UPDATED CASE STUDY LAYOUT: 1360px centered + responsive gutters ========== */
.case-article { width: 100%; }

.case-header {
  max-width: 1360px; width: 100%; margin: 0 auto;
  padding: 0 var(--pad-x); text-align: center;
}

.case-hero {
  max-width: 1360px; width: 100%; margin: 2.6rem auto 0;
  padding: 0 var(--pad-x); display: block;
}

.case-hero img {
  width: 100%; height: auto; display: block;
  border-radius: 1rem;
}

.case-metadata {
  max-width: 1360px; width: 100%; margin: 1.6rem auto 0;
  padding: 0 var(--pad-x);
  display: flex; gap: 2.6rem; justify-content: center; flex-wrap: wrap;
}

.case-meta-item {
  text-align: center;
}

.case-meta-item .label {
  color: var(--gold); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 500; display: block; margin-bottom: 0.4rem;
}

.case-meta-item .value {
  color: var(--ivory); font-size: 1rem;
}

.case-content-section {
  max-width: 1360px; width: 100%; margin: 2.6rem auto;
  padding: 0 var(--pad-x);
  text-align: center;
}

.case-content-split {
  display: grid; grid-template-columns: minmax(280px, 1fr) 2fr;
  gap: 3rem; align-items: start; margin: 2.6rem 0;
  text-align: center;
}

.case-content-heading { text-align: center; }
.case-content-heading h2 {
  font-size: clamp(1.5rem, 2.3vw, 2rem); color: var(--gold);
  line-height: 1.25; margin: 0 0 0 0;
}

.case-content-body {
  text-align: center;
}

.case-content-body p, .case-content-body ul {
  color: var(--mist); font-size: 1.02rem; line-height: 1.8;
  max-width: none;
}

.case-content-body strong { color: var(--ivory); font-weight: 600; }

.case-content-body ul {
  padding-left: 1.3rem; list-style-position: inside;
}

.case-content-body li + li { margin-top: 0.5rem; }

.case-gallery {
  max-width: 1980px; width: 100%; margin: 3rem auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}

.case-gallery figure { margin: 0; }

.case-gallery img {
  width: 100%; height: 400px; object-fit: cover; border-radius: 1rem;
  cursor: pointer; transition: transform 0.3s, opacity 0.3s;
}

.case-gallery img:hover { transform: scale(1.01); opacity: 0.93; }

.case-gallery-link { display: block; }

/* Gallery centering: odd images at end of row */
.case-gallery figure:nth-child(3n+3):last-child:nth-child(3n+1) {
  grid-column: 2 / 3;
}

.related-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem;
  max-width: 1360px; margin: 0 auto;
}

.related-grid .case-card { min-height: 320px; }

@media (max-width: 850px) {
  .case-content-split {
    grid-template-columns: 1fr; gap: 1.2rem;
  }
}

@media (max-width: 700px) {
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery img { height: 300px; }
  .related-grid { grid-template-columns: 1fr; }
}


.case-content-section { max-width: var(--grid-main); margin: 0 auto; padding: 0 var(--pad-x); }
.case-content-split {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 3rem; align-items: start;
  margin: 2.6rem 0;
}
.case-content-split h3 { grid-column: 1; font-size: 1.3rem; color: var(--gold); }
.case-content-split p, .case-content-split ul { grid-column: 2; }
@media (max-width: 850px) {
  .case-content-split { grid-template-columns: 1fr; gap: 1.2rem; }
  .case-content-split h3, .case-content-split p, .case-content-split ul { grid-column: auto; }
}

.case-gallery {
  margin: 3rem auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem;
  max-width: var(--grid-wide); width: 100%;
}
.case-gallery figure { margin: 0; }
.case-gallery img {
  width: 100%; height: auto; border-radius: 1rem; display: block;
  cursor: pointer; transition: transform 0.3s, opacity 0.3s;
}
.case-gallery img:hover { transform: scale(1.01); opacity: 0.93; }
.case-gallery-link { display: block; }
.case-gallery-wide { grid-column: 1 / -1; }
.case-gallery-centered { grid-column: 1 / 2; max-width: 50%; margin: 0 auto; }
@media (max-width: 700px) {
  .case-gallery { grid-template-columns: 1fr; max-width: 100vw; padding: 0 var(--pad-x); }
  .case-gallery-centered { grid-column: auto; max-width: 100%; }
}

/* ---------- case study interactive lightbox (dialog-based) ---------- */
dialog.case-lightbox-dialog {
  position: fixed; inset: 0; z-index: 100; max-width: none; max-height: none;
  width: 100%; height: 100%; background: transparent; border: none; padding: 0; margin: 0;
  overflow: auto; display: flex; align-items: center; justify-content: center;
}
dialog.case-lightbox-dialog::backdrop {
  background: rgba(3, 8, 15, 0.94); backdrop-filter: blur(8px);
}
.case-lightbox-overlay {
  position: absolute; inset: 0; background: transparent;
}
.case-lightbox-container {
  position: relative; z-index: 101; width: 90vw; max-width: calc(100vw - 2rem);
  display: flex; flex-direction: column; align-items: center;
  max-height: 100vh; overflow-y: auto;
}
.case-lightbox-content {
  position: relative; width: 100%; display: flex; flex-direction: column; align-items: center;
  padding: 3rem 1rem;
}
.case-lightbox-image {
  width: 100%; height: auto; border-radius: 1rem; display: block; max-width: 100%;
}
.case-lightbox-caption {
  color: var(--ivory); font-size: 1rem; text-align: center; margin-top: 1.5rem;
  width: 100%; line-height: 1.5;
}
.case-lightbox-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 102;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: rgba(7, 17, 29, 0.85); border: 1px solid rgba(207, 181, 59, 0.4);
  border-radius: 50%; color: var(--gold); cursor: pointer;
  transition: all 0.3s ease; padding: 0; font-size: 0;
}
.case-lightbox-close:hover { background: rgba(207, 181, 59, 0.2); border-color: var(--gold); }
.case-lightbox-close svg { width: 24px; height: 24px; }
.case-lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: rgba(7, 17, 29, 0.8); border: 1px solid rgba(207, 181, 59, 0.3);
  border-radius: 50%; color: var(--gold); cursor: pointer; z-index: 102;
  transition: all 0.3s ease; padding: 0; font-size: 0;
}
.case-lightbox-nav:hover { background: rgba(207, 181, 59, 0.2); transform: translateY(-50%) scale(1.1); }
.case-lightbox-nav svg { width: 24px; height: 24px; }
.case-lightbox-prev { left: 1rem; }
.case-lightbox-next { right: 1rem; }
.case-lightbox-counter {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
  color: var(--beige); font-size: 0.9rem; background: rgba(7, 17, 29, 0.85);
  padding: 0.6rem 1.2rem; border-radius: 2rem; border: 1px solid rgba(207, 181, 59, 0.3);
}
@media (max-width: 640px) {
  .case-lightbox-container { width: 95vw; padding-top: 3.5rem; }
  .case-lightbox-nav { width: 40px; height: 40px; }
  .case-lightbox-nav svg { width: 20px; height: 20px; }
  .case-lightbox-prev { left: 0.5rem; }
  .case-lightbox-next { right: 0.5rem; }
  .case-lightbox-close { width: 40px; height: 40px; }
  .case-lightbox-close svg { width: 20px; height: 20px; }
}

/* ---------- case studies archive: one continuous section, no seam ---------- */
.case-cta-inline { position: relative; overflow: hidden; padding: 12vh 0 2vh; margin-top: 2vh; }

/* ============ FINAL CASE STUDY LAYOUT OVERRIDE — case-article scoped ============ */

:root {
  --gallery-columns: 2;
}

.case-article .case-header,
.case-article .case-hero,
.case-article .case-metadata,
.case-article .case-content-section,
.case-article .post-foot,
.case-article .related-cases {
  width: min(1360px, 100% - var(--pad-x) * 2);
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.case-article .case-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.case-article .case-content-split {
  text-align: center;
}

.case-article .case-content-heading,
.case-article .case-content-body {
  text-align: center;
}

.case-article .case-gallery {
  width: min(1980px, 100% - var(--pad-x) * 2);
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 1.4rem;
  grid-template-columns: unset !important;
}

.case-article .case-gallery figure {
  flex: 0 0 calc((100% / var(--gallery-columns)) - 0.7rem);
  margin: 0;
}

.case-article .case-gallery img {
  width: 100%;
  height: 400px !important;
  object-fit: contain !important;
  border-radius: 1rem;
  display: block;
  cursor: pointer;
  transition: transform 0.3s, opacity 0.3s;
}

.case-article .case-gallery img:hover {
  transform: scale(1.01);
  opacity: 0.93;
}

.case-article .case-gallery-link {
  display: block;
}

.case-article .related-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.case-article .related-grid .case-card {
  min-height: 320px;
  grid-column: unset !important;
}

@media (max-width: 700px) {
  .case-article .case-gallery {
    flex-direction: column;
  }

  .case-article .case-gallery figure {
    flex: 0 0 100% !important;
  }

  .case-article .case-gallery img {
    height: 300px !important;
  }

  .case-article .related-grid {
    grid-template-columns: 1fr !important;
  }
}



/* ===== PATCH B: Case article layout refinements ===== */
.case-article {
  --content-max-width: 1200px;
  --gallery-max-width: 1380px;
  --gallery-gap: 16px;
}

.case-article .case-header,
.case-article .case-metadata,
.case-article .case-content-section {
  max-width: var(--content-max-width);
  margin-inline: auto;
  text-align: left;
  padding-left: clamp(16px, 5vw, 60px);
  padding-right: clamp(16px, 5vw, 60px);
}

.case-metadata {
  display: grid;
  gap: 16px 48px;
  margin-top: 48px;
  margin-bottom: 48px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.case-metadata-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-metadata-label {
  font-weight: 600;
  color: #D4AF37;
  font-size: 0.875rem;
  text-transform: none;
}

.case-metadata-value {
  font-size: 1rem;
  line-height: 1.5;
}

.case-hero {
  max-width: var(--gallery-max-width);
  margin-inline: auto;
  width: 100%;
  padding-left: clamp(16px, 5vw, 60px);
  padding-right: clamp(16px, 5vw, 60px);
}

.case-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.case-gallery {
  max-width: var(--gallery-max-width);
  margin-inline: auto;
  width: 100%;
  padding-left: clamp(16px, 5vw, 60px);
  padding-right: clamp(16px, 5vw, 60px);
  display: grid;
  gap: var(--gallery-gap);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Justified pairs for normal galleries */
.case-gallery[data-gallery] figure {
  aspect-ratio: auto;
}

.case-gallery[data-gallery] img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.case-gallery[data-gallery] figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #666;
}

/* Before/After galleries: full natural height, non-interactive */
.case-before-after {
  max-width: var(--gallery-max-width);
  margin-inline: auto;
  width: 100%;
  padding-left: clamp(16px, 5vw, 60px);
  padding-right: clamp(16px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gallery-gap);
  margin-top: 32px;
  margin-bottom: 32px;
}

.case-before-after img {
  width: 100%;
  height: auto;
  display: block;
}

.case-before-after figcaption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: #666;
}

/* Mobile: stack before/after */
@media (max-width: 768px) {
  .case-before-after {
    grid-template-columns: 1fr;
  }

  .case-metadata {
    grid-template-columns: 1fr;
  }
}

/* Mobile insights grid fix */
@media (max-width: 768px) {
  .insights-grid,
  .archive-grid {
    grid-template-columns: 1fr;
  }

  .insights-grid > * {
    min-width: 0;
  }
}

/* ===== PATCH C: Lightbox long-image handling ===== */
.lightbox-modal.long-image img {
  width: 90vw;
  height: auto;
}

.lightbox-modal.long-image {
  overflow-y: auto;
}

.lightbox-modal:not(.long-image) img {
  max-width: 90vw;
  max-height: 80vh;
}


/* ===== AUTHORITATIVE CASE ARTICLE LAYOUT (v16) ===== */
.case-article {
  --content-max-width: min(1200px, calc(100% - 48px));
  --gallery-max-width: min(1380px, calc(100% - 48px));
  --text-align: left;
}

.case-article .case-header,
.case-article .case-metadata,
.case-article .case-content-section {
  max-width: var(--content-max-width);
  margin-inline: auto;
  text-align: var(--text-align);
}

.case-article .case-content-heading,
.case-article .case-content-body {
  text-align: var(--text-align) !important;
}

.case-hero {
  max-width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
  width: 100%;
}

.case-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* Photo galleries: justified pairs */
.case-gallery {
  max-width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.case-gallery figure {
  flex: 1 1 auto;
  min-width: 250px;
}

.case-gallery img {
  width: 100%;
  height: auto;
  display: block !important;
}

/* Before/After galleries: non-interactive */
.case-before-after {
  max-width: min(1380px, calc(100% - 48px));
  margin-inline: auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
  margin-bottom: 32px;
}

.case-before-after img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .case-before-after {
    grid-template-columns: 1fr;
  }
  
  .insights-grid,
  .archive-grid {
    grid-template-columns: 1fr;
  }
}

/* CTA fixes */
.cta {
  box-shadow: none !important;
}

.interior-page .cta.pre-footer {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-shadow: none !important;
}

/* ===== AUTHORITATIVE CASE ARTICLE LAYOUT OVERRIDES (v16) ===== */
.case-article .case-header,
.case-article .case-metadata,
.case-article .case-content-section,
.case-article .post-foot,
.case-article .related-cases {
  width: min(1200px, calc(100% - 48px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  text-align: left !important;
}

.case-article .case-hero,
.case-article .case-gallery,
.case-article .case-before-after {
  width: min(1380px, calc(100% - 48px)) !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  min-width: 0;
}

.case-article .case-gallery {
  display: block !important;
}

.case-article .case-gallery .gallery-row {
  display: flex !important;
  width: 100%;
  gap: 16px !important;
  align-items: flex-start;
  margin-bottom: 16px;
}

.case-article .case-gallery .gallery-row > figure {
  flex: var(--image-ratio, 1) 1 0 !important;
  min-width: 0;
  margin: 0;
  aspect-ratio: auto !important;
}

.case-article .case-gallery img,
.case-article .case-before-after img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0;
  aspect-ratio: auto !important;
}

.case-article .case-before-after {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.case-article .case-before-after figure {
  min-width: 0;
  margin: 0;
}

.case-article .case-gallery > figure {
  width: 53%;
  max-width: none !important;
  margin-inline: auto !important;
  aspect-ratio: auto !important;
}

@media (max-width: 700px) {
  .case-article .case-gallery .gallery-row {
    flex-direction: column !important;
  }
  .case-article .case-gallery .gallery-row > figure,
  .case-article .case-gallery > figure {
    width: 100% !important;
    flex: auto !important;
  }
  .case-article .case-before-after {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Lightbox sizing */
.case-lightbox-dialog {
  max-width: 90vw;
}

.case-lightbox-image {
  max-width: 90vw;
  max-height: 80vh;
  width: auto;
  height: auto;
}

.case-lightbox-dialog.long-image .case-lightbox-image {
  width: 90vw;
  max-width: 90vw;
  height: auto;
  max-height: none;
}

.case-lightbox-dialog.long-image .case-lightbox-container {
  max-height: 100vh;
  overflow-y: auto;
}

.case-lightbox-container {
  max-width: 90vw;
  max-height: 90vh;
}

/* Case metadata reads as Client: Name / Services: Name on every case. */
.case-article .case-metadata {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  margin-top: 1.75rem !important;
  margin-bottom: 3.5rem !important;
}
.case-article .case-metadata-row {
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.case-article .case-metadata-label { color: var(--gold); }
.case-article .case-metadata-value { color: var(--ivory); }
.case-article .case-gallery-link { display: block; outline-offset: 4px; }
.case-article .case-gallery figcaption,
.case-article .case-before-after figcaption { color: var(--mist); }
.case-article .case-before-after img { cursor: default; }

/* Standard photos fit the viewport; only unusually tall screenshots scroll. */
dialog.case-lightbox-dialog {
  overflow: hidden;
  align-items: center;
  justify-content: center;
}
dialog.case-lightbox-dialog .case-lightbox-container {
  width: auto;
  max-width: 90vw;
  max-height: 90vh;
  overflow: visible;
}
dialog.case-lightbox-dialog .case-lightbox-content {
  width: auto;
  max-width: 90vw;
  padding: 0;
}
dialog.case-lightbox-dialog .case-lightbox-image {
  width: auto;
  max-width: 90vw;
  max-height: 80vh;
  object-fit: contain;
}
dialog.case-lightbox-dialog.long-image .case-lightbox-container {
  width: auto;
  max-height: 90vh;
  overflow-y: auto;
}
dialog.case-lightbox-dialog.long-image .case-lightbox-image {
  width: auto;
  max-width: 90vw;
  max-height: none;
}