:root {
  --paper: #fcfbf8;
  --cream: #fff8ec;
  --cream-deep: #f8f2e7;
  --ink: #1e2720;
  --forest: #006039;
  --deep-green: #013a2b;
  --blue-ink: #001846;
  --muted: rgba(30, 39, 32, 0.66);
  --gold: #c49a42;
  /* Exact gold from Figma node 399:315 "Star 1" (linear gradient, top -> bottom) */
  --gold-star-top: #d4af37;
  --gold-star-bottom: #a9881a;
  --gold-star-gradient: linear-gradient(180deg, var(--gold-star-top) 0%, var(--gold-star-bottom) 100%);
  --radius-lg: 20px;
  --shadow-soft: 0 24px 80px rgba(47, 40, 32, 0.12);
  --font-display: "Manjari", Georgia, serif;
  --font-body: "Manrope", Arial, sans-serif;
  --font-brand: "Cormorant Upright", Georgia, serif;
  --font-ui: "Schibsted Grotesk", Arial, sans-serif;
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-meta: 0.8125rem;
  --text-body: 0.9375rem;
  --text-body-lg: clamp(0.9375rem, 0.26vw + 0.82rem, 1rem);
  --text-ui: 0.875rem;
  --text-button: clamp(0.9375rem, 0.22vw + 0.84rem, 1rem);
  --text-step: clamp(1.25rem, 0.56vw + 1.02rem, 1.5rem);
  --text-step-active: clamp(1.5rem, 0.95vw + 1.08rem, 2rem);
  --text-quote: var(--text-body-lg);
  --text-section: clamp(2.625rem, 2.32vw + 1.5rem, 4rem);
  --text-intro: clamp(2rem, 1.75vw + 1.15rem, 3.25rem);
  --text-hero: clamp(3.75rem, 4.6vw + 1.35rem, 6.25rem);
  --text-symbol: 1.5rem;
  --leading-tight: 1.02;
  --leading-heading: 1.06;
  --leading-body: 1.55;
  --leading-caption: 1.35;
  --tracking-caps: 0.12em;
  --tracking-body: 0.01em;
  --space-section-y: clamp(4.5rem, 5vw, 6.25rem);
  --space-section-x: clamp(1.5rem, 5vw, 6.25rem);
  --content-max-width: 1345.7645px;
  --footer-content-inset: calc(max(0px, (100% - 1840px) / 2) + clamp(2rem, 3vw, 4rem));
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

/* Native smooth scroll only when Lenis is not driving (e.g. reduced motion). */
html:not(.js-reveal) {
  scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: smooth;
  }
}

/* Mobile skips Lenis entirely (see main.js) in favour of the browser's own
   native touch scroll — this just keeps anchor-link jumps smooth. */
@media (max-width: 760px) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-optical-sizing: auto;
  letter-spacing: var(--tracking-body);
  touch-action: pan-y;
}

body:not(.contact-page):not(.gemstone-page) main {
  background: var(--cream);
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

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

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

button {
  color: inherit;
  font: inherit;
}

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100svh;
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  overflow: hidden;
  padding: clamp(7rem, 14vh, 9rem) var(--space-section-x) clamp(2.5rem, 7vh, 5rem);
  background: #050608;
}

@supports (height: 100dvh) {
  .hero {
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
  }
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.12) 22%, #000 100%);
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 5% 10% 16%;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 42%, rgba(220, 179, 91, .16), transparent 58%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  top: -8%;
  right: 0;
  bottom: auto;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}

.navbar {
  position: fixed;
  top: 30px;
  left: 50%;
  z-index: 5;
  width: fit-content;
  max-width: calc(100% - 32px);
  min-height: 80px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 3.1vw, 3.75rem);
  padding: 18px clamp(1.5rem, 2.1vw, 2.25rem);
  border-radius: 24px;
  background: rgba(43, 43, 43, 0.45);
  backdrop-filter: blur(18px);
  color: #fff;
}

.mobile-nav-toggle,
.mobile-menu {
  display: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-ui);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  white-space: nowrap;
  opacity: 0.92;
}

.spark {
  width: 13px;
  height: 8px;
  display: inline-block;
  background: currentColor;
  mask: url("../images/section-star.svg") center / contain no-repeat;
  -webkit-mask: url("../images/section-star.svg") center / contain no-repeat;
}

.spark.dark {
  color: var(--gold);
}

/* Nav scroll-spy indicator: the gold star marks the current page/section.
   Uses the exact gradient from Figma node 399:315 "Star 1". */
/* The active-star sits absolutely to the LEFT of the link text, so it never
   affects layout width — the RU EM SA brandmark stays centered when the star
   moves between links. */
.navbar .nav-link {
  position: relative;
}

.navbar .nav-link .spark {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 6px;
  background: var(--gold-star-gradient);
  opacity: 0;
  transform: translateY(-50%) scale(0.55);
  transform-origin: center;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.navbar .nav-link.active {
  opacity: 1;
}

.navbar .nav-link.active .spark {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .navbar .nav-link .spark {
    transition: none;
  }
}

.brandmark {
  --logo-scale: 1;
  position: relative;
  display: block;
  width: calc(198.495px * var(--logo-scale));
  height: calc(36px * var(--logo-scale));
  flex: 0 0 auto;
  color: #fff;
}

.brand-row {
  position: absolute;
  top: 0;
  left: calc(0.275px * var(--logo-scale));
  width: calc(197.946px * var(--logo-scale));
  height: calc(20.846px * var(--logo-scale));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-row b {
  font-family: var(--font-brand);
  font-size: calc(31.949px * var(--logo-scale));
  font-weight: 700;
  line-height: calc(20.836px * var(--logo-scale));
  color: #fff;
  white-space: nowrap;
}

.brand-row img {
  width: calc(13.049px * var(--logo-scale));
  height: calc(7.814px * var(--logo-scale));
  object-fit: contain;
  flex: 0 0 auto;
}

.brand-subline {
  position: absolute;
  left: calc(13.87px * var(--logo-scale));
  top: calc(28.4px * var(--logo-scale));
  width: calc(184.623px * var(--logo-scale));
  height: calc(7.596px * var(--logo-scale));
  font-family: var(--font-body);
  font-size: calc(7px * var(--logo-scale));
  font-weight: 600;
  line-height: 1;
  letter-spacing: calc(1.15px * var(--logo-scale));
  text-transform: uppercase;
  color: #fff;
}

.brand-subline b {
  position: absolute;
  top: 0;
  font-weight: 500;
  transform: translateX(-50%);
  white-space: nowrap;
}

.brand-subline b:nth-child(1) {
  left: calc(9.5px * var(--logo-scale));
}

.brand-subline b:nth-child(2) {
  left: calc(89.5px * var(--logo-scale));
}

.brand-subline b:nth-child(3) {
  left: calc(166.62px * var(--logo-scale));
  top: calc(0.33px * var(--logo-scale));
}

.hero-content {
  position: relative;
  z-index: 2;
  width: min(980px, calc(100% - 32px));
  margin-top: clamp(2rem, 8vh, 7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.8vh, 2rem);
  max-height: calc(100svh - clamp(10rem, 24vh, 14rem));
  color: #fff;
  text-align: center;
}

@supports (height: 100dvh) {
  .hero-content {
    max-height: calc(100dvh - clamp(10rem, 24vh, 14rem));
  }
}

.hero h1,
.section-heading h2,
.intro-copy,
.testimonial-copy h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
}

.hero h1 {
  /* Scale by viewport width so the two lines (split by <br>) always fit,
     and never wrap/break a word — exactly two lines on every screen. */
  font-size: min(var(--text-hero), 8vw);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

[data-scroll-blur] .word,
[data-scroll-blur] .char {
  display: inline-block;
}

[data-scroll-blur].is-scroll-blur-ready {
  visibility: visible;
}

.hero-content p {
  max-width: 44ch;
  margin: -10px 0 0;
  font-size: var(--text-body-lg);
  line-height: 1.6;
  opacity: 0.82;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3rem, 7vh, 4.5rem);
  padding: 0 28px;
  border-radius: 70px;
  transition: transform 180ms ease, background-color 180ms ease;
}

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

.button-primary {
  background: var(--forest);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-button);
  line-height: 1;
  text-transform: none;
}

/* CTA character-stagger hover (Osmo). Only the animation is added; the button's
   color, shape, and sizing are untouched. */
.button [data-button-animate-chars],
.whatsapp-cta [data-button-animate-chars] {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.3;
}

.button [data-button-animate-chars] span,
.whatsapp-cta [data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.button:hover [data-button-animate-chars] span,
.button:focus-visible [data-button-animate-chars] span,
.whatsapp-cta:hover [data-button-animate-chars] span,
.whatsapp-cta:focus-visible [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}

@media (prefers-reduced-motion: reduce) {
  .button [data-button-animate-chars] span,
  .whatsapp-cta [data-button-animate-chars] span {
    transition: none;
    transform: none;
    text-shadow: none;
  }
}

/* Character-stagger hover on nav links (same effect as the CTA). Text is
   unchanged; text-transform:none avoids the per-span capitalize -> all caps. */
.nav-link [data-button-animate-chars] {
  position: relative;
  display: inline-block;
  overflow: hidden;
  line-height: 1.3;
  text-transform: none;
}

.nav-link [data-button-animate-chars] span {
  display: inline-block;
  position: relative;
  text-shadow: 0px 1.3em currentColor;
  transform: translateY(0em) rotate(0.001deg);
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.nav-link:hover [data-button-animate-chars] span,
.nav-link:focus-visible [data-button-animate-chars] span {
  transform: translateY(-1.3em) rotate(0.001deg);
}

@media (prefers-reduced-motion: reduce) {
  .nav-link [data-button-animate-chars] span {
    transition: none;
    transform: none;
    text-shadow: none;
  }
}

/* Floating background-music toggle (bottom-right) */
.audio-toggle {
  position: absolute;
  right: clamp(1.25rem, 2.4vw, 2rem);
  bottom: clamp(1.25rem, 2.4vw, 2rem);
  z-index: 40;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 248, 236, 0.26);
  border-radius: 50%;
  background: rgba(125, 118, 108, 0.72);
  backdrop-filter: blur(16px) saturate(1.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.18);
  color: #fff8ec;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(30, 39, 32, 0.18), inset 0 1px 0 rgba(255, 248, 236, 0.18);
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.audio-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 248, 236, 0.36);
  background: rgba(108, 102, 92, 0.75);
}

.audio-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.audio-toggle svg {
  width: 22px;
  height: 22px;
  display: block;
}

.audio-toggle .audio-icon--off {
  display: none;
}

.audio-toggle.is-muted .audio-icon--on {
  display: none;
}

.audio-toggle.is-muted .audio-icon--off {
  display: block;
}

.textured {
  position: relative;
  isolation: isolate;
  background: var(--cream);
}

.textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/paper-texture.webp") center / cover no-repeat;
  mix-blend-mode: color-burn;
  opacity: 0.5;
  pointer-events: none;
}

.intro-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.75rem, 2.5vw, 2.75rem);
  padding: var(--space-section-y) var(--space-section-x);
  scroll-margin-top: 110px;
  overflow: hidden;
  text-align: center;
}

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.intro-copy {
  width: min(58rem, 100%);
  margin: 0 auto;
  text-wrap: balance;
  color: #0b2b22;
  font-size: var(--text-intro);
  line-height: 1.25;
  opacity: 0.9;
}

.intro-line {
  display: block;
  color: #0b2b22;
}

.intro-copy em {
  color: rgba(11, 43, 34, 0.16);
  font-style: normal;
}

.symbol-row {
  width: min(64rem, 100%);
  overflow: hidden;
  padding-block: 12px;
  opacity: 1;
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.symbol-row__track {
  display: flex;
  width: 200%;
  animation: stone-procession 32s linear infinite;
}

.symbol-row__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 0 0 50%;
}

