/* ============================================================
   VIVID Creative Interiors — Brand stylesheet
   Palette: #46688D denim · #9F8E84 taupe · #E8DFD8 sand · #FFFDF8 cream
   ============================================================ */

:root {
  --denim: #46688d;
  --denim-deep: #35506e;
  --denim-soft: #7d99b8;
  --taupe: #9f8e84;
  --taupe-light: #c4b6ac;
  --sand: #e8dfd8;
  --cream: #fffdf8;
  --white: #ffffff;
  --ink: #2b3a4d;
  --silver: #d8dee6;

  /* Athiya → Playfair Display (high-contrast serif, weight on the right stroke)
     The Wedding Signature → Inter (clean neutral sans) */
  --serif: "Athiya", "Playfair Display", Georgia, serif;
  --sans: "The Wedding Signature", "Inter", "Segoe UI", Helvetica, sans-serif;

  --pad: clamp(1.5rem, 5vw, 6rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* cap the layout viewport to the device width so no stray overflow can widen
     it on phones (which would stretch fixed overlays like the lightbox).
     `clip` — unlike `hidden` — does not create a scroll container, so the
     sticky-pinned hero keeps working. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
  letter-spacing: 0.005em;
  /* `clip`, not `hidden`: clip stops horizontal overflow WITHOUT creating a
     scroll container, so the hero's `position: sticky` pin keeps working.
     `overflow-x: hidden` would silently break the sticky zoom. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Typography ---------- */

h1,
h2,
h3,
h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  margin: 0 0 0.5em;
  letter-spacing: -0.005em;
}

/* Playfair sets wider than Cormorant — sizes trimmed to match the old rhythm */
h1 {
  font-size: clamp(2.5rem, 6.8vw, 5.6rem);
}
h2 {
  font-size: clamp(1.85rem, 3.9vw, 3.1rem);
}
h3 {
  font-size: clamp(1.2rem, 2vw, 1.65rem);
}

p {
  margin: 0 0 1.25em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1.5rem;
  display: block;
}

.eyebrow--light {
  color: var(--sand);
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: #55677d;
  max-width: 46ch;
}

.rule {
  width: 60px;
  height: 1px;
  background: var(--taupe);
  border: 0;
  margin: 2rem 0;
}

.rule--center {
  margin-inline: auto;
}

/* ---------- Layout ---------- */

.section {
  padding: clamp(5rem, 12vw, 10rem) var(--pad);
}

.section--tight {
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.section--denim {
  background: var(--denim);
  color: var(--white);
}
.section--denim .lead {
  color: rgba(255, 255, 255, 0.78);
}

.section--sand {
  background: var(--sand);
}

.wrap {
  max-width: 1240px;
  margin-inline: auto;
}

.wrap--narrow {
  max-width: 780px;
}

.center {
  text-align: center;
}

.grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* ---------- Buttons ---------- */

.btn {
  --btn-fill: var(--denim);
  position: relative;
  isolation: isolate; /* keep the ::before fill behind the label */
  overflow: hidden;
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  padding: 1.15em 2.6em;
  border: 1px solid var(--denim);
  border-radius: 999px; /* fully rounded, no corners */
  color: var(--denim);
  background: transparent;
  cursor: pointer;
  transition: color 0.45s var(--ease), border-color 0.45s var(--ease);
}

/* diagonal fill that sweeps across on hover */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 140%;
  height: 100%;
  z-index: -1;
  background: var(--btn-fill);
  transform: translateX(-120%) skewX(-16deg);
  transition: transform 0.5s var(--ease);
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: translateX(0) skewX(-16deg);
}

.btn:hover {
  color: var(--white);
}

.btn--light {
  --btn-fill: var(--white);
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--white);
}

.btn--light:hover {
  color: var(--denim);
}

.btn--solid {
  --btn-fill: var(--denim-deep);
  background: var(--denim);
  color: var(--white);
}

.btn--solid:hover {
  color: var(--white);
  border-color: var(--denim-deep);
}

/* ---------- Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem var(--pad);
  transition: background 0.6s var(--ease), padding 0.6s var(--ease),
    box-shadow 0.6s var(--ease);
}

.header.is-stuck {
  background: rgba(255, 253, 248, 0.94);
  backdrop-filter: blur(14px);
  padding-block: 0.9rem;
  box-shadow: 0 1px 0 rgba(70, 104, 141, 0.12);
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Horizontal wordmark logo. Two stacked images cross-fade: the white one
   reads over the transparent header on the hero, the denim one takes over
   once the header goes cream on scroll. Both share the same 1.547 ratio, so
   nothing shifts across the swap. */
.header__logo {
  position: relative;
  display: block;
}

.logo-full {
  display: block;
  height: 76px;
  width: auto;
  transition: height 0.55s var(--ease), opacity 0.6s var(--ease);
}

.header.is-stuck .logo-full {
  height: 44px;
}

.logo-full--dark {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.header.is-stuck .logo-full--light {
  opacity: 0;
}

.header.is-stuck .logo-full--dark {
  opacity: 1;
}

@media (max-width: 600px) {
  .logo-full {
    height: 58px;
  }
  .header.is-stuck .logo-full {
    height: 38px;
  }
}

/* Nav */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.5vw, 2.5rem);
}

.nav a {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding-block: 0.4em;
  transition: color 0.6s var(--ease);
}

.header.is-stuck .nav a {
  color: var(--denim);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Burger */

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}

.burger span {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--white);
  transition: transform 0.45s var(--ease), opacity 0.3s, background 0.6s;
}

.header.is-stuck .burger span,
body.nav-open .burger span {
  background: var(--denim);
}

body.nav-open .burger span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
body.nav-open .burger span:nth-child(2) {
  opacity: 0;
}
body.nav-open .burger span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Hero + scroll effect ---------- */

/* ----------------------------------------------------------
   Hero scene: a room photograph in the far plane, furniture
   cut out in the near plane, copy between them. Scrolling
   pushes the camera in — the near plane scales faster than
   the far plane, which is what sells the depth.
   Drop the two files in and they appear:
     assets/img/hero-room.jpg       (background room)
     assets/img/hero-furniture.png  (cut-out, transparent)
   ---------------------------------------------------------- */

/* The pin wrapper is tall so the sticky hero can hold while the zoom plays
   out on scroll — a dependency-free replacement for GSAP's pin. */
.hero-pin {
  position: relative;
  /* taller wrapper = more scroll distance for the same clip = slower scrubbing.
     Trimmed 20% (was 560vh) to match the shortened hero. */
  height: 448vh;
}

.hero {
  --img-room: url("../img/hero-room.jpg");
  --img-furniture: url("../img/hero-furniture.png");

  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: var(--denim-deep);
}

@media (max-width: 768px) {
  .hero-pin {
    height: 256vh; /* trimmed 20% (was 320vh) */
  }
}

.hero__scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* single-cell grid: plate and copy stack, and the oversized plate
     overflows centred — no transform needed to centre it */
  display: grid;
  place-items: center;
}

.hero__plate {
  grid-area: 1 / 1;
  position: relative;
  width: 100%;
  height: 100%;
}

/* the hero video — scroll controls its playback (see hero.js) */
.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: linear-gradient(160deg, #7d99b8 0%, #46688d 45%, #2b3a4d 100%);
}

/* legibility scrim over the video */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(18, 28, 40, 0.5) 0%,
    rgba(18, 28, 40, 0.18) 26%,
    rgba(18, 28, 40, 0.14) 52%,
    rgba(18, 28, 40, 0.5) 100%
  );
}

.hero__copy {
  grid-area: 1 / 1;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: var(--white);
  /* top pad clears the fixed header; bottom pad lifts the copy off the
     furniture in the near plane */
  padding: 8rem var(--pad) 14vh;
  /* carries the copy over the bright centre of the room without needing
     to dim the photograph itself */
  text-shadow: 0 2px 34px rgba(18, 28, 40, 0.55), 0 1px 4px rgba(18, 28, 40, 0.4);
  will-change: transform, opacity;
}

.hero__mark {
  width: clamp(92px, 10vw, 138px);
  margin: 0 auto 1.75rem;
}

.hero h1 {
  margin-bottom: 0.35em;
}

.hero h1 em {
  font-style: italic;
  color: var(--sand);
}

.hero__sub {
  font-size: 0.72rem;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 2.75rem;
}

/* scroll cue */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.hero__cue i {
  display: block;
  width: 1px;
  height: 56px;
  background: rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}

.hero__cue i::after {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 40%;
  background: var(--white);
  animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(250%);
  }
}

/* page hero (interior pages) */

.pagehero {
  position: relative;
  min-height: 58svh;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--white);
  background: var(--denim);
  overflow: hidden;
  padding: 9rem var(--pad) 5rem;
}

/* Same rule as .ph — the photograph is set inline on background-image. */
.pagehero__media {
  position: absolute;
  inset: -8%;
  background-color: var(--denim);
  background-image: linear-gradient(160deg, #7d99b8 0%, #46688d 50%, #35506e 100%);
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.pagehero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(53, 80, 110, 0.6), rgba(43, 58, 77, 0.75));
}

.pagehero__inner {
  position: relative;
  z-index: 2;
}

