/* ═══════════════════════════════════════════════════════════════
   DIAMOND — دليل المندوبات الرسمي
   Palette: brand teal family only.
   Display: El Messiri · Body: IBM Plex Sans Arabic · Latin/eyebrows: Jost
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ink: #0E2A31;
  --teal: #2E6472;
  --teal-deep: #1D4550;
  --teal-soft: #4E8797;
  --aqua: #A9EDEA;
  --aqua-soft: #D7F3F2;
  --foam: #F2FAF9;
  --white: #FFFFFF;

  --grad-brand: linear-gradient(135deg, #3d7d8e, #2E6472);
  --grad-dark: linear-gradient(160deg, #16363f, #1D4550 55%, #24525f);
  --hairline: rgba(46, 100, 114, 0.14);

  --ff-disp: 'El Messiri', sans-serif;
  --ff-body: 'IBM Plex Sans Arabic', sans-serif;
  --ff-latin: 'Jost', sans-serif;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-wipe: cubic-bezier(.77, 0, .18, 1);
  --wrap: 1180px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--foam);
  line-height: 1.75;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 12% -6%, rgba(169, 237, 234, 0.28), transparent 70%),
    radial-gradient(640px 520px at 96% 108%, rgba(169, 237, 234, 0.20), transparent 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='243'%3E%3Cpath%20d='M0%200L140%20121.5M0%20243L140%20121.5M0%20121.5L140%200M0%20121.5L140%20243'%20stroke='%232E6472'%20stroke-opacity='.05'%20fill='none'/%3E%3C/svg%3E");
  z-index: 0;
}

main, .site-head, .site-foot { position: relative; z-index: 1; }

main { overflow-x: clip; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(20px, 4vw, 44px); }

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

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

::selection { background: var(--aqua); color: var(--ink); }

/* ─────────────── type helpers ─────────────── */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-latin);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--teal-soft);
  text-transform: uppercase;
  margin-bottom: 20px;
}

.eyebrow-line { width: 34px; height: 1.5px; background: var(--teal-soft); flex: none; }

.eyebrow.light { color: var(--aqua); }
.eyebrow.light .eyebrow-line { background: var(--aqua); }

.sec-title {
  font-family: var(--ff-disp);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.4;
}

.sec-sub { color: var(--teal-soft); max-width: 52ch; margin-top: 10px; }

/* ─────────────── buttons ─────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.25s;
}

.btn > * { position: relative; z-index: 1; }

.btn-solid { background: var(--teal); color: var(--white); box-shadow: 0 10px 26px rgba(46, 100, 114, 0.28); }
.btn-solid:hover { background: var(--teal-deep); box-shadow: 0 16px 34px rgba(46, 100, 114, 0.34); }

.btn-solid::after, .btn-aqua::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  inset-inline-start: -80%;
  transform: skewX(-18deg);
  transition: inset-inline-start 0.7s var(--ease-out);
}

.btn-solid:hover::after, .btn-aqua:hover::after { inset-inline-start: 120%; }

.btn-ghost { border: 1.5px solid rgba(46, 100, 114, 0.4); color: var(--teal); padding: 10px 20px; font-size: 14px; }
.btn-ghost:hover { border-color: var(--teal); background: rgba(169, 237, 234, 0.18); }

.btn-aqua { background: var(--aqua); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.btn-aqua:hover { background: var(--white); }

/* ═══════════════ PRELOADER ═══════════════ */

.loader {
  --beat: 1;
  --stone-w: min(64vw, 292px);
  --sweep: cubic-bezier(.55, .06, .35, 1);
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  color: var(--teal);
}

.loader.encore { --beat: 0.4; }
.loader.done { pointer-events: none; }

.lo-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60vw 40vh at 18% 12%, rgba(255, 255, 255, 0.8), transparent 70%),
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='243'%3E%3Cpath%20d='M0%200L140%20121.5M0%20243L140%20121.5M0%20121.5L140%200M0%20121.5L140%20243'%20stroke='%232E6472'%20stroke-opacity='.05'%20fill='none'/%3E%3C/svg%3E")
    var(--foam);
  transition: opacity 0.4s ease 0.1s;
}

/* both stone copies share this box, so they overlap exactly */
.lo-stage { position: absolute; inset: 0; }

.stone-slot {
  position: absolute;
  left: 50%;
  top: 44%;
  width: var(--stone-w);
  aspect-ratio: 400 / 345;
  transform: translate(-50%, -50%);
}

.stone-slot svg { width: 100%; height: 100%; display: block; }

.lo-dull { transition: opacity 0.2s ease; }

.lo-dull svg {
  opacity: 0;
  transform: scale(0.94);
  filter: blur(0.3px);
  animation: dullIn calc(0.45s * var(--beat)) var(--ease-out) calc(0.05s * var(--beat)) forwards;
}

@keyframes dullIn { to { opacity: 0.8; transform: scale(1); } }

/* the polished copy, uncovered exactly where the mop has passed */
.lo-clip {
  position: absolute;
  inset: 0;
  clip-path: polygon(107% -1%, 101% -1%, 101% 101%, 107% 101%, 102% 76%, 107.5% 51%, 102% 26%);
  animation: revealClean calc(0.78s * var(--beat)) var(--sweep) calc(0.62s * var(--beat)) forwards;
}

/* the wet edge waves like a mop stroke, not a straight blade */
@keyframes revealClean {
  to { clip-path: polygon(-13% -1%, 101% -1%, 101% 101%, -13% 101%, -18% 76%, -12.5% 51%, -18% 26%); }
}

.lo-clip svg { animation: settlePulse calc(0.5s * var(--beat)) var(--ease-out) calc(1.36s * var(--beat)); }

@keyframes settlePulse {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(1.035); }
}

/* the dirty pane */
.lo-grime {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(3.5px) saturate(0.62) brightness(1.05);
  -webkit-backdrop-filter: blur(3.5px) saturate(0.62) brightness(1.05);
  background:
    radial-gradient(180px 130px at 20% 26%, rgba(46, 100, 114, 0.13), transparent 70%),
    radial-gradient(240px 160px at 74% 66%, rgba(46, 100, 114, 0.11), transparent 70%),
    radial-gradient(130px 100px at 46% 86%, rgba(46, 100, 114, 0.1), transparent 70%),
    repeating-linear-gradient(74deg, rgba(255, 255, 255, 0.34) 0 11px, rgba(226, 240, 240, 0.14) 11px 29px),
    repeating-linear-gradient(101deg, rgba(255, 255, 255, 0.26) 0 17px, rgba(232, 244, 244, 0.1) 17px 41px),
    rgba(255, 255, 255, 0.28);
  clip-path: polygon(-1% -1%, 107% -1%, 102% 26%, 107.5% 51%, 102% 76%, 107% 101%, -1% 101%);
  animation: wipeGrime calc(0.78s * var(--beat)) var(--sweep) calc(0.62s * var(--beat)) forwards;
  transition: opacity 0.4s ease 0.1s;
}

@keyframes wipeGrime {
  to { clip-path: polygon(-1% -1%, -13% -1%, -18% 26%, -12.5% 51%, -18% 76%, -13% 101%, -1% 101%); }
}