.symbol-row .symbol-row__group img {
  display: block;
  width: clamp(32px, 4vw, 48px);
  height: clamp(32px, 4vw, 48px);
  aspect-ratio: 1;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

@keyframes stone-procession {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .symbol-row__track { animation: none; }
}

.journey-section {
  /* All five steps are shown together (no pinned scroll), so the section
     simply flows to fit its content. */
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 5vh, 3.5rem);
  padding: clamp(7.5rem, 17.9vh, 8.75rem) var(--space-section-x) clamp(4.5rem, 8vh, 6rem);
  background: linear-gradient(180deg, #fff8ec 0%, #fcfbf8 100%);
  overflow: hidden;
}

/* Tablet and up: pull the margins in a bit tighter than the shared
   section padding, without touching mobile's original padding. */
@media (min-width: 761px) {
  .journey-section {
    padding-left: clamp(2rem, 9vw, 10rem);
    padding-right: clamp(2rem, 9vw, 10rem);
  }
}

/* Desktop-only: pull the margins in further so the section reads tighter
   and more contained on wide screens, without touching tablet/mobile. */
@media (min-width: 1100px) {
  .journey-section {
    padding-left: clamp(3rem, 12vw, 14rem);
    padding-right: clamp(3rem, 12vw, 14rem);
  }
}

.mandala-pattern {
  position: absolute;
  width: clamp(22rem, 26.25vw, 31.5rem);
  aspect-ratio: 1;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

/* Mandala bloom — the SVG scales & rotates open, fading to its resting opacity
   when its section scrolls into view. Uses individual transform props so it
   composes with each mandala's own translate positioning. */
html.mandala-ready [data-mandala-bloom] {
  opacity: 0;
  scale: 0.3;
  transform-origin: center center;
  transition: opacity 1.1s ease, scale 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* On scroll-in: bloom open (scale + fade) and then keep rotating slowly forever. */
html.mandala-ready [data-mandala-bloom].is-bloomed {
  opacity: var(--bloom-opacity, 1);
  scale: 1;
  animation: mandalaSpin 28s linear infinite;
}

@keyframes mandalaSpin {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.mandala-ready [data-mandala-bloom] {
    opacity: var(--bloom-opacity, 1);
    scale: 1;
    transition: none;
  }
  html.mandala-ready [data-mandala-bloom].is-bloomed {
    animation: none;
  }
}

.journey-mandala {
  z-index: 0;
  right: clamp(-16rem, -13.1vw, -11rem);
  top: 50%;
  translate: 0 -37%;
}

@supports (height: 100svh) {
  .journey-section {
    padding-top: clamp(7.5rem, 17.9svh, 8.75rem);
  }
}

@supports (height: 100dvh) {
  .journey-section {
    padding-top: clamp(7.5rem, 17.9dvh, 8.75rem);
  }
}

.section-heading {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
}

.section-heading h2 {
  color: var(--ink);
  font-size: var(--text-section);
  line-height: var(--leading-heading);
}

/* All five journey steps shown together as alternating image/text rows —
   a normal scrolling layout (no pin), same visual language (radius, shadow,
   palette, type) as the rest of the site's components. Keep the rows in
   the same bounded container as the intro so wide screens do not spread
   each image and its copy across the viewport. */
.journey-rows {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 6vw, 5rem);
}

.journey-row {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.journey-row.is-reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
}

.journey-row.is-reverse .journey-row__copy {
  order: -1;
}

.journey-row__media {
  display: block;
  min-width: 0;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #d7decd;
  box-shadow: 0 16px 42px rgba(47, 40, 32, 0.055);
}

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

.journey-row__copy {
  /* Grid items default to min-width:auto, which lets a long heading's
     intrinsic (unwrapped) width push past the 1fr column instead of
     wrapping. min-width:0 lets it shrink to the column and wrap properly,
     so every step keeps the same column width and left edge. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.85rem;
}

.journey-row__tag {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  border-radius: 999px;
  background: rgba(229, 214, 194, 0.5);
  color: var(--muted);
  padding: 0 0.875rem;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.journey-row__heading {
  min-width: 0;
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

.journey-row__text {
  min-width: 0;
  max-width: 42ch;
  margin: 0;
  color: rgba(23, 19, 17, 0.72);
  font-size: var(--text-body-lg);
  font-weight: 500;
  line-height: var(--leading-body);
}

.journey-closing {
  width: min(100%, var(--content-max-width));
  margin: clamp(4rem, 7vw, 7rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}

.journey-closing p {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.8vw, 3rem);
  line-height: 1.1;
}

@media (max-width: 760px) {
  .journey-rows {
    gap: 1.5rem;
  }

  /* Each step becomes a single self-contained card — same cream-deep/
     radius/shadow language as the testimonial and benefits cards. */
  .journey-row,
  .journey-row.is-reverse {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--cream-deep);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 48px rgba(47, 40, 32, 0.05);
  }

  /* Always show the image first on mobile, regardless of desktop side. */
  .journey-row.is-reverse .journey-row__copy {
    order: 1;
  }

  .journey-row.is-reverse .journey-row__media {
    order: 0;
  }

  .journey-row__media,
  .journey-row.is-reverse .journey-row__media {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin: 0;
    justify-self: start;
    border-radius: calc(var(--radius-lg) - 0.5rem);
  }

  .journey-row__copy {
    padding: 0 0.25rem 0.25rem;
  }

  .journey-row__heading {
    font-size: clamp(1.3rem, 5.6vw, 1.6rem);
  }
}

.slider-controls {
  display: flex;
  align-items: center;
  gap: 0;
}

.circle-btn {
  position: relative;
  width: 72px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: url("../images/testimonial-control-pill.svg") center / 100% 100% no-repeat;
  cursor: pointer;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.circle-btn.is-prev {
  opacity: 0.3;
}

.circle-btn img {
  width: 24px;
  height: 24px;
  display: block;
  pointer-events: none;
}

.circle-btn:hover:not([disabled]) {
  opacity: 1;
  transform: translateY(-1px);
}

.circle-btn[disabled] {
  opacity: 0.28;
  cursor: default;
  pointer-events: none;
}

.counter {
  min-width: 42px;
  padding: 0 4px;
  text-align: center;
  font-family: var(--font-ui);
  color: #1e1916;
  font-size: 14px;
  line-height: 19.6px;
  letter-spacing: 0.28px;
}

.stones-section {
  overflow: hidden;
  background: var(--paper);
  padding: clamp(3.25rem, 4vw, 4.5rem) var(--space-section-x) clamp(5rem, 6vw, 7.5rem);
}

.mandala {
  position: absolute;
  left: 50%;
  top: 32px;
  width: 280px;
  height: 160px;
  transform: translateX(-50%);
  opacity: 0.16;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(196, 154, 66, 0.4) 36%, transparent 38%),
    repeating-radial-gradient(ellipse at center, transparent 0 14px, rgba(196, 154, 66, 0.28) 15px 16px);
  border-radius: 50%;
}

.stone-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(2.5rem, 4.7vw, 5.625rem);
  width: min(1513px, 100%);
  margin: 70px auto 0;
}

.stone-card {
  position: relative;
  min-height: clamp(10.5rem, 9.9vw, 11.875rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px;
  padding: 6px 0 18px;
  overflow: visible;
  background: var(--paper);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stone-card:hover,
.stone-card:focus-visible {
  transform: translateY(-2px);
}

.stone-img {
  position: relative;
  width: 100%;
  height: clamp(6.75rem, 7.4vw, 8.875rem);
  display: grid;
  place-items: center;
  overflow: visible;
}

/* Subtle per-stone glow behind the gem (color set per card via --stone-glow). */
.stone-img::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(9rem, 11vw, 13rem);
  height: clamp(9rem, 11vw, 13rem);
  z-index: 0;
  background: radial-gradient(circle at center, var(--stone-glow, rgba(165, 138, 87, 0.4)) 0%, rgba(0, 0, 0, 0) 66%);
  transform: translate(-50%, -50%) scale(0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.stone-img img {
  position: relative;
  z-index: 1;
  width: clamp(5.5rem, 5.6vw, 6.75rem);
  height: clamp(5.5rem, 5.6vw, 6.75rem);
  object-fit: contain;
  filter: none;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.stone-card:hover .stone-img img,
.stone-card:focus-visible .stone-img img {
  transform: scale(1.06);
  filter: none;
}

.stone-card:hover .stone-img::after,
.stone-card:focus-visible .stone-img::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Per-stone glow tints, matched to each gem's colour (kept subtle). */
.stone-card[href*="stone=ruby"] { --stone-glow: rgba(203, 42, 58, 0.5); }
.stone-card[href*="stone=emerald"] { --stone-glow: rgba(26, 138, 91, 0.5); }
.stone-card[href*="stone=yellow-sapphire"] { --stone-glow: rgba(224, 168, 40, 0.5); }
.stone-card[href*="stone=diamond"] { --stone-glow: rgba(150, 183, 209, 0.5); }
.stone-card[href*="stone=pearl"] { --stone-glow: rgba(214, 205, 216, 0.55); }
.stone-card[href*="stone=red-coral"] { --stone-glow: rgba(226, 92, 63, 0.5); }
.stone-card[href*="stone=blue-sapphire"] { --stone-glow: rgba(42, 82, 190, 0.5); }
.stone-card[href*="stone=hessonite-garnet"] { --stone-glow: rgba(198, 96, 36, 0.5); }
.stone-card[href*="stone=catseye"] { --stone-glow: rgba(150, 130, 66, 0.5); }

.stone-name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: rgba(30, 39, 32, 0.66);
  font-size: clamp(0.75rem, 0.94vw, 1.125rem);
  font-weight: 700;
  line-height: 0.72;
  letter-spacing: 0.0635em;
  text-transform: uppercase;
  white-space: nowrap;
}

.stone-name .spark {
  width: 10px;
  height: 6px;
  flex: 0 0 auto;
}

.stone-card:hover .stone-name,
.stone-card:focus-visible .stone-name {
  color: #a58a57;
  background:
    #acacac -webkit-gradient(linear, 100% 0, 0 0, from(#acacac), color-stop(0.5, #ffffff), to(#acacac));
  background-position: -50rem top;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.8s infinite 0.16s;
  background-size: 50rem 100%;
}

@keyframes shimmer {
  0% {
    background-position: -50rem top;
  }

  70%,
  100% {
    background-position: 12.5rem top;
  }
}


.certifications-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 3.4vw, 2.75rem);
  overflow: hidden;
  padding: clamp(3.25rem, 4vw, 4.5rem) var(--space-section-x);
  background: var(--cream);
}

.cert-marquee {
  width: 100%;
  max-width: 62rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.cert-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: max-content;
  animation: certMarquee 22s linear infinite;
}

.cert-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5rem;
  height: 4.25rem;
  padding: 0 1.75rem;
  border: 1px solid rgba(196, 154, 66, 0.4);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

/* Fixed logo height (not a max-width squeeze) so wide marks like GII and SSEF stay legible. */
.cert-badge img {
  height: 2.25rem;
  width: auto;
  max-width: 12rem;
  object-fit: contain;
}

.cert-badge img[src*="gsi"],
.cert-badge img[src*="igi"] {
  height: 2.85rem;
}

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

.cert-note {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: var(--text-body);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .cert-marquee__track {
    animation: none;
  }
}

@media (max-width: 480px) {
  .cert-marquee__track {
    animation-duration: 16s;
  }
}

.testimonials-section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.5fr);
  gap: clamp(3rem, 4vw, 4rem);
  align-items: center;
  overflow: hidden;
  padding: var(--space-section-y) var(--space-section-x);
  padding-inline: var(--footer-content-inset);
  background: var(--paper);
}

.testimonial-flower {
  left: clamp(-10rem, -6.25vw, -6rem);
  top: 50%;
  translate: 0 -50%;
  width: clamp(22rem, 26.25vw, 31.5rem);
  z-index: 0;
}

.testimonial-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 46rem);
  justify-self: start;
  text-align: left;
}

.testimonial-copy .eyebrow {
  justify-content: flex-start;
  margin-bottom: 12px;
}

.testimonial-copy h2 {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: var(--text-section);
  line-height: var(--leading-heading);
}

.testimonial-copy p {
  max-width: 50ch;
  margin: 0;
  color: rgba(33, 52, 72, 0.6);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}

.testimonial-stage {
  display: flex;
  width: min(949px, 100%);
  justify-self: end;
  min-width: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 32px;
}

.testimonial-track {
  width: 100%;
  height: 359px;
  position: relative;
  overflow: hidden;
}

.testimonial-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  min-height: 359px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  border-radius: 24px;
  background: var(--cream-deep);
  padding: 48px;
  /* Default = an upcoming card waiting off to the right (invisible). */
  opacity: 0;
  transform: translateX(115%);
  pointer-events: none;
  transition:
    opacity 560ms ease,
    transform 720ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.testimonial-card.is-active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
  pointer-events: auto;
}

/* A card that's already been shown slides out to the left and fades. */
.testimonial-card.is-past {
  opacity: 0;
  transform: translateX(-115%);
  z-index: 1;
}

.quote-mark {
  width: 31px;
  height: 28px;
  flex: 0 0 auto;
}

.testimonial-card p {
  margin: 0;
  max-width: 31.5rem;
  color: #131f2a;
  font-size: clamp(1.25rem, 1.3vw, 1.5625rem);
  line-height: 1.4;
  text-wrap: pretty;
}

.testimonial-card footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.testimonial-card strong,
.testimonial-card small {
  display: block;
  color: #131f2a;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-caption);
}

.testimonial-card small {
  font-size: var(--text-body);
  opacity: 0.6;
}

.testimonial-card b {
  color: #ffba30;
  font-size: clamp(1.5rem, 1.63vw, 1.952rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.site-footer {
  position: relative;
  overflow: hidden;
  background: #013a2b;
  color: #fff8ec;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(1, 58, 43, 0.04);
  pointer-events: none;
}

.footer-parallax-bg {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  background: url("../images/footer-background-figma.webp") center / cover no-repeat;
  opacity: 0.2;
  will-change: transform;
}

.footer-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns:
    minmax(364px, 380px)
    minmax(112px, 0.78fr)
    minmax(126px, 0.82fr)
    minmax(290px, 1.45fr)
    minmax(168px, 0.95fr);
  justify-content: center;
  align-items: start;
  column-gap: clamp(2.25rem, 3vw, 5.5rem);
  row-gap: 4rem;
  width: min(1840px, 100%);
  margin: 0 auto;
  padding: clamp(4.75rem, 5vw, 6.25rem) clamp(2rem, 3vw, 4rem) 4.25rem;
}

.brandmark-large {
  --logo-scale: 0.82;
  width: calc(364px * var(--logo-scale));
  height: calc(66px * var(--logo-scale));
}

.brandmark-large .brand-row {
  left: calc(0.05px * var(--logo-scale));
  width: calc(362.901px * var(--logo-scale));
  height: calc(38.218px * var(--logo-scale));
}

.brandmark-large .brand-row b {
  font-size: calc(58.574px * var(--logo-scale));
  line-height: calc(38.2px * var(--logo-scale));
}

.brandmark-large .brand-row img {
  width: calc(23.923px * var(--logo-scale));
  height: calc(14.325px * var(--logo-scale));
}

.brandmark-large .brand-subline {
  left: calc(25.43px * var(--logo-scale));
  top: calc(52.07px * var(--logo-scale));
  width: calc(338.476px * var(--logo-scale));
  height: calc(13.927px * var(--logo-scale));
  font-size: calc(9.688px * var(--logo-scale));
  letter-spacing: calc(2.9064px * var(--logo-scale));
}

.brandmark-large .brand-subline b:nth-child(1) {
  left: calc(17px * var(--logo-scale));
}

.brandmark-large .brand-subline b:nth-child(2) {
  left: calc(164px * var(--logo-scale));
}

.brandmark-large .brand-subline b:nth-child(3) {
  left: calc(305.48px * var(--logo-scale));
  top: calc(0.61px * var(--logo-scale));
}

.footer-brand p {
  max-width: 29ch;
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  opacity: 0.82;
}

.site-footer h3 {
  margin: 0 0 28px;
  color: rgba(255, 248, 236, 0.5);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.site-footer section:not(.footer-brand) {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.35vw, 1.4rem);
}

.footer-pages,
.footer-services {
  justify-self: start;
  width: 100%;
}

.footer-stone-directory {
  display: contents;
  align-items: start;
}

.footer-stone-directory section {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.35vw, 1.4rem);
}

.site-footer a,
.site-footer span,
.site-footer dd {
  color: rgba(255, 248, 236, 0.88);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
}

.footer-semi-precious span {
  display: block;
}

.site-footer .footer-stone-directory .footer-stones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: clamp(2rem, 3vw, 3.75rem);
  row-gap: clamp(1rem, 1.35vw, 1.4rem);
  align-content: start;
}

.site-footer .footer-stone-directory .footer-stones h3 {
  grid-column: 1 / -1;
}

.footer-stones a,
.footer-semi-precious span {
  white-space: nowrap;
}

.footer-brand-contact {
  display: grid;
  gap: 0;
  margin: 22px 0 0;
}

.footer-brand-contact dt {
  margin-top: 14px;
  margin-bottom: 4px;
}

.footer-brand-contact dd,
.footer-brand-contact a {
  font-size: var(--text-meta);
  line-height: 1.5;
}

.site-footer dl {
  display: grid;
  gap: 0;
  margin: 0;
}