/* ---------- Hero entrance + silver underline ----------
   The eyebrow and title rise in on load, and a silver rule sweeps out from
   the centre beneath the heading — giving every hero a bit of motion. */
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-underline {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: clamp(90px, 22vw, 230px);
    opacity: 1;
  }
}

.pagehero__inner .eyebrow {
  animation: hero-rise 0.9s var(--ease) 0.05s both;
}

.pagehero__inner h1,
.hero__copy h1 {
  position: relative;
}

.pagehero__inner h1 {
  animation: hero-rise 1s var(--ease) 0.18s both;
}

/* the growing silver line */
.pagehero__inner h1::after,
.hero__copy h1::after {
  content: "";
  display: block;
  height: 2px;
  width: 0;
  margin: 1.1rem auto 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--silver) 22%,
    #ffffff 50%,
    var(--silver) 78%,
    transparent
  );
  box-shadow: 0 0 12px rgba(216, 222, 230, 0.55);
  animation: hero-underline 1.2s var(--ease) 0.6s both;
}

/* home hero: the copy already fades out on scroll via JS, so just draw the
   line a touch later once the title has settled */
.hero__copy h1::after {
  animation-delay: 0.9s;
}

/* per-letter colour wash (interior heroes only) — colour only, no motion */
.h1-split {
  cursor: default;
}

.h1-split .char {
  display: inline-block;
  transition: color 0.45s var(--ease), opacity 0.45s var(--ease),
    text-shadow 0.45s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .pagehero__inner .eyebrow,
  .pagehero__inner h1,
  .pagehero__inner h1::after,
  .hero__copy h1::after {
    animation: none;
  }
  .pagehero__inner h1::after,
  .hero__copy h1::after {
    width: clamp(90px, 22vw, 230px);
    opacity: 1;
  }
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] {
  transition-delay: 0.12s;
}
.reveal[data-delay="2"] {
  transition-delay: 0.24s;
}
.reveal[data-delay="3"] {
  transition-delay: 0.36s;
}
.reveal[data-delay="4"] {
  transition-delay: 0.48s;
}

/* ---------- Cards / services ---------- */

.card {
  background: var(--white);
  padding: clamp(2rem, 3.5vw, 3rem);
  border: 1px solid rgba(159, 142, 132, 0.22);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -30px rgba(43, 58, 77, 0.4);
}

.card__num {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-style: italic;
  color: var(--taupe-light);
  line-height: 1;
  display: block;
  margin-bottom: 1rem;
}

.card p {
  font-size: 0.94rem;
  color: #5d6e82;
  margin-bottom: 0;
}

/* ---------- Service image cards (landing style) ----------
   A photo card with the copy over a gradient at the foot; the caption morphs
   to a cream panel on hover and the image gently zooms. */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* the five disciplines, one row */
  gap: 1rem;
}

@media (max-width: 1024px) {
  .svc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 680px) {
  .svc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 440px) {
  .svc-grid {
    grid-template-columns: 1fr;
  }
}

.svc-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink);
}

.svc-card__img {
  position: relative;
  aspect-ratio: 3 / 4;
}

.svc-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.3s var(--ease);
}

.svc-card:hover .svc-card__img img {
  transform: scale(1.08);
}

.svc-card__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 58, 77, 0.05) 0%, rgba(43, 58, 77, 0.8) 80%);
}

/* corner arrow — self-contained so it never inherits the admin .icon-btn */
.svc-card__arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
  transform: rotate(-45deg);
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease);
}

.svc-card__arrow svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.svc-card:hover .svc-card__arrow {
  background: var(--white);
  border-color: var(--white);
  color: var(--denim);
}

.svc-card__content {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  margin: 18px;
  padding: 18px 18px 8px;
  border-radius: 16px;
  transition: background 0.45s var(--ease), padding 0.45s var(--ease);
}

.svc-card__content h3 {
  color: var(--white);
  margin-bottom: 0.4rem;
  transition: color 0.45s var(--ease);
}

.svc-card__content p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  transition: color 0.45s var(--ease);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.svc-card:hover .svc-card__content {
  background: var(--cream);
  padding: 18px;
}

.svc-card:hover .svc-card__content h3 {
  color: var(--ink);
}

.svc-card:hover .svc-card__content p {
  color: #56687e;
}

/* stat row */

.stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(2rem, 4vw, 4.5rem);
  text-align: center;
}

/* ============================================================
   Animated stat icons — CSS-only "loader" motifs (dots, orbits)
   ============================================================ */
.stat-loader {
  --block-size: clamp(150px, 15vw, 260px);
  --loader-size: calc(var(--block-size) / 3);
  --loader-size-half: calc(var(--loader-size) / 2);
  --loader-size-half-neg: calc(var(--loader-size-half) * -1);
  --light-color: rgba(255, 255, 255, 0.35);
  --dot-size: clamp(6px, 0.7vw, 10px);
  --dot-size-half: calc(var(--dot-size) / 2);
  --dot-size-half-neg: calc(var(--dot-size-half) * -1);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--loader-size);
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.5rem;
  color: var(--sand);
}
.section:not(.section--denim) .stat-loader {
  color: var(--denim);
  --light-color: rgba(70, 104, 141, 0.25);
}
.stat-loader::before,
.stat-loader::after {
  content: "";
  position: absolute;
}

/* keep the loaders still until the bar scrolls into view */
.stat-loader,
.stat-loader::before,
.stat-loader::after {
  animation-play-state: paused;
}
.has-statfx.is-live .stat-loader,
.has-statfx.is-live .stat-loader::before,
.has-statfx.is-live .stat-loader::after {
  animation-play-state: running;
}

/* loader 1 — dots chasing around a square (rating) */
.stat-loader--1 {
  --anim-duration: 1.1s;
  --loader-1-dist: calc(var(--loader-size) - var(--dot-size-half) + 1px);
  border: 1px solid var(--light-color);
}
.stat-loader--1::before,
.stat-loader--1::after {
  width: var(--dot-size);
  aspect-ratio: 1 / 1;
  background: currentColor;
  border-radius: 50%;
  top: var(--dot-size-half-neg);
  left: var(--dot-size-half-neg);
  animation: sload-1 var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}
.stat-loader--1::after { animation-delay: calc(var(--anim-duration) / 4 * -1); }
@keyframes sload-1 {
  0%, 100% { transform: none; }
  25% { transform: translateX(var(--loader-1-dist)); }
  50% { transform: translateX(var(--loader-1-dist)) translateY(var(--loader-1-dist)); }
  75% { transform: translateX(0) translateY(var(--loader-1-dist)); }
}

/* loader 3 — twin dots orbiting a slowly spinning ring (disciplines) */
.stat-loader--3 {
  --anim-duration: 1.2s;
  border: 1px solid var(--light-color);
  border-radius: 50%;
  animation: sload-spin calc(var(--anim-duration) * 3) linear infinite;
}
.stat-loader--3::before,
.stat-loader--3::after {
  width: var(--dot-size);
  aspect-ratio: 1 / 1;
  background: currentColor;
  border-radius: 50%;
  top: var(--dot-size-half-neg);
  left: calc(50% - var(--dot-size-half));
  transform-origin: center calc(var(--loader-size-half) + var(--dot-size-half) - 1px);
  animation: sload-spin var(--anim-duration) cubic-bezier(0.27, 0.08, 0.26, 0.7) infinite;
}
.stat-loader--3::after { animation-delay: calc(var(--anim-duration) / 3 * -1); }

/* loader 7 — perpendicular dots weaving inside a spinning ring (countries) */
.stat-loader--7 {
  --anim-duration: 0.85s;
  border: 1px solid var(--light-color);
  border-radius: 50%;
  animation: sload-spin calc(var(--anim-duration) * 2) linear infinite;
}
.stat-loader--7::before,
.stat-loader--7::after {
  width: var(--dot-size);
  aspect-ratio: 1 / 1;
  background: currentColor;
  border-radius: 50%;
  top: calc(50% - var(--dot-size-half));
  left: calc(50% - var(--dot-size-half));
  animation: sload-7-1 var(--anim-duration) cubic-bezier(0.32, 0.41, 0.3, 1.87) infinite;
}
.stat-loader--7::after {
  animation-name: sload-7-2;
  animation-delay: calc(var(--anim-duration) / 3 * -1);
}
@keyframes sload-7-1 {
  0%, 100% { transform: translateX(var(--loader-size-half-neg)); }
  55% { transform: translateX(var(--loader-size-half)); }
}
@keyframes sload-7-2 {
  0%, 100% { transform: translateY(var(--loader-size-half-neg)); }
  55% { transform: translateY(var(--loader-size-half)); }
}