/* spray drifting in from off-screen */
.lo-mist {
  position: absolute;
  top: 40%;
  right: 0;
  width: min(46vw, 210px);
  transform: translateY(-50%);
}

.mist {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: mistOut calc(0.6s * var(--beat)) ease-out forwards;
}

.m1 { animation-delay: calc(0.22s * var(--beat)); }
.m2 { animation-delay: calc(0.35s * var(--beat)); }
.m3 { animation-delay: calc(0.48s * var(--beat)); }

@keyframes mistOut {
  0% { opacity: 0; transform: translateX(26px) scale(0.55); }
  28% { opacity: 0.95; }
  100% { opacity: 0; transform: translateX(-58px) scale(1.35); }
}

/* the mop — its head drives the reveal */
.mop {
  position: absolute;
  top: -2%;
  bottom: -2%;
  width: 36px;
  right: 0;
  transform: translateX(50%);
  opacity: 0;
  animation:
    mopIn calc(0.12s * var(--beat)) linear calc(0.54s * var(--beat)) forwards,
    mopSweep calc(0.78s * var(--beat)) var(--sweep) calc(0.62s * var(--beat)) forwards;
}

@keyframes mopIn { to { opacity: 1; } }
@keyframes mopSweep { to { right: 108%; } }

.mop-head {
  position: absolute;
  inset-block: 0;
  left: 0;
  right: 0;
  border-radius: 9px;
  background: linear-gradient(180deg, #2b5f6d, #2E6472 45%, #1D4550);
  box-shadow:
    inset -2px 0 0 rgba(255, 255, 255, 0.45),
    inset 2px 0 0 rgba(0, 0, 0, 0.12),
    0 0 26px rgba(169, 237, 234, 0.75);
}

/* the strands, dragging on the dirty side */
.mop-fringe {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 72px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='120'%3E%3Cg fill='none' stroke='%232E6472' stroke-linecap='round'%3E%3Cpath d='M58 8C40 2 28 18 4 10' stroke-width='5' stroke-opacity='.5'/%3E%3Cpath d='M58 20C46 26 36 10 24 20' stroke-width='4' stroke-opacity='.62'/%3E%3Cpath d='M58 34C38 40 24 24 2 36' stroke-width='5.5' stroke-opacity='.45'/%3E%3Cpath d='M58 48C46 43 38 58 30 50' stroke-width='4.5' stroke-opacity='.6'/%3E%3Cpath d='M58 62C40 70 30 52 6 64' stroke-width='5' stroke-opacity='.5'/%3E%3Cpath d='M58 76C46 82 36 68 22 78' stroke-width='4' stroke-opacity='.64'/%3E%3Cpath d='M58 90C38 96 22 78 4 92' stroke-width='5.5' stroke-opacity='.44'/%3E%3Cpath d='M58 104C48 99 40 114 32 107' stroke-width='4.5' stroke-opacity='.58'/%3E%3Cpath d='M58 116C40 122 30 106 6 118' stroke-width='5' stroke-opacity='.5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='97'%3E%3Cg fill='none' stroke='%232E6472' stroke-linecap='round'%3E%3Cpath d='M58 5C44 11 34 0 16 8' stroke-width='4' stroke-opacity='.36'/%3E%3Cpath d='M58 18C46 13 40 27 34 21' stroke-width='3.5' stroke-opacity='.3'/%3E%3Cpath d='M58 31C36 37 26 22 6 33' stroke-width='4.5' stroke-opacity='.34'/%3E%3Cpath d='M58 44C48 50 38 36 26 45' stroke-width='3.5' stroke-opacity='.28'/%3E%3Cpath d='M58 58C40 52 28 68 10 60' stroke-width='4.5' stroke-opacity='.33'/%3E%3Cpath d='M58 71C50 66 42 80 36 73' stroke-width='3.5' stroke-opacity='.3'/%3E%3Cpath d='M58 84C38 90 24 76 8 87' stroke-width='4' stroke-opacity='.35'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat-y, repeat-y;
  background-size: 58px 120px, 58px 97px;
  background-position: right top, right -13px;
  animation: fringeWave calc(0.4s * var(--beat)) ease-in-out infinite alternate;
}

@keyframes fringeWave { to { background-position: right -9px, right -4px; } }

/* the wash the mop pushes ahead of itself */
.mop-wet {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 104px;
  background: linear-gradient(to left, rgba(169, 237, 234, 0.55), rgba(169, 237, 234, 0.14) 45%, rgba(169, 237, 234, 0));
  filter: blur(5px);
}

/* the handle, held from off-screen */
.mop-stick {
  position: absolute;
  left: 50%;
  bottom: 60%;
  width: 9px;
  height: 130vh;
  border-radius: 6px;
  background: linear-gradient(180deg, #1D4550, #2E6472);
  opacity: 0.92;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(27deg);
  animation: stickTilt calc(0.78s * var(--beat)) var(--sweep) calc(0.62s * var(--beat)) forwards;
}

@keyframes stickTilt { to { transform: translateX(-50%) rotate(8deg); } }

/* suds */
.foam {
  position: absolute;
  right: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95), rgba(214, 244, 242, 0.75) 55%, rgba(169, 237, 234, 0.5));
  border: 1px solid rgba(46, 100, 114, 0.26);
  opacity: 0;
  animation: foamPop calc(1.1s * var(--beat)) ease-in-out infinite;
}

.o1 { top: 17%; width: 13px; height: 13px; margin-right: 16px; animation-delay: calc(0.6s * var(--beat)); }
.o2 { top: 33%; width: 8px; height: 8px; margin-right: 34px; animation-delay: calc(0.78s * var(--beat)); }
.o3 { top: 52%; width: 15px; height: 15px; margin-right: 10px; animation-delay: calc(0.68s * var(--beat)); }
.o4 { top: 69%; width: 9px; height: 9px; margin-right: 30px; animation-delay: calc(0.9s * var(--beat)); }
.o5 { top: 85%; width: 11px; height: 11px; margin-right: 20px; animation-delay: calc(0.72s * var(--beat)); }

@keyframes foamPop {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  25% { opacity: 0.9; }
  70% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-18px, -15px) scale(1.15); }
}

/* damp patches drying behind the stroke */
.wet {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(169, 237, 234, 0.4), rgba(169, 237, 234, 0) 70%);
  filter: blur(6px);
  opacity: 0;
  animation: wetDry calc(0.85s * var(--beat)) ease-out forwards;
}

.w1 { right: 18%; top: 22%; width: 190px; height: 120px; animation-delay: calc(0.86s * var(--beat)); }
.w2 { right: 45%; top: 56%; width: 230px; height: 140px; animation-delay: calc(1.0s * var(--beat)); }
.w3 { right: 71%; top: 32%; width: 170px; height: 110px; animation-delay: calc(1.14s * var(--beat)); }

@keyframes wetDry {
  0% { opacity: 0; }
  18% { opacity: 0.85; }
  100% { opacity: 0; }
}