.site-footer dt {
  margin-top: 18px;
  margin-bottom: 6px;
  color: rgba(255, 248, 236, 0.4);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.site-footer dd {
  margin: 0;
  color: #fff8ec;
  line-height: 1.45;
}

/* Address: keep each line on one row, breaking only at the intended points. */
.site-footer dd.footer-address {
  font-size: var(--text-meta);
  line-height: 1.55;
  white-space: nowrap;
}

.contact-page {
  min-height: 100vh;
  min-height: 100svh;
  background:
    radial-gradient(circle at 34% 52%, rgba(196, 154, 66, 0.045), transparent 34rem),
    var(--paper);
}

.contact-navbar {
  background: linear-gradient(90deg, rgba(20, 20, 19, 0.84) 0%, rgba(42, 42, 39, 0.76) 100%);
}

.contact-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(18rem, 0.82fr) minmax(34rem, 1.18fr);
  align-items: center;
  gap: clamp(4rem, 7vw, 9rem);
  width: min(1860px, 100%);
  margin: 0 auto;
  padding: clamp(7.75rem, 12vh, 10rem) clamp(2rem, 4.2vw, 5.75rem) clamp(3rem, 5vw, 5.5rem);
  overflow: hidden;
}

.contact-mandala {
  position: absolute;
  z-index: -1;
  width: clamp(22rem, 30vw, 36rem);
  height: clamp(22rem, 30vw, 36rem);
  max-width: none;
  left: 50%;
  top: 50%;
  opacity: 0.54;
  --bloom-opacity: 0.54;
  object-fit: contain;
  translate: -50% -50%;
  pointer-events: none;
  user-select: none;
}

.contact-copy {
  max-width: 35rem;
}

.contact-copy .eyebrow {
  justify-content: flex-start;
  margin-bottom: clamp(1.5rem, 2.5vw, 2.25rem);
}

.contact-copy h1 {
  margin: 0;
  color: #201b18;
  font-family: var(--font-display);
  font-size: clamp(4rem, 4.6vw, 6.625rem);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: 0;
}

.contact-copy > p {
  max-width: 31ch;
  margin: clamp(1.35rem, 2.15vw, 2.2rem) 0 0;
  color: rgba(30, 39, 32, 0.64);
  font-size: var(--text-body);
  line-height: 1.65;
}

.contact-info-list {
  display: grid;
  gap: clamp(1.75rem, 2.6vw, 2.5rem);
  margin-top: clamp(2.35rem, 4vw, 4.25rem);
}

.contact-info-list h2 {
  margin: 0 0 1.05rem;
  color: rgba(92, 71, 58, 0.82);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.contact-info-list a,
.contact-info-list p {
  display: block;
  margin: 0.75rem 0 0;
  color: rgba(32, 27, 24, 0.9);
  font-size: var(--text-body-lg);
  line-height: 1.55;
}

.contact-info-list a {
  width: fit-content;
  max-width: 100%;
}

.contact-social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.75rem;
}

.contact-social-row a {
  margin: 0;
  color: rgba(32, 27, 24, 0.9);
  font-size: var(--text-body-lg);
  text-decoration: underline;
  text-decoration-color: rgba(196, 154, 66, 0.5);
  text-underline-offset: 3px;
}

.contact-map-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 3.4vw, 2.75rem);
  padding: 0 var(--space-section-x) var(--space-section-y);
}

.contact-map-frame {
  width: min(1282px, 100%);
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 16px 42px rgba(47, 40, 32, 0.055);
}

.contact-map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 760px) {
  .contact-map-frame {
    aspect-ratio: 4 / 5;
  }
}

.contact-form-card {
  width: min(100%, 56.25rem);
  justify-self: end;
  border: 1px solid rgba(47, 40, 32, 0.08);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 28px 90px rgba(47, 40, 32, 0.075);
  backdrop-filter: blur(14px);
}

.contact-form {
  display: grid;
  gap: clamp(1.55rem, 2.4vw, 2.35rem);
  padding: clamp(2.25rem, 4.6vw, 5.75rem) clamp(1.6rem, 4.4vw, 5.25rem) clamp(2rem, 3.8vw, 4rem);
}

.field {
  position: relative;
  display: block;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(92, 71, 58, 0.32);
  border-radius: 0;
  padding: 0 0 0.85rem;
  background: transparent;
  color: var(--ink);
  font: 400 var(--text-body-lg) / 1.45 var(--font-body);
  letter-spacing: var(--tracking-body);
  outline: 0;
}

.field select,
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(92, 71, 58, 0.58);
  opacity: 1;
}

.field textarea {
  min-height: 2.35rem;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: rgba(30, 39, 32, 0.74);
}

.phone-field {
  border-bottom: 1px solid rgba(92, 71, 58, 0.32);
}

.phone-field:focus-within {
  border-color: rgba(30, 39, 32, 0.74);
}

.phone-control {
  display: grid;
  grid-template-columns: 7.1rem 1fr;
  align-items: center;
  gap: 1.25rem;
  width: calc(100% - 6.5rem);
  padding-bottom: 0.85rem;
}

.phone-control select,
.phone-control input {
  border-bottom: 0;
  padding-bottom: 0;
}

.phone-control select {
  min-width: 0;
  padding-right: 1.35rem;
  background:
    linear-gradient(45deg, transparent 50%, rgba(30, 39, 32, 0.74) 50%) calc(100% - 0.45rem) 50% / 0.42rem 0.42rem no-repeat,
    linear-gradient(135deg, rgba(30, 39, 32, 0.74) 50%, transparent 50%) calc(100% - 0.2rem) 50% / 0.42rem 0.42rem no-repeat;
  color: rgba(92, 71, 58, 0.72);
}

.phone-control input::placeholder {
  color: rgba(92, 71, 58, 0.58);
}

.field-select::after {
  content: "";
  position: absolute;
  right: 0.15rem;
  top: 0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1.5px solid rgba(30, 39, 32, 0.78);
  border-bottom: 1.5px solid rgba(30, 39, 32, 0.78);
  transform: rotate(45deg);
  pointer-events: none;
}

.field-optional em,
.upload-field > div span {
  position: absolute;
  right: 0;
  bottom: 0.88rem;
  color: rgba(92, 71, 58, 0.6);
  font-style: normal;
  font-size: var(--text-body);
}

.upload-field {
  display: grid;
  gap: 0.9rem;
}

.upload-field > div {
  position: relative;
  min-height: 1.55rem;
}

.upload-field strong {
  color: rgba(32, 27, 24, 0.9);
  font-size: var(--text-body-lg);
  font-weight: 400;
}

.upload-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 5.75rem;
  border: 1px solid rgba(196, 154, 66, 0.22);
  border-radius: 8px;
  padding: 1.15rem clamp(1rem, 2vw, 1.7rem);
  color: rgba(32, 27, 24, 0.72);
  cursor: pointer;
}

.upload-box input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.upload-box span {
  max-width: 32ch;
  line-height: 1.45;
}

.upload-box b {
  flex: 0 0 auto;
  border-bottom: 1px solid currentColor;
  color: rgba(32, 27, 24, 0.78);
  font-weight: 400;
  line-height: 1.15;
}

.consent-row {
  display: grid;
  grid-template-columns: 1.35rem 1fr;
  align-items: start;
  gap: 0.9rem;
  color: rgba(32, 27, 24, 0.76);
  font-size: var(--text-meta);
  line-height: 1.55;
}

.consent-row input {
  width: 1.35rem;
  height: 1.35rem;
  margin: 0.1rem 0 0;
  appearance: none;
  border: 1px solid rgba(196, 154, 66, 0.28);
  border-radius: 4px;
  background: rgba(255, 248, 236, 0.45);
}

.consent-row input:checked {
  border-color: var(--deep-green);
  background:
    linear-gradient(135deg, transparent 58%, var(--deep-green) 58% 72%, transparent 72%),
    linear-gradient(45deg, transparent 45%, var(--deep-green) 45% 59%, transparent 59%),
    rgba(255, 248, 236, 0.45);
}

.consent-row a {
  border-bottom: 1px solid currentColor;
}

.contact-submit {
  min-width: 10.5rem;
  border: 0;
  cursor: pointer;
}

.contact-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.contact-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form-status {
  margin: 0;
  font: 500 var(--text-body-lg) / 1.5 var(--font-body);
  color: var(--deep-green);
}

.contact-form-status[data-state="error"] { color: #9b302c; }

.contact-actions {
  --contact-action-height: clamp(3rem, 7vh, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.875rem;
  margin-top: 0.2rem;
}

.contact-actions .button,
.contact-actions .whatsapp-cta {
  height: var(--contact-action-height);
  min-height: var(--contact-action-height);
}

.whatsapp-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0 28px;
  border: 1px solid rgba(47, 40, 32, 0.08);
  border-radius: 70px;
  background: #fff;
  color: #050505;
  font-family: var(--font-body);
  font-size: var(--text-button);
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 12px 30px rgba(47, 40, 32, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.whatsapp-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(47, 40, 32, 0.11);
}

.whatsapp-cta img {
  width: clamp(2.2rem, 5vh, 3.1rem);
  height: clamp(2.2rem, 5vh, 3.1rem);
  object-fit: contain;
  flex: 0 0 auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  border-top: 0;
  padding: 2rem var(--space-section-x) 2.5rem;
  color: rgba(255, 248, 236, 0.4);
  font-size: var(--text-meta);
}

.footer-bottom::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-section-x);
  right: var(--space-section-x);
  height: 1px;
  background: url("../images/footer-divider-figma.svg") center / 100% 100% no-repeat;
  opacity: 0.95;
}

.footer-bottom p {
  margin: 0;
}

.footer-bottom span {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-credit {
  font-size: 0.7rem;
  opacity: 0.75;
}

.navbar-detail {
  background: rgba(43, 43, 43, 0.72);
}

.gemstone-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #fff8ec 0%, #fcfbf8 42%, #fcfbf8 100%);
}

.gem-detail {
  min-height: 100vh;
  padding: clamp(8.5rem, 16vh, 11rem) var(--space-section-x) clamp(4rem, 7vw, 7rem);
}

.back-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-bottom: clamp(2rem, 4vw, 4rem);
  color: rgba(30, 39, 32, 0.62);
  font-size: var(--text-meta);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.gem-hero {
  width: min(1282px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(280px, 0.95fr);
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}

.gem-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.gem-hero__copy .eyebrow {
  justify-content: flex-start;
  color: var(--gold);
  font-weight: 700;
}

.gem-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 8.5rem);
  font-weight: 400;
  line-height: 0.96;
  letter-spacing: 0;
}

.gem-hero__copy p {
  max-width: 54ch;
  margin: 0;
  color: rgba(30, 39, 32, 0.7);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}

/* Key facts — the same dt/dd list language used across the site (footer
   contact list, journey tags), not a bespoke bordered card. */
.gem-detail-list {
  width: min(860px, 100%);
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 2.5rem) 1.5rem;
}

.gem-detail-list dt {
  margin-bottom: 0.5rem;
  color: rgba(30, 39, 32, 0.48);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.gem-detail-list dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Guide — a large image with a small brand badge overlapping its corner,
   paired with a heading, two identity pills, and the ritual note. Mirrors
   the founder-section's proportions rather than the gem-hero's gold ring. */
.gem-guide {
  width: min(1080px, 100%);
  margin: clamp(4rem, 8vw, 6.5rem) auto 0;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}

.gem-guide__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #d7decd;
  box-shadow: 0 20px 48px rgba(47, 40, 32, 0.08);
}

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

.gem-guide__badge {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--cream-deep);
  box-shadow: 0 10px 24px rgba(47, 40, 32, 0.18);
}

.gem-guide__badge img {
  width: 1.1rem;
  height: 1.1rem;
}

.gem-guide__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}

.gem-guide__copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-section);
  line-height: var(--leading-heading);
}

.gem-guide__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.gem-guide__copy p {
  max-width: 46ch;
  margin: 0;
  color: rgba(23, 19, 17, 0.72);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}

@media (max-width: 760px) {
  .gem-guide {
    grid-template-columns: 1fr;
  }

  .gem-guide__media {
    aspect-ratio: 16 / 10;
  }
}

/* Origins / Quality / Benefits — reuse the homepage's own section-heading,
   journey-row and testimonial-card language instead of one-off components. */
.gem-origins,
.gem-quality,
.gem-benefits {
  width: min(1080px, 100%);
  margin: clamp(4rem, 8vw, 6.5rem) auto 0;
}

.origin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 0.75rem;
  row-gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.gem-quality {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.gem-quality-mandala {
  left: 12%;
  top: 50%;
  translate: -50% -50%;
  opacity: 0.5;
  --bloom-opacity: 0.5;
  z-index: -1;
}

.gem-quality .journey-row {
  width: min(900px, 100%);
  margin: 0 auto;
}

.gem-quality-heading {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.15;
}

.gem-quality-intro {
  max-width: 46ch;
  margin: 0;
  color: rgba(23, 19, 17, 0.72);
  font-size: var(--text-body-lg);
  font-weight: 500;
  line-height: var(--leading-body);
}

.gem-quality-intro:empty {
  display: none;
}

.gem-quality-list {
  display: grid;
  gap: 0.6rem;
  margin: 0.25rem 0 0;
}

.gem-quality-list div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
}

.gem-quality-list dt {
  flex: 0 0 auto;
}

.gem-quality-list dd {
  margin: 0;
  color: rgba(23, 19, 17, 0.78);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.gem-quality-toggle {
  border: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: default;
}

/* Below 760px, each quality point collapses into an accordion — the pill
   becomes the tap target, and only one line of detail shows until opened. */
@media (max-width: 760px) {
  .gem-quality-list div {
    display: block;
  }

  .gem-quality-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  .gem-quality-toggle::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }

  .gem-quality-item.is-open .gem-quality-toggle::after {
    transform: rotate(-135deg);
  }

  .gem-quality-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .gem-quality-item.is-open .gem-quality-panel {
    grid-template-rows: 1fr;
  }

  .gem-quality-panel__inner {
    min-height: 0;
    overflow: hidden;
    padding-top: 0.6rem;
  }
}

/* Benefits — a single cream-deep card (same radius/shadow language as the
   testimonial cards) with each item marked by the site's gold spark motif. */
.gem-benefits-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2.5rem;
  width: min(760px, 100%);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem);
  list-style: none;
  background: var(--cream-deep);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(47, 40, 32, 0.05);
}