/* loader 8 — a tilted 3D dashed orbit, globe-like (languages) */
.stat-loader--8 {
  --anim-duration: 0.85s;
  border: 1px dashed var(--light-color);
  border-radius: 50%;
  perspective: 120px;
  transform-style: preserve-3d;
  transform: rotateX(45deg) rotateY(15deg);
}
.stat-loader--8::before,
.stat-loader--8::after {
  animation: sload-8 var(--anim-duration) cubic-bezier(0.39, 0.24, 0, 0.99) infinite;
}
.stat-loader--8::before {
  --z-dist: 13px;
  width: var(--dot-size);
  aspect-ratio: 1 / 1;
  background: currentColor;
  border-radius: 50%;
  top: calc(50% - var(--dot-size-half));
  left: calc(50% - var(--dot-size-half));
  animation-delay: calc(var(--anim-duration) / 4 * -1);
}
.stat-loader--8::after {
  --z-dist: 7px;
  width: 62%;
  aspect-ratio: 1 / 1;
  top: 19%;
  left: 19%;
  border-radius: 50%;
  border: 1px solid currentColor;
}
@keyframes sload-8 {
  0%, 100% { transform: translateZ(calc(var(--z-dist) * -1)) scale(0.6); }
  55% { transform: translateZ(var(--z-dist)); }
}

@keyframes sload-spin { 100% { transform: rotate(1turn); } }

/* ---- themed SVG stat icons (star / roller / americas) ---- */
.stat-svg {
  display: block;
  width: clamp(56px, 5.5vw, 96px);
  height: clamp(56px, 5.5vw, 96px);
  margin: 0 auto 1.5rem;
  color: var(--sand);
}
.section:not(.section--denim) .stat-svg {
  color: var(--denim);
}
.stat-svg svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* animated SVGs (brush + globe) loaded as images and whitened via filter so
   they read as light on the denim bar */
.stat-anim {
  display: block;
  margin: 0 auto 1.1rem;
}
.stat-anim--globe {
  width: clamp(72px, 7vw, 128px);
  height: clamp(72px, 7vw, 128px);
}
.stat-anim--architect {
  width: clamp(70px, 6.8vw, 122px);
  height: clamp(70px, 6.8vw, 122px);
}
.stat-anim img {
  width: 100%;
  height: 100%;
  display: block;
}
.stat-anim--globe img {
  filter: invert(1) brightness(1.15);
}
.stat-anim--architect img {
  filter: brightness(0) invert(1); /* solid white */
}
.section:not(.section--denim) .stat-anim img {
  filter: none;
}
.roller-paint,
.amer-pin {
  transform-box: fill-box;
  transform-origin: center;
}

/* star — slow spin + a soft twinkle glow */
.has-statfx.is-live .stat-svg--star {
  animation: sv-spin 11s linear infinite, sv-glow 2.6s ease-in-out infinite;
}
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(232, 223, 216, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(232, 223, 216, 0.75)); }
}

/* paint roller — rocks back and forth while the fresh paint pulses */
.has-statfx.is-live .stat-svg--roller {
  animation: sv-roll 1.7s ease-in-out infinite;
}
.has-statfx.is-live .stat-svg--roller .roller-paint {
  animation: sv-paint 1.7s ease-in-out infinite;
}
@keyframes sv-roll {
  0%, 100% { transform: translateX(-2px) rotate(-4deg); }
  50% { transform: translateX(2px) rotate(4deg); }
}
@keyframes sv-paint {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* americas — gentle bob with a pulsing location pin */
.has-statfx.is-live .stat-svg--americas {
  animation: sv-bob 3.4s ease-in-out infinite;
}
.has-statfx.is-live .stat-svg--americas .amer-pin {
  animation: sv-pin 1.7s ease-in-out infinite;
}
@keyframes sv-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-3px) rotate(2deg); }
}
@keyframes sv-pin {
  0%, 100% { transform: scale(0.55); opacity: 0.35; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* --- language stat: EN then ES slide in --- */
.stat b .ln,
.stat b .dot {
  display: inline-block;
}
.has-statfx.is-live .stat b .ln {
  animation: ln-in 0.55s var(--ease) both;
}
.has-statfx.is-live .stat b .dot {
  animation: ln-in 0.4s var(--ease) 0.18s both;
}
.has-statfx.is-live .stat b .ln2 {
  animation-delay: 0.34s;
}
@keyframes ln-in {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: none; }
}

/* --- a white sweep slides to the right, revealing each stat as it passes --- */
.has-statfx {
  position: relative;
  overflow: hidden;
}

/* the white curtain that wipes across */
.stats__sweep {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  transform: translateX(-16%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 15%, #fff 100%);
  box-shadow: -14px 0 30px -6px rgba(255, 255, 255, 0.55);
}
.has-statfx.is-live .stats__sweep {
  animation: stat-wipe 1.15s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes stat-wipe {
  0% { transform: translateX(-16%); }
  100% { transform: translateX(104%); }
}

/* stats stay hidden until the sweep reaches them, then pop in left → right */
.has-statfx .stat {
  opacity: 0;
  transform: translateY(14px);
}
.has-statfx.is-live .stat {
  animation: stat-show 0.5s var(--ease) forwards;
}
.has-statfx.is-live .stat:nth-child(1) { animation-delay: 0.18s; }
.has-statfx.is-live .stat:nth-child(2) { animation-delay: 0.42s; }
.has-statfx.is-live .stat:nth-child(3) { animation-delay: 0.64s; }
.has-statfx.is-live .stat:nth-child(4) { animation-delay: 0.84s; }
@keyframes stat-show {
  to { opacity: 1; transform: none; }
}

.stat b {
  display: block;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3rem, 5.2vw, 6.5rem);
  line-height: 1;
  color: var(--denim);
}

.section--denim .stat b {
  color: var(--sand);
}

.stat span {
  font-size: clamp(0.62rem, 0.85vw, 0.85rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
}

.section--denim .stat span {
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Editorial about block ----------
   Narrative on the left, a hairline-divided capability list on the right. */

.about {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.about__lede h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 1.04;
  margin-bottom: 0.6em;
}

.about__lede h2 em {
  display: block;
  font-style: italic;
  color: var(--denim);
}

.about__lede p {
  max-width: 46ch;
  color: #50627a;
}

/* compact studio facts under the narrative */
.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.75rem;
  margin: 2.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(159, 142, 132, 0.35);
}

.meta dt {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.6rem;
}

.meta dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--denim);
}

.pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.5;
  color: var(--denim);
  margin: 2.75rem 0;
  padding: 2rem 0;
  border-top: 1px solid rgba(159, 142, 132, 0.35);
  border-bottom: 1px solid rgba(159, 142, 132, 0.35);
}

.textlink {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--denim);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--taupe);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.textlink:hover {
  color: var(--taupe);
  border-color: var(--denim);
}

/* right-hand capability list */
.about__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 clamp(0rem, 3vw, 3rem);
  border-left: 1px solid rgba(159, 142, 132, 0.3);
}

.about__list li {
  padding: clamp(1.5rem, 2.6vw, 2.25rem) 0;
  border-bottom: 1px solid rgba(159, 142, 132, 0.28);
}

.about__list li:first-child {
  padding-top: 0.35rem;
}

.about__list li:last-child {
  border-bottom: 0;
}

.about__list .icon {
  display: block;
  width: 30px;
  height: 30px;
  margin-bottom: 1.15rem;
  fill: none;
  stroke: var(--taupe);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.5s var(--ease), transform 0.5s var(--ease);
}

.about__list li:hover .icon {
  stroke: var(--denim);
  transform: translateY(-2px);
}

.about__list h3 {
  margin-bottom: 0.5rem;
}

.about__list p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: #62728a;
  max-width: 42ch;
}

@media (max-width: 860px) {
  .about {
    grid-template-columns: 1fr;
  }
  .about__list {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(159, 142, 132, 0.3);
    padding-top: 1rem;
  }
}

/* ---------- Service rows ----------
   One image + one block of copy per service, alternating sides so a long
   list keeps a rhythm instead of reading as a column of cards. */

.svc {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  border-bottom: 1px solid rgba(159, 142, 132, 0.3);
}

.svc:first-child {
  padding-top: 0;
}

.svc:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* mirror every second row */
.svc:nth-child(even) .svc__media {
  order: 2;
}

.svc__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}

.svc__media .ph {
  height: 100%;
}

.svc:hover .svc__media .ph {
  transform: scale(1.04);
}

/* Line-drawn service icons. Each shape carries data-draw; main.js measures its
   path length into --len so the dash animation lands exactly on zero.
   Default state is DRAWN — if the script never runs the icons still show. */
.svc__icon {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: 1.35rem;
  fill: none;
  stroke: var(--taupe);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.5s var(--ease), transform 0.5s var(--ease);
}

.svc:hover .svc__icon {
  stroke: var(--denim);
  transform: translateY(-4px);
}

.svc__icon [data-draw] {
  stroke-dasharray: var(--len, 300);
  stroke-dashoffset: 0;
}

.svc__icon.is-drawing [data-draw] {
  animation: icon-draw 1.05s var(--ease) backwards;
}

.svc__icon.is-drawing [data-draw]:nth-child(2) {
  animation-delay: 0.1s;
}
.svc__icon.is-drawing [data-draw]:nth-child(3) {
  animation-delay: 0.2s;
}
.svc__icon.is-drawing [data-draw]:nth-child(4) {
  animation-delay: 0.3s;
}
.svc__icon.is-drawing [data-draw]:nth-child(5) {
  animation-delay: 0.4s;
}

@keyframes icon-draw {
  from {
    stroke-dashoffset: var(--len, 300);
  }
  to {
    stroke-dashoffset: 0;
  }
}

.svc h3 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  margin-bottom: 0.7rem;
}

.svc p {
  color: #56687e;
  max-width: 52ch;
  margin-bottom: 1.75rem;
}

