/* ================================================================
   QUIDDITY DIGITAL — ocean-current.css
   "Hidden Current" — Visual Identity System
   Abstract deep-ocean / bioluminescent / technological aesthetic.
   Typography: Archive (headings) · Inter (body) · Space Mono
   (data/labels) · Dash Horizon (display numerals only — digits 0-9)
   · TT Drugs Trial Black (section eyebrow/tag labels only)
   Loaded after styles.css on every page.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600;700&display=swap');

/* Dash Horizon — demo charset is digits + A-Z/a-z only (no symbols).
   Used ONLY where markup isolates pure digits from any suffix glyph
   (×, %, +), so the missing-glyph fallback risk is zero. */
@font-face {
  font-family: 'Dash Horizon';
  src: url('public/fonts/Dash-Horizon-Demo.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Archive — primary heading family (replaces Space Grotesk).
   Three real faces: Regular, Bold, Italic. Declared on one
   font-family name so font-weight/font-style in existing rules
   resolve to the correct file automatically. */
@font-face {
  font-family: 'Archive';
  src: url('public/fonts/Archive.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archive';
  src: url('public/fonts/ArchiveBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archive';
  src: url('public/fonts/ArchiveItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* TT Drugs Trial Black — accent face for section eyebrow/tag
   labels only (.section-tag, .signal-tag, .philosophy-label).
   Single Black-weight file; wide weight range so it always
   resolves regardless of the font-weight requested in CSS. */
@font-face {
  font-family: 'TT Drugs Trial Black';
  src: url('public/fonts/TT Drugs Trial Black.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── DESIGN TOKENS ─────────────────────────────────────────────
   Core palette: abyss / depth (structure) · current / undertow (the
   two bioluminescent currents — primary cyan & secondary violet).
   ──────────────────────────────────────────────────────────── */
:root {
  --abyss:         #050B10;
  --depth-1:       #0A151D;
  --depth-2:       #0F202B;
  --depth-3:       #16313E;

  --current:       #22D9E8;
  --current-soft:  #8FF4F8;
  --current-dim:   #0E8C99;

  --undertow:      #6E78FF;
  --undertow-soft: #C2C8FF;
  --undertow-dim:  #41479E;

  --text-bright:   #EAF4F7;
  --text-soft:     #9FB9C7;
  --text-muted:    #56727F;

  --edge:          rgba(110,228,240,.08);
  --edge-strong:   rgba(110,228,240,.20);
  --edge-violet:   rgba(120,130,255,.18);

  --ease-current:  cubic-bezier(.22,.61,.36,1);
  --dur-a: 130s;
  --dur-b: 95s;
  --dur-c: 170s;

  /* ── remap legacy tokens so the existing component library
     re-themes automatically without per-rule edits ── */
  --blue:        var(--current);
  --blue-d:      #6FE6F1;
  --blue-l:      rgba(34,217,232,.07);
  --blue-mid:    rgba(34,217,232,.14);
  --blue-border: rgba(34,217,232,.26);

  /* --cta-from / --cta-to intentionally NOT remapped here —
     they fall through to styles.css's original gold values
     (#E1AD01 → #F59E0B). Gold is the site's CTA colour;
     current/undertow are the ocean-identity accent colours. */

  --white:   var(--depth-1);
  --bg:      var(--abyss);
  --bg-blue: #0B1E27;
  --border:   var(--edge);
  --border-d: var(--edge-strong);

  --tx:     var(--text-bright);
  --tx-sub: var(--text-soft);
  --tx-lt:  var(--text-muted);

  --red:   #FF6B6B;
  --green: #34D8A8;

  --ff-h:    'Archive', sans-serif;
  --ff-b:    'Inter', sans-serif;
  --ff-mono: 'Space Mono', monospace;

  --shadow-sm:   0 2px 14px rgba(0,0,0,.3);
  --shadow:      0 10px 32px rgba(0,0,0,.4);
  --shadow-md:   0 16px 48px rgba(0,0,0,.5);
  --shadow-blue: 0 8px 32px rgba(34,217,232,.20);
  --shadow-cta:  0 10px 36px rgba(245,158,11,.30);
}

/* ── GLOBAL BASE ──────────────────────────────────────────────── */
html, body { background: var(--abyss); }
* { scrollbar-color: var(--current-dim) var(--depth-1); }
::selection { background: rgba(34,217,232,.25); color: var(--text-bright); }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(28px) } to { opacity: 1; transform: none } }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-current), transform .9s var(--ease-current) }
.reveal.in { opacity: 1; transform: none }


/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS — additions / corrections
   ════════════════════════════════════════════════════════════ */
:root {
  /* Gold — back as a highlighter accent */
  --gold:      #F59E0B;
  --gold-hi:   #FBC741;
  --gold-8:    rgba(245,158,11,.08);
  --gold-20:   rgba(245,158,11,.20);
  --gold-35:   rgba(245,158,11,.35);

  /* Text — brighter across the board */
  --text-bright: #FFFFFF;
  --text-main:   #E8F0F5;
  --text-soft:   #C4D8E8;
  --text-muted:  #7090A8;
}

/* ════════════════════════════════════════════════════════════
   NAVBAR — glass, blur, cyan/violet edge glow
   ════════════════════════════════════════════════════════════ */
#navbar {
  background: rgba(5,11,16,.5) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--edge) !important;
  transition: background .7s var(--ease-current), border-color .7s var(--ease-current), box-shadow .7s var(--ease-current);
}
#navbar::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--current) 35%, var(--undertow) 65%, transparent 96%);
  opacity: .3;
  pointer-events: none;
}
#navbar.navbar-scrolled, #navbar.solid {
  background: rgba(5,11,16,.85) !important;
  border-bottom-color: var(--edge-strong) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35) !important;
}