.gem-benefit {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  color: var(--ink);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.gem-benefit .spark {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .gem-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gem-benefits-card {
    grid-template-columns: 1fr;
  }
}

.gem-hero__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 0.75px solid transparent;
  border-radius: 24px;
  background:
    radial-gradient(circle at center, rgba(255, 248, 236, 0.92), rgba(252, 251, 248, 0.35) 58%, transparent 70%) padding-box,
    linear-gradient(135deg, #a58a57 0%, #d4af37 100%) border-box;
}

.semi-precious-detail {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(8.5rem, 16vh, 11rem) var(--space-section-x) clamp(4rem, 7vw, 7rem);
}

.semi-precious-detail .section-heading {
  width: 100%;
  max-width: 42rem;
  margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
}

.semi-precious-intro {
  margin: 0.75rem 0 0;
  color: rgba(30, 39, 32, 0.66);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}

.semi-precious-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: min(46rem, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border: 1px solid rgba(165, 138, 87, 0.22);
  border-radius: var(--radius-lg);
}

.semi-precious-item {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.5rem clamp(1.25rem, 2.5vw, 2rem);
  background: rgba(255, 248, 236, 0.58);
}

.semi-precious-item__icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.2rem;
}

.semi-precious-item h2 {
  margin: 0 0 0.35rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 400;
}

.semi-precious-item p {
  margin: 0;
  max-width: 52ch;
  color: rgba(23, 19, 17, 0.72);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

@media (max-width: 480px) {
  .semi-precious-item {
    flex-direction: column;
    gap: 0.75rem;
  }
}

.gem-hero__media::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: rgba(196, 154, 66, 0.08);
  filter: blur(42px);
}

.gem-hero__media img {
  position: relative;
  width: min(62%, 22rem);
  height: min(62%, 22rem);
  object-fit: contain;
  filter: drop-shadow(0 2rem 2rem rgba(47, 40, 32, 0.18));
}

.founder-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2.5rem, 4vw, 4rem);
  padding: var(--space-section-y) var(--space-section-x);
  padding-inline: var(--footer-content-inset);
  background: var(--paper);
}

.founder-media {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 22rem);
  aspect-ratio: 1;
  margin: 0;
  overflow: hidden;
  border: 0.75px solid transparent;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at center, rgba(255, 248, 236, 0.92), rgba(252, 251, 248, 0.35) 58%, transparent 70%) padding-box,
    linear-gradient(135deg, #a58a57 0%, #d4af37 100%) border-box;
}

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

.founder-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.founder-copy .eyebrow {
  justify-content: flex-start;
}

.founder-copy h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-section);
  line-height: var(--leading-heading);
}

.founder-copy p {
  max-width: 46ch;
  margin: 0;
  color: rgba(23, 19, 17, 0.72);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body);
}

.founder-name {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
}

.founder-name strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
}

.founder-name span {
  color: var(--muted);
  font-size: var(--text-sm);
}

@media (max-width: 760px) {
  .founder-section {
    grid-template-columns: 1fr;
    text-align: center;
    padding-inline: var(--space-section-x);
  }

  .founder-media {
    margin-inline: auto;
  }

  .founder-copy {
    align-items: center;
  }

  .founder-copy .eyebrow {
    justify-content: center;
  }

  .founder-copy p,
  .founder-name {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
  }
}

.mobile-break {
  display: none;
}

@media (max-width: 1100px) {
  .navbar {
    gap: 1.25rem;
    min-height: 68px;
  }

  .nav-link {
    font-size: var(--text-ui);
  }

  .testimonials-section,
  .footer-inner {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    width: 100%;
    justify-content: stretch;
  }

  .testimonial-track {
    height: auto;
    min-height: 352px;
  }

  .testimonial-card {
    position: relative;
    width: 100%;
    min-height: auto;
  }

  .testimonial-card:not(.is-active) {
    display: none;
  }

  .stone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .gem-hero {
    grid-template-columns: 1fr;
  }

  .gem-hero__media {
    max-width: 32rem;
    width: 100%;
  }

  .gem-quality .journey-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .gem-quality-mandala {
    display: none;
  }

  .contact-shell {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 8rem;
  }

  .contact-copy {
    max-width: 42rem;
  }

  .contact-copy h1 {
    font-size: clamp(4.25rem, 10vw, 6.25rem);
  }

  .contact-info-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 2.75rem;
  }

  .contact-form-card {
    justify-self: stretch;
    width: 100%;
  }

  .contact-mandala {
    left: 50%;
    top: 42%;
    width: clamp(18rem, 60vw, 28rem);
    height: clamp(18rem, 60vw, 28rem);
    opacity: 0.4;
    --bloom-opacity: 0.4;
  }
}

@media (max-width: 760px) {
  body.mobile-nav-open {
    overflow: hidden;
  }

  .hero {
    padding: clamp(5.75rem, 15vh, 7rem) 1.25rem clamp(2rem, 6vh, 3rem);
  }

  .hero-video {
    top: 0;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .navbar {
    top: 2.25rem;
    width: min(31.5rem, calc(100% - 2rem));
    min-height: 3.7rem;
    justify-content: center;
    padding: 0.68rem 4.4rem;
    border: 1px solid rgba(255, 248, 236, 0.12);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(1, 58, 43, 0.86) 0%, rgba(20, 51, 40, 0.78) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 248, 236, 0.1), 0 18px 44px rgba(1, 58, 43, 0.22);
    transition: border-color 0.28s ease, background-color 0.28s ease;
  }

  .navbar .nav-link {
    display: none;
  }

  .brandmark-small {
    --logo-scale: 0.82;
    position: relative;
    z-index: 72;
    margin: 0 auto;
  }

  .mobile-nav-toggle {
    position: absolute;
    z-index: 72;
    right: 1.25rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff8ec;
    cursor: pointer;
    transform: translateY(-50%);
  }

  .mobile-nav-toggle span {
    position: absolute;
    width: 1.45rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: translateY(-4px);
    transition: transform 0.28s ease, opacity 0.2s ease;
  }

  .mobile-nav-toggle span + span {
    transform: translateY(4px);
  }

  .navbar.is-open .mobile-nav-toggle span {
    transform: rotate(45deg);
  }

  .navbar.is-open .mobile-nav-toggle span + span {
    transform: rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    top: -2.25rem;
    right: auto;
    bottom: auto;
    left: calc((100vw - 100%) / -2);
    z-index: 60;
    width: 100vw;
    height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.55rem, 5.8vh, 3rem);
    padding: clamp(9.5rem, 18vh, 12rem) 1.5rem 4rem;
    background:
      linear-gradient(rgba(1, 58, 43, 0.9), rgba(1, 58, 43, 0.9)),
      url("../images/footer-background-figma.webp") center / cover no-repeat;
    color: #fff8ec;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-1rem);
    transition: opacity 0.32s ease, visibility 0.32s ease, transform 0.32s ease;
  }

  .mobile-menu::before {
    content: "";
    position: absolute;
    width: 38rem;
    height: 38rem;
    max-width: none;
    right: -18rem;
    bottom: -9rem;
    background: url("../images/mandala-subtract.svg") center / contain no-repeat;
    opacity: 0.22;
    pointer-events: none;
  }

  .mobile-menu a {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: clamp(3.25rem, 12vw, 5.1rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
    text-align: center;
  }

  .navbar.is-open .mobile-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .navbar.is-open {
    z-index: 70;
    border-color: rgba(255, 248, 236, 0.18);
    background: rgba(1, 42, 31, 0.84);
  }

  .audio-toggle {
    top: calc(2.25rem + 0.4rem);
    left: calc(50% - min(15.75rem, calc((100vw - 2rem) / 2)) + 1.35rem);
    right: auto;
    bottom: auto;
    z-index: 73;
    width: 2.9rem;
    height: 2.9rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #fff8ec;
  }

  .audio-toggle:hover {
    transform: none;
    background: transparent;
  }

  .audio-toggle svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .hero-content {
    width: 100%;
    margin-top: clamp(1.25rem, 6vh, 4rem);
  }

  .intro-section,
  .stones-section,
  .testimonials-section {
    padding: 4.5rem 1.25rem;
  }

  .journey-section {
    padding: clamp(5.25rem, 11vh, 6.5rem) 1.25rem clamp(3.5rem, 7vh, 4.5rem);
    gap: 1.25rem;
  }

  .mobile-break {
    display: block;
  }

  .stone-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 3rem;
  }

  .stone-card {
    min-height: 10.75rem;
  }

  .stone-img {
    height: 6.75rem;
  }

  .stone-img img {
    width: 4.875rem;
    height: 4.875rem;
  }

  .stone-name {
    max-width: calc(100% - 1rem);
    gap: 0.375rem;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
  }

  .stone-name .spark {
    width: 8px;
    height: 5px;
  }

  .gem-detail {
    padding: 7.5rem 1.25rem 4rem;
  }

  .gem-hero h1 {
    font-size: clamp(3.5rem, 18vw, 5.5rem);
  }

  .gem-detail-list {
    grid-template-columns: 1fr;
  }

  .contact-shell {
    min-height: auto;
    gap: 2.5rem;
    padding: 7.25rem 1.25rem 3rem;
  }

  .contact-mandala {
    left: 50%;
    top: 40%;
    width: clamp(15rem, 70vw, 22rem);
    height: clamp(15rem, 70vw, 22rem);
    opacity: 0.34;
    --bloom-opacity: 0.34;
  }

  .contact-copy h1 {
    font-size: clamp(3.25rem, 14.6vw, 4.75rem);
    line-height: 0.98;
  }

  .contact-copy > p {
    max-width: 34ch;
    margin-top: 1.15rem;
    line-height: 1.55;
  }

  .contact-info-list {
    grid-template-columns: 1fr;
    gap: 1.45rem;
    margin-top: 1.85rem;
  }

  .contact-info-list h2 {
    margin-bottom: 0.8rem;
  }

  .contact-info-list a,
  .contact-info-list p {
    margin-top: 0.48rem;
    line-height: 1.45;
  }

  .contact-form {
    gap: 1.65rem;
    padding: 2rem 1.25rem 1.5rem;
  }

  .contact-form-card {
    border-radius: 16px;
  }

  .upload-box {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.85rem;
  }

  .field-optional em,
  .upload-field > div span {
    position: static;
    display: block;
    margin-top: 0.25rem;
  }

  .phone-field em {
    position: absolute;
    right: 0;
    bottom: 0.88rem;
    margin-top: 0;
  }

  .phone-control {
    grid-template-columns: 6.35rem 1fr;
    gap: 0.8rem;
    width: calc(100% - 5.7rem);
  }

  .contact-submit {
    justify-self: stretch;
  }

  .contact-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .whatsapp-cta {
    min-height: clamp(3rem, 7vh, 4.5rem);
    padding: 0 28px;
  }

  .whatsapp-cta img {
    width: clamp(2.2rem, 5vh, 3.1rem);
    height: clamp(2.2rem, 5vh, 3.1rem);
  }

  .testimonial-copy .eyebrow {
    justify-content: flex-start;
  }

  .testimonial-copy {
    text-align: left;
  }

  .footer-inner {
    gap: 40px;
    padding-inline: 1.25rem;
  }

  .brandmark-large {
    --logo-scale: 0.95;
  }

  .footer-bottom {
    flex-direction: column;
  }
}

@media (max-height: 720px) {
  .hero {
    padding-top: 6rem;
    padding-bottom: 2rem;
  }

  .hero-content {
    gap: 0.875rem;
    margin-top: 1.5rem;
  }

  .hero h1 {
    line-height: 1.04;
  }

  .hero-content p {
    line-height: 1.45;
  }

  .button {
    min-height: 3rem;
  }
}

/* Fluid typography for very small screens — keeps section content compact. */
@media (max-width: 480px) {
  :root {
    --text-section: clamp(1.85rem, 8.4vw, 2.4rem);
    --text-intro: clamp(1.5rem, 7vw, 2.1rem);
  }

  .section-heading {
    gap: 0.5rem;
  }

  .journey-section {
    padding-top: clamp(6rem, 13.5vh, 6.5rem);
    gap: 2rem;
  }

  .journey-section .section-heading {
    margin-top: 0;
  }
}

/* ---- Soft page-transition dissolve ---- */
/* Opacity-only so no transform lands on <body> — a transformed body would
   break position:fixed (GSAP pin), blanking the pinned journey section. */
@keyframes pageDissolveIn {
  /* 0.01, not 0: looks identical, but an opacity-0 page counts as unpainted,
     which held First/Largest Contentful Paint until the fade finished. */
  from {
    opacity: 0.01;
  }
  to {
    opacity: 1;
  }
}

@keyframes pageDissolveOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

body {
  animation: pageDissolveIn 0.5s ease both;
}

:root.pt-out body {
  animation: pageDissolveOut 0.43s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }
}

/* ---- Vantara-style scroll effects ---- */

/* Scroll-linked scale-to-fit: hint the compositor, keep the zoom-out centered. */
[data-scale-fit] {
  transform-origin: center center;
  will-change: transform, border-radius;
  backface-visibility: hidden;
}

/* Scroll-triggered reveal: hide only while JS is active and motion is allowed. */
.js-reveal [data-reveal] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] {
    opacity: 1;
  }
}

