/* ==========================================================
   LUXORE — Sample concept site
   Lab-Grown Diamonds & Rare Earth Elements trading company
   3-page horizontal drag pager, mood shifts per page
   ========================================================== */

:root{
  --navy-950: #04050a;
  --navy-900: #060a14;
  --navy-800: #0a1120;
  --navy-700: #101a30;
  --ink: #eef0f4;
  --ink-dim: #a7adbb;
  --ink-faint: #6c7383;

  /* base palette (used by page--home; other pages override accent-a/b) */
  --gold: #e8b96a;
  --gold-bright: #f6d999;
  --gold-deep: #b9873c;
  --blue: #6fb3e0;
  --blue-bright: #9fd4f5;
  --blue-deep: #2c5f8a;

  --accent-a: var(--gold);
  --accent-a-bright: var(--gold-bright);
  --accent-a-deep: var(--gold-deep);
  --accent-b: var(--blue);
  --accent-b-bright: var(--blue-bright);
  --accent-b-deep: var(--blue-deep);
  --line: rgba(232, 185, 106, 0.18);

  --ease: cubic-bezier(.22,1,.36,1);
  --font-display: 'Cormorant Garamond', 'Noto Serif JP', serif;
  --font-body: 'Inter', 'Noto Sans JP', sans-serif;
}

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

html, body{ height: 100%; margin: 0; }

body{
  background: var(--navy-950);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.75;
  overscroll-behavior-x: none;
}

body.is-loading{ overflow: hidden; height: 100vh; }