/* ── Logo — pre-cropped wordmark asset (assets/Header-wordmark-v3.svg).
   Gold "QUIDDITY" + white "DIGITAL", icon mark already removed
   at the asset level, so this is just a plain sized image.
   Sized larger for a real brand-mark presence; scales down in
   stages at the existing layout breakpoints, never stretched
   (height set, width auto preserves the SVG's native ratio). ── */
.nav-logo {
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  line-height: 0 !important;
}
.nav-logo-wrap { display: inline-block; line-height: 0; transition: height .3s var(--ease-current) }
.nav-logo-img { height: 42px; width: auto; display: block; transition: height .3s var(--ease-current) }
@media (max-width: 1024px) {
  .nav-logo-img { height: 36px }
}
@media (max-width: 768px) {
  .nav-logo-img { height: 28px }
}
@media (max-width: 480px) {
  .nav-logo-img { height: 25px }
}

.nav-links a:not(.nav-cta) {
  color: var(--text-muted) !important;
  font-family: var(--ff-mono) !important;
  font-size: .76rem !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}
.nav-links a:not(.nav-cta):hover { color: var(--text-bright) !important; background: rgba(34,217,232,.06) !important }
.nav-links a.nav-cta {
  font-family: var(--ff-h) !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-size: .85rem !important;
  color: var(--abyss) !important;
}
.hamburger span { background: var(--text-bright) !important }


/* ════════════════════════════════════════════════════════════
   HERO  #home — Hidden Current
   ════════════════════════════════════════════════════════════ */
#home {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 70% 60% at 78% 18%, rgba(34,217,232,.06) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 8% 92%,  rgba(110,120,255,.05) 0%, transparent 55%),
    linear-gradient(170deg, var(--abyss) 0%, var(--depth-1) 45%, #08121A 100%) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#home::before, #home::after { display: none !important }

/* atmospheric canvas — noise + vignette */
.hero-ocean-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden }
.hero-ocean-canvas::before {
  content: ''; position: absolute; inset: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.hero-ocean-canvas::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 45%, transparent 45%, rgba(3,6,9,.6) 100%);
}

