/* ============================================================================
   Kempton Smile — site stylesheet.
   A 1:1 port of the prototype: global tokens, a reset, one class per
   original inline style, the interactive states, and the breakpoints.
   Sections, in order:
     1. Tokens
     2. Reset (subset of the Tailwind preflight the prototype shipped)
     3. Base elements, keyframes, modal helpers
     4. Shared classes
     5. Section classes (nav → footer, page order)
     6. Interactive states (nav, services modal, booking wizard, reviews, form)
     7. Responsive overrides
   Initial and animated states for motion live in motion.css.
   ========================================================================== */

/* ── 1. TOKENS ── */
:root {
  --bg: #070d18;
  --bg-2: #0a1628;
  --bg-3: #0f1f3a;
  --surface: #10213e;
  --surface-2: #152a4d;
  --line: rgba(200, 216, 232, 0.08);
  --line-strong: rgba(200, 216, 232, 0.18);
  --teal: #00c8d8;
  --teal-soft: rgba(0, 200, 216, 0.12);
  --teal-glow: rgba(0, 200, 216, 0.35);
  --magenta: #ec0f7d;
  --magenta-soft: rgba(236, 15, 125, 0.12);
  --magenta-glow: rgba(236, 15, 125, 0.35);
  --chrome: #c8d4e3;
  --chrome-2: #8ea0b8;
  --text: #f5f9ff;
  --text-2: #b8c5d6;
  --text-3: #7d8ca3;
  --warn: #ffb547;
  --good: #5dd4a3;
  --danger: #ef4444;
  --danger-soft: #fca5a5;
  --star: #fbbf24;
  --field-bg: #0a1220;
}

/* ── 2. RESET ── */
*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: system-ui, sans-serif;
}
body {
  margin: 0;
  line-height: inherit;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b,
strong {
  font-weight: bolder;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
button,
select {
  text-transform: none;
}
[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
summary {
  display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
  margin: 0;
}
menu,
ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}
[role="button"],
button {
  cursor: pointer;
}
:disabled {
  cursor: default;
}
img,
svg,
video {
  display: block;
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
  height: auto;
}
/* app.js toggles [hidden]; it must win over the display of any class */
[hidden] {
  display: none !important;
}

/* ── 3. BASE ── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% 0, rgba(0, 200, 216, 0.08), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(0, 200, 216, 0.05), transparent 70%);
  background-attachment: fixed;
}
::selection {
  background: var(--teal);
  color: var(--bg);
}
h1,
h2,
h3,
h4 {
  font-family: Fraunces, serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes live-dot {
  0% { box-shadow: 0 0 0 0 rgba(0, 200, 216, 0.7); }
  70% { box-shadow: 0 0 0 12px rgba(0, 200, 216, 0); }
  to { box-shadow: 0 0 0 0 rgba(0, 200, 216, 0); }
}
@keyframes tag-pulse {
  0%, to { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes scroll-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  to { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes hero-reveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes rotate {
  to { transform: rotate(1turn); }
}
@keyframes underline-grow {
  to { transform: scaleX(1); }
}

body.modal-open {
  overflow: hidden;
}
.modal-scroll::-webkit-scrollbar {
  width: 6px;
}
.modal-scroll::-webkit-scrollbar-thumb {
  background: var(--teal-soft);
  border-radius: 3px;
}
.modal-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}
.modal-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--teal) transparent;
}

.page {
  background: var(--bg);
}
/* honeypot: present for bots, off-screen for people */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 4–5. SHARED AND SECTION CLASSES (one class per original inline style) ── */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 0;
  backdrop-filter: blur(18px);
  background: rgba(7,13,24,0.7);
  border-bottom: 1px solid transparent;
  transition: all 0.4s ease;
}
.nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 15px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.06);
  transition: all 0.3s ease;
}
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
  transition: height 0.3s ease;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  list-style: none;
}
.nav-link-featured {
  color: var(--teal);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 400;
  padding: 0.55rem 0.85rem;
  border-radius: 99px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--teal-soft);
  background: linear-gradient(180deg,rgba(0,200,216,.06),transparent);
}
.nav-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 400;
  padding: 0.55rem 0.85rem;
  border-radius: 99px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid transparent;
  background: transparent;
}
.nav-book {
  position: relative;
}
.nav-book-btn {
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--teal);
  color: var(--bg);
  padding: 0.7rem 1.4rem;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px var(--teal-glow);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.nav-book-caret {
  font-size: .7rem;
}
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 1.2rem;
}
.intro-section1 {
  position: relative;
  padding: 8.5rem 0 6rem;
  background: var(--bg);
  overflow: hidden;
}
.intro-div1 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 80% 20%,rgba(0,200,216,.08),transparent 60%),radial-gradient(ellipse 50% 40% at 10% 90%,rgba(236,15,125,.05),transparent 60%);
}
.intro-div2 {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
}
.intro-div3 {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 4.5rem;
  align-items: center;
}
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow-line {
  width: 24px;
  height: 1px;
  background: var(--teal);
}
.intro-h11 {
  font-size: clamp(2.4rem,5vw,4.2rem);
  font-weight: 300;
  margin-top: 1.4rem;
  line-height: 1.05;
}
.intro-span1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--teal);
}
.intro-p1 {
  font-size: clamp(1.02rem,1.6vw,1.18rem);
  line-height: 1.7;
  color: var(--text-2);
  margin: 1.75rem 0;
  max-width: 620px;
}
.intro-div4 {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin: 1.75rem 0 2.25rem;
}
.intro-span2 {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  border-radius: 99px;
  font-size: .82rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .04em;
  background: rgba(255,255,255,.04);
  color: var(--text-2);
  border: 1px solid var(--line-strong);
}
.intro-span3 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.intro-div5 {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.intro-a1 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--teal);
  color: #04121f;
  box-shadow: 0 8px 30px rgba(0,200,216,.25);
  transition: all 0.3s ease;
}
.intro-a2 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  border-radius: 99px;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  transition: all 0.3s ease;
}
.intro-div6 {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 24px;
  overflow: hidden;
  background: #0a1628;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.img-cover-top {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* <picture> wrappers for the webp sources. Each box matches the frame of the
   former bare <img>, so the layout stays the same and parallax.js still
   measures the frame through img.parentElement. */
.pic-cover {
  position: absolute;
  inset: 0;
  display: block;
}
.pic-fill {
  display: block;
  width: 100%;
  height: 100%;
}
.pic-contents {
  display: contents;
}
.intro-div7 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 55%,rgba(7,13,24,.85) 100%);
}
.intro-div8 {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  background: rgba(7,13,24,.72);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}
.portrait-name {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  font-weight: 400;
}
.portrait-role {
  font-size: .82rem;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .3rem;
}
.xp {
  position: relative;
  height: 100vh;
  min-height: 680px;
  width: 100%;
  overflow: hidden;
  background: #000;
}
.xp-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.xp-div1 {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%,transparent 30%,rgba(7,13,24,.35) 70%,rgba(7,13,24,.85) 100%),linear-gradient(180deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,.05) 22%,rgba(7,13,24,.05) 45%,rgba(7,13,24,.7) 80%,rgba(7,13,24,.95) 100%),linear-gradient(135deg,rgba(0,200,216,.04),transparent 50%);
}
.xp-div2 {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.xp-sound {
  position: absolute;
  top: 7rem;
  right: 2rem;
  z-index: 4;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(7,13,24,.55);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.3s ease;
}
.xp-div3 {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 7rem;
  padding-top: 8rem;
}
.xp-div4 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
  width: 100%;
}
.xp-span1 {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1.1rem 0.55rem 0.85rem;
  border-radius: 99px;
  background: rgba(0,200,216,.1);
  border: 1px solid var(--teal-soft);
  backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 1.75rem;
  animation: tag-pulse 4s ease-in-out infinite;
}
.xp-span2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  animation: live-dot 2s ease-out infinite;
}
.xp-title {
  font-size: clamp(2.6rem,7.5vw,6.4rem);
  font-weight: 200;
  max-width: 1000px;
  line-height: 1.02;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.xp-span3 {
  font-style: italic;
  font-weight: 300;
  position: relative;
  display: inline-block;
}
.xp-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .05em;
  height: 2px;
  background: linear-gradient(90deg,var(--teal),transparent);
  animation: underline-grow 2s ease-out 1.8s forwards;
  transform: scaleX(0);
  transform-origin: left;
}
.xp-lead {
  font-size: clamp(1.05rem,1.4vw,1.25rem);
  color: rgba(255,255,255,.85);
  max-width: 620px;
  font-weight: 300;
  margin-bottom: 2.5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.xp-strong1 {
  color: var(--teal);
  font-weight: 500;
}
.xp-strong2 {
  color: #fff;
  font-weight: 500;
}
.xp-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.xp-a1 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  border: none;
  cursor: pointer;
  background: var(--teal);
  color: var(--bg);
  box-shadow: 0 4px 24px var(--teal-glow);
  transition: all 0.3s ease;
}
.xp-a2 {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  transition: all 0.3s ease;
}
.xp-div7 {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
}
.xp-div8 {
  width: 1px;
  height: 36px;
  background: linear-gradient(180deg,transparent,var(--teal));
  animation: scroll-line 2.5s ease-in-out infinite;
}
.stats-div1 {
  background: linear-gradient(180deg,var(--bg),var(--bg-2));
  border-bottom: 1px solid var(--line);
  padding: 2.5rem 0;
}
.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
}
.stats-div2 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 2rem;
}
.stats-div3 {
  display: flex;
  flex-direction: column;
}
.stat-num {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.8rem,3vw,2.4rem);
  font-weight: 300;
  color: var(--teal);
  font-style: italic;
  line-height: 1;
}
.stats-div5 {
  font-size: 0.74rem;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.scan-section1 {
  position: relative;
  padding: 7rem 0;
  overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 0%,rgba(0,200,216,.08),transparent 70%),radial-gradient(ellipse 50% 40% at 50% 100%,rgba(0,200,216,.05),transparent 70%),linear-gradient(180deg,var(--bg-2),var(--bg));
  border-bottom: 1px solid var(--line);
}
.scan-div1 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,rgba(0,200,216,.06) 0%,transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.scan-div2 {
  margin: 0 auto 4.5rem;
  width: 280px;
  height: 280px;
  position: relative;
  display: grid;
  place-items: center;
}
.scan-div3 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--teal-soft);
  animation: rotate 30s linear infinite;
}
.scan-span1 {
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}
.scan-span2 {
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}
.scan-div4 {
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  border: 1px dashed var(--teal-soft);
  animation: rotate 20s linear infinite reverse;
}
.scan-span3 {
  position: absolute;
  top: 50%;
  left: -3px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}