@media (hover: hover) and (pointer: fine){
  a, button, .business-card, .office-list li, .gateway-card, [data-cursor]{ cursor: none; }
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
::selection{ background: var(--accent-a-deep); color: #fff; }

/* ---------------- Loader ---------------- */
.loader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.loader-mark{
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  color: var(--gold);
  opacity: 0;
  animation: loaderFlicker 1.6s var(--ease) forwards;
}
@keyframes loaderFlicker{
  0%{ opacity: 0; letter-spacing: 1em; }
  100%{ opacity: 1; letter-spacing: 0.5em; }
}
.loader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------------- Film grain overlay ---------------- */
.grain{
  position: fixed; inset: 0; z-index: 500;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Mood field (shared ambient canvas + tint layers) ---------------- */
.mood-field{
  position: fixed; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 20% 30%, var(--navy-800) 0%, var(--navy-950) 55%, #020308 100%);
}
#bg-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------------- Custom cursor ---------------- */
.cursor{
  --color: var(--accent-a);
  --scale: 1;
  position: fixed;
  top: -26px; left: -26px;
  z-index: 600;
  width: 52px; height: 52px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
.cursor.is-visible{ opacity: 1; }
@media (hover: none), (pointer: coarse){ .cursor{ display: none; } }

.cursor .inner{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 100%; padding: 12px;
  transform: scale(var(--scale));
  transition: transform .2s cubic-bezier(.9,0,.4,1);
}
.cursor .circle{
  position: absolute; inset: 0;
  border: 1.5px solid var(--color);
  border-radius: 50%;
  transition: opacity .5s linear, border-color .4s linear, transform .5s cubic-bezier(.9,0,.4,1);
}
.cursor .middle-dot{
  position: absolute; top: 50%; left: 50%;
  width: 4px; height: 4px;
  background: var(--color);
  border-radius: 50%;
  transform: translate3d(-50%,-50%,0);
  transition: background-color .4s linear, opacity .4s linear;
}
.cursor .dots{
  width: 3px; height: 3px;
  background: var(--color);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .4s linear, background-color .4s linear, transform .4s cubic-bezier(.9,0,.4,1);
}
.cursor.is-down:not(.is-dragging){ --scale: 0.92; }

.cursor[data-config="draggable"] .dots{ opacity: 1; }
.cursor[data-config="draggable"] .middle-dot{ opacity: 0; }

.cursor[data-config="dragging"] .circle{ transform: scale(0.8); border-color: var(--accent-a-bright); }
.cursor[data-config="dragging"] .middle-dot{ opacity: 0; }
.cursor[data-config="dragging"] .dots{ opacity: 1; }
.cursor[data-config="dragging"] .dots-left{ transform: translateX(-16px); }
.cursor[data-config="dragging"] .dots-right{ transform: translateX(16px); }

.cursor[data-config="clickable"] .circle{ opacity: 0.25; transform: scale(1.5); }
.cursor[data-config="clickable"] .middle-dot{ opacity: 0; }
.cursor[data-config="clickable"] .dots{ opacity: 1; }
.cursor[data-config="clickable"] .dots-left{ transform: translateX(11px); }
.cursor[data-config="clickable"] .dots-right{ transform: translateX(-11px); }

/* ---------------- Header ---------------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6rem clamp(1.5rem, 4vw, 3.5rem);
}
.logo{
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.3em;
  color: var(--ink);
}
.header-right{ display: flex; align-items: center; gap: 2.5rem; }
.header-tagline{
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  transition: opacity .3s var(--ease);
}
@media (max-width: 760px){ .header-tagline{ display: none; } }

.menu-toggle{
  width: 34px; height: 22px; position: relative;
  background: none; border: none; cursor: pointer; padding: 0;
}
.menu-toggle span{
  position: absolute; left: 0; width: 100%; height: 1px;
  background: var(--accent-a);
  transition: transform .4s var(--ease), top .4s var(--ease), opacity .4s var(--ease);
}
.menu-toggle span:nth-child(1){ top: 0; }
.menu-toggle span:nth-child(2){ top: 100%; }
.menu-toggle.is-open span:nth-child(1){ top: 50%; transform: rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ top: 50%; transform: rotate(-45deg); }

/* ---------------- Page arrows ---------------- */
.page-arrows{
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(0.6rem, 2vw, 1.6rem);
  pointer-events: none;
}
.page-arrow{
  pointer-events: auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(4,5,10,0.35);
  backdrop-filter: blur(6px);
  color: var(--accent-a);
  font-size: 1.5rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}
.page-arrow:hover{ border-color: var(--accent-a); transform: scale(1.08); }
.page-arrow[disabled]{ opacity: 0; pointer-events: none; }
@media (max-width: 760px){ .page-arrows{ display: none; } }

/* ---------------- Page dots (bottom center) ---------------- */
.page-dots{
  position: fixed; left: 50%; bottom: clamp(1.4rem, 4vh, 2.4rem);
  transform: translateX(-50%);
  z-index: 250;
  display: flex; align-items: center; gap: 0.9rem;
}
.page-dots .pd-item{
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  cursor: pointer;
}
.page-dots .pd-label{
  font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-a-bright);
  opacity: 0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.page-dots .pd-item.is-active .pd-label{ opacity: 1; transform: translateY(0); }
.page-dots .pd-track{
  position: relative;
  width: 34px; height: 3px;
  background: rgba(167,173,187,0.28);
  overflow: hidden;
  border-radius: 2px;
}
.page-dots .pd-fill{
  position: absolute; left: 0; top: 0; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  transform: scaleX(0);
  transform-origin: left;
  box-shadow: 0 0 8px 1px rgba(232,185,106,0.35);
}

/* ---------------- Menu panel ---------------- */
.menu-panel{
  position: fixed; inset: 0; z-index: 400;
  background: rgba(4,5,10,0.92);
  backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.menu-panel.is-open{ opacity: 1; visibility: visible; }
.menu-list{ display: flex; flex-direction: column; gap: 1.4rem; text-align: center; }
.menu-list a{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--ink-dim);
  letter-spacing: 0.05em;
  transition: color .3s var(--ease), letter-spacing .3s var(--ease);
}
.menu-list a:hover{ color: var(--accent-a-bright); letter-spacing: 0.12em; }

/* ==========================================================
   Horizontal pager — 3 full-viewport pages, each with its
   own vertical scroll for internal sections
   ========================================================== */
.pager{
  position: relative;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.pages{
  display: flex;
  width: 300vw;
  height: 100%;
  will-change: transform;
}
.page{
  position: relative;
  width: 100vw;
  height: 100%;
  flex-shrink: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.page::-webkit-scrollbar{
  display: none; /* Chrome / Safari / Chromium Edge */
}

/* Per-page mood palettes */
.page--home{
  --accent-a: var(--gold); --accent-a-bright: var(--gold-bright); --accent-a-deep: var(--gold-deep);
  --accent-b: var(--blue); --accent-b-bright: var(--blue-bright); --accent-b-deep: var(--blue-deep);
  --line: rgba(232, 185, 106, 0.18);
}
.page--diamond{
  --accent-a: #8fd0ff; --accent-a-bright: #cdeeff; --accent-a-deep: #4f8fc0;
  --accent-b: #b79bf0; --accent-b-bright: #ddd0ff; --accent-b-deep: #7b5fc0;
  --line: rgba(143, 208, 255, 0.18);
}
.page--rare-earth{
  --accent-a: #e0913f; --accent-a-bright: #f5b979; --accent-a-deep: #a8631f;
  --accent-b: #7a9b5c; --accent-b-bright: #a8c98a; --accent-b-deep: #4d6636;
  --line: rgba(224, 145, 63, 0.2);
}

/* ---------------- Vertical section base (".pv" = page-vertical) ---------------- */
.pv{
  position: relative;
  min-height: 100vh;
  padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 6vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--line);
}
.section-inner{ max-width: 1180px; margin: 0 auto; width: 100%; }

.kicker{
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--accent-a);
  margin-bottom: 1.4rem;
  display: inline-block;
}
.section-title{
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  line-height: 1.35;
  font-weight: 500;
  max-width: 900px;
  margin-bottom: 2rem;
}
.section-lead{
  max-width: 640px;
  color: var(--ink-dim);
  font-size: 1.02rem;
  font-weight: 300;
}

/* ---------------- Scroll reveal ---------------- */
.reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.09s);
}
.reveal.in-view{ opacity: 1; transform: translateY(0); }

/* ---------------- Hero (shared across all 3 pages) ---------------- */
.hero-pv{
  padding-top: 0;
  border-top: none;
  align-items: center;
  overflow: hidden;
}
.hero-pv-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
}
.hero-vignette{
  position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(ellipse at 50% 45%, transparent 0%, rgba(4,5,10,0.35) 62%, var(--navy-950) 100%);
  pointer-events: none;
}
.hero-content{
  position: relative; z-index: 5;
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
  will-change: transform;
}
.eyebrow{
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  color: var(--accent-b-bright);
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.hero-title{
  font-size: clamp(3rem, 10vw, 7.2rem);
  letter-spacing: 0.12em;
  background: linear-gradient(120deg, var(--accent-a-bright) 0%, var(--accent-a) 28%, var(--ink) 52%, var(--accent-b-bright) 78%, var(--accent-b) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1.4rem;
  line-height: 1;
}
.hero-title.small{
  font-size: clamp(2.1rem, 6vw, 4.4rem);
  line-height: 1.15;
}
.tagline{
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  color: var(--ink);
  margin-bottom: 1.6rem;
  letter-spacing: 0.02em;
}
.hero-sub{
  color: var(--ink-dim);
  font-size: 0.95rem;
  font-weight: 300;
  max-width: 560px;
  margin: 0 auto;
}

.hero-hints{
  position: absolute; bottom: 2.6rem; left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
}
.hint-chip{
  font-size: 0.62rem; letter-spacing: 0.28em; color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: rgba(4,5,10,0.3);
  animation: hintPulse 2.6s ease-in-out infinite;
}
.hint-chip-sub{
  color: var(--ink-faint);
  font-size: 0.56rem;
  border-color: transparent;
  background: none;
  animation: none;
  padding: 0;
}
@keyframes hintPulse{
  0%, 100%{ transform: translateX(0); opacity: 0.85; }
  50%{ transform: translateX(4px); opacity: 1; }
}

.hero-meta{
  position: absolute; bottom: 2.2rem; left: clamp(1.5rem, 6vw, 3.5rem); right: clamp(1.5rem, 6vw, 3.5rem);
  z-index: 5;
  display: flex; justify-content: space-between;
  font-size: 0.62rem; letter-spacing: 0.18em; color: var(--ink-faint);
  text-transform: uppercase;
}
@media (max-width: 700px){ .hero-meta{ display: none; } }

/* ---------------- About / particles layer ---------------- */
.section-about{ position: relative; overflow: hidden; }
.bg-particles-layer{
  position: absolute; inset: -10% -10%;
  background-image:
    radial-gradient(2px 2px at 10% 20%, var(--accent-a) 0, transparent 60%),
    radial-gradient(2px 2px at 80% 60%, var(--accent-b) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 80%, var(--accent-a-bright) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 65% 15%, var(--accent-b-bright) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 55%, var(--accent-a) 0, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.stat-row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2rem;
  margin-top: 3.2rem;
  padding-top: 2.4rem;
  border-top: 1px solid var(--line);
}
.stat{ display: flex; flex-direction: column; gap: 0.4rem; }
.stat-num{
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--accent-a);
}
.stat-label{
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint);
}
@media (max-width: 760px){ .stat-row{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------------- Gateway cards (Home) ---------------- */
.gateway-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.4rem;
  margin-top: 2rem;
}
.gateway-card{
  position: relative;
  padding: 2.6rem 2.2rem;
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s var(--ease);
}
.gateway-card::before{
  content: '';
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .5s var(--ease);
  z-index: 0;
}
.gateway-diamond::before{ background: linear-gradient(135deg, rgba(143,208,255,0.14), rgba(183,155,240,0.10)); }
.gateway-rareearth::before{ background: linear-gradient(135deg, rgba(224,145,63,0.14), rgba(122,155,92,0.10)); }
.gateway-card:hover::before{ opacity: 1; }
.gateway-card:hover{ transform: translateY(-4px); border-color: var(--accent-a); }
.gateway-index{
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--accent-b-bright);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1.2rem;
  position: relative; z-index: 1;
}
.gateway-card h3{ font-size: 1.5rem; margin-bottom: 0.9rem; position: relative; z-index: 1; }
.gateway-card p{ color: var(--ink-dim); font-size: 0.92rem; font-weight: 300; position: relative; z-index: 1; margin-bottom: 1.4rem; }
.gateway-link{
  position: relative; z-index: 1;
  font-size: 0.68rem; letter-spacing: 0.2em; color: var(--accent-a);
}
@media (max-width: 760px){ .gateway-grid{ grid-template-columns: 1fr; } }

/* ---------------- Business / feature grid ---------------- */
.business-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 2rem;
}
.business-card{
  background: var(--navy-950);
  padding: 2.6rem 2.2rem;
  transition: background .5s var(--ease), transform .5s var(--ease);
  position: relative;
  overflow: hidden;
}
.business-card::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-a) 10%, transparent), color-mix(in srgb, var(--accent-b) 8%, transparent));
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.business-card:hover::before{ opacity: 1; }
.business-card:hover{ transform: translateY(-4px); }
.card-num{
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--accent-b-bright);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 1.2rem;
}
.business-card h3{ font-size: 1.4rem; margin-bottom: 0.9rem; color: var(--ink); }
.business-card p{ color: var(--ink-dim); font-size: 0.92rem; font-weight: 300; }
@media (max-width: 760px){ .business-grid{ grid-template-columns: 1fr; } }