/* drifting glow orbs — cyan + violet, asymmetric, very slow */
.bio-orb { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform }
.bio-orb--a {
  width: 760px; height: 760px; top: -220px; right: -160px;
  background: radial-gradient(circle, rgba(34,217,232,.085) 0%, transparent 65%);
  animation: drift-a var(--dur-a) ease-in-out infinite alternate;
}
.bio-orb--b {
  width: 560px; height: 560px; bottom: -140px; left: -100px;
  background: radial-gradient(circle, rgba(110,120,255,.07) 0%, transparent 60%);
  animation: drift-b var(--dur-c) ease-in-out infinite alternate;
}
.bio-orb--c {
  width: 340px; height: 340px; top: 58%; left: 46%;
  background: radial-gradient(circle, rgba(143,244,248,.045) 0%, transparent 60%);
  animation: drift-c var(--dur-b) ease-in-out infinite alternate;
}
@keyframes drift-a { 0% { transform: translate(0,0) scale(1) } 100% { transform: translate(-60px,40px) scale(1.07) } }
@keyframes drift-b { 0% { transform: translate(0,0) scale(1) } 100% { transform: translate(50px,-35px) scale(1.05) } }
@keyframes drift-c { 0% { transform: translate(0,0) scale(.96) } 100% { transform: translate(30px,24px) scale(1.04) } }

/* ── CURRENT FIELD — the signature element ──────────────────
   Layered, slow-flowing channel lines with a traveling glow
   segment. Abstract "data current" rather than literal waves. */
.current-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0 }
.cl { fill: none; stroke-linecap: round }
.cl--a { stroke: var(--current);  opacity: .10; stroke-width: 1 }
.cl--b { stroke: var(--undertow); opacity: .09; stroke-width: 1 }
.cl--c { stroke: var(--current);  opacity: .06; stroke-width: 1 }
.cl--pulse { stroke-width: 2.4; filter: url(#curBlur) }
.cl--a.cl--pulse { stroke: var(--current);  opacity: .50; stroke-dasharray: 4 110; animation: curflow var(--dur-a) linear infinite }
.cl--b.cl--pulse { stroke: var(--undertow); opacity: .45; stroke-dasharray: 4 130; animation: curflow var(--dur-c) linear infinite reverse; animation-delay: -30s }
.cl--c.cl--pulse { stroke: var(--current);  opacity: .35; stroke-dasharray: 3 90;  animation: curflow var(--dur-b) linear infinite; animation-delay: -60s }
@keyframes curflow { to { stroke-dashoffset: -1200 } }

/* bioluminescent particles — cyan + violet */
.hero-particles { position: absolute; inset: 0; pointer-events: none }
.particle {
  position: absolute; border-radius: 50%; opacity: 0;
  background: var(--current);
  box-shadow: 0 0 10px var(--current), 0 0 2px var(--current-soft);
  animation: float-up linear infinite;
}
.particle.p-violet { background: var(--undertow); box-shadow: 0 0 10px var(--undertow), 0 0 2px var(--undertow-soft) }
@keyframes float-up {
  0%   { opacity: 0;   transform: translateY(0) }
  10%  { opacity: .82 }
  82%  { opacity: .28 }
  100% { opacity: 0;   transform: translateY(-230px) }
}

/* ── HERO LAYOUT ─────────────────────────────────────────────── */
.hero-inner { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; align-items: stretch; position: relative; z-index: 1 }
.hero-editorial { padding: 168px 0 110px; max-width: 860px }

/* discipline strip — instrument readout, mono */
.hero-eyebrow { display: flex !important; align-items: center !important; gap: 0 !important; margin-bottom: 44px !important }
.discipline-strip { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; opacity: 0; animation: fadeInUp .8s var(--ease-current) .1s forwards }
.discipline-item {
  font-family: var(--ff-mono); font-size: .66rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; transition: color 1.2s var(--ease-current);
}
.discipline-item.active { color: var(--current) }
.discipline-sep { width: 22px; height: 1px; background: rgba(34,217,232,.18); margin: 0 13px; flex-shrink: 0 }

/* headline */
.hero-h1 {
  font-family: var(--ff-h) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: clamp(2.9rem, 6vw, 5.7rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em !important;
  color: var(--text-bright) !important;
  margin-bottom: 0 !important;
  max-width: 840px;
  opacity: 0;
  animation: fadeInUp 1s var(--ease-current) .25s forwards;
}
.hero-h1 .h1-line { display: block }
.hero-h1 em {
  font-style: normal !important; font-family: inherit !important;
  font-weight: 500 !important; font-size: 1em !important;
  letter-spacing: inherit !important; color: var(--current-soft) !important;
}
.hero-h1 .h1-accent {
  font-style: normal !important; font-family: inherit !important;
  font-weight: 700 !important; font-size: 1em !important;
  letter-spacing: inherit !important;
  color: var(--gold) !important;
}

.hero-rule {
  display: block; width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--current), transparent);
  margin: 38px 0 32px; opacity: 0;
  animation: fadeInUp .7s var(--ease-current) .55s forwards;
}

.hero-sub {
  font-family: var(--ff-b) !important; font-size: 1.06rem !important; font-weight: 400 !important;
  line-height: 1.85 !important; color: var(--text-main) !important; max-width: 480px !important;
  margin-bottom: 48px !important; letter-spacing: .005em;
  opacity: 0; animation: fadeInUp .8s var(--ease-current) .45s forwards;
}

.hero-actions { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; margin-bottom: 68px !important; opacity: 0; animation: fadeInUp .8s var(--ease-current) .6s forwards }

.btn-ocean-primary {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 32px;
  font-family: var(--ff-mono); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--abyss);
  background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
  border: none; border-radius: 3px; cursor: pointer; text-decoration: none;
  transition: transform .4s var(--ease-current), box-shadow .4s var(--ease-current);
  box-shadow: 0 6px 28px rgba(245,158,11,.22);
}
.btn-ocean-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-cta) }
.btn-ocean-primary .btn-arr { transition: transform .4s var(--ease-current); display: inline-block }
.btn-ocean-primary:hover .btn-arr { transform: translateX(5px) }