/* Gemstone editorial alternative: specimen spread and a continuous reading column. */
.gem-editorial .gem-detail { max-width: 1474px; margin-inline: auto; }
.gem-editorial .gem-hero { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.gem-editorial .gem-hero__media { order: -1; position: relative; display: grid; place-items: center; aspect-ratio: 1; width: 100%; border: 1px solid rgba(165,138,87,.22); border-radius: 50% 50% 4px 4px; background: var(--cream-deep); }
.gem-editorial .gem-hero__media img { width: 72%; height: 72%; }
.gem-editorial .gem-hero h1 { font-size: clamp(3.5rem, 6vw, 6.5rem); }
.gem-editorial .gem-detail-list { width: 100%; margin: 1rem 0 .5rem; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.25rem 2rem; border-block: 1px solid rgba(165,138,87,.25); padding-block: 1.5rem; }
.gem-reading-layout { display: grid; grid-template-columns: minmax(0,.65fr) minmax(0,1.35fr); gap: clamp(3rem,6vw,6rem); margin-top: clamp(4rem,8vw,7rem); align-items: start; }
.gem-editorial .gem-guide { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 1.75rem; }
.gem-editorial .gem-guide__media { aspect-ratio: 4 / 3; }
.gem-editorial .gem-guide__copy h2 { font-size: 2.25rem; }
.gem-editorial .gem-origins, .gem-editorial .gem-quality, .gem-editorial .gem-benefits { width: 100%; margin: 0; padding-block: 2.5rem; border-top: 1px solid rgba(165,138,87,.25); }
.gem-editorial .gem-origins { padding-top: 0; border-top: 0; }
.gem-editorial .section-heading { align-items: flex-start; text-align: left; gap: .75rem; }
.gem-editorial .section-heading h2, .gem-editorial .gem-quality-heading { font-size: clamp(2rem,3vw,3rem); }
.gem-editorial .origin-row { justify-content: flex-start; margin-top: 1.5rem; }
.gem-editorial .gem-quality .journey-row { display: block; width: 100%; padding: 0; background: none; box-shadow: none; }
.gem-editorial .gem-quality .journey-row__media, .gem-editorial .gem-quality-mandala { display: none; }
.gem-editorial .gem-quality-intro { max-width: none; font-weight: 400; }
.gem-editorial .gem-quality-list { gap: 1.5rem; margin-top: 1rem; }
.gem-editorial .gem-quality-list div { display: block; }
.gem-editorial .gem-quality-list dd { margin-top: .75rem; }
.gem-editorial .gem-benefits-card { width: 100%; padding: 0; margin: 1.5rem 0 0; border-radius: 0; background: none; box-shadow: none; }
.gem-consultation { margin-top: 3rem; padding: clamp(2rem,5vw,4rem); background: var(--deep-green); color: var(--cream); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; border-radius: var(--radius-lg); }
.gem-consultation h2 { font-family: var(--font-display); font-size: var(--text-section); margin: 0; font-weight: 400; }
.gem-consultation p { max-width: 50ch; margin: 0; }
@media (max-width: 900px) {
  .gem-editorial .gem-hero { grid-template-columns: 1fr; }
  .gem-editorial .gem-hero__media { max-width: 30rem; justify-self: center; }
  .gem-reading-layout { grid-template-columns: 1fr; gap: 3rem; }
  .gem-editorial .gem-guide { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1fr); align-items: center; }
}
@media (max-width: 760px) {
  .gem-editorial .gem-guide { display: flex; }
  .gem-editorial .gem-hero h1 { font-size: clamp(3rem,13vw,4.5rem); }
  .gem-editorial .gem-benefits-card { grid-template-columns: 1fr; }
  .gem-editorial .gem-quality-list dd { margin-top: 0; }
}
.gem-consultation .eyebrow { color: #d7c39a; }
.gem-consultation .button-primary { background: var(--cream); color: var(--deep-green); }
.gem-consultation .button-primary:hover { background: var(--cream-deep); }

/* Back link: a quiet text link led by a gold-hairline arrow chip, matching
   the footer's arrow links rather than a heavy outline pill. On hover the
   chip fills gold and the arrow steps back. */
.gem-back-button {
  align-items: center;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.25rem 0.5rem 0.25rem 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--text-ui);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.gem-back-button__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border: 1px solid rgba(196, 154, 66, 0.45);
  border-radius: 50%;
  color: var(--ink);
  transition: background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, color 0.35s ease;
}
.gem-back-button svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 1.75;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.gem-back-button:hover,
.gem-back-button:focus-visible {
  color: var(--ink);
}
.gem-back-button:hover .gem-back-button__icon,
.gem-back-button:focus-visible .gem-back-button__icon {
  border-color: var(--gold-star-top);
  background: var(--gold-star-top);
  color: #013a2b;
}
.gem-back-button:hover svg,
.gem-back-button:focus-visible svg {
  transform: translateX(-3px);
}
.gem-back-button:active .gem-back-button__icon {
  transform: scale(0.96);
}
.gem-back-button:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .gem-back-button svg { transition: none; transform: none !important; }
}

/* A gem-coloured reflection, with the light sweep clipped to the specimen. */
.gem-editorial .gem-hero__media {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  box-shadow: none;
}
.gem-editorial .gem-hero__media::before {
  inset: 18%;
  background: radial-gradient(ellipse, rgba(var(--gem-glow), .28), rgba(var(--gem-glow), 0) 70%);
  opacity: 0;
  filter: blur(28px);
  transition: opacity .65s ease;
}
.gem-editorial .gem-hero__media img {
  transition: filter .65s ease;
}
.gem-shine {
  position: absolute;
  inset: 14%;
  pointer-events: none;
  mask: var(--gem-mask) center / contain no-repeat;
  -webkit-mask: var(--gem-mask) center / contain no-repeat;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.08) 43%, rgba(255,255,255,.6) 49%, rgba(255,255,255,.12) 54%, transparent 63%) 150% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .gem-editorial .gem-hero__media:hover::before { opacity: 1; }
  .gem-editorial .gem-hero__media:hover img {
    filter: drop-shadow(0 1.5rem 1.5rem rgba(47,40,32,.16)) drop-shadow(0 0 18px rgba(var(--gem-glow), .22)) brightness(1.06);
  }
  .gem-editorial .gem-hero__media:hover .gem-shine { animation: gemLightSweep 1.4s ease-in-out both; }
}
@keyframes gemLightSweep {
  0% { background-position: 150% 0; opacity: 0; }
  20% { opacity: .75; }
  75% { opacity: .6; }
  100% { background-position: -50% 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .gem-editorial .gem-hero__media img, .gem-editorial .gem-hero__media::before { transition: none; }
  .gem-editorial .gem-hero__media:hover .gem-shine { animation: none; }
}

@media (min-width: 901px) {
  .gem-reading-aside {
    position: sticky;
    top: 8rem;
    align-self: start;
  }
}

.phone-control .ts-wrapper { width: 8.5rem; flex: 0 0 8.5rem; min-width: 0; }
.phone-control .ts-control { border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; padding: 0 1.5rem 0 0; min-height: 2rem; font: inherit; color: inherit; overflow: visible; }
.phone-control .ts-control > input { width: 1px; min-width: 1px; padding: 0 !important; margin: 0 !important; font: inherit; }
.phone-control .ts-control::after { content: ''; position: absolute; right: .35rem; top: .5rem; width: .45rem; height: .45rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.phone-control .ts-dropdown { min-width: 12rem; background: var(--cream); border: 1px solid rgba(165,138,87,.25); border-radius: 12px; box-shadow: 0 12px 32px rgba(30,39,32,.12); overflow: hidden; font: var(--text-body) var(--font-body); color: var(--ink); z-index: 80; }
.phone-control .ts-dropdown .option { padding: .8rem 1rem; }
.phone-control .ts-dropdown .active { background: var(--cream-deep); color: var(--ink); }
.phone-control .ts-wrapper.focus .ts-control { color: var(--forest); }
.phone-control .ts-wrapper { width: 100%; }
.phone-control > input { min-width: 0; }

/* Titles use editorial capitalization from the source copy. */
.contact-info-list h2,
.site-footer h3 { text-transform: none; }

/* Five stones above a centered row of four on desktop. */
@media (min-width: 1101px) {
  .stone-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.35vw, 2.8125rem); }
  .stone-grid .stone-card { grid-column: span 2; }
  .stone-grid .stone-card:nth-child(6) { grid-column: 2 / span 2; }
}

.gem-editorial .gem-hero__media img { transition: filter .65s ease, transform .35s ease-out; }
.gem-cursor-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  background: rgb(var(--gem-glow));
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
}
@media (prefers-reduced-motion: reduce) {
  .gem-editorial .gem-hero__media img { transition: none; }
  .gem-cursor-spark { display: none; }
}

.gem-editorial .emerald-ring-scene { aspect-ratio: 4 / 5; }
.emerald-ring-scene .emerald-ring-finished { position: absolute; inset: 0; opacity: 0; }
.emerald-travelling-stone { position: fixed; top: 0; left: 0; object-fit: contain; pointer-events: none; z-index: 35; visibility: hidden; filter: drop-shadow(0 8px 12px rgba(30,39,32,.15)); }

.phone-control .ts-dropdown-content {
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.country-flag { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; font-size: 1.1em; margin-right: .3rem; }
.phone-control .ts-control > .item { white-space: nowrap; }
.phone-control { grid-template-columns: 8.5rem minmax(0, 1fr); }

/* A settled emerald catches light locally, without brightening the portrait. */
.emerald-ring-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.emerald-ring-scene.is-set .emerald-ring-shine { opacity: 1; }
.emerald-facet-shimmer { position: absolute; left: var(--ring-x, 46.5%); top: var(--ring-y, 52.2%); width: 4.4%; height: 4.1%; transform: translate(-50%, -50%) rotate(30deg); border-radius: 50%; background: linear-gradient(115deg, transparent 38%, rgba(110,255,190,.15) 44%, rgba(235,255,243,.75) 50%, transparent 61%) 150% 0 / 300% 100%; mix-blend-mode: screen; }
.emerald-stone-glint, .emerald-gold-glint { position: absolute; width: 3%; aspect-ratio: 1; background: radial-gradient(circle, #fff 0 7%, #e1fff0 12%, transparent 65%); opacity: 0; }
.emerald-stone-glint { left: calc(var(--ring-x, 46.5%) + 0.1%); top: calc(var(--ring-y, 52.2%) - 2%); }
.emerald-gold-glint { left: calc(var(--ring-x, 46.5%) + 1.5%); top: calc(var(--ring-y, 52.2%) + 1.6%); width: 2.2%; background: radial-gradient(circle, #fff 0 7%, #ffe9a8 14%, transparent 65%); }
.emerald-stone-glint::after, .emerald-gold-glint::after { content: ''; position: absolute; inset: 0; background: #fff9df; clip-path: polygon(50% 0, 56% 43%, 100% 50%, 56% 57%, 50% 100%, 44% 57%, 0 50%, 44% 43%); }
.emerald-ring-scene.is-set .emerald-facet-shimmer { animation: emeraldSetShimmer 4.5s ease-in-out infinite; }
.emerald-ring-scene.is-set .emerald-stone-glint { animation: emeraldSetGlint 4.5s ease-in-out infinite; }
.emerald-ring-scene.is-set .emerald-gold-glint { animation: emeraldSetGlint 4.5s .65s ease-in-out infinite; }
@keyframes emeraldSetShimmer { 0%, 12% { background-position: 150% 0; opacity: 0; } 23% { opacity: .8; } 42% { background-position: -50% 0; opacity: 0; } 100% { background-position: -50% 0; opacity: 0; } }
@keyframes emeraldSetGlint { 0%, 12%, 45%, 100% { opacity: 0; transform: scale(.35); } 24% { opacity: .95; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .emerald-ring-shine { display: none; }
}

/* Keep the seated ring catching light continuously. */
.emerald-ring-scene.is-set .emerald-facet-shimmer { animation-duration: 2.8s; }
.emerald-ring-scene.is-set .emerald-stone-glint,
.emerald-ring-scene.is-set .emerald-gold-glint { animation-duration: 2.8s; }
@keyframes emeraldSetShimmer {
  0% { background-position: 150% 0; opacity: 0; }
  20%, 65% { opacity: .8; }
  100% { background-position: -50% 0; opacity: 0; }
}
@keyframes emeraldSetGlint {
  0%, 100% { opacity: 0; transform: scale(.35); }
  45% { opacity: .95; transform: scale(1); }
}

.emerald-facet-shimmer { background-image: linear-gradient(115deg, transparent 38%, rgba(var(--ring-glow), .25) 44%, rgba(255,255,255,.8) 50%, transparent 61%); }
.emerald-stone-glint { background: radial-gradient(circle, #fff 0 7%, rgba(var(--ring-glow), .65) 18%, transparent 65%); }



@media (max-width: 760px) {
  .eyebrow:has(+ :is(h1, h2, h3, h4, h5, h6)) {
    padding-bottom: .75rem;
  }
}

@media (max-width: 760px) {
  :root { --text-xs: 0.8125rem; }
}

.phone-field .phone-control { width: 100%; }

.gem-back-button [data-button-animate-chars] { position: relative; display: inline-block; overflow: hidden; line-height: 1.3; }
.gem-back-button [data-button-animate-chars] span { display: inline-block; position: relative; text-shadow: 0 1.3em currentColor; transform: translateY(0) rotate(.001deg); transition: transform .6s cubic-bezier(.625,.05,0,1); }
.gem-back-button:hover [data-button-animate-chars] span,
.gem-back-button:focus-visible [data-button-animate-chars] span { transform: translateY(-1.3em) rotate(.001deg); }
@media (prefers-reduced-motion: reduce) {
  .gem-back-button [data-button-animate-chars] span { transition: none; transform: none !important; text-shadow: none; }
}

/* Semi-precious collection: a photographic opening and numbered specimen profiles. */
.semi-collection .semi-precious-detail { display: block; max-width: 1474px; margin-inline: auto; }
.semi-collection-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); align-items: center; gap: clamp(2rem,5vw,5rem); }
.semi-collection .semi-collection-hero .section-heading { align-items: flex-start; text-align: left; max-width: none; margin: 0; }
.semi-collection .semi-collection-hero h1 { font-size: clamp(3rem,5.2vw,5.5rem); line-height: 1.05; }
.semi-collection .semi-precious-intro { max-width: 45ch; }
.semi-collection-photo { margin: 0; }
.semi-collection-photo img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--radius-lg); }
.semi-collection-photo figcaption { margin-top: 1rem; color: var(--muted); font-size: var(--text-meta); letter-spacing: .06em; }
.semi-collection-heading { margin-top: clamp(4rem,7vw,7rem); padding-bottom: 2rem; border-bottom: 1px solid rgba(165,138,87,.25); }
.semi-collection-heading .eyebrow { justify-content: flex-start; margin-bottom: 1rem; }
.semi-collection-heading h2 { font-family: var(--font-display); font-size: var(--text-section); font-weight: 400; margin: 0 0 .75rem; }
.semi-collection-heading p { margin: 0; color: var(--muted); }
.semi-collection .semi-precious-list { width: 100%; max-width: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 3rem; border: 0; border-radius: 0; overflow: visible; }
.semi-collection .semi-precious-item { display: grid; grid-template-columns: 8rem minmax(0,1fr); gap: 1.5rem; padding: 2.5rem 0; background: transparent; border-bottom: 1px solid rgba(165,138,87,.25); align-items: center; }
.semi-stone-art { position: relative; padding-top: 1.25rem; }
.semi-stone-art svg { width: 100%; filter: drop-shadow(0 8px 10px rgba(30,39,32,.08)); }
.semi-stone-number { position: absolute; top: 0; left: 0; font-size: var(--text-meta); color: var(--muted); }
.semi-collection .semi-precious-item h2 { font-size: 2rem; margin-bottom: .4rem; }
.semi-stone-intention { display: block; color: var(--stone-tone); font-size: var(--text-meta); font-weight: 700; margin-bottom: .75rem; }
.semi-collection .gem-consultation { margin-top: 5rem; }
@media (max-width: 900px) { .semi-collection-hero { grid-template-columns: 1fr; } .semi-collection .semi-precious-list { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .semi-collection .semi-precious-item { grid-template-columns: 5rem minmax(0,1fr); gap: 1.25rem; padding-block: 2rem; } .semi-collection .semi-precious-item h2 { font-size: 1.75rem; } .semi-collection .gem-consultation { margin-top: 3rem; } }
.semi-collection .semi-collection-hero h1 { font-family: var(--font-display); font-weight: 400; margin: 0; }
.semi-stone-intention { color: color-mix(in srgb, var(--stone-tone) 55%, var(--ink)); }

.semi-stone-art img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(30,39,32,.1)); }

.site-footer h3 {
  font-weight: 400;
  text-transform: uppercase;
}

@media (max-width: 1100px), (pointer: coarse) {
  [data-reveal], [data-scroll-blur], [data-scroll-blur-lines], .symbol-row,
  html.mandala-ready [data-mandala-bloom] {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    transform: none !important;
    scale: 1 !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* Price — "Unheated | Untreated" badge plus the per-carat starting price. */
.gem-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.25rem 0 0;
}
.gem-price__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2rem;
  padding: 0 0.875rem;
  border: 1px solid rgba(165, 138, 87, 0.45);
  border-radius: 999px;
  color: var(--gold-star-bottom);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.gem-price__amount {
  color: var(--muted);
  font-size: var(--text-body);
}
.gem-price__amount strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
}
.gem-price__amount small {
  font-size: var(--text-meta);
}

/* Origin flags — SVG flags from flag-icons, sized to sit inside a pill or a sentence. */
.origin-tag {
  gap: 0.5rem;
}
.origin-flag.fi {
  width: 1.35em;
  line-height: 1em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(30, 39, 32, 0.12);
}
.origin-tag .origin-flag.fi {
  font-size: 0.95rem;
}
.origin-inline {
  white-space: nowrap;
}
.origin-inline .origin-flag {
  margin-right: 0.3em;
  vertical-align: -0.1em;
}

/* Semi-precious facts — hardness and flagged origins under each stone's copy. */
.semi-stone-facts {
  display: grid;
  gap: 0.75rem;
  margin: 1rem 0 0;
}
.semi-stone-facts div {
  display: grid;
  gap: 0.4rem;
}
.semi-stone-facts dt {
  color: rgba(30, 39, 32, 0.48);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.semi-stone-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-body);
}
.semi-stone-facts .origin-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem;
}
.semi-stone-facts .journey-row__tag {
  min-height: 1.75rem;
  padding: 0 0.7rem;
  font-size: var(--text-xs);
}

/* Footer social links — Instagram, YouTube, Google Maps. */
.footer-social {
  display: flex;
  gap: 0.625rem;
  margin-top: 1.5rem;
}
.site-footer .footer-social a {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 248, 236, 0.28);
  border-radius: 50%;
  color: rgba(255, 248, 236, 0.88);
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible {
  border-color: var(--gold-star-top);
  background: rgba(212, 175, 55, 0.14);
  color: #fff8ec;
}
.footer-social svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Phone type scale — client feedback: text read too large on phones.
   Page titles cap near 38px, section titles near 28px, lead lines near 22px. */
@media (max-width: 480px) {
  .gem-editorial .gem-hero h1,
  .semi-collection .semi-collection-hero h1 {
    font-size: 2.375rem;
    line-height: 1.08;
  }
  .contact-copy h1 {
    font-size: 2.5rem;
    line-height: 1.04;
  }
  .gem-editorial .section-heading h2,
  .gem-editorial .gem-quality-heading,
  .gem-editorial .gem-guide__copy h2,
  .section-heading h2,
  .testimonial-copy h2,
  .founder-copy h2,
  .gem-consultation h2,
  .semi-collection-heading h2 {
    font-size: 1.75rem;
  }
  .intro-copy {
    font-size: 1.375rem;
  }
  .journey-closing p {
    font-size: 1.375rem;
  }
  .semi-collection .semi-precious-item {
    align-items: start;
  }
  .semi-collection .semi-precious-item h2 {
    font-size: 1.5rem;
  }
  .gem-price__amount strong {
    font-size: 1.5rem;
  }
  .brandmark-large {
    --logo-scale: 0.72;
  }
}

/* Scrolled navbar — light frosted glass with ink text, so it recedes over
   the cream sections instead of sitting on the page as a dark slab. */
.navbar {
  transition: background-color 0.4s ease, background-image 0.4s ease, color 0.4s ease,
    border-color 0.4s ease, box-shadow 0.4s ease;
}
.navbar.is-scrolled {
  border: 1px solid rgba(196, 154, 66, 0.22);
  background: rgba(252, 251, 248, 0.58);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  box-shadow: 0 12px 36px rgba(47, 40, 32, 0.08);
  color: var(--ink);
}
.navbar.is-scrolled .brand-row b,
.navbar.is-scrolled .brand-subline {
  color: var(--ink);
  transition: color 0.4s ease;
}
.navbar.is-scrolled .nav-link {
  opacity: 0.78;
}
.navbar.is-scrolled .nav-link.active,
.navbar.is-scrolled .nav-link:hover {
  opacity: 1;
}

@media (max-width: 760px) {
  .navbar.is-scrolled .mobile-nav-toggle {
    color: var(--ink);
  }
  /* The open mobile menu is dark green, so the bar returns to its dark state. */
  .navbar.is-scrolled.is-open {
    border-color: rgba(255, 248, 236, 0.18);
    background: rgba(1, 42, 31, 0.84);
    box-shadow: none;
  }
  .navbar.is-scrolled.is-open .brand-row b,
  .navbar.is-scrolled.is-open .brand-subline,
  .navbar.is-scrolled.is-open .mobile-nav-toggle {
    color: #fff8ec;
  }
}

/* "View all" footer link: same type and colour as the other footer links,
   with a Lucide arrow that nudges forward on hover. */
.site-footer .footer-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: fit-content;
}
.site-footer .footer-link-arrow__label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: rgba(255, 248, 236, 0.55);
  transition: text-decoration-color 0.3s ease;
}
.footer-link-arrow:hover .footer-link-arrow__label,
.footer-link-arrow:focus-visible .footer-link-arrow__label {
  text-decoration-color: currentColor;
}
.footer-link-arrow__icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-link-arrow:hover .footer-link-arrow__icon,
.footer-link-arrow:focus-visible .footer-link-arrow__icon {
  transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
  .footer-link-arrow__icon {
    transition: none;
  }
}