@media (max-width: 560px) {
  .mop { width: 26px; }
  .mop-fringe { width: 56px; background-size: 44px 92px, 44px 74px; }
  .mop-wet { width: 72px; }
  .mop-stick { width: 7px; }
  .wet { transform: scale(0.6); }
}

/* ignition */
.lo-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 44%, #ffffff, rgba(255, 255, 255, 0) 58%);
  animation: flashPop calc(0.5s * var(--beat)) var(--ease-out) calc(1.34s * var(--beat)) forwards;
  transition: opacity 0.3s ease;
}

@keyframes flashPop {
  0% { opacity: 0; }
  20% { opacity: 0.78; }
  100% { opacity: 0; }
}

.lo-flare {
  position: absolute;
  left: 50%;
  top: 39%;
  width: min(56vw, 260px);
  height: min(56vw, 260px);
  fill: #ffffff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  animation: flarePop calc(0.7s * var(--beat)) var(--ease-out) calc(1.3s * var(--beat)) forwards;
}

@keyframes flarePop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
  28% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(30deg); }
}

/* brand */
.lo-brand {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(44% + var(--stone-w) * 0.43 + 26px);
  text-align: center;
  transition: opacity 0.22s ease;
}

.loader.done .lo-brand,
.loader.done .lo-bg,
.loader.done .lo-grime,
.loader.done .lo-flash,
.loader.done .lo-dull { opacity: 0; }

.loader-word {
  direction: ltr;
  font-family: var(--ff-latin);
  font-weight: 500;
  font-size: clamp(21px, 3.6vw, 26px);
  letter-spacing: 0.85em;
  padding-inline-start: 0.42em;
  background: linear-gradient(90deg, var(--teal) 38%, #8fdcd8 50%, var(--teal) 62%);
  background-size: 240% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(9px);
  animation:
    wordIn calc(0.7s * var(--beat)) var(--ease-out) calc(1.4s * var(--beat)) forwards,
    wordShine calc(0.7s * var(--beat)) var(--ease-out) calc(1.8s * var(--beat)) forwards;
}

@keyframes wordIn {
  0% { opacity: 0; filter: blur(9px); letter-spacing: 0.85em; }
  100% { opacity: 1; filter: blur(0); letter-spacing: 0.42em; }
}

@keyframes wordShine { to { background-position: -120% 0; } }

.loader-tag {
  margin-top: 5px;
  font-family: var(--ff-body);
  font-size: 12.5px;
  color: var(--teal-soft);
  opacity: 0;
  transform: translateY(6px);
  animation: tagIn calc(0.5s * var(--beat)) var(--ease-out) calc(1.7s * var(--beat)) forwards;
}

@keyframes tagIn { to { opacity: 1; transform: none; } }

/* handoff — the polished stone flies into the page */
#loaderStone {
  transition: transform 0.68s cubic-bezier(.66, 0, .16, 1), opacity 0.16s linear 0.02s;
  will-change: transform;
}

.loader.landed #loaderStone { opacity: 0; }

/* ═══════════════ FACET TOOLTIP ═══════════════ */

.facet-tip {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  background: var(--ink);
  color: var(--foam);
  font-size: 13px;
  line-height: 1.5;
  padding: 9px 16px;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(14, 42, 49, 0.3);
  white-space: nowrap;
  transform: translate(-16px, 18px);
}

.facet-tip b { font-family: var(--ff-disp); font-weight: 600; color: var(--aqua); margin-inline-end: 6px; }

/* ═══════════════ HEADER ═══════════════ */

.site-head {
  position: fixed;
  top: 0; right: 0; left: 0;
  z-index: 50;
  transition: background-color 0.35s, box-shadow 0.35s, backdrop-filter 0.35s, transform 0.45s var(--ease-out);
}

.site-head.scrolled {
  background: rgba(242, 250, 249, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}

.site-head.tucked { transform: translateY(-102%); }

.head-row { display: flex; align-items: center; gap: 28px; padding-block: 12px; }

.brand img { height: 46px; width: auto; }

.head-nav { display: flex; gap: 24px; margin-inline-start: auto; }

.head-nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
  position: relative;
  padding-block: 6px;
}

.head-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s var(--ease-out);
}

.head-nav a:hover::after { transform: scaleX(1); }

/* ═══════════════ HERO ═══════════════ */

.hero { padding-top: clamp(122px, 16vh, 170px); padding-bottom: clamp(56px, 9vh, 110px); position: relative; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

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

.hero-title {
  display: grid;
  justify-items: start;
  font-family: var(--ff-disp);
  font-size: clamp(2.35rem, 10.5vw, 3.3rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
}

/* the lines step in like the facets of a cut stone */
.hl-1 { font-weight: 400; }
.hl-2 { font-weight: 400; margin-inline-start: 1.15em; }
.hl-3 { font-weight: 700; margin-inline-start: 0.4em; }

.hero-title em {
  font-style: normal;
  position: relative;
  z-index: 0;
  padding-inline: 0.2em;
  white-space: nowrap;
}

/* the highlight is a facet, never a rounded underline */
.hero-title em::before {
  content: "";
  position: absolute;
  inset: 0.2em -0.04em 0.1em;
  z-index: -1;
  background: var(--aqua);
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: right center;
  animation: facetIn 0.65s var(--ease-wipe) 1.15s forwards;
}

@keyframes facetIn { to { transform: scaleX(1); } }

/* the vertical rail down the outer edge */
.hero-rail {
  position: absolute;
  inset-inline-end: 2px;
  top: 130px;
  bottom: 34px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.hero-rail span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-latin);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: 0.32em;
  color: var(--teal-soft);
  white-space: nowrap;
}

.hero-rail::before,
.hero-rail::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: rgba(46, 100, 114, 0.28);
}

.hero-rail::before { top: 0; height: 30px; }
.hero-rail::after { bottom: 0; height: 30px; }

/* entrance util */
.rise { opacity: 0; transform: translateY(24px); }
body.ready .rise { animation: riseIn 0.85s var(--ease-out) forwards; animation-delay: var(--d, 0s); }

@keyframes riseIn { to { opacity: 1; transform: none; } }

/* ─────────────── search : an instrument, not a pill ─────────────── */

.search { position: relative; z-index: 20; margin-top: 26px; max-width: 470px; }

/* the instruction is the first thing she must act on — mark it as a step */
.search-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal);
  margin-bottom: 9px;
}

.search-label::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--aqua);
  border: 1px solid rgba(46, 100, 114, 0.42);
  transform: rotate(45deg);
}

/* the field is bezel-set, same cut as the certificate plate below it */
.search-field {
  --bev: 12px;
  --bevel: polygon(
    var(--bev) 0, calc(100% - var(--bev)) 0,
    100% var(--bev), 100% calc(100% - var(--bev)),
    calc(100% - var(--bev)) 100%, var(--bev) 100%,
    0 calc(100% - var(--bev)), 0 var(--bev)
  );
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 58px;
  padding-inline: 8px 11px;
  color: var(--teal);
}

/* the bezel, lit from the top of the cut */
.search-field::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(150deg, var(--teal-soft), rgba(46, 100, 114, 0.34));
  clip-path: var(--bevel);
  transition: background 0.25s;
}