.btn-ocean-ghost {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px;
  font-family: var(--ff-mono); font-size: .78rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-soft); background: transparent; border: 1px solid var(--edge-strong); border-radius: 3px;
  cursor: pointer; text-decoration: none;
  transition: color .4s, border-color .4s, transform .4s var(--ease-current);
}
.btn-ocean-ghost:hover { color: var(--current-soft); border-color: rgba(34,217,232,.4); transform: translateY(-2px) }

/* proof strip */
.hero-trust-bar { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0 !important; margin-bottom: 0 !important; opacity: 0; animation: fadeInUp .7s var(--ease-current) .75s forwards; border-top: 1px solid var(--edge) !important; padding-top: 30px !important }
.trust-item { display: inline-flex !important; align-items: center !important; font-family: var(--ff-mono) !important; font-size: .64rem !important; font-weight: 400 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--text-muted) !important; transition: color .3s !important; padding: 0 20px !important }
.trust-item:first-child { padding-left: 0 !important }
.trust-item svg { display: none !important }
.trust-item:hover { color: var(--text-soft) !important }
.trust-sep { width: 1px !important; height: 14px !important; background: var(--edge-strong) !important; display: inline-block !important; font-size: 0 !important }
@media (max-width: 768px) {
  .hero-trust-bar { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important }
  .trust-item { padding: 0 !important }
  .trust-sep { display: none !important }
}

/* stats row */
.hero-stats { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 46px !important; padding-top: 34px !important; border-top: 1px solid var(--edge) !important; opacity: 0; animation: fadeInUp .7s var(--ease-current) .88s forwards }
.hstat { flex: 1; min-width: 100px; padding: 26px 14px 24px !important; position: relative; text-align: center }
.hstat-n { font-family: 'Dash Horizon', var(--ff-h) !important; font-size: 2.3rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--current) !important; letter-spacing: -.02em !important; display: inline-block !important }
.hstat-n sup { font-family: var(--ff-mono) !important; font-size: .5em !important; font-weight: 700 !important; vertical-align: super !important; color: var(--undertow-soft) !important }
.hstat-l { font-family: var(--ff-mono) !important; font-size: .6rem !important; font-weight: 400 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--text-muted) !important; margin-top: 6px !important; display: block !important }
.hstat:nth-child(even) .hstat-n { color: var(--undertow-soft) !important }