/* ---------------- Process track ---------------- */
.process-track{
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 2.4rem;
  margin-top: 3rem;
}
.process-line{
  position: absolute; top: 0.55rem; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-a-deep), var(--accent-b-deep));
  opacity: 0.5;
}
.process-step{ position: relative; padding-top: 2.6rem; }
.process-step > .step-index{
  font-family: var(--font-display);
  color: var(--accent-a);
  width: auto; height: auto; border: none; background: none;
  font-size: 0.85rem; letter-spacing: 0.1em; position: static; display: block; margin-bottom: 0.6rem;
}
.process-step h4{ font-size: 1.1rem; color: var(--ink); margin-bottom: 0.7rem; font-weight: 500; }
.process-step p{ color: var(--ink-dim); font-size: 0.88rem; font-weight: 300; }
@media (max-width: 900px){
  .process-track{ grid-template-columns: 1fr; gap: 2.2rem; }
  .process-line{ display: none; }
}

/* ---------------- Network (Home only) ---------------- */
.section-network{ position: relative; overflow: hidden; }
#network-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.75;
}
.office-list{
  margin-top: 2.4rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.1rem 2rem;
}
.office-list li{
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  transition: color .3s var(--ease);
}
.office-list li:hover{ color: var(--accent-a-bright); }
@media (max-width: 760px){ .office-list{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------------- ESG ---------------- */
.esg-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 2rem;
  margin-top: 2.4rem;
}
.esg-card{ padding: 2.2rem; border: 1px solid var(--line); position: relative; }
.esg-letter{
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--accent-a);
  display: block;
  margin-bottom: 1rem;
}
.esg-card h4{ font-size: 1.15rem; margin-bottom: 0.8rem; }
.esg-card p{ color: var(--ink-dim); font-size: 0.9rem; font-weight: 300; }
@media (max-width: 900px){ .esg-grid{ grid-template-columns: 1fr; } }

/* ---------------- CTA / mini CTA sections ---------------- */
.section-cta-mini{ min-height: 60vh; }
.cta-button{
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2.4rem;
  padding: 1.1rem 2.4rem;
  border: 1px solid var(--accent-a);
  color: var(--accent-a-bright);
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color .4s var(--ease);
}
.cta-button::before{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--accent-a), var(--accent-b));
  transform: translateX(-100%);
  transition: transform .5s var(--ease);
  z-index: -1;
}
.cta-button:hover{ color: var(--navy-950); }
.cta-button:hover::before{ transform: translateX(0); }

/* ---------------- Contact / footer ---------------- */
.section-contact{ min-height: 92vh; }
.site-footer{
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.68rem; letter-spacing: 0.08em; color: var(--ink-faint);
  text-transform: uppercase;
}