.scan-span4 {
  position: absolute;
  top: 50%;
  right: -3px;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}
.scan-div5 {
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 1px solid var(--teal);
  box-shadow: 0 0 40px var(--teal-glow), inset 0 0 40px rgba(0,200,216,.1);
}
.scan-div6 {
  position: relative;
  z-index: 1;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 1.4rem;
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.1;
  background: radial-gradient(circle,var(--bg-3) 0%,var(--bg) 70%);
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: grid;
  place-items: center;
  border: 1px solid var(--teal-soft);
}
.scan-span5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  font-style: normal;
  letter-spacing: .2em;
  color: var(--teal);
  text-transform: uppercase;
  display: block;
  margin-bottom: .4rem;
}
.scan-div7 {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 4rem;
  position: relative;
  z-index: 1;
}
.eyebrow-mb {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.scan-h21 {
  font-size: clamp(2rem,4.5vw,3.75rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
}
.accent {
  font-style: italic;
  color: var(--teal);
  font-weight: 300;
}
.scan-p1 {
  color: var(--text-2);
  font-size: 1.08rem;
  max-width: 660px;
  margin: 0 auto;
}
.scan-strong1 {
  color: var(--teal);
}
.scan-div8 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
}
.scan-div9 {
  padding: 2rem 1.6rem;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(21,42,77,.4),rgba(15,31,58,.15));
  border: 1px solid var(--line);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}