.hero-img-col { display: none !important }


/* ════════════════════════════════════════════════════════════
   SIGNAL BAND — replaces the editorial pull-quote.
   Framed as an instrument readout, not a magazine quote.
   ════════════════════════════════════════════════════════════ */
.philosophy-band, .signal-band {
  background-image:
    linear-gradient(90deg, transparent, var(--current) 30%, var(--undertow) 70%, transparent),
    radial-gradient(ellipse 50% 100% at 85% 50%, rgba(110,120,255,.045) 0%, transparent 60%),
    linear-gradient(180deg, var(--depth-1) 0%, var(--abyss) 100%);
  background-size: 100% 1px, auto, auto;
  background-position: top, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-color: var(--abyss);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--edge);
}
.philosophy-band::before, .philosophy-band::after,
.signal-band::before, .signal-band::after { display: none !important }

.philosophy-inner, .signal-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 28px;
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
}

.signal-glyph { flex-shrink: 0; width: 88px; opacity: .85; line-height: 0 }
.signal-glyph svg { width: 100%; height: auto; display: block }

.signal-meta {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--ff-mono);
  padding-right: 32px; border-right: 1px solid var(--edge);
}
.signal-tag, .philosophy-label { font-size: .62rem !important; letter-spacing: .24em !important; text-transform: uppercase !important; color: var(--text-muted) !important; font-weight: 700 !important; font-family: 'TT Drugs Trial Black', var(--ff-mono) !important; margin-bottom: 0 !important }
.signal-coords { font-size: .7rem; letter-spacing: .04em; color: var(--current-soft) }
.philosophy-marker { display: none !important }

.signal-text, .philosophy-quote {
  flex: 1; min-width: 240px;
  font-family: var(--ff-h) !important; font-weight: 400 !important; font-style: normal !important;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem) !important; line-height: 1.4 !important;
  letter-spacing: -.005em !important; color: var(--text-bright) !important;
}
.signal-text .hl, .philosophy-quote em {
  color: var(--gold) !important; font-weight: 600 !important;
  font-style: normal !important; font-family: inherit !important; font-size: 1em !important; letter-spacing: inherit !important;
}
.philosophy-attr { display: none !important }
blockquote .signal-text { font-style: normal }


/* ════════════════════════════════════════════════════════════
   SECTION AMBIENT BACKGROUNDS — asymmetric depth glows
   ════════════════════════════════════════════════════════════ */
#about {
  background-image:
    radial-gradient(ellipse 60% 70% at 14% 22%, rgba(34,217,232,.05) 0%, transparent 55%),
    linear-gradient(180deg, var(--abyss) 0%, var(--depth-1) 100%) !important;
}
#help {
  background-image:
    linear-gradient(90deg, transparent, var(--current) 30%, var(--undertow) 70%, transparent),
    radial-gradient(ellipse 60% 65% at 86% 18%, rgba(110,120,255,.05) 0%, transparent 55%),
    linear-gradient(180deg, var(--depth-1) 0%, var(--abyss) 100%) !important;
  background-size: 100% 1px, auto, auto !important;
  background-position: bottom, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
#services {
  background-image:
    radial-gradient(ellipse 55% 60% at 10% 85%, rgba(34,217,232,.045) 0%, transparent 55%),
    linear-gradient(180deg, var(--abyss) 0%, var(--depth-1) 55%, var(--abyss) 100%) !important;
}
#blogs {
  background-image:
    linear-gradient(90deg, transparent, var(--current) 30%, var(--undertow) 70%, transparent),
    radial-gradient(ellipse 55% 65% at 90% 82%, rgba(110,120,255,.045) 0%, transparent 55%),
    linear-gradient(180deg, var(--depth-1) 0%, var(--abyss) 100%) !important;
  background-size: 100% 1px, auto, auto !important;
  background-position: bottom, center, center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