/* the plate it holds — recessed, so it reads as somewhere to put something */
.search-field::after {
  content: "";
  position: absolute;
  inset: 1.4px;
  z-index: -1;
  clip-path: var(--bevel);
  background: linear-gradient(150deg, #ffffff 0%, #ffffff 60%, #f4fcfc 100%);
  box-shadow: inset 0 2px 5px rgba(46, 100, 114, 0.1);
}

.search-field:focus-within::before { background: var(--teal); }

/* clears a wrong town without hunting for the backspace key */
.sf-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--teal);
  background: var(--aqua-soft);
  transition: background-color 0.2s, color 0.2s;
}

.sf-clear[hidden] { display: none; }
.sf-clear:hover { background: var(--teal); color: var(--white); }

/* the glass, set in a stone — the same cut as the logo and the collection */
.sf-gem {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 39px;
  clip-path: polygon(22% 0, 78% 0, 100% 33%, 50% 100%, 0 33%);
  background: linear-gradient(163deg, #dcf6f5, #a9edea);
  color: var(--teal-deep);
  transition: background 0.3s, color 0.3s;
}

/* the crown, not the box, is the optical centre */
.sf-gem svg { margin-bottom: 10px; }

.search-field:focus-within .sf-gem {
  background: linear-gradient(163deg, #2e6472, #1d4550);
  color: var(--aqua);
}

.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font: inherit;
  font-family: var(--ff-disp);
  font-weight: 600;
  font-size: 18px;
  padding-block: 4px;
  color: var(--ink);
}

.search-field input::placeholder { color: var(--teal-soft); opacity: 0.6; font-weight: 400; }
.search-field input::-webkit-search-cancel-button { display: none; }

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline: 0;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(14, 42, 49, 0.18);
  list-style: none;
  overflow: hidden auto;
  max-height: 330px;
  z-index: 30;
  border: 1px solid var(--aqua-soft);
}

.search-results li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--foam); }
.search-results li:last-child { border-bottom: 0; }

.search-results .sr-main {
  flex: 1;
  display: block;
  text-align: start;
  padding: 12px 20px;
  min-width: 0;
}

.search-results li:hover, .search-results li.active { background: var(--foam); }

.sr-city { font-family: var(--ff-disp); font-weight: 600; font-size: 1.02rem; display: block; line-height: 1.6; }
.sr-sub { font-size: 12.5px; color: var(--teal-soft); display: block; }

.sr-wa {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-inline-end: 12px;
  border-radius: 50%;
  color: var(--teal);
  background: var(--aqua-soft);
  transition: background-color 0.2s, color 0.2s;
}

.sr-wa:hover { background: var(--teal); color: var(--white); }

.search-empty { padding: 16px 20px; color: var(--teal-soft); font-size: 14px; }

/* ─────────────── stats ─────────────── */

/* the certificate plate — gem-cut strip, engraved figures, polished reflection */

.stats {
  --bev: 13px;
  --bevel: polygon(
    var(--bev) 0, calc(100% - var(--bev)) 0,
    100% var(--bev), 100% calc(100% - var(--bev)),
    calc(100% - var(--bev)) 100%, var(--bev) 100%,
    0 calc(100% - var(--bev)), 0 var(--bev)
  );
  position: relative;
  display: flex;
  margin-top: 30px;
  padding: 17px 6px 15px;
  isolation: isolate;
}

.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: rgba(46, 100, 114, 0.3);
  clip-path: var(--bevel);
}

.stats::after {
  content: "";
  position: absolute;
  inset: 1.3px;
  z-index: -1;
  clip-path: var(--bevel);
  background: linear-gradient(112deg, #ffffff 0%, #ffffff 36%, #e6fbfa 45%, #ffffff 54%, #f1fafa 100%);
  background-size: 260% 100%;
  background-position: 100% 0;
}

body.ready .stats::after { animation: statSweep 1.5s var(--ease-out) 1.35s forwards; }

@keyframes statSweep { to { background-position: 0 0; } }

.stat {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 17px;
}

/* divider hairline + its gem */
.stat + .stat::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(46, 100, 114, 0.26) 24%, rgba(46, 100, 114, 0.26) 76%, transparent);
}

.stat + .stat::after {
  content: "";
  position: absolute;
  inset-inline-start: -3.5px;
  top: 50%;
  margin-top: -4px;
  width: 6px;
  height: 6px;
  background: var(--aqua);
  border: 1px solid rgba(46, 100, 114, 0.4);
  transform: rotate(45deg);
}

.stat dd {
  position: relative;
  font-family: var(--ff-latin);
  font-weight: 600;
  font-size: clamp(1.75rem, 7.6vw, 2.15rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--teal-deep);
}

/* the figure reflected on a polished surface */
.stat dd::after {
  content: attr(data-val);
  position: absolute;
  top: 100%;
  inset-inline: 0;
  text-align: center;
  transform: scaleY(-1);
  opacity: 0.13;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 45%);
  mask-image: linear-gradient(to top, #000 0%, transparent 45%);
}

.stat dd.pop { animation: statPop 0.5s var(--ease-out); }

@keyframes statPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.stat dt {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--teal-soft);
  text-align: center;
}

@media (min-width: 720px) {
  .stats { --bev: 16px; padding: 22px 10px 20px; margin-top: 36px; }
  .stat { gap: 20px; }
  .stat dt { font-size: 12.5px; }
}

/* ═══════════════ THE STONE ═══════════════ */

.stone-wrap { display: grid; justify-items: center; position: relative; }

.stone {
  position: relative;
  z-index: 1;
  width: min(100%, 480px);
  opacity: 0;
  transition: opacity 0.18s linear;
}

body.landed .stone { opacity: 1; }

.stone::before {
  content: "";
  position: absolute;
  inset: 6% 4% 26% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(169, 237, 234, 0.5), transparent 68%);
  z-index: -1;
}

#stoneSvg {
  width: 100%;
  height: auto;
  display: block;
  animation: stoneFloat 7s ease-in-out infinite;
  animation-play-state: paused;
}

body.landed #stoneSvg { animation-play-state: running; }

@keyframes stoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

.facet-g {
  cursor: pointer;
  outline: none;
  transition: opacity 0.3s;
}

.facet-base { transition: fill 0.3s, filter 0.3s; }

.facet-cut {
  fill: #ffffff;
  fill-opacity: 0.3;
  stroke: #2E6472;
  stroke-opacity: 0.28;
  stroke-width: 1;
  transition: fill-opacity 0.3s;
}

.facet-g:hover .facet-base, .facet-g:focus-visible .facet-base { filter: brightness(1.06) saturate(1.08); }
.facet-g:focus-visible .facet-base { stroke-width: 2.6; }