/* Certification note + GIA Gem Encyclopaedia CTA, stacked like the journey closing. */
.cert-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Mobile menu: a floating, solid deep-green panel inset from the screen edges
   (solid rather than frosted: Chrome skips blurring some page layers, which
   let text show through).
   The navbar keeps its brandmark and close (X) above the panel, so they read
   as the panel's header row. Links are large, left-aligned, with chevrons;
   contact details, WhatsApp/call shortcuts and the consultation CTA sit below.
   The navbar is transformed, so "fixed" here is relative to it, hence the
   offsets back out to the viewport edges. */
@media (max-width: 760px) {
  .mobile-menu {
    --menu-inset: 0.75rem;
    top: calc(-2.25rem + var(--menu-inset));
    left: calc((100vw - 100%) / -2 + var(--menu-inset));
    width: calc(100vw - var(--menu-inset) * 2);
    height: calc(100dvh - var(--menu-inset) * 2);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2rem;
    padding: 6.25rem 1.5rem 1.5rem;
    border: 1px solid rgba(255, 248, 236, 0.12);
    border-radius: 28px;
    background:
      radial-gradient(120% 60% at 100% 0%, rgba(212, 175, 55, 0.1), transparent 60%),
      linear-gradient(180deg, #013a2b 0%, #01241b 100%);
    box-shadow: inset 0 1px 0 rgba(255, 248, 236, 0.08), 0 30px 80px rgba(0, 20, 14, 0.45);
    transform: translateY(-0.5rem) scale(0.985);
    transform-origin: top center;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .navbar.is-open .mobile-menu {
    transform: none;
  }
  .mobile-menu::before {
    width: 26rem;
    height: 26rem;
    right: -12rem;
    bottom: auto;
    top: -8rem;
    opacity: 0.1;
  }

  /* Reset the old full-screen link styling for everything inside the panel. */
  .mobile-menu a {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    text-align: left;
  }

  .mobile-menu__links {
    position: relative;
    z-index: 1;
    display: grid;
  }
  .mobile-menu .mobile-menu__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    color: #fff8ec;
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1.15;
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 55ms + 90ms);
  }
  .mobile-menu__chevron {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    color: rgba(255, 248, 236, 0.45);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.35s ease;
  }
  .mobile-menu .mobile-menu__links a:active .mobile-menu__chevron,
  .mobile-menu .mobile-menu__links a:focus-visible .mobile-menu__chevron {
    color: var(--gold-star-top);
    transform: translateX(3px);
  }

  .mobile-menu__contact {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.25rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 248, 236, 0.14);
    opacity: 0;
    transform: translateY(0.75rem);
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.32s, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.32s;
  }
  .navbar.is-open .mobile-menu__links a,
  .navbar.is-open .mobile-menu__contact {
    opacity: 1;
    transform: none;
  }
  .mobile-menu__contact dl {
    display: grid;
    gap: 1rem;
    margin: 0;
  }
  .mobile-menu__contact dt {
    margin-bottom: 0.3rem;
    color: rgba(255, 248, 236, 0.55);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }
  .mobile-menu__contact dd {
    margin: 0;
    color: rgba(255, 248, 236, 0.9);
    font-size: var(--text-body);
    line-height: 1.45;
  }
  .mobile-menu__contact dd a {
    color: inherit;
  }
  .mobile-menu__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  /* WhatsApp and call shortcuts: icons on their own, no backing circles. */
  .mobile-menu .mobile-menu__icon {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-left: -0.15rem;
    transition: transform 0.2s ease;
  }
  .mobile-menu__icon img {
    width: 2.5rem;
    height: 2.5rem;
  }
  .mobile-menu .mobile-menu__icon--call {
    color: #fff8ec;
  }
  .mobile-menu__icon--call svg {
    width: 1.75rem;
    height: 1.75rem;
  }
  .mobile-menu .mobile-menu__icon:active {
    transform: scale(0.94);
  }

  /* While open, the bar itself steps back so only the panel reads. */
  .navbar.is-open,
  .navbar.is-scrolled.is-open {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.mobile-nav-open .audio-toggle {
    opacity: 0;
    pointer-events: none;
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu .mobile-menu__links a,
  .mobile-menu__contact {
    transform: none !important;
    transition: opacity 0.2s ease, visibility 0.2s;
    transition-delay: 0s;
  }
}

/* Client refinements: keep the established cream, forest and gold palette. */
.intro-section { scroll-margin-top: 150px; }
.why-ruemsa { max-width: 65ch; }
.why-ruemsa h2 { margin: 0 0 .75rem; font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; }
.why-ruemsa p { margin: 0; line-height: 1.7; color: var(--muted); }
.why-ruemsa .why-ruemsa__name { margin-top: .9rem; font-size: var(--text-meta); }
.shipping-note { color: var(--forest); font-size: var(--text-body); }
.journey-closing .shipping-note { font-size: var(--text-body); margin: -.25rem 0 .75rem; }
.media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 2rem; text-align: center; color: var(--deep-green); background: var(--cream-deep); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); border-radius: var(--radius-lg); }
.media-placeholder > img { width: 48px; height: 48px; object-fit: contain; }
.media-placeholder strong { font-weight: 500; font-size: 1.1rem; }
.media-placeholder > span:not(.instagram-monogram), .media-placeholder small { color: var(--muted); font-size: var(--text-meta); line-height: 1.5; }
.journey-row__media .journey-photo-placeholder { width: 100%; height: 100%; min-height: 260px; aspect-ratio: 4 / 3; }
.journey-row__media .journey-photo-placeholder img { width: 48px; height: 48px; border-radius: 0; aspect-ratio: 1; }
.work-section, .instagram-section { padding: var(--space-section-y) var(--space-section-x); scroll-margin-top: 130px; }
.work-section { background: var(--paper); }
.instagram-section { background: var(--cream); text-align: center; }
.work-section .section-heading p, .instagram-section .section-heading p { max-width: 60ch; margin: .5rem auto 0; color: var(--muted); line-height: 1.6; }
.work-gallery, .instagram-placeholders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2rem); width: min(100%, 1200px); margin: 2.5rem auto; }
.work-gallery figure { margin: 0; }
.work-gallery .media-placeholder { min-height: 260px; aspect-ratio: 4 / 3; }
.work-gallery figcaption { font-size: var(--text-meta); color: var(--muted); line-height: 1.6; margin-top: .9rem; }
.instagram-placeholders .media-placeholder { aspect-ratio: 1; }
.instagram-monogram { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.2; }
.gem-property-note { max-width: 65ch; font-size: var(--text-meta); line-height: 1.6; color: var(--muted); margin: 1rem 0 1.5rem; }
.gem-property-note a { color: var(--forest); text-underline-offset: .2em; }
.ring-photo-note { position: absolute; z-index: 5; bottom: 1rem; left: 1rem; right: 1rem; padding: .65rem .85rem; border-radius: 10px; background: var(--cream); color: var(--deep-green); font-size: var(--text-meta); text-align: center; }
.property-references { width: min(100% - 3rem, 900px); margin: 4rem auto; color: var(--ink); line-height: 1.7; }
.property-references h1, .property-references h2 { font-family: var(--font-display); line-height: 1.2; font-weight: 400; }
.property-references h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.property-references a { color: var(--forest); }
.property-table-wrap { overflow-x: auto; }
.property-references table { width: 100%; border-collapse: collapse; margin-block: 2rem; }
.property-references th, .property-references td { text-align: left; padding: .75rem; border-bottom: 1px solid var(--gold); }
.property-references tbody th { font-weight: 500; }
.founder-section { scroll-margin-top: 130px; grid-template-columns: minmax(0, 22rem) minmax(0, 38rem); justify-content: center; gap: clamp(2rem, 4vw, 4rem); }
.founder-media { width: 100%; }
.founder-copy p { max-width: 52ch; }
@media (max-width: 760px) {
  .founder-section { grid-template-columns: 1fr; gap: 2rem; }
  .founder-media { max-width: 22rem; }
  .work-gallery, .instagram-placeholders { grid-template-columns: 1fr; max-width: 32rem; }
  .instagram-placeholders { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
  .instagram-placeholders .media-placeholder { padding: .75rem .4rem; gap: .5rem; }
  .instagram-placeholders .media-placeholder > span:not(.instagram-monogram) { font-size: .7rem; }
  .instagram-monogram { font-size: 1rem; }
  .instagram-placeholders .media-placeholder img { width: 32px; height: 32px; }
  .journey-row__media .journey-photo-placeholder { min-height: 230px; padding: 1.5rem; }
}

/* FAQ refinement using the existing RUEMSA tokens and native disclosures. */
.faq-section { padding: clamp(4rem, 7vw, 7rem) var(--space-section-x); background: var(--cream); scroll-margin-top: 130px; }
.faq-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 6vw, 6rem); max-width: 1200px; margin-inline: auto; align-items: start; }
.faq-intro h2 { margin: 0 0 1.25rem; font-family: var(--font-display); font-size: clamp(2.25rem, 3.5vw, 3.5rem); font-weight: 400; line-height: 1.12; color: var(--deep-green); text-wrap: balance; }
.faq-intro > p { max-width: 34ch; margin: 0; font-size: var(--text-body); line-height: 1.75; color: var(--muted); }
.faq-help { margin-top: clamp(2rem, 4vw, 4rem); }
.faq-help p { margin: 0 0 1rem; line-height: 1.65; font-size: var(--text-body); color: var(--muted); }
.faq-help a { display: inline-flex; align-items: center; gap: 1.5rem; color: var(--forest); font-size: var(--text-body); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; padding-block: .5rem; }
.faq-help a span { font-size: 1.25rem; transition: transform 200ms ease; }
.faq-help a:hover span { transform: translate(2px, -2px); }
.faq-list { min-width: 0; margin: 0; border-top: 1px solid color-mix(in srgb, var(--deep-green) 22%, transparent); }
.faq-item { border-bottom: 1px solid color-mix(in srgb, var(--deep-green) 16%, transparent); }
.faq-item summary { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: 1.25rem; align-items: center; min-height: 88px; padding: 1.5rem .75rem 1.5rem 0; font-size: 1.0625rem; line-height: 1.5; font-weight: 500; cursor: pointer; list-style: none; color: var(--ink); transition: color 180ms ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: var(--forest); }
.faq-item summary:focus-visible, .faq-help a:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; border-radius: 4px; }
.faq-toggle { position: relative; width: 2rem; height: 2rem; border: 1px solid color-mix(in srgb, var(--forest) 24%, transparent); border-radius: 50%; color: var(--forest); transition: background-color 180ms ease, color 180ms ease; }
.faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 180ms ease; }
.faq-item[open] .faq-toggle { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.faq-item[open] .faq-toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-answer { padding: 0 3.5rem 1.75rem 0; }
.faq-answer p { max-width: 60ch; margin: 0; color: var(--muted); font-size: var(--text-body); line-height: 1.8; }
@media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-answer { animation: faq-answer-in 220ms ease-out both; } }
@keyframes faq-answer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; max-width: 700px; }
  .faq-intro > p { max-width: 52ch; }
  .faq-help { margin-top: 1.5rem; }
  .faq-help p { display: none; }
}
@media (max-width: 480px) {
  .faq-item summary { min-height: 80px; padding-block: 1.25rem; padding-right: 0; font-size: 1rem; gap: 1rem; }
  .faq-answer { padding-right: 1rem; padding-bottom: 1.5rem; }
  .faq-intro h2 { font-size: 2.25rem; }
}
@media (prefers-reduced-motion: reduce) { .faq-toggle, .faq-toggle::after, .faq-help a span { transition: none; } .faq-help a:hover span { transform: none; } }
.legal-shell { padding: 11rem var(--space-section-x) var(--space-section-y); background: var(--paper); }
.legal-heading { max-width: 850px; margin: 0 auto 4rem; text-align: center; }
.legal-heading h1 { font-family: var(--font-display); font-size: var(--text-section); font-weight: 400; margin: 1rem 0; line-height: 1.1; }
.legal-heading > p { color: var(--muted); font-size: var(--text-meta); line-height: 1.6; }
.legal-heading .policy-draft { background: var(--cream-deep); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); padding: 1rem 1.5rem; border-radius: 12px; max-width: 65ch; margin: 1.5rem auto 0; }
.legal-layout { display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 700px); gap: clamp(2rem, 5vw, 5rem); max-width: 1100px; margin: auto; align-items: start; }
.legal-toc { position: sticky; top: 130px; display: flex; flex-direction: column; gap: .85rem; }
.legal-toc h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; margin: 0 0 .5rem; }
.legal-toc a { color: var(--muted); font-size: var(--text-meta); line-height: 1.5; text-decoration: none; }
.legal-toc a:hover { color: var(--forest); text-decoration: underline; }
.legal-content section { scroll-margin-top: 140px; margin-bottom: 2.75rem; }
.legal-content h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.25; font-weight: 400; margin: 0 0 1rem; }
.legal-content p { color: var(--muted); line-height: 1.85; font-size: var(--text-body); margin: 0 0 1rem; }
.legal-content a { color: var(--forest); overflow-wrap: anywhere; text-underline-offset: .2em; }
.legal-content code { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .legal-shell { padding-top: 8rem; }
  .legal-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .legal-toc { position: static; padding-bottom: 2rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
  .legal-heading { margin-bottom: 2.5rem; }
}


/* Restore photographic placeholders within the original rounded image frames. */
.journey-row__media, .photo-preview { position: relative; }
.photo-preview { overflow: hidden; border-radius: var(--radius-lg); background: var(--cream-deep); aspect-ratio: 4 / 3; }
.photo-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-placeholder-label { position: absolute; bottom: .8rem; left: .8rem; max-width: calc(100% - 1.6rem); padding: .4rem .65rem; border-radius: 6px; background: var(--cream); color: var(--deep-green); font-size: .6875rem; line-height: 1.4; letter-spacing: .02em; }
.instagram-placeholders .photo-preview { aspect-ratio: 1; }
.journey-row__media > img { display: block; }
@media (max-width: 760px) {
  .instagram-placeholders .photo-placeholder-label { left: .35rem; bottom: .35rem; max-width: calc(100% - .7rem); padding: .25rem .35rem; font-size: .6rem; }
}

#gem-remedies { scroll-margin-top: 140px; }


/* Official Instagram embeds: three columns when each post has room. */
.instagram-embeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(1rem, 2vw, 2rem); width: min(100%, 1200px); margin: 2.5rem auto; text-align: left; }
.instagram-reel { min-width: 0; }
.instagram-reel .instagram-media, .instagram-reel iframe.instagram-media { width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-shadow: none !important; border: 1px solid rgba(30,39,32,.12) !important; border-radius: 12px !important; }
.instagram-reel-link { display: inline-block; margin-top: .85rem; padding-block: .35rem; color: var(--forest); font-size: var(--text-meta); text-underline-offset: .25em; }
@media (max-width: 1100px) { .instagram-embeds { grid-template-columns: 1fr; max-width: 540px; gap: 2rem; } }