#booking {
  background-image:
    radial-gradient(ellipse 60% 60% at 22% 18%, rgba(34,217,232,.05) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 85% 92%, rgba(110,120,255,.04) 0%, transparent 55%),
    linear-gradient(180deg, var(--abyss) 0%, var(--depth-1) 100%) !important;
}
#about::before, #about::after,
#help::before, #help::after,
#services::before, #services::after,
#blogs::before, #blogs::after,
#booking::before, #booking::after { display: none !important }

/* shared accent overrides */
.c-cta { color: var(--gold) !important }
.svc-cat.svc-cat--cta { color: var(--gold) !important }

/* Gold as section highlighter */
.c-gold { color: var(--gold) !important }

/* Main content paragraph copy — bright, near-white */
.body-p { color: var(--text-main) !important }


/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn-cta { box-shadow: 0 4px 20px rgba(245,158,11,.20) !important }
.btn-cta:hover { box-shadow: var(--shadow-cta) !important }
.btn-ghost:hover { background: var(--blue-l) !important; color: var(--current-soft) !important; border-color: var(--current) !important }


/* ════════════════════════════════════════════════════════════
   HOW WE HELP — asymmetric stagger + current-edge hover
   ════════════════════════════════════════════════════════════ */
.hc-grid { align-items: start }
.hc {
  --off: 0px;
  transform: translateY(var(--off));
  transition: transform .6s var(--ease-current), border-color .5s, background .5s, box-shadow .5s;
  position: relative; overflow: hidden;
  background: rgba(15,32,43,.55) !important;
  border-color: var(--edge) !important;
  backdrop-filter: blur(6px);
}
.hc:nth-child(2) { --off: 30px }
.hc:nth-child(3) { --off: 12px }
.hc:hover { transform: translateY(calc(var(--off) - 6px)); border-color: var(--edge-strong) !important; background: rgba(15,32,43,.8) !important; box-shadow: var(--shadow-md) }
.hc::after { display: none !important }
.hc::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--current), var(--undertow), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-current);
}
.hc:hover::before { transform: scaleX(1) }
.hc-n { color: rgba(34,217,232,.32) !important; font-family: 'Dash Horizon', var(--ff-mono) !important; font-size: .64rem !important; letter-spacing: .16em !important; font-weight: 700 !important }
.hc h3 { color: var(--text-bright) !important; font-family: var(--ff-h) !important; font-weight: 600 !important }
.hc p { color: var(--text-main) !important; font-family: var(--ff-b) !important }
.hci--grey { background: var(--depth-2) !important; border: 1px solid var(--edge) !important }
.hc-tag { background: var(--blue-l) !important; color: var(--current-soft) !important; border: 1px solid var(--edge) !important; font-family: var(--ff-mono) !important; letter-spacing: .08em !important; font-weight: 400 !important }
.hct--cta { background: rgba(245,158,11,.08) !important; color: var(--gold) !important; border: 1px solid rgba(245,158,11,.30) !important }


/* ════════════════════════════════════════════════════════════
   SERVICES — gentle alternating asymmetry, mono index/labels
   ════════════════════════════════════════════════════════════ */
.svc-row { border-bottom: 1px solid var(--edge) !important; transition: background .5s, padding-left .5s, border-color .5s }
.svc-row:hover { background: rgba(34,217,232,.025) !important; border-radius: var(--r) }
.svc-i { font-family: 'Dash Horizon', var(--ff-mono) !important; color: var(--text-muted) !important; letter-spacing: .12em !important; font-weight: 400 !important }
.svc-cat { font-family: var(--ff-mono) !important; color: var(--current) !important; letter-spacing: .18em !important; font-weight: 400 !important }
.svc-title { color: var(--text-bright) !important; font-family: var(--ff-h) !important; font-weight: 600 !important }
.svc-desc { color: var(--text-main) !important; font-family: var(--ff-b) !important }
.svc-row--featured { background: rgba(245,158,11,.04) !important; border-color: rgba(245,158,11,.22) !important }
.svc-row--featured:hover { background: rgba(245,158,11,.07) !important }
.svc-row:nth-child(even):not(.svc-row--featured) .svc-i { color: var(--undertow-soft) !important }
.svc-row:nth-child(even):not(.svc-row--featured):hover { padding-left: 22px !important }
.svc-row:nth-child(odd):hover { padding-left: 14px !important }