.facet-g.sel .facet-base { fill: url(#facetSel); }
.facet-g.sel .facet-cut { fill-opacity: 0.14; stroke-opacity: 0.2; }

#stoneSvg.has-sel .facet-g:not(.sel) { opacity: 0.5; }
#stoneSvg.has-sel .facet-g.sel { opacity: 1; }

.facet-labels, .spec, .refl, .floor-line { opacity: 0; transition: opacity 0.7s var(--ease-out) 1.15s; }
body.ready .facet-labels { opacity: 1; }
body.ready .spec { opacity: 0.15; }
body.ready .refl { opacity: 0.45; }
body.ready .floor-line { opacity: 1; }

/* soap bubbles */
.bub {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: bubRise 12s ease-in-out infinite;
}

.b1 { animation-delay: 1.5s; }
.b2 { animation-delay: 4.5s; }
.b3 { animation-delay: 8s; }
.b4 { animation-delay: 10.5s; }

@keyframes bubRise {
  0% { opacity: 0; transform: translateY(26px) scale(0.85); }
  12% { opacity: 0.75; }
  45% { opacity: 0.75; }
  60% { opacity: 0; transform: translateY(-46px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-46px) scale(1.05); }
}

/* corner glints */
.glint {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: glintTw 5.5s ease-in-out infinite;
}

.g1 { animation-delay: 2.4s; }
.g2 { animation-delay: 4.8s; }

@keyframes glintTw {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  8% { opacity: 0.95; transform: scale(1.1) rotate(20deg); }
  16% { opacity: 0; transform: scale(0.5) rotate(40deg); }
}

.f-name {
  font-family: var(--ff-disp);
  font-size: 19px;
  font-weight: 600;
  fill: var(--ink);
  transition: fill 0.3s;
}

.f-count {
  font-family: var(--ff-latin);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  fill: var(--teal-soft);
  transition: fill 0.3s;
}

.facet-labels g.lit .f-name { fill: var(--white); }
.facet-labels g.lit .f-count { fill: var(--aqua); }
.facet-labels g.hot .f-name { fill: var(--teal-deep); }
.facet-labels g.hot .f-count { fill: var(--teal); }

.table-link {
  display: table;
  margin: 4px auto 0;
  padding: 8px 18px;
  border: 1px solid rgba(46, 100, 114, 0.35);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.table-link:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }

.sheen { animation: sheenSweep 6.5s var(--ease-out) 1.6s infinite; }

@keyframes sheenSweep {
  0%, 58% { transform: skewX(-18deg) translateX(0); }
  86%, 100% { transform: skewX(-18deg) translateX(980px); }
}

.spark { position: absolute; width: 16px; fill: var(--teal); opacity: 0; animation: twinkle 4.2s ease-in-out infinite; }
.s1 { top: 5%; inset-inline-start: 12%; animation-delay: 0.6s; }
.s2 { top: 18%; inset-inline-end: 4%; width: 11px; animation-delay: 1.8s; }
.s3 { bottom: 14%; inset-inline-start: 3%; width: 12px; animation-delay: 2.7s; }
.s4 { bottom: 4%; inset-inline-end: 14%; width: 9px; animation-delay: 3.5s; }

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 0.85; transform: scale(1) rotate(45deg); }
}

.stone-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal-soft);
  margin-bottom: 0;
}

/* ═══════════════ HOW TO ORDER — the order, acted out ═══════════════ */

.how { padding-block: clamp(64px, 10vh, 130px); background: var(--white); }

.convo {
  position: relative;
  max-width: 440px;
  margin: clamp(30px, 5vh, 48px) auto 0;
  padding: 22px 20px 8px;
  background: var(--foam);
  border: 1px solid var(--aqua-soft);
  /* one corner cut, like a facet */
  border-radius: 24px 24px 24px 4px;
}

/* the thread the three moments hang from */
.convo::before {
  content: "";
  position: absolute;
  inset-inline-start: 26px;
  top: 34px;
  bottom: 76px;
  width: 1px;
  background: repeating-linear-gradient(180deg, rgba(46, 100, 114, 0.28) 0 3px, transparent 3px 8px);
}

.cv-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-soft);
  margin-block: 4px 9px;
}

.cv-step:first-child { margin-top: 0; }

.cv-step::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--aqua);
  border: 1px solid rgba(46, 100, 114, 0.45);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px var(--foam);
}

/* moment 1 — picking the town, shown as the real result row */
.cv-pick {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--aqua-soft);
  border-radius: 16px;
  padding: 11px 14px;
  margin: 0 0 20px 6px;
  box-shadow: 0 6px 18px rgba(46, 100, 114, 0.07);
}

.cv-pick-wa {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--aqua-soft);
  color: var(--teal);
}

.cv-pick-txt { display: grid; line-height: 1.4; }
.cv-pick-txt b { font-family: var(--ff-disp); font-weight: 600; font-size: 17px; }
.cv-pick-txt i { font-style: normal; font-size: 12px; color: var(--teal-soft); }

/* moments 2 and 3 — the message and the reply */
.cv-bubble {
  position: relative;
  width: fit-content;
  max-width: 82%;
  font-size: 14.5px;
  line-height: 1.65;
  padding: 11px 15px 22px;
  margin-bottom: 20px;
}

.cv-bubble.out {
  margin-inline-start: auto;
  background: var(--teal);
  color: var(--foam);
  border-radius: 16px 16px 4px 16px;
}

.cv-bubble.in {
  margin-inline-start: 6px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--aqua-soft);
  border-radius: 16px 16px 16px 4px;
}

.cv-meta {
  position: absolute;
  bottom: 7px;
  inset-inline-end: 15px;
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.62;
}

.cv-bubble.in .cv-meta { color: var(--teal-soft); opacity: 1; }

/* she is typing */
.cv-typing {
  display: flex;
  gap: 5px;
  width: fit-content;
  margin-inline-start: 6px;
  margin-bottom: 12px;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--aqua-soft);
  border-radius: 16px 16px 16px 4px;
}

.cv-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-soft);
  animation: cvDot 1.1s ease-in-out infinite;
}

.cv-typing i:nth-child(2) { animation-delay: 0.16s; }
.cv-typing i:nth-child(3) { animation-delay: 0.32s; }

@keyframes cvDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* the conversation plays out once it scrolls into view */
.convo .cv-step,
.convo .cv-pick,
.convo .cv-bubble,
.convo .cv-typing { opacity: 0; }

.convo.in .cv-step,
.convo.in .cv-pick,
.convo.in .cv-bubble,
.convo.in .cv-typing { animation: cvIn 0.5s var(--ease-out) both; }

.convo.in .cv-step:nth-of-type(1) { animation-delay: 0.05s; }
.convo.in .cv-pick { animation-delay: 0.18s; }
.convo.in .cv-step:nth-of-type(2) { animation-delay: 0.5s; }
.convo.in .cv-bubble.out { animation-delay: 0.62s; }
.convo.in .cv-step:nth-of-type(3) { animation-delay: 1.05s; }
.convo.in .cv-typing { animation: cvIn 0.4s var(--ease-out) 1.15s both, cvGone 0.3s ease 2.1s forwards; }
.convo.in .cv-bubble.in { animation-delay: 2.25s; }

@keyframes cvIn {
  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: none; }
}

@keyframes cvGone {
  to { opacity: 0; transform: translateY(-6px) scale(0.9); height: 0; padding-block: 0; margin-bottom: 0; border-width: 0; }
}