/* One CSS-only hero entrance; JS parallax/scale hooks are absent on this hero. */
html:not(.pt-out) body:has(> .hero) { animation: none; }
.hero { isolation: isolate; }
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-media .hero-video { scale: 1.1; will-change: auto; }
.hero h1 .hero-line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-media { animation: hero-media-fade 1.4s ease backwards; }
  .hero-media .hero-video { animation: hero-media-settle 2.6s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero h1 .hero-line { animation: hero-line-rise 1.1s cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero h1 .hero-line:nth-child(1) { animation-delay: .22s; }
  .hero h1 .hero-line:nth-child(2) { animation-delay: .36s; }
  .hero h1 .hero-line:nth-child(3) { animation-delay: .5s; }
  .hero-content > p { animation: hero-copy-rise 1.2s cubic-bezier(.16, 1, .3, 1) .62s backwards; }
  .hero-content > .button { animation: hero-copy-rise 1.2s cubic-bezier(.16, 1, .3, 1) .74s backwards; }
  .anim-hold .hero-media, .anim-hold .hero-video, .anim-hold .hero-line, .anim-hold .hero-content > p, .anim-hold .hero-content > .button { animation-play-state: paused; }
  @keyframes hero-media-fade { from { opacity: 0; } }
  @keyframes hero-media-settle { from { scale: 1.2; } }
  @keyframes hero-line-rise { from { translate: 0 105%; clip-path: inset(-.25em -.25em 105% -.25em); } to { translate: 0 0; clip-path: inset(-.25em); } }
  @keyframes hero-copy-rise { from { opacity: 0; translate: 0 18px; } }
}


/* Frame the Instagram header and 4:5 player; crop the social footer. */
.instagram-reel { container-type: inline-size; }
.instagram-player-frame { height: calc(125cqw + 54px); overflow: hidden; overflow: clip; border: 1px solid rgba(30,39,32,.12); border-radius: var(--radius-lg); background: var(--paper); }
.instagram-player-frame .instagram-media, .instagram-player-frame iframe.instagram-media { border: 0 !important; border-radius: 0 !important; }


/* Consultation invitation: Indian mandala engraving within the existing palette. */
.journey-closing { position: relative; isolation: isolate; width: min(100%, 1200px); display: block; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.25rem, 4vw, 4rem); border: 1px solid rgba(179,145,77,.38); border-radius: var(--radius-lg); background: var(--cream); overflow: hidden; scroll-margin-top: 140px; }
.journey-closing::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(179,145,77,.18); border-radius: 12px; pointer-events: none; }
.consultation-ornaments { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.consultation-mandala { position: absolute; width: clamp(260px, 34vw, 460px); height: auto; aspect-ratio: 1; opacity: .28; }
.consultation-mandala--left { left: clamp(-300px, -23vw, -170px); top: -17%; rotate: 12deg; }
.consultation-mandala--right { right: clamp(-300px, -23vw, -170px); bottom: -17%; rotate: -12deg; }
.consultation-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.consultation-flourish { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-bottom: .25rem; }
.consultation-flourish span { display: block; width: 64px; height: 1px; background: rgba(179,145,77,.55); }
.consultation-flourish img { display: block; width: 22px; height: 22px; object-fit: contain; }
.journey-closing h2 { margin: 0; color: var(--deep-green); font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3.8vw, 3.75rem); line-height: 1.12; text-wrap: balance; }
.journey-closing .shipping-note { margin: 0; font-family: var(--font-body); font-size: var(--text-body); line-height: 1.65; color: var(--muted); }
.journey-closing .button { margin-top: .5rem; min-height: 3.5rem; padding-inline: 2rem; }
@media (max-width: 760px) {
  .journey-closing { margin-top: 3rem; padding: 3rem 1.5rem; }
  .consultation-content { gap: 1.25rem; }
  .consultation-mandala { width: 300px; opacity: .18; }
  .consultation-mandala--left { left: -230px; top: -80px; }
  .consultation-mandala--right { right: -230px; bottom: -80px; }
  .journey-closing .button { padding-inline: 1.15rem; font-size: .8125rem; max-width: 100%; }
  .consultation-flourish span { width: 42px; }
}


/* Stable bento frames, with one photographic crossfade at a time. */
.work-gallery--bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(180px, 20vw, 250px)); gap: clamp(.75rem, 1.5vw, 1.5rem); max-width: 1200px; margin-bottom: 1.25rem; }
.gallery-tile { position: relative; overflow: hidden; min-width: 0; border-radius: var(--radius-lg); background: var(--cream-deep); isolation: isolate; }
.gallery-tile--feature { grid-column: span 2; grid-row: span 2; }
.gallery-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1100ms cubic-bezier(.16, 1, .3, 1); }
.gallery-image.is-current { opacity: 1; }
.gallery-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; max-width: 1200px; margin: 0 auto; }
.gallery-footer p { max-width: 65ch; margin: 0; color: var(--muted); font-size: var(--text-meta); line-height: 1.6; }
.gallery-motion-toggle { flex-shrink: 0; min-height: 44px; padding: .5rem 0 .5rem 1rem; border: 0; background: transparent; color: var(--forest); font: inherit; font-size: var(--text-meta); cursor: pointer; text-decoration: underline; text-underline-offset: .3em; }
.gallery-motion-toggle[hidden] { display: none; }
.gallery-motion-toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .work-gallery--bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(260px, 78vw, 420px) repeat(2, clamp(150px, 43vw, 240px)); max-width: 100%; gap: .75rem; }
  .gallery-tile--feature { grid-column: 1 / -1; grid-row: auto; }
  .gallery-footer { align-items: flex-start; gap: 1rem; }
  .gallery-footer p { max-width: 28ch; }
}
@media (prefers-reduced-motion: reduce) { .gallery-image { transition: none; } }


/* Forest-green consultation box, with gold engraving and cream typography. */
.journey-closing { background: var(--deep-green); border-color: rgba(196,154,66,.65); }
.journey-closing::before { border-color: rgba(196,154,66,.32); }
.journey-closing h2 { color: var(--cream); }
.journey-closing .shipping-note { color: rgba(255,248,236,.8); }
.journey-closing .consultation-mandala { opacity: .5; }
.journey-closing .button { color: var(--deep-green); background: var(--cream); border-color: var(--cream); }
.journey-closing .button:hover { color: var(--deep-green); background: var(--cream-deep); }
.journey-closing .button:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
@media (max-width: 760px) { .journey-closing .consultation-mandala { opacity: .32; } }


/* Page-level navigation stays above section stacking contexts and media. */
.navbar, .navbar.is-open { z-index: 100; }

/* Default to page gestures; opt into embedded-player gestures deliberately. */
.instagram-player-frame { position: relative; }
.instagram-player-frame.has-scroll-guard:not(.is-interactive) iframe { pointer-events: none; }
.instagram-scroll-gate { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; border: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y pinch-zoom; }
.instagram-scroll-gate span { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: .5rem .8rem; border-radius: 8px; background: var(--cream); color: var(--deep-green); font: 500 .75rem var(--font-body); opacity: 0; transition: opacity 150ms ease; }
.instagram-scroll-gate:hover span, .instagram-scroll-gate:focus-visible span { opacity: 1; }
.instagram-scroll-gate:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; }
.instagram-scroll-done { position: absolute; right: .65rem; top: .65rem; z-index: 2; min-height: 44px; padding: .5rem 1rem; border: 1px solid var(--deep-green); border-radius: 999px; background: var(--cream); color: var(--deep-green); font: 600 .8125rem var(--font-body); cursor: pointer; }
.instagram-scroll-gate[hidden], .instagram-scroll-done[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .instagram-scroll-gate span { transition: none; } }