/* ════════════════════════════════════════════════════════════
   ABOUT
   ════════════════════════════════════════════════════════════ */
.about-quiddity-badge { background: rgba(34,217,232,.04) !important; border: 1.5px solid var(--edge-strong) !important; border-left: 4px solid var(--current) !important }
.aq-word { color: var(--current-soft) !important; font-family: var(--ff-h) !important }
.aq-phonetic { color: var(--text-muted) !important; font-family: var(--ff-mono) !important }
.aq-def { color: var(--text-main) !important }
.pillar { color: var(--text-main) !important; transition: var(--t) }
.pillar:hover { border-color: var(--edge-strong) !important; color: var(--text-bright) !important; background: rgba(34,217,232,.025) !important }
.p-dot--dark { background: var(--undertow) !important }


/* ════════════════════════════════════════════════════════════
   BLOG GRID — featured + duo (home), depth stagger (all-posts)
   ════════════════════════════════════════════════════════════ */
#homeBlogGrid { grid-template-columns: repeat(2,1fr) !important; align-items: stretch }
#homeBlogGrid > .blog-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr }
#homeBlogGrid > .blog-card:first-child .blog-thumb { aspect-ratio: auto; height: 100%; min-height: 280px }
#homeBlogGrid > .blog-card:first-child .blog-body { padding: 36px 40px; justify-content: center }
#homeBlogGrid > .blog-card:first-child h3 { font-size: 1.5rem }

#apGrid { align-items: start }
#apGrid > .blog-card:nth-child(3n+2) { margin-top: 34px }
#apGrid > .blog-card:nth-child(3n)   { margin-top: 14px }

/* shared dark card + current-edge hover */
.blog-card { background: rgba(15,32,43,.55) !important; border-color: var(--edge) !important; backdrop-filter: blur(6px); position: relative }
.blog-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--current), var(--undertow), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-current);
}
.blog-card:hover::before { transform: scaleX(1) }
.blog-card:hover { border-color: var(--edge-strong) !important; box-shadow: var(--shadow-md) !important }
.bc { color: var(--current) !important; font-family: var(--ff-mono) !important; letter-spacing: .06em !important }
.blog-card h3 { color: var(--text-bright) !important; font-family: var(--ff-h) !important }
.blog-exc { color: var(--text-main) !important }
.blog-meta { color: var(--text-muted) !important; font-family: var(--ff-mono) !important }
.blog-cta { color: var(--current-soft) !important }
.blog-thumb-ph { opacity: .3 }


/* ════════════════════════════════════════════════════════════
   BOOKING
   ════════════════════════════════════════════════════════════ */
.booking-shell { background: rgba(10,21,29,.6) !important; border-color: var(--edge) !important; backdrop-filter: blur(8px); box-shadow: 0 20px 60px rgba(0,0,0,.45) !important }
.cal-wrap { background: var(--depth-2) !important; border-color: var(--edge) !important; box-shadow: none !important }
.cal-header { background: var(--bg-blue) !important; border-color: var(--edge) !important }
.cal-nav button { background: var(--depth-1) !important; border-color: var(--edge) !important }
.cal-nav button:hover:not(:disabled) { background: var(--current) !important; color: var(--abyss) !important; border-color: var(--current) !important }
.cal-day.first-available { background: rgba(34,217,232,.08) !important }
.cal-day.selected { box-shadow: 0 0 18px rgba(34,217,232,.45) !important; color: var(--abyss) !important }
.fg input, .fg select, .fg textarea { background: var(--depth-1) !important; border-color: var(--edge) !important; color: var(--text-bright) !important }
.fg input:focus, .fg select:focus, .fg textarea:focus { background: var(--depth-2) !important; border-color: var(--current) !important; box-shadow: 0 0 0 3px rgba(34,217,232,.1) !important }
.fg input::placeholder, .fg textarea::placeholder { color: var(--text-muted) !important }
.step-btn.active { background: rgba(34,217,232,.05) !important }
.chk { color: var(--text-main) !important }
.book-summary { background: rgba(34,217,232,.04) !important; border-color: var(--edge-strong) !important }