.scan-span6 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: var(--teal);
  letter-spacing: .18em;
}
.scan-div10 {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  margin: 1.25rem 0;
  background: linear-gradient(135deg,rgba(0,200,216,.16),rgba(0,200,216,.03));
  border: 1px solid var(--teal-soft);
  display: grid;
  place-items: center;
}
.scan-h41 {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: .5rem;
}
.scan-p2 {
  color: var(--text-2);
  font-size: .93rem;
  line-height: 1.55;
}
.scan-div11 {
  text-align: center;
  margin-top: 4rem;
  position: relative;
  z-index: 1;
}
.btn-teal {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  background: var(--teal);
  color: var(--bg);
  box-shadow: 0 4px 24px var(--teal-glow);
  transition: all 0.3s ease;
}
.scan-div12 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-top: 1.25rem;
}
.marquee-div1 {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.4rem 0;
  overflow: hidden;
  background: rgba(15,31,58,.3);
}
.marquee-div2 {
  display: flex;
  gap: 4rem;
  white-space: nowrap;
  animation: marquee-scroll 40s linear infinite;
  width: max-content;
}
.marquee-span1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--chrome-2);
  font-weight: 300;
}
.marquee-span2 {
  color: var(--teal);
  margin-right: 4rem;
  font-style: normal;
}
.section-pad {
  padding: 7rem 0;
  position: relative;
}
.svc-div1 {
  max-width: 760px;
  margin-bottom: 4rem;
}
.section-title {
  font-size: clamp(2rem,4.5vw,3.75rem);
  font-weight: 300;
  margin-top: 1.25rem;
}
.section-lead {
  margin-top: 1.25rem;
  color: var(--text-2);
  font-size: 1.05rem;
}
.svc-div2 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  gap: 1.25rem;
}
.svc-card-featured {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(0,200,216,.08),rgba(15,31,58,.3));
  border: 1px solid var(--teal-soft);
  transition: all 0.4s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
  cursor: pointer;
}
.svc-span1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: var(--teal);
  letter-spacing: .18em;
  font-weight: 600;
}
.svc-div4 {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(0,200,216,.18),rgba(0,200,216,.04));
  border: 1px solid var(--teal-soft);
  display: grid;
  place-items: center;
  margin: 1.4rem 0 1.5rem;
  position: relative;
  z-index: 1;
}
.svc-h31 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.4rem,2.2vw,2rem);
  font-weight: 400;
  margin-bottom: .65rem;
  position: relative;
  z-index: 1;
}
.svc-p1 {
  color: var(--text-2);
  font-size: .95rem;
  position: relative;
  z-index: 1;
}
.svc-span2 {
  margin-top: 1.4rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  color: var(--teal);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.svc-card {
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(21,42,77,.4),rgba(15,31,58,.2));
  border: 1px solid var(--line);
  transition: all 0.4s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
  cursor: pointer;
}
.svc-span3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: var(--teal);
  letter-spacing: .18em;
  font-weight: 400;
}
.tele-section1 {
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(236,15,125,.08), transparent 70%),radial-gradient(ellipse 50% 40% at 80% 100%, rgba(0,200,216,.06), transparent 70%),linear-gradient(180deg, var(--bg-2), var(--bg));
}
.tele-div1 {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,15,125,.06), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.tele-div2 {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.75rem;
  position: relative;
  z-index: 1;
}
.tele-div3 {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 3.5rem;
}
.tele-span1 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: 1.5rem;
  padding: .5rem 1rem;
  border-radius: 99px;
  background: rgba(236,15,125,.08);
  border: 1px solid rgba(236,15,125,.25);
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--magenta);
}
.tele-span2 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.6);
}
.section-title-mb {
  font-size: clamp(2rem,4.5vw,3.75rem);
  font-weight: 300;
  margin-bottom: 1.25rem;
}
.tele-em1 {
  font-style: italic;
  font-weight: 300;
  color: var(--magenta);
}
.tele-p1 {
  color: var(--text-2);
  font-size: 1.08rem;
  max-width: 640px;
  margin: 0 auto;
}
.tele-div4 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3.5rem;
}
.tele-div5 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.tele-div6 {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(21,42,77,.4), rgba(15,31,58,.2));
  border: 1px solid var(--line);
}
.tele-div7 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  font-weight: 700;
  color: var(--magenta);
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(236,15,125,.1);
  border: 1px solid rgba(236,15,125,.2);
}
.tele-h41 {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: .35rem;
}
.tele-p2 {
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.55;
}
.tele-div8 {
  padding: 2.5rem;
  border-radius: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(21,42,77,.5), rgba(15,31,58,.25));
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.tele-div9 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.25rem;
}
.tele-div10 {
  width: 220px;
  height: 220px;
  margin: 0 auto 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  padding: 12px;
}
.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tele-div11 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .5rem;
}
.tele-div12 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: .3em;
  color: var(--magenta);
  padding: .75rem 1.5rem;
  border-radius: 14px;
  background: rgba(236,15,125,.08);
  border: 1px solid rgba(236,15,125,.2);
  display: inline-block;
}
.tele-div13 {
  margin-top: 1.25rem;
  font-size: .82rem;
  color: var(--text-3);
  line-height: 1.5;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.tele-div14 {
  padding: 1.75rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(21,42,77,.4), rgba(15,31,58,.2));
  border: 1px solid var(--line);
}
.tele-div15 {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 1.1rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(236,15,125,.16), rgba(236,15,125,.03));
  border: 1px solid rgba(236,15,125,.15);
}
.tele-h42 {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: .5rem;
}
.tele-p3 {
  color: var(--text-2);
  font-size: .9rem;
  line-height: 1.55;
}
.tele-div16 {
  text-align: center;
}
.tele-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--magenta);
  color: #fff;
  box-shadow: 0 4px 24px var(--magenta-glow);
  opacity: 1;
  transition: all .25s ease;
}
.tele-div17 {
  margin-top: 1.25rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
}
.about-div1 {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 4rem;
  align-items: center;
}
.about-div2 {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 24px;
  overflow: hidden;
  background: #0a1628;
  border: 1px solid var(--line-strong);
}
.about-div3 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 55%,rgba(7,13,24,.8) 100%);
}
.about-div4 {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  background: rgba(7,13,24,.7);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 1rem 1.25rem;
}
.about-p1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.4rem,2.4vw,2rem);
  line-height: 1.35;
  color: var(--text);
  margin: 1.75rem 0;
}
.about-span1 {
  color: var(--teal);
  font-size: 3rem;
  display: block;
  line-height: 0;
  margin-bottom: 1rem;
}
.about-ul1 {
  margin: 2rem 0;
  display: grid;
  gap: .85rem;
  list-style: none;
  padding: 0;
}
.about-li1 {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: var(--text-2);
  font-size: .95rem;
}
.about-span2 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
  margin-top: .55rem;
  flex-shrink: 0;
}
.about-a1 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.18);
  transition: all 0.3s ease;
}
.staff-section1 {
  padding: 7rem 0;
  position: relative;
  background: linear-gradient(180deg, var(--bg), var(--bg-2));
}
.staff-div1 {
  text-align: center;
  margin-bottom: 3.5rem;
}
.eyebrow-center {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
}
.staff-em1 {
  font-style: italic;
  font-weight: 300;
  color: var(--teal);
}
.staff-div2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  max-width: 960px;
  margin: 0 auto;
}
.staff-div3 {
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(21,42,77,.4), rgba(15,31,58,.2));
  border: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
}
.staff-div4 {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #0a1628;
}
.staff-div5 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(7,13,24,.85) 100%);
}
.staff-div6 {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  right: 1.25rem;
}
.staff-div7 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 400;
}
.staff-div8 {
  font-size: .8rem;
  color: var(--text-3);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .25rem;
}
.staff-div9 {
  padding: 1.75rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.staff-div10 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .75rem;
}
.staff-p1 {
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.staff-div11 {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: 1.5rem;
}
.staff-span1 {
  font-size: .72rem;
  padding: .35rem .7rem;
  border-radius: 99px;
  background: rgba(0,200,216,.06);
  border: 1px solid rgba(0,200,216,.15);
  color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .03em;
}
.staff-div12 {
  margin-top: auto;
}
.staff-a1 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.6rem;
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: var(--teal);
  color: var(--bg);
  box-shadow: 0 4px 20px var(--teal-glow);
  transition: all 0.3s ease;
}
.staff-div13 {
  text-align: center;
  margin: 5rem 0 2.5rem;
}
.staff-h31 {
  font-size: clamp(1.3rem,3vw,2rem);
  font-weight: 300;
  margin-top: 1rem;
  color: var(--text-1);
}
.staff-em2 {
  font-style: italic;
  color: var(--teal);
}
.staff-div14 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 960px;
  margin: 0 auto;
}
.staff-div15 {
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(21,42,77,.35), rgba(15,31,58,.15));
  border: 1px solid var(--line-strong);
  text-align: center;
}
.staff-div16 {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #0a1628;
}
.staff-div17 {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(7,13,24,.75) 100%);
}
.staff-div18 {
  padding: 1.25rem 1rem 1.5rem;
}
.staff-div19 {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-1);
}
.staff-div20 {
  font-size: .72rem;
  color: var(--teal);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: .4rem;
}
.accred-section1 {
  padding: 6rem 0;
  position: relative;
  background: var(--bg);
}
.center-mb3 {
  text-align: center;
  margin-bottom: 3rem;
}
.accred-h21 {
  font-size: clamp(1.9rem,4vw,3.25rem);
  font-weight: 300;
  margin-top: 1.25rem;
}
.accred-p1 {
  color: var(--text-2);
  font-size: 1rem;
  max-width: 620px;
  margin: 1.25rem auto 0;
  line-height: 1.6;
}
.accred-div1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}
.accred-div2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  border-radius: 18px;
  background-color: #101f38;
  border: 1px solid var(--line-strong);
  transition: transform .3s, border-color .3s;
}
.accred-div3 {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 1.25rem;
  margin-bottom: 1.1rem;
}
.accred-img1 {
  /* auto size keeps the aspect ratio under the max limits despite the
     width and height attributes */
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.accred-div4 {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 400;
  margin-bottom: .4rem;
}
.accred-div5 {
  color: var(--text-3);
  font-size: .82rem;
  line-height: 1.5;
}
.accred-div6 {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  margin-bottom: 1.1rem;
}
.sys-section1 {
  background: linear-gradient(180deg,transparent,rgba(15,31,58,.4),transparent);
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.sys-div1 {
  padding: 5rem 0;
  border-top: none;
}
.sys-h21 {
  font-size: clamp(2.6rem,6vw,5rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
  max-width: 900px;
}
.subsection-lead {
  color: var(--text-2);
  font-size: 1.08rem;
  max-width: 720px;
  margin-bottom: 2.5rem;
}
.sys-div2 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 2rem;
  padding: 2.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.sys-div3 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.5rem,5vw,3.6rem);
  color: var(--teal);
  line-height: 1;
}
.sys-span1 {
  display: block;
  margin-top: .65rem;
  color: var(--text-2);
  font-size: .92rem;
  max-width: 280px;
}
.subsection {
  padding: 5rem 0;
  border-top: 1px solid var(--line);
}
.section-title-mb-narrow {
  font-size: clamp(2rem,4.5vw,3.75rem);
  font-weight: 300;
  margin-bottom: 1.25rem;
  max-width: 780px;
}
.sys-div4 {
  position: relative;
  padding: 1.75rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid var(--line);
}
.sys-div5 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,200,216,.12);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: .95rem;
  font-weight: 500;
  margin-bottom: 1rem;
}
.u-h41 {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: .5rem;
}
.u-p1 {
  color: var(--text-2);
  font-size: .9rem;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.25rem;
}
.sys-div6 {
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid var(--line);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
}
.sys-span2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  display: block;
}
.sys-div7 {
  font-family: 'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: .75rem;
}
.sys-p1 {
  color: var(--text-2);
  font-size: .92rem;
  flex: 1;
  margin-bottom: 1.25rem;
}
.sys-span3 {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .4rem .75rem;
  border-radius: 99px;
  background: rgba(0,200,216,.08);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
}
.sys-div8 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3.5rem;
  align-items: start;
}
.sys-p2 {
  color: var(--text-2);
  font-size: .98rem;
  line-height: 1.75;
}
.sys-div9 {
  padding: 1.5rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
}
.sys-div10 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--teal);
  font-weight: 400;
  min-width: 80px;
}
.sys-strong1 {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-size: .95rem;
  margin-bottom: .2rem;
}
.sys-span4 {
  color: var(--text-2);
  font-size: .85rem;
}
.sys-div11 {
  margin-top: 1.5rem;
  padding: 1.5rem;
  border-radius: 14px;
  background: rgba(0,200,216,.05);
  border: 1px solid var(--teal-soft);
}
.sys-span5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .75rem;
  display: block;
}
.sys-p3 {
  color: var(--text-2);
  font-size: .95rem;
}
.sys-strong2 {
  color: var(--text);
  font-weight: 500;
}
.sys-div12 {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 4rem;
  align-items: start;
}
.sys-p4 {
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: 1.5rem;
}
.sys-div13 {
  padding: 1.5rem;
  border-radius: 14px;
  background: rgba(0,200,216,.05);
  border: 1px solid var(--teal-soft);
}
.sys-div14 {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.sys-div15 {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid var(--line);
}
.sys-span6 {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  background: rgba(0,200,216,.1);
  border: 1px solid var(--teal-soft);
  flex-shrink: 0;
}
.sys-div16 {
  font-family: 'Fraunces', serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
}
.sys-div17 {
  font-size: .82rem;
  color: var(--text-3);
  margin-top: .2rem;
}
.sys-div18 {
  text-align: center;
  color: var(--teal);
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .4rem 0;
}
.sys-span7 {
  display: block;
  font-size: 1.3rem;
  margin-bottom: .25rem;
}
.sys-div19 {
  padding: 2.5rem;
  border-radius: 18px;
  margin-bottom: 2.5rem;
  background: linear-gradient(135deg,rgba(0,200,216,.05),rgba(15,31,58,.4));
  border-left: 3px solid var(--teal);
}
.sys-p5 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem,2.2vw,1.7rem);
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 1rem;
}
.sys-span8 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-3);
}
.sys-div20 {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
}
.sys-div21 {
  display: flex;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  background: rgba(7,13,24,.4);
  border: 1px solid var(--line);
}
.sys-span9 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: .55rem;
  box-shadow: 0 0 12px var(--teal);
  flex-shrink: 0;
}
.sys-p6 {
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.6;
}
.sys-div22 {
  padding: 1.75rem 1.5rem;
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(21,42,77,.4),rgba(15,31,58,.2));
  border: 1px solid var(--line);
}
.sys-div23 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .75rem;
}
.sys-h41 {
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 1rem;
}
.sys-div24 {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.sys-span10 {
  font-size: .78rem;
  padding: .35rem .7rem;
  border-radius: 99px;
  background: rgba(0,200,216,.06);
  border: 1px solid var(--teal-soft);
  color: var(--text-2);
}
.section-pad-bg {
  padding: 7rem 0;
  position: relative;
  background: var(--bg);
}
.hs-div1 {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 3.5rem;
  align-items: center;
  margin-bottom: 4rem;
}
.hs-h21 {
  font-size: clamp(2rem,4.5vw,3.5rem);
  font-weight: 300;
  margin-top: 1.25rem;
}
.hs-p1 {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 560px;
  margin-top: 1.5rem;
  line-height: 1.65;
}
.text-strong {
  color: var(--text);
}
.hs-div2 {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #ffffff;
  aspect-ratio: 1/1;
}
.hs-div3 {
  display: grid;
  gap: 1.5rem;
}
.hs-div4 {
  padding: 2rem 2rem 2.25rem;
  border-radius: 20px;
  background-color: #101f38;
  border: 1px solid var(--line-strong);
}
.hs-div5 {
  margin-bottom: 1.75rem;
}
.hs-span1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
}
.hs-h31 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.35rem,2.6vw,1.85rem);
  font-weight: 400;
  margin-top: .4rem;
}
.hs-p2 {
  color: var(--text-2);
  font-size: .95rem;
  margin-top: .5rem;
  max-width: 760px;
}
.hs-div6 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1.5rem;
}
.hs-div7 {
  padding: 1.35rem;
  border-radius: 14px;
  background-color: #0a1628;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.hs-h41 {
  font-family: 'Fraunces', serif;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: .6rem;
  line-height: 1.35;
}
.hs-p3 {
  color: var(--text-3);
  font-size: .82rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.hs-div8 {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: auto;
}
.hs-span2 {
  display: inline-block;
  padding: .32rem .7rem;
  border-radius: 99px;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .02em;
  color: var(--teal);
  background: rgba(0,200,216,.08);
  border: 1px solid var(--teal-soft);
}
.hs-div9 {
  margin-top: 1.5rem;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  background-color: #101f38;
  border-left: 3px solid var(--teal);
}
.hs-span3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
  display: block;
  margin-bottom: .5rem;
}
.hs-p4 {
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.6;
  margin: 0;
}
.brux-section1 {
  padding: 7rem 0;
  position: relative;
  background: linear-gradient(180deg,transparent,rgba(15,31,58,.3),transparent);
}
.brux-div1 {
  margin-bottom: 4rem;
}
.brux-div2 {
  margin-bottom: 1rem;
}
.brux-div3 {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  background: #000;
}
.brux-video1 {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #000;
}
.brux-span1 {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .4rem .8rem;
  border-radius: 99px;
  background: rgba(7,13,24,.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--teal-soft);
  color: var(--teal);
  pointer-events: none;
}
.brux-p1 {
  color: var(--text-3);
  font-size: .86rem;
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
  font-family: 'Fraunces', serif;
}
.brux-div4 {
  padding: 1.75rem 1.5rem;
  border-radius: 16px;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid var(--line);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.brux-span2 {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.brux-h41 {
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  font-weight: 400;
  margin-bottom: .4rem;
}
.brux-p2 {
  color: var(--text-2);
  font-size: .86rem;
  line-height: 1.55;
}
.brux-div5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 2rem;
}
.brux-div6 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid var(--line);
}
.brux-div7 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 2rem;
  color: var(--teal);
  line-height: 1;
}
.brux-div8 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
.brux-div9 {
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid rgba(255,181,71,.18);
}
.brux-span3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .4rem .8rem;
  border-radius: 99px;
  color: var(--warn);
  background: rgba(255,181,71,.08);
  border: 1px solid rgba(255,181,71,.25);
}
.brux-ul1 {
  list-style: none;
  padding: 0;
  display: grid;
  gap: .85rem;
}
.brux-li1 {
  color: var(--text-2);
  font-size: .92rem;
  line-height: 1.55;
  padding-left: 1.6rem;
  position: relative;
}
.brux-span4 {
  position: absolute;
  left: 0;
  color: var(--warn);
  font-weight: 500;
}
.brux-div10 {
  padding: 2rem 1.75rem;
  border-radius: 18px;
  background: linear-gradient(180deg,rgba(21,42,77,.5),rgba(15,31,58,.25));
  border: 1px solid var(--teal-soft);
}
.brux-span5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: .4rem .8rem;
  border-radius: 99px;
  color: var(--teal);
  background: rgba(0,200,216,.08);
  border: 1px solid var(--teal-soft);
}
.brux-span6 {
  position: absolute;
  left: 0;
  color: var(--good);
  font-weight: 500;
}
.dna-section1 {
  padding: 7rem 0;
  position: relative;
  background-color: var(--bg);
  background-image: linear-gradient(180deg,transparent,rgba(15,31,58,.2),transparent);
}
.dna-div1 {
  max-width: 780px;
  margin-bottom: 4rem;
}
.dna-div2 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.25rem;
  margin-bottom: 4rem;
}
.dna-div3 {
  padding: 1.5rem 1.35rem;
  border-radius: 14px;
  background-color: #101f38;
  background-image: linear-gradient(180deg,rgba(21,42,77,.4),rgba(15,31,58,.2));
  border: 1px solid var(--line);
}
.dna-span1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .75rem;
  display: block;
}
.dna-h41 {
  font-family: 'Fraunces', serif;
  font-size: 1.02rem;
  font-weight: 400;
  margin-bottom: .5rem;
}
.dna-p1 {
  color: var(--text-2);
  font-size: .85rem;
  line-height: 1.55;
}
.dna-div4 {
  padding: 2.5rem;
  border-radius: 18px;
  margin-bottom: 3rem;
  background-color: #101f38;
  background-image: linear-gradient(135deg,rgba(0,200,216,.05),rgba(15,31,58,.4));
  border-left: 3px solid var(--teal);
}
.dna-span2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: .6rem;
  display: block;
}
.dna-p2 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.3rem,2.2vw,1.7rem);
  line-height: 1.45;
  color: var(--text);
}
.rev-a1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  text-decoration: none;
  max-width: 620px;
  margin: 0 auto 3rem;
  padding: 1.5rem 2rem;
  border-radius: 20px;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  transition: all 0.3s ease;
}
.rev-div1 {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.rev-div2 {
  text-align: left;
}
.rev-div3 {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
}
.rev-div4 {
  font-size: .8rem;
  color: var(--text-3);
}
.rev-span1 {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 2.4rem;
  color: var(--teal);
  line-height: 1;
}
.rev-span2 {
  color: #fbbf24;
  font-size: 1.3rem;
  margin-right: 2px;
}
.rev-div5 {
  font-size: .8rem;
  color: var(--text-2);
  margin-top: 2px;
}
.review-card {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 3rem 3rem 2.5rem;
  border-radius: 24px;
  background: rgba(255,255,255,.03);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-strong);
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  transition: all 0.5s ease;
}
.rev-div7 {
  margin-bottom: 1.5rem;
}
.review-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem,2vw,1.45rem);
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 2rem;
  min-height: 150px;
}
.review-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: var(--teal);
}
.rev-span3 {
  color: var(--text-3);
  font-weight: 400;
  font-size: .82rem;
  margin-left: .6rem;
}
.rev-div9 {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
  align-items: center;
}
.review-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  transition: all 0.3s;
}
.rev-div10 {
  display: flex;
  gap: .4rem;
}
.review-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.rev-div11 {
  text-align: center;
  margin-top: 2.5rem;
}
.rev-a2 {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  border-radius: 99px;
  font-size: .88rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line-strong);
  transition: all 0.3s ease;
}
.contact-div1 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
}
.contact-h21 {
  font-size: clamp(2rem,4.5vw,3.75rem);
  font-weight: 300;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.contact-div2 {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.contact-svg1 {
  margin-top: 2px;
  flex-shrink: 0;
}
.contact-div3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: .3rem;
}
.contact-div4 {
  font-size: 1.05rem;
  color: var(--text);
}
.contact-div5 {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(0,200,216,.05);
  border: 1px solid var(--teal-soft);
}
.contact-span1 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--teal);
  text-transform: uppercase;
}
.contact-p1 {
  color: var(--text-2);
  font-size: .92rem;
  margin-top: .3rem;
}
.contact-div6 {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.contact-a1 {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  color: var(--teal);
  border: 1px solid var(--teal);
  transition: all 0.3s ease;
}
.contact-div7 {
  padding: 2.5rem;
  border-radius: 20px;
  background-color: #101f38;
  border: 1px solid var(--line-strong);
}
.contact-h31 {
  font-family: 'Fraunces', serif;
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: .5rem;
}
.contact-p2 {
  color: var(--text-2);
  font-size: .92rem;
  margin-bottom: 2rem;
}
.contact-div8 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.field {
  width: 100%;
  padding: .95rem 1.1rem;
  background: #0a1220;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: .95rem;
  transition: border-color 0.3s, background 0.3s;
  outline: none;
}
.mb-125 {
  margin-bottom: 1.25rem;
}
.field-textarea {
  width: 100%;
  padding: .95rem 1.1rem;
  background: #0a1220;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: .95rem;
  transition: border-color 0.3s, background 0.3s;
  outline: none;
  resize: vertical;
  min-height: 110px;
}
.contact-submit {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  background: var(--teal);
  color: var(--bg);
  box-shadow: 0 4px 24px var(--teal-glow);
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
  opacity: 1;
}
.contact-p3 {
  color: var(--text-3);
  font-size: .75rem;
  margin-top: 1.5rem;
  text-align: center;
}
.footer-footer1 {
  padding: 4rem 0 2.5rem;
  border-top: 1px solid var(--line);
  background: rgba(7,13,24,.4);
}
.footer-div1 {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}
.footer-span1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.footer-img1 {
  height: 54px;
  width: auto;
  display: block;
}
.footer-p1 {
  color: var(--text-2);
  font-size: .92rem;
  max-width: 340px;
}
.footer-h41 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  font-weight: 500;
}
.footer-ul1 {
  list-style: none;
  padding: 0;
}
.footer-li1 {
  margin-bottom: .6rem;
}
.footer-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: .92rem;
  transition: color 0.3s;
}
.footer-span2 {
  color: var(--teal);
  font-size: .92rem;
}
.footer-li2 {
  margin-bottom: .6rem;
  margin-top: 1rem;
}
.footer-a2 {
  color: var(--text-2);
  text-decoration: none;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.footer-span3 {
  color: #fbbf24;
}
.footer-div2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--text-3);
}