@media (max-width: 800px) {
  .svc {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .svc:nth-child(even) .svc__media {
    order: 0;
  }
  .svc:first-child {
    padding-top: 0;
  }
}

/* ---------- Figures / portfolio ---------- */

.figure {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  border-radius: 18px;
  /* the gallery renders these as <button>; strip the default button chrome
     so no grey/black outline frames the card */
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
}

.figure:focus-visible {
  outline: 2px solid var(--denim);
  outline-offset: 3px;
}

/* landing-style corner arrow cue */
.figure::after {
  content: "";
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: center / 15px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  transform: rotate(-45deg);
  opacity: 0;
  transition: opacity 0.5s var(--ease), background-color 0.4s var(--ease);
}

.figure:hover::after {
  opacity: 1;
}

/* .ph = photo slot. Override `background-image` inline with the photograph.
   NOTE: set the image directly, never through a custom property — a relative
   url() inside a custom property resolves against THIS stylesheet's folder
   (assets/css/), not the page, so "assets/img/x.jpg" would 404. */
.ph {
  width: 100%;
  height: 100%;
  background-color: var(--sand);
  background-image: linear-gradient(
    145deg,
    var(--sand) 0%,
    var(--taupe-light) 55%,
    var(--denim-soft) 100%
  );
  background-size: cover;
  background-position: center;
  transition: transform 1.4s var(--ease);
}

.ph--denim {
  background-image: linear-gradient(
    145deg,
    var(--denim-soft) 0%,
    var(--denim) 60%,
    var(--denim-deep) 100%
  );
}

.figure:hover .ph {
  transform: scale(1.06);
}

/* caption stays visible over a gradient, like the landing cards */
.figure__cap {
  position: absolute;
  inset: auto 0 0;
  padding: 2.75rem 1.5rem 1.35rem;
  background: linear-gradient(transparent, rgba(43, 58, 77, 0.05) 8%, rgba(43, 58, 77, 0.85) 82%);
  color: var(--white);
  transition: transform 0.6s var(--ease);
}

.figure:hover .figure__cap {
  transform: translateY(-4px);
}

.figure__cap h3 {
  margin: 0 0 0.15em;
  font-size: 1.35rem;
}

.figure__cap span {
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
}

/* masonry-ish portfolio grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.gallery .figure {
  aspect-ratio: 4 / 5;
}

.gallery .figure--wide {
  aspect-ratio: 4 / 3;
  grid-column: span 2;
}

@media (max-width: 720px) {
  .gallery .figure--wide {
    grid-column: span 1;
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Portfolio: featured highlights + carousel ---------- */

.pf-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.pf-featured .figure {
  aspect-ratio: 16 / 11;
}

@media (max-width: 720px) {
  .pf-featured {
    grid-template-columns: 1fr;
  }
}

/* horizontal scroll-snap carousel — dependency-free, arrows scroll the track */
.pf-carousel {
  position: relative;
}

.pf-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px clamp(1.5rem, 5vw, 6rem);
}

.pf-track::-webkit-scrollbar {
  display: none;
}

.pf-track .figure {
  flex: 0 0 clamp(240px, 30vw, 340px);
  scroll-snap-align: start;
  /* caption now sits BELOW the image, in normal flow */
  display: flex;
  flex-direction: column;
  background: transparent;
  overflow: visible;
}

.pf-track .figure--wide {
  flex-basis: clamp(320px, 46vw, 540px);
}

/* the image gets its own rounded, clipped frame */
.figure__img {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sand);
}
.pf-track .figure--wide .figure__img {
  aspect-ratio: 4 / 3;
}
.figure__img .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* caption below the image, dark text on the section background */
.pf-track .figure__cap {
  position: static;
  inset: auto;
  background: none;
  color: var(--ink);
  padding: 0.95rem 0.25rem 0;
}
.pf-track .figure:hover .figure__cap {
  transform: none;
}
.pf-track .figure__cap h3 {
  color: var(--ink);
  font-size: 1.2rem;
}
.pf-track .figure__cap span {
  color: var(--taupe);
}

.pf-ctrl {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: 1240px;
  margin: 1.75rem auto 0;
  padding-inline: clamp(1.5rem, 5vw, 6rem);
}

.pf-arrow {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(159, 142, 132, 0.5);
  background: transparent;
  color: var(--denim);
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.pf-arrow:hover {
  background: var(--denim);
  border-color: var(--denim);
  color: var(--white);
}

.pf-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pf-progress {
  flex: 1;
  height: 2px;
  background: rgba(159, 142, 132, 0.28);
  overflow: hidden;
}

.pf-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--denim);
  transform-origin: left;
  transform: scaleX(0.12);
  transition: transform 0.2s var(--ease);
}

/* ---------- Split feature ---------- */

.split__media {
  aspect-ratio: 4 / 5;
  background: var(--sand);
  overflow: hidden;
  position: relative;
}

.split__media .ph {
  height: 100%;
}

/* ---------- Parallax divider bands ---------- */

.divider {
  position: relative;
  min-height: clamp(320px, 46vh, 520px);
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  color: var(--white);
  padding: clamp(3rem, 8vw, 6rem) var(--pad);
  background: var(--denim-deep);
}

.divider__media {
  position: absolute;
  inset: -14% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

.divider__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 30, 43, 0.55),
    rgba(20, 30, 43, 0.42) 45%,
    rgba(20, 30, 43, 0.62)
  );
}

.divider__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.divider blockquote,
.divider p.divider__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3vw, 2.35rem);
  line-height: 1.4;
  margin: 0;
  text-shadow: 0 2px 26px rgba(18, 28, 40, 0.5);
}

.divider cite {
  display: block;
  margin-top: 1.75rem;
  font-style: normal;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sand);
}

/* ---------- Client avatars ---------- */

.avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--denim);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--white);
  letter-spacing: 0.04em;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--lg {
  width: 76px;
  height: 76px;
  font-size: 1.5rem;
  margin: 0 auto 1.5rem;
}

.who {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.35rem;
}

.who cite {
  margin: 0;
}

/* ---------- Testimonials ---------- */

.quote {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.quote blockquote {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-style: italic;
  line-height: 1.45;
}

.quote cite {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--taupe);
}

.section--denim .quote cite {
  color: var(--sand);
}

.stars {
  color: var(--taupe-light);
  letter-spacing: 0.35em;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.review-card {
  background: var(--white);
  border: 1px solid rgba(159, 142, 132, 0.22);
  padding: clamp(2rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-card p {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink);
  flex: 1;
}

.review-card cite {
  font-style: normal;
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ============================================================
   Reviews — two-row auto-scrolling marquee
   ============================================================ */

.rev-hint {
  margin-top: 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}

.rev-marquee {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* full-bleed: break out of the section's horizontal padding */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  /* fade the edges so cards slide in and out softly */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.rev-row {
  overflow: hidden;
}

.rev-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding-block: 0.5rem;
  will-change: transform;
  animation: rev-scroll 60s linear infinite;
}

.rev-row--a .rev-track {
  animation-duration: 66s;
}

.rev-row--b .rev-track {
  animation-duration: 82s;
  animation-direction: reverse;
}

.rev-dup {
  display: flex;
  gap: 1.5rem;
}

/* pause the row the pointer is over, so there's time to read */
.rev-row:hover .rev-track {
  animation-play-state: paused;
}

@keyframes rev-scroll {
  to {
    transform: translateX(calc(-50% - 0.75rem));
  }
}

.rev-card {
  flex: 0 0 auto;
  width: 340px;
  max-width: 84vw;
  background: var(--white);
  border: 1px solid rgba(159, 142, 132, 0.22);
  border-radius: 20px;
  padding: 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 18px 40px -28px rgba(43, 58, 77, 0.4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.rev-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 55px -30px rgba(43, 58, 77, 0.5);
}

.rev-card .stars {
  margin-bottom: 0.25rem;
}

.rev-card__text {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.62;
  color: var(--ink);
  margin: 0;
  /* clamp long reviews until "Read more" expands them */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rev-card.is-expanded .rev-card__text {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.rev-card__more {
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--denim);
  transition: color 0.3s var(--ease);
}

.rev-card__more:hover {
  color: var(--denim-deep);
}

.rev-card .who {
  margin-top: auto;
  padding-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .rev-track {
    animation: none;
  }
  .rev-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .rev-row {
    overflow-x: auto;
  }
}

.rev-card__loc {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--denim-soft);
}

/* ---------- Reviews filter bar ---------- */

.rev-filterbar {
  margin-inline: auto;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.rev-filterbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(159, 142, 132, 0.4);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.rev-filterbtn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.rev-filterbtn:hover,
.rev-filterbtn.is-open {
  background: var(--denim);
  border-color: var(--denim);
  color: var(--white);
}

.rev-filters {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: min(760px, 92vw);
  padding: 1.75rem;
  border: 1px solid rgba(159, 142, 132, 0.28);
  border-radius: 18px;
  background: var(--cream);
  animation: hero-rise 0.5s var(--ease) both;
}

.rev-filters[hidden] {
  display: none;
}

.rev-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.rev-filter-label {
  flex: 0 0 auto;
  min-width: 74px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}

.rev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rev-chip {
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(159, 142, 132, 0.4);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.rev-chip:hover {
  border-color: var(--denim-soft);
  transform: translateY(-1px);
}

.rev-chip.is-active {
  background: var(--denim);
  border-color: var(--denim);
  color: var(--white);
}

.rev-count {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}

.rev-count:empty {
  display: none;
}

/* ---------- Reviews filtered results (static grid) ---------- */

.rev-filtered {
  display: block;
}

.rev-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  width: min(1100px, 92vw);
  margin-inline: auto;
}

.rev-results .rev-card {
  width: auto;
  max-width: none;
}

.rev-empty {
  text-align: center;
  color: var(--taupe);
  font-style: italic;
  padding: 2rem 0;
}

/* ---------- Forms ---------- */

/* landing-style form panel — a soft sand card holding cream fields */
.form-panel {
  position: relative;
  background: var(--sand);
  border-radius: 24px;
  padding: clamp(1.75rem, 4vw, 3.25rem);
}

.form {
  display: grid;
  gap: 1.25rem;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
}

.field {
  position: relative;
}

.field label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.6rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 1.05rem 1.25rem;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* filled selects: drop the native chrome and draw a soft chevron */
.field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346688d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 16px;
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--denim);
  box-shadow: 0 0 0 3px rgba(70, 104, 141, 0.12);
}

.field input::placeholder,
.field textarea::placeholder {
  color: #a9b2bc;
}

/* ---------- Custom dropdown (replaces the native option list) ---------- */

.cs {
  position: relative;
}

/* keep the real <select> for submission + JS, but out of sight */
.cs__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  opacity: 0;
  pointer-events: none;
}

.cs__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--ink);
  text-align: left;
  background: var(--cream);
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 1.05rem 1.25rem;
  cursor: pointer;
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.cs.is-open .cs__trigger,
.cs__trigger:focus-visible {
  outline: none;
  border-color: var(--denim);
  box-shadow: 0 0 0 3px rgba(70, 104, 141, 0.12);
}