/* ═══════════════ TRUST — scored across the page like a hallmark ═══════════════ */

.trust {
  position: relative;
  padding-block: clamp(22px, 3.6vh, 34px);
  text-align: center;
}

/* two hairlines that score open from the centre */
.trust::before,
.trust::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: rgba(46, 100, 114, 0.22);
  transform: scaleX(0);
  transition: transform 1.1s var(--ease-wipe) 0.1s;
}

.trust::before { top: 0; }
.trust::after { bottom: 0; }

.trust.in::before,
.trust.in::after { transform: scaleX(1); }

.trust-in { display: grid; justify-items: center; gap: 6px; }

.trust-gem {
  width: 13px;
  height: 12px;
  clip-path: polygon(24% 0, 76% 0, 100% 34%, 50% 100%, 0 34%);
  background: linear-gradient(180deg, var(--aqua), #6fc9c5);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s var(--ease-out) 0.5s, transform 0.6s var(--ease-out) 0.5s;
}

.trust.in .trust-gem { opacity: 1; transform: none; }

.trust-lead {
  font-family: var(--ff-disp);
  font-weight: 700;
  font-size: clamp(1.12rem, 4.6vw, 1.5rem);
  line-height: 1.45;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.trust-sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--teal-soft);
}

/* ═══════════════ COLLECTION — a wall of product cards, seen on the tilt ═══════════════ */

/* a tinted ground, so the stones read as stones — and a tonal step into the dark join */
.collection { padding-block: clamp(64px, 10vh, 130px); background: var(--foam); overflow: hidden; }

.collection-head { margin-bottom: clamp(22px, 3.5vh, 38px); }

.shelf-wall {
  position: relative;
  height: 372px;
  margin-bottom: clamp(24px, 4vh, 44px);
  overflow: hidden;
  -webkit-mask-image: radial-gradient(145% 130% at 50% 50%, #000 60%, transparent 97%);
  mask-image: radial-gradient(145% 130% at 50% 50%, #000 60%, transparent 97%);
}

.shelf {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 175vw;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translate(-50%, -50%) perspective(1200px) rotateX(12deg) rotateZ(-7deg) scale(1.02);
}

/* no overflow clip here — the wall does the clipping, and the stones need room to cast */
.prow { flex: none; height: 93px; }

.ptrack {
  display: flex;
  gap: 12px;
  width: max-content;
  will-change: transform;
}

/* three speeds, the middle one against the grain, each starting at a different point */
.r0 { animation: shelfA 54s linear -9s infinite; }
.r1 { animation: shelfA 68s linear -31s infinite reverse; }
.r2 { animation: shelfA 80s linear -52s infinite; }

.shelf-wall:hover .ptrack { animation-play-state: paused; }

/* the page is RTL: the over-wide track hangs off to the LEFT,
   so the loop travels right by exactly one copy */
@keyframes shelfA {
  from { transform: translateX(0); }
  to { transform: translateX(50%); }
}

/* every product is set in a brilliant cut — the same stone as the logo.
   the anchor casts the shadow, the span carries the cut (clip-path eats box-shadow). */
.ptile {
  flex: none;
  width: 100px;
  height: 93px;
  display: block;
  filter: drop-shadow(0 9px 14px rgba(46, 100, 114, 0.22));
  transition: transform 0.4s var(--ease-out), filter 0.4s;
}

.ptile:hover { transform: translateY(-7px) scale(1.04); filter: drop-shadow(0 17px 24px rgba(46, 100, 114, 0.32)); }

.pgem {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  clip-path: polygon(22% 0, 78% 0, 100% 33%, 50% 100%, 0 33%);
  /* the crown holds the light, the pavilion takes the water */
  background:
    linear-gradient(163deg, #ffffff 0%, #ffffff 56%, #f4fcfc 74%, #dff3f2 100%);
}

/* the rim, then the facets: girdle, crown breaks, pavilion mains.
   the rim is stroked double-weight because clip-path shaves half of it off. */
.pgem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20d='M22%200H78L100%2033L50%20100L0%2033Z'%20fill='none'%20stroke='%232E6472'%20stroke-opacity='.55'%20stroke-width='2.6'/%3E%3Cg%20fill='none'%20stroke='%232E6472'%20stroke-opacity='.17'%20stroke-width='1.1'%3E%3Cpath%20d='M0%2033H100'/%3E%3Cpath%20d='M22%200L33%2033M78%200L67%2033'/%3E%3Cpath%20d='M33%2033L50%20100M67%2033L50%20100'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* the product sits in the crown, above the taper.
   multiply drops the photo's white ground so it sits IN the stone, not on a card;
   the corners that overrun the cut are white margin, so the clip costs nothing. */
.pgem img {
  position: absolute;
  left: 50%;
  top: 36%;
  transform: translate(-50%, -50%);
  /* width is the tight cap: it is what a squat product would clip its corners on.
     a tall bottle never reaches it, so bottles get the full height instead. */
  max-width: 49%;
  max-height: 68%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.collection-cta { display: flex; justify-content: center; }

@media (max-width: 560px) {
  .shelf-wall { height: 292px; }
  .shelf { width: 200vw; gap: 13px; transform: translate(-50%, -50%) perspective(900px) rotateX(13deg) rotateZ(-8deg) scale(1.02); }
  .prow { height: 80px; }
  .ptrack { gap: 9px; }
  .ptile { width: 86px; height: 80px; }
}

/* ═══════════════ JOIN — one gem per woman, and one slot open ═══════════════ */

.join {
  background: var(--grad-dark);
  color: var(--foam);
  position: relative;
  overflow: hidden;
}

.join::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='243'%3E%3Cpath%20d='M0%200L140%20121.5M0%20243L140%20121.5M0%20121.5L140%200M0%20121.5L140%20243'%20stroke='%23A9EDEA'%20stroke-opacity='.07'%20fill='none'/%3E%3C/svg%3E");
}

.join-in {
  position: relative;
  display: grid;
  justify-items: start;
  padding-block: clamp(64px, 10vh, 116px);
}

.join .sec-title { color: var(--white); }

.join .sec-title em {
  font-style: normal;
  font-family: var(--ff-latin);
  font-weight: 600;
  color: var(--aqua);
  padding-inline: 0.08em;
}

.join-line {
  margin-top: 12px;
  max-width: 40ch;
  font-size: 15px;
  color: var(--aqua-soft);
  opacity: 0.9;
}

/* the network, one gem per woman */
.gems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  max-width: 430px;
  margin-block: 30px 34px;
}

.gem {
  width: 25px;
  height: 23px;
  flex: none;
  clip-path: polygon(24% 0, 76% 0, 100% 34%, 50% 100%, 0 34%);
  background: linear-gradient(180deg, #d5f4f3, #74ccc8);
  opacity: 0;
  transform: scale(0.35);
}

.gems.in .gem { animation: gemIn 0.5s var(--ease-out) both; }

@keyframes gemIn {
  0% { opacity: 0; transform: scale(0.35) rotate(-12deg); }
  60% { opacity: 1; transform: scale(1.14) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* the slot that is still empty */
.gem-slot {
  width: 34px;
  height: 31px;
  flex: none;
  display: block;
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(169, 237, 234, 0.45));
  transition: transform 0.3s var(--ease-out);
}

.gem-slot:hover { transform: scale(1.08); }

.gems.in .gem-slot { animation: gemIn 0.5s var(--ease-out) both; }

.gem-slot svg { width: 100%; height: 100%; display: block; overflow: visible; }

.gem-slot path {
  fill: rgba(169, 237, 234, 0.08);
  stroke: var(--aqua);
  stroke-width: 5;
  stroke-dasharray: 9 8;
  stroke-linejoin: round;
  animation: slotPulse 1.9s ease-in-out infinite;
}

@keyframes slotPulse {
  0%, 100% { stroke-opacity: 0.55; }
  50% { stroke-opacity: 1; }
}

.gem-note {
  font-size: 13px;
  font-weight: 600;
  color: var(--aqua);
  margin-inline-start: 6px;
  opacity: 0;
}

.gems.in .gem-note { animation: gemIn 0.5s var(--ease-out) both; }

/* ═══════════════ FOOTER — the pavilion of the stone ═══════════════ */

.site-foot {
  position: relative;
  margin-top: 60px;
  padding-top: 52px;
  padding-bottom: 74px;
  color: var(--foam);
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='243'%3E%3Cpath%20d='M0%200L140%20121.5M0%20243L140%20121.5M0%20121.5L140%200M0%20121.5L140%20243'%20stroke='%23A9EDEA'%20stroke-opacity='.07'%20fill='none'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #1D4550, #12303a 62%, #0E2A31);
  /* a peak at the top, a point at the bottom — the stone closes the page */
  clip-path: polygon(0 34px, 50% 0, 100% 34px, 100% calc(100% - 52px), 50% 100%, 0 calc(100% - 52px));
}

.foot-peak {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 54px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--aqua);
  opacity: 0.85;
  transition: transform 0.3s var(--ease-out), opacity 0.3s;
}

.foot-peak:hover { opacity: 1; transform: translateX(-50%) translateY(-3px); }

.foot-in { display: grid; justify-items: center; text-align: center; }

.foot-logo { height: 54px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }

.foot-tag { margin-top: 10px; font-size: 12.5px; color: var(--aqua); opacity: 0.85; }

/* the index — the site's real substance, set like a specification list */
.foot-index { width: min(100%, 420px); margin-top: 34px; }

.foot-lab {
  font-family: var(--ff-latin);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(169, 237, 234, 0.6);
  text-align: start;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(169, 237, 234, 0.18);
}

.fi-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-block: 11px;
  text-decoration: none;
  color: var(--foam);
  border-bottom: 1px solid rgba(169, 237, 234, 0.1);
  transition: color 0.25s;
}

.fi-row:hover { color: var(--aqua); }

.fi-name { font-family: var(--ff-disp); font-weight: 600; font-size: 16px; flex: none; }

.fi-dots {
  flex: 1;
  align-self: center;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(169, 237, 234, 0.42) 0 2px, transparent 2px 6px);
}

.fi-count {
  flex: none;
  font-family: var(--ff-latin);
  font-weight: 600;
  font-size: 15px;
  color: var(--aqua);
}

.fi-unit { flex: none; font-size: 10.5px; color: rgba(215, 243, 242, 0.55); }

/* actions */
.foot-acts { display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap; justify-content: center; }

.foot-chip {
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  color: var(--foam);
  padding: 12px 24px;
  background: rgba(169, 237, 234, 0.14);
  box-shadow: inset 0 0 0 1px rgba(169, 237, 234, 0.3);
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  transition: background-color 0.25s, color 0.25s;
}

.foot-chip:hover { background: var(--aqua); color: var(--ink); }

.foot-social { display: flex; gap: 10px; margin-top: 26px; }

.foot-social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(169, 237, 234, 0.3);
  border-radius: 50%;
  color: var(--aqua);
  transition: background-color 0.25s, color 0.25s;
}