/* ── 6. INTERACTIVE STATES ── */

/* nav: scrolled state (window.scrollY > 60) */
.site-nav.is-scrolled {
  padding: 0.6rem 0;
  background: rgba(7, 13, 24, 0.88);
  border-bottom: 1px solid var(--line);
}
.site-nav.is-scrolled .nav-logo {
  padding: 5px 12px;
}
.site-nav.is-scrolled .nav-logo-img {
  height: 30px;
}

/* nav: "Book a Visit" dropdown */
.nav-book-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: rgba(7, 13, 24, 0.95);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 0.5rem;
  min-width: 240px;
  z-index: 200;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.nav-book-item {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.nav-book-item:hover {
  background: rgba(0, 200, 216, 0.08);
}
.nav-book-name {
  font-weight: 600;
}
.nav-book-role {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 0.15rem;
}

/* nav: mobile menu */
.nav-mobile-menu {
  position: absolute;
  top: 100%;
  left: 1rem;
  right: 1rem;
  background: rgba(7, 13, 24, 0.95);
  border: 1px solid var(--line-strong);
  padding: 0.75rem;
  border-radius: 14px;
  backdrop-filter: blur(20px);
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-mobile-link {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-mobile-link--featured {
  color: var(--teal);
}
.nav-mobile-book {
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 0.5rem;
}
.nav-mobile-book-label {
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
}
.nav-mobile-book-link {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
}

/* reviews: carousel dots */
.review-dot.is-active {
  width: 24px;
  background: var(--teal);
}

/* reviews: Google badge hover. The prototype set border and shadow inline,
   so only the lift took effect; this keeps that behaviour. */
.google-badge:hover {
  transform: translateY(-2px);
}

/* contact form: sending and result states */
.contact-submit:disabled {
  cursor: wait;
  opacity: 0.7;
}
.contact-status {
  margin-top: 1rem;
  font-size: 0.9rem;
  text-align: center;
}
.contact-status--success {
  color: var(--good);
}
.contact-status--error {
  color: var(--danger);
}

/* services: detail modal */
.svc-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.svc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 13, 24, 0.85);
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.svc-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  max-height: 88vh;
  background: linear-gradient(180deg, #0f1f3a 0%, #0a1628 100%);
  border: 1px solid var(--line-strong);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 200, 216, 0.08);
  animation: hero-reveal 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.svc-modal-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: radial-gradient(ellipse at top, rgba(0, 200, 216, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.svc-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(7, 13, 24, 0.6);
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.svc-modal-body {
  overflow-y: auto;
  padding: 3rem 3rem 2.5rem;
}
.svc-detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--teal);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}
.svc-detail-title {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 1.25rem;
  max-width: 90%;
}
.svc-detail-lead {
  font-size: 1.08rem;
  color: var(--text-2);
  margin-bottom: 2.5rem;
  line-height: 1.65;
  max-width: 680px;
}
.svc-detail-block {
  margin-bottom: 2.25rem;
}
.svc-detail-heading {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}
.svc-detail-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}
.svc-detail-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  color: var(--text-2);
  font-size: 0.96rem;
  line-height: 1.55;
}
.svc-detail-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal-glow);
  margin-top: 0.55rem;
  flex-shrink: 0;
}
.svc-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.svc-step {
  padding: 1.25rem;
  border-radius: 14px;
  background: rgba(0, 200, 216, 0.04);
  border: 1px solid var(--teal-soft);
}
.svc-step-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--teal);
  font-weight: 300;
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.svc-step-title {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}
.svc-step-desc {
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.5;
  display: block;
}
.svc-callout {
  padding: 1.5rem 1.75rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 200, 216, 0.07), rgba(15, 31, 58, 0.4));
  border-left: 3px solid var(--teal);
  margin-bottom: 2.25rem;
}
.svc-callout-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.6rem;
  display: block;
}
.svc-callout-body {
  color: var(--text-2);
  font-size: 0.95rem;
}
.svc-faq-em {
  font-style: italic;
  color: var(--teal);
}
.svc-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.svc-faq {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7, 13, 24, 0.4);
  overflow: hidden;
}
.svc-faq-q {
  padding: 1.1rem 1.25rem;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--text);
  list-style: none;
}
.svc-faq-a {
  padding: 0 1.25rem 1.1rem;
  color: var(--text-2);
  font-size: 0.92rem;
  line-height: 1.65;
}
.svc-detail-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.svc-detail-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.8rem;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease;
}