/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
footer {
  background-image:
    linear-gradient(90deg, transparent, var(--current) 30%, var(--undertow) 70%, transparent),
    linear-gradient(180deg, var(--depth-1) 0%, var(--abyss) 100%) !important;
  background-size: 100% 1px, auto !important;
  background-position: top, center !important;
  background-repeat: no-repeat, no-repeat !important;
  border-top: none !important;
}
.footer-logo { color: var(--text-bright) !important; font-family: var(--ff-h) !important; font-style: normal !important }
.footer-logo em { color: var(--current) !important; font-style: normal !important }
.footer-bottom { border-color: var(--edge) !important }
.f-links a:hover { color: var(--current-soft) !important }
.s-lnk { background: rgba(34,217,232,.04) !important; border-color: var(--edge) !important }
.s-lnk:hover { background: rgba(34,217,232,.1) !important; border-color: var(--edge-strong) !important }
footer h5 { color: var(--current-soft) !important; font-family: var(--ff-mono) !important; letter-spacing: .1em !important; text-transform: uppercase !important; font-weight: 700 !important }


/* ════════════════════════════════════════════════════════════
   MOBILE — simplify, don't strip. Maintain depth.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-editorial { padding: 128px 0 80px }
  .hero-h1 { font-size: clamp(2.5rem, 9.5vw, 3.6rem) !important }
  .discipline-strip { flex-wrap: wrap; gap: 8px }
  .discipline-sep { display: none }

  .cl--c { opacity: .04 }
  .cl--c.cl--pulse { opacity: .22 }
  .bio-orb--c { display: none }

  .philosophy-inner, .signal-inner { flex-direction: column; align-items: flex-start; gap: 20px }
  .signal-meta {
    flex-direction: row; align-items: center; gap: 14px;
    padding-right: 0; border-right: none;
    padding-bottom: 16px; border-bottom: 1px solid var(--edge); width: 100%;
  }
  .signal-glyph { width: 64px !important }

  .hc:nth-child(2), .hc:nth-child(3) { --off: 0px }

  #homeBlogGrid { grid-template-columns: 1fr !important }
  #homeBlogGrid > .blog-card:first-child { grid-column: auto; grid-template-columns: 1fr }
  #homeBlogGrid > .blog-card:first-child .blog-thumb { height: auto; aspect-ratio: 16/9; min-height: 0 }
  #apGrid > .blog-card { margin-top: 0 !important }
}

@media (max-width: 480px) {
  .hero-editorial { padding: 108px 0 64px }
  .hero-h1 { font-size: 2.5rem !important }
  .hero-sub { font-size: .95rem !important }
  .hero-actions { gap: 12px !important }
  .btn-ocean-primary, .btn-ocean-ghost { padding: 13px 22px; font-size: .72rem }
  .signal-band, .philosophy-band { padding: 44px 0 }
  .signal-glyph { width: 56px !important }
  .signal-text, .philosophy-quote { font-size: 1.15rem !important }
  #homeBlogGrid > .blog-card:first-child .blog-body { padding: 24px }
}


/* ════════════════════════════════════════════════════════════
   REDUCED MOTION — currents fade to calm static glows
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bio-orb, .particle, .cl--pulse, .discipline-item, .hero-h1, .hero-sub, .hero-rule,
  .hero-actions, .hero-trust-bar, .hero-stats, .discipline-strip { animation: none !important }
  .cl--pulse { opacity: .18 !important }
  .hero-h1, .hero-sub, .hero-rule, .hero-actions, .hero-trust-bar, .hero-stats, .discipline-strip { opacity: 1 !important; transform: none !important }
  .reveal { transition: opacity .3s ease !important; transform: none !important }
}