/* Endless native scroll-snap testimonials. Existing card palette and type stay. */
.testimonials-section { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; scroll-margin-top: 130px; }
.testimonial-copy { justify-self: center; text-align: center; max-width: 700px; }
.testimonial-copy .eyebrow { justify-content: center; }
.testimonial-copy p { margin-inline: auto; }
.testimonial-stage { width: 100%; max-width: none; align-items: center; justify-self: stretch; gap: 1.25rem; }
.testimonial-track { position: relative; display: flex; align-items: stretch; gap: 32px; width: 100vw; height: auto; min-height: 0; max-width: none; align-self: center; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scroll-behavior: auto; scrollbar-width: none; cursor: grab; padding-block: 1rem; }
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track .testimonial-card { position: relative; inset: auto; display: flex; flex: 0 0 min(629px, 80%); width: auto; min-height: 359px; margin: 0; scroll-snap-align: center; opacity: .55; transform: scale(.9); pointer-events: auto; will-change: auto; z-index: auto; transition: transform 750ms cubic-bezier(.65,0,.35,1), opacity 750ms cubic-bezier(.65,0,.35,1); }
.testimonial-track .testimonial-card.is-active { transform: scale(1); opacity: 1; z-index: auto; }
.testimonial-track.is-jumping, .testimonial-track.is-animating, .testimonial-track.is-dragging { scroll-snap-type: none; scroll-behavior: auto; }
.testimonial-track.is-jumping .testimonial-card { transition: none; }
.testimonial-track.is-dragging { cursor: grabbing; user-select: none; }
.testimonial-track:focus-visible { outline: 2px solid var(--forest); outline-offset: -4px; }
.testimonial-stage .slider-controls { gap: 1.5rem; }
.testimonial-stage .circle-btn.is-prev { opacity: 1; }
.testimonial-dots { display: flex; align-items: center; gap: .25rem; color: var(--forest); }
.testimonial-dots button { display: grid; place-items: center; width: 32px; height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.testimonial-dots button::after { content: ""; width: 8px; height: 8px; border-radius: 99px; background: currentColor; opacity: .25; transition: opacity .3s; }
.testimonial-dots button[aria-current="true"]::after { width: 24px; opacity: 1; }
.testimonial-dots button:focus-visible, .testimonial-pause:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 4px; }
.testimonial-pause { min-height: 44px; padding: .5rem 1rem; border: 0; background: transparent; color: var(--forest); font: inherit; font-size: var(--text-meta); cursor: pointer; text-decoration: underline; text-underline-offset: .3em; }
.testimonial-pause[hidden] { display: none; }
@media (max-width: 767px) {
  .testimonial-track { gap: 16px; }
  .testimonial-track .testimonial-card { flex-basis: 86vw; transform: none; padding: 1.75rem; min-height: 352px; }
  .testimonial-track .testimonial-card.is-active { transform: none; }
  .testimonial-card footer { gap: 1rem; }
  .testimonial-card b { font-size: 1.35rem; }
  .testimonial-stage .slider-controls { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track .testimonial-card { transition: none; transform: none; }
  .testimonial-dots button::after { transition: none; }
}

/* Brand introduction: overline, two-line statement and a single story link. */
.intro-section { gap: 0; padding-block: clamp(4.5rem, 8vw, 8rem); }
.intro-section > .eyebrow { margin-bottom: clamp(1.75rem, 3vw, 3rem); }
.intro-section .intro-copy { width: min(1100px, 100%); font-size: clamp(1.125rem, 4.05vw, 3.75rem); line-height: 1.22; letter-spacing: -.025em; opacity: 1; }
.intro-section .intro-line { white-space: nowrap; }
.intro-why-link { display: inline-flex; align-items: center; gap: 1.5rem; margin-top: clamp(1.75rem, 3vw, 3rem); padding: .75rem .8rem .75rem 1.5rem; min-height: 56px; border: 1px solid rgba(0,96,57,.3); border-radius: 999px; color: var(--forest); font-size: var(--text-body); font-weight: 500; text-decoration: none; transition: background-color 200ms ease, border-color 200ms ease; }
.intro-why-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--forest); color: var(--cream); font-size: 1.1rem; transition: transform 200ms ease; }
.intro-why-link:hover { background: var(--cream-deep); border-color: var(--forest); }
.intro-why-link:hover .intro-why-arrow { transform: rotate(45deg); }
.intro-why-link:focus-visible { outline: 2px solid var(--forest); outline-offset: 5px; }
.intro-section .symbol-row { margin-top: clamp(2.5rem, 5vw, 5rem); }
.why-shell { padding: 11rem var(--space-section-x) var(--space-section-y); background: var(--paper); }
.why-heading { max-width: 1000px; margin: 0 auto 5rem; text-align: center; }
.why-back { display: inline-block; margin-bottom: 2.5rem; color: var(--forest); font-size: var(--text-meta); text-underline-offset: .3em; }
.why-heading h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 4.5rem); color: var(--deep-green); line-height: 1.12; margin: 1.5rem 0; }
.why-heading > p { max-width: 58ch; margin: 0 auto; color: var(--muted); line-height: 1.75; }
.why-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 1200px; margin: auto; }
.why-story figure { margin: 0; }
.why-story figure img { display: block; width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover; border-radius: var(--radius-lg); }
.why-story figcaption { margin-top: 1rem; font-size: var(--text-meta); color: var(--muted); }
.why-story h2, .why-name h2, .why-founder h2 { margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.15; color: var(--deep-green); }
.why-story-copy > div { padding-block: 1.5rem; border-top: 1px solid rgba(196,154,66,.3); }
.why-story h3 { font-weight: 500; font-size: 1.125rem; margin: 0 0 .75rem; }
.why-story-copy p { color: var(--muted); line-height: 1.75; margin: 0; max-width: 56ch; font-size: var(--text-body); }
.why-name { text-align: center; max-width: 1000px; margin: clamp(5rem, 9vw, 8rem) auto; }
.why-name > p { color: var(--muted); line-height: 1.7; }
.why-name-stones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.why-name-stones figure { margin: 0; }
.why-name-stones img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.why-name-stones figcaption { font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2.25rem); }
.why-name-stones strong { color: var(--forest); }
.why-founder { max-width: 65ch; text-align: center; margin: 0 auto 4rem; }
.why-founder p { line-height: 1.8; color: var(--muted); }
.why-founder a { color: var(--forest); text-underline-offset: .3em; }
.why-action { text-align: center; }
.why-action p { font-size: var(--text-meta); color: var(--muted); margin-top: 1.25rem; }
@media (max-width: 760px) {
  .intro-section .intro-copy { font-size: clamp(1rem, 4.65vw, 2.2rem); }
  .intro-section .eyebrow { font-size: .65rem; }
  .why-shell { padding-top: 8rem; }
  .why-heading { margin-bottom: 3rem; }
  .why-story { grid-template-columns: 1fr; }
  .why-story figure img { aspect-ratio: 4/3; }
  .why-name-stones { gap: .5rem; }
  .why-action .button { font-size: .8rem; padding-inline: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .intro-why-link, .intro-why-arrow { transition: none; } .intro-why-link:hover .intro-why-arrow { transform: none; } }


/* Contain horizontal swipes only; vertical gestures continue scrolling the page. */
.testimonial-track { overscroll-behavior-y: auto; touch-action: pan-x pan-y pinch-zoom; }

/* Inner-page consultation panels share the homepage's engraved green treatment. */
.gem-consultation { position: relative; isolation: isolate; overflow: hidden; display: block; padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem); background: var(--deep-green); border: 1px solid rgba(196,154,66,.65); scroll-margin-top: 140px; }
.gem-consultation::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(196,154,66,.32); border-radius: 12px; pointer-events: none; }
.gem-consultation .consultation-mandala { opacity: .5; }
.gem-consultation h2 { max-width: 20ch; color: var(--cream); font-size: clamp(2rem, 3.8vw, 3.75rem); line-height: 1.12; text-wrap: balance; }
.gem-consultation p { max-width: 50ch; color: rgba(255,248,236,.8); font-size: var(--text-body); line-height: 1.65; }
.gem-consultation .button { margin-top: .5rem; min-height: 3.5rem; padding-inline: 2rem; }
.gem-consultation .button:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
@media (max-width: 760px) {
  .gem-consultation { padding: 3rem 1.5rem; }
  .gem-consultation .consultation-mandala { opacity: .32; }
  .gem-consultation .button { max-width: 100%; padding-inline: 1.15rem; font-size: .8125rem; }
}

/* Why RUEMSA uses the shared section, heading, overline and journey text system. */
.why-home { padding: var(--space-section-y) var(--space-section-x); background: var(--paper); scroll-margin-top: 130px; }
.why-home-heading { max-width: var(--content-max-width); margin-inline: auto; }
.why-home-heading .section-description { max-width: 65ch; margin: .5rem auto 0; color: var(--muted); font-size: var(--text-body-lg); line-height: var(--leading-body); }
.why-home-top { max-width: 850px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.why-home-gems { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); align-items: start; }
.why-home-gem { margin: 0; text-align: center; }
.why-home-gem img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.why-home-gem figcaption { margin-top: .75rem; color: var(--muted); font-size: var(--text-body); line-height: var(--leading-caption); }
.why-home-gem strong { font-weight: 700; color: var(--forest); }
.why-home-story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 3.5rem); max-width: var(--content-max-width); margin: clamp(3rem, 6vw, 5rem) auto 0; }
.why-home-photo { margin: 0; }
.why-home-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-lg); }
.why-home-principles { display: flex; flex-direction: column; gap: 2rem; }
.why-home-principles > div { display: flex; flex-direction: column; gap: .85rem; }
.why-home-principles .journey-row__text { max-width: 52ch; }
@media (max-width: 760px) {
  .why-home { padding: 4.5rem 1.25rem; }
  .why-home-story { grid-template-columns: 1fr; gap: 2rem; }
  .why-home-gems { gap: .75rem; }
  .why-home-gem figcaption { font-size: var(--text-meta); }
}

/* width/height attributes on every img only reserve the aspect ratio (no layout
   shift while loading). :where() keeps this at zero specificity, so any CSS
   size rule still wins and nothing renders at a different size. */
:where(img[width][height]) {
  width: auto;
  height: auto;
}

/* Phones: the music toggle sits in the navbar's left slot. It lives in the hero
   markup, so it is fixed to the bar and layered above it (the bar is z-index 100),
   and it turns ink-coloured when the bar goes light on scroll. */
@media (max-width: 760px) {
  /* The hero isolates its layers, which would trap the toggle under the bar. */
  .hero {
    isolation: auto;
  }
  .audio-toggle {
    position: fixed;
    z-index: 101;
  }
  .navbar.is-scrolled ~ .hero .audio-toggle {
    color: var(--ink);
  }
}

/* Inner pages: the scrolled light bar is near-opaque so page text never reads
   through it (Chrome skips the backdrop blur over some animated layers). */
.navbar.is-scrolled {
  background: rgb(252, 251, 248);
}

/* ---- First-visit loader ----
   The RU EM SA logo itself is the loader: RU, EM and SA rise softly into place,
   the gold stars bloom between them, the subline settles, then the deep-green
   sheet lifts. Shown only when the <head> script sets html.is-loading. */
.loader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .loader,
.loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--deep-green);
  color: #fff8ec;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.76, 0, 0.24, 1);
  animation: loader-failsafe 0.3s 4s forwards; /* clears itself even if every script dies */
}
.loader.is-leaving { clip-path: inset(0 0 100% 0); }
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }

.loader-mark .brandmark-large { --logo-scale: 0.9; display: block; position: relative; }
.loader.is-leaving .loader-mark {
  transform: translateY(-6vh);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.45s ease;
}
.loader .brand-row b {
  animation: loader-letters 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.loader .brand-row b:nth-of-type(1) { animation-delay: 0.1s; }
.loader .brand-row b:nth-of-type(2) { animation-delay: 0.22s; }
.loader .brand-row b:nth-of-type(3) { animation-delay: 0.34s; }
.loader .brand-row img {
  animation: loader-star 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.loader .brand-row img:nth-of-type(1) { animation-delay: 0.42s; }
.loader .brand-row img:nth-of-type(2) { animation-delay: 0.52s; }
.loader .brand-subline {
  animation: loader-subline 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
@keyframes loader-letters {
  from { opacity: 0; transform: translateY(0.35em); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes loader-star {
  from { opacity: 0; transform: scale(0.4) rotate(-45deg); }
  to { opacity: 1; transform: none; }
}
@keyframes loader-subline {
  from { opacity: 0; letter-spacing: 0.6em; }
  to { opacity: 0.8; }
}
@media (max-width: 480px) {
  .loader-mark .brandmark-large { --logo-scale: 0.7; }
}

/* Hold the page's entrance (hero lines, reveals) until the sheet lifts. */
.loader-hold [data-reveal] { opacity: 0 !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) { .loader { display: none !important; } }
@media print { .loader { display: none !important; } }
/* Hold the hero entrance under the loader (beats the hero's animation shorthand). */
html.loader-hold .hero-media,
html.loader-hold .hero-media .hero-video,
html.loader-hold .hero h1 .hero-line,
html.loader-hold .hero-content > p,
html.loader-hold .hero-content > .button {
  animation-play-state: paused !important;
}

/* Request type: Tom Select styled as the site's underline field, with a cream
   panel like the country picker; the chosen option is marked with the gold star. */
.field-select .ts-wrapper { width: 100%; }
.field-select .ts-control {
  display: flex;
  align-items: center;
  min-height: 0;
  padding: 0 1.75rem 0.85rem 0;
  border: 0;
  border-bottom: 1px solid rgba(92, 71, 58, 0.32);
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink);
  font: 400 var(--text-body-lg) / 1.45 var(--font-body);
  letter-spacing: var(--tracking-body);
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.contact-form .ts-control:focus { outline: none; }
.field-select .ts-control .item { padding: 0; margin: 0; }
.field-select .ts-wrapper.has-items .ts-control { color: var(--ink); }
.field-select .ts-wrapper:not(.has-items) .ts-control::before {
  content: "Select type of request *";
  color: rgba(92, 71, 58, 0.58);
}
.field-select .ts-wrapper.focus .ts-control,
.field-select .ts-wrapper.dropdown-active .ts-control {
  border-bottom-width: 2px;
  border-color: var(--deep-green);
}
.field-select::after {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.field-select:has(.ts-wrapper.dropdown-active)::after {
  transform: translateY(0.3rem) rotate(225deg);
}
.field-select .ts-dropdown {
  margin-top: 0.6rem;
  padding: 0.4rem;
  background: var(--cream);
  border: 1px solid rgba(165, 138, 87, 0.25);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(30, 39, 32, 0.12);
  color: var(--ink);
  font: 400 var(--text-body) / 1.4 var(--font-body);
  z-index: 80;
  animation: request-menu-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.field-select .ts-dropdown .option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border-radius: 8px;
  color: rgba(30, 39, 32, 0.78);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.field-select .ts-dropdown .option.active { background: var(--cream-deep); color: var(--ink); }
.field-select .ts-dropdown .option.selected { color: var(--ink); font-weight: 500; }
.request-option-mark {
  width: 13px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--gold-star-gradient);
  mask: url("../images/section-star.svg") center / contain no-repeat;
  -webkit-mask: url("../images/section-star.svg") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.field-select .option.selected .request-option-mark { opacity: 1; transform: scale(1); }
@keyframes request-menu-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .field-select .ts-dropdown { animation: none; }
  .field-select::after, .request-option-mark { transition: none; }
}