/* teledentistry: booking wizard. The modal sits inside a centred block,
   so its text inherits text-align: center, as in the prototype. */
.td-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(4, 9, 18, 0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.td-panel {
  width: 100%;
  max-width: 620px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0d1c34, #0a1526);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  position: relative;
}
.td-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  cursor: pointer;
  font-size: 1.1rem;
  z-index: 2;
}
.td-body {
  padding: 2.25rem 2.25rem 2rem;
}
.td-progress {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
}
.td-progress-seg {
  height: 4px;
  flex: 1;
  border-radius: 99px;
  background: var(--line-strong);
  transition: background 0.3s;
}
.td-progress-seg.is-active {
  background: var(--magenta);
}
.td-h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 400;
}
.td-h3--intro {
  font-size: 1.6rem;
  margin-bottom: 0.4rem;
}
.td-h3--sub {
  margin-bottom: 0.4rem;
}
.td-h3--details {
  margin-bottom: 1.5rem;
}
.td-h3--consent {
  margin-bottom: 1rem;
}
.td-h3--done {
  margin-bottom: 0.5rem;
}
.td-intro {
  color: var(--text-2);
  font-size: 0.95rem;
  margin-bottom: 1.75rem;
}
.td-sub {
  color: var(--text-2);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}
.td-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-3);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.td-pain-value {
  color: var(--magenta);
}
.td-tier {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 1rem;
  padding: 1.35rem 1.5rem;
  border-radius: 16px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  transition: all 0.2s;
}
.td-tier.is-selected {
  background: rgba(236, 15, 125, 0.1);
  border-color: rgba(236, 15, 125, 0.5);
}
.td-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.td-tier-title {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  color: var(--text);
}
.td-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: transparent;
  flex-shrink: 0;
}
.td-tier.is-selected .td-radio {
  border-color: var(--magenta);
  background: var(--magenta);
}
.td-tier-hours {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 0.55rem;
}
.td-tier-desc {
  color: var(--text-2);
  font-size: 0.88rem;
  line-height: 1.55;
}
.td-actions {
  display: flex;
  margin-top: 1.25rem;
}
.td-actions--end {
  justify-content: flex-end;
}
.td-actions--between {
  justify-content: space-between;
}
.td-actions--details {
  margin-top: 1.5rem;
}
.td-actions--split {
  justify-content: space-between;
  margin-top: 0;
}
.td-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.95rem 1.6rem;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--magenta);
  color: #fff;
  box-shadow: 0 4px 24px var(--magenta-glow);
  opacity: 1;
  transition: all 0.25s ease;
}
.td-btn-primary:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.td-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.4rem;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border: 1px solid var(--line-strong);
}
.td-btn-call {
  text-decoration: none;
  background: var(--danger);
  border: none;
  color: #fff;
}
.td-btn-link {
  text-decoration: none;
}
.td-urgent-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.td-urgent {
  text-align: left;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.td-urgent.is-selected {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.5);
}
.td-emergency {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: 14px;
  padding: 1.25rem;
}
.td-emergency-title {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  color: var(--danger-soft);
  margin-bottom: 0.5rem;
}
.td-emergency-text {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.td-emergency-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.td-range {
  width: 100%;
  accent-color: #ec0f7d;
  margin-bottom: 1.5rem;
}
.td-symptom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.td-symptom {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.84rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.td-symptom.is-selected {
  background: rgba(236, 15, 125, 0.12);
  border-color: rgba(236, 15, 125, 0.5);
}
.td-priority {
  background: rgba(255, 181, 71, 0.1);
  border: 1px solid rgba(255, 181, 71, 0.4);
  color: #ffce80;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}
.td-field {
  margin-bottom: 1.1rem;
}
.td-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.td-input {
  width: 100%;
  padding: 0.9rem 1.05rem;
  background: var(--field-bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 0.95rem;
  outline: none;
}
.td-select {
  appearance: none;
}
.td-fee {
  background: rgba(236, 15, 125, 0.06);
  border: 1px solid rgba(236, 15, 125, 0.25);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.td-fee-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.td-fee-label {
  color: var(--text-2);
  font-size: 0.92rem;
}
.td-fee-amount {
  font-family: 'Fraunces', serif;
  font-size: 1.6rem;
  color: var(--magenta);
}
.td-fee-note {
  color: var(--text-3);
  font-size: 0.8rem;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.td-consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: 1.5rem;
}
.td-checkbox {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #ec0f7d;
  flex-shrink: 0;
}
.td-consent-text {
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.6;
}
.td-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.td-done {
  text-align: center;
}
.td-done-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin: 0 auto 1.25rem;
  display: grid;
  place-items: center;
  background: rgba(93, 212, 163, 0.12);
  border: 1px solid rgba(93, 212, 163, 0.4);
}
.td-done-text {
  color: var(--text-2);
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}
.td-reference {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--magenta);
  padding: 0.65rem 1.25rem;
  border-radius: 12px;
  background: rgba(236, 15, 125, 0.08);
  border: 1px solid rgba(236, 15, 125, 0.25);
  display: inline-block;
  margin-bottom: 1.75rem;
}
.td-next {
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 1.5rem;
}
.td-next-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.td-next-list {
  color: var(--text-2);
  font-size: 0.9rem;
  line-height: 1.7;
  padding-left: 1.1rem;
  margin: 0;
}
.td-code {
  color: var(--magenta);
  font-family: 'JetBrains Mono', monospace;
}
.td-btn-done {
  margin-top: 1.75rem;
  width: 100%;
}

/* ── 7. RESPONSIVE OVERRIDES (ported from the prototype's scoped styles) ── */
@media (max-width: 980px) {
  .nav-desktop {
    display: none !important;
  }
  .nav-mobile-toggle {
    display: grid !important;
    align-items: center;
    justify-items: center;
    place-items: center;
  }
  .intro-grid {
    grid-template-columns: 1fr !important;
    gap: 2.75rem !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.5rem !important;
  }
  .pillars-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tele-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .tele-connect-grid {
    grid-template-columns: 1fr !important;
  }
  .doctor-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .steps-grid-sys {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .disease-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .lipid-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .axis-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .mineral-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .sys-hero-stats {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .symptom-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .causes-grid {
    grid-template-columns: 1fr !important;
  }
  .compare-grid {
    grid-template-columns: 1fr !important;
  }
  .gene-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .contact-layout {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 2.5rem !important;
  }
}
@media (max-width: 900px) {
  .hs-top {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .hs-groups {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 768px) {
  .staff-grid {
    grid-template-columns: 1fr !important;
    max-width: 480px !important;
  }
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 640px) {
  .scroll-cue-wrap {
    display: none !important;
  }
  /* the prototype also set align-items: stretch here, but its inline
     align-items: center won, so the column stays centred */
  .hero-actions {
    flex-direction: column;
  }
  .hero-actions a {
    justify-content: center;
  }
  .pillars-grid {
    grid-template-columns: 1fr !important;
  }
  .steps-grid-sys {
    grid-template-columns: 1fr !important;
  }
  .disease-grid {
    grid-template-columns: 1fr !important;
  }
  .mineral-grid {
    grid-template-columns: 1fr !important;
  }
  .symptom-grid {
    grid-template-columns: 1fr !important;
  }
  .gene-grid {
    grid-template-columns: 1fr !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 560px) {
  .tele-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    max-width: 340px !important;
    margin: 0 auto !important;
  }
}