.cs__chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--denim);
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: transform 0.35s var(--ease);
}

.cs.is-open .cs__chev {
  transform: rotate(180deg);
}

.cs__list {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 40;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--white);
  border: 1px solid rgba(159, 142, 132, 0.25);
  border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(43, 58, 77, 0.4);
  animation: cs-pop 0.22s var(--ease);
}

@keyframes cs-pop {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.cs__opt {
  padding: 0.72rem 0.9rem;
  border-radius: 11px;
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.cs__opt.is-active {
  background: var(--sand);
}

.cs__opt.is-sel {
  background: var(--denim);
  color: var(--white);
}

.cs__opt.is-sel.is-active {
  background: var(--denim-deep);
}

/* tidy scrollbar inside the list */
.cs__list::-webkit-scrollbar {
  width: 10px;
}
.cs__list::-webkit-scrollbar-thumb {
  background: rgba(159, 142, 132, 0.4);
  border-radius: 999px;
  border: 3px solid var(--white);
}

/* field with a trailing action button (the GPS lookup) */
.field__row {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
}

.field__row input {
  flex: 1;
  min-width: 0;
}

.geo-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--denim);
  background: var(--cream);
  border: 1px solid rgba(70, 104, 141, 0.35);
  border-radius: 16px;
  padding: 0.72rem 1.1rem;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease);
}

.geo-btn:hover:not(:disabled) {
  background: var(--denim);
  border-color: var(--denim);
  color: var(--white);
}

.geo-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.geo-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.field__hint {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--taupe);
}

.field__hint b {
  font-weight: 400;
  color: var(--denim);
}

/* ---------- Contact info list ---------- */

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.75rem;
}

.contact-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-list svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 0.35rem;
  stroke: var(--taupe);
  fill: none;
  stroke-width: 1.2;
}

.contact-list b {
  display: block;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.25rem;
}

/* ============================================================
   Project lightbox — coverflow carousel (Swiper)
   ============================================================ */

.lb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.lb.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lb__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 43, 0.94);
  backdrop-filter: blur(8px);
}

/* nested-rounded shell */
.lb__shell {
  position: relative;
  width: min(1000px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px;
  transform: translateY(18px) scale(0.985);
  transition: transform 0.45s var(--ease);
}

@media (min-width: 768px) {
  .lb__shell {
    border-radius: 44px 44px 24px 24px;
  }
}

.lb.is-open .lb__shell {
  transform: none;
}

.lb__panel {
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem 1rem 1rem;
  overflow: hidden; /* keep the coverflow slides from bleeding past the panel */
}

@media (min-width: 768px) {
  .lb__panel {
    border-radius: 40px 40px 20px 20px;
    padding: 2rem 1.5rem 1.5rem;
  }
}

.lb__badge {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--sand);
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.lb__badge svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

.lb__head {
  padding: 2.75rem 0.5rem 1.5rem;
  color: var(--white);
}

.lb__head h3 {
  color: var(--white);
  margin: 0 0 0.25em;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.lb__head p {
  margin: 0;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--taupe-light);
}

/* self-contained circular close (does not borrow the admin .icon-btn) */
.lb__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.lb__close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.lb__close:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--denim);
  transform: rotate(90deg);
}

/* --- the coverflow swiper --- */
.lb .swiper {
  width: 100%;
  max-width: 100%;
  overflow: hidden; /* explicit — clips the wide coverflow track */
  padding-bottom: 52px;
}

.lb .swiper-slide {
  /* uniform slide height so portrait and landscape sit on the SAME centre line;
     the photo scales inside, fully shown, never cropped */
  width: auto;
  height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb .swiper-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(72vw, 520px);
  max-height: 100%;
  object-fit: contain;
  border-radius: 16px;
}

.lb .swiper-wrapper {
  align-items: center;
}

.lb .swiper-3d .swiper-slide-shadow-left,
.lb .swiper-3d .swiper-slide-shadow-right {
  background-image: none;
  background: none;
}

.lb .swiper-pagination-bullet {
  background: var(--sand);
  opacity: 0.4;
}

.lb .swiper-pagination-bullet-active {
  background: var(--white);
  opacity: 1;
}

.lb .swiper-button-next,
.lb .swiper-button-prev {
  color: var(--white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

.lb .swiper-button-next::after,
.lb .swiper-button-prev::after {
  font-size: 15px;
}

.lb .swiper-button-next:hover,
.lb .swiper-button-prev:hover {
  background: var(--white);
  color: var(--denim);
}

.lb__caption {
  min-height: 4.5em;
  padding: 0 1rem;
  margin-top: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  transition: opacity 0.3s var(--ease);
}

.lb__caption.is-swapping {
  opacity: 0;
}

body.lb-open {
  overflow: hidden;
}

/* two galleries: coverflow on desktop, side-swipe carousel on phones */
.lb__mobile {
  display: none;
}

/* horizontal one-photo-at-a-time track (native scroll-snap) */
.lbm__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  overscroll-behavior-x: contain;
}
.lbm__track::-webkit-scrollbar {
  display: none;
}
.lbm__item {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}
.lbm__item img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 68vh;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 14px;
}

.lbm__ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.9rem;
}
.lbm__arrow {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}
.lbm__arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lbm__dots {
  display: flex;
  gap: 0.4rem;
}
.lbm__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sand);
  opacity: 0.4;
  cursor: pointer;
}
.lbm__dot.is-active {
  background: var(--white);
  opacity: 1;
}
.lbm__cap {
  margin: 0.75rem 0 0;
  min-height: 3em;
  font-size: 0.85rem;
  line-height: 1.55;
  text-align: center;
  color: rgba(255, 255, 255, 0.82);
}

/* --- phones: hide the coverflow, show the stack, fit the panel --- */
@media (max-width: 575px) {
  .lb {
    padding: 0.6rem;
    place-items: start center; /* let a tall panel scroll instead of clipping */
    overflow: hidden auto; /* x-hidden safety net, y scrolls if tall */
  }
  .lb__shell {
    width: 100%;
    max-width: 100%;
    margin-block: auto;
    padding: 6px;
    border-radius: 22px;
  }
  .lb__panel {
    padding: 1.1rem 0.7rem 1rem;
    border-radius: 18px;
    overflow: visible; /* the stack grows freely; the modal scrolls */
  }
  .lb__head {
    padding: 2.4rem 0.25rem 1rem;
  }
  .lb__head h3 {
    font-size: 1.35rem;
  }
  .lb__badge {
    top: 0.9rem;
    left: 0.9rem;
  }
  .lb__close {
    top: 0.7rem;
    right: 0.7rem;
    width: 36px;
    height: 36px;
  }

  .lb__desktop {
    display: none; /* hide the coverflow entirely on phones */
  }
  .lb__mobile {
    display: block; /* the swipe carousel manages its own spacing */
  }
}

/* ============================================================
   Header user button + admin
   ============================================================ */

.header__right {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.userbtn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: var(--white);
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease),
    border-color 0.45s var(--ease);
}

.header.is-stuck .userbtn {
  border-color: rgba(70, 104, 141, 0.4);
  color: var(--denim);
}

.userbtn:hover {
  background: var(--denim);
  border-color: var(--denim);
  color: var(--white);
}

.userbtn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* modal shell shared by login + panel */
.modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(20, 30, 43, 0.9);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}

.modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal__box {
  background: var(--cream);
  width: min(420px, 100%);
  padding: clamp(2rem, 4vw, 2.75rem);
  position: relative;
}

.modal__box--wide {
  width: min(1080px, 100%);
  max-height: 88svh;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* roomier, scrollable settings dialog (Google link, notify email, etc.) */
.modal__box--dlg {
  width: min(600px, 100%);
  max-height: 86svh;
  overflow-y: auto;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.modal__box--dlg h3 {
  margin-top: 0;
}
.modal__box--dlg::-webkit-scrollbar {
  width: 10px;
}
.modal__box--dlg::-webkit-scrollbar-thumb {
  background: rgba(159, 142, 132, 0.4);
  border-radius: 999px;
  border: 3px solid var(--cream);
}

/* tabs inside the Google-link dialog */
.gtabs {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid rgba(159, 142, 132, 0.25);
}
.gtab {
  border: 0;
  background: none;
  padding: 0.55rem 0.9rem;
  margin-bottom: -1px;
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.gtab:hover {
  color: var(--denim);
}
.gtab.is-active {
  color: var(--denim);
  border-bottom-color: var(--denim);
}
.gpane[hidden] {
  display: none;
}

/* connect / disconnect banner in the Google dialog */
.gconn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(159, 142, 132, 0.3);
  background: rgba(159, 142, 132, 0.08);
}
.gconn.is-on {
  border-color: rgba(70, 104, 141, 0.3);
  background: rgba(70, 104, 141, 0.08);
}
.gconn__state {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  color: var(--ink);
}
.gconn__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--taupe);
  box-shadow: 0 0 0 3px rgba(159, 142, 132, 0.2);
}
.gconn.is-on .gconn__dot {
  background: #3fae6a;
  box-shadow: 0 0 0 3px rgba(63, 174, 106, 0.22);
  animation: gconn-pulse 2s ease-in-out infinite;
}
@keyframes gconn-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(63, 174, 106, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(63, 174, 106, 0.08); }
}

.modal__close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--taupe);
  cursor: pointer;
  z-index: 2;
}

.modal__close:hover {
  color: var(--denim);
}

.modal__close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.modal h3 {
  margin-bottom: 0.4rem;
}

.modal__note {
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--taupe);
  margin: 0 0 1.75rem;
}

.modal__error {
  font-size: 0.78rem;
  color: #b4472f;
  margin: 0.9rem 0 0;
  min-height: 1.2em;
}

/* admin panel */
.admin__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.25rem clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid rgba(159, 142, 132, 0.3);
}

.admin__bar h3 {
  margin: 0;
  font-size: 1.35rem;
}

.admin__tabs {
  display: flex;
  gap: 0.5rem;
}

.admin__tab {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7em 1.1em;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--taupe);
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}

.admin__tab:hover {
  color: var(--denim);
}

.admin__tab.is-active {
  color: var(--denim);
  border-bottom-color: var(--denim);
}

.trow {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 0.85rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(159, 142, 132, 0.22);
}

.trow .avatar {
  width: 56px;
  height: 56px;
}

.trow textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.5;
  border: 1px solid rgba(159, 142, 132, 0.35);
  background: var(--white);
  color: var(--ink);
  padding: 0.5rem;
  resize: vertical;
  min-height: 84px;
  margin-top: 0.4rem;
}

.trow input[type="text"] {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(159, 142, 132, 0.4);
  background: var(--white);
  color: var(--ink);
}

.admin__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-sm {
  --btn-fill: var(--denim);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.7em 1.2em;
  border: 1px solid var(--denim);
  border-radius: 999px;
  background: transparent;
  color: var(--denim);
  cursor: pointer;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.btn-sm::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20%;
  width: 140%;
  height: 100%;
  z-index: -1;
  background: var(--btn-fill);
  transform: translateX(-120%) skewX(-16deg);
  transition: transform 0.45s var(--ease);
}

.btn-sm:hover::before,
.btn-sm:focus-visible::before {
  transform: translateX(0) skewX(-16deg);
}

.btn-sm:hover {
  color: var(--white);
}

.btn-sm--solid {
  --btn-fill: var(--denim-deep);
  background: var(--denim);
  color: var(--white);
}

.btn-sm--ghost {
  --btn-fill: var(--taupe);
  border-color: rgba(159, 142, 132, 0.5);
  color: var(--taupe);
}

.btn-sm--ghost:hover {
  color: var(--white);
}

.admin__grid {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 0;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.admin__col {
  overflow-y: auto;
  padding: 1.25rem clamp(1rem, 2vw, 1.5rem);
  min-height: 0;
}

.admin__col + .admin__col {
  border-left: 1px solid rgba(159, 142, 132, 0.3);
}

.admin__label {
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--taupe);
  margin: 0 0 1rem;
}

.plist {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.plist li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.plist button.pname {
  flex: 1;
  text-align: left;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  background: var(--white);
  border: 1px solid rgba(159, 142, 132, 0.3);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.plist button.pname:hover {
  border-color: var(--denim);
}

.plist li.is-sel button.pname {
  background: var(--denim);
  border-color: var(--denim);
  color: var(--white);
}

.icon-btn {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(159, 142, 132, 0.35);
  color: var(--taupe);
  cursor: pointer;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0;
}

.icon-btn:hover {
  border-color: var(--denim);
  color: var(--denim);
}

.admin__field {
  margin-bottom: 1rem;
}

.admin__field label {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.4rem;
}

.admin__field input {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(159, 142, 132, 0.4);
  background: var(--white);
  color: var(--ink);
}

.photo-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(159, 142, 132, 0.22);
}

.photo-row img {
  width: 72px;
  height: 54px;
  object-fit: cover;
  background: var(--sand);
}

.photo-row textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.5;
  border: 1px solid rgba(159, 142, 132, 0.35);
  background: var(--white);
  color: var(--ink);
  padding: 0.5rem;
  resize: vertical;
  min-height: 54px;
}

.photo-row__tools {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}

/* upload tile */
.pool__add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--taupe-light);
  border-radius: 14px;
  background: rgba(159, 142, 132, 0.06);
  color: var(--taupe);
  cursor: pointer;
  font-size: 0.56rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease),
    background 0.3s var(--ease);
}

.pool__add svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.pool__add:hover {
  border-color: var(--denim);
  color: var(--denim);
  background: rgba(70, 104, 141, 0.06);
}

.pool__cell {
  position: relative;
}

.pool__pick {
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid transparent;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sand);
  cursor: pointer;
  transition: border-color 0.3s var(--ease);
}

.pool__pick:hover {
  border-color: var(--denim);
}

.pool__pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* the delete X, appears on hover of the tile */
.pool__del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 30, 43, 0.6);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
    background 0.25s var(--ease);
}

.pool__cell:hover .pool__del,
.pool__del:focus-visible {
  opacity: 1;
  transform: none;
}

.pool__del:hover {
  background: #b4472f;
}

/* ---------- Library tab: media manager ---------- */

.media {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.media__add {
  aspect-ratio: 4 / 3;
}

.media__cell {
  position: relative;
}

.media__img {
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: var(--sand);
}

.media__badge {
  position: absolute;
  left: 7px;
  bottom: 7px;
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.28em 0.65em;
  border-radius: 999px;
  background: rgba(70, 104, 141, 0.92);
  color: #fff;
}

.media__badge.is-unused {
  background: rgba(159, 142, 132, 0.85);
}

.media__cell:hover .pool__del,
.media__cell .pool__del:focus-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Admin — Analytics dashboard, Inbox, and dialog extras
   ============================================================ */

.admin__grid.is-full {
  grid-template-columns: 1fr;
}

/* --- Analytics --- */
.dash {
  padding: 0.25rem 0.25rem 1rem;
}

.dash__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

/* analytics time filter — a small segmented control */
.an-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.an-filter__label {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-right: 0.15rem;
}
.an-seg {
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(159, 142, 132, 0.4);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.an-seg:hover {
  border-color: var(--denim-soft);
}
.an-seg.is-active {
  background: var(--denim);
  border-color: var(--denim);
  color: var(--white);
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--cream);
  border: 1px solid rgba(159, 142, 132, 0.22);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-card b {
  font-family: var(--serif);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--denim);
}

.stat-card span {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}

.stat-card small {
  font-size: 0.72rem;
  color: var(--ink);
  opacity: 0.6;
}

.dash__charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
}

.dash__chart {
  min-width: 0;
}

.bar {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0;
}

.bar__label {
  font-size: 0.72rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar__track {
  height: 10px;
  border-radius: 999px;
  background: rgba(159, 142, 132, 0.18);
  overflow: hidden;
}

.bar__track i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--denim-soft), var(--denim));
  transition: width 0.6s var(--ease);
}

.bar__val {
  font-size: 0.72rem;
  color: var(--taupe);
  min-width: 1.5em;
  text-align: right;
}

/* --- Inbox --- */
.inbox__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(159, 142, 132, 0.22);
}

.inbox__meta {
  font-size: 0.9rem;
  color: var(--ink);
}
.inbox__meta b {
  color: var(--denim);
}
.inbox__meta small {
  display: block;
  font-size: 0.72rem;
  color: var(--taupe);
  margin-top: 0.15rem;
}
.inbox__unread {
  color: var(--denim);
  font-weight: 500;
}