.foot-social a:hover { background: var(--aqua); color: var(--ink); }

/* the tip */
.foot-base {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  font-size: 11.5px;
  color: rgba(215, 243, 242, 0.5);
}

.foot-gem {
  width: 7px; height: 7px;
  background: var(--aqua);
  opacity: 0.7;
  transform: rotate(45deg);
}

@media (min-width: 961px) {
  .site-foot { padding-bottom: 92px; }
  .foot-index { width: min(100%, 520px); }
}

/* ═══════════════ THUMB NAV — the gem bar ═══════════════ */

.gembar {
  position: fixed;
  z-index: 45;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  inset-inline: 12px;
  height: 62px;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  padding-bottom: 11px;
  background: linear-gradient(155deg, #24525f, #1D4550 55%, #16363f);
  box-shadow: 0 16px 38px rgba(14, 42, 49, 0.34);
  /* cut ends, like the girdle of the stone */
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 18px 100%, 0 50%);
  transform: translateY(160%);
  transition: transform 0.5s var(--ease-out);
}

.gembar.up { transform: translateY(0); }

body.sheet-open .gembar { transform: translateY(160%); }

/* the rail the gem travels along */
.gb-rail {
  position: absolute;
  top: 16px;
  inset-inline: 26px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(169, 237, 234, 0.42) 0 3px, transparent 3px 7px);
}

.gb-marker {
  position: absolute;
  top: 16px;
  right: 0;
  width: 25%;
  height: 0;
  pointer-events: none;
  transform: translateX(calc(var(--i, 0) * -100%));
  transition: transform 0.55s cubic-bezier(.34, 1.3, .5, 1);
}

.gb-marker::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  background: var(--aqua);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3.5px #1D4550, 0 0 14px rgba(169, 237, 234, 0.85);
}