.inbox__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.inbox__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
}

.inbox__item {
  background: var(--cream);
  border: 1px solid rgba(159, 142, 132, 0.22);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
}

.inbox__item.is-unread {
  border-left: 3px solid var(--denim);
  background: #fff;
}

.inbox__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.inbox__who b {
  color: var(--ink);
}
.inbox__who a {
  display: block;
  font-size: 0.78rem;
  color: var(--denim);
}

.inbox__row time {
  font-size: 0.68rem;
  color: var(--taupe);
  white-space: nowrap;
}

.inbox__subject {
  margin: 0.5rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}

.inbox__field {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--ink);
}
.inbox__field span {
  display: inline-block;
  min-width: 6.5em;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.inbox__msg {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
}

.inbox__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.9rem;
}

.inbox__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--taupe);
}
.inbox__empty svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  opacity: 0.5;
}
.inbox__empty p {
  margin: 0.75rem 0 0.25rem;
  font-size: 1rem;
  color: var(--ink);
}
.inbox__empty small {
  font-size: 0.8rem;
}

/* --- dialog extras --- */
.modal--top {
  z-index: 260;
}

/* --- Wix-style question builder --- */
.qrow {
  background: var(--cream);
  border: 1px solid rgba(159, 142, 132, 0.3);
  border-radius: 14px;
  padding: 0.9rem;
  margin-bottom: 0.75rem;
}

.qrow__top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qrow__grip {
  color: var(--taupe);
  letter-spacing: -2px;
  font-size: 0.9rem;
  cursor: grab;
  user-select: none;
}

.qrow__label {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(159, 142, 132, 0.35);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}

.qrow__move {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
}

.qrow__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.7rem;
}

.qrow__type-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--taupe);
}

.qrow__type {
  font-family: var(--sans);
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(159, 142, 132, 0.35);
  border-radius: 9px;
  background: #fff;
}

.qrow__req {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
}
.qrow__req input {
  width: auto;
  accent-color: var(--denim);
}

/* built-in field cues */
.qrow--sys {
  border-left: 3px solid var(--denim-soft);
}
.qrow__tag {
  margin-left: auto;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--denim-soft);
  align-self: center;
}
.qrow__lock {
  width: 28px;
  text-align: center;
  color: var(--taupe);
  opacity: 0.5;
}
.qrow__type:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* ============================================================
   3-pane form builder (Wix-style)
   ============================================================ */
.modal__box--builder {
  width: min(1120px, 96vw);
  max-width: min(1120px, 96vw);
  padding: 1.5rem 1.75rem;
}

.fb {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.fb__panes {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr) 280px;
  gap: 1rem;
  height: min(62vh, 560px);
}

.fb__add,
.fb__canvas,
.fb__details {
  border: 1px solid rgba(159, 142, 132, 0.25);
  border-radius: 14px;
  padding: 1rem;
  overflow-y: auto;
}

.fb__canvas {
  background: var(--cream);
}

.fb__ptitle {
  margin: 0 0 0.85rem;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* left palette */
.fb__palette {
  display: grid;
  gap: 0.5rem;
}

.fb__chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(159, 142, 132, 0.3);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.fb__chip:hover {
  border-color: var(--denim-soft);
  background: rgba(70, 104, 141, 0.06);
  transform: translateY(-1px);
}
.fb__chip svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--denim);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fb__tip,
.fb__foot-hint,
.fb__note {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--taupe);
}
.fb__tip {
  margin: 1rem 0 0;
}
.fb__note {
  display: block;
  margin-top: 0.35rem;
}

/* middle canvas */
.fb__rows {
  display: grid;
  gap: 0.5rem;
}

.fb__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(159, 142, 132, 0.3);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.fb__row.is-sel {
  border-color: var(--denim);
  box-shadow: 0 0 0 3px rgba(70, 104, 141, 0.12);
}
.fb__row.is-off {
  opacity: 0.55;
}
.fb__grip {
  color: var(--taupe);
  letter-spacing: -2px;
  font-size: 0.85rem;
  user-select: none;
}
.fb__row-main {
  flex: 1;
  min-width: 0;
}
.fb__row-label {
  display: block;
  font-size: 0.92rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fb__row-sub {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-top: 0.15rem;
}
.fb__row-tools {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

/* right details */
.fb__field {
  margin-bottom: 0.9rem;
}
.fb__field label {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.35rem;
}
.fb__field input,
.fb__field select,
.fb__field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid rgba(159, 142, 132, 0.35);
  border-radius: 10px;
  padding: 0.6rem 0.7rem;
  resize: vertical;
}

/* toggle rows — a small pill switch */
.fb__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
}
.fb__switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: rgba(159, 142, 132, 0.4);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.3s var(--ease);
}
.fb__switch input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s var(--ease);
}
.fb__switch input:checked {
  background: var(--denim);
}
.fb__switch input:checked::after {
  transform: translateX(16px);
}

.fb__empty {
  font-size: 0.85rem;
  color: var(--taupe);
  font-style: italic;
}

.fb__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.fb__foot-hint {
  margin-left: auto;
}

@media (max-width: 820px) {
  .fb__panes {
    grid-template-columns: 1fr;
    height: auto;
  }
  .fb__add,
  .fb__canvas,
  .fb__details {
    max-height: 40vh;
  }
}

/* the dropdown-options box only shows for a "Dropdown list" question */
.qrow__list {
  display: none;
  margin-top: 0.7rem;
}
.qrow[data-qtype="select"] .qrow__list {
  display: block;
}
.qrow__list label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.35rem;
}
.qrow__optlist {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.9rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(159, 142, 132, 0.35);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
}

/* required asterisk + checkbox row on the public contact form */
.field .req {
  color: #b23b3b;
}
.field .check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.field .check input {
  width: auto;
  accent-color: var(--denim);
}

.rev-google {
  margin-top: 1.75rem;
}

/* ============================================================
   Portfolio showcase — large image statements (Apple-style),
   with the studio mark revealed on scroll
   ============================================================ */
.showcase {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 4vw, 2.5rem);
  background: var(--cream);
}

.show {
  border-radius: 28px;
  overflow: hidden;
}

/* --- logo reveal panel --- */
.show--logo {
  display: grid;
  place-items: center;
  gap: 1.25rem;
  text-align: center;
  padding: clamp(3.5rem, 9vw, 7.5rem) 1.5rem;
  color: var(--white);
  background: radial-gradient(120% 120% at 50% 0%, rgba(125, 153, 184, 0.28), transparent 60%),
    linear-gradient(160deg, var(--denim-deep) 0%, var(--ink) 100%);
}

.show__logo {
  width: clamp(120px, 20vw, 210px);
  height: auto;
  opacity: 0;
  transform: scale(0.8);
  filter: blur(10px);
}

.show--logo.is-in .show__logo {
  animation: show-logo 1.6s var(--ease) 0.15s forwards;
}

@keyframes show-logo {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.show__statement {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  color: var(--white);
}
.show__statement em {
  font-style: italic;
  color: var(--sand);
}
.show__sub {
  margin: 0;
  max-width: 44ch;
  color: var(--taupe-light);
  font-size: 1rem;
}

/* --- large image cards --- */
.show--card {
  position: relative;
  min-height: clamp(440px, 62vh, 720px);
  display: grid;
  place-items: start center;
  text-align: center;
  color: var(--white);
}

.show__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.4s var(--ease);
}
.show--card:hover .show__media {
  transform: scale(1.05);
}

.show--card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(20, 30, 43, 0.72) 0%,
    rgba(20, 30, 43, 0.18) 34%,
    transparent 58%
  );
}

.show__body {
  position: relative;
  z-index: 2;
  padding: clamp(2.5rem, 6vw, 4.75rem) 1.5rem 0;
  max-width: 42ch;
}
.show__body h3 {
  margin: 0 0 0.4rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  color: var(--white);
}
.show__body p {
  margin: 0 0 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}

.show__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white);
}
.show__link svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease);
}
.show__link:hover svg {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .show__logo {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ============================================================
   Featured project — accordion gallery (first project's photos)
   ============================================================ */
.acc {
  display: flex;
  gap: 0.75rem;
  height: clamp(360px, 52vh, 540px);
}

.acc__item {
  position: relative;
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--sand);
  background-size: cover;
  background-position: center;
  transition: flex 0.6s var(--ease);
}

.acc__item.is-open {
  flex: 3.4;
}

@media (max-width: 640px) {
  .acc {
    flex-direction: column;
    height: auto;
    gap: 0.6rem;
  }
  .acc__item {
    flex: none;
    height: 220px;
  }
}

/* ============================================================
   Radial scroll gallery — a wheel of project cards that spins
   as you scroll (vanilla sticky-pin, one card per project)
   ============================================================ */
.radial-pin {
  position: relative;
  height: 320vh;
  background: var(--ink);
}

.radial {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--white);
}

.radial__head {
  text-align: center;
  padding: clamp(1.75rem, 5vh, 4rem) 1.5rem 0;
}
.radial__head h2 {
  margin: 0.4rem 0 0;
  color: var(--white);
}
.radial__sub {
  max-width: 46ch;
  margin: 1rem auto 0;
  color: var(--taupe-light);
  font-size: 1rem;
}

.radial__stage {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 36%, #000 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 36%, #000 100%);
}

.radial__wheel {
  position: absolute;
  left: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
  will-change: transform;
  /* width / height / bottom are set by radial.js */
}

.radial__item {
  position: absolute;
  top: 50%;
  left: 50%;
  /* orbit transform is set by radial.js */
}

.rcard {
  position: relative;
  width: clamp(185px, 17vw, 255px);
  height: clamp(255px, 24vw, 345px);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  box-shadow: 0 22px 48px -22px rgba(0, 0, 0, 0.65);
  transition: transform 0.5s var(--ease), filter 0.5s var(--ease),
    opacity 0.5s var(--ease);
}

.rcard__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s var(--ease);
}

.rcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 30, 43, 0.92) 0%, transparent 58%);
}

.rcard__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.15rem 1.2rem;
  text-align: left;
}
.rcard__cat {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}
.rcard__body h3 {
  margin: 0.25rem 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.1;
  color: var(--white);
}
.rcard__rule {
  display: block;
  height: 2px;
  width: 0;
  margin-top: 0.5rem;
  background: var(--silver);
  transition: width 0.5s var(--ease);
}

/* point at one card → it lifts, the others recede */
.radial__wheel:hover .rcard {
  opacity: 0.45;
  filter: grayscale(0.4) blur(1.5px);
}
.rcard:hover,
.rcard:focus-visible {
  opacity: 1 !important;
  filter: none !important;
  transform: scale(1.12) translateY(-8px);
}
.rcard:hover .rcard__img {
  transform: scale(1.08);
}
.rcard:hover .rcard__rule,
.rcard:focus-visible .rcard__rule {
  width: 100%;
}


/* ---------- Rounded, minimal admin pass ----------
   Softer corners and filled fields instead of outlined boxes, so the panel
   reads as calm surfaces rather than a grid of rectangles. */

.modal__box,
.modal__box--wide {
  border-radius: 22px;
  overflow: hidden;
}

.admin__bar {
  border-bottom-color: rgba(159, 142, 132, 0.18);
}

/* tabs become soft pills */
.admin__tab {
  border-radius: 999px;
  border-bottom: 0;
}

.admin__tab.is-active {
  background: rgba(70, 104, 141, 0.1);
  border-bottom: 0;
}

/* pill action buttons */
.btn-sm {
  border-radius: 999px;
}

/* project list: filled rows, no hard outline */
.plist button.pname {
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(159, 142, 132, 0.09);
}

.plist button.pname:hover {
  border-color: transparent;
  background: rgba(70, 104, 141, 0.1);
}

.plist li.is-sel button.pname {
  border-color: transparent;
}

/* small square buttons → soft rounded, borderless */
.icon-btn {
  border: 1px solid transparent;
  border-radius: 9px;
  background: rgba(159, 142, 132, 0.1);
}

.icon-btn:hover {
  border-color: transparent;
  background: rgba(70, 104, 141, 0.14);
  color: var(--denim);
}

/* fields: filled, rounded, no outline until focus */
.admin__field input,
.photo-row textarea,
.trow input[type="text"],
.trow textarea {
  border: 1px solid transparent;
  border-radius: 12px;
  background: rgba(159, 142, 132, 0.1);
}

.admin__field input:focus,
.photo-row textarea:focus,
.trow input[type="text"]:focus,
.trow textarea:focus {
  outline: none;
  border-color: var(--denim);
  background: var(--white);
}

.photo-row {
  border-bottom-color: rgba(159, 142, 132, 0.14);
}

.photo-row img {
  border-radius: 10px;
}

.review-card,
.card {
  border-radius: 16px;
}

.admin__col + .admin__col {
  border-left-color: rgba(159, 142, 132, 0.16);
}

.admin__status {
  font-size: 0.72rem;
  color: var(--taupe);
  padding: 0 clamp(1.25rem, 3vw, 2rem) 1rem;
}

@media (max-width: 860px) {
  .admin__grid {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .admin__col + .admin__col {
    border-left: 0;
    border-top: 1px solid rgba(159, 142, 132, 0.3);
  }
}

/* ============================================================
   Design without borders — split feature with a photo collage
   ============================================================ */

.reach__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

@media (max-width: 820px) {
  .reach__grid {
    grid-template-columns: 1fr;
  }
}

.reach__feats {
  list-style: none;
  margin: 1.75rem 0 2.25rem;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}

.reach__feats li {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.reach__feats svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--taupe);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s var(--ease), transform 0.4s var(--ease);
}

.reach__feats li:hover svg {
  stroke: var(--denim);
  transform: translateY(-2px);
}

.reach__feats b {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.reach__collage {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.85rem;
  aspect-ratio: 1.05 / 1;
}

.reach__collage .rimg {
  background-size: cover;
  background-position: center;
  background-color: var(--sand);
  transition: transform 1.2s var(--ease);
}

.reach__collage .rimg--a {
  grid-row: 1 / span 2;
}

.reach__collage:hover .rimg--a {
  transform: scale(1.03);
}

/* ============================================================
   Places served — two rows of community names drifting in
   opposite directions. Serif, brand colours, pause on hover.
   ============================================================ */

.places {
  padding: clamp(4rem, 9vw, 7rem) 0;
  overflow: hidden;
  text-align: center;
}

.places__head {
  padding-inline: var(--pad);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.marquee {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  /* fade the names softly into the page edges instead of a hard cut */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__row {
  display: flex;
  width: max-content;
  will-change: transform;
}

/* two lines: locals drift left, the remote reach drifts the other way. Each
   list is repeated 4× in the markup, so a −25% shift loops seamlessly. */
.marquee__row--a {
  animation: marquee-l 40s linear infinite;
}

.marquee__row--b {
  animation: marquee-r 48s linear infinite;
}

.marquee:hover .marquee__row {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 3vw, 2.8rem);
  padding-inline: clamp(1.4rem, 3vw, 2.8rem);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--denim);
}

/* the remote row reads as a softer, italic counterpoint */
.marquee__row--b .marquee__item {
  font-style: italic;
  color: var(--taupe);
}

.marquee__item::after {
  content: "\25C6"; /* ◆ */
  font-size: 0.34em;
  font-style: normal;
  color: var(--taupe-light);
  transform: translateY(-0.15em);
}

@keyframes marquee-l {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

@keyframes marquee-r {
  from { transform: translateX(-25%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__row {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .marquee__item.is-dup {
    display: none; /* the duplicate set exists only to loop the scroll */
  }
}

/* ---------- Footer ---------- */

.footer {
  background: var(--denim-deep);
  color: rgba(255, 255, 255, 0.75);
  padding: clamp(4rem, 8vw, 6rem) var(--pad) 2.5rem;
  font-size: 0.9rem;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem;
  max-width: 1240px;
  margin: 0 auto 3.5rem;
}

.footer h4 {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 1.5rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.footer a:hover {
  color: var(--white);
}

.footer__mark {
  width: 78px;
  margin-bottom: 1.5rem;
}

.footer__bottom {
  max-width: 1240px;
  margin-inline: auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- CTA band ---------- */

.cta {
  text-align: center;
}

.cta h2 {
  max-width: 18ch;
  margin-inline: auto;
}

/* ---------- Mobile nav ---------- */

@media (max-width: 900px) {
  .burger {
    display: flex;
    order: 3;
  }

  /* logo far left, then the user button, then the burger */
  .header {
    justify-content: flex-start;
    gap: 1rem;
  }

  .header__logo {
    margin-right: auto;
  }

  .header__right {
    order: 2;
    gap: 0;
  }

  /* stays tappable and visible above the open menu overlay */
  .userbtn {
    position: relative;
    z-index: 110;
  }

  body.nav-open .userbtn {
    border-color: rgba(70, 104, 141, 0.4);
    color: var(--denim);
  }

  /* THE FIX: backdrop-filter on the stuck header turns it into a containing
     block, trapping the fixed nav overlay inside the header bar instead of the
     viewport. Drop it while the menu is open so the overlay fills the screen. */
  body.nav-open .header {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .header__logo {
    position: relative;
    z-index: 111;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 90;
    flex-direction: column;
    justify-content: center;
    gap: 2.25rem;
    background: var(--cream);
    clip-path: circle(0% at calc(100% - 3rem) 3rem);
    transition: clip-path 0.8s var(--ease);
    pointer-events: none;
  }

  body.nav-open .nav {
    clip-path: circle(150% at calc(100% - 3rem) 3rem);
    pointer-events: auto;
  }

  .nav a {
    color: var(--denim) !important;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
  }

  .header__name {
    font-size: 1rem;
  }
}

/* ---------- Hero on phones ---------- */
@media (max-width: 768px) {
  .hero {
    min-height: 560px;
  }

  .hero__veil {
    /* a touch more scrim so the copy holds over the whole video */
    background: linear-gradient(
      180deg,
      rgba(18, 28, 40, 0.55) 0%,
      rgba(18, 28, 40, 0.32) 45%,
      rgba(18, 28, 40, 0.62) 100%
    );
  }

  .hero__copy {
    padding: 7rem var(--pad) 12vh;
  }

  .hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}