.gb-item {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  align-content: end;
  font-family: var(--ff-disp);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  color: rgba(215, 243, 242, 0.72);
  transition: color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.gb-item.is-active { color: #ffffff; }

/* slanted facet cuts between the labels */
.gb-item + .gb-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 26px;
  bottom: 12px;
  width: 1px;
  background: rgba(169, 237, 234, 0.22);
  transform: skewX(-13deg);
}

@media (max-width: 960px) {
  .gembar { display: grid; }
  body { padding-bottom: 82px; }
}

@media (max-width: 340px) {
  .gb-item { font-size: 11.5px; }
}

/* ═══════════════ REGION SHEET ═══════════════ */

.sheet { position: fixed; inset: 0; z-index: 60; }

.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(14, 42, 49, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.4s;
}

.sheet.open .sheet-scrim { opacity: 1; }

.sheet-panel {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: min(92dvh, 100%);
  background: var(--foam);
  border-radius: 30px 30px 0 0;
  transform: translateY(103%);
  transition: transform 0.55s var(--ease-wipe);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.sheet.open .sheet-panel { transform: none; }

/* the header rides along, so the region name and the way out survive 23 rows */
.sheet-head {
  position: sticky;
  top: 0;
  z-index: 4;
  overflow: hidden;
  background: var(--foam);
  padding: clamp(30px, 5vh, 52px) clamp(22px, 5vw, 64px) 20px;
  max-width: 860px;
  margin-inline: auto;
  transition: padding 0.4s var(--ease-out), box-shadow 0.4s;
}

.sheet-watermark {
  position: absolute;
  top: -60px;
  inset-inline-start: -80px;
  width: 480px;
  height: 480px;
  fill: rgba(169, 237, 234, 0.33);
  pointer-events: none;
  transition: opacity 0.35s;
}

/* once condensed the header is pure function — the facet would only stub out */
.sheet.condensed .sheet-watermark { opacity: 0; }

.sheet-head h2 {
  font-family: var(--ff-disp);
  font-weight: 700;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.35;
  transition: font-size 0.4s var(--ease-out);
}

.sheet-head h2:focus { outline: none; }

.sheet-meta { color: var(--teal-soft); font-size: 14.5px; margin-top: 6px; }

.sheet-head .eyebrow,
.sheet-meta {
  max-height: 44px;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out), opacity 0.28s, margin 0.4s;
}

.sheet.condensed .sheet-head {
  padding-block: 13px 12px;
  box-shadow: 0 10px 24px -16px rgba(14, 42, 49, 0.55);
}

.sheet.condensed .sheet-head h2 { font-size: 1.45rem; }

.sheet.condensed .sheet-head .eyebrow,
.sheet.condensed .sheet-meta { max-height: 0; opacity: 0; margin-top: 0; }

.sheet-close {
  position: absolute;
  top: clamp(22px, 4vh, 40px);
  inset-inline-end: clamp(22px, 5vw, 64px);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--aqua-soft);
  z-index: 2;
  transition: background-color 0.25s, color 0.25s, transform 0.25s, top 0.4s var(--ease-out), width 0.4s, height 0.4s;
}

.sheet.condensed .sheet-close { top: 9px; width: 38px; height: 38px; }

.sheet-close:hover { background: var(--ink); color: var(--foam); transform: rotate(90deg); }

/* ── the list: every woman is a stone set along one seam ── */

.rep-list {
  --pad: clamp(22px, 5vw, 64px);
  --tail: clamp(48px, 8vh, 80px);
  list-style: none;
  max-width: 860px;
  margin-inline: auto;
  padding: 4px var(--pad) var(--tail);
  position: relative;
}

/* the seam itself */
.rep-list::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: calc(var(--tail) + 6px);
  inset-inline-start: calc(var(--pad) + 5.5px);
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent, rgba(46, 100, 114, 0.26) 5%,
    rgba(46, 100, 114, 0.26) 95%, transparent
  );
}

.rep-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 14px;
  padding-inline-start: 30px;
  border-bottom: 1px solid rgba(46, 100, 114, 0.11);
  opacity: 0;
  transform: translateY(14px);
  animation: riseIn 0.55s var(--ease-out) forwards;
  animation-delay: calc(min(var(--i), 11) * 48ms);
}

.rep-row:last-child { border-bottom: 0; }

/* the stone set on the seam — filled means an official branch, not a woman */
.rep-row::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  transform: rotate(45deg);
  background: var(--foam);
  border: 1.5px solid var(--teal-soft);
  transition: background-color 0.25s, border-color 0.25s;
}

.rep-row.is-branch::before { background: var(--teal); border-color: var(--teal); }

.rep-row:hover::before { border-color: var(--teal); }

.rep-info { flex: 1; min-width: 0; }

.rep-city {
  font-family: var(--ff-disp);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.45;
}

.rep-name { color: var(--teal-soft); font-size: 13px; line-height: 1.5; margin-top: 1px; }

.rep-row.is-branch .rep-name {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rep-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--teal);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.wa-btn:hover { background: var(--teal-deep); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(46, 100, 114, 0.3); }

.map-btn {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(46, 100, 114, 0.3);
  color: var(--teal);
  transition: background-color 0.2s, color 0.2s;
}

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

.rep-row.flash { animation: rowFlash 1.6s var(--ease-out) 0.4s, riseIn 0.5s var(--ease-out) forwards; }

@keyframes rowFlash {
  0%, 100% { background: transparent; }
  25% { background: var(--aqua-soft); border-radius: 14px; }
}

.rep-empty { padding-block: 40px; color: var(--teal-soft); text-align: center; }

/* ═══════════════ REVEALS ═══════════════ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
}

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

/* ═══════════════ RESPONSIVE ═══════════════ */

@media (max-width: 960px) {
  .hero { padding-top: 88px; padding-bottom: 48px; }
  .hero .wrap { padding-inline-end: 40px; }
  .hero-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-copy { display: contents; }
  .hero-title { order: 1; }
  .search { order: 2; margin-top: 0; }
  .stone-wrap { order: 3; }
  .stats { order: 4; margin-top: 0; }
  .stone { width: min(66vw, 278px); }
  .stone-label { text-align: center; }
  .head-nav { display: none; }
  .head-shop { padding: 7px 14px; font-size: 12.5px; }
  .head-row { gap: 12px; }
  .head-shop { margin-inline-start: auto; }
  .steps { grid-template-columns: 1fr; gap: 38px; }
  .steps-thread { display: none; }
  .join-grid { grid-template-columns: 1fr; }
  .join-gem { display: none; }
}

@media (max-width: 560px) {
  .stone { width: min(88vw, 360px); }
  .f-name { font-size: 22px; }
  .f-count { font-size: 13px; }
  /* the action stays on the row — stacking it made every entry 157px tall */
  .rep-city { font-size: 1.08rem; }
  .wa-btn { padding: 10px 14px; }
  .sheet-panel { border-radius: 22px 22px 0 0; }
  .sheet-watermark { width: 300px; height: 300px; inset-inline-start: -70px; top: -40px; }
  .trust-line { flex-direction: column; gap: 10px; }
}

/* ═══════════════ REDUCED MOTION ═══════════════ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .loader { display: none; }

  body .rise, body .stone, body .facet-g, body .facet-labels, body .floor-line {
    opacity: 1; transform: none; animation: none; transition: none;
  }

  body .spec { opacity: 0.15; transition: none; }
  body .refl { opacity: 0.45; transition: none; }

  #stoneSvg, .sheen, .spark { animation: none; }
  .spark { opacity: 0.5; }
  .bub, .glint { animation: none; opacity: 0; }

  .reveal { opacity: 1; transform: none; transition: none; }

  .convo .cv-step, .convo .cv-pick, .convo .cv-bubble { opacity: 1; animation: none; }
  .convo .cv-typing { display: none; }
  .cv-typing i { animation: none; }
  .steps-thread { clip-path: none; transition: none; }

  .rep-row { opacity: 1; transform: none; animation: none; }

  .sheet-panel, .sheet-scrim { transition: none; }

  .hero-title em::after { animation: none; transform: scaleX(1); }

  .btn-solid::after, .btn-aqua::after { display: none; }

  .ptrack { animation: none; }
  /* drop the tilt, keep the centring — transform:none would drop both */
  .shelf { transform: translate(-50%, -50%); }
  .ptile { transition: none; }
}